/* ============================================================================ Pickle Pro World — Global dark theme ---------------------------------------------------------------------------- Every rule in this file is scoped under html[data-bs-theme="dark"], so light mode is completely untouched by it. The app has 13 independent :root token systems and ~67 pages that set colors with inline style="" attributes, so this sheet works in four layers: 1. Token overrides — redefine each system's custom properties (clean, no !important, highest leverage) 2. Structural rules — Bootstrap + custom component families (!important) 3. Inline-style net — attribute selectors catching literal hex values written directly into markup (!important) 4. Media/exclusions — never invert images; protect brand logos Cascade note: author !important beats non-important inline styles regardless of source order, and the html[data-bs-theme="dark"] prefix out-specifies the bare class selectors used by the ~658 existing !important rules. So this sheet wins wherever it needs to, and can safely load in (no flash). ========================================================================== */ /* ============================================================================ PALETTE Reuses the app's own brand colors — the dark-ink ramp already used by the admin sidebar (#09090B / #18181B / #27272A) and the lime accent #D9F114. ========================================================================== */ html[data-bs-theme="dark"] { --dk-canvas: #09090B; --dk-surface: #18181B; --dk-elevated: #27272A; --dk-raised: #3F3F46; --dk-line: #27272A; --dk-line-soft: rgba(255, 255, 255, 0.08); --dk-text: #F4F4F5; --dk-text-muted: #A1A1AA; --dk-text-dim: #71717A; --dk-accent: #D9F114; --dk-accent-ink: #09090B; /* Semantic — dark tint background + bright readable foreground */ --dk-success: #34d399; --dk-success-bg: rgba(16, 185, 129, 0.15); --dk-warning: #fbbf24; --dk-warning-bg: rgba(245, 158, 11, 0.15); --dk-danger: #f87171; --dk-danger-bg: rgba(239, 68, 68, 0.15); --dk-info: #60a5fa; --dk-info-bg: rgba(59, 130, 246, 0.15); } /* ============================================================================ LAYER 1 — TOKEN OVERRIDES Redefining these fixes every usage across the files that consume them, with no forced rules at all. This is the bulk of the coverage. ========================================================================== */ html[data-bs-theme="dark"] { /* style.css — the canonical system (also set in style.css itself; repeated here so this sheet is self-sufficient if load order ever changes) */ --bg: #09090B; --card: #18181B; --text: #F4F4F5; --text-muted: #A1A1AA; --border: #27272A; --primary-xlight: #27272A; --grid-line: rgba(244, 244, 245, 0.06); --nav-glass: rgba(9, 9, 11, 0.88); /* admin_premium.css (--vn-) — the single highest-leverage system, ~664 usages across 19 files, and sets body background app-wide */ --vn-bg: #09090B; --vn-card-bg: #18181B; --vn-border: rgba(255, 255, 255, 0.08); --vn-text: #F4F4F5; --vn-text-muted: #A1A1AA; --vn-primary: #F4F4F5; --vn-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.6), 0 1px 2px -1px rgba(0, 0, 0, 0.5); --vn-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.7), 0 4px 6px -4px rgba(0, 0, 0, 0.6); /* pages/admin_open_play_control.css (--admin-) */ --admin-bg: #09090B; --admin-surface: #18181B; --admin-surface-muted: #27272A; --admin-border: #27272A; --admin-border-strong: #3F3F46; --admin-ink: #F4F4F5; --admin-ink-secondary: #A1A1AA; --admin-ink-muted: #71717A; --admin-accent-subtle: rgba(29, 111, 101, 0.22); --admin-success-bg: rgba(5, 150, 105, 0.16); --admin-warning-bg: rgba(217, 119, 6, 0.16); --admin-danger-bg: rgba(220, 38, 38, 0.16); --admin-info-bg: rgba(37, 99, 235, 0.16); /* tournament_bracket.css */ --bracket-bg: #09090B; --card-bg: #18181B; --card-border: #27272A; --winner-bg: rgba(22, 101, 52, 0.22); --winner-text: #4ade80; --winner-border: rgba(34, 197, 94, 0.35); --text-primary: #F4F4F5; --text-team: #F4F4F5; --score-color: #A1A1AA; /* admin_open_play.css */ --bubble-bg: #18181B; --bubble-bg-alt: #27272A; --text-main: #F4F4F5; /* pages/duaw-prereg.css */ --duaw-card: #18181B; --duaw-ink: #F4F4F5; --duaw-muted: #A1A1AA; /* pages/op-prereg.css — most of its tokens fall back to style.css vars (var(--card), var(--bg), var(--text)...) so they self-heal above; these are the ones with their own literal light values */ --op-foam: #09090B; --op-card: #18181B; --op-ink: #F4F4F5; --op-muted: #A1A1AA; --op-line: #27272A; /* pages/system_revenue.css */ --glass-border: rgba(255, 255, 255, 0.10); --text-slate: #A1A1AA; } /* ============================================================================ LAYER 2 — STRUCTURAL COMPONENTS ========================================================================== */ /* --- Page canvas ---------------------------------------------------------- */ html[data-bs-theme="dark"], html[data-bs-theme="dark"] body { background-color: var(--dk-canvas) !important; color: var(--dk-text) !important; } html[data-bs-theme="dark"] main, html[data-bs-theme="dark"] .admin-main, html[data-bs-theme="dark"] .admin-page-content, html[data-bs-theme="dark"] .admin-layout, html[data-bs-theme="dark"] .dashboard-wrapper, html[data-bs-theme="dark"] .vn-page, html[data-bs-theme="dark"] .th-page, html[data-bs-theme="dark"] .page-wrapper, html[data-bs-theme="dark"] .content-wrapper { background-color: var(--dk-canvas) !important; color: var(--dk-text) !important; } /* Layout containers are transparent — they must not paint over section colors */ html[data-bs-theme="dark"] .container, html[data-bs-theme="dark"] .container-xxl, html[data-bs-theme="dark"] .container-fluid, html[data-bs-theme="dark"] .row, html[data-bs-theme="dark"] [class^="col-"], html[data-bs-theme="dark"] [class*=" col-"] { background-color: transparent !important; } /* --- Cards / panels / surfaces -------------------------------------------- */ html[data-bs-theme="dark"] .card, html[data-bs-theme="dark"] .card-header, html[data-bs-theme="dark"] .card-body, html[data-bs-theme="dark"] .card-footer, html[data-bs-theme="dark"] .panel, html[data-bs-theme="dark"] .box, html[data-bs-theme="dark"] .well, html[data-bs-theme="dark"] .tile, html[data-bs-theme="dark"] .widget, html[data-bs-theme="dark"] .stat-card, html[data-bs-theme="dark"] .list-group, html[data-bs-theme="dark"] .list-group-item, html[data-bs-theme="dark"] .accordion-item, html[data-bs-theme="dark"] .accordion-button, html[data-bs-theme="dark"] .accordion-body { background-color: var(--dk-surface) !important; border-color: var(--dk-line) !important; color: var(--dk-text) !important; } /* Custom component families, targeted by prefix so whole design systems are covered without enumerating every class. Restricted to container-ish suffixes so this doesn't repaint buttons, badges, icons or links. */ html[data-bs-theme="dark"] [class*="vn-card"], html[data-bs-theme="dark"] [class*="vn-panel"], html[data-bs-theme="dark"] [class*="vn-box"], html[data-bs-theme="dark"] [class*="vn-section"], html[data-bs-theme="dark"] [class*="vn-table"], html[data-bs-theme="dark"] [class*="vn-header"], html[data-bs-theme="dark"] [class*="pp-card"], html[data-bs-theme="dark"] [class*="pp-panel"], html[data-bs-theme="dark"] [class*="pp-section"], html[data-bs-theme="dark"] [class*="pp-box"], html[data-bs-theme="dark"] [class*="op-card"], html[data-bs-theme="dark"] [class*="op-panel"], html[data-bs-theme="dark"] [class*="op-section"], html[data-bs-theme="dark"] [class*="th-card"], html[data-bs-theme="dark"] [class*="th-panel"], html[data-bs-theme="dark"] [class*="bk-card"], html[data-bs-theme="dark"] [class*="bk-panel"], html[data-bs-theme="dark"] [class*="cd-card"], html[data-bs-theme="dark"] [class*="cd-panel"], html[data-bs-theme="dark"] [class*="cx-card"], html[data-bs-theme="dark"] [class*="ccx-card"], html[data-bs-theme="dark"] [class*="tsf-card"], html[data-bs-theme="dark"] [class*="tsf-panel"], html[data-bs-theme="dark"] [class*="duaw-card"], html[data-bs-theme="dark"] [class*="sum-card"], html[data-bs-theme="dark"] [class*="rw-card"] { background-color: var(--dk-surface) !important; border-color: var(--dk-line) !important; color: var(--dk-text) !important; } /* --- Bootstrap surface utilities ------------------------------------------ */ html[data-bs-theme="dark"] .bg-white, html[data-bs-theme="dark"] .bg-light { background-color: var(--dk-surface) !important; color: var(--dk-text) !important; } html[data-bs-theme="dark"] .text-dark, html[data-bs-theme="dark"] .text-black, html[data-bs-theme="dark"] .text-body { color: var(--dk-text) !important; } html[data-bs-theme="dark"] .text-muted, html[data-bs-theme="dark"] .text-secondary, html[data-bs-theme="dark"] small.text-muted { color: var(--dk-text-muted) !important; } html[data-bs-theme="dark"] .border, html[data-bs-theme="dark"] .border-top, html[data-bs-theme="dark"] .border-bottom, html[data-bs-theme="dark"] .border-start, html[data-bs-theme="dark"] .border-end, html[data-bs-theme="dark"] hr { border-color: var(--dk-line) !important; } /* --- Tables --------------------------------------------------------------- */ html[data-bs-theme="dark"] .table, html[data-bs-theme="dark"] table { --bs-table-bg: transparent; --bs-table-color: var(--dk-text); --bs-table-border-color: var(--dk-line); --bs-table-striped-bg: rgba(255, 255, 255, 0.035); --bs-table-striped-color: var(--dk-text); --bs-table-hover-bg: rgba(255, 255, 255, 0.06); --bs-table-hover-color: var(--dk-text); background-color: var(--dk-surface) !important; color: var(--dk-text) !important; border-color: var(--dk-line) !important; } html[data-bs-theme="dark"] .table > :not(caption) > * > *, html[data-bs-theme="dark"] table th, html[data-bs-theme="dark"] table td { background-color: transparent; border-color: var(--dk-line) !important; color: var(--dk-text); } html[data-bs-theme="dark"] table thead th, html[data-bs-theme="dark"] .table thead th, html[data-bs-theme="dark"] .table-light, html[data-bs-theme="dark"] .table-light > th, html[data-bs-theme="dark"] .table-light > td { background-color: var(--dk-elevated) !important; color: var(--dk-text) !important; border-color: var(--dk-line) !important; } /* Bootstrap contextual table rows — light tints become dark tints */ html[data-bs-theme="dark"] .table-success, html[data-bs-theme="dark"] .table-success > td { background-color: var(--dk-success-bg) !important; color: var(--dk-text) !important; } html[data-bs-theme="dark"] .table-warning, html[data-bs-theme="dark"] .table-warning > td { background-color: var(--dk-warning-bg) !important; color: var(--dk-text) !important; } html[data-bs-theme="dark"] .table-danger, html[data-bs-theme="dark"] .table-danger > td { background-color: var(--dk-danger-bg) !important; color: var(--dk-text) !important; } html[data-bs-theme="dark"] .table-info, html[data-bs-theme="dark"] .table-info > td { background-color: var(--dk-info-bg) !important; color: var(--dk-text) !important; } html[data-bs-theme="dark"] .table-secondary, html[data-bs-theme="dark"] .table-secondary > td { background-color: var(--dk-elevated) !important; color: var(--dk-text) !important; } /* --- Forms ---------------------------------------------------------------- */ html[data-bs-theme="dark"] .form-control, html[data-bs-theme="dark"] .form-select, html[data-bs-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), html[data-bs-theme="dark"] select, html[data-bs-theme="dark"] textarea, html[data-bs-theme="dark"] .input-group-text { background-color: var(--dk-elevated) !important; border-color: var(--dk-line) !important; color: var(--dk-text) !important; } html[data-bs-theme="dark"] .form-control:focus, html[data-bs-theme="dark"] .form-select:focus, html[data-bs-theme="dark"] input:focus, html[data-bs-theme="dark"] select:focus, html[data-bs-theme="dark"] textarea:focus { border-color: var(--dk-accent) !important; box-shadow: 0 0 0 0.2rem rgba(217, 241, 20, 0.2) !important; } html[data-bs-theme="dark"] ::placeholder { color: var(--dk-text-dim) !important; opacity: 1; } html[data-bs-theme="dark"] .form-label, html[data-bs-theme="dark"] label { color: var(--dk-text); } /* --- Modals / dropdowns / offcanvas / popovers ---------------------------- */ html[data-bs-theme="dark"] .modal-content, html[data-bs-theme="dark"] .modal-header, html[data-bs-theme="dark"] .modal-body, html[data-bs-theme="dark"] .modal-footer, html[data-bs-theme="dark"] .offcanvas, html[data-bs-theme="dark"] .offcanvas-header, html[data-bs-theme="dark"] .offcanvas-body, html[data-bs-theme="dark"] .dropdown-menu, html[data-bs-theme="dark"] .popover, html[data-bs-theme="dark"] .popover-body, html[data-bs-theme="dark"] .toast, html[data-bs-theme="dark"] .toast-body { background-color: var(--dk-surface) !important; border-color: var(--dk-line) !important; color: var(--dk-text) !important; } html[data-bs-theme="dark"] .dropdown-item { color: var(--dk-text) !important; } html[data-bs-theme="dark"] .dropdown-item:hover, html[data-bs-theme="dark"] .dropdown-item:focus { background-color: var(--dk-elevated) !important; color: var(--dk-text) !important; } html[data-bs-theme="dark"] .dropdown-divider { border-color: var(--dk-line) !important; } html[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* --- Alerts --------------------------------------------------------------- */ html[data-bs-theme="dark"] .alert { border-color: var(--dk-line) !important; } html[data-bs-theme="dark"] .alert-success { background-color: var(--dk-success-bg) !important; color: var(--dk-success) !important; border-color: rgba(16, 185, 129, 0.35) !important; } html[data-bs-theme="dark"] .alert-warning { background-color: var(--dk-warning-bg) !important; color: var(--dk-warning) !important; border-color: rgba(245, 158, 11, 0.35) !important; } html[data-bs-theme="dark"] .alert-danger, html[data-bs-theme="dark"] .alert-error { background-color: var(--dk-danger-bg) !important; color: var(--dk-danger) !important; border-color: rgba(239, 68, 68, 0.35) !important; } html[data-bs-theme="dark"] .alert-info, html[data-bs-theme="dark"] .alert-primary { background-color: var(--dk-info-bg) !important; color: var(--dk-info) !important; border-color: rgba(59, 130, 246, 0.35) !important; } html[data-bs-theme="dark"] .alert-light, html[data-bs-theme="dark"] .alert-secondary { background-color: var(--dk-elevated) !important; color: var(--dk-text) !important; } /* --- Buttons -------------------------------------------------------------- */ html[data-bs-theme="dark"] .btn-light, html[data-bs-theme="dark"] .btn-outline-secondary, html[data-bs-theme="dark"] .btn-outline-dark, html[data-bs-theme="dark"] .btn-secondary { background-color: var(--dk-elevated) !important; border-color: var(--dk-line) !important; color: var(--dk-text) !important; } html[data-bs-theme="dark"] .btn-light:hover, html[data-bs-theme="dark"] .btn-outline-secondary:hover, html[data-bs-theme="dark"] .btn-outline-dark:hover, html[data-bs-theme="dark"] .btn-secondary:hover { background-color: var(--dk-raised) !important; border-color: var(--dk-accent) !important; color: var(--dk-text) !important; } /* Keep the brand lime unmistakable on dark */ html[data-bs-theme="dark"] .btn-primary { background-color: var(--dk-accent) !important; border-color: var(--dk-accent) !important; color: var(--dk-accent-ink) !important; font-weight: 700; } html[data-bs-theme="dark"] .btn-primary:hover { background-color: #E8FF4A !important; border-color: #E8FF4A !important; color: var(--dk-accent-ink) !important; } /* --- Badges: only neutral/light ones get repainted; semantic colors stay --- */ html[data-bs-theme="dark"] .badge.bg-light, html[data-bs-theme="dark"] .badge.bg-white, html[data-bs-theme="dark"] .badge.bg-secondary { background-color: var(--dk-elevated) !important; color: var(--dk-text) !important; } /* --- Nav / tabs / pagination ---------------------------------------------- */ html[data-bs-theme="dark"] .nav-tabs { border-color: var(--dk-line) !important; } html[data-bs-theme="dark"] .nav-tabs .nav-link { color: var(--dk-text-muted) !important; } html[data-bs-theme="dark"] .nav-tabs .nav-link.active { background-color: var(--dk-surface) !important; border-color: var(--dk-line) var(--dk-line) var(--dk-surface) !important; color: var(--dk-accent) !important; } html[data-bs-theme="dark"] .page-link { background-color: var(--dk-surface) !important; border-color: var(--dk-line) !important; color: var(--dk-text) !important; } html[data-bs-theme="dark"] .page-item.active .page-link { background-color: var(--dk-accent) !important; border-color: var(--dk-accent) !important; color: var(--dk-accent-ink) !important; } /* --- Headings & typography ------------------------------------------------ */ html[data-bs-theme="dark"] h1, html[data-bs-theme="dark"] h2, html[data-bs-theme="dark"] h3, html[data-bs-theme="dark"] h4, html[data-bs-theme="dark"] h5, html[data-bs-theme="dark"] h6, html[data-bs-theme="dark"] .page-title, html[data-bs-theme="dark"] .section-title, html[data-bs-theme="dark"] dt, html[data-bs-theme="dark"] legend { color: var(--dk-text) !important; } html[data-bs-theme="dark"] code, html[data-bs-theme="dark"] pre, html[data-bs-theme="dark"] kbd { background-color: var(--dk-elevated) !important; color: var(--dk-accent) !important; border-color: var(--dk-line) !important; } /* --- SweetAlert2 (player/groups.php, player/group_details.php) ------------- */ html[data-bs-theme="dark"] .swal2-popup { background: var(--dk-surface) !important; color: var(--dk-text) !important; } html[data-bs-theme="dark"] .swal2-title, html[data-bs-theme="dark"] .swal2-html-container { color: var(--dk-text) !important; } /* ============================================================================ LAYER 3 — INLINE-STYLE SAFETY NET Catches elements that carry literal colors in a style="" attribute and have no useful class to target. The value list is the Tailwind slate ramp plus #fff, which the audit found accounts for the overwhelming majority of inline colors in this codebase. Only LIGHT values are remapped for backgrounds and only DARK values for text, so already-dark markup is left alone. Note #fff also matches #ffffff (substring), which is intended. ========================================================================== */ /* --- Light backgrounds → surface ----------------------------------------- */ html[data-bs-theme="dark"] [style*="background:#fff" i], html[data-bs-theme="dark"] [style*="background: #fff" i], html[data-bs-theme="dark"] [style*="background-color:#fff" i], html[data-bs-theme="dark"] [style*="background-color: #fff" i], html[data-bs-theme="dark"] [style*="background:white" i], html[data-bs-theme="dark"] [style*="background: white" i], html[data-bs-theme="dark"] [style*="background-color:white" i], html[data-bs-theme="dark"] [style*="background-color: white" i], html[data-bs-theme="dark"] [style*="background:#f8fafc" i], html[data-bs-theme="dark"] [style*="background: #f8fafc" i], html[data-bs-theme="dark"] [style*="background-color:#f8fafc" i], html[data-bs-theme="dark"] [style*="background-color: #f8fafc" i], html[data-bs-theme="dark"] [style*="background:#f9fafb" i], html[data-bs-theme="dark"] [style*="background: #f9fafb" i], html[data-bs-theme="dark"] [style*="background:#f8f9fa" i], html[data-bs-theme="dark"] [style*="background: #f8f9fa" i], html[data-bs-theme="dark"] [style*="background:#f4f4f5" i], html[data-bs-theme="dark"] [style*="background: #f4f4f5" i], html[data-bs-theme="dark"] [style*="background:#f8f7ff" i], html[data-bs-theme="dark"] [style*="background: #f8f7ff" i], html[data-bs-theme="dark"] [style*="background:#fffdf8" i], html[data-bs-theme="dark"] [style*="background: #fffdf8" i] { background-color: var(--dk-surface) !important; background-image: none !important; } /* --- Slightly darker light backgrounds → elevated ------------------------- */ html[data-bs-theme="dark"] [style*="background:#f1f5f9" i], html[data-bs-theme="dark"] [style*="background: #f1f5f9" i], html[data-bs-theme="dark"] [style*="background-color:#f1f5f9" i], html[data-bs-theme="dark"] [style*="background-color: #f1f5f9" i], html[data-bs-theme="dark"] [style*="background:#f3f4f6" i], html[data-bs-theme="dark"] [style*="background: #f3f4f6" i], html[data-bs-theme="dark"] [style*="background:#e2e8f0" i], html[data-bs-theme="dark"] [style*="background: #e2e8f0" i], html[data-bs-theme="dark"] [style*="background-color:#e2e8f0" i], html[data-bs-theme="dark"] [style*="background-color: #e2e8f0" i], html[data-bs-theme="dark"] [style*="background:#e5e7eb" i], html[data-bs-theme="dark"] [style*="background: #e5e7eb" i], html[data-bs-theme="dark"] [style*="background:#eef2f7" i], html[data-bs-theme="dark"] [style*="background: #eef2f7" i] { background-color: var(--dk-elevated) !important; background-image: none !important; } /* --- Light semantic tint backgrounds → dark semantic tints ---------------- */ html[data-bs-theme="dark"] [style*="#dcfce7" i], html[data-bs-theme="dark"] [style*="#ecfdf5" i], html[data-bs-theme="dark"] [style*="#f0fdf4" i] { background-color: var(--dk-success-bg) !important; } html[data-bs-theme="dark"] [style*="#fef3c7" i], html[data-bs-theme="dark"] [style*="#fffbeb" i], html[data-bs-theme="dark"] [style*="#fef9c3" i] { background-color: var(--dk-warning-bg) !important; } html[data-bs-theme="dark"] [style*="#fee2e2" i], html[data-bs-theme="dark"] [style*="#fef2f2" i] { background-color: var(--dk-danger-bg) !important; } html[data-bs-theme="dark"] [style*="#dbeafe" i], html[data-bs-theme="dark"] [style*="#eff6ff" i], html[data-bs-theme="dark"] [style*="#f0f9ff" i], html[data-bs-theme="dark"] [style*="#e0f2fe" i] { background-color: var(--dk-info-bg) !important; } /* --- Dark text colors → light text ---------------------------------------- */ html[data-bs-theme="dark"] [style*="color:#0f172a" i], html[data-bs-theme="dark"] [style*="color: #0f172a" i], html[data-bs-theme="dark"] [style*="color:#1e293b" i], html[data-bs-theme="dark"] [style*="color: #1e293b" i], html[data-bs-theme="dark"] [style*="color:#111827" i], html[data-bs-theme="dark"] [style*="color: #111827" i], html[data-bs-theme="dark"] [style*="color:#101820" i], html[data-bs-theme="dark"] [style*="color: #101820" i], html[data-bs-theme="dark"] [style*="color:#15201c" i], html[data-bs-theme="dark"] [style*="color: #15201c" i], html[data-bs-theme="dark"] [style*="color:#334155" i], html[data-bs-theme="dark"] [style*="color: #334155" i], html[data-bs-theme="dark"] [style*="color:#374151" i], html[data-bs-theme="dark"] [style*="color: #374151" i], html[data-bs-theme="dark"] [style*="color:#000" i], html[data-bs-theme="dark"] [style*="color: #000" i] { color: var(--dk-text) !important; } /* --- Mid-gray text → muted ------------------------------------------------ */ html[data-bs-theme="dark"] [style*="color:#475569" i], html[data-bs-theme="dark"] [style*="color: #475569" i], html[data-bs-theme="dark"] [style*="color:#64748b" i], html[data-bs-theme="dark"] [style*="color: #64748b" i], html[data-bs-theme="dark"] [style*="color:#6b7280" i], html[data-bs-theme="dark"] [style*="color: #6b7280" i], html[data-bs-theme="dark"] [style*="color:#94a3b8" i], html[data-bs-theme="dark"] [style*="color: #94a3b8" i], html[data-bs-theme="dark"] [style*="color:#9ca3af" i], html[data-bs-theme="dark"] [style*="color: #9ca3af" i] { color: var(--dk-text-muted) !important; } /* --- Light borders -------------------------------------------------------- */ html[data-bs-theme="dark"] [style*="border:1px solid #e2e8f0" i], html[data-bs-theme="dark"] [style*="border: 1px solid #e2e8f0" i], html[data-bs-theme="dark"] [style*="border:1px solid #e5e7eb" i], html[data-bs-theme="dark"] [style*="border: 1px solid #e5e7eb" i], html[data-bs-theme="dark"] [style*="border:1px solid #f1f5f9" i], html[data-bs-theme="dark"] [style*="border: 1px solid #f1f5f9" i], html[data-bs-theme="dark"] [style*="border:1px solid #cbd5e1" i], html[data-bs-theme="dark"] [style*="border: 1px solid #cbd5e1" i], html[data-bs-theme="dark"] [style*="border:1px solid #ddd" i], html[data-bs-theme="dark"] [style*="border: 1px solid #ddd" i] { border-color: var(--dk-line) !important; } /* ============================================================================ LAYER 4 — MEDIA, EXCLUSIONS AND PROTECTED REGIONS ========================================================================== */ /* Never repaint or invert media. */ html[data-bs-theme="dark"] img, html[data-bs-theme="dark"] svg, html[data-bs-theme="dark"] canvas, html[data-bs-theme="dark"] video, html[data-bs-theme="dark"] iframe, html[data-bs-theme="dark"] picture, html[data-bs-theme="dark"] .video-js { filter: none !important; } html[data-bs-theme="dark"] img, html[data-bs-theme="dark"] picture { background-color: transparent !important; } /* Brand and payment-provider marks are light-background artwork — give just those a light chip so they stay legible on a dark surface. */ html[data-bs-theme="dark"] img[src*="gcash_logo"], html[data-bs-theme="dark"] img[src*="maya_logo"], html[data-bs-theme="dark"] img[src*="paymongo-logo"], html[data-bs-theme="dark"] img[src*="visa_master_logo"] { background-color: #FFFFFF !important; border-radius: 8px; padding: 6px; } /* NOTE on components that are already dark by design (the admin sidebar's .sb-* / --sb-* system, and the open-play live board's --lb-* system): this sheet deliberately contains NO rules matching those class families, so they keep their own styling untouched. Do not add a "reset" rule here to protect them — `revert` would roll back to the user-agent origin and discard their own author styles, which is the opposite of what's wanted. */ /* Print: always render light so printed sheets stay readable on paper. */ @media print { html[data-bs-theme="dark"], html[data-bs-theme="dark"] body, html[data-bs-theme="dark"] * { background-color: #FFFFFF !important; background-image: none !important; color: #000000 !important; border-color: #000000 !important; } }