.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bs-secondary-bg);
  color: var(--bs-body-color);
  font-size: .875rem;
  font-weight: 600;
  vertical-align: middle;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-color-0 { background: #dbeafe; color: #1e3a8a; }
.avatar-color-1 { background: #ede9fe; color: #4c1d95; }
.avatar-color-2 { background: #fce7f3; color: #831843; }
.avatar-color-3 { background: #dcfce7; color: #14532d; }
.avatar-color-4 { background: #ffedd5; color: #7c2d12; }
.avatar-color-5 { background: #cffafe; color: #164e63; }

.avatar-large {
  width: 128px;
  height: 128px;
  font-size: 2.5rem;
}

.list-item-comment {
  display: block;
  max-width: 34rem;
}

.list-item-comment summary {
  width: fit-content;
  cursor: pointer;
}

.list-item-comment-body {
  margin-top: .25rem;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

@media (min-width: 768px) {
  .list-item-cell { min-width: 22rem; }
}

.shop-table { min-width: 44rem; }
.shop-item { min-width: 20rem; }
.shop-item-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 .65rem; }
.shop-item-note { max-width: 48rem; overflow-wrap: anywhere; }
.shop-actions { min-width: 18rem; }

.admin-users-table > tbody > tr > td { padding: .65rem .875rem; }
.admin-user-actions { min-width: 18rem; }
.people-list-row, .admin-pending-row { min-width: 0; }
.people-row-name { min-width: 0; overflow-wrap: anywhere; }
.item-name { font-weight: 400; }
.item-main-cell { padding-left: .75rem !important; }
.admin-add-family { flex: 1 1 22rem; max-width: 32rem; }
.admin-add-family input, .admin-add-member select { min-width: 0; }
.admin-family-rename summary { list-style: none; }
.admin-family-rename summary::-webkit-details-marker { display: none; }
.admin-family-rename[open] { flex-basis: 100%; }
.admin-family-rename form { min-width: min(22rem, 80vw); }
.star-rating { display: flex; flex-direction: row; direction: rtl; align-items: center; justify-content: flex-end; width: max-content; max-width: 100%; }
.star-rating-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
.rating-half { position: relative; display: block; flex: 0 0 .5em; width: .5em; height: 1.35em; overflow: hidden; color: var(--bs-secondary-color); cursor: pointer; font-size: 2rem; line-height: 1.35; }
.rating-half::before { position: absolute; top: 0; content: "★"; }
.rating-right-half::before { left: -.5em; }
.rating-left-half::before { left: 0; }
.star-rating-input:checked ~ .rating-half,
.star-rating .rating-half:hover,
.star-rating .rating-half:hover ~ .rating-half { color: #f0a500; }
.star-rating-input:focus-visible + .rating-half { outline: 2px solid var(--bs-primary); outline-offset: 1px; }
.rating-clear { margin-inline-start: .65rem; color: var(--bs-secondary-color); font-size: .875rem; cursor: pointer; }
.rating-clear:hover { color: var(--bs-body-color); }
.rating-display { display: inline-flex; align-items: center; vertical-align: middle; font-size: .85em; }
.rating-display-star { position: relative; display: inline-block; color: #adb5bd; line-height: 1; }
.rating-display-fill { position: absolute; top: 0; left: 0; overflow: hidden; color: #f0a500; white-space: nowrap; }
.rating-display-empty { width: 0; }
.rating-display-half { width: 50%; }
.rating-display-full { width: 100%; }

@media (max-width: 767.98px) {
  .shop-table-wrap { overflow: visible; }
  .shop-table { min-width: 0; border-collapse: separate; border-spacing: 0; }
  .shop-table thead { display: none; }
  .shop-table tbody { display: grid; gap: .65rem; }
  .shop-table tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .4rem .75rem; padding: .7rem .8rem; border: 1px solid var(--bs-border-color); border-radius: .5rem; background: var(--bs-body-bg); }
  .shop-table tbody tr.shop-empty { display: block; border: 0; padding: .25rem 0; background: transparent; }
  .shop-table tbody td { display: block; min-width: 0; padding: 0; border: 0; }
  .shop-table tbody td.item-main-cell { padding-left: 0 !important; }
  .shop-table tbody td.shop-item, .shop-table tbody td.shop-actions { grid-column: 1 / -1; }
  .shop-table tbody td.shop-rank::before, .shop-table tbody td.shop-price::before, .shop-table tbody td.shop-qty::before { display: block; color: var(--bs-secondary-color); font-size: .75rem; content: attr(data-label); }
  .shop-actions { text-align: left !important; }
  .shop-actions form { flex-wrap: wrap; justify-content: flex-start !important; }
}

@media (max-width: 575.98px) {
  .admin-user-actions { min-width: 0; }
  .admin-user-actions > .d-flex { justify-content: flex-start !important; }
  .admin-pending-row { align-items: flex-start !important; }
  .admin-pending-row > span:first-child { overflow-wrap: anywhere; }
  .people-list-row { align-items: flex-start !important; }
  .admin-add-family { flex-basis: 100%; max-width: none; }
  .admin-add-family input { flex: 1 1 auto; }
  .admin-family-roster > .list-group-item { align-items: flex-start !important; }
}

.password-strength-bar[data-score="0"] { width: 10%; }
.password-strength-bar[data-score="1"] { width: 25%; }
.password-strength-bar[data-score="2"] { width: 50%; }
.password-strength-bar[data-score="3"] { width: 75%; }
.password-strength-bar[data-score="4"] { width: 100%; }

.profile-switcher { position: relative; }
.profile-switcher > summary { list-style: none; }
.profile-switcher > summary::-webkit-details-marker { display: none; }
.profile-switcher-menu {
  position: absolute;
  right: 0;
  top: calc(100% + .5rem);
  z-index: 1050;
  width: min(20rem, calc(100vw - 2rem));
  max-height: 70vh;
  overflow-y: auto;
}