/* ============================================================================
   Centre de pilotage — DESIGN-03
   Porté par `body.ui-v2`, comme `shell.css`. Aucun effet hors écran pilote.

   Trois règles du système de design décident presque tout ce qui suit :
     1. la donnée domine la décoration ;
     2. la hiérarchie vient de l'espace et de la typographie, pas des boîtes ;
     3. la couleur qualifie, elle ne structure pas.

   D'où : pas d'ombre sur les panneaux (une bordure suffit — l'ombre est
   réservée à ce qui flotte vraiment), pas de carte arrondie autour de chaque
   chiffre, et un seul accent coloré par section au maximum.
   ============================================================================ */

/* ─── En-tête ───────────────────────────────────────────────────────────────*/
body.ui-v2 .cc { display: flex; flex-direction: column; gap: var(--space-6); }

.cc-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-6); flex-wrap: wrap;
}
.cc-eyebrow {
  font-size: var(--text-2xs); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--text-faint); font-weight: 500;
  margin-bottom: var(--space-1);
}
.cc-title {
  font-size: var(--text-title); font-weight: 600;
  letter-spacing: var(--tracking-tight); line-height: 1.1;
  color: var(--text-primary); margin: 0;
}
.cc-subtitle {
  margin-top: var(--space-2);
  font-size: var(--text-md); color: var(--text-muted); max-width: 52ch;
}
.cc-head-right { display: flex; align-items: center; gap: var(--space-3); }

.cc-periods {
  display: inline-flex; background: var(--bg-surface);
  border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  overflow: hidden;
}
.cc-period {
  border: none; background: transparent; cursor: pointer;
  font-family: var(--font-ui); font-size: var(--text-sm);
  color: var(--text-muted); padding: 5px var(--space-3);
  border-right: 1px solid var(--border-subtle);
}
.cc-period:last-child { border-right: none; }
.cc-period:hover { color: var(--text-primary); background: var(--bg-surface-muted); }
.cc-period.is-active { background: var(--bg-inverse); color: var(--text-inverse); }

.cc-refresh {
  background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); padding: 5px var(--space-3);
  font-family: var(--font-ui); font-size: var(--text-sm);
  color: var(--text-secondary); cursor: pointer;
}
.cc-refresh:hover { border-color: var(--border-strong); }

/* ─── Bandeau de métriques ──────────────────────────────────────────────────
   Pas de cartes : des colonnes séparées par un filet. Encadrer chaque chiffre
   ajouterait cinq bordures là où une grille suffit à grouper. */
/* Trois rangées partagées — libellé, valeur, réserve — et chaque tuile s'y
   accroche par `subgrid`.

   Sans cela, la hauteur du libellé décidait seule de la position du chiffre :
   « PROSPECTS » tient sur une ligne, « PROSPECTS DIE REAGEERDEN » sur deux, et
   les grands nombres du bandeau ne s'alignaient plus — en néerlandais surtout.
   Une hauteur minimale en `em` ne corrigeait qu'un cas sur deux, parce que la
   puce d'étendue peut elle aussi passer à la ligne. La grille partagée, elle,
   est vraie dans toutes les langues sans rien deviner. */
.cc-band {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-template-rows: auto auto auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  overflow: hidden;
}
.cc-metric {
  padding: var(--space-4) var(--space-5);
  border-right: 1px solid var(--border-subtle);
  display: grid; grid-row: span 3; grid-template-rows: subgrid;
  align-content: start; gap: var(--space-1);
  min-width: 0;
}
.cc-metric:last-child { border-right: none; }

/* Deux lignes réservées, et la puce d'étendue peut passer à la ligne.
   Sans la hauteur minimale, un libellé sur deux lignes (« PROSPECTS AYANT
   RÉPONDU », « CONVERSIEPERCENTAGE ») décalait son chiffre vers le bas : les
   grands nombres du bandeau ne s'alignaient plus. Sans `flex-wrap`, la puce
   « 12 maanden » sortait de la dernière tuile en néerlandais. Les deux défauts
   étaient invisibles en français. */
.cc-metric-label {
  display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap;
  align-self: start;
  font-size: var(--text-xs); color: var(--text-muted);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  font-weight: 500;
}
/* La fenêtre temporelle est portée par la tuile, pas par le bandeau : deux
   tuiles voisines ne couvrent pas forcément la même période, et le taire est
   le mensonge silencieux habituel des tableaux de bord. */
.cc-metric-window {
  font-size: var(--text-2xs); color: var(--text-faint);
  border: 1px solid var(--border-default); border-radius: var(--radius-xs);
  padding: 0 4px; text-transform: none; letter-spacing: 0; white-space: nowrap;
}
.cc-metric-value, .cc-metric--unavailable .cc-metric-state { align-self: end; }
.cc-metric-note { align-self: start; }
.cc-metric-value {
  font-size: var(--text-data); font-weight: 600;
  letter-spacing: var(--tracking-tight); line-height: 1.05;
  color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.cc-metric-note {
  font-size: var(--text-xs); color: var(--text-faint); line-height: var(--leading-tight);
}
/* ── État canonique « indisponible » ────────────────────────────────────────
   Réutilisable par toute métrique dont le contrat de donnée existe mais dont
   la source n'est pas alimentée.

   Quatre exigences, et une interdiction :
     · même emprise dans la grille que les tuiles renseignées ;
     · emphase chiffrée réduite — la ligne n'attire pas l'œil comme un chiffre ;
     · pastille neutre, pas d'icône d'alerte ;
     · mention explicite « Non disponible ».
   L'interdiction : PAS de rouge. Indisponible n'est pas une panne, et le rouge
   enverrait tout le monde chercher un incident qui n'existe pas. */
.cc-metric--unavailable .cc-metric-state {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-lg); font-weight: 400; color: var(--text-muted);
  line-height: 1.05; padding: var(--space-2) 0;
}
.cc-state-dot {
  width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid var(--border-strong); background: var(--bg-surface-sunken);
  flex: 0 0 auto;
}

/* ─── Panneaux ──────────────────────────────────────────────────────────────*/
/* Deux colonnes, pas `auto-fit`. À 1440 px, `auto-fit` produisait trois
   colonnes et laissait le quatrième panneau seul sur une deuxième ligne, avec
   un tiers de page vide à sa droite — exactement le « trop de blanc » que la
   revue visuelle devait attraper. Deux colonnes remplissent deux lignes
   pleines. */
.cc-grid {
  display: grid; gap: var(--space-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 1100px) {
  .cc-grid { grid-template-columns: 1fr; }
}
.cc-panel {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  display: flex; flex-direction: column;
  /* Pas d'ombre : un panneau de tableau de bord ne flotte pas. */
}
.cc-panel-head {
  display: flex; align-items: baseline; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.cc-panel-title {
  font-size: var(--text-md); font-weight: 600; margin: 0;
  letter-spacing: var(--tracking-tight); color: var(--text-primary);
}
.cc-panel-count {
  font-size: var(--text-xs); color: var(--text-inverse);
  background: var(--bg-inverse); border-radius: var(--radius-xs);
  padding: 0 5px;
}
.cc-panel-meta { font-size: var(--text-xs); color: var(--text-faint); }
.cc-panel-link {
  margin-left: auto; font-size: var(--text-xs); color: var(--accent);
  white-space: nowrap;
}
.cc-panel-body { padding: var(--space-4); }

/* ─── Entonnoir ─────────────────────────────────────────────────────────────*/
.cc-funnel-row {
  display: grid;
  grid-template-columns: minmax(11ch, auto) minmax(60px, 1fr) auto auto;
  align-items: center; gap: var(--space-3);
  padding: var(--space-1) 0;
}
/* Pas de troncature. En néerlandais, « Afspraken geboekt » et « Afspraken
   gehouden » se réduisaient tous deux à « Afspraken ge… » : deux étapes
   distinctes de l'entonnoir devenaient indiscernables. Une ellipse sur un
   libellé de données n'est pas un détail esthétique. */
.cc-funnel-label {
  font-size: var(--text-sm); color: var(--text-secondary);
  line-height: var(--leading-tight);
}
.cc-funnel-track {
  height: 8px; background: var(--bg-surface-sunken);
  border-radius: var(--radius-xs); overflow: hidden;
}
.cc-funnel-fill { height: 100%; background: var(--accent); border-radius: var(--radius-xs); }
.cc-funnel-count {
  font-size: var(--text-sm); color: var(--text-primary); font-weight: 500;
  min-width: 3ch; text-align: right;
}
.cc-funnel-conv {
  font-size: var(--text-xs); color: var(--text-faint);
  min-width: 5ch; text-align: right;
}

/* ─── Activité ──────────────────────────────────────────────────────────────*/
.cc-chart { width: 100%; height: 140px; display: block; }
.cc-axis { stroke: var(--border-default); stroke-width: 1; }
.cc-spark {
  fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke;
  stroke-linejoin: round; stroke-linecap: round;
}
.cc-spark.is-1 { stroke: var(--accent); }
.cc-spark.is-2 { stroke: var(--text-muted); }
.cc-spark.is-3 { stroke: var(--success); }

.cc-chart-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); margin-top: var(--space-2);
  font-size: var(--text-2xs); color: var(--text-faint);
}
.cc-legend { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.cc-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.cc-swatch { width: 10px; height: 2px; border-radius: 1px; display: inline-block; }
.cc-swatch.is-1 { background: var(--accent); }
.cc-swatch.is-2 { background: var(--text-muted); }
.cc-swatch.is-3 { background: var(--success); }

/* ─── À traiter ─────────────────────────────────────────────────────────────*/
.cc-attention-row {
  display: flex; align-items: baseline; gap: var(--space-3);
  padding: var(--space-2) var(--space-2);
  margin: 0 calc(var(--space-2) * -1);
  border-radius: var(--radius-sm);
  color: inherit; text-decoration: none;
}
a.cc-attention-row:hover { background: var(--bg-surface-muted); text-decoration: none; }
.cc-attention-count {
  font-size: var(--text-lg); font-weight: 600; color: var(--text-primary);
  min-width: 3ch;
}
.cc-attention-count.is-danger { color: var(--danger); }
.cc-attention-label { font-size: var(--text-sm); color: var(--text-secondary); flex: 1 1 auto; }
/* Étendue applicable, ligne par ligne. Discret par construction : c'est une
   précision de lecture, pas une information de premier plan. */
.cc-attention-scope {
  font-size: var(--text-2xs); color: var(--text-faint);
  border: 1px solid var(--border-default); border-radius: var(--radius-xs);
  padding: 0 4px; white-space: nowrap; flex: 0 0 auto;
}
.cc-attention-go { color: var(--text-faint); font-size: var(--text-sm); }
/* Même règle que la navigation : sans écran d'atterrissage, pas de lien. */
.cc-attention-row.is-flat { cursor: default; }
.cc-attention-row.is-flat .cc-attention-label { color: var(--text-muted); }

/* ─── Prochaines actions IA — vide délibéré ─────────────────────────────────
   Ni grande carte vide, ni illustration : une marque discrète, deux phrases,
   un lien de navigation. Le vide doit se lire comme une décision. */
.cc-nba { display: flex; gap: var(--space-3); align-items: flex-start; }
.cc-nba-mark {
  flex: 0 0 auto; width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  color: var(--text-muted); background: var(--bg-surface-muted);
}
.cc-nba-text { min-width: 0; }
.cc-nba-link {
  display: inline-block; margin-top: var(--space-3);
  font-size: var(--text-sm); color: var(--accent);
}

/* ─── États vides et erreurs ────────────────────────────────────────────────*/
.cc-empty {
  font-size: var(--text-md); color: var(--text-muted);
  padding: var(--space-4) 0;
}
.cc-empty-title { font-size: var(--text-md); color: var(--text-secondary); font-weight: 500; }
.cc-empty-body {
  font-size: var(--text-sm); color: var(--text-faint);
  margin-top: var(--space-1); line-height: var(--leading-relaxed); max-width: 52ch;
}
/* Un vide expliqué se distingue d'un vide subi : filet à gauche, comme une note
   de marge. Le panneau reste en place — le faire disparaître laisserait lire le
   tableau de bord comme complet. */
.cc-empty-reasoned { border-left: 2px solid var(--border-strong); padding-left: var(--space-3); }
.cc-empty-error { border-left: 2px solid var(--warning); padding-left: var(--space-3); }

.cc-error {
  border: 1px solid var(--danger); border-left-width: 3px;
  border-radius: var(--radius-md);
  background: var(--bg-surface); padding: var(--space-4) var(--space-5);
}

.cc-generated { font-size: var(--text-2xs); color: var(--text-faint); }

/* ─── Bandeau d'état système (ADMIN) ────────────────────────────────────────*/
.cc-system {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  background: var(--bg-surface-muted);
  font-size: var(--text-xs);
}
.cc-system-title {
  color: var(--text-muted); text-transform: uppercase;
  letter-spacing: var(--tracking-wide); font-weight: 500;
}
.cc-service { display: inline-flex; align-items: center; gap: 5px; color: var(--text-secondary); }
.cc-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.cc-dot.is-up { background: var(--success); }
.cc-dot.is-down { background: var(--danger); }
.cc-dot.is-unknown { background: var(--text-faint); }
.cc-system-link { margin-left: auto; color: var(--accent); white-space: nowrap; }

/* ─── Étroit ────────────────────────────────────────────────────────────────*/
@media (max-width: 900px) {
  body.ui-v2 .cc-grid { grid-template-columns: 1fr; }
  .cc-head { flex-direction: column; align-items: stretch; }
  .cc-title { font-size: var(--text-lg); }
  .cc-metric-value { font-size: var(--text-title); }
  .cc-funnel-row { grid-template-columns: minmax(80px, 1fr) 2fr auto auto; }
}