/* ════════════════════════════════════════════════════════
   ATLAS THEME — Component overrides ONLY
   CSS Variables are injected by PHP via html[style]
   This file handles component-specific light mode tweaks
   ════════════════════════════════════════════════════════ */

/* ── Toggle button ──────────────────────────────────────── */
.atl-toggle {
  display: flex;
  align-items: center;
  gap: .4rem;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: .25rem .1rem;
  outline: none;
  border-radius: 50px;
}
.atl-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.atl-track {
  width: 44px; height: 24px;
  border-radius: 12px;
  background: var(--surface3, var(--surface2));
  border: 1.5px solid var(--border2);
  position: relative;
  flex-shrink: 0;
  pointer-events: none;
}
.atl-thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--gold);
  transition: transform .25s cubic-bezier(.4,0,.2,1), background .2s, left .25s;
  box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.atl-toggle[data-t="light"] .atl-thumb {
  transform: translateX(20px);
  background: #2563eb;
}
.atl-toggle[data-t="light"] .atl-track {
  background: #dbeafe;
  border-color: #93c5fd;
}

/* ── Smooth transitions on key elements ─────────────────── */
body,
.atlas-nav,
.section-card,
.atlas-card,
.atlas-hero,
.page-strip,
.auth-box,
.auth-wrap,
.stat-card,
.accordion-item,
.accordion-button,
.accordion-body,
.subject-card,
.atlas-footer,
.lang-menu,
.form-control,
.form-select,
.search-input,
.quiz-option,
.sbig,
.spanel,
.rich-block,
.jcard,
.jpanel-modal,
.jm-fact,
.jm-extra,
.tcard,
.tpanel,
.tm-stat,
.tm-extra,
.cat-tab,
.jtab,
.atlas-table th,
.atlas-table td {
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

/* ══════════════════════════════════════════════════════════
   LIGHT MODE COMPONENT OVERRIDES
   (CSS variables already set via html[style] by PHP/JS,
    these rules handle non-variable color specifics)
   ══════════════════════════════════════════════════════════ */

/* ── Navbar (light) ─────────────────────────────────────── */
html[data-theme="light"] .atlas-nav {
  box-shadow: 0 1px 12px rgba(0,0,0,.06);
}
html[data-theme="light"] .atlas-nav .nav-link { color: #4b5563; }
html[data-theme="light"] .atlas-nav .nav-link:hover,
html[data-theme="light"] .atlas-nav .nav-link.active { color: var(--gold); background: var(--gold-dim); }
html[data-theme="light"] .atlas-brand { color: var(--gold) !important; }
html[data-theme="light"] .brand-icon  { background: var(--gold-dim); border-color: var(--gold-border); color: var(--gold); }
html[data-theme="light"] .navbar-toggler { background: #f3f4f6; border-color: #d1d5db !important; }
html[data-theme="light"] .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%239a6e00' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
html[data-theme="light"] .navbar-collapse { background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; }

/* ── Hero ── */
html[data-theme="light"] .atlas-hero::before { opacity: .2; }
html[data-theme="light"] .hero-badge { background: var(--gold-dim); border-color: var(--gold-border); color: var(--gold); }

/* ── Accordion ── */
html[data-theme="light"] .accordion-button { color: #111827 !important; }
html[data-theme="light"] .accordion-button:not(.collapsed) { color: var(--gold) !important; }
html[data-theme="light"] .accordion-button::after { filter: none; }
html[data-theme="light"] .card-body h5 { color: var(--gold); }
html[data-theme="light"] .card-body p,
html[data-theme="light"] .card-body li { color: #4b5563; }
html[data-theme="light"] .card-body b  { color: #111827; }

/* ── Tables ── */
html[data-theme="light"] .atlas-table th { color: var(--gold); }
html[data-theme="light"] .atlas-table tr:hover td { background: #f9fafb; }

/* ── Quiz ── */
html[data-theme="light"] .quiz-option.correct { border-color: var(--green); background: rgba(26,143,84,.08); color: var(--green); }
html[data-theme="light"] .quiz-option.wrong   { border-color: var(--red);   background: var(--red-dim); color: var(--red); }
html[data-theme="light"] .quiz-score-circle   { background: var(--gold-dim); }

/* ── Lang dropdown ── */
html[data-theme="light"] .lang-menu .dropdown-item { color: #374151; }
html[data-theme="light"] .lang-menu .dropdown-item:hover,
html[data-theme="light"] .lang-menu .dropdown-item.active { background: var(--gold-dim); color: var(--gold); }

/* ── Section pages ── */
html[data-theme="light"] .subjects-hero,
html[data-theme="light"] .jud-hero,
html[data-theme="light"] .tr-hero { border-bottom: 1px solid #e5e7eb; }

/* Subject/Court/Treaty modals */
html[data-theme="light"] .rich-block p,
html[data-theme="light"] .rich-block li { color: #4b5563; }
html[data-theme="light"] .rich-block b  { color: #111827; }
html[data-theme="light"] .rb-label      { color: #374151; }
html[data-theme="light"] .jcard-title   { color: #111827; }
html[data-theme="light"] .jcard-desc    { color: #4b5563; }
html[data-theme="light"] .jm-desc       { color: #4b5563; }
html[data-theme="light"] .jm-extra p    { color: #4b5563; }
html[data-theme="light"] .jm-extra b    { color: #111827; }
html[data-theme="light"] .tcard-name    { color: #111827; }
html[data-theme="light"] .tcard-desc    { color: #4b5563; }
html[data-theme="light"] .tm-desc       { color: #4b5563; }
html[data-theme="light"] .sbig-name     { color: #111827; }
html[data-theme="light"] .sbig-desc     { color: #4b5563; }

/* ── Tab buttons ── */
html[data-theme="light"] .cat-tab.on { background: var(--gold-dim); border-color: var(--gold); color: var(--gold); }

/* ── Scrollbar ── */
html[data-theme="light"] ::-webkit-scrollbar-track { background: #f3f4f6; }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #d1d5db; }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* ── Alerts ── */
html[data-theme="light"] .alert-info { background: rgba(37,99,235,.07); border-color: rgba(37,99,235,.2); color: #1d4ed8; }

/* ════════════════════════════════════════════════════════
   LIGHT MODE — TEXT COLOR FORCE FIX
   Overrides any hardcoded #fff / white text in style.css
   Uses !important to guarantee visibility on white bg
   ════════════════════════════════════════════════════════ */

/* ── Hero section ── */
html[data-theme="light"] .hero-title          { color: #111827 !important; }
html[data-theme="light"] .hero-title span     { color: var(--gold) !important; }
html[data-theme="light"] .hero-sub            { color: #6b7280 !important; }
html[data-theme="light"] .hero-badge          { color: var(--gold) !important; }

/* ── Page headings ── */
html[data-theme="light"] .section-title       { color: #111827 !important; }
html[data-theme="light"] .page-strip h1       { color: #111827 !important; }
html[data-theme="light"] .page-strip p        { color: #6b7280 !important; }

/* ── Section hero strips (subjects, judiciary, treaties) ── */
html[data-theme="light"] .subjects-hero h1,
html[data-theme="light"] .jud-hero h1,
html[data-theme="light"] .tr-hero h1          { color: #111827 !important; }
html[data-theme="light"] .subjects-hero p,
html[data-theme="light"] .jud-hero p,
html[data-theme="light"] .tr-hero p           { color: #6b7280 !important; }

/* ── Dashboard ── */
html[data-theme="light"] .stat-value          { color: #111827 !important; }
html[data-theme="light"] .stat-label          { color: #6b7280 !important; }
html[data-theme="light"] .dashboard-welcome,
html[data-theme="light"] .dashboard-welcome ~ p { color: #6b7280 !important; }

/* ── Section cards (landing page) ── */
html[data-theme="light"] .section-card .sc-title  { color: #111827 !important; }
html[data-theme="light"] .section-card .sc-desc   { color: #6b7280 !important; }
html[data-theme="light"] .section-card .sc-arrow  { color: var(--gold) !important; }

/* ── Atlas cards ── */
html[data-theme="light"] .atlas-card .card-body p { color: #4b5563 !important; }

/* ── Accordion / Lessons ── */
html[data-theme="light"] .subject-card .s-title   { color: #111827 !important; }
html[data-theme="light"] .subject-card .s-sub      { color: #9ca3af !important; }
html[data-theme="light"] .accordion-button          { color: #111827 !important; }
html[data-theme="light"] .accordion-button:not(.collapsed) { color: var(--gold) !important; }

/* ── Subject cards (subjects page) ── */
html[data-theme="light"] .sbig-name               { color: #111827 !important; }
html[data-theme="light"] .sbig-name-en            { color: #9ca3af !important; }
html[data-theme="light"] .sbig-desc               { color: #4b5563 !important; }
html[data-theme="light"] .sbig-btn                { color: var(--gold) !important; }

/* ── Court cards (judiciary page) ── */
html[data-theme="light"] .jcard-title             { color: #111827 !important; }
html[data-theme="light"] .jcard-title-en          { color: #9ca3af !important; }
html[data-theme="light"] .jcard-desc              { color: #4b5563 !important; }
html[data-theme="light"] .jcard-cta               { color: var(--gold) !important; }

/* ── Treaty cards ── */
html[data-theme="light"] .tcard-name              { color: #111827 !important; }
html[data-theme="light"] .tcard-name-en           { color: #9ca3af !important; }
html[data-theme="light"] .tcard-desc              { color: #4b5563 !important; }
html[data-theme="light"] .tcard-cta               { color: var(--gold) !important; }
html[data-theme="light"] .tcard-parties           { color: #6b7280 !important; }

/* ── Modals (subjects, judiciary, treaties) ── */
html[data-theme="light"] .sp-title                { color: #fff !important; }  /* on dark gradient bg — stays white */
html[data-theme="light"] .jm-title                { color: #fff !important; }  /* on dark gradient bg — stays white */
html[data-theme="light"] .tm-title                { color: #fff !important; }  /* on dark gradient bg — stays white */
html[data-theme="light"] .rich-block p            { color: #4b5563 !important; }
html[data-theme="light"] .rich-block li           { color: #4b5563 !important; }
html[data-theme="light"] .rich-block b            { color: #111827 !important; }
html[data-theme="light"] .rb-label                { color: #374151 !important; }
html[data-theme="light"] .jm-fact-v               { color: var(--ac, var(--gold)) !important; }
html[data-theme="light"] .jm-desc                 { color: #4b5563 !important; }
html[data-theme="light"] .jm-extra                { color: #4b5563 !important; }
html[data-theme="light"] .jm-extra b              { color: #111827 !important; }
html[data-theme="light"] .tm-desc                 { color: #4b5563 !important; }
html[data-theme="light"] .tm-extra                { color: #4b5563 !important; }

/* ── Quiz ── */
html[data-theme="light"] .quiz-option             { color: #111827 !important; }
html[data-theme="light"] .quiz-option:hover       { color: var(--gold) !important; }

/* ── Auth pages ── */
html[data-theme="light"] .auth-logo h2            { color: #111827 !important; }
html[data-theme="light"] .auth-logo p             { color: #6b7280 !important; }
html[data-theme="light"] .form-label              { color: #374151 !important; }

/* ── Stats strip (landing page) ── */
html[data-theme="light"] [style*="color:var(--muted)"],
html[data-theme="light"] .text-muted-atlas        { color: #6b7280 !important; }

/* ── Tables ── */
html[data-theme="light"] .atlas-table td          { color: #111827 !important; }
html[data-theme="light"] .atlas-table th          { color: var(--gold) !important; }

/* ── Navbar links ── */
html[data-theme="light"] .atlas-nav .nav-link     { color: #4b5563 !important; }
html[data-theme="light"] .atlas-nav .nav-link.active,
html[data-theme="light"] .atlas-nav .nav-link:hover { color: var(--gold) !important; }

/* ── Footer ── */
html[data-theme="light"] .footer-brand            { color: var(--gold) !important; }
html[data-theme="light"] .footer-copy             { color: #9ca3af !important; }
html[data-theme="light"] .footer-links a          { color: #6b7280 !important; }
html[data-theme="light"] .footer-links a:hover    { color: var(--gold) !important; }

/* ── Tab buttons ── */
html[data-theme="light"] .cat-tab                 { color: #6b7280 !important; }
html[data-theme="light"] .cat-tab.on              { color: var(--gold) !important; }
html[data-theme="light"] .jtab                    { color: #6b7280 !important; }

/* ── Badges ── */
html[data-theme="light"] .badge-gold              { color: var(--badge-color) !important; }

/* ── Mono text ── */
html[data-theme="light"] .mono                    { color: #6b7280 !important; }