@extends('layout.layout')

@section('content')
    @include('components.alert')

    @php
        $originalPrice = (float) ($studentInvoice->original_amount ?: $studentInvoice->total_price ?: $studentInvoice->net_price ?: 0);
        $invoiceTotal = (float) ($studentInvoice->final_amount ?: $studentInvoice->net_price ?: $studentInvoice->total_price ?: 0);
        $discountAmount = (float) ($studentInvoice->discount_amount ?? max(0, round($originalPrice - $invoiceTotal, 2)));
        $paidAmount = (float) $studentInvoice->transaction
            ->whereIn('status', ['paid', 'approved'])
            ->sum('amount');
        $remainingAmount = max(0, round($invoiceTotal - $paidAmount, 2));
        $isDepositInvoice = in_array($studentInvoice->payment_status, ['deposite', 'paid_deposite'], true)
            || (float) ($studentInvoice->deposite ?? 0) > 0;
        $invoiceStatusLabel = $studentInvoice->payment_status
            ? ucfirst(str_replace('_', ' ', $studentInvoice->payment_status))
            : 'Not paid';
        $formatDiscount = function ($type, $value) {
            $value = (float) ($value ?? 0);

            if ($value <= 0) {
                return '0';
            }

            return $type === 'percentage'
                ? number_format($value, 0) . '%'
                : number_format($value, 2);
        };
    @endphp

    <div class="container-fluid app-bg invoice-show-page">
        <div class="page-shell">
            <div class="space-y-4">

                <x-page-title
                    title="Invoice Details"
                    description="Review invoice information, student details, transactions, discounts, promocodes, and final total.">
                    <a href="{{ route('invoice') }}" class="asset-btn asset-btn--secondary no-print">
                        <iconify-icon icon="mdi:arrow-left"></iconify-icon>
                        Back to List
                    </a>

                    <button type="button" onclick="window.print()" class="asset-btn asset-btn--secondary no-print">
                        <i class="bi bi-printer"></i>
                        Print Invoice
                    </button>

                    <a href="{{ route('student_invoices.download-pdf', $studentInvoice->id) }}"
                       class="asset-btn asset-btn--primary no-print">
                        <i class="bi bi-download"></i>
                        Download PDF
                    </a>
                </x-page-title>

                <div class="invoice-document-card" id="invoice">

                    <div class="invoice-document-head">
                        <div class="invoice-brand">
                            <div class="invoice-brand__logo-wrap">
                                <img src="{{ asset('assets/images/logo.png') }}" alt="Logo" class="invoice-brand__logo">
                            </div>

                            <div>
                                <h4 class="invoice-brand__name mb-0">Upedia</h4>
                                <p class="invoice-brand__address mb-0">
                                    10062 Al Ahli Bank Building, Main Carrefour Street,<br>
                                    Zahraa Al Maadi, Cairo, Egypt
                                </p>
                            </div>
                        </div>

                        <div class="invoice-meta">
                            <div class="invoice-meta__label">Invoice</div>
                            <div class="invoice-meta__number">
                                {{ $studentInvoice->invoice_number }}
                            </div>
                            <div class="invoice-meta__status">
                                <span class="ui-pill {{ $isDepositInvoice ? 'ui-pill--warn' : ($studentInvoice->payment_status === 'paid' ? 'ui-pill--success' : 'ui-pill--neutral') }}">
                                    {{ $isDepositInvoice ? 'Deposit invoice' : $invoiceStatusLabel }}
                                </span>
                            </div>
                            <div class="invoice-meta__date">
                                Invoice Date: {{ $studentInvoice->created_at->format('Y-m-d') }}
                            </div>
                        </div>
                    </div>

                    <div class="invoice-document-body">

                        <div class="invoice-summary-grid">
                            <div class="invoice-info-card">
                                <div class="invoice-section-head">
                                    <div class="invoice-section-head__icon">
                                        <iconify-icon icon="ri:user-3-line"></iconify-icon>
                                    </div>
                                    <div>
                                        <h5 class="invoice-section-title mb-0">Student Information</h5>
                                        <p class="invoice-section-sub mb-0">Basic student contact details.</p>
                                    </div>
                                </div>

                                <div class="invoice-detail-grid">
                                    <div class="invoice-detail-item">
                                        <div class="invoice-detail-label">Name</div>
                                        <div class="invoice-detail-value">
                                            {{ $studentInvoice->student->first_name ?? '' }}
                                            {{ $studentInvoice->student->last_name ?? '' }}
                                        </div>
                                    </div>

                                    <div class="invoice-detail-item">
                                        <div class="invoice-detail-label">Email</div>
                                        <div class="invoice-detail-value">
                                            {{ $studentInvoice->student->email ?? 'Not available' }}
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="invoice-total-card">
                                <div class="invoice-total-card__label">{{ $isDepositInvoice ? 'Remaining Balance' : 'Final Total' }}</div>
                                <div class="invoice-total-card__value">
                                    {{ number_format($isDepositInvoice ? $remainingAmount : $invoiceTotal, 2) }}
                                </div>
                                <div class="invoice-total-card__sub">
                                    @if ($isDepositInvoice)
                                        Paid {{ number_format($paidAmount, 2) }} from {{ number_format($invoiceTotal, 2) }}.
                                    @else
                                        Net payable amount after discounts and promocodes.
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="invoice-payment-overview">
                            <div>
                                <span>Invoice Type</span>
                                <strong>{{ $isDepositInvoice ? 'Deposit invoice' : 'Full invoice' }}</strong>
                            </div>
                            <div>
                                <span>Invoice Total</span>
                                <strong>{{ number_format($invoiceTotal, 2) }}</strong>
                            </div>
                            <div>
                                <span>Discount Amount</span>
                                <strong>{{ number_format($discountAmount, 2) }}</strong>
                            </div>
                            <div>
                                <span>Paid Before</span>
                                <strong>{{ number_format($paidAmount, 2) }}</strong>
                            </div>
                            <div>
                                <span>Remaining Due</span>
                                <strong>{{ number_format($remainingAmount, 2) }}</strong>
                            </div>
                        </div>

                        <div class="invoice-price-summary">
                            <div class="invoice-summary-row">
                                <span>Original Price</span>
                                <strong>{{ number_format($originalPrice, 2) }}</strong>
                            </div>
                            <div class="invoice-summary-row">
                                <span>Total Discount</span>
                                <strong>{{ number_format($discountAmount, 2) }}</strong>
                            </div>
                            <div class="invoice-summary-row invoice-summary-row--total">
                                <span>Final Total</span>
                                <strong>{{ number_format($invoiceTotal, 2) }}</strong>
                            </div>
                        </div>

                        <div class="invoice-table-card">
                            <div class="invoice-table-head">
                                <div>
                                    <h5 class="invoice-table-title mb-0">Transactions</h5>
                                    <p class="invoice-table-sub mb-0">
                                        Payment attempts, transaction proof, reasons, and status.
                                    </p>
                                </div>

                                <span class="ui-pill ui-pill--info">
                                    {{ $studentInvoice->transaction->count() }} Transaction(s)
                                </span>
                            </div>

                            <div class="invoice-table-wrap">
                                <table class="table invoice-table mb-0">
                                    <thead>
                                        <tr>
                                            <th class="text-center">#</th>
                                            <th class="text-center">Transaction Date</th>
                                            <th class="text-center">Payment Method</th>
                                            <th class="text-center">Amount</th>
                                            <th class="text-center">Transaction Img</th>
                                            <th class="text-center">Reason</th>
                                            <th class="text-center">Status</th>
                                        </tr>
                                    </thead>

                                    <tbody>
                                        @forelse ($studentInvoice->transaction as $index => $transaction)
                                            <tr>
                                                <td class="text-center">
                                                    <span class="invoice-id">
                                                        {{ $index + 1 }}
                                                    </span>
                                                </td>

                                                <td class="text-center">
                                                    {{ $transaction->created_at->format('Y-m-d H:i') }}
                                                </td>

                                                <td class="text-center">
                                                    <span class="ui-pill ui-pill--neutral">
                                                        {{ $transaction->payment_type }}
                                                    </span>
                                                </td>

                                                <td class="text-center">
                                                    <strong>{{ number_format($transaction->amount, 2) }}</strong>
                                                </td>

                                                <td class="text-center">
                                                    @if ($transaction->transaction_img)
                                                        <a href="{{ config('app.crm_url') . '/' . $transaction->transaction_img }}"
                                                           target="_blank"
                                                           class="invoice-img-link">
                                                            <img src="{{ config('app.crm_url') . '/' . $transaction->transaction_img }}"
                                                                 alt="Transaction Image"
                                                                 class="invoice-transaction-img">
                                                        </a>
                                                    @else
                                                        <span class="text-muted">No image</span>
                                                    @endif
                                                </td>

                                                <td class="text-center">
                                                    <span class="invoice-reason">
                                                        {{ $transaction->reason ?? '--' }}
                                                    </span>
                                                </td>

                                                <td class="text-center">
                                                    @if ($transaction->status == 'paid')
                                                        <span class="ui-pill ui-pill--success">Paid</span>
                                                    @elseif ($transaction->status == 'pending')
                                                        <span class="ui-pill ui-pill--warn">Pending</span>
                                                    @else
                                                        <span class="ui-pill ui-pill--danger">Rejected</span>
                                                    @endif
                                                </td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="7">
                                                    <div class="invoice-empty">
                                                        <iconify-icon icon="ri:bank-card-line"></iconify-icon>
                                                        <h6>No transactions found for this invoice.</h6>
                                                        <p>There are no payment records attached to this invoice yet.</p>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="invoice-adjustments-grid">
                            @if ($studentInvoice->discount_plan_id)
                                <div class="invoice-adjustment-card">
                                    <div class="invoice-adjustment-card__head">
                                        <div class="invoice-adjustment-card__icon">
                                            <iconify-icon icon="ri:price-tag-3-line"></iconify-icon>
                                        </div>

                                        <div>
                                            <h5 class="invoice-adjustment-card__title mb-0">Pricing Plan Details</h5>
                                            <p class="invoice-adjustment-card__sub mb-0">Applied discount plan information.</p>
                                        </div>
                                    </div>

                                    <div class="invoice-summary-list">
                                        <div class="invoice-summary-row">
                                            <span>Discount Plan</span>
                                            <strong>{{ $studentInvoice->discount_plan->name_en ?? '' }}</strong>
                                        </div>

                                        <div class="invoice-summary-row">
                                            <span>Total Price</span>
                                            <strong>{{ number_format($originalPrice, 2) }}</strong>
                                        </div>

                                        <div class="invoice-summary-row">
                                            <span>Discount</span>
                                            <strong>{{ $formatDiscount($studentInvoice->discount_plan_type, $studentInvoice->discount_plan_price) }}</strong>
                                        </div>
                                    </div>
                                </div>
                            @endif

                            @if ($studentInvoice->referral_activity_id)
                                <div class="invoice-adjustment-card">
                                    <div class="invoice-adjustment-card__head">
                                        <div class="invoice-adjustment-card__icon invoice-adjustment-card__icon--promo">
                                            <iconify-icon icon="ri:gift-line"></iconify-icon>
                                        </div>

                                        <div>
                                            <h5 class="invoice-adjustment-card__title mb-0">Referral Discount</h5>
                                            <p class="invoice-adjustment-card__sub mb-0">Applied referral reward information.</p>
                                        </div>
                                    </div>

                                    <div class="invoice-summary-list">
                                        <div class="invoice-summary-row">
                                            <span>Referral</span>
                                            <strong>#{{ $studentInvoice->referral_activity_id }}</strong>
                                        </div>

                                        <div class="invoice-summary-row invoice-summary-row--total">
                                            <span>Discount</span>
                                            <strong>{{ $formatDiscount($studentInvoice->referral_activity_type, $studentInvoice->referral_activity_price) }}</strong>
                                        </div>
                                    </div>
                                </div>
                            @endif

                            @if ($studentInvoice->promocode_id)
                                <div class="invoice-adjustment-card">
                                    <div class="invoice-adjustment-card__head">
                                        <div class="invoice-adjustment-card__icon invoice-adjustment-card__icon--promo">
                                            <iconify-icon icon="ri:coupon-3-line"></iconify-icon>
                                        </div>

                                        <div>
                                            <h5 class="invoice-adjustment-card__title mb-0">Promocode Details</h5>
                                            <p class="invoice-adjustment-card__sub mb-0">Applied promocode information.</p>
                                        </div>
                                    </div>

                                    <div class="invoice-summary-list">
                                        <div class="invoice-summary-row">
                                            <span>Promocode</span>
                                            <strong>{{ $studentInvoice->promocode->code ?? '' }}</strong>
                                        </div>

                                        <div class="invoice-summary-row">
                                            <span>Total Price</span>
                                            <strong>{{ number_format($originalPrice, 2) }}</strong>
                                        </div>

                                        <div class="invoice-summary-row">
                                            <span>Discount</span>
                                            <strong>{{ $formatDiscount($studentInvoice->promocode_type, $studentInvoice->promocode_price) }}</strong>
                                        </div>

                                        <div class="invoice-summary-row invoice-summary-row--total">
                                            <span>Net Price</span>
                                            <strong>{{ number_format($studentInvoice->net_price, 2) }}</strong>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>

                        <div class="invoice-final-strip">
                            <div>
                                <div class="invoice-final-strip__label">{{ $isDepositInvoice ? 'Remaining Due' : 'Final Total' }}</div>
                                <div class="invoice-final-strip__sub">
                                    {{ $isDepositInvoice ? 'Amount still required to complete this invoice.' : 'Amount due after all applied deductions.' }}
                                </div>
                            </div>

                            <div class="invoice-final-strip__value">
                                {{ number_format($isDepositInvoice ? $remainingAmount : $invoiceTotal, 2) }}
                            </div>
                        </div>

                    </div>

                    <div class="invoice-document-footer no-print">
                        <a href="{{ route('invoice') }}" class="asset-btn asset-btn--secondary">
                            <iconify-icon icon="mdi:arrow-left"></iconify-icon>
                            Back to List
                        </a>

                        <div class="invoice-document-footer__actions">
                            <button type="button" onclick="window.print()" class="asset-btn asset-btn--secondary">
                                <i class="bi bi-printer"></i>
                                Print Invoice
                            </button>

                            <a href="{{ route('student_invoices.download-pdf', $studentInvoice->id) }}"
                               class="asset-btn asset-btn--primary">
                                <i class="bi bi-download"></i>
                                Download PDF
                            </a>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .invoice-show-page {
            min-height: 100%;
        }

        .invoice-document-card {
            margin: 0 auto;
            border: 1px solid #e5e7eb;
            border-radius: 24px;
            background: #fff;
            box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
            overflow: hidden;
        }

        .invoice-document-head {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 1.5rem;
            padding: 1.5rem;
            background:
                radial-gradient(circle at 10% 10%, rgba(59, 130, 246, 0.12), transparent 35%),
                linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
            border-bottom: 1px solid #eef2f7;
        }

        .invoice-brand {
            display: flex;
            align-items: center;
            gap: 1rem;
            min-width: 0;
        }

        .invoice-brand__logo-wrap {
            width: 72px;
            height: 72px;
            border-radius: 20px;
            border: 1px solid #e5e7eb;
            background: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.7rem;
            flex-shrink: 0;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
        }

        .invoice-brand__logo {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        .invoice-brand__name {
            color: #111827;
            font-weight: 950;
            font-size: 1.25rem !important;
            letter-spacing: -0.01em;
        }

        .invoice-brand__address {
            margin-top: 0.35rem;
            color: #64748b;
            font-size: 0.9rem;
            line-height: 1.55;
        }

        .invoice-meta {
            text-align: right;
            min-width: 240px;
        }

        .invoice-meta__label {
            color: #64748b;
            font-size: 0.78rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-bottom: 0.3rem;
        }

        .invoice-meta__number {
            color: #071b3d;
            font-size: 1.25rem;
            font-weight: 950;
            line-height: 1.2;
            overflow-wrap: anywhere;
        }

        .invoice-meta__date {
            margin-top: 0.45rem;
            color: #475569;
            font-size: 0.9rem;
            font-weight: 700;
        }

        .invoice-meta__status {
            margin-top: 0.55rem;
        }

        .invoice-document-body {
            padding: 1.5rem;
        }

        .invoice-summary-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 320px;
            gap: 1rem;
            margin-bottom: 1.25rem;
        }

        .invoice-info-card,
        .invoice-total-card,
        .invoice-adjustment-card {
            border: 1px solid #e5e7eb;
            border-radius: 20px;
            background: #fff;
            box-shadow: 0 10px 28px rgba(15, 23, 42, 0.045);
            padding: 1.15rem;
            min-width: 0;
        }

        .invoice-total-card {
            background: #111827;
            color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .invoice-total-card__label {
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.78rem;
            font-weight: 900;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            margin-bottom: 0.45rem;
        }

        .invoice-total-card__value {
            font-size: 1.75rem;
            font-weight: 950;
            letter-spacing: -0.02em;
            line-height: 1.1;
        }

        .invoice-total-card__sub {
            margin-top: 0.6rem;
            color: rgba(255, 255, 255, 0.68);
            font-size: 0.86rem;
            line-height: 1.5;
        }

        .invoice-payment-overview {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 0.8rem;
            margin-bottom: 1.25rem;
        }

        .invoice-payment-overview > div {
            min-width: 0;
            border: 1px solid #e5e7eb;
            border-radius: 14px;
            background: #f8fafc;
            padding: 0.85rem;
        }

        .invoice-payment-overview span,
        .invoice-payment-overview strong {
            display: block;
            min-width: 0;
            overflow-wrap: anywhere;
        }

        .invoice-payment-overview span {
            color: #64748b;
            font-size: 0.74rem;
            font-weight: 850;
            text-transform: uppercase;
        }

        .invoice-payment-overview strong {
            margin-top: 0.25rem;
            color: #111827;
            font-size: 0.92rem;
            font-weight: 900;
        }

        .invoice-price-summary {
            border: 1px solid #e5e7eb;
            border-radius: 16px;
            background: #fff;
            margin-bottom: 1.25rem;
            overflow: hidden;
        }

        .invoice-price-summary .invoice-summary-row {
            padding: 0.9rem 1rem;
        }

        .invoice-section-head,
        .invoice-adjustment-card__head {
            display: flex;
            align-items: center;
            gap: 0.85rem;
            margin-bottom: 1rem;
            min-width: 0;
        }

        .invoice-section-head__icon,
        .invoice-adjustment-card__icon {
            width: 46px;
            height: 46px;
            border-radius: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #eff6ff, #eef2ff);
            color: #071b3d;
            font-size: 1.35rem;
            flex-shrink: 0;
        }

        .invoice-adjustment-card__icon--promo {
            background: #fff7ed;
            color: #c2410c;
        }

        .invoice-section-title,
        .invoice-adjustment-card__title {
            color: #111827;
            font-size: 1rem !important;
            font-weight: 950;
        }

        .invoice-section-sub,
        .invoice-adjustment-card__sub {
            margin-top: 0.2rem;
            color: #64748b;
            font-size: 0.86rem;
            line-height: 1.5;
        }

        .invoice-detail-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.85rem;
        }

        .invoice-detail-item {
            border: 1px solid #eef2f7;
            border-radius: 16px;
            background: #f8fafc;
            padding: 0.9rem;
            min-width: 0;
        }

        .invoice-detail-label {
            color: #64748b;
            font-size: 0.74rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 0.3rem;
        }

        .invoice-detail-value {
            color: #111827;
            font-size: 0.94rem;
            font-weight: 800;
            overflow-wrap: anywhere;
        }

        .invoice-table-card {
            border: 1px solid #e5e7eb;
            border-radius: 20px;
            background: #fff;
            overflow: hidden;
            margin-bottom: 1.25rem;
        }

        .invoice-table-head {
            padding: 1.15rem;
            border-bottom: 1px solid #eef2f7;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
            background: #fff;
        }

        .invoice-table-title {
            color: #111827;
            font-size: 1rem !important;
            font-weight: 950;
        }

        .invoice-table-sub {
            margin-top: 0.2rem;
            color: #64748b;
            font-size: 0.86rem;
            line-height: 1.5;
        }

        .invoice-table-wrap {
            width: 100%;
            overflow-x: auto;
        }

        .invoice-table {
            min-width: 850px;
            width: 100%;
            vertical-align: middle;
        }

        .invoice-table thead th {
            background: #f8fafc;
            color: #475569;
            font-size: 0.76rem;
            font-weight: 950;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            border-bottom: 1px solid #e5e7eb;
            padding: 0.85rem 0.9rem;
            white-space: nowrap;
        }

        .invoice-table tbody td {
            color: #334155;
            font-size: 0.88rem;
            font-weight: 650;
            border-color: #eef2f7;
            padding: 0.9rem;
            vertical-align: middle;
            white-space: nowrap;
        }

        .invoice-id {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 34px;
            height: 30px;
            border-radius: 999px;
            background: #f3f4f6;
            color: #374151;
            font-size: 0.78rem;
            font-weight: 900;
        }

        .invoice-img-link {
            display: inline-flex;
            text-decoration: none;
        }

        .invoice-transaction-img {
            width: 58px;
            height: 58px;
            object-fit: cover;
            border-radius: 14px;
            border: 1px solid #e5e7eb;
            box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
        }

        .invoice-reason {
            display: inline-block;
            max-width: 220px;
            white-space: normal;
            overflow-wrap: anywhere;
            line-height: 1.45;
        }

        .invoice-empty {
            padding: 3rem 1rem;
            text-align: center;
            color: #94a3b8;
            background: #fff;
        }

        .invoice-empty iconify-icon {
            display: block;
            font-size: 2.25rem;
            color: #cbd5e1;
            margin-bottom: 0.7rem;
        }

        .invoice-empty h6 {
            margin: 0;
            color: #475569;
            font-weight: 850;
        }

        .invoice-empty p {
            margin: 0.25rem 0 0;
            font-size: 0.88rem;
        }

        .invoice-adjustments-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1rem;
            margin-bottom: 1.25rem;
        }

        .invoice-summary-list {
            display: flex;
            flex-direction: column;
            gap: 0.65rem;
        }

        .invoice-summary-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            border-bottom: 1px solid #eef2f7;
            padding-bottom: 0.65rem;
        }

        .invoice-summary-row:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }

        .invoice-summary-row span {
            color: #64748b;
            font-size: 0.86rem;
            font-weight: 750;
        }

        .invoice-summary-row strong {
            color: #111827;
            font-size: 0.9rem;
            font-weight: 900;
            text-align: right;
        }

        .invoice-summary-row--total {
            padding-top: 0.2rem;
        }

        .invoice-summary-row--total strong {
            color: #071b3d;
            font-size: 1rem;
        }

        .invoice-final-strip {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            border-radius: 20px;
            background: #111827;
            color: #fff;
            padding: 1.15rem 1.25rem;
            margin-top: 1rem;
        }

        .invoice-final-strip__label {
            color: #fff;
            font-size: 0.95rem;
            font-weight: 950;
        }

        .invoice-final-strip__sub {
            margin-top: 0.2rem;
            color: rgba(255, 255, 255, 0.68);
            font-size: 0.84rem;
        }

        .invoice-final-strip__value {
            font-size: 1.35rem;
            font-weight: 950;
            white-space: nowrap;
        }

        .invoice-document-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding: 1.15rem 1.5rem;
            border-top: 1px solid #eef2f7;
            background: #f8fafc;
            flex-wrap: wrap;
        }

        .invoice-document-footer__actions {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex-wrap: wrap;
        }

        .asset-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
        }

        .ui-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            border-radius: 999px;
            padding: 0.38rem 0.78rem;
            font-size: 0.76rem;
            font-weight: 850;
            line-height: 1.2;
            white-space: nowrap;
        }

        .ui-pill--success { background: #f0fdf4; color: #166534; }
        .ui-pill--warn { background: #fffbeb; color: #92400e; }
        .ui-pill--danger { background: #fef2f2; color: #b91c1c; }
        .ui-pill--info { background: #eef2ff; color: #4338ca; }
        .ui-pill--neutral { background: #f3f4f6; color: #374151; }

        @media (max-width: 991.98px) {
            .invoice-document-head,
            .invoice-document-footer,
            .invoice-final-strip {
                flex-direction: column;
                align-items: flex-start;
            }

            .invoice-meta {
                text-align: left;
                min-width: 0;
            }

            .invoice-summary-grid,
            .invoice-adjustments-grid,
            .invoice-detail-grid {
                grid-template-columns: 1fr;
            }

            .invoice-payment-overview {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .invoice-document-footer__actions {
                width: 100%;
            }
        }

        @media (max-width: 575.98px) {
            .invoice-document-head,
            .invoice-document-body,
            .invoice-document-footer {
                padding: 1rem;
            }

            .invoice-brand {
                align-items: flex-start;
            }

            .invoice-brand__logo-wrap {
                width: 58px;
                height: 58px;
                border-radius: 16px;
            }

            .invoice-document-footer .asset-btn,
            .invoice-document-footer__actions,
            .invoice-document-footer__actions .asset-btn {
                width: 100%;
            }

            .invoice-payment-overview {
                grid-template-columns: 1fr;
            }
        }

        @media print {
            body * {
                visibility: hidden;
            }

            #invoice,
            #invoice * {
                visibility: visible;
            }

            #invoice {
                position: absolute;
                left: 0;
                top: 0;
                width: 210mm;
                min-height: 297mm;
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                border: 0 !important;
                border-radius: 0 !important;
                box-shadow: none !important;
            }

            .no-print {
                display: none !important;
            }

            .invoice-show-page,
            .page-shell,
            .space-y-4 {
                padding: 0 !important;
                margin: 0 !important;
                background: #fff !important;
            }

            .invoice-document-head,
            .invoice-document-body,
            .invoice-document-footer {
                padding: 10mm !important;
            }

            .invoice-document-footer {
                display: none !important;
            }

            .invoice-summary-grid,
            .invoice-adjustments-grid {
                grid-template-columns: 1fr 1fr !important;
            }

            .invoice-table {
                min-width: 0 !important;
                font-size: 10pt;
            }

            .invoice-table thead th,
            .invoice-table tbody td {
                padding: 6px !important;
            }

            .invoice-table-wrap {
                overflow: visible !important;
            }

            .invoice-total-card,
            .invoice-final-strip {
                background: #111827 !important;
                color: #fff !important;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }
        }
    </style>
@endpush