/* ========================================
    RESPONSIVE DESIGN SYSTEM - Modern & Professional
======================================== */

/* ========================================
    BREAKPOINTS MODERNES
    xs: 0-479px (Petits smartphones)
    sm: 480-767px (Smartphones)
    md: 768-991px (Tablettes)
    lg: 992-1199px (Petits laptops)
    xl: 1200-1599px (Ordinateurs de bureau)
    2xl: 1600px+ (Grands écrans)
======================================== */
@media (min-width: 340px) and (max-width: 740px) {
    #kt_app_toolbar_container a span,
    [data-kt-product-table-toolbar="base"] .span-text{
        display: none !important;
    }

    [data-kt-product-table-toolbar="base"] .svg-icon{
        margin-right: 0 !important;
    }

    #kt_app_toolbar_container a i{
        margin-right: -3px !important;
    }

    .top-5-products, .products-by-category, .top-profitable-products {
        margin-top: 9% !important;
    }

    .btn-add-product {
        width: auto !important;
    }

    .page-title{
        margin-right: 0 !important;
    }

    #kt_app_toolbar{
        padding-bottom: 0 !important;
    }

    /* Appliquer le scroll horizontal à tous les DataTables */
    .dataTables_wrapper,
    .dataTables_wrapper table,
    .dataTables_wrapper .dataTables_scroll,
    .dataTables_wrapper .dataTables_scrollBody,
    table.dataTable,
    #kt_ecommerce_products_table,
    #kt_ecommerce_products_table_wrapper,
    #kt_ecommerce_products_wrapper,
    #monthlyTable,
    #vehiclesFleetTable,
    #kt_table_vehicles {
        overflow-x: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-x pan-y !important;
        white-space: nowrap !important;
        display: block !important;
        max-width: 100vw !important;
        min-width: auto !important;
    }

    /* S'assurer que les cellules des tables DataTables ne se cassent pas */
    .dataTables_wrapper table th,
    .dataTables_wrapper table td,
    table.dataTable th,
    table.dataTable td {
        white-space: nowrap !important;
    }

    /* Le card-body qui contient les DataTables doit permettre le scroll */
    .card-body .dataTables_wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        width: 100% !important;
    }

    .auth-mobile-logo {
        margin-bottom: auto !important;
        padding: 5px !important;
    }

    .auth-input--with-icon{
        padding-left: 3rem !important;
    }

    .auth-password-toggle{
        width: auto !important;
    }

    .auth-bottom-footer-content{
        flex-direction: row !important;
    }

    /* Transformer la sidebar en menu hamburger */
    /* Le système de drawer masque [data-kt-drawer=true] par défaut avec display: none */
    /* On doit s'assurer que la sidebar est visible et positionnée correctement */

    /* Masquer la sidebar par défaut avec transform */
    #kt_app_sidebar {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        height: 100vh !important;
        z-index: 1050 !important;
        width: 280px !important;
        max-width: 280px !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* Masquer la sidebar quand le drawer est fermé */
    #kt_app_sidebar:not(.drawer-on) {
        transform: translateX(-100%) !important;
    }

    /* Afficher la sidebar quand le drawer est ouvert */
    /* Le système ajoute la classe drawer-on et data-kt-drawer-app-sidebar="on" sur le body */
    body[data-kt-drawer-app-sidebar="on"] #kt_app_sidebar,
    body[data-kt-drawer="on"] #kt_app_sidebar,
    #kt_app_sidebar.drawer-on {
        display: flex !important;
        transform: translateX(0) !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Masquer complètement le bouton de minimisation de la sidebar */
    #kt_app_sidebar_toggle {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    /* Afficher et styliser le bouton hamburger dans le header */
    #kt_app_sidebar_mobile_toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        z-index: 1050 !important;
    }

    /* S'assurer que le conteneur du bouton hamburger est visible */
    .d-lg-none {
        display: flex !important;
    }

    /* Overlay pour le drawer - améliorer le style */
    .drawer-overlay {
        background: rgba(0, 0, 0, 0.5) !important;
        backdrop-filter: blur(4px) !important;
        -webkit-backdrop-filter: blur(4px) !important;
        z-index: 1040 !important;
        transition: opacity 0.3s ease !important;
    }

    /* Empêcher le scroll du body quand le drawer est ouvert */
    body[data-kt-drawer-app-sidebar="on"],
    body[data-kt-drawer="on"] {
        overflow: hidden !important;
    }
}




/* --- Extra Small: Petits smartphones (≤479px) --- */
@media (max-width: 479px) {
    /* Typographie adaptée */
    body {
        font-size: 14px;
    }

    h1 {
        font-size: 1.5rem;
    }

    h2 {
        font-size: 1.25rem;
    }

    h3 {
        font-size: 1.125rem;
    }

    /* Padding réduit */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Boutons pleine largeur */
    .btn,
    button {
        width: 100%;
        /* padding: 0.75rem 1rem; */
    }

    /* Cartes empilées */
    /* .card,
    .modal-content {
        margin: 0.5rem;
        border-radius: 10px;
    } */
}

/* --- Small: Smartphones (480px - 767px) --- */
@media (min-width: 480px) and (max-width: 767px) {
    /* Typographie */
    body {
        font-size: 15px;
    }

    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    /* Grilles 1 colonne */
    .grid,
    .dashboard-stats {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* Navigation mobile */
    .navbar,
    .toolbar {
        flex-direction: column;
        gap: 0.75rem;
    }

    /* Inputs et formulaires */
    input,
    select,
    textarea {
        font-size: 16px; /* Évite le zoom automatique sur iOS */
    }
}

/* --- Medium: Tablettes (768px - 991px) --- */
@media (min-width: 768px) and (max-width: 991px) {
    /* Grilles 2 colonnes */
    .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }

    /* Container responsive */
    .container {
        max-width: 720px;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    /* Cartes côte à côte */
    .dashboard-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }

    /* Modal adapté */
    /* .modal-content {
        width: 85%;
        max-width: 700px;
    } */

    /* Toolbar horizontal */
    .toolbar {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* --- Large: Petits laptops (992px - 1199px) --- */
@media (min-width: 992px) and (max-width: 1199px) {
    /* Container medium */
    .container {
        max-width: 960px;
        padding-left: 2rem;
        padding-right: 2rem;
    }

    /* Grilles 3 colonnes */
    .grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }

    .dashboard-stats {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Sidebar visible */
    .sidebar {
        width: 260px;
    }

    /* Modal large */
    /* .modal-content {
        width: 80%;
        max-width: 850px;
    } */

    #excelTable{
        margin-top: 0.1rem !important;
        margin-bottom: 1.5rem !important;
    }
}

/* --- Extra Large: Ordinateurs de bureau (1200px - 1599px) --- */
@media (min-width: 1200px) and (max-width: 1599px) {
    /* Container large */
    .container {
        max-width: 1140px;
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }

    /* Grilles 4 colonnes */
    .grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.75rem;
    }

    .dashboard-stats {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }

    /* Layout optimal */
    .main-layout {
        display: grid;
        grid-template-columns: 280px 1fr;
        gap: 2rem;
    }
}

/* --- 2XL: Grands écrans (≥1600px) --- */
@media (min-width: 1600px) {
    /* Container très large */
    .container {
        max-width: 1400px;
        padding-left: 3rem;
        padding-right: 3rem;
    }

    /* Grilles 5+ colonnes */
    .grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 2rem;
    }

    .dashboard-stats {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }

    /* Typographie grande */
    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 2rem;
    }

    /* Spacing généreux */
    section {
        padding: 3rem 0;
    }
}

/* ========================================
    UTILITAIRES RESPONSIVE
======================================== */

/* Visibilité conditionnelle */
.hidden-mobile {
    display: none;
}

@media (min-width: 768px) {
    .hidden-mobile {
        display: block;
    }

    .hidden-desktop {
        display: none;
    }
}

/* Ordre flexible mobile */
@media (max-width: 767px) {
    .mobile-order-1 { order: 1; }
    .mobile-order-2 { order: 2; }
    .mobile-order-3 { order: 3; }
}

/* Scroll horizontal pour tableaux */
@media (max-width: 991px) {
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 600px;
    }

    #kt_app_sidebar_toggle{
        display: none !important;
    }

    #kt_app_sidebar{
        box-shadow: none !important;
        position: fixed !important;
    }

    .status-badge {
        font-size: 8px !important;
        padding: 4px 8px !important;
    }

    .select2-container--bootstrap5 .select2-selection__clear {
        display: none !important;
    }

    #kt_app_content_container{
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    #excelTable{
        margin-top: 0.1rem !important;
        margin-bottom: 1.5rem !important;
    }

    #excelTable div.btn-group{
        display: block !important;
    }

    #excelTable div.btn-group button{
        text-align: left !important;
    }
}

/* Touch targets (Minimum 44x44px pour accessibilité mobile) */
@media (max-width: 767px) {
    a.active-activity{
        min-height: auto !important;
        min-width: auto !important;
    }

    #kt_header_user_menu_toggle{
        margin-left: 1rem !important;
    }

    #kt_app_sidebar_toggle{
        display: none !important;
    }

    #kt_app_sidebar{
        box-shadow: none !important;
        position: fixed !important;
    }

    #kt_app_content_container{
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    #excelTable{
        margin-top: 0.1rem !important;
    }

    #excelTable div.btn-group{
        display: block !important;
    }

    #excelTable div.btn-group button{
        text-align: left !important;
    }

    #monthlyTable, #vehiclesFleetTable, #kt_table_vehicles {
        overflow-x: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
        white-space: nowrap;
        display: block;
        max-width: 100vw;
        min-width: auto !important;
    }

    #vehiclesFleetTable_info {
        display: none !important;
    }
}

/* ========================================
    MONTHLY TABLE - Sticky Header & First Column
======================================== */

/* Container du tableau avec scroll horizontal et vertical */
.table-responsive {
    position: relative;
}

/* S'assurer que le conteneur permet le scroll horizontal */
.table-responsive[style*="overflow-y"] {
    overflow-x: auto !important;
}

/* Container du tableau */
#monthlyTable {
    position: relative;
}

/* En-tête sticky */
#monthlyTable thead {
    position: sticky;
    top: 0;
    z-index: 20;
}

#monthlyTable thead th {
    position: sticky;
    top: 0;
    background-color: inherit;
}

#kt_app_content_container button[data-bs-target="#modalAddVehicle"]{
    width: auto !important;
}

/* button,
a,
input[type="button"],
input[type="submit"] {
    min-height: 44px;
    min-width: 44px;
} */

/* Première colonne sticky (en-tête) - doit être sticky horizontalement ET verticalement */
#monthlyTable thead th:first-child {
    position: sticky;
    left: 0;
    top: 0;
    z-index: 22;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1), 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Première colonne sticky (corps du tableau) */
#monthlyTable tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 10;
    background-color: inherit;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}

/* Première colonne de la ligne de totaux - z-index plus élevé */
#monthlyTable tbody tr:last-child td:first-child {
    z-index: 11;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1), 0 -2px 5px rgba(0, 0, 0, 0.1);
}

/* Assurer que les cellules de la première colonne gardent leur background */
#monthlyTable tbody tr:nth-child(even) td:first-child {
    background-color: #BBDEFB !important;
}

#monthlyTable tbody tr:nth-child(odd) td:first-child {
    background-color: #C8E6C9 !important;
}

/* Ligne de totaux - première colonne */
#monthlyTable tbody tr:last-child td:first-child {
    background-color: #BBDEFB !important;
}

/* Assurer que l'en-tête de la première colonne garde son background */
#monthlyTable thead th:first-child {
    background-color: #A5D6A7 !important;
}

/* Mobile: ajustements supplémentaires */
@media (max-width: 767px) {
    #monthlyTable thead th:first-child,
    #monthlyTable tbody td:first-child {
        min-width: 150px !important;
    }
}

/* ========================================
    RESPONSIVE SIDEBAR IMPROVEMENTS
======================================== */

/* Mobile: Sidebar overlay amélioré */
@media (max-width: 991px) {
    [data-kt-drawer="true"][data-kt-drawer-name="app-sidebar"] {
        z-index: 1050;
    }

    /* Overlay pour mobile */
    .drawer-overlay {
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(4px);
    }
}

/* Amélioration de la responsivité générale */
@media (max-width: 767px) {
    /* Cards responsive */
    .card {
        margin-bottom: 1rem;
    }

    /* Tables responsive */
    .table-responsive {
        border-radius: 8px;
        overflow: hidden;
    }

    /* Modals responsive */
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }

    /* Forms responsive */
    .form-control,
    .form-select {
        font-size: 16px; /* Évite le zoom sur iOS */
    }

    /* Buttons stack on mobile */
    .btn-group,
    .btn-toolbar {
        flex-direction: column;
        width: 100%;
    }

    .btn-group .btn,
    .btn-toolbar .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

/* Tablet optimizations */
@media (min-width: 768px) and (max-width: 991px) {
    .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .card-body {
        padding: 1.25rem;
    }
}

/* Desktop large screen optimizations */
@media (min-width: 1400px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1320px;
    }
}