/* ==========================================================================
   1. SIDEBAR BASIS-LAYOUT
   ========================================================================== */
.sidebar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;

    width: var(--sidebar-width);

    background:
        radial-gradient(
            120% 120% at 0% 0%,
            rgba(255,255,255,.03) 0%,
            rgba(255,255,255,0) 70%
        ),
        rgba(15,23,42,.55);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    border-right: 1px solid rgba(255,255,255,.06);

    padding: 24px 16px;

    display: block;

    height: 100vh;

    overflow: hidden;
}

/* ==========================================================================
   2. LOGO & BRANDING BEREICH (OBEN)
   ========================================================================== */
.sidebar-brand{
    margin-bottom:40px;
    padding:0 8px;
}

.brand-info {
    display: block;
}

.brand-info h1{
    margin:0;
    font-size:28px;
    font-weight:800;
    letter-spacing:-0.5px;
    color:var(--text-main);
    line-height:1.1;
}

.brand-info .version {
    font-size: 9pt;
    color: var(--text-muted);
    font-weight: 500;
}

/* ==========================================================================
   3. NAVIGATIONS-MENÜ (MITTE)
   ========================================================================== */
.sidebar-menu {
    display: block;
    /* Reduziert die feste Höhe ein wenig, damit die Einstellungen Platz haben */
    height: calc(100% - 320px); 
    overflow-y: auto;
}

.sidebar-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-menu li {

    display: flex;
    align-items: center;

    padding: 12px 16px;

    color: var(--text-muted);

    font-size: 10.5pt;

    font-weight: 500;

    border-radius: var(--radius-md);

    cursor: pointer;

    margin-bottom: 8px;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;

}

.sidebar-menu li .icon {
    margin-right: 12px;
    font-size: 12pt;
    display: inline-block;
    width: 20px;
    text-align: center;
}

/* Hover-Zustand */
.sidebar-menu li:hover:not(.disabled):not(.active) {

    background: rgba(255,255,255,.05);

    color: var(--text-main);

    transform: translateX(2px);

}

/* Aktiver Zustand (Der blaue Balken links) */
.sidebar-menu li.active {

    background:
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--primary) 18%, transparent),
            transparent
        );

    color: var(--text-main);

    border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);

    box-shadow:
        inset 3px 0 0 var(--primary);
        

    font-weight: 600;

}

.sidebar-menu li.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ==========================================================================
   4. SYSTEM / EINSTELLUNGEN (FEST POSITIONIERT ÜBER DER CARD)
   ========================================================================== */
.sidebar-settings-container {
    position: absolute;
    bottom: 140px; /* Sitzt exakt über der User-Profil-Karte */
    left: 16px;
    right: 16px;
}

/* ==========================================================================
   5. USER PROFIL CARD & LOGOUT (BOMBENFEST UNTEN)
   ========================================================================== */
.user-profile-card {

    position: absolute;
    bottom: 48px;
    left: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: var(--radius-lg);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.user-profile-card{

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;

}

.user-profile-card:hover{

    transform: translateY(-2px);

    border-color: color-mix(in srgb, var(--primary) 35%, var(--glass-border));

    box-shadow:
        0 10px 30px rgba(0,0,0,.25);

}

.user-profile-card::before{
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top left,
            rgba(255,255,255,.10),
            transparent 60%);
    pointer-events: none;
}

#user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    box-shadow:0 8px 24px rgba(0,0,0,.18);
}

/* Logout-Tür rechtsbündig in der Flexbox */
#btn-logout {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 13pt;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
    margin-left: auto; /* Schiebt das Icon ganz nach rechts */
    transition: all 0.2s ease;
}

#btn-logout:hover {
    opacity: 1;
    color: var(--danger) !important;
    transform: scale(1.1) rotate(-5deg);
}

/* Versionstext ganz unten im freien Raum */
.sidebar-version-footer {
    position: absolute;
    bottom: 16px;
    left: 16px;
    right: 16px;
    text-align: center;
    font-size: 8pt;
    color: rgba(255, 255, 255, 0.15);
    font-weight: 500;
}