/*
  Socle visuel du back-office ICon.
  Référence : specs §8.2 (ST-BO-10 à ST-BO-20), ADR-0002.

  Les valeurs ci-dessous ne sont pas des préférences esthétiques. L'utilisateur est
  debout sur un terrain irrégulier, en plein soleil, avec des gants, sur une tablette
  dont le réseau tombe. Chaque token traduit une de ces contraintes.

  Les ratios de contraste annoncés sont calculés sur --surface (#ffffff) selon la
  formule WCAG, et vérifiés en CI par la suite Playwright (ST-TEST-08).
*/

:root {
  color-scheme: light;

  /* Couleurs. Exigence : 7:1 minimum pour le texte (ST-BO-14), au-delà du AA
     habituel, parce que le jugement se fera écran au soleil. */
  --surface: #ffffff;
  --surface-sunken: #f2f4f7;
  --text: #16191d;          /* 17,6:1 sur --surface */
  --text-muted: #4a4f55;    /*  8,3:1 sur --surface */
  --border: #6b7178;        /*  4,9:1 — trait d'interface, pas du texte */
  --border-strong: #16191d;

  --accent: #0a3266;        /* 12,6:1 avec --accent-text */
  --accent-text: #ffffff;
  --critical: #8a0f0f;      /*  9,7:1 avec --critical-text */
  --critical-text: #ffffff;
  --state-ok: #14532d;      /*  9,1:1 sur --surface */
  --state-warning: #6b4300; /*  8,6:1 sur --surface */

  /* Cibles tactiles. 48 px pour un doigt ganté, 56 px pour les actions engageantes
     — Recalibrer, Valider les fouilles, Demander recalibrage (ST-BO-13). */
  --touch: 48px;
  --touch-critical: 56px;
  --touch-gap: 8px;

  /* 16 px de base, jamais moins (ST-BO-15). Les unités relatives suivent le zoom
     du navigateur, qui n'est bloqué nulle part. */
  --text-base: 1rem;
  --text-small: 0.9375rem;
  --text-h1: 1.75rem;
  --text-h2: 1.3125rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  --radius: 6px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Aucun font-size en pourcentage ni en px fixes : la préférence système gagne. */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--text-base);
  line-height: 1.5;
  /* ST-BO-10 : rien ne doit déborder sous 360 px. */
  min-width: 320px;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.25;
  text-wrap: balance;
}

h1 {
  font-size: var(--text-h1);
}

h2 {
  font-size: var(--text-h2);
}

p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: var(--accent);
}

/* Le focus doit rester visible au clavier comme au doigt : c'est le seul repère
   qui survit à une main gantée qui rate sa cible. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.lede {
  max-width: 62ch;
  color: var(--text-muted);
}

.text-muted {
  color: var(--text-muted);
}

/* ------------------------------------------------------------------ formulaires (ST-BO-13, ST-BO-15) */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field label {
  font-weight: 600;
}

.field__control {
  min-height: var(--touch);
  width: 100%;
  max-width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--text-base);
}

.banner {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 2px solid currentcolor;
  border-radius: var(--radius);
  font-weight: 600;
}

.banner--error {
  color: var(--critical);
  background: #fff5f5;
}

.banner--warning {
  color: var(--state-warning);
  background: #fff8eb;
}

.banner--ok {
  color: var(--state-ok, #0b5b2c);
  background: #f0fff4;
}

.login-shell {
  min-height: 100dvh;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: var(--space-4);
  padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
}

.login-shell__main {
  width: min(100%, 28rem);
  margin: auto 0;
}

.login__brand {
  margin: 0;
  font-size: var(--text-h1);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
}

.login__form .btn {
  width: 100%;
}

.site-card__body {
  flex: 1 1 14rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.site-card__name {
  font-weight: 700;
  text-decoration: none;
  color: var(--text);
}

.site-card__stages {
  font-size: var(--text-small);
}

.stage-picker {
  margin: 0;
  padding: var(--space-4);
  border: 2px solid var(--border);
  border-radius: var(--radius);
}

.stage-picker__option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--touch);
  font-weight: 600;
}

.stage-picker__option input {
  width: 1.25rem;
  height: 1.25rem;
}

.dialog {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--space-4);
  padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  background: rgb(22 25 29 / 55%);
}

.dialog__panel {
  width: min(100%, 28rem);
  padding: var(--space-6);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  border: 2px solid var(--border-strong);
}

.dialog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--touch-gap);
}

.dialog__actions .btn {
  flex: 1 1 8rem;
}

/* ------------------------------------------------------------------ actions */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch);
  min-width: var(--touch);
  margin: 0;
  padding: 0 var(--space-4);
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-text);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.btn + .btn {
  margin-left: var(--touch-gap);
}

.btn--secondary {
  background: var(--surface);
  color: var(--accent);
}

/* Actions engageantes : plus grandes, et espacées de leurs voisines. Une frappe
   ratée sur « Valider les fouilles » a un coût chantier réel (ST-BO-13). */
.btn--critical {
  min-height: var(--touch-critical);
  min-width: var(--touch-critical);
  margin: var(--touch-gap);
  border-color: var(--critical);
  background: var(--critical);
  color: var(--critical-text);
}

/* ------------------------------------------------------------------ états */

/* Un état combine toujours une forme, un libellé et une couleur. Jamais la couleur
   seule : elle disparaît au soleil et pour un daltonien (ST-BO-14). */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border: 2px solid currentcolor;
  border-radius: 999px;
  font-size: var(--text-small);
  font-weight: 600;
  white-space: nowrap;
}

.pill--pending {
  color: var(--text-muted);
  border-style: dashed;
}

.pill--ok {
  color: var(--state-ok);
}

.pill--warning {
  color: var(--state-warning);
}

.pill--critical {
  color: var(--critical);
}

/* Confiance de calage : forme + libellé + couleur (ST-BO-14, ST-CORE-13). */
.confidence {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch);
  padding: var(--space-2) var(--space-4);
  border: 2px solid currentcolor;
  border-radius: var(--radius);
  font-weight: 700;
}

.confidence__shape {
  font-size: 1.25rem;
  line-height: 1;
}

.confidence--ok {
  color: var(--state-ok);
  background: #f0fff4;
}

.confidence--warning {
  color: var(--state-warning);
  background: #fff8eb;
}

.confidence--critical {
  color: var(--critical);
  background: #fff5f5;
}

.banner--indicative {
  color: var(--critical);
  background: #fff5f5;
  border-style: solid;
  font-size: 1.05rem;
}

/* ------------------------------------------------------------------ listes */

/* Sous 600 px, une liste de données devient une pile de cartes. Aucun tableau à
   défilement horizontal (ST-BO-18). */
.item-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--touch);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-sunken);
}

.item__label {
  flex: 1 1 14rem;
}

.trench-edit-list .trench-edit {
  display: block;
  align-items: stretch;
  min-height: 0;
}

.trench-edit__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.trench-edit__id {
  margin: 0;
  font-size: var(--text-h2);
}

.trench-edit__meta {
  font-size: var(--text-small);
}

.stage-settings__item {
  align-items: stretch;
}

.stage-settings__body {
  width: 100%;
}

.stage-settings__title {
  margin: 0;
  font-size: var(--text-h2);
}

/* ------------------------------------------------------------------ chargement */

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: var(--space-4);
}

.loading__text {
  color: var(--text-muted);
}

#blazor-error-ui {
  display: none;
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  padding: var(--space-4);
  padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom));
  background: var(--critical);
  color: var(--critical-text);
  text-align: center;
}

#blazor-error-ui .reload,
#blazor-error-ui .dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch);
  min-height: var(--touch);
  margin-left: var(--touch-gap);
  color: var(--critical-text);
}

/* Affichage live : cibles tactiles larges, zone pouce en bas (ST-BO-13, ST-BO-16). */
.touch-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--touch);
  padding: var(--space-2) 0;
  cursor: pointer;
}

.touch-toggle input {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.segmented {
  display: flex;
  flex-wrap: wrap;
  gap: var(--touch-gap);
}

.segmented .btn {
  flex: 1 1 6rem;
}

.field__control--range {
  width: 100%;
  min-height: var(--touch);
  padding: 0;
  accent-color: var(--accent);
}

.thumb-zone {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 2px solid var(--border);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}