/*
Template Name: Velzon - Admin & Dashboard Template
Author: Themesbrand
Website: https://themesbrand.com/
Contact: support@themesbrand.com
File: Custom Css File
*/


:root, [data-sidebar="dark"], [data-sidebar="light"] {
    --vz-primary: #941b1b;
    --vz-primary-rgb: 148, 27, 27;
    --vz-primary-text: #fff;
    --vz-link-color: #941b1b;
    --vz-link-hover-color: #6a1414;    
    /* Sidebar Overrides for all themes */
    --vz-vertical-menu-bg: #8a0000;
    --vz-vertical-menu-bg-gradient: #8a0000;
    --vz-vertical-menu-item-color: rgba(255, 255, 255, 0.75);
    --vz-vertical-menu-item-hover-color: #ffffff;
    --vz-vertical-menu-item-active-color: #ffffff;
    --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;
    
    /* Topbar will use default light theme */
}

.bg-primary {
    background-color: #941b1b !important;
}

.text-primary {
    color: #941b1b !important;
}

.btn-primary {
    background-color: #941b1b !important;
    border-color: #941b1b !important;
}

.btn-primary:hover {
    background-color: #6a1414 !important;
    border-color: #6a1414 !important;
}

.btn-outline-primary {
    color: #941b1b !important;
    border-color: #941b1b !important;
}

.btn-outline-primary:hover {
    background-color: #941b1b !important;
    color: #fff !important;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: #941b1b !important;
}

/* Sidebar theme - KPU Maroon/Dark Red */
.app-menu {
    background: var(--vz-vertical-menu-bg-gradient, #8a0000) !important;
}

/* Fix sidebar header background overriding the gradient */
.app-menu .sidebar-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.app-menu .sidebar-header .logo-text {
    color: #fff !important;
}

/* Fix submenu backgrounds overriding the gradient */
.app-menu .metismenu ul {
    background: rgba(0, 0, 0, 0.15) !important;
}

.app-menu .metismenu li a {
    color: rgba(255, 255, 255, 0.75) !important;
}

.app-menu .metismenu li a:hover,
.app-menu .metismenu li a.active {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.app-menu .metismenu li.active > a {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
}

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

/* Toggle icon in sidebar */
.app-menu .toggle-icon i {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Topbar/Header subtle branding */
#page-topbar {
    border-bottom: 2px solid #941b1b;
}

/* Select2 sizing fix for Bootstrap 5 */
.select2-container .select2-selection--single {
    height: 38px !important;
    padding: 0.3rem 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.6;
    padding-left: 0;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px;
    right: 10px;
}
/* Custom Nav Tabs override to KPU red */
.nav-tabs-custom .nav-item .nav-link.active {
    color: #941b1b !important;
}
.nav-tabs-custom .nav-item .nav-link::after {
    background: #941b1b !important;
}
.nav-tabs-custom .nav-item .nav-link {
    color: #495057;
}
.nav-tabs-custom .nav-item .nav-link:hover {
    color: #941b1b;
}

/* Pagination overrides */
.pagination .page-item.active .page-link {
    background-color: #941b1b !important;
    border-color: #941b1b !important;
}
.pagination .page-item .page-link {
    color: #941b1b;
}

/* Generic primary overrides */
.border-primary {
    border-color: #941b1b !important;
}

/* Topbar hamburger toggle icon color fix */
.hamburger-icon span {
    background-color: #495057 !important;
}