/* ── !ACER Web — Custom Styles ──────────────────────────────── */

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

/* ── Palette variabili ───────────────────────────────────────── */
:root {
    --acer-navy:    #04475F;   /* sfondo login */
    --acer-teal:    #366A60;   /* navbar */
    --acer-lime:    #94C11F;   /* bottoni primari, sidebar attiva */
    --acer-green:   #62914F;   /* hover bottoni primari */
    --acer-cyan:    #2CC6D4;   /* export excel, accenti */
    --acer-mist:    #D0DDE1;   /* sfondo pagina, righe pari tabelle */
    --acer-mist-alt:#f0f4f5;   /* righe dispari tabelle */
    --acer-nav:     #f0f4f5;   /* sfondo menu navigazione */
    --acer-sections:#ffffff;   /* sfondo principale sezioni */
}

/* ── Sfondo generale post-login ──────────────────────────────── */
body {
    background-color: var(--acer-sections);
}

/* ── Skip link (WCAG 2.4.1 Bypass Blocks) ──────────────────────
   Nascosto di default (classe Bootstrap .visually-hidden-focusable),
   diventa visibile e utilizzabile solo quando riceve il focus da
   tastiera (Tab all'apertura pagina), permettendo di saltare la
   navbar/sidebar e andare dritti al contenuto principale. */
.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2000;
    padding: .5rem 1rem;
    background-color: var(--acer-navy);
    color: #fff;
    text-decoration: none;
}
.skip-link:focus {
    color: #fff;
}

/* ── Navbar ──────────────────────────────────────────────────── */
.navbar {
    background-color: var(--acer-teal) !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.45);
}

/* ── Bottoni primari ─────────────────────────────────────────── */
.btn-primary {
    background-color: var(--acer-lime);
    border-color:     var(--acer-lime);
    color: #fff;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--acer-green);
    border-color:     var(--acer-green);
    color: #fff;
}
/* ── Bottoni azioni admin ────────────────────────────────────── */
.btn-attiva {
    background-color: var(--acer-lime);
    border-color:     var(--acer-lime);
    color: #fff;
}
.btn-attiva:hover, .btn-attiva:focus, .btn-attiva:active {
    background-color: var(--acer-green);
    border-color:     var(--acer-green);
    color: #fff;
}
.btn-password {
    background-color: var(--acer-cyan);
    border-color:     var(--acer-cyan);
    color: #fff;
}
.btn-password:hover, .btn-password:focus, .btn-password:active {
    background-color: #1fb0bc;
    border-color:     #1fb0bc;
    color: #fff;
}
.btn-ruoli {
    background-color: var(--acer-teal);
    border-color:     var(--acer-teal);
    color: #fff;
}
.btn-ruoli:hover, .btn-ruoli:focus, .btn-ruoli:active {
    background-color: #2a5249;
    border-color:     #2a5249;
    color: #fff;
}
.btn-comuni {
    background-color: var(--acer-navy);
    border-color:     var(--acer-navy);
    color: #fff;
}
.btn-comuni:hover, .btn-comuni:focus, .btn-comuni:active {
    background-color: #033547;
    border-color:     #033547;
    color: #fff;
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar {
    height: calc(100vh - 80px);
    position: sticky;
    top: 80px;
    overflow-y: auto;
    align-self: flex-start;
    display: flex !important;
    flex-direction: column;
    /*background-color: #fff;*/
    background-color: var(--acer-teal);
    background-image: url('../img/pantoli_header_esteso.jpg');
    background-size: cover;
    background-position: center top;
}

.sidebar > ul.nav {
    flex: 1;
}

/* La lista scrolla internamente in modo indipendente, così il pulsante
   "Nascondi menu" (fuori dalla <ul>, vedi .sidebar-footer) resta sempre
   ancorato in fondo e non viene spinto/scattato quando la tendina dei
   report si espande o si richiude. */
.sidebar > ul.sidebar-nav-scroll {
    min-height: 0;
    overflow-y: auto;
    /* Bootstrap's .nav imposta flex-wrap: wrap (per far andare a capo le
       tab orizzontali) e .flex-column non lo sovrascrive: senza
       flex-wrap: nowrap, quando il contenuto (es. tendina Report aperta)
       supera l'altezza disponibile, le voci non scorrono ma vengono
       spostate in una nuova "colonna" a destra. */
    flex-wrap: nowrap;
}

.sidebar > .sidebar-footer {
    flex-shrink: 0;
}

/* Scrollbar personalizzata (più sottile e coerente col tema scuro della
   sidebar) al posto di quella di sistema, mostrata solo quando serve. */
.sidebar,
.sidebar > ul.sidebar-nav-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.35) transparent;
}

.sidebar::-webkit-scrollbar,
.sidebar > ul.sidebar-nav-scroll::-webkit-scrollbar {
    width: 6px;
}

.sidebar::-webkit-scrollbar-track,
.sidebar > ul.sidebar-nav-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar::-webkit-scrollbar-thumb,
.sidebar > ul.sidebar-nav-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,.35);
    border-radius: 4px;
}

.sidebar::-webkit-scrollbar-thumb:hover,
.sidebar > ul.sidebar-nav-scroll::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255,255,255,.55);
}

.sidebar .nav-link {
    color: rgba(255,255,255,.80);
    padding: .35rem 1rem;
    border-radius: .25rem;
    font-size: .9rem;
    transition: background-color .15s, color .15s;
}

.sidebar .nav-link:hover {
    background-color: rgba(255,255,255,.10);
    color: #fff;
}

.sidebar .nav-link.active {
    background-color: var(--acer-lime);
    color: #fff;
    font-weight: 600;
}

/* Freccia della tendina "Report": punta a destra quando chiusa, ruota
   verso il basso quando la tendina è aperta (Bootstrap toglie la classe
   "collapsed" dal link non appena il collapse viene mostrato). */
.sidebar .nav-link[data-bs-toggle="collapse"] .bi-chevron-right {
    transition: transform .2s ease;
}

.sidebar .nav-link[data-bs-toggle="collapse"]:not(.collapsed) .bi-chevron-right {
    transform: rotate(90deg);
}

.sidebar-category {
    display: block;
    padding: .25rem 1rem;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    /* .45 alpha su sfondo --acer-teal dava ~4.3:1, sotto la soglia
       WCAG AA 4.5:1 per il testo normale. .75 porta il rapporto
       sopra 7:1. */
    color: rgba(255,255,255,.75);
}

/* Main content area */
.main-content {
    min-height: calc(100vh - 56px);
}

/* Report tables */
.table-report thead th {
    background-color: var(--acer-teal);
    color: #fff;
    white-space: nowrap;
    /*font-size: .82rem;*/
    font-size: 0.6688rem;
    font-weight: 600;
    border-color: #2d5a51;
    vertical-align: middle;
}

/* Vista "Apri in un'altra scheda": nessuno scroll orizzontale, le colonne
   si adattano alla larghezza dello schermo andando a capo se necessario. */
.table-view-tab {
    table-layout: auto;
    width: 100%;
}

/* search/redditi_dettaglio.php: le colonne devono adattarsi alla larghezza
   disponibile SENZA scroll orizzontale, andando a capo tra le parole ma
   MAI spezzando una parola a meta' (a differenza di .table-view-tab, che
   usa word-break:break-word). Scoped a questa classe, non tocca
   .table-report/.table-view-tab usate dagli altri ~19 report. */
.report-fit-nowrap .table-responsive {
    overflow-x: visible;
}
.report-fit-nowrap table {
    table-layout: auto;
    width: 100%;
}
.report-fit-nowrap thead th,
.report-fit-nowrap tbody td {
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

.table-view-tab thead th {
    background-color: #E0E0E0;
    color: #000;
    white-space: normal;
    overflow-wrap: break-word;
    vertical-align: middle;
    font-size: 8pt;
    font-weight: 600;
    border-color: #2d5a51;
}

.table-view-tab tbody td {
    white-space: normal;
    overflow-wrap: break-word;
    font-size: 8pt;
    border-bottom: 1px solid #ccc;
}

.table-report tbody tr:nth-child(odd) > td {
    background-color: #f0f4f5;
}

.table-report tbody tr:nth-child(even) > td {
    background-color: #E0E0E0;
}

/* Riga segnalata (es. bollette con importo residuo > 0, classe Bootstrap
   ".table-danger" applicata alla <tr>): stesso problema di specificita' gia'
   documentato per ".table-grouped .grp-odd/even" sopra - la zebra
   ".table-report tbody tr:nth-child(odd/even) > td" ha la STESSA specificita'
   (0,2,3) e, essendo dichiarata prima nel foglio, verrebbe comunque
   sovrascritta a intermittenza in base all'ordine di parity riga. !important
   necessario per farla vincere sempre, indipendentemente da riga pari/dispari. */
.table-report tbody tr.table-danger > td {
    background-color: #f8d7da !important;
}

@media screen {
    /* '>' (figlio diretto) invece del discendente generico: altrimenti la
       regola colora anche le <td> di tabelle annidate molto piu' in profondita'
       nel DOM (es. la tabella del modal "dettagli fabbricato", che vive dentro
       la <td> dell'icona di quella riga) quando si passa il cursore sulla riga
       del report principale. */
    .table-report tbody tr:hover > td {
        background-color: #c4d8de !important;
    }
}

.table-report tbody tr.report-group-total td {
    background-color: #BADCE2;
    font-size: .85rem;
}

/* Report "Cambi Alloggio": righe raggruppate per codice utente (rowspan).
   L'alternanza colore va per gruppo (codice utente) e non per singola
   riga fisica, e la linea di separazione va mostrata solo tra un gruppo
   e il successivo, non tra le sotto-righe di uno stesso gruppo.
   !important necessario perché ".table-report tbody tr:nth-child(odd/even) td"
   (specificità 0,2,2 su riga fisica) altrimenti vince a intermittenza su
   ".table-grouped tbody tr.grp-odd/even td" (stessa specificità 0,2,3 ma
   basata sul gruppo, non sulla posizione fisica della riga). */
.table-grouped tbody tr.grp-odd td {
    background-color: #f0f4f5 !important;
}

.table-grouped tbody tr.grp-even td {
    background-color: #E0E0E0 !important;
}

@media screen {
    .table-grouped tbody tr:hover td {
        background-color: #c4d8de !important;
    }
}

.table-grouped tbody tr td {
    border-top: none;
    border-bottom: none;
}

.table-grouped.table-view-tab tbody td {
    border-bottom: none;
}

.table-grouped tbody tr.group-start td {
    border-top: 1px solid #adb5bd !important;
}

/* Stampa fisica (Ctrl+P): evita che una riga di tabella venga tagliata
   a metà tra una pagina e l'altra della stampante. */
@media print {
    .table-report tbody tr,
    .table-report tbody tr.report-group-total {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* Bootstrap's .table-hover applica l'evidenziazione della riga tramite
       un box-shadow inset legato a variabili CSS (--bs-table-bg-state),
       indipendente dalla nostra regola custom sopra: va annullato a parte.
       NON tocchiamo background-color/color: deve restare visibile il colore
       "di dietro" (la riga zebrata pari/dispari già impostata su td). */
    .table-hover > tbody > tr:hover > * {
        box-shadow: none !important;
    }

    /* Nasconde il pulsante "Stampa" (apre Ctrl+P) nella stampa fisica/PDF:
       serve solo come scorciatoia a schermo nella vista "apri in un'altra
       scheda" dei report. */
    .no-print {
        display: none !important;
    }
}

.table-report td {
    font-size: 0.6688rem;
    vertical-align: middle;
}

/* Filter bar */
.filter-bar {
    background: #fff;
    border: 1px solid #c8d8dc;
    border-radius: .375rem;
    padding: 1rem;
    margin-bottom: 1.25rem;
}

/* Excel export button */
.btn-export {
    background-color: var(--acer-cyan);
    border-color: var(--acer-cyan);
    color: #fff;
}

.btn-export:hover {
    background-color: #1fb0bc;
    border-color: #1fb0bc;
    color: #fff;
}

/* Login page */
body.login-page {
    background-color: var(--acer-navy) !important;
}

.login-card {
    width: 560px;
    max-width: 96vw;
}

/* Password toggle button */
.input-group .btn-pwd-toggle {
    border: 1px solid #dee2e6;
    border-left: none;
    background: #fff;
    color: #6c757d;
    transition: color .15s;
}
.input-group .btn-pwd-toggle:hover {
    color: var(--acer-teal);
}

/* Footer */
footer {
    background-color: var(--acer-lime);
    color: #fff;
    padding-top: 1.5rem;
}

/* ── Sidebar slim (icone soltanto) ──────────────────────────── */
#sidebar.sidebar-slim {
    flex: 0 0 72px !important;
    width: 72px !important;
    min-width: 72px !important;
}

#sidebar.sidebar-slim ~ .main-content {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    margin-left: 0 !important;
}

#sidebar.sidebar-slim .nav-link-text,
#sidebar.sidebar-slim .sidebar-category,
#sidebar.sidebar-slim .collapse {
    display: none !important;
}

#sidebar.sidebar-slim .nav-link {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: .5rem 0;
    font-size: 1.1rem;
}

#sidebar.sidebar-slim .nav-link i {
    font-size: 1.1rem;
    width: 1.4em;
    height: 1.4em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Tabella compatta con scroll orizzontale ─────────────── */
.table-report-compact .table-responsive {
    overflow-x: auto;
}
.table-report-compact .table-report {
    width: 100%;
    font-size: .72rem;
}
.table-report-compact .table-report thead th {
    white-space: nowrap;
    font-size: .72rem;
}
.table-report-compact .table-report td {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* ── Modal "dettagli" (icona su tabelle report) ─────────────── */
.modal-report-dialog {
    max-width: min(1100px, 95vw);
}
/* Classe fissa su .modal-content (non toccata dal toggle schermo intero,
   a differenza di .modal-report-dialog/.modal-fullscreen su .modal-dialog):
   serve per applicare le stesse regole di altezza/font in entrambe le
   modalita'. */
.modal-report-content {
    min-height: 650px;
    max-height: 90vh;
}
.modal-dialog.modal-fullscreen .modal-report-content {
    max-height: 100vh;
}
.modal-report-content .modal-body {
    overflow-y: auto;
}
/* Testo della schedina "INFORMAZIONI FABBRICATO": scala con l'altezza della
   finestra (piu' grande a schermo intero) invece di restare fisso al
   font-size minuscolo di .table-report, che a schermo intero lasciava
   tanto spazio bianco. Il clamp() evita che diventi troppo grande e che il
   contenuto debba scorrere: resta contenuto in un'unica schermata nella
   stragrande maggioranza dei casi. */
.modal-report-content .table-report td,
.modal-report-content .table-report th {
    font-size: clamp(0.7rem, 1.3vh, 1rem);
    padding: 4px 8px;
}

/* Tabella etichetta/valore della 1a tabella dentro le modali "dettagli"
   (icone dei report, es. "Informazioni alloggio"): stesso stile "a capo
   automatico" + riga separatrice di .table-view-tab, usato dalle tabelle
   sottostanti (storico, richieste, ecc.), ma su una classe dedicata per
   non toccare .table-view-tab altrove nell'app (usata anche dalle viste
   "Apri in un'altra scheda" dei report). Qui non esiste una vera
   intestazione di colonna (solo coppie etichetta/valore ripetute), quindi
   non serve una regola equivalente a ".table-view-tab thead th".
*/
.table-modal-fields td {
    white-space: normal;
    overflow-wrap: break-word;
    border-bottom: 1px solid #ccc;
}

.log-table {
    width: 100%;
}

.log-table th,
.log-table td {
    width: 1%;
    white-space: nowrap;
    padding-right: 20px;
}

.log-table th:last-child,
.log-table td:last-child {
    width: auto;
}