/* RESPONSIVE — phone and tablet layout.
   Loaded last, after base/components/layout, so its media queries win at equal
   specificity. Above the `lg` breakpoint (992px) this file changes nothing: the
   desktop layout is exactly what the prototype had.

   Breakpoints are Bootstrap's: sm 576 · md 768 · lg 992 · xl 1200 · xxl 1400.
   ------------------------------------------------------------------------- */

/* ── Bootstrap grid integration ──────────────────────────────────────────────
   The `.row`s produced by the migration sit directly inside a tab panel, not
   inside a `.container`, so the panel carries the half-gutter padding that a
   row's negative margins expect. Content area padding was 16px; it is now split
   8px + 8px so every block still lands 16px from the edge. */
.content-area, .carea { padding: 16px 8px; }
.tab-panel, .tp { padding: 0 8px; }

/* the hand-rolled grids stretched their children to equal height; Bootstrap
   columns do not, so put it back for the cards that used to sit in a .row2/.row3 */
.row > [class*="col-"] > .card { height: 100%; }
/* anything that lands in a row without a column class (an empty-state note,
   a strip whose generator has not been through colsIn yet) spans the full row */
.row > :not([class*="col-"]) { flex: 0 0 100%; max-width: 100%; }

/* A flex item's automatic minimum size is its content, so a column holding a chart
   with a min-width would grow past `width:100%` and push the page sideways. This is
   the one rule that keeps a wide chart's overflow inside its own scroll box. */
.tab-panel > *, .tp > *,
.row > [class*="col-"],
.card, .cscroll, .tscroll { min-width: 0; }

/* ── charts and tables that are wider than the screen ────────────────────────
   Every canvas and every table is wrapped in one of these. They do nothing on a
   wide screen; on a phone the chart keeps a readable width and scrolls sideways
   inside its card instead of squashing or stretching the page. */
.cscroll, .tscroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.tscroll { max-width: 100%; }
.cscroll::-webkit-scrollbar, .tscroll::-webkit-scrollbar { height: 7px; }
.cscroll::-webkit-scrollbar-thumb, .tscroll::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, .35); border-radius: 4px;
}
.cscroll::-webkit-scrollbar-track, .tscroll::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 991.98px) {
  /* a canvas narrower than this stops being readable — scroll instead */
  .cscroll > canvas { min-width: 560px; }
  .tscroll > table { min-width: 520px; }
  /* the two wide matrices keep their own floor */
  #marginHeatmap { min-width: 520px; }
  #matrixWrap > table, #matrixWrap > div { min-width: 640px; }
}
@media (max-width: 991.98px) {
  /* the price waterfall and the iceberg stack far more columns than the rest */
  #wfCanvas, #ilMainCanvas, #dailyProdCanvas, #dailyBranchCanvas, #dailyChart { min-width: 720px; }
}

/* ── the two remaining hand-rolled card grids ────────────────────────────────
   `.scards` and `.seg-cards` are class-based CSS grids (4-up) rather than rows.
   Everything else that used to be a fixed-column grid is a Bootstrap row now. */
@media (min-width: 576px) and (max-width: 991.98px) {
  .scards, .seg-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575.98px) {
  .scards, .seg-cards { grid-template-columns: 1fr; }
}

/* ── navigation below 992px ──────────────────────────────────────────────────
   The 56px rail cannot hold eight labelled groups on a phone, and a rail plus a
   hidden panel plus an 18px edge handle is three controls for one job. So below
   `lg` the rail goes away and the left panel becomes a drawer opened by one
   hamburger in the topbar. The drawer carries the whole panel — the group list
   built by buildGroupNav(), the current group's views, the Period read-out and the
   Key Takeaway — so nothing that lives in the panel is lost on a phone. */
.nav-toggle { display: none; }

@media (max-width: 991.98px) {
  .nav-rail { display: none; }
  #sidebarToggleBtn { display: none; }

  .nav-toggle {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, .16); border-radius: 9px;
    background: rgba(255, 255, 255, .07); color: #fff;
    font-size: 17px; line-height: 1; cursor: pointer; padding: 0;
  }
  .nav-toggle:hover, body.lp-open .nav-toggle {
    background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .28);
  }

  .left-panel {
    position: fixed; top: 0; bottom: 0; left: 0;
    width: min(292px, 86vw); min-width: 0; z-index: 400;
    transform: translateX(-102%);
    transition: transform .22s cubic-bezier(.4, 0, .2, 1);
    box-shadow: 8px 0 28px rgba(0, 0, 0, .45);
    overflow-y: auto;
  }
  body.lp-open .left-panel { transform: translateX(0); }

  /* tapping the page closes the drawer */
  #lpBackdrop {
    position: fixed; inset: 0; background: rgba(0, 0, 0, .45);
    z-index: 399; display: none;
  }
  body.lp-open #lpBackdrop { display: block; }

  /* the group list — one row per analysis group, the open one highlighted */
  #mnGroups { display: block; padding: 10px 8px 4px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
  .mn-ttl {
    font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255, 255, 255, .3); padding: 2px 8px 7px;
  }
  .mn-g {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 10px 10px; margin-bottom: 2px;
    border: none; border-radius: 8px; background: transparent;
    color: rgba(255, 255, 255, .62); font: inherit; font-size: 14px; font-weight: 500;
    text-align: left; cursor: pointer;
  }
  .mn-g:hover { background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .9); }
  .mn-g.on { background: rgba(79, 142, 247, .2); color: #fff; font-weight: 600; }
  .mn-g-ico { font-size: 17px; width: 22px; text-align: center; flex-shrink: 0; }
  .mn-g-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mn-g-caret { color: rgba(255, 255, 255, .25); font-size: 15px; flex-shrink: 0; }
  .mn-g.on .mn-g-caret { color: var(--accent); transform: rotate(90deg); }

  /* the views of the open group are the drawer's second level — give them room */
  #leftPanel .lp-item, #leftPanel .lp-it { padding: 10px 12px; font-size: 14px; }
}

/* above the breakpoint the group list does not exist: the rail is the group nav */
@media (min-width: 992px) { #mnGroups { display: none; } }

/* ── phone: 768px and below ──────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  body, #appRoot { font-size: 15px; }
  .content-area, .carea { padding: 12px 6px; gap: 12px; }
  .tab-panel, .tp { padding: 0 6px; gap: 12px; }

  /* the rail is gone and the panel is a drawer, so the left column has nothing to
     sit above — the topbar's hamburger and title carry the branding instead */
  .app-brand { display: none; }

  /* topbar: the logo and the long subtitle are the first things to go */
  .topbar { padding: 0 10px; gap: 8px; height: 52px; }
  .topbar-sub { display: none; }
  #tbLogo, #tbDivider { display: none !important; }
  /* the title must stay on one line — wrapped, it grows the 52px bar */
  #tbTitleWrap { min-width: 0; overflow: hidden; }
  .topbar-title {
    font-size: 12px; letter-spacing: .02em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .topbar-right { margin-left: auto; flex-shrink: 0; }
  .tb-menu-btn .topbar-user { max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* KPI strip already scrolls sideways; make the items fit more of them on screen.
     They must never shrink — their labels are nowrap, so a squeezed item spills its
     text over the next one instead of the strip scrolling. */
  .kpi-strip { padding: 0 10px; }
  .kpi-item { flex: 0 0 auto; min-width: 118px; padding: 10px 14px; }
  .kpi-val { font-size: 20px; }
  .kpi-lbl { font-size: 10px; letter-spacing: .06em; }
  .kpi-unit { font-size: 12px; }
  .kpi-chg { font-size: 11px; }

  .card { padding: 12px 12px; }
  .ct, .card-title { font-size: 11px; }
  .ct-more { display: block; margin-left: 0; margin-top: 3px; }

  /* the totals bar is a single flex row of figures — let it wrap */
  .tots { flex-wrap: wrap; gap: 10px 0; padding: 12px 14px; }

  /* the two section-divider chips ("📊 Breakdown Analysis — …") declare
     white-space:nowrap inline; on a narrow screen the label wraps instead of
     pushing the panel wider than the viewport */
  .tab-panel [style*="white-space:nowrap"],
  .tp [style*="white-space:nowrap"] { white-space: normal !important; text-align: center; }

  /* drill modal fills the screen and its KPI tiles wrap to two per row */
  #drillModal > div { width: 100vw !important; max-width: 100vw; max-height: 100vh;
    border-radius: 0; height: 100%; }
  #drillKpis { grid-template-columns: 1fr 1fr !important; }
  #drillKpis > div { border-right: none !important;
    border-bottom: 1px solid var(--border, #e5e8ef); }
  #drillModal table { min-width: 520px; }
  #drillTools { padding: 8px 12px; }
  #drillHeader { padding: 12px 14px 10px; }
  #drillModal .tscroll, #drillModal > div > div:last-child { padding: 12px 14px 16px; }

  /* the source / login cards */
  .src-screen { padding: 12px; align-items: flex-start; padding-top: 24px; }
  .src-card { padding: 20px 18px 18px; }
}

/* ── very small phones ───────────────────────────────────────────────────── */
@media (max-width: 400px) {
  .kpi-item { min-width: 104px; padding: 9px 11px; }
  .kpi-val { font-size: 18px; }
  .card { padding: 10px; }
}

/* ── landscape phones: the shell must not lose its scroll ────────────────── */
@media (max-height: 460px) and (max-width: 991.98px) {
  .kpi-item { padding: 7px 12px; }
  .kpi-val { font-size: 17px; }
  .topbar { height: 46px; }
}

/* AI assistant on a phone: the panel is the whole screen, and the launcher shrinks to a
   circle so it does not sit on top of the content it is meant to discuss. */
@media (max-width:991.98px){
  #aiPanel{width:100vw;max-width:100vw;border-left:none;}
  #aiLaunch{right:14px;bottom:14px;padding:0;width:48px;height:48px;justify-content:center;}
  #aiLaunch span:not(.ai-l-i){display:none;}
  #aiLaunch .ai-l-i{font-size:20px;}
}

/* Cashflow Projection on a phone: the SVG charts keep a readable width and scroll inside
   their own card, exactly as the canvas charts do. */
@media (max-width:991.98px){
  .cf-svg{min-width:640px;}
  .rp-card{padding:13px 14px;gap:11px;}
  .rp-ico{width:38px;height:38px;font-size:19px;}
}