/* ==========================================================================
   UltimatePOS — Dark Theme
   Applied when <html data-theme="dark"> is set.
   Scoped to @media screen so printing / receipts always render on white.
   Brand/accent colors (.theme-header-bg, .theme-btn-bg, .theme-logo-bg,
   --theme-*) are intentionally left untouched so identity is preserved.
   ========================================================================== */

@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-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;

        /* 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;
    }

    /* ------------------------------------------------------------------ *
     * 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-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;
    }
    html[data-theme="dark"] .form-group label {
        color: var(--upos-text-2) !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;
    }

    /* ------------------------------------------------------------------ *
     * 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;
    }

    /* ------------------------------------------------------------------ *
     * 17. 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; }
    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; }

}