/* ============================================================
   Sitewide <select> theme (Section E)
   Every <select> on every page is progressively enhanced by Choices.js
   (wired up once in includes/sidebar.php, mirroring the Flatpickr
   pattern used for date inputs in Section D). This file restyles the
   Choices.js popup so the option list uses the app's own white/--border/
   black-text look with brand-black (#1a1a19) hover + selected states,
   instead of the native OS/browser dropdown appearance.
   The original <select>'s own classes (fb-select, tb-select, form-select,
   status-select, etc.) are copied onto the new `.choices` wrapper at
   init time, so each page's existing width/sizing rules keep working
   unchanged — this file only touches color/shape, never layout.
   ============================================================ */

.sf-select { position: relative; font-family: 'Space Grotesk', system-ui, sans-serif; }

/* ------------------------------------------------------------------
   HOTFIX (double-arrow / stray left line): neutralize leaked field
   styling on the Choices wrapper.

   sfInitSelect() (includes/sidebar.php) copies the original <select>'s
   own classes (.fb-select, .tb-select, .status-select, .form-select,
   .select, .select--sm …) onto the .choices wrapper so each page's
   WIDTH rules (.fb-select--status, .tb-select--month, …) keep working.
   The problem: those SAME base classes also carry a chevron
   background-image, a 1.5px border and horizontal padding. On the
   wrapper that renders a SECOND arrow — stacked over the custom
   .choices__inner::after chevron — plus a SECOND border offset by the
   padding, which is the stray vertical line beside the selected text.

   The wrapper must be a transparent positioning context only; every
   visible box style (border, radius, chevron, padding, height) comes
   from .choices__inner below. !important is required because the
   per-page field classes live in inline <style> blocks that load
   AFTER this stylesheet and match at equal specificity. Width
   modifiers set width only, so they are unaffected.
   ------------------------------------------------------------------ */
.sf-select {
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  box-shadow: none !important;
  /* Choices.js ships a default `.choices { margin-bottom: 24px }`. Left in
     place it (a) adds stray space below every themed select and (b) throws
     off vertical centering in flex rows like the .filterbar — align-items
     centers the margin box, so the 24px bottom margin lifts the dropdown
     ~12px above the Filter button / Clear link beside it. The app controls
     its own field spacing, so zero it out site-wide. */
  margin: 0 !important;
}

.sf-select .choices__inner {
  min-height: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  background: var(--white, #fff);
  border: 1.5px solid var(--border, #e5e5e4);
  border-radius: 10px;
  padding: 0 12px;
  font-size: 14px;
  color: var(--text, #1a1a19);
  cursor: pointer;
  transition: border-color .15s ease;
}
.sf-select.is-open .choices__inner,
.sf-select .choices__inner:hover {
  border-color: var(--black, #1a1a19);
}
.sf-select .choices__list--single {
  padding: 0;
}
.sf-select .choices__list--single .choices__item {
  color: var(--text, #1a1a19);
  font-weight: 500;
}
.sf-select input.choices__input {
  background: var(--white, #fff);
  color: var(--text, #1a1a19);
  font-family: inherit;
  font-size: 14px;
  margin-bottom: 0;
}
.sf-select .choices__placeholder { opacity: 1; color: var(--text-muted, #737372); }

/* ------------------------------------------------------------------
   Remove Choices.js's OWN built-in arrow. choices.min.css draws a solid
   triangle via `.choices[data-type*=select-one]::after` (plus its .is-open
   and [dir=rtl] variants). Our wrapper carries BOTH `.choices` and
   `.sf-select`, so that triangle rendered STACKED on top of the custom
   chevron drawn below — this is the doubled / overlapped arrow still visible
   after the earlier hotfix (which only killed the copied-field background
   chevron, never Choices' own ::after triangle). Suppress it site-wide with
   higher specificity + !important so only our themed chevron shows.
   ------------------------------------------------------------------ */
.sf-select.choices[data-type*="select-one"]::after,
.sf-select.choices[data-type*="select-one"].is-open::after,
.sf-select.choices[data-type*="select-one"][dir="rtl"]::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
}

/* Our single custom chevron (the ONLY arrow that should render).
   Drawn as one clean SVG stroke — the same chevron glyph the rest of the
   app's native selects use — instead of a rotated square made of two borders.
   The old border approach rendered as a fuzzy, thick corner at fractional
   browser zoom, which read as a doubled/stacked arrow. A single SVG stroke
   stays crisp and unmistakably single at any zoom. */
.sf-select .choices__inner::after {
  content: ''; position: absolute; right: 12px; top: 50%;
  width: 16px; height: 16px; margin-top: -8px;
  background: no-repeat center / 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23737372' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  border: 0;
  pointer-events: none;
  transition: transform .15s ease;
}
.sf-select.is-open .choices__inner::after {
  transform: rotate(180deg);
}

/* ------------------------------------------------------------------
   Hide the page's OWN decorative chevron that some forms draw as a
   sibling <svg> next to the native <select> (e.g. `.select-wrap svg`
   on my-leave / my-expenses). Choices.js wraps only the <select>, so
   that hand-placed chevron is left behind INSIDE .select-wrap, sitting
   next to our themed .choices wrapper — producing the two stacked
   chevrons. Once Choices has themed the field (.sf-select present), its
   own chevron above is the single source of truth, so suppress the
   leftover one. Scoped with :has() so it only hides the decorative
   chevron of an ENHANCED select, never an unenhanced native fallback.
   ------------------------------------------------------------------ */
.select-wrap:has(> .sf-select) > svg,
.select-wrap:has(> .choices) > svg {
  display: none !important;
}

/* The popup option list */
.sf-select .choices__list--dropdown,
.sf-select .choices__list[aria-expanded] {
  background: var(--white, #fff);
  border: 1.5px solid var(--border, #e5e5e4);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(26, 26, 25, 0.14);
  margin-top: 4px;
  overflow: hidden;
  z-index: 60;
}
.sf-select .choices__list--dropdown .choices__item,
.sf-select .choices__list[aria-expanded] .choices__item {
  color: var(--text, #1a1a19);
  font-size: 14px;
  padding: 9px 12px;
}
/* Hover / keyboard-highlighted option -> brand black (was browser-default blue) */
.sf-select .choices__list--dropdown .choices__item--selectable.is-highlighted,
.sf-select .choices__list[aria-expanded] .choices__item--selectable.is-highlighted,
.sf-select .choices__list--dropdown .choices__item--selectable[aria-selected="true"] {
  background: var(--black, #1a1a19);
  color: var(--white, #fff);
}
/* Currently-selected option, shown with a subtle tick / bold weight rather
   than a second competing color, so only one state (hover) reads as "black". */
.sf-select .choices__list--dropdown .choices__item.is-selected:not(.is-highlighted) {
  background: var(--bg, #f5f5f4);
  color: var(--text, #1a1a19);
  font-weight: 700;
}
.sf-select .choices__list--dropdown .choices__item--disabled {
  color: var(--text-faint, #a3a3a2);
}
.sf-select .choices__list--dropdown .choices__list { padding: 6px; }
.sf-select .choices__list--dropdown .choices__item { border-radius: 8px; }

/* Focus ring uses brand black instead of default blue outline */
.sf-select.is-focused .choices__inner {
  border-color: var(--black, #1a1a19);
  box-shadow: 0 0 0 3px rgba(26, 26, 25, 0.08);
}