/* Core in het donker (Mo 12/11/2026: "van darkmode ineens in zo'n fel scherm, dat mag niet").
   Enkel actief onder html[data-df-thema="donker"]; de hook df_core_donker.php zet dat
   attribuut voor de eerste tekening. Zonder attribuut verandert er niets aan Core.
   Kleuren zoals de site in donker (globals.css, MERK.md nachtblauw #0c1838 naar #142a63):
   achtergrond #0c1838, kaart #142a63, tekst #e6edf7 (14,9:1), gedempt #9fb0c9 (8,1:1),
   link #a9c1ff (9,6:1 op de achtergrond, 7,4:1 op de kaart), knop oranje #E68404 met
   nachtblauwe tekst (6,4:1). Geen sjabloon gewijzigd: dit bestand en de hook zijn alles. */

html[data-df-thema="donker"] {
  color-scheme: dark;
  --df-n-bg: #0c1838;
  --df-n-kaart: #142a63;
  --df-n-vlak: #102257;
  --df-n-veld: #0f1f4d;
  --df-n-tekst: #e6edf7;
  --df-n-gedempt: #9fb0c9;
  --df-n-lijn: rgba(255, 255, 255, 0.12);
  --df-n-link: #a9c1ff;
  --df-n-oranje: #E68404;

  /* Lagom-variabelen: grijzen en tekst draaien om. */
  --body-bg: var(--df-n-bg);
  --gray-darker: var(--df-n-tekst);
  --gray-base: #c3cfe0;
  --gray-lighter: var(--df-n-gedempt);
  --gray-lighter-2: #7f92b0;
  --gray-lighter-3: rgba(255, 255, 255, 0.18);
  --gray-lighter-4: var(--df-n-lijn);
  --gray-faded: var(--df-n-vlak);
  --gray-icons: var(--df-n-gedempt);
  --gray-icons-hover: var(--df-n-oranje);
  --gray-gradient-start: var(--df-n-kaart);
  --gray-gradient-end: var(--df-n-vlak);
  --text-heading-color: var(--df-n-tekst);
  --text-body-color: #c3cfe0;
  --text-lighter-color: var(--df-n-gedempt);
  --text-faded-color: #7f92b0;
  --text-primary-color: var(--df-n-link);
  --link-color: var(--df-n-link);
  --link-hover-color: var(--df-n-oranje);
  --brand-primary-lighter-2: rgba(169, 193, 255, 0.22);
  --brand-primary-lighter-3: rgba(169, 193, 255, 0.14);
  --brand-primary-lighter-4: rgba(169, 193, 255, 0.08);
  --ui-block-bg: var(--df-n-kaart);
  --ui-block-bg-form: var(--df-n-vlak);
  --ui-block-header-bg: var(--df-n-vlak);
  --ui-block-border: 1px solid var(--df-n-lijn);
  --ui-block-divider-color: var(--df-n-lijn);
  --ui-block-overlay-bg: rgba(12, 24, 56, 0.87);
  --ui-block-overlay-bg-2: var(--df-n-kaart);
  --ui-nav-link-color: var(--df-n-tekst);
  --ui-nav-link-hover-color: var(--df-n-oranje);
  --ui-nav-link-active-color: var(--df-n-oranje);
  --ui-nav-secondary-link-color: #c3cfe0;
  --ui-nav-secondary-link-hover-color: var(--df-n-oranje);
  --ui-nav-secondary-link-active-color: var(--df-n-oranje);
  --input-bg: var(--df-n-veld);
  --input-hover-bg: var(--df-n-veld);
  --input-focus-bg: var(--df-n-veld);
  --input-disabled-bg: var(--df-n-vlak);
  --input-border-color: rgba(255, 255, 255, 0.22);
  --input-hover-border-color: rgba(255, 255, 255, 0.36);
  --input-focus-border-color: var(--df-n-oranje);
  --input-color: var(--df-n-tekst);
  --input-hover-color: var(--df-n-tekst);
  --input-focus-color: var(--df-n-tekst);
  --input-label-color: #c3cfe0;
  --input-group-addon-bg: var(--df-n-vlak);
  --dropdown-bg: var(--df-n-kaart);
  --popover-bg: var(--df-n-kaart);
  --popover-body-color: var(--df-n-tekst);
  --tooltip-bg: var(--df-n-kaart);
  --tooltip-color: var(--df-n-tekst);
  --table-bg-accent: rgba(255, 255, 255, 0.03);
  --btn-default-color: var(--df-n-tekst);
  --btn-default-hover-color: var(--df-n-tekst);
  --btn-default-hover-bg: rgba(255, 255, 255, 0.08);
  --btn-primary-faded-color: var(--df-n-link);
  --btn-primary-faded-hover-color: var(--df-n-link);
  --primary-block-input-bg: var(--df-n-veld);
  --primary-block-input-border: rgba(255, 255, 255, 0.22);
  --svg-illustration-color-7: var(--df-n-kaart);
  --box-shadow-sm: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 2px 16px rgba(0, 0, 0, 0.35);
  --box-shadow-base: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 2px 24px rgba(0, 0, 0, 0.35);
  --box-shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 8px 32px rgba(0, 0, 0, 0.45);
  --box-shadow-xlg: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 16px 40px rgba(0, 0, 0, 0.55);
  background-color: var(--df-n-bg);
}

/* df-brand.css zet crème en wit hard, deels met !important: hier hetzelfde terug, in het donker. */
html[data-df-thema="donker"] body,
html[data-df-thema="donker"] body.lagom,
html[data-df-thema="donker"] body.lagom-not-portal,
html[data-df-thema="donker"] body.page-login,
html[data-df-thema="donker"] .main-body,
html[data-df-thema="donker"] .app-main {
  background-color: var(--df-n-bg);
  color: #c3cfe0;
}

/* Kop */
html[data-df-thema="donker"] .app-nav,
html[data-df-thema="donker"] .app-nav-header,
html[data-df-thema="donker"] .app-nav-menu,
html[data-df-thema="donker"] .df-nav-menu {
  background: var(--df-n-bg) !important;
  box-shadow: none !important;
}
html[data-df-thema="donker"] .app-nav { border-bottom: 1px solid var(--df-n-lijn) !important; }
html[data-df-thema="donker"] .df-nav-menu { border-bottom: 1px solid var(--df-n-lijn) !important; }
html[data-df-thema="donker"] .df-menu-primary > li > a,
html[data-df-thema="donker"] .df-menu-primary > li > .nav-link,
html[data-df-thema="donker"] .menu-primary > li > a,
html[data-df-thema="donker"] .top-nav > li > a,
html[data-df-thema="donker"] .top-nav .dropdown-toggle {
  color: var(--df-n-tekst) !important;
}
html[data-df-thema="donker"] .df-menu-primary > li > a:hover,
html[data-df-thema="donker"] .df-menu-primary > li > .nav-link:hover,
html[data-df-thema="donker"] .menu-primary > li > a:hover,
html[data-df-thema="donker"] .df-menu-primary > li.active > a,
html[data-df-thema="donker"] .top-nav > li > a:hover,
html[data-df-thema="donker"] .top-nav .dropdown-toggle:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--df-n-oranje) !important;
}
html[data-df-thema="donker"] .app-nav-toggle .icon-bar,
html[data-df-thema="donker"] .navbar-toggle .icon-bar { background-color: var(--df-n-tekst) !important; }

/* Het logo blijft zoals het is (MERK.md: nooit herkleuren); een crème vlak houdt het leesbaar. */
html[data-df-thema="donker"] .app-nav .logo img,
html[data-df-thema="donker"] .app-nav-header .logo img,
html[data-df-thema="donker"] .df-footer-brand img {
  background: #fff8ee;
  border-radius: 10px;
  padding: 3px 8px;
  box-sizing: border-box;
}

/* Koppen, tekst, links */
html[data-df-thema="donker"] h1,
html[data-df-thema="donker"] h2,
html[data-df-thema="donker"] h3,
html[data-df-thema="donker"] h4,
html[data-df-thema="donker"] h5,
html[data-df-thema="donker"] h6,
html[data-df-thema="donker"] .main-header-title,
html[data-df-thema="donker"] .login-title,
html[data-df-thema="donker"] .section-title,
html[data-df-thema="donker"] .panel-title,
html[data-df-thema="donker"] .message-title {
  color: var(--df-n-tekst);
}
html[data-df-thema="donker"] a { color: var(--df-n-link); }
html[data-df-thema="donker"] a:hover,
html[data-df-thema="donker"] a:focus { color: var(--df-n-oranje); }
html[data-df-thema="donker"] .text-muted,
html[data-df-thema="donker"] .help-block,
html[data-df-thema="donker"] small { color: var(--df-n-gedempt); }

/* Kaarten, panelen, mandje en overzicht */
html[data-df-thema="donker"] .card,
html[data-df-thema="donker"] .panel,
html[data-df-thema="donker"] .rs-card,
html[data-df-thema="donker"] .login-body,
html[data-df-thema="donker"] .login-wrapper,
html[data-df-thema="donker"] .panel-summary,
html[data-df-thema="donker"] .order-summary,
html[data-df-thema="donker"] .modal-content,
html[data-df-thema="donker"] .dropdown-menu,
html[data-df-thema="donker"] .list-group-item,
html[data-df-thema="donker"] .well {
  background: var(--df-n-kaart);
  border-color: var(--df-n-lijn);
  color: #c3cfe0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 10px 30px rgba(0, 0, 0, 0.35);
}
html[data-df-thema="donker"] .panel-heading,
html[data-df-thema="donker"] .panel-footer,
html[data-df-thema="donker"] .card-header,
html[data-df-thema="donker"] .card-footer,
html[data-df-thema="donker"] .modal-header,
html[data-df-thema="donker"] .modal-footer {
  background: var(--df-n-vlak);
  border-color: var(--df-n-lijn);
  color: var(--df-n-tekst);
}
html[data-df-thema="donker"] .summary-list,
html[data-df-thema="donker"] .summary-list .list-item,
html[data-df-thema="donker"] .summary-content,
html[data-df-thema="donker"] .summary-actions,
html[data-df-thema="donker"] .order-summary-mob {
  background: transparent;
  border-color: var(--df-n-lijn);
  color: #c3cfe0;
}
html[data-df-thema="donker"] .order-summary-mob { background: var(--df-n-kaart); }
html[data-df-thema="donker"] .item-name,
html[data-df-thema="donker"] .item-value,
html[data-df-thema="donker"] .price,
html[data-df-thema="donker"] .price-amount,
html[data-df-thema="donker"] .price-total,
html[data-df-thema="donker"] .panel-summary .content { color: var(--df-n-tekst); }
html[data-df-thema="donker"] .message-image svg,
html[data-df-thema="donker"] .message-image img { opacity: 0.85; }

/* Tabellen */
html[data-df-thema="donker"] .table,
html[data-df-thema="donker"] table { color: #c3cfe0; }
html[data-df-thema="donker"] .table > thead > tr > th,
html[data-df-thema="donker"] .table > tbody > tr > td,
html[data-df-thema="donker"] .table > tfoot > tr > td,
html[data-df-thema="donker"] .table th,
html[data-df-thema="donker"] .table td {
  border-color: var(--df-n-lijn);
  color: inherit;
}
html[data-df-thema="donker"] .table > tbody > tr:hover > td { background: rgba(255, 255, 255, 0.04); }
html[data-df-thema="donker"] .table-container,
html[data-df-thema="donker"] .dataTables_wrapper { background: var(--df-n-kaart); }

/* Formulieren en invoervelden */
html[data-df-thema="donker"] .form-control,
html[data-df-thema="donker"] .input-group .form-control,
html[data-df-thema="donker"] select.form-control,
html[data-df-thema="donker"] textarea,
html[data-df-thema="donker"] input[type="text"],
html[data-df-thema="donker"] input[type="email"],
html[data-df-thema="donker"] input[type="password"],
html[data-df-thema="donker"] input[type="tel"],
html[data-df-thema="donker"] input[type="number"],
html[data-df-thema="donker"] select {
  background-color: var(--df-n-veld);
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--df-n-tekst);
}
html[data-df-thema="donker"] .form-control::placeholder,
html[data-df-thema="donker"] input::placeholder,
html[data-df-thema="donker"] textarea::placeholder { color: #8ea0bd; }
html[data-df-thema="donker"] .form-control:focus,
html[data-df-thema="donker"] .btn:focus-visible {
  border-color: var(--df-n-oranje);
  box-shadow: 0 0 0 3px rgba(230, 132, 4, 0.35);
}
html[data-df-thema="donker"] .input-group-addon,
html[data-df-thema="donker"] .input-group-text {
  background: var(--df-n-vlak);
  border-color: rgba(255, 255, 255, 0.22);
  color: #c3cfe0;
}
html[data-df-thema="donker"] label,
html[data-df-thema="donker"] .control-label { color: #c3cfe0; }
html[data-df-thema="donker"] .checkbox-styled,
html[data-df-thema="donker"] .radio-styled {
  background-color: var(--df-n-veld);
  border-color: rgba(255, 255, 255, 0.45);
}
html[data-df-thema="donker"] .checkbox-styled.checked,
html[data-df-thema="donker"] .radio-styled.checked {
  background-color: var(--df-n-oranje);
  border-color: var(--df-n-oranje);
}
html[data-df-thema="donker"] .panel-check { border-color: rgba(255, 255, 255, 0.22); }

html[data-df-thema="donker"] [class^="icheckbox"],
html[data-df-thema="donker"] [class*=" icheckbox"],
html[data-df-thema="donker"] [class^="iradio"],
html[data-df-thema="donker"] [class*=" iradio"] {
  background-color: var(--df-n-veld);
  border-color: rgba(255, 255, 255, 0.36);
}

/* Knoppen zoals de site: oranje actie met nachtblauwe tekst, rand-knop licht */
html[data-df-thema="donker"] .btn-primary,
html[data-df-thema="donker"] .btn-cta,
html[data-df-thema="donker"] .btn-checkout,
html[data-df-thema="donker"] .nav-item-btn > a {
  background-color: var(--df-n-oranje);
  border-color: var(--df-n-oranje);
  color: var(--df-n-bg);
}
html[data-df-thema="donker"] .btn-primary:hover,
html[data-df-thema="donker"] .btn-primary:focus,
html[data-df-thema="donker"] .btn-cta:hover,
html[data-df-thema="donker"] .btn-checkout:hover,
html[data-df-thema="donker"] .nav-item-btn > a:hover {
  background-color: #f29a1f;
  border-color: #f29a1f;
  color: var(--df-n-bg);
}
html[data-df-thema="donker"] .btn-default,
html[data-df-thema="donker"] .btn-secondary,
html[data-df-thema="donker"] .btn-outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--df-n-tekst);
}
html[data-df-thema="donker"] .btn-default:hover,
html[data-df-thema="donker"] .btn-secondary:hover,
html[data-df-thema="donker"] .btn-outline:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--df-n-oranje);
  color: var(--df-n-tekst);
}

/* Een uitgeschakelde knop (Afrekenen zonder akkoord) blijft zichtbaar als knop. */
html[data-df-thema="donker"] .btn.disabled,
html[data-df-thema="donker"] .btn:disabled {
  background: rgba(255, 255, 255, 0.06);
  border: 1px dashed rgba(255, 255, 255, 0.3) !important;
  color: var(--df-n-gedempt);
  opacity: 1;
}

/* Meldingen: leesbaar op nacht, kleur blijft de status */
html[data-df-thema="donker"] .alert {
  background: var(--df-n-vlak);
  border-color: var(--df-n-lijn);
  color: var(--df-n-tekst);
}
html[data-df-thema="donker"] .alert-danger { border-left: 3px solid #fca5a5; }
html[data-df-thema="donker"] .alert-success { border-left: 3px solid #79A134; }
html[data-df-thema="donker"] .alert-warning { border-left: 3px solid var(--df-n-oranje); }
html[data-df-thema="donker"] .alert-info { border-left: 3px solid var(--df-n-link); }

/* Betaalstap en klantzone-basis */
html[data-df-thema="donker"] .main-sidebar .panel,
html[data-df-thema="donker"] .sidebar-sticky .panel { background: var(--df-n-kaart); }
html[data-df-thema="donker"] .main-header { background: transparent; color: var(--df-n-tekst); }
html[data-df-thema="donker"] .tile,
html[data-df-thema="donker"] .tiles .tile,
html[data-df-thema="donker"] .client-home-panels .panel,
html[data-df-thema="donker"] .invoice-container {
  background: var(--df-n-kaart);
  color: #c3cfe0;
}
html[data-df-thema="donker"] .nav-tabs > li > a { color: #c3cfe0; }
html[data-df-thema="donker"] .nav-tabs > li.active > a,
html[data-df-thema="donker"] .nav-tabs .nav-link.active { color: var(--df-n-oranje); background: transparent; }
html[data-df-thema="donker"] .modal-backdrop.in,
html[data-df-thema="donker"] .modal-backdrop.show { background: #050b1c; opacity: 0.8; }
html[data-df-thema="donker"] .overlay,
html[data-df-thema="donker"] .loader { background-color: rgba(12, 24, 56, 0.87); }

/* Voet */
html[data-df-thema="donker"] .df-footer,
html[data-df-thema="donker"] .df-footer-info,
html[data-df-thema="donker"] .df-footer-legal,
html[data-df-thema="donker"] .main-footer {
  background: var(--df-n-bg);
  border-color: var(--df-n-lijn);
}
html[data-df-thema="donker"] .df-footer-nav a { color: var(--df-n-tekst); }
html[data-df-thema="donker"] .df-footer-copy,
html[data-df-thema="donker"] .df-footer-legal-links a { color: var(--df-n-gedempt); }
html[data-df-thema="donker"] .df-footer-socials a {
  background: var(--df-n-kaart);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--df-n-tekst);
}
html[data-df-thema="donker"] .df-footer-nav a:hover,
html[data-df-thema="donker"] .df-footer-legal-links a:hover,
html[data-df-thema="donker"] .df-footer-socials a:hover { color: var(--df-n-oranje); }