/* ================================================================= Aguns Consulting VMS — Brand Theme File: /assets/css/theme.css Primary: #DA291C (rgb 218, 41, 28) Accent: #FFCD00 (rgb 255, 205, 0) Loaded AFTER bootstrap.min.css on every page. ================================================================= */ :root { --brand-primary: #DA291C; --brand-primary-rgb: 218, 41, 28; --brand-primary-dark: #A81F15; /* hover/active state */ --brand-primary-light: #F4D6D3; /* subtle backgrounds/badges */ --brand-accent: #FFCD00; --brand-accent-rgb: 255, 205, 0; --brand-accent-dark: #CCA400; --brand-accent-light: #FFF6CC; --brand-dark: #1A1A1A; /* sidebar / footer background */ --brand-light: #F8F9FA; /* page background */ --brand-success: #1E7E34; --brand-warning: #FFCD00; --brand-danger: #DA291C; /* Dark mode overrides consumed via [data-theme="dark"] on */ --bg-body: var(--brand-light); --bg-surface: #FFFFFF; --text-body: #212529; --border-color: #E5E7EB; } [data-theme="dark"] { --bg-body: #121212; --bg-surface: #1E1E1E; --text-body: #E9ECEF; --border-color: #2E2E2E; --brand-light: #121212; } body { background-color: var(--bg-body); color: var(--text-body); } /* ---- Bootstrap component overrides using brand colors ---- */ .btn-primary { background-color: var(--brand-primary); border-color: var(--brand-primary); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--brand-primary-dark) !important; border-color: var(--brand-primary-dark) !important; } .btn-accent { background-color: var(--brand-accent); border-color: var(--brand-accent); color: var(--brand-dark); } .btn-accent:hover { background-color: var(--brand-accent-dark); border-color: var(--brand-accent-dark); color: var(--brand-dark); } .text-primary { color: var(--brand-primary) !important; } .bg-primary { background-color: var(--brand-primary) !important; } .border-primary { border-color: var(--brand-primary) !important; } .badge.bg-accent { background-color: var(--brand-accent) !important; color: var(--brand-dark); } .badge.bg-primary { background-color: var(--brand-primary) !important; } a { color: var(--brand-primary); } a:hover { color: var(--brand-primary-dark); } /* ---- Layout shell (sidebar / topbar) ---- */ .app-sidebar { background-color: var(--brand-dark); border-right: 3px solid var(--brand-primary); } .app-sidebar .nav-link { color: #CFCFCF; } .app-sidebar .nav-link.active, .app-sidebar .nav-link:hover { background-color: rgba(var(--brand-primary-rgb), 0.85); color: #FFFFFF; } .app-sidebar .nav-link .accent-dot { background-color: var(--brand-accent); } .app-topbar { background-color: var(--bg-surface); border-bottom: 3px solid var(--brand-accent); } .card { background-color: var(--bg-surface); border: 1px solid var(--border-color); } .card-stat-accent { border-left: 4px solid var(--brand-accent); } .card-stat-primary { border-left: 4px solid var(--brand-primary); } /* ---- Status badges used across vendor/tender/invoice statuses ---- */ .status-approved { background-color: var(--brand-success); color: #fff; } .status-pending { background-color: var(--brand-accent); color: var(--brand-dark); } .status-rejected { background-color: var(--brand-danger); color: #fff; } .status-draft { background-color: #6C757D; color: #fff; } /* ---- Login / auth screens ---- */ .auth-brand-panel { background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%); color: #fff; } .auth-brand-panel .accent-bar { height: 6px; background-color: var(--brand-accent); }