/* Console di catalogazione PressoCam (Blocco 4).
   Sobria di proposito: e' uno strumento di lavoro per stare due ore su una
   coda di conferme, non una vetrina. Contrasto alto, niente animazioni,
   niente colore che voglia dire qualcosa da solo (ogni stato porta sempre
   anche la sua parola). */

:root {
  --sfondo:      #11151a;
  --pannello:    #1a2029;
  --pannello-2:  #222a35;
  --bordo:       #2f3947;
  --testo:       #e7ecf2;
  --tenue:       #94a3b5;
  --ok:          #4ec98a;
  --attenzione:  #f0b429;
  --guasto:      #f2705d;
  --accento:     #63b3ed;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--sfondo);
  color: var(--testo);
  font: 15px/1.5 system-ui, "Segoe UI", Roboto, sans-serif;
}

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

/* ---- testata ---- */
.top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .7rem 1.1rem;
  background: var(--pannello); border-bottom: 1px solid var(--bordo);
  position: sticky; top: 0; z-index: 10;
}
.brand { font-weight: 700; letter-spacing: .06em; text-decoration: none; color: var(--testo); }
.brand span { color: var(--accento); }
.brand em { font: italic 400 .8rem/1 system-ui; color: var(--tenue); letter-spacing: 0; margin-left: .4rem; }
.who { display: flex; align-items: center; gap: .6rem; }
.pill {
  background: var(--pannello-2); border: 1px solid var(--bordo);
  border-radius: 999px; padding: .15rem .7rem; font-size: .85rem;
}
.esci { font-size: .85rem; color: var(--tenue); }

main { max-width: 1180px; margin: 0 auto; padding: 1.2rem 1.1rem 3rem; }
h1 { font-size: 1.35rem; margin: 0 0 .2rem; }
h2 { font-size: 1.05rem; margin: 0 0 .6rem; }
h3 { font-size: .92rem; margin: 1.1rem 0 .4rem; color: var(--tenue); text-transform: uppercase; letter-spacing: .05em; }

.hint  { color: var(--tenue); font-size: .87rem; margin: .25rem 0 .9rem; }
.tenue { color: var(--tenue); }
code, .mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .85em; }

/* ---- pannelli ---- */
.card {
  background: var(--pannello); border: 1px solid var(--bordo);
  border-radius: 10px; padding: 1rem 1.1rem; margin-bottom: 1rem;
}
.banner {
  padding: .7rem 1.1rem; font-size: .9rem;
  border-bottom: 1px solid var(--bordo);
}
.banner.attenzione { background: #3a2d10; color: #ffdf9e; }

/* ---- conteggi ---- */
.conteggi { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.conteggio {
  background: var(--pannello); border: 1px solid var(--bordo);
  border-radius: 8px; padding: .5rem .8rem; text-decoration: none; color: var(--testo);
  min-width: 7.5rem;
}
.conteggio.attivo { border-color: var(--accento); }
.conteggio b { display: block; font-size: 1.4rem; line-height: 1.1; }
.conteggio span { font-size: .78rem; color: var(--tenue); }

/* ---- tabelle ---- */
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .45rem .55rem; border-bottom: 1px solid var(--bordo); vertical-align: top; }
th { color: var(--tenue); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
tr:hover td { background: var(--pannello-2); }

.stato { font-size: .78rem; padding: .1rem .5rem; border-radius: 999px; border: 1px solid var(--bordo); white-space: nowrap; }
.stato.ok         { color: var(--ok);         border-color: var(--ok); }
.stato.attenzione { color: var(--attenzione); border-color: var(--attenzione); }
.stato.neutro     { color: var(--tenue); }

/* ---- moduli ---- */
input[type=text], input[type=password], select, textarea {
  background: var(--sfondo); color: var(--testo);
  border: 1px solid var(--bordo); border-radius: 6px; padding: .45rem .6rem;
  font: inherit;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accento); outline-offset: 1px; }
button {
  background: var(--accento); color: #0b1017; border: 0; border-radius: 6px;
  padding: .5rem .9rem; font: 600 .92rem/1 inherit; cursor: pointer;
}
button.secondario { background: var(--pannello-2); color: var(--testo); border: 1px solid var(--bordo); }
button:disabled { opacity: .5; cursor: progress; }

.filtri { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; margin-bottom: 1rem; }
.filtri label { display: block; font-size: .78rem; color: var(--tenue); margin-bottom: .2rem; }

/* ---- scheda passaggio ---- */
.foto { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .8rem; }
.foto figure { margin: 0; background: var(--pannello-2); border: 1px solid var(--bordo); border-radius: 8px; overflow: hidden; }
.foto img { display: block; width: 100%; height: auto; background: #000; }
.foto figcaption { padding: .45rem .6rem; font-size: .8rem; color: var(--tenue); }
.mancante { border-style: dashed; padding: 1.4rem .6rem; text-align: center; color: var(--attenzione); font-size: .85rem; }

.griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
dl.campi { display: grid; grid-template-columns: max-content 1fr; gap: .25rem .8rem; margin: 0; font-size: .88rem; }
dl.campi dt { color: var(--tenue); }
dl.campi dd { margin: 0; }

.azione-rapida { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; }
.azione-rapida input[type=text] { font-size: 1.3rem; width: 7rem; text-align: center; font-weight: 700; }

.verifica-riga { padding: .5rem 0; border-bottom: 1px solid var(--bordo); font-size: .88rem; }
.verifica-riga:last-child { border-bottom: 0; }
.verifica-riga b { display: block; }
.esito-ok     { color: var(--ok); }
.esito-guasto { color: var(--guasto); }
.esito-avviso { color: var(--attenzione); }

.storia { font-size: .87rem; }
.storia li { margin-bottom: .3rem; }

.foot {
  max-width: 1180px; margin: 0 auto; padding: 1rem 1.1rem 2rem;
  color: var(--tenue); font-size: .82rem; border-top: 1px solid var(--bordo);
}

.accesso { max-width: 22rem; margin: 3rem auto; }
.accesso label { display: block; margin: .8rem 0 .2rem; font-size: .85rem; color: var(--tenue); }
.accesso input { width: 100%; }
.accesso button { width: 100%; margin-top: 1rem; }
.errore { color: var(--guasto); font-size: .87rem; }