:root {
    --erp-primary: #2563EB;
    --erp-primary-dark: #1E40AF;
    --erp-primary-light: #EFF6FF;
    --erp-accent: #06B6D4;
    --erp-text-primary: #0F172A;
    --erp-text-secondary: #64748B;
    --erp-border: #E2E8F0;
    --erp-background: #F8FAFC;
    --erp-card: #FFFFFF;
    --erp-primary-rgb: 37, 99, 235;

    --bs-primary: var(--erp-primary);
    --bs-primary-rgb: var(--erp-primary-rgb);
    --bs-link-color: var(--erp-primary);
    --bs-link-hover-color: var(--erp-primary-dark);
    --kt-primary: var(--erp-primary);
    --kt-primary-active: var(--erp-primary-dark);
    --kt-primary-light: var(--erp-primary-light);
    --kt-primary-inverse: #FFFFFF;
}

body {
    background-color: var(--erp-background);
    color: var(--erp-text-primary);
}

.text-primary,
.link-primary,
.text-hover-primary:hover {
    color: var(--erp-primary) !important;
}

.text-gray-600,
.text-muted {
    color: var(--erp-text-secondary) !important;
}

.bg-primary,
.badge-primary,
.progress-bar {
    background-color: var(--erp-primary) !important;
}

.bg-light-primary,
.badge-light-primary {
    background-color: var(--erp-primary-light) !important;
    color: var(--erp-primary) !important;
}

.border-primary {
    border-color: var(--erp-primary) !important;
}

.btn-primary,
.btn.btn-primary {
    background-color: var(--erp-primary) !important;
    border-color: var(--erp-primary) !important;
    color: #FFFFFF !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.show > .btn.btn-primary {
    background-color: var(--erp-primary-dark) !important;
    border-color: var(--erp-primary-dark) !important;
}

.btn-light-primary,
.btn.btn-light-primary {
    background-color: var(--erp-primary-light) !important;
    border-color: var(--erp-primary-light) !important;
    color: var(--erp-primary) !important;
}

.btn-light-primary:hover,
.btn-light-primary:focus,
.btn.btn-light-primary:hover,
.btn.btn-light-primary:focus {
    background-color: var(--erp-primary) !important;
    border-color: var(--erp-primary) !important;
    color: #FFFFFF !important;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.select2-container--bootstrap5.select2-container--focus .select2-selection,
.select2-container--bootstrap5.select2-container--open .select2-selection {
    border-color: var(--erp-primary) !important;
    box-shadow: 0 0 0 .25rem rgba(var(--erp-primary-rgb), .12) !important;
}

.form-check-input:checked {
    background-color: var(--erp-primary) !important;
    border-color: var(--erp-primary) !important;
}

.page-item.active .page-link,
.pagination .active > .page-link {
    background-color: var(--erp-primary) !important;
    border-color: var(--erp-primary) !important;
    color: #FFFFFF !important;
}

.nav-line-tabs .nav-item .nav-link.active,
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
    color: var(--erp-primary) !important;
    border-color: var(--erp-primary) !important;
}

.menu-state-bg .menu-item .menu-link.active,
.menu-state-bg .menu-item.here > .menu-link,
#kt_app_sidebar .menu-item .menu-link.active,
#kt_app_sidebar .menu-item.here > .menu-link {
    background-color: var(--erp-primary-light) !important;
}

.menu-state-color .menu-item .menu-link.active,
.menu-state-color .menu-item.here > .menu-link,
.menu-state-color .menu-item .menu-link:hover,
#kt_app_sidebar .menu-item .menu-link.active .menu-title,
#kt_app_sidebar .menu-item.here > .menu-link .menu-title,
#kt_app_sidebar .menu-item .menu-link.active .menu-icon,
#kt_app_sidebar .menu-item.here > .menu-link .menu-icon,
#kt_app_sidebar .menu-item .menu-link:hover .menu-title,
#kt_app_sidebar .menu-item .menu-link:hover .menu-icon {
    color: var(--erp-primary) !important;
}

.table-hover tbody tr:hover,
.dataTable tbody tr:hover {
    background-color: rgba(var(--erp-primary-rgb), .04) !important;
}

.dropdown-item.active,
.dropdown-item:active,
.select2-container--bootstrap5 .select2-results__option--highlighted {
    background-color: var(--erp-primary) !important;
    color: #FFFFFF !important;
}

html[data-bs-theme="dark"],
html[data-theme="dark"],
html.theme-dark {
    --erp-background: #0B1220;
    --erp-card: #111827;
    --erp-border: #243247;
    --erp-text-primary: #E5E7EB;
    --erp-text-secondary: #94A3B8;
    --erp-primary-light: rgba(37, 99, 235, .18);
}