/* ═══ TPO Dashboard v3.0 — Theme System ═══ */ /* Modes: light (default), dark, digital */ /* Uses [data-theme] on to switch */ /* ─── Dark Mode ─── */ [data-theme="dark"] { --bg: #0d1117; --bg2: #161b22; --bg3: #1c2128; --bg4: #262c36; --border: rgba(255,255,255,0.08); --border-hover: rgba(99,102,241,0.35); --text: #e6edf3; --text2: #b1bac4; --text3: #7d8590; --shadow: 0 1px 3px rgba(0,0,0,0.3); --shadow-md: 0 4px 24px rgba(0,0,0,0.4); --shadow-lg: 0 12px 48px rgba(0,0,0,0.5); --shadow-glow: 0 0 40px rgba(99,102,241,0.15); --blue: #6366f1; --blue2: #818cf8; --indigo: #6366f1; --violet: #a78bfa; --cyan: #22d3ee; --green: #34d399; --amber: #fbbf24; --red: #f87171; --orange: #fb923c; --pink: #f472b6; --lime: #a3e635; --accent-gradient: linear-gradient(135deg, #6366f1, #a78bfa, #22d3ee); } /* ─── Digital Mode (Matrix / Tactical) ─── */ [data-theme="digital"] { --bg: #020a02; --bg2: #071207; --bg3: #0d1a0d; --bg4: #142214; --border: rgba(0,255,65,0.12); --border-hover: rgba(0,255,65,0.35); --text: #00ff41; --text2: #00d935; --text3: #00a328; --shadow: 0 1px 3px rgba(0,255,65,0.06); --shadow-md: 0 4px 24px rgba(0,255,65,0.08); --shadow-lg: 0 12px 48px rgba(0,255,65,0.1); --shadow-glow: 0 0 40px rgba(0,255,65,0.12); --blue: #00e5ff; --blue2: #00b8d4; --indigo: #00e5ff; --violet: #00ffcc; --cyan: #00ffff; --green: #00ff41; --amber: #ccff00; --red: #ff003c; --orange: #ff6600; --pink: #ff00ff; --lime: #39ff14; --accent-gradient: linear-gradient(135deg, #00ff41, #00e5ff, #00ffcc); --font-display: 'JetBrains Mono', 'Noto Sans Thai', monospace; } /* ═══ Component overrides for dark backgrounds ═══ */ /* ─ Sidebar ─ */ [data-theme="dark"] .sidebar { background: rgba(22,27,34,0.95); } [data-theme="digital"] .sidebar { background: rgba(7,18,7,0.96); } /* ─ Nav items ─ */ [data-theme="dark"] .nav-item { color: var(--text2); } [data-theme="dark"] .nav-item:hover { background: rgba(99,102,241,0.08); } [data-theme="dark"] .nav-item.active { background: rgba(99,102,241,0.12); } [data-theme="digital"] .nav-item { color: var(--text2); } [data-theme="digital"] .nav-item:hover { background: rgba(0,255,65,0.06); } [data-theme="digital"] .nav-item.active { background: rgba(0,255,65,0.1); color: var(--green); } /* ─ User avatar ─ */ [data-theme="dark"] .user-avatar { background: rgba(99,102,241,0.2); } [data-theme="digital"] .user-avatar { background: rgba(0,255,65,0.15); border-color: var(--green); color: var(--green); } /* ─ Stat cards ─ */ [data-theme="dark"] .stat-card { background: rgba(22,27,34,0.8); border-color: rgba(255,255,255,0.06); } [data-theme="dark"] .stat-card:hover { border-color: rgba(99,102,241,0.3); } [data-theme="digital"] .stat-card { background: rgba(7,18,7,0.85); border-color: rgba(0,255,65,0.1); } [data-theme="digital"] .stat-card:hover { border-color: rgba(0,255,65,0.4); box-shadow: 0 0 20px rgba(0,255,65,0.1); } /* ─ Chart cards ─ */ [data-theme="dark"] .chart-card { background: rgba(22,27,34,0.8); } [data-theme="digital"] .chart-card { background: rgba(7,18,7,0.85); } /* ─ AI Bar ─ */ [data-theme="dark"] .ai-bar { background: rgba(22,27,34,0.7); border-color: rgba(255,255,255,0.06); } [data-theme="digital"] .ai-bar { background: rgba(7,18,7,0.75); border-color: rgba(0,255,65,0.12); } /* ─ Data tables ─ */ [data-theme="dark"] .data-table th { background: rgba(30,36,44,0.9); } [data-theme="dark"] .data-table td { border-bottom-color: rgba(255,255,255,0.06); } [data-theme="dark"] .data-table tbody tr:nth-child(even) td { background: rgba(99,102,241,0.03); } [data-theme="digital"] .data-table th { background: rgba(13,26,13,0.9); color: var(--green); } [data-theme="digital"] .data-table td { border-bottom-color: rgba(0,255,65,0.08); } [data-theme="digital"] .data-table tbody tr:nth-child(even) td { background: rgba(0,255,65,0.02); } /* ─ Search & Forms ─ */ [data-theme="dark"] .search-input-row input:focus, [data-theme="dark"] .gsearch-input:focus { box-shadow: 0 0 0 3px rgba(99,102,241,0.2); } [data-theme="digital"] .search-input-row input:focus, [data-theme="digital"] .gsearch-input:focus { box-shadow: 0 0 0 3px rgba(0,255,65,0.15); border-color: var(--green); } /* ─ Period selector ─ */ [data-theme="dark"] .period-btn.active { background: rgba(99,102,241,0.15); border-color: rgba(99,102,241,0.3); } [data-theme="digital"] .period-btn.active { background: rgba(0,255,65,0.1); border-color: rgba(0,255,65,0.3); color: var(--green); } /* ─ Search tabs ─ */ [data-theme="dark"] .stab.active { background: rgba(99,102,241,0.15); } [data-theme="digital"] .stab.active { background: rgba(0,255,65,0.1); border-color: var(--green); color: var(--green); } /* ─ Badges ─ */ [data-theme="dark"] .bgn-badge { background: rgba(99,102,241,0.15); } [data-theme="digital"] .bgn-badge { background: rgba(0,255,65,0.1); color: var(--green); } /* ─ Stat mini ─ */ [data-theme="dark"] .stat-mini { background: var(--bg2); } [data-theme="digital"] .stat-mini { background: var(--bg2); } /* ─ Login ─ */ [data-theme="dark"] .login-overlay { background: var(--bg); } [data-theme="dark"] .login-card { background: var(--bg2); } [data-theme="digital"] .login-overlay { background: var(--bg); } [data-theme="digital"] .login-card { background: var(--bg2); } [data-theme="digital"] .login-logo h1 { background: var(--accent-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* ─ Toast ─ */ [data-theme="dark"] .toast { background: var(--bg2); color: var(--text); border: 1px solid var(--border); } [data-theme="digital"] .toast { background: var(--bg2); color: var(--green); border: 1px solid rgba(0,255,65,0.2); box-shadow: 0 0 15px rgba(0,255,65,0.1); } /* ─ Modals ─ */ [data-theme="dark"] .gmodal-content { background: var(--bg2); border-color: var(--border); } [data-theme="digital"] .gmodal-content { background: var(--bg2); border: 1px solid rgba(0,255,65,0.15); box-shadow: 0 0 30px rgba(0,255,65,0.08); } /* ═══ Animated Background per theme ═══ */ [data-theme="dark"] .bg-mesh::before { background: radial-gradient(circle, rgba(99,102,241,0.08) 0%, transparent 70%); } [data-theme="dark"] .bg-mesh::after { background: radial-gradient(circle, rgba(34,211,238,0.06) 0%, transparent 70%); } [data-theme="dark"] .grid-pattern { background-image: linear-gradient(rgba(99,102,241,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(99,102,241,0.03) 1px, transparent 1px); } [data-theme="digital"] .bg-mesh::before { background: radial-gradient(circle, rgba(0,255,65,0.06) 0%, transparent 70%); } [data-theme="digital"] .bg-mesh::after { background: radial-gradient(circle, rgba(0,229,255,0.04) 0%, transparent 70%); } [data-theme="digital"] .grid-pattern { background-image: linear-gradient(rgba(0,255,65,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,255,65,0.04) 1px, transparent 1px); } /* ═══ Digital Mode special effects ═══ */ [data-theme="digital"] .stat-value { text-shadow: 0 0 8px rgba(0,255,65,0.4); } [data-theme="digital"] h1, [data-theme="digital"] h2, [data-theme="digital"] h3 { text-shadow: 0 0 4px rgba(0,255,65,0.3); } [data-theme="digital"] .sidebar-brand span { text-shadow: 0 0 10px rgba(0,255,65,0.4); } [data-theme="digital"] .ai-bar-dot { background: #00ff41; box-shadow: 0 0 12px rgba(0,255,65,0.6); } [data-theme="digital"] .ai-bar-chip { background: rgba(0,255,65,0.1); color: #00ff41; } /* ─ Digital glow pulse on stat values ─ */ [data-theme="digital"] .stat-value { animation: digitalGlow 3s ease-in-out infinite; } @keyframes digitalGlow { 0%, 100% { text-shadow: 0 0 8px rgba(0,255,65,0.4); } 50% { text-shadow: 0 0 16px rgba(0,255,65,0.6), 0 0 32px rgba(0,255,65,0.2); } } /* ─ Digital scanline overlay ─ */ [data-theme="digital"] .main-content::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9998; background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(0,255,65,0.015) 2px, rgba(0,255,65,0.015) 4px ); } /* ═══ Scrollbar per theme ═══ */ [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #30363d; border-radius: 6px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #484f58; } [data-theme="digital"] ::-webkit-scrollbar-track { background: var(--bg); } [data-theme="digital"] ::-webkit-scrollbar-thumb { background: rgba(0,255,65,0.2); border-radius: 6px; } [data-theme="digital"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,255,65,0.4); } /* ═══ Theme toggle button styling ═══ */ .theme-toggle .theme-ico { font-size: 16px; line-height: 1; } [data-theme="dark"] .theme-toggle:hover { color: var(--blue); background: rgba(99,102,241,0.1); } [data-theme="digital"] .theme-toggle:hover { color: var(--green); background: rgba(0,255,65,0.08); } /* ═══ Smooth transition ═══ */ html[data-theme] body, html[data-theme] .sidebar, html[data-theme] .stat-card, html[data-theme] .chart-card, html[data-theme] .ai-bar, html[data-theme] .data-table th, html[data-theme] .bgn-card, html[data-theme] .search-bar, html[data-theme] .search-results { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; }