:root{
  --navy:#141B3D; --teal:#283D99; --teal-dark:#1F2F78; --slate:#3A4A7A; --grey:#F3F5F9; --dove:#8E99A2;
  --red:#D64545; --amber:#E2A33B; --green:#2FA36B;
  --line:#E4E8EF;
  /* Chart series. NOT the brand teal: #283D99 fails the categorical lightness band
     (L 0.403). #4E63C4 is a lighter step of the same hue and passes all six palette
     checks against a white surface; #C77D2E is the validated second slot, held for a
     future two-series chart. Verified with the palette validator 2026-08-18. */
  --chart1:#4E63C4; --chart2:#C77D2E; --chart-grid:#EDF0F6; --chart-axis:#D8DEE9;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Rubik',system-ui,sans-serif;color:var(--navy);background:var(--grey);font-size:14px;line-height:1.45}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.01em}
a{color:var(--teal);text-decoration:none}
[hidden]{display:none!important}
.app{display:flex;flex-direction:column;min-height:100vh}

/* sticky chrome: header + top tab nav */
.chrome{position:sticky;top:0;z-index:30;background:#fff;box-shadow:0 1px 0 rgba(15,22,38,.02)}
.topbar{background:#fff;border-bottom:1px solid var(--line);padding:12px 26px;display:flex;align-items:center;gap:16px}
.brand{display:flex;flex-direction:column;line-height:1.05;padding-right:16px;margin-right:2px;border-right:1px solid var(--line)}
.brand .logo{font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--navy)}
.brand .logo span{color:var(--teal)}
.brand .sub{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--dove);margin-top:3px;white-space:nowrap}
.titlewrap{min-width:0}
.topbar h1{font-size:16.5px}
.topbar h1 b{color:var(--teal)}
.topbar .meta{font-size:11px;color:var(--dove);display:block;margin-top:1px}
.scope-chip{font-size:11px;font-weight:600;color:var(--slate);background:#EAEDF8;border:1px solid #C6CDEE;border-radius:20px;padding:3px 11px;white-space:nowrap}
.scope-chip.all{background:#eef1f5;border-color:var(--line);color:var(--dove)}
.spacer{flex:1}
.search{border:1px solid var(--line);border-radius:8px;padding:8px 12px;font:inherit;font-size:13px;width:210px;background:var(--grey)}
.btn{border:1px solid var(--line);background:#fff;border-radius:8px;padding:8px 14px;font:inherit;font-size:13px;cursor:pointer;color:var(--navy);font-weight:500}
.btn:hover{border-color:var(--teal);color:var(--teal)}
.btn.primary{background:var(--teal);color:#fff;border-color:var(--teal)}
.btn.primary:hover{background:#1F2F78;color:#fff}

/* top navigation tabs */
.nav{display:flex;gap:2px;background:#fff;border-bottom:1px solid var(--line);padding:0 18px;overflow-x:auto}
.nav button{display:flex;align-items:center;gap:8px;border:0;background:none;color:var(--slate);padding:12px 15px;font:inherit;font-size:13.5px;cursor:pointer;white-space:nowrap;border-bottom:3px solid transparent}
.nav button:hover{color:var(--teal)}
.nav button.active{color:var(--teal);border-bottom-color:var(--teal);font-weight:600}
.nav .ico{opacity:.85}

.content{padding:24px 26px 30px;max-width:1400px;width:100%;flex:1}
.foot{padding:12px 26px 22px;font-size:11px;color:var(--dove)}

.view-head{display:flex;align-items:flex-end;gap:14px;margin-bottom:16px}
.view-head h2{font-size:22px}
.view-head h2 b{color:var(--teal)}
.view-head p{margin:0;color:var(--dove);font-size:12.5px}

/* status banners (connecting / preview / error) */
.status{border-radius:10px;padding:11px 16px;margin-bottom:18px;font-size:12.7px;display:flex;gap:10px;align-items:flex-start}
.status.connecting{background:#EAEDF8;border:1px solid #C6CDEE;color:#283D99}
.status.preview{background:#fff8ec;border:1px solid #f0dcae;color:#7a5a13}
.status.error{background:#fbe9e9;border:1px solid #f0c2c2;color:#8a2b2b}

/* full-page loading overlay */
@keyframes spin{to{transform:rotate(360deg)}}
.loading-overlay{position:fixed;inset:0;background:var(--grey);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;z-index:40}
.loading-overlay .spinner{width:40px;height:40px;border:4px solid #C6CDEE;border-top-color:var(--teal);border-radius:50%;animation:spin .8s linear infinite}
.loading-overlay .loading-title{font-size:16px;font-weight:700;color:var(--navy)}
.loading-overlay .loading-sub{font-size:12px;color:var(--dove);margin-top:-10px}

/* KPI cards */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:22px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;position:relative;overflow:hidden}
.kpi .n{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1}
.kpi .l{font-size:11.5px;color:var(--dove);margin-top:7px;text-transform:uppercase;letter-spacing:.04em}
.kpi .sub{font-size:11px;color:var(--navy);margin-top:5px;opacity:.7}
.kpi.bad .n{color:var(--red)} .kpi.warn .n{color:var(--amber)} .kpi.good .n{color:var(--green)}
.kpi .bar{position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--teal)}
.kpi.bad .bar{background:var(--red)} .kpi.warn .bar{background:var(--amber)} .kpi.good .bar{background:var(--green)}
.kpi.clickable{cursor:pointer;transition:border-color .12s,box-shadow .12s,transform .12s}
.kpi.clickable:hover{border-color:var(--teal);box-shadow:0 3px 12px rgba(40,61,153,.10);transform:translateY(-1px)}

/* card-header / modal action buttons */
.hdacts{margin-left:auto;display:flex;gap:6px}
.iconbtn{border:1px solid var(--line);background:#fff;border-radius:7px;padding:5px 9px;font:inherit;font-size:11.5px;font-weight:500;cursor:pointer;color:var(--slate);white-space:nowrap}
.iconbtn:hover{border-color:var(--teal);color:var(--teal)}

/* per-card / per-modal print target */
#printbox{display:none}

.card{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:20px;overflow:hidden}
.card>.hd{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.card>.hd h3{font-size:14.5px}
.card>.hd .c{font-size:11.5px;color:var(--dove)}
.card>.bd{padding:0}
/* The card body is deliberately padding-free so TABLES run edge to edge — their header
   and row borders are meant to span the full card width. Every other kind of child needs
   the same 18px gutter the card header uses, or it sits flush against the card border:
   filter rows, KPI strips, charts and captions were all landing hard against the left edge
   while the card title beside them was indented. */
.card>.bd>.filters,
.card>.bd>.kpis,
.card>.bd>.chart,
.card>.bd>.chart-empty,
.card>.bd>.chart-note,
.card>.bd>.section-t,
.card>.bd>.banner{margin-left:18px;margin-right:18px}
.card>.bd>:first-child{margin-top:16px}
.card>.bd>.tablewrap:first-child{margin-top:0}
/* ...and the last non-table child needs a floor, since .bd contributes none */
.card>.bd>:last-child:not(.tablewrap){margin-bottom:16px}

/* tables */
table{width:100%;border-collapse:collapse;font-size:12.8px}
th,td{padding:9px 14px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{background:#fafbfd;color:var(--slate);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;position:sticky;top:0;user-select:none}
th:hover{color:var(--teal)}
tbody tr{cursor:pointer}
tbody tr:hover{background:#F4F6FD}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.tablewrap{max-height:560px;overflow:auto}

/* pills */
.pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:600;line-height:1.6}
.pill.red{background:#fbe9e9;color:var(--red)} .pill.amber{background:#fcf2e0;color:#b9791f}
.pill.green{background:#e6f5ee;color:var(--green)} .pill.grey{background:#eef1f5;color:var(--dove)}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle}
.dot.red{background:var(--red)} .dot.amber{background:var(--amber)} .dot.green{background:var(--green)} .dot.na{background:#ccd3db}

.banner{background:#fff8ec;border:1px solid #f0dcae;border-radius:10px;padding:12px 16px;margin-bottom:18px;font-size:12.7px;color:#7a5a13;display:flex;gap:10px;align-items:flex-start}
.banner b{color:#5e4609}
.banner.teal{background:#EAEDF8;border-color:#C6CDEE;color:#283D99}.banner.teal b{color:#1F2F78}

.legend{display:flex;gap:16px;font-size:11.5px;color:var(--dove);align-items:center;flex-wrap:wrap}
.legend span{display:flex;align-items:center;gap:5px}
.filters{display:flex;gap:12px;align-items:center;margin-bottom:16px;flex-wrap:wrap}
.filters label{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--dove);font-weight:600;display:flex;flex-direction:column;gap:4px}
select.flt,input.flt{border:1px solid var(--line);border-radius:8px;padding:7px 10px;font:inherit;font-size:13px;background:#fff;color:var(--navy);min-width:150px;text-transform:none;font-weight:400;letter-spacing:0}
select.flt.wide{min-width:270px}
input.flt[type=date]{min-width:150px}
input.flt:focus,select.flt:focus{outline:none;border-color:var(--teal)}
/* KPI strip inside a card: smaller than the view-level one so it reads as supporting
   detail for the chart below it rather than as a second headline */
.kpis.tight{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:16px}
.kpis.tight .n{font-size:21px}
.kpis.tight .kpi{padding:11px 13px}
.filters .clearf{align-self:flex-end}
.targetbar{background:#eef1f5;border-radius:6px;height:9px;overflow:hidden;width:130px;display:inline-block;vertical-align:middle;position:relative}
.targetbar>i{display:block;height:100%}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:900px){.grid2{grid-template-columns:1fr}}

.bartrack{background:#eef1f5;border-radius:6px;height:9px;overflow:hidden;min-width:80px;display:inline-block;vertical-align:middle;width:120px}
.bartrack>i{display:block;height:100%;background:var(--teal)}
.muted{color:var(--dove)}

/* modal */
.overlay{position:fixed;inset:0;background:rgba(15,22,38,.45);display:none;align-items:flex-start;justify-content:center;z-index:50;padding:40px 20px;overflow:auto}
.overlay.show{display:flex}
.modal{background:#fff;border-radius:14px;max-width:880px;width:100%;box-shadow:0 24px 60px rgba(0,0,0,.25)}
.modal .mh{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.modal .mh h3{font-size:17px}.modal .mh h3 b{color:var(--teal)}
.modal .mh .x{margin-left:auto;border:0;background:none;font-size:22px;cursor:pointer;color:var(--dove);line-height:1}
.modal .mb{padding:18px 22px;max-height:70vh;overflow:auto}
.kv{display:grid;grid-template-columns:160px 1fr;gap:6px 14px;font-size:13px;margin-bottom:16px}
.kv .k{color:var(--dove)}
.section-t{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--slate);font-weight:700;margin:14px 0 8px}

/* password gate */
#gate{position:fixed;inset:0;z-index:100;background:var(--navy);display:flex;align-items:center;justify-content:center;padding:24px}
#gate-form{background:#1A2456;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:34px 32px;width:100%;max-width:360px;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.gate-brand{font-size:24px;font-weight:800;letter-spacing:-.02em;color:#fff;margin-bottom:16px}
.gate-brand span{color:#7C8BDC}
.gate-slogan{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dove);margin-top:4px;margin-bottom:22px}
#gate-form h2{font-size:16px;color:#fff;font-weight:600}
#gate-form p{font-size:12.5px;color:var(--dove);margin:6px 0 18px}
#gate-pw{width:100%;border:1px solid rgba(255,255,255,.14);background:#111A45;color:#fff;border-radius:9px;padding:11px 13px;font:inherit;font-size:14px;margin-bottom:12px}
#gate-pw:focus{outline:none;border-color:var(--teal)}
#gate-form button{width:100%;border:0;background:var(--teal);color:#fff;border-radius:9px;padding:11px;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
#gate-form button:hover{background:#1F2F78}
#gate-err{display:none;color:#ff9d9d;font-size:12px;margin-top:12px}
#gate-err.show{display:block}

/* ── charts (inline SVG, no library) ───────────────────────────────────────── */
.chart{margin:0;padding:4px 0 0}
/* uniform scaling: height follows the viewBox so labels are never squashed */
.chart svg{width:100%;height:auto;display:block;overflow:visible}
.chart figcaption{font-size:11.5px;color:var(--dove);margin-top:6px}
.chart-empty{padding:38px 16px;text-align:center;color:var(--dove);font-size:13px;background:var(--grey);border-radius:8px}
.chart-note{font-size:11.5px;color:var(--dove);line-height:1.5;margin-top:10px;padding-top:9px;border-top:1px solid var(--line)}
/* recessive grid + axis: the marks carry the message, the frame must not compete */
.cg{stroke:var(--chart-grid);stroke-width:1}
.cax{stroke:var(--chart-axis);stroke-width:1}
.cy{fill:var(--dove);font-size:10.5px;text-anchor:end}
.cx{fill:var(--dove);font-size:10.5px;text-anchor:middle}
/* the peak / last-value direct label wears an INK token, never the series colour */
.cpk{fill:var(--navy);font-size:11px;font-weight:600;text-anchor:middle}
.cfill{fill:var(--chart1)}
/* 2px surface gap between neighbouring bars, drawn as a stroke in the surface colour */
.cbar .cfill{stroke:#fff;stroke-width:2;paint-order:stroke}
.cline{fill:none;stroke:var(--chart1);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.cpt{fill:var(--chart1);stroke:#fff;stroke-width:2}
/* invisible full-height hit target per mark — a 3px bar still gets a usable hover */
.chit{fill:transparent}
.cbar,.cdot{cursor:default}
.cbar:hover .cfill{fill:var(--teal)}
.cdot:hover .cpt{r:6.5}
#charttip{position:fixed;z-index:60;pointer-events:none;opacity:0;transition:opacity .09s;
  background:var(--navy);color:#fff;font-size:11.5px;line-height:1.5;padding:7px 10px;border-radius:7px;
  box-shadow:0 6px 20px rgba(15,22,38,.25);max-width:260px}
#charttip.show{opacity:1}
#charttip .dim{opacity:.72}
.spark{width:100%;max-width:280px;height:46px;display:block;margin:0 0 10px}
.spark path{fill:none;stroke:var(--chart1);stroke-width:2;stroke-linejoin:round}
.odopanel{margin-top:2px}

/* print */
.printhead{display:none}
@media print{
  .nav,.search,.btn,.foot,.scope-chip,.topbar .meta,.hdacts,.modal .x,#charttip{display:none!important}
  .chrome{position:static;box-shadow:none}
  .topbar{border:0;padding:0}
  .brand{border-right:0}
  .app{display:block}.tablewrap{max-height:none;overflow:visible}
  /* per-card / per-modal print: show only the cloned target */
  body.print-one .app,body.print-one #overlay{display:none!important}
  body.print-one #printbox{display:block!important}
  #printbox .card{box-shadow:none}
  .content{padding:0}.card{break-inside:avoid;box-shadow:none}
  body{background:#fff;font-size:11px}
  .printhead{display:flex;align-items:center;gap:12px;border-bottom:2px solid var(--teal);padding-bottom:10px;margin-bottom:16px}
  .printhead .logo{font-size:18px;font-weight:800}.printhead .logo span{color:var(--teal)}
  .view:not(.active){display:none}
  th{position:static}
  .overlay,.modal{position:static}
  #gate{display:none!important}
  .chart svg{max-height:190px}
  .chart,figure.chart{break-inside:avoid}
  @page{margin:14mm}
}
/* the selected tile in a tile-as-tab strip (Fuel & Card Spend → Exceptions) */
.kpi.sel{border-color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal)}
/* fuel drill-down: an inline figure that opens its records, and the action row in a pop-up */
.lnk{color:var(--teal);cursor:pointer;border-bottom:1px dotted currentColor}
.lnk:hover{border-bottom-style:solid}
.macts{display:flex;flex-wrap:wrap;gap:8px;margin:-4px 0 14px}
.cbar.click{cursor:pointer}
.modal.wide{max-width:1180px}
/* fuel pop-up lists are wide: let text cells wrap rather than push Driver off the edge (dates and figures stay on one line) */
.modal.wide td{white-space:normal}
.modal.wide td:first-child,.modal.wide td.num{white-space:nowrap}