@switch($id)
    @case('balance')
        <x-dashboard-widget-shell :delay="$delay ?? 0" class="min-h-[210px] animate-fade-in">
            <div class="flex items-start justify-between gap-3">
                <div>
                    <p class="text-[10px] font-semibold uppercase tracking-[0.04em] text-foreground/45">{{ __('budgets.dashboard_widgets.balance.eyebrow') }}</p>
                    <p class="mt-1 text-[0.95rem] font-semibold tracking-[-0.02em] text-foreground">{{ __('budgets.dashboard_widgets.balance.title') }}</p>
                </div>
                <div class="flex h-9 w-9 items-center justify-center rounded-[12px] border border-primary/20 bg-primary/10 text-primary">
                    <i data-lucide="wallet" class="h-4 w-4"></i>
                </div>
            </div>
            <div class="mt-3">
                <p class="text-[2rem] font-semibold tracking-[-0.05em] text-foreground leading-none">{{ \App\Support\Money::formatEur($totalBalance) }}</p>
                <div class="mt-2 inline-flex items-center gap-1.5 rounded-full border border-primary/20 bg-primary/10 px-2.5 py-1 text-[11px] font-semibold text-primary">
                    <i data-lucide="arrow-up-right" class="h-3 w-3"></i>
                    {{ __('budgets.dashboard_widgets.balance.tracked', ['count' => count($tx)]) }}
                </div>
            </div>
            @if (count($tx) === 0)
                @include('livewire.partials.dashboard-widget-empty-state', [
                    'icon' => 'receipt',
                    'wrapperClass' => 'mt-3 py-6',
                    'title' => __('budgets.dashboard_widgets.balance.empty_tx_title'),
                    'body' => __('budgets.dashboard_widgets.balance.empty_tx_body'),
                    'href' => url('/transactions'),
                    'cta' => __('budgets.dashboard_widgets.balance.empty_tx_cta'),
                ])
            @endif
            <div class="mt-3 widget-panel flex items-center gap-2 rounded-[12px] px-2.5 py-2">
                <span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-[8px] border border-white/70 bg-[rgba(242,242,242,0.8)] text-foreground/70">
                    <i data-lucide="shield" class="h-3.5 w-3.5"></i>
                </span>
                <div class="min-w-0">
                    <p class="text-[10px] font-medium text-foreground/50">{{ __('budgets.dashboard_widgets.balance.emergency_fund') }}</p>
                    <p class="truncate text-sm font-semibold tracking-[-0.02em]">{{ number_format($emergencyPct, 0) }}%</p>
                    @if ($emergency)
                        <p class="text-[10px] text-foreground/45">{{ __('budgets.dashboard_widgets.balance.of', ['saved' => \App\Support\Money::formatEur($emergency['saved'] ?? 0), 'target' => \App\Support\Money::formatEur($emergency['target'] ?? 0)]) }}</p>
                    @else
                        <p class="text-[10px] text-foreground/45">{{ __('budgets.dashboard_widgets.balance.add_goal_hint') }}</p>
                    @endif
                </div>
            </div>
        </x-dashboard-widget-shell>
        @break

    @case('income-expense')
        <x-dashboard-widget-shell :delay="$delay ?? 0" class="min-h-[210px] animate-fade-in">
            <div class="mb-3 flex items-start justify-between gap-3">
                <div>
                    <p class="mb-0.5 text-[10px] font-semibold uppercase tracking-[0.04em] text-foreground/45">{{ __('budgets.dashboard_widgets.income-expense.eyebrow') }}</p>
                    <h2 class="text-[0.95rem] font-semibold tracking-[-0.02em] text-foreground">{{ __('budgets.dashboard_widgets.income-expense.title') }}</h2>
                </div>
            </div>
            <div class="flex items-baseline justify-between gap-2">
                <p class="text-[1.7rem] font-semibold tracking-[-0.05em] text-foreground leading-none">{{ \App\Support\Money::formatEur($net) }}</p>
                <span class="text-[11px] font-semibold text-primary">{{ __('budgets.dashboard_widgets.income-expense.saved_pct', ['pct' => number_format($savingsRate, 0)]) }}</span>
            </div>
            <p class="mt-1 text-xs text-foreground/55">
                {{ $monthIncome <= 0 && $monthExpenses <= 0
                    ? __('budgets.dashboard_widgets.income-expense.net_hint_empty')
                    : __('budgets.dashboard_widgets.income-expense.net_hint') }}
            </p>
            @if ($monthIncome > 0 || $monthExpenses > 0)
                <div class="mt-3 flex h-2 overflow-hidden rounded-full bg-foreground/[0.06]">
                    <div class="h-full bg-gradient-to-r from-primary/70 to-primary" style="width: {{ $incomeShare }}%"></div>
                    <div class="h-full bg-gradient-to-r from-expense/70 to-expense" style="width: {{ 100 - $incomeShare }}%"></div>
                </div>
                <div class="mt-3 space-y-1.5">
                    <div class="flex items-center justify-between text-xs">
                        <span class="flex items-center gap-1.5 font-medium text-foreground/65">
                            <span class="flex h-5 w-5 items-center justify-center rounded-md border border-primary/20 bg-primary/10 text-primary">
                                <i data-lucide="trending-up" class="h-3 w-3"></i>
                            </span>
                            {{ __('budgets.dashboard_widgets.income-expense.row_income') }}
                        </span>
                        <span class="font-semibold text-foreground">{{ \App\Support\Money::formatEur($monthIncome) }}</span>
                    </div>
                    <div class="flex items-center justify-between text-xs">
                        <span class="flex items-center gap-1.5 font-medium text-foreground/65">
                            <span class="flex h-5 w-5 items-center justify-center rounded-md border border-expense/20 bg-expense/10 text-expense">
                                <i data-lucide="trending-down" class="h-3 w-3"></i>
                            </span>
                            {{ __('budgets.dashboard_widgets.income-expense.row_expenses') }}
                        </span>
                        <span class="font-semibold text-foreground">{{ \App\Support\Money::formatEur($monthExpenses) }}</span>
                    </div>
                </div>
            @else
                @include('livewire.partials.dashboard-widget-empty-state', [
                    'icon' => 'pie-chart',
                    'wrapperClass' => 'mt-3 py-6',
                    'title' => __('budgets.dashboard_widgets.income-expense.empty_flow_title'),
                    'body' => __('budgets.dashboard_widgets.income-expense.empty_flow_body'),
                    'href' => url('/transactions'),
                    'cta' => __('budgets.dashboard_widgets.income-expense.empty_flow_cta'),
                ])
            @endif
        </x-dashboard-widget-shell>
        @break

    @case('safe-to-spend')
        @php $monthProgress = ((30 - $daysLeft) / 30) * 100; @endphp
        <x-dashboard-widget-shell :delay="$delay ?? 0" class="animate-fade-in">
            <div class="mb-3 flex items-start justify-between gap-3">
                <div>
                    <p class="mb-0.5 text-[10px] font-semibold uppercase tracking-[0.04em] text-foreground/45">{{ __('budgets.dashboard_widgets.safe-to-spend.eyebrow') }}</p>
                    <h2 class="text-[0.95rem] font-semibold tracking-[-0.02em] text-foreground">{{ __('budgets.dashboard_widgets.safe-to-spend.title') }}</h2>
                </div>
                <div class="rounded-full border border-white/70 bg-white/70 px-2.5 py-1 text-[11px] font-semibold text-foreground/55">{{ __('budgets.dashboard_widgets.safe-to-spend.days_left_badge', ['days' => $daysLeft]) }}</div>
            </div>
            <p class="text-[1.9rem] font-semibold tracking-[-0.05em] text-primary leading-none">{{ \App\Support\Money::formatEur($safeAmount) }}</p>
            <p class="mt-1.5 text-xs text-foreground/55">{{ __('budgets.dashboard_widgets.safe-to-spend.per_day', ['amount' => \App\Support\Money::formatEur($daily)]) }}</p>
            @if (count($budgets) === 0)
                @include('livewire.partials.dashboard-widget-empty-state', [
                    'icon' => 'piggy-bank',
                    'wrapperClass' => 'mt-3 py-6',
                    'title' => __('budgets.dashboard_widgets.safe-to-spend.empty_budgets_title'),
                    'body' => __('budgets.dashboard_widgets.safe-to-spend.empty_budgets_body'),
                    'href' => url('/budgets'),
                    'cta' => __('budgets.dashboard_widgets.safe-to-spend.empty_budgets_cta'),
                ])
            @endif
            <div class="mt-auto pt-3">
                <div class="mb-1.5 flex items-center justify-between text-[11px]">
                    <span class="font-medium text-foreground/65">{{ __('budgets.dashboard_widgets.safe-to-spend.month_progress') }}</span>
                    <span class="text-foreground/55">{{ __('budgets.dashboard_widgets.safe-to-spend.days_progress', ['active' => 30 - $daysLeft]) }}</span>
                </div>
                <div class="h-1.5 overflow-hidden rounded-full bg-foreground/[0.06]">
                    <div class="h-full rounded-full bg-gradient-to-r from-primary/70 via-primary to-primary" style="width: {{ min($monthProgress, 100) }}%"></div>
                </div>
            </div>
        </x-dashboard-widget-shell>
        @break

    @case('upcoming')
        @php
            $today = \Carbon\Carbon::now()->startOfDay();
            $windowEnd = \Carbon\Carbon::now()->copy()->addDays(14)->endOfDay();
            $subRows = collect($subs)->whereIn('status', ['active', 'trial'])->map(function ($subscription) {
                return [
                    'name' => $subscription['name'],
                    'amount' => (float) ($subscription['cost'] ?? 0),
                    'date' => \Carbon\Carbon::parse($subscription['nextRenewal'] ?? now()),
                    'kind' => 'sub',
                ];
            })->filter(function ($row) use ($today, $windowEnd) {
                return $row['date']->betweenIncluded($today, $windowEnd);
            });
            $debtRows = collect($debts)->map(function ($debt) use ($today) {
                $day = (int) ($debt['dueDay'] ?? 1);
                $dueThisMonth = $today->copy()->day(min($day, $today->daysInMonth))->startOfDay();
                $dueNextMonth = $today->copy()->addMonthNoOverflow()->day(min($day, $today->copy()->addMonthNoOverflow()->daysInMonth))->startOfDay();
                $d = $dueThisMonth->gte($today) ? $dueThisMonth : $dueNextMonth;

                return [
                    'name' => $debt['name'],
                    'amount' => (float) ($debt['minimumPayment'] ?? 0),
                    'date' => $d,
                    'kind' => 'debt',
                    'icon' => $debt['icon'] ?? '💳',
                ];
            })->filter(function ($row) use ($today, $windowEnd) {
                return $row['date']->betweenIncluded($today, $windowEnd);
            });
            $upcomingAll = $subRows->concat($debtRows)->sortBy(fn ($r) => $r['date']->timestamp)->values();
            $upcomingSlice = $upcomingAll->take(3);
            $upcomingCount = $upcomingAll->count();
            $upcomingTotal = $upcomingAll->sum('amount');
        @endphp
        <x-dashboard-widget-shell :delay="$delay ?? 0" class="animate-fade-in">
            <div class="mb-3 flex items-start justify-between gap-3">
                <div>
                    <p class="mb-0.5 text-[10px] font-semibold uppercase tracking-[0.04em] text-foreground/45">{{ __('budgets.dashboard_widgets.upcoming.eyebrow') }}</p>
                    <h2 class="text-[0.95rem] font-semibold tracking-[-0.02em] text-foreground">{{ __('budgets.dashboard_widgets.upcoming.title') }}</h2>
                </div>
                <div class="flex h-8 w-8 items-center justify-center rounded-[8px] border border-white/70 bg-[rgba(242,242,242,0.8)] text-foreground/60">
                    <i data-lucide="calendar" class="h-3.5 w-3.5"></i>
                </div>
            </div>
            <div class="min-h-0 flex-1 space-y-1.5">
                @if ($upcomingSlice->isEmpty())
                    @include('livewire.partials.dashboard-widget-empty-state', [
                        'icon' => 'calendar',
                        'wrapperClass' => 'py-6',
                        'title' => __('budgets.dashboard_widgets.upcoming.empty_title'),
                        'body' => __('budgets.dashboard_widgets.upcoming.empty_body'),
                        'href' => url('/subscriptions'),
                        'cta' => __('budgets.dashboard_widgets.upcoming.empty_cta_subs'),
                        'secondaryHref' => url('/debts'),
                        'secondaryCta' => __('budgets.dashboard_widgets.upcoming.empty_cta_debts'),
                    ])
                @else
                    @foreach ($upcomingSlice as $expense)
                        @php
                            $dateStr = \App\Support\RelativeDayLabel::upcomingDay($expense['date'], $locale);
                        @endphp
                        <div class="widget-panel flex items-center justify-between rounded-[12px] px-2 py-1.5">
                            <div class="flex min-w-0 items-center gap-2">
                                @if ($expense['kind'] === 'sub')
                                    <x-brand-avatar :label="$expense['name']" fallback-emoji="🔁" class="h-7 w-7 rounded-[8px]" icon-class="h-3.5 w-3.5" />
                                @else
                                    <x-brand-avatar :label="$expense['name']" :fallback-emoji="$expense['icon']" class="h-7 w-7 rounded-[8px]" icon-class="h-3.5 w-3.5" />
                                @endif
                                <div class="min-w-0">
                                    <p class="truncate text-xs font-semibold text-foreground">{{ $expense['name'] }}</p>
                                    <p class="text-[10px] text-foreground/45">{{ $dateStr }}</p>
                                </div>
                            </div>
                            <span class="text-xs font-semibold tracking-[-0.02em] text-foreground">{{ \App\Support\Money::formatEur($expense['amount']) }}</span>
                        </div>
                    @endforeach
                @endif
            </div>
            @if ($upcomingCount > 0)
                <div class="mt-auto flex items-center justify-between rounded-[12px] border border-primary/15 bg-[rgba(46,184,80,0.07)] px-2.5 py-1.5 pt-2 text-xs">
                    <span class="font-medium text-foreground/65">{{ __('budgets.dashboard_widgets.upcoming.footer_label', ['count' => $upcomingCount]) }}</span>
                    <span class="font-semibold text-foreground">{{ \App\Support\Money::formatEur($upcomingTotal) }}</span>
                </div>
            @endif
        </x-dashboard-widget-shell>
        @break

    @case('recent-transactions')
        <x-dashboard-widget-shell :delay="$delay ?? 0" class="flex min-h-0 flex-1 flex-col animate-fade-in">
            <div class="mb-3 flex items-start justify-between gap-3">
                <div>
                    <p class="mb-0.5 text-[10px] font-semibold uppercase tracking-[0.04em] text-foreground/45">{{ __('budgets.dashboard_widgets.recent-transactions.eyebrow') }}</p>
                    <h2 class="text-[0.95rem] font-semibold tracking-[-0.02em] text-foreground">{{ __('budgets.dashboard_widgets.recent-transactions.title') }}</h2>
                </div>
                <a href="{{ url('/transactions') }}" wire:navigate class="inline-flex h-8 items-center gap-1 rounded-full border border-white/70 bg-white/70 px-2.5 text-[11px] font-semibold text-foreground/65 ios-transition-fast ios-press hover:border-border/80 hover:text-foreground">{{ __('budgets.dashboard_widgets.recent-transactions.view_all') }} <i data-lucide="chevron-right" class="h-3.5 w-3.5"></i></a>
            </div>
            <div class="space-y-1.5">
                @if (count($tx) === 0)
                    @include('livewire.partials.dashboard-widget-empty-state', [
                        'icon' => 'list',
                        'wrapperClass' => 'py-8',
                        'title' => __('budgets.dashboard_widgets.recent-transactions.empty_title'),
                        'body' => __('budgets.dashboard_widgets.recent-transactions.empty_body'),
                        'href' => url('/transactions'),
                        'cta' => __('budgets.dashboard_widgets.recent-transactions.empty_cta'),
                    ])
                @else
                    @foreach (($txRecentGrouped ?? []) as $rgI => $rg)
                        <div wire:key="dash-tx-grp-{{ $rgI }}" class="space-y-1">
                            <p class="px-0.5 text-[10px] font-semibold uppercase tracking-[0.12em] text-foreground/45">{{ $rg['label'] }}</p>
                            @foreach ($rg['items'] as $t)
                                @php
                                    $cat = \App\Support\CategoryCatalog::get($t['categoryId'] ?? 'other');
                                    $txType = (string) ($t['type'] ?? '');
                                    $txAmount = (float) ($t['amount'] ?? 0);
                                    $txIsIncome = $txType !== '' ? $txType === 'income' : $txAmount > 0;
                                @endphp
                                <div wire:key="dash-tx-{{ $t['id'] ?? ('g'.$rgI.'-i'.$loop->index) }}" class="widget-panel flex items-center justify-between gap-3 rounded-[12px] px-2 py-1.5 ios-transition-fast hover:-translate-y-0.5">
                                    <div class="flex min-w-0 items-center gap-2.5">
                                        <div
                                            class="flex h-8 w-8 shrink-0 items-center justify-center rounded-[8px] border border-white/70"
                                            style="background-color: {{ str_replace(')', ' / 0.14)', $cat['color']) }}; color: {{ $cat['color'] }}"
                                        >
                                            <x-brand-avatar
                                                :label="$t['name']"
                                                class="h-8 w-8 rounded-[8px]"
                                                icon-class="h-3.5 w-3.5"
                                                :fallback-lucide="$cat['icon']"
                                            />
                                        </div>
                                        <div class="min-w-0">
                                            <p class="truncate text-xs font-semibold text-foreground">{{ $t['name'] }}</p>
                                            <p class="text-[10px] text-foreground/45">{{ $cat['name'] }}</p>
                                        </div>
                                    </div>
                                    <div class="text-right shrink-0">
                                        <p class="text-xs font-semibold tracking-[-0.02em] {{ $txIsIncome ? 'text-income' : 'text-expense' }}">
                                            {{ $txIsIncome ? '+' : '-' }}{{ \App\Support\Money::formatEur(abs($txAmount)) }}
                                        </p>
                                        <p class="text-[10px] text-foreground/45">{{ \App\Support\RelativeDayLabel::compact((string) ($t['date'] ?? ''), $locale) }}</p>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endforeach
                @endif
            </div>
        </x-dashboard-widget-shell>
        @break

    @case('budgets')
        <x-dashboard-widget-shell :delay="$delay ?? 0" class="animate-fade-in">
            <div class="mb-3 flex items-start justify-between gap-3">
                <div>
                    <p class="mb-0.5 text-[10px] font-semibold uppercase tracking-[0.04em] text-foreground/45">{{ __('budgets.dashboard_widgets.budgets.eyebrow') }}</p>
                    <h2 class="text-[0.95rem] font-semibold tracking-[-0.02em] text-foreground">{{ __('budgets.dashboard_widgets.budgets.title') }}</h2>
                </div>
                <a href="{{ url('/budgets') }}" wire:navigate class="inline-flex h-8 items-center gap-1 rounded-full border border-white/70 bg-white/70 px-2.5 text-[11px] font-semibold text-foreground/65 ios-transition-fast ios-press hover:border-border/80 hover:text-foreground">{{ __('budgets.dashboard_widgets.budgets.view_all') }} <i data-lucide="chevron-right" class="h-3.5 w-3.5"></i></a>
            </div>
            <div class="space-y-1.5">
                @if (count($budgets) === 0)
                    @include('livewire.partials.dashboard-widget-empty-state', [
                        'icon' => 'gauge',
                        'wrapperClass' => 'py-8',
                        'title' => __('budgets.dashboard_widgets.budgets.empty_title'),
                        'body' => __('budgets.dashboard_widgets.budgets.empty_body'),
                        'href' => url('/budgets'),
                        'cta' => __('budgets.dashboard_widgets.budgets.empty_cta'),
                    ])
                @else
                    @foreach (collect($budgets)->take(4) as $b)
                        @php $progress = ($b['limit'] ?? 1) > 0 ? (($b['spent'] ?? 0) / $b['limit']) * 100 : 0; @endphp
                        <div class="widget-panel rounded-[12px] px-2 py-1.5">
                            <div class="mb-1 flex items-center justify-between gap-2">
                                <div class="flex min-w-0 items-center gap-2">
                                    <span class="flex h-7 w-7 items-center justify-center rounded-[8px] border border-white/70 bg-[rgba(242,242,242,0.8)] text-sm shrink-0">
                                        {{ $b['icon'] ?? '📁' }}
                                    </span>
                                    <div class="min-w-0">
                                        <p class="truncate text-xs font-semibold text-foreground">{{ $b['name'] }}</p>
                                        @php $__per = (string) ($b['period'] ?? 'monthly'); @endphp
                                        <p class="text-[10px] text-foreground/45">{{ in_array($__per, ['weekly', 'monthly', 'yearly'], true) ? __('budgets.budgets_page.period_labels.' . $__per) : $__per }}</p>
                                    </div>
                                </div>
                                <span class="text-[11px] font-semibold shrink-0 {{ $progress >= 90 ? 'text-expense' : 'text-foreground/55' }}">{{ \App\Support\Money::formatEur($b['spent'] ?? 0) }}/{{ \App\Support\Money::formatEur($b['limit'] ?? 0) }}</span>
                            </div>
                            <div class="h-1.5 overflow-hidden rounded-full bg-foreground/[0.06]">
                                <div class="h-full rounded-full {{ $progress >= 90 ? 'bg-gradient-to-r from-expense/65 to-expense' : 'bg-gradient-to-r from-primary/70 via-primary to-primary' }}" style="width: {{ min($progress, 100) }}%"></div>
                            </div>
                        </div>
                    @endforeach
                @endif
            </div>
        </x-dashboard-widget-shell>
        @break

    @case('goals')
        <x-dashboard-widget-shell :delay="$delay ?? 0" class="animate-fade-in">
            <div class="mb-3 flex items-start justify-between gap-3">
                <div>
                    <p class="mb-0.5 text-[10px] font-semibold uppercase tracking-[0.04em] text-foreground/45">{{ __('budgets.dashboard_widgets.goals.eyebrow') }}</p>
                    <h2 class="text-[0.95rem] font-semibold tracking-[-0.02em] text-foreground">{{ __('budgets.dashboard_widgets.goals.title') }}</h2>
                </div>
                <a href="{{ url('/goals') }}" wire:navigate class="inline-flex h-8 items-center gap-1 rounded-full border border-white/70 bg-white/70 px-2.5 text-[11px] font-semibold text-foreground/65 ios-transition-fast ios-press hover:border-border/80 hover:text-foreground">{{ __('budgets.dashboard_widgets.goals.open') }} <i data-lucide="chevron-right" class="h-3.5 w-3.5"></i></a>
            </div>
            <div class="space-y-1.5">
                @if (count($goals) === 0)
                    @include('livewire.partials.dashboard-widget-empty-state', [
                        'icon' => 'target',
                        'wrapperClass' => 'py-8',
                        'title' => __('budgets.dashboard_widgets.goals.empty_title'),
                        'body' => __('budgets.dashboard_widgets.goals.empty_body'),
                        'href' => url('/goals'),
                        'cta' => __('budgets.dashboard_widgets.goals.empty_cta'),
                    ])
                @else
                    @foreach (collect($goals)->take(3) as $g)
                        @php $pct = ($g['target'] ?? 1) > 0 ? (($g['saved'] ?? 0) / $g['target']) * 100 : 0; @endphp
                        <div class="widget-panel rounded-[12px] px-2 py-1.5">
                            <div class="mb-1 flex items-center gap-2">
                                <span class="flex h-8 w-8 items-center justify-center rounded-[8px] border border-white/70 bg-[rgba(242,242,242,0.8)] text-base shrink-0">
                                    {{ $g['icon'] ?? '🎯' }}
                                </span>
                                <div class="min-w-0 flex-1">
                                    <div class="flex items-start justify-between gap-2">
                                        <p class="truncate text-xs font-semibold text-foreground">{{ $g['name'] }}</p>
                                        <span class="text-[11px] font-semibold text-foreground/50 shrink-0">{{ number_format($pct, 0) }}%</span>
                                    </div>
                                    <p class="text-[10px] text-foreground/45">{{ __('budgets.dashboard_widgets.goals.of', ['saved' => \App\Support\Money::formatEur($g['saved'] ?? 0), 'target' => \App\Support\Money::formatEur($g['target'] ?? 0)]) }}</p>
                                </div>
                            </div>
                            <div class="h-1.5 overflow-hidden rounded-full bg-foreground/[0.06]">
                                <div class="h-full rounded-full bg-gradient-to-r from-info/65 to-info" style="width: {{ min($pct, 100) }}%"></div>
                            </div>
                        </div>
                    @endforeach
                @endif
            </div>
        </x-dashboard-widget-shell>
        @break

    @case('subscriptions')
        @php
            $activeSubs = collect($subs)->where('status', 'active');
            $totalSub = $activeSubs->sum('cost');
            $zombie = collect($subs)->where('status', 'zombie');
            $zombieFirst = $zombie->first();
        @endphp
        <x-dashboard-widget-shell :delay="$delay ?? 0" class="animate-fade-in">
            <div class="mb-3 flex items-start justify-between gap-3">
                <div>
                    <p class="mb-0.5 text-[10px] font-semibold uppercase tracking-[0.04em] text-foreground/45">{{ __('budgets.dashboard_widgets.subscriptions.eyebrow') }}</p>
                    <h2 class="text-[0.95rem] font-semibold tracking-[-0.02em] text-foreground">{{ __('budgets.dashboard_widgets.subscriptions.title') }}</h2>
                </div>
                <a href="{{ url('/subscriptions') }}" wire:navigate class="inline-flex h-8 items-center gap-1 rounded-full border border-white/70 bg-white/70 px-2.5 text-[11px] font-semibold text-foreground/65 ios-transition-fast ios-press hover:border-border/80 hover:text-foreground">{{ __('budgets.dashboard_widgets.subscriptions.manage') }} <i data-lucide="chevron-right" class="h-3.5 w-3.5"></i></a>
            </div>
            <div class="mb-3 flex items-center justify-between rounded-[12px] border border-primary/15 bg-[rgba(46,184,80,0.07)] px-2.5 py-1.5 text-xs">
                <span class="font-medium text-foreground/65">
                    @if ($zombie->count() > 0)
                        {{ __('budgets.dashboard_widgets.subscriptions.active_with_zombies', ['count' => $activeSubs->count(), 'zombies' => $zombie->count()]) }}
                    @else
                        {{ __('budgets.dashboard_widgets.subscriptions.active_only', ['count' => $activeSubs->count()]) }}
                    @endif
                </span>
                <span class="font-semibold text-foreground">{{ __('budgets.dashboard_widgets.subscriptions.per_mo', ['amount' => \App\Support\Money::formatEur($totalSub)]) }}</span>
            </div>
            <div class="space-y-1.5">
                @if ($activeSubs->isEmpty())
                    @include('livewire.partials.dashboard-widget-empty-state', [
                        'icon' => 'repeat',
                        'wrapperClass' => 'py-8',
                        'title' => __('budgets.dashboard_widgets.subscriptions.empty_active_title'),
                        'body' => __('budgets.dashboard_widgets.subscriptions.empty_active_body'),
                        'href' => url('/subscriptions'),
                        'cta' => __('budgets.dashboard_widgets.subscriptions.empty_active_cta'),
                    ])
                @else
                    @foreach ($activeSubs->sortBy('nextRenewal')->take(4) as $s)
                        @php
                            $low = ($s['usageScore'] ?? 100) < 40;
                            $renewStr = \App\Support\RelativeDayLabel::upcomingDay(\Carbon\Carbon::parse($s['nextRenewal']), $locale);
                            $shared = ! empty($s['shared']);
                            $dashSubCat = \App\Support\CategoryCatalog::get($s['categoryId'] ?? 'other');
                        @endphp
                        <div class="widget-panel flex items-center justify-between rounded-[12px] px-2 py-1.5">
                            <div class="flex min-w-0 items-center gap-2.5">
                                @if ($low)
                                    <span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-[8px] border border-warning/20 bg-warning/10 text-warning">
                                        <i data-lucide="alert-triangle" class="h-3.5 w-3.5"></i>
                                    </span>
                                @else
                                    <x-brand-avatar
                                        :label="$s['name']"
                                        :fallback-lucide="$dashSubCat['icon']"
                                        class="h-7 w-7 rounded-[8px]"
                                        icon-class="h-3.5 w-3.5"
                                    />
                                @endif
                                <div class="min-w-0">
                                    <p class="truncate text-xs font-semibold text-foreground">{{ $s['name'] }}</p>
                                    <p class="truncate text-[10px] text-foreground/45">
                                        @if ($low)
                                            {{ __('budgets.dashboard_widgets.subscriptions.row_subtitle_low', ['date' => $renewStr]) }}
                                        @elseif ($shared)
                                            {{ __('budgets.dashboard_widgets.subscriptions.row_subtitle_shared', ['date' => $renewStr]) }}
                                        @else
                                            {{ $renewStr }}
                                        @endif
                                    </p>
                                </div>
                            </div>
                            <span class="text-xs font-semibold tracking-[-0.02em] text-foreground shrink-0">{{ \App\Support\Money::formatEur($s['cost']) }}</span>
                        </div>
                    @endforeach
                @endif
            </div>
            @if ($zombieFirst)
                <div class="mt-3 rounded-[12px] border border-warning/20 bg-warning/[0.08] px-2.5 py-2">
                    <p class="text-[10px] font-semibold uppercase tracking-[0.04em] text-warning">{{ __('budgets.dashboard_widgets.subscriptions.watchlist_title') }}</p>
                    <p class="mt-0.5 text-xs font-semibold text-foreground">{{ __('budgets.dashboard_widgets.subscriptions.watchlist_line', ['name' => $zombieFirst['name']]) }}</p>
                    <p class="text-[11px] text-foreground/55">{{ __('budgets.dashboard_widgets.subscriptions.watchlist_body', ['amount' => \App\Support\Money::formatEur($zombieFirst['cost'] ?? 0)]) }}</p>
                </div>
            @endif
        </x-dashboard-widget-shell>
        @break

    @case('debts')
        @php
            $totalDebt = collect($debts)->sum('balance');
            $totalOrig = collect($debts)->sum('originalBalance');
            $paidOff = $totalOrig > 0 ? (1 - $totalDebt / $totalOrig) * 100 : 0;
            $priority = collect($debts)->sortByDesc('interestRate')->first();
        @endphp
        <x-dashboard-widget-shell :delay="$delay ?? 0" class="animate-fade-in">
            <div class="mb-3 flex items-start justify-between gap-3">
                <div>
                    <p class="mb-0.5 text-[10px] font-semibold uppercase tracking-[0.04em] text-foreground/45">{{ __('budgets.dashboard_widgets.debts.eyebrow') }}</p>
                    <h2 class="text-[0.95rem] font-semibold tracking-[-0.02em] text-foreground">{{ __('budgets.dashboard_widgets.debts.title') }}</h2>
                </div>
                <a href="{{ url('/debts') }}" wire:navigate class="inline-flex h-8 items-center gap-1 rounded-full border border-white/70 bg-white/70 px-2.5 text-[11px] font-semibold text-foreground/65 ios-transition-fast ios-press hover:border-border/80 hover:text-foreground">{{ __('budgets.dashboard_widgets.debts.details') }} <i data-lucide="chevron-right" class="h-3.5 w-3.5"></i></a>
            </div>
            @if (count($debts) === 0)
                @include('livewire.partials.dashboard-widget-empty-state', [
                    'icon' => 'credit-card',
                    'wrapperClass' => 'py-8',
                    'title' => __('budgets.dashboard_widgets.debts.empty_title'),
                    'body' => __('budgets.dashboard_widgets.debts.empty_body'),
                    'href' => url('/debts'),
                    'cta' => __('budgets.dashboard_widgets.debts.empty_cta'),
                ])
            @else
                <div class="mb-3 flex items-center justify-between rounded-[12px] border border-expense/15 bg-[rgba(239,68,68,0.06)] px-2.5 py-1.5 text-xs">
                    <span class="font-medium text-foreground/65">{{ __('budgets.dashboard_widgets.debts.summary', ['count' => count($debts), 'pct' => number_format($paidOff, 0)]) }}</span>
                    <span class="font-semibold text-expense">{{ \App\Support\Money::formatEur($totalDebt) }}</span>
                </div>
                <div class="space-y-1.5">
                    @foreach (collect($debts)->sortBy('dueDay') as $d)
                        @php $isPriorityRow = ($priority['id'] ?? null) === ($d['id'] ?? null); @endphp
                        <div class="widget-panel flex items-center justify-between rounded-[12px] px-2 py-1.5">
                            <div class="flex min-w-0 items-center gap-2.5">
                                <span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-[8px] border {{ $isPriorityRow ? 'border-warning/20 bg-warning/10' : 'border-white/70 bg-[rgba(242,242,242,0.8)]' }}">
                                    <x-brand-avatar
                                        :label="$d['name']"
                                        :fallback-emoji="$d['icon'] ?? '💳'"
                                        class="h-7 w-7 rounded-[8px] border-0 shadow-none"
                                        icon-class="h-3.5 w-3.5"
                                    />
                                </span>
                                <div class="min-w-0">
                                    <p class="truncate text-xs font-semibold text-foreground">{{ $d['name'] }}</p>
                                    <p class="truncate text-[10px] text-foreground/45">{{ __('budgets.dashboard_widgets.debts.due_line', ['day' => $d['dueDay'], 'rate' => $d['interestRate'], 'min' => \App\Support\Money::formatEur($d['minimumPayment'] ?? 0)]) }}</p>
                                </div>
                            </div>
                            <span class="text-xs font-semibold tracking-[-0.02em] text-foreground shrink-0">{{ \App\Support\Money::formatEur($d['balance'] ?? 0) }}</span>
                        </div>
                    @endforeach
                </div>
            @endif
            @if ($priority)
                <div class="mt-3 rounded-[12px] border border-warning/20 bg-warning/[0.08] px-2.5 py-2">
                    <p class="text-[10px] font-semibold uppercase tracking-[0.04em] text-warning">{{ __('budgets.dashboard_widgets.debts.priority') }}</p>
                    <p class="mt-0.5 text-xs font-semibold text-foreground">{{ __('budgets.dashboard_widgets.debts.priority_line', ['name' => $priority['name'], 'rate' => $priority['interestRate']]) }}</p>
                    <p class="text-[11px] text-foreground/55">{{ __('budgets.dashboard_widgets.debts.priority_hint') }}</p>
                </div>
            @endif
        </x-dashboard-widget-shell>
        @break

    @case('ai')
        @php $monthProgress = ((30 - $daysLeft) / 30) * 100; @endphp
        <x-dashboard-widget-shell :delay="$delay ?? 0" class="flex min-h-0 flex-1 flex-col animate-fade-in">
            <div class="mb-3 flex items-start justify-between gap-3">
                <div>
                    <p class="mb-0.5 text-[10px] font-semibold uppercase tracking-[0.04em] text-foreground/45">{{ __('budgets.dashboard_widgets.ai.eyebrow') }}</p>
                    <h2 class="text-[0.95rem] font-semibold tracking-[-0.02em] text-foreground">{{ __('budgets.dashboard_widgets.ai.title') }}</h2>
                </div>
                <div class="flex items-center gap-1.5 rounded-full border border-primary/20 bg-primary/10 px-2.5 py-1 text-[11px] font-semibold text-primary">
                    <i data-lucide="brain" class="h-3 w-3"></i> {{ __('budgets.dashboard_widgets.ai.live') }}
                </div>
            </div>
            @if (count($tx) === 0 && count($budgets) === 0)
                <p class="mb-2 rounded-[12px] border border-info/15 bg-info/[0.06] px-3 py-2 text-[11px] leading-snug text-foreground/60">
                    {{ __('budgets.dashboard_widgets.ai.empty_context') }}
                </p>
            @endif
            <div class="grid min-h-0 flex-1 gap-3 lg:grid-cols-[minmax(0,17rem)_1fr]">
                <div class="widget-panel flex flex-col justify-between rounded-[12px] border border-primary/15 bg-[rgba(46,184,80,0.06)] px-3 py-2.5">
                    <div class="flex items-start justify-between gap-2">
                        <div class="min-w-0">
                            <p class="text-[10px] font-semibold uppercase tracking-[0.04em] text-primary/90">{{ __('budgets.dashboard_widgets.ai.panel_title') }}</p>
                            <p class="mt-1 truncate text-lg font-semibold tracking-[-0.04em] text-primary">{{ \App\Support\Money::formatEur($safeAmount) }}</p>
                        </div>
                        <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-[10px] border border-primary/20 bg-primary/10 text-primary">
                            <i data-lucide="piggy-bank" class="h-4 w-4"></i>
                        </span>
                    </div>
                    <p class="mt-2 text-[11px] leading-snug text-foreground/55">{{ __('budgets.dashboard_widgets.ai.runway', ['amount' => \App\Support\Money::formatEur($daily), 'days' => $daysLeft]) }}</p>
                    <div class="mt-2">
                        <div class="mb-1 flex items-center justify-between text-[10px] font-medium text-foreground/60">
                            <span>{{ __('budgets.dashboard_widgets.ai.month_progress') }}</span><span>{{ __('budgets.dashboard_widgets.ai.days_progress', ['active' => 30 - $daysLeft]) }}</span>
                        </div>
                        <div class="h-1.5 overflow-hidden rounded-full bg-foreground/[0.06]">
                            <div class="h-full rounded-full bg-gradient-to-r from-primary/70 via-primary to-primary" style="width: {{ min($monthProgress, 100) }}%"></div>
                        </div>
                    </div>
                </div>
                <div class="grid min-h-0 gap-2 sm:grid-cols-2 xl:grid-cols-3">
                    @forelse ($aiTips ?? [] as $idx => $tip)
                        <div class="widget-panel rounded-[12px] px-2.5 py-2">
                            <div class="mb-1 flex h-6 w-6 items-center justify-center rounded-md border border-primary/20 bg-primary/10 text-[10px] font-semibold text-primary">
                                {{ str_pad((string) ($idx + 1), 2, '0', STR_PAD_LEFT) }}
                            </div>
                            <p class="text-xs leading-5 text-foreground/70">{{ $tip }}</p>
                        </div>
                    @empty
                        <div class="widget-panel rounded-[12px] px-2.5 py-2 sm:col-span-2 xl:col-span-3">
                            <p class="text-xs leading-5 text-foreground/55">{{ __('budgets.dashboard_widgets.ai.tips_empty') }}</p>
                        </div>
                    @endforelse
                </div>
            </div>
            <a href="{{ url('/ai-advisor') }}" wire:navigate class="mt-3 inline-flex items-center gap-1.5 self-start rounded-full border border-white/70 bg-white/75 px-3 py-1.5 text-xs font-semibold text-foreground/70 ios-transition-fast ios-press hover:text-foreground">
                {{ __('budgets.dashboard_widgets.ai.open_advisor') }} <i data-lucide="chevron-right" class="h-3.5 w-3.5"></i>
            </a>
        </x-dashboard-widget-shell>
        @break

    @default
        <div class="rounded-[16px] border border-dashed border-border/60 p-6 text-center text-sm text-muted-foreground">{{ __('budgets.dashboard_widgets.unknown', ['id' => $id]) }}</div>
@endswitch