/* Responsive overrides — layered after dashboard.css. The design's own media queries collapse the
   sidebar/chat ≤1280; these reflow the inner content so nothing forces the page wider than the
   viewport. !important is needed to beat the design's base grid rules. Desktop (≥1100) untouched. */

@media (max-width: 1100px) {
  /* KPI bands: 4/5-across → 2 (they otherwise keep their track count and push main wide) */
  .kpi-grid,
  .kpi-grid-4,
  .kpi-grid-5 { grid-template-columns: repeat(2, 1fr) !important; }

  .spend-pair { grid-template-columns: 1fr !important; }

  /* control rows / filter pills wrap instead of overflowing */
  .card-header { flex-wrap: wrap; gap: 8px; }
  .cat-filter-row { flex-wrap: wrap; }
  .row-flex { flex-wrap: wrap; }
  .catalogue-collapse summary { flex-wrap: wrap; row-gap: 6px; }
  .kpi { min-width: 0; }

  /* Section-divider rule should span full width as it narrows: drop the long count text to its
     own line instead of letting it squeeze the line to half. Tags (small badge) stay at the edge. */
  .section-divider .count { flex-basis: 100%; order: 9; margin-top: 1px; }

  /* wide tables scroll inside their own box instead of pushing the page wider */
  .table-scroll { overflow-x: auto; max-width: 100%; }
}

/* kpi-grid-5 wraps to 2 columns between 561–1100px; the 5th card then sits in the LEFT column of
   the last row, but .kpi:last-child drops its right border, so the central divider stops short of
   the bottom. Restore it in the 2-column regime only (not the single-row desktop, not 1-col mobile)
   so the line runs all the way down. */
@media (min-width: 561px) and (max-width: 1100px) {
  .kpi-grid.kpi-grid-5 .kpi:last-child { border-right: 1px solid var(--border); }
}

@media (max-width: 900px) {
  .catalogue-grid,
  .vendor-card-row,
  .integ-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .page-header { flex-wrap: wrap; gap: 10px; }

  .main { padding: 12px 12px 32px; }

  /* wide content scrolls inside its card rather than pushing the page wider */
  .card-body { overflow-x: auto; }
  .util-funnel { overflow-x: auto !important; max-width: 100%; }
  /* funnel header/rows keep their intrinsic width and scroll under the funnel box */
  .util-funnel-header,
  .util-funnel-row,
  .util-funnel-totals { min-width: 720px; }

  /* bento treemaps use fixed 12-col spans (inline) — reflow to a simple grid on narrow */
  .intent-bento {
    grid-template-columns: repeat(2, 1fr) !important;
    grid-template-rows: none !important;
    min-height: 0 !important;
  }
  .intent-bento .intent-cell {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 84px;
  }
}

@media (max-width: 720px) {
  .topbar-search,
  .workspace-name { display: none; }

  /* Below tablet the 224px sidebar starves the content column (main dropped to ~166px at 390,
     forcing every header/row to overflow). Collapse it to an icon-only rail so main gets the
     full width; nav icons stay tappable. */
  .app { grid-template-columns: 56px 1fr !important; }
  .sidebar { width: 56px !important; overflow: hidden; }
  .sidebar .nav-label,
  .sidebar .nav-section-label,
  .sidebar .sidebar-footer { display: none !important; }
  .nav-item { justify-content: center; }
}

@media (max-width: 560px) {
  .kpi-grid,
  .kpi-grid-4,
  .kpi-grid-5,
  .catalogue-grid,
  .vendor-card-row,
  .integ-grid { grid-template-columns: 1fr !important; }
  .intent-bento { grid-template-columns: 1fr !important; }
  .page-header { flex-wrap: wrap; gap: 8px; }
}