/* ── Custom Select component ──────────────────────────────────
   Drop-in replacement for <select> elements.
   Usage: add data-custom-select to any <select> and call
   initCustomSelect(el) — or use initAllCustomSelects().
   The native <select> stays in the DOM (hidden) so all
   existing .value reads and onchange handlers keep working.
──────────────────────────────────────────────────────────── */

.cs-wrap {
  position: relative;
  display: inline-flex;
  flex-direction: column;
}

/* ── Trigger button ───────────────────────────────────────── */

.cs-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-control, 10px);
  color: var(--muted-text, #a6b1ad);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2px;
  padding: 7px 10px 7px 12px;
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
  transition: border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  min-width: 80px;
  user-select: none;
}

.cs-trigger:hover {
  border-color: rgba(var(--accent-rgb), 0.4);
  color: var(--text, #f0f3f1);
}

.cs-wrap.cs-open .cs-trigger {
  border-color: rgba(var(--accent-rgb), 0.6);
  color: var(--text, #f0f3f1);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.16);
}

.cs-label { flex: 1; }

.cs-chevron {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: #4a5552;
  transition: color 0.18s ease, transform 0.22s ease;
}

.cs-trigger:hover .cs-chevron,
.cs-wrap.cs-open .cs-chevron { color: var(--accent); }

.cs-chevron svg {
  width: 13px;
  height: 13px;
  display: block;
  transition: transform 0.22s ease;
}

.cs-wrap.cs-open .cs-chevron svg { transform: rotate(180deg); }

/* ── Dropdown panel ───────────────────────────────────────── */

.cs-panel {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  min-width: 100%;
  background: #15191a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 5px;
  list-style: none;
  margin: 0;
  z-index: 900;
  /* Long lists scroll instead of overflowing the viewport. Fixed-positioned
     panels get a precise max-height from positionPanel(); this is the baseline
     for absolutely-positioned ones. */
  max-height: 60vh;
  overflow-y: auto;
  box-shadow: 0 16px 40px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.3);
  animation: cs-drop-in 0.16s ease;
}

@keyframes cs-drop-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Options ─────────────────────────────────────────────── */

.cs-option {
  display: flex;
  align-items: center;
  gap: 8px;
  /* ~36px row: the dropdowns are used by finger on the Edge touchscreen. */
  padding: 10px 11px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted-text, #a6b1ad);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  white-space: nowrap;
}

.cs-option:hover {
  background: rgba(255,255,255,0.06);
  color: var(--text, #f0f3f1);
}

.cs-option.cs-selected {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
  font-weight: 700;
}

.cs-option.cs-selected::before {
  content: '';
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.7);
}

.cs-option:not(.cs-selected)::before {
  content: '';
  display: block;
  width: 5px;
  height: 5px;
  flex-shrink: 0;
}

/* ── Category header (from <optgroup label>) + per-option icon ──────── */
.cs-group {
  padding: 9px 11px 4px;
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-dim, #6b7a75); pointer-events: none; user-select: none;
}
.cs-group:first-child { padding-top: 2px; }
.cs-option-ico { display: inline-flex; flex-shrink: 0; color: rgb(var(--accent-rgb)); }
.cs-option-ico svg { width: 16px; height: 16px; }
.cs-option-label { flex: 1; min-width: 0; }
/* Opt-in second line (data-cs-note): what the option means, for names that
   don't say it themselves. Only ever rendered in the open list. */
.cs-option-note {
  display: block; margin-top: 2px;
  font-size: 11px; font-weight: 500; line-height: 1.35; opacity: 0.55;
}

/* Disabled "hint" row (e.g. an unconfigured service): non-selectable, muted,
   no hover affordance and no leading bullet — it reads as guidance, not a choice. */
.cs-option.cs-option-disabled,
.cs-option.cs-option-disabled:hover {
  cursor: default;
  background: none;
  color: var(--text-dim, #6b7a75);
  font-size: 0.78rem;
}
.cs-option.cs-option-disabled::before { display: none; }
.cs-option.cs-option-disabled .cs-option-ico { color: var(--text-dim, #6b7a75); }

/* Opt-in in-panel search box (data-cs-search) — a sticky filter row for long
   lists. Themed off the same panel/accent vars as the rest of the dropdown. */
.cs-search-wrap {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 4px 6px 6px;
  background: var(--panel, #15191a);
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.06));
}
.cs-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  font: inherit;
  font-size: 0.82rem;
  color: var(--text, #f0f3f1);
  background: var(--input-bg, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  border-radius: 6px;
  outline: none;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.cs-search-input:focus {
  border-color: rgba(var(--accent-rgb, 30, 215, 96), 0.5);
  background: var(--input-bg-focus, rgba(255, 255, 255, 0.08));
}