/**
 * Navbar Profile Photo Circle Fix
 * Ensures profile photos remain circular regardless of aspect ratio
 *
 * Issue: Portrait/vertical photos were displaying as ovals
 * Solution: Force square dimensions with object-fit cover and centered positioning
 *
 * Author: Claude Code
 * Date: November 5, 2025
 */

/* Avatar container - ensure square shape */
.avatar {
    position: relative;
    display: inline-block;
}

/* Main navbar avatar (dropdown trigger) */
.navbar .avatar img.rounded-circle {
    width: 40px !important;
    height: 40px !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 50% !important;
}

/* Avatar in dropdown menu */
.navbar .dropdown-menu .avatar img.rounded-circle {
    width: 40px !important;
    height: 40px !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 50% !important;
}

/* Ensure all rounded-circle images in avatars maintain aspect ratio */
.avatar img.rounded-circle {
    display: block;
    object-fit: cover;
    object-position: center;
}

/* Fix for avatar-online indicator positioning - slightly outside bottom-right */
.avatar-online::before {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background-color: #28c76f;
    border: 2px solid #fff;
    content: '';
    z-index: 1;
}

/* Ensure avatar container doesn't stretch */
.navbar .avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

/* Fix for dropdown avatar */
.navbar .dropdown-menu .avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

/* Additional fix for w-px-40 class to ensure height matches */
.w-px-40.rounded-circle {
    width: 40px !important;
    height: 40px !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* Generic fix for all avatar images */
.avatar-online img,
.avatar-offline img,
.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Prevent image stretching in any avatar context */
img.rounded-circle[alt] {
    max-width: 100%;
    height: auto;
    min-height: 100%;
}

/* Specific override for navbar avatars with h-auto class */
.navbar .avatar img.h-auto.rounded-circle {
    height: 40px !important;
    width: 40px !important;
}

/* Institution staff list - DataTables rendered avatars */
.datatables-users img.rounded-circle,
.user-name img.rounded-circle {
    width: 38px !important;
    height: 38px !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* All avatar containers in DataTables */
.dataTables_wrapper .avatar img {
    object-fit: cover;
    object-position: center;
}

/* Staff list and institution logos */
img.rounded[style*="width: 80px"] {
    object-fit: cover !important;
    object-position: center !important;
}

/* Generic fix for all rounded-circle images */
img.rounded-circle {
    object-fit: cover;
    object-position: center;
}