<script setup>
import { ref, computed } from 'vue'
import { Link, router } from '@inertiajs/vue3'
import AppLayout from '@/Layouts/AppLayout.vue'
import { useAuthStore } from '@/Stores/useAuthStore'

const auth = useAuthStore()
const locale = computed(() => auth.locale)
const t = (en, ar) => locale.value === 'ar' ? ar : en

const props = defineProps({
    hubs:      { type: Array,  default: () => [] },
    profiles:  { type: Object, default: () => ({ data: [], links: [] }) },
    briefs:    { type: Object, default: () => ({ data: [], links: [] }) },
    myProfile: { type: Object, default: null },
    myBriefs:  { type: Array,  default: () => [] },
    myMatches: { type: Number, default: 0 },
    filters:   { type: Object, default: () => ({}) },
})

// ── Tab state — Profiles | Briefs ─────────────────────────────
const activeTab = ref('profiles')

// ── Filters ───────────────────────────────────────────────────
const search       = ref(props.filters.search       ?? '')
const briefSearch  = ref(props.filters.brief_search ?? '')
const hubId        = ref(props.filters.hub_id       ?? '')
const availability = ref(props.filters.availability ?? '')

function applyFilters() {
    router.get(route('member.freelance.index'), {
        hub_id:       hubId.value        || undefined,
        search:       search.value       || undefined,
        brief_search: briefSearch.value  || undefined,
        availability: availability.value || undefined,
    }, { preserveState: true, preserveScroll: true })
}

// ── Hub color helper ──────────────────────────────────────────
const hubColors = { finance: '#1D9E75', marketing: '#378ADD', sales: '#D85A30' }
function hubColor(slug) { return hubColors[slug] ?? 'var(--color-primary)' }

// ── Availability label ────────────────────────────────────────
function availLabel(val) {
    const map = {
        weekends:    t('Weekends', 'الإجازات'),
        evenings:    t('Evenings', 'المساءات'),
        full:        t('Full Availability', 'متفرغ كامل'),
        unavailable: t('Unavailable', 'غير متاح'),
    }
    return map[val] ?? val
}

// ── Experience label ──────────────────────────────────────────
function expLabel(val) {
    const map = {
        student: t('Student', 'طالب'),
        fresh:   t('Fresh Grad', 'خريج جديد'),
        junior:  t('Junior', 'مبتدئ'),
        mid:     t('Mid-Level', 'متوسط'),
        senior:  t('Senior', 'خبير'),
    }
    return map[val] ?? val
}
</script>

<template>
    <AppLayout>
        <!-- ── Sidebar slot for desktop hub switcher ── -->
        <template #sidebar-hubs>
            <div class="sidebar-section">
                <p class="sidebar-label">{{ t('Filter by Hub', 'فلتر حسب المجال') }}</p>
                <button
                    v-for="hub in hubs"
                    :key="hub.id"
                    class="sidebar-hub-btn"
                    :class="{ 'sidebar-hub-btn--active': String(hubId) === String(hub.id) }"
                    :style="String(hubId) === String(hub.id)
                        ? { background: hubColor(hub.slug) + '22', borderColor: hubColor(hub.slug) }
                        : {}"
                    @click="hubId = String(hub.id); applyFilters()"
                >
                    <span class="hub-dot" :style="{ background: hubColor(hub.slug) }"></span>
                    {{ locale === 'ar' ? hub.name_ar : hub.name_en }}
                </button>
                <button
                    v-if="hubId"
                    class="sidebar-hub-btn sidebar-hub-btn--clear"
                    @click="hubId = ''; applyFilters()"
                >
                    {{ t('All Hubs', 'كل المجالات') }}
                </button>
            </div>
        </template>

        <div class="fe-page">

            <!-- ── Hero — two entry cards ─────────────────── -->
            <div class="fe-hero">
                <!-- My profile status / CTA -->
                <div class="fe-hero-card fe-hero-card--offer">
                    <div class="fe-hero-icon">💼</div>
                    <div class="fe-hero-content">
                        <p class="fe-hero-title">{{ t('I Offer Services', 'أقدم خدمات') }}</p>
                        <p class="fe-hero-sub">
                            {{ myProfile
                                ? t('Your profile is live', 'ملفك الشخصي نشط')
                                : t('Create your freelance profile', 'أنشئ ملفك المهني') }}
                        </p>
                    </div>
                    <Link
                        :href="myProfile
                            ? route('member.freelance.profile.edit')
                            : route('member.freelance.profile.create')"
                        class="fe-hero-btn"
                    >
                        {{ myProfile ? t('Edit Profile', 'تعديل الملف') : t('Create Profile', 'إنشاء ملف') }}
                    </Link>
                </div>

                <!-- Post a brief CTA -->
                <div class="fe-hero-card fe-hero-card--seek">
                    <div class="fe-hero-icon">🔍</div>
                    <div class="fe-hero-content">
                        <p class="fe-hero-title">{{ t('I Need Help', 'أحتاج مساعدة') }}</p>
                        <p class="fe-hero-sub">{{ t('Post a brief — find the right professional', 'انشر طلبك واعثر على المتخصص المناسب') }}</p>
                    </div>
                    <Link :href="route('member.freelance.briefs.create')" class="fe-hero-btn">
                        {{ t('Post a Brief', 'نشر طلب') }}
                    </Link>
                </div>
            </div>

            <!-- ── Disclaimer ───────────────────────────── -->
            <div class="fe-disclaimer">
                <span class="fe-disclaimer-icon">ℹ️</span>
                {{ t(
                    'InPractice connects professionals only. We are not responsible for fees, payment, or quality of work delivered. All arrangements are between you and the other party.',
                    'InPractice تربط المهنيين فقط. لسنا مسؤولين عن الأتعاب أو الدفع أو جودة العمل المنجز. جميع الترتيبات بينك وبين الطرف الآخر.'
                ) }}
            </div>

            <!-- ── Pending matches badge ────────────────── -->
            <Link
                v-if="myMatches > 0"
                :href="route('member.freelance.my-matches')"
                class="fe-matches-badge"
            >
                <span class="fe-matches-dot">{{ myMatches }}</span>
                {{ t('You have pending matches', 'لديك طلبات معلقة') }}
                <span class="fe-matches-arrow">→</span>
            </Link>

            <!-- ── Tabs — Profiles | Briefs ─────────────── -->
            <div class="fe-tabs">
                <button
                    class="fe-tab"
                    :class="{ 'fe-tab--active': activeTab === 'profiles' }"
                    @click="activeTab = 'profiles'"
                >
                    {{ t('Freelancers', 'المستقلون') }}
                    <span class="fe-tab-count">{{ profiles.total ?? profiles.data.length }}</span>
                </button>
                <button
                    class="fe-tab"
                    :class="{ 'fe-tab--active': activeTab === 'briefs' }"
                    @click="activeTab = 'briefs'"
                >
                    {{ t('Open Briefs', 'الطلبات المفتوحة') }}
                    <span class="fe-tab-count">{{ briefs.total ?? briefs.data.length }}</span>
                </button>
            </div>

            <!-- ── Profiles Tab ──────────────────────────── -->
            <div v-if="activeTab === 'profiles'">

                <!-- Search + filters -->
                <div class="fe-filter-row">
                    <input
                        v-model="search"
                        class="fe-search"
                        :placeholder="t('Search freelancers…', 'ابحث عن مستقل…')"
                        @keyup.enter="applyFilters"
                    />
                    <select v-model="availability" class="fe-select" @change="applyFilters">
                        <option value="">{{ t('Any availability', 'أي توفر') }}</option>
                        <option value="weekends">{{ t('Weekends', 'الإجازات') }}</option>
                        <option value="evenings">{{ t('Evenings', 'المساءات') }}</option>
                        <option value="full">{{ t('Full', 'متفرغ') }}</option>
                    </select>
                    <button class="fe-filter-apply" @click="applyFilters">
                        {{ t('Search', 'بحث') }}
                    </button>
                </div>

                <!-- Hub filter pills (mobile) -->
                <div class="fe-hub-pills">
                    <button
                        class="fe-hub-pill"
                        :class="{ 'fe-hub-pill--active': !hubId }"
                        @click="hubId = ''; applyFilters()"
                    >{{ t('All', 'الكل') }}</button>
                    <button
                        v-for="hub in hubs"
                        :key="hub.id"
                        class="fe-hub-pill"
                        :class="{ 'fe-hub-pill--active': String(hubId) === String(hub.id) }"
                        :style="String(hubId) === String(hub.id)
                            ? { background: hubColor(hub.slug), color: '#fff', borderColor: hubColor(hub.slug) }
                            : {}"
                        @click="hubId = String(hub.id); applyFilters()"
                    >{{ locale === 'ar' ? hub.name_ar : hub.name_en }}</button>
                </div>

                <!-- Profile cards grid -->
                <div v-if="profiles.data.length" class="fe-grid">
                    <Link
                        v-for="profile in profiles.data"
                        :key="profile.id"
                        :href="route('member.freelance.profile.show', profile.id)"
                        class="fe-profile-card"
                    >
                        <!-- Hub color stripe -->
                        <div
                            class="fe-card-stripe"
                            :style="{ background: hubColor(profile.hub?.slug) }"
                        ></div>

                        <div class="fe-card-body">
                            <!-- Avatar initials + LinkedIn badge -->
                            <div class="fe-card-head">
                                <div
                                    class="fe-avatar"
                                    :style="{ background: hubColor(profile.hub?.slug) + '33',
                                              color: hubColor(profile.hub?.slug) }"
                                >
                                    {{ profile.user?.nickname?.charAt(0).toUpperCase() }}
                                </div>
                                <div class="fe-card-meta">
                                    <p class="fe-card-nickname">{{ profile.user?.nickname }}</p>
                                    <p class="fe-card-exp">{{ expLabel(profile.experience_level) }}</p>
                                </div>
                                <!-- LinkedIn icon — trust signal -->
                                <a
                                    v-if="profile.linkedin_url"
                                    :href="route('member.share.external') + '?url=' + encodeURIComponent(profile.linkedin_url)"
                                    target="_blank"
                                    class="fe-linkedin-badge"
                                    @click.stop
                                    :title="t('View LinkedIn profile', 'عرض ملف LinkedIn')">
                                    in
                                </a>
                            </div>

                            <p class="fe-card-headline">{{ profile.headline }}</p>

                            <!-- Rating -->
                            <div class="fe-card-rating" v-if="profile.review_count > 0">
                                <span class="fe-stars">
                                    <span
                                        v-for="n in 5"
                                        :key="n"
                                        :class="n <= Math.round(profile.rating_average) ? 'fe-star--filled' : 'fe-star--empty'"
                                    >★</span>
                                </span>
                                <span class="fe-rating-num">{{ profile.rating_average }}</span>
                                <span class="fe-rating-count">({{ profile.review_count }})</span>
                            </div>
                            <p v-else class="fe-no-reviews">{{ t('No reviews yet', 'لا تقييمات بعد') }}</p>

                            <!-- Footer row -->
                            <div class="fe-card-footer">
                                <span class="fe-avail-badge">{{ availLabel(profile.availability) }}</span>
                                <span
                                    v-if="profile.rate_range"
                                    class="fe-rate-badge"
                                >{{ profile.rate_range }}</span>
                            </div>
                        </div>
                    </Link>
                </div>

                <div v-else class="fe-empty">
                    <p class="fe-empty-icon">🔍</p>
                    <p class="fe-empty-text">{{ t('No freelancers found', 'لا يوجد مستقلون') }}</p>
                    <p class="fe-empty-sub">{{ t('Be the first — create your profile', 'كن أول — أنشئ ملفك الشخصي') }}</p>
                    <Link :href="route('member.freelance.profile.create')" class="fe-empty-btn">
                        {{ t('Create Profile', 'إنشاء ملف') }}
                    </Link>
                </div>

                <!-- Pagination -->
                <div v-if="profiles.links?.length > 3" class="fe-pagination">
                    <Link
                        v-for="link in profiles.links"
                        :key="link.label"
                        :href="link.url ?? '#'"
                        class="fe-page-btn"
                        :class="{ 'fe-page-btn--active': link.active, 'fe-page-btn--disabled': !link.url }"
                        v-html="link.label"
                    />
                </div>
            </div>

            <!-- ── Briefs Tab ─────────────────────────────── -->
            <div v-if="activeTab === 'briefs'">

                <div class="fe-filter-row">
                    <input
                        v-model="briefSearch"
                        class="fe-search"
                        :placeholder="t('Search briefs…', 'ابحث عن طلب…')"
                        @keyup.enter="applyFilters"
                    />
                    <button class="fe-filter-apply" @click="applyFilters">
                        {{ t('Search', 'بحث') }}
                    </button>
                </div>

                <div v-if="briefs.data.length" class="fe-briefs-list">
                    <Link
                        v-for="brief in briefs.data"
                        :key="brief.id"
                        :href="route('member.freelance.briefs.show', brief.id)"
                        class="fe-brief-card"
                    >
                        <div
                            class="fe-brief-stripe"
                            :style="{ background: hubColor(brief.hub?.slug) }"
                        ></div>
                        <div class="fe-brief-body">
                            <div class="fe-brief-head">
                                <span
                                    class="fe-brief-hub"
                                    :style="{ color: hubColor(brief.hub?.slug) }"
                                >
                                    {{ locale === 'ar' ? brief.hub?.name_ar : brief.hub?.name_en }}
                                </span>
                                <span class="fe-brief-time">{{ brief.created_at_human }}</span>
                            </div>
                            <p class="fe-brief-title">{{ brief.title }}</p>
                            <p class="fe-brief-desc">{{ brief.description?.substring(0, 120) }}…</p>
                            <div class="fe-brief-footer">
                                <span v-if="brief.budget_range" class="fe-budget-badge">
                                    {{ brief.budget_range }}
                                </span>
                                <span v-if="brief.duration_estimate" class="fe-duration-badge">
                                    {{ brief.duration_estimate }}
                                </span>
                            </div>
                        </div>
                    </Link>
                </div>

                <div v-else class="fe-empty">
                    <p class="fe-empty-icon">📋</p>
                    <p class="fe-empty-text">{{ t('No open briefs', 'لا طلبات مفتوحة') }}</p>
                    <p class="fe-empty-sub">{{ t('Be the first to post a brief', 'كن أول من ينشر طلباً') }}</p>
                    <Link :href="route('member.freelance.briefs.create')" class="fe-empty-btn">
                        {{ t('Post a Brief', 'نشر طلب') }}
                    </Link>
                </div>

                <div v-if="briefs.links?.length > 3" class="fe-pagination">
                    <Link
                        v-for="link in briefs.links"
                        :key="link.label"
                        :href="link.url ?? '#'"
                        class="fe-page-btn"
                        :class="{ 'fe-page-btn--active': link.active, 'fe-page-btn--disabled': !link.url }"
                        v-html="link.label"
                    />
                </div>
            </div>

        </div><!-- end fe-page -->
    </AppLayout>
</template>

<style scoped>
.fe-page { padding: 16px; }

/* ── Hero cards ─────────────────────────────────── */
.fe-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.fe-hero-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fe-hero-card--offer { border-top: 3px solid var(--color-primary); }
.fe-hero-card--seek  { border-top: 3px solid #378ADD; }
.fe-hero-icon { font-size: 24px; }
.fe-hero-title { font-size: 13px; font-weight: 700; color: var(--color-text); margin: 0; }
.fe-hero-sub   { font-size: 11px; color: var(--color-text-muted); margin: 0; }
.fe-hero-btn {
    display: inline-block;
    margin-top: 4px;
    padding: 7px 14px;
    background: var(--color-primary);
    color: #fff;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
}

/* ── Disclaimer ─────────────────────────────────── */
.fe-disclaimer {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 11px;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-bottom: 14px;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}
.fe-disclaimer-icon { flex-shrink: 0; }

/* ── Pending matches badge ──────────────────────── */
.fe-matches-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--color-primary);
    color: #fff;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 14px;
}
.fe-matches-dot {
    background: #fff;
    color: var(--color-primary);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}
.fe-matches-arrow { margin-inline-start: auto; }

/* ── Tabs ───────────────────────────────────────── */
.fe-tabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 2px solid var(--color-border); }
.fe-tab {
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.fe-tab--active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.fe-tab-count {
    background: var(--color-bg);
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 11px;
}

/* ── Filters ────────────────────────────────────── */
.fe-filter-row { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.fe-search {
    flex: 1;
    min-width: 160px;
    padding: 9px 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 13px;
    color: var(--color-text);
}
.fe-search::placeholder { color: var(--color-text-muted); }
.fe-select {
    padding: 9px 10px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 12px;
    color: var(--color-text);
}
.fe-filter-apply {
    padding: 9px 16px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

/* ── Hub pills (mobile only) ────────────────────── */
.fe-hub-pills {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 14px;
    scrollbar-width: none;
}
.fe-hub-pills::-webkit-scrollbar { display: none; }
.fe-hub-pill {
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}
.fe-hub-pill--active { color: var(--color-primary); border-color: var(--color-primary); }

/* ── Profile cards grid ─────────────────────────── */
.fe-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 20px; }
.fe-profile-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    display: block;
    transition: transform 0.15s, box-shadow 0.15s;
}
.fe-profile-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.12); }
.fe-card-stripe { height: 4px; }
.fe-card-body   { padding: 14px; }
.fe-card-head   { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.fe-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    flex-shrink: 0;
}
.fe-card-nickname { font-size: 14px; font-weight: 700; color: var(--color-text); margin: 0; }
.fe-card-exp      { font-size: 11px; color: var(--color-text-muted); margin: 0; }
.fe-card-meta     { flex: 1; }

/* LinkedIn badge */
.fe-linkedin-badge {
    background: #0077B5;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 7px;
    border-radius: 4px;
    text-decoration: none;
    flex-shrink: 0;
}

.fe-card-headline { font-size: 13px; color: var(--color-text); margin: 0 0 10px; line-height: 1.4; }

/* Stars */
.fe-card-rating { display: flex; align-items: center; gap: 4px; margin-bottom: 10px; }
.fe-stars       { letter-spacing: 1px; }
.fe-star--filled { color: #f59e0b; }
.fe-star--empty  { color: var(--color-border); }
.fe-rating-num   { font-size: 13px; font-weight: 700; color: var(--color-text); }
.fe-rating-count { font-size: 11px; color: var(--color-text-muted); }
.fe-no-reviews   { font-size: 11px; color: var(--color-text-muted); margin: 0 0 10px; }

.fe-card-footer { display: flex; gap: 6px; flex-wrap: wrap; }
.fe-avail-badge {
    padding: 3px 8px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 11px;
    color: var(--color-text-muted);
}
.fe-rate-badge {
    padding: 3px 8px;
    background: var(--color-primary);
    color: #fff;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}

/* ── Brief cards ────────────────────────────────── */
.fe-briefs-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.fe-brief-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    display: flex;
    transition: transform 0.15s;
}
.fe-brief-card:hover { transform: translateY(-2px); }
.fe-brief-stripe { width: 4px; flex-shrink: 0; }
.fe-brief-body   { padding: 14px; flex: 1; }
.fe-brief-head   { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.fe-brief-hub    { font-size: 11px; font-weight: 700; }
.fe-brief-time   { font-size: 11px; color: var(--color-text-muted); }
.fe-brief-title  { font-size: 14px; font-weight: 700; color: var(--color-text); margin: 0 0 6px; }
.fe-brief-desc   { font-size: 12px; color: var(--color-text-muted); margin: 0 0 10px; line-height: 1.5; }
.fe-brief-footer { display: flex; gap: 6px; flex-wrap: wrap; }
.fe-budget-badge, .fe-duration-badge {
    padding: 3px 8px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 11px;
    color: var(--color-text-muted);
}

/* ── Empty state ────────────────────────────────── */
.fe-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--color-text-muted);
}
.fe-empty-icon { font-size: 40px; margin-bottom: 12px; }
.fe-empty-text { font-size: 16px; font-weight: 700; color: var(--color-text); margin-bottom: 6px; }
.fe-empty-sub  { font-size: 13px; margin-bottom: 20px; }
.fe-empty-btn {
    display: inline-block;
    padding: 10px 24px;
    background: var(--color-primary);
    color: #fff;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

/* ── Pagination ─────────────────────────────────── */
.fe-pagination { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; padding: 16px 0; }
.fe-page-btn {
    padding: 7px 12px;
    border-radius: 8px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    font-size: 13px;
    color: var(--color-text-muted);
    text-decoration: none;
    cursor: pointer;
}
.fe-page-btn--active  { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.fe-page-btn--disabled { opacity: 0.4; pointer-events: none; }

/* ── Sidebar helpers ────────────────────────────── */
.sidebar-section   { padding: 0 4px; }
.sidebar-label     { font-size: 11px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
.sidebar-hub-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    margin-bottom: 4px;
    transition: all 0.15s;
}
.sidebar-hub-btn:hover       { background: var(--color-bg); }
.sidebar-hub-btn--active     { color: var(--color-text); }
.sidebar-hub-btn--clear      { color: var(--color-text-muted); font-weight: 400; font-size: 12px; }
.hub-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ── Desktop overrides ──────────────────────────── */
@media (min-width: 768px) {
    .fe-page     { padding: 24px; }
    .fe-hero     { grid-template-columns: 1fr 1fr; gap: 16px; }
    .fe-grid     { grid-template-columns: repeat(3, 1fr); }
    .fe-hub-pills { display: none; } /* desktop uses sidebar */
}
</style>
