<script setup>
// ══════════════════════════════════════════════════════════════════
//  InPractice — Member/ShareKnowledge/Index.vue
//  Location: resources/js/Pages/Member/ShareKnowledge/Index.vue
//
//  Share Knowledge landing page.
//  Two entry points at the top:
//    1. Share a Post or Thought → CreatePost form
//    2. Share a PDF Report      → CreateDocument form
//
//  Below: combined feed of knowledge posts + PDF documents
//  filterable by hub, type (post/document), and search.
//
//  Follows Dashboard.vue pattern:
//    - Mobile: single column, hub tabs, filter toggle
//    - Desktop: sidebar hub switcher, inline filters, 2-col grid
//    - Zero hardcoded hex — all var(--color-*) tokens
//    - Both themes automatic via CSS variables
//    - Bilingual inline
// ══════════════════════════════════════════════════════════════════

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, default: () => ({ data: [] }) },
    documents:   { type: Object, default: () => ({ data: [] }) },
    allHubs:     { type: Array,  default: () => [] },
    sectors:     { type: Array,  default: () => [] },
    activeHubId: { type: Number, default: 0 },
    filters:     { type: Object, default: () => ({}) },
});

const authStore = useAuthStore();
const locale    = computed(() => authStore.locale);
const isDark    = computed(() => authStore.theme === 'dark');

// ── Filter state ──────────────────────────────────────────────────
const activeType = ref(props.filters.type ?? 'all');
const search     = ref(props.filters.search ?? '');

function switchHub(hubId) {
    router.get(route('member.share.index'), {
        hub_id: hubId,
        type:   activeType.value,
        search: search.value,
    }, { preserveState: true, replace: true });
}

function applyTypeFilter(type) {
    activeType.value = type;
    router.get(route('member.share.index'), {
        hub_id: props.activeHubId,
        type,
        search: search.value,
    }, { preserveState: true, replace: true });
}

function applySearch() {
    router.get(route('member.share.index'), {
        hub_id: props.activeHubId,
        type:   activeType.value,
        search: search.value,
    }, { preserveState: true, replace: true });
}

// ── Active hub object ─────────────────────────────────────────────
const activeHub = computed(() =>
    props.allHubs.find(h => h.id === props.activeHubId) ?? props.allHubs[0]
);

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

function hubColor(hub) {
    return hub?.color ?? 'var(--color-primary)';
}

// ── Combined + sorted feed ────────────────────────────────────────
const feedPosts = computed(() => props.posts?.data ?? []);
const feedDocs  = computed(() => props.documents?.data ?? []);

// ── Category label ────────────────────────────────────────────────
const categoryLabels = {
    report:   { en: 'Report',   ar: 'تقرير'  },
    template: { en: 'Template', ar: 'نموذج'  },
    guide:    { en: 'Guide',    ar: 'دليل'   },
    news:     { en: 'News',     ar: 'أخبار'  },
    other:    { en: 'Other',    ar: 'أخرى'   },
};

function categoryLabel(cat) {
    const l = categoryLabels[cat];
    return l ? (locale.value === 'ar' ? l.ar : l.en) : cat;
}
</script>

<template>
    <AppLayout :title="locale === 'ar' ? 'شارك المعرفة' : 'Share Knowledge'">
        <Head :title="locale === 'ar' ? 'شارك المعرفة' : 'Share Knowledge'" />

        <!-- ── Desktop sidebar hub switcher slot ──────────────── -->
        <template #sidebar-hubs>
            <div class="sk-sidebar-hubs">
                <div class="sk-sidebar-hubs__label">
                    {{ locale === 'ar' ? 'المجموعات' : 'Your Hubs' }}
                </div>
                <button
                    v-for="hub in allHubs"
                    :key="hub.id"
                    class="sk-sidebar-hub"
                    :class="{ 'sk-sidebar-hub--active': hub.id === activeHubId }"
                    :style="hub.id === activeHubId ? `--hub-color: ${hubColor(hub)}` : ''"
                    @click="switchHub(hub.id)"
                >
                    <span class="sk-sidebar-hub__dot" :style="`background: ${hubColor(hub)}`"></span>
                    <span class="sk-sidebar-hub__name">{{ hubName(hub) }}</span>
                </button>
            </div>
        </template>

        <!-- ══════════════════════════════════════════════════════
             MAIN CONTENT
        ═══════════════════════════════════════════════════════════ -->
        <div class="sk-page">

            <!-- ── Mobile hub tabs ────────────────────────────── -->
            <div class="sk-hub-tabs">
                <button
                    v-for="hub in allHubs"
                    :key="hub.id"
                    class="sk-hub-tab"
                    :class="{ 'sk-hub-tab--active': hub.id === activeHubId }"
                    :style="hub.id === activeHubId ? `--hub-color: ${hubColor(hub)}` : ''"
                    @click="switchHub(hub.id)"
                >
                    <span class="sk-hub-tab__stripe" :style="`background: ${hubColor(hub)}`"></span>
                    <i :class="`ti ${hub.icon ?? 'ti-layout-grid'}`"></i>
                    <span>{{ hubName(hub) }}</span>
                </button>
            </div>

            <!-- ── Two entry point cards ──────────────────────── -->
            <div class="sk-entry-cards">
                <!-- Share a Post -->
                <Link :href="route('member.share.post.create')" class="sk-entry-card sk-entry-card--post">
                    <div class="sk-entry-card__icon">
                        <i class="ti ti-pencil"></i>
                    </div>
                    <div class="sk-entry-card__text">
                        <div class="sk-entry-card__title">
                            {{ locale === 'ar' ? 'شارك فكرة أو منشور' : 'Share a Post or Thought' }}
                        </div>
                        <div class="sk-entry-card__sub">
                            {{ locale === 'ar'
                                ? 'شارك رأيك، مقال، أو منشور من سوشيال ميديا'
                                : 'Share your insight, an article, or a social media post' }}
                        </div>
                    </div>
                    <i class="ti ti-arrow-right sk-entry-card__arrow"></i>
                </Link>

                <!-- Share a PDF -->
                <Link :href="route('member.share.document.create')" class="sk-entry-card sk-entry-card--pdf">
                    <div class="sk-entry-card__icon">
                        <i class="ti ti-file-type-pdf"></i>
                    </div>
                    <div class="sk-entry-card__text">
                        <div class="sk-entry-card__title">
                            {{ locale === 'ar' ? 'شارك تقرير أو ملف PDF' : 'Share a PDF Report' }}
                        </div>
                        <div class="sk-entry-card__sub">
                            {{ locale === 'ar'
                                ? 'ارفع تقرير، نموذج، أو دليل مهني'
                                : 'Upload a report, template, or professional guide' }}
                        </div>
                    </div>
                    <i class="ti ti-arrow-right sk-entry-card__arrow"></i>
                </Link>
            </div>

            <!-- ── Filters row ────────────────────────────────── -->
            <div class="sk-filters">
                <!-- Type filter pills -->
                <div class="sk-filter-pills">
                    <button
                        class="sk-pill"
                        :class="{ 'sk-pill--active': activeType === 'all' }"
                        @click="applyTypeFilter('all')"
                    >
                        {{ locale === 'ar' ? 'الكل' : 'All' }}
                    </button>
                    <button
                        class="sk-pill"
                        :class="{ 'sk-pill--active': activeType === 'post' }"
                        @click="applyTypeFilter('post')"
                    >
                        {{ locale === 'ar' ? 'منشورات' : 'Posts' }}
                    </button>
                    <button
                        class="sk-pill"
                        :class="{ 'sk-pill--active': activeType === 'document' }"
                        @click="applyTypeFilter('document')"
                    >
                        {{ locale === 'ar' ? 'ملفات PDF' : 'PDF Reports' }}
                    </button>
                </div>

                <!-- Search -->
                <div class="sk-search">
                    <i class="ti ti-search"></i>
                    <input
                        v-model="search"
                        type="text"
                        :placeholder="locale === 'ar' ? 'ابحث...' : 'Search...'"
                        @keydown.enter="applySearch"
                    />
                </div>
            </div>

            <!-- ── Posts feed ─────────────────────────────────── -->
            <template v-if="activeType !== 'document'">
                <div v-if="feedPosts.length > 0" class="sk-feed">
                    <article
                        v-for="post in feedPosts"
                        :key="`post-${post.id}`"
                        class="sk-post-card"
                    >
                        <!-- Hub color stripe -->
                        <div class="sk-post-card__stripe" :style="`background: ${post.hub.color}`"></div>

                        <div class="sk-post-card__body">
                            <!-- Header row -->
                            <div class="sk-post-card__head">
                                <span class="sk-badge sk-badge--knowledge">
                                    <i class="ti ti-bulb"></i>
                                    {{ locale === 'ar' ? 'معرفة' : 'Knowledge' }}
                                </span>
                                <span v-if="post.source_label" class="sk-badge sk-badge--source">
                                    {{ post.source_label }}
                                </span>
                                <span class="sk-post-card__time">{{ post.created_at }}</span>
                            </div>

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

                            <!-- Body preview -->
                            <p class="sk-post-card__preview">{{ post.body.substring(0, 140) }}{{ post.body.length > 140 ? '...' : '' }}</p>

                            <!-- Source link if present -->
                            <a
                                v-if="post.source_url"
                                :href="post.source_url"
                                class="sk-post-card__source-link"
                                target="_blank"
                                rel="noopener"
                            >
                                <i class="ti ti-external-link"></i>
                                {{ locale === 'ar' ? 'عرض المصدر الأصلي' : 'View original source' }}
                            </a>

                            <!-- Footer -->
                            <div class="sk-post-card__footer">
                                <span class="sk-post-card__author">{{ post.author.nickname }}</span>
                                <span class="sk-post-card__hub" :style="`color: ${post.hub.color}`">
                                    {{ locale === 'ar' ? post.hub.name_ar : post.hub.name_en }}
                                </span>
                                <div class="sk-post-card__stats">
                                    <span><i class="ti ti-message-circle"></i> {{ post.reply_count }}</span>
                                    <span><i class="ti ti-heart"></i> {{ post.like_count }}</span>
                                </div>
                                <Link :href="post.show_url" class="sk-post-card__cta">
                                    {{ locale === 'ar' ? 'اقرأ وشارك' : 'Read & Discuss' }}
                                    <i class="ti ti-arrow-right"></i>
                                </Link>
                            </div>
                        </div>
                    </article>
                </div>

                <!-- Empty posts state -->
                <div v-else-if="activeType === 'post'" class="sk-empty">
                    <i class="ti ti-bulb"></i>
                    <p>{{ locale === 'ar' ? 'لا توجد منشورات بعد. كن أول من يشارك.' : 'No posts yet. Be the first to share.' }}</p>
                    <Link :href="route('member.share.post.create')" class="sk-empty-btn">
                        {{ locale === 'ar' ? 'شارك فكرة' : 'Share a Thought' }}
                    </Link>
                </div>
            </template>

            <!-- ── Documents feed ─────────────────────────────── -->
            <template v-if="activeType !== 'post'">
                <div v-if="feedDocs.length > 0" class="sk-doc-grid">
                    <article
                        v-for="doc in feedDocs"
                        :key="`doc-${doc.id}`"
                        class="sk-doc-card"
                    >
                        <!-- Hub color stripe -->
                        <div class="sk-doc-card__stripe" :style="`background: ${doc.hub.color}`"></div>

                        <div class="sk-doc-card__body">
                            <!-- Category + hub -->
                            <div class="sk-doc-card__head">
                                <span class="sk-badge sk-badge--pdf">
                                    <i class="ti ti-file-type-pdf"></i>
                                    PDF
                                </span>
                                <span class="sk-badge sk-badge--category">
                                    {{ categoryLabel(doc.document_category) }}
                                </span>
                                <span class="sk-doc-card__size">{{ doc.file_size }}</span>
                            </div>

                            <!-- Title -->
                            <h3 class="sk-doc-card__title">
                                {{ locale === 'ar' && doc.title_ar ? doc.title_ar : doc.title_en }}
                            </h3>

                            <!-- Description -->
                            <p v-if="doc.description_en" class="sk-doc-card__desc">
                                {{ (locale === 'ar' && doc.description_ar ? doc.description_ar : doc.description_en).substring(0, 100) }}...
                            </p>

                            <!-- Rating stars -->
                            <div class="sk-doc-card__rating">
                                <span
                                    v-for="star in 5"
                                    :key="star"
                                    class="sk-star"
                                    :class="star <= Math.round(doc.rating_average) ? 'sk-star--filled' : 'sk-star--empty'"
                                >★</span>
                                <span class="sk-doc-card__rating-count">({{ doc.rating_count }})</span>
                            </div>

                            <!-- Footer -->
                            <div class="sk-doc-card__footer">
                                <span class="sk-doc-card__author">{{ doc.author.nickname }}</span>
                                <div class="sk-doc-card__actions">
                                    <a :href="doc.download_url" class="sk-doc-btn sk-doc-btn--download">
                                        <i class="ti ti-download"></i>
                                        {{ locale === 'ar' ? 'تحميل' : 'Download' }}
                                    </a>
                                    <Link :href="doc.show_url" class="sk-doc-btn sk-doc-btn--view">
                                        {{ locale === 'ar' ? 'عرض' : 'View' }}
                                    </Link>
                                </div>
                            </div>
                        </div>
                    </article>
                </div>

                <!-- Empty documents state -->
                <div v-else-if="activeType === 'document'" class="sk-empty">
                    <i class="ti ti-file-type-pdf"></i>
                    <p>{{ locale === 'ar' ? 'لا توجد ملفات بعد. كن أول من يشارك.' : 'No documents yet. Be the first to upload.' }}</p>
                    <Link :href="route('member.share.document.create')" class="sk-empty-btn">
                        {{ locale === 'ar' ? 'رفع ملف' : 'Upload a PDF' }}
                    </Link>
                </div>
            </template>

            <!-- Empty all state -->
            <div v-if="feedPosts.length === 0 && feedDocs.length === 0 && activeType === 'all'" class="sk-empty">
                <i class="ti ti-share"></i>
                <p>{{ locale === 'ar' ? 'لا يوجد محتوى بعد. كن أول من يشارك المعرفة.' : 'Nothing shared yet. Be the first.' }}</p>
            </div>

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

<style scoped>
/* ── Page wrapper ─────────────────────────────────────────────── */
.sk-page {
    padding: 16px;
    max-width: 100%;
}

/* ── Mobile hub tabs ──────────────────────────────────────────── */
.sk-hub-tabs {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 20px;
    scrollbar-width: none;
}
.sk-hub-tabs::-webkit-scrollbar { display: none; }

.sk-hub-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1.5px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
    position: relative;
    overflow: hidden;
}
.sk-hub-tab__stripe {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    opacity: 0;
    transition: opacity 0.15s;
}
.sk-hub-tab--active .sk-hub-tab__stripe { opacity: 1; }
.sk-hub-tab--active {
    border-color: var(--hub-color, var(--color-primary));
    color: var(--hub-color, var(--color-primary));
    background: var(--color-surface);
}

/* ── Entry cards ──────────────────────────────────────────────── */
.sk-entry-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 24px;
}

.sk-entry-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px;
    border-radius: 14px;
    border: 1.5px solid var(--color-border);
    background: var(--color-surface);
    text-decoration: none;
    transition: all 0.15s;
    cursor: pointer;
}
.sk-entry-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.sk-entry-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}
.sk-entry-card--post .sk-entry-card__icon {
    background: rgba(29, 158, 117, 0.12);
    color: var(--color-primary);
}
.sk-entry-card--pdf .sk-entry-card__icon {
    background: rgba(55, 138, 221, 0.12);
    color: #378ADD;
}
.sk-entry-card__text { flex: 1; }
.sk-entry-card__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 2px;
}
.sk-entry-card__sub {
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.4;
}
.sk-entry-card__arrow {
    color: var(--color-text-muted);
    font-size: 18px;
}

/* ── Filters ──────────────────────────────────────────────────── */
.sk-filters {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}
.sk-filter-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.sk-pill {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1.5px solid var(--color-border);
    background: transparent;
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.sk-pill--active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}
.sk-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1.5px solid var(--color-border);
    background: var(--color-surface);
}
.sk-search i { color: var(--color-text-muted); font-size: 16px; }
.sk-search input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 14px;
    color: var(--color-text);
}
.sk-search input::placeholder { color: var(--color-text-muted); }

/* ── Post card ────────────────────────────────────────────────── */
.sk-feed { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }

.sk-post-card {
    display: flex;
    border-radius: 14px;
    border: 1.5px solid var(--color-border);
    background: var(--color-surface);
    overflow: hidden;
    transition: box-shadow 0.15s;
}
.sk-post-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.07); }
.sk-post-card__stripe { width: 4px; flex-shrink: 0; }
.sk-post-card__body { padding: 16px; flex: 1; }
.sk-post-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.sk-post-card__time { font-size: 11px; color: var(--color-text-muted); margin-left: auto; }
.sk-post-card__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 6px;
    line-height: 1.4;
}
.sk-post-card__preview {
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-bottom: 10px;
}
.sk-post-card__source-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--color-primary);
    text-decoration: none;
    margin-bottom: 12px;
}
.sk-post-card__source-link:hover { text-decoration: underline; }
.sk-post-card__footer {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.sk-post-card__author { font-size: 12px; font-weight: 600; color: var(--color-text); }
.sk-post-card__hub { font-size: 11px; font-weight: 600; }
.sk-post-card__stats {
    display: flex;
    gap: 10px;
    font-size: 12px;
    color: var(--color-text-muted);
    margin-left: auto;
}
.sk-post-card__stats span { display: flex; align-items: center; gap: 3px; }
.sk-post-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 8px;
    background: var(--color-primary);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

/* ── Badges ───────────────────────────────────────────────────── */
.sk-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}
.sk-badge--knowledge { background: rgba(29,158,117,0.12); color: var(--color-primary); }
.sk-badge--source    { background: rgba(55,138,221,0.12); color: #378ADD; }
.sk-badge--pdf       { background: rgba(216,90,48,0.12);  color: #D85A30; }
.sk-badge--category  { background: var(--color-bg);       color: var(--color-text-muted); border: 1px solid var(--color-border); }

/* ── Document grid ────────────────────────────────────────────── */
.sk-doc-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 24px;
}
.sk-doc-card {
    display: flex;
    border-radius: 14px;
    border: 1.5px solid var(--color-border);
    background: var(--color-surface);
    overflow: hidden;
    transition: box-shadow 0.15s;
}
.sk-doc-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.07); }
.sk-doc-card__stripe { width: 4px; flex-shrink: 0; }
.sk-doc-card__body { padding: 16px; flex: 1; }
.sk-doc-card__head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.sk-doc-card__size { font-size: 11px; color: var(--color-text-muted); margin-left: auto; }
.sk-doc-card__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 6px;
    line-height: 1.4;
}
.sk-doc-card__desc {
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin-bottom: 10px;
}
.sk-doc-card__rating {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 12px;
}
.sk-star { font-size: 14px; }
.sk-star--filled { color: #F59E0B; }
.sk-star--empty  { color: var(--color-border); }
.sk-doc-card__rating-count { font-size: 11px; color: var(--color-text-muted); margin-left: 4px; }
.sk-doc-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}
.sk-doc-card__author { font-size: 12px; font-weight: 600; color: var(--color-text); }
.sk-doc-card__actions { display: flex; gap: 8px; }
.sk-doc-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.sk-doc-btn--download {
    background: rgba(29,158,117,0.12);
    color: var(--color-primary);
}
.sk-doc-btn--view {
    background: var(--color-primary);
    color: #fff;
}

/* ── Empty state ──────────────────────────────────────────────── */
.sk-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 24px;
    color: var(--color-text-muted);
    text-align: center;
}
.sk-empty i { font-size: 40px; opacity: 0.4; }
.sk-empty p { font-size: 14px; }
.sk-empty-btn {
    padding: 10px 20px;
    border-radius: 10px;
    background: var(--color-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

/* ── Sidebar hub switcher (desktop only) ──────────────────────── */
.sk-sidebar-hubs { display: none; }

/* ══════════════════════════════════════════════════════════════
   DESKTOP — 768px+
═══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
    .sk-hub-tabs { display: none; }

    .sk-sidebar-hubs {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }
    .sk-sidebar-hubs__label {
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--color-text-muted);
        padding: 0 8px;
        margin-bottom: 8px;
    }
    .sk-sidebar-hub {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 10px;
        border: none;
        background: transparent;
        color: var(--color-text-muted);
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.15s;
        text-align: start;
    }
    .sk-sidebar-hub:hover { background: var(--color-bg); }
    .sk-sidebar-hub--active {
        background: rgba(29,158,117,0.08);
        color: var(--color-text);
        font-weight: 600;
    }
    .sk-sidebar-hub__dot {
        width: 8px; height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .sk-page { padding: 24px 28px; }

    .sk-entry-cards {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-bottom: 28px;
    }

    .sk-filters {
        flex-direction: row;
        align-items: center;
        gap: 16px;
    }
    .sk-search { min-width: 280px; }

    .sk-doc-grid {
        grid-template-columns: 1fr 1fr;
    }
}
</style>
