/**
 * Roddier App — Kit de composants (lot B, purement additif)
 * ──────────────────────────────────────────────────────────────────────
 * Chargé APRÈS app.css et brand-signature.css : consomme leurs tokens
 * (--bg-*, --label-*, --fill-*, --separator, --system-*, --radius-*,
 * --shadow-*, --tint, --ease*…) et n'en REDÉFINIT aucun existant.
 *
 * Tout ici est OPT-IN : de nouveaux sélecteurs sous des préfixes inédits
 * (.stat-card, .ui-badge, .btn-elev, .table-pro, .cell-amount) qui
 * n'entrent en collision avec AUCUN composant existant :
 *   - app.css définit déjà .app-stat-card / .app-stat-value (KPI centré) et
 *     .app-badge (pastille hex en dur, MAJUSCULES). On NE les touche pas.
 *   - .stat-card / .ui-badge sont des sets UNIFIÉS, alignés à gauche, basés
 *     sur les tokens (donc dark mode automatique), à adopter au cas par cas.
 *
 * Charte : navy #0f2544 + halos bleus DÉSATURÉS. Bleu saturé évité.
 * Couleurs de statut = system colors d'app.css, désaturées via opacité pour
 * les fonds. Montants/chiffres en JetBrains Mono. Pas d'émoji (SVG côté vue).
 *
 * Sommaire :
 *   1. Tokens additifs (kit)
 *   2. Cartes statistiques — .stat-card
 *   3. Badges de statut unifiés — .ui-badge
 *   4. Boutons : couche de raffinement d'états — .btn-elev
 *   5. Tableaux pro (opt-in) — .table-pro / .cell-amount
 *   6. prefers-reduced-motion
 *   7. Variantes dark mode (regroupées)
 */

/* ─── 1. Tokens additifs (nouveaux noms, n'écrasent rien d'app.css) ─── */
:root {
  /* Police monospace de marque (montants/chiffres) — repli stack système. */
  --kit-font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* Statuts SÉMANTIQUES du kit (référencent les system colors d'app.css).
     Fond très léger (≈12-16 %), texte assombri pour contraste AA en 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;                 /* bleu DÉSATURÉ de charte */
  --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);

  /* Tendance (flèches ↑/↓) — verts/rouges DÉSATURÉS (charte lumière bleue). */
  --kit-trend-up:   #2f8f4e;
  --kit-trend-down: #c0413a;
  --kit-trend-flat: var(--label-tertiary);
}

/* ════════════════════════════════════════════════════════════════════════
   2. Cartes statistiques — .stat-card
   Grand nombre en JetBrains Mono, label discret, zone tendance (flèche SVG
   colorée) + emplacement sparkline (conteneur CSS seul, le JS éventuel
   alimente le SVG). Alignée à GAUCHE → distincte de .app-stat-card (centrée).
   ════════════════════════════════════════════════════════════════════════ */
.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;            /* chiffres tabulaires alignés */
}
.stat-card__meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  min-height: 1.1rem;
}

/* Indicateur de tendance : pastille flèche + valeur. La couleur vient du
   modificateur (--up / --down / --flat) ; la flèche est un SVG inline. */
.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); }

/* Note de contexte à droite de la tendance (ex. « vs mois dernier »). */
.stat-card__note {
  font-size: 0.72rem;
  color: var(--label-tertiary);
}

/* Emplacement sparkline : conteneur réservé, sans JS de données. Une vue
   peut y injecter un <svg> (polyline) ; ici on cadre juste l'espace + un
   fond très discret pour matérialiser la zone. */
.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;
}

/* Accent latéral optionnel (rappelle un statut sans crier). */
.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. Badges de statut unifiés — .ui-badge
   Pastille (point) + texte, palette sémantique UNIQUE basée sur les tokens.
   Namespace distinct de .app-badge (existant, hex en dur, MAJUSCULES) → pas
   de collision. .ui-badge est en casse normale, plus douce.
   ════════════════════════════════════════════════════════════════════════ */
.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;
  /* Défaut = neutre. Les modificateurs ne changent QUE fond + texte. */
  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. Boutons — couche de raffinement d'états (.btn-elev)
   N'écrase AUCUN bouton existant (.app-btn-*). Classe ADDITIVE à poser à côté :
   légère élévation + ombre teintée navy au survol, enfoncement à l'activation.
   Le focus reste géré par brand-signature.css (lot 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. Tableaux pro (opt-in) — .table-pro
   En-têtes collants, zébrures TRÈS subtiles, hover de ligne, montants
   alignés à droite en mono (.cell-amount). À poser sur une <table> précise.
   ════════════════════════════════════════════════════════════════════════ */
.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;
}
/* Zébrures TRÈS subtiles (fill quaternary, quasi 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; }

/* Cellule montant : alignée à droite, mono, chiffres tabulaires. */
.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 : on coupe transforms/transitions du kit ─── */
@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. Variantes dark mode (regroupées)
   Les composants suivent déjà les tokens (bg/label/separator/fill) qui
   basculent en dark. On AJUSTE seulement les couleurs de statut/tendance,
   plus claires sur fond sombre, et les ombres (plus discrètes).
   ════════════════════════════════════════════════════════════════════════ */
: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);
}