/*
 * Correctifs responsive du dashboard Medusa sur mobile (< 640px, seuil sm).
 * Le dashboard est du code tiers (node_modules) : impossible d'editer ses
 * composants, on corrige donc ses grilles trop etroites via cette feuille
 * injectee par transformIndexHtml (medusa-config.ts).
 */
@media (max-width: 639.98px) {
  /* Cartes d'en-tete (n° de commande / produit + badges d'etat) : le texte
     s'ecrase mot a mot contre les badges. On autorise le retour a la ligne,
     les badges descendent sous le titre quand la place manque. */
  .shadow-elevation-card-rest.flex.items-center.justify-between {
    flex-wrap: wrap;
    row-gap: 0.75rem;
  }

  /* Meme traitement pour les en-tetes DE SECTION internes aux cartes
     (ex. « Articles non expédiés » + 2 badges qui debordent de l'ecran),
     et leurs groupes de badges qui peuvent aussi passer a la ligne. */
  .shadow-elevation-card-rest > .flex.items-center.justify-between {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }
  .shadow-elevation-card-rest > .flex.items-center.justify-between > .flex {
    flex-wrap: wrap;
    row-gap: 0.25rem;
    min-width: 0;
  }

  /* Ligne de paiement (ref + date | badge | montant | menu) : 3 colonnes
     egales ecrasent la date sur 3 lignes contre le badge. Ref + date
     passent en pleine largeur, badge + montant + menu en dessous. */
  [class*="grid-cols-[1fr_1fr_1fr_20px]"] {
    grid-template-columns: minmax(0, 1fr) auto 20px !important;
    row-gap: 0.5rem;
  }
  [class*="grid-cols-[1fr_1fr_1fr_20px]"] > :first-child {
    grid-column: 1 / -1;
  }

  /* Ligne article du Resume (vignette + nom | prix x quantite) : les deux
     moities se compressent mutuellement. Article pleine largeur, prix et
     quantite en dessous. */
  .shadow-elevation-card-rest .grid.grid-cols-2.items-center.gap-x-4 {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 0.5rem;
  }
}