/* Dashboard (ui/dashboard.js). Page-specific rules only: shared tokens and components live in app.css (owned by the shell helper).
   Wave's dashboard: a 48px serif greeting, three 44px tinted tiles, a 28px section heading with an outline Customize pill, then white cards with a thin border and
   12px corners in two columns (one on a phone). Chart colours: green for money in, hatching for money out (so colour is never the only cue), the accent for the
   net line and the current period, slate for the previous period, and eight categorical hues for the donut (the validated order of the data-viz method). */
:root{
  --in:#008300; --acc:#0040ff; --prev:#7d8b96; --hatch-bg:#e3e8ec; --hatch-ln:#6b7a85;   /* the hatch line is 4.4:1 and the outflow outline (--prev) 3.5:1 on white: WCAG 1.4.11 asks 3:1 for a shape */
  --c0:#2a78d6; --c1:#eb6834; --c2:#1baf7a; --c3:#eda100; --c4:#e87ba4; --c5:#008300; --c6:#6250d6; --c7:#e34948; --c-others:#7d8b96;
  --tile-green:#ebfef4; --tile-blue:#e0f2ff; --tile-purple:#f1e8fc; --tile-orange:#fdf0e7;
  --font-serif:'STIX Two Text',Georgia,'Times New Roman',serif;
}
.greet{font-family:var(--font-serif);font-weight:400;font-size:clamp(34px,5vw,48px);line-height:1.1;color:var(--text-primary)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.tile{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border-radius:var(--radius);color:var(--text-primary);font-size:var(--type-s);font-weight:700;text-decoration:none;transition:filter 120ms var(--ease),transform 140ms var(--ease)}
.tile:active{transform:matrix(.97,0,0,.97,0,0)}
.tile-green{background:var(--tile-green)}.tile-blue{background:var(--tile-blue)}.tile-purple{background:var(--tile-purple)}.tile-orange{background:var(--tile-orange)}
@media (hover:hover) and (pointer:fine){.tile:hover{filter:brightness(.97)}}
.insights-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:8px}
.insights-t{font-size:var(--type-xxl);font-weight:400;line-height:1.2;font-family:var(--font-serif)}   /* the serif is loaded at 400 only, as Wave sets it: a bold would be a smeared copy */
.insights-head .btn{display:inline-flex;align-items:center;gap:8px}
.insights{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:stretch}
@media (min-width:960px){.insights{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* A card */
.dcard{min-width:0;display:flex;flex-direction:column;gap:16px;padding:20px 24px 24px;background:var(--bg-panel);border:1px solid var(--divider);border-radius:var(--radius);container-type:inline-size}
.dcard-head{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title pick" "sub link";column-gap:16px;row-gap:2px;align-items:center}
.dcard-t{grid-area:title;font-size:var(--type-l);font-weight:700;line-height:1.25}
.dcard-pick{grid-area:pick;justify-self:end}
.dcard-s{grid-area:sub;color:var(--text-secondary);font-size:var(--type-s)}
.dcard-link{grid-area:link;justify-self:end}
.dcard-link .rowlink{font-size:var(--type-s)}
.dsel{width:auto;min-height:36px;padding:0 12px;font-size:var(--type-s)}
.dcompare{display:inline-flex;align-items:center;gap:8px}
.dcompare-l{flex:none;white-space:nowrap;font-size:var(--type-xs);font-weight:700;color:var(--text-secondary)}
/* a narrow card stacks: title, basis, View report, then the choice across the card */
@container (max-width:430px){
  .dcard-head{grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "sub" "link" "pick";row-gap:6px}
  .dcard-link{justify-self:start}
  .dcard-pick{justify-self:stretch;margin-top:4px}
  .dcard-pick .dsel{width:100%}
  .dcompare{display:flex;width:100%}
  .dcompare .dsel{flex:1 1 auto;min-width:0}
}
.dcard-body{display:flex;flex-direction:column;gap:14px;min-width:0}
.dcard-empty{color:var(--text-secondary);font-size:var(--type-s)}

/* Overdue invoices and bills: two lists in a scroll area */
.od-scroll{display:flex;flex-direction:column;gap:20px;max-height:380px;overflow-y:auto;padding-right:4px;margin-right:-4px}
.od-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:4px}
.od-t{font-size:var(--type-s);font-weight:700;color:var(--text-secondary)}
.orows{list-style:none}
.orow{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 0;border-top:1px solid var(--divider);color:var(--text-primary);text-decoration:none}
.orow-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.orow-name{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.orow-late{font-size:var(--type-xs);color:var(--bad-ink)}
.orow-amt{flex:none;font-weight:700;font-variant-numeric:tabular-nums}
.orow-go{flex:none;color:var(--text-secondary)}
@media (hover:hover) and (pointer:fine){.orow:hover{background:var(--bg-panel-2)}}

/* Charts */
.chart-host{min-width:0;min-height:120px}
.chart,.donut{display:block;max-width:100%;overflow:visible}
.chart .gl{stroke:var(--divider);stroke-width:1;shape-rendering:crispEdges}
.chart .zero{stroke:var(--text-tertiary);stroke-width:1;shape-rendering:crispEdges}
.chart .ax{font:400 12px var(--font-ui);fill:var(--text-secondary)}
.chart .bar-in{fill:var(--in)}
.chart .bar-out{stroke:var(--prev);stroke-width:1;stroke-linejoin:round}
.chart .bar-prev{fill:var(--prev)}
.chart .bar-cur{fill:var(--acc)}
.chart .hatch-bg{fill:var(--hatch-bg)}
.chart .hatch-ln{fill:var(--hatch-ln)}
.chart .netline{fill:none;stroke:var(--acc);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .netdot{fill:var(--acc);stroke:var(--bg-panel);stroke-width:2}
.chart .band{fill:var(--bg-panel-2)}
.chart .hit{fill:transparent;pointer-events:all}
.chart .tip-bg{fill:var(--text-primary);opacity:.94}
.chart .tip-h{font:700 12px var(--font-ui);fill:#fff}
.chart .tip-l{font:400 12px var(--font-ui);fill:#fff}
.legend{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:var(--type-xs);color:var(--text-secondary)}
.legend li{display:inline-flex;align-items:center;gap:8px}
.sw{flex:none;width:12px;height:12px;border-radius:3px;background:var(--prev)}
.sw.in{background:var(--in)}
.sw.out{background:repeating-linear-gradient(135deg,var(--hatch-bg) 0 3px,var(--hatch-ln) 3px 5px);border:1px solid var(--prev)}
.sw.net{height:2px;width:16px;border-radius:1px;background:var(--acc)}
.sw.prev{background:var(--prev)}.sw.cur{background:var(--acc)}
.sw.s0,.arc.s0{background:var(--c0);stroke:var(--c0)}.sw.s1,.arc.s1{background:var(--c1);stroke:var(--c1)}.sw.s2,.arc.s2{background:var(--c2);stroke:var(--c2)}.sw.s3,.arc.s3{background:var(--c3);stroke:var(--c3)}
.sw.s4,.arc.s4{background:var(--c4);stroke:var(--c4)}.sw.s5,.arc.s5{background:var(--c5);stroke:var(--c5)}.sw.s6,.arc.s6{background:var(--c6);stroke:var(--c6)}.sw.s7,.arc.s7{background:var(--c7);stroke:var(--c7)}
.sw.sOthers,.arc.sOthers{background:var(--c-others);stroke:var(--c-others)}
.arc{background:none}
.donut .ring-bg{stroke:var(--bg-panel-2)}
.donut .donut-pct{font:700 28px var(--font-ui);fill:var(--text-primary)}
.donut .donut-sub{font:400 12px var(--font-ui);fill:var(--text-secondary)}
.donut-wrap{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.donut-host{flex:none}
.donut-legend{list-style:none;flex:1 1 180px;min-width:0;display:flex;flex-direction:column;gap:8px;font-size:var(--type-s)}
.donut-legend li{display:flex;align-items:center;gap:10px;min-width:0}
.dl-pct{flex:none;min-width:36px;font-weight:700;font-variant-numeric:tabular-nums}
.dl-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-secondary)}

/* Net income table and Payable and owing */
.dtable{width:100%;border-collapse:collapse;font-size:var(--type-s)}
.dtable th,.dtable td{padding:10px 0;border-top:1px solid var(--divider);text-align:left;font-weight:400}
.dtable thead th{border-top:0;padding-top:0;font-size:var(--type-2xs);font-weight:700;color:var(--text-secondary)}
.dtable th[scope=row]{color:var(--text-secondary)}
.dtable .num{text-align:right;font-variant-numeric:tabular-nums}
.dtable .neg{color:var(--bad-ink)}
.dtable .dt-total th,.dtable .dt-total td{font-weight:700;color:var(--text-primary)}
.dtable .dt-total .neg{color:var(--bad-ink)}
.owe+.owe{margin-top:6px}
.owe-rows{list-style:none}
.owe-rows li{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px;border-top:1px solid var(--divider)}
.owe-l{color:var(--text-secondary);font-size:var(--type-s)}
.owe-v{font-weight:700;font-variant-numeric:tabular-nums}