/* ═══════════════════════════════════════════════════════════════ VENDORVERSE — MULTI-THEME SYSTEM Themes: dark (default) | light | brown Applied via: ═══════════════════════════════════════════════════════════════ */ /* ── DARK THEME (default / :root) ─────────────────────────────── */ :root, [data-theme="dark"] { --t-bg: #0B0B0B; --t-surface: #121212; --t-card: #1E1E1E; --t-card-hover: #242424; --t-border: #2A2A2A; --t-border-2: #374151; --t-text: #FFFFFF; --t-text-2: #E5E7EB; --t-text-muted: #9CA3AF; --t-accent: #FF2E2E; --t-accent-2: #C81E1E; --t-accent-glow: rgba(255,46,46,0.35); --t-accent-soft: rgba(255,46,46,0.12); --t-orange: #FF6A00; --t-green: #34D399; --t-green-bg: rgba(52,211,153,0.12); --t-yellow: #FBBF24; --t-yellow-bg: rgba(251,191,36,0.12); --t-red: #F87171; --t-red-bg: rgba(248,113,113,0.12); --t-cyan: #22D3EE; --t-blue: #3B82F6; --t-topbar-bg: rgba(18,18,18,0.85); --t-sidebar-bg: #121212; --t-shadow: 0 10px 30px rgba(0,0,0,0.5); --t-shadow-sm: 0 4px 20px rgba(0,0,0,0.3); --t-input-bg: #1E1E1E; --t-transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } /* ── LIGHT THEME ───────────────────────────────────────────────── */ [data-theme="light"] { --t-bg: #F9FAFB; --t-surface: #F3F4F6; --t-card: #FFFFFF; --t-card-hover: #F9FAFB; --t-border: #E5E7EB; --t-border-2: #D1D5DB; --t-text: #111827; --t-text-2: #374151; --t-text-muted: #6B7280; --t-accent: #7C3AED; --t-accent-2: #6D28D9; --t-accent-glow: rgba(124,58,237,0.15); --t-accent-soft: rgba(124,58,237,0.08); --t-orange: #F59E0B; --t-green: #10B981; --t-green-bg: rgba(16,185,129,0.10); --t-yellow: #F59E0B; --t-yellow-bg: rgba(245,158,11,0.10); --t-red: #EF4444; --t-red-bg: rgba(239,68,68,0.10); --t-cyan: #3B82F6; --t-blue: #3B82F6; --t-topbar-bg: rgba(255,255,255,0.92); --t-sidebar-bg: #FFFFFF; --t-shadow: 0 4px 20px rgba(0,0,0,0.06); --t-shadow-sm: 0 2px 8px rgba(0,0,0,0.04); --t-input-bg: #F9FAFB; --t-transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } /* ── BROWN THEME ───────────────────────────────────────────────── */ [data-theme="coffee"] { --t-bg: #1A120B; --t-surface: #2C1F14; --t-card: #3B2A1E; --t-card-hover: #4A3626; --t-border: #5A3E2B; --t-border-2: #7A5C42; --t-text: #F5F5F5; --t-text-2: #D6C6B8; --t-text-muted: #A08B78; --t-accent: #D4AF37; --t-accent-2: #C89B3C; --t-accent-glow: rgba(212,175,55,0.30); --t-accent-soft: rgba(212,175,55,0.12); --t-orange: #E07B39; --t-green: #6DB87A; --t-green-bg: rgba(109,184,122,0.12); --t-yellow: #D4AF37; --t-yellow-bg: rgba(212,175,55,0.12); --t-red: #E07070; --t-red-bg: rgba(224,112,112,0.12); --t-cyan: #7EC8C8; --t-blue: #7EB8D4; --t-topbar-bg: rgba(44,31,20,0.92); --t-sidebar-bg: #2C1F14; --t-shadow: 0 10px 30px rgba(0,0,0,0.5); --t-shadow-sm: 0 4px 20px rgba(0,0,0,0.3); --t-input-bg: #3B2A1E; --t-transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } /* ═══════════════════════════════════════════════════════════════ MAP t-vars → existing premium-dashboard vars (keeps all existing CSS working without touching it) ═══════════════════════════════════════════════════════════════ */ :root, [data-theme="dark"], [data-theme="light"], [data-theme="coffee"] { --bg-base: var(--t-bg); --bg-surface: var(--t-surface); --bg-elevated: var(--t-card); --bg-hover: var(--t-card-hover); --border-subtle: var(--t-border); --border-hover: var(--t-border-2); --border-purple: var(--t-accent-glow); --border-red: var(--t-accent-glow); --text-primary: var(--t-text); --text-secondary: var(--t-text-2); --text-muted: var(--t-text-muted); --red-primary: var(--t-accent); --red-dark: var(--t-accent-2); --red-btn: var(--t-accent); --red-hover: var(--t-accent-2); --red-glow: var(--t-accent-glow); --orange-accent: var(--t-orange); --purple-500: var(--t-accent); --purple-600: var(--t-accent-2); --purple-400: var(--t-accent); --purple-glow: var(--t-accent-glow); --green-400: var(--t-green); --green-bg: var(--t-green-bg); --yellow-400: var(--t-yellow); --yellow-bg: var(--t-yellow-bg); --red-400: var(--t-red); --red-bg: var(--t-red-bg); --cyan-400: var(--t-cyan); --blue-500: var(--t-blue); --shadow-card: var(--t-shadow); } /* ═══════════════════════════════════════════════════════════════ GLOBAL THEME TRANSITIONS ═══════════════════════════════════════════════════════════════ */ html { transition: var(--t-transition); } body, .sidebar, .topbar, .card, .kpi-card, .nav-item, .form-control, .btn-primary, .btn-secondary, .glass-card, .ri-card, .modal-content { transition: var(--t-transition); } /* ═══════════════════════════════════════════════════════════════ LIGHT THEME OVERRIDES ═══════════════════════════════════════════════════════════════ */ [data-theme="light"] body { background: var(--t-bg) !important; color: var(--t-text) !important; } [data-theme="light"] .sidebar { background: var(--t-sidebar-bg); border-right-color: var(--t-border); box-shadow: 2px 0 12px rgba(0,0,0,0.06); } [data-theme="light"] .sidebar-logo-text span { color: var(--t-accent); } [data-theme="light"] .nav-item { color: var(--t-text-muted); } [data-theme="light"] .nav-item:hover { background: var(--t-accent-soft); color: var(--t-accent); } [data-theme="light"] .nav-item.active { background: var(--t-accent-soft); color: var(--t-accent); } [data-theme="light"] .nav-item.active::before { background: var(--t-accent); box-shadow: none; } [data-theme="light"] .nav-section-label { color: var(--t-text-muted); } [data-theme="light"] .sidebar-user-name { color: var(--t-text); } [data-theme="light"] .sidebar-user-role { color: var(--t-text-muted); } [data-theme="light"] .sidebar-footer { border-top-color: var(--t-border); } [data-theme="light"] .topbar { background: var(--t-topbar-bg); border-bottom-color: var(--t-border); box-shadow: var(--t-shadow-sm); backdrop-filter: blur(12px); } [data-theme="light"] .topbar-search { background: var(--t-surface); border-color: var(--t-border); } [data-theme="light"] .topbar-search:focus-within { border-color: var(--t-accent); box-shadow: 0 0 0 3px var(--t-accent-soft); } [data-theme="light"] .topbar-search input { color: var(--t-text); } [data-theme="light"] .topbar-search-icon { color: var(--t-text-muted); } [data-theme="light"] .topbar-icon-btn { background: var(--t-surface); border-color: var(--t-border); color: var(--t-text-muted); } [data-theme="light"] .topbar-icon-btn:hover { background: var(--t-card); color: var(--t-accent); border-color: var(--t-accent); box-shadow: none; } [data-theme="light"] .notif-dot { background: var(--t-accent); box-shadow: none; } [data-theme="light"] .card { background: var(--t-card); border-color: var(--t-border); box-shadow: var(--t-shadow); } [data-theme="light"] .card:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.10); border-color: var(--t-border-2); } [data-theme="light"] .card-header { background: var(--t-card); border-bottom-color: var(--t-border); } [data-theme="light"] .card-title { color: var(--t-text); } [data-theme="light"] .kpi-card { background: var(--t-card); border-color: var(--t-border); box-shadow: var(--t-shadow); } [data-theme="light"] .kpi-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.10); transform: translateY(-2px); border-color: var(--t-border-2); } [data-theme="light"] .kpi-label { color: var(--t-text-muted); } [data-theme="light"] .kpi-value { color: var(--t-text); } [data-theme="light"] .kpi-trend-label { color: var(--t-text-muted); } [data-theme="light"] thead th { background: var(--t-surface); color: var(--t-text-muted); border-bottom-color: var(--t-border); } [data-theme="light"] tbody td { color: var(--t-text-2); border-bottom-color: var(--t-border); } [data-theme="light"] tr:hover td { background: var(--t-accent-soft); color: var(--t-text); } [data-theme="light"] .form-control { background: var(--t-input-bg); border-color: var(--t-border); color: var(--t-text); } [data-theme="light"] .form-control:focus { border-color: var(--t-accent); box-shadow: 0 0 0 3px var(--t-accent-soft); } [data-theme="light"] .form-control::placeholder { color: var(--t-text-muted); } [data-theme="light"] .form-group label { color: var(--t-text-2); } [data-theme="light"] select, [data-theme="light"] option { background: var(--t-card) !important; color: var(--t-text) !important; } [data-theme="light"] .btn-primary { background: linear-gradient(135deg, var(--t-accent), var(--t-accent-2)); box-shadow: 0 4px 12px var(--t-accent-glow); } [data-theme="light"] .btn-primary:hover { box-shadow: 0 8px 20px var(--t-accent-glow); } [data-theme="light"] .btn-secondary { background: var(--t-surface); border-color: var(--t-border); color: var(--t-text); } [data-theme="light"] .btn-secondary:hover { background: var(--t-card); border-color: var(--t-accent); } [data-theme="light"] .btn-add-product { background: linear-gradient(135deg, var(--t-accent), var(--t-accent-2)); box-shadow: 0 4px 12px var(--t-accent-glow); } [data-theme="light"] .glass-card { background: rgba(255,255,255,0.7); border-color: var(--t-border); box-shadow: var(--t-shadow); backdrop-filter: blur(8px); } [data-theme="light"] .page-title { color: var(--t-text); } [data-theme="light"] .page-subtitle { color: var(--t-text-muted); } [data-theme="light"] .date-badge { background: var(--t-card); border-color: var(--t-border); color: var(--t-text-2); } [data-theme="light"] .section-title { color: var(--t-text); } [data-theme="light"] .section-link { color: var(--t-accent); } [data-theme="light"] .orders-tab.active, [data-theme="light"] .period-pill.active { background: var(--t-accent-soft); border-color: var(--t-accent); color: var(--t-accent); } [data-theme="light"] .order-id { color: var(--t-accent); } [data-theme="light"] .activity-msg strong { color: var(--t-accent); } [data-theme="light"] .ri-card { background: var(--t-card); border-color: var(--t-border); box-shadow: var(--t-shadow); } [data-theme="light"] .ri-filter-btn { background: var(--t-surface); border-color: var(--t-border); color: var(--t-text-2); } [data-theme="light"] .ri-filter-btn.active { background: var(--t-accent-soft); border-color: var(--t-accent); color: var(--t-accent); } [data-theme="light"] .ri-modal-box { background: var(--t-card); border-color: var(--t-border); } [data-theme="light"] .modal-content { background: var(--t-card); border-color: var(--t-border); color: var(--t-text); } [data-theme="light"] .perf-stat { background: var(--t-surface); } [data-theme="light"] .metric-bar-wrap { background: var(--t-surface); } [data-theme="light"] ::-webkit-scrollbar-track { background: var(--t-surface); } [data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--t-border-2); } /* ═══════════════════════════════════════════════════════════════ BROWN THEME OVERRIDES ═══════════════════════════════════════════════════════════════ */ [data-theme="coffee"] body { background: var(--t-bg) !important; color: var(--t-text) !important; } [data-theme="coffee"] .sidebar { background: var(--t-sidebar-bg); border-right-color: var(--t-border); box-shadow: 4px 0 20px rgba(0,0,0,0.4); } [data-theme="coffee"] .sidebar-logo-icon { background: linear-gradient(135deg, var(--t-accent), var(--t-accent-2)); box-shadow: 0 0 18px var(--t-accent-glow); } [data-theme="coffee"] .sidebar-logo-text span { color: var(--t-accent); } [data-theme="coffee"] .nav-item { color: var(--t-text-muted); } [data-theme="coffee"] .nav-item:hover { background: var(--t-accent-soft); color: var(--t-text); } [data-theme="coffee"] .nav-item.active { background: var(--t-accent-soft); color: var(--t-accent); } [data-theme="coffee"] .nav-item.active::before { background: var(--t-accent); box-shadow: 0 0 12px var(--t-accent-glow); } [data-theme="coffee"] .nav-badge { background: var(--t-accent); color: #1A120B; box-shadow: 0 0 8px var(--t-accent-glow); } [data-theme="coffee"] .topbar { background: var(--t-topbar-bg); border-bottom-color: var(--t-border); backdrop-filter: blur(20px); } [data-theme="coffee"] .topbar-search { background: var(--t-card); border-color: var(--t-border); } [data-theme="coffee"] .topbar-search:focus-within { border-color: var(--t-accent); box-shadow: 0 0 0 3px var(--t-accent-soft); } [data-theme="coffee"] .topbar-icon-btn { background: var(--t-card); border-color: var(--t-border); } [data-theme="coffee"] .topbar-icon-btn:hover { border-color: var(--t-accent); box-shadow: 0 0 10px var(--t-accent-glow); } [data-theme="coffee"] .notif-dot { background: var(--t-accent); box-shadow: 0 0 6px var(--t-accent-glow); } [data-theme="coffee"] .card { background: var(--t-card); border-color: var(--t-border); box-shadow: var(--t-shadow); } [data-theme="coffee"] .card:hover { border-color: var(--t-accent); box-shadow: 0 12px 32px rgba(0,0,0,0.5); } [data-theme="coffee"] .card-header { background: rgba(44,31,20,0.5); border-bottom-color: var(--t-border); } [data-theme="coffee"] .btn-primary { background: linear-gradient(135deg, var(--t-accent), var(--t-accent-2)); color: #1A120B; box-shadow: 0 4px 14px var(--t-accent-glow); } [data-theme="coffee"] .btn-primary:hover { box-shadow: 0 8px 24px var(--t-accent-glow); } [data-theme="coffee"] .btn-add-product { background: linear-gradient(135deg, var(--t-accent), var(--t-accent-2)); color: #1A120B; box-shadow: 0 4px 14px var(--t-accent-glow); } [data-theme="coffee"] .form-control { background: var(--t-input-bg); border-color: var(--t-border); color: var(--t-text); } [data-theme="coffee"] .form-control:focus { border-color: var(--t-accent); box-shadow: 0 0 0 3px var(--t-accent-soft); } [data-theme="coffee"] select, [data-theme="coffee"] option { background: var(--t-card) !important; color: var(--t-text) !important; } [data-theme="coffee"] .orders-tab.active, [data-theme="coffee"] .period-pill.active { background: var(--t-accent-soft); border-color: var(--t-accent); color: var(--t-accent); } [data-theme="coffee"] .order-id { color: var(--t-accent); } [data-theme="coffee"] .activity-msg strong { color: var(--t-accent); } [data-theme="coffee"] .glow-text { background: linear-gradient(90deg, var(--t-accent), var(--t-orange), var(--t-accent)); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } [data-theme="coffee"] .glass-card { background: rgba(59,42,30,0.65); border-color: var(--t-border); backdrop-filter: blur(10px); } [data-theme="coffee"] .perf-stat { background: var(--t-surface); } /* ═══════════════════════════════════════════════════════════════ GLOBAL THEME SWITCHER (Pill Style) ═══════════════════════════════════════════════════════════════ */ .theme-switcher { display: inline-flex; align-items: center; background: var(--t-surface); border: 1px solid var(--t-border); border-radius: 50px; padding: 4px; gap: 4px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); } .theme-switcher .theme-btn { width: 14px !important; height: 14px !important; border-radius: 50% !important; border: 2px solid transparent !important; cursor: pointer; transition: all 0.2s ease !important; padding: 0; display: block; background: transparent; } .theme-switcher .theme-btn[data-theme="dark"] { background: #0B0B0B !important; } .theme-switcher .theme-btn[data-theme="light"] { background: #F3F4F6 !important; border: 1px solid #D1D5DB !important; } .theme-switcher .theme-btn[data-theme="coffee"] { background: #4A3728 !important; } .theme-switcher .theme-btn:hover { transform: scale(1.1) !important; } .theme-switcher .theme-btn.active { border-color: #fff !important; transform: scale(1.1) !important; box-shadow: none !important; }