@extends('layouts.app')

@section('title', 'Billing – ' . $user->name)

@section('content')

{{-- ── Page Header ── --}}
<div class="page-header-bar">
    <div class="header-left">
        {{-- <div class="breadcrumb-nav">
            <a href="{{ route('admin.users.index') }}" class="back-link">
                <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
                All Users
            </a>
            <span class="breadcrumb-sep">/</span>
            <a href="{{ route('admin.users.show', $user) }}" class="back-link">{{ $user->name }}</a>
            <span class="breadcrumb-sep">/</span>
            <span class="breadcrumb-current">Billing</span>
        </div> --}}
        <div class="header-title-row">
            <div class="page-title-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg>
            </div>
            <div>
                <h1 class="page-title">Billing for {{ $user->name }}</h1>
                <p class="page-subtitle">Stripe billing details — admin view</p>
            </div>
        </div>
    </div>
    <div class="header-actions">
        <a href="{{ route('admin.users.show', $user) }}" class="btn-header-action">
            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" 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"/></svg>
            View User
        </a>
        <a href="{{ route('admin.users.index') }}" class="btn-header-action">
            <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" 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>
            All Users
        </a>
    </div>
</div>

{{-- ── Alerts (converted to toasters) ── --}}
<script>
document.addEventListener('DOMContentLoaded', function() {
    @if(session('success'))
    Swal.fire({
        toast: true,
        position: 'top-end',
        icon: 'success',
        title: '{{ session('success') }}',
        showConfirmButton: false,
        timer: 3000,
        timerProgressBar: true
    });
    @endif
    
    @if(session('error'))
    Swal.fire({
        toast: true,
        position: 'top-end',
        icon: 'error',
        title: '{{ session('error') }}',
        showConfirmButton: false,
        timer: 4000,
        timerProgressBar: true
    });
    @endif
    
    @if(session('info'))
    Swal.fire({
        toast: true,
        position: 'top-end',
        icon: 'info',
        title: '{{ session('info') }}',
        showConfirmButton: false,
        timer: 3000,
        timerProgressBar: true
    });
    @endif
});

function confirmCancelSubscription(subscriptionId, userId) {
    Swal.fire({
        title: 'Cancel Subscription?',
        text: "Cancel this subscription? The user will have access until the end of the current billing period.",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#e31e52',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Yes, cancel it',
        cancelButtonText: 'No, keep it',
        reverseButtons: true
    }).then((result) => {
        if (result.isConfirmed) {
            // Create form and submit
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = `/admin/users/${userId}/subscription/cancel`;
            
            // Add CSRF token
            const csrfInput = document.createElement('input');
            csrfInput.type = 'hidden';
            csrfInput.name = '_token';
            csrfInput.value = '{{ csrf_token() }}';
            form.appendChild(csrfInput);
            
            // Add subscription ID
            const subscriptionInput = document.createElement('input');
            subscriptionInput.type = 'hidden';
            subscriptionInput.name = 'subscription_id';
            subscriptionInput.value = subscriptionId;
            form.appendChild(subscriptionInput);
            
            // Submit form
            document.body.appendChild(form);
            form.submit();
        }
    });
}
</script>

{{-- ── Subscriptions ── --}}
@if($subscriptions->isNotEmpty())
<section class="billing-section" style="--section-delay: 0.08s;">
    <div class="section-header">
        <div class="section-title-group">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
            <h2 class="section-title">Subscriptions</h2>
            <span class="section-count">{{ $subscriptions->count() }}</span>
        </div>
        <p class="section-note">Each service subscription is managed separately. The user can cancel from their own Billing page.</p>
    </div>

    <div class="subscriptions-grid">
        @foreach($subscriptions as $i => $sub)
        <div class="card subscription-card" style="--card-delay: {{ $i * 0.06 }}s;">
            <div class="subscription-header">
                <div class="sub-title-group">
                    <span class="sub-name">{{ $sub->order?->service_address_display ?: ($sub->order?->product_display_name ?? $sub->provider_product_id ?? 'Subscription #' . $sub->id) }}</span>
                    <!-- <span class="status-badge status-{{ $sub->status }}">{{ ucfirst($sub->status) }}</span> -->
                </div>
                @if($sub->order)
                <div class="sub-amount">${{ number_format($sub->order->product_price ?? 0, 2) }}<span class="sub-period">/mo</span></div>
                @endif
            </div>

            <div class="sub-details-grid">
                <div class="sub-detail-item">
                    <span class="sub-detail-label">Product / Service</span>
                    <span class="sub-detail-value">{{ $sub->order?->product_display_name ?? $sub->provider_product_id ?? '—' }}</span>
                </div>
                <div class="sub-detail-item">
                    <span class="sub-detail-label">Current Period</span>
                    <span class="sub-detail-value">
                        @if($sub->current_period_start && $sub->current_period_end)
                            {{ $sub->current_period_start->format('d/m/Y') }} – {{ $sub->current_period_end->format('d/m/Y') }}
                        @else —
                        @endif
                    </span>
                </div>
                <div class="sub-detail-item">
                    <span class="sub-detail-label">Next Payment</span>
                    <span class="sub-detail-value">{{ $sub->current_period_end ? $sub->current_period_end->format('d/m/Y') : '—' }}</span>
                </div>
                <div class="sub-detail-item">
                    <span class="sub-detail-label">Status</span>
                    <span class="sub-detail-value"><span class="status-badge status-{{ $sub->status }}">{{ ucfirst(str_replace('_', ' ', $sub->status)) }}</span></span>
                </div>
            </div>

            @if($sub->cancel_at_period_end)
            <div class="sub-notice sub-notice-warn">
                <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"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                This subscription will cancel at the end of the current billing period.
            </div>
            @elseif(in_array($sub->status, ['active', 'trialing']))
            <div class="sub-footer">
                <button type="button" class="cancel-sub-btn" onclick="confirmCancelSubscription('{{ $sub->stripe_subscription_id }}', '{{ $user->id }}')">
                    <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"><circle cx="12" cy="12" r="10"/><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/></svg>
                    Cancel this subscription
                </button>
            </div>
            @endif
        </div>
        @endforeach
    </div>
</section>
@else
<section class="billing-section" style="--section-delay: 0.08s;">
    <div class="card empty-card">
        <div class="empty-state">
            <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="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/></svg>
            <p>This user has no active subscriptions.</p>
        </div>
    </div>
</section>
@endif

{{-- ── Payment History ── --}}
<section class="billing-section" style="--section-delay: 0.18s;">
    <div class="section-header">
        <div class="section-title-group">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
            <h2 class="section-title">Payment History &amp; Invoices</h2>
        </div>
    </div>

    <div class="card">
        @if($paymentHistories->count())
        <div class="table-wrapper">
            <table class="billing-table">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Type</th>
                        <th>Amount</th>
                        <th>Status</th>
                        <th>Invoice</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($paymentHistories as $i => $ph)
                    <tr class="payment-row" style="--row-index: {{ $i }};">
                        <td><span class="date-value">{{ $ph->created_at->format('d/m/Y') }}</span></td>
                        <td><span class="type-value">{{ ucfirst(str_replace('_', ' ', $ph->type)) }}</span></td>
                        <td><span class="amount-value">{{ $ph->formatted_amount }} <span class="currency">{{ strtoupper($ph->currency) }}</span></span></td>
                        <td><span class="status-badge status-{{ $ph->status }}">{{ ucfirst(str_replace('_', ' ', $ph->status)) }}</span></td>
                        <td>
                            @if($ph->invoice_hosted_url || $ph->invoice_pdf_url || $ph->stripe_invoice_id)
                            <div class="invoice-links">
                                @if($ph->invoice_hosted_url)
                                <a href="{{ $ph->invoice_hosted_url }}" target="_blank" rel="noopener" class="invoice-link">
                                    <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"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
                                    View
                                </a>
                                @endif
                                @if($ph->invoice_pdf_url || $ph->stripe_invoice_id)
                                <a href="{{ route('admin.users.billing.invoice.download', [$user, $ph]) }}" class="invoice-link">
                                    <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"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                                    PDF
                                </a>
                                @endif
                            </div>
                            @else
                            <div class="invoice-links">
                                <a href="#" class="invoice-link router-payment-view-btn" data-order-id="{{ $ph->order_id }}">
                                    <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"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
                                    View
                                </a>
                                <a href="/admin/broadband/{{ $ph->order_id }}/payment/{{ $ph->id }}/download" class="invoice-link">
                                    <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"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                                    PDF
                                </a>
                            </div>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="pagination-wrap">{{ $paymentHistories->links('pagination::bootstrap-4') }}</div>
        @else
        <div class="empty-state">
            <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
            <p>No payment history yet.</p>
        </div>
        @endif
    </div>
</section>
{{-- Router Payment Details Modal --}}
<div id="router-payment-modal" class="sd-modal" role="dialog" aria-modal="true" aria-labelledby="router-payment-modal-title" hidden>
    <div class="sd-modal__backdrop" data-close-router-payment></div>
    <div class="sd-modal__box">
        <div class="sd-modal__header">
            <h2 id="router-payment-modal-title" class="sd-modal__title">Router Payment Details</h2>
            <button type="button" class="sd-modal__close" data-close-router-payment aria-label="Close">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
            </button>
        </div>
        <div class="sd-modal__body">
            <div id="router-payment-loading" class="sd-loading-state" style="display: none;">
                <div class="sd-spinner"></div>
                <p>Loading payment details...</p>
            </div>
            <div id="router-payment-content"></div>
        </div>
        <div class="sd-modal__actions">
            <button type="button" class="sd-btn sd-btn--ghost" data-close-router-payment style="margin: 1rem;">Close</button>
        </div>
    </div>
</div>
@endsection
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    var csrfMeta = document.querySelector('meta[name="csrf-token"]');

    // Toast function (agar us blade mein pehle se nahi hai)
    function showToast(message, type) {
        type = type || 'success';
        var container = document.getElementById('toaster-container');
        if (!container) return;
        var toast = document.createElement('div');
        toast.className = 'toast toast-' + type;
        toast.setAttribute('role', 'alert');
        toast.textContent = message;
        container.appendChild(toast);
        setTimeout(function () {
            toast.classList.add('toast-out');
            setTimeout(function () { if (toast.parentNode) toast.parentNode.removeChild(toast); }, 250);
        }, 4000);
    }

    var routerPaymentModal = document.getElementById('router-payment-modal');
    var routerPaymentLoading = document.getElementById('router-payment-loading');
    var routerPaymentContent = document.getElementById('router-payment-content');

    function openRouterPaymentModal(orderId) {
        if (!routerPaymentModal) return;
        routerPaymentLoading.style.display = 'block';
        routerPaymentContent.innerHTML = '';
        routerPaymentModal.removeAttribute('hidden');
        document.body.style.overflow = 'hidden';

        fetch('/admin/broadband/' + orderId + '/router-payments', {
            headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }
        })
        .then(function(res) { return res.json(); })
        .then(function(data) {
            routerPaymentLoading.style.display = 'none';
            if (data.success && data.payments) {
                displayRouterPayments(data.payments, orderId);
            } else {
                routerPaymentContent.innerHTML = '<p>No router payment history found.</p>';
            }
        })
        .catch(function() {
            routerPaymentLoading.style.display = 'none';
            routerPaymentContent.innerHTML = '<p>Error loading payment details.</p>';
        });
    }

    function displayRouterPayments(payments, orderId) {
        var html = '';
        payments.forEach(function(payment) {
            var amount = payment.amount < 1000 ?
                '$' + parseFloat(payment.amount).toFixed(2) :
                '$' + (payment.amount / 100).toFixed(2);

            html += '<div class="invoice-modal">';
            html += '<div class="invoice-modal__status">Invoice Paid</div>';
            html += '<div class="invoice-modal__amount">' + amount + ' ' + payment.currency.toUpperCase() + '</div>';
            html += '<div class="invoice-modal__subtitle">Router shipping fee payment</div>';
            html += '<div class="invoice-modal__details">';
            html += '<div class="invoice-detail-row"><span class="invoice-detail-label">Invoice Number</span><span class="invoice-detail-value">INV-' + payment.id + '</span></div>';
            html += '<div class="invoice-detail-row"><span class="invoice-detail-label">Payment Date</span><span class="invoice-detail-value">' + payment.date + '</span></div>';
           html += '<div class="invoice-detail-row"><span class="invoice-detail-label">Status</span><span class="invoice-detail-value">' + (payment.status.charAt(0).toUpperCase() + payment.status.slice(1)) + '</span></div>';
            html += '</div>';
            html += '<div class="invoice-modal__actions">';
            html += '<a href="/admin/broadband/' + orderId + '/payment/' + payment.id + '/download" class="invoice-btn invoice-btn--primary" id="pdf-download-btn-' + payment.id + '">';
            html += 'Download PDF</a>';
            html += '</div></div>';
        });
        routerPaymentContent.innerHTML = html;
    }

    function closeRouterPaymentModal() {
        if (routerPaymentModal) {
            routerPaymentModal.setAttribute('hidden', '');
            document.body.style.overflow = '';
        }
    }

    document.querySelectorAll('.router-payment-view-btn').forEach(function(btn) {
        btn.addEventListener('click', function(e) {
            e.preventDefault();
            var orderId = this.getAttribute('data-order-id');
            if (orderId) openRouterPaymentModal(orderId);
        });
    });

    document.querySelectorAll('[data-close-router-payment]').forEach(function(el) {
        el.addEventListener('click', closeRouterPaymentModal);
    });
});
</script>
@endpush
@push('styles')
<style>

/* ── SD Modal ── */
.sd-modal { position: fixed; inset: 0; z-index: 1050; display: flex; align-items: center; justify-content: center; padding: 1.25rem; }
.sd-modal[hidden] { display: none !important; }
.sd-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.45); backdrop-filter: blur(2px); }
.sd-modal__box { position: relative; background: var(--card-bg,#fff); border-radius: 14px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); max-width: 560px; width: 100%; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; animation: modalIn 0.2s ease both; }
@keyframes modalIn { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.sd-modal__header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border,#e5e7eb); }
.sd-modal__title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--text,#111); }
.sd-modal__close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid transparent; background: none; cursor: pointer; color: var(--text-muted,#6b7280); transition: all 0.18s; padding: 0; }
.sd-modal__close:hover { background: var(--border,#f3f4f6); color: var(--text,#111); }
.sd-modal__body { padding: 1.5rem; overflow-y: auto; flex: 1; }
.sd-modal__actions { padding: 1rem 1.5rem; border-top: 1px solid var(--border,#e5e7eb); display: flex; justify-content: flex-end; }
.sd-loading-state { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 2rem; color: var(--text-muted,#888); }
.sd-spinner { width: 28px; height: 28px; border: 3px solid var(--border,#e5e7eb); border-top-color: var(--accent,#e31e52); border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 600px) { .sd-modal__box { margin: 0.5rem; max-height: 95vh; } }

/* ─── PAGE HEADER ─────────────────────────────────────── */
.page-header-bar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.75rem;
    animation: fadeSlideDown 0.4s ease both;
}
.header-left { display: flex; flex-direction: column; gap: 0.55rem; }
.breadcrumb-nav { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.back-link { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.8rem; font-weight: 600; color: var(--text-muted,#888); text-decoration: none; transition: color 0.15s; }
.back-link:hover { color: var(--accent); text-decoration: none; }
.breadcrumb-sep { color: var(--border,#ccc); font-size: 0.8rem; }
.breadcrumb-current { font-size: 0.8rem; font-weight: 600; color: var(--accent); }
.header-title-row { display: flex; align-items: center; gap: 0.85rem; }
.page-title-icon { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); flex-shrink: 0; }
.page-title { font-size: 1.45rem; font-weight: 700; margin: 0; color: var(--text,#111); letter-spacing: -0.3px; line-height: 1.2; }
.page-subtitle { margin: 0.15rem 0 0; font-size: 0.845rem; color: var(--text-muted,#888); }
.header-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.btn-header-action { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.42rem 0.85rem; border: 1.5px solid var(--border,#e0e0e0); border-radius: 9px; font-size: 0.84rem; font-weight: 600; color: var(--text-muted,#666); text-decoration: none; transition: all 0.18s; background: transparent; white-space: nowrap; }
.btn-header-action:hover { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); text-decoration: none; transform: translateY(-1px); }

/* ─── BILLING SECTIONS ────────────────────────────────── */
.billing-section {
    margin-bottom: 2rem;
    animation: fadeSlideUp 0.45s ease var(--section-delay, 0s) both;
}

.section-header { margin-bottom: 1rem; }
.section-title-group { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.35rem; }
.section-title-group svg { color: var(--accent); flex-shrink: 0; }
.section-title { font-size: 1.05rem; font-weight: 700; margin: 0; color: var(--text,#111); }
.section-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 0.4rem; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); border-radius: 20px; font-size: 0.72rem; font-weight: 700; }
.section-note { font-size: 0.845rem; color: var(--text-muted,#888); margin: 0; }

/* ─── SUBSCRIPTION CARDS ──────────────────────────────── */
.subscriptions-grid { display: flex; flex-direction: column; gap: 1rem; }

.subscription-card {
    border-radius: 14px;
    padding: 1.4rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    animation: fadeSlideUp 0.4s ease calc(var(--section-delay,0s) + var(--card-delay,0s)) both;
    transition: box-shadow 0.2s;
}
.subscription-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.1); }

.subscription-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.1rem;
    padding-bottom: 1rem;
    border-bottom: 1.5px solid var(--border,#f0f0f0);
}
.sub-title-group { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.sub-name { font-size: 0.975rem; font-weight: 700; color: var(--text,#111); }
.sub-amount { font-size: 1.35rem; font-weight: 800; color: var(--accent); line-height: 1; }
.sub-period { font-size: 0.75rem; font-weight: 500; color: var(--text-muted,#aaa); margin-left: 2px; }

.sub-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 1.5rem;
    margin-bottom: 1rem;
}
.sub-detail-item { display: flex; flex-direction: column; gap: 0.25rem; }
.sub-detail-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted,#aaa); }
.sub-detail-value { font-size: 0.9rem; font-weight: 500; color: var(--text,#222); }

.sub-notice {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    border-radius: 8px;
    font-size: 0.84rem;
    font-weight: 500;
    margin-top: 0.25rem;
}
.sub-notice-warn { background: #fff3cd; color: #856404; border: 1px solid #fde68a; }

.sub-footer { margin-top: 0.75rem; padding-top: 0.9rem; border-top: 1px solid var(--border,#f0f0f0); }
.cancel-sub-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.9rem;
    border: 1.5px solid rgba(220,53,69,0.35);
    border-radius: 9px;
    background: rgba(220,53,69,0.07);
    color: #dc3545;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s;
}
.cancel-sub-btn:hover { background: #dc3545; color: #fff; border-color: #dc3545; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(220,53,69,0.25); }

/* ─── STATUS BADGES ───────────────────────────────────── */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
    white-space: nowrap;
}
.status-active, .status-paid, .status-succeeded { background: #d4edda; color: #155724; border-color: #b7dfbb; }
.status-trialing                   { background: #cce5ff; color: #004085; border-color: #9ec8f5; }
.status-failed, .status-past_due,
.status-past-due                   { background: #f8d7da; color: #721c24; border-color: #f5c2c7; }
.status-canceled, .status-cancelled{ background: #e2e8f0; color: #475569; border-color: #cbd5e1; }
.status-refunded                   { background: #e2e8f0; color: #475569; border-color: #cbd5e1; }
.status-incomplete                 { background: #fff3cd; color: #856404; border-color: #fde68a; }

/* ─── PAYMENT TABLE ───────────────────────────────────── */
.card { border-radius: 14px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.billing-table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 0.875rem; }
.billing-table thead tr { background: color-mix(in srgb, var(--accent) 5%, var(--card-bg,#fff)); border-bottom: 1.5px solid var(--border,#eee); }
.billing-table th { padding: 0.85rem 1rem; text-align: left; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted,#999); white-space: nowrap; }

.payment-row {
    border-bottom: 1px solid var(--border,#f0f0f0);
    animation: rowFadeIn 0.35s ease calc(0.22s + var(--row-index) * 0.04s) both;
    transition: background 0.15s;
}
.payment-row:last-child { border-bottom: none; }
.payment-row:hover { background: color-mix(in srgb, var(--accent) 4%, var(--card-bg,#fff)); }
.billing-table td { padding: 0.85rem 1rem; vertical-align: middle; }

.date-value { display: flex; flex-direction: column; gap: 0.1rem; font-weight: 600; font-size: 0.875rem; color: var(--text,#222); }
.date-time { font-size: 0.75rem; color: var(--text-muted,#aaa); font-weight: 400; }
.type-value { font-size: 0.875rem; color: var(--text,#333); }
.amount-value { font-weight: 700; font-size: 0.9rem; color: var(--text,#111); }
.currency { font-size: 0.75rem; color: var(--text-muted,#999); font-weight: 500; }
.text-muted-sm { color: var(--text-muted,#bbb); font-size: 0.85rem; }

.invoice-links { display: flex; align-items: center; gap: 0.45rem; }
.invoice-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    border: 1.5px solid var(--border,#ddd);
    border-radius: 7px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    transition: all 0.16s;
    white-space: nowrap;
}
.invoice-link:hover { background: var(--accent); color: #fff; border-color: var(--accent); transform: translateY(-1px); text-decoration: none; }

/* ─── EMPTY STATES ────────────────────────────────────── */
.empty-card { border-radius: 14px !important; }
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    padding: 2.5rem 1rem;
    color: var(--text-muted,#bbb);
    text-align: center;
}
.empty-state svg { opacity: 0.35; }
.empty-state p { margin: 0; font-size: 0.9rem; }

/* ─── PAGINATION ──────────────────────────────────────── */
.pagination-wrap { padding: 1rem; border-top: 1px solid var(--border,#f0f0f0); }
.pagination-wrap nav ul { display: flex !important; flex-wrap: wrap; gap: 0.35rem; list-style: none !important; padding: 0 !important; margin: 0 !important; }
.pagination-wrap nav ul li { display: inline-flex !important; }
.pagination-wrap nav ul li a,
.pagination-wrap nav ul li span { display: inline-flex !important; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 0.4rem; border: 1.5px solid var(--border,#e0e0e0); border-radius: 8px; color: var(--accent); text-decoration: none; font-size: 0.85rem; font-weight: 500; transition: all 0.18s; }
.pagination-wrap nav ul li a:hover { background: var(--accent); color: #fff; border-color: var(--accent); transform: translateY(-1px); }
.pagination-wrap nav ul li.active span { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); border-color: var(--accent); font-weight: 700; }
.pagination-wrap nav ul li.disabled span { opacity: 0.45; }

/* ─── KEYFRAMES ───────────────────────────────────────── */
@keyframes fadeSlideDown { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeSlideUp   { from { opacity: 0; transform: translateY(14px);  } to { opacity: 1; transform: translateY(0); } }
@keyframes rowFadeIn     { from { opacity: 0; transform: translateX(-8px);  } to { opacity: 1; transform: translateX(0); } }

/* ─── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 700px) {
    .page-header-bar { flex-direction: column; align-items: stretch; }
    .header-actions { justify-content: flex-start; }
    .sub-details-grid { grid-template-columns: 1fr; gap: 0.75rem; }
    .page-title { font-size: 1.2rem; }
}
@media (max-width: 480px) {
    .subscription-header { flex-direction: column; }
    .sub-amount { font-size: 1.1rem; }
}

/* ── Invoice Modal Content ── */
.invoice-modal { background: #fff; border: 0.5px solid #e5e7eb; border-radius: 12px; padding: 2rem 1.5rem; text-align: center; max-width: 400px; margin: 0 auto; }
.invoice-modal__status { font-size: 0.75rem; font-weight: 600; text-transform: none; letter-spacing: 0.02em; color: #16a34a; margin-bottom: 0.5rem; }
.invoice-modal__amount { font-size: 2rem; font-weight: 700; color: #111827; margin-bottom: 0.25rem; }
.invoice-modal__subtitle { font-size: 0.875rem; color: #6b7280; margin-bottom: 1.5rem; }
.invoice-modal__details { background: #f9fafb; border: 0.5px solid #e5e7eb; border-radius: 8px; padding: 0.75rem 1rem; margin-bottom: 1.25rem; text-align: left; }
.invoice-detail-row { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border-bottom: 0.5px solid #f0f0f0; font-size: 0.875rem; }
.invoice-detail-row:last-child { border-bottom: none; }
.invoice-detail-label { color: #6b7280; }
.invoice-detail-value { font-weight: 500; color: #111827; text-align: right; max-width: 60%; word-break: break-all; }
.invoice-modal__actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.invoice-btn { display: inline-flex; align-items: center; padding: 0.5rem 1.1rem; border-radius: 8px; font-size: 0.875rem; font-weight: 600; text-decoration: none; transition: all 0.18s; cursor: pointer; }
.invoice-btn--primary { background: #e31e52; color: #fff; border: none; }
.invoice-btn--primary:hover { background: #b01840; color: #fff; }
</style>
@endpush