/* ═══════════════════════════════════════════════════════
   calendar.css v7.2 — CLEAN FINAL
   All !important where needed to beat main.css
═══════════════════════════════════════════════════════ */

/* ── 0. CSS variables (supplement main.css vars) ─────── */
.cal-page, .cal-page * {
  --pri: #6c47ff; --pri-l: #ede8ff; --pri-d: #4f2ee8;
  --green: #22c55e; --blue: #3b82f6; --red: #ef4444;
  --amber: #f59e0b;
  --bg: #f8f7f5; --surf: #fff; --surf2: #f4f2ef; --bdr: #e5e2db;
  --txt: #111827; --txt2: #6b7280; --txt3: #9ca3af;
  --CELL: 80px; --TCOL: 48px; --SLOT: 20px;
}

/* ── 1. Partner content reset for calendar page ──────── */
.partner-content--calendar {
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  height: calc(100vh - 58px) !important;
}
@media (max-width: 900px) {
  .partner-content--calendar {
    height: auto !important;
    overflow-y: auto !important;
    padding-bottom: 80px !important;
  }
}

/* ── 2. Page wrapper ──────────────────────────────────── */
.cal-page {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  overflow: hidden !important;
  background: var(--bg);
  min-height: 0;
}
@media (max-width: 900px) {
  .cal-page {
    height: auto !important;
    overflow: visible !important;
  }
}

/* ── 3. Toolbar ───────────────────────────────────────── */
.cal-toolbar {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surf);
  border-bottom: 1px solid var(--bdr);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 30;
  flex-wrap: nowrap;
}
.cal-vseg {
  display: flex !important;
  flex-direction: row !important;
  border: 1px solid var(--bdr);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.cal-vbtn {
  padding: 5px 10px !important;
  border: none !important;
  border-right: 1px solid var(--bdr) !important;
  background: none !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  color: var(--txt2) !important;
  font-family: inherit !important;
  white-space: nowrap;
  transition: all .15s;
  display: inline-block !important;
  width: auto !important;
}
.cal-vbtn:last-child { border-right: none !important; }
.cal-vbtn.on { background: var(--pri) !important; color: #fff !important; }

.cal-nav {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 4px;
}
.cal-nav-arr {
  width: 28px !important; height: 28px !important;
  border-radius: 50% !important;
  border: 1px solid var(--bdr) !important;
  background: var(--surf) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--txt2) !important;
  transition: all .15s;
  padding: 0 !important;
  flex-shrink: 0;
}
.cal-nav-arr:hover { border-color: var(--pri) !important; color: var(--pri) !important; }
.cal-today-btn {
  padding: 4px 9px !important;
  border: 1px solid var(--bdr) !important;
  border-radius: 6px !important;
  background: var(--surf) !important;
  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  color: var(--txt) !important;
  white-space: nowrap;
  display: inline-block !important;
  width: auto !important;
}
.cal-today-btn:hover { border-color: var(--pri) !important; color: var(--pri) !important; }
.cal-date-lbl {
  font-size: 12px;
  font-weight: 800;
  color: var(--txt);
  white-space: nowrap;
  flex: 1;
  text-align: center;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-qbook-btn {
  margin-left: auto;
  padding: 7px 12px !important;
  background: var(--pri) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 9px !important;
  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(108,71,255,.35);
  width: auto !important;
  white-space: nowrap;
}
.cal-qbook-btn:hover { background: var(--pri-d) !important; }
@media (max-width: 640px) {
  .cal-qbook-btn span { display: none; }
  .cal-qbook-btn { padding: 0 !important; width: 36px !important; height: 36px !important; border-radius: 50% !important; justify-content: center !important; }
}

/* ── 4. Legend bar ────────────────────────────────────── */
.cal-legend {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px;
  padding: 5px 12px;
  background: var(--surf);
  border-bottom: 1px solid var(--bdr);
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
  flex-wrap: nowrap;
}
.cal-legend::-webkit-scrollbar { display: none; }
.leg {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 4px;
  cursor: pointer;
  flex-shrink: 0;
  padding: 2px 6px;
  border-radius: 6px;
  transition: background .12s;
  width: auto !important;
}
.leg:hover { background: var(--surf2); }
.leg.off { opacity: .35; }
.leg-pip { width: 8px !important; height: 8px !important; border-radius: 50%; flex-shrink: 0; }
.leg-bar { width: 14px !important; height: 2px !important; border-radius: 2px; flex-shrink: 0; margin-left: 1px; }
.leg-txt { font-size: 10px; font-weight: 600; color: var(--txt2); white-space: nowrap; }
@media (max-width: 768px) {
  .leg-txt { display: none; }
  .leg { padding: 2px 4px; }
}

/* ── 5. Staff filter strip ────────────────────────────── */
.cal-staff-strip {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  overflow-x: auto !important;
  scrollbar-width: none;
  flex-shrink: 0;
  padding: 6px 10px;
  gap: 6px;
  background: var(--surf);
  border-bottom: 1px solid var(--bdr);
  flex-wrap: nowrap;
}
.cal-staff-strip::-webkit-scrollbar { display: none; }
.sf-chip {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 5px;
  padding: 5px 11px !important;
  border-radius: 20px !important;
  border: 1.5px solid var(--bdr) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  background: var(--surf) !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  font-family: inherit !important;
  transition: all .15s;
  box-sizing: border-box !important;
  text-align: left !important;
  justify-content: flex-start !important;
}
.sf-chip.on {
  border-color: var(--pri) !important;
  background: var(--pri-l) !important;
}
.sf-chip:active { transform: scale(.93); }
.sf-av {
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  border-radius: 50% !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}
.sf-name {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--txt2) !important;
  white-space: nowrap !important;
}
.sf-chip.on .sf-name { color: var(--pri) !important; }

/* ── 6. Smart slots banner ────────────────────────────── */
.cal-smart {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 7px;
  padding: 7px 12px;
  background: linear-gradient(90deg, #eff6ff, #f0fdf4);
  border-bottom: 1px solid #dbeafe;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s;
  width: 100% !important;
  box-sizing: border-box !important;
}
.cal-smart:hover { background: linear-gradient(90deg, #dbeafe, #dcfce7); }
.cal-smart span { font-size: 10px; font-weight: 700; color: #1d4ed8; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-smart-arr { font-size: 13px; color: #1d4ed8; flex-shrink: 0; }

/* ── 7. Mobile date strip ─────────────────────────────── */
.cal-date-strip {
  display: none;
}
@media (max-width: 900px) {
  .cal-date-strip {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 7px 10px;
    background: var(--surf);
    border-bottom: 1px solid var(--bdr);
    flex-shrink: 0;
  }
}
.cal-date-strip::-webkit-scrollbar { display: none; }
.ds-chip {
  scroll-snap-align: center;
  flex-shrink: 0;
  min-width: 44px;
  text-align: center;
  padding: 5px 3px;
  border-radius: 11px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: all .15s;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  background: none !important;
}
.ds-chip .dc-day  { font-size: .61rem; font-weight: 700; color: var(--txt3); text-transform: uppercase; }
.ds-chip .dc-num  { font-size: 1rem; font-weight: 900; color: var(--txt); line-height: 1.1; }
.ds-chip.is-today { background: rgba(108,71,255,.07) !important; border-color: var(--pri); }
.ds-chip.is-today .dc-num { color: var(--pri); }
.ds-chip.selected { background: var(--pri) !important; border-color: var(--pri) !important; }
.ds-chip.selected .dc-day,
.ds-chip.selected .dc-num { color: #fff !important; }
.ds-chip .dc-dots { display: flex !important; justify-content: center; gap: 2px; margin-top: 2px; min-height: 5px; }
.ds-chip .dc-d    { width: 4px; height: 4px; border-radius: 50%; }

/* ── 8. Calendar area ─────────────────────────────────── */
.cal-area {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
  min-height: 0 !important;
  position: relative;
}

/* ── 9. Column headers ────────────────────────────────── */
/* ── Top controls — collapsible ──────────────────────── */
.cal-top-controls {
  position: sticky; top: 0; z-index: 15;
  background: var(--surf);
  border-bottom: 1.5px solid var(--bdr);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  pointer-events: auto;
}
.cal-top-toggle {
  display: flex; justify-content: center;
  padding: 3px 0;
  cursor: pointer;
  background: var(--surf);
  border-bottom: 1px solid var(--bdr);
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.cal-top-toggle:hover { background: var(--surf2); }
.cal-top-toggle-bar {
  width: 32px; height: 3px; border-radius: 2px;
  background: var(--bdr); transition: background .2s;
  display: block;
}
.cal-top-toggle:active .cal-top-toggle-bar { background: var(--pri); }
.cal-top-inner {
  overflow: visible;
  max-height: 500px;
  transition: max-height .35s cubic-bezier(.4,0,.2,1),
              opacity .3s ease;
  opacity: 1;
}
.cal-top-inner.collapsed {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ── Staff column header — always visible ─────────── */
.cal-col-hdr {
  display: flex !important;
  flex-direction: column !important;
  background: var(--surf);
  border-bottom: 2px solid var(--bdr);
  flex-shrink: 0 !important;
  position: sticky;
  top: 0;
  z-index: 12;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
  overflow: visible;
}

/* Summary row with nav arrows */
.hdr-summary-row {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 4px 10px 3px;
  border-bottom: 1px solid var(--bdr);
}
.hdr-summary-label {
  font-size: 10px; font-weight: 800; color: var(--txt2);
  text-transform: uppercase; letter-spacing: .04em;
}
.hdr-nav-arrows {
  display: flex; gap: 4px; align-items: center;
}
.hdr-arr {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--bdr);
  background: var(--surf);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .15s; color: var(--txt2);
  -webkit-tap-highlight-color: transparent;
}
.hdr-arr:active { background: var(--pri); color: #fff; border-color: var(--pri); }

/* Staff header row — mirrors cal-s-cols, hidden overflow */
.hdr-staff-row {
  display: flex;
  flex-direction: row !important;
  overflow: hidden;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
}
.hdr-staff-row::-webkit-scrollbar { display: none; }

.cal-hdr-spacer {
  width: var(--TCOL);
  min-width: var(--TCOL);
  flex-shrink: 0;
  border-right: 1px solid var(--bdr);
  background: #fafaf8;
}
.cal-hdr-staff {
  /* Fixed: exactly 1/5 of scrollable area */
  flex: 0 0 calc((100vw - var(--TCOL)) / 5) !important;
  width: calc((100vw - var(--TCOL)) / 5) !important;
  min-width: 0 !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 5px 3px 4px;
  border-right: 1px solid var(--bdr);
  cursor: pointer;
  transition: background .15s;
  position: relative;
  overflow: hidden;
}
.cal-hdr-staff:last-child { border-right: none; }
.cal-hdr-staff:active { background: var(--surf2); }

/* Off-duty overlay — grays out whole column */
.cal-hdr-staff.staff-off { opacity: .45; }
.cal-hdr-staff.staff-off .hdr-av::after {
  content: '🔴';
  position: absolute; bottom: -1px; right: -3px;
  font-size: 8px; z-index: 2;
}
.staff-col-off {
  position: absolute; inset: 0; z-index: 1;
  background: repeating-linear-gradient(
    -45deg, rgba(0,0,0,.05), rgba(0,0,0,.05) 2px, transparent 2px, transparent 9px
  );
  pointer-events: none;
}
/* Off duty label — centered at top of column, no sticky issues */
.cal-s-col.col-staff-off > .staff-col-off + div {
  display: none !important; /* hide PHP-rendered sticky text, CSS handles it */
}

.hdr-av {
  width: 32px !important; height: 32px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  color: #fff !important;
  position: relative;
  margin-bottom: 2px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  overflow: visible !important;
  flex-shrink: 0 !important;
}
.hdr-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; overflow: hidden; }
.hdr-online {
  position: absolute; bottom: 0; right: 0;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green); border: 2px solid var(--surf);
}
.hdr-name { font-size: 8.5px; font-weight: 700; color: var(--txt2); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; padding: 0 2px; }
.hdr-cnt  { font-size: 7.5px; color: var(--txt3); }
.cal-hdr-week {
  flex: 1; min-width: 0; text-align: center;
  padding: 8px 4px; border-right: 1px solid var(--bdr);
  cursor: pointer; transition: background .15s;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
.cal-hdr-week:last-child { border-right: none; }
.cal-hdr-week.today-h { background: #f5f3ff; }
.wd-dow { font-size: 9px; font-weight: 800; color: var(--txt3); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px; }
.wd-num { font-size: 18px; font-weight: 900; color: var(--txt1); line-height: 1; }
.cal-hdr-week.today-h .wd-num {
  color: #fff;
  background: var(--pri);
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
}

/* ── 10. Scrollable calendar grid ────────────────────── */
.cal-scroll {
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  position: relative;
  overscroll-behavior: contain;
  min-height: 0 !important;
}
.cal-scroll::-webkit-scrollbar { display: none; }
@media (max-width: 900px) {
  .cal-scroll {
    max-height: 55vh !important;
    min-height: 200px !important;
  }
}
.cal-week-scroll {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  overflow: hidden !important;
  min-height: 0 !important;
}
@media (max-width: 900px) {
  .cal-week-scroll { max-height: 55vh !important; overflow-y: auto !important; }
}
.cal-week-inner {
  min-width: 480px;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
}

/* ── 11. Grid rows & cols ─────────────────────────────── */
.cal-grid {
  display: flex !important;
  flex-direction: row !important;
  position: relative;
  min-height: 0;
  width: 100%;
  /* Prevent grid from being wider than viewport */
  overflow: hidden;
}
.cal-time-col {
  width: var(--TCOL) !important;
  min-width: var(--TCOL) !important;
  flex-shrink: 0;
  background: #fafaf8;
  position: sticky;
  left: 0;
  z-index: 10;
  border-right: 1px solid var(--bdr);
}
.t-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
  padding: 0 6px 0 0;
  height: var(--CELL); /* 80px = 4 slots x 20px */
  position: relative;
}
.t-row span { font-size: 9px; font-weight: 500; color: var(--txt3); margin-top: -5px; white-space: nowrap; }
.t-half { position: absolute; right: 0; bottom: 0; width: 5px; height: 1px; background: var(--bdr); }
.cal-s-cols {
  flex: 1 !important;
  display: flex !important;
  flex-direction: row !important;
  position: relative;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.cal-s-cols::-webkit-scrollbar { display: none; }
.cal-s-col {
  /* Fixed: exactly 1/5 of scrollable area = matches cal-hdr-staff */
  flex: 0 0 calc((100vw - var(--TCOL)) / 5) !important;
  width: calc((100vw - var(--TCOL)) / 5) !important;
  display: block !important;
  min-width: 0;
  border-right: 1px solid var(--bdr);
  position: relative;
  cursor: pointer;
}
.cal-s-col:last-child { border-right: none; }
.cal-s-col { scroll-snap-align: start; }
.cal-s-col.today-col { background: rgba(108,71,255,.018); }
.hr-line { position: absolute; left: 0; right: 0; height: 1px; background: var(--bdr); pointer-events: none; z-index: 1; }
.half-line { position: absolute; left: 4px; right: 4px; height: 1px; border-top: 1px dashed #e9e7e2; pointer-events: none; z-index: 1; }
@media (max-width: 640px) {
  .cal-hdr-spacer, .cal-time-col { width: 36px !important; min-width: 36px !important; }
  .t-row span { font-size: 8px !important; }
  .hdr-av { width: 28px !important; height: 28px !important; font-size: 9px !important; }
}

/* ── 12. 3-Line system ────────────────────────────────── */
.line-row {
  position: absolute;
  left: 0; right: 0;
  z-index: 5;
  pointer-events: none;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: 100% !important;
}
#seek-row { z-index: 6; transition: top .06s linear; }
.seek-dot {
  width: 11px !important; height: 11px !important; border-radius: 50%;
  background: var(--blue); flex-shrink: 0; margin-left: -5px;
  box-shadow: 0 0 0 3px rgba(59,130,246,.2); transition: transform .12s;
}
.seek-bar { flex: 1; height: 2px; background: var(--blue); opacity: .85; }
.seek-badge {
  position: absolute; left: 50%; transform: translate(-50%,-50%); top: 50%;
  background: var(--blue); color: #fff; font-size: 10px; font-weight: 800;
  padding: 2px 9px; border-radius: 20px; white-space: nowrap;
  box-shadow: 0 3px 10px rgba(59,130,246,.35); pointer-events: none;
}
#now-row { z-index: 5; }
.now-dot {
  width: 9px !important; height: 9px !important; border-radius: 50%;
  background: var(--green); flex-shrink: 0; margin-left: -4px;
  box-shadow: 0 0 0 3px rgba(34,197,94,.22);
  animation: pls-g 2s ease-in-out infinite;
}
@keyframes pls-g { 0%,100%{box-shadow:0 0 0 3px rgba(34,197,94,.22)}50%{box-shadow:0 0 0 7px rgba(34,197,94,.06)} }
.now-bar { flex: 1; height: 1.5px; background: var(--green); }
.now-badge {
  position: absolute; left: 7px; top: 50%; transform: translateY(-50%);
  background: var(--green); color: #fff; font-size: 9px; font-weight: 800;
  padding: 2px 7px; border-radius: 9px; white-space: nowrap; pointer-events: none;
}
#close-row { z-index: 24; }
.close-dot {
  width: 9px !important; height: 9px !important; border-radius: 50%;
  background: var(--red); flex-shrink: 0; margin-left: -4px;
  box-shadow: 0 0 0 3px rgba(239,68,68,.18);
}
.close-bar { flex: 1; height: 1.5px; background: var(--red); opacity: .7; }
.close-badge {
  position: absolute; right: 7px; top: 50%; transform: translateY(-50%);
  background: var(--red); color: #fff; font-size: 9px; font-weight: 800;
  padding: 2px 7px; border-radius: 9px; white-space: nowrap; pointer-events: none;
}

/* ── 13. Appointment cards ─────────────────────────────── */
/* Format:
   ROW1: TIME RANGE           (nhân viên)
   ROW2: Tên khách  ★★★
   ROW3: ✂ Dịch vụ   📞 SĐT
   ROW4: 📝 Ghi chú
*/
.appt {
  position: absolute !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0;
  border-radius: 10px;
  padding: 6px 9px 14px 10px;
  cursor: pointer;
  overflow: hidden;
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation; /* allow tap */
  will-change: transform;
  border-left: 4px solid rgba(255,255,255,.55);
  box-shadow: 0 2px 8px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.18);
  min-height: 38px;
  left: 3px; right: 3px; z-index: 30;
  width: auto !important;
  transition: box-shadow .15s, opacity .15s;
  background-clip: padding-box;
}
.appt:active { transform: scale(.98); }
.appt:hover  { box-shadow: 0 6px 22px rgba(0,0,0,.28); z-index: 35; }
.appt.dragging   { opacity: .88; z-index: 100; box-shadow: 0 14px 44px rgba(0,0,0,.32); transform: scale(1.04) rotate(.7deg) !important; touch-action: none; }
.appt.long-press { transform: scale(1.05) !important; box-shadow: 0 12px 36px rgba(0,0,0,.3); z-index: 90; }
.appt.drag-ghost { opacity: .18 !important; border: 2px dashed rgba(255,255,255,.5); pointer-events: none; }

/* Row 1: Time + Staff (same line) */
.a-row1 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 4px;
  flex-shrink: 0;
  min-width: 0;
}
.a-time {
  font-size: 11px; font-weight: 700;
  color: rgba(255,255,255,.92); white-space: nowrap;
  line-height: 1.25; letter-spacing: .01em;
  flex-shrink: 0;
}
.a-staff-inline {
  font-size: 9.5px; font-weight: 600;
  color: rgba(255,255,255,.75);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: right; flex: 1; min-width: 0;
  display: none;
}

/* Row 2: Customer name — BIG, always shown */
.a-name {
  font-size: 14px; font-weight: 900;
  color: #fff; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; flex-shrink: 0;
  text-shadow: 0 1px 3px rgba(0,0,0,.18);
  margin-top: 1px;
}

/* Row 3a: Service */
.a-svc {
  font-size: 10.5px; font-weight: 600;
  color: rgba(255,255,255,.88);
  overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; flex-shrink: 0;
  display: none; margin-top: 2px;
}

/* Row 3b: Service + Phone on same line */
.a-row3 {
  display: none !important;
  align-items: center !important;
  gap: 6px; flex-shrink: 0; margin-top: 2px; min-width: 0;
}
.a-svc-inline {
  font-size: 10px; font-weight: 600;
  color: rgba(255,255,255,.88);
  overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; flex: 1; min-width: 0;
}
.a-phone-inline {
  font-size: 9.5px; font-weight: 600;
  color: rgba(255,255,255,.82);
  white-space: nowrap; flex-shrink: 0;
}

/* Row 4: Notes */
.a-notes {
  font-size: 9.5px; font-weight: 500; font-style: italic;
  color: rgba(255,255,255,.75);
  overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; flex-shrink: 0;
  display: none; margin-top: 2px;
}

/* Legacy aliases kept for compatibility */
.a-staff  { display: none !important; }
.a-phone  { display: none !important; }

/* Status indicator */
.a-status-dot {
  position: absolute; top: 7px; right: 8px;
  width: 7px; height: 7px; border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255,255,255,.3);
}

/* ── Smart content by height (20px = 15min) ──────────────────
   40px  = 30min: time + name only
   60px  = 45min: + row3 (svc + phone)
   80px  = 60min: + staff inline
   100px = 75min: + notes
──────────────────────────────────────────────────────────── */

/* 3 slots (60px) → show row3 */
.appt[style*="height: 6"] .a-row3,
.appt[style*="height: 7"] .a-row3,
.appt[style*="height: 8"] .a-row3,
.appt[style*="height: 9"] .a-row3,
.appt[style*="height: 10"] .a-row3,
.appt[style*="height: 11"] .a-row3,
.appt[style*="height: 12"] .a-row3,
.appt[style*="height: 13"] .a-row3,
.appt[style*="height: 14"] .a-row3,
.appt[style*="height: 15"] .a-row3,
.appt[style*="height: 16"] .a-row3,
.appt[style*="height: 17"] .a-row3,
.appt[style*="height: 18"] .a-row3,
.appt[style*="height: 19"] .a-row3,
.appt[style*="height: 20"] .a-row3 { display: flex !important; }

/* 4 slots (80px) → show staff on row1 */
.appt[style*="height: 8"] .a-staff-inline,
.appt[style*="height: 9"] .a-staff-inline,
.appt[style*="height: 10"] .a-staff-inline,
.appt[style*="height: 11"] .a-staff-inline,
.appt[style*="height: 12"] .a-staff-inline,
.appt[style*="height: 13"] .a-staff-inline,
.appt[style*="height: 14"] .a-staff-inline,
.appt[style*="height: 15"] .a-staff-inline,
.appt[style*="height: 16"] .a-staff-inline,
.appt[style*="height: 17"] .a-staff-inline,
.appt[style*="height: 18"] .a-staff-inline,
.appt[style*="height: 19"] .a-staff-inline,
.appt[style*="height: 20"] .a-staff-inline { display: block; }

/* 5 slots (100px) → show notes */
.appt[style*="height: 10"] .a-notes,
.appt[style*="height: 11"] .a-notes,
.appt[style*="height: 12"] .a-notes,
.appt[style*="height: 13"] .a-notes,
.appt[style*="height: 14"] .a-notes,
.appt[style*="height: 15"] .a-notes,
.appt[style*="height: 16"] .a-notes,
.appt[style*="height: 17"] .a-notes,
.appt[style*="height: 18"] .a-notes,
.appt[style*="height: 19"] .a-notes,
.appt[style*="height: 20"] .a-notes { display: block; }

/* Resize handle */
.a-rz {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 14px; cursor: s-resize; touch-action: none;
  display: flex; align-items: center; justify-content: center; z-index: 5;
}
.a-rz::after { content: \'\'; width: 24px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.4); }

/* Drop zone */
.cal-s-col.drop-over { background: rgba(108,71,255,.07); outline: 2px dashed var(--pri); outline-offset: -2px; }

/* Drag pill */
.dpill {
  position: fixed; background: var(--pri); color: #fff;
  padding: 5px 14px; border-radius: 20px; font-size: 12px;
  font-weight: 900; pointer-events: none; z-index: 9999;
  box-shadow: 0 4px 20px rgba(108,71,255,.5); display: none;
  transform: translate(-50%, -150%); white-space: nowrap; letter-spacing: .02em;
}

@media (max-width: 768px) {
  .appt { left: 2px !important; right: 2px !important; padding: 4px 6px 13px 7px !important; border-radius: 7px !important; }
  .a-name  { font-size: 10.5px !important; }
  .a-time  { font-size: 8.5px !important; }
  .a-svc   { font-size: 8.5px !important; }
  .a-staff { font-size: 8px !important; }
  .a-phone { font-size: 7.5px !important; }
}

/* ── 14. Month view ───────────────────────────────────── */
.month-wrap { flex: 1; overflow-y: auto; scrollbar-width: none; }
.month-wrap::-webkit-scrollbar { display: none; }
.mo-dow-hdr {
  display: grid !important;
  grid-template-columns: repeat(7,1fr) !important;
  background: var(--surf); border-bottom: 1px solid var(--bdr);
}
.mo-dow { text-align: center; padding: 6px 2px; font-size: 9px; font-weight: 800; color: var(--txt3); text-transform: uppercase; }
.mo-grid {
  display: grid !important;
  grid-template-columns: repeat(7,1fr) !important;
  gap: 1px; background: var(--bdr); padding: 1px;
}
.mo-cell {
  background: var(--surf);
  min-height: 72px;
  padding: 5px 4px;
  cursor: pointer;
  overflow: hidden;
  transition: background .12s;
  display: block !important;
}
.mo-cell:active { background: var(--surf2); }
.mo-cell.today { background: #f5f3ff; outline: 1.5px solid var(--pri); outline-offset: -1px; }
.mo-cell.other-mo { background: #fafaf8; opacity: .5; }
.mc-num {
  font-size: 11px; font-weight: 800; color: var(--txt); margin-bottom: 3px;
  width: 22px; height: 22px; display: flex !important;
  align-items: center; justify-content: center; border-radius: 50%;
}
.mo-cell.today .mc-num { background: var(--pri); color: #fff; }
.mc-evt {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 3px; padding: 2px 4px; border-radius: 4px; margin-bottom: 2px;
}
.mc-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.mc-name { font-size: 9px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.mc-more { font-size: 8px; color: var(--txt3); font-weight: 700; padding: 0 3px; }
@media (max-width: 640px) {
  .mo-cell { min-height: 58px; padding: 3px; }
  .mc-num { font-size: 10px; }
  .mc-evt .mc-name { font-size: 8px; }
}

/* ── 15. Bottom sheet overlay ─────────────────────────── */
.cal-ov {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,.45);
  z-index: 2000 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: stretch !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s;
  backdrop-filter: blur(2px);
}
.cal-ov.open { opacity: 1; pointer-events: auto; }
.cal-sheet {
  display: block !important;
  background: var(--surf);
  border-radius: 22px 22px 0 0;
  width: 100% !important;
  max-height: 92dvh;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 14px 16px 32px;
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.32,.72,0,1);
}
.cal-sheet::-webkit-scrollbar { display: none; }
.cal-ov.open .cal-sheet { transform: translateY(0); }
.sh-hdl { width: 36px; height: 4px; background: var(--bdr); border-radius: 4px; margin: 0 auto 16px; }
.sh-hero {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px;
  background: linear-gradient(135deg, #f5f3ff, #ede8ff);
  border-radius: 14px; padding: 14px; margin-bottom: 14px;
  border: 1px solid rgba(108,71,255,.15);
}
.sh-avatar {
  width: 48px !important; height: 48px !important; border-radius: 13px;
  background: linear-gradient(135deg, var(--pri), #7c3aed);
  display: flex !important; align-items: center; justify-content: center;
  color: #fff; font-weight: 900; font-size: 1.15rem;
  flex-shrink: 0; box-shadow: 0 4px 12px rgba(108,71,255,.3);
}
.sh-info { flex: 1; min-width: 0; }
.sh-name { font-size: 1rem; font-weight: 900; color: var(--txt); }
.sh-phone { display: inline-flex; align-items: center; gap: 4px; font-size: .77rem; color: var(--pri); font-weight: 600; margin-top: 2px; text-decoration: none; }
.sh-status-badge { flex-shrink: 0; }
.stat-pill { display: inline-flex; padding: 4px 10px; border-radius: 20px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.stat-pill.pending   { background: #fef9c3; color: #854d0e; }
.stat-pill.confirmed { background: #dcfce7; color: #14532d; }
.stat-pill.completed { background: #ede9fe; color: #4c1d95; }
.stat-pill.cancelled { background: #fee2e2; color: #7f1d1d; }
.stat-pill.no_show   { background: #f3f4f6; color: #374151; }
.sh-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px; margin-bottom: 14px;
}
.sh-cell { background: var(--bg); border-radius: 10px; padding: 10px 12px; display: block !important; }
.sh-cell.full { grid-column: 1/-1; }
.sh-cell-lbl { font-size: .63rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--txt2); margin-bottom: 3px; }
.sh-cell-val { font-size: .86rem; font-weight: 700; color: var(--txt); line-height: 1.4; word-break: break-word; }
.sh-cell-val.price { color: var(--pri); font-size: 1rem; }
.sh-acts { display: grid !important; gap: 8px; }
.sh-acts.g2 { grid-template-columns: 1fr 1fr !important; }
.sh-act {
  height: 46px !important; border-radius: 12px; border: none !important;
  font-size: .86rem !important; font-weight: 800 !important; cursor: pointer !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  gap: 6px; font-family: inherit !important; transition: all .15s;
  width: auto !important;
}
.sh-act:active { opacity: .8; transform: scale(.97); }
.sh-act.confirm  { background: #059669 !important; color: #fff !important; }
.sh-act.complete { background: var(--pri) !important; color: #fff !important; }
.sh-act.cancel   { background: #fee2e2 !important; color: #991b1b !important; }
.sh-act.close-btn{ background: var(--bg) !important; color: var(--txt2) !important; border: 1.5px solid var(--bdr) !important; }

/* ── 16. Quick Book sheet ─────────────────────────────── */
.qb-sheet {
  display: block !important;
  background: var(--surf); border-radius: 22px 22px 0 0;
  width: 100% !important;
  /* Limit height so submit button always visible */
  max-height: 88dvh;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 10px 14px calc(20px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.32,.72,0,1);
}
.qb-sheet::-webkit-scrollbar { display: none; }
.cal-ov.open .qb-sheet { transform: translateY(0); }
.qb-hdr {
  display: flex !important; flex-direction: row !important;
  align-items: center !important; justify-content: space-between !important;
  margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--bdr);
}
.qb-title { font-size: 15px; font-weight: 900; color: var(--txt); }
.qb-close {
  width: 28px !important; height: 28px !important; border-radius: 50% !important;
  border: 1.5px solid var(--bdr) !important; background: var(--bg) !important;
  font-size: 13px !important; cursor: pointer !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  color: var(--txt2) !important; flex-shrink: 0;
}
/* Compact form fields */
.fg { margin-bottom: 8px; }
.fg label { display: block; font-size: 8px; font-weight: 900; color: var(--txt3); margin-bottom: 3px; text-transform: uppercase; letter-spacing: .5px; }
.fi {
  width: 100% !important;
  padding: 8px 10px !important;
  border: 1.5px solid var(--bdr) !important; border-radius: 8px !important;
  font-family: inherit !important; font-size: 13px !important;
  background: var(--surf) !important; color: var(--txt) !important;
  outline: none; transition: border .15s;
  -webkit-appearance: none; appearance: none;
  display: block !important; box-sizing: border-box !important;
  box-shadow: none;
}
.fi:focus { border-color: var(--pri) !important; }
.fg-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 7px; margin-bottom: 8px;
}
.fg-row .fg { margin-bottom: 0; }
.time-grid {
  display: flex !important; flex-direction: row !important; flex-wrap: nowrap;
  gap: 4px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px;
}
.time-grid::-webkit-scrollbar { display: none; }
.time-c {
  flex-shrink: 0 !important;
  padding: 5px 9px !important; border: 1.5px solid var(--bdr) !important;
  border-radius: 7px !important; font-size: 10px !important; font-weight: 700 !important;
  cursor: pointer !important; background: var(--surf) !important; color: var(--txt2) !important;
  font-family: inherit !important; white-space: nowrap; transition: all .12s;
  display: inline-block !important; width: auto !important;
  -webkit-tap-highlight-color: transparent;
}
.time-c.on { border-color: var(--pri) !important; background: var(--pri-l) !important; color: var(--pri) !important; }
.ac-box { position: relative; }
.ac-drop {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 999;
  background: var(--surf); border: 1.5px solid var(--pri);
  border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,.18);
  max-height: 220px; overflow-y: auto; margin-top: 3px; display: none;
}
.ac-item {
  display: flex !important; flex-direction: row !important;
  align-items: center !important; gap: 10px; padding: 10px 13px;
  cursor: pointer; border-bottom: 1px solid #f5f5f5; transition: background .12s;
}
.ac-item:last-child { border-bottom: none; }
.ac-item:hover { background: var(--surf2); }
.ac-av {
  width: 34px !important; height: 34px !important; border-radius: 50%;
  background: linear-gradient(135deg,var(--pri),#7c3aed);
  display: flex !important; align-items: center !important; justify-content: center !important;
  color: #fff; font-weight: 700; font-size: .85rem; flex-shrink: 0;
}
.ac-info { flex: 1; min-width: 0; }
.ac-name { font-size: .87rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-phone { font-size: .74rem; color: var(--txt2); }
.qb-sum { background: var(--pri-l); border-radius: 10px; padding: 11px 13px; margin-bottom: 13px; }
.qb-sum-lbl { font-size: 9px; font-weight: 900; color: var(--pri); text-transform: uppercase; letter-spacing: .5px; }
.qb-sum-val { font-size: 1.1rem; font-weight: 900; color: var(--pri); margin-top: 3px; }
.qb-submit {
  width: 100% !important; padding: 14px !important; background: var(--pri) !important;
  color: #fff !important; border: none !important; border-radius: 11px !important;
  font-family: inherit !important; font-size: 14px !important; font-weight: 900 !important;
  cursor: pointer !important; box-shadow: 0 4px 18px rgba(108,71,255,.4);
  display: block !important;
}
.qb-msg { margin-bottom: 10px; font-size: 12px; }
.qb-msg.err { color: var(--red); }
.qb-msg.ok  { color: #059669; }

/* ── 17. Booking list ─────────────────────────────────── */
/* ── Booking list: fixed bottom slide-up panel ─────── */
.bk-list-wrap {
  position: fixed !important;
  bottom: 56px !important;
  left: 0 !important; right: 0 !important;
  z-index: 50 !important;          /* lowered from 150 — không đè calendar */
  background: var(--surf) !important;
  border-radius: 14px 14px 0 0 !important;
  box-shadow: 0 -3px 16px rgba(0,0,0,.10) !important;
  pointer-events: none;             /* collapsed = không block click bên dưới */
}
/* bk-list-hdr click handled in HTML */
/* Drag handle at top of panel */
.bk-list-wrap::before {
  content: '';
  display: block;
  width: 36px; height: 4px;
  background: var(--bdr);
  border-radius: 2px;
  margin: 8px auto 0;
}
.bk-list-hdr {
  display: flex !important; flex-direction: row !important;
  align-items: center !important; justify-content: space-between !important;
  padding: 10px 14px 8px; font-size: .75rem; font-weight: 800; color: var(--txt);
  text-transform: uppercase; letter-spacing: .06em;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  position: relative;
}
/* drag handle pill */
.bk-list-hdr::before {
  content: '';
  width: 32px; height: 3px;
  background: var(--bdr); border-radius: 2px;
  position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
}
.bk-list-cnt { background: var(--pri); color: #fff; font-size: .65rem; font-weight: 800; padding: 2px 8px; border-radius: 20px; }
.bk-list-filter {
  display: flex !important; flex-direction: row !important;
  gap: 5px; padding: 4px 12px 8px; overflow-x: auto; scrollbar-width: none;
}
.bk-list-filter::-webkit-scrollbar { display: none; }
.bk-flt-btn {
  flex-shrink: 0 !important; padding: 4px 11px !important;
  border-radius: 20px !important; border: 1.5px solid var(--bdr) !important;
  background: var(--surf) !important; color: var(--txt2) !important;
  font-size: .72rem !important; font-weight: 700 !important;
  cursor: pointer !important; font-family: inherit !important;
  display: inline-block !important; width: auto !important;
}
.bk-flt-btn.on { background: var(--pri) !important; border-color: var(--pri) !important; color: #fff !important; }
.bk-list-empty { text-align: center; padding: 24px 16px; color: var(--txt2); }
.bk-list-empty .ei { font-size: 2rem; margin-bottom: 8px; }
.bk-list-empty .et { font-weight: 700; font-size: .9rem; color: var(--txt); }
.bk-list-empty .es { font-size: .75rem; color: var(--txt2); margin-top: 4px; }
.bk-card {
  display: flex !important; flex-direction: row !important;
  align-items: stretch;
  margin: 0 12px 8px;
  border-radius: 13px; background: var(--surf);
  box-shadow: 0 1px 4px rgba(0,0,0,.07), 0 3px 10px rgba(0,0,0,.04);
  overflow: hidden; cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  border: 1.5px solid var(--bdr);
  width: auto !important;
}
.bk-card:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,.12); }
.bk-card-bar { width: 5px; flex-shrink: 0; }
.bk-card-body {
  flex: 1 !important; min-width: 0;
  padding: 10px 11px;
  display: flex !important; flex-direction: column !important;
}
.bk-card-r1 {
  display: flex !important; flex-direction: row !important;
  align-items: center !important; gap: 7px; margin-bottom: 4px;
}
.bk-time-pill { background: #f0f4ff; color: var(--pri); font-size: .69rem; font-weight: 800; padding: 2px 8px; border-radius: 8px; white-space: nowrap; flex-shrink: 0; }
.bk-cname { font-size: .89rem; font-weight: 800; color: var(--txt); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-st {
  flex-shrink: 0; font-size: .61rem; font-weight: 800;
  padding: 2px 7px; border-radius: 8px; text-transform: uppercase; letter-spacing: .03em;
}
.bk-st.s-pending   { background: #fef9c3; color: #854d0e; }
.bk-st.s-confirmed { background: #dcfce7; color: #14532d; }
.bk-st.s-completed { background: #ede9fe; color: #4c1d95; }
.bk-st.s-cancelled { background: #fee2e2; color: #7f1d1d; }
.bk-st.s-no_show   { background: #f3f4f6; color: #374151; }
.bk-card-r2 {
  display: flex !important; flex-direction: row !important;
  align-items: center !important; gap: 6px; font-size: .73rem; color: var(--txt2); flex-wrap: wrap;
}
.bk-svc  { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-stff { display: inline-flex !important; align-items: center !important; gap: 3px; flex-shrink: 0; }
.bk-stff-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.bk-tel { display: inline-flex !important; align-items: center !important; gap: 3px; color: var(--txt2); font-size: .69rem; padding: 1px 6px; border-radius: 6px; background: var(--bg); border: 1px solid var(--bdr); flex-shrink: 0; text-decoration: none; }
.bk-card-acts {
  display: flex !important; flex-direction: column !important;
  gap: 4px; padding: 8px 7px 8px 0; justify-content: center; align-items: center;
}
.bk-act-btn {
  width: 32px !important; height: 32px !important; border-radius: 9px !important;
  border: none !important; cursor: pointer !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: .82rem !important; transition: all .15s; padding: 0 !important;
}
.bk-act-btn:active { transform: scale(.9); }
.bk-act-btn.c-ok   { background: #dcfce7 !important; color: #15803d !important; }
.bk-act-btn.c-done { background: #ede9fe !important; color: #6d28d9 !important; }
.bk-act-btn.c-del  { background: #fee2e2 !important; color: #b91c1c !important; }
.bk-act-btn.c-eye  { background: var(--bg) !important; color: var(--txt2) !important; border: 1px solid var(--bdr) !important; }

/* ── 18. Mobile CTA ───────────────────────────────────── */
/* Quick Book button inside bk-list-wrap panel */
.cal-cta { display: none; } /* old standalone cta hidden */
.bk-qbook-btn {
  display: block !important;
  width: calc(100% - 28px) !important;
  margin: 6px 14px 4px !important;
  height: 48px !important;
  border-radius: 14px !important;
  font-size: .93rem !important; font-weight: 800 !important;
  background: var(--pri) !important; color: #fff !important;
  border: none !important; font-family: inherit !important;
  cursor: pointer !important;
  display: flex !important; align-items: center !important;
  justify-content: center !important; gap: 8px;
  box-shadow: 0 6px 20px rgba(108,71,255,.3) !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* ── 19. Animations ───────────────────────────────────── */
@keyframes spin { from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes fade-in { from{opacity:0;transform:scale(.95)} to{opacity:1;transform:scale(1)} }
.appt-new { animation: fade-in .25s ease; }

/* ── Reminder pulse animation ──────────────────────────── */
@keyframes appt-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,200,0,.8), 0 2px 8px rgba(0,0,0,.2); transform: scale(1); }
  50%  { box-shadow: 0 0 0 8px rgba(255,200,0,0), 0 6px 20px rgba(0,0,0,.3); transform: scale(1.02); }
  100% { box-shadow: 0 2px 8px rgba(0,0,0,.2); transform: scale(1); }
}

/* ── Week view card — compact but readable ─────────────── */
.appt .a-row1 { gap: 3px; }

/* ── Off-duty column overlay ─────────────────────────── */
.col-staff-off {
  position: relative;
}
.col-staff-off::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: repeating-linear-gradient(
    -45deg,
    rgba(0,0,0,.035), rgba(0,0,0,.035) 2px,
    transparent 2px, transparent 12px
  );
  pointer-events: none !important;
}
/* Ensure all children still receive clicks */
.col-staff-off > * {
  position: relative;
  z-index: 1;
  pointer-events: auto;
}

/* ── Week/Month view: hide day-specific controls ──── */
body.view-week .cal-date-strip,
body.view-month .cal-date-strip { display: none !important; }

body.view-week .cal-staff-strip,
body.view-month .cal-staff-strip { display: none !important; }

/* ── Drag-to-reorder staff ─────────────────────── */
.cal-hdr-staff[draggable="true"] { cursor: grab; }
.cal-hdr-staff[draggable="true"]:active { cursor: grabbing; }
.cal-hdr-staff.drag-over {
  background: rgba(108,71,255,.12) !important;
  border-left: 2px dashed var(--pri) !important;
}

/* ── Booking list panel: give cal body extra bottom padding ── */
.view-day .cal-scroll,
.view-week .cal-scroll {
  padding-bottom: 80px;
}

/* Give calendar scroll body enough bottom padding to not be hidden by slide panel */
.view-day #cal-body, .view-week #cal-body {
  padding-bottom: 120px !important;
}

/* ── Legend: clickable toggles ─────────────────── */
.leg.leg-toggle { cursor: pointer; -webkit-tap-highlight-color: transparent; border-radius: 6px; padding: 2px 5px; transition: background .15s; }
.leg.leg-toggle:active { background: var(--surf2); }
.leg.off .leg-bar { opacity: .25; }
.leg.off .leg-pip { opacity: .25; }
.leg.off .leg-txt { color: var(--txt3); text-decoration: line-through; }


/* ═══════════════════════════════════════════════════════
   DEEMLO CALENDAR — CLICK & INTERACTION FIXES v2
   Thứ tự ưu tiên: thấp → cao
═══════════════════════════════════════════════════════ */

/* 1. Base: mọi thứ đều có thể click */
.cal-page,
.cal-area,
.cal-grid,
.cal-s-cols,
.cal-s-col,
.cal-scroll,
.cal-toolbar,
.cal-vseg,
.cal-nav,
.cal-legend,
.cal-staff-strip,
.cal-date-strip,
.cal-col-hdr,
.hdr-staff-row {
  pointer-events: auto;
}

/* 2. Toolbar buttons - LUÔN clickable, z-index cao */
.cal-toolbar button,
.cal-vseg button,
.cal-vbtn,
.cal-nav-arr,
.cal-today-btn,
.cal-qbook-btn,
.cal-top-toggle,
.ds-chip,
.sf-chip,
.leg.leg-toggle {
  pointer-events: auto !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(108,71,255,.15);
  cursor: pointer;
  position: relative;
  z-index: 30;
}

/* 3. Staff off column - sọc KHÔNG block click */
.col-staff-off {
  position: relative;
}
.col-staff-off::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: repeating-linear-gradient(
    -45deg,
    rgba(0,0,0,.03), rgba(0,0,0,.03) 2px,
    transparent 2px, transparent 12px
  );
  pointer-events: none !important;
}

/* 4. bk-list-wrap panel - KHÔNG block calendar khi đóng */
.bk-list-wrap {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 40 !important;
  background: var(--surf) !important;
  border-radius: 14px 14px 0 0 !important;
  box-shadow: 0 -4px 20px rgba(0,0,0,.12) !important;
  /* QUAN TRỌNG: collapsed = không block calendar */
  pointer-events: none;
}
/* Chỉ header luôn nhận click */
#bk-list-wrap .bk-list-hdr {
  pointer-events: auto !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  position: relative;
  z-index: 41;
}

/* 5. cal-top-controls z-index thấp để không che grid */
.cal-top-controls {
  z-index: 20 !important;
}
.cal-col-hdr {
  z-index: 15 !important;
}

/* 6. Appointment cards */
.appt {
  pointer-events: auto !important;
  cursor: pointer !important;
  touch-action: manipulation;
  z-index: 8 !important;
}
.appt:hover { z-index: 12 !important; }

/* ═══════════════════════════════════════════════════════
   DARK MODE CALENDAR
═══════════════════════════════════════════════════════ */
html.dark-mode .cal-page,
html.dark-mode .cal-top-controls,
html.dark-mode .cal-toolbar,
html.dark-mode .cal-col-hdr,
html.dark-mode .hdr-staff-row,
html.dark-mode .bk-list-wrap {
  background: #141929 !important;
  border-color: #1e2d4a !important;
}
html.dark-mode .cal-s-col {
  background: #0a0e1a !important;
  border-color: #1e2d4a !important;
}
html.dark-mode .cal-s-col.today-col {
  background: rgba(26,86,219,.04) !important;
}
html.dark-mode .cal-time-col {
  background: #0f1422 !important;
  border-color: #1e2d4a !important;
}
html.dark-mode .t-row span { color: #5a6a88 !important; }
html.dark-mode .t-row { border-color: #1e2d4a !important; }
html.dark-mode .hr-line { background: rgba(255,255,255,.05) !important; }
html.dark-mode .half-line { border-top-color: rgba(255,255,255,.025) !important; }
html.dark-mode .cal-vbtn {
  background: #1a2035 !important;
  border-color: #283a5c !important;
  color: #c8d4f0 !important;
}
html.dark-mode .cal-vbtn.on {
  background: #1a56db !important;
  border-color: #1a56db !important;
  color: #fff !important;
  box-shadow: 0 0 0 3px rgba(26,86,219,.35) !important;
}
html.dark-mode .cal-nav-arr,
html.dark-mode .cal-today-btn {
  background: #1a2035 !important;
  border-color: #283a5c !important;
  color: #c8d4f0 !important;
}
html.dark-mode .cal-date-lbl { color: #f0f4ff !important; }
html.dark-mode .cal-qbook-btn {
  background: #1a56db !important;
  color: #fff !important;
}
html.dark-mode .ds-chip {
  background: #1a2035 !important;
  border-color: #1e2d4a !important;
  color: #8899bb !important;
}
html.dark-mode .ds-chip.selected {
  background: #1a56db !important;
  border-color: #1a56db !important;
  color: #fff !important;
}
html.dark-mode .ds-chip.is-today .dc-num { color: #5b8dee !important; }
html.dark-mode .sf-chip {
  background: #1a2035 !important;
  border-color: #1e2d4a !important;
}
html.dark-mode .sf-chip.on {
  border-color: #5b8dee !important;
  background: rgba(91,141,238,.18) !important;
}
html.dark-mode .cal-hdr-staff {
  background: #1a2035 !important;
  border-color: #1e2d4a !important;
}
html.dark-mode .hdr-name { color: #c8d4f0 !important; }
html.dark-mode .hdr-meta { color: #5a6a88 !important; }
html.dark-mode .hdr-summary-row {
  background: #0f1422 !important;
  border-color: #1e2d4a !important;
}
html.dark-mode .cal-legend { background: #141929 !important; }
html.dark-mode .leg-txt { color: #8899bb !important; }
html.dark-mode .bk-list-hdr { color: #c8d4f0 !important; }
html.dark-mode .bk-list-hdr::before { background: #283a5c !important; }
html.dark-mode .bk-card {
  background: #141929 !important;
  border-color: #1e2d4a !important;
}
html.dark-mode .bk-cname { color: #f0f4ff !important; }
html.dark-mode .bk-meta { color: #8899bb !important; }
html.dark-mode .month-wrap { background: #0a0e1a !important; }
html.dark-mode .mo-cell {
  background: #141929 !important;
  border-color: #1e2d4a !important;
}
html.dark-mode .mo-cell.today-cell { background: rgba(26,86,219,.08) !important; }
html.dark-mode .mo-num { color: #8899bb !important; }
html.dark-mode .mo-cell.today-cell .mo-num { color: #5b8dee !important; }
/* qbook sheet dark */
html.dark-mode .qb-sheet,
html.dark-mode .cal-sheet {
  background: #141929 !important;
}
html.dark-mode .qb-head { border-color: #1e2d4a !important; }
html.dark-mode .time-c {
  background: #1a2035 !important;
  border-color: #283a5c !important;
  color: #c8d4f0 !important;
}
html.dark-mode .time-c.on {
  background: #1a56db !important;
  border-color: #1a56db !important;
  color: #fff !important;
}