/* =========================================================
   StagePilot Responsive Sidebar (Expanded / Rail / Overlay)
   ========================================================= */

:root {
    --sp-sidebar-width: 260px;
    --sp-rail-width: 64px;
}

/* Shell Layout */
.sp-shell {
    display: grid;
    grid-template-columns: var(--sp-sidebar-width) 1fr;
    min-height: 100vh;
    width: 100%;
    max-width: 100%;
}

/* Sidebar */
.sp-sidebar {
    background: var(--sp-sidebar-bg);
    overflow: hidden;
}

/* Main */
.sp-main {
    min-width: 0; /* wichtig für horizontale Scrollbereiche im Content */
    width: 100%;
}

/* Nav link style tweaks (Bootstrap nav-link als Basis) */
.sp-sidebar .nav-link {
    border-radius: .5rem;
    margin: .12rem .25rem;
    color: rgba(15, 27, 45, .95);
}

    .sp-sidebar .nav-link:hover {
        background: rgba(var(--bs-primary-rgb), .10);
    }

    .sp-sidebar .nav-link.active {
        background: rgba(var(--bs-primary-rgb), .16);
        font-weight: 600;
    }

/* Icons/Label */
.sp-nav-ico {
    width: 22px;
    display: inline-flex;
    justify-content: center;
}

.sp-nav-label {
    white-space: nowrap;
}

/* ---------------------------
   Collapsed Rail (Icons only)
   --------------------------- */
body.sp-sidebar-collapsed .sp-shell {
    grid-template-columns: var(--sp-rail-width) 1fr;
}

body.sp-sidebar-collapsed .sp-sidebar .sp-sidebar-header .text-muted,
body.sp-sidebar-collapsed .sp-sidebar .sp-sidebar-header .fs-5 {
    display: none;
}

body.sp-sidebar-collapsed .sp-sidebar .sp-sidebar-header {
    padding: .75rem !important;
}

body.sp-sidebar-collapsed .sp-sidebar .sp-sidebar-nav .text-uppercase,
body.sp-sidebar-collapsed .sp-sidebar .sp-sidebar-nav hr,
body.sp-sidebar-collapsed .sp-sidebar .sp-nav-label {
    display: none;
}

body.sp-sidebar-collapsed .sp-sidebar .nav-link {
    justify-content: center;
    gap: 0 !important;
    padding: .65rem 0.25rem !important;
}

body.sp-sidebar-collapsed .sp-sidebar .sp-nav-ico {
    width: 100%;
}

/* ---------------------------
   Overlay Mode (Unpinned)
   FIX: Shell darf NICHT "0 1fr" werden -> sonst kann Main schrumpfen.
   Wir machen die Shell EINSPALTIG und Sidebar läuft als fixed Drawer.
   --------------------------- */
body.sp-sidebar-overlay .sp-shell {
    grid-template-columns: 1fr;
}

body.sp-sidebar-overlay .sp-main {
    grid-column: 1 / -1;
}

/* Sidebar als Drawer */
body.sp-sidebar-overlay .sp-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sp-sidebar-width);
    height: 100vh;
    z-index: 1045;
    transform: translateX(-105%);
    transition: transform .18s ease-out;
    box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.15);
}

/* Overlay sichtbar */
body.sp-sidebar-overlay.sp-sidebar-open .sp-sidebar {
    transform: translateX(0);
}

/* Backdrop */
.sp-sidebar-backdrop {
    display: none;
}

body.sp-sidebar-overlay.sp-sidebar-open .sp-sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(0,0,0,.25);
}