/* ==========================================================================
   BADGE COMPONENTS
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  letter-spacing: 0.025em;
}

/* Badge Variants — tokenisés 2026-08-27 là où la valeur historique coïncide
   exactement avec un token ; les paires sans token exact gardent leur hex
   (valeurs d'origine conservées, cf. décision 2026-08-01 plus bas). */
/* css-color-ok: fg #1e40af (blue-800) historique — entre --state-blue-fg et --state-navy-fg, aucun token exact */
.badge-primary { background: var(--state-blue-bg); color: #1e40af; }
/* css-color-ok: même paire historique que badge-primary */
.badge-variables { background: var(--state-blue-bg); color: #1e40af; }
.badge-secondary { background: var(--gray-100); color: var(--gray-700); }
.badge-success { background: var(--state-emerald-bg); color: var(--state-emerald-fg); }
.badge-warning { background: var(--state-amber-bg); color: var(--state-amber-fg); }
.badge-error { background: var(--state-red-bg); color: var(--state-red-fg); }
.badge-info { background: var(--state-sky-bg); color: var(--state-sky-fg); }
/* css-color-ok: même paire historique que badge-primary */
.badge-helper { background: var(--state-blue-bg); color: #1e40af; }
.badge-danger { background: var(--state-red-bg); color: var(--state-red-fg); }
.badge-neutral { background: var(--gray-100); color: var(--gray-700); }
/* Classes longtemps RÉFÉRENCÉES sans définition (badge nu à l'écran) —
   définies 2026-08-28 : muted = atténuée, default ≡ secondary, outline =
   cadre seul. */
.badge-muted   { background: var(--gray-100); color: var(--text-muted); }
.badge-default { background: var(--gray-100); color: var(--gray-700); }
.badge-outline { background: transparent; border: 1px solid var(--border); color: var(--text-secondary); }

/* Project-specific badges */
/* Tonal depuis 2026-08-27 — blanc sur --success faisait 2,54:1 */
.badge-construction { background-color: var(--state-emerald-bg); color: var(--state-emerald-fg); }
/* Tonal depuis 2026-08-27 — blanc sur --warning faisait 2,15:1 */
.badge-renovation { background-color: var(--state-amber-bg); color: var(--state-amber-fg); }
/* Tonal depuis 2026-08-28 (arbitrage Olivier phase 3) — blanc sur --error faisait 3,76:1 */
.badge-sav { background-color: var(--state-red-bg); color: var(--state-red-fg); }

/* Tenant-type badges (xorizo) */
/* Tonal depuis 2026-08-28 — blanc sur violet-dot faisait 4,23:1 */
.badge-platform { background-color: var(--state-violet-bg); color: var(--state-violet-fg); }
/* css-color-ok: violet-600 historique, un cran plus sombre que --state-violet-dot */
.badge-broker   { background-color: #7c3aed; color: #fff; }

/* Environment badges (xorizo gov-data Live/Spec) — uppercase pill variant */
.badge-env {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 10px;
  text-transform: uppercase;
}
/* css-color-ok: bg green-100 historique — --state-green-bg est #d1fae5, pas #dcfce7 */
.badge-env-live { background: #dcfce7; color: var(--state-green-fg); }
.badge-env-spec { background: var(--state-amber-bg); color: var(--state-amber-fg); }

/* Priority badges */
.badge-priority-low { background-color: var(--gray-500); color: white; }
/* Tonal depuis 2026-08-28 — blanc sur --info faisait 3,68:1 */
.badge-priority-medium { background-color: var(--state-blue-bg); color: var(--state-blue-fg); }
/* Tonal depuis 2026-08-27 — blanc sur --warning faisait 2,15:1 */
.badge-priority-high { background-color: var(--state-amber-bg); color: var(--state-amber-fg); }
/* Tonal depuis 2026-08-28 — blanc sur --error faisait 3,76:1 */
.badge-priority-urgent { background-color: var(--state-red-bg); color: var(--state-red-fg); }

/* ==========================================================================
   PASTILLE DE STATUT — un seul composant pour toute la plateforme
   ==========================================================================
   Forme canonique (unifiée 2026-08-01) : **pill + point coloré**. C'était le
   dessin du configurateur V2 (`.dossiers-state-badge`), il devient celui de
   `.badge-status-*`, le nom déjà référencé par 10 fichiers de build + airfact.

   Le point est rendu en `::before` : **aucun markup à changer** dans les
   appelants existants (`<span class="badge badge-status-x">Label</span>`).
   Sa couleur vient de `--badge-status-dot`, à défaut de la couleur du texte.

   Deux familles de teintes cohabitent, par intention :
   - les 8 **jetons sémantiques historiques** (draft/pending/active/…), que les
     apps mappent depuis leurs codes métier — valeurs inchangées ;
   - les 14 **teintes de la palette d'état** (`--state-*`, tokens.css), ajoutées
     ici pour que le cycle de vie à 14 étapes du configurateur passe par le même
     composant que le reste.
   ========================================================================== */

/* Forme commune. `[class*="badge-status-"]` attrape les deux familles sans
   imposer une classe de base supplémentaire aux appelants existants. */
.badge-status,
[class*="badge-status-"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
}
/* Contraste des points : 6 des 14 -dot passent sous 3:1 sur leur -bg — assumé,
   le point est REDONDANT avec le libellé qui le suit (aucune information ne
   repose sur lui seul). Ne pas « corriger » en assombrissant les dots. */
.badge-status::before,
[class*="badge-status-"]::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--badge-status-dot, currentColor);
  opacity: 0.85;
  flex-shrink: 0;
}

/* — 8 jetons sémantiques historiques (valeurs d'origine conservées — les
     correspondances exactes passent par les tokens, le reste garde son hex) — */
.badge-status-draft { background: var(--gray-100); color: var(--gray-700); }
.badge-status-pending { background: var(--gray-100); color: var(--gray-700); }
.badge-status-active { background: var(--state-emerald-bg); color: var(--state-emerald-fg); }
/* css-color-ok: fg blue-800 historique, cf. badge-primary */
.badge-status-in_progress { background: var(--state-blue-bg); color: #1e40af; }
.badge-status-on_hold { background: var(--state-amber-bg); color: var(--state-amber-fg); }
/* css-color-ok: emerald-200/900 historique — « terminé » est délibérément plus profond que « actif » */
.badge-status-completed { background: #a7f3d0; color: var(--state-forest-fg); }
.badge-status-cancelled { background: var(--state-red-bg); color: var(--state-red-fg); }
/* css-color-ok: red-200/900 historique — « en retard » est délibérément plus profond que « annulé » */
.badge-status-delayed { background: #fecaca; color: #7f1d1d; }

/* — 14 teintes de la palette d'état (tokens.css) — */
.badge-status-slate    { background: var(--state-slate-bg);    color: var(--state-slate-fg);    --badge-status-dot: var(--state-slate-dot);    }
.badge-status-blue     { background: var(--state-blue-bg);     color: var(--state-blue-fg);     --badge-status-dot: var(--state-blue-dot);     }
.badge-status-green    { background: var(--state-green-bg);    color: var(--state-green-fg);    --badge-status-dot: var(--state-green-dot);    }
.badge-status-red      { background: var(--state-red-bg);      color: var(--state-red-fg);      --badge-status-dot: var(--state-red-dot);      }
.badge-status-orange   { background: var(--state-orange-bg);   color: var(--state-orange-fg);   --badge-status-dot: var(--state-orange-dot);   }
.badge-status-teal     { background: var(--state-teal-bg);     color: var(--state-teal-fg);     --badge-status-dot: var(--state-teal-dot);     }
.badge-status-amber    { background: var(--state-amber-bg);    color: var(--state-amber-fg);    --badge-status-dot: var(--state-amber-dot);    }
.badge-status-violet   { background: var(--state-violet-bg);   color: var(--state-violet-fg);   --badge-status-dot: var(--state-violet-dot);   }
.badge-status-navy     { background: var(--state-navy-bg);     color: var(--state-navy-fg);     --badge-status-dot: var(--state-navy-dot);     }
.badge-status-forest   { background: var(--state-forest-bg);   color: var(--state-forest-fg);   --badge-status-dot: var(--state-forest-dot);   }
.badge-status-indigo   { background: var(--state-indigo-bg);   color: var(--state-indigo-fg);   --badge-status-dot: var(--state-indigo-dot);   }
.badge-status-emerald  { background: var(--state-emerald-bg);  color: var(--state-emerald-fg);  --badge-status-dot: var(--state-emerald-dot);  }
.badge-status-pine     { background: var(--state-pine-bg);     color: var(--state-pine-fg);     --badge-status-dot: var(--state-pine-dot);     }
.badge-status-graphite { background: var(--state-graphite-bg); color: var(--state-graphite-fg); --badge-status-dot: var(--state-graphite-dot); }
.badge-status-sky      { background: var(--state-sky-bg);      color: var(--state-sky-fg);      --badge-status-dot: var(--state-sky-dot);      }

/* Préfixe d'étape (« Prod. », « Fact. ») glissé avant le libellé — propre au
   cycle de vie du configurateur, mais la mise en forme vit ici pour que la
   pastille reste un composant unique.
   ⚠ Nommé `.badge-phase` et NON `.badge-status-phase` : le sélecteur de forme
   ci-dessus est `[class*="badge-status-"]`, il aurait transformé ce simple
   préfixe en pastille à part entière, point coloré compris. */
.badge-phase {
  font-size: 0.875em;
  font-weight: 400;
  opacity: 0.55;
}

/* Pastille cliquable (colonne Statut d'une liste) — bouton nu qui garde
   exactement la forme de la pastille. */
.badge-status-btn {
  border: 0;
  cursor: pointer;
  font-family: inherit;
  transition: filter 0.1s, box-shadow 0.1s;
}
.badge-status-btn:hover {
  filter: brightness(0.94);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
}
.badge-status-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ── ALIAS historique du configurateur V2 ──────────────────────────────────
   `.dossiers-state-badge` n'est plus un composant : c'est le même dessin, sous
   son ancien nom, pour les surfaces pas encore migrées (page détail dossier).
   Différence unique : ce markup-là porte un `<span class="dossiers-state-dot">`
   explicite, donc **pas de `::before`** ici — sinon deux points. */
.dossiers-state-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  background: var(--state-slate-bg);
  color: var(--state-slate-fg);
}
.dossiers-state-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
  flex-shrink: 0;
}
.dossiers-state-label {
  line-height: 1.2;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.dossiers-state-phase { font-size: 0.875em; font-weight: 400; opacity: 0.55; }
.dossiers-state-btn   { border: 0; cursor: pointer; font-family: inherit; transition: filter 0.1s, box-shadow 0.1s; }
.dossiers-state-btn:hover { filter: brightness(0.94); box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12); }
.dossiers-state-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.dossiers-state-slate    { background: var(--state-slate-bg);    color: var(--state-slate-fg);    }
.dossiers-state-slate    .dossiers-state-dot { background: var(--state-slate-dot);    }
.dossiers-state-blue     { background: var(--state-blue-bg);     color: var(--state-blue-fg);     }
.dossiers-state-blue     .dossiers-state-dot { background: var(--state-blue-dot);     }
.dossiers-state-green    { background: var(--state-green-bg);    color: var(--state-green-fg);    }
.dossiers-state-green    .dossiers-state-dot { background: var(--state-green-dot);    }
.dossiers-state-red      { background: var(--state-red-bg);      color: var(--state-red-fg);      }
.dossiers-state-red      .dossiers-state-dot { background: var(--state-red-dot);      }
.dossiers-state-orange   { background: var(--state-orange-bg);   color: var(--state-orange-fg);   }
.dossiers-state-orange   .dossiers-state-dot { background: var(--state-orange-dot);   }
.dossiers-state-teal     { background: var(--state-teal-bg);     color: var(--state-teal-fg);     }
.dossiers-state-teal     .dossiers-state-dot { background: var(--state-teal-dot);     }
.dossiers-state-amber    { background: var(--state-amber-bg);    color: var(--state-amber-fg);    }
.dossiers-state-amber    .dossiers-state-dot { background: var(--state-amber-dot);    }
.dossiers-state-violet   { background: var(--state-violet-bg);   color: var(--state-violet-fg);   }
.dossiers-state-violet   .dossiers-state-dot { background: var(--state-violet-dot);   }
.dossiers-state-navy     { background: var(--state-navy-bg);     color: var(--state-navy-fg);     }
.dossiers-state-navy     .dossiers-state-dot { background: var(--state-navy-dot);     }
.dossiers-state-forest   { background: var(--state-forest-bg);   color: var(--state-forest-fg);   }
.dossiers-state-forest   .dossiers-state-dot { background: var(--state-forest-dot);   }
.dossiers-state-indigo   { background: var(--state-indigo-bg);   color: var(--state-indigo-fg);   }
.dossiers-state-indigo   .dossiers-state-dot { background: var(--state-indigo-dot);   }
.dossiers-state-emerald  { background: var(--state-emerald-bg);  color: var(--state-emerald-fg);  }
.dossiers-state-emerald  .dossiers-state-dot { background: var(--state-emerald-dot);  }
.dossiers-state-pine     { background: var(--state-pine-bg);     color: var(--state-pine-fg);     }
.dossiers-state-pine     .dossiers-state-dot { background: var(--state-pine-dot);     }
.dossiers-state-graphite { background: var(--state-graphite-bg); color: var(--state-graphite-fg); }
.dossiers-state-graphite .dossiers-state-dot { background: var(--state-graphite-dot); }

/* Interactive state — editable status badge opens an inline menu on click.
   Only applied when the PHP helper received transitions and is not readonly. */
.status-badge-editable {
  cursor: pointer;
  user-select: none;
  transition: filter 0.12s ease, box-shadow 0.12s ease;
}
.status-badge-editable:hover { filter: brightness(1.08); }
.status-badge-editable:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.status-badge-editable .status-badge-chevron {
  margin-left: 4px;
  opacity: 0.7;
  vertical-align: -1px;
}
.status-badge-editable.is-loading {
  opacity: 0.6;
  cursor: progress;
}

/* Floating menu — appended to <body> so modals/tables don't clip it */
.status-badge-menu {
  position: absolute;
  z-index: var(--z-float-top);
  min-width: 180px;
  background: var(--surface, white);
  border: 1px solid var(--border);
  border-radius: var(--radius, 6px);
  box-shadow: var(--shadow-lg, 0 10px 25px rgba(0,0,0,0.12));
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: status-badge-menu-in 0.08s ease-out;
}
@keyframes status-badge-menu-in {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}
.status-badge-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-sm, 4px);
  font-size: 0.8125rem;
  color: var(--text);
  cursor: pointer;
  background: transparent;
  border: 0;
  text-align: left;
  width: 100%;
}
.status-badge-menu-item:hover,
.status-badge-menu-item:focus-visible {
  background: var(--gray-100);
  outline: none;
}
.status-badge-menu-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
}

/* Variable recalculation level badges (build catalog — variables hierarchy legend) */
/* Tonal depuis 2026-08-28 — blanc sur indigo-dot faisait 4,47:1 */
.badge-var-level-A { background-color: var(--state-indigo-bg); color: var(--state-indigo-fg); }
/* Tonal depuis 2026-08-27 (contraste) */
.badge-var-level-B { background-color: var(--state-amber-bg); color: var(--state-amber-fg); }
/* Tonal depuis 2026-08-27 — blanc sur green-dot faisait 2,28:1 */
.badge-var-level-C { background-color: var(--state-green-bg); color: var(--state-green-fg); }
/* css-color-ok: slate-500 historique — entre --state-slate-fg et --state-slate-dot */
.badge-var-level-Z { background-color: #64748b; color: white; }

/* Count Badge — see navigation.css for the canonical tab-count styling.
 * This rule is kept only as a fallback for the (rare) non-tab usages of
 * `.count-badge`. Inside `.nav-tab` it's overridden by navigation.css to
 * match `.nav-tab-count` exactly (single source of truth for tab counts). */
.count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 0.375rem;
  border-radius: 100px;
  font-size: 0.6875rem;
  font-weight: 700;
  background: var(--gray-200);
  /* text-secondary et non text-muted : gray-500 sur gray-200 = 3,90:1
     (sous AA pour ce corps 11px gras) ; gray-600 y passe. 2026-08-28. */
  color: var(--text-secondary);
}

/* Type indicators */
.type-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.type-indicator.product {
  background-color: var(--state-blue-bg);
  /* css-color-ok: fg blue-800 historique, cf. badge-primary */
  color: #1e40af;
}

.type-indicator.pack {
  background-color: var(--state-emerald-bg);
  color: var(--state-emerald-fg);
}

.item-type-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
}

.item-type-badge.product {
  background-color: var(--info);
  color: white;
}

/* Tonal depuis 2026-08-27 — blanc sur --success faisait 2,54:1 */
.item-type-badge.pack {
  background-color: var(--state-emerald-bg);
  color: var(--state-emerald-fg);
}