/**
 * Enterprise Avatar System
 * FAANG-quality avatar implementation using Bootstrap 5 color system
 * Fully integrated with xDocket design system
 */

/* ==================== BASE AVATAR STYLES ==================== */
.avatar-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    line-height: 1;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    font-weight: 600;
    color: #ffffff;
    vertical-align: middle;
    box-sizing: border-box;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

    /* Ensure circular avatars */
    .avatar-initials.rounded-circle {
        border-radius: 50% !important;
    }

    /* ==================== BOOTSTRAP COLOR MAPPING ==================== */
    /* Using actual Bootstrap 5 color variables for consistency */

    .avatar-initials.bg-primary {
        background-color: var(--bs-primary, #0d6efd) !important;
        color: #ffffff !important;
    }

    .avatar-initials.bg-secondary {
        background-color: var(--bs-secondary, #6c757d) !important;
        color: #ffffff !important;
    }

    .avatar-initials.bg-success {
        background-color: var(--bs-success, #198754) !important;
        color: #ffffff !important;
    }

    .avatar-initials.bg-info {
        background-color: var(--bs-info, #0dcaf0) !important;
        color: #ffffff !important;
    }

    .avatar-initials.bg-warning {
        background-color: var(--bs-warning, #ffc107) !important;
        color: #212529 !important; /* Dark text for better contrast on yellow */
    }

    .avatar-initials.bg-danger {
        background-color: var(--bs-danger, #dc3545) !important;
        color: #ffffff !important;
    }

    .avatar-initials.bg-dark {
        background-color: var(--bs-dark, #212529) !important;
        color: #ffffff !important;
    }

    /* Professional subtle gradients for depth */
    .avatar-initials.bg-primary {
        background: linear-gradient(135deg, var(--bs-primary) 0%, color-mix(in srgb, var(--bs-primary) 85%, black) 100%) !important;
    }

    .avatar-initials.bg-success {
        background: linear-gradient(135deg, var(--bs-success) 0%, color-mix(in srgb, var(--bs-success) 85%, black) 100%) !important;
    }

    .avatar-initials.bg-info {
        background: linear-gradient(135deg, var(--bs-info) 0%, color-mix(in srgb, var(--bs-info) 85%, black) 100%) !important;
    }

    .avatar-initials.bg-warning {
        background: linear-gradient(135deg, var(--bs-warning) 0%, color-mix(in srgb, var(--bs-warning) 85%, black) 100%) !important;
    }

    .avatar-initials.bg-danger {
        background: linear-gradient(135deg, var(--bs-danger) 0%, color-mix(in srgb, var(--bs-danger) 85%, black) 100%) !important;
    }

    .avatar-initials.bg-secondary {
        background: linear-gradient(135deg, var(--bs-secondary) 0%, color-mix(in srgb, var(--bs-secondary) 85%, black) 100%) !important;
    }

    .avatar-initials.bg-dark {
        background: linear-gradient(135deg, var(--bs-dark) 0%, color-mix(in srgb, var(--bs-dark) 85%, black) 100%) !important;
    }

/* ==================== SIZE VARIANTS ==================== */
.avatar-xs {
    width: 24px !important;
    height: 24px !important;
    font-size: 10px !important;
}

.avatar-sm {
    width: 32px !important;
    height: 32px !important;
    font-size: 12px !important;
}

.avatar-md {
    width: 40px !important;
    height: 40px !important;
    font-size: 16px !important;
}

.avatar-lg {
    width: 48px !important;
    height: 48px !important;
    font-size: 18px !important;
}

.avatar-xl {
    width: 64px !important;
    height: 64px !important;
    font-size: 24px !important;
}

.avatar-xxl {
    width: 96px !important;
    height: 96px !important;
    font-size: 36px !important;
}

/* ==================== SIDEBAR INTEGRATION ==================== */
/* Specific styles for sidebar avatar */
.sidebar-user-material .avatar-initials {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .sidebar-user-material .avatar-initials:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

/* Dark sidebar compatibility */
.sidebar-dark .avatar-initials {
    border: 2px solid rgba(255, 255, 255, 0.1);
}

/* ==================== IMAGE FALLBACK ==================== */
/* Handle broken/missing images */
img[data-profile-image]:not([src]),
img[data-profile-image][src=""],
img[data-profile-image][src*="default-avatar"],
img[data-profile-image][src*="blank.svg"] {
    display: none !important;
}

/* Smooth image loading */
img[data-profile-image] {
    object-fit: cover;
    background-color: var(--bs-gray-200);
    transition: opacity 0.3s ease;
}

/* ==================== HOVER & INTERACTIVE STATES ==================== */
.avatar-initials.avatar-interactive {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    .avatar-initials.avatar-interactive:hover {
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .avatar-initials.avatar-interactive:active {
        transform: scale(0.95);
    }

/* ==================== AVATAR GROUPS ==================== */
.avatar-group {
    display: inline-flex;
    flex-direction: row-reverse;
}

    .avatar-group > * {
        margin-left: -8px;
        border: 2px solid var(--bs-white);
        transition: transform 0.2s ease, z-index 0.2s ease;
    }

        .avatar-group > *:hover {
            transform: translateY(-2px) scale(1.1);
            z-index: 10;
        }

        .avatar-group > *:first-child {
            margin-left: 0;
        }

/* ==================== STATUS INDICATORS ==================== */
.avatar-status {
    position: relative;
    display: inline-block;
}

    .avatar-status::after {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        width: 25%;
        height: 25%;
        min-width: 8px;
        min-height: 8px;
        border-radius: 50%;
        border: 2px solid var(--bs-white);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .avatar-status.status-online::after {
        background-color: var(--bs-success);
    }

    .avatar-status.status-offline::after {
        background-color: var(--bs-secondary);
    }

    .avatar-status.status-busy::after {
        background-color: var(--bs-danger);
    }

    .avatar-status.status-away::after {
        background-color: var(--bs-warning);
    }

/* ==================== ACCESSIBILITY ==================== */
.avatar-initials[role="img"] {
    speak: literal-punctuation;
}

.avatar-initials:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* ==================== DARK MODE SUPPORT ==================== */
@media (prefers-color-scheme: dark) {
    .avatar-initials {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    .avatar-group > * {
        border-color: var(--bs-gray-900);
    }
}

/* ==================== RESPONSIVE DESIGN ==================== */
@media (max-width: 576px) {
    .avatar-xxl {
        width: 64px !important;
        height: 64px !important;
        font-size: 24px !important;
    }
}

/* ==================== PRINT STYLES ==================== */
@media print {
    .avatar-initials {
        background: var(--bs-gray-300) !important;
        color: var(--bs-dark) !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}