/*!
 * B-LineXpress — Pick. The select, drawn by us.
 *
 * The face inherits whatever the console already gives its inputs, so a picker
 * in Billing looks like Billing's fields and one in the Garage looks like the
 * Garage's, with no per-console rules. Only the open list is opinionated —
 * because until now nobody could style it at all.
 */
.blx-pick{ position:relative; display:block; width:100%; min-width:0; }
/* The real control stays in the form and in the DOM; it simply stops being
   the thing you look at. Not display:none, so it still focuses and validates. */
.blx-pick > select{
  position:absolute !important; opacity:0 !important; pointer-events:none !important;
  width:100% !important; height:100% !important; inset:0 !important;
  margin:0 !important; padding:0 !important; border:0 !important;
  min-height:0 !important; appearance:none !important;
}
.blx-pick .bp-face{
  display:flex; align-items:center; gap:8px; width:100%;
  font:inherit; text-align:left; cursor:pointer;
  /* Everything else — height, padding, radius, colours, border — is whatever
     the surrounding console already says an input is. */
  min-height:40px; padding:9px 12px; border-radius:10px;
  border:1px solid var(--line2,#cbd2da); background:var(--panel,#fff);
  color:var(--head,#111827); transition:border-color .15s, box-shadow .15s;
}
.blx-pick .bp-face:hover{ border-color:var(--gold,#b58a1a); }
.blx-pick .bp-face.open,
.blx-pick .bp-face:focus-visible{
  outline:none; border-color:var(--gold,#b58a1a);
  box-shadow:0 0 0 3px rgba(181,138,26,.16);
}
.blx-pick .bp-face[disabled]{ opacity:.55; cursor:default; }
.blx-pick .bp-t{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.blx-pick .bp-face.empty .bp-t{ color:var(--muted,#6b7280); }
.blx-pick .bp-c{
  flex:none; width:16px; height:16px; fill:none; stroke:currentColor;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;
  opacity:.6; transition:transform .18s ease;
}
.blx-pick .bp-face.open .bp-c{ transform:rotate(180deg); opacity:1; }

/* ---- the open list ---- */
.blx-pick-panel{
  position:fixed; z-index:200100; min-width:200px; max-width:min(460px,94vw);
  font-family:'Manrope',-apple-system,'Segoe UI',Roboto,sans-serif; font-size:13.5px;
  background:#fff; color:#3f4451;
  border:1px solid #cbd2da; border-radius:12px;
  box-shadow:0 26px 60px -22px rgba(16,24,40,.5), 0 2px 6px rgba(16,24,40,.08);
  opacity:0; transform:translateY(-6px) scale(.985); transform-origin:top center;
  transition:opacity .13s ease, transform .16s cubic-bezier(.22,.9,.28,1);
  overflow:hidden;
}
.blx-pick-panel.up{ transform-origin:bottom center; transform:translateY(6px) scale(.985); }
.blx-pick-panel.in{ opacity:1; transform:none; }
/* the gold thread, the platform's signature on anything that opens */
.blx-pick-panel::before{
  content:''; position:absolute; top:0; left:14px; right:14px; height:2px;
  background:linear-gradient(90deg,transparent,#b58a1a,transparent);
}
.blx-pick-panel.up::before{ top:auto; bottom:0; }

.blx-pick-panel .bp-find{ padding:10px 10px 8px; border-bottom:1px solid #eef0f2; }
.blx-pick-panel .bp-q{
  width:100%; min-height:36px; padding:8px 11px; font:inherit; font-size:13px;
  border:1px solid #cbd2da; border-radius:9px; background:#fff; color:#111827; outline:none;
}
.blx-pick-panel .bp-q:focus{ border-color:#b58a1a; box-shadow:0 0 0 3px rgba(181,138,26,.14); }

.blx-pick-panel .bp-list{ max-height:min(320px,52vh); overflow-y:auto; padding:6px; scrollbar-width:thin; }
.blx-pick-panel .bp-group{
  padding:9px 10px 5px; font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; color:#6b7280; font-weight:700;
}
.blx-pick-panel .bp-o{
  display:flex; align-items:center; gap:9px;
  padding:9px 11px; border-radius:9px; cursor:pointer; line-height:1.35;
}
.blx-pick-panel .bp-o span{ flex:1; min-width:0; }
.blx-pick-panel .bp-o.cur{ background:rgba(181,138,26,.12); color:#111827; }
.blx-pick-panel .bp-o.on{ font-weight:700; color:#111827; }
/* the tick, drawn rather than a glyph so it lines up with everything else */
.blx-pick-panel .bp-o.on::after{
  content:''; flex:none; width:13px; height:8px; margin-right:1px;
  border-left:2px solid #b58a1a; border-bottom:2px solid #b58a1a;
  transform:rotate(-45deg) translateY(-2px); border-radius:1px;
}
.blx-pick-panel .bp-o.off{ opacity:.42; cursor:default; }
.blx-pick-panel .bp-none{ padding:18px 12px; text-align:center; color:#6b7280; font-size:12.5px; }

/* ---- night ---- */
body.blx-skin-noir .blx-pick-panel,
body.blxb-dvl .blx-pick-panel{ /* the driver app in the dark keeps the light one */ }
body.blx-skin-noir .blx-pick-panel{
  background:#151412; color:#c9c5ba; border-color:#37342c;
  box-shadow:0 30px 70px -24px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.4);
}
body.blx-skin-noir .blx-pick-panel::before{
  background:linear-gradient(90deg,transparent,#c9a227,transparent);
}
body.blx-skin-noir .blx-pick-panel .bp-find{ border-bottom-color:#262420; }
body.blx-skin-noir .blx-pick-panel .bp-q{ background:#1b1916; border-color:#37342c; color:#f3f1ec; }
body.blx-skin-noir .blx-pick-panel .bp-o.cur{ background:rgba(201,162,39,.16); color:#f3f1ec; }
body.blx-skin-noir .blx-pick-panel .bp-o.on{ color:#f3f1ec; }
body.blx-skin-noir .blx-pick-panel .bp-o.on::after{ border-color:#e3c25a; }
body.blx-skin-noir .blx-pick-panel .bp-group,
body.blx-skin-noir .blx-pick-panel .bp-none{ color:#8d8a82; }
body.blx-skin-noir .blx-pick .bp-face{ background:#1b1916; border-color:#37342c; color:#f3f1ec; }
body.blx-skin-noir .blx-pick .bp-face.empty .bp-t{ color:#8d8a82; }
body.blx-skin-noir .blx-pick .bp-face:hover,
body.blx-skin-noir .blx-pick .bp-face.open{ border-color:#c9a227; }

/* On a phone the list becomes a sheet — a 320px dropdown pinned to a field is
   a desktop idea, and the thumb wants the bottom of the screen. */
@media(max-width:600px){
  .blx-pick-panel{
    left:0 !important; right:0 !important; bottom:0 !important; top:auto !important;
    width:auto !important; max-width:none;
    border-radius:18px 18px 0 0; border-bottom:0;
    transform:translateY(100%); transform-origin:bottom center;
    transition:transform .26s cubic-bezier(.22,.8,.25,1), opacity .18s;
  }
  .blx-pick-panel.in{ transform:none; }
  .blx-pick-panel .bp-list{ max-height:58vh; padding:8px 8px max(10px,env(safe-area-inset-bottom)); }
  .blx-pick-panel .bp-o{ min-height:48px; font-size:15px; }
}

/* ---- fitting in ----
 * A console that dresses its own inputs a particular way keeps dressing them
 * that way: the face is a button, so a few of the tighter fields need their
 * measurements said again here rather than inherited. */
#blxg-app .progrow .bp-face,
#blxg-app .docrow .bp-face{ min-height:34px; padding:6px 9px; font-size:12.5px; border-radius:8px; }
#blx-admin-app .blxrt-ti + .bp-face,
#blx-admin-app td .bp-face{ min-height:34px; padding:6px 9px; font-size:12.5px; border-radius:8px; }
#blxc-app .bp-face,
#blxiv-app .bp-face,
#blxr-app .bp-face{ min-height:40px; }
#blxd-app .bp-face,
.blxb-drawer .bp-face{ min-height:38px; font-size:13px; }
/* Inside a row of controls the picker should not insist on the full width. */
.inline .blx-pick,
.blxrt-field .blx-pick{ width:100%; }

/* The face borrows the console's own field colours where they are declared as
   tokens, which is every console the platform draws. */
.blx-pick .bp-face{
  background:var(--panel,var(--bg,#fff));
}