<script setup>
// ══════════════════════════════════════════════════════════════════
//  InPractice — Member/Cases/Index.vue
//  Location: resources/js/Pages/Member/Cases/Index.vue
//
//  MOBILE  (<768px):
//    - Hub tabs (same pattern as Dashboard)
//    - Filter bar — scrollable horizontal pills
//    - Case cards — full width, stacked list
//    - Pagination — load more button
//
//  DESKTOP (≥768px):
//    - Sidebar: hub switcher + filter panel (sticky)
//    - Main: case grid 2 columns
//    - Pagination — numbered
//
//  Rules:
//    - Zero DB calls — all data from MemberCaseService via Inertia props
//    - Filter changes use Inertia router.get (preserves URL)
//    - All CSS uses var(--color-*) tokens — no hardcoded hex
//    - Both themes automatic via CSS variables
//    - Bilingual inline — locale from authStore
// ══════════════════════════════════════════════════════════════════

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

// ── Props — all from MemberCaseService ────────────────────────────
const props = defineProps({
    cases:       { type: Object, required: true },
    allHubs:     { type: Array,  required: true },
    userHubIds:  { type: Array,  required: true },
    activeHubId: { type: Number, required: true },
    topics:      { type: Array,  required: true },
    sectors:     { type: Array,  required: true },
    filters:     { type: Object, default: () => ({}) },
    totalCount:  { type: Number, default: 0 },
});

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

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

// ── Active filters (local state — synced from props) ──────────────
const activeHubId    = ref(props.activeHubId);
const activeTopic    = ref(props.filters.topic_slug    ?? '');
const activeDifficulty = ref(props.filters.difficulty  ?? '');
const activeLayer    = ref(props.filters.layer         ?? '');
const activeSector   = ref(props.filters.sector_id     ?? '');

// Mobile filter drawer
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 — Inertia router.get ────────────────────────────
function applyFilters() {
    router.get(route('member.cases.index'), {
        hub_id:     activeHubId.value || undefined,
        topic_slug: activeTopic.value || undefined,
        difficulty: activeDifficulty.value || undefined,
        layer:      activeLayer.value || undefined,
        sector_id:  activeSector.value || undefined,
    }, {
        preserveState:  true,
        preserveScroll: true,
        replace:        true,
    });
    showFilters.value = false;
}

// Switch hub — resets all other filters
function switchHub(hubId) {
    activeHubId.value    = hubId;
    activeTopic.value    = '';
    activeDifficulty.value = '';
    activeLayer.value    = '';
    activeSector.value   = '';
    applyFilters();
}

function clearFilters() {
    activeTopic.value      = '';
    activeDifficulty.value = '';
    activeLayer.value      = '';
    activeSector.value     = '';
    applyFilters();
}

const hasActiveFilters = computed(() =>
    activeTopic.value || activeDifficulty.value || activeLayer.value || activeSector.value
);

// ── Difficulty label ──────────────────────────────────────────────
function difficultyLabel(level) {
    const map = {
        beginner:     locale.value === 'ar' ? 'مبتدئ'  : 'Beginner',
        intermediate: locale.value === 'ar' ? 'متوسط'  : 'Intermediate',
        advanced:     locale.value === 'ar' ? 'متقدم'  : 'Advanced',
    };
    return map[level] ?? level;
}

function difficultyClass(level) {
    return {
        beginner:     'badge--beginner',
        intermediate: 'badge--intermediate',
        advanced:     'badge--advanced',
    }[level] ?? '';
}

function layerLabel(layer) {
    if (layer === 'sector_specific') return locale.value === 'ar' ? 'قطاع محدد' : 'Sector Specific';
    return locale.value === 'ar' ? 'عام' : 'Generic';
}

// ── Progress badge ────────────────────────────────────────────────
function progressLabel(status) {
    const map = {
        completed:   locale.value === 'ar' ? 'مكتمل'       : 'Completed',
        started:     locale.value === 'ar' ? 'قيد القراءة' : 'In Progress',
        not_started: '',
    };
    return map[status] ?? '';
}

function progressClass(status) {
    return {
        completed:   'prog--completed',
        started:     'prog--started',
        not_started: '',
    }[status] ?? '';
}
</script>

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

        <!-- 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>

        <!-- ═══════════════════════════════════════════════════
             PAGE CONTENT
        ════════════════════════════════════════════════════════ -->
        <div class="cases-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' ? 'مكتبة الحالات' : 'Case Library' }}
                    </p>
                    <h1 class="page-header__title">
                        {{ locale === 'ar' ? 'الحالات العملية' : 'Practical Cases' }}
                    </h1>
                    <p class="page-header__sub">
                        {{ totalCount }}
                        {{ locale === 'ar' ? 'حالة منشورة' : 'published cases' }}
                        <span v-if="hasActiveFilters" class="filtered-note">
                            · {{ cases.total }} {{ locale === 'ar' ? 'بعد الفلترة' : 'filtered' }}
                        </span>
                    </p>
                </div>

                <!-- Mobile: filter toggle button -->
                <button class="filter-toggle mobile-only" @click="showFilters = !showFilters">
                    <i class="ti ti-adjustments-horizontal" aria-hidden="true"></i>
                    {{ locale === 'ar' ? 'فلتر' : 'Filter' }}
                    <span v-if="hasActiveFilters" class="filter-dot"></span>
                </button>
            </div>

            <!-- ③ FILTER PANEL ───────────────────────────────── -->
            <!-- Mobile: collapsible drawer, Desktop: always visible (in sidebar area on desktop) -->
            <div class="section filter-panel" :class="{ 'filter-panel--open': showFilters }">

                <!-- Topic filter -->
                <div class="filter-row">
                    <label class="filter-label">
                        {{ locale === 'ar' ? 'الموضوع' : 'Topic' }}
                    </label>
                    <div class="filter-pills">
                        <button
                            class="filter-pill"
                            :class="{ 'filter-pill--active': !activeTopic }"
                            @click="activeTopic = ''; applyFilters()">
                            {{ locale === 'ar' ? 'الكل' : 'All' }}
                        </button>
                        <button
                            v-for="topic in topics"
                            :key="topic.topic_slug"
                            class="filter-pill"
                            :class="{ 'filter-pill--active': activeTopic === topic.topic_slug }"
                            @click="activeTopic = topic.topic_slug; applyFilters()">
                            {{ locale === 'ar' && topic.topic_name_ar ? topic.topic_name_ar : topic.topic_name_en }}
                        </button>
                    </div>
                </div>

                <!-- Difficulty filter -->
                <div class="filter-row">
                    <label class="filter-label">
                        {{ locale === 'ar' ? 'المستوى' : 'Difficulty' }}
                    </label>
                    <div class="filter-pills">
                        <button class="filter-pill" :class="{ 'filter-pill--active': !activeDifficulty }"
                                @click="activeDifficulty = ''; applyFilters()">
                            {{ locale === 'ar' ? 'الكل' : 'All' }}
                        </button>
                        <button v-for="level in ['beginner', 'intermediate', 'advanced']" :key="level"
                                class="filter-pill"
                                :class="{ 'filter-pill--active': activeDifficulty === level }"
                                @click="activeDifficulty = level; applyFilters()">
                            {{ difficultyLabel(level) }}
                        </button>
                    </div>
                </div>

                <!-- Layer filter -->
                <!-- <div class="filter-row">
                    <label class="filter-label">
                        {{ locale === 'ar' ? 'النوع' : 'Type' }}
                    </label>
                    <div class="filter-pills">
                        <button class="filter-pill" :class="{ 'filter-pill--active': !activeLayer }"
                                @click="activeLayer = ''; applyFilters()">
                            {{ locale === 'ar' ? 'الكل' : 'All' }}
                        </button>
                        <button v-for="lyr in ['generic', 'sector_specific']" :key="lyr"
                                class="filter-pill"
                                :class="{ 'filter-pill--active': activeLayer === lyr }"
                                @click="activeLayer = lyr; applyFilters()">
                            {{ layerLabel(lyr) }}
                        </button>
                    </div>
                </div> -->

                <!-- Sector filter — only if sector_specific is active or no layer filter -->
                <!-- <div class="filter-row" v-if="!activeLayer || activeLayer === 'sector_specific'">
                    <label class="filter-label">
                        {{ locale === 'ar' ? 'القطاع' : 'Sector' }}
                    </label>
                    <div class="filter-pills">
                        <button class="filter-pill" :class="{ 'filter-pill--active': !activeSector }"
                                @click="activeSector = ''; applyFilters()">
                            {{ locale === 'ar' ? 'الكل' : 'All' }}
                        </button>
                        <button v-for="sector in sectors" :key="sector.id"
                                class="filter-pill"
                                :class="{ 'filter-pill--active': activeSector == sector.id }"
                                @click="activeSector = sector.id; applyFilters()">
                            {{ locale === 'ar' ? sector.name_ar : sector.name_en }}
                        </button>
                    </div>
                </div> -->

                <!-- Clear filters -->
                <button v-if="hasActiveFilters" class="clear-filters" @click="clearFilters">
                    <i class="ti ti-x" aria-hidden="true"></i>
                    {{ locale === 'ar' ? 'مسح الفلاتر' : 'Clear filters' }}
                </button>
            </div>

            <!-- ④ CASE LIST ──────────────────────────────────── -->
            <!-- Empty state -->
            <div v-if="!cases.data || cases.data.length === 0" class="empty-state section">
                <i class="ti ti-books" aria-hidden="true"></i>
                <p class="empty-state__title">
                    {{ locale === 'ar' ? 'لا توجد حالات' : 'No cases found' }}
                </p>
                <p class="empty-state__sub">
                    {{ locale === 'ar'
                        ? 'حاول تعديل الفلاتر أو اختر موضوعاً مختلفاً'
                        : 'Try adjusting your filters or choose a different topic.' }}
                </p>
                <button v-if="hasActiveFilters" class="clear-filters" @click="clearFilters">
                    {{ locale === 'ar' ? 'مسح الفلاتر' : 'Clear filters' }}
                </button>
            </div>

            <!-- Case cards grid -->
            <div v-else class="cases-grid section">
                <Link
                    v-for="cas in cases.data"
                    :key="cas.id"
                    :href="route('member.cases.show', cas.id)"
                    class="case-card"
                    :style="`--hub-color:${activeHub?.color ?? '#1D9E75'}`">

                    <!-- Top accent stripe -->
                    <div class="case-card__stripe"></div>

                    <!-- Header row: topic pill + progress badge -->
                    <div class="case-card__head">
                        <span class="case-card__topic">
                            {{ locale === 'ar' && cas.topic_name_ar ? cas.topic_name_ar : cas.topic_name_en }}
                        </span>
                        <span v-if="cas.user_status !== 'not_started'"
                              class="prog-badge"
                              :class="progressClass(cas.user_status)">
                            <i :class="cas.user_status === 'completed' ? 'ti ti-check' : 'ti ti-book-2'"
                               aria-hidden="true"></i>
                            {{ progressLabel(cas.user_status) }}
                        </span>
                    </div>

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

                    <!-- Subtitle -->
                    <p v-if="cas.subtitle_en || cas.subtitle_ar" class="case-card__subtitle">
                        {{ locale === 'ar' && cas.subtitle_ar ? cas.subtitle_ar : cas.subtitle_en }}
                    </p>

                    <!-- Meta row -->
                    <div class="case-card__meta">
                        <!-- Difficulty badge -->
                        <span class="diff-badge" :class="difficultyClass(cas.difficulty)">
                            {{ difficultyLabel(cas.difficulty) }}
                        </span>
                        <!-- Layer badge -->
                        <span class="layer-badge">
                            {{ layerLabel(cas.layer) }}
                        </span>
                        <!-- Read time -->
                        <span class="read-time">
                            <i class="ti ti-clock" aria-hidden="true"></i>
                            {{ cas.read_time_minutes }}
                            {{ locale === 'ar' ? 'د' : 'min' }}
                        </span>
                        <!-- Sector (if sector_specific) -->
                        <span v-if="cas.layer === 'sector_specific' && cas.sectors?.length" class="sector-tag">
                            <i class="ti ti-building" aria-hidden="true"></i>
                            {{ locale === 'ar' ? cas.sectors[0].name_ar : cas.sectors[0].name_en }}
                        </span>
                    </div>

                    <!-- CTA -->
                    <div class="case-card__cta">
                        {{ locale === 'ar' ? 'اقرأ الحالة' : 'Read Case' }}
                        <i :class="locale === 'ar' ? 'ti ti-arrow-left' : 'ti ti-arrow-right'"
                           aria-hidden="true"></i>
                    </div>
                </Link>
            </div>

            <!-- ⑤ PAGINATION ─────────────────────────────────── -->
            <div v-if="cases.last_page > 1" class="section pagination">
                <Link
                    v-if="cases.prev_page_url"
                    :href="cases.prev_page_url"
                    class="page-btn">
                    <i :class="locale === 'ar' ? 'ti ti-arrow-right' : 'ti ti-arrow-left'"
                       aria-hidden="true"></i>
                    {{ locale === 'ar' ? 'السابق' : 'Prev' }}
                </Link>

                <span class="page-info">
                    {{ cases.current_page }} / {{ cases.last_page }}
                </span>

                <Link
                    v-if="cases.next_page_url"
                    :href="cases.next_page_url"
                    class="page-btn">
                    {{ locale === 'ar' ? 'التالي' : 'Next' }}
                    <i :class="locale === 'ar' ? 'ti ti-arrow-left' : 'ti ti-arrow-right'"
                       aria-hidden="true"></i>
                </Link>
            </div>

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

<style scoped>
/* ── Page wrapper ────────────────────────────────────────────── */
.cases-page {
    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; }

/* ── Hub tabs (mobile) — same pattern as Dashboard ───────────── */
.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;
}

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

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

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

/* ── Page header ─────────────────────────────────────────────── */
.page-header {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

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

.page-header__title {
    font-size: 17px; font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.3;
}

.page-header__sub {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 3px;
}

.filtered-note { color: var(--color-primary); }

/* ── Filter toggle button (mobile) ───────────────────────────── */
.filter-toggle {
    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 11px;
    font-size: 11px; font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    flex-shrink: 0;
}

.filter-dot {
    position: absolute;
    top: 6px; right: 6px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--color-primary);
}

/* ── Filter panel ────────────────────────────────────────────── */
.filter-panel {
    /* Mobile: hidden by default, shown on toggle */
    display: none;
    flex-direction: column;
    gap: 10px;
    background: var(--color-surface);
    border: 0.5px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 12px;
    box-shadow: var(--shadow-card);
}

.filter-panel--open { display: flex; }

.filter-row { display: flex; flex-direction: column; gap: 6px; }

.filter-label {
    font-size: 9px; font-weight: 700;
    color: var(--color-text-muted);
    letter-spacing: 0.07em; text-transform: uppercase;
}

.filter-pills {
    display: flex; flex-wrap: wrap; gap: 5px;
}

.filter-pill {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 4px 10px;
    font-size: 10px; font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
    white-space: nowrap;
}

.filter-pill--active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.clear-filters {
    display: inline-flex; align-items: center; gap: 4px;
    background: none; border: none;
    color: var(--color-danger);
    font-size: 10px; font-weight: 600;
    cursor: pointer; padding: 0;
    width: fit-content;
    margin-top: 2px;
}

/* ── Case grid — mobile: 1 column, desktop: 2 columns ────────── */
.cases-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

/* ── Case card ───────────────────────────────────────────────── */
.case-card {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    border: 0.5px solid var(--color-border);
    padding: 12px;
    text-decoration: none;
    display: flex; flex-direction: column; gap: 7px;
    position: relative; overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: border-color var(--transition-fast), transform var(--transition-fast),
                background var(--transition-theme);
}

.case-card:hover {
    border-color: var(--hub-color, var(--color-primary));
    transform: translateY(-1px);
}

.case-card__stripe {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--hub-color, var(--color-primary));
}

[dir="rtl"] .case-card__stripe {
    left: 0; right: 0;
}

.case-card__head {
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
}

.case-card__topic {
    font-size: 9px; font-weight: 700;
    color: var(--color-text-muted);
    letter-spacing: 0.06em; text-transform: uppercase;
}

.case-card__title {
    font-size: 13px; font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.45;
    margin: 0;
}

.case-card__subtitle {
    font-size: 11px;
    color: var(--color-text-muted);
    line-height: 1.4;
    margin: 0;
}

.case-card__meta {
    display: flex; flex-wrap: wrap; gap: 5px; align-items: center;
    margin-top: 2px;
}

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

.badge--beginner     { background: #dcfce7; color: #166534; }
.badge--intermediate { background: #fef3c7; color: #92400e; }
.badge--advanced     { background: #fee2e2; color: #991b1b; }

[data-theme="dark"] .badge--beginner     { background: #052e16; color: #86efac; }
[data-theme="dark"] .badge--intermediate { background: #2d1700; color: #fcd34d; }
[data-theme="dark"] .badge--advanced     { background: #2d0000; color: #fca5a5; }

.layer-badge {
    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: 2px 7px;
}

.read-time {
    font-size: 9px; color: var(--color-text-muted);
    display: flex; align-items: center; gap: 2px;
}

.read-time i { font-size: 10px; }

.sector-tag {
    font-size: 9px; color: var(--color-text-muted);
    display: flex; align-items: center; gap: 2px;
}

.sector-tag i { font-size: 10px; }

.case-card__cta {
    font-size: 11px; font-weight: 700;
    color: var(--hub-color, var(--color-primary));
    display: flex; align-items: center; gap: 4px;
    margin-top: 2px;
}

/* ── Progress badges ─────────────────────────────────────────── */
.prog-badge {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: 9px; font-weight: 700;
    padding: 2px 7px;
    border-radius: var(--radius-pill);
    flex-shrink: 0;
}

.prog--completed { background: #dcfce7; color: #166534; }
.prog--started   { background: #fef3c7; color: #92400e; }

[data-theme="dark"] .prog--completed { background: #052e16; color: #86efac; }
[data-theme="dark"] .prog--started   { background: #2d1700; color: #fcd34d; }

/* ── Empty state ─────────────────────────────────────────────── */
.empty-state {
    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);
}

.empty-state i {
    font-size: 36px;
    color: var(--color-text-muted);
    display: block; margin-bottom: 12px;
}

.empty-state__title {
    font-size: 14px; font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 5px;
}

.empty-state__sub {
    font-size: 12px; color: var(--color-text-muted);
    margin-bottom: 14px;
}

/* ── 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 — 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) {
    .mobile-only  { display: none; }
    .desktop-only { display: flex; flex-direction: column; }

    .cases-page {
        padding: 20px 20px 20px;
        gap: 16px;
        max-width: 100%;
    }

    /* Filter panel always visible on desktop */
   .filter-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    align-items: flex-start;
    }   

    .filter-row {
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    .filter-label {
        white-space: nowrap;
        min-width: 54px;
    }

    .filter-toggle { display: none; }

    /* 2-column grid on desktop */
    .cases-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .page-header__title { font-size: 20px; }
}
</style>
