/* Force pure black background everywhere */
html,
body,
#root,
#__next,
[data-theme="dark"],
.dark,
.bg-theme-50,
.bg-theme-100,
.bg-theme-200,
.bg-theme-300,
.bg-theme-400,
.bg-theme-500,
.bg-theme-600,
.bg-theme-700,
.bg-theme-800,
.bg-theme-900,
.bg-theme-950 {
  background-color: #000000 !important;
  background-image: none !important;
}

body {
  color: #ffffff !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Red grid overlay */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(rgba(255, 0, 0, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 0, 0, 0.05) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
  z-index: 0;
}

/* Section headers - high contrast */
h1, h2, h3, h4, h5, h6,
.text-2xl, .text-xl, .text-lg,
.font-bold,
.text-theme-900,
.text-theme-800,
.text-theme-700,
.text-theme-600,
.text-theme-500 {
  color: #ffffff !important;
  text-shadow:
    0 0 2px #000000,
    0 0 4px #000000,
    0 0 8px rgba(255, 0, 0, 0.4) !important;
}

/* Service cards - glassmorphism */
.service-card {
  background: rgba(10, 10, 10, 0.72) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 18px !important;
  box-shadow:
    0 8px 32px 0 rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(255, 0, 0, 0.08) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative;
  overflow: hidden;
}

.service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.04),
    transparent
  );
  transition: left 0.5s ease;
  pointer-events: none;
}

.service-card:hover::before {
  left: 100%;
}

.service-card:hover {
  transform: translateY(-5px) scale(1.02) !important;
  border-color: rgba(255, 0, 0, 0.55) !important;
  box-shadow:
    0 16px 48px 0 rgba(255, 0, 0, 0.18),
    0 0 30px rgba(255, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* Card title and description - white with strong shadow */
.service-card .text-theme-700,
.service-card .text-theme-800,
.service-card h3,
.service-card .text-sm,
.service-card .font-semibold,
.service-card .text-base {
  color: #ffffff !important;
  text-shadow:
    0 0 2px #000000,
    0 0 4px #000000,
    0 0 8px rgba(255, 255, 255, 0.35) !important;
}

.service-card .text-theme-500,
.service-card .text-xs,
.service-card .text-gray-500,
.service-card .text-gray-400 {
  color: rgba(255, 255, 255, 0.85) !important;
  text-shadow: 0 0 4px #000000 !important;
}

/* Widget values - Ferrari red */
.service-card .font-bold,
.service-card .text-2xl,
.service-card .text-xl,
.service-card .text-red-500,
.service-card .text-red-600 {
  color: #ff0000 !important;
  text-shadow:
    0 0 2px #000000,
    0 0 8px rgba(255, 0, 0, 0.8) !important;
}

/* Status indicators */
.service-card .status-up,
.service-card .text-green-500,
.service-card .text-emerald-500 {
  color: #00ff41 !important;
  text-shadow: 0 0 10px rgba(0, 255, 65, 0.7) !important;
}

.service-card .status-down,
.service-card .text-red-500 {
  color: #ff0000 !important;
  text-shadow: 0 0 10px rgba(255, 0, 0, 0.7) !important;
}

/* Header bar */
header {
  background: rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255, 0, 0, 0.3) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6) !important;
}

/* Top resource bars */
header .bg-theme-200,
header .bg-theme-300 {
  background-color: rgba(255, 0, 0, 0.25) !important;
}

header .bg-theme-500,
header .bg-theme-600 {
  background-color: #ff0000 !important;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.6) !important;
}

header .text-theme-600,
header .text-theme-700,
header .text-theme-800 {
  color: #ffffff !important;
  text-shadow: 0 0 4px #000000 !important;
}

/* Search / quick launch */
input[type="text"],
input[type="search"] {
  background: rgba(20, 20, 20, 0.8) !important;
  border: 1px solid rgba(255, 0, 0, 0.35) !important;
  color: #ffffff !important;
  border-radius: 14px !important;
}

input[type="text"]:focus,
input[type="search"]:focus {
  border-color: #ff0000 !important;
  box-shadow: 0 0 20px rgba(255, 0, 0, 0.35) !important;
  outline: none !important;
}

/* Links */
a {
  color: #ffffff !important;
}

a:hover {
  color: #ff0000 !important;
  text-shadow: 0 0 8px rgba(255, 0, 0, 0.6) !important;
}

/* Bookmarks */
.bookmark {
  background: rgba(10, 10, 10, 0.72) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 14px !important;
}

.bookmark:hover {
  border-color: rgba(255, 0, 0, 0.45) !important;
  box-shadow: 0 8px 24px rgba(255, 0, 0, 0.12) !important;
}

/* Iframes inside cards */
.service-card iframe {
  border-radius: 12px !important;
  background: transparent !important;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #000000 !important;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 0, 0, 0.5) !important;
  border-radius: 4px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: #ff0000 !important;
}

/* Fix API error backgrounds */
.service-card .bg-red-500,
.service-card .bg-red-600,
.service-card .bg-rose-500 {
  background-color: rgba(255, 0, 0, 0.15) !important;
  color: #ff0000 !important;
  border: 1px solid rgba(255, 0, 0, 0.3) !important;
}