/* ═══════════════════════════════════════════════════════════════════════
   USER AVATAR — public/front/css/hh-avatar.css
   Single responsibility: styling for user-avatar.blade.php only.
   Tokens (--hh-*) come from hh-auth-tokens.css.
   ═══════════════════════════════════════════════════════════════════════ */

.hh-avatar {
    position: relative;
    display: inline-flex; 
    align-items: center; 
    justify-content: center;
    border-radius: 50%; 
    overflow: hidden; 
    flex-shrink: 0;
    background: var(--hh-primary); 
    color: #fff;
}
.hh-avatar-img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}
.hh-avatar-initial { 
    font-weight: 700; 
    color: #fff; 
}

.hh-avatar--sm { 
    width: 28px; 
    height: 28px; 
}
.hh-avatar--sm .hh-avatar-initial { 
    font-size: .85rem; 
}

.hh-avatar--md { 
    width: 56px; 
    height: 56px; 
}
.hh-avatar--md .hh-avatar-initial { 
    font-size: 1.3rem; 
}

.hh-avatar--lg { 
    width: 84px; 
    height: 84px; 
}
.hh-avatar--lg .hh-avatar-initial { 
    font-size: 1.8rem; }

/* ── Editable variant — profile page identity card ── */
.hh-avatar--editable { 
    cursor: pointer; 
}
.hh-avatar-edit-badge {
    position: absolute; 
    bottom: 5px; 
    right: 5px;
    width: 24px; 
    height: 24px; 
    border-radius: 50%;
    background: var(--hh-ink); 
    color: #fff; 
    border: 2px solid #fff;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: .68rem;
    transition: background 150ms ease;
}
.hh-avatar--editable:hover .hh-avatar-edit-badge { 
    background: var(--hh-primary); 
}
.hh-avatar-file-input {
    position: absolute; 
    inset: 0; 
    opacity: 0; 
    cursor: pointer; 
    width: 100%; 
    height: 100%;
}
.hh-avatar--editable.hh-avatar--uploading { 
    opacity: .6; 
    pointer-events: none; 
}