/* Progressive-enhancement custom listbox for every native <select> in the app.
   See shared/ui/select-enhancer.js — the native <select> stays in the DOM
   (for form submission, validation and existing change-event listeners) but
   is visually replaced by this minimal trigger + panel. */
.ui-select-wrap{position:relative;width:100%}
.ui-select-native{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none;z-index:-1}
.ui-select-trigger{
  width:100%;min-height:44px;border:1px solid #ccc;border-radius:12px;background:#fff;
  padding:11px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;
  text-align:left;font:inherit;color:inherit;cursor:pointer;
  transition:border-color var(--motion-fast) var(--ease-standard),box-shadow var(--motion-fast) var(--ease-standard);
}
.ui-select-trigger:hover{border-color:#999}
.ui-select-trigger[aria-expanded="true"]{border-color:#000;box-shadow:0 0 0 3px rgba(0,0,0,.06)}
.ui-select-trigger:focus-visible{outline:2px solid #000;outline-offset:2px}
.ui-select-trigger:disabled{cursor:not-allowed;opacity:.45}
.ui-select-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-select-value.is-placeholder{color:#8a8a8a}
.ui-select-arrow{flex:none;display:flex;color:#666;transition:transform var(--motion-fast) var(--ease-standard)}
.ui-select-arrow svg{width:13px;height:13px}
.ui-select-trigger[aria-expanded="true"] .ui-select-arrow{transform:rotate(180deg)}
.ui-select-panel{
  position:fixed;z-index:960;margin:0;padding:5px;list-style:none;
  background:#fff;border:1px solid #e4e4e4;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.12);
  max-height:260px;overflow:auto;scrollbar-width:thin;scrollbar-color:#d4d4d4 transparent;
  animation:ui-select-panel-in .14s cubic-bezier(.16,1,.3,1) both;
}
.ui-select-panel[hidden]{display:none}
/* Top-layer popover: drop the UA popover box (inset:0 + margin:auto centering). */
.ui-select-panel[popover]{inset:auto;margin:0}
@keyframes ui-select-panel-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.ui-select-option{
  width:100%;border:0;background:transparent;border-radius:8px;padding:9px 10px;cursor:pointer;
  font-size:var(--fs-base);font-weight:var(--fw-bold);text-align:left;color:#333;
  transition:background-color .12s ease;
}
.ui-select-option:hover,.ui-select-option.is-active{background:#f2f2f2}
.ui-select-option[aria-selected="true"]{color:#000;background:#f5f5f5}
.ui-select-option:disabled,.ui-select-option[aria-disabled="true"]{color:#bbb;cursor:not-allowed}
@media(prefers-reduced-motion:reduce){.ui-select-panel{animation:none}}