/* ============================================
   Avatar Component - Nexus Design System
   ============================================
   
   Usage:
   ------
   Size variants using data-size attribute:
   
   <div class="nexus-avatar" data-size="xs">...</div>
   <div class="nexus-avatar" data-size="sm">...</div>
   <div class="nexus-avatar" data-size="md">...</div>  (default)
   <div class="nexus-avatar" data-size="lg">...</div>
   <div class="nexus-avatar" data-size="xl">...</div>
   <div class="nexus-avatar" data-size="xxl">...</div>
   
   Badge variants using data-badge attribute:
   
   <div class="nexus-avatar" data-badge="online">...</div>
   <div class="nexus-avatar" data-badge="company">...</div>
   
   ============================================ */
:root {
  --nexus-avatar-background-color:var(--nexus-ref-primary-90);
  --nexus-avatar-text-color:var(--nexus-ref-primary-20);

    /* Avatar Label Font Sizes - Dynamic per size variant */
    --nexus-avatar-label-name-font-size-sm: var(--nexus-sys-typescale-text-sm-font-size);
    /* 14px */
    --nexus-avatar-label-name-font-size-md: var(--nexus-sys-typescale-text-sm-font-size);
    /* 14px */
    --nexus-avatar-label-name-font-size-lg: var(--nexus-sys-typescale-text-md-font-size);
    /* 16px */
    --nexus-avatar-label-name-font-size-xl: var(--nexus-sys-typescale-text-lg-font-size);
    /* 18px */





    --nexus-avatar-label-email-font-size-sm: var(--nexus-sys-typescale-text-xs-font-size);
    /* 12px */
    --nexus-avatar-label-email-font-size-md: var(--nexus-sys-typescale-text-sm-font-size);
    /* 14px */
    --nexus-avatar-label-email-font-size-lg: var(--nexus-sys-typescale-text-md-font-size);
    /* 16px */
    --nexus-avatar-label-email-font-size-xl: var(--nexus-sys-typescale-text-lg-font-size);
    /* 18px */

    /* Avatar Label Line Heights - Dynamic per size variant */
    --nexus-avatar-label-name-line-height-sm: var(--nexus-sys-typescale-text-sm-line-height);
    /* 20px */
    --nexus-avatar-label-name-line-height-md: var(--nexus-sys-typescale-text-sm-line-height);
    /* 20px */
    --nexus-avatar-label-name-line-height-lg: var(--nexus-sys-typescale-text-md-line-height);
    /* 24px */
    --nexus-avatar-label-name-line-height-xl: var(--nexus-sys-typescale-text-lg-line-height);
    /* 28px */

    /* Avatar Label Line Heights - Dynamic per size variant */
    --nexus-avatar-label-email-line-height-sm: var(--nexus-sys-typescale-text-xs-line-height);
    /* 18px */
    --nexus-avatar-label-email-line-height-md: var(--nexus-sys-typescale-text-sm-line-height);
    /* 20px */
    --nexus-avatar-label-email-line-height-lg: var(--nexus-sys-typescale-text-md-line-height);
    /* 24px */
    --nexus-avatar-label-email-line-height-xl: var(--nexus-sys-typescale-text-md-line-height);
    /* 24px */

    --nexus-avatar-label-name-font-weight: var(--nexus-sys-typescale-font-weight-semibold);
    /* 600 */

    --nexus-avatar-label-email-font-weight: var(--nexus-sys-typescale-font-weight-regular);
    /* 400 */



    --nexus-avatar-label-name-color: var(--nexus-ref-neutral-30);
    --nexus-avatar-label-email-color: var(--nexus-ref-neutral-90);

    --nexus-avatar-group-number-xs: var(--nexus-sys-typescale-text-xs-font-size);
    /* 12px */
    --nexus-avatar-group-number-sm: var(--nexus-sys-typescale-text-sm-font-size);
    /* 14px */
    --nexus-avatar-group-number-md: var(--nexus-sys-typescale-text-md-font-size);
    /* 16px */

    /* Avatar Motion Tokens */
    --nexus-avatar-transition-duration: var(--nexus-sys-motion-duration-quick, 0.2s);
    --nexus-avatar-transition-easing: var(--nexus-sys-motion-easing-standard, ease);

    /* Avatar Badge Measurements */
    --nexus-avatar-badge-offset-bottom: 0px;
    --nexus-avatar-badge-offset-right: 1px;
    --nexus-avatar-badge-border-width: 2px;
    --nexus-avatar-badge-z-index: 10;

    /* Focus/Active Tokens */
    --nexus-avatar-focus-ring-width: 3px;
    --nexus-avatar-active-border-color: var(--nexus-ref-primary-50);
    --nexus-avatar-focus-outline-width: 2px;
    --nexus-avatar-focus-outline-offset: 2px;

    /* Image/Placeholder Tokens */
    --nexus-avatar-image-missing-opacity: 0.8;
    --nexus-avatar-placeholder-icon-opacity: 0.6;

    /* Group/Stack Tokens */
    --nexus-avatar-group-overlap: -10px;
    --nexus-avatar-group-border-width: 2px;
    --nexus-avatar-group-hover-z-index: 1;

    /* Counter default font-size for md */
    --nexus-avatar-group-number-default: var(--nexus-avatar-group-number-md);

    /* Label Group Layout Tokens */
    --nexus-avatar-label-group-gap: 12px;
    --nexus-avatar-label-group-padding: 8px;
    --nexus-avatar-label-group-radius: 8px;
    --nexus-avatar-label-group-transition-duration: var(--nexus-avatar-transition-duration);
    --nexus-avatar-label-group-transition-easing: var(--nexus-avatar-transition-easing);
    --nexus-avatar-label-group-hover-bg: var(--nexus-ref-neutral-95);
    --nexus-avatar-label-group-active-bg: var(--nexus-ref-neutral-90);
    --nexus-avatar-label-group-focus-outline-width: 2px;
    --nexus-avatar-label-group-focus-outline-offset: 2px;

    /* Size-specific Label Group spacing */
    --nexus-avatar-label-group-gap-sm: 10px;
    --nexus-avatar-label-group-padding-sm: 12px;
    --nexus-avatar-label-group-gap-md: 12px;
    --nexus-avatar-label-group-padding-md: 12px;
    --nexus-avatar-label-group-gap-lg: 12px;
    --nexus-avatar-label-group-padding-lg: 12px;
    --nexus-avatar-label-group-gap-xl: 16px;
    --nexus-avatar-label-group-padding-xl: 12px;

    /* Company badge/elevation */
    --nexus-avatar-company-badge-shadow: var(--nexus-sys-elevation-1, 0 1px 3px rgba(0, 0, 0, 0.1));

    /* Color Tokens */
    --nexus-avatar-badge-border-color: var(--nexus-ref-neutral-100);
    --nexus-avatar-badge-bg: var(--nexus-ref-neutral-100);
    --nexus-avatar-indicator-online-color: var(--nexus-ref-success-50);
    --nexus-avatar-indicator-offline-color: var(--nexus-ref-neutral-90);
    --nexus-avatar-focus-outline-color: var(--nexus-ref-primary-80);
    --nexus-avatar-focus-border-color: var(--nexus-ref-primary-30);
    --nexus-avatar-active-ring-color: var(--nexus-ref-primary-80);
    --nexus-avatar-group-border-color: var(--nexus-ref-neutral-100);
    --nexus-avatar-counter-bg: var(--nexus-ref-primary-90);
    --nexus-avatar-counter-text: var(--nexus-ref-primary-20);
    --nexus-avatar-company-badge-icon: var(--data-badge-icon, url('../icons/zap.svg'));
}

/* Base Avatar Styles */
.nexus-avatar {
    /* Custom properties for size variants */
    --avatar-size: 40px;
    /* default: md */
    --initials-size: 14px;
    --badge-size: 12px;

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--avatar-size);
    height: var(--avatar-size);
    border-radius: 50%;
    background-color: var(--nexus-avatar-background-color);
    color: var(--nexus-avatar-text-color);
    overflow: visible;
    /* Changed from hidden to show badges */
    flex-shrink: 0;
    user-select: none;
    transition: all var(--nexus-avatar-transition-duration) var(--nexus-avatar-transition-easing);
}

/* Image Styles */
.nexus-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
    overflow: hidden;
    /* Clip image within circle */
}

/* Hide image when fallback is active */
.nexus-avatar.is-fallback img {
    display: none;
}

/* Initials Display */
.nexus-avatar-initials {
    display: none;
    font-size: var(--initials-size);
    font-weight: var(--nexus-ref-font-weight-semibold);
    line-height: 1;
    text-transform: uppercase;
    color: var(--nexus-avatar-text-color);
}

.nexus-avatar.show-initials .nexus-avatar-initials {
    display: block;
}

/* Placeholder Icon (user icon from your icons folder) */
.nexus-avatar-placeholder-icon {
    display: none;
    width: 60%;
    height: 60%;
    opacity: var(--nexus-avatar-placeholder-icon-opacity);
}

.nexus-avatar.show-icon .nexus-avatar-placeholder-icon {
    display: block;

}

.nexus-avatar.show-icon::before {
    content: '';
    display: block;
    width: 60%;
    height: 60%;
    background-image: url('../icons/avatarPlaveholder.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Badge Container */
.nexus-avatar-badge {
    display: none;
    position: absolute;
    bottom: var(--nexus-avatar-badge-offset-bottom);
    /* Slightly negative to sit on edge */
    right: var(--nexus-avatar-badge-offset-right);
    /* Slightly negative to sit on edge */
    width: var(--badge-size);
    height: var(--badge-size);
    border-radius: 50%;
    border: var(--nexus-avatar-badge-border-width) solid var(--nexus-avatar-badge-border-color);
    background-color: var(--nexus-avatar-badge-bg);
    box-sizing: border-box;
    z-index: var(--nexus-avatar-badge-z-index);
    /* Ensure badge appears above avatar */
}

/* Online Badge (green dot) */
.nexus-avatar[data-badge="indicator"] .nexus-avatar-badge {
    display: block;
}
.nexus-avatar[data-badge="indicator"][data-user-active="true"] .nexus-avatar-badge {
    display: block;
    background-color: var(--nexus-avatar-indicator-online-color);
}
.nexus-avatar[data-badge="indicator"][data-user-active="false"] .nexus-avatar-badge {
    display: block;
    background-color: var(--nexus-avatar-indicator-offline-color);
}

/* Company Badge (icon) */
.nexus-avatar[data-badge="company"] .nexus-avatar-badge {
    display: block;
    background-image: var(--nexus-avatar-company-badge-icon);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    box-shadow: var(--nexus-avatar-company-badge-shadow);
}

/* ============================================
   Size Variants
   ============================================ */

/* Extra Small - 24px */
.nexus-avatar[data-size="xs"] {
    --avatar-size: 24px;
    --initials-size: 10px;
    --badge-size: 6px;
}

/* Small - 32px */
.nexus-avatar[data-size="sm"] {
    --avatar-size: 32px;
    --initials-size: 12px;
    --badge-size: 8px;
}

/* Medium - 40px (default) */
.nexus-avatar[data-size="md"] {
    --avatar-size: 40px;
    --initials-size: 14px;
    --badge-size: 10px;
}

/* Large - 48px */
.nexus-avatar[data-size="lg"] {
    --avatar-size: 48px;
    --initials-size: 16px;
    --badge-size: 12px;
}

/* Extra Large - 56px */
.nexus-avatar[data-size="xl"] {
    --avatar-size: 56px;
    --initials-size: 22px;
    --badge-size: 14px;
}

/* 2X Extra Large - 64px */
.nexus-avatar[data-size="xxl"] {
    --avatar-size: 64px;
    --initials-size: 22px;
    --badge-size: 16px;
}

/* ============================================
   States
   ============================================ */

/* Hover State */
.nexus-avatar:active {
    border-color: var(--nexus-avatar-active-border-color);
    box-shadow: 0 0 0 var(--nexus-avatar-focus-ring-width) var(--nexus-avatar-active-ring-color);
}

/* Focus State */
.nexus-avatar:focus-visible {
    outline: var(--nexus-avatar-focus-outline-width) solid var(--nexus-avatar-focus-outline-color);
    outline-offset: var(--nexus-avatar-focus-outline-offset);
    border-color: var(--nexus-avatar-focus-border-color);
}

/* Interactive avatars (as buttons or links) */
button.nexus-avatar,
a.nexus-avatar {
    cursor: pointer;
    border: none;
    background-clip: padding-box;
}





/* ============================================
   Accessibility
   ============================================ */


/* Make sure images have proper alt text */
.nexus-avatar img[alt=""],
.nexus-avatar img:not([alt]) {
    opacity: var(--nexus-avatar-image-missing-opacity);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {

    .nexus-avatar,
    .nexus-avatar:hover,
    button.nexus-avatar:active,
    a.nexus-avatar:active {
        transition: none;
        transform: none;
    }
}

/* ============================================
   Group/Stack Avatars
   ============================================ */

.nexus-avatar-group {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding-inline-start: 10px;
}

.nexus-avatar-group .nexus-avatar {
    margin-left: var(--nexus-avatar-group-overlap);
    border: var(--nexus-avatar-group-border-width) solid var(--nexus-avatar-group-border-color);
}

/* Keep consistent overlap for all items including the last one */

.nexus-avatar-group .nexus-avatar:hover {
    z-index: var(--nexus-avatar-group-hover-z-index);
}

/* Counter avatar for overflow (+N) */
.nexus-avatar-counter {
    background-color: var(--nexus-avatar-counter-bg);
    color: var(--nexus-avatar-counter-text);
    font-weight: var(--nexus-ref-font-weight-semibold);
}

.nexus-avatar-counter::before {
    content: attr(data-count);
    display: block;
    font-size: var(--nexus-avatar-group-number-default);
    line-height: 1;
}

/* Tune counter font-size by size variant */
.nexus-avatar-counter[data-size="xs"]::before {
    font-size: var(--nexus-avatar-group-number-xs);
}

.nexus-avatar-counter[data-size="sm"]::before {
    font-size: var(--nexus-avatar-group-number-sm);
}

.nexus-avatar-counter[data-size="md"]::before {
    font-size: var(--nexus-avatar-group-number-md);
}

/* ============================================
   Avatar Label Groups
   ============================================ */

.nexus-avatar-label-group {
    display: flex;
    align-items: center;
    gap: var(--nexus-avatar-label-group-gap);
    border-radius: var(--nexus-avatar-label-group-radius);
    transition: background-color var(--nexus-avatar-label-group-transition-duration) var(--nexus-avatar-label-group-transition-easing);
}

.nexus-avatar-label-content {
    display: flex;
    flex-direction: column;
    gap: 0px;
    min-width: 0;
    /* Enable text truncation */
}

.nexus-avatar-label-name {
    font-size: var(--nexus-avatar-label-name-font-size-md);
    font-weight: var(--nexus-avatar-label-name-font-weight);
    color: var(--nexus-avatar-label-name-color);
    line-height: var(--nexus-avatar-label-name-line-height-md);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

}

.nexus-avatar-label-desc {
    font-size: var(--nexus-avatar-label-email-font-size-md);
    font-weight: var(--nexus-avatar-label-email-font-weight);
    color: var(--nexus-avatar-label-email-color);
    line-height: var(--nexus-avatar-label-email-line-height-md);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* Interactive Avatar Label Groups (as buttons or links) */
button.nexus-avatar-label-group,
a.nexus-avatar-label-group {
    border: none;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    text-align: left;
    width: 100%;
    max-width: 300px;
}

.nexus-avatar-label-group--interactive:hover {
    background-color: var(--nexus-avatar-label-group-hover-bg);
}

.nexus-avatar-label-group--interactive:active {
    background-color: var(--nexus-avatar-label-group-active-bg);
}

.nexus-avatar-label-group--interactive:focus-visible {
    outline: var(--nexus-avatar-label-group-focus-outline-width) solid var(--nexus-ref-primary-50);
    outline-offset: var(--nexus-avatar-label-group-focus-outline-offset);
}

/* Size-specific adjustments
   Support either:
   - data-size on inner .nexus-avatar
   - or data-size directly on .nexus-avatar-label-group when no avatar is present
*/
.nexus-avatar-label-group[data-size="sm"],
.nexus-avatar-label-group:has(.nexus-avatar[data-size="sm"]) {
    gap: var(--nexus-avatar-label-group-gap-sm);
    /* padding: var(--nexus-avatar-label-group-padding-sm); */
}

.nexus-avatar-label-group[data-size="sm"] .nexus-avatar-label-name,
.nexus-avatar-label-group:has(.nexus-avatar[data-size="sm"]) .nexus-avatar-label-name {
    font-size: var(--nexus-avatar-label-name-font-size-sm);
    line-height: var(--nexus-avatar-label-name-line-height-sm);
}

.nexus-avatar-label-group[data-size="sm"] .nexus-avatar-label-desc,
.nexus-avatar-label-group:has(.nexus-avatar[data-size="sm"]) .nexus-avatar-label-desc {
    font-size: var(--nexus-avatar-label-email-font-size-sm);
    line-height: var(--nexus-avatar-label-email-line-height-sm);
}



.nexus-avatar-label-group[data-size="md"],
.nexus-avatar-label-group:has(.nexus-avatar[data-size="md"]) {
    gap: var(--nexus-avatar-label-group-gap-md);
}

.nexus-avatar-label-group[data-size="md"] .nexus-avatar-label-name,
.nexus-avatar-label-group:has(.nexus-avatar[data-size="md"]) .nexus-avatar-label-name {
    font-size: var(--nexus-avatar-label-name-font-size-md);
    line-height: var(--nexus-avatar-label-name-line-height-md);
}

.nexus-avatar-label-group[data-size="md"] .nexus-avatar-label-desc,
.nexus-avatar-label-group:has(.nexus-avatar[data-size="md"]) .nexus-avatar-label-desc {
    font-size: var(--nexus-avatar-label-email-font-size-md);
    line-height: var(--nexus-avatar-label-email-line-height-md);
}


.nexus-avatar-label-group[data-size="lg"],
.nexus-avatar-label-group:has(.nexus-avatar[data-size="lg"]) {
    gap: var(--nexus-avatar-label-group-gap-lg);
    /* padding: var(--nexus-avatar-label-group-padding-lg); */
}

.nexus-avatar-label-group[data-size="lg"] .nexus-avatar-label-name,
.nexus-avatar-label-group:has(.nexus-avatar[data-size="lg"]) .nexus-avatar-label-name {
    font-size: var(--nexus-avatar-label-name-font-size-lg);
    line-height: var(--nexus-avatar-label-name-line-height-lg);
}

.nexus-avatar-label-group[data-size="lg"] .nexus-avatar-label-desc,
.nexus-avatar-label-group:has(.nexus-avatar[data-size="lg"]) .nexus-avatar-label-desc {
    font-size: var(--nexus-avatar-label-email-font-size-lg);
    line-height: var(--nexus-avatar-label-email-line-height-lg);
}


.nexus-avatar-label-group[data-size="xl"],
.nexus-avatar-label-group:has(.nexus-avatar[data-size="xl"]) {
    gap: var(--nexus-avatar-label-group-gap-xl);
    /* padding: var(--nexus-avatar-label-group-padding-xl); */
}

.nexus-avatar-label-group[data-size="xl"] .nexus-avatar-label-name,
.nexus-avatar-label-group:has(.nexus-avatar[data-size="xl"]) .nexus-avatar-label-name {
    font-size: var(--nexus-avatar-label-name-font-size-xl);
    line-height: var(--nexus-avatar-label-name-line-height-xl);
}

.nexus-avatar-label-group[data-size="xl"] .nexus-avatar-label-desc,
.nexus-avatar-label-group:has(.nexus-avatar[data-size="xl"]) .nexus-avatar-label-desc {
    font-size: var(--nexus-avatar-label-email-font-size-md);
    line-height: var(--nexus-avatar-label-email-line-height-xl);
}