/* public/css/style.css */

/* --- GLOBALE BASIS FIXES --- */
html, body {
    overflow-x: hidden; 
    width: 100%;
    margin: 0;
    padding: 0;
}

img { max-width: 100%; height: auto; }

/* --- 1. VARIABELEN --- */
:root {
    --sidebar-bg: #23285e;     
    --sidebar-active: #3b407a; 
    --sidebar-hover: #2d3370;
    --sidebar-footer: #1a1e45; 
    --color-primary: #23285e;
    --color-secondary: #DE1B51; 
    --bg-main: #f0f2f5; 
    --text-main: #333;
    --card-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

/* --- 2. BASIS LAYOUT --- */
* { box-sizing: border-box; }

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    background-color: var(--bg-main);
    color: var(--text-main);
}

/* Let op: Sidebar styling staat in includes/sidebar.php voor de hamburger-functionaliteit! */

/* --- 4. PAGINA KOPPEN --- */
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 35px; }
.page-header h1 { color: var(--color-primary); font-size: 24px; margin: 0 0 5px 0; }
.page-header p { color: #888; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; margin: 0; font-weight: bold; }

/* --- 5. CARDS & WIDGETS --- */
.card { background: white; border-radius: 10px; box-shadow: var(--card-shadow); padding: 30px; margin-bottom: 25px; border: 1px solid #eaeaea; }

/* --- 6. KNOPPEN --- */
.btn { background: var(--color-primary); color: white; padding: 10px 20px; text-decoration: none; border-radius: 6px; border: none; cursor: pointer; font-weight: bold; transition: opacity 0.2s; display: inline-block; }
.btn-new { background: var(--color-secondary); color: white; }
.btn-logout { background-color: var(--color-secondary); width: 100%; display: block; padding: 12px; text-align: center; border-radius: 4px; color: white; text-decoration: none; font-weight: bold; font-size: 14px; }
.btn:hover, .btn-logout:hover { opacity: 0.9; }

/* --- 7. TABELLEN --- */
table { width: 100%; border-collapse: collapse; }
th, td { padding: 15px; text-align: left; border-bottom: 1px solid #f0f0f0; }
th { color: #888; text-transform: uppercase; font-size: 10px; letter-spacing: 1px; font-weight: bold; }
tr:hover { background-color: #fafafa; }

/* --- 8. FORMULIEREN --- */
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-weight: bold; color: var(--color-primary); font-size: 14px; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 6px; font-family: inherit; font-size: 14px; }
.form-group input:focus { border-color: var(--color-secondary); outline: none; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* --- 9. STATUS BADGES --- */
.status-badge { padding: 5px 12px; border-radius: 20px; font-size: 11px; font-weight: bold; text-transform: uppercase; }

.file-upload-box { border: 2px dashed #cbd5e1; background: #f8fafc; padding: 20px; border-radius: 8px; text-align: center; }


/* =========================================
   📱 ALGEMENE MOBIELE OPTIMALISATIE 
   ========================================= */
@media (max-width: 768px) {
    
    body { display: block; height: auto; overflow-y: visible; }

    /* 1. ALLES onder elkaar forceren (Grids uitschakelen) */
    .grid, .form-grid, .grid-layout, .filter-grid, .charts-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }

    /* 2. Flex headers fixen (bijv. Titel + Knoppen) */
    .page-header, div[style*="justify-content: space-between"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
    }

    /* Zoekbalken en filters 100% breed maken */
    form[style*="display: flex"] {
        width: 100% !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    /* 3. Vloeiende inputs, knoppen en padding */
    .card, .table-container, .card-clean, .settings-content {
        padding: 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Zorg dat mobiele browsers niet onbedoeld inzoomen door font-size 16px te forceren */
    input[type="text"], input[type="date"], input[type="number"], input[type="password"], input[type="email"], select, textarea, input[type="file"] {
        font-size: 16px !important; 
        padding: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .btn, .btn-new, .btn-primary, .btn-export, .btn-outline {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    /* 4. Tabellen scrollbaar maken op mobiel, zodat ze de layout niet breken */
    .table-clean, .data-table, table { 
        display: block !important; 
        width: 100% !important; 
        overflow-x: auto !important; 
        white-space: nowrap !important; 
        -webkit-overflow-scrolling: touch; 
    }

    h1 { font-size: 24px !important; }
}