/*
 * Cambrian Health Storybook manager overrides.
 */
:root {
  --cambrian-primary: #003f99;
  --cambrian-secondary: #004bb6;
  --cambrian-text: #002647;
  --cambrian-accent: #eef4ff;
  --cambrian-surface-soft: #f3f8ff;
  --cambrian-muted-teal: #b1e2eb;
  --cambrian-gray: #494949;
  --cambrian-surface-muted: #f4f4f4;
  --cambrian-dark-bg: #001a4d;
  --cambrian-dark-surface: #002647;
  --cambrian-dark-border: #003f99;
  --cambrian-dark-input-border: #154fc7;

  --colors-light-orange-600: #b1e2eb;
  --colors-light-teal-600: #003f99;
  --colors-dark-brand-300: #b1e2eb;
  --colors-light-brand-600: #003f99;
}

html.light body [data-nodetype='document'] svg {
  color: var(--cambrian-muted-teal);
}

html.light body [data-nodetype='story'] svg {
  color: var(--cambrian-primary);
}

html.light body [data-nodetype='component'] svg {
  color: var(--cambrian-gray);
}

html.light body [data-nodetype='group'] svg,
html.light body [data-nodetype='root'] svg {
  color: var(--cambrian-gray);
}

html.light body .sidebar-item[data-nodetype='story'][data-selected='true'],
html.light body [data-nodetype='story'][data-selected='true'] {
  background-color: var(--cambrian-accent) !important;
  color: var(--cambrian-text) !important;
}

html.light body .sidebar-item[data-nodetype='story'][data-selected='true'] svg,
html.light body [data-nodetype='story'][data-selected='true'] svg {
  color: var(--cambrian-secondary) !important;
}

html.light body .sidebar-item[data-nodetype='story']:hover:not([data-selected='true']),
html.light body [data-nodetype='story']:hover:not([data-selected='true']) {
  background-color: var(--cambrian-surface-muted) !important;
}

html.dark body [data-nodetype='document'] svg {
  color: var(--cambrian-muted-teal);
}

html.dark body [data-nodetype='story'] svg {
  color: #ffffff;
}

html.dark body [data-nodetype='component'] svg {
  color: var(--cambrian-muted-teal);
}

html.dark body [data-nodetype='group'] svg,
html.dark body [data-nodetype='root'] svg {
  color: var(--cambrian-muted-teal);
}

html.dark body .sidebar-item[data-nodetype='story'][data-selected='true'],
html.dark body [data-nodetype='story'][data-selected='true'],
html.dark body .sidebar-item[data-selected='true'][data-nodetype='story'],
html.dark body .sidebar-item[data-selected='true'][data-nodetype='document'] {
  background-color: var(--cambrian-dark-border) !important;
  color: #ffffff !important;
}

html.dark body .sidebar-item[data-nodetype='story']:hover:not([data-selected='true']),
html.dark body [data-nodetype='story']:hover:not([data-selected='true']) {
  background-color: color-mix(in srgb, var(--cambrian-dark-border) 35%, transparent) !important;
}

html.dark body .sidebar-item[data-nodetype='story'][data-selected='true'] svg,
html.dark body [data-nodetype='story'][data-selected='true'] svg {
  color: var(--cambrian-muted-teal) !important;
}

/* Sidebar section headers (e.g. COMPONENTS) */
html.dark body [data-nodetype='root'],
html.dark body [data-nodetype='group'],
html.dark body .sidebar-item[data-nodetype='root'],
html.dark body .sidebar-item[data-nodetype='group'] {
  color: var(--cambrian-accent) !important;
}

html.dark body [data-nodetype='root'] svg,
html.dark body [data-nodetype='group'] svg,
html.dark body .sidebar-item[data-nodetype='root'] svg,
html.dark body .sidebar-item[data-nodetype='group'] svg {
  color: var(--cambrian-muted-teal) !important;
}

/* Sidebar search field */
html.dark body #storybook-explorer-searchfield,
html.dark body input[placeholder*='Find'],
html.dark body input[aria-label*='Search'] {
  background-color: var(--cambrian-dark-surface) !important;
  color: var(--cambrian-accent) !important;
  border-color: var(--cambrian-dark-input-border) !important;
}

html.dark body #storybook-explorer-searchfield:focus,
html.dark body input[placeholder*='Find']:focus,
html.dark body input[aria-label*='Search']:focus {
  border-color: #b1e2eb !important;
  box-shadow: #b1e2eb 0px 0px 0px 1px inset !important;
}

/* Addon panel inputs */
html.dark body [role='tabpanel'] input[type='text'],
html.dark body [role='tabpanel'] input[type='number'],
html.dark body [role='tabpanel'] input[type='date'],
html.dark body [role='tabpanel'] input[type='color'],
html.dark body [role='tabpanel'] textarea,
html.dark body [role='tabpanel'] select {
  background-color: var(--cambrian-dark-surface) !important;
  color: var(--cambrian-accent) !important;
  border-color: var(--cambrian-dark-input-border) !important;
}

html.dark body [role='tabpanel'] input[type='text']:focus,
html.dark body [role='tabpanel'] input[type='text']:focus-visible,
html.dark body [role='tabpanel'] input[type='number']:focus,
html.dark body [role='tabpanel'] input[type='number']:focus-visible,
html.dark body [role='tabpanel'] input[type='date']:focus,
html.dark body [role='tabpanel'] input[type='date']:focus-visible,
html.dark body [role='tabpanel'] input[type='color']:focus,
html.dark body [role='tabpanel'] input[type='color']:focus-visible,
html.dark body [role='tabpanel'] textarea:focus,
html.dark body [role='tabpanel'] textarea:focus-visible,
html.dark body [role='tabpanel'] select:focus,
html.dark body [role='tabpanel'] select:focus-visible {
  border-color: #b1e2eb !important;
  box-shadow: #b1e2eb 0px 0px 0px 1px inset !important;
}

/* Logo — match Veeshift height (38px) */
html body .sidebar-header img {
  height: 38px !important;
  width: auto !important;
}

body [role='tabpanel'] input[type='text']:focus,
body [role='tabpanel'] input[type='text']:focus-visible,
body [role='tabpanel'] input[type='number']:focus,
body [role='tabpanel'] input[type='number']:focus-visible,
body [role='tabpanel'] input[type='date']:focus,
body [role='tabpanel'] input[type='date']:focus-visible,
body [role='tabpanel'] input[type='color']:focus,
body [role='tabpanel'] input[type='color']:focus-visible,
body [role='tabpanel'] textarea:focus,
body [role='tabpanel'] textarea:focus-visible,
body [role='tabpanel'] select:focus,
body [role='tabpanel'] select:focus-visible {
  border-color: var(--cambrian-secondary);
  box-shadow: var(--cambrian-secondary) 0px 0px 0px 1px inset;
}

html.light body [role='tabpanel'] input[type='radio'],
html.light body [role='tabpanel'] input[type='checkbox'] {
  accent-color: var(--cambrian-primary);
}