/* ───────────────────────────────────────────────────────────────────────────
   FICHIER : dashboard-preview.css
   CHEMIN  : /var/www/cm-platform/frontend/modules/booking/css/dashboard/dashboard-preview.css
   RÔLE    : prévisualisation Booking dans le dashboard, modale agrandie
             et surcharges du rendu public intégré
   ─────────────────────────────────────────────────────────────────────────── */

/* 9. Ancienne prévisualisation - compatibilité                                */
/* ─────────────────────────────────────────────────────────────────────────── */

.cm-booking-preview{
  width:100%;
  max-width:100%;
  border:1px solid var(--cm-border);
  border-radius:18px;
  background:#fff;
  overflow:hidden;
}

.cm-booking-previewTop{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:14px;
  background:#f4f8fe;
  border-bottom:1px solid var(--cm-border);
}

.cm-booking-previewTop span{
  font-size:12px;
  font-weight:900;
  color:var(--cm-text-soft);
  text-transform:uppercase;
  letter-spacing:.06em;
}

.cm-booking-previewTop strong{
  font-size:14px;
}

.cm-booking-previewGrid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:0;
  padding:12px;
}

.cm-booking-previewGrid span{
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border:1px solid #edf2f8;
  color:#94a3b8;
  font-size:12px;
  font-weight:800;
}

.cm-booking-previewGrid span.is-on{
  background:#dbeafe;
  color:#1d4ed8;
}

.cm-booking-preview--pro .cm-booking-previewGrid span.is-on{
  background:#2563eb;
  color:#fff;
}

.cm-booking-preview--chic .cm-booking-previewGrid{
  gap:6px;
}

.cm-booking-preview--chic .cm-booking-previewGrid span{
  border-radius:9px;
  border:0;
  background:#f1f5f9;
}

.cm-booking-preview--chic .cm-booking-previewGrid span.is-on{
  background:#dcfce7;
  color:#15803d;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* 10. Ancienne prévisualisation calendrier réelle - compatibilité             */
/* ─────────────────────────────────────────────────────────────────────────── */

.cm-booking-previewCalendar{
  width:100%;
  min-width:0;
  background:#fff;
}

.cm-booking-previewCalendarHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px;
  border-bottom:1px solid #e8eef7;
  background:#f8fbff;
}

.cm-booking-previewCalendarHead strong{
  font-size:15px;
  font-weight:900;
  color:var(--cm-text);
  text-transform:capitalize;
}

.cm-booking-previewCalendarHead span{
  font-size:12px;
  font-weight:800;
  color:var(--cm-text-soft);
}

.cm-booking-previewWeekdays{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  border-bottom:1px solid #e8eef7;
  background:#fbfdff;
}

.cm-booking-previewWeekdays span{
  padding:9px 6px;
  text-align:center;
  color:#64748b;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
  border-right:1px solid #edf2f8;
}

.cm-booking-previewWeekdays span:last-child{
  border-right:0;
}

.cm-booking-previewMonthGrid{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  border-left:1px solid #edf2f8;
  border-top:1px solid #edf2f8;
  background:#fff;
}

.cm-booking-previewDay{
  position:relative;
  min-height:92px;
  padding:8px;
  border-right:1px solid #edf2f8;
  border-bottom:1px solid #edf2f8;
  background:#fff;
  overflow:hidden;
}

.cm-booking-previewDay.is-muted{
  background:#fbfdff;
  color:#94a3b8;
}

.cm-booking-previewDay.is-today{
  box-shadow:inset 0 0 0 2px rgba(37,99,235,.16);
}

.cm-booking-previewDay.is-available{
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
}

.cm-booking-previewDay.is-blocked{
  background:#fff7f7;
}

.cm-booking-previewDay.has-appointments{
  background:#f8fbff;
}

.cm-booking-previewDayTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  margin-bottom:6px;
}

.cm-booking-previewDayTop strong{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:22px;
  border-radius:999px;
  color:#0f2c5c;
  font-size:12px;
  font-weight:900;
}

.cm-booking-previewDay.is-today .cm-booking-previewDayTop strong{
  background:var(--cm-primary);
  color:#fff;
}

.cm-booking-previewDayTop span{
  color:#2563eb;
  font-size:9px;
  font-weight:900;
  text-transform:uppercase;
}

.cm-booking-previewAvailability{
  display:block;
  margin-top:6px;
  padding:5px 7px;
  border-radius:10px;
  background:#eef6ff;
  color:#315f9f;
  font-size:10px;
  line-height:1.25;
  font-weight:800;
}

.cm-booking-previewBlock{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-top:6px;
  padding:6px 7px;
  border:1px solid #fecaca;
  border-radius:10px;
  background:#fff1f2;
  color:#991b1b;
}

.cm-booking-previewBlock strong{
  font-size:10px;
  line-height:1.15;
  font-weight:900;
}

.cm-booking-previewBlock span{
  font-size:10px;
  line-height:1.2;
  color:#b91c1c;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
}

.cm-booking-previewEvents{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-top:6px;
}

.cm-booking-previewEvent{
  display:flex;
  flex-direction:column;
  gap:1px;
  padding:5px 7px;
  border-radius:10px;
  background:#dbeafe;
  color:#1e3a8a;
  border:1px solid #bfdbfe;
}

.cm-booking-previewEvent strong{
  font-size:10px;
  line-height:1.1;
  font-weight:950;
}

.cm-booking-previewEvent span{
  font-size:10px;
  line-height:1.2;
  color:#1d4ed8;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  line-clamp:2;
  -webkit-box-orient:vertical;
}

.cm-booking-previewMore{
  padding:4px 7px;
  border-radius:9px;
  background:#f1f5f9;
  color:#475569;
  font-size:10px;
  font-weight:900;
}

.cm-booking-preview--pro .cm-booking-previewEvent{
  background:#2563eb;
  border-color:#1d4ed8;
  color:#fff;
}

.cm-booking-preview--pro .cm-booking-previewEvent span{
  color:#eff6ff;
}

.cm-booking-preview--pro .cm-booking-previewAvailability{
  background:#dbeafe;
  color:#1d4ed8;
}

.cm-booking-preview--chic .cm-booking-previewMonthGrid{
  gap:6px;
  padding:12px;
  border:0;
  background:#f8fafc;
}

.cm-booking-preview--chic .cm-booking-previewDay{
  border:0;
  border-radius:14px;
  min-height:96px;
  box-shadow:0 8px 20px rgba(15,23,42,.05);
}

.cm-booking-preview--chic .cm-booking-previewEvent{
  background:#dcfce7;
  border-color:#bbf7d0;
  color:#166534;
}

.cm-booking-preview--chic .cm-booking-previewEvent span{
  color:#15803d;
}

.cm-booking-preview--chic .cm-booking-previewAvailability{
  background:#f0fdf4;
  color:#15803d;
}

.cm-booking-previewCalendar.is-large .cm-booking-previewDay{
  min-height:150px;
  padding:10px;
}

.cm-booking-previewCalendar.is-large .cm-booking-previewDayTop strong{
  font-size:14px;
}

.cm-booking-previewCalendar.is-large .cm-booking-previewEvent strong,
.cm-booking-previewCalendar.is-large .cm-booking-previewEvent span,
.cm-booking-previewCalendar.is-large .cm-booking-previewBlock strong,
.cm-booking-previewCalendar.is-large .cm-booking-previewBlock span,
.cm-booking-previewCalendar.is-large .cm-booking-previewAvailability{
  font-size:12px;
}

.cm-booking-previewFooter{
  padding:12px 14px;
  border-top:1px solid var(--cm-border);
  color:var(--cm-text-soft);
  font-size:13px;
}

.cm-booking-primary{
  align-self:flex-start;
  border:1px solid var(--cm-primary);
  background:var(--cm-primary);
  color:#fff;
  border-radius:14px;
  padding:11px 16px;
  cursor:pointer;
  font-weight:900;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.cm-booking-previewModalPanel .cm-booking-previewCalendar{
  border:1px solid #dbe7f5;
  border-radius:18px;
  overflow:hidden;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* 11. Prévisualisation dashboard actuelle - partie gauche équilibrée           */
/* ─────────────────────────────────────────────────────────────────────────── */

.cm-booking-card--preview{
  overflow:hidden;
}

.cm-booking-cardHead--preview{
  align-items:center;
}

.cm-booking-previewOpen{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:8px 13px;
  border:1px solid var(--cm-primary);
  border-radius:12px;
  background:var(--cm-primary);
  color:#ffffff;
  font-size:12px;
  font-weight:900;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:0 10px 22px rgba(32,74,157,.14);
}

.cm-booking-previewOpen:hover{
  background:var(--cm-primary-dark);
  border-color:var(--cm-primary-dark);
}

.cm-booking-card--preview .cm-booking-publicPreviewHost{
  width:100%;
  max-width:100%;
  overflow:hidden;
}

.cm-booking-card--preview .cm-booking-public{
  width:100%;
  max-width:100%;
  margin:0;
}

.cm-booking-card--preview .cm-booking-public-head{
  display:none !important;
}

.cm-booking-card--preview .cm-booking-public-card,
.cm-booking-card--preview .cm-booking-public-card--with-calendar{
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:#ffffff !important;
}

.cm-booking-card--preview .cm-booking-public-layout{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,.82fr) !important;
  gap:18px !important;
  align-items:start !important;
  width:100% !important;
  max-width:100% !important;
  overflow:hidden !important;
}

.cm-booking-card--preview .cm-booking-public-left,
.cm-booking-card--preview .cm-booking-public-right{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
}

.cm-booking-card--preview .cm-booking-public-left{
  display:flex !important;
  flex-direction:column !important;
}

.cm-booking-card--preview .cm-booking-public-right{
  border:1px solid #e5edf7 !important;
  border-radius:14px !important;
  background:#ffffff !important;
  padding:14px !important;
}

.cm-booking-card--preview .cm-cal-template{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
}

.cm-booking-card--preview .cm-cal-template__monthBar{
  min-height:36px !important;
  grid-template-columns:36px 1fr 36px !important;
}

.cm-booking-card--preview .cm-cal-template__monthBar button,
.cm-booking-card--preview .cm-cal-template__monthBar span{
  height:36px !important;
  font-size:14px !important;
}

.cm-booking-card--preview .cm-cal-template__monthBar strong{
  font-size:13px !important;
}

.cm-booking-card--preview .cm-cal-minimal__dow > div,
.cm-booking-card--preview .cm-cal-pro__dow,
.cm-booking-card--preview .cm-cal-chic__dow > div{
  padding:7px 0 !important;
  font-size:9px !important;
}

.cm-booking-card--preview .cm-cal-minimal__cell,
.cm-booking-card--preview .cm-cal-pro__cell,
.cm-booking-card--preview .cm-cal-chic__cell{
  min-height:42px !important;
}

.cm-booking-card--preview .cm-cal-minimal__day,
.cm-booking-card--preview .cm-cal-pro__day,
.cm-booking-card--preview .cm-cal-chic__day{
  min-height:42px !important;
  font-size:10px !important;
}

.cm-booking-card--preview .cm-cal-minimal__dot{
  display:none !important;
}

.cm-booking-card--preview .cm-booking-public-noteBox{
  margin-top:12px !important;
  padding:12px !important;
  border-radius:12px !important;
}

.cm-booking-card--preview .cm-booking-public-noteBox textarea{
  min-height:125px !important;
}

.cm-booking-card--preview .cm-booking-public-owner,
.cm-booking-card--preview .cm-booking-public-selectedDate{
  padding:9px 10px !important;
  margin-bottom:9px !important;
  border-radius:12px !important;
}

.cm-booking-card--preview .cm-booking-public-owner span,
.cm-booking-card--preview .cm-booking-public-owner strong,
.cm-booking-card--preview .cm-booking-public-selectedDate strong,
.cm-booking-card--preview .cm-booking-public-selectedDate span{
  font-size:10px !important;
}

.cm-booking-card--preview .cm-booking-public-form label{
  margin-bottom:7px !important;
  gap:4px !important;
  font-size:10px !important;
}

.cm-booking-card--preview .cm-booking-public-form label span{
  font-size:9px !important;
}

.cm-booking-card--preview .cm-booking-public-form input,
.cm-booking-card--preview .cm-booking-public-form select,
.cm-booking-card--preview .cm-booking-public-form textarea{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  min-height:30px !important;
  padding:7px 9px !important;
  border-radius:10px !important;
  font-size:10px !important;
}

.cm-booking-card--preview .cm-booking-public-two{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px !important;
}

.cm-booking-card--preview .cm-booking-public-submitLine{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:8px !important;
  margin-top:5px !important;
  padding-top:9px !important;
}

.cm-booking-card--preview .cm-booking-public-submitLine [data-booking-public-submit]{
  width:100% !important;
  min-width:0 !important;
  padding:9px 10px !important;
  font-size:11px !important;
}

.cm-booking-card--preview .cm-booking-public-meta{
  text-align:left !important;
  font-size:9px !important;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* 11.1 Modale de prévisualisation agrandie                                    */
/* ─────────────────────────────────────────────────────────────────────────── */

.cm-booking-previewModal{
  position:fixed;
  inset:0;
  z-index:999999;
  display:none;
}

.cm-booking-previewModal[aria-hidden="false"]{
  display:block;
}

.cm-booking-previewModalBackdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.56);
  backdrop-filter:blur(6px);
}

.cm-booking-previewModalPanel{
  position:relative;
  width:min(1180px, calc(100vw - 44px));
  max-height:calc(100vh - 44px);
  margin:22px auto;
  padding:22px;
  border:1px solid rgba(220,230,241,.95);
  border-radius:28px;
  background:#ffffff;
  box-shadow:0 32px 100px rgba(15,23,42,.34);
  overflow:auto;
}

.cm-booking-previewModalClose{
  position:absolute;
  top:18px;
  right:18px;
  z-index:5;
  width:50px;
  height:50px;
  border:1px solid #dce6f1;
  background:#ffffff;
  border-radius:17px;
  color:#132f57;
  font-size:30px;
  font-weight:900;
  line-height:1;
  cursor:pointer;
  box-shadow:0 14px 30px rgba(19,47,87,.12);
}

.cm-booking-previewModalClose:hover{
  background:#f8fbff;
  border-color:#bcd0ea;
}

.cm-booking-previewModalHead{
  padding:0 64px 18px 0;
}

.cm-booking-previewModalHead h3{
  margin:0;
  color:var(--cm-text);
  font-size:26px;
  line-height:1.15;
  letter-spacing:-.03em;
}

.cm-booking-previewModalHead p{
  margin:7px 0 0;
  color:var(--cm-text-soft);
  font-size:14px;
  line-height:1.5;
}

.cm-booking-publicPreviewHost--modal{
  width:100%;
  max-width:none;
  margin:0 auto;
  padding:0;
  overflow:visible;
}

/* La modale ne force plus les dimensions internes du calendrier public.
   booking-public.css garde la main sur .cm-booking-public,
   .cm-booking-public-layout, .cm-cal-template, etc. */

body.cm-booking-preview-modal-open{
  overflow:hidden !important;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* 11.2 Sécurité visuelle preview fixe                                         */
/* ─────────────────────────────────────────────────────────────────────────── */

[data-booking-preview-fixed="true"] button,
[data-booking-preview-fixed="true"] input,
[data-booking-preview-fixed="true"] select,
[data-booking-preview-fixed="true"] textarea{
  cursor:default !important;
}

[data-booking-preview-fixed="true"] input,
[data-booking-preview-fixed="true"] select,
[data-booking-preview-fixed="true"] textarea,
[data-booking-preview-fixed="true"] button[data-booking-public-submit]{
  pointer-events:none !important;
}

[data-booking-preview-fixed="true"] [data-booking-day]{
  pointer-events:none !important;
}

@media (max-width:980px){
  .cm-booking-card--preview .cm-booking-public-layout{
    grid-template-columns:1fr !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────── */