/* ==========================================================================
   MKLine thema, licht (standaard) of donker.

   Opzet: elke pagina heeft zijn eigen donkere kleuren als standaard (zwart en oranje).
   Dit bestand zet daar de LICHTE kleuren overheen, maar alleen zolang <html> niet
   data-theme="dark" heeft. Het donkere thema is dus altijd precies wat de pagina zelf al had.
   Wordt dit bestand niet geladen, dan ziet elke pagina er dus gewoon uit zoals voorheen.
   ========================================================================== */

:root:not([data-theme="dark"]) {
  /* basiskleuren */
  --bg: #f6f0e6;             /* zand */
  --bg-soft: #efe7da;
  --bg-card: #fffdf8;
  --text: #1c1712;
  --text-muted: #6b6257;
  --border: #e4dac8;
  --border-strong: #d4c7b0;
  --accent-soft: rgba(240, 168, 60, 0.20);
  --grid-line: rgba(28, 23, 18, 0.05);

  /* status */
  --live: #166534;
  --ok: #166534;
  --danger: #b91c1c;
  --danger-text: #b91c1c;
  --msg-error: #b91c1c;
  --msg-ok: #166534;

  /* oranje als TEKST moet donkerder dan het oranje van knoppen (leesbaarheid) */
  --accent-text: #9a4308;     /* kleine tekst: min. 4,8:1 */
  --accent-display: #c2570c;  /* grote tekst (koppen, cijfers) */

  /* vlakken en schaduwen */
  --nav-bg: rgba(246, 240, 230, 0.82);
  --bar-bg: rgba(246, 240, 230, 0.94);
  --overlay-bg: rgba(28, 23, 18, 0.5);
  --sidebar-bg: rgba(255, 253, 248, 0.78);
  --sidebar-solid: #fcfaf4;   /* zijbalk van de dienstenpagina (zelfde uiterlijk als het dashboard) */
  --shadow-hero: rgba(58, 40, 10, 0.22);
  --shadow-pop: rgba(58, 40, 10, 0.18);

  /* grafieken (dashboard) */
  --chart-grid: rgba(28, 23, 18, 0.08);
  --chart-track: rgba(28, 23, 18, 0.10);
  --dash-color: #7a6f60;     /* 'niet inbegrepen'-streepje in de vergelijkingstabel */
  --cancelled-bg: #e4dac8;    /* geannuleerde afspraak in de agenda */
  --cancelled-fg: #5b5247;
}

/* ---- Logo: zwart/licht bestand in licht thema, het oorspronkelijke logo in donker thema ----
   Elke pagina verbergt het lichte logo zelf al standaard. Hier wisselen we per thema.
   Ontbreekt het lichte bestand (logo-licht.jpeg)? Dan zet theme.js de klasse 'logo-licht-ontbreekt'
   en blijft gewoon het oorspronkelijke logo staan. */
:root:not([data-theme="dark"]):not(.logo-licht-ontbreekt) img[data-logo="licht"] { display: revert; background: transparent; }
:root:not([data-theme="dark"]):not(.logo-licht-ontbreekt) img[data-logo="donker"] { display: none; }

/* ---- Thema-knop: pas zichtbaar als theme.js geladen is ---- */
.theme-js .theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; padding: 0; background: none; color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font: inherit;
  transition: border-color 0.2s ease;
}
.theme-js .theme-toggle:hover { border-color: var(--border-strong); }
.theme-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
.theme-toggle .theme-toggle-label { display: none; }

/* vaste knop rechtsboven (pagina's zonder navigatiebalk) */
.theme-js .theme-toggle--float { position: fixed; top: 20px; right: 20px; z-index: 300; background: var(--bg-card); }

/* knopmaat aanpassen aan de plek, zodat de pagina niet verschuift */
.theme-js .nav-actions .theme-toggle { width: 42px; height: 42px; }
.theme-js .theme-toggle--topbar { width: 34px; height: 34px; }
.theme-toggle--topbar svg { width: 17px; height: 17px; }

/* smalle schermen (prijzenpagina heeft geen hamburgermenu): ruimte maken voor de knop */
@media (max-width: 560px) {
  .theme-js .nav-actions { gap: 12px; }
  .theme-js .nav-actions .nav-login { display: none; }
}