/* =============================================================================
   select.css — the searchable dropdown.

   Its own stylesheet rather than more of forms.css: this is the first control with
   a popover, a listbox and chips, and folding it in would make the field-frame file
   twice as long as the thing it describes. Same rules apply — semantic tokens only,
   no hard-coded colour, spacing or height (DesignTokenTests enforces it), logical
   properties throughout.

   TWO STRUCTURAL RULES CARRY THE WHOLE COMPONENT:

     1. THE FIELD NEVER CHANGES HEIGHT. Not when chips are added, not when a long
        label is chosen, not between the pre-circuit fallback and the real picker.
        A control that grows shoves every field below it down the page.
     2. THE POPOVER IS `position: fixed`, positioned by select.js. Absolute inside
        the field would be clipped by any scrolling ancestor — a dialog, a grid
        cell, a collapsed rail. That was found in the prototype rounds.
   ========================================================================== */

.hrc-select {
  position: relative;
  min-inline-size: 0;
}

/* P5.4-fixes (2026-08-03) MYS Option 1: raw <select class="hrc-select"> (used
   directly on edit pages for a simple picker rather than the SelectPicker
   island) picks up the same border/padding/height as .hrc-input so it never
   renders as a naked native <select>. Matches shipped .hrc-input styling
   so a row of mixed <input> + <select> aligns visually. */
select.hrc-select {
  inline-size: 100%;
  max-inline-size: var(--hrc-input-max-inline-size);
  block-size: var(--hrc-field-height);
  padding-inline: var(--hrc-space-sm);
  color: var(--hrc-ink);
  background-color: var(--hrc-surface);
  border: 1px solid var(--hrc-border-strong);
  border-radius: var(--hrc-radius-sm);
  font-size: var(--hrc-density-text);
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  /* P5.5 (2026-08-04): native-select caret self-hosted as a real SVG file.
     Was a `data:image/svg+xml;utf8,...` URI which violates the CSP
     `img-src 'self'` directive (data: URIs are not in the allow-list; making
     them so would weaken the policy). The file lives at
     ../img/select-caret.svg beside this file's directory so it caches once
     across every select on every screen. Colour is baked into the SVG
     (#768096 - middle grey that reads on both light and dark surfaces);
     no need for a themed variant. */
  background-image: url("../img/select-caret.svg");
  background-repeat: no-repeat;
  background-position: right var(--hrc-space-sm) center;
  padding-inline-end: calc(var(--hrc-space-sm) * 2 + 12px);
  transition:
    border-color var(--hrc-duration) var(--hrc-ease),
    background-color var(--hrc-duration) var(--hrc-ease);
}
select.hrc-select:hover:not(:disabled) { border-color: var(--hrc-accent); }
select.hrc-select:focus-visible {
  outline: 2px solid var(--hrc-accent);
  outline-offset: -1px;
  border-color: var(--hrc-accent);
}
.hrc-field--invalid select.hrc-select { border-color: var(--hrc-crit); }

/* -- the pre-circuit fallback ------------------------------------------------
   A real <select> with the same name, so it posts on its own with no JavaScript
   at all. Pinned to the field height even when `multiple`, which a browser would
   otherwise render four rows tall — see rule 1 above. */

.hrc-select__fallback {
  block-size: var(--hrc-field-height);
  padding-inline: var(--hrc-space-xs);
}

/* -- the field ---------------------------------------------------------------
   Styled to match .hrc-input exactly, but deliberately NOT given that class: the
   trigger is a button whose text is a mix of our chrome (the placeholder) and
   customer data (the labels), and dir="auto" belongs on the data element alone. */

.hrc-select__field {
  display: flex;
  align-items: stretch;
  min-inline-size: 0;
  /* Same cap as .hrc-input in forms.css so a text input and a select on the same row
     visually align — a full-width select next to a capped text input reads as
     inconsistent chrome, not as data. Opt-out with .hrc-select--wide (packet
     edit-tenant 2026-07-30). */
  max-inline-size: var(--hrc-input-max-inline-size);
  block-size: var(--hrc-field-height);
  background-color: var(--hrc-surface);
  border: 1px solid var(--hrc-border);
  border-radius: var(--hrc-radius-sm);
  transition: border-color var(--hrc-duration) var(--hrc-ease);
}

/* OPT-OUT — matches .hrc-input--wide. Applied on .hrc-select, cascades to __field. */
.hrc-select--wide .hrc-select__field {
  max-inline-size: none;
}

.hrc-select__field:hover:not(:has(.hrc-select__trigger:disabled)) {
  border-color: var(--hrc-border-strong);
}

.hrc-select__field--invalid {
  border-color: var(--hrc-crit);
}

.hrc-select__trigger {
  display: flex;
  align-items: center;
  gap: var(--hrc-space-xs);
  flex: 1 1 auto;
  /* Without this a single long chip or label widens the field past its column and
     produces the page-level scroll the responsive contract forbids. */
  min-inline-size: 0;
  padding-inline: var(--hrc-space-sm);
  background: none;
  border: none;
  border-radius: var(--hrc-radius-sm);
  color: var(--hrc-ink);
  font-size: var(--hrc-density-text);
  text-align: start;
  cursor: pointer;
  /* The row clips; it never grows. */
  overflow: hidden;
}

.hrc-select__trigger:focus-visible {
  outline: var(--hrc-focus-ring);
  outline-offset: calc(var(--hrc-focus-offset) * -1);
}

.hrc-select__trigger:disabled {
  background-color: var(--hrc-surface-raised);
  color: var(--hrc-ink-subtle);
  cursor: not-allowed;
}

.hrc-select__placeholder {
  color: var(--hrc-ink-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hrc-select__value {
  min-inline-size: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hrc-select__caret {
  /* Pushed to the end and never allowed to shrink: it is the only affordance that
     says "this opens", so it must survive any amount of content beside it. */
  margin-inline-start: auto;
  flex: 0 0 auto;
  inline-size: 0;
  block-size: 0;
  border-inline: 0.3em solid transparent;
  border-block-start: 0.35em solid var(--hrc-ink-muted);
}

.hrc-select__clear {
  flex: 0 0 auto;
  padding-inline: var(--hrc-space-xs);
  background: none;
  border: none;
  border-radius: var(--hrc-radius-sm);
  color: var(--hrc-ink-muted);
  font-size: var(--hrc-text-lg);
  line-height: 1;
  cursor: pointer;
}

.hrc-select__clear:hover {
  color: var(--hrc-ink);
}

.hrc-select__clear:focus-visible {
  outline: var(--hrc-focus-ring);
  outline-offset: calc(var(--hrc-focus-offset) * -1);
}

/* -- chips -------------------------------------------------------------------
   ONE LINE, ALWAYS. `flex-wrap: nowrap` plus `overflow: hidden` is what makes the
   height promise structural rather than a thing JavaScript has to keep true —
   with JS off the row still cannot grow, it simply clips without a "+N" badge. */

.hrc-select__chips {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--hrc-space-2xs);
  min-inline-size: 0;
  overflow: hidden;
}

.hrc-select__chip {
  flex: 0 0 auto;
  max-inline-size: 12rem;
  padding-inline: var(--hrc-space-xs);
  padding-block: var(--hrc-space-2xs);
  background-color: var(--hrc-accent-soft);
  color: var(--hrc-ink);
  border-radius: var(--hrc-radius-xs);
  font-size: var(--hrc-text-xs);
  line-height: var(--hrc-leading-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Written by select.js from what actually fits, and empty in every Blazor render so
   the two never fight over it. Hidden while empty, so no stray gap appears. */
.hrc-select__overflow {
  flex: 0 0 auto;
  padding-inline: var(--hrc-space-2xs);
  color: var(--hrc-ink-muted);
  font-size: var(--hrc-text-xs);
  font-variant-numeric: tabular-nums;
}

.hrc-select__overflow:empty {
  display: none;
}

/* -- the popover -------------------------------------------------------------
   Fixed, so no scrolling ancestor can clip it. Its coordinates are written by
   select.js through the CSSOM — which strict CSP allows; what it forbids is a
   style="…" attribute in markup. */

.hrc-select__popover {
  position: fixed;
  z-index: var(--hrc-z-popover);
  display: flex;
  flex-direction: column;
  gap: var(--hrc-space-2xs);
  /* Real values are written by select.js on open; these keep it sane for the frame
     before that runs, and if the script never loads it is simply not shown. */
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 16rem;
  padding: var(--hrc-space-xs);
  background-color: var(--hrc-surface);
  border: 1px solid var(--hrc-border);
  border-radius: var(--hrc-radius-sm);
  box-shadow: var(--hrc-shadow-pop);
}

.hrc-select__popover[hidden] {
  display: none;
}

.hrc-select__search {
  /* Inherits .hrc-input, so only the things that differ are set here. */
  flex: 0 0 auto;
}

.hrc-select__list {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  /* The list scrolls INSIDE the popover. A popover as tall as its data is how a
     picker ends up taller than the viewport at 360px. */
  max-block-size: 16rem;
}

.hrc-select__option {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-inline-size: 0;
  padding-inline: var(--hrc-space-xs);
  padding-block: var(--hrc-space-2xs);
  border-radius: var(--hrc-radius-xs);
  color: var(--hrc-ink);
  font-size: var(--hrc-density-text);
  cursor: pointer;
}

/* Keyboard highlight and hover are the SAME state deliberately: two different
   "which row am I on" indicators on screen at once is worse than one. */
.hrc-select__option:hover,
.hrc-select__option--active {
  background-color: var(--hrc-surface-hover);
}

/* Selection is a border, not just a fill, so it survives sitting under the
   highlight — colour alone never carries meaning (WCAG 1.4.1). */
.hrc-select__option--selected {
  border-inline-start: var(--hrc-space-2xs) solid var(--hrc-accent);
  padding-inline-start: var(--hrc-space-xs);
  font-weight: var(--hrc-weight-medium);
}

.hrc-select__option[aria-disabled="true"] {
  color: var(--hrc-ink-subtle);
  cursor: not-allowed;
}

.hrc-select__option-label {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.hrc-select__option-desc {
  font-size: var(--hrc-text-xs);
  color: var(--hrc-ink-muted);
  overflow-wrap: anywhere;
}

.hrc-select__empty {
  margin: 0;
  padding: var(--hrc-space-xs);
  color: var(--hrc-ink-muted);
  font-size: var(--hrc-text-sm);
}

.hrc-select__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hrc-space-xs);
  padding-block-start: var(--hrc-space-2xs);
  border-block-start: 1px solid var(--hrc-border);
}

.hrc-select__count {
  color: var(--hrc-ink-muted);
  font-size: var(--hrc-text-xs);
  font-variant-numeric: tabular-nums;
}

.hrc-select__more {
  padding-inline: var(--hrc-space-xs);
  padding-block: var(--hrc-space-2xs);
  background: none;
  border: 1px solid var(--hrc-border);
  border-radius: var(--hrc-radius-xs);
  color: var(--hrc-accent);
  font-size: var(--hrc-text-xs);
  cursor: pointer;
}

.hrc-select__more:focus-visible {
  outline: var(--hrc-focus-ring);
  outline-offset: var(--hrc-focus-offset);
}