/* ============================================================
   OBSelect — searchable single/multi select CSS. Self-scoped
   under .obsel; same local-token pattern as .obdr/.obaddr so it
   drops onto any page. Pairs with js/ob-select.js.
   ============================================================ */
.obsel { position: relative; display: inline-block; min-width: 220px; font-family: var(--_ob-font, var(--ob-font, "Plus Jakarta Sans", sans-serif));
  --line: var(--ob-line, #EDEEF3); --line2: #F4F5F9; --ink: var(--ob-ink, #14161F); --ink2: #5A607A; --ink3: #9AA0B6;
  --accent: var(--ob-accent, #6366F1); --accent-weak: #EEF0FE; --accent-ink: #4F46E5;
  --shadow-lg: 0 16px 40px -10px rgba(17,19,34,.18), 0 6px 14px -6px rgba(17,19,34,.08); }
.obsel .ctrl {
  display: flex; align-items: center; gap: 9px; width: 100%; min-height: 40px;
  padding: 6px 13px; border: 1px solid var(--line); border-radius: 11px; background: #fff;
  color: var(--ink); font: inherit; font-size: 13.5px; cursor: pointer; text-align: left;
}
.obsel .ctrl:hover { border-color: #DADCE7; }
.obsel.open .ctrl { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
.obsel .val { flex: 1; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; min-width: 0; }
.obsel .val .ph { color: var(--ink3); }
.obsel .cv { color: var(--ink3); transition: transform .15s; display: inline-flex; flex: 0 0 auto; }
.obsel.open .cv { transform: rotate(180deg); }

.obsel .tag {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  background: var(--accent-weak); color: var(--accent-ink);
  font-size: 12px; font-weight: 600; padding: 3px 7px 3px 9px; border-radius: 7px;
}
.obsel .tag .tx { display: inline-flex; cursor: pointer; opacity: .65; border-radius: 4px; padding: 2px; }
.obsel .tag .tx:hover { opacity: 1; background: rgba(79,70,229,.14); }

.obsel .pop {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; min-width: 100%;
  background: #fff; border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow-lg);
  display: none; overflow: hidden;
}
.obsel.open .pop { display: block; }
.obsel .srch { padding: 10px; border-bottom: 1px solid var(--line); }
.obsel .srch input {
  width: 100%; font: inherit; font-size: 13px; padding: 8px 11px;
  border: 1px solid var(--line); border-radius: 9px; background: #FAFAFC; color: var(--ink); outline: none;
}
.obsel .srch input:focus { border-color: var(--accent); background: #fff; }
.obsel .list { max-height: 264px; overflow-y: auto; padding: 6px; }
.obsel .opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--ink);
}
.obsel .opt:hover, .obsel .opt.hi { background: var(--line2); }
.obsel .opt .lb { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.obsel .opt .sub { font-size: 11.5px; color: var(--ink3); }
.obsel .opt .ck { display: none; color: var(--accent-ink); flex: 0 0 auto; }
.obsel .opt.sel { background: var(--accent-weak); color: var(--accent-ink); font-weight: 600; }
.obsel .opt.sel .ck { display: inline-flex; }
.obsel .opt.sel.hi { filter: brightness(.97); }
.obsel .none { padding: 18px 10px; text-align: center; font-size: 12.5px; color: var(--ink3); }