/* ==========================================================================
   FleetGuard v2 — Dashboard components
   --------------------------------------------------------------------------
   STAGING ONLY. Four tiers, in the order they appear:

     .v2-stat-row     the four counters
     .v2-banner       conditional alert banners (service overdue, vicious circle)
     .v2-panel-grid   the 2x2 compliance panels, each a dense list of trucks
     .v2-timeline     full-width recent activity

   Everything reads the shared tokens and the .v2-accent-* sets from
   v2-cards.css. No colour, size or radius is declared literally here.
   ========================================================================== */

/* ── Tier 1: stat counters ───────────────────────────────────────────────── */

.v2-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: var(--v2-s5);
  margin-bottom: var(--v2-s8);
}

.v2-stat {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 148px;
  padding: var(--v2-s5) var(--v2-s6);
  background: var(--v2-surface);
  border: 1px solid var(--v2-line-glass);
  border-radius: var(--v2-r-lg);
  /* Ambient depth plus the inset top highlight that lifts a dark card off a
     dark ground — the same elevation recipe the tool cards use. */
  box-shadow: var(--v2-shadow);
  transition: transform var(--v2-t-base), border-color var(--v2-t-base), box-shadow var(--v2-t-base);
}
.v2-stat:hover {
  transform: translateY(-2px);
  border-color: var(--tc-ring);
  box-shadow: var(--v2-shadow-hover), 0 14px 36px -20px var(--tc);
}
/* Accent wash from the top-right, same gesture as the tiles and cards. */
.v2-stat::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(300px 160px at 92% -30%, var(--tc-soft), transparent 70%);
}

/* Geometric pattern, right-hand side, under a scrim so the value stays crisp.
   Same layering rule as the tool cards: art below, gradient over it, content
   on top — the copy column never competes with the pattern. */
.v2-stat-art { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.v2-stat-art svg {
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  height: 132%; width: auto;
  color: var(--tc);
  opacity: .5;
  transition: opacity var(--v2-t-base), transform var(--v2-t-base);
}
.v2-stat:hover .v2-stat-art svg { opacity: .72; transform: translateY(-50%) scale(1.05); }
.v2-stat-art::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(
    90deg,
    rgb(var(--v2-surface-rgb)) 30%,
    rgba(var(--v2-surface-rgb), .8) 58%,
    rgba(var(--v2-surface-rgb), .25) 100%);
}

.v2-stat-ic {
  width: 34px; height: 34px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--v2-r-sm);
  background: var(--tc-soft);
  color: var(--tc);
  border: 1px solid var(--tc-ring);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
  margin-bottom: auto;
}
.v2-stat-ic svg { width: 18px; height: 18px; }

/* Left-aligned, value dominant, label beneath — the reading order is
   number first, then what it counts. */
.v2-stat-body { min-width: 0; display: flex; flex-direction: column; }
.v2-stat-num {
  /* Display 32/40 Bold — the counters are the loudest thing on the page. */
  font-size: var(--v2-fs-display); line-height: var(--v2-lh-display);
  font-weight: var(--v2-fw-bold);
  letter-spacing: var(--v2-track-tight);
  font-variant-numeric: tabular-nums;
  color: var(--v2-ink);
}
/* Roadworthy and Critical carry their meaning in the number itself. */
.v2-stat.is-toned .v2-stat-num { color: var(--tc-hi); }
.v2-stat-label {
  font-size: var(--v2-fs-xs); line-height: var(--v2-lh-xs);
  color: var(--v2-ink-3);
}

/* ── Tier 2: conditional alert banners ───────────────────────────────────── */

.v2-banner {
  position: relative;
  display: flex; align-items: flex-start; gap: var(--v2-s4);
  padding: var(--v2-s5) var(--v2-s6);
  margin-bottom: var(--v2-s5);
  background: linear-gradient(180deg, var(--tc-soft), transparent 70%), var(--v2-surface);
  border: 1px solid var(--tc-ring);
  border-radius: var(--v2-r-lg);
  box-shadow: var(--v2-shadow);
}
/* Accent spine down the left edge — the banner's severity, read peripherally. */
.v2-banner::before {
  content: ''; position: absolute; left: 0; top: var(--v2-s5); bottom: var(--v2-s5);
  width: 3px; border-radius: var(--v2-r-pill);
  background: var(--tc);
}

.v2-banner-ic {
  width: 36px; height: 36px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--v2-r-sm);
  background: var(--tc-soft); color: var(--tc);
  border: 1px solid var(--tc-ring);
}
.v2-banner-ic svg { width: 19px; height: 19px; }

.v2-banner-body { flex: 1; min-width: 0; }
.v2-banner-title {
  font-size: var(--v2-fs-base); line-height: var(--v2-lh-base);
  font-weight: var(--v2-fw-semibold);
  color: var(--tc-hi);
  margin-bottom: var(--v2-s1);
}
.v2-banner-sub {
  font-size: var(--v2-fs-xs); line-height: var(--v2-lh-xs);
  color: var(--v2-ink-3);
  margin-bottom: var(--v2-s4);
}

.v2-banner-rows { display: flex; flex-direction: column; gap: var(--v2-s2); }
.v2-banner-row {
  display: flex; align-items: center; gap: var(--v2-s4);
  padding: var(--v2-s3) var(--v2-s4);
  background: rgba(var(--v2-well-rgb), calc(.45 * var(--v2-well-k)));
  border: 1px solid var(--v2-line-glass);
  border-radius: var(--v2-r-sm);
  color: inherit;
  transition: background var(--v2-t-fast), border-color var(--v2-t-fast);
}
.v2-banner-row:hover { background: rgba(var(--v2-well-rgb), calc(.7 * var(--v2-well-k))); border-color: var(--tc-ring); }
.v2-banner-truck {
  font-size: var(--v2-fs-base); font-weight: var(--v2-fw-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--v2-ink);
  white-space: nowrap;
}
.v2-banner-meta {
  flex: 1; min-width: 0;
  font-size: var(--v2-fs-xs); color: var(--v2-ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Truck chips — the vicious-circle banner lists numbers, not rows. */
.v2-chips { display: flex; flex-wrap: wrap; gap: var(--v2-s2); }
.v2-chip {
  display: inline-flex; align-items: center; gap: var(--v2-s2);
  padding: var(--v2-s1) var(--v2-s3);
  background: rgba(var(--v2-well-rgb), calc(.45 * var(--v2-well-k)));
  border: 1px solid var(--tc-ring);
  border-radius: var(--v2-r-pill);
  color: var(--tc-hi);
  font-size: var(--v2-fs-xs); font-weight: var(--v2-fw-semibold);
  font-variant-numeric: tabular-nums;
  transition: background var(--v2-t-fast);
}
.v2-chip:hover { background: var(--tc-soft); }

/* ── Tier 3: compliance panels ───────────────────────────────────────────── */

.v2-panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: var(--v2-s5);
  margin-bottom: var(--v2-s8);
}

.v2-panel {
  display: flex; flex-direction: column;
  background: var(--v2-surface);
  border: 1px solid var(--v2-line-glass);
  border-radius: var(--v2-r-lg);
  box-shadow: var(--v2-shadow);
  overflow: hidden;
}

.v2-panel-head {
  display: flex; align-items: center; gap: var(--v2-s3);
  padding: var(--v2-s4) var(--v2-s5);
  border-bottom: 1px solid var(--v2-line);
  background: linear-gradient(180deg, var(--tc-soft), transparent);
}
.v2-panel-ic {
  width: 28px; height: 28px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--v2-r-xs);
  background: var(--tc-soft); color: var(--tc);
  border: 1px solid var(--tc-ring);
}
.v2-panel-ic svg { width: 15px; height: 15px; }
.v2-panel-head h2 {
  margin: 0; flex: 1; min-width: 0;
  font-size: var(--v2-fs-base); line-height: var(--v2-lh-base);
  font-weight: var(--v2-fw-semibold);
  color: var(--v2-ink);
}
/* Count sits in the panel's own accent so a zero reads calm, not alarming. */
.v2-panel-count {
  flex-shrink: 0;
  min-width: 22px; padding: 1px var(--v2-s2);
  background: var(--tc-soft);
  border: 1px solid var(--tc-ring);
  border-radius: var(--v2-r-pill);
  color: var(--tc-hi);
  font-size: var(--v2-fs-micro); font-weight: var(--v2-fw-semibold);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.v2-panel.is-clear .v2-panel-count {
  background: var(--v2-surface-2);
  border-color: var(--v2-line);
  color: var(--v2-ink-3);
}

.v2-panel-body { padding: var(--v2-s2); display: flex; flex-direction: column; gap: 2px; }

/* One truck, one line. Dense on purpose — this is a scanning surface. */
.v2-line-row {
  display: flex; align-items: center; gap: var(--v2-s3);
  padding: var(--v2-s3);
  border-radius: var(--v2-r-sm);
  color: inherit;
  transition: background var(--v2-t-fast);
}
.v2-line-row:hover { background: var(--v2-surface-2); }
.v2-line-truck {
  font-size: var(--v2-fs-base); font-weight: var(--v2-fw-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--v2-ink);
  white-space: nowrap;
}
.v2-line-detail {
  flex: 1; min-width: 0;
  font-size: var(--v2-fs-xs); color: var(--v2-ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Two badge weights, chosen by priority:
     .is-solid   filled accent, dark ink — a hard breach (OVERDUE)
     default     outline — a warning or a measurement (DUE SOON, "12 days")
   Both are pill-shaped, per the tag system in the reference. */
.v2-badge {
  flex-shrink: 0;
  padding: 2px var(--v2-s3);
  border-radius: var(--v2-r-pill);
  background: var(--tc-soft);
  border: 1px solid var(--tc-ring);
  color: var(--tc-hi);
  font-size: var(--v2-fs-micro); font-weight: var(--v2-fw-semibold);
  letter-spacing: var(--v2-track-micro); text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.v2-badge.is-solid {
  background: var(--tc);
  border-color: var(--tc);
  /* Dark ink, not white: white on #ef4444 is 3.8:1 and fails AA, dark is 5.4:1. */
  color: var(--v2-ink-on-accent);
}
/* A neutral measurement that carries no severity of its own. */
.v2-badge.is-muted {
  background: var(--v2-surface-2);
  border-color: var(--v2-line);
  color: var(--v2-ink-2);
}

/* Empty state — a panel with nothing overdue is good news, so it reads green
   and calm rather than as a hole in the layout. */
.v2-panel-empty {
  display: flex; align-items: center; gap: var(--v2-s3);
  padding: var(--v2-s5) var(--v2-s3);
  color: var(--v2-ink-3);
  font-size: var(--v2-fs-xs);
}
.v2-panel-empty svg { width: 16px; height: 16px; color: var(--v2-green); flex-shrink: 0; }

/* ── Tier 4: recent activity timeline ────────────────────────────────────── */

.v2-timeline { display: flex; flex-direction: column; }
.v2-tl-row {
  position: relative;
  display: flex; align-items: center; gap: var(--v2-s4);
  padding: var(--v2-s3) var(--v2-s5) var(--v2-s3) var(--v2-s4);
}
/* Continuous rail behind the dots, stopped at the first and last row. */
.v2-tl-row::before {
  content: ''; position: absolute; left: calc(var(--v2-s4) + 5px); top: 0; bottom: 0;
  width: 1px; background: var(--v2-line);
}
.v2-tl-row:first-child::before { top: 50%; }
.v2-tl-row:last-child::before { bottom: 50%; }

.v2-tl-dot {
  position: relative; z-index: 1;
  width: 11px; height: 11px; flex-shrink: 0;
  border-radius: var(--v2-r-pill);
  background: var(--tc);
  box-shadow: 0 0 0 3px var(--v2-surface), 0 0 0 4px var(--tc-ring);
}
.v2-tl-label {
  flex: 1; min-width: 0;
  font-size: var(--v2-fs-base); color: var(--v2-ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v2-tl-label b { font-weight: var(--v2-fw-semibold); color: var(--v2-ink); font-variant-numeric: tabular-nums; }
.v2-tl-date {
  flex-shrink: 0;
  font-size: var(--v2-fs-xs); color: var(--v2-ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Sample-data notice ──────────────────────────────────────────────────── */

/* This page is a layout mockup. The banner makes that unmistakable so nobody
   mistakes these counts for the real fleet — remove it when the page is
   wired to the live data layer. */
.v2-sample-note {
  display: flex; align-items: center; gap: var(--v2-s3);
  padding: var(--v2-s3) var(--v2-s4);
  margin-bottom: var(--v2-s6);
  background: var(--v2-amber-soft);
  border: 1px dashed var(--v2-amber-ring);
  border-radius: var(--v2-r-sm);
  color: var(--v2-amber-hi);
  font-size: var(--v2-fs-xs); line-height: var(--v2-lh-xs);
}
.v2-sample-note svg { width: 16px; height: 16px; flex-shrink: 0; }

@media (max-width: 900px) {
  .v2-panel-grid { grid-template-columns: minmax(0, 1fr); }
  .v2-banner-meta { display: none; }
}