/* Reusable user avatar — shared by the Twig partial (elements/_user_avatar.html.twig)
   and the JS helper renderUserAvatar() used in Tabulator lists.
   Size is driven by the --user-avatar-size custom property (default 40px),
   so the same component fits the navbar, cards and data tables. */
.user-avatar {
    --user-avatar-size: 40px;
    width: var(--user-avatar-size);
    height: var(--user-avatar-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #6c757d;
    color: #fff;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    vertical-align: middle;
}

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

.user-avatar__initials {
    font-size: calc(var(--user-avatar-size) * 0.4);
    text-transform: uppercase;
    user-select: none;
}