/*
 * Confort d'usage sur écran tactile (iPhone, iPad, tablettes Android).
 *
 * Chargée en dernier, après toutes les autres feuilles, pour corriger en un seul
 * endroit les points qui gênent l'usage quotidien au doigt :
 *   - champs sous 16px : iOS zoome automatiquement au focus et fait sauter la page
 *   - cibles tactiles sous 44px : le minimum recommandé par Apple (Human Interface
 *     Guidelines), en dessous on rate le bouton une fois sur trois
 *   - textes d'information sous 12px, illisibles en atelier
 *
 * Portée : `pointer: coarse` désigne tout appareil dont le pointeur principal est
 * le doigt ou un stylet, quelle que soit la largeur de l'écran. C'est le bon
 * critère ici : un iPad fait 820px de large en portrait et 1180px en paysage, il
 * échappait donc entièrement au `max-width: 768px` d'origine alors que l'app y est
 * utilisée au doigt, exactement comme sur téléphone. `max-width: 768px` est
 * conservé en second terme comme repli pour les rares moteurs sans `pointer`.
 * Le rendu souris sur grand écran n'est pas touché.
 */

@media (pointer: coarse), (max-width: 768px) {

    /* --- 1. Plus aucun zoom involontaire à la saisie ---------------------- */
    .order-prep-full-page input:not([type="checkbox"]):not([type="radio"]),
    .order-prep-full-page select,
    .order-prep-full-page textarea {
        font-size: 16px !important;
    }

    /* --- 2. Cibles tactiles : 44px minimum -------------------------------- */
    .eye-button,
    .search-clear-btn,
    .close-modal,
    .sav-modal-close,
    .view-modal-close,
    .prepare-modal-close,
    .order-prep-action-btn {
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .process-button,
    .view-button,
    .prep-button,
    .order-prep-button,
    .order-prep-logout-button,
    .update-stock-button,
    .stock-edit-button,
    .prepare-status-button,
    .order-prep-tab,
    .order-prep-button-secondary,
    .sticky-search-button,
    .stats-update-btn,
    #update-stock-button,
    #toggle-edit-mode {
        min-height: 44px !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        /* Le centrage va avec la hauteur imposee. Sans lui, un bouton dont le
           texte et les marges n'atteignent pas 44 pixels grandit par le bas et
           laisse son libelle colle en haut : c'etait le cas du bouton « Voir »
           des lignes de commande, a dix pixels du bord haut et vingt du bas.
           Les boutons a largeur imposee ne sont pas affectes, `inline-flex`
           etant blockifie sur un enfant de conteneur flex. */
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Les entrées du menu du bas : 44px de large pour ne pas se tromper de vue */
    .bottom-nav-item {
        min-width: 44px !important;
    }

    /* --- 3. Lisibilité : plus rien sous 12px ------------------------------ */
    .order-prep-full-page .order-secondary-info,
    .order-prep-full-page .order-shipping,
    /* Le badge de statut est volontairement exclu : c'est un reperage colore,
       pas un texte a lire, et le remonter a 13 pixels lui donnait le poids du
       numero de commande. Il garde sa taille reduite sur tactile. */
    .order-prep-full-page .stock-sku,
    .order-prep-full-page .order-date,
    .order-prep-full-page .prepare-product-unit-price {
        font-size: 13px !important;
    }

    /* Les libellés du menu restent compacts, mais lisibles (10px par défaut) */
    .bottom-nav-label {
        font-size: 11px !important;
    }

    /* Onglet de bascule des listes (« À préparer », « En attente ») */
    .waiting-link {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    /* --- 4. Rien ne doit finir coupé par le menu -------------------------- */
    /* Les boutons de la dernière commande de la liste passaient sous le menu. */
    .order-prep-container.orders-list-page,
    .order-prep-container.completed-page,
    .orders-list {
        padding-bottom: calc(var(--order-prep-nav-total, 60px) + 40px) !important;
    }
}

/*
 * Écrans étroits uniquement (téléphone). Ces deux règles ne doivent PAS s'appliquer
 * aux tablettes : sur 768px et plus, le logo et les cinq entrées du menu tiennent
 * ensemble sans se comprimer.
 */
@media (max-width: 768px) {

    /* Le logo dans le menu était compressé à 5px de large une fois les cinq
       entrées portées à 44px : sur un écran de 390px il n'y a pas la place pour
       les deux, et ce sont les entrées qui servent. */
    .bottom-nav-logo {
        display: none !important;
    }

    .bottom-nav-items {
        width: 100% !important;
        justify-content: space-around !important;
    }
}