/* FILE: navigatie.css - PATH: /system/style/navigatie.css */

/* ===== SIDEBAR BASIS ===== */
.sidebar{
flex:0 0 220px;
display:flex;
flex-direction:column;
background:var(--color-surface);
height:100%;
min-height:0;
padding:3.4rem 0.4rem 0.4rem;
gap:0.4rem;
box-sizing:border-box;
border-radius:8px;
box-shadow:var(--shadow-soft);
margin:0;
}

.sidebar > *:last-child{
margin-bottom:0.5rem;
}

/* ===== MENU ITEMS ===== */
.sidebar-button{
display:block;
width:100%;
padding:0.55rem 0.9rem;
background:var(--color-green);
color:var(--color-text-inverse);
font-weight:bold;
text-decoration:none;
font-size:0.9rem;
border-left:3px solid transparent;
border-radius:8px;
box-sizing:border-box;
transition:
background 0.12s ease,
border-color 0.12s ease,
color 0.12s ease;
}

.sidebar-button:hover{
background:var(--color-blue);
color:var(--color-text-inverse);
border-left:3px solid var(--color-blue);
}

.sidebar-button:active{
background:var(--color-blue);
color:var(--color-orange);
border-left:3px solid var(--color-blue);
}

/* NIEUW: actieve pagina */
.sidebar-button.active{
background:var(--color-blue);
color:var(--color-text-inverse);
border-left:3px solid var(--color-blue);
}

/* ===== SEPARATOR ===== */
.sidebar-separator{
height:1px;
background:var(--color-border);
margin:0.4rem 0;
}

/* ===== THEME SWITCH ===== */
.sidebar-theme{
margin-top:auto;
display:flex;
justify-content:center;
align-items:center;
padding:0.9rem 0 1.2rem;
border-top:1px solid var(--color-border);
flex-shrink:0;
}

.theme-switch{
position:relative;
display:inline-block;
width:42px;
height:22px;
}

.theme-switch input{
opacity:0;
width:0;
height:0;
}

/* ===== SLIDER ===== */
.slider{
position:absolute;
cursor:pointer;
top:0;
left:0;
right:0;
bottom:0;
background:var(--color-border);
border-radius:20px;
transition:0.2s;
}

.slider::before{
content:"";
position:absolute;
height:16px;
width:16px;
left:3px;
top:3px;
background:var(--color-text-inverse);
border-radius:50%;
transition:0.2s;
z-index:2;
}

.slider::after{
content:"🌙";
position:absolute;
right:6px;
top:50%;
transform:translateY(-50%);
font-size:12px;
}

.theme-switch input:checked + .slider::after{
content:"☀︎"; 
left:6px;
right:auto;
color:#f5c542;
}

.theme-switch input:checked + .slider{
background:var(--color-blue);
}

.theme-switch input:checked + .slider::before{
transform:translateX(20px);
}

/* ===== TOGGLE BUTTON ===== */
.sidebar-toggle{
display:none;
background:transparent;
border:none;
cursor:pointer;
padding:0.3rem 0.6rem;
font-size:0;
line-height:1;
}

.sidebar-toggle::before{
content:"☰";
font-size:1.4rem;
display:inline-block;
color:var(--color-text);
}

.sidebar-toggle.active::before{
content:"☰";
font-size:1.4rem;
}

/* ===== MOBILE ===== */
@media (max-width:768px){

.sidebar-toggle{
display:block;
position:fixed;
top:8px;
left:20px;
z-index:1100;
}

.sidebar{
position:fixed;
top:0;
left:-220px;
width:220px;
height:100%;
z-index:1000;
overflow-y:auto;
transition:left 0.2s ease;
}

.sidebar.open{
left:0;
}

.sidebar-button{
display:block;
width:100%;
padding:0.5rem 0.8rem;
font-size:0.85rem;
}

}