/* ═══════════════════════════════════════════════════════ Zyra OS — Light Mode Overrides Applied when is set by theme.js ═══════════════════════════════════════════════════════ */ /* ── Base ───────────────────────────────────────────── */ html.light, html.light body { background: #f1f5f9 !important; color: #1e293b !important; color-scheme: light; } html.light body::before { background: radial-gradient(at 0% 0%, #bfdbfe, transparent 60%), radial-gradient(at 100% 100%, #bbf7d0, transparent 60%) !important; background-color: #f1f5f9 !important; } /* ── Aurora backgrounds ─────────────────────────────── */ html.light .aurora-bg { background: radial-gradient(at 0% 0%, #bfdbfe, transparent 70%), radial-gradient(at 100% 100%, #bbf7d0, transparent 70%) !important; background-color: #f1f5f9 !important; } /* ── Glass surfaces ─────────────────────────────────── */ html.light .glass-panel { background: rgba(255,255,255,0.88) !important; border-color: rgba(0,0,0,0.1) !important; box-shadow: 0 4px 24px rgba(0,0,0,0.08) !important; } html.light .glass-card, html.light .glass { background: rgba(0,0,0,0.04) !important; border-color: rgba(0,0,0,0.08) !important; } /* ── ERP Sidebar ────────────────────────────────────── */ html.light .sidebar { background: rgba(255,255,255,0.95) !important; border-right-color: rgba(0,0,0,0.1) !important; } html.light .nav-item { color: #475569 !important; } html.light .nav-item:hover { background: rgba(0,0,0,0.05) !important; color: #1e293b !important; } html.light .nav-item.active { background: rgba(16,185,129,0.12) !important; color: #059669 !important; } html.light .nav-section { color: #94a3b8 !important; } html.light .main-content { background: #f1f5f9 !important; } /* ── Control inputs ─────────────────────────────────── */ html.light .control-input, html.light .form-input, html.light .input-field { background: rgba(0,0,0,0.06) !important; border-color: rgba(0,0,0,0.15) !important; color: #1e293b !important; } html.light .control-input:focus, html.light .form-input:focus, html.light .input-field:focus { border-color: #10b981 !important; } html.light input:not([type=color]):not([type=range]), html.light textarea, html.light select { background: rgba(0,0,0,0.06) !important; border-color: rgba(0,0,0,0.15) !important; color: #1e293b !important; } html.light input::placeholder, html.light textarea::placeholder { color: #94a3b8 !important; } /* ── Modals ─────────────────────────────────────────── */ html.light .modal-backdrop { background: rgba(0,0,0,0.35) !important; } html.light .modal-box { background: #ffffff !important; border-color: rgba(0,0,0,0.1) !important; color: #1e293b !important; } /* ── Login / auth pages ─────────────────────────────── */ html.light .login-card, html.light .section-card { background: rgba(255,255,255,0.92) !important; border-color: rgba(0,0,0,0.1) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.1) !important; } html.light .header { background: rgba(255,255,255,0.92) !important; border-bottom-color: rgba(0,0,0,0.1) !important; } html.light .numpad-btn { background: rgba(0,0,0,0.05) !important; border-color: rgba(0,0,0,0.1) !important; color: #1e293b !important; } html.light .numpad-btn:hover { background: rgba(0,0,0,0.1) !important; } /* ── Tab buttons ────────────────────────────────────── */ html.light .tab-active { background: #1e293b !important; color: #ffffff !important; } html.light .tab-inactive { background: rgba(0,0,0,0.05) !important; border-color: rgba(0,0,0,0.1) !important; color: #64748b !important; } html.light .tab-inactive:hover { background: rgba(0,0,0,0.1) !important; color: #1e293b !important; } html.light .tab-main { color: #1e293b; } /* ── Tailwind utility overrides ─────────────────────── */ html.light .bg-black { background-color: #f1f5f9 !important; } html.light .bg-white\/5 { background-color: rgba(0,0,0,0.04) !important; } html.light .bg-white\/10 { background-color: rgba(0,0,0,0.07) !important; } html.light .bg-white\/15 { background-color: rgba(0,0,0,0.09) !important; } html.light .bg-white\/20 { background-color: rgba(0,0,0,0.11) !important; } html.light .bg-white\/25 { background-color: rgba(0,0,0,0.13) !important; } html.light .bg-slate-900 { background-color: #e2e8f0 !important; } html.light .bg-slate-800 { background-color: #cbd5e1 !important; } html.light .bg-slate-700 { background-color: #94a3b8 !important; } html.light .text-white { color: #1e293b !important; } html.light .text-slate-100 { color: #334155 !important; } html.light .text-slate-200 { color: #475569 !important; } html.light .text-slate-300 { color: #64748b !important; } html.light .text-slate-400 { color: #94a3b8 !important; } html.light .text-slate-500 { color: #94a3b8 !important; } html.light .text-slate-600 { color: #64748b !important; } html.light .border-white\/5 { border-color: rgba(0,0,0,0.05) !important; } html.light .border-white\/10 { border-color: rgba(0,0,0,0.1) !important; } html.light .border-white\/20 { border-color: rgba(0,0,0,0.15) !important; } html.light .bg-black\/40 { background-color: rgba(255,255,255,0.6) !important; } html.light .bg-black\/60 { background-color: rgba(255,255,255,0.7) !important; } /* ── Rounded chips / badges using white/10 ──────────── */ html.light .rounded-full.bg-white\/10 { background: rgba(0,0,0,0.08) !important; } /* ── Hover states ───────────────────────────────────── */ html.light .hover\:bg-white\/10:hover { background-color: rgba(0,0,0,0.07) !important; } html.light .hover\:bg-white\/15:hover { background-color: rgba(0,0,0,0.09) !important; } /* ── Scrollbars ─────────────────────────────────────── */ html.light ::-webkit-scrollbar-track { background: #e2e8f0; } html.light ::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 4px; } html.light ::-webkit-scrollbar-thumb:hover { background: #64748b; } /* ── Tables ─────────────────────────────────────────── */ html.light table { color: #1e293b; } html.light thead th { color: #64748b !important; } html.light .border-t { border-top-color: rgba(0,0,0,0.07) !important; } html.light tr.hover\:bg-white\/5:hover { background: rgba(0,0,0,0.03) !important; } /* ── Monitor stock tiles ────────────────────────────── */ html.light .card-success { background: rgba(16,185,129,0.08) !important; border-color: rgba(16,185,129,0.25) !important; } html.light .card-warning { background: rgba(234,179,8,0.08) !important; border-color: rgba(234,179,8,0.25) !important; } html.light .card-alert { background: rgba(239,68,68,0.08) !important; border-color: rgba(239,68,68,0.25) !important; } html.light .stock-status-track { background: rgba(0,0,0,0.1) !important; } /* ── POS numpad ─────────────────────────────────────── */ html.light .btn-fichar-in, html.light .btn-fichar-out { /* keep gradient, just adjust glow */ box-shadow: none !important; } /* ── Tasker CSS variables ───────────────────────────── */ html.light { --text: #1e293b; --card: rgba(255,255,255,0.7); --line: rgba(0,0,0,0.07); } /* ── Week nav ───────────────────────────────────────── */ html.light .week-nav button { background: rgba(0,0,0,0.06) !important; color: #475569 !important; border: none; } html.light .week-nav button:hover { background: rgba(0,0,0,0.12) !important; color: #1e293b !important; } html.light .day-col { background: rgba(0,0,0,0.03) !important; } html.light .day-header { border-bottom-color: rgba(0,0,0,0.1) !important; color: #64748b !important; }