/* Portale di gestione. Foglio a sé: condivide il linguaggio visivo con l'app di
   postazione ma non il codice, perché sono due applicazioni con esigenze
   diverse — qui si legge e si configura, là si lavora in piedi. */

:root {
    --navy: #1e293b;
    --blu: #2563eb;
    --blu-scuro: #1d4ed8;
    --blu-tenue: #eff6ff;
    --rosso: #dc2626;
    --rosso-tenue: #fef2f2;
    --ambra: #b45309;
    --ambra-tenue: #fffbeb;
    --verde: #15803d;
    --verde-tenue: #f0fdf4;
    --bordo: #e5e7eb;
    --testo: #111827;
    --testo-tenue: #6b7280;
    --sfondo: #f3f4f6;
    --raggio: 8px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", system-ui, sans-serif;
    color: var(--testo);
    background: var(--sfondo);
    font-size: 14px;
}

h1 { font-size: 1.5rem; margin: 0 0 .2rem; }
h2 { font-size: 1.05rem; margin: 2rem 0 .75rem; }

code { font-family: Consolas, monospace; background: #fff; padding: .1rem .3rem; border-radius: 4px; }

/* ── Struttura ─────────────────────────────────────────────────────────── */

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

.menu {
    width: 220px;
    flex: 0 0 220px;
    background: var(--navy);
    color: #cbd5e1;
    display: flex;
    flex-direction: column;
    padding: 1.25rem 0;
}

.marchio { padding: 0 1.25rem 1.5rem; }
.marchio strong { display: block; color: #fff; font-size: 1.15rem; }
.marchio span { font-size: .75rem; color: #94a3b8; }

.menu nav { flex: 1; display: flex; flex-direction: column; }

.menu nav a {
    padding: .6rem 1.25rem;
    color: #cbd5e1;
    text-decoration: none;
    font-size: .9rem;
}

.menu nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.menu nav a.active { background: var(--blu); color: #fff; font-weight: 600; }

.utente { padding: 1rem 1.25rem 0; border-top: 1px solid rgba(255,255,255,.1); }
.utente .nome { color: #fff; font-size: .85rem; }
.utente .ruolo { font-size: .72rem; color: #94a3b8; margin-bottom: .5rem; }

main { flex: 1; padding: 2rem 2.5rem; max-width: 1200px; }

/* ── Riquadri di sintesi ───────────────────────────────────────────────── */

.riquadri { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 1.5rem; }

.riquadro {
    background: #fff;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: 1.1rem 1.25rem;
}

.riquadro.allarme { border-color: var(--rosso); background: var(--rosso-tenue); }
.riquadro.attenzione { border-color: #fcd34d; background: var(--ambra-tenue); }

.riquadro-etichetta { font-size: .75rem; font-weight: 600; color: var(--testo-tenue); text-transform: uppercase; letter-spacing: .02em; }
.riquadro-valore { font-size: 2rem; font-weight: 700; line-height: 1.3; }
.riquadro-nota { font-size: .75rem; color: var(--testo-tenue); }
.riquadro-nota.ambra { color: var(--ambra); font-weight: 600; }

/* ── Tabelle ───────────────────────────────────────────────────────────── */

.tabella { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--bordo); border-radius: var(--raggio); overflow: hidden; }
.tabella th, .tabella td { padding: .65rem .9rem; text-align: left; border-bottom: 1px solid var(--bordo); }
.tabella th { font-size: .72rem; text-transform: uppercase; color: var(--testo-tenue); background: #f9fafb; letter-spacing: .02em; }
.tabella tbody tr:last-child td { border-bottom: none; }

.badge { display: inline-block; padding: .1rem .5rem; border-radius: 20px; font-size: .72rem; font-weight: 600; }
.badge.verde { background: var(--verde-tenue); color: var(--verde); }
.badge.ambra { background: var(--ambra-tenue); color: var(--ambra); }
.badge.grigio { background: #f3f4f6; color: var(--testo-tenue); }

.sottotitolo { color: var(--testo-tenue); margin: 0 0 .5rem; }
.tenue { color: var(--testo-tenue); }
.mono { font-family: Consolas, monospace; font-size: .82rem; }

.vuoto { background: #fff; border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 2.5rem; text-align: center; color: var(--testo-tenue); }

/* ── Accesso ───────────────────────────────────────────────────────────── */

.schermata-accesso { min-height: 100vh; display: grid; place-items: center; background: var(--navy); }

.accesso { width: 380px; background: #fff; border-radius: 12px; padding: 2.25rem; }
.accesso-marchio { text-align: center; margin-bottom: 1.5rem; }
.accesso-marchio h1 { margin: 0; }
.accesso-marchio p { color: var(--testo-tenue); margin: .25rem 0 0; font-size: .85rem; }

.campo { display: flex; flex-direction: column; gap: .3rem; margin-bottom: 1rem; }
.campo-etichetta { font-size: .78rem; font-weight: 600; color: var(--testo-tenue); }
.campo-input { padding: .55rem .7rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: .9rem; font-family: inherit; }
.campo-input:focus { outline: 2px solid var(--blu); outline-offset: -1px; border-color: var(--blu); }
.campo-nota { font-size: .72rem; color: var(--testo-tenue); }

.btn-primario { padding: .55rem 1.1rem; border-radius: var(--raggio); font-size: .875rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; background: var(--blu); color: #fff; }
.btn-primario:hover { background: var(--blu-scuro); }
.btn-primario.largo { width: 100%; padding: .7rem; }

.btn-testo { background: none; border: none; color: #cbd5e1; cursor: pointer; padding: 0; font: inherit; text-decoration: underline; }
.btn-testo:hover { color: #fff; }

.avviso { padding: .7rem .9rem; border-radius: var(--raggio); font-size: .85rem; margin-bottom: 1rem; }
.avviso.rosso { background: var(--rosso-tenue); color: var(--rosso); border: 1px solid #fecaca; }

/* ── Testate di pagina e azioni ────────────────────────────────────────── */

.pagina-testa { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }

.menu-sezione { padding: 1.25rem 1.25rem .35rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: #64748b; }

.azioni { text-align: right; white-space: nowrap; }
.azioni button + button { margin-left: .35rem; }

.btn-secondario { padding: .55rem 1.1rem; border-radius: var(--raggio); font-size: .875rem; font-weight: 600; cursor: pointer; border: 1px solid var(--bordo); background: #fff; color: var(--testo); }
.btn-secondario:hover { background: #f9fafb; }
.btn-pericolo { padding: .55rem 1.1rem; border-radius: var(--raggio); font-size: .875rem; font-weight: 600; cursor: pointer; border: 1px solid #fecaca; background: var(--rosso-tenue); color: var(--rosso); }
.btn-piccolo { padding: .3rem .65rem; font-size: .78rem; }
.btn-testo.scuro { color: var(--blu); }

.avviso.verde { background: var(--verde-tenue); color: var(--verde); border: 1px solid #bbf7d0; }

/* ── Modali ────────────────────────────────────────────────────────────── */

.modale-sfondo { position: fixed; inset: 0; background: rgba(15,23,42,.55); display: grid; place-items: center; padding: 2rem; z-index: 20; }
.modale { background: #fff; border-radius: 12px; padding: 1.75rem; width: 640px; max-width: 100%; max-height: 90vh; overflow-y: auto; }
.modale h2 { margin-top: 0; }
.modale-azioni { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.25rem; }

.riga-campi { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
.riga-campi > .campo { flex: 1; min-width: 180px; }
.campo-corto { flex: 0 0 200px !important; max-width: 200px; }
.campo-cortissimo { flex: 0 0 90px !important; max-width: 90px; }

/* ── Token di postazione ───────────────────────────────────────────────── */

/* Colorato come un avviso e non come un successo: è un segreto a schermo, e
   chi lo vede deve sentire che c'è qualcosa da fare adesso. */
.token-emesso { background: var(--ambra-tenue); border: 1px solid #fcd34d; border-radius: var(--raggio); padding: 1.1rem 1.25rem; margin: 1.25rem 0; }
.token-emesso p { margin: .35rem 0 .75rem; font-size: .85rem; color: var(--ambra); }
.token { display: block; font-family: Consolas, monospace; font-size: .95rem; background: #fff; border: 1px solid var(--bordo); border-radius: 6px; padding: .7rem .9rem; word-break: break-all; margin-bottom: .75rem; user-select: all; }

.anteprima { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.anteprima img { max-height: 60px; max-width: 160px; border: 1px solid var(--bordo); border-radius: 4px; background: #fff; }

/* ── Risoluzione anagrafiche ───────────────────────────────────────────── */

/* Ogni caso è un blocco a sé: il confronto è fra il cliente di sinistra e i
   candidati sotto, e mescolarli in un'unica tabella renderebbe illeggibile a
   quale appartiene ciascun candidato. */
.risoluzione {
    background: #fff;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.risoluzione-testa {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: .9rem;
}

.risoluzione .tabella { border-color: var(--bordo); }

/* ── Spunte multiple ────────────────────────────────────────────────────────
   Usate per le aziende di operatori e postazioni. In colonna e non in riga:
   le ragioni sociali sono lunghe e affiancate andrebbero a capo male. */

.scelte {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    margin: .35rem 0 .2rem;
}

.scelta {
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
}

.scelta input { width: 1rem; height: 1rem; cursor: pointer; }

/* ── Sezioni della coda documenti ───────────────────────────────────────────
   I tre gruppi hanno destini diversi — chi va corretto, chi riparte da sé, chi
   è già passato — e il colore del titolo dice a colpo d'occhio quale sta
   chiedendo qualcosa. Senza, si leggerebbe riga per riga per scoprirlo. */

.sezione-titolo {
    font-size: 1rem;
    margin: 2rem 0 .25rem;
    padding-left: .6rem;
    border-left: 3px solid var(--bordo);
}

.sezione-titolo:first-of-type { margin-top: .5rem; }

.sezione-titolo.rosso { border-left-color: var(--rosso); }
.sezione-titolo.ambra { border-left-color: var(--ambra); }
.sezione-titolo.blu   { border-left-color: var(--blu); }
.sezione-titolo.verde { border-left-color: var(--verde); }

/* Il motivo di un rifiuto può essere una pagina intera di Business: in tabella
   sta su una riga sola, e il testo completo si apre in una finestra a parte.
   È un pulsante e non un testo perché si clicca, e deve dirlo. */
.motivo-tronco {
    display: block; max-width: 34ch; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    background: none; border: 0; padding: 0; font: inherit; color: var(--testo); cursor: pointer; text-align: left;
    border-bottom: 1px dotted var(--testo-tenue);
}
.motivo-tronco:hover { color: var(--blu); border-bottom-color: var(--blu); }

.motivo-completo {
    background: #f9fafb; border: 1px solid var(--bordo); border-radius: var(--raggio);
    padding: 1rem; max-height: 55vh; overflow: auto;
    font-family: Consolas, monospace; font-size: .8rem; white-space: pre-wrap; word-break: break-word; margin: 0;
}

/* Pulsante che sta lavorando: rotella al posto dell'etichetta, così si vede
   che il clic è stato preso anche quando Business ci mette qualche secondo. */
.rotella {
    display: inline-block; width: .8em; height: .8em; vertical-align: -.1em; margin-right: .4em;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    animation: rotella .7s linear infinite;
}
@keyframes rotella { to { transform: rotate(360deg); } }

.tabella tr.in-corso td { opacity: .6; }

.sezione-titolo + .sottotitolo { margin: 0 0 .9rem .6rem; }

/* ── Materiali ──────────────────────────────────────────────────────────────
   La barra dei filtri sta su una riga sola: azienda, ricerca e la spunta che
   nasconde ciò che non passa dalla pesa. Sono tre modi di restringere lo stesso
   elenco, e separarli su righe diverse li farebbe sembrare cose distinte. */

.filtri-materiali {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1rem;
}

.filtri-materiali .campo { margin-bottom: 0; }

/* Allineata alla base dei campi, non al loro centro: accanto a due controlli
   con l'etichetta sopra, una spunta centrata verticalmente sembra fuori posto. */
.scelta-filtro { padding-bottom: .55rem; white-space: nowrap; }

/* Strette quanto l'intestazione: sono spunte, e una colonna larga le lascerebbe
   perse in mezzo al bianco lontano dalla riga che governano. */
.colonna-spunta { width: 4rem; text-align: center; }
.colonna-spunta input { width: 1rem; height: 1rem; cursor: pointer; }

.riepilogo-materiali { margin-top: .75rem; font-size: .82rem; }

/* ── Registro ───────────────────────────────────────────────────────────────
   La barra dei filtri sta su una riga sola e va a capo da sé sugli schermi
   stretti: sono sei modi di restringere lo stesso elenco, e distribuirli su
   righe diverse li farebbe sembrare gruppi distinti. */

.filtri-registro {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem;
    margin-bottom: 1rem;
}

.filtri-registro .campo { margin-bottom: 0; }

/* Allineato alla base dei campi: accanto a controlli con l'etichetta sopra, un
   pulsante centrato verticalmente sembra fuori posto. */
.btn-filtro { margin-bottom: .1rem; }

/* L'ora non deve mai andare a capo: spezzata su due righe smette di leggersi
   come un istante. */
.nowrap { white-space: nowrap; }

.badge.rosso { background: var(--rosso-tenue); color: var(--rosso); }

/* Chiuso di suo. Una traccia di eccezione occupa mezzo schermo e serve a una
   riga su cento: aperta di default renderebbe illeggibile tutto il resto. */
.dettaglio-registro summary {
    cursor: pointer;
    font-size: .78rem;
    color: var(--testo-tenue);
    margin-top: .3rem;
}

.dettaglio-registro pre {
    margin: .4rem 0 0;
    padding: .6rem .7rem;
    background: #f8fafc;
    border: 1px solid var(--bordo);
    border-radius: 6px;
    font-size: .72rem;
    line-height: 1.45;
    max-height: 18rem;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.riepilogo-registro { margin-top: .75rem; font-size: .82rem; }

/* ── Approvazione dei documenti ────────────────────────────────────────────
   Il gruppo «Da approvare» è l'unico da cui passa tutto: da quando nulla va a
   Business da solo, queste righe sono il lavoro fermo in attesa dell'ufficio. */

.barra-azioni {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin: 0 0 .9rem .6rem;
}

/* Le novità del documento. Quelle che lo fermano hanno il contorno pieno:
   l'operatore deve distinguere a colpo d'occhio ciò che gli chiede un passo da
   ciò che è solo una notizia — su un vettore nuovo non c'è nulla da premere. */
.pastiglia {
    display: inline-block;
    margin: 0 .25rem .25rem 0;
    padding: .15rem .5rem;
    border: 1px solid var(--bordo);
    border-radius: 999px;
    background: #f9fafb;
    color: var(--testo-tenue);
    font-size: .75rem;
    white-space: nowrap;
}

.pastiglia.blocca {
    border-color: var(--ambra);
    background: var(--ambra-tenue);
    color: var(--ambra);
    font-weight: 600;
}

.tabella th.scelta, .tabella td.scelta { width: 44px; padding: 0; }

.cella-scelta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 40px;
    cursor: pointer;
}

.cella-scelta input[type="checkbox"] {
    width: 17px;
    height: 17px;
    cursor: pointer;
    accent-color: var(--blu);
}

.tabella tr.riga-scelta { background: var(--blu-tenue); }

/* ── La pastiglia degli avvisi nel menu ────────────────────────────────────
   Sta sotto la voce «Documenti» e dice quante bolle aspettano una persona. Si
   fa notare per venti secondi quando ne arriva una: se il risalto restasse,
   dopo mezza giornata sarebbe arredo e non vorrebbe più dire «guarda adesso». */

.avviso-documenti {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: .1rem 0 .4rem 1.4rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    background: var(--ambra-tenue);
    color: var(--ambra);
    font-size: .78rem;
    font-weight: 600;
    text-decoration: none;
    width: fit-content;
}

.avviso-conta {
    min-width: 1.3rem;
    padding: 0 .3rem;
    border-radius: 999px;
    background: var(--ambra);
    color: #fff;
    text-align: center;
}

.avviso-documenti.lampeggia { animation: avviso-pulsa 1.4s ease-in-out 6; }

@keyframes avviso-pulsa {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.07); }
}

/* Chi ha chiesto di non vedere animazioni non deve vederne: il risalto resta
   nel colore, che basta. */
@media (prefers-reduced-motion: reduce) {
    .avviso-documenti.lampeggia { animation: none; }
}

/* ── Estrazione del foglio e area utente ───────────────────────────────────── */

.testa-azioni { display: flex; flex-direction: column; gap: .6rem; align-items: flex-end; }

.estrazione {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.estrazione label { display: flex; align-items: center; gap: .3rem; font-size: .82rem; }

.estrazione input[type="date"] {
    padding: .35rem .5rem;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    font-size: .82rem;
}

/* ── Preferenze d'avviso ──────────────────────────────────────────────────── */

.riquadro-form {
    max-width: 640px;
    margin-bottom: 1.5rem;
    padding: 1.1rem 1.3rem;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    background: #fff;
}

.campi { display: flex; flex-direction: column; gap: .2rem; margin-bottom: 1rem; }

.campo { margin-bottom: 1rem; }
.campo > label { display: block; margin-bottom: .35rem; font-weight: 600; font-size: .85rem; }
.campo input[type="range"] { width: 100%; max-width: 320px; }

.scelta-riga {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .2rem;
    cursor: pointer;
}

.scelta-riga input[type="radio"], .scelta-riga input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--blu);
    cursor: pointer;
}

.scelta-nome { flex: 1; font-size: .9rem; }

.utente .btn-testo { display: block; margin-top: .4rem; }

/* ── Esportazione in un blocco apribile ───────────────────────────────────
   Si fa una volta al mese: chiusa di norma, cosi' non ruba la scena al lavoro
   di ogni giorno. */

.estrazione-blocco {
    margin: 0 0 1.2rem;
    padding: .5rem .9rem;
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    background: #fff;
}

.estrazione-blocco summary {
    cursor: pointer;
    font-size: .85rem;
    font-weight: 600;
    color: var(--testo-tenue);
}

.estrazione-blocco[open] summary { margin-bottom: .7rem; }

.filtro-pronti {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .82rem;
    color: var(--testo-tenue);
    cursor: pointer;
}

.filtro-pronti input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--blu);
    cursor: pointer;
}

/* Il peso non va mai spezzato: «7.680» su una riga e «kg» su quella sotto si
   legge come due dati invece che come uno. */
.tabella td.nowrap { white-space: nowrap; }