/*
 * The person's badge (UserBadge): a round badge with their initials, ONE component for the web app's top bar and the
 * staff apps (yard, moorings, office) - the profile, the app bar, a job's crew. Sizes: sm 26px (a crew, a list),
 * md 36px (a bar), lg 48px (the menu's head), xl 76px (a profile). The signed-in person's own badge (`is-me`) wears the
 * area accent; everybody else's is neutral. Measured: white on the accents >= 3:1 at these bold sizes; #4a5568 on
 * #dfe6ec 6.06:1.
 */
.bs-user-avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #dfe6ec;
    color: #4a5568;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
    user-select: none;
}
.bs-user-avatar.is-me { background: var(--area-accent, #1abc9c); color: #fff; }
/* The photo (UserPhoto) covers the initials, which stay underneath while it loads. */
.bs-user-avatar { position: relative; overflow: hidden; }
.bs-user-avatar > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.bs-user-avatar--sm { width: 26px; height: 26px; font-size: 11px; border: 2px solid #fff; }
.bs-user-avatar--lg { width: 48px; height: 48px; font-size: 18px; }
.bs-user-avatar--xl { width: 76px; height: 76px; font-size: 26px; }

/* The web app's top bar (layouts/menu2.php): the badge as the user menu's toggle, and the menu's head naming the
   person, their account and the marina. */
#mainmenu2 .bs-user-toggle { display: flex; align-items: center; padding-top: 9px; padding-bottom: 9px; }
#mainmenu2 .bs-user-toggle .bs-user-avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); }
#mainmenu2 .bs-user-menu .dropdown-menu { min-width: 280px; }
#mainmenu2 .bs-user-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 12px; margin-bottom: 6px; border-bottom: 1px solid #e3e8ee; }
#mainmenu2 .bs-user-who { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
#mainmenu2 .bs-user-name { font-size: 16px; color: #1a202c; white-space: normal; overflow-wrap: anywhere; }
#mainmenu2 .bs-user-account { font-size: 13px; color: #64748b; overflow-wrap: anywhere; }
#mainmenu2 .bs-user-marina { margin-top: 4px; font-size: 14px; font-weight: 600; color: #064a71; overflow-wrap: anywhere; }
#mainmenu2 .bs-user-marina i { margin-right: 4px; }