/*
 *  WakcedonDesign5 - css/modules/community.css
 *
 *  Page-specific styles for the "community" pages: forum index, forum view,
 *  topic view, post forms, forum search and the sidebar widgets that appear
 *  on those pages. Loaded for /forum, /status and /rules (see template.php).
 *
 *  RULES (see docs/namelessmc-design-playbook.md):
 *  1. Global theme (colors for light + dark) lives ONLY in css/custom.css
 *     under :root and body.dark, as --wk-* variables.
 *  2. This module must reference those variables (var(--wk-...)) and must
 *     NOT redefine colors, backgrounds or borders per theme.
 *  3. Keep here only layout, sizes, spacing, radius, animations, hover
 *     states and responsive rules that are unique to the community pages.
 *  4. Everything is scoped under #page-forum so /status and /rules are not
 *     affected by the forum restyle.
 */

/* ============================================================
 *  [ PAGE SCAFFOLD ] — breadcrumbs, headings, grids
 * ============================================================ */

#page-forum .ui.breadcrumb {
    margin: 0 0 1.25rem !important;
    color: var(--wk-text-muted);
}

#page-forum .ui.breadcrumb .section {
    color: var(--wk-link);
    font-weight: 600;
}

#page-forum .ui.breadcrumb .section.active {
    color: var(--wk-text-muted);
}

#page-forum .ui.breadcrumb .icon.divider {
    color: var(--wk-text-muted);
}

#page-forum h2.ui.header {
    color: var(--wk-heading);
    font-weight: 800;
    letter-spacing: .3px;
    line-height: 1.3;
}

#page-forum .ui.stackable.padded.grid {
    margin-bottom: .5rem;
}

/* ============================================================
 *  [ FORUM NODE ] — categories on the forum index
 * ============================================================ */

#page-forum #forum-node {
    background: var(--wk-surface);
    border: 1px solid var(--wk-border);
    border-radius: var(--wk-radius-lg);
    box-shadow: var(--wk-shadow-sm);
    padding: 1.5rem 1.75rem;
}

#page-forum #forum-node > h3.ui.header {
    color: var(--wk-heading);
    font-weight: 800;
    letter-spacing: .3px;
    margin-bottom: .5rem;
}

#page-forum #forum-node > h3.ui.header a {
    color: var(--wk-heading);
    transition: color .15s ease;
}

#page-forum #forum-node > h3.ui.header a:hover {
    color: var(--wk-accent-hover);
}

#page-forum #forum-node .ui.divider {
    border-top: 1px solid var(--wk-border);
    border-bottom: none;
}

#page-forum #forum-node a.header {
    color: var(--wk-link);
    font-weight: 700;
    transition: color .15s ease;
}

#page-forum #forum-node a.header:hover {
    color: var(--wk-link-hover);
}

#page-forum #forum-node .ui.grid .row {
    padding: 1rem 0;
}

#page-forum #forum-node .ui.grid .row + .row {
    border-top: 1px solid var(--wk-border);
}

#page-forum #forum-node .ui.large.comment.icon {
    color: var(--wk-accent);
}

#page-forum #forum-node .row .description {
    color: var(--wk-text-muted);
}

/* ============================================================
 *  [ FORUM TABLES ] — subforums, sticky & normal threads
 * ============================================================ */

#page-forum #subforums-table,
#page-forum #sticky-threads,
#page-forum #normal-threads {
    background: var(--wk-surface);
    border: 1px solid var(--wk-border);
    border-radius: var(--wk-radius-lg);
    box-shadow: var(--wk-shadow-sm);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

#page-forum .ui.table thead th {
    background: var(--wk-surface-raised);
    border-bottom: 1px solid var(--wk-border);
    color: var(--wk-text-muted);
    font-size: .85rem;
    letter-spacing: .5px;
    text-transform: uppercase;
}

#page-forum .ui.table thead th h4 {
    color: var(--wk-heading);
    font-weight: 800;
    letter-spacing: .3px;
    margin: 0;
    text-transform: none;
}

#page-forum .ui.table tbody td {
    border-top: 1px solid var(--wk-border);
    color: var(--wk-text);
}

#page-forum .ui.table tbody tr {
    transition: background .15s ease;
}

#page-forum .ui.table.selectable tbody tr:hover {
    background: color-mix(in srgb, var(--wk-accent) 7%, transparent);
}

#page-forum #sticky-threads tbody tr td h5.ui.header,
#page-forum #normal-threads tbody tr td h5.ui.header {
    color: var(--wk-text);
}

#page-forum #sticky-threads tbody tr td h5.ui.header a,
#page-forum #normal-threads tbody tr td h5.ui.header a {
    color: var(--wk-link);
    font-weight: 700;
    transition: color .15s ease;
}

#page-forum #sticky-threads tbody tr td h5.ui.header a:hover,
#page-forum #normal-threads tbody tr td h5.ui.header a:hover {
    color: var(--wk-link-hover);
}

#page-forum #sticky-threads tbody tr td h5 .sub.header,
#page-forum #normal-threads tbody tr td h5 .sub.header {
    color: var(--wk-text-muted);
}

#page-forum #sticky-threads tbody tr td:nth-child(2),
#page-forum #normal-threads tbody tr td:nth-child(2) {
    color: var(--wk-text-muted);
    white-space: nowrap;
}

#page-forum #sticky-threads tbody tr td:nth-child(2) b,
#page-forum #normal-threads tbody tr td:nth-child(2) b {
    color: var(--wk-text);
}

/* ============================================================
 *  [ TOPIC PAGE ] — post cards, sidebar, meta bar
 * ============================================================ */

#page-forum #topic-post.ui.segments,
#page-forum #forum-search-result.ui.segments {
    background: var(--wk-surface);
    border: 1px solid var(--wk-border);
    border-radius: var(--wk-radius-lg);
    box-shadow: var(--wk-shadow-sm);
    overflow: hidden;
    margin-bottom: 1.5rem;
}

#page-forum #topic-post .ui.attached.segment,
#page-forum #forum-search-result .ui.attached.segment {
    background: var(--wk-surface);
    border: none;
    box-shadow: none;
}

#page-forum #topic-post #post-meta,
#page-forum #forum-search-result .ui.bottom.attached.secondary.segment {
    background: var(--wk-surface-raised);
    border-top: 1px solid var(--wk-border);
    color: var(--wk-text-muted);
}

#page-forum #topic-post #post-meta a {
    color: var(--wk-link);
    font-weight: 600;
}

#page-forum #topic-post #post-meta .ui.mini.icon.button {
    background: var(--wk-surface);
    border: 1px solid var(--wk-border-strong);
    border-radius: var(--wk-radius-sm);
    box-shadow: none;
    color: var(--wk-text-muted);
    transition: color .15s ease, border-color .15s ease;
}

#page-forum #topic-post #post-meta .ui.mini.icon.button:hover {
    color: var(--wk-accent-hover);
    border-color: var(--wk-accent);
}

#page-forum #topic-reply {
    background: var(--wk-surface);
    border: 1px solid var(--wk-border);
    border-radius: var(--wk-radius-lg);
    box-shadow: var(--wk-shadow-sm);
}

/* ============================================================
 *  [ FORUM FORMS ] — new topic, edit post, search, move, merge
 * ============================================================ */

#page-forum #new-topic,
#page-forum #post-edit,
#page-forum #forum-search,
#page-forum #move-topic,
#page-forum #merge-topic {
    background: var(--wk-surface);
    border: 1px solid var(--wk-border);
    border-radius: var(--wk-radius-lg);
    box-shadow: var(--wk-shadow-sm);
}

#page-forum .ui.form .field > label {
    color: var(--wk-heading);
    font-weight: 700;
}

#page-forum #forum-search-result h3.ui.header a {
    color: var(--wk-link);
    font-weight: 700;
    transition: color .15s ease;
}

#page-forum #forum-search-result h3.ui.header a:hover {
    color: var(--wk-link-hover);
}

#page-forum #forum-search-result h3.ui.header .sub.header {
    color: var(--wk-text-muted);
}

/* ============================================================
 *  [ SIDEBAR WIDGETS ] — online staff / online users / stats
 * ============================================================ */

#page-forum .ui.fluid.card {
    background: var(--wk-surface);
    border: 1px solid var(--wk-border);
    border-radius: var(--wk-radius-lg);
    box-shadow: var(--wk-shadow-sm);
    overflow: hidden;
}

#page-forum .ui.fluid.card > .content:first-child {
    padding: 1.25rem 1.4rem;
}

#page-forum .ui.fluid.card h4.ui.header {
    color: var(--wk-heading);
    font-weight: 800;
    letter-spacing: .3px;
    border-bottom: 1px solid var(--wk-border);
    padding-bottom: .6rem;
    margin-bottom: .9rem;
}

#page-forum .ui.fluid.card .extra.content {
    background: var(--wk-surface-raised);
    border-top: 1px solid var(--wk-border);
    color: var(--wk-text-muted);
}

/* ============================================================
 *  [ PAGINATION & MESSAGES ]
 * ============================================================ */

#page-forum .ui.pagination.menu {
    border: 1px solid var(--wk-border);
    border-radius: var(--wk-radius-md);
    box-shadow: var(--wk-shadow-sm);
    margin: 1rem 0;
}

#page-forum .ui.pagination.menu .item {
    color: var(--wk-text);
}

#page-forum .ui.pagination.menu .item.active {
    background: var(--wk-accent);
    color: var(--wk-accent-contrast);
}

#page-forum .ui.message {
    border-radius: var(--wk-radius-md);
}

/* ============================================================
 *  [ RESPONSIVE ]
 * ============================================================ */

@media only screen and (max-width: 768px) {
    #page-forum #forum-node {
        padding: 1.1rem 1.15rem;
    }

    #page-forum .ui.fluid.card > .content:first-child {
        padding: 1rem 1.15rem;
    }
}

/* ============================================================
 *  [ RULES PAGE ] — /rules (Rules module frontend template)
 *
 *  Scoped under .wk-rules-shell (the wrapper added by rules.tpl)
 *  with the D5 amber & gold palette, mirroring home.css tokens.
 * ============================================================ */

.wk-rules-shell {
    --wk-rules-panel: rgba(255, 255, 255, 0.78);
    --wk-rules-panel-strong: rgba(255, 252, 245, 0.94);
    --wk-rules-border: rgba(150, 95, 20, 0.16);
    --wk-rules-border-strong: rgba(150, 95, 20, 0.3);
    --wk-rules-title: #1d1607;
    --wk-rules-text: #2b2111;
    --wk-rules-muted: rgba(90, 66, 28, 0.78);
    --wk-rules-amber: #e08e0b;
    --wk-rules-amber-strong: #c97a10;
    --wk-rules-gold: #f0b429;
    --wk-rules-accent-soft: rgba(224, 142, 11, 0.1);
    --wk-rules-shadow: 0 24px 60px rgba(120, 80, 30, 0.14);
    --wk-rules-bg: linear-gradient(180deg, rgba(255, 252, 245, 0.96), rgba(248, 241, 227, 0.98));
    position: relative;
    border-radius: 26px;
    padding: 1.2rem;
    border: 1px solid var(--wk-rules-border);
    background: var(--wk-rules-bg);
    box-shadow: var(--wk-rules-shadow);
    color: var(--wk-rules-text);
}

body.dark .wk-rules-shell {
    --wk-rules-panel: rgba(28, 23, 15, 0.86);
    --wk-rules-panel-strong: rgba(20, 16, 9, 0.96);
    --wk-rules-border: rgba(255, 200, 120, 0.16);
    --wk-rules-border-strong: rgba(255, 200, 120, 0.28);
    --wk-rules-title: #fff8e6;
    --wk-rules-text: #f4ecd9;
    --wk-rules-muted: rgba(244, 236, 217, 0.76);
    --wk-rules-amber: #f0b429;
    --wk-rules-amber-strong: #c97a10;
    --wk-rules-gold: #f7c95f;
    --wk-rules-accent-soft: rgba(240, 180, 41, 0.12);
    --wk-rules-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
    --wk-rules-bg: linear-gradient(180deg, rgba(28, 23, 15, 0.96), rgba(20, 16, 9, 0.99));
}

.wk-rules-shell .wk-community-title {
    color: var(--wk-rules-title);
    font-weight: 800;
    letter-spacing: .3px;
    line-height: 1.3;
    margin: 0 0 1rem;
}

.wk-rules-shell .ui.top.attached.tabular.menu {
    overflow-x: auto;
    overflow-y: hidden;
    margin: 0;
    padding: .5rem;
    border: 1px solid var(--wk-rules-border);
    border-radius: 18px 18px 14px 14px !important;
    background: var(--wk-rules-panel) !important;
    box-shadow: none;
}

.wk-rules-shell .ui.top.attached.tabular.menu .item {
    margin: 0 .3rem 0 0 !important;
    border: none !important;
    border-radius: 14px !important;
    color: var(--wk-rules-text) !important;
    font-weight: 700 !important;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}

.wk-rules-shell .ui.top.attached.tabular.menu .item.active,
.wk-rules-shell .ui.top.attached.tabular.menu .item:hover {
    background: var(--wk-rules-accent-soft) !important;
    color: var(--wk-rules-title) !important;
}

.wk-rules-shell .ui.bottom.attached.tab.segment {
    margin: 0;
    padding: 1.2rem 1.25rem;
    border: 1px solid var(--wk-rules-border) !important;
    border-top: none;
    border-radius: 0 0 22px 22px !important;
    background: var(--wk-rules-panel) !important;
    box-shadow: none !important;
    color: var(--wk-rules-text);
    line-height: 1.72;
}

.wk-rules-shell .ui.bottom.attached.tab.segment a {
    color: var(--wk-rules-amber);
    font-weight: 600;
    transition: color .15s ease;
}

.wk-rules-shell .ui.bottom.attached.tab.segment a:hover {
    color: var(--wk-rules-amber-strong);
}

.wk-rules-shell .ui.label {
    border-radius: 999px;
}

/* Уведомления на странице правил: читаемые в обеих темах */
.wk-rules-shell .ui.message {
    border-radius: 18px;
    border: 1px solid var(--wk-rules-border);
    background: var(--wk-rules-panel-strong);
    color: var(--wk-rules-text);
    box-shadow: 0 10px 24px rgba(120, 80, 30, 0.1);
}

.wk-rules-shell .ui.message .header {
    color: var(--wk-rules-title);
}

.wk-rules-shell .ui.negative.message {
    background: rgba(220, 38, 38, 0.08);
    color: #b91c1c;
    border-color: rgba(220, 38, 38, 0.28);
}

body.dark .wk-rules-shell .ui.message {
    background: var(--wk-rules-panel-strong);
    color: var(--wk-rules-text);
    border-color: var(--wk-rules-border-strong);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

body.dark .wk-rules-shell .ui.negative.message {
    background: rgba(248, 113, 113, 0.1);
    color: #fca5a5;
    border-color: rgba(248, 113, 113, 0.3);
}

.wk-rules-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .7rem;
    margin-top: 1rem;
}

.wk-rules-shell .ui.primary.button {
    background: linear-gradient(135deg, var(--wk-rules-gold), var(--wk-rules-amber-strong));
    background-color: var(--wk-rules-amber-strong);
    background-image: none;
    color: #2b1505;
    border-radius: 14px !important;
    box-shadow: 0 12px 24px rgba(224, 142, 11, 0.24);
    transition: transform .2s ease, box-shadow .2s ease;
}

.wk-rules-shell .ui.primary.button:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(224, 142, 11, 0.32);
}

@media only screen and (max-width: 767px) {
    .wk-rules-shell {
        padding: .9rem;
        border-radius: 20px;
    }

    .wk-rules-shell .ui.bottom.attached.tab.segment {
        padding: 1rem;
    }
}