/* ──────────────────────────────────────────────── 9SPEEDWAY THEME — DARK GOLD / LIGHT สลับด้วย (ตั้งค่าโดย theme-toggle.js) ทุกกฎด้านล่างมีผลเฉพาะตอน data-theme="dark" เท่านั้น ตอน data-theme="light" จะไม่มีกฎใดทำงาน → กลับไปเป็นดีไซน์พาสเทลดั้งเดิมของเว็บ (ขาว/ชมพู-ม่วง) ──────────────────────────────────────────────── */ :root { --primary: #d4af37; --primary-rgb: 212, 175, 55; --bg-dark: #0f1014; --bg-card: rgba(255, 255, 255, 0.05); --bg-card-hover: rgba(212, 175, 55, 0.08); --border: rgba(212, 175, 55, 0.2); --text-main: #ffffff; --text-muted: #a0a0a0; --radius: 12px; } /* ── Base ── */ html[data-theme="dark"], html[data-theme="dark"] body { background-color: var(--bg-dark) !important; color: var(--text-main) !important; } /* Remove pink/purple blobs */ html[data-theme="dark"] .fixed.rounded-full.bg-pink-300\/20, html[data-theme="dark"] .fixed.rounded-full.bg-purple-300\/20, html[data-theme="dark"] .bg-pink-300\/20, html[data-theme="dark"] .bg-purple-300\/20 { display: none !important; } /* ── Navbar ── */ html[data-theme="dark"] nav, html[data-theme="dark"] .navbar, html[data-theme="dark"] #navbar { background: rgba(15, 16, 20, 0.95) !important; backdrop-filter: blur(10px) !important; border-bottom: 1px solid var(--border) !important; box-shadow: none !important; } /* ── Body background override ── */ html[data-theme="dark"] body, html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-gray-50, html[data-theme="dark"] .bg-gray-100 { background-color: var(--bg-dark) !important; } /* ── Cards ── */ html[data-theme="dark"] .card, html[data-theme="dark"] .bg-white.rounded, html[data-theme="dark"] .bg-white.rounded-xl, html[data-theme="dark"] .bg-white.rounded-2xl, html[data-theme="dark"] .bg-white\/80, html[data-theme="dark"] .bg-white\/90, html[data-theme="dark"] [class*="bg-white"] { background: var(--bg-card) !important; backdrop-filter: blur(8px) !important; border: 1px solid var(--border) !important; color: var(--text-main) !important; } html[data-theme="dark"] .card:hover { background: var(--bg-card-hover) !important; border-color: var(--primary) !important; box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.15) !important; } /* ── Gold text accents ── */ html[data-theme="dark"] .text-magic-main, html[data-theme="dark"] .text-primary, html[data-theme="dark"] .text-blue-600, html[data-theme="dark"] .text-sky-500, html[data-theme="dark"] .text-indigo-600, html[data-theme="dark"] .from-magic-main { color: var(--primary) !important; } /* Gradient text → gold */ html[data-theme="dark"] .bg-gradient-to-r.from-magic-main.to-magic-sub, html[data-theme="dark"] .bg-clip-text.text-transparent { background: linear-gradient(135deg, #d4af37, #f5e19a) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } /* ── Buttons ── */ html[data-theme="dark"] .btn-primary, html[data-theme="dark"] button[class*="bg-magic-main"], html[data-theme="dark"] a[class*="bg-magic-main"], html[data-theme="dark"] .bg-magic-main, html[data-theme="dark"] button.bg-blue-500, html[data-theme="dark"] button.bg-sky-500, html[data-theme="dark"] button.bg-indigo-500, html[data-theme="dark"] .bg-gradient-to-r.from-magic-main { background: linear-gradient(135deg, #d4af37, #b8960c) !important; color: #0f1014 !important; border: none !important; font-weight: 600 !important; transition: all 0.3s ease !important; } html[data-theme="dark"] button[class*="bg-magic-main"]:hover, html[data-theme="dark"] .bg-magic-main:hover { background: linear-gradient(135deg, #e8c547, #d4af37) !important; box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.4) !important; transform: translateY(-1px) !important; } /* ── Inputs & Forms ── */ html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: rgba(255, 255, 255, 0.06) !important; border: 1px solid var(--border) !important; color: var(--text-main) !important; border-radius: var(--radius) !important; } html[data-theme="dark"] input:focus, html[data-theme="dark"] select:focus, html[data-theme="dark"] textarea:focus { border-color: var(--primary) !important; outline: none !important; box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.2) !important; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--text-muted) !important; } /* การ์ด auth (login/register/forgot_password) เป็นพื้นสว่างโดยตั้งใจทั้งสองธีม — selector เจาะจงกว่า (.auth-input-group input) จึงชนะกฎ input ด้านบนแม้ทั้งคู่มี !important ไม่งั้นตัวอักษรขาวจากธีมมืดจะจมไปกับพื้นขาวของการ์ด มองไม่เห็นข้อความที่พิมพ์ */ html[data-theme="dark"] .auth-input-group input { background: #f8fafc !important; color: #1e293b !important; border: 2px solid #e2e8f0 !important; } html[data-theme="dark"] .auth-input-group input:focus { background: #fff !important; } html[data-theme="dark"] .auth-input-group input::placeholder { color: #94a3b8 !important; } /* ── Modal / Overlay ── */ html[data-theme="dark"] .modal-content, html[data-theme="dark"] .modal-body, html[data-theme="dark"] [class*="modal-"] { background: #1a1c22 !important; border: 1px solid var(--border) !important; color: var(--text-main) !important; } html[data-theme="dark"] .modal-header { border-bottom: 1px solid var(--border) !important; } html[data-theme="dark"] .modal-footer { border-top: 1px solid var(--border) !important; } /* ── Tables ── */ html[data-theme="dark"] .dataTable, html[data-theme="dark"] table { background: transparent !important; color: var(--text-main) !important; } html[data-theme="dark"] table thead th { background: rgba(var(--primary-rgb), 0.1) !important; color: var(--primary) !important; border-bottom: 1px solid var(--border) !important; } html[data-theme="dark"] table tbody tr:hover { background: var(--bg-card-hover) !important; } html[data-theme="dark"] table td, html[data-theme="dark"] table th { border-color: var(--border) !important; color: var(--text-main) !important; } /* ── Sidebar / Backend panels ── */ html[data-theme="dark"] .sidebar, html[data-theme="dark"] #sidebar { background: rgba(15, 16, 20, 0.98) !important; border-right: 1px solid var(--border) !important; } /* ── Badges & Tags ── */ html[data-theme="dark"] .badge, html[data-theme="dark"] .tag { background: rgba(var(--primary-rgb), 0.15) !important; color: var(--primary) !important; border: 1px solid var(--border) !important; } /* ── Dropdown menus ── */ html[data-theme="dark"] .dropdown-menu { background: #1a1c22 !important; border: 1px solid var(--border) !important; } html[data-theme="dark"] .dropdown-item { color: var(--text-main) !important; } html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:focus { background: var(--bg-card-hover) !important; color: var(--primary) !important; } /* ── Scrollbar ── */ html[data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg-dark); border-radius: 10px; } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(var(--primary-rgb), 0.4); border-radius: 10px; } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--primary); } /* ── Gold dividers ── */ html[data-theme="dark"] hr { border-color: var(--border) !important; } /* ── Particles canvas — hide hearts, keep dark bg ── */ html[data-theme="dark"] #particles-js canvas { display: none !important; } html[data-theme="dark"] #particles-js { background: transparent !important; } /* ── Muted / secondary text ── */ html[data-theme="dark"] .text-gray-500, html[data-theme="dark"] .text-gray-400, html[data-theme="dark"] .text-gray-600, html[data-theme="dark"] .text-slate-500 { color: var(--text-muted) !important; } /* ── Active navbar item gold underline ── */ html[data-theme="dark"] .nav-link.active, html[data-theme="dark"] .navbar-nav .nav-link.active { color: var(--primary) !important; border-bottom: 2px solid var(--primary) !important; } /* ── Gold glow on product cards ── */ html[data-theme="dark"] .product-card:hover, html[data-theme="dark"] .box-card:hover { transform: translateY(-4px); box-shadow: 0 8px 30px rgba(var(--primary-rgb), 0.2) !important; } /* ── Balance / Points display ── */ html[data-theme="dark"] .balance-display, html[data-theme="dark"] .point-badge { background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.15), rgba(var(--primary-rgb), 0.05)) !important; border: 1px solid var(--border) !important; color: var(--primary) !important; font-weight: 600; } /* ── Alert overrides ── */ html[data-theme="dark"] .alert-success { background: rgba(16, 185, 129, 0.1) !important; border-color: rgba(16, 185, 129, 0.3) !important; color: #34d399 !important; } html[data-theme="dark"] .alert-danger { background: rgba(239, 68, 68, 0.1) !important; border-color: rgba(239, 68, 68, 0.3) !important; color: #f87171 !important; } html[data-theme="dark"] .alert-warning { background: rgba(var(--primary-rgb), 0.1) !important; border-color: var(--border) !important; color: var(--primary) !important; } html[data-theme="dark"] .alert-info { background: rgba(99, 102, 241, 0.1) !important; border-color: rgba(99, 102, 241, 0.3) !important; color: #818cf8 !important; } /* ── Toast notifications ── */ html[data-theme="dark"] .toast { background: #1a1c22 !important; border: 1px solid var(--border) !important; color: var(--text-main) !important; } /* ── Page header ── */ html[data-theme="dark"] .page-header { border-bottom: 1px solid var(--border); } html[data-theme="dark"] .page-header h1, html[data-theme="dark"] .page-header h2 { color: var(--primary); } /* ── Theme toggle button ── */ .theme-toggle-btn { width: 40px; height: 40px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.04); color: #475569; cursor: pointer; transition: all 0.25s ease; font-size: 1rem; } .theme-toggle-btn:hover { transform: translateY(-1px); background: rgba(0, 0, 0, 0.08); } html[data-theme="dark"] .theme-toggle-btn { border-color: var(--border) !important; background: rgba(255, 255, 255, 0.06) !important; color: var(--primary) !important; } html[data-theme="dark"] .theme-toggle-btn:hover { background: rgba(212, 175, 55, 0.15) !important; }