/* ==========================================
   1. DESKTOP BASE LAYOUT & RESET
   ========================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden; /* Voorkomt een scrollbar op laptop/desktop */
    font-family: sans-serif;
}

/* Algemene styling voor de Straatzoeker-knop (Zichtbaar op laptop én gsm) */
/* Algemene styling voor de Straatzoeker-knop op laptop */
/* Algemene styling voor de Straatzoeker-knop op laptop */
.straatzoeker-wrapper {
    grid-column: 2 !important; /* Middenvlak */
    grid-row: 2 !important;    /* Centrale rij */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: fit-content !important; /* 🔥 CRUCIAL: Zorg dat de container NIET het hele scherm claimt! */
    box-sizing: border-box !important;
    margin: 15px auto !important;
    position: relative !important;
    z-index: 10 !important;
    
    /* Extra beveiliging: laat muisklikken door de lege ruimte van de container heen zakken */
    pointer-events: none !important; 
}

/* Zorg dat de knop zelf wél klikbaar blijft */
.straatzoeker-wrapper button {
    pointer-events: auto !important;
}


/* Styling voor de interactieve straatzoeker-box op desktop */
.interactieve-straatzoeker-box {
    grid-column: 1 !important; /* Staat standaard in het linkervlak van 10% */
    grid-row: 2 !important;
    background-color: #fafafa !important;
    border-right: 1px solid #e0e0e0 !important;
    padding: 15px 10px !important;
    overflow-y: auto !important;
}





/* VAST GRID MET VLOEIENDE INTERNE KOLOMTRANSITIE */
.grid-container {
    display: grid;
    grid-template-rows: 10% 80% 10%;    
    grid-template-columns: 10% 80% 10%; /* Basis layout */
    height: 100vh;
    width: 100vw;
    position: relative;
    transition: grid-template-columns 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Zodra .right-sidebar gehoverd wordt, past het grid de kolommen automatisch aan */
.grid-container:has(.right-sidebar:hover) {
    grid-template-columns: 10% 60% 30%;
}

.grid-cell {
    box-sizing: border-box;
}

/* ==========================================
   2. DESKTOP COMPONENT STYLING
   ========================================== */
/* --- HEADER ZONE --- */
.header-cell {
    background-color: #2c3e50; 
    color: white;
    display: flex;
    align-items: center;
}

.logo-left {
    grid-column: 1;
    grid-row: 1;
    justify-content: center;
    overflow: hidden; 
    padding: 5px; 
}

.logo-left img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 10%; 
}

.header-center {
    grid-column: 2;
    grid-row: 1;
    justify-content: space-between;
    padding: 0 10px; 
    overflow: hidden; 
}

.header-center h1 {
    font-size: min(4vw, 20px); 
    color: #ffffff; 
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; 
}

.header-actueel ul {
    list-style: none;
    text-align: right; 
}

.header-actueel a {
    color: #3498db; 
    text-decoration: underline;
    font-size: min(3vw, 14px); 
    display: block; 
}

/* --- MAIN CONTENT ZONE --- */
.main-content {
    grid-column: 2;
    grid-row: 2;
    background-color: #ffffff;
    overflow-y: auto; 
    padding: 15px; 
}

.main-content .mappen-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.btn-opmerking { 
    background: #6b21a8; 
    color: white; 
    border: none; 
    padding: 10px 15px; 
    cursor: pointer; 
    width: 100%; 
    border-radius: 4px; 
    font-weight: bold; 
    font-family: Arial, sans-serif; 
    transition: background 0.2s; 
}
.btn-opmerking:hover { background: #581c87; }

/* --- RECHTER ZIJSBALK --- */
.right-sidebar {
    grid-column: 3;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 5px;
    background-color: #1a1a1a; 
    overflow-y: auto; 
    box-sizing: border-box;
    transition: padding 0.35s ease;
}

.right-sidebar:hover {
    padding: 15px 10px;
}

.right-sidebar a, 
.right-sidebar button, 
.right-sidebar div {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 11px; 
    word-wrap: break-word;     
    text-align: center;
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}

.right-sidebar:hover a,
.right-sidebar:hover button,
.right-sidebar:hover div {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

/* --- POP-UP MODAL --- */
.custom-modal { 
    display: none; 
    position: fixed; 
    z-index: 9999; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.5); 
    font-family: Arial, sans-serif; 
}

.custom-modal-content { 
    background-color: #fefefe; 
    margin: 10% auto; 
    padding: 25px; 
    border: 1px solid #888; 
    width: 90%; 
    max-width: 450px; 
    border-radius: 8px; 
    box-shadow: 0 4px 20px rgba(0,0,0,0.2); 
    position: relative; 
}

.custom-modal-close { 
    color: #aaa; 
    float: right; 
    font-size: 28px; 
    font-weight: bold; 
    cursor: pointer; 
    position: absolute; 
    top: 10px; 
    right: 15px; 
}
.custom-modal-close:hover { color: #000; }

/* --- DESKTOP FOOTER --- */
.footer-center {
    grid-column: 2;
    grid-row: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    width: 100%;
    overflow: hidden;
}

.footer-center input {
    max-width: 30%; 
    font-size: min(3vw, 14px);
    padding: 3px;
}

.footer-center button {
    font-size: min(3vw, 14px);
    padding: 4px 8px;
}

/* ==========================================================================
   2. RESPONSIVE DESIGN VOOR GSM & MOBIEL (Max 900px)
   ========================================================================== */
/* ==========================================================================
   AGRESSIEVE MOBIELE HIDE ENGINE (BOVENAAN HET BESTAND PLAATSEN)
   ========================================================================== */
/* ==========================================================================
   3. RESPONSIVE DESIGN VOOR GSM & MOBIEL (Max 900px)
   ========================================================================== */
/* ==========================================================================
   3. RESPONSIVE DESIGN EN VLAKKEN-ROUTERINGS ENGINE (Max 900px)
   ========================================================================== */
@media screen and (max-width: 900px) {
    /* Toon een scrollbalk en herstel basishoogte */
    html, body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        height: auto !important;
        width: 100% !important;
        background-color: #f5f5f5 !important;
    }

    /* Verander het grid naar een flexibele, verticale stapel */
    .grid-container {
        display: flex !important;
        flex-direction: column !important; 
        height: auto !important;
        width: 100% !important;
        gap: 0 !important; /* Sluit vlakken strak op elkaar aan */
    }

    /* Reset alle actieve grid-cellen naar normale blokken die onder elkaar stapelen */
    .grid-container > *, 
    .grid-cell, 
    .logo-left, 
    .main-content, 
    .right-sidebar {
        grid-column: auto !important;
        grid-row: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        position: static !important;
        float: none !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    /* --- VLAK 1: LOGO (BLIJFT BOVENAAN ACTIEF) --- */
    .logo-left {
        display: flex !important;
        justify-content: center !important;
        background-color: #2c3e50 !important;
        padding: 15px !important;
        order: 1 !important; /* Dwingt dit als eerste blok */
    }

    .logo-left img {
        max-height: 80px !important;
        width: auto !important;
    }

    /* --- VLAK 2 & VLAK 3: TITEL, MENU EN GLOEILAMPEN VERDWIJNEN --- */
    .header-center,
    .header-actueel,
    .header-logo-dynamisch,
    a[href*="get_street_photos.php"],
    .grid-cell[title*="debug-overzicht"],
    div:has(> .header-logo-dynamisch) {
        display: none !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* --- VLAK 6: RECHTER ZIJBAlK (SCHUIFT UIT DIRECT ONDER HET LOGO) --- */
    .right-sidebar {
        background-color: #1a1a1a !important;
        padding: 15px !important;
        display: flex !important;
        flex-direction: column !important; /* Zet de knoppen onder elkaar */
        gap: 8px !important;
        order: 2 !important; /* Dwingt dit direct onder het logo (Vlak 1) */
        border-left: none !important;
        border-bottom: 2px solid #3c3c3c !important;
    }

    /* Zorg dat de knoppen in Vlak 6 op gsm mooi breed en makkelijk klikbaar zijn */
    .right-sidebar a, 
    .right-sidebar button, 
    .right-sidebar div {
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        font-size: 13px !important;
        padding: 10px !important;
        text-align: center !important; /* Mooi gecentreerd op mobiel */
    }

    /* --- VLAK 4: LINKER ZIJSBALK (BESCHIKBAAR ONDER DE KNOPPEN) --- */
    .left-sidebar {
        display: block !important;
        padding: 5px !important;
        order: 3 !important;
    }

    /* --- VLAK 5: MAIN CONTENT / WITTE FORMULIER (BESCHIKBAAR ONDER VLAK 4) --- */
    .main-content {
        padding: 20px 15px !important;
        background-color: #ffffff !important;
        order: 4 !important; /* Komt netjes onder de menu's te staan */
    }

    /* --- FOOTER VLAKKEN (Vlak 7, 8 en 9) --- */
    .footer-vlak-7, 
    .footer-vlak-8, 
    .footer-vlak-9 {
        padding: 15px !important;
        background-color: #252526 !important;
        color: #fff !important;
        text-align: center !important;
        border-top: 1px solid #3c3c3c !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        order: 5 !important;
    }
	
    /* Mobiele positionering voor de Straatzoeker knop */
    .straatzoeker-wrapper {
        grid-column: auto !important; /* Heft het desktop-grid op */
        grid-row: auto !important;
        display: flex !important;
        order: 3 !important; /* Zet hem op gsm netjes tussen Vlak 6 and Vlak 5 */
        margin: 20px auto !important;
    }
	
	/* Zorg dat de interactieve straatzoeker op gsm een breed, overzichtelijk blok wordt */
    .interactieve-straatzoeker-box {
        display: block !important;
        width: 90% !important;
        max-width: 400px !important;
        margin: 15px auto !important;
        padding: 15px !important;
        background-color: #ffffff !important;
        border: 1px solid #dcdcdc !important;
        border-radius: 8px !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important;
        
        /* Dwing dit blok om op gsm direct onder het menu (order 2) te verschijnen */
        order: 3 !important; 
    }
	/* --- EXTRA FIX VOOR DE INCLUDE ELEMENTEN OP GSM --- */
	.left-sidebar .street-search-container {
		display: block !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}

	/* Herstel de flexbox voor de vlaggenrijen zodat vlag en tekst naast elkaar staan */
	.left-sidebar .vlag-keuze-rij {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
	}

	/* Zorg dat de tussendiv met de actieve vlag correct horizontaal uitlijnt */
	#tussen-div-vlag {
		display: none; /* Wordt via JS naar flex omgezet */
		align-items: center !important;
		flex-direction: row !important;
	}

}