@extends('layouts.app')

@section('title', 'Stripe Subscriptions')

@section('content')
    <h1>Stripe Subscriptions</h1>
    <p class="stripe-page-desc">Subscription history across all users.</p>

    <div class="stripe-panel">
        <div class="stripe-panel-header">
            <span class="stripe-panel-title"><i class="bi bi-funnel me-1"></i>Filters</span>
            <form method="get" action="{{ route('admin.stripe-subscriptions.index') }}" class="stripe-per-page-form">
                @foreach (request()->except('per_page', 'page') as $key => $value)
                    @if (!is_array($value))
                        <input type="hidden" name="{{ $key }}" value="{{ $value }}">
                    @endif
                @endforeach
                <label for="stripe-per-page">Per page</label>
                <select id="stripe-per-page" name="per_page" class="form-control stripe-per-page-select"
                    onchange="this.form.submit()">
                    @foreach ($perPageOptions as $n)
                        <option value="{{ $n }}"
                            {{ ($listType === 'subscription' ? $subscriptions?->perPage() : $oneTimePayments?->perPage()) == $n ? 'selected' : '' }}>
                            {{ $n }}</option>
                    @endforeach
                </select>
            </form>
        </div>

        <form method="get" action="{{ route('admin.stripe-subscriptions.index') }}" class="stripe-search-form">
            <div class="stripe-search-grid">
                <div class="stripe-search-field">
                    <label for="stripe-list-type">Type</label>
                    <select id="stripe-list-type" name="list_type" class="form-control">
                        <option value="subscription"
                            {{ ($filters['list_type'] ?? 'subscription') === 'subscription' ? 'selected' : '' }}>
                            Subscription</option>
                        <option value="one_time" {{ ($filters['list_type'] ?? '') === 'one_time' ? 'selected' : '' }}>
                            One-time</option>
                    </select>
                </div>
                <div class="stripe-search-field">
                    <label for="stripe-search-name">Customer name</label>
                    <input type="text" id="stripe-search-name" name="name" value="{{ $filters['name'] ?? '' }}"
                        placeholder="Search by name" class="form-control">
                </div>
                <div class="stripe-search-field">
                    <label for="stripe-search-email">Email</label>
                    <input type="text" id="stripe-search-email" name="email" value="{{ $filters['email'] ?? '' }}"
                        placeholder="Search by email" class="form-control">
                </div>
                @if (($filters['list_type'] ?? 'subscription') === 'subscription')
                    <div class="stripe-search-field">
                        <label for="stripe-search-id">Stripe Subscription ID</label>
                        <input type="text" id="stripe-search-id" name="stripe_subscription_id"
                            value="{{ $filters['stripe_subscription_id'] ?? '' }}" placeholder="e.g. sub_xxx"
                            class="form-control">
                    </div>
                    <div class="stripe-search-field">
                        <label for="stripe-search-status">Status</label>
                        <select id="stripe-search-status" name="status" class="form-control">
                            <option value="">All statuses</option>
                            <option value="active" {{ ($filters['status'] ?? '') === 'active' ? 'selected' : '' }}>Active
                            </option>
                            <option value="trialing" {{ ($filters['status'] ?? '') === 'trialing' ? 'selected' : '' }}>
                                Trialing</option>
                            <option value="canceled" {{ ($filters['status'] ?? '') === 'canceled' ? 'selected' : '' }}>
                                Canceled</option>
                            <option value="past_due" {{ ($filters['status'] ?? '') === 'past_due' ? 'selected' : '' }}>Past
                                due</option>
                            <option value="incomplete" {{ ($filters['status'] ?? '') === 'incomplete' ? 'selected' : '' }}>
                                Incomplete</option>
                        </select>
                    </div>
                @else
                    <div class="stripe-search-field">
                        <label for="stripe-search-status">Status</label>
                        <select id="stripe-search-status" name="status" class="form-control">
                            <option value="">All statuses</option>
                            <option value="paid" {{ ($filters['status'] ?? '') === 'paid' ? 'selected' : '' }}>Paid
                            </option>
                            <option value="failed" {{ ($filters['status'] ?? '') === 'failed' ? 'selected' : '' }}>Failed
                            </option>
                            <option value="refunded" {{ ($filters['status'] ?? '') === 'refunded' ? 'selected' : '' }}>
                                Refunded</option>
                        </select>
                    </div>
                @endif
                <div class="stripe-search-actions text-center">
                    <button type="submit" class="btn">Search</button>
                    <a href="{{ route('admin.stripe-subscriptions.index') }}" class="btn btn-outline text-center">Clear</a>
                </div>
            </div>
            <input type="hidden" name="per_page" value="{{ request()->input('per_page', 25) }}">
        </form>

        @if ($listType === 'subscription')
            <div class="stripe-table-wrap">
                <div class="stripe-table-scroll">
                    <table class="stripe-table">
                        <thead>
                            <tr>
                                <th>User</th>
                                <th>Email</th>
                                <th>Service / Plan</th>
                                <!-- <th>Stripe Customer ID</th>
                                <th>Stripe Subscription ID</th> -->
                                <th>Status</th>
                                <th>Period Start</th>
                                <th>Period End</th>
                                <th>Next Payment</th>
                                <th>Amount</th>
                                <th>Created</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($subscriptions as $sub)
                                <tr>
                                    <td>{{ $sub->user?->name ?? '—' }}</td>
                                    <td>{{ $sub->user?->email ?? '—' }}</td>
                                    <td>{{ $sub->order?->product_display_name ?? ($sub->provider_product_id ?? '—') }}</td>
                                    <!-- <td><code class="stripe-id">{{ $sub->stripe_customer_id ?: '—' }}</code></td> -->
                                    <!-- <td><code class="stripe-id">{{ $sub->stripe_subscription_id ?: '—' }}</code></td> -->
                                    <td><span
                                            class="status-badge status-{{ $sub->status }}">{{ ucfirst(str_replace('_', ' ', $sub->status)) }}</span>
                                    </td>
                                    <td>{{ $sub->current_period_start ? $sub->current_period_start->format('d/m/Y') : '—' }}
                                    </td>
                                    <td>{{ $sub->current_period_end ? $sub->current_period_end->format('d/m/Y') : '—' }}
                                    </td>
                                    <td>{{ $sub->current_period_end && in_array($sub->status, ['active', 'trialing']) ? $sub->current_period_end->format('d/m/Y') : '—' }}
                                    </td>
                                    <td>{{ $sub->order ? '$' . number_format((float) $sub->order->product_price, 2) . '/mo' : '—' }}
                                    </td>
                                    <td>{{ $sub->created_at->format('d/m/Y') }}</td>
                                    <td>
                                        <a href="{{ route('admin.stripe-subscriptions.show', $sub) }}"
                                            class="btn btn-outline btn-sm">View Details</a>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="12" class="text-center text-muted">No subscriptions found.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
            @if ($subscriptions && ($subscriptions->hasPages() || $subscriptions->total() > 0))
                <div class="stripe-panel-footer">
                    <p class="pagination-info">Showing {{ $subscriptions->firstItem() ?? 0 }} to
                        {{ $subscriptions->lastItem() ?? 0 }} of {{ $subscriptions->total() }} results.</p>
                    @if ($subscriptions->hasPages())
                        {{ $subscriptions->links('vendor.pagination.default') }}
                    @endif
                </div>
            @endif
        @else
            <div class="stripe-table-wrap">
                <div class="stripe-table-scroll">
                    <table class="stripe-table stripe-table-onetime">
                        <thead>
                            <tr>
                                <th>User</th>
                                <th>Email</th>
                                <th>Amount</th>
                                <th>Currency</th>
                                <th>Status</th>
                                <th>Date</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($oneTimePayments as $ph)
                                <tr>
                                    <td>{{ $ph->user?->name ?? '—' }}</td>
                                    <td>{{ $ph->user?->email ?? '—' }}</td>
                                    <td>{{ $ph->formatted_amount }}</td>
                                    <td>{{ strtoupper($ph->currency ?? '') }}</td>
                                    <td><span
                                            class="status-badge status-{{ $ph->status }}">{{ ucfirst($ph->status) }}</span>
                                    </td>
                                    <td>{{ $ph->created_at->format('d/m/Y H:i') }}</td>
                                    <td>
                                        @if ($ph->user && ($ph->invoice_hosted_url || $ph->invoice_pdf_url || $ph->stripe_invoice_id))
                                            <a href="{{ route('admin.users.billing.invoice.download', [$ph->user, $ph]) }}"
                                                class="btn btn-outline btn-sm">Download PDF</a>
                                        @else
                                            —
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="text-center text-muted">No one-time payments found.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
            @if ($oneTimePayments && ($oneTimePayments->hasPages() || $oneTimePayments->total() > 0))
                <div class="stripe-panel-footer">
                    <p class="pagination-info">Showing {{ $oneTimePayments->firstItem() ?? 0 }} to
                        {{ $oneTimePayments->lastItem() ?? 0 }} of {{ $oneTimePayments->total() }} results.</p>
                    @if ($oneTimePayments->hasPages())
                        {{ $oneTimePayments->links('vendor.pagination.default') }}
                    @endif
                </div>
            @endif
        @endif
    </div>
@endsection

@push('styles')
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        /* ── Keyframes ── */
        @keyframes fadeSlideUp {
            from { opacity: 0; transform: translateY(28px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes fadeSlideDown {
            from { opacity: 0; transform: translateY(-18px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes fadeSlideRight {
            from { opacity: 0; transform: translateX(-24px); }
            to   { opacity: 1; transform: translateX(0); }
        }
        @keyframes scaleIn {
            from { opacity: 0; transform: scale(.94); }
            to   { opacity: 1; transform: scale(1); }
        }
        @keyframes shimmer {
            0%   { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }
        @keyframes headingLine {
            from { width: 0; }
            to   { width: 60px; }
        }
        @keyframes rowFadeIn {
            from { opacity: 0; transform: translateX(-12px); }
            to   { opacity: 1; transform: translateX(0); }
        }
        @keyframes badgePop {
            0%   { transform: scale(0); }
            60%  { transform: scale(1.15); }
            100% { transform: scale(1); }
        }
        @keyframes pulseGlow {
            0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb, 227,30,82), .18); }
            50%      { box-shadow: 0 0 0 8px rgba(var(--accent-rgb, 227,30,82), 0); }
        }

        /* ── Page Title ── */
        h1 {
            color: var(--accent);
            font-weight: 800;
            font-size: clamp(1.5rem, 4vw, 2rem);
            position: relative;
            display: inline-block;
            opacity: 0;
            animation: fadeSlideRight .65s cubic-bezier(.22,1,.36,1) .05s forwards;
            letter-spacing: -.3px;
        }
        h1::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -8px;
            height: 3.5px;
            width: 0;
            border-radius: 4px;
            background: linear-gradient(90deg, var(--accent), transparent);
            animation: headingLine .7s .5s cubic-bezier(.22,1,.36,1) forwards;
        }

        .stripe-page-desc {
            color: var(--text-muted, #666);
            margin-bottom: 1.5rem;
            font-size: .925rem;
            opacity: 0;
            animation: fadeSlideRight .6s cubic-bezier(.22,1,.36,1) .15s forwards;
        }

        /* ── Panel ── */
        .stripe-panel {
            background: #fff;
            border: 1px solid var(--border, #e5e7eb);
            border-radius: 14px;
            overflow: visible;
            box-shadow: 0 1px 4px rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.03);
            width: 100%;
            max-width: 100%;
            box-sizing: border-box;
            opacity: 0;
            animation: fadeSlideUp .65s cubic-bezier(.22,1,.36,1) .2s forwards;
            transition: box-shadow .35s ease;
        }
        .stripe-panel:hover {
            box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 12px 36px rgba(0,0,0,.06);
        }

        /* ── Panel Header ── */
        .stripe-panel-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 0.75rem;
            padding: 1rem 1.5rem;
            background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
            border-bottom: 1px solid var(--border, #e5e7eb);
            border-radius: 14px 14px 0 0;
        }

        .stripe-panel-title {
            font-size: 0.9375rem;
            font-weight: 700;
            color: var(--text, #1a1a1a);
            display: flex;
            align-items: center;
            gap: .4rem;
        }
        .stripe-panel-title i {
            color: var(--accent);
            font-size: 1rem;
        }

        .stripe-per-page-form {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .stripe-per-page-form label {
            font-size: 0.8125rem;
            color: var(--text-muted, #666);
            margin: 0;
            font-weight: 500;
        }

        .stripe-per-page-select {
            width: auto;
            padding: 0.4rem 0.65rem;
            font-size: 0.875rem;
            border: 1px solid var(--border);
            border-radius: 8px;
            min-width: 4rem;
            background: #fff;
            transition: border-color .25s, box-shadow .25s;
            cursor: pointer;
        }
        .stripe-per-page-select:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(227, 30, 82, 0.1);
        }
        .stripe-per-page-select:hover {
            border-color: var(--accent);
        }

        /* ── Search Form ── */
        .stripe-search-form {
            padding: 1.5rem;
            border-bottom: 1px solid var(--border, #e5e7eb);
            background: linear-gradient(180deg, transparent 0%, rgba(250,250,250,.4) 100%);
        }

        .stripe-search-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
            gap: 1rem;
            align-items: end;
        }

        .stripe-search-field {
            opacity: 0;
            animation: fadeSlideUp .45s cubic-bezier(.22,1,.36,1) forwards;
        }
        .stripe-search-field:nth-child(1) { animation-delay: .3s; }
        .stripe-search-field:nth-child(2) { animation-delay: .37s; }
        .stripe-search-field:nth-child(3) { animation-delay: .44s; }
        .stripe-search-field:nth-child(4) { animation-delay: .51s; }
        .stripe-search-field:nth-child(5) { animation-delay: .58s; }

        .stripe-search-field label {
            display: block;
            font-size: 0.7rem;
            font-weight: 700;
            color: var(--text-muted, #666);
            margin-bottom: 0.4rem;
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }

        .stripe-search-field .form-control {
            width: 100%;
            padding: 0.55rem 0.85rem;
            font-size: 0.9rem;
            border: 1.5px solid var(--border);
            border-radius: 9px;
            box-sizing: border-box;
            background: #fff;
            transition: border-color .25s cubic-bezier(.22,1,.36,1),
                        box-shadow .25s cubic-bezier(.22,1,.36,1),
                        transform .2s;
        }

        .stripe-search-field .form-control:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(227, 30, 82, 0.1);
            transform: translateY(-1px);
        }
        .stripe-search-field .form-control:hover:not(:focus) {
            border-color: #ccc;
        }

        .stripe-search-actions {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
            align-items: stretch;
            opacity: 0;
            animation: fadeSlideUp .45s cubic-bezier(.22,1,.36,1) .62s forwards;
        }

        .stripe-search-actions .btn {
            padding: 0.55rem 1.15rem;
            font-size: 0.875rem;
            border-radius: 9px;
            font-weight: 600;
            position: relative;
            overflow: hidden;
            transition: all .3s cubic-bezier(.22,1,.36,1);
        }
        .stripe-search-actions .btn::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
            background-size: 200% 100%;
            opacity: 0;
            transition: opacity .3s;
        }
        .stripe-search-actions .btn:hover::after {
            opacity: 1;
            animation: shimmer 1s;
        }
        .stripe-search-actions .btn:active {
            transform: scale(.96);
        }

        /* ── Table ── */
        .stripe-table-wrap {
            width: 100%;
            max-width: 100%;
            min-width: 0;
            margin-bottom: 0;
        }

        .stripe-table-scroll {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            width: 100%;
            max-width: 100%;
        }
        /* custom scrollbar */
        .stripe-table-scroll::-webkit-scrollbar {
            height: 6px;
        }
        .stripe-table-scroll::-webkit-scrollbar-track {
            background: #f0f0f0;
            border-radius: 4px;
        }
        .stripe-table-scroll::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 4px;
            transition: background .3s;
        }
        .stripe-table-scroll::-webkit-scrollbar-thumb:hover {
            background: var(--accent);
        }

        .stripe-table {
            width: 100%;
            border-collapse: collapse;
            min-width: 720px;
        }

        .stripe-table.stripe-table-onetime {
            min-width: 560px;
        }

        .stripe-table th,
        .stripe-table td {
            padding: 0.75rem 1.1rem;
            text-align: left;
            border-bottom: 1px solid var(--border, #e5e7eb);
            font-size: 0.855rem;
            white-space: nowrap;
        }

        .stripe-table th {
            font-weight: 700;
            color: var(--text-muted, #666);
            background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
            font-size: .75rem;
            text-transform: uppercase;
            letter-spacing: .04em;
            position: sticky;
            top: 0;
            z-index: 2;
        }

        .stripe-table tbody tr {
            opacity: 0;
            animation: rowFadeIn .4s cubic-bezier(.22,1,.36,1) forwards;
            transition: background .25s ease, transform .2s ease;
        }
        /* stagger rows */
        .stripe-table tbody tr:nth-child(1)  { animation-delay: .35s; }
        .stripe-table tbody tr:nth-child(2)  { animation-delay: .39s; }
        .stripe-table tbody tr:nth-child(3)  { animation-delay: .43s; }
        .stripe-table tbody tr:nth-child(4)  { animation-delay: .47s; }
        .stripe-table tbody tr:nth-child(5)  { animation-delay: .51s; }
        .stripe-table tbody tr:nth-child(6)  { animation-delay: .55s; }
        .stripe-table tbody tr:nth-child(7)  { animation-delay: .59s; }
        .stripe-table tbody tr:nth-child(8)  { animation-delay: .63s; }
        .stripe-table tbody tr:nth-child(9)  { animation-delay: .67s; }
        .stripe-table tbody tr:nth-child(10) { animation-delay: .71s; }
        .stripe-table tbody tr:nth-child(n+11) { animation-delay: .75s; }

        .stripe-table tbody tr:hover {
            background: rgba(var(--accent-rgb, 227,30,82), .03);
        }

        .stripe-table tbody tr:last-child td {
            border-bottom: none;
        }

        .stripe-table .stripe-id {
            white-space: normal;
            word-break: break-all;
        }

        .stripe-id {
            font-size: 0.72rem;
            background: linear-gradient(135deg, #f5f5f5, #eee);
            padding: 0.22rem 0.5rem;
            border-radius: 6px;
            word-break: break-all;
            font-family: 'SFMono-Regular', Consolas, monospace;
            color: #555;
            border: 1px solid rgba(0,0,0,.06);
            transition: background .25s, color .25s;
        }
        .stripe-table tbody tr:hover .stripe-id {
            background: linear-gradient(135deg, #eee, #e8e8e8);
            color: #333;
        }

        /* ── Status Badges ── */
        .status-badge {
            display: inline-flex;
            align-items: center;
            gap: .35rem;
            padding: 0.28rem 0.65rem;
            border-radius: 50rem;
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: .02em;
            text-transform: capitalize;
            animation: badgePop .4s .5s cubic-bezier(.22,1,.36,1) both;
            transition: transform .2s, box-shadow .2s;
            position: relative;
        }
        .status-badge:hover {
            transform: scale(1.05);
        }
        .status-badge::before {
            content: '';
            width: 6px;
            height: 6px;
            border-radius: 50%;
            flex-shrink: 0;
        }

        .status-active::before,
        .status-trialing::before,
        .status-paid::before {
            background: #155724;
        }
        .status-active,
        .status-trialing,
        .status-paid {
            background: linear-gradient(135deg, #d4edda, #c3e6cb);
            color: #155724;
            box-shadow: 0 1px 4px rgba(21,87,36,.1);
        }

        .status-canceled::before,
        .status-cancelled::before {
            background: #475569;
        }
        .status-canceled,
        .status-cancelled {
            background: linear-gradient(135deg, #e2e8f0, #dde3eb);
            color: #475569;
            box-shadow: 0 1px 4px rgba(71,85,105,.08);
        }

        .status-past_due::before,
        .status-incomplete::before,
        .status-failed::before {
            background: #721c24;
            animation: pulseGlow 2s infinite;
        }
        .status-past_due,
        .status-incomplete,
        .status-failed {
            background: linear-gradient(135deg, #f8d7da, #f5c6cb);
            color: #721c24;
            box-shadow: 0 1px 4px rgba(114,28,36,.1);
        }

        .status-refunded::before {
            background: #475569;
        }
        .status-refunded {
            background: linear-gradient(135deg, #e2e8f0, #dde3eb);
            color: #475569;
            box-shadow: 0 1px 4px rgba(71,85,105,.08);
        }

        /* ── Action Buttons ── */
        .btn-sm {
            padding: 0.4rem 0.8rem;
            font-size: 0.79rem;
            border-radius: 8px;
            font-weight: 600;
            transition: all .25s cubic-bezier(.22,1,.36,1);
            position: relative;
            overflow: hidden;
        }
        .btn-sm::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.15) 50%, transparent 70%);
            background-size: 200% 100%;
            opacity: 0;
            transition: opacity .3s;
        }
        .btn-sm:hover::after {
            opacity: 1;
            animation: shimmer 1s;
        }
        .btn-sm:hover {
            transform: translateY(-1px);
            box-shadow: 0 3px 10px rgba(0,0,0,.08);
        }
        .btn-sm:active {
            transform: scale(.96);
        }

        .text-center {
            text-align: center;
        }

        .stripe-section-title {
            font-size: 1rem;
            font-weight: 600;
            color: var(--accent);
            padding: 1rem 1.25rem 0.5rem;
            border-top: 1px solid var(--border, #e5e7eb);
            margin-top: 0.5rem;
        }

        .stripe-section-title:first-of-type {
            border-top: none;
            margin-top: 0;
            padding-top: 0;
        }

        /* ── Panel Footer ── */
        .stripe-panel-footer {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-end;
            gap: 1rem;
            padding: 1rem 1.5rem;
            background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
            border-top: 1px solid var(--border, #e5e7eb);
            border-radius: 0 0 14px 14px;
            opacity: 0;
            animation: fadeSlideUp .5s .6s cubic-bezier(.22,1,.36,1) forwards;
        }

        .pagination-info {
            font-size: 0.855rem;
            color: var(--text-muted);
            margin: 0;
            font-weight: 500;
        }

        .stripe-panel-footer nav ul.pagination {
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: wrap;
            gap: 0.35rem;
            list-style: none !important;
            padding: 0 !important;
            margin: 0 !important;
            align-items: center;
        }

        .stripe-panel-footer nav ul.pagination li {
            display: inline-flex !important;
        }

        .stripe-panel-footer nav ul.pagination li a,
        .stripe-panel-footer nav ul.pagination li span {
            display: inline-flex !important;
            align-items: center;
            justify-content: center;
            min-width: 2.5rem;
            min-height: 2.5rem;
            padding: 0.4rem 0.65rem;
            border: 1.5px solid var(--border);
            border-radius: 9px;
            color: var(--accent);
            text-decoration: none;
            font-size: 0.875rem;
            font-weight: 600;
            transition: all .25s cubic-bezier(.22,1,.36,1);
        }

        .stripe-panel-footer nav ul.pagination li a:hover {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
            transform: translateY(-1px);
            box-shadow: 0 3px 10px rgba(227, 30, 82, .15);
        }

        .stripe-panel-footer nav ul.pagination li.active span {
            background: var(--accent);
            color: #fff;
            border-color: var(--accent);
            box-shadow: 0 2px 8px rgba(227, 30, 82, .2);
        }

        .stripe-panel-footer nav ul.pagination li.disabled span {
            color: var(--text-muted);
            cursor: not-allowed;
            background: #f5f5f5;
            border-color: var(--border);
        }

        /* ── Empty state ── */
        .stripe-table tbody tr td[colspan] {
            padding: 3rem 1rem;
            font-size: .925rem;
            color: var(--text-muted);
        }

        /* ── Responsive ── */
        @media (max-width: 767.98px) {
            .stripe-panel-header {
                padding: .85rem 1rem;
                border-radius: 14px 14px 0 0;
            }
            .stripe-search-form {
                padding: 1rem;
            }
            .stripe-search-grid {
                grid-template-columns: 1fr;
                gap: .85rem;
            }
            .stripe-search-actions {
                flex-direction: column;
            }
            .stripe-search-actions .btn {
                width: 100%;
                justify-content: center;
            }
            .stripe-table th,
            .stripe-table td {
                padding: .6rem .75rem;
                font-size: .8rem;
            }
            .stripe-panel-footer {
                padding: .85rem 1rem;
                flex-direction: column;
                align-items: stretch;
                text-align: center;
            }
            .stripe-panel-footer nav ul.pagination {
                justify-content: center;
            }
        }

        @media (max-width: 575.98px) {
            h1 { font-size: 1.4rem; }
            .stripe-per-page-form label { display: none; }
            .stripe-panel-footer nav ul.pagination li a,
            .stripe-panel-footer nav ul.pagination li span {
                min-width: 2.2rem;
                min-height: 2.2rem;
                font-size: .8rem;
                padding: .3rem .5rem;
            }
        }

        /* ── Dark mode ── */
        [data-bs-theme="dark"] .stripe-panel {
            background: #1e1e2e;
            border-color: rgba(255,255,255,.08);
        }
        [data-bs-theme="dark"] .stripe-panel-header,
        [data-bs-theme="dark"] .stripe-panel-footer {
            background: #1a1a28;
        }
        [data-bs-theme="dark"] .stripe-table th {
            background: #1a1a28;
        }
        [data-bs-theme="dark"] .stripe-table tbody tr:hover {
            background: rgba(255,255,255,.03);
        }
        [data-bs-theme="dark"] .stripe-id {
            background: rgba(255,255,255,.06);
            border-color: rgba(255,255,255,.08);
            color: #aaa;
        }
        [data-bs-theme="dark"] .stripe-search-field .form-control {
            background: #252536;
            border-color: rgba(255,255,255,.1);
            color: #e0e0e0;
        }
        [data-bs-theme="dark"] .stripe-per-page-select {
            background: #252536;
            border-color: rgba(255,255,255,.1);
            color: #e0e0e0;
        }

        /* ── Reduced motion ── */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-delay: 0ms !important;
                transition-duration: 0.01ms !important;
            }
        }
    </style>
@endpush