/* ============================================================
   Searchable select — static/css/searchable_select.css
   Styled to sit flush with Bootstrap's .form-select so the field
   looks the same as every other dropdown on the form.
   ============================================================ */

.ss-wrap {
  position: relative;
  display: block;
}

/* The real <select> stays in the DOM (name/value/validation intact),
   it just is not shown. Not display:none — keeping it focusable-ish
   means crispy labels and browser validation bubbles still behave. */
.ss-hidden-select {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 100% !important;
  height: 100% !important;
  left: 0; top: 0;
  z-index: -1;
}

.ss-input {
  padding-right: 2rem;          /* room for the caret */
  cursor: text;
  text-overflow: ellipsis;
}
.ss-input.ss-empty { color: #6c757d; }

.ss-caret {
  position: absolute;
  right: .75rem;
  top: 50%;
  transform: translateY(-50%);
  color: #6c757d;
  font-size: .8rem;
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
}
.ss-wrap.is-open .ss-caret { color: #0d6efd; }

/* ---- the dropdown panel (appended to <body>, position:fixed, so a
        scrolling modal body can never clip it) ---- */
.ss-panel {
  position: fixed;
  z-index: 2000;                /* above Bootstrap modals (1055) */
  overflow-y: auto;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
  padding: 4px;
}

.ss-item {
  padding: .5rem .7rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: .9rem;
  line-height: 1.3;
  color: #212529;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ss-item:hover { background: #f1f3f5; }
.ss-item.is-active { background: #0d6efd; color: #fff; }

.ss-item mark {
  padding: 0;
  background: rgba(255, 214, 0, .55);
  color: inherit;
  border-radius: 2px;
}
.ss-item.is-active mark { background: rgba(255, 255, 255, .30); color: #fff; }

.ss-clear {
  color: #b02a37;
  font-weight: 600;
  border-bottom: 1px solid #f1f3f5;
  border-radius: 6px 6px 0 0;
  margin-bottom: 2px;
}
.ss-clear:hover { background: #fdeaec; }

.ss-empty-msg {
  padding: .6rem .7rem;
  color: #6c757d;
  font-size: .88rem;
}

/* ---- dark surfaces (the maintenance board's dark theme etc.) ---- */
.maint-dark .ss-input,
.maint-board.maint-dark .ss-input {
  background: var(--mb-panel-2, #0c1119);
  border-color: var(--mb-line, #1e2636);
  color: var(--mb-text, #e6e9f0);
}