html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Gesamt-Layout */
.app-layout {
    display: flex;
    height: 100vh;      /* komplette Browserhöhe */
    overflow: hidden;   /* kein Scrollen auf body, nur Main */
}

a.badge { cursor: pointer; }
a.badge:hover { filter: brightness(0.95); }



/* Sidebar links */
.app-sidebar {
    width: 260px;             /* Sidebar-Breite */
    flex-shrink: 0;
    background: #f8f9fa;      /* hellgrau (Bootstrap-like) */
    border-right: 1px solid #dee2e6;
    box-sizing: border-box;
    padding: 1rem 0.75rem;
    overflow-y: auto;         /* Sidebar selbst darf scrollen, falls zu hoch */
}

/* Sidebar-Links optisch an Bootstrap anglehnen */
.app-sidebar .nav-link {
    color: #212529;
    padding: 0.35rem 0.5rem;
    border-radius: 0.35rem;
}

.app-sidebar .nav-link.active {
    background-color: #0d6efd;
    color: #fff;
}

/* Hauptbereich rechts */
.app-main {
    flex: 1;
    height: 100vh;
    overflow-y: auto;         /* nur hier scrollen! */
    background: #ffffff;
}

/* Innenabstand für Content */
.app-main-inner {
    padding: 1rem;
    box-sizing: border-box;
    max-width: 1400px;
}

/* optional: Mobile: Sidebar einklappbar machen etc. */
@media (max-width: 768px) {
    .app-layout {
        flex-direction: column;
    }

    .app-sidebar {
        width: 100%;
        height: auto;
        border-right: none;
        border-bottom: 1px solid #dee2e6;
    }

    .app-main {
        height: calc(100vh - 60px); /* grob, je nach Sidebar-Höhe */
    }
}/* assets/css/style.css */

body {
    background-color: #f5f7fb;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Wrapper + Sidebar */
#wrapper {
    min-height: 100vh;
}

/* Sidebar standard */
#sidebar-wrapper {
    max-height: 100vh;
        width: 240px;
    transition: width 0.2s ease-in-out;
    background: linear-gradient(180deg, #253481 0%, #182b52 40%, #0b207e 100%);
    color: #f9fafb; /* fast weiß */
}

#sidebar-wrapper .sidebar-bottom a {
    color: inherit;
}

#sidebar-wrapper .sidebar-bottom a:hover {
    text-decoration: underline;
}

/* Sidebar eingeklappt: nur Icons */
#wrapper.toggled #sidebar-wrapper {
    width: 72px;
}

/* Sidebar-Heading Logo */
#sidebar-wrapper .sidebar-logo-short {
    display: none;
}

#sidebar-wrapper .sidebar-heading {
    background: transparent;
    border-bottom: 1px solid rgba(148, 163, 184, 0.4);
}

#sidebar-wrapper .sidebar-logo-full {
    display: inline-block;
}

#wrapper.toggled #sidebar-wrapper .sidebar-logo-full {
    display: none;
}

#wrapper.toggled #sidebar-wrapper .sidebar-logo-short {
    display: inline-block;
}

/* Sidebar Links */
#sidebar-wrapper .list-group-item {
    border: transparent;
    border-radius: 0;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    background: transparent;
     color: #e5e7eb;
}


#sidebar-wrapper .list-group-item i {
    font-size: 1.1rem;
}

/* Text in Sidebar-Links */
#sidebar-wrapper .sidebar-text {
    white-space: nowrap;
}

/* Eingeklappt: Text ausblenden, Icons zentrieren */
#wrapper.toggled #sidebar-wrapper .sidebar-text {
    display: none;
}

#wrapper.toggled #sidebar-wrapper .list-group-item {
    justify-content: center;
}

#wrapper.toggled #sidebar-wrapper .list-group-item i {
    margin-right: 0 !important;
     color: inherit;
}

/* Active/Hover Zustand */
#sidebar-wrapper .list-group-item.active,
#sidebar-wrapper .list-group-item:hover {
     background: rgba(148, 163, 184, 0.18); /* leichtes Blau-Grau */
    color: #ffffff;
}



/* Karten im Dashboard */
.card {
    border-radius: 0.75rem;
}

/* Mobile: Sidebar optional voll anzeigen (ohne Ein- / Ausfahren).
   Wenn du sie auf Mobil komplett ausblenden willst, kann man hier noch
   mit position/margin-left arbeiten. */
@media (max-width: 575.98px) {
    #sidebar-wrapper {
        width: 72px;
    }
}


/* Gesamte Sidebar */
#sidebar-wrapper {
    display: flex;
    flex-direction: column;
    height: 100vh;
    min-height: 0;
    overflow: hidden;
}

/* Nur die Navigation scrollt */
#sidebar-wrapper .sidebar-navigation {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Logout bleibt unten sichtbar */
#sidebar-wrapper .sidebar-logout {
    flex-shrink: 0;
}

/* Copyright */
#sidebar-wrapper .sidebar-footer {
    flex-shrink: 0;
}

/* Eingeklappte Sidebar:
   Bootstrap Start-Template */
body.sb-sidenav-toggled #sidebar-wrapper .sidebar-logout .sidebar-text {
    display: none;
}

body.sb-sidenav-toggled #sidebar-wrapper .sidebar-logout {
    padding: 8px !important;
}

body.sb-sidenav-toggled #sidebar-wrapper .sidebar-logout .btn {
    padding: 10px;
}

/* Menü-Icons */
#sidebar-wrapper .list-group-item i.bi {
    flex-shrink: 0;
}

/* Scrollbar */
#sidebar-wrapper .sidebar-navigation::-webkit-scrollbar {
    width: 5px;
}

#sidebar-wrapper .sidebar-navigation::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 5px;
}


/* Logout in der Sidebar */
#sidebar-wrapper .sidebar-logout-link {
    display: flex !important;
    align-items: center;
    background-color: transparent !important;
    color: #ffffff !important;
    padding: 10px 15px;
    text-decoration: none;
    border: 0;
}

#sidebar-wrapper .sidebar-logout-link:hover {
    background-color: rgba(255,255,255,0.12) !important;
    color: #ffb3b3 !important;
}

#sidebar-wrapper .sidebar-logout-link .bi {
    color: #ffb3b3;
}

/* Symbol bei eingeklappter Sidebar sichtbar */
#sidebar-wrapper .sidebar-logout-link i {
    display: inline-block !important;
}