@extends('layouts.app')

@section('content')
@php
    $licenseStatus = app(\App\Services\LicenseStatusService::class)->getStatus();

    $collectionTotal = \App\Models\Album::query()->count();
    $recordRestoredAlbumCount = \App\Models\Album::query()
        ->whereHas('treatments', fn ($query) => $query->where('treatment_type', '<span class="record-restore-card-anchor"></span>Record Restore'))
        ->count();
    $albumsRequiringTreatment = \App\Models\Album::query()
        ->where('needs_treatment', true)
        ->count();
    $relaxedAlbumCount = \App\Models\Album::query()
        ->whereNotNull('relaxed_date')
        ->count();
    $recordRestoreTreatedPercent = $collectionTotal > 0 ? round(($recordRestoredAlbumCount / $collectionTotal) * 100) : 0;
    $relaxedPercent = $collectionTotal > 0 ? round(($relaxedAlbumCount / $collectionTotal) * 100) : 0;
@endphp

<div class="sca-page">
    <div class="sca-shell sca-page-stack dashboard-blueprint">
        <style>
            .dashboard-blueprint {
                gap: 26px;
            }

            .dashboard-blueprint .dashboard-title {
                font-size: clamp(2rem, 2.8vw, 2.375rem);
                line-height: .95;
                margin: 0;
            }

            .dashboard-blueprint .dashboard-metrics {
                display: grid;
                gap: 16px;
            }

            .dashboard-blueprint .dashboard-equipment-card {
                display: grid;
                gap: 14px;
                padding: 14px 16px;
                box-shadow: none;
            }

            .dashboard-blueprint .dashboard-equipment-grid,
            .dashboard-blueprint .dashboard-collection-grid {
                display: grid;
                gap: 10px;
            }

            .dashboard-blueprint .dashboard-equipment-stat,
            .dashboard-blueprint .dashboard-collection-stat {
                min-height: 70px;
                padding: 10px 12px;
                border: 1px solid var(--sca-black);
                border-radius: 14px;
                background: rgba(255,255,255,0.96);
                display: grid;
                gap: 5px;
                align-content: start;
            }

            .dashboard-blueprint .dashboard-equipment-stat .sca-stat-label,
            .dashboard-blueprint .dashboard-collection-stat .sca-stat-label {
                font-size: .78rem;
                letter-spacing: 0;
                text-transform: none;
                color: inherit;
            }

            .dashboard-blueprint .dashboard-equipment-stat .sca-stat-value,
            .dashboard-blueprint .dashboard-collection-stat .sca-stat-value {
                font-size: clamp(1.35rem, 2.1vw, 1.85rem);
                line-height: 1.05;
            }

            .dashboard-blueprint .dashboard-metric-card {
                min-height: 168px;
                padding: 16px 18px;
                box-shadow: none;
            }

            .dashboard-blueprint .dashboard-metric-card .sca-stat-label {
                letter-spacing: 0;
                text-transform: none;
                font-size: 1rem;
                color: inherit;
            }

            .dashboard-blueprint .dashboard-metric-card .sca-stat-value {
                font-size: clamp(2.8rem, 4vw, 3.3rem);
                margin-top: 6px;
            }

            .dashboard-blueprint .dashboard-metric-card .sca-stat-note {
                margin-top: auto;
                font-size: .95rem;
            }

            .dashboard-blueprint .dashboard-main,
            .dashboard-blueprint .dashboard-record-grid,
            .dashboard-blueprint .dashboard-two-up,
            .dashboard-blueprint .dashboard-form-grid,
            .dashboard-blueprint .dashboard-deck-table {
                display: grid;
                gap: 22px;
            }

            .dashboard-blueprint .dashboard-card {
                padding: 14px 16px;
                box-shadow: none;
                min-width: 0;
            }

            .dashboard-blueprint .dashboard-card-yellow {
                background: var(--sca-yellow);
            }

            .dashboard-blueprint .dashboard-section-title {
                font-size: clamp(1.35rem, 2.1vw, 1.8rem);
                line-height: 1.05;
                margin: 0;
            }

            .dashboard-blueprint .dashboard-rule {
                margin-top: 8px;
                margin-bottom: 14px;
                height: 4px;
            }

            .dashboard-blueprint .dashboard-section-copy {
                color: rgba(0, 0, 0, 0.82);
                font-size: .98rem;
                line-height: 1.5;
                max-width: 58ch;
            }

            .dashboard-blueprint .dashboard-table {
                width: 100%;
                border-collapse: collapse;
            }

            .dashboard-blueprint .dashboard-table th,
            .dashboard-blueprint .dashboard-table td {
                padding: 8px 5px;
                border-bottom: 1px solid rgba(0, 0, 0, 0.12);
                text-align: left;
                vertical-align: top;
            }

            .dashboard-blueprint .dashboard-table th {
                font-size: .85rem;
                font-weight: 700;
            }

            .dashboard-blueprint .dashboard-table td {
                font-size: .9rem;
            }

            .dashboard-blueprint .dashboard-pill {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                min-height: 30px;
                padding: 6px 14px;
                border: 1px solid var(--sca-black);
                border-radius: 999px;
                font-weight: 700;
                background: var(--sca-white);
            }

            .dashboard-blueprint .dashboard-list {
                display: grid;
            }

            .dashboard-blueprint .dashboard-list-item {
                padding: 12px 0;
                border-bottom: 1px solid rgba(0, 0, 0, 0.12);
                display: grid;
                gap: 2px;
            }

            .dashboard-blueprint .dashboard-list-item:last-child {
                border-bottom: 0;
            }

            .dashboard-blueprint .dashboard-list-title {
                font-size: 1rem;
                font-weight: 700;
            }

            .dashboard-blueprint .dashboard-list-title-link {
                text-decoration: none;
            }

            .dashboard-blueprint .dashboard-list-meta,
            .dashboard-blueprint .dashboard-list-note {
                font-size: .95rem;
                color: rgba(0, 0, 0, 0.82);
            }

            .dashboard-blueprint .dashboard-record-grid {
                gap: 10px;
            }

            .dashboard-blueprint .dashboard-record-stat {
                min-height: 68px;
                padding: 10px;
                border-radius: 14px;
                background: rgba(255,255,255,0.95);
                box-shadow: none;
            }

            .dashboard-blueprint .dashboard-record-stat .sca-stat-label {
                letter-spacing: 0;
                text-transform: none;
                font-size: .82rem;
                color: inherit;
                line-height: 1.2;
            }

            .dashboard-blueprint .dashboard-record-stat .sca-stat-value {
                font-size: clamp(1.15rem, 1.6vw, 1.35rem);
                margin-top: 4px;
                line-height: 1.05;
            }

            .dashboard-blueprint .dashboard-status-banner {
                padding: 12px 14px;
                border: 1px solid var(--sca-black);
                border-radius: 12px;
                background: rgba(255,255,255,0.96);
                font-weight: 700;
            }

            .dashboard-blueprint .dashboard-field-group {
                display: grid;
                gap: 6px;
            }

            .dashboard-blueprint .dashboard-field-group label {
                font-size: .76rem;
                font-weight: 700;
                letter-spacing: .12em;
                text-transform: uppercase;
            }

            .dashboard-blueprint .dashboard-form-grid {
                gap: 14px;
            }

            .dashboard-blueprint .dashboard-stock-entry {
                padding: 12px;
                border: 1px solid var(--sca-black);
                border-radius: 16px;
                background: rgba(255,255,255,0.95);
                display: grid;
                gap: 10px;
            }

            .dashboard-blueprint .dashboard-stock-entry-head {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
                align-items: baseline;
            }

            .dashboard-blueprint .dashboard-stock-entry-date {
                font-weight: 700;
                font-size: 1rem;
            }

            .dashboard-blueprint .dashboard-stock-entry-note {
                font-size: .95rem;
                color: rgba(0,0,0,.82);
            }

            .dashboard-blueprint .dashboard-stock-adjust {
                display: grid;
                gap: 10px;
                align-items: end;
            }

            .dashboard-blueprint .dashboard-empty {
                color: rgba(0, 0, 0, 0.74);
                font-size: .97rem;
            }

            .dashboard-blueprint .dashboard-license-card {
                display: grid;
                gap: 10px;
                align-content: start;
            }

            .dashboard-blueprint .dashboard-license-tier {
                font-size: clamp(2rem, 3vw, 2.7rem);
                line-height: 1;
                font-weight: 700;
            }

            .dashboard-blueprint .dashboard-deck-table {
                overflow-x: auto;
            }

            .dashboard-blueprint .dashboard-deck-table table {
                min-width: 0;
                width: 100%;
            }

            .dashboard-blueprint .dashboard-table-compact {
                table-layout: fixed;
            }

            .dashboard-blueprint .dashboard-table-compact th,
            .dashboard-blueprint .dashboard-table-compact td {
                padding: 7px 4px;
                font-size: .84rem;
                line-height: 1.25;
                overflow-wrap: anywhere;
            }

            .dashboard-blueprint .dashboard-side-column,
            .dashboard-blueprint .dashboard-main > .sca-stack-lg {
                min-width: 0;
            }

            .dashboard-blueprint .dashboard-side-card .dashboard-list-title {
                font-size: .95rem;
            }

            .dashboard-blueprint .dashboard-side-card .dashboard-list-meta,
            .dashboard-blueprint .dashboard-side-card .dashboard-list-note {
                font-size: .88rem;
            }

            @media (min-width: 820px) {
                .dashboard-blueprint .dashboard-metrics {
                    grid-template-columns: 1fr;
                }

                .dashboard-blueprint .dashboard-equipment-grid {
                    grid-template-columns: repeat(4, minmax(0, 1fr));
                }

                .dashboard-blueprint .dashboard-collection-grid {
                    grid-template-columns: repeat(4, minmax(0, 1fr));
                }

                .dashboard-blueprint .dashboard-main {
                    grid-template-columns: minmax(0, 1.32fr) minmax(260px, 0.78fr);
                    align-items: start;
                }

                .dashboard-blueprint .dashboard-record-grid {
                    grid-template-columns: repeat(4, minmax(0, 1fr));
                }

                .dashboard-blueprint .dashboard-two-up {
                    grid-template-columns: repeat(2, minmax(0, 1fr));
                }

                .dashboard-blueprint .dashboard-form-grid {
                    grid-template-columns: minmax(0, 1fr) 160px;
                }

                .dashboard-blueprint .dashboard-stock-adjust {
                    grid-template-columns: minmax(0, 1fr) auto;
                }
            }
        </style>

        <h1 class="sca-page-title dashboard-title">System Dashboard</h1>

        @if (session('status'))
            <div class="sca-flash">{{ session('status') }}</div>
        @endif

        @if ($errors->any())
            <div class="sca-alert">
                {{ $errors->first() }}
            </div>
        @endif

        <section class="dashboard-metrics">
            <article class="sca-card dashboard-equipment-card dashboard-card-yellow">
                <div>
                    <h2 class="sca-section-title dashboard-section-title">Playback Equipment Status</h2>
                    <div class="sca-rule dashboard-rule"></div>
                </div>

                <div class="dashboard-equipment-grid">
                    <div class="dashboard-equipment-stat">
                        <div class="sca-stat-label">Installed Cartridges</div>
                        <div class="sca-stat-value">{{ $installedCartridges->count() }}</div>
                    </div>
                    <div class="dashboard-equipment-stat">
                        <div class="sca-stat-label">Approaching Service</div>
                        <div class="sca-stat-value">{{ $approachingCartridges->count() }}</div>
                    </div>
                    <div class="dashboard-equipment-stat">
                        <div class="sca-stat-label">Due for Service</div>
                        <div class="sca-stat-value">{{ $dueCartridges->count() }}</div>
                    </div>
                    <div class="dashboard-equipment-stat" style="background:var(--sca-black); color:var(--sca-white);">
                        <div class="sca-stat-label" style="color:rgba(255,255,255,.78);">Overdue</div>
                        <div class="sca-stat-value" style="color:var(--sca-white);">{{ $overdueCartridges->count() }}</div>
                    </div>
                </div>
            </article>
        </section>

        <section class="dashboard-main">
            <div class="sca-stack-lg dashboard-side-column">
                <article class="sca-card dashboard-card dashboard-side-card">
                    <h2 class="sca-section-title dashboard-section-title">Cartridge Health</h2>
                    <div class="sca-rule dashboard-rule"></div>

                    <div class="dashboard-deck-table">
                        <table class="dashboard-table dashboard-table-compact">
                            <thead>
                                <tr>
                                    <th>Cartridge</th>
                                    <th>Tonearm</th>
                                    <th>Elapsed</th>
                                    <th>Remaining</th>
                                    <th>State</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($cartridges as $cartridge)
                                    @php
                                        $usage = $usageSummaries[$cartridge->id] ?? null;
                                        $state = $usage['service_state'] ?? 'Unknown';
                                    @endphp
                                    <tr>
                                        <td><a href="{{ route('cartridges.edit', $cartridge) }}" class="dashboard-list-title-link"><strong>{{ $cartridge->name }}</strong></a></td>
                                        <td>{{ $cartridge->tonearm?->name ?? '—' }}</td>
                                        <td>{{ rtrim(rtrim(number_format((float) ($usage['hours_since_service'] ?? 0), 1), '0'), '.') }}</td>
                                        <td>{{ rtrim(rtrim(number_format((float) ($usage['remaining_hours'] ?? 1000), 1), '0'), '.') }}</td>
                                        <td>
                                            <span class="dashboard-pill" style="background: {{ $state === 'Overdue' ? '#000' : '#FFF' }}; color: {{ $state === 'Overdue' ? '#FFF' : '#000' }};">
                                                {{ $state === 'Healthy' ? 'Optimal' : $state }}
                                            </span>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="5" class="dashboard-empty">No cartridges found.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </article>

                <article class="sca-card dashboard-card">
                    <h2 class="sca-section-title dashboard-section-title"><span class="collection-status-card-anchor"></span>Collection Status</h2>
                    <div class="sca-rule dashboard-rule"></div>

                    <div class="dashboard-collection-grid">
                        <div class="dashboard-collection-stat">
                            <div class="sca-stat-label">Total collection size</div>
                            <div class="sca-stat-value">{{ $collectionTotal }}</div>
                        </div>
                        <div class="dashboard-collection-stat">
                            <div class="sca-stat-label">Record Restore treated</div>
                            <div class="sca-stat-value">{{ $recordRestoreTreatedPercent }}%</div>
                        </div>
                        <div class="dashboard-collection-stat">
                            <div class="sca-stat-label">Requiring Treatment</div>
                            <div class="sca-stat-value">{{ $albumsRequiringTreatment }}</div>
                        </div>
                        <div class="dashboard-collection-stat">
                            <div class="sca-stat-label">Collection relaxed</div>
                            <div class="sca-stat-value">{{ $relaxedPercent }}%</div>
                        </div>
                    </div>
                </article>

                <article class="sca-card dashboard-card dashboard-card-yellow">
                    <div>
                        <h2 class="sca-section-title dashboard-section-title">Record Restore</h2>
                        <div class="dashboard-section-copy">Monitor stock on hand, age, and restock status.</div>
                    </div>

                    <div class="dashboard-record-grid">
                        <div class="sca-card dashboard-record-stat">
                            <div class="sca-stat-label">On Hand</div>
                            <div class="sca-stat-value">{{ number_format((float) ($recordRestoreSummary['quantity_on_hand_ml'] ?? 0), 1) }} ml</div>
                        </div>
                        <div class="sca-card dashboard-record-stat">
                            <div class="sca-stat-label">Bottles Eq.</div>
                            <div class="sca-stat-value">{{ number_format((float) ($recordRestoreSummary['bottles_equivalent'] ?? 0), 2) }}</div>
                        </div>
                        <div class="sca-card dashboard-record-stat">
                            <div class="sca-stat-label">Oldest Stock Age</div>
                            <div class="sca-stat-value">{{ $recordRestoreSummary['oldest_stock_age_days'] ?? 0 }}</div>
                        </div>
                        <div class="sca-card dashboard-record-stat">
                            <div class="sca-stat-label">Status</div>
                            <div class="sca-stat-value" style="font-size: .95rem; line-height: 1.1; margin-top: 4px;">{{ $recordRestoreSummary['status_label'] ?? 'Healthy' }}</div>
                        </div>
                        <div class="sca-card dashboard-record-stat">
                            <div class="sca-stat-label">Avg. ml / Clean</div>
                            <div class="sca-stat-value">{{ number_format((float) ($recordRestoreDashboard['average_ml_per_clean'] ?? 0), 1) }}</div>
                        </div>
                        <div class="sca-card dashboard-record-stat">
                            <div class="sca-stat-label">Cleans Remaining</div>
                            <div class="sca-stat-value">{{ number_format((float) ($recordRestoreDashboard['cleans_remaining'] ?? 0), 1) }}</div>
                        </div>
                        <div class="sca-card dashboard-record-stat">
                            <div class="sca-stat-label">Days Remaining</div>
                            <div class="sca-stat-value">{{ $recordRestoreDashboard['days_remaining'] ?? '—' }}</div>
                        </div>
                    </div>

                    <div class="dashboard-status-banner">
                        @if(($recordRestoreSummary['show_restock_alert'] ?? false))
                            Stock is low. Reorder recommended.
                        @else
                            Stock level healthy.
                        @endif
                    </div>

                    <form method="POST" action="{{ route('record-restore-stock.store') }}" class="sca-stack-md">
                        @csrf
                        <div class="dashboard-two-up">
                            <div class="dashboard-field-group">
                                <label for="acquired_on">Acquisition Date</label>
                                <input id="acquired_on" type="date" name="acquired_on" value="{{ old('acquired_on', now()->toDateString()) }}" required>
                            </div>
                            <div class="dashboard-field-group">
                                <label for="quantity_bottles">Quantity</label>
                                <select id="quantity_bottles" name="quantity_bottles" required>
                                    @foreach(range(1, 4) as $quantity)
                                        <option value="{{ $quantity }}" @selected((int) old('quantity_bottles', 1) === $quantity)>{{ $quantity }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="dashboard-field-group">
                            <label for="notes">Notes</label>
                            <textarea id="notes" name="notes" placeholder="Optional notes about this stock entry">{{ old('notes') }}</textarea>
                        </div>

                        <div class="sca-inline-actions" style="justify-content:flex-end;">
                            <button type="submit" class="sca-btn sca-btn-primary">Add Stock</button>
                        </div>
                    </form>

                    <div class="sca-stack-md">
                        <div>
                            <h3 class="sca-section-title" style="font-size:1.15rem;">Recent Stock Entries</h3>
                        </div>

                        @forelse ($recentRecordRestoreStocks as $stock)
                            <div class="dashboard-stock-entry">
                                <div class="dashboard-stock-entry-head">
                                    <div class="dashboard-stock-entry-date">{{ optional($stock->acquired_on)->format('Y-m-d') }}</div>
                                    <div>{{ $stock->quantity_bottles }} {{ \Illuminate\Support\Str::plural('bottle', (int) $stock->quantity_bottles) }}</div>
                                </div>
                                <div class="dashboard-stock-entry-note">{{ number_format((float) $stock->quantity_ml_remaining, 1) }} ml remaining{{ $stock->notes ? " · ".$stock->notes : "" }}</div>

                                <form method="POST" action="{{ route('record-restore-stock.adjust-ml', $stock) }}" class="dashboard-stock-adjust">
                                    @csrf
                                    @method('PATCH')
                                    <div class="dashboard-field-group">
                                        <label for="adjust_ml_{{ $stock->id }}">Adjust Stock (+/- ml)</label>
                                        <input id="adjust_ml_{{ $stock->id }}" type="number" step="0.1" name="adjust_ml" placeholder="e.g. -7.0 or 12.5" required>
                                        <div class="dashboard-stock-entry-note">Use negative to reduce stock, positive to increase it.</div>
                                    </div>
                                    <button type="submit" class="sca-btn sca-btn-secondary">Adjust Stock</button>
                                </form>
                            </div>
                        @empty
                            <div class="dashboard-empty">No stock entries yet.</div>
                        @endforelse
                    </div>
                </article>
            </div>

            <div class="sca-stack-lg">
                <article class="sca-card dashboard-card dashboard-side-card">
                    <h2 class="sca-section-title dashboard-section-title">Recent Service</h2>
                    <div class="sca-rule dashboard-rule"></div>

                    <div class="dashboard-list">
                        @forelse ($recentServiceEvents as $event)
                            <div class="dashboard-list-item">
                                <div class="dashboard-list-title">{{ $event->cartridge?->name ?? 'Cartridge service event' }}</div>
                                <div class="dashboard-list-meta">{{ optional($event->serviced_on)->format('Y-m-d') ?? 'No date recorded' }}</div>
                                @if($event->notes)
                                    <div class="dashboard-list-note">{{ $event->notes }}</div>
                                @endif
                            </div>
                        @empty
                            <div class="dashboard-empty">No recent service events.</div>
                        @endforelse
                    </div>
                </article>

                <article class="sca-card dashboard-card dashboard-side-card">
                    <div class="sca-section-head" style="margin-bottom:0; gap:10px; align-items:flex-start;">
                        <div style="width:100%;">
                            <h2 class="sca-section-title dashboard-section-title">Recent Plays</h2>
                            <div class="sca-rule dashboard-rule" style="max-width:64%;"></div>
                        </div>
                        <a href="{{ route('play-logs.index') }}" class="sca-btn">View All Plays</a>
                    </div>

                    <div class="dashboard-list">
                        @forelse ($recentPlayLogs as $play)
                            <div class="dashboard-list-item">
                                <div class="dashboard-list-title">{{ $play->album?->title ?? 'Untitled album' }}</div>
                                <div class="dashboard-list-meta">{{ optional($play->played_at)->format('Y-m-d') ?? 'No date' }} · Side {{ $play->side_played }}</div>
                                <div class="dashboard-list-note">Cartridge: {{ $play->cartridge?->name ?? '—' }}</div>
                            </div>
                        @empty
                            <div class="dashboard-empty">No recent plays.</div>
                        @endforelse
                    </div>
                </article>

                <article class="sca-card dashboard-card dashboard-license-card">
                    <div class="sca-stat-label">License</div>
                    <div class="dashboard-license-tier">{{ $licenseStatus['tier'] }}</div>
                    <div class="sca-stat-note">{{ $licenseStatus['is_activated'] ? 'Activated license' : 'Core' }}</div>
                    @if(!$licenseStatus['is_activated'])
                        <button
                            type="button"
                            class="sca-btn sca-btn-primary"
                            onclick="window.dispatchEvent(new CustomEvent('open-license-modal'))"
                            style="width:max-content;"
                        >
                            Upgrade to Pro
                        </button>
                    @endif
                </article>
            </div>
        </section>

        <article class="sca-card dashboard-card">
            <h2 class="sca-section-title dashboard-section-title">Deck Configuration</h2>
            <div class="sca-rule dashboard-rule"></div>

            <div class="dashboard-deck-table">
                <table class="dashboard-table">
                    <thead>
                        <tr>
                            <th>Deck</th>
                            <th>Type</th>
                            <th>Tonearm 1</th>
                            <th>Cartridge 1</th>
                            <th>Tonearm 2</th>
                            <th>Cartridge 2</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($turntables as $turntable)
                            @php
                                $tonearms = $turntable->tonearms->values();
                                $firstTonearm = $tonearms->get(0);
                                $secondTonearm = $tonearms->get(1);
                            @endphp
                            <tr>
                                <td><strong>{{ $turntable->name }}</strong></td>
                                <td>{{ $turntable->type ?? 'Turntable' }}</td>
                                <td>{{ $firstTonearm?->name ?? '—' }}</td>
                                <td>{{ $firstTonearm?->cartridge?->name ?? '—' }}</td>
                                <td>{{ $secondTonearm?->name ?? '—' }}</td>
                                <td>{{ $secondTonearm?->cartridge?->name ?? '—' }}</td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="dashboard-empty">No turntables configured.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </article>

        <div x-data="{ openLicenseModal: {{ $errors->has('activation_key') ? 'true' : 'false' }} }" @open-license-modal.window="openLicenseModal = true">
            <div x-show="openLicenseModal" x-transition style="display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:999;">
                <div style="min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;">
                    <div @click.outside="openLicenseModal = false" class="sca-card" style="width:100%; max-width:460px; box-shadow:none;">
                        <div class="sca-stack-md">
                            <div class="sca-section-head" style="margin-bottom:0;">
                                <div>
                                    <h3 class="sca-section-title" style="font-size:1.45rem;">Activate Pro</h3>
                                    <div class="sca-section-copy">Enter your activation key to unlock Pro features.</div>
                                </div>

                                <button type="button" @click="openLicenseModal = false" class="sca-btn" style="min-height:34px; width:34px; padding:0;">×</button>
                            </div>

                            <form method="POST" action="{{ route('license.activate') }}" class="sca-stack-md">
                                @csrf
                                <div>
                                    <label for="activation_key" class="sca-field-label">Activation Key</label>
                                    <input
                                        id="activation_key"
                                        type="text"
                                        name="activation_key"
                                        value="{{ old('activation_key') }}"
                                        placeholder="SCA-RT-2026-ABCD-1234"
                                        required
                                    >
                                </div>

                                <div class="sca-inline-actions" style="justify-content:flex-end;">
                                    <button type="button" @click="openLicenseModal = false" class="sca-btn">Cancel</button>
                                    <button type="submit" class="sca-btn sca-btn-primary">Activate</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .collection-status-card .sca-stat-value,
    .collection-status-card .collection-status-value {
        font-size: 1.45rem !important;
        line-height: 1.05 !important;
    }

    .record-restore-card .record-restore-grid,
    .record-restore-card .sca-stats-grid,
    .record-restore-card .record-restore-status-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 14px !important;
        align-items: stretch !important;
    }

    .record-restore-card .record-restore-grid > *,
    .record-restore-card .sca-stats-grid > *,
    .record-restore-card .record-restore-status-grid > * {
        min-width: 0 !important;
        height: 100% !important;
    }

    @media (max-width: 900px) {
        .record-restore-card .record-restore-grid,
        .record-restore-card .sca-stats-grid,
        .record-restore-card .record-restore-status-grid {
            grid-template-columns: 1fr !important;
        }
    }
</style>

<style>
    .sca-panel:has(.collection-status-card-anchor) .sca-stat-value,
    .sca-card:has(.collection-status-card-anchor) .sca-stat-value,
    section:has(.collection-status-card-anchor) .sca-stat-value {
        font-size: 1.45rem !important;
        line-height: 1.05 !important;
    }

    .sca-panel:has(.record-restore-card-anchor) .sca-stats-grid,
    .sca-card:has(.record-restore-card-anchor) .sca-stats-grid,
    section:has(.record-restore-card-anchor) .sca-stats-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 14px !important;
        align-items: stretch !important;
    }
</style>

@endsection