/* Avatar Styles */

/* Avatar Base Styles */
.CardAvatar {
    position: absolute;
    left: 24px;
    top: 40px;
    z-index: 10;
}

.CardImage {
    width: 120px;
    height: 120px;
    border-radius: 16px;
    border: 6px solid white;
    object-fit: cover;
    background: var(--hi-colors-gray-100);
    box-shadow: var(--hi-shadows-lg);
}

.card-avatar-placeholder {
    width: 120px;
    height: 120px;
    border-radius: 16px;
    border: 6px solid white;
    background: var(--hi-colors-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--hi-shadows-lg);
}

.card-avatar-placeholder i {
    font-size: 48px;
    color: var(--hi-colors-gray-400);
}

/* Mini avatar positioning */
.avatar-mini .CardAvatar,
.avatar-normal .CardAvatar {
    position: absolute;
    left: 24px;
    top: 40px;
    z-index: 10;
}

.avatar-mini .CardHeaderFlat,
.avatar-normal .CardHeaderFlat {
    background: var(--hi-colors-primary);
    height: 120px;
    position: relative;
    overflow: hidden;
}

/* PagesVN Full Avatar Implementation */

/* PagesVN Avatar Container - css-vwehpi */
.css-vwehpi {
    background: var(--hi-colors-primary);
    color: rgb(255,255,255);
    min-height: 12rem;
    position: relative;
    transition-duration: 300ms;
    transition-property: background-color;
    will-change: background-color;
    overflow: hidden;
}

.css-vwehpi .CardAvatar {
    aspect-ratio: 1/1;
    height: auto;
    object-fit: cover;
    width: 100%;
}

/* PagesVN CardAvatar - css-79elbk */
.css-79elbk {
    position: relative;
}

/* PagesVN CardImage - css-1um5x78 */
.css-1um5x78 {
    transition-duration: 300ms;
    transition-property: transform;
    width: var(--hi-sizes-full);
    height: var(--hi-sizes-full);
    object-fit: cover;
}

.css-1um5x78:not([src]) {
    visibility: hidden;
}

/* Full Avatar Style - PagesVN CSS with curves */
.avatar-full .CardHeaderFlat {
    background: transparent !important;
    overflow: visible !important;
    height: auto !important;
    min-height: 12rem;
}

.avatar-full .css-vwehpi {
    background: var(--hi-colors-primary);
    color: rgb(255,255,255);
    min-height: 12rem;
    position: relative;
    transition-duration: 300ms;
    transition-property: background-color;
    will-change: background-color;
}

.avatar-full .css-vwehpi .CardAvatar {
    aspect-ratio: 1/1;
    height: auto;
    object-fit: cover;
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
}

.avatar-full .css-1um5x78 {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition-duration: 300ms;
    transition-property: transform;
    border: none;
}

/* PagesVN Curve SVG Wrapper - css-1lkdozs */
.css-1lkdozs {
    bottom: -2px;
    left: -2px;
    position: absolute;
    width: calc(100% + 4px);
    z-index: 5;
}

/* PagesVN Curve SVG - css-5gp8mf */
.css-5gp8mf {
    color: var(--hi-colors-primary);
    display: block;
    width: var(--hi-sizes-full);
}

.css-5gp8mf path {
    transition-duration: 300ms;
    transition-property: fill;
}

/* PagesVN Company Logo Container - css-r5kemq */
.css-r5kemq {
    inset: 30% 0px 0px 65%;
    position: absolute;
}

.css-r5kemq img {
    box-sizing: border-box;
    display: block;
    height: var(--hi-sizes-full);
    left: 50%;
    object-fit: contain;
    object-position: 75% 50%;
    padding: 0px 1rem;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: var(--hi-sizes-full);
    z-index: 1;
}

/* PagesVN Company Logo Image - css-1qbep2m */
.css-1qbep2m {
    transition-duration: 300ms;
    transition-property: transform;
}

.css-1qbep2m:not([src]) {
    visibility: hidden;
}

/* Mobile Responsive Avatar Styles */
@media (max-width: 768px) {
    /* Mini/Normal Avatar Mobile - Fix positioning */
    .avatar-mini .CardAvatar,
    .avatar-normal .CardAvatar {
        left: 16px;
        top: 20px; /* Reduced from 30px */
    }
    
    .avatar-mini .CardImage,
    .avatar-normal .CardImage,
    .card-avatar-placeholder {
        width: 90px; /* Reduced from 100px */
        height: 90px;
        border-radius: 12px;
        border: 4px solid white;
    }
    
    .card-avatar-placeholder i {
        font-size: 36px; /* Reduced from 40px */
    }
    
    .avatar-mini .CardHeaderFlat,
    .avatar-normal .CardHeaderFlat {
        height: 90px; /* Match avatar size */
    }
    
    /* Full Avatar Mobile - Fix SVG and container */
    .avatar-full .css-vwehpi {
        min-height: 9rem; /* Reduced from 10rem */
    }
    
    .avatar-full .CardHeaderFlat {
        min-height: 9rem;
        overflow: visible !important; /* Must be visible for curves */
        background: transparent !important;
    }
    
    /* Fix Full Avatar positioning inside container */
    .avatar-full .css-79elbk {
        aspect-ratio: 1/1 !important;
        height: 9rem !important;
        width: 9rem !important;
        position: relative !important;
        margin: 0 auto !important;
    }
    
    /* Full Avatar CardAvatar - Make sure it shows full image */
    .avatar-full .css-vwehpi .CardAvatar {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    
    /* Ensure SVG scales properly on mobile */
    .css-1lkdozs {
        bottom: -2px !important;
        left: -2px !important;
        width: calc(100% + 4px) !important;
        position: absolute !important;
        z-index: 5 !important;
    }
    
    .css-5gp8mf {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    
    /* Company Logo Mobile - Size constraints only */
    .css-r5kemq img {
        max-width: 60px !important;
        max-height: 60px !important;
    }
}

@media (max-width: 480px) {
    /* Small Mobile Avatar - Better proportions */
    .avatar-mini .CardAvatar,
    .avatar-normal .CardAvatar {
        left: 12px;
        top: 15px; /* Better centering */
    }
    
    .avatar-mini .CardImage,
    .avatar-normal .CardImage,
    .card-avatar-placeholder {
        width: 70px; /* Smaller for mobile */
        height: 70px;
        border-radius: 8px;
        border: 3px solid white;
    }
    
    .card-avatar-placeholder i {
        font-size: 28px; /* Proportional to size */
    }
    
    .avatar-mini .CardHeaderFlat,
    .avatar-normal .CardHeaderFlat {
        height: 70px; /* Match avatar */
    }
    
    /* Full Avatar Small Mobile - Compact but functional */
    .avatar-full .css-vwehpi {
        min-height: 7rem; /* More compact */
    }
    
    .avatar-full .CardHeaderFlat {
        min-height: 7rem !important;
        overflow: visible !important;
        background: transparent !important;
    }
    
    /* Fix full avatar aspect ratio on small screens */
    .avatar-full .css-79elbk {
        height: 7rem !important;
        width: 7rem !important;
        position: relative !important;
        margin: 0 auto !important;
        aspect-ratio: 1/1 !important;
    }
    
    /* Full Avatar CardAvatar - Make sure it shows full image */
    .avatar-full .css-vwehpi .CardAvatar {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    
    /* SVG adjustments for small screens */
    .css-1lkdozs {
        bottom: -2px !important;
        left: -2px !important;
        width: calc(100% + 4px) !important;
        position: absolute !important;
        z-index: 5 !important;
    }
    
    /* Ensure SVG maintains aspect ratio */
    .css-5gp8mf {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    
    .css-5gp8mf path {
        vector-effect: non-scaling-stroke;
    }
    
    /* Company Logo Small Mobile - Size constraints only */
    .css-r5kemq img {
        max-width: 50px !important;
        max-height: 50px !important;
    }
}