/* ============================================================
   PolicyLive — Theme layer
   1. Corner toggle button (sun / moon)
   2. Dark theme (data-theme="dark") overrides

   Loaded AFTER style.css · partner.css · employee.css
   ============================================================ */

/* ============================================================
   0. MISSING TOKENS (used by style.css but never defined)
   ============================================================ */
:root {
  --border: var(--grey-mid);
  --radius-sm: 10px;
  --shadow-md: 0 12px 28px rgba(13, 46, 89, 0.14);
  --text-muted: var(--grey);
}

/* ============================================================
   1. CORNER TOGGLE BUTTON
   ============================================================ */
.pl-theme-toggle {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--grey-mid);
  background: var(--white);
  color: var(--navy);
  box-shadow: 0 12px 28px rgba(13, 46, 89, 0.18);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  z-index: 950;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease,
    box-shadow 0.3s ease, transform 0.25s ease;
}

.pl-theme-toggle:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(13, 46, 89, 0.24);
}

.pl-theme-toggle:active { transform: translateY(-1px) scale(0.96); }

.pl-theme-toggle > span {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  line-height: 0;
}

.pl-theme-toggle svg {
  width: 20px;
  height: 20px;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}

/* Light mode → show the moon (click for dark) */
.pl-theme-toggle__icon--moon { opacity: 1; transform: rotate(0) scale(1); }
.pl-theme-toggle__icon--sun { opacity: 0; transform: rotate(-90deg) scale(0.5); }

/* Dark mode → show the sun (click for light) */
[data-theme="dark"] .pl-theme-toggle__icon--moon { opacity: 0; transform: rotate(90deg) scale(0.5); }
[data-theme="dark"] .pl-theme-toggle__icon--sun { opacity: 1; transform: rotate(0) scale(1); }

[data-theme="dark"] .pl-theme-toggle {
  background: #1a2432;
  border-color: #2c3a4c;
  color: #ffd166;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
}

/* Keep the page "back to top" button above the toggle */
body.has-theme-toggle .back-top { bottom: 84px; }

/* ============================================================
   2. DARK THEME
   ============================================================ */
[data-theme="dark"] {
  color-scheme: dark;

  --white: #131a24;        /* surfaces (cards, panels, headers)   */
  --black: #e7edf7;        /* body text                           */
  --grey: #97a5b8;         /* muted text                          */
  --grey-light: #0f151e;   /* subtle panels / section background  */
  --grey-mid: #26313f;     /* borders                             */
  --navy: #9cc2f0;         /* brand text                          */
  --navy-dark: #0a1a2c;    /* footer / deep navy                  */
  --navy-soft: #1b4a7d;
  --orange-soft: #2b1b10;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.65);
}

/* ---------- Page canvas ---------- */
[data-theme="dark"] body { background: #0b0f16; }
[data-theme="dark"] .partner-app { background: #0b0f16; }
[data-theme="dark"] .site-footer { background: #081523; }

/* ---------- Text that sits on dark / coloured surfaces ---------- */
[data-theme="dark"] ::selection { background: var(--orange); color: #fff; }

[data-theme="dark"] .section--navy,
[data-theme="dark"] .section--navy h2,
[data-theme="dark"] .section--navy h3,
[data-theme="dark"] .section--navy h4 { color: #fff; }

[data-theme="dark"] .btn--primary,
[data-theme="dark"] .btn--primary:hover { color: #fff; }

[data-theme="dark"] .btn--navy { background: #123a63; color: #fff; }
[data-theme="dark"] .btn--navy:hover { background: #1b4a7d; color: #fff; }

[data-theme="dark"] .btn--ghost-light { color: #fff; }
[data-theme="dark"] .btn--ghost-light:hover { background: #fff; color: #0d2e59; border-color: #fff; }

[data-theme="dark"] .btn.is-loading::before { border-top-color: #fff; }

[data-theme="dark"] .home-login-menu summary.nav-link { background: #123a63; color: #fff; }
[data-theme="dark"] .home-login-menu summary.nav-link:hover { background: #1b4a7d; color: #fff; }

[data-theme="dark"] .header-phone,
[data-theme="dark"] .header-phone:hover { color: #fff; }

[data-theme="dark"] .hero { color: #fff; }
[data-theme="dark"] .hero h1 { color: #fff; }
[data-theme="dark"] .hero-card-head .icon-chip svg { color: #fff; }
[data-theme="dark"] .hero-card-head h3 { color: #fff; }
[data-theme="dark"] .category-chips li:hover svg { color: #fff; }

[data-theme="dark"] .page-hero { color: #fff; }
[data-theme="dark"] .page-hero h1 { color: #fff; }

[data-theme="dark"] .feature-card:hover .icon-chip svg { color: #fff; }
[data-theme="dark"] .step-num { color: #fff; }
[data-theme="dark"] .step h3 { color: #fff; }
[data-theme="dark"] .media-frame h3 { color: #fff; }
[data-theme="dark"] .badge-float { color: #fff; }
[data-theme="dark"] .badge-float strong { color: #fff; }

[data-theme="dark"] .info-panel { color: #fff; }
[data-theme="dark"] .info-panel h3 { color: #fff; }
[data-theme="dark"] .info-list .ic svg { color: #fff; }
[data-theme="dark"] .info-list .value { color: #fff; }

[data-theme="dark"] .disclaimer-note { color: #fff; }
[data-theme="dark"] .disclaimer-note .ic svg { color: #fff; }

[data-theme="dark"] .cta-band h2 { color: #fff; }
[data-theme="dark"] .footer-phone { color: #fff; }
[data-theme="dark"] .back-top { color: #fff; }
[data-theme="dark"] .skip-link { color: #fff; }

[data-theme="dark"] .partner-form-mark { color: #fff; }
[data-theme="dark"] .partner-steps b { color: #fff; }
[data-theme="dark"] .partner-info h3 { color: #fff; }
[data-theme="dark"] .partner-help a { color: #fff; }
[data-theme="dark"] .partner-dashboard-nav a:hover,
[data-theme="dark"] .partner-dashboard-nav a.is-active { color: #fff; }

[data-theme="dark"] .option-tab:hover,
[data-theme="dark"] .option-tab.is-active { color: #fff; }
[data-theme="dark"] .flow-button:hover,
[data-theme="dark"] .flow-button.is-complete { color: #fff; }
[data-theme="dark"] .flow-actions .share-button:hover { color: #fff; }

[data-theme="dark"] .terms-list li::before { color: #fff; }
[data-theme="dark"] .camp-tab.is-active { color: #fff; }
[data-theme="dark"] .icon-btn .tip { color: #fff; }
[data-theme="dark"] .call-btn { color: #fff; }
[data-theme="dark"] .call-btn:hover { color: #fff; }

/* ---------- Navy panels (keep them deep navy, not light blue) ---------- */
[data-theme="dark"] .section--navy {
  background: linear-gradient(160deg, #123a63 0%, #0a1a2c 100%);
}
[data-theme="dark"] .hero {
  background:
    radial-gradient(900px 500px at 85% 15%, rgba(252, 105, 0, 0.16), transparent 60%),
    radial-gradient(700px 500px at 5% 90%, rgba(27, 74, 125, 0.55), transparent 65%),
    linear-gradient(155deg, #123a63 0%, #0a1a2c 100%);
}
[data-theme="dark"] .page-hero {
  background:
    radial-gradient(800px 400px at 90% 20%, rgba(252, 105, 0, 0.15), transparent 60%),
    linear-gradient(155deg, #123a63 0%, #0a1a2c 100%);
}
[data-theme="dark"] .about-media .media-frame {
  background: linear-gradient(155deg, #123a63 0%, #0a1a2c 100%);
}
[data-theme="dark"] .info-panel {
  background: linear-gradient(160deg, #123a63 0%, #0a1a2c 100%);
}
[data-theme="dark"] .cta-band {
  background:
    radial-gradient(700px 300px at 90% 50%, rgba(252, 105, 0, 0.18), transparent 65%),
    linear-gradient(150deg, #123a63 0%, #0a1a2c 100%);
}
[data-theme="dark"] .partner-hero {
  background: linear-gradient(135deg, #123a63, #0a1a2c);
}
[data-theme="dark"] .disclaimer-note { background: #102b48; }
[data-theme="dark"] .partner-form-mark { background: #123a63; }
[data-theme="dark"] .partner-steps b { background: #123a63; }
[data-theme="dark"] .partner-dashboard-nav a:hover,
[data-theme="dark"] .partner-dashboard-nav a.is-active { background: #123a63; }
[data-theme="dark"] .option-tab:hover,
[data-theme="dark"] .option-tab.is-active { background: #123a63; }
[data-theme="dark"] .flow-button:hover,
[data-theme="dark"] .flow-button.is-complete { background: #123a63; }
[data-theme="dark"] .flow-actions .share-button:hover { background: #123a63; }
[data-theme="dark"] .home-login-menu summary.nav-link { background: #123a63; }
[data-theme="dark"] .btn--navy { background: #123a63; }
[data-theme="dark"] .terms-list li::before { background: #123a63; }
[data-theme="dark"] .camp-tab.is-active { background: #123a63; border-color: #123a63; }
[data-theme="dark"] .icon-btn .tip { background: #123a63; }
[data-theme="dark"] .call-btn { background: #123a63; }
[data-theme="dark"] .call-btn:hover { background: #1b4a7d; }
[data-theme="dark"] .funnel-bar i { background: #3d74ad; }

/* ---------- Surfaces (hard-coded whites / soft greys) ---------- */
[data-theme="dark"] .site-header { background: var(--white); }
[data-theme="dark"] .partner-header { background: var(--white); border-bottom-color: var(--grey-mid); }
[data-theme="dark"] .home-login-menu__dropdown { background: var(--white); }
[data-theme="dark"] .home-login-menu__dropdown a:hover { background: var(--orange-soft); }
[data-theme="dark"] .nav-menu { background: var(--white); }
[data-theme="dark"] .dropdown { background: var(--white); }
[data-theme="dark"] .dropdown::before { background: var(--white); }
[data-theme="dark"] .option-panel { background: var(--white); border-color: var(--grey-mid); }
[data-theme="dark"] .flow-button { background: var(--white); }
[data-theme="dark"] .card,
[data-theme="dark"] .feature-card,
[data-theme="dark"] .legal-toc,
[data-theme="dark"] .legal-content,
[data-theme="dark"] .disclaimer-item,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .campaign-card,
[data-theme="dark"] .steps--light .step { background: var(--white); }
[data-theme="dark"] .page-loader { background: #0b0f16; }
[data-theme="dark"] .page-loader-pct { color: var(--navy); }

[data-theme="dark"] .media-frame .logo-box,
[data-theme="dark"] .footer-brand .logo-chip { background: #fff; }

/* ---------- Partner portal ---------- */
[data-theme="dark"] .portal-nav a:hover,
[data-theme="dark"] .portal-nav a.is-active { background: #1a2432; }
[data-theme="dark"] .partner-benefits article,
[data-theme="dark"] .partner-steps-grid article,
[data-theme="dark"] .dashboard-summary article,
[data-theme="dark"] .stat,
[data-theme="dark"] .modal-card,
[data-theme="dark"] .camp-tab,
[data-theme="dark"] .dash-side,
[data-theme="dark"] .dash-menu,
[data-theme="dark"] .dash-search,
[data-theme="dark"] .dash-user,
[data-theme="dark"] .umenu,
[data-theme="dark"] table.camp-table { background: var(--white); }

[data-theme="dark"] .dash-link.is-active,
[data-theme="dark"] .sub-menu a:hover,
[data-theme="dark"] .umenu a:hover,
[data-theme="dark"] .umenu button:hover,
[data-theme="dark"] .clogo,
[data-theme="dark"] .pill--info { background: #1a2432; }

[data-theme="dark"] .partner-stepper span { background: #1a2432; }
[data-theme="dark"] .partner-stepper span.active { background: #0f2f2d; color: #3fd0c8; }
[data-theme="dark"] .partner-benefits b,
[data-theme="dark"] .partner-steps-grid b { background: #0f2f2d; color: #3fd0c8; }
[data-theme="dark"] .campaign-tag { color: #3fd0c8; }
[data-theme="dark"] .referral-placeholder,
[data-theme="dark"] .empty-state,
[data-theme="dark"] .campaign-note,
[data-theme="dark"] .terms-list li { background: #0f151e; }
[data-theme="dark"] .campaign-note code { background: #1a2432; }
[data-theme="dark"] .terms-list.terms-highlight li { background: #0d2219; border-color: #1f4a33; }
[data-theme="dark"] .pill--on { background: #0d2b1c; color: #6ee7a8; }
[data-theme="dark"] .dot { background: #3a4655; }
[data-theme="dark"] .camp-table th { border-bottom-color: #1e2733; }
[data-theme="dark"] .camp-table td { border-bottom-color: #1a2330; }

/* ---------- Employee / MIS portal ---------- */
[data-theme="dark"] .emp-card,
[data-theme="dark"] .emp-modal-card { background: var(--white); }
[data-theme="dark"] .note-item { background: #0f151e; border-color: #1e2733; }
[data-theme="dark"] .auto-block { background: #0f151e; border-color: #2c3849; }
[data-theme="dark"] .emp-form input:disabled,
[data-theme="dark"] .emp-form textarea:disabled,
[data-theme="dark"] .emp-form select:disabled { background: #1a2432; color: var(--grey); }
[data-theme="dark"] .perf-tile { background: #0f151e; border-color: #1e2733; }
[data-theme="dark"] .perf-tile--hl { background: #132030; border-color: #24384f; }
[data-theme="dark"] .cb-item { background: #0f151e; border-color: #1e2733; }
[data-theme="dark"] .cb-item--due { background: #2a1518; border-color: #6b2b2b; }
[data-theme="dark"] .funnel-bar,
[data-theme="dark"] .target-bar { background: #1a2432; }
[data-theme="dark"] .pill--warn { background: #33240d; color: #fbbf24; }
[data-theme="dark"] .pill--danger { background: #331416; color: #fca5a5; }
[data-theme="dark"] .pill--muted { background: #1a2432; color: #9fb0c6; }
[data-theme="dark"] .pill--orange { background: #33240d; color: #fdba74; }
[data-theme="dark"] .pill--violet { background: #251a3d; color: #c4b5fd; }
[data-theme="dark"] .emp-banner { background: #0d2b1c; border-color: #1d5b3a; color: #a7f3d0; }
[data-theme="dark"] .emp-banner b { color: #6ee7a8; }
[data-theme="dark"] .auto-ok { color: #6ee7a8; }
[data-theme="dark"] .auto-warn { color: #fbbf24; }
[data-theme="dark"] .target-bar i { background: linear-gradient(90deg, #2f6fb0, #22c55e); }
[data-theme="dark"] .campaign-status { background: #1a2432; color: var(--grey); }
[data-theme="dark"] .partner-steps span:not(.is-current) b { background: #2a3546; color: var(--grey); }
[data-theme="dark"] .dash-logo--img img,
[data-theme="dark"] .dash-top__logo img { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.08); }

/* ---------- Admin console (inline styles in admin/dashboard.html) ---------- */
[data-theme="dark"] .admin-table { background: var(--white); }
[data-theme="dark"] .admin-table th,
[data-theme="dark"] .admin-table td { border-bottom-color: #1e2733; }
[data-theme="dark"] .kv-sub { border-top-color: #1e2733; }
[data-theme="dark"] .filter-tabs button { background: var(--white); }
[data-theme="dark"] .filter-tabs button.is-active { background: #123a63; border-color: #123a63; color: #fff; }
[data-theme="dark"] .pill--active { background: #0d2b1c; color: #6ee7a8; }
[data-theme="dark"] .pill--inactive { background: #331416; color: #fca5a5; }
[data-theme="dark"] .dot { background: #3a4655; }

/* ---------- Forms ---------- */
[data-theme="dark"] .form-control { background: #0f151e; color: var(--black); }
[data-theme="dark"] .form-control:focus { background: var(--white); }
[data-theme="dark"] .form-group.has-error .form-control { background: #2a1518; }
[data-theme="dark"] .form-alert.success { background: #0d2b1c; color: #6ee7a8; border-color: #1d5b3a; }
[data-theme="dark"] .form-alert.error { background: #2a1518; color: #fca5a5; border-color: #6b2b2b; }
[data-theme="dark"] .form-alert.info { background: #101f38; color: #93c5fd; border-color: #2a4a80; }
[data-theme="dark"] .consent { background: var(--orange-soft); border-color: rgba(252, 105, 0, 0.3); }

/* ---------- Break / lunch overlay ---------- */
[data-theme="dark"] .timer-overlay { background: #081523; }

/* ---------- Small screens ---------- */
@media (max-width: 768px) {
  .pl-theme-toggle { right: 14px; bottom: 14px; width: 42px; height: 42px; }
  body.has-theme-toggle .back-top { bottom: 70px; }
  .pl-theme-toggle svg { width: 18px; height: 18px; }
}
