/* public/group-profile-modal.css */

/* Стили для модального окна профиля группы, использующие переменные для поддержки тем */

.group-profile-modal .modal-content {
    /* Ограничиваем высоту, чтобы окно не было слишком большим на маленьких экранах */
    max-height: 80vh; 
    display: flex;
    flex-direction: column;
}

/* Делаем тело модального окна прокручиваемым, если контента много */
.group-profile-modal .profile-view-body {
    overflow-y: auto; /* Включаем вертикальную прокрутку */
    padding-right: 10px; /* Немного места для скроллбара, чтобы он не прилипал к тексту */
    margin-right: -10px; /* Компенсируем сдвиг от padding-right */
}

/* Контейнер для списка участников */
.group-members-list {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 12px; /* Расстояние между участниками */
}

/* Каждый отдельный участник в списке */
.group-member-item {
    display: flex;
    align-items: center;
    padding: 8px;
    border-radius: 8px;
    transition: background-color 0.2s ease;
    cursor: pointer; /* Показываем, что на элемент можно нажать */
}

/* Эффект при наведении курсора */
.group-member-item:hover {
    background-color: var(--background-modifier-hover); /* Цвет фона при наведении, берется из темы */
}

/* Контейнер для имени и роли */
.member-info {
    display: flex;
    flex-direction: column;
    margin-left: 12px;
}

/* Имя участника */
.member-name {
    font-weight: 600;
    color: var(--header-primary); /* Основной цвет текста, берется из темы */
}

/* Роль участника (admin/member) */
.member-role {
    font-size: 0.8rem;
    color: var(--header-secondary); /* Второстепенный цвет текста, берется из темы */
    text-transform: capitalize; /* Делает первую букву заглавной (e.g., "admin" -> "Admin") */
}

/* Общие стили для секций внутри модального окна, как в профиле пользователя */
.group-profile-modal .profile-view-section {
    margin-top: 20px;
}

.group-profile-modal .profile-view-section-header {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--header-secondary);
    margin-bottom: 8px;
}

.group-profile-modal .profile-view-about {
    font-size: 0.9rem;
    color: var(--text-normal);
    white-space: pre-wrap; /* Сохраняет переносы строк в описании */
}