/*
 * MyLocker — design system
 *
 * CSS scritto a mano, senza passo di compilazione: niente Node, niente build
 * da eseguire a ogni rilascio, un file in meno che può rompersi.
 *
 * Tutto parte dai token qui sotto. Per cambiare l'aspetto si cambiano quelli,
 * non le singole regole.
 */

:root {
    /* Colori: un primario sobrio più i tre colori di stato */
    --colore-primario: #1f5f8b;
    --colore-primario-scuro: #17486a;
    --colore-primario-tenue: #e8f1f7;
    --colore-ok: #1d7a4c;
    --colore-attenzione: #9a6700;
    --colore-errore: #b3261e;

    --sfondo: #f6f7f9;
    --sfondo-scheda: #ffffff;
    --sfondo-tenue: #eef0f3;
    --bordo: #d7dbe0;
    --bordo-forte: #b4bbc4;

    --testo: #1b1f23;
    --testo-tenue: #5a636d;
    --testo-invertito: #ffffff;

    /* Spaziature su base 4 */
    --s1: 0.25rem;
    --s2: 0.5rem;
    --s3: 0.75rem;
    --s4: 1rem;
    --s5: 1.5rem;
    --s6: 2rem;
    --s7: 3rem;

    --raggio: 10px;
    --raggio-piccolo: 6px;
    --ombra: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.1);

    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* Numeri a larghezza fissa: importi e numeri di cassetto restano allineati */
    --font-numeri: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --larghezza-contenuto: 1200px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-tema="chiaro"]) {
        --colore-primario: #6aa9d0;
        --colore-primario-scuro: #8cc0e0;
        --colore-primario-tenue: #15232e;
        --colore-ok: #5cc48c;
        --colore-attenzione: #e0b341;
        --colore-errore: #f0837c;

        --sfondo: #14171a;
        --sfondo-scheda: #1c2023;
        --sfondo-tenue: #23282c;
        --bordo: #343a40;
        --bordo-forte: #4a525a;

        --testo: #e9edf1;
        --testo-tenue: #a3adb8;
        --testo-invertito: #14171a;

        --ombra: 0 1px 2px rgba(0, 0, 0, 0.4);
    }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.55;
    color: var(--testo);
    background: var(--sfondo);
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 var(--s3); font-weight: 650; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 var(--s4); }

a { color: var(--colore-primario); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--colore-primario-scuro); }

/* Messa a fuoco sempre visibile: requisito di accessibilità, non un dettaglio */
:focus-visible {
    outline: 2px solid var(--colore-primario);
    outline-offset: 2px;
    border-radius: var(--raggio-piccolo);
}

/* ---------------------------------------------------------------- struttura */

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

.barra-laterale {
    flex: 0 0 240px;
    background: var(--sfondo-scheda);
    border-right: 1px solid var(--bordo);
    padding: var(--s4);
    display: flex;
    flex-direction: column;
    gap: var(--s5);
}

.marchio {
    display: flex;
    align-items: center;
    gap: var(--s2);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--testo);
    text-decoration: none;
}
.marchio .icona { color: var(--colore-primario); }

.navigazione { display: flex; flex-direction: column; gap: var(--s1); }
.navigazione a {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s2) var(--s3);
    border-radius: var(--raggio-piccolo);
    color: var(--testo-tenue);
    text-decoration: none;
    font-size: 0.94rem;
}
.navigazione a:hover { background: var(--sfondo-tenue); color: var(--testo); }
/* Parte bassa della barra: profilo e uscita, con lo stesso aspetto delle voci */
.barra-laterale .profilo { font-size: 0.85rem; color: var(--testo-tenue); }
.barra-laterale .piede {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: var(--s3);
}

.navigazione a[aria-current="page"] {
    background: var(--colore-primario-tenue);
    color: var(--colore-primario-scuro);
    font-weight: 600;
}

.contenuto { flex: 1 1 auto; min-width: 0; padding: var(--s5); }
.contenuto > .intestazione {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s4);
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--s5);
}
.contenuto-centrato {
    max-width: var(--larghezza-contenuto);
    margin: 0 auto;
    padding: var(--s5) var(--s4);
}

/* Su schermi stretti la barra laterale diventa una striscia in alto:
   marchio e uscita sulla prima riga, voci di navigazione scorrevoli sotto. */
@media (max-width: 820px) {
    .guscio { flex-direction: column; }
    .barra-laterale {
        flex: none;
        border-right: 0;
        border-bottom: 1px solid var(--bordo);
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--s2) var(--s4);
        padding: var(--s3);
    }
    .barra-laterale .navigazione {
        order: 3;
        flex: 1 0 100%;
        flex-direction: row;
        overflow-x: auto;
        gap: var(--s1);
        padding-bottom: var(--s1);
    }
    .barra-laterale .navigazione a { white-space: nowrap; }
    .barra-laterale .piede {
        margin: 0 0 0 auto;
        flex-direction: row;
        align-items: center;
    }
    /* Su telefono basta l'uscita: nome e ruolo stanno già nella pagina */
    .barra-laterale .profilo { display: none; }
    .barra-laterale .piede .solo-desktop { display: none; }
    .contenuto { padding: var(--s4) var(--s3); }
}

/* ---------------------------------------------------------------- componenti */

.scheda {
    background: var(--sfondo-scheda);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
    padding: var(--s5);
}
.scheda + .scheda { margin-top: var(--s4); }
/* In una griglia lo spazio lo dà il gap: senza questa regola la seconda scheda
   e le successive risultano spostate in basso rispetto alla prima. */
.griglia > .scheda + .scheda { margin-top: 0; }
/* ...ma una griglia seguita da una scheda deve lasciare respiro. */
.griglia + .scheda, .griglia + .griglia { margin-top: var(--s4); }

.griglia {
    display: grid;
    gap: var(--s4);
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    align-items: stretch;
}

.riquadro-dato { display: flex; flex-direction: column; gap: var(--s1); }
.riquadro-dato .etichetta {
    font-size: 0.82rem;
    color: var(--testo-tenue);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.riquadro-dato .valore {
    font-family: var(--font-numeri);
    font-size: 1.8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Pulsanti: target minimo 44 px, come richiede l'uso su touch */
.pulsante {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    min-height: 44px;
    padding: var(--s2) var(--s4);
    border: 1px solid transparent;
    border-radius: var(--raggio-piccolo);
    background: var(--colore-primario);
    color: var(--testo-invertito);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.pulsante:hover { background: var(--colore-primario-scuro); color: var(--testo-invertito); }
.pulsante[disabled] { opacity: 0.55; cursor: not-allowed; }
.pulsante.secondario {
    background: var(--sfondo-scheda);
    border-color: var(--bordo-forte);
    color: var(--testo);
}
.pulsante.secondario:hover { background: var(--sfondo-tenue); color: var(--testo); }
.pulsante.pericolo { background: var(--colore-errore); }
.pulsante.largo { width: 100%; }

/* Moduli */
.campo { margin-bottom: var(--s4); }
.campo label { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: var(--s1); }
.campo .aiuto { font-size: 0.85rem; color: var(--testo-tenue); margin-top: var(--s1); }

input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], select, textarea {
    width: 100%;
    min-height: 44px;
    padding: var(--s2) var(--s3);
    border: 1px solid var(--bordo-forte);
    border-radius: var(--raggio-piccolo);
    background: var(--sfondo-scheda);
    color: var(--testo);
    font: inherit;
}
input:focus, select:focus, textarea:focus { border-color: var(--colore-primario); }
input[aria-invalid="true"] { border-color: var(--colore-errore); }

.errore-campo { color: var(--colore-errore); font-size: 0.88rem; margin-top: var(--s1); }

/* Avvisi */
.avviso {
    display: flex;
    gap: var(--s3);
    padding: var(--s3) var(--s4);
    border: 1px solid var(--bordo);
    border-left-width: 4px;
    border-radius: var(--raggio-piccolo);
    background: var(--sfondo-scheda);
    margin-bottom: var(--s4);
}
.avviso .icona { flex: none; margin-top: 2px; }
.avviso.ok { border-left-color: var(--colore-ok); }
.avviso.ok .icona { color: var(--colore-ok); }
.avviso.attenzione { border-left-color: var(--colore-attenzione); }
.avviso.attenzione .icona { color: var(--colore-attenzione); }
.avviso.errore { border-left-color: var(--colore-errore); }
.avviso.errore .icona { color: var(--colore-errore); }
.avviso p:last-child { margin-bottom: 0; }

/* Etichette di stato */
.stato {
    display: inline-flex;
    align-items: center;
    gap: var(--s1);
    padding: 2px var(--s2);
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    background: var(--sfondo-tenue);
    color: var(--testo-tenue);
}
.stato.ok { background: color-mix(in srgb, var(--colore-ok) 14%, transparent); color: var(--colore-ok); }
.stato.attenzione { background: color-mix(in srgb, var(--colore-attenzione) 16%, transparent); color: var(--colore-attenzione); }
.stato.errore { background: color-mix(in srgb, var(--colore-errore) 14%, transparent); color: var(--colore-errore); }

/* Tabelle */
.tabella { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.tabella th, .tabella td { padding: var(--s3); text-align: left; border-bottom: 1px solid var(--bordo); }
.tabella th { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--testo-tenue); }
.tabella td.numero { font-family: var(--font-numeri); font-variant-numeric: tabular-nums; }
.tabella tbody tr:hover { background: var(--sfondo-tenue); }

/* Icone: SVG in linea, nessun font esterno da scaricare */
.icona { width: 20px; height: 20px; flex: none; stroke-width: 1.8; }
.icona.grande { width: 28px; height: 28px; }

/* Accesso e altre pagine a scheda singola */
.pagina-stretta {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--s4);
}
.pagina-stretta .scheda { width: 100%; max-width: 420px; }
.pagina-stretta .marchio { justify-content: center; margin-bottom: var(--s5); }

.pie-pagina {
    margin-top: var(--s6);
    padding-top: var(--s4);
    border-top: 1px solid var(--bordo);
    font-size: 0.85rem;
    color: var(--testo-tenue);
}

.vuoto { text-align: center; color: var(--testo-tenue); padding: var(--s6) var(--s4); }

/* Utilità minime, non una libreria */
.tenue { color: var(--testo-tenue); }
.numeri { font-family: var(--font-numeri); font-variant-numeric: tabular-nums; }
.pila { display: flex; flex-direction: column; gap: var(--s3); }
.fila { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.solo-lettori-schermo {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- modulo ordine */

.scheda-interna {
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-piccolo);
    padding: var(--s4);
    background: var(--sfondo);
}

.riga-ordine {
    display: grid;
    gap: var(--s3);
    align-items: end;
    grid-template-columns: minmax(150px, 2fr) minmax(150px, 2fr) 90px minmax(0, 1.6fr) minmax(70px, auto) auto;
}
.riga-ordine .campo { margin: 0; }
.riga-ordine .campo[hidden] { display: none; }
.riga-ordine .importo-riga { text-align: right; min-height: 44px; display: flex; align-items: center; justify-content: flex-end; }

@media (max-width: 820px) {
    .riga-ordine { grid-template-columns: 1fr 1fr; }
    .riga-ordine .campo-macchia, .riga-ordine .importo-riga, .riga-ordine .rimuovi { grid-column: 1 / -1; }
    .riga-ordine .importo-riga { justify-content: flex-start; min-height: 0; }
}

/* Opzione con pulsante di scelta: tutta la riga è cliccabile, area minima 44 px */
.opzione {
    display: flex;
    gap: var(--s3);
    align-items: flex-start;
    padding: var(--s3) var(--s4);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-piccolo);
    cursor: pointer;
    min-height: 44px;
}
.opzione:hover { background: var(--sfondo-tenue); }
.opzione:has(input:checked) { border-color: var(--colore-primario); background: var(--colore-primario-tenue); }
.opzione input[type="radio"] { width: 20px; height: 20px; min-height: 0; margin-top: 3px; flex: none; }

.tabella-scorrevole { overflow-x: auto; }
.tabella .numero { text-align: right; }

.storia { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.storia li { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: baseline; }

[hidden] { display: none !important; }

/* ---- Operatore: pulsanti grandi per l'uso al touchscreen ---- */
.azioni-grandi { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s3); }
.azioni-grandi form { margin: 0; }
.azioni-grandi .pulsante { width: 100%; min-height: 64px; font-size: 1.1rem; justify-content: center; }
.codice-grande {
    font-family: var(--font-numeri, ui-monospace, monospace);
    font-size: clamp(2rem, 8vw, 3.5rem);
    letter-spacing: 0.12em;
    font-weight: 700;
}
.barra-tempo { height: 8px; border-radius: 4px; background: var(--sfondo-tenue); overflow: hidden; }
.barra-tempo > span { display: block; height: 100%; background: var(--colore-primario); transition: width 1s linear; }
.tabella .cliccabile { cursor: pointer; }
.paginazione { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s3); }
.campo-riga-verifica { display: grid; grid-template-columns: 1fr 7rem 14rem; gap: var(--s3); align-items: end; padding: var(--s3) 0; border-bottom: 1px solid var(--bordo, #d0d7de); }
@media (max-width: 40rem) { .campo-riga-verifica { grid-template-columns: 1fr; } }

/* ---- elenco di dettagli (etichetta e valore) ---- */
.dettagli { display: grid; grid-template-columns: max-content 1fr; gap: var(--s2) var(--s4); margin: 0; }
.dettagli dt { font-weight: 600; color: var(--testo-tenue); }
.dettagli dd { margin: 0; }
@media (max-width: 40rem) { .dettagli { grid-template-columns: 1fr; gap: 0; } .dettagli dd { margin-bottom: var(--s2); } }