/* ============================================================
    Global Avatar Palette
    Usage:
        <div class="users-avatar user-avtar-{N}">
            <span class="users-avatar-initials">AB</span>
            — or —
            <img class="users-avatar-fallback" … />
        </div>
    Size variants: 
        .users-avatar-lg, 
        .users-avatar-initials-lg, 
        .users-avatar-fallback-lg
   ============================================================ */

/* ── Base circle ──────────────────────────────────────────── */
.users-avatar,
.users-avatar-lg {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    background-clip: padding-box;
    box-sizing: border-box;

    /* 
        Remove this if you want to allow borders on avatars, but make sure to 
        adjust the background gradient and border colors in the palette below accordingly.
     */
    border: none !important;
}

.users-avatar-lg {
    width: 48px;
    height: 48px;
}

.users-avatar-initials,
.users-avatar-initials-lg {
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 600;
    line-height: 12px;
    letter-spacing: -0.2px;
    user-select: none;
    margin-top: 1px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}

.users-avatar-initials-lg {
    font-size: 17px;
    line-height: 17px;
    margin-top: 0px;
}

.users-avatar-fallback,
.users-avatar-fallback-lg {
    width: 20px;
    height: 20px;
    object-fit: contain;
    margin-bottom: 1px;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
}

.users-avatar-fallback-lg {
    width: 28px;
    height: 28px;
    margin-bottom: 0px;
}

/* ── Colour palettes ────────────────────────────────────── */
/* Pattern: linear-gradient top=solid (WCAG AA contrast >= 4.5:1 on white), bottom & border=solid light tint */

.user-avtar-0  { background-image: linear-gradient(180deg, #5263FF 0%, #DCE0FF 100%);    border: 1px solid #CBD0FF; }
.user-avtar-1  { background-image: linear-gradient(180deg, #5263FF 0%, #DCE0FF 100%);    border: 1px solid #CBD0FF; }
.user-avtar-2  { background-image: linear-gradient(180deg, #CE4103 0%, #F5D9CD 100%);    border: 1px solid #F0C6B3; }
.user-avtar-3  { background-image: linear-gradient(180deg, #BE2EB2 0%, #F2D5F0 100%);    border: 1px solid #ECC0E8; }
.user-avtar-4  { background-image: linear-gradient(180deg, #358034 0%, #D7E6D6 100%);    border: 1px solid #C2D9C2; }
.user-avtar-5  { background-image: linear-gradient(180deg, #0F8074 0%, #CFE6E3 100%);    border: 1px solid #B7D9D5; }
.user-avtar-6  { background-image: linear-gradient(180deg, #8457EA 0%, #E6DDFB 100%);    border: 1px solid #DACDF9; }
.user-avtar-7  { background-image: linear-gradient(180deg, #D53D3D 0%, #F7D8D8 100%);    border: 1px solid #F2C5C5; }
.user-avtar-8  { background-image: linear-gradient(180deg, #9A6305 0%, #EBE0CD 100%);    border: 1px solid #E1D0B4; }
.user-avtar-9  { background-image: linear-gradient(180deg, #057F93 0%, #CDE5E9 100%);    border: 1px solid #B4D9DF; }
.user-avtar-10 { background-image: linear-gradient(180deg, #537F0D 0%, #DDE5CF 100%);    border: 1px solid #CBD9B6; }
.user-avtar-11 { background-image: linear-gradient(180deg, #5E61E5 0%, #DFDFFA 100%);    border: 1px solid #CFD0F7; }
.user-avtar-12 { background-image: linear-gradient(180deg, #CB344E 0%, #F5D6DC 100%);    border: 1px solid #EFC2CA; }
.user-avtar-13 { background-image: linear-gradient(180deg, #0974A2 0%, #CEE3EC 100%);    border: 1px solid #B5D5E3; }
.user-avtar-14 { background-image: linear-gradient(180deg, #0B805A 0%, #CEE6DE 100%);    border: 1px solid #B6D9CE; }
.user-avtar-15 { background-image: linear-gradient(180deg, #7C3AED 0%, #E5D8FB 100%);    border: 1px solid #D8C4FA; }
.user-avtar-16 { background-image: linear-gradient(180deg, #A65B06 0%, #EDDECD 100%);    border: 1px solid #E4CEB4; }
.user-avtar-17 { background-image: linear-gradient(180deg, #B43AC6 0%, #F0D8F4 100%);    border: 1px solid #E8C4EE; }
.user-avtar-18 { background-image: linear-gradient(180deg, #475569 0%, #DADDE1 100%);    border: 1px solid #C8CCD2; }
.user-avtar-19 { background-image: linear-gradient(180deg, #C25252 0%, #F3DCDC 100%);    border: 1px solid #EDCBCB; }
.user-avtar-20 { background-image: linear-gradient(180deg, #117D7D 0%, #CFE5E5 100%);    border: 1px solid #B8D8D8; }
.user-avtar-21 { background-image: linear-gradient(180deg, #9B59B6 0%, #EBDEF0 100%);    border: 1px solid #E1CDE9; }
.user-avtar-22 { background-image: linear-gradient(180deg, #B25839 0%, #F0DED7 100%);    border: 1px solid #E8CDC4; }
.user-avtar-23 { background-image: linear-gradient(180deg, #2563EB 0%, #D3E0FB 100%);    border: 1px solid #BED0F9; }
.user-avtar-24 { background-image: linear-gradient(180deg, #BE123C 0%, #F2D0D8 100%);    border: 1px solid #ECB8C4; }
.user-avtar-25 { background-image: linear-gradient(180deg, #5A6AB3 0%, #DEE1F0 100%);    border: 1px solid #CED2E8; }
.user-avtar-26 { background-image: linear-gradient(180deg, #2B7E5F 0%, #D5E5DF 100%);    border: 1px solid #BFD8CF; }
.user-avtar-27 { background-image: linear-gradient(180deg, #92400E 0%, #E9D9CF 100%);    border: 1px solid #DEC6B7; }
.user-avtar-28 { background-image: linear-gradient(180deg, #9D5C26 0%, #EBDED4 100%);    border: 1px solid #E2CEBE; }
.user-avtar-29 { background-image: linear-gradient(180deg, #855CAF 0%, #E7DEEF 100%);    border: 1px solid #DACEE7; }
.user-avtar-30 { background-image: linear-gradient(180deg, #316DCD 0%, #D6E2F5 100%);    border: 1px solid #C1D3F0; }
.user-avtar-31 { background-image: linear-gradient(180deg, #B15500 0%, #EFDDCC 100%);    border: 1px solid #E8CCB2; }
.user-avtar-32 { background-image: linear-gradient(180deg, #C43C7E 0%, #F3D8E5 100%);    border: 1px solid #EDC4D8; }
.user-avtar-33 { background-image: linear-gradient(180deg, #00815C 0%, #CCE6DE 100%);    border: 1px solid #B2D9CE; }
.user-avtar-34 { background-image: linear-gradient(180deg, #9A6904 0%, #EBE1CD 100%);    border: 1px solid #E1D2B4; }
.user-avtar-35 { background-image: linear-gradient(180deg, #7E22CE 0%, #E5D3F5 100%);    border: 1px solid #D8BDF0; }
.user-avtar-36 { background-image: linear-gradient(180deg, #048664 0%, #CDE7E0 100%);    border: 1px solid #B4DBD0; }
.user-avtar-37 { background-image: linear-gradient(180deg, #DC2626 0%, #F8D4D4 100%);    border: 1px solid #F4BEBE; }
.user-avtar-38 { background-image: linear-gradient(180deg, #147584 0%, #D0E3E6 100%);    border: 1px solid #B8D6DA; }
.user-avtar-39 { background-image: linear-gradient(180deg, #4D7D09 0%, #DBE5CE 100%);    border: 1px solid #CAD8B5; }
.user-avtar-40 { background-image: linear-gradient(180deg, #636BBE 0%, #E0E1F2 100%);    border: 1px solid #D0D3EC; }
.user-avtar-41 { background-image: linear-gradient(180deg, #0B8579 0%, #CEE7E4 100%);    border: 1px solid #B6DAD7; }
.user-avtar-42 { background-image: linear-gradient(180deg, #C24909 0%, #F3DBCE 100%);    border: 1px solid #EDC8B5; }
.user-avtar-43 { background-image: linear-gradient(180deg, #C026D3 0%, #F2D4F6 100%);    border: 1px solid #ECBEF2; }
.user-avtar-44 { background-image: linear-gradient(180deg, #0276B2 0%, #CCE4F0 100%);    border: 1px solid #B3D6E8; }
.user-avtar-45 { background-image: linear-gradient(180deg, #7664D5 0%, #E4E0F7 100%);    border: 1px solid #D6D0F2; }
.user-avtar-46 { background-image: linear-gradient(180deg, #167B3B 0%, #D0E5D8 100%);    border: 1px solid #B9D7C4; }
.user-avtar-47 { background-image: linear-gradient(180deg, #E32000 0%, #F9D2CC 100%);    border: 1px solid #F7BCB2; }
.user-avtar-48 { background-image: linear-gradient(180deg, #A25475 0%, #ECDDE3 100%);    border: 1px solid #E3CCD6; }
.user-avtar-49 { background-image: linear-gradient(180deg, #0369A1 0%, #CDE1EC 100%);    border: 1px solid #B3D2E3; }
.user-avtar-50 { background-image: linear-gradient(180deg, #6D28D9 0%, #E2D4F7 100%);    border: 1px solid #D3BEF4; }
.user-avtar-51 { background-image: linear-gradient(180deg, #13883D 0%, #D0E7D8 100%);    border: 1px solid #B8DBC5; }
.user-avtar-52 { background-image: linear-gradient(180deg, #4169E1 0%, #D9E1F9 100%);    border: 1px solid #C6D2F6; }
.user-avtar-53 { background-image: linear-gradient(180deg, #DC143C 0%, #F8D0D8 100%);    border: 1px solid #F4B8C4; }
.user-avtar-54 { background-image: linear-gradient(180deg, #20845F 0%, #D2E6DF 100%);    border: 1px solid #BCDACF; }
.user-avtar-55 { background-image: linear-gradient(180deg, #702963 0%, #E2D4E0 100%);    border: 1px solid #D4BFD0; }
.user-avtar-56 { background-image: linear-gradient(180deg, #4B7599 0%, #DBE3EB 100%);    border: 1px solid #C9D6E0; }
.user-avtar-57 { background-image: linear-gradient(180deg, #287975 0%, #D4E4E3 100%);    border: 1px solid #BED7D6; }
.user-avtar-58 { background-image: linear-gradient(180deg, #C62B80 0%, #F4D5E6 100%);    border: 1px solid #EEBFD9; }
.user-avtar-59 { background-image: linear-gradient(180deg, #C0392B 0%, #F2D7D5 100%);    border: 1px solid #ECC4BF; }
.user-avtar-60 { background-image: linear-gradient(180deg, #2C8453 0%, #D5E6DD 100%);    border: 1px solid #C0DACB; }
.user-avtar-61 { background-image: linear-gradient(180deg, #1E4D7B 0%, #D2DBE5 100%);    border: 1px solid #BCCAD7; }
.user-avtar-62 { background-image: linear-gradient(180deg, #BA476B 0%, #F1DAE1 100%);    border: 1px solid #EAC8D3; }
.user-avtar-63 { background-image: linear-gradient(180deg, #447741 0%, #DAE4D9 100%);    border: 1px solid #C7D6C6; }
.user-avtar-64 { background-image: linear-gradient(180deg, #8B0000 0%, #E8CCCC 100%);    border: 1px solid #DCB2B2; }
.user-avtar-65 { background-image: linear-gradient(180deg, #2A52BE 0%, #D4DCF2 100%);    border: 1px solid #BFCBEC; }
.user-avtar-66 { background-image: linear-gradient(180deg, #907300 0%, #E9E3CC 100%);    border: 1px solid #DED5B2; }
.user-avtar-67 { background-image: linear-gradient(180deg, #7B2D8B 0%, #E5D5E8 100%);    border: 1px solid #D7C0DC; }
.user-avtar-68 { background-image: linear-gradient(180deg, #355E3B 0%, #D7DFD8 100%);    border: 1px solid #C2CFC4; }
.user-avtar-69 { background-image: linear-gradient(180deg, #B84D6D 0%, #F1DBE2 100%);    border: 1px solid #EACAD3; }
.user-avtar-70 { background-image: linear-gradient(180deg, #9F5F3D 0%, #ECDFD8 100%);    border: 1px solid #E2CFC5; }
.user-avtar-71 { background-image: linear-gradient(180deg, #1B6CA8 0%, #D1E2EE 100%);    border: 1px solid #BBD3E5; }
.user-avtar-72 { background-image: linear-gradient(180deg, #964CDD 0%, #EADBF8 100%);    border: 1px solid #E0C9F5; }
.user-avtar-73 { background-image: linear-gradient(180deg, #2D8653 0%, #D5E7DD 100%);    border: 1px solid #C0DBCB; }
.user-avtar-74 { background-image: linear-gradient(180deg, #BE5711 0%, #F2DDCF 100%);    border: 1px solid #ECCDB8; }
.user-avtar-75 { background-image: linear-gradient(180deg, #4338CA 0%, #D9D7F4 100%);    border: 1px solid #C7C3EF; }
.user-avtar-76 { background-image: linear-gradient(180deg, #077994 0%, #CDE4EA 100%);    border: 1px solid #B5D7DF; }
.user-avtar-77 { background-image: linear-gradient(180deg, #15803D 0%, #D0E6D8 100%);    border: 1px solid #B9D9C5; }
.user-avtar-78 { background-image: linear-gradient(180deg, #BE185D 0%, #F2D1DF 100%);    border: 1px solid #ECBACE; }
.user-avtar-79 { background-image: linear-gradient(180deg, #1D4ED8 0%, #D2DCF7 100%);    border: 1px solid #BBCAF3; }
.user-avtar-80 { background-image: linear-gradient(180deg, #B45309 0%, #F0DDCE 100%);    border: 1px solid #E8CBB5; }
.user-avtar-81 { background-image: linear-gradient(180deg, #6B21A8 0%, #E1D3EE 100%);    border: 1px solid #D3BCE5; }
.user-avtar-82 { background-image: linear-gradient(180deg, #0F766E 0%, #CFE4E2 100%);    border: 1px solid #B7D6D4; }
.user-avtar-83 { background-image: linear-gradient(180deg, #C2410C 0%, #F3D9CE 100%);    border: 1px solid #EDC6B6; }
.user-avtar-84 { background-image: linear-gradient(180deg, #9333EA 0%, #E9D6FB 100%);    border: 1px solid #DFC2F9; }
.user-avtar-85 { background-image: linear-gradient(180deg, #166534 0%, #D0E0D6 100%);    border: 1px solid #B9D1C2; }
.user-avtar-86 { background-image: linear-gradient(180deg, #9D174D 0%, #EBD1DB 100%);    border: 1px solid #E2B9CA; }
.user-avtar-87 { background-image: linear-gradient(180deg, #1E40AF 0%, #D2D9EF 100%);    border: 1px solid #BCC6E7; }
.user-avtar-88 { background-image: linear-gradient(180deg, #78350F 0%, #E4D7CF 100%);    border: 1px solid #D6C2B7; }
.user-avtar-89 { background-image: linear-gradient(180deg, #831843 0%, #E6D1D9 100%);    border: 1px solid #DABAC7; }
.user-avtar-90 { background-image: linear-gradient(180deg, #047857 0%, #CDE4DD 100%);    border: 1px solid #B4D6CD; }