/* ==========================================================================
   PigeonGrid — Merkstijl
   Pad: /assets/css/pigeongrid.css
   Wordt NA stijl.css geladen zodat deze de kleurvariabelen overschrijft.
   Kleuren en typografie volgens het PigeonGrid-huisstijldocument.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

:root {
    /* Merkkleuren */
    --pg-donkerblauw: #0F2747;
    --pg-oranje:      #F58220;
    --pg-lichtgrijs:  #EFF2F5;
    --pg-wit:         #FFFFFF;

    /* Overschrijft Colomar's variabelen met de PigeonGrid-huisstijl */
    --accent:        var(--pg-oranje);
    --accent-zacht:  #FBBE85; /* lichtere tint oranje, voor tekst op donkere achtergrond */
    --nachtblauw:    #0A1D36; /* invoervelden / diepere vlakken */
    --kaart:         var(--pg-donkerblauw);
    --kaart-rand:    #1E3A5F;
    --tekst:         var(--pg-lichtgrijs);
    --tekst-zacht:   #8FA1B8;
    --wit:           var(--pg-wit);
    --hemelblauw:    #FFFFFF; /* tekstkleur op oranje knoppen */
    --grijs:         #8a9ab5;
    /* --succes en --gevaar blijven staan zoals ze waren (groen/rood) — dat
       zijn statusindicatoren, geen merkkleuren, en horen niet mee te veranderen. */
}

body {
    font-family: 'Inter', system-ui, sans-serif;
    background: var(--pg-donkerblauw);
}

/* Paginakoppen volgen de H2-stijl uit de huisstijl (in-app titels, geen hero) */
.pagina-titel {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 32px;
}

/* Voor marketing/landingspagina's (bijv. hero op index.php) — H1-stijl */
.pg-hero-titel {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 48px;
}

.kaart-titel {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
}

body, p, td, th, input, select, textarea, label {
    font-family: 'Inter', system-ui, sans-serif;
}

/* Nieuwe dashboard-componenten (stat-tegels, topbar) — basisstijl voor het
   donkere thema. Het lichte thema (theme-light.css) overschrijft dit verder. */
.topbar-nieuw { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.topbar-acties { display: flex; align-items: center; gap: 12px; }
.avatar-nieuw {
    width: 38px; height: 38px; border-radius: 50%; background: var(--kaart-rand);
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; color: var(--wit); font-size: 13px; flex-shrink: 0;
}
.stat-blok-nieuw {
    background: var(--kaart); border: 1px solid var(--kaart-rand); border-radius: var(--radius);
    padding: 20px; display: flex; align-items: center; gap: 16px;
}
.stat-icoon {
    width: 48px; height: 48px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; flex-shrink: 0;
}
.stat-icoon.blauw  { background: rgba(59,130,246,0.15); }
.stat-icoon.groen  { background: rgba(45,212,160,0.15); }
.stat-icoon.paars  { background: rgba(168,85,247,0.15); }
.stat-label-nieuw  { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--tekst-zacht); font-weight: 600; }
.stat-waarde-nieuw { font-size: 28px; font-weight: 700; color: var(--wit); line-height: 1.2; }
.stat-sub-nieuw    { font-size: 13px; color: var(--tekst-zacht); }

/* ─── Leaflet-kaarten binnen hun eigen stapel-context houden ───
   Zonder dit "wint" de interne z-index van Leaflet (tot 1000 voor
   zoomknoppen/markers) altijd van de sidebar (z-index 160) op mobiel,
   waardoor de kaart over het uitgeklapte menu heen valt. */
.leaflet-container {
    z-index: 1;
    isolation: isolate;
}

/* Extra zekerheid: de onderste navigatiebalk (mobiel) moet hoe dan ook
   boven elke ingesloten kaart blijven, ook als een kaart-widget ergens
   dieper in de pagina zit en zijn eigen stapel-context meebrengt. */
.bottom-nav {
    z-index: 300 !important;
}