:root { --kclr: #82b86e; --kclr-dark: #5e9b4f; --kclr-text-light: #fff; --kclr-text-dark: #212529; } /* === GLOBAL PRIMARY CLASSES === */ .bg-primary { background-color: var(--kclr) !important; color: var(--kclr-text-light) !important; } .text-primary { color: var(--kclr) !important; } .border-primary { border-color: var(--kclr) !important; } /* === BUTTONS === */ .btn-primary { background-color: var(--kclr) !important; border-color: var(--kclr) !important; color: var(--kclr-text-light) !important; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: var(--kclr-dark) !important; border-color: var(--kclr-dark) !important; color: var(--kclr-text-light) !important; } .btn-primary:disabled { background-color: var(--kclr) !important; border-color: var(--kclr) !important; color: #e0e0e0 !important; opacity: 0.65; } .btn-outline-primary { color: var(--kclr) !important; border-color: var(--kclr) !important; } .btn-outline-primary:hover, .btn-outline-primary:focus { background-color: var(--kclr) !important; color: var(--kclr-text-light) !important; } /* === NAVBAR === */ .navbar { background-color: var(--kclr) !important; } .navbar .navbar-brand, .navbar .navbar-nav .nav-link { color: var(--kclr-text-light) !important; } .navbar .navbar-nav .nav-link:hover, .navbar .navbar-nav .nav-link:focus { color: var(--kclr-text-light) !important; text-decoration: underline; } .navbar .navbar-nav .nav-link.active, .navbar .navbar-nav .nav-item.active .nav-link { color: var(--kclr-text-light) !important; background-color: var(--kclr-dark) !important; font-weight: bold !important; } /* === DROPDOWNS (optional) === */ .navbar .dropdown-menu { background-color: #f8f9fa !important; } .navbar .dropdown-item { color: var(--kclr-text-dark) !important; } .navbar .dropdown-item:hover { background-color: #e9ecef !important; } /* === NAV TABS & PILLS === */ .nav-tabs .nav-link, .nav-pills .nav-link { color: var(--kclr-text-dark) !important; } .nav-tabs .nav-link.active, .nav-pills .nav-link.active { background-color: var(--kclr) !important; color: var(--kclr-text-light) !important; border-color: var(--kclr) !important; } /* === PAGINATION === */ .page-link { color: var(--kclr) !important; } .page-link:hover, .page-link:focus { background-color: var(--kclr-dark) !important; color: var(--kclr-text-light) !important; } .page-item.active .page-link { background-color: var(--kclr) !important; border-color: var(--kclr) !important; color: var(--kclr-text-light) !important; font-weight: bold; } /* === ALERTS === */ .alert-primary { background-color: var(--kclr) !important; border-color: var(--kclr-dark) !important; color: var(--kclr-text-light) !important; } .alert-primary .alert-link { color: var(--kclr-text-light) !important; text-decoration: underline; font-weight: bold; } /* === BADGES === */ .badge-primary { background-color: var(--kclr) !important; color: var(--kclr-text-light) !important; } /* === PROGRESS BAR === */ .progress-bar.bg-primary { background-color: var(--kclr) !important; } /* === ACCENTED BLOCKS === */ .heading-accent, .border-accent { border-left: 4px solid var(--kclr) !important; padding-left: 10px; color: var(--kclr-text-dark) !important; } /* === PAGINATION === */ .page-link { color: var(--kclr) !important; } .page-link:hover, .page-link:focus { background-color: var(--kclr-dark) !important; color: var(--kclr-text-light) !important; } .page-item.active .page-link { background-color: var(--kclr) !important; border-color: var(--kclr) !important; color: var(--kclr-text-light) !important; font-weight: 600 !important; } /* DEFAULT PAGE LINKS */ .page-link { background-color: #fff !important; color: var(--kclr-text-dark) !important; border: 1px solid #dee2e6 !important; } /* HOVER & FOCUS */ .page-link:hover, .page-link:focus { background-color: var(--kclr-dark) !important; color: var(--kclr-text-light) !important; border-color: var(--kclr-dark) !important; } /* ACTIVE PAGE LINK */ .page-item.active .page-link { background-color: var(--kclr) !important; border-color: var(--kclr) !important; color: var(--kclr-text-light) !important; font-weight: 600 !important; }