/* =========================================================
   appointment-booking.css  —  NEW FILE (Phase 5)
   Path: assets/css/appointment-booking.css

   Styling scoped to public/appointment-booking.html only. Reuses
   existing design tokens from style.css/auth.css (both loaded
   before this file). badge-info/badge-error/badge-muted are
   redefined locally (same values as visa-application.css's copies)
   so this module has no stylesheet dependency on another module.
   ========================================================= */

.badge-info { background: #E6F0FA; color: #1D5FA8; padding: 4px 10px; border-radius: 999px; font-size: var(--fs-micro); font-weight: var(--fw-semibold); }
.badge-error { background: var(--color-error-tint); color: var(--color-error); padding: 4px 10px; border-radius: 999px; font-size: var(--fs-micro); font-weight: var(--fw-semibold); }
.badge-muted { background: var(--color-bg-section); color: var(--color-body); padding: 4px 10px; border-radius: 999px; font-size: var(--fs-micro); font-weight: var(--fw-semibold); }

/* ---------- Calendar widget ---------- */
.ab-calendar {
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-4); max-width: 360px; background: #fff;
}
.ab-cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.ab-cal-month { font-weight: var(--fw-semibold); font-size: var(--fs-small); color: var(--color-heading); }
.ab-cal-nav {
  width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--color-bg-section);
  color: var(--color-heading); font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: background var(--transition-fast);
}
.ab-cal-nav:hover:not(:disabled) { background: var(--color-primary-tint); color: var(--color-primary-hover); }
.ab-cal-nav:disabled { opacity: 0.35; cursor: not-allowed; }
.ab-cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: var(--space-2); }
.ab-cal-weekdays span { text-align: center; font-size: var(--fs-micro); color: var(--color-body); font-weight: var(--fw-semibold); }
.ab-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.ab-cal-day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); font-size: var(--fs-small); color: var(--color-heading);
  background: none; transition: background var(--transition-fast), color var(--transition-fast);
}
.ab-cal-day--empty { visibility: hidden; }
.ab-cal-day:not(:disabled):hover { background: var(--color-primary-tint); color: var(--color-primary-hover); }
.ab-cal-day:disabled { color: var(--color-border); cursor: not-allowed; }
.ab-cal-day--today { font-weight: var(--fw-bold); border: 1px solid var(--color-primary); }
.ab-cal-day--selected { background: var(--color-primary); color: #fff; }
.ab-cal-day--selected:hover { background: var(--color-primary-hover); color: #fff; }

/* ---------- Toolbar above the appointments list ---------- */
.ab-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap: wrap; }
.ab-toolbar h3 { margin-bottom: 0; }

/* ---------- Empty / no-applications states ---------- */
.ab-empty { text-align: center; padding: var(--space-8) var(--space-5); background: var(--color-bg-section); border-radius: var(--radius-md); color: var(--color-body); }
.ab-empty p { margin-bottom: var(--space-4); }

/* ---------- Appointment list (card layout, reuses .card/.card-body) ---------- */
.ab-list { display: grid; gap: var(--space-4); margin-bottom: var(--space-7); }
.ab-appt-card { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5); flex-wrap: wrap; }
.ab-appt-card:hover { transform: none; box-shadow: var(--shadow-sm); }
.ab-appt-main { display: flex; flex-direction: column; gap: 4px; }
.ab-appt-id { font-weight: var(--fw-bold); color: var(--color-heading); font-size: var(--fs-body); }
.ab-appt-meta { font-size: var(--fs-small); color: var(--color-body); }
.ab-appt-actions { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }

/* ---------- Loading skeleton (identical pattern to visa-application.css's va-loading) ---------- */
.ab-loading { text-align: center; padding: var(--space-8) 0; color: var(--color-body); }
.ab-spinner {
  width: 28px; height: 28px; margin: 0 auto var(--space-3);
  border: 3px solid var(--color-border); border-top-color: var(--color-primary);
  border-radius: 50%; animation: ab-spin 0.8s linear infinite;
}
@keyframes ab-spin { to { transform: rotate(360deg); } }

@media (max-width: 768px) {
  .ab-appt-card { flex-direction: column; align-items: flex-start; }
  .ab-appt-actions { width: 100%; }
}