/* ============================================================
   9Router - Cyberpunk 3D Theme (Hitam, Biru, Pink, Merah)
   Global, 60FPS Hardware-Accelerated, Zero-Lag Micro-Animations
   ============================================================ */

/* 1. Global Color System & 3D Stage */
:root {
  --c-black-bg: #07080b;
  --c-black-surface: #0f1219;
  --c-black-card: #141822;
  --c-black-card-hover: #191f2d;
  
  --c-blue: #3b82f6;
  --c-blue-glow: rgba(59, 130, 246, 0.4);
  --c-blue-border: #2563eb;
  
  --c-pink: #ec4899;
  --c-pink-glow: rgba(236, 72, 153, 0.4);
  --c-pink-border: #db2777;
  
  --c-red: #ef4444;
  --c-red-glow: rgba(239, 68, 68, 0.4);
  --c-red-border: #dc2626;

  --border-subtle: rgba(255, 255, 255, 0.08);
}

html, body {
  background: var(--c-black-bg) !important;
  color: #f1f5f9 !important;
  color-scheme: dark;
}

body, .bg-bg, [class*="min-h-screen"], main {
  background: var(--c-black-bg) !important;
}

/* Subtle Static Cyber Grid (Zero-CPU) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(var(--c-blue-glow) 1px, transparent 1px),
    radial-gradient(var(--c-pink-glow) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: 0 0, 16px 16px;
  opacity: 0.25;
}

/* Ensure foreground clarity */
header, nav, aside, main, div[class*="min-h-screen"], [role="dialog"], [role="menu"] {
  position: relative;
  z-index: 1;
}

/* 2. Global 3D Cards (Providers, Usage Stats, Quota, Combos, All Pages) */
.bg-surface,
div[class*="rounded-[14px]"][class*="border"],
div[class*="rounded-xl"][class*="border"],
div[class*="rounded-lg"][class*="border"],
div[class*="grid"] > a > div,
a[href*="/dashboard/"] > div {
  background: var(--c-black-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-bottom: 2px solid rgba(0, 0, 0, 0.6) !important;
  border-radius: 12px !important;
  box-shadow:
    0 4px 0 rgba(0, 0, 0, 0.5),
    0 8px 16px -2px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  transition: transform 0.16s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.16s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.16s ease !important;
  will-change: transform;
}

/* 3D Pop on Hover & Focus */
.bg-surface:hover,
div[class*="rounded-[14px]"][class*="border"]:hover,
div[class*="rounded-xl"][class*="border"]:hover,
div[class*="grid"] > a:hover > div,
a[href*="/dashboard/"]:hover > div {
  background: var(--c-black-card-hover) !important;
  border-color: var(--c-blue) !important;
  transform: translate3d(0, -4px, 0) scale(1.008) !important;
  box-shadow:
    0 8px 0 rgba(0, 0, 0, 0.4),
    0 16px 24px -4px var(--c-blue-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* 3D Tactile Depress on Touch / Click */
.bg-surface:active,
div[class*="grid"] > a:active > div,
a[href*="/dashboard/"]:active > div {
  transform: translate3d(0, 2px, 0) scale(0.992) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5) !important;
}

/* 3. Dropdowns, Titik 3 Menu, & Popups */
[role="menu"],
div[class*="origin-top-"],
div[class*="absolute"][class*="shadow-lg"],
div[class*="absolute"][class*="z-50"] > div[class*="bg-surface"] {
  background: #0e1118 !important;
  border: 1px solid var(--c-blue-border) !important;
  border-radius: 12px !important;
  box-shadow:
    0 6px 0 rgba(0, 0, 0, 0.6),
    0 14px 28px -2px rgba(0, 0, 0, 0.65),
    0 0 16px var(--c-blue-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  animation: popIn3D 0.18s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

@keyframes popIn3D {
  from { opacity: 0; transform: translate3d(0, -8px, 0) scale(0.96); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

[role="menuitem"],
div[role="menu"] button,
div[role="menu"] a {
  transition: all 0.12s ease !important;
  border-radius: 8px !important;
}

[role="menuitem"]:hover,
div[role="menu"] button:hover,
div[role="menu"] a:hover {
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.2) 0%, rgba(236, 72, 153, 0.15) 100%) !important;
  color: #ffffff !important;
  transform: translate3d(3px, 0, 0) !important;
}

/* 4. Modals (Detail Connection, Add Provider, Settings, Usage Filter) */
[role="dialog"],
div[class*="fixed"][class*="z-50"] > div[class*="bg-surface"] {
  background: #0d1017 !important;
  border: 1px solid var(--c-blue) !important;
  border-radius: 16px !important;
  box-shadow:
    0 12px 0 rgba(0, 0, 0, 0.6),
    0 24px 48px -4px rgba(0, 0, 0, 0.8),
    0 0 24px var(--c-blue-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  animation: modalIn3D 0.22s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}

@keyframes modalIn3D {
  from { opacity: 0; transform: translate3d(0, 16px, 0) scale(0.96); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* 5. 3D Buttons (Pink, Biru, Hitam, Merah) */
button, a[class*="inline-flex"][class*="rounded-"] {
  transition: transform 0.12s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.12s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.12s ease !important;
  cursor: pointer;
}

/* Biru Primary (+ Add Anthropic, Save, Connect) */
button[class*="bg-brand-"],
button[class*="bg-primary"],
button[type="submit"] {
  background: linear-gradient(135deg, var(--c-blue) 0%, #2563eb 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 8px !important;
  box-shadow:
    0 3px 0 #1d4ed8,
    0 6px 12px var(--c-blue-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

button[class*="bg-brand-"]:hover,
button[class*="bg-primary"]:hover,
button[type="submit"]:hover {
  transform: translate3d(0, -2px, 0) !important;
  box-shadow:
    0 5px 0 #1d4ed8,
    0 10px 18px var(--c-blue-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

button[class*="bg-brand-"]:active,
button[class*="bg-primary"]:active,
button[type="submit"]:active {
  transform: translate3d(0, 3px, 0) !important;
  box-shadow: 0 0 0 #1d4ed8 !important;
}

/* Pink Accent Buttons (Donate, Promo, Highlights) */
button[class*="bg-pink-"],
a[href*="donate"],
button:has(span:contains("Donate")),
button[class*="donate"] {
  background: linear-gradient(135deg, var(--c-pink) 0%, #db2777 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 8px !important;
  box-shadow:
    0 3px 0 #be185d,
    0 6px 12px var(--c-pink-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

button[class*="bg-pink-"]:hover, a[href*="donate"]:hover {
  transform: translate3d(0, -2px, 0) !important;
  box-shadow: 0 5px 0 #be185d, 0 10px 18px var(--c-pink-glow) !important;
}

button[class*="bg-pink-"]:active, a[href*="donate"]:active {
  transform: translate3d(0, 3px, 0) !important;
  box-shadow: 0 0 0 #be185d !important;
}

/* Hitam Secondary (+ Add OpenAI, Cancel, Back) */
button[class*="variant-secondary"],
button[class*="!bg-white"],
button[class*="bg-surface-2"] {
  background: #181c26 !important;
  color: #f1f5f9 !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 8px !important;
  box-shadow:
    0 3px 0 #090b10,
    0 6px 12px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

button[class*="variant-secondary"]:hover,
button[class*="!bg-white"]:hover {
  transform: translate3d(0, -2px, 0) !important;
  border-color: var(--c-blue) !important;
  box-shadow: 0 5px 0 #090b10, 0 8px 16px rgba(0, 0, 0, 0.5) !important;
}

button[class*="variant-secondary"]:active,
button[class*="!bg-white"]:active {
  transform: translate3d(0, 3px, 0) !important;
  box-shadow: 0 0 0 #090b10 !important;
}

/* Merah Danger (Delete, Reset, Revoke, Error action) */
button[class*="danger"],
button[class*="bg-red-"] {
  background: linear-gradient(135deg, var(--c-red) 0%, #b91c1c 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 8px !important;
  box-shadow:
    0 3px 0 #991b1b,
    0 6px 12px var(--c-red-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

button[class*="danger"]:hover,
button[class*="bg-red-"]:hover {
  transform: translate3d(0, -2px, 0) !important;
  box-shadow: 0 5px 0 #991b1b, 0 10px 18px var(--c-red-glow) !important;
}

button[class*="danger"]:active,
button[class*="bg-red-"]:active {
  transform: translate3d(0, 3px, 0) !important;
  box-shadow: 0 0 0 #991b1b !important;
}

/* 6. Badges & Status Indicators (Pink, Biru, Merah) */
span[class*="rounded-full"][class*="bg-green-"],
span[class*="rounded-full"][class*="bg-emerald-"],
.bg-\\[\\#27C93F\\] {
  box-shadow: 0 0 8px #22c55e !important;
  animation: cyberPulse 2s ease-in-out infinite !important;
}

span[class*="bg-red-"],
span[class*="text-red-"] {
  color: #fca5a5 !important;
  text-shadow: 0 0 6px var(--c-red-glow);
}

span[class*="bg-blue-"],
span[class*="text-blue-"] {
  color: #93c5fd !important;
  text-shadow: 0 0 6px var(--c-blue-glow);
}

span[class*="bg-pink-"],
span[class*="text-pink-"],
span[class*="text-orange-400"] {
  color: #f472b6 !important;
  text-shadow: 0 0 6px var(--c-pink-glow);
}

@keyframes cyberPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.18); }
}

/* 7. Usage Stats & Data Tables (Usage, Quota, Logs) */
table {
  border-collapse: separate !important;
  border-spacing: 0 4px !important;
}

tbody tr {
  background: var(--c-black-card) !important;
  transition: transform 0.14s ease, background 0.14s ease !important;
}

tbody tr:hover {
  background: var(--c-black-card-hover) !important;
  transform: translate3d(2px, 0, 0) !important;
}

/* 8. Sidebar & Navigation Depth */
aside, div[class*="w-72"][class*="border-r"] {
  background: #0b0d13 !important;
  border-right: 1px solid var(--border-subtle) !important;
  box-shadow: 4px 0 16px rgba(0, 0, 0, 0.5) !important;
}

aside a, aside button {
  border-radius: 8px !important;
  transition: all 0.15s ease !important;
}

aside a:hover, aside button:hover {
  background: rgba(59, 130, 246, 0.12) !important;
  border-left: 3px solid var(--c-pink) !important;
  transform: translate3d(3px, 0, 0) !important;
}

aside a[class*="bg-primary"],
aside [class*="bg-primary/10"] {
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.25) 0%, rgba(236, 72, 153, 0.15) 100%) !important;
  border-left: 3px solid var(--c-blue) !important;
  box-shadow: 0 2px 8px var(--c-blue-glow) !important;
}

/* 9. Header */
header, div[class*="border-b"][class*="bg-"] {
  background: #0b0d13 !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

/* Inputs */
input[type="text"], input[type="search"], input[type="password"], select {
  background: #141721 !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

input:focus, select:focus {
  border-color: var(--c-blue) !important;
  box-shadow: 0 0 0 2px var(--c-blue-glow) !important;
}