/* ---- Client Viewer: configurable CSS variables (set by settings) ---- */
.masparis-client-viewer{
  --cv-btn-jour: #2ecc71;
  --cv-btn-salle: #3498db;
  --cv-note-bg: #f39c12;
  --cv-note-color: #ffffff;
  --cv-hour-bg: #bfe3c6;
  --cv-grid-bg: #ffffff;
  --cv-border: #d9d9d9;
  --cv-cell-h: 44px;
  --cv-event-text: #ffffff;
}

/* Center controls toggle */
.masparis-client-viewer.cv-center-controls .cv-buttons,
.masparis-client-viewer.cv-center-controls .cv-legend,
.masparis-client-viewer.cv-center-controls .cv-rooms{
  justify-content:center;
}

/* Client Viewer - Crystal buttons + legend + rooms buttons */
.masparis-client-viewer{
  font-family: inherit;
}

/* ---- PRO Date input (replaces big inline calendar) ---- */
.masparis-client-viewer .cv-datepicker-box{
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}
.masparis-client-viewer .cv-date-label{
  display:block;
  font-weight:800;
  font-size:12px;
  margin-bottom:8px;
  color:#111;
}
.masparis-client-viewer .cv-date-input{
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  font-weight:800;
  font-size:14px;
  text-align:center;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.75));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
  outline: none;
}
.masparis-client-viewer .cv-date-input:focus{
  border-color: rgba(0,0,0,.22);
  box-shadow: 0 0 0 4px rgba(52, 152, 219, .15);
}

/* Datepicker popup polish + always above */
.ui-datepicker{ z-index: 999999 !important; }
.masparis-client-viewer .ui-datepicker{
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
}
.masparis-client-viewer .ui-datepicker .ui-datepicker-header{
  border:0;
  background: linear-gradient(135deg, #111, #2b2b2b);
  color:#fff;
}
.masparis-client-viewer .ui-datepicker .ui-datepicker-title,
.masparis-client-viewer .ui-datepicker .ui-datepicker-title select{
  color:#fff;
  font-weight:800;
}
.masparis-client-viewer .ui-datepicker .ui-datepicker-prev,
.masparis-client-viewer .ui-datepicker .ui-datepicker-next{
  filter: invert(1);
}
.masparis-client-viewer .ui-datepicker td a{
  border-radius: 10px;
}
.masparis-client-viewer .ui-datepicker td a.ui-state-active{
  background: #111;
  border: 0;
}

.masparis-client-viewer .cv-buttons{
  justify-content:center;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin: 10px 0 14px;
}

.masparis-client-viewer .cv-btn{
  border:0;
  padding:12px 18px;
  border-radius:18px;
  color:var(--cv-event-text);
  cursor:pointer;
  box-shadow: 0 10px 20px rgba(0,0,0,.10);
  backdrop-filter: blur(8px);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  opacity:.92;
}

.masparis-client-viewer .cv-btn:hover{ transform: translateY(-1px); opacity:1; }
.masparis-client-viewer .cv-btn.is-active{ transform: translateY(-2px); opacity:1; box-shadow: 0 14px 28px rgba(0,0,0,.14); }

.masparis-client-viewer .cv-btn--jour{
  background: linear-gradient(135deg, var(--cv-btn-jour), var(--cv-btn-jour));
}
.masparis-client-viewer .cv-btn--salle{
  background: linear-gradient(135deg, var(--cv-btn-salle), var(--cv-btn-salle));
}

.masparis-client-viewer .cv-legend{
  justify-content:center;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin: 8px 0 12px;
}

/* Legend style: colored square + black label (as requested) */
.masparis-client-viewer .cv-legend__wrap{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:18px;
  align-items:center;
}
.masparis-client-viewer .cv-legend__item{
  display:flex;
  align-items:center;
  gap:8px;
}
.masparis-client-viewer .cv-legend__swatch{
  width:14px;
  height:14px;
  border-radius:4px;
  display:inline-block;
  box-shadow: 0 6px 14px rgba(0,0,0,.10);
}
.masparis-client-viewer .cv-legend__label{
  color:#000;
  font-weight:600;
  font-size:13px;
}

.masparis-client-viewer .cv-status{
  padding:7px 10px;
  border-radius:10px;
  color:var(--cv-event-text);
  font-size:13px;
  line-height:1;
  box-shadow: 0 8px 16px rgba(0,0,0,.10);
}

.masparis-client-viewer .cv-note{
  background:var(--cv-note-bg);
  color:var(--cv-note-color);
  padding:10px 12px;
  border-radius:12px;
  margin: 10px 0 12px;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}

.masparis-client-viewer .cv-rooms{
  justify-content:center;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin: 10px 0 12px;
}

.masparis-client-viewer .cv-room{
  border:0;
  border-radius:12px;
  padding:8px 12px;
  color:var(--cv-event-text);
  cursor:pointer;
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
  opacity:.92;
  transition: transform .12s ease, opacity .12s ease;
  position: relative;
  overflow: hidden;
}
.masparis-client-viewer .cv-room::before{
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0));
  pointer-events:none;
}
.masparis-client-viewer .cv-room:hover{ transform: translateY(-1px); opacity:1; }
.masparis-client-viewer .cv-room.is-active{ transform: translateY(-2px); opacity:1; }

.masparis-client-viewer .cv-panel{ display:none; }
.masparis-client-viewer .cv-panel.is-active{ display:block; }

.masparis-client-viewer .cv-error{
  padding:10px 12px;
  border-left: 4px solid #dc3232;
  background:#fff;
}

/* Hide original dropdown in salle viewer */
.masparis-client-viewer .cv-hide-original .masparis-viewer__select{
  display:none !important;
}

/* Responsive tweaks */
@media (max-width: 768px){
  .masparis-client-viewer .cv-btn{ width:100%; justify-content:center; }
}


/* Week grid for Planning par salle */
.cv-week{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.cv-week__label{
  width: 90px;
  flex: 0 0 90px;
}

.cv-week__range{
  font-weight: 700;
  margin: 6px 0 10px;
  text-align:center;
}

.cv-week__slot{
  height: var(--cv-cell-h);
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--cv-hour-bg);
  border-bottom: 1px solid var(--cv-border);
  font-weight:600;
}

.cv-week__cols{
  display:flex;
  gap:0;
  flex: 1 1 auto;
  overflow-x:auto;
  border-radius: 10px;
}

.cv-week__col{
  min-width: 120px;
  border-left: 1px solid var(--cv-border);
}

.cv-week__colhead{
  background:#fff;
  padding: 8px 6px;
  text-align:center;
  font-weight:700;
  border-bottom: 1px solid var(--cv-border);
}

.cv-week__cell{
  height: var(--cv-cell-h);
  position:relative;
  border-bottom: 1px solid var(--cv-border);
  background:var(--cv-grid-bg);
}

.cv-week__event{
  position:absolute;
  left: 6px;
  right: 6px;
  top: 0;
  border-radius: 6px;
  padding: 6px 6px;
  color:var(--cv-event-text);
  font-size: 12px;
  overflow:hidden;
}

.cv-week__event h6{
  margin:0;
  font-size:12px;
  font-weight:700;
}

/* Room buttons */
.cv-room-btn, .cv-room{
  border:0;
  padding:10px 14px;
  margin: 4px 6px 0 0;
  border-radius: 14px;
  cursor:pointer;
  color:var(--cv-event-text);
  font-weight:700;
  box-shadow: 0 8px 16px rgba(0,0,0,.12);
  opacity:.85;
}
.cv-room-btn, .cv-room.is-active{ opacity:1; outline:2px solid rgba(0,0,0,.12); }

/* Different colors for room buttons */
.cv-room-btn, .cv-room--1{ background:#6c5ce7; }
.cv-room-btn, .cv-room--2{ background:#2ecc71; }
.cv-room-btn, .cv-room--3{ background:#f39c12; }
.cv-room-btn, .cv-room--4{ background:#e74c3c; }
.cv-room-btn, .cv-room--5{ background:#9b59b6; }
.cv-room-btn, .cv-room--6{ background:#1abc9c; }
.cv-room-btn, .cv-room--7{ background:#e84393; }
.cv-room-btn, .cv-room--8{ background:#f1c40f; color:#2d3436; }

@media (max-width: 900px){
  .cv-week__label{ width: 70px; flex-basis:70px; }
  .cv-week__col{ min-width: 110px; }
}


/* Legend: colored square + black label (normal background) */
.masparis-client-viewer .cv-legend-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:12px;
  background: transparent;
}

.masparis-client-viewer .cv-legend-swatch{
  width:18px;
  height:18px;
  border-radius:5px;
  box-shadow: 0 6px 14px rgba(0,0,0,.10);
  flex: 0 0 auto;
}

.masparis-client-viewer .cv-legend-label{
  color:#000;
  font-size:14px;
  font-weight:600;
}

/* Backward compatibility if .cv-status exists */
.masparis-client-viewer .cv-status{
  background: transparent !important;
  color:#000 !important;
  box-shadow:none !important;
  padding:0 !important;
}

.masparis-client-viewer .masparis-planning__event h6,
.masparis-client-viewer .cv-week__event h6{
  color:#fff !important;
  font-weight:700;
}

.masparis-client-viewer .masparis-planning__event,
.masparis-client-viewer .cv-week__event{
  border-radius:8px;
}


/* Legend (square swatch + black label) */
.masparis-client-viewer .cv-legend__wrap{
  display:flex;
  justify-content:center;
  gap:22px;
  flex-wrap:wrap;
  align-items:center;
  margin: 6px 0 14px;
}
.masparis-client-viewer .cv-legend__item{
  display:flex;
  align-items:center;
  gap:8px;
  background:transparent;
}
.masparis-client-viewer .cv-legend__swatch{
  width:14px;
  height:14px;
  border-radius:4px;
  display:inline-block;
}
.masparis-client-viewer .cv-legend__label{
  color:#000;
  font-weight:600;
}

/* Rooms centered */
.masparis-client-viewer .cv-rooms__wrap{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  margin: 10px 0 8px;
}
.masparis-client-viewer .cv-room{
  border:0;
  padding:10px 16px;
  border-radius:16px;
  cursor:pointer;
  color:var(--cv-event-text);
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
  background:#7f8c8d;
}
.masparis-client-viewer .cv-room.is-active{
  outline:3px solid rgba(0,0,0,0.12);
}

/* Note */
.masparis-client-viewer .cv-note{
  background:var(--cv-note-bg);
  color:var(--cv-note-color);
  padding:12px 16px;
  border-radius:14px;
  margin: 6px 0 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.10);
}

/* Week grid (Planning par salle) */
.masparis-client-viewer .cv-week__title{
  text-align:center;
  font-weight:800;
  margin: 6px 0 10px;
}
.masparis-client-viewer .cv-week__scroller{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
}
.masparis-client-viewer .cv-week__scroller::-webkit-scrollbar{ height: 10px; }
.masparis-client-viewer .cv-week__scroller::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.18); border-radius: 999px; }

.masparis-client-viewer .cv-week__header{
  display:grid;
  grid-template-columns: 90px repeat(7, minmax(150px, 1fr));
  gap:0;
  min-width: calc(90px + 7 * 150px);
  position: sticky;
  top: 0;
  z-index: 50;
}
.masparis-client-viewer .cv-week__corner{
  background: var(--cv-salle-dayhead-bg, #fff);
  position: sticky;
  left: 0;
  z-index: 60;
}
.masparis-client-viewer .cv-week__dayhead{
  background: var(--cv-salle-dayhead-bg, #fff);
  color: var(--cv-salle-dayhead-color, #000);
  font-weight:700;
  padding:10px 6px;
  text-align:center;
  border-left:1px solid rgba(0,0,0,0.08);
  border-bottom:1px solid rgba(0,0,0,0.08);
}
.masparis-client-viewer .cv-week__body{
  display:grid;
  grid-template-columns: 90px repeat(7, minmax(150px, 1fr));
  min-width: calc(90px + 7 * 150px);
}
.masparis-client-viewer .cv-week__timecol{
  background: rgba(46, 204, 113, 0.15);
  position: sticky;
  left: 0;
  z-index: 40;
}
.masparis-client-viewer .cv-week__timeslot{
  height: var(--cv-cell-h);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  border-bottom:1px solid rgba(0,0,0,0.05);
}
.masparis-client-viewer .cv-week__daycol{
  position:relative;
  border-left:1px solid rgba(0,0,0,0.08);
}
.masparis-client-viewer .cv-week__slot{
  height: var(--cv-cell-h);
  background: var(--cv-grid-bg);
  border-bottom:1px solid rgba(0,0,0,0.05);
  position:relative;
  z-index: 1;
}

/* Half-hour separator line inside each hour slot (enabled via --cv-halfline) */
.masparis-client-viewer .cv-week__slot::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  top: calc(var(--cv-cell-h) / 2);
  height:1px;
  background: rgba(0,0,0,0.10);
  opacity: var(--cv-halfline, 1);
  pointer-events:none;
}
.masparis-client-viewer .cv-week__event{
  position:absolute;
  left:4px;
  right:4px;
  top:2px;
  border-radius:8px;
  padding:8px 10px;
  font-weight:800;
  font-size:12px;
  line-height:1.1;
  box-shadow: 0 10px 18px rgba(0,0,0,0.10);
  z-index: 5;
}
.masparis-client-viewer .cv-week__event.start-30{
  top: calc(var(--cv-cell-h) / 2 + 2px);
}

/* Empty */
.masparis-client-viewer .cv-empty{
  padding:16px;
  background:#fff;
  border-radius:10px;
  border-left:4px solid #d9534f;
}

/* ---- Day grid (planning global classes) overrides for requested look ---- */
.masparis-client-viewer .masparis-planning__planning{
  background: var(--cv-grid-bg);
}
.masparis-client-viewer .masparis-planning__slot{
  background: var(--cv-grid-bg);
  border-bottom: 1px solid var(--cv-border);
  position: relative;
  height: var(--cv-cell-h);
}

/* Hour column only */
.masparis-client-viewer .masparis-planning__label .masparis-planning__slot{
  background: var(--cv-hour-bg);
}

/* Half-hour separator in day grid slots */
.masparis-client-viewer .masparis-planning__slot::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  top: calc(var(--cv-cell-h) / 2);
  height:1px;
  background: rgba(0,0,0,0.10);
  opacity: var(--cv-halfline, 1);
  pointer-events:none;
}

.masparis-client-viewer .masparis-planning__event{
  z-index: 10;
}
.masparis-client-viewer .masparis-planning__room, 
.masparis-client-viewer .masparis-planning__room-name{
  background: var(--cv-hour-bg);
}
.masparis-client-viewer .masparis-planning__cell{
  background: var(--cv-grid-bg);
  border-bottom: 1px solid var(--cv-border);
  border-right: 1px solid var(--cv-border);
}

/* Better responsiveness: stack sidebar on small screens */
@media (max-width: 900px){
  .masparis-client-viewer .masparis-viewer__layout{
    flex-direction: column;
  }
  .masparis-client-viewer .masparis-viewer__sidebar{
    width: 100%;
    max-width: none;
  }
  .masparis-client-viewer .masparis-viewer__main{
    width: 100%;
    overflow-x: auto;
  }
}

/* Small screens: slightly tighter columns + spacing */
@media (max-width: 520px){
  .masparis-client-viewer .cv-week__header,
  .masparis-client-viewer .cv-week__body{
    grid-template-columns: 74px repeat(7, minmax(130px, 1fr));
    min-width: calc(74px + 7 * 130px);
  }
  .masparis-client-viewer .cv-week__timeslot{
    font-size: 12px;
  }
  .masparis-client-viewer .cv-week__dayhead{ padding: 8px 4px; font-size: 12px; }
  .masparis-client-viewer .cv-week__event{ padding: 7px 8px; font-size: 11px; }
}



/* ---- SALLE datepicker: black header / white text ---- */
.masparis-client-viewer .cv-panel--salle .ui-datepicker{
  background:#f4f4f4;
  border:1px solid #cfcfcf;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}
.masparis-client-viewer .cv-panel--salle .ui-datepicker .ui-datepicker-header{
  background:#e6e6e6;
  border:0;
  color:#111;
}
.masparis-client-viewer .cv-panel--salle .ui-datepicker .ui-datepicker-title,
.masparis-client-viewer .cv-panel--salle .ui-datepicker .ui-datepicker-title select{
  color:#111;
}
.masparis-client-viewer .cv-panel--salle .ui-datepicker .ui-datepicker-title select{
  background:#fff;
  border:1px solid #cfcfcf;
  padding:2px 6px;
  border-radius:6px;
  font-weight:700;
}
.masparis-client-viewer .cv-panel--salle .ui-datepicker select.ui-datepicker-month{ min-width:64px; }
.masparis-client-viewer .cv-panel--salle .ui-datepicker select.ui-datepicker-year{ min-width:86px; }
.masparis-client-viewer .cv-panel--salle .ui-datepicker .ui-state-default{
  background:#fff;
  border:1px solid #d7d7d7;
  color:#111;
}
.masparis-client-viewer .cv-panel--salle .ui-datepicker .ui-state-hover{
  background:#efefef;
}
.masparis-client-viewer .cv-panel--salle .ui-datepicker th{
  color:#fff;
}
.masparis-client-viewer .cv-panel--salle .ui-datepicker td a{
  color:#fff;
}
.masparis-client-viewer .cv-panel--salle .ui-datepicker td{
  background:#111;
}
.masparis-client-viewer .cv-panel--salle .ui-datepicker td a.ui-state-active,
.masparis-client-viewer .cv-panel--salle .ui-datepicker td a.ui-state-hover{
  background:#333;
  border:1px solid #666;
}
.masparis-client-viewer .cv-panel--salle .ui-datepicker select.ui-datepicker-year{
  width: 92px; /* ensure 2026 visible */
  padding-right: 8px;
}
.masparis-client-viewer .cv-panel--salle .ui-datepicker select.ui-datepicker-month{
  width: 110px;
}

/* ---- Mobile/Tablet portrait: stacked days/rooms, show only reservations ---- */
.masparis-client-viewer .cv-mobile{
  width:100%;
}
.masparis-client-viewer .cv-mobile__title{
  font-weight:700;
  font-size:18px;
  margin: 8px 0 12px;
}
.masparis-client-viewer .cv-mobile__section{
  background:#fff;
  border:1px solid var(--cv-border);
  border-radius:12px;
  padding:10px 12px;
  margin: 10px 0;
}
.masparis-client-viewer .cv-mobile__section-title{
  font-weight:700;
  margin-bottom:8px;
}
.masparis-client-viewer .cv-mobile__events{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.masparis-client-viewer .cv-mobile__event{
  border-radius:10px;
  padding:10px 12px;
  color: var(--cv-event-text);
  font-weight:700;
}


/* ===== PRO MAX Client Viewer Overrides (2026-02) ===== */

/* Ensure events render فوق الخانات (fix: events truncated to 1 slot) */
.masparis-client-viewer .cv-week__event{
  z-index: 50 !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
  pointer-events: none; /* read-only */
}
.masparis-client-viewer .cv-week__daycol,
.masparis-client-viewer .cv-week__col{
  overflow: visible;
}
.masparis-client-viewer .cv-week__cols{
  overflow-x: auto;
  overflow-y: visible;
}

/* Crystal top mode buttons */
.masparis-client-viewer .cv-buttons{
  display:flex;
  gap:12px;
  margin: 14px 0 12px;
  flex-wrap: wrap;
}
.masparis-client-viewer .cv-btn{
  border: 0;
  border-radius: 14px;
  padding: 12px 18px;
  font-weight: 800;
  letter-spacing: .2px;
  color:#fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  position:relative;
  overflow:hidden;
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.masparis-client-viewer .cv-btn::before{
  content:"";
  position:absolute;
  inset: -40% -40% auto -40%;
  height: 120%;
  transform: rotate(12deg);
  background: rgba(255,255,255,.20);
  filter: blur(0.2px);
  pointer-events:none;
}
.masparis-client-viewer .cv-btn:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.24); }
.masparis-client-viewer .cv-btn.is-active{ filter: saturate(1.15) contrast(1.05); }

/* keep your green/blue intent but make it glossy */
.masparis-client-viewer .cv-btn--jour{ background: linear-gradient(135deg,#16d98a,#0aa8ff); }
.masparis-client-viewer .cv-btn--salle{ background: linear-gradient(135deg,#2f7bff,#6a5cff); }

/* Crystal room buttons */
.masparis-client-viewer .cv-rooms__wrap{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 12px 0 10px;
}
.masparis-client-viewer .cv-room{
  border: 0;
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 800;
  color:#fff;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  transform: translateZ(0);
}
.masparis-client-viewer .cv-room::after{
  content:"";
  position:absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 15%, rgba(255,255,255,.38), rgba(255,255,255,0) 55%);
  pointer-events:none;
}
.masparis-client-viewer .cv-room:hover{ transform: translateY(-2px) scale(1.02); box-shadow: 0 14px 30px rgba(0,0,0,.26); }
.masparis-client-viewer .cv-room.is-active{ outline: 3px solid rgba(255,255,255,.55); filter: saturate(1.2) contrast(1.08); }

/* If no custom color is provided inline, add vibrant gradients per button order */
.masparis-client-viewer .cv-rooms__wrap .cv-room:not([style]):nth-child(1){ background: linear-gradient(135deg,#00c6ff,#0072ff); }
.masparis-client-viewer .cv-rooms__wrap .cv-room:not([style]):nth-child(2){ background: linear-gradient(135deg,#ff512f,#dd2476); }
.masparis-client-viewer .cv-rooms__wrap .cv-room:not([style]):nth-child(3){ background: linear-gradient(135deg,#00b09b,#96c93d); }
.masparis-client-viewer .cv-rooms__wrap .cv-room:not([style]):nth-child(4){ background: linear-gradient(135deg,#8e2de2,#4a00e0); }
.masparis-client-viewer .cv-rooms__wrap .cv-room:not([style]):nth-child(5){ background: linear-gradient(135deg,#f7971e,#ffd200); }

/* Orange note (more readable) */
.masparis-client-viewer .cv-note{
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  font-weight: 700;
}

/* Pro Datepicker (jQuery UI) */
.masparis-client-viewer .ui-datepicker{
  width: 100%;
  border: 0;
  border-radius: 14px;
  overflow:hidden;
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
}
.masparis-client-viewer .ui-datepicker-header{
  border:0;
  background: linear-gradient(135deg,#111827,#1f2937);
  color:#fff;
  padding: 10px 10px;
}
.masparis-client-viewer .ui-datepicker-title{ font-weight: 900; }
.masparis-client-viewer .ui-datepicker-calendar th{
  padding: 8px 0;
  font-weight: 900;
}
.masparis-client-viewer .ui-datepicker-calendar td a{
  border:0 !important;
  border-radius: 10px;
  padding: 10px 0;
  text-align:center;
  transition: transform .12s ease, filter .12s ease;
}
.masparis-client-viewer .ui-datepicker-calendar td a:hover{
  transform: translateY(-1px);
  filter: saturate(1.2);
}
.masparis-client-viewer .ui-datepicker-today a{
  outline: 2px solid rgba(17,24,39,.35);
}
.masparis-client-viewer .ui-state-active,
.masparis-client-viewer .ui-widget-content .ui-state-active{
  background: linear-gradient(135deg,#16d98a,#0aa8ff) !important;
  color:#fff !important;
}

/* Responsive: make planning fit all devices */
@media (max-width: 1024px){
  .masparis-client-viewer .cv-week__col{ min-width: 110px; }
}
@media (max-width: 768px){
  .masparis-client-viewer .masparis-viewer__layout{ display:block; }
  .masparis-client-viewer .masparis-viewer__sidebar{ width: 100%; position: static; margin-bottom: 12px; }
  .masparis-client-viewer .cv-week__label{ width: 64px; flex: 0 0 64px; }
  .masparis-client-viewer .cv-week__col{ min-width: 92px; }
  .masparis-client-viewer .cv-week__event{ font-size: 11px; padding: 5px 6px; }
}
@media (max-width: 420px){
  .masparis-client-viewer .cv-week__label{ width: 56px; flex: 0 0 56px; }
  .masparis-client-viewer .cv-room{ width: calc(50% - 6px); justify-content:center; }
}

/* subtle animations */
@keyframes cvFadeIn { from {opacity:0; transform: translateY(4px);} to {opacity:1; transform: translateY(0);} }
.masparis-client-viewer .cv-panel.is-active{ animation: cvFadeIn .18s ease both; }
.masparis-client-viewer .cv-week__event{ animation: cvFadeIn .14s ease both; }


/* =========================
   PRO MAX V2 fixes & polish
   ========================= */

/* Week grid: ensure events can overlap slots without being clipped */
.masparis-client-viewer .cv-week__daycol{
  position: relative;
}
.masparis-client-viewer .cv-week__slot{
  position: relative;
  z-index: 1;
}
.masparis-client-viewer .cv-week__event{
  z-index: 999 !important;
  pointer-events: none; /* viewer is read-only */
}

/* Sticky time column for easier reading */
.masparis-client-viewer .cv-week__body{
  overflow-x: auto;
}
.masparis-client-viewer .cv-week__timecol{
  position: sticky;
  left: 0;
  z-index: 80;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(6px);
}
.masparis-client-viewer .cv-week__header{
  position: sticky;
  top: 0;
  z-index: 70;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(6px);
}
.masparis-client-viewer .cv-week__corner{
  position: sticky;
  left: 0;
  z-index: 90;
  background: rgba(255,255,255,0.9);
}

/* Crystal room buttons (strong override to avoid grey pills) */
.masparis-client-viewer .cv-rooms{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding: 8px 0 12px;
}
.masparis-client-viewer .cv-room-btn, .cv-room{
  position: relative;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  font-weight: 800;
  letter-spacing: .2px;
  cursor: pointer;
  background: linear-gradient(135deg, rgba(0,198,255,0.95), rgba(0,114,255,0.95));
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  overflow: hidden;
}
.masparis-client-viewer .cv-room-btn, .cv-room::before{
  content:'';
  position:absolute;
  inset:-2px;
  background: radial-gradient(circle at 20% 15%, rgba(255,255,255,.75), rgba(255,255,255,0) 45%);
  opacity:.55;
  pointer-events:none;
}
.masparis-client-viewer .cv-room-btn, .cv-room:hover{
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 14px 30px rgba(0,0,0,0.24);
  filter: saturate(1.15);
}
.masparis-client-viewer .cv-room-btn, .cv-room.active{
  background: linear-gradient(135deg, rgba(255,152,0,0.98), rgba(255,87,34,0.98));
  box-shadow: 0 14px 30px rgba(0,0,0,0.26);
}

/* Different crystal colors */
.masparis-client-viewer .cv-room-btn, .cv-room:nth-child(2){ background: linear-gradient(135deg, rgba(255,81,47,.98), rgba(221,36,118,.98)); }
.masparis-client-viewer .cv-room-btn, .cv-room:nth-child(3){ background: linear-gradient(135deg, rgba(0,176,155,.98), rgba(150,201,61,.98)); }
.masparis-client-viewer .cv-room-btn, .cv-room:nth-child(4){ background: linear-gradient(135deg, rgba(142,45,226,.98), rgba(74,0,224,.98)); }
.masparis-client-viewer .cv-room-btn, .cv-room:nth-child(5){ background: linear-gradient(135deg, rgba(247,151,30,.98), rgba(255,210,0,.98)); }
.masparis-client-viewer .cv-room-btn, .cv-room:nth-child(6){ background: linear-gradient(135deg, rgba(0,242,254,.98), rgba(79,172,254,.98)); }
.masparis-client-viewer .cv-room-btn, .cv-room:nth-child(7){ background: linear-gradient(135deg, rgba(67,206,162,.98), rgba(24,90,157,.98)); }
.masparis-client-viewer .cv-room-btn, .cv-room:nth-child(8){ background: linear-gradient(135deg, rgba(240,147,251,.98), rgba(245,87,108,.98)); }

/* Datepicker PRO skin (jQuery UI) */
.masparis-client-viewer .ui-datepicker{
  width: auto;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
  overflow: hidden;
}
.masparis-client-viewer .ui-datepicker .ui-datepicker-header{
  border: 0;
  border-radius: 0;
  padding: 10px 10px;
  background: linear-gradient(135deg, rgba(17,24,39,.96), rgba(55,65,81,.96));
  color: #fff;
}
.masparis-client-viewer .ui-datepicker .ui-datepicker-title select{
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.12);
  color: #fff;
  padding: 6px 10px;
}
.masparis-client-viewer .ui-datepicker table{
  margin: 0;
}
.masparis-client-viewer .ui-datepicker th{
  padding: 8px 0;
  color: rgba(17,24,39,.7);
  font-weight: 700;
}
.masparis-client-viewer .ui-datepicker td a{
  border: 0 !important;
  border-radius: 10px !important;
  padding: 10px 0 !important;
  text-align: center;
  background: transparent !important;
}
.masparis-client-viewer .ui-datepicker td a:hover{
  background: rgba(59,130,246,.12) !important;
}
.masparis-client-viewer .ui-datepicker .ui-state-active{
  background: rgba(59,130,246,.22) !important;
  color: #111827 !important;
  font-weight: 800 !important;
}

/* Mobile polish */
@media (max-width: 900px){
  .masparis-client-viewer .cv-rooms{
    gap:8px;
  }
  .masparis-client-viewer .cv-room-btn, .cv-room{
    padding: 9px 12px;
    font-size: 12px;
  }
}


/* ===========================
   PRO MAX v4 UI Enhancements
   =========================== */

.masparis-client-viewer .cv-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin: 10px 0 14px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  backdrop-filter: blur(10px);
}

.masparis-client-viewer .cv-toolbar__left,
.masparis-client-viewer .cv-toolbar__right{
  display:flex;
  align-items:center;
  gap:10px;
}

.masparis-client-viewer .cv-toolbtn{
  appearance:none;
  border:0;
  padding: 10px 12px;
  border-radius: 14px;
  font-weight: 900;
  cursor:pointer;
  color:#0b1220;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.70));
  box-shadow: 0 10px 22px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.65);
  transition: transform .15s ease, box-shadow .15s ease;
}
.masparis-client-viewer .cv-toolbtn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.65);
}
.masparis-client-viewer .cv-toolbtn:active{ transform: translateY(0); }

.masparis-client-viewer .cv-filter{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.75));
  font-weight: 800;
  min-width: 170px;
}

.masparis-client-viewer .cv-print{
  padding-left: 14px;
  padding-right: 14px;
}

.masparis-client-viewer .cv-week__scroller{
  overflow:auto;
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(0,0,0,.12);
}

/* Drag-to-scroll UX */
.masparis-client-viewer .cv-week__scroller.is-dragging{
  cursor: grabbing;
}
.masparis-client-viewer .cv-week__scroller{
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}

/* Tooltip */
.masparis-client-viewer .cv-tooltip{
  position: fixed;
  z-index: 1000000;
  max-width: 320px;
  padding: 10px 12px;
  border-radius: 14px;
  color: #0b1220;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 18px 44px rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
  pointer-events: none;
  transform: translateY(6px);
  opacity: 0;
  transition: opacity .12s ease, transform .12s ease;
}
.masparis-client-viewer .cv-tooltip.is-visible{
  opacity: 1;
  transform: translateY(0);
}
.masparis-client-viewer .cv-tooltip__title{
  font-weight: 900;
  margin-bottom: 6px;
}
.masparis-client-viewer .cv-tooltip__row{
  font-size: 12px;
  line-height: 1.35;
  opacity: .92;
}
.masparis-client-viewer .cv-week__event{
  box-shadow: 0 14px 34px rgba(0,0,0,.16);
}

/* Sticky header & time column (better on all devices) */
.masparis-client-viewer .cv-week__header{
  position: sticky;
  top: 0;
  z-index: 20;
}
.masparis-client-viewer .cv-week__timecol{
  position: sticky;
  left: 0;
  z-index: 15;
}

/* Responsive: ensure toolbar wraps nicely */
@media (max-width: 768px){
  .masparis-client-viewer .cv-toolbar{
    flex-direction: column;
    align-items: stretch;
  }
  .masparis-client-viewer .cv-toolbar__left,
  .masparis-client-viewer .cv-toolbar__right{
    justify-content: space-between;
  }
  .masparis-client-viewer .cv-filter{ min-width: 0; width: 100%; }
}