/* 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 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; }

  /* 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; }
}

/* ── the period strip below 992px ────────────────────────────────────────────
   One head button carries the period on screen ("ส.ค. · เทียบ ก.ค. 2569"); tapping it expands the
   modes, the pickers, the "กำลังแสดง …" line and the comparison KPIs (two per row). Expanded, the
   body scrolls inside itself so the report below keeps some room. */
@media (max-width: 991.98px) {
  .per-toggle {
    display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px;
    padding: 8px 12px; border: 0; background: transparent; cursor: pointer;
    color: #fff; font: inherit; font-size: 13px; font-weight: 700; text-align: left;
  }
  .per-toggle-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .per-caret { opacity: .7; transition: transform .15s; }
  .per-strip.open .per-caret { transform: rotate(180deg); }
  .per-body { display: none; padding: 0 10px 10px; max-height: 62vh; overflow-y: auto; }
  .per-strip.open .per-body { display: flex; }
  .per-row .pd-bar { width: 100%; }
  .per-row .pd-btn { flex: 1 1 0; padding: 0 4px; height: 32px; }
  .per-pick { width: 100%; }
  .per-sel { flex: 1 1 140px; }
  .per-sel select { flex: 1; height: 32px; }
  .per-now { flex-basis: 100%; }
  .per-cmp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc-d { white-space: normal; }
  .kpi-item.fis-kpi { min-width: 150px; }
  .kpi-help { padding: 8px 44px 4px 12px; }
}