/* =========================================================
   KranBook – FULL CSS (SAFE for DevExtreme Scheduler)
   - Keeps your green slot blocks + styling
   - DOES NOT override appointment geometry (width/left/right)
   - Fixes the “thin appointment” issue caused by CSS
   ========================================================= */

/* =========================================================
   KranBook – global layout
   ========================================================= */

#kranbook-app {
  max-width: 1200px;
  margin: 0 auto;
}

#kranbook-app .kb-box {
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
}

#kranbook-app input {
  width: 260px;
  padding: 8px 10px;
}

#kranbook-app button {
  padding: 8px 12px;
  cursor: pointer;
}

/* =========================================================
   Scheduler – cells
   ========================================================= */

/* Always make cell positioning reliable */
.dx-scheduler-date-table-cell,
.dx-scheduler-all-day-table-cell {
  position: relative;
}

/* Disabled cells
.dx-scheduler-date-table-cell.kb-disabled-cell,
.dx-scheduler-all-day-table-cell.kb-disabled-cell {
  background: rgba(0,0,0,0.10) !important;
  opacity: 0.35 !important;
  cursor: not-allowed !important;
}
 */
.dx-scheduler-date-table-cell.kb-disabled-cell,
.dx-scheduler-all-day-table-cell.kb-disabled-cell {
  background-image:
    repeating-linear-gradient(
      135deg,
      rgba(247, 234, 224, 1),
      rgba(247, 234, 224, 1) 4px,
      transparent 4px,
      transparent 9px
    );
  color: rgba(178, 74, 0, 1);
}

/* Available cells: no background, just our rounded "slot block" */
.dx-scheduler-date-table-cell.kb-available-cell,
.dx-scheduler-all-day-table-cell.kb-available-cell {
  background: transparent !important;
  cursor: pointer !important;
}

/* Rounded green "slot block" for available cells */
.dx-scheduler-date-table-cell .kb-cell-time,
.dx-scheduler-all-day-table-cell .kb-cell-time {
  position: absolute;
  left: 6px;
  right: 6px;
  top: 6px;
  bottom: 6px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(80, 200, 120, 0.35);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;

  pointer-events: none;

  /* behind appointments */
  z-index: 1;
}

/* Hover: a touch stronger */
.dx-scheduler-date-table-cell.kb-available-cell:hover .kb-cell-time,
.dx-scheduler-all-day-table-cell.kb-available-cell:hover .kb-cell-time {
  background: rgba(80, 200, 120, 0.45);
}

/* If booked => hide green slot block */
.dx-scheduler-date-table-cell.kb-booked-cell .kb-cell-time,
.dx-scheduler-all-day-table-cell.kb-booked-cell .kb-cell-time {
  display: none !important;
}

/* Optional helper */
.kb-hide { display: none !important; }

/* =========================================================
   Scheduler – appointments (bookings)
   IMPORTANT:
   Do NOT set width/left/right for .dx-scheduler-appointment.
   DevExtreme uses inline width + transform positioning.
   ========================================================= */

/* Keep appointments above the green slot label */
.dx-scheduler-appointment {
  z-index: 10 !important;
  border-radius: 10px !important;
  overflow: hidden;
  box-sizing: border-box;
}
.dx-scheduler-work-space-month .dx-item-content.dx-scheduler-appointment-content {
    font-size: xx-small !important;
    line-height: 1.5em !important;
}
 
.dx-scheduler-work-space-month .dx-scheduler-appointment 
{
position: relative !important;
}
 
 
.dx-scheduler-work-space-month .dx-scheduler-work-space-month 
{ padding: 1px !important}
 
 
.dx-scheduler-work-space-month , dx-scheduler-appointment-content .kb-appt-title {
font-weight: inherit !important;
}
 
.dx-scheduler-work-space-month .dx-scheduler-appointment-content .kb-appt-time {
font-size: inherit !important;
}
 
.dx-scheduler-work-space-month .dx-item-content.dx-scheduler-appointment-content {
    font-size: xx-small !important;
}


/* Title/time classes if you use appointmentTemplate */
.kb-appt-title {
  font-weight: 600;
  line-height: 1.1;
}

.kb-appt-time {
  font-size: 12px;
  opacity: 0.9;
  line-height: 1.1;
}

/* Month view can be cramped – tighten content a little */
.dx-scheduler-month-view .dx-scheduler-appointment .dx-scheduler-appointment-content {
  padding: 4px 6px !important;
  gap: 1px;
}

/* Agenda view: left aligned, more padding */
.dx-scheduler-agenda .dx-scheduler-appointment .dx-scheduler-appointment-content {
  align-items: flex-start;
  text-align: left;
  padding: 10px 12px !important;
}

/* =========================================================
   Appointment form cleanup (Repeat switch removal)
   ========================================================= */

/* Hide any switch (aggressive but works across dx versions) */
.dx-scheduler-appointment-form .dx-switch {
  display: none !important;
}

/* Remove the whole row that contains the recurrence switch */
.dx-scheduler-appointment-form .dx-field-item:has(.dx-switch-wrapper) {
  display: none !important;
}

/* More specific selector from your earlier attempt */
.dx-appointment-form-switch.e2e-dx-scheduler-form-recurrence-switch {
  display: none !important;
}
/* Popover card look */
#kb-appt-popover .dx-overlay-content{
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  padding: 10px 12px;
}

.kb-pop-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
}

.kb-pop-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  margin-top:6px;
  background:#9cc7ff; /* match your appointment color */
  flex:0 0 auto;
}

.kb-pop-main{ flex:1 1 auto; min-width:0; }

.kb-pop-title{
  font-weight:600;
  font-size:14px;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.kb-pop-time{
  font-size:12px;
  opacity:.8;
  margin-top:3px;
}

.kb-pop-desc{
  font-size:12px;
  opacity:.85;
  margin-top:6px;
  max-height:60px;
  overflow:auto;
}

.kb-pop-del{
  border:0;
  background:transparent;
  cursor:pointer;
  padding:6px;
  border-radius:6px;
  opacity:.75;
}

.kb-pop-del:hover{
  background:rgba(0,0,0,.06);
  opacity:1;
}