/* console.css — le CSS PROPRE de la coquille de console web (préfixe .wc-, « web console »).
   CONSTRUIT SUR gen/tokens.css, importée AVANT cette feuille : chaque couleur est un var() des
   tokens, chaque cote de STRUCTURE est une variable --wc-* posée au montage par console.js, qui la
   LIT dans la feuille d'écrans (grammaire commune + bloc backoffice : rail_nav 232, table_lignes
   44, boutons 36, kpi_tuiles 4 — aucune de ces valeurs n'est écrite ici). Si un nombre apparaît,
   c'est de la micro-typo locale (un padding, une pastille), jamais une cote de la charte.
   PAS de classes .nx-* recopiées : tools/design-system/patterns/ops-console.html est la fiche
   d'exposition du gabarit Ops, pas une bibliothèque — ses RÈGLES sont reprises (rail qui touche
   les bords, contenu à la marge de la grammaire, l'état serveur en barre d'état à gauche, l'action
   d'un tableau qui ne pèse pas plus que la donnée), jamais ses classes.
   LE MOBILIER (.wc-toolbar, .wc-table, .wc-champ…, .wc-kpis) est celui des SIX consoles : une
   section de produit COMPOSE ces classes, elle n'écrit pas les siennes — le pendant CSS des
   widgets RigUi que les écrans ShellAdmin composent côté Godot. */

/* ── Le cadre : barre de titre / corps / barre d'état (charte §5, le même squelette partout). */
.wc-console {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: var(--t-body);
  font-weight: var(--w-body);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.wc-barre-titre {
  flex: none;
  height: var(--wc-barre-titre);
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 0 var(--s3);
  background: var(--bg-lift);
  border-bottom: 1px solid var(--divider);
  user-select: none;
}
.wc-titre-marque { font-size: var(--t-ui); font-weight: var(--w-ui); }
/* Le cartouche Ops : le badge du gabarit, à l'ACCENT du produit — la seule teinte de la barre. */
.wc-titre-badge {
  font-size: var(--t-micro);
  font-weight: var(--w-micro);
  letter-spacing: var(--tr-micro);
  text-transform: var(--tt-micro);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 1px var(--s2);
}
/* Le SÉLECTEUR DE CONTEXTE (fiche Champs & choix du DS) : le live sélectionné, une fois pour toute
   la surface. Hauteur 28 sous la barre de 40, étiquette au palier micro DANS le champ, bord à
   l'accent au focus — la même règle que tout champ. */
.wc-contexte {
  display: inline-flex; align-items: center; gap: var(--s2); height: 28px;
  margin-left: var(--s3); padding: 0 var(--s2) 0 var(--s3);
  border: 1px solid var(--divider); border-radius: var(--radius-sm); background: var(--surface);
  font-size: var(--t-label); color: var(--text);
}
.wc-contexte:focus-within { border-color: var(--accent); }
.wc-contexte-etiquette {
  font-size: var(--t-micro); font-weight: var(--w-micro); letter-spacing: var(--tr-micro);
  text-transform: var(--tt-micro); color: var(--text-faint); user-select: none;
}
.wc-contexte-saisie {
  border: 0; background: transparent; color: var(--text); width: 14ch; outline: none;
  font: var(--w-label) var(--t-label) / 1 'Inter', system-ui, sans-serif;
}
.wc-contexte-saisie::placeholder { color: var(--text-faint); }
.wc-titre-droite { margin-left: auto; display: flex; align-items: center; gap: var(--s3); }
/* La CLOCHE et son COMPTEUR (fiche États & étiquettes) : un bouton d'icône carré, la puce en haut
   à droite. Le fond plein est la seule exception à « l'état ne se peint jamais en fond plein » :
   à 16 px, un contour ne se lit plus. */
.wc-cloche { position: relative; width: calc(var(--wc-barre-titre) - var(--s3)); padding: 0; }
.wc-cloche svg { display: block; }
.wc-compteur {
  position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: var(--warning); color: var(--bg);
  font-size: 10px; font-weight: var(--w-micro); line-height: 16px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.wc-compteur[hidden] { display: none; }
.wc-titre-session { font-size: var(--t-label); color: var(--text-muted); display: flex; gap: var(--s2); align-items: baseline; }
.wc-titre-session b { font-weight: var(--w-ui); color: var(--text); }
.wc-titre-role {
  font-size: var(--t-micro); font-weight: var(--w-micro);
  letter-spacing: var(--tr-micro); text-transform: var(--tt-micro);
}
/* Les commandes de la barre de titre restent plus basses que la barre (40) : hauteur compacte. */
.wc-barre-titre .wc-btn { height: calc(var(--wc-barre-titre) - var(--s3)); font-size: var(--t-label); }

/* ── Le corps : rail + panneau. Le rail touche les bords (rayon 0, c'est son rôle — gabarit
   Ops) ; le contenu garde la marge de la grammaire. */
.wc-corps { flex: 1 1 auto; display: flex; min-height: 0; }
.wc-rail {
  flex: none;
  width: var(--wc-rail);
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  padding: var(--s3) var(--s2);
  background: var(--bg-lift);
  border-right: 1px solid var(--divider);
  overflow-y: auto;
}
.wc-rail-item {
  border: none; background: none; text-align: left; cursor: pointer;
  color: var(--text-muted); font-size: var(--t-ui); font-weight: var(--w-ui);
  font-family: inherit;
  padding: var(--s2) var(--s3); border-radius: var(--radius-sm);
}
/* L'intitulé d'un VOLET : un libellé en capitales, muet, qui range les entrées dessous. Il n'est
   pas cliquable et ne se marque jamais actif — c'est un titre de colonne, pas une entrée. Le
   premier ne porte pas de marge haute : le rail commence par lui. */
.wc-rail-volet {
  margin-top: var(--s3); padding: 0 var(--s3) var(--s1);
  color: var(--text-faint); font-size: var(--t-micro); font-weight: var(--w-ui);
  text-transform: var(--tt-micro); letter-spacing: var(--tr-micro);
  user-select: none;
}
.wc-rail-volet:first-child { margin-top: 0; }
.wc-rail-item:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
.wc-rail-item[aria-selected='true'] { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.wc-panneau { flex: 1 1 auto; min-width: 0; overflow: auto; padding: var(--wc-marge); }

/* ── La barre d'état : l'état serveur à gauche (pastille + texte), la version, l'action
   principale DERNIÈRE à droite (charte §5.4). */
.wc-barre-etat {
  flex: none;
  height: var(--wc-barre-etat);
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 0 var(--wc-marge);
  background: var(--bg-lift);
  border-top: 1px solid var(--divider);
  font-size: var(--t-label);
  color: var(--text-muted);
}
.wc-etat-pastille { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--text-muted); }
.wc-etat-pastille[hidden] { display: none; }
.wc-etat-texte { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wc-etat-version { color: var(--text-faint); }
.wc-etat-action:empty { display: none; }

/* ── Boutons : hauteur commune des commandes BO (backoffice.boutons — 36 dans la feuille), le
   primaire est un CONTOUR jamais un aplat, survol à l'accent 12 % (charte §3/§4). */
.wc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  height: var(--wc-btn);
  border: 1px solid var(--divider);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text);
  font: var(--w-ui) var(--t-ui) / 1 'Inter', system-ui, sans-serif;
  padding: 0 var(--s4);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--wc-m-survol) ease-out, border-color var(--wc-m-survol) ease-out;
}
.wc-btn:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.wc-btn:active { transition: none; }
.wc-btn:focus-visible { outline: none; border-width: 2px; border-color: var(--accent); margin: -1px; }
.wc-btn[disabled] { opacity: 0.45; cursor: default; background: transparent; }
.wc-btn-principal { border-color: var(--accent); }
.wc-btn-principal:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); border-color: var(--accent); }
.wc-btn-principal:active { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.wc-btn-secondaire { border-color: var(--divider); }
.wc-btn-fantome { border-color: transparent; color: var(--text-muted); }
.wc-btn-fantome:hover { color: var(--text); }
/* Le bouton PRESSÉ d'un sélecteur segmenté : l'état, pas une identité. */
.wc-btn[aria-pressed='true'] {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* ── La porte de connexion : une carte ancrée en tête de colonne, la même famille que le
   dialogue de la coquille streamer (surface, divider, rayon lg). */
.wc-porte { flex: 1 1 auto; overflow: auto; display: flex; justify-content: center; }
.wc-porte-carte {
  width: 28em;
  max-width: calc(100% - 2 * var(--wc-marge));
  align-self: start;
  margin-top: var(--s7);
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  padding: var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.wc-porte-titre { font-size: var(--t-h2); font-weight: var(--w-h2); margin: 0; }
.wc-porte-corps { margin: 0; font-size: var(--t-label); color: var(--text-muted); line-height: 1.5; }
.wc-porte-verdict { margin: 0; font-size: var(--t-label); color: var(--danger); }
.wc-porte-entrer { align-self: flex-start; }

/* ── Le mobilier des sections ─────────────────────────────────────────────────────────────── */
/* La toolbar d'un écran : titre + aide à gauche, saisie et gestes à droite, sur une ligne qui
   replie proprement quand la place manque. */
.wc-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s3) var(--wc-gouttiere);
  margin-bottom: var(--s4);
}
.wc-toolbar-titres { margin-right: auto; }
.wc-toolbar-titre { font-size: var(--t-h2); font-weight: var(--w-h2); margin: 0; }
.wc-toolbar-aide { margin: var(--s1) 0 0; font-size: var(--t-label); color: var(--text-muted); }

/* Un champ de saisie inline (libellé muet + entrée). */
.wc-champ { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--t-label); color: var(--text-muted); }
.wc-champ-saisie {
  height: var(--wc-btn);
  border: 1px solid var(--divider);
  border-radius: var(--radius-md);
  background: var(--sunken);
  color: var(--text);
  font: var(--w-body) var(--t-ui) / 1 'Inter', system-ui, sans-serif;
  padding: 0 var(--s3);
  min-width: 12em;
}
.wc-champ-saisie::placeholder { color: var(--text-faint); }
.wc-champ-saisie:focus-visible { outline: none; border-color: var(--accent); }

/* Le sélecteur segmenté : des .wc-btn collés, l'état pressé à l'accent. */
.wc-segmente { display: inline-flex; }
.wc-segmente .wc-btn { border-radius: 0; margin-left: -1px; }
.wc-segmente .wc-btn:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); margin-left: 0; }
.wc-segmente .wc-btn:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }

/* Le bandeau d'information d'un écran (le cadre « info » de RigUi.keyed) : titre à l'accent,
   corps muet, et le geste qui se lit dans sa phrase. */
.wc-bandeau {
  background: var(--surface);
  border: 1px solid var(--divider);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.wc-bandeau-titre { margin: 0; font-size: var(--t-ui); font-weight: var(--w-ui); color: var(--accent); }
.wc-bandeau-corps { margin: 0; font-size: var(--t-label); color: var(--text-muted); line-height: 1.5; }
.wc-bandeau .wc-btn { align-self: flex-start; }

/* La rangée de KPI du gabarit Ops : autant de tuiles que la feuille en déclare (kpi_tuiles — 4,
   « jamais plus »), sur une seule ligne au-dessus du tableau. */
.wc-kpis {
  display: grid;
  grid-template-columns: repeat(var(--wc-kpi-tuiles), minmax(0, 1fr));
  gap: var(--s3);
  margin-bottom: var(--s4);
}
.wc-kpi { background: var(--surface); border-radius: var(--radius-md); padding: var(--s3) var(--s4); }
.wc-kpi-libelle {
  margin: 0 0 var(--s1);
  font-size: var(--t-micro); font-weight: var(--w-micro);
  letter-spacing: var(--tr-micro); text-transform: var(--tt-micro);
  color: var(--text-faint);
}
.wc-kpi-valeur { margin: 0; font-size: var(--t-h2); font-weight: var(--w-h2); font-variant-numeric: tabular-nums; }

/* Le tableau : lignes à la hauteur d'interaction de la feuille (table_lignes), en-têtes au palier
   micro, la colonne d'action à droite en boutons secondaires (l'action ne pèse pas plus que la
   donnée — gabarit Ops). */
.wc-table { width: 100%; border-collapse: collapse; font-size: var(--t-ui); }
.wc-table th {
  text-align: left;
  font-size: var(--t-micro); font-weight: var(--w-micro);
  letter-spacing: var(--tr-micro); text-transform: var(--tt-micro);
  color: var(--text-faint);
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--divider);
}
.wc-table td {
  height: var(--wc-ligne-table);
  padding: 0 var(--s3);
  border-bottom: 1px solid var(--divider);
  color: var(--text);
}
.wc-table tbody tr:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.wc-table .wc-num { text-align: right; font-variant-numeric: tabular-nums; }
.wc-table .wc-droite { text-align: right; }
.wc-table .wc-muet { color: var(--text-muted); }
.wc-table-vide { padding: var(--s5); text-align: center; color: var(--text-faint); font-size: var(--t-label); }

/* La ligne d'état d'un écran (accusés, erreurs) : un mot, sa teinte est un token. */
.wc-ligne-etat { margin-top: var(--s3); font-size: var(--t-label); color: var(--text-muted); min-height: 1.2em; }
.wc-ligne-etat[data-statut='success'] { color: var(--success); }
.wc-ligne-etat[data-statut='danger'] { color: var(--danger); }
.wc-ligne-etat[data-statut='warning'] { color: var(--warning); }