/* =========================================================
   Studie Positive Touch — Light Theme Overrides
   Loaded after all other CSS to invert dark → light
   ========================================================= */

[data-theme="light"] {
  /* ── Body & Main ───────────────────────────────────── */
  body {
    background: #ffffff !important;
    color: #333333;
  }

  body.cmp-frontpage,
  body.cmp-education,
  body.cmp-courseitem,
  body.cmp-training {
    background: #ffffff !important;
  }

  .main {
    background: #ffffff;
  }

  /* ── Header ────────────────────────────────────────── */
  .hdr {
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  }

  .theme-toggle {
    color: var(--pf-dark-navy);
  }

  .hdr-top {
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  }

  .hdr-side {
    background: #ffffff !important;
    color: #182048;
    box-shadow: 2px 0 12px rgba(0,0,0,0.06);
  }

  .hdr-side.side-menu {
    background: #ffffff !important;
  }

  .hdr.at-course .hdr-side {
    background: #ffffff !important;
  }

  .hdr.no-menu .hdr-side {
    background: #ffffff !important;
  }

  /* ── Gradient backgrounds → light ──────────────────── */
  .bg-gradient {
    background: #f5f5f5 !important;
    background: linear-gradient(299deg, #f5f5f5 0%, #ffffff 100%) !important;
  }

  .bg-sidepane {
    background: #ffffff !important;
    background: linear-gradient(205deg, #f5f5f5 0%, #ffffff 100%) !important;
  }

  /* ── Navigation ────────────────────────────────────── */
  .nav-main-link,
  .nav-top-link {
    color: #182048;
  }

  .nav-user-label {
    color: #182048;
  }

  .hdr-side .nav-main-link {
    color: #182048;
  }

  .hdr-side .nav-main-link:hover,
  .hdr-side .nav-main-link.is-active {
    background: rgba(24, 32, 72, 0.06);
    color: #182048;
  }

  .hdr-side .btn-link {
    color: #182048;
  }

  /* ── Text ──────────────────────────────────────────── */
  h1, h2, h3, h4, h5, h6 {
    color: #182048;
  }

  p, li, td, th {
    color: #333333;
  }

  a {
    color: #1DAE8D;
  }

  .text-navy {
    color: #182048 !important;
  }

  .text-white,
  .text-light {
    color: #182048 !important;
  }

  .text-green {
    color: #1DAE8D !important;
  }

  .text-orange {
    color: #FCB321 !important;
  }

  /* ── Cards / Tiles ─────────────────────────────────── */
  .tile, .card, .box-shadow, .box-shadow-16 {
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  }


  .btn-navy {
    color: #ffffff;
  }

  .open_tab {
    background: #ffffff;
  }

  .section_col {
    background: #f5f5f5;
  }

  /* ── Forms (pf-* classes) ──────────────────────────── */
  .pf-layout {
    background: #ffffff !important;
  }

  .pf-left {
    color: #182048;
  }

  .pf-title,
  .pf-subtitle {
    color: #182048;
  }

  .pf-form-card {
    background: #ffffff;
    box-shadow: 0 3px 16px rgba(0,0,0,0.08);
  }

  .pf-topbar {
    background: #ffffff;
  }

  .pf-topbar-logo {
    color: #182048 !important;
  }

  .pf-topbar-name-line1 {
    color: #182048 !important;
  }

  .pf-topbar-phone {
    color: #182048;
  }

  /* ── Auth pages (Vue SPA) ──────────────────────────── */
  .hdr-side-intro .title-h1 {
    color: #182048 !important;
  }

  .hdr-side-intro .title-h3 {
    color: #1DAE8D !important;
  }

  /* ── Wrapper / containers ──────────────────────────── */
  .wrapper {
    background: #f5f5f5;
  }

  .top-box {
    background: #f5f5f5;
  }

  /* ── Footer ────────────────────────────────────────── */
  .footer,
  .pt-docs-footer-meta {
    background: #f5f5f5;
    color: #6d7390;
  }

  .pf-footer {
    background: #f5f5f5;
    color: #333333;
  }

  /* ── Breadcrumbs ───────────────────────────────────── */
  .brc-title,
  .brc-link {
    color: #6d7390;
  }

  /* ── Course content ────────────────────────────────── */
  .fit-spacer {
    color: #333333;
  }

  .alinea-box {
    color: #333333;
  }

  /* ── FAQ / Accordion ───────────────────────────────── */
  .faq-question {
    color: #182048;
    background: #f5f5f5;
  }

  /* ── Misc dark elements ────────────────────────────── */
  .ban {
    background: transparent !important;
  }

  .section_col.section-grey .table {
    background: #ffffff;
    border-color: #d9deea;
  }

  .pt-auth-watermark {
    opacity: 0.12;
  }

  /* ── Input fields ──────────────────────────────────── */
  .iqf-input,
  .iqf-textarea,
  .iqf-select {
    color: var(--pf-dark-navy);
    background: #ffffff;
    border-color: #d9deea;
  }

  .iqf-label {
    color: var(--pf-dark-navy) !important;
  }

  /* ── Tables ────────────────────────────────────────── */
  .table .th {
    background: #f5f5f5;
    color: #182048;
  }

  .navigation-bar {
    background: #ffffff;
    box-shadow: 0 7px 10px rgba(0,0,0,0.5);
  }

  .table .tr:nth-child(even) {
    background: #fafafa;
  }

  /* ── Watermark image (dark → light variant) ───────── */
  .pt-auth-watermark {
    content: url("/public/images/identity/svg-logo-watermark-dark-t.svg");
  }


  /* Green/orange icons keep their color */
  .btn-bar .fa-undo,
  .btn-link .fa-undo {
    color: #1DAE8D !important;
  }

  /* ── Top bar brand text ───────────────────────────── */
  .pf-topbar-logo {
    color: #182048 !important;
  }

  .pf-topbar-name-line1 {
    color: #182048 !important;
  }

  .pf-topbar-name-line2 {
    color: #1DAE8D !important;
  }

  .pf-topbar-dot {
    color: #FCB321 !important;
  }

  .pf-topbar-tagline {
    color: #6d7390 !important;
  }

  /* ── Navigation links ─────────────────────────────── */
  .nav-main-link {
    color: #182048;
  }

  .nav-main-link:hover,
  .nav-main-link.is-active {
    color: #1DAE8D;
    background: rgba(29, 174, 141, 0.06);
  }

  .nav-main-label {
    color: inherit;
  }

  /* ── Header backgrounds ───────────────────────────── */
  .hdr {
    background: #ffffff;
  }

  .hdr-top {
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  }

  /* ── Vue SPA specific ─────────────────────────────── */
  .vue-app {
    background: #ffffff;
  }

  /* ── Course cards and tiles ────────────────────────── */
  .tile,
  .card,
  .course-card {
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  }

  /* Dashboard card: transparent white → solid gray */
  .dashboard-card {
    background-color: #eff1f3;
  }

  .dashboard-card .course-card {
    background: #ffffff;
  }

  /* ── Auth pages (side intro) ──────────────────────── */
  .hdr-side-intro .title-h1 {
    color: #182048 !important;
  }

  .hdr-side-intro .title-h3 {
    color: #1DAE8D !important;
  }

  /* ── User label in nav ────────────────────────────── */
  .nav-user-label {
    color: #182048;
  }

  /* ── Misc transparent elements → solid ────────────── */
  .fit {
    background: transparent;
  }

  .fit-spacer {
    background: transparent;
  }

  /* ── Course content area ──────────────────────────── */
  .courses-list,
  .catalog-list {
    background: transparent;
  }

  .course-entry {
    background: #ffffff;
    border-color: #d9deea;
  }

  /* ── SVG icons: white → dark in light mode ────────── */
  img[src*="svg-login-wit"],
  img[src*="svg-pijl-links-wit"],
  img[src*="svg-pijl-rechts-wit"],
  img[src*="svg-arrow-up-white"] {
    filter: brightness(0) invert(0.8) sepia(0.2) hue-rotate(200deg) saturate(3);
  }

  /* Keep white icons on colored buttons — they're visible on dark bg */
  .pt-landing-btn--green img[src*="svg-login-wit"],
  .pt-landing-btn--orange img[src*="svg-login-wit"],
  .pt-landing-btn--green img[src*="svg-pijl-rechts-wit"],
  .pt-landing-btn--orange img[src*="svg-pijl-rechts-wit"],
  .pt-landing-btn img[src*="svg-login-wit"],
  .pt-landing-btn img[src*="svg-pijl-rechts-wit"],
  .iqf-submit-btn img[src*="svg-login-wit"],
  .btn-link.btn-orange img[src*="svg-login-wit"] {
    filter: none !important;
  }
}


.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--pf-navy);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}

.theme-toggle:hover {
    background: #fff;
    color: var(--pf-dark-navy);
}

.theme-toggle-icon {
  display: block;
  width: 20px;
  height: 20px;
}

/* In light mode, toggle is on white bg → use navy icon color */
[data-theme="light"] .theme-toggle {
  color: var(--pf-dark-navy);
  background: #ffffff;

  &:hover {
    background: var(--pf-navy);
    color: #ffffff;
  }
}

/* On dark sidepane (navy bg), icon stays white */
[data-theme="dark"] .hdr-side .theme-toggle,
[data-theme="dark"] .bg-sidepane .theme-toggle {
  color: #ffffff;
}