/* style.css */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    max-width: 100%;
    overflow-x: hidden; /* Voorkomt dat de hele pagina naar links/rechts wiebelt */
    background: #f4f7f6;
    color: #333;
    font-family: sans-serif;
}

.app-container { 
    display: flex; 
    flex-direction: column; 
    min-height: 100vh; 
    width: 100%;
    overflow-x: hidden;
}

.main-header {
    height: 60px; background: #003366; color: white;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 20px; position: sticky; top: 0; z-index: 100;
}

.logout-link { color: white; text-decoration: none; border: 1px solid white; padding: 5px 10px; border-radius: 4px; font-size: 0.8em; }

.main-wrapper {
    display: flex;
    flex: 1;
    width: 100%;
    min-width: 0;
    max-width: 1500vw;
    overflow: hidden;
}

.sidebar { width: 250px; background: white; border-right: 1px solid #ddd; padding: 20px 0; }
.sidebar ul { list-style: none; }
.sidebar li a { display: block; padding: 10px 20px; color: #333; text-decoration: none; }
.sidebar li a.active { background: #eef; color: #003366; font-weight: bold; border-left: 4px solid #003366; }
.sidebar hr { border: 0; border-top: 1px solid #eee; margin: 10px 0; }

.content-area {
    flex: 1; /* Zorgt dat deze sectie alle beschikbare ruimte inneemt */
    padding: 20px;
    max-width: 1000px;
    margin: 0 auto;
    
    /* Chrome Fix: voorkom dat flex-items groter worden dan de container */
    width: 100%;
    min-width: 0; 
    
    /* Zorg dat alles wat hierbuiten steekt (de tabel) wordt afgeklemd */
    overflow: hidden; 
    display: block; /* Forceert een heldere blok-structuur */
}

.card { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 20px; }
.card h1, .card h2 { margin-bottom: 15px; color: #003366; }
.card p { line-height: 1.6; color: #555; }
.card ul { padding-left: 20px;}

/* Mobiele Tab-bar */
.tab-bar { display: none; position: fixed; bottom: 0; width: 100%; height: 50px; background: white; border-top: 1px solid #ddd; justify-content: space-around; align-items: center; z-index: 100; }
.tab-bar a { text-decoration: none; color: #666; font-size: 0.8em; }
.tab-bar a.active { color: #003366; font-weight: bold; }

.mobile-content-only { display: none; }

@media (max-width: 850px) {
    .sidebar { display: none; }
    .tab-bar { display: flex; }
    .content-area { padding-bottom: 100px; padding: 20px; } /* Minder padding op mobiel geeft meer ruimte */
    .mobile-content-only { display: block; }
}