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

const auth = useAuthStore()
const locale = computed(() => auth.locale)
const t = (en, ar) => locale.value === 'ar' ? ar : en

const props = defineProps({
    profile:       { type: Object, required: true },
    reviews:       { type: Array,  default: () => [] },
    existingMatch: { type: Object, default: null },
    isOwner:       { type: Boolean, default: false },
})

// ── Send interest flow ────────────────────────────────────────
const showInterestForm  = ref(false)
const interestMessage   = ref('')
const interestSending   = ref(false)
const interestSent      = ref(!!props.existingMatch)
const matchId           = ref(props.existingMatch?.id ?? null)
const matchStatus       = ref(props.existingMatch?.status ?? null)

async function sendInterest() {
    if (!interestMessage.value.trim() || interestMessage.value.length < 20) return
    interestSending.value = true
    try {
        const res = await fetch(route('member.freelance.interest', props.profile.id), {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content },
            body: JSON.stringify({ message: interestMessage.value }),
        })
        const data = await res.json()
        matchId.value     = data.match_id
        matchStatus.value = data.status
        interestSent.value    = true
        showInterestForm.value = false
    } finally {
        interestSending.value = false
    }
}

// ── Consent gate ──────────────────────────────────────────────
const showConsentGate = ref(false)
const consentLoading  = ref(false)
const connected       = ref(matchStatus.value === 'connected')
const contactInfo     = ref(null)

async function confirmConsent() {
    consentLoading.value = true
    try {
        const res = await fetch(route('member.freelance.consent', matchId.value), {
            method: 'PATCH',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content },
        })
        const data = await res.json()
        matchStatus.value     = data.status
        connected.value       = data.contact_shared
        contactInfo.value     = data.contact
        showConsentGate.value = false
    } finally {
        consentLoading.value = false
    }
}

// ── Hub color helper ──────────────────────────────────────────
const hubColors = { finance: '#1D9E75', marketing: '#378ADD', sales: '#D85A30' }
function hubColor(slug) { return hubColors[slug] ?? 'var(--color-primary)' }

// ── Service tags display ──────────────────────────────────────
const safeServices = computed(() => Array.isArray(props.profile.services) ? props.profile.services : [])

// ── Availability label ────────────────────────────────────────
function availLabel(val) {
    const map = {
        weekends:    t('Weekends', 'الإجازات'),
        evenings:    t('Evenings', 'المساءات'),
        full:        t('Fully Available', 'متفرغ كامل'),
        unavailable: t('Unavailable', 'غير متاح'),
    }
    return map[val] ?? val
}

// ── Experience label ──────────────────────────────────────────
function expLabel(val) {
    const map = {
        student: t('Student', 'طالب'),
        fresh:   t('Fresh Graduate', 'خريج جديد'),
        junior:  t('Junior', 'مبتدئ'),
        mid:     t('Mid-Level', 'متوسط'),
        senior:  t('Senior', 'خبير'),
    }
    return map[val] ?? val
}
</script>

<template>
    <AppLayout>
        <div class="ps-page">

            <!-- Back -->
            <Link :href="route('member.freelance.index')" class="ps-back">
                ← {{ t('Help & Earn', 'المساعدة والكسب') }}
            </Link>

            <div class="ps-layout">

                <!-- ── Left / Main ──────────────────────── -->
                <div class="ps-main">

                    <!-- Profile header card -->
                    <div class="ps-header-card">
                        <div
                            class="ps-hub-stripe"
                            :style="{ background: hubColor(profile.hub?.slug) }"
                        ></div>
                        <div class="ps-header-body">
                            <div class="ps-head-row">
                                <!-- Avatar -->
                                <div
                                    class="ps-avatar"
                                    :style="{
                                        background: hubColor(profile.hub?.slug) + '33',
                                        color: hubColor(profile.hub?.slug)
                                    }"
                                >
                                    {{ profile.user?.nickname?.charAt(0).toUpperCase() }}
                                </div>
                                <div class="ps-head-info">
                                    <h1 class="ps-nickname">{{ profile.user?.nickname }}</h1>
                                    <p class="ps-headline">{{ profile.headline }}</p>
                                    <div class="ps-badges">
                                        <span class="ps-badge ps-badge--hub"
                                            :style="{ color: hubColor(profile.hub?.slug), borderColor: hubColor(profile.hub?.slug) + '55' }">
                                            {{ locale === 'ar' ? profile.hub?.name_ar : profile.hub?.name_en }}
                                        </span>
                                        <span class="ps-badge">{{ expLabel(profile.experience_level) }}</span>
                                        <span class="ps-badge">{{ availLabel(profile.availability) }}</span>
                                    </div>
                                </div>
                                <!-- LinkedIn badge -->
                                <a
                                    v-if="profile.linkedin_url"
                                    :href="route('member.share.external') + '?url=' + encodeURIComponent(profile.linkedin_url)"
                                    target="_blank"
                                    class="ps-linkedin"
                                    :title="t('View LinkedIn profile', 'عرض ملف LinkedIn')"
                                >
                                    <span class="ps-linkedin-icon">in</span>
                                    {{ t('LinkedIn', 'LinkedIn') }}
                                </a>
                            </div>

                            <!-- Rating summary -->
                            <div v-if="profile.review_count > 0" class="ps-rating-row">
                                <span class="ps-stars">
                                    <span
                                        v-for="n in 5"
                                        :key="n"
                                        :class="n <= Math.round(profile.rating_average) ? 'ps-star--filled' : 'ps-star--empty'"
                                    >★</span>
                                </span>
                                <span class="ps-rating-num">{{ profile.rating_average }}</span>
                                <span class="ps-rating-count">
                                    {{ profile.review_count }} {{ t('reviews', 'تقييم') }}
                                </span>
                            </div>
                            <p v-else class="ps-no-reviews">
                                {{ t('No reviews yet — be the first to work with them', 'لا تقييمات بعد — كن أول من يتعاون معهم') }}
                            </p>

                            <!-- Rate range -->
                            <p v-if="profile.rate_range" class="ps-rate">
                                💰 {{ profile.rate_range }}
                            </p>
                        </div>
                    </div>

                    <!-- About -->
                    <div class="ps-section">
                        <h2 class="ps-section-title">{{ t('About', 'نبذة') }}</h2>
                        <p class="ps-description">{{ profile.description }}</p>
                    </div>

                    <!-- Services -->
                    <div class="ps-section">
                        <h2 class="ps-section-title">{{ t('Services Offered', 'الخدمات المقدمة') }}</h2>
                        <div class="ps-services">
                            <span
                                v-for="(service, i) in safeServices"
                                :key="i"
                                class="ps-service-tag"
                                :style="{ borderColor: hubColor(profile.hub?.slug) + '55',
                                          color: hubColor(profile.hub?.slug) }"
                            >{{ service }}</span>
                        </div>
                    </div>

                    <!-- Reviews -->
                    <div class="ps-section">
                        <h2 class="ps-section-title">
                            {{ t('Reviews', 'التقييمات') }}
                            <span class="ps-reviews-count">({{ reviews.length }})</span>
                        </h2>

                        <div v-if="reviews.length" class="ps-reviews">
                            <div v-for="review in reviews" :key="review.id" class="ps-review-card">
                                <div class="ps-review-head">
                                    <span class="ps-review-stars">
                                        <span
                                            v-for="n in 5"
                                            :key="n"
                                            :class="n <= review.rating ? 'ps-star--filled' : 'ps-star--empty'"
                                        >★</span>
                                    </span>
                                    <span class="ps-review-author">{{ review.author }}</span>
                                    <span class="ps-review-time">{{ review.created_at }}</span>
                                </div>
                                <p v-if="review.comment" class="ps-review-comment">{{ review.comment }}</p>
                            </div>
                        </div>
                        <p v-else class="ps-no-reviews">
                            {{ t('No reviews yet.', 'لا تقييمات بعد.') }}
                        </p>
                    </div>

                </div><!-- end ps-main -->

                <!-- ── Right / Sidebar ──────────────────── -->
                <div class="ps-sidebar">

                    <!-- Owner actions -->
                    <div v-if="isOwner" class="ps-sidebar-card">
                        <p class="ps-sidebar-title">{{ t('Your Profile', 'ملفك الشخصي') }}</p>
                        <Link :href="route('member.freelance.profile.edit')" class="ps-sidebar-btn ps-sidebar-btn--primary">
                            {{ t('Edit Profile', 'تعديل الملف') }}
                        </Link>
                        <Link :href="route('member.freelance.my-matches')" class="ps-sidebar-btn">
                            {{ t('My Matches', 'طلباتي') }}
                        </Link>
                    </div>

                    <!-- Interest action — not owner -->
                    <div v-else class="ps-sidebar-card">

                        <!-- Already connected -->
                        <div v-if="connected && contactInfo" class="ps-connected">
                            <p class="ps-connected-title">🎉 {{ t('Connected!', 'تم التواصل!') }}</p>
                            <p class="ps-connected-sub">{{ t('Contact information has been shared.', 'تم مشاركة معلومات الاتصال.') }}</p>
                            <div class="ps-contact-info">
                                <p><strong>{{ t('Name', 'الاسم') }}:</strong> {{ contactInfo.name }}</p>
                                <p><strong>{{ t('Email', 'البريد') }}:</strong> {{ contactInfo.email }}</p>
                                <p v-if="contactInfo.phone"><strong>{{ t('Phone', 'الهاتف') }}:</strong> {{ contactInfo.phone }}</p>
                            </div>
                        </div>

                        <!-- Interest sent — waiting for response -->
                        <div v-else-if="interestSent && matchStatus === 'pending'" class="ps-pending">
                            <p class="ps-pending-icon">⏳</p>
                            <p class="ps-pending-text">{{ t('Interest sent — waiting for their response', 'تم إرسال الاهتمام — في انتظار ردهم') }}</p>
                        </div>

                        <!-- Freelancer responded — consent needed -->
                        <div v-else-if="matchStatus === 'interested'" class="ps-consent-needed">
                            <p class="ps-consent-title">✅ {{ t('They are interested!', 'أبدوا اهتماماً!') }}</p>
                            <p class="ps-consent-sub">
                                {{ t('Both parties need to consent before contact is shared.', 'يحتاج الطرفان للموافقة قبل مشاركة معلومات الاتصال.') }}
                            </p>
                            <button class="ps-consent-btn" @click="showConsentGate = true">
                                {{ t('Share My Contact', 'مشاركة بياناتي') }}
                            </button>
                        </div>

                        <!-- Declined -->
                        <div v-else-if="matchStatus === 'declined'" class="ps-declined">
                            <p class="ps-declined-text">{{ t('This freelancer is not available for this engagement.', 'هذا المستقل غير متاح لهذا التعاون.') }}</p>
                        </div>

                        <!-- Default — send interest -->
                        <div v-else>
                            <p class="ps-sidebar-title">{{ t('Work with them', 'التعاون معهم') }}</p>
                            <p class="ps-sidebar-sub">
                                {{ t(
                                    'Send them a message describing what you need. They will review your brief and decide.',
                                    'أرسل لهم رسالة تصف ما تحتاجه. سيراجعون طلبك ويقررون.'
                                ) }}
                            </p>

                            <div v-if="!showInterestForm">
                                <button class="ps-interest-btn" @click="showInterestForm = true">
                                    {{ t('Send Interest', 'إرسال اهتمام') }}
                                </button>
                            </div>

                            <div v-else class="ps-interest-form">
                                <textarea
                                    v-model="interestMessage"
                                    class="ps-interest-input"
                                    rows="4"
                                    :placeholder="t(
                                        'Describe what you need — be specific about the work, timeline, and any context that helps them decide…',
                                        'صف ما تحتاجه — كن محدداً في العمل والجدول الزمني وأي سياق يساعدهم على اتخاذ القرار…'
                                    )"
                                    maxlength="500"
                                ></textarea>
                                <p class="ps-char-count">{{ interestMessage.length }}/500 ({{ t('min 20 chars', 'الحد الأدنى 20 حرفاً') }})</p>
                                <div class="ps-interest-actions">
                                    <button class="ps-cancel-btn" @click="showInterestForm = false">
                                        {{ t('Cancel', 'إلغاء') }}
                                    </button>
                                    <button
                                        class="ps-send-btn"
                                        :disabled="interestMessage.length < 20 || interestSending"
                                        @click="sendInterest"
                                    >
                                        {{ interestSending ? t('Sending…', 'جارٍ الإرسال…') : t('Send', 'إرسال') }}
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- Disclaimer -->
                        <p class="ps-disclaimer">
                            {{ t(
                                'InPractice is not responsible for fees, payment, or quality of work. All arrangements are between you and the other party.',
                                'InPractice غير مسؤول عن الأتعاب أو الدفع أو جودة العمل. جميع الترتيبات بينك وبين الطرف الآخر.'
                            ) }}
                        </p>
                    </div>

                </div><!-- end ps-sidebar -->

            </div><!-- end ps-layout -->

        </div><!-- end ps-page -->

        <!-- ── Consent Gate Modal ─────────────────────── -->
        <Teleport to="body">
            <div v-if="showConsentGate" class="cg-overlay" @click.self="showConsentGate = false">
                <div class="cg-modal">
                    <div class="cg-icon">🔓</div>
                    <h2 class="cg-title">{{ t('Share Your Contact Information', 'مشاركة معلومات الاتصال') }}</h2>
                    <p class="cg-body">
                        {{ t(
                            'You are about to share your name, email, and phone number with this member. This action cannot be undone. Your contact information will be visible to them permanently.',
                            'أنت على وشك مشاركة اسمك وبريدك الإلكتروني ورقم هاتفك مع هذا العضو. لا يمكن التراجع عن هذا الإجراء. ستكون معلومات الاتصال الخاصة بك مرئية لهم بشكل دائم.'
                        ) }}
                    </p>
                    <p class="cg-disclaimer">
                        {{ t(
                            'InPractice is not responsible for fees, payment, or quality of work. All arrangements are between you and the other party.',
                            'InPractice غير مسؤول عن الأتعاب أو الدفع أو جودة العمل. جميع الترتيبات بينك وبين الطرف الآخر.'
                        ) }}
                    </p>
                    <div class="cg-actions">
                        <button class="cg-cancel" @click="showConsentGate = false">
                            {{ t('Cancel', 'إلغاء') }}
                        </button>
                        <button
                            class="cg-confirm"
                            :disabled="consentLoading"
                            @click="confirmConsent"
                        >
                            {{ consentLoading
                                ? t('Processing…', 'جارٍ المعالجة…')
                                : t('Confirm & Connect', 'تأكيد والتواصل') }}
                        </button>
                    </div>
                </div>
            </div>
        </Teleport>

    </AppLayout>
</template>

<style scoped>
.ps-page { padding: 16px; }
.ps-back { font-size: 13px; color: var(--color-primary); text-decoration: none; display: inline-block; margin-bottom: 16px; }

/* ── Layout ─────────────────────────────────────── */
.ps-layout { display: flex; flex-direction: column; gap: 16px; }

/* ── Header card ────────────────────────────────── */
.ps-header-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    overflow: hidden;
}
.ps-hub-stripe { height: 5px; }
.ps-header-body { padding: 16px; }
.ps-head-row { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; flex-wrap: wrap; }
.ps-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
    flex-shrink: 0;
}
.ps-head-info { flex: 1; min-width: 0; }
.ps-nickname  { font-size: 18px; font-weight: 800; color: var(--color-text); margin: 0 0 2px; }
.ps-headline  { font-size: 13px; color: var(--color-text-muted); margin: 0 0 8px; }
.ps-badges    { display: flex; gap: 6px; flex-wrap: wrap; }
.ps-badge {
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
}
.ps-badge--hub { font-weight: 700; }

/* LinkedIn */
.ps-linkedin {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #0077B5;
    color: #fff;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    flex-shrink: 0;
    height: fit-content;
}
.ps-linkedin-icon { font-style: italic; font-weight: 900; }

/* Rating */
.ps-rating-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.ps-stars      { letter-spacing: 1px; font-size: 16px; }
.ps-star--filled { color: #f59e0b; }
.ps-star--empty  { color: var(--color-border); }
.ps-rating-num   { font-size: 15px; font-weight: 700; color: var(--color-text); }
.ps-rating-count { font-size: 12px; color: var(--color-text-muted); }
.ps-no-reviews   { font-size: 12px; color: var(--color-text-muted); margin: 0 0 8px; }
.ps-rate         { font-size: 14px; font-weight: 600; color: var(--color-text); margin: 4px 0 0; }

/* ── Sections ───────────────────────────────────── */
.ps-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 16px;
}
.ps-section-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--color-text);
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ps-reviews-count { font-size: 13px; font-weight: 400; color: var(--color-text-muted); }
.ps-description   { font-size: 13px; color: var(--color-text); line-height: 1.7; margin: 0; }

/* ── Services tags ──────────────────────────────── */
.ps-services    { display: flex; gap: 8px; flex-wrap: wrap; }
.ps-service-tag {
    padding: 5px 12px;
    border-radius: 8px;
    border: 1px solid;
    font-size: 12px;
    font-weight: 600;
    background: transparent;
}

/* ── Reviews ────────────────────────────────────── */
.ps-reviews { display: flex; flex-direction: column; gap: 12px; }
.ps-review-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 12px;
}
.ps-review-head    { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.ps-review-stars   { letter-spacing: 1px; }
.ps-review-author  { font-size: 13px; font-weight: 700; color: var(--color-text); }
.ps-review-time    { font-size: 11px; color: var(--color-text-muted); margin-inline-start: auto; }
.ps-review-comment { font-size: 13px; color: var(--color-text-muted); margin: 0; line-height: 1.6; }

/* ── Sidebar card ───────────────────────────────── */
.ps-sidebar-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 16px;
}
.ps-sidebar-title { font-size: 15px; font-weight: 700; color: var(--color-text); margin: 0 0 8px; }
.ps-sidebar-sub   { font-size: 12px; color: var(--color-text-muted); margin: 0 0 14px; line-height: 1.6; }
.ps-sidebar-btn {
    display: block;
    padding: 10px 16px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    text-decoration: none;
    text-align: center;
    margin-bottom: 8px;
}
.ps-sidebar-btn--primary {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* Interest */
.ps-interest-btn {
    width: 100%;
    padding: 12px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 12px;
}
.ps-interest-form { display: flex; flex-direction: column; gap: 8px; }
.ps-interest-input {
    width: 100%;
    padding: 10px 12px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 13px;
    color: var(--color-text);
    resize: vertical;
    box-sizing: border-box;
}
.ps-interest-input::placeholder { color: var(--color-text-muted); }
.ps-char-count     { font-size: 11px; color: var(--color-text-muted); margin: 0; }
.ps-interest-actions { display: flex; gap: 8px; }
.ps-cancel-btn {
    padding: 9px 16px;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 13px;
    color: var(--color-text-muted);
    cursor: pointer;
}
.ps-send-btn {
    flex: 1;
    padding: 9px 16px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.ps-send-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Status states */
.ps-pending      { text-align: center; padding: 16px 0; }
.ps-pending-icon { font-size: 32px; margin-bottom: 8px; }
.ps-pending-text { font-size: 13px; color: var(--color-text-muted); margin: 0; }
.ps-consent-needed { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.ps-consent-title  { font-size: 14px; font-weight: 700; color: #1D9E75; margin: 0; }
.ps-consent-sub    { font-size: 12px; color: var(--color-text-muted); margin: 0; }
.ps-consent-btn {
    width: 100%;
    padding: 11px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.ps-declined      { padding: 12px; }
.ps-declined-text { font-size: 13px; color: var(--color-text-muted); margin: 0; }
.ps-connected     { margin-bottom: 12px; }
.ps-connected-title { font-size: 15px; font-weight: 800; color: var(--color-primary); margin: 0 0 4px; }
.ps-connected-sub   { font-size: 12px; color: var(--color-text-muted); margin: 0 0 12px; }
.ps-contact-info    { background: var(--color-bg); border-radius: 8px; padding: 12px; font-size: 13px; color: var(--color-text); display: flex; flex-direction: column; gap: 6px; }

.ps-disclaimer {
    font-size: 11px;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
}

/* ── Consent gate modal ─────────────────────────── */
.cg-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 9999;
    padding: 0 0 env(safe-area-inset-bottom);
}
.cg-modal {
    background: var(--color-surface);
    border-radius: 20px 20px 0 0;
    padding: 28px 24px 32px;
    width: 100%;
    max-width: 500px;
    text-align: center;
}
.cg-icon    { font-size: 40px; margin-bottom: 12px; }
.cg-title   { font-size: 18px; font-weight: 800; color: var(--color-text); margin: 0 0 12px; }
.cg-body    { font-size: 14px; color: var(--color-text); line-height: 1.7; margin: 0 0 12px; }
.cg-disclaimer {
    font-size: 11px;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0 0 20px;
    padding: 12px;
    background: var(--color-bg);
    border-radius: 8px;
}
.cg-actions { display: flex; gap: 10px; }
.cg-cancel {
    flex: 1;
    padding: 12px;
    background: transparent;
    border: 2px solid var(--color-border);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
}
.cg-confirm {
    flex: 2;
    padding: 12px;
    background: var(--color-primary);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.cg-confirm:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Desktop ────────────────────────────────────── */
@media (min-width: 768px) {
    .ps-page   { padding: 24px; }
    .ps-layout { flex-direction: row; align-items: flex-start; gap: 24px; }
    .ps-main   { flex: 1; min-width: 0; }
    .ps-sidebar { width: 300px; flex-shrink: 0; position: sticky; top: 80px; }
    .cg-overlay { align-items: center; }
    .cg-modal   { border-radius: 20px; margin: 16px; }
}
</style>
