@media (max-width: 1380px) {
  .topbar {
    grid-template-columns: minmax(280px, 1fr);
    gap: 16px;
  }

  .topbar__side {
    display: grid;
    gap: 14px;
    justify-items: stretch;
  }

  .topbar__controls {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .topbar__filters,
  .topbar__actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .topbar__user {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    width: 100%;
    min-width: 0;
  }

  .topbar__user-meta {
    grid-column: 1 / -1;
    text-align: left;
  }

  .topbar__user-subtitle {
    max-width: none;
  }

  .topbar__user-button {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 1180px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .main { padding: 24px 22px 36px; }
  .topbar { grid-template-columns: 1fr; gap: 16px; }
  .topbar__side,
  .topbar__controls,
  .topbar__user { width: 100%; }
  .topbar__side { display: grid; gap: 14px; justify-items: stretch; }
  .topbar__controls { flex-wrap: wrap; justify-content: flex-start; }
  .topbar__user { min-width: 0; }
  .topbar__filters,
  .topbar__actions { width: 100%; justify-content: flex-start; }
  .hero-card,
  .metrics-grid,
  .content-grid,
  .compact-grid,
  .stats-row,
  .sla-grid,
  .attention-summary,
  .attention-list,
  .funnel-focus-grid,
  .manager-focus-grid,
  .sla-focus-grid,
  .attention-focus-grid { grid-template-columns: 1fr; }
  .accordion-body { padding: 0 18px 18px; }
  .accordion-summary { padding: 18px; }
}

@media (max-width: 760px) {
  .main { padding: 18px 16px 28px; }
  .page-title { font-size: 28px; line-height: 1.08; }
  .page-subtitle { font-size: 15px; line-height: 1.4; }
  .hero-card { padding: 18px; border-radius: 20px; }
  .hero-card__value { font-size: 28px; }
  .panel { padding: 18px; border-radius: 20px; }
  .panel__header,
  .accordion-summary > div,
  .stuck-item__top { flex-wrap: wrap; }
  .control,
  .control select,
  .control input,
  .control .button,
  .topbar__controls > .button,
  .topbar__actions > .button,
  .topbar__controls > #themeToggle,
  .topbar__controls > #refreshButton { width: 100%; }
  .control-group {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .control-group.control-group--hidden { display: none; }
  .topbar__controls > .button { justify-content: center; }
  .topbar__user { grid-template-columns: 1fr; gap: 10px; }
  .topbar__user-meta,
  .topbar__user-button { width: 100%; }
  .topbar__user-button { justify-content: center; }
}