/**
 * 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 */
}

/* ─── Responsive global ─────────────────────────────────────────────────── */

/* Champ de recherche : pleine largeur sur mobile, fixe à 250px sinon */
.search-input-responsive {
    width: 100%;
}
@media (min-width: 576px) {
    .search-input-responsive {
        width: 250px;
    }
}

/* Toolbar : wrapping sur mobile pour éviter le débordement */
@media (max-width: 767.98px) {
    #kt_app_toolbar_container {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    #kt_app_toolbar_container .page-title {
        width: 100%;
    }

    /* Boutons d'action : pleine largeur sur très petit écran */
    #kt_app_toolbar_container .btn {
        font-size: 0.8rem;
        padding: 0.4rem 0.75rem;
    }

    /* Filtres de formulaire : empiler en colonne */
    .filter-btn-h {
        height: auto !important;
    }

    /* Cards stat : padding réduit */
    .card-body.p-4 {
        padding: 1rem !important;
    }
}

/* Tableaux : toujours scrollables horizontalement */
.table-responsive {
    -webkit-overflow-scrolling: touch;
}

/* Boutons d'actions groupés : toujours enroulables */
.d-flex.gap-3,
.d-flex.gap-2 {
    flex-wrap: wrap;
}