/* Keep the native pet selector readable in light and dark themes. */
#pet-status {
  width: 100%;
  border: 1px solid hsl(var(--border));
  border-radius: 0.375rem;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  color-scheme: light;
  padding: 0.625rem 0.75rem;
  min-height: 2.75rem;
  font-size: 1rem;
}
.dark #pet-status {
  color-scheme: dark;
}
#pet-status option {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}
#pet-status:focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 2px;
}

/* Native dark-mode indicators are already light in some browsers; invert(1)
   alone can turn them black. Normalize first, then make them solid white. */
html:not(.dark) input:is([type="date"], [type="time"], [type="datetime-local"]) {
  color-scheme: light;
}
html:not(.dark) input:is([type="date"], [type="time"], [type="datetime-local"])::-webkit-calendar-picker-indicator {
  filter: brightness(0);
  opacity: 1;
  cursor: pointer;
}
html.dark input:is([type="date"], [type="time"], [type="datetime-local"]) {
  color-scheme: dark;
}
html.dark input:is([type="date"], [type="time"], [type="datetime-local"])::-webkit-calendar-picker-indicator {
  filter: brightness(0) invert(1);
  opacity: 1;
  cursor: pointer;
}