/* =========================
   Layout-Grundstruktur
   ========================= */
:root {
    --topbar-h: 56px;
}

.app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.topbar {
    height: var(--topbar-h);
}

/* Bereich unter der Topbar: 2 Spalten (Sidebar + Content) */
.body-row {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 250px 1fr; /* Sidebar-Breite Desktop */
    min-height: 0; /* wichtig, damit Kinder scrollen können */
}

/* =========================
   Sidebar (Desktop)
   ========================= */
.sidebar {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
    min-height: 0;
    overflow: auto;
}

    .sidebar .nav-link {
        color: #f8f9fa !important;
        border-radius: .375rem;
    }

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

        .sidebar .nav-link.active {
            background-color: rgba(255,255,255,.25);
            color: #fff !important;
            font-weight: 600;
            border-left: 4px solid #fff;
            padding-left: 12px;
        }

/* =========================
   Topbar (Farbverlauf)
   ========================= */
.topbar-gradient {
    background-image: linear-gradient(90deg, rgb(5, 39, 103) 0%, #3a0647 70%);
    color: #fff;
}

/* =========================
   Content & Footer
   ========================= */
main.content {
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column; /* Footer unten halten */
    background: #fff;
}

    main.content > .container-fluid {
        flex: 1 1 auto; /* füllt die Höhe zwischen Header/Footer */
    }

    main.content > footer {
        flex: 0 0 auto;
        background: #fff;
    }

/* =========================
   Offcanvas (Mobile-Menü)
   ========================= */
.sidebar-offcanvas,
.sidebar-offcanvas .offcanvas-header {
    background-image: linear-gradient(180deg, rgb(5,39,103) 0%, #3a0647 70%);
    color: #fff;
}

    .sidebar-offcanvas .nav-link {
        color: #f8f9fa !important;
        border-radius: .375rem;
    }

        .sidebar-offcanvas .nav-link:hover {
            background-color: rgba(255,255,255,.15);
        }

        .sidebar-offcanvas .nav-link.active {
            background-color: rgba(255,255,255,.25);
            color: #fff !important;
            font-weight: 600;
        }

/* =========================
   Responsive
   ========================= */

/* Unter md (≤768px): Desktop-Sidebar ausblenden, nur eine Spalte */
@media (max-width: 768px) {
    .body-row {
        grid-template-columns: 1fr; /* Sidebar verschwindet (d-none d-md-block in Razor) */
    }

    main.content > .container-fluid {
        padding-left: .75rem;
        padding-right: .75rem;
    }
}

/* ≤480px: Feintuning für Touch-Ziele & Abstände */
@media (max-width: 480px) {
    .sidebar-offcanvas .nav-link {
        padding: .6rem .9rem;
    }

    .topbar .navbar-brand {
        font-size: 1rem;
    }
}
