/*
 * Datamanagers.nl theme layer
 *
 * Deze laag introduceert centrale CSS-variabelen en een eerste automatische
 * dark-mode basis via prefers-color-scheme. De bestaande styles.css blijft
 * leidend; deze file ligt er bewust als laag overheen.
 */
:root {
  color-scheme: light;

  --dm-green: #458B52;
  --dm-green-dark: #356f40;
  --dm-green-soft: #edf7ef;
  --dm-bg: #f7faf8;
  --dm-surface: #ffffff;
  --dm-surface-alt: #f8fafc;
  --dm-text: #1f2933;
  --dm-heading: #10233f;
  --dm-muted: #5f6f68;
  --dm-border: #d9e2dc;
  --dm-input-bg: #ffffff;
  --dm-input-text: #1f2933;
  --dm-shadow: rgba(16, 35, 63, 0.08);
  --dm-danger: #b42318;
  --dm-danger-soft: #fff1f0;
  --dm-warning-soft: #fff8e1;
  --dm-success-soft: #edf7ef;

  /* Compatibiliteit met bestaande styles.css */
  --green: var(--dm-green);
  --green-dark: var(--dm-green-dark);
  --dark: var(--dm-heading);
  --muted: var(--dm-muted);
  --line: var(--dm-border);
}

body {
  background: var(--dm-bg);
  color: var(--dm-text);
}

header,
footer,
.card,
.visual-card,
.score-card,
.contact-card,
.form-card,
.login-card,
.panel,
.notice,
.package,
.domain-assessment,
.consultant-prompttest-panel,
.consultant-prompttest-meta,
.table-wrap,
.admin-card,
.maintenance-card {
  background-color: var(--dm-surface);
  color: var(--dm-text);
  border-color: var(--dm-border);
}

h1, h2, h3, h4, h5, h6,
.brand,
.section-header h2,
.card h3,
.package h3 {
  color: var(--dm-heading);
}

p,
li,
label,
small,
.help-text,
.meta,
.section-header p,
.card p,
.lead,
.cluster-label {
  color: inherit;
}

.muted,
.help-text,
.cluster-label,
.section-header p {
  color: var(--dm-muted);
}

input,
textarea,
select {
  background-color: var(--dm-input-bg);
  color: var(--dm-input-text);
  border-color: var(--dm-border);
}

input::placeholder,
textarea::placeholder {
  color: color-mix(in srgb, var(--dm-muted) 80%, transparent);
}

table,
th,
td {
  border-color: var(--dm-border);
}

.assessment-table thead th,
.domain-assessment-header .domain-icon,
.badge,
.trust-pill {
  background-color: var(--dm-green-soft);
}

.assessment-table tbody tr:hover {
  background-color: var(--dm-surface-alt);
}

.button,
button {
  border-color: var(--dm-border);
}

.button-primary,
button.button-primary {
  background-color: var(--dm-green);
  border-color: var(--dm-green);
  color: #ffffff;
}

.button-primary:hover,
button.button-primary:hover {
  background-color: var(--dm-green-dark);
  border-color: var(--dm-green-dark);
}

.button-secondary,
button.button-secondary {
  background-color: var(--dm-surface);
  color: var(--dm-green);
  border-color: var(--dm-green);
}

.bar-track,
.progress-track {
  background-color: color-mix(in srgb, var(--dm-border) 72%, var(--dm-surface));
}

.bar-fill,
.progress-fill {
  background-color: var(--dm-green);
}

.error,
.error-message,
.form-error,
.is-invalid {
  color: var(--dm-danger);
}

.form-field.is-invalid input,
.form-field.is-invalid textarea,
.form-field.is-invalid select,
input.is-invalid,
textarea.is-invalid,
select.is-invalid {
  border-color: var(--dm-danger);
  background-color: var(--dm-danger-soft);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --dm-green: #74bf82;
    --dm-green-dark: #5ba768;
    --dm-green-soft: #183522;
    --dm-bg: #0f1713;
    --dm-surface: #17211b;
    --dm-surface-alt: #1e2b23;
    --dm-text: #edf5ef;
    --dm-heading: #f6fbf7;
    --dm-muted: #b5c5ba;
    --dm-border: #304238;
    --dm-input-bg: #101813;
    --dm-input-text: #f6fbf7;
    --dm-shadow: rgba(0, 0, 0, 0.45);
    --dm-danger: #ffb4ab;
    --dm-danger-soft: #351917;
    --dm-warning-soft: #302813;
    --dm-success-soft: #183522;
  }

  html,
  body {
    background: var(--dm-bg) !important;
    color: var(--dm-text) !important;
  }

  header,
  footer {
    background-color: color-mix(in srgb, var(--dm-surface) 92%, #000000) !important;
    border-color: var(--dm-border) !important;
  }

  .hero,
  .section,
  .section-compact {
    background-color: transparent;
  }

  .card,
  .visual-card,
  .score-card,
  .contact-card,
  .form-card,
  .login-card,
  .panel,
  .notice,
  .package,
  .domain-assessment,
  .consultant-prompttest-panel,
  .consultant-prompttest-meta,
  .table-wrap,
  .admin-card,
  .maintenance-card {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
    box-shadow: 0 12px 28px var(--dm-shadow) !important;
  }

  .assessment-table thead th,
  .domain-assessment-header .domain-icon,
  .badge,
  .trust-pill {
    background-color: var(--dm-green-soft) !important;
    color: var(--dm-heading) !important;
  }

  .assessment-table tbody tr:hover {
    background-color: var(--dm-surface-alt) !important;
  }

  input,
  textarea,
  select {
    background-color: var(--dm-input-bg) !important;
    color: var(--dm-input-text) !important;
    border-color: var(--dm-border) !important;
  }

  input[type="radio"],
  input[type="checkbox"] {
    accent-color: var(--dm-green);
  }

  a {
    color: var(--dm-green);
  }

  .button-primary,
  button.button-primary {
    color: #0b140e !important;
    background-color: var(--dm-green) !important;
    border-color: var(--dm-green) !important;
  }

  .button-secondary,
  button.button-secondary {
    background-color: transparent !important;
    color: var(--dm-green) !important;
    border-color: var(--dm-green) !important;
  }

  img.brand-logo,
  .consultant-photo,
  .package-price-sticker {
    filter: none;
  }
}

@media print {
  :root {
    color-scheme: light;
  }

  body {
    background: #ffffff !important;
    color: #111827 !important;
  }
}

/*
 * Aanvullende contrastcorrecties voor dark mode.
 * Sommige pagina's gebruiken specifiekere selectors in styles.css (bijv. .hero h1
 * of .auth-card h2). Deze laag maakt koppen, auth-kaarten en beheerkaarten
 * expliciet thema-gestuurd, zodat tekst niet wegvalt bij systeem-dark-mode.
 */
.hero h1,
.auth-hero h1,
.hero h2,
.auth-hero h2,
.auth-card h1,
.auth-card h2,
.auth-card h3,
.admin-card h1,
.admin-card h2,
.admin-card h3,
.maintenance-card h1,
.maintenance-card h2,
.maintenance-card h3,
.form-card h1,
.form-card h2,
.form-card h3,
.panel h1,
.panel h2,
.panel h3,
.card h1,
.card h2,
.card h3 {
  color: var(--dm-heading);
}

.auth-card,
.auth-card-header,
.auth-form,
.beheer-card,
.config-card,
.prompt-card,
.footerbeheer-card,
.payment-card,
.betaling-card {
  color: var(--dm-text);
}

.auth-card,
.beheer-card,
.config-card,
.prompt-card,
.footerbeheer-card,
.payment-card,
.betaling-card {
  background-color: var(--dm-surface);
  border-color: var(--dm-border);
}

.auth-card p,
.auth-card li,
.auth-card label,
.auth-card .auth-link,
.beheer-card p,
.config-card p,
.prompt-card p,
.footerbeheer-card p,
.payment-card p,
.betaling-card p {
  color: var(--dm-text);
}

.auth-card-header p,
.lead,
.hero .lead,
.auth-hero .lead,
.auth-link {
  color: var(--dm-muted);
}

@media (prefers-color-scheme: dark) {
  .hero h1,
  .auth-hero h1,
  .hero h2,
  .auth-hero h2,
  .auth-card h1,
  .auth-card h2,
  .auth-card h3,
  .admin-card h1,
  .admin-card h2,
  .admin-card h3,
  .maintenance-card h1,
  .maintenance-card h2,
  .maintenance-card h3,
  .form-card h1,
  .form-card h2,
  .form-card h3,
  .panel h1,
  .panel h2,
  .panel h3,
  .card h1,
  .card h2,
  .card h3 {
    color: var(--dm-heading) !important;
  }

  .auth-card,
  .beheer-card,
  .config-card,
  .prompt-card,
  .footerbeheer-card,
  .payment-card,
  .betaling-card {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
    box-shadow: 0 12px 28px var(--dm-shadow) !important;
  }

  .auth-card p,
  .auth-card li,
  .auth-card label,
  .auth-form label,
  .beheer-card p,
  .config-card p,
  .prompt-card p,
  .footerbeheer-card p,
  .payment-card p,
  .betaling-card p {
    color: var(--dm-text) !important;
  }

  .auth-card-header p,
  .lead,
  .hero .lead,
  .auth-hero .lead,
  .eyebrow,
  .auth-link {
    color: var(--dm-muted) !important;
  }

  .auth-card .icon,
  .domain-icon,
  .icon {
    background-color: var(--dm-green-soft) !important;
    color: var(--dm-heading) !important;
  }
}

/*
 * Quickscan dark-mode correcties.
 * De attentie-/introblokken op quickscan.html gebruiken eigen inline classes
 * (.intro-card / .assessment-intro) en werden daardoor nog niet overal door de
 * generieke kaartregels geraakt.
 */
.intro-card,
.assessment-intro,
#quickscan-instructions-card,
#quickscan-payment-reporting-card {
  background-color: var(--dm-surface);
  color: var(--dm-text);
  border-color: var(--dm-border);
}

.intro-card h1,
.intro-card h2,
.intro-card h3,
.assessment-intro h1,
.assessment-intro h2,
.assessment-intro h3,
#quickscan-payment-reporting-card h1,
#quickscan-payment-reporting-card h2,
#quickscan-payment-reporting-card h3,
#quickscan-instructions-card h1,
#quickscan-instructions-card h2,
#quickscan-instructions-card h3 {
  color: var(--dm-heading);
}

.intro-card p,
.intro-card li,
.assessment-intro p,
.assessment-intro li,
#quickscan-payment-reporting-card p,
#quickscan-payment-reporting-card li,
#quickscan-instructions-card p,
#quickscan-instructions-card li {
  color: var(--dm-text);
}

@media (prefers-color-scheme: dark) {
  .intro-card,
  .assessment-intro,
  #quickscan-instructions-card,
  #quickscan-payment-reporting-card {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
    box-shadow: 0 12px 28px var(--dm-shadow) !important;
  }

  .intro-card h1,
  .intro-card h2,
  .intro-card h3,
  .assessment-intro h1,
  .assessment-intro h2,
  .assessment-intro h3,
  #quickscan-payment-reporting-card h1,
  #quickscan-payment-reporting-card h2,
  #quickscan-payment-reporting-card h3,
  #quickscan-instructions-card h1,
  #quickscan-instructions-card h2,
  #quickscan-instructions-card h3 {
    color: var(--dm-heading) !important;
  }

  .intro-card p,
  .intro-card li,
  .assessment-intro p,
  .assessment-intro li,
  #quickscan-payment-reporting-card p,
  #quickscan-payment-reporting-card li,
  #quickscan-instructions-card p,
  #quickscan-instructions-card li {
    color: var(--dm-text) !important;
  }

  .quickscan-submit-status-success {
    background-color: var(--dm-success-soft) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
  }
}

/*
 * DAMA-DMBOK dark-mode correcties.
 * De kerndomeinkaarten op dama-dmbok.html gebruiken .domain-card en bleven
 * daardoor in dark mode nog wit. Deze regels trekken ze gelijk met de overige
 * kaarten/panelen in de themalaag.
 */
.domain-card,
.domains .domain-card,
.image-card {
  background-color: var(--dm-surface);
  color: var(--dm-text);
  border-color: var(--dm-border);
}

.domain-card h1,
.domain-card h2,
.domain-card h3,
.domains .domain-card h1,
.domains .domain-card h2,
.domains .domain-card h3 {
  color: var(--dm-heading);
}

.domain-card p,
.domain-card li,
.domains .domain-card p,
.domains .domain-card li {
  color: var(--dm-text);
}

.domain-card .number,
.domains .domain-card .number {
  background-color: var(--dm-green-soft);
  color: var(--dm-heading);
  border-color: var(--dm-border);
}

@media (prefers-color-scheme: dark) {
  .domain-card,
  .domains .domain-card,
  .image-card {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
    box-shadow: 0 12px 28px var(--dm-shadow) !important;
  }

  .domain-card h1,
  .domain-card h2,
  .domain-card h3,
  .domains .domain-card h1,
  .domains .domain-card h2,
  .domains .domain-card h3 {
    color: var(--dm-heading) !important;
  }

  .domain-card p,
  .domain-card li,
  .domains .domain-card p,
  .domains .domain-card li {
    color: var(--dm-text) !important;
  }

  .domain-card .number,
  .domains .domain-card .number {
    background-color: var(--dm-green-soft) !important;
    color: var(--dm-heading) !important;
    border-color: var(--dm-border) !important;
  }
}

/*
 * DAMA-DMBOK CTA-blok dark-mode correcties.
 * Het onderste blok "Vertaal DAMA-DMBOK naar concrete verbeteracties" gebruikt
 * .cta/.cta-compact en had nog een vaste lichte achtergrond vanuit styles.css.
 */
.cta,
.cta.cta-compact {
  background-color: var(--dm-surface);
  color: var(--dm-text);
  border-color: var(--dm-border);
}

.cta h1,
.cta h2,
.cta h3,
.cta.cta-compact h1,
.cta.cta-compact h2,
.cta.cta-compact h3 {
  color: var(--dm-heading);
}

.cta p,
.cta li,
.cta.cta-compact p,
.cta.cta-compact li {
  color: var(--dm-text);
}

@media (prefers-color-scheme: dark) {
  .cta,
  .cta.cta-compact {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
    box-shadow: 0 12px 28px var(--dm-shadow) !important;
  }

  .cta h1,
  .cta h2,
  .cta h3,
  .cta.cta-compact h1,
  .cta.cta-compact h2,
  .cta.cta-compact h3 {
    color: var(--dm-heading) !important;
  }

  .cta p,
  .cta li,
  .cta.cta-compact p,
  .cta.cta-compact li {
    color: var(--dm-text) !important;
  }
}

/*
 * DAMA-DMBOK CTA rustiger highlight.
 * Vervangt eventuele verloop-/hero-styling door een effen, goed leesbaar blok.
 */
.cta.cta-compact {
  background: var(--dm-green-soft) !important;
  background-image: none !important;
  color: var(--dm-text) !important;
  border: 1px solid var(--dm-border) !important;
  box-shadow: 0 12px 28px var(--dm-shadow) !important;
}

.cta.cta-compact h1,
.cta.cta-compact h2,
.cta.cta-compact h3 {
  color: var(--dm-heading) !important;
}

.cta.cta-compact p,
.cta.cta-compact li {
  color: var(--dm-text) !important;
}

.cta.cta-compact .button,
.cta.cta-compact .button-secondary {
  background: var(--dm-green) !important;
  background-image: none !important;
  border-color: var(--dm-green) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.cta.cta-compact .button:hover,
.cta.cta-compact .button-secondary:hover {
  background: var(--dm-green-dark) !important;
  border-color: var(--dm-green-dark) !important;
  color: #ffffff !important;
}

@media (prefers-color-scheme: dark) {
  .cta.cta-compact {
    background: #172d1d !important;
    background-image: none !important;
    color: var(--dm-text) !important;
    border-color: color-mix(in srgb, var(--dm-green) 55%, var(--dm-border)) !important;
    box-shadow: 0 12px 28px var(--dm-shadow) !important;
  }

  .cta.cta-compact h1,
  .cta.cta-compact h2,
  .cta.cta-compact h3 {
    color: var(--dm-heading) !important;
  }

  .cta.cta-compact p,
  .cta.cta-compact li {
    color: var(--dm-text) !important;
  }

  .cta.cta-compact .button,
  .cta.cta-compact .button-secondary {
    background: var(--dm-green) !important;
    background-image: none !important;
    border-color: var(--dm-green) !important;
    color: #0b140e !important;
    box-shadow: none !important;
  }

  .cta.cta-compact .button:hover,
  .cta.cta-compact .button-secondary:hover {
    background: var(--dm-green-dark) !important;
    border-color: var(--dm-green-dark) !important;
    color: #ffffff !important;
  }
}

/*
 * Over ons bedrijfsgegevens dark-mode correcties.
 * Het blok met bedrijfsgegevens onderaan over-ons.html gebruikt
 * .dm-vestiging-details met een vaste grijze tekstkleur. Deze regels zorgen
 * ervoor dat de tekst in light/dark mode de themakleuren volgt.
 */
.dm-vestiging-card,
#dm-vestiging {
  background-color: var(--dm-surface);
  color: var(--dm-text);
  border-color: var(--dm-border);
}

.dm-vestiging-card h1,
.dm-vestiging-card h2,
.dm-vestiging-card h3,
#dm-vestiging h1,
#dm-vestiging h2,
#dm-vestiging h3 {
  color: var(--dm-heading);
}

.dm-vestiging-details,
#dm-vestiging-details {
  color: var(--dm-text) !important;
}

.dm-vestiging-details a,
#dm-vestiging-details a {
  color: var(--dm-green) !important;
}

@media (prefers-color-scheme: dark) {
  .dm-vestiging-card,
  #dm-vestiging {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
    box-shadow: 0 12px 28px var(--dm-shadow) !important;
  }

  .dm-vestiging-card h1,
  .dm-vestiging-card h2,
  .dm-vestiging-card h3,
  #dm-vestiging h1,
  #dm-vestiging h2,
  #dm-vestiging h3 {
    color: var(--dm-heading) !important;
  }

  .dm-vestiging-details,
  #dm-vestiging-details {
    color: var(--dm-text) !important;
  }

  .dm-vestiging-details a,
  #dm-vestiging-details a {
    color: var(--dm-green) !important;
  }
}


/*
 * Beheer landingspagina onderhoudsstatus dark-mode correcties.
 * De onderhoudsbalk op beheer-landingspagina.html had inline/light styling
 * die in dark mode wit bleef. Deze regels zetten de balk, tekst en status
 * terug op de centrale themakleuren.
 */
.beheer-maintenance-panel {
  background-color: var(--dm-surface) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
  box-shadow: 0 12px 30px var(--dm-shadow) !important;
}

.beheer-maintenance-status,
#beheer-maintenance-status {
  color: var(--dm-heading) !important;
}

.beheer-maintenance-status[data-active="true"],
#beheer-maintenance-status[data-active="true"] {
  color: var(--dm-danger) !important;
}

.beheer-maintenance-message,
#beheer-maintenance-message {
  color: var(--dm-text) !important;
}

@media (prefers-color-scheme: dark) {
  .beheer-maintenance-panel {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
    box-shadow: 0 12px 30px var(--dm-shadow) !important;
  }

  .beheer-maintenance-status,
  #beheer-maintenance-status {
    color: var(--dm-heading) !important;
  }

  .beheer-maintenance-status[data-active="true"],
  #beheer-maintenance-status[data-active="true"] {
    color: #fca5a5 !important;
  }

  .beheer-maintenance-message,
  #beheer-maintenance-message {
    color: var(--dm-text) !important;
  }
}

/* Beheer consultants: aanvullende dark-mode en formuliercontrast */
.beheer-email-domain {
  background: var(--dm-surface-alt, #f8fafc) !important;
  color: var(--dm-text, #1f2933) !important;
  border-color: var(--dm-border, #cbd5e1) !important;
}

.beheer-form-field-full textarea,
#biografie {
  background: var(--dm-input-bg, #ffffff) !important;
  color: var(--dm-text, #1f2933) !important;
  border-color: var(--dm-border, #cbd5e1) !important;
}

@media (prefers-color-scheme: dark) {
  .beheer-email-domain {
    background: var(--dm-surface, #1e1e1e) !important;
    color: var(--dm-text, #f2f2f2) !important;
    border-color: var(--dm-border, #333333) !important;
  }

  .beheer-form-field-full textarea,
  #biografie {
    background: var(--dm-input-bg, #222222) !important;
    color: var(--dm-text, #f2f2f2) !important;
    border-color: var(--dm-border, #555555) !important;
  }
}

/* Beheer pakketten: kaart- en blokkleuren volgen de centrale themalaag. */
.beheer-pakket-card,
.beheer-pakket-block {
  background-color: var(--dm-surface) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
  box-shadow: 0 12px 30px var(--dm-shadow) !important;
}

.beheer-pakket-block {
  background-color: var(--dm-surface-alt) !important;
}

.beheer-pakket-header h2,
.beheer-pakket-block h3,
.beheer-pakket-field label,
.beheer-pakket-token-heading {
  color: var(--dm-heading) !important;
}

.beheer-pakket-small,
.beheer-pakket-field small,
.beheer-pakket-help {
  color: var(--dm-muted) !important;
}

.beheer-pakket-token {
  color: var(--dm-green) !important;
}

.beheer-pakket-card input,
.beheer-pakket-card select,
.beheer-pakket-card textarea,
.beheer-pakket-block input,
.beheer-pakket-block select,
.beheer-pakket-block textarea {
  background-color: var(--dm-input-bg) !important;
  color: var(--dm-input-text) !important;
  border-color: var(--dm-border) !important;
}

@media (prefers-color-scheme: dark) {
  .beheer-pakket-card,
  .beheer-pakket-block {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
    box-shadow: 0 12px 30px var(--dm-shadow) !important;
  }

  .beheer-pakket-block {
    background-color: var(--dm-surface-alt) !important;
  }

  .beheer-pakket-header h2,
  .beheer-pakket-block h3,
  .beheer-pakket-field label,
  .beheer-pakket-token-heading {
    color: var(--dm-heading) !important;
  }

  .beheer-pakket-small,
  .beheer-pakket-field small,
  .beheer-pakket-help {
    color: var(--dm-muted) !important;
  }

  .beheer-pakket-token {
    color: var(--dm-green) !important;
  }

  .beheer-pakket-card input,
  .beheer-pakket-card select,
  .beheer-pakket-card textarea,
  .beheer-pakket-block input,
  .beheer-pakket-block select,
  .beheer-pakket-block textarea {
    background-color: var(--dm-input-bg) !important;
    color: var(--dm-input-text) !important;
    border-color: var(--dm-border) !important;
  }
}

/*
 * Locatie-label linksboven (bijv. "Beheeromgeving").
 * Deze .eyebrow-tekst had op sommige pagina's onvoldoende contrast in dark mode.
 */
.eyebrow,
.hero .eyebrow,
.auth-hero .eyebrow,
main .eyebrow,
section .eyebrow,
.container > .eyebrow {
  color: var(--dm-green) !important;
}

@media (prefers-color-scheme: dark) {
  body:not(.theme-dark) .eyebrow,
  body:not(.theme-dark) .hero .eyebrow,
  body:not(.theme-dark) .auth-hero .eyebrow,
  body:not(.theme-dark) main .eyebrow,
  body:not(.theme-dark) section .eyebrow,
  body:not(.theme-dark) .container > .eyebrow {
    color: #458B52 !important;
  }
}

/*
 * Logo-transparantie.
 * Het PNG-logo zelf heeft transparantie; deze regels voorkomen dat wrappers
 * rond het logo alsnog een lichtgrijze/witte achtergrond tonen.
 */
.brand,
.brand:link,
.brand:visited,
.brand:hover,
.brand:focus,
.brand:active,
header .brand,
footer .brand,
.nav .brand,
.footer-row .brand,
a.brand,
a.brand:link,
a.brand:visited,
a.brand:hover,
a.brand:focus,
a.brand:active {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.brand-logo,
img.brand-logo,
.brand img.brand-logo,
header img.brand-logo,
footer img.brand-logo,
.nav img.brand-logo,
.footer-row img.brand-logo {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  display: block;
}

/* Ook de tekst naast het logo mag geen eigen vlak achter zich krijgen. */
.brand span,
header .brand span,
footer .brand span,
.nav .brand span,
.footer-row .brand span {
  background: transparent !important;
  background-color: transparent !important;
}

@media (prefers-color-scheme: dark) {
  .brand,
  .brand:link,
  .brand:visited,
  .brand:hover,
  .brand:focus,
  .brand:active,
  header .brand,
  footer .brand,
  .nav .brand,
  .footer-row .brand,
  a.brand,
  a.brand:link,
  a.brand:visited,
  a.brand:hover,
  a.brand:focus,
  a.brand:active,
  .brand-logo,
  img.brand-logo,
  .brand img.brand-logo,
  header img.brand-logo,
  footer img.brand-logo,
  .nav img.brand-logo,
  .footer-row img.brand-logo,
  .brand span,
  header .brand span,
  footer .brand span,
  .nav .brand span,
  .footer-row .brand span {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
  }
}

/*
 * Extra harde logo-fix.
 * Sommige pagina's/hostingcaches tonen nog een grijs vlak rond /images/datamanagers-logo.png.
 * Daarom targeten we naast .brand-logo ook direct de img[src]-varianten en alle directe wrappers.
 */
img[src$="datamanagers-logo.png"],
img[src*="datamanagers-logo.png?"],
img[src*="/datamanagers-logo.png"],
.brand > img,
a.brand > img,
header a.brand > img,
footer .brand > img,
.nav a.brand > img {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

.brand:has(img[src*="datamanagers-logo.png"]),
a.brand:has(img[src*="datamanagers-logo.png"]) {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Fallback voor browsers zonder :has(): zorg dat de gehele brand-link nooit een vlak krijgt. */
header .container .brand,
header .nav .brand,
footer .container .brand,
footer .footer-row .brand {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
}

@media (prefers-color-scheme: dark) {
  img[src$="datamanagers-logo.png"],
  img[src*="datamanagers-logo.png?"],
  img[src*="/datamanagers-logo.png"],
  .brand > img,
  a.brand > img,
  header a.brand > img,
  footer .brand > img,
  .nav a.brand > img,
  header .container .brand,
  header .nav .brand,
  footer .container .brand,
  footer .footer-row .brand {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;
  }
}

/*
 * Consultant-projecten: projectkaarten in dark mode.
 * De kaarten worden dynamisch door JavaScript aangemaakt en vielen daardoor
 * nog terug op de witte basisstijl uit styles.css.
 */
.consultant-project-list {
  color: var(--dm-text) !important;
}

.consultant-project-card,
.consultant-project-list .consultant-project-card {
  background-color: var(--dm-surface) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
  box-shadow: 0 12px 30px var(--dm-shadow) !important;
}

.consultant-project-card-header,
.consultant-project-card-title,
.consultant-project-details {
  background-color: transparent !important;
  color: inherit !important;
}

.consultant-project-card h3,
.consultant-project-card-title h3 {
  color: var(--dm-heading) !important;
}

.consultant-project-card p,
.consultant-project-card-title p,
.consultant-project-details dt,
.consultant-project-details dd {
  color: var(--dm-text) !important;
}

.consultant-project-details dt,
.consultant-project-card-title p {
  color: var(--dm-muted) !important;
}

.consultant-project-website-link,
.consultant-project-card a:not(.button) {
  color: var(--dm-green) !important;
}

@media (prefers-color-scheme: dark) {
  .consultant-project-card,
  .consultant-project-list .consultant-project-card {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
    box-shadow: 0 12px 30px var(--dm-shadow) !important;
  }

  .consultant-project-card-header,
  .consultant-project-card-title,
  .consultant-project-details {
    background-color: transparent !important;
    color: inherit !important;
  }

  .consultant-project-card h3,
  .consultant-project-card-title h3 {
    color: var(--dm-heading) !important;
  }

  .consultant-project-card p,
  .consultant-project-card-title p,
  .consultant-project-details dd {
    color: var(--dm-text) !important;
  }

  .consultant-project-details dt,
  .consultant-project-card-title p {
    color: var(--dm-muted) !important;
  }

  .consultant-project-website-link,
  .consultant-project-card a:not(.button) {
    color: #8fd19a !important;
  }
}

/*
 * Quickscan: actief-project balk.
 * Deze contextbalk wordt door JavaScript gevuld voor consultants/beheerders.
 */
.quickscan-project-context {
  margin: 0 0 18px;
  padding: 14px 18px;
  border: 1px solid var(--dm-border) !important;
  border-radius: 18px;
  background-color: var(--dm-surface) !important;
  color: var(--dm-heading) !important;
  box-shadow: 0 10px 26px var(--dm-shadow) !important;
  font-weight: 800;
}

@media (prefers-color-scheme: dark) {
  .quickscan-project-context {
    background-color: var(--dm-surface) !important;
    color: var(--dm-heading) !important;
    border-color: var(--dm-border) !important;
    box-shadow: 0 10px 26px var(--dm-shadow) !important;
  }
}

/*
 * Project-advies: dark-mode herstel.
 * De pagina heeft eigen inline stijlen voor metadata en JSON-blokken; deze
 * regels overschrijven die naar de centrale themekleuren.
 */
.advies-card,
.card.advies-card {
  background-color: var(--dm-surface) !important;
  color: var(--dm-text) !important;
  border-color: var(--dm-border) !important;
  box-shadow: 0 12px 30px var(--dm-shadow) !important;
}

.advies-card h2,
.advies-card h3,
#advies-project-title,
#advies-detail h2,
.advies-output-block h3,
.advies-prompt-panel h2 {
  color: var(--dm-heading) !important;
}

.advies-meta,
.advies-meta dt,
.advies-meta dd,
#advies-project-meta,
#advies-detail .advies-meta {
  color: var(--dm-text) !important;
}

.advies-meta dt,
#advies-project-meta dt,
#advies-detail .advies-meta dt {
  color: var(--dm-heading) !important;
}

.advies-meta dd,
#advies-project-meta dd,
#advies-detail .advies-meta dd {
  color: var(--dm-text) !important;
}

.advies-json,
pre.advies-json,
#advies-detail pre.advies-json,
#advies-prompt-content pre.advies-json {
  background-color: var(--dm-input-bg) !important;
  color: var(--dm-input-text) !important;
  border-color: var(--dm-border) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dm-border) 65%, transparent);
}

.advies-empty,
#advies-detail .advies-empty,
#advies-prompt-content .advies-empty {
  background-color: var(--dm-surface-alt) !important;
  color: var(--dm-muted) !important;
  border-color: var(--dm-border) !important;
}

.advies-warning {
  background-color: var(--dm-warning-soft) !important;
  color: var(--dm-heading) !important;
  border-color: color-mix(in srgb, var(--dm-border) 70%, #f59e0b 30%) !important;
}

.advies-pill {
  background-color: var(--dm-green-soft) !important;
  color: var(--dm-green-dark) !important;
}

.advies-list .button,
.advies-actions .button {
  color: inherit;
}

@media (prefers-color-scheme: dark) {
  .advies-card,
  .card.advies-card {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
    box-shadow: 0 12px 30px var(--dm-shadow) !important;
  }

  .advies-card h2,
  .advies-card h3,
  #advies-project-title,
  #advies-detail h2,
  .advies-output-block h3,
  .advies-prompt-panel h2 {
    color: var(--dm-heading) !important;
  }

  .advies-meta,
  .advies-meta dt,
  .advies-meta dd,
  #advies-project-meta,
  #advies-detail .advies-meta {
    color: var(--dm-text) !important;
  }

  .advies-meta dt,
  #advies-project-meta dt,
  #advies-detail .advies-meta dt {
    color: var(--dm-heading) !important;
  }

  .advies-meta dd,
  #advies-project-meta dd,
  #advies-detail .advies-meta dd {
    color: var(--dm-text) !important;
  }

  .advies-json,
  pre.advies-json,
  #advies-detail pre.advies-json,
  #advies-prompt-content pre.advies-json {
    background-color: #111827 !important;
    color: #e5e7eb !important;
    border-color: var(--dm-border) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dm-border) 75%, transparent);
  }

  .advies-empty,
  #advies-detail .advies-empty,
  #advies-prompt-content .advies-empty {
    background-color: var(--dm-surface-alt) !important;
    color: var(--dm-muted) !important;
    border-color: var(--dm-border) !important;
  }

  .advies-warning {
    background-color: color-mix(in srgb, #f59e0b 18%, var(--dm-surface) 82%) !important;
    color: var(--dm-heading) !important;
    border-color: color-mix(in srgb, #f59e0b 42%, var(--dm-border) 58%) !important;
  }

  .advies-pill {
    background-color: color-mix(in srgb, var(--dm-green) 22%, var(--dm-surface) 78%) !important;
    color: #b7f7c1 !important;
  }
}

/* Consultantpagina's: actieknoppen rechts van de badge in de hero. */
.consultant-project-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.consultant-project-hero-top .consultant-profile-entry {
  margin-left: auto;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .consultant-project-hero-top {
    align-items: flex-start;
    flex-direction: column;
  }

  .consultant-project-hero-top .consultant-profile-entry {
    margin-left: 0;
  }
}