/* ═══════════════════════════════════════════════════════════════════════
 * PaskamerPraat Light Theme v5.0 — Dark → Light parity
 * MUST load LAST (index.html). Beats app.css + extension !important.
 * Scope: html[data-pp-theme="light"] only. Dark baseline untouched.
 * ═══════════════════════════════════════════════════════════════════════ */

html[data-pp-theme="light"],
html[data-theme="light"] {
  color-scheme: light;
  --ink: #1c1810;
  --ink-soft: #3a3220;
  --ink-muted: #6a5c3e;
  --cream: #f4ecd9;
  --warm: #f4ecd9;
  --parchment: #e5d6b4;
  --clay: #c67d06;
  --clay-l: #d4910a;
  --clay-d: #a56605;
  --white: #f4ecd9;
  --border: rgba(28, 24, 16, 0.14);
  --border-m: rgba(28, 24, 16, 0.22);
  --clay-alpha: rgba(198, 125, 6, 0.12);

  --pp-bg: #f4ecd9;
  --pp-elevated: #faf6ea;
  --pp-text: #1c1810;
  --pp-text-2: #3a3220;
  --pp-text-3: #6a5c3e;
  --pp-text-on-accent: #ffffff;
  --pp-border: rgba(28, 24, 16, 0.14);
  --pp-border-2: rgba(28, 24, 16, 0.22);
  --pp-accent: #b06205;
  --pp-overlay: rgba(28, 24, 16, 0.42);
  --pp-shadow-lg: 0 8px 28px rgba(28, 24, 16, 0.12);
  --pp-radius: 14px;
  --pp-radius-sm: 10px;
  --pp-control-h: 44px;
}

html[data-pp-theme="dark"],
html[data-theme="dark"] { color-scheme: dark; }

/* ── Universal light canvas (beats #0a0806 !important) ─────────────── */
html[data-pp-theme="light"] body,
html[data-pp-theme="light"] .dy-main,
html[data-pp-theme="light"] .dy-main.dy-feed-actief,
html[data-pp-theme="light"] .dy-main--home,
html[data-pp-theme="light"] .dy-main--locked,
html[data-pp-theme="light"] .dy-main:has(.dy-form-wrap),
html[data-pp-theme="light"] #dy-main,
html[data-pp-theme="light"] .dy-topbar,
html[data-pp-theme="light"] #dy-topbar,
html[data-pp-theme="light"] .dy-nav,
html[data-pp-theme="light"] nav.dy-nav,
html[data-pp-theme="light"] #dy-nav,
html[data-pp-theme="light"] .dy-sidebar,
html[data-pp-theme="light"] #dy-sidebar,
html[data-pp-theme="light"] .dy-stories,
html[data-pp-theme="light"] #dy-stories-row,
html[data-pp-theme="light"] .dy-story-strip,
html[data-pp-theme="light"] .dy-feed-nav-strip,
html[data-pp-theme="light"] #dy-feed-filters,
html[data-pp-theme="light"] .dy-feed-header,
html[data-pp-theme="light"] .dy-feed-sentinel,
html[data-pp-theme="light"] .dy-profiel-wrap,
html[data-pp-theme="light"] .dy-profiel-hero,
html[data-pp-theme="light"] .dy-winkel-wrap,
html[data-pp-theme="light"] .dy-berichten-wrap,
html[data-pp-theme="light"] .dy-bericht-rij,
html[data-pp-theme="light"] .dy-bericht-item,
html[data-pp-theme="light"] .dy-chat-berichten,
html[data-pp-theme="light"] .dy-zoek-wrap,
html[data-pp-theme="light"] .dy-form-wrap,
html[data-pp-theme="light"] .dy-hm-wrap,
html[data-pp-theme="light"] .dy-hm-hero,
html[data-pp-theme="light"] .dy-onboarding-wrap,
html[data-pp-theme="light"] .dy-ch-wrap,
html[data-pp-theme="light"] .dy-challenges-wrap,
html[data-pp-theme="light"] .dy-card,
html[data-pp-theme="light"] .dy-feed-card,
html[data-pp-theme="light"] .dy-post,
html[data-pp-theme="light"] .dy-outfit-card,
html[data-pp-theme="light"] .dy-review-card,
html[data-pp-theme="light"] .dy-brand-card,
html[data-pp-theme="light"] .dy-collapse-sectie,
html[data-pp-theme="light"] .dy-seizoen-kaart,
html[data-pp-theme="light"] .dy-challenge-kaart,
html[data-pp-theme="light"] .dy-leaderboard-rij,
html[data-pp-theme="light"] .pp-theme-setting,
html[data-pp-theme="light"] .dy-filter,
html[data-pp-theme="light"] .dy-rv-filter,
html[data-pp-theme="light"] .dy-tab,
html[data-pp-theme="light"] .dy-rv-chip,
html[data-pp-theme="light"] #dy-feed-filters .dy-filter,
html[data-pp-theme="light"] .dy-review-footer,
html[data-pp-theme="light"] .dy-rv-kaart-footer {
  background: #f4ecd9 !important;
  background-color: #f4ecd9 !important;
  background-image: none !important;
  color: #1c1810 !important;
}

/* Kill glass / dark gradients on chrome */
html[data-pp-theme="light"] .dy-topbar,
html[data-pp-theme="light"] .dy-nav,
html[data-pp-theme="light"] .dy-feed-nav-strip,
html[data-pp-theme="light"] #dy-feed-filters {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}
html[data-pp-theme="light"] .dy-topbar {
  border-bottom: 1px solid rgba(28, 24, 16, 0.14) !important;
}
html[data-pp-theme="light"] .dy-nav {
  border-top: 1px solid rgba(28, 24, 16, 0.14) !important;
}
html[data-pp-theme="light"] .dy-feed-nav-strip,
html[data-pp-theme="light"] #dy-feed-filters {
  border-bottom: 1px solid rgba(28, 24, 16, 0.14) !important;
}

/* Text / icons on chrome */
html[data-pp-theme="light"] .dy-topbar a,
html[data-pp-theme="light"] .dy-topbar button,
html[data-pp-theme="light"] .dy-topbar-btn,
html[data-pp-theme="light"] .dy-topbar-logo,
html[data-pp-theme="light"] .dy-topbar-logo span,
html[data-pp-theme="light"] .dy-topbar-sub,
html[data-pp-theme="light"] .dy-topbar-btn svg,
html[data-pp-theme="light"] .dy-nav-item,
html[data-pp-theme="light"] .dy-nav-item span,
html[data-pp-theme="light"] .dy-nav-item svg,
html[data-pp-theme="light"] .dy-sb-item,
html[data-pp-theme="light"] .dy-feed-nav-strip a,
html[data-pp-theme="light"] .dy-feed-nav-strip button,
html[data-pp-theme="light"] .dy-feed-nav-btn {
  color: #1c1810 !important;
  fill: currentColor;
}
html[data-pp-theme="light"] .dy-nav-item.active,
html[data-pp-theme="light"] .dy-nav-item.actief,
html[data-pp-theme="light"] .dy-nav-item.active span,
html[data-pp-theme="light"] .dy-nav-item.active svg,
html[data-pp-theme="light"] .dy-nav-item:hover,
html[data-pp-theme="light"] .dy-feed-nav-strip a:hover,
html[data-pp-theme="light"] .dy-feed-nav-strip button:hover {
  color: #b06205 !important;
}
html[data-pp-theme="light"] .dy-feed-nav-sep { color: rgba(28, 24, 16, 0.35) !important; }
html[data-pp-theme="light"] .dy-feed-nav-icon { color: #b06205 !important; }

/* Filters */
html[data-pp-theme="light"] #dy-feed-filters .dy-filter,
html[data-pp-theme="light"] .dy-filter,
html[data-pp-theme="light"] .dy-rv-chip {
  border: 1.5px solid rgba(28, 24, 16, 0.20) !important;
  color: #3a3220 !important;
}
html[data-pp-theme="light"] #dy-feed-filters .dy-filter.active,
html[data-pp-theme="light"] .dy-filter.active,
html[data-pp-theme="light"] .dy-filter.actief,
html[data-pp-theme="light"] .dy-pasvorm-btn.actief {
  background: #b06205 !important;
  border-color: #b06205 !important;
  color: #ffffff !important;
}

/* Cards: same canvas + border */
html[data-pp-theme="light"] .dy-card,
html[data-pp-theme="light"] .dy-collapse-sectie,
html[data-pp-theme="light"] .dy-seizoen-kaart,
html[data-pp-theme="light"] .dy-challenge-kaart,
html[data-pp-theme="light"] .pp-theme-setting {
  border: 1px solid rgba(28, 24, 16, 0.14) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

/* Profile / content text */
html[data-pp-theme="light"] .dy-story-name,
html[data-pp-theme="light"] .dy-story-naam,
html[data-pp-theme="light"] .dy-profiel-naam,
html[data-pp-theme="light"] .dy-profiel-email,
html[data-pp-theme="light"] .dy-profiel-stat-num,
html[data-pp-theme="light"] .dy-page-title,
html[data-pp-theme="light"] .dy-collapse-header,
html[data-pp-theme="light"] .dy-collapse-label,
html[data-pp-theme="light"] .dy-collapse-body,
html[data-pp-theme="light"] .dy-seizoen-label,
html[data-pp-theme="light"] .dy-seizoen-tier,
html[data-pp-theme="light"] .dy-seizoen-pts,
html[data-pp-theme="light"] .dy-seizoen-pts strong,
html[data-pp-theme="light"] .dy-seizoen-voordelen,
html[data-pp-theme="light"] .dy-seizoen-tier-info,
html[data-pp-theme="light"] .dy-seizoen-tier-info strong,
html[data-pp-theme="light"] .dy-cfg-community-naam,
html[data-pp-theme="light"] .dy-label,
html[data-pp-theme="light"] .dy-feed-leeg-titel,
html[data-pp-theme="light"] .dy-feed-leeg-tekst,
html[data-pp-theme="light"] .dy-challenge-titel,
html[data-pp-theme="light"] .dy-challenge-omschrijving,
html[data-pp-theme="light"] .dy-challenge-sub {
  color: #1c1810 !important;
}
html[data-pp-theme="light"] .dy-profiel-email-note,
html[data-pp-theme="light"] .dy-page-sub,
html[data-pp-theme="light"] .dy-feed-intro {
  color: #6a5c3e !important;
}
html[data-pp-theme="light"] .dy-seizoen-tier-rij {
  border-bottom-color: rgba(28, 24, 16, 0.12) !important;
}

/* Chat bubbles / message input */
html[data-pp-theme="light"] .dy-chat-bericht:not(.eigen) .dy-bericht-bubble {
  background: #faf6ea !important;
  color: #1c1810 !important;
  border-color: rgba(28, 24, 16, 0.14) !important;
}
html[data-pp-theme="light"] .dy-bericht-input,
html[data-pp-theme="light"] .dy-chat-input {
  background: #f4ecd9 !important;
  color: #1c1810 !important;
  border-color: rgba(28, 24, 16, 0.20) !important;
}

/* Forms */
html[data-pp-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html[data-pp-theme="light"] textarea,
html[data-pp-theme="light"] select,
html[data-pp-theme="light"] .dy-input,
html[data-pp-theme="light"] .dy-textarea,
html[data-pp-theme="light"] .dy-zoek-input,
html[data-pp-theme="light"] .dy-main:has(.dy-form-wrap) .dy-input,
html[data-pp-theme="light"] .dy-main:has(.dy-form-wrap) .dy-textarea {
  background: #f4ecd9 !important;
  color: #1c1810 !important;
  border: 1.5px solid rgba(28, 24, 16, 0.20) !important;
}
html[data-pp-theme="light"] input::placeholder,
html[data-pp-theme="light"] textarea::placeholder,
html[data-pp-theme="light"] .dy-input::placeholder,
html[data-pp-theme="light"] .dy-zoek-input::placeholder {
  color: rgba(28, 24, 16, 0.42) !important;
}
html[data-pp-theme="light"] .dy-main:has(.dy-form-wrap) .dy-label {
  color: #b06205 !important;
}

/* Modals elevated */
html[data-pp-theme="light"] .dy-modal,
html[data-pp-theme="light"] .dy-modal-inner,
html[data-pp-theme="light"] .pp-modal,
html[data-pp-theme="light"] .pp-modal-inner,
html[data-pp-theme="light"] [class*="modal-card"],
html[data-pp-theme="light"] [class*="modal-inner"],
html[data-pp-theme="light"] .dy-rv-popup,
html[data-pp-theme="light"] .dy-vp-sheet {
  background: #faf6ea !important;
  color: #1c1810 !important;
  border: 1px solid rgba(28, 24, 16, 0.14) !important;
  box-shadow: 0 8px 28px rgba(28, 24, 16, 0.12) !important;
}
html[data-pp-theme="light"] .dy-modal-titel,
html[data-pp-theme="light"] .dy-modal h2,
html[data-pp-theme="light"] .dy-modal h3,
html[data-pp-theme="light"] .dy-modal p,
html[data-pp-theme="light"] .dy-modal label {
  color: #1c1810 !important;
}
html[data-pp-theme="light"] .dy-modal-backdrop,
html[data-pp-theme="light"] .dy-rv-popup-backdrop,
html[data-pp-theme="light"] .dy-vp-backdrop,
html[data-pp-theme="light"] .dy-detail-overlay {
  background: rgba(28, 24, 16, 0.42) !important;
}

/* Inline dark shells */
html[data-pp-theme="light"] [style*="background: #0a0806"],
html[data-pp-theme="light"] [style*="background:#0a0806"],
html[data-pp-theme="light"] [style*="background: #0f0d06"],
html[data-pp-theme="light"] [style*="background:#0f0d06"] {
  background: #f4ecd9 !important;
  color: #1c1810 !important;
}

html[data-pp-theme="light"] .dy-progress-bar {
  background: rgba(28, 24, 16, 0.10) !important;
}

/* Primary CTAs */
html[data-pp-theme="light"] .dy-btn-primair,
html[data-pp-theme="light"] .dy-challenge-deelnemen,
html[data-pp-theme="light"] .dy-cfg-genereer-btn {
  background: #b06205 !important;
  color: #ffffff !important;
  border-color: #b06205 !important;
}

/* Theme selector */
.pp-theme-setting {
  margin: 12px 16px 8px;
  padding: 16px;
  position: relative;
  z-index: 5;
  pointer-events: auto !important;
}
.pp-theme-setting-title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #c67d06;
  margin-bottom: 10px;
}
.pp-theme-options { display: flex; gap: 10px; }
.pp-theme-option {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 10px;
  border-radius: 10px;
  border: 1.5px solid rgba(198, 125, 6, 0.30);
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer !important;
  min-height: 44px;
  pointer-events: auto !important;
  position: relative;
  z-index: 2;
}
.pp-theme-option:hover { border-color: #c67d06; }
.pp-theme-option.is-active {
  border-color: #c67d06;
  background: rgba(198, 125, 6, 0.12);
  box-shadow: 0 0 0 1px #c67d06;
}
html[data-pp-theme="light"] .pp-theme-option {
  color: #1c1810 !important;
  border-color: rgba(28, 24, 16, 0.20);
  background: #f4ecd9 !important;
}
html[data-pp-theme="light"] .pp-theme-option.is-active {
  background: rgba(198, 125, 6, 0.12) !important;
}

/* Story ring viewed state readable on light */
html[data-pp-theme="light"] .dy-story-ring.viewed {
  background: rgba(28, 24, 16, 0.08) !important;
}

/* Deel-knop: centreren zonder transform.
   Een tik zette transform uit (touch-hover), waardoor left:50% de knop
   en op brede schermen de hele bottom-nav naar rechts schoof. */
.dy-nav-center,
.dy-nav-center:hover,
.dy-nav-center:active,
.dy-nav-center:focus,
.dy-nav-center:focus-within {
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: none !important;
}
.dy-nav-center-ring,
.dy-nav-center-ring:hover,
.dy-nav-center-ring:active,
.dy-nav-center-ring:focus,
.dy-nav-center-ring:focus-visible {
  left: 0 !important;
  right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transform: none !important;
}
@media (min-width: 640px) {
  .dy-nav,
  .dy-nav:hover,
  .dy-nav:active,
  .dy-nav:focus,
  .dy-nav:focus-within {
    transform: translateX(-50%) !important;
  }
}