/* ============================================================
   NL-API - UI theme
   Clean / minimal / neutral - matches modern SaaS dashboards
   Light default, respects the app's own dark toggle.
   ============================================================ */

:root {
  --ui-bg: #f7f8fa;
  --ui-surface: #ffffff;
  --ui-surface-2: #fafafa;
  --ui-line: #e5e7eb;
  --ui-line-2: #d1d5db;
  --ui-text: #111827;
  --ui-text-2: #374151;
  --ui-muted: #6b7280;
  --ui-brand: #111827;
}

html.dark {
  --ui-bg: #0a0a0b;
  --ui-surface: #131316;
  --ui-surface-2: #17171a;
  --ui-line: #26262b;
  --ui-line-2: #333338;
  --ui-text: #f4f4f5;
  --ui-text-2: #d4d4d8;
  --ui-muted: #a1a1aa;
  --ui-brand: #f4f4f5;
}

/* ---------- base ---------- */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: "Public Sans", Inter, -apple-system, BlinkMacSystemFont,
    "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  background-color: var(--ui-bg) !important;
  color: var(--ui-text) !important;
  letter-spacing: 0 !important;
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.011em !important;
  font-weight: 600 !important;
  color: var(--ui-text) !important;
}

::selection {
  background: rgba(17, 24, 39, 0.12);
}

/* ---------- scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 99px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: #9ca3af; background-clip: content-box; }

/* ---------- header ---------- */
header,
header > div {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-color: var(--ui-line) !important;
  box-shadow: none !important;
}

html.dark header,
html.dark header > div {
  background: rgba(19, 19, 22, 0.85) !important;
}

/* ---------- sidebar ---------- */
aside,
aside nav {
  background: var(--ui-surface) !important;
  border-color: var(--ui-line) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ---------- cards / panels ---------- */
[class*="bg-white/60"],
[class*="bg-white/70"],
[class*="bg-white/80"],
[class*="bg-white/90"] {
  background-color: var(--ui-surface) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--ui-line) !important;
  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.04) !important;
}

[class*="border-gray-100"],
[class*="border-gray-200"],
[class*="border-gray-300"] {
  border-color: var(--ui-line) !important;
}

.group.rounded-2xl {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 12px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.04) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.group.rounded-2xl:hover {
  transform: none !important;
  border-color: var(--ui-line-2) !important;
  box-shadow: 0 4px 12px -4px rgba(16, 24, 40, 0.10) !important;
}

/* ---------- buttons ---------- */
button,
[role="button"],
.btn {
  border-radius: 8px !important;
  font-weight: 500 !important;
  transition: background-color 0.15s ease, color 0.15s ease,
    border-color 0.15s ease, box-shadow 0.15s ease !important;
  box-shadow: none !important;
}

.bg-primary-500,
.bg-primary-600,
.bg-primary-700 {
  background-image: none !important;
  background-color: var(--ui-brand) !important;
  color: #ffffff !important;
  font-weight: 500 !important;
  border-color: transparent !important;
}

html.dark .bg-primary-500,
html.dark .bg-primary-600,
html.dark .bg-primary-700 {
  color: #0a0a0b !important;
}

.bg-primary-500:hover,
.bg-primary-600:hover,
.bg-primary-700:hover {
  filter: none !important;
  opacity: 0.9 !important;
}

[class*="border-primary-"] {
  border-color: var(--ui-line-2) !important;
  color: var(--ui-text-2) !important;
  background: var(--ui-surface) !important;
}

[class*="border-primary-"]:hover {
  background: var(--ui-surface-2) !important;
  border-color: var(--ui-line-2) !important;
  box-shadow: none !important;
}

/* ---------- inputs ---------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea,
select {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 8px !important;
  color: var(--ui-text) !important;
  box-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.04) !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.dark textarea,
html.dark select {
  background: var(--ui-surface-2) !important;
}

input::placeholder,
textarea::placeholder { color: #9ca3af !important; }

input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: #9ca3af !important;
  background: var(--ui-surface) !important;
  box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.06) !important;
}

html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {
  border-color: #52525b !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.07) !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ui-text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--ui-surface) inset !important;
  caret-color: var(--ui-text);
}

select option { background: var(--ui-surface); color: var(--ui-text); }

/* ---------- tables ---------- */
table { border-color: var(--ui-line) !important; }

thead th {
  background: var(--ui-surface-2) !important;
  color: var(--ui-muted) !important;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-bottom: 1px solid var(--ui-line) !important;
}

tbody tr,
tbody tr:hover {
  background: transparent !important;
  border-color: var(--ui-line) !important;
}

tbody tr:hover { background: var(--ui-surface-2) !important; }

/* ---------- dialogs ---------- */
[role="dialog"] {
  background: var(--ui-surface) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px -8px rgba(16, 24, 40, 0.16) !important;
}

/* ---------- accent text ---------- */
.text-primary-500,
.text-primary-600,
.text-primary-700,
.text-cyan-400,
.text-purple-400 {
  color: var(--ui-text) !important;
}

/* ---------- home hero terminal ---------- */
.terminal-window {
  background: #0f172a !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 32px -12px rgba(15, 23, 42, 0.35) !important;
}

.terminal-body { color: #e2e8f0 !important; }

/* ---------- misc ---------- */
hr,
[class*="border-t"],
[class*="border-b"] { border-color: var(--ui-line) !important; }

code,
kbd,
pre {
  background: var(--ui-surface-2) !important;
  border: 1px solid var(--ui-line) !important;
  color: var(--ui-text-2) !important;
  border-radius: 6px;
}

.navigation-progress-bar {
  background: var(--ui-brand) !important;
  height: 2px !important;
}

.toast,
[role="status"],
[role="alert"] {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 10px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 12px 32px -8px rgba(16, 24, 40, 0.16) !important;
}

:focus-visible {
  outline: 2px solid #9ca3af !important;
  outline-offset: 2px !important;
}

/* ---------- responsive ---------- */
@media (max-width: 768px) {
  [class*="backdrop-blur"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ============================================================
   Reference-style finishing overrides
   Remove the original decorative gradients and keep the UI neutral.
   ============================================================ */

/* App shells: solid light gray instead of the original teal gradient/grid. */
#app > div.relative.flex.min-h-screen,
#app > div.relative.flex.min-h-screen.flex-col,
#app > div[class*="min-h-screen"][class*="bg-gradient-to-br"] {
  background: var(--ui-bg) !important;
  background-image: none !important;
}

#app > div.relative.flex.min-h-screen > .pointer-events-none.absolute.inset-0,
#app > div.relative.flex.min-h-screen.flex-col > .pointer-events-none.absolute.inset-0 {
  display: none !important;
}

/* Flat white top bar with a quiet separator. */
#app header {
  background: var(--ui-surface) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--ui-line) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Auth and landing cards. */
#app .card-glass,
#app .group.rounded-2xl,
#app [class*="bg-white/60"],
#app [class*="bg-white/80"] {
  background: var(--ui-surface) !important;
  background-image: none !important;
  border: 1px solid var(--ui-line) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 24px -16px rgba(16, 24, 40, 0.22) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#app .card-glass { padding: 2rem !important; }

/* Neutral dark CTA, matching the reference site's restrained controls. */
#app .btn-primary,
#app a.btn-primary,
#app button.btn-primary {
  background: #111827 !important;
  background-image: none !important;
  border: 1px solid #111827 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

#app .btn-primary:hover,
#app a.btn-primary:hover,
#app button.btn-primary:hover {
  background: #374151 !important;
  border-color: #374151 !important;
  opacity: 1 !important;
}

/* Remove the teal gradient title treatment. */
#app .text-gradient {
  background: none !important;
  background-image: none !important;
  color: var(--ui-text) !important;
  -webkit-text-fill-color: var(--ui-text) !important;
}

/* Auth controls use one consistent border, radius, and focus ring. */
#app .input,
#app input.input,
#app textarea.input,
#app select.input {
  background: var(--ui-surface) !important;
  background-image: none !important;
  border: 1px solid var(--ui-line-2) !important;
  border-radius: 8px !important;
  color: var(--ui-text) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04) !important;
}

#app .input:focus,
#app input.input:focus,
#app textarea.input:focus,
#app select.input:focus {
  border-color: #9ca3af !important;
  box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.06) !important;
}

#app .input-label { color: var(--ui-text-2) !important; font-weight: 500 !important; }
#app a.text-primary-600,
#app a.text-primary-500,
#app .text-primary-600,
#app .text-primary-500 { color: var(--ui-text-2) !important; }
#app a.text-primary-600:hover,
#app a.text-primary-500:hover { color: var(--ui-text) !important; }

/* Feature icons: quiet monochrome tiles instead of rainbow gradients. */
#app .group [class*="bg-gradient-to-br"] {
  background: #f3f4f6 !important;
  background-image: none !important;
  box-shadow: none !important;
}
#app .group [class*="bg-gradient-to-br"] svg,
#app .group [class*="bg-gradient-to-br"] span { color: #374151 !important; }

/* Preserve the terminal demo as a deliberate dark contrast block. */
#app .terminal-window {
  background: #111827 !important;
  border-color: #1f2937 !important;
}

/* Respect the app's dark-mode switch without reintroducing gradients. */
html.dark #app > div.relative.flex.min-h-screen,
html.dark #app > div.relative.flex.min-h-screen.flex-col,
html.dark #app > div[class*="min-h-screen"][class*="bg-gradient-to-br"] {
  background: var(--ui-bg) !important;
  background-image: none !important;
}
html.dark #app header { background: var(--ui-surface) !important; }
html.dark #app .group [class*="bg-gradient-to-br"] { background: #27272a !important; }
html.dark #app .group [class*="bg-gradient-to-br"] svg,
html.dark #app .group [class*="bg-gradient-to-br"] span { color: #e4e4e7 !important; }

/* Auth page has a separate direct gradient layer (without pointer-events-none). */
#app > div.relative.flex.min-h-screen > .absolute.inset-0.bg-gradient-to-br {
  display: none !important;
}