/* ===== KRIS CONTROL CENTRE — FINAL FORM ===== */

/* ===== Base Card ===== */
.card {
  border-radius: 18px !important;
  backdrop-filter: blur(14px);
  background: rgba(25, 25, 25, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.06);

  transition:
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s ease,
    background 0.25s ease;

  box-shadow: 0 4px 15px rgba(0,0,0,0.25);
}

/* ===== Hover ===== */
.card:hover {
  transform: translateY(-5px) scale(1.02);
  background: rgba(35, 35, 35, 0.7) !important;

  box-shadow:
    0 10px 25px rgba(0,0,0,0.35),
    0 0 15px rgba(100,150,255,0.15);
}

/* ===== Icon Pop ===== */
.card img {
  transition: transform 0.2s ease;
}
.card:hover img {
  transform: scale(1.08);
}

/* ===== Text ===== */
body {
  color: rgba(255,255,255,0.9);
}
h1, h2 {
  letter-spacing: 1px;
  font-weight: 600;
}
.card-content {
  padding: 12px;
}

/* ===== 🌌 Animated Background ===== */
body::before {
  content: "";
  position: fixed;
  width: 150%;
  height: 150%;
  top: -25%;
  left: -25%;
  z-index: -2;

  background:
    radial-gradient(circle at 20% 20%, #1a1a2e, transparent),
    radial-gradient(circle at 80% 80%, #16213e, transparent),
    radial-gradient(circle at 50% 50%, #0f3460, transparent);

  animation: moveBackground 60s linear infinite;
}

/* ===== 🌊 Particles ===== */
body::after {
  content: "";
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: -1;

  background-image:
    radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 80px 80px;

  animation: drift 120s linear infinite;
}

@keyframes drift {
  from { transform: translateY(0); }
  to   { transform: translateY(-200px); }
}

@keyframes moveBackground {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ===== ⚡ Pulse Core Services ===== */
@keyframes pulseGlow {
  0%   { box-shadow: 0 0 0 rgba(100,150,255,0.15); }
  50%  { box-shadow: 0 0 18px rgba(100,150,255,0.3); }
  100% { box-shadow: 0 0 0 rgba(100,150,255,0.15); }
}

.card:has(img[alt="Portainer"]),
.card:has(img[alt="Uptime Kuma"]) {
  animation: pulseGlow 4s ease-in-out infinite;
}

/* ===== 🟢 Healthy ===== */
.card:has(.text-green),
.card:has(.status-up) {
  box-shadow: 0 0 10px rgba(80,200,120,0.2);
}

/* ===== 🔴 FAILING SERVICE (AUTO HIGHLIGHT) ===== */
.card:has(.text-red),
.card:has(.status-down) {
  animation: dangerPulse 1.5s infinite;
}

@keyframes dangerPulse {
  0%   { box-shadow: 0 0 5px rgba(255,80,80,0.3); }
  50%  { box-shadow: 0 0 20px rgba(255,80,80,0.6); }
  100% { box-shadow: 0 0 5px rgba(255,80,80,0.3); }
}

/* ===== 🌈 Service Colour Identity ===== */

/* Portainer = purple */
.card:has(img[alt="Portainer"]) {
  border-left: 3px solid #b084ff;
}

/* Immich = rainbow-ish soft */
.card:has(img[alt="Immich"]) {
  border-left: 3px solid #ffb86c;
}

/* Nextcloud = blue */
.card:has(img[alt="Nextcloud"]) {
  border-left: 3px solid #4da3ff;
}

/* Nginx = green */
.card:has(img[alt="Nginx Proxy"]) {
  border-left: 3px solid #5bd38d;
}

/* Filebrowser = grey */
.card:has(img[alt="File Browser"]) {
  border-left: 3px solid #aaa;
}

/* ===== 📊 Fake Stat Bars ===== */
.card::after {
  content: "";
  display: block;
  height: 3px;
  margin-top: 10px;
  border-radius: 2px;

  background: linear-gradient(
    90deg,
    rgba(100,150,255,0.4),
    rgba(100,150,255,0.1)
  );

  opacity: 0.6;
}

/* ===== 🧠 SYSTEM LOAD GLOW ===== */

/* simulate CPU load glow from header */
body:has(.text-orange) .card {
  box-shadow: 0 0 20px rgba(255,150,50,0.1);
}

body:has(.text-red) .card {
  box-shadow: 0 0 25px rgba(255,80,80,0.15);
}