/* =============================================================================
   Poste operateur — surcharges du socle (shared/tokens.css + shared/base.css).

   Poste fixe clavier/souris, mais application industrielle. L'information y
   est hierarchisee en trois niveaux :
     1. Vital, lisible a un metre : etat de la session, verdict de chute.
     2. Contexte de travail : titres de carte, faits de la session.
     3. Consultation : tables secondaires, en taille de lecture normale.
   ========================================================================== */

/* Pas de surcharge de jetons ici : l'echelle de ce poste est devenue celle du
   socle (tokens.css), pour que le SP Manager et l'IHM operateur aient
   exactement la meme taille. Ne restent ci-dessous que les composants propres
   au poste. */

main {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    max-width: 1600px;
    margin: 0 auto;
}

/* --- Zone 1 : etat du poste ------------------------------------------------ */

.card-hero {
    padding: var(--sp-5);
}

.hero-head {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    flex-wrap: wrap;
}

/* Niveau 1 : lisible sans se pencher. */
.hero-state {
    display: inline-block;
    padding: var(--sp-2) var(--sp-5);
    border-radius: var(--radius-md);
    font-size: var(--fs-hero);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    background: var(--c-neutral);
    white-space: nowrap;
}

.hero-state.state-closed      { background: #455a64; }
.hero-state.state-opening     { background: #f57c00; }
.hero-state.state-operational { background: var(--c-ok); }
.hero-state.state-closing     { background: #6d4c41; }
.hero-state.state-emergency   { background: var(--c-danger); animation: blink 1s step-start infinite; }

@keyframes blink { 50% { opacity: .4; } }

/* Niveau 2 : le contexte de la session. */
.hero-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--sp-3) var(--sp-5);
    flex: 1;
    min-width: 320px;
}

.hero-facts .kv { display: flex; flex-direction: column; }
.hero-facts .k {
    font-size: var(--fs-xs);
    color: var(--c-text-faint);
    text-transform: uppercase;
    letter-spacing: .5px;
}
.hero-facts .v { font-size: var(--fs-xl); font-weight: 500; }

.hero-actions {
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
    margin-top: var(--sp-4);
}
.hero-actions button {
    min-height: 56px;
    font-size: var(--fs-xl);
    padding: 0 var(--sp-5);
}
#btnEmergency { font-weight: 700; letter-spacing: 1px; margin-left: auto; }

#openForm { margin-top: var(--sp-4); }

/* --- Zones 2 et 3 ----------------------------------------------------------- */

.op-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: var(--sp-4);
    align-items: start;
}

/* Verdict : hauteur reservee pour que la page ne saute pas d'un scan a
   l'autre, et rappel du couple chute/conteneur — celui qui enchaine les
   scans doit pouvoir verifier que le verdict affiche est bien le sien. */
.verdict {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--sp-1);
    min-height: 120px;
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius-md);
    border-left: 6px solid var(--c-border-strong);
    background: var(--c-bg);
    margin-bottom: var(--sp-4);
}

.verdict-label {
    font-size: var(--fs-hero);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 1px;
}
.verdict-what { font-size: var(--fs-xl); }
.verdict-when { font-size: var(--fs-sm); color: var(--c-text-faint); }

.verdict-idle    .verdict-label { font-size: var(--fs-xl); color: var(--c-text-faint); font-weight: 400; }
.verdict-pending { border-left-color: var(--c-neutral); }
.verdict-pending .verdict-label { font-size: var(--fs-3xl); color: var(--c-text-muted); }
.verdict-ok      { border-left-color: var(--c-ok); background: var(--c-ok-bg); }
.verdict-ok      .verdict-label { color: var(--c-ok); }
/* Un refus n'est pas un avertissement : il est rouge, comme une erreur. */
.verdict-ko      { border-left-color: var(--c-danger); background: var(--c-danger-bg); }
.verdict-ko      .verdict-label { color: var(--c-danger); }
/* Ni autorisee ni refusee : la chute n'a pas ete verifiee du tout. */
.verdict-error   { border-left-color: var(--c-warn); background: var(--c-warn-bg); }
.verdict-error   .verdict-label { color: var(--c-warn); }

#btnChuteAuth.big {
    min-height: 56px;
    font-size: var(--fs-xl);
    padding: 0 var(--sp-6);
}

/* --- Lampes de chute -------------------------------------------------------- */

.lamp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: var(--sp-2);
}

.lamp {
    border-radius: var(--radius-md);
    padding: var(--sp-2);
    text-align: center;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
}
.lamp-num { font-weight: 700; font-size: var(--fs-xl); }
.lamp-mode { font-size: var(--fs-sm); font-weight: 500; margin-top: 2px; }
.lamp-reason { font-size: var(--fs-xs); color: var(--c-text-faint); margin-top: 2px; }

.lamp-mode-off    { background: #eceff1; border-color: #cfd8dc; }
.lamp-mode-off    .lamp-mode { color: #607d8b; }
.lamp-mode-solid  { background: var(--c-ok-bg); border-color: #a5d6a7; }
.lamp-mode-solid  .lamp-mode { color: var(--c-ok); }
.lamp-mode-blink1 { background: var(--c-warn-bg); border-color: #ffb74d; animation: blink 1s step-start infinite; }
.lamp-mode-blink1 .lamp-mode { color: var(--c-warn); font-weight: 600; }
.lamp-mode-blink2 { background: var(--c-danger-bg); border-color: #ef9a9a; animation: blink .5s step-start infinite; }
.lamp-mode-blink2 .lamp-mode { color: var(--c-danger); font-weight: 600; }

/* --- Zone 4 : consultation --------------------------------------------------- */

/* Les tables secondaires restent en taille de lecture : c'est de la
   consultation, pas un geste de production. */
#cardSecondary th, #cardSecondary td { font-size: var(--fs-sm); }

.tlist { list-style: none; padding: 0; margin: 0; font-size: var(--fs-sm); }
.tlist li { padding: var(--sp-1) 0; border-bottom: 1px dotted var(--c-border); }
.tlist li:last-child { border-bottom: none; }
.tlist .tstamp { color: var(--c-text-faint); font-family: var(--font-mono); margin-right: var(--sp-2); }
.tlist .arrow { font-weight: 600; margin-right: var(--sp-2); }

@media (max-width: 1100px) {
    .op-grid { grid-template-columns: 1fr; }
}