/*
 * Confort d'usage sur grand ecran.
 *
 * L'application a ete dessinee pour un telephone, et le restait sur un
 * ordinateur : une colonne de six cents pixels au milieu d'un ecran de mille
 * huit cents, ou la date se collait au nom du client faute de place. Les
 * preparateurs qui travaillent sur poste fixe y passent pourtant leur journee.
 *
 * Cette feuille ne s'applique qu'au-dela de mille vingt-quatre pixels : rien de
 * ce qui suit ne touche le telephone ni la tablette en portrait.
 *
 * Elle est chargee en dernier et double les selecteurs la ou les regles d'en
 * face portent « !important », que rien d'autre ne saurait depasser.
 */

@media (min-width: 1024px) {

    /* --- 1. La page respire ------------------------------------------- */

    .order-prep-container .order-prep-app-wrapper,
    .order-prep-container .orders-list-wrapper,
    .order-prep-container .order-prep-content {
        width: 100% !important;
        max-width: 1100px !important;
        margin: 0 auto !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
        box-sizing: border-box !important;
    }

    .order-prep-container.sav-page,
    .order-prep-container.sav-history-page {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    /* --- 2. La ligne d'une commande ----------------------------------- */

    /*
     * Les informations se rangent en colonnes alignees d'une ligne a l'autre.
     * Elles etaient empilees dans un bloc souple ou la date venait se coller au
     * nom du client des qu'il etait un peu long.
     */
    .orders-list .order-item {
        gap: 20px !important;
        padding: 16px 20px !important;
        border-bottom: 1px solid #f0f1f3 !important;
    }

    .orders-list .order-item .order-content {
        display: flex !important;
        flex: 1 !important;
        align-items: center !important;
        gap: 24px !important;
        min-width: 0 !important;
    }

    .orders-list .order-item .order-info {
        display: grid !important;
        grid-template-columns: 110px minmax(0, 1fr) 150px !important;
        align-items: center !important;
        gap: 4px 20px !important;
        flex: 1 !important;
        min-width: 0 !important;
    }

    .orders-list .order-item .order-primary-info {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .orders-list .order-item .order-secondary-info {
        display: contents !important;
    }

    .orders-list .order-item .order-customer {
        grid-column: 2 !important;
        grid-row: 1 !important;
        font-size: 15px !important;
        color: #2b2f36 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .orders-list .order-item .order-date {
        grid-column: 3 !important;
        grid-row: 1 !important;
        font-size: 13px !important;
        color: #8a9099 !important;
        white-space: nowrap !important;
    }

    /* L'etiquette de prise en main passe sous les trois colonnes. */
    .orders-list .order-item .order-claimed-by {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
    }

    .orders-list .order-item .order-price {
        min-width: 140px !important;
        margin-right: 0 !important;
    }

    /* --- 3. Les fiches de service client ------------------------------ */

    /*
     * Deux colonnes : une fiche tient en quelques lignes, et les empiler sur
     * mille pixels de large laissait la moitie de l'ecran vide.
     */
    .sav-page .sav-items-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: start !important;
        gap: 16px !important;
    }

    .sav-history-page .sav-items-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: start !important;
        gap: 16px !important;
    }

    /* --- 4. L'ecran de preparation ------------------------------------ */

    /*
     * Une largeur de lecture, pas toute la page : on y parcourt une liste
     * d'articles, que des lignes de mille pixels rendraient penibles a suivre.
     * Le selecteur est double parce que la regle d'en face porte « !important ».
     */
    .order-prep-container .prepare-container,
    .prepare-container {
        width: 100% !important;
        max-width: 760px !important;
        margin: 0 auto !important;
    }

    .prepare-product-item {
        padding: 14px 16px !important;
    }

    .prepare-product-name {
        font-size: 15px !important;
    }

    /*
     * La barre d'action suit la largeur du contenu, au lieu de s'etirer d'un
     * bord a l'autre de l'ecran.
     */
    .prepare-actions-bar {
        left: 50% !important;
        right: auto !important;
        width: 100% !important;
        max-width: 760px !important;
        transform: translateX(-50%) !important;
        border-top-left-radius: 12px !important;
        border-top-right-radius: 12px !important;
    }

    /* --- 5. La barre de recherche et le menu -------------------------- */

    .sticky-search-form {
        max-width: 1100px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .bottom-nav-items {
        max-width: 1100px !important;
        margin: 0 auto !important;
    }

    /* --- 6. Les autres listes ----------------------------------------- */

    .stats-page .stats-grid,
    .stock-page .stock-list,
    .completed-page .orders-list {
        max-width: 1100px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/*
 * Le nom et la date se touchaient, quelle que soit la largeur : le bloc qui les
 * porte est souple, sans rien entre ses deux enfants.
 */
.order-secondary-info {
    gap: 4px 10px !important;
}