/* ============================================================
   NGIS Select — shared component (Sprint v0.18.7, v2 design).
   Drop-in replacement for native <select>. Visual language taken
   directly from the inline-edit pattern on /portal/organization:
   solid backgrounds, teal-bright accents where they matter,
   no transparency theatrics, no glassmorphism.

   Bugfixes vs v1:
     - Native <select> hidden via display:none (form-submit still
       works per HTML spec). No more inline-style fights with page CSS.
     - Popover z-index 1000 — wins against page-level stacking contexts.
     - Solid background var(--ink-1), no rgba leak.
     - Auto-flip when popover would overflow viewport bottom.

   Mockup: /static/_mockup/ngis-select-v2.html
   ============================================================ */
.ngis-select { position: relative; width: 100%; }

/* Hide the native <select> bulletproof. Form-submit still works
   because HTML form serialisation includes display:none controls. */
.ngis-select > select { display: none; }

.ngis-select-trigger {
  /* Exact same metrics as .form-select / .form-input */
  width: 100%;
  padding: 11px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  font-size: 14px;
  font-family: var(--font-body, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif);
  text-align: left;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  outline: none;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
/* Hover — same vocabulary as edit-cancel:hover */
.ngis-select-trigger:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
}
/* Focus + Open — identical ring as .form-input:focus */
.ngis-select-trigger:focus-visible,
.ngis-select[data-open="true"] .ngis-select-trigger {
  border-color: var(--teal, #04918E);
  box-shadow: 0 0 0 3px rgba(4,145,142,0.15);
}
.ngis-select-value {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ngis-select-value.is-placeholder { color: var(--text-faint, #5A6278); }
.ngis-select-chevron {
  width: 14px; height: 14px;
  color: var(--text-dim, #8A92A6);
  transition: transform .2s ease, color .2s ease;
  flex-shrink: 0;
}
.ngis-select[data-open="true"] .ngis-select-chevron {
  transform: rotate(180deg);
  color: var(--teal-bright, #0BB4B0);
}

/* Popover — SOLID background, no blur, no fancy shadow.
   At runtime JS portals the menu to document.body and switches to
   position:fixed with computed coords. That bypasses every parent
   transform/will-change/opacity stacking-context — z-index always wins.
   The absolute fallback below only applies if JS hasn't run yet. */
.ngis-select-menu {
  position: absolute;
  top: calc(100% + 4px); left: 0; right: 0;
  z-index: 2147483000;  /* near-max int — beat any stacking-context */
  background: var(--ink-1, #0A0E1A);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 5px;
  max-height: 280px;
  overflow-y: auto;
  list-style: none; margin: 0;
  box-shadow: 0 10px 24px -12px rgba(0,0,0,0.6);
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
}
/* Auto-flip (absolute fallback only — when JS not active) */
.ngis-select[data-position="above"] .ngis-select-menu {
  top: auto; bottom: calc(100% + 4px);
  transform: translateY(4px);
}
/* Open state — applies regardless of portal location.
   JS adds .is-open directly to the menu so the rule still matches
   after the menu has been moved to document.body. */
.ngis-select-menu.is-open,
.ngis-select[data-open="true"] .ngis-select-menu {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}

.ngis-select-option {
  padding: 9px 12px;
  border-radius: 7px;
  color: var(--text, #EDEFF5);
  font-size: 14px;
  cursor: pointer;
  position: relative;
  display: flex; align-items: center; gap: 10px;
  transition: background .1s ease, color .1s ease;
  user-select: none;
}
.ngis-select-option:hover,
.ngis-select-option.is-highlighted {
  background: rgba(255,255,255,0.08);
}
/* Selected — SAME SOLID FILL as Save-button: teal-bright + black text.
   But: if the selected option is a placeholder (empty value), don't
   apply the strong teal fill — it would look like a real commitment. */
.ngis-select-option.is-selected:not(.is-placeholder-option) {
  background: var(--teal-bright, #0BB4B0);
  color: #000;
  font-weight: 600;
}
.ngis-select-option.is-selected:not(.is-placeholder-option):hover,
.ngis-select-option.is-selected:not(.is-placeholder-option).is-highlighted {
  background: #5FF0EC;
}
/* Placeholder option (value="") — show as muted, even when "selected" */
.ngis-select-option.is-placeholder-option {
  color: var(--text-faint, #5A6278);
  font-style: italic;
}
.ngis-select-option.is-disabled {
  color: var(--text-faint, #5A6278); cursor: not-allowed;
}
.ngis-select-option.is-disabled:hover { background: transparent; }

/* Discreet scrollbar */
.ngis-select-menu::-webkit-scrollbar { width: 8px; }
.ngis-select-menu::-webkit-scrollbar-track { background: transparent; }
.ngis-select-menu::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08); border-radius: 4px;
}
.ngis-select-menu::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.16);
}