/*
 * Vendavo Knowledgebase companion theme for Docmost 0.95.0.
 *
 * Docmost still owns its layout, authoring behavior, accessibility semantics,
 * and native Light, Dark, and System selection. These rules bind its stable
 * Mantine and editor surfaces to the BTP visual contract. Dark colors are
 * applied only while Mantine reports the real dark scheme, so a later user
 * choice of Light or System remains truthful.
 */

@font-face {
  font-family: "Funnel Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/bundle-funnel-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Funnel Display";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/bundle-funnel-semibold.woff2") format("woff2");
}

@font-face {
  font-family: "Funnel Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/bundle-funnel-bold.woff2") format("woff2");
}

@font-face {
  font-family: "Arvo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/bundle-arvo-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Arvo";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/bundle-arvo-bold.woff2") format("woff2");
}

html[data-vgso-theme="btp-dark-v1"] {
  --btp-space-1: 4px;
  --btp-space-2: 8px;
  --btp-space-3: 12px;
  --btp-space-4: 16px;
  --btp-space-5: 20px;
  --btp-space-6: 24px;
  --btp-space-8: 32px;
  --btp-control-height: 28px;

  --btp-font-interface: "Funnel Display", Arial, sans-serif;
  --btp-font-content: Arial, Helvetica, sans-serif;
  --btp-font-numeral: "Arvo", Georgia, serif;
  --btp-font-identifier: "Cascadia Mono", Consolas, monospace;
  --btp-font-size-1: 0.6875rem;
  --btp-font-size-2: 0.75rem;
  --btp-font-size-3: 0.8125rem;
  --btp-font-size-4: 0.875rem;
  --btp-font-size-5: 1rem;
  --btp-font-size-6: 1.25rem;
  --btp-font-size-8: 2rem;
  --btp-line-compact: 1.25;
  --btp-line-content: 1.55;

  --btp-color-shell: #0d0f14;
  --btp-color-top-bar: #11141b;
  --btp-color-explorer: #151820;
  --btp-color-canvas: #181b23;
  --btp-color-surface-1: #1d212b;
  --btp-color-surface-2: #242936;
  --btp-color-surface-3: #2b3140;
  --btp-color-border: #353c4d;
  --btp-color-border-strong: #4a5368;
  --btp-color-control-border: #64708a;
  --btp-color-control-border-hover: #7a86a0;
  --btp-color-text: #e8ebf2;
  --btp-color-text-muted: #aab1c0;
  --btp-color-text-faint: #929bac;
  --btp-color-brand: #c9ff88;
  --btp-color-brand-strong: #b2f266;
  --btp-color-accent: #c9ff88;
  --btp-color-accent-hover: #d8ffa8;
  --btp-color-on-accent: #2d234b;
  --btp-color-aqua: #4ac4b0;
  --btp-color-warning: #ffc05c;
  --btp-color-danger: #f97676;
  --btp-color-focus: #c9ff88;
  --btp-shadow-flyout: 0 12px 28px rgba(0, 0, 0, 0.45);

  --mantine-font-family: var(--btp-font-content);
  --mantine-font-family-headings: var(--btp-font-interface);
  --mantine-font-family-monospace: var(--btp-font-identifier);
  --mantine-radius-default: 0;
  --mantine-radius-xs: 0;
  --mantine-radius-sm: 0;
  --mantine-radius-md: 0;
  --mantine-radius-lg: 0;
  --mantine-radius-xl: 0;
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"] {
  color-scheme: dark;

  --mantine-color-body: var(--btp-color-canvas);
  --mantine-color-text: var(--btp-color-text);
  --mantine-color-dimmed: var(--btp-color-text-muted);
  --mantine-color-placeholder: var(--btp-color-text-faint);
  --mantine-color-anchor: var(--btp-color-brand);
  --mantine-color-default: var(--btp-color-surface-1);
  --mantine-color-default-hover: var(--btp-color-surface-2);
  --mantine-color-default-color: var(--btp-color-text);
  --mantine-color-default-border: var(--btp-color-control-border);
  --mantine-primary-color-filled: var(--btp-color-brand);
  --mantine-primary-color-filled-hover: var(--btp-color-accent-hover);
  --mantine-primary-color-light: rgba(201, 255, 136, 0.12);
  --mantine-primary-color-light-hover: rgba(201, 255, 136, 0.18);
  --mantine-primary-color-light-color: var(--btp-color-brand);
  --mantine-primary-color-contrast: var(--btp-color-on-accent);
  --mantine-primary-color-filled-color: var(--btp-color-on-accent);

  --mantine-color-dark-0: #e8ebf2;
  --mantine-color-dark-1: #cfd4df;
  --mantine-color-dark-2: #aab1c0;
  --mantine-color-dark-3: #929bac;
  --mantine-color-dark-4: #4a5368;
  --mantine-color-dark-5: #353c4d;
  --mantine-color-dark-6: #2b3140;
  --mantine-color-dark-7: #242936;
  --mantine-color-dark-8: #1d212b;
  --mantine-color-dark-9: #0d0f14;

  /* Docmost uses named Mantine colors for status as well as the primary
     interaction color. Keep those concepts distinct: primary remains Vendavo
     green, while informational blue and teal resolve to the BTP aqua tone. */
  --mantine-color-blue-0: #e1f8f4;
  --mantine-color-blue-1: #c3eee7;
  --mantine-color-blue-2: #9de1d6;
  --mantine-color-blue-3: #72d3c5;
  --mantine-color-blue-4: #5acabb;
  --mantine-color-blue-5: #5acabb;
  --mantine-color-blue-6: var(--btp-color-aqua);
  --mantine-color-blue-7: #319283;
  --mantine-color-blue-8: #287469;
  --mantine-color-blue-9: #205d54;
  --mantine-color-blue-filled: var(--btp-color-aqua);
  --mantine-color-blue-filled-hover: #5acabb;
  --mantine-color-blue-light: rgba(74, 196, 176, 0.12);
  --mantine-color-blue-light-hover: rgba(74, 196, 176, 0.18);
  --mantine-color-blue-light-color: var(--btp-color-aqua);
  --mantine-color-blue-text: var(--btp-color-aqua);
  --mantine-color-blue-filled-color: var(--btp-color-on-accent);

  --mantine-color-teal-6: var(--btp-color-aqua);
  --mantine-color-teal-filled: var(--btp-color-aqua);
  --mantine-color-teal-filled-hover: #5acabb;
  --mantine-color-teal-light: rgba(74, 196, 176, 0.12);
  --mantine-color-teal-light-hover: rgba(74, 196, 176, 0.18);
  --mantine-color-teal-light-color: var(--btp-color-aqua);
  --mantine-color-teal-text: var(--btp-color-aqua);
  --mantine-color-teal-filled-color: var(--btp-color-on-accent);
  --mantine-color-cyan-6: var(--btp-color-aqua);
  --mantine-color-cyan-filled: var(--btp-color-aqua);
  --mantine-color-cyan-filled-hover: #5acabb;
  --mantine-color-cyan-light: rgba(74, 196, 176, 0.12);
  --mantine-color-cyan-light-hover: rgba(74, 196, 176, 0.18);
  --mantine-color-cyan-light-color: var(--btp-color-aqua);
  --mantine-color-cyan-text: var(--btp-color-aqua);
  --mantine-color-cyan-filled-color: var(--btp-color-on-accent);

  --mantine-color-yellow-6: var(--btp-color-warning);
  --mantine-color-yellow-filled: var(--btp-color-warning);
  --mantine-color-yellow-filled-hover: #ffca73;
  --mantine-color-yellow-light: rgba(255, 192, 92, 0.12);
  --mantine-color-yellow-light-hover: rgba(255, 192, 92, 0.18);
  --mantine-color-yellow-light-color: var(--btp-color-warning);
  --mantine-color-yellow-text: var(--btp-color-warning);
  --mantine-color-yellow-filled-color: var(--btp-color-on-accent);

  --mantine-color-red-6: var(--btp-color-danger);
  --mantine-color-red-filled: var(--btp-color-danger);
  --mantine-color-red-filled-hover: #ff8e8e;
  --mantine-color-red-light: rgba(249, 118, 118, 0.12);
  --mantine-color-red-light-hover: rgba(249, 118, 118, 0.18);
  --mantine-color-red-light-color: var(--btp-color-danger);
  --mantine-color-red-text: var(--btp-color-danger);
  --mantine-color-red-filled-color: var(--btp-color-on-accent);
}

html[data-vgso-theme="btp-dark-v1"] *,
html[data-vgso-theme="btp-dark-v1"] *::before,
html[data-vgso-theme="btp-dark-v1"] *::after {
  box-sizing: border-box;
}

html[data-vgso-theme="btp-dark-v1"] body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  font-family: var(--btp-font-content);
  text-rendering: optimizeLegibility;
}

html[data-vgso-theme="btp-dark-v1"]
  :where(button, input, select, textarea, [role="button"], [role="menuitem"], [role="tab"]) {
  font-family: var(--btp-font-interface);
}

html[data-vgso-theme="btp-dark-v1"]
  :where(h1, h2, h3, h4, h5, h6, .mantine-Title-root) {
  font-family: var(--btp-font-interface);
  letter-spacing: -0.015em;
}

html[data-vgso-theme="btp-dark-v1"]
  :where(code, kbd, samp, pre, .mantine-Code-root) {
  font-family: var(--btp-font-identifier);
}

html[data-vgso-theme="btp-dark-v1"]
  .mantine-NumberFormatter-root {
  font-family: var(--btp-font-numeral);
  font-variant-numeric: tabular-nums;
}

html[data-vgso-theme="btp-dark-v1"]
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--btp-color-on-accent);
  outline-offset: 2px;
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: var(--btp-color-focus);
}

html[data-vgso-theme="btp-dark-v1"]
  :where(button, input, select, textarea, .mantine-Button-root, .mantine-ActionIcon-root) {
  border-radius: 0;
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"] body,
html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"] #root {
  background: var(--btp-color-canvas);
  color: var(--btp-color-text);
}

/* Application chrome */

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  .mantine-AppShell-header {
  border-color: var(--btp-color-border);
  background: var(--btp-color-top-bar);
  color: var(--btp-color-text);
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  :where(.mantine-AppShell-navbar, .mantine-AppShell-aside) {
  border-color: var(--btp-color-border);
  background: var(--btp-color-explorer);
  color: var(--btp-color-text);
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  .mantine-AppShell-main {
  background: var(--btp-color-canvas);
  color: var(--btp-color-text);
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  :where(.mantine-Paper-root, .mantine-Card-root) {
  border-color: var(--btp-color-border);
  background: var(--btp-color-surface-1);
  color: var(--btp-color-text);
  box-shadow: none;
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  :where(
    .mantine-Modal-content,
    .mantine-Drawer-content,
    .mantine-Popover-dropdown,
    .mantine-Menu-dropdown,
    .mantine-Combobox-dropdown,
    [role="dialog"],
    [role="menu"],
    [role="listbox"]
  ) {
  border: 1px solid var(--btp-color-border-strong);
  border-radius: 0;
  background: var(--btp-color-surface-1);
  box-shadow: var(--btp-shadow-flyout);
  color: var(--btp-color-text);
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  :where(.mantine-Modal-header, .mantine-Drawer-header) {
  border-bottom: 1px solid var(--btp-color-border);
  background: var(--btp-color-surface-1);
  color: var(--btp-color-text);
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  :where(.mantine-Menu-item, .mantine-Combobox-option, [role="option"]) {
  border-radius: 0;
  color: var(--btp-color-text-muted);
  font-family: var(--btp-font-interface);
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  :where(.mantine-Menu-item, .mantine-Combobox-option, [role="option"]):where(
    :hover,
    [data-hovered],
    [data-combobox-active]
  ) {
  background: var(--btp-color-surface-2);
  color: var(--btp-color-text);
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  :where(.mantine-Tooltip-tooltip, [role="tooltip"]) {
  border: 1px solid var(--btp-color-border-strong);
  border-radius: 0;
  background: var(--btp-color-surface-3);
  box-shadow: var(--btp-shadow-flyout);
  color: var(--btp-color-text);
  font-family: var(--btp-font-interface);
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  :where(.mantine-Divider-root, hr) {
  border-color: var(--btp-color-border);
}

/* Docmost 0.95.0 gives its header home link both a stable address and the
   accessible Knowledgebase name. Keep that native link while presenting the
   BTP lockup as the Vendavo wordmark followed by the application name. */
html[data-vgso-theme="btp-dark-v1"]
  .mantine-AppShell-header
  a[href="/home"][aria-label="Knowledgebase"] {
  display: inline-flex;
  width: auto;
  height: 28px;
  align-items: center;
  gap: var(--btp-space-3);
  background: transparent;
  color: var(--btp-color-on-accent);
  text-decoration: none;
}

html[data-vgso-theme="btp-dark-v1"]
  .mantine-AppShell-header
  a[href="/home"][aria-label="Knowledgebase"]
  > * {
  display: none !important;
}

html[data-vgso-theme="btp-dark-v1"]
  .mantine-AppShell-header
  a[href="/home"][aria-label="Knowledgebase"]::before {
  width: 112px;
  height: 20px;
  flex: 0 0 auto;
  background: var(--btp-color-on-accent);
  content: "";
  -webkit-mask: url("/assets/brand-vendavo-wordmark.svg") center / contain no-repeat;
  mask: url("/assets/brand-vendavo-wordmark.svg") center / contain no-repeat;
}

html[data-vgso-theme="btp-dark-v1"]
  .mantine-AppShell-header
  a[href="/home"][aria-label="Knowledgebase"]::after {
  padding-left: var(--btp-space-3);
  border-left: 1px solid color-mix(in srgb, var(--btp-color-on-accent) 24%, transparent);
  color: var(--btp-color-on-accent);
  content: "Knowledgebase";
  font: 600 var(--btp-font-size-3) var(--btp-font-interface);
  white-space: nowrap;
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  .mantine-AppShell-header
  a[href="/home"][aria-label="Knowledgebase"]::before {
  background: var(--btp-color-text);
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  .mantine-AppShell-header
  a[href="/home"][aria-label="Knowledgebase"]::after {
  border-left-color: var(--btp-color-border-strong);
  color: var(--btp-color-text-muted);
}

/* AuthLayout keeps a stable icon alternative after the separate reader-brand
   rewrite. Replace its decorative icon with the owned wordmark and retain the
   adjacent visible Knowledgebase text as the application name. */
html[data-vgso-theme="btp-dark-v1"]
  .mantine-Group-root:has(> img[alt="Knowledgebase"]) {
  gap: var(--btp-space-3);
}

html[data-vgso-theme="btp-dark-v1"]
  .mantine-Group-root:has(> img[alt="Knowledgebase"])
  > img {
  display: none;
}

html[data-vgso-theme="btp-dark-v1"]
  .mantine-Group-root:has(> img[alt="Knowledgebase"])::before {
  width: 112px;
  height: 20px;
  flex: 0 0 auto;
  background: var(--btp-color-on-accent);
  content: "";
  -webkit-mask: url("/assets/brand-vendavo-wordmark.svg") center / contain no-repeat;
  mask: url("/assets/brand-vendavo-wordmark.svg") center / contain no-repeat;
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  .mantine-Group-root:has(> img[alt="Knowledgebase"])::before {
  background: var(--btp-color-text);
}

html[data-vgso-theme="btp-dark-v1"]
  .mantine-Group-root:has(> img[alt="Knowledgebase"])
  > :not(img) {
  color: var(--btp-color-on-accent);
  font-family: var(--btp-font-interface);
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  .mantine-Group-root:has(> img[alt="Knowledgebase"])
  > :not(img) {
  color: var(--btp-color-text);
}

html[data-vgso-theme="btp-dark-v1"]
  :where(.mantine-AppShell-header, .mantine-AppShell-navbar, .mantine-AppShell-aside) {
  font-family: var(--btp-font-interface);
}

/* Tree and navigation states retain Docmost's structure and behavior. */
html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  :where([role="treeitem"], nav a, nav button) {
  border-radius: 0;
  color: var(--btp-color-text-muted);
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  :where([role="treeitem"], nav a, nav button):hover {
  background: var(--btp-color-surface-1);
  color: var(--btp-color-text);
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  :where(
    [role="treeitem"][aria-selected="true"],
    [role="treeitem"][data-selected],
    nav a[aria-current="page"],
    nav [data-active="true"]
  ) {
  background: var(--btp-color-surface-2);
  color: var(--btp-color-brand);
  box-shadow: inset 2px 0 0 var(--btp-color-brand);
}

/* Controls */

html[data-vgso-theme="btp-dark-v1"]
  :where(.mantine-Button-root, .mantine-ActionIcon-root) {
  min-height: var(--btp-control-height);
  font-weight: 700;
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  :where(
    .mantine-Button-root:not([data-variant]),
    .mantine-Button-root[data-variant="filled"],
    .mantine-ActionIcon-root:not([data-variant]),
    .mantine-ActionIcon-root[data-variant="filled"],
    .mantine-Badge-root:not([data-variant]),
    .mantine-Badge-root[data-variant="filled"],
    .mantine-Chip-root[data-variant="filled"],
    .mantine-Chip-label[data-variant="filled"][data-checked],
    .mantine-ThemeIcon-root[data-variant="filled"],
    .mantine-Avatar-root[data-variant="filled"],
    .mantine-Indicator-indicator[data-variant="filled"]
  ) {
  --button-color: var(--btp-color-on-accent) !important;
  --ai-color: var(--btp-color-on-accent) !important;
  --badge-color: var(--btp-color-on-accent) !important;
  --chip-color: var(--btp-color-on-accent);
  --ti-color: var(--btp-color-on-accent);
  --avatar-color: var(--btp-color-on-accent);
  --indicator-text-color: var(--btp-color-on-accent);
  color: var(--btp-color-on-accent) !important;
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  :where(
    .mantine-Input-input,
    .mantine-Textarea-input,
    .mantine-Select-input,
    .mantine-MultiSelect-input,
    .mantine-PillsInput-input,
    input,
    select,
    textarea
  ) {
  border-color: var(--btp-color-control-border);
  border-radius: 0;
  background: var(--btp-color-canvas);
  color: var(--btp-color-text);
  caret-color: var(--btp-color-brand);
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  :where(
    .mantine-Input-input,
    .mantine-Textarea-input,
    .mantine-Select-input,
    .mantine-MultiSelect-input,
    .mantine-PillsInput-input,
    input,
    select,
    textarea
  ):where(:hover, [data-hovered]):not(:disabled, [data-disabled]) {
  border-color: var(--btp-color-control-border-hover);
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  :where(
    .mantine-Input-input,
    .mantine-Textarea-input,
    .mantine-Select-input,
    .mantine-MultiSelect-input,
    .mantine-PillsInput-input,
    input,
    select,
    textarea
  )::placeholder {
  color: var(--btp-color-text-faint);
  opacity: 1;
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  :where(
    .mantine-Input-input,
    .mantine-Textarea-input,
    .mantine-Select-input,
    .mantine-MultiSelect-input,
    .mantine-PillsInput-input,
    input,
    select,
    textarea
  ):focus {
  border-color: var(--btp-color-focus);
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  :where(
    .mantine-Checkbox-input,
    .mantine-Radio-radio,
    .mantine-Switch-track,
    .mantine-SegmentedControl-root,
    .mantine-Fieldset-root
  ) {
  border-color: var(--btp-color-control-border);
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  :where(
    .mantine-Checkbox-input,
    .mantine-Radio-radio,
    .mantine-Switch-track,
    .mantine-SegmentedControl-root,
    .mantine-Fieldset-root
  ):where(:hover, [data-hovered]) {
  border-color: var(--btp-color-control-border-hover);
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  :where(
    .mantine-Checkbox-input,
    .mantine-Radio-radio,
    .mantine-Switch-track,
    .mantine-SegmentedControl-root,
    .mantine-Fieldset-root
  ):where(:focus, :focus-within) {
  border-color: var(--btp-color-focus);
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  :where(
    .mantine-Button-root[data-variant="default"],
    .mantine-ActionIcon-root[data-variant="default"]
  ):hover {
  border-color: var(--btp-color-control-border-hover);
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  :where(.mantine-Input-label, .mantine-Fieldset-legend) {
  color: var(--btp-color-text-muted);
  font-family: var(--btp-font-interface);
  font-weight: 700;
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  :where(.mantine-Input-description, .mantine-Text-root[data-dimmed]) {
  color: var(--btp-color-text-muted);
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  .mantine-SegmentedControl-root {
  border-color: var(--btp-color-control-border);
  border-radius: 0;
  background: var(--btp-color-surface-1);
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  .mantine-Tabs-list {
  border-color: var(--btp-color-border);
  border-radius: 0;
  background: var(--btp-color-surface-1);
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  :where(.mantine-Tabs-tab, [role="tab"]) {
  border-radius: 0;
  color: var(--btp-color-text-muted);
  font-family: var(--btp-font-interface);
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  :where(.mantine-Tabs-tab, [role="tab"]):hover {
  background: var(--btp-color-surface-2);
  color: var(--btp-color-text);
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  :where(.mantine-Tabs-tab[data-active], [role="tab"][aria-selected="true"]) {
  border-color: var(--btp-color-brand);
  color: var(--btp-color-brand);
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  :where(.mantine-Badge-root, .mantine-Pill-root, .mantine-Chip-label) {
  border-radius: 0;
  font-family: var(--btp-font-interface);
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  :where(.mantine-Notification-root, .mantine-Alert-root) {
  border-color: var(--btp-color-border-strong);
  border-radius: 0;
  background: var(--btp-color-surface-2);
  color: var(--btp-color-text);
  box-shadow: none;
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  ::selection {
  background: rgba(201, 255, 136, 0.32);
  color: var(--btp-color-text);
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"] {
  scrollbar-color: var(--btp-color-border-strong) var(--btp-color-explorer);
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  ::-webkit-scrollbar-track {
  background: var(--btp-color-explorer);
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  ::-webkit-scrollbar-thumb {
  border: 2px solid var(--btp-color-explorer);
  border-radius: 0;
  background: var(--btp-color-border-strong);
}

/* Rendered pages and the native editor. These rules are intentionally scoped
   to Docmost's stable BlockNote and ProseMirror content roots. They do not
   leak document typography into settings, search, or administrative screens. */

html[data-vgso-theme="btp-dark-v1"]
  :where(.bnc-content, .ProseMirror) {
  font-family: var(--btp-font-content);
  font-size: var(--btp-font-size-5);
  line-height: var(--btp-line-content);
}

html[data-vgso-theme="btp-dark-v1"]
  :where(.bnc-content, .ProseMirror)
  :where(p, li, td, th, blockquote, figcaption) {
  font-family: var(--btp-font-content);
}

html[data-vgso-theme="btp-dark-v1"]
  :where(.bnc-content, .ProseMirror)
  :where(h1, h2, h3, h4, h5, h6) {
  margin-top: 1.45em;
  margin-bottom: 0.55em;
  color: inherit;
  font-family: var(--btp-font-interface);
  font-style: normal;
  font-weight: 700;
  line-height: var(--btp-line-compact);
}

html[data-vgso-theme="btp-dark-v1"]
  :where(.bnc-content, .ProseMirror)
  h1 {
  font-size: 2rem;
}

html[data-vgso-theme="btp-dark-v1"]
  :where(.bnc-content, .ProseMirror)
  h2 {
  font-size: 1.5rem;
}

html[data-vgso-theme="btp-dark-v1"]
  :where(.bnc-content, .ProseMirror)
  h3 {
  font-size: 1.25rem;
}

html[data-vgso-theme="btp-dark-v1"]
  :where(.bnc-content, .ProseMirror)
  :where(h4, h5, h6) {
  font-size: 1rem;
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  :where(.bnc-content, .ProseMirror) {
  color: var(--btp-color-text);
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  :where(.bnc-content, .ProseMirror)
  a {
  color: var(--btp-color-brand);
  text-decoration-color: rgba(201, 255, 136, 0.58);
  text-underline-offset: 0.18em;
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  :where(.bnc-content, .ProseMirror)
  a:hover {
  color: var(--btp-color-accent-hover);
  text-decoration-color: currentColor;
}

html[data-vgso-theme="btp-dark-v1"]
  :where(.bnc-content, .ProseMirror)
  .tableWrapper {
  max-width: 100%;
  width: 100%;
  overflow-x: auto;
}

html[data-vgso-theme="btp-dark-v1"]
  :where(.bnc-content, .ProseMirror)
  table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  font-size: var(--btp-font-size-3);
  line-height: 1.48;
}

html[data-vgso-theme="btp-dark-v1"]
  :where(.bnc-content, .ProseMirror)
  :where(th, td) {
  padding: 0.5rem 0.625rem;
  border: 1px solid;
  text-align: left;
  vertical-align: top;
}

html[data-vgso-theme="btp-dark-v1"]
  :where(.bnc-content, .ProseMirror)
  th {
  font-family: var(--btp-font-interface);
  font-weight: 700;
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  :where(.bnc-content, .ProseMirror)
  table {
  background: var(--btp-color-surface-1);
  color: var(--btp-color-text);
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  :where(.bnc-content, .ProseMirror)
  :where(th, td) {
  border-color: var(--btp-color-border);
  background: var(--btp-color-surface-1);
  color: var(--btp-color-text);
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  :where(.bnc-content, .ProseMirror)
  th {
  background: var(--btp-color-surface-2);
}

html[data-vgso-theme="btp-dark-v1"]
  :where(.bnc-content, .ProseMirror)
  code:not(pre code) {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--btp-font-identifier);
  font-size: 0.82em;
  font-weight: 700;
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  :where(.bnc-content, .ProseMirror)
  code:not(pre code) {
  color: var(--btp-color-brand);
}

html[data-vgso-theme="btp-dark-v1"]
  :where(.bnc-content, .ProseMirror)
  pre {
  max-width: 100%;
  padding: var(--btp-space-4);
  overflow: auto;
  border: 1px solid;
  border-radius: 0;
  font-family: var(--btp-font-identifier);
  font-size: var(--btp-font-size-3);
  line-height: 1.55;
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  :where(.bnc-content, .ProseMirror)
  pre {
  border-color: var(--btp-color-border);
  background: var(--btp-color-shell);
  color: var(--btp-color-text);
}

html[data-vgso-theme="btp-dark-v1"]
  :where(.bnc-content, .ProseMirror)
  blockquote {
  margin-inline: 0;
  padding: var(--btp-space-2) var(--btp-space-4);
  border-left: 3px solid;
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  :where(.bnc-content, .ProseMirror)
  blockquote {
  border-color: var(--btp-color-aqua);
  background: rgba(74, 196, 176, 0.08);
  color: var(--btp-color-text-muted);
}

html[data-vgso-theme="btp-dark-v1"]
  :where(.bnc-content, .ProseMirror)
  .mantine-Alert-root[role="alert"] {
  border: 1px solid;
  border-left-width: 4px;
  border-radius: 0;
  box-shadow: none;
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  :where(.bnc-content, .ProseMirror)
  .mantine-Alert-root[role="alert"] {
  border-color: var(--btp-color-border-strong);
  border-left-color: var(--btp-color-brand);
  background: var(--btp-color-surface-2);
  color: var(--btp-color-text);
}

html[data-vgso-theme="btp-dark-v1"]
  :where(.bnc-content, .ProseMirror)
  p
  > strong:first-child
  > em:first-child {
  font-size: 0.875em;
  font-style: normal;
  font-weight: 700;
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  :where(.bnc-content, .ProseMirror)
  p
  > strong:first-child
  > em:first-child {
  color: var(--btp-color-text-faint);
}

html[data-vgso-theme="btp-dark-v1"]
  :where(.bnc-content, .ProseMirror)
  :where(img, video, canvas, iframe, svg) {
  max-width: 100%;
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  :where(.bnc-content, .ProseMirror)
  :where(img, video, canvas, iframe, svg) {
  filter: none;
}

html[data-vgso-theme="btp-dark-v1"][data-mantine-color-scheme="dark"]
  :where(.bnc-content, .ProseMirror)
  :where(figure, .codeBlock, [data-type="drawio"], [data-type="excalidraw"]) {
  border-color: var(--btp-color-border);
  background: var(--btp-color-surface-1);
}

@media (max-width: 720px) {
  html[data-vgso-theme="btp-dark-v1"]
    .mantine-AppShell-header
    a[href="/home"][aria-label="Knowledgebase"]::before {
    width: 76px;
    height: 18px;
  }

  html[data-vgso-theme="btp-dark-v1"]
    .mantine-AppShell-header
    a[href="/home"][aria-label="Knowledgebase"]::after {
    display: none;
  }

  html[data-vgso-theme="btp-dark-v1"]
    :where(.bnc-content, .ProseMirror) {
    font-size: var(--btp-font-size-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-vgso-theme="btp-dark-v1"] *,
  html[data-vgso-theme="btp-dark-v1"] *::before,
  html[data-vgso-theme="btp-dark-v1"] *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media print {
  html[data-vgso-theme="btp-dark-v1"],
  html[data-vgso-theme="btp-dark-v1"] body,
  html[data-vgso-theme="btp-dark-v1"] #root,
  html[data-vgso-theme="btp-dark-v1"] :where(.bnc-content, .ProseMirror) {
    color-scheme: light !important;
    background: #ffffff !important;
    color: #111111 !important;
  }

  html[data-vgso-theme="btp-dark-v1"]
    :where(.bnc-content, .ProseMirror)
    :where(h1, h2, h3, h4, h5, h6, p, li, th, td, blockquote, code, pre, table) {
    background: transparent !important;
    color: #111111 !important;
  }

  html[data-vgso-theme="btp-dark-v1"]
    :where(.bnc-content, .ProseMirror)
    :where(
      table,
      th,
      td,
      pre,
      blockquote,
      figure,
      .codeBlock,
      [data-type="drawio"],
      [data-type="excalidraw"]
    ) {
    background: #ffffff !important;
    border-color: #777777 !important;
    color: #111111 !important;
    box-shadow: none !important;
  }

  html[data-vgso-theme="btp-dark-v1"]
    :where(.bnc-content, .ProseMirror)
    :where(pre, pre code, pre code span) {
    background: transparent !important;
    color: #111111 !important;
  }

  html[data-vgso-theme="btp-dark-v1"]
    :where(.bnc-content, .ProseMirror)
    a {
    color: #2d234b !important;
    text-decoration: underline !important;
  }

  html[data-vgso-theme="btp-dark-v1"]
    :where(.mantine-AppShell-header, .mantine-AppShell-navbar, .mantine-AppShell-aside) {
    display: none !important;
  }
}