/* Vinext dashboard theme. Load after /dashboard.css.
   Base tokens live in @layer base with !important, which beats unlayered
   !important. Sidebar + rounded inset #141216, content well #18161c. */

@layer base {
  html.dark,
  html.dark.dark {
    --sidebar: #141216 !important;
    --background: #18161c !important;
    --bg: #18161c !important;
    --dash-bg: #18161c !important;
    --foreground: #eeeaf2 !important;
    --card: #241e28 !important;
    --popover: #241e28 !important;
    --surface-0: #241e28 !important;
    --surface-1: #18161c !important;
    --primary: #9b71fb !important;
    --ring: #9b71fb !important;
    --muted-foreground: #b7b3c0 !important;
    --color-sidebar: #141216 !important;
    --color-background: #18161c !important;
    --color-foreground: #eeeaf2 !important;
    --color-card: #241e28 !important;
    --color-primary: #9b71fb !important;
    --color-muted-foreground: #b7b3c0 !important;
    --border: #3c3842 !important;
    --color-border: #3c3842 !important;
    --dash-border: #3c3842 !important;
    --sidebar-border: #302c34 !important;
  }

  html.dark,
  html.dark body {
    background-color: #141216 !important;
  }

  html.dark [data-slot="sidebar-inset"] {
    background-color: #141216 !important;
    background-image: none !important;
  }

  html.dark #dashboard-scroll {
    background-color: #18161c !important;
  }

  html.dark [data-slot="sidebar-inset"] > header {
    background-color: #18161c !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

html.light,
html.light.light {
  color-scheme: light;
  --radius: 0.625rem;
  --font-heading: var(--font-plus-jakarta, "Plus Jakarta Sans"), ui-sans-serif, system-ui, sans-serif;
  --surface-0: oklch(100% 0 0);
  --surface-1: oklch(97.5% .006 294);
  --surface-2: oklch(95.5% .01 294);
  --surface-3: oklch(93.2% .014 294);
  --bg: oklch(97.5% .006 294);
  --fg: oklch(14.5% .012 294);
  --background: oklch(97.5% .006 294) !important;
  --foreground: oklch(14.5% .012 294) !important;
  --card: oklch(100% 0 0) !important;
  --card-foreground: oklch(14.5% .012 294) !important;
  --popover: oklch(100% 0 0) !important;
  --popover-foreground: oklch(14.5% .012 294) !important;
  --overlay-accent: oklch(95.5% .01 294) !important;
  --primary: oklch(48% .22 290) !important;
  --primary-foreground: oklch(99% .006 318) !important;
  --secondary: oklch(95.5% .01 294) !important;
  --secondary-foreground: oklch(21% .02 294) !important;
  --muted: oklch(95.5% .01 294) !important;
  --muted-foreground: oklch(47% .03 294) !important;
  --accent: oklch(95.5% .01 294) !important;
  --accent-foreground: oklch(21% .02 294) !important;
  --border: oklch(90% .012 294) !important;
  --input: oklch(96.5% .008 294) !important;
  --ring: oklch(48% .22 290) !important;
  --sidebar: oklch(96% .01 294) !important;
  --sidebar-foreground: oklch(14.5% .012 294) !important;
  --sidebar-primary: oklch(48% .22 290) !important;
  --sidebar-primary-foreground: oklch(99% .006 318) !important;
  --sidebar-accent: oklch(93% .025 294) !important;
  --sidebar-accent-foreground: oklch(21% .02 294) !important;
  --sidebar-border: oklch(90% .012 294) !important;
  --sidebar-ring: oklch(48% .22 290) !important;
  --chart-1: oklch(48% .22 290) !important;
  --chart-2: oklch(69.6% .17 162.48) !important;
  --chart-3: oklch(76.9% .188 70.08) !important;
  --chart-4: oklch(62.7% .18 294) !important;
  --chart-5: oklch(64.5% .246 16.439) !important;
  --dash-bg: oklch(97.5% .006 294);
  --dash-card: oklch(100% 0 0);
  --dash-border: oklch(90% .012 294);
  --accent-violet: oklch(48% .22 290);
  --shadow-glow: 0 0 25px oklch(0.48 0.22 290 / 0.18);
  --shadow-card: inset 0 1px 0 0 rgb(255 255 255 / 0.45);
  --vinext-sheen: inset 0 1px 0 0 rgb(255 255 255 / 0.3);
  --vinext-sheen-soft: inset 0 1px 0 0 rgb(255 255 255 / 0.45);
  --vinext-hairline: rgb(15 15 20 / 0.08);
  --border-subtle: oklch(92% .01 294);
  --border-default: oklch(90% .012 294);
  --border-strong: oklch(82% .02 294);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-border: var(--border);
  --color-sidebar: var(--sidebar);
  --color-ring: var(--ring);
}

html.dark,
html.dark.dark {
  color-scheme: dark;
  --font-heading: var(--font-plus-jakarta, "Plus Jakarta Sans"), ui-sans-serif, system-ui, sans-serif;
  --radius: 0.625rem;
  --surface-0: #241e28;
  --surface-1: #18161c;
  --surface-2: #2a262e;
  --surface-3: #26222a;
  --bg: #18161c;
  --fg: #eeeaf2;
  --background: #18161c !important;
  --foreground: #eeeaf2 !important;
  --card: #241e28 !important;
  --card-foreground: #eeeaf2 !important;
  --popover: #241e28 !important;
  --popover-foreground: #eeeaf2 !important;
  --overlay-accent: #26222a !important;
  --primary: #9b71fb !important;
  --primary-foreground: #fefbff !important;
  --secondary: #2a262e !important;
  --secondary-foreground: #eeeaf2 !important;
  --muted: #2a262e !important;
  --muted-foreground: #b7b3c0 !important;
  --accent: #26222a !important;
  --accent-foreground: #eeeaf2 !important;
  --border: #3c3842 !important;
  --input: #2a262e !important;
  --ring: #9b71fb !important;
  --sidebar: #141216 !important;
  --sidebar-foreground: #eeeaf2 !important;
  --sidebar-primary: #9b71fb !important;
  --sidebar-primary-foreground: #fefbff !important;
  --sidebar-accent: #26222a !important;
  --sidebar-accent-foreground: #eeeaf2 !important;
  --sidebar-border: #302c34 !important;
  --sidebar-ring: #9b71fb !important;
  --chart-1: #9b71fb !important;
  --chart-2: oklch(74.5% .16 162.48) !important;
  --chart-3: oklch(81% .175 70.08) !important;
  --chart-4: oklch(68% .18 294) !important;
  --chart-5: oklch(70% .22 16.439) !important;
  --dash-bg: #18161c;
  --dash-card: #241e28;
  --dash-border: #3c3842;
  --accent-violet: #9b71fb;
  --shadow-glow: 0 0 28px oklch(0.68 0.22 290 / 0.22);
  --shadow-card: inset 0 1px 0 0 rgb(255 255 255 / 0.08);
  --vinext-sheen: inset 0 1px 0 0 rgb(255 255 255 / 0.3);
  --vinext-sheen-soft: inset 0 1px 0 0 rgb(255 255 255 / 0.08);
  --vinext-hairline: #3c3842;
  --border-subtle: #3c3842;
  --border-default: #3c3842;
  --border-strong: #4a4652;
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-border: var(--border);
  --color-sidebar: var(--sidebar);
  --color-ring: var(--ring);
}

html.light,
html.light body,
html.dark,
html.dark body {
  background: var(--sidebar);
  color: var(--foreground);
}

html.light [data-slot="sidebar-inset"] {
  background-color: var(--background);
  background-image: radial-gradient(980px 520px at 100% 0%, oklch(52% 0.21 294 / 0.09), transparent 62%);
}

html.dark [data-slot="sidebar-inset"] {
  background-color: #141216;
  background-image: none;
}

[data-slot="sidebar-inset"] {
  box-shadow: 0 0 0 1px var(--vinext-hairline), var(--vinext-sheen-soft);
}

html.dark [data-slot="sidebar-inner"] {
  background: transparent;
}

[data-dashboard-page] h1,
[data-vinext-auth] h1,
[data-vinext-auth] h2 {
  font-family: var(--font-heading, "Plus Jakarta Sans"), ui-sans-serif, system-ui, sans-serif;
}

/* Filled actions: no stroke, 1px inner top sheen. */
:is(
  [data-slot="sidebar-wrapper"],
  [data-vinext-auth],
  [data-slot="dialog-content"],
  [data-slot="alert-dialog-content"],
  [data-slot="sheet-content"]
)
  :is(button, a, [data-slot="button"], [data-slot="dropdown-menu-trigger"]).bg-primary,
:is(
  [data-slot="sidebar-wrapper"],
  [data-vinext-auth],
  [data-slot="dialog-content"],
  [data-slot="alert-dialog-content"],
  [data-slot="sheet-content"]
)
  [data-slot="button"][data-variant="default"] {
  border: 0 !important;
  color: var(--landing-primary-fg, #fefbff) !important;
  background-color: var(--landing-magenta-to) !important;
  background-image: linear-gradient(to bottom, var(--landing-magenta-from), var(--landing-magenta-to)) !important;
  box-shadow: var(--vinext-sheen), 0 0 0 3px rgb(255 255 255 / 0.07);
}

:is(
  [data-slot="sidebar-wrapper"],
  [data-vinext-auth],
  [data-slot="dialog-content"],
  [data-slot="alert-dialog-content"],
  [data-slot="sheet-content"]
)
  :is(button, a, [data-slot="button"], [data-slot="dropdown-menu-trigger"]).bg-primary:hover,
:is(
  [data-slot="sidebar-wrapper"],
  [data-vinext-auth],
  [data-slot="dialog-content"],
  [data-slot="alert-dialog-content"],
  [data-slot="sheet-content"]
)
  [data-slot="button"][data-variant="default"]:hover {
  background-image: linear-gradient(
    to bottom,
    color-mix(in oklab, var(--landing-magenta-from) 88%, white),
    color-mix(in oklab, var(--landing-magenta-to) 88%, black)
  ) !important;
}

/* Surface actions (outline / secondary): fill + same sheen, no stroke. */
:is(
  [data-slot="sidebar-wrapper"],
  [data-vinext-auth],
  [data-slot="dialog-content"],
  [data-slot="alert-dialog-content"],
  [data-slot="sheet-content"]
)
  :is(button, a, [data-slot="button"], [data-slot="dropdown-menu-trigger"], [data-slot="select-trigger"]):is(
    .bg-secondary,
    .bg-card,
    [data-variant="outline"],
    [data-variant="secondary"]
  ) {
  border: 0 !important;
  box-shadow: var(--vinext-sheen);
}

html.dark
  :is(
    [data-slot="sidebar-wrapper"],
    [data-vinext-auth],
    [data-slot="dialog-content"],
    [data-slot="alert-dialog-content"],
    [data-slot="sheet-content"]
  )
  :is(button, a, [data-slot="button"])[data-variant="outline"] {
  background-color: var(--surface-2);
}

/* Cards, panels: hairline + soft inner highlight instead of a painted top border. */
html.dark :is([data-slot="card"], [data-slot="table-container"], .bg-card) {
  border-color: var(--vinext-hairline) !important;
  box-shadow: var(--vinext-sheen-soft);
}

html.light :is([data-slot="card"], [data-slot="table-container"], .bg-card) {
  box-shadow: var(--vinext-sheen-soft);
}

/* Fields: same language as surface buttons. */
:is(
  [data-dashboard-page],
  [data-vinext-auth],
  [data-slot="dialog-content"]
)
  :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]),
    textarea,
    [data-slot="select-trigger"]
  ) {
  border: 0 !important;
  box-shadow: var(--vinext-sheen-soft), 0 0 0 1px var(--vinext-hairline);
}

:is(
  [data-dashboard-page],
  [data-vinext-auth],
  [data-slot="dialog-content"]
)
  :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]),
    textarea,
    [data-slot="select-trigger"]
  ):focus,
:is(
  [data-dashboard-page],
  [data-vinext-auth],
  [data-slot="dialog-content"]
)
  :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="range"]),
    textarea,
    [data-slot="select-trigger"]
  ):focus-visible {
  box-shadow:
    var(--vinext-sheen-soft),
    0 0 0 1px color-mix(in oklab, var(--primary) 55%, transparent),
    0 0 0 4px color-mix(in oklab, var(--primary) 16%, transparent);
}

/* Native control inside .ds-field is chrome-less; the wrapper owns the Figma shadow. */
.ds-field input,
.ds-field input:focus,
.ds-field input:focus-visible {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Header search and chrome. */
[data-slot="sidebar-inset"] > header {
  border: 0 !important;
  background: #18161c !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

[data-slot="sidebar-inset"] > header kbd,
[data-slot="sidebar-inset"] > header .ds-field-shortcut {
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* Sidebar: hairline + sheen on the active item. */
[data-slot="sidebar"] {
  border-color: var(--vinext-hairline) !important;
}

[data-slot="sidebar-footer"] {
  border-color: var(--vinext-hairline) !important;
}

[data-slot="sidebar-menu-button"][data-active="true"],
[data-slot="sidebar-menu-button"].active,
[data-slot="sidebar-menu-sub-button"][data-active="true"] {
  background: rgb(255 255 255 / 0.08);
  box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.1);
  color: var(--foreground);
}

[data-slot="sidebar-menu-button"][data-active="true"]::before,
[data-slot="sidebar-menu-button"].active::before,
[data-slot="sidebar-menu-sub-button"][data-active="true"]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: url("/vinext/noise-sidebar-active.png") center / cover;
}

[data-slot="sidebar-menu-button"] > *,
[data-slot="sidebar-menu-sub-button"] > * {
  position: relative;
  z-index: 1;
}

html.light [data-slot="sidebar-menu-button"][data-active="true"],
html.light [data-slot="sidebar-menu-button"].active,
html.light [data-slot="sidebar-menu-sub-button"][data-active="true"] {
  background: rgb(15 15 20 / 0.06);
  box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.55);
}

[data-slot="sidebar"],
[data-slot="sidebar"] [data-slot="sidebar-menu-button"],
[data-slot="sidebar"] [data-slot="sidebar-menu-sub-button"],
[data-slot="sidebar"] [data-slot="sidebar-group-label"] {
  font-family: var(--font-instrument-sans, "Instrument Sans"), ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
}

/* Shop mark on the switcher. */
[data-slot="sidebar-wrapper"] .bg-primary.text-primary-foreground {
  background-image: linear-gradient(to bottom, var(--landing-magenta-from), var(--landing-magenta-to));
  box-shadow: var(--vinext-sheen);
}

/* Empty-state / icon discs. */
[data-empty-state-variant="firstRun"] .rounded-full {
  background-image: linear-gradient(to bottom, var(--landing-magenta-from), var(--landing-magenta-to));
  background-color: var(--landing-magenta-to);
  color: var(--landing-primary-fg, #fefbff);
  box-shadow: var(--vinext-sheen);
}

[data-empty-state-variant="firstRun"] .rounded-full svg {
  color: var(--landing-primary-fg, #fefbff);
}

[role="group"][aria-label="View mode"] {
  border: 0 !important;
  box-shadow: var(--vinext-sheen-soft);
}

:is(
  [data-slot="sidebar-wrapper"],
  [data-vinext-auth],
  [data-slot="dialog-content"]
)
  :is(button, a, [data-slot="button"], [data-slot="select-trigger"]):not(.rounded-full):not([class*="rounded-full"]):not([data-slot="sidebar-menu-button"]):not([data-slot="sidebar-menu-sub-button"]):not(.control-surface):not(.ds-select-trigger):not(.btn-primary):not([data-variant="default"]):not([data-variant="primary"]) {
  border-radius: 6px;
}

[data-slot="sidebar-menu-button"],
[data-slot="sidebar-menu-sub-button"] {
  border-radius: 6px;
  height: 30px;
}

:is([data-slot="card"], .bg-card) {
  border-radius: 12px;
}

/* Popup scrim covers the viewport and blurs it. Do not replace this with a flat black overlay. */
[data-slot="dialog-overlay"],
[data-slot="sheet-overlay"],
.ds-popup-overlay {
  background-color: rgb(8 8 22 / 0.45) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

[data-slot="dialog-overlay"],
[data-slot="sheet-overlay"] {
  position: fixed !important;
  inset: 0 !important;
  z-index: 79;
  width: 100%;
  height: 100%;
}

[data-slot="dialog-content"],
[data-slot="alert-dialog-content"],
[data-slot="sheet-content"] {
  z-index: 80;
}