/* COPIA da depy/static/css/base.css (commit 1360520, 10/11/2026). Non modificare qui:
   se cambia in Depy si ricopia (vedi web/css/depy/LEGGIMI.md). */
/* DEPY - stile di base: pagina, login, barra in alto, card, tabelle, moduli,
   pulsanti, avvisi, responsive. Primo file dopo tokens.css. Regole in docs/STILE.md. */

/* Lo spazio della barra di scorrimento resta riservato anche dove la
   pagina e corta: se no una sezione lunga e una corta stanno centrate
   quindici punti piu a destra o piu a sinistra, e passando dall una
   all altra sembra che tutto balli. */
html { scrollbar-gutter: stable; }

/* Colori, spazi, raggi, ombre e piani stanno in tokens.css (caricato
   prima di questo file). Le variabili --primary-color, --sidebar-bg,
   --hb-* ecc. sono definite li' come alias dei token: qui non si
   ridichiarano, altrimenti vincerebbero sul tema scuro. */

/* =============================================
   GENERAL STYLES
   ============================================= */

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--superficie-2);
    min-height: 100vh;
}

/* =============================================
   LOGIN PAGE
   ============================================= */

.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
}

.login-card {
    background: var(--superficie);
    border-radius: var(--r-md);
    box-shadow: var(--ombra-4);
    padding: 40px;
    width: 100%;
    max-width: 420px;
}

.login-header {
    text-align: center;
    margin-bottom: 30px;
}

.login-logo {
    max-width: 180px;
    height: auto;
    margin-bottom: 15px;
}

.login-codice { letter-spacing: .5em; font-family: 'SF Mono', Menlo, Consolas, monospace; }

.superadmin-login .login-header h2 {
    color: var(--no);
}

.superadmin-login .btn-danger {
    background-color: var(--rosso-500);
    border-color: var(--rosso-500);
}

/* =============================================
   SIDEBAR
   ============================================= */

.wrapper {
    display: flex;
    width: 100%;
    min-height: 100vh;
}

/* =============================================
   MAIN CONTENT
   ============================================= */

.contenuto {
    width: 100%;
    /* E' un elemento flex: senza min-width 0 una tabella larga (Saldi) lo
       allargava oltre lo schermo e tagliava la barra in alto. */
    min-width: 0;
    min-height: 100vh;
    transition: all 0.3s;
    margin-left: var(--sidebar-width);
}

/* La barra in cima resta attaccata allo schermo mentre si scorre.
   Su una pagina lunga - le impostazioni, un elenco di ventotto mila
   articoli - sparendo portava via il percorso e il modo di cambiare
   pagina: bisognava risalire fino in cima per qualsiasi cosa. */
.contenuto > .navbar.topbar-main {
    position: sticky; top: 0; z-index: var(--z-barra);
}

.contenuto > .navbar {
    border-bottom: 1px solid var(--bordo);
}

.contenuto main {
    max-width: 100%;
    padding: 1.5rem;        /* prima era la utility p-4 sul <main>: da qui le pagine strette lo riducono senza !important */
    --dp-pad: 1.5rem;   /* quanto spazio tiene intorno: lo legge la linguetta */
}

/* =============================================
   NAVBAR
   ============================================= */

.navbar {
    padding: 8px 20px;
}

/* Topbar principale: altezza uniforme con la sidebar-header (60px). Niente
   shadow, solo linea di sotto identica al bordo sotto il logo sidebar. */
.topbar-main {
    height: 60px;
    min-height: 60px;
    max-height: 60px;
    padding: 0 20px 0 12px;
    box-sizing: border-box;
    box-shadow: none !important;
    border-bottom: 0;
    background: var(--menu-sfondo);
    color: var(--menu-testo);
}
.topbar-main .container-fluid {
    padding-left: 8px;
    padding-right: 0;
    height: 100%;
}

/* Bottone menu (hamburger): NESSUNO sfondo, mai. Solo icona, allineata al
   font-size delle scritte breadcrumb per apparire visivamente della stessa
   altezza. */
#sidebarCollapse,
.topbar-menu-btn {
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--menu-testo);
    padding: 0 8px;
    font-size: 1.55rem;
    line-height: 1;
    margin-left: 0;
    height: auto;
    display: inline-flex;
    align-items: center;
}
#sidebarCollapse:hover,
#sidebarCollapse:focus,
#sidebarCollapse:active,
.topbar-menu-btn:hover,
.topbar-menu-btn:focus,
.topbar-menu-btn:active {
    background: transparent;
    color: var(--menu-testo-forte);
    box-shadow: none;
    outline: none;
}

/* Breadcrumb inline nella topbar: font ridotto (0.9rem) e ">" iniziale dopo hamburger */
.topbar-breadcrumb {
    margin-left: 0;
    display: flex;
    align-items: center;
    line-height: 1;
}
.topbar-breadcrumb .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 1.05rem;
    line-height: 1;
    align-items: center;
    display: flex;
}
.topbar-breadcrumb .breadcrumb-item {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
/* Separatori ">" tra breadcrumb-item: stesso stile del topbar-sep,
   equidistante dai testi (padding 6px per lato). */
.topbar-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    color: var(--menu-testo);
    font-size: 1.55rem;
    line-height: 1;
    padding: 0 8px;
    font-weight: 400;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -2px; /* centraggio ottico con testo 1.05rem */
}
/* Separatore statico subito dopo hamburger. Padding simmetrico 6px come
   quello tra gli altri item, in modo che risulti equidistante rispetto al
   simbolo menu (che ha padding-right 6px) e al primo testo. */
.topbar-sep {
    color: var(--menu-testo);
    font-size: 1.55rem;
    line-height: 1;
    padding: 0 8px 0 0;
    margin-left: 0; /* +4px verso destra rispetto al valore precedente (-4px) */
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    position: relative;
    top: -2px; /* stesso centraggio ottico dei separatori interni */
}
.topbar-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "›";
    color: var(--menu-testo);
    opacity: .6;
}
.topbar-breadcrumb .breadcrumb-item a {
    text-decoration: none;
    color: var(--menu-testo);
}
.topbar-breadcrumb .breadcrumb-item a:hover {
    color: var(--menu-testo-forte);
    text-decoration: underline;
}
.topbar-breadcrumb .breadcrumb-item.active {
    color: var(--menu-testo-forte);
    font-weight: 500;
}

.navbar .dropdown-toggle::after {
    margin-left: 8px;
}

.navbar .badge {
    font-size: var(--fs-xs);
    margin-left: 5px;
}

/* =============================================
   BREADCRUMB
   ============================================= */

.breadcrumb {
    background: transparent;
    padding: 0;
    font-size: 0.85rem;
}

.breadcrumb-item a {
    color: var(--primario);
    text-decoration: none;
}

.breadcrumb-item a:hover {
    text-decoration: underline;
}

/* La riga che spiega perche' l'ordine costa piu' del fabbisogno. */

/* La riga che dice a cosa serve un campo. Un campo senza spiegazione,
   in una pagina che si apre due volte l'anno, lo si lascia com'e'. */
.aiuto {
    display: block; font-size: var(--fs-sm); color: var(--testo-2);
    margin-top: 4px; line-height: 1.45;
}
.aiuto b, .aiuto strong { color: var(--testo-2); font-weight: 600; }

/* ============================================================
   I PULSANTI (hbt)

   Sono quelli della lista commesse, con un nome proprio: pillola
   tonda, bordo sottile, l'icona di un grigio piu' tenue del testo.
   Due soli colori - chiaro e pieno - perche' in una riga di pulsanti
   tutti colorati non si capisce piu' quale sia la mossa del momento.
   Le tinte che vogliono dire qualcosa (verde entra, rosso esce, giallo
   c'e' da comprare) stanno sui pulsanti del magazzino, non qui.
   ============================================================ */
.hbt {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    height: 38px; padding: 0 17px; border-radius: var(--r-pill);
    font-size: var(--fs-base); font-weight: 500; white-space: nowrap;
    text-decoration: none; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.hbt i { font-size: .95em; }
.hbt:disabled, .hbt.e-spento { opacity: .55; cursor: default; }

.hbt-chiaro { background: var(--superficie); border: 1px solid var(--bordo); color: var(--testo-2); }
.hbt-chiaro:hover { background: var(--velo); border-color: var(--bordo-forte); color: var(--primario); }
.hbt-chiaro i { color: var(--testo-2); }
[data-bs-theme="dark"] .hbt-chiaro { border-color: var(--bordo-forte); color: var(--testo); }
[data-bs-theme="dark"] .hbt-chiaro:hover { color: #fff; }

.hbt-pieno { background: var(--primario); border: 1px solid var(--primario); color: var(--su-primario); }
.hbt-pieno:hover { background: var(--primario-hover); border-color: var(--primario-hover); color: var(--su-primario); }
.hbt-pieno i { color: inherit; }
/* Giallo pieno: e' il colore del materiale da riordinare (stesso del telefono) */
.hbt-giallo { background: var(--ambra-500); border: 1px solid var(--ambra-500); color: var(--ambra-testo); font-weight: 600; }
.hbt-giallo:hover { background: var(--ambra-700); border-color: var(--ambra-700); color: var(--ambra-testo); }
.hbt-giallo i { color: inherit; }

/* Un filo piu' alto: per la striscia del salvataggio, dove il pulsante
   e' l'unica cosa che conta in quella riga. */
.hbt-grande { height: 44px; padding: 0 22px; font-size: var(--fs-base); }

/* ============================================================
   LA FAMIGLIA DEI BOTTONI (docs/STILE.md, sezione 5)
   Una sola: .hbt + una variante + (facoltativa) una misura.
     .hbt-pieno   l'azione principale della pagina: UNO per pagina
     .hbt-chiaro  tutte le altre (Stampa, Esporta, Annulla, Torna)
     .hbt-ghost   dentro a elenchi e riquadri, dove il bordo farebbe rumore
     .hbt-rosso   le azioni distruttive, mai piene
     .hbt-piccolo (30px) nelle righe e nelle testate dei riquadri
     .hbt-grande  (44px) nella striscia del salvataggio
   Le vecchie famiglie (hb-bt-*, an-mini-bt, btn btn-*) hanno lo stesso
   aspetto per non rompere niente, ma nel codice nuovo si usa solo .hbt.
   ============================================================ */
.hbt-ghost { background: none; border: 1px solid transparent; color: var(--testo-2); }
.hbt-ghost:hover { background: var(--velo); color: var(--primario); }
.hbt-rosso { background: var(--superficie); border: 1px solid var(--rosso-300); color: var(--no); }
.hbt-rosso:hover { background: var(--rosso-100); border-color: var(--no); color: var(--no); }
.hbt-rosso i { color: inherit; }
.hbt-piccolo { height: 30px; padding: 0 12px; font-size: var(--fs-sm); gap: .35rem; }
.hbt-piccolo i { font-size: 1em; }
.hbt:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
/* le vecchie famiglie vestite come .hbt */
.an-mini-bt { height: 30px; padding: 0 12px; font-size: var(--fs-sm); font-weight: 500; border-color: var(--bordo); color: var(--testo-2); }
.an-mini-bt:hover { background: var(--velo); border-color: var(--bordo-forte); color: var(--primario); }

/* ============================================================
   SCALA TIPOGRAFICA: i titoli e le classi .t-* leggono i token --fs-*.
   Niente font-size scritti nei template: si usa una di queste.
   ============================================================ */
h1, .h1 { font-size: var(--fs-3xl); font-weight: 600; letter-spacing: -.01em; }
h2, .h2 { font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -.01em; }
h3, .h3 { font-size: var(--fs-xl); font-weight: 600; }
h4, .h4 { font-size: var(--fs-lg); font-weight: 600; }
h5, .h5 { font-size: var(--fs-md); font-weight: 600; }
h6, .h6 { font-size: var(--fs-base); font-weight: 600; }
.t-xs { font-size: var(--fs-xs); } .t-sm { font-size: var(--fs-sm); } .t-base { font-size: var(--fs-base); }
.t-md { font-size: var(--fs-md); } .t-lg { font-size: var(--fs-lg); } .t-xl { font-size: var(--fs-xl); }
.t-2xl { font-size: var(--fs-2xl); } .t-3xl { font-size: var(--fs-3xl); }
.t-num { font-variant-numeric: tabular-nums; }
/* testo da leggere (spiegazioni, aiuto): riga non troppo lunga, interlinea ariosa */
.prosa { max-width: 68ch; line-height: 1.6; color: var(--testo-2); }
.prosa b, .prosa strong { color: var(--testo); }

/* ============================================================
   LO STATO VUOTO: uno solo per tutto il sito (macro vuoto() in
   components/macros.html). Icona, una riga che dice cosa manca, e
   quando ha senso il pulsante per cominciare.
   ============================================================ */
:is(div, td).vuoto {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .35rem; padding: 44px 18px; text-align: center; color: var(--testo-2);
    font-size: var(--fs-base); line-height: 1.5;
}
:is(div, td).vuoto > i { font-size: 2rem; color: var(--testo-debole); margin-bottom: .25rem; }
:is(div, td).vuoto b { color: var(--testo); font-weight: 600; }
:is(div, td).vuoto p { margin: 0; max-width: 46ch; }
:is(div, td).vuoto .hbt { margin-top: .75rem; }
:is(div, td).vuoto.e-compatto { padding: 22px 14px; font-size: var(--fs-sm); gap: .2rem; }
:is(div, td).vuoto.e-compatto > i { font-size: 1.4rem; }
td.vuoto { display: table-cell; }
td.vuoto > * { display: block; margin-left: auto; margin-right: auto; }
td.vuoto p { margin: 0 auto; }
td.vuoto .hbt { display: inline-flex; }

/* ============================================================
   I CAMPI DEI MODULI (macro campo() in components/macros.html).
   Etichetta sopra, aiuto e errore sotto; .modulo-2col mette i campi su
   due colonne, .e-corto/.e-medio tengono stretti CAP, CF, P.IVA, .e-intero
   prende tutta la riga.
   ============================================================ */
.modulo-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; align-items: start; }
.modulo-2col .e-intero { grid-column: 1 / -1; }
/* Una riga con tre campi (localita', CAP, provincia): il primo largo, gli altri due stretti */
.modulo-2col .campo-riga { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 14px 20px; align-items: start; }
.modulo-2col .campo-riga .campo .form-control, .modulo-2col .campo-riga .campo .form-select { max-width: none; }
@media (max-width: 767.98px) { .modulo-2col .campo-riga { grid-template-columns: 1fr; } }
@media (max-width: 767.98px) { .modulo-2col { grid-template-columns: 1fr; } }
.campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.campo label { font-size: var(--fs-sm); font-weight: 600; color: var(--testo); margin: 0; }
.campo label .obbl { color: var(--no); margin-left: 2px; }
.campo .campo-aiuto { font-size: var(--fs-xs); color: var(--testo-2); }
.campo .invalid-feedback { display: none; font-size: var(--fs-xs); color: var(--no); }
.campo .is-invalid ~ .invalid-feedback, .was-validated .campo :invalid ~ .invalid-feedback { display: block; }
.campo.e-corto .form-control { max-width: 11ch; }
.campo.e-medio .form-control { max-width: 22ch; }
.campo.e-largo .form-control { max-width: 36ch; }

/* Il pulsante nudo: sembra un collegamento ma si comporta da pulsante. */

/* La striscia del salvataggio: i pulsanti stanno sulla stessa riga del
   contenuto, non appiccicati al bordo dello schermo. Da dove parte la
   striscia lo decide --sidebar-width, lo stesso numero che muove la
   pagina, cosi' con il menu aperto non gli finisce sopra. */
.cfg-pagina .prefs-sticky-inner { max-width: 1280px; margin: 0 auto; }

/* Al buio: due fondi che erano rimasti chiari. Il colore si scrive su
   background-color e non sullo shorthand, perche' background azzera
   anche quello che non c'entra. */
/* Il riquadro di carica e i cartoncini non hanno piu' una regola
   notturna: i loro colori sono quelli di Bootstrap e si adattano da
   soli. Resta solo il bordo, che il nostro grigio chiaro non reggeva. */
[data-bs-theme="dark"] .ph-modo { border-color: var(--bordo-forte); }

/* Le scritte piccole, per davvero: le regole qui sopra perdevano
   contro quelle vecchie, scritte piu' in basso nel foglio con la stessa
   forza. Appoggiandosi a .contenuto vincono, e nelle due pagine resta un
   corpo solo per le note e uno per le etichette. */
.contenuto.cfg-pagina .aiuto,
.contenuto.cfg-pagina .form-text,
.contenuto.cfg-pagina .rq-spiega,
.contenuto.cfg-pagina .cfg-togli,
.contenuto.cfg-pagina .pf-card-head p,
.contenuto.cfg-pagina .hb-rq-testa p,
.contenuto.cfg-pagina .cfg-carica span,
.contenuto.cfg-pagina small:not(.cfg-menu-testa span),
.contenuto.cfg-pagina .small,
.contenuto.cfg-pagina .text-muted { font-size: .84rem; line-height: 1.45; }
/* Le etichette dei campi: un corpo solo anche loro, un filo piu' piccolo
   delle note e in grassetto, come nel mockup. */
.contenuto.cfg-pagina .form-label { font-size: var(--fs-sm); font-weight: 600; }

/* I tre pulsanti del tema (chiaro, scuro, come il computer) erano
   rimasti rettangoli grigi in mezzo a tutte le pillole. */
.contenuto.cfg-pagina #mainContent .theme-btn {
    height: 38px; padding: 0 14px; border-radius: var(--r-md);
    border: 1px solid var(--bordo-forte); background: var(--superficie);
    color: var(--primario); font-size: .85rem; font-weight: 600;
}
.contenuto.cfg-pagina #mainContent .theme-btn.active {
    background: var(--hb-lavoro-velo, var(--blu-50)); border-color: var(--primario);
}
[data-bs-theme="dark"] .contenuto.cfg-pagina #mainContent .theme-btn { color: var(--testo); }
[data-bs-theme="dark"] .contenuto.cfg-pagina #mainContent .theme-btn.active { background: rgba(var(--primario-rgb),.4); border-color: var(--blu-500); color: var(--testo); }

/* La riga che dice a che punto sei con l'app. */
.cfg-app { display: flex; align-items: center; gap: 11px; font-size: var(--fs-base); }
.cfg-app b { display: block; font-weight: 600; }
.cfg-app span { display: block; font-size: var(--fs-sm); color: var(--testo-2); }
.cfg-app-ico {
    width: 34px; height: 34px; flex: 0 0 34px; border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center; font-size: var(--fs-md);
}
.cfg-app-ico.e-ok { background: var(--verde-50); color: var(--ok); }
[data-bs-theme="dark"] .cfg-app-ico.e-ok { background: rgba(var(--ok-rgb),.3); color: var(--verde-300); }

/* Al buio: la scritta dentro il riquadro del caricamento deve staccare
   dal fondo, se no «Nessun timbro» si legge a fatica. */
[data-bs-theme="dark"] .cfg-carica span { color: var(--bs-secondary-color); }

/* Il cartoncino scelto nel Profilo (tema, azioni): da acceso aveva il
   fondo chiaro e la scritta chiara sopra. */
[data-bs-theme="dark"] .ph-modo { color: var(--testo); }
[data-bs-theme="dark"] .ph-modo strong { color: var(--testo); }

/* =============================================
   LA TENDINA DI RICERCA (lazy-select)

   I colori stavano scritti dentro al copione: al buio l'elenco degli
   articoli restava bianco con le scritte chiare sopra, e non si
   leggeva niente. Qui il tema li sa cambiare da solo.
   ============================================= */

.lazy-select-dropdown {
    background: var(--superficie);
    color: var(--bs-body-color, var(--testo));
    border: 1px solid var(--bordo);
    border-top: 0;
    border-radius: 0 0 .375rem .375rem;
    box-shadow: var(--ombra-2);
}
.lazy-select-item:hover,
.lazy-select-item:focus { background: var(--velo); outline: none; }
.lazy-select-empty,
.lazy-select-loading,
.lazy-select-clear { color: var(--testo-2); }

[data-bs-theme="dark"] .lazy-select-dropdown {
    
    color: var(--testo);
    border-color: var(--bordo-forte);
    box-shadow: var(--ombra-2);
}
[data-bs-theme="dark"] .lazy-select-item:hover,
[data-bs-theme="dark"] .lazy-select-item:focus { background: var(--superficie); }

/* =============================================
   CARDS
   ============================================= */

/* Lo stesso guscio dei riquadri della home base (.hb-rq): bordo
   leggero, angoli 14, ombra appena accennata. Prima nella stessa
   pagina convivevano due scatole diverse. */
.card {
    border: 1px solid var(--bordo);
    box-shadow: var(--ombra-2);
    border-radius: var(--r-lg);
}

.card-header {
    background: var(--superficie);
    border-bottom: 1px solid var(--bordo);
    padding: 13px 18px;
}

/* Il titoletto di un riquadro e' sempre lo stesso in tutto il sito:
   h5, h6 o <strong>, da qualunque pagina arrivi, pesa e misura come
   l'h3 di .hb-rq-testa. Finora erano tre scritte diverse per la
   stessa cosa. */
.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6,
.card-header > strong {
    margin: 0;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.35;
    display: flex;
    align-items: center;
    gap: .5rem;
}
/* L'icona accanto al titolo accompagna, non grida: grigia come nella
   home base. Le utility di Bootstrap (text-danger e simili) hanno
   !important e restano piu' forti, quindi chi la vuole colorata la
   colora. */
.card-header h1 > i,
.card-header h2 > i,
.card-header h3 > i,
.card-header h4 > i,
.card-header h5 > i,
.card-header h6 > i,
.card-header > strong > i {
    color: var(--testo-2);
    font-size: var(--fs-md);
}
.card-header .hb-avviso { color: var(--hb-compra-scuro); }
/* Testata colorata (bg-success text-white e simili): l'icona grigia
   non si leggerebbe, quindi prende il colore della scritta. */
.card-header.text-white h1 > i,
.card-header.text-white h2 > i,
.card-header.text-white h3 > i,
.card-header.text-white h4 > i,
.card-header.text-white h5 > i,
.card-header.text-white h6 > i,
.card-header.text-white > strong > i { color: inherit; }
/* La scritta di servizio a destra del titolo: la stessa misura di
   .hb-conta. */
.card-header > small,
.card-header > .small,
.card-header > a.small,
.card-header > span.small { font-size: var(--fs-sm); }

.card-body {
    padding: 20px;
}

/* Stat Cards */
.stat-card {
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ombra-3);
}

.stat-card .card-title {
    font-size: var(--fs-3xl);
    font-weight: 700;
}

.stat-card .card-subtitle {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-card-label {
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.stat-card-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primario);
}

.stat-card-icon {
    font-size: 2.5rem;
    opacity: 0.3;
}

/* =============================================
   TABLES
   ============================================= */

.table {
    margin-bottom: 0;
}

.table th {
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--testo-2);
    border-top: none;
    padding: 12px 15px;
}

.table td {
    padding: 12px 15px;
    vertical-align: middle;
}

/* Colonne numeriche e azioni: mai andare a capo */
.table td.text-end,
.table td.text-center,
.table .text-nowrap {
    white-space: nowrap;
}

.table tbody tr {
    transition: background-color 0.2s;
}

.table-hover tbody tr:hover {
    background-color: var(--velo);
}

/* Sortable column headers */
.table th a {
    color: var(--testo-2);
}

.table th a:hover {
    color: var(--primario);
}

/* =============================================
   FORMS
   ============================================= */

.form-label {
    font-weight: 500;
    margin-bottom: 5px;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--primario);
    box-shadow: 0 0 0 0.2rem rgba(var(--primario-rgb),0.15);
}

.input-group-text {
    background: var(--sfondo);
    border-color: var(--bordo);
}

/* =============================================
   BUTTONS
   ============================================= */

.btn {
    font-weight: 500;
    padding: 0 17px;
    min-height: 38px;
    border-radius: var(--r-pill);
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    white-space: nowrap;
}
.btn-sm { min-height: 30px; padding: 0 12px; font-size: var(--fs-sm); }
.btn-lg { min-height: 44px; padding: 0 22px; font-size: var(--fs-base); }
.btn-close { min-height: 0; padding: .25em; }
.btn-group > .btn { border-radius: var(--r-sm); }
.btn-group > .btn:first-child { border-top-left-radius: var(--r-pill); border-bottom-left-radius: var(--r-pill); }
.btn-group > .btn:last-child { border-top-right-radius: var(--r-pill); border-bottom-right-radius: var(--r-pill); }
.btn-link { min-height: 0; padding: 0; }

.btn-primary {
    background-color: var(--primario);
    border-color: var(--primario);
    color: var(--su-primario);
}

.btn-primary:hover {
    background-color: var(--primario-hover);
    border-color: var(--primario-hover);
    color: var(--su-primario);
}

/* I pulsanti colorati di Bootstrap hanno i colori compilati nelle loro
   variabili --bs-btn-*: qui si rimappano sui token. Il testo sui pieni e'
   --su-primario (bianco di giorno, scuro di notte quando il colore si schiarisce). */
.btn-success  { --bs-btn-bg: var(--ok);          --bs-btn-border-color: var(--ok);          --bs-btn-hover-bg: var(--verde-700); --bs-btn-hover-border-color: var(--verde-700); --bs-btn-active-bg: var(--verde-800); --bs-btn-active-border-color: var(--verde-800); --bs-btn-disabled-bg: var(--ok); --bs-btn-disabled-border-color: var(--ok); --bs-btn-color: var(--su-primario); --bs-btn-hover-color: var(--su-primario); --bs-btn-active-color: var(--su-primario); --bs-btn-disabled-color: var(--su-primario); --bs-btn-focus-shadow-rgb: 57, 120, 84; }
.btn-danger   { --bs-btn-bg: var(--no);          --bs-btn-border-color: var(--no);          --bs-btn-hover-bg: var(--rosso-800); --bs-btn-hover-border-color: var(--rosso-800); --bs-btn-active-bg: var(--rosso-800); --bs-btn-active-border-color: var(--rosso-800); --bs-btn-disabled-bg: var(--no); --bs-btn-disabled-border-color: var(--no); --bs-btn-color: var(--su-primario); --bs-btn-hover-color: var(--su-primario); --bs-btn-active-color: var(--su-primario); --bs-btn-disabled-color: var(--su-primario); --bs-btn-focus-shadow-rgb: 192, 57, 43; }
.btn-warning  { --bs-btn-bg: var(--ambra-500);   --bs-btn-border-color: var(--ambra-500);   --bs-btn-hover-bg: var(--ambra-700); --bs-btn-hover-border-color: var(--ambra-700); --bs-btn-active-bg: var(--ambra-700); --bs-btn-active-border-color: var(--ambra-700); --bs-btn-disabled-bg: var(--ambra-500); --bs-btn-disabled-border-color: var(--ambra-500); --bs-btn-color: var(--ambra-testo); --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-disabled-color: var(--ambra-testo); --bs-btn-focus-shadow-rgb: 227, 160, 8; }
.btn-info     { --bs-btn-bg: var(--blu-500);     --bs-btn-border-color: var(--blu-500);     --bs-btn-hover-bg: var(--blu-700); --bs-btn-hover-border-color: var(--blu-700); --bs-btn-active-bg: var(--blu-800); --bs-btn-active-border-color: var(--blu-800); --bs-btn-disabled-bg: var(--blu-500); --bs-btn-disabled-border-color: var(--blu-500); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-disabled-color: #fff; --bs-btn-focus-shadow-rgb: 71, 91, 121; }
.btn-secondary{ --bs-btn-bg: var(--grigio-600);  --bs-btn-border-color: var(--grigio-600);  --bs-btn-hover-bg: var(--grigio-700); --bs-btn-hover-border-color: var(--grigio-700); --bs-btn-active-bg: var(--grigio-800); --bs-btn-active-border-color: var(--grigio-800); --bs-btn-disabled-bg: var(--grigio-600); --bs-btn-disabled-border-color: var(--grigio-600); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-disabled-color: #fff; --bs-btn-focus-shadow-rgb: 85, 95, 109; }
.btn-dark     { --bs-btn-bg: var(--blu-900);     --bs-btn-border-color: var(--blu-900);     --bs-btn-hover-bg: var(--blu-800); --bs-btn-hover-border-color: var(--blu-800); --bs-btn-active-bg: var(--blu-700); --bs-btn-active-border-color: var(--blu-700); --bs-btn-disabled-bg: var(--blu-900); --bs-btn-disabled-border-color: var(--blu-900); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-disabled-color: #fff; }
.btn-outline-success  { --bs-btn-color: var(--ok);        --bs-btn-border-color: var(--ok);        --bs-btn-hover-bg: var(--ok);        --bs-btn-hover-border-color: var(--ok);        --bs-btn-active-bg: var(--ok);        --bs-btn-active-border-color: var(--ok);        --bs-btn-hover-color: var(--su-primario); --bs-btn-active-color: var(--su-primario); --bs-btn-disabled-color: var(--ok); --bs-btn-disabled-border-color: var(--ok); --bs-btn-focus-shadow-rgb: 57, 120, 84; }
.btn-outline-danger   { --bs-btn-color: var(--no);        --bs-btn-border-color: var(--no);        --bs-btn-hover-bg: var(--no);        --bs-btn-hover-border-color: var(--no);        --bs-btn-active-bg: var(--no);        --bs-btn-active-border-color: var(--no);        --bs-btn-hover-color: var(--su-primario); --bs-btn-active-color: var(--su-primario); --bs-btn-disabled-color: var(--no); --bs-btn-disabled-border-color: var(--no); --bs-btn-focus-shadow-rgb: 192, 57, 43; }
.btn-outline-warning  { --bs-btn-color: var(--ambra-800); --bs-btn-border-color: var(--ambra-500); --bs-btn-hover-bg: var(--ambra-500); --bs-btn-hover-border-color: var(--ambra-500); --bs-btn-active-bg: var(--ambra-700); --bs-btn-active-border-color: var(--ambra-700); --bs-btn-hover-color: var(--ambra-testo); --bs-btn-active-color: #fff; --bs-btn-disabled-color: var(--ambra-800); --bs-btn-disabled-border-color: var(--ambra-500); --bs-btn-focus-shadow-rgb: 227, 160, 8; }
.btn-outline-info     { --bs-btn-color: var(--blu-500);   --bs-btn-border-color: var(--blu-500);   --bs-btn-hover-bg: var(--blu-500);   --bs-btn-hover-border-color: var(--blu-500);   --bs-btn-active-bg: var(--blu-700);   --bs-btn-active-border-color: var(--blu-700);   --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-disabled-color: var(--blu-500); --bs-btn-disabled-border-color: var(--blu-500); --bs-btn-focus-shadow-rgb: 71, 91, 121; }
.btn-outline-secondary{ --bs-btn-color: var(--testo-2);   --bs-btn-border-color: var(--bordo-forte); --bs-btn-hover-bg: var(--velo);    --bs-btn-hover-border-color: var(--bordo-forte); --bs-btn-active-bg: var(--superficie-2); --bs-btn-active-border-color: var(--bordo-forte); --bs-btn-hover-color: var(--testo); --bs-btn-active-color: var(--testo); --bs-btn-disabled-color: var(--testo-debole); --bs-btn-disabled-border-color: var(--bordo); --bs-btn-focus-shadow-rgb: 85, 95, 109; }
.btn-outline-primary  { --bs-btn-color: var(--primario);  --bs-btn-border-color: var(--primario);  --bs-btn-hover-bg: var(--primario);  --bs-btn-hover-border-color: var(--primario);  --bs-btn-active-bg: var(--primario-hover); --bs-btn-active-border-color: var(--primario-hover); --bs-btn-hover-color: var(--su-primario); --bs-btn-active-color: var(--su-primario); --bs-btn-disabled-color: var(--primario); --bs-btn-disabled-border-color: var(--primario); --bs-btn-focus-shadow-rgb: 25, 50, 87; }
/* Badge pieni, come deciso il 22/10/2026: su ambra il testo e' scuro, se no non si legge */
.badge.bg-warning { color: var(--ambra-testo); }
/* Il giallo di sistema e' chiaro: scritto sul bianco non si legge (2.3:1),
   e il bianco sopra il giallo nemmeno. Di giorno la scritta gialla diventa
   ambra scura, e sui fondi gialli si scrive scuro. */
html:not([data-bs-theme="dark"]) .text-warning { color: var(--ambra-800) !important; }
.bg-warning.text-white, .progress-bar.bg-warning { color: var(--ambra-testo) !important; }
.badge.bg-warning.text-dark { color: var(--ambra-testo) !important; }

.btn-group-sm .btn {
    padding: 4px 8px;
}

/* Quick Action Buttons */
.quick-action-btn {
    padding: 12px 16px;
    border-radius: var(--r-sm);
    transition: all 0.2s;
}

.quick-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--ombra-2);
}

/* =============================================
   BADGES
   ============================================= */

.badge {
    font-weight: 500;
    padding: 5px 10px;
}

/* =============================================
   ALERTS
   ============================================= */

.alert {
    border: none;
    border-radius: var(--r-sm);
}

/* =============================================
   TOAST SYSTEM
   ============================================= */

.toast-container {
    z-index: var(--z-toast);
}

.toast {
    border: none;
    box-shadow: var(--ombra-2);
    border-radius: var(--r-sm);
}

.toast-success {
    border-left: 4px solid var(--ok);
}

.toast-danger {
    border-left: 4px solid var(--rosso-500);
}

.toast-warning {
    border-left: 4px solid var(--attenzione);
}

.toast-info {
    border-left: 4px solid var(--blu-400);
}

/* =============================================
   EMPTY STATE
   ============================================= */

.empty-state {
    padding: 40px 20px;
}

.empty-state .display-1 {
    font-size: 4rem;
}

/* =============================================
   SKELETON LOADING
   ============================================= */

.skeleton {
    background: linear-gradient(90deg, var(--superficie-2) 25%, var(--superficie-2) 50%, var(--superficie-2) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--r-xs);
}

.skeleton-text {
    height: 14px;
    width: 100%;
    margin: 6px 0;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* =============================================
   ERROR PAGES
   ============================================= */

.error-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.error-container h1 {
    font-size: 6rem;
    font-weight: 700;
    color: var(--testo-2);
}

/* =============================================
   UTILITIES
   ============================================= */

.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* =============================================
   PAGINATION RESPONSIVE
   ============================================= */

.pagination-wrapper {
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pagination-wrapper .pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
}

/* =============================================
   TABLE CONTAINMENT
   ============================================= */

.card {
    overflow: hidden;
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* =============================================
   RESPONSIVE - TABLET (max 992px)
   ============================================= */

@media (max-width: 992px) {
    .contenuto {
        margin-left: 0;
    }

    /* Main content padding ridotto */
    .contenuto main {
        padding: 1rem;
        --dp-pad: 1rem;
    }

    /* Header pagina: wrap bottoni */
    #mainContent > .d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    #mainContent > .d-flex.justify-content-between > div {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    /* Paginazione: stack verticale su tablet */
    .pagination-wrapper {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .pagination-wrapper .pagination .page-link {
        padding: 0.35rem 0.6rem;
        font-size: var(--fs-sm);
    }
}

/* =============================================
   RESPONSIVE - MOBILE (max 768px)
   ============================================= */

@media (max-width: 768px) {
    .login-card {
        padding: 30px 20px;
    }

    .contenuto main {
        padding: 0.75rem;
        --dp-pad: 0.75rem;
    }

    .card-body {
        padding: 12px;
    }

    .card-header {
        padding: 10px 12px;
    }

    /* Tabelle compatte */
    .table th {
        padding: 8px 6px;
        font-size: var(--fs-xs);
        letter-spacing: 0;
    }

    .table td {
        padding: 8px 6px;
        font-size: var(--fs-sm);
    }

    /* Stat cards */
    .stat-card .card-title {
        font-size: var(--fs-2xl);
    }

    .stat-card-value {
        font-size: 1.4rem;
    }

    .stat-card-icon {
        font-size: 1.8rem;
    }

    .breadcrumb {
        font-size: var(--fs-xs);
    }

    .navbar {
        padding: 8px 12px;
    }

    .navbar .nav-link .badge {
        display: none;
    }

    .alert {
        font-size: 0.85rem;
        padding: 8px 12px;
    }

    /* Paginazione compatta */
    .pagination-wrapper .pagination .page-link {
        padding: 0.25rem 0.5rem;
        font-size: var(--fs-xs);
    }

    .pagination-wrapper > small,
    .pagination-wrapper > div {
        font-size: var(--fs-xs);
    }

    /* Modal full-width */
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }

    .modal-lg {
        max-width: calc(100% - 1rem);
    }

    /* Header pagina: stack verticale */
    #mainContent > .d-flex.justify-content-between {
        flex-direction: column;
        align-items: flex-start !important;
    }

    #mainContent > .d-flex.justify-content-between > div {
        width: 100%;
    }

    .empty-state {
        padding: 20px 10px;
    }

    .empty-state .display-1 {
        font-size: 2.5rem;
    }
}

/* =============================================
   RESPONSIVE - SMALL MOBILE (max 576px)
   ============================================= */

@media (max-width: 576px) {
    .contenuto main {
        padding: 0.5rem;
        --dp-pad: 0.5rem;
    }
    /* le righe di Bootstrap sporgono di meta' dello spazio fra colonne
       (12px): con 8px di margine la pagina usciva di 4px a destra */
    .contenuto main .row:not([class*="g-"]), .contenuto main .row.g-4, .contenuto main .row.gx-4,
    .contenuto main .row.g-5, .contenuto main .row.gx-5 { --bs-gutter-x: 1rem; }

    .card-body {
        padding: 10px;
    }

    .table th,
    .table td {
        padding: 6px 4px;
        font-size: var(--fs-xs);
    }

    .btn {
        padding: 6px 10px;
        font-size: var(--fs-sm);
    }

    .btn-sm {
        padding: 4px 8px;
        font-size: var(--fs-xs);
    }

    .stat-card .card-body {
        padding: 10px;
    }

    .stat-card .card-title {
        font-size: 1.2rem;
    }

    h2 {
        font-size: 1.3rem;
    }

    h5 {
        font-size: var(--fs-md);
    }
}

/* =============================================
   LOADING STATES
   ============================================= */

.loading {
    position: relative;
    pointer-events: none;
    opacity: 0.6;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid var(--bordo);
    border-top: 2px solid var(--primario);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* =============================================
   PRICE FORMATTING - prezzo a sinistra, EUR a destra
   ============================================= */
.price {
    display: inline-flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 0.25em;
    white-space: nowrap;
}
.price-val {
    text-align: right;
}
.price-cur {
    text-align: right;
    color: var(--testo-2);
    font-size: 0.8em;
}

/* =========================================================================
   == STAMPA DELLE PAGINE == (report, liste, situazioni)
   I documenti veri hanno il loro foglio di stile (stampa.css). Qui si tratta
   delle pagine dell'applicazione che ogni tanto finiscono su carta: si toglie
   di mezzo tutto quello che serve solo a video (menu, filtri, pulsanti,
   paginazione) e si lascia la tabella, con sopra un'intestazione che a video
   non si vede ma sul foglio dice di che si tratta.
   ========================================================================= */
.stampa-testata { display: none; }

@media print {
    @page { margin: 12mm; }

    body { background: var(--superficie) !important; font-size: 10pt; }

    /* Via tutto quello che a penna non serve */
    .sidebar, .topbar-main, .navbar,
    .filters-card, .btn, .btn-group, .pagination, .pager, .az-barra,
    .toast-container, .modal, .offcanvas, .breadcrumb, .topbar-breadcrumb,
    .no-print, [data-no-print] { display: none !important; }

    .wrapper, .contenuto, main, .content { display: block !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }

    .card { border: none !important; box-shadow: none !important; }
    .card-header { background: var(--superficie) !important; border-bottom: 1.5px solid var(--grigio-900) !important; padding-left: 0; padding-right: 0; }
    .card-body { padding-left: 0; padding-right: 0; }

    /* L'intestazione del foglio: compare solo qui */
    .stampa-testata { display: block !important; margin-bottom: 6mm; padding-bottom: 3mm; border-bottom: 2px solid var(--grigio-900); }
    .stampa-testata .st-p-azienda { font-size: 12pt; font-weight: 700; }
    .stampa-testata .st-p-titolo { font-size: 15pt; font-weight: 700; margin-top: 1mm; }
    .stampa-testata .st-p-dati { font-size: 8.5pt; color: var(--testo-2); margin-top: 1.5mm; display: flex; flex-wrap: wrap; gap: 2mm 6mm; }
    .stampa-testata .st-p-dati span strong { font-weight: 600; }

    /* Tabelle: intestazione ripetuta su ogni foglio, righe che non si spezzano */
    table { width: 100% !important; border-collapse: collapse !important; }
    thead { display: table-header-group; }
    tr, img { page-break-inside: avoid; }
    th, td { padding: 1.5mm 2mm !important; font-size: 9pt !important; }
    thead th { border-bottom: 1.2px solid var(--grigio-900) !important; background: var(--superficie) !important; color: var(--testo) !important; }
    tbody td { border-bottom: 1px solid var(--bordo-forte) !important; }
    .table-responsive { overflow: visible !important; }

    a[href]:after { content: none !important; }
}

/* =============================================
   IL LOGO NEL LOGIN: blu col tema chiaro, bianco col tema scuro.
   Sono due immagini e se ne vede una sola: il foglio non puo' cambiare
   il file di un'immagine, ma puo' nasconderne una.
   ============================================= */
.login-logo-scuro { display: none; }
[data-bs-theme="dark"] .login-logo-chiaro { display: none; }
[data-bs-theme="dark"] .login-logo-scuro { display: inline-block; }

/* ---- Classi costruite nei template con un suffisso variabile (dg-s{{ w }},
   role-{{ ruolo }}, anteprima-{{ tema }}): la pulizia del 22/10/2026 le
   aveva prese per morte. ---- */
/* Ensure last column doesn't drop under bootstrap default */
.dashboard-kpi > .col-xl { flex: 1 1 0; min-width: 200px; }


/* ---- «prima devi fare questo» (components/prima_di.html) ---- */
.pd-riquadro { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 16px; padding: 14px 16px;
    background: var(--attenzione-tenue); border: 1px solid var(--attenzione); border-radius: var(--r-md); color: var(--testo); }
.pd-ico { flex: 0 0 auto; font-size: 1.3rem; line-height: 1; color: var(--attenzione); }
.pd-testo { min-width: 0; }
.pd-titolo { display: block; font-size: 1rem; margin-bottom: 2px; }
.pd-testo p { margin: 0 0 6px; font-size: var(--fs-sm); line-height: 1.45; }
.pd-cose { margin: 0; padding-left: 20px; font-size: var(--fs-sm); line-height: 1.7; }
.pd-cose a { font-weight: 600; color: var(--primario); text-decoration: underline; text-underline-offset: 2px; }
.pd-cose a:hover { color: var(--testo); }
.pd-altre { list-style: none; margin-left: -20px; color: var(--testo-2); }
.modal-body > .pd-riquadro { margin: 0; }

/* ---- «Invia per email» (components/invia_email.html) ---- */
.ie-nota { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; padding: 12px 14px;
    border-radius: 10px; background: var(--attenzione-tenue); color: var(--testo); font-size: var(--fs-sm); line-height: 1.5; }
.ie-nota > i { color: var(--attenzione); font-size: 1.1rem; line-height: 1.3; }
.ie-nota a { color: var(--primario); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ie-campi { display: grid; gap: 10px; }
.ie-campo { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 10px; margin: 0; }
.ie-campo > span { font-size: var(--fs-sm); font-weight: 600; color: var(--testo-2); }
.ie-campo.ie-testo { align-items: start; }
.ie-campo.ie-testo > span { padding-top: 8px; }
.ie-allegati { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0 0 100px; font-size: var(--fs-sm); color: var(--testo-2); }
.ie-allegato { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.ie-allegato a { color: var(--primario); text-decoration: underline; text-underline-offset: 2px; }
.ie-scelta { cursor: pointer; }
.ie-esito { margin: 14px 0 0 100px; padding: 10px 12px; border-radius: 8px; background: var(--velo); font-size: var(--fs-sm); }
.ie-esito.ie-ok { background: var(--ok-tenue); color: var(--testo); }
.ie-esito.ie-no { background: var(--no-tenue); color: var(--testo); }
@media (max-width: 575.98px) {
    .ie-campo { grid-template-columns: 1fr; gap: 4px; }
    .ie-allegati, .ie-esito { margin-left: 0; }
}