/**
 * Application Custom Styles
 * 
 * Add your custom CSS here.
 * The Metronic theme styles are loaded separately in the layout.
 */

/* Custom application styles */
body {
    /* Your custom styles here */
}

/* Override Metronic styles if needed */

/* Fix submenu visibility - Remove background and color overrides */
/* Target the dropdown container first */
.menu-sub-lg-down-accordion,
.menu-sub-lg-dropdown {
    background-color: #ffffff !important; /* White background for dropdown */
}

/* Normal state */
.menu-sub-lg-down-accordion .menu-item .menu-link,
.menu-sub-lg-dropdown .menu-item .menu-link,
.app-header-menu .menu-sub .menu-item .menu-link {
    background-color: #ffffff !important; /* White background */
    color: #181C32 !important; /* Dark text color */
}

/* Hover state - NO background, just text color */
.menu-sub-lg-down-accordion .menu-item .menu-link:hover,
.menu-sub-lg-dropdown .menu-item .menu-link:hover,
.app-header-menu .menu-sub .menu-item .menu-link:hover,
.app-header-secondary .menu-sub .menu-item .menu-link:hover,
.app-header-secondary .menu-link:hover {
    background-color: transparent !important; /* NO background on hover */
    color: #181C32 !important; /* Dark text color */
}

/* Force no background on hover for menu-title inside header-secondary */
.app-header-secondary .menu-link:hover .menu-title,
.app-header-secondary .menu-sub .menu-item .menu-link:hover .menu-title {
    background-color: transparent !important; /* NO background on hover */
}

/* Ensure submenu items titles are visible and readable */
.menu-sub-lg-down-accordion .menu-item .menu-link .menu-title,
.menu-sub-lg-dropdown .menu-item .menu-link .menu-title,
.app-header-menu .menu-sub .menu-item .menu-link .menu-title {
    color: #181C32 !important; /* Dark text color */
}

/* Hover state for menu titles */
.menu-sub-lg-down-accordion .menu-item .menu-link:hover .menu-title,
.menu-sub-lg-dropdown .menu-item .menu-link:hover .menu-title,
.app-header-menu .menu-sub .menu-item .menu-link:hover .menu-title {
    color: #181C32 !important; /* Keep dark text on hover */
}

/* Menu icons visibility */
.menu-sub-lg-down-accordion .menu-item .menu-link .menu-icon,
.menu-sub-lg-dropdown .menu-item .menu-link .menu-icon,
.app-header-menu .menu-sub .menu-item .menu-link .menu-icon,
.menu-sub-lg-down-accordion .menu-item .menu-link .menu-icon i,
.menu-sub-lg-dropdown .menu-item .menu-link .menu-icon i,
.app-header-menu .menu-sub .menu-item .menu-link .menu-icon i {
    color: #181C32 !important;
}

.menu-sub-lg-down-accordion .menu-item .menu-link:hover .menu-icon,
.menu-sub-lg-dropdown .menu-item .menu-link:hover .menu-icon,
.app-header-menu .menu-sub .menu-item .menu-link:hover .menu-icon,
.menu-sub-lg-down-accordion .menu-item .menu-link:hover .menu-icon i,
.menu-sub-lg-dropdown .menu-item .menu-link:hover .menu-icon i,
.app-header-menu .menu-sub .menu-item .menu-link:hover .menu-icon i {
    color: #181C32 !important;
}

/* Active state should still be visible */
.menu-sub-lg-down-accordion .menu-item .menu-link.active,
.menu-sub-lg-dropdown .menu-item .menu-link.active,
.app-header-menu .menu-sub .menu-item .menu-link.active {
    background-color: #E8F4FD !important; /* Light blue background */
    color: #009EF7 !important; /* Primary color */
}

.menu-sub-lg-down-accordion .menu-item .menu-link.active .menu-title,
.menu-sub-lg-dropdown .menu-item .menu-link.active .menu-title,
.app-header-menu .menu-sub .menu-item .menu-link.active .menu-title {
    color: #009EF7 !important; /* Primary color */
}

.menu-sub-lg-down-accordion .menu-item .menu-link.active .menu-icon,
.menu-sub-lg-dropdown .menu-item .menu-link.active .menu-icon,
.app-header-menu .menu-sub .menu-item .menu-link.active .menu-icon,
.menu-sub-lg-down-accordion .menu-item .menu-link.active .menu-icon i,
.menu-sub-lg-dropdown .menu-item .menu-link.active .menu-icon i,
.app-header-menu .menu-sub .menu-item .menu-link.active .menu-icon i {
    color: #009EF7 !important; /* Primary color */
}