/* ============================================================
   KalliLab "Neon Ops v2" - Glance Custom CSS
   Rotierende Akzentfarben pro Widget, Gradient-Zahlen,
   animierte Header-Linien, kraeftige Glows
   ============================================================ */

/* --- Akzentfarben rotieren ueber die Widgets --- */
.widget                  { --kl-accent: 205 100% 60%; }
.widget:nth-of-type(4n+2) { --kl-accent: 172 95% 48%; }
.widget:nth-of-type(4n+3) { --kl-accent: 38 100% 55%; }
.widget:nth-of-type(4n)   { --kl-accent: 145 85% 50%; }

/* --- Seiten-Hintergrund: kraeftigere Farb-Glows --- */
body {
  background:
    radial-gradient(1300px 700px at 85% -10%, hsla(205, 100%, 55%, 0.13), transparent 60%),
    radial-gradient(1000px 600px at -10% 25%, hsla(172, 95%, 45%, 0.09), transparent 55%),
    radial-gradient(900px 700px at 50% 115%, hsla(38, 100%, 50%, 0.07), transparent 60%),
    var(--color-background);
  background-attachment: fixed;
}

/* --- Widgets als Karten mit Akzentrand --- */
.widget {
  background: linear-gradient(
    160deg,
    hsla(220, 30%, 100%, 0.05),
    hsla(220, 30%, 100%, 0.015)
  );
  border: 1px solid hsl(var(--kl-accent) / 0.18);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow:
    0 10px 30px hsla(220, 60%, 3%, 0.4),
    0 0 24px hsl(var(--kl-accent) / 0.06),
    inset 0 1px 0 hsla(220, 40%, 90%, 0.05);
  transition: border-color 0.2s ease, box-shadow 0.25s ease;
}

.widget:hover {
  border-color: hsl(var(--kl-accent) / 0.55);
  box-shadow:
    0 12px 36px hsla(220, 60%, 3%, 0.45),
    0 0 36px hsl(var(--kl-accent) / 0.16),
    inset 0 1px 0 hsla(220, 40%, 90%, 0.07);
}

/* Widgets in Gruppen/Tabs nicht doppelt einrahmen */
.widget .widget {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

/* --- Widget-Titel: animierte Farbverlaufs-Linie in Akzentfarbe --- */
.widget-header {
  letter-spacing: 0.14em;
  position: relative;
  padding-bottom: 7px;
  margin-bottom: 4px;
  color: hsl(var(--kl-accent) / 0.85);
}

.widget-header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    hsl(var(--kl-accent)),
    hsl(var(--kl-accent) / 0.25),
    hsl(var(--kl-accent))
  );
  background-size: 200% 100%;
  animation: kl-shimmer 4s linear infinite;
}

@keyframes kl-shimmer {
  0%   { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

/* --- Grosse Zahlen: Gradient-Text + Glow --- */
.color-highlight.size-h2,
.color-highlight.size-h3,
.color-primary.size-h2,
.color-primary.size-h3 {
  background: linear-gradient(
    120deg,
    hsl(var(--kl-accent)),
    hsl(var(--kl-accent) / 0.55) 60%,
    hsl(210, 30%, 95%)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 14px hsl(var(--kl-accent) / 0.35));
}

.color-positive {
  text-shadow: 0 0 16px hsla(150, 95%, 45%, 0.45);
}

.color-negative {
  text-shadow: 0 0 16px hsla(350, 95%, 58%, 0.45);
}

/* --- Status-Punkte leuchten --- */
.monitor-site-status-icon-compact,
.monitor-site-status-icon {
  filter: drop-shadow(0 0 7px hsla(150, 95%, 45%, 0.55));
}

/* --- Navigation --- */
.nav-item.nav-item-current {
  text-shadow: 0 0 18px hsla(212, 100%, 60%, 0.6);
}

/* --- Suchleiste --- */
.search {
  border: 1px solid hsla(212, 90%, 65%, 0.2);
  border-radius: 12px;
  background: hsla(220, 30%, 100%, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search:focus-within {
  border-color: hsla(212, 100%, 60%, 0.55);
  box-shadow: 0 0 0 3px hsla(212, 100%, 55%, 0.15), 0 0 28px hsla(212, 100%, 55%, 0.12);
}

/* --- Server-Stats: Balken rund, gradient, glow --- */
.progress-bar {
  border: none;
  height: 13px;
  border-radius: 999px;
  background: hsla(220, 30%, 60%, 0.12);
  box-shadow: inset 0 1px 3px hsla(220, 60%, 3%, 0.5);
  overflow: hidden;
}

.progress-value {
  border-radius: 999px;
  background: linear-gradient(90deg, hsl(205, 100%, 55%), hsl(172, 95%, 48%));
  box-shadow: 0 0 10px hsla(205, 100%, 55%, 0.35);
}

.progress-value-notice {
  background: linear-gradient(90deg, hsl(38, 100%, 55%), hsl(355, 90%, 60%));
  box-shadow: 0 0 12px hsla(355, 90%, 58%, 0.45);
}

/* --- Feinschliff --- */
::selection {
  background: hsla(212, 100%, 50%, 0.35);
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-thumb {
  background: hsla(220, 30%, 50%, 0.25);
  border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsla(212, 80%, 55%, 0.45);
}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
  .widget-header::after {
    animation: none;
  }
}