/* ───────────────────────────────────────────────────────────────────────────
   FICHIER : dashboard-responsive.css
   CHEMIN  : /var/www/cm-platform/frontend/modules/booking/css/dashboard/dashboard-responsive.css
   RÔLE    : responsive dashboard Booking
   ─────────────────────────────────────────────────────────────────────────── */

/* 12. Responsive général                                                      */
/* ─────────────────────────────────────────────────────────────────────────── */

@media (max-width:1180px){
  .cm-booking-hero{
    flex-direction:column;
  }

  .cm-booking-stats{
    min-width:0;
  }

  .cm-booking-layout{
    grid-template-columns:1fr;
  }
}

@media (max-width:760px){
  .cm-booking-stats,
  .cm-booking-two,
  .cm-booking-blockForm,
  .cm-booking-copyLine{
    grid-template-columns:1fr;
  }

  .cm-booking-copyLine--textarea{
    grid-template-columns:1fr;
  }

  .cm-booking-copyLine--textarea button{
    width:100%;
    min-width:0;
  }

  .cm-booking-hourRow{
    grid-template-columns:1fr;
  }

  .cm-booking-custom{
    grid-column:1 / -1;
  }

  .cm-booking-listItem{
    flex-direction:column;
    align-items:flex-start;
  }

  .cm-booking-cardHead,
  .cm-booking-cardHead--preview{
    flex-direction:column;
    align-items:flex-start;
  }

  .cm-booking-previewOpen{
    width:100%;
  }

  .cm-booking-card--preview .cm-booking-public-two{
    grid-template-columns:1fr !important;
  }

  .cm-booking-previewMonthGrid,
  .cm-booking-previewWeekdays{
    grid-template-columns:repeat(7,minmax(54px,1fr));
  }

  .cm-booking-previewCalendar{
    overflow-x:auto;
  }

  .cm-booking-previewDay{
    min-height:92px;
  }

  .cm-booking-previewModalPanel{
    width:calc(100vw - 12px);
    max-height:calc(100vh - 12px);
    margin:6px auto;
    padding:16px 10px;
    border-radius:20px;
  }

  .cm-booking-previewModalClose{
    top:10px;
    right:10px;
    width:44px;
    height:44px;
    border-radius:15px;
    font-size:27px;
  }

  .cm-booking-previewModalHead{
    padding:0 54px 14px 0;
  }

  .cm-booking-previewModalHead h3{
    font-size:21px;
  }

  .cm-booking-previewModalHead p{
    font-size:13px;
  }

  .cm-booking-appointmentsModal{
    padding:8px;
    align-items:flex-start;
  }

  .cm-booking-appointmentsModalPanel{
    width:calc(100vw - 16px);
    max-height:calc(100vh - 16px);
    border-radius:20px;
  }

  .cm-booking-appointmentsModalHead{
    padding:22px 62px 16px 18px;
  }

  .cm-booking-appointmentsModalHead h3{
    font-size:21px;
  }

  .cm-booking-appointmentsModalBody{
    padding:14px;
  }

  .cm-booking-appointmentRecapGrid{
    grid-template-columns:1fr;
  }

  .cm-booking-appointmentRecapTop{
    flex-direction:column;
  }

  .cm-booking-appointmentsModalFooter{
    flex-direction:column-reverse;
    align-items:stretch;
    padding:14px;
  }

  .cm-booking-appointmentsModalFooter button{
    width:100%;
  }
}

/* ──────────────────────────────────────────────────────────────────────────────
   PERSONNALISATION BOOKING — ALIGNEMENT OPTIONS PREMIUM
   IMPORTANT :
   - Aligne proprement les deux champs couleur.
   - Évite que le titre long “Couleur d’arrière-plan du formulaire”
     décale le color picker.
   - Ne modifie pas la logique des plans.
   ────────────────────────────────────────────────────────────────────────────── */

.cm-booking-customization .cm-booking-two{
  align-items:start;
}

.cm-booking-customization .cm-booking-two .cm-booking-field{
  display:flex;
  flex-direction:column;
  min-width:0;
}

.cm-booking-customization .cm-booking-two .cm-booking-field > label{
  display:flex;
  align-items:flex-end;
  min-height:58px;
  margin:0 0 10px;
  line-height:1.18;
}

.cm-booking-customization .cm-booking-two .cm-booking-field input[type="color"]{
  width:100%;
  height:48px;
  min-height:48px;
  padding:6px 12px;
  border-radius:999px;
}

.cm-booking-customization .cm-booking-two .cm-booking-field .cm-booking-muted{
  min-height:54px;
  margin-top:12px;
  line-height:1.45;
}