/* ═══════════════════════════════════════════════════════════════════════════
 * GestiPilot — Fixes mobile universels
 *
 * À inclure sur toutes les pages custom pour améliorer l'UX mobile :
 *  - Inputs à 16px (évite le zoom iOS au focus)
 *  - Touch targets ≥ 44x44 (guideline Apple/WCAG)
 *  - Modals full-height avec scroll propre
 *  - Tables avec scroll horizontal + indicateur
 *  - FAB stackés verticalement au lieu d'horizontalement
 *  - Typographies réduites proprement
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Empêche le zoom automatique iOS quand on focus un input */
@media (max-width: 640px) {
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Touch targets : minimum 44x44px (guideline WCAG 2.5.5) */
    button,
    .btn,
    a.btn,
    .mini-btn,
    .tab-btn {
        min-height: 44px;
    }

    /* Modals : hauteur dynamique (gère la barre adresse mobile qui change) */
    .modal-bg,
    [class*="modal"][class*="bg"] {
        align-items: flex-start !important;
        padding: 12px !important;
        overflow: auto !important;
    }

    /* Empêche le body de scroller quand une modal est ouverte */
    body:has(.modal-bg:not(.hidden)) {
        overflow: hidden;
    }
}

/* Scroll horizontal visible sur les tables */
@media (max-width: 768px) {
    .tw,
    .table-wrap,
    [class*="table"][class*="scroll"],
    [class*="scroll"][class*="table"] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        background-image:
            linear-gradient(to right, #fff 30%, rgba(255,255,255,0)),
            linear-gradient(to right, rgba(255,255,255,0), #fff 70%),
            radial-gradient(ellipse at left, rgba(0,0,0,.08), rgba(0,0,0,0) 75%),
            radial-gradient(ellipse at right, rgba(0,0,0,.08), rgba(0,0,0,0) 75%);
        background-position: left center, right center, left center, right center;
        background-repeat: no-repeat;
        background-size: 24px 100%, 24px 100%, 10px 100%, 10px 100%;
        background-attachment: local, local, scroll, scroll;
    }

    table {
        min-width: 560px;
    }
}

/* FAB : sur petits écrans on empile verticalement plutôt que d'aligner horizontalement */
@media (max-width: 480px) {
    #pdl-fab,
    #edl-fab,
    #chatbot-btn {
        right: 16px !important;
    }
    #pdl-fab { bottom: 16px !important; }
    #edl-fab { bottom: 80px !important; right: 16px !important; }
    #chatbot-btn { bottom: 144px !important; right: 16px !important; }

    /* Scale down un peu les FAB pour petit écran */
    #pdl-fab, #edl-fab {
        width: 48px !important;
        height: 48px !important;
        font-size: 20px !important;
    }
}

/* Safe-area pour iPhone notch */
@supports (padding: max(0px)) {
    body {
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }
}

/* Désactiver le hover sur tactile pour éviter les états "coincés" */
@media (hover: none) {
    .btn:hover,
    .opt-card:hover,
    .photo-card:hover {
        transform: none !important;
        box-shadow: inherit !important;
    }
}

/* Améliorations typographiques mobile */
@media (max-width: 480px) {
    h1 { font-size: 22px !important; line-height: 1.2 !important; }
    h2 { font-size: 17px !important; line-height: 1.3 !important; }
    h3 { font-size: 15px !important; }
    body { line-height: 1.55; }
}

/* Tap highlight discret (au lieu du rectangle iOS par défaut) */
* { -webkit-tap-highlight-color: rgba(124, 58, 237, 0.15); }

/* Empêche le texte de déborder des containers */
.opt-card h3,
.card h1, .card h2,
.btn,
td, th {
    overflow-wrap: anywhere;
    word-break: normal;
}

/* Les `fixed` modals doivent ignorer le safe-area-inset-bottom sur iOS */
.modal-bg,
[role="dialog"][style*="fixed"] {
    padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
}

/* Form grids : 1 colonne en dessous de 640px */
@media (max-width: 640px) {
    .form-grid,
    .form-grid.cols-3 {
        grid-template-columns: 1fr !important;
    }
    .meta-row,
    .report-stats {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .compare-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Boutons pleine largeur sur très petits écrans quand groupés */
@media (max-width: 400px) {
    .actions {
        flex-direction: column-reverse !important;
        align-items: stretch !important;
    }
    .actions .btn,
    .actions button,
    .actions a {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* Préserve l'espace sous le FAB pour que le dernier contenu ne soit pas masqué */
@media (max-width: 480px) {
    body { padding-bottom: 90px !important; }
}