/* Stile del gestionale Ceramia WMS.
   Linguaggio "Dashnix": font Manrope, primario indigo, card bianche su fondo
   grigio-azzurro chiaro, sidebar chiara, stat-card con icone in chip tinta.
   Layout: sidebar a sinistra su desktop, barra in alto su mobile. */

@font-face {
    font-family: 'Manrope';
    src: url('/font/manrope.woff2') format('woff2');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --carbone: #171c2b;          /* superfici scure: scanner, tooltip, chip attiva */
    --carbone-chiaro: #232a3d;
    --osso: #eef0fd;             /* indigo tenue: pill attive, sfondi soft */
    --sabbia: #dfe3f2;
    --accento: #4f46e5;          /* indigo Dashnix */
    --accento-scuro: #4338ca;
    --primario: #4f46e5;         /* bottoni primari */
    --primario-scuro: #4338ca;
    --sfondo: #f2f4f9;
    --carta: #ffffff;
    --testo: #1f2430;
    --grigio: #6c7280;
    --bordo: #e6e9f2;
    --ombra: 0 1px 2px rgba(30, 37, 62, 0.04), 0 4px 16px rgba(30, 37, 62, 0.06);
    --raggio: 14px;
    --raggio-piccolo: 10px;
    --raggio-card: 12px;
    --ok: #2e7d32;
    --ok-sfondo: #e8f6ec;
    --avviso: #ff830f;
    --avviso-sfondo: #fff1e3;
    --errore: #c62828;
    --errore-sfondo: #fdecec;
}

* { box-sizing: border-box; }

html { height: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    font-family: 'Manrope', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--sfondo);
    color: var(--testo);
    font-size: 15.5px;
    line-height: 1.55;
}

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

h1, h2, .topbar-marchio a, .riquadro .valore, .scheda-partita-nome, .login-scheda h1 {
    font-family: 'Manrope', system-ui, sans-serif;
    font-weight: 700;
}

/* ---- Sidebar (desktop) ---- */
.topbar {
    grid-column: 1;
    grid-row: 1 / 3;
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    background: var(--carta);
    border-right: 1px solid var(--bordo);
    padding: 1.1rem 0.8rem;
    overflow-y: auto;
}

.topbar-marchio { padding: 0.2rem 0.6rem 1rem; }
.topbar-marchio a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--testo);
    text-decoration: none;
}
.topbar-marchio svg { width: 38px; height: auto; flex-shrink: 0; }
.topbar-marchio span { color: var(--accento); font-weight: 500; }

.topbar-nav { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.nav-voci { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.topbar-nav a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.85rem;
    border-radius: var(--raggio-piccolo);
    text-decoration: none;
    color: var(--grigio);
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.topbar-nav a svg { width: 19px; height: 19px; flex-shrink: 0; opacity: 0.75; }
.topbar-nav a.attiva svg, .topbar-nav a:hover svg { opacity: 1; }
.topbar-nav a:hover { background: var(--sfondo); color: var(--testo); }
.topbar-nav a.attiva {
    background: var(--osso);
    color: var(--accento);
    font-weight: 700;
}

.topbar-utente {
    margin-top: auto;
    padding: 0.8rem 0.85rem 0.2rem;
    border-top: 1px solid var(--bordo);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    color: var(--grigio);
    font-size: 0.9rem;
}
.topbar-utente a {
    color: var(--accento);
    text-decoration: none;
    font-weight: 700;
}
.topbar-utente a:hover { text-decoration: underline; }

/* Hamburger, icone rapide, testata/chiusura/uscita del drawer, sfondo: solo mobile */
.hamburger, .topbar-icone, .drawer-testata, .drawer-chiudi, .drawer-esci, .menu-sfondo { display: none; }

/* ---- Avatar utente (iniziali) e barra rapida ---- */
.avatar-iniziali {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--accento); color: #fff;
    font-weight: 700; font-size: 0.9rem; letter-spacing: 0.02em;
    user-select: none;
}
.avatar-link { text-decoration: none; display: inline-flex; border-radius: 50%; }
.avatar-link:hover .avatar-iniziali { background: var(--accento-scuro); }

/* Barra rapida in testa al contenuto (desktop): mappa, scanner, profilo */
.barra-rapida {
    display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem;
    margin: -0.4rem 0 0.6rem;
}
.rapida-bottone {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.45rem 0.95rem;
    background: var(--carta); border: 1px solid var(--bordo); border-radius: 999px;
    box-shadow: var(--ombra);
    color: var(--testo); text-decoration: none; font-weight: 600; font-size: 0.92rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.rapida-bottone:hover { border-color: var(--sabbia); box-shadow: 0 4px 16px rgba(30,37,62,0.10); }
.rapida-bottone svg { color: var(--accento); }

/* ---- Contenuto ---- */
.contenuto {
    grid-column: 2;
    width: 100%;
    max-width: 1160px;
    min-width: 0;
    margin: 0 auto;
    padding: 1.6rem 2rem 2rem;
}

h1 { font-size: 1.45rem; letter-spacing: -0.01em; margin: 0.2rem 0 1.2rem; }
h2 { font-size: 1.05rem; margin: 1.6rem 0 0.7rem; }

.pie {
    grid-column: 2;
    text-align: center;
    color: var(--grigio);
    font-size: 0.85rem;
    padding: 1rem 0 1.6rem;
}

/* ---- Messaggi flash ---- */
.flash {
    padding: 0.75rem 1.1rem;
    border-radius: var(--raggio-piccolo);
    margin-bottom: 1.1rem;
    font-weight: 500;
    box-shadow: var(--ombra);
}
.flash-ok { background: var(--ok-sfondo); color: var(--ok); }
.flash-errore { background: var(--errore-sfondo); color: var(--errore); }

/* ---- Tabelle ---- */
.tabella-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
}

table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td {
    text-align: left;
    padding: 0.65rem 0.9rem;
    border-bottom: 1px solid #eef0f6;
    white-space: nowrap;
}
th {
    background: #f8f9fc;
    font-weight: 600;
    color: var(--grigio);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
tr:last-child td { border-bottom: none; }
tbody tr, table tr { transition: background 0.1s; }
tr:hover td { background: #f7f8fc; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

.foto-mini { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; display: block; }

/* ---- Card / form ---- */
form.scheda, .scheda {
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
    padding: 1.4rem;
    max-width: 660px;
}

label { display: block; font-weight: 600; font-size: 0.85rem; margin: 0.9rem 0 0.3rem; }
label .facolt { font-weight: 400; color: var(--grigio); }

input[type="text"], input[type="search"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="file"], select, textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1.5px solid var(--bordo);
    border-radius: var(--raggio-piccolo);
    font: inherit;
    font-size: 16px; /* mai sotto i 16px: iOS altrimenti zooma la pagina al focus */
    color: inherit;
    background: #f9fafc;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    background: #fff;
    border-color: var(--accento);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}

.campi-riga { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; }
.campi-riga > div { flex: 1; min-width: 150px; }
.campi-riga > .campo-2x { flex: 2; min-width: 260px; }

/* Form lunghi divisi in sezioni con titoletto (es. Carico merce) */
.form-sezione + .form-sezione { margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--bordo); }
.form-sezione-titolo {
    margin: 0 0 0.1rem; font-size: 0.75rem; font-weight: 700;
    letter-spacing: 0.07em; text-transform: uppercase; color: var(--grigio);
}
.form-sezione-titolo .facolt { text-transform: none; letter-spacing: 0; font-weight: 400; }

/* Scarico: scatole scaricabili in evidenza per la posizione scelta */
.disp-scarico {
    display: flex; align-items: baseline; gap: 0.45rem; flex-wrap: wrap;
    margin-top: 0.7rem; padding: 0.65rem 0.9rem;
    background: rgba(40, 167, 69, 0.08); border: 1px solid rgba(40, 167, 69, 0.35);
    border-radius: 10px;
}
.disp-scarico strong { font-size: 1.45rem; letter-spacing: -0.01em; color: #1d7a34; }
.disp-scarico[hidden] { display: none; }
.disp-impegnate { flex-basis: 100%; color: #b45309; font-weight: 600; font-size: 0.85rem; }
.disp-impegnate[hidden] { display: none; }

/* Su schermi stretti i campi vanno uno per riga: più chiari e più presa */
@media (max-width: 560px) {
    .campi-riga { gap: 0 1rem; }
    .campi-riga > div, .campi-riga > .campo-2x { flex-basis: 100%; }
}

button, .bottone {
    display: inline-block;
    margin-top: 1.1rem;
    padding: 0.6rem 1.4rem;
    background: var(--primario);
    color: #fff;
    border: none;
    border-radius: var(--raggio-piccolo);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(40, 40, 25, 0.15);
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}
button:hover, .bottone:hover {
    background: var(--primario-scuro);
    box-shadow: 0 2px 8px rgba(40, 40, 25, 0.2);
}
button:active, .bottone:active { transform: translateY(1px); box-shadow: none; }

.bottone-secondario {
    background: var(--carta);
    color: var(--testo);
    border: 1.5px solid var(--bordo);
    box-shadow: none;
}
.bottone-secondario:hover { background: var(--sfondo); border-color: var(--sabbia); }

/* Azioni distruttive (elimina): rosso, contornato per non invitare al clic */
.bottone-pericolo {
    background: var(--carta);
    color: var(--errore);
    border: 1.5px solid #f3c9c9;
    box-shadow: none;
}
.bottone-pericolo:hover { background: var(--errore-sfondo); border-color: var(--errore); }

form.inline { display: inline-flex; gap: 0.45rem; flex-wrap: wrap; vertical-align: middle; }
.mini { margin: 0; padding: 0.3rem 0.8rem; font-size: 0.85rem; font-weight: 500; min-height: 0; }

/* ---- Due colonne: form a sinistra, elenco a destra (usa lo spazio largo) ---- */
.due-colonne {
    display: grid;
    grid-template-columns: minmax(320px, 440px) minmax(0, 1fr);
    gap: 1.4rem;
    align-items: start;
}
.due-colonne .scheda { max-width: none; }
.due-colonne h2:first-child { margin-top: 0.2rem; }
@media (max-width: 1000px) {
    .due-colonne { grid-template-columns: 1fr; }
}

/* Form operativi a tutta larghezza: la card arriva al bordo del contenuto,
   come le tabelle (niente "pagina che si ferma a metà") */
form.scheda-piena, .scheda-piena { max-width: none; }

/* Card affiancate dentro campi-riga (es. Scarica/Sposta nella scheda partita):
   si dividono tutta la larghezza disponibile */
.campi-riga > form.scheda { flex: 1; min-width: 300px; max-width: none; }

/* ---- Barra azioni sopra le tabelle ---- */
.barra-azioni {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
}
.barra-azioni form { display: flex; gap: 0.5rem; flex: 1; min-width: 220px; align-items: center; }
.barra-azioni input[type="text"] { max-width: 340px; }
.barra-azioni select { width: auto; }
.barra-azioni button, .barra-azioni .bottone { margin-top: 0; }

/* ---- Card dashboard ---- */
.riquadri {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1rem;
    margin-bottom: 1.4rem;
}
.riquadro {
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
    padding: 1.1rem 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.9rem;
}
.riquadro-icona {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(var(--tinta, 79, 70, 229), 0.12);
    color: rgb(var(--tinta, 79, 70, 229));
}
.riquadro-icona svg { width: 26px; height: 26px; }
.riquadro-corpo { display: flex; flex-direction: column; min-width: 0; }
.riquadro .valore {
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--testo);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.riquadro .etichetta { color: var(--grigio); font-size: 0.85rem; }
.riquadro .sotto { font-size: 0.8rem; margin-top: 0.15rem; }

.trend { font-weight: 700; font-size: 0.8rem; }
.trend.su { color: var(--ok); }
.trend.giu { color: var(--errore); }

/* ---- Badge ---- */
.badge {
    display: inline-block;
    padding: 0.14rem 0.6rem;
    text-transform: capitalize;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.badge-carico { background: var(--ok-sfondo); color: var(--ok); }
.badge-scarico { background: var(--errore-sfondo); color: var(--errore); }
.badge-trasferimento { background: #e8eefb; color: #2f57a5; }
.badge-rettifica { background: #fdf3e0; color: #9c6b12; }
.badge-admin { background: var(--primario); color: #fff; }
.badge-operatore { background: var(--sfondo); color: var(--grigio); border: 1px solid var(--bordo); }
.badge-disattivo { background: #ececea; color: #96968c; }
.badge-ok { background: var(--ok-sfondo); color: var(--ok); }          /* stati positivi: attiva, evaso */
.badge-aperto { background: #e8eefb; color: #2f57a5; }                  /* impegno in corso */

.muto { color: var(--grigio); font-size: 0.9rem; }

/* Card movimenti (solo mobile: sostituiscono la tabella ultimi movimenti) */
.lista-movimenti { display: none; }
.lista-ubicazioni { display: none; }

/* Pannelli a fisarmonica (form richiudibili) */
details.fisarmonica > summary {
    list-style: none;
    cursor: pointer;
    background: var(--carta);
    border: 1.5px solid var(--bordo);
    border-radius: var(--raggio-piccolo);
    padding: 0.8rem 1rem;
    font-weight: 700;
    user-select: none;
}
details.fisarmonica > summary::-webkit-details-marker { display: none; }
details.fisarmonica[open] > summary {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: none;
    background: var(--osso);
    color: var(--accento);
}
details.fisarmonica[open] > .scheda {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* ---- Dashboard interattiva ---- */
.riquadro-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.12s, box-shadow 0.15s;
}
.riquadro-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(25, 25, 20, 0.10);
}

.cerca-globale { position: relative; max-width: 560px; margin-bottom: 1.2rem; }
.cerca-globale input {
    padding: 0.75rem 1rem;
    border-radius: 12px;
    box-shadow: var(--ombra);
}
.cerca-esiti {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 40;
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(25, 25, 20, 0.16);
    overflow: hidden;
    max-height: 60vh;
    overflow-y: auto;
}
.cerca-gruppo {
    padding: 0.5rem 0.9rem 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--grigio);
    background: #f8f9fc;
}
.cerca-voce {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.55rem 0.9rem;
    text-decoration: none;
    color: var(--testo);
    border-bottom: 1px solid #eef0f6;
}
.cerca-voce:hover { background: #f7f8fc; }
.cerca-voce:last-child { border-bottom: none; }
.cerca-testo { font-weight: 600; font-size: 0.9rem; }
.cerca-dettaglio { font-size: 0.8rem; color: var(--grigio); white-space: nowrap; }
.cerca-vuoto { padding: 0.9rem; color: var(--grigio); font-size: 0.9rem; }

.pannello {
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
    margin-bottom: 1.4rem;
}
.pannello-testata {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.2rem 0.4rem;
}
.legenda { font-size: 0.85rem; color: var(--grigio); }
.legenda-punto {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    vertical-align: -1px;
    margin-right: 0.3rem;
}
.grafico-contenitore { position: relative; padding: 0.6rem 1rem 0.8rem; }
.grafico-tooltip {
    position: absolute;
    background: var(--carbone);
    color: var(--osso);
    font-size: 0.8rem;
    line-height: 1.45;
    padding: 0.45rem 0.7rem;
    border-radius: 8px;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    z-index: 30;
}

.barra-mag {
    display: grid;
    grid-template-columns: 150px 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 0.45rem 0;
    text-decoration: none;
    color: var(--testo);
    border-bottom: 1px solid #eef0f6;
}
.barra-mag:last-child { border-bottom: none; }
.barra-mag:hover .barra-mag-nome { color: var(--accento-scuro); }
.barra-mag-nome { font-weight: 600; font-size: 0.9rem; }
.barra-mag-traccia {
    height: 10px;
    background: #edeff6;
    border-radius: 99px;
    overflow: hidden;
}
.barra-mag-pieno {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, #818cf8, var(--accento));
    transition: width 0.6s ease-out;
}
.barra-mag-pieno.attenzione { background: linear-gradient(90deg, #f59e0b, #d97706); }
.barra-mag-pieno.critico { background: linear-gradient(90deg, #ef6a6a, var(--errore)); }
.barra-mag-pieno.neutro { background: #aeb6cd; }
.barra-mag-valore b { color: var(--testo); }
.barra-mag-valore { font-size: 0.85rem; color: var(--grigio); white-space: nowrap; font-variant-numeric: tabular-nums; }

.chips { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.chip {
    margin: 0;
    padding: 0.32rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 500;
    background: var(--carta);
    color: var(--testo);
    border: 1.5px solid var(--bordo);
    border-radius: 99px;
    box-shadow: none;
}
.chip:hover { background: var(--sfondo); box-shadow: none; }
.chip.attiva { background: var(--accento); color: #fff; border-color: var(--accento); }

@media (max-width: 600px) {
    .barra-mag { grid-template-columns: 90px 1fr; }
    .barra-mag-valore { grid-column: 2; margin-top: -0.3rem; }
    .chip { min-height: 48px; padding: 0.5rem 1rem; }
}

/* ---- Mappa magazzino ---- */
.mappa-legenda { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.cella-mini { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin-right: 2px; }
.mappa-sezioni { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 1rem; }
.mappa-sezione {
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
    padding: 0.9rem 1rem 1rem;
}
.mappa-testata { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.7rem; }
.mappa-griglia { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.cella {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-height: 52px;
    border-radius: 10px;
    text-decoration: none;
    line-height: 1.1;
    transition: transform 0.1s;
}
.cella:active { transform: scale(0.95); }
.cella-num { font-weight: 700; font-size: 0.85rem; }
.cella-sc { font-size: 0.7rem; opacity: 0.85; }
.livello-0 { background: #f2f3f8; color: #a8adbd; border: 1.5px dashed var(--bordo); }
.livello-1 { background: #e0e7ff; color: #3730a3; }
.livello-2 { background: #b4bffb; color: #312e81; }
.livello-3 { background: #6d6af0; color: #fff; }
.livello-4 { background: var(--accento-scuro); color: #fff; }
/* Posto evidenziato ("visualizza articolo su mappa"): anello ambra */
.cella-evidenziata { outline: 3px solid var(--avviso); outline-offset: -3px; box-shadow: 0 0 0 2px var(--carta) inset; }
span.cella-mini.cella-evidenziata { background: var(--avviso); outline-offset: -2px; }
.mappa-evidenza-nota { margin-bottom: 0.8rem; }

/* Sezione "Fuori griglia" della mappa: lista di card (classe distinta dai
   movimenti così i filtri chip della dashboard non la toccano) */
.mappa-fuori { display: flex; flex-direction: column; gap: 0.5rem; }

/* Lista di card visibile SEMPRE (desktop e mobile), a differenza di
   .lista-movimenti che su desktop lascia il posto alla tabella.
   Le .mov-card generiche sono stilate solo nel media query mobile: qui
   (e nella sezione "fuori griglia" della mappa) servono a ogni larghezza. */
.lista-schede { display: flex; flex-direction: column; gap: 0.5rem; }
.lista-schede .mov-card, .mappa-fuori .mov-card {
    display: flex;
    flex-direction: column;
    gap: 3px;
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-card);
    box-shadow: var(--ombra);
    padding: 0.65rem 0.9rem;
    text-decoration: none;
    color: var(--testo);
}
.lista-schede .mov-card:hover, .mappa-fuori .mov-card:hover { border-color: var(--sabbia); }
.lista-schede .mov-riga1, .mappa-fuori .mov-riga1 { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.lista-schede .mov-riga2, .lista-schede .mov-riga3,
.mappa-fuori .mov-riga2, .mappa-fuori .mov-riga3 { display: block; font-size: 0.88rem; }

/* Anagrafica a definizioni (scheda cliente/utente) */
.anagrafica { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.8rem 1.2rem; margin: 0; }
.anagrafica-voce dt { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--grigio); }
.anagrafica-voce dd { margin: 2px 0 0; font-size: 0.98rem; overflow-wrap: anywhere; }

/* Checkbox in linea sotto un campo (es. "Mostra tutti gli articoli") */
.check-inline {
    display: flex; align-items: center; gap: 0.5rem;
    margin-top: 0.5rem; font-weight: 500; color: var(--grigio); font-size: 0.9rem;
    cursor: pointer;
}
.check-inline input { width: 18px; height: 18px; accent-color: var(--accento); flex-shrink: 0; }

/* Griglia dei permessi operatore (gestione utenti) */
.permessi-griglia { display: grid; grid-template-columns: 1fr; gap: 0.15rem; margin: 0.4rem 0 0.8rem; }
.permessi-griglia .check-inline { margin-top: 0.25rem; color: var(--testo); }

/* Hub "Movimenti magazzino": tastoni grandi, glove-friendly */
.hub-azioni { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0.8rem; margin-top: 0.4rem; }
.hub-tessera {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1.1rem 1.2rem;
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
    text-decoration: none;
    color: var(--testo);
    transition: transform 0.1s, box-shadow 0.15s, border-color 0.15s;
}
.hub-tessera:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(30,37,62,0.10); border-color: var(--sabbia); }
.hub-tessera:active { transform: translateY(0); }
.hub-icona {
    flex-shrink: 0;
    width: 52px; height: 52px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 14px;
    background: var(--osso);
    color: var(--accento);
}
.hub-testo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hub-testo strong { font-size: 1.08rem; letter-spacing: -0.01em; }
.hub-testo .muto { font-size: 0.9rem; line-height: 1.35; }
.hub-freccia { margin-left: auto; color: var(--grigio); flex-shrink: 0; }
/* Tinte per distinguere le operazioni */
.azione-scarico .hub-icona { background: var(--avviso-sfondo); color: var(--avviso); }
.azione-sposta .hub-icona { background: #e0f2fe; color: #0369a1; }
.azione-rettifica .hub-icona { background: #ecfdf5; color: #047857; }
.azione-storico .hub-icona { background: #f3f0ff; color: #7c3aed; }
@media (max-width: 600px) {
    .hub-tessera { padding: 1rem; min-height: 76px; }
    .hub-icona { width: 56px; height: 56px; }
    .hub-testo strong { font-size: 1.12rem; }
}

/* ---- Elenco articoli a schede (tutto visibile, niente scroll orizzontale) ---- */
.art-lista { display: flex; flex-direction: column; gap: 0.6rem; }
.art-card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.9rem;
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-card);
    box-shadow: var(--ombra);
    padding: 0.7rem 0.9rem;
}
.art-card-off { opacity: 0.7; }
.art-foto { display: block; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.art-foto img { width: 56px; height: 56px; object-fit: cover; display: block; }
.art-foto-vuota {
    width: 56px; height: 56px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--osso); color: var(--accento);
}
.art-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.art-titolo { text-decoration: none; color: var(--testo); font-size: 1.02rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.art-titolo:hover { color: var(--accento); }
.art-meta { font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.art-numeri { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; white-space: nowrap; font-size: 0.9rem; }
.art-azioni { display: flex; gap: 0.4rem; }
.art-azioni .bottone { margin: 0; }
@media (max-width: 720px) {
    /* Righe impilate senza scroll: [foto info] · numeri · azioni */
    .art-card { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; }
    .art-info { flex: 1 1 0; }
    .art-numeri { order: 3; flex-basis: 100%; flex-direction: row; align-items: baseline; gap: 0.9rem; }
    .art-azioni { order: 4; flex-basis: 100%; }
    .art-azioni .bottone { flex: 1; text-align: center; }
}

/* ---- Elenco partite a schede: due righe di info + azioni in basso ---- */
.part-lista { display: flex; flex-direction: column; gap: 0.6rem; }
.part-card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    grid-template-areas: "foto info azioni";
    align-items: center;
    gap: 0.5rem 0.9rem;
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio-card);
    box-shadow: var(--ombra);
    padding: 0.7rem 0.9rem;
}
.part-foto { grid-area: foto; display: block; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; }
.part-foto img { width: 56px; height: 56px; object-fit: cover; display: block; }
.part-info { grid-area: info; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.part-titolo { text-decoration: none; color: var(--testo); font-size: 1.02rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.part-titolo:hover { color: var(--accento); }
.part-riga2 { font-size: 0.88rem; line-height: 1.4; }
.part-azioni { grid-area: azioni; display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.part-azioni .bottone, .part-azioni button { margin: 0; }
@media (max-width: 720px) {
    /* Due righe: foto+info sopra, azioni in basso a tutta larghezza */
    .part-card { grid-template-columns: 56px minmax(0, 1fr); grid-template-areas: "foto info" "azioni azioni"; }
    .part-titolo { white-space: normal; }
    .part-azioni { justify-content: stretch; }
    .part-azioni .bottone { flex: 1; text-align: center; }
    .part-azioni form { flex: 1; display: flex; }
    .part-azioni form button { flex: 1; }
}

/* ---- Giacenze raggruppate per articolo ---- */
.giac-gruppo { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio-card); box-shadow: var(--ombra); margin-bottom: 0.8rem; overflow: hidden; }
.giac-gruppo > summary { list-style: none; cursor: pointer; padding: 0.8rem 1rem; display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.giac-gruppo > summary::-webkit-details-marker { display: none; }
/* La freccia sta a fine riga: è .giac-art-tot (margin-left:auto) a spingere
   subtotali+freccia a destra come un unico blocco (un solo margine auto). */
.giac-gruppo > summary::after { content: "▾"; order: 3; color: var(--grigio); transition: transform 0.15s; }
.giac-gruppo[open] > summary::after { transform: rotate(180deg); }
.giac-gruppo > summary:hover { background: var(--sfondo); }
.giac-art-nome { font-weight: 700; letter-spacing: -0.01em; }
.giac-art-tot { display: flex; gap: 0.9rem; color: var(--grigio); font-size: 0.9rem; margin-left: auto; }
.giac-corpo { border-top: 1px solid var(--bordo); }
.giac-riga { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 1rem; border-bottom: 1px solid var(--bordo); text-decoration: none; color: inherit; }
.giac-riga:last-child { border-bottom: none; }
.giac-riga:hover { background: var(--sfondo); }
.giac-riga .g-part { font-weight: 600; flex-shrink: 0; }
.giac-riga .g-dett { flex: 1; color: var(--grigio); font-size: 0.88rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.giac-riga .g-sc { margin-left: auto; white-space: nowrap; font-weight: 600; flex-shrink: 0; }

/* ---- Scheda articolo (dettaglio) ---- */
.art-testata { display: flex; gap: 1rem; align-items: center; background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra); padding: 1rem 1.2rem; }
.art-testata-foto { width: 84px; height: 84px; object-fit: cover; border-radius: 12px; flex-shrink: 0; }
.art-testata-nome { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }

/* ---- Scheda partita: pulsanti operazione + pannelli a comparsa ---- */
.op-bottoni { display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: 0.5rem; margin: 0.9rem 0 0.5rem; }
/* Variante a 3 colonne fisse (scheda articolo: 6 tasti = 3 sopra e 3 sotto) */
.op-bottoni-3 { grid-template-columns: repeat(3, 1fr); }

/* ---- Cronologia: tabella compatta su due righe, senza scorrimento ---- */
.tab-cronologia { table-layout: auto; }
.tab-cronologia th, .tab-cronologia td { white-space: normal; vertical-align: top; }
.tab-cronologia .sotto-riga { display: block; font-size: 0.8rem; margin-top: 0.2rem; }
.tab-cronologia td.num { white-space: nowrap; }
/* Separatore più marcato tra le righe (celle su due righe = righe più alte) */
.tab-cronologia td { padding-top: 0.85rem; padding-bottom: 0.85rem; border-bottom: 2px solid #e6e9f2; }
.tab-cronologia tr:last-child td { border-bottom: none; }

/* ---- Correzione prezzi in cronologia (solo admin) ---- */
.prezzo-riga {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    margin: -0.25rem 0 0.35rem; padding: 0.5rem 0.7rem;
    background: #f8f9fc; border: 1px solid var(--bordo);
    border-radius: 10px; font-size: 0.9rem;
}
.prezzo-riga input { width: 92px; min-width: 0; padding: 0.4rem 0.55rem; font-size: 16px; margin: 0; }
.prezzo-riga a { font-weight: 600; }
.prezzo-cella { display: flex; align-items: center; gap: 0.35rem; justify-content: flex-end; }
.prezzo-cella input { width: 84px; min-width: 0; padding: 0.35rem 0.45rem; font-size: 16px; margin: 0; }

/* Bottone "Salva" dei prezzi inline: pulito e discreto, non gridato */
.salva-prezzo {
    display: inline-flex; align-items: center; gap: 0.25rem;
    margin: 0; padding: 0.45rem 0.8rem;
    border: 1px solid var(--accento); border-radius: 8px;
    background: var(--accento); color: #fff;
    font-size: 0.85rem; font-weight: 600; line-height: 1; white-space: nowrap;
    cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.salva-prezzo:hover { background: #4338ca; border-color: #4338ca; }
.salva-prezzo:active { background: #3730a3; }

/* "Modifica" nelle righe prezzo/ritiri: tastino outline elegante */
.mod-link {
    display: inline-flex; align-items: center; margin: 0;
    padding: 0.4rem 0.8rem; border: 1.5px solid var(--bordo); border-radius: 8px;
    background: var(--carta); color: var(--testo); font-size: 0.85rem;
    font-weight: 600; text-decoration: none; white-space: nowrap;
}
.mod-link:hover { border-color: var(--sabbia); background: #f8f9fc; }

/* ---- Scheda articolo: striscia scatole con barra impegnate/disponibili ---- */
.striscia-numeri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; }
.striscia-numeri > div { display: flex; flex-direction: column; gap: 0.15rem; }
.striscia-numeri .etichetta { font-size: 0.82rem; color: var(--grigio); }
.striscia-numeri .valore { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; }
.striscia-numeri .muto { font-size: 0.82rem; }
.seg-barra {
    display: flex; height: 14px; margin-top: 0.8rem;
    border-radius: 7px; overflow: hidden; background: var(--fondo, #eef0f6);
}
.seg-imp  { background: #f59e0b; }
.seg-disp { background: #28a745; }
.seg-legenda { font-size: 0.8rem; margin-top: 0.35rem; display: flex; align-items: center; gap: 0.35rem; }
.seg-pallino { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }

/* ---- Scheda ordine: testata ariosa con dettagli in griglia ---- */
.ordine-testata { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.ordine-cliente { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; color: var(--testo); text-decoration: none; }
.ordine-cliente:hover { text-decoration: underline; }
.ordine-dettagli {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.8rem 1.2rem;
    padding-top: 0.8rem; border-top: 1px solid var(--bordo);
}
.ordine-dettagli > div { min-width: 0; }
.ordine-dettagli .etichetta { display: block; font-size: 0.78rem; color: var(--grigio); margin-bottom: 0.15rem; }
.ordine-dettagli > div > span:last-child { display: block; overflow-wrap: anywhere; }

/* ---- Scheda articolo: grafici mensili (utile e scatole) ---- */
.grafici-mensili { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.grafici-mensili svg { width: 100%; height: auto; display: block; }
.grafico-titolo { margin: 0 0 0.3rem; font-size: 0.85rem; }
@media (max-width: 760px) {
    .striscia-numeri { grid-template-columns: 1fr 1fr 1fr; gap: 0.4rem; }
    .striscia-numeri .valore { font-size: 1.15rem; }
    .grafici-mensili { grid-template-columns: 1fr; }
}
.op-bottone {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem;
    min-height: 82px; padding: 0.7rem 0.4rem;
    background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--raggio-card);
    box-shadow: var(--ombra); text-decoration: none; color: var(--testo);
    font-weight: 600; font-size: 0.92rem; text-align: center; line-height: 1.15;
    transition: transform 0.1s, border-color 0.15s, box-shadow 0.15s;
}
.op-bottone:hover { transform: translateY(-2px); border-color: var(--sabbia); box-shadow: 0 6px 22px rgba(30,37,62,0.10); }
.op-bottone:active { transform: translateY(0); }
.op-bottone svg { color: var(--accento); }
.op-scarico svg { color: var(--avviso); }
.op-trasf svg { color: #0369a1; }
.op-rettifica svg { color: #047857; }
.op-cronologia svg { color: #7c3aed; }
.op-bottone.op-off { opacity: 0.45; pointer-events: none; box-shadow: none; }

.op-panel { display: none; margin-top: 0.9rem; scroll-margin-top: 74px; }
.op-panel:target { display: block; animation: op-appare 0.18s ease; }
@keyframes op-appare { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.op-panel .scheda { margin-top: 0.4rem; border: 2px solid var(--osso); }
.op-panel-testa { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; }
.op-panel-testa h2 { margin: 0.4rem 0 0; }
.op-chiudi { font-size: 0.9rem; color: var(--grigio); text-decoration: none; white-space: nowrap; }
.op-chiudi:hover { color: var(--testo); }
@media (max-width: 600px) {
    .op-bottoni { grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }
    .op-bottone { min-height: 78px; font-size: 0.85rem; padding: 0.6rem 0.3rem; }
}

/* Scheda rapida del posto (si apre toccando una cella della mappa) */
.posto-foglio {
    width: min(92vw, 430px);
    border: none;
    border-radius: var(--raggio);
    box-shadow: 0 12px 40px rgba(15, 18, 34, 0.25);
    padding: 0;
    background: var(--carta);
    color: var(--testo);
}
/* Browser senza <dialog> (unknown element): il foglio non deve comparire in pagina */
.posto-foglio:not([open]) { display: none; }
.posto-foglio::backdrop { background: rgba(15, 18, 34, 0.45); }
/* A foglio aperto la mappa sotto non deve scorrere (stesso pattern del drawer) */
body.foglio-aperto { overflow: hidden; }
.foglio-testata {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 1rem 1.1rem 0.5rem;
}
.foglio-testata strong { font-size: 1.15rem; letter-spacing: -0.01em; }
.foglio-chiudi {
    background: var(--sfondo);
    color: var(--grigio);
    border: none;
    border-radius: 10px;
    min-height: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    margin: 0;
    flex-shrink: 0;
}
.foglio-chiudi:hover { background: var(--sabbia); color: var(--testo); }
.foglio-contenuto {
    padding: 0 1.1rem 0.3rem;
    max-height: 45vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.foglio-riga {
    display: block;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--bordo);
    text-decoration: none;
    color: inherit;
}
.foglio-riga:last-child { border-bottom: none; }
.foglio-riga1 { display: flex; gap: 0.5rem; align-items: baseline; min-width: 0; }
.foglio-riga1 span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foglio-riga2 { display: block; font-size: 0.85rem; margin-top: 2px; }
.foglio-azioni { display: flex; gap: 0.6rem; padding: 0.9rem 1.1rem 1.1rem; }
.foglio-azioni .bottone {
    flex: 1;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    text-align: center;
}
/* "Carica qui" in attesa dell'id ubicazione (href assente): spento */
.foglio-azioni .bottone[aria-disabled="true"] {
    opacity: 0.55;
    pointer-events: none;
    cursor: default;
}
@media (max-width: 600px) {
    /* Su mobile il foglio si aggancia in basso, stile app */
    .posto-foglio {
        width: 100vw;
        max-width: 100vw;
        margin: auto 0 0;
        border-radius: 18px 18px 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .foglio-azioni { flex-direction: column; }
    /* Target touch da guanti anche per la X */
    .foglio-chiudi { width: 48px; height: 48px; }
}

/* ---- Scheda partita (target del QR) ---- */
.scheda-partita {
    display: flex;
    gap: 1rem;
    align-items: center;
    background: var(--carta);
    border: 1px solid var(--bordo);
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
    padding: 1rem 1.2rem;
}
.scheda-partita-foto {
    width: 84px;
    height: 84px;
    object-fit: cover;
    border-radius: 12px;
    flex-shrink: 0;
}
.scheda-partita-nome { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; }
.scheda-partita-tipo { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.scheda-partita-art { font-size: 0.9rem; margin-top: 0.4rem; }
.badge-partita { background: var(--carbone); color: var(--osso); font-size: 0.85rem; }

/* Ubicazioni del carico: card in risalto invece della tabella scarna */
.ubic-carico { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.7rem; }
.ubic-card {
    display: flex; flex-direction: column; gap: 0.15rem;
    padding: 0.85rem 1rem; text-decoration: none; color: inherit;
    background: var(--carta); border: 1px solid var(--bordo);
    border-left: 4px solid var(--accento); border-radius: 12px;
    box-shadow: var(--ombra); transition: transform 0.1s, box-shadow 0.15s;
}
.ubic-card:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(30,37,62,0.10); }
.ubic-codice { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1; }
.ubic-zona { font-size: 0.82rem; font-weight: 600; color: var(--accento); text-transform: uppercase; letter-spacing: 0.04em; }
.ubic-quant { font-size: 0.9rem; color: var(--grigio); margin-top: 0.25rem; }
.ubic-quant strong { color: var(--testo); }

/* ---- Scanner QR ---- */
.scanner {
    max-width: 560px;
    background: var(--carbone);
    border-radius: var(--raggio);
    box-shadow: var(--ombra);
    overflow: hidden;
}
.scanner-inquadratura { position: relative; aspect-ratio: 4 / 3; background: #000; }
.scanner-inquadratura video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scanner-mirino {
    position: absolute;
    inset: 12%;
    border: 3px solid rgba(241, 239, 233, 0.92);
    border-radius: 16px;
    box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}
.scanner-linea {
    position: absolute;
    left: 16%;
    right: 16%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--osso), transparent);
    animation: scanner-scorri 2.2s ease-in-out infinite;
    pointer-events: none;
}
@keyframes scanner-scorri {
    0%, 100% { top: 18%; }
    50%      { top: 78%; }
}
.scanner-controlli {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.7rem 1rem;
}
.scanner-controlli .muto { color: rgba(255, 255, 255, 0.8); }
.scanner-errore { color: #ffb4a8; font-size: 0.9rem; }

/* ---- Pulsante scanner flottante (solo mobile) ---- */
.fab-scanner {
    display: none;
    position: fixed;
    right: 1rem;
    bottom: calc(1.2rem + env(safe-area-inset-bottom));
    z-index: 50;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: var(--primario);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(20, 20, 12, 0.35);
}
.fab-scanner:active { transform: scale(0.94); }
@media (max-width: 900px) {
    .fab-scanner {
        display: flex;
        width: 68px;
        height: 68px;
    }
}

/* ---- Login ---- */
.login-contenitore {
    grid-column: 1 / 3;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(900px 500px at 80% -10%, rgba(99, 102, 241, 0.22), transparent 60%),
        linear-gradient(165deg, var(--carbone-chiaro), var(--carbone));
    padding: 1.5rem;
}
.login-scheda {
    background: var(--carta);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(20, 20, 12, 0.35);
    padding: 2.2rem 2.4rem;
    width: 100%;
    max-width: 390px;
}
.login-scheda h1 { text-align: center; font-size: 1.5rem; margin-bottom: 0.4rem; }
.login-scheda .login-marchio { display: block; width: 64px; height: auto; margin: 0 auto 0.9rem; }

/* ---- Mobile: hamburger + drawer laterale ---- */
@media (max-width: 900px) {
    body {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto 1fr auto;
        overflow-x: clip; /* cintura di sicurezza: mai scroll orizzontale di pagina */
    }

    /* Barra compatta: hamburger + logo a sinistra, icone rapide a destra */
    .topbar {
        grid-column: 1;
        grid-row: 1;
        position: static;
        height: auto;
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        gap: 0.3rem;
        padding: 0.45rem 0.6rem;
        border-right: none;
        border-bottom: 1px solid var(--bordo);
        overflow: visible;
    }
    .topbar-marchio { padding: 0; min-width: 0; margin-right: auto; }
    .topbar-marchio svg { width: 34px; }
    .topbar-utente { display: none; }

    .hamburger {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        flex-shrink: 0;
        margin: 0;
        padding: 0;
        background: transparent;
        border: none;
        box-shadow: none;
        color: var(--testo);
        border-radius: var(--raggio-piccolo);
        min-height: 48px;
    }
    .hamburger:hover, .hamburger:active { background: var(--sfondo); box-shadow: none; transform: none; }

    .topbar-icone { display: flex; gap: 0.1rem; flex-shrink: 0; align-items: center; }
    .topbar-icone a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        border-radius: var(--raggio-piccolo);
        color: var(--grigio);
    }
    .topbar-icone a:active { background: var(--sfondo); color: var(--testo); }
    .topbar-icone .avatar-iniziali { width: 34px; height: 34px; font-size: 0.8rem; }

    /* La barra rapida vive nella topbar mobile: qui è ridondante */
    .barra-rapida { display: none; }

    /* Drawer: la nav diventa un pannello che scivola da sinistra */
    .topbar-nav {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(80vw, 320px);
        z-index: 110;
        background: var(--carta);
        flex-direction: column;
        gap: 2px;
        padding: 0.9rem 0.8rem calc(0.9rem + env(safe-area-inset-bottom));
        overflow-y: auto;
        transform: translateX(-105%);
        transition: transform 0.22s ease;
        box-shadow: 0 0 42px rgba(10, 14, 28, 0.28);
    }
    body.menu-aperto .topbar-nav { transform: none; }

    /* Voci a piastrelle: griglia 2 colonne, icona sopra, testo compatto */
    .nav-voci {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.55rem;
        align-content: start;
        flex: 1;
    }
    .topbar-nav .nav-voci a {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        min-height: 78px;
        padding: 0.6rem 0.3rem;
        border: 1.5px solid var(--bordo);
        border-radius: 14px;
        background: #fafbfe;
        color: var(--testo);
        font-size: 0.85rem;
        font-weight: 600;
        line-height: 1.15;
        text-align: center;
        white-space: normal;
    }
    .topbar-nav .nav-voci a svg { width: 24px; height: 24px; opacity: 0.85; }
    .topbar-nav .nav-voci a.attiva {
        background: var(--osso);
        border-color: var(--accento);
        color: var(--accento);
    }
    .topbar-nav .nav-voci a.attiva svg { opacity: 1; }

    .drawer-testata {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.6rem;
        padding: 0 0 0.7rem 0.2rem;
        border-bottom: 1px solid var(--bordo);
        margin-bottom: 0.7rem;
    }
    .drawer-utente { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
    .drawer-utente .muto { font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .drawer-chiudi {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        flex-shrink: 0;
        margin: 0;
        padding: 0;
        min-height: 48px;
        background: var(--sfondo);
        border: none;
        border-radius: 12px;
        box-shadow: none;
        color: var(--testo);
    }
    .drawer-chiudi:hover, .drawer-chiudi:active { background: var(--bordo); box-shadow: none; transform: none; }

    .drawer-esci {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        margin-top: 0.8rem;
        padding: 0.8rem;
        border-radius: 14px;
        background: var(--errore-sfondo);
        color: var(--errore) !important;
        font-weight: 700;
        text-decoration: none;
    }

    .menu-sfondo {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 100;
        background: rgba(13, 17, 28, 0.45);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s;
    }
    body.menu-aperto .menu-sfondo { opacity: 1; pointer-events: auto; }
    body.menu-aperto { overflow: hidden; }

    .contenuto { grid-column: 1; padding: 1.1rem 1rem calc(1.5rem + 76px + env(safe-area-inset-bottom)); }
    .pie { grid-column: 1; }
    .login-contenitore { grid-column: 1; }
}

/* ---- Smartphone: modalità "guanti da lavoro" (comandi grandi) ---- */
@media (max-width: 600px) {
    /* Campi in colonna singola: niente form strizzati a due colonne */
    .campi-riga > div { flex-basis: 100%; min-width: 0; }

    /* Campi e tendine alti: si prendono anche con i guanti */
    input[type="text"], input[type="search"], input[type="email"], input[type="password"],
    input[type="number"], input[type="date"], select, textarea {
        min-height: 54px;
        font-size: 17px;
        padding: 0.8rem 0.9rem;
    }
    label { font-size: 0.95rem; }

    /* Tastoni: bottone principale a tutta larghezza, alto 56px */
    button, .bottone { min-height: 56px; padding: 0.8rem 1.4rem; font-size: 1.05rem; }
    .mini { min-height: 48px; font-size: 0.95rem; }
    form.scheda button[type="submit"], form.scheda > button { width: 100%; }

    /* Voci di navigazione e righe tabella più generose al tocco */
    th, td { padding: 0.75rem 0.8rem; }
    details > summary { padding: 0.6rem 0; }

    /* --- Tabelle dati -> card impilate su mobile (niente scroll laterale) ---
       tabelle_mobile.js mette l'etichetta di colonna in data-label su ogni td;
       qui la riga diventa una card e ogni valore va su una riga "ETICHETTA valore". */
    .tabella-scroll { overflow-x: visible; width: 100%; }
    .tabella-scroll table,
    table.tab-cronologia { display: block; width: 100%; }
    .tabella-scroll tbody,
    table.tab-cronologia tbody { display: block; width: 100%; }
    .tabella-scroll tr.tab-head,
    table.tab-cronologia tr.tab-head { display: none; }
    .tabella-scroll tr,
    table.tab-cronologia tr {
        display: block;
        width: 100%;
        box-sizing: border-box;
        background: var(--carta);
        border: 1px solid var(--bordo);
        border-radius: 14px;
        box-shadow: var(--ombra);
        padding: 0.4rem 1.1rem 0.9rem;
        margin-bottom: 0.7rem;
    }
    .tabella-scroll tr:hover td,
    table.tab-cronologia tr:hover td { background: transparent; }
    .tabella-scroll td,
    table.tab-cronologia td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 1rem;
        padding: 0.5rem 0;
        border: none;
        border-bottom: 1px solid #eef0f6;
        white-space: normal;
        text-align: right;
    }
    .tabella-scroll tr td:last-child,
    table.tab-cronologia tr td:last-child { border-bottom: none; }
    .tabella-scroll td::before,
    table.tab-cronologia td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
        color: var(--grigio); text-align: left;
    }
    /* Celle senza etichetta (azioni): i link diventano pulsanti a tutta riga */
    .tabella-scroll td:not([data-label])::before,
    table.tab-cronologia td:not([data-label])::before { content: none; }
    .tabella-scroll td:not([data-label]),
    table.tab-cronologia td:not([data-label]) {
        display: flex; justify-content: stretch; text-align: center;
        gap: 0.5rem; flex-wrap: wrap; padding-top: 0.7rem;
    }
    /* Ogni azione (bottone o link) è un pulsante pieno-riga, affiancati se stanno */
    .tabella-scroll td:not([data-label]) > a,
    .tabella-scroll td:not([data-label]) > .bottone,
    table.tab-cronologia td:not([data-label]) > a,
    table.tab-cronologia td:not([data-label]) > .bottone {
        flex: 1 1 44%; margin: 0; min-height: 46px;
        display: inline-flex; align-items: center; justify-content: center;
        padding: 0.6rem 0.9rem; border-radius: 10px;
        border: 1.5px solid var(--bordo); background: var(--carta);
        color: var(--testo); font-weight: 600; font-size: 0.95rem; text-decoration: none;
    }
    .tab-cronologia .sotto-riga { text-align: right; }

    select {
        min-height: 54px;
        background-image: linear-gradient(45deg, transparent 50%, var(--grigio) 50%),
                          linear-gradient(135deg, var(--grigio) 50%, transparent 50%);
        background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
        background-size: 5px 5px;
        background-repeat: no-repeat;
        appearance: none;
        -webkit-appearance: none;
        padding-right: 2.2rem;
    }

    /* Dashboard: stat COMPATTE a 3 colonne (niente icone/trend: solo numero+voce) */
    .riquadri { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 0.9rem; }
    .riquadro { padding: 0.55rem 0.6rem; gap: 0; }
    .riquadro-icona { display: none; }
    .riquadro-corpo { gap: 0; }
    .riquadro .valore { font-size: 1.15rem; line-height: 1.25; }
    .riquadro .etichetta { font-size: 0.75rem; line-height: 1.2; order: 1; }
    .riquadro .sotto { display: none; }

    /* Tasti azione dashboard: 3 in una riga ordinata, niente orario */
    .azioni-dashboard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
    .azioni-dashboard .bottone { margin: 0; text-align: center; padding: 0.7rem 0.3rem; font-size: 0.95rem; min-width: 0; }
    .azioni-dashboard #agg-ora { display: none; }

    /* Chip filtri: una riga scorrevole, niente a-capo */
    .chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 0.2rem; }
    .chips::-webkit-scrollbar { display: none; }
    .chip { white-space: nowrap; flex-shrink: 0; }

    /* Ultimi movimenti: card al posto della tabella */
    .solo-desktop { display: none; }
    .lista-movimenti { display: flex; flex-direction: column; gap: 0.5rem; }
    .mov-card {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
        background: var(--carta);
        border: 1px solid var(--bordo);
        border-radius: var(--raggio-card);
        padding: 0.65rem 0.75rem;
        text-decoration: none;
        color: var(--testo);
        box-shadow: var(--ombra);
    }
    .mov-riga1 { display: flex; align-items: center; gap: 0.6rem; }
    .mov-riga1 .muto { margin-left: auto; font-size: 0.8rem; }
    .mov-riga2 { font-weight: 600; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .mov-riga3 { font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* Ubicazioni: card al posto della tabella */
    .lista-ubicazioni { display: flex; flex-direction: column; gap: 0.5rem; }
    .ubi-card {
        display: flex;
        flex-direction: column;
        gap: 0.3rem;
        background: var(--carta);
        border: 1px solid var(--bordo);
        border-radius: var(--raggio-card);
        padding: 0.65rem 0.75rem;
        box-shadow: var(--ombra);
    }
    .ubi-azioni { display: flex; gap: 0.5rem; margin-top: 0.2rem; }
    .ubi-azioni .bottone, .ubi-azioni button { flex: 1; text-align: center; margin: 0; }
    details.fisarmonica > summary { min-height: 54px; display: flex; align-items: center; }

    /* Barra azioni: bottoni che si dividono la riga, ricerca a tutta larghezza */
    .barra-azioni form { flex-basis: 100%; }
    .barra-azioni input[type="text"] { max-width: none; }
    .barra-azioni .bottone { flex: 1 1 40%; text-align: center; min-width: 0; }

    h1 { font-size: 1.25rem; }
    .contenuto { padding: 0.9rem 0.8rem 1.3rem; }
    form.scheda, .scheda { padding: 1.1rem; }

    /* Link nelle tabelle: area di tocco ~44px anche coi guanti */
    td a {
        display: inline-block;
        padding: 0.55rem 0.45rem;
        margin: -0.35rem -0.2rem;
    }

    /* Barra azioni: le tendine non devono sbordare dal viewport */
    .barra-azioni form { flex-wrap: wrap; }
    .barra-azioni select { max-width: 100%; min-width: 0; flex: 1 1 140px; }
}


/* Ancore delle azioni rapide: il form non finisce sotto il bordo superiore */
#scarica, #sposta, #ritiro { scroll-margin-top: 1rem; }

/* ---- Occhietto mostra/nascondi password ---- */
.campo-occhio { position: relative; }
.campo-occhio input { padding-right: 3.2rem; }
.occhio {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    min-height: 48px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--grigio);
    cursor: pointer;
}
.occhio:hover, .occhio:active { background: transparent; color: var(--testo); box-shadow: none; transform: translateY(-50%); }