/*
 * Retours terrain Planyf — septembre 2026
 *
 * Ce fichier contient uniquement les ajustements responsives difficiles à
 * exprimer proprement dans les classes utilitaires existantes :
 * - garder l'échelle horaire visible pendant le scroll horizontal ;
 * - élargir les colonnes sur téléphone pour lire nom + prestation sans zoom ;
 * - rendre les repères :15 / :30 / :45 plus lisibles ;
 * - garder les actions du formulaire Nouveau rendez-vous accessibles sur
 *   tablette et mobile, même lorsque le formulaire est long.
 */

@media (max-width: 900px) {
  /*
   * La grille semaine/jour défile horizontalement. Le premier enfant de la
   * rangée qui contient les colonnes [data-date-col] est la gouttière horaire.
   * Elle doit rester visible, sinon on perd les heures dès qu'on fait défiler
   * vers mardi/mercredi/etc.
   */
  .flex:has(> [data-date-col]) > :first-child:not([data-date-col]) {
    position: sticky !important;
    left: 0 !important;
    z-index: 35 !important;
    width: 4.25rem !important;
    min-width: 4.25rem !important;
    background: rgb(255 255 255 / 0.98) !important;
    box-shadow: 8px 0 14px -13px rgb(15 23 42 / 0.75);
  }

  /* Le coin supérieur gauche doit suivre la même largeur que la gouttière. */
  .min-w-max:has(> .flex > [data-date-col]) > .flex.border-b > :first-child {
    position: sticky !important;
    left: 0 !important;
    z-index: 40 !important;
    width: 4.25rem !important;
    min-width: 4.25rem !important;
    background: rgb(255 255 255 / 0.98) !important;
    box-shadow: 8px 0 14px -13px rgb(15 23 42 / 0.75);
  }

  /* Plus d'air par jour : en-tête et corps gardent exactement la même largeur. */
  .flex:has(> [data-date-col]) > [data-date-col],
  .min-w-max:has(> .flex > [data-date-col]) > .flex.border-b > :not(:first-child) {
    min-width: 8.25rem !important;
  }

  /* Les quarts d'heure restent lisibles dans la gouttière, même en plein jour. */
  .flex:has(> [data-date-col]) > :first-child:not([data-date-col]) > .absolute.right-1 {
    z-index: 2;
    padding-inline: 0.125rem;
    border-radius: 0.2rem;
    background: rgb(255 255 255 / 0.92);
    color: #64748b !important;
    font-size: 0.625rem !important;
    font-weight: 700 !important;
  }

  /* Les pointillés de :15 / :45 sont volontairement plus contrastés. */
  [data-date-col] .border-dashed {
    border-color: rgb(148 163 184 / 0.72) !important;
  }

  /* Les cartes prennent toute la largeur utile et priorisent la lisibilité. */
  [data-appt-block] {
    left: 0.2rem !important;
    right: 0.2rem !important;
    padding-left: 0.55rem !important;
    padding-right: 0.55rem !important;
  }

  [data-appt-block] p {
    line-height: 1.12 !important;
  }
}

@media (max-width: 640px) {
  .flex:has(> [data-date-col]) > [data-date-col],
  .min-w-max:has(> .flex > [data-date-col]) > .flex.border-b > :not(:first-child) {
    min-width: 8.5rem !important;
  }

  [data-appt-block] p {
    font-size: 0.75rem !important;
  }

  [data-appt-block] p:first-of-type {
    font-size: 0.7rem !important;
    font-weight: 800 !important;
  }
}

@media (max-width: 1180px) {
  /*
   * QuickCreateModal : sur certaines tablettes le bouton Créer descendait sous
   * la zone visible. Le conteneur reste scrollable mais la barre d'actions est
   * désormais collée en bas du modal.
   */
  [role='dialog'] > div.max-w-md.overflow-y-auto {
    max-height: min(92vh, calc(100dvh - 2rem)) !important;
    overscroll-behavior: contain;
  }

  [role='dialog'] > div.max-w-md.overflow-y-auto > .flex.gap-2.justify-end.mt-5 {
    position: sticky;
    bottom: 0;
    z-index: 45;
    margin-right: -1.5rem;
    margin-left: -1.5rem;
    margin-bottom: -1.5rem;
    padding: 0.85rem 1.5rem calc(0.85rem + env(safe-area-inset-bottom));
    border-top: 1px solid rgb(226 232 240 / 0.95);
    background: rgb(255 255 255 / 0.96);
    box-shadow: 0 -10px 24px -18px rgb(15 23 42 / 0.75);
    backdrop-filter: blur(12px);
  }
}