/* =====================================================================================
   NATURAVITA OPERATORI — tema "laboratorio" (ottobre 2026, vedi NaturaVitaAPI/DOC/DESIGN-2026-10.md)
   -------------------------------------------------------------------------------------
   Stessi token e stesse regole base dell'admin (NaturaVitaBLAZOR/wwwroot/css/naturavita-theme.css):
   le parti generali sono copiate da lì, tenerle allineate. Qui in più ciò che serve solo
   all'app operatori: barra in alto al posto del menu laterale, bersagli grandi per il
   tablet in laboratorio, giornata, compiti e task, bacheca, programma del reparto.

   Strati: 1 font · 2 token · 3 rimappatura Radzen · 4 shell operatori · 5 componenti
           NaturaVita · 6 componenti operatori · 7 regole globali · 8 effetti
           · 9 griglie come schede su telefono · 10 riduzione del movimento
   Il tema Material arriva a runtime da <RadzenTheme> e il suo <link> finisce DOPO i css
   di index.html: per vincere la cascata le variabili --rz-* stanno su html:root con
   !important.
   ===================================================================================== */

/* ---------- 1. Font ----------
   Un solo carattere, scelto per la leggibilità: operatori di molte lingue, tablet in
   laboratorio, codici lotto. Cifre tabellari dove servono (importi, pesi). */
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:wght@400;500;600;700&display=swap');

/* ---------- 2. Token ---------- */
html:root {
    --nv-verde: #3E7B4F;
    --nv-verde-rgb: 62, 123, 79;
    --nv-verde-scuro: #2C5A39;
    --nv-verde-chiaro: #E3EFE6;
    --nv-bosco: #1E3A27;            /* menu laterale */
    --nv-bosco-alto: #2A4D35;       /* voce di menu al passaggio */
    --nv-terracotta: #C07A45;       /* solo azione del passo successivo e "sei qui" */
    --nv-terracotta-rgb: 192, 122, 69;
    --nv-terracotta-chiaro: #F6E8DC;
    --nv-terracotta-scuro: #8A4F25;
    --nv-farina: #F2F4EF;           /* fondo app: freddo, non crema */
    --nv-superficie: #FFFFFF;
    --nv-inchiostro: #1C2820;
    --nv-salvia: #5D6B61;           /* testo secondario */
    --nv-bordo: #DCE3D9;
    --nv-bordo-forte: #C3CEC1;
    --nv-menu-testo: #E2ECE4;
    --nv-menu-tenue: #A9C2AF;

    --nv-ok: #3E7B4F;
    --nv-attenzione: #B7791F;
    --nv-attenzione-chiaro: #FBF0DA;
    --nv-errore: #B3372A;
    --nv-errore-chiaro: #F8E3E0;
    --nv-info: #2E6F7E;
    --nv-info-chiaro: #E2EFF2;

    --nv-raggio-campo: 6px;         /* campi e bottoni */
    --nv-raggio: 10px;              /* riquadri */
    --nv-raggio-pillola: 999px;
    --nv-ombra-alta: 0 10px 28px rgba(30, 58, 39, .16);

    --nv-font: 'Atkinson Hyperlegible Next', 'Segoe UI', system-ui, sans-serif;
    --nv-menu-largo: 252px;
}

/* ---------- 3. Rimappatura Radzen ---------- */
html:root {
    --rz-primary: var(--nv-verde) !important;
    --rz-primary-light: #7FAE8C !important;
    --rz-primary-lighter: var(--nv-verde-chiaro) !important;
    --rz-primary-dark: var(--nv-verde-scuro) !important;
    --rz-primary-darker: var(--nv-bosco) !important;

    --rz-secondary: var(--nv-terracotta) !important;
    --rz-secondary-light: #D9A87E !important;
    --rz-secondary-lighter: var(--nv-terracotta-chiaro) !important;
    --rz-secondary-dark: #96582C !important;
    --rz-secondary-darker: #6E3F1E !important;

    --rz-info: var(--nv-info) !important;
    --rz-info-light: #7FB0BC !important;
    --rz-info-lighter: var(--nv-info-chiaro) !important;
    --rz-info-dark: #1F525E !important;
    --rz-success: var(--nv-ok) !important;
    --rz-success-light: #7FAE8C !important;
    --rz-success-lighter: var(--nv-verde-chiaro) !important;
    --rz-success-dark: var(--nv-verde-scuro) !important;
    --rz-warning: var(--nv-attenzione) !important;
    --rz-warning-light: #DDB066 !important;
    --rz-warning-lighter: var(--nv-attenzione-chiaro) !important;
    --rz-warning-dark: #8E5C12 !important;
    --rz-danger: var(--nv-errore) !important;
    --rz-danger-light: #D98177 !important;
    --rz-danger-lighter: var(--nv-errore-chiaro) !important;
    --rz-danger-dark: #8A2A20 !important;

    --rz-body-background-color: var(--nv-farina) !important;
    --rz-base-background-color: var(--nv-farina) !important;
    --rz-panel-background-color: var(--nv-superficie) !important;
    --rz-sidebar-background-color: var(--nv-bosco) !important;
    --rz-header-background-color: var(--nv-superficie) !important;
    --rz-text-color: var(--nv-inchiostro) !important;
    --rz-text-secondary-color: var(--nv-salvia) !important;
    --rz-text-title-color: var(--nv-inchiostro) !important;
    --rz-text-font-family: var(--nv-font) !important;
    --rz-link-color: var(--nv-verde-scuro) !important;
    --rz-link-hover-color: var(--nv-verde) !important;
    --rz-border-radius: var(--nv-raggio-campo) !important;

    /* Token del vecchio tema Diesys ancora letti da diesys.css */
    --primary-color: var(--nv-verde);
    --primary-color-dark: var(--nv-verde-scuro);
}

html, body, .rz-body, .rz-layout, .rz-dialog, .rz-notification, .rz-popup,
.rz-button, input, textarea, select, button {
    font-family: var(--nv-font) !important;
}

body {
    color: var(--nv-inchiostro);
    background: var(--nv-farina);
}

/* Link nel verde del tema (app.css di Bootstrap li colorava di blu). */
a, .btn-link { color: var(--nv-verde-scuro); }
a:hover { color: var(--nv-verde); }

/* Solo app operatori: bersagli da dito e testi un filo più grandi (tablet in
   laboratorio, guanti, operatori di molte lingue). diesys.css porta i campi a 13px e
   colora di giallo/marrone le voci scelte nelle tendine: qui tornano al tema. */
html:root {
    --nv-bersaglio: 48px;              /* altezza minima di bottoni e voci da toccare */
    --nv-attenzione-scuro: #8E5C12;    /* testo su fondo ocra (note, HACCP) */
    --nv-larghezza-pagina: 900px;
    --nv-larghezza-pagina-larga: 1240px;

    --rz-input-font-size: 1rem !important;
    --rz-panel-menu-item-active-background-color: var(--nv-verde-chiaro) !important;
    --rz-dropdown-item-selected-background-color: var(--nv-verde-chiaro) !important;
    --rz-dropdown-item-selected-color: var(--nv-verde-scuro) !important;
    --rz-dropdown-item-active-background-color: var(--nv-verde-chiaro) !important;
    --rz-dropdown-item-active-color: var(--nv-verde-scuro) !important;
}

body { font-size: 1.0625rem; line-height: 1.5; }

/* Caricamento iniziale e barra d'errore di Blazor (app.css li fa blu e giallo) */
.loading-progress circle:last-child { stroke: var(--nv-verde); }
#blazor-error-ui { background: var(--nv-attenzione-chiaro); color: var(--nv-inchiostro); }

/* ---------- 4. Shell dell'app operatori ----------
   Niente menu laterale: le pagine sono poche e si usano su tablet e telefono.
   Una barra verde bosco in alto con il marchio (porta alla bacheca), la voce
   "La mia giornata" e chi è collegato. Etichette sempre visibili: niente
   informazioni affidate al solo passaggio del mouse. */
.nv-app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--nv-farina);
}

.nv-barra {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    min-height: 64px;
    padding: .5rem 1.25rem;
    background: var(--nv-bosco);
    color: var(--nv-menu-testo);
}

/* Marchio: logo su tessera bianca + nome (usato anche nelle pagine di accesso) */
.nv-marchio {
    display: flex;
    align-items: center;
    gap: .65rem;
    min-height: var(--nv-bersaglio);
    color: #FFFFFF;
    text-decoration: none;
}

.nv-marchio:hover { color: #FFFFFF; }

.nv-marchio img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    background: #FFFFFF;
    border-radius: 8px;
    padding: 3px;
    flex: 0 0 auto;
}

.nv-marchio strong { display: block; font-size: 1.05rem; line-height: 1.15; }
.nv-marchio span { display: block; font-size: .82rem; color: var(--nv-menu-tenue); }

.nv-barra > .nv-marchio { margin-right: auto; }

.nv-barra-voci { display: flex; gap: .4rem; }

.nv-barra-voce {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: var(--nv-bersaglio);
    padding: 0 1rem;
    border: 1px solid var(--nv-bosco-alto);
    border-radius: var(--nv-raggio-campo);
    background: transparent;
    color: var(--nv-menu-testo);
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.nv-barra-voce:hover { background: var(--nv-bosco-alto); color: #FFFFFF; }
.nv-barra-voce .material-symbols-outlined { font-size: 1.35rem; }

/* Voce della pagina aperta: "sei qui" (NavLink aggiunge la classe active) */
.nv-barra-voce.active {
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: var(--nv-bosco);
    box-shadow: inset 0 -3px 0 var(--nv-terracotta);
}

.nv-barra-voce.active .material-symbols-outlined { color: var(--nv-verde); }

.nv-barra-utente {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
}

.nv-barra-nome {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
    color: #FFFFFF;
    font-weight: 600;
}

.nv-barra-nome .material-symbols-outlined { color: var(--nv-menu-tenue); font-size: 1.3rem; }

.nv-barra-nome span:last-child {
    max-width: 22ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Contenuto */
.nv-contenuto {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.25rem 1.5rem 2.5rem;
}

.nv-pagina {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: var(--nv-larghezza-pagina);
    margin: 0 auto;
}

.nv-pagina.larga { max-width: var(--nv-larghezza-pagina-larga); }
.nv-pagina > .nv-pagina-testa { margin-bottom: 0; }
.nv-pagina > .nv-riquadro + .nv-riquadro { margin-top: 0; }

@media (max-width: 700px) {
    .nv-barra { padding: .5rem .75rem; }
    .nv-marchio span { display: none; }
    /* Le voci vanno su una seconda riga, a tutta larghezza */
    .nv-barra-voci { order: 3; flex: 1 1 100%; }
    .nv-barra-voci .nv-barra-voce { flex: 1 1 auto; }
    .nv-barra-nome span:last-child { max-width: 12ch; }
    .nv-contenuto { padding: .9rem .75rem 2rem; }
}

@media (max-width: 420px) {
    .nv-barra > .nv-marchio strong { display: none; }
}

/* ---------- 5. Componenti NaturaVita ---------- */

/* Intestazione di pagina: titolo, cosa si fa qui, azioni */
.nv-pagina-testa {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    margin-bottom: 1.1rem;
}

.nv-pagina-testa h1 {
    margin: 0;
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--nv-inchiostro);
    line-height: 1.2;
}

.nv-pagina-testa p {
    margin: .25rem 0 0;
    color: var(--nv-salvia);
    max-width: 70ch;
    font-size: .98rem;
}

.nv-pagina-passo {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .35rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--nv-verde-scuro);
}

.nv-pagina-passo b {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--nv-terracotta);
    color: #FFFFFF;
    font-size: .78rem;
}

.nv-pagina-azioni {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

.nv-briciole {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
    margin-bottom: .4rem;
    font-size: .88rem;
    color: var(--nv-salvia);
}

.nv-briciole a { color: var(--nv-verde-scuro); text-decoration: none; }
.nv-briciole a:hover { text-decoration: underline; }

/* Riquadro di contenuto (bordo sottile al posto dell'ombra) */
.nv-riquadro {
    background: var(--nv-superficie);
    border: 1px solid var(--nv-bordo);
    border-radius: var(--nv-raggio);
    padding: 1rem 1.1rem;
}

.nv-riquadro + .nv-riquadro { margin-top: 1rem; }

.nv-riquadro-titolo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 .75rem;
    font-size: 1.05rem;
    font-weight: 700;
}

.nv-riquadro-titolo a { font-size: .9rem; font-weight: 600; }


/* Pillole di filtro rapido (orizzonte, stato...) */
.nv-pillole { display: flex; flex-wrap: wrap; gap: .35rem; }

.nv-pillola {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    height: 34px;
    padding: 0 .85rem;
    border: 1px solid var(--nv-bordo-forte);
    border-radius: var(--nv-raggio-pillola);
    background: var(--nv-superficie);
    color: var(--nv-inchiostro);
    font-size: .9rem;
    cursor: pointer;
    white-space: nowrap;
}

.nv-pillola:hover { border-color: var(--nv-verde); }

.nv-pillola.attiva {
    background: var(--nv-verde);
    border-color: var(--nv-verde);
    color: #FFFFFF;
    font-weight: 600;
}

.nv-pillola.attiva .nv-conta { background: #FFFFFF; color: var(--nv-verde-scuro); }

/* Etichetta di stato */
.nv-stato {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .12rem .55rem;
    border-radius: var(--nv-raggio-pillola);
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
    background: var(--nv-farina);
    color: var(--nv-salvia);
    border: 1px solid var(--nv-bordo);
}

.nv-stato::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.nv-stato.bozza       { background: #F1F2F0; color: #6B746D; }
.nv-stato.pianificare { background: var(--nv-attenzione-chiaro); color: #8E5C12; border-color: #EBD3A6; }
.nv-stato.produzione  { background: var(--nv-info-chiaro); color: #1F525E; border-color: #BFDAE0; }
.nv-stato.pronto      { background: var(--nv-terracotta-chiaro); color: var(--nv-terracotta-scuro); border-color: #E9CBB1; }
.nv-stato.consegnato,
.nv-stato.ok          { background: var(--nv-verde-chiaro); color: var(--nv-verde-scuro); border-color: #BFD8C6; }
.nv-stato.sospeso     { background: #EEF0F2; color: #4F5A63; }
.nv-stato.annullato,
.nv-stato.errore      { background: var(--nv-errore-chiaro); color: #8A2A20; border-color: #EDC2BC; }

/* Codici (numero ordine, lotto) e numeri: cifre tabellari */
.nv-codice { font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nv-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.nv-tenue { color: var(--nv-salvia); }

/* Elenco compatto cliccabile (consegne, produzioni) */
.nv-elenco { list-style: none; margin: 0; padding: 0; }
.nv-elenco li + li { border-top: 1px solid var(--nv-bordo); }

.nv-elenco a {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem .25rem;
    color: inherit;
    text-decoration: none;
    border-radius: var(--nv-raggio-campo);
}

.nv-elenco a:hover { background: #F3F7F2; color: inherit; }

.nv-elenco-data {
    flex: 0 0 4.2rem;
    font-weight: 700;
    font-size: .88rem;
    color: var(--nv-salvia);
    font-variant-numeric: tabular-nums;
}

.nv-elenco-testo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.nv-elenco-testo strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nv-elenco-testo small { color: var(--nv-salvia); }

@media (max-width: 600px) {
    /* Su telefono la riga dell'elenco va a capo: testo intero, stato sotto. */
    .nv-elenco a { flex-wrap: wrap; gap: .25rem .6rem; }
    .nv-elenco-data { flex: 0 0 auto; }
    .nv-elenco-testo { flex: 1 1 100%; order: 2; }
    .nv-elenco-testo strong { white-space: normal; }
    .nv-elenco a > .nv-stato { order: 1; margin-left: auto; }
}

/* Numeri del cruscotto */
.nv-cifre {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: .75rem;
}

.nv-cifra {
    display: block;
    padding: .85rem 1rem;
    background: var(--nv-superficie);
    border: 1px solid var(--nv-bordo);
    border-radius: var(--nv-raggio);
    color: inherit;
    text-decoration: none;
}

a.nv-cifra:hover { border-color: var(--nv-verde); color: inherit; }

.nv-cifra b { display: block; font-size: 1.6rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.nv-cifra span { color: var(--nv-salvia); font-size: .9rem; }
.nv-cifra.attenzione { border-color: #EBD3A6; background: var(--nv-attenzione-chiaro); }

/* Passo successivo: l'unica azione in terracotta */
.nv-prossimo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    padding: .8rem 1rem;
    border-radius: var(--nv-raggio);
    background: var(--nv-terracotta-chiaro);
    border: 1px solid #E9CBB1;
}

.nv-prossimo p { margin: 0; color: #6E3F1E; }
.nv-prossimo strong { color: #5A3318; }

.rz-button.nv-azione-passo {
    background: var(--nv-terracotta) !important;
    border-color: var(--nv-terracotta) !important;
    color: #FFFFFF !important;
}

.rz-button.nv-azione-passo:not(:disabled):hover { background: #A8653A !important; }

/* Stato vuoto: invito ad agire */
.nv-vuoto {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--nv-salvia);
}

.nv-vuoto .material-symbols-outlined { font-size: 2.2rem; color: var(--nv-bordo-forte); }

/* Pagine di accesso (login, password dimenticata, reimposta) */
.nv-accesso {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(360px, 1fr);
    background: var(--nv-superficie);
}

.nv-accesso-lato {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
    padding: 2.5rem 3rem;
    background: var(--nv-bosco);
    color: var(--nv-menu-testo);
}

.nv-accesso-lato .nv-marchio { padding: 0; }

.nv-accesso-lato h2 {
    margin: 0 0 .75rem;
    font-size: clamp(1.7rem, 2.6vw, 2.4rem);
    line-height: 1.15;
    color: #FFFFFF;
    max-width: 18ch;
}

.nv-accesso-lato p { color: #B9CEBF; max-width: 44ch; margin: 0; }

.nv-accesso-linea {
    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    display: grid;
    gap: .9rem;
    max-width: 30rem;
}

.nv-accesso-linea li { display: flex; align-items: center; gap: .75rem; color: #DCE8DF; }

.nv-accesso-linea li b {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 2px solid #5E8A6B;
    font-size: .85rem;
}

.nv-accesso-linea li:last-child b { background: var(--nv-terracotta); border-color: var(--nv-terracotta); color: #FFFFFF; }

.nv-accesso-piede-lato { font-size: .8rem; color: #8FAA96; }

.nv-accesso-modulo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.5rem clamp(1.25rem, 5vw, 4rem);
}

.nv-accesso-modulo-interno { width: 100%; max-width: 380px; margin: 0 auto; }
.nv-accesso-modulo img.nv-logo { height: 64px; margin-bottom: 1.25rem; }
.nv-accesso-modulo h1 { font-size: 1.6rem; margin: 0 0 .35rem; }
.nv-accesso-modulo .nv-sotto { color: var(--nv-salvia); margin: 0 0 1.5rem; }

.nv-campo { display: flex; flex-direction: column; gap: .3rem; margin-bottom: 1rem; }
.nv-campo label { font-weight: 600; font-size: .92rem; }
.nv-campo .rz-textbox, .nv-campo .rz-password, .nv-campo input { width: 100%; height: 46px; font-size: 1rem; }
.nv-campo small { color: var(--nv-salvia); }

.nv-accesso-riga {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: -.25rem 0 1.25rem;
    font-size: .92rem;
}

.nv-accesso-riga a, .nv-accesso a.nv-link { color: var(--nv-verde-scuro); font-weight: 600; }

.nv-accesso .rz-button.nv-largo { width: 100%; height: 46px; font-size: 1rem; }

.nv-messaggio {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    padding: .75rem .9rem;
    border-radius: var(--nv-raggio-campo);
    margin-bottom: 1rem;
    font-size: .95rem;
}

.nv-messaggio.errore { background: var(--nv-errore-chiaro); color: #7A2419; }
.nv-messaggio.ok { background: var(--nv-verde-chiaro); color: var(--nv-verde-scuro); }
.nv-messaggio.attenzione { background: var(--nv-attenzione-chiaro); color: var(--nv-inchiostro); }

/* Le cifre possono essere bottoni (filtrano la lista): stessa faccia dei link. */
button.nv-cifra { width: 100%; text-align: left; font: inherit; cursor: pointer; }
button.nv-cifra:hover { border-color: var(--nv-verde); }

/* Bottone che si presenta come un link (es. valore modificabile in una riga). */
.nv-link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--nv-verde);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.nv-link:hover { color: var(--nv-verde-scuro); }

@media (max-width: 860px) {
    .nv-accesso { grid-template-columns: 1fr; }
    .nv-accesso-lato { padding: 1.25rem; gap: .75rem; }
    .nv-accesso-lato .nv-accesso-linea,
    .nv-accesso-lato p,
    .nv-accesso-piede-lato { display: none; }
    .nv-accesso-lato h2 { font-size: 1.3rem; margin: 0; }
}

/* ---------- 6. Componenti dell'app operatori ---------- */

/* Aggiunte ai componenti comuni */
.nv-stato.attenzione { background: var(--nv-attenzione-chiaro); color: var(--nv-attenzione-scuro); border-color: #EBD3A6; }
.nv-stato .material-symbols-outlined { font-size: 1rem; }
.nv-stato:has(.material-symbols-outlined)::before { display: none; }

.nv-cifra small { display: block; margin-top: .15rem; color: var(--nv-salvia); font-size: .82rem; }
.nv-cifra.ok b { color: var(--nv-verde-scuro); }
.nv-cifra.attenzione b { color: var(--nv-attenzione-scuro); }
.nv-cifra.errore { border-color: #EDC2BC; background: var(--nv-errore-chiaro); }
.nv-cifra.errore b { color: var(--nv-errore); }

.nv-titolo-icona { display: inline-flex; align-items: center; gap: .45rem; }
.nv-titolo-icona .material-symbols-outlined { color: var(--nv-verde); font-size: 1.4rem; }

.nv-riquadro .nv-messaggio { margin-bottom: 0; }

/* Rotella di caricamento */
.nv-gira { animation: nvGira 1s linear infinite; }
@keyframes nvGira { to { transform: rotate(360deg); } }

/* Scelta del giorno: frecce grandi, data al centro, "Oggi" per tornare */
.nv-giorno {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem .75rem;
    padding: .5rem;
    background: var(--nv-superficie);
    border: 1px solid var(--nv-bordo);
    border-radius: var(--nv-raggio);
}

.nv-giorno-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    min-width: 15rem;
    text-align: center;
}

.nv-giorno-data strong { font-size: 1.2rem; line-height: 1.25; }
.nv-giorno-data strong::first-letter { text-transform: uppercase; }

@media (max-width: 480px) {
    .nv-giorno-data { min-width: 0; flex: 1 1 0; }
    .nv-giorno-data strong { font-size: 1.05rem; }
}

/* Fascia del giorno (mattino / pomeriggio) dentro un riquadro */
.nv-fascia {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 1rem 0 .5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--nv-salvia);
}

.nv-riquadro-titolo + .nv-fascia,
.nv-vuoto + .nv-fascia { margin-top: 0; }
.nv-fascia .material-symbols-outlined { font-size: 1.25rem; }

/* Compiti e task: una scheda per voce, con la striscia di stato a sinistra */
.nv-compiti {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.nv-compito {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem 1rem;
    padding: .9rem 1rem .9rem 1.25rem;
    background: var(--nv-superficie);
    border: 1px solid var(--nv-bordo);
    border-radius: var(--nv-raggio);
    box-shadow: inset 5px 0 0 var(--nv-attenzione);
}

.nv-compito.fatto { box-shadow: inset 5px 0 0 var(--nv-ok); }
.nv-compito.ritardo { box-shadow: inset 5px 0 0 var(--nv-errore); }

.nv-compito-corpo {
    flex: 1 1 320px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.nv-compito-nome { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.nv-compito-nome strong { font-size: 1.18rem; line-height: 1.25; }
.nv-compito-meta { color: var(--nv-salvia); }
.nv-compito-meta strong { color: var(--nv-inchiostro); }
.nv-compito-stati { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }

.nv-compito-azioni {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem;
    margin-left: auto;
}

.nv-compito-piede { flex: 1 1 100%; min-width: 0; }

@media (max-width: 600px) {
    .nv-compito { padding: .8rem .8rem .8rem 1.1rem; }
    .nv-compito-azioni { flex: 1 1 100%; margin-left: 0; }
    .nv-compito-azioni .rz-button { flex: 1 1 auto; }
}

/* Quadratino col colore del tipo (il colore arriva dai dati) */
.nv-colore {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    border-radius: 4px;
    background: var(--nv-verde);
    border: 1px solid var(--nv-bordo-forte);
}

.nv-colore.neutro { background: var(--nv-bordo-forte); }

/* Nota del giorno */
.nv-nota {
    display: flex;
    align-items: flex-start;
    gap: .35rem;
    color: var(--nv-attenzione-scuro);
}

.nv-nota .material-symbols-outlined { font-size: 1.15rem; margin-top: .15rem; }

/* Attività da spuntare: righe alte da toccare, testo cliccabile */
.nv-spunte-titolo { margin: .35rem 0; font-weight: 600; color: var(--nv-salvia); }

.nv-spunte {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--nv-bordo);
}

.nv-spunte li {
    display: flex;
    align-items: center;
    gap: .85rem;
    min-height: var(--nv-bersaglio);
    padding: .3rem .25rem;
    border-bottom: 1px solid var(--nv-bordo);
}

.nv-spunte .rz-chkbox { flex: 0 0 auto; transform: scale(1.35); margin: 0 .3rem; }
.nv-spunte label { flex: 1 1 auto; margin: 0; padding: .35rem 0; font-size: 1.05rem; cursor: pointer; }
.nv-spunte li.eseguita label { text-decoration: line-through; color: var(--nv-salvia); }

/* Bacheca: tessere dei reparti e delle persone (tutta la tessera si tocca) */
.nv-tessere {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .9rem;
}

.nv-tessera {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--nv-superficie);
    border: 1px solid var(--nv-bordo);
    border-radius: var(--nv-raggio);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}

.nv-tessera:hover { border-color: var(--nv-verde); color: inherit; transform: translateY(-2px); }

.nv-tessera-foto,
.nv-tessera-segnaposto {
    display: block;
    width: 100%;
    height: 130px;
    object-fit: cover;
    background: var(--nv-verde-chiaro);
}

.nv-tessera-segnaposto { display: grid; place-items: center; color: var(--nv-verde); }
.nv-tessera-segnaposto .material-symbols-outlined { font-size: 3rem; }

.nv-tessera-testo { display: flex; flex-direction: column; gap: .15rem; padding: .8rem 1rem 1rem; }
.nv-tessera-testo strong { font-size: 1.1rem; }
.nv-tessera-testo small { color: var(--nv-salvia); font-size: .9rem; }

.nv-persone {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .9rem;
}

.nv-persona {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    padding: 1rem .5rem;
    text-align: center;
    background: var(--nv-superficie);
    border: 1px solid var(--nv-bordo);
    border-radius: var(--nv-raggio);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}

.nv-persona:hover { border-color: var(--nv-verde); color: inherit; transform: translateY(-2px); }
.nv-persona strong { margin-top: .5rem; font-size: 1.05rem; }
.nv-persona small { color: var(--nv-salvia); font-size: .9rem; }

/* Foto della persona o iniziali nel cerchio */
.nv-ritratto {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--nv-verde);
    background: var(--nv-verde-chiaro);
    color: var(--nv-verde-scuro);
    font-size: 1.75rem;
    font-weight: 700;
}

.nv-ritratto.piccolo { width: 52px; height: 52px; border-width: 2px; font-size: 1.1rem; }

@media (max-width: 480px) {
    .nv-tessere { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
    .nv-tessera-foto, .nv-tessera-segnaposto { height: 96px; }
    .nv-persone { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .6rem; }
    .nv-persona .nv-ritratto { width: 72px; height: 72px; }
}

/* Programma del reparto: tabella per i maxi schermi, schede impilate su telefono */
.nv-programma-scorri { overflow-x: auto; padding: .5rem; }

.nv-programma {
    width: 100%;
    min-width: 860px;
    border-collapse: separate;
    border-spacing: 0;
}

.nv-programma th {
    padding: .65rem .75rem;
    background: var(--nv-bosco);
    color: #FFFFFF;
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
}

.nv-programma th:first-child { border-top-left-radius: var(--nv-raggio-campo); }
.nv-programma th:last-child { border-top-right-radius: var(--nv-raggio-campo); }
.nv-programma th .material-symbols-outlined { font-size: 1.15rem; vertical-align: -3px; margin-right: .2rem; }
.nv-programma th.haccp { background: var(--nv-attenzione-scuro); }

.nv-programma td {
    padding: .65rem .75rem;
    vertical-align: top;
    border-bottom: 1px solid var(--nv-bordo);
}

.nv-programma td.chi { width: 210px; background: var(--nv-farina); }
.nv-programma td.haccp { background: var(--nv-attenzione-chiaro); }

.nv-chi { display: flex; align-items: center; gap: .6rem; font-weight: 700; }

.nv-voce {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    margin-bottom: .4rem;
    padding: .45rem .6rem;
    background: var(--nv-superficie);
    border: 1px solid var(--nv-bordo);
    border-left: 4px solid var(--nv-verde);
    border-radius: var(--nv-raggio-campo);
}

.nv-voce.haccp { border-left-color: var(--nv-attenzione); }
.nv-voce-riga { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.nv-voce small { color: var(--nv-salvia); font-size: .88rem; }

@media (max-width: 767px) {
    .nv-programma-scorri.nv-riquadro { padding: 0; background: transparent; border: 0; overflow: visible; }
    .nv-programma { min-width: 0; }
    .nv-programma thead { display: none; }
    .nv-programma, .nv-programma tbody, .nv-programma tr, .nv-programma td { display: block; width: 100%; }

    .nv-programma tr {
        margin-bottom: .9rem;
        overflow: hidden;
        background: var(--nv-superficie);
        border: 1px solid var(--nv-bordo);
        border-radius: var(--nv-raggio);
    }

    .nv-programma td:last-child { border-bottom: 0; }
    .nv-programma td.chi { width: 100%; }

    .nv-programma td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: .35rem;
        font-size: .88rem;
        font-weight: 600;
        color: var(--nv-salvia);
    }

    .nv-programma td[data-label]:not(:has(.nv-voce))::after { content: "—"; color: var(--nv-salvia); }
}

/* Finestra informazioni di compiti e task */
.nv-info { display: flex; flex-direction: column; gap: 1rem; }
.nv-info > .nv-riquadro + .nv-riquadro { margin-top: 0; }
.nv-info .nv-riquadro.nota { background: var(--nv-attenzione-chiaro); border-color: #EBD3A6; }
.nv-info-testo { margin: 0; white-space: pre-line; font-size: 1.05rem; }
.nv-info-etichetta { margin: 0 0 .4rem; font-size: 1rem; font-weight: 700; }
.nv-info-etichetta.errore { color: var(--nv-errore); }

.nv-foto {
    display: block;
    max-width: 100%;
    max-height: 340px;
    object-fit: contain;
    border: 1px solid var(--nv-bordo);
    border-radius: var(--nv-raggio-campo);
}

.nv-foto.errore { border: 2px solid var(--nv-errore); }

.nv-info-piede { display: flex; justify-content: flex-end; }

@media (max-width: 600px) {
    .nv-info-piede .rz-button { width: 100%; }
}

/* Pagine di accesso: righe che vanno a capo e link alti abbastanza da toccare */
.nv-accesso-riga { flex-wrap: wrap; }
.nv-ricordami { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; }
.nv-ricordami .rz-label { margin: 0; cursor: pointer; }
.nv-accesso a.nv-link,
.nv-accesso-riga a { display: inline-flex; align-items: center; min-height: 44px; }
.nv-accesso-torna { margin: 1rem 0 0; }

/* ── Produzione (09/10/2026): elenco del giorno e fase a passi ──────────────────
   Bersagli grandi (tablet con guanti, mani infarinate), una sola azione evidente
   per schermata, stato leggibile anche senza leggere: icona + colore + numero. */
.nv-messaggio.info { background: var(--nv-info-chiaro); color: #1F525E; }
.nv-conta {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.6rem; height: 1.6rem; padding: 0 .4rem;
    border-radius: var(--nv-raggio-pillola);
    background: var(--nv-farina); color: var(--nv-salvia);
    font-size: .85rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.nv-pillole-grandi { margin-bottom: 1rem; }
.nv-pillole-grandi .nv-pillola { height: 48px; padding: 0 1.1rem; font-size: 1rem; }

.rz-button.nv-bottone-grande { min-height: 56px; padding: 0 1.4rem; font-size: 1.1rem; font-weight: 700; }

.nv-produzione-ricetta { margin: 0; font-size: 1.35rem; line-height: 1.2; }
.nv-produzione-meta {
    display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: center;
    margin: .3rem 0 .8rem; color: var(--nv-salvia);
}

/* Pallini delle fasi: fatta (verde), in corso (blu), di turno, bloccata (lucchetto) */
.nv-passi {
    display: flex; flex-wrap: wrap; gap: .4rem; list-style: none;
    margin: 0 0 .9rem; padding: 0;
}
.nv-passo {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .25rem .65rem .25rem .25rem;
    border: 1px solid var(--nv-bordo); border-radius: var(--nv-raggio-pillola);
    background: var(--nv-superficie); color: var(--nv-salvia); font-size: .9rem;
}
.nv-passo-numero {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.9rem; height: 1.9rem; border-radius: 50%;
    background: var(--nv-farina); color: var(--nv-inchiostro); font-weight: 700;
}
.nv-passo-numero .material-symbols-outlined { font-size: 1.15rem; }
.nv-passo.fatta { border-color: #BFD8C6; color: var(--nv-verde-scuro); }
.nv-passo.fatta .nv-passo-numero { background: var(--nv-verde); color: #FFFFFF; }
.nv-passo.in_corso { border-color: #BFDAE0; color: #1F525E; }
.nv-passo.in_corso .nv-passo-numero { background: var(--nv-info); color: #FFFFFF; }
.nv-passo.bloccata { opacity: .6; }
.nv-passo.turno { border-color: var(--nv-terracotta); color: var(--nv-inchiostro); font-weight: 700; }
.nv-passo.mia .nv-passo-nome { text-decoration: underline; text-underline-offset: 3px; }

.nv-turno {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: .75rem 1rem; padding: .9rem 1rem;
    border-radius: var(--nv-raggio); border: 1px solid #E9CBB1;
    background: var(--nv-terracotta-chiaro);
}
.nv-turno.altrui { border-color: var(--nv-bordo); background: var(--nv-farina); }
.nv-turno p { margin: 0; }
.nv-turno-quale { color: var(--nv-salvia); font-size: .9rem; }
.nv-turno-nome { font-size: 1.3rem; font-weight: 700; }
.nv-turno-azioni { display: flex; flex-wrap: wrap; gap: .5rem; }
.nv-altrui { flex-wrap: wrap; align-items: center; }
.nv-altrui .rz-button { margin-left: auto; }
.nv-turno-chi { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; margin-top: .2rem !important; }

/* Scheda della fase */
.nv-pagina-fase { max-width: 980px; margin: 0 auto; }
.nv-cosa { display: flex; flex-wrap: wrap; gap: .75rem 2rem; margin-bottom: 1rem; }
.nv-cosa > div { display: flex; flex-direction: column; gap: .1rem; }
.nv-cosa strong { font-size: 1.15rem; }
.nv-cosa-largo { flex-basis: 100%; }
.nv-procedura { margin: 0 0 1rem; font-size: 1.15rem; line-height: 1.55; white-space: pre-line; }
.nv-foto-fase { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; }
.nv-foto-fase figure { margin: 0; display: flex; flex-direction: column; gap: .35rem; }
.nv-foto-fase figcaption { display: flex; flex-direction: column; font-size: .95rem; }
.nv-foto-apri { padding: 0; border: 1px solid var(--nv-bordo); border-radius: var(--nv-raggio); background: none; cursor: zoom-in; overflow: hidden; }
.nv-foto-apri img { display: block; width: 100%; height: 180px; object-fit: cover; }
.nv-foto-attesa {
    display: flex; align-items: center; justify-content: center; height: 180px;
    border: 1px dashed var(--nv-bordo-forte); border-radius: var(--nv-raggio); color: var(--nv-salvia);
}
.nv-foto-grande img { display: block; max-width: 100%; max-height: 75vh; margin: 0 auto; }
.nv-foto-grande p { margin: .75rem 0 0; font-size: 1.1rem; }
.nv-inizia, .nv-finito { margin: 1rem 0; }
.nv-iniziata { display: flex; align-items: center; gap: .4rem; margin: .5rem 0 1rem; }

/* Pesate: una riga per ingrediente, quella aperta ha il modulo */
.nv-pesate { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.nv-pesa { border: 1px solid var(--nv-bordo); border-radius: var(--nv-raggio); background: var(--nv-superficie); }
.nv-pesa.ok { border-color: #BFD8C6; }
.nv-pesa.fuori { border-color: #EBD3A6; background: var(--nv-attenzione-chiaro); }
.nv-pesa.aperta { border-color: var(--nv-terracotta); box-shadow: 0 0 0 2px rgba(var(--nv-terracotta-rgb), .18); }
.nv-pesa-testa {
    display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 60px;
    padding: .6rem .9rem; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.nv-pesa-testa:disabled { cursor: default; }
.nv-pesa-icona { font-size: 1.8rem; color: var(--nv-bordo-forte); }
.nv-pesa.ok .nv-pesa-icona { color: var(--nv-verde); }
.nv-pesa.fuori .nv-pesa-icona { color: var(--nv-attenzione); }
.nv-pesa-nome { flex: 1; display: flex; flex-direction: column; font-size: 1.15rem; }
.nv-pesa-nome small { color: var(--nv-salvia); font-size: .85rem; }
.nv-pesa-quanto { font-size: 1.15rem; white-space: nowrap; }
.nv-pesa-avviso { display: flex; align-items: center; gap: .4rem; margin: 0 .9rem .5rem; color: #8E5C12; font-weight: 600; }
.nv-pesa .nv-nota { margin: 0 .9rem .5rem; }
.nv-pesa-fatte { list-style: none; margin: 0 .9rem .6rem; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.nv-pesa-fatte li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; }
/* Cambio lotto in corsa (19/10): "Altro lotto" sotto le pesate di una riga gia' iniziata */
.nv-altro-lotto { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .8rem; margin: 0 .9rem .6rem; font-size: .9rem; }
.nv-pesa-modulo {
    display: flex; flex-direction: column; gap: .75rem;
    padding: .9rem; border-top: 1px solid var(--nv-bordo); background: var(--nv-farina);
    border-radius: 0 0 var(--nv-raggio) var(--nv-raggio);
}
.nv-campo-grande { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; }
.nv-campo-grande input {
    height: 60px; padding: 0 1rem; font: inherit; font-size: 1.5rem; font-variant-numeric: tabular-nums;
    border: 2px solid var(--nv-bordo-forte); border-radius: var(--nv-raggio-campo); background: var(--nv-superficie); color: var(--nv-inchiostro);
}
.nv-campo-grande input:focus { outline: none; border-color: var(--nv-verde); box-shadow: 0 0 0 3px rgba(var(--nv-verde-rgb), .2); }
.nv-lotto-scelto { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; margin: 0; }
.nv-lotti { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .5rem; }
.nv-lotto {
    display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; min-height: 60px;
    padding: .55rem .8rem; border: 1px solid var(--nv-bordo-forte); border-radius: var(--nv-raggio-campo);
    background: var(--nv-superficie); font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.nv-lotto:hover, .nv-lotto.scelto { border-color: var(--nv-verde); background: var(--nv-verde-chiaro); }
.nv-elenco-semplice { margin: 0 0 1rem; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .3rem; font-size: 1.05rem; }
.nv-dopo { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .75rem; }

@media (max-width: 600px) {
    .nv-pesa-testa { flex-wrap: wrap; }
    .nv-pesa-quanto { width: 100%; padding-left: 2.55rem; }
    .nv-turno .rz-button { width: 100%; }
}

/* ---------- 7. Regole globali ---------- */
.rz-card {
    border-radius: var(--nv-raggio) !important;
    border: 1px solid var(--nv-bordo) !important;
    box-shadow: none !important;
}

.rz-button {
    border-radius: var(--nv-raggio-campo) !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;  /* Material mette i bottoni in maiuscolo */
}

.rz-tabview-nav li a, .rz-tabview-nav .rz-tabview-title { text-transform: none !important; letter-spacing: 0 !important; }

.rz-data-grid {
    border-radius: var(--nv-raggio) !important;
    border: 1px solid var(--nv-bordo) !important;
    background: var(--nv-superficie);
}

.rz-data-grid .rz-grid-table thead th {
    background: #F6F8F4 !important;
    color: var(--nv-salvia) !important;
    font-weight: 600 !important;
    border-bottom: 1px solid var(--nv-bordo) !important;
}

.rz-data-grid .rz-grid-table td { font-variant-numeric: tabular-nums; }

/* Celle piu' compatte del Material (16px per lato): a parita' di schermo entrano
   piu' colonne e la tabella smette di sbordare a destra tagliando le azioni. */
.rz-data-grid .rz-grid-table td,
.rz-data-grid .rz-grid-table th { padding-left: .6rem !important; padding-right: .6rem !important; }
.rz-data-grid .rz-grid-table td { padding-top: .55rem !important; padding-bottom: .55rem !important; }
.rz-data-grid .rz-grid-table th { padding-top: .5rem !important; padding-bottom: .5rem !important; }

/* Titoli di colonna un filo piu' piccoli del corpo: entrano senza puntini. */
.rz-data-grid .rz-grid-table thead th { font-size: .85rem !important; }
.rz-data-grid .rz-grid-table thead th .rz-column-title-content { text-overflow: clip !important; }

/* Titoli di colonna: vanno a capo SOLO fra le parole. La vecchia regola
   (word-break) spezzava a meta' parola ("Righ e"). */
.rz-grid-table th .rz-column-title,
.rz-data-grid-data th,
.rz-data-grid-data .rz-column-title-content {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none;
}

/* diesys.css mette le celle in white-space: break-spaces: gli a-capo e i rientri
   del markup dei template diventavano righe vere (icone ed etichette che vanno
   a capo da sole). Il testo va a capo normalmente, fra le parole. */
.rz-data-grid .rz-cell-data,
.rz-datatable-data td .rz-cell-data,
.rz-grid-table td .rz-cell-data { white-space: normal !important; }

/* Codici (ordine, lotto) dentro le celle: mai tagliati coi puntini. */
.rz-data-grid .rz-cell-data:has(.nv-codice) { text-overflow: clip; overflow: visible; }

/* Colonna azioni fissa a destra: mentre la tabella scorre resta visibile, con
   uno sfondo pieno e un'ombra sul bordo che dice "qui sotto c'e' altro". */
.rz-data-grid .rz-frozen-cell-right {
    background: var(--nv-superficie) !important;
    box-shadow: -6px 0 8px -6px rgba(30, 58, 39, .25);
}
.rz-data-grid thead .rz-frozen-cell-right { background: #F6F8F4 !important; }
.rz-data-grid tbody tr.rz-data-row:hover .rz-frozen-cell-right { background: #F3F7F2 !important; }

/* Paginazione sempre per intero: va a capo invece di uscire dal riquadro. */
.rz-data-grid .rz-pager, .rz-pager { flex-wrap: wrap; row-gap: .25rem; }
.rz-pager-summary { white-space: nowrap; }


.rz-dialog-titlebar { border-bottom: 1px solid var(--nv-bordo); }
.rz-dialog-title { font-weight: 700 !important; }

/* Scrollbar e selezione col brand */
* { scrollbar-width: thin; scrollbar-color: #9DB4A3 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #9DB4A3; border: 2px solid var(--nv-farina); border-radius: 6px; }
::selection { background: var(--nv-terracotta-chiaro); color: var(--nv-bosco); }

/* Focus visibile da tastiera */
:focus-visible { outline: 2px solid var(--nv-terracotta); outline-offset: 2px; }

/* ---------- 8. Effetti (con misura: rispondono a un'azione, non decorano) ---------- */
.rz-button { transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease !important; }
.rz-button:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(var(--nv-verde-rgb), .18); }
.rz-button:not(:disabled):active { transform: translateY(0) scale(.98); transition-duration: .05s !important; }
.rz-button:disabled { filter: saturate(.4) opacity(.7); cursor: not-allowed; }

.rz-textbox, .rz-password, .rz-textarea, .rz-dropdown, .rz-multiselect,
.rz-datepicker .rz-inputtext, .rz-numeric .rz-textbox {
    transition: border-color .15s ease, box-shadow .15s ease !important;
}

.rz-textbox:focus, .rz-password:focus, .rz-textarea:focus,
.rz-dropdown.rz-state-focused, .rz-multiselect.rz-state-focused,
.rz-datepicker .rz-inputtext:focus, .rz-numeric .rz-textbox:focus {
    border-color: var(--nv-verde) !important;
    box-shadow: 0 0 0 3px rgba(var(--nv-verde-rgb), .16) !important;
    outline: none !important;
}

.rz-data-grid .rz-grid-table tbody tr.rz-data-row { transition: background-color .12s ease; }
.rz-data-grid .rz-grid-table tbody tr.rz-data-row:hover {
    background: #F3F7F2 !important;
    box-shadow: inset 3px 0 0 var(--nv-verde);
}

.rz-pager .rz-pager-page { border-radius: var(--nv-raggio-pillola) !important; }
.rz-pager .rz-pager-page.rz-state-active { background: var(--nv-verde) !important; color: #FFFFFF !important; }

.rz-dialog-mask { background: rgba(30, 58, 39, .45) !important; animation: nvFade .18s ease; }
.rz-dialog { animation: nvDialog .22s cubic-bezier(.2, .9, .3, 1); }
.rz-notification-item { animation: nvNotifica .25s cubic-bezier(.2, .9, .3, 1); }

@keyframes nvFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nvDialog { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes nvNotifica { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

/* Variabili lette dal blocco "griglie come schede" e da pagine esistenti */
html:root {
    --fx-primary: var(--nv-verde);
    --fx-primary-rgb: var(--nv-verde-rgb);
    --fx-accent: var(--nv-terracotta);
    --fx-accent-rgb: var(--nv-terracotta-rgb);
    --fx-accent-soft: var(--nv-terracotta-chiaro);
    --fx-surface-tint: #EEF4EF;
    --fx-bg: var(--nv-farina);
    --fx-danger: var(--nv-errore);
}

/* Bersagli da dito: nessun bottone sotto i 44px, i grandi a 48px */
.rz-button { min-height: 44px; }
.rz-button.rz-button-icon-only { min-width: 44px; }
.rz-button.rz-button-lg { min-height: var(--nv-bersaglio); font-size: 1.05rem !important; }

/* ---------- 9. Griglie come schede su telefono + skeleton ---------- */
/* ---------- Skeleton loading (componente SkeletonGriglia) ---------- */
.nv-skeleton {
    padding: 0.25rem 0;
}

.nv-skeleton-header,
.nv-skeleton-row {
    display: flex;
    gap: 1rem;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid #EEF2EE;
}

.nv-skeleton-header .nv-skeleton-cell {
    height: 14px;
    background-color: #D8E4DA;
}

.nv-skeleton-cell {
    flex: 1 1 0;
    height: 12px;
    border-radius: 6px;
    background-color: #E9EFEA;
}

.nv-skeleton-shimmer {
    position: relative;
    overflow: hidden;
}

    .nv-skeleton-shimmer::after {
        content: "";
        position: absolute;
        inset: 0;
        transform: translateX(-100%);
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
        animation: nv-shimmer 1.4s infinite;
    }

@keyframes nv-shimmer {
    100% {
        transform: translateX(100%);
    }
}


/* =====================================================================================
   GRIGLIE COME CARD SU MOBILE (pattern SioPROD)
   -------------------------------------------------------------------------------------
   Sotto i 768px ogni riga di RadzenDataGrid diventa una scheda: header nascosto,
   celle impilate con l'etichetta della colonna presa da data-label (impostata
   dallo script in index.html). Layer globale: nessuna modifica alle singole pagine.
   ===================================================================================== */

@media (max-width: 767px) {
    /* diesys.css forza overflow-x: scroll sulle griglie: sulle card non serve
       (occupano il 100% del viewport) e lascerebbe una scrollbar vuota */
    .rz-data-grid {
        overflow-x: visible !important;
    }

    /* Header di tabella nascosto: le etichette vivono nelle celle */
    .rz-data-grid .rz-grid-table thead {
        display: none !important;
    }

    .rz-data-grid .rz-grid-table,
    .rz-data-grid .rz-grid-table tbody {
        display: block !important;
        width: 100% !important;
    }

    /* Ogni riga diventa una scheda */
    .rz-data-grid .rz-grid-table tbody tr.rz-data-row {
        display: block !important;
        margin: 0 0 12px 0;
        border: 1px solid rgba(var(--fx-primary-rgb), .18);
        border-radius: 10px;
        padding: 8px 12px;
        background: var(--nv-superficie);
        box-shadow: 0 1px 3px rgba(var(--fx-primary-rgb), .10);
    }

    /* Celle impilate: etichetta a sinistra, valore a destra */
    .rz-data-grid .rz-grid-table tbody tr.rz-data-row > td {
        display: flex !important;
        align-items: baseline;
        gap: 8px;
        width: 100% !important;
        border: none !important;
        padding: 3px 0 !important;
        text-align: left !important;
    }

    .rz-data-grid .rz-grid-table tbody tr.rz-data-row > td::before {
        content: attr(data-label);
        flex: 0 0 38%;
        max-width: 38%;
        font-size: 0.72rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        color: var(--nv-salvia); /* stesso grigio-verde delle etichette di sezione sidebar */
    }

    /* Celle senza titolo di colonna (es. colonna azioni): niente etichetta */
    .rz-data-grid .rz-grid-table tbody tr.rz-data-row > td[data-label=""]::before,
    .rz-data-grid .rz-grid-table tbody tr.rz-data-row > td:not([data-label])::before {
        display: none;
    }

    /* Colonna azioni: i bottoni restano visibili e usabili, allineati a destra
       su tutta la larghezza della scheda (diesys.css impone nowrap/max-content:
       qui va ribaltato per non sforare dalla card) */
    .rz-data-grid .rz-grid-table tbody tr.rz-data-row > td .rz-cell-data .rz-stack,
    .rz-data-grid .rz-grid-table tbody tr.rz-data-row > td .rz-stack {
        width: 100%;
        min-width: 0;
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    /* L'hover "riga viva" (gradiente + barra accento) non ha senso sulle schede */
    .rz-data-grid .rz-grid-table tbody tr.rz-data-row:hover {
        background: var(--nv-superficie) !important;
        box-shadow: 0 1px 3px rgba(var(--fx-primary-rgb), .10);
    }
}

/* ---------- 10. OBBLIGATORIO in chiusura: riduzione del movimento ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}