/* ==========================================================================
   PigeonGrid — Licht thema (Linear/Vercel/Stripe-stijl)
   Pad: /assets/css/theme-light.css

   Wordt ALLEEN geladen als het lichte thema actief is (zie includes/thema.php).
   Dit bestand herstijlt de bestaande, gedeelde componenten (kaarten, knoppen,
   sidebar, tabellen) volledig — het is geen kleine kleur-override zoals
   pigeongrid.css, maar een complete vervanging voor het donkere thema.
   ========================================================================== */

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

:root {
    /* Basiskleuren */
    --lt-achtergrond: #F5F7FB;
    --lt-sidebar:     #F8FAFC;
    --lt-kaart:       #FFFFFF;
    --lt-rand:        #E5E7EB;
    --lt-tekst:       #1E293B;
    --lt-tekst-zacht: #64748B;

    /* Accenten */
    --lt-blauw:        #3B82F6;
    --lt-blauw-hover:  #2563EB;
    --lt-blauw-active: #1D4ED8;
    --lt-blauw-zacht:  #E8F1FF;
    --lt-oranje:       #F59E0B;
    --lt-oranje-hover: #D97706;
    --lt-groen:        #22C55E;
    --lt-groen-zacht:  #DCFCE7;
    --lt-rood:         #EF4444;
    --lt-rood-zacht:   #FEE2E2;

    /* Hergebruik van de bestaande variabelenamen — dit is de kern van
       waardoor bestaande pagina's automatisch meeveranderen */
    --accent:       var(--lt-blauw);
    --accent-zacht: var(--lt-blauw-hover);
    --nachtblauw:   var(--lt-achtergrond);
    --kaart:        var(--lt-kaart);
    --kaart-rand:   var(--lt-rand);
    --tekst:        var(--lt-tekst);
    --tekst-zacht:  var(--lt-tekst-zacht);
    --wit:          var(--lt-tekst);
    --hemelblauw:   #FFFFFF;
    --grijs:        var(--lt-tekst-zacht);
    --succes:       var(--lt-groen);
    --gevaar:       var(--lt-rood);
    --radius:       16px;
}

body {
    font-family: 'Inter', system-ui, sans-serif;
    background: var(--lt-achtergrond) !important;
    color: var(--lt-tekst);
}

/* Sidebar */
.sidebar {
    background: var(--lt-sidebar) !important;
    border-right: 1px solid var(--lt-rand);
}
.sidebar-logo, .sidebar-footer { color: var(--lt-tekst); }
.nav-sectie { color: var(--lt-tekst-zacht) !important; }
.nav-link {
    color: var(--lt-tekst-zacht) !important;
    border-radius: 8px;
}
.nav-link:hover { background: var(--lt-blauw-zacht) !important; color: var(--lt-blauw) !important; }
.nav-link.actief {
    background: var(--lt-blauw-zacht) !important;
    color: var(--lt-blauw-active) !important;
    font-weight: 600;
}

/* Kaarten */
.kaart {
    background: var(--lt-kaart) !important;
    border: 1px solid #E8EDF5 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 18px rgba(15,23,42,.06);
}
.kaart-titel { color: var(--lt-tekst) !important; font-weight: 600; }
.pagina-titel { color: var(--lt-tekst) !important; }
.pagina-sub { color: var(--lt-tekst-zacht) !important; }

/* Knoppen */
.btn-primair {
    background: var(--lt-blauw) !important;
    color: #FFFFFF !important;
    border-radius: 12px !important;
    border: none;
    font-weight: 500;
}
.btn-primair:hover { background: var(--lt-blauw-hover) !important; }
.btn-secundair {
    background: #FFFFFF !important;
    border: 1px solid var(--lt-rand) !important;
    color: #334155 !important;
    border-radius: 12px !important;
}
.btn-secundair:hover { background: #F8FAFC !important; }
.btn-gevaar {
    background: var(--lt-rood-zacht) !important;
    color: var(--lt-rood) !important;
    border-radius: 12px !important;
    border: none;
}

/* Statusbadges (online/offline/actief) */
.badge-actief, .badge-ok, .duif-ring.eigen, .online {
    background: var(--lt-groen-zacht) !important;
    color: #16803D !important;
}
.badge-inactief, .badge-wacht {
    background: #F1F5F9 !important;
    color: var(--lt-tekst-zacht) !important;
}
.offline, .badge-mislukt, .badge-geannuleerd {
    background: var(--lt-rood-zacht) !important;
    color: var(--lt-rood) !important;
}

/* Tabellen */
table th { color: var(--lt-tekst-zacht) !important; border-bottom: 1px solid var(--lt-rand); }
table td { border-bottom: 1px solid #F1F5F9 !important; color: var(--lt-tekst); }

/* Formuliervelden */
input, select, textarea {
    background: #FFFFFF !important;
    border: 1px solid var(--lt-rand) !important;
    color: var(--lt-tekst) !important;
    border-radius: 10px !important;
}
input:focus, select:focus, textarea:focus { border-color: var(--lt-blauw) !important; }
label { color: var(--lt-tekst-zacht) !important; }

/* Statistiek-tegels met gekleurd icoon-vak (zoals in het dashboard-ontwerp) */
.stat-blok-nieuw {
    background: #FFFFFF; border: 1px solid #E8EDF5; border-radius: 16px;
    box-shadow: 0 4px 18px rgba(15,23,42,.06);
    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: var(--lt-blauw-zacht); }
.stat-icoon.groen  { background: var(--lt-groen-zacht); }
.stat-icoon.paars  { background: #F1E8FE; }
.stat-label-nieuw  { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--lt-tekst-zacht); font-weight: 600; }
.stat-waarde-nieuw { font-size: 28px; font-weight: 700; color: var(--lt-tekst); line-height: 1.2; }
.stat-sub-nieuw    { font-size: 13px; color: var(--lt-tekst-zacht); }

/* Topbar (welkom + acties rechtsboven) */
.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: #E2E8F0;
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; color: var(--lt-tekst); font-size: 13px;
}