/* Neurodesk's hosted-app theme, matched to the Neurocontainers Builder dark
   palette. The shared adapter is loaded after each app's own styles. */
:root[data-neurodesk-app] {
  color-scheme: dark;

  --nd-brand-page: #0a0c08;
  --nd-brand-primary: #91c84a;
  --nd-brand-menu: #0a0c08;
  --nd-brand-selection: #1f2e18;
  --nd-brand-accent-background: #10140d;
  --nd-brand-selected: #527435;
  --nd-brand-hover: #a8d65c;
  --nd-brand-primary-hover: #a8d65c;
  --nd-brand-light: #c4e382;
  --nd-brand-unselected: #1f2e18;
  --nd-brand-pale: #10140d;
  --nd-brand-surface: #161a0e;
  --nd-brand-text: #e8f5d0;
  --nd-brand-text-muted: #d1d5db;
  --nd-brand-text-dim: #9ca3af;
  --nd-brand-action-text: #0a0c08;
  --nd-brand-menu-text: #e8f5d0;
  --nd-brand-border: #2d4222;
  --nd-brand-border-strong: #3f5b2e;
  --nd-brand-console-surface: #0a0c08;
  --nd-brand-console-header: #10140d;
  --nd-brand-console-text: #d1d5db;
  --nd-brand-console-time: #91c84a;
  --nd-brand-success: #75b580;
  --nd-brand-focus: #91c84a;
  --nd-font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --nd-font-mono: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;

  /* Shared imaging-workspace tokens. */
  --nd-color-bg: var(--nd-brand-pale);
  --nd-color-surface: var(--nd-brand-surface);
  --nd-color-surface-elevated: var(--nd-brand-unselected);
  --nd-color-border: var(--nd-brand-border);
  --nd-color-border-light: var(--nd-brand-border-strong);
  --nd-color-text: var(--nd-brand-text);
  --nd-color-text-muted: var(--nd-brand-text-muted);
  --nd-color-text-dim: var(--nd-brand-text-dim);
  --nd-color-primary: var(--nd-brand-primary);
  --nd-color-primary-hover: var(--nd-brand-primary-hover);
  --nd-color-primary-glow: rgb(145 200 74 / 18%);
  --nd-color-success: var(--nd-brand-success);
  --nd-color-accent: var(--nd-brand-selected);

  /* Compact single-page app tokens. */
  --bg: var(--nd-brand-pale);
  --bg2: var(--nd-brand-pale);
  --panel: var(--nd-brand-surface);
  --panel2: var(--nd-brand-unselected);
  --line: var(--nd-brand-border);
  --border: var(--nd-brand-border);
  --ink: var(--nd-brand-text);
  --text: var(--nd-brand-text);
  --dim: var(--nd-brand-text-muted);
  --accent: var(--nd-brand-primary);
  --accent2: var(--nd-brand-selected);
  --good: var(--nd-brand-success);
}

:root[data-neurodesk-app][data-neurodesk-theme="light"] {
  color-scheme: light;
  --nd-brand-page: #f6f8f5;
  --nd-brand-primary: #3f6f24;
  --nd-brand-menu: #0c0e0a;
  --nd-brand-selection: #e7f0df;
  --nd-brand-accent-background: #eef4e9;
  --nd-brand-selected: #3f6f24;
  --nd-brand-hover: #c4e1a7;
  --nd-brand-primary-hover: #31591c;
  --nd-brand-light: #d7e7ca;
  --nd-brand-unselected: #f1f4f0;
  --nd-brand-pale: #f6f8f5;
  --nd-brand-surface: #ffffff;
  --nd-brand-text: #18201b;
  --nd-brand-text-muted: #465149;
  --nd-brand-text-dim: #667169;
  --nd-brand-action-text: #ffffff;
  --nd-brand-menu-text: #ffffff;
  --nd-brand-border: #dce2dc;
  --nd-brand-border-strong: #b8c2b9;
  --nd-brand-console-surface: #ffffff;
  --nd-brand-console-header: #f1f4f0;
  --nd-brand-console-text: #18201b;
  --nd-brand-console-time: #3f6f24;
  --nd-brand-success: #217738;
  --nd-brand-focus: #2563a6;
  --nd-color-primary-glow: rgb(63 111 36 / 16%);
}

/* Dicompare's Tailwind theme consumes raw RGB triplets. */
:root[data-neurodesk-shell="react"] {
  color-scheme: dark;
  --color-surface: 10 12 8;
  --color-surface-primary: 22 26 14;
  --color-surface-secondary: 31 46 24;
  --color-surface-hover: 63 91 46;
  --color-surface-alt: 16 20 13;
  --color-text-primary: 232 245 208;
  --color-text-secondary: 209 213 219;
  --color-text-tertiary: 196 227 130;
  --color-text-muted: 156 163 175;
  --color-text-inverted: 10 12 8;
  --color-border: 45 66 34;
  --color-border-secondary: 63 91 46;
  --color-brand-50: 16 20 13;
  --color-brand-100: 31 46 24;
  --color-brand-500: 145 200 74;
  --color-brand-600: 82 116 53;
  --color-brand-700: 45 66 34;
}

:root[data-neurodesk-shell="react"][data-neurodesk-theme="light"] {
  color-scheme: light;
  --color-surface: 246 248 245;
  --color-surface-primary: 255 255 255;
  --color-surface-secondary: 241 244 240;
  --color-surface-hover: 231 240 223;
  --color-surface-alt: 246 248 245;
  --color-text-primary: 24 32 27;
  --color-text-secondary: 70 81 73;
  --color-text-tertiary: 70 81 73;
  --color-text-muted: 102 113 105;
  --color-text-inverted: 255 255 255;
  --color-border: 220 226 220;
  --color-border-secondary: 184 194 185;
  --color-brand-50: 238 244 233;
  --color-brand-100: 231 240 223;
  --color-brand-500: 63 111 36;
  --color-brand-600: 49 89 28;
  --color-brand-700: 39 72 22;
}

/* Older non-React apps use light-palette role names for surfaces and text.
   Bridge those roles for every hosted shell that still consumes them. */
:root[data-neurodesk-app][data-neurodesk-theme="dark"]:not([data-neurodesk-shell="react"]) {
  --nd-brand-white: var(--nd-brand-surface);
  --nd-ink-muted: var(--nd-brand-text-muted);
  --nd-line-neutral: var(--nd-brand-border);
}

:root[data-neurodesk-app],
[data-neurodesk-app] body {
  color: var(--nd-brand-text);
  background: var(--nd-brand-pale);
}

[data-neurodesk-app] :is(input:not([type="range"]), select, textarea) {
  color: var(--nd-brand-text);
  background-color: var(--nd-brand-unselected);
  border-color: var(--nd-brand-border);
}

[data-neurodesk-app] :is(input, textarea)::placeholder {
  color: var(--nd-brand-text-dim);
}

:root[data-neurodesk-app][data-neurodesk-theme="dark"]:not([data-neurodesk-shell="react"])
  :is(.start-page, .nd-imaging-workspace, #controls, .workflow-panel, #status, .cite-dialog) {
  color: var(--nd-brand-text);
}

:root[data-neurodesk-app][data-neurodesk-theme="dark"]:not([data-neurodesk-shell="react"])
  :is(.start-kicker, .start-how > h3, .panel-step, .workflow-help summary, .readout) {
  color: var(--nd-brand-primary);
}

:root[data-neurodesk-app][data-neurodesk-theme="dark"]:not([data-neurodesk-shell="react"])
  :is(.start-hero h2, .start-step h4, .panel-heading h2, .row, .check, .instruction-note, .hint strong, .layer-list li, .point-list) {
  color: var(--nd-brand-text);
}

:root[data-neurodesk-app][data-neurodesk-theme="dark"]:not([data-neurodesk-shell="react"]) .start-intro {
  color: var(--nd-brand-text-muted);
}

:root[data-neurodesk-app][data-neurodesk-theme="dark"]:not([data-neurodesk-shell="react"])
  :is(.start-local-badge, .start-local-panel) {
  color: var(--nd-brand-text-muted);
}

:root[data-neurodesk-app][data-neurodesk-theme="dark"]:not([data-neurodesk-shell="react"])
  :is(.workflow-help, .layer-list li, .start-footer) {
  color: var(--nd-brand-text-muted);
  background: var(--nd-brand-pale);
  border-color: var(--nd-brand-border);
}

:root[data-neurodesk-app][data-neurodesk-theme="dark"]:not([data-neurodesk-shell="react"]) #controls
  :is(select, input[type="text"], input[type="number"]) {
  color: var(--nd-brand-text);
  background: var(--nd-brand-unselected);
  border-color: var(--nd-brand-border);
}

:root[data-neurodesk-app][data-neurodesk-theme="dark"]:not([data-neurodesk-shell="react"]) #controls button {
  color: var(--nd-brand-text);
  background: var(--nd-brand-pale);
  border-color: var(--nd-brand-border);
}

:root[data-neurodesk-app][data-neurodesk-theme="dark"]:not([data-neurodesk-shell="react"]) #controls
  :is(button, select, input):disabled {
  color: var(--nd-brand-text-dim);
  background: var(--nd-brand-unselected);
  border-color: var(--nd-brand-border);
}

:root[data-neurodesk-app][data-neurodesk-theme="dark"]:not([data-neurodesk-shell="react"]) #controls
  input:disabled:not([type="checkbox"]):not([type="range"]):not([type="file"]) {
  color: var(--nd-brand-text-dim);
  background: var(--nd-brand-unselected);
  border-color: var(--nd-brand-border);
}

:root[data-neurodesk-app][data-neurodesk-theme="dark"]:not([data-neurodesk-shell="react"]) #controls button.primary {
  color: var(--nd-brand-action-text);
  background: var(--nd-brand-primary);
  border-color: var(--nd-brand-primary);
}

:root[data-neurodesk-app][data-neurodesk-theme="dark"]:not([data-neurodesk-shell="react"]) #controls .segmented button.active {
  color: var(--nd-brand-menu-text);
  background: var(--nd-brand-selected);
  border-color: var(--nd-brand-selected);
}

/* SurfAnnotate's file input is visually represented by its adjacent label.
   Theme the visible control itself, including the disabled overlay state. */
:root[data-neurodesk-app][data-neurodesk-theme="dark"]:not([data-neurodesk-shell="react"]) .upload-visual {
  color: var(--nd-brand-text);
  background: var(--nd-brand-pale);
  border-color: var(--nd-brand-primary);
}

:root[data-neurodesk-app][data-neurodesk-theme="dark"]:not([data-neurodesk-shell="react"]) .upload-visual > svg {
  color: var(--nd-brand-primary);
}

:root[data-neurodesk-app][data-neurodesk-theme="dark"]:not([data-neurodesk-shell="react"]) .upload-action {
  color: var(--nd-brand-action-text);
  background: var(--nd-brand-primary);
}

:root[data-neurodesk-app][data-neurodesk-theme="dark"]:not([data-neurodesk-shell="react"]) #controls
  .upload-field > input:disabled + .upload-visual {
  color: var(--nd-brand-text-dim);
  background: var(--nd-brand-unselected);
  border-color: var(--nd-brand-border-strong);
}

:root[data-neurodesk-app][data-neurodesk-theme="dark"]:not([data-neurodesk-shell="react"]) #controls
  .upload-field > input:disabled + .upload-visual :is(svg, small) {
  color: var(--nd-brand-text-dim);
}

:root[data-neurodesk-app][data-neurodesk-theme="dark"]:not([data-neurodesk-shell="react"]) #controls
  .upload-field > input:disabled + .upload-visual .upload-action {
  color: var(--nd-brand-text-dim);
  background: var(--nd-brand-pale);
}

:root[data-neurodesk-app][data-neurodesk-theme="dark"]:not([data-neurodesk-shell="react"])
  :is(.drop-hint strong, .start-step-number) {
  color: var(--nd-brand-text);
}

:root[data-neurodesk-app][data-neurodesk-theme="dark"]:not([data-neurodesk-shell="react"])
  :is(.start-footer a, .cite-section h4, .cite-item a, .cite-close) {
  color: var(--nd-brand-light);
}

:root[data-neurodesk-app][data-neurodesk-theme="dark"]:not([data-neurodesk-shell="react"]) .cite-close:hover {
  color: var(--nd-brand-action-text);
}

[data-neurodesk-app] body,
[data-neurodesk-app] button,
[data-neurodesk-app] input,
[data-neurodesk-app] select,
[data-neurodesk-app] textarea {
  font-family: var(--nd-font-ui);
  font-stretch: normal;
}

[data-neurodesk-app] code,
[data-neurodesk-app] pre,
[data-neurodesk-app] :is(.console-output, .nd-console-output) {
  font-family: var(--nd-font-mono);
}

[data-neurodesk-app] :is(input, select, textarea) {
  accent-color: var(--nd-brand-primary);
}

/* Local token overrides keep all header copy and icons readable without
   changing the apps' existing markup. */
[data-neurodesk-app] :is(.app-header, .start-header, .nd-imaging-app-header) {
  --nd-color-text: var(--nd-brand-menu-text);
  --nd-color-text-muted: var(--nd-brand-light);
  --nd-color-text-dim: var(--nd-brand-hover);
  color: var(--nd-brand-menu-text);
  background: var(--nd-brand-menu);
  border-color: var(--nd-brand-selected);
}

[data-neurodesk-app] :is(.header-link, .nd-header-link) {
  color: var(--nd-brand-menu-text);
}

/* Bright green is an action fill; lighter green remains readable as dark-theme
   link text. */
:root[data-neurodesk-app]:not([data-neurodesk-shell="react"])
  :is(.modal-body a, .modal-body h4) {
  color: var(--nd-brand-light);
}

:root[data-neurodesk-app]:not([data-neurodesk-shell="react"])
  :is(.about-highlight, .privacy-highlight, .citation-primary) {
  background: var(--nd-brand-pale);
}

:root[data-neurodesk-app]:not([data-neurodesk-shell="react"])
  :is(.about-highlight strong, .privacy-highlight strong, .citation-primary strong) {
  color: var(--nd-brand-light);
}

:root[data-neurodesk-app][data-neurodesk-theme="light"]:not([data-neurodesk-shell="react"])
  :is(.modal-body a, .modal-body h4, .about-highlight strong, .privacy-highlight strong, .citation-primary strong) {
  color: var(--nd-brand-selected);
}

/* Primary actions use vivid green with near-black text. */
[data-neurodesk-app] :is(.btn-primary, .nd-btn-primary) {
  color: var(--nd-brand-action-text);
  background: var(--nd-brand-primary);
  border-color: var(--nd-brand-primary);
}

[data-neurodesk-app] :is(#applyBtn, #processButton) {
  color: var(--nd-brand-action-text);
  background: var(--nd-brand-primary);
  border-color: var(--nd-brand-primary);
}

[data-neurodesk-app] :is(.view-tab.active, .modebtn.active, .volume-toggle .view-btn.active) {
  color: var(--nd-brand-action-text);
  background: var(--nd-brand-primary);
  border-color: var(--nd-brand-primary);
}

/* Existing app styles dim disabled controls with opacity, compounding muted
   text over similar olive surfaces. Preserve readable foregrounds instead. */
[data-neurodesk-app] :is(button:disabled, input:disabled, select:disabled, textarea:disabled) {
  opacity: 1;
  color: var(--nd-brand-text);
  background-color: var(--nd-brand-unselected);
  border-color: var(--nd-brand-border-strong);
}

[data-neurodesk-app] :is(#applyBtn:disabled, #processButton:disabled) {
  color: var(--nd-brand-text);
  background: var(--nd-brand-unselected);
  border-color: var(--nd-brand-border-strong);
}

/* Consoles remain subordinate to the viewer with the deepest surface and a
   thin green divider. */
[data-neurodesk-app] :is(.console-container, .nd-console-container) {
  --nd-color-surface: var(--nd-brand-console-surface);
  --nd-color-border: var(--nd-brand-border);
  --nd-color-text: var(--nd-brand-console-text);
  --nd-color-text-muted: var(--nd-brand-console-text);
  --nd-color-text-dim: var(--nd-brand-console-time);
  --nd-color-error: #ff8a80;
  --nd-color-warning: #f0c777;
  color: var(--nd-brand-console-text);
  background: var(--nd-brand-console-surface);
  border-top: 3px solid var(--nd-brand-primary);
}

[data-neurodesk-app] :is(.console-header, .nd-console-header) {
  background: var(--nd-brand-console-header);
  border-bottom-color: var(--nd-brand-border);
}

[data-neurodesk-app] :is(.console-output, .nd-console-output) {
  color: var(--nd-brand-console-text);
  background: var(--nd-brand-console-surface);
}

:root[data-neurodesk-app][data-neurodesk-theme="light"]
  :is(.console-container, .nd-console-container) {
  --nd-color-error: #b42318;
  --nd-color-warning: #7a4b00;
}

[data-neurodesk-app] .nd-imaging-mark {
  color: var(--nd-brand-action-text);
}

[data-neurodesk-app] :focus-visible {
  outline: 3px solid var(--nd-brand-focus);
  outline-offset: 2px;
}

[data-neurodesk-app] ::selection {
  color: var(--nd-brand-action-text);
  background: var(--nd-brand-primary);
}

/* One application identity and navigation contract across every hosted app.
   App-owned header controls stay mounted (and can still be invoked by the
   shared About/Cite/Privacy buttons), but the visible chrome is consistent. */
[data-neurodesk-top-bar-host] {
  display: block !important;
  box-sizing: border-box !important;
  min-height: 64px !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  color: var(--nd-brand-menu-text) !important;
  background: var(--nd-brand-menu) !important;
  border: 0 !important;
  border-bottom: 2px solid var(--nd-brand-primary) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

[data-neurodesk-top-bar-host]:has(> .nd-app-bar) > :not(.nd-app-bar) {
  display: none !important;
}

.nd-app-bar {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 62px !important;
  padding: 0 28px !important;
  margin: 0 !important;
  font-family: var(--nd-font-ui) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  color: var(--nd-brand-menu-text) !important;
  background: var(--nd-brand-menu) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.nd-app-bar--standalone {
  border-bottom: 2px solid var(--nd-brand-primary) !important;
}

.nd-app-bar__identity,
.nd-app-bar__navigation {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
}

.nd-app-bar__identity {
  gap: 18px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

.nd-app-bar__title,
.nd-app-bar__description,
.nd-app-bar__version {
  display: inline !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: none !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
}

.nd-app-bar__title {
  flex: 0 0 auto !important;
  color: var(--nd-brand-menu-text) !important;
  font-size: 21px !important;
  font-weight: 600 !important;
}

.nd-app-bar__description {
  overflow: hidden !important;
  color: var(--nd-brand-hover) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  text-overflow: ellipsis !important;
}

.nd-app-bar__version {
  flex: 0 0 auto !important;
  color: var(--nd-brand-hover) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

.nd-app-bar__navigation {
  flex: 0 0 auto !important;
  justify-content: flex-end !important;
  gap: 10px !important;
}

.nd-app-bar__action {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 40px !important;
  padding: 7px 8px !important;
  margin: 0 !important;
  font: inherit !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  color: var(--nd-brand-menu-text) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  opacity: 1 !important;
  transition: color 120ms ease, background-color 120ms ease !important;
}

.nd-app-bar__action:hover {
  color: var(--nd-brand-menu) !important;
  background: var(--nd-brand-hover) !important;
}

.nd-app-bar__action svg {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.nd-app-bar__action:last-child svg {
  fill: currentColor !important;
  stroke: none !important;
}

[data-neurodesk-top-bar-overlay] {
  flex-direction: column !important;
}

[data-neurodesk-top-bar-overlay] > .nd-app-bar {
  position: relative !important;
  z-index: 1 !important;
  flex: 0 0 auto !important;
  border-bottom: 2px solid var(--nd-brand-primary) !important;
}

.nd-app-utility-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  padding: 8px 28px !important;
  color: var(--nd-brand-text) !important;
  background: var(--nd-brand-pale) !important;
  border-bottom: 1px solid var(--nd-brand-border) !important;
}

.nd-app-dialog {
  width: min(520px, calc(100vw - 32px));
  padding: 0;
  color: var(--nd-brand-text);
  background: var(--nd-brand-surface);
  border: 1px solid var(--nd-brand-border-strong);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgb(12 14 10 / 28%);
}

.nd-app-dialog::backdrop {
  background: rgb(12 14 10 / 62%);
}

.nd-app-dialog__panel {
  display: grid;
  gap: 16px;
  padding: 28px;
  font-family: var(--nd-font-ui);
}

.nd-app-dialog__panel :is(h2, p) {
  margin: 0;
  color: var(--nd-brand-text);
}

.nd-app-dialog__source {
  justify-self: start !important;
  color: var(--nd-brand-light) !important;
  background: transparent !important;
}

:root[data-neurodesk-theme="light"] .nd-app-dialog__source {
  color: var(--nd-brand-selected) !important;
}

.nd-app-dialog__close {
  justify-self: end;
  min-width: 90px;
  padding: 9px 16px;
  color: var(--nd-brand-action-text);
  background: var(--nd-brand-primary);
  border: 1px solid var(--nd-brand-primary);
  border-radius: 7px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

@media (max-width: 1120px) {
  .nd-app-bar {
    gap: 12px !important;
    padding-inline: 16px !important;
  }

  .nd-app-bar__identity {
    gap: 10px !important;
  }

  .nd-app-bar__navigation {
    gap: 2px !important;
  }

  .nd-app-bar__action {
    gap: 4px !important;
    padding-inline: 5px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 820px) {
  .nd-app-bar {
    overflow-x: auto !important;
  }

  .nd-app-bar__description {
    display: none !important;
  }
}

@media (max-width: 620px) {
  .nd-app-bar__action span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}