/* ============================================================ THEME.CSS — Design tokens + Light/Dark palettes Single source of truth for the app theme. Usage: (set before CSS paint) ============================================================ */ /* ---------- DARK (current palette, unchanged) ---------- */ [data-theme="dark"] { --bg-page: #1d2731; --bg-navbar: #1d2731; --bg-sidebar: #1d2731; --bg-sidebar-icon: #1d2731; --bg-card: #484c50; --bg-card-header: #3a3e42; --bg-input: #131212; --bg-input-focus: #000000; --bg-dropdown: #000000; --bg-table: #003049; --bg-table-alt: #0a3a52; --bg-footer: #1d2731; --bg-hover: #243340; --text-primary: #ffffff; --text-secondary: #2ecc71; --text-muted: #b8c4cc; --text-on-accent: #ffffff; --accent: #2ecc71; --accent-hover: #27ae60; --accent-contrast: #ffffff; --border-color: #313030; --border-input: #c5c5c5; --shadow: 1px 1px 1px black; --link: #2ecc71; --link-hover: #ffffff; --danger: #e74c3c; --bg-danger-soft: #4a2521; --text-danger: #ffa79e; --danger-border: rgba(231, 76, 60, 0.55); --toggle-track: #000000; --toggle-knob: #333333; } /* ---------- LIGHT (grey-toned, low glare) ---------- The office asked for a slightly darker / greyer light theme, striping on every table, and a chrome (sidebar + navbar) that reads as a distinct surface rather than another slab of white. Tiers: canvas #d3d9df (grey page background) chrome #c3ccd6 (sidebar + navbar — deliberately DARKER than the page so the rail/header read as one solid dark band) content #fbfcfd (cards, tables, inputs — near-white "paper" on top) */ [data-theme="light"] { --bg-page: #c3cbd4; --bg-navbar: #aab6c4; --bg-sidebar: #aab6c4; --bg-sidebar-icon: #aab6c4; --bg-card: #f5f7f9; --bg-card-header: #dbe3ea; --bg-input: #ffffff; --bg-input-focus: #ffffff; --bg-dropdown: #ffffff; --bg-table: #f5f7f9; --bg-table-alt: #d2dbe4; --bg-footer: #aab6c4; --bg-hover: #bfcbd8; --text-primary: #161d24; --text-secondary: #0e4a24; --text-muted: #3d4853; --text-on-accent: #ffffff; --accent: #27ae60; --accent-hover: #1e8449; --accent-contrast: #ffffff; --border-color: #9fabba; --border-input: #7d8b99; --shadow: 0 1px 2px rgba(22, 29, 36, 0.14); --link: #0e4a24; --link-hover: #0a3a1c; --danger: #b03325; --bg-danger-soft: #eccfcb; --text-danger: #7d2318; --danger-border: rgba(176, 51, 37, 0.45); --toggle-track: #9fabba; --toggle-knob: #ffffff; } /* ============================================================ SHARED COMPONENT STYLES (token-driven, both themes) Replaces the triplicated inline style blocks in master.blade.php / app.blade.php / dueMaster.blade.php ============================================================ */ body { background-color: var(--bg-page); color: var(--text-primary); } /* ---------- Navbar / Topbar ---------- The navbar sat flush against the content with no edge, so in light mode (where navbar and page have different tones) it read as part of the page, and in dark mode — where BOTH tokens are #1d2731 — there was no header at all. Pin it, and give it a hairline + soft shadow so the header reads as a distinct band in either theme. */ .navbar-laravel { position: sticky; top: 0; z-index: 1030; background-color: var(--bg-navbar) !important; color: var(--text-secondary) !important; border-bottom: 1px solid var(--border-color); box-shadow: 0 1px 3px rgba(29, 39, 49, 0.08); /* Offset for the fixed icon rail (90px). Was an inline `margin-left:90px; padding:12px 0` on the