/* FastVibe theme for Sub2API
 * Loaded after Sub2API's bundled CSS through nginx sub_filter.
 * Keep selectors centered on Sub2API's stable component classes so image
 * upgrades do not require rebuilding the frontend.
 */

@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;600;700&display=swap");

:root {
  --tc-page: #f6f8fb;
  --tc-surface: #ffffff;
  --tc-surface-2: #eef2f7;
  --tc-surface-3: #e3e9f2;
  --tc-line: #cbd5e1;
  --tc-line-soft: rgba(15, 23, 42, 0.1);
  --tc-text: #111827;
  --tc-text-soft: #475569;
  --tc-muted: #64748b;
  --tc-accent: #2f6fed;
  --tc-accent-hover: #245bcc;
  --tc-accent-soft: #dfe8ff;
  --tc-accent-wash: rgba(47, 111, 237, 0.09);
  --tc-accent-outline: rgba(47, 111, 237, 0.28);
  --tc-grid: rgba(47, 111, 237, 0.06);
  --tc-topbar: rgba(246, 248, 251, 0.88);
  --tc-shadow: 0 14px 36px rgba(30, 64, 175, 0.08);
  --tc-shadow-accent: 0 10px 28px rgba(47, 111, 237, 0.18);
  --tc-radius: 6px;
  --tc-font-sans: "Noto Sans SC", "PingFang SC", sans-serif;
  --tc-font-mono: "DM Mono", "SFMono-Regular", Consolas, monospace;
}

:root.dark {
  --tc-page: #0c0f14;
  --tc-surface: #11161e;
  --tc-surface-2: #171d27;
  --tc-surface-3: #1e2633;
  --tc-line: #2b3545;
  --tc-line-soft: rgba(226, 232, 240, 0.1);
  --tc-text: #f3f6fb;
  --tc-text-soft: #bac4d2;
  --tc-muted: #98a5b5;
  --tc-accent: #7ea6ff;
  --tc-accent-hover: #9abaff;
  --tc-accent-soft: #17274c;
  --tc-accent-wash: rgba(126, 166, 255, 0.1);
  --tc-accent-outline: rgba(126, 166, 255, 0.24);
  --tc-grid: rgba(126, 166, 255, 0.04);
  --tc-topbar: rgba(12, 15, 20, 0.88);
  --tc-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
  --tc-shadow-accent: 0 10px 28px rgba(126, 166, 255, 0.15);
}

html {
  background: var(--tc-page);
}

body {
  color: var(--tc-text) !important;
  background-color: var(--tc-page) !important;
  background-image:
    linear-gradient(var(--tc-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--tc-grid) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
  font-family: var(--tc-font-sans) !important;
  letter-spacing: 0;
}

::selection {
  color: var(--tc-text) !important;
  background: var(--tc-accent-soft) !important;
}

:focus-visible {
  outline: 2px solid var(--tc-accent) !important;
  outline-offset: 2px !important;
}

/* Remove Sub2API's decorative auth-page orbs and gradients. */
#app > .relative.flex.min-h-screen > .absolute.inset-0:first-child {
  background: transparent !important;
}

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

/* AppLayout adds its own teal radial mesh above the page background. */
#app > .min-h-screen.bg-gray-50 {
  background-color: transparent !important;
}

#app > .min-h-screen > .bg-mesh-gradient,
.bg-mesh-gradient {
  display: none !important;
  background-image: none !important;
}

/* Typography */
.page-title,
.stat-value,
.sidebar-brand-title,
.modal-title,
.section-kicker,
code,
pre,
.code,
.code-block,
.font-mono {
  font-family: var(--tc-font-mono) !important;
  letter-spacing: 0;
}

.page-title,
.modal-title,
.sidebar-brand-title,
.text-gray-900,
.dark .dark\:text-white {
  color: var(--tc-text) !important;
}

.page-description,
.stat-label,
.text-gray-500,
.text-gray-600,
.dark .dark\:text-dark-400,
.dark .dark\:text-dark-300 {
  color: var(--tc-muted) !important;
}

/* Main shell */
.sidebar {
  color: var(--tc-text) !important;
  background: color-mix(in srgb, var(--tc-surface) 94%, transparent) !important;
  border-color: var(--tc-line) !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px);
}

.sidebar-header {
  border-color: var(--tc-line-soft) !important;
}

.sidebar-logo,
.sidebar-logo img {
  border-radius: 4px !important;
  box-shadow: none !important;
}

.sidebar-section-title {
  color: var(--tc-muted) !important;
  font-family: var(--tc-font-mono) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

.sidebar-link {
  position: relative;
  color: var(--tc-text-soft) !important;
  border: 1px solid transparent;
  border-radius: var(--tc-radius) !important;
}

.sidebar-link:hover {
  color: var(--tc-text) !important;
  background: var(--tc-accent-wash) !important;
  border-color: var(--tc-accent-outline) !important;
}

.sidebar-link-active,
.sidebar-link-active:hover {
  color: var(--tc-accent) !important;
  background: var(--tc-accent-soft) !important;
  border-color: var(--tc-accent-outline) !important;
}

.sidebar-link-active::before {
  position: absolute;
  top: 7px;
  bottom: 7px;
  left: 5px;
  width: 2px;
  content: "";
  background: var(--tc-accent);
}

header.glass,
.glass {
  background: var(--tc-topbar) !important;
  border-color: var(--tc-line-soft) !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px) saturate(120%) !important;
}

/* Cards and framed surfaces */
.card,
.glass-card,
.card-glass,
.stat-card,
.modal-content,
.dialog-container,
.dropdown,
.table-container {
  background: color-mix(in srgb, var(--tc-surface) 96%, transparent) !important;
  border-color: var(--tc-line) !important;
  border-radius: var(--tc-radius) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.card-hover:hover {
  transform: translateY(-1px) !important;
  border-color: var(--tc-accent-outline) !important;
  box-shadow: 0 8px 24px rgba(24, 42, 31, 0.07) !important;
}

.card-header,
.card-footer,
.modal-header,
.modal-footer,
.dialog-header,
.dialog-footer {
  border-color: var(--tc-line-soft) !important;
}

.dialog-footer {
  background: var(--tc-surface-2) !important;
}

/* Auth pages: crisp, centered utility panel matching the homepage. */
#app > .relative.flex.min-h-screen .relative.z-10.w-full.max-w-md > div:nth-last-child(3),
#app > .relative.flex.min-h-screen .relative.z-10.w-full.max-w-md > form,
#app > .relative.flex.min-h-screen .relative.z-10.w-full.max-w-md > .bg-white {
  border: 1px solid var(--tc-line) !important;
  border-radius: var(--tc-radius) !important;
  background: color-mix(in srgb, var(--tc-surface) 96%, transparent) !important;
  box-shadow: var(--tc-shadow) !important;
}

#app > .relative.flex.min-h-screen .relative.z-10.w-full.max-w-md img {
  border-radius: 4px !important;
}

#app > .relative.flex.min-h-screen .relative.z-10.w-full.max-w-md h1,
#app > .relative.flex.min-h-screen .relative.z-10.w-full.max-w-md h2 {
  color: var(--tc-text) !important;
  font-family: var(--tc-font-mono) !important;
  letter-spacing: 0 !important;
}

/* Buttons */
.btn,
.btn-sm,
.btn-md,
.btn-lg,
.btn-icon,
button[class*="rounded-xl"],
a[class*="rounded-xl"] {
  border-radius: var(--tc-radius) !important;
}

.btn-primary,
button.bg-primary-500,
button.bg-primary-600,
a.bg-primary-500,
a.bg-primary-600,
.bg-gradient-to-r.from-primary-500,
.bg-gradient-to-r.from-primary-600 {
  color: #ffffff !important;
  background: var(--tc-accent) !important;
  border-color: var(--tc-accent) !important;
  box-shadow: var(--tc-shadow-accent) !important;
}

.btn-primary:hover,
button.bg-primary-500:hover,
button.bg-primary-600:hover,
a.bg-primary-500:hover,
a.bg-primary-600:hover {
  color: #ffffff !important;
  background: var(--tc-accent-hover) !important;
  border-color: var(--tc-accent-hover) !important;
}

.btn-secondary {
  color: var(--tc-text) !important;
  background: color-mix(in srgb, var(--tc-surface) 70%, transparent) !important;
  border-color: var(--tc-line) !important;
  box-shadow: none !important;
}

.btn-secondary:hover,
.btn-ghost:hover {
  color: var(--tc-text) !important;
  background: var(--tc-accent-wash) !important;
}

.btn-danger,
.btn-success,
.btn-warning {
  background-image: none !important;
  border-radius: var(--tc-radius) !important;
  box-shadow: none !important;
}

.btn-danger {
  color: #ffffff !important;
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
}

.btn-danger:hover {
  background-color: #b91c1c !important;
  border-color: #b91c1c !important;
}

.btn-success {
  color: #ffffff !important;
  background-color: #047857 !important;
  border-color: #047857 !important;
}

.btn-success:hover {
  background-color: #065f46 !important;
  border-color: #065f46 !important;
}

.btn-warning {
  color: #ffffff !important;
  background-color: #b45309 !important;
  border-color: #b45309 !important;
}

.btn-warning:hover {
  background-color: #92400e !important;
  border-color: #92400e !important;
}

/* Forms */
.input,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
textarea,
select {
  color: var(--tc-text) !important;
  background: var(--tc-surface) !important;
  border-color: var(--tc-line) !important;
  border-radius: var(--tc-radius) !important;
  box-shadow: none !important;
}

.input:hover,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):hover,
textarea:hover,
select:hover {
  border-color: color-mix(in srgb, var(--tc-line) 55%, var(--tc-text)) !important;
}

.input:focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus,
textarea:focus,
select:focus {
  border-color: var(--tc-accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--tc-accent-outline) !important;
}

input::placeholder,
textarea::placeholder {
  color: color-mix(in srgb, var(--tc-muted) 72%, transparent) !important;
}

.input-label {
  color: var(--tc-text-soft) !important;
}

/* Tables and data-dense panels */
.table-container {
  overflow: hidden;
}

.table th,
table thead th {
  color: var(--tc-muted) !important;
  background: var(--tc-surface-2) !important;
  border-color: var(--tc-line) !important;
  font-family: var(--tc-font-mono) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

.table td,
table tbody td {
  color: var(--tc-text-soft) !important;
  border-color: var(--tc-line-soft) !important;
}

.table tbody tr:hover,
table tbody tr:hover {
  background: color-mix(in srgb, var(--tc-accent-soft) 34%, transparent) !important;
}

#app :is(.table-scroll-container, .table-wrapper, .table-container) {
  border-color: var(--tc-line) !important;
}

#app :is(.table-header, .sticky-header-cell, table thead, .table-scroll-container thead) {
  background-color: var(--tc-surface-2) !important;
  border-color: var(--tc-line) !important;
}

#app :is(.sticky-header-cell, .table-header th, .table-scroll-container th) {
  color: var(--tc-muted) !important;
  border-color: var(--tc-line) !important;
}

#app :is(.sticky-header-cell, .table-header th)[class~="hover:bg-gray-100"]:hover,
#app .table-header th:hover {
  background-color: var(--tc-accent-wash) !important;
}

#app :is(
  [class~="border-gray-100"],
  [class~="border-gray-200"],
  [class~="border-gray-300"]
) {
  border-color: var(--tc-line) !important;
}

#app :is([class~="divide-gray-100"], [class~="divide-gray-200"]) > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--tc-line) !important;
}

:root.dark #app :is(
  [class~="dark:border-dark-600"],
  [class~="dark:border-dark-700"],
  [class~="dark:border-dark-800"]
) {
  border-color: var(--tc-line) !important;
}

:root.dark #app :is([class~="dark:divide-dark-700"], [class~="dark:divide-dark-800"]) > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--tc-line) !important;
}

/* Tabs, badges, code and status elements */
.tabs {
  background: var(--tc-surface-2) !important;
  border: 1px solid var(--tc-line) !important;
  border-radius: var(--tc-radius) !important;
}

.tab,
.tab-active,
.badge,
.code,
.code-block,
.progress,
.switch {
  border-radius: 4px !important;
}

.tab-active {
  color: var(--tc-text) !important;
  background: var(--tc-surface) !important;
  box-shadow: none !important;
}

.badge-primary,
.bg-primary-50,
.dark .dark\:bg-primary-900\/20,
.dark .dark\:bg-primary-900\/30 {
  color: var(--tc-accent) !important;
  background: var(--tc-accent-soft) !important;
}

.text-primary-300,
.text-primary-400,
.text-primary-500,
.text-primary-600,
.text-primary-700,
.dark .dark\:text-primary-300,
.dark .dark\:text-primary-400 {
  color: var(--tc-accent) !important;
}

.border-primary-500,
.focus\:border-primary-500:focus {
  border-color: var(--tc-accent) !important;
}

.progress {
  background: var(--tc-surface-3) !important;
}

.progress-bar,
.switch-active {
  background: var(--tc-accent) !important;
}

.code {
  color: var(--tc-accent) !important;
  background: var(--tc-accent-soft) !important;
}

.code-block {
  color: #dce7df !important;
  background: #0d120f !important;
  border: 1px solid #263229 !important;
}

/* Menus and overlays */
.dropdown {
  box-shadow: var(--tc-shadow) !important;
}

.dropdown-item {
  color: var(--tc-text-soft) !important;
}

.dropdown-item:hover {
  color: var(--tc-text) !important;
  background: var(--tc-accent-wash) !important;
}

/* Complete replacement for Sub2API's teal Tailwind `primary-*` palette. */
:is(
  [class~="text-primary-100"],
  [class~="text-primary-200"],
  [class~="text-primary-300"],
  [class~="text-primary-400"],
  [class~="text-primary-500"],
  [class~="text-primary-600"],
  [class~="text-primary-600/90"],
  [class~="text-primary-700"],
  [class~="text-primary-800"],
  [class~="text-primary-900"]
) {
  color: var(--tc-accent) !important;
}

:is(
  [class~="hover:text-primary-200"],
  [class~="hover:text-primary-300"],
  [class~="hover:text-primary-400"],
  [class~="hover:text-primary-500"],
  [class~="hover:text-primary-600"],
  [class~="hover:text-primary-700"],
  [class~="hover:text-primary-800"]
):hover,
:is([class~="focus:text-primary-400"], [class~="focus:text-primary-600"]):focus {
  color: var(--tc-accent-hover) !important;
}

:root.dark :is(
  [class~="dark:text-primary-100"],
  [class~="dark:text-primary-200"],
  [class~="dark:text-primary-200/80"],
  [class~="dark:text-primary-300"],
  [class~="dark:text-primary-400"],
  [class~="dark:text-primary-400/90"],
  [class~="dark:text-primary-700"],
  [class~="dark:text-primary-800"]
) {
  color: var(--tc-accent) !important;
}

:is(
  [class~="bg-primary-50"],
  [class~="bg-primary-50/40"],
  [class~="bg-primary-50/50"],
  [class~="bg-primary-50/60"],
  [class~="bg-primary-50/70"],
  [class~="bg-primary-50/80"],
  [class~="bg-primary-100"],
  [class~="bg-primary-200/50"],
  [class~="bg-primary-300/10"],
  [class~="bg-primary-400/10"],
  [class~="bg-primary-400/20"],
  [class~="bg-primary-500/10"],
  [class~="bg-primary-500/15"],
  [class~="bg-primary-500/20"]
) {
  background-color: var(--tc-accent-wash) !important;
}

:is(
  [class~="bg-primary-400"],
  [class~="bg-primary-500"],
  [class~="bg-primary-600"]
) {
  background-color: var(--tc-accent) !important;
}

:is(
  [class~="hover:bg-primary-50"],
  [class~="hover:bg-primary-50/50"],
  [class~="hover:bg-primary-100"],
  [class~="hover:bg-primary-200"],
  [class~="hover:bg-primary-500/10"],
  [class~="hover:bg-primary-900/20"],
  [class~="hover:bg-primary-900/30"],
  [class~="hover:bg-primary-900/50"]
):hover {
  background-color: var(--tc-accent-wash) !important;
}

:is(
  [class~="hover:bg-primary-500"],
  [class~="hover:bg-primary-600"],
  [class~="hover:bg-primary-700"],
  [class~="hover:bg-primary-800"]
):hover {
  background-color: var(--tc-accent-hover) !important;
}

:root.dark :is(
  [class~="dark:bg-primary-400/10"],
  [class~="dark:bg-primary-500/10"],
  [class~="dark:bg-primary-500/15"],
  [class~="dark:bg-primary-800/40"],
  [class~="dark:bg-primary-900/10"],
  [class~="dark:bg-primary-900/20"],
  [class~="dark:bg-primary-900/30"],
  [class~="dark:bg-primary-900/40"],
  [class~="dark:bg-primary-950/20"],
  [class~="dark:bg-primary-950/40"]
) {
  background-color: var(--tc-accent-wash) !important;
}

:root.dark :is(
  [class~="dark:bg-primary-300"],
  [class~="dark:bg-primary-600"],
  [class~="dark:bg-primary-950"]
) {
  background-color: var(--tc-accent) !important;
}

:is(
  [class~="border-primary-100"],
  [class~="border-primary-100/80"],
  [class~="border-primary-200"],
  [class~="border-primary-200/80"],
  [class~="border-primary-300"],
  [class~="border-primary-400"],
  [class~="border-primary-500"],
  [class~="border-primary-600"],
  [class~="border-primary-600/25"],
  [class~="border-primary-700"]
) {
  border-color: var(--tc-accent-outline) !important;
}

:is(
  [class~="hover:border-primary-200"],
  [class~="hover:border-primary-300"],
  [class~="hover:border-primary-400"],
  [class~="hover:border-primary-500"],
  [class~="hover:border-primary-500/30"],
  [class~="hover:border-primary-700"],
  [class~="hover:border-primary-800"]
):hover,
:is(
  [class~="focus:border-primary-300"],
  [class~="focus:border-primary-400"],
  [class~="focus:border-primary-500"],
  [class~="focus:border-primary-600"]
):focus {
  border-color: var(--tc-accent) !important;
}

:root.dark :is(
  [class~="dark:border-primary-400"],
  [class~="dark:border-primary-400/25"],
  [class~="dark:border-primary-400/30"],
  [class~="dark:border-primary-500"],
  [class~="dark:border-primary-500/20"],
  [class~="dark:border-primary-600"],
  [class~="dark:border-primary-700"],
  [class~="dark:border-primary-700/50"],
  [class~="dark:border-primary-800"],
  [class~="dark:border-primary-800/50"],
  [class~="dark:border-primary-900/40"],
  [class~="dark:border-primary-900/50"]
) {
  border-color: var(--tc-accent-outline) !important;
}

[class*="ring-primary-"] {
  --tw-ring-color: var(--tc-accent-outline) !important;
}

[class*="shadow-primary-"] {
  --tw-shadow-color: rgba(47, 111, 237, 0.2) !important;
}

:root.dark [class*="shadow-primary-"] {
  --tw-shadow-color: rgba(126, 166, 255, 0.16) !important;
}

:is(
  [class~="from-primary-400"],
  [class~="from-primary-500"],
  [class~="from-primary-600"]
) {
  --tw-gradient-from: var(--tc-accent) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: transparent var(--tw-gradient-to-position) !important;
}

:is(
  [class~="to-primary-400"],
  [class~="to-primary-500"],
  [class~="to-primary-600"]
) {
  --tw-gradient-to: var(--tc-accent) var(--tw-gradient-to-position) !important;
}

:is([class~="hover:from-primary-600"]):hover {
  --tw-gradient-from: var(--tc-accent-hover) var(--tw-gradient-from-position) !important;
}

:is([class~="hover:to-primary-700"]):hover {
  --tw-gradient-to: var(--tc-accent-hover) var(--tw-gradient-to-position) !important;
}

/* Neutral hover utilities used by header/menu controls should also read blue. */
:is(
  header [class~="hover:bg-gray-100"],
  .sidebar [class~="hover:bg-gray-100"],
  .dropdown [class~="hover:bg-gray-100"]
):hover {
  background-color: var(--tc-accent-wash) !important;
}

.modal-overlay,
.dialog-overlay {
  background: rgba(7, 12, 9, 0.48) !important;
  backdrop-filter: blur(4px) !important;
}

/* Keep destructive and semantic states recognizable. */
.text-red-500,
.text-red-600,
.dark .dark\:text-red-400 {
  color: #dc4f45 !important;
}

.text-amber-500,
.text-amber-600,
.dark .dark\:text-amber-400 {
  color: #b87b12 !important;
}

.text-emerald-500,
.text-emerald-600,
.dark .dark\:text-emerald-400 {
  color: #16825d !important;
}

@media (max-width: 640px) {
  body {
    background-size: 32px 32px !important;
  }

  #app > .relative.flex.min-h-screen {
    padding: 20px 16px !important;
  }

  .card-body,
  .card-header,
  .card-footer {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
}