/* ============================================================================ Dark theme for the partner dashboard. Strategy: 1. Re-declare the design tokens under html[data-theme="dark"]. Selector specificity (type + attribute = 0,1,1) beats every :root block (0,1,0) — including the duplicate :root in dashboard.css — so these win regardless of stylesheet load order. Every rule that already uses var(--card-bg) / var(--text-primary) / --vx-* flips for free. 2. data-bs-theme="dark" (set on by the FOUC script) themes all Bootstrap components. 3. Targeted overrides below fix surfaces that hardcode light colours inline or in page CSS. Inline styles are beaten with !important; class-based page CSS just needs higher specificity. ============================================================================ */ html[data-theme="dark"] { /* ---- vx primitives (header-styles.css aliases reference these) ---- */ --vx-primary: #fb8b3c; --vx-primary-dark: #f97316; --vx-primary-soft: rgba(249, 115, 22, 0.22); --vx-primary-faint: rgba(249, 115, 22, 0.12); --vx-ground: #0e1015; /* page background */ --vx-card: #181b22; /* card surface */ --vx-border: #2b303a; /* hairlines */ --vx-border-strong: #3a4150; /* card outlines */ --vx-text: #e8eaef; --vx-muted: #9aa4b3; --vx-success: #34d399; --vx-warning: #fbbf24; --vx-danger: #f87171; --vx-info: #60a5fa; --vx-shadow-sm: 0 4px 14px -8px rgba(0, 0, 0, 0.6); --vx-shadow-md: 0 14px 30px -14px rgba(0, 0, 0, 0.7); /* ---- semantic aliases (also hardcoded in dashboard.css :root — override both) ---- */ --primary-color: #fb8b3c; --primary-dark: #f97316; --primary-light: rgba(249, 115, 22, 0.22); --secondary-color: #9aa4b3; --success-color: #34d399; --warning-color: #fbbf24; --danger-color: #f87171; --info-color: #60a5fa; --light-bg: #14171e; /* subtle raised/inset surface */ --card-bg: #181b22; --border-color: #2b303a; --text-primary: #e8eaef; --text-secondary: #9aa4b3; --warm-border: #2b303a; --shadow-sm: 0 4px 14px -8px rgba(0, 0, 0, 0.6); --shadow-md: 0 14px 30px -14px rgba(0, 0, 0, 0.7); --shadow-lg: 0 18px 40px -16px rgba(0, 0, 0, 0.75); color-scheme: dark; } /* ---- Page ground + default text ---- */ html[data-theme="dark"] body { background: var(--vx-ground); color: var(--text-primary); } /* Warm scrollbars → neutral dark */ html[data-theme="dark"] * { scrollbar-color: #3a3f49 transparent; } html[data-theme="dark"] *::-webkit-scrollbar-thumb { background: #3a3f49; } /* ============================================================================ Component fixes — surfaces that hardcode light colours. ============================================================================ */ /* Generic cards / stat tiles / panels (many set background:#fff inline). */ html[data-theme="dark"] .dashboard-card, html[data-theme="dark"] .vx-card, html[data-theme="dark"] .vx-stat, html[data-theme="dark"] .stat, html[data-theme="dark"] .ov-perf-panel, html[data-theme="dark"] .ov-prod-card, html[data-theme="dark"] .ov-camp-card, html[data-theme="dark"] .modern-carousel-card { background: var(--card-bg) !important; border-color: var(--border-color) !important; color: var(--text-primary); } /* Circular icon badges that use pale tints keep their accent but sit on a dark chip. */ html[data-theme="dark"] .vx-icon-circle { background: rgba(148, 163, 184, 0.14); } /* ---- Products to Share section (imperative, inline styles) ---- */ html[data-theme="dark"] .ov-share-search input, html[data-theme="dark"] .ov-share-catwrap select, html[data-theme="dark"] #shareProductsSearch, html[data-theme="dark"] #shareProductsCategory { background: var(--card-bg) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; } html[data-theme="dark"] .ov-plat-pill { background: var(--card-bg) !important; border-color: var(--border-color) !important; color: var(--text-secondary) !important; } html[data-theme="dark"] .ov-plat-pill.active { background: rgba(249, 115, 22, 0.20) !important; border-color: var(--primary-color) !important; color: #fdba74 !important; } html[data-theme="dark"] .ov-plat-pill .cnt { background: rgba(148, 163, 184, 0.18); color: var(--text-secondary); } /* Empty-state box is written inline by the script → beat it with !important. */ html[data-theme="dark"] .ov-share-empty { background: var(--light-bg) !important; border-color: var(--border-color) !important; color: var(--text-secondary) !important; } /* product card image fallback tile + skeleton */ html[data-theme="dark"] .ov-prod-card img[style*="#fff7ed"], html[data-theme="dark"] .ov-prod-card img[style*="padding"] { background: #14171e !important; } /* ---- Unified share sheet (products + campaigns) ---- */ html[data-theme="dark"] .ov-rc-qr-box, html[data-theme="dark"] .ov-share-box { background: var(--card-bg) !important; border-color: var(--border-color) !important; color: var(--text-primary); } html[data-theme="dark"] .ov-share-preview { background: #14171e !important; border-color: var(--border-color) !important; } html[data-theme="dark"] .ov-share-name { color: var(--text-primary); } html[data-theme="dark"] .ov-share-desc { color: var(--text-secondary); } html[data-theme="dark"] .ov-share-link { background: rgba(249, 115, 22, 0.16) !important; border-color: rgba(249, 115, 22, 0.45) !important; color: #fdba74 !important; } html[data-theme="dark"] .ov-qr-frame { background: #0f1216 !important; border-color: var(--border-color) !important; } html[data-theme="dark"] .ov-rc-qr-close { background: rgba(148, 163, 184, 0.16); color: var(--text-secondary); } html[data-theme="dark"] .ov-qr-mini { background: var(--card-bg); border-color: var(--border-color); color: var(--text-secondary); } html[data-theme="dark"] .ov-share-qrhint strong { color: var(--text-primary); } /* ---- DataTable (components/ui/datatable.css hardcodes cool greys) ---- */ html[data-theme="dark"] .dt-wrap, html[data-theme="dark"] .dt-table, html[data-theme="dark"] .dt-card { background: var(--card-bg); border-color: var(--border-color); color: var(--text-primary); } html[data-theme="dark"] .dt-table thead th, html[data-theme="dark"] .dt-th { background: #1f242c; color: var(--text-secondary); border-color: var(--border-color); } html[data-theme="dark"] .dt-table td, html[data-theme="dark"] .dt-table th { border-color: var(--border-color); color: var(--text-primary); } html[data-theme="dark"] .dt-table tbody tr:hover { background: #1f242c; } html[data-theme="dark"] .dt-sub, html[data-theme="dark"] .dt-empty, html[data-theme="dark"] .dt-footer, html[data-theme="dark"] .dt-muted { color: var(--text-secondary); } html[data-theme="dark"] .dt-page-btn, html[data-theme="dark"] .dt-select { background: var(--card-bg); border-color: var(--border-color); color: var(--text-primary); } html[data-theme="dark"] .dt-page-btn.active { background: var(--primary-color); border-color: var(--primary-color); color: #1a1204; } /* Provenance chips — darken the pale tints, lighten the ink */ html[data-theme="dark"] .dt-chip-direct { background: rgba(16, 185, 129, 0.16); color: #6ee7b7; } html[data-theme="dark"] .dt-chip-partner { background: rgba(59, 130, 246, 0.16); color: #93c5fd; } html[data-theme="dark"] .dt-chip-affiliate { background: rgba(139, 92, 246, 0.18); color: #c4b5fd; } html[data-theme="dark"] .dt-chip-promoter { background: rgba(245, 158, 11, 0.16); color: #fcd34d; } html[data-theme="dark"] .dt-chip-app { background: rgba(236, 72, 153, 0.16); color: #f9a8d4; } html[data-theme="dark"] .dt-chip-website { background: rgba(14, 165, 233, 0.16); color: #7dd3fc; } html[data-theme="dark"] .dt-chip-muted { background: rgba(148, 163, 184, 0.16); color: #cbd5e1; } /* ---- FilterBar ---- */ html[data-theme="dark"] .fb-select, html[data-theme="dark"] .fb-input { background: var(--card-bg); border-color: var(--border-color); color: var(--text-primary); } html[data-theme="dark"] .fb-label { color: var(--text-secondary); } html[data-theme="dark"] .fb-clear { background: var(--card-bg); border-color: var(--border-color); color: var(--text-secondary); } /* ---- Generic form controls that hardcode white ---- */ html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]), html[data-theme="dark"] select, html[data-theme="dark"] textarea { background-color: var(--card-bg); color: var(--text-primary); border-color: var(--border-color); } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #7c8798; } /* ---- Notification dropdown / language menu / any popover using --card-bg already flip. Catch stray white pop surfaces. ---- */ html[data-theme="dark"] .notification-dropdown, html[data-theme="dark"] .notification-header, html[data-theme="dark"] .notification-footer, html[data-theme="dark"] .notification-item { background: var(--card-bg); border-color: var(--border-color); color: var(--text-primary); } /* ---- Products full page (React) — scoped structural overrides ---- */ html[data-theme="dark"] .vx-products-page, html[data-theme="dark"] .vx-products-page .vx-prod-card, html[data-theme="dark"] .vx-sharesheet .vx-ss-card { color: var(--text-primary); } /* Muted helper / subtitle text that some pages hardcode. */ html[data-theme="dark"] .muted, html[data-theme="dark"] .card-subtitle, html[data-theme="dark"] .vx-page-sub, html[data-theme="dark"] .dt-sub { color: var(--text-secondary); } /* ---- Overview hero (partner code + stat strip) ---- dashboard.css paints this with a hardcoded cream gradient and #fff inner tiles, so the flipped light --text-* tokens ended up as pale ink on white. Re-ground the whole block. */ html[data-theme="dark"] .ov-hero-card { border-color: var(--border-color); background: radial-gradient(circle at 90% 16%, rgba(249, 115, 22, 0.20), transparent 16%), radial-gradient(circle at 78% -12%, rgba(249, 115, 22, 0.10), transparent 38%), linear-gradient(120deg, #181b22 0%, #1b1e26 45%, #241a12 100%); box-shadow: var(--shadow-md); } html[data-theme="dark"] .ov-hero-mandala { color: rgba(249, 115, 22, 0.20); } html[data-theme="dark"] .ov-code-box, html[data-theme="dark"] .ov-stat { background: rgba(255, 255, 255, 0.04); border-color: var(--border-color); box-shadow: none; } html[data-theme="dark"] .ov-stat-icon { background: rgba(249, 115, 22, 0.14); border-color: var(--primary-color); color: var(--primary-color); } html[data-theme="dark"] .ov-role-flow { background: rgba(255, 255, 255, 0.04); border-color: var(--border-color); color: var(--text-secondary); } html[data-theme="dark"] .ov-btn-ghost { background: rgba(255, 255, 255, 0.04); border-color: var(--border-color); color: var(--text-primary); } html[data-theme="dark"] .ov-btn-ghost:hover { border-color: var(--primary-color); color: var(--primary-color); } /* ---- Commission Overview stat tiles (.stat-card / .compact-card hardcode white + #000 ink) ---- */ html[data-theme="dark"] .stat-card, html[data-theme="dark"] .compact-card { background: var(--card-bg); border-color: var(--border-color); color: var(--text-primary); } html[data-theme="dark"] .compact-card:hover { background: #1f242c; } html[data-theme="dark"] .compact-card .stat-content p { color: var(--text-secondary); } /* dashboard.css scopes these by ID (#commissionSection .compact-card → 1,1,0), which outranks the class-only rules above. Match the ID here so the dark surface actually wins. */ html[data-theme="dark"] #commissionSection .compact-card, html[data-theme="dark"] #commissionSection .compact-card:hover { background: var(--card-bg); border-color: var(--border-color); } html[data-theme="dark"] #commissionSection .compact-card:hover { background: #1f242c; } html[data-theme="dark"] #commissionSection .compact-card .stat-content h4 { color: var(--text-primary); } html[data-theme="dark"] #commissionSection .compact-card .stat-content p { color: var(--text-secondary); } /* Pale pastel icon chips → translucent tints of the same hue, ink lightened. */ html[data-theme="dark"] #commissionSection .compact-card .stat-icon { background: rgba(249, 115, 22, 0.16); } html[data-theme="dark"] #commissionSection .col-md-3:nth-child(2) .stat-icon { background: rgba(251, 191, 36, 0.16); } html[data-theme="dark"] #commissionSection .col-md-3:nth-child(3) .stat-icon { background: rgba(52, 211, 153, 0.16); } html[data-theme="dark"] #commissionSection .col-md-3:nth-child(4) .stat-icon { background: rgba(96, 165, 250, 0.16); } html[data-theme="dark"] .stat-content .stat-label, html[data-theme="dark"] .stat-label { color: var(--text-secondary); } /* ---- Grow Your Network (.ov-ref-row) — action buttons + URL fields hardcode #fff / #f8fafc ---- */ html[data-theme="dark"] .ov-ref-row .btn { background: rgba(255, 255, 255, 0.04); border-color: var(--border-color); color: var(--text-secondary); } html[data-theme="dark"] .ov-ref-row .btn:hover { border-color: var(--primary-color); color: var(--primary-color); background: var(--primary-light); } /* Per-channel hover tints were pale pastels — restate as translucent washes of the same hue. */ html[data-theme="dark"] .ov-ref-row [id*="WhatsApp"]:hover { border-color: #25d366; color: #6ee7a8; background: rgba(37, 211, 102, 0.16); } html[data-theme="dark"] .ov-ref-row [id*="Email"]:hover { border-color: #ef4444; color: #fca5a5; background: rgba(239, 68, 68, 0.16); } html[data-theme="dark"] .ov-ref-row [id*="SMS"]:hover { border-color: #3b82f6; color: #93c5fd; background: rgba(59, 130, 246, 0.16); } html[data-theme="dark"] .ov-ref-row .input-group .form-control { background: var(--light-bg); border-color: var(--border-color); color: var(--text-secondary); } /* ---- Referral Center (.ov-rc-*) — platform tabs, action tiles, link chips ---- */ html[data-theme="dark"] .ov-rc-tab { background: rgba(255, 255, 255, 0.04); border-color: var(--border-color); color: var(--text-secondary); } html[data-theme="dark"] .ov-rc-tab:hover { border-color: var(--primary-color); color: var(--primary-color); } html[data-theme="dark"] .ov-rc-tab.active { background: var(--primary-color); color: #1a1204; border-color: var(--primary-color); } html[data-theme="dark"] .ov-rc-act { background: rgba(255, 255, 255, 0.04); border-color: var(--border-color); color: var(--text-secondary); } html[data-theme="dark"] .ov-rc-act:hover { border-color: var(--primary-color); background: var(--primary-light); } /* Link chips: pale tint + saturated ink → translucent tint + light ink, per platform. */ html[data-theme="dark"] .ov-rc-row[data-plat="vedic-vaibhav"] .ov-rc-tag { background: rgba(139, 92, 246, 0.18); color: #c4b5fd; } html[data-theme="dark"] .ov-rc-row[data-plat="vedic-shop"] .ov-rc-tag { background: rgba(249, 115, 22, 0.18); color: #fdba74; } html[data-theme="dark"] .ov-rc-row[data-plat="pandit-ji"] .ov-rc-tag { background: rgba(16, 185, 129, 0.18); color: #6ee7b7; } html[data-theme="dark"] .ov-rc-row[data-plat="astro-vaibhav"] .ov-rc-tag { background: rgba(236, 72, 153, 0.18); color: #f9a8d4; } html[data-theme="dark"] .ov-rc-tag:hover { filter: brightness(1.25); } /* ---- Department Analytics cards (built in JS with inline styles → need !important) ---- */ html[data-theme="dark"] .department-card { background: var(--card-bg) !important; border-color: var(--border-color) !important; box-shadow: var(--shadow-sm) !important; } html[data-theme="dark"] .department-card h6 { color: var(--text-primary) !important; } html[data-theme="dark"] .department-card p { color: var(--text-secondary) !important; } html[data-theme="dark"] .department-card span { color: var(--text-primary); } /* ============================================================================ Auth pages (/login, /register) Both pages link the public wizard sheet /assets/css/register.css, which paints a white glass `.auth-card`, cream inputs, pastel chips and slate ink. That sheet (and login's styled-jsx block) is injected by the page, so it cascades AFTER this file — every rule below is prefixed with html[data-theme="dark"] (0,2,1) so it outranks the plain class selectors (0,1,0) regardless of order, and mirrors `!important` wherever the source sheet or an inline style used it. ============================================================================ */ /* ---- Page ground ---- `.bg-body` resolves to Bootstrap's dark --bs-body-bg (#1a2537 navy), which doesn't match the app ground the rest of the dashboard uses. Re-ground both auth shells. */ html[data-theme="dark"] .authentication-login, html[data-theme="dark"] .right-side .bg-body { background: var(--vx-ground) !important; } /* Animated pastel wash behind the split layout → warm dark. */ html[data-theme="dark"] .radial-gradient::before { background: radial-gradient(#111821, #0d131b, #141a23) 0 0 / 400% 400%; opacity: 0.6; } /* ---- The glass card ---- */ html[data-theme="dark"] .auth-card { background: rgba(24, 27, 34, 0.92); border-color: rgba(249, 115, 22, 0.28); box-shadow: var(--shadow-lg); } /* Orange blur blobs read as haze on white but as glare on dark — dial them back. */ html[data-theme="dark"] .auth-card::before, html[data-theme="dark"] .auth-card::after { opacity: 0.13; } html[data-theme="dark"] .auth-card .card-header-badge { border-color: var(--card-bg); } html[data-theme="dark"] .logo-circle { background: radial-gradient(circle at center, #241a12, #181b22); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45); } /* ---- Ink hardcoded to slate / grey ---- */ html[data-theme="dark"] .auth-card .form-label, html[data-theme="dark"] .auth-card .form-check-label, html[data-theme="dark"] .preview-filename { color: var(--text-primary) !important; } html[data-theme="dark"] .sub-text, html[data-theme="dark"] .preview-filesize { color: var(--text-secondary); } html[data-theme="dark"] .auth-card p.mb-9 { color: var(--vx-primary); } /* ---- Inputs ---- The base sheet fills .form-control / .form-select with rgba(255,255,255,.85). Both pages already re-point .form-control at --vx-ground; .form-select and the focus fill are restated here so nothing falls back to white. */ html[data-theme="dark"] .auth-card .form-control, html[data-theme="dark"] .auth-card .form-select { background-color: var(--vx-ground) !important; border-color: var(--vx-border) !important; color: var(--vx-text) !important; } html[data-theme="dark"] .auth-card .form-control:focus, html[data-theme="dark"] .auth-card .form-select:focus { background-color: var(--vx-card) !important; } html[data-theme="dark"] .auth-card .form-control::placeholder { color: #7c8798 !important; } /* Native date/time pickers render a black glyph on the dark field without this. */ html[data-theme="dark"] .auth-card input[type="date"]::-webkit-calendar-picker-indicator, html[data-theme="dark"] .auth-card input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(0.75); } /* Validation fills were near-white tints (#fff5f5 / #f0f9f0) set with !important. */ html[data-theme="dark"] .auth-card .form-control.is-invalid, html[data-theme="dark"] .input-group:has(.is-invalid) .input-group-text { background-color: rgba(248, 113, 113, 0.12) !important; } html[data-theme="dark"] .auth-card .form-control.is-valid, html[data-theme="dark"] .input-group:has(.is-valid) .input-group-text { background-color: rgba(52, 211, 153, 0.12) !important; } /* ---- intl-tel-input (CDN sheet, white dropdown) ---- */ html[data-theme="dark"] .iti__selected-flag, html[data-theme="dark"] .iti--separate-dial-code .iti__selected-flag { background: var(--vx-card) !important; color: var(--vx-text); } html[data-theme="dark"] .iti__country-list { background: var(--card-bg); border-color: var(--border-color); color: var(--text-primary); box-shadow: var(--shadow-md); } html[data-theme="dark"] .iti__country.iti__highlight { background: rgba(249, 115, 22, 0.18); } html[data-theme="dark"] .iti__divider { border-color: var(--border-color); } html[data-theme="dark"] .iti__dial-code { color: var(--text-secondary); } /* ---- Secondary ("Previous") buttons: cream chip → translucent orange ---- */ html[data-theme="dark"] .auth-card .btn-secondary { background: rgba(249, 115, 22, 0.16); color: #fdba74; } html[data-theme="dark"] .auth-card .btn-secondary:hover { background: var(--vx-primary); color: #1a1204; } /* ---- Wizard chrome ---- */ html[data-theme="dark"] .progress-bar { background: rgba(249, 115, 22, 0.18); box-shadow: none; } html[data-theme="dark"] .step-indicator span { border-color: var(--border-color); } /* ---- KYC document preview tiles ---- */ html[data-theme="dark"] .preview-container { background: var(--light-bg); border-color: var(--border-color); box-shadow: none; } html[data-theme="dark"] .preview-container:hover { border-color: var(--vx-primary); } html[data-theme="dark"] .preview-image { border-color: var(--border-color); } html[data-theme="dark"] .preview-icon { background: rgba(249, 115, 22, 0.14); } /* ---- OTP modal (inline background:#fff on the panel) ---- */ html[data-theme="dark"] #otpSection > div { background: var(--card-bg) !important; border: 1px solid var(--border-color); color: var(--text-primary); } html[data-theme="dark"] #otpSection h5 { color: var(--text-primary); }