:root { --primary: #1c5d3b; --primary-dark: #123f28; --primary-light: #e3f3e9; --accent: #2f8a5a; --bg: #f4f6f5; --card-bg: #ffffff; --border: #dfe3e0; --text: #202824; --text-muted: #5c6a63; --error: #b3261e; --error-bg: #fbe9e7; --success: #1c5d3b; --pending: #b56a00; --radius: 10px; --radius-sm: 6px; --shadow-sm: 0 1px 2px rgba(18, 40, 28, 0.06); --shadow-md: 0 4px 16px rgba(18, 40, 28, 0.08); --sidebar-w: 250px; --topbar-mobile-h: 54px; --topbar-h: 60px; --footer-h: 44px; --info: #1c6fb3; --info-bg: #e5f1fb; --warning: #b56a00; --warning-bg: #fdf1de; --danger: #b3261e; --danger-bg: #fbe9e7; --table-header-bg: #eef2ef; --table-hover-bg: #f8faf8; --badge-neutral-bg: #e3e8e5; --overlay-bg: rgba(18, 40, 28, 0.45); --focus-ring: rgba(47, 138, 90, 0.18); } /* ---------- Dark mode ---------- Toggled by setting data-theme="dark" on (see the inline script in and the topbar toggle button). The sidebar stays its usual dark green in both themes — only the light surfaces (page background, cards, tables, topbar, modals) flip to dark equivalents. */ :root[data-theme="dark"] { --primary: #3f9468; --primary-dark: #2c6f4b; --primary-light: #16281f; --accent: #45a873; --bg: #141815; --card-bg: #1d2320; --border: #333c36; --text: #e7ece8; --text-muted: #a2aca4; --error: #ff6f61; --error-bg: #3a1f1c; --success: #45a873; --pending: #e3a53f; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5); --info: #5aa4e0; --info-bg: #1c2a35; --warning: #e3a53f; --warning-bg: #3a2c14; --danger: #ff6f61; --danger-bg: #3a1f1c; --table-header-bg: #242b26; --table-hover-bg: #232a25; --badge-neutral-bg: #2b322d; --overlay-bg: rgba(0, 0, 0, 0.6); --focus-ring: rgba(69, 168, 115, 0.28); } * { box-sizing: border-box; } /* The `hidden` attribute must always win over a class's own `display` property (e.g. `.btn { display: inline-flex }` would otherwise silently defeat `