/*
 * Форум (контроллер forum) и комментарии (контроллер comments, блок #comments_widget под материалами).
 * Работает поверх стилей users.css: переменные --u-* и класс .ep_ui на <article>.
 * Комментарии под новостями и героями выводятся и на страницах без .ep_ui, поэтому для них
 * цвета считаются от currentColor — они подходят и тёмной, и светлой панели.
 */

/* Форум: разделы и темы ===================================================== */

#body article.ep_ui table.category-table,
#body article.ep_ui table.threads-table,
#body article.ep_ui table.my-posts-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 6px;
}
#body article.ep_ui .category-table-header tr,
#body article.ep_ui .threads-table-header tr {
    height: auto;
    background: none;
    color: var(--u-muted);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
}
#body article.ep_ui .category-table-header td,
#body article.ep_ui .threads-table-header td { padding: 4px 14px; }

#body article.ep_ui .category-table tr,
#body article.ep_ui .threads-table tr,
#body article.ep_ui .category-table .odd,
#body article.ep_ui .threads-table .odd { background: none; }
#body article.ep_ui .category-table tbody td,
#body article.ep_ui .threads-table tbody td {
    padding: 14px;
    border: 0;
    background: var(--u-soft);
    color: var(--u-body);
    vertical-align: middle;
    transition: background .15s;
}
#body article.ep_ui .category-table tbody tr:hover td,
#body article.ep_ui .threads-table tbody tr:hover td { background: var(--u-soft-2); }
#body article.ep_ui .category-table tbody td:first-child,
#body article.ep_ui .threads-table tbody td:first-child { border-radius: 10px 0 0 10px; }
#body article.ep_ui .category-table tbody td:last-child,
#body article.ep_ui .threads-table tbody td:last-child { border-radius: 0 10px 10px 0; }

/* Заголовок группы разделов («Основной раздел») */
#body article.ep_ui .category.category-as-folder td {
    height: auto;
    border: 0;
    background: linear-gradient(90deg, rgba(37, 99, 235, .45), rgba(37, 99, 235, .12));
    color: var(--u-ink);
}
#body article.ep_ui .category.category-as-folder:hover td { background: linear-gradient(90deg, rgba(37, 99, 235, .55), rgba(37, 99, 235, .18)); }
#body article.ep_ui .category.category-as-folder a { color: var(--u-ink); }
:root[data-theme="light"] #body article.ep_ui .category.category-as-folder td { background: linear-gradient(90deg, rgba(37, 99, 235, .18), rgba(37, 99, 235, .05)); }

#body article.ep_ui .category-ceil,
#body article.ep_ui .threads-count,
#body article.ep_ui .posts-count,
#body article.ep_ui .last-post { border: 0; }
#body article.ep_ui .category-ceil a { color: var(--u-ink); font-size: 15px; font-weight: 700; }
#body article.ep_ui .category-ceil a:hover { color: var(--ep-sky); text-decoration: none; }
#body article.ep_ui .category-description { margin-top: 3px; color: var(--u-muted); font-size: 13px; font-weight: 400; line-height: 1.4; }
#body article.ep_ui .category-icon img { border-radius: 6px; }
#body article.ep_ui .threads-count,
#body article.ep_ui .posts-count { color: var(--u-ink); font-size: 16px; font-weight: 700; text-align: center; }
#body article.ep_ui .last-post,
#body article.ep_ui .threads-table-last-post { color: var(--u-muted); font-size: 12px; line-height: 1.5; }
#body article.ep_ui .last-post-thread a { color: var(--u-body); font-weight: 500; }
#body article.ep_ui .last-post-thread a:hover { color: var(--ep-sky); }
#body article.ep_ui .last-post-user a { color: var(--u-link); }

#body article.ep_ui .category-view-description { margin-bottom: 14px; color: var(--u-body); }
#body article.ep_ui .thread-description,
#body article.ep_ui .thread-from-category { margin-bottom: 14px; color: var(--u-muted); }

#body article.ep_ui .threads-table-links { border: 0; }
#body article.ep_ui .thread-info { color: var(--u-muted); font-size: 12px; }
#body article.ep_ui .thread-desc { color: var(--u-body); }
#body article.ep_ui .thread-icon img { padding-bottom: 0; }
#body article.ep_ui .threads-table-stats-title { color: var(--u-muted); }
#body article.ep_ui .threads-table-stats-count { color: var(--u-ink); }
#body article.ep_ui .threads-table .thread_view { font-size: 15px; font-weight: 700; }
#body article.ep_ui .vip-thread { border-radius: 8px; border-color: #d97706; background: rgba(245, 192, 74, .18); color: var(--u-ink); }
#body article.ep_ui .not_threads,
#body article.ep_ui .not-threads,
#body article.ep_ui .empty-posts { padding: 24px; border-radius: 10px; background: var(--u-soft); color: var(--u-muted); text-align: center; }

#body article.ep_ui .new_thread_button { margin: 0 0 10px; text-align: right; }
#body article.ep_ui .new_thread_button a {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 8px;
    background: #16a34a;
    color: #fff;
    font-weight: 500;
    text-decoration: none;
}
#body article.ep_ui .new_thread_button a:hover { background: #15803d; color: #fff; }

#body article.ep_ui .forum_rss_icon .rss_icon { color: var(--u-muted); }
#body article.ep_ui .forum_rss_icon .rss_icon:hover { color: var(--u-ink); }

/* Форум: сообщения темы ===================================================== */

#body article.ep_ui table.posts-table {
    width: 100%;
    margin-bottom: 14px;
    border: 1px solid var(--u-line);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 10px;
    overflow: hidden;
}
#body article.ep_ui .posts-table-header {
    padding: 8px 14px;
    background: var(--u-soft-2);
    color: var(--u-muted);
    font-size: 12px;
}
#body article.ep_ui .vip-thread-table-header { background: rgba(245, 192, 74, .25); }
#body article.ep_ui .post-date a { color: var(--u-body); }
#body article.ep_ui .post-links { opacity: .75; }
#body article.ep_ui .post-links a { border: 0; color: var(--u-link); }
#body article.ep_ui .post-links a:hover { color: var(--u-ink); }
#body article.ep_ui #post_links_select { background-color: var(--u-soft-2); color: var(--u-body); }
#body article.ep_ui .post-abuses { border-radius: 4px; }

#body article.ep_ui .post-user-cell,
#body article.ep_ui .post-user-cell-mobile {
    border-bottom: 0;
    border-right: 1px solid var(--u-line);
    background: var(--u-soft);
    color: var(--u-muted);
    font-size: 12px;
}
#body article.ep_ui .post-user-cell { padding: 14px 10px; }
#body article.ep_ui .post-user-link a,
#body article.ep_ui .post-user-link-mobile a { color: var(--u-ink); font-size: 14px; }
#body article.ep_ui .post-user-avatar img { border-radius: 50%; }
#body article.ep_ui .post-user-groups-title { color: var(--u-muted); }
#body article.ep_ui .post-user-group { color: var(--u-body); }
#body article.ep_ui .post-content-cell { border-bottom: 0; padding: 14px 18px; color: var(--u-body); line-height: 1.6; }
#body article.ep_ui .post-content-cell-mobile {
    border-bottom: 0;
    background: none;
    height: auto;
    padding: 0 18px 14px;
    color: var(--u-body);
}
#body article.ep_ui .post-content-cell.is_bad,
#body article.ep_ui .post-content-cell-mobile.is_bad { opacity: .6; }
#body article.ep_ui .post-content-cell.is_bad:hover { opacity: 1; }
#body article.ep_ui .post-content img { max-width: 100%; height: auto; border-radius: 6px; }
#body article.ep_ui .post-edit-date,
#body article.ep_ui .post-from-thread { color: var(--u-muted); font-size: 12px; }
#body article.ep_ui .post-from-thread { margin: 0 0 10px; padding: 0; background: none; }
#body article.ep_ui .post-user-signature { margin-top: 12px; padding-top: 8px; border-top: 1px dashed var(--u-line); color: var(--u-muted); font-size: 12px; }
#body article.ep_ui .fa_filebox,
#body article.ep_ui .fa_file { border-color: var(--u-line); background: var(--u-soft); }
#body article.ep_ui .fa_attach_title { color: var(--u-muted); }
#body article.ep_ui .posts-contents-is-deleted { opacity: .5; }

#body article.ep_ui table.thread-navbar { width: 100%; margin: 4px 0 18px; padding: 8px 14px; border-radius: 10px; background: var(--u-soft); }
#body article.ep_ui .thread-navbar a { color: var(--u-link); text-decoration: none; }
#body article.ep_ui .thread-navbar a:hover { color: var(--u-ink); }

#body article.ep_ui .thread-fast-edit { margin-top: 20px; padding: 18px 20px; border: 1px solid var(--u-line); border-radius: 10px; background: var(--u-soft); }
#body article.ep_ui .thread-fast-edit-header,
#body article.ep_ui .thread-fast-edit-header a { color: var(--u-ink); font-size: 16px; font-weight: 700; }

/* Опрос темы */
#body article.ep_ui .thread-poll { border: 1px solid var(--u-line); border-radius: 10px; background: var(--u-soft); }
#body article.ep_ui .thread-poll-title { color: var(--u-ink); }
#body article.ep_ui .thread-poll-bar-container { border-radius: 999px; background: var(--u-soft-2); overflow: hidden; }
#body article.ep_ui .thread-poll-bar-container .thread-poll-bar { background: var(--u-accent); }

/* Комментарии ============================================================== */

#comments_widget { margin-top: 24px; }
#comments_widget .no_comments { margin: 0 0 14px; color: var(--u-muted, inherit); opacity: .75; }

#comments_list .comment {
    margin: 10px 0;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, currentColor 5%, transparent);
    overflow: hidden;
}
#comments_list .comment:first-child { margin-top: 0; }
#comments_list.striped-list .comment { padding-bottom: 14px; }
#comments_list.striped-list .comment:last-child { border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
#comments_list .selected-comment,
#comments_list .comment.selected-comment:first-child {
    margin-top: 10px;
    padding-right: 16px;
    border-left: 3px solid var(--ep-accent);
    box-shadow: none;
}
#comments_list .comment.is_topic_starter { border-color: color-mix(in srgb, var(--ep-gold) 55%, transparent); }

#comments_list .comment .info { margin-bottom: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
#comments_list .comment .info div { float: none; margin: 0; font-size: 12px; }
#comments_list .comment .info .name .user { color: inherit; font-size: 14px; font-weight: 700; }
#comments_list .comment .info .name .user:hover { color: var(--ep-sky); text-decoration: none; }
#comments_list .comment.is_topic_starter .info .name .user { color: var(--ep-gold); }
#comments_list .comment .info .name .subject { color: var(--ep-sky); font-weight: 500; }
#comments_list .comment .info .name .subject:hover { color: inherit; }
#comments_list .comment .info .date { opacity: .6; }
#comments_list .comment .info .rating .value { font-weight: 700; }
#comments_list .comment .nav a { color: inherit; opacity: .5; }
#comments_list .comment .nav a:hover { color: var(--ep-sky); opacity: 1; }
#comments_list .comment .body .avatar img { border-radius: 50%; }
#comments_list .comment .content { padding-top: 2px; color: inherit; line-height: 1.6; }
#comments_list .comment .content .text img { max-width: 100%; height: auto; border-radius: 6px; }
#comments_list .comment .deleted { color: inherit; opacity: .55; font-style: italic; }
#comments_list .comment .links { margin-top: 8px; font-size: 12px; }
#comments_list .comment .links a { margin-right: 12px; opacity: .8; }
#comments_list .comment .links a:hover { opacity: 1; }

#comments_widget #comments_add_link {
    display: inline-block;
    margin: 0 0 14px;
    padding: 0;
    background: none;
}
#comments_widget #comments_add_link a {
    display: inline-block;
    padding: 9px 18px;
    border-radius: 8px;
    background: var(--ep-accent);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}
#comments_widget #comments_add_link a:hover { background: var(--ep-accent-hi); color: #fff; }

#comments_widget #comments_refresh_panel { margin: 0 0 12px; background: none; border: 0; }
#comments_widget #comments_refresh_panel a {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 10%, transparent);
    color: inherit;
    font-size: 13px;
    text-decoration: none;
}
#comments_widget #comments_refresh_panel a:hover { background: color-mix(in srgb, currentColor 18%, transparent); }
#comments_widget .track label { color: inherit; opacity: .75; }

#comments_widget #comments_add_form {
    margin: 14px 0;
    padding: 16px 18px;
    border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, currentColor 5%, transparent);
}
#comments_widget #comments_add_form textarea { border-radius: 8px; }
#comments_widget #comments_add_form .author_data .field label { color: inherit; opacity: .8; }

#comments_widget .bad { opacity: .55; }
#comments_widget .bad:hover { opacity: 1; }

/* Заголовок блока комментариев под материалом */
#comments_widget > .title,
#comments_widget h3 { margin: 0 0 14px; font-size: 20px; font-weight: 700; }

@media (max-width: 640px) {
    #body article.ep_ui .posts-table .post-user-cell { display: none; }
    #body article.ep_ui .category-table-header-lastpost,
    #body article.ep_ui .category-table .last-post { display: none; }
    #comments_list .comment { padding: 12px; }
}

#body article.ep_ui .category.is_first_parent,
#body article.ep_ui .category.category-as-folder { font-weight: 400; font-size: inherit; }
#body article.ep_ui .category-title { font-weight: 700; }

/* Вкладка «Форум» в профиле и списки сообщений (my_posts, latest_posts): карточки, как комментарии */

#body article.ep_ui .forum-posts-list .post {
    margin: 10px 0;
    padding: 14px 16px;
    border: 1px solid var(--u-line);
    border-radius: 12px;
    background: var(--u-soft);
    overflow: hidden;
    transition: background .15s;
}
#body article.ep_ui .forum-posts-list .post:hover { background: var(--u-soft-2); }
#body article.ep_ui .forum-posts-list .post:first-child { margin-top: 0; }
#body article.ep_ui .forum-posts-list.striped-list .post { padding-bottom: 14px; }
#body article.ep_ui .forum-posts-list .post.post-is-new { border-left: 3px solid var(--ep-accent); background: var(--u-soft-2); }
#body article.ep_ui .forum-posts-list .post.post-is-deleted { opacity: .5; }
#body article.ep_ui .forum-posts-list .post .info { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 10px; }
#body article.ep_ui .forum-posts-list .post .info div { float: none; margin: 0; font-size: 12px; }
#body article.ep_ui .forum-posts-list .post .info .name .user { color: var(--u-ink); font-size: 14px; font-weight: 700; }
#body article.ep_ui .forum-posts-list .post .info .name .subject { color: var(--ep-sky); font-weight: 500; }
#body article.ep_ui .forum-posts-list .post .info .name .subject:hover { color: var(--u-ink); }
#body article.ep_ui .forum-posts-list .post .info .date { color: var(--u-muted); }
#body article.ep_ui .forum-posts-list .post .body { display: flex; align-items: flex-start; gap: 12px; }
#body article.ep_ui .forum-posts-list .post .body .avatar {
    flex: 0 0 auto;
    float: none;
    padding: 0;
    border: 0;
    border-radius: 50%;
    overflow: visible;
}
#body article.ep_ui .forum-posts-list .post .body .avatar::after { display: none; }
#body article.ep_ui .forum-posts-list .post .body .avatar img { border-radius: 50%; box-shadow: 0 0 0 2px var(--u-line); }
#body article.ep_ui .forum-posts-list .post .body .avatar.post-user-online img { box-shadow: 0 0 0 2px #22c55e; }
#body article.ep_ui .forum-posts-list .post .content { flex: 1 1 auto; min-width: 0; padding: 0; color: var(--u-body); line-height: 1.6; }
#body article.ep_ui .forum-posts-list .post .content .text img { max-width: 100%; height: auto; border-radius: 6px; }

/* Во вкладках профиля все записи одного автора: ник и аватар не повторяем,
   оставляем ссылку на тему/материал и дату */
#user_profile_tab_content #comments_list .comment .info .name,
#body article.ep_ui #user_profile_tab_content .forum-posts-list .post .info .name { font-size: 0; }
#user_profile_tab_content #comments_list .comment .info .name .user,
#body article.ep_ui #user_profile_tab_content .forum-posts-list .post .info .name .user { display: none; }
#user_profile_tab_content #comments_list .comment .info .name .subject,
#body article.ep_ui #user_profile_tab_content .forum-posts-list .post .info .name .subject { font-size: 14px; font-weight: 700; }
#user_profile_tab_content #comments_list .comment .info .name .subject::before,
#body article.ep_ui #user_profile_tab_content .forum-posts-list .post .info .name .subject::before {
    content: "\21B3";
    margin-right: 6px;
    color: var(--u-muted);
    font-weight: 400;
}
#user_profile_tab_content #comments_list .comment .body .avatar,
#body article.ep_ui #user_profile_tab_content .forum-posts-list .post .body .avatar { display: none; }
#user_profile_tab_content #comments_list .comment .content { padding-left: 0; }
#user_profile_tab_content #comments_list .comment .info .date { margin-left: auto; }