/* =========================================
   1. GLOBAL LAYOUT (Dashboard Style)
   ========================================= */

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Verhindert, dass die ganze Seite scrollt */
}

body {
    display: flex;
    flex-direction: column;
    background-color: #f8f9fe;
}

/* Banner bleibt oben fest (optional, sonst scrolling behavior anpassen) */
.school-banner {
    flex-shrink: 0;
    z-index: 200;
}

/* Der Hauptcontainer füllt den Rest des Bildschirms */
.app-layout {
    display: flex;
    flex: 1; /* Nimmt den gesamten Platz unter dem Banner ein */
    overflow: hidden; /* Wichtig: Begrenzt den Bereich auf den Bildschirm */
    position: relative;
    width: 100%;
}

/* =========================================
   2. SIDEBAR (Links feststehend)
   ========================================= */
.sidebar {
    width: 260px;
    background: #ffffff;
    color: #333;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    z-index: 100;
    border-right: 1px solid #e0e0e0;

    /* Wichtig: Sidebar scrollt unabhängig, wenn das Menü zu lang ist */
    height: 100%;
    overflow-y: auto;
}

/* =========================================
   3. PAGE CONTENT (Rechts scrollbar)
   ========================================= */
.page-content {
    flex: 1; /* Nimmt den restlichen Platz neben der Sidebar */
    height: 100%; /* Füllt die Höhe aus */

    /* HIER PASSIERT DIE MAGIE: */
    overflow-y: auto; /* Nur dieser Bereich scrollt! */
    overflow-x: hidden;

    padding: 5px;
    position: relative;
}

/* Footer muss jetzt wahrscheinlich in den Content oder angepasst werden */
.school-footer {
    /* Je nach deinem Footer-Aufbau evtl. margin-top entfernen */
    flex-shrink: 0;
}

/* =========================================
   3. PROFIL BEREICH
   ========================================= */
.sidebar-profile {
    padding: 15px 20px;
    background: #fcfcfc;
    border-bottom: 1px solid #e0e0e0;
    text-align: left;
}

.profile-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: #2e3a4e;
    margin-bottom: 0;
    line-height: 1.2;
}

.profile-role {
    font-size: 0.8rem;
    color: #999;
    margin-top: 2px;
}

/* =========================================
   LINKS & DROPDOWNS (Optimiert für gleiche Höhe)
   ========================================= */

/* Gemeinsame Basis für Links und Header */
.sidebar-link, .dropdown-header {
    display: flex;
    align-items: center;
    width: 100%;

    /* HIER IST DER TRICK: Feste Mindesthöhe setzen */
    min-height: 50px;
    box-sizing: border-box; /* Padding zählt zur Breite/Höhe dazu */

    border-left: 4px solid transparent;
    transition: all 0.2s;
    cursor: pointer;
    text-decoration: none;

    /* Padding oben/unten reduzieren, da min-height die Größe bestimmt */
    padding-top: 0;
    padding-bottom: 0;
}

/* 1. NORMALE LINKS (z.B. Schülerfotos, Übersicht) */
.sidebar-link {
    padding-left: 20px;
    padding-right: 20px;
    color: #555;
    font-size: 1rem;
    font-weight: 500;
}

.sidebar-link i {
    margin-right: 15px;
    font-size: 22px;
    color: #888;
    width: 24px;
    text-align: center;
}

/* 2. DROPDOWN HEADER (Container für Link + Pfeil) */
.dropdown-header {
    padding: 0; /* Kein Padding im Container selbst */
    align-items: stretch; /* Kinder füllen die ganze Höhe */
}

/* Der Link-Teil im Dropdown (Links) */
.header-link {
    flex-grow: 1;
    display: flex;
    align-items: center; /* Vertikal zentrieren */
    padding-left: 20px;  /* Nur links Padding */
    text-decoration: none;
    color: #555;
    font-weight: 500;
    font-size: 1rem;
}

.header-link i {
    margin-right: 15px;
    font-size: 22px;
    color: #888;
    width: 24px;
    text-align: center;
}

/* Der Toggle-Teil im Dropdown (Rechts, der Pfeil) */
.header-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px; /* Feste Breite für den Klickbereich */
    cursor: pointer;
    color: #888;
    background: none;
    border: none;
    outline: none;
    padding: 0;
}

.header-toggle:hover {
    color: #2e5d8b;
    background-color: rgba(0,0,0,0.05);
}

/* Hover & Active States (für beide gleich) */
.sidebar-link:hover, .dropdown-header:hover {
    background: #f4f6f8;
}
.sidebar-link:hover, .header-link:hover {
    color: #2e5d8b;
}
.sidebar-link:hover i, .header-link:hover i {
    color: #2e5d8b;
}

/* Active State */
.sidebar-link.active, .dropdown-header.active {
    background: #eef4fb;
    border-left-color: #2e5d8b;
}

.sidebar-link.active,
.dropdown-header.active .header-link,
.dropdown-header.active .header-link i,
.sidebar-link.active i {
    color: #2e5d8b;
}

/* Sub-Menüs */
.dropdown-container {
    display: none;
    background-color: #fafafa;
    box-shadow: inset 0 3px 6px -3px rgba(0,0,0,0.1);
}

.sub-link {
    display: flex;
    align-items: center;
    padding: 10px 20px 10px 65px; /* Eingerückt */
    color: #666;
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.2s;
}
.sub-link:hover { color: #2e5d8b; background: rgba(0,0,0,0.02); }
.sub-link.active { color: #2e5d8b; font-weight: 600; }

.dropdown-arrow {
    font-size: 20px !important;
    transition: transform 0.3s;
}
.arrow-rotated { transform: rotate(180deg); }

.sidebar-divider {
    height: 1px;
    background: #e0e0e0;
    margin: 15px 20px;
}

/* =========================================
   6. MOBILE RESPONSIVE
   ========================================= */
@media (max-width: 700px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        transform: translateX(-100%);
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
        z-index: 2000;
        height: 100%;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .sidebar-overlay {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 1999;
        display: none;
    }
    .sidebar-overlay.active { display: block; }
}

/* --- BUTTON STYLE --- */
.desktop-toggle-area {
    text-align: right;
    padding: 10px;
    display: none; /* Mobil ausblenden */
}
.btn-toggle-sidebar {
    background: transparent;
    border: none;
    color: #fff; /* Oder deine Textfarbe */
    cursor: pointer;
}

/* --- DESKTOP LOGIK (ab 700px) --- */
@media (min-width: 700px) {
    .desktop-toggle-area { display: block; }

    /* Animation für sanften Übergang */
    .sidebar, .main-content, .profile-name, .profile-role, .header-link, .sidebar-link {
        transition: all 0.3s ease;
    }

    /* === EINGEKLAPPTER ZUSTAND === */
    body.sidebar-collapsed .sidebar {
        width: 70px; /* Nur so breit wie die Icons */
        overflow: visible; /* Damit Tooltips oder Menüs raus können */
    }

    /* Hauptinhalt muss nachrücken */
    /* PASSE '.main-content' AN DEINEN KLASSENNAMEN FÜR DEN RECHTEN BEREICH AN! */
    body.sidebar-collapsed .main-content,
    body.sidebar-collapsed .booking-wrapper,
    body.sidebar-collapsed .ns-wrapper {
       /* margin-left: 70px !important;*/
    }

    /* Texte verstecken */
    body.sidebar-collapsed .sidebar .profile-name,
    body.sidebar-collapsed .sidebar .profile-role,
    body.sidebar-collapsed .sidebar .dropdown-arrow {
        display: none !important;
    }

    /* Links anpassen: Text ausblenden, Icon zentrieren */
    body.sidebar-collapsed .sidebar a {
        display: flex;
        justify-content: center;
        padding: 10px 0;
        font-size: 0; /* Trick: Versteckt den Text */
    }

    body.sidebar-collapsed .sidebar a i {
        font-size: 24px; /* Icon Größe wiederherstellen */
        margin: 0;
    }

    /* Dropdown Header im eingeklappten Zustand */
    body.sidebar-collapsed .dropdown-header {
        display: flex;
        justify-content: center;
        padding: 10px 0;
    }

    /* Dropdown Pfeil Button verstecken */
    body.sidebar-collapsed .header-toggle {
        display: none;
    }

    /* Sub-Menüs im eingeklappten Zustand verstecken (oder per Hover anzeigen) */
    body.sidebar-collapsed .dropdown-container {
        display: none !important;
    }

    /* Optional: Hover-Effekt, damit man Menü sieht wenn man maus drüber hält */
    /* body.sidebar-collapsed .sidebar:hover { width: 250px; } */
    /* body.sidebar-collapsed .sidebar:hover .profile-name { display: block !important; } */
    /* Das oben auskommentierte würde die Sidebar beim Drüberfahren temporär öffnen */
}