/* ============================================================ * PayStep — global stylesheet * * The app is built as a dark theme using Tailwind CDN classes * (bg-slate-900, text-white, etc). Light mode is implemented as * an override layer below — when `.theme-light` is present, * each dark utility class gets remapped to a light equivalent. * Templates don't change. * * If you add a new color class to a template and it shows up * unstyled in light mode, add the corresponding override here. * ============================================================ */ /* --------------- DARK (default) --------------- */ body { background-color: #020617; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: #020617; } ::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #334155; } /* Glass Utility */ .glass-panel { background: rgba(30, 41, 59, 0.4); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.05); } /* Mobile scroll */ .mobile-scroll-container { -webkit-overflow-scrolling: touch; } /* Flash messages */ .flash-enter { animation: slideUp 0.3s ease-out; } @keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Theme toggle button (sits in sidebar / header) */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; color: #94a3b8; background: transparent; border: 1px solid rgba(148, 163, 184, 0.15); cursor: pointer; transition: all 0.15s ease; } .theme-toggle:hover { color: #f8fafc; background: rgba(148, 163, 184, 0.1); } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } .theme-light .theme-toggle .icon-sun { display: block; } .theme-light .theme-toggle .icon-moon { display: none; } .theme-light .theme-toggle { color: #475569; border-color: rgba(15, 23, 42, 0.12); } .theme-light .theme-toggle:hover { color: #0f172a; background: rgba(15, 23, 42, 0.04); } /* ===================================================================== * LIGHT MODE OVERRIDES * --------------------------------------------------------------------- * Toggled by adding `theme-light` class to (see base templates). * Pre-paint script in reads localStorage and applies it before * first render to avoid a dark flash on light-mode page loads. * ===================================================================== */ .theme-light, .theme-light body { background-color: #f8fafc; color: #334155; } .theme-light ::-webkit-scrollbar-track { background: #f1f5f9; } .theme-light ::-webkit-scrollbar-thumb { background: #cbd5e1; } .theme-light ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } .theme-light .glass-panel { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); border: 1px solid rgba(15, 23, 42, 0.08); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04); } /* ---- Page / base backgrounds ---- */ .theme-light .bg-dark-950, .theme-light .bg-slate-950 { background-color: #f8fafc; } .theme-light .bg-slate-950\/50 { background-color: rgba(248, 250, 252, 0.5); } .theme-light .bg-dark-900\/50, .theme-light .bg-dark-900\/90 { background-color: rgba(255, 255, 255, 0.9); } /* ---- Elevated panels / cards (slate-900 family) ---- */ .theme-light .bg-slate-900 { background-color: #ffffff; } .theme-light .bg-slate-900\/20 { background-color: rgba(241, 245, 249, 0.6); } .theme-light .bg-slate-900\/30 { background-color: rgba(241, 245, 249, 0.7); } .theme-light .bg-slate-900\/40 { background-color: rgba(241, 245, 249, 0.8); } .theme-light .bg-slate-900\/50 { background-color: rgba(255, 255, 255, 0.7); } .theme-light .bg-slate-900\/60 { background-color: rgba(255, 255, 255, 0.8); } .theme-light .bg-slate-900\/80 { background-color: rgba(255, 255, 255, 0.9); } .theme-light .bg-slate-900\/95 { background-color: rgba(255, 255, 255, 0.95); } /* ---- Surface / hover (slate-800 family) ---- */ .theme-light .bg-slate-800 { background-color: #f1f5f9; } .theme-light .bg-slate-800\/20 { background-color: rgba(241, 245, 249, 0.6); } .theme-light .bg-slate-800\/30 { background-color: rgba(241, 245, 249, 0.7); } .theme-light .bg-slate-800\/40 { background-color: rgba(241, 245, 249, 0.8); } .theme-light .bg-slate-800\/50 { background-color: rgba(226, 232, 240, 0.6); } .theme-light .bg-slate-800\/80 { background-color: rgba(226, 232, 240, 0.9); } /* ---- Stronger hover / active (slate-700 family) ---- */ .theme-light .bg-slate-700 { background-color: #e2e8f0; } .theme-light .bg-slate-700\/40 { background-color: rgba(226, 232, 240, 0.6); } .theme-light .bg-slate-700\/50 { background-color: rgba(203, 213, 225, 0.6); } .theme-light .bg-slate-700\/60 { background-color: rgba(203, 213, 225, 0.7); } /* ---- Neutral fills / chips ---- */ .theme-light .bg-slate-600 { background-color: #94a3b8; } .theme-light .bg-slate-500 { background-color: #94a3b8; } .theme-light .bg-slate-500\/10 { background-color: rgba(100, 116, 139, 0.1); } .theme-light .bg-slate-500\/20 { background-color: rgba(100, 116, 139, 0.18); } .theme-light .bg-slate-400 { background-color: #cbd5e1; } /* ---- Modal/overlay backdrops — keep dark for contrast against the underlying page, but slightly lighter than dark mode. ---- */ .theme-light .bg-black\/60 { background-color: rgba(15, 23, 42, 0.5); } .theme-light .bg-black\/80 { background-color: rgba(15, 23, 42, 0.6); } /* ---- Text ---- */ .theme-light .text-white { color: #0f172a; } .theme-light .text-slate-200 { color: #1e293b; } .theme-light .text-slate-300 { color: #334155; } .theme-light .text-slate-400 { color: #475569; } .theme-light .text-slate-500 { color: #64748b; } .theme-light .text-slate-600 { color: #94a3b8; } /* slate-800 was already dark text, keep it for headings/etc. */ .theme-light .text-slate-800 { color: #1e293b; } /* ---- Borders ---- */ .theme-light .border-slate-800 { border-color: #e2e8f0; } .theme-light .border-slate-800\/40 { border-color: rgba(226, 232, 240, 0.6); } .theme-light .border-slate-800\/50 { border-color: rgba(226, 232, 240, 0.7); } .theme-light .border-slate-800\/60 { border-color: rgba(226, 232, 240, 0.8); } .theme-light .border-slate-700 { border-color: #cbd5e1; } .theme-light .border-slate-700\/30 { border-color: rgba(203, 213, 225, 0.5); } .theme-light .border-slate-700\/40 { border-color: rgba(203, 213, 225, 0.6); } .theme-light .border-slate-700\/50 { border-color: rgba(203, 213, 225, 0.7); } .theme-light .border-slate-700\/60 { border-color: rgba(203, 213, 225, 0.8); } .theme-light .border-slate-600 { border-color: #94a3b8; } .theme-light .border-slate-600\/50 { border-color: rgba(148, 163, 184, 0.5); } .theme-light .border-slate-500 { border-color: #94a3b8; } .theme-light .border-slate-500\/20 { border-color: rgba(148, 163, 184, 0.3); } .theme-light .border-slate-500\/30 { border-color: rgba(148, 163, 184, 0.4); } /* ---- Divides ---- */ .theme-light .divide-slate-800\/50 > * + * { border-color: rgba(226, 232, 240, 0.7); } .theme-light .divide-slate-700\/50 > * + * { border-color: rgba(203, 213, 225, 0.7); } /* ---- Placeholders ---- */ .theme-light .placeholder-slate-500::placeholder, .theme-light .placeholder-slate-500::-webkit-input-placeholder { color: #94a3b8; } .theme-light .placeholder-slate-600::placeholder, .theme-light .placeholder-slate-600::-webkit-input-placeholder { color: #cbd5e1; } /* ---- Status fills — dark mode uses tinted-alpha over a black bg which looks washed-out on white. Bump opacity / use solid 50-tints in light mode so badges and alerts stay readable. ---- */ .theme-light .bg-red-500\/10 { background-color: #fee2e2; } /* red-100 */ .theme-light .bg-red-500\/20 { background-color: #fecaca; } /* red-200 */ .theme-light .bg-red-500\/5 { background-color: #fef2f2; } /* red-50 */ .theme-light .border-red-500\/20 { border-color: #fca5a5; } /* red-300 */ .theme-light .border-red-500\/30 { border-color: #f87171; } /* red-400 */ .theme-light .text-red-400 { color: #b91c1c; } /* red-700 */ .theme-light .text-red-300 { color: #dc2626; } /* red-600 */ .theme-light .bg-amber-500\/10 { background-color: #fef3c7; } /* amber-100 */ .theme-light .bg-amber-500\/20 { background-color: #fde68a; } /* amber-200 */ .theme-light .border-amber-500\/20 { border-color: #fcd34d; } /* amber-300 */ .theme-light .border-amber-500\/30 { border-color: #f59e0b; } /* amber-500 */ .theme-light .text-amber-400 { color: #b45309; } /* amber-700 */ .theme-light .text-amber-300 { color: #d97706; } /* amber-600 */ .theme-light .bg-emerald-500\/10 { background-color: #d1fae5; } /* emerald-100 */ .theme-light .text-emerald-400 { color: #047857; } /* emerald-700 */ .theme-light .bg-blue-500\/10 { background-color: #dbeafe; } /* blue-100 */ .theme-light .border-blue-500\/20 { border-color: #93c5fd; } /* blue-300 */ .theme-light .text-blue-400 { color: #1d4ed8; } /* blue-700 */ .theme-light .text-blue-300 { color: #2563eb; } /* blue-600 */ /* ---- Inputs: native form controls in light mode ---- Form inputs typically use bg-slate-900 / border-slate-700 which already get overridden above, but ensure focus rings / disabled state look right too. ---- */ .theme-light input, .theme-light textarea, .theme-light select { color-scheme: light; } .theme-light input::placeholder, .theme-light textarea::placeholder { color: #94a3b8; } /* Date / time inputs render their icon in user-agent color; force it dark in light mode so it doesn't disappear on white. */ .theme-light input[type="date"]::-webkit-calendar-picker-indicator, .theme-light input[type="time"]::-webkit-calendar-picker-indicator, .theme-light input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: invert(0.4); } /* Sidebar gradient ambient glow uses brand-500/5 — already brand-tinted, leave as-is. Same for shadow-glow. */ /* Tables — many admin tables use slate dividers we've already covered. Add hover row tint that works on white. */ .theme-light tr.hover\:bg-slate-800\/40:hover { background-color: #f8fafc; } /* ===================================================================== * Tailwind variants — hover / focus / group-hover * --------------------------------------------------------------------- * Tailwind compiles each variant to its own class, so .text-white and * .hover\:text-white are separate rules. The base overrides above only * cover the non-variant classes; we mirror each variant explicitly. * ===================================================================== */ /* hover:bg-slate-X — sidebar nav, dropdown items, list rows */ .theme-light .hover\:bg-slate-800:hover { background-color: #f1f5f9; } .theme-light .hover\:bg-slate-800\/30:hover { background-color: rgba(241, 245, 249, 0.7); } .theme-light .hover\:bg-slate-800\/50:hover { background-color: rgba(226, 232, 240, 0.6); } .theme-light .hover\:bg-slate-700:hover { background-color: #e2e8f0; } .theme-light .hover\:bg-slate-700\/50:hover { background-color: rgba(203, 213, 225, 0.6); } .theme-light .hover\:bg-slate-700\/60:hover { background-color: rgba(203, 213, 225, 0.7); } .theme-light .hover\:bg-slate-600:hover { background-color: #cbd5e1; } .theme-light .hover\:bg-white\/30:hover { background-color: rgba(15, 23, 42, 0.08); } /* hover:text-X — nav items, links */ .theme-light .hover\:text-white:hover { color: #0f172a; } .theme-light .hover\:text-slate-200:hover { color: #0f172a; } .theme-light .hover\:text-slate-300:hover { color: #1e293b; } .theme-light .hover\:text-slate-400:hover { color: #334155; } .theme-light .hover\:text-red-400:hover { color: #b91c1c; } .theme-light .hover\:text-red-300:hover { color: #dc2626; } .theme-light .hover\:text-amber-400:hover { color: #b45309; } .theme-light .hover\:text-amber-300:hover { color: #d97706; } .theme-light .hover\:text-emerald-300:hover { color: #047857; } /* hover:bg / hover:border for status colors */ .theme-light .hover\:bg-red-500\/10:hover { background-color: #fee2e2; } .theme-light .hover\:bg-red-500\/20:hover { background-color: #fecaca; } .theme-light .hover\:bg-red-500\/5:hover { background-color: #fef2f2; } .theme-light .hover\:bg-amber-500\/10:hover { background-color: #fef3c7; } .theme-light .hover\:bg-amber-500\/20:hover { background-color: #fde68a; } .theme-light .hover\:border-red-500\/30:hover { border-color: #f87171; } .theme-light .hover\:border-red-500\/60:hover { border-color: #ef4444; } .theme-light .hover\:border-amber-500\/30:hover { border-color: #f59e0b; } .theme-light .hover\:border-amber-500\/60:hover { border-color: #d97706; } .theme-light .hover\:border-slate-500:hover { border-color: #64748b; } .theme-light .hover\:border-slate-600:hover { border-color: #94a3b8; } .theme-light .hover\:border-slate-600\/50:hover { border-color: rgba(148, 163, 184, 0.5); } /* group-hover variants */ .theme-light .group:hover .group-hover\:text-amber-400 { color: #b45309; } .theme-light .group:hover .group-hover\:text-red-400 { color: #b91c1c; } .theme-light .group:hover .group-hover\:text-slate-300 { color: #334155; } /* ===================================================================== * Solid brand / status backgrounds — keep child text WHITE * --------------------------------------------------------------------- * The base text-white override above flips white text to dark for the * majority case (panels, headings on light surfaces). But when text-white * sits on a solid brand/red/blue/green button or banner, it must stay * white for contrast. Restore it explicitly here. * ===================================================================== */ /* SOLID brand backgrounds only — NOT the alpha tints. The previous [class*="bg-brand-"] wildcard also matched faint tints like bg-brand-900/10 (the "Action Needed" row highlight) and bg-brand-500/10, forcing the client name to white on a near-white background → invisible. `.bg-brand-500` does not match the escaped `bg-brand-500\/10` class, so listing the solid shades is precise. */ .theme-light .bg-brand-400.text-white, .theme-light .bg-brand-400 .text-white, .theme-light .bg-brand-500.text-white, .theme-light .bg-brand-500 .text-white, .theme-light .bg-brand-600.text-white, .theme-light .bg-brand-600 .text-white, .theme-light .bg-gradient-to-br.text-white, .theme-light .bg-gradient-to-br .text-white, .theme-light .bg-gradient-to-r.text-white, .theme-light .bg-gradient-to-r .text-white, .theme-light .bg-red-500.text-white, .theme-light .bg-red-500 .text-white, .theme-light .bg-red-600.text-white, .theme-light .bg-red-600 .text-white, .theme-light .bg-blue-500.text-white, .theme-light .bg-blue-500 .text-white, .theme-light .bg-blue-600.text-white, .theme-light .bg-blue-600 .text-white, .theme-light .bg-emerald-500.text-white, .theme-light .bg-emerald-500 .text-white, .theme-light .bg-emerald-600.text-white, .theme-light .bg-emerald-600 .text-white, .theme-light .bg-amber-500.text-white, .theme-light .bg-amber-500 .text-white { color: #ffffff; } /* Hover-state white text on brand/solid buttons (e.g. impersonation "End Impersonation" button) — also keep white. */ .theme-light .hover\:bg-emerald-500:hover.text-white, .theme-light .hover\:bg-amber-500:hover.text-white, .theme-light .hover\:bg-amber-400:hover.text-white, .theme-light .hover\:bg-red-500:hover.text-white, .theme-light .hover\:bg-red-400:hover.text-white { color: #ffffff; } /* ===================================================================== * Extra status colors — alpha tints + solid darkening * ===================================================================== */ /* green / emerald variants beyond what we already mapped */ .theme-light .bg-emerald-400 { background-color: #6ee7b7; } .theme-light .bg-emerald-500 { background-color: #10b981; } /* keep */ .theme-light .bg-emerald-600 { background-color: #059669; } /* keep */ .theme-light .bg-emerald-500\/20 { background-color: #a7f3d0; } /* emerald-200 */ .theme-light .bg-green-500\/10 { background-color: #dcfce7; } /* green-100 */ .theme-light .border-emerald-500\/30 { border-color: #6ee7b7; } .theme-light .border-green-500\/20 { border-color: #86efac; } .theme-light .text-emerald-300 { color: #047857; } .theme-light .text-green-400 { color: #15803d; } /* green-700 */ .theme-light .ring-emerald-500\/50 { --tw-ring-color: rgba(16, 185, 129, 0.5); } /* amber variants */ .theme-light .bg-amber-400 { background-color: #fbbf24; } /* keep solid */ .theme-light .bg-amber-500 { background-color: #f59e0b; } /* keep solid */ .theme-light .bg-amber-600 { background-color: #d97706; } /* keep solid */ .theme-light .bg-amber-900\/10 { background-color: #fef3c7; } .theme-light .border-amber-500 { border-color: #f59e0b; } .theme-light .border-amber-500\/40 { border-color: #fbbf24; } .theme-light .border-amber-500\/50 { border-color: #f59e0b; } .theme-light .border-amber-500\/60 { border-color: #d97706; } .theme-light .border-amber-700\/20 { border-color: #fde68a; } .theme-light .border-amber-700\/40 { border-color: #fbbf24; } .theme-light .text-amber-500 { color: #b45309; } .theme-light .text-amber-500\/70 { color: rgba(180, 83, 9, 0.85); } .theme-light .text-amber-600\/40 { color: rgba(146, 64, 14, 0.6); } .theme-light .text-amber-600\/60 { color: rgba(146, 64, 14, 0.8); } .theme-light .ring-amber-500\/50 { --tw-ring-color: rgba(245, 158, 11, 0.5); } /* red variants */ .theme-light .bg-red-400 { background-color: #f87171; } /* keep solid */ .theme-light .bg-red-500 { background-color: #ef4444; } /* keep solid */ .theme-light .bg-red-600 { background-color: #dc2626; } /* keep solid */ .theme-light .border-red-500\/40 { border-color: #f87171; } .theme-light .border-red-500\/50 { border-color: #ef4444; } .theme-light .border-red-500\/60 { border-color: #dc2626; } .theme-light .text-red-400\/70 { color: rgba(185, 28, 28, 0.85); } /* blue variants */ .theme-light .bg-blue-500\/20 { background-color: #bfdbfe; } /* blue-200 */ .theme-light .border-blue-500\/30 { border-color: #60a5fa; } /* blue-400 */ /* ===================================================================== * Tailwind gradient stops — set via CSS custom properties, not * background-color, so the bg-slate-X overrides above can't reach * them. Mirror each gradient stop class used in the templates. * Currently just the avatar circle gradient (slate-700 -> slate-600); * add more as needed. * * Brand-color gradients (from-brand-400/to-brand-600 on logos, etc.) * stay green in light mode by design — they're the brand accent. * ===================================================================== */ .theme-light .from-slate-700 { --tw-gradient-from: #e2e8f0 var(--tw-gradient-from-position); --tw-gradient-to: rgb(226 232 240 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .theme-light .to-slate-600 { --tw-gradient-to: #cbd5e1 var(--tw-gradient-to-position); } /* purple / indigo (used sparingly for accents) */ .theme-light .bg-purple-400 { background-color: #c084fc; } /* keep solid */ .theme-light .bg-purple-500\/10 { background-color: #f3e8ff; } /* purple-100 */ .theme-light .border-purple-500\/20 { border-color: #c4b5fd; } .theme-light .text-purple-400 { color: #6d28d9; } /* purple-700 */ .theme-light .bg-indigo-500\/10 { background-color: #e0e7ff; } /* indigo-100 */ .theme-light .border-indigo-500\/20 { border-color: #a5b4fc; } .theme-light .text-indigo-400 { color: #4338ca; } /* indigo-700 */