/**
 * Planning Pro - CSS Mobile Complémentaire
 * Version 3.2.0 - Corrections 22 Décembre 2025
 */

/* ========================================
   VARIABLES
   ======================================== */
:root {
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-top: env(safe-area-inset-top, 0px);
}

/* ========================================
   BASE
   ======================================== */
* {
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

/* Empêcher le zoom sur iOS quand on focus un input */
@media screen and (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ========================================
   FIX: TIME PICKER MOBILE - Fond blanc
   Force le thème clair pour le sélecteur d'heure Android/iOS
   ======================================== */
input[type="time"],
input[type="date"],
input[type="datetime-local"] {
    color-scheme: light !important;
    -webkit-appearance: none;
    background-color: white !important;
}

/* Forcer le thème clair sur toute la page pour les pickers natifs */
:root {
    color-scheme: light;
}

/* Style des inputs time dans les modales */
.fixed.inset-0 input[type="time"],
.modal input[type="time"] {
    color-scheme: light !important;
    background-color: white !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
}

/* ========================================
   PWA STANDALONE
   ======================================== */
@media all and (display-mode: standalone) {
    body {
        padding-top: var(--safe-area-top);
        margin: 0 !important;
        padding: 0 !important;
    }

    #root {
        margin-top: 0 !important;
        padding-top: env(safe-area-inset-top, 0px) !important;
    }

    /* FIX: FAB button positionnement en mode PWA */
    button.fixed.rounded-full.shadow-lg,
    .fixed.rounded-full.shadow-lg[class*="bottom"],
    button[class*="fixed"][class*="bottom"][class*="right"][class*="rounded-full"] {
        position: fixed !important;
        bottom: 96px !important;
        right: 16px !important;
        left: auto !important;
        z-index: 40 !important;
    }
}

/* FIX PWA - Supprimer tout margin-top sur #root */
#root {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ========================================
   MOBILE (< 768px)
   ======================================== */
@media screen and (max-width: 767px) {
    /* Ajustements généraux */
    body {
        overflow-x: hidden;
    }

    /* Boutons plus tactiles */
    button, .btn, a.rounded-lg {
        min-height: 44px;
    }

    /* Calendrier compact */
    .grid-cols-7 > div {
        min-height: 50px !important;
        font-size: 11px;
    }

    .grid-cols-7 .text-xs {
        font-size: 9px !important;
    }

    /* Cards */
    .card {
        border-radius: 12px;
        margin-top: 10px !important;
    }

    /* Modales */
    .fixed.inset-0.z-50 > div.bg-white,
    .fixed.inset-0.z-50 > div.rounded-2xl {
        max-height: 90vh !important;
        overflow-y: auto;
    }

    .modal-content,
    .fixed.inset-0.z-50 > div {
        margin-top: 22px !important;
    }

    /* Tableaux scrollables */
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ========================================
       BOUTONS D'ACTION DEVIS/FACTURES/CONTRATS
       ======================================== */
    /* Boutons d'action des devis/factures sur mobile */
    .qsb-styled-btn,
    .qsb-action-btn,
    .cv-action-btn {
        min-width: 32px !important;
        min-height: 32px !important;
        max-height: 36px !important;
        width: auto !important;
        padding: 6px 8px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 6px !important;
        font-size: 13px !important;
        margin: 2px !important;
        opacity: 1 !important;
        visibility: visible !important;
        flex-shrink: 0 !important;
    }

    /* Container des boutons d'action */
    .cv-table-actions,
    td .flex,
    td [class*="flex"],
    .qsb-actions-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }

    /* Boutons ContractsView spécifiques */
    .ct-btn {
        width: auto !important;
        min-width: fit-content !important;
        padding: 8px 12px !important;
        font-size: 12px !important;
    }

    /* Container boutons ContractTemplatesView */
    .ct-card-actions {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    /* Grilles stats 2 colonnes */
    .grid.grid-cols-2.md\:grid-cols-4 {
        gap: 8px !important;
    }

    .grid.grid-cols-2.md\:grid-cols-4 > div {
        padding: 12px !important;
    }

    .grid.grid-cols-2.md\:grid-cols-4 .text-4xl {
        font-size: 24px !important;
    }

    /* ========================================
       FIX 1: FICHE CLIENT - Email/Téléphone
       Grille 2 colonnes passe en 1 colonne sur mobile
       ======================================== */
    .bg-gray-50.rounded-lg.p-4 .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* Tous les grids 2 colonnes dans les modales passent en 1 colonne */
    .fixed.inset-0.z-50 .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* Sauf quand c'est explicitement col-span-2 */
    .fixed.inset-0.z-50 .grid.grid-cols-2 .col-span-2 {
        grid-column: span 1 !important;
    }

    /* ========================================
       FIX 2: SERVICE À LA PERSONNE
       Permettre le scroll horizontal dans l'en-tête
       ======================================== */
    /* Permettre le scroll horizontal pour les filtres et contrôles */
    .card-header .flex.items-center.gap-3,
    .card-header .flex.flex-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        padding-bottom: 8px;
    }

    /* Les cards ne coupent pas le contenu */
    .card {
        overflow-x: visible !important;
    }

    .bg-white.rounded-lg {
        overflow-x: visible !important;
    }

    /* Événements agenda - affichage complet */
    .card .flex.items-start.gap-3 {
        flex-wrap: wrap !important;
    }

    .card .flex.items-start.gap-3 > div:last-child {
        width: 100% !important;
        margin-top: 8px !important;
    }

    /* Statut (Terminé, etc.) sur nouvelle ligne */
    .card .flex.items-start.gap-3 .text-green-600,
    .card .flex.items-start.gap-3 .text-orange-600,
    .card .flex.items-start.gap-3 .text-red-600,
    .card .flex.items-start.gap-3 .rounded-full {
        margin-top: 4px !important;
    }

    /* ========================================
       FIX 3: PARAMÈTRES ENTREPRISE
       Bouton Supprimer sous le logo
       ======================================== */
    /* Conteneur logo + bouton supprimer */
    .flex.items-end.gap-4:has(img) {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    /* Bouton supprimer prend toute la largeur */
    .flex.items-end.gap-4:has(img) button,
    .flex.items-end.gap-4:has(img) .text-red-500 {
        margin-top: 8px !important;
    }

    /* Aperçu logo avec bouton supprimer en dessous */
    div:has(> img[alt*="logo"]) + button,
    div:has(> img[alt*="Aperçu"]) ~ .text-red-500,
    div:has(> img[alt*="Apercu"]) ~ .text-red-500 {
        display: block !important;
        margin-top: 10px !important;
    }

    /* ========================================
       FIX 4: TÂCHES - Espacement compact
       ======================================== */
    /* Réduction de l'espace entre les éléments dans Tâches */
    .space-y-2 > .bg-white.rounded-xl {
        margin-bottom: 0 !important;
    }

    /* Espace entre filtres et cards de tâches */
    .space-y-2 > .grid.gap-3 {
        margin-top: 8px !important;
    }

    /* ========================================
       FIX 5: COLLABORATEURS
       Espace entre boutons et recherche
       ======================================== */
    .card-body .flex.items-center.justify-between.flex-wrap.gap-3.mt-3 {
        margin-bottom: 16px !important;
    }

    .card-body > .flex.items-center.gap-3,
    .card-body > .flex.items-center.flex-wrap.gap-3 {
        margin-bottom: 16px !important;
    }

    .card-body .relative:has(input),
    .card-body > .relative {
        margin-top: 12px !important;
    }

    /* ========================================
       FIX 6: CLIENTS - Header et cartes
       ======================================== */
    /* Header Liste des clients - passer en colonne */
    .card-header:has(h2) {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    /* Titre + compteur sur une ligne */
    .card-header:has(h2) > .flex:first-child,
    .card-header h2 {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }

    /* Boutons Nouveau + Export sur ligne séparée */
    .card-header:has(h2) > .flex.gap-2,
    .card-header:has(h2) > .flex.gap-3 {
        width: 100% !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
    }

    /* Cartes clients - boutons sous le nom */
    .space-y-3 > div.flex.items-center.justify-between,
    .divide-y > div.flex.items-center.justify-between {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

    .space-y-3 > div.flex.items-center.justify-between > .flex.gap-2,
    .divide-y > div.flex.items-center.justify-between > .flex.gap-2 {
        width: 100% !important;
        justify-content: flex-start !important;
    }

    .clients-header-actions {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .clients-header-actions > .flex.gap-2 {
        width: 100% !important;
        justify-content: flex-start !important;
    }

    /* ========================================
       FIX 7: TABS / NAVIGATION
       ======================================== */
    .tabs-container,
    .subnav,
    .tab-header {
        margin-top: 18px !important;
    }

    /* ========================================
       FIX 13: BOUTONS CALENDRIER MOBILE
       Import/Export, Partager, Aujourd'hui
       ======================================== */
    /* Conteneur des boutons calendrier - wrap sur 2 lignes */
    .flex.gap-2.mb-4,
    .flex.gap-2.flex-wrap.mb-4 {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    /* Boutons calendrier plus compacts */
    .flex.gap-2.mb-4 > button,
    .flex.gap-2.flex-wrap.mb-4 > button {
        padding: 6px 10px !important;
        font-size: 12px !important;
        flex-shrink: 0 !important;
    }

    /* Bouton Aujourd'hui - pas de ml-auto sur mobile */
    .flex.gap-2.mb-4 > button:last-child {
        margin-left: 0 !important;
    }

    /* ========================================
       FIX 9: ONGLETS ORGANISATION (Mobile)
       Scroll horizontal pour les onglets
       ======================================== */
    /* Conteneur des onglets scrollable */
    .flex.gap-2.mb-4.overflow-x-auto,
    .flex.gap-2.mb-6.overflow-x-auto,
    .bg-white.rounded-2xl.shadow-sm.p-2.flex.gap-2,
    div[class*="bg-white"][class*="rounded"][class*="shadow"][class*="flex"][class*="gap"] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        flex-wrap: nowrap !important;
        padding-bottom: 4px !important;
    }

    /* Cacher la scrollbar mais garder le scroll */
    .flex.gap-2.mb-4.overflow-x-auto::-webkit-scrollbar,
    .flex.gap-2.mb-6.overflow-x-auto::-webkit-scrollbar,
    .bg-white.rounded-2xl.shadow-sm.p-2.flex.gap-2::-webkit-scrollbar {
        display: none !important;
    }

    /* Onglets individuels - ne pas rétrécir */
    .flex.gap-2 > button,
    .flex.gap-2 > div[class*="cursor-pointer"],
    .bg-white.rounded-2xl button,
    .bg-white.rounded-2xl > .flex > button {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        min-width: fit-content !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* Réduire un peu la taille des textes dans les onglets */
    .flex.gap-2 > button span,
    .flex.gap-2 > button {
        font-size: 13px !important;
    }

    /* Conteneur parent doit permettre le scroll */
    .space-y-4 > .bg-white.rounded-2xl,
    .space-y-6 > .bg-white.rounded-2xl {
        overflow: visible !important;
    }

    /* Fix spécifique pour la barre d'onglets Organisation */
    .p-2.flex.gap-2 {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Assurer que les emojis restent visibles */
    .flex.gap-2 button .mr-2,
    .flex.gap-2 button span:first-child {
        margin-right: 4px !important;
    }

    /* ========================================
       FIX 10: MODAL FINANCES (Événements familiaux)
       ======================================== */
    /* Grille Dépenses/Contributions en 1 colonne sur mobile */
    .finance-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Cards Dépenses et Contributions */
    .fixed.inset-0 .grid.grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* ========================================
       FIX 8: CONTENU PRINCIPAL
       ======================================== */
    main, .main-content, #root > div > main {
        padding-bottom: 80px !important;
        margin-bottom: 0 !important;
    }

    /* Menu sidebar mobile - fond opaque pleine largeur */
    aside, .sidebar, div[class*="sidebar"], div[class*="Menu"] {
        max-height: 100vh !important;
        overflow-y: auto !important;
        background-color: #ffffff !important;
        width: 100vw !important;
        max-width: 100vw !important;
    }

    /* FIX: Header du menu sticky avec fond opaque */
    aside > div:first-child,
    .sidebar > div:first-child,
    div[class*="sidebar"] > div:first-child,
    aside header,
    .sidebar header,
    aside [class*="sticky"],
    .sidebar [class*="sticky"],
    aside [class*="header"],
    .sidebar [class*="header"] {
        background-color: #ffffff !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
    }

    /* FIX: Menu mobile - z-index très élevé pour passer AU-DESSUS du header page */
    /* Overlay du menu */
    .fixed.inset-0.bg-black\/50,
    .fixed.inset-0.bg-black\/30,
    .fixed.inset-0[style*="background"],
    div.fixed.inset-0[class*="bg-"] {
        z-index: 99990 !important;
    }

    /* Menu sidebar - au-dessus de tout y compris le header principal */
    aside,
    aside.fixed,
    .sidebar,
    .sidebar.fixed,
    div[class*="sidebar"],
    div[class*="sidebar"].fixed,
    .fixed.inset-y-0,
    .fixed.top-0.left-0.h-full,
    .fixed.left-0.top-0.bottom-0 {
        z-index: 99999 !important;
        background-color: #ffffff !important;
    }

    /* Header principal de la page - z-index inférieur au menu */
    header.fixed,
    header.sticky,
    .header.fixed,
    .header.sticky,
    div[class*="header"].fixed,
    div[class*="header"].sticky,
    .bg-white.shadow.fixed,
    .bg-white.shadow.sticky {
        z-index: 999 !important;
    }

    /* ========================================
       FIX 12: BOUTON FAB (+ rond) MOBILE
       Force positionnement bas-droite
       ======================================== */
    /* Bouton FAB - forcer position bottom-right */
    button.fixed.rounded-full,
    .fixed.rounded-full.shadow-lg,
    button[class*="fixed"][class*="rounded-full"][class*="shadow"] {
        right: 16px !important;
        left: auto !important;
        bottom: 96px !important;
    }
}

/* Version PC : espace entre boutons et recherche */
.card-body > .flex.items-center.gap-3 + .relative,
.card-body > .flex.items-center.flex-wrap.gap-3 + .relative,
.card-body > div.flex + div.relative {
    margin-top: 16px !important;
}

/* ========================================
   FIX 11: MODALS DEVIS/FACTURES REACT
   Amélioration responsive pour les formulaires
   ======================================== */
@media screen and (max-width: 767px) {
    /* Modal principale - pleine largeur */
    .fixed.inset-0.z-50 > .bg-white.rounded-2xl {
        width: 95vw !important;
        max-width: 95vw !important;
        margin: 10px auto !important;
        max-height: 90vh !important;
    }

    /* Padding réduit dans le body du modal */
    .fixed.inset-0.z-50 .p-6 {
        padding: 12px !important;
    }

    /* Table des lignes - scroll horizontal */
    .fixed.inset-0.z-50 .overflow-x-auto,
    .fixed.inset-0.z-50 div:has(> table) {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .fixed.inset-0.z-50 table {
        min-width: 500px !important;
        table-layout: fixed !important;
    }

    /* En-têtes de table */
    .fixed.inset-0.z-50 table th {
        font-size: 11px !important;
        padding: 6px 4px !important;
        white-space: nowrap !important;
    }

    /* Cellules de table */
    .fixed.inset-0.z-50 table td {
        padding: 4px !important;
    }

    /* Inputs dans la table */
    .fixed.inset-0.z-50 table input,
    .fixed.inset-0.z-50 table select {
        font-size: 14px !important;
        padding: 8px 6px !important;
        min-width: 50px !important;
    }

    /* Colonne Description plus large */
    .fixed.inset-0.z-50 table td:first-child input,
    .fixed.inset-0.z-50 table input[placeholder*="Description"] {
        min-width: 150px !important;
    }

    /* Bouton supprimer ligne */
    .fixed.inset-0.z-50 table button.text-red-600,
    .fixed.inset-0.z-50 table td:last-child button {
        padding: 4px 8px !important;
        font-size: 14px !important;
    }

    /* Section des totaux */
    .fixed.inset-0.z-50 .bg-gray-50.rounded-lg {
        padding: 10px !important;
    }

    /* Lignes de totaux */
    .fixed.inset-0.z-50 .flex.justify-between.text-sm,
    .fixed.inset-0.z-50 .flex.justify-end .space-y-2 > div {
        font-size: 13px !important;
    }

    /* Total TTC plus visible */
    .fixed.inset-0.z-50 .text-lg.font-bold {
        font-size: 16px !important;
    }

    /* Boutons footer */
    .fixed.inset-0.z-50 .flex.justify-end.gap-3 {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .fixed.inset-0.z-50 .flex.justify-end.gap-3 button {
        width: 100% !important;
    }

    /* Header "Lignes du devis" + bouton */
    .fixed.inset-0.z-50 .flex.justify-between.items-center.mb-3 {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .fixed.inset-0.z-50 .flex.justify-between.items-center.mb-3 button {
        width: 100% !important;
    }

    /* Case SAP - plus compacte */
    .fixed.inset-0.z-50 .bg-gradient-to-r {
        padding: 12px !important;
    }

    .fixed.inset-0.z-50 .bg-gradient-to-r label {
        font-size: 14px !important;
    }

    .fixed.inset-0.z-50 .bg-gradient-to-r p {
        font-size: 12px !important;
    }
}

/* ========================================
   ANIMATIONS OPTIMISÉES
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* GPU acceleration */
.transform {
    will-change: transform;
}

/* ========================================
   PRINT
   ======================================== */
@media print {
    nav, aside, .fixed {
        display: none !important;
    }

    main {
        margin: 0 !important;
        width: 100% !important;
    }
}

/* ========================================
   FIX 14: MODIFIER ADRESSE EMAIL (Mobile)
   Bouton Modifier visible sous l'email
   ======================================== */
@media screen and (max-width: 767px) {
    /* Section email - passer en colonne */
    #change-email-section #email-display-mode > .flex.items-center.justify-between,
    #change-email-section .flex.items-center.justify-between {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    /* Bouton Modifier email - pleine largeur */
    #change-email-section #btn-change-email {
        width: 100% !important;
        justify-content: center !important;
        margin-top: 4px !important;
    }

    /* Adresse email - permettre le retour à la ligne */
    #change-email-section #current-email-display {
        word-break: break-all !important;
    }
}

/* ========================================
   FIX 15: CENTRE DE SÉCURITÉ (Mobile)
   Header, onglets et dernières connexions
   Version: 02/01/2026
   ======================================== */
@media screen and (max-width: 767px) {
    /* Modal Centre de sécurité - identifier par header vert */
    .security-center-modal,
    .fixed.inset-0 > div:has(.from-green-600) {
        width: 95vw !important;
        max-width: 95vw !important;
        margin: 10px auto !important;
        overflow-x: hidden !important;
    }

    /* Header vert gradient - padding uniforme */
    .bg-gradient-to-r.from-green-600,
    .from-green-600.to-emerald-600,
    [class*="from-green-600"] {
        padding: 16px !important;
        border-radius: 16px 16px 0 0 !important;
    }

    /* Contenu sous le header vert */
    .from-green-600 + div,
    [class*="from-green-600"] ~ div {
        padding: 0 12px !important;
    }

    /* Onglets du Centre de sécurité (Vue d'ensemble, Double auth, etc.) */
    .bg-white.border-b .flex,
    .border-b > .flex:has(button),
    div.flex.border-b > div.flex {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex-wrap: nowrap !important;
        scrollbar-width: none !important;
        gap: 2px !important;
    }

    .bg-white.border-b .flex::-webkit-scrollbar {
        display: none !important;
    }

    /* Boutons onglets individuels */
    .bg-white.border-b button,
    .border-b button[class*="flex-col"] {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        padding: 8px 10px !important;
        font-size: 11px !important;
        min-width: 70px !important;
    }

    /* Texte dans les onglets */
    .border-b button span {
        font-size: 10px !important;
    }

    /* Section Dernières connexions */
    .space-y-2 > div,
    .divide-y > div {
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }

    /* Entrées connexion (date + IP) */
    .space-y-2 .text-sm,
    .divide-y .text-sm {
        font-size: 12px !important;
        word-break: break-all !important;
        line-height: 1.5 !important;
    }

    /* Adresses IP longues (IPv6) */
    .text-gray-500.text-xs,
    .text-xs.text-gray-500 {
        word-break: break-all !important;
        overflow-wrap: anywhere !important;
        font-size: 10px !important;
        line-height: 1.4 !important;
        display: block !important;
    }

    /* Cards dans le Centre de sécurité */
    .from-green-600 ~ * .rounded-xl,
    .from-green-600 ~ * .rounded-lg {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Bouton Fermer */
    .from-green-600 ~ * > button.w-full,
    button.w-full.bg-gray-100.rounded-xl {
        margin: 12px !important;
        width: calc(100% - 24px) !important;
    }

    /* Score de sécurité - cercle */
    .from-green-600 .w-16.h-16,
    .from-green-600 .w-20.h-20,
    [class*="from-green"] .rounded-full[class*="w-"] {
        width: 56px !important;
        height: 56px !important;
        flex-shrink: 0 !important;
    }

    .from-green-600 .text-3xl {
        font-size: 24px !important;
    }
}

/* ========================================
   FIX 17: MODALE ACTIONS DEVIS/FACTURES (Mobile)
   Correction du décalage à droite de la grille
   Version: 03/01/2026
   ======================================== */
@media screen and (max-width: 767px) {
    /* Modale actions - centrage correct */
    .qam-modal {
        width: 92vw !important;
        max-width: 92vw !important;
        min-width: auto !important;
        padding: 16px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    /* Header de la modale - padding symétrique */
    .qam-modal-header {
        padding: 0 0 12px 0 !important;
        margin-bottom: 16px !important;
    }

    /* Grille des boutons d'action - centrage */
    .qam-actions-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Boutons d'action - ajustement taille */
    .qam-action-btn {
        padding: 10px 12px !important;
        gap: 8px !important;
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Icône des boutons */
    .qam-action-btn .qam-icon {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        font-size: 14px !important;
    }

    /* Texte des boutons */
    .qam-action-btn span:last-child {
        font-size: 13px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

/* ========================================
   FIX 18: FORMULAIRE EDITION DEVIS/FACTURES (Mobile)
   Affichage en colonne pour meilleure lisibilité
   Version: 03/01/2026 v2
   ======================================== */
@media screen and (max-width: 767px) {
    /* Masquer le thead de la table */
    .qam-edit-lines-table thead {
        display: none !important;
    }

    /* Table en display block */
    .qam-edit-lines-table {
        display: block !important;
        width: 100% !important;
    }

    .qam-edit-lines-table tbody {
        display: block !important;
        width: 100% !important;
    }

    /* Chaque ligne devient une carte */
    .qam-edit-lines-table tr {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        background: #f9fafb !important;
        border-radius: 12px !important;
        padding: 12px !important;
        margin-bottom: 12px !important;
        box-sizing: border-box !important;
        gap: 10px !important;
    }

    /* Chaque cellule en ligne avec label */
    .qam-edit-lines-table td {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: 0 !important;
        border: none !important;
        box-sizing: border-box !important;
    }

    /* Ajouter les labels avant chaque champ */
    .qam-edit-lines-table td:nth-child(1)::before {
        content: "Description" !important;
        font-weight: 600 !important;
        font-size: 13px !important;
        color: #374151 !important;
        min-width: 90px !important;
    }

    .qam-edit-lines-table td:nth-child(2)::before {
        content: "Quantité" !important;
        font-weight: 600 !important;
        font-size: 13px !important;
        color: #374151 !important;
        min-width: 90px !important;
    }

    .qam-edit-lines-table td:nth-child(3)::before {
        content: "Prix HT" !important;
        font-weight: 600 !important;
        font-size: 13px !important;
        color: #374151 !important;
        min-width: 90px !important;
    }

    .qam-edit-lines-table td:nth-child(4)::before {
        content: "TVA" !important;
        font-weight: 600 !important;
        font-size: 13px !important;
        color: #374151 !important;
        min-width: 90px !important;
    }

    .qam-edit-lines-table td:nth-child(5)::before {
        content: "Total HT" !important;
        font-weight: 600 !important;
        font-size: 13px !important;
        color: #374151 !important;
        min-width: 90px !important;
    }

    /* Cellule du bouton supprimer - pas de label */
    .qam-edit-lines-table td:last-child::before {
        content: "" !important;
        display: none !important;
    }

    /* Inputs prennent toute la largeur restante */
    .qam-edit-lines-table td input,
    .qam-edit-lines-table td select {
        flex: 1 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 10px 12px !important;
        font-size: 15px !important;
        border-radius: 8px !important;
        border: 1px solid #d1d5db !important;
    }

    /* Total HT - style spécial */
    .qam-edit-lines-table .qam-line-total {
        flex: 1 !important;
        text-align: right !important;
        font-weight: 600 !important;
        font-size: 15px !important;
        color: #1f2937 !important;
        padding: 10px 12px !important;
        background: white !important;
        border-radius: 8px !important;
    }

    /* Bouton supprimer - centré en bas */
    .qam-edit-lines-table td:last-child {
        justify-content: center !important;
        padding-top: 8px !important;
        border-top: 1px solid #e5e7eb !important;
        margin-top: 4px !important;
    }

    .qam-edit-lines-table .qam-edit-delete-line,
    .qam-edit-lines-table td:last-child button {
        width: 100% !important;
        max-width: none !important;
        padding: 10px 16px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
    }
}

/* ========================================
   FIX 19: PARAMETRES EQUIPE - Boutons pleine largeur (Mobile)
   Boutons Voir/Droits/Supprimer sur toute la largeur
   Version: 03/01/2026 v2
   ======================================== */
@media screen and (max-width: 767px) {
    /* Cartes collaborateurs - colonne */
    #collab-list > div {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 16px !important;
    }

    /* Header de la carte (nom + matricule + statut) - centré */
    #collab-list > div > div:first-child {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        margin-bottom: 12px !important;
        text-align: center !important;
    }

    /* Container des boutons - colonne pleine largeur */
    #collab-list > div > div:last-child,
    #collab-list > div > div[style*="flex"] {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 8px !important;
    }

    /* Chaque bouton prend TOUTE la largeur */
    #collab-list > div button {
        width: 100% !important;
        max-width: none !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 12px 16px !important;
        border-radius: 10px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        box-sizing: border-box !important;
    }

    /* Bouton Voir - style bleu */
    #collab-list > div button[onclick*="viewCollab"] {
        background: #eef2ff !important;
        color: #4f46e5 !important;
        border: 1px solid #c7d2fe !important;
    }

    /* Bouton Droits - style orange */
    #collab-list > div button[onclick*="editRights"] {
        background: #fef3c7 !important;
        color: #b45309 !important;
        border: 1px solid #fcd34d !important;
    }

    /* Bouton Supprimer - style rouge */
    #collab-list > div button[onclick*="deleteCollab"] {
        background: #fee2e2 !important;
        color: #dc2626 !important;
        border: 1px solid #fca5a5 !important;
    }

    /* Select statut - pleine largeur aussi */
    #collab-list > div select {
        width: 100% !important;
        max-width: none !important;
        padding: 10px 12px !important;
        border-radius: 10px !important;
        margin-bottom: 8px !important;
        font-size: 14px !important;
    }
}

/* ========================================
   FIX 22: GARDE ALTERNEE - Boutons d'action (Mobile)
   Forcer le fond violet/indigo sur les boutons gradient
   Version: 03/01/2026 v2
   ======================================== */
@media screen and (max-width: 767px) {
    /* Tous les boutons avec gradient purple/indigo */
    button.bg-gradient-to-r.from-purple-500.to-indigo-500,
    button.bg-gradient-to-r.from-indigo-500.to-purple-500,
    button[class*="bg-gradient-to-r"][class*="from-purple"],
    button[class*="bg-gradient-to-r"][class*="from-indigo"] {
        background: linear-gradient(to right, #6366f1, #8b5cf6) !important;
        background-image: linear-gradient(to right, #6366f1, #8b5cf6) !important;
        -webkit-background-clip: padding-box !important;
        background-clip: padding-box !important;
    }
}

/* ========================================
   FIX 20: LIEN DECONNEXION - Supprimer barre violette
   Version: 03/01/2026
   ======================================== */
#mobile-logout-link,
#mobile-logout-link:focus,
#mobile-logout-link:active,
#mobile-logout-link:hover {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
}

/* Tous les liens dans le menu - pas de outline violet */
aside a:focus,
aside a:active,
nav a:focus,
nav a:active,
[class*="sidebar"] a:focus,
[class*="sidebar"] a:active {
    outline: none !important;
    box-shadow: none !important;
}

/* ========================================
   FIX 21: AVATARS ENFANTS - Lettre centrée
   Version: 03/01/2026
   ======================================== */
/* Cercles violets/indigo avec lettre */
.bg-purple-100.rounded-full,
.bg-purple-500.rounded-full,
.bg-indigo-100.rounded-full,
.bg-indigo-500.rounded-full,
[class*="bg-purple"][class*="rounded-full"],
[class*="bg-indigo"][class*="rounded-full"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

/* ========================================
   FIX 16: GARDE ALTERNEE - DOCUMENTS (Mobile)
   Espace stockage + Filtres + Bouton Ajouter
   Version: 31/12/2025 - v2 (classes corrigées)
   ======================================== */
@media screen and (max-width: 767px) {
    /* ----------------------------------------
       ESPACE DE STOCKAGE FAMILLE
       Container: bg-gradient-to-r from-purple-50 to-indigo-50
       Layout vertical avec +Augmenter en dessous du titre
       ---------------------------------------- */

    /* Container stockage gradient - passage en colonne */
    .bg-gradient-to-r.from-purple-50,
    .from-purple-50.to-indigo-50,
    div[class*="bg-gradient"][class*="purple"] {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }

    /* Première ligne dans le stockage (titre + bouton) - en colonne */
    .bg-gradient-to-r.from-purple-50 > .flex:first-child,
    .from-purple-50.to-indigo-50 > .flex:first-child,
    div[class*="bg-gradient"][class*="purple"] > .flex.justify-between {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        width: 100% !important;
    }

    /* Ligne usage - flex row avec bouton +Augmenter à droite */
    .bg-gradient-to-r.from-purple-50 .text-sm,
    .from-purple-50.to-indigo-50 .text-sm,
    div[class*="bg-gradient"][class*="purple"] .text-sm {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        gap: 12px !important;
    }

    /* Bouton +Augmenter - bien visible */
    #custody-buy-storage-btn {
        flex-shrink: 0 !important;
        padding: 8px 16px !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        border-radius: 20px !important;
        background: linear-gradient(135deg, #667eea, #764ba2) !important;
        color: white !important;
        white-space: nowrap !important;
        border: none !important;
        min-height: 36px !important;
    }

    /* ----------------------------------------
       FILTRES CATEGORIES + ENFANTS
       Container: flex flex-wrap gap-4 justify-between items-center
       Sous-container: flex gap-2 flex-wrap
       Grille 2 colonnes 50/50
       ---------------------------------------- */

    /* Container principal des filtres - grille 2 colonnes */
    .space-y-4 > .flex.flex-wrap.gap-4.justify-between.items-center,
    .flex.flex-wrap.gap-4.justify-between.items-center {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        width: 100% !important;
    }

    /* Sous-container des boutons filtres - display contents pour hériter de la grille */
    .flex.flex-wrap.gap-4.justify-between.items-center > .flex.gap-2.flex-wrap,
    .flex.flex-wrap.gap-4.justify-between > .flex.gap-2 {
        display: contents !important;
    }

    /* Boutons Catégories et Enfants - même taille 50% */
    .flex.flex-wrap.gap-4.justify-between.items-center > .flex.gap-2 > button,
    .flex.gap-2.flex-wrap > button {
        width: 100% !important;
        min-width: 0 !important;
        padding: 12px 14px !important;
        font-size: 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    /* ----------------------------------------
       BOUTON AJOUTER UN DOCUMENT (premier)
       Pleine largeur, centré
       ---------------------------------------- */

    /* Bouton Ajouter un document - pleine largeur */
    .space-y-4 > button.w-full.border-2.border-dashed,
    button.w-full.border-2.border-dashed.border-purple-300 {
        width: 100% !important;
        margin-top: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 14px 20px !important;
    }
}