/* Choices.js color tokens -- consumed by choices.min.css's own var(--choices-*, fallback) declarations.

   Scoped to the app's own [data-bs-theme="dark"]/[data-bs-theme="light"] toggle (js/theme.js), not
   @media (prefers-color-scheme:dark), so Choices follows the same manual theme switch as the rest of the app
   instead of the OS-level preference. The light theme block only swaps the accent color to the app's brand
   green (--bs-primary, set in css/style.css) -- choices.min.css's own built-in fallback bg/border/keyline
   colors are already a reasonable neutral light theme on their own. */

/* unscoped (both themes) -- Choices' own default corner radius (2.5px) reads as sharp/square next to Bootstrap's
   rounded .form-control/.form-select, so match Bootstrap's own radius variable instead of a hardcoded value.
   Only the single-select/dropdown-panel radius is touched; --choices-border-radius-item (the pill shape used by
   multi-select "tag" items, e.g. the accessory-type usage picker) is a different, deliberately much rounder shape
   and is left alone. */
:root {
	--choices-border-radius: var( --bs-border-radius, 0.375rem );

	/* Choices' open dropdown panel defaults to z-index 1 (`--choices-z-index`), which loses to every layer Leaflet
	   stacks inside a map container: its panes sit at 200-700, `.leaflet-control` at 800 and the
	   `.leaflet-top`/`.leaflet-bottom` control corners at 1000 (css/leaflet.css). Neither the `.choices` wrapper nor
	   the map container creates a stacking context of its own (both are `position: relative` with `z-index: auto`),
	   so those numbers compete directly -- which is why the land dialog's region/category/owner dropdowns opened
	   *behind* the map below them. 1010 clears Leaflet's highest layer while staying under Bootstrap's fixed navbar
	   (1030) and modal (1055), so a dropdown still can't escape over either of those. */
	--choices-z-index: 1010;
}

/* Choices' own default box height (44px) is taller than both Bootstrap's regular .form-select/.form-control
   (~38px) and small .form-select-sm/.form-control-sm (~31px). Scoped to [data-type*="select-one"] throughout --
   select-multiple (e.g. the vehicle-accessory-type usage picker) deliberately keeps its own natural auto-growing
   height instead, since it needs to wrap onto multiple lines as more tag items get selected; forcing a fixed
   height there would clip them.
   - Attempt 1 (same day): overriding --choices-input-height (a min-height) had no visible effect, since
     .choices__inner's own padding plus its nested .choices__list--single's *separate* padding already stack up
     to nearly 44px regardless of the min-height's value -- that was never the binding constraint.
   - Attempt 2 (same day): forced an explicit height + flex centering instead, using the exact same
     calc(1.5em + Xrem + border*2) formula Bootstrap itself uses for .form-control/.form-select -- but Bootstrap's
     own rule sets font-size:1rem (16px) on that same element before using 1.5em, while .choices__inner still had
     Choices' own default font-size (14px, --choices-font-size-md's fallback), so the copied formula computed a
     shorter height than Bootstrap's real one. It also missed a *more specific* rule choices.min.css only applies
     to select-one (`.choices[data-type*=select-one] .choices__inner{padding-bottom:var(--choices-inner-one-padding,
     7.5px)}`), which silently outranks a plain `.choices .choices__inner{padding-bottom:0}` override (3 selector
     parts beat 2) -- so bottom padding never actually reached zero, leaving lopsided 0-top/7.5px-bottom padding
     inside the fixed-height box and pushing the flex-centered text visibly off-centre.
   - Attempt 3 (same day): hardcoded Bootstrap's stock rendered heights (38px / 31px) directly. That matched the
     more specific select-one selector correctly and did centre the text, but it pinned the widget to numbers
     that were already stale: css/style.css re-declares .form-control/.form-select padding as 0.6rem (not
     Bootstrap's 0.375rem), and because style.css loads last that padding also outranks Bootstrap's own
     .form-control-sm/.form-select-sm padding -- so the page's real inputs render ~45px / ~42px, and every
     Choices dropdown sat visibly 7-11px shorter than the input beside it.
   This revision stops hardcoding anything: css/style.css now exposes --dfb-input-height / --dfb-input-height-sm
   as the single source of truth for control height, derived from the very padding tokens .form-control uses, and
   both sizes below just read them. Changing the input padding now moves inputs and dropdowns together. (var()
   resolves at computed-value time, so it does not matter that style.css is linked after this file.) The literal
   fallbacks are Bootstrap's stock heights, for the case where this file is used without style.css. */
.choices[data-type*="select-one"] .choices__inner {
	display: flex;
	align-items: center;
	height: var( --dfb-input-height, 38px );
	min-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	overflow: hidden;
	font-size: 1rem;
	--choices-inner-one-padding: 0px;
}

.choices[data-type*="select-one"] .choices__list--single {
	padding-top: 0;
	padding-bottom: 0;
	line-height: 1;
}

.choices.choices-sm[data-type*="select-one"] .choices__inner {
	height: var( --dfb-input-height-sm, 31px );
	font-size: .875rem;
}

/* select-multiple keeps its auto-growing height (see above) but still gets a floor, so an empty or single-tag
   multi-select lines up with the inputs around it instead of sitting short like the single-selects used to. */
.choices[data-type*="select-multiple"] .choices__inner {
	min-height: var( --dfb-input-height, 38px );
}

.choices.choices-sm[data-type*="select-multiple"] .choices__inner {
	min-height: var( --dfb-input-height-sm, 31px );
}

/* Choices' own default 24px bottom gutter is meant for standalone widgets; inside Bootstrap's grid/.mb-3 form rows
   it double-spaces every select relative to its neighbouring inputs. */
.choices {
	margin-bottom: 0;
}

/* light theme only needs the accent swapped -- choices.min.css's own built-in fallback bg/border/keyline colors are already a reasonable neutral light theme on their own */
[data-bs-theme="light"] {
	--choices-primary-color: var( --bs-primary );

	--dfb-choices-option-color: #333;
	--dfb-choices-selected-bg: color-mix( in srgb, var( --bs-primary ) 14%, #fff );
	--dfb-choices-selected-color: var( --dfb-choices-option-color );
	--dfb-choices-highlight-bg: var( --bs-primary );
	--dfb-choices-highlight-color: #fff;
}

[data-bs-theme="dark"] {
	--choices-bg-color: #101010;
	--choices-bg-color-dropdown: #101010;
	--choices-bg-color-disabled: #181a1b;
	--choices-keyline-color: #3b3e40;
	--choices-primary-color: var( --bs-primary );
	--choices-item-color: #fff;
	--choices-item-disabled-color: #eee;
	--choices-disabled-color: #2d2d2d;

	--dfb-choices-option-color: #fff;
	--dfb-choices-selected-bg: color-mix( in srgb, var( --bs-primary ) 22%, #101010 );
	--dfb-choices-selected-color: var( --dfb-choices-option-color );
	--dfb-choices-highlight-bg: var( --dfb-hover-green, #3f6b37 );
	--dfb-choices-highlight-color: #fff;
	--choices-icon-cross: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
	--choices-icon-cross-inverse: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
	color-scheme: dark;
}

/* Choices' own dropdown search box is a real native <input> with no text color of its own set anywhere in
   choices.min.css -- without this it stays browser-default (near-black) against the dark dropdown background. */
[data-bs-theme="dark"] .choices__input {
	color: #fff;
}


/* Dropdown option rows.

   choices.min.css paints BOTH the pointer/keyboard cursor row (.is-highlighted) and the currently chosen row
   (.is-selected) with one shared `background-color: var(--choices-highlighted-color, #f2f2f2)` declaration, and
   sets no text color on them at all -- dropdown rows just inherit whatever <body> has.

   That combination made the hovered option unreadable in the dark theme. The dark block above used to define
   --choices-highlighted-color as `color-mix( in srgb, var(--bs-primary) 25%, var(--dfb-surface-bg) )`, but
   --dfb-surface-bg is not defined anywhere in this project (css/style.css names its surface tokens --dfb-card-bg
   and --dfb-page-bg). An unresolvable var() inside color-mix() makes the whole declaration invalid at
   computed-value time, so --choices-highlighted-color fell back to Choices' built-in #f2f2f2 -- near-white --
   underneath text inherited from the dark theme's own near-white --dfb-text-dark (#e6eee4). White on white:
   the row the mouse was over was the one row you could not read.

   So the two states are now separated and both get an explicit background AND foreground: .is-selected is a quiet
   tint that marks the current value, .is-highlighted is a solid accent that clearly tracks the mouse. Selector
   shape is copied from choices.min.css so specificity ties (0,3,0) and this file, linked after it, wins; the
   .is-highlighted block is written second so a row that is both selected and hovered reads as hovered. */

.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item {
	color: var( --dfb-choices-option-color );
}

.choices__list--dropdown .choices__item--selectable.is-selected,
.choices__list[aria-expanded] .choices__item--selectable.is-selected {
	background-color: var( --dfb-choices-selected-bg );
	color: var( --dfb-choices-selected-color );
}

.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
	background-color: var( --dfb-choices-highlight-bg );
	color: var( --dfb-choices-highlight-color );
}

/* optgroup labels -- choices.min.css hardcodes `color: gray`, which is low contrast against the dark dropdown */
.choices__list--dropdown .choices__heading,
.choices__list[aria-expanded] .choices__heading {
	color: var( --dfb-choices-option-color );
	opacity: .7;
}