/* ============================================================
   Qalizer — Animated Day/Night theme toggle
   ============================================================
   A pill-shaped switch with a sliding sun/moon thumb. The track background
   crossfades between a starry night gradient and a light sky gradient, and
   stars/clouds fade in and out. Built entirely from CSS gradients + inline
   SVG — no external images are downloaded.

   Both `.theme-toggle.day` and `.theme-toggle.night` are applied by
   theme-toggle.js so the visuals can never desync from the active theme.
   ============================================================ */

.theme-toggle {
  /* Sizing */
  --tt-w: 64px;
  --tt-h: 30px;
  --tt-pad: 3px;
  --tt-thumb: calc(var(--tt-h) - (var(--tt-pad) * 2));

  position: relative;
  width: var(--tt-w);
  height: var(--tt-h);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
  overflow: hidden;
  background: linear-gradient(160deg, #1b2340 0%, #0d1124 100%);
  transition: background 0.45s cubic-bezier(.4, 0, .2, 1),
              border-color 0.45s cubic-bezier(.4, 0, .2, 1),
              box-shadow 0.45s cubic-bezier(.4, 0, .2, 1);
  -webkit-tap-highlight-color: transparent;
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ── Track backgrounds (crossfade) ───────────────────────────── */
.theme-toggle.night {
  background: linear-gradient(160deg, #1e2a4a 0%, #0b0f1f 100%);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 12px rgba(99, 102, 241, 0.25);
}
.theme-toggle.day {
  background: linear-gradient(160deg, #7dd3fc 0%, #e0f2fe 100%);
  border-color: rgba(0, 0, 0, 0.10);
  box-shadow: inset 0 0 12px rgba(250, 204, 21, 0.30);
}

/* ── Decorative layers: stars (night) and clouds (day) ───────── */
.theme-toggle .tt-stars,
.theme-toggle .tt-clouds {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity 0.45s cubic-bezier(.4, 0, .2, 1);
  background-repeat: repeat;
}

.theme-toggle .tt-stars {
  opacity: 1;
  /* Three star "clusters" drawn as tiny radial gradients. */
  background-image:
    radial-gradient(1.4px 1.4px at 12px 8px,  #ffffff 99%, transparent 100%),
    radial-gradient(1px 1px     at 26px 18px, #e2e8ff 99%, transparent 100%),
    radial-gradient(1.6px 1.6px at 40px 7px,  #ffffff 99%, transparent 100%),
    radial-gradient(1px 1px     at 8px 21px,  #cbd5ff 99%, transparent 100%),
    radial-gradient(1.2px 1.2px at 52px 15px, #ffffff 99%, transparent 100%);
}
.theme-toggle.day .tt-stars { opacity: 0; }

.theme-toggle .tt-clouds {
  opacity: 0;
  background-image:
    radial-gradient(7px 5px at 40px 24px, rgba(255, 255, 255, 0.85) 99%, transparent 100%),
    radial-gradient(9px 6px at 50px 22px, rgba(255, 255, 255, 0.75) 99%, transparent 100%),
    radial-gradient(6px 4px at 30px 25px, rgba(255, 255, 255, 0.65) 99%, transparent 100%);
}
.theme-toggle.day .tt-clouds { opacity: 1; }

/* ── Sliding thumb (sun / moon) ──────────────────────────────── */
.theme-toggle .thumb {
  position: absolute;
  top: var(--tt-pad);
  left: var(--tt-pad);
  width: var(--tt-thumb);
  height: var(--tt-thumb);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transform: translateX(0);
  transition: transform 0.35s cubic-bezier(.4, 0, .2, 1),
              background 0.35s cubic-bezier(.4, 0, .2, 1),
              box-shadow 0.35s cubic-bezier(.4, 0, .2, 1);
}

/* Night: moon on the right, softly glowing. */
.theme-toggle.night .thumb {
  transform: translateX(calc(var(--tt-w) - var(--tt-thumb) - (var(--tt-pad) * 2) - 2px));
  background: radial-gradient(circle at 35% 32%, #fdfbff 0%, #c7d2fe 65%, #818cf8 100%);
  box-shadow: 0 0 10px rgba(165, 180, 252, 0.75);
}

/* Day: sun on the left, warm halo. */
.theme-toggle.day .thumb {
  transform: translateX(0);
  background: radial-gradient(circle at 35% 32%, #fffbe8 0%, #fde68a 60%, #f59e0b 100%);
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.65);
}

.theme-toggle .thumb svg {
  width: 58%;
  height: 58%;
  display: block;
  transition: opacity 0.3s cubic-bezier(.4, 0, .2, 1);
}
/* Only one glyph is ever visible. */
.theme-toggle.night .tt-icon-sun  { opacity: 0; }
.theme-toggle.night .tt-icon-moon { opacity: 1; }
.theme-toggle.day   .tt-icon-sun  { opacity: 1; }
.theme-toggle.day   .tt-icon-moon { opacity: 0; }

/* Both glyphs stack in the same place. */
.theme-toggle .tt-icon-sun,
.theme-toggle .tt-icon-moon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Gentle rotation on hover for a bit of life. */
.theme-toggle:hover .thumb { transform: translateX(0) rotate(12deg); }
.theme-toggle.night:hover .thumb {
  transform: translateX(calc(var(--tt-w) - var(--tt-thumb) - (var(--tt-pad) * 2) - 2px)) rotate(-12deg);
}

/* ── Respect reduced-motion ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .theme-toggle,
  .theme-toggle .thumb,
  .theme-toggle .tt-stars,
  .theme-toggle .tt-clouds,
  .theme-toggle .thumb svg {
    transition: none;
  }
  .theme-toggle:hover .thumb,
  .theme-toggle.night:hover .thumb {
    transform: translateX(var(--tt-rest-x, 0)) rotate(0deg);
  }
  .theme-toggle.night .thumb {
    --tt-rest-x: calc(var(--tt-w) - var(--tt-thumb) - (var(--tt-pad) * 2) - 2px);
  }
}

/* ── Compact variant for tight navbars ───────────────────────── */
@media (max-width: 480px) {
  .theme-toggle { --tt-w: 54px; --tt-h: 26px; }
}

/* ── Landing-page host slot ──────────────────────────────────────
   index.html hides base.html's `.navbar` and provides an empty
   `.lp-theme-slot` in its own nav; theme-toggle.js relocates the pill into it.
   Sized so the nav layout does not shift when the pill arrives. */
.lp-theme-slot {
  min-width: 64px;
  min-height: 30px;
  display: flex;
  align-items: center;
}
@media (max-width: 480px) {
  .lp-theme-slot { min-width: 54px; min-height: 26px; }
}