/* ============================================================
   11 · RESPONSIVE
   Every @media rule in the portal, gathered here so breakpoints
   are easy to audit in one place instead of scattered through
   each component file. Load this file LAST.
   ============================================================ */

/* ------------------------------------------------------------
   LARGE / ULTRA-WIDE DESKTOPS (1920px and up)
   Problem: .page-grid stretches edge-to-edge on wide monitors,
   which blows the two donut charts up into huge circles with a
   lot of empty space and makes the row of KPI numbers feel
   disconnected from the charts next to them.
   Fix: cap the main content column and centre it, so the grid
   stays a comfortable reading width no matter how wide the
   monitor is.
   ------------------------------------------------------------ */
@media (min-width: 1920px) {
  .main-content {
    max-width: 1800px;
    margin: 0 auto;
    width: 100%;
  }
}

/* ------------------------------------------------------------
   SMALL / LAPTOP DESKTOPS (901px–1600px)
   Problem: reflowing the grid to fewer columns changes how many
   rows the layout needs, which throws off `grid-auto-rows: 1fr`
   and starves every row of height — that's what caused the
   smushed/overlapping mess.
   Fix: keep the exact same 4-column layout and proportions, just
   scale the whole grid down like a zoom-out. Same approach
   already used elsewhere in this file for dense pages (see
   .sites-page-wrapper / .portal-table-container / .kpi-cards-grid
   in 05-grid-blocks.css). Nothing reorders, nothing reflows —
   everything just gets smaller together.
   ------------------------------------------------------------ */
@media (max-width: 1600px) and (min-width: 1200px) {
  .page-grid { zoom: 90%; }
}
@media (max-width: 1199px) and (min-width: 901px) {
  .page-grid { zoom: 78%; }
}

@media (max-width: 900px) {
  :root { --sidebar-w: 190px; }
  .topnav-date { display: none; }
  .page-grid { grid-template-columns: 1fr !important; grid-auto-rows: auto; }
  .grid-block { grid-column: auto !important; grid-row: auto !important; }
  .dossier-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .app-body { flex-direction: column; }
  .sidebar {
    width: 100%;
    min-width: unset;
    border-right: none;
    border-bottom: 1px solid var(--c-grey-700);
    padding: 10px 16px;
    height: auto;
    max-height: 200px;
  }
  .nav-list {
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;
    gap: 4px;
  }
  .nav-link {
    border-radius: var(--radius);
    white-space: nowrap;
    padding: 8px 12px;
  }
  .nav-link.active { background: var(--c-grey-800); }
  .main-content-wrapper { height: auto; flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}