<script setup>
// ══════════════════════════════════════════════════════════════════
//  InPractice — Admin/Dashboard.vue
//  Location: resources/js/Pages/Admin/Dashboard.vue
//
//  MOBILE  (<768px):
//    - Page title + subtitle
//    - KPI strip — 2 columns, 4 cards
//    - Hub breakdown — 3 stacked cards
//    - Forum stats card
//    - Recent members — compact list
//
//  DESKTOP (≥768px):
//    - Max-width 1250px container centered in ip-admin-main
//    - Page title row
//    - KPI strip — 4 cards in one row
//    - Two-column: Hub cards (left, 2/3) | Forum + Quick links (right, 1/3)
//    - Recent members full table
//
//  Rules:
//    - Zero DB calls in Vue — all data from AdminDashboardService
//    - All CSS uses var(--color-*) tokens — no hardcoded hex
//    - Admin always navy theme — no theme toggle needed
// ══════════════════════════════════════════════════════════════════

import { computed } from 'vue';
import { Head, Link } from '@inertiajs/vue3';
import AdminLayout   from '@/Layouts/AdminLayout.vue';

// ── Props ─────────────────────────────────────────────────────────
const props = defineProps({
    memberStats:   { type: Object, required: true },
    caseStats:     { type: Array,  required: true },
    forumStats:    { type: Object, required: true },
    recentMembers: { type: Array,  required: true },
});

// ── Computed ──────────────────────────────────────────────────────
const totalPublishedCases = computed(() =>
    props.caseStats.reduce((sum, h) => sum + h.published, 0)
);

const totalDraftCases = computed(() =>
    props.caseStats.reduce((sum, h) => sum + h.draft, 0)
);

// KPI cards
const kpiCards = computed(() => [
    {
        label:    'Total Members',
        value:    props.memberStats.total,
        sub:      `${props.memberStats.active} active · ${props.memberStats.suspended} suspended`,
        icon:     'users',
        accent:   'var(--color-primary)',
        bg:       'var(--color-primary-soft)',
    },
    {
        label:    'New This Week',
        value:    props.memberStats.new_this_week,
        sub:      props.memberStats.week_growth >= 0
                    ? `+${props.memberStats.week_growth}% vs last week`
                    : `${props.memberStats.week_growth}% vs last week`,
        icon:     'trending-up',
        accent:   '#378ADD',
        bg:       'rgba(55,138,221,0.10)',
        positive: props.memberStats.week_growth >= 0,
    },
    {
        label:    'Cases Published',
        value:    totalPublishedCases.value,
        sub:      `${totalDraftCases.value} in draft`,
        icon:     'book',
        accent:   '#D85A30',
        bg:       'rgba(216,90,48,0.10)',
    },
    {
        label:    'Forum Posts',
        value:    props.forumStats.total_posts,
        sub:      `${props.forumStats.open_threads} questions · ${props.forumStats.knowledge_posts} shared`,
        icon:     'message',
        accent:   '#8B5CF6',
        bg:       'rgba(139,92,246,0.10)',
    },
]);

// Experience level label
function expLabel(level) {
    const map = {
        student: 'Student',
        fresh:   'Fresh',
        junior:  'Junior',
        mid:     'Mid',
        senior:  'Senior',
    };
    return map[level] ?? level;
}
</script>

<template>
    <Head title="Admin Dashboard" />

    <AdminLayout title="Dashboard">

        <div class="adm-dash">

            <!-- ══════════════════════════════════════════════════
                 PAGE TITLE
            ═══════════════════════════════════════════════════════ -->
            <div class="adm-dash__header">
                <div>
                    <h1 class="adm-dash__title">Platform Overview</h1>
                    <p class="adm-dash__sub">Live snapshot · updates every 2 minutes</p>
                </div>
                <Link :href="route('admin.users.index')" class="adm-dash__cta">
                    Manage Members
                </Link>
            </div>

            <!-- ══════════════════════════════════════════════════
                 KPI STRIP — 4 cards
            ═══════════════════════════════════════════════════════ -->
            <div class="adm-kpi-strip">
                <div
                    v-for="card in kpiCards"
                    :key="card.label"
                    class="adm-kpi-card"
                >
                    <!-- Icon bubble -->
                    <div class="adm-kpi-card__icon" :style="{ background: card.bg }">
                        <!-- Users icon -->
                        <svg v-if="card.icon === 'users'" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :style="{ color: card.accent }">
                            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
                        </svg>
                        <!-- Trending up icon -->
                        <svg v-if="card.icon === 'trending-up'" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :style="{ color: card.accent }">
                            <polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/>
                        </svg>
                        <!-- Book icon -->
                        <svg v-if="card.icon === 'book'" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :style="{ color: card.accent }">
                            <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
                        </svg>
                        <!-- Message icon -->
                        <svg v-if="card.icon === 'message'" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" :style="{ color: card.accent }">
                            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
                        </svg>
                    </div>

                    <div class="adm-kpi-card__body">
                        <div class="adm-kpi-card__value">{{ card.value.toLocaleString() }}</div>
                        <div class="adm-kpi-card__label">{{ card.label }}</div>
                        <div
                            class="adm-kpi-card__sub"
                            :class="card.icon === 'trending-up' && card.positive === false ? 'adm-kpi-card__sub--danger' : ''"
                        >{{ card.sub }}</div>
                    </div>
                </div>
            </div>

            <!-- ══════════════════════════════════════════════════
                 MAIN BODY — Hub breakdown + sidebar
            ═══════════════════════════════════════════════════════ -->
            <div class="adm-body-grid">

                <!-- LEFT — Hub breakdown ─────────────────────── -->
                <div class="adm-hub-col">
                    <h2 class="adm-section-title">Hub Breakdown</h2>

                    <div class="adm-hub-cards">
                        <div
                            v-for="hub in caseStats"
                            :key="hub.hub_id"
                            class="adm-hub-card"
                        >
                            <!-- Top stripe in hub color -->
                            <div class="adm-hub-card__stripe" :style="{ background: hub.color }" />

                            <div class="adm-hub-card__inner">

                                <div class="adm-hub-card__head">
                                    <span class="adm-hub-card__name">{{ hub.name_en }}</span>
                                    <span class="adm-hub-badge" :style="{ background: hub.color + '22', color: hub.color }">
                                        {{ hub.hub_members }} members
                                    </span>
                                </div>

                                <!-- Case progress bar -->
                                <div class="adm-hub-card__bar-wrap">
                                    <div class="adm-hub-card__bar-track">
                                        <div
                                            class="adm-hub-card__bar-fill"
                                            :style="{
                                                width: hub.total > 0 ? (hub.published / hub.total * 100) + '%' : '0%',
                                                background: hub.color
                                            }"
                                        />
                                    </div>
                                    <span class="adm-hub-card__bar-label">
                                        {{ hub.total > 0 ? Math.round(hub.published / hub.total * 100) : 0 }}% published
                                    </span>
                                </div>

                                <!-- Status pills -->
                                <div class="adm-hub-card__pills">
                                    <span class="adm-pill adm-pill--published">
                                        ✓ {{ hub.published }} Published
                                    </span>
                                    <span class="adm-pill adm-pill--draft">
                                        ✎ {{ hub.draft }} Draft
                                    </span>
                                    <span v-if="hub.review > 0" class="adm-pill adm-pill--review">
                                        ◎ {{ hub.review }} In Review
                                    </span>
                                    <span v-if="hub.archived > 0" class="adm-pill adm-pill--archived">
                                        ⊘ {{ hub.archived }} Archived
                                    </span>
                                </div>

                                <div class="adm-hub-card__footer">
                                    <Link
                                        :href="route('admin.cases.index', { hub_id: hub.hub_id })"
                                        class="adm-hub-card__link"
                                    >
                                        View cases →
                                    </Link>
                                    <Link
                                        :href="route('admin.cases.create')"
                                        class="adm-hub-card__link adm-hub-card__link--add"
                                    >
                                        + Add case
                                    </Link>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>

                <!-- RIGHT — Forum card + Quick links ────────────── -->
                <div class="adm-right-col">

                    <!-- Forum card -->
                    <div class="adm-info-card">
                        <h3 class="adm-info-card__title">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
                            </svg>
                            Community
                        </h3>
                        <div class="adm-info-rows">
                            <div class="adm-info-row">
                                <span class="adm-info-row__label">Total posts</span>
                                <span class="adm-info-row__value">{{ forumStats.total_posts.toLocaleString() }}</span>
                            </div>
                            <div class="adm-info-row">
                                <span class="adm-info-row__label">Open questions</span>
                                <span class="adm-info-row__value">{{ forumStats.open_threads.toLocaleString() }}</span>
                            </div>
                            <div class="adm-info-row">
                                <span class="adm-info-row__label">Knowledge shared</span>
                                <span class="adm-info-row__value">{{ forumStats.knowledge_posts.toLocaleString() }}</span>
                            </div>
                        </div>
                    </div>

                    <!-- Members card -->
                    <div class="adm-info-card">
                        <h3 class="adm-info-card__title">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/>
                            </svg>
                            Members
                        </h3>
                        <div class="adm-info-rows">
                            <div class="adm-info-row">
                                <span class="adm-info-row__label">Total</span>
                                <span class="adm-info-row__value">{{ memberStats.total.toLocaleString() }}</span>
                            </div>
                            <div class="adm-info-row">
                                <span class="adm-info-row__label">Active</span>
                                <span class="adm-info-row__value adm-info-row__value--green">{{ memberStats.active.toLocaleString() }}</span>
                            </div>
                            <div class="adm-info-row">
                                <span class="adm-info-row__label">Suspended</span>
                                <span
                                    class="adm-info-row__value"
                                    :class="memberStats.suspended > 0 ? 'adm-info-row__value--red' : ''"
                                >{{ memberStats.suspended }}</span>
                            </div>
                            <div class="adm-info-row">
                                <span class="adm-info-row__label">This month</span>
                                <span class="adm-info-row__value">+{{ memberStats.new_this_month }}</span>
                            </div>
                        </div>
                        <Link :href="route('admin.users.index')" class="adm-info-card__btn">
                            Manage all members →
                        </Link>
                    </div>

                    <!-- Quick links -->
                    <div class="adm-quick-links">
                        <Link :href="route('admin.cases.create')" class="adm-quick-link">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/>
                            </svg>
                            Add New Case
                        </Link>
                        <Link :href="route('admin.cases.index')" class="adm-quick-link">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>
                            </svg>
                            Review Draft Cases
                        </Link>
                        <Link :href="route('admin.users.index', { status: 'suspended' })" class="adm-quick-link">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <circle cx="12" cy="12" r="10"/><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/>
                            </svg>
                            Suspended Accounts
                        </Link>
                    </div>

                </div>
            </div>

            <!-- ══════════════════════════════════════════════════
                 RECENT MEMBERS
            ═══════════════════════════════════════════════════════ -->
            <div class="adm-recent">
                <div class="adm-recent__head">
                    <h2 class="adm-section-title">Recent Registrations</h2>
                    <Link :href="route('admin.users.index')" class="adm-recent__view-all">
                        View all →
                    </Link>
                </div>

                <!-- Desktop table -->
                <div class="adm-table-wrap">
                    <table class="adm-table">
                        <thead>
                            <tr>
                                <th>Member</th>
                                <th>Nickname</th>
                                <th>Profession</th>
                                <th>Level</th>
                                <th>Hubs</th>
                                <th>Joined</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="member in recentMembers" :key="member.id">
                                <td>
                                    <div class="adm-table-member">
                                        <div class="adm-table-avatar">
                                            {{ member.name.charAt(0).toUpperCase() }}
                                        </div>
                                        <div>
                                            <div class="adm-table-name">{{ member.name }}</div>
                                            <div class="adm-table-email">{{ member.email }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="adm-table-nickname">@{{ member.nickname }}</td>
                                <td class="adm-table-cell">{{ member.profession ?? '—' }}</td>
                                <td>
                                    <span class="adm-exp-badge">{{ expLabel(member.experience_level) }}</span>
                                </td>
                                <td>
                                    <div class="adm-hub-dots">
                                        <span
                                            v-for="hub in member.hubs"
                                            :key="hub.id"
                                            class="adm-hub-dot"
                                            :style="{ background: hub.color }"
                                            :title="hub.name_en"
                                        />
                                    </div>
                                </td>
                                <td class="adm-table-cell adm-table-cell--muted" :title="member.created_at_full">
                                    {{ member.created_at }}
                                </td>
                                <td>
                                    <span
                                        class="adm-status-badge"
                                        :class="member.is_active ? 'adm-status-badge--active' : 'adm-status-badge--suspended'"
                                    >
                                        {{ member.is_active ? 'Active' : 'Suspended' }}
                                    </span>
                                </td>
                            </tr>
                            <tr v-if="recentMembers.length === 0">
                                <td colspan="7" class="adm-table-empty">No members yet.</td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- Mobile list (shown instead of table on small screens) -->
                <div class="adm-member-list">
                    <div
                        v-for="member in recentMembers"
                        :key="'m-' + member.id"
                        class="adm-member-item"
                    >
                        <div class="adm-table-avatar">{{ member.name.charAt(0).toUpperCase() }}</div>
                        <div class="adm-member-item__body">
                            <div class="adm-member-item__name">{{ member.name }}</div>
                            <div class="adm-member-item__meta">
                                @{{ member.nickname }} · {{ member.profession ?? 'No profession' }}
                            </div>
                            <div class="adm-member-item__meta">{{ member.created_at }}</div>
                        </div>
                        <span
                            class="adm-status-badge"
                            :class="member.is_active ? 'adm-status-badge--active' : 'adm-status-badge--suspended'"
                        >
                            {{ member.is_active ? 'Active' : 'Suspended' }}
                        </span>
                    </div>
                </div>

            </div>

        </div><!-- /adm-dash -->
    </AdminLayout>
</template>

<style scoped>
/* ── Container ───────────────────────────────────────────────── */
.adm-dash {
    max-width: 1250px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* ── Page header ─────────────────────────────────────────────── */
.adm-dash__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.adm-dash__title {
    font-size: var(--text-2xl);
    font-weight: var(--fw-bold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-1);
}

.adm-dash__sub {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 0;
}

.adm-dash__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--color-primary);
    color: #fff;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    transition: opacity var(--transition-fast);
    white-space: nowrap;
    flex-shrink: 0;
}

.adm-dash__cta:hover { opacity: 0.88; }

/* ── KPI strip ───────────────────────────────────────────────── */
.adm-kpi-strip {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

@media (min-width: 768px) {
    .adm-kpi-strip {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-4);
    }
}

.adm-kpi-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    transition: box-shadow var(--transition-fast);
}

.adm-kpi-card:hover {
    box-shadow: var(--shadow-md);
}

.adm-kpi-card__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.adm-kpi-card__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.adm-kpi-card__value {
    font-size: var(--text-2xl);
    font-weight: var(--fw-bold);
    color: var(--color-text-primary);
    line-height: 1;
}

.adm-kpi-card__label {
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    color: var(--color-text-secondary);
}

.adm-kpi-card__sub {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.adm-kpi-card__sub--danger {
    color: var(--color-danger);
}

/* ── Section title ───────────────────────────────────────────── */
.adm-section-title {
    font-size: var(--text-base);
    font-weight: var(--fw-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-4);
}

/* ── Body grid ───────────────────────────────────────────────── */
.adm-body-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

@media (min-width: 768px) {
    .adm-body-grid {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--space-6);
    }
}

.adm-hub-col {
    flex: 1;
    min-width: 0;
}

.adm-right-col {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

@media (min-width: 768px) {
    .adm-right-col {
        width: 300px;
        flex-shrink: 0;
    }
}

/* ── Hub cards ───────────────────────────────────────────────── */
.adm-hub-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.adm-hub-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow var(--transition-fast);
}

.adm-hub-card:hover {
    box-shadow: var(--shadow-md);
}

.adm-hub-card__stripe {
    height: 4px;
    width: 100%;
}

.adm-hub-card__inner {
    padding: var(--space-4);
}

.adm-hub-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
    gap: var(--space-2);
    flex-wrap: wrap;
}

.adm-hub-card__name {
    font-size: var(--text-base);
    font-weight: var(--fw-semibold);
    color: var(--color-text-primary);
}

.adm-hub-badge {
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    padding: 3px 8px;
    border-radius: var(--radius-pill);
}

/* Progress bar */
.adm-hub-card__bar-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.adm-hub-card__bar-track {
    flex: 1;
    height: 6px;
    background: var(--color-surface-alt);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.adm-hub-card__bar-fill {
    height: 100%;
    border-radius: var(--radius-pill);
    transition: width 0.6s ease;
}

.adm-hub-card__bar-label {
    font-size: var(--text-xs);
    font-weight: var(--fw-medium);
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* Pills */
.adm-hub-card__pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.adm-pill {
    font-size: 11px;
    font-weight: var(--fw-medium);
    padding: 3px 8px;
    border-radius: var(--radius-pill);
}

.adm-pill--published {
    background: rgba(29, 158, 117, 0.12);
    color: var(--color-primary);
}

.adm-pill--draft {
    background: var(--color-surface-alt);
    color: var(--color-text-secondary);
}

.adm-pill--review {
    background: rgba(216, 90, 48, 0.10);
    color: #D85A30;
}

.adm-pill--archived {
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
}

.adm-hub-card__footer {
    display: flex;
    gap: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.adm-hub-card__link {
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    color: var(--color-primary);
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

.adm-hub-card__link:hover { opacity: 0.75; }

/* ── Info cards (right col) ──────────────────────────────────── */
.adm-info-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
}

.adm-info-card__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-3);
}

.adm-info-rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.adm-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
}

.adm-info-row:last-child { border-bottom: none; }

.adm-info-row__label {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.adm-info-row__value {
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-text-primary);
}

.adm-info-row__value--green { color: var(--color-primary); }

.adm-info-row__value--red { color: var(--color-danger); }

.adm-info-card__btn {
    display: block;
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    color: var(--color-primary);
    text-decoration: none;
    text-align: right;
    transition: opacity var(--transition-fast);
}

.adm-info-card__btn:hover { opacity: 0.75; }

/* ── Quick links ─────────────────────────────────────────────── */
.adm-quick-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.adm-quick-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    color: var(--color-text-primary);
    text-decoration: none;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.adm-quick-link:hover {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.adm-quick-link svg { flex-shrink: 0; }

/* ── Recent members section ──────────────────────────────────── */
.adm-recent__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.adm-recent__view-all {
    font-size: var(--text-sm);
    font-weight: var(--fw-medium);
    color: var(--color-primary);
    text-decoration: none;
}

.adm-recent__view-all:hover { opacity: 0.75; }

/* ── Table (desktop) ─────────────────────────────────────────── */
.adm-table-wrap {
    display: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    overflow-x: auto;
}

@media (min-width: 768px) {
    .adm-table-wrap { display: block; }
}

.adm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.adm-table thead tr {
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border);
}

.adm-table th {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-size: 11px;
    font-weight: var(--fw-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.adm-table tbody tr {
    border-bottom: 1px solid var(--color-border);
    transition: background var(--transition-fast);
}

.adm-table tbody tr:last-child { border-bottom: none; }

.adm-table tbody tr:hover {
    background: var(--color-surface-alt);
}

.adm-table td {
    padding: var(--space-3) var(--space-4);
    vertical-align: middle;
}

.adm-table-empty {
    text-align: center;
    color: var(--color-text-muted);
    padding: var(--space-8) !important;
}

.adm-table-member {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.adm-table-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: var(--fw-bold);
    color: #fff;
    flex-shrink: 0;
}

.adm-table-name {
    font-weight: var(--fw-medium);
    color: var(--color-text-primary);
    white-space: nowrap;
}

.adm-table-email {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.adm-table-nickname {
    font-family: monospace;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.adm-table-cell {
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.adm-table-cell--muted {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.adm-exp-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: var(--fw-medium);
    background: var(--color-surface-alt);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.adm-hub-dots {
    display: flex;
    gap: 4px;
}

.adm-hub-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.adm-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: var(--fw-semibold);
    white-space: nowrap;
}

.adm-status-badge--active {
    background: rgba(29, 158, 117, 0.12);
    color: var(--color-primary);
}

.adm-status-badge--suspended {
    background: rgba(229, 57, 53, 0.10);
    color: var(--color-danger);
}

/* ── Mobile member list ──────────────────────────────────────── */
.adm-member-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

@media (min-width: 768px) {
    .adm-member-list { display: none; }
}

.adm-member-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
}

.adm-member-item__body {
    flex: 1;
    min-width: 0;
}

.adm-member-item__name {
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.adm-member-item__meta {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>
