/* assets/css/ltc-booking.css */

/* ---------- Design tokens ---------- */
:root{
  --ltc-bg: #f7f8fc;
  --ltc-card: #ffffff;
  --ltc-border: #e7eaf3;
  --ltc-text: #0f172a;
  --ltc-muted: #64748b;
  --ltc-primary: #2563eb;

  /* tile stripes */
  --stripe-new: #22c55e;
  --stripe-moving: #f59e0b;
  --stripe-enquiry: #38bdf8;
  --stripe-default: #111827;

  /* JS sets this at runtime so header = body width when vertical scrollbar appears */
  --sbw: 0px;

  /* base column width for week "Time" column */
  --time-col: 120px;
}

/* ---------- Page + toolbar ---------- */
#admin-schedule{ background:var(--ltc-bg); padding:16px; }

#admin-schedule .schedule-toolbar{
  display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center; justify-content:space-between;
  margin-bottom: 14px;
}
#schedule-date-range{ font-weight:600; color:var(--ltc-text); }

#admin-schedule .btn{
  border:1px solid var(--ltc-border); background:#fff; color:var(--ltc-text);
  padding:8px 12px; border-radius:10px; font-weight:500; transition:.15s ease;
}
#admin-schedule .btn:hover{ transform:translateY(-1px); border-color:#d6dae5; }
#view-weekly-btn.active,#view-monthly-btn.active{ background:var(--ltc-primary); color:#fff; border-color:var(--ltc-primary); }

/* ---------- Calendar container card ---------- */
#session-calendar-container{
  background:var(--ltc-card); border:1px solid var(--ltc-border);
  border-radius:12px; box-shadow:0 10px 30px rgba(16,24,40,.06);
  overflow:hidden;
}

/* ---------- Shared header (week + month) ---------- */
.session-grid-header{
  display:grid; grid-auto-flow:column; gap:0;
  background:linear-gradient(#fff,#fbfdff);
  border-bottom:1px solid var(--ltc-border);
  position:sticky; top:0; z-index:1;

  /* week: time col + 7 days + scrollbar gutter track
     month: the first track will simply be unused (harmless) */
  grid-template-columns: var(--time-col) repeat(7, minmax(0,1fr)) var(--sbw);
  padding-right: var(--sbw); /* keep visual width equal to body when it scrolls */
  box-sizing:border-box;
}
.session-grid-header::after{ content:""; } /* invisible gutter track */

.time-col-header{
  min-width:var(--time-col); max-width:var(--time-col); padding:12px 12px;
  color:var(--ltc-muted); text-transform:uppercase; letter-spacing:.04em; font-size:.85rem;
  border-right:1px solid var(--ltc-border); box-sizing:border-box;
}
.day-col-header{
  padding:12px 10px; text-align:left; font-weight:600; color:var(--ltc-text);
  border-right:1px solid var(--ltc-border); box-sizing:border-box;
}
.day-col-header small{ font-weight:500; color:var(--ltc-muted); }

/* ---------- WEEK VIEW ---------- */
.session-grid-body--week{
  display:grid;
  grid-template-columns: var(--time-col) repeat(7, minmax(0,1fr)); /* no gutter column */
  overflow:auto; max-height:70vh;
  background:#f6f7fb;               /* faint grid seam colour */
  scrollbar-gutter: stable;
}

.time-slot-label{
  background:#fafbff; color:var(--ltc-muted); font-weight:600;
  padding:14px 12px; font-size:.95rem;
  border-right:1px solid var(--ltc-border); border-bottom:1px solid var(--ltc-border);
  position:sticky; left:0; z-index:1; box-sizing:border-box;
}

/* bookable cell */
.grid-slot{
  position:relative; min-height:78px; padding:10px;
  background:#fff; border-right:1px solid var(--ltc-border); border-bottom:1px solid var(--ltc-border);
  display:flex; flex-direction:column; align-items:stretch; gap:8px; /* stack chips vertically */
}
.grid-slot:hover{ background:#fbfdff; }

/* optional empty state */
.grid-slot.open-slot{
  background:#fafafa; color:var(--ltc-muted); font-weight:600; justify-content:center; align-items:center;
}

/* ---------- Booking chip ---------- */
.session-booking{
  display:flex; flex-direction:column; gap:6px;
  width:100%;
  background:#fff; border:1px solid #eef1f7; border-radius:8px;
  box-shadow:0 1px 2px rgba(16,24,40,.04);
  padding:12px 14px;
  position:relative;
  transition:box-shadow .15s ease, transform .15s ease, background .15s ease;
  overflow:hidden;
  flex:0 0 auto;                 /* never shrink inside flex stacks */
}
.session-booking::before{
  content:""; position:absolute; left:-1px; top:-1px; bottom:-1px; width:6px;
  border-radius:8px 0 0 8px; background:var(--stripe-default);
}
.session-booking.status-new::before{ background:var(--stripe-new); }
.session-booking.status-moving::before{ background:var(--stripe-moving); }
.session-booking.status-enquiry::before{ background:var(--stripe-enquiry); }

.session-booking:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(16,24,40,.12); }
.session-booking strong{ font-weight:700; color:#0b1220; }
.session-booking small{ color:var(--ltc-muted); }

.session-booking.time-snapped{
  background:linear-gradient(#fff,#fff) padding-box,
             repeating-linear-gradient(45deg,#f1f5ff 0 6px,#ffffff 6px 12px) border-box;
}

/* ---------- MONTH VIEW ---------- */
.session-grid-body--month{
  display:grid; grid-template-columns:repeat(7,1fr);
  grid-auto-rows:minmax(130px, auto);   /* rows grow to fit chips */
  overflow:auto; max-height:70vh;
  border-top:1px solid var(--ltc-border); border-left:1px solid var(--ltc-border);
  scrollbar-gutter: stable;
}

.session-grid-body--month .month-day{
  position:relative;
  background:#fff;
  border-right:1px solid var(--ltc-border);
  border-bottom:1px solid var(--ltc-border);

  /* reserve space at the top for the date badge so chips never overlap it */
  padding:28px 10px 10px 10px;
  cursor:pointer; transition:background .12s ease;
}
.session-grid-body--month .month-day:hover{ background:#fbfdff; }
.session-grid-body--month .month-day.is-other-month{ background:#fafafa; color:#9aa1ac; }

/* date badge (top-right) */
.session-grid-body--month .day-number{
  position:absolute; top:6px; right:10px;
  font-size:.85rem; color:var(--ltc-muted);
  z-index:1; pointer-events:none;
}

/* chip stack area inside a day cell */
.session-grid-body--month .day-bookings{
  display:flex; flex-direction:column; gap:8px;
  margin-top:0; overflow:visible;   /* no inner scroll; parent row grows */
}

/* slightly smaller chips in month view */
.session-grid-body--month .session-booking{
  padding:10px 12px; font-size:.92rem; line-height:1.25;
}

/* ---------- "+ N others" control (week & month) ---------- */
.ltc-more-chips{
  display:block; width:100%;
  padding:6px 10px;
  border:1px dashed var(--ltc-border); border-radius:8px;
  background:#f6f9ff; color:var(--ltc-primary);
  font-weight:600; text-align:center; cursor:pointer;
}
.ltc-more-chips:hover{ background:#eef3ff; }

/* ---------- Drag/drop helpers ---------- */
.session-booking.dragging { opacity: 0.6; }
.drop-target { outline: 2px dashed var(--ltc-accent, #198754); outline-offset: -4px; }

/* ---------- Loading mask when JS dims container ---------- */
#session-calendar-container[style*="opacity: 0.5"]{ position:relative; }
#session-calendar-container[style*="opacity: 0.5"]::after{
  content:"Loading…"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-weight:600; color:var(--ltc-muted); background:rgba(255,255,255,.6);
}

/* ---------- Suggest list (autocomplete) ---------- */
.ltc-suggest-list{ border-radius: 12px; overflow: hidden; }
.ltc-suggest-list .list-group-item{ cursor: pointer; padding: 10px 12px; }
.ltc-suggest-list .list-group-item:hover{ background-color: #f6f9ff; }

/* ---------- Responsive ---------- */

/* Tablet-ish: allow horizontal scroll and slightly wider day columns */
@media (max-width: 900px){
  :root{ --time-col: 72px; }

  #session-calendar-container{ overflow-x:auto; }

  .session-grid-header{
    grid-template-columns: var(--time-col) repeat(7, minmax(160px,1fr)) var(--sbw);
  }
  .session-grid-body--week{
    grid-template-columns: var(--time-col) repeat(7, minmax(160px,1fr));
    max-height:65vh;
  }
  .session-grid-body--month{
    grid-template-columns: repeat(7, minmax(160px,1fr));
    max-height:65vh;
  }

  .time-col-header, .day-col-header{ padding:10px 8px; }
  .day-col-header{ font-size:.95rem; }
  .day-col-header small{ font-size:.8rem; }
  .time-slot-label{ padding:10px 8px; font-size:.9rem; }

  .grid-slot{ min-height:60px; padding:8px; }
  .session-booking{ padding:10px 12px; font-size:.92rem; border-radius:10px; }
  .session-booking strong, .session-booking small{
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }

  #admin-schedule .schedule-toolbar{ gap:8px; }
}

/* Phone */
@media (max-width: 600px){
  :root{ --time-col: 60px; }

  .session-grid-header{
    grid-template-columns: var(--time-col) repeat(7, minmax(220px,1fr)) var(--sbw);
  }
  .session-grid-body--week{
    grid-template-columns: var(--time-col) repeat(7, minmax(220px,1fr));
  }
  .session-grid-body--month{
    grid-template-columns: repeat(7, minmax(220px,1fr));
  }

  .grid-slot{ min-height:64px; }
  .session-booking{ padding:12px; }

  #admin-schedule .schedule-toolbar{
    flex-direction:column; align-items:stretch;
  }
  #admin-schedule .schedule-toolbar .btn{ width:100%; }
}

/* Ultra small devices */
@media (max-width: 400px){
  :root{ --time-col: 56px; }
  .day-col-header{ font-size:.9rem; }
  .day-col-header small{ font-size:.75rem; }
  .time-slot-label{ font-size:.85rem; }
}

/* Bootstrap backdrop tweak if your theme double-injects it */
.modal-backdrop.fade.show { display:none; }



/* Drag & drop stability */
.session-booking{ cursor: grab; }
.session-booking:active,
.session-booking.dragging{
  cursor: grabbing;
  transform: none !important;              /* cancel the hover translate during drag */
  box-shadow: 0 4px 14px rgba(16,24,40,.12);
}
.grid-slot.drop-target{
  outline: 2px dashed var(--ltc-primary);
  outline-offset: -4px;
  background: #f8fafc;
}


.session-booking{ cursor: grab; }
.session-booking.dragging,
.session-booking:active{ cursor: grabbing; transform:none !important; }

/* --- Hard reset for chips so they don't get huge --- */
.grid-slot{
  /* normal cell height; change if you prefer 70–80px */
  min-height: 78px;
  overflow: hidden;           /* prevents accidental visual overflow */
}

.session-booking{
  position: relative !important;
  height: auto !important;
}

/* nuke any span variants that slipped through */
.session-booking.is-span,
.session-booking[data-span],
button.session-booking.status-confirmed.is-span{
  position: relative !important;
  inset: auto !important;
  height: auto !important;
}

/* keep month view compact */
.session-grid-body--month .session-booking{
  height: auto !important;
}

/* nicer drag visuals only; does not affect size */
.session-booking.drag-src{ opacity:.35; }