/* Mobiele menu zichtbaar maken op bredere telefoons, bv >768px en <1024px */
@media(max-width:1024px){
    .topbar, .mobile-menu, .user-dropdown { display:block; }
    .sidebar { display:none; }
}

/* Algemene layout */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px; /* basislettergrootte iets groter */
    line-height: 1.5; /* geeft meer lucht */
    color: #333; /* iets zachtere tekstkleur */
}
.page-container { display:flex; min-height:100vh; }

/* Sidebar */
.sidebar {
    width:250px;
    background:#a2a4a6;
    color:black;
    padding:15px;
    transition:0.3s;
}
.sidebar h3 { margin-top:0; }
.sidebar .menu-item { display:block; padding:10px; color:white; text-decoration:none; }
.sidebar .menu-item:hover { background:#34495e; }
button, input[type=submit] {
    cursor:pointer;
    background:#e3e5e6;
    color:black;
    border:none;
    border-radius:4px;
    padding:6px 12px;
}
button:hover, input[type=submit]:hover { background:#2980b9; }

/* Main content */
.main-content { flex:1; padding:20px; background:#f4f6f9; }

/* Tables */
table { width:100%; border-collapse:collapse; margin-top:10px; }
th, td { padding:8px; border:1px solid #ddd; text-align:left; }
th { background:#ecf0f1; }

/* Forms */
form .form-row { display:flex; gap:10px; flex-wrap:wrap; }
form .form-group { flex:1; display:flex; flex-direction:column; }

/* Topbar (voor mobiel) */
.topbar {
    display:none;
    background:#2c3e50;
    color:white;
    padding:10px;
    justify-content:space-between;
    align-items:center;
}

/* Loginpagina */
.login-form { width:400px; max-width:90%; margin:50px auto; font-size:1em; }

/* Responsive */
@media(max-width:768px) {
    .sidebar { position:fixed; left:-260px; top:0; height:100%; z-index:1000; }
    .sidebar.active { left:0; }
    .topbar { display:flex; }
    .main-content { flex:1; padding:10px; }

    /* Tables stapelen */
    table, thead, tbody, th, td, tr { display:block; width:100%; }
    tr { margin-bottom:15px; border-bottom:2px solid #ddd; }
    th { display:none; }
    td { display:flex; justify-content:space-between; padding:5px; border:none; border-bottom:1px solid #eee; }
    td:before { content: attr(data-label); font-weight:bold; }

    /* Loginform vergroting */
    .login-form { font-size:1.5em; }
    .login-form input, .login-form button { font-size:1.2em; padding:12px; }
}

.search-bar {
    margin-bottom: 15px;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.search-bar input {
    padding:8px;
    border:1px solid #ccc;
    border-radius:5px;
}

.btn.secondary {
    background:#bdc3c7;
}

.logo-container {
    text-align: center;
    margin-bottom: 15px;
}

.sidebar-logo {
    max-width: 150px;
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
	background: white;
    padding: 5px;
    border-radius: 6px;
}

/* mobiel iets kleiner */
@media(max-width:768px){
    .sidebar-logo {
        max-width: 120px;
    }
}

.mobile-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: #3498db;
    color: #fff;
}

.mobile-menu-left button {
    background: none;
    border: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
}

.mobile-user-right span {
    cursor: pointer;
    font-weight: bold;
}

.mobile-menu, .mobile-user-dropdown {
    background: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    width: 100%;
}

.mobile-menu a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #333;
}

.hidden { display: none; }