/* DatePicker Component Styles - Flowbite Compatible */

/* Hide native date picker icons */
.datepicker-input::-webkit-calendar-picker-indicator {
  opacity: 0;
  cursor: pointer;
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.datepicker-input::-webkit-inner-spin-button,
.datepicker-input::-webkit-clear-button {
  display: none;
}

/* Input styling with icon space */
input[type="date"].datepicker-input {
  @apply pl-12; /* Left padding for calendar icon */
  color-scheme: light; /* Force light theme for date input */
  color: #6b7280; /* Neutral grey for placeholder-like chrome */
}

input[type="date"].datepicker-input:focus {
  @apply ring-2 ring-blue-500 border-blue-500;
}

input[type="date"].datepicker-input.datepicker-input--has-value {
  color: #111827;
}

/* Age hint styling */
.age-hint {
  font-size: 0.875rem;
  font-weight: 500;
  color: #2563eb;
}

/* Icon hover effects */
.datepicker-input + .absolute i,
.datepicker-input + .absolute svg {
  transition: color 0.2s ease;
}

/* Focus state for icon */
.datepicker-input:focus ~ .absolute i,
.datepicker-input:focus ~ .absolute svg {
  @apply text-blue-500;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  input[type="date"].datepicker-input {
    color-scheme: dark;
  }
}

/* Flowbite-style icon positioning */
.datepicker-wrapper {
  @apply relative;
}

/* Icon container styling */
.datepicker-input-wrapper .absolute {
  z-index: 10; /* Ensure icon is above input */
  pointer-events: auto;
}

.datepicker-input-wrapper .absolute i,
.datepicker-input-wrapper .absolute svg {
  @apply w-4 h-4 text-gray-500 dark:text-gray-400 transition-colors;
}

.datepicker-input-wrapper .absolute:hover i,
.datepicker-input-wrapper .absolute:hover svg {
  @apply text-gray-700 dark:text-gray-300;
}

/* Clickable icon cursor */
.datepicker-input-wrapper .cursor-pointer {
  pointer-events: auto !important;
}