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

[data-theme="light"] {
  /* ── Body & Main ───────────────────────────────────── */
  body {
    background: #ffffff !important;
    color: var(--pf-dark-navy);
  }

  .main {
    background: #ffffff;
  }

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

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

  .hdr-side {
    background: #ffffff;
    color: #182048;
  }

  .hdr.at-course .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);
  }

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

  a {
    color: #1DAE8D;
  }

  .pt-auth-page {
    background: #ffffff;
  }

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

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

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

  .open_tab {
    background: #ffffff;
  }

  .section_col {
    background: #f5f5f5;
  }

  /* ── Forms ─────────────────────────────────────────── */
  .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-logo {
    color: #182048 !important;
  }

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

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

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

  .top-box {
    background: #fff;
  }

  .login {
    background: #ffffff;
  }

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

  .pf-footer {
    background: #f5f5f5;
    color: var(--pf-dark-navy);
  }

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

  /* ── Course content ────────────────────────────────── */
  .fit-spacer {
    color: var(--pf-dark-navy);
  }

  .alinea-box {
    color: var(--pf-dark-navy);
  }

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

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

  /* Invert white logos/images on dark bg if needed */
  .pt-auth-watermark {
    opacity: 0.15;
  }

  /* ── Docs Wrapper (logged-in portal) ──────────────── */
  body.pt-docs-shell {
    --pt-docs-navy: #182048;
    --pt-docs-panel: #f5f5f5;
    --pt-docs-text: var(--pf-dark-navy);
    --pt-docs-muted: #6d7390;
    background: #ffffff;
    color: var(--pf-dark-navy);
  }

  body.pt-docs-shell .pt-docs-userbar {
    background: #ffffff;
  }

  body.pt-docs-shell .main.at-home {
    background: #ffffff;
  }

  /* Sidebar */
  body.pt-docs-shell .pt-docs-nav .nav-sub-link {
    color: #182048;
  }

  body.pt-docs-shell .pt-docs-nav > .widget > .nav-sub > .nav-sub-list > .nav-sub-item > .nav-sub-link {
    color: #182048;
    border-bottom-color: rgba(24, 32, 72, 0.15);
  }

  body.pt-docs-shell .pt-docs-nav .nav-sub-item.is-open > .nav-sub-list {
    background: #f5f5f5;
    border-color: rgba(24, 32, 72, 0.10);
  }

  body.pt-docs-shell .pt-docs-nav .nav-sub-list .nav-sub-list .nav-sub-link {
    color: var(--pf-dark-navy);
  }

  body.pt-docs-shell .pt-docs-nav .nav-sub-list .nav-sub-list .nav-sub-link:before {
    color: var(--pt-docs-green, #1DAE8D);
  }

  body.pt-docs-shell .pt-docs-nav .nav-sub-list .nav-sub-list .nav-sub-item.is-active .nav-sub-link {
    color: #182048;
  }

  /* Breadcrumbs */
  body.pt-docs-shell .brc-title,
  body.pt-docs-shell .brc-link {
    color: #6d7390;
  }

  body.pt-docs-shell .brc-item.is-active .brc-label-text {
    color: #182048;
  }

  body.pt-docs-shell .brc-label:after {
    color: #b0b8d0;
  }

  /* User bar */
  body.pt-docs-shell .pt-docs-user-name {
    color: #6d7390;
  }

  body.pt-docs-shell .pt-docs-user-link {
    color: #182048;
  }

  /* Content area */
  body.pt-docs-shell .pt-docs-content .content {
    color: var(--pf-dark-navy);
  }

  /* Mobile menu */
  body.pt-docs-shell .pt-mobile-menu-toggle span {
    background: #182048;
  }

  body.pt-docs-shell .pt-mobile-submenu-selector {
    background: #f5f5f5;
    border-color: rgba(24, 32, 72, 0.15);
    color: #182048;
  }

  /* Icon/button colors in light mode */
  body.pt-docs-shell .btn-link .fas,
  body.pt-docs-shell .btn-link .far,
  body.pt-docs-shell .btn-link .fab {
    color: #182048;
  }

  .btn-link .fas,
  .btn-link .far,
  .btn-link .fab {
    color: #182048;
  }

  /* Nav icons in sidebar */
  body.pt-docs-shell .pt-docs-nav .nav-sub-icon {
    border-right-color: currentColor;
    border-bottom-color: currentColor;
  }

  /* Icons in user bar */
  body.pt-docs-shell .pt-docs-user-link .fas,
  body.pt-docs-shell .pt-docs-user-link .far,
  body.pt-docs-shell .pt-docs-user-link .fab {
    color: inherit;
  }

  /* All Font Awesome icons should adapt */
  .hdr .fas,
  .hdr .far,
  .hdr .fab {
    color: inherit;
  }

  .nav-main-link .fas,
  .nav-main-link .far,
  .nav-main-link .fab,
  .nav-top-link .fas,
  .nav-top-link .far,
  .nav-top-link .fab {
    color: inherit;
  }

  /* Exception: icons on dark navy buttons should stay white */
  .btn-navy .fas,
  .btn-navy .far,
  .btn-navy .fab {
    color: inherit;
  }

  .btn-navy:hover .fas,
  .btn-navy:hover .far,
  .btn-navy:hover .fab {
    color: #ffffff;
  }

  /* Icons in green/orange pill buttons stay white */
  .pt-docs-user-link.is-logout .fas,
  .pt-docs-user-link.is-logout .far,
  .pt-docs-user-link.is-logout .fab,
  .pt-docs-user-link.btn .fas,
  .pt-docs-user-link.btn .far,
  .pt-docs-user-link.btn .fab {
    color: #ffffff;
  }

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

  /* ── 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 fine as-is */
  .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;
  }

  .pf-topbar-back {
    color: white;
  }

  .pf-reviews-btn {
    background: var(--pf-green);
  }

  .pf-reviews-dot:not(.is-active) {
    background: var(--pf-lgrey);
  }

  .pf-usp-list {
    background: var(--pf-lgrey);
    .pf-usp-item {
        color: var(--pf-dark-navy);
    }
  }

  .pf-topbar-nav, .pf-topbar {
    background: var(--pf-lgrey);
  }

  @media screen and (max-width: 1100px) {
    .nav-sub {
        background: #ffffff;
    }
  }
}