/* Nova Gateway — Vermulst Group Theme v2.0
   Dark theme (default) + Light theme + OPENCLAW text replacement */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ═══════════════════════════════════════════════
   DARK THEME (default)
   ═══════════════════════════════════════════════ */
:root,
:root[data-theme="dark"] {
  /* === Typography === */
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-display: 'Inter', 'DM Sans', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  /* === Base surfaces === */
  --bg: #0A0A0A;
  --bg-content: #121212;
  --bg-elevated: #1C1C1C;
  --bg-muted: #151617;
  --bg-hover: #202224;
  --bg-accent: rgba(82, 139, 255, 0.08);
  --bg-secondary: #161718;

  /* === Cards & panels === */
  --card: #1E1E1E;
  --card-foreground: #F0F2F5;
  --card-highlight: rgba(82, 139, 255, 0.06);
  --panel: #181919;
  --panel-hover: #202224;
  --panel-strong: #242628;
  --popover: #1E1E1E;
  --popover-foreground: #F0F2F5;

  /* === Chrome (nav/sidebar) === */
  --chrome: #121212;
  --chrome-strong: #1E1E1E;

  /* === Text (READABILITY FIX — raised contrast) === */
  --text: #F0F2F5;
  --text-strong: #FFFFFF;
  --chat-text: #F0F2F5;
  --static: #F0F2F5;
  --text-muted: #B8C0CC;

  /* === Muted foreground (raised from #9AA5B5) === */
  --muted: #8B8F98;
  --muted-foreground: #B8C0CC;
  --muted-strong: #CBD5E1;

  /* === Borders (brighter) === */
  --border: #3B4555;
  --border-hover: #528BFF;
  --border-strong: #4A5568;
  --border-color: #3B4555;

  /* === Accent (VG brand blue) === */
  --ring: #528BFF;
  --accent: #528BFF;
  --accent-hover: #84ADFF;
  --accent-muted: rgba(82, 139, 255, 0.28);
  --accent-subtle: rgba(82, 139, 255, 0.18);
  --accent-foreground: #FFFFFF;
  --accent-glow: rgba(82, 139, 255, 0.15);
  --accent-2: #3D7AEF;
  --accent-2-muted: rgba(61, 122, 239, 0.25);
  --accent-2-subtle: rgba(61, 122, 239, 0.10);

  /* === Primary === */
  --primary: #3B6BC4;
  --primary-foreground: #FFFFFF;

  /* === Secondary === */
  --secondary: #1E2028;
  --secondary-foreground: #F0F2F5;

  /* === Semantic colors === */
  --ok: #5EC369;
  --ok-muted: rgba(94, 195, 105, 0.25);
  --ok-subtle: rgba(94, 195, 105, 0.16);
  --warn: #E5A836;
  --warn-muted: rgba(229, 168, 54, 0.25);
  --warn-subtle: rgba(229, 168, 54, 0.18);
  --danger: #C0392B;
  --danger-muted: rgba(192, 57, 43, 0.25);
  --danger-subtle: rgba(192, 57, 43, 0.16);
  --destructive: #C0392B;
  --destructive-foreground: #F0F2F5;
  --info: #528BFF;

  /* === Interactive === */
  --input: #1A1D24;
  --clickable: #528BFF;
  --ring: rgba(82, 139, 255, 0.4);
  --focus: #528BFF;
  --focus-ring: rgba(82, 139, 255, 0.35);
  --focus-glow: 0 0 0 3px rgba(82, 139, 255, 0.15);
  --icon: #B8C0CC;

  /* === Grid === */
  --grid-line: #3B4555;

  /* === Radii === */
  --radius: 6px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-full: 9999px;

  /* === Shadows === */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 0 20px rgba(82, 139, 255, 0.08);

  /* === Timing === */
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 350ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* === Shell layout === */
  --shell-gap: 0px;
  --shell-pad: 16px;
  --shell-nav-width: 240px;
  --shell-topbar-height: 48px;
  --shell-focus-duration: 200ms;
  --shell-focus-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* === Theme switcher === */
  --theme-pad: 3px;
  --theme-gap: 2px;
  --theme-item: 28px;
  --theme-switch-x: 0px;
  --theme-switch-y: 0px;

  color-scheme: dark;
}

/* ═══════════════════════════════════════════════
   LIGHT THEME (vermulstgroup.com palette)
   ═══════════════════════════════════════════════ */
:root[data-theme="light"] {
  /* === Base surfaces === */
  --bg: #FAFAFF;
  --bg-content: #FFFFFF;
  --bg-elevated: #F4F8FF;
  --bg-muted: #F1F5F9;
  --bg-hover: #EFF4FF;
  --bg-accent: rgba(21, 94, 239, 0.06);
  --bg-secondary: #F8FAFC;

  /* === Cards & panels === */
  --card: #FFFFFF;
  --card-foreground: #191A1C;
  --card-highlight: rgba(21, 94, 239, 0.04);
  --panel: #F9FAFB;
  --panel-hover: #F1F5F9;
  --panel-strong: #E5E7EB;
  --popover: #FFFFFF;
  --popover-foreground: #191A1C;

  /* === Chrome (nav/sidebar) === */
  --chrome: #F9FAFB;
  --chrome-strong: #F1F5F9;

  /* === Text === */
  --text: #191A1C;
  --text-strong: #0C111D;
  --chat-text: #191A1C;
  --static: #191A1C;
  --text-muted: #667085;

  /* === Muted foreground === */
  --muted: #6B7280;
  --muted-foreground: #667085;
  --muted-strong: #344054;

  /* === Borders === */
  --border: #E5E7EB;
  --border-hover: #155EEF;
  --border-strong: #D1D5DB;
  --border-color: #E5E7EB;

  /* === Accent (VG brand blue — exact match) === */
  --accent: #155EEF;
  --accent-hover: #0040C1;
  --accent-muted: rgba(21, 94, 239, 0.20);
  --accent-subtle: rgba(21, 94, 239, 0.10);
  --accent-foreground: #FFFFFF;
  --accent-glow: rgba(21, 94, 239, 0.10);
  --accent-2: #1D4ED8;
  --accent-2-muted: rgba(29, 78, 216, 0.20);
  --accent-2-subtle: rgba(29, 78, 216, 0.08);

  /* === Primary === */
  --primary: #155EEF;
  --primary-foreground: #FFFFFF;

  /* === Secondary === */
  --secondary: #F1F5F9;
  --secondary-foreground: #191A1C;

  /* === Semantic colors === */
  --ok: #16A34A;
  --ok-muted: rgba(22, 163, 74, 0.15);
  --ok-subtle: rgba(22, 163, 74, 0.08);
  --warn: #D97706;
  --warn-muted: rgba(217, 119, 6, 0.15);
  --warn-subtle: rgba(217, 119, 6, 0.08);
  --danger: #DC2626;
  --danger-muted: rgba(220, 38, 38, 0.15);
  --danger-subtle: rgba(220, 38, 38, 0.08);
  --destructive: #DC2626;
  --destructive-foreground: #FFFFFF;
  --info: #155EEF;

  /* === Interactive === */
  --input: #FFFFFF;
  --clickable: #155EEF;
  --ring: rgba(21, 94, 239, 0.3);
  --focus: #155EEF;
  --focus-ring: rgba(21, 94, 239, 0.25);
  --focus-glow: 0 0 0 3px rgba(21, 94, 239, 0.10);
  --icon: #667085;

  /* === Grid === */
  --grid-line: #E5E7EB;

  /* === Shadows (lighter for day mode) === */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.10);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);
  --shadow-glow: 0 0 20px rgba(21, 94, 239, 0.06);

  color-scheme: light;
}

/* ═══════════════════════════════════════════════
   DOCUMENT-LEVEL STYLES
   ═══════════════════════════════════════════════ */
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', system-ui, sans-serif;
}

/* Subtle grain overlay (dark only) */
:root[data-theme="dark"] body::before,
:root:not([data-theme="light"]) body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* Remove grain in light mode */
:root[data-theme="light"] body::before {
  display: none;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--border-strong);
}

/* Selection highlight */
::selection {
  background: var(--accent-muted);
  color: var(--text-strong);
}

/* ═══════════════════════════════════════════════
   SIDEBAR READABILITY BOOST
   ═══════════════════════════════════════════════ */

/* Navigation labels */
nav a, nav button,
[class*="sidebar"] a,
[class*="sidebar"] button,
[class*="nav-item"],
[class*="menu-item"] {
  color: var(--muted-strong) !important;
}

nav a:hover, nav button:hover,
[class*="sidebar"] a:hover,
[class*="sidebar"] button:hover {
  color: var(--text-strong) !important;
}

/* Active nav item */
nav a[aria-current="page"],
nav a.active,
[class*="sidebar"] a[aria-current="page"],
[class*="sidebar"] a.active {
  color: var(--text-strong) !important;
  background: var(--bg-hover) !important;
}

/* Section headers (Chat, Control, etc.) */
nav [class*="section"],
nav [class*="group-label"],
nav [class*="heading"],
[class*="sidebar"] [class*="section"],
[class*="sidebar"] [class*="group-label"],
[class*="sidebar"] [class*="heading"] {
  color: var(--muted-foreground) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
}

/* ═══════════════════════════════════════════════
   THEME TOGGLE BUTTON
   ═══════════════════════════════════════════════ */
#vg-theme-toggle {
  position: fixed;
  top: 12px;
  right: 80px;
  z-index: 10000;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--icon);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 200ms ease;
  font-size: 18px;
  line-height: 1;
  padding: 0;
}

#vg-theme-toggle:hover {
  background: var(--bg-hover);
  border-color: var(--accent);
  color: var(--accent);
}




/* ═══════════════════════════════════════════════
   TEXT READABILITY — Direct class overrides
   Ensures muted/secondary text is always readable
   on dark backgrounds (WCAG AA: 4.5:1 minimum)
   ═══════════════════════════════════════════════ */

/* Sidebar section labels (Chat, Control, Agent, Settings, Resources) */
.nav-label,
.nav-label__text,
.nav-label__chevron {
  color: #8B8F98 !important;
}

/* Brand subtitle under "Nova Gateway" */
.brand-sub {
  color: #71717A !important;
}

/* Card descriptions and subtitles */
.card-sub,
.card-desc,
.card-subtitle {
  color: #9CA3AF !important;
}

/* Muted text class (used extensively throughout) */
.muted,
.text-muted,
[class*="muted-text"],
[class*="text-secondary"] {
  color: #9CA3AF !important;
}

/* Config page field descriptions */
.field-desc,
.field-description,
.form-hint,
.help-text,
.config-desc {
  color: #9CA3AF !important;
}

/* Table headers and subtle labels */
.table-head,
.col-label,
.stat-label,
.metric-label {
  color: #9CA3AF !important;
}

/* Sidebar nav items (not active) — ensure readable */
.nav-item:not(.active) .nav-item__text,
.nav-item:not(.active) {
  color: #D1D5DB !important;
}

/* Active sidebar item — white text on blue bg for max contrast */
.nav-item.active .nav-item__text,
.nav-item.active {
  color: #FFFFFF !important;
}

/* Page titles and section headers — always bright */
h1, h2, h3 {
  color: #F0F2F5 !important;
}

/* Page description/subtitle text */
.page-sub,
.page-subtitle,
.page-description,
.section-sub {
  color: #9CA3AF !important;
}

/* Usage page specific */
.usage-stat-label,
.chart-label,
.axis-label {
  color: #9CA3AF !important;
}

/* Input placeholders */
input::placeholder,
textarea::placeholder {
  color: #6B7280 !important;
  opacity: 1 !important;
}

/* Code blocks and pre text */
code, pre {
  color: #E4E4E7 !important;
}

/* Links in muted contexts */
a.muted,
.muted a {
  color: #84ADFF !important;
}

/* Light theme text readability overrides */
:root[data-theme="light"] .nav-label,
:root[data-theme="light"] .nav-label__text,
:root[data-theme="light"] .nav-label__chevron {
  color: #6B7280 !important;
}

:root[data-theme="light"] .brand-sub {
  color: #9CA3AF !important;
}

:root[data-theme="light"] .card-sub,
:root[data-theme="light"] .card-desc,
:root[data-theme="light"] .muted,
:root[data-theme="light"] .text-muted {
  color: #6B7280 !important;
}

:root[data-theme="light"] .nav-item.active .nav-item__text,
:root[data-theme="light"] .nav-item.active {
  color: #FFFFFF !important;
}

:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] h3 {
  color: #18181B !important;
}

/* ═══════════════════════════════════════════════
   RED ACCENT OVERRIDE — Force brand blue on
   hardcoded red/coral buttons in OpenClaw UI
   ═══════════════════════════════════════════════ */

/* Active toggle buttons (Tokens, All, etc.) */
.toggle-btn.active,
button.toggle-btn.active {
  background-color: var(--accent) !important;
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

.toggle-btn.active:hover,
button.toggle-btn.active:hover {
  background-color: var(--accent-hover) !important;
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
}

/* Primary action buttons (Refresh, etc.) */
.usage-primary-btn,
button.usage-primary-btn {
  background-color: var(--accent) !important;
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

.usage-primary-btn:hover,
button.usage-primary-btn:hover {
  background-color: var(--accent-hover) !important;
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
}

/* ═══════════════════════════════════════════════
   WHITE-ON-BLUE CONTRAST FIX
   Active items with white text on accent bg need
   a darker blue to meet WCAG AA 4.5:1
   ═══════════════════════════════════════════════ */

/* Active sidebar item — darken blue bg for AA contrast with white text */
.nav-item.active {
  background-color: #3B6BC4 !important;
  background: #3B6BC4 !important;
}

.nav-item.active:hover {
  background-color: #4173D4 !important;
  background: #4173D4 !important;
}

/* Active toggle buttons (Tokens, All, etc.) — also needs darker bg */
.toggle-btn.active,
button.toggle-btn.active {
  background-color: #3B6BC4 !important;
  background: #3B6BC4 !important;
  border-color: #3B6BC4 !important;
}

.toggle-btn.active:hover,
button.toggle-btn.active:hover {
  background-color: #4173D4 !important;
  background: #4173D4 !important;
  border-color: #4173D4 !important;
}

/* Primary action buttons — keep brighter blue since text is bold/large */
.usage-primary-btn,
button.usage-primary-btn {
  background-color: #3B6BC4 !important;
  background: #3B6BC4 !important;
  border-color: #3B6BC4 !important;
}

.usage-primary-btn:hover,
button.usage-primary-btn:hover {
  background-color: #4173D4 !important;
  background: #4173D4 !important;
  border-color: #4173D4 !important;
}

/* Primary buttons (Save, Apply, Reload, etc.) */
.btn.primary,
.btn--primary,
button.btn.primary {
  background-color: #3B6BC4 !important;
  background: #3B6BC4 !important;
  border-color: #3B6BC4 !important;
  color: #fff !important;
}

.btn.primary:hover,
.btn--primary:hover {
  background-color: #4173D4 !important;
  background: #4173D4 !important;
  border-color: #4173D4 !important;
}

/* Config page: Form/Raw toggle, segmented buttons (local/token/lan/off) */
.config-mode-toggle__btn.active,
.cfg-segmented__btn.active {
  background-color: #3B6BC4 !important;
  background: #3B6BC4 !important;
  border-color: #3B6BC4 !important;
  color: #fff !important;
}

/* Catch-all: agent tabs, channel tabs, any OpenClaw .active element */
.agent-tab.active,
.channel-tab.active,
.tab-btn.active,
[class*="-tab"].active {
  background-color: #3B6BC4 !important;
  background: #3B6BC4 !important;
  border-color: #3B6BC4 !important;
  color: #fff !important;
}

.agent-tab.active:hover,
.channel-tab.active:hover,
.tab-btn.active:hover,
[class*="-tab"].active:hover {
  background-color: #4173D4 !important;
  background: #4173D4 !important;
  border-color: #4173D4 !important;
}

.config-mode-toggle__btn.active:hover,
.cfg-segmented__btn.active:hover {
  background-color: #4173D4 !important;
  background: #4173D4 !important;
  border-color: #4173D4 !important;
}

/* "GATEWAY DASHBOARD" brand subtitle — boost to readable gray */
.brand-sub {
  color: #9CA3AF !important;
}

/* Light theme — active items need same treatment */
:root[data-theme="light"] .nav-item.active {
  background-color: #3B6BC4 !important;
  background: #3B6BC4 !important;
}

:root[data-theme="light"] .toggle-btn.active {
  background-color: #3B6BC4 !important;
  background: #3B6BC4 !important;
  border-color: #3B6BC4 !important;
}