/* ── Grids ────────────────────────────────────────────────────────────── */
.grid { display: grid; gap: 16px; }
/* Grid items default to `min-width: auto`, which refuses to shrink a track below
   its content's min-size — a panel wrapping a wide table (or a nowrap callsign)
   then blows the track past the viewport on narrow screens. `min-width: 0` lets
   the `1fr` tracks shrink so the inner scroll/ellipsis can take over. */
.grid > * { min-width: 0; }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
/* As many equal tracks as fit. For a strip whose length is data — the dashboard's
   per-status KPI tiles are one per state in the «Стани» catalogue, so `cols-4` would
   leave a lone fifth tile stranded on its own row the moment an operator adds one. */
.grid.cols-auto { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.dash-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 1100px) {
  .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .dash-split { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .grid.cols-4, .grid.cols-3, .grid.cols-2, .grid.cols-auto { grid-template-columns: 1fr; }

  /* On phones the status ring gets the full card width: it stacks above its
     legend, centred, and grows larger than the desktop 220px so the arcs and the
     centre count stay legible on a small screen. */
  .donut-wrap { flex-direction: column; gap: 18px; }
  .donut { width: min(280px, 78vw); }
  .donut .hole .n { font-size: 52px; }
  .legend { width: 100%; min-width: 0; }

  /* On phones the KPI tiles collapse into ONE instrument panel: a single bordered
     card whose rows are split by hairline dividers, with a vertical rule sending
     every figure into a fixed right-hand readout gutter. The row dividers and that
     gutter rule form a clean grid of hairlines — a military status board rather
     than separate floating cards. Each figure is right-aligned in the constant
     gutter and dialled down (34px, not the desktop 46) so a 4-digit and a 1-digit
     count share the same footprint and line up on one edge. Shared by the
     dashboard KPI strip (.kpi-strip) and the muster «Наявність» tab (.sa-kpi) —
     the card/tile/figure rules are identical; the two differ only in the
     left-column labels, split out below. */
  .kpi-strip, .sa-kpi {
    gap: 0;
    /* The paper goes on the OUTER card, because on this breakpoint that is the
       surface: the tiles inside it have their own background stripped to
       `transparent` below, so they are bands on one sheet rather than cards. Miss
       this and the strip reads flat on a phone beside the `.stat` tiles it is the
       collapse of — one card's worth of texture, at the width where it is the whole
       screen. */
    background: var(--surface), var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
  }
  .kpi-strip > .stat, .sa-kpi > .stat {
    display: grid;
    /* Fixed figure column (not `auto`): a 4-digit count would otherwise make its
       column wider than a 1-digit one, shifting that row's gutter rule left — so
       the rules would no longer line up. A constant column keeps the vertical
       rule on one x across every row. */
    grid-template-columns: 1fr 104px;
    align-items: center;
    align-content: center;
    column-gap: 16px;
    /* Every row is the same height and its content is vertically centred, so the
       rows read as identical bands even when one label wraps to two lines. No
       vertical padding on the tile — a fixed min-height carries the height
       instead — which lets both the row divider and the vertical gutter rule run
       edge-to-edge, so the gutter rules of all rows join into one unbroken
       vertical line down the whole panel (padding would clip each segment short
       and leave the ragged gaps). */
    min-height: 76px;
    padding: 0 18px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
  }
  .kpi-strip > .stat:last-child, .sa-kpi > .stat:last-child { border-bottom: 0; }
  .kpi-strip > .stat:hover, .sa-kpi > .stat:hover { border-color: var(--border); }
  .kpi-strip > .stat > .num, .sa-kpi > .stat > .num {
    grid-area: 1 / 2 / 3 / 3; align-self: stretch;
    display: flex; align-items: center; justify-content: flex-end;
    margin-top: 0; font-size: 34px; letter-spacing: -0.5px;
    padding-left: 18px;
    border-left: 1px solid var(--border);
  }

  /* Dashboard strip: mono eyebrow label (row 1) + context (row 2) + window
     caption (row 3, «за добу» / «станом на зараз»). The figure spans all three
     rows so it stays centred against the taller label stack. */
  .kpi-strip > .stat > .num        { grid-row: 1 / 4; }
  .kpi-strip > .stat > .stat-head  { grid-area: 1 / 1 / 2 / 2; font-size: 11.5px; letter-spacing: 1.5px; }
  .kpi-strip > .stat > .sub        { grid-area: 2 / 1 / 3 / 2; margin-top: 5px; font-size: 12px; }
  .kpi-strip > .stat > .stat-scope { grid-area: 3 / 1 / 4 / 2; margin-top: 6px; padding-top: 0; font-size: 9px; }

  /* Muster strip: the figure leads the DOM, so pin its label (row 1) + percent
     (row 2) into the left column and drop the label's default top margin. */
  .sa-kpi > .stat > .label { grid-area: 1 / 1 / 2 / 2; margin-top: 0; font-size: 11.5px; }
  .sa-kpi > .stat > .sub   { grid-area: 2 / 1 / 3 / 2; margin-top: 4px; font-size: 12px; }
}