/* ============================================================ Staff dark mode — shared across all staff pages. Activated by data-theme="dark" on (set by staff-theme.js). Uses :root[data-theme="dark"] (higher specificity than each page's inline :root) so it overrides the per-page light tokens. ============================================================ */ :root[data-theme="dark"], [data-theme="dark"] { /* Match the footer slate — page, cards and footer share one dark colour, separated by borders (the footer uses var(--surface)). */ --background: #1e293b; --surface: #1e293b; --surface-hover: #334155; --surface-alt: #172130; --border-color: #334155; --border-hover: #475569; --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --text-tertiary: #94a3b8; --text-muted: #64748b; --input-bg: #1e293b; --input-border: #334155; --scrollbar-track: #1e293b; --scrollbar-thumb: #475569; --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow: 0 1px 3px rgba(0,0,0,.4); --shadow-md: 0 4px 8px rgba(0,0,0,.4); --shadow-lg: 0 12px 20px rgba(0,0,0,.5); --chart-grid: rgba(255,255,255,.08); --chart-text: #94a3b8; } /* Base surfaces + a few known hardcoded spots that don't use tokens */ [data-theme="dark"] body { background: #1e293b; color: #f1f5f9; } /* Headers that hardcode a white/glass background instead of a token */ [data-theme="dark"] .dashboard-header, [data-theme="dark"] .pos-header, [data-theme="dark"] .staff-header, [data-theme="dark"] .top-bar, [data-theme="dark"] .navbar { background: rgba(30,41,59,.95) !important; } [data-theme="dark"] img:not([src*=".svg"]) { opacity: .94; } [data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { color-scheme: dark; } [data-theme="dark"] ::placeholder { color: var(--text-muted); } html { transition: background .2s ease; } /* Floating theme toggle (created by staff-theme.js) */ .staff-theme-toggle { position: fixed; bottom: 22px; right: 22px; width: 46px; height: 46px; border-radius: 50%; background: var(--surface, #ffffff); border: 1px solid var(--border-color, #e2e8f0); color: var(--text-secondary, #475569); box-shadow: 0 6px 20px rgba(0,0,0,.18); cursor: pointer; z-index: 9999; display: flex; align-items: center; justify-content: center; font-size: 17px; transition: transform .15s ease, background .2s ease, color .2s ease; } /* Fallback was #16a34a — the old green scheme. Dormant, since staff-theme.css defines --primary-color, but it would have painted a green hover onto a blue UI the moment that file failed to load. */ .staff-theme-toggle:hover { transform: scale(1.08); color: var(--primary-color, #3b82f6); } @media (max-width: 640px) { .staff-theme-toggle { bottom: 74px; } }