/* ============================================================
   MODERN DARK SKIN — Effe centraal
   Overschrijft de kleur-tokens van skin-modern.css.
   Vereist dat body BEIDE klassen heeft: "modern modern-dark".
   ============================================================ */

body.modern.modern-dark {
  /* === Achtergrond & vlakken === */
  --bg:          #111113;
  --card-bg:     #1c1c1f;
  --card-border: rgba(255,255,255,0.07);

  /* === Tekst === */
  --text:        #e4e4e8;
  --text-muted:  #80808a;
  --text-subtle: #52525c;

  /* === Primaire kleur (koraal — springt mooi af op donker) === */
  --primary:        #ff7a5c;
  --primary-dark:   #e56649;
  --primary-darker: #ffaa96;   /* lichter voor gebruik als tekstkleur */
  --primary-soft:   rgba(255,122,92,0.18);
  --primary-softer: rgba(255,122,92,0.12);

  /* === Secundaire / chip === */
  --secondary:       #27272b;
  --secondary-hover: #303036;
  --chip-bg:         #27272b;

  /* === Schaduwen === */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.40);
  --shadow-md: 0 4px 14px rgba(0,0,0,0.50);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.60);
  --shadow:    var(--shadow-md);

  /* === Alerts === */
  --alert-success-bg:     rgba(16,80,42,0.28);
  --alert-success-border: rgba(74,222,128,0.20);
  --alert-success-text:   #4ade80;

  --alert-error-bg:     rgba(120,30,30,0.28);
  --alert-error-border: rgba(248,113,113,0.20);
  --alert-error-text:   #f87171;

  --alert-info-bg:     rgba(20,50,140,0.28);
  --alert-info-border: rgba(147,197,253,0.20);
  --alert-info-text:   #93c5fd;

  /* === Status kleuren === */
  --danger:  #f87171;
  --success: #4ade80;
  --warning: #fbbf24;
  --info:    #60a5fa;
}

/* ============================================================
   TOPBAR — glasmorfisme op donkere achtergrond
   ============================================================ */
body.modern.modern-dark .topbar {
  background: rgba(17,17,19,0.82);
  border-bottom-color: rgba(255,255,255,0.06);
}

/* Nav-knoppen */
body.modern.modern-dark .topbar-btn {
  color: #9a9aaa;
}

body.modern.modern-dark .topbar-btn:hover {
  background: rgba(255,255,255,0.06);
  color: var(--text);
}

body.modern.modern-dark .topbar-btn.is-active {
  background: var(--primary-softer);
  color: var(--primary-darker);
}

/* Profielknop */
body.modern.modern-dark .profile-trigger {
  background: rgba(255,255,255,0.06);
}

body.modern.modern-dark .profile-trigger:hover {
  background: rgba(255,255,255,0.10);
}

body.modern.modern-dark .profile-trigger.is-active {
  background: var(--primary-softer);
  color: var(--primary-darker);
}

/* ============================================================
   MOBIEL MENU
   ============================================================ */
body.modern.modern-dark .mobile-menu a:hover,
body.modern.modern-dark .mobile-menu button:hover {
  background: rgba(255,255,255,0.06);
}

/* ============================================================
   FORMULIERVELDEN
   ============================================================ */
body.modern.modern-dark input[type="text"],
body.modern.modern-dark input[type="email"],
body.modern.modern-dark input[type="password"],
body.modern.modern-dark input[type="number"],
body.modern.modern-dark input[type="date"],
body.modern.modern-dark input[type="datetime-local"],
body.modern.modern-dark input[type="search"],
body.modern.modern-dark textarea,
body.modern.modern-dark select {
  background: #111113;
  border-color: rgba(255,255,255,0.10);
  color: var(--text);
  color-scheme: dark;
}

body.modern.modern-dark input:focus,
body.modern.modern-dark textarea:focus,
body.modern.modern-dark select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(255,122,92,0.18);
}

/* ============================================================
   SECONDARY BUTTON
   ============================================================ */
body.modern.modern-dark .secondary-btn,
body.modern.modern-dark .btn-ghost {
  border-color: rgba(255,122,92,0.25);
  color: var(--primary-darker);
}

body.modern.modern-dark .secondary-btn:hover,
body.modern.modern-dark .btn-ghost:hover {
  background: var(--primary-soft);
  border-color: rgba(255,122,92,0.40);
}

/* ============================================================
   AFSPRAKEN — dagen-blok
   ============================================================ */
body.modern.modern-dark .appointment-days {
  background: var(--primary-soft);
  color: var(--primary-darker);
}

/* ============================================================
   ACTIVITY ALERT
   ============================================================ */
body.modern.modern-dark .activity-alert {
  background: rgba(251,191,36,0.12);
  border-color: rgba(251,191,36,0.25);
  color: #fbbf24;
}

/* ============================================================
   OPMERKING — rand links
   ============================================================ */
body.modern.modern-dark .appt-comment {
  border-left-color: rgba(255,122,92,0.30);
}

/* ============================================================
   HOMEPAGE — blokken
   ============================================================ */
body.modern.modern-dark .block-accent {
  background: rgba(255,122,92,0.10);
}

/* ============================================================
   COOKIE BANNER
   ============================================================ */
body.modern.modern-dark .cookie-banner {
  background: #1c1c1f;
  border-top-color: rgba(255,255,255,0.07);
}

/* ============================================================
   AUTH PAGINA'S (login/register)
   ============================================================ */
body.modern.modern-dark .auth-panel {
  background: var(--card-bg);
  border-color: var(--card-border);
}