/* =============================================================================
   ОБЩИЕ UI КОМПОНЕНТЫ
   =============================================================================
   Централизованные стили для переиспользуемых UI элементов.
   Использует дизайн-токены из tokens.css
   ============================================================================= */

/* =========================================================================
   ПУСТЫЕ СОСТОЯНИЯ
   ========================================================================= */

/* Сообщение об отсутствии элементов */
.empty-message {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-text-tertiary);
    font-size: var(--text-md);
    padding: var(--space-5);
    border-radius: var(--radius-l);
    min-height: 150px;
    border: 1px solid transparent;
    background: 
        linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
        linear-gradient(to bottom left, var(--border-gradient-start), var(--border-gradient-end)) border-box;
}

/* Состояние "пусто" с иконкой */
.empty-state {
    text-align: center;
    color: var(--color-text-tertiary);
    padding: var(--space-8) var(--space-5);
    font-size: var(--text-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--space-3);
}

.empty-state::before {
    content: '📊';
    font-size: 48px;
    opacity: 0.5;
}

/* =========================================================================
   ИНДИКАТОРЫ ЗАГРУЗКИ
   ========================================================================= */

.loading-indicator {
    text-align: center;
    padding: var(--space-5);
    color: var(--color-text-tertiary);
    font-size: var(--text-base);
}

/* =========================================================================
   ИНФОРМАЦИОННЫЕ БЛОКИ
   ========================================================================= */

/* Информация под списками (история, рефералы и т.д.) */
.history-info {
    padding: var(--space-4) 0;
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
}

/* =========================================================================
   СООБЩЕНИЯ ОБ ОШИБКАХ
   ========================================================================= */

.error-message {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100px;
    width: 100%;
    color: var(--color-error);
    font-size: var(--text-md);
    text-align: center;
    padding: 0 var(--space-3);
}

/* =========================================================================
   БАЗОВЫЕ СТИЛИ ДЛЯ АВАТАРОВ ПОЛЬЗОВАТЕЛЕЙ
   =========================================================================
   Размеры переопределяются в контекстных файлах:
   - style.css: .user-info .user-avatar (40px) - header главной страницы
   - leaderboard.css: .leaderboard-item .user-avatar (44px) - таблица лидеров
   - referral.css: .referral-history-item .user-avatar (44px) - список рефералов
   ========================================================================= */

/* Базовый аватар пользователя */
.user-avatar {
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.user-avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--weight-bold);
    color: #FFFFFF;
    background: var(--gradient-button);
    border-radius: 50%;
}