/* ProNick-themed dropdowns, once, for every dashboard page.
 *
 * A native <select> renders its option list with the *operating system's*
 * widget, not the page's stylesheet. No amount of CSS on the <select> reaches
 * it: on Windows that list is a grey system menu, on a phone it is a bottom
 * sheet. So every picker on the dashboard - roles, channels, actions - opened
 * into something that looked nothing like the site around it.
 *
 * The only way to style the list is to draw it ourselves, which is what
 * pnselect.js does. The native <select> stays in the DOM and stays the source
 * of truth, so every page's existing `select.value` / `selectedIndex` code
 * keeps working untouched; it is only moved out of sight.
 *
 * Variables are read with fallbacks because the templates do not agree on
 * their names - the older pages use --pn-surface2 / --pn-border, the newer
 * ones --surface-2 / --border. Naming both here is cheaper than renaming them
 * in fourteen stylesheets.
 */

.pnsel-host {
  position: relative;
  display: block;
  width: 100%;
}

/* The real control. Kept in the DOM and kept accessible to assistive tech
   through the trigger's aria-*, but never painted: `display:none` would drop
   it out of form submission on the pages that still use one. */
select.pnsel-native {
  position: absolute !important;
  opacity: 0 !important;
  width: 100% !important;
  height: 100% !important;
  inset: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  pointer-events: none !important;
  -webkit-appearance: none;
  appearance: none;
}

.pnsel-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 9px 38px 9px 14px;
  font: inherit;
  font-size: 0.92rem;
  text-align: left;
  color: var(--text, var(--pn-text, #eef1fb));
  background: var(--surface-2, var(--pn-surface2, rgba(28, 35, 58, 0.72)));
  border: 1px solid var(--border, var(--pn-border, rgba(120, 130, 200, 0.22)));
  border-radius: 12px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  position: relative;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.pnsel-trigger:hover {
  border-color: rgba(120, 130, 200, 0.45);
  background: rgba(38, 47, 76, 0.92);
}

.pnsel-host.is-open .pnsel-trigger,
.pnsel-trigger:focus-visible {
  outline: none;
  border-color: #5b8bff;
  box-shadow: 0 0 0 3px rgba(91, 139, 255, 0.18);
}

.pnsel-label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* An unchosen picker should not read like a chosen one. */
.pnsel-host.is-empty .pnsel-label { color: var(--muted, var(--pn-muted, #9aa3c4)); }

.pnsel-caret {
  position: absolute;
  right: 14px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 2px solid var(--muted, var(--pn-muted, #9aa3c4));
  border-bottom: 2px solid var(--muted, var(--pn-muted, #9aa3c4));
  transform: rotate(45deg);
  transition: transform .18s ease;
  pointer-events: none;
}

.pnsel-host.is-open .pnsel-caret {
  transform: rotate(-135deg);
  margin-top: -2px;
}

.pnsel-host.is-disabled { opacity: .55; }
.pnsel-host.is-disabled .pnsel-trigger { cursor: not-allowed; }

/* ---- the list ------------------------------------------------------------
 * Appended to <body> rather than next to the trigger and positioned from
 * script. A popup nested inside the field is clipped by every ancestor with
 * `overflow:hidden` or its own stacking context - which on these pages is the
 * card, the modal and the sidebar's blur layer, all three.
 */
.pnsel-pop {
  position: absolute;
  z-index: 3000;
  min-width: 180px;
  max-height: 320px;
  display: flex;
  flex-direction: column;
  padding: 6px;
  /* Opaque, deliberately, and NOT var(--pn-surface).
   *
   * Half the pages define --surface-solid (#141a30) and half define only
   * --pn-surface, which is rgba(22,28,48,0.6) - a *card* colour, meant to sit
   * translucently over the page's own gradient. Falling back to it painted the
   * floating menu at 60% opacity, so the form behind showed straight through
   * the list of roles and the whole thing read as disabled.
   *
   * A menu that floats over content has to be opaque whatever the page calls
   * its surfaces, so the fallback here is a colour and not another variable. */
  background: var(--surface-solid, #141a30);
  border: 1px solid var(--border, var(--pn-border, rgba(120, 130, 200, 0.28)));
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(3, 6, 18, 0.62);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .14s ease, transform .14s ease;
}

.pnsel-pop.is-shown { opacity: 1; transform: translateY(0); }

.pnsel-search {
  flex: 0 0 auto;
  width: 100%;
  margin-bottom: 6px;
  padding: 8px 12px;
  font: inherit;
  font-size: 0.88rem;
  color: var(--text, var(--pn-text, #eef1fb));
  background: rgba(10, 14, 26, 0.6);
  border: 1px solid var(--border, var(--pn-border, rgba(120, 130, 200, 0.22)));
  border-radius: 10px;
}

.pnsel-search:focus {
  outline: none;
  border-color: #5b8bff;
}

.pnsel-search::placeholder { color: var(--muted, var(--pn-muted, #9aa3c4)); }

.pnsel-list {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(120, 130, 200, 0.4) transparent;
}

.pnsel-list::-webkit-scrollbar { width: 8px; }
.pnsel-list::-webkit-scrollbar-thumb {
  background: rgba(120, 130, 200, 0.35);
  border-radius: 8px;
}

.pnsel-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 0.9rem;
  color: var(--text, var(--pn-text, #eef1fb));
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pnsel-opt[data-placeholder="1"] { color: var(--muted, var(--pn-muted, #9aa3c4)); }

.pnsel-opt.is-active { background: rgba(120, 130, 200, 0.16); }

.pnsel-opt.is-selected {
  background: linear-gradient(100deg, rgba(91, 139, 255, 0.24), rgba(139, 92, 246, 0.24));
  color: #fff;
  font-weight: 600;
}

.pnsel-opt.is-disabled { opacity: .45; cursor: not-allowed; }

/* A group heading from <optgroup>. */
.pnsel-group {
  padding: 10px 12px 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted, var(--pn-muted, #9aa3c4));
}

.pnsel-empty {
  padding: 14px 12px;
  font-size: 0.85rem;
  text-align: center;
  color: var(--muted, var(--pn-muted, #9aa3c4));
}

/* A channel or role name is content, not chrome: always laid out in its own
   direction inside an RTL page. */
.pnsel-opt > span,
.pnsel-label { unicode-bidi: plaintext; }

@media (prefers-reduced-motion: reduce) {
  .pnsel-pop, .pnsel-caret { transition: none !important; }
}
