/* JustizBot Aurora V1 | Rein dekorativer, bewegter Hintergrund.
 * Kein Canvas, kein JS, keine externen Ressourcen. Animation nur per transform.
 * Personalisiert ueber UserCustomization::aurora_enabled.
 */
body[data-jb-aurora="on"] > .jb-aurora-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: paint;
}
body[data-jb-aurora="on"] > .jb-aurora-backdrop .jb-aurora-glow {
  position: absolute;
  display: block;
  border-radius: 50%;
  pointer-events: none;
  /* Nur transform animieren (kompositorfreundlich). */
  transform: translate3d(0, 0, 0);
  will-change: transform;
}
body[data-jb-aurora="on"] > .jb-aurora-backdrop .jb-aurora-glow--blue {
  width: max(780px, 76vw);
  height: max(710px, 74vh);
  top: -38%;
  left: -18%;
  background: radial-gradient(ellipse at 50% 50%,
      rgba(43, 113, 220, .23) 0%,
      rgba(24, 94, 183, .13) 34%,
      rgba(22, 65, 125, .04) 57%,
      transparent 75%);
  animation: jb-aurora-blue-drift 48s ease-in-out infinite alternate;
}
body[data-jb-aurora="on"] > .jb-aurora-backdrop .jb-aurora-glow--gold {
  width: max(600px, 63vw);
  height: max(570px, 72vh);
  right: -22%;
  bottom: -40%;
  background: radial-gradient(ellipse at 50% 50%,
      rgba(215, 147, 64, .15) 0%,
      rgba(195, 124, 45, .075) 39%,
      transparent 74%);
  animation: jb-aurora-gold-drift 59s ease-in-out infinite alternate;
}
body[data-jb-aurora="on"] > .jb-aurora-backdrop .jb-aurora-glow--teal {
  width: max(600px, 55vw);
  height: max(450px, 53vh);
  top: 12%;
  right: -26%;
  background: radial-gradient(ellipse at 50% 50%,
      rgba(27, 115, 170, .085) 0%,
      transparent 72%);
  animation: jb-aurora-teal-drift 71s ease-in-out infinite alternate;
}

@keyframes jb-aurora-blue-drift {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1); }
  50%  { transform: translate3d(13%, 13%, 0) scale(1.13); }
  100% { transform: translate3d(22%, -2%, 0) scale(1.04); }
}
@keyframes jb-aurora-gold-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-14%, -13%, 0) scale(1.1); }
  100% { transform: translate3d(-25%, -7%, 0) scale(1.04); }
}
@keyframes jb-aurora-teal-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-12%, 6%, 0) scale(1.1); }
  100% { transform: translate3d(-18%, -8%, 0) scale(1.03); }
}

/* Die echten UI-Elemente liegen vor dem Effekt, ohne dass sich die
   Positionierung oder die Sticky-Topbar/Sidebar aendert. */
body[data-jb-aurora="on"] > .app-shell {
  position: relative;
  z-index: 1;
}
body[data-jb-aurora="on"] > .auth-main {
  position: relative;
  z-index: 1;
}

/* Heller Modus: viel sanfter, damit dunkle Schrift nicht ueberstrahlt. */
body[data-theme="light"][data-jb-aurora="on"] > .jb-aurora-backdrop .jb-aurora-glow--blue {
  opacity: .48;
}
body[data-theme="light"][data-jb-aurora="on"] > .jb-aurora-backdrop .jb-aurora-glow--gold {
  opacity: .31;
}
body[data-theme="light"][data-jb-aurora="on"] > .jb-aurora-backdrop .jb-aurora-glow--teal {
  opacity: .34;
}

/* Formulare/Tabellen bleiben unveraendert. Bei Motion-Reduktion Licht
   statisch anzeigen; Mobilgeraete mit Stromspar-Wunsch werden geschont. */
@media (prefers-reduced-motion: reduce) {
  body[data-jb-aurora="on"] > .jb-aurora-backdrop .jb-aurora-glow {
    animation: none !important;
    will-change: auto;
  }
}
@media print {
  body > .jb-aurora-backdrop { display: none !important; }
}

/* Einstellungs-Schalter im Benutzerkonto. */
.jb-aurora-setting {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 80px;
  padding: 15px 17px;
  margin: 2px 0 0;
  border: 1px solid var(--line, #34445b);
  border-radius: 15px;
  background: color-mix(in srgb, var(--panel-2, #213047) 77%, transparent);
  cursor: pointer;
}
.jb-aurora-setting:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent, #d28a36) 53%, var(--line, #34445b));
}
.jb-aurora-setting input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.jb-aurora-setting-copy { min-width: 0; flex: 1; display: grid; gap: 4px; }
.jb-aurora-setting-copy strong { color: var(--text, #f4efe7); font-weight: 750; }
.jb-aurora-setting-copy small { color: var(--muted, #aeb6c2); font-size: .84rem; line-height: 1.55; }
.jb-aurora-switch {
  flex: 0 0 auto;
  width: 49px;
  height: 28px;
  border-radius: 99px;
  border: 1px solid var(--line, #34445b);
  background: color-mix(in srgb, var(--muted, #aeb6c2) 40%, var(--panel, #171f2a));
  position: relative;
  transition: background 160ms ease;
}
.jb-aurora-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 4px rgba(0,0,0,.16);
  transition: transform 160ms ease;
}
.jb-aurora-setting input:checked ~ .jb-aurora-switch {
  background: var(--accent, #d28a36);
  border-color: transparent;
}
.jb-aurora-setting input:checked ~ .jb-aurora-switch::after { transform: translateX(20px); }
.jb-aurora-setting input:focus-visible ~ .jb-aurora-switch {
  outline: 3px solid var(--accent-2, #f0b35a);
  outline-offset: 3px;
}
@media (max-width: 580px) {
  .jb-aurora-setting { align-items: flex-start; }
  .jb-aurora-switch { margin-top: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .jb-aurora-switch, .jb-aurora-switch::after { transition: none; }
}