/* =====================================================================
   SCRIGNO – aspetto dell'applicazione

   TEMA: tutti i valori dell'aspetto stanno in questo blocco. Per cambiare
   colori, carattere, angoli, ombre, finestre o grafici basta modificare un
   valore qui: pagine, finestre e grafici (che li leggono con tema() di
   main.js) si aggiornano da soli. Sotto il blocco ci sono solo regole che
   usano queste variabili.
   ===================================================================== */
:root {
    /* --- colori di base ------------------------------------------------ */
    --scrigno:        #0F4C3A;   /* verde scrigno: barra, pulsanti principali */
    --scrigno-scuro:  #0A3529;
    --scrigno-chiaro: #E5EFEB;   /* fondo delle selezioni e dei badge */
    --ottone:         #B8893A;   /* voce attiva, focus */
    --inchiostro:     #1B2421;   /* testo */
    --grafite:        #5B6762;   /* testo secondario */
    --nebbia:         #8A9590;   /* testo terziario */
    --superficie:     #F3F5F4;   /* fondo pagina */
    --carta:          #FFFFFF;   /* schede, tabelle, finestre */
    --carta-tenue:    #F7F9F8;   /* intestazioni di tabelle, piedi delle finestre */
    --linea:          #E1E6E3;   /* bordi */
    --linea-forte:    #CBD3CF;

    --scrigno-entrata: #13795B;
    --scrigno-uscita:  #B3263E;

    /* avvisi tenui (badge, riquadri "da chiarire") */
    --avviso-fondo:   #FBF3E2;
    --avviso-bordo:   #F0DFB8;
    --avviso-testo:   #7A5300;
    --errore-fondo:   #FBE9EB;
    --errore-testo:   #8E1C30;

    /* --- carattere ------------------------------------------------------ */
    --carattere:       'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --carattere-corpo: .9375rem;
    --cifre-strette:   82;       /* larghezza (wdth) degli importi grandi */

    /* --- forme ---------------------------------------------------------- */
    --raggio:     .5rem;
    --raggio-big: .75rem;
    --ombra-finestra: 0 12px 40px rgba(16, 38, 31, .14), 0 2px 6px rgba(16, 38, 31, .06);
    --ombra-menu:     0 8px 24px rgba(16, 38, 31, .12);
    --velo:           rgba(20, 36, 31, .28);   /* fondo dietro le finestre */
    --barra-larghezza: 15.5rem;

    /* --- finestre di avviso (SweetAlert2) -------------------------------- */
    --avviso-larghezza:   25rem;
    --avviso-icona-scala: .62;   /* le icone di SweetAlert in proporzione */
    --notifica-durata:    2600;  /* ms delle notifiche "fatto" in alto a destra */

    /* --- grafici (validati: CVD e contrasto, con le tabelle sotto) -------- */
    --grafico-entrate: #1F8A66;
    --grafico-uscite:  #C98A2E;
    --grafico-netto:   #52514E;
    --grafico-altre:   #A3A29D;
    --grafico-testo:   #52514E;
    --grafico-griglia: #E7E6E2;
    --grafico-1: #2A78D6;   /* categorie, in ordine fisso */
    --grafico-2: #EB6834;
    --grafico-3: #1BAF7A;
    --grafico-4: #EDA100;
    --grafico-5: #E87BA4;
    --grafico-6: #008300;
    --grafico-7: #6250D6;

    /* --- matrice di copertura degli estratti ------------------------------ */
    --copertura-completo:  #2E8B57;
    --copertura-parziale:  #D9A21B;
    --copertura-mancante:  #C8453B;
    --copertura-squadrato: #D97A1E;
    --copertura-in-corso:  #AEB7B3;

    /* --- Bootstrap (derivati dai valori sopra) ----------------------------- */
    --bs-body-font-family: var(--carattere);
    --bs-body-font-size: var(--carattere-corpo);
    --bs-body-line-height: 1.5;
    --bs-body-color: var(--inchiostro);
    --bs-body-bg: var(--superficie);
    --bs-secondary-color: var(--grafite);
    --bs-tertiary-bg: #EEF1F0;
    --bs-border-color: var(--linea);
    --bs-border-radius: var(--raggio);
    --bs-border-radius-sm: .375rem;
    --bs-border-radius-lg: var(--raggio-big);
    --bs-primary: var(--scrigno);
    --bs-primary-rgb: 15, 76, 58;
    --bs-link-color: var(--scrigno);
    --bs-link-color-rgb: 15, 76, 58;
    --bs-link-hover-color: var(--scrigno-scuro);
    --bs-link-hover-color-rgb: 10, 53, 41;
    --bs-focus-ring-color: rgba(184, 137, 58, .35);
    --bs-success-rgb: 19, 121, 91;
    --bs-danger-rgb: 179, 38, 62;
}

/* ------------------------------------------------------------- base */
body {
    font-feature-settings: 'tnum' 1;   /* cifre incolonnate in tabelle e importi */
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-weight: 600; letter-spacing: -.01em; color: inherit; }
.login-wrap .bi-safe2 { color: var(--ottone); }
h1.h4 { font-size: 1.5rem; }
.text-muted { color: var(--grafite) !important; }
.small, small { font-size: .8125rem; }
a { text-underline-offset: .15em; }
:focus-visible { outline: 2px solid var(--ottone); outline-offset: 2px; }
.bg-scrigno { background-color: var(--scrigno) !important; }
.text-entrata { color: var(--scrigno-entrata) !important; }
.text-uscita  { color: var(--scrigno-uscita) !important; }
.importo { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
/* cifre grandi: larghezza stretta, il dato prima dell'etichetta */
.fs-4.fw-semibold, .fs-5.fw-semibold, .cifra {
    font-variation-settings: 'wdth' var(--cifre-strette); font-weight: 600; letter-spacing: -.015em;
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ------------------------------------------------------------- guscio */
.app { display: flex; min-height: 100vh; }
.app-contenuto { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.app-contenuto > main { flex: 1 0 auto; width: 100%; max-width: 1400px; margin-inline: auto; }
.app-contenuto > main.container { max-width: 1200px; }
.piede { color: var(--nebbia); font-size: .75rem; padding: 1rem 1.5rem 1.5rem; text-align: right; }

.barra {
    --bs-offcanvas-width: var(--barra-larghezza);
    --bs-offcanvas-bg: var(--scrigno);
    background: var(--scrigno);
    color: rgba(255, 255, 255, .86);
    width: var(--barra-larghezza);
    flex: 0 0 var(--barra-larghezza);
    display: flex; flex-direction: column;
    padding: 1rem .75rem;
}
@media (min-width: 992px) {
    /* .offcanvas-lg su schermi larghi rende lo sfondo trasparente con !important */
    .barra.offcanvas-lg { background-color: var(--scrigno) !important; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
}
.barra-testa { display: flex; align-items: center; justify-content: space-between; padding: .25rem .5rem 1rem; }
.marchio { display: inline-flex; align-items: center; gap: .5rem; color: #fff; text-decoration: none; font-weight: 700; font-size: 1.125rem; letter-spacing: -.01em; }
.marchio .bi { color: var(--ottone); font-size: 1.25rem; }
.marchio:hover { color: #fff; }

.selettore {
    width: 100%; display: flex; align-items: center; gap: .625rem; text-align: left;
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); color: #fff;
    border-radius: var(--raggio); padding: .5rem .625rem; margin-bottom: 1rem;
}
.selettore:hover { background: rgba(255, 255, 255, .13); }
.selettore > .bi:first-child { font-size: 1.1rem; color: var(--ottone); }
.selettore-testo { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; }
.selettore-nome { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.selettore-tipo { font-size: .75rem; color: rgba(255, 255, 255, .6); }

.menu { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.menu .gruppo { font-size: .75rem; font-weight: 600; color: rgba(255, 255, 255, .5); padding: 1rem .625rem .375rem; }
.menu .voce {
    display: flex; align-items: center; gap: .625rem; padding: .4375rem .625rem; border-radius: .375rem;
    color: rgba(255, 255, 255, .82); text-decoration: none; font-size: .9rem; position: relative;
}
.menu .voce .bi { font-size: 1rem; opacity: .85; width: 1.1rem; text-align: center; }
.menu .voce:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.menu .voce.attiva { background: rgba(255, 255, 255, .12); color: #fff; font-weight: 600; }
.menu .voce.attiva::before { content: ''; position: absolute; left: -.75rem; top: .35rem; bottom: .35rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--ottone); }
.menu .contatore {
    margin-left: auto; min-width: 1.5rem; padding: 0 .4rem; border-radius: 999px; text-align: center;
    background: var(--ottone); color: #1B1408; font-size: .75rem; font-weight: 700; line-height: 1.35rem;
}

.barra-utente { margin-top: 1rem; }
.utente { width: 100%; display: flex; align-items: center; gap: .625rem; background: none; border: 0; color: #fff; padding: .5rem; border-radius: var(--raggio); text-align: left; }
.utente:hover { background: rgba(255, 255, 255, .08); }
.avatar { width: 2rem; height: 2rem; border-radius: 50%; background: var(--ottone); color: #1B1408; display: inline-grid; place-items: center; font-weight: 700; font-size: .8rem; flex: 0 0 auto; }
.utente-testo { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; }
.utente-nome { font-weight: 600; font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.utente-email { font-size: .75rem; color: rgba(255, 255, 255, .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.barra-mobile { display: flex; align-items: center; gap: .75rem; padding: .625rem 1rem; background: var(--scrigno); color: #fff; position: sticky; top: 0; z-index: 1020; }
.btn-icona { color: #fff; font-size: 1.4rem; padding: 0 .25rem; border: 0; }
.btn-icona:hover { color: var(--ottone); }

/* ------------------------------------------------------------- intestazione di pagina */
/* titolo e descrizione a sinistra, azione principale a destra anche con testi lunghi */
.app-contenuto > main > .d-flex.justify-content-between:first-child > div:first-child { flex: 1 1 24rem; min-width: 0; }
.app-contenuto > main > .d-flex.justify-content-between:first-child > div:first-child > p { max-width: 75ch; }

/* ------------------------------------------------------------- pulsanti */
.btn { --bs-btn-font-weight: 500; --bs-btn-border-radius: .4375rem; }
.btn-sm { --bs-btn-padding-y: .3rem; --bs-btn-padding-x: .7rem; --bs-btn-font-size: .8125rem; }
.btn-scrigno, .btn-primary {
    --bs-btn-color: #fff; --bs-btn-bg: var(--scrigno); --bs-btn-border-color: var(--scrigno);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--scrigno-scuro); --bs-btn-hover-border-color: var(--scrigno-scuro);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #072A20; --bs-btn-active-border-color: #072A20;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--scrigno); --bs-btn-disabled-border-color: var(--scrigno);
}
.btn-outline-secondary {
    --bs-btn-color: var(--inchiostro); --bs-btn-bg: var(--carta); --bs-btn-border-color: var(--linea-forte);
    --bs-btn-hover-color: var(--inchiostro); --bs-btn-hover-bg: #EEF2F0; --bs-btn-hover-border-color: var(--linea-forte);
    --bs-btn-active-color: var(--inchiostro); --bs-btn-active-bg: #E3E9E6; --bs-btn-active-border-color: var(--linea-forte);
    --bs-btn-disabled-color: var(--nebbia); --bs-btn-disabled-bg: var(--carta); --bs-btn-disabled-border-color: var(--linea);
}
.btn-outline-primary, .btn-outline-success {
    --bs-btn-color: var(--scrigno); --bs-btn-border-color: #9FC0B4; --bs-btn-bg: var(--carta);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--scrigno); --bs-btn-hover-border-color: var(--scrigno);
    --bs-btn-active-bg: var(--scrigno-scuro); --bs-btn-active-border-color: var(--scrigno-scuro);
    --bs-btn-disabled-color: #7FA597; --bs-btn-disabled-border-color: #CFE0D9;
}
.btn-light { --bs-btn-bg: #EEF2F0; --bs-btn-border-color: #EEF2F0; --bs-btn-hover-bg: #E3E9E6; --bs-btn-hover-border-color: #E3E9E6; }
.btn-link { --bs-btn-color: var(--scrigno); text-decoration: none; }
.btn-check:checked + .btn-outline-secondary { background: var(--scrigno-chiaro); border-color: #9FC0B4; color: var(--scrigno); }

/* ------------------------------------------------------------- schede */
.card { --bs-card-border-color: var(--linea); --bs-card-border-radius: var(--raggio-big); --bs-card-bg: var(--carta); }
.card.border-0 { border: 1px solid var(--linea) !important; }
.shadow-sm { box-shadow: none !important; }
.card-entita { border-radius: var(--raggio-big); transition: border-color .15s; }
a.card-entita:hover { border-color: #9FC0B4 !important; }

/* ------------------------------------------------------------- moduli */
.form-label.small { color: var(--grafite); font-weight: 600 !important; margin-bottom: .3rem; }
.form-control, .form-select { border-color: var(--linea-forte); }
.form-control:focus, .form-select:focus { border-color: var(--ottone); box-shadow: 0 0 0 .2rem rgba(184, 137, 58, .2); }
.form-check-input:checked { background-color: var(--scrigno); border-color: var(--scrigno); }
.form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(184, 137, 58, .2); border-color: var(--ottone); }
.input-group-text { background: #EEF2F0; border-color: var(--linea-forte); color: var(--grafite); }

/* ------------------------------------------------------------- linguette */
.nav-tabs { --bs-nav-tabs-border-color: var(--linea); --bs-nav-tabs-link-active-bg: transparent; --bs-nav-tabs-link-active-border-color: transparent; gap: .25rem; }
.nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; color: var(--grafite); font-weight: 500; padding: .6rem .9rem; margin-bottom: -1px; }
.nav-tabs .nav-link:hover { color: var(--inchiostro); border-bottom-color: var(--linea-forte); }
.nav-tabs .nav-link.active { color: var(--scrigno); border-bottom-color: var(--scrigno); background: transparent; font-weight: 600; }
.tab-content.bg-white { border-radius: 0 0 var(--raggio-big) var(--raggio-big); }

/* ------------------------------------------------------------- tabelle */
.table { --bs-table-bg: transparent; --bs-table-color: var(--inchiostro); --bs-table-border-color: var(--linea); --bs-table-hover-bg: #F3F7F5; }
.table > thead th, .table > thead td { font-size: .8125rem; font-weight: 600; color: var(--grafite); border-bottom-color: var(--linea-forte); white-space: nowrap; }
.table-sm > :not(caption) > * > * { padding: .45rem .5rem; }
.badge { font-weight: 600; letter-spacing: 0; }
.text-bg-secondary { background-color: #E6EAE8 !important; color: var(--grafite) !important; }
.text-bg-light { background-color: #EEF2F0 !important; color: var(--grafite) !important; }
.text-bg-success { background-color: var(--scrigno-chiaro) !important; color: var(--scrigno) !important; }
.text-bg-warning { background-color: var(--avviso-fondo) !important; color: var(--avviso-testo) !important; }
.text-bg-danger { background-color: var(--errore-fondo) !important; color: var(--errore-testo) !important; }
.text-bg-primary { background-color: #E3ECF7 !important; color: #1F4E8C !important; }
.text-bg-info { background-color: #E0F1F4 !important; color: #1C5E6B !important; }

/* ------------------------------------------------------------- tabella dati (componente Tabella di main.js) */
.tabella-dati { background: var(--carta); border: 1px solid var(--linea); border-radius: var(--raggio-big); overflow: hidden; }
.tabella-barra { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .625rem .75rem; border-bottom: 1px solid var(--linea); }
.tabella-cerca { position: relative; flex: 1 1 16rem; max-width: 22rem; }
.tabella-cerca .bi { position: absolute; left: .65rem; top: 50%; transform: translateY(-50%); color: var(--nebbia); pointer-events: none; }
.tabella-cerca input { padding-left: 2rem; }
.tabella-conteggio { margin-left: auto; color: var(--grafite); font-size: .8125rem; }
.tabella-scorri { overflow: auto; }
.tabella-dati table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; }
.tabella-dati thead th {
    position: sticky; top: 0; z-index: 1; background: var(--carta-tenue); color: var(--grafite);
    font-size: .8125rem; font-weight: 600; text-align: left; padding: .55rem .75rem; border-bottom: 1px solid var(--linea); white-space: nowrap; user-select: none;
}
.tabella-dati thead th.ordinabile { cursor: pointer; }
.tabella-dati thead th.ordinabile:hover { color: var(--inchiostro); }
.tabella-dati thead th .freccia { opacity: .35; font-size: .7rem; margin-left: .25rem; }
.tabella-dati thead th[aria-sort] .freccia { opacity: 1; color: var(--scrigno); }
.tabella-dati tbody td { padding: .6rem .75rem; border-bottom: 1px solid #EDF1EF; vertical-align: middle; font-size: .875rem; }
.tabella-dati tbody tr:hover td { background: #F6F9F7; }
.tabella-dati tbody tr.selezionata td { background: var(--scrigno-chiaro); }
.tabella-dati tbody tr.selezionata td:first-child { box-shadow: inset 3px 0 0 var(--scrigno); }
.tabella-dati tbody tr:focus-visible { outline: 2px solid var(--ottone); outline-offset: -2px; }
.tabella-dati tbody tr:last-child td { border-bottom: 0; }
.tabella-dati .col-check { width: 2.25rem; padding-right: 0; }
.tabella-dati .fine { text-align: right; }
.tabella-dati .centro { text-align: center; }
.tabella-dati .secondario { color: var(--grafite); font-size: .8125rem; }
.tabella-vuota { padding: 2.5rem 1rem; text-align: center; color: var(--grafite); }
.tabella-vuota .bi { font-size: 1.75rem; display: block; margin-bottom: .5rem; color: var(--nebbia); }
.tabella-piede { padding: .5rem .75rem; border-top: 1px solid var(--linea); text-align: center; }
@media (max-width: 767.98px) {
    .tabella-dati thead { display: none; }
    .tabella-dati tbody tr { display: block; padding: .625rem .75rem; border-bottom: 1px solid var(--linea); }
    .tabella-dati tbody td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .15rem 0; text-align: right; }
    .tabella-dati tbody td::before { content: attr(data-etichetta); color: var(--grafite); font-size: .8125rem; text-align: left; flex: 0 0 auto; }
    .tabella-dati tbody td.col-check::before, .tabella-dati tbody td.principale::before { content: none; }
    .tabella-dati tbody td.principale { font-weight: 600; text-align: left; }
    .tabella-dati tbody tr.selezionata td:first-child { box-shadow: none; }
}

/* ------------------------------------------------------------- finestre */
/* finestre di modifica (Bootstrap): leggere, ombra morbida, velo tenue */
.modal { --bs-modal-border-width: 0; --bs-modal-border-radius: var(--raggio-big); --bs-modal-box-shadow: var(--ombra-finestra);
         --bs-modal-header-padding: 1rem 1.25rem .5rem; --bs-modal-padding: 1rem 1.25rem; --bs-modal-footer-gap: .5rem; }
.modal-backdrop { --bs-backdrop-bg: var(--velo); --bs-backdrop-opacity: 1; }
.modal-content { box-shadow: var(--ombra-finestra); }
.modal-header { border-bottom: 0; }
.modal-title { font-weight: 600; font-size: 1.0625rem; }
.modal-header .btn-close { font-size: .75rem; opacity: .45; }
.modal-header .btn-close:hover { opacity: .8; }
.modal-footer { border-top: 1px solid var(--linea); background: var(--carta-tenue); border-radius: 0 0 var(--raggio-big) var(--raggio-big); padding: .75rem 1.25rem; }
.modal.fade .modal-dialog { transform: translateY(8px); transition: transform .18s ease-out; }
.modal.show .modal-dialog { transform: none; }

/* finestre di avviso (SweetAlert2): compatte, icona piccola, pulsanti del programma */
.swal2-container.swal2-backdrop-show { background: var(--velo) !important; }
body.swal2-toast-shown .swal2-container, .swal2-container.swal2-top-end { background: transparent !important; pointer-events: none; }
body.swal2-toast-shown .swal2-popup { pointer-events: auto; }
.swal2-popup.scrigno-avviso {
    width: var(--avviso-larghezza); padding: 1.25rem 1.25rem 1rem; border-radius: var(--raggio-big);
    font-family: var(--carattere); color: var(--inchiostro); box-shadow: var(--ombra-finestra);
}
.scrigno-avviso .swal2-icon { transform: scale(var(--avviso-icona-scala)); margin: -.75rem auto -1rem; }
.scrigno-avviso .swal2-title { font-size: 1.0625rem; font-weight: 600; padding: .5rem 0 0; color: var(--inchiostro); }
.scrigno-avviso .swal2-html-container { font-size: .875rem; color: var(--grafite); margin: .5rem 0 0; line-height: 1.5; }
.scrigno-avviso .swal2-input, .scrigno-avviso .swal2-select, .scrigno-avviso .swal2-textarea { font-size: .9375rem; margin: .75rem 0 0; }
.scrigno-avviso .swal2-actions { gap: .5rem; margin-top: 1.25rem; justify-content: flex-end; width: 100%; }
.scrigno-avviso .swal2-actions .btn { min-width: 6rem; }
.scrigno-avviso .swal2-validation-message { background: var(--errore-fondo); color: var(--errore-testo); font-size: .8125rem; }
.scrigno-avviso .swal2-loader { border-color: var(--scrigno) transparent var(--scrigno) transparent; }
/* notifiche "fatto": piccole, in alto a destra, si chiudono da sole */
.swal2-popup.swal2-toast.scrigno-notifica {
    padding: .625rem .875rem; border-radius: var(--raggio); box-shadow: var(--ombra-menu); font-family: var(--carattere);
    border: 1px solid var(--linea); background: var(--carta);
}
.scrigno-notifica .swal2-title { font-size: .875rem; font-weight: 500; color: var(--inchiostro); margin: 0 .25rem; }
.scrigno-notifica .swal2-icon { transform: scale(.8); margin: 0 .25rem 0 0; }
.scrigno-notifica .swal2-timer-progress-bar { background: var(--scrigno-chiaro); }
.swal2-icon.swal2-success { border-color: var(--scrigno-entrata) !important; color: var(--scrigno-entrata) !important; }
.swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--scrigno-entrata) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(19, 121, 91, .25) !important; }
.swal2-icon.swal2-warning, .swal2-icon.swal2-question { border-color: var(--ottone) !important; color: var(--ottone) !important; }
.swal2-icon.swal2-error { border-color: var(--scrigno-uscita) !important; }
.swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: var(--scrigno-uscita) !important; }
.swal2-icon.swal2-info { border-color: var(--nebbia) !important; color: var(--grafite) !important; }
@keyframes scrigno-appare { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes scrigno-sparisce { to { opacity: 0; transform: translateY(4px); } }
.scrigno-appare { animation: scrigno-appare .16s ease-out; }
.scrigno-sparisce { animation: scrigno-sparisce .12s ease-in forwards; }
.suggerimento-osm { display: flex; align-items: flex-start; background: var(--scrigno-chiaro); border-radius: var(--raggio); padding: .5rem .75rem; }
.suggerimento-osm > .bi { color: var(--scrigno); }
.avviso-domanda { background: var(--avviso-fondo); border: 1px solid var(--avviso-bordo); }
.avviso-domanda > .bi { color: var(--avviso-testo); }

/* select2 */
.select2-container--default .select2-selection--single { border-color: var(--linea-forte); border-radius: .375rem; height: calc(1.5em + .5rem + 2px); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--scrigno); }

/* ------------------------------------------------------------- accesso */
.login-wrap {
    min-height: 100vh;
    background: var(--scrigno);
    background-image: radial-gradient(60rem 30rem at 15% -10%, rgba(184, 137, 58, .22), transparent 60%);
}
.login-card { border-radius: 1rem; border: 0 !important; }
.codice-2fa { font-size: 1.75rem; letter-spacing: .5rem; font-variant-numeric: tabular-nums; }
#qrTotp img, #qrTotp canvas { display: block; }

/* ------------------------------------------------------------- moduli specifici */
.badge-ruolo { font-size: .7rem; font-weight: 600; }
.badge-ruolo.ADMIN  { background: var(--scrigno) !important; color: #fff !important; }
.badge-ruolo.EDITOR { background: #3D7E6B !important; color: #fff !important; }
.badge-ruolo.VIEWER { background: #8A9590 !important; color: #fff !important; }
.titolari-riga .form-control { max-width: 7rem; }

.cella-copertura { width: 2.2rem; height: 2.2rem; border-radius: .4rem; cursor: pointer; }
.cella-copertura.COMPLETO      { background: var(--copertura-completo); }
.cella-copertura.PARZIALE      { background: var(--copertura-parziale); }
.cella-copertura.MANCANTE      { background: var(--copertura-mancante); }
.cella-copertura.SQUADRATO     { background: var(--copertura-squadrato); }
.cella-copertura.IN_CORSO      { background: var(--copertura-in-corso); }
.cella-copertura.NON_RICHIESTO { background: transparent; border: 1px dashed var(--copertura-in-corso); cursor: default; }
.cella-copertura.fuori         { background: #ECEFEE; cursor: default; }
.cella-copertura.legenda       { width: 1rem; height: 1rem; border-radius: .25rem; }
.matrice-copertura td, .matrice-copertura th { padding: .25rem .2rem; }

.zona-caricamento { border: 2px dashed var(--linea-forte) !important; border-radius: var(--raggio-big); cursor: pointer; transition: background .15s, border-color .15s; }
.zona-caricamento:hover, .zona-caricamento.attiva { background: var(--scrigno-chiaro); border-color: var(--scrigno) !important; }
.tabella-anteprima { max-height: 22rem; overflow-y: auto; border: 1px solid var(--linea); border-radius: var(--raggio); }
.tabella-anteprima thead th { position: sticky; top: 0; z-index: 1; background: #F7F9F8; }

.miniatura-doc { width: 40px; height: 40px; object-fit: cover; border-radius: .375rem; border: 1px solid var(--linea); }
.grafico-report { width: 100%; height: 24rem; }
.grafico-report.grafico-basso { height: 16rem; }

/* coda dei file caricati insieme */
#codaFile { max-height: 22rem; overflow-y: auto; margin-inline: -.25rem; padding-inline: .25rem; }   /* l'elenco scorre, intestazione e pulsanti restano */
.coda-riga { display: flex; align-items: flex-start; gap: .75rem; padding: .625rem 0; border-top: 1px solid var(--linea); }
.coda-riga:first-child { border-top: 0; }
.coda-icona { width: 1.25rem; flex: 0 0 auto; text-align: center; padding-top: .1rem; }
.coda-testo { flex: 1 1 auto; min-width: 0; }
.coda-azioni { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: flex-end; flex: 0 1 auto; max-width: 55%; }
.coda-azioni .input-group { width: auto; min-width: 16rem; }
.coda-riga[data-stato="ok"] .coda-icona { color: var(--scrigno-entrata); }
.coda-riga[data-stato="gia"] .coda-icona { color: var(--nebbia); }
.coda-riga[data-stato="decidi"] .coda-icona { color: var(--ottone); }
.coda-riga[data-stato="errore"] .coda-icona { color: var(--scrigno-uscita); }
@media (max-width: 767.98px) { .coda-riga { flex-wrap: wrap; } .coda-azioni { max-width: 100%; justify-content: flex-start; padding-left: 2rem; } }