/* Searchable select combobox */
.ss-wrap { position: relative; width: 100%; }
.ss-control {
  border: 1px solid #00897B; border-radius: 6px; padding: 9px 28px 9px 12px;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0l5 6 5-6z' fill='%23667'/></svg>") no-repeat right 12px center;
  font-size: 14px; min-height: 42px; cursor: pointer; color: #222;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: all 0.3s ease;
}
.ss-control:hover { border-color: #00897B; box-shadow: 0 0 0 2px rgba(0,137,123,0.1); }
.ss-control:focus { outline: none; border-color: #00897B; box-shadow: 0 0 0 3px rgba(0,137,123,0.2); }
/* Fallback: any native <select> (even outside .content-form) gets the same
   thin teal border so dropdowns are never borderless. */
select.form-select { border: 1px solid #00897B; border-radius: 6px; }
.ss-panel {
  display: none; position: absolute; z-index: 50; left: 0; right: 0; top: calc(100% + 4px);
  background: #fff; border: 1px solid #cdd6e0; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 8px;
}
.ss-wrap.open .ss-panel { display: block; }
.ss-search {
  width: 100%; border: 1px solid #cdd6e0; border-radius: 6px;
  padding: 7px 9px; font-size: 13px; margin-bottom: 6px; outline: none;
}
.ss-search:focus { border-color: #26A69A; }
.ss-list { max-height: 240px; overflow-y: auto; }
.ss-item { padding: 8px 10px; font-size: 13px; border-radius: 5px; cursor: pointer; }
.ss-item:hover { background: #eef6f5; }
.ss-item.active { background: #26A69A; color: #fff; }
/* never let an enhanced control/panel render inside a SweetAlert popup */
.swal2-container .ss-wrap, .swal2-container select.ss-ready { display: none !important; }
.ss-none { padding: 10px; font-size: 13px; color: #888; text-align: center; }

/* Searchable pill multi-select */
.pill-picker.pp-search { position: relative; }
.pill-picker .pp-input {
  border: none; outline: none; flex: 1; min-width: 160px;
  background: transparent; font-size: 13px; padding: 4px;
}
.pill-picker .pp-dd {
  display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  background: #fff; border: 1px solid #cdd6e0; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12); z-index: 50;
  max-height: 240px; overflow-y: auto; padding: 6px;
}
.pill-picker .pp-dd.show { display: block; }
.pill-picker .pp-opt { padding: 8px 10px; font-size: 13px; border-radius: 5px; cursor: pointer; }
.pill-picker .pp-opt:hover { background: #eef6f5; }