<script setup>
// ══════════════════════════════════════════════════════════════════
//  InPractice — Member/Dashboard.vue
//  Location: resources/js/Pages/Member/Dashboard.vue
//
//  MOBILE  (<768px):
//    - Greeting
//    - Hub tabs (3 cards, top stripe per hub color)
//    - Hero case card — navy (navy theme) / teal (dark theme), full width
//    - Stats strip — 2 cards
//    - Progress bar
//    - Ask Members 4 Opinion — post list
//    - Bottom nav via AppLayout
//
//  DESKTOP (≥768px):
//    - Sidebar populated via #sidebar-hubs slot
//    - Greeting
//    - Hub strip (3 cards horizontal)
//    - Hero case card — FULL WIDTH, horizontal layout
//      LEFT: pill + title + meta + CTA button
//      NO right panel — stats go BELOW the card
//    - Stats strip — 3 cards (completed, members, progress)
//    - Two-column: Ask Members left | quick stats right
//
//  Rules:
//    - Zero DB calls in Vue — all data from DashboardService via Inertia props
//    - All CSS uses tokens from app.css — no hardcoded hex
//    - Both themes work without any conditional class — CSS vars handle it
//    - Bilingual inline (locale computed from authStore)
// ══════════════════════════════════════════════════════════════════

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

// ── Props — all from DashboardService ─────────────────────────────
const props = defineProps({
    allHubs:      { type: Array,  required: true },
    userHubIds:   { type: Array,  required: true },
    primaryHubId: { type: Number, required: true },
    heroCases:    { type: Object, required: true },
    hubStats:     { type: Object, required: true },
    progressData: { type: Object, required: true },
    recentPosts:  { type: Object,  required: true,default: () => ({}) },
    unreadCount:  { type: Number, default: 0 },
});

// ── Stores ────────────────────────────────────────────────────────
const authStore = useAuthStore();
const hubStore  = useHubStore();

// ── Active hub ────────────────────────────────────────────────────
const activeHubId = ref(props.primaryHubId);

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

const heroCase = computed(() =>
    props.heroCases[activeHubId.value] ?? null
);

const stats = computed(() =>
    props.hubStats[activeHubId.value] ?? { case_count: 0, member_count: 0, post_count: 0 }
);

const progress = computed(() =>
    props.progressData[activeHubId.value] ?? { completed: 0, total: 0, percent: 0 }
);

const posts = computed(() =>
    (props.recentPosts ?? {})[activeHubId.value] ?? []
);

// ── Locale helpers ────────────────────────────────────────────────
const locale = computed(() => authStore.locale);
const isDark  = computed(() => authStore.theme === 'dark');

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

// Hub active CSS class — one per color for the tinted bg
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';
}

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

// Single pill: TOPIC · DIFFICULTY
function heroPill(cas) {
    const topic = locale.value === 'ar' && cas.topic_name_ar
        ? cas.topic_name_ar : cas.topic_name_en;
    const levels = {
        beginner:     locale.value === 'ar' ? 'مبتدئ'    : 'BEGINNER',
        intermediate: locale.value === 'ar' ? 'متوسط'    : 'INTERMEDIATE',
        advanced:     locale.value === 'ar' ? 'متقدم'    : 'ADVANCED',
    };
    return `${topic.toUpperCase()} · ${levels[cas.difficulty] ?? cas.difficulty.toUpperCase()}`;
}

function formatCount(n) {
    if (n >= 1000) return (n / 1000).toFixed(1) + 'k';
    return n;
}

// Time-aware greeting
const greeting = computed(() => {
    const h = new Date().getHours();
    if (locale.value === 'ar') {
        if (h < 12) return 'صباح الخير،';
        if (h < 18) return 'مساء الخير،';
        return 'مساء الخير،';
    }
    if (h < 12) return 'Good morning,';
    if (h < 18) return 'Good afternoon,';
    return 'Good evening,';
});

// First name — safe on own private dashboard
const firstName = computed(() => {
    const name = authStore.user?.name ?? '';
    return name.split(' ')[0] || '';
});
</script>

<template>
    <AppLayout :title="locale === 'ar' ? 'لوحة التحكم' : 'Dashboard'">
        <Head :title="locale === 'ar' ? 'لوحة التحكم' : 'Dashboard'" />

        <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="activeHubId = 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">{{ hubStats[hub.id]?.case_count ?? 0 }}</span>
            </div>
        </template>

        <!-- ═══════════════════════════════════════════════════
             PAGE CONTENT
        ════════════════════════════════════════════════════════ -->
        <div class="dashboard">

            <!-- ① GREETING ───────────────────────────────────── -->
            <div class="section greeting-section">
                <p class="greeting-sub">{{ greeting }}</p>
                <h1 class="greeting-name">
                    {{ locale === 'ar' ? 'أهلاً بعودتك،' : 'Welcome back,' }}
                    <span class="greeting-name__accent">{{ firstName }}</span>
                </h1>
            </div>

            <!-- ② HUB TABS — mobile only (≥768 shows in hub strip) ─ -->
            <div class="section mobile-only">
                <p class="sec-label">{{ locale === 'ar' ? 'تخصصاتك' : 'Your Hubs' }}</p>
                <div class="hub-tabs">
                    <button
                        v-for="hub in allHubs"
                        :key="hub.id"
                        class="hub-tab"
                        :class="[`hub-tab--${hub.id}`, hubActiveClass(hub)]"
                        :style="`--hub-color:${hub.color}`"
                        @click="activeHubId = 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>
                        <div class="hub-tab__count">
                            {{ hubStats[hub.id]?.case_count ?? 0 }}
                            {{ locale === 'ar' ? 'حالة' : 'cases' }}
                        </div>
                    </button>
                </div>
            </div>

            <!-- ② HUB STRIP — desktop only ──────────────────────── -->
            <div class="section desktop-only">
                <div class="d-hub-strip">
                    <button
                        v-for="hub in allHubs"
                        :key="hub.id"
                        class="d-hub-card"
                        :class="dHubActiveClass(hub)"
                        :style="`--hub-color:${hub.color}`"
                        @click="activeHubId = hub.id">
                        <div class="d-hub-card__top">
                            <div class="d-hub-card__icon"
                                 :style="{ background: hub.color + '22', color: hub.color }">
                                <i :class="`ti ti-${hub.icon ?? 'chart-bar'}`" aria-hidden="true"></i>
                            </div>
                            <span class="d-hub-card__name">{{ hubName(hub) }}</span>
                        </div>
                        <div class="d-hub-card__stat">
                            <strong>{{ progressData[hub.id]?.completed ?? 0 }}</strong>
                            / {{ hubStats[hub.id]?.case_count ?? 0 }}
                            {{ locale === 'ar' ? 'مكتملة' : 'completed' }}
                        </div>
                    </button>
                </div>
            </div>

            <!-- ③ HERO CASE CARD ──────────────────────────────── -->
            <div class="section">
                <!-- Section label -->
                <p class="sec-label">
                    {{ locale === 'ar' ? 'الحالة المميزة' : 'Featured Case' }}
                    — {{ hubName(activeHub) }}
                </p>

                <!-- Has a case -->
                <div v-if="heroCase"
                     class="hero-card"
                     :class="isDark ? 'hero-card--dark' : 'hero-card--navy'">
                    <div class="hero-card__glow"></div>
                    <div class="hero-card__glow2"></div>

                    <!-- MOBILE layout: stacked (default) -->
                    <!-- DESKTOP layout: .hero-card__inner switches to flex-row -->
                    <div class="hero-card__inner">

                        <!-- Left: case content — full width on mobile, flex:1 on desktop -->
                        <div class="hero-card__left">
                            <!-- Single pill: TOPIC · DIFFICULTY -->
                            <div class="hero-pill">
                                <i class="ti ti-flame" style="font-size:9px" aria-hidden="true"></i>
                                {{ heroPill(heroCase) }}
                            </div>

                            <h2 class="hero-title">
                                {{ locale === 'ar' && heroCase.title_ar
                                    ? heroCase.title_ar
                                    : heroCase.title_en }}
                            </h2>

                            <div class="hero-meta">
                                <span>
                                    <i class="ti ti-clock" aria-hidden="true"></i>
                                    {{ heroCase.read_time_minutes }}
                                    {{ locale === 'ar' ? 'د' : 'min read' }}
                                </span>
                                <span v-if="heroCase.sectors && heroCase.sectors.length">
                                    <i class="ti ti-building" aria-hidden="true"></i>
                                    {{ locale === 'ar'
                                        ? heroCase.sectors[0].name_ar
                                        : heroCase.sectors[0].name_en }}
                                </span>
                            </div>

                           <div class="hero-btns">
                                <Link :href="route('member.cases.show', heroCase.id)" class="hero-btn">
                                    {{ locale === 'ar' ? 'اقرأ الحالة' : 'Read Case' }}
                                    <i :class="locale === 'ar' ? 'ti ti-arrow-left' : 'ti ti-arrow-right'"
                                    aria-hidden="true"></i>
                                </Link>
                                <Link :href="route('member.cases.progress', { hub_id: activeHubId })" class="hero-btn hero-btn--ghost">
                                    {{ locale === 'ar' ? 'كل الحالات' : 'Show All Cases' }}
                                </Link>
                            </div>
                        </div>
                        <!-- No right panel — stats go below on BOTH mobile and desktop -->
                    </div>
                </div>

                <!-- Empty state -->
                <div v-else class="hero-empty">
                    <i class="ti ti-books" aria-hidden="true"></i>
                    <p class="hero-empty__title">
                        {{ locale === 'ar' ? 'الحالات قادمة قريباً' : 'Cases coming soon' }}
                    </p>
                    <p class="hero-empty__sub">
                        {{ locale === 'ar'
                            ? 'يجري إعداد أول حالات هذا التخصص'
                            : 'The first cases for this hub are being prepared.' }}
                    </p>
                </div>
            </div>

            <!-- ④ STATS STRIP — below hero on BOTH mobile and desktop ── -->
            <div class="stats-strip">
                <div class="stat-card">
                    <div class="stat-card__label">
                        {{ locale === 'ar' ? 'الحالات المكتملة' : 'Cases completed' }}
                    </div>
                    <div class="stat-card__value">
                        {{ progress.completed }}
                        <span>/ {{ stats.case_count }}</span>
                    </div>
                </div>
                <div class="stat-card">
                    <div class="stat-card__label">
                        {{ locale === 'ar' ? 'أعضاء التخصص' : 'Hub members' }}
                    </div>
                    <div class="stat-card__value">
                        {{ formatCount(stats.member_count) }}
                    </div>
                </div>
            </div>

            <!-- ⑤ PROGRESS BAR ────────────────────────────────── -->
            <div class="section">
                <div class="progress-card">
                    <div class="progress-card__header">
                        <span class="progress-card__title">
                            {{ hubName(activeHub) }}
                            {{ locale === 'ar' ? 'التقدم' : 'progress' }}
                        </span>
                        <span class="progress-card__pct"
                              :style="{ color: activeHub?.color ?? 'var(--color-primary)' }">
                            {{ progress.percent }}%
                        </span>
                    </div>
                    <div class="progress-track">
                        <div class="progress-fill"
                             :style="{
                                 width: progress.percent + '%',
                                 background: activeHub?.color ?? 'var(--color-primary)'
                             }">
                        </div>
                    </div>
                    <p class="progress-sub">
                        {{ progress.completed }}
                        {{ locale === 'ar' ? 'من' : 'of' }}
                        {{ progress.total }}
                        {{ locale === 'ar' ? 'حالات الإطلاق مكتملة' : 'launch cases completed' }}
                    </p>
                </div>
            </div>

            <!-- ⑥ ASK MEMBERS 4 OPINION ──────────────────────── -->
            <div class="section section--last">
                <div class="sec-header">
                    <p class="sec-label" style="margin:0">
                        {{ locale === 'ar' ? 'اسأل الأعضاء' : 'Ask Members 4 Opinion' }}
                        — {{ hubName(activeHub) }}
                    </p>
                    <Link href="#" class="see-all">
                        {{ locale === 'ar' ? 'الكل' : 'See all' }}
                    </Link>
                </div>

                <!-- Has posts -->
                <div v-if="posts.length" class="ask-card">
                    <div
                        v-for="(post, index) in posts"
                        :key="post.id"
                        class="ask-item"
                        :class="{ 'ask-item--last': index === posts.length - 1 }">
                        <div class="ask-item__top">
                            <span class="ask-item__nick">{{ post.author_name }}</span>
                            <span class="ask-item__time">{{ post.created_at }}</span>
                        </div>
                        <p class="ask-item__title">{{ post.title }}</p>
                        <div class="ask-item__foot">
                            <span class="ask-item__stat">
                                <i class="ti ti-message-circle" aria-hidden="true"></i>
                                {{ post.reply_count }}
                                {{ locale === 'ar' ? 'رد' : 'replies' }}
                            </span>
                            <span class="ask-item__stat">
                                <i class="ti ti-heart" aria-hidden="true"></i>
                                {{ post.like_count }}
                            </span>
                        </div>
                    </div>
                </div>

                <!-- No posts yet -->
                <div v-else class="ask-empty">
                    <i class="ti ti-message-question" aria-hidden="true"></i>
                    <p class="ask-empty__title">
                        {{ locale === 'ar' ? 'لا توجد مشاركات بعد' : 'No posts yet' }}
                    </p>
                    <p class="ask-empty__sub">
                        {{ locale === 'ar' ? 'كن أول من يشارك' : 'Be the first to share.' }}
                    </p>
                </div>
            </div>

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

<style scoped>
/* ── Page wrapper ────────────────────────────────────────────── */
.dashboard {
    padding: 14px 14px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── Visibility helpers ───────────────────────────────────────── */
.mobile-only  { display: flex; flex-direction: column; }
.desktop-only { display: none; }

/* ── Sections ────────────────────────────────────────────────── */
.section { display: flex; flex-direction: column; }
.section--last { padding-bottom: 12px; }

.sec-label {
    font-size: 9px;
    font-weight: 700;
    color: var(--color-text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 7px;
}

.sec-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 7px;
}

.see-all {
    font-size: 10px;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
}

/* ── Greeting ────────────────────────────────────────────────── */
.greeting-section { gap: 2px; margin-top: 2px; }

.greeting-sub {
    font-size: 11px;
    color: var(--color-text-muted);
}

.greeting-name {
    font-size: 17px;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.3;
}

.greeting-name__accent { color: var(--color-primary); }

/* ── Mobile hub tabs ─────────────────────────────────────────── */
.hub-tabs { display: flex; gap: 7px; }

.hub-tab {
    flex: 1;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    border: 1.5px solid var(--color-border);
    padding: 9px 4px 8px;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
    position: relative;
    overflow: hidden;
}

/* Top stripe per hub color */
.hub-tab::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2.5px;
    background: var(--hub-color);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.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; }

[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; }

.hub-tab__icon-wrap {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin: 0 auto 5px;
}

.hub-tab__name {
    font-size: 10px;
    font-weight: 600;
    color: var(--color-text-secondary);
    transition: color var(--transition-fast);
}

.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; }

.hub-tab__count {
    font-size: 9px;
    color: var(--color-text-muted);
    margin-top: 1px;
}

/* ── Desktop hub strip ───────────────────────────────────────── */
.d-hub-strip { display: flex; gap: 10px; }

.d-hub-card {
    flex: 1;
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: 12px 11px;
    border: 1.5px solid var(--color-border);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 7px;
    box-shadow: var(--shadow-card);
    transition: border-color var(--transition-fast), background var(--transition-fast);
    text-align: left;
}

.d-hub-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2.5px;
    background: var(--hub-color);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.d-hub-card--active-f { border-color: #1D9E75; background: #f0fdf8; }
.d-hub-card--active-m { border-color: #378ADD; background: #eff6ff; }
.d-hub-card--active-s { border-color: #D85A30; background: #fff7f4; }

[data-theme="dark"] .d-hub-card--active-f { background: #0A2E22; }
[data-theme="dark"] .d-hub-card--active-m { background: #0C1E35; }
[data-theme="dark"] .d-hub-card--active-s { background: #2E1208; }

.d-hub-card__top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.d-hub-card__icon {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.d-hub-card__name {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-text-secondary);
}

.d-hub-card--active-f .d-hub-card__name { color: #1D9E75; }
.d-hub-card--active-m .d-hub-card__name { color: #378ADD; }
.d-hub-card--active-s .d-hub-card__name { color: #D85A30; }

.d-hub-card__stat {
    font-size: 11px;
    color: var(--color-text-muted);
}

.d-hub-card__stat strong {
    color: var(--color-text-primary);
    font-weight: 700;
}

/* ── Hero card ───────────────────────────────────────────────── */
/*
 * Navy theme: color-header-bg = #0F2044
 * Dark theme: teal gradient
 * The .hero-card--navy and .hero-card--dark classes handle this.
 */
.hero-card {
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
}

.hero-card--navy { background: #0F2044; }
.hero-card--dark { background: linear-gradient(135deg, #1D9E75 0%, #0F6E56 100%); }

.hero-card__glow {
    position: absolute;
    right: -25px; top: -25px;
    width: 120px; height: 120px;
    border-radius: 50%;
    background: rgba(29, 158, 117, 0.10);
    pointer-events: none;
}

/* Second glow for dark/teal card */
.hero-card--dark .hero-card__glow {
    background: rgba(255, 255, 255, 0.07);
}

.hero-card__glow2 {
    position: absolute;
    left: -20px; bottom: -30px;
    width: 100px; height: 100px;
    border-radius: 50%;
    background: rgba(29, 158, 117, 0.05);
    pointer-events: none;
}

.hero-card--dark .hero-card__glow2 {
    background: rgba(0, 0, 0, 0.10);
}

/* Inner — mobile: stacked column, desktop: full width (no side panel) */
.hero-card__inner {
    position: relative;
    z-index: 1;
    padding: 16px;
}

/* Left section — always full width */
.hero-card__left {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Single pill */
.hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(29, 158, 117, 0.20);
    border: 1px solid rgba(29, 158, 117, 0.32);
    color: #4ade9e;
    font-size: 9px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: var(--radius-pill);
    letter-spacing: 0.05em;
    margin-bottom: 10px;
    width: fit-content;
}

/* On teal (dark) card the pill is white-tinted */
.hero-card--dark .hero-pill {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.30);
    color: #fff;
}

.hero-title {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    line-height: 1.5;
    margin-bottom: 10px;
}

.hero-meta {
    display: flex;
    gap: 14px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.hero-meta span {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.55);
    display: flex;
    align-items: center;
    gap: 4px;
}

.hero-meta i { font-size: 12px; }

.hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    width: fit-content;
    transition: background var(--transition-fast);
    box-shadow: var(--shadow-button);
}

.hero-btn:hover { background: var(--color-primary-light); }

/* On teal card — frosted button */
.hero-card--dark .hero-btn {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: none;
}

.hero-card--dark .hero-btn:hover {
    background: rgba(255, 255, 255, 0.28);
}

/* Empty hero state */
.hero-empty {
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    padding: 28px 16px;
    text-align: center;
    box-shadow: var(--shadow-card);
}

.hero-empty i {
    font-size: 30px;
    color: var(--color-text-muted);
    display: block;
    margin-bottom: 10px;
}

.hero-empty__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 5px;
}

.hero-empty__sub {
    font-size: 12px;
    color: var(--color-text-muted);
}

/* ── Stats strip — below hero on ALL screens ─────────────────── */
.stats-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.stat-card {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    border: 0.5px solid var(--color-border);
    padding: 11px 12px;
    box-shadow: var(--shadow-card);
    transition: background var(--transition-theme), border-color var(--transition-theme);
}

.stat-card__label {
    font-size: 10px;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}

.stat-card__value {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-primary);
    display: flex;
    align-items: baseline;
    gap: 3px;
    line-height: 1.2;
}

.stat-card__value span {
    font-size: 10px;
    color: var(--color-primary);
    font-weight: 500;
}

/* ── Progress card ───────────────────────────────────────────── */
.progress-card {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    border: 0.5px solid var(--color-border);
    padding: 13px;
    box-shadow: var(--shadow-card);
    transition: background var(--transition-theme), border-color var(--transition-theme);
}

.progress-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.progress-card__title {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.progress-card__pct {
    font-size: 12px;
    font-weight: 700;
}

.progress-track {
    background: var(--color-bar-bg);
    border-radius: var(--radius-pill);
    height: 6px;
    overflow: hidden;
}

.progress-fill {
    height: 6px;
    border-radius: var(--radius-pill);
    transition: width 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.progress-sub {
    font-size: 10px;
    color: var(--color-text-muted);
    margin-top: 5px;
}

/* Buttom show all case -------------------------------- */

.hero-btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.hero-btn--ghost {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.30);
    box-shadow: none;
}

.hero-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.22);
}

.hero-card--navy .hero-btn--ghost {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

/* ── Ask Members card ────────────────────────────────────────── */
.ask-card {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    border: 0.5px solid var(--color-border);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: background var(--transition-theme), border-color var(--transition-theme);
}

.ask-item {
    padding: 11px 13px;
    border-bottom: 0.5px solid var(--color-border-light);
    transition: background var(--transition-fast);
}

.ask-item:hover { background: var(--color-surface-alt); }
.ask-item--last { border-bottom: none; }

.ask-item__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3px;
}

.ask-item__nick {
    font-size: 10px;
    font-weight: 700;
    color: var(--color-primary);
}

.ask-item__time {
    font-size: 10px;
    color: var(--color-text-muted);
}

.ask-item__title {
    font-size: 12px;
    color: var(--color-text-secondary);
    line-height: 1.45;
    margin-bottom: 6px;
}

.ask-item__foot {
    display: flex;
    gap: 12px;
}

.ask-item__stat {
    font-size: 10px;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 3px;
}

.ask-item__stat i { font-size: 12px; }

/* Ask empty state */
.ask-empty {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    border: 0.5px solid var(--color-border);
    padding: 28px 16px;
    text-align: center;
    box-shadow: var(--shadow-card);
}

.ask-empty i {
    font-size: 28px;
    color: var(--color-text-muted);
    display: block;
    margin-bottom: 10px;
}

.ask-empty__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}

.ask-empty__sub {
    font-size: 12px;
    color: var(--color-text-muted);
}

/* ── Sidebar hub items — rendered via slot ───────────────────── */
.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 BREAKPOINT ≥768px
════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
    /* Show/hide helpers */
    .mobile-only  { display: none; }
    .desktop-only { display: flex; flex-direction: column; }

    /* Dashboard padding — sidebar handles left spacing */
    .dashboard {
        padding: 20px 20px 20px;
        gap: 16px;
        max-width: 100%;
    }

    /* Hero card — full width, horizontal inner layout */
    .hero-card__inner {
        padding: 22px 24px;
        display: flex;              /* row on desktop */
        flex-direction: column;     /* still column — no side panel */
        gap: 0;
    }

    /* Hero title larger on desktop */
    .hero-title {
        font-size: 17px;
        max-width: 680px;
    }

    /* Stats strip — 3 columns on desktop */
    .stats-strip {
        grid-template-columns: 1fr 1fr 1fr;
    }

    /* Progress stays full width */
    /* Ask Members full width */
}
</style>
