<script setup>
// ══════════════════════════════════════════════════════════════════
//  InPractice — Member/Forum/Index.vue
//  Location: resources/js/Pages/Member/Forum/Index.vue
//
//  The Ask Members 4 Opinion feed.
//
//  MOBILE  (<768px):
//    - Hub tabs (same pattern as Cases/Index)
//    - Search bar + filter toggles
//    - Post cards stacked full width
//    - Pagination — load more
//
//  DESKTOP (≥768px):
//    - Sidebar hub switcher + filter panel (sticky)
//    - Main: post list full width
//    - Numbered pagination
//
//  Rules:
//    - Zero DB calls — all data from ForumService via Inertia props
//    - Filter changes use Inertia router.get (URL stays shareable)
//    - All CSS uses var(--color-*) tokens — no hardcoded hex
//    - Both themes automatic
//    - Bilingual inline — locale from authStore
// ══════════════════════════════════════════════════════════════════

import { ref, computed } from 'vue';
import { Head, Link, router } from '@inertiajs/vue3';
import { useAuthStore }       from '@/Stores/useAuthStore';
import AppLayout              from '@/Layouts/AppLayout.vue';

const props = defineProps({
    posts:       { type: Object, required: true },
    allHubs:     { type: Array,  required: true },
    activeHubId: { type: Number, required: true },
    filters:     { type: Object, default: () => ({}) },
    totalCount:  { type: Number, default: 0 },
});

const authStore = useAuthStore();
const locale    = computed(() => authStore.locale);

// ── Active filters ────────────────────────────────────────────────
const activeHubId  = ref(props.activeHubId);
const activeStatus = ref(props.filters.status ?? '');
const activeSort   = ref(props.filters.sort   ?? 'latest');
const searchQuery  = ref(props.filters.search ?? '');
const showFilters  = ref(false);

// ── Hub helpers ───────────────────────────────────────────────────
const activeHub = computed(() =>
    props.allHubs.find(h => h.id === activeHubId.value) ?? props.allHubs[0]
);

function hubName(hub) {
    return locale.value === 'ar' ? hub.name_ar : hub.name_en;
}

function hubActiveClass(hub) {
    if (activeHubId.value !== hub.id) return '';
    const map = {
        '#1D9E75': 'hub-tab--active-f',
        '#378ADD': 'hub-tab--active-m',
        '#D85A30': 'hub-tab--active-s',
    };
    return map[hub.color] ?? 'hub-tab--active-f';
}

// ── Apply filters ─────────────────────────────────────────────────
function applyFilters() {
    router.get(route('member.forum.index'), {
        hub_id: activeHubId.value || undefined,
        status: activeStatus.value || undefined,
        sort:   activeSort.value   || undefined,
        search: searchQuery.value  || undefined,
    }, { preserveState: true, preserveScroll: true, replace: true });
    showFilters.value = false;
}

function switchHub(hubId) {
    activeHubId.value  = hubId;
    activeStatus.value = '';
    activeSort.value   = 'latest';
    searchQuery.value  = '';
    applyFilters();
}

function handleSearch() {
    applyFilters();
}

const hasActiveFilters = computed(() =>
    activeStatus.value || activeSort.value !== 'latest' || searchQuery.value
);

// ── Badge helpers ─────────────────────────────────────────────────
function badgeLabel(badge) {
    if (!badge) return '';
    const map = {
        field_expert:    locale.value === 'ar' ? 'خبير ميداني'     : 'Field Expert',
        trusted_advisor: locale.value === 'ar' ? 'مستشار موثوق'    : 'Trusted Advisor',
        helpful_voice:   locale.value === 'ar' ? 'صوت مساعد'       : 'Helpful Voice',
    };
    return map[badge.key] ?? '';
}
</script>

<template>
    <AppLayout :title="locale === 'ar' ? 'اسأل الأعضاء' : 'Ask Members 4 Opinion'">
        <Head :title="locale === 'ar' ? 'اسأل الأعضاء' : 'Ask Members 4 Opinion'" />

        <!-- Sidebar hub switcher slot — desktop only -->
        <template #sidebar-hubs>
            <div v-for="hub in allHubs" :key="hub.id"
                 class="sb-hub-item"
                 :class="{
                     'sb-hub-item--active-f': activeHubId === hub.id && hub.color === '#1D9E75',
                     'sb-hub-item--active-m': activeHubId === hub.id && hub.color === '#378ADD',
                     'sb-hub-item--active-s': activeHubId === hub.id && hub.color === '#D85A30',
                 }"
                 @click="switchHub(hub.id)">
                <div class="sb-hub-dot" :style="{ background: hub.color }"></div>
                <span class="sb-hub-name">{{ hubName(hub) }}</span>
                <span class="sb-hub-count">{{ hub.id === activeHubId ? totalCount : '—' }}</span>
            </div>
        </template>

        <div class="forum-page">

            <!-- ① HUB TABS — mobile only ────────────────────────── -->
            <div class="section mobile-only">
                <div class="hub-tabs">
                    <button v-for="hub in allHubs" :key="hub.id"
                            class="hub-tab"
                            :class="hubActiveClass(hub)"
                            :style="`--hub-color:${hub.color}`"
                            @click="switchHub(hub.id)">
                        <div class="hub-tab__icon-wrap"
                             :style="{ background: hub.color + '22', color: hub.color }">
                            <i :class="`ti ti-${hub.icon ?? 'chart-bar'}`" aria-hidden="true"></i>
                        </div>
                        <div class="hub-tab__name">{{ hubName(hub) }}</div>
                    </button>
                </div>
            </div>

            <!-- ② PAGE HEADER ──────────────────────────────────── -->
            <div class="section page-header">
                <div class="page-header__left">
                    <p class="page-header__label">
                        {{ hubName(activeHub) }} ·
                        {{ locale === 'ar' ? 'اسأل الأعضاء' : 'Ask Members 4 Opinion' }}
                    </p>
                    <h1 class="page-header__title">
                        {{ locale === 'ar' ? 'مشاكل حقيقية، إجابات حقيقية' : 'Real Problems. Real Answers.' }}
                    </h1>
                    <p class="page-header__sub">
                        {{ totalCount }}
                        {{ locale === 'ar' ? 'موضوع' : 'discussions' }}
                    </p>
                </div>
                <div class="page-header__actions">
                    <Link :href="route('member.forum.create')" class="ask-btn">
                        <i class="ti ti-pencil-plus" aria-hidden="true"></i>
                        {{ locale === 'ar' ? 'اسأل سؤالاً' : 'Ask a Question' }}
                    </Link>
                    <button class="filter-toggle mobile-only" @click="showFilters = !showFilters">
                        <i class="ti ti-adjustments-horizontal" aria-hidden="true"></i>
                        <span v-if="hasActiveFilters" class="filter-dot"></span>
                    </button>
                </div>
            </div>

            <!-- ③ SEARCH + FILTER ──────────────────────────────── -->
            <div class="section filter-panel" :class="{ 'filter-panel--open': showFilters }">

                <!-- Search -->
                <div class="search-wrap">
                    <i class="ti ti-search search-icon" aria-hidden="true"></i>
                    <input
                        v-model="searchQuery"
                        class="search-input"
                        type="text"
                        :placeholder="locale === 'ar' ? 'ابحث في المواضيع...' : 'Search discussions...'"
                        @keyup.enter="handleSearch"
                    />
                </div>

                <!-- Status filter -->
                <div class="filter-row">
                    <label class="filter-label">
                        {{ locale === 'ar' ? 'الحالة' : 'Status' }}
                    </label>
                    <div class="filter-pills">
                        <button class="filter-pill" :class="{ 'filter-pill--active': !activeStatus }"
                                @click="activeStatus = ''; applyFilters()">
                            {{ locale === 'ar' ? 'الكل' : 'All' }}
                        </button>
                        <button class="filter-pill" :class="{ 'filter-pill--active': activeStatus === 'active' }"
                                @click="activeStatus = 'active'; applyFilters()">
                            {{ locale === 'ar' ? 'مفتوح' : 'Open' }}
                        </button>
                        <button class="filter-pill" :class="{ 'filter-pill--active': activeStatus === 'closed' }"
                                @click="activeStatus = 'closed'; applyFilters()">
                            {{ locale === 'ar' ? 'مغلق' : 'Closed' }}
                        </button>
                    </div>
                </div>

                <!-- Sort -->
                <div class="filter-row">
                    <label class="filter-label">
                        {{ locale === 'ar' ? 'ترتيب' : 'Sort' }}
                    </label>
                    <div class="filter-pills">
                        <button class="filter-pill" :class="{ 'filter-pill--active': activeSort === 'latest' }"
                                @click="activeSort = 'latest'; applyFilters()">
                            {{ locale === 'ar' ? 'الأحدث' : 'Latest' }}
                        </button>
                        <button class="filter-pill" :class="{ 'filter-pill--active': activeSort === 'most_replies' }"
                                @click="activeSort = 'most_replies'; applyFilters()">
                            {{ locale === 'ar' ? 'أكثر ردوداً' : 'Most Replies' }}
                        </button>
                        <button class="filter-pill" :class="{ 'filter-pill--active': activeSort === 'top_rated' }"
                                @click="activeSort = 'top_rated'; applyFilters()">
                            {{ locale === 'ar' ? 'الأعلى تقييماً' : 'Top Rated' }}
                        </button>
                    </div>
                </div>

            </div>

            <!-- ④ POST LIST ─────────────────────────────────────── -->
            <div class="section">

                <!-- Empty state -->
                <div v-if="!posts.data?.length" class="empty-state">
                    <i class="ti ti-message-question" aria-hidden="true"></i>
                    <p class="empty-state__title">
                        {{ locale === 'ar' ? 'لا توجد مواضيع بعد' : 'No discussions yet' }}
                    </p>
                    <p class="empty-state__sub">
                        {{ locale === 'ar'
                            ? 'كن أول من يطرح سؤالاً في هذا الهاب'
                            : 'Be the first to ask a question in this hub' }}
                    </p>
                    <Link :href="route('member.forum.create')" class="ask-btn ask-btn--sm">
                        {{ locale === 'ar' ? 'اسأل سؤالاً' : 'Ask a Question' }}
                    </Link>
                </div>

                <!-- Post cards -->
                <div v-else class="post-list">
                    <Link
                        v-for="post in posts.data"
                        :key="post.id"
                        :href="route('member.forum.show', post.id)"
                        class="post-card"
                        :style="`--hub-color:${post.hub?.color ?? '#1D9E75'}`">

                        <!-- Pinned indicator -->
                        <div v-if="post.is_pinned" class="post-card__pinned">
                            <i class="ti ti-pin" aria-hidden="true"></i>
                            {{ locale === 'ar' ? 'مثبّت' : 'Pinned' }}
                        </div>

                        <!-- Top row: hub badge + status + time -->
                        <div class="post-card__top">
                            <span class="hub-badge"
                                  :style="{ background: (post.hub?.color ?? '#1D9E75') + '18', color: post.hub?.color ?? '#1D9E75' }">
                                {{ locale === 'ar' ? post.hub?.name_ar : post.hub?.name_en }}
                            </span>
                            <span class="status-chip"
                                  :class="post.status === 'closed' ? 'status-chip--closed' : 'status-chip--open'">
                                {{ post.status === 'closed'
                                    ? (locale === 'ar' ? 'مغلق' : 'Closed')
                                    : (locale === 'ar' ? 'مفتوح' : 'Open') }}
                            </span>
                            <span class="post-card__time">{{ post.created_at }}</span>
                        </div>

                        <!-- Title -->
                        <h2 class="post-card__title">{{ post.title }}</h2>

                        <!-- Author row -->
                        <div class="post-card__author">
                            <div class="author-avatar">
                                {{ post.author?.nickname?.charAt(0)?.toUpperCase() ?? '?' }}
                            </div>
                            <span class="author-nick">{{ post.author?.nickname }}</span>
                            <span v-if="post.author?.badge" class="author-badge-icon"
                                  :title="badgeLabel(post.author.badge)">
                                {{ post.author.badge.icon }}
                            </span>
                            <span class="author-prof">· {{ post.author?.profession }}</span>
                        </div>

                        <!-- Footer: reply count + likes + best answer indicator -->
                        <div class="post-card__foot">
                            <span class="foot-stat">
                                <i class="ti ti-message-circle" aria-hidden="true"></i>
                                {{ post.reply_count }}
                                {{ locale === 'ar' ? 'رد' : 'replies' }}
                            </span>
                            <span class="foot-stat">
                                <i class="ti ti-heart" aria-hidden="true"></i>
                                {{ post.like_count }}
                            </span>
                            <span v-if="post.has_best_answer" class="best-answer-chip">
                                <i class="ti ti-circle-check" aria-hidden="true"></i>
                                {{ locale === 'ar' ? 'أفضل إجابة' : 'Best Answer' }}
                            </span>
                            <span v-if="post.tags?.length" class="tags-preview">
                                <span v-for="tag in post.tags.slice(0, 2)" :key="tag" class="tag-chip">
                                    {{ tag }}
                                </span>
                            </span>
                        </div>

                    </Link>
                </div>

            </div>

            <!-- ⑤ PAGINATION ────────────────────────────────────── -->
            <div v-if="posts.last_page > 1" class="section pagination">
                <Link v-if="posts.prev_page_url"
                      :href="posts.prev_page_url"
                      class="page-btn">
                    <i class="ti ti-chevron-left" aria-hidden="true"></i>
                    {{ locale === 'ar' ? 'السابق' : 'Previous' }}
                </Link>
                <span class="page-info">
                    {{ posts.current_page }} / {{ posts.last_page }}
                </span>
                <Link v-if="posts.next_page_url"
                      :href="posts.next_page_url"
                      class="page-btn">
                    {{ locale === 'ar' ? 'التالي' : 'Next' }}
                    <i class="ti ti-chevron-right" aria-hidden="true"></i>
                </Link>
            </div>

        </div>
    </AppLayout>
</template>

<style scoped>
/* ── Layout ──────────────────────────────────────────────────── */
.forum-page {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 12px 80px;
}

.section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mobile-only  { display: flex; }
.desktop-only { display: none; }

/* ── Hub tabs ────────────────────────────────────────────────── */
.hub-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}
.hub-tabs::-webkit-scrollbar { display: none; }

.hub-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}
.hub-tab__icon-wrap {
    width: 28px; height: 28px;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
}
.hub-tab__name {
    font-size: 10px; font-weight: 700;
    color: var(--color-text-secondary);
    white-space: nowrap;
}
.hub-tab--active-f { border-color: #1D9E75; background: #f0fdf8; }
.hub-tab--active-m { border-color: #378ADD; background: #eff6ff; }
.hub-tab--active-s { border-color: #D85A30; background: #fff7f4; }
.hub-tab--active-f .hub-tab__name { color: #1D9E75; }
.hub-tab--active-m .hub-tab__name { color: #378ADD; }
.hub-tab--active-s .hub-tab__name { color: #D85A30; }
[data-theme="dark"] .hub-tab--active-f { background: #0A2E22; }
[data-theme="dark"] .hub-tab--active-m { background: #0C1E35; }
[data-theme="dark"] .hub-tab--active-s { background: #2E1208; }

/* ── Page header ─────────────────────────────────────────────── */
.page-header {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    background: var(--color-surface);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 14px 16px;
}
.page-header__left { display: flex; flex-direction: column; gap: 2px; }
.page-header__label { font-size: 10px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin: 0; }
.page-header__title { font-size: 17px; font-weight: 800; color: var(--color-text-primary); margin: 0; }
.page-header__sub   { font-size: 11px; color: var(--color-text-muted); margin: 0; }
.page-header__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ── Ask button ──────────────────────────────────────────────── */
.ask-btn {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--color-primary);
    color: #fff;
    font-size: 12px; font-weight: 700;
    padding: 8px 14px;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background var(--transition-fast);
    white-space: nowrap;
}
.ask-btn:hover { background: var(--color-primary-light); }
.ask-btn--sm { padding: 7px 12px; font-size: 11px; }

/* ── Filter toggle (mobile) ──────────────────────────────────── */
.filter-toggle {
    position: relative;
    display: inline-flex; align-items: center; gap: 4px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 7px 11px;
    font-size: 12px; color: var(--color-text-secondary);
    cursor: pointer;
}
.filter-dot {
    position: absolute;
    top: 6px; right: 6px;
    width: 6px; height: 6px;
    background: var(--color-primary);
    border-radius: 50%;
}

/* ── Filter panel ────────────────────────────────────────────── */
.filter-panel {
    background: var(--color-surface);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    gap: 10px;
    display: none;
}
.filter-panel--open { display: flex; }

.search-wrap {
    position: relative;
    width: 100%;
}
.search-icon {
    position: absolute;
    left: 10px; top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--color-text-muted);
    pointer-events: none;
}
[dir="rtl"] .search-icon { left: auto; right: 10px; }
.search-input {
    width: 100%;
    padding: 8px 10px 8px 32px;
    font-size: 13px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
    outline: none;
    transition: border-color var(--transition-fast);
}
[dir="rtl"] .search-input { padding: 8px 32px 8px 10px; }
.search-input:focus { border-color: var(--color-primary); }

.filter-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.filter-label {
    font-size: 10px; font-weight: 700;
    color: var(--color-text-muted);
    text-transform: uppercase; letter-spacing: 0.05em;
}
.filter-pills {
    display: flex; flex-wrap: wrap; gap: 6px;
}
.filter-pill {
    padding: 4px 10px;
    font-size: 11px; font-weight: 600;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.filter-pill--active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* ── Post list ───────────────────────────────────────────────── */
.post-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.post-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--color-surface);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: border-color var(--transition-fast), transform var(--transition-fast);
    border-left: 3px solid var(--hub-color, var(--color-primary));
}
[dir="rtl"] .post-card { border-left: none; border-right: 3px solid var(--hub-color, var(--color-primary)); }
.post-card:hover { border-color: var(--hub-color, var(--color-primary)); transform: translateY(-1px); }

.post-card__pinned {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 9px; font-weight: 700;
    color: var(--color-primary);
    background: var(--color-primary-soft);
    padding: 2px 7px;
    border-radius: var(--radius-pill);
    width: fit-content;
}

.post-card__top {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}

.hub-badge {
    font-size: 9px; font-weight: 700;
    padding: 2px 7px;
    border-radius: var(--radius-pill);
}

.status-chip {
    font-size: 9px; font-weight: 700;
    padding: 2px 7px;
    border-radius: var(--radius-pill);
}
.status-chip--open   { background: #dcfce7; color: #166534; }
.status-chip--closed { background: #f1f5f9; color: #64748b; }
[data-theme="dark"] .status-chip--open   { background: #052e16; color: #86efac; }
[data-theme="dark"] .status-chip--closed { background: #1e2937; color: #94a3b8; }

.post-card__time {
    font-size: 10px; color: var(--color-text-muted);
    margin-left: auto;
}
[dir="rtl"] .post-card__time { margin-left: 0; margin-right: auto; }

.post-card__title {
    font-size: 14px; font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.4;
    margin: 0;
}

.post-card__author {
    display: flex; align-items: center; gap: 6px;
}
.author-avatar {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: 9px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.author-nick { font-size: 11px; font-weight: 700; color: var(--color-text-secondary); }
.author-badge-icon { font-size: 12px; line-height: 1; }
.author-prof { font-size: 10px; color: var(--color-text-muted); }

.post-card__foot {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding-top: 4px;
    border-top: 1px solid var(--color-border-light);
}
.foot-stat {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 10px; color: var(--color-text-muted);
}
.foot-stat i { font-size: 12px; }

.best-answer-chip {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 9px; font-weight: 700;
    background: #dcfce7; color: #166534;
    padding: 2px 7px;
    border-radius: var(--radius-pill);
}
[data-theme="dark"] .best-answer-chip { background: #052e16; color: #86efac; }

.tags-preview {
    display: flex; gap: 4px; margin-left: auto;
}
[dir="rtl"] .tags-preview { margin-left: 0; margin-right: auto; }
.tag-chip {
    font-size: 9px; color: var(--color-text-muted);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 1px 6px;
}

/* ── Empty state ─────────────────────────────────────────────── */
.empty-state {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; padding: 40px 16px;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    border: 0.5px solid var(--color-border);
    gap: 8px;
}
.empty-state i { font-size: 36px; color: var(--color-text-muted); }
.empty-state__title { font-size: 14px; font-weight: 600; color: var(--color-text-secondary); margin: 0; }
.empty-state__sub   { font-size: 12px; color: var(--color-text-muted); margin: 0; }

/* ── Pagination ──────────────────────────────────────────────── */
.pagination {
    flex-direction: row; align-items: center; justify-content: center;
    gap: 12px; padding-bottom: 16px;
}
.page-btn {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); padding: 7px 13px;
    font-size: 11px; font-weight: 600; color: var(--color-text-secondary);
    text-decoration: none; transition: border-color var(--transition-fast);
}
.page-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.page-info { font-size: 11px; color: var(--color-text-muted); }

/* ── Sidebar hub items ───────────────────────────────────────── */
.sb-hub-item {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 8px; border-radius: var(--radius-md);
    cursor: pointer; transition: background var(--transition-fast);
    border: 1px solid transparent; margin-bottom: 2px;
}
.sb-hub-item:hover { background: var(--color-surface-alt); }
.sb-hub-item--active-f { background: #f0fdf8; border-color: rgba(29,158,117,0.20); }
.sb-hub-item--active-m { background: #eff6ff; border-color: rgba(55,138,221,0.20); }
.sb-hub-item--active-s { background: #fff7f4; border-color: rgba(216,90,48,0.20); }
[data-theme="dark"] .sb-hub-item--active-f { background: #0A2E22; }
[data-theme="dark"] .sb-hub-item--active-m { background: #0C1E35; }
[data-theme="dark"] .sb-hub-item--active-s { background: #2E1208; }
.sb-hub-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sb-hub-name { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); flex: 1; }
.sb-hub-item--active-f .sb-hub-name { color: #1D9E75; }
.sb-hub-item--active-m .sb-hub-name { color: #378ADD; }
.sb-hub-item--active-s .sb-hub-name { color: #D85A30; }
.sb-hub-count { font-size: 10px; color: var(--color-text-muted); }

/* ══════════════════════════════════════════════════════════════
   DESKTOP ≥768px
════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
    .mobile-only  { display: none; }
    .desktop-only { display: flex; flex-direction: column; }

    .forum-page { padding: 20px 20px 20px; gap: 16px; }

    .filter-panel {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px 20px;
        align-items: flex-start;
    }
    .search-wrap { min-width: 200px; flex: 1; }
    .filter-row { flex-direction: row; align-items: center; gap: 8px; }
    .filter-toggle { display: none; }

    .post-card__title { font-size: 15px; }
}
</style>
