/* ===================================================================== * Dark theme — scoped to [data-theme="dark"] on . * * Strategy: ONLY override neutral surfaces (bg / text / border / shadows) * via Bootstrap CSS variables so the primary accent still follows the * active color_scheme (theme-default.css = purple, theme-evidentia.css = * teal). Component-level selectors fix spots that hardcoded light hexes. * * Keep `[data-theme="dark"]` the outer scope so the file is inert in * light mode — no runtime cost to load it unconditionally. * ===================================================================== */ [data-theme="dark"] { --bs-body-bg: #1b1b29; --bs-body-color: #d4d2e3; --bs-body-color-rgb: 212, 210, 227; --bs-tertiary-bg: #252537; --bs-tertiary-color: #8a889c; --bs-secondary-bg: #2a2a3d; --bs-secondary-color: #aeacbd; --bs-border-color: #3a3a4f; --bs-border-color-translucent: rgba(255, 255, 255, 0.08); --bs-emphasis-color: #ffffff; --bs-heading-color: #e8e6f6; --bs-link-color: var(--bs-primary); --bs-link-hover-color: var(--bs-primary); color-scheme: dark; } /* core.css scopes --bs-card-title-color INSIDE `.card`, not at :root, * so an html-level override is shadowed by the closer `.card` ancestor * for every descendant `.card-title`. Override the var on `.card` (and * subtitle for symmetry) so every `.card-title` / `.card-subtitle` * across the app picks up body color in dark mode. */ [data-theme="dark"] .card { --bs-card-title-color: #e8e6f6; --bs-card-subtitle-color: var(--bs-tertiary-color); } /* ---- Global body + text ---- */ [data-theme="dark"] body { background-color: var(--bs-body-bg); color: var(--bs-body-color); } [data-theme="dark"] .text-muted, [data-theme="dark"] .text-secondary { color: var(--bs-tertiary-color) !important; } [data-theme="dark"] .text-dark, [data-theme="dark"] .text-body { color: var(--bs-body-color) !important; } /* core.css ships `.text-heading { color: #444050 !important; }` — a hardcoded dark gray that vanishes against the dark body. Override site-wide so any reads correctly in dark mode. */ [data-theme="dark"] .text-heading { color: var(--bs-heading-color) !important; } /* ---- Cards / containers ---- */ [data-theme="dark"] .card, [data-theme="dark"] .card-body, [data-theme="dark"] .card-header, [data-theme="dark"] .card-footer { background-color: #232334; border-color: var(--bs-border-color); color: var(--bs-body-color); } [data-theme="dark"] .card-header { background-color: #232334; border-bottom-color: var(--bs-border-color); } /* ---- Tables ---- */ [data-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: var(--bs-body-color); --bs-table-striped-bg: rgba(255, 255, 255, 0.025); --bs-table-striped-color: var(--bs-body-color); --bs-table-hover-bg: rgba(255, 255, 255, 0.04); --bs-table-hover-color: var(--bs-body-color); --bs-table-border-color: var(--bs-border-color); color: var(--bs-body-color); border-color: var(--bs-border-color); } [data-theme="dark"] .table thead th, [data-theme="dark"] .table tfoot th { background-color: #2b2b3f !important; color: #b9b7cc !important; border-bottom-color: var(--bs-border-color) !important; } [data-theme="dark"] .table tbody td { color: var(--bs-body-color) !important; border-color: var(--bs-border-color); } /* DataTables wrappers + pagination pill */ [data-theme="dark"] .dataTables_wrapper, [data-theme="dark"] .dataTables_wrapper .dataTables_info, [data-theme="dark"] .dataTables_wrapper .dataTables_length label, [data-theme="dark"] .dataTables_wrapper .dataTables_filter label { color: var(--bs-body-color); } [data-theme="dark"] .dataTables_paginate .paginate_button { color: var(--bs-body-color) !important; } [data-theme="dark"] .dataTables_paginate .paginate_button.disabled { color: var(--bs-tertiary-color) !important; } /* ---- Navbar (topbar) ---- */ [data-theme="dark"] .layout-navbar, [data-theme="dark"] .navbar, [data-theme="dark"] .topbar-inner { background-color: #1e1e2d; border-color: var(--bs-border-color); color: var(--bs-body-color); } [data-theme="dark"] .topbar-search, [data-theme="dark"] #globalSearchInput { background-color: #2a2a3d; border-color: var(--bs-border-color); color: var(--bs-body-color); } [data-theme="dark"] #globalSearchInput::placeholder { color: var(--bs-tertiary-color); } [data-theme="dark"] .topbar-search i, [data-theme="dark"] .topbar-shortcut { color: var(--bs-tertiary-color); } [data-theme="dark"] .topbar-divider { background-color: var(--bs-border-color); } [data-theme="dark"] .topbar-theme-toggle, [data-theme="dark"] .topbar-mobile-toggle, [data-theme="dark"] .topbar-lang-toggle, [data-theme="dark"] .topbar-user-toggle { color: var(--bs-body-color); } [data-theme="dark"] .topbar-user-toggle:hover, [data-theme="dark"] .topbar-theme-toggle:hover, [data-theme="dark"] .topbar-lang-toggle:hover { background-color: rgba(255, 255, 255, 0.05); } /* ---- Sidebar ---- */ [data-theme="dark"] #layout-menu, [data-theme="dark"] .layout-menu { background-color: #1e1e2d; border-color: var(--bs-border-color); } [data-theme="dark"] .menu-inner .menu-item .menu-link { color: var(--bs-body-color); } [data-theme="dark"] .menu-inner .menu-item .menu-link:hover { color: var(--bs-emphasis-color); background-color: rgba(255, 255, 255, 0.03); } [data-theme="dark"] .menu-inner .menu-item.active > .menu-link:not(.menu-toggle) { background-color: rgba(var(--bs-primary-rgb), 0.15); color: var(--bs-primary); } [data-theme="dark"] .menu-inner .menu-header { color: var(--bs-tertiary-color); } [data-theme="dark"] .sidebar-collapse-toggle, [data-theme="dark"] .app-brand { border-color: var(--bs-border-color); color: var(--bs-body-color); } /* ---- Modals + dropdowns + popovers ---- */ [data-theme="dark"] .modal-content, [data-theme="dark"] .dropdown-menu, [data-theme="dark"] .popover, [data-theme="dark"] .offcanvas { background-color: #232334; border-color: var(--bs-border-color); color: var(--bs-body-color); } [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { border-color: var(--bs-border-color); } /* Modal backdrop: core.css ships #97959e at 0.5 opacity which washes out * to a light-gray overlay over the dark body — looks like a "white shadow" * in dark mode. Also the sidebar's stacking context can sit above the * default backdrop z-index so only the page area gets dimmed. * * Use a soft dark overlay at 0.4 opacity — calibrated against the * addUnlicensedWizardModal screenshot the user marked as correct, where * page content (cards, table rows, status badges) is clearly readable * through the dim. Going higher (0.6+) makes the page look pitch-black, * not a fade. Bump z-index above the sidebar (max 1100) so one shade * covers sidebar + content together. * * Override the CSS vars (not the .show opacity) so Bootstrap's own * `opacity: var(--bs-backdrop-opacity)` rule still runs the fade-in/out * transition naturally — pinning .show with !important would flicker * during the close fade. background-color is pinned so the default * #97959e never paints for a frame on first show. */ [data-theme="dark"] .modal-backdrop { --bs-backdrop-bg: #000000; --bs-backdrop-opacity: 0.4; background-color: #000000 !important; z-index: 1200 !important; } [data-theme="dark"] .modal { z-index: 1210 !important; } [data-theme="dark"] .dropdown-item { color: var(--bs-body-color); } [data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { background-color: rgba(255, 255, 255, 0.05); color: var(--bs-emphasis-color); } [data-theme="dark"] .dropdown-divider { border-top-color: var(--bs-border-color); } [data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* ---- Forms ---- */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select, [data-theme="dark"] .input-group-text { background-color: #2a2a3d; border-color: var(--bs-border-color); color: var(--bs-body-color); } [data-theme="dark"] .form-control::placeholder { color: var(--bs-tertiary-color); } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background-color: #2a2a3d; border-color: var(--bs-primary); color: var(--bs-body-color); box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.25); } [data-theme="dark"] .form-check-input { background-color: #2a2a3d; border-color: var(--bs-border-color); } [data-theme="dark"] .form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); } [data-theme="dark"] .form-label { color: var(--bs-body-color); } /* ---- Buttons (keep primary/danger as-is — only tweak outlines) ---- */ [data-theme="dark"] .btn-outline-secondary { color: var(--bs-body-color); border-color: var(--bs-border-color); } [data-theme="dark"] .btn-outline-secondary:hover { background-color: rgba(255, 255, 255, 0.06); color: var(--bs-emphasis-color); border-color: var(--bs-border-color); } [data-theme="dark"] .btn-light { background-color: #2a2a3d; color: var(--bs-body-color); border-color: var(--bs-border-color); } /* ---- Label/soft badges ---- */ [data-theme="dark"] .bg-label-primary { background-color: rgba(var(--bs-primary-rgb), 0.2) !important; color: var(--bs-primary) !important; } [data-theme="dark"] .bg-label-success { background-color: rgba(34, 197, 94, 0.2) !important; color: #4ade80 !important; } [data-theme="dark"] .bg-label-warning { background-color: rgba(245, 158, 11, 0.2) !important; color: #fbbf24 !important; } [data-theme="dark"] .bg-label-danger { background-color: rgba(234, 84, 85, 0.2) !important; color: #fb7185 !important; } [data-theme="dark"] .bg-label-info { background-color: rgba(56, 189, 248, 0.2) !important; color: #38bdf8 !important; } [data-theme="dark"] .bg-label-secondary { background-color: rgba(148, 163, 184, 0.18) !important; color: #cbd5e1 !important; } /* ---- Tabs / nav pills ---- */ [data-theme="dark"] .nav-tabs .nav-link, [data-theme="dark"] .nav-tabs-custom .nav-link { color: var(--bs-tertiary-color); border-color: transparent; } [data-theme="dark"] .nav-tabs .nav-link:hover, [data-theme="dark"] .nav-tabs-custom .nav-link:hover { color: var(--bs-body-color); } [data-theme="dark"] .nav-tabs .nav-link.active, [data-theme="dark"] .nav-tabs-custom .nav-link.active { color: var(--bs-primary); background-color: transparent; border-color: transparent; } /* ---- Page headers ---- */ [data-theme="dark"] .app-page-header { background-color: transparent; } [data-theme="dark"] .app-page-header h4, [data-theme="dark"] .app-page-header h1, [data-theme="dark"] .app-page-header h5 { color: var(--bs-emphasis-color); } [data-theme="dark"] .app-page-header p { color: var(--bs-tertiary-color); } [data-theme="dark"] .app-page-header-icon { background-color: rgba(var(--bs-primary-rgb), 0.18); color: var(--bs-primary); } /* ---- Breadcrumbs + misc text ---- */ [data-theme="dark"] .breadcrumb, [data-theme="dark"] .breadcrumb-item { color: var(--bs-tertiary-color); } [data-theme="dark"] .breadcrumb-item.active, [data-theme="dark"] .breadcrumb-item a { color: var(--bs-body-color); } /* ---- Alerts / toasts ---- */ [data-theme="dark"] .alert { background-color: #2a2a3d; border-color: var(--bs-border-color); color: var(--bs-body-color); } [data-theme="dark"] .toast { background-color: #2a2a3d; color: var(--bs-body-color); border-color: var(--bs-border-color); } [data-theme="dark"] .toast-header { background-color: #252537; color: var(--bs-body-color); border-bottom-color: var(--bs-border-color); } [data-theme="dark"] .toast-header .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* showToast() (#toast-container) + toastr.js fallback both use these classes from toastr.css. The .light-style rules ship with white-bg + dark-text and a light shadow; load order is theme-dark.css then toastr.css, so we need a compound `[data-theme="dark"].light-style ...` selector (both classes attach to , no descendant space) with higher specificity than `.light-style #toast-container ...`. */ [data-theme="dark"].light-style #toast-container > .toast, [data-theme="dark"].light-style #toast-container > .toast-success, [data-theme="dark"].light-style #toast-container > .toast-error, [data-theme="dark"].light-style #toast-container > .toast-info, [data-theme="dark"].light-style #toast-container > .toast-warning, [data-theme="dark"].light-style #toast-container .toast-success, [data-theme="dark"].light-style #toast-container .toast-error, [data-theme="dark"].light-style #toast-container .toast-info, [data-theme="dark"].light-style #toast-container .toast-warning { background-color: #2a2a3d !important; color: var(--bs-body-color) !important; } [data-theme="dark"].light-style #toast-container > div { box-shadow: 0 0.1875rem 0.75rem 0 rgba(0, 0, 0, 0.4) !important; border: 1px solid var(--bs-border-color); } [data-theme="dark"].light-style #toast-container .toast-title { color: var(--bs-body-color) !important; } [data-theme="dark"].light-style #toast-container .toast-message { color: var(--bs-body-color); } [data-theme="dark"].light-style #toast-container .toast-message a { color: var(--bs-primary); } [data-theme="dark"].light-style #toast-container .toast-message a:hover { color: rgba(var(--bs-primary-rgb), 0.7); } [data-theme="dark"].light-style #toast-container .toast-close-button { color: var(--bs-tertiary-color) !important; text-shadow: none; } [data-theme="dark"].light-style #toast-container .toast-progress { background-color: var(--bs-primary); opacity: 0.4; } /* ---- Pagination ---- */ [data-theme="dark"] .page-link { background-color: transparent; border-color: var(--bs-border-color); color: var(--bs-body-color); } [data-theme="dark"] .page-link:hover { background-color: rgba(255, 255, 255, 0.05); color: var(--bs-emphasis-color); } [data-theme="dark"] .page-item.active .page-link { background-color: var(--bs-primary); border-color: var(--bs-primary); color: #fff; } [data-theme="dark"] .page-item.disabled .page-link { color: var(--bs-tertiary-color); } /* ---- Flatpickr (date-range picker) ---- */ [data-theme="dark"] .flatpickr-calendar, [data-theme="dark"] .flatpickr-months, [data-theme="dark"] .flatpickr-weekdays, [data-theme="dark"] .flatpickr-innerContainer { background-color: #232334; color: var(--bs-body-color); border-color: var(--bs-border-color); } [data-theme="dark"] .flatpickr-day { color: var(--bs-body-color); } [data-theme="dark"] .flatpickr-day.prevMonthDay, [data-theme="dark"] .flatpickr-day.nextMonthDay { color: var(--bs-tertiary-color); } [data-theme="dark"] .flatpickr-day:hover { background-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .flatpickr-weekday, [data-theme="dark"] .flatpickr-current-month, [data-theme="dark"] .flatpickr-monthDropdown-months, [data-theme="dark"] .numInputWrapper input { color: var(--bs-body-color) !important; background-color: transparent; } /* ---- Search overlay ---- */ [data-theme="dark"] .search-overlay { background-color: rgba(10, 10, 20, 0.75); } [data-theme="dark"] .search-overlay-panel { background-color: #232334; border-color: var(--bs-border-color); color: var(--bs-body-color); } [data-theme="dark"] .search-overlay-input { background-color: transparent; color: var(--bs-body-color); } /* Browser autofill (Chrome / Edge / Safari) paints a yellow-ish background * onto inputs even when CSS sets `background: transparent`. The trick is * an inset box-shadow large enough to cover the input, in the surface * color we want — the autofill background then sits *behind* the shadow * and never shows. -webkit-text-fill-color keeps the typed text legible. */ [data-theme="dark"] .search-overlay-input:-webkit-autofill, [data-theme="dark"] .search-overlay-input:-webkit-autofill:hover, [data-theme="dark"] .search-overlay-input:-webkit-autofill:focus, [data-theme="dark"] .search-overlay-input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0 1000px transparent inset !important; box-shadow: 0 0 0 1000px transparent inset !important; -webkit-text-fill-color: var(--bs-body-color) !important; background-color: transparent !important; transition: background-color 5000s ease-in-out 0s; } [data-theme="dark"] .search-overlay-row:hover, [data-theme="dark"] .search-overlay-row.is-focused { background-color: rgba(255, 255, 255, 0.04); } /* ---- Sweetalert2 ---- */ [data-theme="dark"] .swal2-popup { background-color: #232334; color: var(--bs-body-color); } [data-theme="dark"] .swal2-title, [data-theme="dark"] .swal2-html-container, [data-theme="dark"] .swal2-content { color: var(--bs-body-color); } /* ---- Scrollbars (webkit) ---- */ [data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background-color: var(--bs-border-color); border-radius: 999px; } /* ===================================================================== * Page-scoped overrides * * Many feature pages (transactions, activity, user-behavior, players, etc) * declare their own CSS variables like `--tx-border-color: #ebe9f1` with * *hardcoded* light hex fallbacks — so even if `--bs-border-color` is * dark, those pages still paint light. Rebind them here. Also covers a * pile of `background: #fff` / `white` scattered across the page CSS by * targeting common utility class patterns under [data-theme="dark"]. * ===================================================================== */ [data-theme="dark"] .tx-page, [data-theme="dark"] .al-page, [data-theme="dark"] .ub-page, [data-theme="dark"] .pl-page, [data-theme="dark"] .companies-page, [data-theme="dark"] .imp-page, [data-theme="dark"] .players-page, [data-theme="dark"] .responsible-gambling-page { --tx-border-color: var(--bs-border-color); --tx-text-primary: var(--bs-body-color); --tx-text-secondary: var(--bs-secondary-color); --tx-text-muted: var(--bs-tertiary-color); --al-border-color: var(--bs-border-color); --al-text-primary: var(--bs-body-color); --al-text-secondary: var(--bs-secondary-color); --al-text-muted: var(--bs-tertiary-color); --ub-border-color: var(--bs-border-color); --ub-text-primary: var(--bs-body-color); --ub-text-secondary: var(--bs-secondary-color); --ub-text-muted: var(--bs-tertiary-color); --cp-border-color: var(--bs-border-color); --cp-text-primary: var(--bs-body-color); --cp-text-secondary: var(--bs-secondary-color); --cp-text-muted: var(--bs-tertiary-color); --cp-body-bg: var(--bs-body-bg); --imp-border-color: var(--bs-border-color); --imp-text-primary: var(--bs-body-color); --imp-text-secondary: var(--bs-secondary-color); --imp-text-muted: var(--bs-tertiary-color); --imp-body-bg: var(--bs-body-bg); } /* ---- Search inputs on filter bars (most pages use `.search-input`) ---- */ [data-theme="dark"] .search-input, [data-theme="dark"] .tx-search-input, [data-theme="dark"] .al-search-input, [data-theme="dark"] .ub-search-input, [data-theme="dark"] input[type="search"] { background-color: #2a2a3d !important; color: var(--bs-body-color) !important; border-color: var(--bs-border-color) !important; } [data-theme="dark"] .search-input::placeholder, [data-theme="dark"] .tx-search-input::placeholder, [data-theme="dark"] .al-search-input::placeholder, [data-theme="dark"] .ub-search-input::placeholder { color: var(--bs-tertiary-color) !important; } /* ---- Summary strip (Transactions / Total Deposits / Total Payouts) ---- */ [data-theme="dark"] .summary-strip, [data-theme="dark"] .tx-summary, [data-theme="dark"] .tx-summary-strip, [data-theme="dark"] .al-summary, [data-theme="dark"] .ub-summary, [data-theme="dark"] .results-summary { background-color: #2b2b3f !important; border-color: var(--bs-border-color) !important; color: var(--bs-body-color) !important; } /* ---- Category / quick-filter chip strips ---- */ [data-theme="dark"] .category-chips, [data-theme="dark"] .tx-category-chips, [data-theme="dark"] .al-category-chips, [data-theme="dark"] .quick-filters, [data-theme="dark"] .nav-tabs-custom, [data-theme="dark"] .category-chip, [data-theme="dark"] .quick-filter-tab { background-color: transparent !important; color: var(--bs-body-color); } [data-theme="dark"] .category-chip:hover, [data-theme="dark"] .quick-filter-tab:hover { background-color: rgba(255, 255, 255, 0.04) !important; } /* Generic white-panel rescue: any .card-like element inside page scopes that hardcoded `background: #fff`. */ [data-theme="dark"] .tx-page .card, [data-theme="dark"] .al-page .card, [data-theme="dark"] .ub-page .card, [data-theme="dark"] .pl-page .card, [data-theme="dark"] .companies-page .card, [data-theme="dark"] .imp-page .card, [data-theme="dark"] .players-page .card, [data-theme="dark"] .responsible-gambling-page .card, [data-theme="dark"] .companies-page .search-input-wrapper input, [data-theme="dark"] .tx-page .tx-filter-card, [data-theme="dark"] .al-page .al-filter-card, [data-theme="dark"] .ub-page .ub-filter-card { background-color: #232334 !important; border-color: var(--bs-border-color) !important; color: var(--bs-body-color); } /* KPI / stat cards that hardcode white */ [data-theme="dark"] .stat-card, [data-theme="dark"] .kpi-card, [data-theme="dark"] .rg-stat-card, [data-theme="dark"] .metric-card { background-color: #232334 !important; border-color: var(--bs-border-color) !important; color: var(--bs-body-color); } [data-theme="dark"] .stat-card .stat-value, [data-theme="dark"] .kpi-card .kpi-value, [data-theme="dark"] .metric-card .metric-value { color: var(--bs-body-color) !important; } /* Pagination footer pills used on importer / transactions */ [data-theme="dark"] .pagination-footer, [data-theme="dark"] .pagination-footer .page-size-select, [data-theme="dark"] .pagination-footer .btn-page { background-color: transparent; color: var(--bs-body-color); border-color: var(--bs-border-color); } [data-theme="dark"] .pagination-footer .page-size-select, [data-theme="dark"] .pagination-footer .btn-page { background-color: #2a2a3d !important; } /* Filter-tag pills (used on filter strips across pages) */ [data-theme="dark"] .filter-tag { background-color: rgba(var(--bs-primary-rgb), 0.15) !important; border-color: rgba(var(--bs-primary-rgb), 0.3) !important; color: var(--bs-body-color); } [data-theme="dark"] .filter-tag-remove:hover { background-color: rgba(234, 84, 85, 0.2) !important; } /* ===================================================================== * Add-filter popover + filter editor (.filter-picker / .filter-editor) * Used on /companies, /transactions, /players, /importer (and the * `.al-` prefixed variant on /audit-log). All variants use a hardcoded * `background: #fff` and depend on light-color tokens for borders and * text. Override the surface and re-color the rows / inputs / actions * so the popover is readable in dark mode. * ===================================================================== */ [data-theme="dark"] .filter-picker, [data-theme="dark"] .filter-editor, [data-theme="dark"] .al-filter-picker, [data-theme="dark"] .al-filter-editor { background-color: #232334 !important; border-color: var(--bs-border-color) !important; color: var(--bs-body-color) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important; } [data-theme="dark"] .filter-picker-header, [data-theme="dark"] .al-filter-picker-header { color: var(--bs-tertiary-color) !important; border-bottom-color: var(--bs-border-color) !important; } [data-theme="dark"] .filter-picker-item, [data-theme="dark"] .al-filter-picker-item { color: var(--bs-body-color) !important; } [data-theme="dark"] .filter-picker-item:hover, [data-theme="dark"] .al-filter-picker-item:hover { background-color: rgba(var(--bs-primary-rgb), 0.12) !important; } [data-theme="dark"] .filter-picker-item i, [data-theme="dark"] .al-filter-picker-item i { color: var(--bs-secondary-color) !important; } [data-theme="dark"] .filter-editor .filter-editor-label, [data-theme="dark"] .al-filter-editor .filter-editor-label { color: var(--bs-secondary-color) !important; } [data-theme="dark"] .filter-editor input[type="text"], [data-theme="dark"] .filter-editor input[type="date"], [data-theme="dark"] .filter-editor input[type="number"], [data-theme="dark"] .filter-editor select, [data-theme="dark"] .al-filter-editor input[type="text"], [data-theme="dark"] .al-filter-editor input[type="date"], [data-theme="dark"] .al-filter-editor input[type="number"], [data-theme="dark"] .al-filter-editor select { background-color: #2a2a3d !important; border-color: var(--bs-border-color) !important; color: var(--bs-body-color) !important; } [data-theme="dark"] .filter-editor input::placeholder, [data-theme="dark"] .al-filter-editor input::placeholder { color: var(--bs-tertiary-color) !important; } [data-theme="dark"] .filter-checkbox-list, [data-theme="dark"] .al-filter-checkbox-list { background-color: #2a2a3d !important; border-color: var(--bs-border-color) !important; color: var(--bs-body-color) !important; } [data-theme="dark"] .filter-checkbox-list label, [data-theme="dark"] .al-filter-checkbox-list label { color: var(--bs-body-color) !important; } [data-theme="dark"] .btn-cancel-filter, [data-theme="dark"] .al-btn-cancel-filter { color: var(--bs-secondary-color) !important; } [data-theme="dark"] .btn-cancel-filter:hover, [data-theme="dark"] .al-btn-cancel-filter:hover { color: var(--bs-body-color) !important; } /* ===================================================================== * Page header h4 titles — `.tx-page-header h4` and the audit-log * `.al-page-header h4` use scoped CSS variables that resolve to * `#5e5873` (dark slate). In dark mode that's invisible on the dark * body. Same fix for tx subtitle `p` which uses --tx-text-secondary. * ===================================================================== */ [data-theme="dark"] .tx-page-header h4, [data-theme="dark"] .al-page-header h4, [data-theme="dark"] .ub-page-header h4 { color: var(--bs-body-color) !important; } [data-theme="dark"] .tx-page-header p, [data-theme="dark"] .al-page-header p, [data-theme="dark"] .ub-page-header p { color: var(--bs-secondary-color) !important; } /* ===================================================================== * /companies/:id Source Reconciliation table — Net Deposit totals row * uses inline `style="background-color: #f3f2f7; font-weight: 600;"` * which paints a near-white band over a dark page. Beat the inline * value with an attribute selector. * ===================================================================== */ [data-theme="dark"] #reconciliationTable tr[style*="f3f2f7"] { background-color: #2b2b3f !important; color: var(--bs-body-color) !important; } [data-theme="dark"] #reconciliationTable tr[style*="f3f2f7"] td { color: var(--bs-body-color) !important; } /* ===================================================================== * /config Two-Step Verification card body — `.security-card-body` is * `background: white` and `.security-method` is `#f9f9fb`, both of * which break the dark surface set by the parent `.security-card`. * Title / subtitle / methods row also need text-color overrides. * ===================================================================== */ [data-theme="dark"] .security-card-body { background-color: #232334 !important; border-top-color: var(--bs-border-color) !important; color: var(--bs-body-color) !important; } [data-theme="dark"] .security-title { color: var(--bs-body-color) !important; } [data-theme="dark"] .security-subtitle, [data-theme="dark"] .security-chevron { color: var(--bs-tertiary-color) !important; } [data-theme="dark"] .security-detail-item { color: var(--bs-body-color) !important; background-color: transparent !important; } [data-theme="dark"] .security-method { background-color: #2a2a3d !important; color: var(--bs-secondary-color) !important; } /* ===================================================================== * Info-row pattern (used in #txDetailModal, user detail, profile, * activity audit detail). Light-mode tokens: label `#b9b9c3`, value * `#5e5873`, separator `#f3f2f7`, section title `#5e5873`. The label * is already faint and the value is invisible on dark surfaces. * Modal title in #txDetailModal uses scoped --tx-text-primary which * also resolves to a dark slate — pin it to body color. * ===================================================================== */ [data-theme="dark"] .info-row { border-bottom-color: var(--bs-border-color) !important; } [data-theme="dark"] .info-row-label { color: var(--bs-tertiary-color) !important; } [data-theme="dark"] .info-row-value { color: var(--bs-body-color) !important; } [data-theme="dark"] .tx-detail-section-title { color: var(--bs-body-color) !important; } [data-theme="dark"] #txDetailModal .modal-title { color: var(--bs-body-color) !important; } [data-theme="dark"] #txDetailModal .modal-header, [data-theme="dark"] #txDetailModal .modal-footer { border-color: var(--bs-border-color) !important; } /* ===================================================================== * /companies list table — companies/index.ejs hardcodes * `tbody td { color: #2f2b3d }` and `.company-name { color: #2f2b3d }` * which are invisible on the dark surface. Logo placeholder bg * `#f3f2f7` also flashes light when a row has no logo image. * ===================================================================== */ [data-theme="dark"] .companies-page #companiesTable tbody td { color: var(--bs-body-color) !important; border-color: var(--bs-border-color) !important; } [data-theme="dark"] .companies-page .company-name { color: var(--bs-body-color) !important; } [data-theme="dark"] .companies-page .company-logo { background-color: #2a2a3d !important; } [data-theme="dark"] .companies-page #companiesTable tbody tr:hover { background-color: rgba(var(--bs-primary-rgb), 0.08) !important; } /* ===================================================================== * /transactions list table — `#transactions-table tbody td` hardcodes * `color: #2f2b3d` (the Date column inherits this) and `.msisdn-cell` * uses `--tx-text-secondary` (#6e6b7b). Both are too dark for the * dark surface — remap to body / secondary so all columns read. * ===================================================================== */ [data-theme="dark"] #transactions-table tbody td { color: var(--bs-body-color) !important; border-color: var(--bs-border-color) !important; } [data-theme="dark"] #transactions-table .msisdn-cell { color: var(--bs-secondary-color) !important; } [data-theme="dark"] #transactions-table .msisdn-cell:hover { color: var(--bs-primary) !important; } [data-theme="dark"] #transactions-table tbody tr:hover { background-color: rgba(var(--bs-primary-rgb), 0.08) !important; } /* ===================================================================== * /players list table — `#players-table tbody td` hardcodes #2f2b3d * (Date / Birthdate / Age / Created columns), `.msisdn-item` pills * carry their own light bg + `#5e5873` text, and `.company-tag` chips * are color-coded inline by the JS but their *base* layout class * still lacks contrast in dark mode. Fix all three. * ===================================================================== */ [data-theme="dark"] #players-table tbody td { color: var(--bs-body-color) !important; border-color: var(--bs-border-color) !important; } [data-theme="dark"] #players-table tbody tr:hover { background-color: rgba(var(--bs-primary-rgb), 0.08) !important; } [data-theme="dark"] .msisdn-item { background-color: rgba(var(--bs-primary-rgb), 0.12) !important; color: var(--bs-body-color) !important; } /* ===================================================================== * Players list filter strip pieces also used on /companies: * .quick-filters .nav-link, .btn-save-filter, .summary-text. Light- * mode hardcodes #6e6b7b / #5e5873 / #ebe9f1 — remap to body / muted * tokens and theme-aware borders. * ===================================================================== */ [data-theme="dark"] .quick-filters .nav-link { color: var(--bs-secondary-color) !important; } [data-theme="dark"] .quick-filters .nav-link:hover { color: var(--bs-primary) !important; } [data-theme="dark"] .quick-filters .nav-link.active { color: var(--bs-primary) !important; background-color: rgba(var(--bs-primary-rgb), 0.16) !important; border-color: rgba(var(--bs-primary-rgb), 0.35) !important; } [data-theme="dark"] .btn-save-filter { color: var(--bs-secondary-color) !important; border-color: var(--bs-border-color) !important; background-color: transparent !important; } [data-theme="dark"] .btn-save-filter:hover { border-color: var(--bs-primary) !important; color: var(--bs-primary) !important; } [data-theme="dark"] .summary-text { color: var(--bs-secondary-color) !important; } [data-theme="dark"] .summary-text strong { color: var(--bs-body-color) !important; } /* ===================================================================== * Stat-card value (responsible-gambling cases dashboard, player-fraud * detail). Light-mode `#5e5873` is invisible on dark cards. * ===================================================================== */ [data-theme="dark"] .stat-card-value { color: var(--bs-body-color) !important; } /* ===================================================================== * /companies-fraud/:id/detail — the page header `.company-name` h2 * and the SMS-evidence cards both carry hardcoded light tokens. * Note: `.company-name` already has a /companies-list dark rule — * it's the same class name so this rule complements that without * a scope conflict. * ===================================================================== */ [data-theme="dark"] .company-name { color: var(--bs-body-color) !important; } [data-theme="dark"] .company-meta { color: var(--bs-secondary-color) !important; } [data-theme="dark"] .sms-evidence-card { background-color: #232334 !important; border-color: var(--bs-border-color) !important; } [data-theme="dark"] .sms-evidence-card:hover { border-color: rgba(var(--bs-primary-rgb), 0.4) !important; } [data-theme="dark"] .sms-evidence-header { border-bottom-color: var(--bs-border-color) !important; } [data-theme="dark"] .sms-evidence-phone { color: var(--bs-body-color) !important; } [data-theme="dark"] .sms-evidence-time, [data-theme="dark"] .sms-evidence-tag { color: var(--bs-tertiary-color) !important; } [data-theme="dark"] .sms-evidence-content { background-color: #2a2a3d !important; color: var(--bs-body-color) !important; } [data-theme="dark"] .sms-evidence-footer { background-color: #252537 !important; border-top-color: var(--bs-border-color) !important; } /* ===================================================================== * #emailThreadModal — `.email-thread` ($f9f9fb) and each `.email- * message` (white) need dark surfaces. Header from / date / body * also use light tokens. * ===================================================================== */ [data-theme="dark"] .email-thread { background-color: #1f1f2e !important; } [data-theme="dark"] .email-message { background-color: #2a2a3d !important; border-left-color: var(--bs-border-color); } [data-theme="dark"] .email-from { color: var(--bs-body-color) !important; } [data-theme="dark"] .email-date { color: var(--bs-tertiary-color) !important; } [data-theme="dark"] .email-message-body { color: var(--bs-secondary-color) !important; } /* ===================================================================== * /config Roles & Permissions table — description cell is rendered * as `…`. In dark mode `.text-muted` * already maps to --bs-tertiary-color via the global rule, but on * this table we want the description a touch brighter so it reads * as content rather than a hint. Override just for the rolesTable. * ===================================================================== */ [data-theme="dark"] #rolesTable tbody td .text-muted { color: var(--bs-secondary-color) !important; } /* ===================================================================== * /management list table — `#user-management-table tbody td` * hardcodes #2f2b3d (Email + Last Login + ID columns inherit) and * `.user-name` is `#5e5873`. Both invisible on dark surface. * Also: the page wraps its filter row in `.filter-bar` which my * earlier dark-mode rule for player-detail filter bars was painting * `#2b2b3f`. The /management filter bar isn't a card and shouldn't * carry that surface — reset it to transparent. * ===================================================================== */ [data-theme="dark"] #user-management-table tbody td { color: var(--bs-body-color) !important; border-color: var(--bs-border-color) !important; } [data-theme="dark"] .user-name { color: var(--bs-body-color) !important; } [data-theme="dark"] .user-department { color: var(--bs-tertiary-color) !important; } [data-theme="dark"] #user-management-table tbody tr:hover { background-color: rgba(var(--bs-primary-rgb), 0.08) !important; } /* The /management filter-bar lives inside `.card-body`. Other usages * (player detail Financials/Betting tabs) are siblings of `.card-header` * and use the standalone `#2b2b3f` strip from the earlier filter-bar * rule. Scope the transparent reset to `.card-body .filter-bar` so it * only catches the user-management page (and profile, which also uses * `.card-body .filter-bar` and reads better without the strip). */ [data-theme="dark"] .card-body .filter-bar { background-color: transparent !important; border-color: transparent !important; } /* ===================================================================== * /config Roles & Permissions table — Permissions cell renders a * comma-joined string with `…` on * the resource list. Bump it to body color so the resource list reads * as content rather than a hint, and same for the row's other muted * columns inside #rolesTable. * ===================================================================== */ [data-theme="dark"] #rolesTable tbody td, [data-theme="dark"] #rolesTable tbody td .text-muted, [data-theme="dark"] #rolesTable tbody td small { color: var(--bs-body-color) !important; } [data-theme="dark"] #rolesTable tbody td .text-muted.fst-italic, [data-theme="dark"] #rolesTable tbody td .role-empty { color: var(--bs-tertiary-color) !important; } /* ===================================================================== * /audit-log suspicious-activity banner (#alAlertBanner). Light-mode * tint `rgba(185, 28, 28, 0.04)` is too faint to read on the dark * body — the banner disappears. Bump the alpha so it lands as a soft * red tint, similar to a Bootstrap alert-danger panel. * ===================================================================== */ [data-theme="dark"] .al-alert-banner { background-color: rgba(220, 53, 69, 0.16) !important; border-color: rgba(220, 53, 69, 0.35) !important; } [data-theme="dark"] .al-alert-banner-header:hover { background-color: rgba(220, 53, 69, 0.10) !important; } [data-theme="dark"] .al-alert-banner-body { border-top-color: rgba(220, 53, 69, 0.20) !important; } [data-theme="dark"] .al-alert-row:not(:last-child) { border-bottom-color: rgba(220, 53, 69, 0.12) !important; } [data-theme="dark"] .al-alert-banner-left { color: #f87171 !important; } [data-theme="dark"] .al-alert-banner-count { background-color: rgba(220, 53, 69, 0.28) !important; color: #fecaca !important; } /* ===================================================================== * /audit-log Timeline tab — `.al-timeline-content` is `#f9f9fb`, * `.al-timeline-selector` is `#f9f9fb`, `.al-filter-input` is white. * Also the `--al-text-*` page tokens resolve to dark slate, which is * invisible on dark surfaces. Remap each text role. * ===================================================================== */ [data-theme="dark"] .al-timeline-content { background-color: #2a2a3d !important; } [data-theme="dark"] .al-timeline-content:hover { background-color: #32324a !important; } [data-theme="dark"] .al-timeline-selector { background-color: #2a2a3d !important; } [data-theme="dark"] .al-filter-input { background-color: #2a2a3d !important; border-color: var(--bs-border-color) !important; color: var(--bs-body-color) !important; } [data-theme="dark"] .al-timeline-title, [data-theme="dark"] .al-new-value { color: var(--bs-body-color) !important; } [data-theme="dark"] .al-timeline-description { color: var(--bs-secondary-color) !important; } [data-theme="dark"] .al-timeline-date, [data-theme="dark"] .al-timeline-meta, [data-theme="dark"] .al-timeline-meta span, [data-theme="dark"] .al-timeline-date-group, [data-theme="dark"] .al-timeline-empty, [data-theme="dark"] .al-old-value, [data-theme="dark"] .al-filter-label { color: var(--bs-tertiary-color) !important; } /* ===================================================================== * /importer expand-row — `.stat-box` is `background: white`. The * Per-MMO Breakdown table wrapper and Timeline wrapper are JS-built * with inline `style="background:#fff;"` which needs the attribute- * selector trick to override. * ===================================================================== */ [data-theme="dark"] .imp-page .stat-box { background-color: #2a2a3d !important; border-color: var(--bs-border-color) !important; color: var(--bs-body-color) !important; } [data-theme="dark"] .imp-page .stat-box .stat-value { color: var(--bs-body-color) !important; } [data-theme="dark"] .imp-page .expand-content div[style*="background:#fff"], [data-theme="dark"] .imp-page .expand-content div[style*="background: #fff"], [data-theme="dark"] .imp-page .expand-content div[style*="background:white"], [data-theme="dark"] .imp-page .expand-content div[style*="background: white"], [data-theme="dark"] .expand-content div[style*="background:#fff"], [data-theme="dark"] .expand-content div[style*="background: #fff"], [data-theme="dark"] .expand-content div[style*="background:white"], [data-theme="dark"] .expand-content div[style*="background: white"] { background-color: #232334 !important; border-color: var(--bs-border-color) !important; } /* ApexCharts canvas inside the importer expand-row charts — force a * transparent SVG background even if `chart.background` config didn't * propagate (e.g. legacy renders). The canvas paints a solid `` * fill="#fff" otherwise. */ [data-theme="dark"] [id^="companyTimeline-"] .apexcharts-canvas, [data-theme="dark"] [id^="companyTimeline-"] .apexcharts-canvas svg, [data-theme="dark"] #gapTimelineChart .apexcharts-canvas, [data-theme="dark"] #gapTimelineChart .apexcharts-canvas svg, [data-theme="dark"] #selectedWindowChart .apexcharts-canvas, [data-theme="dark"] #selectedWindowChart .apexcharts-canvas svg { background-color: transparent !important; } /* importer.js renders 7 wrappers with inline `style="background:var(--imp-card-bg, #fff); ..."`. * `.imp-page` scoped CSS sets `--imp-card-bg: var(--bs-card-bg, #ffffff)` which stays * white in dark mode (Bootstrap doesn't flip --bs-card-bg). Override the var * once on `.imp-page` in dark mode and every wrapper auto-flips without per- * selector attribute matching. */ [data-theme="dark"] .imp-page { --imp-card-bg: #232334; } [data-theme="dark"] .imp-page .expand-content table { color: var(--bs-body-color) !important; } [data-theme="dark"] .imp-page .expand-section-title { color: var(--bs-body-color) !important; } /* ===================================================================== * /players list expandable row — `.linked-account-item` rows * (rendered when a National-ID row is expanded) hardcode #5e5873 / * #6e6b7b / #ebe9f1. Remap to body / secondary / border tokens. * ===================================================================== */ [data-theme="dark"] .linked-account-item { color: var(--bs-body-color) !important; border-bottom-color: var(--bs-border-color) !important; } [data-theme="dark"] .linked-account-item .account-msisdn { color: var(--bs-body-color) !important; } [data-theme="dark"] .linked-account-item .account-arrow { color: var(--bs-tertiary-color) !important; } [data-theme="dark"] .linked-account-item .account-username { color: var(--bs-secondary-color) !important; } /* ===================================================================== * /players/:id (player detail) — comprehensive dark-mode pass. * `players/detail.ejs` scopes ~30 classes that hardcode #5e5873 / * #6e6b7b / #b9b9c3 / #2f2b3d / #ebe9f1 / #f9f9fb / #f3f2f7 / #fff * across the profile header, KPI cards, page tables, expand-rows, * inline ledger, balance flow, modals, and pagination. Existing * .timeline-* / .filter-bar / .ledger-filter-bar / .propagation- * summary / .linked-account-item rules above already cover their * pieces — the block below adds everything else on the page. * ===================================================================== */ /* Profile header: name, meta grid, action divider, footer note */ [data-theme="dark"] .profile-details h3 { color: var(--bs-body-color) !important; } [data-theme="dark"] .profile-meta-label { color: var(--bs-tertiary-color) !important; } [data-theme="dark"] .profile-meta-value { color: var(--bs-body-color) !important; } [data-theme="dark"] .profile-actions { border-top-color: var(--bs-border-color) !important; } [data-theme="dark"] .profile-note { color: var(--bs-tertiary-color) !important; } /* KPI tiles on the Overview tab (.kpi-card-equal) */ [data-theme="dark"] .kpi-card-equal .kpi-label { color: var(--bs-secondary-color) !important; } [data-theme="dark"] .kpi-card-equal .kpi-value { color: var(--bs-body-color) !important; } [data-theme="dark"] .kpi-card-equal .kpi-source { color: var(--bs-tertiary-color) !important; } /* Page tables under #playerDetailPage (MSISDNs / Company Accounts / * Betting Activity tables). thead bg #f3f2f7 + tbody #2f2b3d body. */ [data-theme="dark"] #playerDetailPage .table thead th { background-color: #2b2b3f !important; color: var(--bs-secondary-color) !important; } [data-theme="dark"] #playerDetailPage .table tbody td { color: var(--bs-body-color) !important; border-color: var(--bs-border-color) !important; } [data-theme="dark"] #playerDetailPage .table tbody tr:hover { background-color: rgba(var(--bs-primary-rgb), 0.08) !important; } /* Expand-row chrome (chevron + section title + bottom border) */ [data-theme="dark"] .expand-toggle { color: var(--bs-tertiary-color) !important; } [data-theme="dark"] .expand-content { border-bottom-color: var(--bs-border-color) !important; } [data-theme="dark"] .expand-section-title { color: var(--bs-tertiary-color) !important; } /* Timeline (vertical track separator only — content already handled) */ [data-theme="dark"] .timeline::before { background-color: var(--bs-border-color) !important; } /* Ban-propagation tile values + labels */ [data-theme="dark"] .propagation-stat-value { color: var(--bs-body-color) !important; } [data-theme="dark"] .propagation-stat-label { color: var(--bs-tertiary-color) !important; } /* Warning banner body text (red-tinted panel — bg already legible) */ [data-theme="dark"] .warning-banner p { color: var(--bs-body-color) !important; } /* Ban / Unban modal player-info box (bg #f3f2f7) */ [data-theme="dark"] .user-info-box { background-color: #2a2a3d !important; color: var(--bs-body-color) !important; } /* Inline ledger inside Company Accounts expand rows */ [data-theme="dark"] .inline-ledger { border-bottom-color: var(--bs-border-color) !important; } [data-theme="dark"] .inline-ledger .table thead th { background-color: #2b2b3f !important; color: var(--bs-secondary-color) !important; } [data-theme="dark"] .inline-ledger .table tbody td { color: var(--bs-body-color) !important; border-bottom-color: var(--bs-border-color) !important; } [data-theme="dark"] .inline-ledger .table tbody tr:hover { background-color: rgba(var(--bs-primary-rgb), 0.08) !important; } /* Balance flow bar (Opening → Deposit → Bonus → … → Closing) */ [data-theme="dark"] .balance-flow { border-color: var(--bs-border-color) !important; } [data-theme="dark"] .balance-flow-item { background-color: #2a2a3d !important; } [data-theme="dark"] .balance-flow-item.flow-opening, [data-theme="dark"] .balance-flow-item.flow-closing { background-color: #232334 !important; } [data-theme="dark"] .balance-flow-item + .balance-flow-item { border-left-color: var(--bs-border-color) !important; } [data-theme="dark"] .balance-flow-label { color: var(--bs-tertiary-color) !important; } [data-theme="dark"] .balance-flow-value { color: var(--bs-body-color) !important; } /* Ledger pagination */ [data-theme="dark"] .ledger-pagination-info { color: var(--bs-tertiary-color) !important; } [data-theme="dark"] .ledger-page-btn { background-color: #2a2a3d !important; border-color: var(--bs-border-color) !important; color: var(--bs-secondary-color) !important; } [data-theme="dark"] .ledger-page-btn:hover:not(:disabled) { border-color: var(--bs-primary) !important; color: var(--bs-primary) !important; } [data-theme="dark"] .ledger-page-btn.active { background-color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; color: #ffffff !important; } /* Inline `style="color:#5e5873"` / `#b9b9c3` used in the breadcrumb, * "last status change" footer, and modal player-info box (Ban/Unban). * Catch via attribute selectors so the inline values don't beat us. * Scoped to the page wrapper to keep blast radius tight. */ [data-theme="dark"] #playerDetailPage [style*="color: #5e5873"], [data-theme="dark"] #playerDetailPage [style*="color:#5e5873"] { color: var(--bs-body-color) !important; } [data-theme="dark"] #playerDetailPage [style*="color: #b9b9c3"], [data-theme="dark"] #playerDetailPage [style*="color:#b9b9c3"] { color: var(--bs-tertiary-color) !important; } /* ===================================================================== * /players/responsible-gambling/:nid/:caseId/detail — case detail page * `responsible-gambling-detail.ejs` scopes ~50 classes that hardcode * light tokens (#fff / #f3f2f7 / #f9f9fb / #ebe9f1 / #5e5873 / #6e6b7b * / #b9b9c3 / #2f2b3d). Comprehensive dark-mode pass below. * ===================================================================== */ /* Breadcrumb */ [data-theme="dark"] .breadcrumb-current { color: var(--bs-body-color) !important; } [data-theme="dark"] .breadcrumb-separator { color: var(--bs-tertiary-color) !important; } /* Case header card (white bg + meta + divider) */ [data-theme="dark"] .case-header-card { background-color: #232334 !important; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35) !important; } [data-theme="dark"] .case-header-nid-label { color: var(--bs-tertiary-color) !important; } [data-theme="dark"] .case-header-nid-value { color: var(--bs-body-color) !important; } [data-theme="dark"] .case-header-meta { color: var(--bs-secondary-color) !important; } [data-theme="dark"] .case-header-case-id { color: var(--bs-tertiary-color) !important; } [data-theme="dark"] .case-header-divider { background-color: var(--bs-border-color) !important; } /* Export button (transparent → dark surface) */ [data-theme="dark"] .btn-export { background-color: #2a2a3d !important; color: var(--bs-secondary-color) !important; } [data-theme="dark"] .btn-export:hover { background-color: #32324a !important; color: var(--bs-body-color) !important; } /* Why-flagged item text */ [data-theme="dark"] .explainability-item .text { color: var(--bs-body-color) !important; } /* Player overview grid (NID / MSISDNs / loss / period / casino / sports / companies) */ [data-theme="dark"] .player-overview-grid { border-bottom-color: var(--bs-border-color) !important; } [data-theme="dark"] .player-overview-section { border-right-color: var(--bs-border-color) !important; } [data-theme="dark"] .player-overview-label { color: var(--bs-tertiary-color) !important; } [data-theme="dark"] .player-overview-value { color: var(--bs-body-color) !important; } [data-theme="dark"] .msisdn-pill { background-color: rgba(var(--bs-primary-rgb), 0.12) !important; color: var(--bs-body-color) !important; } /* Daily Loss Pattern — Cumulative Loss summary card */ [data-theme="dark"] .loss-summary-bar { background-color: #2a2a3d !important; } [data-theme="dark"] .loss-summary-label { color: var(--bs-secondary-color) !important; } [data-theme="dark"] .loss-summary-value { color: var(--bs-body-color) !important; } [data-theme="dark"] .loss-summary-threshold { color: var(--bs-tertiary-color) !important; } [data-theme="dark"] .loss-summary-track { background-color: var(--bs-border-color) !important; } [data-theme="dark"] .loss-summary-marker { background-color: var(--bs-body-color) !important; } [data-theme="dark"] .loss-summary-footer { color: var(--bs-tertiary-color) !important; } /* Chart legend strip */ [data-theme="dark"] .chart-legend-bottom { border-top-color: var(--bs-border-color) !important; } [data-theme="dark"] .chart-legend-item { color: var(--bs-secondary-color) !important; } /* ApexCharts custom tooltip popover (white card) */ [data-theme="dark"] .chart-tooltip { background-color: #232334 !important; border-color: var(--bs-border-color) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important; } [data-theme="dark"] .chart-tooltip-date { color: var(--bs-tertiary-color) !important; } [data-theme="dark"] .chart-tooltip-value { color: var(--bs-body-color) !important; } /* Transaction Log list rows */ [data-theme="dark"] .transaction-item { border-bottom-color: var(--bs-border-color) !important; } [data-theme="dark"] .transaction-item:hover { background-color: rgba(var(--bs-primary-rgb), 0.08) !important; } [data-theme="dark"] .transaction-date, [data-theme="dark"] .transaction-operator-name { color: var(--bs-body-color) !important; } [data-theme="dark"] .transaction-time, [data-theme="dark"] .transaction-stake { color: var(--bs-tertiary-color) !important; } [data-theme="dark"] .transaction-msisdn { background-color: rgba(var(--bs-primary-rgb), 0.12) !important; color: var(--bs-secondary-color) !important; } /* Pagination bar inside transaction-list / case-history */ [data-theme="dark"] .pagination-bar { background-color: #2a2a3d !important; border-top-color: var(--bs-border-color) !important; } [data-theme="dark"] .pagination-info { color: var(--bs-tertiary-color) !important; } [data-theme="dark"] .pagination-btn { background-color: #2a2a3d !important; border-color: var(--bs-border-color) !important; color: var(--bs-secondary-color) !important; } [data-theme="dark"] .pagination-btn:hover:not(:disabled):not(.active) { border-color: var(--bs-primary) !important; color: var(--bs-primary) !important; } /* Company Breakdown rows */ [data-theme="dark"] .operator-item { border-bottom-color: var(--bs-border-color) !important; } [data-theme="dark"] .operator-item:hover { background-color: rgba(var(--bs-primary-rgb), 0.06) !important; } [data-theme="dark"] .operator-rank { background-color: #2a2a3d !important; color: var(--bs-secondary-color) !important; } [data-theme="dark"] .operator-name { color: var(--bs-body-color) !important; } [data-theme="dark"] .operator-msisdn-tag { background-color: rgba(var(--bs-primary-rgb), 0.12) !important; color: var(--bs-tertiary-color) !important; } [data-theme="dark"] .operator-amount-value { color: var(--bs-body-color) !important; } [data-theme="dark"] .operator-amount-label, [data-theme="dark"] .operator-loss-percent { color: var(--bs-tertiary-color) !important; } [data-theme="dark"] .operator-loss-bar { background-color: #2a2a3d !important; } /* Activity by Time of Day cards */ [data-theme="dark"] .time-period-card { background-color: #2a2a3d !important; } [data-theme="dark"] .time-period-name { color: var(--bs-body-color) !important; } [data-theme="dark"] .time-period-hours { color: var(--bs-tertiary-color) !important; } [data-theme="dark"] .time-period-bar { background-color: var(--bs-border-color) !important; } /* Decision panel — radio options on white cards */ [data-theme="dark"] .decision-panel-title, [data-theme="dark"] .decision-option-title { color: var(--bs-body-color) !important; } [data-theme="dark"] .decision-option { background-color: #2a2a3d !important; border-color: var(--bs-border-color) !important; } [data-theme="dark"] .decision-option-desc { color: var(--bs-secondary-color) !important; } /* Recent Bets + Case History tables */ [data-theme="dark"] #recentBetsTable thead th, [data-theme="dark"] #recentBetsTable tfoot th, [data-theme="dark"] #caseHistoryTable thead th, [data-theme="dark"] #caseHistoryTable tfoot th { background-color: #2b2b3f !important; color: var(--bs-secondary-color) !important; border-bottom-color: var(--bs-border-color) !important; } [data-theme="dark"] #recentBetsTable tbody td, [data-theme="dark"] #caseHistoryTable tbody td { color: var(--bs-body-color) !important; border-color: var(--bs-border-color) !important; } [data-theme="dark"] #recentBetsTable tbody tr:hover, [data-theme="dark"] #caseHistoryTable tbody tr:hover { background-color: rgba(var(--bs-primary-rgb), 0.06) !important; } /* ===================================================================== * /management/detail/:id (user-detail.ejs) — Permissions, Login * History, and Audit Logs tables hardcode `.table thead th` with * `#f3f2f7` + `#6e6b7b` and `.table tbody td` with `#2f2b3d`. The * #loginHistoryTable / #auditLogsTable also re-assert `tbody td` * with `#2f2b3d`. Plus Sessions tab cards (.session-item / .session- * device / .session-meta), Timeline (.timeline-* — same class names * as player detail, re-asserted here), Export History (.export-*), * the pagination footer, and the Upload Photo dropzone. * ===================================================================== */ [data-theme="dark"] #permissionsTable thead th, [data-theme="dark"] #loginHistoryTable thead th, [data-theme="dark"] #auditLogsTable thead th { background-color: #2b2b3f !important; color: var(--bs-secondary-color) !important; border-bottom-color: var(--bs-border-color) !important; } [data-theme="dark"] #permissionsTable tbody td, [data-theme="dark"] #loginHistoryTable tbody td, [data-theme="dark"] #auditLogsTable tbody td { color: var(--bs-body-color) !important; border-color: var(--bs-border-color) !important; } [data-theme="dark"] #permissionsTable tbody tr:hover, [data-theme="dark"] #loginHistoryTable tbody tr:hover, [data-theme="dark"] #auditLogsTable tbody tr:hover { background-color: rgba(var(--bs-primary-rgb), 0.08) !important; } /* Both /profile and /management/detail/:id render Login History + * Audit Logs cells via JS — the column renderers wrap timestamp / * IP / location values in ``, an * INLINE color that beats my `tbody td color` rule via specificity. * Catch the literal value with the attribute-selector trick so the * inline tokens get re-mapped to body color in dark mode. */ [data-theme="dark"] #loginHistoryTable [style*="color: #2f2b3d"], [data-theme="dark"] #loginHistoryTable [style*="color:#2f2b3d"], [data-theme="dark"] #auditLogsTable [style*="color: #2f2b3d"], [data-theme="dark"] #auditLogsTable [style*="color:#2f2b3d"] { color: var(--bs-body-color) !important; } /* ===================================================================== * Global inline-color remap. JS column renderers across 8 files * (user_management, user-detail-page, profile-page, player-detail, * player-list, transactions, importer, company-detail) wrap cell * values in ``, * inline tokens that beat scoped `tbody td color` in dark mode. * Catch each literal value via the attribute-selector trick and * remap to the matching theme token. The hex set below is exactly * the page-design vocabulary for "dark slate body text" — these * colors should never paint on a dark surface regardless of context. * ===================================================================== */ [data-theme="dark"] [style*="color: #2f2b3d"], [data-theme="dark"] [style*="color:#2f2b3d"], [data-theme="dark"] [style*="color: #5e5873"], [data-theme="dark"] [style*="color:#5e5873"] { color: var(--bs-body-color) !important; } [data-theme="dark"] [style*="color: #6e6b7b"], [data-theme="dark"] [style*="color:#6e6b7b"], [data-theme="dark"] [style*="color: #82868b"], [data-theme="dark"] [style*="color:#82868b"] { color: var(--bs-secondary-color) !important; } [data-theme="dark"] [style*="color: #b9b9c3"], [data-theme="dark"] [style*="color:#b9b9c3"], [data-theme="dark"] [style*="color: #444050"], [data-theme="dark"] [style*="color:#444050"] { color: var(--bs-tertiary-color) !important; } /* ===================================================================== * /management list — `.user-id-text` is a class (not inline) with * `color: #6e6b7b`, so the global attribute-selector remap doesn't * catch it. Bump it to body color so the USR-XXX id reads on dark. * Email + Last Login cells use inline `` * which IS caught by the global remap above. * ===================================================================== */ [data-theme="dark"] .user-id-text { color: var(--bs-body-color) !important; } /* ===================================================================== * /config Settings tab — `.system-info-value` (timezone / country / * currency / language / phone code values) hardcodes `color: #5e5873` * via the page-scoped `