@extends('layouts.app')

@section('title', 'Subscription Details – ' . ($subscription->stripe_subscription_id ?? $subscription->id))

@section('content')
<div class="stripe-detail-header">
    <div class="stripe-detail-header-left">
        <h1><i class="bi bi-credit-card-2-front me-2"></i>Subscription Details</h1>
        <p class="stripe-detail-sub-id">
            <code>{{ $subscription->stripe_subscription_id ?? 'ID: ' . $subscription->id }}</code>
        </p>
    </div>
    <a href="{{ route('admin.stripe-subscriptions.index') }}" class="btn btn-outline"><i class="bi bi-arrow-left me-1"></i> Back to Subscriptions</a>
</div>

@if(session('success'))
<div class="alert alert-success"><i class="bi bi-check-circle-fill me-2"></i>{{ session('success') }}</div>
@endif
@if(session('error'))
<div class="alert alert-error"><i class="bi bi-exclamation-triangle-fill me-2"></i>{{ session('error') }}</div>
@endif

<div class="stripe-detail-grid">
    <div class="card stripe-detail-card stripe-detail-card--animated" style="--card-delay: .1s">
        <div class="stripe-detail-card-header">
            <span class="stripe-detail-card-icon stripe-detail-card-icon--primary"><i class="bi bi-person-circle"></i></span>
            <h3>Subscription &amp; User</h3>
        </div>
        <table class="stripe-detail-table">
            <tr><th>User</th><td><a href="{{ route('admin.users.show', $subscription->user) }}">{{ $subscription->user?->name ?? '—' }}</a></td></tr>
            <tr><th>Email</th><td>{{ $subscription->user?->email ?? '—' }}</td></tr>
            <tr><th>Service / Plan</th><td>{{ $subscription->order?->product_display_name ?? $subscription->provider_product_id ?? '—' }}</td></tr>
            <tr><th>Status</th><td><span class="status-badge status-{{ $subscription->status }}">{{ ucfirst($subscription->status) }}</span></td></tr>
            @if($subscription->payment_failure_reason)
            <tr><th>Payment failure</th><td>{{ $subscription->payment_failure_reason }}</td></tr>
            @endif
            <tr><th>Amount</th><td>{{ $subscription->order ? '$' . number_format((float) $subscription->order->product_price, 2) . ' / month' : '—' }}</td></tr>
        </table>
    </div>

    <div class="card stripe-detail-card stripe-detail-card--animated" style="--card-delay: .2s">
        <div class="stripe-detail-card-header">
            <span class="stripe-detail-card-icon stripe-detail-card-icon--info"><i class="bi bi-key"></i></span>
            <h3>Stripe Identifiers</h3>
        </div>
        <table class="stripe-detail-table">
            <tr><th>Stripe Customer ID</th><td><code>{{ $subscription->stripe_customer_id ?: '—' }}</code></td></tr>
            <tr><th>Stripe Subscription ID</th><td><code>{{ $subscription->stripe_subscription_id ?: '—' }}</code></td></tr>
            <tr><th>Stripe Price ID</th><td><code>{{ $subscription->stripe_price_id ?: '—' }}</code></td></tr>
        </table>
    </div>
    <div class="card stripe-detail-card stripe-detail-card--animated" style="--card-delay: .3s">
        <div class="stripe-detail-card-header">
            <span class="stripe-detail-card-icon stripe-detail-card-icon--success"><i class="bi bi-clock-history"></i></span>
            <h3>Subscription Timeline</h3>
        </div>
        <ul class="stripe-timeline">
            <li>
                <span class="stripe-timeline-dot"></span>
                <div class="stripe-timeline-content">
                    <strong>Created</strong>
                    <span>{{ $subscription->created_at->format('d/m/Y H:i') }}</span>
                </div>
            </li>
            @if($subscription->current_period_start)
            <li>
                <span class="stripe-timeline-dot"></span>
                <div class="stripe-timeline-content">
                    <strong>Current period start</strong>
                    <span>{{ $subscription->current_period_start->format('d/m/Y') }}</span>
                </div>
            </li>
            @endif
            @if($subscription->current_period_end)
            <li>
                <span class="stripe-timeline-dot"></span>
                <div class="stripe-timeline-content">
                    <strong>Current period end</strong>
                    <span>{{ $subscription->current_period_end->format('d/m/Y') }}</span>
                </div>
            </li>
            @endif
            @if($subscription->cancel_at_period_end)
            <li>
                <span class="stripe-timeline-dot stripe-timeline-dot--warning"></span>
                <div class="stripe-timeline-content">
                    <strong>Cancel at period end</strong>
                    <span>Yes (subscription will not renew)</span>
                </div>
            </li>
            @endif
            @if($subscription->canceled_at)
            <li>
                <span class="stripe-timeline-dot stripe-timeline-dot--danger"></span>
                <div class="stripe-timeline-content">
                    <strong>Canceled at</strong>
                    <span>{{ $subscription->canceled_at->format('d/m/Y H:i') }}</span>
                </div>
            </li>
            @endif
        </ul>
    </div>

</div>

<div class="stripe-detail-grid">
    
</div>

<div class="card stripe-detail-card full-width stripe-detail-card--animated" style="--card-delay: .5s">
    <div class="stripe-detail-card-header">
        <span class="stripe-detail-card-icon stripe-detail-card-icon--primary"><i class="bi bi-receipt"></i></span>
        <h3>Invoice History</h3>
    </div>
    @if($invoiceHistory->isNotEmpty())
    <div class="table-responsive">
        <table class="stripe-detail-data-table">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Type</th>
                    <th>Amount</th>
                    <th>Status</th>
                    <th>Stripe Invoice ID</th>
                    <th>Links</th>
                </tr>
            </thead>
            <tbody>
                @foreach($invoiceHistory as $ph)
                <tr>
                    <td>{{ $ph->created_at->format('d/m/Y H:i') }}</td>
                    <td>{{ ucfirst(str_replace('_', ' ', $ph->type)) }}</td>
                    <td>{{ $ph->formatted_amount }} {{ strtoupper($ph->currency ?? '') }}</td>
                    <td><span class="status-badge status-{{ $ph->status }}">{{ ucfirst($ph->status) }}</span></td>
                    <td><code class="stripe-id">{{ $ph->stripe_invoice_id ?? '—' }}</code></td>
                    <td>
                        @if($ph->invoice_hosted_url)
                        <a href="{{ $ph->invoice_hosted_url }}" target="_blank" rel="noopener" class="stripe-link"><i class="bi bi-box-arrow-up-right me-1"></i>View</a>
                        @endif
                        @if($ph->invoice_hosted_url && ($ph->invoice_pdf_url || $ph->stripe_invoice_id)) | @endif
                        @if($ph->invoice_pdf_url || $ph->stripe_invoice_id)
                        @if($subscription->user)
                        <a href="{{ route('admin.users.billing.invoice.download', [$subscription->user, $ph]) }}" class="stripe-link"><i class="bi bi-download me-1"></i>Download PDF</a>
                        @else
                        —
                        @endif
                        @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    @else
    <div class="stripe-empty-state">
        <i class="bi bi-inbox"></i>
        <p class="text-muted">No invoice records for this subscription.</p>
    </div>
    @endif
</div>

<!-- <div class="card stripe-detail-card full-width stripe-detail-card--animated" style="--card-delay: .6s">
    <div class="stripe-detail-card-header">
        <span class="stripe-detail-card-icon stripe-detail-card-icon--success"><i class="bi bi-credit-card"></i></span>
        <h3>Payment History</h3>
    </div>
    @if($paymentHistory->isNotEmpty())
    <div class="table-responsive">
        <table class="stripe-detail-data-table">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Type</th>
                    <th>Amount</th>
                    <th>Status</th>
                    <th>Failure reason</th>
                </tr>
            </thead>
            <tbody>
                @foreach($paymentHistory as $ph)
                <tr>
                    <td>{{ $ph->created_at->format('d/m/Y H:i') }}</td>
                    <td>{{ ucfirst(str_replace('_', ' ', $ph->type)) }}</td>
                    <td>{{ $ph->formatted_amount }} {{ strtoupper($ph->currency ?? '') }}</td>
                    <td><span class="status-badge status-{{ $ph->status }}">{{ ucfirst($ph->status) }}</span></td>
                    <td>{{ $ph->failure_reason ?? '—' }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    @else
    <div class="stripe-empty-state">
        <i class="bi bi-inbox"></i>
        <p class="text-muted">No payment history for this subscription.</p>
    </div>
    @endif
</div> -->

<div class="stripe-detail-actions stripe-detail-card--animated" style="--card-delay: .7s">
    @if($subscription->user)
    <a href="{{ route('admin.users.billing', $subscription->user) }}" class="btn btn-outline"><i class="bi bi-wallet2 me-1"></i>View user billing</a>
    @endif
    <a href="{{ route('admin.stripe-subscriptions.index') }}" class="btn btn-outline"><i class="bi bi-arrow-left me-1"></i>Back to Subscriptions</a>
</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(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeSlideRight {
    from { opacity: 0; transform: translateX(-24px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes headingLine {
    from { width: 0; }
    to   { width: 60px; }
}
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes badgePop {
    0%   { transform: scale(0); }
    60%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}
@keyframes rowSlideIn {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes timelineDotPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb, 227,30,82), .3); }
    50%      { box-shadow: 0 0 0 6px rgba(var(--accent-rgb, 227,30,82), 0); }
}
@keyframes iconBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}
@keyframes emptyFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

/* ── Card entrance animation ── */
.stripe-detail-card--animated {
    opacity: 0;
    animation: fadeSlideUp .6s cubic-bezier(.22,1,.36,1) var(--card-delay, 0s) forwards;
}

/* ── Header ── */
.stripe-detail-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
    opacity: 0;
    animation: fadeSlideRight .65s cubic-bezier(.22,1,.36,1) .05s forwards;
}
.stripe-detail-header-left {
    flex: 1;
    min-width: 0;
}
.stripe-detail-header h1 {
    margin: 0;
    color: var(--accent);
    font-weight: 800;
    font-size: clamp(1.4rem, 3.5vw, 1.85rem);
    letter-spacing: -.3px;
    display: flex;
    align-items: center;
    gap: .1rem;
    position: relative;
}
.stripe-detail-header 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 .45s cubic-bezier(.22,1,.36,1) forwards;
}
.stripe-detail-header h1 i {
    font-size: 1.3em;
    color: var(--accent);
}
.stripe-detail-sub-id {
    margin: .6rem 0 0 0;
    font-size: .82rem;
}
.stripe-detail-sub-id code {
    background: linear-gradient(135deg, #f5f5f5, #eee);
    padding: .25rem .65rem;
    border-radius: 8px;
    font-size: .78rem;
    font-family: 'SFMono-Regular', Consolas, monospace;
    color: #555;
    border: 1px solid rgba(0,0,0,.06);
}

/* ── Back button ── */
.stripe-detail-header .btn-outline {
    border-radius: 10px;
    font-weight: 600;
    font-size: .875rem;
    padding: .55rem 1.2rem;
    transition: all .3s cubic-bezier(.22,1,.36,1);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    flex-shrink: 0;
}
.stripe-detail-header .btn-outline::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-detail-header .btn-outline:hover::after {
    opacity: 1;
    animation: shimmer 1s;
}
.stripe-detail-header .btn-outline:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.stripe-detail-header .btn-outline:active {
    transform: scale(.97);
}

/* ── Grid ── */
.stripe-detail-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

/* ── Cards ── */
.stripe-detail-card {
    padding: 0;
    border-radius: 14px;
    border: 1px solid var(--border, #e5e7eb);
    box-shadow: 0 1px 4px rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.03);
    overflow: hidden;
    transition: transform .35s cubic-bezier(.22,1,.36,1),
                box-shadow .35s cubic-bezier(.22,1,.36,1),
                border-color .3s;
    position: relative;
    width: 100%
}
.stripe-detail-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), transparent);
    opacity: 0;
    transition: opacity .35s;
}
.stripe-detail-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0,0,0,.06), 0 16px 40px rgba(0,0,0,.06);
    border-color: rgba(var(--accent-rgb, 227,30,82), .15);
}
.stripe-detail-card:hover::before {
    opacity: 1;
}


/* ── Card Header ── */
.stripe-detail-card-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border, #e5e7eb);
    background: linear-gradient(135deg, #fafafa 0%, #f7f7f7 100%);
}
.stripe-detail-card-header h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: -.2px;
}

/* ── Card Icon ── */
.stripe-detail-card-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.1rem;
    transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s;
}
.stripe-detail-card:hover .stripe-detail-card-icon {
    animation: iconBounce 1.5s ease-in-out infinite;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.stripe-detail-card-icon--primary {
    background: rgba(var(--accent-rgb, 227,30,82), .1);
    color: var(--accent);
}
.stripe-detail-card-icon--info {
    background: rgba(13, 202, 240, .1);
    color: #0dcaf0;
}
.stripe-detail-card-icon--success {
    background: rgba(25, 135, 84, .1);
    color: #198754;
}
.stripe-detail-card-icon--warning {
    background: rgba(255, 193, 7, .12);
    color: #cc9a06;
}

/* ── Detail Table ── */
.stripe-detail-table {
    width: 100%;
    border-collapse: collapse;
    padding: 0;
}
.stripe-detail-table th,
.stripe-detail-table td {
    padding: .7rem 1.5rem;
    text-align: left;
    border-bottom: 1px solid var(--border, #e5e7eb);
    font-size: .895rem;
    transition: background .2s;
}
.stripe-detail-table tr:last-child th,
.stripe-detail-table tr:last-child td {
    border-bottom: none;
}
.stripe-detail-table tr {
    opacity: 0;
    animation: rowSlideIn .4s cubic-bezier(.22,1,.36,1) forwards;
}
.stripe-detail-table tr:nth-child(1) { animation-delay: .25s; }
.stripe-detail-table tr:nth-child(2) { animation-delay: .30s; }
.stripe-detail-table tr:nth-child(3) { animation-delay: .35s; }
.stripe-detail-table tr:nth-child(4) { animation-delay: .40s; }
.stripe-detail-table tr:nth-child(5) { animation-delay: .45s; }
.stripe-detail-table tr:hover {
    background: rgba(var(--accent-rgb, 227,30,82), .02);
}
.stripe-detail-table th {
    font-weight: 600;
    color: var(--text-muted, #666);
    width: 40%;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.stripe-detail-table td a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    transition: color .2s;
    position: relative;
}
.stripe-detail-table td a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1.5px;
    background: var(--accent);
    border-radius: 2px;
    transition: width .3s cubic-bezier(.22,1,.36,1);
}
.stripe-detail-table td a:hover::after {
    width: 100%;
}
.stripe-detail-table code {
    font-size: .78rem;
    background: linear-gradient(135deg, #f5f5f5, #eee);
    padding: .22rem .55rem;
    border-radius: 6px;
    word-break: break-all;
    font-family: 'SFMono-Regular', Consolas, monospace;
    color: #555;
    border: 1px solid rgba(0,0,0,.05);
}

/* ── Timeline ── */
.stripe-timeline {
    list-style: none;
    margin: 0;
    padding: .5rem 1.5rem 1rem;
    position: relative;
}
.stripe-timeline::before {
    content: '';
    position: absolute;
    left: 2.3rem;
    top: .8rem;
    bottom: 1.2rem;
    width: 2px;
    background: linear-gradient(180deg, var(--accent), var(--border, #e5e7eb));
    border-radius: 2px;
    opacity: .3;
}
.stripe-timeline li {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: .65rem 0;
    font-size: .895rem;
    position: relative;
    opacity: 0;
    animation: rowSlideIn .4s cubic-bezier(.22,1,.36,1) forwards;
}
.stripe-timeline li:nth-child(1) { animation-delay: .3s; }
.stripe-timeline li:nth-child(2) { animation-delay: .38s; }
.stripe-timeline li:nth-child(3) { animation-delay: .46s; }
.stripe-timeline li:nth-child(4) { animation-delay: .54s; }
.stripe-timeline li:nth-child(5) { animation-delay: .62s; }

.stripe-timeline-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
    margin-top: 4px;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 227,30,82), .15);
    transition: transform .3s, box-shadow .3s;
}
.stripe-timeline li:hover .stripe-timeline-dot {
    transform: scale(1.3);
    animation: timelineDotPulse 1.5s infinite;
}
.stripe-timeline-dot--warning {
    background: #ffc107;
    box-shadow: 0 0 0 3px rgba(255, 193, 7, .2);
}
.stripe-timeline-dot--danger {
    background: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, .2);
}

.stripe-timeline-content {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
.stripe-timeline-content strong {
    font-size: .82rem;
    color: var(--text-muted, #666);
    text-transform: uppercase;
    letter-spacing: .03em;
    font-weight: 700;
}
.stripe-timeline-content span {
    font-size: .9rem;
    color: var(--text, #1a1a1a);
    font-weight: 500;
}

/* ── Data Tables (Invoice / Payment) ── */
.stripe-detail-data-table {
    width: 100%;
    border-collapse: collapse;
}
.stripe-detail-data-table th,
.stripe-detail-data-table td {
    padding: .7rem 1.1rem;
    text-align: left;
    border-bottom: 1px solid var(--border, #e5e7eb);
    font-size: .855rem;
    white-space: nowrap;
    transition: background .2s;
}
.stripe-detail-data-table th {
    font-weight: 700;
    color: var(--text-muted, #666);
    background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
    font-size: .73rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    position: sticky;
    top: 0;
    z-index: 2;
}
.stripe-detail-data-table tbody tr {
    opacity: 0;
    animation: rowSlideIn .4s cubic-bezier(.22,1,.36,1) forwards;
    transition: background .25s;
}
.stripe-detail-data-table tbody tr:nth-child(1) { animation-delay: .35s; }
.stripe-detail-data-table tbody tr:nth-child(2) { animation-delay: .40s; }
.stripe-detail-data-table tbody tr:nth-child(3) { animation-delay: .45s; }
.stripe-detail-data-table tbody tr:nth-child(4) { animation-delay: .50s; }
.stripe-detail-data-table tbody tr:nth-child(5) { animation-delay: .55s; }
.stripe-detail-data-table tbody tr:nth-child(n+6) { animation-delay: .60s; }

.stripe-detail-data-table tbody tr:hover {
    background: rgba(var(--accent-rgb, 227,30,82), .025);
}
.stripe-detail-data-table tbody tr:last-child td {
    border-bottom: none;
}

/* ── Stripe ID chip ── */
.stripe-id {
    font-size: .72rem;
    word-break: break-all;
    background: linear-gradient(135deg, #f5f5f5, #eee);
    padding: .22rem .5rem;
    border-radius: 6px;
    font-family: 'SFMono-Regular', Consolas, monospace;
    color: #555;
    border: 1px solid rgba(0,0,0,.05);
    transition: background .25s, color .25s;
}
.stripe-detail-data-table tbody tr:hover .stripe-id {
    background: linear-gradient(135deg, #eee, #e5e5e5);
    color: #333;
}

/* ── Links in table ── */
.stripe-link {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    font-size: .82rem;
    transition: color .2s;
    white-space: nowrap;
}
.stripe-link:hover {
    text-decoration: underline;
}
.stripe-link i {
    font-size: .72rem;
}

/* ── Status Badges ── */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .65rem;
    border-radius: 50rem;
    font-size: .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;
}
.status-badge:hover {
    transform: scale(1.06);
}
.status-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.status-active::before,
.status-paid::before,
.status-trialing::before {
    background: #155724;
}
.status-active, .status-paid, .status-trialing {
    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-failed::before {
    background: #721c24;
}
.status-failed {
    background: linear-gradient(135deg, #f8d7da, #f5c6cb);
    color: #721c24;
    box-shadow: 0 1px 4px rgba(114,28,36,.1);
}

/* ── Empty State ── */
.stripe-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    gap: .6rem;
}
.stripe-empty-state i {
    font-size: 2.5rem;
    color: var(--border, #ccc);
    animation: emptyFloat 3s ease-in-out infinite;
}
.stripe-empty-state p {
    margin: 0;
    font-size: .925rem;
}

/* ── Actions Footer ── */
.stripe-detail-actions {
    margin-top: 2rem;
    margin-bottom: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}
.stripe-detail-actions .btn {
    border-radius: 10px;
    font-weight: 600;
    font-size: .875rem;
    padding: .55rem 1.25rem;
    transition: all .3s cubic-bezier(.22,1,.36,1);
    position: relative;
    overflow: hidden;
}
.stripe-detail-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-detail-actions .btn:hover::after {
    opacity: 1;
    animation: shimmer 1s;
}
.stripe-detail-actions .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
.stripe-detail-actions .btn:active {
    transform: scale(.97);
}
.stripe-detail-actions .btn i {
    transition: transform .3s;
}
.stripe-detail-actions .btn:hover i {
    transform: translateX(-2px);
}

/* ── Table responsive ── */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table-responsive::-webkit-scrollbar {
    height: 6px;
}
.table-responsive::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 4px;
}
.table-responsive::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
    transition: background .3s;
}
.table-responsive::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

/* ── Alert animations ── */
.alert {
    border-radius: 10px;
    padding: .85rem 1.25rem;
    margin-bottom: 1.25rem;
    font-size: .9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    opacity: 0;
    animation: fadeSlideUp .5s cubic-bezier(.22,1,.36,1) .1s forwards;
}
.alert i {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.text-muted { color: var(--text-muted, #666); }

/* ── Responsive ── */
@media (max-width: 767.98px) {
    .stripe-detail-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .stripe-detail-header .btn-outline {
        align-self: flex-start;
    }
    .stripe-detail-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .stripe-detail-card-header {
        padding: 1rem 1.15rem;
    }
    .stripe-detail-table th,
    .stripe-detail-table td {
        padding: .55rem 1.15rem;
        font-size: .84rem;
    }
    .stripe-detail-table th {
        width: 42%;
    }
    .stripe-timeline {
        padding: .5rem 1.15rem .75rem;
    }
    .stripe-detail-actions {
        flex-direction: column;
    }
    .stripe-detail-actions .btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

@media (max-width: 575.98px) {
    .stripe-detail-header h1 {
        font-size: 1.25rem;
    }
    .stripe-detail-card-header h3 {
        font-size: .95rem;
    }
    .stripe-detail-card-icon {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        font-size: .95rem;
    }
    .stripe-detail-table th {
        width: 38%;
    }
    .stripe-timeline-content strong {
        font-size: .76rem;
    }
    .stripe-timeline-content span {
        font-size: .84rem;
    }
    .stripe-timeline-dot {
        width: 10px;
        height: 10px;
    }
}

/* ── Dark mode ── */
[data-bs-theme="dark"] .stripe-detail-card {
    background: #1e1e2e;
    border-color: rgba(255,255,255,.08);
}
[data-bs-theme="dark"] .stripe-detail-card-header {
    background: #1a1a28;
    border-color: rgba(255,255,255,.06);
}
[data-bs-theme="dark"] .stripe-detail-table code,
[data-bs-theme="dark"] .stripe-id,
[data-bs-theme="dark"] .stripe-detail-sub-id code {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.08);
    color: #aaa;
}
[data-bs-theme="dark"] .stripe-detail-data-table th {
    background: #1a1a28;
}
[data-bs-theme="dark"] .stripe-detail-data-table tbody tr:hover,
[data-bs-theme="dark"] .stripe-detail-table tr:hover {
    background: rgba(255,255,255,.03);
}
[data-bs-theme="dark"] .stripe-timeline::before {
    background: linear-gradient(180deg, var(--accent), rgba(255,255,255,.1));
}

/* ── 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