/* ============================================================ GMS GOLD — THEME SYSTEM Dark (default) → Light mode overrides Toggle via data-theme="light" on ============================================================ */ /* ---- Theme Toggle Icon Visibility (CSS-driven, no flash) ---- */ [data-theme="dark"] .theme-icon-sun { display: block !important; } [data-theme="dark"] .theme-icon-moon { display: none !important; } [data-theme="light"] .theme-icon-sun { display: none !important; } [data-theme="light"] .theme-icon-moon { display: block !important; } /* ============================================================ LIGHT THEME OVERRIDES ============================================================ */ /* ---- Page / Container Backgrounds ---- */ [data-theme="light"] [class*="bg-[#080810]"] { background-color: #f8f5ef !important; } [data-theme="light"] [class*="bg-[#0c0c16]"] { background-color: #f2ede4 !important; } [data-theme="light"] [class*="bg-[#0a0a12]"] { background-color: #fdfcf9 !important; } [data-theme="light"] [class*="bg-[#090910]"] { background-color: rgba(253,252,249,0.95) !important; } [data-theme="light"] [class*="bg-[#0c0c14]"] { background-color: #f8f7f3 !important; } /* Cards / Panels — use ~= to avoid matching hover:bg-[#111119] */ [data-theme="light"] [class~="bg-[#111119]"] { background-color: #ffffff !important; } [data-theme="light"] [class~="bg-[#15151f]"] { background-color: #f5f2eb !important; } [data-theme="light"] [class~="bg-[#1a1a24]"], [data-theme="light"] [class~="bg-[#16161f]"], [data-theme="light"] [class~="bg-[#1a1a28]"] { background-color: #f0ede6 !important; } /* Cards with opacity suffix (e.g. bg-[#111119]/80) */ [data-theme="light"] [class*="bg-[#111119]/"] { background-color: #ffffff !important; } /* bg-black variants */ [data-theme="light"] [class*="bg-black/"] { background-color: rgba(180,140,50,0.06) !important; } /* ---- Hover Background Overrides ---- */ [data-theme="light"] [class*="hover:bg-[#111119]"]:hover { background-color: #f5f2eb !important; } [data-theme="light"] [class*="hover:bg-[#15151f]"]:hover { background-color: #f0ede6 !important; } /* ---- Gradient Stops ---- */ [data-theme="light"] [class*="from-[#080810]"] { --tw-gradient-from: #f8f5ef !important; } [data-theme="light"] [class*="to-[#0c0c16]"] { --tw-gradient-to: #f2ede4 !important; } /* ---- Border Colors ---- */ [data-theme="light"] [class*="border-[#1e1a12]"] { border-color: rgba(180,140,50,0.15) !important; } [data-theme="light"] .border-gray-700, [data-theme="light"] .border-gray-800 { border-color: #e8e3d8 !important; } /* ---- Text Color Overrides ---- */ [data-theme="light"] .text-white { color: #1c1917 !important; } [data-theme="light"] .text-gray-100 { color: #1c1917 !important; } [data-theme="light"] .text-gray-200 { color: #292524 !important; } [data-theme="light"] .text-gray-300 { color: #44403c !important; } [data-theme="light"] .text-gray-400 { color: #57534e !important; } [data-theme="light"] .text-gray-500 { color: #78716c !important; } [data-theme="light"] .text-gray-600 { color: #a8a29e !important; } [data-theme="light"] .text-gray-700 { color: #d6d3d1 !important; } /* Amber / Gold — darken for readability on light bg */ [data-theme="light"] .text-amber-400 { color: #d97706 !important; } /* Status text — darken for readability */ [data-theme="light"] .text-red-400 { color: #dc2626 !important; } [data-theme="light"] .text-green-400 { color: #16a34a !important; } [data-theme="light"] .text-emerald-400 { color: #059669 !important; } [data-theme="light"] .text-blue-400 { color: #2563eb !important; } [data-theme="light"] .text-yellow-500 { color: #ca8a04 !important; } /* ---- KEEP WHITE on gradient backgrounds (buttons, avatars, logo icon) ---- */ [data-theme="light"] [class*="from-amber"][class*="to-yellow"].text-white, [data-theme="light"] [class*="from-amber"][class*="to-yellow"] .text-white, [data-theme="light"] [class*="from-amber-500"][class*="to-yellow-600"], [data-theme="light"] [class*="from-amber-400"][class*="to-yellow-600"], [data-theme="light"] [class*="from-amber-500"][class*="bg-gradient-to-r"], [data-theme="light"] [class*="from-amber-600"][class*="bg-gradient-to-r"] { color: #ffffff !important; } /* ---- Hover Text Overrides ---- */ [data-theme="light"] .hover\:text-white:hover { color: #1c1917 !important; } [data-theme="light"] .hover\:text-gray-300:hover { color: #44403c !important; } [data-theme="light"] .hover\:text-red-300:hover { color: #dc2626 !important; } [data-theme="light"] .hover\:text-amber-300:hover { color: #d97706 !important; } /* ---- Placeholder ---- */ [data-theme="light"] input::placeholder, [data-theme="light"] textarea::placeholder { color: #a8a29e !important; } /* ============================================================ CUSTOM COMPONENT OVERRIDES ============================================================ */ /* Card */ [data-theme="light"] .card-g { background: #ffffff !important; border-color: rgba(180,140,50,0.12) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(180,140,50,0.06) !important; } [data-theme="light"] .card-g:hover { border-color: rgba(180,140,50,0.25) !important; } /* Button (gold outline) */ [data-theme="light"] .btn-gold { background: linear-gradient(135deg, #ffffff 0%, #faf8f3 100%) !important; border-color: rgba(180,140,50,0.18) !important; } [data-theme="light"] .btn-gold:hover { border-color: rgba(180,140,50,0.35) !important; background: linear-gradient(135deg, #faf8f3 0%, #f5f0e6 100%) !important; } /* Input */ [data-theme="light"] .input-g { background: #faf9f6 !important; border-color: rgba(180,140,50,0.15) !important; color: #1c1917 !important; } [data-theme="light"] .input-g:focus { border-color: rgba(180,140,50,0.4) !important; box-shadow: 0 0 0 3px rgba(180,140,50,0.08) !important; } /* Gold Glow */ [data-theme="light"] .gold-glow { box-shadow: 0 1px 4px rgba(0,0,0,0.04), 0 0 8px rgba(180,140,50,0.04) !important; } [data-theme="light"] .gold-glow-hover:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 0 12px rgba(180,140,50,0.06) !important; } /* Gold Shimmer */ [data-theme="light"] .gold-shimmer { background: linear-gradient(135deg, rgba(180,140,50,0.02) 0%, transparent 50%, rgba(180,140,50,0.015) 100%) !important; } /* ---- Price Cards (WOW) Light Mode ---- */ [data-theme="light"] .price-card-999 { background: linear-gradient(135deg, rgba(245,158,11,0.08) 0%, rgba(201,165,78,0.04) 100%) !important; border-color: rgba(245,158,11,0.25) !important; } [data-theme="light"] .price-card-999:hover { border-color: rgba(245,158,11,0.45) !important; box-shadow: 0 0 20px rgba(245,158,11,0.1) !important; } [data-theme="light"] .price-card-916 { background: linear-gradient(135deg, rgba(120,113,108,0.1) 0%, rgba(168,162,158,0.06) 100%) !important; border-color: rgba(120,113,108,0.25) !important; } [data-theme="light"] .price-card-916:hover { border-color: rgba(120,113,108,0.4) !important; box-shadow: 0 0 20px rgba(120,113,108,0.1) !important; } /* Fix opacity-variant gray text inside 916 card (e.g. text-gray-300/90) */ [data-theme="light"] .price-card-916 [class*="text-gray-200"] { color: #292524 !important; } [data-theme="light"] .price-card-916 [class*="text-gray-300"] { color: #44403c !important; } [data-theme="light"] .price-card-916 [class*="text-gray-400"] { color: #57534e !important; } [data-theme="light"] .price-card-916 [class*="text-gray-500"] { color: #78716c !important; } [data-theme="light"] .price-card-916 [class*="text-gray-600"] { color: #a8a29e !important; } /* Shimmer bar light mode */ [data-theme="light"] .shimmer-bar { background: linear-gradient(90deg, transparent 0%, rgba(180,140,50,0.06) 50%, transparent 100%) !important; background-size: 200% 100% !important; } /* Spread pill light mode */ [data-theme="light"] .spread-pill { background-color: rgba(255,255,255,0.5) !important; } /* Ticker bar light mode edge fades */ [data-theme="light"] .ticker-track [class*="text-gray-800"] { color: #d6d3d1 !important; } /* Gold Border Accents */ [data-theme="light"] .gold-border-top { border-top-color: rgba(180,140,50,0.3) !important; } [data-theme="light"] .gold-border-left { border-left-color: rgba(180,140,50,0.3) !important; } /* Table hover */ [data-theme="light"] .table-g tr:hover { background: rgba(180,140,50,0.04) !important; } /* Scrollbars */ [data-theme="light"] .sb-gold::-webkit-scrollbar-thumb, [data-theme="light"] .sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(180,140,50,0.2) !important; } /* Shadows */ [data-theme="light"] [class*="shadow-black"] { --tw-shadow-color: rgba(0,0,0,0.04) !important; } [data-theme="light"] [class*="shadow-amber-900"] { --tw-shadow-color: rgba(180,140,50,0.06) !important; } [data-theme="light"] .shadow-2xl { box-shadow: 0 8px 30px rgba(0,0,0,0.07), 0 0 0 1px rgba(180,140,50,0.06) !important; } [data-theme="light"] .shadow-xl { box-shadow: 0 4px 16px rgba(0,0,0,0.05), 0 0 0 1px rgba(180,140,50,0.04) !important; } /* Profile dropdown menu in light mode */ [data-theme="light"] #profileMenu, [data-theme="light"] #profileMenuAdmin { background-color: #ffffff !important; border-color: rgba(180,140,50,0.15) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important; } /* ---- Transaction Tracking Sidebar (Light) ---- */ [data-theme="light"] #trackingSidebar { background-color: #f5f2eb !important; border-left-color: rgba(180,140,50,0.12) !important; } [data-theme="light"] #trackingSidebar .bg-black\/20, [data-theme="light"] #trackingSidebar [class*="bg-black/"] { background-color: rgba(180,140,50,0.06) !important; } [data-theme="light"] #trackingSidebar [class*="bg-[#111119]"] { background-color: #ffffff !important; } [data-theme="light"] #trackingSidebar [class*="border-[#1e1a12]"] { border-color: rgba(180,140,50,0.12) !important; } /* ---- Login Page Light Adjustments ---- */ [data-theme="light"] .shadow-inner { box-shadow: inset 0 1px 2px rgba(0,0,0,0.04) !important; } /* ---- Bottom Decorative Gradient ---- */ [data-theme="light"] .fixed.bottom-0.pointer-events-none { background: linear-gradient(180deg, transparent 0%, rgba(180,140,50,0.02) 40%, rgba(180,140,50,0.06) 80%, rgba(180,140,50,0.1) 100%) !important; } /* ---- Sidebar Logo Container ---- */ [data-theme="light"] .sidebar-logo { background-color: #1a1a24 !important; border-color: rgba(180,140,50,0.2) !important; } /* ---- Sidebar border-right ---- */ [data-theme="light"] aside#sidebar { border-right-color: rgba(180,140,50,0.12) !important; box-shadow: 2px 0 8px rgba(0,0,0,0.03) !important; } /* ---- Mobile sidebar toggle button ---- */ [data-theme="light"] #sidebarToggle { background-color: #ffffff !important; border-color: rgba(180,140,50,0.15) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important; } /* ---- Sidebar active nav item ---- */ [data-theme="light"] [class*="bg-amber-500/10"][class*="border-amber-500"] { background-color: rgba(217,119,6,0.08) !important; } /* ---- Sidebar hover states ---- */ [data-theme="light"] [class*="hover:bg-red-500"]:hover { background-color: rgba(239,68,68,0.06) !important; } [data-theme="light"] [class*="hover:bg-amber-500"]:hover { background-color: rgba(217,119,6,0.06) !important; } /* ---- Login page logo container ---- */ [data-theme="light"] .login-logo-box { background-color: #1a1a24 !important; } /* ---- Login page background logo ---- */ [data-theme="light"] .login-bg-logo img { opacity: 0.04 !important; filter: brightness(0.8) contrast(1.1) !important; } /* ---- Transition (subtle, performance-safe) ---- */ html[data-theme] .card-g, html[data-theme] .btn-gold, html[data-theme] .input-g, html[data-theme] aside { transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }