/* ==========================================================================
   Searchable select — shared component.
   One control that opens a panel with a search box and the list beneath.
   ========================================================================== */
.ss-wrap{position:relative;display:block;min-width:0;contain:inline-size}
/* The field keeps its column's width whatever it shows: contain:inline-size
   stops a long chosen name from widening the form's grid column; the name
   itself ends in "..." (.ss-trigger-text). */
.ss-trigger-text{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ap-form-grid,.ap-card{overflow:visible}
.ss-wrap .ss-native{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}

.ss-trigger{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;min-height:44px;padding:10px 13px;
  border:1px solid #d7dfea;border-radius:9px;background:#fff;
  font:inherit;font-size:14px;color:#0f172a;text-align:left;cursor:pointer}
.ss-trigger::after{content:"";flex:0 0 auto;width:9px;height:9px;
  border-right:2px solid #64748b;border-bottom:2px solid #64748b;
  transform:rotate(45deg) translateY(-2px)}
.ss-trigger:hover{border-color:#b9c7db}
.ss-trigger:focus{outline:2px solid #2468e8;outline-offset:1px}
.ss-trigger.is-placeholder{color:#94a3b8}

.ss-panel{
  position:absolute;z-index:60;top:calc(100% + 5px);left:0;right:0;
  background:#fff;border:1px solid #d7dfea;border-radius:11px;
  box-shadow:0 18px 44px rgba(15,23,42,.16);padding:9px}
/* Open panel: placed against the field by searchable-select.js, above any
   card or drawer that clips its content (top layer where supported). */
.ss-panel.ss-floating{position:fixed;inset:auto;right:auto;margin:0;
  box-sizing:border-box;z-index:1000;overflow:auto}
.ss-search{
  width:100%;padding:9px 11px;margin-bottom:8px;
  border:1px solid #d7dfea;border-radius:8px;font:inherit;font-size:13.5px}
.ss-search:focus{outline:2px solid #2468e8;outline-offset:1px}

.ss-list{max-height:260px;overflow-y:auto;overscroll-behavior:contain}
.ss-list::-webkit-scrollbar{width:9px}
.ss-list::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:99px}
.ss-item{
  display:block;width:100%;padding:9px 11px;border:0;border-radius:7px;
  background:transparent;font:inherit;font-size:13.5px;color:#0f172a;
  text-align:left;cursor:pointer}
.ss-item:hover{background:#eef4ff;color:#12306b}
.ss-empty{padding:12px;text-align:center;color:#64748b;font-size:13px}

/* Similar-entry guidance under Other: informational, never blocking */
.ss-hint{margin:8px 0 0;padding:10px 12px;border:1px solid #fcd34d;border-radius:8px;background:#fffbeb;color:#78350f;font-size:13px;line-height:1.45}
.ss-hint p{margin:0 0 6px}.ss-hint .ss-hint-note{margin:6px 0 0;color:#92400e;font-size:12px}
.ss-hint-confirm{display:flex;align-items:flex-start;gap:8px;margin:8px 0 0;font-size:12.5px;color:#78350f;cursor:pointer}.ss-hint-confirm input{margin:2px 0 0;width:auto}
.ss-hint-use{display:inline-block;margin:2px 6px 2px 0;padding:5px 10px;border:1px solid #d97706;border-radius:6px;background:#fff;color:#92400e;font:inherit;font-size:13px;cursor:pointer}
.ss-hint-use:hover,.ss-hint-use:focus{background:#fef3c7}
.ss-warning{
  margin:7px 0 0;padding:9px 11px;border-radius:8px;
  background:#fef3c7;border:1px solid #fcd34d;color:#92400e;
  font-size:12.5px;font-weight:650}

/* ---- make [hidden] actually hide ----------------------------------------
   Portal labels are display:flex from a class rule, which outranks the
   browser's built-in [hidden]{display:none}. Without this, any field the
   component hides stays on screen. */
[hidden]{display:none !important}

/* ---- candidate portal: .cp-form button / .cp-doc button paint every
   button primary-blue; these restate the component's own look with
   higher specificity so the searchable control stays a control. ---- */
.ss-wrap .ss-trigger{
  background:#fff;color:#0f172a;border:1px solid #d7dfea;border-radius:9px;
  padding:10px 13px;font-weight:400;text-align:left}
.ss-panel .ss-item{
  background:transparent;color:#0f172a;border:0;border-radius:7px;
  padding:9px 11px;font-weight:400;text-align:left}
.ss-panel .ss-item:hover{background:#eef4ff;color:#12306b}
/* The redesigned candidate portal (candidate-portal-redesign.css) styles
   every button inside .cp-form as a centred bold button; the list items are
   buttons too, so their own look is restated once more here. */
body.cp-app .cp-form .ss-panel .ss-item{
  display:block;width:100%;min-height:0;padding:9px 11px;border:0;border-radius:7px;
  background:transparent;color:#0f172a;font-size:13.5px;font-weight:400;
  text-align:left;white-space:normal;box-shadow:none}
body.cp-app .cp-form .ss-panel .ss-item:hover{background:#eef4ff;color:#12306b}