<script setup>
// ══════════════════════════════════════════════════════════════════
//  InPractice — Member/JobClub/CvPool/Index.vue
//  Location: resources/js/Pages/Member/JobClub/CvPool/Index.vue
//
//  Redesigned to match Help & Earn / Job Listings quality.
//
//  MOBILE  (<768px): Cards, filter toggle button
//  DESKTOP (≥768px): Filter bar top, card grid 2-column
//
//  Rules:
//    - Personal info NEVER shown — profiles are 100% anonymous
//    - "Send Job" opens a modal to pick which listing to attach
// ══════════════════════════════════════════════════════════════════

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

const props = defineProps({
    profiles: { type: Object,  required: true },
    allHubs:  { type: Array,   required: true },
    filters:  { type: Object,  default: () => ({}) },
});

const authStore    = useAuthStore();
const locale       = computed(() => authStore.locale);
const ar           = computed(() => locale.value === 'ar');

// ── Filters ───────────────────────────────────────────────────────
const showFilters   = ref(false);
const filterHub     = ref(props.filters.hub_id ?? '');
const filterLevel   = ref(props.filters.experience_level ?? '');
const filterJobType = ref(props.filters.job_type_preference ?? '');
const filterYears   = ref(props.filters.years_experience_min ?? '');

function applyFilters() {
    router.get(route('member.cv.pool'), {
        hub_id:                filterHub.value     || undefined,
        experience_level:      filterLevel.value   || undefined,
        job_type_preference:   filterJobType.value || undefined,
        years_experience_min:  filterYears.value   || undefined,
    }, { preserveState: true, replace: true });
}

function clearFilters() {
    filterHub.value = '';
    filterLevel.value = '';
    filterJobType.value = '';
    filterYears.value = '';
    router.get(route('member.cv.pool'), {}, { replace: true });
}

const hasActiveFilters = computed(() =>
    filterHub.value || filterLevel.value || filterJobType.value || filterYears.value
);

// ── Send job modal ────────────────────────────────────────────────
const sendModal        = ref(false);
const selectedProfile  = ref(null);
const sendMessage      = ref('');
const sendingDirect    = ref(false);
const sendResult       = ref(null);

const myListings       = ref([]);
const selectedListing  = ref(null);
const loadingListings  = ref(false);

async function openSendModal(profile) {
    selectedProfile.value = profile;
    sendMessage.value     = '';
    selectedListing.value = null;
    sendResult.value      = null;
    sendModal.value       = true;

    if (!myListings.value.length) {
        loadingListings.value = true;
        try {
            const res  = await fetch(route('member.jobs.my-listings'), {
                headers: { 'X-Requested-With': 'XMLHttpRequest', Accept: 'application/json' },
            });
            const data = await res.json();
            myListings.value = data.myListings ?? [];
        } finally {
            loadingListings.value = false;
        }
    }
}

function closeSendModal() {
    sendModal.value       = false;
    selectedProfile.value = null;
}

async function sendDirect() {
    if (!selectedListing.value || !selectedProfile.value) return;
    sendingDirect.value = true;
    try {
        const res = await fetch(
            route('member.jobs.send-direct', {
                cv:      selectedProfile.value.id,
                listing: selectedListing.value,
            }),
            {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                },
                body: JSON.stringify({ message: sendMessage.value }),
            }
        );
        const data = await res.json();
        sendResult.value = data.message;
    } finally {
        sendingDirect.value = false;
    }
}

// ── Helpers ───────────────────────────────────────────────────────
const experienceLevels = [
    { value: 'student', en: 'Student',   ar: 'طالب' },
    { value: 'fresh',   en: 'Fresh',     ar: 'خريج جديد' },
    { value: 'junior',  en: 'Junior',    ar: 'مبتدئ' },
    { value: 'mid',     en: 'Mid-level', ar: 'متوسط' },
    { value: 'senior',  en: 'Senior',    ar: 'خبير' },
];

const jobTypes = [
    { value: 'full_time', en: 'Full Time',  ar: 'دوام كامل' },
    { value: 'part_time', en: 'Part Time',  ar: 'دوام جزئي' },
    { value: 'both',      en: 'Both',       ar: 'كلاهما' },
];

function levelLabel(value) {
    const found = experienceLevels.find(l => l.value === value);
    return found ? (ar.value ? found.ar : found.en) : value;
}

function hubName(hub) {
    return ar.value ? hub.name_ar : hub.name_en;
}
</script>

<template>
    <Head :title="ar ? 'مجمع السير الذاتية' : 'CV Pool'" />

    <AppLayout>
        <div class="pool-page">

            <!-- ══════════════════════════════════════════════════
                 ENTRY CARDS — matches Help & Earn / Job Listings
            ═══════════════════════════════════════════════════════ -->
            <div class="pool-entry-grid">

                <!-- I'm in the pool -->
                <div class="pool-entry-card">
                    <div class="pool-entry-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>
                        </svg>
                    </div>
                    <div class="pool-entry-text">
                        <strong>{{ ar ? 'أنا في المجمع' : 'I\'m in the Pool' }}</strong>
                        <span>{{ ar
                            ? 'أضف ملفك المجهول — شارك معلوماتك فقط عند موافقتك'
                            : 'Add your anonymous profile — share details only when you consent' }}</span>
                    </div>
                    <a :href="route('member.cv.profile')" class="pool-entry-cta-btn">
                        {{ ar ? 'ملفي الشخصي' : 'My CV Profile' }}
                    </a>
                </div>

                <!-- I'm looking to hire -->
                <div class="pool-entry-card">
                    <div class="pool-entry-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
                            <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
                        </svg>
                    </div>
                    <div class="pool-entry-text">
                        <strong>{{ ar ? 'أبحث عن موهبة' : 'I\'m Looking to Hire' }}</strong>
                        <span>{{ ar
                            ? 'تصفح الملفات المجهولة وأرسل فرصتك مباشرة للمناسبين'
                            : 'Browse anonymous profiles and send your role directly to the right fit' }}</span>
                    </div>
                    <a :href="route('member.jobs.create')" class="pool-entry-secondary-btn">
                        {{ ar ? 'نشر وظيفة' : 'Post a Job' }}
                    </a>
                </div>

            </div>

            <!-- ══════════════════════════════════════════════════
                 PRIVACY DISCLAIMER
            ═══════════════════════════════════════════════════════ -->
            <div class="pool-disclaimer">
                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0; margin-top:1px;">
                    <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>
                </svg>
                <span>{{ ar
                    ? 'جميع الملفات مجهولة تماماً — لا اسم، لا بريد، لا هاتف. المعلومات الشخصية لا تُكشف إلا بعد موافقة الطرفين.'
                    : 'All profiles are fully anonymous — no name, email, or phone. Personal details are only revealed after mutual consent from both parties.' }}</span>
            </div>

            <!-- ══════════════════════════════════════════════════
                 TABS — CV Pool active, Job Listings link
            ═══════════════════════════════════════════════════════ -->
            <div class="pool-tabs">
                <button class="pool-tab pool-tab--active">
                    {{ ar ? 'مجمع السير الذاتية' : 'CV Pool' }}
                    <span class="pool-tab-count">{{ profiles.total }}</span>
                </button>
                <a :href="route('member.jobs.index')" class="pool-tab">
                    {{ ar ? 'إعلانات الوظائف' : 'Job Listings' }}
                </a>
            </div>

            <!-- ══════════════════════════════════════════════════
                 FILTERS
            ═══════════════════════════════════════════════════════ -->
            <div class="pool-filters" :class="{ 'pool-filters--open': showFilters }">
                <!-- Hub -->
                <select v-model="filterHub" class="filter-select">
                    <option value="">{{ ar ? 'جميع المجالات' : 'All Hubs' }}</option>
                    <option v-for="hub in allHubs" :key="hub.id" :value="hub.id">
                        {{ hubName(hub) }}
                    </option>
                </select>

                <!-- Level -->
                <select v-model="filterLevel" class="filter-select">
                    <option value="">{{ ar ? 'جميع المستويات' : 'All Levels' }}</option>
                    <option v-for="lvl in experienceLevels" :key="lvl.value" :value="lvl.value">
                        {{ ar ? lvl.ar : lvl.en }}
                    </option>
                </select>

                <!-- Job type -->
                <select v-model="filterJobType" class="filter-select">
                    <option value="">{{ ar ? 'جميع الأنواع' : 'All Job Types' }}</option>
                    <option v-for="jt in jobTypes" :key="jt.value" :value="jt.value">
                        {{ ar ? jt.ar : jt.en }}
                    </option>
                </select>

                <!-- Min experience -->
                <input v-model="filterYears"
                       type="number"
                       min="0"
                       max="30"
                       class="filter-select"
                       :placeholder="ar ? 'خبرة أدنى (سنة)' : 'Min experience (yrs)'" />

                <button class="filter-apply-btn" @click="applyFilters">
                    {{ ar ? 'تطبيق' : 'Apply' }}
                </button>

                <button v-if="hasActiveFilters" class="filter-clear-btn" @click="clearFilters">
                    {{ ar ? 'إلغاء' : 'Clear' }}
                </button>
            </div>

            <!-- ── Count + mobile filter toggle ────────────────── -->
            <div class="pool-count-row">
                <span class="pool-count">
                    {{ profiles.total }} {{ ar ? 'ملف' : 'profiles' }}
                </span>
                <button class="pool-filter-toggle desktop-hide"
                        @click="showFilters = !showFilters">
                    <i class="ti ti-adjustments-horizontal"></i>
                    {{ ar ? 'فلترة' : 'Filter' }}
                    <span v-if="hasActiveFilters" class="filter-dot"></span>
                </button>
            </div>

            <!-- ── Empty state ──────────────────────────────────── -->
            <div v-if="!profiles.data.length" class="pool-empty">
                <i class="ti ti-users"></i>
                <p>{{ ar ? 'لا توجد ملفات مطابقة لهذه الفلاتر' : 'No profiles match these filters' }}</p>
            </div>

            <!-- ── Cards ────────────────────────────────────────── -->
            <div v-else class="pool-grid">
                <div v-for="profile in profiles.data"
                     :key="profile.id"
                     class="cv-card">

                    <!-- Job title + level badge -->
                    <div class="cv-card__top">
                        <div class="cv-card__title">{{ profile.job_title }}</div>
                        <span class="cv-card__level-badge">{{ levelLabel(profile.experience_level) }}</span>
                    </div>

                    <!-- Meta row -->
                    <div class="cv-card__meta">
                        <span><i class="ti ti-calendar"></i> {{ profile.years_experience }} {{ ar ? 'سنة' : 'yrs' }}</span>
                        <span v-if="profile.location_city">
                            <i class="ti ti-map-pin"></i> {{ profile.location_city }}
                        </span>
                        <span v-if="profile.job_type_preference">
                            <i class="ti ti-briefcase"></i>
                            {{ ar
                                ? (profile.job_type_preference === 'full_time' ? 'دوام كامل' : profile.job_type_preference === 'part_time' ? 'دوام جزئي' : 'كلاهما')
                                : profile.job_type_preference.replace('_', ' ') }}
                        </span>
                        <span v-if="profile.open_to_relocation">
                            <i class="ti ti-plane"></i> {{ ar ? 'منفتح للانتقال' : 'Open to relocation' }}
                        </span>
                    </div>

                    <!-- Skills -->
                    <div v-if="profile.skills?.length" class="cv-card__skills">
                        <span v-for="s in profile.skills.slice(0, 5)" :key="s" class="cv-skill">{{ s }}</span>
                        <span v-if="profile.skills.length > 5" class="cv-skill cv-skill--more">
                            +{{ profile.skills.length - 5 }}
                        </span>
                    </div>

                    <!-- Summary -->
                    <p v-if="profile.summary" class="cv-card__summary">{{ profile.summary }}</p>

                    <!-- Footer: updated + send button -->
                    <div class="cv-card__footer">
                        <div class="cv-card__updated">
                            <i class="ti ti-clock"></i> {{ profile.updated_at }}
                        </div>
                        <button class="cv-card__send-btn" @click="openSendModal(profile)">
                            <i class="ti ti-send"></i>
                            {{ ar ? 'إرسال فرصة' : 'Send Job' }}
                        </button>
                    </div>

                </div>
            </div>

            <!-- ── Pagination ────────────────────────────────────── -->
            <div v-if="profiles.last_page > 1" class="pool-pagination">
                <a v-for="link in profiles.links"
                   :key="link.label"
                   :href="link.url"
                   class="page-btn"
                   :class="{
                       'page-btn--active':    link.active,
                       'page-btn--disabled':  !link.url,
                   }"
                   v-html="link.label" />
            </div>

        </div><!-- /pool-page -->

        <!-- ══════════════════════════════════════════════════════
             SEND JOB MODAL — unchanged logic, cleaner style
        ═══════════════════════════════════════════════════════════ -->
        <Teleport to="body">
            <Transition name="modal">
                <div v-if="sendModal" class="modal-overlay" @click.self="closeSendModal">
                    <div class="modal-box">

                        <div class="modal-header">
                            <span class="modal-title">
                                {{ ar ? 'إرسال فرصة وظيفية' : 'Send Job Opportunity' }}
                            </span>
                            <button class="modal-close" @click="closeSendModal">×</button>
                        </div>

                        <!-- Success state -->
                        <div v-if="sendResult" class="modal-success">
                            <i class="ti ti-circle-check"></i>
                            <p>{{ sendResult }}</p>
                            <button class="modal-done-btn" @click="closeSendModal">
                                {{ ar ? 'تم' : 'Done' }}
                            </button>
                        </div>

                        <!-- Select listing state -->
                        <template v-else>
                            <p class="modal-sub">
                                {{ ar
                                    ? 'اختر أي إعلان وظيفي تريد إرساله لهذا الملف'
                                    : 'Choose which job listing to send to this profile' }}
                            </p>

                            <div v-if="loadingListings" class="modal-loading">
                                {{ ar ? 'جاري التحميل...' : 'Loading...' }}
                            </div>

                            <div v-else-if="!myListings.length" class="modal-no-listings">
                                <p>{{ ar ? 'لا توجد لديك إعلانات وظيفية نشطة' : 'You have no active job listings' }}</p>
                                <a :href="route('member.jobs.create')" class="modal-create-btn">
                                    {{ ar ? 'أنشئ إعلاناً' : 'Create a Listing' }}
                                </a>
                            </div>

                            <div v-else class="modal-listings">
                                <label v-for="listing in myListings"
                                       :key="listing.id"
                                       class="modal-listing-option"
                                       :class="{ 'modal-listing-option--selected': selectedListing === listing.id }">
                                    <input type="radio"
                                           :value="listing.id"
                                           v-model="selectedListing"
                                           class="modal-radio" />
                                    <div class="modal-listing-info">
                                        <div class="modal-listing-title">{{ listing.job_title }}</div>
                                        <div class="modal-listing-company">{{ listing.company_name }}</div>
                                    </div>
                                </label>
                            </div>

                            <textarea v-model="sendMessage"
                                      class="modal-message"
                                      rows="2"
                                      :placeholder="ar ? 'رسالة اختيارية...' : 'Optional message...'"
                                      maxlength="500" />

                            <button class="modal-send-btn"
                                    :disabled="!selectedListing || sendingDirect"
                                    @click="sendDirect">
                                {{ sendingDirect
                                    ? (ar ? 'جاري الإرسال...' : 'Sending...')
                                    : (ar ? 'إرسال' : 'Send') }}
                            </button>
                        </template>

                    </div>
                </div>
            </Transition>
        </Teleport>

    </AppLayout>
</template>

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

/* ══════════════════════════════════════════════════════════════
   ENTRY CARDS
══════════════════════════════════════════════════════════════ */
.pool-entry-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.pool-entry-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 20px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--transition-fast);
}

.pool-entry-card:hover {
    box-shadow: var(--shadow-card-hover);
}

.pool-entry-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: rgba(29, 158, 117, 0.1);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pool-entry-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.pool-entry-text strong {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.3;
}

.pool-entry-text span {
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.pool-entry-cta-btn {
    display: block;
    text-align: center;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    background: var(--color-primary);
    color: #fff;
    transition: background var(--transition-fast);
}

.pool-entry-cta-btn:hover {
    background: var(--color-primary-light);
}

.pool-entry-secondary-btn {
    display: block;
    text-align: center;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    transition: all var(--transition-fast);
    margin-top: auto;
}

.pool-entry-secondary-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* ══════════════════════════════════════════════════════════════
   PRIVACY DISCLAIMER
══════════════════════════════════════════════════════════════ */
.pool-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: rgba(29, 158, 117, 0.06);
    border: 1px solid rgba(29, 158, 117, 0.18);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    font-size: 11.5px;
    color: var(--color-text-secondary);
    line-height: 1.55;
    margin-bottom: 16px;
}

.pool-disclaimer svg {
    color: var(--color-primary);
}

/* ══════════════════════════════════════════════════════════════
   TABS
══════════════════════════════════════════════════════════════ */
.pool-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 16px;
}

.pool-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    text-decoration: none;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.pool-tab:hover {
    color: var(--color-text-primary);
}

.pool-tab--active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.pool-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 5px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    background: rgba(29, 158, 117, 0.12);
    color: var(--color-primary);
}

/* ══════════════════════════════════════════════════════════════
   FILTERS
══════════════════════════════════════════════════════════════ */
.pool-filters {
    display: none;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 12px;
}

.pool-filters--open { display: flex; }

.filter-select {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    font-size: 12px;
    color: var(--color-text-secondary);
    outline: none;
    flex: 1;
    min-width: 120px;
    font-family: inherit;
}

.filter-apply-btn {
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.filter-clear-btn {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 7px 14px;
    font-size: 12px;
    color: var(--color-text-muted);
    cursor: pointer;
}

/* ── Count row ──────────────────────────────────────────────────── */
.pool-count-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

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

.pool-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    border-radius: var(--radius-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: 12px;
    cursor: pointer;
    position: relative;
}

.filter-dot {
    width: 7px;
    height: 7px;
    background: var(--color-primary);
    border-radius: 50%;
    position: absolute;
    top: 4px;
    inset-inline-end: 4px;
}

/* ══════════════════════════════════════════════════════════════
   EMPTY STATE
══════════════════════════════════════════════════════════════ */
.pool-empty {
    text-align: center;
    padding: 48px 16px;
    color: var(--color-text-muted);
}

.pool-empty i { font-size: 36px; display: block; margin-bottom: 10px; }
.pool-empty p { font-size: 13px; }

/* ══════════════════════════════════════════════════════════════
   GRID
══════════════════════════════════════════════════════════════ */
.pool-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 24px;
}

/* ══════════════════════════════════════════════════════════════
   CV CARD
══════════════════════════════════════════════════════════════ */
.cv-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 16px;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: box-shadow var(--transition-fast);
}

.cv-card:hover { box-shadow: var(--shadow-card-hover); }

.cv-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.cv-card__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.cv-card__level-badge {
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(29, 158, 117, 0.1);
    color: var(--color-primary);
    white-space: nowrap;
    flex-shrink: 0;
}

.cv-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    color: var(--color-text-muted);
}

.cv-card__meta span {
    display: flex;
    align-items: center;
    gap: 3px;
}

.cv-card__skills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.cv-skill {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 2px 9px;
    font-size: 11px;
    color: var(--color-text-secondary);
}

.cv-skill--more {
    background: transparent;
    border-color: transparent;
    color: var(--color-text-muted);
    font-style: italic;
}

.cv-card__summary {
    font-size: 12px;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Card footer — updated + send button in one row ─────────────── */
.cv-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 2px;
}

.cv-card__updated {
    font-size: 11px;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.cv-card__send-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1.5px solid var(--color-primary);
    color: var(--color-primary);
    border-radius: var(--radius-md);
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.cv-card__send-btn:hover {
    background: var(--color-primary);
    color: #fff;
}

/* ══════════════════════════════════════════════════════════════
   PAGINATION
══════════════════════════════════════════════════════════════ */
.pool-pagination {
    display: flex;
    gap: 4px;
    justify-content: center;
    flex-wrap: wrap;
}

.page-btn {
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: all var(--transition-fast);
}

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

.page-btn--disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   MODAL — unchanged logic, same styles
══════════════════════════════════════════════════════════════ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 1000;
}

.modal-box {
    background: var(--color-surface);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 20px;
    width: 100%;
    max-width: 480px;
    max-height: 80vh;
    overflow-y: auto;
}

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

.modal-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.modal-close {
    background: none;
    border: none;
    font-size: 20px;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

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

.modal-loading { text-align: center; color: var(--color-text-muted); padding: 20px; font-size: 13px; }

.modal-no-listings { text-align: center; padding: 16px 0; }
.modal-no-listings p { font-size: 13px; color: var(--color-text-muted); margin-bottom: 10px; }

.modal-create-btn {
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    border-radius: var(--radius-md);
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.modal-listings {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
    max-height: 200px;
    overflow-y: auto;
}

.modal-listing-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

.modal-listing-option--selected {
    border-color: var(--color-primary);
    background: rgba(29, 158, 117, 0.05);
}

.modal-radio { accent-color: var(--color-primary); }

.modal-listing-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.modal-listing-company {
    font-size: 11px;
    color: var(--color-text-muted);
}

.modal-message {
    width: 100%;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 9px 12px;
    font-size: 13px;
    color: var(--color-text-primary);
    font-family: inherit;
    resize: none;
    outline: none;
    margin-bottom: 12px;
    box-sizing: border-box;
}

.modal-send-btn {
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    padding: 10px;
    width: 100%;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.modal-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.modal-success {
    text-align: center;
    padding: 20px 0;
}

.modal-success i { font-size: 36px; color: var(--color-primary); display: block; margin-bottom: 10px; }
.modal-success p { font-size: 14px; color: var(--color-text-secondary); margin-bottom: 16px; }

.modal-done-btn {
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    padding: 10px 28px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.modal-enter-active, .modal-leave-active { transition: opacity 0.2s; }
.modal-enter-from, .modal-leave-to { opacity: 0; }

/* ══════════════════════════════════════════════════════════════
   DESKTOP
══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
    .pool-page { padding: 24px 32px 60px; }
    .pool-filters { display: flex; }
    .desktop-hide { display: none; }
    .pool-grid { grid-template-columns: 1fr 1fr; }
    .modal-overlay { align-items: center; }
    .modal-box {
        border-radius: var(--radius-lg);
        max-height: 70vh;
    }
}
</style>