:root {

    --vz-primary: #405189;
    --vz-primary-dark: #364474;
    --vz-primary-light: #555c72;
    --vz-primary-rgb: 64, 81, 137;
    --vz-primary-bg-subtle: #d9dee8;
    --vz-primary-border-subtle: #b3bdca;
    --vz-primary-text-emphasis: #1a2037;

    /* Header Overrides */
    --vz-header-bg: var(--vz-primary);
    --vz-header-item-color: #ffffff;
    --vz-header-item-sub-color: #d9dee8;
    --vz-header-item-bg: rgba(255, 255, 255, 0.1);
    --vz-topbar-user-bg: rgba(255, 255, 255, 0.1);
    --vz-topbar-search-bg: rgba(255, 255, 255, 0.1);

    /* Sidebar Overrides */
    --vz-vertical-menu-bg: var(--vz-primary);
    --vz-vertical-menu-border: var(--vz-primary);
    --vz-vertical-menu-item-color: rgba(255, 255, 255, 0.7);
    --vz-vertical-menu-item-hover-color: #ffffff;
    --vz-vertical-menu-item-active-color: #ffffff;
    --vz-vertical-menu-item-active-bg: rgba(255, 255, 255, 0.15);
    --vz-vertical-menu-sub-item-color: rgba(255, 255, 255, 0.6);
    --vz-vertical-menu-sub-item-hover-color: #ffffff;
    --vz-vertical-menu-sub-item-active-color: #ffffff;
    --vz-vertical-menu-title-color: rgba(255, 255, 255, 0.5);
    --vz-twocolumn-menu-iconview-bg: var( --vz-primary-dark);
}

/* Force colors on specific layout modes */
[data-topbar=dark] #page-topbar {
    background-color: var(--vz-primary) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    --vz-header-item-bg: rgba(255, 255, 255, 0.1) !important;
}

.topbar-user {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.topbar-user:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
}

.user-name-text {
    color: #ffffff !important;
}

.user-name-sub-text {
    color: #d9dee8 !important;
}
button:disabled{
 background: var(--vz-primary) !important;
}
[data-sidebar=dark] .navbar-menu {
    background: var(--vz-primary) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-sidebar=dark] .navbar-brand-box {
    background: var(--vz-primary) !important;
}

/* Header Refinement */
.navbar-header {
    position: relative;
}

.header-project-name {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

@media (max-width: 991.98px) {
    .header-project-name {
        display: none !important;
    }
}

.header-item {
    color: #ffffff !important;
}

.header-item i {
    color: #ffffff !important;
}

.hamburger-icon span {
    background-color: #ffffff !important;
}

.navbar-menu .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.7) !important;
    transition: all 0.2s ease-in-out !important;
}

.navbar-menu .navbar-nav .nav-link:hover {
    color: #ffffff !important;
}

.navbar-menu .navbar-nav .nav-link.active {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
}

.navbar-menu .navbar-nav .nav-link i {
    color: rgba(255, 255, 255, 0.7) !important;
}

.navbar-menu .navbar-nav .nav-link:hover i,
.navbar-menu .navbar-nav .nav-link.active i {
    color: #ffffff !important;
}

.navbar-menu .navbar-nav .nav-sm .nav-link {
    color: rgba(255, 255, 255, 0.6) !important;
}

.navbar-menu .navbar-nav .nav-sm .nav-link:hover,
.navbar-menu .navbar-nav .nav-sm .nav-link.active {
    color: #ffffff !important;
}

.menu-title {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Scrollbar styling for sidebar */
#scrollbar::-webkit-scrollbar {
    width: 6px;
}

#scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

#scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}

#scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Topbar Shadow */
#page-topbar {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Sidebar Logo Area Height Match */
.navbar-brand-box {
    height: 70px !important;
    line-height: 70px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.text-primary {
    color: var(--vz-primary) !important;
}

.bg-primary {
    background-color: var(--vz-primary) !important;
}

/* --- Interaction Hovers --- */

/* Primary Button Hovers */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var( --vz-primary-dark) !important;
    border-color: var( --vz-primary-dark) !important;
    color: #ffffff !important;
}

/* Outline Button Hovers */
.btn-outline-primary:hover {
    background-color: var(--vz-primary) !important;
    border-color: var(--vz-primary) !important;
    color: #ffffff !important;
}

/* Soft Button Hovers */
.btn-soft-primary:hover {
    background-color: var(--vz-primary) !important;
    color: #ffffff !important;
}

/* Dropdown Item Hovers */
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(64, 81, 137, 0.1) !important;
    color: var(--vz-primary) !important;
}

/* Breadcrumb Hovers */
.breadcrumb-item a:hover {
    color: var( --vz-primary-dark) !important;
    text-decoration: underline !important;
}

/* General Link and Icon Button Hovers */
a.text-primary:hover,
.btn.text-primary:hover {
    color: var( --vz-primary-dark) !important;
}

/* Header & Sidebar Toggle Hovers */
#topnav-hamburger-icon:hover,
.btn-topbar:hover,
.btn-ghost-secondary:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

.dropdown-header {
    background-color: rgba(64, 81, 137, 0.05) !important;
    color: var(--vz-primary) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 12px 16px !important;
}

.dropdown-item i {
    color: var(--vz-primary) !important;
    font-size: 16px !important;
    vertical-align: middle !important;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--vz-primary) !important;
    color: #ffffff !important;
}

.dropdown-item.active i,
.dropdown-item:active i {
    color: #ffffff !important;
}

/* Badge Theming */
.bg-secondary {
    background-color: #5d71b3 !important;
    /* Lighter navy/blue */
}

.bg-info {
    background-color: #d9dee8 !important;
    /* Very light primary tint */
    color: var(--vz-primary) !important;
}

/* Select2 Global Overrides */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--vz-primary) !important;
    color: white !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: rgba(64, 81, 137, 0.1) !important;
    color: var(--vz-primary) !important;
}

.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--multiple:focus {
    border-color: var(--vz-primary) !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--vz-primary) !important;
    outline: none !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--vz-primary) !important;
    border-color: var(--vz-primary) !important;
    color: white !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: white !important;
    margin-right: 5px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #eee !important;
    background-color: transparent !important;
}

/* DataTables Global Overrides */
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
    color: var(--vz-primary) !important;
    opacity: 1 !important;
}

.table-hover tbody tr:hover {
    background-color: rgba(64, 81, 137, 0.05) !important;
}

.page-item.active .page-link {
    background-color: var(--vz-primary) !important;
    border-color: var(--vz-primary) !important;
    color: #fff !important;
}

.page-link {
    color: var(--vz-primary);
}

.page-link:hover {
    background-color: rgba(64, 81, 137, 0.1) !important;
    border-color: #dee2e6 !important;
    color: var(--vz-primary) !important;
}

.page-item.active .page-link:hover {
    background-color: var( --vz-primary-dark) !important;
    border-color: var( --vz-primary-dark) !important;
    color: #ffffff !important;
}

#buttons-datatables_wrapper .dt-buttons button {
    border: 1px solid #eee;
    background-color: var(--vz-primary);
    color: #fff;
    padding: 4px 12px;
    border-radius: 3px;
    transition: all 0.2s ease-in-out;
}

#buttons-datatables_wrapper .dt-buttons button:hover {
    background-color: var( --vz-primary-dark);
}

#buttons-datatables_wrapper .dt-buttons {
    float: right !important;
    margin-bottom: 10px;
}

#buttons-datatables_wrapper #buttons-datatables_paginate {
    float: right !important;
    margin-top: -20px;
}

#buttons-datatables_wrapper #buttons-datatables_filter {
    margin-left: 15px;
    display: inline-flex;
}

#buttons-datatables_wrapper #buttons-datatables_length {
    float: left;
    display: flex;
}

#buttons-datatables_wrapper tbody button svg {
    height: 16px;
    width: 16px;
}

/* Form Controls Focus State */
.form-control:focus,
.form-select:focus {
    border-color: var(--vz-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(64, 81, 137, 0.25) !important;
}

.roles-checkbox-group .form-check {
    padding-left: 35px !important;
}

.roles-checkbox-group {
    background-color: rgba(64, 81, 137, 0.11);
    border-radius: 8px;
    margin-bottom: 10px;
    margin-left: 0px;
}