/*
 * Client Storybook manager overrides — loaded after design-system manager CSS.
 */
:root {
  --veeshift-primary: #1c312c;
  --veeshift-secondary: #d7e913;
  --veeshift-text: #00032d;
  --veeshift-accent: #e2e194;
  --veeshift-surface-soft: #f8f8fa;
  --veeshift-muted-green: #cdd5ae;
  --veeshift-gray: #4e4e4e;
  --veeshift-surface-muted: #f4f4f4;
  --veeshift-hover-bg: #ecedd9;

  /* DS sidebar icon tokens */
  --colors-light-orange-600: #cdd5ae;
  --colors-light-teal-600: #1c312c;
  --colors-dark-brand-300: #d7e913;
  --colors-light-brand-600: #1c312c;
}

/* Override Storybook's JS-injected inline style on the tree node hover variable */
html.light,
html.light body,
html.light body * {
  --tree-node-background-hover: #ecedd9 !important;
}

html.dark,
html.dark body,
html.dark body * {
  --tree-node-background-hover: color-mix(in srgb, #1c312c 60%, transparent) !important;
}

/* ── Light sidebar icons ── */

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

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

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

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

/* ── Light sidebar: active story row ── */

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

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

html.light body .sidebar-item[data-nodetype='story'][data-selected='true'],
html.light body [data-nodetype='story'][data-selected='true'] {
  background-color: var(--veeshift-accent) !important;
  color: var(--veeshift-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(--veeshift-primary) !important;
}

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

/* ── Context menu button inside sidebar items ── */

html.light body button[aria-label='Open context menu'],
html.light body button[title='Open context menu'] {
  background: var(--veeshift-hover-bg) !important;
  background-color: var(--veeshift-hover-bg) !important;
  color: var(--veeshift-primary) !important;
}

html.light body button[aria-label='Open context menu'] svg,
html.light body button[title='Open context menu'] svg {
  color: var(--veeshift-primary) !important;
}

html.light body [data-nodetype] button:hover,
html.light body [data-nodetype] [role='button']:hover,
html.light body .sidebar-item button:hover,
html.light body button[aria-label='Open context menu']:hover,
html.light body button[title='Open context menu']:hover {
  background: var(--veeshift-secondary) !important;
  background-color: var(--veeshift-secondary) !important;
  color: var(--veeshift-primary) !important;
}

html.light body [data-nodetype] button:hover svg,
html.light body .sidebar-item button:hover svg {
  color: var(--veeshift-primary) !important;
}

/* ── Selected item: keep accent bg on button hover, don't bleed yellow-green ── */

html.light body [data-selected='true'] button[aria-label='Open context menu']:hover,
html.light body [data-selected='true'] button[title='Open context menu']:hover {
  background: color-mix(in srgb, white 30%, var(--veeshift-accent)) !important;
  background-color: color-mix(in srgb, white 30%, var(--veeshift-accent)) !important;
}

/* ── Dark sidebar icons ── */

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

html.dark body [data-nodetype='story'] svg {
  color: var(--veeshift-secondary);
}

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

html.dark body [data-nodetype='group'] svg,
html.dark body [data-nodetype='root'] svg {
  color: var(--veeshift-surface-soft);
}

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

html.dark body .sidebar-item[data-nodetype='document'][data-selected='true'] svg,
html.dark body [data-nodetype='document'][data-selected='true'] svg {
  color: var(--veeshift-accent) !important;
}

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

html.dark body [data-nodetype] button:hover,
html.dark body [data-nodetype] [role='button']:hover,
html.dark body .sidebar-item button:hover,
html.dark body button[aria-label='Open context menu']:hover,
html.dark body button[title='Open context menu']:hover {
  background: var(--veeshift-secondary) !important;
  background-color: var(--veeshift-secondary) !important;
  color: var(--veeshift-primary) !important;
}

html.dark body [data-nodetype] button:hover svg,
html.dark body .sidebar-item button:hover svg {
  color: var(--veeshift-primary) !important;
}

/* ── Dark Docs item ── */

html.dark body [data-nodetype='document']:not([data-selected='true']) {
  background-color: color-mix(in srgb, var(--veeshift-primary) 60%, transparent) !important;
}

html.dark body [data-nodetype='document']:not([data-selected='true']):hover {
  background-color: color-mix(in srgb, var(--veeshift-primary) 85%, transparent) !important;
}

html.dark body .sidebar-item[data-nodetype='story'][data-selected='true'],
html.dark body [data-nodetype='story'][data-selected='true'] {
  background-color: #243832 !important;
  color: var(--veeshift-accent) !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(--veeshift-secondary) !important;
}

/* ── Addon panel inputs ── */

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(--veeshift-primary);
  box-shadow: var(--veeshift-primary) 0px 0px 0px 1px inset;
}

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