/*
 * Dashboard dark-mode compatibility layer.
 *
 * Older pages often set navy text and white Select2 surfaces directly on
 * descendants. The page shell already changes to dark mode, so keep these
 * shared controls and table contents readable without changing light mode.
 */
body.is-dark {
    --dashboard-dark-surface: #252b39;
    --dashboard-dark-surface-soft: #2b3242;
    --dashboard-dark-line: #454e62;
    --dashboard-dark-text: #eef2f8;
    --dashboard-dark-muted: #b8c1d1;
}

/* Legacy data tables: let nested text inherit a readable colour. */
body.is-dark .view-wrapper table tbody td,
body.is-dark .view-wrapper .table tbody td,
body.is-dark .view-wrapper .is-datatable tbody td {
    color: var(--dashboard-dark-text) !important;
}

body.is-dark .view-wrapper table tbody td :where(div, p, small, strong, b),
body.is-dark .view-wrapper table tbody td span:not(.tag):not(.label):not(.button):not(.icon):not([class*="has-text-"]),
body.is-dark .view-wrapper .table tbody td :where(div, p, small, strong, b),
body.is-dark .view-wrapper .table tbody td span:not(.tag):not(.label):not(.button):not(.icon):not([class*="has-text-"]) {
    color: inherit !important;
}

body.is-dark .view-wrapper .dataTables_info,
body.is-dark .view-wrapper .dataTables_empty,
body.is-dark .view-wrapper .datatable-info,
body.is-dark .view-wrapper [class*="result-summary"],
body.is-dark .view-wrapper [class*="list-subtitle"] {
    color: var(--dashboard-dark-muted) !important;
}

/* Select2 renders its own elements and does not inherit native select styles. */
body.is-dark .select2-container--default .select2-selection--single,
body.is-dark .select2-container--default .select2-selection--multiple,
body.is-dark .select2-container--classic .select2-selection--single,
body.is-dark .select2-container--classic .select2-selection--multiple {
    border-color: var(--dashboard-dark-line) !important;
    background: var(--dashboard-dark-surface) !important;
    color: var(--dashboard-dark-text) !important;
}

body.is-dark .select2-container--default .select2-selection--single .select2-selection__rendered,
body.is-dark .select2-container--default .select2-selection--multiple .select2-selection__rendered,
body.is-dark .select2-container--classic .select2-selection--single .select2-selection__rendered,
body.is-dark .select2-container--classic .select2-selection--multiple .select2-selection__rendered {
    color: var(--dashboard-dark-text) !important;
}

body.is-dark .select2-container--default .select2-selection--single .select2-selection__placeholder,
body.is-dark .select2-container--classic .select2-selection--single .select2-selection__placeholder {
    color: var(--dashboard-dark-muted) !important;
}

body.is-dark .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-top-color: var(--dashboard-dark-muted) !important;
}

body.is-dark .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-top-color: transparent !important;
    border-bottom-color: var(--dashboard-dark-muted) !important;
}

body.is-dark .select2-dropdown,
body.is-dark .select2-container--default .select2-results__options,
body.is-dark .select2-container--classic .select2-results__options {
    border-color: var(--dashboard-dark-line) !important;
    background: var(--dashboard-dark-surface) !important;
    color: var(--dashboard-dark-text) !important;
}

body.is-dark .select2-container--default .select2-results__option,
body.is-dark .select2-container--classic .select2-results__option {
    color: var(--dashboard-dark-text) !important;
}

body.is-dark .select2-container--default .select2-results__option[aria-selected="true"],
body.is-dark .select2-container--default .select2-results__option--highlighted[aria-selected],
body.is-dark .select2-container--classic .select2-results__option[aria-selected="true"],
body.is-dark .select2-container--classic .select2-results__option--highlighted[aria-selected] {
    background: var(--dashboard-dark-surface-soft) !important;
    color: #fff !important;
}

body.is-dark .select2-container--default .select2-search--dropdown .select2-search__field,
body.is-dark .select2-container--classic .select2-search--dropdown .select2-search__field {
    border-color: var(--dashboard-dark-line) !important;
    background: #202635 !important;
    color: var(--dashboard-dark-text) !important;
}

body.is-dark .select2-container--default .select2-selection--multiple .select2-selection__choice,
body.is-dark .select2-container--classic .select2-selection--multiple .select2-selection__choice {
    border-color: #525c72 !important;
    background: var(--dashboard-dark-surface-soft) !important;
    color: var(--dashboard-dark-text) !important;
}

/* Common native form controls left white by legacy inline styles. */
body.is-dark .view-wrapper input.input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
body.is-dark .view-wrapper textarea.textarea,
body.is-dark .view-wrapper .select select,
body.is-dark .view-wrapper select.form-control,
body.is-dark .view-wrapper input.form-control,
body.is-dark .view-wrapper textarea.form-control {
    border-color: var(--dashboard-dark-line) !important;
    background-color: var(--dashboard-dark-surface) !important;
    color: var(--dashboard-dark-text) !important;
}

body.is-dark .view-wrapper input::placeholder,
body.is-dark .view-wrapper textarea::placeholder {
    color: #929caf !important;
    opacity: 1;
}

body.is-dark .view-wrapper .help,
body.is-dark .view-wrapper .field-help,
body.is-dark .view-wrapper .form-text,
body.is-dark .view-wrapper .has-text-grey,
body.is-dark .view-wrapper .has-text-grey-light {
    color: var(--dashboard-dark-muted) !important;
}

/* Old table implementations frequently hard-code white header and sticky cells. */
body.is-dark .view-wrapper table thead,
body.is-dark .view-wrapper table thead tr,
body.is-dark .view-wrapper table thead th {
    border-color: var(--dashboard-dark-line) !important;
    background: #293041 !important;
    color: #dfe5ef !important;
}

body.is-dark .view-wrapper table tbody tr,
body.is-dark .view-wrapper table tbody td {
    border-color: #3b4355 !important;
    background-color: transparent !important;
}

/* Native fields without the framework input/form-control classes. */
body.is-dark .view-wrapper input[type="text"],
body.is-dark .view-wrapper input[type="search"],
body.is-dark .view-wrapper input[type="email"],
body.is-dark .view-wrapper input[type="tel"],
body.is-dark .view-wrapper input[type="url"],
body.is-dark .view-wrapper input[type="password"],
body.is-dark .view-wrapper input[type="number"],
body.is-dark .view-wrapper input[type="date"],
body.is-dark .view-wrapper input[type="datetime-local"],
body.is-dark .view-wrapper input[type="time"],
body.is-dark .view-wrapper input:not([type]),
body.is-dark .view-wrapper textarea,
body.is-dark .view-wrapper .datetimepicker-dummy-input {
    border-color: var(--dashboard-dark-line) !important;
    background: var(--dashboard-dark-surface) !important;
    color: var(--dashboard-dark-text) !important;
}

body.is-dark .view-wrapper .select,
body.is-dark .view-wrapper .datetimepicker-dummy {
    background: transparent !important;
}

body.is-dark .view-wrapper #coupon_prefix {
    border-color: var(--dashboard-dark-line) !important;
    background: var(--dashboard-dark-surface) !important;
    color: var(--dashboard-dark-text) !important;
}

/* General legacy copy colours used by forms, menus and custom elements. */
body.is-dark .view-wrapper label:not(.tag):not(.button),
body.is-dark .view-wrapper h1,
body.is-dark .view-wrapper h2,
body.is-dark .view-wrapper h3,
body.is-dark .view-wrapper h4,
body.is-dark .view-wrapper h5,
body.is-dark .view-wrapper h6,
body.is-dark .view-wrapper b,
body.is-dark .view-wrapper strong,
body.is-dark .view-wrapper ab,
body.is-dark .view-wrapper k,
body.is-dark .view-wrapper c,
body.is-dark .view-wrapper .dd-title,
body.is-dark .view-wrapper .meta-stats,
body.is-dark .view-wrapper .now_ip,
body.is-dark .view-wrapper span.clang_text:not(.tag):not(.required):not([class*="has-text-"]) {
    color: var(--dashboard-dark-text) !important;
}

body.is-dark .view-wrapper p.clang_text,
body.is-dark .view-wrapper .notification-record-subtitle,
body.is-dark .view-wrapper #show_cube_product_delete_log {
    color: var(--dashboard-dark-muted) !important;
}

body.is-dark .view-wrapper .magic_brush_title {
    color: #64d8b5 !important;
}

body.is-dark .view-wrapper .delete-btn {
    color: #ff788a !important;
}

body.is-dark .view-wrapper .required,
body.is-dark .view-wrapper .edit_area.required {
    color: #ff788a !important;
}

body.is-dark .view-wrapper .fa-fw.select-all,
body.is-dark .view-wrapper .ellipsis,
body.is-dark .view-wrapper .wi-column-title,
body.is-dark .view-wrapper #sn_inventory_table_footer_text {
    color: var(--dashboard-dark-muted) !important;
}

body.is-dark #menu_tree .label {
    background: #343c50 !important;
    color: var(--dashboard-dark-text) !important;
}

body.is-dark #voucher-list-page span:not(.tag):not(.label):not(.icon):not(.required),
body.is-dark .pos-payment-page span:not(.tag):not(.label):not(.icon):not(.required),
body.is-dark .store-signup-settings-page span:not(.tag):not(.label):not(.icon):not(.required),
body.is-dark #total_count,
body.is-dark #success_count,
body.is-dark #failed_count {
    color: var(--dashboard-dark-text) !important;
}

/* Notification and communication record pages. */
body.is-dark .notification-record-page {
    --notification-ink: var(--dashboard-dark-text);
    --notification-muted: var(--dashboard-dark-muted);
    --notification-border: var(--dashboard-dark-line);
}

body.is-dark .notification-record-page .notification-record-title {
    color: var(--dashboard-dark-text) !important;
}

body.is-dark .notification-record-tabs,
body.is-dark .notification-summary-card,
body.is-dark .notification-filter-card,
body.is-dark .notification-list-card {
    border-color: var(--dashboard-dark-line) !important;
    background: var(--dashboard-dark-surface) !important;
    box-shadow: none !important;
}

body.is-dark .notification-record-tabs a,
body.is-dark .notification-summary-card span,
body.is-dark .notification-list-toolbar p,
body.is-dark .notification-filter-field label {
    color: var(--dashboard-dark-muted) !important;
}

body.is-dark .notification-summary-card strong {
    color: var(--dashboard-dark-text) !important;
}

body.is-dark .notification-record-table th {
    background: #293041 !important;
    color: #dfe5ef !important;
}

body.is-dark .notification-record-table td,
body.is-dark .notification-list-toolbar {
    border-color: #3b4355 !important;
}

/* Category and bundled-product surfaces. */
body.is-dark .category-storefront-note,
body.is-dark .package-items-summary {
    border-color: var(--dashboard-dark-line) !important;
    background: var(--dashboard-dark-surface-soft) !important;
    color: var(--dashboard-dark-text) !important;
}

body.is-dark .category-storefront-note .note-icon {
    background: #374055 !important;
    color: #c9d3e5 !important;
}

body.is-dark .category-storefront-note strong {
    color: var(--dashboard-dark-text) !important;
}

body.is-dark .category-storefront-note p {
    color: var(--dashboard-dark-muted) !important;
}

/* Inventory page cards introduced by the newer list layouts. */
body.is-dark .sn-stock-page .sn-toolbar-card,
body.is-dark .sn-stock-page .sn-table-card,
body.is-dark .sn-stock-page .sn-modal-card,
body.is-dark .stock-adjustment-list .sa-summary-card,
body.is-dark .inventory-summary-card,
body.is-dark .inventory-filter-card {
    border-color: var(--dashboard-dark-line) !important;
    background: var(--dashboard-dark-surface) !important;
    box-shadow: none !important;
}

body.is-dark .sn-stock-page .sn-summary-item,
body.is-dark .sn-stock-page table.sn-table tbody td {
    border-color: #3b4355 !important;
    background: var(--dashboard-dark-surface-soft) !important;
}

body.is-dark .sn-stock-page .sn-summary-item .label,
body.is-dark .sn-stock-page .sn-table-meta,
body.is-dark .stock-adjustment-list .sa-summary-label,
body.is-dark .inventory-summary-card .label,
body.is-dark .inventory-item-meta,
body.is-dark .inventory-last-update {
    color: var(--dashboard-dark-muted) !important;
}

body.is-dark .sn-stock-page .sn-summary-item .value,
body.is-dark .sn-stock-page .sn-table-head h4,
body.is-dark .stock-adjustment-list .sa-summary-value,
body.is-dark .inventory-summary-card .value {
    color: var(--dashboard-dark-text) !important;
}

/* Voucher settings and website-resource links. */
body.is-dark .voucher-setting-card,
body.is-dark .voucher-setting-surface,
body.is-dark #setting-store-resource-links,
body.is-dark #setting-store-resource-links .resource-link-row,
body.is-dark .voucher-balance-view-toggle {
    border-color: var(--dashboard-dark-line) !important;
    background: var(--dashboard-dark-surface) !important;
    box-shadow: none !important;
}

body.is-dark .voucher-setting-row {
    border-color: #3b4355 !important;
}

body.is-dark .voucher-setting-copy h4,
body.is-dark .voucher-setting-surface h5,
body.is-dark #setting-store-resource-links .resource-links-heading h4,
body.is-dark #setting-store-resource-links .resource-link-name {
    color: var(--dashboard-dark-text) !important;
}

body.is-dark .voucher-setting-copy p,
body.is-dark .voucher-setting-surface p,
body.is-dark #setting-store-resource-links .resource-links-heading p,
body.is-dark #setting-store-resource-links .resource-link-purpose {
    color: var(--dashboard-dark-muted) !important;
}

body.is-dark #setting-store-resource-links .resource-link-url {
    color: #85b8ff !important;
}

body.is-dark #setting-store-resource-links .resource-link-copy {
    border-color: var(--dashboard-dark-line) !important;
    background: var(--dashboard-dark-surface-soft) !important;
}

/* File-import drop zones and progress labels. */
body.is-dark .view-wrapper [style*="border: 2px dashed"][style*="background-color: #f5f5f5"],
body.is-dark .view-wrapper [style*="border:2px dashed"][style*="background-color:#f5f5f5"] {
    border-color: #566078 !important;
    background: var(--dashboard-dark-surface-soft) !important;
}

body.is-dark .view-wrapper #progress {
    color: var(--dashboard-dark-text) !important;
}

body.is-dark .voucher-import-page span,
body.is-dark .voucher-import-page p {
    color: var(--dashboard-dark-text) !important;
}

body.is-dark .voucher-import-page p {
    color: var(--dashboard-dark-muted) !important;
}

/* Subscription page has a light inline page background and custom tags. */
body.is-dark .view-wrapper[data-page-title="SaaS Billing"] {
    background: transparent !important;
}

body.is-dark .view-wrapper[data-page-title="SaaS Billing"] .text,
body.is-dark .view-wrapper[data-page-title="SaaS Billing"] ab,
body.is-dark .view-wrapper[data-page-title="SaaS Billing"] k,
body.is-dark .view-wrapper[data-page-title="SaaS Billing"] c,
body.is-dark .view-wrapper[data-page-title="SaaS Billing"] .return_gift {
    color: var(--dashboard-dark-text) !important;
}

/* Product add/edit: warehouse discount pricing and bulk-sync action. */
body.is-dark .view-wrapper .column[class*="dcdline_val"] {
    background: var(--dashboard-dark-surface-soft) !important;
    color: var(--dashboard-dark-text) !important;
}

body.is-dark .view-wrapper .column[class*="dcdline_val"] h4,
body.is-dark .view-wrapper .column[class*="dcdline_val"] h4 .clang_text {
    color: var(--dashboard-dark-text) !important;
}

body.is-dark .view-wrapper .column[class*="dcdline_val"] .button.is-static {
    border-color: #4a5368 !important;
    background: #343b4d !important;
    color: #c6cede !important;
}

body.is-dark .view-wrapper .syn_item_data.button.is-primary.is-light {
    border-color: #ff9a59 !important;
    background: #4a3528 !important;
    color: #ffb176 !important;
    box-shadow: none !important;
}

body.is-dark .view-wrapper .syn_item_data.button.is-primary.is-light i,
body.is-dark .view-wrapper .syn_item_data.button.is-primary.is-light .clang_text {
    color: inherit !important;
}

body.is-dark .view-wrapper .syn_item_data.button.is-primary.is-light:hover,
body.is-dark .view-wrapper .syn_item_data.button.is-primary.is-light:focus {
    border-color: #ffad73 !important;
    background: #5a3e2d !important;
    color: #ffc59d !important;
}

/*
 * Promotion editor panels are mounted beside .view-wrapper instead of inside it.
 * Keep every add/edit panel on the same dark surface and prevent the light
 * per-page CSS variables from winning through their ID selectors.
 */
body.is-dark #quantity_discount_add.quantity-discount-form-panel,
body.is-dark #quantity_discount_edit.quantity-discount-form-panel {
    --qd-panel-ink: var(--dashboard-dark-text);
    --qd-panel-muted: var(--dashboard-dark-muted);
    --qd-panel-line: var(--dashboard-dark-line);
    --qd-panel-soft: #20232e;
}

body.is-dark #store_discount_product_add.sdp-form-panel,
body.is-dark #store_discount_product_edit.sdp-form-panel {
    --sdp-panel-ink: var(--dashboard-dark-text);
    --sdp-panel-muted: var(--dashboard-dark-muted);
    --sdp-panel-line: var(--dashboard-dark-line);
    --sdp-panel-soft: #20232e;
}

body.is-dark #coupon_add.free-coupon-form-panel,
body.is-dark #coupon_edit.free-coupon-form-panel {
    --coupon-panel-ink: var(--dashboard-dark-text);
    --coupon-panel-muted: var(--dashboard-dark-muted);
    --coupon-panel-line: var(--dashboard-dark-line);
    --coupon-panel-soft: #20232e;
    --pm-soft: #20232e;
}

body.is-dark .promotion-form-panel {
    --pm-ink: var(--dashboard-dark-text);
    --pm-muted: var(--dashboard-dark-muted);
    --pm-line: var(--dashboard-dark-line);
    --pm-soft: #20232e;
    --pm-card: var(--dashboard-dark-surface);
    color: var(--dashboard-dark-text);
}

body.is-dark .promotion-form-panel .right-panel,
body.is-dark .promotion-form-panel .right-panel-body,
body.is-dark .promotion-form-panel .form-body {
    background: #20232e !important;
}

body.is-dark .promotion-form-panel .right-panel-head,
body.is-dark .promotion-form-panel .promotion-form-section,
body.is-dark .promotion-form-panel .coupon-form-section,
body.is-dark .promotion-form-panel .qd-form-section,
body.is-dark .promotion-form-panel .quantity-discount-panel__head {
    border-color: var(--dashboard-dark-line) !important;
    background: var(--dashboard-dark-surface) !important;
}

body.is-dark .promotion-form-panel h2,
body.is-dark .promotion-form-panel h3,
body.is-dark .promotion-form-panel h4,
body.is-dark .promotion-form-panel h5,
body.is-dark .promotion-form-panel label:not(.tag):not(.button),
body.is-dark .promotion-form-panel .promotion-section-title,
body.is-dark .promotion-form-panel .coupon-form-section-title,
body.is-dark .promotion-form-panel .qd-form-section-title,
body.is-dark .promotion-form-panel .clang_text:not(.tag):not(.required):not([class*="has-text-"]) {
    color: var(--dashboard-dark-text) !important;
}

body.is-dark .promotion-form-panel .help,
body.is-dark .promotion-form-panel .promotion-section-note,
body.is-dark .promotion-form-panel .coupon-form-section-note,
body.is-dark .promotion-form-panel .qd-form-section-note {
    color: var(--dashboard-dark-muted) !important;
}

/* Inputs and the Bulma date picker are rendered outside the page wrapper. */
body.is-dark .promotion-form-panel input.input,
body.is-dark .promotion-form-panel input[type="text"],
body.is-dark .promotion-form-panel input[type="search"],
body.is-dark .promotion-form-panel input[type="number"],
body.is-dark .promotion-form-panel input[type="date"],
body.is-dark .promotion-form-panel input[type="time"],
body.is-dark .promotion-form-panel textarea,
body.is-dark .promotion-form-panel .select select,
body.is-dark .promotion-form-panel select.form-control,
body.is-dark .promotion-form-panel .datetimepicker-dummy-input {
    border-color: var(--dashboard-dark-line) !important;
    background: var(--dashboard-dark-surface-soft) !important;
    color: var(--dashboard-dark-text) !important;
    box-shadow: none !important;
}

body.is-dark .promotion-form-panel input::placeholder,
body.is-dark .promotion-form-panel textarea::placeholder,
body.is-dark .promotion-form-panel .datetimepicker-dummy-input::placeholder {
    color: #98a3b7 !important;
    opacity: 1;
}

body.is-dark .promotion-form-panel .datetimepicker-dummy,
body.is-dark .promotion-form-panel .datetimepicker-dummy-wrapper {
    background: transparent !important;
}

body.is-dark .promotion-form-panel .datetimepicker-dummy .datetimepicker-dummy-input:first-child,
body.is-dark .promotion-form-panel .datetimepicker-dummy::before,
body.is-dark .promotion-form-panel .datetimepicker-dummy::after,
body.is-dark .promotion-form-panel .datetimepicker-clear-button {
    color: #aeb7c8 !important;
}

body.is-dark .promotion-form-panel .button.is-static {
    border-color: var(--dashboard-dark-line) !important;
    background: #343b4d !important;
    color: #cbd2df !important;
}

/* Product scanners, selected-product cards and empty states. */
body.is-dark .promotion-form-panel .promotion-product-picker,
body.is-dark .promotion-form-panel .promotion-product-picker .flex-table,
body.is-dark .promotion-form-panel .promotion-product-scan,
body.is-dark .promotion-form-panel .promotion-selected-item,
body.is-dark .promotion-form-panel .promotion-selected-empty,
body.is-dark .promotion-form-panel .promotion-product-empty,
body.is-dark .promotion-form-panel .sdp-product-picker,
body.is-dark .promotion-form-panel .sdp-product-item,
body.is-dark .promotion-form-panel .sdp-product-empty,
body.is-dark .promotion-form-panel .coupon-product-picker,
body.is-dark .promotion-form-panel .coupon-product-item,
body.is-dark .promotion-form-panel .coupon-product-empty {
    border-color: var(--dashboard-dark-line) !important;
    background: var(--dashboard-dark-surface-soft) !important;
    color: var(--dashboard-dark-text) !important;
    box-shadow: none !important;
}

body.is-dark .promotion-form-panel .promotion-product-scan__hint,
body.is-dark .promotion-form-panel .coupon-product-scan__hint,
body.is-dark .promotion-form-panel .promotion-product-empty__icon,
body.is-dark .promotion-form-panel .promotion-selected-empty__icon,
body.is-dark .promotion-form-panel .sdp-product-item__marker,
body.is-dark .promotion-form-panel .sdp-product-empty__icon,
body.is-dark .promotion-form-panel .coupon-product-item__marker,
body.is-dark .promotion-form-panel .coupon-product-empty__icon {
    border-color: var(--dashboard-dark-line) !important;
    background: #343b4d !important;
    color: #b7c2d4 !important;
}

body.is-dark .promotion-form-panel .promotion-selected-name,
body.is-dark .promotion-form-panel .promotion-product-empty__copy strong,
body.is-dark .promotion-form-panel .promotion-selected-empty__copy strong,
body.is-dark .promotion-form-panel .sdp-product-item__name,
body.is-dark .promotion-form-panel .sdp-product-empty__copy strong,
body.is-dark .promotion-form-panel .coupon-product-item__name,
body.is-dark .promotion-form-panel .coupon-product-empty__copy strong {
    color: var(--dashboard-dark-text) !important;
}

body.is-dark .promotion-form-panel .promotion-selected-meta,
body.is-dark .promotion-form-panel .promotion-product-empty__copy > span,
body.is-dark .promotion-form-panel .promotion-selected-empty__copy > span,
body.is-dark .promotion-form-panel .sdp-product-item__meta,
body.is-dark .promotion-form-panel .sdp-product-empty__copy > span,
body.is-dark .promotion-form-panel .coupon-product-item__meta,
body.is-dark .promotion-form-panel .coupon-product-empty__copy > span {
    color: var(--dashboard-dark-muted) !important;
}

body.is-dark .promotion-form-panel .promotion-selected-items,
body.is-dark .promotion-form-panel .promotion-product-list__items,
body.is-dark .promotion-form-panel .qd-product-list__items,
body.is-dark .promotion-form-panel .sdp-product-list__items,
body.is-dark .promotion-form-panel .coupon-product-list__items,
body.is-dark .promotion-form-panel .right-panel-body {
    scrollbar-color: #626c80 var(--dashboard-dark-surface);
}

body.is-dark .promotion-form-panel .promotion-selected-items::-webkit-scrollbar-track,
body.is-dark .promotion-form-panel .promotion-product-list__items::-webkit-scrollbar-track,
body.is-dark .promotion-form-panel .qd-product-list__items::-webkit-scrollbar-track,
body.is-dark .promotion-form-panel .sdp-product-list__items::-webkit-scrollbar-track,
body.is-dark .promotion-form-panel .coupon-product-list__items::-webkit-scrollbar-track,
body.is-dark .promotion-form-panel .right-panel-body::-webkit-scrollbar-track {
    background: var(--dashboard-dark-surface);
}

body.is-dark .promotion-form-panel .promotion-selected-items::-webkit-scrollbar-thumb,
body.is-dark .promotion-form-panel .promotion-product-list__items::-webkit-scrollbar-thumb,
body.is-dark .promotion-form-panel .qd-product-list__items::-webkit-scrollbar-thumb,
body.is-dark .promotion-form-panel .sdp-product-list__items::-webkit-scrollbar-thumb,
body.is-dark .promotion-form-panel .coupon-product-list__items::-webkit-scrollbar-thumb,
body.is-dark .promotion-form-panel .right-panel-body::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #626c80;
}

/* Fixed action bars must blend into the panel instead of producing a white shelf. */
body.is-dark .promotion-form-panel .promotion-form-actions,
body.is-dark .promotion-form-panel .qd-form-actions,
body.is-dark .promotion-form-panel .sdp-panel-actions,
body.is-dark .promotion-form-panel .coupon-form-actions {
    border-color: var(--dashboard-dark-line) !important;
    background: linear-gradient(180deg, rgba(32, 35, 46, 0) 0%, #20232e 28%, #20232e 100%) !important;
}

body.is-dark .promotion-form-panel .promotion-form-cancel,
body.is-dark .promotion-form-panel .qd-form-cancel,
body.is-dark .promotion-form-panel .coupon-form-cancel {
    border-color: var(--dashboard-dark-line) !important;
    background: var(--dashboard-dark-surface-soft) !important;
    color: var(--dashboard-dark-text) !important;
}

/* Compact list badges on the quantity-discount page. */
body.is-dark .quantity-discount-page .qd-metric__detail {
    border: 1px solid #624733 !important;
    background: #4a3528 !important;
    color: #ffb176 !important;
}

body.is-dark .quantity-discount-page .qd-metric__detail .clang_text {
    color: inherit !important;
}

body.is-dark .quantity-discount-page .qd-warehouse-tag {
    border: 1px solid #3e5875 !important;
    background: #2e4158 !important;
    color: #a9cffd !important;
}

body.is-dark .quantity-discount-page .qd-warehouse-tag::before {
    background: #76a7e3 !important;
}