/* ================================================================
   CALENDAR / STAFF CALENDAR — Modern Mobile-First UI
   Hem calendar.html hem staffCalendar.html tarafından kullanılır.
   FullCalendar v3 override'ları + custom bileşenler
================================================================ */

/* ════════════════════════════════════════════════════════════
   0. FONT & ROOT DEĞİŞKENLER
════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --cal-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --cal-primary: #4F46E5;
  --cal-primary-light: #EEF2FF;
  --cal-primary-glow: rgba(79,70,229,0.15);
  --cal-border: #F1F5F9;
  --cal-border-mid: #E2E8F0;
  --cal-text: #1E293B;
  --cal-text-secondary: #64748B;
  --cal-text-muted: #94A3B8;
  --cal-bg: #F1F5F9;
  --cal-card-bg: #fff;
  --cal-surface: #F8FAFC;
  --cal-success: #10B981;
  --cal-warning: #F59E0B;
  --cal-danger: #EF4444;
  --cal-indigo: #6366F1;
  --cal-teal: #14B8A6;
  --cal-radius-sm: 6px;
  --cal-radius: 10px;
  --cal-radius-lg: 16px;
  --cal-shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --cal-shadow: 0 2px 12px rgba(0,0,0,0.08);
  --cal-shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
  --cal-transition: 0.18s cubic-bezier(0.4,0,0.2,1);
}

/* ════════════════════════════════════════════════════════════
   1. SAYFA & ANA KART
════════════════════════════════════════════════════════════ */
body {
  background: var(--cal-bg) !important;
  font-family: var(--cal-font) !important;
}
.page-wrapper { background: var(--cal-bg); }

.card.block {
  border-radius: var(--cal-radius-lg) !important;
  box-shadow: var(--cal-shadow) !important;
  border: none !important;
  overflow: visible;
  background: var(--cal-card-bg);
}
.card.block .card-body.calender-sidebar {
  padding: 1.25rem !important;
}

/* Gece sarkan mesai (istisnai / standart) — bilgi bandı + ertesi güne düşen slotlar */
.cal-overnight-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--cal-radius);
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  border: 1px solid #c7d2fe;
  color: #3730a3;
  font-size: 0.8rem;
  line-height: 1.45;
  box-shadow: var(--cal-shadow-sm);
}
.cal-overnight-banner.is-hidden {
  display: none !important;
}
.cal-overnight-banner .cal-overnight-icon {
  flex-shrink: 0;
  margin-top: 0.1rem;
  color: #4f46e5;
}
.cal-overnight-banner strong {
  font-weight: 700;
  color: #312e81;
}
#calendar .fc-time-grid .fc-slats tr.cal-slot-nextday td.fc-widget-content,
#calendar .fc-slats tr.cal-slot-nextday td.fc-widget-content {
  background: rgba(99, 102, 241, 0.11) !important;
}
#calendar .fc-time-grid .fc-slats tr.cal-slot-nextday .fc-axis,
#calendar .fc-slats tr.cal-slot-nextday .fc-axis {
  background: rgba(99, 102, 241, 0.06) !important;
  color: #4338ca !important;
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════
   2. ÜST KONTROL BARI — Personel + Tarih + Aralık
════════════════════════════════════════════════════════════ */
.cal-controls {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.cal-controls .cal-ctrl-group {
  flex: 1;
  min-width: 140px;
}
.cal-controls .cal-ctrl-group.cal-ctrl-sm {
  flex: 0 0 auto;
  min-width: 110px;
  max-width: 140px;
}
.cal-controls label {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  color: var(--cal-text-secondary) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.3rem;
  display: block;
}

/* Shared select/input style */
.cal-controls select,
.cal-controls .form-control {
  border-radius: var(--cal-radius) !important;
  border: 1.5px solid var(--cal-border-mid) !important;
  font-family: var(--cal-font) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: var(--cal-text) !important;
  background: var(--cal-card-bg) !important;
  padding: 0.5rem 0.75rem !important;
  transition: border-color var(--cal-transition), box-shadow var(--cal-transition) !important;
  box-shadow: none !important;
  height: auto !important;
  cursor: pointer;
}
.cal-controls select:focus,
.cal-controls .form-control:focus {
  border-color: var(--cal-primary) !important;
  box-shadow: 0 0 0 3px var(--cal-primary-glow) !important;
  outline: none !important;
}

/* Pickadate input group */
.cal-controls .input-group {
  margin-bottom: 0;
}
.cal-controls .input-group .form-control {
  border-radius: var(--cal-radius) 0 0 var(--cal-radius) !important;
  border-right: none !important;
}
.cal-controls .input-group-append .input-group-text,
.cal-controls .input-group-text {
  border-radius: 0 var(--cal-radius) var(--cal-radius) 0 !important;
  border: 1.5px solid var(--cal-border-mid) !important;
  border-left: none !important;
  background: var(--cal-surface) !important;
  color: var(--cal-primary) !important;
  font-size: 0.9rem !important;
}
.cal-controls .input-group:focus-within .input-group-text {
  border-color: var(--cal-primary) !important;
}

/* Legacy layout uyumu (#adminSelect kullanılıyorsa) */
#adminSelect { margin-bottom: 0.5rem; }
#adminSelect label {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  color: var(--cal-text-secondary) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.3rem;
  display: block;
}
#adminSelect #personel {
  border-radius: var(--cal-radius) !important;
  border: 1.5px solid var(--cal-border-mid) !important;
  font-family: var(--cal-font) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: var(--cal-text) !important;
  background: var(--cal-card-bg) !important;
  padding: 0.5rem 0.75rem !important;
  transition: border-color var(--cal-transition), box-shadow var(--cal-transition) !important;
  box-shadow: none !important;
  cursor: pointer;
}
#adminSelect #personel:focus {
  border-color: var(--cal-primary) !important;
  box-shadow: 0 0 0 3px var(--cal-primary-glow) !important;
  outline: none !important;
}

/* Tarih seçici (legacy yapı) */
.calender-sidebar .input-group { margin-bottom: 1rem; }
.calender-sidebar .input-group .form-control {
  border-radius: var(--cal-radius) 0 0 var(--cal-radius) !important;
  border: 1.5px solid var(--cal-border-mid) !important;
  border-right: none !important;
  font-family: var(--cal-font) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: var(--cal-text) !important;
  background: var(--cal-card-bg) !important;
  padding: 0.5rem 0.75rem !important;
  transition: border-color var(--cal-transition) !important;
  box-shadow: none !important;
}
.calender-sidebar .input-group .form-control:focus {
  border-color: var(--cal-primary) !important;
  box-shadow: none !important;
  outline: none !important;
}
.calender-sidebar .input-group-append .input-group-text,
.calender-sidebar .input-group-text {
  border-radius: 0 var(--cal-radius) var(--cal-radius) 0 !important;
  border: 1.5px solid var(--cal-border-mid) !important;
  border-left: none !important;
  background: var(--cal-surface) !important;
  color: var(--cal-primary) !important;
  font-size: 0.9rem !important;
}
.calender-sidebar .input-group:focus-within .input-group-text {
  border-color: var(--cal-primary) !important;
}

/* ════════════════════════════════════════════════════════════
   3. FULLCALENDAR v3 — GRİD & GENEL
════════════════════════════════════════════════════════════ */
#calendar {
  width: 100%;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  font-family: var(--cal-font) !important;
}
.fc { font-family: var(--cal-font) !important; }

/* Soft border'lar — tüm tablo çizgileri */
.fc td, .fc th {
  border-color: var(--cal-border) !important;
}
.fc-unthemed td.fc-today {
  background: var(--cal-primary-light) !important;
}

/* ── Toolbar (navigasyon) ─────────────────────────────────── */
.fc-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem !important;
  padding: 0 !important;
}
.fc-toolbar h2 {
  font-family: var(--cal-font) !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: var(--cal-text) !important;
  letter-spacing: -0.02em;
  margin: 0 0.5rem !important;
}

/* Navigasyon butonları — pill shape */
.fc-button {
  border-radius: 8px !important;
  font-family: var(--cal-font) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  padding: 0.4rem 0.85rem !important;
  background: var(--cal-card-bg) !important;
  color: var(--cal-primary) !important;
  border: 1.5px solid var(--cal-border-mid) !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: all var(--cal-transition) !important;
  cursor: pointer !important;
  line-height: 1.4 !important;
}
.fc-button:hover {
  background: var(--cal-primary-light) !important;
  border-color: var(--cal-primary) !important;
  color: var(--cal-primary) !important;
}
.fc-button.fc-state-active,
.fc-button.fc-state-down {
  background: var(--cal-primary) !important;
  border-color: var(--cal-primary) !important;
  color: #fff !important;
  box-shadow: 0 3px 10px var(--cal-primary-glow) !important;
}
.fc-button-group {
  gap: 0;
  display: inline-flex !important;
}
.fc-button-group .fc-button { border-radius: 0 !important; margin: 0 !important; }
.fc-button-group .fc-button:first-child { border-radius: 8px 0 0 8px !important; }
.fc-button-group .fc-button:last-child  { border-radius: 0 8px 8px 0 !important; }

/* ── Gün başlıkları ───────────────────────────────────────── */
.fc-day-header {
  font-family: var(--cal-font) !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--cal-text-secondary) !important;
  background: var(--cal-surface) !important;
  padding: 0.55rem 0.5rem !important;
  border-color: var(--cal-border) !important;
}

/* ── Time grid slot'ları ──────────────────────────────────── */
.fc-time-grid .fc-slats td {
  border-color: #D1D5DB !important;
}
/* Yarım saat çizgisi daha açık ama görünür */
.fc-time-grid .fc-slats .fc-minor td {
  border-top-style: dashed !important;
  border-color: #E5E7EB !important;
}
.fc-time-grid .fc-highlight-skeleton .fc-highlight,
.fc-time-grid .fc-highlight {
  background: rgba(79, 70, 229, 0.16) !important;
}
/* Saat label'ları */
.fc-axis {
  font-family: var(--cal-font) !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  color: var(--cal-text-muted) !important;
  padding: 0 8px !important;
  vertical-align: top !important;
  width: 48px !important;
}

/* Çalışma saati dışı alanlar */
.fc-nonbusiness {
  background: var(--cal-surface) !important;
}

/* ════════════════════════════════════════════════════════════
   4. NOW INDICATOR — Kırmızı çizgi + nokta
════════════════════════════════════════════════════════════ */
.fc-now-indicator.fc-now-indicator-line {
  border-color: var(--cal-danger) !important;
  border-width: 2px !important;
  z-index: 5 !important;
}
.fc-now-indicator.fc-now-indicator-line::before {
  content: '';
  position: absolute;
  left: -5px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cal-danger);
  box-shadow: 0 0 8px rgba(239,68,68,0.5);
}
/* Arrow indicator (opsiyonel, axis tarafındaki) */
.fc-now-indicator.fc-now-indicator-arrow {
  border-color: var(--cal-danger) !important;
  border-width: 5px !important;
}

/* Slat data-time tabanlı slot seçimi (FC hit-test kayması için) */
#calendar .fc-slat-select-highlight {
  position: absolute;
  inset: 0;
  background: rgba(59, 130, 246, 0.18);
  border: 1px solid rgba(59, 130, 246, 0.45);
  pointer-events: none;
  z-index: 2;
}

/* ════════════════════════════════════════════════════════════
   5. ETKİNLİKLER (EVENTS) — Genel
════════════════════════════════════════════════════════════ */
.fc-event {
  border-radius: 8px !important;
  border: none !important;
  padding: 3px 7px !important;
  font-family: var(--cal-font) !important;
  font-size: 0.73rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: opacity var(--cal-transition), transform var(--cal-transition), box-shadow var(--cal-transition);
  box-shadow: var(--cal-shadow-sm) !important;
  overflow: hidden;
}
.fc-event:hover {
  opacity: 0.92 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.15) !important;
}
.fc-event .fc-title {
  font-size: 0.72rem !important;
  line-height: 1.35;
  font-weight: 600;
}
.calendar-note-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 3px;
}
.calendar-note-badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  border-radius: 999px;
  padding: 1px 5px;
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1.25;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}
.calendar-note-badge--customer {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid rgba(153, 27, 27, 0.18);
}
.calendar-note-badge--appointment {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid rgba(146, 64, 14, 0.18);
}
.calendar-note-badge--paid {
  background: #dcfce7;
  color: #166534;
  border: 1px solid rgba(22, 101, 52, 0.18);
}
.calendar-note-badge--loyalty {
  background: #f5d0fe;
  color: #86198f;
  border: 1px solid rgba(134, 25, 143, 0.2);
}
.fc-event .fc-time {
  font-size: 0.65rem !important;
  opacity: 0.8;
  font-weight: 500;
}
.fc-time-grid-event.fc-short .fc-content { padding: 1px 4px; }

/* ── Randevu renkleri — Pastel & Soft ──────────────────── */

/* Onaylı Randevu (bg-primary) — Indigo pastel */
.fc-event.bg-primary {
  background: linear-gradient(135deg, #6366F1, #818CF8) !important;
  color: #fff !important;
}
.fc-event.bg-primary .fc-title,
.fc-event.bg-primary .fc-time { color: #fff !important; opacity: 1 !important; }

/* Bekleyen Randevu (bg-success) — Emerald pastel */
.fc-event.bg-success {
  background: linear-gradient(135deg, #10B981, #34D399) !important;
  color: #fff !important;
}
.fc-event.bg-success .fc-title,
.fc-event.bg-success .fc-time { color: #fff !important; opacity: 1 !important; }

/* Hizmet (bg-info) — Teal/Cyan pastel */
.fc-event.bg-info {
  background: linear-gradient(135deg, #06B6D4, #67E8F9) !important;
  color: #0e4d5c !important;
}
.fc-event.bg-info .fc-title,
.fc-event.bg-info .fc-time { color: #0e4d5c !important; opacity: 1 !important; }

/* İzin/Mola (bg-danger) — Rose pastel */
.fc-event.bg-danger {
  background: linear-gradient(135deg, #F43F5E, #FB7185) !important;
  color: #fff !important;
}
.fc-event.bg-danger .fc-title,
.fc-event.bg-danger .fc-time { color: #fff !important; opacity: 1 !important; }

/* ════════════════════════════════════════════════════════════
   6. MOLA EVENTLERİ (cal-break) — Çapraz tarama deseni
════════════════════════════════════════════════════════════ */
.fc-event.cal-break {
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(251,191,36,0.22),
      rgba(251,191,36,0.22) 4px,
      rgba(251,191,36,0.08) 4px,
      rgba(251,191,36,0.08) 8px
    ) !important;
  border: 1.5px dashed rgba(217,119,6,0.4) !important;
  border-radius: 6px !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  left: 0 !important;
  right: 0 !important;
  margin-right: 0 !important;
}
.fc-event.cal-break:hover {
  transform: none !important;
  opacity: 1 !important;
  box-shadow: none !important;
}
.fc-event.cal-break .fc-title {
  color: #92400E !important;
  font-weight: 700 !important;
  font-size: 0.7rem !important;
  opacity: 0.7;
  text-align: center;
  display: block;
}
.fc-event.cal-break .fc-time {
  color: #92400E !important;
  font-weight: 600 !important;
  opacity: 0.5;
}
.fc-event.cal-break .fc-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
/* Sabit program molası (tıklanmaz) — daha nötr gri ton */
.fc-event.cal-break-fixed {
  cursor: not-allowed !important;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(148,163,184,0.35),
      rgba(148,163,184,0.35) 4px,
      rgba(148,163,184,0.12) 4px,
      rgba(148,163,184,0.12) 8px
    ) !important;
  border-color: rgba(100,116,139,0.45) !important;
}
.fc-event.cal-break-fixed .fc-title,
.fc-event.cal-break-fixed .fc-time {
  color: #475569 !important;
}
/* Personelin eklediği mola — tıklanabilir, hafif mavi çerçeve */
.fc-event.cal-break-adhoc {
  cursor: pointer !important;
  border-color: rgba(37,99,235,0.55) !important;
  box-shadow: inset 0 0 0 1px rgba(37,99,235,0.12) !important;
}

/* ════════════════════════════════════════════════════════════
   7. OVERNIGHT BANNER
════════════════════════════════════════════════════════════ */
#overnight-banner {
  font-family: var(--cal-font) !important;
  animation: slideDown 0.3s ease-out;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Gece mesaisi — ertesi gün randevuları (DOM ile render edilen) */
.fc-overnight-event {
  display: flex !important;
  align-items: flex-start;
  padding: 4px 8px;
  overflow: hidden;
  font-family: var(--cal-font);
  font-size: 12px;
  line-height: 1.3;
  color: #fff;
  text-decoration: none !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
  transition: box-shadow 0.15s;
  border-left: 3px solid rgba(255,255,255,0.4);
}
.fc-overnight-event:hover {
  box-shadow: 0 3px 8px rgba(0,0,0,0.18);
  filter: brightness(1.08);
}
.fc-overnight-event .fc-content {
  width: 100%;
  overflow: hidden;
}
.fc-overnight-event .fc-time span {
  font-weight: 600;
}
.fc-overnight-event .fc-title {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* ════════════════════════════════════════════════════════════
   7b. ABONELİK BADGE (Tekrarlayan Randevu İkonu)
════════════════════════════════════════════════════════════ */
.cal-sub-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  font-size: 8px;
  color: #fff;
  margin-right: 6px;
  flex-shrink: 0;
  vertical-align: middle;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2);
}
.cal-sub-badge i {
  font-size: 8px;
}

.fc-event.cal-subscription-event {
  background: linear-gradient(135deg, #0f172a, #334155) !important;
  border-left: 3px solid #f59e0b !important;
  color: #fff !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.24) !important;
}
.fc-event.cal-subscription-event .fc-title,
.fc-event.cal-subscription-event .fc-time {
  color: #fff !important;
  opacity: 1 !important;
}

.cal-selection-summary {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 0.8rem;
  padding: 0.9rem 1rem;
  border-radius: 12px;
  background: linear-gradient(135deg, #eef2ff 0%, #f8fafc 100%);
  border: 1px solid #c7d2fe;
  box-shadow: 0 1px 3px rgba(79, 70, 229, 0.08);
}
.cal-selection-summary__eyebrow {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6366f1;
}
.cal-selection-summary__range {
  font-size: 1.05rem;
  font-weight: 800;
  color: #1e293b;
}
.cal-selection-summary__date {
  font-size: 0.82rem;
  font-weight: 600;
  color: #64748b;
}

/* ════════════════════════════════════════════════════════════
   7c. TEKRARLAMA (RECURRENCE) TOGGLE & PANEL
════════════════════════════════════════════════════════════ */
.cal-recurrence-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  margin-top: 8px;
  background: var(--cal-surface, #F8FAFC);
  border: 1px solid var(--cal-border, #F1F5F9);
  border-radius: 12px;
  transition: border-color 0.2s;
}
.cal-recurrence-toggle:has(input:checked) {
  border-color: var(--cal-primary, #4F46E5);
  background: var(--cal-primary-light, #EEF2FF);
}
.cal-switch-label {
  font-family: var(--cal-font, 'Inter', sans-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--cal-text, #1E293B);
  margin: 0;
  cursor: pointer;
  user-select: none;
}
.cal-switch-label i {
  margin-right: 8px;
  color: var(--cal-primary, #4F46E5);
  font-size: 13px;
}

/* Custom Switch */
.cal-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  margin: 0;
  flex-shrink: 0;
}
.cal-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.cal-switch-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #CBD5E1;
  border-radius: 24px;
  transition: background 0.25s;
}
.cal-switch-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: transform 0.25s;
}
.cal-switch input:checked + .cal-switch-slider {
  background: var(--cal-primary, #4F46E5);
}
.cal-switch input:checked + .cal-switch-slider::before {
  transform: translateX(20px);
}

/* Recurrence options panel */
#recurrenceOptions {
  margin-top: 10px;
  padding: 14px 16px;
  background: var(--cal-surface, #F8FAFC);
  border: 1px solid var(--cal-border, #F1F5F9);
  border-radius: 12px;
}
#recurrenceOptions label.control-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--cal-text-secondary, #64748B);
  margin-bottom: 4px;
}
#recurrenceOptions .form-control {
  border-radius: 10px;
  border: 1px solid var(--cal-border-mid, #E2E8F0);
  font-size: 14px;
  padding: 8px 12px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
#recurrenceOptions .form-control:focus {
  border-color: var(--cal-primary, #4F46E5);
  box-shadow: 0 0 0 3px var(--cal-primary-glow, rgba(79,70,229,0.15));
}

/* Preview note */
.cal-recurrence-preview {
  margin-top: 12px;
  padding: 10px 14px;
  background: linear-gradient(135deg, #EEF2FF 0%, #F0F9FF 100%);
  border-left: 3px solid var(--cal-primary, #4F46E5);
  border-radius: 0 10px 10px 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--cal-text, #1E293B);
}
.cal-recurrence-preview i {
  color: var(--cal-primary, #4F46E5);
  margin-right: 4px;
}
.cal-recurrence-dates {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--cal-text-secondary, #64748B);
  letter-spacing: 0.3px;
}

/* ════════════════════════════════════════════════════════════
   8. LEGEND BADGELERİ
════════════════════════════════════════════════════════════ */
.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem 0;
  align-items: center;
}
.cal-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--cal-surface);
  border-radius: 99px;
  padding: 0.3rem 0.75rem 0.3rem 0.5rem;
  border: 1px solid var(--cal-border-mid);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--cal-text-secondary);
  transition: all var(--cal-transition);
}
.cal-legend-item:hover {
  border-color: var(--cal-primary);
  background: var(--cal-primary-light);
}
.cal-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cal-legend-dot.dot-primary  { background: linear-gradient(135deg, #6366F1, #818CF8); }
.cal-legend-dot.dot-success  { background: linear-gradient(135deg, #10B981, #34D399); }
.cal-legend-dot.dot-info     { background: linear-gradient(135deg, #06B6D4, #67E8F9); }
.cal-legend-dot.dot-danger   { background: linear-gradient(135deg, #F43F5E, #FB7185); }
.cal-legend-dot.dot-break {
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(251,191,36,0.6),
      rgba(251,191,36,0.6) 2px,
      rgba(251,191,36,0.2) 2px,
      rgba(251,191,36,0.2) 4px
    );
  border: 1px dashed rgba(217,119,6,0.5);
}

/* Eski .bWrapper uyumluluğu */
.bWrapper {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-right: 0.65rem;
  margin-bottom: 0.4rem;
  background: var(--cal-surface);
  border-radius: 99px;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--cal-border-mid);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--cal-text-secondary);
}
.bWrapper .badge-pill {
  width: 10px !important;
  height: 10px !important;
  min-width: 10px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-block !important;
  flex-shrink: 0;
}
.bWrapper .badge-pill + .badge-pill {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  color: var(--cal-text-secondary) !important;
  background: transparent !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
}

/* ════════════════════════════════════════════════════════════
   9. ZAMAN ARALIĞI SEÇİCİSİ (#salonaralik)
════════════════════════════════════════════════════════════ */
#salonaralik {
  border-radius: var(--cal-radius) !important;
  border: 1.5px solid var(--cal-border-mid) !important;
  font-family: var(--cal-font) !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: var(--cal-text) !important;
  background: var(--cal-card-bg) !important;
  padding: 0.45rem 0.8rem !important;
  cursor: pointer;
  transition: border-color var(--cal-transition), box-shadow var(--cal-transition);
  box-shadow: none !important;
}
#salonaralik:focus {
  border-color: var(--cal-primary) !important;
  box-shadow: 0 0 0 3px var(--cal-primary-glow) !important;
  outline: none !important;
}

/* ════════════════════════════════════════════════════════════
   10. GEÇMİŞ / VERSIONS (#versionsWrapper)
════════════════════════════════════════════════════════════ */
#versionsWrapper { margin-top: 1rem; }
#versionsWrapper label {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  color: var(--cal-text-secondary) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
  display: block;
}
#versions {
  background: var(--cal-surface);
  border: 1.5px solid var(--cal-border-mid);
  border-radius: var(--cal-radius);
  padding: 0.85rem 1rem;
  margin-bottom: 0.85rem;
  font-size: 0.83rem;
  color: var(--cal-text);
}
#versionsWrapper .btn-success {
  border-radius: 9px !important;
  font-weight: 700 !important;
  font-size: 0.82rem !important;
  padding: 0.45rem 1rem !important;
  background: linear-gradient(135deg, var(--cal-success), #059669) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(16,185,129,0.28) !important;
  transition: all var(--cal-transition);
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
}
#versionsWrapper .btn-success:hover { opacity: 0.9; transform: translateY(-1px); }

/* #attention uyarısı */
#attention {
  font-family: var(--cal-font) !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: var(--cal-danger) !important;
  background: #FEF2F2;
  border: 1.5px solid #FECACA;
  border-radius: var(--cal-radius);
  padding: 0.75rem 1rem !important;
  letter-spacing: 0.02em;
}

/* ════════════════════════════════════════════════════════════
   11. MODALLAR — ORTAK TEMEL
════════════════════════════════════════════════════════════ */
#my-event .modal-content,
#randevu-onayla .modal-content,
#gecmis .modal-content {
  border: none !important;
  border-radius: var(--cal-radius-lg) !important;
  box-shadow: var(--cal-shadow-lg) !important;
  overflow: hidden;
  font-family: var(--cal-font) !important;
}

/* ── MODAL: Randevu Al (#my-event) ───────────────────────── */
#my-event .modal-dialog { max-width: 600px !important; }
#my-event .modal-header {
  background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%) !important;
  border-bottom: none !important;
  padding: 1.15rem 1.5rem !important;
}
#my-event .modal-title {
  color: #fff !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
}
#my-event .modal-title strong { font-weight: 800 !important; }
#my-event .modal-header .close {
  color: rgba(255,255,255,0.85) !important;
  text-shadow: none !important;
  font-size: 1.4rem !important;
  opacity: 1 !important;
  transition: color var(--cal-transition), transform var(--cal-transition);
}
#my-event .modal-header .close:hover {
  color: #fff !important;
  transform: rotate(90deg);
}
#my-event .modal-body {
  padding: 1.25rem 1.5rem !important;
  background: var(--cal-card-bg);
  font-size: 0.85rem;
  color: var(--cal-text);
}
#my-event .cal-recurrence-card {
  margin-top: 0.35rem;
  padding: 1rem 1.1rem;
  border-radius: var(--cal-radius);
  background: linear-gradient(145deg, var(--cal-primary-light) 0%, #F8FAFC 100%);
  border: 1.5px solid rgba(79, 70, 229, 0.2);
  box-shadow: var(--cal-shadow-sm);
}
#my-event .cal-recurrence-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
#my-event .cal-recurrence-header-text {
  flex: 1;
  min-width: 0;
}
#my-event .cal-recurrence-title {
  display: block;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--cal-text);
  letter-spacing: 0.02em;
}
#my-event .cal-recurrence-desc {
  margin: 0.35rem 0 0;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--cal-text-secondary);
}
#my-event .cal-recurrence-desc strong {
  color: var(--cal-text);
  font-weight: 700;
}
#my-event .cal-recurrence-switch {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  width: 46px;
  height: 26px;
  margin: 0;
  cursor: pointer;
}
#my-event .cal-recurrence-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
#my-event .cal-recurrence-switch .cal-recurrence-switch-track {
  position: absolute;
  inset: 0;
  border-radius: 99px;
  background: #CBD5E1;
  transition: background var(--cal-transition), box-shadow var(--cal-transition);
}
#my-event .cal-recurrence-switch .cal-recurrence-switch-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  transition: transform var(--cal-transition);
}
#my-event .cal-recurrence-switch input:checked + .cal-recurrence-switch-track {
  background: linear-gradient(135deg, var(--cal-primary), #7C3AED);
  box-shadow: 0 2px 10px var(--cal-primary-glow);
}
#my-event .cal-recurrence-switch input:checked + .cal-recurrence-switch-track::after {
  transform: translateX(18px);
}
#my-event .cal-recurrence-switch input:focus-visible + .cal-recurrence-switch-track {
  outline: 2px solid var(--cal-primary);
  outline-offset: 2px;
}
#my-event .cal-recurrence-body {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(79, 70, 229, 0.12);
}
#my-event .cal-recurrence-label {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cal-text-secondary) !important;
  margin-bottom: 0.5rem !important;
}
#my-event .cal-recurrence-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
#my-event .cal-recurrence-pill {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0.38rem 0.65rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--cal-text-secondary);
  background: var(--cal-card-bg);
  border: 1.5px solid var(--cal-border-mid);
  border-radius: 999px;
  cursor: pointer;
  transition: all var(--cal-transition);
}
#my-event .cal-recurrence-pill:hover {
  border-color: var(--cal-primary);
  color: var(--cal-primary);
  background: #fff;
}
#my-event .cal-recurrence-pill input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
#my-event .cal-recurrence-pill:has(input:checked) {
  background: var(--cal-primary);
  border-color: var(--cal-primary);
  color: #fff;
  box-shadow: 0 3px 12px var(--cal-primary-glow);
}
#my-event .cal-recurrence-pill:has(input:focus-visible) {
  outline: 2px solid var(--cal-primary);
  outline-offset: 2px;
}
#my-event .cal-recurrence-count-group {
  margin-top: 1rem;
}
#my-event .cal-recurrence-count-group .control-label {
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: var(--cal-text) !important;
}
#my-event .cal-recurrence-count-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.35rem;
}
#my-event .cal-recurrence-count-input {
  max-width: 88px;
  font-weight: 700;
  text-align: center;
  border-radius: var(--cal-radius-sm) !important;
  border: 1.5px solid var(--cal-border-mid) !important;
}
#my-event .cal-recurrence-count-hint {
  font-size: 0.72rem;
  color: var(--cal-text-muted);
  flex: 1;
  min-width: 180px;
  line-height: 1.45;
}
#my-event .cal-recurrence-preview {
  margin: 0.85rem 0 0;
  padding: 0.65rem 0.85rem;
  border-radius: var(--cal-radius-sm);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(79, 70, 229, 0.15);
  font-size: 0.74rem;
  line-height: 1.55;
  color: var(--cal-text);
}
#my-event .cal-recurrence-preview .cal-recurrence-preview__label {
  display: block;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cal-primary);
  margin-bottom: 0.25rem;
}

#my-event .modal-footer {
  background: var(--cal-surface) !important;
  border-top: 1px solid var(--cal-border-mid) !important;
  padding: 0.85rem 1.5rem !important;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* Footer butonları */
#my-event .btn-warning {
  border-radius: 8px !important; font-weight: 700 !important;
  font-size: 0.8rem !important; padding: 0.42rem 0.9rem !important;
  background: #FEF3C7 !important; color: #92400E !important;
  border-color: transparent !important; transition: all var(--cal-transition);
}
#my-event .btn-warning:hover { background: var(--cal-warning) !important; color: #fff !important; }

#my-event .btn-info {
  border-radius: 8px !important; font-weight: 700 !important;
  font-size: 0.8rem !important; padding: 0.42rem 0.9rem !important;
  background: var(--cal-primary-light) !important; color: var(--cal-primary) !important;
  border-color: transparent !important; transition: all var(--cal-transition);
}
#my-event .btn-info:hover { background: var(--cal-primary) !important; color: #fff !important; }

#my-event .btn-secondary {
  border-radius: 8px !important; font-weight: 700 !important;
  font-size: 0.8rem !important; padding: 0.42rem 0.9rem !important;
  background: var(--cal-card-bg) !important; color: var(--cal-text-secondary) !important;
  border: 1.5px solid var(--cal-border-mid) !important; transition: all var(--cal-transition);
}
#my-event .btn-secondary:hover { background: var(--cal-surface) !important; color: var(--cal-text) !important; }

#my-event .btn-danger {
  border-radius: 8px !important; font-weight: 700 !important;
  font-size: 0.8rem !important; padding: 0.42rem 0.9rem !important;
  background: #FEF2F2 !important; color: var(--cal-danger) !important;
  border-color: transparent !important; transition: all var(--cal-transition);
}
#my-event .btn-danger:hover { background: var(--cal-danger) !important; color: #fff !important; }

#my-event .btn-success {
  border-radius: 8px !important; font-weight: 700 !important;
  font-size: 0.8rem !important; padding: 0.42rem 0.9rem !important;
  background: var(--cal-primary) !important; color: #fff !important;
  border-color: var(--cal-primary) !important;
  box-shadow: 0 3px 10px var(--cal-primary-glow) !important;
  transition: all var(--cal-transition);
}
#my-event .btn-success:hover {
  background: #4338CA !important; border-color: #4338CA !important;
  transform: translateY(-1px);
}

/* ── MODAL: Randevu İşlemleri (#randevu-onayla) ──────────── */
#randevu-onayla .modal-dialog { max-width: 420px !important; }
#randevu-onayla .modal-header {
  background: linear-gradient(135deg, #1E293B 0%, #334155 100%) !important;
  border-bottom: none !important;
  padding: 1.1rem 1.5rem !important;
}
#randevu-onayla .modal-title {
  color: #fff !important; font-size: 0.92rem !important; font-weight: 800 !important;
}
#randevu-onayla .modal-header .close {
  color: rgba(255,255,255,0.8) !important; text-shadow: none !important;
  font-size: 1.4rem !important; opacity: 1 !important;
  transition: color var(--cal-transition), transform var(--cal-transition);
}
#randevu-onayla .modal-header .close:hover { color: #fff !important; transform: rotate(90deg); }
#randevu-onayla .modal-body {
  padding: 1.35rem 1.5rem !important; background: var(--cal-card-bg);
}
#randevu-onayla .modal-body > div { padding: 0.4rem 0 !important; }

#randevu-onayla .btn-danger {
  border-radius: var(--cal-radius) !important; font-weight: 700 !important;
  font-size: 0.85rem !important; padding: 0.55rem 1rem !important;
  background: #FEF2F2 !important; color: var(--cal-danger) !important;
  border: 1.5px solid #FECACA !important; transition: all var(--cal-transition);
}
#randevu-onayla .btn-danger:hover {
  background: var(--cal-danger) !important; border-color: var(--cal-danger) !important;
  color: #fff !important; box-shadow: 0 4px 12px rgba(239,68,68,0.3);
}
#randevu-onayla .btn-info {
  border-radius: var(--cal-radius) !important; font-weight: 700 !important;
  font-size: 0.85rem !important; padding: 0.55rem 1rem !important;
  background: linear-gradient(135deg, #4F46E5, #7C3AED) !important;
  color: #fff !important; border-color: transparent !important;
  box-shadow: 0 4px 14px var(--cal-primary-glow) !important;
  transition: all var(--cal-transition);
}
#randevu-onayla .btn-info:hover {
  opacity: 0.9; transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(79,70,229,0.38) !important;
}

/* ── MODAL: Hareket Geçmişi (#gecmis) ────────────────────── */
#gecmis .modal-dialog { max-width: 480px !important; }
#gecmis .modal-header {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%) !important;
  border-bottom: none !important;
  padding: 1.1rem 1.5rem !important;
}
#gecmis .modal-title { color: #fff !important; font-size: 0.92rem !important; font-weight: 800 !important; }
#gecmis .modal-header .close {
  color: rgba(255,255,255,0.8) !important; text-shadow: none !important;
  font-size: 1.4rem !important; opacity: 1 !important;
  transition: color var(--cal-transition), transform var(--cal-transition);
}
#gecmis .modal-header .close:hover { color: #fff !important; transform: rotate(90deg); }
#gecmis .modal-body { padding: 1.35rem 1.5rem !important; background: var(--cal-card-bg); }
.gecmisText {
  background: var(--cal-surface);
  border: 1.5px solid var(--cal-border-mid);
  border-radius: var(--cal-radius);
  padding: 1rem;
  font-size: 0.83rem;
  color: var(--cal-text);
  line-height: 1.6;
  margin-bottom: 1rem;
  max-height: 280px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #C7D2FE transparent;
}
.gecmisText::-webkit-scrollbar { width: 4px; }
.gecmisText::-webkit-scrollbar-thumb { background: #C7D2FE; border-radius: 99px; }

#gecmis .modal-body .btn-info {
  border-radius: 9px !important; font-weight: 700 !important;
  font-size: 0.85rem !important; padding: 0.55rem 1rem !important;
  background: var(--cal-card-bg) !important; color: var(--cal-primary) !important;
  border: 1.5px solid var(--cal-border-mid) !important;
  transition: all var(--cal-transition);
}
#gecmis .modal-body .btn-info:hover {
  background: var(--cal-primary-light) !important; border-color: var(--cal-primary) !important;
}

/* ════════════════════════════════════════════════════════════
   12. BOTTOM SHEET (Offcanvas)
════════════════════════════════════════════════════════════ */
.cal-bottomsheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1060;
  background: var(--cal-card-bg);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -4px 30px rgba(0,0,0,0.15);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32,0.72,0,1);
  max-height: 85vh;
  overflow-y: auto;
  font-family: var(--cal-font);
}
.cal-bottomsheet.open {
  transform: translateY(0);
}
.cal-bottomsheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 99px;
  background: #CBD5E1;
  margin: 10px auto 0;
}
.cal-bottomsheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem 0.75rem;
  border-bottom: 1px solid var(--cal-border);
}
.cal-bottomsheet-header h5 {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--cal-text);
  margin: 0;
}
.cal-bottomsheet-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--cal-surface);
  color: var(--cal-text-secondary);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--cal-transition);
}
.cal-bottomsheet-close:hover {
  background: var(--cal-border-mid);
  color: var(--cal-text);
}
.cal-bottomsheet-body {
  padding: 1rem 1.25rem 1.5rem;
}
.cal-bottomsheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1059;
  background: rgba(0,0,0,0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.cal-bottomsheet-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

/* ════════════════════════════════════════════════════════════
   13. BLOCK UI OVERRIDE
════════════════════════════════════════════════════════════ */
.blockMsg {
  font-family: var(--cal-font) !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: var(--cal-text-secondary) !important;
  letter-spacing: 0.02em;
}

/* ════════════════════════════════════════════════════════════
   14. RESPONSIVE — MOBILE FIRST
════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .card.block .card-body.calender-sidebar { padding: 0.85rem !important; }

  /* Toolbar kompakt */
  .fc-toolbar {
    gap: 0.35rem;
    margin-bottom: 0.5rem !important;
  }
  .fc-toolbar h2 { font-size: 0.82rem !important; }
  .fc-button { padding: 0.32rem 0.6rem !important; font-size: 0.72rem !important; }

  /* Slot border'ları mobilde de belirgin */
  .fc-time-grid .fc-slats td {
    border-color: #D1D5DB !important;
  }

  /* Saat etiketi daralt */
  .fc-axis { width: 40px !important; font-size: 0.62rem !important; padding: 0 4px !important; }

  /* Event küçült */
  .fc-event { font-size: 0.68rem !important; padding: 2px 5px !important; border-radius: 6px !important; }
  .fc-event .fc-title { font-size: 0.66rem !important; }
  .fc-event .fc-time { font-size: 0.58rem !important; }

  /* Legend */
  .cal-legend { gap: 0.35rem; }
  .cal-legend-item { font-size: 0.66rem; padding: 0.25rem 0.55rem 0.25rem 0.4rem; }
  .bWrapper { margin-bottom: 0.35rem; font-size: 0.66rem; }

  /* Modallar — tam genişlik */
  #my-event .modal-dialog,
  #randevu-onayla .modal-dialog,
  #gecmis .modal-dialog {
    max-width: 100% !important;
    margin: 0.4rem !important;
  }
  #my-event .modal-footer { gap: 0.3rem; }
  #my-event .modal-footer .btn,
  #randevu-onayla .modal-body .btn,
  #gecmis .modal-body .btn {
    font-size: 0.76rem !important;
    padding: 0.38rem 0.75rem !important;
  }

  /* Bottom sheet tam genişlik */
  .cal-bottomsheet {
    border-radius: 16px 16px 0 0;
  }
}

@media (max-width: 480px) {
  #my-event .modal-content,
  #randevu-onayla .modal-content,
  #gecmis .modal-content { border-radius: 12px !important; }

  .fc-button { padding: 0.26rem 0.5rem !important; font-size: 0.68rem !important; }

  .fc-time-grid .fc-slats td { border-color: #D1D5DB !important; }
}

/* ════════════════════════════════════════════════════════════
   15. GENEL SCROLLBAR
════════════════════════════════════════════════════════════ */
.fc-scroller {
  scrollbar-width: thin;
  scrollbar-color: #C7D2FE transparent;
}
.fc-scroller::-webkit-scrollbar { width: 5px; height: 5px; }
.fc-scroller::-webkit-scrollbar-thumb {
  background: #C7D2FE;
  border-radius: 99px;
}
.fc-scroller::-webkit-scrollbar-track { background: transparent; }

/* ════════════════════════════════════════════════════════════
   16. ABONELİK (Subscription) EVENT STİLLERİ
   - Tekrarlayan manuel randevuları görsel olarak ayırır
   - .is-subscription className FullCalendar event mapping'inde eklenir
════════════════════════════════════════════════════════════ */
.fc-event.is-subscription {
  position: relative;
  border-left: 4px solid #f59e0b !important;
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.35), 0 1px 2px rgba(0,0,0,0.06);
  background-image: linear-gradient(135deg, rgba(245, 158, 11, 0.22) 0%, rgba(245, 158, 11, 0.05) 60%, transparent 100%) !important;
}
.fc-event.is-subscription::before {
  content: "\21BB";
  position: absolute;
  top: 1px;
  right: 4px;
  color: #b45309;
  background: #fffbeb;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
  box-shadow: 0 0 0 1px #f59e0b;
  pointer-events: none;
}
.fc-event.is-subscription .fc-title { padding-right: 16px; }
.fc-event.is-subscription .recurrence-badge {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 8px;
  background: #f59e0b;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  vertical-align: middle;
}

/* Subscription bilgi bandı: edit modal içinde gösterilir */
.subscription-info-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-left: 4px solid #f59e0b;
  border-radius: 8px;
  color: #92400e;
  font-size: 13px;
  line-height: 1.4;
}
.subscription-info-banner .sub-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: #f59e0b;
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.3px;
}
.subscription-info-banner .sub-text { flex: 1 1 auto; }
.subscription-info-banner .sub-text strong { color: #78350f; }

/* Modal ek aksiyon butonu: tüm aboneliği iptal et */
.delete-subscription-all {
  background: #b45309;
  border-color: #b45309;
  color: #fff;
}
.delete-subscription-all:hover,
.delete-subscription-all:focus {
  background: #92400e;
  border-color: #92400e;
  color: #fff;
}

/* SweetAlert2 z-index düzeltmesi:
   additional.css içindeki .modal { z-index: 100002 } SweetAlert2'nin
   default 1060 z-index'inin üstüne çıktığı için Swal popup Bootstrap
   modalın altında kalıyordu. Burada tüm Swal stack'ini açıkça yukarı çekiyoruz. */
.swal2-container {
  z-index: 200000 !important;
}
.swal2-popup {
  z-index: 200001 !important;
}

/* ════════════════════════════════════════════════════════════
   N. İPTAL / RED EDİLEN RANDEVULAR
   - Picker sırasındaki ikon buton + listeleme modalı
════════════════════════════════════════════════════════════ */

/* --- Tetikleyici buton --- */
.btn-cancelled-rejected {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: linear-gradient(180deg, #fff 0%, #fafbff 100%);
  border: 1px solid var(--cal-border-mid);
  border-radius: 12px;
  color: var(--cal-text);
  font-family: var(--cal-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: transform var(--cal-transition),
              box-shadow var(--cal-transition),
              border-color var(--cal-transition),
              color var(--cal-transition);
  position: relative;
}

.btn-cancelled-rejected .cr-icon {
  font-size: 15px;
  color: var(--cal-danger);
  transition: transform var(--cal-transition), color var(--cal-transition);
}

.btn-cancelled-rejected .cr-label {
  line-height: 1;
}

.btn-cancelled-rejected:hover,
.btn-cancelled-rejected:focus {
  border-color: rgba(239, 68, 68, 0.45);
  color: #b91c1c;
  background: linear-gradient(180deg, #fff 0%, #fff5f5 100%);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.12);
  transform: translateY(-1px);
  outline: none;
}

.btn-cancelled-rejected:hover .cr-icon,
.btn-cancelled-rejected:focus .cr-icon {
  color: #b91c1c;
  transform: rotate(-12deg);
}

.btn-cancelled-rejected:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.12);
}

.btn-cancelled-rejected.has-cancelled .cr-icon {
  animation: cr-pulse 2.4s ease-in-out infinite;
}

@keyframes cr-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

.btn-cancelled-rejected .cr-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--cal-danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  margin-left: 4px;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.35);
}

@media (max-width: 480px) {
  .btn-cancelled-rejected .cr-label {
    display: none;
  }
  .btn-cancelled-rejected {
    padding: 9px 11px;
  }
}

/* --- Modal kapsayıcı --- */
#cancelled-rejected-modal .modal-content {
  border-radius: var(--cal-radius-lg);
  border: none;
  box-shadow: var(--cal-shadow-lg);
  overflow: hidden;
  font-family: var(--cal-font);
}

#cancelled-rejected-modal .cr-modal-header {
  background: linear-gradient(135deg, #fef2f2 0%, #fff7ed 100%);
  border-bottom: 1px solid #fecaca;
  padding: 18px 22px;
  align-items: center;
}

#cancelled-rejected-modal .modal-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: #7f1d1d;
  font-size: 15px;
  font-weight: 700;
}

#cancelled-rejected-modal .cr-modal-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.15);
  color: var(--cal-danger);
  font-size: 14px;
}

#cancelled-rejected-modal .cr-modal-date {
  margin-left: 4px;
  font-weight: 500;
  color: #b91c1c;
  font-size: 13px;
  background: rgba(239, 68, 68, 0.08);
  padding: 3px 9px;
  border-radius: 999px;
}

#cancelled-rejected-modal .modal-body {
  padding: 18px 22px 22px;
  background: var(--cal-surface);
  min-height: 220px;
}

#cancelled-rejected-modal .cr-modal-footer {
  padding: 12px 22px;
  background: #fff;
  border-top: 1px solid var(--cal-border);
  align-items: center;
  justify-content: space-between;
}

#cancelled-rejected-modal .cr-footer-summary {
  flex: 1 1 auto;
  font-size: 12px;
  color: var(--cal-text-secondary);
  font-weight: 500;
}

/* --- State kapsayıcılar (loading/empty/error) --- */
.cr-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 36px 14px;
  color: var(--cal-text-secondary);
}

.cr-state .cr-state-text {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 500;
  max-width: 320px;
  line-height: 1.5;
}

.cr-state .cr-state-title {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 700;
  color: var(--cal-text);
}

.cr-state .cr-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.12);
  color: var(--cal-success);
  font-size: 22px;
}

.cr-state .cr-empty-icon.cr-error-icon {
  background: rgba(239, 68, 68, 0.12);
  color: var(--cal-danger);
}

.cr-state .spinner-border {
  width: 32px;
  height: 32px;
  border-width: 3px;
}

/* --- Liste --- */
.cr-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cr-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--cal-border);
  border-left: 4px solid var(--cal-danger);
  border-radius: var(--cal-radius);
  box-shadow: var(--cal-shadow-sm);
  transition: transform var(--cal-transition),
              box-shadow var(--cal-transition),
              border-color var(--cal-transition);
}

.cr-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.cr-item.cr-item-rejected {
  border-left-color: #f97316;
}

/* Saat kutusu */
.cr-item .cr-time-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 8px 4px;
  background: linear-gradient(135deg, #fef2f2 0%, #fff7ed 100%);
  border-radius: 10px;
  color: #7f1d1d;
}

.cr-item .cr-time-main {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.cr-item .cr-time-end {
  margin-top: 4px;
  font-size: 10px;
  font-weight: 500;
  color: #b91c1c;
  opacity: 0.8;
}

.cr-item .cr-time-duration {
  margin-top: 4px;
  font-size: 10px;
  color: #b91c1c;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* İçerik */
.cr-item .cr-content {
  min-width: 0;
}

.cr-item .cr-customer {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--cal-text);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cr-item .cr-customer .ti-user {
  color: var(--cal-text-muted);
  font-size: 13px;
}

.cr-item .cr-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 12px;
  color: var(--cal-text-secondary);
  align-items: center;
}

.cr-item .cr-meta .cr-meta-row {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.cr-item .cr-meta .ti-mobile,
.cr-item .cr-meta .ti-cut,
.cr-item .cr-meta .ti-hand-point-right,
.cr-item .cr-meta .ti-hand-point-up,
.cr-item .cr-meta .ti-tag,
.cr-item .cr-meta .ti-receipt {
  color: var(--cal-text-muted);
  font-size: 11px;
}

.cr-item .cr-services {
  white-space: normal;
  word-break: break-word;
  line-height: 1.4;
}

.cr-item .cr-meta a {
  color: inherit;
  text-decoration: none;
}

.cr-item .cr-meta a:hover {
  color: var(--cal-primary);
  text-decoration: underline;
}

/* Sağ taraf rozetler */
.cr-item .cr-tags {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}

.cr-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}

.cr-status-pill.cr-status-rejected {
  background: rgba(249, 115, 22, 0.15);
  color: #c2410c;
}

.cr-source-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--cal-primary-light);
  color: var(--cal-primary);
}

.cr-source-pill.cr-source-manual {
  background: #fff7ed;
  color: #c2410c;
}

@media (max-width: 575px) {
  .cr-item {
    grid-template-columns: auto 1fr;
    gap: 10px;
  }
  .cr-item .cr-tags {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: flex-start;
  }
}

/* ════════════════════════════════════════════════════════════
   GÜN ÖZETİ — randevu sayıları (onaylı / bekleyen / manuel / mola)
════════════════════════════════════════════════════════════ */

.cal-day-stats {
  margin: 14px 0 6px;
  font-family: var(--cal-font);
}

.cal-day-stats__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px 16px;
  padding: 14px 16px;
  background: linear-gradient(145deg, #fff 0%, #f8fafc 50%, #f1f5f9 100%);
  border: 1px solid var(--cal-border-mid);
  border-radius: var(--cal-radius-lg);
  box-shadow: var(--cal-shadow-sm);
}

.cal-day-stats--loading .cal-day-stats__inner--loading {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 14px 16px;
  background: var(--cal-surface);
  border: 1px dashed var(--cal-border-mid);
  border-radius: var(--cal-radius-lg);
}

.cal-day-stats__skeleton {
  flex: 1;
  height: 20px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #e2e8f0 0%,
    #f1f5f9 45%,
    #e2e8f0 90%
  );
  background-size: 200% 100%;
  animation: cal-stats-shimmer 1.2s ease-in-out infinite;
}

.cal-day-stats__skeleton--short {
  flex: 0 0 38%;
  max-width: 160px;
}

@keyframes cal-stats-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.cal-day-stats__lead {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

.cal-day-stats__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cal-text-muted);
}

.cal-day-stats__title {
  font-size: 15px;
  font-weight: 700;
  color: var(--cal-text);
  line-height: 1.25;
}

.cal-day-stats__chips {
  flex: 3 1 320px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.cal-stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--cal-text-secondary);
  background: #fff;
  border: 1px solid var(--cal-border-mid);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: transform var(--cal-transition), box-shadow var(--cal-transition),
    border-color var(--cal-transition);
  white-space: nowrap;
}

.cal-stat-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.cal-stat-chip__icon {
  font-size: 14px;
  opacity: 0.85;
  line-height: 1;
}

.cal-stat-chip__label {
  line-height: 1;
}

.cal-stat-chip__val {
  font-size: 15px;
  font-weight: 800;
  margin-left: 2px;
  color: var(--cal-text);
  line-height: 1;
}

.cal-stat-chip--total {
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  border-color: #c7d2fe;
  color: #3730a3;
}

.cal-stat-chip--total .cal-stat-chip__val {
  color: var(--cal-indigo);
}

.cal-stat-chip--total .cal-stat-chip__icon {
  color: var(--cal-primary);
}

.cal-stat-chip--approved {
  border-color: rgba(79, 70, 229, 0.25);
}

.cal-stat-chip--approved .cal-stat-chip__icon {
  color: var(--cal-primary);
}

.cal-stat-chip--approved .cal-stat-chip__val {
  color: var(--cal-primary);
}

.cal-stat-chip--online {
  background: #ecfeff;
  border-color: #a5f3fc;
}

.cal-stat-chip--online .cal-stat-chip__icon {
  color: #0891b2;
}

.cal-stat-chip--online .cal-stat-chip__val {
  color: #0e7490;
}

.cal-stat-chip--pending {
  border-color: rgba(16, 185, 129, 0.3);
}

.cal-stat-chip--pending .cal-stat-chip__icon {
  color: var(--cal-success);
}

.cal-stat-chip--pending .cal-stat-chip__val {
  color: #047857;
}

.cal-stat-chip--manual {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.cal-stat-chip--manual .cal-stat-chip__icon {
  color: #2563eb;
}

.cal-stat-chip--manual .cal-stat-chip__val {
  color: #1d4ed8;
}

.cal-stat-chip--break {
  background: #fffbeb;
  border-color: #fde68a;
}

.cal-stat-chip--break .cal-stat-chip__icon {
  color: #d97706;
}

.cal-stat-chip--break .cal-stat-chip__val {
  color: #b45309;
}

.cal-stat-chip--sub {
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  border-color: #fdba74;
}

.cal-stat-chip--sub .cal-stat-chip__icon {
  color: #ea580c;
}

.cal-stat-chip--sub .cal-stat-chip__val {
  color: #c2410c;
}

@media (max-width: 767px) {
  .cal-day-stats__chips {
    justify-content: flex-start;
  }
  .cal-day-stats__lead {
    flex: 1 1 100%;
  }
}

@media (max-width: 400px) {
  .cal-stat-chip {
    flex: 1 1 calc(50% - 6px);
    justify-content: center;
    min-width: 0;
  }
}

/* ════════════════════════════════════════════════════════════
   MÜŞTERİ GEÇMİŞİ — son 10 randevu
════════════════════════════════════════════════════════════ */
.customer-name-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}
.customer-name-label-row .control-label {
  margin-bottom: 0 !important;
}
.customer-history-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px !important;
  font-weight: 700 !important;
  padding: 0.28rem 0.65rem !important;
  line-height: 1.2 !important;
  white-space: nowrap;
}
.customer-history-btn .ti-time {
  font-size: 0.82rem;
}
#customer-history-modal .modal-content {
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: var(--cal-radius-lg);
  overflow: hidden;
  max-height: calc(100vh - 2rem);
  box-shadow: var(--cal-shadow-lg);
}
#customer-history-modal .modal-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: calc(100vh - 11rem);
}
#customer-history-modal .ch-modal-header {
  align-items: center;
  background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
  border-bottom: 1px solid var(--cal-border-mid);
}
#customer-history-modal .modal-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--cal-text);
  font-size: 1rem;
}
#customer-history-modal .ch-modal-title-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cal-primary-light);
  color: var(--cal-primary);
}
#customer-history-modal .ch-modal-customer {
  color: var(--cal-text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
}
#customer-history-modal .ch-modal-footer {
  border-top: 1px solid var(--cal-border);
  background: var(--cal-surface);
}
#customer-history-modal .ch-footer-summary {
  margin-right: auto;
  color: var(--cal-text-secondary);
  font-size: 0.82rem;
  font-weight: 700;
}
.ch-state {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.65rem;
  color: var(--cal-text-secondary);
}
.ch-state-title {
  color: var(--cal-text);
  font-size: 1rem;
  font-weight: 800;
}
.ch-state-text {
  color: var(--cal-text-secondary);
  font-size: 0.88rem;
}
.ch-empty-icon {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 999px;
  background: var(--cal-primary-light);
  color: var(--cal-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
}
.ch-empty-icon.ch-error-icon {
  background: #fef2f2;
  color: var(--cal-danger);
}
.ch-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.ch-item {
  display: grid;
  grid-template-columns: 2.15rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.9rem;
  border: 1px solid var(--cal-border-mid);
  border-radius: var(--cal-radius);
  background: #fff;
  box-shadow: var(--cal-shadow-sm);
}
.ch-index {
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 999px;
  background: var(--cal-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.82rem;
}
.ch-content {
  min-width: 0;
}
.ch-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.55rem;
}
.ch-date {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--cal-text);
  font-weight: 800;
  font-size: 0.9rem;
}
.ch-date .ti-calendar {
  color: var(--cal-primary);
}
.ch-price {
  color: #047857;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 999px;
  padding: 0.22rem 0.55rem;
  font-weight: 800;
  white-space: nowrap;
  font-size: 0.82rem;
}
.ch-services {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.65rem;
}
.ch-service-badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  border-radius: 999px;
  padding: 0.22rem 0.55rem;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  font-weight: 700;
  font-size: 0.78rem;
}
.ch-service-muted {
  background: var(--cal-surface);
  color: var(--cal-text-secondary);
  border-color: var(--cal-border-mid);
}
.ch-appointment-note {
  display: flex;
  gap: 0.45rem;
  align-items: flex-start;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  border-radius: 8px;
  padding: 0.55rem 0.65rem;
  margin-bottom: 0.65rem;
  font-size: 0.82rem;
  line-height: 1.45;
}
.ch-appointment-note .ti-notepad {
  margin-top: 0.12rem;
  color: #d97706;
}
.ch-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem 0.75rem;
  color: var(--cal-text-secondary);
  font-size: 0.82rem;
}
.ch-meta span {
  min-width: 0;
}
.ch-meta .ti-user,
.ch-meta .ti-credit-card,
.ch-meta .ti-receipt,
.ch-meta .ti-gift {
  margin-right: 0.35rem;
  color: var(--cal-text-muted);
}

.appointment-note-panel {
  border: 1px solid var(--cal-border-mid);
  border-radius: 12px;
  padding: 0.85rem;
  background: var(--cal-surface);
}
.appointment-note-panel .control-label {
  font-weight: 800;
  color: var(--cal-text);
  margin-bottom: 0.45rem;
}
.appointment-note-textarea {
  min-height: 92px;
  resize: vertical;
}
.appointment-note-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.55rem;
}
.appointment-note-status {
  line-height: 1.3;
}
.appointment-note-panel.is-error {
  border-color: #fecaca;
  background: #fef2f2;
}
.appointment-note-panel.is-error .appointment-note-status {
  color: #b91c1c !important;
}
.appointment-note-panel.is-ready .appointment-note-status {
  color: var(--cal-text-secondary) !important;
}
.appointment-note-panel.is-saving .appointment-note-save {
  opacity: 0.75;
}

.calendar-bill-open {
  border-radius: 8px !important;
  font-weight: 700 !important;
}

.calendar-bill-panel {
  margin: 1rem 0 0;
  padding: 1rem;
  border: 1px solid #dbe7f5;
  border-radius: 10px;
  background: #f8fbff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

.calendar-bill-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid #e2ebf5;
}

.calendar-bill-eyebrow {
  color: #2563eb;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.calendar-bill-head h5 {
  margin: 0.15rem 0;
  color: #0f172a;
  font-size: 1.05rem;
  font-weight: 800;
}

.calendar-bill-head p {
  margin: 0;
  color: #64748b;
  font-size: 0.86rem;
}

.calendar-bill-total {
  min-width: 132px;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  background: #fff;
  text-align: right;
}

.calendar-bill-total span {
  display: block;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 700;
}

.calendar-bill-total strong {
  color: #0f172a;
  font-size: 1.05rem;
}

.calendar-bill-services {
  margin: 0.85rem 0;
}

.calendar-bill-services-label {
  display: block;
  margin-bottom: 0;
}

.calendar-bill-services-label > span {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #475569;
}

.calendar-bill-services-select {
  width: 100%;
}

.calendar-bill-services .select2-container {
  width: 100% !important;
}

.calendar-bill-services .form-text {
  margin-top: 0.35rem;
}

.calendar-bill-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.calendar-bill-grid label,
.calendar-bill-note-label {
  margin: 0;
  color: #475569;
  font-size: 0.82rem;
  font-weight: 700;
}

.calendar-bill-grid label > span,
.calendar-bill-note-label > span {
  display: block;
  margin-bottom: 0.35rem;
}

.calendar-bill-input {
  display: flex;
  align-items: center;
  border: 1px solid #d8e2ee;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.calendar-bill-input .form-control {
  border: 0 !important;
  box-shadow: none !important;
}

.calendar-bill-input b {
  padding: 0 0.75rem;
  color: #64748b;
}

.calendar-bill-share {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0.85rem 0;
}

.calendar-bill-share span {
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  background: #fff;
  color: #64748b;
  font-size: 0.78rem;
}

.calendar-bill-share b {
  color: #0f172a;
}

.calendar-bill-loyalty {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto minmax(150px, 190px);
  gap: 0.65rem;
  align-items: center;
  padding: 0.75rem;
  margin: 0 0 0.85rem;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  background: #eff6ff;
}

.calendar-bill-requested-loyalty {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.72rem 0.8rem;
  margin: 0 0 0.85rem;
  border: 1px solid rgba(29, 78, 216, 0.18);
  border-radius: 10px;
  background: #eff6ff;
  color: #1d4ed8;
}

.calendar-bill-requested-loyalty > span {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #dbeafe;
}

.calendar-bill-requested-loyalty strong,
.calendar-bill-requested-loyalty small {
  display: block;
}

.calendar-bill-requested-loyalty strong {
  font-weight: 800;
  color: #1e3a8a;
}

.calendar-bill-requested-loyalty small {
  color: #475569;
}

.calendar-bill-loyalty strong,
.calendar-bill-loyalty span,
.calendar-bill-loyalty small {
  display: block;
}

.calendar-bill-loyalty strong {
  color: #1e3a8a;
  font-weight: 800;
}

.calendar-bill-loyalty span,
.calendar-bill-loyalty small {
  color: #64748b;
  font-size: 0.76rem;
}

.calendar-bill-loyalty-use {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  color: #1e3a8a;
  font-weight: 800;
}

.calendar-bill-loyalty-preview {
  grid-column: 1 / -1;
}

.calendar-bill-loyalty.is-disabled {
  border-color: #e2e8f0;
  background: #f8fafc;
}

.calendar-bill-note-label {
  display: block;
}

.calendar-bill-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

@media (max-width: 575.98px) {
  .customer-name-label-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .ch-item {
    grid-template-columns: 1fr;
  }
  .ch-topline {
    flex-direction: column;
    align-items: flex-start;
  }
  .ch-meta {
    grid-template-columns: 1fr;
  }
  .appointment-note-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .appointment-note-save {
    width: 100%;
  }
  .calendar-bill-head,
  .calendar-bill-actions,
  .calendar-bill-loyalty {
    flex-direction: column;
  }
  .calendar-bill-loyalty {
    display: flex;
    align-items: stretch;
  }
  .calendar-bill-total {
    width: 100%;
    text-align: left;
  }
  .calendar-bill-grid,
  .calendar-bill-share {
    grid-template-columns: 1fr;
  }
}