/*
 * ─────────────────────────────────────────────────────────────────────
 *  eMaga — Gestionale di Magazzino
 *  © 2026 — Tutti i diritti riservati. Autore: Di Matteo Salvatore
 * ─────────────────────────────────────────────────────────────────────
 *  Un foglio di stile scritto a mano, senza framework: le pagine di un
 *  gestionale sono tabelle e moduli, e per tabelle e moduli duecento
 *  righe bastano. Niente da aggiornare, niente da scaricare da fuori.
 *
 *  Le quantità sono allineate a destra e in carattere a larghezza fissa:
 *  una colonna di numeri si legge per confronto, e con un carattere
 *  proporzionale le cifre non stanno in colonna.
 * ─────────────────────────────────────────────────────────────────────
 */

:root {
    --barra-scura: #1e293b;
    --barra-bordo: #334155;
    --barra-testo: #cbd5e1;
    --barra-tenue: #94a3b8;
    --barra-larga: 15.5rem;
    --barra-stretta: 4.5rem;
    --inchiostro: #1c2024;
    --tenue: #697079;
    --bordo: #dcdfe3;
    --fondo: #f6f7f9;
    --carta: #ffffff;
    --accento: #1f5fa8;
    --accento-chiaro: #eaf1fa;
    --verde: #1d6b3f;
    --verde-chiaro: #e8f4ec;
    --rosso: #a3262b;
    --rosso-chiaro: #fbeced;
    --ambra: #8a5a00;
    --ambra-chiaro: #fdf3e0;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--inchiostro);
    background: var(--fondo);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ── Menù verticale ────────────────────────────────────────────────── *
 * Stessa impostazione di eLabour: barra scura a sinistra, alta quanto
 * la finestra, con i gruppi apribili e una modalità ridotta a sole
 * icone che resta ricordata fra una visita e l'altra.
 *
 * Qui i gruppi sono <details>/<summary>: aprire e chiudere lo fa il
 * browser, senza una riga di codice e senza librerie.
 * ─────────────────────────────────────────────────────────────────── */

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

.principale { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.principale > main { flex: 1; }

.barra {
    width: var(--barra-larga);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100vh;
}

.barra-dentro {
    background: var(--barra-scura);
    color: var(--barra-testo);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.barra-testa {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem .75rem 1.1rem;
}

.logo {
    display: flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #fff;
    white-space: nowrap;
}

.logo .segno-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 22%;
    background: var(--accento);
    color: #fff;
    font-size: .8rem;
    flex-shrink: 0;
}

.logo .nome { color: #93c5fd; }
.logo .nome b { color: #fff; font-weight: inherit; }

.chiudi-barra {
    display: none;
    border: 0;
    background: none;
    color: var(--barra-tenue);
    font-size: 1.6rem;
    line-height: 1;
    padding: 0 .3rem;
    cursor: pointer;
}

.barra-contesto { padding: 0 1rem .75rem; }

.barra-contesto .azienda {
    display: block;
    font-size: .85rem;
    color: var(--barra-testo);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.barra-menu { flex: 1; overflow-y: auto; padding: .25rem .6rem 1rem; }
.barra-menu::-webkit-scrollbar { width: 6px; }
.barra-menu::-webkit-scrollbar-thumb { background: var(--barra-bordo); border-radius: 3px; }

.voce {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .45rem .6rem;
    margin-bottom: 1px;
    border-radius: .4rem;
    color: var(--barra-testo);
    text-decoration: none;
    font-size: .9rem;
    white-space: nowrap;
}

.voce .icona { width: 1.25rem; text-align: center; flex-shrink: 0; font-size: 1rem; }
.voce:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.voce.attiva { background: var(--accento); color: #fff; }

/*  Le voci ancora da costruire: si vedono, non si cliccano. Dire che
    cosa manca è più utile che far finta che il programma sia finito. */
.voce.spenta { color: #64748b; cursor: default; }
.voce.spenta:hover { background: none; color: #64748b; }

.voce .arrivo {
    margin-left: auto;
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #64748b;
    border: 1px solid var(--barra-bordo);
    border-radius: 3px;
    padding: 0 .25rem;
}

.gruppo { margin-top: .5rem; }

.gruppo-titolo {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .45rem .6rem;
    border-radius: .4rem;
    color: var(--barra-tenue);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    cursor: pointer;
    list-style: none;
}

.gruppo-titolo::-webkit-details-marker { display: none; }
.gruppo-titolo:hover { color: #fff; }
.gruppo-titolo .icona { width: 1.25rem; text-align: center; font-size: 1rem; }
.gruppo-titolo::after { content: "▾"; margin-left: auto; font-size: .7rem; transition: transform .15s; }
.gruppo:not([open]) .gruppo-titolo::after { transform: rotate(-90deg); }
.gruppo .voce { padding-left: 1.1rem; font-size: .85rem; }

.barra-piede { border-top: 1px solid var(--barra-bordo); padding: .5rem .6rem; }

.riduci {
    display: flex;
    align-items: center;
    gap: .7rem;
    width: 100%;
    padding: .45rem .6rem;
    border: 0;
    background: none;
    color: var(--barra-tenue);
    font: inherit;
    font-size: .8rem;
    font-weight: 400;
    cursor: pointer;
    border-radius: .4rem;
}

.riduci:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.riduci .icona { width: 1.25rem; text-align: center; }

/* ── Barra ridotta: solo icone ─────────────────────────────────────── */

html.barra-ridotta .barra { width: var(--barra-stretta); }

html.barra-ridotta .etichetta,
html.barra-ridotta .arrivo,
html.barra-ridotta .barra-contesto,
html.barra-ridotta .logo > .nome { display: none; }

html.barra-ridotta .barra-testa { justify-content: center; padding-left: 0; padding-right: 0; }
html.barra-ridotta .voce { justify-content: center; }
html.barra-ridotta .gruppo-titolo { justify-content: center; padding: .25rem; }
html.barra-ridotta .gruppo-titolo::after { display: none; }
html.barra-ridotta .gruppo:not([open]) .voce { display: flex; }   /* ridotta: i gruppi non si chiudono */
html.barra-ridotta .gruppo { border-top: 1px solid var(--barra-bordo); margin: .5rem .2rem 0; padding-top: .3rem; }
html.barra-ridotta .gruppo .voce { padding-left: .6rem; }
html.barra-ridotta .riduci { justify-content: center; }
html.barra-ridotta .riduci .icona { transform: rotate(180deg); }

/* ── Testata sopra la pagina ───────────────────────────────────────── */

.testata {
    background: var(--carta);
    border-bottom: 1px solid var(--bordo);
    padding: .6rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 20;
}

.testata .apri-barra {
    display: none;
    border: 0;
    background: none;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--barra-scura);
    padding: 0 .25rem;
    cursor: pointer;
}

.testata .titolo-pagina { font-weight: 600; color: var(--inchiostro); }

.utente { display: flex; align-items: baseline; gap: .6rem; font-size: .85rem; margin-left: auto; }
.utente .nome { font-weight: 600; }
.utente .ruolo { color: var(--tenue); }
.utente .esci { color: var(--accento); text-decoration: none; margin-left: .4rem; }
.utente .esci:hover { text-decoration: underline; }

/* ── Telefono e tavoletta: la barra si apre sopra la pagina ────────── */

.velo { display: none; }

@media (max-width: 991px) {
    .barra {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 40;
        transform: translateX(-100%);
        transition: transform .18s ease-out;
        box-shadow: 2px 0 12px rgba(0, 0, 0, .25);
    }

    html.barra-aperta .barra { transform: none; }

    html.barra-aperta .velo {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 30;
        background: rgba(15, 23, 42, .45);
    }

    .chiudi-barra { display: block; }
    .testata .apri-barra { display: block; }
    .barra-piede { display: none; }          /* ridurre non ha senso su uno schermo stretto */

    html.barra-ridotta .barra { width: var(--barra-larga); }
    html.barra-ridotta .etichetta,
    html.barra-ridotta .arrivo,
    html.barra-ridotta .barra-contesto,
    html.barra-ridotta .logo > .nome { display: revert; }
}

/* ── Impaginazione ─────────────────────────────────────────────────── */

main { width: 100%; max-width: 1400px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }

/*  Le pagine senza barra (accesso, avvio, cambio password imposto) non
    hanno il guscio: lì è <main> a riempire l'altezza. */
body.senza-barra > main { flex: 1; }

main.centrata {
    max-width: 440px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 4rem;
}

footer {
    padding: 1rem 1.25rem;
    font-size: .8rem;
    color: var(--tenue);
    border-top: 1px solid var(--bordo);
    background: var(--carta);
}

h1 { font-size: 1.4rem; margin: 0 0 .25rem; font-weight: 600; }
h2 { font-size: 1.05rem; margin: 2rem 0 .6rem; font-weight: 600; }
.sottotitolo { color: var(--tenue); margin: 0 0 1.5rem; }

/* ── Messaggi ──────────────────────────────────────────────────────── */

.avviso, .errore, .nota {
    padding: .7rem .9rem;
    border-radius: 4px;
    border: 1px solid;
    margin: 0 0 1.25rem;
}

.avviso { background: var(--verde-chiaro); border-color: #bcdcc7; color: var(--verde); }
.errore { background: var(--rosso-chiaro); border-color: #eec4c6; color: var(--rosso); }
.nota   { background: var(--ambra-chiaro); border-color: #ecd9ab; color: var(--ambra); }

/* ── Riquadri del cruscotto ────────────────────────────────────────── */

.riquadri {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: .9rem;
    margin-bottom: 1rem;
}

.riquadro {
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: 6px;
    padding: .9rem 1rem;
}

.riquadro .etichetta { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tenue); }
.riquadro .valore { font-size: 1.7rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.riquadro .nota-piccola { font-size: .78rem; color: var(--tenue); }

.riquadro.allarme { border-color: #eec4c6; background: var(--rosso-chiaro); }
.riquadro.allarme .valore { color: var(--rosso); }
.riquadro.attenzione { border-color: #ecd9ab; background: var(--ambra-chiaro); }
.riquadro.attenzione .valore { color: var(--ambra); }

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

.tabella {
    width: 100%;
    border-collapse: collapse;
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: 6px;
    overflow: hidden;
    font-size: .9rem;
}

.tabella th, .tabella td { padding: .5rem .7rem; text-align: left; border-bottom: 1px solid var(--bordo); }

.tabella thead th {
    background: #f0f2f5;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--tenue);
    font-weight: 600;
    white-space: nowrap;
}

.tabella tbody tr:last-child td { border-bottom: none; }
.tabella tbody tr:hover { background: var(--accento-chiaro); }

.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-family: Consolas, "Cascadia Mono", monospace;
    white-space: nowrap;
}

.negativo { color: var(--rosso); font-weight: 600; }
.tabella tfoot td { background: #f0f2f5; font-weight: 600; border-top: 2px solid var(--bordo); }

.vuoto { padding: 2.5rem 1rem; text-align: center; color: var(--tenue); background: var(--carta);
         border: 1px dashed var(--bordo); border-radius: 6px; }

/* ── Etichette ─────────────────────────────────────────────────────── */

.segno {
    display: inline-block;
    min-width: 4.5rem;
    text-align: center;
    padding: .1rem .45rem;
    border-radius: 3px;
    font-size: .78rem;
    font-weight: 600;
}

.segno.carico  { background: var(--verde-chiaro); color: var(--verde); }
.segno.scarico { background: var(--rosso-chiaro); color: var(--rosso); }

.marca {
    display: inline-block;
    padding: .05rem .4rem;
    border: 1px solid var(--bordo);
    border-radius: 3px;
    font-size: .74rem;
    color: var(--tenue);
    background: var(--fondo);
}

.marca.pericolo { background: var(--ambra-chiaro); border-color: #ecd9ab; color: var(--ambra); }
.marca.storno { background: var(--rosso-chiaro); border-color: #eec4c6; color: var(--rosso); }

/* ── Moduli ────────────────────────────────────────────────────────── */

.scheda {
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: 6px;
    padding: 1.5rem;
}

.campo { margin-bottom: 1rem; }
.campo label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .25rem; }
.campo .aiuto { font-size: .8rem; color: var(--tenue); margin-top: .2rem; }

input[type=text], input[type=password], input[type=email], input[type=number],
input[type=date], select, textarea {
    width: 100%;
    padding: .45rem .55rem;
    font: inherit;
    color: inherit;
    background: var(--carta);
    border: 1px solid #c3c8ce;
    border-radius: 4px;
}

input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--accento);
    outline-offset: -1px;
    border-color: var(--accento);
}

.griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1rem; }

button, .bottone {
    display: inline-block;
    padding: .45rem 1rem;
    font: inherit;
    font-weight: 600;
    color: #fff;
    background: var(--accento);
    border: 1px solid var(--accento);
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
}

button:hover, .bottone:hover { background: #18497f; }

.bottone.tenue, button.tenue {
    color: var(--inchiostro);
    background: var(--carta);
    border-color: #c3c8ce;
}

.bottone.tenue:hover, button.tenue:hover { background: var(--fondo); }

button.rischio { background: var(--rosso); border-color: var(--rosso); }
button.rischio:hover { background: #871f23; }

.azioni { display: flex; gap: .6rem; align-items: center; margin-top: 1.25rem; }

/* ── Filtri sopra le tabelle ───────────────────────────────────────── */

.filtri {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: center;
    margin-bottom: 1rem;
    padding: .75rem .9rem;
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: 6px;
}

.filtri input[type=text], .filtri select { width: auto; min-width: 190px; }
.filtri label { font-size: .85rem; display: flex; align-items: center; gap: .3rem; }
.filtri .spinta { margin-left: auto; }

.conteggio { font-size: .85rem; color: var(--tenue); margin: .75rem 0 0; }

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

/* ── L'albero dei luoghi ─────────────────────────────────────────────
   Due classi sole, perché l'albero non ha bisogno di più: il rientro lo
   decide la pagina (un passo per livello) e qui serve solo distinguere
   la riga che apre una sede e il testo di servizio accanto al nome. */

.riga-gruppo td {
    background: #f0f2f5;
    border-bottom: 2px solid var(--bordo);
    font-size: .9rem;
    letter-spacing: .02em;
}

/*  Non si chiama .tenue: quella classe esiste gia' sui pulsanti
    (.bottone.tenue) e cambiarne il corpo rimpicciolirebbe ogni
    "Annulla" del programma. */
.sottotono {
    color: var(--tenue);
    font-weight: 400;
    font-size: .9em;
}

/* ── La guida della pagina ───────────────────────────────────────────
   La (i) accanto al titolo apre un pannello laterale con la guida,
   come in eLabour. Lì è l'offcanvas di Bootstrap; qui Bootstrap non
   c'è, e non vale la pena caricarlo per un pannello: sono due classi
   e un velo, con lo stesso meccanismo del menù. */

.testata .apri-guida {
    flex: 0 0 auto;
    width: 1.45rem;
    height: 1.45rem;
    margin-left: -.6rem;
    padding: 0;
    border: 1px solid var(--accento);
    border-radius: 50%;
    background: none;
    color: var(--accento);
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-weight: 700;
    font-size: .95rem;
    line-height: 1.3rem;
    cursor: pointer;
}

.testata .apri-guida:hover { background: var(--accento); color: #fff; }

.velo-guida { display: none; }

html.guida-aperta .velo-guida {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .35);
    z-index: 40;
}

.guida-pannello {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(30rem, 92vw);
    background: var(--carta);
    border-left: 1px solid var(--bordo);
    box-shadow: -2px 0 16px rgba(15, 23, 42, .12);
    z-index: 41;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .18s ease-out;
}

html.guida-aperta .guida-pannello { transform: translateX(0); }

.guida-testa {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .9rem 1.2rem;
    background: var(--barra-scura);
    color: #fff;
}

.guida-testa h2 { margin: 0; font-size: 1.05rem; color: #fff; }

.chiudi-guida {
    margin-left: auto;
    border: 0;
    background: none;
    color: var(--barra-testo);
    font-size: 1.5rem;
    line-height: 1;
    padding: 0 .25rem;
    cursor: pointer;
}

.chiudi-guida:hover { color: #fff; background: none; }

.guida-corpo {
    overflow-y: auto;
    padding: 1.1rem 1.2rem 2rem;
    font-size: .92rem;
    line-height: 1.55;
}

.guida-corpo h3 {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--tenue);
    margin: 1.4rem 0 .5rem;
}

.guida-corpo h3.attenzione { color: var(--ambra); }
.guida-corpo h3:first-child { margin-top: 0; }
.guida-corpo .guida-scopo { margin: 0; color: var(--inchiostro); }
.guida-corpo ul { margin: 0; padding-left: 1.2rem; }
.guida-corpo li { margin-bottom: .45rem; }
.guida-corpo strong { color: var(--inchiostro); }

@media print { .guida-pannello, .velo-guida, .apri-guida { display: none; } }

/* ── La casa (profilo Domestico) ─────────────────────────────────────
   L'avviso delle scadenze non è una tabella: è la prima cosa che chi
   apre la pagina deve vedere, e una tabella con due righe si legge
   peggio di un elenco. */

.avviso-scadenze {
    border-left: 4px solid var(--ambra);
    background: var(--ambra-chiaro);
}

.avviso-scadenze h2 { margin-top: 0; font-size: 1rem; color: var(--ambra); }
.avviso-scadenze ul { margin: 0; padding-left: 1.2rem; }
.avviso-scadenze li { margin-bottom: .35rem; }

/* ── Foto e allegati ─────────────────────────────────────────────────
   Riquadri affiancati, non una tabella: una foto si riconosce a
   colpo d'occhio, una riga di tabella no. */

.allegati {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    margin: 0 0 1rem;
}

.allegato {
    margin: 0;
    width: 11rem;
    border: 1px solid var(--bordo);
    border-radius: 6px;
    background: var(--carta);
    overflow: hidden;
}

.allegato.principale { border-color: var(--accento); box-shadow: 0 0 0 1px var(--accento); }

.allegato > a {
    display: block;
    height: 8rem;
    background: var(--fondo);
    text-decoration: none;
}

.allegato img { width: 100%; height: 100%; object-fit: cover; display: block; }

.allegato-documento {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--tenue);
}

.allegato figcaption {
    padding: .45rem .55rem .55rem;
    font-size: .82rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.allegato .nome {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.azioni-allegato { display: flex; gap: .6rem; }
.azioni-allegato form { display: inline; }

/* ── La chiave appena nata (Passo 6) ─────────────────────────────────
   Si vede una volta sola, quindi si vede BENE: a tutta larghezza, in
   un carattere in cui lo zero non si confonde con la O, e selezionabile
   con un gesto solo. Chi non la copia adesso la perde, e un testo
   stretto in un riquadro piccolo è il modo di farla copiare a metà. */

.chiave-nuova {
    border-left: 4px solid var(--verde);
    background: var(--verde-chiaro);
    max-width: 920px;
}

.chiave-testo {
    margin: .6rem 0;
    padding: .7rem .85rem;
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: 6px;
    font-family: Consolas, "Cascadia Mono", monospace;
    font-size: .92rem;
    white-space: pre-wrap;
    word-break: break-all;
    user-select: all;
}

/* La riga di esempio col curl: è un promemoria, non il segreto. */
.chiave-testo.tenuto {
    background: var(--fondo);
    font-size: .82rem;
    color: var(--tenue);
    user-select: text;
}