/* Custom CSS for user status indicator in Filament user menu */

/* Add status indicator to user menu avatar */
[data-filament-user-menu] img[alt*="avatar"],
[data-filament-user-menu] .fi-avatar img,
.fi-user-menu img {
    position: relative;
}

/* Create status indicator using CSS pseudo-element */
[data-filament-user-menu] img[alt*="avatar"]::after,
[data-filament-user-menu] .fi-avatar img::after,
.fi-user-menu img::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid white;
    background-color: #6b7280; /* Default gray for offline */
    z-index: 10;
}

/* Online status - green dot */
.user-online [data-filament-user-menu] img[alt*="avatar"]::after,
.user-online [data-filament-user-menu] .fi-avatar img::after,
.user-online .fi-user-menu img::after {
    background-color: #10b981; /* Green for online */
}

/* Dark mode support */
.dark [data-filament-user-menu] img[alt*="avatar"]::after,
.dark [data-filament-user-menu] .fi-avatar img::after,
.dark .fi-user-menu img::after {
    border-color: #374151; /* Dark gray border */
}