/* ============================================================
   CUSTOM-SELECT.CSS — styled single-select (progressive enhancement).

   Pairs with custom-select.js, which upgrades native single <select>s into a
   styled button + popup listbox. The closed button mirrors .ol-ms__btn and the
   popup mirrors .ol-ms__panel / .ol-ms__opt (the export → delivery-location
   look), minus the checkboxes — a single-select with a selected tick instead.
   Token-based only (DESIGN-STANDARD §1); no raw hex.

   If JS is off, .cs* never appears and the native .fld select renders as before.
   ============================================================ */

/* Wrapper anchors the absolutely-positioned popup to the field width. */
.cs {
  position: relative;
  width: 100%;
}

/* The native <select> stays in the DOM as the value + submission source, but is
   visually hidden and out of the tab order (the styled button is the a11y
   control). Not display:none so the form value always posts. */
.cs__native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Closed control — mirrors .ol-ms__btn. */
.cs__btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  /* Match `.fld input` exactly (shell.css: min-height 44px, padding 10px
     12px). A custom select IS a field control and sits in the same rows as
     one — the document-centre filter form lays Find / Uploaded from / Uploaded
     to / Client out with `align-items: flex-end`, so a 40.25px control against
     44px siblings dropped the whole Client field 3.75px below the other three
     labels. Two control vocabularies where there should be one; the phone block
     below already agreed on 44. */
  padding: 10px 12px;
  min-height: 44px;
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  background: var(--bg-paper);
  color: var(--fg-1);
  cursor: pointer;
}
.cs__btn:hover { border-color: var(--border-3); }
/* The ERRORED twin, the way `.fld--frozen .cs__btn` in shell.css is the frozen
   one. app-shell.css's `.fld [aria-invalid="true"]` already paints the rose inset
   ring here — the button sits inside the `.fld`, and custom-select.js mirrors the
   attribute across from the hidden native select. What that rule cannot fix is the
   BORDER: `.cs__btn` carries a real 1px one where `.fld select` has `border: 0`, so
   without this a grey hairline sits outside the rose ring.
   ORDER IS LOAD-BEARING: this, `:focus-visible` and `.cs.is-open .cs__btn` are all
   (0,2,0), so source order decides between them. Keep it ABOVE both — below, an
   errored select would lose its focus ring, trading one a11y defect for another. */
.cs__btn[aria-invalid="true"] { border-color: var(--enroute-rose-500); }
.cs__btn:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--focus-ring);
}
.cs.is-open .cs__btn {
  border-color: var(--brand);
  box-shadow: var(--focus-ring);
}
.cs.is-disabled { opacity: 0.6; }
.cs__btn:disabled { cursor: not-allowed; }

.cs__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* An empty / placeholder value reads muted, like a real select's placeholder. */
.cs__label--placeholder { color: var(--fg-3); }

.cs__chev {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--fg-3);
  transition: transform 0.12s ease;
}
.cs.is-open .cs__chev { transform: rotate(180deg); }

/* Popup listbox — mirrors .ol-ms__panel.

   frontend-forms SP5: the panel is now the `.enr-popover` shell around this
   list (architecture §4.5 "the select as a popover") — `overlay-position.js`
   positions the SHELL (fixed, viewport-clamped, the same containing-block
   trap this comment used to document for `.cs__list` itself no longer
   applies here) and `.enr-popover` (overlays.css) supplies the surface:
   background, border, radius, shadow, max-height and its own scroll. This
   sheet keeps only the LIST's own chrome — layout and row spacing — never
   position/left/top/max-height/background/border, which would fight the
   shell or double it. `.cs__list`'s `hidden` stays the published mirror of
   the popover's own `hidden` (select-panel.js keeps the two in lockstep) so
   every frozen `.cs` suite reading `.cs__list[hidden]` keeps working. */
.cs__list {
  display: flex;
  flex-direction: column;
}
.cs__list[hidden] { display: none; }

/* One option row — mirrors .ol-ms__opt (44px touch target). */
.cs__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 12px;
  font-size: 13.5px;
  color: var(--fg-1);
  cursor: pointer;
}
.cs__opt[hidden] { display: none; }
.cs__opt-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Keyboard/pointer highlight. */
.cs__opt.is-active { background: var(--bg-sunken); }
/* The current selection: soft brand tint + a visible tick. */
.cs__opt.is-selected {
  color: var(--fg-1);
  font-weight: 600;
  background: var(--enroute-green-50);
}
/* Drawn here rather than shipped as an inline `<svg><path>` per row: the rows
   are pre-built at enhance, so the markup version cost two extra elements on
   every option of every select on the page (5,000 on the §10 dense page). The
   tick is the classic two-border-corner check, rotated 45deg. */
.cs__opt-tick {
  flex: 0 0 auto;
  display: inline-block;
  box-sizing: border-box;
  width: 0.45rem;
  height: 0.7rem;
  margin-inline-end: var(--space-1);
  border: 0 solid var(--brand);
  border-right-width: 2px;
  border-bottom-width: 2px;
  transform: rotate(45deg);
  color: var(--brand);
  visibility: hidden;
}
.cs__opt.is-selected .cs__opt-tick { visibility: visible; }
/* A disabled/filtered-out option (dependent-dropdown JS) reads inert. */
.cs__opt.is-disabled {
  color: var(--fg-3);
  cursor: not-allowed;
  opacity: 0.55;
}
.cs__opt.is-disabled.is-active { background: transparent; }

/* ---------- multi mode (frontend-forms SP5) ----------
   Lifted from pages/orders-list.css's .ol-ms__actions/__act/__summary
   (:409-536, removed there) — the same look, generalised onto `.cs`. The
   summary text itself needs no rule of its own: `.cs__summary` stacks with
   `.cs__label` on the same span (X-B01 reads `.cs__label` in both modes),
   so it inherits that box. */
.cs__actions {
  display: flex;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-1);
  flex: 0 0 auto;
}
.cs__action {
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  /* green-700 (not the lighter brand-500) so this small text clears AA
     4.5:1 on the white panel (brand-500 is only ~3.1:1). */
  color: var(--brand-press);
  background: none;
  border: 0;
  padding: 2px 0;
  cursor: pointer;
}
.cs__action:hover { color: var(--enroute-green-800); text-decoration: underline; }
.cs__action:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 4px;
}
.cs__action:disabled {
  color: var(--fg-3);
  cursor: not-allowed;
  text-decoration: none;
}