/* ==========================================================================
   Esse3 — design system (spec §1, §54, §61)
   Fondo chiaro, un solo rosso per azioni primarie e stato attivo, bordi sottili,
   ombre leggere. Nessun framework: le classi sono poche e composte.
   ========================================================================== */

@font-face {
    font-family: 'Inter';
    src: url('../fonts/InterVariable.woff2') format('woff2');
    font-weight: 100 900;
    font-display: swap;
}

:root {
    --rosso: #C8102E;
    --rosso-hover: #A80D26;
    --rosso-chiaro: #FDECEE;
    --rosso-bordo: #F6C6CE;

    --fondo: #F4F5F7;
    --pannello: #FFFFFF;
    --pannello-2: #F9FAFB;
    --testo: #111827;
    --testo-2: #4B5563;
    --testo-3: #6B7280;
    --testo-4: #9CA3AF;
    --bordo: #E5E7EB;
    --bordo-forte: #D1D5DB;

    --verde: #15803D;   --verde-chiaro: #DCFCE7;   --verde-punto: #22C55E;
    --ambra: #B45309;   --ambra-chiaro: #FEF3C7;   --ambra-punto: #F59E0B;
    --blu: #1D4ED8;     --blu-chiaro: #DBEAFE;     --blu-punto: #3B82F6;
    --viola: #6D28D9;   --viola-chiaro: #EDE9FE;   --viola-punto: #8B5CF6;
    --grigio: #4B5563;  --grigio-chiaro: #F3F4F6;  --grigio-punto: #9CA3AF;
    --rosso-testo: #B91C1C; --rosso-punto: #EF4444;

    --raggio: 10px;
    --raggio-s: 8px;
    --raggio-l: 14px;
    --ombra: 0 1px 2px rgba(16, 24, 40, .05);
    --ombra-m: 0 4px 12px rgba(16, 24, 40, .08);
    --ombra-l: 0 12px 32px rgba(16, 24, 40, .16);

    --header-h: 64px;
    --sidebar-w: 212px;
    --sidebar-w-ridotta: 84px;
    --drawer-w: 440px;
    --tocco: 44px;          /* area minima di tocco (spec §56) */

    --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.45;
    color: var(--testo);
    background: var(--fondo);
    font-feature-settings: 'cv11', 'ss01';
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a.link { color: var(--rosso); }
a.link:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; letter-spacing: -0.01em; }
h1 { font-size: 22px; font-weight: 700; }
h2 { font-size: 17px; font-weight: 650; }
h3 { font-size: 15px; font-weight: 650; }
p { margin: 0 0 8px; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--rosso); outline-offset: 2px; }

.ico { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ico-s { width: 16px; height: 16px; }
.ico-l { width: 24px; height: 24px; }
.ico-xl { width: 32px; height: 32px; }

/* ── Layout applicazione ─────────────────────────────────────────────────── */
.app { min-height: 100vh; display: grid; grid-template-rows: var(--header-h) 1fr; grid-template-columns: var(--sidebar-w) 1fr; grid-template-areas: "header header" "sidebar main"; }
.app.sidebar-ridotta { grid-template-columns: var(--sidebar-w-ridotta) 1fr; }

.header {
    grid-area: header; position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; gap: 14px; padding: 0 18px;
    background: var(--pannello); border-bottom: 1px solid var(--bordo);
}
.header .logo { display: flex; align-items: center; gap: 8px; min-width: calc(var(--sidebar-w) - 36px); }
.app.sidebar-ridotta .header .logo { min-width: auto; }
.logo img { width: 34px; height: 34px; }
.logo-testo { font-size: 23px; font-weight: 800; letter-spacing: -0.04em; color: var(--testo); }
.logo-testo b { color: var(--rosso); font-weight: 800; }

.header-blocco {
    display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px;
    border: 1px solid var(--bordo); border-radius: var(--raggio); background: var(--pannello);
    cursor: pointer; white-space: nowrap;
}
.header-blocco:hover { border-color: var(--bordo-forte); }
.header-blocco .titolo { font-weight: 600; font-size: 13px; }
.header-blocco .sotto { color: var(--testo-3); font-size: 12px; }
/* Nell'header solo la ricerca si allarga/stringe: il resto tiene la sua misura e, se serve,
   si accorcia coi gradini responsive in fondo (mai testo a capo o elementi sovrapposti). */
.header > * { flex: none; }
.header-blocco.negozio > div { min-width: 0; }
.header-blocco.negozio .titolo, .header-blocco.negozio .sotto { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.header-stato { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: var(--pannello-2); border: 1px solid var(--bordo); font-size: 13px; white-space: nowrap; max-width: 340px; }
.header-stato .punto-stato { flex: none; }
.header-stato .stato-testo { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.header .header-cerca { flex: 1 1 200px; min-width: 0; max-width: 520px; position: relative; }
.header-cerca input { width: 100%; height: 42px; padding: 0 44px 0 40px; border: 1px solid var(--bordo); border-radius: var(--raggio); background: var(--pannello-2); text-overflow: ellipsis; }
.header-cerca input:focus { background: #fff; border-color: var(--bordo-forte); outline: none; }
.header-cerca > .ico { position: absolute; left: 12px; top: 11px; color: var(--testo-3); }
.header-cerca kbd { position: absolute; right: 10px; top: 10px; font-size: 11px; color: var(--testo-3); border: 1px solid var(--bordo); border-radius: 5px; padding: 1px 6px; background: #fff; }
.header-destra { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.header-destra > * { flex: none; }
.header-data { text-align: right; line-height: 1.2; white-space: nowrap; }
.header-data .giorno { font-size: 12px; color: var(--testo-3); }
.header-data .ora { font-size: 16px; font-weight: 700; }
.pill-online { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--verde-chiaro); color: var(--verde); font-weight: 600; font-size: 13px; white-space: nowrap; }
.pill-online.offline { background: var(--rosso-chiaro); color: var(--rosso-testo); }
/* Il pallino resta verde nel markup: offline deve diventare rosso, anche quando si vede solo lui. */
.pill-online.offline .punto-stato { background: var(--rosso-punto); }
.utente-menu { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 4px 6px; border-radius: var(--raggio); }
.utente-menu:hover { background: var(--pannello-2); }
.utente-menu .testi { min-width: 0; line-height: 1.25; }
.utente-menu .nome, .utente-menu .ruolo { max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.utente-menu .nome { font-weight: 600; font-size: 13px; }
.utente-menu .ruolo { font-size: 12px; color: var(--testo-3); }

.avatar { width: 38px; height: 38px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--grigio-chiaro); color: var(--testo-2); flex: none; }
.avatar-s { width: 30px; height: 30px; font-size: 11px; }
.avatar-l { width: 52px; height: 52px; font-size: 17px; }
.avatar.rosso { background: var(--rosso-chiaro); color: var(--rosso); }
.avatar.blu { background: var(--blu-chiaro); color: var(--blu); }
.avatar.viola { background: var(--viola-chiaro); color: var(--viola); }
.avatar.verde { background: var(--verde-chiaro); color: var(--verde); }

.icona-bottone { position: relative; width: var(--tocco); height: var(--tocco); display: inline-grid; place-items: center; border-radius: var(--raggio); border: 1px solid transparent; background: transparent; cursor: pointer; color: var(--testo-2); }
.icona-bottone:hover { background: var(--grigio-chiaro); color: var(--testo); }
.icona-bottone .contatore { position: absolute; top: 4px; right: 4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--rosso); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; }

/* Sidebar */
.sidebar { grid-area: sidebar; position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); overflow-y: auto; padding: 12px 10px; background: var(--pannello); border-right: 1px solid var(--bordo); display: flex; flex-direction: column; gap: 2px; }
.sidebar a.voce { display: flex; align-items: center; gap: 12px; min-height: var(--tocco); padding: 8px 12px; border-radius: var(--raggio); color: var(--testo-2); font-weight: 500; }
.sidebar a.voce:hover { background: var(--pannello-2); color: var(--testo); }
.sidebar a.voce.attiva { background: var(--rosso-chiaro); color: var(--rosso); font-weight: 600; }
.sidebar .piede { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--bordo); display: flex; flex-direction: column; gap: 2px; }
.sidebar .versione { font-size: 11px; color: var(--testo-4); padding: 6px 12px; }
.app.sidebar-ridotta .sidebar a.voce { flex-direction: column; gap: 4px; padding: 10px 4px; font-size: 11px; text-align: center; line-height: 1.15; }
.app.sidebar-ridotta .sidebar .versione { display: none; }

.main { grid-area: main; min-width: 0; padding: 18px; }
.pagina { background: var(--pannello); border: 1px solid var(--bordo); border-radius: var(--raggio-l); padding: 20px 22px; min-height: calc(100vh - var(--header-h) - 36px); box-shadow: var(--ombra); }
.pagina-trasparente { padding: 0; background: none; border: 0; box-shadow: none; }

.intestazione { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.intestazione .titoli { flex: 1; min-width: 220px; }
.intestazione .sottotitolo { color: var(--testo-3); margin-top: 4px; }
.intestazione .azioni { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--grigio-chiaro); color: var(--testo-2); font-size: 12px; font-weight: 600; vertical-align: middle; margin-left: 8px; }

/* ── Bottoni ─────────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 16px; border-radius: var(--raggio); border: 1px solid var(--bordo); background: var(--pannello); color: var(--testo); font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s, box-shadow .12s; }
.btn:hover { background: var(--pannello-2); border-color: var(--bordo-forte); }
.btn:disabled, .btn.disabilitato { opacity: .5; cursor: not-allowed; }
.btn-primario { background: var(--rosso); border-color: var(--rosso); color: #fff; }
.btn-primario:hover { background: var(--rosso-hover); border-color: var(--rosso-hover); }
.btn-pericolo { color: var(--rosso-testo); border-color: var(--rosso-bordo); background: #fff; }
.btn-pericolo:hover { background: var(--rosso-chiaro); border-color: var(--rosso); }
.btn-successo { color: var(--verde); border-color: #BBF7D0; }
.btn-successo:hover { background: var(--verde-chiaro); }
.btn-fantasma { border-color: transparent; background: transparent; }
.btn-fantasma:hover { background: var(--grigio-chiaro); }
.btn-link { border: 0; background: none; color: var(--rosso); padding: 4px 6px; min-height: auto; }
.btn-s { min-height: 32px; padding: 5px 10px; font-size: 13px; }
.btn-l { min-height: 52px; padding: 12px 22px; font-size: 16px; }
.btn-xl { min-height: 64px; padding: 14px 26px; font-size: 18px; }
.btn-blocco { width: 100%; }
.btn-icona { width: 36px; min-height: 36px; padding: 0; }
.btn .caricamento { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: gira .7s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

.gruppo-bottoni { display: inline-flex; border: 1px solid var(--bordo); border-radius: var(--raggio); overflow: hidden; }
.gruppo-bottoni > * { border: 0; border-radius: 0; background: #fff; min-height: 38px; padding: 6px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; color: var(--testo-2); }
.gruppo-bottoni > * + * { border-left: 1px solid var(--bordo); }
.gruppo-bottoni > .attivo { background: var(--rosso-chiaro); color: var(--rosso); font-weight: 600; }

/* ── Form ───────────────────────────────────────────────────────────────── */
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.campo > label, .etichetta { font-size: 13px; font-weight: 600; color: var(--testo-2); }
.campo .aiuto { font-size: 12px; color: var(--testo-3); }
.campo .errore-campo { font-size: 12px; color: var(--rosso-testo); }
.obbligatorio::after { content: ' *'; color: var(--rosso); }
.input, select.input, textarea.input {
    width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid var(--bordo); border-radius: var(--raggio-s); background: #fff; transition: border-color .12s, box-shadow .12s;
}
textarea.input { min-height: 84px; resize: vertical; }
.input:focus { outline: none; border-color: var(--rosso); box-shadow: 0 0 0 3px rgba(200, 16, 46, .12); }
.input.invalido { border-color: var(--rosso); }
.input[readonly] { background: var(--pannello-2); }
.input-gruppo { display: flex; align-items: stretch; }
.input-gruppo .input { border-radius: 0; }
.input-gruppo .input:first-child { border-radius: var(--raggio-s) 0 0 var(--raggio-s); }
.input-gruppo .input:last-child { border-radius: 0 var(--raggio-s) var(--raggio-s) 0; }
.input-gruppo .aggiunta { display: grid; place-items: center; padding: 0 12px; border: 1px solid var(--bordo); background: var(--pannello-2); color: var(--testo-3); }
.input-gruppo .aggiunta:first-child { border-radius: var(--raggio-s) 0 0 var(--raggio-s); border-right: 0; }
.input-gruppo .aggiunta:last-child { border-radius: 0 var(--raggio-s) var(--raggio-s) 0; border-left: 0; }
.input-icona { position: relative; }
.input-icona > .ico { position: absolute; left: 12px; top: 11px; color: var(--testo-3); pointer-events: none; }
.input-icona .input { padding-left: 40px; }
.griglia-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.griglia-form .intero { grid-column: 1 / -1; }
.griglia-form-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }

.interruttore { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; cursor: pointer; }
.interruttore .testi .titolo { font-weight: 600; }
.interruttore .testi .sotto { font-size: 12px; color: var(--testo-3); }
.interruttore input { position: absolute; opacity: 0; width: 0; height: 0; }
.interruttore .binario { position: relative; width: 42px; height: 24px; border-radius: 12px; background: var(--bordo-forte); flex: none; transition: background .15s; }
.interruttore .binario::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--ombra); transition: transform .15s; }
.interruttore input:checked + .binario { background: var(--rosso); }
.interruttore input:checked + .binario::after { transform: translateX(18px); }
.interruttore input:focus-visible + .binario { outline: 2px solid var(--rosso); outline-offset: 2px; }
.interruttore.compatto { padding: 0; justify-content: flex-start; }

.spunta { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; min-height: 32px; }
.spunta input { width: 18px; height: 18px; accent-color: var(--rosso); }

.scelte { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.scelta { position: relative; }
.scelta input { position: absolute; opacity: 0; }
.scelta span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 72px; padding: 10px; border: 1px solid var(--bordo); border-radius: var(--raggio); text-align: center; font-weight: 600; font-size: 13px; cursor: pointer; background: #fff; }
.scelta input:checked + span { border-color: var(--rosso); background: var(--rosso-chiaro); color: var(--rosso); }
.scelta input:focus-visible + span { outline: 2px solid var(--rosso); }

.stepper { display: inline-flex; align-items: center; border: 1px solid var(--bordo); border-radius: var(--raggio-s); overflow: hidden; }
.stepper button { width: 40px; height: 40px; border: 0; background: var(--pannello-2); cursor: pointer; display: grid; place-items: center; }
.stepper input { width: 80px; height: 40px; border: 0; text-align: center; font-weight: 600; }

/* ── Card, KPI, sezioni ──────────────────────────────────────────────────── */
.card { background: var(--pannello); border: 1px solid var(--bordo); border-radius: var(--raggio-l); padding: 16px 18px; }
.card-titolo { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.card-titolo h2, .card-titolo h3 { display: flex; align-items: center; gap: 8px; }
.card-piatta { background: var(--pannello-2); border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 12px 14px; }
.griglia { display: grid; gap: 14px; }
.griglia-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.griglia-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.griglia-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.griglia-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.kpi { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: var(--pannello); border: 1px solid var(--bordo); border-radius: var(--raggio-l); min-width: 0; }
.kpi .kpi-testa { display: flex; align-items: center; gap: 10px; color: var(--testo-2); font-weight: 600; font-size: 13px; }
.kpi .kpi-icona { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--rosso-chiaro); color: var(--rosso); flex: none; }
.kpi .kpi-icona.verde { background: var(--verde-chiaro); color: var(--verde); }
.kpi .kpi-icona.blu { background: var(--blu-chiaro); color: var(--blu); }
.kpi .kpi-icona.viola { background: var(--viola-chiaro); color: var(--viola); }
.kpi .kpi-icona.ambra { background: var(--ambra-chiaro); color: var(--ambra); }
.kpi .kpi-valore { font-size: 24px; font-weight: 750; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi .kpi-confronto { font-size: 12px; color: var(--testo-3); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.delta-su { color: var(--verde); font-weight: 700; display: inline-flex; align-items: center; gap: 2px; }
.delta-giu { color: var(--rosso-testo); font-weight: 700; display: inline-flex; align-items: center; gap: 2px; }

/* ── Badge ──────────────────────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--grigio-chiaro); color: var(--grigio); }
.badge .punto { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge.verde { background: var(--verde-chiaro); color: var(--verde); }
.badge.ambra { background: var(--ambra-chiaro); color: var(--ambra); }
.badge.rosso { background: var(--rosso-chiaro); color: var(--rosso-testo); }
.badge.blu { background: var(--blu-chiaro); color: var(--blu); }
.badge.viola { background: var(--viola-chiaro); color: var(--viola); }
.badge.grigio { background: var(--grigio-chiaro); color: var(--grigio); }
.badge-reparto { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; background: var(--blu-chiaro); color: var(--blu); white-space: nowrap; }
.badge-reparto.r2 { background: var(--viola-chiaro); color: var(--viola); }
.badge-reparto.r3 { background: var(--verde-chiaro); color: var(--verde); }
.badge-reparto.r4 { background: var(--ambra-chiaro); color: var(--ambra); }
.badge-reparto.mancante { background: var(--rosso); color: #fff; }
.punto-stato { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--grigio-punto); }
.punto-stato.verde { background: var(--verde-punto); }
.punto-stato.ambra { background: var(--ambra-punto); }
.punto-stato.rosso { background: var(--rosso-punto); }
.punto-stato.blu { background: var(--blu-punto); }

/* ── Schede (tab) ───────────────────────────────────────────────────────── */
.schede { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.scheda { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px; border: 1px solid var(--bordo); border-radius: var(--raggio); background: #fff; font-weight: 600; cursor: pointer; color: var(--testo-2); }
.scheda:hover { border-color: var(--bordo-forte); color: var(--testo); }
.scheda.attiva { background: var(--rosso); border-color: var(--rosso); color: #fff; }
.scheda .conta { font-weight: 500; opacity: .85; }
.schede-linea { display: flex; gap: 2px; border-bottom: 1px solid var(--bordo); margin-bottom: 16px; overflow-x: auto; }
.schede-linea .scheda { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; padding: 10px 14px; min-height: auto; }
.schede-linea .scheda.attiva { color: var(--rosso); border-bottom-color: var(--rosso); background: none; }
.schede-segmento { display: flex; background: var(--grigio-chiaro); border-radius: var(--raggio); padding: 3px; gap: 3px; margin-bottom: 14px; }
.schede-segmento .scheda { flex: 1; justify-content: center; border: 0; background: none; min-height: 36px; }
.schede-segmento .scheda.attiva { background: var(--rosso); color: #fff; }

/* ── Filtri e tabelle ───────────────────────────────────────────────────── */
.barra-filtri { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; }
.barra-filtri .cerca { flex: 1 1 260px; }
.barra-filtri .filtro { min-width: 150px; }
.filtro-etichettato { position: relative; }
.filtro-etichettato label { position: absolute; top: 5px; left: 12px; font-size: 11px; color: var(--testo-3); pointer-events: none; }
.filtro-etichettato .input { padding-top: 18px; min-height: 48px; }

.tabella-contenitore { border: 1px solid var(--bordo); border-radius: var(--raggio); overflow-x: auto; background: #fff; }
table.tabella { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabella th { position: sticky; top: 0; background: var(--pannello-2); text-align: left; font-weight: 600; font-size: 13px; color: var(--testo-2); padding: 11px 12px; border-bottom: 1px solid var(--bordo); white-space: nowrap; }
.tabella th a { display: inline-flex; align-items: center; gap: 4px; }
.tabella td { padding: 10px 12px; border-bottom: 1px solid var(--bordo); vertical-align: middle; }
.tabella tbody tr:last-child td { border-bottom: 0; }
.tabella tbody tr:hover { background: #FAFAFB; }
.tabella tbody tr.selezionata { background: #EEF4FF; }
.tabella tbody tr.cliccabile { cursor: pointer; }
.tabella .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabella .centro { text-align: center; }
.tabella .azioni-riga { display: flex; gap: 4px; justify-content: flex-end; }
.tabella .azioni-riga .btn { min-height: 34px; width: 34px; padding: 0; }
/* La colonna delle azioni resta agganciata a destra quando la tabella scorre in orizzontale:
   sotto i ~1360px i "⋯" finivano fuori dal contenitore (visibili a meta` o per niente).
   Vale per le due forme in uso: il gruppo .azioni-riga e il bottone "⋯" messo da solo nella
   cella (Prodotti, Clienti, Magazzino), che prima restava fuori dalla regola. */
.tabella td:has(> .azioni-riga), .tabella td:has(> [data-menu]) { position: sticky; right: 0; background: #fff; box-shadow: -10px 0 10px -10px rgba(17, 24, 39, .18); }
.tabella tbody tr:hover td:has(> .azioni-riga), .tabella tbody tr:hover td:has(> [data-menu]) { background: #FAFAFB; }
.tabella tbody tr.selezionata td:has(> .azioni-riga), .tabella tbody tr.selezionata td:has(> [data-menu]) { background: #EEF4FF; }
.tabella .cella-principale { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.tabella .cella-principale .titolo { font-weight: 600; }
.tabella .cella-principale .sotto { font-size: 12px; color: var(--testo-3); }
.tabella .miniatura { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; background: var(--grigio-chiaro); display: grid; place-items: center; color: var(--testo-4); flex: none; }
.tabella-compatta td, .tabella-compatta th { padding: 7px 10px; }
.tabella tfoot td { font-weight: 700; background: var(--pannello-2); }

.barra-selezione { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; margin-bottom: 10px; border: 1px solid var(--rosso-bordo); background: var(--rosso-chiaro); border-radius: var(--raggio); }
.barra-selezione .conteggio { font-weight: 600; margin-right: 8px; }

.paginazione { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; color: var(--testo-3); }
.paginazione .pagine { display: flex; gap: 4px; }
.paginazione .pagine a, .paginazione .pagine span { min-width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--bordo); background: #fff; color: var(--testo); font-weight: 600; padding: 0 6px; }
.paginazione .pagine .attiva { background: var(--rosso); border-color: var(--rosso); color: #fff; }
.paginazione .pagine .puntini { border: 0; background: none; }

.vuoto { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 40px 20px; color: var(--testo-3); }
.vuoto .ico { width: 40px; height: 40px; color: var(--testo-4); }
.vuoto .titolo { font-weight: 600; color: var(--testo-2); font-size: 15px; }

.scheletro { background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%); background-size: 400% 100%; animation: scheletro 1.4s ease infinite; border-radius: 6px; min-height: 14px; }
@keyframes scheletro { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ── Drawer, modal, toast, menu ─────────────────────────────────────────── */
.velo { position: fixed; inset: 0; background: rgba(17, 24, 39, .35); z-index: 80; animation: appari .15s ease; }
@keyframes appari { from { opacity: 0; } }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(var(--drawer-w), 100vw); background: var(--pannello); z-index: 90; box-shadow: var(--ombra-l); display: flex; flex-direction: column; animation: scorri .2s ease; }
.drawer.largo { width: min(640px, 100vw); }
@keyframes scorri { from { transform: translateX(40px); opacity: 0; } }
.drawer-testa { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 12px; border-bottom: 1px solid var(--bordo); }
.drawer-testa .titoli { flex: 1; min-width: 0; }
.drawer-testa h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.drawer-testa .sotto { color: var(--testo-3); font-size: 13px; margin-top: 4px; }
.drawer-corpo { flex: 1; overflow-y: auto; padding: 16px 20px; }
.drawer-piede { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--bordo); background: var(--pannello); }
.drawer-caricamento { padding: 30px 20px; display: flex; flex-direction: column; gap: 12px; }

.modal-contenitore { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; }
/* Dentro il contenitore il velo sta SOTTO il dialogo: con lo z-index globale del velo (80) coprirebbe i bottoni. */
.modal-contenitore > .velo { z-index: 0; }
.modal-contenitore > .modal { z-index: 1; }
.modal { position: relative; width: min(520px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--pannello); border-radius: var(--raggio-l); box-shadow: var(--ombra-l); animation: sali .15s ease; }
.modal.largo { width: min(820px, 100%); }
.modal.stretto { width: min(400px, 100%); }
@keyframes sali { from { transform: translateY(12px); opacity: 0; } }
.modal-testa { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 6px; }
.modal-corpo { padding: 10px 20px 16px; }
.modal-piede { display: flex; gap: 10px; justify-content: flex-end; padding: 12px 20px 18px; }
.modal .icona-grande { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 10px; background: var(--rosso-chiaro); color: var(--rosso); }

/* I toast stanno sopra tutto (200) ma non devono rubare i clic a quello che coprono: il
   riquadro lascia passare il puntatore e resta cliccabile solo la X. In piu` esse3.js lo
   alza sopra il piede di drawer e modali (--toast-alza), cosi` non ne nasconde i pulsanti. */
.toasts { position: fixed; bottom: calc(18px + var(--toast-alza, 0px)); right: 18px; z-index: 200; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 36px)); pointer-events: none; }
.toast { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; background: #111827; color: #fff; border-radius: var(--raggio); box-shadow: var(--ombra-l); animation: sali .18s ease; font-weight: 500; }
.toast.successo .ico { color: #4ADE80; }
.toast.errore { background: #7F1D1D; }
.toast.avviso .ico { color: #FBBF24; }
.toast .chiudi { margin: -4px -4px -4px auto; background: none; border: 0; color: inherit; opacity: .7; cursor: pointer; padding: 4px; pointer-events: auto; }

/* Fisso e sopra drawer (90) e modal (100): i "⋯" dentro un drawer aprivano il menu sotto il drawer. Sotto i toast (200). */
.menu-tendina { position: fixed; z-index: 150; min-width: 200px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow-y: auto; background: #fff; border: 1px solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra-m); padding: 6px; animation: appari .1s ease; }
.menu-tendina a, .menu-tendina button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; background: none; border-radius: 8px; text-align: left; cursor: pointer; color: var(--testo); font-size: 14px; }
.menu-tendina a:hover, .menu-tendina button:hover { background: var(--pannello-2); }
.menu-tendina .pericolo { color: var(--rosso-testo); }
.menu-tendina hr { border: 0; border-top: 1px solid var(--bordo); margin: 6px 0; }
.menu-tendina .intestazione-menu { padding: 8px 10px; font-size: 12px; color: var(--testo-3); font-weight: 600; }

/* Palette comandi (ricerca globale, spec §43) */
.palette { width: min(640px, 100%); align-self: start; margin-top: 10vh; }
.palette .input-palette { width: 100%; border: 0; border-bottom: 1px solid var(--bordo); padding: 18px 20px 18px 52px; font-size: 17px; outline: none; }
.palette .risultati { max-height: 60vh; overflow-y: auto; padding: 8px; }
.palette .gruppo { font-size: 12px; font-weight: 700; color: var(--testo-3); padding: 10px 12px 4px; text-transform: uppercase; letter-spacing: .04em; }
.palette .risultato { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; cursor: pointer; }
.palette .risultato.attivo, .palette .risultato:hover { background: var(--rosso-chiaro); }
.palette .risultato .sotto { font-size: 12px; color: var(--testo-3); }

/* Notifiche */
.lista-notifiche { width: min(360px, calc(100vw - 16px)); max-height: 70vh; overflow-y: auto; padding: 0; }
.notifica { display: flex; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--bordo); }
.notifica.non-letta { background: #FFFBFB; }
.notifica .titolo { font-weight: 600; }
.notifica .quando { font-size: 11px; color: var(--testo-4); }

/* Elenchi dettaglio (drawer) */
.dettagli { display: grid; grid-template-columns: minmax(110px, 40%) 1fr; gap: 8px 12px; font-size: 14px; }
.dettagli dt { color: var(--testo-3); }
.dettagli dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.sezione { border: 1px solid var(--bordo); border-radius: var(--raggio); padding: 14px 16px; margin-bottom: 12px; }
.sezione-titolo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-weight: 650; }
.nota-gialla { background: #FFFBEB; border: 1px solid #FDE68A; border-radius: var(--raggio); padding: 10px 12px; }
.riga-totale { display: flex; justify-content: space-between; padding: 4px 0; }
.riga-totale.grande { font-size: 20px; font-weight: 800; color: var(--rosso); background: var(--rosso-chiaro); padding: 12px 14px; border-radius: var(--raggio); margin-top: 8px; }
.tessere-azioni { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tessera-azione { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border: 1px solid var(--bordo); border-radius: var(--raggio); background: #fff; font-size: 12px; font-weight: 600; cursor: pointer; text-align: center; min-height: 68px; justify-content: center; }
.tessera-azione:hover { border-color: var(--bordo-forte); background: var(--pannello-2); }
.tessera-azione.pericolo { color: var(--rosso-testo); }

.avviso-box { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--raggio); border: 1px solid; margin-bottom: 12px; }
.avviso-box.info { background: var(--blu-chiaro); border-color: #BFDBFE; color: #1E3A8A; }
.avviso-box.avviso { background: var(--ambra-chiaro); border-color: #FDE68A; color: #78350F; }
.avviso-box.errore { background: var(--rosso-chiaro); border-color: var(--rosso-bordo); color: #7F1D1D; }
.avviso-box.successo { background: var(--verde-chiaro); border-color: #BBF7D0; color: #14532D; }

/* Impostazioni: navigazione laterale (spec §46) */
.impostazioni { display: grid; grid-template-columns: 230px 1fr; gap: 20px; }
.impostazioni-nav { display: flex; flex-direction: column; gap: 2px; }
.impostazioni-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--raggio); color: var(--testo-2); font-weight: 500; }
.impostazioni-nav a:hover { background: var(--pannello-2); }
.impostazioni-nav a.attiva { background: var(--rosso-chiaro); color: var(--rosso); font-weight: 600; }
.impostazioni-nav .gruppo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--testo-4); padding: 14px 12px 4px; }

/* Utilità */
.flex { display: flex; } .flex-col { display: flex; flex-direction: column; } .centra { align-items: center; } .tra { justify-content: space-between; } .fine { justify-content: flex-end; } .avvolgi { flex-wrap: wrap; }
.gap-4 { gap: 4px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.cresci { flex: 1; min-width: 0; }
.mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mb-0 { margin-bottom: 0; } .mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; }
.testo-2 { color: var(--testo-2); } .testo-3 { color: var(--testo-3); } .piccolo { font-size: 12px; } .grassetto { font-weight: 700; } .destra { text-align: right; } .centrato { text-align: center; }
.rosso-t { color: var(--rosso); } .verde-t { color: var(--verde); } .ambra-t { color: var(--ambra); }
.tronca { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nascosto-mobile { }
.solo-mobile { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
.separatore { border: 0; border-top: 1px solid var(--bordo); margin: 14px 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Login ──────────────────────────────────────────────────────────────── */
.login-sfondo { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; background: var(--pannello); }
.login-marchio { background: radial-gradient(circle at 20% 20%, #E3163A 0, var(--rosso) 40%, #8E0B20 100%); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; }
.login-marchio .logo-testo { color: #fff; font-size: 34px; }
.login-marchio .claim { font-size: 30px; font-weight: 750; line-height: 1.2; max-width: 460px; letter-spacing: -0.02em; }
.login-form { display: grid; place-items: center; padding: 32px; }
.login-form .scatola { width: min(400px, 100%); }

/* ── Responsive (spec §53) ──────────────────────────────────────────────── */
/* Header: a ogni gradino si toglie un dettaglio secondario (resta nel title), cosi` nessun
   testo va a capo e la ricerca non si schiaccia. Provato a 375, 768, 820, 1024, 1180, 1280, 1440. */
@media (max-width: 1600px) {
    .header-stato .testo-lungo { display: none; }
}
@media (max-width: 1366px) {
    .header-stato .stato-driver { display: none; }
}
@media (max-width: 1280px) {
    .header .header-cerca { max-width: 360px; }
    .header-data { display: none; }
    .utente-menu .ruolo { display: none; }
    .utente-menu .nome { max-width: 130px; }
    .griglia-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
    .app { grid-template-columns: var(--sidebar-w-ridotta) 1fr; }
    .app .sidebar a.voce { flex-direction: column; gap: 4px; padding: 10px 4px; font-size: 11px; text-align: center; }
    .app .sidebar .versione { display: none; }
    .header .logo { min-width: auto; }
    .header-stato { padding: 7px 10px; max-width: 140px; }
    .header { gap: 10px; overflow: hidden; }
    .header-cerca kbd { display: none; }
    .header-cerca input { padding-right: 12px; }
    .header-destra { gap: 8px; }
    .utente-menu .testi, .header-blocco.negozio .sotto { display: none; }
    .header-blocco.negozio .titolo { max-width: 150px; }
    .pill-online { padding: 8px; }
    .pill-online .testo-lungo { display: none; }
    .griglia-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .impostazioni { grid-template-columns: 1fr; }
    .impostazioni-nav { flex-direction: row; overflow-x: auto; }
    .impostazioni-nav .gruppo { display: none; }
}
@media (max-width: 900px) {
    .header .logo-testo { display: none; }
    .header-blocco.negozio { padding: 6px 10px; }
}
@media (max-width: 760px) {
    .app { grid-template-columns: 1fr; grid-template-areas: "header" "main"; }
    .sidebar { position: fixed; left: 0; top: var(--header-h); bottom: 0; width: 240px; height: auto; z-index: 70; transform: translateX(-100%); transition: transform .2s; }
    .app.menu-aperto .sidebar { transform: none; box-shadow: var(--ombra-l); }
    .app .sidebar a.voce { flex-direction: row; font-size: 14px; text-align: left; padding: 8px 12px; }
    .main { padding: 10px; }
    .pagina { padding: 14px; border-radius: var(--raggio); }
    .header { padding: 0 10px; gap: 8px; }
    .header-cerca, .utente-menu .testi, .utente-menu > .ico, .pill-online .testo-lungo { display: none; }
    .header-destra { gap: 4px; }
    .utente-menu { padding: 3px; }
    /* Il blocco negozio resta solo come icona, e solo se apre il menu di negozio/postazione. */
    .header-blocco.negozio:not([data-menu]) { display: none; }
    .header-blocco.negozio { width: var(--tocco); min-height: var(--tocco); padding: 0; justify-content: center; }
    .header-blocco.negozio > div, .header-blocco.negozio > .ico-s { display: none; }
    .griglia-2, .griglia-3, .griglia-4, .griglia-6, .griglia-form, .griglia-form-3 { grid-template-columns: 1fr; }
    .solo-mobile { display: initial !important; }
    .nascosto-mobile { display: none !important; }
    .login-sfondo { grid-template-columns: 1fr; }
    .login-marchio { display: none; }
    .tessere-azioni { grid-template-columns: repeat(2, 1fr); }
    /* Tabelle dense -> righe impilate */
    .tabella-pila thead { display: none; }
    .tabella-pila tr { display: block; padding: 10px 12px; border-bottom: 1px solid var(--bordo); }
    .tabella-pila td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 3px 0; }
    .tabella-pila td:has(> .azioni-riga), .tabella-pila td:has(> [data-menu]) { position: static; box-shadow: none; background: transparent; }
    .tabella-pila td[data-etichetta]::before { content: attr(data-etichetta); color: var(--testo-3); font-weight: 500; }
}

@media print {
    .header, .sidebar, .toasts, .no-stampa { display: none !important; }
    .app { display: block; }
    .pagina { border: 0; box-shadow: none; }
}