/* Brand tokens + safe cross-theme remaps */
:root {
  --white: #fff;
  --highlight: #3fdec4;
  --highlight-strong: #2fc8b5;
  --highlight-soft: #c6f7ef;
  --highlight-ghost: #e9fcf8;
  --green: #35cab8;
  --light-grey: #f5f5f6;
  --pearl-grey: #ebebee;
  --silver: #d7d8dd;
  --stone: #6c6d75;
  --midnight-blue: #010516;
  --midnight-blue-l: #181a23;
  --midnight-blue-l2: #232633;
  --purple: #5e00fe;
  --light-purple: #e3e7ff;
  --red: #f00;

  --family-regular: manrope-reg, Helvetica, Arial, sans-serif;
  --family-semibold: manrope-semibold, Helvetica, Arial, sans-serif;
  --family-bold: manrope-semibold, Helvetica, Arial, sans-serif;
  --family-light: manrope-light, Helvetica, Arial, sans-serif;

  /* map default orange action palette to conductor highlight */
  --color--orange-50: var(--highlight-ghost);
  --color--orange-100: var(--highlight-soft);
  --color--orange-200: #8ae8d8;
  --color--orange-250: #63dcc9;
  --color--orange-300: var(--highlight);
  --color--orange-400: var(--highlight-strong);
  --color--orange-alpha-100: rgba(63, 222, 196, 0.12);
  --color--orange-alpha-300: rgba(63, 222, 196, 0.35);
  --color--orange-alpha-500: rgba(63, 222, 196, 0.55);
  --color--primary--h: 171;
  --color--primary--s: 70%;
  --color--primary--l: 56%;

  --button--border-color--primary: var(--highlight);
  --button--color--background--primary: var(--highlight);
  --button--color--text--primary: var(--midnight-blue);
  --button--border-color--primary--hover-active: var(--highlight-strong);
  --button--color--background--primary--hover-active-focus: var(--highlight-strong);
  --button--color--text--primary--disabled: var(--color--white-alpha-800);
  --button--outline-color--primary--focus: var(--color--orange-alpha-300);
  --button--border-color--primary--disabled: var(--color--orange-200);
  --button--color--background--primary--disabled: var(--color--orange-200);

  --button--color--text--secondary--hover-active-focus: var(--highlight-strong);
  --button--border-color--secondary--hover-active-focus: var(--highlight);
  --button--color--background--secondary--hover: var(--highlight-ghost);
  --button--color--background--secondary--active-focus: var(--highlight-soft);

  --button--color--text--highlight--hover-active-focus: var(--highlight-strong);
  --button--border-color--highlight--hover-active-focus: var(--highlight-soft);
  --button--color--background--highlight--hover: var(--highlight-ghost);
  --button--color--background--highlight--active-focus: var(--highlight-soft);

  --font-family-base: manrope-reg, Helvetica, Arial, sans-serif;
  --font-family-heading: monument-extended-regular, manrope-semibold, Helvetica, Arial, sans-serif;
  --node--icon--color: var(--highlight) !important;
}

body {
  --font-family: var(--font-family-base);
}

/* Light theme accent palette: replace green accents with purple */
:root:has(body[data-theme=light]),
:root:has(body:not([data-theme])),
body[data-theme=light],
body:not([data-theme]) {
  --highlight: var(--purple);
  --highlight-strong: #4c00d1;
  --highlight-soft: #e3e7ff;
  --highlight-ghost: #f3f5ff;

  --green: var(--purple);
  --color-primary: var(--purple);
  --color-primary-shade-1: #4c00d1;
  --color-primary-tint-1: #c9d2ff;
  --color-primary-tint-2: #e3e7ff;
  --color-primary-tint-3: #f3f5ff;

  --color--orange-50: #f3f5ff;
  --color--orange-100: #e3e7ff;
  --color--orange-200: #c9d2ff;
  --color--orange-250: #9aa9ff;
  --color--orange-300: var(--purple);
  --color--orange-400: #4c00d1;
  --color--orange-alpha-100: rgba(94, 0, 254, 0.12);
  --color--orange-alpha-300: rgba(94, 0, 254, 0.35);
  --color--orange-alpha-500: rgba(94, 0, 254, 0.55);

  --button--border-color--primary: var(--purple);
  --button--color--background--primary: var(--purple);
  --button--color--text--primary: var(--white);
  --button--border-color--primary--hover-active: #4c00d1;
  --button--color--background--primary--hover-active-focus: #4c00d1;
}

/* Dark theme-only surface overrides */
body[data-theme=dark] {
  --color-background-base: var(--midnight-blue);
  --color-background-dark: var(--midnight-blue);
  --color-background-light: var(--midnight-blue-l2);
  --color--background--light-2: var(--midnight-blue);
  --color--background--light-3: transparent;
  --color-background-xlight: var(--midnight-blue-l2);
  --color-background-medium: var(--silver);

  --color-foreground-base: var(--silver);
  --color-foreground-light: var(--pearl-grey);
  --color-foreground-xlight: var(--light-grey);
  --color-foreground-dark: var(--stone);
  --color-foreground-xdark: var(--midnight-blue);

  --color-text-base: var(--white);
  --color-text-dark: var(--white);
  --color-text-light: var(--silver);
  --color-text-lighter: var(--pearl-grey);
  --color-text-xlight: var(--light-grey);

  background-color: var(--midnight-blue) !important;
}

body[data-theme=dark] .card {
  background-color: var(--midnight-blue-l2) !important;
}

body[data-theme=dark] .router-link-active {
  --color-background-xlight: var(--midnight-blue);
}

body[data-theme=dark] div[data-test-id=canvas-default-node],
body[data-theme=dark] div[data-test-id=canvas-configurable-node],
body[data-theme=dark] div[data-test-id=canvas-trigger-node] {
  background-color: var(--midnight-blue);
}

body[data-theme=dark] #header > div > div {
  background-color: var(--midnight-blue);
}

.n8n-tag {
  --tag-background-color: var(--stone);
}

body[data-theme=dark] .n8n-badge {
  --color-foreground-base: var(--green);
  --color-background-xlight: var(--green);
}

body[data-theme=light] .n8n-badge {
  --color-foreground-base: var(--purple);
  --color-background-xlight: var(--purple);
}

.n8n-badge a,
.n8n-badge svg {
  --color-text-base: var(--midnight-blue);
}

.el-notification {
  --color-notification-background: var(--midnight-blue);
}

.el-notification .el-icon.el-notification--error {
  color: var(--red);
}

div[data-test-id=n8n-logo] {
  display: block;
  background: url("/overrides/conductor-logo_white.png") no-repeat left center;
  background-size: contain;
  width: 162px;
  max-width: 100%;
  height: 30px;
}

div[data-test-id=n8n-logo] svg {
  display: none;
}

.el-menu--collapse div[data-test-id=n8n-logo],
[class*="collapsed"] div[data-test-id=n8n-logo] {
  background-image: url("/overrides/logo_white.png") !important;
  background-position: center center;
  width: 30px !important;
}

body[data-theme=light] div[data-test-id=n8n-logo] {
  background-image: url("/overrides/conductor-logo_black.png");
}

body[data-theme=light] .el-menu--collapse div[data-test-id=n8n-logo],
body[data-theme=light] [class*="collapsed"] div[data-test-id=n8n-logo] {
  background-image: url("/overrides/conductor-logo_black.png") !important;
}

/* Safety net in case first-run modal flags are stale in browser cache */
.el-overlay:has([data-test-id="personalization-form"]),
.el-overlay:has(.contact-prompt-modal),
.el-overlay:has(input#email):has(a[href*="docs.n8n.io"]) {
  display: none !important;
}

div[class^="_github-button"] {
  display: none;
}

[data-test-id="inline-edit-preview"] {
  margin-top: -2px;
}

body[data-theme=dark] a:active {
  color: var(--highlight) !important;
}

body[data-theme=light] a:active {
  color: var(--purple) !important;
}

body[data-theme=dark] .n8n-icon {
  color: var(--highlight) !important;
}

body[data-theme=light] .n8n-icon {
  color: var(--purple) !important;
}

body[data-theme=light] .action-toggle .button svg,
body[data-theme=light] .action-toggle .button .n8n-icon,
body[data-theme=light] .action-toggle .button svg * {
  color: var(--white) !important;
  fill: var(--white) !important;
  stroke: var(--white) !important;
}

body[data-theme=dark] .action-toggle .button[aria-haspopup="menu"] svg,
body[data-theme=dark] .action-toggle .button[aria-haspopup="menu"] .n8n-icon,
body[data-theme=dark] .action-toggle .button[aria-haspopup="menu"] svg * {
  color: var(--midnight-blue) !important;
  fill: var(--midnight-blue) !important;
  stroke: var(--midnight-blue) !important;
}


#side-menu {
  background-color: transparent !important;
}

.router-link-active {
  background-color: rgba(255, 255, 255, .07) !important;
}

[role="menuitem"]:hover {
  background-color: rgba(255, 255, 255, .09) !important;
}