/* 
 * UIergo Responsive Styles
 * Inclut TOUS les fichiers responsive/*.css
 */


/* === RESPONSIVE: responsive-actions.css === */
/* UIergo - Boutons d'Action Responsive */
/* Zones tactiles optimisées pour mobile (WCAG: 44x44px minimum) */
/* Extrait de actions-responsive.js pour séparation CSS/JS */

/* Mobile ≤768px */
@media (max-width: 768px) {
    .dropdown-content {
        padding: 8px !important;
    }

    .butActionRefused, .butAction, .butAction:link, .butAction:visited, .butAction:hover, .butAction:active, .butActionDelete, .butActionDelete:link, .butActionDelete:visited, .butActionDelete:hover, .butActionDelete:active {
        display : flex !important;
        align-items : center !important;
    }
    /* Sticky mode: fixer les actions en bas de l'écran */
    .uiergo-actions-sticky {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9999 !important;
        background: #fff !important;
        border-top: 2px solid #ddd !important;
        padding: 2px !important;
        margin: 0 !important;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 4px 6px !important;
        
    }
    
    /* Réserver l'espace pour éviter que le contenu soit caché */
    body.uiergo-has-sticky-actions {
        padding-bottom: 80px !important;
    }
    
    /* Améliorer les boutons d'action pour le tactile */
    .uiergo-touch-action {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 10px 16px !important;
        font-size: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        white-space: nowrap !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        vertical-align: middle !important;
        line-height: 1.4 !important;
    }
    
    /* Boutons avec icône seulement: les rendre carrés et plus gros */
    .uiergo-icon-only-action {
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        font-size: 18px !important;
    }
    
    /* Regrouper les actions sur plusieurs lignes si nécessaire */
    .tabsAction, .tabsActionNoBottom {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 4px 6px !important;
        padding: 10px !important;
    }
    
    /* Réduire margin-bottom des boutons dans sticky (override thème Dolibarr 1.4em) */
    div.tabsAction > a.butAction,
    div.tabsAction > a.butActionRefused,
    div.tabsAction > a.butActionDelete,
    div.tabsAction > span.butAction,
    div.tabsAction > span.butActionRefused,
    div.tabsAction > span.butActionDelete,
    div.tabsAction > div.divButAction > span.butAction,
    div.tabsAction > div.divButAction > span.butActionDelete,
    div.tabsAction > div.divButAction > span.butActionRefused,
    div.tabsAction > div.divButAction > a.butAction,
    div.tabsAction > div.divButAction > a.butActionDelete,
    div.tabsAction > div.divButAction > a.butActionRefused {
        margin-bottom: 0.4em !important;
    }
    
    /* Actions en mode non-sticky: les centrer */
    .tabsAction:not(.uiergo-actions-sticky),
    .tabsActionNoBottom:not(.uiergo-actions-sticky) {
        margin: 15px auto !important;
        text-align: center !important;
    }
}

/* Desktop ≥769px */
@media (min-width: 769px) {
    /* Sur desktop, désactiver le mode sticky */
    .uiergo-actions-sticky {
        position: static !important;
        box-shadow: none !important;
        border-top: none !important;
        background: transparent !important;
    }
}


/* === RESPONSIVE: responsive-menu-top.css === */
/* UIergo - Menu Top Tactile Responsive */
/* Scroll horizontal + zones tactiles agrandies + dropdowns inclus */

/* BREAKPOINTS :
   - Mobile ≤ 768px : Menu top responsive avec scroll horizontal + icônes tactiles
   - Desktop > 768px : Menu top natif Dolibarr
*/

/* Mobile et Tablette ≤ 768px */
@media (max-width: 768px) {
    /* Forcer largeur 100% sur body et conteneurs parents */
    body,
    html {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: auto !important; /* Permettre scroll horizontal si popups débordent */
    }
    
    #id-container,
    .id-container,
    body > div,
    #id-top-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 50px 0 0 0 !important;
        padding: 0 !important;
    }
    
    /* Conteneur global scroll horizontal - inclut .tmenu + dropdowns */
    #id-top {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        width: fit-content !important;
        max-width: 100vw !important;
        /* CENTRER le menu top */
        margin: 0 auto !important;
        padding: 4px 8px 4px 8px !important;
        gap: 4px;
        align-items: center;
        box-sizing: border-box;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        /* Z-INDEX CRITIQUE : Au-dessus du sidebar (1070) et de tout */
        z-index: 1090 !important;
        /* Forcer le scroll jusqu'au bout */
        scroll-padding-right: 20px;
    }
    
    /* S'assurer que TOUS les éléments du menu top sont visibles et scrollables */
    #id-top > *,
    #id-top .tmenu,
    #id-top #topmenu-login-dropdown,
    #id-top #topmenu-bookmark-dropdown,
    #id-top #topmenu-quickadd-dropdown,
    #id-top .login_block_user,
    #id-top .atoplogin,
    #id-top .dropdown {
        flex-shrink: 0 !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        /* Assurer qu'ils ne sont jamais coupés */
        min-width: fit-content !important;
    }
    
    /* FORCER le menu user/login à TOUJOURS être visible et accessible */
    #topmenu-login-dropdown,
    .atoplogin,
    .login_block_user,
    div.login_block {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        /* CRITIQUE : Annuler le position: absolute du thème MD */
        position: relative !important;
        top: auto !important;
        left: auto !important;
        /* Z-INDEX CRITIQUE : Au-dessus de tout */
        z-index: 1091 !important;
        /* Marge à droite pour s'assurer qu'il est accessible */
        margin-right: 0 !important;
        /* Annuler les contraintes de largeur/hauteur */
        width: auto !important;
        height: auto !important;
        background: transparent !important;
    }
    
    /* Forcer l'affichage même si body.sidebar-collapse (thème MD cache avec top: -1000px) */
    .sidebar-collapse div.login_block,
    body.sidebar-collapse div.login_block {
        top: auto !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 1091 !important;
    }
    
    /* Indicateur visuel de scroll (ombre à droite) */
    #id-top::after {
        content: '';
        position: sticky;
        right: 0;
        width: 30px;
        height: 100%;
        background: linear-gradient(to left, rgba(255,255,255,0.8), transparent);
        pointer-events: none;
        z-index: 1;
    }
    
    /* Items menu tactiles */
    .tmenu,
    .tmenu a, 
    .tmenu button,
    .tmenu span.tmenu {
        min-height: 44px !important;
        min-width: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        /*padding: 6px 8px !important;*/
        flex-shrink: 0;
        border-radius: 4px;
        white-space: nowrap;
    }
    
    /* Supprimer max-width de tmenucenter pour permettre les icônes tactiles */
    .tmenu .tmenucenter,
    .tmenucenter {
        max-width: none !important;
    }
    
    /* Texte menu MASQUÉ en mobile - icônes uniquement */
    .tmenu .tmenulabel,
    .tmenulabel,
    #id-top .tmenulabel,
    #id-top .tmenu .tmenulabel,
    span.tmenulabel {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Icônes agrandies - TOUTES les classes FontAwesome */
    #id-top .tmenu .fa, 
    #id-top .tmenu .fas, 
    #id-top .tmenu .far,
    #id-top .tmenu .fal,
    #id-top .tmenu .fab,
    #id-top .tmenu i[class*="fa-"],
    #id-top i.fa,
    #id-top i.fas,
    #id-top i.far,
    #id-top i.fal,
    #id-top i.fab {
        font-size: 1.5em !important;
        margin-right: 6px;
        min-width: 20px;
    }
    
    /* Dropdowns user/login/bookmarks inclus dans scroll */
    #topmenu-login-dropdown,
    #topmenu-bookmark-dropdown,
    #topmenu-quickadd-dropdown {
        min-height: 44px !important;
        min-width: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        padding: 10px !important;
        flex-shrink: 0;
    }
    
    /* Dropdown menus améliorés */
    .tmenu .dropdown-menu,
    #topmenu-login-dropdown .dropdown-menu {
        min-width: 200px !important;
        font-size: 14px !important;
    }
    
    .tmenu .dropdown-menu a,
    #topmenu-login-dropdown .dropdown-menu a {
        min-height: 44px !important;
        padding: 10px 15px !important;
        display: flex !important;
        align-items: center !important;
    }
    
    /* Barre recherche tactile */
    #search_field {
        min-height: 44px !important;
        font-size: 16px !important;
        padding: 10px 12px !important;
    }
    
    .button-search {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 10px !important;
    }
    
    /* Scrollbar discrète */
    #id-top::-webkit-scrollbar {
        height: 4px;
    }
    
    #id-top::-webkit-scrollbar-thumb {
        background: var(--colorbackhmenu1, rgba(0, 0, 0, 0.2));
        border-radius: 2px;
    }

    div.mainmenu.menu {
        top: 0px !important;
    }
}

/* Desktop > 768px */
@media (min-width: 769px) {
    /* Menu top natif Dolibarr */
    /* S'assurer que les textes restent visibles */
    .tmenu .tmenulabel,
    .tmenulabel {
        display: inline !important;
        visibility: visible !important;
        text-indent: 0 !important;
    }
}

/* === RESPONSIVE: responsive-sidebar-native.css === */
/* UIergo - Sidebar Natif Dolibarr - Slide-in avec Overlay */
/* Modernisation du menu latéral natif : glisse depuis la gauche avec overlay */
/* UNIQUEMENT en mode mobile/tablette - Ne touche PAS au desktop */

/* Mobile et tablette ≤768px (aligné sur le breakpoint natif Dolibarr) */
@media (max-width: 768px) {
    /* Menu latéral caché par défaut en mobile - Forcer avec !important pour compatibilité multi-thèmes */
    #id-left,
    .side-nav,
    aside.side-nav {
        position: fixed !important;
        top: 0 !important;
        left: -100% !important;
        width: 280px !important;
        height: 100vh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        /* Z-INDEX CRITIQUE : Au-dessus du menu top (1090) */
        z-index: 1100 !important;
        transition: left 0.3s ease !important;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3) !important;
        padding: 60px 15px 15px 15px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        background: var(--colorbackvmenu1, #fff) !important;
    }
    
    /* Menu visible quand body SANS la classe sidebar-collapse */
    body:not(.sidebar-collapse) #id-left,
    body:not(.sidebar-collapse) .side-nav,
    body:not(.sidebar-collapse) aside.side-nav {
        left: 0 !important;
    }
    
    /* S'assurer que tous les éléments du menu sont visibles */
    #id-left *,
    .side-nav *,
    aside.side-nav * {
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Menu items dans sidebar */
    #id-left .vmenu,
    .side-nav .vmenu,
    #id-left .menu_titre,
    .side-nav .menu_titre,
    #id-left .blockvmenupair,
    .side-nav .blockvmenupair,
    #id-left .blockvmenuimpair,
    .side-nav .blockvmenuimpair {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Menu user/login dans le sidebar sur mobile - FORCER AFFICHAGE */
    #id-left .login_block,
    .side-nav .login_block,
    #id-left .login_block_user,
    .side-nav .login_block_user,
    #id-left .blockvmenuend,
    .side-nav .blockvmenuend,
    #id-left .login_block_other,
    .side-nav .login_block_other,
    .side-nav .vmenu.login_block_user,
    .side-nav .vmenu.login_block_other {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        height: auto !important;
        max-height: none !important;
    }
    
    /* Liens dans menu user */
    #id-left .login_block a,
    .side-nav .login_block a,
    #id-left .login_block_user a,
    .side-nav .login_block_user a {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 8px 12px !important;
        color: var(--colortextlink, #000) !important;
    }
    
    /* Overlay semi-transparent UNIQUEMENT si sidebar existe (pages connectées) */
    body:not(.sidebar-collapse):has(#id-left)::before,
    body:not(.sidebar-collapse):has(.side-nav)::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1050;
        opacity: 1;
        transition: opacity 0.3s ease;
    }
    
    /* Bouton X géré par JavaScript - pas de ::after CSS */
    
    /* Empêcher le scroll du body UNIQUEMENT si sidebar existe */
    body:not(.sidebar-collapse):has(#id-left),
    body:not(.sidebar-collapse):has(.side-nav) {
        overflow: hidden !important;
    }
}

/* Desktop >768px - NE RIEN TOUCHER, laisser Dolibarr gérer 100% */
@media (min-width: 769px) {
    /* Aucun style - Dolibarr gère tout nativement */
}


/* === RESPONSIVE: responsive-tablelines-create.css === */
/* (Supprimé) Règles spécifiques mobile pour la ligne de création afin de revenir au style initial */


/* === RESPONSIVE: responsive-tabs.css === */
/* UIergo - Tabs Responsive avec Scroll Horizontal */
/* Une seule ligne avec défilement tactile comme le menu top */

/* Mobile et Tablette ≤768px */
@media (max-width: 768px) {
    /* Container tabs avec scroll horizontal */
    /* INCLURE tous les tabs y compris ceux dans popuptabset */
    .tabs,
    div.tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        width: 100% !important;
        max-width: 100vw !important;
        margin-top: 18px !important;
        margin-bottom: 18px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 4px 8px !important;
        gap: 4px;
        align-items: center;
        box-sizing: border-box;
    }
    
    /* Masquer complètement l'élément .tab qui contient le bouton "Plus ... (x)" */
    div[id^="moretabs"] .tab {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Afficher et repositionner le menu déroulant comme des tabs normaux */
    div[id^="moretabsList"] {
        display: flex !important;
        position: static !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        left: auto !important;
        right: auto !important;
        z-index: 1 !important;
    }
    
    /* Afficher tous les tabs du popuptabset en ligne scrollable */
    .popuptabset {
        display: flex !important;
        flex-direction: row !important;
        position: static !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 4px !important;
        width: auto !important;
    }
    
    /* Tabs dans popuptabset : même style que les autres */
    .popuptabset .popuptab {
        display: inline-flex !important;
        position: static !important;
        margin: 0 !important;
        width: auto !important;
    }
    
    .popuptabset .popuptab a {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
    
    /* Chaque onglet ne doit pas se réduire */
    .tabs a,
    div.tabs a,
    .tabs span,
    div.tabs span {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        display: inline-block !important;
    }
    
    /* Scrollbar discrète */
    .tabs::-webkit-scrollbar,
    div.tabs::-webkit-scrollbar {
        height: 4px;
    }
    
    .tabs::-webkit-scrollbar-thumb,
    div.tabs::-webkit-scrollbar-thumb {
        background: var(--colorbackhmenu1, rgba(0, 0, 0, 0.2));
        border-radius: 2px;
    }
}

/* Desktop >768px */
@media (min-width: 769px) {
    /* Comportement natif Dolibarr */
}