<script setup>
import { ref, reactive, computed } from 'vue'
import { Head, Link, router }      from '@inertiajs/vue3'
import AppLayout                   from '@/Layouts/AppLayout.vue'
import { useAuthStore }            from '@/Stores/useAuthStore'

const props = defineProps({
    mySurveys:   { type: Array, default: () => [] },
    openSurveys: { type: Array, default: () => [] },
})

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

const localMySurveys = ref(props.mySurveys.map(s => ({ ...s })))
const copiedToken    = ref(null)
const toastVisible   = ref(false)
const deleteModal    = reactive({ show: false, survey: null })

// ── Helpers ───────────────────────────────────────────────────────
const surveyPublicUrl = (token) => `${window.location.origin}/s/${token}`

const formatDate = (d) => {
    if (!d) return ''
    return new Date(d).toLocaleDateString(ar.value ? 'ar-EG' : 'en-GB', {
        day: '2-digit', month: 'short', year: 'numeric',
    })
}

const statusLabel = (s) => {
    const map = {
        draft:  ar.value ? 'مسودة' : 'Draft',
        active: ar.value ? 'نشط'   : 'Active',
        closed: ar.value ? 'مغلق'  : 'Closed',
    }
    return map[s] ?? s
}

// ── Copy link ─────────────────────────────────────────────────────
const copyLink = (token) => {
    const url = surveyPublicUrl(token)
    if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard.writeText(url).then(() => showCopied(token))
    } else {
        const el = document.createElement('textarea')
        el.value = url
        el.style.position = 'fixed'
        el.style.opacity  = '0'
        document.body.appendChild(el)
        el.focus(); el.select()
        try { document.execCommand('copy'); showCopied(token) } catch {}
        document.body.removeChild(el)
    }
}

const showCopied = (token) => {
    copiedToken.value  = token
    toastVisible.value = true
    setTimeout(() => { copiedToken.value = null; toastVisible.value = false }, 2500)
}

const getCsrf = () => decodeURIComponent(
    document.cookie.split(';').find(c => c.trim().startsWith('XSRF-TOKEN='))?.split('=')[1] ?? ''
)

// ── Publish ───────────────────────────────────────────────────────
const publishSurvey = async (survey) => {
    const res  = await fetch(`/app/surveys/${survey.id}/publish`, {
        method: 'PATCH',
        headers: { 'X-XSRF-TOKEN': getCsrf(), 'Content-Type': 'application/json', Accept: 'application/json' },
        credentials: 'include',
    })
    const data = await res.json()
    if (data.success) {
        const idx = localMySurveys.value.findIndex(s => s.id === survey.id)
        if (idx > -1) {
            localMySurveys.value[idx].link_token = data.token
            localMySurveys.value[idx].status     = 'active'
        }
        copyLink(data.token)
    }
}

// ── Toggle status ─────────────────────────────────────────────────
const toggleStatus = async (survey) => {
    const res  = await fetch(`/app/surveys/${survey.id}/toggle-status`, {
        method: 'PATCH',
        headers: { 'X-XSRF-TOKEN': getCsrf(), 'Content-Type': 'application/json', Accept: 'application/json' },
        credentials: 'include',
    })
    const data = await res.json()
    if (data.success) {
        const idx = localMySurveys.value.findIndex(s => s.id === survey.id)
        if (idx > -1) localMySurveys.value[idx].status = data.status
    }
}

// ── Delete ────────────────────────────────────────────────────────
const confirmDelete = (survey) => { deleteModal.survey = survey; deleteModal.show = true }
const executeDelete = () => {
    router.delete(route('member.surveys.destroy', deleteModal.survey.id), {
        onSuccess: () => {
            localMySurveys.value = localMySurveys.value.filter(s => s.id !== deleteModal.survey.id)
        },
    })
    deleteModal.show = false
}
</script>

<template>
    <Head :title="ar ? 'الاستبيانات' : 'Surveys'" />

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

            <!-- ══════════════════════════════════════════════════
                 HERO BANNER
            ═══════════════════════════════════════════════════════ -->
            <div class="surveys-hero">
                <div class="surveys-hero__left">
                    <div class="surveys-hero__icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
                        </svg>
                    </div>
                    <div>
                        <h1 class="surveys-hero__title">
                            {{ ar ? 'الاستبيانات' : 'Surveys' }}
                        </h1>
                        <p class="surveys-hero__sub">
                            {{ ar
                                ? 'أنشئ استبياناً أو شارك في استبيانات الأعضاء'
                                : 'Create a survey or respond to member surveys' }}
                        </p>
                    </div>
                </div>
                <Link :href="route('member.surveys.create')" class="surveys-new-btn">
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                        <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
                    </svg>
                    {{ ar ? 'استبيان جديد' : 'New Survey' }}
                </Link>
            </div>

            <!-- Flash message -->
            <div v-if="$page.props.flash?.success" class="surveys-flash">
                <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">
                    <polyline points="20 6 9 17 4 12"/>
                </svg>
                {{ $page.props.flash.success }}
            </div>

            <!-- ══════════════════════════════════════════════════
                 COPY TOAST
            ═══════════════════════════════════════════════════════ -->
            <Teleport to="body">
                <Transition name="toast">
                    <div v-if="toastVisible" class="surveys-toast">
                        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                            <polyline points="20 6 9 17 4 12"/>
                        </svg>
                        {{ ar ? 'تم نسخ رابط الاستبيان!' : 'Survey link copied to clipboard!' }}
                    </div>
                </Transition>
            </Teleport>

            <!-- ══════════════════════════════════════════════════
                 MY SURVEYS
            ═══════════════════════════════════════════════════════ -->
            <section class="surveys-section">
                <div class="surveys-section__head">
                    <div class="surveys-section__heading">
                        <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">
                            <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>
                        <h2 class="surveys-section__title">{{ ar ? 'استبياناتي' : 'My Surveys' }}</h2>
                        <span class="surveys-section__count">{{ localMySurveys.length }}</span>
                    </div>
                </div>

                <!-- Empty -->
                <div v-if="localMySurveys.length === 0" class="surveys-empty">
                    <div class="surveys-empty__icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
                        </svg>
                    </div>
                    <p class="surveys-empty__title">{{ ar ? 'لم تنشئ أي استبيانات بعد' : 'No surveys yet' }}</p>
                    <p class="surveys-empty__sub">
                        {{ ar
                            ? 'أنشئ استبيانك الأول وشاركه مع الأعضاء أو أي شخص آخر عبر رابط'
                            : 'Create your first survey and share it with members or anyone via link' }}
                    </p>
                    <Link :href="route('member.surveys.create')" class="surveys-empty__cta">
                        {{ ar ? 'إنشاء استبيان' : 'Create Survey' }}
                    </Link>
                </div>

                <!-- Cards grid -->
                <div v-else class="surveys-grid">
                    <div v-for="survey in localMySurveys"
                         :key="survey.id"
                         class="survey-card">

                        <!-- Status band -->
                        <div class="survey-card__band"
                             :class="`survey-card__band--${survey.status}`"></div>

                        <div class="survey-card__body">

                            <!-- Top: status + date -->
                            <div class="survey-card__top">
                                <span class="survey-card__status"
                                      :class="`survey-card__status--${survey.status}`">
                                    <span class="survey-card__status-dot"></span>
                                    {{ statusLabel(survey.status) }}
                                </span>
                                <span class="survey-card__date">{{ formatDate(survey.created_at) }}</span>
                            </div>

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

                            <!-- Stats -->
                            <div class="survey-card__stats">
                                <span class="survey-card__stat">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/>
                                    </svg>
                                    {{ survey.question_count }} {{ ar ? 'سؤال' : 'questions' }}
                                </span>
                                <span class="survey-card__stat">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" 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"/><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>
                                    {{ survey.response_count }} {{ ar ? 'إجابة' : 'responses' }}
                                </span>
                            </div>

                            <!-- Link bar -->
                            <div v-if="survey.link_token" class="survey-card__link-bar">
                                <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0; color:var(--color-primary)">
                                    <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
                                </svg>
                                <span class="survey-card__link-url">{{ surveyPublicUrl(survey.link_token) }}</span>
                                <button @click="copyLink(survey.link_token)"
                                        class="survey-card__copy-btn"
                                        :class="{ 'survey-card__copy-btn--copied': copiedToken === survey.link_token }">
                                    {{ copiedToken === survey.link_token
                                        ? (ar ? '✓ تم' : '✓ Copied')
                                        : (ar ? 'نسخ' : 'Copy') }}
                                </button>
                            </div>

                            <!-- Divider -->
                            <div class="survey-card__divider"></div>

                            <!-- Actions -->
                            <div class="survey-card__actions">

                                <!-- Publish -->
                                <button v-if="!survey.link_token"
                                        @click="publishSurvey(survey)"
                                        class="s-btn s-btn--primary">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                                        <line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>
                                    </svg>
                                    {{ ar ? 'نشر وإنشاء رابط' : 'Publish & Get Link' }}
                                </button>

                                <!-- Toggle active/closed -->
                                <button v-else
                                        @click="toggleStatus(survey)"
                                        class="s-btn"
                                        :class="survey.status === 'active' ? 's-btn--danger' : 's-btn--success'">
                                    <svg v-if="survey.status === 'active'" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                                        <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>
                                    </svg>
                                    <svg v-else xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                                        <polygon points="5 3 19 12 5 21 5 3"/>
                                    </svg>
                                    {{ survey.status === 'active'
                                        ? (ar ? 'إغلاق' : 'Close')
                                        : (ar ? 'إعادة فتح' : 'Reopen') }}
                                </button>

                                <!-- Results -->
                                <Link v-if="survey.response_count > 0"
                                      :href="route('member.surveys.results', survey.id)"
                                      class="s-btn s-btn--info">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/>
                                    </svg>
                                    {{ ar ? 'النتائج' : 'Results' }}
                                </Link>

                                <!-- Edit -->
                                <Link :href="route('member.surveys.edit', survey.id)"
                                      class="s-btn s-btn--ghost">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
                                    </svg>
                                    {{ ar ? 'تعديل' : 'Edit' }}
                                </Link>

                                <!-- Delete -->
                                <button @click="confirmDelete(survey)"
                                        class="s-btn s-btn--delete">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/>
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- ══════════════════════════════════════════════════
                 MEMBER SURVEYS
            ═══════════════════════════════════════════════════════ -->
            <section v-if="openSurveys.length > 0" class="surveys-section">
                <div class="surveys-section__head">
                    <div class="surveys-section__heading">
                        <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">
                            <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>
                        <h2 class="surveys-section__title">{{ ar ? 'استبيانات الأعضاء' : 'Member Surveys' }}</h2>
                        <span class="surveys-section__count">{{ openSurveys.length }}</span>
                    </div>
                    <p class="surveys-section__note">
                        {{ ar ? 'استبيانات مفتوحة من أعضاء آخرين — شاركهم رأيك' : 'Open surveys from other members — share your opinion' }}
                    </p>
                </div>

                <div class="surveys-grid">
                    <div v-for="survey in openSurveys"
                         :key="survey.id"
                         class="survey-card survey-card--open">

                        <div class="survey-card__band survey-card__band--active"></div>

                        <div class="survey-card__body">
                            <div class="survey-card__top">
                                <span class="survey-card__status survey-card__status--active">
                                    <span class="survey-card__status-dot"></span>
                                    {{ ar ? 'مفتوح' : 'Open' }}
                                </span>
                                <span class="survey-card__date">{{ formatDate(survey.created_at) }}</span>
                            </div>

                            <h3 class="survey-card__title">
                                {{ ar && survey.title_ar ? survey.title_ar : survey.title_en }}
                            </h3>

                            <div class="survey-card__stats">
                                <span class="survey-card__stat">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/>
                                    </svg>
                                    {{ survey.question_count }} {{ ar ? 'سؤال' : 'questions' }}
                                </span>
                                <span class="survey-card__stat">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" 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"/><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>
                                    {{ survey.response_count }} {{ ar ? 'إجابة' : 'responses' }}
                                </span>
                            </div>

                            <div class="survey-card__divider"></div>

                            <div class="survey-card__actions">
                                <Link :href="route('member.surveys.show', survey.id)"
                                      class="s-btn s-btn--primary s-btn--full">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                                        <line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/>
                                    </svg>
                                    {{ ar ? 'شارك بالإجابة' : 'Take Survey' }}
                                </Link>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

        </div><!-- /surveys-page -->

        <!-- ══════════════════════════════════════════════════════
             DELETE MODAL
        ═══════════════════════════════════════════════════════════ -->
        <Teleport to="body">
            <Transition name="modal">
                <div v-if="deleteModal.show"
                     class="modal-overlay"
                     @click.self="deleteModal.show = false">
                    <div class="modal-box">

                        <!-- Icon -->
                        <div class="modal-icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/>
                            </svg>
                        </div>

                        <h3 class="modal-title">{{ ar ? 'حذف الاستبيان' : 'Delete Survey' }}</h3>

                        <p class="modal-sub">{{ ar ? 'سيتم حذف هذا الاستبيان نهائياً' : 'This will permanently delete' }}</p>

                        <p class="modal-survey-name">
                            {{ ar && deleteModal.survey?.title_ar ? deleteModal.survey.title_ar : deleteModal.survey?.title_en }}
                        </p>

                        <p class="modal-warning">
                            {{ deleteModal.survey?.response_count }}
                            {{ ar ? 'إجابة ستُحذف أيضاً.' : 'responses will also be deleted.' }}
                        </p>

                        <div class="modal-actions">
                            <button @click="deleteModal.show = false" class="modal-cancel-btn">
                                {{ ar ? 'إلغاء' : 'Cancel' }}
                            </button>
                            <button @click="executeDelete" class="modal-delete-btn">
                                {{ ar ? 'حذف' : 'Delete' }}
                            </button>
                        </div>
                    </div>
                </div>
            </Transition>
        </Teleport>

    </AppLayout>
</template>

<style scoped>
.surveys-page {
    padding: 16px 16px 100px;
    max-width: 1250px;
    margin: 0 auto;
}

/* ══════════════════════════════════════════════════════════════
   HERO BANNER
══════════════════════════════════════════════════════════════ */
.surveys-hero {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    border-top: 3px solid var(--color-primary);
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-card);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.surveys-hero__left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.surveys-hero__icon {
    width: 48px;
    height: 48px;
    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;
}

.surveys-hero__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 4px;
    line-height: 1.3;
}

.surveys-hero__sub {
    font-size: 12px;
    color: var(--color-text-muted);
    margin: 0;
}

.surveys-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--color-primary);
    color: #fff;
    border-radius: var(--radius-md);
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
    white-space: nowrap;
    flex-shrink: 0;
}

.surveys-new-btn:hover {
    background: var(--color-primary-light);
    box-shadow: 0 4px 14px rgba(29, 158, 117, 0.3);
}

/* ── Flash ──────────────────────────────────────────────────────── */
.surveys-flash {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(29, 158, 117, 0.08);
    border: 1px solid rgba(29, 158, 117, 0.25);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    font-size: 13px;
    color: var(--color-primary);
    font-weight: 500;
    margin-bottom: 16px;
}

/* ── Toast ──────────────────────────────────────────────────────── */
.surveys-toast {
    position: fixed;
    bottom: 90px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    background: var(--color-surface);
    border: 1px solid rgba(29, 158, 117, 0.4);
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 30px;
    box-shadow: var(--shadow-float);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 7px;
}

.toast-enter-active, .toast-leave-active { transition: opacity 0.2s, transform 0.2s; }
.toast-enter-from  { opacity: 0; transform: translateX(-50%) translateY(10px); }
.toast-leave-to    { opacity: 0; transform: translateX(-50%) translateY(10px); }

/* ══════════════════════════════════════════════════════════════
   SECTIONS
══════════════════════════════════════════════════════════════ */
.surveys-section { margin-bottom: 32px; }

.surveys-section__head {
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.surveys-section__heading {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-primary);
}

.surveys-section__title {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-primary);
}

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

.surveys-section__note {
    font-size: 12px;
    color: var(--color-text-muted);
    margin: 0;
    padding-inline-start: 22px;
}

/* ══════════════════════════════════════════════════════════════
   EMPTY STATE
══════════════════════════════════════════════════════════════ */
.surveys-empty {
    background: var(--color-surface);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);
    padding: 48px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.surveys-empty__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(29, 158, 117, 0.08);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.surveys-empty__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.surveys-empty__sub {
    font-size: 12px;
    color: var(--color-text-muted);
    max-width: 340px;
    line-height: 1.6;
    margin: 0;
}

.surveys-empty__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-primary);
    color: #fff;
    border-radius: var(--radius-md);
    padding: 10px 22px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    margin-top: 6px;
    transition: background var(--transition-fast);
}

.surveys-empty__cta:hover { background: var(--color-primary-light); }

/* ══════════════════════════════════════════════════════════════
   GRID
══════════════════════════════════════════════════════════════ */
.surveys-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 640px) {
    .surveys-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .surveys-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ══════════════════════════════════════════════════════════════
   SURVEY CARD
══════════════════════════════════════════════════════════════ */
.survey-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
    display: flex;
    flex-direction: column;
}

.survey-card:hover {
    box-shadow: var(--shadow-card-hover);
    border-color: rgba(29, 158, 117, 0.3);
}

/* Status band */
.survey-card__band { height: 3px; width: 100%; flex-shrink: 0; }

.survey-card__band--draft  { background: var(--color-border); }
.survey-card__band--active { background: linear-gradient(90deg, var(--color-primary), #2ec48a); }
.survey-card__band--closed { background: linear-gradient(90deg, #dc3545, #e87050); }

.survey-card__body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

/* Top: status + date */
.survey-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.survey-card__status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.survey-card__status-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
}

.survey-card__status--draft  { background: var(--color-bg); color: var(--color-text-muted); }
.survey-card__status--active { background: rgba(29,158,117,0.12); color: var(--color-primary); }
.survey-card__status--closed { background: rgba(220,53,69,0.1);  color: #dc3545; }

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

/* Title */
.survey-card__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.45;
    margin: 0;
}

/* Stats */
.survey-card__stats {
    display: flex;
    gap: 14px;
}

.survey-card__stat {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--color-text-muted);
}

.survey-card__stat svg { color: var(--color-primary); flex-shrink: 0; }

/* Link bar */
.survey-card__link-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 6px 8px;
}

.survey-card__link-url {
    font-size: 10px;
    font-family: monospace;
    color: var(--color-text-muted);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.survey-card__copy-btn {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: background var(--transition-fast);
    background: var(--color-primary);
    color: #fff;
    font-family: inherit;
}

.survey-card__copy-btn--copied { background: #28a745; }

/* Divider */
.survey-card__divider {
    height: 1px;
    background: var(--color-border);
    margin: 2px 0;
}

/* Actions */
.survey-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
}

/* ══════════════════════════════════════════════════════════════
   ACTION BUTTONS
══════════════════════════════════════════════════════════════ */
.s-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: var(--radius-md);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    border: 1.5px solid transparent;
    transition: all var(--transition-fast);
    background: transparent;
    font-family: inherit;
    white-space: nowrap;
}

.s-btn--full { width: 100%; justify-content: center; }

.s-btn--primary {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}
.s-btn--primary:hover { background: var(--color-primary-light); border-color: var(--color-primary-light); }

.s-btn--success {
    background: rgba(29,158,117,0.1);
    color: var(--color-primary);
    border-color: rgba(29,158,117,0.3);
}
.s-btn--success:hover { background: var(--color-primary); color: #fff; }

.s-btn--danger {
    background: rgba(220,53,69,0.08);
    color: #dc3545;
    border-color: rgba(220,53,69,0.3);
}
.s-btn--danger:hover { background: #dc3545; color: #fff; }

.s-btn--info {
    background: rgba(55,138,221,0.08);
    color: #378add;
    border-color: rgba(55,138,221,0.3);
}
.s-btn--info:hover { background: #378add; color: #fff; }

.s-btn--ghost {
    background: transparent;
    color: var(--color-text-secondary);
    border-color: var(--color-border);
}
.s-btn--ghost:hover { border-color: var(--color-primary); color: var(--color-primary); }

.s-btn--delete {
    background: transparent;
    color: var(--color-text-muted);
    border-color: var(--color-border);
    padding: 6px 9px;
}
.s-btn--delete:hover { background: rgba(220,53,69,0.08); color: #dc3545; border-color: rgba(220,53,69,0.3); }

/* ══════════════════════════════════════════════════════════════
   DELETE MODAL
══════════════════════════════════════════════════════════════ */
.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: 24px 20px;
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.modal-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(220,53,69,0.1);
    color: #dc3545;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

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

.modal-sub {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin: 0;
}

.modal-survey-name {
    font-size: 13px;
    font-weight: 600;
    color: #dc3545;
    margin: 0;
}

.modal-warning {
    font-size: 11px;
    color: var(--color-text-muted);
    margin: 0 0 8px;
}

.modal-actions {
    display: flex;
    gap: 10px;
    width: 100%;
    margin-top: 4px;
}

.modal-cancel-btn, .modal-delete-btn {
    flex: 1;
    padding: 11px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-family: inherit;
    transition: all var(--transition-fast);
}

.modal-cancel-btn {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
}
.modal-cancel-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }

.modal-delete-btn {
    background: #dc3545;
    color: #fff;
}
.modal-delete-btn:hover { background: #c0392b; }

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

/* ══════════════════════════════════════════════════════════════
   DESKTOP
══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
    .surveys-page { padding: 24px 32px 60px; }
    .modal-overlay { align-items: center; }
    .modal-box { border-radius: var(--radius-lg); }
}
</style>