/* ==========================================================================
   Component: Datepicker
   ========================================================================== */

/* Import Vanilla Calendar Pro base styles */
@import url("https://cdn.jsdelivr.net/npm/vanilla-calendar-pro@2.9.0/build/vanilla-calendar.min.css");

/* Container */
.c-datepicker {
  display: inline-block;
  position: relative;
  width: 100%;
}

/* Input Field */
.c-datepicker__input {
  anchor-name: --datepicker-anchor;
  background-color: var(--surface-section);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  color: var(--text-color);
  cursor: pointer;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  width: 100%;
}

/* Size Variants */
.c-datepicker--sm .c-datepicker__input {
  font-size: var(--font-size-sm);
  padding: var(--space-xs) var(--space-sm);
}

.c-datepicker--md .c-datepicker__input {
  font-size: var(--font-size-base);
  padding: var(--space-sm) var(--space-md);
}

.c-datepicker--lg .c-datepicker__input {
  font-size: var(--font-size-lg);
  padding: var(--space-md) var(--space-lg);
}

/* Input States */
.c-datepicker__input:hover:not(:disabled) {
  border-color: var(--color-surface-300);
}

.c-datepicker__input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 var(--focus-ring-offset) var(--focus-ring-color);
}

.c-datepicker__input::placeholder {
  color: var(--text-color-muted);
}

.c-datepicker__input:disabled {
  background-color: var(--surface-hover);
  color: var(--text-color-muted);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Error State */
.c-datepicker--error .c-datepicker__input {
  border-color: var(--danger);
}

.c-datepicker--error .c-datepicker__input:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 var(--focus-ring-offset) var(--danger-emphasis);
}

/* Calendar Container */
.c-datepicker__calendar {
  background-color: var(--surface-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  display: none;
  inset-area: bottom;
  margin-top: var(--space-xs);
  position: absolute;
  position-anchor: --datepicker-anchor;
  z-index: var(--z-index-dropdown);
}

/* Fallback positioning for browsers without anchor positioning support */
@supports not (inset-area: bottom) {
  .c-datepicker__calendar {
    /* JavaScript will handle positioning in unsupported browsers */
    position: absolute;
  }
}

.c-datepicker__calendar[style*="display: block"] {
  animation: datepicker-fade-in var(--transition-fast);
}

@keyframes datepicker-fade-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Vanilla Calendar Overrides */
.c-datepicker__calendar .vanilla-calendar {
  background-color: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  color: var(--text-color);
  font-family: var(--font-family-base);
  padding: var(--space-md);
}

.c-datepicker__calendar .vanilla-calendar-header {
  color: var(--text-color-emphasis);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-md);
  padding: var(--space-sm);
}

.c-datepicker__calendar .vanilla-calendar-arrow {
  background-color: transparent;
  border-radius: var(--radius-sm);
  color: var(--text-color-secondary);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.c-datepicker__calendar .vanilla-calendar-arrow:hover {
  background-color: var(--surface-hover);
  color: var(--text-color);
}

.c-datepicker__calendar .vanilla-calendar-day {
  border-radius: var(--radius-md);
  color: var(--text-color);
  font-size: var(--font-size-sm);
  padding: var(--space-sm);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.c-datepicker__calendar .vanilla-calendar-day:hover:not(.vanilla-calendar-day--disabled) {
  background-color: var(--surface-hover);
  cursor: pointer;
}

.c-datepicker__calendar .vanilla-calendar-day--selected {
  background-color: var(--primary);
  color: var(--primary-contrast);
  font-weight: var(--font-weight-semibold);
}

.c-datepicker__calendar .vanilla-calendar-day--today {
  border: 1px solid var(--primary);
  font-weight: var(--font-weight-medium);
}

.c-datepicker__calendar .vanilla-calendar-day--disabled {
  color: var(--text-color-muted);
  cursor: not-allowed;
  opacity: 0.4;
}

@media (max-width: 640px) {
  .c-datepicker__calendar {
    left: 0 !important;
    right: 0 !important;
    width: 100%;
  }
}