/* Date input styling */
input[type="date"] {
  color: #000000 !important;
  position: relative; /* CRITICAL: Makes the input the positioning context for the icon */
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  background-clip: padding-box;
}

/* Fix the icon position with our padding */
input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  opacity: 0.7;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* Fix date text color on dark mode */
.dark input[type="date"] {
  color: #ffffff !important;
  background-color: #374151;
}

/* Make sure text is visible */
input[type="date"].text-black {
  color: #000000 !important;
}

/* Cross-browser calendar appearance */
input[type="date"]::-webkit-inner-spin-button {
  display: none;
}

/* Force consistent formatting for the date */
input[type="date"]::-webkit-datetime-edit {
  color: #000000;
}

/* Remove focus outline and replace with ring */
input[type="date"]:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px #3b82f6;
}

/* Fix spacing with the calendar icon */
.ps-10[type="date"] {
  padding-right: 36px !important;
}