/* Styled dropdown for the site's cluster/server pickers.
 *
 * Progressive enhancement over a real <select>: the native element stays in the
 * DOM (hidden) and keeps being the value, so every existing `change` handler
 * and every form post keeps working. Only the visuals are replaced.
 *
 * Themed from the tokens each page already declares, with fallbacks so a page
 * that names them differently still renders correctly.
 */

.fsel { position: relative; display: inline-block; min-width: 180px; font-family: inherit; }
.fsel select.fsel-native { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }

.fsel-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: var(--card-bg2, var(--card-bg, #141414));
  border: 1px solid var(--border, rgba(255, 255, 255, .12));
  border-radius: 11px; padding: 11px 14px; cursor: pointer;
  color: var(--text-color, #fff); font-family: inherit; font-size: .88rem; font-weight: 700;
  text-align: left; line-height: 1.2; transition: border-color .2s, box-shadow .2s;
}
.fsel-btn:hover, .fsel.open .fsel-btn {
  border-color: var(--accent, #00e5ff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #00e5ff) 14%, transparent);
}
.fsel-btn:focus-visible { outline: none; border-color: var(--accent, #00e5ff); }
.fsel-ic { color: var(--accent-gold, #ffb800); font-size: .92rem; flex-shrink: 0; }
.fsel-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsel-meta {
  flex-shrink: 0; font-size: .68rem; font-weight: 800; letter-spacing: .4px;
  padding: 2px 9px; border-radius: 20px;
  background: color-mix(in srgb, var(--accent, #00e5ff) 16%, transparent);
  color: var(--accent, #00e5ff);
}
.fsel-caret { flex-shrink: 0; font-size: .62rem; color: var(--text-dim, #a1a1a1); transition: transform .22s; }
.fsel.open .fsel-caret { transform: rotate(180deg); }

.fsel-menu {
  position: absolute; z-index: 900; left: 0; right: 0; top: calc(100% + 8px);
  background: var(--card-bg, #121212);
  border: 1px solid var(--border, rgba(255, 255, 255, .12));
  border-radius: 13px; padding: 6px; margin: 0; list-style: none;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
  max-height: 320px; overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.fsel.open .fsel-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.fsel.drop-up .fsel-menu { top: auto; bottom: calc(100% + 8px); }

.fsel-menu li { margin: 0; }
.fsel-opt {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 10px 12px; border: none; background: none; border-radius: 9px;
  color: var(--text-dim, #cfcfcf); font-family: inherit; font-size: .85rem; font-weight: 700;
  cursor: pointer; text-align: left; transition: background .15s, color .15s, transform .15s;
}
.fsel-opt:hover, .fsel-opt.cursor {
  background: color-mix(in srgb, var(--accent, #00e5ff) 10%, transparent);
  color: var(--text-color, #fff); transform: translateX(2px);
}
.fsel-opt.on { background: color-mix(in srgb, var(--accent, #00e5ff) 16%, transparent); color: var(--text-color, #fff); }
.fsel-opt .fsel-ic { color: var(--accent, #00e5ff); }
.fsel-opt .fsel-label { flex: 1; }
.fsel-opt .fsel-check { color: var(--accent, #00e5ff); font-size: .72rem; }

html[data-theme="light"] .fsel-menu { box-shadow: 0 18px 44px rgba(20, 30, 60, .16); }
/* The menu opens over a card, so navy lifts it one step above --card-bg instead
 * of matching it, and the drop shadow loses its black in favour of navy ink. */
html[data-theme="navy"] .fsel-menu {
  background: var(--nv-raised);
  border-color: var(--nv-line-2);
  box-shadow: 0 18px 44px rgba(4, 10, 22, .55);
}