/**
 * Roddier App — Component kit (batch B, purely additive)
 * ──────────────────────────────────────────────────────────────────────
 * Loaded AFTER app.css and brand-signature.css: consumes their tokens
 * (--bg-*, --label-*, --fill-*, --separator, --system-*, --radius-*,
 * --shadow-*, --tint, --ease*…) and REDEFINES none of the existing ones.
 *
 * Everything here is OPT-IN: new selectors under new prefixes
 * (.stat-card, .ui-badge, .btn-elev, .table-pro, .cell-amount) that
 * do not collide with ANY existing component:
 *   - app.css already defines .app-stat-card / .app-stat-value (centred KPI) and
 *     .app-badge (hard-coded hex pill, UPPERCASE). Do NOT touch them.
 *   - .stat-card / .ui-badge are UNIFIED sets, left-aligned, based
 *     on tokens (so automatic dark mode), to adopt case by case.
 *
 * Charter: navy #0f2544 + DESATURATED blue halos. Saturated blue avoided.
 * Status colors = app.css system colors, desaturated through opacity for
 * the backgrounds. Amounts/numbers in JetBrains Mono. No emoji (SVG in the view).
 *
 * Contents:
 *   1. Additive tokens (kit)
 *   2. Statistic cards — .stat-card
 *   3. Unified status badges — .ui-badge
 *   4. Buttons: state refinement layer — .btn-elev
 *   5. Pro tables (opt-in) — .table-pro / .cell-amount
 *   6. prefers-reduced-motion
 *   7. Dark mode variants (grouped)
 */

/* ─── 1. Additional tokens (new names, do not override anything in app.css) ─── */
:root {
  /* Brand monospace font (amounts/numbers) — system stack fallback. */
  --kit-font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* SEMANTIC statuses from the kit (reference the system colors in app.css).
     Very light background (≈12-16 %), darkened text for AA contrast in light. */
  --kit-success:      var(--system-green);
  --kit-success-bg:   rgba(52,199,89,0.14);
  --kit-success-fg:   #1d7a37;
  --kit-warn:         var(--system-orange);
  --kit-warn-bg:      rgba(255,149,0,0.16);
  --kit-warn-fg:      #9a5a00;
  --kit-danger:       var(--system-red);
  --kit-danger-bg:    rgba(255,59,48,0.14);
  --kit-danger-fg:    #c01a10;
  --kit-info:         #5e7fa8;                 /* DESATURATED brand blue */
  --kit-info-bg:      rgba(94,127,168,0.16);
  --kit-info-fg:      #3a5882;
  --kit-neutral-bg:   var(--fill-primary);
  --kit-neutral-fg:   var(--label-secondary);

  /* Trend (arrows ↑/↓) — DESATURATED greens/reds (blue light design system). */
  --kit-trend-up:   #2f8f4e;
  --kit-trend-down: #c0413a;
  --kit-trend-flat: var(--label-tertiary);
}

/* ════════════════════════════════════════════════════════════════════════
   2. Statistic cards — .stat-card
   Large number in JetBrains Mono, discreet label, trend area (colored SVG
   arrow) + sparkline space (CSS container only, any optional JS
   populates the SVG). LEFT-aligned → distinct from .app-stat-card (centered).
   ════════════════════════════════════════════════════════════════════════ */
.stat-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.05rem 1.15rem;
  background: var(--bg-secondary);
  border: 1px solid var(--separator);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-fast, 0.15s) var(--ease, ease),
              transform var(--dur-fast, 0.15s) var(--ease, ease);
}
.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

.stat-card__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--label-secondary);
}
.stat-card__value {
  font-family: var(--kit-font-mono);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--label-primary);
  font-feature-settings: "tnum" 1;            /* aligned tabular figures */
}
.stat-card__meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  min-height: 1.1rem;
}

/* Trend indicator: arrow pill + value. The color comes from the
   modifier (--up / --down / --flat); the arrow is an inline SVG. */
.stat-card__trend {
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: var(--kit-font-mono);
  font-feature-settings: "tnum" 1;
  color: var(--kit-trend-flat);
}
.stat-card__trend svg { width: 12px; height: 12px; flex: none; }
.stat-card__trend--up   { color: var(--kit-trend-up); }
.stat-card__trend--down { color: var(--kit-trend-down); }
.stat-card__trend--flat { color: var(--kit-trend-flat); }

/* Context note to the right of the trend (e.g. “vs last month”). */
.stat-card__note {
  font-size: 0.72rem;
  color: var(--label-tertiary);
}

/* Sparkline slot: reserved container, with no data JS. A view
   can inject an <svg> (polyline) into it; here we only frame the space + a
   very subtle background to make the area visible. */
.stat-card__spark {
  margin-top: 0.15rem;
  height: 34px;
  border-radius: var(--radius-sm);
  background:
    linear-gradient(180deg, var(--fill-quaternary) 0%, transparent 100%);
}
.stat-card__spark svg,
.stat-card__spark polyline { display: block; width: 100%; height: 100%; }
.stat-card__spark polyline {
  fill: none;
  stroke: var(--kit-info);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Optional side accent (signals a status without shouting). */
.stat-card--accent  { border-left: 3px solid var(--tint); }
.stat-card--success { border-left: 3px solid var(--kit-success); }
.stat-card--warn    { border-left: 3px solid var(--kit-warn); }
.stat-card--danger  { border-left: 3px solid var(--kit-danger); }

/* ════════════════════════════════════════════════════════════════════════
   3. Unified status badges — .ui-badge
   Dot + text, a SINGLE semantic palette based on tokens.
   Namespace distinct from .app-badge (existing, hard-coded hex, UPPERCASE) → no
   collision. .ui-badge uses normal case and is softer.
   ════════════════════════════════════════════════════════════════════════ */
.ui-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  /* Default = neutral. Modifiers change ONLY background + text. */
  background: var(--kit-neutral-bg);
  color: var(--kit-neutral-fg);
}
.ui-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.ui-badge--success { background: var(--kit-success-bg); color: var(--kit-success-fg); }
.ui-badge--warn    { background: var(--kit-warn-bg);    color: var(--kit-warn-fg); }
.ui-badge--danger  { background: var(--kit-danger-bg);  color: var(--kit-danger-fg); }
.ui-badge--neutral { background: var(--kit-neutral-bg); color: var(--kit-neutral-fg); }
.ui-badge--info    { background: var(--kit-info-bg);    color: var(--kit-info-fg); }

/* ════════════════════════════════════════════════════════════════════════
   4. Buttons — state refinement layer (.btn-elev)
   Overrides NO existing button (.app-btn-*). ADDITIVE class to set alongside:
   slight elevation + navy-tinted shadow on hover, press-in on activation.
   Focus is still handled by brand-signature.css (batch A).
   ════════════════════════════════════════════════════════════════════════ */
.btn-elev {
  transition: transform var(--dur-fast, 0.15s) var(--ease, ease),
              box-shadow var(--dur-fast, 0.15s) var(--ease, ease),
              filter    var(--dur-fast, 0.15s) var(--ease, ease);
  will-change: transform;
}
.btn-elev:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(15,37,68,0.10), 0 8px 20px rgba(15,37,68,0.10);
}
.btn-elev:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(15,37,68,0.08);
  filter: brightness(0.98);
}
.btn-elev:disabled,
.btn-elev[disabled],
.btn-elev[aria-disabled="true"] {
  transform: none;
  box-shadow: none;
  filter: none;
  cursor: not-allowed;
  opacity: 0.55;
}

/* ════════════════════════════════════════════════════════════════════════
   5. Pro tables (opt-in) — .table-pro
   Sticky headers, VERY subtle striping, row hover, amounts
   right-aligned in mono (.cell-amount). Use on a specific <table>.
   ════════════════════════════════════════════════════════════════════════ */
.table-pro {
  width: 100%;
  border-collapse: collapse;
}
.table-pro thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--bg-secondary);
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--label-secondary);
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--separator);
}
.table-pro tbody td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--fill-quaternary);
  color: var(--label-primary);
  vertical-align: middle;
}
/* VERY subtle striping (quaternary fill, almost imperceptible). */
.table-pro tbody tr:nth-child(even) td { background: var(--fill-quaternary); }
.table-pro tbody tr:hover td {
  background: var(--fill-tertiary);
  transition: background var(--dur-fast, 0.15s) var(--ease, ease);
}
.table-pro tbody tr:last-child td { border-bottom: 0; }

/* Amount cell: right-aligned, mono, tabular figures. */
.table-pro .cell-amount,
.cell-amount {
  text-align: right;
  font-family: var(--kit-font-mono);
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.table-pro thead th.cell-amount { text-align: right; }

/* ─── 6. prefers-reduced-motion: disable the kit's transforms/transitions ─── */
@media (prefers-reduced-motion: reduce) {
  .stat-card,
  .btn-elev,
  .table-pro tbody tr:hover td {
    transition: none;
  }
  .stat-card:hover,
  .btn-elev:hover,
  .btn-elev:active { transform: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   7. Dark mode variants (grouped)
   The components already follow the tokens (bg/label/separator/fill) that
   switch in dark mode. ONLY the status/trend colors are ADJUSTED, as they
   are lighter on a dark background, and the shadows (more subtle).
   ════════════════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
  --kit-success-bg: rgba(48,209,88,0.20);
  --kit-success-fg: #5dde7f;
  --kit-warn-bg:    rgba(255,159,10,0.22);
  --kit-warn-fg:    #ffbe55;
  --kit-danger-bg:  rgba(255,69,58,0.22);
  --kit-danger-fg:  #ff6961;
  --kit-info:       #7d97bd;
  --kit-info-bg:    rgba(125,151,189,0.22);
  --kit-info-fg:    #9db3d3;
  --kit-neutral-bg: var(--fill-primary);
  --kit-neutral-fg: var(--label-secondary);

  --kit-trend-up:   #5dde7f;
  --kit-trend-down: #ff6961;
}
:root[data-theme="dark"] .stat-card:hover { box-shadow: var(--shadow-md); }
:root[data-theme="dark"] .btn-elev:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,0.45), 0 8px 20px rgba(0,0,0,0.40);
}
:root[data-theme="dark"] .btn-elev:active {
  box-shadow: 0 1px 2px rgba(0,0,0,0.40);
}