/* ============================================================
   YouAİBOOKS — Appointment Cards
   React'e geçişte: <AppointmentCard category="color|cut|...">
   Konumlama: position:absolute, top/height JS tarafından set edilir
============================================================ */

/* ----------------------------------------------------------
   Base Card
---------------------------------------------------------- */
.appointment-card {
  position: absolute;
  left: var(--card-gap);
  right: var(--card-gap);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  z-index: 5;
  cursor: pointer;
  transition: transform var(--transition-fast),
              box-shadow var(--transition-fast),
              z-index 0s;
}

/* Left accent bar via pseudo-element */
.appointment-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 12px 0 0 12px;
}

.appointment-card:hover {
  transform: scale(1.025) translateY(-1px);
  z-index: 20;
}

/* Sürükle-bırak: kart sürüklenirken */
.appointment-card-dragging {
  opacity: 0.85;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  cursor: grabbing;
}
.appointment-card[draggable="true"] {
  cursor: grab;
}
.appointment-card[draggable="true"]:active {
  cursor: grabbing;
}

/* ----------------------------------------------------------
   Card Body & Text
---------------------------------------------------------- */
.card-body {
  padding: 7px 8px 7px 13px; /* 13px left clears the 4px accent bar */
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.appt-time {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  opacity: 0.72;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.appt-client {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.2px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.appt-service {
  font-size: 10.5px;
  font-weight: 500;
  opacity: 0.82;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ----------------------------------------------------------
   Category: Color — Saç Boyama / Ombre / Röfle (Violet)
---------------------------------------------------------- */
.card-color {
  background: var(--cat-color-bg);
  color: var(--cat-color-text);
  box-shadow: 0 4px 18px rgba(139, 92, 246, 0.18),
              inset 0 0 0 1px rgba(139, 92, 246, 0.18);
}
.card-color::before {
  background: var(--cat-color);
  box-shadow: 0 0 8px rgba(139, 92, 246, 0.6);
}
.card-color:hover {
  box-shadow: 0 8px 30px rgba(139, 92, 246, 0.3),
              inset 0 0 0 1px rgba(139, 92, 246, 0.35);
}

/* ----------------------------------------------------------
   Category: Cut — Saç Kesimi / Fön (Teal)
---------------------------------------------------------- */
.card-cut {
  background: var(--cat-cut-bg);
  color: var(--cat-cut-text);
  box-shadow: 0 4px 18px rgba(20, 184, 166, 0.15),
              inset 0 0 0 1px rgba(20, 184, 166, 0.18);
}
.card-cut::before {
  background: var(--cat-cut);
  box-shadow: 0 0 8px rgba(20, 184, 166, 0.5);
}
.card-cut:hover {
  box-shadow: 0 8px 30px rgba(20, 184, 166, 0.25),
              inset 0 0 0 1px rgba(20, 184, 166, 0.35);
}

/* ----------------------------------------------------------
   Category: Treatment — Bakım / Keratin / Maske (Amber)
---------------------------------------------------------- */
.card-treatment {
  background: var(--cat-treatment-bg);
  color: var(--cat-treatment-text);
  box-shadow: 0 4px 18px rgba(245, 158, 11, 0.15),
              inset 0 0 0 1px rgba(245, 158, 11, 0.18);
}
.card-treatment::before {
  background: var(--cat-treatment);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}
.card-treatment:hover {
  box-shadow: 0 8px 30px rgba(245, 158, 11, 0.25),
              inset 0 0 0 1px rgba(245, 158, 11, 0.35);
}

/* ----------------------------------------------------------
   Category: Nail — Manikür / Pedikür / Protez Tırnak (Pink)
---------------------------------------------------------- */
.card-nail {
  background: var(--cat-nail-bg);
  color: var(--cat-nail-text);
  box-shadow: 0 4px 18px rgba(236, 72, 153, 0.15),
              inset 0 0 0 1px rgba(236, 72, 153, 0.18);
}
.card-nail::before {
  background: var(--cat-nail);
  box-shadow: 0 0 8px rgba(236, 72, 153, 0.5);
}
.card-nail:hover {
  box-shadow: 0 8px 30px rgba(236, 72, 153, 0.25),
              inset 0 0 0 1px rgba(236, 72, 153, 0.35);
}

/* ----------------------------------------------------------
   Category: Beard — Sakal / Erkek Hizmetleri (Blue)
---------------------------------------------------------- */
.card-beard {
  background: var(--cat-beard-bg);
  color: var(--cat-beard-text);
  box-shadow: 0 4px 18px rgba(59, 130, 246, 0.15),
              inset 0 0 0 1px rgba(59, 130, 246, 0.18);
}
.card-beard::before {
  background: var(--cat-beard);
  box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
}
.card-beard:hover {
  box-shadow: 0 8px 30px rgba(59, 130, 246, 0.25),
              inset 0 0 0 1px rgba(59, 130, 246, 0.35);
}