/* --- HAUPTLAYOUT (HEADER OBEN) --- */
body {
    overflow: hidden; /* Verhindert das Scrollen der gesamten Seite */
}
.app-wrapper { 
    display: flex; 
    flex-direction: column; 
    height: 100vh; 
}
.app-header { 
    height: var(--header-height); 
    flex-shrink: 0; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 0 1.5rem; 
    background-color: var(--bg-header); 
    border-bottom: 1px solid var(--border-color-medium); 
    z-index: 1001; 
}
.app-body { 
    display: flex; 
    flex-grow: 1; 
    overflow: hidden; 
}
.app-sidebar { 
    width: var(--sidebar-width); 
    height: 100%; 
    background-color: var(--bg-sidebar); 
    border-right: 1px solid var(--border-color-medium); 
    display: flex; 
    flex-direction: column; 
    transition: width 0.3s ease; 
    flex-shrink: 0; 
    overflow-x: hidden;
}
.main-content { 
    flex-grow: 1; 
    height: 100%; 
    display: flex; 
    flex-direction: column; 
    overflow-y: auto; 
}
.calendar-container {
    padding: 1rem 1.5rem;
    flex-grow: 1;
}

/* --- HEADER INHALT --- */
.header-left, .header-right { 
    display: flex; 
    align-items: center; 
    gap: 1rem; 
}
.header-right {
    position: relative;
}
.app-logo { font-size: 1.5rem; margin: 0; white-space: nowrap; }
#app-title { font-size: 1.5rem; font-weight: 700; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sidebar-toggle-btn {
    cursor: pointer;
}

.header-toolbar { 
    display: flex; 
    align-items: center; 
    gap: 20px;
}
/* KORREKTUR: Finale, unumstößliche Regeln für alle Icons in der Toolbar */
.header-toolbar .toolbar-icon { 
    cursor: pointer; 
    font-size: 1.5rem; 
    color: var(--text-white) !important; /* Wichtig: Überschreibt alle anderen Farben */
    transition: none;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: transparent; /* Standard-Hintergrund */
}
.header-toolbar .toolbar-icon:hover { 
    background-color: rgba(255, 255, 255, 0.15); /* Grauer Kreis beim Hover */
    color: var(--text-white) !important; /* Stellt sicher, dass die Farbe weiß bleibt */
    transform: none !important; /* Stellt sicher, dass kein Zoom stattfindet */
}

a.toolbar-icon {
    text-decoration: none;
}

/* Stellt den Kontrast für den dunklen Header im Light-Mode sicher */
.app-header,
.app-header #app-title {
    color: var(--text-white);
}


/* --- SEITENLEISTE: AKKORDEON-MENÜ --- */
.app-sidebar { padding: 0; }
.sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1;
    overflow-y: auto;
}
.menu-item {
    border-bottom: 1px solid var(--border-color-light);
}
.menu-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    text-decoration: none;
    color: var(--text-secondary);
    font-weight: 500;
    transition: background-color 0.2s, color 0.2s;
    white-space: nowrap;
    cursor: pointer;
}
.menu-link:hover {
    background-color: var(--bg-month-button-hover);
    color: var(--text-primary);
}
.menu-link.active {
    background-color: var(--bg-today-button);
    color: var(--text-white);
}
.menu-link .menu-text {
    flex-grow: 1;
}
.submenu-arrow {
    transition: transform 0.3s ease;
}
.menu-item.active > .menu-link .submenu-arrow {
    transform: rotate(180deg);
}
.submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: var(--bg-week-label);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}
.menu-item.active > .submenu {
    max-height: 500px; /* Ausreichend großer Wert */
    padding-bottom: 1rem;
}
.submenu-item {
    padding: 0.5rem 1rem;
}
.submenu-item .icon-toolbar {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color-medium);
    margin-bottom: 0.5rem;
}
.submenu-item label {
    font-weight: bold;
    font-size: 0.9em;
    margin-bottom: 0.5rem;
    display: block;
}

.sidebar-footer { 
    padding: 1rem; 
    border-top: 1px solid var(--border-color-medium); 
    flex-shrink: 0;
}

/* --- EINGEKLAPPTE SEITENLEISTE (KORRIGIERT) --- */
body.sidebar-collapsed .app-sidebar { width: var(--sidebar-width-collapsed); }
body.sidebar-collapsed .menu-link { justify-content: center; }
body.sidebar-collapsed .menu-text,
body.sidebar-collapsed .submenu-arrow,
body.sidebar-collapsed .submenu,
body.sidebar-collapsed .user-name {
    display: none;
}
body.sidebar-collapsed .user-info .material-symbols-outlined:last-child { display: none; }

/* --- AGENDA-ANSICHT LAYOUT --- */
.month-links { display: flex; gap: 0.5rem; padding: 0.75rem 1.5rem; position: sticky; top: 0; background-color: var(--bg-body); z-index: 900; border-bottom: 1px solid var(--border-color-medium); }
footer { text-align: center; font-size: 0.8em; color: var(--text-tertiary); flex-shrink: 0; padding: 1.5rem; }

/* --- RESPONSIVE ANPASSUNGEN --- */
@media (max-width: 768px) { 
    .app-body { flex-direction: column; } 
    .app-sidebar { width: 100%; height: auto; position: static; border-right: none; border-bottom: 1px solid var(--border-color-medium); } 
    .main-content { margin-left: 0; width: 100%; } 
    body.sidebar-collapsed .app-sidebar { display: none; } 
}