/* KPI tiles and the Reports page. */
/* ---------- kpis ---------- */
.kpis{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:16px}
.kpi{border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;background:var(--card);min-width:0;box-shadow:var(--shadow-xs)}
.kpi .lab{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2);font-weight:600}
.kpi .val{font-size:clamp(20px,5.6vw,26px);font-weight:700;letter-spacing:-.02em;line-height:1.15;margin-top:6px;white-space:nowrap}
.kpi .kps{font-size:12.5px;color:var(--ink-3);margin-top:5px}
.kpi.hero{grid-column:1/-1}
.kpi.hero .val{font-size:clamp(36px,11vw,48px);letter-spacing:-.03em}
.kpi.warn{background:var(--warn-soft);border-color:var(--warn-line)}
.kpi.crit{background:var(--crit-soft);border-color:var(--crit-line)}
@media (min-width:1000px){
  .kpis.five{grid-template-columns:1.7fr repeat(4,minmax(0,1fr))}
  .kpis.five .kpi.hero{grid-column:auto}
  .kpis.four{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.delta{display:inline-flex;align-items:baseline;gap:4px;font-size:12.5px;font-weight:700}
.delta span{font-weight:500;color:var(--ink-3)}
.delta.up{color:var(--good-ink)}.delta.down{color:var(--crit)}.delta.flat{color:var(--ink-3);font-weight:500}

/* ---------- report ---------- */
.filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.datein{border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 12px;font-size:13.5px;font-weight:600;background:var(--bg);color:var(--ink-2);min-height:35px}
.datein.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);color:var(--ink)}
.filters .sp{margin-left:auto}
.dash{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){
  .dash{grid-template-columns:repeat(12,minmax(0,1fr))}
  .span-4{grid-column:span 4}.span-5{grid-column:span 5}.span-7{grid-column:span 7}.span-8{grid-column:span 8}.span-12{grid-column:span 12}
}
.chart{position:relative;width:100%;min-height:40px}
.chart svg{display:block;max-width:100%;height:auto}
.ax{font-size:11px;fill:var(--ink-3);font-family:var(--font);font-variant-numeric:tabular-nums}
.pk{font-size:11.5px;font-weight:700;fill:var(--ink);font-family:var(--font)}
.gl{stroke:var(--grid);stroke-width:1}
.bl{stroke:var(--axis);stroke-width:1}
.bar{fill:var(--s1);transition:opacity .12s}
.col:hover .bar,.col:focus-within .bar{opacity:.72}
.hit{fill:transparent;outline:none}
.stack{display:flex;gap:2px;height:18px;border-radius:5px;overflow:hidden;margin:4px 0 16px}
.stack .seg{min-width:3px;background:var(--c);transition:opacity .12s}
.stack .seg:hover,.stack .seg:focus{opacity:.8;outline:none}
.c-upi{--c:var(--s-upi)}.c-cash{--c:var(--s-cash)}.c-card{--c:var(--s-card)}
.lgd{display:flex;flex-direction:column;gap:2px}
.lgr{display:grid;grid-template-columns:12px minmax(0,1fr) auto 44px;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--wash-2);font-size:14px}
.lgr:first-child{border-top:0}
.sw{width:12px;height:12px;border-radius:3px;background:var(--c)}
.lgr .ln{font-weight:600}
.lgr .ln small{display:block;font-weight:500;color:var(--ink-3);font-size:12px}
.lgr .lv{font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.lgr .lp{color:var(--ink-3);text-align:right;font-variant-numeric:tabular-nums}
.cashnote{display:flex;align-items:center;gap:8px;margin:12px 0 0;padding:10px 12px;border-radius:10px;background:var(--wash);font-size:13.5px;color:var(--ink-2)}
.cashnote b{color:var(--ink)}
.hb{display:flex;flex-direction:column;gap:4px}
.hbr{display:grid;grid-template-columns:minmax(120px,210px) minmax(0,1fr);gap:12px;align-items:center;padding:5px 6px;border-radius:9px}
.hbr:hover,.hbr:focus{background:var(--wash);outline:none}
.who{display:flex;align-items:center;gap:9px;min-width:0}
.who span.nmx{font-size:13.5px;font-weight:600;line-height:1.2}
.track{display:flex;align-items:center;gap:8px;min-width:0}
.hbr .bar2{height:14px;background:var(--s1);border-radius:0 4px 4px 0;min-width:3px;flex:none}
.hbr .v{font-size:13.5px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.hbr .v small{font-weight:500;color:var(--ink-3);margin-left:5px;font-size:12.5px}
@media (max-width:520px){.hbr{grid-template-columns:minmax(0,1fr);gap:4px}}
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{border-collapse:collapse;width:100%;font-size:13.5px}
.tbl th,.tbl td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.tbl th:first-child,.tbl td:first-child{text-align:left}
.tbl th{font-size:12px;color:var(--ink-3);font-weight:600}
.hm{border-collapse:separate;border-spacing:3px;width:100%;font-size:13.5px}
.hm th{font-size:12px;font-weight:600;color:var(--ink-3);padding:4px 6px;text-align:center;white-space:nowrap}
.hm th:first-child{text-align:left}
.hm td{text-align:center;border-radius:6px;padding:8px 6px;font-weight:700;font-variant-numeric:tabular-nums;min-width:42px}
.hm td.pn{text-align:left;font-weight:600;padding-left:0;min-width:150px}
.hm td.pn .who{gap:8px}
.hm td.sum{background:none;color:var(--ink);min-width:50px}
.hm td.am{background:none;color:var(--ink-2);font-weight:600;min-width:74px;text-align:right}
.hm tfoot td{background:none;color:var(--ink-2);border-top:1px solid var(--line);border-radius:0}
.h0{background:var(--wash);color:var(--ink-3);font-weight:500!important}
.h1{background:var(--h1)}.h2{background:var(--h2)}.h3{background:var(--h3)}.h4{background:var(--h4)}
.h5{background:var(--h5);color:#fff}.h6{background:var(--h6);color:#fff}
.hmleg{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-3);margin-top:12px}
.hmleg i{width:18px;height:10px;border-radius:2px;display:inline-block}
.bills{display:flex;flex-direction:column}
.bday{font-size:12.5px;font-weight:700;color:var(--ink-2);padding:14px 0 6px;border-bottom:1px solid var(--line)}
.bill{display:grid;grid-template-columns:64px minmax(0,1fr) auto auto auto;gap:6px 12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--wash-2);font-size:13.5px}
.bill:last-child{border-bottom:0}
.bill .bt{color:var(--ink-3);font-variant-numeric:tabular-nums;font-size:12.5px}
.bill .bi{line-height:1.6}
.bill .ba{font-weight:700;text-align:right;font-variant-numeric:tabular-nums;min-width:70px}
.bill.void{opacity:.5}
.bill.void .ba{text-decoration:line-through}
.ptag{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.ptag::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--c)}
@media (max-width:640px){
  .bill{grid-template-columns:minmax(0,1fr) auto}
  .bill .bt{grid-column:1;grid-row:1}
  .bill .ba{grid-column:2;grid-row:1}
  .bill .bi{grid-column:1/-1;grid-row:2}
  .bill .ptag{grid-column:1;grid-row:3}
  .bill>button{grid-column:2;grid-row:3;justify-self:end}
}