/* --- css/layout.css --- */

/* 1. APP CONTAINER (De basis) */
.app-container {
    display: flex;
    width: 100vw;
    height: 100vh;      
    height: 100dvh;     
    overflow: hidden;   
    position: relative;
    /* FIX: Maak de container transparant zodat canvas zichtbaar is */
    background-color: transparent; 
}

/* 2. SIDEBAR */
.sidebar {
    width: 70px;
    /* FIX: Semi-transparant met blur */
    background: rgba(30, 30, 30, 0.85); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    z-index: 100;
    transition: width 0.3s ease;
    flex-shrink: 0;
    
    overflow-y: auto;       
    overflow-x: hidden;     
    scrollbar-width: none;  
    -ms-overflow-style: none;  
}
.sidebar::-webkit-scrollbar { display: none; }

.sidebar:hover { width: 220px; }

/* NAVIGATIE ITEMS */
.nav-list { list-style: none; padding: 0; margin: 0; width: 100%; }
.nav-item-spacer { height: 70px; pointer-events: none; }

.nav-link { 
    display: flex; align-items: center; height: 60px; 
    text-decoration: none; color: var(--text-muted); 
    transition: 0.2s; border-left: 3px solid transparent; 
    overflow: hidden; white-space: nowrap; 
}
.nav-link:hover, .nav-link.active { 
    background: rgba(255,255,255,0.05); color: white; border-left-color: var(--accent); 
}
.icon { min-width: 70px; display: flex; justify-content: center; font-size: 1.2rem; }
.text { opacity: 0; transition: 0.2s; font-weight: 500; margin-left: 10px; }
.sidebar:hover .text { opacity: 1; }

/* MOBIELE KNOP */
.mobile-toggle-btn {
    display: none; 
    position: absolute; top: 12px; left: 12px; 
    z-index: 2000; background: var(--accent); color: white;
    border-radius: 50%; border: none; width: 46px; height: 46px;
    font-size: 1.2rem; cursor: pointer; align-items: center; justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5); transition: all 0.3s ease;
}
.mobile-toggle-btn:hover { transform: scale(1.05); }

/* 3. PANELEN BASIS */
.panel {
    height: 100%;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
    
    /* FIX: Zorg dat panelen ook het glas-effect hebben */
    background: rgba(18, 18, 18, 0.85); /* Donkerder dan sidebar */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* --- PROFIEL PANEEL (Home) --- */
#profile-panel {
    flex: 1; 
    /* FIX: Radial gradient met transparantie */
    background: radial-gradient(circle at center, rgba(37,37,37,0.9) 0%, rgba(18,18,18,0.9) 100%);
    min-width: 0;
    overflow-y: auto; 
    display: flex;
    flex-direction: column;
}

.profile-content { 
    width: 100%; 
    padding: 20px; 
    text-align: center; 
    transition: transform 0.6s ease;
    margin: auto; 
    padding-top: 50px;
    padding-bottom: 100px; 
}

/* --- CONTENT PANEEL (Rechts) --- */
#content-panel { 
    flex: 0; width: 0; opacity: 0; 
    /* FIX: Achtergrond aangepast */
    background-color: rgba(10, 10, 10, 0.9); 
    overflow: hidden; 
}

/* 4. STATES (Split & Full View - Desktop) */
.app-container.split-view #profile-panel { 
    flex: 0 0 350px; 
    border-right: 1px solid var(--border); 
    /* FIX: Kleur consistent houden */
    background: rgba(30, 30, 30, 0.85); 
}
.app-container.split-view #content-panel { flex: 1; width: auto; opacity: 1; }
.app-container.split-view .profile-content { transform: scale(0.85); margin: auto; }

.app-container.full-view #profile-panel { flex: 0 0 0; border: none; opacity: 0; padding: 0; overflow: hidden; }
.app-container.full-view #content-panel { flex: 1; width: auto; opacity: 1; }

/* Content Scroll Wrapper */
.content-scroll-wrapper {
    height: 100%; overflow-y: auto; padding: 40px 60px;
    opacity: 1; transform: translateY(0); transition: opacity 0.3s ease, transform 0.3s ease;
}
.content-scroll-wrapper.fade-out { opacity: 0; transform: translateY(10px); }
.app-container:not(.split-view):not(.full-view) .content-scroll-wrapper { opacity: 0; }

.close-btn {
    position: absolute; top: 20px; right: 30px; background: none; border: none;
    color: var(--text-muted); font-size: 1.5rem; cursor: pointer; z-index: 10;
}
.close-btn:hover { color: var(--accent); }

/* ========================================= */
/* === TAALWISSEL (altijd zichtbaar) ======= */
/* ========================================= */
.lang-switcher {
    position: fixed; bottom: 20px; right: 20px; z-index: 3000;
    display: flex; align-items: center; gap: 2px; padding: 5px;
    background: rgba(30, 30, 30, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border); border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}
.lang-globe {
    color: var(--text-muted); font-size: 0.95rem;
    padding: 0 6px 0 10px; pointer-events: none;
}
.lang-btn {
    border: none; background: transparent; color: var(--text-muted);
    font-family: inherit; font-weight: 700; font-size: 0.8rem;
    padding: 7px 13px; border-radius: 50px; cursor: pointer;
    letter-spacing: 1px; transition: all 0.2s ease;
}
.lang-btn:hover { color: white; background: rgba(255,255,255,0.1); }
.lang-btn.active { background: var(--accent); color: white; }

/* ========================================= */
/* === MOBIEL MEDIA QUERY ================== */
/* ========================================= */
@media (max-width: 768px) {
    
    .app-container {
        display: block !important;
        height: 100vh !important;
        height: 100dvh !important;
        overflow-y: scroll !important; 
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        background: transparent; /* Zeker weten */
    }

    .sidebar { 
        position: fixed; 
        height: 100%; 
        width: 70px; 
        z-index: 999; 
        top: 0; 
        left: 0; 
        border-right: 1px solid #222;
        transition: transform 0.3s ease, width 0.3s ease;
        transform: translateX(0); 
    }

    .app-container.split-view .sidebar,
    .app-container.full-view .sidebar {
        transform: translateX(-100%); 
    }

    .sidebar.menu-open { 
        width: 250px !important; 
        transform: translateX(0) !important;
        box-shadow: 5px 0 50px rgba(0,0,0,0.8); 
    }
    .sidebar.menu-open .text { opacity: 1; }

    .mobile-toggle-btn { 
        display: flex; 
        position: fixed; 
        z-index: 2000;
        background: var(--accent);
        box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    }
    
    #profile-panel { 
        padding-left: 70px; 
        display: block !important; 
        width: 100%;
        height: auto !important; 
        min-height: 101%; 
        overflow: visible !important;
        padding-top: 80px;
        padding-bottom: 150px; 
    }
    
    .profile-content { margin: 0; width: 100%; padding: 0 20px; }
    
    #content-panel { display: none; width: 100%; }

    .app-container.split-view #profile-panel, 
    .app-container.full-view #profile-panel { display: none !important; }
    
    .app-container.split-view #content-panel, 
    .app-container.full-view #content-panel { 
        display: block !important; 
        width: 100%; 
        height: auto !important; 
        min-height: 100%;
        padding-bottom: 100px; 
        padding-left: 0; 
        overflow: visible !important;
    }
    
    .close-btn {
        position: fixed; 
        top: 20px;
        right: 20px;
        background: rgba(0,0,0,0.6); 
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1001; 
    }
    
    .content-scroll-wrapper { 
        padding: 80px 20px 40px 20px; 
        overflow: visible; 
        height: auto; 
    }
    
    .app-container.split-view .profile-content { transform: none; }

    .sidebar:hover { width: 70px; }
    .sidebar.menu-open:hover { width: 250px; }
}