/* ═══════════════════════════════════════════════════════
   calendar.css v8.0 — byTNT
   Mobile-first · Dark/Light · UX-polished
═══════════════════════════════════════════════════════ */

/* ── 0. CSS variables ─────────────────────────────────── */
.cal-page, .cal-page * {
  --pri: #6c47ff; --pri-l: rgba(108,71,255,.1); --pri-d: #4f2ee8;
  --green: #22c55e; --blue: #3b82f6; --red: #ef4444; --amber: #f59e0b;
  --bg: #f4f3f0; --surf: #fff; --surf2: #f0eeeb; --bdr: #e2dfd8;
  --txt: #111827; --txt2: #4b5563; --txt3: #9ca3af;
  --CELL: 80px; --TCOL: 44px; --SLOT: 20px;
}
html.dark-mode .cal-page, html.dark-mode .cal-page * {
  --bg: #0a0e1a; --surf: #141929; --surf2: #1a2035; --bdr: #1e2d4a;
  --txt: #f0f4ff; --txt2: #8899bb; --txt3: #4a5a78;
  --pri-l: rgba(91,141,238,.15);
}

/* ── 1. Layout ────────────────────────────────────────── */
.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;
  }
}
.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; }
}

/* ── 2. Toolbar ───────────────────────────────────────── */
.cal-toolbar {
  display: flex !important;
  align-items: center !important;
  gap: 6px;
  padding: 7px 10px;
  background: var(--surf);
  border-bottom: 1px solid var(--bdr);
  flex-shrink: 0;
  position: sticky; top: 0; z-index: 30;
}
.cal-vseg {
  display: flex !important;
  border: 1.5px solid var(--bdr);
  border-radius: 9px;
  overflow: hidden;
  flex-shrink: 0;
}
.cal-vbtn {
  padding: 5px 9px !important;
  border: none !important;
  border-right: 1px solid var(--bdr) !important;
  background: none !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  color: var(--txt2) !important;
  font-family: inherit !important;
  transition: all .15s;
}
.cal-vbtn:last-child { border-right: none !important; }
.cal-vbtn.on { background: var(--pri) !important; color: #fff !important; }
.cal-nav { display: flex !important; align-items: center !important; gap: 3px; }
.cal-nav-arr {
  width: 28px !important; height: 28px !important; border-radius: 50% !important;
  border: 1.5px 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;
}
.cal-nav-arr:active { border-color: var(--pri) !important; color: var(--pri) !important; }
.cal-today-btn {
  padding: 5px 10px !important; border: 1.5px solid var(--bdr) !important;
  border-radius: 8px !important; background: var(--surf) !important;
  font-family: inherit !important; font-size: 11px !important; font-weight: 800 !important;
  cursor: pointer !important; color: var(--txt) !important;
}
.cal-today-btn:active { border-color: var(--pri) !important; color: var(--pri) !important; }
.cal-date-lbl {
  font-size: 12px; font-weight: 800; color: var(--txt);
  flex: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-qbook-btn {
  margin-left: auto;
  padding: 8px 13px !important;
  background: var(--pri) !important; color: #fff !important;
  border: none !important; border-radius: 10px !important;
  font-family: inherit !important; font-size: 12px !important; font-weight: 900 !important;
  cursor: pointer !important; display: inline-flex !important;
  align-items: center !important; gap: 5px; flex-shrink: 0;
  box-shadow: 0 3px 12px rgba(108,71,255,.4);
}
@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; }
}

/* ── 3. Legend ────────────────────────────────────────── */
.cal-legend {
  display: flex !important; align-items: center !important; gap: 5px;
  padding: 4px 10px; background: var(--surf); border-bottom: 1px solid var(--bdr);
  flex-shrink: 0; overflow-x: auto; scrollbar-width: none;
}
.cal-legend::-webkit-scrollbar { display: none; }
.leg { display: inline-flex !important; align-items: center !important; gap: 4px; cursor: pointer; flex-shrink: 0; padding: 2px 5px; border-radius: 6px; transition: background .12s; }
.leg:active { background: var(--surf2); }
.leg.off { opacity: .35; }
.leg-pip { width: 7px !important; height: 7px !important; border-radius: 50%; flex-shrink: 0; }
.leg-bar { width: 12px !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; } }

/* ── 4. Staff strip ───────────────────────────────────── */
.cal-staff-strip {
  display: flex !important; align-items: center !important;
  overflow-x: auto !important; scrollbar-width: none;
  flex-shrink: 0; padding: 5px 8px; gap: 5px;
  background: var(--surf); border-bottom: 1px solid var(--bdr);
}
.cal-staff-strip::-webkit-scrollbar { display: none; }
.sf-chip {
  display: inline-flex !important; align-items: center !important; gap: 5px;
  padding: 5px 10px !important; border-radius: 20px !important;
  border: 1.5px solid var(--bdr) !important; cursor: pointer !important;
  flex-shrink: 0 !important; background: var(--surf) !important;
  font-family: inherit !important; transition: all .15s;
  -webkit-tap-highlight-color: transparent;
}
.sf-chip.on { border-color: var(--pri) !important; background: var(--pri-l) !important; }
.sf-chip:active { transform: scale(.94); }
.sf-av {
  width: 22px !important; height: 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;
}
.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; }

/* ── 5. Smart slots banner ────────────────────────────── */
.cal-smart {
  display: flex !important; align-items: center !important; gap: 7px;
  padding: 6px 12px; background: linear-gradient(90deg,#eff6ff,#f0fdf4);
  border-bottom: 1px solid #dbeafe; cursor: pointer; flex-shrink: 0; transition: background .15s;
}
html.dark-mode .cal-smart { background: linear-gradient(90deg,rgba(26,86,219,.1),rgba(5,150,105,.08)) !important; border-bottom-color: rgba(26,86,219,.2) !important; }
.cal-smart span { font-size: 10px; font-weight: 700; color: #1d4ed8; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.dark-mode .cal-smart span { color: #5b8dee !important; }
.cal-smart-arr { font-size: 13px; color: #1d4ed8; flex-shrink: 0; }

/* ── 6. Date strip ────────────────────────────────────── */
.cal-date-strip { display: none; }
@media (max-width: 900px) {
  .cal-date-strip {
    display: flex !important; align-items: center !important; gap: 3px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; padding: 6px 8px;
    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; -webkit-tap-highlight-color: transparent;
}
.ds-chip .dc-day  { font-size: .6rem; 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%; }

/* ── 7. Column headers ─────────────────────────────────── */
.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);
}
html.dark-mode .cal-top-controls { box-shadow: 0 2px 12px rgba(0,0,0,.35) !important; }
.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; }
.cal-top-toggle-bar { width: 32px; height: 3px; border-radius: 2px; background: var(--bdr); }
.cal-top-inner { overflow: visible; max-height: 500px; transition: max-height .35s cubic-bezier(.4,0,.2,1), opacity .3s; opacity: 1; }
.cal-top-inner.collapsed { max-height: 0; opacity: 0; overflow: hidden; pointer-events: none; }

.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);
}
.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); }
.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: var(--surf2); }
.cal-hdr-staff {
  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); }
.cal-hdr-staff.staff-off { opacity: .4; }
.hdr-av {
  width: 30px !important; height: 30px !important; border-radius: 50% !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 10px !important; font-weight: 900 !important; color: #fff !important;
  position: relative; margin-bottom: 2px;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  overflow: visible !important; flex-shrink: 0 !important;
}
.hdr-online { position: absolute; bottom: 0; right: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--green); border: 2px solid var(--surf); }
.hdr-name { font-size: 8px; 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: 7px; color: var(--txt3); }

/* ── 8. Grid ──────────────────────────────────────────── */
.cal-area { flex: 1 !important; display: flex !important; flex-direction: column !important; overflow: visible !important; min-height: 0 !important; position: relative; }
.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; }
.cal-scroll::-webkit-scrollbar { display: none; }
@media (max-width: 900px) { .cal-scroll { max-height: 55vh !important; min-height: 200px !important; } }
.cal-grid { display: flex !important; flex-direction: row !important; position: relative; min-height: 0; width: 100%; overflow: hidden; }
.cal-time-col { width: var(--TCOL) !important; min-width: var(--TCOL) !important; flex-shrink: 0; background: var(--surf2); position: sticky; left: 0; z-index: 10; border-right: 1px solid var(--bdr); }
.t-row { display: flex !important; align-items: flex-start !important; justify-content: flex-end !important; padding: 0 5px 0 0; height: var(--CELL); 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: 4px; 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 {
  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; scroll-snap-align: start;
}
.cal-s-col:last-child { border-right: none; }
.cal-s-col.today-col { background: rgba(108,71,255,.015); }
.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 rgba(0,0,0,.06); pointer-events: none; z-index: 1; }
html.dark-mode .half-line { border-top-color: rgba(255,255,255,.04) !important; }
@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: 26px !important; height: 26px !important; }
}

/* ── 9. 3-Line system ─────────────────────────────────── */
.line-row { position: absolute; left: 0; right: 0; z-index: 5; pointer-events: none; display: flex !important; align-items: center !important; width: 100% !important; }
#seek-row { z-index: 6; transition: top .06s linear; }
.seek-dot { width: 10px !important; height: 10px !important; border-radius: 50%; background: var(--blue); flex-shrink: 0; margin-left: -5px; box-shadow: 0 0 0 3px rgba(59,130,246,.2); }
.seek-bar { flex: 1; height: 2px; background: var(--blue); opacity: .8; }
.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 8px; 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; 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: 6px; top: 50%; transform: translateY(-50%); background: var(--green); color: #fff; font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: 8px; white-space: nowrap; pointer-events: none; }
#close-row { z-index: 24; }
.close-dot { width: 8px !important; height: 8px !important; border-radius: 50%; background: var(--red); flex-shrink: 0; margin-left: -4px; }
.close-bar { flex: 1; height: 1.5px; background: var(--red); opacity: .6; }
.close-badge { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: var(--red); color: #fff; font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: 8px; white-space: nowrap; pointer-events: none; }

/* ── 10. Appointment cards ────────────────────────────── */
.appt {
  position: absolute !important;
  display: flex !important; flex-direction: column !important;
  border-radius: 9px; padding: 5px 8px 13px 8px;
  cursor: pointer; overflow: hidden;
  user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
  will-change: transform;
  border-left: 3px solid rgba(255,255,255,.5);
  box-shadow: 0 2px 8px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.15);
  min-height: 36px; left: 2px; right: 2px; z-index: 8;
  transition: box-shadow .15s, opacity .2s, transform .12s;
}
.appt:active { transform: scale(.97); }
.appt:hover  { box-shadow: 0 6px 22px rgba(0,0,0,.26); z-index: 12; }

/* Dragging state */
.appt.dragging   { opacity: .9; z-index: 100; box-shadow: 0 16px 48px rgba(0,0,0,.35); transform: scale(1.04) rotate(.5deg) !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: .15 !important; border: 2px dashed rgba(255,255,255,.4); pointer-events: none; }

/* Other cards dimmed when dragging */
.appt.drag-dim   { opacity: .28 !important; filter: saturate(.4); pointer-events: none; }

/* Completed slot — xám + khoá */
.appt.slot-completed {
  background: #2a2a35 !important;
  border-left-color: #444 !important;
  opacity: .72 !important;
  cursor: default !important;
  pointer-events: auto !important;
}
html.dark-mode .appt.slot-completed { background: #1a1a24 !important; }
.appt.slot-completed .a-name { color: #aaa !important; font-weight: 600 !important; }
.appt.slot-completed .a-time { color: rgba(200,200,200,.7) !important; }
.appt.slot-completed .a-rz   { display: none !important; }
.appt.slot-completed::after {
  content: '✅';
  position: absolute; top: 5px; right: 7px;
  font-size: 10px; opacity: .7;
}

/* Walk-in slot template */
.appt-slot-template {
  background: rgba(124,58,237,.13) !important;
  border-left: 3px dashed #7c3aed !important;
  border-radius: 9px !important;
}
html.dark-mode .appt-slot-template { background: rgba(124,58,237,.18) !important; }

/* Content rows */
.a-row1 { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 3px; flex-shrink: 0; min-width: 0; }
.a-time  { font-size: 10px; font-weight: 700; color: rgba(255,255,255,.9); white-space: nowrap; line-height: 1.25; flex-shrink: 0; }
.a-staff-inline { font-size: 9px; font-weight: 600; color: rgba(255,255,255,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; flex: 1; min-width: 0; display: none; }
.a-name  { font-size: 13px; 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,.2); margin-top: 1px; }
.a-row3  { display: none !important; align-items: center !important; gap: 5px; flex-shrink: 0; margin-top: 2px; min-width: 0; }
.a-svc-inline   { font-size: 9.5px; font-weight: 600; color: rgba(255,255,255,.85); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.a-phone-inline { font-size: 9px; font-weight: 600; color: rgba(255,255,255,.75); white-space: nowrap; flex-shrink: 0; }
.a-notes  { font-size: 9px; font-weight: 500; font-style: italic; color: rgba(255,255,255,.7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-shrink: 0; display: none; margin-top: 2px; }
.a-staff  { display: none !important; }
.a-phone  { display: none !important; }
.a-status-dot { position: absolute; top: 6px; right: 7px; width: 6px; height: 6px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.25); }
.a-dot { width: 6px; height: 6px; border-radius: 50%; position: absolute; top: 6px; right: 7px; }

/* Smart content by height */
.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; }

.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; }

.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: 13px; cursor: s-resize; touch-action: none; display: flex; align-items: center; justify-content: center; z-index: 5; }
.a-rz::after { content: ''; width: 22px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.35); }

/* 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; }

@media (max-width: 768px) {
  .appt { left: 1px !important; right: 1px !important; padding: 4px 6px 12px 6px !important; border-radius: 7px !important; }
  .a-name  { font-size: 11px !important; }
  .a-time  { font-size: 9px !important; }
}

/* ── 11. 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: 5px 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: 68px; padding: 4px; cursor: pointer; overflow: hidden; transition: background .12s; }
.mo-cell.today { background: rgba(108,71,255,.05); outline: 1.5px solid var(--pri); outline-offset: -1px; }
.mo-cell.other-mo { background: var(--surf2); opacity: .5; }
.mc-num { font-size: 11px; font-weight: 800; color: var(--txt); margin-bottom: 2px; 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; align-items: center !important; gap: 3px; padding: 1px 4px; border-radius: 4px; margin-bottom: 1px; }
.mc-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.mc-name { font-size: 8.5px; 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; }

/* ── 12. Bottom sheets ────────────────────────────────── */
.cal-ov {
  position: fixed !important; inset: 0 !important;
  background: rgba(0,0,0,.48); 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(3px); -webkit-backdrop-filter: blur(3px);
}
.cal-ov.open { opacity: 1; pointer-events: auto; }
.cal-sheet {
  display: block !important;
  background: var(--surf); border-radius: 20px 20px 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 14px; }

/* Detail sheet hero */
.sh-hero {
  display: flex !important; align-items: center !important; gap: 12px;
  background: linear-gradient(135deg, rgba(108,71,255,.08), rgba(124,58,237,.06));
  border-radius: 14px; padding: 13px; margin-bottom: 12px;
  border: 1px solid rgba(108,71,255,.12);
}
html.dark-mode .sh-hero { background: rgba(108,71,255,.12) !important; border-color: rgba(108,71,255,.2) !important; }
.sh-avatar { width: 46px !important; height: 46px !important; border-radius: 12px; background: linear-gradient(135deg,var(--pri),#7c3aed); display: flex !important; align-items: center; justify-content: center; color: #fff; font-weight: 900; font-size: 1.1rem; flex-shrink: 0; box-shadow: 0 4px 12px rgba(108,71,255,.3); }
.sh-info { flex: 1; min-width: 0; }
.sh-name  { font-size: .95rem; font-weight: 900; color: var(--txt); }
.sh-phone { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; 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; }
html.dark-mode .stat-pill.pending   { background: rgba(245,158,11,.15); color: #fcd34d; }
html.dark-mode .stat-pill.confirmed { background: rgba(34,197,94,.15); color: #86efac; }
html.dark-mode .stat-pill.completed { background: rgba(108,71,255,.2); color: #c4b5fd; }
html.dark-mode .stat-pill.cancelled { background: rgba(239,68,68,.15); color: #fca5a5; }

.sh-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 7px; margin-bottom: 12px; }
.sh-cell { background: var(--bg); border-radius: 10px; padding: 9px 11px; }
html.dark-mode .sh-cell { background: #0f1422 !important; }
.sh-cell.full { grid-column: 1/-1; }
.sh-cell-lbl { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--txt2); margin-bottom: 3px; }
.sh-cell-val { font-size: .84rem; font-weight: 700; color: var(--txt); line-height: 1.4; word-break: break-word; }
.sh-cell-val.price { color: var(--pri); font-size: .96rem; }
.sh-acts { display: grid !important; gap: 8px; margin-bottom: 10px; }
.sh-acts.g2 { grid-template-columns: 1fr 1fr !important; }
.sh-act {
  height: 46px !important; border-radius: 12px; border: none !important;
  font-size: .85rem !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;
}
.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; }
html.dark-mode .sh-act.cancel { background: rgba(239,68,68,.15) !important; color: #fca5a5 !important; }
html.dark-mode .sh-act.close-btn { background: #1a2035 !important; color: #8899bb !important; border-color: #283a5c !important; }

/* ── 13. Quick Book sheet ─────────────────────────────── */
.qb-sheet {
  display: block !important;
  background: var(--surf); border-radius: 20px 20px 0 0;
  width: 100% !important; max-height: 90dvh;
  overflow-y: auto; scrollbar-width: none;
  padding: 10px 14px calc(24px + 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; 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(--surf2) !important; font-size: 13px !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; color: var(--txt2) !important; }

/* Form */
.fg { margin-bottom: 9px; }
.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: 9px 11px !important;
  border: 1.5px solid var(--bdr) !important; border-radius: 9px !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; display: block !important; box-sizing: border-box !important;
}
.fi:focus { border-color: var(--pri) !important; }
html.dark-mode .fi { background: #1a2035 !important; border-color: #283a5c !important; color: #f0f4ff !important; }
html.dark-mode .fi:focus { border-color: #5b8dee !important; }
html.dark-mode select.fi option { background: #1a2035; color: #f0f4ff; }
.fg-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 7px; margin-bottom: 9px; }
.fg-row .fg { margin-bottom: 0; }

/* Time chips */
.time-grid { display: flex !important; flex-direction: row !important; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; flex-wrap: nowrap; }
.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: 8px !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;
  -webkit-tap-highlight-color: transparent;
}
.time-c.on { border-color: var(--pri) !important; background: var(--pri-l) !important; color: var(--pri) !important; }
html.dark-mode .time-c { background: #1a2035 !important; border-color: #283a5c !important; color: #8899bb !important; }
html.dark-mode .time-c.on { border-color: #5b8dee !important; background: rgba(91,141,238,.15) !important; color: #5b8dee !important; }

/* Autocomplete */
.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; }
html.dark-mode .ac-drop { background: #1a2035 !important; border-color: #5b8dee !important; }
.ac-item { display: flex !important; align-items: center !important; gap: 10px; padding: 10px 13px; cursor: pointer; border-bottom: 1px solid var(--bdr); transition: background .12s; }
.ac-item:last-child { border-bottom: none; }
.ac-item:active { background: var(--surf2); }
.ac-av { width: 32px !important; height: 32px !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: .86rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--txt); }
.ac-phone { font-size: .73rem; color: var(--txt2); }

/* Summary + submit */
.qb-sum { background: var(--pri-l); border-radius: 10px; padding: 10px 13px; margin-bottom: 12px; }
.qb-sum-val { font-size: 1rem; font-weight: 900; color: var(--pri); }
.qb-submit { width: 100% !important; padding: 14px !important; background: var(--pri) !important; color: #fff !important; border: none !important; border-radius: 12px !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: var(--green); }

/* ── 14. Booking list panel ────────────────────────────── */
.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;
  pointer-events: none;
}
html.dark-mode .bk-list-wrap { background: #141929 !important; box-shadow: 0 -4px 24px rgba(0,0,0,.4) !important; }
#bk-list-wrap .bk-list-hdr { pointer-events: auto !important; cursor: pointer; position: relative; z-index: 41; }
.bk-list-hdr { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 12px 14px 8px; font-size: .74rem; font-weight: 800; color: var(--txt); text-transform: uppercase; letter-spacing: .06em; user-select: none; -webkit-tap-highlight-color: transparent; position: relative; }
.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; gap: 5px; padding: 3px 12px 8px; overflow-x: auto; scrollbar-width: none; }
.bk-list-filter::-webkit-scrollbar { display: none; }
.bk-flt-btn { flex-shrink: 0 !important; padding: 4px 10px !important; border-radius: 20px !important; border: 1.5px solid var(--bdr) !important; background: var(--surf) !important; color: var(--txt2) !important; font-size: .7rem !important; font-weight: 700 !important; cursor: pointer !important; font-family: inherit !important; }
.bk-flt-btn.on { background: var(--pri) !important; border-color: var(--pri) !important; color: #fff !important; }

/* Booking cards in list */
.bk-card {
  display: flex !important; align-items: stretch;
  margin: 0 10px 7px; border-radius: 12px; background: var(--surf);
  box-shadow: 0 1px 4px rgba(0,0,0,.07), 0 2px 8px rgba(0,0,0,.04);
  overflow: hidden; cursor: pointer; transition: transform .15s, box-shadow .15s;
  border: 1.5px solid var(--bdr);
}
html.dark-mode .bk-card { background: #1a2035 !important; border-color: #1e2d4a !important; }
.bk-card:active { transform: scale(.985); }
.bk-card-bar  { width: 5px; flex-shrink: 0; }
.bk-card-body { flex: 1 !important; min-width: 0; padding: 9px 10px; display: flex !important; flex-direction: column !important; }
.bk-card-r1   { display: flex !important; align-items: center !important; gap: 6px; margin-bottom: 4px; }
.bk-time-pill { background: rgba(108,71,255,.1); color: var(--pri); font-size: .68rem; font-weight: 800; padding: 2px 8px; border-radius: 7px; white-space: nowrap; flex-shrink: 0; }
html.dark-mode .bk-time-pill { background: rgba(91,141,238,.15); color: #5b8dee; }
.bk-cname  { font-size: .88rem; 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: .6rem; font-weight: 800; padding: 2px 7px; border-radius: 7px; 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; }
html.dark-mode .bk-st.s-pending   { background: rgba(245,158,11,.15); color: #fcd34d; }
html.dark-mode .bk-st.s-confirmed { background: rgba(34,197,94,.15); color: #86efac; }
html.dark-mode .bk-st.s-completed { background: rgba(108,71,255,.15); color: #c4b5fd; }
html.dark-mode .bk-st.s-cancelled { background: rgba(239,68,68,.15); color: #fca5a5; }
.bk-card-r2 { display: flex !important; align-items: center !important; gap: 6px; font-size: .72rem; 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: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.bk-tel  { display: inline-flex !important; align-items: center !important; gap: 3px; color: var(--txt2); font-size: .68rem; 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: 7px 6px 7px 0; justify-content: center; align-items: center; }
.bk-act-btn { width: 30px !important; height: 30px !important; border-radius: 8px !important; border: none !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: .8rem !important; transition: all .15s; padding: 0 !important; }
.bk-act-btn:active { transform: scale(.88); }
.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; }
.bk-qbook-btn { display: block !important; width: calc(100% - 24px) !important; margin: 5px 12px 4px !important; height: 46px !important; border-radius: 12px !important; font-size: .9rem !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: 7px; box-shadow: 0 5px 18px rgba(108,71,255,.3) !important; }
.bk-list-empty { text-align: center; padding: 20px 16px; color: var(--txt2); }
.bk-list-empty .ei { font-size: 1.8rem; margin-bottom: 6px; }
.bk-list-empty .et { font-weight: 700; font-size: .88rem; color: var(--txt); }
.bk-list-empty .es { font-size: .73rem; color: var(--txt2); margin-top: 3px; }

/* ── 15. Animations ───────────────────────────────────── */
@keyframes fade-in { from{opacity:0;transform:scale(.95)} to{opacity:1;transform:scale(1)} }
.appt-new { animation: fade-in .2s ease; }
@keyframes appt-pulse { 0%{box-shadow:0 0 0 0 rgba(255,200,0,.8)}50%{box-shadow:0 0 0 8px rgba(255,200,0,0)}100%{box-shadow:0 2px 8px rgba(0,0,0,.2)} }

/* ── 16. Misc ─────────────────────────────────────────── */
.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; }
.col-staff-off > * { position: relative; z-index: 1; pointer-events: auto; }
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; }
.cal-hdr-staff[draggable="true"] { cursor: grab; }
.cal-hdr-staff.drag-over { background: rgba(108,71,255,.12) !important; border-left: 2px dashed var(--pri) !important; }
.view-day #cal-body, .view-week #cal-body { padding-bottom: 120px !important; }

/* Pointer events */
.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; }
.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 { pointer-events: auto !important; touch-action: manipulation; -webkit-tap-highlight-color: rgba(108,71,255,.12); cursor: pointer; position: relative; z-index: 30; }
.appt { pointer-events: auto !important; cursor: pointer !important; touch-action: manipulation; z-index: 8 !important; }
.appt:hover { z-index: 12 !important; }
.cal-top-controls { z-index: 20 !important; }
.cal-col-hdr { z-index: 15 !important; }