/* ═══════════════════════════════════════════
   DARKMODE
═══════════════════════════════════════════ */

/* Desktop: Home alleen via mobiel menu */
@media (min-width: 701px) {
    .cc-topnav__items { gap: 6px; }
}

/* Darkmode knop */
.cc-darkmode-btn {
    appearance: none;
    background: #ffffff;
    border: 1px solid #d7ddd8;
    border-radius: 10px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--cc-tekst);
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s, transform .15s;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
    flex-shrink: 0;
    position: relative;
    font-size: 18px;
    line-height: 1;
}
.cc-darkmode-btn:hover {
    background: #f6faf8;
    border-color: #b9c9bf;
    color: var(--cc-groen);
    box-shadow: 0 4px 14px rgba(15, 23, 42, .08);
    transform: translateY(-1px);
}
.cc-darkmode-btn:focus-visible {
    outline: 3px solid rgba(46, 113, 81, .18);
    outline-offset: 2px;
}
:root.cc-dark .cc-darkmode-btn {
    background: #2c2c2c;
    border-color: #4a4a4a;
    color: #f3efe7;
    box-shadow: 0 1px 2px rgba(0,0,0,.28);
}
:root.cc-dark .cc-darkmode-btn:hover {
    background: #33443b;
    border-color: #4f8f6d;
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(0,0,0,.3);
}

/* Standaard: toon maan (licht modus), verberg zon */
.cc-darkmode-icon--zon  { display: none; }
.cc-darkmode-icon--maan { display: inline-flex; }

/* In dark mode: toon zon, verberg maan */
:root.cc-dark .cc-darkmode-icon--zon  { display: inline-flex; }
:root.cc-dark .cc-darkmode-icon--maan { display: none; }

/* ── Dark mode variabelen ── */
:root.cc-dark {
    --cc-bg:      #1a1a1a;
    --cc-wit:     #242424;
    --cc-tekst:   #e8e4dc;
    --cc-grijs:   #8a8a8a;
    --cc-border:  #333333;
    --cc-groen:   #3a8a63;
    --cc-groen-pale: #1a3328;
    --cc-schaduw: 0 2px 12px rgba(0,0,0,.4);
    --cc-schaduw-lg: 0 8px 32px rgba(0,0,0,.5);
}

/* Specifieke dark mode overrides */
:root.cc-dark .cc-topnav {
    background: var(--cc-wit);
    border-bottom-color: var(--cc-border);
}
:root.cc-dark .cc-kaart {
    background: var(--cc-wit);
    border-color: var(--cc-border);
}
:root.cc-dark .cc-kaart__foto-placeholder {
    background: #333;
}
:root.cc-dark .cc-popup {
    background: var(--cc-wit);
}
:root.cc-dark .cc-popup__foto-overlay {
    background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.85));
}
:root.cc-dark .cc-topnav__dropdown {
    background: #2c2c2c;
    border-color: var(--cc-border);
    box-shadow: 0 8px 30px rgba(0,0,0,.4);
}
:root.cc-dark .cc-dropdown__item:hover { background: #383838; }
:root.cc-dark .cc-stat-card,
:root.cc-dark .cc-form-sectie,
:root.cc-dark .cc-vr-rij,
:root.cc-dark .cc-trip-rij,
:root.cc-dark .cc-trips-stat,
:root.cc-dark .cc-modal {
    background: var(--cc-wit);
    border-color: var(--cc-border);
}
:root.cc-dark .cc-input,
:root.cc-dark .cc-zoekbalk__input,
:root.cc-dark .cc-zoekbalk__select {
    background: #2c2c2c;
    border-color: var(--cc-border);
    color: var(--cc-tekst);
}
:root.cc-dark .cc-mob-menu {
    background: #242424;
    border-color: var(--cc-border);
}
:root.cc-dark .cc-mob-menu a { color: var(--cc-tekst) !important; }
:root.cc-dark .cc-mob-menu a:hover { background: #333; }
:root.cc-dark .cc-trip-camping-rij { background: #2c2c2c; }
:root.cc-dark .cc-weer-dag { background: #2c2c2c; }
:root.cc-dark .cc-leaflet-kaart { border-color: var(--cc-border); }
:root.cc-dark body { background: var(--cc-bg); }

/* Dark mode – checklist */
:root.cc-dark .cc-checklist-card {
    background: var(--cc-wit);
    border-color: var(--cc-border);
}
:root.cc-dark .cc-checklist-item {
    background: var(--cc-wit);
    border-color: var(--cc-border);
}
:root.cc-dark .cc-checklist-item:hover {
    border-color: #4a5a4a;
    box-shadow: 0 10px 22px rgba(0,0,0,.25);
}
:root.cc-dark .cc-checklist-item.is-checked {
    background: #1a2e22;
    border-color: #2a5a3a;
}
:root.cc-dark .cc-checklist-item__box {
    background: #2c2c2c;
    border-color: #4a4a4a;
}
:root.cc-dark .cc-checklist-item--edit.is-enabled {
    background: #1a2e22;
    border-color: #2a5a3a;
}
:root.cc-dark .cc-checklist-stat {
    background: var(--cc-wit);
    border-color: var(--cc-border);
}
:root.cc-dark .cc-checklist-progress__bar {
    background: #333;
}
:root.cc-dark .cc-checklist-scope {
    background: var(--cc-wit);
    border-color: var(--cc-border);
}
:root.cc-dark .cc-checklist-scope__select {
    background: #2c2c2c;
    border-color: var(--cc-border);
    color: var(--cc-tekst);
}
:root.cc-dark .cc-checklist-btn--ghost {
    border-color: var(--cc-border);
    color: var(--cc-tekst);
}
:root.cc-dark .cc-checklist-btn--ghost:hover {
    background: #2c2c2c;
}
:root.cc-dark .cc-checklist-switch__track {
    background: #3a3a3a;
}

/* Dark mode – trips checklist banner */
:root.cc-dark .cc-trips-checklist-banner {
    background: var(--cc-wit);
    border-color: var(--cc-border);
    color: var(--cc-tekst);
}
:root.cc-dark .cc-trips-checklist-banner:hover {
    background: #2c2c2c;
}
:root.cc-dark .cc-trips-checklist-banner__bar {
    background: #3a3a3a;
}