.abp-button,
.abp-button-primary,
.btn,
.btn-primary {
    background-color: hsl(80,38%,30%) !important;
    color: white !important;
    border-color: hsl(80,38%,30%) !important;
}

.pagination {
    --bs-pagination-padding-x: 0.75rem;
    --bs-pagination-padding-y: 0.375rem;
    --bs-pagination-font-size: 1rem;
    --bs-pagination-color: hsl(80,38%,30%) !important;
    --bs-pagination-bg: var(--bs-body-bg);
    --bs-pagination-border-width: var(--bs-border-width);
    --bs-pagination-border-color: var(--bs-border-color);
    --bs-pagination-border-radius: var(--bs-border-radius);
    --bs-pagination-hover-color: hsl(80,38%,30%) !important;
    --bs-pagination-hover-bg: var(--bs-tertiary-bg);
    --bs-pagination-hover-border-color: var(--bs-border-color);
    --bs-pagination-focus-color: hsl(80,38%,30%) !important;
    --bs-pagination-focus-bg: var(--bs-secondary-bg);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem hsl(80, 38%, 60%) !important;
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: hsl(80,38%,30%) !important;
    --bs-pagination-active-border-color: hsl(80,38%,30%) !important;
    --bs-pagination-disabled-color: var(--bs-secondary-color);
    --bs-pagination-disabled-bg: var(--bs-secondary-bg);
    --bs-pagination-disabled-border-color: var(--bs-border-color);
    display: flex
;
    padding-left: 0;
    list-style: none;
}

/* Sidebar background */
.main-sidebar,
.aside {
    background-color: hsl(80,38%,30%) !important; /* dark blue/gray */
}

/* Menu item text */
.menu-item > .menu-link {
    color: #ecf0f1 !important; /* light gray text */
}

/* Active menu item */
.menu-item.active > .menu-link {
    background-color: #1ABC9C !important; /* turquoise */
    color: white !important;
}

/* Hover effect */
.menu-item:hover > .menu-link {
    background-color: #16a085 !important;
    color: white !important;
}

/* Menu icons */
.menu-icon {
    color: #bdc3c7 !important; /* silver tone */
}

.menu-item > .menu-link {
    color: white !important;
}

.menu-item.active > .menu-link {
    background-color: #FFC0CB !important;
    color: black !important;
}

:root {
    /* Bootstrap 5 global overrides */
    --bs-primary: hsl(80, 38%, 30%) !important;
    --bs-primary-rgb: 107, 125, 47; /* approximate RGB of hsl(80,38%,30%) */
    --bs-link-color: hsl(80, 38%, 30%) !important;
    --bs-link-hover-color: hsl(80, 38%, 20%) !important;
    --bs-pagination-focus-color: hsl(80, 38%, 30%) !important;
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem hsl(80, 38%, 60%) !important;
}

/* Buttons */
.btn-primary,
.abp-button-primary {
    background-color: hsl(80, 38%, 30%) !important;
    border-color: hsl(80, 38%, 30%) !important;
    color: white !important;
}

.btn-primary:hover,
.abp-button-primary:hover {
    background-color: hsl(80, 38%, 25%) !important;
}

/* Active menu link */
.menu-item.active > .menu-link {
    background-color: hsl(80, 38%, 30%) !important;
    color: white !important;
}

/* Pagination item active */
.page-item.active .page-link {
    background-color: hsl(80, 38%, 30%) !important;
    border-color: hsl(80, 38%, 30%) !important;
    color: white !important;
}

/* Links */
/*a {*/
/*    color: hsl(80, 38%, 30%) !important;*/
/*}*/

a:hover {
    color: hsl(80, 38%, 20%) !important;
}

/* Sidebar (menu) background color */
.aside {
    background-color: hsl(80, 38%, 30%) !important;
}

/* Top navigation bar background */
.navbar {
    background-color: hsl(80, 38%, 30%) !important;
}

/* Optional: update the text color for contrast */
.navbar .navbar-nav .nav-link,
.navbar .navbar-brand {
    color: white !important;
}

/* Menu item active or clicked state */
.navbar .nav-link:focus,
.navbar .nav-link:active,
.navbar .nav-link:visited {
    background-color: hsl(80, 38%, 30%) !important;
    color: white !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Optional: also add hover for consistency */
.navbar .nav-link:hover {
    background-color: hsl(80, 38%, 40%) !important;
    color: white !important;
    --bs-btn-close-focus-color: hsl(80, 38%, 40%) !important;
}

.dropdown-item:active {
    background-color: hsl(80, 38%, 40%) !important; /* Bootstrap's blue */
}

/* ✅ Header row (column titles) */
/*table.dataTable thead th {*/
/*    background-color: hsl(80, 38%, 85%) !important;*/
/*    color: black !important;*/
/*}*/

/* ✅ Odd rows */
/*table tbody tr.odd > tbody > tr:nth-child(odd) {*/
/*    background-color: hsl(80, 38%, 95%) !important;*/
/*}*/

/* ✅ Override border for all types of primary buttons */
.btn-primary,
.btn-outline-primary,
.abp-button-primary {
    border-color: hsl(80, 38%, 30%) !important;
}

/* ✅ Override other button types if needed */
.btn-secondary,
.btn-outline-secondary {
    border-color: hsl(80, 38%, 30%) !important;
}

/* ✅ Fix outline border in alerts or modals */
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary:hover {
    border-color: hsl(80, 38%, 30%) !important;
    background-color: hsl(80, 38%, 30%) !important;
    color: white !important;
}
.btn:focus,
.btn-primary:focus,
.btn-outline-primary:focus {
    box-shadow: 0 0 0 0.25rem hsl(80, 38%, 60%) !important; /* custom glow */
    outline: none !important;
}
/* ✅ Change striped row background color globally */
:root {
    --bs-table-striped-bg: hsl(80, 38%, 95%) !important;  /* light green */
    --bs-table-hover-bg: hsl(80, 38%, 90%) !important;    /* for hover rows */
}
.table.table-striped tbody tr:nth-child(even) {
    background-color: hsl(80, 38%, 95%) !important;
}
/* 🎯 Directly override DataTables even/odd row colors */
table.dataTable tbody tr.odd {
    background-color: hsl(80, 38%, 98%) !important;
}

table.dataTable tbody tr.even {
    background-color: hsl(80, 38%, 95%) !important;
}

/* Hover row override */
table.dataTable tbody tr:hover {
    background-color: hsl(80, 38%, 90%) !important;
}
/* Remove Bootstrap striped background */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: hsl(80, 38%, 98%) !important;
}
table.dataTable tbody tr.even {
    background-color: hsl(80, 38%, 95%) !important;
}

table.dataTable tbody tr.odd {
    background-color: hsl(80, 38%, 98%) !important;
}
.card-header {
    background-color: whitesmoke !important;
}
.card-title {
    color: hsl(80,38%,20%) !important;
}


.card-body {
    color: hsl(80,38%,20%) !important;
}
/* 🔧 Input border color on focus */
input:focus,
textarea:focus,
select:focus {
    border-color: hsl(80, 38%, 30%) !important;
    box-shadow: 0 0 0 0.2rem hsl(80, 38%, 60%) !important;
    outline: none !important;
}
/* ✅ Bootstrap Datepicker */
.datepicker td.active,
.datepicker td.active:hover {
    background-color: hsl(80, 38%, 30%) !important;
    color: white !important;
}

/* ✅ Flatpickr (used in some ABP themes) */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:focus,
.flatpickr-day.selected:hover {
    background-color: hsl(80, 38%, 30%) !important;
    border-color: hsl(80, 38%, 30%) !important;
    color: white !important;
}

/* ✅ Tempus Dominus (ABP >= v6, Bootstrap 5) */
.datetimepicker .td-picker td.td-active,
.datetimepicker .td-picker td.td-active:hover {
    background-color: hsl(80, 38%, 30%) !important;
    color: white !important;
}
/* Normal close button style */
.btn-close {
    filter: none !important; /* Remove Bootstrap's grayscale filter */
    color: hsl(80, 38%, 30%) !important; /* Set default color */
}

/* Hover effect for close (×) button */
.btn-close:hover {
    color: hsl(80, 38%, 25%) !important;  /* Darker green on hover */
    background-color: transparent !important;
    opacity: 1 !important;
}
.btn-close:focus{
    color: hsl(80, 38%, 25%) !important;  /* Darker green on hover */
    background-color: transparent !important;
    opacity: 1 !important;
}
.btn-close i {
    color: hsl(80, 38%, 30%);
}

.btn-close i:hover {
    color: hsl(80, 38%, 20%);
}
.btn-close:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px hsl(80, 38%, 30%) !important; /* Green focus ring */
    border: none !important;
}
.navbar-brand img {
    height: 32px;
    max-height: 40px;
}
.navbar-brand img {
    display: inline-block !important;
    height: 32px !important;
    max-height: 40px;
}