/* ============================================================================
   DDVR v2 — guscio applicativo: topbar fissa + sidebar laterale con toggle.
   - sidebar in due stati (rail a icone / espansa con etichette), ricordato;
   - sezioni collassabili; topbar con brand grafico + menu (DVR/tema/utente);
   - niente barre di scorrimento visibili. 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-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 collassabili ---------- */
.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 .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; }

/* ---------- Stato CHIUSO (desktop): sidebar nascosta, contenuto a tutta larghezza.
   Aperta = sempre con etichette (nessun comportamento legato all'hover). ---------- */
@media (min-width: 992px) {
    html.ddvr-sb-collapsed .ddvr-sidebar { transform: translateX(-100%); box-shadow: none; }
    html.ddvr-sb-collapsed .ddvr-content { margin-left: 0; }
}

/* ---------- Contenuto ---------- */
.ddvr-content {
    margin-left: var(--ddvr-sb-w);
    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; }

/* ---------- Mobile (off-canvas) ---------- */
@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; }
}