/* ==========================================================================
   AUGUSTA — livello di tema (design system)
   --------------------------------------------------------------------------
   Questo foglio si SOVRAPPONE agli stili esistenti, non li sostituisce:
   nessun file CSS originale e' stato modificato. Viene caricato per ultimo da
   inc/_global/views/head_end.php e solo se la costante TEMA_AUGUSTA in
   inc/_global/config.php vale true.

   PER TORNARE ALL'ASPETTO PRECEDENTE: mettere TEMA_AUGUSTA a false in
   config.php. Non serve altro, nulla va disinstallato o ripristinato.

   Regola seguita: non si tocca nulla di Leaflet (.leaflet-*) ne' del pannello
   della mappa (.mappa-pannello / #misura-widget / #tragitto-widget), che hanno
   gia' un proprio stile calibrato; ne' la barra tricolore in cima.

   Struttura: 1) token · 2) base · 3) layout · 4) sidebar · 5) header ·
   6) card · 7) bottoni · 8) form · 9) tabelle+DataTables · 10) badge ·
   11) dropdown · 12) modali · 13) alert · 14) SweetAlert2 · 15) footer ·
   16) responsive.
   ========================================================================== */

/* --- 1) TOKEN ------------------------------------------------------------- */
:root {
    /* Identita' (protezione civile: blu/navy sobrio) */
    --au-blu-scuro: #1e3a5f;
    --au-blu: #2c5f8a;
    --au-blu-500: #2f6ca6;
    --au-blu-chiaro: #eaf1f8;
    --au-blu-tint: #f4f8fc;

    /* Neutri */
    --au-sfondo: #eef1f6;
    --au-surface: #ffffff;
    --au-bordo: #e4e9f1;
    --au-bordo-tenue: #eef2f7;
    --au-testo: #1f2a37;
    --au-testo-tenue: #64748b;
    --au-testo-debole: #94a3b8;

    /* Semantici + sfondi tenui coordinati */
    --au-rosso: #cf3a2c;   --au-rosso-bg: #fdf0ee;   --au-rosso-testo: #8c2b20;
    --au-verde: #16794f;   --au-verde-bg: #ecf7f1;   --au-verde-testo: #14603f;
    --au-ambra: #c67c0c;   --au-ambra-bg: #fdf6e9;   --au-ambra-testo: #7d5406;
    --au-info:  #2c5f8a;   --au-info-bg:  #eaf1f8;   --au-info-testo:  #1e3a5f;

    /* Elevazione (morbida, a strati) */
    --au-ombra-sm: 0 1px 2px rgba(16, 42, 67, .06);
    --au-ombra: 0 1px 2px rgba(16, 42, 67, .04), 0 6px 18px rgba(16, 42, 67, .06);
    --au-ombra-alta: 0 2px 6px rgba(16, 42, 67, .06), 0 18px 44px rgba(16, 42, 67, .14);

    /* Raggi */
    --au-r-sm: 8px;
    --au-r: 12px;
    --au-r-lg: 16px;
    --au-r-pill: 999px;
    --au-raggio: 12px; /* retro-compatibilita' */

    /* Movimento */
    --au-t: .16s cubic-bezier(.4, 0, .2, 1);
    --au-t-lento: .24s cubic-bezier(.4, 0, .2, 1);
}

/* --- 2) BASE ------------------------------------------------------------- */
body {
    /* Nunito Sans e' gia' caricato dal layout ma non veniva usato: il corpo era in Arial */
    font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    background-color: var(--au-sfondo);
    color: var(--au-testo);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: .002em;
}

.main-content,
.app-content { background-color: transparent; }

::selection { background: rgba(44, 95, 138, .18); }

/* Focus accessibile e coerente (tastiera), senza invadere il click del mouse */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.side-menu__item:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    outline: 2px solid var(--au-blu-500);
    outline-offset: 2px;
}

/* Scrollbar discrete e coordinate */
* { scrollbar-width: thin; scrollbar-color: #c2ccd9 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: #c7d0dc; border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #aab7c7; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* --- 3) LAYOUT ----------------------------------------------------------- */
/* Solo il contenitore dei CONTENUTI. L'header usa lo stesso nome di classe
   (<div class="container-fluid main-container"> dentro .app-header): una versione
   precedente di questa regola, senza lo scope, gli aggiungeva 28px di vuoto sotto le
   icone e lo gonfiava a ~100px. */
.main-content .main-container { padding-bottom: 28px; }

/* Titoli di pagina scritti come <center><h4>TITOLO</h4></center> */
.card-body > center > h4,
.card-body > center h4 {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--au-blu-scuro);
    margin: 4px 0 22px;
    padding-bottom: 13px;
    position: relative;
}
.card-body > center > h4::after,
.card-body > center h4::after {
    content: '';
    position: absolute;
    left: 50%; bottom: 0;
    width: 52px; height: 3px; margin-left: -26px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--au-blu-scuro), var(--au-blu));
}

/* --- 4) SIDEBAR ---------------------------------------------------------- */
.app-sidebar {
    background-color: var(--au-surface) !important;
    border-right: 1px solid var(--au-bordo);
    box-shadow: 1px 0 14px rgba(30, 58, 95, .05);
}

.side-menu__item {
    position: relative;
    border-radius: 9px;
    margin: 2px 12px;
    padding: 9px 13px !important;
    font-size: 13.5px;
    font-weight: 600;
    color: #566579 !important;
    transition: background-color var(--au-t), color var(--au-t);
}
.side-menu__item:hover {
    background-color: var(--au-blu-tint) !important;
    color: var(--au-blu-scuro) !important;
}
/* Voce attiva: riempimento pieno navy + barretta d'accento a sinistra */
.side-menu__item.active,
.side-menu__item.active:hover {
    background: linear-gradient(92deg, var(--au-blu-scuro), var(--au-blu)) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(30, 58, 95, .22);
}
.side-menu__item.active::before {
    content: '';
    position: absolute;
    left: -12px; top: 50%; transform: translateY(-50%);
    width: 4px; height: 22px; border-radius: 0 4px 4px 0;
    background: var(--au-blu-scuro);
}
.side-menu__item.active .side-menu__icon { opacity: 1; color: #fff; }

.side-menu__icon { margin-right: 10px; opacity: .72; transition: opacity var(--au-t); }
.side-menu__item:hover .side-menu__icon { opacity: 1; }

/* Intestazioni di gruppo del menu */
.sub-category h3 {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--au-testo-debole);
    margin: 18px 24px 6px;
}

/* --- 5) HEADER ----------------------------------------------------------- */
/* Header OPACO. Una prima versione lo rendeva "vetro smerigliato" (bianco al 92% +
   backdrop-filter blur/saturate): scorrendo, il contenuto sottostante trapelava sfocato
   e saturato e in cima restava una striscia semitrasparente con sbavature colorate, che
   sembrava una barra appoggiata sopra la pagina. In piu' backdrop-filter rende l'header
   "containing block" dei discendenti position:fixed/absolute (menu a tendina compresi).
   Bianco pieno: nessuna trasparenza, nessun filtro. */
.app-header.header {
    background: #fff;
    border-bottom: 1px solid var(--au-bordo);
    box-shadow: 0 1px 12px rgba(30, 58, 95, .05);
}

/* Header compatto (desktop): 48px, una barra, non un pannello.
   Causa dell'header "enorme" (~100px): la regola di layout `.main-container
   { padding-bottom: 28px }` (sezione 3) colpiva anche il .container-fluid.main-container
   DENTRO l'header -> 28px di vuoto sotto le icone, che restavano in alto. sticky.js
   misurava quell'altezza (24 padding + 50 riga + 28 + bordo ~ 100) e da li' il
   margin-bottom:-100px. La regola e' ora scopata a .main-content.
   Qui l'altezza e' ESPLICITA: qualunque cosa finisca dentro, la barra e' 48px (.app-header
   e' display:flex nel template, align-items:center centra la riga). Icone a 32px centrate
   con flex, senza calcoli di padding; il prefisso .app (classe del body) alza la
   specificita' sopra le regole del template con !important. Testata della sidebar alla
   stessa altezza (logo 30px). sticky.js ricalcola da solo l'offset del contenuto.
   Sotto 992px (header con logo centrato in assoluto) nulla cambia. */
@media (min-width: 992px) {
    .app .app-header.header {
        height: 48px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        align-items: center;
    }
    .app .app-header .container-fluid.main-container { padding-top: 0 !important; padding-bottom: 0 !important; }
    .app .app-header .header-right-icons .nav-link.icon,
    .app .app-header .header-right-icons .nav-link.icon:hover,
    .app .app-header .app-sidebar__toggle,
    .app.sidebar-mini.sidenav-toggled .app-header .app-sidebar__toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        margin: 0 4px !important;
        font-size: 1.05rem;
        line-height: 1;
    }
    .app .app-header .app-sidebar__toggle::before { font-size: 18px; }
    .app .app-header .header-right-icons .profile-1 .nav-link { padding-top: 0 !important; padding-bottom: 0 !important; }
    .app .app-header .header-right-icons .avatar { width: 30px; height: 30px; line-height: 30px; }
    .app .app-sidebar .side-header { height: 48px !important; padding: 8px 17px !important; }
    .app .app-sidebar .side-header .header-brand-img { height: 30px; }
}
.app-header .header-icon,
.app-header .nav-link.icon { color: var(--au-testo-tenue); }
.app-header .nav-link.icon:hover { color: var(--au-blu-scuro); }

/* Altezza dell'header. Uno <style> inline in inc/backend/views/app-header.php forza
   .responsive-logo (il logo per telefono) a 128x128 anche su desktop, dove quel logo
   non viene mostrato: restava un riquadro vuoto da 128px che gonfiava l'intestazione
   a ~100px con le icone centrate nel nulla (assets/js/sticky.js misura quell'altezza
   e da li' nasce il margin-bottom:-100px). Su desktop il riquadro torna a dimensione
   naturale: l'header si compatta e sticky.js ricalcola l'offset del contenuto da solo.
   Su telefono (< 768px) non si tocca nulla. */
@media (min-width: 768px) {
    .app-header .responsive-logo { width: auto !important; height: auto !important; }
    .app-header .responsive-logo .mobile-logo { max-height: 40px; width: auto; }
}

/* --- 6) CARD ------------------------------------------------------------- */
.card {
    border: 1px solid var(--au-bordo);
    border-radius: var(--au-r-lg);
    box-shadow: var(--au-ombra);
    background: var(--au-surface);
    transition: box-shadow var(--au-t-lento), transform var(--au-t-lento);
}
.card:hover { box-shadow: var(--au-ombra-alta); }
.card-body { padding: 24px 26px; }
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--au-bordo-tenue);
    font-weight: 700;
    color: var(--au-blu-scuro);
    padding: 16px 22px;
}

/* --- 7) BOTTONI ---------------------------------------------------------- */
.btn {
    border-radius: 9px;
    font-weight: 600;
    letter-spacing: .01em;
    padding: 8px 18px;
    transition: transform .12s ease, box-shadow var(--au-t), background-color var(--au-t), border-color var(--au-t), color var(--au-t);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn.disabled { opacity: .55; transform: none; box-shadow: none; }
.btn-sm { padding: 5px 12px; font-size: 12.5px; border-radius: 8px; }
.btn-md { border-radius: 8px; }
.btn-lg { padding: 11px 24px; border-radius: 11px; }

.btn-primary {
    background: linear-gradient(180deg, var(--au-blu) 0%, var(--au-blu-scuro) 100%);
    border-color: var(--au-blu-scuro);
    box-shadow: 0 2px 8px rgba(44, 95, 138, .26);
}
.btn-primary:hover, .btn-primary:focus {
    background: linear-gradient(180deg, #35709f 0%, #24476f 100%);
    border-color: var(--au-blu-scuro);
    box-shadow: 0 5px 16px rgba(44, 95, 138, .34);
}
/* Il template (assets/css/style.css) definisce .btn-secondary { background:#fb6b25 !important }:
   la regola del tema, senza !important, perdeva anche caricando dopo, e i pulsanti restavano
   arancioni. Vale anche per la toolbar DataTables: l'integrazione Bootstrap di Buttons rende
   Export / Visibilita' Colonna come .btn.btn-secondary (non .dt-button), da cui la pillola
   arancione. Qui il tema riprende il comando, hover compreso (un hover senza !important
   non puo' battere una base con !important). */
.btn-secondary, .btn-light,
.dt-buttons .btn {
    background: var(--au-surface) !important;
    color: var(--au-blu-scuro) !important;
    border: 1px solid #cfd9e5 !important;
    box-shadow: none !important;
}
.btn-secondary:hover, .btn-secondary:focus,
.btn-light:hover, .btn-light:focus,
.dt-buttons .btn:hover, .dt-buttons .btn:focus {
    background: var(--au-blu-tint) !important;
    color: var(--au-blu-scuro) !important;
    border-color: var(--au-blu) !important;
}
.btn-outline-primary { border-color: #bcd0e4; color: var(--au-blu); }
.btn-outline-primary:hover { background: var(--au-blu-chiaro); color: var(--au-blu-scuro); border-color: var(--au-blu); }
.btn-outline-danger { border-color: #e6b6af; color: var(--au-rosso); }
.btn-outline-danger:hover { background: var(--au-rosso-bg); color: var(--au-rosso-testo); border-color: var(--au-rosso); }

.btn-success { background: var(--au-verde); border-color: var(--au-verde); box-shadow: 0 2px 8px rgba(22, 121, 79, .22); }
.btn-success:hover { background: #12633f; border-color: #12633f; }
.btn-danger  { background: var(--au-rosso); border-color: var(--au-rosso); box-shadow: 0 2px 8px rgba(207, 58, 44, .22); }
.btn-danger:hover { background: #b02e22; border-color: #b02e22; }
.btn-warning { background: var(--au-ambra); border-color: var(--au-ambra); color: #fff; box-shadow: 0 2px 8px rgba(198, 124, 12, .22); }
.btn-warning:hover { background: #ab6a09; border-color: #ab6a09; color: #fff; }

/* Icona-azione nelle tabelle (edit/elimina) */
.btn-md, td .btn-md, td .btn-riga {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px; transition: background-color var(--au-t), color var(--au-t);
}
td a.btn-md, td button.btn-md {
    padding: 6px 9px; line-height: 1; color: var(--au-testo-tenue);
    background: transparent; border: 1px solid transparent;
}
td a.btn-md:hover { background: var(--au-blu-tint); color: var(--au-blu-scuro); }
td .del-manut:hover, td .delete-button:hover, td .del-user:hover, td .del-radio:hover,
td button.btn-md.text-danger:hover { background: var(--au-rosso-bg); color: var(--au-rosso) !important; }

/* --- 8) FORM ------------------------------------------------------------- */
.form-control,
.form-select,
select.form-control {
    border: 1px solid #d7dfe9;
    border-radius: 9px;
    color: var(--au-testo);
    background-color: #fff;
    transition: border-color var(--au-t), box-shadow var(--au-t), background-color var(--au-t);
}
.form-control::placeholder { color: var(--au-testo-debole); }
.form-control:hover,
.form-select:hover { border-color: #c3cfdd; }
.form-control:focus,
.form-select:focus,
select.form-control:focus {
    border-color: var(--au-blu);
    box-shadow: 0 0 0 3px rgba(44, 95, 138, .15);
    background-color: #fff;
}
.form-control[readonly], .form-control:disabled, .form-select:disabled {
    background-color: #f5f7fa;
    color: var(--au-testo-tenue);
}
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--au-rosso); }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(207, 58, 44, .14); }
.form-control.is-valid, .form-select.is-valid { border-color: var(--au-verde); }

.card-body label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--au-testo-tenue);
    letter-spacing: .02em;
    margin-bottom: 5px;
}
.card-body .custom-control label,
.card-body label.custom-control {
    font-weight: 400;
    color: var(--au-testo);
    margin-bottom: 0;
}
/* Spunte/interruttori coerenti col blu del tema */
.custom-control-input:checked ~ .custom-control-label::before,
.form-check-input:checked {
    background-color: var(--au-blu) !important;
    border-color: var(--au-blu) !important;
}
.form-check-input:focus { box-shadow: 0 0 0 3px rgba(44, 95, 138, .15); border-color: var(--au-blu); }

/* --- 9) TABELLE + DataTables --------------------------------------------- */
.table { color: var(--au-testo); margin-bottom: 0; }
.table > thead > tr > th,
table.dataTable > thead > tr > th {
    background: var(--au-blu-tint);
    color: var(--au-blu-scuro);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    border-bottom: 1px solid #dbe4ee !important;
    border-top: none;
    padding: 13px 12px;
    white-space: nowrap;
}
.table > tbody > tr,
table.dataTable > tbody > tr { transition: background-color var(--au-t); }
.table > tbody > tr:hover,
table.dataTable > tbody > tr:hover { background-color: #f5f9fd; }
.table > tbody > tr > td,
table.dataTable > tbody > tr > td {
    border-top: 1px solid var(--au-bordo-tenue);
    vertical-align: middle;
    padding: 12px;
    font-size: 13.5px;
}

/* Toolbar / controlli DataTables */
.dataTables_wrapper .dataTables_filter { text-align: right; margin-bottom: 6px; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid #d7dfe9;
    border-radius: 9px;
    padding: 6px 12px;
    background: #fff;
    transition: border-color var(--au-t), box-shadow var(--au-t);
}
.dataTables_wrapper .dataTables_filter input { min-width: 220px; }
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--au-blu);
    box-shadow: 0 0 0 3px rgba(44, 95, 138, .15);
    outline: none;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { color: var(--au-testo-tenue); font-size: 13px; }
.dataTables_wrapper .dataTables_paginate { margin-top: 8px; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 8px !important;
    border: 1px solid transparent !important;
    padding: 5px 11px !important;
    color: var(--au-testo-tenue) !important;
    transition: background-color var(--au-t), color var(--au-t), border-color var(--au-t);
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--au-blu-tint) !important;
    border-color: #cfe0ee !important;
    color: var(--au-blu-scuro) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--au-blu-scuro) !important;
    border-color: var(--au-blu-scuro) !important;
    color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity: .4; }
/* Pulsanti export (Buttons extension) */
.dt-buttons .dt-button,
.dt-button {
    background: var(--au-surface) !important;
    border: 1px solid #cfd9e5 !important;
    border-radius: 8px !important;
    color: var(--au-blu-scuro) !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    transition: background-color var(--au-t), border-color var(--au-t);
}
.dt-buttons .dt-button:hover, .dt-button:hover {
    background: var(--au-blu-tint) !important;
    border-color: var(--au-blu) !important;
}
/* Indicatori di ordinamento piu' discreti */
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after { opacity: .4; }

/* Responsive vs utilita' Bootstrap sulle colonne.
   Le tabelle hanno th/td con "d-none d-sm-table-cell": da 576px in su Bootstrap impone
   display:table-cell !important. DataTables Responsive 2.2.9 (quello in bundle) nasconde
   una colonna che non ci sta scrivendo style="display:none" INLINE, senza !important:
   perde, la colonna resta visibile in riga E Responsive la ripete nella riga-figlio
   (es. "Consulta Protocolli" due volte sotto "Azioni"). Quando Responsive ha deciso di
   nascondere una cella, deve restare nascosta: specificita' piu' alta + !important.
   Il selettore .dtr-hidden copre le versioni piu' recenti di Responsive, che usano la classe. */
table.dataTable > thead > tr > th[style*="display: none"],
table.dataTable > thead > tr > th[style*="display:none"],
table.dataTable > tbody > tr > td[style*="display: none"],
table.dataTable > tbody > tr > td[style*="display:none"],
table.dataTable > thead > tr > th.dtr-hidden,
table.dataTable > tbody > tr > td.dtr-hidden { display: none !important; }

/* --- 10) BADGE ----------------------------------------------------------- */
.badge {
    border-radius: 6px;
    font-weight: 700;
    letter-spacing: .03em;
    padding: .4em .72em;
    font-size: 10.5px;
    /* Il template da' a .badge line-height:0 compensato da padding 1em: con il padding piu'
       stretto qui sopra il testo sbordava dal riquadro (badge "CHIUSA" sbavato). */
    line-height: 1.25;
    text-transform: uppercase;
    vertical-align: middle;
}
/* Varianti "soft" piu' eleganti dei pieni saturi Bootstrap */
.badge.bg-success { background: var(--au-verde-bg) !important; color: var(--au-verde-testo) !important; }
.badge.bg-danger  { background: var(--au-rosso-bg) !important; color: var(--au-rosso-testo) !important; }
.badge.bg-warning { background: var(--au-ambra-bg) !important; color: var(--au-ambra-testo) !important; }
.badge.bg-info    { background: var(--au-info-bg) !important;  color: var(--au-info-testo) !important; }
.badge.bg-primary { background: var(--au-blu-chiaro) !important; color: var(--au-blu-scuro) !important; }
.badge.bg-secondary { background: #eef1f5 !important; color: #5a6675 !important; }
.badge.bg-dark    { background: #37414f !important; color: #fff !important; }

/* --- 11) DROPDOWN -------------------------------------------------------- */
.dropdown-menu {
    border: 1px solid var(--au-bordo);
    border-radius: var(--au-r);
    box-shadow: var(--au-ombra-alta);
    padding: 6px;
}
.dropdown-item { border-radius: 8px; font-size: 13.5px; padding: 8px 12px; transition: background-color var(--au-t), color var(--au-t); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--au-blu-tint); color: var(--au-blu-scuro); }
.dropdown-divider { border-color: var(--au-bordo-tenue); }

/* --- 12) MODALI ---------------------------------------------------------- */
.modal-content {
    border: none;
    border-radius: var(--au-r-lg);
    box-shadow: var(--au-ombra-alta);
    overflow: hidden;
}
.modal-header {
    background: linear-gradient(135deg, var(--au-blu-scuro), var(--au-blu));
    color: #fff;
    border-bottom: none;
    padding: 16px 22px;
}
.modal-header .modal-title,
.modal-header h7 { color: #fff; font-weight: 700; letter-spacing: .04em; font-size: 14px; }
.modal-header .btn-close, .modal-header .close { filter: invert(1) grayscale(1) brightness(1.6); opacity: .9; }
.modal-body { padding: 22px 24px; }
.modal-footer { border-top: 1px solid var(--au-bordo-tenue); padding: 14px 22px; }

/* --- 13) ALERT ----------------------------------------------------------- */
.alert {
    border: none;
    border-left: 4px solid;
    border-radius: 10px;
    box-shadow: var(--au-ombra-sm);
    padding: 13px 16px;
}
.alert-danger  { border-left-color: var(--au-rosso); background: var(--au-rosso-bg); color: var(--au-rosso-testo); }
.alert-success { border-left-color: var(--au-verde); background: var(--au-verde-bg); color: var(--au-verde-testo); }
.alert-warning { border-left-color: var(--au-ambra); background: var(--au-ambra-bg); color: var(--au-ambra-testo); }
.alert-info    { border-left-color: var(--au-blu);   background: var(--au-blu-chiaro); color: var(--au-blu-scuro); }

/* --- 14) SweetAlert2 ----------------------------------------------------- */
.swal2-popup {
    border-radius: var(--au-r-lg) !important;
    box-shadow: var(--au-ombra-alta) !important;
    font-family: 'Nunito Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
}
.swal2-title { color: var(--au-blu-scuro) !important; font-weight: 800 !important; font-size: 1.35rem !important; }
.swal2-html-container { color: var(--au-testo-tenue) !important; }
.swal2-styled { border-radius: 9px !important; font-weight: 600 !important; box-shadow: none !important; transition: transform .12s ease, box-shadow var(--au-t) !important; }
.swal2-styled:hover { transform: translateY(-1px); }
.swal2-styled.swal2-confirm { background: linear-gradient(180deg, var(--au-blu) 0%, var(--au-blu-scuro) 100%) !important; }
.swal2-styled.swal2-cancel { background: #fff !important; color: var(--au-blu-scuro) !important; border: 1px solid #cfd9e5 !important; }
.swal2-styled.swal2-deny { background: var(--au-rosso) !important; }
.swal2-icon.swal2-success { border-color: var(--au-verde) !important; color: var(--au-verde) !important; }
.swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--au-verde) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(22, 121, 79, .3) !important; }
.swal2-icon.swal2-error { border-color: var(--au-rosso) !important; color: var(--au-rosso) !important; }
.swal2-icon.swal2-warning { border-color: var(--au-ambra) !important; color: var(--au-ambra) !important; }
.swal2-input, .swal2-textarea { border-radius: 9px !important; border: 1px solid #d7dfe9 !important; box-shadow: none !important; }
.swal2-input:focus, .swal2-textarea:focus { border-color: var(--au-blu) !important; box-shadow: 0 0 0 3px rgba(44, 95, 138, .15) !important; }

/* --- 15) FOOTER ---------------------------------------------------------- */
footer {
    background-color: var(--au-surface) !important;
    border-top: 1px solid var(--au-bordo);
    color: var(--au-testo-tenue);
    font-size: 11.5px;
    padding: 6px 12px !important;
    line-height: 1.4;
}
footer .container { max-width: none; }
footer br { display: none; }
footer #credits-btn { background: none; border: none; padding: 0; color: var(--au-testo-tenue); font-size: 11.5px; }
footer a { color: var(--au-blu); }
footer .iubenda-embed { font-size: 10.5px !important; padding: 1px 6px !important; margin-left: 6px; vertical-align: middle; }

/* --- 16) RESPONSIVE ------------------------------------------------------ */
@media (max-width: 991.98px) {
    .card-body { padding: 18px 16px; }
    .dataTables_wrapper .dataTables_filter { text-align: left; }
    .dataTables_wrapper .dataTables_filter input { min-width: 0; width: 100%; }
    .btn { padding: 8px 14px; }
}
@media (max-width: 575.98px) {
    .card { border-radius: var(--au-r); }
    .card-body { padding: 16px 14px; }
    .card-body > center > h4, .card-body > center h4 { font-size: 13.5px; }
    /* Le celle nascoste su mobile (d-none d-sm-table-cell) restano gestite da Bootstrap;
       qui si compattano solo le spaziature per non affollare */
    .table > tbody > tr > td, .table > thead > tr > th { padding: 10px 8px; }
}

/* --- Barra tricolore in cima --------------------------------------------- */
/* In origine era un'immagine esterna (difesa.it) con classi UIkit inesistenti nel
   progetto, duplicata in head_start.php e app-header.php, che usciva come due strisce
   verde/rosso sballate. Ora e' un solo <div class="tricolore"> subito dopo <body>
   (inc/_global/views/head_end.php): linea sottile a tutta larghezza, colori ufficiali
   della bandiera, nessuna dipendenza esterna. Sta fuori dall'header di proposito: un
   antenato con filter/transform la agganciarebbe a se' invece che alla finestra. */
.tricolore {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 1060;
    background: linear-gradient(90deg, #009246 0 33.333%, #ffffff 33.333% 66.666%, #ce2b37 66.666% 100%);
    pointer-events: none;
}

/* Riduzione movimento per chi lo preferisce (accessibilita') */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}

/* --- 17) CAMPI DATA E ORA -------------------------------------------------
   Su iPhone il controllo nativo di <input type="date"> si allinea al centro,
   cresce in altezza e non somiglia agli altri campi: il modulo sembra rotto.
   Qui torna della stessa forma degli altri campi, su ogni dispositivo. */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
    -webkit-appearance: none;
    appearance: none;
    text-align: left;
    min-height: calc(1.5em + 0.75rem + 2px);
    height: calc(1.5em + 0.75rem + 2px);
    line-height: 1.5;
    padding: 0.375rem 0.75rem;
    display: block;
    width: 100%;
}
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value {
    text-align: left;
    margin: 0;
    min-height: 1.5em;
}
input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0.55;
}

/* --- 18) TABELLE DATATABLES SENZA RIGHE -----------------------------------
   Con la tabella vuota DataTables lascia l'intestazione alla sua larghezza
   naturale, e si vede una striscia di intestazioni schiacciata a sinistra
   dentro una scheda larga. Le tabelle occupano sempre tutta la larghezza. */
table.dataTable,
table.js-dataTable-full,
.dataTables_wrapper table.table {
    width: 100% !important;
}
.dataTables_wrapper .dataTables_empty {
    text-align: center;
    color: var(--au-testo-tenue);
    padding: 18px 8px;
}

/* --- 20) INVITO A INSTALLARE L'APP ---------------------------------------- */
/* Striscia in basso, sopra al resto, con un pulsante grande da toccare col pollice.
   Compare solo dove ha senso (vedi assets/js/augusta_installa.js) e chi la chiude non
   la rivede per tre mesi. */
.augusta-installa {
    position: fixed;
    left: 12px; right: 12px; bottom: 12px;
    z-index: 1080;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #dde3ea;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(30, 58, 95, .18);
    max-width: 560px;
    margin: 0 auto;
}
.augusta-installa img { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 10px; }
.augusta-installa-testo { flex: 1 1 auto; min-width: 0; line-height: 1.35; }
.augusta-installa-testo b { display: block; font-size: 14px; color: #1e3a5f; }
.augusta-installa-testo span { display: block; font-size: 12px; color: #6b7a8d; }
.augusta-installa-azione {
    flex: 0 0 auto;
    background: #1e3a5f; color: #fff; border: none;
    border-radius: 8px; padding: 10px 16px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.augusta-installa-azione:active { opacity: .85; }
.augusta-installa-chiudi {
    flex: 0 0 auto;
    background: none; border: none; color: #8a94a6;
    font-size: 24px; line-height: 1; padding: 0 4px; cursor: pointer;
}
@media (max-width: 420px) {
    .augusta-installa { flex-wrap: wrap; }
    .augusta-installa-azione { width: 100%; order: 3; }
}