/* ============================================================================
   Dashboard design system.

   Everything here hangs off the .dash wrapper the dashboard renders into, so
   the rest of FleetLog keeps its own look and nothing on other pages moves.

   The tokens (--d-*) are the app-wide palette from theme.css, in a light and
   a dark set. The charts read the same tokens (dashboard.js, readTheme), so
   canvas and HTML always agree.

   Depth is built in three layers: a translucent surface over the page, a
   crisp low-blur shadow under it, and a 1px inner highlight on its top edge.
   Hover lifts a card along the z axis inside a perspective set on its grid.
   ==========================================================================*/

/* The palette (--d-* tokens, light and dark) lives in theme.css, which the
   whole app shares; this file only lays out the dashboard with it. */

/* ----------------------------- shared scale ------------------------------ */
.dash {
  --d-radius:    16px;
  --d-radius-sm: 10px;
  --d-radius-xs: 7px;
  --d-lift:      cubic-bezier(0.25, 0.8, 0.25, 1);
  --d-hover-scale: 1.01;

  display: grid;
  gap: 18px;
  color: var(--d-ink);
  perspective: 1000px;              /* depth for the panels stacked in it */
}
/* A grid item is as wide as its widest content unless told otherwise, and
   a chart sizes its canvas to its box: left alone, a wide table widens the
   page, and the charts follow it off the screen. Every level may shrink, and
   a table that does not fit scrolls inside its own card. */
.dash, .dash > *, .dash .panel, .dash-kpis > *, .dash .grid-2 > *, .dash .alert-grid > *,
.dash .tb-lists > *, .dash .chart-wrap { min-width: 0; }
.dash .mono, .dash .numcol, .dash .kpi-value { font-variant-numeric: tabular-nums; }

/* filter labels in the top bar, which sits outside .dash */
.dash-filter { color: var(--muted); }

/* ------------------------------ entrances -------------------------------- */
/* `backwards`, not `both`: once a card has arrived its transform belongs to
   hover again, instead of being pinned to the last keyframe */
@keyframes d-rise { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }
.dash > *, .dash-kpis > .kpi { animation: d-rise .55s var(--d-lift) backwards; }
.dash > :nth-child(2) { animation-delay: .04s; }
.dash > :nth-child(3) { animation-delay: .08s; }
.dash > :nth-child(4) { animation-delay: .12s; }
.dash > :nth-child(n+5) { animation-delay: .16s; }
.dash-kpis > .kpi:nth-child(2) { animation-delay: .04s; }
.dash-kpis > .kpi:nth-child(3) { animation-delay: .08s; }
.dash-kpis > .kpi:nth-child(4) { animation-delay: .12s; }

/* -------------------------------- grids ---------------------------------- */
.dash-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px;
  perspective: 1000px;
}
.dash .dash-grid { perspective: 1000px; gap: 18px; }
.dash .grid-2 { grid-template-columns: 2fr 1fr; }
@media (max-width: 900px) { .dash .grid-2 { grid-template-columns: 1fr; } }
.dash-section { display: grid; gap: 12px; }

/* -------------------------------- cards ---------------------------------- */
/* one surface for every panel on the page, including the alert panels
   alerts.js draws: glass over the page, a hairline edge, a crisp shadow */
.dash .panel,
.dash .kpi {
  background: var(--d-surface);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid var(--d-border);
  border-radius: var(--d-radius);
  box-shadow: var(--d-highlight), var(--d-shadow);
  transition: transform .3s var(--d-lift), box-shadow .3s ease, border-color .3s ease;
}
.dash .panel { padding: 18px 20px; }
.dash .panel:hover,
.dash .kpi:hover {
  transform: translateY(-4px) scale(var(--d-hover-scale));
  box-shadow: var(--d-highlight), var(--d-shadow-hover);
  border-color: var(--d-border-strong);
}
/* A panel as wide as the page grows more with every percent of scale, and
   its table text shifts under the reader; the wide ones lift the full 4px
   but scale only a touch. */
.dash .dash-wide { --d-hover-scale: 1.003; }
.dash .alert-grid > .panel { --d-hover-scale: 1.006; }

/* ------------------------------ panel titles ----------------------------- */
.dash .ptitle {
  display: flex; align-items: center; flex-wrap: wrap;   /* also outside a .panel (the alerts heading) */
  font-family: var(--font-body); font-size: 13.5px; font-weight: 650; color: var(--d-ink);
  text-transform: none; letter-spacing: -.005em;
  border-bottom: 0; padding-bottom: 0; margin-bottom: 14px; gap: 10px;
}
.dash .ptitle > i.ph { color: var(--d-sky); font-size: 16px; }
.dash .dash-sectionhead { margin-bottom: 0; }
/* the icon badge used on titles and type blocks */
.dash .d-ico {
  display: inline-grid; place-items: center; flex: none;
  width: 28px; height: 28px; border-radius: 9px;
  background: var(--d-sky-soft); color: var(--d-sky); font-size: 15px;
  box-shadow: inset 0 0 0 1px var(--d-border);
}
.dash .d-title { font-weight: 650; }
.dash .d-sub { color: var(--d-muted); font-size: 12px; font-weight: 400; }
.dash .chart-hint { color: var(--d-faint); font-size: 11.5px; }
.dash .seeall {
  color: var(--d-sky); font-size: 11.5px; font-weight: 600; text-transform: none; letter-spacing: 0;
  text-decoration: none; white-space: nowrap; margin-left: auto;
}
.dash .seeall:hover { text-decoration: underline; text-underline-offset: 3px; }
.dash .d-empty { color: var(--d-muted); font-size: 12.5px; padding: 6px 0; }

/* --------------------------------- KPIs ---------------------------------- */
.dash .kpi {
  --tone: var(--d-sky); --tone-soft: var(--d-sky-soft);
  display: grid; gap: 10px; padding: 16px 18px 15px;
  color: inherit; text-decoration: none; position: relative;
  transform-style: preserve-3d;       /* lets the icon and figure sit above the card */
}
.dash .kpi.tone-emerald { --tone: var(--d-emerald); --tone-soft: var(--d-emerald-soft); }
.dash .kpi.tone-amber   { --tone: var(--d-amber);   --tone-soft: var(--d-amber-soft); }
.dash .kpi.tone-rose    { --tone: var(--d-rose);    --tone-soft: var(--d-rose-soft); }
/* the lift plus a lean towards the pointer (--rx / --ry, set in JS) */
.dash .kpi:hover {
  transform: translateY(-4px) scale(1.01) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
.dash .kpi:focus-visible { outline: 2px solid var(--tone); outline-offset: 3px; }
.dash .kpi-head { display: flex; align-items: center; gap: 10px; }
.dash .kpi-icon {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; flex: none;
  background: var(--tone-soft); color: var(--tone); font-size: 18px;
  box-shadow: inset 0 0 0 1px var(--d-border);
  transform: translateZ(18px);        /* floats a layer above its card */
}
.dash .kpi-label { font-size: 12.5px; font-weight: 600; color: var(--d-muted); letter-spacing: .01em; }
.dash .kpi-go {
  margin-left: auto; color: var(--d-faint); font-size: 14px;
  opacity: 0; transform: translate(-3px, 3px);
  transition: opacity .25s ease, transform .3s var(--d-lift), color .25s ease;
}
.dash .kpi:hover .kpi-go { opacity: 1; transform: none; color: var(--tone); }
.dash .kpi-value {
  font-family: var(--font-display); font-stretch: 100%; font-size: 30px; font-weight: 750;
  line-height: 1.05; letter-spacing: -.02em; color: var(--d-ink);
  transform: translateZ(10px);
}
.dash .kpi-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 22px; }
.dash .kpi-trend {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 7px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; background: var(--d-surface-2); color: var(--d-muted);
  box-shadow: inset 0 0 0 1px var(--d-border);
}
.dash .kpi-trend i { font-size: 13px; }
.dash .kpi-trend.good { background: var(--d-emerald-soft); color: var(--d-emerald); }
.dash .kpi-trend.warn { background: var(--d-amber-soft); color: var(--d-amber); }
.dash .kpi-sub { font-size: 11.5px; color: var(--d-faint); }

/* -------------------------------- charts --------------------------------- */
.dash .chart-wrap { height: 250px; }
.dash .dash-chart-tall { height: 280px; }

/* ------------------------------ cost tables ------------------------------ */
.dash .table-wrap {
  background: transparent; border: 0; border-radius: var(--d-radius-sm); overflow: auto;
  box-shadow: none;                   /* already inside a card */
}
.dash .table-wrap:hover { box-shadow: none; transform: none; }
.dash .costtable th:first-child, .dash .costtable th:last-child { border-radius: 0; }
.dash .costtable-wrap { margin-top: 16px; }
.dash .costtable { font-size: 12.5px; border-collapse: separate; border-spacing: 0; }
.dash .costtable th {
  position: static; background: transparent; color: var(--d-faint); cursor: default;
  font-size: 10.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase;
  padding: 8px 12px; border-bottom: 1px solid var(--d-border-strong);
}
.dash .costtable td { padding: 10px 12px; border-bottom: 1px solid var(--d-border); color: var(--d-ink-2); }
.dash .costtable tbody tr { transition: background .2s ease; }
.dash .costtable tbody tr:hover td,
.dash .costtable tbody tr:focus-visible td { background: var(--d-surface-2); }
.dash .costtable tbody tr:hover td:first-child { border-radius: var(--d-radius-xs) 0 0 var(--d-radius-xs); }
.dash .costtable tbody tr:hover td:last-child  { border-radius: 0 var(--d-radius-xs) var(--d-radius-xs) 0; }
.dash .costtable tfoot td {
  background: transparent; color: var(--d-ink); font-weight: 700;
  border-top: 1px solid var(--d-border-strong); border-bottom: 0;
}
.dash .costtable .numcol { text-align: right; }
.dash .plate { border-radius: 5px; }

/* The comparison bars inside the table: a faint track, a floating pill as
   long as the vehicle's share of the costliest one, and inside it two
   rounded segments, fuel and maintenance, parted by a small gap. */
.dash .pillcol { width: 30%; min-width: 180px; }
.dash .pill-cell { display: flex; align-items: center; gap: 10px; }
.dash .pill-track {
  flex: 1; height: 12px; border-radius: 999px; background: var(--d-track);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .06);
  padding: 2px; display: flex;
}
.dash .pill-bar {
  width: var(--len); display: flex; gap: 2px; min-width: 8px;
  transform-origin: left center;
  animation: d-grow .8s var(--d-lift) backwards;
  transition: transform .3s var(--d-lift);
}
@keyframes d-grow { from { transform: scaleX(0); } to { transform: none; } }
.dash .pill-seg {
  height: 100%; border-radius: 999px; min-width: 4px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .18), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.dash .pill-seg.fuel  { background: var(--d-fuel);  flex: 0 0 calc(var(--fuel) - 1px); }
.dash .pill-seg.maint { background: var(--d-maint); flex: 1 1 auto; }
.dash .pill-seg.fuel:only-child { flex: 1 1 auto; }
.dash .clickrow:hover .pill-bar { transform: translateY(-1px); }
.dash .pill-share { min-width: 38px; text-align: right; font-size: 12px; font-weight: 600; color: var(--d-ink); font-variant-numeric: tabular-nums; }

/* ------------------------- cost by vehicle type -------------------------- */
.dash .typeblocks { gap: 14px; }
.dash .typeblock {
  background: var(--d-surface-2); border: 1px solid var(--d-border); border-radius: var(--d-radius-sm);
  padding: 14px 16px;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s var(--d-lift);
}
.dash .typeblock + .typeblock { border-top: 1px solid var(--d-border); padding-top: 14px; }
.dash .typeblock:hover { border-color: var(--d-border-strong); box-shadow: var(--d-shadow); transform: translateY(-2px); }
.dash .tb-head { gap: 10px; margin-bottom: 10px; }
.dash .tb-name { font-size: 14px; font-weight: 700; color: var(--d-ink); }
.dash .tb-head .seeall { margin-left: 0; }
.dash .tb-total { font-size: 14px; font-weight: 700; color: var(--d-ink); }
.dash .tb-listhead { color: var(--d-faint); font-size: 10.5px; letter-spacing: .08em; }
.dash .tb-listhead .mono { color: var(--d-ink); font-size: 12.5px; font-weight: 600; }
.dash .tb-key { display: inline-flex; align-items: center; gap: 7px; }
.dash .tb-key::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.dash .tb-key.fuel::before  { background: var(--d-fuel); }
.dash .tb-key.maint::before { background: var(--d-maint); }
.dash .tb-list .costtable-wrap { margin-top: 6px; }

/* -------------------------------- alerts --------------------------------- */
.dash .alert-grid > .panel { padding: 16px 18px; }
.dash .alert-item { border-bottom-color: var(--d-border); border-radius: var(--d-radius-xs); transition: background .2s ease; }
.dash a.alert-item:hover, .dash button.alert-item:hover { background: var(--d-surface-2); }
.dash .badge { border-radius: 999px; padding: 2px 9px; letter-spacing: .06em; }

/* ------------------------- fuel cards to top up -------------------------- */
.dash-topups { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.dash .dash-topup {
  border: 1px solid var(--d-border); border-radius: var(--d-radius-sm); padding: 10px 12px;
  background: var(--d-surface-2);
  transition: transform .3s var(--d-lift), box-shadow .3s ease, border-color .3s ease;
}
.dash .dash-topup:hover { transform: translateY(-2px); box-shadow: var(--d-shadow); border-color: var(--d-border-strong); }

/* ---------------------------- recent activity ---------------------------- */
.dash .recentlist { display: grid; }
.dash .recentrow {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 10px; margin: 0 -10px; border-radius: var(--d-radius-sm);
  color: inherit; text-decoration: none; transition: background .2s ease;
}
.dash .recentrow:not(:last-child) { box-shadow: inset 0 -1px 0 var(--d-border); }
.dash .recentrow:hover { background: var(--d-surface-2); box-shadow: none; }
.dash .recent-main { display: flex; gap: 10px; align-items: center; min-width: 0; }
.dash .recent-text { color: var(--d-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash .recent-meta { display: flex; gap: 14px; align-items: center; flex: none; }
.dash .recent-date { color: var(--d-faint); font-size: 12px; }
.dash .recent-cost { font-size: 12.5px; font-weight: 600; color: var(--d-ink); }

/* --------------------------------- phone --------------------------------- */
@media (max-width: 640px) {
  .dash { gap: 14px; }
  .dash .panel { padding: 15px 14px; }
  .dash .kpi-value { font-size: 26px; }
  .dash .pillcol { min-width: 140px; }
  .dash .recent-meta { gap: 8px; }
}

/* Touch has no hover to end, so a tapped card would stay lifted. */
@media (hover: none) {
  .dash .panel:hover, .dash .kpi:hover, .dash .typeblock:hover, .dash .dash-topup:hover { transform: none; }
}

/* Less motion asked for: no lifting, leaning or growing. (The app already
   turns every transition and animation off; this also drops the resting
   3D offsets so nothing sits skewed.) */
@media (prefers-reduced-motion: reduce) {
  .dash .panel:hover, .dash .kpi:hover, .dash .typeblock:hover, .dash .dash-topup:hover { transform: none; }
  .dash .kpi-icon, .dash .kpi-value { transform: none; }
  .dash .kpi-go { opacity: 1; transform: none; }
}

/* ======================= Fleet Management Dashboard ======================= */
/* header, filters, summary banner, action centre and section grids
   (dashsections.js); all under .dash, on the same tokens as above */
.dash .dash-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.dash .dh-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: 12.5px; color: var(--d-muted); }
.dash .dh-meta b { color: var(--d-ink); font-weight: 600; }
.dash .dh-busy { color: var(--d-sky); }
.dash .dh-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dash .dh-quick { margin-left: auto; }
.dash .dh-views .btn { white-space: nowrap; }
.dash .dh-views { display: flex; gap: 6px; align-items: center; }
.dash .dh-views select { max-width: 180px; }
.dash .dh-quick { display: flex; flex-wrap: wrap; gap: 6px; }

.dash .dash-filters { display: grid; gap: 12px; position: relative; z-index: 31; }
.dash .dash-filter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 12px; align-items: end; }
.dash .dash-primary-filters { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.dash .dash-more-filters { min-width: 0; border-top: 1px solid var(--d-border); }
.dash .dash-more-filters > summary {
  display: flex; align-items: center; gap: 8px; min-height: 34px; cursor: pointer; list-style: none;
  color: var(--d-ink-2); font-size: 12.5px; font-weight: 600;
}
.dash .dash-more-filters > summary::-webkit-details-marker { display: none; }
.dash .dash-more-filters > summary::after { content: '+'; margin-left: auto; color: var(--d-sky); font: 600 16px/1 var(--font-mono); }
.dash .dash-more-filters[open] > summary::after { content: '\2212'; }
.dash .dash-more-filters > summary > i { color: var(--d-sky); font-size: 15px; }
.dash .dash-filter-count { color: var(--d-muted); font: 500 11px var(--font-mono); }
.dash .dash-more-filters > .dash-filter-grid { padding: 10px 0 2px; }
.dash .dash-filter-grid .f { min-width: 0; }
.dash .dash-filter-grid .pick { display: block; min-width: 0; }
.dash .dash-filter-grid .pick-btn { width: 100%; min-width: 0; justify-content: space-between; }
.dash .dash-filter-grid .pick-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.dash .recentrow { min-width: 0; }
.dash .recent-meta { flex-wrap: wrap; justify-content: flex-end; }
.dash .ac-item, .dash .ac-main { min-width: 0; }
.dash .ac-issue, .dash .ac-meta span { overflow-wrap: anywhere; }
.dash .fchips { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.dash .fchip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 999px; font-size: 12px;
  background: var(--d-sky-soft); color: var(--d-ink); border: 1px solid var(--d-border); max-width: 100%; }
.dash .fchip.fixed { padding-right: 10px; background: transparent; }
.dash .fchip .k { color: var(--d-muted); }
.dash .fchip > span:not(.k) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.dash .fchip .x { border: 0; background: none; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 6px; color: var(--d-muted); border-radius: 999px; }
.dash .fchip .x:hover, .dash .fchip .x:focus-visible { color: var(--d-rose); background: var(--d-rose-soft); }

.dash .dash-summary { display: grid; gap: 18px; }
.dash .dash-note { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.dash .dash-note.warn { border-color: var(--d-amber); background: var(--d-amber-soft); }

.dash .exec-banner { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr); gap: 14px 22px; border-left: 4px solid var(--d-sky); }
.dash .exec-banner.bad { border-left-color: var(--d-rose); }
.dash .exec-banner.warn { border-left-color: var(--d-amber); }
.dash .exec-banner.ok { border-left-color: var(--d-emerald); }
.dash .exec-status { display: grid; gap: 6px; align-content: start; justify-items: start; }
.dash .exec-status .k { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--d-muted); font-weight: 600; }
.dash .exec-lines p { margin: 0 0 5px; font-size: 13.5px; line-height: 1.5; color: var(--d-ink); }

.dash .prim-kpis { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.dash .kpi-value.na { font-size: 18px; color: var(--d-muted); }

.dash .status-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.dash .mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.dash .mini { display: grid; gap: 3px; padding: 10px 12px; border-radius: var(--d-radius-sm); border: 1px solid var(--d-border);
  background: var(--d-surface); color: var(--d-ink); text-decoration: none; min-width: 0; }
.dash .mini.linked { cursor: pointer; }
.dash .mini.linked:hover, .dash .mini.linked:focus-visible { border-color: var(--d-sky); outline: none; }
.dash .mini-k { font-size: 11.5px; color: var(--d-muted); line-height: 1.3; }
.dash .mini-v { font-size: 17px; font-weight: 650; overflow-wrap: anywhere; }
.dash .mini.bad { border-left: 3px solid var(--d-rose); }
.dash .mini.bad .mini-v { color: var(--d-rose); }
.dash .mini.warn { border-left: 3px solid var(--d-amber); }
.dash .mini.warn .mini-v { color: var(--d-amber); }
.dash .mini.good { border-left: 3px solid var(--d-emerald); }

.dash .sec-head { margin: 10px 0 -4px; scroll-margin-top: 80px; }
.dash .sec-title { margin: 0; font-size: 16px; }
.dash .sec-note { flex-basis: 100%; }
@media (min-width: 900px) { .dash .sec-note { flex-basis: auto; margin-left: auto; text-align: right; max-width: 55%; } }
.dash .chart-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; }
.dash .chart-grid > * { min-width: 0; }

.dash .dq-list, .dash .appr-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 14px; }
.dash .dq-row, .dash .appr-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: var(--d-radius-xs);
  color: var(--d-ink); text-decoration: none; font-size: 13px; border: 1px solid transparent; }
.dash .dq-row:hover, .dash .appr-row:hover, .dash .dq-row:focus-visible, .dash .appr-row:focus-visible { border-color: var(--d-border-strong); background: var(--d-surface); outline: none; }
.dash .appr-row > span:first-child { flex: 1; }

/* action centre */
.dash .ac-bar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: end; margin-bottom: 12px; }
.dash .ac-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dash .ac-chips .chip { border: 1px solid var(--d-border-strong); background: transparent; color: var(--d-ink); border-radius: 999px; padding: 4px 11px; font-size: 12px; cursor: pointer; }
.dash .ac-chips .chip.on { background: var(--d-ink); color: var(--d-surface-solid); border-color: var(--d-ink); }
.dash .ac-list { display: grid; gap: 8px; margin-bottom: 10px; }
.dash .ac-item { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 8px 14px; align-items: start; padding: 10px 12px;
  border-radius: var(--d-radius-sm); border: 1px solid var(--d-border); border-left: 4px solid var(--d-faint); background: var(--d-surface); }
.dash .ac-item.sev-critical { border-left-color: var(--d-rose); }
.dash .ac-item.sev-high { border-left-color: var(--d-amber); }
.dash .ac-item.sev-medium { border-left-color: var(--d-sky); }
.dash .ac-sev { display: flex; gap: 6px; align-items: center; }
.dash .ac-sev > i { font-size: 17px; color: var(--d-muted); }
.dash .ac-item.sev-critical .ac-sev > i { color: var(--d-rose); }
.dash .ac-item.sev-high .ac-sev > i { color: var(--d-amber); }
.dash .ac-title { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 13.5px; }
.dash .ac-issue { font-size: 13px; margin-top: 3px; color: var(--d-ink); }
.dash .ac-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--d-muted); margin-top: 4px; align-items: center; }
.dash .ac-comments { margin: 6px 0 0; padding-left: 18px; font-size: 12px; color: var(--d-muted); }
.dash .ac-btns { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }

.dash .dash-legacy { display: grid; gap: 18px; }

@media (max-width: 900px) {
  .dash .dh-quick { margin-left: 0; }
  .dash .exec-banner { grid-template-columns: 1fr; }
  .dash .chart-grid { grid-template-columns: 1fr; }
  .dash .ac-item { grid-template-columns: 1fr; }
  .dash .ac-btns { justify-content: flex-start; }
}
@media (max-width: 520px) {
  .dash .dash-filter-grid { grid-template-columns: 1fr 1fr; }
  .dash .prim-kpis, .dash .status-strip { grid-template-columns: 1fr 1fr; }
  .dash .dq-list, .dash .appr-list { grid-template-columns: 1fr; }
  .dash .dh-views select { max-width: 140px; }
}
.dash .recent-main { flex: 1 1 auto; }
@media (max-width: 520px) { .dash .recentrow { flex-wrap: wrap; } .dash .recent-meta { justify-content: flex-start; } }

/* ===================== Dispatch-board skin (summary) ======================
   The summary reads like a depot's control board: numbered bays for the
   sections, condensed display numerals, signal lamps for status and a
   hazard-striped rail on anything critical. Same tokens as the rest of the
   dashboard, so light and dark both hold. */
.dash {
  counter-reset: bay;
  --hazard-rose: repeating-linear-gradient(135deg, var(--d-rose) 0 7px, transparent 7px 14px);
  --hazard-amber: repeating-linear-gradient(135deg, var(--d-brand) 0 7px, transparent 7px 14px);
  --blueprint: linear-gradient(var(--d-grid) 1px, transparent 1px) 0 0 / 22px 22px,
               linear-gradient(90deg, var(--d-grid) 1px, transparent 1px) 0 0 / 22px 22px;
}

/* ---- header ---- */
.dash .dh-meta { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: .01em; }
.dash .dh-meta b { font-family: var(--font-body); }
.dash .dh-meta > span:nth-child(2)::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; vertical-align: 1px;
  background: var(--d-emerald); box-shadow: 0 0 0 3px var(--d-emerald-soft);
}

/* ---- filters: a control strip ---- */
.dash .dash-filters { border-top: 3px solid var(--d-brand); }
.dash .dash-filter-grid .f > span:first-child {
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--d-muted);
}
.dash .fchip.fixed { font-family: 'IBM Plex Mono', monospace; font-size: 11px; }

/* ---- bays: numbered section heads ---- */
.dash .sec-head {
  counter-increment: bay; display: flex; align-items: baseline; gap: 12px; margin: 22px 0 -2px;
  padding-bottom: 8px; border-bottom: 1px solid var(--d-border-strong); position: relative;
}
.dash .sec-head::before {
  content: counter(bay, decimal-leading-zero); order: -2;
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 600; color: var(--d-brand);
  padding: 2px 7px; border: 1px solid currentColor; border-radius: 4px; align-self: center;
}
.dash .sec-head::after {
  content: ''; position: absolute; left: 0; bottom: -1px; width: 64px; height: 3px; background: var(--d-brand); border-radius: 2px;
}
.dash .sec-head .d-ico { display: none; }
.dash .sec-title {
  font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1; text-transform: uppercase; letter-spacing: .035em; color: var(--d-ink);
}
.dash .sec-note { font-size: 11.5px; color: var(--d-faint); }

/* ---- executive banner: the status board ---- */
.dash .exec-banner {
  position: relative; overflow: hidden; padding: 22px 24px 20px 30px; border-left: 0;
  background: var(--blueprint), var(--d-surface);
}
.dash .exec-banner::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 8px; background: var(--d-sky); }
.dash .exec-banner.bad::before { background: var(--hazard-rose), var(--d-rose-soft); }
.dash .exec-banner.warn::before { background: var(--hazard-amber), var(--d-amber-soft); }
.dash .exec-banner.ok::before { background: var(--d-emerald); }
.dash .exec-status .k { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .14em; }
.dash .exec-word {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-weight: 900; font-size: 54px; line-height: .9; text-transform: uppercase; letter-spacing: .01em; color: var(--d-sky);
}
.dash .exec-banner.bad .exec-word { color: var(--d-rose); }
.dash .exec-banner.warn .exec-word { color: var(--d-amber); }
.dash .exec-banner.ok .exec-word { color: var(--d-emerald); }
.dash .exec-lamp {
  flex: none; width: 16px; height: 16px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent), 0 0 18px currentColor;
}
.dash .exec-banner.bad .exec-lamp { animation: d-lamp 1.6s ease-in-out infinite; }
@keyframes d-lamp { 50% { opacity: .35; box-shadow: 0 0 0 4px transparent, 0 0 4px currentColor; } }
.dash .exec-lines { counter-reset: line; display: grid; gap: 2px; align-content: center; }
.dash .exec-lines p {
  counter-increment: line; position: relative; padding: 5px 0 5px 34px; margin: 0; font-size: 14px;
  border-bottom: 1px dashed var(--d-border-strong);
}
.dash .exec-lines p:last-child { border-bottom: 0; font-weight: 600; }
.dash .exec-lines p::before {
  content: counter(line, decimal-leading-zero); position: absolute; left: 0; top: 6px;
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--d-faint);
}

/* ---- primary KPIs: gauges ---- */
.dash .prim-kpis .kpi { position: relative; overflow: hidden; padding-top: 20px; }
.dash .prim-kpis .kpi::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--tone); }
.dash .prim-kpis .kpi.tone-rose::before { background: var(--hazard-rose), var(--d-rose-soft); height: 6px; }
.dash .prim-kpis .kpi-label {
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
}
.dash .prim-kpis .kpi-value {
  font-family: var(--font-display); font-weight: 800; font-size: 44px; line-height: 1; letter-spacing: -.005em; margin: 6px 0 4px;
}
.dash .prim-kpis .kpi-value.na { font-family: var(--font-body); font-size: 17px; font-weight: 600; }
.dash .prim-kpis .kpi-sub { font-size: 11.5px; }

/* ---- status strip: signal lamps ---- */
.dash .status-strip {
  padding: 12px; border-radius: var(--d-radius); background: var(--d-ink); gap: 8px;
  box-shadow: var(--d-shadow-pop);
}
.dash .status-strip .mini {
  background: transparent; border: 1px solid rgba(255, 255, 255, .09); border-left-width: 1px; color: #f8fafc;
  padding: 10px 12px 10px 30px; position: relative;
}
.dash .status-strip .mini::before {
  content: ''; position: absolute; left: 12px; top: 14px; width: 9px; height: 9px; border-radius: 50%;
  background: #34d399; box-shadow: 0 0 8px #34d399;
}
.dash .status-strip .mini.warn::before { background: #fbbf24; box-shadow: 0 0 10px #fbbf24; }
.dash .status-strip .mini.bad::before { background: #fb7185; box-shadow: 0 0 12px #fb7185; }
.dash .status-strip .mini-k { color: #94a3b8; font-family: 'IBM Plex Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.dash .status-strip .mini-v { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1; color: #f8fafc; }
.dash .status-strip .mini.bad .mini-v { color: #fda4af; }
.dash .status-strip .mini.warn .mini-v { color: #fde68a; }
.dash .status-strip .mini.linked:hover, .dash .status-strip .mini.linked:focus-visible { border-color: var(--d-brand); background: rgba(255, 255, 255, .04); }
:root[data-theme="dark"] .dash .status-strip { background: #020617; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dash .status-strip { background: #020617; } }

/* ---- grouped figures ---- */
.dash .mini-k { font-family: 'IBM Plex Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; }
.dash .mini-v { font-size: 18px; }
.dash .mini.bad { border-left-width: 4px; }
.dash .mini.warn { border-left-width: 4px; }

/* ---- action centre: work tickets ---- */
.dash #action-centre > .panel { background: var(--blueprint), var(--d-surface); }
.dash .ac-item { position: relative; border-left: 0; padding-left: 20px; box-shadow: var(--d-shadow-sm); }
.dash .ac-item::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 6px; border-radius: var(--d-radius-sm) 0 0 var(--d-radius-sm); background: var(--d-faint); }
.dash .ac-item.sev-critical::before { background: var(--hazard-rose), var(--d-rose-soft); width: 8px; }
.dash .ac-item.sev-high::before { background: var(--d-brand); }
.dash .ac-item.sev-medium::before { background: var(--d-sky); }
.dash .ac-item:hover { border-color: var(--d-border-strong); box-shadow: var(--d-shadow); }
.dash .ac-title b { font-family: var(--font-display); font-weight: 800; font-size: 17px; text-transform: uppercase; letter-spacing: .02em; }
.dash .ac-meta { font-family: 'IBM Plex Mono', monospace; font-size: 11px; }
.dash .ac-chips .chip { font-family: 'IBM Plex Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }

/* ---- detail tables: a ledger ---- */
.dash .dash-summary .costtable thead th { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; }

/* ---- arrival: the board lights up in order ---- */
@keyframes d-board { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.dash .dash-summary > * { animation: d-board .5s cubic-bezier(.2, .7, .2, 1) backwards; }
.dash .dash-summary > :nth-child(1) { animation-delay: .02s; }
.dash .dash-summary > :nth-child(2) { animation-delay: .08s; }
.dash .dash-summary > :nth-child(3) { animation-delay: .14s; }
.dash .dash-summary > :nth-child(4) { animation-delay: .2s; }
.dash .dash-summary > :nth-child(5) { animation-delay: .26s; }
.dash .dash-summary > :nth-child(n+6) { animation-delay: .32s; }
.dash .prim-kpis > .kpi { animation: d-board .5s cubic-bezier(.2, .7, .2, 1) backwards; }
.dash .prim-kpis > .kpi:nth-child(2) { animation-delay: .06s; }
.dash .prim-kpis > .kpi:nth-child(3) { animation-delay: .12s; }
.dash .prim-kpis > .kpi:nth-child(4) { animation-delay: .18s; }
.dash .prim-kpis > .kpi:nth-child(5) { animation-delay: .24s; }
.dash .prim-kpis > .kpi:nth-child(6) { animation-delay: .3s; }
@media (prefers-reduced-motion: reduce) {
  .dash .dash-summary > *, .dash .prim-kpis > .kpi { animation: none; }
  .dash .exec-banner.bad .exec-lamp { animation: none; }
}

@media (max-width: 900px) {
  .dash .exec-word { font-size: 42px; }
  .dash .sec-title { font-size: 20px; }
}
@media (max-width: 520px) {
  .dash .prim-kpis .kpi-value { font-size: 32px; }
  .dash .status-strip .mini-v { font-size: 22px; }
  .dash .exec-banner { padding: 18px 16px 16px 24px; }
  .dash .sec-note { display: block; }
}

/* six gauges in whole rows: 6, then 3 + 3, then 2 + 2 + 2; figures shrink rather than wrap */
.dash .prim-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1680px) { .dash .prim-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .dash .prim-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dash .prim-kpis .kpi-value { font-size: clamp(28px, 2.6vw, 44px); overflow-wrap: anywhere; }

/* ---- section bar: stays under the top bar, one chip per section ---- */
.dash .dash-jump {
  position: sticky; top: 58px; z-index: 30;
  display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
  padding: 8px; border-radius: var(--d-radius); border: 1px solid var(--d-border);
  background: var(--d-glass); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  box-shadow: var(--d-shadow);
}
.dash .dash-jump::-webkit-scrollbar { display: none; }
.dash .jump-chip {
  flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: var(--d-muted); text-decoration: none; border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.dash .jump-chip i { font-size: 15px; }
.dash .jump-chip:hover, .dash .jump-chip:focus-visible { color: var(--d-ink); background: var(--d-sky-soft); outline: none; }
.dash .jump-chip.on { color: var(--d-sky); background: var(--d-sky-soft); border-color: var(--d-sky); }
.dash .jump-n { min-width: 20px; padding: 1px 6px; border-radius: 999px; font: 700 11px/1.5 'IBM Plex Mono', monospace; text-align: center; }
.dash .jump-n.bad { background: var(--d-rose-soft); color: var(--d-rose); }
.dash .jump-n.warn { background: var(--d-amber-soft); color: var(--d-amber); }
/* a section jumped to lands below the top bar and the section bar */
.dash .sec-head, .dash #action-centre { scroll-margin-top: 128px; }

/* ---- an empty panel says so plainly instead of leaving a blank card ---- */
.dash .panel > .d-empty {
  display: flex; align-items: center; justify-content: center; gap: 8px; text-align: center;
  min-height: 96px; margin-top: 6px; padding: 16px; border: 1px dashed var(--d-border-strong, var(--d-border));
  border-radius: var(--d-radius-sm);
}
@media (max-width: 620px) { .dash .dash-jump { top: 54px; } }
/* a chart that needs the room takes two columns of the grid, one where the grid has only one */
.dash .chart-grid > .span-2 { grid-column: span 2; }
@media (max-width: 1000px) { .dash .chart-grid > .span-2 { grid-column: auto; } }