/* ══ Reusable Apple-style dropdown (shared component) ══
   Markup: .ui-select > (hidden input, optional) + .ui-select-trigger + .ui-select-menu
   with .ui-select-option[data-value][data-label] children.
   Set data-onchange="fnName" on .ui-select to fire a callback on pick.
   JS: uiSelectToggle / uiSelectPick / uiSelectSet in static/js/ui-select.js.

   This file used to be six near-identical copies pasted into index.html,
   lab.html, login.html, owner.html, pharmacy.html and reception.html, which
   had already drifted (18 to 36 rules, slightly different sizing) by the time
   they were consolidated. Every colour here is a CSS custom property with a
   fallback chain, not a literal -- the six pages that use this file define
   their palette under different token names (--accent vs --green, --border2
   vs --border, --surface undefined vs defined), and this is the ONE file
   that has to work correctly across all of them, including console.html's
   dark theme, which none of the six original copies were ever written for.
   --surface in particular used to be hard-coded "#fff" in every copy, which
   would have painted a white box on console's dark background -- caught
   before this file shipped, not after.

   Legitimate per-page differences (login.html's full-width layout with an
   icon+label sub-structure, owner.html's slightly larger touch targets,
   lab.html/reception.html's right-anchored menu) are NOT in this file --
   they stay as small local override blocks in those templates, each
   commented with why. This file holds only what was genuinely identical
   boilerplate: the chevron rotation, the menu's shadow/radius/transition
   curve, and the option hover/selected/check-mark pattern. */

.ui-select {
  position: relative;
  display: inline-block;
  font-family: var(--font, 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
}
.ui-select-trigger {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
  min-width: 150px; padding: 7px 13px;
  background: var(--surface, #fff);
  border: 1px solid var(--border2, var(--border, #d2d2d7));
  border-radius: 10px; font-family: inherit; font-size: 0.82rem; font-weight: 500;
  color: var(--text, #1d1d1f); cursor: pointer; outline: none; transition: all 0.15s; user-select: none;
}
.ui-select-trigger:hover { background: var(--bg, #f4f7f6); }
.ui-select.open .ui-select-trigger {
  border-color: var(--accent, #0DFFAC);
  box-shadow: 0 0 0 3px var(--accent-light, rgba(13,255,172,.18));
}
.ui-select-chevron { width: 15px; height: 15px; color: var(--text2, #86868b); transition: transform 0.2s; flex-shrink: 0; }
.ui-select.open .ui-select-chevron { transform: rotate(180deg); }
.ui-select-menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 100%;
  background: var(--surface, #fff);
  border: 1px solid var(--border2, var(--border, #d2d2d7));
  border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.12);
  overflow: hidden; z-index: 400; opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.ui-select.open .ui-select-menu { opacity: 1; transform: none; pointer-events: auto; }
.ui-select-option {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 14px;
  font-size: 0.82rem; color: var(--text, #1d1d1f); cursor: pointer; white-space: nowrap;
  transition: background 0.12s;
  border-bottom: 1px solid var(--border2, var(--border, #d2d2d7));
}
.ui-select-option:last-child { border-bottom: none; }
.ui-select-option:hover { background: var(--bg, #f4f7f6); }
.ui-select-option.selected { color: var(--accent, #0DFFAC); font-weight: 600; }
.ui-select-check { width: 15px; height: 15px; opacity: 0; flex-shrink: 0; }
.ui-select-option.selected .ui-select-check { opacity: 1; }