/* ServiCam Admin — Searchable Select (filtres catégorie / métier / ville) */

.ss-wrap { position: relative; display: inline-flex; min-width: 150px; vertical-align: top; }

.ss-native-hidden {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important; height: 1px !important;
  opacity: 0 !important; pointer-events: none !important;
}

/* Trigger — calqué sur .filters-bar select */
.ss-trigger {
  width: 100%;
  font-family: inherit;
  text-align: left;
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; outline: none;
  padding: 12px 14px;
  border: 2px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  background: var(--bg-input, #fff);
  color: var(--text-primary, #18181b);
  font-size: 14px; font-weight: 500;
  transition: border-color 0.15s;
}
.ss-trigger[disabled] { opacity: 0.5; cursor: default; }
.ss-wrap.ss-open .ss-trigger, .ss-trigger:focus { border-color: var(--accent, #7033ff); }

.ss-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-label.ss-placeholder { color: var(--text-muted, #71717a); }
.ss-chevron { display: inline-flex; margin-left: 8px; color: var(--text-muted, #9ca3af); transition: transform 0.2s; }
.ss-wrap.ss-open .ss-chevron { transform: rotate(180deg); }

/* Dropdown */
.ss-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  z-index: 1200;
  min-width: 230px;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
  max-height: 340px;
  display: none; flex-direction: column; overflow: hidden;
}
.ss-wrap.ss-open .ss-dropdown { display: flex; }

.ss-search-wrap { padding: 8px; border-bottom: 1px solid var(--border-color, #eef0f3); }
.ss-search {
  width: 100%; box-sizing: border-box;
  padding: 9px 12px;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  font-size: 13px; font-family: inherit;
  background: transparent;
  color: var(--text-primary, #111);
  outline: none;
}
.ss-search:focus { border-color: var(--accent, #7033ff); }

.ss-list { flex: 1; overflow-y: auto; max-height: 270px; -webkit-overflow-scrolling: touch; }
.ss-option {
  padding: 11px 14px;
  font-size: 13.5px;
  cursor: pointer;
  color: var(--text-primary, #111);
  user-select: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}
.ss-option:last-child { border-bottom: none; }
.ss-option:hover { background: var(--accent-soft, rgba(112, 51, 255, 0.07)); }
.ss-option.ss-selected {
  color: var(--accent, #7033ff);
  font-weight: 600;
  background: var(--accent-soft, rgba(112, 51, 255, 0.05));
}
.ss-empty { padding: 16px; font-size: 13px; color: var(--text-muted, #9ca3af); text-align: center; }

[data-theme="dark"] .ss-option { border-bottom-color: rgba(255, 255, 255, 0.05); }

/* Mobile : filtres pleine largeur (comme .filters-bar select) */
@media (max-width: 768px) {
  .ss-wrap { width: 100%; min-width: 0; }
}