comment/css/mod_comment_styles.css

/* ====================================================================
   ОБЩИЕ СТИЛИ КОММЕНТАРИЕВ И АВАТАРОВ (НОВЫЕ И ОБНОВЛЕННЫЕ)
   ==================================================================== */

/* 1. Общие настройки для блока комментария */
.mod_comment_comment {
    /* Можно добавить небольшой отступ снизу, если стандартный mb-3 недостаточен */
    /* margin-bottom: 1.5rem !important; */
}

/* 2. Контейнер аватара */
.mod_comment_avatar {
    /* Фиксируем размер и убедимся, что аватар не "съедет" */
    width: 48px;
    height: 48px;
    margin-right: 20px !important;
    /* Убедимся, что аватар имеет правильный отступ от метаданных/текста */
    /* margin-right: 15px; */ /* Если вы используете me-3 в HTML, этот CSS не нужен */
}

/* 3. Стиль изображения аватара */
.mod_comment_avatar img {
    /* Если rounded-circle не работает или его нет в Bootstrap */
    border-radius: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Гарантирует, что изображение не исказится */
}

/* 4. Стиль метаданных (Автор, Дата, IP) */
.mod_comment_meta {
    /* Делаем блок метаданных компактнее и выравниваем по верхнему краю */
    line-height: 1.2;
    margin-bottom: 5px !important; /* Чуть меньше отступ от текста */
}

/* 5. Стили текста комментария */
.mod_comment_text {
    /* Увеличиваем межстрочный интервал для лучшей читабельности */
    line-height: 1.5;
}

/* 6. Стили панели действий (Редактировать, Удалить, Ответить) */
.mod_comment_actions a {
    text-decoration: none;
    font-size: 0.9em;
    padding-left: 10px;
    padding-right: 10px;
}


/* ====================================================================
   СТИЛИ ДЛЯ ДРЕВОВИДНОГО ОТОБРАЖЕНИЯ КОММЕНТАРИЕВ (Replies) - ВАШ КОД
   ==================================================================== */

/* 1. Общий контейнер ответа, который находится внутри .mod_comment_comment
   и имеет отступ ms-4 */
.mod_comment_comment .mod_comment_comment.ms-4 {
    /* Добавляем вертикальную линию слева */
    border-left: 3px solid #dee2e6; /* Легкая граница */
    
    /* Уменьшаем margin-left, который дает ms-4, чтобы освободить место
       для линии и при этом не уходить слишком далеко вправо на каждом уровне. */
    margin-left: 20px !important; /* Принудительно уменьшаем отступ */
    padding-left: 15px; /* Отступ между линией и контентом ответа */
    
    /* Опционально: немного отличающийся фон */
    background-color: #f8f9fa;
}

/* 2. Отдельно стилизуем рамку для вложенных карточек, чтобы они не выглядели
   громоздко внутри родителя */
.mod_comment_comment .mod_comment_comment.ms-4 > .mod_comment_box {
    border: none !important; /* Убираем стандартную рамку карточки, чтобы осталась только наша вертикальная линия */
}

/* 3. Убираем рамки у вложенных заголовков, чтобы линия была чистой */
.mod_comment_comment .mod_comment_comment.ms-4 > .mod_comment_box > .card-header {
    border-bottom: none !important;
}

/* 4. Более глубокий уровень вложенности (если ответов много) */
/* Если ответ на ответ имеет дополнительный ms-4, стилизуем его дальше */
.mod_comment_comment .mod_comment_comment.ms-4 .mod_comment_comment.ms-4 {
    border-color: #adb5bd; /* Чуть темнее линия для следующего уровня */
    background-color: #fff; /* Возвращаем белый фон для контраста */
}


/* ====================================================================
   !!! ФИНАЛЬНЫЕ СТИЛИ ДЛЯ ПАГИНАЦИИ !!!
   ==================================================================== */

/* 1. Общий контейнер, который окружает <nav> */
.page_navigation_box {
    padding: 15px 0;
    text-align: center;
}

/* 2. Навигационный элемент <nav> */
.page_navigation_box nav {
    display: inline-block;
}

/* 3. Стиль для списка <ul>. НОВОЕ: используем класс .page_nav, который есть в HTML */
.page_navigation_box ul.page_nav { 
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center; /* НОВОЕ: для выравнивания текста "Страница 1 из 2" */
}

/* 4. Стиль для текста "Страница 1 из 2" */
.page_navigation_box span.pages { /* НОВОЕ ПРАВИЛО */
    margin-right: 15px; /* Отступ от цифр */
    color: #6c757d;
}

/* 5. Элемент списка (<li>) */
.page_navigation_box li {
    margin: 0 4px;
}

/* 6. Ссылки на страницы (<a>) */
/* ВАЖНО: Мы удаляем старый .page_nav_active и добавляем СТИЛИ для ССЫЛОК и АКТИВНОГО SPAN */
.page_navigation_box a.page_nav,
.page_navigation_box span.active { /* ИЗМЕНЕНИЕ: стилизуем span.active */
    display: block;
    min-width: 36px;
    padding: 6px 10px;
    line-height: 1.5;
    text-decoration: none;
    color: #0d6efd; /* Цвет Bootstrap Primary */
    background-color: #fff;
    border: 1px solid #dee2e6; /* Легкая граница */
    border-radius: 4px;
    transition: all 0.2s;
    text-align: center;
}

/* 7. Стили для текущей (активной) страницы */
.page_navigation_box span.active { /* ТОЧНОЕ ПРАВИЛО ДЛЯ АКТИВНОГО ЭЛЕМЕНТА */
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: #fff; /* Белый текст на синем фоне */
    font-weight: bold;
    cursor: default;
}

/* 8. Ховер-эффект для ссылок */
.page_navigation_box a.page_nav:hover {
    color: #fff;
    background-color: #0b5ed7;
    border-color: #0b5ed7;
}



/* Фиксируем подвал комментария: высота и выравнивание вправо */
.mod_comment_footer, 
[id^="timer_container_"], 
.card-footer {
    display: flex !important;
    align-items: center !important;
    /* ПРИЖИМАЕМ КНОПКИ ВПРАВО */
    justify-content: flex-end !important; 
    
    /* ФИКСИРОВАННАЯ ВЫСОТА (чтобы не прыгало как на Screenshot 5) */
    min-height: 48px !important;
    height: 48px !important;
    
    padding: 0 1.25rem !important;
    background-color: #f8f9fa !important;
    border-top: 1px solid rgba(0,0,0,.125) !important;
}

/* Отступы между кнопками, чтобы они не слипались справа */
.mod_comment_footer > a, 
.mod_comment_footer > button,
.mod_comment_footer .btn {
    margin-left: 15px !important; /* Отступ слева, так как кнопки прижаты вправо */
    margin-right: 0 !important;
    text-decoration: none !important;
}

/* Гарантируем, что текст таймера тоже будет справа */
[id^="timer_container_"] {
    text-align: right !important;
}

/* Если нужно, чтобы кнопки "Ответить" и "Удалить" были разнесены (одну влево, другие вправо) */
/* .mod_comment_footer { justify-content: space-between !important; } */