:root,
[data-theme="light"] {
    --vo-canvas: #f7f9fc;
    --vo-surface: #ffffff;
    --vo-surface-elevated: #ffffff;
    --vo-surface-subtle: #f3f6fa;
    --vo-surface-hover: #eaf2f8;
    --vo-surface-selected: #e8f1fb;
    --vo-neutral-surface: #e6e9ee;
    --vo-neutral-text: #4b5563;
    --vo-text: #172033;
    --vo-text-secondary: #4f5f75;
    --vo-text-muted: #6f7d91;
    --vo-text-disabled: #9aa6b5;
    --vo-border: #dfe5ed;
    --vo-border-subtle: #edf1f6;
    --vo-border-strong: #c6d0dc;
    --vo-divider: #dfe5ed;             /* vertical value/column separators */
    --vo-link: #00629e;
    --vo-primary-strong: #00629e;
    --vo-primary-hover: #004f80;
    --vo-focus: rgba(0, 98, 158, 0.28);
    --vo-success-surface: #e8f8f0;
    --vo-success-text: #166542;
    --vo-warning-surface: #fff5d8;
    --vo-warning-text: #76540b;
    --vo-danger-surface: #fdebec;
    --vo-danger-text: #a23742;
    --vo-info-surface: #e5f4fa;
    --vo-info-text: #175e78;
    --vo-purple-surface: #f4effd;
    --vo-purple-text: #6d28d9;
    --vo-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    --vo-chart-text: #26354b;
    --vo-chart-muted-text: #66758a;
    --vo-chart-grid: rgba(90, 108, 132, 0.2);
    --vo-chart-tooltip-background: rgba(22, 30, 43, 0.96);
    --vo-chart-tooltip-border: rgba(255, 255, 255, 0.12);
}

[data-theme="dark"] {
    /* Backgrounds */
    --vo-canvas: #08111b;              /* background-primary (page) */
    --vo-surface: #101b24;             /* table-row / card surface */
    --vo-surface-elevated: #15232e;    /* background-elevated (dropdowns, popovers) */
    --vo-surface-subtle: #0d1822;      /* background-secondary / recessed inputs */
    --vo-surface-hover: #182a37;       /* background-hover */
    --vo-surface-selected: #112944;    /* table-selected-row */
    /* Text */
    --vo-text: #f3f6f9;                /* text-primary */
    --vo-text-secondary: #c3cdd7;      /* text-secondary */
    --vo-text-muted: #82909e;          /* text-muted */
    --vo-text-disabled: #566574;       /* text-disabled */
    /* Borders */
    --vo-border: #263746;              /* border-primary */
    --vo-border-subtle: #1d2c38;       /* border-secondary */
    --vo-border-strong: #344b5e;       /* border-strong */
    --vo-divider: #1d2c38;             /* vertical separators — dimmer than the border so grid lines don't glare */
    /* Accent (blue) */
    --vo-link: #4c9cff;                /* info-colour (bright, for text links) */
    --vo-primary-strong: #2563eb;      /* primary-colour */
    --vo-primary-hover: #3b82f6;       /* primary hover (brighter) */
    --vo-primary-active: #1d4ed8;      /* primary active (darker) */
    --vo-focus: rgb(37 99 235 / 40%);  /* primary @ 40% */
    /* Inputs */
    --vo-input-border: #344b5e;        /* border-strong */
    /* Icons (copy-to-clipboard, external-link, action glyphs) */
    --vo-icon: #c3cdd7;
    --vo-icon-muted: #82909e;
    --vo-icon-active: #4c9cff;
    /* Status (solid dark tinted backgrounds + solid text) */
    --vo-success-surface: #103821;
    --vo-success-text: #1cc889;
    --vo-warning-surface: #3c3013;
    --vo-warning-text: #ffd15c;
    --vo-danger-surface: #451f22;
    --vo-danger-text: #ff6b64;
    --vo-info-surface: #12345c;
    --vo-info-text: #87bcff;
    --vo-purple-surface: #2c1f4d;
    --vo-purple-text: #c39cf6;
    --vo-neutral-surface: #3f4850;     /* neutral status badge */
    --vo-neutral-text: #f1f3f5;
    --vo-shadow: 0 8px 24px rgb(0 0 0 / 32%);
    /* Charts */
    --vo-chart-text: #f3f6f9;
    --vo-chart-muted-text: #82909e;
    --vo-chart-grid: rgba(29, 44, 56, 0.65);
    --vo-chart-tooltip-background: #15232e;
    --vo-chart-tooltip-border: #263746;
    /* Table tiers */
    --vo-table-header: #09131d;        /* table-header */
    --vo-table-alt: #0d1923;           /* alternate row */
    --vo-table-row-hover: #152530;     /* table-row-hover */
    --vo-table-group: #0d1923;         /* table-group-header */
    --vo-table-group-hover: #152530;   /* table-group hover */
    --vo-table-total: #112944;         /* totals row */
    /* SB-Admin bridge */
    --primary: #2563eb;
    --primary-hover: #3b82f6;
    --table-warning: #3c3013;
}

html,
body,
#wrapper,
#content-wrapper,
#content {
    background-color: var(--vo-canvas);
    color: var(--vo-text);
}

body,
.card,
.modal-content,
.dropdown-menu,
.popover,
.form-control,
.custom-select,
.btn,
.table {
    transition: background-color 180ms cubic-bezier(0.16, 1, 0.3, 1),
                border-color 180ms cubic-bezier(0.16, 1, 0.3, 1),
                color 180ms cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Keep button labels on one line (Bootstrap 4.3 dropped the default
   white-space:nowrap, letting long labels like "CSV Import / Export" wrap).
   Datatable collection items opt back into wrapping via their own
   white-space:normal !important, so they're unaffected. */
.btn {
    white-space: nowrap;
}

a {
    color: var(--vo-link);
}

a:hover,
a:focus {
    color: var(--vo-link);
}

[data-theme="dark"] .topbar-brand-link img[src*="comrce_icon_black"],
[data-theme="dark"] .cmh-icon[src*="comrce_icon_black"] {
    filter: invert(1) brightness(0.92);
}

:focus-visible {
    outline: 3px solid var(--vo-focus);
    outline-offset: 2px;
}

.language-settings-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--vo-border);
}

/* Language and theme sit side by side, split by a rule that has to span the
   full height of the taller column — hence a border on the second item rather
   than a separator element. */
.preferences-row {
    display: flex;
    align-items: stretch;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.preferences-row__item {
    flex: 1;
    min-width: 0;
}

.preferences-row__item--divided {
    border-left: 1px solid var(--vo-border);
    padding-left: 1.5rem;
}

.theme-setting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 0;
    height: 100%;
}

.theme-setting__copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.theme-setting__label {
    color: var(--vo-text);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.2;
}

.theme-setting__description {
    color: var(--vo-text-muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

/* Two-position slider shared by the theme and language controls. Both are a
   choice between exactly two labelled options, so they share the track, the
   sliding thumb and the option typography; only what drives the thumb differs.
   The thumb is sized off the track (50% less the padding) rather than in fixed
   pixels, so it still lands correctly once the options carry text of differing
   widths ("Light"/"Dark", "Deutsch"/"English"). */
.vo-switch {
    position: relative;
    display: inline-grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    padding: 3px;
    border: 1px solid var(--vo-border-strong);
    /* 7px matches the select2 inputs these sit beside (see the
       .select2-selection--single block in base_css_imports.html), so they read as
       their siblings rather than as stray pills. */
    border-radius: 7px;
    background: #e6edf5;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
    cursor: pointer;
    touch-action: manipulation;
}

.vo-switch__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    z-index: 1;
    width: calc(50% - 3px);
    height: calc(100% - 6px);
    /* Track radius (7px) less the 3px track padding, so the thumb's curve sits
       concentric with the track's instead of floating inside it. */
    border-radius: 4px;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
    transform: translateX(0);
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), background-color 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* The thumb is exactly one slot wide, so one slot right is translateX(100%). */
.vo-switch__thumb--end {
    transform: translateX(100%);
}

.vo-switch__option {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    margin: 0;
    padding: 0.3rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--vo-text-muted);
    cursor: pointer;
    transition: color 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.vo-switch__option i {
    font-size: 0.72rem;
}

[data-theme="dark"] .vo-switch {
    background: #29384e;
}

[data-theme="dark"] .vo-switch__thumb {
    background: #dfe8f3;
}

/* The thumb is a light chip in both themes, so whichever option sits on it takes
   a dark ink regardless of the surrounding theme. */
/* --- theme switch: the thumb follows the live theme, not a form value --- */
.theme-switch .vo-switch__option--light {
    color: #243348;
}

[data-theme="dark"] .theme-switch .vo-switch__thumb {
    transform: translateX(100%);
}

[data-theme="dark"] .theme-switch .vo-switch__option--light {
    color: var(--vo-text-muted);
}

[data-theme="dark"] .theme-switch .vo-switch__option--dark {
    color: #243348;
}

/* --- language switch: real radios, so the form still posts `language` and the
   control stays keyboard- and screen-reader-navigable. The thumb follows
   :checked, so no JS is involved. --- */
.lang-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.lang-switch input:nth-of-type(2):checked ~ .vo-switch__thumb {
    transform: translateX(100%);
}

.lang-switch input:checked + .vo-switch__option {
    color: #243348;
}

.lang-switch input:focus-visible + .vo-switch__option {
    outline: 2px solid var(--vo-link);
    outline-offset: 2px;
    border-radius: 4px;
}

[data-theme="dark"] body,
[data-theme="dark"] #wrapper,
[data-theme="dark"] #content-wrapper,
[data-theme="dark"] #content,
[data-theme="dark"] .container-fluid {
    background-color: var(--vo-canvas) !important;
    color: var(--vo-text);
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] .h1,
[data-theme="dark"] .h2,
[data-theme="dark"] .h3,
[data-theme="dark"] .h4,
[data-theme="dark"] .h5,
[data-theme="dark"] .h6,
/* .vo-switch__option is excluded: a switch option is a <label>, but it sits on
   a light thumb when selected and needs the component's own ink, not the
   primary text colour this rule forces on every other label. */
[data-theme="dark"] label:not(.vo-switch__option),
[data-theme="dark"] legend,
[data-theme="dark"] .text-dark,
[data-theme="dark"] .text-body,
[data-theme="dark"] .text-gray-900,
[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-gray-700,
[data-theme="dark"] .font-weight-bold {
    color: var(--vo-text) !important;
}

[data-theme="dark"] .text-secondary,
[data-theme="dark"] .text-muted,
[data-theme="dark"] .text-gray-600,
[data-theme="dark"] .text-gray-500,
[data-theme="dark"] small,
[data-theme="dark"] .small {
    color: var(--vo-text-muted) !important;
}

/* SB-Admin light-grey background utilities (e.g. the transfer/send-in banner
   `.card-header-title.bg-gray-200`) — dark surface with readable text. */
[data-theme="dark"] .bg-gray-100,
[data-theme="dark"] .bg-gray-200,
[data-theme="dark"] .bg-gray-300,
[data-theme="dark"] .card-header-title {
    background-color: var(--vo-surface-elevated) !important;
    color: var(--vo-text) !important;
}

[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-light,
[data-theme="dark"] .card,
[data-theme="dark"] .info-box,
[data-theme="dark"] .settings-card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .popover,
[data-theme="dark"] .toast,
[data-theme="dark"] .list-group-item,
[data-theme="dark"] .jumbotron,
[data-theme="dark"] .breadcrumb,
[data-theme="dark"] .input-group-text,
[data-theme="dark"] .well {
    background-color: var(--vo-surface) !important;
    border-color: var(--vo-border) !important;
    color: var(--vo-text) !important;
}

/* Card headers/footers blend with the card body (flat header, divider only) —
   this removes the lighter slate strip that appeared behind card-header tabs. */
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer,
[data-theme="dark"] .settings-card__header,
[data-theme="dark"] .accordion > .card > .card-header {
    background-color: var(--vo-surface) !important;
    border-color: var(--vo-border-subtle) !important;
    color: var(--vo-text) !important;
}

/* Folder-tab cards (Current Stock, SKU Database, …): mirror light mode exactly.
   In light the rounded panel is the card BODY (surface); the card and its tab
   header are transparent, so the tabs sit on the page, the active tab merges
   into the body, and the "border under the tabs" comes from the inactive tabs'
   own bottom border. Reproduce that so there is no slate band behind the tabs
   and the card stays rounded. */
[data-theme="dark"] .card:has(> .card-header > .card-header-tabs),
[data-theme="dark"] .card:has(> .card-header > .nav-tabs) {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

[data-theme="dark"] .card:has(> .card-header > .card-header-tabs) > .card-header,
[data-theme="dark"] .card:has(> .card-header > .nav-tabs) > .card-header {
    background-color: transparent !important;
    border-bottom-color: transparent !important;
}

[data-theme="dark"] .card:has(> .card-header > .card-header-tabs) > .card-body,
[data-theme="dark"] .card:has(> .card-header > .nav-tabs) > .card-body {
    background-color: var(--vo-surface) !important;
}

/* Modals keep a slightly raised header/footer to separate them from the body. */
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    background-color: var(--vo-surface-elevated) !important;
    border-color: var(--vo-border) !important;
    color: var(--vo-text) !important;
}

[data-theme="dark"] .card,
[data-theme="dark"] .settings-card,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .popover {
    box-shadow: var(--vo-shadow) !important;
}

[data-theme="dark"] .settings-card__title,
[data-theme="dark"] .settings-card__label,
[data-theme="dark"] .settings-card .form-check-label,
[data-theme="dark"] .settings-form .form-check-label {
    color: var(--vo-text) !important;
}

[data-theme="dark"] .settings-card__desc,
[data-theme="dark"] .settings-card__desc .hint {
    color: var(--vo-text-muted) !important;
}

[data-theme="dark"] .settings-card__icon {
    background: rgba(33, 87, 235, 0.16) !important;
    color: var(--vo-link) !important;
}

[data-theme="dark"] .settings-card .form-check,
[data-theme="dark"] .settings-form .form-check {
    background-color: var(--vo-surface-elevated);
    border-color: var(--vo-border) !important;
}

[data-theme="dark"] .settings-card .form-check:hover,
[data-theme="dark"] .settings-form .form-check:hover,
[data-theme="dark"] .settings-card .form-check:has(.form-check-input:checked),
[data-theme="dark"] .settings-form .form-check:has(.form-check-input:checked) {
    background-color: var(--vo-surface-hover) !important;
    border-color: var(--vo-link) !important;
}

[data-theme="dark"] .navbar.topbar,
[data-theme="dark"] #topbar_navbar,
[data-theme="dark"] .second-topbar,
[data-theme="dark"] .settings_bar,
[data-theme="dark"] .subbar {
    background-color: var(--vo-surface) !important;
    border-color: var(--vo-border-subtle) !important;
    color: var(--vo-text) !important;
}

[data-theme="dark"] .topbar .dropdown-list .dropdown-header,
[data-theme="dark"] .sidebar .sidebar-heading {
    color: var(--vo-text-secondary) !important;
}

[data-theme="dark"] #dropdownMenuLink_base:hover {
    background: var(--vo-surface-hover) !important;
}

[data-theme="dark"] .account-avatar {
    background: var(--vo-surface-subtle) !important;
    border-color: var(--vo-border) !important;
}

[data-theme="dark"] .account-avatar i,
[data-theme="dark"] .account-avatar-market,
[data-theme="dark"] .account-trigger-title {
    color: var(--vo-text-secondary) !important;
}

[data-theme="dark"] .account-trigger-subtitle {
    color: var(--vo-text-muted) !important;
}

[data-theme="dark"] #dropdownMenuLink_base_id {
    background: var(--vo-surface-elevated) !important;
    border-color: var(--vo-border) !important;
}

[data-theme="dark"] #dropdownMenuLink_base_id .dropdown-item,
[data-theme="dark"] .dropdown-item {
    color: var(--vo-text-secondary) !important;
}

[data-theme="dark"] #dropdownMenuLink_base_id .dropdown-item i,
[data-theme="dark"] .dropdown-item i,
[data-theme="dark"] .dropdown-section-label {
    color: var(--vo-text-muted) !important;
}

[data-theme="dark"] #dropdownMenuLink_base_id .dropdown-item:hover,
[data-theme="dark"] #dropdownMenuLink_base_id .dropdown-item:focus,
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--vo-surface-hover) !important;
    color: var(--vo-text) !important;
}

[data-theme="dark"] .dropdown-menu-separator,
[data-theme="dark"] .dropdown-divider,
[data-theme="dark"] .topbar-divider {
    border-color: var(--vo-border) !important;
    background-color: var(--vo-border) !important;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .custom-select,
[data-theme="dark"] select.form-control,
[data-theme="dark"] select.select,
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] .select2-container--default .select2-selection--single,
[data-theme="dark"] .select2-container--default .select2-selection--multiple {
    background-color: var(--vo-surface-elevated) !important;
    border-color: var(--vo-input-border) !important;
    color: var(--vo-text) !important;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] .custom-select,
[data-theme="dark"] select.form-control,
[data-theme="dark"] select.select {
    border-color: var(--vo-input-border) !important;
}

/* Plain, unclassed <select> elements (e.g. the Yes/No table dropdowns) get the
   same recessed dark look and a vertically-centred chevron as the styled
   selects, instead of the browser's native grey control. */
[data-theme="dark"] select:not(.custom-select):not(.form-control):not(.select):not(.modern-select):not([multiple]) {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-color: var(--vo-surface-elevated) !important;
    border: 1px solid var(--vo-input-border) !important;
    border-radius: 8px !important;
    color: var(--vo-text) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2382909e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.6rem center !important;
    background-size: 12px !important;
    padding-right: 1.75rem !important;
}

/* Edit-dashboard-mode card-width menu — hard-coded light by default (dark-blue
   text unreadable on dark, light-blue selected "highlight"). Theme for dark. */
[data-theme="dark"] .dashboard-card-width-toggle-btn {
    background: var(--vo-surface-elevated) !important;
    border-color: var(--vo-border-strong) !important;
    color: var(--vo-primary-hover) !important;
}

[data-theme="dark"] .dashboard-card-width-toggle-btn:hover {
    background: var(--vo-surface-hover) !important;
}

[data-theme="dark"] .dashboard-card-width-menu {
    border-color: var(--vo-border) !important;
}

[data-theme="dark"] .dashboard-card-width-menu-option {
    color: var(--vo-text-secondary) !important;
}

[data-theme="dark"] .dashboard-card-width-menu-option:hover {
    background: var(--vo-surface-hover) !important;
    color: var(--vo-text) !important;
}

[data-theme="dark"] .dashboard-card-width-menu-option.is-active {
    background: var(--vo-surface-selected) !important;
    color: var(--vo-primary-hover) !important;
}

[data-theme="dark"] .select2-dropdown,
[data-theme="dark"] .ui-widget-content {
    background-color: var(--vo-surface-elevated) !important;
    border-color: var(--vo-border) !important;
    color: var(--vo-text) !important;
}

[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--vo-text-muted) !important;
    opacity: 1;
}

[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[readonly],
[data-theme="dark"] input:disabled,
[data-theme="dark"] select:disabled {
    background-color: var(--vo-surface-subtle) !important;
    color: var(--vo-text-muted) !important;
    opacity: 0.72;
}

/* Bootstrap custom-file upload widget (the signature "Change … Browse" field) —
   hard-coded white by default, so theme its label and Browse button dark. */
[data-theme="dark"] .custom-file-label {
    background-color: var(--vo-surface-subtle) !important;
    border-color: var(--vo-input-border) !important;
    color: var(--vo-text) !important;
}

[data-theme="dark"] .custom-file-label::after {
    background-color: var(--vo-surface-elevated) !important;
    border-left-color: var(--vo-input-border) !important;
    color: var(--vo-text-secondary) !important;
}

[data-theme="dark"] .custom-file-input:disabled ~ .custom-file-label,
[data-theme="dark"] .custom-file-input:disabled ~ .custom-file-label::after {
    background-color: var(--vo-surface-subtle) !important;
    color: var(--vo-text-muted) !important;
}

[data-theme="dark"] input[type="file"] {
    color: var(--vo-text-secondary) !important;
}

[data-theme="dark"] input[type="file"]::file-selector-button,
[data-theme="dark"] input[type="file"]::-webkit-file-upload-button {
    background-color: var(--vo-surface-elevated) !important;
    border: 1px solid var(--vo-input-border) !important;
    color: var(--vo-text-secondary) !important;
}

/* Checkboxes & radios use the accent colour (not a white native control). */
[data-theme="dark"] input[type="checkbox"],
[data-theme="dark"] input[type="radio"],
[data-theme="dark"] .form-check-input {
    accent-color: var(--vo-primary-strong);
}

/* No square focus box around round/tick controls. */
[data-theme="dark"] input[type="checkbox"]:focus,
[data-theme="dark"] input[type="checkbox"]:focus-visible,
[data-theme="dark"] input[type="radio"]:focus,
[data-theme="dark"] input[type="radio"]:focus-visible,
[data-theme="dark"] .form-check-input:focus,
[data-theme="dark"] .form-check-input:focus-visible,
[data-theme="dark"] .custom-control-input:focus ~ .custom-control-label::before,
[data-theme="dark"] .custom-control-input:focus-visible ~ .custom-control-label::before {
    outline: none !important;
    box-shadow: none !important;
}

/* Toggle switch (Bootstrap custom-switch) — track was light/white by default. */
[data-theme="dark"] .custom-control-label::before {
    background-color: var(--vo-surface-subtle) !important;
    border-color: var(--vo-input-border) !important;
}

[data-theme="dark"] .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--vo-primary-strong) !important;
    border-color: var(--vo-primary-strong) !important;
}

[data-theme="dark"] .custom-switch .custom-control-label::after {
    background-color: var(--vo-text-secondary) !important;
}

/* Only the switch KNOB is a solid white circle. A custom-checkbox draws its
   check as a white SVG background-image on ::after, so filling that same
   pseudo-element with a white background-color hid the tick (white on white,
   over the blue box). Scope this to .custom-switch so checkboxes keep their
   checkmark image. */
[data-theme="dark"] .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    background-color: #ffffff !important;
}

[data-theme="dark"] .custom-control-input:disabled ~ .custom-control-label::before {
    background-color: var(--vo-surface-subtle) !important;
    opacity: 0.6;
}

/* Rounder modals across the app. */
.modal-content {
    border-radius: 14px !important;
}

.modal-header {
    border-top-left-radius: 14px !important;
    border-top-right-radius: 14px !important;
}

.modal-footer {
    border-bottom-left-radius: 14px !important;
    border-bottom-right-radius: 14px !important;
}

[data-theme="dark"] .custom-select,
[data-theme="dark"] select.form-control,
[data-theme="dark"] select.select,
[data-theme="dark"] .select2-container--default .select2-selection--single {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8c3d3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
}

[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
[data-theme="dark"] .select2-container--default .select2-results__option,
[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
    color: var(--vo-text) !important;
}

/* select2 4.1.0-rc.0 (the version pinned on every page here) styles results by
   class — --selected / --highlighted — where 4.0.x used [aria-selected]. The
   old attribute selectors matched nothing, so select2's own light #ddd stayed
   on the selected row underneath our near-white text: invisible. */
[data-theme="dark"] .select2-container--default .select2-results__option--selected {
    background-color: var(--vo-surface-selected) !important;
    color: var(--vo-text) !important;
}

[data-theme="dark"] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--vo-surface-hover) !important;
    color: var(--vo-text) !important;
}

[data-theme="dark"] .select2-container--default .select2-results__option--disabled {
    color: var(--vo-text-disabled) !important;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .custom-select:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--vo-link) !important;
    box-shadow: 0 0 0 3px var(--vo-focus) !important;
}

[data-theme="dark"] .btn-primary {
    background-color: var(--vo-primary-strong) !important;
    border-color: var(--vo-primary-strong) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-primary:focus,
[data-theme="dark"] .btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--vo-primary-hover) !important;
    border-color: var(--vo-primary-hover) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn-light,
[data-theme="dark"] .dt-button,
[data-theme="dark"] button.dt-button,
[data-theme="dark"] div.dt-button,
[data-theme="dark"] a.dt-button {
    background: var(--vo-surface-elevated) !important;
    border-color: var(--vo-border-strong) !important;
    color: var(--vo-text-secondary) !important;
}

[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .btn-light:hover,
[data-theme="dark"] .dt-button:hover,
[data-theme="dark"] button.dt-button:hover,
[data-theme="dark"] div.dt-button:hover,
[data-theme="dark"] a.dt-button:hover {
    background: var(--vo-surface-hover) !important;
    border-color: var(--vo-border-strong) !important;
    color: var(--vo-text) !important;
}

/* Group-header SKU-count badge matches the "BC" (badge-info) badge. */
[data-theme="dark"] .cs-group-count {
    background: var(--vo-info-surface) !important;
    color: var(--vo-info-text) !important;
}

[data-theme="dark"] .btn-outline-primary {
    border-color: var(--vo-link) !important;
    color: var(--vo-link) !important;
}

[data-theme="dark"] .btn-outline-primary:hover,
[data-theme="dark"] .btn-outline-primary:focus {
    background-color: var(--vo-primary-strong) !important;
    border-color: var(--vo-primary-strong) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-outline-secondary,
[data-theme="dark"] .btn-outline-dark {
    border-color: var(--vo-border-strong) !important;
    color: var(--vo-text-secondary) !important;
}

[data-theme="dark"] .btn-outline-warning {
    border-color: var(--vo-warning-text) !important;
    color: var(--vo-warning-text) !important;
    background-color: transparent !important;
}

[data-theme="dark"] .btn-outline-warning:hover,
[data-theme="dark"] .btn-outline-warning:focus {
    background-color: var(--vo-warning-surface) !important;
    color: var(--vo-warning-text) !important;
}

[data-theme="dark"] .btn-outline-danger {
    border-color: var(--vo-danger-text) !important;
    color: var(--vo-danger-text) !important;
    background-color: transparent !important;
}

[data-theme="dark"] .btn-outline-danger:hover,
[data-theme="dark"] .btn-outline-danger:focus {
    background-color: var(--vo-danger-surface) !important;
    color: var(--vo-danger-text) !important;
}

[data-theme="dark"] .btn-outline-success {
    border-color: var(--vo-success-text) !important;
    color: var(--vo-success-text) !important;
    background-color: transparent !important;
}

[data-theme="dark"] .btn-link {
    color: var(--vo-link) !important;
}

[data-theme="dark"] .btn:disabled,
[data-theme="dark"] .btn.disabled {
    opacity: 0.48;
}

[data-theme="dark"] .close {
    color: var(--vo-text) !important;
    text-shadow: none;
    opacity: 0.72;
}

[data-theme="dark"] .nav-tabs,
[data-theme="dark"] .card-header-tabs {
    border-color: var(--vo-border) !important;
}

[data-theme="dark"] .nav-tabs .nav-link,
[data-theme="dark"] .nav-pills .nav-link {
    color: var(--vo-text-secondary) !important;
}

[data-theme="dark"] .nav-tabs .nav-link:hover,
[data-theme="dark"] .nav-tabs .nav-link:focus {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--vo-text) !important;
}

/* Inactive tabs stay flush with the page (no fill). */
[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--vo-primary-hover) !important;
}

/* Folder-style card tabs: the ACTIVE tab takes the card's surface colour and
   merges into the card body below (bottom border = surface), exactly like the
   white active tab in light mode. */
[data-theme="dark"] .card-header .nav-tabs .nav-link.active,
[data-theme="dark"] ul.card-header-tabs .nav-link.active {
    background-color: var(--vo-surface) !important;
    color: var(--vo-primary-hover) !important;
    border-color: var(--vo-border) var(--vo-border) var(--vo-surface) !important;
}

/* Unselected tabs carry no bottom border. */
[data-theme="dark"] .card-header .nav-tabs .nav-link:not(.active),
[data-theme="dark"] ul.card-header-tabs .nav-link:not(.active) {
    border-bottom-color: transparent !important;
}

/* The active tab's icon takes the accent colour too (not just the label). */
[data-theme="dark"] .card-header .nav-tabs .nav-link.active i,
[data-theme="dark"] ul.card-header-tabs .nav-link.active i,
[data-theme="dark"] .nav-tabs .nav-link.active i {
    color: var(--vo-primary-hover) !important;
}

/* Pills genuinely use a filled active state, so keep the accent fill. */
[data-theme="dark"] .nav-pills .nav-link.active {
    background-color: var(--vo-primary-strong) !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

[data-theme="dark"] .table,
[data-theme="dark"] table.dataTable,
[data-theme="dark"] table.dataTable tbody tr,
[data-theme="dark"] table.dataTable tbody td,
[data-theme="dark"] table.dataTable tbody th {
    background-color: var(--vo-surface) !important;
    color: var(--vo-text-secondary) !important;
}

[data-theme="dark"] .table thead th,
[data-theme="dark"] table.dataTable thead th,
[data-theme="dark"] table.dataTable thead td,
[data-theme="dark"] .card .table.dashboard-table thead th {
    background-color: var(--vo-table-header) !important;
    border-color: var(--vo-border-subtle) !important;
    color: var(--vo-text-secondary) !important;
}

/* Active / sorted column headers use the blue accent (like the reference table) */
[data-theme="dark"] table.dataTable thead th.dt-ordering-asc,
[data-theme="dark"] table.dataTable thead th.dt-ordering-desc,
[data-theme="dark"] table.dataTable thead th.sorting_asc,
[data-theme="dark"] table.dataTable thead th.sorting_desc,
[data-theme="dark"] .table thead th.sorting_asc,
[data-theme="dark"] .table thead th.sorting_desc {
    color: var(--vo-primary-hover) !important;
}

[data-theme="dark"] .table th,
[data-theme="dark"] .table td,
[data-theme="dark"] .table-bordered,
[data-theme="dark"] .table-bordered th,
[data-theme="dark"] .table-bordered td,
[data-theme="dark"] div.dataTables_wrapper table.dataTable.table-bordered > thead > tr > th,
[data-theme="dark"] div.dataTables_wrapper table.dataTable.table-bordered > thead > tr > td,
[data-theme="dark"] div.dataTables_wrapper table.dataTable.table-bordered > tbody > tr > th,
[data-theme="dark"] div.dataTables_wrapper table.dataTable.table-bordered > tbody > tr > td,
[data-theme="dark"] div.dataTables_wrapper table.dataTable.table-bordered > tfoot > tr > th,
[data-theme="dark"] div.dataTables_wrapper table.dataTable.table-bordered > tfoot > tr > td {
    border-color: var(--vo-border-subtle) !important;
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd),
[data-theme="dark"] table.dataTable.stripe > tbody > tr.odd > *,
[data-theme="dark"] table.dataTable.display > tbody > tr.odd > * {
    background-color: var(--vo-table-alt) !important;
    box-shadow: none !important;
}

[data-theme="dark"] .table-hover tbody tr:hover,
[data-theme="dark"] table.dataTable.hover > tbody > tr:hover > *,
[data-theme="dark"] table.dataTable.display > tbody > tr:hover > *,
[data-theme="dark"] #wh_stock_table tbody tr:hover {
    background-color: var(--vo-table-row-hover) !important;
    box-shadow: none !important;
    color: var(--vo-text) !important;
}

[data-theme="dark"] table.dataTable {
    --dt-row-selected: 23, 38, 65;
    --dt-row-selected-text: 244, 247, 251;
    --dt-row-selected-link: 87, 154, 233;
}

[data-theme="dark"] table.dataTable tbody > tr.selected,
[data-theme="dark"] table.dataTable tbody > tr > .selected {
    background: var(--vo-surface-selected) !important;
    color: var(--vo-text) !important;
    box-shadow: inset 3px 0 0 var(--vo-primary-strong) !important;
}

[data-theme="dark"] table.dataTable > tbody > tr > td.select-checkbox::before,
[data-theme="dark"] table.dataTable > tbody > tr > th.select-checkbox::before {
    background-color: var(--vo-surface-elevated) !important;
    border-color: var(--vo-border-strong) !important;
}

[data-theme="dark"] table.dataTable tr.dtrg-group td {
    background-color: var(--vo-table-group) !important;
    color: var(--vo-text) !important;
}

[data-theme="dark"] table.dataTable tr.dtrg-group:hover td {
    background-color: var(--vo-table-group-hover) !important;
}

[data-theme="dark"] .table.dashboard-table .totals_row_thicker_border td {
    background-color: var(--vo-table-total) !important;
    color: var(--vo-text) !important;
}

[data-theme="dark"] .dataTables_wrapper,
[data-theme="dark"] .dt-container,
[data-theme="dark"] .dataTables_info,
[data-theme="dark"] .dataTables_length,
[data-theme="dark"] .dt-info,
[data-theme="dark"] .dt-length,
[data-theme="dark"] .dt-search,
[data-theme="dark"] .dt-paging {
    color: var(--vo-text-muted) !important;
}

/* DataTables 2.x (loaded from the CDN) activates its dark palette only on
   html.dark / [data-bs-theme=dark], which this app does not set — so its white
   defaults leak through. Flip the DataTables tokens and neutralise the white
   scroll wrappers and floating clones so the dark surface shows instead. */
[data-theme="dark"] {
    --dt-html-background: var(--vo-surface);
    --dtfc_background: var(--vo-surface);
    --dtfc-thead-cell_background: var(--vo-table-header);
    --dtfc-tbody-cell_background: var(--vo-surface);
}

[data-theme="dark"] .dt-scroll,
[data-theme="dark"] .dt-scroll-head,
[data-theme="dark"] .dt-scroll-body,
[data-theme="dark"] .dt-scroll-foot,
[data-theme="dark"] .dataTables_scroll,
[data-theme="dark"] .dataTables_scrollHead,
[data-theme="dark"] .dataTables_scrollHeadInner,
[data-theme="dark"] .dataTables_scrollBody,
[data-theme="dark"] .dataTables_scrollFoot,
[data-theme="dark"] .dt-layout-row,
[data-theme="dark"] .dt-layout-cell,
[data-theme="dark"] .card > .card-body,
[data-theme="dark"] div.dts div.dt-scroll-body table,
[data-theme="dark"] div.dts div.dataTables_scrollBody table {
    background-color: transparent !important;
}

/* Floating / locked sticky-header clones use a hard-coded white — keep them
   opaque dark so scrolled rows don't show through. */
[data-theme="dark"] table.dataTable.fixedHeader-floating,
[data-theme="dark"] table.dataTable.fixedHeader-locked {
    background-color: var(--vo-surface) !important;
}

/* Button-info popup + fixed (centered) column-visibility collection */
[data-theme="dark"] div.dt-button-info,
[data-theme="dark"] div.dropdown-menu.dt-button-collection.fixed {
    background-color: var(--vo-surface-elevated) !important;
    border-color: var(--vo-border) !important;
    color: var(--vo-text) !important;
}

/* Columns modal — jQuery multi-select widget (white lists by default). */
[data-theme="dark"] .ms-container .ms-selectable,
[data-theme="dark"] .ms-container .ms-selection {
    background: transparent !important;
    color: var(--vo-text-secondary) !important;
}

[data-theme="dark"] .ms-container .ms-list {
    background: transparent !important;
    border-color: var(--vo-border) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

[data-theme="dark"] .ms-container .ms-list.ms-focus {
    border-color: var(--vo-primary-strong) !important;
    box-shadow: 0 0 0 3px var(--vo-focus) !important;
}

[data-theme="dark"] .ms-container .ms-selectable li.ms-elem-selectable,
[data-theme="dark"] .ms-container .ms-selection li.ms-elem-selection {
    border-bottom-color: var(--vo-border-subtle) !important;
    color: var(--vo-text-secondary) !important;
}

[data-theme="dark"] .ms-container .ms-selectable li.ms-hover,
[data-theme="dark"] .ms-container .ms-selection li.ms-hover {
    background-color: var(--vo-primary-strong) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .ms-container .ms-selectable li.disabled,
[data-theme="dark"] .ms-container .ms-selection li.disabled {
    background-color: var(--vo-surface-subtle) !important;
    color: var(--vo-text-disabled) !important;
}

[data-theme="dark"] .ms-container .ms-optgroup-label {
    color: var(--vo-text-muted) !important;
}

[data-theme="dark"] .dataTables_wrapper .dataTables_processing,
[data-theme="dark"] .dt-processing,
[data-theme="dark"] div.dt-button-collection,
[data-theme="dark"] .dtsp-searchPane,
[data-theme="dark"] .dtsp-searchPanes {
    background-color: var(--vo-surface-elevated) !important;
    border-color: var(--vo-border) !important;
    color: var(--vo-text) !important;
}

[data-theme="dark"] .page-link,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button,
[data-theme="dark"] .dt-paging-button {
    background-color: var(--vo-surface-elevated) !important;
    border-color: var(--vo-border) !important;
    color: var(--vo-text-secondary) !important;
}

[data-theme="dark"] .page-link:hover,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
[data-theme="dark"] .dt-paging-button:hover:not(.disabled) {
    background-color: var(--vo-surface-hover) !important;
    border-color: var(--vo-border-strong) !important;
    color: var(--vo-text) !important;
}

[data-theme="dark"] .page-item.active .page-link,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
[data-theme="dark"] .dt-paging-button.current {
    background-color: var(--vo-primary-strong) !important;
    border-color: var(--vo-primary-strong) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .page-item.disabled .page-link,
[data-theme="dark"] .paginate_button.disabled,
[data-theme="dark"] .dt-paging-button.disabled {
    background-color: var(--vo-surface) !important;
    color: var(--vo-text-muted) !important;
    opacity: 0.55;
}

[data-theme="dark"] .alert-success,
[data-theme="dark"] .table-success,
[data-theme="dark"] .table-success > th,
[data-theme="dark"] .table-success > td {
    background-color: var(--vo-success-surface) !important;
    border-color: #285b49 !important;
    color: var(--vo-success-text) !important;
}

/* Solid success colour (text + filled buttons) */
[data-theme="dark"] .text-success {
    color: var(--vo-success-text) !important;
}

[data-theme="dark"] .btn-success {
    background-color: var(--vo-success-text) !important;
    border-color: var(--vo-success-text) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .btn-success:hover,
[data-theme="dark"] .btn-success:focus,
[data-theme="dark"] .btn-success:not(:disabled):not(.disabled):active {
    background-color: #17b57b !important;
    border-color: #17b57b !important;
    color: #ffffff !important;
}

[data-theme="dark"] .alert-warning,
[data-theme="dark"] .table-warning,
[data-theme="dark"] .table-warning > th,
[data-theme="dark"] .table-warning > td {
    background-color: var(--vo-warning-surface) !important;
    border-color: #59491f !important;
    color: var(--vo-warning-text) !important;
}

[data-theme="dark"] .alert-danger,
[data-theme="dark"] .table-danger,
[data-theme="dark"] .table-danger > th,
[data-theme="dark"] .table-danger > td {
    background-color: var(--vo-danger-surface) !important;
    border-color: #66343e !important;
    color: var(--vo-danger-text) !important;
}

[data-theme="dark"] .alert-info,
[data-theme="dark"] .table-info,
[data-theme="dark"] .table-info > th,
[data-theme="dark"] .table-info > td {
    background-color: var(--vo-info-surface) !important;
    border-color: #285566 !important;
    color: var(--vo-info-text) !important;
}

/* .table-primary had no dark rule, so it fell back to Bootstrap's light #b8daff.
   Its siblings (.table-danger/.table-warning/.table-success/.table-info) all get
   dark treatment above, which is why the "High stock level" reach pill was the
   only one rendering light with unreadable text. Give it the info palette to
   match. */
[data-theme="dark"] .table-primary,
[data-theme="dark"] .table-primary > th,
[data-theme="dark"] .table-primary > td {
    background-color: var(--vo-info-surface) !important;
    border-color: #285566 !important;
    color: var(--vo-info-text) !important;
}

/* Badges are tinted outlines, not solid fills: the hue carries in the text and
   a faint wash of the same colour. Solid pills fight each other when a table
   column is a stack of them, and Bootstrap's own badge colours are tuned for a
   white page. Alerts and table rows keep the solid surfaces above — they are
   large enough to hold a fill without shouting. */
[data-theme="dark"] .badge {
    border: 1px solid transparent;
}

[data-theme="dark"] .badge-success {
    background-color: color-mix(in srgb, var(--vo-success-text) 14%, transparent) !important;
    border-color: color-mix(in srgb, var(--vo-success-text) 32%, transparent) !important;
    color: var(--vo-success-text) !important;
}

[data-theme="dark"] .badge-warning {
    background-color: color-mix(in srgb, var(--vo-warning-text) 14%, transparent) !important;
    border-color: color-mix(in srgb, var(--vo-warning-text) 32%, transparent) !important;
    color: var(--vo-warning-text) !important;
}

[data-theme="dark"] .badge-danger {
    background-color: color-mix(in srgb, var(--vo-danger-text) 14%, transparent) !important;
    border-color: color-mix(in srgb, var(--vo-danger-text) 32%, transparent) !important;
    color: var(--vo-danger-text) !important;
}

[data-theme="dark"] .badge-info {
    background-color: color-mix(in srgb, var(--vo-info-text) 14%, transparent) !important;
    border-color: color-mix(in srgb, var(--vo-info-text) 32%, transparent) !important;
    color: var(--vo-info-text) !important;
}

[data-theme="dark"] .badge-primary {
    background-color: color-mix(in srgb, var(--vo-link) 14%, transparent) !important;
    border-color: color-mix(in srgb, var(--vo-link) 32%, transparent) !important;
    color: var(--vo-link) !important;
}

/* .badge-secondary and .badge-light are both neutral greys, and the PO status
   flow puts them side by side ("Planned" vs "Ordered") with only these two
   carrying no hue — Shipped is blue, Received green. With no hue to tell them
   apart they split by tone instead, the same way light mode does: Planned is a
   dark chip with light text, Ordered a light chip with dark ink. Both stay
   filled — as a bare outline, Planned read as a disabled button rather than a
   live status. */
[data-theme="dark"] .badge-secondary,
[data-theme="dark"] .badge-dark {
    background-color: color-mix(in srgb, var(--vo-text-muted) 28%, transparent) !important;
    border-color: color-mix(in srgb, var(--vo-text-muted) 45%, transparent) !important;
    color: var(--vo-text) !important;
}

[data-theme="dark"] .badge-light {
    background-color: color-mix(in srgb, var(--vo-text-secondary) 75%, transparent) !important;
    border-color: color-mix(in srgb, var(--vo-text-secondary) 88%, transparent) !important;
    color: #16202b !important;
}

/* A quieter sibling of .badge-success, for "in progress" where .badge-success
   means "done" — e.g. Amazon receiving goods on stock transfers. These used to
   borrow .table-success, a table-row class, which is why they never tracked the
   badge palette. Both themes keep it green but a step down from the real thing. */
.badge-success-muted {
    background-color: var(--vo-success-surface);
    color: var(--vo-success-text);
}

/* Icon + count badges (e.g. FBA send-in status: a "×"/"+" glyph next to a
   count pill) render the glyph and the pill as inline elements on different
   baselines, so they look misaligned. Lay them out as one centered flex row. */
.badge:has(> .badge-pill) {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

/* Centre the count itself within the pill. */
.badge:has(> .badge-pill) > .badge-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

[data-theme="dark"] .badge-success-muted {
    background-color: color-mix(in srgb, var(--vo-success-text) 7%, transparent) !important;
    border-color: color-mix(in srgb, var(--vo-success-text) 18%, transparent) !important;
    color: color-mix(in srgb, var(--vo-success-text) 62%, var(--vo-text-muted)) !important;
}

/* +/- stock-change indicators in the FBA-stock columns (current stock AND
   re-order template). Defined globally — the re-order template isn't inside
   .current-stock-overview-shell, and both pages should render these the same.
   They wear the tinted status-badge look: a "+120" reads like a success badge,
   neutrals (on-hold / bundles / negatives) like a secondary badge. */
.cs-change-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 0.3rem;
    padding: 0.12rem 0.4rem;
    border: 1px solid transparent;
    border-radius: 5px;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1;
    vertical-align: middle;
}

/* These badges sit in flex cells next to a dotted-underline number. The cell
   defaults to align-items: stretch, which left the badge floating above the
   number's baseline — centre the row so the badge and the number line up. */
.d-flex:has(> .cs-change-badge) {
    align-items: center;
}

.cs-change-pos { background: #e3f9ec; color: #16b356; }
.cs-change-neutral { background: #e6e9ee; color: #6c757d; }

[data-theme="dark"] .cs-change-pos {
    background: color-mix(in srgb, var(--vo-success-text) 14%, transparent);
    border-color: color-mix(in srgb, var(--vo-success-text) 32%, transparent);
    color: var(--vo-success-text);
}

[data-theme="dark"] .cs-change-neutral {
    background: color-mix(in srgb, var(--vo-text-muted) 22%, transparent);
    border-color: color-mix(in srgb, var(--vo-text-muted) 45%, transparent);
    color: var(--vo-text-secondary);
}

[data-theme="dark"] .table-secondary,
[data-theme="dark"] .table-light,
[data-theme="dark"] .table-light-grey {
    background-color: var(--vo-surface-subtle) !important;
    border-color: var(--vo-border) !important;
    color: var(--vo-text-secondary) !important;
}

/* Action glyphs — copy-to-clipboard, clone, link and external-link icons —
   are plain icon-buttons with no colour of their own, so they were nearly
   invisible on dark. Give them the muted icon colour, brightening on hover. */
[data-theme="dark"] .fa-copy,
[data-theme="dark"] .fa-clone,
[data-theme="dark"] .fa-link,
[data-theme="dark"] .fa-external-link-alt,
[data-theme="dark"] .fa-clipboard,
[data-theme="dark"] .fa-clipboard-list,
[data-theme="dark"] .fa-question-circle,
[data-theme="dark"] .fa-info-circle,
[data-theme="dark"] .big-header-icon,
[data-theme="dark"] .mb-permissions-copy-btn,
[data-theme="dark"] .twofa-copy-btn {
    color: var(--vo-icon-muted) !important;
}

[data-theme="dark"] .fa-copy:hover,
[data-theme="dark"] .fa-clone:hover,
[data-theme="dark"] .fa-link:hover,
[data-theme="dark"] .fa-external-link-alt:hover,
[data-theme="dark"] .fa-clipboard:hover,
[data-theme="dark"] .fa-clipboard-list:hover,
[data-theme="dark"] .fa-question-circle:hover,
[data-theme="dark"] .fa-info-circle:hover,
[data-theme="dark"] .big-header-icon:hover,
[data-theme="dark"] .mb-permissions-copy-btn:hover,
[data-theme="dark"] .twofa-copy-btn:hover {
    color: var(--vo-icon-active) !important;
}

/* Inside a coloured button the glyph is part of the label, so it must match the
   button's own text (white on btn-primary/btn-success) — the muted icon colour
   above washed the copy icon out on blue/green buttons. */
[data-theme="dark"] .btn .fa-copy,
[data-theme="dark"] .btn .fa-clone,
[data-theme="dark"] .btn .fa-link,
[data-theme="dark"] .btn .fa-external-link-alt,
[data-theme="dark"] .btn .fa-clipboard,
[data-theme="dark"] .btn .fa-clipboard-list,
[data-theme="dark"] .btn .fa-copy:hover,
[data-theme="dark"] .btn .fa-clone:hover {
    color: inherit !important;
}

[data-theme="dark"] .popover-header,
[data-theme="dark"] .tooltip-inner,
[data-theme="dark"] .ui-datepicker-header,
[data-theme="dark"] .bootstrap-datetimepicker-widget,
[data-theme="dark"] .swal2-popup {
    background-color: var(--vo-surface-elevated) !important;
    border-color: var(--vo-border) !important;
    color: var(--vo-text) !important;
}

/* Tooltip arrow must match the tooltip body, not stay Bootstrap's default black. */
[data-theme="dark"] .bs-tooltip-top .arrow::before,
[data-theme="dark"] .bs-tooltip-auto[x-placement^="top"] .arrow::before {
    border-top-color: var(--vo-surface-elevated) !important;
}
[data-theme="dark"] .bs-tooltip-right .arrow::before,
[data-theme="dark"] .bs-tooltip-auto[x-placement^="right"] .arrow::before {
    border-right-color: var(--vo-surface-elevated) !important;
}
[data-theme="dark"] .bs-tooltip-bottom .arrow::before,
[data-theme="dark"] .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
    border-bottom-color: var(--vo-surface-elevated) !important;
}
[data-theme="dark"] .bs-tooltip-left .arrow::before,
[data-theme="dark"] .bs-tooltip-auto[x-placement^="left"] .arrow::before {
    border-left-color: var(--vo-surface-elevated) !important;
}

[data-theme="dark"] .popover-body,
[data-theme="dark"] .ui-datepicker,
[data-theme="dark"] .ui-datepicker td a,
[data-theme="dark"] .ui-datepicker td span {
    background-color: var(--vo-surface) !important;
    color: var(--vo-text-secondary) !important;
}

/* The empty part of the track has to read as a channel. --vo-surface-subtle is
   darker than the row the bar sits on, so it used to vanish into it; this sits
   a step lighter than the row instead, with a border to pin the ends down when
   a bar is short or empty. */
[data-theme="dark"] .progress {
    background-color: var(--vo-surface-hover) !important;
    border: 1px solid var(--vo-border) !important;
}

/* The % Received bars on the FBA Send-In / stock-transfer tables draw from the
   same status tokens as the badges beside them, so received is the same green
   as a "Received" badge. They carry a much heavier fill than the badges do:
   a bar is a big surface read at a glance across a long table, where a badge's
   14% wash just looks muddy.
   Labels are white by explicit design choice. Note this is the low-contrast side
   of the trade: against the 85% fill a white label measures ~2.9:1 where dark ink
   gives ~6.8:1. If the bars are ever dialled back below ~65% fill, white starts
   passing on its own.
   Scoped to .progress-bar: bare .bg-success is also used on table cells and
   pills elsewhere, which should keep Bootstrap's meaning. */
[data-theme="dark"] .progress-bar.bg-success {
    background-color: color-mix(in srgb, var(--vo-success-text) 85%, transparent) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .progress-bar.bg-primary {
    background-color: color-mix(in srgb, var(--vo-link) 85%, transparent) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .progress-bar.bg-danger {
    background-color: color-mix(in srgb, var(--vo-danger-text) 85%, transparent) !important;
    color: #ffffff !important;
}

[data-theme="dark"] .progress-bar.bg-secondary {
    background-color: color-mix(in srgb, var(--vo-text-muted) 85%, transparent) !important;
    color: #ffffff !important;
}

/* On-hold has no badge counterpart; a heavier neutral keeps it distinct from
   the lighter "being received" segment next to it. */
[data-theme="dark"] .progress-bar.bg-black {
    background-color: color-mix(in srgb, var(--vo-text-disabled) 45%, transparent) !important;
    color: var(--vo-text) !important;
}

[data-theme="dark"] hr,
[data-theme="dark"] .border,
[data-theme="dark"] .border-top,
[data-theme="dark"] .border-right,
[data-theme="dark"] .border-bottom,
[data-theme="dark"] .border-left {
    border-color: var(--vo-border) !important;
}

[data-theme="dark"] .footer,
[data-theme="dark"] footer.sticky-footer {
    background-color: var(--vo-surface) !important;
    color: var(--vo-text-muted) !important;
}

[data-theme="dark"] .scroll-to-top {
    background-color: var(--vo-surface-hover) !important;
    color: var(--vo-text) !important;
}

[data-theme="dark"] canvas {
    color-scheme: dark;
}

@media (max-width: 767.98px) {
    .language-settings-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .language-settings-actions > .btn {
        align-self: flex-start;
    }

    /* Stacked, the vertical rule between language and theme becomes a
       horizontal one. */
    .preferences-row {
        flex-direction: column;
        gap: 1rem;
    }

    .preferences-row__item--divided {
        border-left: 0;
        border-top: 1px solid var(--vo-border);
        padding-left: 0;
        padding-top: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
    }

    body,
    .card,
    .modal-content,
    .dropdown-menu,
    .popover,
    .form-control,
    .custom-select,
    .btn,
    .table,
    .vo-switch__thumb {
        transition-duration: 0.01ms !important;
    }
}

/* Dropdown overscroll containment (VOD-4740). Scrolling fast to the top/bottom
   of a scrollable dropdown used to rubber-band and reveal a transparent gap
   past the menu's background. Contain the scroll chain and pin a solid surface
   so the menu edge is never see-through. */
.dropdown-menu,
.select2-results__options,
.dt-button-collection,
.cs-colvis-menu {
    overscroll-behavior: contain;
    background-clip: padding-box;
}

/* App-standard checkbox look for plain native checkboxes (VOD-4740). Gives every
   bare <input type="checkbox"> the rounded box + white tick used across the app,
   in both themes. Excludes Bootstrap's custom-control-input (which is hidden and
   draws its box on the label — restyling it would double the box); the datatable
   select-checkbox is a <td> pseudo-element, not a real input, so it's untouched. */
input[type="checkbox"]:not(.custom-control-input) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 1.05rem;
    height: 1.05rem;
    border: 1px solid var(--vo-border-strong, #c6d0dc);
    border-radius: 5px;
    background-color: var(--vo-surface, #ffffff);
    vertical-align: middle;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease;
    flex: 0 0 auto;
}

input[type="checkbox"]:not(.custom-control-input):checked {
    background-color: var(--vo-primary-strong, #00629e) !important;
    border-color: var(--vo-primary-strong, #00629e) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 0.72rem !important;
}

/* Pointer cursor for Bootstrap custom-control / form-check checkboxes: the real
   input is hidden and the box + click target sit on the label, so it needs the
   cursor too (native checkboxes get it from the block above). Disabled ones keep
   the default cursor via Bootstrap's higher-specificity :disabled rule. */
.custom-checkbox .custom-control-input,
.custom-checkbox .custom-control-label,
.form-check .form-check-input[type="checkbox"],
.form-check .form-check-input[type="checkbox"] ~ .form-check-label {
    cursor: pointer;
}

input[type="checkbox"]:not(.custom-control-input):focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--vo-focus);
}

input[type="checkbox"]:not(.custom-control-input):disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Updated "Choose file" control (VOD-4740): the browse button carries the LEFT
   rounding, the field carries the RIGHT rounding, the inner corners are square
   and both share one height. Overrides the fully-rounded base rule (7px) in
   base_css_imports.html via later source order + !important. */
input[type="file"] {
    height: auto;
    padding: 0 !important;
    border: 1px solid var(--vo-input-border, #c3ccd9);
    border-radius: 8px;
    background-color: var(--vo-surface, #ffffff);
    overflow: hidden;
    line-height: 1.6;
    font-size: 0.9rem;
    color: var(--vo-text-secondary, #4f5f75);
}

input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
    border: 0 !important;
    border-right: 1px solid var(--vo-input-border, #c3ccd9) !important;
    /* Square button; the input's own border-radius + overflow:hidden clips the
       left corners to the rounded frame. A radius on the button itself fought
       that clip and read as an odd double-rounded edge. */
    border-radius: 0 !important;
    background-color: var(--vo-surface-subtle, #f3f6fa) !important;
    color: var(--vo-text, #172033) !important;
    padding: 0.55rem 0.95rem !important;
    margin-right: 0.85rem !important;
    cursor: pointer;
    transition: background-color 0.12s ease;
}

input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover {
    background-color: var(--vo-surface-hover, #eaf2f8) !important;
}

/* Calendar affordance inside date-picker inputs (VOD-4740): show a calendar
   glyph at the right end of the Date Ordered / Shipped / Received cells (and any
   .input-group.date field) instead of a bare text box, consistently across all
   three. The picker still opens on click. */
.input-group.date > input.form-control {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2382909e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.55rem center;
    background-size: 14px;
    padding-right: 1.9rem !important;
}

/* Fixed-height modals with internal scroll (VOD-4740). Tall modals (Manage
   Suppliers, Multi-Channel Import Source, Ship-From Addresses, FBA Send Email
   Template, Moneyback emails, …) used to overflow the viewport so the whole
   PAGE scrolled. Cap the modal at the viewport and let the body scroll inside,
   keeping the header/footer pinned — the same behaviour as Bootstrap's
   .modal-dialog-scrollable, applied to every modal. */
.modal-dialog:not(.modal-fullscreen) {
    max-height: calc(100vh - 3.5rem);
}

.modal-dialog:not(.modal-fullscreen) .modal-content {
    max-height: calc(100vh - 3.5rem);
    overflow: hidden;
}

.modal-dialog:not(.modal-fullscreen) .modal-body {
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Moneyback case action buttons (VOD-4740): the status badge, edit-case badge
   and mark-as-checked button rendered at different heights with off-centre
   labels and inconsistent hover cursors. Normalise every action in the case
   button group to one height with centred content; give the clickable ones a
   pointer cursor. Rendered by get_case_processing_status_badge() across all the
   moneyback category overviews. */
[id^="case_button_c_"] {
    gap: 0.15rem;
}

[id^="case_button_c_"] > * {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

[id^="case_button_c_"] [onclick]:not([onclick=""]) {
    cursor: pointer;
}

/* Reimbursement "Message to Seller Service" template (VOD-4740): it's a readonly
   textarea the user reads and copies, not a disabled input, but the dark
   readonly styling (muted colour + 0.72 opacity) made the template text hard to
   read. Restore full-strength, readable text. Shared #seller_message_body id
   across the amazon_case_text templates. */
[data-theme="dark"] textarea#seller_message_body[readonly] {
    color: var(--vo-text) !important;
    opacity: 1 !important;
}

/* Email message bodies render inside <pre> (moneyback Emails modal). Bootstrap's
   default pre colour (#212529) was near-invisible on the dark surface, making
   received email text unreadable. Inherit the theme text colour in dark mode. */
[data-theme="dark"] pre {
    color: var(--vo-text);
}

/* App-standard text-input styling (VOD-4740): Bootstrap's default .form-control
   radius (~4.5px) read flatter than the 8px used by the dropdowns, datatables
   and cards, and its default border colour drifted from the themed token, so
   edit forms (warehouse, supplier, procurement payment, create event, manual
   setup, forecast import, …) and the access pages looked inconsistent. Unify
   every text input on the 8px radius, the themed border and the surface
   background. Not !important, so .input-group children still get their squared
   inner corners from Bootstrap's higher-specificity rules and dark mode keeps
   its own border/background overrides. */
.form-control {
    border-radius: 8px;
    border: 1px solid var(--vo-border-strong);
    background-color: var(--vo-surface);
}

/* API-connection (and other settings-card) logos are dark-on-transparent PNGs
   that vanish on the dark surface (VOD-4740). Give the logo a light backing in
   dark mode so it stays legible. */
[data-theme="dark"] .settings-card__logo {
    background: #eef2f7;
    border-radius: 8px;
    padding: 5px;
}

/* In-row Save / Undo(revert) action badges (VOD-4740): a matched outlined pair —
   Save green, Undo red — each with a soft same-hue fill, a coloured border and a
   white glyph. Undo previously carried a solid-coral override that clashed with
   the outlined Save; both now share the same treatment. Covers PO
   (save_changes_btn / cancel_changes_btn), current-stock (save_row_changes) and
   the procurement/multi-channel tables (save_changes_badge). Targets the .badge
   containers only, never the shared-class <i> glyphs. */
[data-theme="dark"] .badge.save_changes_btn,
[data-theme="dark"] .badge.save_changes_badge,
[data-theme="dark"] div[name="save_row_changes"].badge {
    background-color: color-mix(in srgb, var(--vo-success-text) 15%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--vo-success-text) 45%, transparent) !important;
}

[data-theme="dark"] .badge.cancel_changes_btn {
    background-color: color-mix(in srgb, var(--vo-danger-text) 15%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--vo-danger-text) 45%, transparent) !important;
}

[data-theme="dark"] .badge.save_changes_btn .fas,
[data-theme="dark"] .badge.save_changes_badge .fas,
[data-theme="dark"] div[name="save_row_changes"].badge .fas,
[data-theme="dark"] .badge.cancel_changes_btn .fas {
    color: #ffffff !important;
}

/* The landed-cost badge is a pill wrapping a single $ glyph; the glyph's
   line-height left a gap beneath it that read as extra bottom padding. Centre
   the icon and drop the line-height so the pill hugs it evenly. */
.landed-cost-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    /* The padded disc otherwise sits on the text baseline of its wrapper's line
       box, dropping it below the bare sibling icons. Centre it in the line box. */
    vertical-align: middle;
}

/* Landed-cost indicator, "not run" grey state (VOD-4740): on the dark surface the
   Bootstrap .badge-light chip rendered as a pale disc with a near-invisible $
   ("just looks like a circle"). Give this one badge a subtle dark disc and a
   legible muted glyph. */
[data-theme="dark"] .landed-cost-badge.badge-light {
    background-color: color-mix(in srgb, var(--vo-text-muted) 22%, transparent) !important;
    border-color: color-mix(in srgb, var(--vo-text-muted) 42%, transparent) !important;
}

[data-theme="dark"] .landed-cost-badge.badge-light .fas {
    color: var(--vo-text-secondary) !important;
}

/* A disabled dropdown-toggle isn't clickable, so it shouldn't advertise a
   chevron (VOD-4740). E.g. the carrier/DHL selector and other option dropdowns
   on a committed FBA send-in: drop the caret and the pointer cursor. Kept
   hoverable so any 'why is this locked' tooltip still shows.
   Excludes split toggles: `add_button_double_click_prevention_to_all_buttons`
   in base.js disables every button for ~3s on click, and a split toggle's caret
   is its only content — hiding it made the chevron blink away on each press. */
.dropdown-toggle.disabled:not(.dropdown-toggle-split)::after,
.dropdown-toggle:disabled:not(.dropdown-toggle-split)::after,
.dropdown-toggle[aria-disabled="true"]:not(.dropdown-toggle-split)::after {
    display: none !important;
}

.dropdown-toggle.disabled,
.dropdown-toggle:disabled,
.dropdown-toggle[aria-disabled="true"] {
    cursor: default;
}

/* Split-button caret must stay visible when the dropdown is clicked/open
   (VOD-4740). The SB-Admin caret is a border-triangle painted in `currentColor`,
   so on a filled button it can blend into the background if the open/active
   state resolves the colour differently. Pin it to the button's white
   foreground so it can never disappear. */
.btn-primary.dropdown-toggle::after,
.btn-success.dropdown-toggle::after,
.btn-secondary.dropdown-toggle-split::after {
    border-top-color: #ffffff !important;
}

/* In-row Save / Undo action badges must be the same size and shape (VOD-4740).
   Both are `.badge` circles, but `p-2` sizes them by icon width, so fa-save and
   fa-undo render at slightly different diameters. Force an identical circle and
   centre the glyph. Targets only the badge containers (not the shared-class
   <i> icons, which are not `.badge`). */
.badge.save_changes_btn,
.badge.save_changes_badge,
.badge.cancel_changes_btn,
div[name="save_row_changes"].badge {
    display: inline-flex; /* NOT !important — must not override the inline display:none that hides these until a row changes */
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0 !important;
    border-radius: 50% !important;
}

/* Inline checkbox/radio + label rows are vertically centred app-wide
   (VOD-4740). Bootstrap floats the input with an absolute position + margin-top,
   leaving the box sitting high next to a single-line label. Switch the row to a
   centred flex layout. */
.form-check:not(.form-check-inline) {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding-left: 0;
}
.form-check:not(.form-check-inline) .form-check-input {
    position: static;
    margin: 0;
    flex: 0 0 auto;
}
.form-check:not(.form-check-inline) .form-check-label {
    margin-bottom: 0;
}
/* Preserve the settings pages' bordered, clickable option-row layout, which
   deliberately relies on an absolutely-positioned input inside left padding. */
.settings-card .form-check,
.settings-form .form-check {
    display: block;
    padding: .7rem .9rem .7rem 2.4rem;
}
.settings-card .form-check .form-check-input,
.settings-form .form-check .form-check-input {
    position: absolute;
    margin-top: .3rem;
    margin-left: -1.25rem;
}

/* django-money renders the amount input directly on top of the currency select
   with no gap on the logistics insurance field (VOD-4740). Add breathing room. */
#id_value_to_be_insured_0 {
    margin-bottom: .5rem;
}