/* ==========================================================================
   UltimatePOS — Dark Theme
   Applied when <html data-theme="dark"> is set.
   Scoped to @media screen so printing / receipts always render on white.
   Brand accents (.theme-btn-bg, .theme-logo-bg, --theme-*) are left as-is so
   identity is preserved. .theme-header-bg is intentionally neutral (canvas)
   in the 2026 chrome pass — see the override below.
   ========================================================================== */

@media screen {
    html[data-theme="dark"] {
        /* Deeper, near-black scale (2026 pass). Surfaces stay clearly
           separated; borders are low-alpha so they recede. */
        --upos-canvas:      #060a13;
        --upos-surface:     #0c1220;
        --upos-surface-2:   #101a2e;
        --upos-surface-3:   #16223a;
        --upos-border:      rgba(148, 163, 184, 0.18);
        --upos-border-2:    rgba(148, 163, 184, 0.32);
        --upos-surface-hover: #16223a;
        --upos-border-hover:  rgba(148, 163, 184, 0.5);
        --upos-text:        #e9eef8;
        --upos-text-2:      #b3bfda;
        --upos-text-muted:  #8291ad;
        --upos-shadow:      0 8px 24px rgba(0, 0, 0, 0.55);

        /* Brand + semantic (brighter on dark for contrast) */
        --upos-accent:        #646EE4;
        --upos-accent-hover:  #7d84ec;
        --upos-accent-soft:   rgba(100, 110, 228, 0.18);
        --upos-success:       #34d399;
        --upos-success-soft:  rgba(52, 211, 153, 0.14);
        --upos-danger:        #f87171;
        --upos-danger-soft:   rgba(248, 113, 113, 0.14);
        --upos-warning:       #fbbf24;
        --upos-warning-soft:  rgba(251, 191, 36, 0.14);
        --upos-info:          #38bdf8;

        /* Bundle badge (violet, brighter on dark) */
        --upos-bundle:        #d8b4fe;
        --upos-bundle-soft:   rgba(168, 85, 247, 0.16);
        --upos-bundle-border: rgba(168, 85, 247, 0.4);

        /* POS "total payable" hero */
        --upos-total-bg:      rgba(52, 211, 153, 0.10);
        --upos-total-border:  rgba(52, 211, 153, 0.22);
        --upos-total-label:   #6ee7b7;
        --upos-total-value:   #34d399;

        color-scheme: dark;
        background-color: var(--upos-canvas);
    }

    /* ------------------------------------------------------------------ *
     * 1. Base surfaces
     * ------------------------------------------------------------------ */
    html[data-theme="dark"] body,
    html[data-theme="dark"] .content,
    html[data-theme="dark"] #scrollable-container {
        background-color: var(--upos-canvas) !important;
        color: var(--upos-text) !important;
    }

    html[data-theme="dark"] main,
    html[data-theme="dark"] .main,
    html[data-theme="dark"] .content-wrapper {
        background-color: var(--upos-canvas) !important;
    }

    /* Neutral chrome: header bands render on the dark canvas (no blue). */
    html[data-theme="dark"] .theme-header-bg {
        background: transparent;
        background-image: none;
    }

    /* ------------------------------------------------------------------ *
     * 2. Neutral Tailwind utilities (broad dark coverage)
     *    These map the light "gray" palette to the dark palette.
     * ------------------------------------------------------------------ */
    html[data-theme="dark"] .tw-bg-white,
    html[data-theme="dark"] .tw-bg-gray-50 {
        background-color: var(--upos-surface) !important;
    }
    html[data-theme="dark"] .tw-bg-gray-100,
    html[data-theme="dark"] .tw-bg-gray-50\/90 {
        background-color: var(--upos-surface-2) !important;
    }
    html[data-theme="dark"] .tw-bg-gray-200 {
        background-color: var(--upos-surface-3) !important;
    }

    html[data-theme="dark"] .tw-text-gray-900,
    html[data-theme="dark"] .tw-text-gray-800 {
        color: var(--upos-text) !important;
    }
    html[data-theme="dark"] .tw-text-gray-700,
    html[data-theme="dark"] .tw-text-gray-600 {
        color: var(--upos-text-2) !important;
    }
    html[data-theme="dark"] .tw-text-gray-500 {
        color: var(--upos-text-2) !important;
    }
    html[data-theme="dark"] .tw-text-gray-400 {
        color: var(--upos-text-muted) !important;
    }
    html[data-theme="dark"] .tw-text-black {
        color: var(--upos-text) !important;
    }

    html[data-theme="dark"] .tw-border-gray-100,
    html[data-theme="dark"] .tw-border-gray-200,
    html[data-theme="dark"] .tw-border-gray-300 {
        border-color: var(--upos-border) !important;
    }

    /* hover / focus / active neutral states */
    html[data-theme="dark"] .hover\:tw-bg-gray-50:hover,
    html[data-theme="dark"] .hover\:tw-bg-gray-100:hover,
    html[data-theme="dark"] .hover\:tw-bg-gray-200:hover {
        background-color: var(--upos-surface-3) !important;
    }
    html[data-theme="dark"] .hover\:tw-text-gray-900:hover {
        color: var(--upos-text) !important;
    }
    html[data-theme="dark"] .active\:tw-bg-gray-100:active,
    html[data-theme="dark"] .focus\:tw-bg-gray-50:focus,
    html[data-theme="dark"] .focus\:tw-bg-gray-100:focus {
        background-color: var(--upos-surface-3) !important;
    }

    /* placeholder text */
    html[data-theme="dark"] .placeholder\:tw-text-gray-400::placeholder,
    html[data-theme="dark"] .placeholder\:tw-text-gray-500::placeholder {
        color: var(--upos-text-muted) !important;
    }

    /* ------------------------------------------------------------------ *
     * 3. Sidebar
     * ------------------------------------------------------------------ */
    html[data-theme="dark"] .side-bar,
    html[data-theme="dark"] aside.side-bar {
        background-color: var(--upos-surface) !important;
        border-color: var(--upos-border) !important;
    }
    html[data-theme="dark"] #side-bar {
        background-color: var(--upos-surface) !important;
    }
    /* sidebar search box */
    html[data-theme="dark"] .side-bar .tw-bg-gray-100 {
        background-color: var(--upos-surface-2) !important;
    }
    html[data-theme="dark"] #side-bar a {
        color: var(--upos-text-2);
    }
    html[data-theme="dark"] #side-bar a:hover {
        background-color: var(--upos-surface-3) !important;
        color: var(--upos-text) !important;
    }

    /* ------------------------------------------------------------------ *
     * 4. Cards / panels
     * ------------------------------------------------------------------ */
    html[data-theme="dark"] .card,
    html[data-theme="dark"] .box,
    html[data-theme="dark"] .info-box,
    html[data-theme="dark"] .small-box {
        background-color: var(--upos-surface) !important;
        border-color: var(--upos-border) !important;
        color: var(--upos-text) !important;
        box-shadow: var(--upos-shadow) !important;
    }
    html[data-theme="dark"] .card-header,
    html[data-theme="dark"] .box-header {
        background-color: var(--upos-surface) !important;
        border-color: var(--upos-border) !important;
        color: var(--upos-text) !important;
    }
    html[data-theme="dark"] .card-body,
    html[data-theme="dark"] .card-footer,
    html[data-theme="dark"] .box-body {
        background-color: var(--upos-surface) !important;
        color: var(--upos-text) !important;
    }

    /* ------------------------------------------------------------------ *
     * 5. Tables (DataTables + plain)
     * ------------------------------------------------------------------ */
    html[data-theme="dark"] table.table,
    html[data-theme="dark"] .table {
        background-color: transparent !important;
        color: var(--upos-text) !important;
        border-color: var(--upos-border) !important;
    }
    html[data-theme="dark"] .table thead th,
    html[data-theme="dark"] table.table thead th {
        background-color: var(--upos-surface-2) !important;
        color: var(--upos-text) !important;
        border-color: var(--upos-border) !important;
    }
    html[data-theme="dark"] .table tbody td,
    html[data-theme="dark"] table.table tbody td,
    html[data-theme="dark"] .table tbody tr {
        background-color: transparent !important;
        color: var(--upos-text-2) !important;
        border-color: var(--upos-border) !important;
    }
    html[data-theme="dark"] .table tbody tr:hover,
    html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd),
    html[data-theme="dark"] .table-striped>tbody>tr:nth-of-type(odd)>* {
        background-color: var(--upos-surface-2) !important;
    }
    html[data-theme="dark"] .table>tbody>tr.active,
    html[data-theme="dark"] .table .active,
    html[data-theme="dark"] .table .selected {
        background-color: var(--upos-surface-3) !important;
        color: var(--upos-text) !important;
    }

    /* DataTables chrome */
    html[data-theme="dark"] .dataTables_wrapper .dataTables_length,
    html[data-theme="dark"] .dataTables_wrapper .dataTables_filter,
    html[data-theme="dark"] .dataTables_wrapper .dataTables_info,
    html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate {
        color: var(--upos-text-2) !important;
    }
    html[data-theme="dark"] .dataTables_paginate .pagination li a,
    html[data-theme="dark"] .dataTables_paginate .pagination li span {
        background-color: var(--upos-surface-2) !important;
        border-color: var(--upos-border) !important;
        color: var(--upos-text-2) !important;
    }
    html[data-theme="dark"] .dataTables_paginate .pagination li.active a,
    html[data-theme="dark"] .dataTables_paginate .pagination li.active span {
        background-color: var(--upos-surface-3) !important;
        color: var(--upos-text) !important;
    }

    /* ------------------------------------------------------------------ *
     * 6. Forms / inputs / buttons
     * ------------------------------------------------------------------ */
    html[data-theme="dark"] .form-control,
    html[data-theme="dark"] input.form-control,
    html[data-theme="dark"] select.form-control,
    html[data-theme="dark"] textarea.form-control {
        background-color: var(--upos-surface-2) !important;
        border-color: var(--upos-border) !important;
        color: var(--upos-text) !important;
    }
    html[data-theme="dark"] .form-control:focus,
    html[data-theme="dark"] input.form-control:focus,
    html[data-theme="dark"] textarea.form-control:focus {
        background-color: var(--upos-surface-2) !important;
        border-color: var(--upos-border-2) !important;
        color: var(--upos-text) !important;
    }
    html[data-theme="dark"] .form-control::placeholder {
        color: var(--upos-text-muted) !important;
    }
    /* Hover affordance (dark) — !important to override the dark base rules */
    html[data-theme="dark"] .form-control:hover:not(:focus):not(:disabled):not([readonly]),
    html[data-theme="dark"] input.form-control:hover:not(:focus):not(:disabled):not([readonly]),
    html[data-theme="dark"] select.form-control:hover:not(:focus):not(:disabled):not([readonly]),
    html[data-theme="dark"] textarea.form-control:hover:not(:focus):not(:disabled):not([readonly]) {
        background-color: var(--upos-surface-hover) !important;
        border-color: var(--upos-border-hover) !important;
    }
    html[data-theme="dark"] select.form-control {
        cursor: pointer;
    }
    html[data-theme="dark"] .form-group label {
        color: var(--upos-text-2) !important;
    }

    /* .option-div — invoice-scheme FORMAT picker + product SKU format
       picker. The base rule (app.css) hard-codes a light-gray background
       with #333 text, and the global dark h1–h6 !important rule flips the
       text to near-white on top of the still-light box → unreadable.
       Give it a proper dark surface treatment. */
    html[data-theme="dark"] .option-div {
        background-color: var(--upos-surface-2) !important;
        border-color: var(--upos-border) !important;
        color: var(--upos-text-2) !important;
    }
    html[data-theme="dark"] .option-div h4 {
        color: var(--upos-text-2) !important;
    }
    html[data-theme="dark"] .option-div-group .option-div:hover {
        background-color: var(--upos-surface-hover) !important;
        border-color: var(--upos-border-hover) !important;
    }
    html[data-theme="dark"] .option-div-group .option-div.active {
        background-color: var(--upos-surface-3) !important;
        border-color: var(--upos-accent) !important;
    }
    html[data-theme="dark"] .option-div-group .option-div.active h4 {
        color: var(--upos-text) !important;
    }
    html[data-theme="dark"] .option-div-group .icon {
        color: #f87171 !important;
    }

    /* Generic (non-brand) buttons */
    html[data-theme="dark"] .btn-default,
    html[data-theme="dark"] .btn-light,
    html[data-theme="dark"] .btn-secondary,
    html[data-theme="dark"] .btn.bg-white,
    html[data-theme="dark"] .btn.tw-bg-white {
        background-color: var(--upos-surface-3) !important;
        border-color: var(--upos-border-2) !important;
        color: var(--upos-text) !important;
    }
    html[data-theme="dark"] .btn-default:hover,
    html[data-theme="dark"] .btn-light:hover {
        background-color: var(--upos-border) !important;
        color: var(--upos-text) !important;
    }

    /* ------------------------------------------------------------------ *
     * 7. Modals / popovers / tooltips / toasts
     * ------------------------------------------------------------------ */
    html[data-theme="dark"] .modal-content,
    html[data-theme="dark"] .modal-header,
    html[data-theme="dark"] .modal-body,
    html[data-theme="dark"] .modal-footer {
        background-color: var(--upos-surface) !important;
        border-color: var(--upos-border) !important;
        color: var(--upos-text) !important;
    }
    html[data-theme="dark"] .modal-backdrop {
        background-color: #05080f;
    }
    html[data-theme="dark"] .popover {
        background-color: var(--upos-surface) !important;
        border-color: var(--upos-border) !important;
        color: var(--upos-text) !important;
    }
    html[data-theme="dark"] .popover .popover-body {
        background-color: var(--upos-surface) !important;
        color: var(--upos-text-2) !important;
    }
    html[data-theme="dark"] .tooltip-inner {
        background-color: var(--upos-surface-3) !important;
        color: var(--upos-text) !important;
    }
    html[data-theme="dark"] .toast,
    html[data-theme="dark"] .swal2-popup {
        background-color: var(--upos-surface) !important;
        color: var(--upos-text) !important;
        border-color: var(--upos-border) !important;
    }
    html[data-theme="dark"] .swal2-title,
    html[data-theme="dark"] .swal2-html-container,
    html[data-theme="dark"] .swal2-content {
        color: var(--upos-text) !important;
    }

    /* ------------------------------------------------------------------ *
     * 8. Select2
     * ------------------------------------------------------------------ */
    html[data-theme="dark"] .select2-container .select2-selection--single,
    html[data-theme="dark"] .select2-container .select2-selection--multiple,
    html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
    html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__rendered {
        background-color: var(--upos-surface-2) !important;
        border-color: var(--upos-border) !important;
        color: var(--upos-text) !important;
    }
    html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b,
    html[data-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: var(--upos-surface-3) !important;
        border-color: var(--upos-border) !important;
        color: var(--upos-text-2) !important;
    }
    html[data-theme="dark"] .select2-dropdown,
    html[data-theme="dark"] .select2-results,
    html[data-theme="dark"] .select2-results__option {
        background-color: var(--upos-surface) !important;
        border-color: var(--upos-border) !important;
        color: var(--upos-text-2) !important;
    }
    html[data-theme="dark"] .select2-results__option--highlighted.select2-results__option--selectable,
    html[data-theme="dark"] .select2-results__option[aria-selected="true"] {
        background-color: var(--upos-surface-3) !important;
        color: var(--upos-text) !important;
    }
    /* Select2 hover affordance (dark) */
    html[data-theme="dark"] .select2-container:not(.select2-container--focus) .select2-selection--single:hover,
    html[data-theme="dark"] .select2-container:not(.select2-container--focus) .select2-selection--multiple:hover {
        background-color: var(--upos-surface-hover) !important;
        border-color: var(--upos-border-hover) !important;
    }

    /* ------------------------------------------------------------------ *
     * 9. Dropdowns (header custom + Bootstrap)
     * ------------------------------------------------------------------ */
    html[data-theme="dark"] .tw-dw-menu,
    html[data-theme="dark"] .dropdown-menu,
    html[data-theme="dark"] .dw-dropdown-content {
        background-color: var(--upos-surface) !important;
        border-color: var(--upos-border) !important;
        color: var(--upos-text) !important;
        box-shadow: var(--upos-shadow) !important;
    }
    html[data-theme="dark"] .dropdown-menu .dropdown-item,
    html[data-theme="dark"] .tw-dw-menu a {
        color: var(--upos-text-2) !important;
    }
    html[data-theme="dark"] .dropdown-menu .dropdown-item:hover,
    html[data-theme="dark"] .tw-dw-menu a:hover {
        background-color: var(--upos-surface-3) !important;
        color: var(--upos-text) !important;
    }

    /* ------------------------------------------------------------------ *
     * 10. Tabs (settings + POS)
     * ------------------------------------------------------------------ */
    html[data-theme="dark"] .nav-tabs,
    html[data-theme="dark"] .pos-tabs,
    html[data-theme="dark"] .nav-tabs .nav-link {
        background-color: transparent !important;
        border-color: var(--upos-border) !important;
        color: var(--upos-text-2) !important;
    }
    html[data-theme="dark"] .nav-tabs .nav-link.active,
    html[data-theme="dark"] .pos-tab.active {
        background-color: var(--upos-surface) !important;
        border-bottom-color: transparent !important;
        color: var(--upos-text) !important;
    }
    html[data-theme="dark"] .pos-tab-content,
    html[data-theme="dark"] .tab-content {
        background-color: var(--upos-surface) !important;
        color: var(--upos-text) !important;
    }

    /* ------------------------------------------------------------------ *
     * 11. POS screen specifics
     * ------------------------------------------------------------------ */
    html[data-theme="dark"] .pos-product-grid,
    html[data-theme="dark"] .product-thumb,
    html[data-theme="dark"] .pos-cart,
    html[data-theme="dark"] .pos-totals {
        background-color: var(--upos-surface) !important;
        color: var(--upos-text) !important;
    }
    html[data-theme="dark"] .pos-product-card,
    html[data-theme="dark"] .product-item {
        background-color: var(--upos-surface-2) !important;
        border-color: var(--upos-border) !important;
    }
    html[data-theme="dark"] .pos-product-card:hover,
    html[data-theme="dark"] .product-item:hover {
        border-color: var(--upos-border-2) !important;
    }
    html[data-theme="dark"] .qty-box input,
    html[data-theme="dark"] .pos-qty {
        background-color: var(--upos-surface-2) !important;
        border-color: var(--upos-border) !important;
        color: var(--upos-text) !important;
    }

    /* ------------------------------------------------------------------ *
     * 12. Badges / pills / labels (keep semantic colors, darken neutrals)
     * ------------------------------------------------------------------ */
    html[data-theme="dark"] .badge.bg-light,
    html[data-theme="dark"] .badge.tw-bg-gray-100,
    html[data-theme="dark"] .label-default {
        background-color: var(--upos-surface-3) !important;
        color: var(--upos-text-2) !important;
    }

    /* ------------------------------------------------------------------ *
     * 13. Scrollbars
     * ------------------------------------------------------------------ */
    html[data-theme="dark"] * {
        scrollbar-color: var(--upos-border-2) var(--upos-canvas);
    }
    html[data-theme="dark"] ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }
    html[data-theme="dark"] ::-webkit-scrollbar-track {
        background: var(--upos-canvas);
    }
    html[data-theme="dark"] ::-webkit-scrollbar-thumb {
        background: var(--upos-border-2);
        border-radius: 6px;
    }
    html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
        background: var(--upos-border);
    }

    /* ------------------------------------------------------------------ *
     * 14. Misc: scrolltop, hr, code, links
     * ------------------------------------------------------------------ */
    html[data-theme="dark"] .scrolltop {
        background-color: var(--upos-surface) !important;
        border-color: var(--upos-border) !important;
    }
    html[data-theme="dark"] hr {
        border-color: var(--upos-border) !important;
    }
    html[data-theme="dark"] a:not(.btn):not(.theme-btn-bg):not(.tw-text-white) {
        color: #7aa2f7;
    }
    html[data-theme="dark"] a:not(.btn):not(.theme-btn-bg):not(.tw-text-white):hover {
        color: #9db8ff;
    }

    /* ------------------------------------------------------------------ *
     * 15. Headings
     *     A vendor stylesheet forces `h1..h6 { color: #32325d }`, which is
     *     nearly invisible on the dark canvas (dashboard card titles etc.).
     *     Remap all headings to the dark-mode text color; keep explicitly
     *     white headings (brand bands, buttons) pure white.
     * ------------------------------------------------------------------ */
    html[data-theme="dark"] h1,
    html[data-theme="dark"] h2,
    html[data-theme="dark"] h3,
    html[data-theme="dark"] h4,
    html[data-theme="dark"] h5,
    html[data-theme="dark"] h6 {
        color: var(--upos-text) !important;
    }
    html[data-theme="dark"] .text-white,
    html[data-theme="dark"] .tw-text-white,
    html[data-theme="dark"] .theme-header-bg h1,
    html[data-theme="dark"] .theme-header-bg h2,
    html[data-theme="dark"] .theme-header-bg h3,
    html[data-theme="dark"] .box-primary .box-header h3 {
        color: #fff !important;
    }
    /* icon rings built with `tw-border-2` (dashboard card icons) */
    html[data-theme="dark"] .tw-border-2 {
        border-color: var(--upos-border-2) !important;
    }

    /* ------------------------------------------------------------------ *
     * 16. Charts (Highcharts) — dashboard + report charts
     *     Highcharts writes inline styles into its SVG, so overrides
     *     require !important. Series/point colors are intentionally kept.
     * ------------------------------------------------------------------ */
    html[data-theme="dark"] .highcharts-background,
    html[data-theme="dark"] .highcharts-plot-background {
        fill: var(--upos-surface) !important;
    }
    html[data-theme="dark"] .highcharts-grid .highcharts-grid-line {
        stroke: var(--upos-border) !important;
    }
    html[data-theme="dark"] .highcharts-axis-line {
        stroke: var(--upos-border-2) !important;
    }
    /* axis titles, axis labels, legend text, data labels, credits */
    html[data-theme="dark"] .highcharts-container text,
    html[data-theme="dark"] .highcharts-legend text,
    html[data-theme="dark"] .highcharts-credits text {
        fill: var(--upos-text-2) !important;
    }
    html[data-theme="dark"] .highcharts-legend-item text,
    html[data-theme="dark"] text.highcharts-axis-title {
        fill: var(--upos-text) !important;
    }
    html[data-theme="dark"] .highcharts-legend-box {
        fill: var(--upos-surface-2) !important;
        stroke: var(--upos-border) !important;
    }
    /* tooltip (HTML overlay) */
    html[data-theme="dark"] .highcharts-tooltip,
    html[data-theme="dark"] .highcharts-tooltip b,
    html[data-theme="dark"] .highcharts-tooltip span {
        color: var(--upos-text) !important;
    }
    html[data-theme="dark"] .highcharts-tooltip > div {
        background-color: var(--upos-surface-3) !important;
        border-color: var(--upos-border-2) !important;
        box-shadow: var(--upos-shadow) !important;
    }

    /* ------------------------------------------------------------------ *\n     * 17. Date/time pickers (bootstrap-datepicker + datetimepicker)
     *     Popups ship white; remap to the dark surface palette.
     * ------------------------------------------------------------------ */
    html[data-theme="dark"] .datepicker.dropdown-menu,
    html[data-theme="dark"] .datepicker.datepicker-dropdown,
    html[data-theme="dark"] .bootstrap-datetimepicker-widget {
        background-color: var(--upos-surface) !important;
        border-color: var(--upos-border) !important;
        box-shadow: var(--upos-shadow) !important;
    }
    html[data-theme="dark"] .datepicker .datepicker-header,
    html[data-theme="dark"] .datepicker th.dow,
    html[data-theme="dark"] .datepicker th.datepicker-switch,
    html[data-theme="dark"] .datepicker th.prev,
    html[data-theme="dark"] .datepicker th.next,
    html[data-theme="dark"] .bootstrap-datetimepicker-widget th {
        color: var(--upos-text) !important;
    }
    html[data-theme="dark"] .datepicker .day,
    html[data-theme="dark"] .datepicker .day span,
    html[data-theme="dark"] .datepicker .month,
    html[data-theme="dark"] .datepicker .month span,
    html[data-theme="dark"] .datepicker .year,
    html[data-theme="dark"] .bootstrap-datetimepicker-widget .day,
    html[data-theme="dark"] .bootstrap-datetimepicker-widget .hour,
    html[data-theme="dark"] .bootstrap-datetimepicker-widget .minute {
        color: var(--upos-text-2) !important;
        background-color: transparent !important;
    }
    html[data-theme="dark"] .datepicker .day.old,
    html[data-theme="dark"] .datepicker .day.new,
    html[data-theme="dark"] .datepicker .month.old,
    html[data-theme="dark"] .datepicker .year.old,
    html[data-theme="dark"] .bootstrap-datetimepicker-widget .old {
        color: var(--upos-text-muted) !important;
    }
    html[data-theme="dark"] .datepicker .day:hover,
    html[data-theme="dark"] .datepicker .day:hover span,
    html[data-theme="dark"] .datepicker .month:hover,
    html[data-theme="dark"] .datepicker .year:hover,
    html[data-theme="dark"] .bootstrap-datetimepicker-widget .day:hover,
    html[data-theme="dark"] .bootstrap-datetimepicker-widget .hour:hover,
    html[data-theme="dark"] .bootstrap-datetimepicker-widget .minute:hover {
        background-color: var(--upos-surface-3) !important;
    }
    html[data-theme="dark"] .datepicker .active,
    html[data-theme="dark"] .datepicker .day.active,
    html[data-theme="dark"] .datepicker .day.active span,
    html[data-theme="dark"] .datepicker .month.active,
    html[data-theme="dark"] .datepicker .year.active,
    html[data-theme="dark"] .bootstrap-datetimepicker-widget .active {
        background-color: var(--upos-accent) !important;
        color: #fff !important;
    }
    html[data-theme="dark"] .datepicker .day.today,
    html[data-theme="dark"] .datepicker .month.today,
    html[data-theme="dark"] .datepicker .year.today,
    html[data-theme="dark"] .bootstrap-datetimepicker-widget .today {
        border-color: var(--upos-accent) !important;
    }
    /* Dropdown caret arrows ship white — blend them into the surface. */
    html[data-theme="dark"] .datepicker.dropdown-menu.bottom:after,
    html[data-theme="dark"] .bootstrap-datetimepicker-widget.dropdown-menu.bottom:after {
        border-bottom-color: var(--upos-surface) !important;
    }
    html[data-theme="dark"] .datepicker.dropdown-menu.top:after,
    html[data-theme="dark"] .bootstrap-datetimepicker-widget.dropdown-menu.top:after {
        border-top-color: var(--upos-surface) !important;
    }

    /* ------------------------------------------------------------------ *
     * 18. Settings page — vertical tab menu (.list-group)
     *     business/settings renders a Bootstrap 3 list-group nav; vendor
     *     CSS paints it white with dark links. The active item keeps the
     *     app's brand gradient (same --theme-* vars app.css uses).
     * ------------------------------------------------------------------ */
    html[data-theme="dark"] .pos-tab-container {
        background-color: var(--upos-surface) !important;
        border-color: var(--upos-border) !important;
        box-shadow: var(--upos-shadow) !important;
        color: var(--upos-text) !important;
    }
    html[data-theme="dark"] .list-group-item,
    html[data-theme="dark"] a.list-group-item,
    html[data-theme="dark"] button.list-group-item {
        background-color: var(--upos-surface-2) !important;
        border-color: var(--upos-border) !important;
        color: var(--upos-text-2) !important;
    }
    html[data-theme="dark"] a.list-group-item:hover,
    html[data-theme="dark"] a.list-group-item:focus,
    html[data-theme="dark"] button.list-group-item:hover {
        background-color: var(--upos-surface-3) !important;
        border-color: var(--upos-border) !important;
        color: var(--upos-text) !important;
    }
    html[data-theme="dark"] .list-group-item.active,
    html[data-theme="dark"] .list-group-item.active:hover,
    html[data-theme="dark"] .list-group-item.active:focus {
        background: linear-gradient(to right, var(--theme-700, #6366f1), var(--theme-900, #3b82f6)) !important;
        border-color: transparent !important;
        color: #fff !important;
    }

    /* ------------------------------------------------------------------ *
     * 18. AdminLTE .nav-tabs-custom (Products, Reports, Accounts, POS…)
     *     Vendor paints the tab strip white (#fff) with dark links and a
     *     white active tab; remap to the dark surfaces, keep the blue
     *     active-tab top border as the accent.
     * ------------------------------------------------------------------ */
    html[data-theme="dark"] .nav-tabs-custom {
        background-color: var(--upos-surface) !important;
        box-shadow: var(--upos-shadow) !important;
    }
    html[data-theme="dark"] .nav-tabs-custom > .nav-tabs {
        border-bottom-color: var(--upos-border) !important;
    }
    html[data-theme="dark"] .nav-tabs-custom > .nav-tabs > li > a {
        color: var(--upos-text-2) !important;
    }
    html[data-theme="dark"] .nav-tabs-custom > .nav-tabs > li > a:hover {
        color: var(--upos-text) !important;
        background-color: var(--upos-surface-2) !important;
    }
    html[data-theme="dark"] .nav-tabs-custom > .nav-tabs > li.active {
        border-top-color: #3c8dbc !important;
    }
    html[data-theme="dark"] .nav-tabs-custom > .nav-tabs > li.active > a,
    html[data-theme="dark"] .nav-tabs-custom > .nav-tabs > li.active:hover > a {
        background-color: var(--upos-surface) !important;
        color: var(--upos-text) !important;
        border-left-color: var(--upos-border) !important;
        border-right-color: var(--upos-border) !important;
        border-bottom-color: transparent !important;
    }

    /* ------------------------------------------------------------------ *
     * 19. TinyMCE editor chrome (Product Description, invoice header/
     *     footer, email bodies, document notes, Display Screen heading…)
     *     The oxide-dark skin is applied at init when dark; these rules
     *     also cover an editor initialized in light mode and toggled to
     *     dark without a reload (the writing area itself is synced via
     *     the #upos-theme-sync style injected in common.js).
     * ------------------------------------------------------------------ */
    html[data-theme="dark"] .tox-tinymce {
        background-color: var(--upos-surface-2) !important;
        border-color: var(--upos-border) !important;
    }
    html[data-theme="dark"] .tox .tox-toolbar,
    html[data-theme="dark"] .tox .tox-toolbar__primary,
    html[data-theme="dark"] .tox .tox-toolbar__overflow,
    html[data-theme="dark"] .tox .tox-toolbar-overlord,
    html[data-theme="dark"] .tox .tox-menubar,
    html[data-theme="dark"] .tox .tox-editor-header {
        background-color: var(--upos-surface-2) !important;
        background-image: none !important;
        border-color: var(--upos-border) !important;
    }
    html[data-theme="dark"] .tox .tox-tbtn,
    html[data-theme="dark"] .tox .tox-mbtn,
    html[data-theme="dark"] .tox .tox-split-btn,
    html[data-theme="dark"] .tox .tox-nav-btn {
        color: var(--upos-text-2) !important;
    }
    html[data-theme="dark"] .tox .tox-tbtn svg,
    html[data-theme="dark"] .tox .tox-mbtn svg {
        fill: var(--upos-text-2) !important;
    }
    html[data-theme="dark"] .tox .tox-tbtn:hover,
    html[data-theme="dark"] .tox .tox-mbtn:hover,
    html[data-theme="dark"] .tox .tox-tbtn:focus,
    html[data-theme="dark"] .tox .tox-mbtn:focus {
        background-color: var(--upos-surface-3) !important;
        color: var(--upos-text) !important;
    }
    html[data-theme="dark"] .tox .tox-tbtn:hover svg,
    html[data-theme="dark"] .tox .tox-mbtn:hover svg {
        fill: var(--upos-text) !important;
    }
    html[data-theme="dark"] .tox .tox-statusbar,
    html[data-theme="dark"] .tox .tox-statusbar a,
    html[data-theme="dark"] .tox .tox-statusbar__path-item,
    html[data-theme="dark"] .tox .tox-statusbar__wordcount,
    html[data-theme="dark"] .tox .tox-statusbar__branding,
    html[data-theme="dark"] .tox .tox-label,
    html[data-theme="dark"] .tox .tox-toolbar-label {
        color: var(--upos-text-2) !important;
    }
    html[data-theme="dark"] .tox .tox-statusbar__resize-handle svg {
        fill: var(--upos-text-muted) !important;
    }
    /* menus, dialogs and form controls opened from the editor */
    html[data-theme="dark"] .tox .tox-menu,
    html[data-theme="dark"] .tox .tox-collection,
    html[data-theme="dark"] .tox .tox-dialog,
    html[data-theme="dark"] .tox .tox-dialog__body,
    html[data-theme="dark"] .tox .tox-dialog__footer,
    html[data-theme="dark"] .tox .tox-dialog__title { color: var(--upos-text) !important; }
    html[data-theme="dark"] .tox .tox-menu,
    html[data-theme="dark"] .tox .tox-collection,
    html[data-theme="dark"] .tox .tox-dialog,
    html[data-theme="dark"] .tox .tox-dialog__body,
    html[data-theme="dark"] .tox .tox-dialog__footer {
        background-color: var(--upos-surface-2) !important;
        border-color: var(--upos-border) !important;
        box-shadow: var(--upos-shadow) !important;
    }
    html[data-theme="dark"] .tox .tox-menu-item,
    html[data-theme="dark"] .tox .tox-collection__item {
        color: var(--upos-text-2) !important;
    }
    html[data-theme="dark"] .tox .tox-menu-item:hover,
    html[data-theme="dark"] .tox .tox-collection__item:hover,
    html[data-theme="dark"] .tox .tox-collection__item--active {
        background-color: var(--upos-surface-3) !important;
        color: var(--upos-text) !important;
    }
    html[data-theme="dark"] .tox .tox-textfield,
    html[data-theme="dark"] .tox .tox-textarea,
    html[data-theme="dark"] .tox .tox-listboxfield .tox-listbox--select,
    html[data-theme="dark"] .tox .tox-selectbox .tox-select-list {
        background-color: var(--upos-surface-3) !important;
        border-color: var(--upos-border) !important;
        color: var(--upos-text) !important;
    }
    html[data-theme="dark"] .tox .tox-selectbox .tox-select-list:hover {
        background-color: var(--upos-surface-3) !important;
    }

    /* ------------------------------------------------------------------ *
     * 20. Bootstrap 3 wells + input-group addons
     *     The base sheets keep .well (#f5f5f5) and .input-group-addon
     *     (#eee) light, so dark-mode text becomes unreadable on them.
     *     Seen on: Reward Point Settings, Custom Labels (Field Type /
     *     Is required), POS payment rows, sell & purchase forms (86 views
     *     use input-group-addon, 13 use well).
     * ------------------------------------------------------------------ */
    html[data-theme="dark"] .well,
    html[data-theme="dark"] .well.well-lg,
    html[data-theme="dark"] .well.well-sm {
        background-color: var(--upos-surface) !important;
        border-color: var(--upos-border) !important;
        box-shadow: none !important;
        color: var(--upos-text) !important;
    }

    html[data-theme="dark"] .input-group-addon {
        background-color: var(--upos-surface-3) !important;
        border-color: var(--upos-border-2) !important;
        color: var(--upos-text) !important;
    }
    html[data-theme="dark"] .input-group-addon label,
    html[data-theme="dark"] .input-group-addon label input[type="checkbox"],
    html[data-theme="dark"] .input-group-addon label input[type="radio"] {
        color: var(--upos-text) !important;
    }

    /* Selects inside input groups that carry no .form-control class
       (Custom Labels "Field Type" select) fall back to browser defaults; 
       force them into the dark palette too. */
    html[data-theme="dark"] .input-group select,
    html[data-theme="dark"] .input-group-addon select {
        background-color: var(--upos-surface-2) !important;
        border-color: var(--upos-border-2) !important;
        color: var(--upos-text) !important;
    }
    html[data-theme="dark"] .input-group select:focus,
    html[data-theme="dark"] .input-group-addon select:focus {
        border-color: var(--upos-border-2) !important;
        box-shadow: 0 0 6px rgba(58, 77, 117, .55) !important;
    }

    /* ------------------------------------------------------------------ *
     * 21. Dark mode pass 2 — remaining light surfaces & controls
     *     (audit run 2: tfoot/.bg-gray totals, .box-footer, li>a tabs,
     *      iCheck sprite, Dropzone, FullCalendar v3, POS cards/actions,
     *      slate/indigo/violet/amber/sky utilities, light arbitrary hexes
     *      incl. `!` important variants used by the POS sticky header)
     * ------------------------------------------------------------------ */

    /* 21.1 Table totals rows (.bg-gray / tfoot) — vendor #d2d6de + #000 text */
    html[data-theme="dark"] .bg-gray,
    html[data-theme="dark"] tr.bg-gray > td,
    html[data-theme="dark"] tr.bg-gray > th {
        background-color: var(--upos-surface-3) !important;
        color: var(--upos-text) !important;
        border-color: var(--upos-border) !important;
    }
    html[data-theme="dark"] .bg-gray a,
    html[data-theme="dark"] .bg-gray small,
    html[data-theme="dark"] .bg-gray strong {
        color: var(--upos-text) !important;
    }
    html[data-theme="dark"] .table tfoot,
    html[data-theme="dark"] .table tfoot tr,
    html[data-theme="dark"] .table tfoot th,
    html[data-theme="dark"] .table tfoot td {
        background-color: var(--upos-surface-2) !important;
        color: var(--upos-text) !important;
        border-color: var(--upos-border) !important;
    }

    /* 21.2 .box-footer totals (Balance Sheet, Trial Balance) — vendor #fff */
    html[data-theme="dark"] .box-footer {
        background-color: var(--upos-surface-2) !important;
        border-top-color: var(--upos-border) !important;
        color: var(--upos-text) !important;
    }
    html[data-theme="dark"] .box-footer a {
        color: var(--upos-text) !important;
    }

    /* 21.3 Bootstrap 3 li>a tabs (Invoice Schemes) — active tab #fff/#555 */
    html[data-theme="dark"] .nav-tabs > li > a,
    html[data-theme="dark"] .nav-tabs > li > a:hover,
    html[data-theme="dark"] .nav-tabs > li > a:focus {
        background-color: transparent !important;
        color: var(--upos-text-2) !important;
        border-color: transparent !important;
    }
    html[data-theme="dark"] .nav-tabs > li.active > a,
    html[data-theme="dark"] .nav-tabs > li.active > a:hover {
        background-color: var(--upos-surface) !important;
        color: var(--upos-text) !important;
        border-color: var(--upos-border) !important;
    }

    /* 21.4 iCheck square-blue — replace the white PNG sprite with a themed box */
    html[data-theme="dark"] .icheckbox_square-blue,
    html[data-theme="dark"] .iradio_square-blue,
    html[data-theme="dark"] .icheckbox_square-blue:hover,
    html[data-theme="dark"] .iradio_square-blue:hover {
        background-image: none !important;
        background-color: var(--upos-surface-3) !important;
        border: 1px solid var(--upos-border-2) !important;
        border-radius: 4px !important;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
    }
    html[data-theme="dark"] .icheckbox_square-blue.checked,
    html[data-theme="dark"] .iradio_square-blue.checked {
        background-color: var(--theme-800, #4f46e5) !important;
        border-color: var(--theme-800, #4f46e5) !important;
    }
    html[data-theme="dark"] .icheckbox_square-blue.checked {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") !important;
        background-size: 65% !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }
    html[data-theme="dark"] .iradio_square-blue.checked {
        background-image: radial-gradient(circle, #fff 0 32%, rgba(0, 0, 0, 0) 34%) !important;
        background-size: 100% 100% !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }
    html[data-theme="dark"] .icheckbox_square-blue.disabled,
    html[data-theme="dark"] .iradio_square-blue.disabled {
        opacity: .45 !important;
    }

    /* 21.5 Dropzone upload areas (product/sell/purchase/expense forms, logo) */
    html[data-theme="dark"] .dropzone {
        background-color: var(--upos-surface-2) !important;
        border: 2px dashed var(--upos-border-2) !important;
        color: var(--upos-text-2) !important;
    }
    html[data-theme="dark"] .dropzone.dz-drag-hover {
        border-color: var(--theme-800, #4f46e5) !important;
        background-color: var(--upos-surface-3) !important;
    }
    html[data-theme="dark"] .dz-message,
    html[data-theme="dark"] .dz-message * {
        color: var(--upos-text-2) !important;
    }
    html[data-theme="dark"] .dropzone .dz-preview {
        background-color: var(--upos-surface-3) !important;
        border-color: var(--upos-border) !important;
        color: var(--upos-text) !important;
    }
    html[data-theme="dark"] .dropzone .dz-preview .dz-details {
        background-color: var(--upos-surface-3) !important;
        color: var(--upos-text) !important;
    }
    html[data-theme="dark"] .dropzone .dz-preview .dz-filename span,
    html[data-theme="dark"] .dropzone .dz-preview .dz-size span {
        background-color: rgba(8, 12, 24, .55) !important;
        color: var(--upos-text) !important;
    }
    html[data-theme="dark"] .dz-preview .dz-image {
        background-color: var(--upos-surface-3) !important;
    }
    html[data-theme="dark"] .dz-remove {
        color: var(--upos-text-2) !important;
    }

    /* 21.6 FullCalendar v3 (unthemed) — Calendar & Bookings */
    html[data-theme="dark"] .fc {
        color: var(--upos-text) !important;
    }
    html[data-theme="dark"] .fc th,
    html[data-theme="dark"] .fc td {
        border-color: var(--upos-border) !important;
    }
    html[data-theme="dark"] .fc-widget-header {
        background-color: var(--upos-surface-2) !important;
        color: var(--upos-text-2) !important;
        border-color: var(--upos-border) !important;
    }
    html[data-theme="dark"] .fc-widget-content {
        background-color: transparent !important;
        color: var(--upos-text) !important;
    }
    html[data-theme="dark"] .fc-unthemed td.fc-today,
    html[data-theme="dark"] .fc td.fc-today {
        background-color: var(--upos-surface-3) !important;
    }
    html[data-theme="dark"] .fc-divider,
    html[data-theme="dark"] .fc-unthemed .fc-divider {
        background-color: var(--upos-surface-3) !important;
    }
    html[data-theme="dark"] .fc-button,
    html[data-theme="dark"] .fc-toolbar button {
        background-image: none !important;
        background-color: var(--upos-surface-3) !important;
        border: 1px solid var(--upos-border-2) !important;
        color: var(--upos-text) !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
    html[data-theme="dark"] .fc-button:hover,
    html[data-theme="dark"] .fc-toolbar button:hover {
        background-color: var(--upos-border) !important;
        color: #fff !important;
    }
    html[data-theme="dark"] .fc-button:active,
    html[data-theme="dark"] .fc-button.fc-state-active,
    html[data-theme="dark"] .fc-state-active {
        background-color: var(--theme-800, #4f46e5) !important;
        border-color: var(--theme-800, #4f46e5) !important;
        color: #fff !important;
    }
    html[data-theme="dark"] .fc-state-hover,
    html[data-theme="dark"] .fc-day:hover {
        background-color: var(--upos-surface-3) !important;
        color: var(--upos-text) !important;
    }
    html[data-theme="dark"] .fc-list,
    html[data-theme="dark"] .fc-list tr,
    html[data-theme="dark"] .fc-list td {
        border-color: var(--upos-border) !important;
    }
    html[data-theme="dark"] .fc-list-header {
        background-color: var(--upos-surface-2) !important;
        color: var(--upos-text-2) !important;
    }
    html[data-theme="dark"] .fc-list-event:hover td {
        background-color: var(--upos-surface-3) !important;
        color: var(--upos-text) !important;
    }
    html[data-theme="dark"] .fc-event {
        background-color: var(--theme-800, #4f46e5) !important;
        border-color: transparent !important;
        color: #fff !important;
    }
    html[data-theme="dark"] .fc-event:hover {
        background-color: var(--theme-700, #6d78f7) !important;
    }
    html[data-theme="dark"] .fc-popover,
    html[data-theme="dark"] .fc-unthemed .fc-popover {
        background-color: var(--upos-surface-2) !important;
        border-color: var(--upos-border) !important;
        color: var(--upos-text) !important;
    }
    html[data-theme="dark"] .fc-popover-header {
        background-color: var(--upos-surface-3) !important;
        color: var(--upos-text) !important;
    }

    /* 21.7 POS create — product cards, empty state, fixed action bar */
    html[data-theme="dark"] .pos-card {
        background-color: var(--upos-surface) !important;
        border-color: var(--upos-border) !important;
    }
    html[data-theme="dark"] .pos-card:hover {
        box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .7) !important;
    }
    html[data-theme="dark"] .pos-card-name {
        color: var(--upos-text) !important;
    }
    html[data-theme="dark"] .pos-card-subcat-dot {
        color: var(--upos-text-muted) !important;
    }
    html[data-theme="dark"] .pos-card.is-active.cat {
        background-image: linear-gradient(180deg, rgba(99, 102, 241, .30) 0%, rgba(99, 102, 241, 0) 75%) !important;
        background-color: var(--upos-surface) !important;
        border-color: #6366f1 !important;
    }
    html[data-theme="dark"] .pos-card.is-active.brand {
        background-image: linear-gradient(180deg, rgba(139, 92, 246, .30) 0%, rgba(139, 92, 246, 0) 75%) !important;
        background-color: var(--upos-surface) !important;
        border-color: #8b5cf6 !important;
    }
    html[data-theme="dark"] tr.pos-empty-state-row,
    html[data-theme="dark"] tr.pos-empty-state-row > td {
        background-color: var(--upos-surface) !important;
        color: var(--upos-text-2) !important;
    }
    html[data-theme="dark"] .pos-form-actions {
        background-color: var(--upos-surface) !important;
        border-color: var(--upos-border) !important;
    }

    /* 21.8 Tailwind slate utilities (POS drawer/buttons, auth, lists) */
    html[data-theme="dark"] .tw-bg-slate-50 { background-color: var(--upos-surface-2) !important; }
    html[data-theme="dark"] .tw-bg-slate-100 { background-color: var(--upos-surface-3) !important; }
    html[data-theme="dark"] .tw-bg-slate-200 { background-color: var(--upos-border) !important; }
    html[data-theme="dark"] .tw-bg-white\/70 { background-color: rgba(17, 26, 46, .75) !important; }
    html[data-theme="dark"] .tw-bg-white\/90 { background-color: rgba(17, 26, 46, .90) !important; }
    html[data-theme="dark"] .tw-text-slate-900 { color: var(--upos-text) !important; }
    html[data-theme="dark"] .tw-text-slate-800 { color: var(--upos-text) !important; }
    html[data-theme="dark"] .tw-text-slate-700 { color: var(--upos-text) !important; }
    html[data-theme="dark"] .tw-text-slate-600 { color: var(--upos-text-2) !important; }
    html[data-theme="dark"] .tw-text-slate-500 { color: var(--upos-text-2) !important; }
    html[data-theme="dark"] .tw-text-slate-400 { color: var(--upos-text-muted) !important; }
    html[data-theme="dark"] .tw-text-slate-300 { color: var(--upos-text-muted) !important; }
    html[data-theme="dark"] .tw-border-slate-100,
    html[data-theme="dark"] .tw-border-slate-200,
    html[data-theme="dark"] .tw-border-slate-300 { border-color: var(--upos-border) !important; }
    html[data-theme="dark"] .hover\:tw-bg-slate-100:hover { background-color: var(--upos-surface-3) !important; }
    html[data-theme="dark"] .hover\:tw-bg-slate-200:hover { background-color: var(--upos-border) !important; }
    html[data-theme="dark"] .hover\:tw-text-slate-900:hover { color: var(--upos-text) !important; }
    html[data-theme="dark"] .hover\:tw-text-slate-700:hover { color: var(--upos-text) !important; }

    /* 21.9 Tailwind indigo / violet / amber / sky tints (badges, chips) */
    html[data-theme="dark"] .tw-bg-indigo-50 { background-color: #232c52 !important; }
    html[data-theme="dark"] .tw-text-indigo-700,
    html[data-theme="dark"] .tw-text-indigo-600,
    html[data-theme="dark"] .tw-text-indigo-500,
    html[data-theme="dark"] .tw-text-indigo-400 { color: #a5b4fc !important; }
    html[data-theme="dark"] .tw-border-indigo-100,
    html[data-theme="dark"] .tw-border-indigo-200 { border-color: #3b4a80 !important; }
    html[data-theme="dark"] .hover\:tw-bg-indigo-50:hover { background-color: #232c52 !important; }
    html[data-theme="dark"] .hover\:tw-border-indigo-300:hover { border-color: #5566b0 !important; }
    html[data-theme="dark"] .group:hover .group-hover\:tw-bg-white { background-color: var(--upos-surface) !important; }
    html[data-theme="dark"] .group:hover .group-hover\:tw-border-indigo-200 { border-color: #3b4a80 !important; }

    html[data-theme="dark"] .tw-bg-violet-50 { background-color: #2b2452 !important; }
    html[data-theme="dark"] .tw-text-violet-700,
    html[data-theme="dark"] .tw-text-violet-600,
    html[data-theme="dark"] .tw-text-violet-500,
    html[data-theme="dark"] .tw-text-violet-400 { color: #c4b5fd !important; }
    html[data-theme="dark"] .tw-border-violet-100,
    html[data-theme="dark"] .tw-border-violet-200 { border-color: #51458a !important; }
    html[data-theme="dark"] .hover\:tw-bg-violet-50:hover { background-color: #2b2452 !important; }
    html[data-theme="dark"] .hover\:tw-border-violet-300:hover { border-color: #6f60c0 !important; }
    html[data-theme="dark"] .group:hover .group-hover\:tw-border-violet-200 { border-color: #51458a !important; }

    html[data-theme="dark"] .tw-bg-amber-50 { background-color: #3a3117 !important; }
    html[data-theme="dark"] .tw-text-amber-700,
    html[data-theme="dark"] .tw-text-amber-800,
    html[data-theme="dark"] .tw-text-amber-900,
    html[data-theme="dark"] .tw-text-amber-600,
    html[data-theme="dark"] .tw-text-amber-500 { color: #fcd34d !important; }
    html[data-theme="dark"] .tw-border-amber-100 { border-color: #5c4d24 !important; }
    html[data-theme="dark"] .tw-decoration-amber-400 { text-decoration-color: #fcd34d !important; }
    html[data-theme="dark"] .hover\:tw-bg-amber-50:hover { background-color: #3a3117 !important; }
    html[data-theme="dark"] .hover\:tw-border-amber-300:hover { border-color: #8a7233 !important; }
    html[data-theme="dark"] .hover\:tw-text-amber-950:hover { color: #fcd34d !important; }
    html[data-theme="dark"] .hover\:tw-decoration-amber-700:hover { text-decoration-color: #fcd34d !important; }
    html[data-theme="dark"] .group:hover .group-hover\:tw-border-amber-200 { border-color: #8a7233 !important; }

    html[data-theme="dark"] .tw-bg-sky-50 { background-color: #122a3d !important; }
    html[data-theme="dark"] .tw-bg-sky-100 { background-color: #173654 !important; }
    html[data-theme="dark"] .tw-text-sky-700,
    html[data-theme="dark"] .tw-text-sky-600 { color: #7dd3fc !important; }
    html[data-theme="dark"] .tw-text-sky-500 { color: #38bdf8 !important; }

    /* 21.10 Arbitrary light hex utilities (POS sticky header, product lists,
          drawer, auth) — plain and `!` important variants */
    html[data-theme="dark"] .tw-bg-\[\#f8fafc\] { background-color: var(--upos-surface) !important; }
    html[data-theme="dark"] .tw-bg-\[\#f3f4f6\] { background-color: var(--upos-surface-2) !important; }
    html[data-theme="dark"] .tw-bg-\[\#e2e8f0\] { background-color: var(--upos-border) !important; }
    html[data-theme="dark"] .\!tw-bg-white { background-color: var(--upos-surface) !important; }
    html[data-theme="dark"] .\!tw-bg-\[\#f8fafc\] { background-color: var(--upos-surface) !important; }
    html[data-theme="dark"] .\!tw-bg-\[\#f3f4f6\] { background-color: var(--upos-surface-2) !important; }
    html[data-theme="dark"] .tw-border-\[\#e2e8f0\] { border-color: var(--upos-border) !important; }
    html[data-theme="dark"] .\!tw-border-\[\#e2e8f0\] { border-color: var(--upos-border) !important; }
    html[data-theme="dark"] .tw-border-\[\#e5e7eb\] { border-color: var(--upos-border) !important; }
    html[data-theme="dark"] .tw-border-\[\#D1D5DA\] { border-color: var(--upos-border) !important; }
    html[data-theme="dark"] .tw-border-\[\#cbd5e1\] { border-color: var(--upos-border) !important; }
    html[data-theme="dark"] .\!tw-border-slate-300 { border-color: var(--upos-border) !important; }
    html[data-theme="dark"] .tw-text-\[\#64748b\] { color: var(--upos-text-2) !important; }
    html[data-theme="dark"] .tw-text-\[\#94a3b8\] { color: var(--upos-text-muted) !important; }
    html[data-theme="dark"] .\!tw-text-\[\#94a3b8\] { color: var(--upos-text-muted) !important; }
    html[data-theme="dark"] .tw-text-\[\#1e1e1e\] { color: var(--upos-text) !important; }
    /* ------------------------------------------------------------------ *
     * Login page polish (dark)
     * ------------------------------------------------------------------ */
    /* Password show/hide eye icon (its SVG hard-codes stroke="#000000") */
    html[data-theme="dark"] #show_hide_icon svg {
        stroke: var(--upos-text-2) !important;
    }
    /* Lift the login card off the near-black canvas */
    html[data-theme="dark"] .tw-bg-white:has(#login-form) {
        background-color: var(--upos-surface-2) !important;
        box-shadow: var(--upos-shadow) !important;
    }

    /* ------------------------------------------------------------------ *
     * Register wizard (bootstrap wizard: step tabs + action buttons)
     * Vendor CSS ships light-only tab colors (#eee / #2184be / #9dc8e2)
     * and the global dark link rule clobbered the white active-tab text.
     * ------------------------------------------------------------------ */
    html[data-theme="dark"] .wizard > .steps a,
    html[data-theme="dark"] .wizard > .steps a:active,
    html[data-theme="dark"] .wizard > .steps a:hover {
        background-color: var(--upos-surface-3) !important;
        border: 1px solid var(--upos-border) !important;
        color: var(--upos-text-2) !important;
    }
    html[data-theme="dark"] .wizard > .steps .current a,
    html[data-theme="dark"] .wizard > .steps .current a:active,
    html[data-theme="dark"] .wizard > .steps .current a:hover {
        background-color: var(--upos-accent) !important;
        border-color: transparent !important;
        color: #fff !important;
    }
    html[data-theme="dark"] .wizard > .steps .done a,
    html[data-theme="dark"] .wizard > .steps .done a:active,
    html[data-theme="dark"] .wizard > .steps .done a:hover {
        background-color: var(--upos-surface-3) !important;
        border-color: var(--upos-border) !important;
        color: var(--upos-text) !important;
    }
    html[data-theme="dark"] .wizard > .steps .error a,
    html[data-theme="dark"] .wizard > .steps .error a:active,
    html[data-theme="dark"] .wizard > .steps .error a:hover {
        background-color: #dc2626 !important;
        border-color: transparent !important;
        color: #fff !important;
    }
    /* Previous / Next / Register action buttons */
    html[data-theme="dark"] .wizard .actions a {
        background-color: var(--upos-surface-2) !important;
        border: 1px solid var(--upos-border) !important;
        color: var(--upos-text) !important;
    }
    html[data-theme="dark"] .wizard .actions a.tw-dw-btn-primary {
        background-color: var(--upos-accent) !important;
        border-color: transparent !important;
        color: #fff !important;
    }
    /* Form section legends (Bootstrap `text-black` utility) */
    html[data-theme="dark"] .text-black {
        color: var(--upos-text) !important;
    }

    html[data-theme="dark"] .tw-ring-gray-200 { --tw-ring-color: var(--upos-border) !important; box-shadow: 0 0 0 1px var(--upos-border) !important; }
    html[data-theme="dark"] .\!tw-ring-gray-200 { --tw-ring-color: var(--upos-border) !important; box-shadow: 0 0 0 1px var(--upos-border) !important; }

    /* 22. Phase 2 — soften pastel utility chips (KPI icons, status dots)
         so they read as tinted surfaces instead of bright pastels. */
    html[data-theme="dark"] .tw-bg-green-50,
    html[data-theme="dark"] .tw-bg-green-100,
    html[data-theme="dark"] .tw-bg-emerald-100 { background-color: var(--upos-success-soft) !important; }
    html[data-theme="dark"] .tw-bg-yellow-50,
    html[data-theme="dark"] .tw-bg-yellow-100,
    html[data-theme="dark"] .tw-bg-amber-100,
    html[data-theme="dark"] .tw-bg-orange-100 { background-color: var(--upos-warning-soft) !important; }
    html[data-theme="dark"] .tw-bg-red-50,
    html[data-theme="dark"] .tw-bg-red-100,
    html[data-theme="dark"] .tw-bg-rose-100,
    html[data-theme="dark"] .tw-bg-pink-100 { background-color: var(--upos-danger-soft) !important; }
    html[data-theme="dark"] .tw-bg-blue-100,
    html[data-theme="dark"] .tw-bg-indigo-100,
    html[data-theme="dark"] .tw-bg-violet-100,
    html[data-theme="dark"] .tw-bg-purple-100 { background-color: var(--upos-accent-soft) !important; }

}