/* ============================================================
   KalliLab "Neon Ops" - Glance Custom CSS
   Karten-Look, Farb-Glows, Akzent-Header, Hover-Effekte
   ============================================================ */

/* --- Seiten-Hintergrund: dunkel mit zwei dezenten Farb-Glows --- */
body {
  background:
    radial-gradient(1200px 600px at 85% -10%, hsla(212, 100%, 55%, 0.10), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, hsla(280, 80%, 55%, 0.07), transparent 55%),
    radial-gradient(800px 600px at 50% 110%, hsla(160, 80%, 45%, 0.06), transparent 60%),
    var(--color-background);
  background-attachment: fixed;
}

/* --- Jedes Widget wird eine Karte --- */
.widget {
  background: linear-gradient(
    160deg,
    hsla(220, 30%, 100%, 0.045),
    hsla(220, 30%, 100%, 0.015)
  );
  border: 1px solid hsla(220, 40%, 70%, 0.12);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow:
    0 10px 30px hsla(220, 60%, 3%, 0.35),
    inset 0 1px 0 hsla(220, 40%, 90%, 0.05);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.widget:hover {
  border-color: hsla(212, 100%, 60%, 0.35);
  box-shadow:
    0 12px 36px hsla(212, 80%, 30%, 0.18),
    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: Akzentfarbe + Farbverlauf-Unterstreichung --- */
.widget-header {
  letter-spacing: 0.14em;
  position: relative;
  padding-bottom: 6px;
  margin-bottom: 4px;
}

.widget-header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 42px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    hsl(212, 100%, 55%),
    hsla(280, 80%, 60%, 0.6),
    transparent
  );
}

/* --- Grosse Zahlen mit leichtem Glow --- */
.size-h2,
.size-h3 {
  letter-spacing: 0.01em;
}

.color-primary.size-h2,
.color-primary.size-h3,
.color-highlight.size-h3 {
  text-shadow: 0 0 18px hsla(212, 100%, 60%, 0.35);
}

.color-positive {
  text-shadow: 0 0 14px hsla(150, 90%, 45%, 0.3);
}

.color-negative {
  text-shadow: 0 0 14px hsla(350, 90%, 55%, 0.3);
}

/* --- Status-Punkte/Monitore etwas lebendiger --- */
.monitor-site-status-icon-compact,
.monitor-site-status-icon {
  filter: drop-shadow(0 0 6px hsla(150, 90%, 45%, 0.45));
}

/* --- Navigation: aktiver Tab mit Glow-Unterstreichung --- */
.nav-item.nav-item-current {
  text-shadow: 0 0 16px hsla(212, 100%, 60%, 0.5);
}

/* --- Suchleiste als Karte --- */
.search {
  border: 1px solid hsla(220, 40%, 70%, 0.14);
  border-radius: 12px;
  background: hsla(220, 30%, 100%, 0.035);
}

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

/* --- 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.4);
}