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

/* =============================================
   WAXELL DARK THEME
   Background: #0b0c0e | Accent: #52feca
   Matching waxell.ai design system
   ============================================= */

/* Force dark mode and override CSS custom properties */
:root, :root.dark {
  --background: 220 12% 4%;
  --foreground: 0 0% 100%;
  --card: 228 16% 8%;
  --card-foreground: 0 0% 100%;
  --popover: 228 16% 8%;
  --popover-foreground: 0 0% 100%;
  --primary: 160 99% 66%;
  --primary-foreground: 220 12% 4%;
  --secondary: 228 16% 12%;
  --secondary-foreground: 0 0% 100%;
  --muted: 228 16% 12%;
  --muted-foreground: 0 0% 60%;
  --accent: 228 16% 14%;
  --accent-foreground: 0 0% 100%;
  --destructive: 351 95% 55%;
  --destructive-foreground: 0 0% 100%;
  --border: 0 0% 100% / 0.1;
  --input: 0 0% 100% / 0.1;
  --ring: 160 99% 66%;
  --radius: 0.75rem;
}

/* Base styles */
html, body {
  background: #0b0c0e !important;
  color: #ffffff !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Main container */
.container {
  max-width: 960px !important;
}

/* ---- HEADER ---- */
header, nav, [class*="navbar"], [class*="header"] {
  background: rgba(11, 12, 14, 0.85) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Logo sizing */
header img, nav img {
  height: 28px !important;
  width: auto !important;
}

/* Header title */
h1, [class*="text-4xl"] {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #ffffff !important;
}

/* Subtitle / description */
[class*="text-muted"] {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* ---- NAVIGATION BUTTONS ---- */
nav a, header a {
  color: rgba(255, 255, 255, 0.7) !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}
nav a:hover, header a:hover {
  color: #52feca !important;
}

/* Button styling for header buttons */
a[href*="waxell.ai"] {
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 20px !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.8) !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
}
a[href*="waxell.ai"]:hover {
  border-color: rgba(82, 254, 202, 0.4) !important;
  color: #52feca !important;
  background: rgba(82, 254, 202, 0.05) !important;
}

/* ---- ENDPOINT GROUPS ---- */
.endpoint-group, [class*="endpoint-group"] {
  background: #12141a !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  margin-bottom: 1.5rem !important;
}

/* Group headers */
.endpoint-group-header, [class*="endpoint-group-header"] {
  background: rgba(255, 255, 255, 0.02) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding: 16px 20px !important;
}
.endpoint-group-header:hover, [class*="endpoint-group-header"]:hover {
  background: rgba(82, 254, 202, 0.03) !important;
}

/* Group title text */
[class*="text-xl"][class*="font-semibold"],
.endpoint-group-header span,
.endpoint-group-header .text-foreground {
  color: #ffffff !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* ---- ENDPOINT CARDS ---- */
.endpoint, [class*="endpoint h-full"] {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
}
.endpoint:hover, [class*="endpoint h-full"]:hover {
  border-color: rgba(82, 254, 202, 0.2) !important;
  background: rgba(82, 254, 202, 0.02) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3) !important;
}

/* Card component overrides */
[class*="bg-card"] {
  background: rgba(255, 255, 255, 0.02) !important;
}

/* Endpoint name links */
.endpoint a, .endpoint [role="link"],
[class*="hover:text-primary"][class*="cursor-pointer"] {
  color: #ffffff !important;
  font-weight: 500 !important;
}
.endpoint a:hover, .endpoint [role="link"]:hover,
[class*="hover:text-primary"][class*="cursor-pointer"]:hover {
  color: #52feca !important;
}

/* ---- STATUS COLORS ---- */
/* Healthy = Waxell accent green */
.bg-green-500, [class*="bg-green-500"] {
  background-color: #52feca !important;
}
.bg-green-700, [class*="bg-green-700"] {
  background-color: #3ddcb0 !important;
}
.text-green-600, [class*="text-green-600"] {
  color: #52feca !important;
}

/* Unhealthy = Error red */
.bg-red-500, [class*="bg-red-500"] {
  background-color: #fb7185 !important;
}
.bg-red-600, [class*="bg-red-600"] {
  background-color: #e11d48 !important;
}
.bg-red-700, [class*="bg-red-700"] {
  background-color: #be123c !important;
}

/* Empty/placeholder bars */
.bg-gray-200, [class*="bg-gray-200"] {
  background-color: rgba(255, 255, 255, 0.05) !important;
}
.dark .bg-gray-700, [class*="dark:bg-gray-700"],
.bg-gray-700, [class*="bg-gray-700"] {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Status badge styling */
[class*="StatusBadge"], [class*="badge"],
[class*="px-2"][class*="py-1"][class*="rounded-full"] {
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* ---- UPTIME BARS ---- */
[class*="h-6"][class*="rounded-sm"],
[class*="h-8"][class*="rounded-sm"] {
  border-radius: 3px !important;
}

/* ---- RESPONSE TIME ---- */
[class*="text-xs"][class*="text-muted"] {
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: 0.75rem !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}

/* ---- SEARCH BAR ---- */
input, [class*="search"] {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}
input:focus, [class*="search"]:focus {
  border-color: rgba(82, 254, 202, 0.4) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(82, 254, 202, 0.1) !important;
}
input::placeholder {
  color: rgba(255, 255, 255, 0.3) !important;
}

/* ---- PAGINATION ---- */
button, [class*="btn"] {
  font-family: 'Inter', system-ui, sans-serif !important;
}
[class*="pagination"] button {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  border-radius: 8px !important;
}
[class*="pagination"] button:hover {
  border-color: rgba(82, 254, 202, 0.3) !important;
  color: #52feca !important;
}

/* ---- TOOLTIPS ---- */
[class*="popover"], [class*="tooltip"],
[role="tooltip"] {
  background: #1a1c24 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

/* ---- FOOTER ---- */
footer, [class*="footer"] {
  background: transparent !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  margin-top: 3rem !important;
  padding-top: 1.5rem !important;
}
footer a, [class*="footer"] a {
  color: rgba(255, 255, 255, 0.3) !important;
  font-size: 0.8rem !important;
}
footer a:hover {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* ---- SCROLLBAR ---- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ---- MISC ---- */
/* Remove any white backgrounds that may leak through */
.bg-background, [class*="bg-background"] {
  background: #0b0c0e !important;
}
.bg-white, [class*="bg-white"] {
  background: #12141a !important;
}
.text-foreground, [class*="text-foreground"] {
  color: #ffffff !important;
}
/* Dividers */
.border-b, [class*="border-b"] {
  border-color: rgba(255, 255, 255, 0.08) !important;
}
hr {
  border-color: rgba(255, 255, 255, 0.08) !important;
}
/* Chevron / expand icons */
svg {
  color: inherit !important;
}
[class*="text-muted-foreground"] svg {
  color: rgba(255, 255, 255, 0.4) !important;
}
/* Focus ring */
*:focus-visible {
  outline: 2px solid rgba(82, 254, 202, 0.5) !important;
  outline-offset: 2px !important;
}