/* ============================================================================
   datetime-calendar-slots-layout.css — propriétaire unique du layout Date/heure

   Structure canonique :
   1. praticien / lieu / ressource visibles au-dessus ;
   2. préférences complémentaires repliées ;
   3. calendrier à gauche et créneaux à droite sur largeur suffisante ;
   4. empilement vertical sur mobile.

   Cette feuille ne contient aucune règle métier de disponibilité ou paiement.
   ============================================================================ */

#step-datetime .content-body {
  container-name: datetime-booking-content;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  min-width: 0;
  overflow: visible;
}

#step-datetime .content-body > #datetime-resource-filters-host,
#step-datetime .content-body > #datetime-refine-panel,
#step-datetime .content-body > #datetime-calendar-slots-layout,
#step-datetime .content-body > #async-booking-panel {
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
}

/* Filtres principaux : toujours visibles avant le calendrier. */
#step-datetime .datetime-resource-filters-host[hidden],
#step-datetime .datetime-resource-filters-host:empty {
  display: none !important;
}

#step-datetime .datetime-resource-filters-host .booking-resource-filters {
  margin: 0;
}

#step-datetime .datetime-resource-filters-host .resource-filter-card {
  padding: 12px 14px;
}

#step-datetime .datetime-resource-filters-host .resource-filter-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 360px));
  justify-content: start;
  align-items: end;
}

#step-datetime .datetime-resource-filters-host .resource-filter-field {
  width: 100%;
  max-width: 360px;
}

/* Préférences secondaires : accordéon fermé au premier affichage. */
#step-datetime .datetime-refine-panel {
  width: 100%;
  margin: 0;
}

#step-datetime .datetime-refine-panel:not([open]) > .datetime-refine-panel__body,
#step-datetime .datetime-refine-panel:not([open]) > #datetime-refine-body {
  display: none;
}

#step-datetime .datetime-refine-panel__summary {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#step-datetime .datetime-refine-panel__summary-main {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
}

#step-datetime .datetime-refine-panel__summary-help {
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
  white-space: normal;
  text-align: right;
}

#step-datetime .datetime-refine-panel__summary::after {
  flex: 0 0 24px;
  margin-left: 2px;
}

#step-datetime .datetime-refine-panel__body > .form-group:last-child {
  margin-bottom: 0;
}

/* Le wrapper canonique contient uniquement le calendrier et les créneaux. */
#step-datetime .datetime-calendar-slots-layout {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  width: 100%;
  min-width: 0;
}

#step-datetime .datetime-calendar-slots-layout > #calendar-container,
#step-datetime .datetime-calendar-slots-layout > #time-slots-container {
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
}

#step-datetime .datetime-calendar-slots-layout > #time-slots-container.hidden {
  display: none !important;
}

/* Protection de largeur : aucun jour ni calendrier ne déborde de sa colonne. */
#step-datetime #calendar-container,
#step-datetime #calendar-container .calendar-container,
#step-datetime #calendar-grid {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

#step-datetime #calendar-grid {
  width: 100%;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  overflow: visible;
}

#step-datetime .calendar-day-header,
#step-datetime .calendar-day {
  min-width: 0;
  max-width: 100%;
}

/* Conflit de hold : message local, non fixe, proche des créneaux. */
#step-datetime .slot-hold-conflict-notice {
  position: static;
  display: block;
  width: 100%;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--brand-primary, #d93025) 22%, #efb4ae);
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand-primary, #d93025) 6%, #fff4f2);
  color: color-mix(in srgb, var(--brand-primary, #d93025) 82%, #6b1d17);
  font-size: .86rem;
  font-weight: 750;
  line-height: 1.4;
  box-shadow: none;
  animation: slotHoldConflictAppear .18s ease-out;
}

@keyframes slotHoldConflictAppear {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* La largeur utile du panneau, pas seulement celle de la fenêtre, pilote le layout.
   P1R6CU-R4 : l'ancien seuil de 700px tombait juste au-dessus de la largeur
   réellement disponible dans le shell desktop canonique (sidebar comprise),
   ce qui empilait artificiellement les créneaux. Le seuil de 40rem est borné
   par les minima Design System des deux colonnes et leur gap. */
@container datetime-booking-content (min-width: 40rem) {
  #step-datetime .datetime-calendar-slots-layout {
    display: grid;
    grid-template-columns:
      minmax(var(--public-datetime-calendar-min-inline), 1.15fr)
      minmax(var(--public-datetime-slots-min-inline), .85fr);
    gap: clamp(var(--public-datetime-layout-gap), 2.2cqi, var(--public-space-lg));
    align-items: start;
  }
}

/* Fallback pour les navigateurs sans container queries. */
@supports not (container-type: inline-size) {
  @media (min-width: 1180px) {
    #step-datetime .datetime-calendar-slots-layout {
      display: grid;
      grid-template-columns:
        minmax(var(--public-datetime-calendar-min-inline), 1.15fr)
        minmax(var(--public-datetime-slots-min-inline), .85fr);
      gap: var(--public-datetime-layout-gap);
      align-items: start;
    }
  }
}

@container datetime-booking-content (max-width: 39.999rem) {
  #step-datetime .datetime-resource-filters-host .resource-filter-grid,
  #step-datetime .datetime-resource-filters-host .resource-filter-field {
    width: 100%;
    max-width: none;
  }

  #step-datetime .datetime-refine-panel__summary-help {
    display: none;
  }

  #step-datetime .datetime-calendar-slots-layout {
    gap: 12px;
  }
}