/* 9Router custom theme — modern elegant dark
   Injected via nginx sub_filter. Safe across npm updates. */

:root,
html,
html.dark,
.dark {
  /* Deeper, cleaner dark palette (zinc/slate) */
  --color-bg: #09090b !important;
  --color-bg-alt: #0c0c0f !important;
  --color-surface: #121216 !important;
  --color-surface-2: #18181c !important;
  --color-surface-3: #222228 !important;
  --color-sidebar: rgba(12, 12, 16, 0.82) !important;

  --color-border: rgba(255, 255, 255, 0.08) !important;
  --color-border-subtle: rgba(255, 255, 255, 0.05) !important;

  --color-text: #f4f4f5 !important;
  --color-text-main: #fafafa !important;
  --color-text-muted: #a1a1aa !important;
  --color-text-subtle: #71717a !important;

  /* Accent: refined indigo-violet (modern SaaS) */
  --color-brand-50: #eef2ff !important;
  --color-brand-100: #e0e7ff !important;
  --color-brand-200: #c7d2fe !important;
  --color-brand-300: #a5b4fc !important;
  --color-brand-400: #818cf8 !important;
  --color-brand-500: #6366f1 !important;
  --color-brand-600: #4f46e5 !important;
  --color-brand-700: #4338ca !important;
  --color-brand-800: #3730a3 !important;
  --color-brand-900: #312e81 !important;

  --color-primary: #818cf8 !important;
  --color-primary-hover: #a5b4fc !important;
  --color-accent: #818cf8 !important;

  --color-success: #34d399 !important;
  --color-warning: #fbbf24 !important;
  --color-danger: #f87171 !important;
  --color-info: #60a5fa !important;

  --radius-brand: 12px !important;
  --radius-brand-lg: 16px !important;

  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
  --shadow-warm: 0 8px 28px -8px rgba(99, 102, 241, 0.35) !important;
  --shadow-elevated: 0 20px 50px -16px rgba(0, 0, 0, 0.65) !important;
  --shadow-elev:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 18px 48px -12px rgba(0, 0, 0, 0.55) !important;
  --shadow-focus: 0 0 0 3px rgba(129, 140, 248, 0.28) !important;

  color-scheme: dark !important;
}

/* Force dark base */
html {
  color-scheme: dark !important;
  background: var(--color-bg) !important;
}

body {
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(99, 102, 241, 0.12), transparent 55%),
    radial-gradient(900px 500px at 90% 0%, rgba(168, 85, 247, 0.08), transparent 50%),
    var(--color-bg) !important;
  color: var(--color-text) !important;
  letter-spacing: -0.011em;
}

/* Selection */
::selection {
  background: rgba(129, 140, 248, 0.35);
  color: #fff;
}

/* Smooth UI */
*,
*::before,
*::after {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.24);
}

/* Glass panels / cards */
[class*="rounded"],
.rounded-xl,
.rounded-2xl,
.rounded-lg {
  border-color: var(--color-border) !important;
}

/* Buttons primary polish */
button,
[role="button"],
a {
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.12s ease !important;
}

/* Focus ring */
:focus-visible {
  outline: none !important;
  box-shadow: var(--shadow-focus) !important;
}

/* Inputs */
input,
textarea,
select {
  background-color: var(--color-surface-2) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
  border-radius: 10px !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: rgba(129, 140, 248, 0.55) !important;
  box-shadow: var(--shadow-focus) !important;
}

/* Subtle card elevation */
.bg-surface,
[class*="bg-surface"],
[class*="bg-bg"] {
  backdrop-filter: blur(10px);
}

/* Login page polish */
.min-h-screen.flex.items-center.justify-center {
  background:
    radial-gradient(800px 400px at 50% 0%, rgba(99, 102, 241, 0.18), transparent 60%),
    var(--color-bg) !important;
}

/* Tables / lists */
table {
  border-collapse: separate;
  border-spacing: 0;
}

/* Reduce harsh pure blacks from inline styles where possible */
.bg-black {
  background-color: #0a0a0b !important;
}

/* Code / mono blocks */
pre,
code,
.font-mono {
  font-feature-settings: "liga" 1, "calt" 1;
}

/* Soft divider */
hr {
  border-color: var(--color-border-subtle) !important;
}

/* Badge / chip soft glow for primary */
[class*="bg-primary"],
[class*="bg-brand"] {
  box-shadow: 0 0 0 1px rgba(129, 140, 248, 0.15), 0 6px 18px -8px rgba(99, 102, 241, 0.45);
}

/* Sidebar glass */
aside,
nav[class*="sidebar"],
[class*="Sidebar"] {
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
}

/* Link accent */
a:hover {
  color: var(--color-primary-hover);
}