/* Datepicker Purple Theme - Override Easepick colors */

/* Variables de color morado para el sistema */
:root {
  --system-purple: #7c3aed;
  --system-purple-hover: #8b5cf6;
  --system-purple-light: #a855f7;
  --system-purple-dark: #5b21b6;
  --system-purple-bg: rgba(124, 58, 237, 0.1);
  --system-purple-bg-hover: rgba(124, 58, 237, 0.2);
}

/* Animaciones y transiciones consistentes */
.easepick-wrapper {
  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.easepick-wrapper.show {
  animation: datepicker-show 0.2s ease-out forwards;
}

@keyframes datepicker-show {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Botones principales del datepicker */
.easepick-wrapper button[data-action="apply"],
.easepick-wrapper .apply-button,
.easepick-wrapper button.apply {
  background-color: var(--system-purple) !important;
  border-color: var(--system-purple) !important;
  color: white !important;
}

.easepick-wrapper button[data-action="apply"]:hover,
.easepick-wrapper .apply-button:hover,
.easepick-wrapper button.apply:hover {
  background-color: var(--system-purple-hover) !important;
  border-color: var(--system-purple-hover) !important;
}

/* Día seleccionado */
.easepick-wrapper .day.selected {
  background-color: var(--system-purple) !important;
  color: white !important;
}

.easepick-wrapper .day.selected:hover {
  background-color: var(--system-purple-hover) !important;
}

/* Día hover */
.easepick-wrapper .day:hover {
  background-color: var(--system-purple-bg) !important;
  color: var(--system-purple-dark) !important;
}

/* Día de hoy */
.easepick-wrapper .day.today {
  border-color: var(--system-purple) !important;
  color: var(--system-purple) !important;
}

/* Rango de fechas (si se usa) */
.easepick-wrapper .day.in-range {
  background-color: var(--system-purple-bg) !important;
  color: var(--system-purple-dark) !important;
}

/* Navegación del mes/año */
.easepick-wrapper .month-item:hover,
.easepick-wrapper .year-item:hover {
  background-color: var(--system-purple-bg) !important;
  color: var(--system-purple-dark) !important;
}

.easepick-wrapper .month-item.selected,
.easepick-wrapper .year-item.selected {
  background-color: var(--system-purple) !important;
  color: white !important;
}

/* Flechas de navegación */
.easepick-wrapper .prev-button:hover,
.easepick-wrapper .next-button:hover {
  color: var(--system-purple) !important;
}

/* Enlaces y botones secundarios */
.easepick-wrapper .reset-button {
  color: var(--system-purple) !important;
}

.easepick-wrapper .reset-button:hover {
  color: var(--system-purple-hover) !important;
}

/* Focus states */
.easepick-wrapper .day:focus {
  outline-color: var(--system-purple) !important;
  box-shadow: 0 0 0 2px var(--system-purple-bg) !important;
}

/* Dropdown activo */
.easepick-wrapper .dropdown.open {
  border-color: var(--system-purple) !important;
}

/* Sobrescribir colores azules específicos de Easepick */
.easepick-wrapper {
  --primary-color: var(--system-purple);
  --secondary-color: var(--system-purple-light);
  --border-color: var(--system-purple);
}

/* Para modo oscuro */
.dark .easepick-wrapper .day.selected {
  background-color: var(--system-purple-light) !important;
}

.dark .easepick-wrapper .day:hover {
  background-color: rgba(168, 85, 247, 0.2) !important;
}

.dark .easepick-wrapper .day.today {
  border-color: var(--system-purple-light) !important;
  color: var(--system-purple-light) !important;
}