/* =====================================================================================
   NATURAVITA — tema "laboratorio" (ottobre 2026, vedi NaturaVitaAPI/DOC/DESIGN-2026-10.md)
   -------------------------------------------------------------------------------------
   Strati: 1 font · 2 token · 3 rimappatura Radzen · 4 shell · 5 componenti NaturaVita
           · 6 regole globali · 7 effetti · 8 griglie come schede su telefono · 9 stampa
   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 (stessa tecnica del tema precedente).
   ===================================================================================== */

/* ---------- 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); }

/* ---------- 4. Shell ---------- */

/* Testata: bianca e sottile, con il bottone del menu e la ricerca "Vai a…".
   Il marchio sta nel menu laterale; in testata compare solo su telefono. */
.rz-header {
    background: var(--nv-superficie) !important;
    color: var(--nv-inchiostro) !important;
    border-bottom: 1px solid var(--nv-bordo) !important;
    box-shadow: none !important;
    min-height: 56px;
}

.rz-header .rz-sidebar-toggle {
    color: var(--nv-inchiostro) !important;
    background: transparent !important;
    border-radius: var(--nv-raggio-campo);
}

.rz-header .rz-sidebar-toggle:hover { background: var(--nv-farina) !important; }

.nv-testata {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    height: 100%;
    padding: 0 1rem;
}

.nv-testata-marchio {
    display: none;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    color: var(--nv-bosco);
    white-space: nowrap;
}

.nv-testata-marchio img { height: 28px; }

/* Ricerca "Vai a…" (pagine) */
.nv-vai {
    position: relative;
    flex: 0 1 420px;
    margin-left: auto;
}

.nv-vai input {
    width: 100%;
    height: 38px;
    padding: 0 .75rem 0 2.25rem;
    border: 1px solid var(--nv-bordo);
    border-radius: var(--nv-raggio-campo);
    background: var(--nv-farina);
    color: var(--nv-inchiostro);
    font-size: .95rem;
}

.nv-vai input:focus {
    outline: none;
    border-color: var(--nv-verde);
    background: var(--nv-superficie);
    box-shadow: 0 0 0 3px rgba(var(--nv-verde-rgb), .16);
}

.nv-vai > .material-symbols-outlined {
    position: absolute;
    left: .6rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--nv-salvia);
    font-size: 1.2rem;
    pointer-events: none;
}

.nv-vai-risultati {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1100;
    background: var(--nv-superficie);
    border: 1px solid var(--nv-bordo);
    border-radius: var(--nv-raggio);
    box-shadow: var(--nv-ombra-alta);
    padding: .25rem;
    max-height: 60vh;
    overflow-y: auto;
}

.nv-vai-risultato {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: .55rem .7rem;
    border: 0;
    border-radius: var(--nv-raggio-campo);
    background: transparent;
    color: var(--nv-inchiostro);
    text-align: left;
    cursor: pointer;
}

.nv-vai-risultato:hover, .nv-vai-risultato.selezionato { background: var(--nv-verde-chiaro); }
.nv-vai-risultato small { color: var(--nv-salvia); }
.nv-vai-nessuno { padding: .6rem .7rem; color: var(--nv-salvia); }

/* Menu laterale: verde bosco */
.rz-sidebar {
    background: var(--nv-bosco) !important;
    border-right: 0 !important;
    color: var(--nv-menu-testo);
}

.rz-sidebar.rz-sidebar-expanded { width: var(--nv-menu-largo) !important; }

.nv-menu {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.nv-menu-marchio {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: 1rem 1rem .85rem;
    color: #FFFFFF;
    text-decoration: none;
}

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

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

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

.nv-menu-voci {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: .25rem .5rem 1rem;
    scrollbar-color: var(--nv-bosco-alto) transparent;
}

.nv-menu-sezione {
    display: block;
    margin: 1rem .6rem .35rem;
    font-size: .8rem;
    font-weight: 600;
    color: #93B09A;
}

.nv-menu .rz-panel-menu { background: transparent !important; border: 0 !important; }
.nv-menu .rz-navigation-item { border: 0 !important; background: transparent !important; }

.nv-menu .rz-navigation-item-link {
    color: var(--nv-menu-testo) !important;
    border-radius: var(--nv-raggio-campo);
    padding: .5rem .65rem !important;
    margin: 1px 0;
    font-size: .95rem;
    transition: background-color .15s ease, color .15s ease;
}

.nv-menu .rz-navigation-item-link:hover {
    background: var(--nv-bosco-alto) !important;
    color: #FFFFFF !important;
}

.nv-menu .rz-navigation-item-icon,
.nv-menu .rz-navigation-item-icon-children { color: var(--nv-menu-tenue) !important; }

.nv-menu .rz-navigation-item-link-active,
.nv-menu .rz-navigation-item-link.rz-state-active {
    background: #FFFFFF !important;
    color: var(--nv-bosco) !important;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--nv-terracotta);
}

.nv-menu .rz-navigation-item-link-active .rz-navigation-item-icon { color: var(--nv-verde) !important; }

.nv-menu .rz-navigation-menu { background: transparent !important; padding-left: .4rem; }

/* Le voci di secondo livello hanno uno sfondo chiaro di Radzen: sul verde bosco
   il testo chiaro spariva. */
.nv-menu .rz-navigation-item-wrapper,
.nv-menu .rz-navigation-item-wrapper:hover,
.nv-menu .rz-navigation-item-wrapper-active { background: transparent !important; }

.nv-menu .rz-navigation-menu .rz-navigation-item-link {
    font-size: .9rem;
    padding: .4rem .65rem .4rem 2.4rem !important;
}

/* Numero del passo nel percorso dell'ordine (1-4): è una sequenza vera */
.nv-passo-num {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    margin-left: auto;
    border-radius: 50%;
    border: 1.5px solid #6F9479;
    color: #DCE8DF;
    font-size: .72rem;
    font-weight: 700;
    flex: 0 0 auto;
}

.rz-navigation-item-link-active .nv-passo-num {
    border-color: var(--nv-terracotta);
    background: var(--nv-terracotta);
    color: #FFFFFF;
}

/* Profilo in fondo al menu */
.nv-menu-utente {
    border-top: 1px solid var(--nv-bosco-alto);
    padding: .75rem .9rem .9rem;
}

.nv-menu-utente-riga {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .6rem;
}

.nv-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    background: var(--nv-bosco-alto);
    color: #FFFFFF;
    font-weight: 700;
    font-size: .85rem;
}

.nv-menu-utente-nome { min-width: 0; }

.nv-menu-utente-nome strong {
    display: block;
    color: #FFFFFF;
    font-size: .92rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nv-menu-utente-nome span { display: block; color: var(--nv-menu-tenue); font-size: .78rem; }

.nv-menu-utente-azioni { display: flex; gap: .4rem; }

.nv-menu-utente-azioni button {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    height: 34px;
    border: 1px solid var(--nv-bosco-alto);
    border-radius: var(--nv-raggio-campo);
    background: transparent;
    color: var(--nv-menu-testo);
    font-size: .82rem;
    cursor: pointer;
}

.nv-menu-utente-azioni button:hover { background: var(--nv-bosco-alto); color: #FFFFFF; }
.nv-menu-utente-azioni .material-symbols-outlined { font-size: 1.05rem; }

/* Menu ridotto (solo icone): niente testi accessori */
.rz-sidebar-collapsed .nv-menu-sezione,
.rz-sidebar-collapsed .nv-menu-marchio div,
.rz-sidebar-collapsed .nv-menu-utente-nome,
.rz-sidebar-collapsed .nv-menu-utente-azioni .nv-etichetta,
.rz-sidebar-collapsed .nv-passo-num { display: none !important; }

.rz-sidebar-collapsed .nv-menu-utente-azioni { flex-direction: column; }

/* Contenuto */
.rz-body {
    background: var(--nv-farina) !important;
    padding: 1.25rem 1.5rem 2rem !important;
    min-width: 0; /* senza, le griglie larghe sfondano il layout invece di scorrere */
}

@media (max-width: 767px) {
    .rz-body { padding: .9rem .75rem 1.5rem !important; }
    .nv-testata-marchio { display: inline-flex; }
    .nv-vai { flex: 1 1 auto; }
}

/* ---------- 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; }

/* Fase della ricetta compatta (19/10): testata su una riga, cifre in una riga,
   bottoni "+" sempre visibili, tabelle solo se hanno righe. */
.nv-fase { padding: .7rem .9rem; }
.nv-fase-testa { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .6rem; }
.nv-fase-testa .nv-fase-nome { margin: 0; flex: 1 1 12rem; }
.nv-fase-sposta, .nv-fase-azioni { display: inline-flex; gap: .2rem; }
.nv-fase-cifre {
    display: flex; flex-wrap: wrap; gap: .2rem 1.1rem;
    margin: .45rem 0 0; font-size: .88rem; color: var(--nv-salvia);
}
.nv-fase-cifre b { color: var(--nv-inchiostro); }
.nv-fase-procedura {
    margin: .4rem 0 0; font-size: .88rem; white-space: pre-line;
    border-left: 3px solid var(--nv-verde-chiaro); padding-left: .6rem;
}
.nv-fase-aggiungi {
    display: flex; flex-wrap: wrap; gap: .3rem;
    margin: .55rem 0 0; padding-top: .55rem; border-top: 1px dashed var(--nv-bordo);
}
.nv-fase-sezione { margin: .8rem 0 .3rem; font-size: .92rem; font-weight: 700; }
.nv-fase-sezione .nv-tenue { font-weight: 400; }
.nv-fase-vuota { margin: .5rem 0 0; font-size: .88rem; }

/* Pesate della fase, vista ufficio (19/10): una riga per ingrediente, lotti come gettoni */
.nv-pesate-tabella { overflow-x: auto; border: 1px solid var(--nv-bordo); border-radius: var(--nv-raggio-campo); }
.nv-pesate-tabella table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.nv-pesate-tabella th {
    text-align: left; font-weight: 600; font-size: .82rem; color: var(--nv-salvia);
    background: #F6F8F4; padding: .45rem .6rem; border-bottom: 1px solid var(--nv-bordo); white-space: nowrap;
}
.nv-pesate-tabella td { padding: .45rem .6rem; border-bottom: 1px solid var(--nv-bordo); vertical-align: top; }
.nv-pesate-tabella tr:last-child td { border-bottom: 0; }
.nv-pesate-tabella .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nv-pesate-tabella tr.fuori td { background: var(--nv-attenzione-chiaro); }
.nv-pesate-lotti { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.nv-pesata {
    display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .45rem;
    border: 1px solid var(--nv-bordo); border-radius: var(--nv-raggio-pillola); background: var(--nv-superficie);
    font-size: .82rem; white-space: nowrap;
}
.nv-pesata-togli {
    border: 0; background: transparent; color: var(--nv-errore); cursor: pointer;
    font-size: 1rem; line-height: 1; padding: 0 .1rem;
}
.nv-pesata-togli:focus-visible { outline: 2px solid var(--nv-verde); outline-offset: 1px; }
@media (max-width: 767.98px) {
    .nv-pesate-tabella thead { display: none; }
    .nv-pesate-tabella tr { display: block; border-bottom: 1px solid var(--nv-bordo); padding: .3rem 0; }
    .nv-pesate-tabella td { display: flex; justify-content: space-between; gap: .75rem; border: 0; padding: .2rem .6rem; }
    .nv-pesate-tabella td::before { content: attr(data-label); color: var(--nv-salvia); font-size: .8rem; }
    .nv-pesate-tabella .num { text-align: right; }
}

/* Pianificazione per ricetta: "c'e' tutto?" (19/10) */
.nv-disponibilita { padding: .7rem .9rem; }
.nv-disponibilita-testa { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; }
.nv-disponibilita-testa .rz-button { margin-left: auto; }
.nv-disponibilita-elenco { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; font-size: .9rem; }
.nv-disponibilita-elenco li { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .45rem; }
.nv-disponibilita-elenco .material-symbols-outlined { font-size: 1.05rem; color: var(--nv-ok); }
.nv-disponibilita-elenco li.manca .material-symbols-outlined { color: var(--nv-attenzione); }
.nv-disponibilita-ricetta { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .2rem; }

/* Barra di ricerca: una casella grande + filtri a richiesta */
.nv-cerca {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    margin-bottom: .75rem;
}

.nv-cerca-campo {
    position: relative;
    flex: 1 1 320px;
}

.nv-cerca-campo input {
    width: 100%;
    height: 44px;
    padding: 0 2.4rem 0 2.6rem;
    border: 1px solid var(--nv-bordo-forte);
    border-radius: var(--nv-raggio-campo);
    background: var(--nv-superficie);
    font-size: 1rem;
    color: var(--nv-inchiostro);
}

.nv-cerca-campo input:focus {
    outline: none;
    border-color: var(--nv-verde);
    box-shadow: 0 0 0 3px rgba(var(--nv-verde-rgb), .16);
}

.nv-cerca-campo > .material-symbols-outlined {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--nv-salvia);
    pointer-events: none;
}

.nv-cerca-svuota {
    position: absolute;
    right: .4rem;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--nv-salvia);
    cursor: pointer;
    padding: .25rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.nv-cerca-svuota:hover { background: var(--nv-farina); color: var(--nv-inchiostro); }

.nv-bottone-filtri {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    height: 44px;
    padding: 0 .9rem;
    border: 1px solid var(--nv-bordo-forte);
    border-radius: var(--nv-raggio-campo);
    background: var(--nv-superficie);
    color: var(--nv-inchiostro);
    font-weight: 600;
    cursor: pointer;
}

.nv-bottone-filtri[aria-expanded="true"] {
    border-color: var(--nv-verde);
    color: var(--nv-verde-scuro);
    background: var(--nv-verde-chiaro);
}

.nv-conta {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: var(--nv-raggio-pillola);
    background: var(--nv-verde);
    color: #FFFFFF;
    font-size: .75rem;
    font-weight: 700;
}

.nv-filtri {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: .75rem;
    align-items: end;
    padding: .9rem;
    margin-bottom: .75rem;
    background: var(--nv-superficie);
    border: 1px solid var(--nv-bordo);
    border-radius: var(--nv-raggio);
}

.nv-filtri .rz-dropdown,
.nv-filtri .rz-datepicker,
.nv-filtri .rz-textbox,
.nv-filtri .rz-form-field { width: 100%; }

.nv-filtri label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .2rem; color: var(--nv-salvia); }

.nv-filtri-azioni {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
    grid-column: 1 / -1;
}

.nv-risultati { margin: 0 0 .5rem; color: var(--nv-salvia); font-size: .9rem; }

/* 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,
.nv-stato.attenzione { background: var(--nv-attenzione-chiaro); color: #8E5C12; border-color: #EBD3A6; }
.nv-stato.produzione,
.nv-stato.info        { 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); }

/* ---------- La linea: il percorso dell'ordine a stazioni ----------
   Elemento distintivo dell'app: Da pianificare → In produzione → Pronto → Consegnato.
   Variante "cruscotto" (numeri per stazione, cliccabile) e variante "ordine"
   (avanzamento di un singolo ordine: fatta / qui / da fare). */
.nv-linea {
    --stazioni: 4;
    display: grid;
    grid-template-columns: repeat(var(--stazioni), minmax(0, 1fr));
    position: relative;
}

.nv-linea::before {
    content: "";
    position: absolute;
    left: calc(100% / var(--stazioni) / 2);
    right: calc(100% / var(--stazioni) / 2);
    top: 21px;
    height: 3px;
    background: var(--nv-bordo-forte);
    border-radius: 2px;
}

.nv-linea[data-avanzamento]::after {
    content: "";
    position: absolute;
    left: calc(100% / var(--stazioni) / 2);
    top: 21px;
    height: 3px;
    width: calc((100% - 100% / var(--stazioni)) * var(--avanzamento, 0));
    background: var(--nv-verde);
    border-radius: 2px;
}

.nv-stazione {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: 0 .35rem;
    text-align: center;
    background: none;
    border: 0;
    color: inherit;
    text-decoration: none;
    font: inherit;
}

a.nv-stazione[href] { cursor: pointer; }
a.nv-stazione:hover { color: inherit; text-decoration: none; }

.nv-stazione-testi { display: flex; flex-direction: column; align-items: inherit; gap: .15rem; }

.nv-stazione-punto {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: var(--nv-superficie);
    border: 3px solid var(--nv-bordo-forte);
    color: var(--nv-salvia);
    font-weight: 700;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
    transition: transform .15s ease, border-color .15s ease;
}

.nv-stazione-punto .material-symbols-outlined { font-size: 1.3rem; }

.nv-stazione-nome { font-weight: 600; font-size: .95rem; color: var(--nv-inchiostro); }
.nv-stazione-nota { font-size: .82rem; color: var(--nv-salvia); max-width: 24ch; }

a.nv-stazione[href]:hover .nv-stazione-punto { transform: scale(1.06); border-color: var(--nv-verde); }

.nv-stazione.fatta .nv-stazione-punto { background: var(--nv-verde); border-color: var(--nv-verde); color: #FFFFFF; }

.nv-stazione.qui .nv-stazione-punto {
    background: var(--nv-terracotta);
    border-color: var(--nv-terracotta);
    color: #FFFFFF;
    box-shadow: 0 0 0 5px rgba(var(--nv-terracotta-rgb), .18);
}

.nv-stazione.qui .nv-stazione-nome { color: var(--nv-terracotta-scuro); }
.nv-stazione.da-fare .nv-stazione-punto { border-style: dashed; }
.nv-stazione.piena .nv-stazione-punto { border-color: var(--nv-verde); color: var(--nv-verde-scuro); }

@media (max-width: 600px) {
    /* Su telefono la linea diventa verticale */
    .nv-linea { grid-template-columns: 1fr; gap: .75rem; }
    .nv-linea::before { left: 21px; right: auto; top: 22px; bottom: 22px; width: 3px; height: auto; }
    .nv-linea[data-avanzamento]::after { left: 21px; top: 22px; width: 3px; height: calc((100% - 44px) * var(--avanzamento, 0)); }
    .nv-stazione { flex-direction: row; text-align: left; align-items: center; gap: .75rem; padding: 0; }
    .nv-stazione-testi { align-items: flex-start; }
}

/* Cruscotto: due colonne (consegne | produzioni), una sola su schermi stretti */
.nv-cruscotto-colonne {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.nv-cruscotto-colonne > .nv-riquadro + .nv-riquadro { margin-top: 0; }

/* 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; }
}

/* Consegne del giorno: riga con testo, stato e azioni (va a capo su telefono) */
.nv-consegne { list-style: none; margin: 0; padding: 0; }
.nv-consegne li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    padding: .65rem .25rem;
}
.nv-consegne li + li { border-top: 1px solid var(--nv-bordo); }
.nv-consegna-testo { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; }
.nv-consegna-testo small { color: var(--nv-salvia); }
.nv-consegna-azioni { display: flex; gap: .4rem; flex-wrap: wrap; }

/* 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; }

/* Scelta della ricetta in pianificazione: opzioni a riga intera */
.nv-scelta-ricetta {
    border: 1px solid var(--nv-bordo);
    border-radius: var(--nv-raggio);
    padding: .6rem .75rem .75rem;
    margin: 0;
}

.nv-scelta-ricetta legend { font-weight: 700; font-size: 1rem; padding: 0 .25rem; width: auto; float: none; margin: 0; }

.nv-scelta {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .55rem .6rem;
    border: 1px solid transparent;
    border-radius: var(--nv-raggio-campo);
    cursor: pointer;
}

.nv-scelta:hover { background: #F3F7F2; }
.nv-scelta.scelta { border-color: var(--nv-verde); background: var(--nv-verde-chiaro); }
.nv-scelta input { accent-color: var(--nv-verde); width: 18px; height: 18px; }
.nv-scelta-testo { flex: 1 1 auto; display: flex; flex-direction: column; }
.nv-scelta-testo small { color: var(--nv-salvia); }

/* 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-menu-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); }
/* Cifra che filtra la lista: quella scelta resta segnata (Avanzamento produzione). */
button.nv-cifra.attiva { border-color: var(--nv-verde); box-shadow: inset 0 0 0 1px 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); }

/* Scorte prodotti: una riga per prodotto, nome · cifre · cosa fare */
.nv-scorte { list-style: none; margin: 0; padding: 0; }

.nv-scorte li {
    display: grid;
    grid-template-columns: minmax(12rem, 1.2fr) minmax(20rem, 2fr) minmax(11rem, auto);
    align-items: center;
    gap: .75rem 1.25rem;
    padding: .75rem .25rem;
}

.nv-scorte li + li { border-top: 1px solid var(--nv-bordo); }
.nv-scorte li.sotto { box-shadow: inset 3px 0 0 var(--nv-terracotta); padding-left: .75rem; }

.nv-scorta-testo { display: flex; flex-direction: column; min-width: 0; }
.nv-scorta-testo a { color: inherit; }
.nv-scorta-testo small { color: var(--nv-salvia); }

.nv-scorta-cifre {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .5rem;
    margin: 0;
}

.nv-scorta-cifre dt { font-size: .8rem; color: var(--nv-salvia); }
.nv-scorta-cifre dd { margin: 0; font-weight: 600; }

.nv-scorta-azione {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .6rem;
    flex-wrap: wrap;
}

.nv-scorta-manca { display: flex; flex-direction: column; text-align: right; color: var(--nv-terracotta-scuro); }
.nv-scorta-manca small { color: var(--nv-salvia); }

@media (max-width: 900px) {
    .nv-scorte li { grid-template-columns: 1fr; }
    .nv-scorta-cifre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nv-scorta-azione { justify-content: space-between; }
    .nv-scorta-manca { text-align: left; }
}

/* Conto: voci con la spiegazione sotto e l'importo allineato a destra
   (riepilogo costi del prodotto). */
.nv-conto { list-style: none; margin: 0; padding: 0; }

.nv-conto li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: .6rem .25rem;
}

.nv-conto li + li { border-top: 1px solid var(--nv-bordo); }
.nv-conto .nv-num { font-weight: 600; }
.nv-conto-voce { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.nv-conto-voce small { color: var(--nv-salvia); }
.nv-conto-parziale { background: var(--nv-farina); }
.nv-conto li.nv-conto-totale { border-top: 2px solid var(--nv-inchiostro); font-size: 1.1rem; }
.nv-conto-totale .nv-num { color: var(--nv-verde-scuro); font-weight: 700; }

@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. 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 tagliati (19/10, es. "Scar %", "C", "Variazio %" nelle fasi della ricetta):
   l'icona di ordinamento stava nel flusso del titolo e, anche a colonna non
   ordinata, si prendeva ~40px su colonne da 70-110px. Ora l'icona "ordinabile"
   vuota non si mostra e quella di una colonna ordinata sta nel margine destro
   della cella, sopra il padding: il titolo ha tutta la larghezza. */
.rz-data-grid .rz-grid-table thead th { position: relative; }
.rz-data-grid .rz-grid-table thead th .rz-sortable-column-icon.rzi-sort { display: none !important; }
.rz-data-grid .rz-grid-table thead th .rz-sortable-column-icon {
    position: absolute;
    right: 1px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 !important;
    width: auto !important;
    font-size: .8rem !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; }

/* ---------- 7. 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);
}

/* ---------- 8. 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);
    }
}


/* ---------- 9. Stampa ---------- */
@media print {
    .rz-sidebar, .rz-header, .nv-cerca, .nv-filtri, .nv-pagina-azioni, .rz-pager, .nv-no-stampa { display: none !important; }
    .rz-body { padding: 0 !important; background: #FFFFFF !important; }
    .nv-riquadro, .rz-data-grid { border-color: #999 !important; }
    @page { size: A4; margin: 1.2cm; }
}

.nv-solo-stampa { display: none; }
@media print { .nv-solo-stampa { display: block; } }

/* 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;
    }
}