/* DSS brand — slate-800 primary + amber-500 accent, mirroring the HDSS Android theme. Single source of truth: the CSS custom properties below. Overrides Bootstrap 5's brand color attributes so every .btn-primary, .text-primary, .bg-primary, .nav-link.active, .progress-bar etc. tracks the brand automatically. Light / dark modes are handled via prefers-color-scheme. Admins can also force a mode via [data-bs-theme="dark"] on . */ :root { /* Material 3 semantic palette — same names as dss-app */ --dss-primary: #1F2937; --dss-on-primary: #FFFFFF; --dss-primary-container: #D1D5DB; --dss-on-primary-container: #111827; --dss-primary-variant: #111827; --dss-secondary: #F59E0B; --dss-on-secondary: #1F2937; --dss-secondary-container: #FEF3C7; --dss-on-secondary-container:#78350F; --dss-secondary-variant: #B45309; --dss-tertiary: #6B5B6D; --dss-on-tertiary: #FFFFFF; --dss-background: #F9FAFB; --dss-on-background: #111827; --dss-surface: #FFFFFF; --dss-on-surface: #111827; --dss-surface-variant: #E5E7EB; --dss-on-surface-variant: #4B5563; --dss-outline: #9CA3AF; --dss-outline-variant: #D1D5DB; --dss-error: #BA1A1A; --dss-on-error: #FFFFFF; --dss-success: #15803D; --dss-warning: #B45309; /* Map Bootstrap 5 brand attributes to ours so every component in the admin tracks the brand without per-component overrides. */ --bs-primary: var(--dss-primary); --bs-primary-rgb: 31, 41, 55; --bs-primary-bg-subtle: var(--dss-primary-container); --bs-primary-text-emphasis: var(--dss-primary); --bs-primary-border-subtle: var(--dss-outline-variant); --bs-secondary: var(--dss-secondary); --bs-secondary-rgb: 245, 158, 11; --bs-secondary-bg-subtle: var(--dss-secondary-container); --bs-secondary-text-emphasis:var(--dss-on-secondary-container); --bs-success: var(--dss-success); --bs-success-rgb: 21, 128, 61; --bs-danger: var(--dss-error); --bs-danger-rgb: 186, 26, 26; --bs-warning: var(--dss-warning); --bs-warning-rgb: 180, 83, 9; --bs-body-bg: var(--dss-background); --bs-body-color: var(--dss-on-background); --bs-border-color: var(--dss-outline-variant); --bs-link-color: var(--dss-primary); --bs-link-hover-color: var(--dss-primary-variant); } /* Buttons — keep primary/secondary on-brand with proper text contrast. Bootstrap's `.btn-secondary` is a dark grey by default; we re-point it to the amber accent and switch text to slate so the contrast holds. */ .btn-primary { --bs-btn-bg: var(--dss-primary); --bs-btn-border-color: var(--dss-primary); --bs-btn-color: var(--dss-on-primary); --bs-btn-hover-bg: var(--dss-primary-variant); --bs-btn-hover-border-color: var(--dss-primary-variant); --bs-btn-active-bg: var(--dss-primary-variant); --bs-btn-active-border-color: var(--dss-primary-variant); } .btn-secondary { --bs-btn-bg: var(--dss-secondary); --bs-btn-border-color: var(--dss-secondary); --bs-btn-color: var(--dss-on-secondary); --bs-btn-hover-bg: var(--dss-secondary-variant); --bs-btn-hover-border-color: var(--dss-secondary-variant); --bs-btn-color-hover: #FFFFFF; } .btn-outline-primary { --bs-btn-color: var(--dss-primary); --bs-btn-border-color: var(--dss-primary); --bs-btn-hover-bg: var(--dss-primary); --bs-btn-hover-color: var(--dss-on-primary); } /* Navbar — slate-800 with amber-accent hover */ .navbar-dss { background-color: var(--dss-primary); color: var(--dss-on-primary); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08); } .navbar-dss .navbar-brand, .navbar-dss .nav-link { color: var(--dss-on-primary) !important; } .navbar-dss .nav-link:hover, .navbar-dss .nav-link.active { color: var(--dss-secondary) !important; border-bottom: 2px solid var(--dss-secondary); } /* Cards inherit surface; tiles get a subtle hover lift */ .card { background-color: var(--dss-surface); color: var(--dss-on-surface); border-color: var(--dss-outline-variant); } .dss-tile { transition: transform 0.12s ease, box-shadow 0.12s ease; cursor: pointer; } .dss-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(15, 23, 42, 0.10); border-color: var(--dss-secondary); } /* Alerts — re-tint to match brand semantic colors */ .alert-success { background-color: #DCFCE7; color: #166534; border-color: #BBF7D0; } .alert-warning { background-color: var(--dss-secondary-container); color: var(--dss-on-secondary-container); border-color: #FDE68A; } .alert-danger { background-color: #FEE2E2; color: #B91C1C; border-color: #FECACA; } /* Tables — header in slate, hover in container-subtle */ .table thead th { background-color: var(--dss-primary); color: var(--dss-on-primary); border-color: var(--dss-primary-variant); } .table-hover tbody tr:hover { background-color: var(--dss-primary-container); } /* Form controls — amber focus ring */ .form-control:focus, .form-select:focus { border-color: var(--dss-secondary); box-shadow: 0 0 0 0.2rem rgba(245, 158, 11, 0.20); } /* Badges — re-purpose semantic classes */ .badge.bg-primary { background-color: var(--dss-primary) !important; } .badge.bg-secondary { background-color: var(--dss-secondary) !important; color: var(--dss-on-secondary) !important; } /* Dark mode (system preference or manual override) */ @media (prefers-color-scheme: dark) { :root:not([data-bs-theme="light"]) { --dss-primary: #D1D5DB; --dss-on-primary: #111827; --dss-primary-container: #374151; --dss-on-primary-container: #F3F4F6; --dss-primary-variant: #9CA3AF; --dss-secondary: #FBBF24; --dss-on-secondary: #111827; --dss-secondary-container: #78350F; --dss-on-secondary-container:#FEF3C7; --dss-secondary-variant: #D97706; --dss-background: #111827; --dss-on-background: #F3F4F6; --dss-surface: #1F2937; --dss-on-surface: #F3F4F6; --dss-surface-variant: #374151; --dss-on-surface-variant: #D1D5DB; --dss-outline: #6B7280; --dss-outline-variant: #374151; } } [data-bs-theme="dark"] { --dss-primary: #D1D5DB; --dss-on-primary: #111827; --dss-background: #111827; --dss-on-background: #F3F4F6; --dss-surface: #1F2937; --dss-on-surface: #F3F4F6; }