/* Custom Overrides for Booking Page Calendar and Dark Mode */

/* Ensure calendar available/unavailable colors are visible in dark mode */
body.theme-dark .fc-daygrid-day.fc-day-available,
[data-bs-theme="dark"] .fc-daygrid-day.fc-day-available {
  background-color: rgba(5, 150, 105, 0.15) !important; /* Light green for dark mode */
  border-color: #059669 !important; /* Green border */
}

body.theme-dark .fc-daygrid-day.fc-day-available:hover,
[data-bs-theme="dark"] .fc-daygrid-day.fc-day-available:hover {
  background-color: rgba(5, 150, 105, 0.25) !important; /* Darker green on hover */
}

body.theme-dark .fc-daygrid-day.fc-day-unavailable,
[data-bs-theme="dark"] .fc-daygrid-day.fc-day-unavailable {
  background-color: rgba(220, 38, 38, 0.15) !important; /* Light red for dark mode */
  color: #dc2626 !important; /* Red text */
  border-color: #dc2626 !important; /* Red border */
}

body.theme-dark .fc-daygrid-day.selected-date,
[data-bs-theme="dark"] .fc-daygrid-day.selected-date {
  background-color: #6d28d9 !important; /* Primary purple for selected date */
  color: white !important;
}

/* Fix FullCalendar navigation button hover/active states in dark mode */
body.theme-dark .fc-button,
[data-bs-theme="dark"] .fc-button {
  background-color: #21262d; /* Dark background for buttons */
  border-color: #30363d; /* Dark border */
  color: #e6edf3; /* Light text */
  box-shadow: none; /* Remove default shadow */
}

body.theme-dark .fc-button:hover,
[data-bs-theme="dark"] .fc-button:hover {
  background-color: #30363d !important; /* Darker background on hover */
  border-color: #484f58 !important; /* Slightly lighter border on hover */
  color: #ffffff !important; /* White text on hover */
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow on hover */
}

body.theme-dark .fc-button-primary,
[data-bs-theme="dark"] .fc-button-primary {
  background-color: #6d28d9; /* Primary purple for active/primary buttons */
  border-color: #6d28d9;
  color: white;
}

body.theme-dark .fc-button-primary:hover,
[data-bs-theme="dark"] .fc-button-primary:hover {
  background-color: #5b21b6 !important; /* Darker purple on hover */
  border-color: #5b21b6 !important;
  color: white !important;
}

body.theme-dark .fc-button-active,
[data-bs-theme="dark"] .fc-button-active {
  background-color: #6d28d9 !important; /* Ensure active state is primary purple */
  border-color: #6d28d9 !important;
  color: white !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Ensure day numbers are visible in dark mode */
body.theme-dark .fc-daygrid-day-number,
[data-bs-theme="dark"] .fc-daygrid-day-number {
  color: #e6edf3; /* Light color for day numbers */
}

/* Ensure header cells are visible in dark mode */
body.theme-dark .fc-col-header-cell,
[data-bs-theme="dark"] .fc-col-header-cell {
  background-color: #1e293b; /* Darker background for header */
  border-color: #334155; /* Darker border */
}

body.theme-dark .fc-col-header-cell-cushion,
[data-bs-theme="dark"] .fc-col-header-cell-cushion {
  color: #94a3b8; /* Muted text for header */
}

/* Ensure general calendar borders are visible */
body.theme-dark .fc-daygrid-day,
body.theme-dark .fc-timegrid-slot,
[data-bs-theme="dark"] .fc-daygrid-day,
[data-bs-theme="dark"] .fc-timegrid-slot {
  border-color: #334155; /* Dark border for cells */
}

body.theme-dark .fc-scrollgrid,
[data-bs-theme="dark"] .fc-scrollgrid {
  border-color: #334155; /* Dark border for scroll grid */
}

body.theme-dark .fc-theme-standard td,
body.theme-dark .fc-theme-standard th,
[data-bs-theme="dark"] .fc-theme-standard td,
[data-bs-theme="dark"] .fc-theme-standard th {
  border-color: #334155; /* Dark border for table cells */
}

/* Ensure today's date is distinct in dark mode */
body.theme-dark .fc-day-today,
[data-bs-theme="dark"] .fc-day-today {
  background-color: rgba(109, 40, 217, 0.15) !important; /* Light purple tint for today */
  border-color: #6d28d9 !important; /* Primary purple border */
}

body.theme-dark .fc-day-today .fc-daygrid-day-number,
[data-bs-theme="dark"] .fc-day-today .fc-daygrid-day-number {
  color: #6d28d9; /* Primary purple text for today's number */
}

/* Ensure hover effect on calendar days is visible */
body.theme-dark .fc-daygrid-day:hover,
[data-bs-theme="dark"] .fc-daygrid-day:hover {
  background-color: rgba(109, 40, 217, 0.08) !important; /* Subtle hover effect */
}

/* Ensure time slot buttons have correct colors in dark mode */
body.theme-dark .time-slot-btn,
[data-bs-theme="dark"] .time-slot-btn {
  background-color: #1e293b; /* Dark background for time slots */
  border-color: #334155; /* Dark border */
  color: #e6edf3; /* Light text */
}

body.theme-dark .time-slot-btn .slot-count,
[data-bs-theme="dark"] .time-slot-btn .slot-count {
  color: #94a3b8; /* Muted text for slot count */
}

body.theme-dark .time-slot-btn.btn-primary,
[data-bs-theme="dark"] .time-slot-btn.btn-primary {
  background-color: #6d28d9; /* Primary purple when selected */
  border-color: #6d28d9;
  color: white;
}

body.theme-dark .time-slot-btn.btn-primary .slot-count,
[data-bs-theme="dark"] .time-slot-btn.btn-primary .slot-count {
  color: white;
}

body.theme-dark .time-slot-btn.limited-slots,
[data-bs-theme="dark"] .time-slot-btn.limited-slots {
  border-color: #fd7e14; /* Orange border */
  color: #fd7e14;
}
body.theme-dark .time-slot-btn.limited-slots .slot-count,
[data-bs-theme="dark"] .time-slot-btn.limited-slots .slot-count {
  color: #fd7e14;
}
body.theme-dark .time-slot-btn.btn-primary.limited-slots,
[data-bs-theme="dark"] .time-slot-btn.btn-primary.limited-slots {
  background-color: #fd7e14;
  border-color: #fd7e14;
  color: white;
}
body.theme-dark .time-slot-btn.btn-primary.limited-slots .slot-count,
[data-bs-theme="dark"] .time-slot-btn.btn-primary.limited-slots .slot-count {
  color: white;
}

body.theme-dark .time-slot-btn.few-slots,
[data-bs-theme="dark"] .time-slot-btn.few-slots {
  border-color: #dc3545; /* Red border */
  color: #dc3545;
}
body.theme-dark .time-slot-btn.few-slots .slot-count,
[data-bs-theme="dark"] .time-slot-btn.few-slots .slot-count {
  color: #dc3545;
}
body.theme-dark .time-slot-btn.btn-primary.few-slots,
[data-bs-theme="dark"] .time-slot-btn.btn-primary.few-slots {
  background-color: #dc3545;
  border-color: #dc3545;
  color: white;
}
body.theme-dark .time-slot-btn.btn-primary.few-slots .slot-count,
[data-bs-theme="dark"] .time-slot-btn.btn-primary.few-slots .slot-count {
  color: white;
}

/* Ensure recurring date items are visible in dark mode */
body.theme-dark .recurring-date-item.available,
[data-bs-theme="dark"] .recurring-date-item.available {
  background-color: rgba(5, 150, 105, 0.08);
  border-left-color: #059669;
}

body.theme-dark .recurring-date-item.unavailable,
[data-bs-theme="dark"] .recurring-date-item.unavailable {
  background-color: rgba(220, 38, 38, 0.08);
  border-left-color: #dc3545;
}

body.theme-dark .recurring-date-item:hover,
[data-bs-theme="dark"] .recurring-date-item:hover {
  background-color: rgba(109, 40, 217, 0.05); /* Subtle hover for recurring items */
}

/* Ensure text colors are correct within the calendar */
body.theme-dark .fc-toolbar-title,
[data-bs-theme="dark"] .fc-toolbar-title {
  color: #e6edf3; /* Light text for title */
}

body.theme-dark .fc-day-past,
[data-bs-theme="dark"] .fc-day-past {
  background-color: rgba(148, 163, 184, 0.05); /* Subtle background for past days */
  opacity: 0.8;
}

body.theme-dark .fc-day-future,
[data-bs-theme="dark"] .fc-day-future {
  background-color: transparent; /* No background for future days by default */
}

/* Ensure loading spinner is visible */
body.theme-dark #appointment-calendar.loading::after,
body.theme-dark #edit-calendar.loading::after,
[data-bs-theme="dark"] #appointment-calendar.loading::after,
[data-bs-theme="dark"] #edit-calendar.loading::after {
  border-top-color: #6d28d9; /* Primary color for spinner */
}

body.theme-dark #appointment-calendar.loading::before,
body.theme-dark #edit-calendar.loading::before,
[data-bs-theme="dark"] #appointment-calendar.loading::before,
[data-bs-theme="dark"] #edit-calendar.loading::before {
  background: rgba(15, 23, 42, 0.8); /* Dark overlay for loading */
}

/* Overrides específicos para book.php sin alterar la lógica JS */

/***** Barra de acciones fija *****/
.sticky-cta {
  position: sticky;
  bottom: 0;
  z-index: 1030;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
}

[data-bs-theme="dark"] .sticky-cta {
  background: rgba(31,41,55,0.9);
  border-top-color: rgba(255,255,255,0.08);
}

.sticky-cta .cta-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
}

.sticky-cta .cta-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.95rem;
}

.sticky-cta .cta-summary .item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sticky-cta .cta-actions {
  display: flex;
  gap: 0.5rem;
}

/***** Ajustes de layout para maximizar contenido visible *****/
.booking-container .booking-card .booking-content {
  padding-bottom: 1rem;
}

.wizard-navigation {
  margin-top: 1rem;
  padding-top: 0.75rem;
}

@media (max-width: 991.98px) {
  .sticky-cta .cta-content { flex-direction: column; align-items: stretch; }
  .sticky-cta .cta-actions { justify-content: stretch; }
}

/* Mejora CTA y unificación visual (extiende contenido existente del archivo) */

/* Espacio inferior para que la CTA no tape contenido */
.booking-container .booking-card {
  padding-bottom: 70px;
}

/* Ocultar la navegación original del wizard en UI, mantenerla para impresión */
@media (min-width: 768px) {
  .wizard-navigation {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
}

@media print {
  .sticky-cta { display: none !important; }
  .wizard-navigation { position: static; left: auto; width: auto; height: auto; overflow: visible; }
}

/* Barra CTA: fijar y elevar en z-index */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1050;
}

/* Coherencia de colores en modo oscuro para CTA */
[data-bs-theme="dark"] .sticky-cta .btn-primary {
  background-color: #8b5cf6;
  border-color: #8b5cf6;
}
[data-bs-theme="dark"] .sticky-cta .btn-primary:hover,
[data-bs-theme="dark"] .sticky-cta .btn-primary:focus {
  background-color: #7c3aed;
  border-color: #7c3aed;
}

/* Ajustes de accesibilidad */
.sticky-cta .btn:focus {
  outline: 2px solid var(--header-primary-color);
  outline-offset: 2px;
}