/* ============================================================
   dash-charts.css — charts, stat tiles and the report filter row
   for the Bar dashboard's Overview and Sales & profit pages.
   Light surface only. Marks carry colour; every label, value and
   legend entry is written in the ink tokens.
   ============================================================ */

/* ---------- stat tiles: label · sparkline · value · change · note ---------- */
.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(min-width:1760px){.kpis{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:1100px){.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tile{display:flex;flex-direction:column;min-height:132px}
.tile .kpi__label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tile__top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;min-height:30px}
.tile__top .kpi__label{padding-top:2px}
.tile .spark{flex:none;display:block;margin-top:-4px}
.tile .kpi__val{margin-top:6px;font-variant-numeric:normal}
.tile__delta{margin-top:8px;font-size:12px;color:var(--ink-2);line-height:1.35}
.tile .kpi__sub{margin-top:auto;padding-top:8px}
.tile__delta + .kpi__sub{padding-top:5px}
.delta{display:inline-flex;align-items:center;gap:4px;font-weight:700;font-size:12px;padding:2px 8px;border-radius:99px;white-space:nowrap;font-variant-numeric:tabular-nums}
.delta span[aria-hidden]{font-size:8px;line-height:1}
.delta--up{color:#2F7D3B;background:#EAF3E4}
.delta--down{color:#B4472F;background:#FBEAE4}
.delta--flat{color:var(--ink-2);background:var(--ivory-2)}
.delta__vs{color:var(--ink-2)}
.nowlbl{color:var(--ink-3);white-space:nowrap}
.nowlbl:not(:empty)::before{content:"·";margin:0 6px 0 2px}

/* ---------- report period: one row above everything it scopes ---------- */
.filterrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:-4px 0 18px}
.filterrow__lbl{font-size:12.5px;color:var(--ink-2)}
#sr-body{transition:opacity .18s ease}
#sr-body.is-loading{opacity:.5;pointer-events:none}

/* ---------- panel layout ---------- */
.cols--wide{grid-template-columns:minmax(0,1.75fr) minmax(0,1fr)}
.cols--even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.cols--one{grid-template-columns:minmax(0,1fr)}
@media(max-width:1000px){.cols--wide,.cols--even{grid-template-columns:minmax(0,1fr)}}
.cols > .panel{display:flex;flex-direction:column}
.panel__hd .sub{max-width:62ch;line-height:1.45}
.cxsub{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:18px 0 4px;padding-top:14px;border-top:1px solid var(--line-2)}
.cxsub h3{font-family:var(--serif);font-size:16px;font-weight:600}
.cxsub span{font-size:12px;color:var(--ink-3)}

/* ---------- legend: a box for bars, a stroke for lines ---------- */
.legend{flex-wrap:wrap;gap:6px 16px;min-height:18px}
.legend:empty{display:none}
.legend span{display:inline-flex;align-items:center}
.legend i{border-radius:3px;flex:none}
.legend i.lg-line{width:16px;height:3px;border-radius:2px}
.ramplg{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink-2)}
.cx-ramp{display:inline-flex;gap:2px}
.cx-ramp i{width:14px;height:10px;border-radius:2px;display:block}
.legend i.lg-thin{width:16px;height:2px;border-radius:1px}
#ov-inv .invstat .v{font-size:21px;overflow-wrap:normal;white-space:nowrap}
.swatch{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:8px;vertical-align:baseline}

/* ---------- chart host + SVG marks ---------- */
.cxhost{min-width:0}
.cx{position:relative;width:100%}
.cx-svg{display:block;overflow:visible;outline:none;touch-action:pan-y}
.cx-svg:focus-visible{outline:2px solid var(--brass);outline-offset:4px;border-radius:8px}
.cx-axis{font-family:var(--ui);font-size:11px;fill:var(--ink-2);font-variant-numeric:tabular-nums}
.cx-axis--strong{fill:var(--ink);font-weight:600}
.cx-quad{font-family:var(--ui);font-size:10.5px;fill:var(--ink-3);letter-spacing:.06em;text-transform:uppercase}
.cx-grid{stroke:var(--line-2);stroke-width:1;shape-rendering:crispEdges}
.cx-ref{stroke:#CDBFA6;stroke-width:1;shape-rendering:crispEdges}
.cx-tick{stroke:var(--ink);stroke-width:1.5}
.cx-target{stroke-width:2.5;stroke-linecap:round}
.cx-avg{stroke-width:1.5;shape-rendering:crispEdges}
.cx-band{fill:#F7F1E4}
.cx-col{transition:opacity .12s ease}
.cx-col.is-dim{opacity:.55}
.cx-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.cx-area{opacity:.1}
.cx-dot{stroke:var(--paper);stroke-width:2}
.cx-cross{stroke:#CDBFA6;stroke-width:1;shape-rendering:crispEdges}
.cx-cell{transition:opacity .12s ease}
.cx-cellring{fill:none;stroke:var(--ink);stroke-width:1.5;pointer-events:none}
.cx-pt{stroke:var(--paper);stroke-width:2;opacity:.9;transition:opacity .12s ease}
.cx-pt.is-dim{opacity:.35}
.cx-halo{fill:none;stroke:var(--ink);stroke-width:1.5;pointer-events:none}

/* ---------- tooltip: the value leads, the label follows ---------- */
.cx-tip{position:absolute;left:0;top:0;z-index:5;pointer-events:none;min-width:150px;max-width:260px;background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:10px 12px;box-shadow:0 2px 6px rgba(43,37,33,.06),0 16px 34px -18px rgba(43,37,33,.38);font-size:12px;line-height:1.35;color:var(--ink-2);opacity:0;transform:translateY(4px);transition:opacity .1s ease,transform .1s ease}
.cx-tip.in{opacity:1;transform:none}
.cx-tip__t{font-weight:600;color:var(--ink);margin-bottom:6px;overflow-wrap:anywhere}
.cx-tip__r{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:2px 0}
.cx-tip__k{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.cx-tip__v{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.cx-tip__r.is-strong .cx-tip__v{font-size:14px;font-weight:700}
.cx-tip__n{margin-top:6px;padding-top:6px;border-top:1px solid var(--line-2);color:var(--ink-2)}
.cx-key{width:9px;height:9px;border-radius:2px;display:inline-block;flex:none}
.cx-key--line{width:12px;height:3px;border-radius:2px}

/* ---------- horizontal bars ---------- */
.hb{display:flex;flex-direction:column;gap:2px}
.hb__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 12px;align-items:baseline;padding:8px 8px;margin:0 -8px;border-radius:10px;outline:none;transition:background .12s ease}
.hb__row:hover,.hb__row:focus-visible{background:var(--ivory-2)}
.hb__row:focus-visible{box-shadow:inset 0 0 0 2px var(--brass)}
.hb__lbl{min-width:0;display:flex;flex-direction:column;gap:1px}
.hb__name{font-size:13.5px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb__sub{font-size:11.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb__val{font-size:13.5px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.hb__track{grid-column:1 / -1;display:flex;gap:2px;height:10px;margin-top:4px;border-radius:0 4px 4px 0}
.hb__track i{display:block;height:100%;min-width:2px}
.hb__track i:last-child{border-radius:0 4px 4px 0}

/* ---------- one stacked bar + its legend (payments by tender) ---------- */
.sbar{display:flex;gap:2px;height:16px;margin:10px 0 12px}
.sbar i{display:block;min-width:3px;outline:none;transition:opacity .12s ease}
.sbar i:first-child{border-radius:4px 0 0 4px}.sbar i:last-child{border-radius:0 4px 4px 0}.sbar i:only-child{border-radius:4px}
.sbar:hover i:not(:hover){opacity:.55}
.sbar i:focus-visible{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--brass)}
.sbar__leg{display:flex;flex-wrap:wrap;gap:6px 16px;margin-bottom:12px;font-size:12px;color:var(--ink-2)}
.sbar__it{display:inline-flex;align-items:center;gap:6px}
.sbar__it i{width:10px;height:10px;border-radius:3px;display:block;flex:none}
.sbar__it b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}

.dtable td.muted{color:var(--ink-3);font-size:13.5px}

@media(max-width:820px){
  .filterrow{margin-bottom:14px}
  .filterrow .seg{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .filterrow .seg button{white-space:nowrap}
}
@media(max-width:520px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tile{min-height:0}
  .tile .spark{display:none}
  .filterrow .seg{display:flex;width:100%}
  .filterrow .seg button{flex:1 0 auto}
  .cx-tip{max-width:210px}
}
@media(max-width:360px){.kpis{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.cx-tip,.cx-col,.cx-pt,#sr-body{transition:none}}