/*
 * Global form control overrides for SQSA dark theme.
 * Fixes native browser controls (date pickers, number spinners, select arrows)
 * that render black/invisible on dark backgrounds.
 */

/* Tell the browser to render native controls in dark mode so calendar icons,
   date spinners, and number spinners use light colours automatically.
   NOTE: <select> is intentionally excluded — applying color-scheme: dark to
   selects causes Chrome to inject a native browser arrow on top of the custom
   CSS arrow, resulting in doubled/overlapping arrows. */
input,
textarea,
.form-control {
  color-scheme: dark;
}

/* Override Bootstrap's default dark select arrow with a mid-blue one.
   The default Bootstrap SVG uses stroke #343a40 which is near-black. */
.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235b9bd5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}

/* Also target bare <select> elements not wrapped in Bootstrap classes */
select:not(.form-select) {
  accent-color: #5b9bd5;
}

/* Date, time, number, month inputs — force light-coloured native controls */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="number"] {
  color-scheme: dark;
  accent-color: #5b9bd5;
}

/* Number input spinner arrows — Chrome/Edge render these as dark icons on a
   light-grey track even when color-scheme: dark is set. Invert them so they
   appear as light arrows on a dark track, matching the dark theme. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  opacity: 1;
  filter: invert(1);
}

/* Checkbox and radio — mid-blue accent so ticks are visible on dark backgrounds */
input[type="checkbox"],
input[type="radio"] {
  accent-color: #5b9bd5;
  width: 1.1em;
  height: 1.1em;
}