/* ============================================================================
   DDVR v2 — guscio applicativo: topbar fissa + sidebar laterale.
   - DESKTOP: la sidebar è un RAIL a sole icone; ogni gruppo apre un FLYOUT a
     fianco (hover/focus) con le sue voci e il titolo del gruppo, così tutti i
     moduli entrano in verticale senza scrollbar. Il toggle nasconde il rail.
   - MOBILE: drawer off-canvas con etichette e sezioni collassabili (accordion).
   Accento = --bs-primary del tema.
   ============================================================================ */
:root {
    --ddvr-topbar-h: 56px;
    --ddvr-sb-w: 256px;
    --ddvr-sb-w-rail: 64px;
    --ddvr-sb-bg: #1f2a37;
    --ddvr-topbar-bg: #17212c;
    --ddvr-sb-fg: #c3cdd9;
    --ddvr-sb-muted: #8493a3;
    --ddvr-sb-hover: rgba(255, 255, 255, .08);
    --ddvr-accent: var(--bs-primary, #0d6efd);
}

/* ---------- Topbar ---------- */
.ddvr-topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--ddvr-topbar-h);
    background: var(--ddvr-topbar-bg);
    color: #fff;
    z-index: 1045;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: 0 .6rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.ddvr-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    background: transparent; border: 0; border-radius: .5rem;
    color: #e7edf3; font-size: 1.35rem; cursor: pointer;
}
.ddvr-toggle:hover { background: rgba(255, 255, 255, .1); color: #fff; }

.ddvr-brand {
    display: flex; align-items: center; gap: .6rem;
    color: #fff; text-decoration: none; font-weight: 700; white-space: nowrap;
}
.ddvr-brand .logo {
    display: grid; place-items: center;
    width: 34px; height: 34px; border-radius: 9px;
    background: linear-gradient(135deg, var(--ddvr-accent), rgba(255, 255, 255, .25));
    color: #fff; font-size: 1.1rem;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.ddvr-brand-text { font-size: 1.12rem; letter-spacing: .01em; }
.ddvr-brand-accent { color: var(--ddvr-accent); filter: brightness(1.6); }

.ddvr-topbar-spacer { flex: 1 1 auto; }
.ddvr-topbar-actions { display: flex; align-items: center; gap: .15rem; }

.ddvr-tb-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    background: transparent; border: 0; border-radius: .5rem;
    color: #d4dde6; padding: .35rem .6rem; font-size: .9rem; line-height: 1.2;
}
.ddvr-tb-btn:hover, .ddvr-tb-btn:focus { background: rgba(255, 255, 255, .1); color: #fff; }
.ddvr-tb-btn .bi { font-size: 1.05rem; }
.ddvr-tb-btn.dropdown-toggle::after { margin-left: .15rem; }
.ddvr-tb-label { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Sidebar ---------- */
.ddvr-sidebar {
    position: fixed;
    top: var(--ddvr-topbar-h); left: 0; bottom: 0;
    width: var(--ddvr-sb-w);
    background: var(--ddvr-sb-bg);
    color: var(--ddvr-sb-fg);
    z-index: 1040;
    display: flex; flex-direction: column;
    transition: transform .2s ease;
}
.ddvr-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: .5rem 0 1rem;
    scrollbar-width: none;          /* Firefox: niente scrollbar */
    -ms-overflow-style: none;       /* IE/Edge legacy */
}
.ddvr-nav::-webkit-scrollbar { width: 0; height: 0; } /* WebKit: niente scrollbar */

.ddvr-link {
    display: flex; align-items: center; gap: .85rem;
    padding: .55rem .9rem;
    color: var(--ddvr-sb-fg); text-decoration: none; white-space: nowrap;
    border-left: 3px solid transparent;
}
.ddvr-link i { font-size: 1.15rem; min-width: 1.5rem; text-align: center; flex-shrink: 0; }
.ddvr-link:hover { background: var(--ddvr-sb-hover); color: #fff; }
.ddvr-link.active {
    color: #fff; background: var(--ddvr-sb-hover);
    border-left-color: var(--ddvr-accent);
}

/* Sotto-voci (es. Sedi/Edifici/Piani sotto Ambienti): rientro + tono attenuato */
.ddvr-sublink { padding-left: 2.1rem; }
.ddvr-sublink i { font-size: 1rem; color: var(--ddvr-sb-muted); }
.ddvr-sublink.active i, .ddvr-sublink:hover i { color: inherit; }

/* Sotto-titolo di sezione dentro un gruppo (es. "Registri" / "Monitoraggio" in
   "Registri e monitoraggio", "DVR" / "Report" in "Documenti…"): intestazione NON
   cliccabile che raggruppa voci correlate quando più gruppi vengono accorpati. */
.ddvr-subhead {
    padding: .55rem .9rem .15rem;
    color: var(--ddvr-sb-muted);
    font-size: .63rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
.ddvr-subhead ~ .ddvr-subhead { border-top: 1px solid rgba(255, 255, 255, .07); margin-top: .25rem; }

/* ---------- Sotto-gruppi collassabili (voce di 2° livello + chevron dedicato) ---------- */
.ddvr-link-row { display: flex; align-items: stretch; }
.ddvr-link-row .ddvr-link { flex: 1 1 auto; }
.ddvr-subtoggle {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.2rem;
    background: transparent; border: 0;
    color: var(--ddvr-sb-muted); cursor: pointer;
}
.ddvr-subtoggle:hover { background: var(--ddvr-sb-hover); color: #fff; }
.ddvr-subtoggle .chevron { font-size: .8rem; transition: transform .15s ease; }
.ddvr-subgroup.is-collapsed .ddvr-subtoggle .chevron { transform: rotate(-90deg); }
.ddvr-subgroup.is-collapsed .ddvr-subgroup-items { display: none; }

/* ---------- Sezioni ---------- */
.ddvr-group { padding-top: .15rem; }
.ddvr-section {
    display: flex; align-items: center; width: 100%;
    background: transparent; border: 0;
    padding: .7rem .9rem .3rem;
    color: var(--ddvr-sb-muted);
    font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
    white-space: nowrap; cursor: pointer;
}
.ddvr-section .section-ico { font-size: 1.15rem; min-width: 1.5rem; text-align: center; margin-right: .6rem; }
.ddvr-section .chevron { margin-left: auto; font-size: .8rem; transition: transform .15s ease; }
.ddvr-group.is-collapsed .ddvr-section .chevron { transform: rotate(-90deg); }
.ddvr-group.is-collapsed .ddvr-group-items { display: none; }
.ddvr-section:hover { color: #cdd6df; }

/* ---------- Contenuto ---------- */
.ddvr-content {
    margin-left: var(--ddvr-sb-w-rail);
    margin-top: var(--ddvr-topbar-h);
    padding-top: 1.25rem;            /* respiro sotto la topbar fissa */
    min-height: calc(100vh - var(--ddvr-topbar-h));
    transition: margin-left .18s ease;
}
.ddvr-content--full { margin-left: 0; margin-top: 0; padding-top: 0; }

/* ---------- Overlay mobile ---------- */
.ddvr-overlay { display: none; }

/* ============================================================================
   DESKTOP (≥992px): rail a icone + flyout laterale per gruppo.
   ============================================================================ */
@media (min-width: 992px) {
    .ddvr-sidebar { width: var(--ddvr-sb-w-rail); overflow: visible; }
    .ddvr-nav { overflow: visible; }   /* niente clip: i flyout escono dal rail */

    /* Rail: solo icone; etichette e chevron nascosti */
    .ddvr-nav > .ddvr-link { justify-content: center; padding: .5rem 0; gap: 0; }
    .ddvr-nav > .ddvr-link .label { display: none; }
    .ddvr-nav > .ddvr-link i { min-width: auto; }

    .ddvr-section { justify-content: center; padding: .5rem 0; }
    .ddvr-section .label,
    .ddvr-section .chevron { display: none; }
    .ddvr-section .section-ico { margin-right: 0; }
    .ddvr-section:hover { background: var(--ddvr-sb-hover); color: #fff; }

    /* Gruppo della pagina corrente evidenziato nel rail */
    .ddvr-group:has(.ddvr-link.active) .ddvr-section { color: #fff; }
    .ddvr-group:has(.ddvr-link.active) .ddvr-section .section-ico {
        color: var(--ddvr-accent); filter: brightness(1.5);
    }

    /* Il gruppo è l'ancora del flyout */
    .ddvr-group { position: relative; }

    /* Le voci diventano un pannello a comparsa a fianco del rail
       (anche se il gruppo era "is-collapsed" da localStorage: sul rail non vale) */
    .ddvr-group > .ddvr-group-items,
    .ddvr-group.is-collapsed > .ddvr-group-items {
        display: block;
        position: absolute; left: 100%; top: 0;
        min-width: 240px;
        max-height: calc(100vh - var(--ddvr-topbar-h) - 1rem);
        overflow-y: auto;
        background: var(--ddvr-sb-bg);
        border-radius: 0 .6rem .6rem 0;
        box-shadow: .4rem .3rem 1.5rem rgba(0, 0, 0, .4);
        padding: 0 0 .4rem;
        visibility: hidden; opacity: 0; transform: translateX(-6px);
        transition: opacity .12s ease, transform .12s ease;
        pointer-events: none;
        z-index: 1044;
    }
    .ddvr-group:hover > .ddvr-group-items,
    .ddvr-group:focus-within > .ddvr-group-items {
        visibility: visible; opacity: 1; transform: none; pointer-events: auto;
    }

    /* Titolo del pannello, ricavato dal data-group (nessun markup extra) */
    .ddvr-group-items::before {
        display: block;
        padding: .55rem .9rem .45rem;
        color: var(--ddvr-sb-muted);
        font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
        border-bottom: 1px solid rgba(255, 255, 255, .07);
        margin-bottom: .3rem;
    }
    .ddvr-group[data-group="anagrafiche"]           > .ddvr-group-items::before { content: "Anagrafiche"; }
    .ddvr-group[data-group="processi"]              > .ddvr-group-items::before { content: "Processi lavorativi"; }
    .ddvr-group[data-group="valutazione"]           > .ddvr-group-items::before { content: "Valutazione"; }
    .ddvr-group[data-group="registri_monitoraggio"] > .ddvr-group-items::before { content: "Registri e monitoraggio"; }
    .ddvr-group[data-group="emergenza"]             > .ddvr-group-items::before { content: "Emergenza"; }
    .ddvr-group[data-group="dvr"]                   > .ddvr-group-items::before { content: "DVR"; }
    .ddvr-group[data-group="documenti"]             > .ddvr-group-items::before { content: "Documenti e report"; }
    .ddvr-group[data-group="amministrazione"]       > .ddvr-group-items::before { content: "Amministrazione"; }

    /* Dentro il flyout: etichette sempre visibili, voci a sinistra, niente
       collapse dei sotto-gruppi (c'è spazio: si mostra tutto) */
    .ddvr-group-items .label { display: inline; }
    .ddvr-group-items .ddvr-link { justify-content: flex-start; padding: .45rem .9rem; gap: .7rem; }
    .ddvr-group-items .ddvr-link i { min-width: 1.4rem; }
    .ddvr-subtoggle { display: none; }
    .ddvr-subgroup.is-collapsed .ddvr-subgroup-items,
    .ddvr-subgroup-items { display: block; }

    /* Toggle: nasconde del tutto il rail, contenuto a piena larghezza */
    html.ddvr-sb-collapsed .ddvr-sidebar { transform: translateX(-100%); box-shadow: none; }
    html.ddvr-sb-collapsed .ddvr-content { margin-left: 0; }
}

/* ============================================================================
   MOBILE (off-canvas): drawer con etichette + accordion (comportamento storico).
   ============================================================================ */
@media (max-width: 991.98px) {
    .ddvr-sidebar {
        width: var(--ddvr-sb-w);
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: .25rem 0 1.5rem rgba(0, 0, 0, .3);
    }
    .ddvr-sidebar .label { display: inline; }          /* nel drawer le etichette ci sono sempre */
    body.ddvr-sb-open .ddvr-sidebar { transform: translateX(0); }
    body.ddvr-sb-open .ddvr-overlay {
        display: block; position: fixed; inset: var(--ddvr-topbar-h) 0 0 0;
        background: rgba(0, 0, 0, .45); z-index: 1039;
    }
    .ddvr-content { margin-left: 0; }
    .ddvr-brand-text { font-size: 1.05rem; }
}