.sidenav {
    position: fixed;
    left: 0;
    top: 0;
    width: 230px;
    height: calc(100vh - 28px);
    background-color: var(--color-shell-surface, var(--color-surface-primary));
    border-right: 1px solid var(--color-border);
    box-shadow: var(--shadow-level1);
    z-index: 1000;
    /* REMOVED: transition that was causing slide-in animation on resize */
    overflow: visible;
}

@supports (height: 100dvh) {
    .sidenav {
        height: calc(100dvh - 28px);
    }

    .sidenav-items {
        height: calc(100dvh - 28px - 64px - 20px);
    }
}

/* Während der Animation: Icons und Container einfrieren */
.sidenav.animating .sidenav-items {
    pointer-events: none; /* Keine Interaktion während Animation */
}

.sidenav.animating .sidenav-item {
    overflow: hidden !important;
}

.sidenav.animating .sidenav-item-icon {
    transition: none !important;
    /* Icons bleiben an ihrer absoluten Position */
}

.sidenav.collapsed {
    width: 64px;
}

.sidenav-logo-container {
    height: 56px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    overflow: hidden;
    position: relative;
}

.sidenav.collapsed .sidenav-logo-container {
    padding: 0 12px; /* Gleiche Padding wie expandiert */
}

.sidenav-logo {
    height: 40px;
    width: 180px; /* Feste Box für beide Logos */
    object-fit: contain;
    object-position: center;
    position: absolute;
    left: 50%;
    top: calc(50% + 2px);
    transform: translate(-50%, -50%);
    /* REMOVED: opacity transition that was contributing to animation on resize */
}

.sidenav-logo-full {
    opacity: 1;
    left: 24px; /* Exakte X-Position wie im Titlebar */
    transform: translateY(-50%); /* Nur vertikal zentrieren - kein Offset mehr */
    object-position: left; /* SVG linksbündig in der Box ausrichten */
}

.sidenav-logo-small {
    opacity: 0;
}

.sidenav.collapsed .sidenav-logo-full {
    opacity: 0;
    pointer-events: none;
}

.sidenav.collapsed .sidenav-logo-small {
    opacity: 1;
}

.sidenav-logo-container {
    cursor: pointer;
}

.sidenav-logo-container:hover {
    opacity: 0.8;
}

.sidenav-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 48px 4px 12px;
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100vh - 28px - 64px - 20px);
}

.sidenav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px 12px 52px; /* Links mehr Platz für absolut positioniertes Icon */
    border-radius: 4px;
    cursor: pointer;
    /* KEINE transition für background-color - instant feedback */
    white-space: nowrap;
    overflow: hidden;
    position: relative;
    min-height: 48px;
}

.sidenav.collapsed .sidenav-items {
    padding: 48px 4px 12px;
    display: flex;
    flex-direction: column;
}

.sidenav.collapsed .sidenav-item {
    padding: 12px 20px; /* Gleiche Icon-Position beibehalten */
    gap: 0;
    width: 100%;
}

.sidenav.collapsed .sidenav-item-icon {
    /* Icon bleibt EXAKT an gleicher Position wie im expandierten Zustand */
    left: 16px; /* Gleiche Position: 4px (container) + 16px = 20px von Sidebar-Kante */
}

.sidenav.collapsed .sidenav-item-text {
    display: none;
}

.sidenav-item:hover {
    background-color: var(--color-interactive-hover);
}

.sidenav-item:hover .sidenav-item-icon,
.sidenav-item:hover .sidenav-item-text {
    color: var(--color-context-foreground);
}

.sidenav-item.active {
    background-color: var(--color-context-background);
}

.sidenav-item-icon {
    width: 24px;
    height: 24px;
    font-size: 24px;
    color: var(--color-text-primary);
    position: absolute;
    left: 16px; /* Korrigiert für 4px Padding im expandierten Zustand */
    top: 50%;
    transform: translateY(-50%);
}

.sidenav-item-text {
    font-size: 15px;
    color: var(--color-text-primary);
    overflow: hidden;
    white-space: nowrap;
    margin-left: 0; /* Platz wird durch Padding des Parents gesteuert */
    opacity: 1;
    /* REMOVED: transition that was causing animation on resize */
}

.sidenav-item.active .sidenav-item-icon,
.sidenav-item.active .sidenav-item-text {
    color: var(--color-context-foreground);
}

/* Beim Kollabieren: Text sofort ausblenden */
.sidenav.collapsed .sidenav-item-text {
    opacity: 0;
    /* REMOVED: transition-duration that was causing animation */
    visibility: hidden;
    pointer-events: none;
}

/* REMOVED: transition-delay that was causing animation on expand */

.sidenav-toggle {
    position: absolute;
    right: -24px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 48px;
    background-color: inherit;
    border: 1px solid var(--color-border);
    border-left: none;
    border-radius: 0 24px 24px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 4px 0 8px -2px rgba(0,0,0,0.1);
    /* KEINE transition */
}

.sidenav-toggle:hover {
    background-color: var(--color-interactive-hover);
}

.sidenav-toggle-icon {
    width: 21px;
    height: 21px;
    font-size: 21px;
    color: var(--color-text-primary);
    /* KEINE transition für Icon-Rotation */
}

.sidenav.collapsed .sidenav-toggle-icon {
    transform: rotate(180deg);
}

.sidenav-divider {
    height: 1px;
    background-color: var(--color-border);
    border-radius: 999px;
    margin: 16px 12px 12px;
    opacity: 0.75;
}

.sidenav.collapsed .sidenav-divider {
    margin: 16px 8px 12px;
}

/* Titlebar Verschiebung bei Sidenav */
.titlebar.with-sidenav {
    margin-left: 230px;
}

.titlebar.with-sidenav.sidenav-collapsed {
    margin-left: 64px;
}