<script setup>
// ══════════════════════════════════════════════════════════════════
//  InPractice — Member/ShareKnowledge/ShowDocument.vue
//  Location: resources/js/Pages/Member/ShareKnowledge/ShowDocument.vue
//
//  MOBILE  (<768px): Single column — header, PDF viewer, sidebar info
//  DESKTOP (≥768px): max-width 1200px — left PDF viewer + right sidebar
//
//  PDF Viewer: inline iframe with toggle. Falls back gracefully on mobile.
//  Zero hardcoded hex — all var(--color-*) tokens.
//  All actions via fetch/router — no page reloads.
// ══════════════════════════════════════════════════════════════════

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

const props = defineProps({
    document: { type: Object, required: true },
    myRating: { type: Number, default: null },
});

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

// ── PDF Viewer ────────────────────────────────────────────────────
const pdfVisible    = ref(true);
const pdfFullscreen = ref(false);

// ── Rating ────────────────────────────────────────────────────────
const currentRating = ref(props.myRating ?? 0);
const hoverRating   = ref(0);
const ratingAverage = ref(props.document.rating_average ?? 0);
const ratingCount   = ref(props.document.rating_count ?? 0);
const ratingLoading = ref(false);

async function submitRating(star) {
    if (ratingLoading.value || props.document.is_owner) return;
    ratingLoading.value = true;
    try {
        const res = await fetch(route('member.share.document.rate', props.document.id), {
            method: 'PATCH',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            },
            body: JSON.stringify({ rating: star }),
        });
        const data = await res.json();
        currentRating.value = star;
        ratingAverage.value = data.rating_average;
        ratingCount.value   = data.rating_count;
    } finally {
        ratingLoading.value = false;
    }
}

// ── Delete ────────────────────────────────────────────────────────
const showDeleteConfirm = ref(false);

function confirmDelete() {
    router.delete(route('member.share.document.destroy', props.document.id), {
        onSuccess: () => router.visit(route('member.share.index')),
    });
}

// ── Helpers ───────────────────────────────────────────────────────
const title = computed(() =>
    locale.value === 'ar' && props.document.title_ar
        ? props.document.title_ar
        : props.document.title_en
);

const description = computed(() =>
    locale.value === 'ar' && props.document.description_ar
        ? props.document.description_ar
        : props.document.description_en
);

const categoryLabels = {
    report:   { en: 'Report',   ar: 'تقرير' },
    template: { en: 'Template', ar: 'نموذج' },
    guide:    { en: 'Guide',    ar: 'دليل'  },
    news:     { en: 'News',     ar: 'أخبار' },
    other:    { en: 'Other',    ar: 'أخرى'  },
};

function categoryLabel(cat) {
    const l = categoryLabels[cat];
    return l ? (locale.value === 'ar' ? l.ar : l.en) : cat;
}

// Star fill fraction for display rating
const fillPercent = computed(() => ((ratingAverage.value / 5) * 100).toFixed(0));
</script>

<template>
    <AppLayout :title="title">
        <Head :title="title" />

        <div class="sdp-page" :dir="isRTL ? 'rtl' : 'ltr'">
            <div class="sdp-container">

                <!-- ══ TOP BREADCRUMB BAR ═══════════════════════════════ -->
                <div class="sdp-breadcrumb">
                    <Link :href="route('member.share.index')" class="sdp-breadcrumb__back">
                        <i :class="isRTL ? 'ti ti-arrow-right' : 'ti ti-arrow-left'"></i>
                        <span>{{ locale === 'ar' ? 'مكتبة المعرفة' : 'Knowledge Library' }}</span>
                    </Link>
                    <div class="sdp-breadcrumb__badges">
                        <span class="sdp-pill sdp-pill--pdf">
                            <i class="ti ti-file-type-pdf"></i> PDF
                        </span>
                        <span class="sdp-pill sdp-pill--category">
                            {{ categoryLabel(document.document_category) }}
                        </span>
                        <span
                            class="sdp-pill sdp-pill--hub"
                            :style="`color: ${document.hub.color}; background: ${document.hub.color}18; border-color: ${document.hub.color}30`"
                        >
                            {{ locale === 'ar' ? document.hub.name_ar : document.hub.name_en }}
                        </span>
                        <span v-if="document.visibility === 'hub'" class="sdp-pill sdp-pill--locked">
                            <i class="ti ti-lock"></i>
                            {{ locale === 'ar' ? 'المجموعة فقط' : 'Hub only' }}
                        </span>
                    </div>
                </div>

                <!-- ══ MAIN LAYOUT: PDF VIEWER + SIDEBAR ═══════════════ -->
                <div class="sdp-layout">

                    <!-- LEFT — PDF VIEWER PANEL ──────────────────────── -->
                    <div class="sdp-viewer-panel">

                        <!-- Viewer header bar -->
                        <div class="sdp-viewer-bar">
                            <div class="sdp-viewer-bar__title">
                                <i class="ti ti-file-description"></i>
                                <span>{{ locale === 'ar' ? 'معاينة الملف' : 'Document Preview' }}</span>
                            </div>
                            <div class="sdp-viewer-bar__actions">
                                <button
                                    class="sdp-viewer-bar__btn"
                                    @click="pdfFullscreen = !pdfFullscreen"
                                    :title="locale === 'ar' ? 'ملء الشاشة' : 'Fullscreen'"
                                >
                                    <i :class="pdfFullscreen ? 'ti ti-arrows-minimize' : 'ti ti-arrows-maximize'"></i>
                                </button>
                                <a
                                    :href="document.download_url"
                                    class="sdp-viewer-bar__btn sdp-viewer-bar__btn--dl"
                                    target="_blank"
                                    :title="locale === 'ar' ? 'فتح في تبويب جديد' : 'Open in new tab'"
                                >
                                    <i class="ti ti-external-link"></i>
                                </a>
                            </div>
                        </div>

                        <!-- Iframe viewer -->
                        <div class="sdp-viewer-frame" :class="{ 'sdp-viewer-frame--full': pdfFullscreen }">
                            <iframe
                                :src="`${document.preview_url}#toolbar=1&navpanes=0&scrollbar=1`"
                                class="sdp-iframe"
                                title="PDF Preview"
                                loading="lazy"
                            ></iframe>
                        </div>

                        <!-- Viewer footer hint -->
                        <div class="sdp-viewer-hint">
                            <i class="ti ti-info-circle"></i>
                            {{ locale === 'ar'
                                ? 'يمكنك تصفح الملف كاملاً قبل التحميل'
                                : 'Browse the full document before downloading' }}
                        </div>
                    </div>

                    <!-- RIGHT — INFO SIDEBAR ─────────────────────────── -->
                    <aside class="sdp-sidebar">

                        <!-- Title block -->
                        <div class="sdp-sidebar__title-block">
                            <h1 class="sdp-title">{{ title }}</h1>
                            <p v-if="description" class="sdp-desc">{{ description }}</p>
                        </div>

                        <!-- Meta grid -->
                        <div class="sdp-meta-grid">
                            <div class="sdp-meta-item">
                                <span class="sdp-meta-item__label">
                                    {{ locale === 'ar' ? 'النوع' : 'Type' }}
                                </span>
                                <span class="sdp-meta-item__value">
                                    <i class="ti ti-file-type-pdf"></i> PDF
                                </span>
                            </div>
                            <div class="sdp-meta-item">
                                <span class="sdp-meta-item__label">
                                    {{ locale === 'ar' ? 'الحجم' : 'Size' }}
                                </span>
                                <span class="sdp-meta-item__value">{{ document.file_size }}</span>
                            </div>
                            <div class="sdp-meta-item">
                                <span class="sdp-meta-item__label">
                                    {{ locale === 'ar' ? 'بواسطة' : 'Shared by' }}
                                </span>
                                <span class="sdp-meta-item__value sdp-meta-item__value--author">
                                    <span class="sdp-avatar">{{ document.author.nickname.charAt(0).toUpperCase() }}</span>
                                    {{ document.author.nickname }}
                                </span>
                            </div>
                            <div class="sdp-meta-item">
                                <span class="sdp-meta-item__label">
                                    {{ locale === 'ar' ? 'التاريخ' : 'Date' }}
                                </span>
                                <span class="sdp-meta-item__value">{{ document.created_at }}</span>
                            </div>
                            <div class="sdp-meta-item">
                                <span class="sdp-meta-item__label">
                                    {{ locale === 'ar' ? 'التحميلات' : 'Downloads' }}
                                </span>
                                <span class="sdp-meta-item__value">
                                    <i class="ti ti-download"></i> {{ document.download_count }}
                                </span>
                            </div>
                        </div>

                        <!-- Tags -->
                        <div v-if="document.tags && document.tags.length" class="sdp-tags">
                            <span v-for="tag in document.tags" :key="tag" class="sdp-tag">#{{ tag }}</span>
                        </div>

                        <!-- ── Rating block ───────────────────────── -->
                        <div class="sdp-rating-block">
                            <!-- Community rating display -->
                            <div class="sdp-rating-display">
                                <div class="sdp-rating-display__score">{{ ratingAverage.toFixed(1) }}</div>
                                <div class="sdp-rating-display__right">
                                    <div class="sdp-rating-bar-wrap">
                                        <div class="sdp-rating-bar">
                                            <div class="sdp-rating-bar__fill" :style="`width: ${fillPercent}%`"></div>
                                        </div>
                                    </div>
                                    <div class="sdp-rating-display__label">
                                        {{ ratingCount }} {{ locale === 'ar' ? 'تقييم' : 'ratings' }}
                                    </div>
                                </div>
                            </div>

                            <!-- Interactive stars for non-owners -->
                            <div v-if="!document.is_owner" class="sdp-rate-prompt">
                                <span class="sdp-rate-prompt__label">
                                    {{ locale === 'ar' ? 'قيّم هذا الملف' : 'Rate this document' }}
                                </span>
                                <div class="sdp-stars">
                                    <button
                                        v-for="star in 5"
                                        :key="star"
                                        class="sdp-star"
                                        :class="{
                                            'sdp-star--filled': star <= (hoverRating || currentRating),
                                            'sdp-star--loading': ratingLoading,
                                        }"
                                        @mouseenter="hoverRating = star"
                                        @mouseleave="hoverRating = 0"
                                        @click="submitRating(star)"
                                    >★</button>
                                </div>
                                <span v-if="currentRating" class="sdp-rate-prompt__done">
                                    {{ locale === 'ar' ? 'تم تقييمك ✓' : 'Your rating saved ✓' }}
                                </span>
                            </div>
                        </div>

                        <!-- ── CTA Buttons ────────────────────────── -->
                        <div class="sdp-cta-group">
                            <a :href="document.download_url" class="sdp-btn sdp-btn--primary" download>
                                <i class="ti ti-download"></i>
                                {{ locale === 'ar' ? 'تحميل الملف' : 'Download PDF' }}
                            </a>
                            <a :href="document.download_url" target="_blank" class="sdp-btn sdp-btn--ghost">
                                <i class="ti ti-external-link"></i>
                                {{ locale === 'ar' ? 'فتح في تبويب جديد' : 'Open in new tab' }}
                            </a>
                        </div>

                        <!-- ── Owner danger zone ──────────────────── -->
                        <div v-if="document.is_owner" class="sdp-danger-zone">
                            <button class="sdp-btn sdp-btn--danger" @click="showDeleteConfirm = true">
                                <i class="ti ti-trash"></i>
                                {{ locale === 'ar' ? 'حذف الملف' : 'Delete Document' }}
                            </button>
                        </div>

                    </aside>
                </div><!-- /.sdp-layout -->

            </div><!-- /.sdp-container -->
        </div><!-- /.sdp-page -->

        <!-- ══ DELETE CONFIRMATION OVERLAY ══════════════════════════ -->
        <Teleport to="body">
            <Transition name="sdp-fade">
                <div v-if="showDeleteConfirm" class="sdp-overlay" @click.self="showDeleteConfirm = false">
                    <div class="sdp-confirm">
                        <div class="sdp-confirm__icon-wrap">
                            <i class="ti ti-trash sdp-confirm__icon"></i>
                        </div>
                        <h3 class="sdp-confirm__title">
                            {{ locale === 'ar' ? 'حذف الملف نهائياً؟' : 'Delete this document?' }}
                        </h3>
                        <p class="sdp-confirm__body">
                            {{ locale === 'ar'
                                ? 'سيتم حذف الملف نهائياً مع جميع التقييمات. لا يمكن التراجع عن هذا الإجراء.'
                                : 'This document and all its ratings will be permanently deleted. This cannot be undone.' }}
                        </p>
                        <div class="sdp-confirm__actions">
                            <button class="sdp-btn sdp-btn--ghost" @click="showDeleteConfirm = false">
                                {{ locale === 'ar' ? 'إلغاء' : 'Cancel' }}
                            </button>
                            <button class="sdp-btn sdp-btn--danger" @click="confirmDelete">
                                <i class="ti ti-trash"></i>
                                {{ locale === 'ar' ? 'نعم، احذف' : 'Yes, Delete' }}
                            </button>
                        </div>
                    </div>
                </div>
            </Transition>
        </Teleport>

    </AppLayout>
</template>

<style scoped>
/* ═══════════════════════════════════════════════════════════════════
   PAGE SHELL
═══════════════════════════════════════════════════════════════════ */
.sdp-page {
    min-height: 100vh;
    padding: var(--space-4) var(--space-4) var(--space-12);
    background: var(--color-bg);
}

.sdp-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* ═══════════════════════════════════════════════════════════════════
   BREADCRUMB BAR
═══════════════════════════════════════════════════════════════════ */
.sdp-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: space-between;
}

.sdp-breadcrumb__back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-text-secondary);
    text-decoration: none;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    border: 1.5px solid var(--color-border);
    background: var(--color-surface);
    transition: all var(--transition-fast);
}
.sdp-breadcrumb__back:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-soft);
    opacity: 1;
}

.sdp-breadcrumb__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* Pills / badges */
.sdp-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.02em;
    border: 1px solid transparent;
}
.sdp-pill--pdf      { background: rgba(216,90,48,0.10); color: #D85A30; border-color: rgba(216,90,48,0.20); }
.sdp-pill--category { background: var(--color-surface-alt); color: var(--color-text-secondary); border-color: var(--color-border); }
.sdp-pill--hub      { /* set via inline style */ }
.sdp-pill--locked   { background: var(--color-primary-soft); color: var(--color-primary); border-color: rgba(29,158,117,0.25); }

/* ═══════════════════════════════════════════════════════════════════
   MAIN LAYOUT — stacked on mobile, side-by-side on desktop
═══════════════════════════════════════════════════════════════════ */
.sdp-layout {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    align-items: flex-start;
}

/* ═══════════════════════════════════════════════════════════════════
   LEFT — PDF VIEWER PANEL
═══════════════════════════════════════════════════════════════════ */
.sdp-viewer-panel {
    width: 100%;
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
}

/* Top bar of the viewer */
.sdp-viewer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px var(--space-4);
    border-bottom: 1.5px solid var(--color-border);
    background: var(--color-surface-alt);
}

.sdp-viewer-bar__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-text-secondary);
}

.sdp-viewer-bar__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.sdp-viewer-bar__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--color-border);
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-fast);
    font-size: 15px;
}
.sdp-viewer-bar__btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-soft);
    opacity: 1;
}
.sdp-viewer-bar__btn--dl {
    background: var(--color-primary-soft);
    border-color: rgba(29,158,117,0.30);
    color: var(--color-primary);
}
.sdp-viewer-bar__btn--dl:hover {
    background: var(--color-primary);
    color: #fff;
}

/* Iframe wrapper — responsive height */
.sdp-viewer-frame {
    width: 100%;
    height: 480px;
    position: relative;
    background: var(--color-bg);
    transition: height var(--transition-base);
}
.sdp-viewer-frame--full {
    height: 75vh;
}

.sdp-iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Bottom hint */
.sdp-viewer-hint {
    padding: 8px var(--space-4);
    border-top: 1px solid var(--color-border-light);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--color-surface-alt);
}

/* ═══════════════════════════════════════════════════════════════════
   RIGHT — INFO SIDEBAR
═══════════════════════════════════════════════════════════════════ */
.sdp-sidebar {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* Title block */
.sdp-sidebar__title-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.sdp-title {
    font-size: var(--text-xl);
    font-weight: var(--fw-bold);
    color: var(--color-text-primary);
    line-height: 1.3;
    margin: 0;
}

.sdp-desc {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: 1.65;
    margin: 0;
}

/* Meta grid — 2-column info tiles */
.sdp-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
}

.sdp-meta-item {
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-3);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sdp-meta-item__label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sdp-meta-item__value {
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: 5px;
}

.sdp-meta-item__value--author {
    gap: var(--space-2);
}

.sdp-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 10px;
    font-weight: var(--fw-bold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Tags */
.sdp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.sdp-tag {
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    border: 1px solid rgba(29,158,117,0.20);
    cursor: default;
    transition: background var(--transition-fast);
}
.sdp-tag:hover {
    background: rgba(29,158,117,0.18);
}

/* ═══════════════════════════════════════════════════════════════════
   RATING BLOCK
═══════════════════════════════════════════════════════════════════ */
.sdp-rating-block {
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Score + bar row */
.sdp-rating-display {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.sdp-rating-display__score {
    font-size: var(--text-3xl);
    font-weight: var(--fw-bold);
    color: var(--color-text-primary);
    line-height: 1;
    min-width: 52px;
}

.sdp-rating-display__right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sdp-rating-bar-wrap {
    width: 100%;
}

.sdp-rating-bar {
    width: 100%;
    height: 8px;
    background: var(--color-bar-bg);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.sdp-rating-bar__fill {
    height: 100%;
    background: linear-gradient(90deg, #F59E0B, #FBBF24);
    border-radius: var(--radius-pill);
    transition: width 0.5s ease;
}

.sdp-rating-display__label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* Interactive star rating */
.sdp-rate-prompt {
    border-top: 1px solid var(--color-border-light);
    padding-top: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.sdp-rate-prompt__label {
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-text-secondary);
}

.sdp-stars {
    display: flex;
    gap: 2px;
}

.sdp-star {
    font-size: 30px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-border);
    transition: color 0.1s ease, transform 0.1s ease;
    padding: 0;
    line-height: 1;
}
.sdp-star--filled { color: #F59E0B; }
.sdp-star:hover:not(.sdp-star--loading) { transform: scale(1.2); }
.sdp-star--loading { cursor: not-allowed; opacity: 0.5; }

.sdp-rate-prompt__done {
    font-size: var(--text-xs);
    color: var(--color-primary);
    font-weight: var(--fw-semibold);
}

/* ═══════════════════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════════════════ */
.sdp-cta-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.sdp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 12px var(--space-5);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    border: 1.5px solid transparent;
    text-decoration: none;
    transition: all var(--transition-fast);
    width: 100%;
}

.sdp-btn--primary {
    background: var(--color-primary);
    color: #fff;
    box-shadow: var(--shadow-button);
    border-color: var(--color-primary);
}
.sdp-btn--primary:hover {
    background: var(--color-primary-light);
    border-color: var(--color-primary-light);
    opacity: 1;
}

.sdp-btn--ghost {
    background: transparent;
    color: var(--color-text-secondary);
    border-color: var(--color-border);
}
.sdp-btn--ghost:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-primary-soft);
    opacity: 1;
}

.sdp-btn--danger {
    background: rgba(216,82,82,0.10);
    color: #D85252;
    border-color: rgba(216,82,82,0.20);
}
.sdp-btn--danger:hover {
    background: rgba(216,82,52,0.18);
    border-color: rgba(216,82,52,0.35);
    opacity: 1;
}

/* Danger zone (owner only) */
.sdp-danger-zone {
    padding-top: var(--space-3);
    border-top: 1px dashed var(--color-border);
}

/* ═══════════════════════════════════════════════════════════════════
   DELETE OVERLAY
═══════════════════════════════════════════════════════════════════ */
.sdp-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    backdrop-filter: blur(3px);
}

.sdp-confirm {
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-6);
    max-width: 400px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    text-align: center;
    box-shadow: var(--shadow-float);
}

.sdp-confirm__icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(216,52,52,0.10);
    border: 2px solid rgba(216,52,52,0.20);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}
.sdp-confirm__icon { font-size: 24px; color: #D85252; }

.sdp-confirm__title {
    font-size: var(--text-lg);
    font-weight: var(--fw-bold);
    color: var(--color-text-primary);
    margin: 0;
}

.sdp-confirm__body {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0;
}

.sdp-confirm__actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
}
.sdp-confirm__actions .sdp-btn {
    width: auto;
    min-width: 110px;
}

/* Fade transition for overlay */
.sdp-fade-enter-active,
.sdp-fade-leave-active { transition: opacity 0.2s ease; }
.sdp-fade-enter-from,
.sdp-fade-leave-to    { opacity: 0; }

/* ═══════════════════════════════════════════════════════════════════
   DESKTOP LAYOUT (≥768px)
═══════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
    .sdp-page {
        padding: var(--space-6) var(--space-8) var(--space-12);
    }

    .sdp-layout {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--space-6);
    }

    /* PDF viewer takes 63% of width */
    .sdp-viewer-panel {
        flex: 0 0 calc(63% - var(--space-3));
        min-width: 0;
    }

    /* Sidebar is sticky on desktop */
    .sdp-sidebar {
        flex: 0 0 37%;
        position: sticky;
        top: 80px;   /* clears the sticky app header */
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: var(--color-border) transparent;
    }

    .sdp-viewer-frame {
        height: 640px;
    }
    .sdp-viewer-frame--full {
        height: 80vh;
    }

    .sdp-title {
        font-size: var(--text-2xl);
    }

    .sdp-cta-group {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .sdp-cta-group .sdp-btn {
        flex: 1;
        min-width: 140px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   LARGE DESKTOP (≥1024px) — tighten viewer height
═══════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
    .sdp-viewer-frame {
        height: 700px;
    }
}
</style>