/*
===============================================
N2K SOFT - Responsive Design Global
Feuille de style CSS pour améliorer la responsivité
sur petits écrans et tablettes
===============================================
*/

/* ===== VARIABLES RESPONSIVE ===== */
:root {
    --breakpoint-mobile: 480px;
    --breakpoint-tablet-portrait: 768px;
    --breakpoint-tablet-landscape: 1024px;
    --breakpoint-desktop: 1200px;
    --breakpoint-desktop-large: 1400px;
    
    /* Espacements adaptatifs */
    --spacing-mobile: 8px;
    --spacing-tablet: 12px;
    --spacing-desktop: 20px;
    
    /* Tailles de police adaptatives */
    --font-size-mobile: 12px;
    --font-size-tablet: 13px;
    --font-size-desktop: 14px;
    
    /* Tailles d'éléments tactiles */
    --touch-target-min: 44px;
}

/* ===== RÈGLES GLOBALES RESPONSIVE ===== */

/* DHTMLX Layout - Responsive général */
@media (max-width: 1024px) {
    /* Réduire les largeurs fixes des layouts */
    [data-cell-id] {
        min-width: 0 !important;
    }
    
    /* Ajuster les paddings */
    .dhx_cell,
    .dhx_layout-cell {
        padding: var(--spacing-tablet) !important;
    }
}

/* ===== GRIDS DEVEXTREME - RESPONSIVE ===== */
@media (max-width: 1024px) {
    /* Grilles DevExtreme */
    .dx-datagrid {
        font-size: var(--font-size-tablet) !important;
    }
    
    /* Réduire les largeurs de colonnes minimales */
    .dx-datagrid-headers .dx-header-row td {
        padding: 8px 6px !important;
        font-size: var(--font-size-tablet) !important;
    }
    
    .dx-datagrid-rowsview .dx-row td {
        padding: 8px 6px !important;
        font-size: var(--font-size-tablet) !important;
    }
}

@media (max-width: 768px) {
    /* Grilles DevExtreme - Mobile */
    .dx-datagrid {
        font-size: var(--font-size-mobile) !important;
    }
    
    .dx-datagrid-headers .dx-header-row td {
        padding: 6px 4px !important;
        font-size: var(--font-size-mobile) !important;
    }
    
    .dx-datagrid-rowsview .dx-row td {
        padding: 6px 4px !important;
        font-size: var(--font-size-mobile) !important;
    }
    
    /* Masquer certaines colonnes non essentielles */
    .dx-datagrid .dx-column-hidden {
        display: none !important;
    }
}

/* ===== FORMULAIRES DHTMLX - RESPONSIVE ===== */
@media (max-width: 768px) {
    /* Formulaires DHTMLX */
    .dhx_form-group {
        margin-bottom: 12px !important;
    }
    
    .dhx_input,
    .dhx_select,
    .dhx_datepicker,
    .dhx_textarea {
        font-size: var(--font-size-mobile) !important;
        padding: 8px !important;
    }
    
    /* Labels empilés */
    .dhx_form-group__label {
        display: block !important;
        width: 100% !important;
        margin-bottom: 4px !important;
    }
}

/* ===== BOUTONS - RESPONSIVE ===== */
@media (max-width: 768px) {
    /* Boutons tactiles */
    .dhx_button,
    .btn,
    button {
        min-height: var(--touch-target-min) !important;
        min-width: var(--touch-target-min) !important;
        padding: 10px 16px !important;
        font-size: var(--font-size-mobile) !important;
    }
    
    /* Footer buttons */
    .footer-btn,
    ._n2kcompcojnal5_footer-btn,
    ._n2kcompcojnal3_footer-btn,
    ._n2kcompcojnal2_footer-btn {
        padding: 6px 10px !important;
        font-size: 11px !important;
    }
}

/* ===== HEADERS/FOOTERS - RESPONSIVE ===== */
@media (max-width: 768px) {
    /* Headers */
    .compcojnal-header,
    .compcojnal2-header,
    .compcojnal3-header,
    .compcojnal4-header,
    .compcojnal5-header {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 12px 15px !important;
    }
    
    .header-title h1 {
        font-size: 18px !important;
    }
    
    /* Footers */
    .compcojnal-footer,
    .compcojnal2-footer,
    .compcojnal3-footer,
    .compcojnal4-footer,
    ._n2kcompcojnal5_footer {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 10px 15px !important;
        text-align: center !important;
    }
    
    .footer-left,
    .footer-right,
    .footer-center {
        justify-content: center !important;
        width: 100% !important;
    }
}

/* ===== LAYOUTS DHTMLX - RESPONSIVE ===== */
@media (max-width: 1024px) {
    /* Layouts en colonnes -> passer en lignes */
    .dhx_layout-line[data-mode="cols"] {
        flex-direction: column !important;
    }
    
    /* Largeurs fixes -> 100% */
    .dhx_cell[style*="width"] {
        width: 100% !important;
        min-width: 0 !important;
    }
}

@media (max-width: 768px) {
    /* Empiler tous les layouts */
    .dhx_layout-cell {
        width: 100% !important;
        height: auto !important;
        min-height: 200px !important;
    }
    
    /* Réduire les hauteurs fixes */
    .dhx_cell[style*="height"] {
        height: auto !important;
        min-height: 150px !important;
    }
}

/* ===== CONTAINERS ET SECTIONS - RESPONSIVE ===== */
@media (max-width: 768px) {
    /* Containers principaux */
    .compcojnal-container,
    .compcojnal2-container,
    .compcojnal3-container,
    .compcojnal4-container,
    .gestion-comptes-container {
        padding: 10px !important;
        margin: 0 !important;
    }
    
    /* Sections */
    .form-section,
    .section-header {
        padding: 12px !important;
        margin-bottom: 10px !important;
    }
    
    /* Form rows */
    .form-row {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .form-group {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* ===== TABLES ET GRIDS - RESPONSIVE ===== */
@media (max-width: 768px) {
    /* Tables avec scroll horizontal */
    .table-responsive,
    .dx-datagrid {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Masquer les colonnes non essentielles sur mobile */
    .table-responsive .col-hidden-mobile {
        display: none !important;
    }
}

/* ===== MODALES - RESPONSIVE ===== */
@media (max-width: 768px) {
    /* Modales plein écran sur mobile */
    .modal-overlay .modal-content,
    .dhx_window {
        width: 95% !important;
        max-width: 95% !important;
        height: 90% !important;
        margin: 0 !important;
        border-radius: 8px !important;
    }
    
    .modal-body {
        padding: 15px !important;
        font-size: var(--font-size-mobile) !important;
    }
}

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

/* Masquer sur petits écrans */
@media (max-width: 768px) {
    .hide-mobile {
        display: none !important;
    }
    
    .show-mobile {
        display: block !important;
    }
}

/* Masquer sur tablettes */
@media (max-width: 1024px) {
    .hide-tablet {
        display: none !important;
    }
}

/* Afficher uniquement sur desktop */
@media (min-width: 1025px) {
    .show-desktop-only {
        display: block !important;
    }
    
    .hide-desktop {
        display: none !important;
    }
}

/* ===== TEXT RESPONSIVE ===== */
@media (max-width: 768px) {
    h1 { font-size: 22px !important; }
    h2 { font-size: 20px !important; }
    h3 { font-size: 18px !important; }
    h4 { font-size: 16px !important; }
    p, span, div, td, th { font-size: var(--font-size-mobile) !important; }
}

/* ===== SCROLL OPTIMIZATION ===== */
@media (max-width: 1024px) {
    /* Optimisation du scroll sur mobile */
    * {
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Améliorer les performances de scroll */
    .dx-datagrid-rowsview,
    .dhx_cell {
        will-change: scroll-position;
    }
}

/* ===== VIEWPORT META TAG SUPPORT ===== */
@supports (width: 100vw) {
    /* Utiliser viewport units si supporté */
    .responsive-width {
        width: min(100%, 1200px);
    }
}