/* Searchable dropdowns (static/js/select-combo.js). The field looks like what it is: a bordered control with a visible
   chevron button on the right, a hover/open state, and a panel with a search box. Loaded after app-modern.css. */

.sc { position: relative; display: block; min-width: 0; }
.sc-inline { display: inline-block; vertical-align: bottom; }

/* the real <select> stays as the source of truth, invisible, exactly over the trigger (so validation bubbles anchor there) */
.sc-native { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; margin: 0;
  opacity: 0; pointer-events: none; }

.sc-trigger {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; margin: 0;
  padding: 11px 6px 11px 16px; text-align: left; cursor: pointer;
  font: inherit; font-size: 15px; color: var(--color-fg);
  background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: 14px; box-shadow: var(--shadow-xs);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), background-color .16s var(--ease);
}
.sc-trigger:hover:not(:disabled) { border-color: #8b8b96; background: #fcfcfd; }
.sc-trigger:focus-visible, .sc-trigger.is-open { outline: none; border-color: var(--color-fg); box-shadow: var(--ring); }
.sc-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-trigger.sc-empty .sc-label { color: var(--color-muted-fg); }

/* the chevron sits in its own tinted "button" so the control reads as a dropdown at a glance */
.sc-chev { flex: none; box-sizing: content-box; padding: 5px; border-radius: 9px; background: var(--color-surface-2);
  color: var(--color-fg-soft); transition: transform .18s var(--ease), background-color .16s, color .16s; }
.sc-trigger:hover:not(:disabled) .sc-chev { background: var(--color-surface-3); color: var(--color-fg); }
.sc-trigger.is-open .sc-chev { transform: rotate(180deg); background: var(--color-fg); color: #fff; }

.sc-trigger:disabled { cursor: not-allowed; background: var(--color-surface-2); color: var(--color-muted-fg); box-shadow: none; }
.sc-trigger:disabled .sc-chev { opacity: .5; }

/* loading: spinner instead of the chevron's tint, text stays readable ("Loading expiries…") */
.sc-spin { display: none; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--color-border-strong);
  border-top-color: var(--color-fg); animation: sc-spin .8s linear infinite; }
.sc-trigger.is-loading .sc-spin { display: block; }
.sc-trigger.is-loading { cursor: progress; background: var(--color-surface-2); }
.sc-trigger.is-loading .sc-label { color: var(--color-muted-fg); }
@keyframes sc-spin { to { transform: rotate(360deg); } }

select[aria-invalid="true"] + .sc-trigger, .sc:has(select[aria-invalid="true"]) .sc-trigger { border-color: var(--color-danger); }

/* the panel */
.sc-panel {
  position: fixed; z-index: 1000; display: flex; flex-direction: column; overflow: hidden;
  background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: 16px; box-shadow: var(--shadow-lg);
  animation: combo-in .14s var(--ease) both;
}
.sc-panel[hidden] { display: none; }
.sc-search { padding: 10px 10px 6px; border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.sc-input { width: 100%; padding: 10px 14px 10px 38px; font: inherit; font-size: 14px; color: var(--color-fg);
  background: var(--color-surface-2) 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='%235f5f68' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 13px center;
  border: 1px solid transparent; border-radius: 11px; box-shadow: none; }
.sc-input:focus { outline: none; border-color: var(--color-fg); background-color: var(--color-surface); box-shadow: none; }
.sc-list { margin: 0; padding: 6px; list-style: none; overflow-y: auto; flex: 1 1 auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--color-border-strong) transparent; }
.sc-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; padding: 8px 12px;
  border-radius: 10px; cursor: pointer; color: var(--color-fg); font-size: 14.5px; }
.sc-opt.is-active { background: var(--color-surface-2); }
.sc-opt.is-current { font-family: var(--font-heading); }
.sc-opt.is-disabled { color: var(--color-muted-fg); opacity: .6; cursor: not-allowed; }
.sc-opt mark { background: none; color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.sc-tick { color: #12a150; font-size: .95rem; flex: none; }
.sc-group { padding: 10px 12px 4px; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted-fg); }
.sc-hint { padding: 8px 12px 6px; font-size: .8rem; color: var(--color-muted-fg); }
.sc-foot { padding: 6px 14px 9px; font-size: .76rem; color: var(--color-muted-fg); min-height: 0; }
.sc-foot:empty { display: none; }

/* the instrument search box is a text field with its own list - give it the same dropdown cue */
.combo { position: relative; }
.combo > input[type="text"] { padding-right: 46px; }
.combo::after { content: ""; position: absolute; right: 10px; top: 0; width: 28px; height: 46px; pointer-events: none;
  background: var(--color-surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m5 8 5 5 5-5' stroke='%233a3a41' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
  background-size: 18px; border-radius: 9px; transform: scale(.86); transform-origin: center; height: 34px; margin-top: 6px; }

/* status lines under chain-driven fields: loading / error / retry */
.is-loading-text::before { content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 8px; vertical-align: -1px;
  border-radius: 50%; border: 2px solid var(--color-border-strong); border-top-color: var(--color-fg); animation: sc-spin .8s linear infinite; }
.link-btn { padding: 0; border: 0; background: none; font: inherit; color: var(--color-fg); text-decoration: underline; cursor: pointer; }

@media (prefers-reduced-motion: reduce) { .sc-spin, .is-loading-text::before { animation-duration: 2.4s; } .sc-panel { animation: none; } }
@media (max-width: 640px) { .sc-panel { border-radius: 14px; } .sc-trigger { min-height: 48px; } }