/* =================================================================
   KLANG TV AIRPLAY CHARTS – KI-Chart: Farbvariante (Cyan/Blau)
   =================================================================
   Wird NACH den anderen Stylesheets eingebunden. Wirkt nur, wenn
   <body class="theme-ki"> gesetzt ist; ohne diese Klasse ändert sich
   nichts (normales KLANG-TV-Lila).

   Enthält außerdem die Gestaltung des Umschalters "Menschlich | KI"
   (.chart-switch), die in beiden Farbwelten gleich aussieht.
   ================================================================= */

/* ---- Umschalter "Menschlich | KI" --------------------------------- */
.chart-switch {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--ktv-border-strong, rgba(255, 255, 255, 0.14));
}
.chart-switch__btn {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.5em 1.5em;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ktv-text-soft, #a49fb2);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.chart-switch__btn:hover { color: #fff; }
/* Aktiver Knopf: Menschlich = Lila, KI = Cyan (unabhängig vom Seiten-Theme) */
.chart-switch__btn--menschlich.is-active {
  background: linear-gradient(135deg, #6e1fc4 0%, #9b30ff 55%, #ff2fb0 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(155, 48, 255, 0.4);
}
.chart-switch__btn--ki.is-active {
  background: linear-gradient(135deg, #0b6fb8 0%, #1fa8ff 55%, #22e0d0 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(31, 168, 255, 0.4);
}
.chart-switch-bar { margin: 0 0 1rem; }

/* ---- KI-Farbvariante ------------------------------------------------ */
body.theme-ki {
  --ktv-bg:            #060b10;
  --ktv-bg-alt:        #0b131b;
  --ktv-surface:       #0e1822;
  --ktv-surface-alt:   #14212d;

  --ktv-purple:        #1fa8ff;   /* Hauptfarbe: Cyan-Blau statt Lila */
  --ktv-purple-dark:   #0b6fb8;
  --ktv-purple-light:  #7fd4ff;
  --ktv-magenta:       #22e0d0;   /* Zweitakzent: Türkis statt Magenta */
  --ktv-new:           #5fd0ff;
  --ktv-gradient:      linear-gradient(135deg, #0b6fb8 0%, #1fa8ff 55%, #22e0d0 100%);
  --ktv-gradient-text: linear-gradient(90deg, #7fd4ff 0%, #22e0d0 100%);
  --ktv-shadow-glow:   0 0 40px rgba(31, 168, 255, 0.35);
  --ktv-text-soft:     #9fb0bf;
  --ktv-text-mute:     #6b7c8a;
}

/* Stellen, an denen das Lila fest als Farbwert (nicht als Variable) steht */
body.theme-ki .btn-primary { box-shadow: 0 6px 20px rgba(31, 168, 255, 0.4); }
body.theme-ki .btn-primary:hover { box-shadow: 0 8px 26px rgba(34, 224, 208, 0.45); }
body.theme-ki .btn-outline:hover { background: rgba(31, 168, 255, 0.08); }
body.theme-ki .pill.is-active { box-shadow: 0 6px 18px rgba(31, 168, 255, 0.35); }

body.theme-ki .hero-overlay {
  background: linear-gradient(
    92deg,
    rgba(6, 11, 16, 0.97) 0%,
    rgba(6, 11, 16, 0.92) 28%,
    rgba(8, 24, 36, 0.6) 50%,
    rgba(11, 90, 150, 0.28) 72%,
    rgba(31, 168, 255, 0.14) 100%
  );
}
body.theme-ki .hero-demo-tag {
  background: linear-gradient(160deg, rgba(31, 168, 255, 0.2) 0%, var(--ktv-surface) 65%);
  border-color: rgba(127, 212, 255, 0.35);
  box-shadow: var(--ktv-shadow-card), 0 0 26px rgba(31, 168, 255, 0.16);
}
body.theme-ki .vote-card {
  background:
    radial-gradient(circle at 15% 0%, rgba(31, 168, 255, 0.28), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(34, 224, 208, 0.16), transparent 60%),
    var(--ktv-surface);
}
body.theme-ki .tip-photo { background: linear-gradient(135deg, #1b2a38, #0b6fb8); }

/* DJ-Bereich / Admin (werden in den späteren Phasen angebunden) */
body.theme-ki .form-message--info,
body.theme-ki .admin-flash--info {
  background: rgba(31, 168, 255, 0.1);
  border-color: rgba(31, 168, 255, 0.35);
}
body.theme-ki .status-new { background: rgba(31, 168, 255, 0.15); }
body.theme-ki .status-highlight { background: rgba(34, 224, 208, 0.14); color: #8ff0e6; }
body.theme-ki .top10-slot.is-drop-target { background: rgba(31, 168, 255, 0.08); }

/* Das große Titelfoto ist lila: im KI-Chart per Farbdrehung nach Blau/Cyan */
body.theme-ki .hero-bg { filter: hue-rotate(-80deg) saturate(1.1); }

/* Umschalter in DJ-/Admin-Bereich: etwas Luft nach oben */
.chart-switch-bar--dj { margin-top: 1rem; margin-bottom: 0; }

/* Großer Platz-1-Kasten: lila Hintergrundbild im KI-Chart auf Blau umfärben (nur der Farbton) */
body.theme-ki .feature-entry {
  background-image: linear-gradient(#1fa8ff, #1fa8ff), url('../images/chart-platz-1-hintergrund-breit.png');
  background-blend-mode: hue, normal;
  background-size: cover, cover;
  background-position: center, center;
}


/* Hinweis in der Startphase: "KLANGTV Community-Charts – Startphase" (gilt für beide Charts) */
.startphase-note {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.55rem 0 0;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ktv-purple-light, #c78bff);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--ktv-border-strong, rgba(255, 255, 255, 0.14));
  cursor: help;
}
.startphase-note[hidden] { display: none; }
.startphase-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ktv-purple, #9b30ff);
  box-shadow: 0 0 0 0 rgba(155, 48, 255, 0.6);
  animation: startphase-pulse 2.2s ease-out infinite;
}
@keyframes startphase-pulse { 70% { box-shadow: 0 0 0 7px rgba(155, 48, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(155, 48, 255, 0); } }
@media (prefers-reduced-motion: reduce) { .startphase-dot { animation: none; } }

/* Scrollleiste der ganzen Seite im KI-Blau (die Leiste gehört zum <html>-Element, nicht zum <body>) */
html:has(body.theme-ki) {
  --ktv-bg:           #060b10;
  --ktv-purple:       #1fa8ff;
  --ktv-purple-dark:  #0b6fb8;
  --ktv-magenta:      #22e0d0;
}

/* DJ-Bereich: Umschalter "Menschlich | KI" sitzt jetzt in der Zeile "Angemeldet als ... Abmelden" (mittig, etwas kleiner) */
.dashboard-topbar .topbar-switch { margin-inline: auto; }
.dashboard-topbar .chart-switch__btn { min-height: 34px; padding: 0.35em 1.2em; font-size: 0.78rem; }
@media (max-width: 720px) {
  .dashboard-topbar .topbar-switch { order: 3; flex: 1 1 100%; margin-inline: 0; }
  .dashboard-topbar .chart-switch { display: flex; }
  .dashboard-topbar .chart-switch__btn { flex: 1; justify-content: center; }
}

/* Umschalter "Menschlich | KI": leuchtet sanft auf, damit man ihn findet (nur DJ-Bereich + öffentliche Chartseite) */
.dashboard-topbar .chart-switch, #chart-switch {
  animation: chart-switch-glow 2.6s ease-in-out infinite;
}
.dashboard-topbar .chart-switch__btn:not(.is-active), #chart-switch .chart-switch__btn:not(.is-active) {
  animation: chart-switch-nudge 2.6s ease-in-out infinite;
}
@keyframes chart-switch-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(31, 168, 255, 0); }
  50%      { box-shadow: 0 0 0 6px rgba(31, 168, 255, 0.28), 0 0 20px rgba(155, 48, 255, 0.35); }
}
@keyframes chart-switch-nudge {
  0%, 100% { color: var(--ktv-text-soft, #a49fb2); }
  50%      { color: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  .dashboard-topbar .chart-switch, #chart-switch,
  .dashboard-topbar .chart-switch__btn, #chart-switch .chart-switch__btn { animation: none; }
}