/* ========================================================================== AutoReg Design System — Bootstrap 5 theme Green brand palette, sidebar/topbar shell, cards, badges, charts. ========================================================================== */ :root { /* Brand */ --primary: #1F7A44; --primary-dark: #14532D; --primary-darker: #0B2E19; --primary-light: #E6F4EA; --primary-100: #C9EAD4; /* Accent / status */ --danger: #E53E3E; --danger-light: #FDEEEE; --warning: #B26A0E; --warning-light: #FDF3E3; --success: #1F7A44; --success-light: #E6F4EA; --info: #2F6FDE; --info-light: #EAF1FD; /* Surfaces */ --bg: #F4F6F8; --surface: #FFFFFF; --border: #E5E9EE; --border-strong: #D6DCE3; /* Text */ --text-primary: #1A202C; --text-secondary: #667085; --text-muted: #98A2B3; --text-on-primary: #FFFFFF; --white: #FFFFFF; /* Layout */ --sidebar-width: 264px; --topbar-height: 64px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; /* Chart colors (read from JS via getComputedStyle) */ --chart-primary-soft: rgba(31, 122, 68, 0.12); --chart-warning: #F0B94D; --chart-danger: #E5645A; --chart-grid: #EEF1F4; /* Bootstrap variable overrides */ --bs-primary: var(--primary); --bs-primary-rgb: 31, 122, 68; --bs-body-color: var(--text-primary); --bs-body-bg: var(--bg); --bs-border-color: var(--border); --bs-link-color: var(--primary); --bs-link-hover-color: var(--primary-dark); --bs-font-sans-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Raw Bootstrap components (.table, .badge, .list-group, muted text, ...) read these rather than --bs-body-color, so they need the same theming or they're stuck with Bootstrap's fixed light-mode text/backgrounds under dark mode. */ --bs-emphasis-color: var(--text-primary); --bs-emphasis-color-rgb: 26, 32, 44; --bs-secondary-color: var(--text-secondary); --bs-secondary-color-rgb: 102, 112, 133; --bs-tertiary-color: var(--text-muted); --bs-tertiary-color-rgb: 152, 162, 179; --bs-secondary-bg: var(--border); --bs-tertiary-bg: var(--bg); color-scheme: light; } body, .sidebar, .topbar, .card, .icon-btn { transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } /* ========================================================================== Dark theme — toggled via [data-theme="dark"] on ========================================================================== */ :root[data-theme="dark"] { --primary: #34A65E; --primary-dark: #4FC97C; --primary-darker: #0B2E19; --primary-light: rgba(52, 166, 94, 0.16); --primary-100: rgba(52, 166, 94, 0.28); --danger: #F0736B; --danger-light: rgba(229, 100, 90, 0.14); --warning: #F0B94D; --warning-light: rgba(240, 185, 77, 0.14); --success: #34A65E; --success-light: rgba(52, 166, 94, 0.16); --info: #6C9CF5; --info-light: rgba(108, 156, 245, 0.14); --bg: #0F1712; --surface: #17211B; --border: #263129; --border-strong: #34403A; --text-primary: #F3F6F4; --text-secondary: #A8B5AE; --text-muted: #79867F; --text-on-primary: #0B2E19; --chart-primary-soft: rgba(52, 166, 94, 0.18); --chart-grid: #263129; --bs-primary-rgb: 52, 166, 94; --bs-emphasis-color-rgb: 243, 246, 244; --bs-secondary-color-rgb: 168, 181, 174; --bs-tertiary-color-rgb: 121, 134, 127; color-scheme: dark; } * { box-sizing: border-box; } body { font-family: var(--bs-font-sans-serif); background: var(--bg); color: var(--text-primary); font-size: 14px; } a { text-decoration: none; } .text-muted { font-size:12px; color: var(--text-muted) !important; } /* ========================================================================== Buttons ========================================================================== */ .btn-primary { /* Bootstrap's own .btn-primary hardcodes ALL of these to its stock blue — hover/active/focus/disabled are each a separate custom property, none derived from --bs-primary — so every state needs its own override here, not just the base background-color/border-color below. */ --bs-btn-color: var(--text-on-primary); --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-hover-color: var(--text-on-primary); --bs-btn-hover-bg: var(--primary-dark); --bs-btn-hover-border-color: var(--primary-dark); --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); --bs-btn-active-color: var(--text-on-primary); --bs-btn-active-bg: var(--primary-dark); --bs-btn-active-border-color: var(--primary-dark); --bs-btn-disabled-color: var(--text-on-primary); --bs-btn-disabled-bg: var(--primary); --bs-btn-disabled-border-color: var(--primary); background-color: var(--primary); border-color: var(--primary); color: var(--text-on-primary); font-weight: 600; border-radius: var(--radius-sm); } .btn-primary:hover, .btn-primary:focus { background-color: var(--primary-dark); border-color: var(--primary-dark); color: var(--text-on-primary); } .btn-outline-primary { --bs-btn-color: var(--primary); --bs-btn-border-color: var(--border-strong); --bs-btn-hover-color: var(--primary-dark); --bs-btn-hover-bg: var(--primary-light); --bs-btn-hover-border-color: var(--primary); --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); --bs-btn-active-color: var(--primary-dark); --bs-btn-active-bg: var(--primary-light); --bs-btn-active-border-color: var(--primary); --bs-btn-disabled-color: var(--primary); --bs-btn-disabled-border-color: var(--border-strong); color: var(--primary); border-color: var(--border-strong); border-radius: var(--radius-sm); } .btn-outline-primary:hover { background-color: var(--primary-light); border-color: var(--primary); color: var(--primary-dark); } /* ========================================================================== Global button loading state — class toggled by app.js on any form submit or navigating , site-wide (see app.js for the trigger logic and why).