/* ServiCam — Searchable Select
   Deux variantes :
   - .ss-wrap-filter : matches .rech-select (page recherche, 13px, compact)
   - .ss-wrap-form   : matches form fields (enregistrement, 15px, plus haut) */

.ss-wrap {
  position: relative;
  width: 100%;
}
.ss-wrap-filter {
  flex: 1;
  min-width: 100px;
  width: auto;
}

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

/* ── Trigger button ── */
.ss-trigger {
  width: 100%;
  font-family: inherit;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.ss-trigger[disabled] { opacity: 0.4; cursor: default; }

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

/* Variante FILTER (page recherche) */
.ss-wrap-filter .ss-trigger {
  padding: 9px 10px 9px 12px;
  border: 1px solid var(--card-border, #e5e7eb);
  border-radius: 10px;
  background: var(--card, #fff);
  color: var(--fg, #111);
  font-size: 13px;
  font-weight: 600;
}
.ss-wrap-filter.ss-open .ss-trigger,
.ss-wrap-filter .ss-trigger:focus { border-color: var(--primary, #7033ff); }

/* Variante FORM (page enregistrement) */
.ss-wrap-form .ss-trigger {
  padding: 14px 16px;
  border: 1px solid var(--gray-light, #e5e7eb);
  border-radius: 8px;
  background: #fff;
  color: var(--text-color, #111);
  font-size: 15px;
}
.ss-wrap-form.ss-open .ss-trigger,
.ss-wrap-form .ss-trigger:focus {
  border-color: var(--primary-color, #7033ff);
  box-shadow: 0 0 0 2px var(--primary-light, rgba(112,51,255,0.18));
}
.ss-wrap-form .ss-trigger[disabled] { background: #f3f4f6; }

/* ── Dropdown ── */
.ss-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  z-index: 1000;
  background: var(--card, #fff);
  border: 1px solid var(--card-border, #e5e7eb);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
  max-height: 300px;
  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(--card-border, #eef0f3); }
.ss-search {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--card-border, #e5e7eb);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  background: transparent;
  color: var(--fg, #111);
  outline: none;
}
.ss-search:focus { border-color: var(--primary, #7033ff); }

.ss-list {
  flex: 1;
  overflow-y: auto;
  max-height: 240px;
  -webkit-overflow-scrolling: touch;
}
.ss-option {
  padding: 11px 14px;
  font-size: 13.5px;
  cursor: pointer;
  color: var(--fg, #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: rgba(112, 51, 255, 0.07); }
.ss-option.ss-selected {
  color: var(--primary, #7033ff);
  font-weight: 600;
  background: rgba(112, 51, 255, 0.04);
}
.ss-empty {
  padding: 16px;
  font-size: 13px;
  color: var(--muted, #9ca3af);
  text-align: center;
}

/* Mode sombre */
.dark .ss-dropdown { background: var(--card); border-color: var(--card-border); }
.dark .ss-search { color: var(--fg); border-color: var(--card-border); }
.dark .ss-option { color: var(--fg); border-bottom-color: rgba(255, 255, 255, 0.04); }