﻿/* ── Forums Page Header ── */

.forums-header {
    text-align: center;
    padding: 2rem 0 1.5rem;
}

    .forums-header h1 {
        font-family: var(--font-heading);
        font-size: 1.8rem;
        font-weight: 700;
        margin-bottom: 0.3rem;
    }

    .forums-header p {
        color: var(--color-text-muted);
        font-size: 0.95rem;
    }

/* ── Search ── */

.forums-search {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

    .forums-search input[type='text'] {
        flex: 1;
        padding: 0.55rem 0.85rem;
        font-size: 0.88rem;
        font-family: var(--font-body);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        background: var(--color-surface);
        color: var(--color-text);
        transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
    }

        .forums-search input[type='text']:focus {
            outline: none;
            border-color: var(--color-primary);
            box-shadow: 0 0 0 3px var(--color-primary-soft);
        }

        .forums-search input[type='text']::placeholder {
            color: var(--color-text-light);
        }

/* ── Tags Bar ── */

.forums-tags-section {
    margin-bottom: 1.25rem;
}

.forums-tags-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-light);
    margin-bottom: 0.4rem;
}

.forums-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.6rem;
}

.forums-tag {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 500;
    font-family: var(--font-body);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.15s var(--ease);
    text-decoration: none;
}

    .forums-tag:hover {
        border-color: var(--color-primary);
        color: var(--color-primary);
        text-decoration: none;
    }

    .forums-tag.active {
        background: var(--color-primary);
        color: #fff;
        border-color: var(--color-primary);
    }

.forums-tag-toggle {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 500;
    font-family: var(--font-body);
    color: var(--color-text-light);
    cursor: pointer;
    border: none;
    background: none;
    transition: color 0.15s var(--ease);
}

    .forums-tag-toggle:hover {
        color: var(--color-primary);
    }

/* ── Toolbar (Post New Thread + Sort) ── */

.forums-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.forums-sort {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

    .forums-sort select {
        padding: 0.3rem 0.5rem;
        font-size: 0.8rem;
        font-family: var(--font-body);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        background: var(--color-surface);
        color: var(--color-text);
        cursor: pointer;
    }

/* ── Thread List ── */

.thread-list {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface);
}

.thread-item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--color-border-light);
    transition: background 0.15s var(--ease);
}

    .thread-item:last-child {
        border-bottom: none;
    }

    .thread-item:hover {
        background: var(--color-surface-warm);
    }

    .thread-item.pinned {
        background: rgba(37, 99, 235, 0.03);
        border-left: 3px solid var(--color-primary);
    }

    .thread-item.hidden-mod {
        opacity: 0.5;
        background: #fef2f2;
    }

/* Avatar */

.thread-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text-muted);
    flex-shrink: 0;
    border: 1px solid var(--color-border);
}

/* Content area */

.thread-content {
    flex: 1;
    min-width: 0;
}

.thread-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0.2rem;
    line-height: 1.35;
}

    .thread-title a {
        color: inherit;
        text-decoration: none;
    }

        .thread-title a:hover {
            color: var(--color-primary);
            text-decoration: none;
        }

.thread-pin-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 0.35rem;
}

.thread-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 0.6rem;
    font-size: 0.76rem;
    color: var(--color-text-light);
    margin-bottom: 0.3rem;
}

    .thread-meta a {
        color: var(--color-accent);
        font-weight: 500;
    }

        .thread-meta a:hover {
            text-decoration: underline;
        }

.thread-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.thread-tag {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    font-size: 0.7rem;
    font-weight: 500;
    border: 1px solid var(--color-border);
    border-radius: 3px;
    color: var(--color-text-light);
    text-decoration: none;
}

    .thread-tag:hover {
        border-color: var(--color-primary);
        color: var(--color-primary);
        text-decoration: none;
    }

/* Stats column */

.thread-stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--color-text-light);
    min-width: 70px;
    text-align: right;
}

.thread-replies {
    font-weight: 600;
    color: var(--color-text-muted);
    font-size: 0.82rem;
}

.thread-views {
    font-size: 0.72rem;
}

.thread-last-activity {
    font-size: 0.7rem;
    color: var(--color-text-light);
}

/* ── Pagination ── */

.forums-pagination {
    display: flex;
    justify-content: center;
    gap: 0.35rem;
    margin: 1.25rem 0;
}

    .forums-pagination a,
    .forums-pagination span {
        display: inline-block;
        padding: 0.35rem 0.7rem;
        font-size: 0.82rem;
        font-weight: 500;
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        color: var(--color-text-muted);
        text-decoration: none;
        transition: all 0.15s var(--ease);
    }

        .forums-pagination a:hover {
            border-color: var(--color-primary);
            color: var(--color-primary);
            text-decoration: none;
        }

    .forums-pagination .active {
        background: var(--color-primary);
        color: #fff;
        border-color: var(--color-primary);
    }

/* ── Mod notice ── */

.mod-notice {
    font-size: 0.75rem;
    color: var(--color-error);
    font-style: italic;
}

/* ── Empty state ── */

.forums-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--color-text-light);
    font-size: 0.95rem;
}

/* ── Responsive ── */

@media (max-width: 600px) {
    .thread-stats {
        display: none;
    }

    .thread-item {
        padding: 0.75rem;
    }

    .forums-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .forums-sort {
        justify-content: flex-end;
    }
}
