.mobile-only { display: none; }

@media (max-width: 1280px) {
  .grid.cols-4,
  .metric-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .priority-grid,
  .rate-builder,
  .call-board { grid-template-columns: 1fr; }
  .content { padding: 18px; }
}

@media (max-width: 1080px) {
  .card-header {
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .card-header > div:first-child { min-width: 0; flex: 1 1 240px; }
  .topbar-actions { gap: 7px; }
}

@media (max-width: 980px) {
  :root { --topbar-height: 68px; }
  .mobile-only { display: inline-flex; }
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(292px, 86vw);
    height: 100dvh;
    transform: translateX(-105%);
    transition: transform .22s ease;
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open { transform: translateX(0); }
  .mobile-backdrop:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 25;
    display: block;
    background: rgba(5, 12, 16, .5);
  }
  .topbar {
    min-height: var(--topbar-height);
    padding: 9px 12px;
  }
  .topbar-actions .ghost-button span,
  .topbar-actions > .primary-button span { display: none; }
  .topbar-actions .ghost-button,
  .topbar-actions > .primary-button { width: 42px; padding: 0; }
  .topbar-actions { margin-left: auto; }
  .content { padding: 14px; }
  .sync-banner { align-items: flex-start; }
  .grid.cols-2,
  .grid.cols-3,
  .grid.cols-4,
  .split-layout,
  .professional-data-layout { grid-template-columns: 1fr; }
  .side-panel { min-height: 300px; }
  .kanban-board { grid-template-columns: repeat(6, minmax(270px, 84vw)); }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: auto; }
  .table-wrap { max-width: calc(100vw - 28px); }
  .aglo-active-client-bubbles.service-channel-rail {
    top: auto;
    right: 12px;
    bottom: 12px;
    left: 12px;
    width: auto;
    max-width: calc(100vw - 24px);
    max-height: 62px;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 18px;
  }
  .service-channel-group {
    flex: 0 0 auto;
    flex-direction: row;
    padding: 0 9px 0 0;
    border-right: 1px solid var(--border);
    border-bottom: 0;
  }
  .service-channel-head { display: none; }
  .service-channel-clients { flex-direction: row; }
}

@media (max-width: 760px) {
  .topbar-title-wrap p { display: none; }
  .topbar h1 { font-size: 17px; }
  .metric-grid.compact,
  .grid.cols-2,
  .grid.cols-3,
  .grid.cols-4 { grid-template-columns: 1fr; }
  .metric-card { min-height: 105px; }
  .metric-value { font-size: 27px; }
  .card-header,
  .card-body { padding: 14px; }
  .card-header > .row-actions { width: 100%; }
  .card-header > .row-actions > button,
  .card-header > .row-actions > details { flex: 1 1 auto; }
  .modal-root { padding: 0; align-items: end; }
  .modal {
    width: 100%;
    max-height: 92dvh;
    border-radius: 20px 20px 0 0;
  }
  .modal-footer { flex-wrap: wrap; }
  .toast-root {
    top: 78px;
    right: 10px;
    left: 10px;
    bottom: auto;
  }
  .toast { width: 100%; max-width: none; }
  .notification-center {
    position: fixed;
    top: var(--topbar-height);
    right: 8px;
    left: 8px;
    width: auto;
    max-height: calc(100dvh - var(--topbar-height) - 16px);
  }
  .list-search-wrap { min-width: 100%; }
  .payment-history-controls { width: 100%; }
}

@media (max-width: 560px) {
  .topbar { gap: 8px; }
  .topbar-title-wrap { max-width: 38vw; }
  .topbar-actions { gap: 5px; }
  .topbar-actions .icon-button,
  .topbar-actions .ghost-button,
  .topbar-actions > .primary-button { width: 38px; min-height: 38px; }
  .content { padding: 10px; }
  .sync-banner { align-items: stretch; flex-direction: column; }
  .sync-banner .soft-button { width: 100%; }
  .card { border-radius: 12px; }
  .card-header,
  .card-body { padding: 12px; }
  .row-actions { width: 100%; }
  .row-actions > button,
  .row-actions > .chat-jump-menu { flex: 1 1 145px; }
  .row-actions > button { white-space: normal; line-height: 1.2; }
  .kanban-board { grid-template-columns: repeat(6, minmax(260px, 90vw)); }
  .aglo-active-client-bubbles.service-channel-rail { display: none; }
  .empty-state { padding: 24px 14px; }
}