/* ═══════════════════════════════════════════════════════
   BP_DARKMODE.CSS — Burgerplatform
   Sitebreed geladen via master template (bp_new.htm)
   Light mode tokens + dark mode overrides
   Accent light: #0d5c8a / dark: #3aa0e0
═══════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════
   TOKENS — light mode basis
══════════════════════════════════════════════════════ */
:root {
    --accent:        #0d5c8a;
    --accent-dk:     #094a70;
    --accent-lt:     #e8f2f9;
    --bg:            #f5f7fa;
    --surface:       #ffffff;
    --ink:           #0f1923;
    --ink-mid:       #3a4553;
    --ink-soft:      #6b7988;
    --border-color:  #dde3ea;
    --signal:        #b85c00;
    --bg-main:       #ffffff;
    --text-main:     #1a1a1a;
    --card-bg:       #f8f9fa;
}

/* ══════════════════════════════════════════════════════
   TOKENS — dark mode overrides
══════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
    :root {
        --bg:            #0a0a0a;
        --surface:       #141414;
        --ink:           #f0f2f4;
        --ink-mid:       #a8b4c0;
        --ink-soft:      #6b7988;
        --accent:        #3aa0e0;
        --accent-dk:     #1a88cc;
        --accent-lt:     #0d2a3d;
        --border-color:  #2a2a2a;
        --signal:        #ff8c1a;
        --bg-main:       #0a0a0a;
        --text-main:     #f0f2f4;
        --card-bg:       #141414;
        /* Bootstrap variabelen */
        --bs-body-bg:       #0a0a0a;
        --bs-body-color:    #f0f2f4;
        --bs-light-rgb:     10, 10, 10;
        --bs-white-rgb:     20, 20, 20;
        --bs-secondary-rgb: 240, 242, 244;
        --bs-border-color:  #2a2a2a;
    }
}

/* ══════════════════════════════════════════════════════
   BASE — sitebreed, beide modes
══════════════════════════════════════════════════════ */

body {
    font-family: 'DM Sans', system-ui, sans-serif;
    background-color: var(--bg);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ── Topbar ─────────────────────────────────────────── */
.topbar {
    background-color: var(--accent);
    color: #ffffff;
    font-size: 0.75rem;
    padding: 5px 0;
}

/* ── Knoppen ────────────────────────────────────────── */
.btn-primary {
    background-color: var(--accent);
    border: none;
    padding: 10px 24px;
    font-weight: 600;
}

.btn-primary:hover {
    background-color: var(--accent-dk);
}

.btn-outline-custom {
    border: 1.5px solid var(--border-color);
    color: var(--accent);
    font-weight: 600;
}

.nav-link.active {
    color: var(--accent) !important;
}

/* ── Kaarten ────────────────────────────────────────── */
.pillar-card {
    border-left: 1px solid var(--border-color);
    padding-left: 20px;
}

.rekening-card {
    background: var(--surface);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
}

.signup-card {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* ── Footer — beide modes ───────────────────────────── */
footer {
    padding: 80px 0 40px;
    background: #094a70;
    color: #c8dce8;
}

footer h4 {
    color: #ffffff;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

footer h6 {
    color: #ffffff;
    font-weight: 700;
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

footer a {
    color: #c8dce8;
    text-decoration: none;
    transition: color 0.2s;
}

footer a:hover {
    color: #ffffff;
}

footer p {
    color: #c8dce8;
}

footer .border-bottom,
footer .border-secondary {
    border-color: #1a5070 !important;
}

/* ══════════════════════════════════════════════════════
   DARK MODE STIJLEN
══════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {

    /* ── Body en structuur ──────────────────────────── */
    body,
    header,
    section,
    main,
    footer.bg-dark,
    .footer {
        background-color: var(--bg) !important;
        color: var(--ink);
    }

    /* ── Footer ─────────────────────────────────────── */
    footer {
        background: #0a0a0a;
        color: #8fa8b8;
        border-top: 1px solid #1e1e1e;
    }

    footer h4,
    footer h6 {
        color: #ffffff;
    }

    footer a {
        color: #8fa8b8;
    }

    footer a:hover {
        color: #ffffff;
    }

    footer p {
        color: #8fa8b8;
    }

    footer .border-bottom,
    footer .border-secondary {
        border-color: #1e1e1e !important;
    }

    /* ── Bootstrap cards ────────────────────────────── */
    .card,
    .voice-card,
    .voice-section-container,
    .voice-card.mb-4 {
        background-color: #141414 !important;
        color: var(--ink) !important;
        border-color: var(--border-color) !important;
        box-shadow: 0 0 10px rgba(0,0,0,0.4);
    }

    /* ── Tabellen ───────────────────────────────────── */
    td, th {
        color: var(--ink);
        border-color: var(--border-color);
    }

    /* ── List group ─────────────────────────────────── */
    .list-group-item {
        background-color: #141414 !important;
        color: var(--ink-mid) !important;
        border-color: var(--border-color) !important;
    }

    /* ── Navigatie ──────────────────────────────────── */
    .navbar-nav a.nav-link,
    .navbar-nav a.dropdown-item {
        background-color: #141414;
        color: var(--ink-mid) !important;
    }

    .nav-navbar a.nav-link:hover,
    .nav-navbar a.dropdown-item:hover,
    .nav-navbar .nav-item.activelink > a {
        background-color: #1e1e1e;
        color: var(--ink) !important;
    }

    /* ── Dropdown ───────────────────────────────────── */
    .dropdown-menu {
        background-color: #141414;
        border-color: var(--border-color);
    }

    .dropdown-item {
        color: var(--ink-mid);
    }

    /* ── Hamburger ──────────────────────────────────── */
    .navbar-toggler {
        border-color: var(--border-color) !important;
    }

    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23f0f2f4' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }

    /* ── Dropdown pijltjes ──────────────────────────── */
    li.nav-item.dropdown > a::after,
    li.nav-item.dropdown:hover > a::after {
        border-top-color: var(--ink-mid);
    }

    /* ── Links ──────────────────────────────────────── */
    a, a:any-link {
        color: var(--accent);
    }

    /* ── Titels ─────────────────────────────────────── */
    h1, h2, h3, h4, h5, h6 {
        color: var(--ink);
    }

    /* ── Bootstrap achtergrond overrides ────────────── */
    .bg-white,
    .bg-light {
        background-color: #141414 !important;
    }

    /* ── Formulieren ────────────────────────────────── */
    input, textarea, select {
        background-color: #1e1e1e !important;
        color: var(--ink) !important;
        border-color: var(--border-color) !important;
    }

    /* ── Utilities ──────────────────────────────────── */
    .text-white  { color: #ffffff !important; }
    .text-muted  { color: var(--ink-soft) !important; }
    .border      { border-color: var(--border-color) !important; }
}