/* Shared Hostome multi-select dropdown menu (mission HOSTOME_M46_CLAUDE_R4_
   RESERVATIONS_FILTER_MODEL_AND_SHARED_UI).

   Extracted VERBATIM from css/pages/index.css (Dashboard's own property/
   group filter menus) so index.html and reservations.html consume the
   exact same rules for the "Tous/Aucun + checkbox list" pattern - one
   file, never a fork. Dashboard's own markup/behavior is unchanged; only
   the CSS moved, plus new additive thumbnail/ellipsis rules for the
   property row (used by both Dashboard's property menu and Reservations'
   Logements filter). */

.dash-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 260px;
  max-width: 320px;
  max-height: 360px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--ui-shadow-pop, 0 12px 32px rgba(12,12,16,0.14));
  padding: 8px;
  z-index: 40;
}

.dash-dropdown-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 8px 8px;
}

.dash-dropdown-head strong {
  font-size: 12px;
  font-weight: 700;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dash-dropdown-bulk-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.dash-dropdown-reset {
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--t3);
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 10px;
  font-family: inherit;
  white-space: nowrap;
}

.dash-dropdown-reset:hover {
  background: var(--surface-2);
  color: var(--t1);
}

.dash-dropdown-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: var(--t1);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.dash-dropdown-option:hover {
  background: var(--surface-2);
}

.dash-dropdown-option.active {
  color: var(--hostome-primary);
  font-weight: 700;
}

.dash-dropdown-option i.fa-check {
  width: 13px;
  font-size: 11px;
}

.dash-dropdown-option-spacer {
  width: 13px;
  flex-shrink: 0;
}

.dash-dropdown-check {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 8px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--t1);
}

.dash-dropdown-check:hover {
  background: var(--surface-2);
}

.dash-dropdown-check-all {
  font-weight: 700;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  margin-bottom: 4px;
  padding-bottom: 10px;
}

/* ── Property row: thumbnail + one-line ellipsized name (M46-R4, additive)
   propertyPhotoHtml() (properties.presentation.js) returns a single element
   (either <img class="X"> or <span class="X property-photo-fallback">),
   never a wrapper - this class is applied directly to that element. */
.dash-dropdown-check-thumb {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  flex-shrink: 0;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hostome-placeholder-bg);
}
.dash-dropdown-check-thumb.property-photo-fallback {
  color: var(--hostome-placeholder-fg); font-weight: 800; font-size: 11px;
}
.dash-dropdown-check-name {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}