/* ============================================================
   4N Magic — Dark Theme
   Palette: Deep Space · Midnight Indigo · Aurora Teal
   ============================================================ */

/* ─── Dark mode variables ─── */
[data-theme="dark"] {
  /* Backgrounds — deep space layers */
  --bg-base:     #0D0F1A;
  --bg-mid:      #111320;
  --bg-deep:     #0A0C15;
  --surface:     #161929;
  --surface2:    #1C1F35;

  /* Text */
  --ink:         #E8EAFA;
  --ink-mid:     #A8B0D8;
  --ink-soft:    #6B73A0;
  --ink-ghost:   #3D4468;

  /* Teal — brighter, more electric in dark */
  --teal:        #14D4CE;
  --teal-light:  #20F0EA;
  --teal-glow:   rgba(20,212,206,0.22);
  --teal-pale:   rgba(20,212,206,0.10);
  --teal-border: rgba(20,212,206,0.22);

  /* Amber */
  --amber:       #FBBF24;
  --amber-light: #FDE68A;
  --amber-glow:  rgba(251,191,36,0.20);
  --amber-pale:  rgba(251,191,36,0.10);

  /* Violet */
  --violet:      #A78BFA;
  --violet-pale: rgba(167,139,250,0.12);

  /* Borders */
  --border:      rgba(100,115,220,0.12);
  --border-md:   rgba(120,130,230,0.20);

  /* Category colors — slightly lighter for dark bg */
  --cat-history:    #60A5FA;
  --cat-culture:    #C084FC;
  --cat-numerology: #FBBF24;
  --cat-date:       #34D399;
  --cat-science:    #38BDF8;

  /* Shadows — deep and moody */
  --shadow-sm:   0 1px 4px rgba(0,0,0,0.35), 0 2px 12px rgba(0,0,0,0.25);
  --shadow-md:   0 4px 24px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.30);
  --shadow-lg:   0 8px 48px rgba(0,0,0,0.55), 0 2px 10px rgba(0,0,0,0.35);
  --shadow-teal: 0 0 40px rgba(20,212,206,0.28), 0 4px 20px rgba(20,212,206,0.14);
}

/* ─── Dark background canvas ─── */
[data-theme="dark"] .bg-canvas::before {
  background:
    radial-gradient(ellipse 65% 50% at 5%  10%,  rgba(20,212,206,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 95% 85%,  rgba(167,139,250,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 45% 45% at 50% 50%,  rgba(251,191,36,0.05) 0%, transparent 55%),
    radial-gradient(ellipse 80% 30% at 80% 15%,  rgba(96,165,250,0.07) 0%, transparent 60%);
}

[data-theme="dark"] .bg-canvas::after {
  background-image: radial-gradient(rgba(80,100,200,0.18) 1px, transparent 1px);
}

/* ─── Header dark ─── */
[data-theme="dark"] .header {
  background: rgba(13,15,26,0.88);
  border-bottom-color: rgba(100,115,220,0.12);
}

/* ─── Modal dark ─── */
[data-theme="dark"] .modal {
  background: var(--surface);
  border-color: var(--border-md);
  box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 4px 20px rgba(0,0,0,0.4);
}
[data-theme="dark"] .modal-overlay {
  background: rgba(5,7,15,0.65);
}

/* ─── Search box dark ─── */
[data-theme="dark"] .search-box {
  background: var(--surface);
  border-color: var(--border-md);
  box-shadow: 0 4px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(80,100,200,0.08);
}
[data-theme="dark"] .search-box:focus-within {
  border-color: var(--teal);
  box-shadow: var(--shadow-teal);
}

/* ─── Event cards dark ─── */
[data-theme="dark"] .event-card {
  background: var(--surface);
  border-color: var(--border);
}
[data-theme="dark"] .event-card:hover {
  border-color: var(--border-md);
  background: linear-gradient(145deg, var(--surface2), var(--surface));
}

/* ─── Result header glow dark ─── */
[data-theme="dark"] .result-section.visible .result-header {
  animation: _glowPulseDark 2s ease 0.3s 1;
}
@keyframes _glowPulseDark {
  0%,100% { box-shadow: var(--shadow-md); }
  50%      { box-shadow: 0 0 40px rgba(20,212,206,0.15), var(--shadow-md); }
}

/* ─── Footer dark ─── */
[data-theme="dark"] .footer {
  background: #0A0C15;
  border-top-color: var(--border);
}

/* ─── Tag pills dark ─── */
[data-theme="dark"] .tag-pill.category-history    { background: rgba(96,165,250,0.12); }
[data-theme="dark"] .tag-pill.category-culture    { background: rgba(192,132,252,0.12); }
[data-theme="dark"] .tag-pill.category-numerology { background: rgba(251,191,36,0.12); }
[data-theme="dark"] .tag-pill.category-date       { background: rgba(52,211,153,0.12); }
[data-theme="dark"] .tag-pill.category-science    { background: rgba(56,189,248,0.12); }

/* ─── Admin dark ─── */
[data-theme="dark"] .adm-sidebar {
  background: #0F1120;
  border-right-color: var(--border);
}
[data-theme="dark"] .adm-code-preview {
  background: #070910;
  color: rgba(20,212,206,0.85);
}
[data-theme="dark"] .adm-table-wrap {
  background: var(--surface);
}
[data-theme="dark"] .adm-table thead th {
  background: #0D0F1A;
}
[data-theme="dark"] .adm-form-card {
  background: var(--surface);
}
[data-theme="dark"] .adm-num-input-wrap,
[data-theme="dark"] .adm-text-input,
[data-theme="dark"] .adm-textarea,
[data-theme="dark"] .adm-select,
[data-theme="dark"] .adm-emoji-input {
  background: var(--bg-mid);
  border-color: var(--border-md);
  color: var(--ink);
}
[data-theme="dark"] .adm-search-input {
  background: var(--surface);
  color: var(--ink);
}

/* ─── Cloud tags dark ─── */
[data-theme="dark"] .cloud-tag {
  background: var(--surface2);
  border-color: var(--border-md);
  color: var(--ink-mid);
}
[data-theme="dark"] .cloud-tag.t-history    { background: rgba(96,165,250,0.10);  border-color: rgba(96,165,250,0.20); }
[data-theme="dark"] .cloud-tag.t-culture    { background: rgba(192,132,252,0.10); border-color: rgba(192,132,252,0.20); }
[data-theme="dark"] .cloud-tag.t-numerology { background: rgba(251,191,36,0.10);  border-color: rgba(251,191,36,0.20); }
[data-theme="dark"] .cloud-tag.t-date       { background: rgba(52,211,153,0.10);  border-color: rgba(52,211,153,0.20); }
[data-theme="dark"] .cloud-tag.t-science    { background: rgba(56,189,248,0.10);  border-color: rgba(56,189,248,0.20); }

/* ─── Suggestion cards dark ─── */
[data-theme="dark"] .suggestion-card {
  background: var(--surface);
}
[data-theme="dark"] .suggestions-empty {
  background: var(--surface);
  border-color: var(--border);
}

/* ─── Podium dark ─── */
[data-theme="dark"] .podium-item {
  background: var(--surface);
  border-color: var(--border);
}
[data-theme="dark"] .podium-item:hover {
  background: var(--surface2);
}

/* ─── Related pills dark ─── */
[data-theme="dark"] .related-pill {
  background: var(--surface);
  border-color: var(--border-md);
}

/* ─── mfield inputs dark ─── */
[data-theme="dark"] .mfield input,
[data-theme="dark"] .mfield textarea,
[data-theme="dark"] .mfield select {
  background: var(--bg-mid);
  border-color: var(--border-md);
  color: var(--ink);
}
[data-theme="dark"] .modal-close {
  background: var(--bg-mid);
  color: var(--ink-soft);
}
[data-theme="dark"] .modal-btn-cancel {
  background: var(--bg-mid);
  border-color: var(--border-md);
  color: var(--ink-mid);
}

/* ─── Hint pills dark ─── */
[data-theme="dark"] .hint-pill {
  background: var(--surface);
  border-color: var(--border-md);
  color: var(--ink-mid);
}

/* ─── Filter tabs dark ─── */
[data-theme="dark"] .ftab {
  background: var(--surface2);
  border-color: var(--border-md);
  color: var(--ink-soft);
}

/* ─── Lang switcher dark ─── */
[data-theme="dark"] .lang-switcher {
  background: var(--bg-mid);
  border-color: var(--border);
}
[data-theme="dark"] .lang-btn.active {
  background: var(--surface);
  color: var(--teal);
}

/* ─── Deco numbers dark ─── */
[data-theme="dark"] .deco-num.glyph { color: rgba(167,139,250,0.07); }
[data-theme="dark"] .deco-num.small { color: rgba(20,212,206,0.15); }

/* ─── Chart bars dark ─── */
[data-theme="dark"] .chart-bars {
  border-bottom-color: var(--border-md);
}

/* ══════════════════════════════════════════════════
   THEME TOGGLE BUTTON
   ══════════════════════════════════════════════════ */
.theme-toggle {
  position: relative;
  width: 56px;
  height: 28px;
  flex-shrink: 0;
}

.theme-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.theme-toggle-track {
  position: absolute;
  inset: 0;
  border-radius: 100px;
  background: var(--bg-mid);
  border: 1.5px solid var(--border-md);
  cursor: pointer;
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
  overflow: hidden;
}

/* Stars in dark mode */
.theme-toggle-track::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle, rgba(255,255,255,0.9) 1px, transparent 1px) 6px 8px / 18px 14px,
    radial-gradient(circle, rgba(255,255,255,0.6) 1px, transparent 1px) 12px 4px / 22px 18px;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.theme-toggle input:checked ~ .theme-toggle-track {
  background: linear-gradient(135deg, #1a1f3a 0%, #0d1030 100%);
  border-color: rgba(20,212,206,0.35);
  box-shadow: 0 0 12px rgba(20,212,206,0.2) inset;
}

.theme-toggle input:checked ~ .theme-toggle-track::before {
  opacity: 1;
}

.theme-toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FDE68A 0%, #F59E0B 100%);
  box-shadow: 0 2px 8px rgba(245,158,11,0.45), 0 0 0 2px rgba(245,158,11,0.15);
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), background 0.35s ease, box-shadow 0.35s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  pointer-events: none;
}

/* Sun rays */
.theme-toggle-thumb::before {
  content: '☀';
  font-size: 12px;
  line-height: 1;
  opacity: 1;
  transition: opacity 0.2s ease;
}

.theme-toggle input:checked ~ .theme-toggle-thumb {
  transform: translateX(28px);
  background: linear-gradient(135deg, #e0e8ff 0%, #a5b4fc 100%);
  box-shadow: 0 2px 10px rgba(167,139,250,0.55), 0 0 0 2px rgba(167,139,250,0.2);
}

.theme-toggle input:checked ~ .theme-toggle-thumb::before {
  content: '🌙';
  font-size: 10px;
}

/* ─── Smooth theme transition for entire page ─── */
body {
  transition:
    background-color 0.4s ease,
    color 0.4s ease;
}

*, *::before, *::after {
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}

/* Override for elements that have their own transitions */
.hint-pill, .related-pill, .ftab, .cloud-tag, .suggest-btn,
.search-btn, .podium-item, .event-card, .nav-link,
.modal, .theme-toggle-thumb, .theme-toggle-track {
  transition: all 0.26s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.theme-toggle-thumb {
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), background 0.35s ease, box-shadow 0.35s ease !important;
}

/* ─── Sound toggle dark ─── */
[data-theme="dark"] ._sound-toggle {
  background: rgba(22,25,41,0.92);
  border-color: rgba(20,212,206,0.22);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

/* ─── Adm sidebar theme toggle row ─── */
.adm-sidebar .theme-toggle {
  width: 48px;
  height: 24px;
}
.adm-sidebar .theme-toggle-thumb {
  width: 16px;
  height: 16px;
  top: 3px;
  left: 3px;
}
.adm-sidebar .theme-toggle-thumb::before {
  font-size: 10px;
}
.adm-sidebar .theme-toggle input:checked ~ .theme-toggle-thumb {
  transform: translateX(24px);
}

/* ─── Nav item with toggle row ─── */
.adm-theme-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  margin-top: auto;
}
.adm-theme-label {
  font-size: 0.72rem;
  color: var(--ink-soft);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ─── Numbers.html page dark fix ─── */
[data-theme="dark"] table {
  background: var(--surface);
  color: var(--ink);
}
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background: var(--bg-mid);
  color: var(--ink);
  border-color: var(--border-md);
}