/* KPI dashboard (/dashboard) — Driv3 DESIGN.md tokens, ported from the approved prototype.
   Everything is scoped under .kpi-root so nothing leaks into the rest of the portal. */
.kpi-root {
  /* Brand colours come from the portal branding (--primary-color / --secondary-color, set by BrandingService);
     the Driv3 defaults apply when no branding is loaded. Tints are derived with color-mix so they follow the brand. */
  --kpi-azure: var(--primary-color, #1D0C67); --kpi-azure-pressed: var(--primary-color-dark, #160A4F);
  --kpi-azure-wash-6: color-mix(in srgb, var(--kpi-azure) 6%, transparent); --kpi-azure-wash-8: color-mix(in srgb, var(--kpi-azure) 8%, transparent);
  --kpi-aqua: var(--secondary-color, #33C6E4); --kpi-aqua-wash-14: color-mix(in srgb, var(--kpi-aqua) 14%, transparent);
  --kpi-white: #FFFFFF; --kpi-bg: #F6F6F8; --kpi-border: #E2E2E2; --kpi-divider: #D5DDE0;
  --kpi-text: #3E4958; --kpi-text-2: #595D62; --kpi-muted: #97ADB6; --kpi-inverse: #FFFFFF;
  --kpi-success: #38AC4A; --kpi-success-fg: #1A7C3E; --kpi-success-wash: rgba(56,172,74,.12);
  --kpi-warning: #FDCB00; --kpi-warning-fg: #7A5C00; --kpi-warning-wash: rgba(253,203,0,.18);
  --kpi-error: #E72525; --kpi-error-fg: #B81C1C; --kpi-error-wash: rgba(231,37,37,.12);
  --kpi-sh-100: 0 1px 4px rgba(12,12,13,.05); --kpi-sh-200: 0 6px 16px color-mix(in srgb, var(--kpi-azure) 22%, transparent);
  --kpi-ring: 0 0 0 3px color-mix(in srgb, var(--kpi-aqua) 20%, transparent);
  --kpi-r-sm: 8px; --kpi-r-md: 12px; --kpi-r-lg: 16px; --kpi-pill: 999px;
  --kpi-fast: 150ms ease;
  color: var(--kpi-text); font: 14px/1.4 Inter, system-ui, sans-serif; letter-spacing: .2px;
}
.kpi-root *, .kpi-root *::before, .kpi-root *::after { box-sizing: border-box; }
.kpi-root .num { font-variant-numeric: tabular-nums; }
.kpi-root button, .kpi-root select, .kpi-root input { font: inherit; color: inherit; letter-spacing: .2px; }

/* ---- header + filter bar ---- */
.kpi-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.kpi-title { font-size: 20px; line-height: 28px; margin: 0; font-weight: 700; color: var(--kpi-azure); }
.kpi-sub { color: var(--kpi-text-2); font-size: 12px; line-height: 16px; margin-top: 2px; }
.kpi-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.kpi-seg { display: flex; background: var(--kpi-bg); border: 1px solid var(--kpi-border); border-radius: var(--kpi-pill); padding: 3px; gap: 2px; }
.kpi-seg button { border: 0; background: transparent; min-height: 34px; padding: 0 12px; border-radius: var(--kpi-pill); cursor: pointer; font-weight: 600; font-size: 13px; color: var(--kpi-text-2); transition: background var(--kpi-fast), color var(--kpi-fast); }
.kpi-seg button.on { background: var(--kpi-azure); color: var(--kpi-inverse); box-shadow: var(--kpi-sh-200); }
.kpi-seg.mini { padding: 2px; } .kpi-seg.mini button { min-height: 26px; padding: 0 9px; font-size: 11px; }
.kpi-custom { display: flex; gap: 6px; align-items: center; }
.kpi-select, .kpi-input { background: var(--kpi-white); border: 1px solid var(--kpi-border); border-radius: var(--kpi-r-sm); min-height: 40px; padding: 8px 12px; font-size: 14px; color: var(--kpi-text); max-width: 220px; }
.kpi-btn { background: var(--kpi-white); border: 1px solid var(--kpi-divider); color: var(--kpi-azure); border-radius: var(--kpi-r-sm); min-height: 40px; padding: 0 14px; cursor: pointer; font-weight: 600; font-size: 14px; transition: border-color var(--kpi-fast), box-shadow var(--kpi-fast); }
.kpi-btn:hover { background: var(--kpi-bg); }
.kpi-btn.primary { background: var(--kpi-azure); color: var(--kpi-inverse); border-color: var(--kpi-azure); box-shadow: var(--kpi-sh-200); }
.kpi-btn.primary:hover { filter: brightness(1.08); background: var(--kpi-azure); }
.kpi-btn.primary:active { background: var(--kpi-azure-pressed); transform: translateY(1px); }
.kpi-btn:focus-visible, .kpi-select:focus-visible, .kpi-input:focus-visible, .kpi-seg button:focus-visible, .kpi-chip:focus-visible { outline: none; border-color: var(--kpi-aqua); box-shadow: var(--kpi-ring); }
.kpi-rel { position: relative; }
.kpi-backdrop { position: fixed; inset: 0; z-index: 900; }
.kpi-menu, .kpi-cfg { position: absolute; left: 0; top: calc(100% + 6px); max-width: calc(100vw - 40px); background: var(--kpi-white); border: 1px solid var(--kpi-border); border-radius: var(--kpi-r-md); box-shadow: var(--kpi-sh-200); padding: 6px; z-index: 1000; min-width: 260px; }
.kpi-cfg { padding: 8px 12px; }
.kpi-cfg label { display: flex; gap: 10px; align-items: center; font-size: 13px; min-height: 36px; cursor: pointer; color: var(--kpi-text); }
.kpi-cfg label input { accent-color: var(--kpi-azure); width: 16px; height: 16px; }
.kpi-cfg .reset { margin-top: 6px; width: 100%; }
.kpi-menu button { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: var(--kpi-r-sm); min-height: 40px; padding: 0 10px; font-size: 13px; font-weight: 600; color: var(--kpi-text); cursor: pointer; }
.kpi-menu button:hover:not(:disabled) { background: var(--kpi-azure-wash-6); color: var(--kpi-azure); }
.kpi-menu button:disabled { opacity: .5; cursor: default; }
.kpi-menu .sep { border-top: 1px solid var(--kpi-divider); margin: 6px 0; }
.kpi-error, .kpi-loading { background: var(--kpi-white); border: 1px solid var(--kpi-border); border-radius: var(--kpi-r-sm); padding: 16px; display: flex; gap: 12px; align-items: center; color: var(--kpi-text-2); font-size: 13px; }

/* ---- grid + cards ---- */
.kpi-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; transition: opacity var(--kpi-fast); }
.kpi-grid.is-loading { opacity: .6; }
.kpi-w { position: relative; min-width: 0; }
.kpi-card { background: var(--kpi-white); border: 1px solid var(--kpi-border); border-radius: var(--kpi-r-sm); box-shadow: var(--kpi-sh-100); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.kpi-root .c12 { grid-column: span 12; } .kpi-root .c8 { grid-column: span 8; } .kpi-root .c7 { grid-column: span 7; } .kpi-root .c6 { grid-column: span 6; } .kpi-root .c5 { grid-column: span 5; } .kpi-root .c4 { grid-column: span 4; } .kpi-root .c3 { grid-column: span 3; }
.kpi-hd { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.kpi-hd h2 { font-size: 13px; line-height: 20px; font-weight: 700; margin: 0 auto 0 0; color: var(--kpi-text); }
.kpi-hd h2.err { color: var(--kpi-error-fg); }
.kpi-sub-hd { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--kpi-divider); }
.kpi-w.dragging { opacity: .45; }
.kpi-w.drop-before { box-shadow: -4px 0 0 0 var(--kpi-aqua), var(--kpi-sh-100); }
.kpi-w.drop-after { box-shadow: 4px 0 0 0 var(--kpi-aqua), var(--kpi-sh-100); }

/* widget tool chips: 30px visual, 44px hit area via ::before */
.kpi-tools { display: inline-flex; gap: 6px; align-items: center; margin-left: 8px; }
.kpi-tools-float { position: absolute; top: 6px; right: 8px; z-index: 2; margin: 0; }
.kpi-chip { position: relative; width: 30px; height: 30px; border: 1px solid var(--kpi-border); background: var(--kpi-bg); border-radius: 50%; color: var(--kpi-text-2); cursor: pointer; display: grid; place-items: center; padding: 0; transition: background var(--kpi-fast), color var(--kpi-fast), border-color var(--kpi-fast); }
.kpi-chip::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; }
.kpi-chip .ic { width: 16px; height: 16px; display: block; }
.kpi-chip:hover { background: var(--kpi-azure-wash-6); border-color: var(--kpi-azure); color: var(--kpi-azure); }
.kpi-chip.more { color: var(--kpi-azure); }
.kpi-chip.drag { cursor: grab; } .kpi-chip.drag:active { cursor: grabbing; }
.kpi-chip.hide:hover { background: var(--kpi-error-wash); border-color: var(--kpi-error); color: var(--kpi-error-fg); }
.kpi-help-pop { position: absolute; right: 8px; top: 44px; z-index: 1200; width: min(340px, calc(100vw - 48px)); background: var(--kpi-white); border: 1px solid var(--kpi-aqua); border-radius: var(--kpi-r-md); box-shadow: var(--kpi-sh-200); padding: 10px 12px 12px; font-size: 13px; line-height: 1.5; color: var(--kpi-text-2); text-align: left; }
.kpi-help-hd { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; color: var(--kpi-azure); }
.kpi-help-body b { color: var(--kpi-text); } .kpi-help-body i { font-style: italic; }

/* ---- status bar ---- */
.kpi-statusbar { background: var(--kpi-white); border: 1px solid var(--kpi-border); border-radius: var(--kpi-r-sm); box-shadow: var(--kpi-sh-100); display: grid; grid-template-columns: 4fr 3fr; overflow: hidden; }
.kpi-sgroup { display: flex; flex-direction: column; min-width: 0; }
.kpi-sgroup + .kpi-sgroup { border-left: 2px solid var(--kpi-azure); }
.kpi-cap { font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--kpi-text-2); padding: 8px 12px 0; display: flex; align-items: center; gap: 6px; }
.kpi-sgroup.live .kpi-cap { color: var(--kpi-azure); padding-right: 140px; }
.kpi-sgroup.live .kpi-cap::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--kpi-aqua); animation: kpi-pulse 1.8s ease-out infinite; }
.kpi-kpis { display: grid; flex: 1; } .kpi-kpis.four { grid-template-columns: repeat(4, 1fr); } .kpi-kpis.three { grid-template-columns: repeat(3, 1fr); }
.kpi-kpi { cursor: pointer; padding: 12px; border-left: 1px solid var(--kpi-divider); min-width: 0; transition: background var(--kpi-fast); }
.kpi-kpi:first-child { border-left: 0; }
.kpi-kpi:hover { background: var(--kpi-azure-wash-6); }
.kpi-kpi:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--kpi-aqua); }
.kpi-kpi b { display: block; font-size: 24px; line-height: 30px; font-weight: 800; letter-spacing: -.3px; color: var(--kpi-azure); }
.kpi-kpi.bad b { color: var(--kpi-error-fg); }
.kpi-kpi > span { font-size: 12px; font-weight: 600; color: var(--kpi-text-2); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-kpi .open { font-size: 11px; font-weight: 600; color: var(--kpi-azure); opacity: 0; transition: opacity var(--kpi-fast); }
.kpi-kpi:hover .open { opacity: 1; }
.kpi-delta { font-size: 11px; font-weight: 700; margin-left: 6px; vertical-align: 5px; letter-spacing: .2px; border-radius: var(--kpi-pill); padding: 1px 6px; }
.kpi-delta.up { color: var(--kpi-success-fg); background: var(--kpi-success-wash); }
.kpi-delta.down { color: var(--kpi-error-fg); background: var(--kpi-error-wash); }
.kpi-delta.flat { color: var(--kpi-text-2); background: var(--kpi-bg); }
.kpi-delta.inv.up { color: var(--kpi-error-fg); background: var(--kpi-error-wash); }
.kpi-delta.inv.down { color: var(--kpi-success-fg); background: var(--kpi-success-wash); }
@keyframes kpi-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--kpi-aqua) 60%, transparent); } 100% { box-shadow: 0 0 0 8px transparent; } }

/* ---- money tiles ---- */
.kpi-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpi-tile { background: var(--kpi-white); border: 1px solid var(--kpi-border); border-radius: var(--kpi-r-sm); box-shadow: var(--kpi-sh-100); padding: 12px; min-width: 0; border-left: 4px solid var(--kpi-azure); }
.kpi-tile > span { font-size: 12px; font-weight: 600; color: var(--kpi-text-2); }
.kpi-tile b { display: block; font-size: 24px; line-height: 30px; font-weight: 800; letter-spacing: -.3px; color: var(--kpi-azure); }
.kpi-tile small { color: var(--kpi-text-2); font-size: 12px; }
.kpi-tile.m-revenue { border-left-color: var(--kpi-azure); }
.kpi-tile.m-commission { border-left-color: var(--kpi-aqua); }
.kpi-tile.m-completion { border-left-color: var(--kpi-success); }
.kpi-tile.m-missed { border-left-color: var(--kpi-error); } .kpi-tile.m-missed b { color: var(--kpi-error-fg); }
.kpi-state { display: inline-block; border-radius: var(--kpi-pill); padding: 2px 8px; font-size: 11px; font-weight: 800; letter-spacing: .2px; margin-left: 8px; vertical-align: 5px; }
.kpi-state.ok { background: var(--kpi-success-wash); color: var(--kpi-success-fg); }
.kpi-state.warn { background: var(--kpi-warning-wash); color: var(--kpi-warning-fg); }
.kpi-state.low { background: var(--kpi-error-wash); color: var(--kpi-error-fg); }
.kpi-tiles + .kpi-tools-float, .kpi-bare > .kpi-tools-float { top: -36px; }
.kpi-bare { padding-top: 0; }
.kpi-w.kpi-bare[data-w="money"] { margin-top: 30px; }
.kpi-w.kpi-bare[data-w="status"] .kpi-tools-float { top: 6px; }

/* ---- bars / rows ---- */
.kpi-rows { display: flex; flex-direction: column; gap: 4px; }
.kpi-row { display: grid; grid-template-columns: minmax(80px, 36%) 1fr 3em; align-items: center; gap: 8px; font-size: 13px; }
.kpi-row .lbl { color: var(--kpi-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.kpi-row .val { text-align: right; font-weight: 700; color: var(--kpi-text); }
.kpi-root .track { background: var(--kpi-bg); border: 1px solid var(--kpi-border); border-radius: var(--kpi-pill); height: 12px; overflow: hidden; }
.kpi-root .fill { height: 100%; border-radius: var(--kpi-pill); min-width: 2px; background: var(--kpi-azure); }
.kpi-root .fill.c { background: var(--kpi-error); } .kpi-root .fill.n { background: var(--kpi-muted); } .kpi-root .fill.w { background: var(--kpi-warning); }
.kpi-row.pair .track { height: 6px; margin: 2px 0; }
.kpi-row.tr { cursor: pointer; border-radius: var(--kpi-r-sm); padding: 3px 6px; grid-template-columns: minmax(120px, 30%) 1fr 5.5em; transition: background var(--kpi-fast); }
.kpi-row.tr:hover { background: var(--kpi-azure-wash-6); }
.kpi-row.tr.on { background: var(--kpi-azure-wash-8); box-shadow: inset 0 0 0 1.5px var(--kpi-azure); }
.kpi-row.tr:focus-visible { outline: none; box-shadow: var(--kpi-ring); }
.kpi-legend { display: flex; gap: 12px; font-size: 11px; font-weight: 600; color: var(--kpi-text-2); flex-wrap: wrap; align-items: center; }
.kpi-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; }
.kpi-legend .kpi-swatches { display: inline-flex; gap: 2px; } .kpi-legend .kpi-swatches i { margin: 0; }
.kpi-empty { color: var(--kpi-text-2); font-size: 13px; margin: auto 0; }
.kpi-hint { display: block; font-size: 12px; color: var(--kpi-text-2); margin-top: -2px; }
.kpi-root svg text { fill: var(--kpi-text-2); font-size: 10px; font-family: Inter, system-ui, sans-serif; font-weight: 600; }
.kpi-trend { width: 100%; height: 190px; } .kpi-heat { width: 100%; height: 200px; }

/* ---- count pill (map header) ---- */
.kpi-pill { border-radius: var(--kpi-pill); padding: 4px 10px; font-size: 11px; font-weight: 800; letter-spacing: .2px; background: var(--kpi-bg); color: var(--kpi-text-2); display: inline-flex; align-items: center; gap: 6px; min-height: 24px; }
.kpi-pill.count { background: var(--kpi-white); color: var(--kpi-azure); border: 1px solid var(--kpi-border); }

/* ---- drop-off map ---- */
.kpi-map { position: relative; height: 340px; border-radius: var(--kpi-r-md); overflow: hidden; background: var(--kpi-bg); }
.kpi-map-canvas { position: absolute; inset: 0; }
.kpi-map-msg { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; }
.kpi-map-legend { position: absolute; bottom: 12px; left: 12px; z-index: 5; background: var(--kpi-white); border: 1px solid var(--kpi-border); border-radius: var(--kpi-r-sm); padding: 6px 10px; box-shadow: var(--kpi-sh-100); }
.kpi-map-legend .kpi-swatches { gap: 0; } .kpi-map-legend .kpi-swatches i:first-child { border-radius: 2px 0 0 2px; } .kpi-map-legend .kpi-swatches i:last-child { border-radius: 0 2px 2px 0; }
.kpi-map .H_logo { display: none !important; }
.kpi-map .H_copyright, .kpi-map .H_copyright span { background: transparent !important; color: transparent !important; }
@media print { .kpi-map { height: 220px; } }

/* ---- placeholder widgets (data not in the API yet) ---- */
.kpi-placeholder { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; flex: 1; justify-content: center; min-height: 120px; }
.kpi-placeholder .kpi-empty { margin: 0; }

/* ---- donuts ---- */
.kpi-duo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: start; justify-items: center; flex: 1; align-content: center; }
.kpi-duo figure { margin: 0; text-align: center; min-width: 0; width: 100%; }
/* Tailwind's reset makes svg a block, so text-align on the figure does not centre it. */
.kpi-duo svg { width: min(100%, 100px); height: auto; display: block; margin: 0 auto; }
.kpi-duo figcaption { font-size: 11px; font-weight: 600; color: var(--kpi-text-2); }
.kpi-donut-total { font-size: 17px !important; font-weight: 800 !important; fill: var(--kpi-azure) !important; letter-spacing: -.3px; }
.kpi-dl { font-size: 12px; color: var(--kpi-text-2); display: flex; flex-direction: column; gap: 2px; align-items: center; text-align: center; margin-top: 4px; }
.kpi-dl.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px 8px; justify-items: start; text-align: left; font-size: 11.5px; }
.kpi-dl span { max-width: 100%; line-height: 1.3; }
.kpi-dl i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }

/* ---- insights ---- */
.kpi-says { display: flex; flex-direction: column; }
.kpi-say { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; font-size: 13px; line-height: 1.45; color: var(--kpi-text); padding: 6px 0; border-top: 1px solid var(--kpi-divider); }
.kpi-say:first-child { border-top: 0; padding-top: 0; }
.kpi-say i { font-style: normal; font-size: 15px; line-height: 1.3; }
.kpi-say b { color: var(--kpi-azure); font-weight: 700; }

/* ---- CO₂ ---- */
.kpi-rating { display: flex; align-items: baseline; gap: 10px; }
.kpi-rating b { font-size: 24px; line-height: 30px; font-weight: 800; letter-spacing: -.3px; color: var(--kpi-azure); }
.kpi-rating small { color: var(--kpi-text-2); font-size: 12px; }
.kpi-rating .kpi-delta { vertical-align: 2px; }
.kpi-mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 2px; }
.kpi-mini-stats > div { background: var(--kpi-bg); border-radius: var(--kpi-r-sm); padding: 8px 10px; min-width: 0; }
.kpi-mini-stats span { display: block; font-size: 11px; font-weight: 600; color: var(--kpi-text-2); }
.kpi-mini-stats b { font-size: 16px; font-weight: 800; color: var(--kpi-azure); letter-spacing: -.2px; }
.kpi-mini-stats .kpi-delta { vertical-align: 0; margin-left: 4px; font-size: 10px; }
.kpi-mini-stats .kpi-hint { margin-top: 0; }
.kpi-co2-bars .track.stack { display: flex; height: 14px; margin: 2px 0 6px; }
.kpi-co2-bars .stack .fill { border-radius: 0; min-width: 3px; }
.kpi-co2-bars .stack .fill:first-child { border-radius: var(--kpi-pill) 0 0 var(--kpi-pill); }
.kpi-co2-bars .stack .fill:last-child { border-radius: 0 var(--kpi-pill) var(--kpi-pill) 0; }
.kpi-review { border-top: 1px solid var(--kpi-divider); padding-top: 8px; font-size: 12px; color: var(--kpi-text-2); }
.kpi-review b { color: var(--kpi-text); font-weight: 700; }
.kpi-link { color: var(--kpi-azure); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--kpi-aqua); margin-left: 4px; }
.kpi-link:hover { border-bottom-width: 2px; }

/* ---- modal + tables ---- */
.kpi-overlay { position: fixed; inset: 0; background: rgba(62,73,88,.40); z-index: 1500; padding: 6vh 6vw; }
.kpi-panel { background: var(--kpi-white); border-radius: var(--kpi-r-lg); max-height: 88vh; overflow: auto; padding: 20px; color: var(--kpi-text); font: 14px/1.4 Inter, system-ui, sans-serif; }
.kpi-panel-hd { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.kpi-panel-hd h2 { font-size: 20px; line-height: 28px; margin: 0; font-weight: 700; color: var(--kpi-azure); }
.kpi-tw { overflow-x: auto; }
.kpi-tw table { border-collapse: collapse; font-size: 13px; width: 100%; }
.kpi-tw td, .kpi-tw th { border-bottom: 1px solid var(--kpi-divider); padding: 8px 12px 8px 0; text-align: left; color: var(--kpi-text); }
.kpi-tw th { color: var(--kpi-text-2); font-size: 12px; font-weight: 600; }
.kpi-tw td.num, .kpi-tw th.num { text-align: right; }
.kpi-trips td, .kpi-trips th { white-space: nowrap; } .kpi-trips td.addr { white-space: normal; min-width: 120px; }
.kpi-tw tr.trip { cursor: pointer; transition: background var(--kpi-fast); }
.kpi-tw tr.trip:hover td { background: var(--kpi-azure-wash-6); }
.kpi-tw tr.trip:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--kpi-aqua); }
.kpi-tw tr.trip td.act { color: var(--kpi-azure); font-weight: 600; font-size: 12px; }
.kpi-ov-sub { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: -4px 0 12px; }
.kpi-ov-sub .kpi-sub { margin: 0; }
.kpi-panel p { margin: 12px 0 0; }
.kpi-panel .kpi-chip { background: var(--kpi-bg); }

/* ---- responsive + print + motion ---- */
@media (max-width: 1100px) {
  .kpi-root .c8, .kpi-root .c7, .kpi-root .c6, .kpi-root .c5, .kpi-root .c4, .kpi-root .c3 { grid-column: span 6; }
  .kpi-statusbar { grid-template-columns: 1fr; }
  .kpi-sgroup + .kpi-sgroup { border-left: 0; border-top: 2px solid var(--kpi-azure); }
  .kpi-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .kpi-root .c8, .kpi-root .c7, .kpi-root .c6, .kpi-root .c5, .kpi-root .c4, .kpi-root .c3 { grid-column: span 12; }
  .kpi-kpis.four, .kpi-kpis.three { grid-template-columns: repeat(2, 1fr) !important; }
  .kpi-kpi { border-top: 1px solid var(--kpi-divider); }
  .kpi-tiles { grid-template-columns: 1fr; }
}
/* ---- print (Export → Print / save as PDF prints #kpi-root alone in a popup) ---- */
@media print {
  /* Orientation is left to the print dialog: forcing landscape here made Chrome rotate the sheet when the dialog was set to portrait. */
  @page { margin: 10mm; }
  html, body { background: #fff !important; margin: 0; }
  .kpi-root { padding: 0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .kpi-root * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .kpi-filters, .kpi-tools, .kpi-menu, .kpi-cfg, .kpi-backdrop, .kpi-help-pop, .kpi-overlay, .kpi-kpi .open { display: none !important; }
  .kpi-top { margin-bottom: 10px; }
  .kpi-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 8px; opacity: 1 !important; }
  .kpi-root .c12 { grid-column: span 2 !important; }
  .kpi-root .c8, .kpi-root .c7, .kpi-root .c6, .kpi-root .c5, .kpi-root .c4, .kpi-root .c3 { grid-column: span 1 !important; }
  .kpi-w, .kpi-card, .kpi-tile, .kpi-statusbar { box-shadow: none !important; break-inside: avoid; page-break-inside: avoid; }
  .kpi-w.kpi-bare[data-w="money"] { margin-top: 0; }
  .kpi-statusbar { grid-template-columns: 4fr 3fr !important; }
  .kpi-sgroup + .kpi-sgroup { border-left: 2px solid var(--kpi-azure) !important; border-top: 0 !important; }
  .kpi-kpis.four { grid-template-columns: repeat(4, 1fr) !important; } .kpi-kpis.three { grid-template-columns: repeat(3, 1fr) !important; }
  .kpi-kpi { border-top: 0 !important; padding: 8px 10px; }
  .kpi-tiles { grid-template-columns: repeat(4, 1fr) !important; }
  .kpi-kpi b, .kpi-tile b { font-size: 20px; line-height: 26px; }
  .kpi-trend { height: 150px; } .kpi-heat { height: 160px; }
  .kpi-duo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi-sgroup.live .kpi-cap::before { animation: none !important; }
  .kpi-link { border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .kpi-root * { transition: none !important; animation: none !important; }
}