/* ============================================================================
   Blueshift — Custom dropdowns (stay-open selects, with type-to-filter)
   ----------------------------------------------------------------------------
   Styling for dropdowns.js, which upgrades native <select> elements into
   DOM-based dropdowns that stay open until you click away (a native <select>
   popup is drawn by the OS and closes the moment the window loses focus).
   Long lists (12+ options) get a search box at the top.

   Colors use each page's own CSS variables (with fallbacks) so the dropdown
   matches whatever theme/palette the page already uses.
   ========================================================================== */
.cdd{position:relative;display:inline-block;width:100%;vertical-align:middle}
/* the real <select> stays in the DOM (value + events intact) but hidden */
select.cdd-native{position:absolute!important;left:0;top:0;width:1px;height:1px;
  opacity:0;margin:0;padding:0;border:0;pointer-events:none;clip:rect(0 0 0 0);overflow:hidden}

.cdd-btn{box-sizing:border-box;width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
  background:var(--bg3,var(--panel,#1f1f27));color:var(--text,#e8e6e0);
  border:1px solid var(--border,rgba(255,255,255,0.16));border-radius:var(--radius,6px);
  font:inherit;font-size:inherit;line-height:1.4;text-align:left;padding:5px 8px;cursor:pointer;
  white-space:nowrap;overflow:hidden;-webkit-app-region:no-drag}
.cdd-btn:hover{border-color:var(--border-bright,var(--border2,rgba(255,255,255,0.28)))}
.cdd-btn:focus{outline:none;border-color:var(--accent,var(--gold,var(--border-bright,#5b9bd5)))}
.cdd-btn[disabled]{opacity:.5;cursor:default}
.cdd-btn .cdd-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto}
.cdd-btn .cdd-caret{flex:none;opacity:.7;font-size:.7em;transform:translateY(1px)}
.cdd-open .cdd-btn .cdd-caret{transform:rotate(180deg) translateY(-1px)}

/* the popup list is portaled to <body> and positioned with fixed coords */
.cdd-panel{position:fixed;z-index:99999;min-width:160px;max-height:300px;overflow-y:auto;
  background:var(--panel,var(--bg2,#17171c));color:var(--text,#e8e6e0);
  border:1px solid var(--border-bright,var(--border2,var(--border,rgba(255,255,255,0.22))));
  border-radius:var(--radius,6px);box-shadow:0 12px 34px rgba(0,0,0,0.55);padding:4px;
  font:inherit;-webkit-app-region:no-drag}
.cdd-search{position:sticky;top:0;background:var(--panel,var(--bg2,#17171c));padding:2px 2px 6px;z-index:1}
.cdd-search input{box-sizing:border-box;width:100%;background:var(--bg,var(--bg3,#0e0e12));color:var(--text,#e8e6e0);
  border:1px solid var(--border,rgba(255,255,255,0.16));border-radius:4px;padding:6px 8px;font:inherit;font-size:13px;outline:none}
.cdd-search input:focus{border-color:var(--accent,var(--gold,var(--border-bright,#5b9bd5)))}
.cdd-opt{padding:6px 9px;border-radius:4px;cursor:pointer;white-space:nowrap;font-size:13px;line-height:1.35}
.cdd-opt:hover,.cdd-opt.cdd-active{background:var(--bg4,var(--panel2,rgba(255,255,255,0.10)))}
.cdd-opt[aria-selected="true"]{color:var(--accent,var(--gold,#c8a84b));font-weight:600}
.cdd-opt.cdd-disabled{opacity:.45;cursor:default;pointer-events:none}
.cdd-group{opacity:.6;font-size:11px;text-transform:uppercase;letter-spacing:1px;padding:8px 9px 3px;cursor:default;pointer-events:none}
.cdd-empty{padding:8px 9px;opacity:.6;font-size:12px;font-style:italic}
