/*
 * Palette GAV Backoffice — definita una sola volta qui, non derogata
 * altrove senza motivo esplicito (standard di progetto §3).
 *
 * Contrasti verificati (WCAG 2.1, formula relative luminance) per testo
 * bianco sopra ciascun colore pieno — tutti superano la soglia AA per testo
 * normale (>= 4.5:1), la maggior parte anche AAA (>= 7:1):
 *   --gav-primary       #0B5394  -> 7.84:1
 *   --gav-primary-dark  #073763  -> 12.10:1
 *   --gav-success       #1E7A34  -> 5.40:1
 *   --gav-warning       #8A5A00  -> 5.93:1  (ambra scura: l'ambra chiara classica
 *                                            non supera 4.5:1 con testo bianco)
 *   --gav-danger        #B3261E  -> 6.54:1
 *   --gav-info          #205493  -> 7.63:1
 *   --gav-neutral-700   #3D4451  -> 9.79:1
 * Testo principale (#1B1F26) su sfondo bianco o superficie: > 15:1.
 *
 * Menu laterale (sidebar) su sfondo --gav-primary-dark: testo bianco 82% e
 * 65% opacità restano rispettivamente ~9.9:1 e ~7.9:1 — sopra la soglia AA
 * anche a piena opacità ridotta. Corretto qui il problema di un testo scuro
 * (colore di default di Bootstrap per .nav-link, pensato per sfondi chiari)
 * illeggibile sopra lo sfondo blu scuro della vecchia navbar in alto.
 */
:root {
    --gav-primary: #0B5394;
    --gav-primary-dark: #073763;
    --gav-primary-light: #EAF1FA;
    --gav-success: #1E7A34;
    --gav-warning: #8A5A00;
    --gav-danger: #B3261E;
    --gav-info: #205493;
    --gav-text: #1B1F26;
    --gav-text-muted: #5B6472;
    --gav-surface: #F4F6F9;
    --gav-border: #D8DEE6;

    --gav-sidebar-width: 250px;
    --gav-topbar-height: 56px;
    --gav-sidebar-bg: var(--gav-primary-dark);
    --gav-sidebar-hover: #0E4A80;
    --gav-sidebar-accent: #6BB6F5;

    /* Riallinea le variabili Bootstrap 5.3 alla palette GAV dove supportato
       via custom property (bottoni, link, badge, alert). Un ri-tema completo
       (build SCSS) resta un miglioramento futuro, non necessario per l'ossatura. */
    --bs-primary: var(--gav-primary);
    --bs-primary-rgb: 11, 83, 148;
    --bs-link-color: var(--gav-primary);
    --bs-link-hover-color: var(--gav-primary-dark);
    --bs-body-color: var(--gav-text);
    --bs-body-bg: var(--gav-surface);
}

body {
    background-color: var(--gav-surface);
    color: var(--gav-text);
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
#mgSidebar {
    width: var(--gav-sidebar-width);
    height: 100vh;
    background-color: var(--gav-sidebar-bg);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease;
}

#mgSidebar > .gav-sidebar-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}

#mgSidebar .gav-sidebar-brand {
    padding: 1.1rem 1.25rem;
    color: #FFFFFF;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* Intestazione di gruppo (accordion): oro (#D4AF37) su sfondo sidebar
   (#073763) -> ~5.75:1, sopra la soglia AA (4.5:1) per testo normale. Testo
   più grande e in grassetto rispetto al bianco tenue precedente (~7.9:1 ma
   poco distinguibile dai link sottostanti): richiesto esplicitamente
   dall'utente, i titoli di gruppo dovevano risaltare di più.
   È un <button> (non più un <div>): reset degli stili di default del
   bottone, per restare visivamente identico a prima ma diventare cliccabile
   ed apri/chiudi il gruppo sottostante (componente "collapse" di Bootstrap). */
#mgSidebar .nav-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 1.25rem 0.3rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #D4AF37;
    background: transparent;
    border: 0;
    cursor: pointer;
}

#mgSidebar .nav-section-toggle:focus-visible {
    outline: 2px solid var(--gav-sidebar-accent);
    outline-offset: -2px;
}

/* Chevron che ruota in base allo stato aperto/chiuso. Bootstrap aggiunge/
   rimuove da sé la classe "collapsed" sul trigger quando il pannello
   collegato si chiude/apre (comportamento nativo di data-bs-toggle="collapse",
   nessun JS custom necessario per questa parte). */
#mgSidebar .nav-section-chevron {
    font-size: 0.65rem;
    transition: transform 0.2s ease;
}

#mgSidebar .nav-section-toggle.collapsed .nav-section-chevron {
    transform: rotate(-90deg);
}

/* Link di menu: bianco all'82% -> ~9.9:1 su sfondo sidebar, sopra AAA.
   Sostituisce il colore scuro di default di Bootstrap per .nav-link, pensato
   per sfondi chiari e per questo illeggibile su questo sfondo blu scuro. */
#mgSidebar .nav-link {
    color: rgba(255, 255, 255, 0.82);
    padding: 0.5rem 1.25rem;
    border-radius: 0;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

#mgSidebar .nav-link:hover,
#mgSidebar .nav-link.active {
    background-color: var(--gav-sidebar-hover);
    color: #FFFFFF;
    box-shadow: inset 3px 0 0 var(--gav-sidebar-accent);
}

#mgSidebar .nav-link:focus-visible {
    outline: 2px solid var(--gav-sidebar-accent);
    outline-offset: -2px;
}

#mgSidebar .nav-link i {
    font-size: 1rem;
    width: 1.1rem;
    text-align: center;
}

#mgSidebar .gav-sidebar-footer {
    padding: 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

#mgSidebar .gav-sidebar-footer .btn-outline-light {
    border-color: rgba(255, 255, 255, 0.4);
    color: rgba(255, 255, 255, 0.9);
}

/* Overlay per chiudere la sidebar su mobile */
#mgSidebarOverlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1039;
}

#mgSidebarOverlay.visible {
    display: block;
}

/* ── Topbar ──────────────────────────────────────────────────────────────── */
#mgTopbar {
    height: var(--gav-topbar-height);
    background-color: #FFFFFF;
    border-bottom: 1px solid var(--gav-border);
    position: fixed;
    top: 0;
    left: var(--gav-sidebar-width);
    right: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    padding: 0 1.25rem;
    gap: 1rem;
    transition: left 0.25s ease;
}

#mgTopbar .gav-page-title {
    font-weight: 600;
    color: var(--gav-text);
    flex: 1;
}

#mgTopbar .gav-user-info {
    font-size: 0.9rem;
    color: var(--gav-text-muted);
}

#mgTopbar .gav-user-info strong {
    color: var(--gav-text);
}

#mgSidebarToggle {
    background: transparent;
    border: none;
    padding: 0.3rem 0.5rem;
    line-height: 1;
    color: var(--gav-text);
    display: none;
}

/* ── Area di contenuto ───────────────────────────────────────────────────── */
#mgMain {
    margin-left: var(--gav-sidebar-width);
    padding-top: calc(var(--gav-topbar-height) + 1.5rem);
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-bottom: 3rem;
    min-height: 100vh;
    transition: margin-left 0.25s ease;
}

/* Pagina di login (utente non autenticato): nessuna sidebar/topbar, solo la
   card centrata — vedi .gav-login-wrapper più sotto. */
.gav-guest-main {
    padding-top: 1.5rem;
    padding-bottom: 3rem;
}

/* ── Responsive: sotto i 768px la sidebar si nasconde dietro un hamburger ── */
@media (max-width: 767.98px) {
    #mgSidebar {
        transform: translateX(-100%);
    }

    #mgSidebar.gav-sidebar-open {
        transform: translateX(0);
    }

    #mgTopbar {
        left: 0;
    }

    #mgMain {
        margin-left: 0;
    }

    #mgSidebarToggle {
        display: inline-block;
    }
}

/* Card standard per contenitori di lista/form nelle aree funzionali */
.gav-card {
    background-color: #FFFFFF;
    border: 1px solid var(--gav-border);
    border-radius: 0.5rem;
    padding: 1.25rem;
}

/* Dashboard: card KPI compatta (icona + valore + etichetta). Il colore del
   valore resta quello del testo normale, tranne quando lo stato è da
   segnalare (classe .text-danger applicata dalla pagina in base al dato) —
   coerente con "il colore segue il significato", non la decorazione. */
.gav-stat-tile {
    background-color: #FFFFFF;
    border: 1px solid var(--gav-border);
    border-radius: 0.5rem;
    padding: 1rem;
    height: 100%;
}

.gav-stat-tile > .bi {
    font-size: 1.1rem;
    color: var(--gav-primary);
}

.gav-stat-value {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.2;
    margin-top: 0.35rem;
}

.gav-stat-label {
    font-size: 0.8rem;
    color: var(--gav-text-muted);
}

/* Contenitore ad altezza fissa per i grafici Chart.js: garantisce che due
   grafici affiancati abbiano sempre la stessa altezza (Chart.js con
   maintainAspectRatio:false riempie esattamente questo contenitore, non
   dipende più dal testo che lo precede nella card). */
.gav-chart-wrap {
    position: relative;
    height: 260px;
}

/* Pagina di login: card centrata */
.gav-login-wrapper {
    display: flex;
    justify-content: center;
    padding-top: 4rem;
}

.gav-login-card {
    background-color: #FFFFFF;
    border: 1px solid var(--gav-border);
    border-radius: 0.5rem;
    padding: 2rem;
    width: 100%;
    max-width: 360px;
}

/* Accessibilità: indicatore di focus sempre visibile (WCAG 2.4.7),
   non affidato al solo comportamento di default del browser. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.btn:focus-visible {
    outline: 3px solid var(--gav-info);
    outline-offset: 2px;
}