<template>
    <Head :title="campaign.title" />
    <AppLayout>
        <!-- Back link + header -->
        <div class="cs-header">
            <Link :href="parentCampaign ? route('recurring.edit', parentCampaign.id) : route('campaigns.index')" class="cs-back">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" width="16" height="16">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"/>
                </svg>
                {{ parentCampaign ? parentCampaign.title : 'Campaigns' }}
            </Link>

            <div class="cs-title-row">
                <div class="cs-title-left">
                    <h1 class="cs-title">{{ campaign.title }}</h1>
                    <div class="cs-meta">
                        <span :class="['cs-badge', statusClass(campaign.status)]">{{ statusLabel(campaign.status) }}</span>
                        <span class="cs-meta-sep">·</span>
                        <span class="cs-meta-id">#{{ campaign.id }}</span>
                        <template v-if="sentAt">
                            <span class="cs-meta-sep">·</span>
                            <span class="cs-meta-date">Sent {{ sentAt }}</span>
                        </template>
                    </div>
                </div>
                <div v-if="!parentCampaign" class="cs-title-actions">
                    <Link :href="route('campaigns.edit', campaign.id)" class="btn btn-outline btn-sm">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" width="14" height="14">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931z"/>
                        </svg>
                        Edit
                    </Link>
                    <button class="btn btn-ghost btn-sm" @click="doDuplicate">Duplicate</button>
                </div>
            </div>

            <!-- Subject / From / Reply-to chips -->
            <div class="cs-info-chips">
                <div class="cs-chip" v-if="campaign.email_subject">
                    <span class="cs-chip-label">Subject</span>
                    <span class="cs-chip-val">{{ campaign.email_subject }}</span>
                </div>
                <div class="cs-chip" v-if="campaign.from_name || campaign.from_email">
                    <span class="cs-chip-label">From</span>
                    <span class="cs-chip-val">{{ campaign.from_name }} &lt;{{ campaign.from_email }}&gt;</span>
                </div>
                <div class="cs-chip" v-if="campaign.reply_to_email">
                    <span class="cs-chip-label">Reply-to</span>
                    <span class="cs-chip-val">{{ campaign.reply_to_email }}</span>
                </div>
            </div>
        </div>

        <!-- Tabs -->
        <div class="cs-tabs-wrap">
            <div class="cs-tabs">
                <button
                    v-for="tab in tabs"
                    :key="tab.id"
                    class="cs-tab"
                    :class="{ 'is-active': activeTab === tab.id }"
                    @click="activeTab = tab.id"
                >{{ tab.label }}</button>
            </div>
        </div>

        <!-- Tab: Overview -->
        <div v-if="activeTab === 'overview'" class="cs-content">
            <!-- Stats row -->
            <div class="cs-stats-grid">
                <div class="cs-stat-card">
                    <div class="cs-stat-icon cs-stat-icon--blue">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" width="18" height="18"><path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5"/></svg>
                    </div>
                    <div class="cs-stat-body">
                        <div class="cs-stat-val">{{ (campaign.emails_sent ?? 0).toLocaleString() }}</div>
                        <div class="cs-stat-label">Delivered</div>
                        <div class="cs-stat-sub" v-if="campaign.recipients_count">of {{ campaign.recipients_count.toLocaleString() }} recipients</div>
                    </div>
                </div>
                <div class="cs-stat-card">
                    <div class="cs-stat-icon cs-stat-icon--green">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" width="18" height="18"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.641 0-8.573-3.007-9.963-7.178z"/><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
                    </div>
                    <div class="cs-stat-body">
                        <div class="cs-stat-val">{{ (campaign.unique_opens ?? 0).toLocaleString() }}</div>
                        <div class="cs-stat-label">Unique opens</div>
                        <div class="cs-stat-sub">{{ openRate }}% open rate</div>
                    </div>
                </div>
                <div class="cs-stat-card">
                    <div class="cs-stat-icon cs-stat-icon--purple">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" width="18" height="18"><path stroke-linecap="round" stroke-linejoin="round" d="M15.042 21.672L13.684 16.6m0 0l-2.51 2.225.569-9.47 5.227 7.917-3.286-.672zm-7.518-.267A8.25 8.25 0 1120.25 10.5M8.288 14.212A5.25 5.25 0 1117.25 10.5"/></svg>
                    </div>
                    <div class="cs-stat-body">
                        <div class="cs-stat-val">{{ (campaign.unique_clicks ?? 0).toLocaleString() }}</div>
                        <div class="cs-stat-label">Unique clicks</div>
                        <div class="cs-stat-sub">{{ clickRate }}% click rate</div>
                    </div>
                </div>
                <div class="cs-stat-card">
                    <div class="cs-stat-icon cs-stat-icon--red">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" width="18" height="18"><path stroke-linecap="round" stroke-linejoin="round" d="M22 10.5h-6m-2.25-4.125a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zM4 19.235v-.11a6.375 6.375 0 0112.75 0v.109A12.318 12.318 0 0110.374 21c-2.331 0-4.512-.645-6.374-1.766z"/></svg>
                    </div>
                    <div class="cs-stat-body">
                        <div class="cs-stat-val">{{ (campaign.unsubscribes_count ?? 0).toLocaleString() }}</div>
                        <div class="cs-stat-label">Unsubscribes</div>
                    </div>
                </div>
            </div>

            <!-- Bottom: Audience + Timeline -->
            <div class="cs-bottom-grid">
                <!-- Audience -->
                <div class="cs-card">
                    <div class="cs-card-header">Campaign audience</div>
                    <div class="cs-card-body">
                        <div class="cs-audience-row">
                            <div class="cs-audience-label">Total recipients</div>
                            <div class="cs-audience-val">{{ (campaign.recipients_count ?? 0).toLocaleString() }}</div>
                        </div>
                        <div class="cs-audience-row">
                            <div class="cs-audience-label">Emails sent</div>
                            <div class="cs-audience-val">{{ (campaign.emails_sent ?? 0).toLocaleString() }}</div>
                        </div>
                        <div class="cs-audience-row" v-if="campaign.emails_failed > 0">
                            <div class="cs-audience-label">Failed</div>
                            <div class="cs-audience-val cs-audience-val--danger">{{ campaign.emails_failed.toLocaleString() }}</div>
                        </div>
                        <div class="cs-audience-row" v-if="campaign.emails_bounced > 0">
                            <div class="cs-audience-label">Bounced</div>
                            <div class="cs-audience-val cs-audience-val--danger">{{ campaign.emails_bounced.toLocaleString() }}</div>
                        </div>
                    </div>
                </div>

                <!-- Timeline -->
                <div class="cs-card">
                    <div class="cs-card-header">Timeline</div>
                    <div class="cs-card-body">
                        <div class="cs-timeline">
                            <div class="cs-tl-item">
                                <div class="cs-tl-dot cs-tl-dot--done"></div>
                                <div class="cs-tl-body">
                                    <div class="cs-tl-label">Campaign created</div>
                                    <div class="cs-tl-date">{{ formatDateTime(campaign.created_at) }}</div>
                                </div>
                            </div>
                            <div class="cs-tl-item" v-if="campaign.scheduled_at">
                                <div class="cs-tl-dot" :class="campaign.status === 'sent' ? 'cs-tl-dot--done' : 'cs-tl-dot--pending'"></div>
                                <div class="cs-tl-body">
                                    <div class="cs-tl-label">Scheduled for sending</div>
                                    <div class="cs-tl-date">{{ formatDateTime(campaign.scheduled_at) }}</div>
                                </div>
                            </div>
                            <div class="cs-tl-item" v-if="campaign.status === 'sent'">
                                <div class="cs-tl-dot cs-tl-dot--done"></div>
                                <div class="cs-tl-body">
                                    <div class="cs-tl-label">Sending completed</div>
                                    <div class="cs-tl-date">{{ formatDateTime(campaign.updated_at) }}</div>
                                </div>
                            </div>
                            <div class="cs-tl-item" v-if="['queued','scheduled','sending'].includes(campaign.status)">
                                <div class="cs-tl-dot cs-tl-dot--active"></div>
                                <div class="cs-tl-body">
                                    <div class="cs-tl-label">{{ campaign.status === 'sending' ? 'Currently sending…' : 'Waiting to send' }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Event list tabs: Deliverability / Opens / Clicks / Unsubscribes -->
        <div v-else-if="currentEventTab" class="cs-content">
            <div v-if="currentEventTab.data && currentEventTab.data.total > 0" class="cs-deliveries">
                <div class="cs-deliveries-head">
                    <h3>{{ currentEventTab.title }}</h3>
                    <span>{{ currentEventTab.data.total }} {{ currentEventTab.summary }}</span>
                </div>
                <div class="cs-table-scroll">
                    <table class="cs-table">
                        <thead>
                            <tr>
                                <th>Email</th>
                                <th>Name</th>
                                <th v-if="currentEventTab.showUrl">URL</th>
                                <th v-if="currentEventTab.showReason">Reason</th>
                                <th>Status</th>
                                <th>{{ currentEventTab.timeLabel }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="d in currentEventTab.data.data" :key="d.id">
                                <td>
                                    <Link v-if="d.contact_id" :href="route('contacts.show', d.contact_id)" class="cs-contact-link">{{ d.email }}</Link>
                                    <span v-else>{{ d.email ?? '-' }}</span>
                                </td>
                                <td>{{ d.name || '-' }}</td>
                                <td v-if="currentEventTab.showUrl" class="cs-url-cell" :title="d.url">{{ d.url || '-' }}</td>
                                <td v-if="currentEventTab.showReason" class="cs-url-cell" :title="d.reason">{{ d.reason || '-' }}</td>
                                <td><span class="cs-delivery-status" :class="{ 'cs-delivery-status--danger': currentEventTab.id === 'bounced' }">{{ d.status ?? '-' }}</span></td>
                                <td>{{ formatDateTime(d.at) }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="cs-deliveries-footer">
                    <span class="cs-deliveries-range">{{ currentEventTab.data.from }}–{{ currentEventTab.data.to }} of {{ currentEventTab.data.total }}</span>
                    <Pagination :paginator="currentEventTab.data" :page-name="currentEventTab.pageName" preserve-state />
                </div>
            </div>
            <div v-else class="cs-placeholder">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="36" height="36"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z"/></svg>
                <p>{{ currentEventTab.empty }}</p>
            </div>
        </div>
    </AppLayout>
</template>

<script setup>
import { ref, computed } from 'vue';
import { Link, router, Head } from '@inertiajs/vue3';
import AppLayout from '@/Layouts/AppLayout.vue';
import Pagination from '@/Components/Pagination.vue';
import { useTenantTimezone } from '@/Composables/useTenantTimezone';

const { formatDate: formatDateTz, formatDateTime: formatDateTimeTz } = useTenantTimezone();

const props = defineProps({
    campaign:       Object,
    deliveries:     Object,
    opens:          Object,
    clicks:         Object,
    unsubscribes:   Object,
    bounces:        Object,
    parentCampaign: Object,
});

const activeTab = ref('overview');

const tabs = [
    { id: 'overview',       label: 'Overview' },
    { id: 'deliverability', label: 'Deliverability' },
    { id: 'opens',          label: 'Opens' },
    { id: 'clicks',         label: 'Clicks' },
    { id: 'unsubscribes',   label: 'Unsubscribes' },
    { id: 'bounced',        label: 'Bounced' },
];

const eventTabConfig = {
    deliverability: {
        title: 'Delivered emails',   summary: 'emails delivered',       timeLabel: 'Delivered at',
        pageName: 'deliveries_page', showUrl: false, showReason: false,
        empty: 'No emails delivered yet. Delivered contacts will be listed here once the campaign is sent.',
    },
    opens: {
        title: 'Opens',              summary: 'contacts opened this email', timeLabel: 'Last opened at',
        pageName: 'opens_page',      showUrl: false, showReason: false,
        empty: 'No opens recorded yet. Contacts who open this email will be listed here.',
    },
    clicks: {
        title: 'Clicks',             summary: 'click events recorded',  timeLabel: 'Clicked at',
        pageName: 'clicks_page',     showUrl: true, showReason: false,
        empty: 'No clicks recorded yet. Contacts who click a link in this email will be listed here.',
    },
    unsubscribes: {
        title: 'Unsubscribes',       summary: 'contacts unsubscribed',  timeLabel: 'Unsubscribed at',
        pageName: 'unsubscribes_page', showUrl: false, showReason: false,
        empty: 'No unsubscribes recorded. Contacts who opt out via this email will be listed here.',
    },
    bounced: {
        title: 'Bounced emails',     summary: 'emails not delivered',   timeLabel: 'Bounced at',
        pageName: 'bounces_page',    showUrl: false, showReason: true,
        empty: 'No bounces recorded. Contacts whose email couldn\'t be delivered will be listed here with a reason.',
    },
};

const currentEventTab = computed(() => {
    const cfg = eventTabConfig[activeTab.value];
    if (!cfg) return null;
    const dataKey = activeTab.value === 'deliverability' ? 'deliveries' : activeTab.value === 'bounced' ? 'bounces' : activeTab.value;
    return { ...cfg, id: activeTab.value, data: props[dataKey] };
});

const openRate = computed(() => {
    const sent = props.campaign.emails_sent ?? 0;
    const opens = props.campaign.unique_opens ?? 0;
    return sent > 0 ? ((opens / sent) * 100).toFixed(1) : '0.0';
});
const clickRate = computed(() => {
    const sent = props.campaign.emails_sent ?? 0;
    const clicks = props.campaign.unique_clicks ?? 0;
    return sent > 0 ? ((clicks / sent) * 100).toFixed(1) : '0.0';
});

const sentAt = computed(() => {
    if (props.campaign.status !== 'sent') return null;
    return formatDate(props.campaign.updated_at);
});

function statusLabel(s) {
    return { draft: 'Draft', new: 'New', scheduled: 'Scheduled', queued: 'Queued', sending: 'Sending…', sent: 'Sent', paused: 'Paused' }[s] ?? s;
}
function statusClass(s) {
    return {
        draft: 'cs-badge--draft', new: 'cs-badge--new',
        scheduled: 'cs-badge--scheduled', queued: 'cs-badge--scheduled',
        sending: 'cs-badge--sending', sent: 'cs-badge--sent', paused: 'cs-badge--paused',
    }[s] ?? 'cs-badge--draft';
}

function formatDate(iso) {
    if (!iso) return '';
    return formatDateTz(iso);
}
function formatDateTime(iso) {
    if (!iso) return '';
    return formatDateTimeTz(iso);
}

function doDuplicate() {
    router.post(route('campaigns.duplicate', props.campaign.id));
}
</script>

<style scoped>
/* ── Header ── */
.cs-header {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 20px 24px 0;
    margin-bottom: 20px;
}
.cs-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
    margin-bottom: 14px;
}
.cs-back:hover { color: var(--text-primary); }

.cs-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
}
@media (max-width: 576px) {
    .cs-title-row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
}
.cs-title { font-size: 20px; font-weight: 700; color: var(--text-primary); margin: 0 0 6px; }
.cs-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cs-meta-sep { color: var(--border-color); }
.cs-meta-id { font-size: 12px; color: var(--text-muted); }
.cs-meta-date { font-size: 12px; color: var(--text-muted); }
.cs-title-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
@media (max-width: 576px) {
    .cs-title-actions {
        align-self: flex-start;
    }
}

/* ── Badges ── */
.cs-badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; }
.cs-badge--draft     { background: var(--gray-100); color: var(--text-secondary); border: 1px solid var(--border-color); }
.cs-badge--new       { background: var(--info-light); color: var(--info); border: 1px solid var(--info-border); }
.cs-badge--scheduled { background: rgba(124, 58, 237, 0.12); color: #a78bfa; border: 1px solid rgba(124, 58, 237, 0.25); }
.cs-badge--sending   { background: var(--info-light); color: var(--info); border: 1px solid var(--info-border); }
.cs-badge--sent      { background: var(--success-light); color: var(--success); border: 1px solid var(--success-border); }
.cs-badge--paused    { background: var(--gray-100); color: var(--text-secondary); border: 1px solid var(--border-color); }

/* ── Info chips ── */
.cs-info-chips {
    display: flex;
    align-items: center;
    gap: 0;
    border-top: 1px solid var(--border-color);
    margin-top: 14px;

    @media (max-width: 576px) {
        flex-direction: column;
        align-items: stretch;
    }
}
.cs-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px 10px 0;
    margin-right: 16px;
    border-right: 1px solid var(--border-color);
    font-size: 13px;

    @media (max-width: 576px) {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding: 8px 0;
        margin-right: 0;
    }
}
.cs-chip:last-child {
    border-right: none;
    @media (max-width: 576px) {
        border-bottom: none;
    }
}
.cs-chip-label { font-weight: 500; color: var(--text-muted); }
.cs-chip-val { color: var(--text-secondary); }

/* ── Tabs ── */
.cs-tabs-wrap {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 20px;
    overflow: hidden;
}
.cs-tabs {
    display: flex;
    border-bottom: none;
    padding: 0 8px;
}
.cs-tab {
    padding: 14px 16px;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    border: none;
    background: none;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.1s, border-color 0.1s;
}
.cs-tab:hover { color: #374151; }
.cs-tab.is-active { color: #2563eb; border-bottom-color: #2563eb; }

/* ── Content ── */
.cs-content { display: flex; flex-direction: column; gap: 20px; }

/* ── Stats grid ── */
.cs-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;

    @media (max-width: 1024px) {
        grid-template-columns: repeat(2, 1fr);
    }
    @media (max-width: 576px) {
        grid-template-columns: 1fr;
    }
}
.cs-stat-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 18px 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.cs-stat-icon {
    width: 40px; height: 40px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.cs-stat-icon--blue   { background: var(--info-light); color: var(--info); }
.cs-stat-icon--green  { background: var(--success-light); color: var(--success); }
.cs-stat-icon--purple { background: rgba(124, 58, 237, 0.12); color: #a78bfa; }
.cs-stat-icon--red    { background: var(--danger-light); color: var(--danger); }

.cs-stat-body { display: flex; flex-direction: column; gap: 2px; }
.cs-stat-val   { font-size: 22px; font-weight: 700; color: var(--text-primary); line-height: 1; }
.cs-stat-label { font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.cs-stat-sub   { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* ── Bottom grid ── */
.cs-bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;

    @media (max-width: 768px) {
        grid-template-columns: 1fr;
    }
}
.cs-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
}
.cs-card-header {
    padding: 14px 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-page);
}
.cs-card-body { padding: 16px 20px; }

/* ── Audience ── */
.cs-audience-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
}
.cs-audience-row:last-child { border-bottom: none; }
.cs-audience-label { color: var(--text-secondary); }
.cs-audience-val { font-weight: 600; color: var(--text-primary); }
.cs-audience-val--danger { color: var(--danger); }

/* ── Timeline ── */
.cs-timeline { display: flex; flex-direction: column; gap: 0; }
.cs-tl-item  { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; position: relative; }
.cs-tl-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 22px;
    bottom: -10px;
    width: 2px;
    background: var(--border-color);
}
.cs-tl-dot {
    width: 16px; height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 2px;
}
.cs-tl-dot--done    { background: var(--success); border: 2px solid var(--success-border); }
.cs-tl-dot--pending { background: var(--gray-100); border: 2px solid var(--border-color); }
.cs-tl-dot--active  { background: var(--info); border: 2px solid var(--info-border); }
.cs-tl-label { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.cs-tl-date  { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* ── Placeholder ── */
/* ── Deliveries table ── */
.cs-deliveries {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
}
.cs-deliveries-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}
.cs-deliveries-head h3 { font-size: 15px; font-weight: 600; color: var(--text-primary); margin: 0; }
.cs-deliveries-head span { font-size: 13px; color: var(--text-secondary); }
.cs-table { width: 100%; border-collapse: collapse; }
.cs-table th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    background: var(--bg-page);
    padding: 10px 20px;
    border-bottom: 1px solid var(--border-color);
}
.cs-table td {
    font-size: 13px;
    color: var(--text-secondary);
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color);
}
.cs-table tbody tr:hover { background: var(--bg-hover); }
.cs-table-scroll { overflow-x: auto; }
.cs-url-cell {
    max-width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-muted);
}
.cs-contact-link { color: var(--active-text); text-decoration: none; font-weight: 500; }
.cs-contact-link:hover { text-decoration: underline; }
.cs-delivery-status { font-size: 12px; color: var(--success); background: var(--success-light); border-radius: 10px; padding: 2px 8px; }
.cs-delivery-status--danger { color: var(--danger); background: var(--danger-light); }
.cs-deliveries-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    flex-wrap: wrap;
}
.cs-deliveries-range { font-size: 12px; color: var(--text-secondary); }

.cs-placeholder {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 64px 24px;
    text-align: center;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}
</style>
