/* Custom dropdown (see ui-select.js). Uses the same colour variables as the three apps. */
.ui-select { position: relative; width: 100%; }
.ui-select-native { position: absolute !important; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }

.ui-select-button {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  font: inherit;
  font-size: 14px;
  color: var(--text-main, #f8fafc);
  background: var(--bg-panel, #18181b);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.12));
  border-radius: var(--radius-sm, 10px);
  cursor: pointer;
  text-align: right;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ui-select-button:hover { border-color: var(--border-active, var(--accent, #6366f1)); }
.ui-select-button:focus-visible,
.ui-select-button[aria-expanded="true"] {
  outline: none;
  border-color: var(--accent, #6366f1);
  box-shadow: 0 0 0 3px var(--accent-alpha, rgba(99, 102, 241, 0.18));
}
.ui-select-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-select-chevron { flex-shrink: 0; color: var(--text-sec, #94a3b8); transition: transform 0.2s ease; }
.ui-select-button[aria-expanded="true"] .ui-select-chevron { transform: rotate(180deg); }
.ui-select.is-disabled .ui-select-button { opacity: 0.55; cursor: not-allowed; }

.ui-select-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  transition: background 0.2s ease;
}
.ui-select-backdrop.is-visible { background: rgba(0, 0, 0, 0.5); }
.ui-select-backdrop.is-popover { background: transparent; display: block; }

.ui-select-sheet {
  width: 100%;
  max-width: 520px;
  max-height: min(70vh, 460px);
  display: flex;
  flex-direction: column;
  background: var(--bg-surface, var(--bg-panel, #18181b));
  color: var(--text-main, #f8fafc);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35);
  padding: 8px 10px calc(14px + env(safe-area-inset-bottom, 0px));
  transform: translateY(24px);
  opacity: 0;
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.ui-select-backdrop.is-visible .ui-select-sheet { transform: none; opacity: 1; }
.ui-select-sheet::before {
  content: '';
  align-self: center;
  width: 38px;
  height: 4px;
  margin: 4px 0 8px;
  border-radius: 99px;
  background: var(--border-subtle, rgba(255, 255, 255, 0.2));
}
.ui-select-backdrop.is-popover .ui-select-sheet {
  position: fixed;
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
  transform: translateY(-4px);
}
.ui-select-backdrop.is-popover .ui-select-sheet::before { display: none; }
.ui-select-title { padding: 4px 10px 10px; font-size: 13px; font-weight: 700; color: var(--text-sec, #94a3b8); }

.ui-select-list { overflow-y: auto; display: flex; flex-direction: column; gap: 4px; -webkit-overflow-scrolling: touch; }
.ui-select-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  line-height: 1.6;
  text-align: right;
  color: inherit;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
}
.ui-select-option:hover { background: var(--bg-hover, rgba(255, 255, 255, 0.06)); }
.ui-select-option.is-selected {
  background: var(--accent-alpha, rgba(99, 102, 241, 0.15));
  border-color: var(--accent, #6366f1);
  font-weight: 700;
}
.ui-select-option.is-disabled { opacity: 0.45; cursor: not-allowed; }
.ui-select-text { flex: 1; min-width: 0; }
.ui-select-radio {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--text-muted, #64748b);
  position: relative;
}
.ui-select-option.is-selected .ui-select-radio { border-color: var(--accent, #6366f1); }
.ui-select-option.is-selected .ui-select-radio::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--accent, #6366f1);
}