/*
DroneHQ Native Controls v146
Stabilizes Chrome/Windows rendering for native selects, date inputs,
time inputs, and the theme selector without changing form behavior.
*/

:root {
  color-scheme: dark;
}

/*
Native browser controls can flash an empty dark popup when broad transitions,
filters, transforms, or delayed compositing are applied. Keep these controls
on a simple rendering path.
*/
select,
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
  color-scheme: dark !important;
  transition: none !important;
  animation: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  will-change: auto !important;
  transform: none !important;
  contain: none !important;
}

/* Explicit colors help the native popup paint immediately in dark mode. */
select {
  background-color: #0a2440 !important;
  color: #f2f7ff !important;
  border-color: rgba(73, 156, 224, 0.46) !important;
}

select option,
select optgroup {
  background: #0b2743 !important;
  color: #f2f7ff !important;
}

/* Keep disabled values readable and prevent browser fallback flashes. */
select:disabled,
input[type="date"]:disabled,
input[type="time"]:disabled,
input[type="datetime-local"]:disabled,
input[type="month"]:disabled,
input[type="week"]:disabled {
  opacity: 0.68 !important;
  background-color: #0a2037 !important;
  color: #9db5cc !important;
}

/*
Date/time indicators remain browser-native, but use the page's dark control
scheme and do not inherit animations.
*/
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
  transition: none !important;
  animation: none !important;
  filter: none !important;
  opacity: 0.95;
  cursor: pointer;
}

/* Avoid inherited transitions from broad utility classes around form rows. */
select *,
input[type="date"] *,
input[type="time"] *,
input[type="datetime-local"] *,
input[type="month"] *,
input[type="week"] * {
  transition: none !important;
  animation: none !important;
}

/*
The theme selector is also a native select. These hooks keep its popup aligned
with the same stable rendering path without changing its JavaScript behavior.
*/
[data-theme-select],
#theme-select,
select[name="theme"],
select[id*="theme" i],
select[class*="theme" i] {
  color-scheme: dark !important;
  transition: none !important;
  animation: none !important;
  filter: none !important;
  transform: none !important;
  will-change: auto !important;
}

/* Retain compact DroneHQ focus treatment without animated glow buildup. */
select:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input[type="month"]:focus,
input[type="week"]:focus {
  outline: none !important;
  border-color: #65c1ff !important;
  box-shadow: 0 0 0 2px rgba(58, 166, 255, 0.18) !important;
}

/*
Reduce browser paint artifacts on the immediate control row while preserving
the surrounding layout. No dimensions or spacing are changed.
*/
select,
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
  backface-visibility: visible !important;
  -webkit-font-smoothing: antialiased;
}