/* ========================================================
   Site-wide dropdown styling (every <select>) + the styled popup list drawn by ui-select.js
   Opt a dropdown out with the data-native attribute. Multi-selects and list boxes are left alone.
   ======================================================== */
/*
 * One look for every dropdown on the site. The visual properties below win over page stylesheets (!important),
 * so a dropdown looks the same in the admin portal, the staff portal and on public pages.
 * Pages still decide layout: width, margins and the LEFT padding (dropdowns with an icon inside need extra room).
 */
:where(select:not([multiple]):not([size]):not([data-native])) {
  padding-left: 0.9rem;   /* low specificity on purpose: icon wrappers override it */
}
select:not([multiple]):not([size]):not([data-native]) {
  -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important;
  box-sizing: border-box !important;
  min-height: 42px !important;
  padding-top: 0.55rem !important;
  padding-bottom: 0.55rem !important;
  padding-right: 2.5rem !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 10px !important;
  background-color: #ffffff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1.5 1.75 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.95rem center !important;
  background-size: 12px 8px !important;
  color: #0f172a !important;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 0.92rem !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
select:not([multiple]):not([size]):not([data-native]):hover:not(:disabled) { border-color: #94a3b8 !important; }
select:not([multiple]):not([size]):not([data-native]):focus,
select:not([multiple]):not([size]):not([data-native])[aria-expanded="true"] {
  outline: none !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.16) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none' stroke='%231e3a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1.5 1.75 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E") !important;
}
select:not([multiple]):not([size]):not([data-native]):disabled { cursor: not-allowed; opacity: 0.6; background-color: #f1f5f9 !important; }
/* Validation states still show through */
.has-error select:not([multiple]):not([size]):not([data-native]), select:not([multiple]):not([size]):not([data-native])[aria-invalid="true"] { border-color: #f87171 !important; }
.is-changed select:not([multiple]):not([size]):not([data-native]) { border-color: #f59e0b !important; }
/* 16px on phones stops iOS from zooming into the page when a dropdown is tapped */
@media (max-width: 768px) { select:not([multiple]):not([size]):not([data-native]) { font-size: 16px !important; } }
select:not([multiple]):not([size]):not([data-native]):invalid { color: #64748b !important; }          /* placeholder option (value="") looks muted */
select:not([multiple]):not([size]):not([data-native]) option { color: #0f172a; background: #fff; }
select:not([multiple]):not([size]):not([data-native]) option:disabled { color: #94a3b8; }
select::-ms-expand { display: none; }

/* inside narrow flex toolbars the dropdown may shrink instead of overflowing */
select:not([multiple]):not([size]) { max-width: 100%; }

/* ── the popup list ── */
.ui-pop [hidden] { display: none !important; }
.ui-pop {
  position: fixed; z-index: 2147483000; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden;
  min-width: 180px; max-width: min(92vw, 520px);
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
  box-shadow: 0 24px 48px -16px rgba(15, 23, 42, 0.35), 0 4px 12px rgba(15, 23, 42, 0.08);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-size: 0.92rem; color: #0f172a;
  transform-origin: top center; animation: uiPopIn .14s ease-out both;
}
.ui-pop.up { transform-origin: bottom center; }
@keyframes uiPopIn { from { transform: translateY(-4px) scale(.98); } to { transform: none; } }
.ui-pop-search { flex: none; padding: 0.55rem; border-bottom: 1px solid #f1f5f9; background: #f8fafc; }
.ui-pop-search input {
  width: 100%; box-sizing: border-box; min-height: 36px; padding: 0.4rem 0.7rem 0.4rem 2rem;
  border: 1.5px solid #e2e8f0; border-radius: 8px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath d='m10 10 3 3'/%3E%3C/svg%3E") no-repeat 0.65rem center;
  font: inherit; font-size: 0.86rem; color: #0f172a;
}
.ui-pop-search input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, .15); }
.ui-pop-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0.35rem; margin: 0; list-style: none; scrollbar-width: thin; }
.ui-opt { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.7rem; border-radius: 9px; cursor: pointer; line-height: 1.3; }
.ui-opt > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ui-opt.active { background: #eff6ff; }
.ui-opt[aria-selected="true"] { font-weight: 600; color: #1e3a8a; }
.ui-opt[aria-selected="true"]::after { content: ""; flex: none; width: 14px; height: 14px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%231e3a8a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 7.5 3.5 3.5L12 3.5'/%3E%3C/svg%3E"); }
.ui-opt.placeholder { color: #94a3b8; }
.ui-opt[aria-disabled="true"] { color: #cbd5e1; cursor: not-allowed; }
.ui-group { padding: 0.55rem 0.7rem 0.25rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #94a3b8; }
.ui-empty { padding: 1rem; text-align: center; color: #94a3b8; font-size: 0.86rem; }
@media (prefers-reduced-motion: reduce) { .ui-pop { animation: none; } select:not([multiple]):not([size]) { transition: none; } }