/* FP-NATIVE-CONTROLS: date of birth / date pickers aur <select> dropdowns ko site ke
   apne light/dark mode ke mutabiq rakhta hai (phone ka system dark mode nahi).
   Pehle meta color-scheme="light dark" ki wajah se light mode me bhi picker dark
   ban jata tha aur text white dikhta tha. */

/* ---- Light mode (site) ---- */
html:not(.dark):not([data-theme="dark-glass"]) { color-scheme: light; }

html:not(.dark):not([data-theme="dark-glass"]) input[type="date"],
html:not(.dark):not([data-theme="dark-glass"]) input[type="time"],
html:not(.dark):not([data-theme="dark-glass"]) input[type="month"],
html:not(.dark):not([data-theme="dark-glass"]) input[type="week"],
html:not(.dark):not([data-theme="dark-glass"]) input[type="datetime-local"],
html:not(.dark):not([data-theme="dark-glass"]) select {
  color-scheme: light;
  color: var(--c-text, #111827);
}

html:not(.dark):not([data-theme="dark-glass"]) input[type="date"]::-webkit-datetime-edit,
html:not(.dark):not([data-theme="dark-glass"]) input[type="date"]::-webkit-datetime-edit-fields-wrapper,
html:not(.dark):not([data-theme="dark-glass"]) input[type="date"]::-webkit-datetime-edit-text,
html:not(.dark):not([data-theme="dark-glass"]) input[type="date"]::-webkit-datetime-edit-month-field,
html:not(.dark):not([data-theme="dark-glass"]) input[type="date"]::-webkit-datetime-edit-day-field,
html:not(.dark):not([data-theme="dark-glass"]) input[type="date"]::-webkit-datetime-edit-year-field {
  color: var(--c-text, #111827);
}
html:not(.dark):not([data-theme="dark-glass"]) input[type="date"]::-webkit-calendar-picker-indicator,
html:not(.dark):not([data-theme="dark-glass"]) input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: none;
  opacity: .75;
}
html:not(.dark):not([data-theme="dark-glass"]) select option,
html:not(.dark):not([data-theme="dark-glass"]) select optgroup {
  background-color: #ffffff;
  color: #111827;
}

/* ---- Dark mode (site) ---- */
html.dark, html[data-theme="dark-glass"] { color-scheme: dark; }

html.dark input[type="date"],
html.dark input[type="time"],
html.dark input[type="month"],
html.dark input[type="week"],
html.dark input[type="datetime-local"],
html.dark select,
html[data-theme="dark-glass"] input[type="date"],
html[data-theme="dark-glass"] select {
  color-scheme: dark;
}
html.dark select option,
html.dark select optgroup,
html[data-theme="dark-glass"] select option,
html[data-theme="dark-glass"] select optgroup {
  background-color: #1e293b;
  color: #f1f5f9;
}