/* Carbon v0.1.5. Palette approximated from the supplied ProTrack screenshot. Both attributes are required; light mode is untouched.
   Root scoping also covers Mantine portals mounted outside the React root. */
html[data-mantine-color-scheme='dark'][data-carbon-theme='carbon'] {
  --mantine-color-dark-0: #dce4eb;
  --mantine-color-dark-1: #c5d0d9;
  --mantine-color-dark-2: #a7b6c2;
  --mantine-color-dark-3: #8193a1;
  --mantine-color-dark-4: #30414e;
  --mantine-color-dark-5: #22313c;
  --mantine-color-dark-6: #161f28;
  --mantine-color-dark-7: #0e151b;
  --mantine-color-dark-8: #080c0f;
  --mantine-color-dark-9: #05080b;

  --mantine-color-body: var(--mantine-color-dark-8);
  --mantine-color-text: var(--mantine-color-dark-0);
  --mantine-color-bright: #ffffff;
  --mantine-color-dimmed: var(--mantine-color-dark-2);
  --mantine-color-placeholder: var(--mantine-color-dark-2);
  --mantine-color-default: var(--mantine-color-dark-6);
  --mantine-color-default-hover: var(--mantine-color-dark-5);
  --mantine-color-default-color: var(--mantine-color-dark-0);
  --mantine-color-default-border: var(--mantine-color-dark-4);
  --mantine-color-disabled: var(--mantine-color-dark-6);
  --mantine-color-disabled-color: var(--mantine-color-dark-3);
  --mantine-color-disabled-border: var(--mantine-color-dark-4);
  --mantine-color-anchor: #a3e000;

  --mantine-primary-color-0: #f5fce6;
  --mantine-primary-color-1: #e8f8c5;
  --mantine-primary-color-2: #d5f18d;
  --mantine-primary-color-3: #c0eb50;
  --mantine-primary-color-4: #a3e000;
  --mantine-primary-color-5: #8dc400;
  --mantine-primary-color-6: #719e00;
  --mantine-primary-color-7: #1d290b;
  --mantine-primary-color-8: #2a3a10;
  --mantine-primary-color-9: #172008;
  --mantine-primary-color-filled: #1d290b;
  --mantine-primary-color-filled-hover: #2a3a10;
  --mantine-primary-color-contrast: #c0eb50;
  --mantine-primary-color-light: #18220f;
  --mantine-primary-color-light-hover: #243315;
  --mantine-primary-color-light-color: #c0eb50;

  /* Approved lipstick-red status palette. Keep danger distinct from lime actions. */
  --mantine-color-red-0: #fff0f3;
  --mantine-color-red-1: #ffdce4;
  --mantine-color-red-2: #ffb3c2;
  --mantine-color-red-3: #ff7892;
  --mantine-color-red-4: #ff405b;
  --mantine-color-red-5: #ef2850;
  --mantine-color-red-6: #e61946;
  --mantine-color-red-7: #cf1642;
  --mantine-color-red-8: #bf123e;
  --mantine-color-red-9: #a80f35;
  --mantine-color-error: #ff405b;
  --mantine-color-red-text: #ff405b;
  --mantine-color-red-filled: #bf123e;
  --mantine-color-red-filled-hover: #a80f35;
  --mantine-color-red-light: #300e18;
  --mantine-color-red-light-hover: #421321;
  --mantine-color-red-light-color: #ff405b;
  --mantine-color-red-outline: #ff405b;
  --mantine-color-red-outline-hover: #300e18;

  /* InvenTree defaults to indigo; Mantine variants can reference that palette
     directly instead of primary aliases. Explicit status colours stay intact. */
  --mantine-color-indigo-0: var(--mantine-primary-color-0);
  --mantine-color-indigo-1: var(--mantine-primary-color-1);
  --mantine-color-indigo-2: var(--mantine-primary-color-2);
  --mantine-color-indigo-3: var(--mantine-primary-color-3);
  --mantine-color-indigo-4: var(--mantine-primary-color-4);
  --mantine-color-indigo-5: var(--mantine-primary-color-5);
  --mantine-color-indigo-6: var(--mantine-primary-color-6);
  --mantine-color-indigo-7: var(--mantine-primary-color-7);
  --mantine-color-indigo-8: var(--mantine-primary-color-8);
  --mantine-color-indigo-9: var(--mantine-primary-color-9);
  --mantine-color-indigo-filled: var(--mantine-primary-color-filled);
  --mantine-color-indigo-filled-hover: var(--mantine-primary-color-filled-hover);
  --mantine-color-indigo-light: var(--mantine-primary-color-light);
  --mantine-color-indigo-light-hover: var(--mantine-primary-color-light-hover);
  --mantine-color-indigo-light-color: var(--mantine-primary-color-light-color);
  --mantine-color-indigo-text: #c0eb50;
  --mantine-color-indigo-outline: #a3e000;
  --mantine-color-indigo-outline-hover: #18220f;
}

html[data-mantine-color-scheme='dark'][data-carbon-theme='carbon']
  :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--mantine-primary-color-4);
  outline-offset: 3px;
}

/* InvenTree StylishText builds a gradient from the primary filled colour.
   Carbon's filled colour is a dark button surface, unsuitable for text.
   Use readable soft-white text via Mantine's stable class/variant attributes. */
html[data-mantine-color-scheme='dark'][data-carbon-theme='carbon']
  .mantine-Text-root[data-variant='gradient'] {
  background-image: none;
  color: var(--mantine-color-text);
  -webkit-text-fill-color: var(--mantine-color-text);
}

/* PanelGroup labels use an inline primary shade intended for button surfaces.
   Limit this override to direct section headings, not nested tab labels. */
html[data-mantine-color-scheme='dark'][data-carbon-theme='carbon']
  .mantine-Tabs-list[aria-label^='panel-tabs-'] > div > .mantine-Text-root {
  color: var(--mantine-color-dimmed) !important;
}

/* Bright on state; keep Mantine's unchecked and disabled states intact. */
html[data-mantine-color-scheme='dark'][data-carbon-theme='carbon']
  .mantine-Switch-input:checked:not(:disabled):not([data-disabled]) + .mantine-Switch-track {
  --switch-bg: var(--mantine-primary-color-4);
  --switch-text-color: var(--mantine-color-dark-9);
  --switch-thumb-bg: var(--mantine-color-dark-9);
}

html[data-mantine-color-scheme='dark'][data-carbon-theme='carbon']
  .mantine-Switch-input:focus-visible + .mantine-Switch-track {
  outline: 2px solid var(--mantine-primary-color-4);
  outline-offset: 3px;
}

/* Quantity/progress bars in tables: lime fill, original values and widths.
   Inline section colours require !important; unrelated status badges are separate. */
html[data-mantine-color-scheme='dark'][data-carbon-theme='carbon']
  table .mantine-Progress-section {
  background-color: var(--mantine-primary-color-4) !important;
  color: var(--mantine-color-dark-9);
}