/* ==========================================================================
   WizArth Sentinel — console d'exploitation

   Direction : « salle serveur la nuit ». Ardoise bleutée profonde, pas de
   noir pur (qui écrase les nuances d'état) ni de gris neutre (qui rend
   l'ambre et le teal boueux).

   Toutes les VALEURS sont en chasse fixe : des chiffres alignés d'une
   ligne à l'autre se comparent d'un coup d'œil, ce qui est le travail
   même de cette page. Les LIBELLÉS restent en proportionnelle.
   ========================================================================== */

:root {
  --bg:        #10151c;
  --surface:   #171e27;
  --surface-2: #1d2530;
  --line:      #232d3a;
  --line-soft: #1b232d;

  --ink:       #e8edf2;
  --ink-dim:   #a4b2c2;
  --muted:     #6f8093;

  --ok:        #3fbf9f;
  --warn:      #e8a33d;
  --crit:      #e0574b;
  --accent:    #5b9dd9;

  --ok-bg:     rgba(63, 191, 159, .12);
  --warn-bg:   rgba(232, 163, 61, .12);
  --crit-bg:   rgba(224, 87, 75, .12);

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono",
          Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, sans-serif;

  --r: 6px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}

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

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* --- Ossature ------------------------------------------------------- */

.shell { display: flex; min-height: 100vh; }

.rail {
  width: 208px;
  flex: 0 0 208px;
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 22px 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand {
  padding: 0 20px 22px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 14px;
}
.brand b {
  display: block;
  font-size: 16px;
  letter-spacing: -.01em;
}
.brand span {
  display: block;
  font: 500 10px/1.4 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 3px;
}

.rail nav a {
  display: block;
  padding: 8px 20px;
  color: var(--ink-dim);
  font-size: 14px;
  border-left: 2px solid transparent;
}
.rail nav a:hover { background: var(--surface-2); text-decoration: none; }
.rail nav a.on {
  color: var(--ink);
  border-left-color: var(--accent);
  background: var(--surface-2);
}

.main { flex: 1; padding: 26px 30px 60px; max-width: 1360px; min-width: 0; }

.page-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.page-head h1 { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
.stamp { font: 11px var(--mono); color: var(--muted); }

/* --- Micro-libellés -------------------------------------------------- */

.eyebrow {
  font: 600 10px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- Bandeau serveur interne ---------------------------------------- */
/* Traitement distinct : c'est le serveur d'Arthur, pas celui d'un client.
   S'il tombe, plus rien d'autre n'a de sens. */

.self-band {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
  padding: 18px 20px;
  margin-bottom: 24px;
}
.self-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.self-top h2 { margin: 0; font-size: 16px; font-weight: 600; }

.gauges { display: flex; gap: 26px; flex-wrap: wrap; }
.gauge { min-width: 116px; }
.gauge .k {
  font: 600 10px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.gauge .v {
  font: 600 25px/1.15 var(--mono);
  letter-spacing: -.02em;
  margin: 5px 0 6px;
  font-variant-numeric: tabular-nums;
}
.gauge .v small { font-size: 13px; color: var(--muted); font-weight: 400; }
.gauge .bar { height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.gauge .bar i { display: block; height: 100%; background: var(--ok); }
.gauge.warn .bar i { background: var(--warn); }
.gauge.crit .bar i { background: var(--crit); }
.gauge.warn .v { color: var(--warn); }
.gauge.crit .v { color: var(--crit); }

/* --- Cartes ---------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin-bottom: 18px;
  overflow: hidden;
}
.card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line-soft);
  flex-wrap: wrap;
}
.card > header h2 { margin: 0; font-size: 15px; font-weight: 600; }
.card .body { padding: 16px 18px; }

/* --- Quota ----------------------------------------------------------- */

.quota { display: flex; align-items: center; gap: 12px; }
.quota .track {
  flex: 1;
  min-width: 120px;
  height: 6px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.quota .track i { display: block; height: 100%; background: var(--accent); }
.quota.warn .track i { background: var(--warn); }
.quota.crit .track i { background: var(--crit); }
.quota .num {
  font: 12px var(--mono);
  color: var(--ink-dim);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* --- SIGNATURE : bande de rétention ---------------------------------- */
/* Chaque copie est un bloc dont la largeur est son poids. Les blocs
   qui tomberont au prochain passage sont hachurés : on voit ce qui va
   disparaître sans lire un seul chiffre. */

.strip { margin-top: 14px; }
.strip-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 7px;
  gap: 10px;
  flex-wrap: wrap;
}
.strip-blocks {
  display: flex;
  gap: 2px;
  height: 34px;
  background: var(--line-soft);
  border-radius: 3px;
  padding: 3px;
  overflow: hidden;
}
.blk {
  position: relative;
  min-width: 5px;
  border-radius: 2px;
  background: var(--ok);
  opacity: .82;
  transition: opacity .12s;
}
.blk:hover { opacity: 1; }
.blk.newest { background: var(--accent); opacity: 1; }
.blk.doomed {
  background: repeating-linear-gradient(
    135deg, var(--muted) 0 3px, transparent 3px 6px);
  opacity: .5;
}
.strip-legend {
  display: flex;
  gap: 16px;
  margin-top: 7px;
  font: 11px var(--mono);
  color: var(--muted);
  flex-wrap: wrap;
}
.strip-legend i {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 2px;
  margin-right: 5px;
  vertical-align: -1px;
}
.strip-empty {
  padding: 14px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  background: var(--line-soft);
  border-radius: 3px;
}

/* --- Tableaux -------------------------------------------------------- */

table { width: 100%; border-collapse: collapse; }
th {
  text-align: left;
  font: 600 10px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 10px 9px 0;
  border-bottom: 1px solid var(--line);
}
td {
  padding: 9px 10px 9px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13.5px;
  vertical-align: top;
}
tr:last-child td { border-bottom: 0; }
td.num, th.num {
  text-align: right;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  padding-right: 14px;
}
td.mono { font-family: var(--mono); font-size: 12.5px; }

/* --- Pastilles d'état ------------------------------------------------ */

.dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: 1px;
}
.dot.online   { background: var(--ok);   box-shadow: 0 0 0 3px var(--ok-bg); }
.dot.offline  { background: var(--crit); box-shadow: 0 0 0 3px var(--crit-bg); }
.dot.stale    { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); }
.dot.pending, .dot.disabled { background: var(--muted); }

.tag {
  display: inline-block;
  font: 600 10px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 7px;
  border-radius: 3px;
  background: var(--line);
  color: var(--ink-dim);
}
.tag.ok   { background: var(--ok-bg);   color: var(--ok); }
.tag.warn { background: var(--warn-bg); color: var(--warn); }
.tag.crit { background: var(--crit-bg); color: var(--crit); }

/* --- Boutons --------------------------------------------------------- */

.btn {
  display: inline-block;
  font: 500 12.5px var(--sans);
  padding: 6px 12px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-dim);
  border-radius: 4px;
  cursor: pointer;
}
.btn:hover { border-color: var(--accent); color: var(--ink); text-decoration: none; }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #0c131b; font-weight: 600; }
.btn.primary:hover { color: #0c131b; }

/* --- Graphes --------------------------------------------------------- */

.charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}
.chart .lbl {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.chart .lbl b {
  font: 600 15px var(--mono);
  font-variant-numeric: tabular-nums;
}
.chart svg { display: block; width: 100%; height: 62px; }

/* --- Divers ---------------------------------------------------------- */

.empty {
  padding: 34px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
.empty b { display: block; color: var(--ink-dim); margin-bottom: 5px; font-size: 15px; }

.err {
  background: var(--crit-bg);
  border-left: 2px solid var(--crit);
  padding: 9px 12px;
  border-radius: 0 3px 3px 0;
  font: 12px var(--mono);
  color: var(--ink-dim);
  margin-top: 10px;
  white-space: pre-wrap;
  word-break: break-word;
}

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

label.field { display: block; margin-bottom: 12px; }
label.field span {
  display: block;
  font: 600 10px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}
label.field input, label.field select, label.field textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 4px;
  padding: 7px 9px;
  font: 13px var(--mono);
}
label.field .hint { font: 11px var(--sans); color: var(--muted); margin-top: 4px; }

@media (max-width: 900px) {
  .shell { flex-direction: column; }
  .rail {
    width: 100%; flex: none; height: auto; position: static;
    display: flex; align-items: center; gap: 14px; padding: 12px 16px;
    overflow-x: auto;
  }
  .brand { border: 0; margin: 0; padding: 0 14px 0 0; white-space: nowrap; }
  .rail nav { display: flex; gap: 4px; }
  .rail nav a { padding: 6px 11px; border-left: 0; border-bottom: 2px solid transparent; }
  .rail nav a.on { border-left: 0; border-bottom-color: var(--accent); }
  .main { padding: 18px 15px 40px; }
  .grid2 { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* --- Pied de la barre latérale : identité et déconnexion -------------- */
/* Savoir sous quel compte on agit n'est pas cosmétique sur une console
   qui distingue l'équipe des lecteurs clients. */
.rail-foot {
  margin-top: 22px;
  padding: 14px 20px 0;
  border-top: 1px solid var(--line-soft);
}
.rail-foot .who { margin-bottom: 10px; }
.rail-foot .who b {
  display: block;
  font: 500 12px/1.4 var(--mono);
  color: var(--ink-dim);
  word-break: break-all;
  margin: 3px 0 2px;
}
.rail-foot .btn { width: 100%; }

@media (max-width: 900px) {
  .rail-foot {
    margin: 0 0 0 auto;
    padding: 0 0 0 14px;
    border-top: 0;
    border-left: 1px solid var(--line-soft);
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
  }
  .rail-foot .who { margin: 0; }
  .rail-foot .who b { font-size: 11px; }
  .rail-foot .btn { width: auto; }
}