/** * Per-user color scheme. * * Activated by data-theme="dark" on (set by inline pre-paint script * in functions.php). Targets the customer portal chrome: page background, * cards, tables, dashboard filters, popovers, header/footer, and forms. */ html[data-theme="dark"] { color-scheme: dark; --tsc-bg: #1a1d21; --tsc-bg-elev: #23272d; --tsc-bg-elev-2: #2c313a; --tsc-text: #e6e6e6; --tsc-text-muted: #9aa0a6; --tsc-border: #3a3f47; --tsc-border-soft: #2d3137; --tsc-accent: #4caf50; --tsc-accent-soft: #2e7d32; --tsc-accent-bg: rgba(76, 175, 80, 0.12); --tsc-link: #7ed089; --tsc-link-hover: #a8e0b0; --tsc-input-bg: #2c313a; --tsc-input-border: #4a5059; --tsc-row-stripe: #262a31; --tsc-row-hover: #323843; } /* ---- Page chrome ---- */ html[data-theme="dark"] body, html[data-theme="dark"] .site, html[data-theme="dark"] .site-content, html[data-theme="dark"] #page, html[data-theme="dark"] .content-area { background-color: var(--tsc-bg) !important; color: var(--tsc-text); } html[data-theme="dark"] .site-header, html[data-theme="dark"] .site-header .col-full, html[data-theme="dark"] .site-branding, html[data-theme="dark"] .site-footer, html[data-theme="dark"] .secondary-navigation, html[data-theme="dark"] .main-navigation, html[data-theme="dark"] .storefront-handheld-footer-bar, html[data-theme="dark"] .storefront-breadcrumb, html[data-theme="dark"] .woocommerce-breadcrumb, html[data-theme="dark"] .storefront-breadcrumb .col-full { background-color: var(--tsc-bg) !important; color: var(--tsc-text); border: 0 !important; box-shadow: none !important; } /* Kill the bottom border/separator that creates the two-tone band */ html[data-theme="dark"] .site-header::after, html[data-theme="dark"] .site-header::before, html[data-theme="dark"] .storefront-breadcrumb::after, html[data-theme="dark"] .storefront-breadcrumb::before, html[data-theme="dark"] .site-content::before { display: none !important; background: transparent !important; border: 0 !important; box-shadow: none !important; height: 0 !important; } html[data-theme="dark"] .site-header a, html[data-theme="dark"] .site-footer a, html[data-theme="dark"] .main-navigation a, html[data-theme="dark"] .secondary-navigation a { color: var(--tsc-text); } 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, html[data-theme="dark"] p, html[data-theme="dark"] span, html[data-theme="dark"] li, html[data-theme="dark"] label, html[data-theme="dark"] legend, html[data-theme="dark"] dt, html[data-theme="dark"] dd { color: var(--tsc-text); } html[data-theme="dark"] a { color: var(--tsc-link); } html[data-theme="dark"] a:hover { color: var(--tsc-link-hover); } html[data-theme="dark"] mark { color: var(--tsc-accent) !important; } /* ---- Cards / KPI ---- */ html[data-theme="dark"] .acct-dashboard .acct-cards .card, html[data-theme="dark"] .card-container .card, html[data-theme="dark"] .card-container > .card { background-color: var(--tsc-bg-elev) !important; border: 1px solid var(--tsc-border) !important; box-shadow: 0 1px 2px rgba(0,0,0,0.4) !important; color: var(--tsc-text) !important; } html[data-theme="dark"] .acct-dashboard .acct-cards .card:hover, html[data-theme="dark"] .card-container .card:hover { border-color: var(--tsc-accent) !important; } html[data-theme="dark"] .acct-dashboard .acct-cards .card-title, html[data-theme="dark"] .acct-dashboard .acct-card-sub, html[data-theme="dark"] .card-container .card .card-title, html[data-theme="dark"] .card .card-title { color: var(--tsc-text-muted) !important; } html[data-theme="dark"] .acct-dashboard .acct-cards .card-text, html[data-theme="dark"] .acct-dashboard .acct-cards .number, html[data-theme="dark"] .card-container .card .card-text, html[data-theme="dark"] .card-container .card .number, html[data-theme="dark"] .card .card-text, html[data-theme="dark"] .card .number { color: var(--tsc-text) !important; } html[data-theme="dark"] .card .card-body, html[data-theme="dark"] .card-container .card .card-body { background-color: transparent !important; color: var(--tsc-text) !important; } /* KPI loading shimmer in dark */ html[data-theme="dark"] .acct-dashboard.is-loading .acct-cards .card-text[data-kpi], html[data-theme="dark"] .acct-dashboard.is-loading .acct-cards .number[data-kpi], html[data-theme="dark"] .acct-dashboard.is-loading .acct-cards .card-text > [data-kpi], html[data-theme="dark"] .acct-dashboard.is-loading .acct-cards .number > [data-kpi] { background-color: var(--tsc-bg-elev-2) !important; } html[data-theme="dark"] .tsc-skel-bar::after, html[data-theme="dark"] .acct-dashboard.is-loading .acct-cards [data-kpi]::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent) !important; } /* ---- Filters / toolbar ---- */ html[data-theme="dark"] .acct-dashboard .acct-filter-label { color: var(--tsc-text-muted); } html[data-theme="dark"] .acct-dashboard .acct-filter-input, html[data-theme="dark"] .acct-dashboard .acct-date input, html[data-theme="dark"] .acct-dashboard input[type="text"], html[data-theme="dark"] .acct-dashboard input[type="search"], html[data-theme="dark"] .acct-dashboard input[type="date"], html[data-theme="dark"] .acct-dashboard select { background: var(--tsc-input-bg) !important; border-color: var(--tsc-input-border) !important; color: var(--tsc-text); } html[data-theme="dark"] .acct-dashboard .acct-clear { color: var(--tsc-text-muted) !important; } html[data-theme="dark"] .acct-dashboard .acct-clear:hover { background: var(--tsc-bg-elev-2) !important; color: var(--tsc-text) !important; } html[data-theme="dark"] .acct-dashboard .acct-input-wrap.acct-multi { background: var(--tsc-input-bg) !important; border-color: var(--tsc-input-border) !important; } html[data-theme="dark"] .acct-dashboard .acct-filter select { background: var(--tsc-input-bg) !important; border-color: var(--tsc-input-border) !important; color: var(--tsc-text) !important; } html[data-theme="dark"] .acct-dashboard .acct-tag { background: #14361f; border-color: #2f7a47; color: #b7e8c2; } html[data-theme="dark"] .acct-dashboard .acct-tag-remove { color: #b7e8c2; } html[data-theme="dark"] .acct-dashboard .acct-reset { background-color: var(--tsc-bg-elev-2) !important; color: var(--tsc-text) !important; border-color: var(--tsc-border) !important; } html[data-theme="dark"] .acct-dashboard .acct-reset:hover, html[data-theme="dark"] .acct-dashboard .acct-reset:focus, html[data-theme="dark"] .acct-dashboard .acct-reset:active, html[data-theme="dark"] .acct-dashboard .acct-reset:focus:active { background-color: #353b45 !important; color: var(--tsc-text) !important; border-color: var(--tsc-border) !important; box-shadow: none !important; } html[data-theme="dark"] .acct-dashboard .acct-date-sep { color: var(--tsc-text-muted); } /* ---- Tables (DataTables / WooCommerce) ---- */ html[data-theme="dark"] table, html[data-theme="dark"] table.dataTable, html[data-theme="dark"] .shop_table, html[data-theme="dark"] .woocommerce table.shop_table, html[data-theme="dark"] .woocommerce-account table.shop_table { background-color: var(--tsc-bg-elev) !important; color: var(--tsc-text) !important; border-color: var(--tsc-border) !important; } html[data-theme="dark"] table thead, html[data-theme="dark"] table.dataTable thead, html[data-theme="dark"] .shop_table thead, html[data-theme="dark"] .woocommerce table.shop_table thead { background-color: var(--tsc-bg-elev-2) !important; } html[data-theme="dark"] table thead th, html[data-theme="dark"] table.dataTable thead th, html[data-theme="dark"] .shop_table thead th, html[data-theme="dark"] .woocommerce table.shop_table thead th { background-color: var(--tsc-bg-elev-2) !important; color: var(--tsc-text) !important; border-color: var(--tsc-border) !important; } html[data-theme="dark"] table tbody tr, html[data-theme="dark"] table.dataTable tbody tr, html[data-theme="dark"] .shop_table tbody tr, html[data-theme="dark"] .woocommerce table.shop_table tbody tr, html[data-theme="dark"] .shop_table tfoot tr, html[data-theme="dark"] .woocommerce table.shop_table tfoot tr { background-color: var(--tsc-bg-elev) !important; } html[data-theme="dark"] table tbody td, html[data-theme="dark"] table.dataTable tbody td, html[data-theme="dark"] .shop_table tbody td, html[data-theme="dark"] .woocommerce table.shop_table tbody td, html[data-theme="dark"] .woocommerce-account table.shop_table tbody td, html[data-theme="dark"] .shop_table tfoot td, html[data-theme="dark"] .shop_table tfoot th, html[data-theme="dark"] .woocommerce table.shop_table tfoot td, html[data-theme="dark"] .woocommerce table.shop_table tfoot th { background-color: transparent !important; color: var(--tsc-text) !important; border-color: var(--tsc-border-soft) !important; } html[data-theme="dark"] table.dataTable.stripe tbody tr.odd, html[data-theme="dark"] table.dataTable.display tbody tr.odd, html[data-theme="dark"] .shop_table tbody tr:nth-child(even) { background-color: var(--tsc-row-stripe) !important; } html[data-theme="dark"] table.dataTable tbody tr:hover, html[data-theme="dark"] table.dataTable.hover tbody tr:hover, html[data-theme="dark"] .shop_table tbody tr:hover { background-color: var(--tsc-row-hover) !important; } html[data-theme="dark"] table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child::before { background-color: var(--tsc-accent) !important; border-color: var(--tsc-accent) !important; color: #fff !important; box-shadow: none !important; } html[data-theme="dark"] table.dataTable thead .sorting::before, html[data-theme="dark"] table.dataTable thead .sorting::after, html[data-theme="dark"] table.dataTable thead .sorting_asc::before, html[data-theme="dark"] table.dataTable thead .sorting_asc::after, html[data-theme="dark"] table.dataTable thead .sorting_desc::before, html[data-theme="dark"] table.dataTable thead .sorting_desc::after { color: var(--tsc-text-muted) !important; opacity: 0.6; } 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_processing, html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate { color: var(--tsc-text); } html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--tsc-text) !important; background: transparent; border-color: var(--tsc-border); } html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current, html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--tsc-accent) !important; color: #fff !important; border-color: var(--tsc-accent) !important; } html[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--tsc-bg-elev-2) !important; color: var(--tsc-text) !important; border-color: var(--tsc-border) !important; } /* Column header filter icons */ html[data-theme="dark"] .acct-col-filter-btn { color: var(--tsc-text-muted) !important; } html[data-theme="dark"] .acct-col-filter-btn:hover { color: var(--tsc-text) !important; } html[data-theme="dark"] .acct-col-filter-btn.has-active, html[data-theme="dark"] .acct-col-filter-btn.is-open { color: var(--tsc-accent) !important; } /* DataTables skeleton bars */ html[data-theme="dark"] .tsc-skel-bar, html[data-theme="dark"] .tsc-dt-skeleton .tsc-skel-bar { background-color: var(--tsc-bg-elev-2) !important; } html[data-theme="dark"] .tsc-skel-bar::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent) !important; } /* DataTables "Show entries" select & search input */ html[data-theme="dark"] .dataTables_wrapper .dataTables_length select { background-color: var(--tsc-input-bg) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239aa0a6'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 8px center !important; background-size: 10px 6px !important; border: 1px solid var(--tsc-input-border) !important; color: var(--tsc-text) !important; } html[data-theme="dark"] .dataTables_wrapper .dataTables_filter input { background-color: var(--tsc-input-bg) !important; border: 1px solid var(--tsc-input-border) !important; color: var(--tsc-text) !important; } html[data-theme="dark"] .dts-search-clear { color: var(--tsc-text-muted) !important; } html[data-theme="dark"] .dts-search-clear:hover { background: var(--tsc-bg-elev-2) !important; color: var(--tsc-text) !important; } /* DataTables table-body skeleton rows (datatables-skeleton.css) */ html[data-theme="dark"] table tbody tr.dts-skel-row { background: var(--tsc-bg-elev) !important; } html[data-theme="dark"] table tbody tr.dts-skel-row:nth-child(even) { background: var(--tsc-row-stripe) !important; } html[data-theme="dark"] table tbody tr.dts-skel-row td { border-bottom-color: var(--tsc-border-soft) !important; } html[data-theme="dark"] .dts-skel-bar { background-color: var(--tsc-bg-elev-2) !important; } html[data-theme="dark"] .dts-skel-bar::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent) !important; } /* ---- Invoice cards / snapshot / aging ---- */ html[data-theme="dark"] .inv-account-title { color: var(--tsc-text) !important; } html[data-theme="dark"] .inv-account-row { border-bottom-color: var(--tsc-border-soft) !important; } html[data-theme="dark"] .inv-account-row dt { color: var(--tsc-text-muted) !important; } html[data-theme="dark"] .inv-account-row dd { color: var(--tsc-text) !important; } html[data-theme="dark"] .inv-status-pill { background: rgba(76, 175, 80, 0.15) !important; color: #7ed089 !important; } html[data-theme="dark"] .inv-status-pill.is-onhold { background: rgba(239, 83, 80, 0.15) !important; color: #ef9a9a !important; } html[data-theme="dark"] .inv-payment-amount { color: var(--tsc-text) !important; } html[data-theme="dark"] .inv-payment-date { color: var(--tsc-text-muted) !important; } html[data-theme="dark"] .inv-account-row dd .inv-payment-amount { color: var(--tsc-text) !important; } html[data-theme="dark"] .inv-account-row dd .inv-payment-date { color: var(--tsc-text-muted) !important; } html[data-theme="dark"] .inv-aging-bar { background: var(--tsc-bg-elev-2) !important; } html[data-theme="dark"] .inv-aging-legend { color: var(--tsc-text-muted) !important; } html[data-theme="dark"] .inv-aging-amt { color: var(--tsc-text) !important; } html[data-theme="dark"] .inv-aging-amt.is-credit { color: #7ed089 !important; } /* Invoice skeleton loading in dark mode */ html[data-theme="dark"] .inv-account-dashboard.is-loading .inv-status-pill[data-kpi] { background: var(--tsc-bg-elev-2) !important; } html[data-theme="dark"] .inv-account-dashboard.is-loading .inv-aging-amt { background: var(--tsc-bg-elev-2) !important; color: transparent !important; } html[data-theme="dark"] .inv-account-dashboard.is-loading .inv-account-row dd[data-kpi], html[data-theme="dark"] .inv-account-dashboard.is-loading .inv-payment-date[data-kpi], html[data-theme="dark"] .inv-account-dashboard.is-loading .inv-payment-amount[data-kpi] { background-color: var(--tsc-bg-elev-2) !important; border-radius: 3px; } /* ---- Forms / inputs (general) ---- */ html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="tel"], html[data-theme="dark"] input[type="url"], html[data-theme="dark"] input[type="date"], html[data-theme="dark"] textarea, html[data-theme="dark"] select { background-color: var(--tsc-input-bg); border: 1px solid var(--tsc-input-border); color: var(--tsc-text); } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--tsc-text-muted); } /* ---- WooCommerce account nav ---- */ html[data-theme="dark"] .woocommerce-MyAccount-navigation ul li a, html[data-theme="dark"] .woocommerce-MyAccount-content, html[data-theme="dark"] .woocommerce-MyAccount-content p, html[data-theme="dark"] .woocommerce-account .woocommerce-MyAccount-navigation li a { color: var(--tsc-text) !important; background-color: transparent !important; } html[data-theme="dark"] .woocommerce-MyAccount-navigation ul li a::before { color: var(--tsc-text-muted) !important; opacity: 0.7 !important; } html[data-theme="dark"] .woocommerce-MyAccount-navigation ul li:hover a::before { opacity: 1 !important; color: var(--tsc-text) !important; } html[data-theme="dark"] .woocommerce-MyAccount-navigation ul li, html[data-theme="dark"] .woocommerce-account .woocommerce-MyAccount-navigation li { border-color: var(--tsc-border) !important; background-color: transparent !important; } html[data-theme="dark"] .woocommerce-MyAccount-navigation ul li:hover { background-color: var(--tsc-bg-elev-2) !important; } html[data-theme="dark"] .woocommerce-MyAccount-navigation ul li.is-active { background-color: var(--tsc-accent-bg) !important; border-left: 3px solid var(--tsc-accent) !important; } html[data-theme="dark"] .woocommerce-MyAccount-navigation ul li.is-active a { background-color: transparent !important; color: var(--tsc-accent) !important; border-left: 0 !important; padding-left: 12px !important; padding-right: 12px !important; } html[data-theme="dark"] .woocommerce-MyAccount-navigation ul li.is-active a::before { color: var(--tsc-accent) !important; opacity: 1 !important; } html[data-theme="dark"] .woocommerce-message, html[data-theme="dark"] .woocommerce-notice { background-color: #1b4332 !important; color: #a7f3d0 !important; border-left-color: rgba(255, 255, 255, 0.15) !important; } html[data-theme="dark"] .woocommerce-info, html[data-theme="dark"] .woocommerce-noreviews, html[data-theme="dark"] p.no-comments { background-color: #1a3a5c !important; color: #93c5fd !important; border-left-color: rgba(255, 255, 255, 0.15) !important; } html[data-theme="dark"] .woocommerce-error { background-color: #5c1a1a !important; color: #fca5a5 !important; border-left-color: rgba(255, 255, 255, 0.15) !important; } html[data-theme="dark"] .woocommerce-message a, html[data-theme="dark"] .woocommerce-info a, html[data-theme="dark"] .woocommerce-error a, html[data-theme="dark"] .woocommerce-notice a, html[data-theme="dark"] .woocommerce-noreviews a, html[data-theme="dark"] .woocommerce-message .button, html[data-theme="dark"] .woocommerce-info .button, html[data-theme="dark"] .woocommerce-error .button, html[data-theme="dark"] .woocommerce-notice .button { color: inherit !important; } /* ---- WooCommerce edit-account form ---- */ html[data-theme="dark"] .woocommerce-EditAccountForm, html[data-theme="dark"] .woocommerce form.checkout, html[data-theme="dark"] .woocommerce form.woocommerce-form, html[data-theme="dark"] .woocommerce-account form { background-color: transparent !important; } html[data-theme="dark"] .woocommerce-EditAccountForm fieldset, html[data-theme="dark"] .tsc-color-scheme-fieldset, html[data-theme="dark"] .woocommerce-account fieldset { background-color: var(--tsc-bg-elev) !important; border: 1px solid var(--tsc-border) !important; border-radius: 4px; padding: 12px 16px !important; margin-bottom: 16px; } html[data-theme="dark"] .woocommerce-EditAccountForm fieldset legend, html[data-theme="dark"] .tsc-color-scheme-fieldset legend, html[data-theme="dark"] .woocommerce-account fieldset legend { background-color: var(--tsc-bg-elev) !important; color: var(--tsc-text) !important; border: 1px solid var(--tsc-border) !important; padding: 2px 8px !important; border-radius: 3px; } html[data-theme="dark"] .woocommerce-EditAccountForm label, html[data-theme="dark"] .woocommerce-account form label { color: var(--tsc-text) !important; } /* Show / hide password toggle */ html[data-theme="dark"] .show-password-input { background-color: var(--tsc-bg-elev-2) !important; color: var(--tsc-text) !important; border-left: 1px solid var(--tsc-border) !important; } html[data-theme="dark"] .show-password-input::after { color: var(--tsc-text) !important; } html[data-theme="dark"] .show-password-input.display-password::after { color: var(--tsc-accent) !important; } /* ---- Buttons ---- */ html[data-theme="dark"] .woocommerce button.button, html[data-theme="dark"] .woocommerce a.button, html[data-theme="dark"] .woocommerce input.button, html[data-theme="dark"] .button, html[data-theme="dark"] button.button { background-color: var(--tsc-bg-elev-2) !important; color: var(--tsc-text) !important; border: 1px solid var(--tsc-border) !important; } html[data-theme="dark"] .woocommerce button.button:hover, html[data-theme="dark"] .woocommerce a.button:hover, html[data-theme="dark"] .woocommerce input.button:hover, html[data-theme="dark"] .button:hover, html[data-theme="dark"] button.button:hover { background-color: #353b45 !important; border-color: var(--tsc-accent) !important; color: var(--tsc-text) !important; } html[data-theme="dark"] .woocommerce button.button.alt, html[data-theme="dark"] .woocommerce a.button.alt, html[data-theme="dark"] .woocommerce input.button.alt, html[data-theme="dark"] button.button.alt { background-color: var(--tsc-accent) !important; color: #fff !important; border-color: var(--tsc-accent) !important; } html[data-theme="dark"] .woocommerce button.button.alt:hover, html[data-theme="dark"] .woocommerce a.button.alt:hover, html[data-theme="dark"] .woocommerce input.button.alt:hover, html[data-theme="dark"] button.button.alt:hover { background-color: var(--tsc-accent-soft) !important; border-color: var(--tsc-accent-soft) !important; } /* Mobile menu toggle */ html[data-theme="dark"] button.menu-toggle, html[data-theme="dark"] button.menu-toggle:hover, html[data-theme="dark"] button.menu-toggle:focus { background-color: var(--tsc-bg-elev-2) !important; color: var(--tsc-text) !important; border: 1px solid var(--tsc-border) !important; } html[data-theme="dark"] button.menu-toggle span::before, html[data-theme="dark"] button.menu-toggle::before, html[data-theme="dark"] button.menu-toggle::after { color: var(--tsc-text) !important; background-color: var(--tsc-text) !important; } /* ---- Mobile navigation drawer ---- */ html[data-theme="dark"] .handheld-navigation, html[data-theme="dark"] .main-navigation.toggled .handheld-navigation, html[data-theme="dark"] .main-navigation.toggled div.menu { background-color: var(--tsc-bg-elev) !important; } html[data-theme="dark"] .handheld-navigation ul li a { color: var(--tsc-text) !important; border-color: var(--tsc-border) !important; } html[data-theme="dark"] .handheld-navigation ul li a:hover { color: var(--tsc-link-hover) !important; } html[data-theme="dark"] .handheld-navigation .dropdown-toggle { background-color: transparent !important; color: var(--tsc-text) !important; } /* ---- Footer distinction ---- */ html[data-theme="dark"] .site-footer { background-color: var(--tsc-bg-elev) !important; border-top: 1px solid var(--tsc-border) !important; } html[data-theme="dark"] .storefront-handheld-footer-bar { background-color: var(--tsc-bg-elev) !important; border-top: 1px solid var(--tsc-border) !important; } html[data-theme="dark"] .storefront-handheld-footer-bar ul li>a { color: var(--tsc-text) !important; } /* ---- Mobile filter drawer ---- */ html[data-theme="dark"] .acct-dashboard .acct-filters { background: var(--tsc-bg-elev) !important; border-color: var(--tsc-border) !important; } html[data-theme="dark"] .acct-dashboard .acct-filters-toggle { background: var(--tsc-bg-elev-2) !important; color: var(--tsc-text) !important; border-color: var(--tsc-border) !important; } html[data-theme="dark"] .acct-dashboard .acct-filters-toggle:hover, html[data-theme="dark"] .acct-dashboard .acct-filters-toggle:focus { background: #353b45 !important; color: var(--tsc-text) !important; } html[data-theme="dark"] .acct-dashboard .acct-filters-toggle .fa-filter { color: var(--tsc-text-muted) !important; } html[data-theme="dark"] .acct-drawer-close { color: var(--tsc-text) !important; border-bottom-color: var(--tsc-border) !important; } html[data-theme="dark"] .acct-drawer-close-btn { color: var(--tsc-text-muted) !important; } html[data-theme="dark"] .acct-drawer-close-btn:hover { background: var(--tsc-bg-elev-2) !important; color: var(--tsc-text) !important; } /* ---- Desktop filter popover ---- */ html[data-theme="dark"] .acct-dashboard .acct-filter.acct-popover-open { background: var(--tsc-bg-elev) !important; border-color: var(--tsc-border) !important; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5) !important; } /* ---- Active-filter banner ---- */ html[data-theme="dark"] .acct-active-filters { background: var(--tsc-bg-elev) !important; border-color: var(--tsc-border) !important; } html[data-theme="dark"] .acct-af-label { color: var(--tsc-accent) !important; } html[data-theme="dark"] .acct-af-chip { background: var(--tsc-bg-elev-2) !important; border-color: var(--tsc-border) !important; } html[data-theme="dark"] .acct-af-chip-label { color: var(--tsc-text-muted) !important; } html[data-theme="dark"] .acct-af-chip-value { color: var(--tsc-text) !important; } html[data-theme="dark"] .acct-af-chip-remove { color: var(--tsc-text-muted) !important; } html[data-theme="dark"] .acct-af-chip-remove:hover { color: #ef5350 !important; } html[data-theme="dark"] .acct-af-clear-all { color: var(--tsc-accent) !important; } html[data-theme="dark"] .acct-af-clear-all:hover { color: var(--tsc-link-hover) !important; } /* DataTables "Clear All" toolbar button */ html[data-theme="dark"] .dataTables_wrapper .dt-button.acct-clear-all { color: var(--tsc-accent) !important; } html[data-theme="dark"] .dataTables_wrapper .dt-button.acct-clear-all .fa { color: var(--tsc-accent) !important; } html[data-theme="dark"] .dataTables_wrapper .dt-button.acct-clear-all:hover { background: var(--tsc-accent-bg) !important; border-color: var(--tsc-accent) !important; color: var(--tsc-text) !important; } /* ---- DataTables buttons (Export, Columns, etc.) ---- */ html[data-theme="dark"] .dt-button, html[data-theme="dark"] button.dt-button, html[data-theme="dark"] a.dt-button, html[data-theme="dark"] .dataTables_wrapper .dt-buttons .dt-button { background-color: var(--tsc-bg-elev-2) !important; background-image: none !important; color: var(--tsc-text) !important; border: 1px solid var(--tsc-border) !important; box-shadow: none !important; text-shadow: none !important; } html[data-theme="dark"] .dt-button:hover, html[data-theme="dark"] button.dt-button:hover, html[data-theme="dark"] a.dt-button:hover, html[data-theme="dark"] .dataTables_wrapper .dt-buttons .dt-button:hover:not(.disabled) { background-color: #353b45 !important; background-image: none !important; border-color: var(--tsc-accent) !important; color: var(--tsc-text) !important; } html[data-theme="dark"] .dt-button.disabled, html[data-theme="dark"] .dataTables_wrapper .dt-buttons .dt-button.disabled { opacity: 0.5; color: var(--tsc-text-muted) !important; } /* DataTables column-visibility dropdown */ html[data-theme="dark"] div.dt-button-collection, html[data-theme="dark"] div.dt-button-collection.fixed { background-color: var(--tsc-bg-elev) !important; border: 1px solid var(--tsc-border) !important; box-shadow: 0 4px 16px rgba(0,0,0,0.6) !important; } html[data-theme="dark"] div.dt-button-collection .dt-button, html[data-theme="dark"] div.dt-button-collection button.dt-button { background-color: var(--tsc-bg-elev-2) !important; background-image: none !important; color: var(--tsc-text) !important; border: 1px solid var(--tsc-border) !important; margin: 2px 0 !important; } html[data-theme="dark"] div.dt-button-collection .dt-button:hover, html[data-theme="dark"] div.dt-button-collection button.dt-button:hover { background-color: #353b45 !important; border-color: var(--tsc-accent) !important; } html[data-theme="dark"] div.dt-button-collection .dt-button.active, html[data-theme="dark"] div.dt-button-collection .dt-button.active:not(.disabled) { background-color: var(--tsc-accent-bg) !important; background-image: none !important; border-color: var(--tsc-accent) !important; color: var(--tsc-text) !important; box-shadow: none !important; } html[data-theme="dark"] div.dt-button-background { background: rgba(0,0,0,0.5) !important; } /* Branded toolbar buttons (Add to cart / Checkout / FlexPay / Open Only) */ html[data-theme="dark"] .dataTables_wrapper .dt-button.acct-btn-primary { background: #2e7d32 !important; border-color: #2e7d32 !important; color: #fff !important; } html[data-theme="dark"] .dataTables_wrapper .dt-button.acct-btn-primary:hover { background: #1b5e20 !important; border-color: #1b5e20 !important; } html[data-theme="dark"] .dataTables_wrapper .dt-button.acct-btn-checkout { background: #1565c0 !important; border-color: #1565c0 !important; color: #fff !important; } html[data-theme="dark"] .dataTables_wrapper .dt-button.acct-btn-checkout:hover { background: #0d47a1 !important; border-color: #0d47a1 !important; } html[data-theme="dark"] .dataTables_wrapper .dt-button.acct-btn-flexpay, html[data-theme="dark"] .dataTables_wrapper .dt-button.acct-btn-open, html[data-theme="dark"] .dataTables_wrapper .dt-button.acct-btn-export { background: var(--tsc-bg-elev-2) !important; border: 1px solid var(--tsc-border) !important; color: var(--tsc-text) !important; } html[data-theme="dark"] .dataTables_wrapper .dt-button.acct-btn-flexpay:hover, html[data-theme="dark"] .dataTables_wrapper .dt-button.acct-btn-open:hover, html[data-theme="dark"] .dataTables_wrapper .dt-button.acct-btn-export:hover { background: #353b45 !important; border-color: var(--tsc-accent) !important; } html[data-theme="dark"] .dataTables_wrapper .dt-button.acct-btn-open.active { background: rgba(255, 193, 7, 0.15) !important; border-color: #ffc107 !important; color: #ffd54f !important; } /* ---- DataTables select checkmarks ---- */ html[data-theme="dark"] table.dataTable tbody td.select-checkbox::before, html[data-theme="dark"] table.dataTable tbody th.select-checkbox::before { border-color: var(--tsc-text) !important; } html[data-theme="dark"] table.dataTable tr.selected td.select-checkbox::after, html[data-theme="dark"] table.dataTable tr.selected th.select-checkbox::after { color: var(--tsc-text) !important; text-shadow: 1px 1px var(--tsc-row-hover), -1px -1px var(--tsc-row-hover), 1px -1px var(--tsc-row-hover), -1px 1px var(--tsc-row-hover) !important; } html[data-theme="dark"] table.dataTable tbody>tr.selected, html[data-theme="dark"] table.dataTable tbody>tr>.selected { background-color: var(--tsc-row-hover) !important; } /* ---- DataTables responsive modal (FlexPay / row detail) ---- */ html[data-theme="dark"] div.dtr-modal div.dtr-modal-display { background-color: var(--tsc-bg-elev) !important; border-color: var(--tsc-border) !important; color: var(--tsc-text) !important; } html[data-theme="dark"] div.dtr-modal div.dtr-modal-content { color: var(--tsc-text) !important; } html[data-theme="dark"] div.dtr-modal div.dtr-modal-content h2 { color: var(--tsc-text) !important; } html[data-theme="dark"] div.dtr-modal div.dtr-modal-close { background-color: var(--tsc-bg-elev-2) !important; border-color: var(--tsc-border) !important; color: var(--tsc-text) !important; } html[data-theme="dark"] div.dtr-modal div.dtr-modal-close:hover { background-color: #353b45 !important; } /* ---- FlexPay modal ---- */ html[data-theme="dark"] #FlexPayModal .modal-content { background-color: var(--tsc-bg-elev) !important; border-color: var(--tsc-border) !important; color: var(--tsc-text) !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important; } html[data-theme="dark"] #FlexPayModal .modal-content h2 { color: var(--tsc-text) !important; } html[data-theme="dark"] #FlexPayModal .modal-content p { color: var(--tsc-text-muted) !important; } html[data-theme="dark"] #FlexPayModal .close { color: var(--tsc-text-muted) !important; } html[data-theme="dark"] #FlexPayModal .close:hover, html[data-theme="dark"] #FlexPayModal .close:focus { color: var(--tsc-text) !important; } html[data-theme="dark"] #FlexPayModal input[type="number"] { background-color: var(--tsc-input-bg) !important; border: 1px solid var(--tsc-input-border) !important; color: var(--tsc-text) !important; } html[data-theme="dark"] #FlexPayModal input[type="number"]::placeholder { color: var(--tsc-text-muted) !important; } /* Responsive child-row details list */ html[data-theme="dark"] table.dataTable>tbody>tr.child ul.dtr-details>li { border-bottom-color: var(--tsc-border-soft) !important; } html[data-theme="dark"] table.dataTable>tbody>tr.child span.dtr-title { color: var(--tsc-text-muted) !important; } html[data-theme="dark"] table.dataTable>tbody>tr.child span.dtr-data { color: var(--tsc-text) !important; } /* ---- Document loader / download page ---- */ html[data-theme="dark"] .loading-container { background-color: var(--tsc-bg) !important; } html[data-theme="dark"] .loading-skeleton { background-color: var(--tsc-bg-elev) !important; border-color: var(--tsc-border) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important; } html[data-theme="dark"] .skeleton-logo, html[data-theme="dark"] .skeleton-title-large, html[data-theme="dark"] .skeleton-title, html[data-theme="dark"] .skeleton-line { background-color: #353b45 !important; } html[data-theme="dark"] .skeleton-table-header-row, html[data-theme="dark"] .skeleton-table-header-small { background-color: #353b45 !important; border-bottom-color: var(--tsc-border) !important; } html[data-theme="dark"] .skeleton-equipment-table, html[data-theme="dark"] .skeleton-remaining-table { border-color: var(--tsc-border) !important; } html[data-theme="dark"] .skeleton-equipment-row, html[data-theme="dark"] .skeleton-remaining-row { background-color: var(--tsc-bg-elev-2) !important; } html[data-theme="dark"] .skeleton-table-content { background-color: var(--tsc-bg-elev) !important; } html[data-theme="dark"] .skeleton-equipment-row { border-bottom-color: var(--tsc-border-soft) !important; } html[data-theme="dark"] .skeleton-shimmer, html[data-theme="dark"] .skeleton-shimmer-slow { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent) !important; } html[data-theme="dark"] .loading-text { color: var(--tsc-text-muted) !important; } html[data-theme="dark"] .loading-spinner { border-color: var(--tsc-border) !important; border-top-color: var(--tsc-accent) !important; } html[data-theme="dark"] .progress-bar { background-color: var(--tsc-border) !important; } html[data-theme="dark"] .progress-fill { background-color: var(--tsc-accent) !important; } html[data-theme="dark"] .error-container { color: var(--tsc-text-muted) !important; } html[data-theme="dark"] .error-container h2 { color: #ef5350 !important; } html[data-theme="dark"] .error-container p { color: var(--tsc-text-muted) !important; } html[data-theme="dark"] .error-container button { background-color: var(--tsc-accent-soft) !important; color: #fff !important; } html[data-theme="dark"] .error-container button:hover { background-color: var(--tsc-accent) !important; } html[data-theme="dark"] .download-button { background-color: var(--tsc-accent-soft) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important; } html[data-theme="dark"] .download-button:hover { background-color: var(--tsc-accent) !important; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5) !important; } /* ---- Admin account switcher ---- */ html[data-theme="dark"] .admin-acct-switch .admin-acct-field label { color: var(--tsc-text-muted) !important; } html[data-theme="dark"] .admin-acct-switch .admin-acct-input-wrap input { background: var(--tsc-input-bg) !important; border-color: var(--tsc-input-border) !important; color: var(--tsc-text) !important; } html[data-theme="dark"] .admin-acct-switch .admin-acct-input-wrap input:focus { border-color: var(--tsc-accent) !important; } html[data-theme="dark"] .admin-acct-switch .admin-acct-clear { color: var(--tsc-text-muted) !important; } html[data-theme="dark"] .admin-acct-switch .admin-acct-clear:hover { background: var(--tsc-bg-elev-2) !important; color: var(--tsc-text) !important; } html[data-theme="dark"] .admin-acct-switch .admin-acct-count, html[data-theme="dark"] .admin-acct-switch .admin-acct-status { color: var(--tsc-text-muted) !important; } html[data-theme="dark"] .admin-acct-switch .admin-acct-results { background: var(--tsc-bg-elev) !important; border-color: var(--tsc-border) !important; } html[data-theme="dark"] .admin-acct-switch .admin-acct-results li { border-bottom-color: var(--tsc-border-soft) !important; } html[data-theme="dark"] .admin-acct-switch .admin-acct-results a { color: var(--tsc-text) !important; } html[data-theme="dark"] .admin-acct-switch .admin-acct-results a:hover, html[data-theme="dark"] .admin-acct-switch .admin-acct-results a:focus { background: var(--tsc-row-hover) !important; } html[data-theme="dark"] .admin-acct-switch .admin-acct-results .admin-acct-no { color: var(--tsc-text-muted) !important; } /* ---- Chart cards (cost report) ---- */ html[data-theme="dark"] .cost-report .cr-chart-card { background-color: var(--tsc-bg-elev) !important; border: 1px solid var(--tsc-border) !important; color: var(--tsc-text); } html[data-theme="dark"] .cost-report .cr-chart-title, html[data-theme="dark"] .cost-report .cr-chart-header .cr-chart-title, html[data-theme="dark"] .cost-report #crGroupLabel { color: var(--tsc-text) !important; } html[data-theme="dark"] .cost-report .cr-chart-toggle { border-color: var(--tsc-border) !important; } html[data-theme="dark"] .cost-report .cr-toggle-btn { background: var(--tsc-bg-elev-2) !important; color: var(--tsc-text) !important; } html[data-theme="dark"] .cost-report .cr-toggle-btn + .cr-toggle-btn { border-left-color: var(--tsc-border) !important; } html[data-theme="dark"] .cost-report .cr-toggle-btn.is-active { background: var(--tsc-accent) !important; color: #fff !important; } html[data-theme="dark"] .cost-report .cr-chart-skeleton { background-color: var(--tsc-bg-elev-2) !important; } /* ---- Cost report filters ---- */ html[data-theme="dark"] .cost-report .cr-filters { border-bottom-color: var(--tsc-border) !important; } html[data-theme="dark"] .cost-report .cr-filter label { color: var(--tsc-text-muted) !important; } html[data-theme="dark"] .cost-report .cr-filter input[type="text"], html[data-theme="dark"] .cost-report .cr-filter input[type="date"], html[data-theme="dark"] .cost-report .cr-input-wrap.cr-multi { background: var(--tsc-input-bg) !important; border-color: var(--tsc-input-border) !important; color: var(--tsc-text) !important; } html[data-theme="dark"] .cost-report .cr-filter input[type="date"]::-webkit-datetime-edit, html[data-theme="dark"] .cost-report .cr-filter input[type="date"]::-webkit-datetime-edit-fields-wrapper, html[data-theme="dark"] .cost-report .cr-filter input[type="date"]::-webkit-datetime-edit-text, html[data-theme="dark"] .cost-report .cr-filter input[type="date"]::-webkit-datetime-edit-month-field, html[data-theme="dark"] .cost-report .cr-filter input[type="date"]::-webkit-datetime-edit-day-field, html[data-theme="dark"] .cost-report .cr-filter input[type="date"]::-webkit-datetime-edit-year-field { color: var(--tsc-text) !important; } html[data-theme="dark"] .cost-report .cr-input-wrap.cr-multi input { background: transparent !important; border: 0 !important; color: var(--tsc-text) !important; } html[data-theme="dark"] .cost-report .cr-filter input::placeholder { color: var(--tsc-text-muted) !important; } html[data-theme="dark"] .cost-report .cr-filter input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) brightness(1) !important; } html[data-theme="dark"] .cost-report .cr-clear { color: var(--tsc-text-muted) !important; } html[data-theme="dark"] .cost-report .cr-clear:hover { background: var(--tsc-bg-elev-2) !important; color: var(--tsc-text) !important; } html[data-theme="dark"] .cost-report .cr-date-sep { color: var(--tsc-text-muted) !important; } html[data-theme="dark"] .cost-report .cr-tag { background: #14361f !important; border-color: #2f7a47 !important; color: #b7e8c2 !important; } html[data-theme="dark"] .cost-report .cr-tag-remove { color: #b7e8c2 !important; } /* ---- Cost report mobile drawer dark mode ---- */ @media (max-width: 768px) { html[data-theme="dark"] .cost-report .cr-filters-toggle { background: var(--tsc-bg-elev-2) !important; color: var(--tsc-text) !important; border-color: var(--tsc-border) !important; } html[data-theme="dark"] .cost-report .cr-filters-toggle:hover, html[data-theme="dark"] .cost-report .cr-filters-toggle:focus, html[data-theme="dark"] .cost-report .cr-filters-toggle:active { background: #353b45 !important; color: var(--tsc-text) !important; } html[data-theme="dark"] .cost-report .cr-filters-toggle .fa-filter { color: var(--tsc-text-muted) !important; } html[data-theme="dark"] .cost-report .cr-filters { background: var(--tsc-bg-elev) !important; border-top-color: var(--tsc-border) !important; box-shadow: 0 -4px 16px rgba(0,0,0,0.4) !important; } html[data-theme="dark"] .cr-drawer-close { color: var(--tsc-text) !important; border-bottom-color: var(--tsc-border) !important; } html[data-theme="dark"] .cr-drawer-close-btn { color: var(--tsc-text-muted) !important; } html[data-theme="dark"] .cr-drawer-close-btn:hover { background: var(--tsc-bg-elev-2) !important; color: var(--tsc-text) !important; } html[data-theme="dark"] .cr-filters-backdrop.is-open { background: rgba(0,0,0,0.6) !important; } } /* ---- Cart totals (cart page) ---- */ html[data-theme="dark"] .cart_totals { background-color: transparent !important; } html[data-theme="dark"] .cart_totals h2 { color: var(--tsc-text) !important; } html[data-theme="dark"] .cart_totals .shop_table th { background-color: var(--tsc-bg-elev) !important; color: var(--tsc-text-muted) !important; } html[data-theme="dark"] .cart_totals .shop_table td { background-color: var(--tsc-bg-elev) !important; color: var(--tsc-text) !important; } /* ---- Checkout review order ---- */ html[data-theme="dark"] #order_review { background-color: var(--tsc-bg-elev) !important; } html[data-theme="dark"] .woocommerce-checkout-review-order-table tfoot th { color: var(--tsc-text) !important; } html[data-theme="dark"] .woocommerce-checkout-review-order-table tfoot td { color: var(--tsc-text) !important; } /* ---- Payment section (checkout) ---- */ html[data-theme="dark"] #payment { background-color: var(--tsc-bg-elev) !important; border-radius: 4px; } html[data-theme="dark"] #payment .payment_methods { background-color: var(--tsc-bg-elev) !important; } html[data-theme="dark"] #payment .payment_methods li { background-color: var(--tsc-bg-elev) !important; border-bottom: 1px solid var(--tsc-border-soft) !important; } html[data-theme="dark"] #payment .payment_methods label { color: var(--tsc-text) !important; background-color: transparent !important; } html[data-theme="dark"] #payment .payment_box { background-color: var(--tsc-bg-elev-2) !important; color: var(--tsc-text) !important; } html[data-theme="dark"] #payment .payment_box::before { border-bottom-color: var(--tsc-bg-elev-2) !important; } html[data-theme="dark"] #payment .payment_box .nav-tabs, html[data-theme="dark"] #payment .payment_box .wc-payment-form .nav-tabs, html[data-theme="dark"] #payment .payment_box ul.tabs { background-color: var(--tsc-bg-elev-2) !important; border-color: var(--tsc-border) !important; } html[data-theme="dark"] #payment .payment_box .nav-tabs li a, html[data-theme="dark"] #payment .payment_box .nav-tabs li button, html[data-theme="dark"] #payment .payment_box ul.tabs li a { background-color: var(--tsc-bg-elev-2) !important; color: var(--tsc-text-muted) !important; border-color: var(--tsc-border) !important; } html[data-theme="dark"] #payment .payment_box .nav-tabs li.active a, html[data-theme="dark"] #payment .payment_box .nav-tabs li.active button, html[data-theme="dark"] #payment .payment_box .nav-tabs li a.active, html[data-theme="dark"] #payment .payment_box ul.tabs li.active a { background-color: var(--tsc-bg-elev) !important; color: var(--tsc-text) !important; border-bottom-color: var(--tsc-bg-elev) !important; } html[data-theme="dark"] #payment .payment_box .tab-content, html[data-theme="dark"] #payment .payment_box .tab-pane { background-color: var(--tsc-bg-elev-2) !important; color: var(--tsc-text) !important; } html[data-theme="dark"] #payment .payment_box fieldset { background-color: transparent !important; border: 0 !important; } html[data-theme="dark"] #payment .payment_box fieldset label { color: var(--tsc-text-muted) !important; } html[data-theme="dark"] #payment .payment_box p { color: var(--tsc-text-muted) !important; } html[data-theme="dark"] #payment .payment_box .wc-credit-card-form-card-number, html[data-theme="dark"] #payment .payment_box .wc-credit-card-form-card-expiry, html[data-theme="dark"] #payment .payment_box .wc-credit-card-form-card-cvc { background-color: var(--tsc-input-bg) !important; border: 1px solid var(--tsc-input-border) !important; color: var(--tsc-text) !important; } html[data-theme="dark"] #payment .woocommerce-terms-and-conditions { background-color: var(--tsc-bg-elev-2) !important; color: var(--tsc-text) !important; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4) !important; } html[data-theme="dark"] #payment .place-order { background-color: transparent !important; } /* ---- Checkout form inputs & textareas ---- */ html[data-theme="dark"] .woocommerce-checkout input[type="text"], html[data-theme="dark"] .woocommerce-checkout input[type="email"], html[data-theme="dark"] .woocommerce-checkout input[type="tel"], html[data-theme="dark"] .woocommerce-checkout input[type="number"], html[data-theme="dark"] .woocommerce-checkout input[type="password"], html[data-theme="dark"] .woocommerce-checkout textarea, html[data-theme="dark"] .woocommerce-checkout select, html[data-theme="dark"] .woocommerce-checkout .input-text { background-color: var(--tsc-input-bg) !important; border-color: var(--tsc-input-border) !important; color: var(--tsc-text) !important; } html[data-theme="dark"] .woocommerce-checkout input::placeholder, html[data-theme="dark"] .woocommerce-checkout textarea::placeholder { color: var(--tsc-text-muted) !important; } html[data-theme="dark"] .woocommerce-checkout .form-row label { color: var(--tsc-text) !important; } html[data-theme="dark"] .woocommerce-checkout .form-row label .required { color: #ef5350 !important; } /* ---- Select2 / selectWoo dropdowns ---- */ html[data-theme="dark"] .select2-container--default .select2-selection--single { background-color: var(--tsc-input-bg) !important; border-color: var(--tsc-input-border) !important; color: var(--tsc-text) !important; } html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--tsc-text) !important; } html[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--tsc-text-muted) transparent transparent transparent !important; } html[data-theme="dark"] .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent var(--tsc-text-muted) transparent !important; } html[data-theme="dark"] .select2-dropdown { background-color: var(--tsc-bg-elev) !important; border-color: var(--tsc-border) !important; color: var(--tsc-text) !important; } html[data-theme="dark"] .select2-search--dropdown .select2-search__field { background-color: var(--tsc-input-bg) !important; border-color: var(--tsc-input-border) !important; color: var(--tsc-text) !important; } html[data-theme="dark"] .select2-results__option { color: var(--tsc-text) !important; } html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected], html[data-theme="dark"] .select2-container--default .select2-results__option--highlighted[data-selected] { background-color: var(--tsc-accent) !important; color: #fff !important; } html[data-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"], html[data-theme="dark"] .select2-container--default .select2-results__option[data-selected="true"] { background-color: var(--tsc-bg-elev-2) !important; } /* ---- Color-scheme selector itself ---- */ .tsc-color-scheme-fieldset .tsc-color-scheme-options { display: inline-flex; gap: 18px; flex-wrap: wrap; margin-right: 12px; } .tsc-color-scheme-fieldset .tsc-color-scheme-option { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-weight: normal; } .tsc-color-scheme-fieldset .tsc-color-scheme-option input[type="radio"] { margin: 0; }