/* Styles for @valtracs/ui-kit/react (1.0.0). Plain, stable class names (vt-*) so
   the same CSS works in Remix, Next (app router, server components) and
   any other bundler without CSS-module plumbing.

   Every colour, radius and type size comes from tokens.css; load that file
   first. Colours read the --vt-* aliases (which point at the --vts-* source),
   so a product's own --vt-* override still wins; sizes, the focus ring and
   the KPI tints read --vts-* directly. Blocks are separated by a border, not
   a shadow (the card shadow is the suite's near-invisible --vts-shadow-card,
   and `none` in the dark theme). There is no hard-coded colour in this file;
   packages/ui-kit/src/tokens.test.ts fails the build if one appears. */

/* ---------- StatCard ---------- */
.vt-stat-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  background: var(--vt-bg-surface);
  border: var(--vts-border-width) solid var(--vt-border);
  border-radius: var(--vt-radius-lg);
  box-shadow: var(--vt-shadow-card);
  min-width: 0;
}
.vt-stat-icon {
  flex: 0 0 44px;
  height: 44px;
  width: 44px;
  border-radius: var(--vt-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Size only -- fill/stroke come from the component (iconStyle), so stroke
   icon sets aren't forced into solid shapes. */
.vt-stat-icon svg { width: 20px; height: 20px; }
/* The four KPI tints of the suite (the same chips as Perform and Predict). They
   tint an icon next to a label that already names the subject, never text and
   never a judgement -- green/red judgements live in Delta and Badge. */
.vt-stat-icon--blue { background: var(--vts-chip-blue-bg); color: var(--vts-chip-blue-fg); }
.vt-stat-icon--purple { background: var(--vts-chip-purple-bg); color: var(--vts-chip-purple-fg); }
.vt-stat-icon--green { background: var(--vts-chip-green-bg); color: var(--vts-chip-green-fg); }
.vt-stat-icon--orange { background: var(--vts-chip-orange-bg); color: var(--vts-chip-orange-fg); }
/* The accent itself (navy): for a tile that should read as "the interface", not as a subject. `violet` is the
   pre-1.0 name of the brand-gradient tint and now renders as the accent. */
.vt-stat-icon--accent,
.vt-stat-icon--violet { background: var(--vt-accent-surface); color: var(--vt-accent-solid); }
.vt-stat-body { display: flex; flex-direction: column; gap: var(--vt-space-1); min-width: 0; flex: 1; }
.vt-stat-label {
  font-size: var(--vts-text-sm);
  color: var(--vt-text-secondary);
  font-weight: var(--vts-weight-medium);
  line-height: var(--vts-leading-snug);
  /* Reserve two lines so a row of tiles keeps its values on one baseline
     whether a label wraps or not. */
  min-height: 2.7em;
  display: flex;
  align-items: flex-start;
}
.vt-stat-value-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--vt-space-3); flex-wrap: wrap; }
/* The sparkline yields, the number never breaks: when the tile is too
   narrow for both (four tiles at 1440px), the sparkline wraps under the
   value and stays right-aligned. */
.vt-stat-value-row .vt-spark { margin-left: auto; }
.vt-stat-value {
  font-size: var(--vts-text-2xl);
  font-weight: var(--vts-weight-bold);
  letter-spacing: var(--vts-tracking-tight);
  color: var(--vt-text-primary);
  line-height: var(--vts-leading-tight);
  font-variant-numeric: tabular-nums;
  font-feature-settings: var(--vts-font-numeric);
  /* A KPI value is never broken across lines ("62.5" / "%"). */
  white-space: nowrap;
  flex: 0 0 auto;
}
.vt-stat-help { font-size: var(--vts-text-xs); color: var(--vt-text-muted); }

/* ---------- Delta ---------- */
.vt-delta-wrap { display: inline-flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.vt-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--vts-text-xs);
  font-weight: var(--vts-weight-semibold);
  line-height: var(--vts-leading-snug);
  padding: 1px 7px;
  border-radius: var(--vt-radius-pill);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: var(--vts-font-numeric);
}
.vt-delta--inline { padding: 0; background: transparent; }
.vt-delta--good { color: var(--vt-success); background: var(--vt-success-surface); }
.vt-delta--bad { color: var(--vt-critical); background: var(--vt-critical-surface); }
.vt-delta--flat { color: var(--vt-text-muted); background: var(--vt-bg-surface-subtle); }
.vt-delta-comparison { font-size: var(--vts-text-xs); color: var(--vt-text-muted); }

/* ---------- Sparkline ---------- */
.vt-spark { flex: none; display: block; }
.vt-spark-empty { display: inline-block; width: 84px; height: 30px; }

/* ---------- ProgressBar ---------- */
.vt-progress { display: inline-flex; align-items: center; gap: var(--vt-space-2); }
.vt-progress-track {
  display: inline-block;
  height: 6px;
  border-radius: var(--vt-radius-pill);
  background: var(--vt-bg-surface-subtle);
  border: var(--vts-border-width) solid var(--vt-border-subtle);
  overflow: hidden;
  vertical-align: middle;
}
.vt-progress-fill { display: block; height: 100%; border-radius: var(--vt-radius-pill); }
.vt-progress-fill--accent { background: var(--vt-accent-solid); }
.vt-progress-fill--good { background: var(--vt-success); }
.vt-progress-fill--bad { background: var(--vt-critical); }
.vt-progress-fill--attention { background: var(--vt-attention); }
.vt-progress-fill--muted { background: var(--vt-text-muted); }
.vt-progress-label { font-size: var(--vts-text-sm); font-variant-numeric: tabular-nums; font-feature-settings: var(--vts-font-numeric); color: var(--vt-text-primary); }

/* ---------- FunnelChart ---------- */
.vt-funnel { display: grid; gap: 10px; align-items: end; padding: 4px 2px 0; }
.vt-funnel-step { display: grid; gap: var(--vt-space-1); align-content: end; min-width: 0; }
.vt-funnel-value { font-weight: var(--vts-weight-semibold); font-size: var(--vts-text-sm); font-variant-numeric: tabular-nums; font-feature-settings: var(--vts-font-numeric); color: var(--vt-text-primary); }
.vt-funnel-col { display: block; border-radius: var(--vts-radius-sm) var(--vts-radius-sm) var(--vts-radius-xs) var(--vts-radius-xs); opacity: 0.92; }
.vt-funnel-col--accent { background: var(--vt-accent-solid); }
.vt-funnel-col--good { background: var(--vt-success); }
.vt-funnel-col--attention { background: var(--vt-attention); }
.vt-funnel-col--muted { background: var(--vt-text-muted); }
.vt-funnel-label { font-size: var(--vts-text-xs); line-height: var(--vts-leading-snug); color: var(--vt-text-muted); overflow-wrap: anywhere; }
.vt-funnel-drop { min-height: 1.2em; font-size: var(--vts-text-xs); }
.vt-funnel-footnote { color: var(--vt-text-secondary); font-weight: var(--vts-weight-semibold); font-variant-numeric: tabular-nums; font-feature-settings: var(--vts-font-numeric); }

/* ---------- TrendChart / DualTrendChart ---------- */
.vt-trend { display: flex; flex-direction: column; gap: var(--vt-space-2); }
.vt-trend svg { display: block; }
.vt-trend-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--vt-space-2); }
.vt-trend-label { font-size: var(--vts-text-xs); color: var(--vt-text-muted); }
.vt-trend-value--up { font-size: var(--vts-text-sm); font-weight: var(--vts-weight-semibold); color: var(--vt-success); }
.vt-trend-value--down { font-size: var(--vts-text-sm); font-weight: var(--vts-weight-semibold); color: var(--vt-critical); }
.vt-trend-legend { display: flex; gap: var(--vt-space-4); }
.vt-trend-legend-item { display: flex; align-items: center; gap: 6px; font-size: var(--vts-text-sm); font-weight: var(--vts-weight-semibold); color: var(--vt-text-primary); }
.vt-trend-swatch { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }

/* ---------- MetricTable ---------- */
.vt-table-wrap { overflow-x: auto; }
.vt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--vts-text-md);
  color: var(--vt-text-primary);
}
.vt-table th {
  text-align: left;
  font-size: var(--vts-text-xs);
  font-weight: var(--vts-weight-medium);
  letter-spacing: 0.02em;
  color: var(--vt-text-muted);
  background: var(--vt-bg-surface-subtle);
  padding: 10px var(--vt-space-3);
  border-bottom: var(--vts-border-width) solid var(--vt-border);
  white-space: nowrap;
}
.vt-table td {
  padding: 10px var(--vt-space-3);
  border-bottom: var(--vts-border-width) solid var(--vt-border-subtle);
  vertical-align: middle;
  white-space: nowrap;
}
.vt-table tbody tr:last-child td { border-bottom: 0; }
.vt-table tbody tr:hover td { background: var(--vt-bg-surface-subtle); }
.vt-row--clickable { cursor: pointer; }
/* A table row cannot take the box-shadow ring (collapsed borders), so it draws the same focus colour as an inset outline. */
.vt-row--clickable:focus-visible { outline: 2px solid var(--vts-focus-color); outline-offset: -2px; }
.vt-cell-start { text-align: left; }
.vt-cell-end { text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: var(--vts-font-numeric); }
.vt-table th.vt-cell-end { text-align: right; }
.vt-stack-cell { display: inline-flex; flex-direction: column; gap: 2px; align-items: inherit; }
.vt-cell-end .vt-stack-cell { align-items: flex-end; }
.vt-stack-cell-primary { font-size: var(--vts-text-md); color: var(--vt-text-primary); }
.vt-stack-cell-primary--strong { font-weight: var(--vts-weight-semibold); }
.vt-stack-cell-secondary { font-size: var(--vts-text-xs); color: var(--vt-text-muted); }
.vt-stack-cell--wrap { max-width: 46ch; }
.vt-stack-cell--wrap .vt-stack-cell-secondary {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vt-cell-muted { color: var(--vt-text-muted); }
.vt-table-pagination { display: flex; align-items: center; justify-content: center; gap: var(--vt-space-2); padding: 10px; border-top: var(--vts-border-width) solid var(--vt-border); }
.vt-table-pagination button {
  font: inherit;
  font-size: var(--vts-text-sm);
  padding: var(--vt-space-1) 10px;
  border-radius: var(--vt-radius-sm);
  border: var(--vts-border-width) solid var(--vt-border);
  background: var(--vt-bg-surface);
  color: var(--vt-text-primary);
  cursor: pointer;
}
.vt-table-pagination button:disabled { color: var(--vt-text-muted); cursor: default; }
.vt-table-pagination button:focus-visible { outline: none; box-shadow: var(--vts-focus-ring); }
.vt-table-pagination-label { font-size: var(--vts-text-sm); color: var(--vt-text-muted); font-variant-numeric: tabular-nums; font-feature-settings: var(--vts-font-numeric); }
.vt-table-empty { padding: var(--vt-space-4) var(--vt-space-3); color: var(--vt-text-muted); font-size: var(--vts-text-md); }

/* ---------- Badge (status pill) ---------- */
.vt-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--vt-space-1);
  padding: 1px var(--vt-space-2);
  border-radius: var(--vt-radius-pill);
  font-size: var(--vts-text-xs);
  font-weight: var(--vts-weight-medium);
  line-height: var(--vts-leading-normal);
  white-space: nowrap;
}
.vt-badge--neutral { background: var(--vt-bg-surface-subtle); color: var(--vt-text-secondary); border: var(--vts-border-width) solid var(--vt-border); }
.vt-badge--success { background: var(--vt-success-surface); color: var(--vt-success); }
.vt-badge--attention { background: var(--vt-attention-surface); color: var(--vt-attention); }
.vt-badge--critical { background: var(--vt-critical-surface); color: var(--vt-critical); }
/* info = draft / planned = the neutral pair (blue is action, never a judgement). It keeps the same
   hairline as `neutral` so the two cannot be told apart by weight alone. */
.vt-badge--info { background: var(--vt-info-surface); color: var(--vt-info); border: var(--vts-border-width) solid var(--vt-border); }

/* ---------- VariantStats ---------- */
.vt-variant-stats { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--vt-space-3); font-size: var(--vts-text-sm); color: var(--vt-text-muted); }
.vt-variant-stats strong { color: var(--vt-text-primary); font-weight: var(--vts-weight-semibold); }
.vt-variant-stats-rate { font-weight: var(--vts-weight-semibold); color: var(--vt-text-primary); font-variant-numeric: tabular-nums; font-feature-settings: var(--vts-font-numeric); }

/* ---------- utilities ---------- */
.vt-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }