.sidebar{
    position: fixed;
    z-index: 900;                 
    top: var(--header-h);
    left: 0;
    width: var(--sidebar-w);
    height: calc(100vh - var(--header-h));
    overflow: auto;
    margin-left: 0; 
    padding: 14px 12px;
    background: var(--colors-accent);
    border-radius: 14px;
    border-radius: 0 14px 14px 0;
    box-sizing: border-box;
}

.sidebar__section{
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 10px 0 16px 0;
}
.sidebar__heading{
    color: var(--colors-text-light);
    font-size:.9rem;
    font-weight:600;
    letter-spacing:.02em;
    opacity:.9;
    padding: 4px 10px;
}

.sidebar__heading{ text-align:left; }

.nav-item{
    display:flex; align-items:center; gap:10px;
    padding:10px 12px;
    border-radius: 10px;
    color: var(--colors-text-light); text-decoration:none;
    transition: background .15s, transform .04s;
}
.nav-item:hover{ background: var(--colors-background-gray); }
.nav-item:active{ transform: translateY(1px); }

.nav-icon{
    width: 22px;             
    text-align:center;
    font-size: 1rem;
    opacity:.95;
}


.nav-item.is-active{
    background: var(--colors-background-gray);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.06);
}


.btn-upload{
    display:flex; align-items:center; gap:10px;
    padding:11px 12px;
    border-radius: 12px;
    background: var(--colors-main);
    color: var(--colors-text-light);
    text-decoration:none;
    font-weight:600;
    transition: filter .15s, transform .04s;
}
.btn-upload i{ width:22px; text-align:center; }
.btn-upload:hover{ filter: brightness(1.05); }
.btn-upload:active{ transform: translateY(1px); }

.ai-filter{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:10px 12px; border-radius:10px; background: var(--colors-background);
}

.sidebar::-webkit-scrollbar{ width:10px; }
.sidebar::-webkit-scrollbar-thumb{ background: var(--colors-accent); border-radius:10px; }
.sidebar::-webkit-scrollbar-track{ background: var(--colors-background); border-radius:10px; }


@media (max-width: 768px) {
    .sidebar {
        display: none; /* Verberg sidebar op mobiel, of gebruik een toggle */
    }
}