/* ============================================================================
   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-control); 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); }


/* ─── 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(--accent-text); font-weight: 700;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  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-text);
  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-secondary); 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-text);
}

/* ─── É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); }
/* Sur la zone secondaire (#EDECEF), #C43E0F ne fait que 4,15 : l'orange sur teinte. */
.cc-system-link { margin-left: auto; white-space: nowrap; }
/* La règle générale des liens (`#view-root a`, portée par un identifiant) l'emporterait. */
body.ui-v2 #view-root a.cc-system-link { color: var(--accent-text-on-tint); }

/* ─── É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; }
}

/* ─── T-UX-6 — attention et actions, état des campagnes, file en tête ─────
   Blocs de chiffres Beaver : grand nombre violet, petit libellé orange, carte
   claire. Un delta vert n'apparaît que s'il est réel — aucun n'est mesuré ici,
   donc aucun n'est dessiné. */
.cc-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin-bottom: var(--space-5); }
.cc-tile {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
  background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: var(--space-4) var(--space-5); text-decoration: none; color: inherit;
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}
.cc-tile:hover { border-color: var(--accent); }
.cc-tile-value { font-size: var(--text-data); font-weight: 700; line-height: 1.05; color: var(--data-violet); letter-spacing: var(--tracking-tight); }
.cc-tile-label { font-size: var(--text-xs); color: var(--accent-text); font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.cc-tile-note { font-size: var(--text-2xs); color: var(--text-muted); }
.cc-tile-go { margin-top: auto; font-size: var(--text-xs); color: var(--text-muted); }
.cc-tile--unavailable .cc-tile-state { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-lg); font-weight: 600; color: var(--text-muted); }
.cc-camp-row {
  display: grid; grid-template-columns: minmax(0, 2fr) auto minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: var(--space-3); align-items: center; padding: var(--space-2) 0; border-bottom: 1px solid var(--border-subtle);
}
.cc-camp-row:last-child { border-bottom: none; }
.cc-camp-name { font-weight: 700; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-camp-fact { font-size: var(--text-xs); color: var(--text-muted); }
.cc-camp-go, .cc-queue-go { color: var(--accent-text); font-size: var(--text-sm); font-weight: 700; text-decoration: none; white-space: nowrap; }
.cc-queue-row { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-2) 0; border-bottom: 1px solid var(--border-subtle); }
.cc-queue-row:last-child { border-bottom: none; }
.cc-queue-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.cc-queue-title { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
.cc-queue-who { font-size: var(--text-xs); color: var(--text-muted); }
.v2-badge.is-bloquee { border-color: var(--danger); color: var(--danger); background: var(--danger-subtle); }
.v2-badge.is-prete { border-color: var(--success); color: var(--success-text); background: var(--success-subtle); }
.v2-badge.is-en_cours { border-color: var(--accent); color: var(--accent-text-on-tint); background: var(--accent-subtle); }
@media (max-width: 1100px) { .cc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .cc-tiles { grid-template-columns: minmax(0, 1fr); }
  .cc-camp-row { grid-template-columns: minmax(0, 1fr) auto; }
  .cc-camp-fact { display: none; }
}
/* Étroit : l'en-tête d'un panneau passe à la ligne au lieu de déborder, et un
   panneau ne peut jamais être plus large que sa colonne (mesuré à 390 px). */
@media (max-width: 700px) {
  .cc-panel { min-width: 0; overflow: hidden; }
  .cc-panel-head { flex-wrap: wrap; row-gap: var(--space-1); }
  .cc-panel-link { margin-left: 0; }
  .cc-funnel-row { grid-template-columns: minmax(56px, 1fr) minmax(32px, 1fr) auto auto; gap: var(--space-2); }
}

/* T-UX-9 — « Réessayer » vit dans l'état d'erreur, pas dans l'en-tête ; le
   bandeau système dit un état et sa conséquence, sans nom de composant. */
.cc-error .v2-btn { margin-top: var(--space-3); }
.cc-system-state { font-weight: 700; color: var(--text-secondary); }
.cc-system-reason { color: var(--text-secondary); }