OmniRoute/src/app/globals.css

@import "tailwindcss";
@import "fumadocs-ui/css/neutral.css";
@import "fumadocs-ui/css/preset.css";
/* Self-hosted Material Symbols icon font (#3695): the Google Fonts CDN
   (fonts.googleapis.com) is blocked in some networks (e.g. mainland China),
   which made every icon ligature fall back to its literal text name and broke
   the layout. Bundling the font locally removes that runtime CDN dependency.
   The bundled @font-face uses family "Material Symbols Outlined", matching the
   .material-symbols-outlined rule defined later in this file. */
@import "material-symbols/outlined.css";
@source "../../node_modules/fumadocs-ui/css/generated/*.css";

/* Tailwind v4 auto-detection cannot scan directories with parentheses
   (e.g. Next.js route groups like "(dashboard)"). Explicit @source
   directives ensure all utility classes in route groups are included. */
@source "../app/(dashboard)";
@source "../../node_modules/fumadocs-ui/dist/**/*.js";
@source not "../../*.sqlite*";
@source not "../../.claude*";
@source not "../../.claude-memory";

@custom-variant dark (&:where(.dark, .dark *));

/* Fumadocs sidebar width override */
:root {
  --fd-sidebar-width: 220px;
}

/* OpenClaw × ClawHub Color Palette */
:root {
  --desktop-safe-top: 0px;
  --desktop-safe-bottom: 0px;
  color-scheme: light;

  /* Primary - Coral Red (OpenClaw) */
  --color-primary: #e54d5e;
  --color-primary-hover: #c93d4e;

  /* Accent - Indigo/Violet (buttons, links, gradients) */
  --color-accent: #6366f1;
  --color-accent-hover: #8b5cf6;
  --color-accent-light: #a855f7;

  /* Semantic */
  --color-error: #ef4444;
  --color-success: #22c55e;
  --color-warning: #f59e0b;

  /* Traffic lights */
  --color-traffic-red: #ff5f56;
  --color-traffic-yellow: #ffbd2e;
  --color-traffic-green: #27c93f;

  /* Light theme */
  --color-bg: #f9f9fb;
  --color-bg-alt: #f0f0f5;
  --color-bg-primary: #f9f9fb;
  --color-bg-subtle: #f0f0f5;
  --color-surface: #ffffff;
  --color-card: #ffffff;
  --color-sidebar: #f5f5fa;
  --color-border: rgba(0, 0, 0, 0.08);
  --color-text-main: #1a1a2e;
  --color-text-primary: #1a1a2e;
  --color-text-muted: #71717a;

  /* Fumadocs light theme */
  --color-fd-background: #f9f9fb;
  --color-fd-foreground: #1a1a2e;
  --color-fd-muted: #f0f0f5;
  --color-fd-muted-foreground: #71717a;
  --color-fd-popover: #ffffff;
  --color-fd-popover-foreground: #1a1a2e;
  --color-fd-card: #ffffff;
  --color-fd-card-foreground: #1a1a2e;
  --color-fd-border: rgba(0, 0, 0, 0.08);
  --color-fd-primary: #e54d5e;
  --color-fd-primary-foreground: #ffffff;
  --color-fd-secondary: #f0f0f5;
  --color-fd-secondary-foreground: #1a1a2e;
  --color-fd-accent: rgba(229, 77, 94, 0.08);
  --color-fd-accent-foreground: #1a1a2e;
  --color-fd-ring: #e54d5e;

  /* Shadows */
  --shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.02), 0 4px 12px rgba(0, 0, 0, 0.015);
  --shadow-warm: 0 2px 12px -2px rgba(229, 77, 94, 0.12);
  --shadow-elevated: 0 12px 28px -4px rgba(20, 20, 40, 0.06);

  /* Graph-paper wallpaper grid — shared visual identity with the marketing site
     (_mono_repo/omnirouteSite/css). Light theme values. Rendered by body::before.
     Opacity tuned up from the site's 0.045 so the wallpaper is actually visible on
     the dense dashboard (cards/chrome cover most of the viewport). */
  --grid-line: rgba(0, 0, 0, 0.07);
  --grid-size: 32px;
  --section-alt: rgba(0, 0, 0, 0.022);

  /* Identity tokens mirrored from the site. Definitions only in this phase —
     components are repointed to them in a later phase. */
  --surface-2: #f5f5fa;
  --radius: 14px;
  --radius-control: 9px;
  --grad-brand: linear-gradient(135deg, var(--color-primary), var(--color-accent-light));

  /* Data-table surfaces — theme-aware. The DARK values (in .dark below) exactly mirror
     the previous hardcoded rgba in DataTable.tsx so dark stays byte-identical; these
     light values are the fix (the old code was always-dark via dead var fallbacks). */
  --table-header-bg: rgba(249, 249, 251, 0.95);
  --table-row-zebra: rgba(0, 0, 0, 0.02);
  --table-row-hover: rgba(0, 0, 0, 0.04);
  --table-cell-border: rgba(0, 0, 0, 0.04);
  /* Selected row — an accent tint that reads on both themes (inherited by .dark). */
  --table-row-selected: rgba(99, 102, 241, 0.1);
}

.dark {
  /* Dark theme (ClawHub deep) */
  color-scheme: dark;
  --color-bg: #0b0e14;
  --color-bg-alt: #111520;
  --color-bg-primary: #0b0e14;
  --color-bg-subtle: #111520;
  --color-surface: #161b22;
  --color-card: #161b22;
  --color-sidebar: #10141e;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-text-main: #e6e6ef;
  --color-text-primary: #e6e6ef;
  --color-text-muted: #a1a1aa;

  /* Fumadocs theme mapping */
  --color-fd-background: #0b0e14;
  --color-fd-foreground: #e6e6ef;
  --color-fd-muted: #111520;
  --color-fd-muted-foreground: #a1a1aa;
  --color-fd-popover: #161b22;
  --color-fd-popover-foreground: #e6e6ef;
  --color-fd-card: #161b22;
  --color-fd-card-foreground: #e6e6ef;
  --color-fd-border: rgba(255, 255, 255, 0.08);
  --color-fd-primary: #e54d5e;
  --color-fd-primary-foreground: #ffffff;
  --color-fd-secondary: #111520;
  --color-fd-secondary-foreground: #e6e6ef;
  --color-fd-accent: rgba(229, 77, 94, 0.12);
  --color-fd-accent-foreground: #e6e6ef;
  --color-fd-ring: #e54d5e;

  /* Dark shadows */
  --shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-warm: 0 2px 12px -2px rgba(229, 77, 94, 0.15);
  --shadow-elevated: 0 12px 28px -4px rgba(0, 0, 0, 0.3);

  /* Graph-paper wallpaper grid — dark theme values (tuned up from 0.035 for visibility). */
  --grid-line: rgba(255, 255, 255, 0.06);
  --section-alt: rgba(255, 255, 255, 0.018);
  --surface-2: #1c2230;

  /* Data-table surfaces — dark = the exact old hardcoded values (byte-identical). */
  --table-header-bg: rgba(15, 15, 25, 0.95);
  --table-row-zebra: rgba(255, 255, 255, 0.02);
  --table-row-hover: rgba(255, 255, 255, 0.04);
  --table-cell-border: rgba(255, 255, 255, 0.04);
}

@theme inline {
  /* Primary */
  --color-primary: var(--color-primary);
  --color-primary-hover: var(--color-primary-hover);

  /* Accent */
  --color-accent: var(--color-accent);
  --color-accent-hover: var(--color-accent-hover);
  --color-accent-light: var(--color-accent-light);

  /* Semantic */
  --color-error: var(--color-error);
  --color-success: var(--color-success);
  --color-warning: var(--color-warning);

  /* Auto-switch colors (use CSS variables from :root/.dark) */
  --color-bg: var(--color-bg);
  --color-bg-primary: var(--color-bg-primary);
  --color-bg-subtle: var(--color-bg-subtle);
  --color-surface: var(--color-surface);
  --color-card: var(--color-card);
  --color-sidebar: var(--color-sidebar);
  --color-border: var(--color-border);
  --color-text-main: var(--color-text-main);
  --color-text-primary: var(--color-text-primary);
  --color-text-muted: var(--color-text-muted);

  /* Static colors (for explicit light/dark usage) */
  --color-bg-light: #f9f9fb;
  --color-bg-dark: #0b0e14;
  --color-surface-light: #ffffff;
  --color-surface-dark: #161b22;
  --color-sidebar-light: #ededf2;
  --color-sidebar-dark: #111520;
  --color-border-light: #e2e2ea;
  --color-border-dark: #2d333b;
  --color-text-main-light: #1a1a2e;
  --color-text-main-dark: #e6e6ef;
  --color-text-muted-light: #71717a;
  --color-text-muted-dark: #a1a1aa;

  /* Shadows */
  --shadow-soft: var(--shadow-soft);
  --shadow-warm: var(--shadow-warm);
  --shadow-elevated: var(--shadow-elevated);

  /* Font - macOS system fonts */
  --font-sans:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif;
  /* Monospace stack (parity with the site) — code blocks, IDs, endpoints, terminals */
  --font-mono: ui-monospace, "JetBrains Mono", "Fira Code", "SF Mono", monospace;

  /* Nested surface (enables bg-surface-2) */
  --color-surface-2: var(--surface-2);

  /* Semantic radius scale → rounded-card (surfaces, 14px) / rounded-control (controls,
     9px). Custom names so the default rounded-sm/md/lg/xl utilities stay untouched. */
  --radius-card: var(--radius);
  --radius-control: var(--radius-control);
}

/* ── Focus Indicators (U-3) ── */
:root {
  --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent);
}

/* Visible focus ring on keyboard navigation only */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 4px;
}

/* Utility class for custom focus ring */
.focus-ring:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Remove focus ring from mouse clicks */
:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* Base styles */
body {
  background-color: var(--color-bg);
  color: var(--color-text-main);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Graph-paper wallpaper grid — one fixed, full-viewport layer behind every screen
   (dashboard, auth, error pages). A z-index:-1 ::before paints above body's own
   background but below all in-flow content, so it shows through any transparent
   wrapper without lowering text contrast. Mirrors the marketing site exactly. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
}

body.electron-macos {
  --desktop-safe-top: 30px;
  --desktop-safe-bottom: 8px;
}

/* Selection — with fallback for browsers that don't support color-mix() */
::selection {
  background-color: rgba(229, 77, 94, 0.22);
  background-color: color-mix(in srgb, var(--color-primary) 22%, transparent);
  color: var(--color-primary);
}

/* Global custom scrollbar — thin, minimal, theme-aware */
*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: rgba(156, 163, 175, 0.2);
  border-radius: 9999px;
  transition: background-color 0.2s;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: rgba(156, 163, 175, 0.45);
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

/* Dark theme scrollbar — slightly brighter thumb */
.dark *::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.08);
}

.dark *::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

/* Firefox support */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(156, 163, 175, 0.2) transparent;
}

.dark * {
  scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
}

/* Keep .custom-scrollbar alias for backward compatibility */
.custom-scrollbar {
  scrollbar-width: thin;
}

/* Hero gradient */
.bg-hero-gradient {
  background: linear-gradient(180deg, #f0f0f5 0%, #f9f9fb 100%);
}

.dark .bg-hero-gradient {
  background: linear-gradient(180deg, #111520 0%, #0b0e14 100%);
}

/* Material Symbols */
:where(.material-symbols-outlined) {
  font-family: "Material Symbols Outlined", sans-serif !important;
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-variation-settings:
    "FILL" 0,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;
  user-select: none;
}

/* Ensure icon clicks always bubble to the parent button */
button .material-symbols-outlined,
[role="button"] .material-symbols-outlined {
  pointer-events: none;
}

.material-symbols-outlined.fill-1 {
  font-variation-settings:
    "FILL" 1,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;
}

/* Animations */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes border-glow {
  0%,
  100% {
    box-shadow:
      0 0 5px rgba(229, 77, 94, 0.3),
      0 0 10px rgba(229, 77, 94, 0.2);
    border-color: rgba(229, 77, 94, 0.5);
  }
  50% {
    box-shadow:
      0 0 10px rgba(229, 77, 94, 0.5),
      0 0 20px rgba(229, 77, 94, 0.3);
    border-color: rgba(229, 77, 94, 0.8);
  }
}

.animate-border-glow {
  animation: border-glow 2s ease-in-out infinite;
}

/* macOS Vibrancy/Blur Effect */
.bg-vibrancy {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.72);
}

.dark .bg-vibrancy {
  background: rgba(16, 20, 30, 0.72);
}

/* macOS Traffic Lights */
.traffic-lights {
  display: flex;
  gap: 8px;
}

.traffic-light {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.traffic-light.red {
  background: var(--color-traffic-red);
}

.traffic-light.yellow {
  background: var(--color-traffic-yellow);
}

.traffic-light.green {
  background: var(--color-traffic-green);
}

/* ── Mobile Layout Fixes (Issue #659) ── */
@media (max-width: 768px) {
  .ant-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100vw;
  }

  .ant-table {
    min-width: 600px; /* Prevent columns from crushing together */
  }
}

/* Fix for native dropdown options visibility in dark mode */
select option {
  background-color: var(--color-surface);
  color: var(--color-text-main);
}

/* React Flow loads its component stylesheet after this global file in some
   bundles, so direct background/fill declarations can lose to its shorthand
   rules. Override the supported theme variables on our canvas instead. */
.react-flow.omniroute-flow {
  --xy-controls-button-background-color: var(--color-surface);
  --xy-controls-button-background-color-hover: var(--color-bg-subtle);
  --xy-controls-button-color: var(--color-text-main);
  --xy-controls-button-color-hover: var(--color-text-main);
  --xy-controls-button-border-color: var(--color-border);
}

/* Desktop sidebar visibility must not depend on Tailwind's hidden/lg:flex cascade
   (ordering/specificity can collapse it). Explicit class + 1024px media query. */
.dashboard-sidebar-desktop {
  display: none;
  min-height: 0;
}
@media (min-width: 1024px) {
  .dashboard-sidebar-desktop {
    display: flex;
  }
}