/* =====================================================
   Provincie Limburg – Huisstijl CSS
   Gebaseerd op huisstijlhandboek feb 2025
   ===================================================== */

/* =====================
   KLEURVARIABELEN
   ===================== */
:root {
    --hoofdkleur: #106ac7; /* Limburg blauw */
    --navkleur: #083e6d; /* Donkerblauw */
    --hoverkleur: #0d5aa0; /* Hover blauw */
    --contrastkleur: #ffcd05; /* Limburg geel */
    --rood: #e12e29;
    --lichtblauw: #c0e8ff;
    --lichtgeel: #fff1af;
    --lichtgrijs: #e7e1d9;
}

/* =====================
   TYPOGRAFIE
   ===================== */
body {
    font-family: "Sofia Pro", "Segoe UI", Arial, sans-serif;
    background-color: #f9f9f9;
    color: #000;
}

h1, h2, h3, h4 {
    font-weight: 600;
}

/* =====================
   NAVBAR & MENU
   ===================== */
.navbar {
    background-color: var(--navkleur);
}

    /* Logo altijd op wit vlak */
    .navbar .logo,
    .navbar img.logo {
        background-color: #ffffff;
        padding: 6px 10px;
        border-radius: 4px;
    }

/* Menu knoppen */
.menu .knop {
    background-color: var(--hoofdkleur);
    border: 2px solid #ffffff;
    color: #ffffff;
}

    .menu .knop:hover {
        background-color: var(--hoverkleur);
    }

/* Dropdown */
.dropdown-content {
    background-color: var(--hoofdkleur);
}

    .dropdown-content a:hover {
        background-color: var(--hoverkleur);
    }

/* =====================
   HEADERS & BLOKKEN
   ===================== */
.widget h2,
.headerblok {
    background-color: var(--hoofdkleur);
    color: #ffffff;
}

/* Content blokken */
.blokcontent,
.filterin,
.blokfiles,
.blokfotos {
    border-left: 1px solid var(--hoofdkleur);
    border-right: 1px solid var(--hoofdkleur);
    border-bottom: 1px solid var(--hoofdkleur);
}

/* =====================
   BUTTONS & ACTIES
   ===================== */
.btn-save,
.toggle-btn.active {
    background-color: var(--hoofdkleur);
    color: #ffffff;
}

    .btn-save:hover {
        background-color: var(--hoverkleur);
    }

/* Toggle uit */
.toggle-btn {
    background-color: #cccccc;
    color: #ffffff;
}

/* =====================
   TABELLEN
   ===================== */
.data-table thead th {
    background-color: var(--hoofdkleur);
    color: #ffffff;
}

.data-table tbody tr:nth-child(even) {
    background-color: var(--lichtgrijs);
}

/* Actie iconen */
.data-table tbody td i:hover {
    background-color: var(--lichtblauw);
}

/* =====================
   FORMULIEREN
   ===================== */
.veldcontrol {
    border: 1px solid var(--navkleur);
}

    .veldcontrol input,
    .veldcontrol textarea {
        background-color: #ffffff;
    }

/* Verplicht veld */
.verplicht {
    border: 2px solid var(--rood);
}

/* Readonly */
.readonly,
.readonlylang,
.ro {
    background-color: #f0f0f0;
    color: #808080;
    border-color: #000000;
}

/* =====================
   TABS
   ===================== */
.tab {
    background-color: var(--lichtgrijs);
}

.active-tab {
    background-color: #ffffff;
    border-bottom: 2px solid #ffffff;
}

/* =====================
   POPUPS & OVERLAYS
   ===================== */
.layer {
    background-color: rgba(0, 0, 0, 0.6);
}

.pop,
.pop2 {
    background-color: #ffffff;
}

/* =====================
   BADGES & COUNTERS
   ===================== */
.log-count {
    background-color: var(--rood);
}

.log-count-green {
    background-color: #2e7d32;
}

/* =====================
   MOBIEL MENU
   ===================== */
.mobile-menu-content {
    background-color: var(--hoofdkleur);
}

    .mobile-menu-content a:hover {
        background-color: var(--hoverkleur);
    }

.mobile-submenu {
    background-color: var(--navkleur);
}

/* =====================
   ACCENTEN
   ===================== */
.knopexport {
    color: var(--hoofdkleur);
}

.history-list {
    background-color: var(--lichtgrijs);
}

/* =====================
   EINDE LIMBURG CSS
   ===================== */



.datumheaderblok{
    display:none;
}


/* standaard alles uit */
#divBlokkenC .idheaderblok {
    display: none;
}

/* alleen in het EERSTE data-id blok tonen */
#divBlokkenC > div:first-of-type .idheaderblok {
    display: block;
}


.headerblok .li{
    font-size:20px;
}


textarea{
    font-size:16px;
}


/* In notsblok: verberg alle li's */
.headerblok.notsblok .li {
    display: none;
}

.headerblok.notsblok .re {
    display: none;
}

.headerblok.notsblok .re4 {
    display: none;
}

.headerblok .re55 {
    display: none;
}

.headerblok.notsblok .re55 {
    display: block;
}





    /* In notsblok: toon alleen de EERSTE li */
    .headerblok.notsblok .li:first-of-type {
        display: block;
    }