/* DASHw: the manager web Home as the D-DASH dashboard (design/brand/proposed/dashboard/, approved 26 Oct 2026,
   #347). Tokens only; navy text on mint; trouble is a chip with a word, never colour alone. The breakpoints
   follow the window, as web.html's do (its 1000 px and 340 px are measured on the whole frame, sidebar
   included): five tiles in a row and the table at 1280 and 1440 (frames 01, 02); two tiles per row and outlet
   cards at 1000 px and under (390, frames 12-13); one tile per row at 340 px and under (320, frames 14-15).
   The page never scrolls sideways. */
.dash { display: grid; gap: var(--g-space-24); }
.dash > * { min-width: 0; }
.dash .card + .card { margin-top: 0; }
.dash p { margin: 0; }
.dash-small { font-size: var(--g-font-size-small); }
.dash-caption { font-size: var(--g-font-size-caption); }
.dash-muted { color: var(--g-color-muted); }
.dash-sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.dash-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--g-space-16); }
.dash-scope { display: flex; flex-wrap: wrap; align-items: center; gap: var(--g-space-12); margin: 0; }
.dash-scope select { width: auto; max-width: 100%; min-height: var(--g-size-touch); }

.dash-notice { display: grid; gap: var(--g-space-12); border-inline-start: var(--g-space-4) solid var(--g-color-teal); background: var(--g-color-mint); padding: var(--g-space-16); border-radius: var(--g-radius-input); }
.dash-notice h2 { margin: 0; }
.dash-notice .btn { justify-self: start; }
.dash-error { border-color: var(--g-color-error); background: var(--g-color-error-surface); }
.dash-offline { display: grid; gap: var(--g-space-4); border-inline-start: var(--g-space-4) solid var(--g-color-warning); background: var(--g-color-warning-surface); padding: var(--g-space-16); border-radius: var(--g-radius-input); }
.dash-offline[hidden] { display: none; }

/* Glance tiles: one metric style for all five (D-DASH approval: the Attendance figure matches the rest), at the
   size the desktop frames draw it (web.html .metric: --g-font-size-metric); display size on small screens. */
.dash-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--g-space-12); }
.dash-tile { display: flex; flex-direction: column; gap: var(--g-space-8); padding: var(--g-space-16); color: var(--g-color-navy); text-decoration: none; min-width: 0; overflow-wrap: anywhere; transition: background var(--g-motion-card) var(--g-motion-ease); }
.dash-tile:hover { background: var(--g-color-mint); }
.dash-tile h2 { font-size: var(--g-font-size-body); margin: 0; }
.dash-metric { font-size: var(--g-font-size-metric); font-weight: 700; line-height: var(--g-line-height-heading); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-view { margin-top: auto; min-height: var(--g-size-touch); display: flex; align-items: center; font-size: var(--g-font-size-small); text-decoration: underline; text-underline-offset: var(--g-space-4); }

/* Outlets today */
.dash-table-card { display: grid; gap: var(--g-space-12); }
.dash-table-card .section-heading { margin-bottom: 0; }
.dash-sort-row { display: none; }
.dash-sort { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--g-space-8); margin: 0; }
.dash-sort select { min-height: var(--g-size-touch); }
.dash-table { table-layout: fixed; }
.dash-table th, .dash-table td { padding: var(--g-space-8); }
.dash-table th:nth-child(1) { width: 20%; }
.dash-table th:nth-child(3) { width: 18%; }
.dash-table th:nth-child(4) { width: 20%; }
.dash-sort-link { display: inline-flex; align-items: center; gap: var(--g-space-4); min-height: var(--g-size-touch); color: var(--g-color-navy); text-decoration: none; }
.dash-outlet { display: inline-flex; align-items: center; min-height: var(--g-size-touch); text-decoration: underline; text-underline-offset: var(--g-space-4); overflow-wrap: anywhere; }
.dash-row-link { display: inline-flex; align-items: center; min-height: var(--g-size-touch); font-size: var(--g-font-size-caption); font-weight: 400; }
.dash-num { font-size: var(--g-font-size-heading-small); font-weight: 700; }
.dash-table small { display: block; }
.dash-chip { margin-top: var(--g-space-4); }
.dash-quiet { font-size: var(--g-font-size-small); }
.dash-trend { display: block; width: 100%; height: var(--g-space-32); }
.dash-trend polyline { fill: none; stroke: var(--g-color-teal); stroke-width: var(--g-space-4); stroke-linejoin: round; stroke-linecap: round; }
.dash-trend circle { fill: var(--g-color-teal); }

/* Needs you: the heading keeps its distance from the panel below it (D-DASH approval). */
.dash-needs .section-heading { margin-bottom: var(--g-space-16); }
.dash-need-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g-space-12); }
.dash-need { display: grid; gap: var(--g-space-8); align-content: start; padding: var(--g-space-16); border-radius: var(--g-radius-input); background: var(--g-color-ivory); min-width: 0; overflow-wrap: anywhere; }
.dash-need h3 { margin: 0; font-size: var(--g-font-size-body); }
.dash-need__subject { display: inline-flex; align-items: center; min-height: var(--g-size-touch); font-weight: 700; text-decoration: underline; text-underline-offset: var(--g-space-4); }
.dash-need .btn { justify-self: start; }

@media (max-width: 1000px) {
  .dash-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-metric { font-size: var(--g-font-size-display); }
  .dash-need-list { grid-template-columns: minmax(0, 1fr); }
  .dash-scope { width: 100%; }
  .dash-scope select { flex: 1; min-width: 0; }
  .dash-sort-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--g-space-8); }
  /* The table becomes one card per outlet; each value keeps its label. */
  .dash-table { display: block; table-layout: auto; background: transparent; }
  .dash-table thead { display: none; }
  .dash-table tbody { display: block; }
  .dash-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g-space-12); padding: var(--g-space-16); margin-top: var(--g-space-12); border-radius: var(--g-radius-card); background: var(--g-color-ivory); }
  .dash-table tr:nth-child(even) td { background: transparent; }
  .dash-table td { display: block; padding: 0; background: transparent; }
  .dash-table td::before { content: attr(data-label); display: block; font-size: var(--g-font-size-caption); font-weight: 400; margin-bottom: var(--g-space-4); }
  .dash-table td:first-child { grid-column: 1 / -1; }
  .dash-table td:first-child::before { display: none; }
  .dash-table td:nth-child(4) { grid-column: 1 / -1; }
  .dash-trend { max-width: var(--g-size-phone); }
}
@media (max-width: 340px) {
  .dash-tiles { grid-template-columns: minmax(0, 1fr); }
  .dash-table tr { grid-template-columns: minmax(0, 1fr); }
  .dash-table td:nth-child(4) { grid-column: auto; }
}