:root {
    /* Main primary color */
    --bs-primary: #023781;
    --bs-primary-rgb: 2, 55, 129;

    /* Variants */
    --bs-primary-hover: #0349a3;
    --bs-primary-active: #022b66;
    --bs-primary-light: #e6effb;

    /* Metronic-specific */
    --kt-primary: #023781;
    --kt-primary-hover: #0349a3;
    --kt-primary-active: #022b66;
    --kt-primary-light: #e6effb;
    --kt-primary-inverse: #ffffff;
}

/* ===== Header ===== */
.app-header {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}

.app-header .menu-link {
    background: transparent !important;
    color: #fff !important;
    border-radius: 0 !important;
    padding: 0.75rem 1rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.app-header .menu-link:hover {
    color: var(--bs-primary-light) !important;
    background: transparent !important;
}

.app-header .menu-link.active {
    color: var(--bs-primary-light) !important;
    background: transparent !important;
    font-weight: 600;
    border-bottom: 2px solid var(--bs-primary-light);
}

.app-header .menu-item > a.active {
    background-color: var(--bs-primary-light) !important;
    color: var(--bs-primary) !important;
}

/* ===== Dropdown menu (user menu, etc.) ===== */
.menu-sub .menu-link {
    background: transparent !important;
    color: var(--bs-gray-800) !important;
    /* normal text */
    border-radius: 0.475rem !important;
    /* padding: 0.5rem 1rem; */
}

.menu-sub .menu-link:hover {
    background-color: var(--bs-primary-light) !important;
    color: var(--bs-primary) !important;
}

.menu-sub .menu-link.active {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}

/* ===== User info ===== */
.menu-sub .fw-bold.fs-5 {
    color: var(--bs-gray-900) !important;
}

.menu-sub .fw-semibold.text-muted.fs-7 {
    color: var(--bs-gray-600) !important;
}

/* ===== Sidebar / main nav (outside header) ===== */
.app-sidebar .menu-link {
    color: var(--bs-primary) !important;
}

.app-sidebar .menu-link:hover {
    background-color: var(--bs-primary-light) !important;
    color: var(--bs-primary-hover) !important;
}

.app-sidebar .menu-link.active {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}

/* ===== Buttons ===== */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-primary-hover);
    --bs-btn-hover-border-color: var(--bs-primary-hover);
    --bs-btn-active-bg: var(--bs-primary-active);
    --bs-btn-active-border-color: var(--bs-primary-active);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

/* ===== Links (global) ===== */
a {
    color: var(--bs-primary);
}

a:hover {
    color: var(--bs-primary-hover);
}

/* ===== Text, Backgrounds, Borders ===== */
.text-primary {
    color: var(--bs-primary) !important;
}

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

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


/* ===== Apply overrides only on mobile (max-width: 991px) ===== */
@media (max-width: 991.98px) {

    /* Panel background */
    .app-header-menu {
        background-color: var(--bs-primary) !important;
        color: #fff !important;
    }

    /* Links & titles inside mobile drawer */
    .app-header-menu .menu,
    .app-header-menu .menu-item,
    .app-header-menu .menu-link,
    .app-header-menu .menu-title {
        color: #fff !important;
        background: transparent !important;
    }

    .app-header-menu .menu-link:hover,
    .app-header-menu .menu-item .menu-link:hover {
        background-color: var(--bs-primary-hover) !important;
        color: #fff !important;
    }

    .app-header-menu .menu-link.active,
    .app-header-menu .menu-item .menu-link.active,
    .app-header-menu .menu-item.menu-active .menu-link,
    .app-header-menu .menu-item.menu-here-bg .menu-link,
    .app-header-menu .here>.menu-link {
        background-color: var(--bs-primary) !important;
        color: #fff !important;
        background-image: none !important;
        box-shadow: none !important;
        border-color: transparent !important;
    }

    .app-header-menu .menu-link::before,
    .app-header-menu .menu-link::after,
    .app-header-menu .menu-link.active::before,
    .app-header-menu .menu-link.active::after {
        content: none !important;
        background: none !important;
        box-shadow: none !important;
    }

    .app-header-menu .menu-link .menu-title,
    .app-header-menu .menu-title {
        color: #fff !important;
    }

    .app-header-menu .menu-sub .menu-link.active .menu-icon i {
        color: #fff !important;
    }
}