/* Enterprise invite picker for Admin > Walks
   Fixes plain browser buttons and turns invite members/groups into
   professional searchable multi-select dropdowns.
*/

.enterprise-invite-builder {
  margin: 24px 0 !important;
  padding: 22px !important;
  border: 1px solid rgba(28,124,84,.20) !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(28,124,84,.08), transparent 35%),
    linear-gradient(180deg, #ffffff, #fbfdff) !important;
  border-radius: 28px !important;
  box-shadow: 0 20px 60px rgba(15,23,42,.07) !important;
}

.enterprise-invite-builder .invite-builder-head {
  align-items: flex-start !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid rgba(15,23,42,.08) !important;
}

.enterprise-invite-builder .invite-builder-head strong {
  display: block !important;
  font-size: 1.15rem !important;
  margin-bottom: 4px !important;
}

.enterprise-invite-builder .invite-builder-head span {
  display: block !important;
  max-width: 760px !important;
  line-height: 1.5 !important;
}

.invite-count-field {
  min-width: 150px !important;
  height: 46px !important;
  text-align: center !important;
  color: #0f7f55 !important;
  font-weight: 900 !important;
  border: 1px solid rgba(28,124,84,.22) !important;
  border-radius: 16px !important;
  background: #ecfdf3 !important;
}

.create-invite-grid,
.invite-modal-grid {
  gap: 18px !important;
}

.create-invite-grid > div,
.invite-modal-grid > div {
  min-width: 0 !important;
  padding: 16px !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  border-radius: 24px !important;
  background: #fff !important;
  box-shadow: 0 14px 36px rgba(16,24,40,.05) !important;
}

.create-invite-grid .mini-head,
.invite-modal-grid .mini-head {
  margin-bottom: 12px !important;
}

.pro-typeahead-input {
  width: 100% !important;
  height: 52px !important;
  margin: 0 0 10px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(15,23,42,.12) !important;
  background: #fff !important;
  box-shadow: 0 10px 28px rgba(16,24,40,.04) !important;
  font-weight: 750 !important;
}

.pro-typeahead-input:focus {
  outline: none !important;
  border-color: rgba(28,124,84,.48) !important;
  box-shadow: 0 0 0 4px rgba(28,124,84,.10), 0 12px 32px rgba(16,24,40,.08) !important;
}

.pro-typeahead-multi {
  display: grid !important;
  gap: 10px !important;
  position: relative !important;
  font-size: .95rem !important;
}

.typeahead-selected-zone {
  min-height: 48px !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 10px !important;
  border: 1px dashed rgba(28,124,84,.24) !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #f0fdf4, #ffffff) !important;
}

.typeahead-placeholder {
  color: #64748b !important;
  font-weight: 800 !important;
  font-size: .88rem !important;
}

.typeahead-chip {
  appearance: none !important;
  border: 1px solid rgba(28,124,84,.20) !important;
  background: #dcfae6 !important;
  color: #0f7f55 !important;
  border-radius: 999px !important;
  padding: 7px 9px 7px 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  max-width: 100% !important;
}

.typeahead-chip span {
  max-width: 220px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.typeahead-chip b {
  width: 20px !important;
  height: 20px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: rgba(15,127,85,.12) !important;
}

.typeahead-chip:hover {
  background: #c9f6d8 !important;
}

.typeahead-control-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  color: #64748b !important;
  font-weight: 850 !important;
  font-size: .86rem !important;
}

.mini-link {
  appearance: none !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  background: #fff !important;
  color: #0f172a !important;
  border-radius: 999px !important;
  padding: 8px 11px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  line-height: 1 !important;
  box-shadow: 0 8px 22px rgba(16,24,40,.05) !important;
}

.mini-link:hover {
  border-color: rgba(28,124,84,.34) !important;
  color: #0f7f55 !important;
  background: #f0fdf4 !important;
}

.mini-link.danger {
  color: #b42318 !important;
}

.mini-link.danger:hover {
  background: #fff5f5 !important;
  border-color: rgba(180,35,24,.22) !important;
}

.typeahead-dropdown {
  display: none !important;
  max-height: 360px !important;
  overflow: auto !important;
  padding: 8px !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  border-radius: 22px !important;
  background: #fff !important;
  box-shadow: 0 22px 60px rgba(15,23,42,.11) !important;
}

.typeahead-dropdown.is-open {
  display: grid !important;
  gap: 8px !important;
}

.typeahead-result {
  appearance: none !important;
  width: 100% !important;
  min-height: 72px !important;
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) 36px !important;
  align-items: center !important;
  gap: 12px !important;
  border: 1px solid rgba(15,23,42,.075) !important;
  border-radius: 18px !important;
  background: #fbfdff !important;
  color: #0f172a !important;
  padding: 10px 12px !important;
  cursor: pointer !important;
  text-align: left !important;
  transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease !important;
}

.typeahead-result:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(28,124,84,.28) !important;
  background: #f5fff9 !important;
  box-shadow: 0 12px 30px rgba(16,24,40,.08) !important;
}

.typeahead-result.is-selected {
  border-color: rgba(28,124,84,.35) !important;
  background: #ecfdf3 !important;
}

.typeahead-icon,
.typeahead-avatar {
  width: 52px !important;
  height: 52px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #0f172a, #1c7c54) !important;
  color: #fff !important;
  font-size: 1.3rem !important;
  overflow: hidden !important;
}

.typeahead-avatar .avatar,
.typeahead-avatar .avatar-img {
  width: 52px !important;
  height: 52px !important;
  border-radius: 18px !important;
  margin: 0 !important;
}

.typeahead-avatar .avatar {
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(135deg, #0f172a, #1c7c54) !important;
  color: #fff !important;
  font-weight: 900 !important;
}

.typeahead-copy {
  min-width: 0 !important;
  display: grid !important;
  gap: 4px !important;
}

.typeahead-copy strong {
  display: block !important;
  color: #0f172a !important;
  font-size: .98rem !important;
  line-height: 1.15 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

.typeahead-copy small {
  display: block !important;
  color: #64748b !important;
  font-size: .82rem !important;
  line-height: 1.35 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

.typeahead-check {
  width: 32px !important;
  height: 32px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: #eef2f6 !important;
  color: #334155 !important;
  font-weight: 950 !important;
}

.typeahead-result.is-selected .typeahead-check {
  background: #1c7c54 !important;
  color: #fff !important;
}

.typeahead-empty {
  padding: 22px !important;
  border-radius: 18px !important;
  background: #f8fafc !important;
  text-align: center !important;
}

.typeahead-empty strong {
  display: block !important;
  margin-bottom: 4px !important;
}

.typeahead-empty small {
  color: #64748b !important;
}

.invite-builder .muted.small {
  margin-top: 14px !important;
}

/* Better layout in the create walk card */
.admin-walks-container .stack-form {
  overflow: visible !important;
}

.admin-walks-container .panel {
  overflow: visible !important;
}

/* Mobile */
@media (max-width: 960px) {
  .create-invite-grid,
  .invite-modal-grid {
    grid-template-columns: 1fr !important;
  }

  .enterprise-invite-builder .invite-builder-head {
    flex-direction: column !important;
  }

  .invite-count-field {
    width: 100% !important;
  }
}

@media (max-width: 560px) {
  .typeahead-result {
    grid-template-columns: 44px minmax(0, 1fr) 30px !important;
    min-height: 66px !important;
    padding: 8px !important;
  }

  .typeahead-icon,
  .typeahead-avatar,
  .typeahead-avatar .avatar,
  .typeahead-avatar .avatar-img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 15px !important;
  }

  .typeahead-copy small {
    white-space: normal !important;
  }
}
