/* Supervision — thème sombre (SPEC §11 : dark, i18n FR, responsive, zéro CDN). */

:root {
  --bg: #0d1117;
  --bg-soft: #131a24;
  --surface: #161f2c;
  --surface-2: #1d2939;
  --border: #2b3a4e;
  --text: #e6edf5;
  --text-dim: #9fb0c3;
  --accent: #4da3ff;
  --accent-soft: #1c3a57;

  --state-nominal: #2ecc71;
  --state-warn: #f1c40f;
  --state-failure: #ff5252;
  --state-stale: #8a94a6; /* gris historique — F11 : « Absent » est maintenant rouge (badge.absent) */

  --radius: 10px;
  --gap: 14px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 1.35rem; margin: 0.2em 0 0.6em; }
h1::before { content: none; }

.topbar {
  display: flex;
  align-items: center;
  gap: var(--gap);
  flex-wrap: wrap;
  padding: 10px 16px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 2;
}

.brand {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: var(--text);
}
.brand::before { content: "◈ "; color: var(--accent); }

.topbar nav {
  display: flex;
  gap: 4px;
  flex: 1;
  flex-wrap: wrap;
}

.navlink {
  padding: 6px 12px;
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 0.95rem;
}
.navlink:hover { background: var(--surface); color: var(--text); text-decoration: none; }
.navlink.active { background: var(--accent-soft); color: var(--text); }

.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.clock { color: var(--text-dim); font-variant-numeric: tabular-nums; font-size: 0.9rem; }

.session {
  font-size: 0.85rem;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 10px;
}
.session::before { content: "● "; color: var(--state-nominal); }

.btn {
  font: inherit;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 14px;
  cursor: pointer;
}
.btn:hover { background: var(--accent-soft); border-color: var(--accent); }
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #04121f;
  font-weight: 600;
}
.btn.primary:hover { filter: brightness(1.1); }

.view, [data-screen] {
  flex: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 16px 28px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}

.hint { color: var(--text-dim); }
.error { color: var(--state-failure); margin: 8px 0; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--gap);
  margin-top: var(--gap);
}

.tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--state-nominal);
  border-radius: var(--radius);
  padding: 12px 14px;
}
/* F11 (V1.1) — « Absent » (rouge) : pas de heartbeat depuis >10 s.
 * `.stale` conservé comme alias (spark.js / anciens rendus). */
.tile.absent { border-left-color: var(--state-failure); opacity: 0.85; }
.tile.stale { border-left-color: var(--state-failure); opacity: 0.85; }
.tile.warn { border-left-color: var(--state-warn); }
.tile.failure { border-left-color: var(--state-failure); }

.tile h2 { font-size: 1rem; margin: 0 0 2px; }
.tile .meta { color: var(--text-dim); font-size: 0.85rem; }

.badge {
  display: inline-block;
  padding: 1px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid var(--border);
  color: var(--text-dim);
}
.badge.nominal { color: #052b17; background: var(--state-nominal); border-color: transparent; }
.badge.warn { color: #3a2e00; background: var(--state-warn); border-color: transparent; }
.badge.failure { color: #2b0606; background: var(--state-failure); border-color: transparent; }
/* F10/F11 (V1.1) — « Absent » = rouge (pas un gris « stale »). */
.badge.absent { color: #2b0606; background: var(--state-failure); border-color: transparent; }
.badge.stale { background: var(--state-stale); color: #1a2230; border-color: transparent; }

/* Login */
.login-card {
  max-width: 380px;
  margin: 8vh auto 0;
  display: block;
}
.login-card label {
  display: block;
  margin: 12px 0;
  font-size: 0.9rem;
  color: var(--text-dim);
}
.login-card input {
  display: block;
  width: 100%;
  margin-top: 5px;
  padding: 10px 12px;
  font: inherit;
  color: var(--text);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.login-card input:focus { outline: none; border-color: var(--accent); }
.login-card .actions { margin-top: 16px; display: flex; justify-content: flex-end; }

/* Responsive : le flex/grid s'effondre proprement sur mobile (1 colonnes). */
@media (max-width: 640px) {
  .topbar { padding: 8px 10px; gap: 8px; }
  .topbar-right { width: 100%; justify-content: space-between; }
  .view, [data-screen] { padding: 14px 10px 22px; }
  .grid { grid-template-columns: 1fr; }
}

/* ------- Vue Détail + jauges (F5b2) ------- */
.detail-back strong { color: var(--text); }
.detail-back:hover strong { text-decoration: underline; }

.detail-extra { margin-top: var(--gap); }
.detail-extra h2 { font-size: 1.05rem; margin: 0 0 8px; }

/* F11 (V1.1) — badge état du poste dans le <h1> de la page poste. */
.details-badge { margin-left: 4px; vertical-align: middle; }

/* F11 (V1.1) — « À vérifier » : liste des services down (page poste). */
.detail-down {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--state-warn);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: var(--gap);
}
.detail-down h2 { font-size: 1.05rem; margin: 0 0 8px; }
.down-list { list-style: none; margin: 0; padding: 0; }
.down-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 2px;
  border-top: 1px solid var(--border);
}
.down-item .down { color: var(--state-failure); margin-left: auto; }

.metric-list { list-style: none; margin: 0; padding: 0; }
.metric {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 2px;
  border-top: 1px solid var(--border);
}
.metric-name { min-width: 140px; color: var(--text); }
.metric .metric-thr { font-style: normal; color: var(--text-dim); margin-left: auto; font-size: 0.8rem; }
.metric.nominal b { color: var(--state-nominal); }
.metric.warn b { color: var(--state-warn); }
.metric.failure b { color: var(--state-failure); }
.metric.stale { opacity: 0.75; }
.metric.stale b { color: var(--state-stale); }
/* F10/F11 (V1.1) — « Absent » : données figées, teinte rouge (étiquette rouge). */
.metric.absent { opacity: 0.75; }
.metric.absent b { color: var(--state-failure); }

.gauge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--gap);
  margin-top: var(--gap);
}
.gauge-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}
.gauge-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.gauge-label { font-weight: 600; }
.gauge-value { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.gauge-value.nominal { color: var(--state-nominal); }
.gauge-value.warn { color: var(--state-warn); }
.gauge-value.failure { color: var(--state-failure); }
.gauge-value.stale { color: var(--state-stale); }
.gauge-value.absent { color: var(--state-failure); }
.gauge.absent .gauge-fill { background: var(--state-failure); }

.gauge {
  position: relative;
  height: 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.gauge-fill {
  display: block;
  height: 100%;
  width: calc((var(--gauge-val) / var(--gauge-max)) * 100%);
  border-radius: inherit;
  background: var(--text-dim);
}
.gauge.nominal .gauge-fill { background: var(--state-nominal); }
.gauge.warn .gauge-fill { background: var(--state-warn); }
.gauge.failure .gauge-fill { background: var(--state-failure); }
.gauge.stale .gauge-fill { background: var(--state-stale); }
.gauge-scale { margin-top: 6px; color: var(--text-dim); font-size: 0.78rem; }

/* V1.2 C1a — grille UNIQUE page POSTE (SPEC §3.1/§3.2) : article.card.{state}
   = header (label + badge + ★) / body (valeur + unité, jauge si numérique,
   dispo bar si service boolean) / footer (seuils). L'ordre des cartes suit
   `metrics` (agent). Les helpers V1.1 conservés — la suppression est la
   carte C1b. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--gap);
  margin-top: var(--gap);
}
.card-grid > article.card { border-left: 4px solid var(--border); }
.card-grid > article.card.nominal { border-left-color: var(--state-nominal); }
.card-grid > article.card.warn { border-left-color: var(--state-warn); opacity: 0.92; }
.card-grid > article.card.failure { border-left-color: var(--state-failure); opacity: 0.9; }
.card-grid > article.card.stale,
.card-grid > article.card.absent { border-left-color: var(--state-failure); opacity: 0.85; }
/* V1.2-C3 (SPEC §9) : le panneau d'historique est INSÉRÉ IMMÉDIATEMENT SOUS
   la tuile cliquée (insertAdjacentElement "afterend") — il est donc un
   enfant de la grille .card-grid (display:grid). Pour qu'il OCCUPE LA
   LARGUEUR COMPLÈTE (et non une seule cellule minmax(230px,1fr)), on lui
   applique `grid-column: 1 / -1`. */
.card-grid > .hist-panel,
.card-grid > .g-history-panel { grid-column: 1 / -1; }
.card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.card-label { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-header .star { margin-left: auto; }
.card-value { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; margin-bottom: 6px; }
.card-footer { margin-top: 8px; font-size: 0.78rem; color: var(--text-dim); }
.d-grid.warn > .card-value { color: var(--text-dim); }

/* F12 (V1.1) : barre d'historique de disponibilité des services — sous
   chaque ligne de service. Segments contigus up (vert) / down (rouge) /
   absent (gris, pas de données) ; largeur % = durée / fenêtre active. */
.dispo-bar {
  display: flex;
  flex: 1 1 auto;
  min-width: 180px;
  height: 8px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--state-stale); /* gris de base = « pas de données » */
  border: 1px solid var(--border);
}
.dispo-bar i {
  display: block;
  height: 100%;
  min-width: 2px;
  background: transparent;
}
.dispo-bar i.absent { background: var(--state-stale); }
.dispo-bar i.up     { background: var(--state-nominal); }
.dispo-bar i.down   { background: var(--state-failure); }

/* F5c2 : la barre de période GLOBALE (24h / 7j / 30j) a été SUPPRIMÉE par
   V1.2-C3 (SPEC §9 — « il existe DEUX jeux de boutons de durée ») : le SEUL
   réglage de durée visible est la toolbar du panneau d'historique
   (buttons `.g-hwin`, 1h/6h/24h/7j/30j). Les ancients `.range-bar` /
   `.range-btn` ne sont donc plus stylés ici (zéro référence JS/CSS restante). */

/* Responsive */
@media (max-width: 640px) {
  .gauge-grid { grid-template-columns: 1fr; }
  .metric-name { min-width: auto; }
  .metric { flex-wrap: wrap; }
}

/* F13 (V1.1 / carte F6) — sections de la page POSTE : Services / État /
   Métriques système (ordre imposé). Tokens existants uniquement. */
.d-section { margin-top: var(--gap); }
.d-section:first-child { margin-top: 0; }
.d-section-title { font-size: 1.05rem; margin: 0 0 8px; }
.d-section-subtitle { font-size: 0.95rem; margin: 10px 0 6px; color: var(--text-dim); }
.d-state-line {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--border);
}
.d-state-line .badge { margin-left: 0; }
.d-state-note { color: var(--text-dim); font-size: 0.9rem; margin-left: auto; }

/* V1.2-C2a1 (SPEC §3.2 1/2) — panneau UNIQUE d'historique au clic
   (remplace le panneau F13 V1.1 « dans la jauge ») : <aside> sous la grille.
   Boutons 1h/6h/24h/7j/30j + Fermer + canvas spark.js + header meta
   (unit / max / seuils depuis /api/history meta, SPEC §2.4). */
.g-history-panel,
.hist-panel {
  margin: 12px 0 10px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.hist-panel-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.hist-panel-title { font-size: 1rem; font-weight: 700; color: var(--text); }
.g-history-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 8px;
  padding: 3px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.g-hwin {
  font: inherit; font-size: 0.8rem; font-weight: 600;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
}
.g-hwin:hover { color: var(--text); background: var(--accent-soft); }
.g-hwin.active { color: #04121f; background: var(--accent); border-color: var(--accent); }
.g-hclose {
  font: inherit; font-size: 0.8rem; font-weight: 600;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px;
  margin-left: 6px;
  cursor: pointer;
}
.g-hclose:hover { background: var(--accent-soft); border-color: var(--accent); }
.g-history-spark { display: block; max-width: 100%; height: auto; margin: 0; }

/* F13 — la jauge est un bouton cliquable (cursor pointer) → hover accentué. */
.gauge-card [role="button"] { cursor: pointer; }
.gauge-card [role="button"]:hover .gauge { border-color: var(--accent); }

/* ------------------------------------------------------------------
 * F15 (V1.1) — favoris de valeurs
 *  .fav-banner   : bandeau « Mes valeurs » sur l'Accueil, au-dessus tuiles.
 *  .fav-row      : ligne « poste — nom : valeur [unit] » + badge + ★.
 *  .fav-star/.star (+ .star.filled) : étoile toggle page poste, ★ retirable.
 * ------------------------------------------------------------------ */
.fav-banner {
  margin: 0 0 var(--gap);
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}
.fav-title {
  margin: 0 0 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}
.fav-title::before { content: "★ "; color: var(--state-warn); }
.fav-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  margin: 2px 0;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text);
}
.fav-row:hover { background: var(--surface-2); }
.fav-text { flex: 1 1 auto; font-size: 0.9rem; color: var(--text); }
.fav-row .badge { flex: 0 0 auto; }
.fav-row.absent .fav-text { color: var(--text-dim); }

/* Étoile ★ (page poste + bandeau) : toggle favori.
 * .star.filled = « remplie » (déjà favori — phase F15 Accept). */
.fav-star {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 2px 8px;
  cursor: pointer;
  color: var(--text-dim);
}
.fav-star:hover { background: var(--accent-soft); color: var(--text); }
.fav-star:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.star { font-size: 1.05rem; line-height: 1; color: var(--text-dim); }
.fav-star:hover .star { color: var(--text); }
.star.filled,
.fav-star:hover .star.filled { color: var(--state-warn); }

/* Responsive : sections + panneau s'ajustent déjà par tokens. */
@media (max-width: 640px) {
  .g-history-toolbar { flex-wrap: wrap; }
  .fav-row { flex-wrap: wrap; gap: 6px; }
}

.foot {
  padding: 10px 16px;
  color: var(--text-dim);
  font-size: 0.8rem;
  text-align: center;
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
}

/* ------------------------------------------------------------------
   C4b (SPEC §9-C4) — Zone « Retirer ce poste » (bas de page POSTE).
   Bord HAUT ROUGE (requis carte). Visible uniquement sur la page
   d'un poste joignable : app.js la monte/démonte dans sectionDetail.
   data-state : idle | ok | err (peint le bord + le message).
   ------------------------------------------------------------------ */
.danger-zone {
  margin-top: 28px;
  padding: 14px 16px 16px;
  background: var(--bg-soft);
  border: 1px solid #5a2430;
  border-top: 4px solid var(--state-failure);
  border-radius: var(--radius);
  color: var(--text);
}
.danger-zone[data-state="err"] { border-color: #7a2a3a; border-top-color: var(--state-failure); }
.danger-zone[data-state="ok"]  { border-color: #1f4a30; border-top-color: var(--state-nominal); }
.danger-title {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--state-failure);
  letter-spacing: 0.02em;
}
.danger-desc { margin: 0 0 10px; color: var(--text-dim); font-size: 0.92rem; }
.danger-target { margin: 0 0 12px; font-size: 0.95rem; }
.danger-target-name { color: var(--text); font-weight: 700; }
.danger-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-danger {
  background: transparent;
  color: var(--state-failure);
  border: 1px solid var(--state-failure);
  border-radius: 8px;
  padding: 8px 14px;
  font: inherit; font-weight: 600;
  cursor: pointer;
}
.btn-danger:hover { background: #2a1116; }
.btn-danger:focus-visible { outline: 2px solid var(--state-failure); outline-offset: 1px; }
.btn-danger-solid {
  background: var(--state-failure);
  color: #14070a;
  border: 1px solid var(--state-failure);
  border-radius: 8px;
  padding: 8px 14px;
  font: inherit; font-weight: 700;
  cursor: pointer;
}
.btn-danger-solid:hover { filter: brightness(1.08); }
.btn-danger-solid:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
.btn-ghost {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 14px;
  font: inherit; font-weight: 600;
  cursor: pointer;
}
.btn-ghost:hover { color: var(--text); border-color: var(--text-dim); }
.btn-ghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.danger-confirm { margin-top: 14px; padding-top: 12px; border-top: 1px dashed #4a2a35; }
.danger-ask { margin: 0 0 8px; color: var(--text); font-size: 0.95rem; }
.danger-confirm input[type="text"] {
  width: 100%;
  max-width: 340px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--state-failure);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
}
.danger-confirm input[type="text"]:focus-visible { outline: 2px solid var(--state-failure); outline-offset: 1px; }
.danger-buttons { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.danger-msg { margin-top: 10px; font-size: 0.9rem; font-weight: 600; }
.danger-msg-ok  { color: var(--state-nominal); }
.danger-msg-err { color: var(--state-failure); }