/*
 * 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
 * OUR colour, the same everywhere (2026-10-28, «Cielo»): a pale sky disc with BlueShell's navy for the initials and
 * the ring that gathers it (the kit's info pair, --ref-info-bg / --ref-info) — measured: the initials 8.3:1, the disc
 * 8.3:1 on the navy bar and 16:1 on the apps' dark ground; on white the ring carries the edge (9.4:1). It wore the
 * section's colour (it mixed with the navy bar), then a teal the user found too loud. Everybody else's is neutral
 * (#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(--ref-info-bg, #eaf1f7); color: var(--ref-info, #064a71); outline: 2px solid var(--ref-info, #064a71); }
/* 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-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; }