/**
 * ActiveUsers Frontend Styles
 * 
 * Minimal, clean styling for active user display components.
 * Uses BEM methodology for easy customization.
 * 
 * @package ActiveUsers
 * @since 1.0.0
 */

/* ==========================================================================
   Active Users Container
   ========================================================================== */

.activeusers {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.4;
    color: #374151;
}

.activeusers--large {
    font-size: 1rem;
}

.activeusers--small {
    font-size: 0.75rem;
}

/* ==========================================================================
   Individual Count Elements
   ========================================================================== */

.activeusers__count {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.activeusers__label {
    font-weight: 500;
    color: #6B7280;
}

.activeusers__number {
    font-weight: 600;
    color: #059669;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Specific Count Types
   ========================================================================== */

.activeusers__total .activeusers__number {
    color: #059669;
}

.activeusers__users .activeusers__number {
    color: #3B82F6;
}

.activeusers__guests .activeusers__number {
    color: #8B5CF6;
}

/* ==========================================================================
   Visual Indicators
   ========================================================================== */

.activeusers__indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #059669;
    margin-right: 0.25rem;
}

.activeusers__indicator--pulse {
    animation: activeusers-pulse 2s infinite;
}

@keyframes activeusers-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 640px) {
    .activeusers {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    
    .activeusers--horizontal-mobile {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
    }
}

/* ==========================================================================
   Theme Variations
   ========================================================================== */

/* Dark Theme */
.activeusers--dark {
    color: #E5E7EB;
}

.activeusers--dark .activeusers__label {
    color: #9CA3AF;
}

.activeusers--dark .activeusers__total .activeusers__number {
    color: #10B981;
}

.activeusers--dark .activeusers__users .activeusers__number {
    color: #60A5FA;
}

.activeusers--dark .activeusers__guests .activeusers__number {
    color: #A78BFA;
}

/* Minimal Theme */
.activeusers--minimal {
    gap: 1rem;
}

.activeusers--minimal .activeusers__label {
    display: none;
}

.activeusers--minimal .activeusers__count::before {
    content: attr(data-label) ": ";
    font-weight: 500;
    color: #6B7280;
}

/* Badge Theme */
.activeusers--badge .activeusers__count {
    background-color: #F3F4F6;
    border-radius: 1rem;
    padding: 0.25rem 0.75rem;
    border: 1px solid #E5E7EB;
}

.activeusers--badge.activeusers--dark .activeusers__count {
    background-color: #374151;
    border-color: #4B5563;
}

/* ==========================================================================
   Widget Styles
   ========================================================================== */

.activeusers-widget {
    padding: 1rem;
    background-color: #FFFFFF;
    border-radius: 0.5rem;
    border: 1px solid #E5E7EB;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.activeusers-widget__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
    margin: 0 0 0.75rem 0;
}

.activeusers-widget__content {
    margin: 0;
}

.activeusers-widget--dark {
    background-color: #1F2937;
    border-color: #374151;
}

.activeusers-widget--dark .activeusers-widget__title {
    color: #F9FAFB;
}

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

.activeusers--loading {
    opacity: 0.6;
}

.activeusers--loading .activeusers__number {
    background: linear-gradient(90deg, #E5E7EB 25%, #F3F4F6 50%, #E5E7EB 75%);
    background-size: 200% 100%;
    animation: activeusers-loading 1.5s infinite;
    color: transparent;
    border-radius: 0.25rem;
    min-width: 2ch;
    min-height: 1.2em;
}

@keyframes activeusers-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

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

.activeusers--error {
    color: #DC2626;
}

.activeusers--error .activeusers__indicator {
    background-color: #DC2626;
}

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

.activeusers__sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .activeusers {
        border: 1px solid;
        padding: 0.25rem;
    }
    
    .activeusers__number {
        font-weight: 700;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .activeusers__indicator--pulse {
        animation: none;
    }
    
    .activeusers--loading .activeusers__number {
        animation: none;
        background: #E5E7EB;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .activeusers {
        color: #000 !important;
        background: transparent !important;
    }
    
    .activeusers__indicator {
        display: none;
    }
    
    .activeusers::after {
        content: " (Stand: " attr(data-timestamp) ")";
        font-size: 0.75em;
        color: #666;
    }
}