/* Datepicker (input type="date") Dark Mode Support */

/* ========== UNIVERSAL DEFAULT (Light Mode) ========== */
#datePicker,
[id="datePicker"],
input#datePicker {
  background-color: #ffffff !important;
  color: #212529 !important;
  border: 1px solid #dee2e6 !important;
  padding: 0.375rem 0.75rem !important;
  border-radius: 0.375rem !important;
  font-size: 1rem !important;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  cursor: pointer !important;
  -webkit-appearance: textfield !important;
  -moz-appearance: textfield !important;
  appearance: textfield !important;
  box-sizing: border-box !important;
}

/* Remove spinner buttons */
#datePicker::-webkit-outer-spin-button,
#datePicker::-webkit-inner-spin-button,
input#datePicker::-webkit-outer-spin-button,
input#datePicker::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  appearance: none !important;
  margin: 0 !important;
  display: none !important;
}

/* Calendar picker icon - Light Mode */
#datePicker::-webkit-calendar-picker-indicator,
input#datePicker::-webkit-calendar-picker-indicator {
  background: none !important;
  cursor: pointer !important;
  border-radius: 4px !important;
  margin-right: 4px !important;
  opacity: 0.6 !important;
  filter: invert(0.8) brightness(0.8) !important;
  padding: 4px !important;
  width: 1.2em !important;
  height: 1.2em !important;
}

/* Focus states - Light Mode */
#datePicker:focus,
#datePicker:focus-visible,
input#datePicker:focus,
input#datePicker:focus-visible {
  outline: 0 !important;
  border-color: #86b7fe !important;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* ========== DARK MODE ========== */
html[data-bs-theme="dark"] #datePicker,
html[data-bs-theme="dark"] [id="datePicker"],
html[data-bs-theme="dark"] input#datePicker {
  background-color: #212529 !important;
  color: #dee2e6 !important;
  border: 1px solid #495057 !important;
  padding: 0.375rem 0.75rem !important;
  border-radius: 0.375rem !important;
  font-size: 1rem !important;
  cursor: pointer !important;
  -webkit-appearance: textfield !important;
  -moz-appearance: textfield !important;
  appearance: textfield !important;
  box-sizing: border-box !important;
}

html[data-bs-theme="dark"] #datePicker::-webkit-outer-spin-button,
html[data-bs-theme="dark"] #datePicker::-webkit-inner-spin-button,
html[data-bs-theme="dark"] input#datePicker::-webkit-outer-spin-button,
html[data-bs-theme="dark"] input#datePicker::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  appearance: none !important;
  margin: 0 !important;
  display: none !important;
}

/* Calendar picker icon - Dark Mode */
html[data-bs-theme="dark"] #datePicker::-webkit-calendar-picker-indicator,
html[data-bs-theme="dark"] input#datePicker::-webkit-calendar-picker-indicator {
  background: none !important;
  cursor: pointer !important;
  border-radius: 4px !important;
  margin-right: 4px !important;
  opacity: 0.8 !important;
  filter: invert(1) brightness(1.1) !important;
  padding: 4px !important;
  width: 1.2em !important;
  height: 1.2em !important;
}

/* Focus states - Dark Mode */
html[data-bs-theme="dark"] #datePicker:focus,
html[data-bs-theme="dark"] #datePicker:focus-visible,
html[data-bs-theme="dark"] input#datePicker:focus,
html[data-bs-theme="dark"] input#datePicker:focus-visible {
  outline: 0 !important;
  border-color: #86b7fe !important;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}