/* Gulwathe Supplied Ltd mockup — dashboard.css (R8: owned by the DASHBOARD slice; research/erp-r8/R8-PLAN.md §2.6–2.7).
 * Tokens only (var(--…) from app.css: colours, --t-* type, --s-* spacing, --r-* radius, --d-* and --ease-* motion).
 * Shared pieces stay in app.css: .kpi base (Daily expenses uses it), .lrow/.glist/.stats/.fpill/.inotice, .attn__none.
 * Every .kpi rule here is scoped to .kpis (the dashboard strip), so Daily expenses' own .kpi is never touched.
 * Motion (Emil Kowalski rules): press = scale(.97) at --d-press on --ease-out; hover only under (hover: hover) and
 * (pointer: fine). R10 §8.1: the hero card (count-up once per session, blocks rise, verdict fades: dashboard.js, WAAPI);
 * reduced motion keys on html.no-motion (the system setting OR Settings › Reduce motion). */

/* ------------------------------------------------------------------ page frame: one column on the phone */
.dash { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 720px) { .dash { gap: var(--s-5); } }
.dash__main, .dash__side { display: contents; }
.dash__head .page-head { margin-bottom: 0; }
.dash__h2 { font: var(--t-h2); margin: 0 0 var(--s-3); }
/* owner (§2.6 390): the DOM is already in reading order — greeting → Ask AI → period + branch → totals → pending →
   Action required → branches — so the phone is one plain column (R8 UX-05: no `order`, focus follows the screen) */
.dash-ai:empty { display: none; }   /* the assistant slice fills it; the stub renders nothing */

/* desktop (§2.6 1280 / §2.7 1280): two columns, nothing repeated between them. Owner: grid areas place Ask AI and
   Action required in the side column; the last row takes the slack so a tall side column never spreads the main one. */
@media (min-width: 1100px) {
  .dash { gap: var(--s-8); }
  .dash--owner {
    grid-template-columns: minmax(0, 1fr) 360px; grid-template-rows: repeat(4, auto) 1fr; gap: var(--s-5) var(--s-8);
    grid-template-areas: "head ai" "filters needs" "totals needs" "pending needs" "branches needs";
  }
  .dash--owner > .dash__head { grid-area: head; }
  .dash--owner > .dash-ai { grid-area: ai; }
  .dash--owner > .dash__filters { grid-area: filters; }
  .dash--owner > .kpis { grid-area: totals; }
  .dash--owner > .dash-pending { grid-area: pending; }
  .dash--owner > .dash-needs { grid-area: needs; }
  .dash--owner > .dash-branches { grid-area: branches; }
  .dash--manager { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
  .dash__main, .dash__side { display: grid; gap: var(--s-5); align-content: start; min-width: 0; }
  .dash__side { gap: var(--s-6); }
}

/* ------------------------------------------------------------------ period + the one branch chip: one row */
.dash__filters { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--s-2); min-width: 0; }
.dash-view { flex: none; }
.dash-view .seg { flex-wrap: nowrap; }
.dash-view .seg__btn { min-height: var(--tap); padding-inline: var(--s-3); }
.dash-bchip { min-height: var(--tap); min-width: 0; padding-inline: var(--s-3); }
.dash-bchip__short { display: none; }
@media (max-width: 419px) { .dash-bchip__long { display: none; } .dash-bchip__short { display: inline; } }
@media (min-width: 720px) { .dash__filters { gap: var(--s-3); } .dash-view .seg__btn, .dash-bchip { padding-inline: var(--s-4); } }

/* ------------------------------------------------------------------ the three totals: one strip (phone: 3 rows) */
.kpis { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.kpis > .kpi { container-type: inline-size; border: 0; border-radius: 0; background: transparent; box-shadow: none; padding: var(--s-4); gap: var(--s-1); }
.kpis > .kpi + .kpi { border-top: 1px solid var(--line); }
.kpis .kpi__head { min-height: 0; gap: var(--s-2); }
.kpis .kpi__label { font: var(--t-meta); font-weight: 600; color: var(--ink-2); flex: 1; }
.kpis .kpi__head .ph__info { margin: calc(-1 * var(--s-3)) calc(-1 * var(--s-2)) calc(-1 * var(--s-3)) 0; }
.kpis .kpi__value { display: block; font: var(--t-title); letter-spacing: -.01em; white-space: nowrap; overflow-wrap: normal; }
.kpis .kpi--lead .kpi__value { font: var(--t-hero); }
.kpis .kpi.is-loss .kpi__value { color: var(--danger); }
.kpis .kpi__line { font: var(--t-meta); font-weight: 400; color: var(--ink-3); max-inline-size: 48ch; text-wrap: pretty; }
/* a figure steps down the type ramp only when its cell is too narrow, never wraps between "KES" and the digits */
/* R10.2: the two quiet cells beside each other at 1280 are ~247 px wide: they keep the title size (28) down to 230 px */
@container (max-width: 230px) { .kpis .kpi__value, .kpis .kpi--lead .kpi__value { font: var(--t-h2); font-size: 24px; line-height: 30px; } }
@container (max-width: 200px) { .kpis .kpi__value, .kpis .kpi--lead .kpi__value { font: var(--t-h2); } }
@media (min-width: 720px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpis > .kpi { padding: var(--s-4) var(--s-5) var(--s-5); }
  /* R8: every head is two label lines tall, so "Estimated profit" wrapping beside its "?" (1024–1440 px with the right
     column) never drops its figure below the other two */
  .kpis .kpi__head { min-height: 44px; align-items: flex-start; }
  .kpis > .kpi + .kpi { border-top: 0; border-inline-start: 1px solid var(--line); }
}

/* ------------------------------------------------------------------ R10 §8.1 the hero card (owner: the sales total; manager: the branch figure)
   The three totals stay one .kpis section in reading order: the hero first, then Expenses and Estimated profit as two
   quiet hairline rows in one box (phone) or side by side (≥ 720 px). */
.kpis { background: none; border: 0; border-radius: 0; overflow: visible; }
.kpis > .kpi:not(.dash-hero) { background: var(--surface); border: 1px solid var(--line); }
.kpis > .dash-hero + .kpi { margin-top: var(--s-3); border-radius: var(--r-card) var(--r-card) 0 0; }
.kpis > .kpi:last-child { border-top: 0; border-radius: 0 0 var(--r-card) var(--r-card); }
@media (min-width: 720px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis > .dash-hero { grid-column: 1 / -1; }
  .kpis > .dash-hero + .kpi { border-radius: var(--r-card) 0 0 var(--r-card); }
  .kpis > .kpi:last-child { margin-top: var(--s-3); border-top: 1px solid var(--line); border-inline-start: 0; border-radius: 0 var(--r-card) var(--r-card) 0; }
}
.kpis > .kpi.dash-hero, .dash-hero--mgr {
  position: relative; isolation: isolate; overflow: hidden; display: grid; gap: var(--s-1); align-content: start;
  padding: var(--s-5); border: 0; border-radius: var(--r-sheet); background: var(--hero); color: var(--hero-ink);
}
/* strata: flat wavy lines at 7 % (8 % dark), clipped out of the top-left 60 % × 70 % (spec §2.3) */
.dash-hero__strata { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; clip-path: polygon(60% 0, 100% 0, 100% 100%, 0 100%, 0 70%, 60% 70%); }
.dash-hero__strata path { fill: none; stroke: var(--strata); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.dash-hero > :not(.dash-hero__strata, .dash-hero__ghost) { position: relative; z-index: 1; min-width: 0; }
/* the strata MASK: every text on the card carries the solid hero fill, so no letter ever sits on a strata line
   (hero-ink-2 over a line is 4.36:1 in light) */
.dash-hero :is(.kpi__label, .dash-hero__when, .kpi__value, .kpi__line, .stats__label, .stats__value, .stats__meta, .dash-blocks__d) { background: var(--hero); width: fit-content; max-width: 100%; }
.dash-hero .kpi__head { min-height: 0; gap: var(--s-1); justify-content: flex-start; align-items: baseline; }
.kpis .dash-hero .kpi__label, .dash-hero__when, .dash-hero--mgr .stats__label { flex: none; font: var(--t-label); letter-spacing: .04em; text-transform: uppercase; color: var(--hero-ink-2); }
.kpis .dash-hero .kpi__value, .dash-hero--mgr .stats__value, .dash-hero__ghost {
  font: var(--t-hero); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.01em; color: var(--hero-ink); white-space: nowrap;
}
.kpis .dash-hero .kpi__value { display: block; }
/* a seven-figure day steps the figure down rather than overflow (dashboard.js heroFit, before paint): 36 px at normal
   width, then 28 px — sizes on the type ramp */
.dash-hero.is-long :is(.kpi__value, .stats__value, .dash-hero__ghost) { font-size: 36px; line-height: 44px; font-stretch: normal; }
.kpis .dash-hero.is-long .kpi__value, .dash-hero--mgr.is-long .dash-money .stats__cell:first-child .stats__value { font-size: 36px; line-height: 44px; font-stretch: normal; }
.dash-hero.is-longer :is(.kpi__value, .stats__value, .dash-hero__ghost), .kpis .dash-hero.is-longer .kpi__value, .dash-hero--mgr.is-longer .dash-money .stats__cell:first-child .stats__value { font-size: 28px; line-height: 44px; }
.dash-hero .is-counting { opacity: 0; }
.dash-hero__ghost { position: absolute; z-index: 2; pointer-events: none; }
.kpis .dash-hero .kpi__line, .dash-hero--mgr .stats__meta { font: 500 16px/22px var(--font); color: var(--hero-ink-2); max-inline-size: none; }
.dash-hero .dash-cmp { color: var(--hero-ink-2); font: 500 16px/22px var(--font); background: var(--hero); }
.dash-hero :focus-visible { outline-color: var(--hero-ink); }
/* manager: the shared stat strip, re-dressed for the card */
.dash-hero--mgr .dash-money.stats { display: block; margin: 0; background: none; border: 0; border-radius: 0; overflow: visible; }
.dash-hero--mgr .dash-money .stats__cell { display: grid; gap: var(--s-1); padding: 0; border: 0; }
.dash-hero--mgr .dash-money .stats__cell:first-child .stats__value { font: var(--t-hero); }
/* the 7-day blocks chart: each day a stack of ≤ 6 cut-stone blocks (8 px, 3 px gap, radius 3: a chart glyph) */
.dash-blocks { margin: var(--s-3) 0 0; }
.dash-blocks__cols { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.dash-blocks__col { display: grid; justify-items: center; gap: 6px; min-width: 0; }
.dash-blocks__stack { display: flex; flex-direction: column-reverse; gap: 3px; width: 100%; max-width: 28px; height: 63px; }
.dash-blocks__b { display: block; flex: none; height: 8px; border-radius: 3px; background: color-mix(in srgb, var(--hero-ink) 45%, transparent); }
.dash-blocks__col.is-today .dash-blocks__b { background: var(--hero-ink); box-shadow: inset 0 -2px 0 var(--hero-ink-2); }   /* the bottom face */
.dash-blocks__col.is-today .dash-blocks__b--outline { background: none; box-shadow: none; border: 1.5px dashed var(--hero-ink-2); }
.dash-blocks__d { font: 600 13px/16px var(--font); color: var(--hero-ink-2); padding-inline: 2px; }
.dash-blocks__col.is-today .dash-blocks__d { color: var(--hero-ink); font-weight: 700; }

/* the one comparison: a quiet text button, details in a sheet */
.dash-cmp {
  display: inline-flex; align-items: center; min-height: 44px; margin-block: calc(-1 * var(--s-3)); padding: 0; border: 0; background: none;
  color: var(--accent-text); font: var(--t-meta); font-weight: 600; text-align: start; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer;
  transition: transform var(--d-press) var(--ease-out);
}
.dash-cmp:active { transform: scale(.97); }
.dash-cmpsheet { display: grid; gap: var(--s-4); }
.dash-cmpsheet__basis, .dash-cmpsheet__note { font: var(--t-meta); font-weight: 400; color: var(--ink-2); max-inline-size: 60ch; }
.dash-pbreak { margin-bottom: var(--s-2); }
.dash-pbreak .lrow { min-height: 48px; padding-inline: 0; border-radius: 0; }
/* desktop popover: five rows + the note fit under the KPI without scrolling (a mouse needs no 48 px rows) */
@media (pointer: fine) { .dash-pbreak .lrow { min-height: 40px; padding-block: var(--s-1); } }
.dash-pbreak .dash-pbreak__total .lrow__title, .dash-pbreak .dash-pbreak__total .lrow__value { font-weight: 600; }

/* ------------------------------------------------------------------ pending, never inside the totals */
.dash-pending .lrows { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.dash-pending .lrow__lead, .dash-pending .lrow__title { color: var(--warn); }
.dash-pending .lrow__vsub { color: var(--accent-text); font-weight: 600; }
.dash-pending--none .attn__none { padding: var(--s-2) 0; }

/* ------------------------------------------------------------------ Action required (and the manager's Awaiting owner) */
.dash-needs { display: grid; gap: var(--s-1); min-width: 0; }
.dash-needs .dash__h2 { margin-bottom: var(--s-2); }
.dash-needs .glist, .dash-await.glist { gap: var(--s-4); }
.dash .needs .lrow__vsub { color: var(--accent-text); font-weight: 600; }
.dash-needs__more { justify-self: start; min-height: var(--tap); margin-top: var(--s-1); }
.dash-needs > .attn__none { padding: var(--s-2) 0; }

/* ------------------------------------------------------------------ branches: rows (phone) · 2-row table (desktop) */
.dash-branches { min-width: 0; }
.dash-branch .lrow__meta .num { color: var(--ink-2); font-weight: 600; }
.dash-branch__fig, .dash-pending .lrow__meta > span:not(.lrow__dot) { white-space: nowrap; }   /* a label never parts from its figure */
.dash-branch .lrow__btn { gap: var(--s-1); }
.dash-btable__wrap { display: none; }
@media (min-width: 1100px) {
  .dash-branches__list { display: none; }
  .dash-btable__wrap { display: block; overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); }
}
/* R9 §2.6: the branch figures are branch profit; company costs are counted on All branches (core's note, verbatim) */
.dash-branches__note { margin: 0; padding: var(--s-2) var(--s-4) var(--s-3); border-top: 1px solid var(--line); font: var(--t-meta); color: var(--ink-3); text-wrap: pretty; }
.dash-btable { width: 100%; border-collapse: collapse; font: var(--t-body); font-variant-numeric: tabular-nums; }
.dash-btable th, .dash-btable td { padding: var(--s-2) var(--s-3); text-align: end; white-space: nowrap; }
.dash-btable th:first-child { padding-inline-start: var(--s-4); }
.dash-btable thead th { font: var(--t-label); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line); padding-block: var(--s-3); }
.dash-btable th:first-child { text-align: start; }
.dash-btable tbody tr + tr > * { border-top: 1px solid var(--line); }
.dash-btable tbody > tr > * { height: 56px; }
.dash-btable__name {
  display: inline-flex; align-items: center; gap: var(--s-1); min-height: 44px; padding: 0; border: 0; background: none;
  color: var(--ink); font: var(--t-h3); cursor: pointer; transition: transform var(--d-press) var(--ease-out);
}
.dash-btable__name .ic { color: var(--ink-3); }
.dash-btable__link {
  min-height: 44px; padding: 0; border: 0; background: none; color: var(--accent-text); font: inherit; font-weight: 600; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: transform var(--d-press) var(--ease-out);
}
.dash-btable__link:active { transform: scale(.97); }
.dash-btable__name:active { transform: scale(.97); }

/* ================================================================== Branch Manager */
/* two big tiles, icon over word (Wave quick actions); Record sale is the one primary */
.dash-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.dash-tile {
  display: grid; place-items: center; align-content: center; gap: var(--s-2); min-height: 112px; padding: var(--s-4) var(--s-3);
  border: 1px solid transparent; border-radius: var(--r-card); background: var(--accent-soft); color: var(--accent-text);
  font: 600 18px/24px var(--font); text-align: center; cursor: pointer; touch-action: manipulation;
  transition: transform var(--d-press) var(--ease-out), background-color var(--d-fast) var(--ease-out);
}
.dash-tile[data-tile="sale"] { background: var(--accent); color: var(--on-accent); }
.dash-tile:active { transform: scale(.97); }

/* End of day: one full-width task tile */
.dash-eod {
  width: 100%; display: flex; align-items: center; gap: var(--s-3); min-height: 72px; padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); color: var(--ink); text-align: start; cursor: pointer;
  transition: transform var(--d-press) var(--ease-out), background-color var(--d-fast) var(--ease-out);
}
.dash-eod:active { transform: scale(.97); }
.dash-eod__ic { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-pill); background: var(--warn-soft); color: var(--warn); }
.dash-eod.is-done .dash-eod__ic { background: var(--ok-soft); color: var(--ok); }
.dash-eod__body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.dash-eod__title { font: var(--t-h3); }
.dash-eod__state { font: var(--t-meta); color: var(--ink-3); }
.dash-eod.is-done .dash-eod__state { color: var(--ok); font-weight: 600; }
.dash-eod__verb { flex: none; display: inline-flex; align-items: center; gap: var(--s-1); color: var(--accent-text); font-weight: 600; }
.dash-eod-missing .inotice { margin: 0; }
.dash-delivery { justify-self: start; min-height: var(--tap); padding-inline: 0; gap: var(--s-1); }

/* one money line (no profit), Awaiting owner, Activity today */
/* one figure: confirmed sales today (what waits for the owner is the "Awaiting owner" row, said once) */
.dash-money.stats { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.dash-money .stats__cell { min-width: 0; padding: var(--s-3) var(--s-4) var(--s-4); border-inline-start: 0; }
.dash-money .stats__label { letter-spacing: .02em; }
.dash-money .stats__value { font: var(--t-h2); }
.dash-money .stats__cell:first-child .stats__value { font: var(--t-title); }
.dash-activity { min-width: 0; }
.dash-activity .lrow__lead { color: var(--ink-3); }
.dash-activity__more { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-4); margin-top: var(--s-2); }
.dash-activity__left { flex-basis: 100%; margin: 0; font: var(--t-meta); color: var(--ink-3); }
.dash-activity__more .btn { padding-inline: 0; gap: var(--s-1); }
.dash-activity > .attn__none { padding: var(--s-2) 0; }

/* touch: every text button is a 48 px target, like the R5 controls */
@media (pointer: coarse) { .dash-cmp, .dash-btable__name, .dash-btable__link { min-height: var(--tap); } }

/* ------------------------------------------------------------------ hover (fine pointers only) */
@media (hover: hover) and (pointer: fine) {
  .dash-tile:hover { border-color: var(--accent); }
  .dash-tile[data-tile="sale"]:hover { background: var(--accent-hover); }
  .dash-eod:hover { background: var(--surface-3); }
  .dash-cmp:hover { text-decoration-thickness: 2px; }
  .dash-btable__name:hover { text-decoration: underline; text-underline-offset: 3px; }
  .dash-btable__link:hover { text-decoration-thickness: 2px; }
}

/* ------------------------------------------------------------------ reduced motion (system OR the Settings switch): no press movement */
html.no-motion :is(.dash-tile, .dash-eod, .dash-cmp, .dash-btable__name, .dash-btable__link):active { transform: none; }
html.no-motion .dash-hero .is-counting { opacity: 1; }