<script setup>
// ══════════════════════════════════════════════════════════════════
//  InPractice — Member/Cases/Progress.vue
//  Location: resources/js/Pages/Member/Cases/Progress.vue
//
//  Progress tracker — shows all cases per hub in a filterable,
//  paginated table.
//
//  Filters (client-side, zero server round-trips):
//    • Case name search (debounced)
//    • Topic dropdown  (dynamic — built from props.cases)
//    • Level dropdown  (Beginner / Intermediate / Advanced)
//    • Status dropdown (Completed / In Progress / Not Started)
//
//  Pagination: 20 rows per page, resets to page 1 on any filter change.
//
//  Member switches hub via tabs — Finance / Marketing / Sales
//  Data comes from MemberCaseProgressService via Inertia props.
// ══════════════════════════════════════════════════════════════════

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 ─────────────────────────────────────────────────────────
const props = defineProps({
    allHubs:     { type: Array,  required: true },
    activeHubId: { type: Number, required: true },
    cases:       { type: Array,  required: true }, // all cases for active hub with progress
    stats:       { type: Object, required: true },  // { completed, in_progress, not_started, total }
});

// ── Stores ────────────────────────────────────────────────────────
const authStore = useAuthStore();
const locale    = computed(() => authStore.locale);

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

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 switchHub(hubId) {
    router.get(route('member.cases.progress'), { hub_id: hubId }, {
        preserveState: false,
    });
}

// ── Helpers ───────────────────────────────────────────────────────
function caseTitle(cas) {
    return locale.value === 'ar' && cas.title_ar ? cas.title_ar : cas.title_en;
}

function topicName(cas) {
    return locale.value === 'ar' && cas.topic_name_ar ? cas.topic_name_ar : cas.topic_name_en;
}

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

// Hub active class
function hubTabClass(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';
}

// ── Filters ───────────────────────────────────────────────────────
const searchQuery    = ref('');
const filterTopic    = ref('');
const filterLevel    = ref('');
const filterStatus   = ref('');

// Dynamic topic list — built from the cases that actually exist in this hub
const topicOptions = computed(() => {
    const seen = new Map();
    props.cases.forEach(cas => {
        const key = cas.topic_slug ?? cas.topic_name_en;
        if (!seen.has(key)) {
            seen.set(key, {
                value: key,
                label: locale.value === 'ar' && cas.topic_name_ar
                    ? cas.topic_name_ar
                    : cas.topic_name_en,
            });
        }
    });
    return Array.from(seen.values()).sort((a, b) => a.label.localeCompare(b.label));
});

const hasActiveFilters = computed(() =>
    searchQuery.value.trim() !== '' ||
    filterTopic.value !== '' ||
    filterLevel.value !== '' ||
    filterStatus.value !== ''
);

function clearFilters() {
    searchQuery.value  = '';
    filterTopic.value  = '';
    filterLevel.value  = '';
    filterStatus.value = '';
}

// ── Filtered cases (before pagination) ───────────────────────────
const filteredCases = computed(() => {
    const q = searchQuery.value.trim().toLowerCase();

    return props.cases.filter(cas => {
        // Case name search
        if (q) {
            const title = caseTitle(cas).toLowerCase();
            if (!title.includes(q)) return false;
        }

        // Topic filter
        if (filterTopic.value) {
            const key = cas.topic_slug ?? cas.topic_name_en;
            if (key !== filterTopic.value) return false;
        }

        // Level filter
        if (filterLevel.value && cas.difficulty !== filterLevel.value) return false;

        // Status filter
        if (filterStatus.value && cas.progress_status !== filterStatus.value) return false;

        return true;
    });
});

// ── Pagination ────────────────────────────────────────────────────
const PAGE_SIZE  = 50;
const currentPage = ref(1);

// Reset to page 1 whenever any filter changes
watch([searchQuery, filterTopic, filterLevel, filterStatus], () => {
    currentPage.value = 1;
});

const totalPages = computed(() =>
    Math.max(1, Math.ceil(filteredCases.value.length / PAGE_SIZE))
);

const paginatedCases = computed(() => {
    const start = (currentPage.value - 1) * PAGE_SIZE;
    return filteredCases.value.slice(start, start + PAGE_SIZE);
});

// Pages to show in paginator (max 5 visible page numbers)
const visiblePages = computed(() => {
    const total = totalPages.value;
    const current = currentPage.value;
    if (total <= 5) return Array.from({ length: total }, (_, i) => i + 1);

    let start = Math.max(1, current - 2);
    let end   = Math.min(total, start + 4);
    if (end - start < 4) start = Math.max(1, end - 4);

    return Array.from({ length: end - start + 1 }, (_, i) => start + i);
});

function goToPage(page) {
    if (page < 1 || page > totalPages.value) return;
    currentPage.value = page;
    // Scroll table into view smoothly
    document.querySelector('.table-section')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

// Result count label
const resultLabel = computed(() => {
    const total    = filteredCases.value.length;
    const start    = (currentPage.value - 1) * PAGE_SIZE + 1;
    const end      = Math.min(currentPage.value * PAGE_SIZE, total);

    if (total === 0) return locale.value === 'ar' ? 'لا توجد نتائج' : 'No results';

    if (locale.value === 'ar') {
        return `عرض ${start}–${end} من ${total} حالة`;
    }
    return `Showing ${start}–${end} of ${total} cases`;
});
</script>

<template>
    <AppLayout :title="locale === 'ar' ? 'تقدمي' : 'My Progress'">
        <Head :title="locale === 'ar' ? 'تقدمي' : 'My Progress'" />

        <div class="progress-page">

            <!-- ── Page header ────────────────────────────────── -->
            <div class="page-header">
                <div>
                    <Link :href="route('member.dashboard')" class="back-link">
                        <i class="ti ti-arrow-left" aria-hidden="true"></i>
                        {{ locale === 'ar' ? 'الرئيسية' : 'Dashboard' }}
                    </Link>
                    <h1 class="page-title">
                        {{ locale === 'ar' ? 'تقدمي في الحالات' : 'My Case Progress' }}
                    </h1>
                </div>
            </div>

            <!-- ── Hub tabs ───────────────────────────────────── -->
            <div class="hub-tabs">
                <button
                    v-for="hub in allHubs"
                    :key="hub.id"
                    class="hub-tab"
                    :class="hubTabClass(hub)"
                    :style="{ '--hub-color': hub.color }"
                    @click="switchHub(hub.id)">
                    {{ hubName(hub) }}
                </button>
            </div>

            <!-- ── Stats strip ────────────────────────────────── -->
            <div class="stats-strip">
                <div class="stat-card stat-card--completed">
                    <i class="ti ti-circle-check-filled"></i>
                    <div>
                        <div class="stat-card__num">{{ stats.completed }}</div>
                        <div class="stat-card__label">{{ locale === 'ar' ? 'مكتملة' : 'Completed' }}</div>
                    </div>
                </div>
                <div class="stat-card stat-card--progress">
                    <i class="ti ti-book-2"></i>
                    <div>
                        <div class="stat-card__num">{{ stats.in_progress }}</div>
                        <div class="stat-card__label">{{ locale === 'ar' ? 'قيد القراءة' : 'In Progress' }}</div>
                    </div>
                </div>
                <div class="stat-card stat-card--notstarted">
                    <i class="ti ti-circle-dashed"></i>
                    <div>
                        <div class="stat-card__num">{{ stats.not_started }}</div>
                        <div class="stat-card__label">{{ locale === 'ar' ? 'لم تبدأ بعد' : 'Not Started' }}</div>
                    </div>
                </div>
                <div class="stat-card stat-card--total">
                    <i class="ti ti-books"></i>
                    <div>
                        <div class="stat-card__num">{{ stats.total }}</div>
                        <div class="stat-card__label">{{ locale === 'ar' ? 'إجمالي الحالات' : 'Total Cases' }}</div>
                    </div>
                </div>
            </div>

            <!-- ── Progress bar ───────────────────────────────── -->
            <div class="prog-bar-wrap">
                <div class="prog-bar-track">
                    <div
                        class="prog-bar-fill"
                        :style="{
                            width: stats.total > 0 ? (stats.completed / stats.total * 100) + '%' : '0%',
                            background: activeHub?.color ?? 'var(--color-primary)',
                        }">
                    </div>
                </div>
                <span class="prog-bar-pct">
                    {{ stats.total > 0 ? Math.round(stats.completed / stats.total * 100) : 0 }}%
                    {{ locale === 'ar' ? 'مكتمل' : 'complete' }}
                </span>
            </div>

            <!-- ── Filter bar ─────────────────────────────────── -->
            <div class="filter-bar table-section">

                <!-- Row 1: Search + Clear -->
                <div class="filter-search-row">
                    <div class="filter-search-wrap">
                        <i class="ti ti-search filter-search-icon" aria-hidden="true"></i>
                        <input
                            v-model="searchQuery"
                            type="text"
                            class="filter-search"
                            :placeholder="locale === 'ar' ? 'ابحث باسم الحالة…' : 'Search by case name…'"
                            autocomplete="off"
                        />
                        <button
                            v-if="searchQuery"
                            class="filter-search-clear"
                            @click="searchQuery = ''"
                            :aria-label="locale === 'ar' ? 'مسح البحث' : 'Clear search'">
                            <i class="ti ti-x"></i>
                        </button>
                    </div>

                    <button
                        v-if="hasActiveFilters"
                        class="clear-all-btn"
                        @click="clearFilters">
                        <i class="ti ti-filter-off"></i>
                        {{ locale === 'ar' ? 'مسح الفلاتر' : 'Clear filters' }}
                    </button>
                </div>

                <!-- Row 2: Topic / Level / Status dropdowns -->
                <div class="filter-dropdowns">

                    <!-- Topic -->
                    <div class="filter-select-wrap">
                        <i class="ti ti-tag filter-select-icon" aria-hidden="true"></i>
                        <select v-model="filterTopic" class="filter-select">
                            <option value="">{{ locale === 'ar' ? 'كل المواضيع' : 'All Topics' }}</option>
                            <option
                                v-for="topic in topicOptions"
                                :key="topic.value"
                                :value="topic.value">
                                {{ topic.label }}
                            </option>
                        </select>
                    </div>

                    <!-- Level -->
                    <div class="filter-select-wrap">
                        <i class="ti ti-adjustments-horizontal filter-select-icon" aria-hidden="true"></i>
                        <select v-model="filterLevel" class="filter-select">
                            <option value="">{{ locale === 'ar' ? 'كل المستويات' : 'All Levels' }}</option>
                            <option value="beginner">{{ locale === 'ar' ? 'مبتدئ' : 'Beginner' }}</option>
                            <option value="intermediate">{{ locale === 'ar' ? 'متوسط' : 'Intermediate' }}</option>
                            <option value="advanced">{{ locale === 'ar' ? 'متقدم' : 'Advanced' }}</option>
                        </select>
                    </div>

                    <!-- Status -->
                    <div class="filter-select-wrap">
                        <i class="ti ti-circle-check filter-select-icon" aria-hidden="true"></i>
                        <select v-model="filterStatus" class="filter-select">
                            <option value="">{{ locale === 'ar' ? 'كل الحالات' : 'All Statuses' }}</option>
                            <option value="completed">{{ locale === 'ar' ? 'مكتملة' : 'Completed' }}</option>
                            <option value="started">{{ locale === 'ar' ? 'قيد القراءة' : 'In Progress' }}</option>
                            <option value="not_started">{{ locale === 'ar' ? 'لم تبدأ' : 'Not Started' }}</option>
                        </select>
                    </div>

                </div>

                <!-- Result count -->
                <div class="filter-result-count">
                    {{ resultLabel }}
                </div>

            </div>

            <!-- ── Cases table ────────────────────────────────── -->
            <div class="table-wrap">
                <table class="cases-table">
                    <thead>
                        <tr>
                            <th class="col-name">{{ locale === 'ar' ? 'اسم الحالة' : 'Case Name' }}</th>
                            <th class="col-topic">{{ locale === 'ar' ? 'الموضوع' : 'Topic' }}</th>
                            <th class="col-diff">{{ locale === 'ar' ? 'المستوى' : 'Level' }}</th>
                            <th class="col-status">{{ locale === 'ar' ? 'الحالة' : 'Status' }}</th>
                            <th class="col-action"></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr
                            v-for="cas in paginatedCases"
                            :key="cas.id"
                            class="case-row"
                            :class="{
                                'case-row--completed': cas.progress_status === 'completed',
                                'case-row--started':   cas.progress_status === 'started',
                            }">

                            <!-- Case name -->
                            <td class="col-name">
                                <div class="case-name">
                                    <span
                                        class="status-dot"
                                        :class="{
                                            'status-dot--completed': cas.progress_status === 'completed',
                                            'status-dot--started':   cas.progress_status === 'started',
                                            'status-dot--none':      cas.progress_status === 'not_started',
                                        }">
                                    </span>
                                    <span class="case-name__text">{{ caseTitle(cas) }}</span>
                                </div>
                            </td>

                            <!-- Topic -->
                            <td class="col-topic">
                                <span class="topic-chip">{{ topicName(cas) }}</span>
                            </td>

                            <!-- Difficulty -->
                            <td class="col-diff">
                                <span class="diff-badge"
                                    :class="{
                                        'diff--beginner':     cas.difficulty === 'beginner',
                                        'diff--intermediate': cas.difficulty === 'intermediate',
                                        'diff--advanced':     cas.difficulty === 'advanced',
                                    }">
                                    {{ difficultyLabel(cas.difficulty) }}
                                </span>
                            </td>

                            <!-- Status -->
                            <td class="col-status">
                                <span v-if="cas.progress_status === 'completed'" class="status-badge status-badge--completed">
                                    <i class="ti ti-check"></i>
                                    {{ locale === 'ar' ? 'مكتملة' : 'Completed' }}
                                </span>
                                <span v-else-if="cas.progress_status === 'started'" class="status-badge status-badge--started">
                                    <i class="ti ti-book-2"></i>
                                    {{ locale === 'ar' ? 'قيد القراءة' : 'In Progress' }}
                                </span>
                                <span v-else class="status-badge status-badge--none">
                                    {{ locale === 'ar' ? 'لم تبدأ' : 'Not Started' }}
                                </span>
                            </td>

                            <!-- Action -->
                            <td class="col-action">
                                <Link
                                    :href="route('member.cases.show', cas.id)"
                                    class="read-btn">
                                    {{ cas.progress_status === 'completed'
                                        ? (locale === 'ar' ? 'مراجعة' : 'Review')
                                        : cas.progress_status === 'started'
                                            ? (locale === 'ar' ? 'متابعة' : 'Continue')
                                            : (locale === 'ar' ? 'ابدأ' : 'Start') }}
                                    <i class="ti ti-arrow-right" aria-hidden="true"></i>
                                </Link>
                            </td>

                        </tr>
                    </tbody>
                </table>

                <!-- Empty state — no cases in hub at all -->
                <div v-if="cases.length === 0" class="empty-state">
                    <i class="ti ti-books"></i>
                    <p>{{ locale === 'ar' ? 'لا توجد حالات في هذا التخصص بعد' : 'No cases in this hub yet.' }}</p>
                </div>

                <!-- Empty state — filters produced no results -->
                <div v-else-if="filteredCases.length === 0" class="empty-state">
                    <i class="ti ti-filter-off"></i>
                    <p>{{ locale === 'ar' ? 'لا توجد حالات تطابق هذا البحث' : 'No cases match your filters.' }}</p>
                    <button class="clear-filters-link" @click="clearFilters">
                        {{ locale === 'ar' ? 'مسح الفلاتر' : 'Clear filters' }}
                    </button>
                </div>

            </div>

            <!-- ── Pagination ─────────────────────────────────── -->
            <div v-if="totalPages > 1" class="pagination">

                <!-- Prev -->
                <button
                    class="page-btn page-btn--nav"
                    :disabled="currentPage === 1"
                    @click="goToPage(currentPage - 1)"
                    :aria-label="locale === 'ar' ? 'السابق' : 'Previous'">
                    <i class="ti ti-chevron-left"></i>
                </button>

                <!-- First page + ellipsis -->
                <template v-if="visiblePages[0] > 1">
                    <button class="page-btn" @click="goToPage(1)">1</button>
                    <span v-if="visiblePages[0] > 2" class="page-ellipsis">…</span>
                </template>

                <!-- Page numbers -->
                <button
                    v-for="page in visiblePages"
                    :key="page"
                    class="page-btn"
                    :class="{ 'page-btn--active': page === currentPage }"
                    @click="goToPage(page)">
                    {{ page }}
                </button>

                <!-- Last page + ellipsis -->
                <template v-if="visiblePages[visiblePages.length - 1] < totalPages">
                    <span v-if="visiblePages[visiblePages.length - 1] < totalPages - 1" class="page-ellipsis">…</span>
                    <button class="page-btn" @click="goToPage(totalPages)">{{ totalPages }}</button>
                </template>

                <!-- Next -->
                <button
                    class="page-btn page-btn--nav"
                    :disabled="currentPage === totalPages"
                    @click="goToPage(currentPage + 1)"
                    :aria-label="locale === 'ar' ? 'التالي' : 'Next'">
                    <i class="ti ti-chevron-right"></i>
                </button>

            </div>

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

<style scoped>
.progress-page {
    padding: 14px 14px 40px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Back link + title ───────────────────────────────────────── */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: none;
    margin-bottom: 4px;
    transition: color var(--transition-fast);
}
.back-link:hover { color: var(--color-primary); }

.page-title {
    font-size: 20px;
    font-weight: 800;
    color: var(--color-text-primary);
    margin: 0;
}

/* ── Hub tabs ────────────────────────────────────────────────── */
.hub-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.hub-tab {
    font-size: 12px;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.hub-tab:hover {
    border-color: var(--hub-color, var(--color-primary));
    color: var(--hub-color, var(--color-primary));
}

.hub-tab--active-f {
    background: rgba(29,158,117,0.10);
    border-color: #1D9E75;
    color: #1D9E75;
}
.hub-tab--active-m {
    background: rgba(55,138,221,0.10);
    border-color: #378ADD;
    color: #378ADD;
}
.hub-tab--active-s {
    background: rgba(216,90,48,0.10);
    border-color: #D85A30;
    color: #D85A30;
}

/* ── Stats strip ─────────────────────────────────────────────── */
.stats-strip {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.stat-card i {
    font-size: 22px;
    flex-shrink: 0;
}

.stat-card--completed i  { color: #1D9E75; }
.stat-card--progress  i  { color: #378ADD; }
.stat-card--notstarted i { color: var(--color-text-muted); }
.stat-card--total     i  { color: var(--color-text-secondary); }

.stat-card__num {
    font-size: 20px;
    font-weight: 800;
    color: var(--color-text-primary);
    line-height: 1;
}

.stat-card__label {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* ── Progress bar ────────────────────────────────────────────── */
.prog-bar-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

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

.prog-bar-fill {
    height: 100%;
    border-radius: var(--radius-pill);
    transition: width 0.4s ease;
}

.prog-bar-pct {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Filter bar ──────────────────────────────────────────────── */
.filter-bar {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Search row */
.filter-search-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.filter-search-wrap {
    position: relative;
    flex: 1;
    min-width: 180px;
}

.filter-search-icon {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    font-size: 14px;
    color: var(--color-text-muted);
    pointer-events: none;
}

[dir="rtl"] .filter-search-icon {
    left: auto;
    right: 10px;
}

.filter-search {
    width: 100%;
    height: 36px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-md);
    padding: 0 32px 0 32px;
    font-family: inherit;
    font-size: 13px;
    color: var(--color-text-primary);
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

[dir="rtl"] .filter-search {
    padding: 0 32px 0 32px;
}

.filter-search:focus {
    border-color: var(--color-border-focus);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.filter-search::placeholder { color: var(--color-text-muted); }

.filter-search-clear {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 13px;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 2px;
    display: flex;
    align-items: center;
    transition: color var(--transition-fast);
}

[dir="rtl"] .filter-search-clear {
    right: auto;
    left: 8px;
}

.filter-search-clear:hover { color: var(--color-danger); }

/* Clear all button */
.clear-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-danger);
    background: var(--color-danger-soft);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    padding: 5px 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity var(--transition-fast);
    flex-shrink: 0;
}
.clear-all-btn:hover { opacity: 0.80; }

/* Dropdowns row */
.filter-dropdowns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-select-wrap {
    position: relative;
    flex: 1;
    min-width: 140px;
}

.filter-select-icon {
    position: absolute;
    top: 50%;
    left: 9px;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--color-text-muted);
    pointer-events: none;
    z-index: 1;
}

[dir="rtl"] .filter-select-icon {
    left: auto;
    right: 9px;
}

.filter-select {
    width: 100%;
    height: 34px;
    appearance: none;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-md);
    padding: 0 28px 0 30px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-primary);
    cursor: pointer;
    outline: none;
    transition: border-color var(--transition-fast);
    /* chevron arrow */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A96A8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

[dir="rtl"] .filter-select {
    padding: 0 30px 0 28px;
    background-position: left 8px center;
}

.filter-select:focus {
    border-color: var(--color-border-focus);
}

/* Result count */
.filter-result-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
}

/* ── Table ───────────────────────────────────────────────────── */
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.cases-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 560px;
}

.cases-table thead {
    background: var(--color-header-bg);
}

.cases-table th {
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-on-primary);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

[dir="rtl"] .cases-table th { text-align: right; }

.cases-table td {
    padding: 11px 14px;
    font-size: 13px;
    border-bottom: 0.5px solid var(--color-border-light);
    vertical-align: middle;
}

.case-row:last-child td { border-bottom: none; }
.case-row--completed { background: rgba(29,158,117,0.02); }

/* ── Case name cell ──────────────────────────────────────────── */
.case-name {
    display: flex;
    align-items: center;
    gap: 8px;
}

.case-name__text {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-primary);
    line-height: 1.4;
}

/* ── Status dot ──────────────────────────────────────────────── */
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.status-dot--completed { background: #1D9E75; }
.status-dot--started   { background: #378ADD; }
.status-dot--none      { background: var(--color-border); }

/* ── Topic chip ──────────────────────────────────────────────── */
.topic-chip {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    background: var(--color-surface-alt);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

/* ── Difficulty badge ────────────────────────────────────────── */
.diff-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}
.diff--beginner     { background: #dcfce7; color: #166534; }
.diff--intermediate { background: #fef9c3; color: #854d0e; }
.diff--advanced     { background: #fee2e2; color: #991b1b; }

[data-theme="dark"] .diff--beginner     { background: #052e16; color: #86efac; }
[data-theme="dark"] .diff--intermediate { background: #1c1400; color: #fde047; }
[data-theme="dark"] .diff--advanced     { background: #2d0000; color: #fca5a5; }

/* ── Status badge ────────────────────────────────────────────── */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

.status-badge--completed {
    background: rgba(29,158,117,0.12);
    color: #1D9E75;
}
.status-badge--started {
    background: rgba(55,138,221,0.12);
    color: #378ADD;
}
.status-badge--none {
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
}

/* ── Read button ─────────────────────────────────────────────── */
.read-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    white-space: nowrap;
    transition: opacity var(--transition-fast);
}
.read-btn:hover { opacity: 0.75; }

/* ── Empty states ────────────────────────────────────────────── */
.empty-state {
    padding: 40px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.empty-state i { font-size: 32px; }

.clear-filters-link {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-primary);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    font-family: inherit;
}

/* ── Pagination ──────────────────────────────────────────────── */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
}

.page-btn {
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.page-btn:hover:not(:disabled):not(.page-btn--active) {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-soft);
}

.page-btn--active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    cursor: default;
}

.page-btn--nav {
    color: var(--color-text-muted);
}

.page-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.page-ellipsis {
    font-size: 12px;
    color: var(--color-text-muted);
    padding: 0 2px;
    line-height: 34px;
}

/* ── Desktop ─────────────────────────────────────────────────── */
@media (min-width: 768px) {
    .progress-page {
        padding: 24px 24px 40px;
    }

    .page-title { font-size: 24px; }

    .stats-strip {
        grid-template-columns: repeat(4, 1fr);
    }

    .hub-tabs { gap: 10px; }

    /* On desktop all 3 dropdowns sit in one row naturally */
    .filter-dropdowns {
        flex-wrap: nowrap;
    }

    .filter-select-wrap {
        min-width: 0;
    }
}
</style>