/* ============================================
   LevelXHome — NOC Monitor Theme v6
   Dark + Light Mode kompatibel
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Inter:wght@300;400;500;600;700&display=swap');

/* ══════════════════════════════════════════════
   DARK MODE Variables
   ══════════════════════════════════════════════ */
.dark {
  --noc-bg:        #07090c;
  --noc-panel:     rgba(12, 17, 24, 0.95);
  --noc-border:    rgba(255, 100, 30, 0.22);
  --noc-border-h:  rgba(255, 120, 30, 0.65);
  --noc-accent:    #ff6820;
  --noc-accent2:   #ff3a1a;
  --noc-glow:      rgba(255, 104, 32, 0.18);
  --noc-glow2:     rgba(255, 58, 26, 0.10);
  --noc-text:      #cdd8e8;
  --noc-muted:     rgba(180, 200, 220, 0.45);
  --noc-card:      rgba(255,255,255,0.025);
  --noc-card-h:    rgba(255,104,32,0.07);
  --noc-label:     rgba(160,190,220,0.45);
  --noc-divider:   rgba(255,104,32,0.1);
  --noc-grid:      rgba(255,104,32,0.055);
  --noc-dot:       rgba(255,130,50,0.13);
  --noc-scanline:  rgba(0,0,0,0.06);
  --noc-topbar:    rgba(7,9,12,0.92);
  --noc-topbar-txt:rgba(200,220,240,0.6);
}

/* ══════════════════════════════════════════════
   LIGHT MODE Variables
   ══════════════════════════════════════════════ */
:root:not(.dark) {
  --noc-bg:        #e8edf2;
  --noc-panel:     rgba(220, 228, 238, 0.97);
  --noc-border:    rgba(180, 80, 20, 0.28);
  --noc-border-h:  rgba(180, 80, 20, 0.65);
  --noc-accent:    #c94e10;
  --noc-accent2:   #e03010;
  --noc-glow:      rgba(180, 70, 16, 0.18);
  --noc-glow2:     rgba(180, 70, 16, 0.08);
  --noc-text:      #1c2530;
  --noc-muted:     rgba(40, 60, 80, 0.55);
  --noc-card:      rgba(255,255,255,0.65);
  --noc-card-h:    rgba(255,255,255,0.9);
  --noc-label:     rgba(60, 80, 100, 0.55);
  --noc-divider:   rgba(180,70,16,0.15);
  --noc-grid:      rgba(180, 80, 30, 0.08);
  --noc-dot:       rgba(180, 80, 30, 0.15);
  --noc-scanline:  rgba(0,0,0,0.018);
  --noc-topbar:    rgba(210,218,228,0.95);
  --noc-topbar-txt:rgba(30,50,70,0.7);
}

/* ─── Background ─────────────────────────────── */
body,
#__next,
.flex.flex-col.min-h-screen {
  font-family: 'Inter', sans-serif !important;
  background-color: var(--noc-bg) !important;
  background-image:
    radial-gradient(ellipse 80% 40% at 50% 0%,   rgba(255,104,32,0.07) 0%, transparent 65%),
    radial-gradient(ellipse 45% 35% at 5%  50%,  rgba(255,58,26,0.04)  0%, transparent 60%),
    radial-gradient(ellipse 45% 35% at 95% 80%,  rgba(255,104,32,0.04) 0%, transparent 60%),
    repeating-linear-gradient(0deg,  transparent 0px, transparent 39px, var(--noc-grid) 39px, var(--noc-grid) 40px),
    repeating-linear-gradient(90deg, transparent 0px, transparent 39px, var(--noc-grid) 39px, var(--noc-grid) 40px),
    radial-gradient(circle, var(--noc-dot) 1.2px, transparent 1.2px) !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, 40px 40px, 40px 40px, 40px 40px !important;
  background-attachment: fixed !important;
  color: var(--noc-text) !important;
}

/* ─── Scanlines ──────────────────────────────── */
body::before {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  background: repeating-linear-gradient(
    180deg, transparent 0px, transparent 3px,
    var(--noc-scanline) 3px, var(--noc-scanline) 4px
  ) !important;
  pointer-events: none !important;
  z-index: 9999 !important;
}

/* ─── Top Info Bar ───────────────────────────── */
#information-widgets {
  background: var(--noc-topbar) !important;
  border-bottom: 1px solid var(--noc-border) !important;
  backdrop-filter: blur(12px) !important;
}
#information-widgets span,
#information-widgets div {
  font-family: var(--noc-mono) !important;
  color: var(--noc-topbar-txt) !important;
  font-size: 0.74rem !important;
  letter-spacing: 0.06em !important;
}

/* ─── Search Bar ─────────────────────────────── */
#searchbox input {
  background: var(--noc-card) !important;
  border: 1px solid var(--noc-border) !important;
  border-radius: 4px !important;
  color: var(--noc-text) !important;
  font-family: var(--noc-mono) !important;
  transition: all 0.2s ease !important;
}
#searchbox input::placeholder { color: var(--noc-muted) !important; }
#searchbox input:focus {
  border-color: var(--noc-accent) !important;
  box-shadow: 0 0 0 2px var(--noc-glow), 0 0 20px var(--noc-glow) !important;
  outline: none !important;
}

/* ─── Category Headers ───────────────────────── */
h2 {
  font-family: var(--noc-mono) !important;
  color: var(--noc-accent) !important;
  font-size: 0.7rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 10px var(--noc-glow), 0 0 25px var(--noc-glow) !important;
}
h2::before {
  content: '>_ ' !important;
  color: var(--noc-accent2) !important;
  font-family: var(--noc-mono) !important;
}

/* ─── Group Panels ───────────────────────────── */
:is(.dark .dark\:bg-white\/5),
:is(.dark .dark\:bg-white\/10),
.bg-theme-100\/20,
[class*="bg-theme-100"] {
  background: var(--noc-panel) !important;
  border: 1px solid var(--noc-border) !important;
  border-radius: 6px !important;
  backdrop-filter: blur(16px) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.08) !important;
}

/* ─── Service Cards ──────────────────────────── */
.shadow-md.rounded-md {
  background: var(--noc-card) !important;
  border: 1px solid var(--noc-border) !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.08) !important;
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1) !important;
  position: relative !important;
}
.shadow-md.rounded-md:hover {
  background: var(--noc-card-h) !important;
  border-color: var(--noc-border-h) !important;
  transform: translateX(3px) !important;
  box-shadow:
    -3px 0 0 var(--noc-accent),
    0 4px 20px var(--noc-glow),
    0 1px 8px rgba(0,0,0,0.12) !important;
}
.shadow-md.rounded-md::before {
  content: '' !important;
  position: absolute !important;
  left: -1px !important; top: 20% !important; bottom: 20% !important;
  width: 2px !important;
  background: linear-gradient(180deg, transparent, var(--noc-accent), transparent) !important;
  opacity: 0 !important;
  transition: opacity 0.2s ease !important;
  border-radius: 2px !important;
}
.shadow-md.rounded-md:hover::before { opacity: 1 !important; }

/* ─── Service Name ───────────────────────────── */
.text-theme-700,
:is(.dark .dark\:text-theme-300) {
  color: var(--noc-text) !important;
  font-weight: 600 !important;
}

/* ─── Service Description ────────────────────── */
.text-theme-500,
:is(.dark .dark\:text-theme-500) {
  color: var(--noc-muted) !important;
  font-family: var(--noc-mono) !important;
  font-size: 0.76rem !important;
}

/* ─── Widget Numbers ─────────────────────────── */
.text-theme-800,
:is(.dark .dark\:text-theme-200),
.primary-text {
  color: var(--noc-accent) !important;
  font-family: var(--noc-mono) !important;
  font-size: 1rem !important;
  text-shadow: 0 0 8px var(--noc-glow) !important;
}

/* ─── Widget Labels ──────────────────────────── */
.text-xs,
.secondary-text {
  color: var(--noc-label) !important;
  font-family: var(--noc-mono) !important;
  font-size: 0.63rem !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
}

/* ─── Divider ────────────────────────────────── */
.border-theme-300,
:is(.dark .dark\:border-theme-800) {
  border-color: var(--noc-divider) !important;
}

/* ─── Icons ──────────────────────────────────── */
.shadow-md.rounded-md img {
  border-radius: 7px !important;
  filter: drop-shadow(0 0 4px var(--noc-glow)) !important;
  transition: all 0.2s ease !important;
}
.shadow-md.rounded-md:hover img {
  filter: drop-shadow(0 0 10px var(--noc-glow)) !important;
  transform: scale(1.07) !important;
}

/* ─── Scrollbar ──────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--noc-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--noc-accent); }

/* ─── Footer ─────────────────────────────────── */
footer, #footer {
  color: var(--noc-muted) !important;
  font-family: var(--noc-mono) !important;
  font-size: 0.66rem !important;
}
footer button:hover { color: var(--noc-accent) !important; }

/* ─── Fade-in ────────────────────────────────── */
@keyframes nocFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.services-group                { animation: nocFadeIn 0.4s ease both !important; }
.services-group:nth-child(1)   { animation-delay: 0.00s !important; }
.services-group:nth-child(2)   { animation-delay: 0.08s !important; }
.services-group:nth-child(3)   { animation-delay: 0.16s !important; }