/* Ultra-clean black & white theme Applied when has class 'theme-clean'. This file is loaded LAST so it can override theme-aurora and any other skins. */ body.theme-clean { /* Strict neutral palette via CSS variables */ --primary: #111111; --primary-dark: #000000; --secondary: #666666; --success: #16a34a; --warning: #eab308; --danger: #dc2626; --dark: #000000; --light: #ffffff; --border: #e5e5e5; --text: #111111; --text-light: #6b7280; --sidebar-bg: #111111; --sidebar-text: #f9fafb; --sidebar-hover: rgba(0, 0, 0, 0.06); --card-bg: #ffffff; --card-border: #e5e5e5; --topbar-bg: #ffffff; --stat-card-bg: #ffffff; --shadow: 0 4px 18px rgba(15, 23, 42, 0.10); --shadow-md: 0 10px 30px rgba(15, 23, 42, 0.14); --shadow-lg: 0 18px 60px rgba(15, 23, 42, 0.18); --focus-ring: 0 0 0 2px rgba(0, 0, 0, 0.25); --alert-detail-surface-bg: #f4f4f5; --alert-detail-surface-text: #111111; /* Light surfaces inside modals (JS-generated blocks) */ --modal-light-surface-bg: #f4f4f5; --modal-light-surface-text: #111111; background: #f7f7f7 !important; color: var(--text) !important; } /* Layout surfaces: remove gradients / glass from Aurora and enforce solid white cards */ body.theme-clean .top-header, body.theme-clean .content, body.theme-clean .page, body.theme-clean .chart-card, body.theme-clean .summary-card, body.theme-clean .card, body.theme-clean .table-card, body.theme-clean .rules-card, body.theme-clean .sync-card, body.theme-clean .futuristic-card { background: #ffffff !important; border: 1px solid var(--card-border) !important; box-shadow: var(--shadow) !important; backdrop-filter: none !important; } /* Sidebar */ body.theme-clean .sidebar { background: var(--sidebar-bg) !important; color: var(--sidebar-text) !important; border-right: 1px solid #111111; } body.theme-clean .nav-item { border-radius: 999px; margin-inline: 4px; } body.theme-clean .nav-item a { color: rgba(249, 250, 251, 0.80); } body.theme-clean .nav-item:hover { background: rgba(255, 255, 255, 0.06) !important; } body.theme-clean .nav-item.active { background: #ffffff !important; border-color: #ffffff !important; } body.theme-clean .nav-item { border-radius: 999px; margin-inline: 4px; } body.theme-clean .nav-item.active { background: #ffffff !important; color: #111111 !important; } body.theme-clean .nav-item.active .nav-badge { background: #000000 !important; color: #ffffff !important; } /* Top bar */ body.theme-clean .top-bar { background: #ffffff !important; border-bottom: 1px solid var(--border) !important; box-shadow: var(--shadow) !important; } /* Headings & text */ body.theme-clean .page-header h1, body.theme-clean .page-header h2, body.theme-clean .page-header h3, body.theme-clean .card-header h1, body.theme-clean .card-header h2, body.theme-clean .card-header h3 { color: #000000 !important; } body.theme-clean .page-header p, body.theme-clean .card p, body.theme-clean label, body.theme-clean .help-text { color: #4b5563 !important; } /* Buttons */ body.theme-clean .btn, body.theme-clean .btn-primary, body.theme-clean .btn-secondary { border-radius: 999px; font-weight: 500; box-shadow: none; } body.theme-clean .btn-primary { background: #000000 !important; color: #ffffff !important; border: 1px solid #000000 !important; } body.theme-clean .btn-primary:hover { background: #111111 !important; } body.theme-clean .btn-secondary { background: #ffffff !important; color: #111111 !important; border: 1px solid #d4d4d4 !important; } body.theme-clean .btn-secondary:hover { background: #f4f4f5 !important; } /* Inputs & selects */ body.theme-clean input, body.theme-clean select, body.theme-clean textarea, body.theme-clean .input, body.theme-clean .filter-select { background: #ffffff !important; border: 1px solid var(--border) !important; color: #111111 !important; border-radius: 10px; box-shadow: none !important; } body.theme-clean input::placeholder, body.theme-clean textarea::placeholder { color: #9ca3af !important; } body.theme-clean input:focus, body.theme-clean select:focus, body.theme-clean textarea:focus, body.theme-clean .input:focus, body.theme-clean .filter-select:focus { outline: none !important; border-color: #000000 !important; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.12) !important; } /* Tables */ body.theme-clean table, body.theme-clean .data-table, body.theme-clean .table { color: #111111 !important; } body.theme-clean table thead th, body.theme-clean .data-table thead th, body.theme-clean .table thead th { background: #f5f5f5 !important; color: #111111 !important; border-color: var(--border) !important; } body.theme-clean table tbody td, body.theme-clean .data-table tbody td, body.theme-clean .table tbody td { border-color: var(--border) !important; color: #111111 !important; } body.theme-clean table tbody tr:hover, body.theme-clean .data-table tbody tr:hover, body.theme-clean .table tbody tr:hover { background: #f9fafb !important; } /* Modals / pop-ups */ body.theme-clean .modal { background-color: rgba(0, 0, 0, 0.40) !important; backdrop-filter: blur(4px) !important; } body.theme-clean .modal-content { background: #ffffff !important; border-radius: 18px !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-lg) !important; } body.theme-clean .modal-header { background: #ffffff !important; border-bottom: 1px solid var(--border) !important; } body.theme-clean .modal-title { color: #000000 !important; } body.theme-clean .modal-body { background: #ffffff !important; color: #111111 !important; } body.theme-clean .modal-actions-footer { background: #ffffff !important; border-top: 1px solid var(--border) !important; } body.theme-clean .modal-actions-footer .btn-secondary { background: #ffffff !important; color: #111111 !important; border-color: rgba(212, 212, 212, 1) !important; } body.theme-clean .modal-actions-footer .btn-secondary:hover { background: #f4f4f5 !important; } /* Bet/Winnings details modals: keep light surfaces */ body.theme-clean .modal .detail-section, body.theme-clean #bet-details-modal .detail-section, body.theme-clean #winning-details-modal .detail-section { background: #ffffff !important; border-left-color: rgba(0, 0, 0, 0.12) !important; } body.theme-clean .modal .detail-section h3, body.theme-clean #bet-details-modal .detail-section h3, body.theme-clean #winning-details-modal .detail-section h3 { color: #111111 !important; border-bottom-color: rgba(0, 0, 0, 0.08) !important; } body.theme-clean .modal-footer { background: #ffffff !important; border-top: 1px solid var(--border) !important; } body.theme-clean .modal-footer .btn-secondary { background: #ffffff !important; color: #111111 !important; border-color: rgba(212, 212, 212, 1) !important; } body.theme-clean .modal-footer .btn-secondary:hover { background: #f4f4f5 !important; } body.theme-clean .modal .detail-item label { color: #6b7280 !important; } body.theme-clean .modal .detail-item span { color: #111111 !important; } body.theme-clean .alert-details-surface { background: var(--alert-detail-surface-bg) !important; color: var(--alert-detail-surface-text) !important; border: 1px solid rgba(0,0,0,0.06); } /* Cards (stats, rules, sync) */ body.theme-clean .stat-card, body.theme-clean .quick-report-card, body.theme-clean .rules-card, body.theme-clean .sync-card { border-radius: 16px; box-shadow: var(--shadow); } /* User preferences theme previews: make \"clean\" version minimal */ body.theme-clean .theme-preview { border-radius: 10px; }