/* Account pages (Login, Register, Reset, Settings) of the Next.js port.
   Replaces inline `!important` styles of the legacy markup, which React can't express.
   Selectors start with `html body` so they beat Bootstrap's utility classes. */

/* Login/Register alerts: style="width: fit-content !important" (beats .w-50). */
html body .account-alert-fit {
  width: fit-content !important;
}

/* Register: the confirm-password input had inline bottom radius !important. */
html body .account-input-last {
  margin-bottom: 10px;
  border-bottom-left-radius: 0.375rem !important;
  border-bottom-right-radius: 0.375rem !important;
}

/* Settings: buttons with style="color: black !important" (beats settings.css .btn:hover). */
html body .account-black.account-black {
  color: black !important;
}

html body .account-min-150.account-min-150 {
  min-width: 150px !important;
}

/* Settings: Medal import user cards and buttons (the <style> block of settings.php). */
.user-card {
  cursor: pointer;
  transition: transform 0.2s, border-color 0.3s;
  border: 2px solid gray;
  border-radius: 10px;
  background-color: #141826;
  color: white;
  width: 150px;
  text-align: center;
  margin: 10px;
}
.user-card:hover {
  border-color: #ffc107;
  transform: scale(1.05);
}
.user-card.selected {
  border-color: #ffc107;
}
.user-avatar {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%;
  margin: 10px auto 0 auto;
  display: block;
}
#importBtn,
#searchBtn {
  background-color: #ffc107;
  color: black;
  border: none;
  transition: background-color 0.3s;
}
#importBtn:hover,
#searchBtn:hover {
  background-color: #e0a800;
}
#results {
  display: flex;
  flex-wrap: wrap;
}
.account-settings h2 {
  color: white;
}