@php
    $C = [
        'indigo' => '#6366f1',
        'violet' => '#8b5cf6',
        'cyan' => '#06b6d4',
        'amber' => '#f59e0b',
        'emerald' => '#10b981',
        'rose' => '#f43f5e',
        'slate' => '#0f172a',
        'muted' => '#64748b',
    ];
    $money = function ($v) {
        return number_format((float) ($v ?: 0), 2, '.', ',');
    };
    $moneyK = function ($v) use ($money) {
        $n = (float) ($v ?: 0);
        $abs = abs($n);
        if ($abs >= 1e6) return number_format($n / 1e6, 2).'M';
        if ($abs >= 1e5) return number_format($n / 1e3, 0).'K';
        return $money($n);
    };
    $dt = fn ($v) => $v ? substr((string) $v, 0, 10) : '—';
    $pct = fn ($v) => number_format((float) ($v ?: 0), 1).'%';
    $ratio = function ($paid, $total) {
        $t = (float) ($total ?: 0);
        if ($t <= 0) return 0;
        return min(100, ((float) ($paid ?: 0) / $t) * 100);
    };

    $k = $data['kpis'] ?? [];
    $counts = $data['counts'] ?? [];
    $breakdownItems = [
        ['key' => 'materials', 'label' => __('dashboard.materials'), 'color' => $C['cyan'], 'value' => (float) ($data['cost_breakdown']['materials'] ?? 0)],
        ['key' => 'labor', 'label' => __('dashboard.labor'), 'color' => $C['amber'], 'value' => (float) ($data['cost_breakdown']['labor'] ?? 0)],
        ['key' => 'machinery', 'label' => __('dashboard.machinery'), 'color' => $C['emerald'], 'value' => (float) ($data['cost_breakdown']['machinery'] ?? 0)],
        ['key' => 'expenses', 'label' => __('dashboard.expenses'), 'color' => $C['rose'], 'value' => (float) ($data['cost_breakdown']['expenses'] ?? 0)],
    ];
    $breakdownTotal = array_sum(array_column($breakdownItems, 'value'));
    $spendPct = ($k['estimated_budget'] ?? 0) > 0
        ? min(999, ((float) $k['actual_cost'] / (float) $k['estimated_budget']) * 100)
        : (($k['actual_cost'] ?? 0) > 0 ? 100 : 0);
    $varianceStatus = ((float) ($k['variance'] ?? 0)) > 0 ? 'over' : (((float) ($k['variance'] ?? 0)) < 0 ? 'under' : 'on');
    $varianceColor = $varianceStatus === 'over' ? $C['rose'] : ($varianceStatus === 'under' ? $C['emerald'] : $C['slate']);

    $card = 'background:#fff;border:1px solid #e2e8f0;border-radius:18px;padding:20px;box-shadow:0 10px 30px rgba(15,23,42,0.04)';
    $track = 'height:7px;background:#f1f5f9;border-radius:99px;overflow:hidden';
    $iconBox = 'width:36px;height:36px;border-radius:12px;display:flex;align-items:center;justify-content:center';
    $ghost = 'font-size:12px;font-weight:700;color:#6366f1;text-decoration:none;background:#eef2ff;padding:8px 12px;border-radius:10px;display:inline-block';
    $qLink = 'display:flex;align-items:center;gap:8px;padding:10px;border-radius:12px;text-decoration:none;color:#0f172a;font-size:12px;font-weight:700;background:#f8fafc;border:1px solid #e2e8f0';
    $badgeBase = 'font-size:11px;font-weight:700;border-radius:99px;padding:3px 9px;text-transform:capitalize';

    $statusStyle = function ($st) use ($C) {
        $map = [
            'active' => ['bg' => '#eef2ff', 'color' => $C['indigo']],
            'planning' => ['bg' => '#f1f5f9', 'color' => '#475569'],
            'complete' => ['bg' => '#ecfdf5', 'color' => $C['emerald']],
            'completed' => ['bg' => '#ecfdf5', 'color' => $C['emerald']],
            'over' => ['bg' => '#fff1f2', 'color' => $C['rose']],
            'under' => ['bg' => '#ecfdf5', 'color' => $C['emerald']],
            'on_budget' => ['bg' => '#f8fafc', 'color' => '#475569'],
        ];
        return $map[$st] ?? $map['planning'];
    };

    // Donut math
    $donutSize = 176;
    $donutR = 62;
    $donutCirc = 2 * M_PI * $donutR;
    $donutAcc = 0;
    $donutT = $breakdownTotal > 0 ? $breakdownTotal : 1;
@endphp

<div style="display:flex;flex-direction:column;gap:20px;max-width:1440px;margin:0 auto" wire:key="dashboard-root">
    <style>
        @keyframes floatA { from { transform: translate(0,0); } to { transform: translate(30px,-20px); } }
        @keyframes floatB { from { transform: translate(0,0); } to { transform: translate(-24px,16px); } }
        @keyframes spin { to { transform: rotate(360deg); } }
        .dash-orb { position: absolute; border-radius: 50%; filter: blur(8px); }
        .dash-orb-a { width: 220px; height: 220px; right: -40px; top: -60px; background: radial-gradient(circle, rgba(99,102,241,0.55), transparent 70%); animation: floatA 8s ease-in-out infinite alternate; }
        .dash-orb-b { width: 180px; height: 180px; left: 20%; bottom: -70px; background: radial-gradient(circle, rgba(139,92,246,0.4), transparent 70%); animation: floatB 10s ease-in-out infinite alternate; }
        .dash-spin { animation: spin 0.8s linear infinite; }
    </style>

    {{-- Hero --}}
    <section style="position:relative;overflow:hidden;border-radius:22px;padding:28px 28px 24px;background:linear-gradient(135deg,#0f172a 0%,#1e1b4b 55%,#312e81 100%);box-shadow:0 20px 50px rgba(15,23,42,0.25)">
        <div style="position:absolute;inset:0;overflow:hidden;pointer-events:none">
            <div class="dash-orb dash-orb-a"></div>
            <div class="dash-orb dash-orb-b"></div>
        </div>
        <div style="position:relative;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-start">
            <div>
                <div style="display:flex;align-items:center;gap:10px;margin-bottom:8px">
                    <div style="display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,0.1);color:#e0e7ff;border:1px solid rgba(255,255,255,0.12);border-radius:99px;padding:5px 10px;font-size:12px;font-weight:600">
                        <i class="fa fa-home"></i> {{ __('dashboard.command_center') }}
                    </div>
                    @if (!empty($data['generated_at']))
                        <span style="color:rgba(255,255,255,0.55);font-size:12px">
                            {{ __('dashboard.updated') }} {{ \Carbon\Carbon::parse($data['generated_at'])->timezone(config('app.timezone'))->toDayDateTimeString() }}
                        </span>
                    @endif
                </div>
                <h1 style="margin:0;font-size:30px;font-weight:800;letter-spacing:-0.03em;color:#fff">{{ __('dashboard.title') }}</h1>
                <p style="margin:8px 0 0;color:rgba(226,232,240,0.78);font-size:14px;max-width:560px;line-height:1.55">
                    {{ __('dashboard.subtitle') }}
                </p>
            </div>
            <button type="button" wire:click="refreshDashboard" wire:loading.attr="disabled"
                style="display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,0.12);color:#fff;border:1px solid rgba(255,255,255,0.18);border-radius:12px;padding:10px 14px;cursor:pointer;font-weight:600">
                <i class="fa fa-sync" wire:loading.class="dash-spin"></i>
                <span wire:loading.remove wire:target="refreshDashboard">{{ __('common.refresh') }}</span>
                <span wire:loading wire:target="refreshDashboard">{{ __('dashboard.refreshing') }}</span>
            </button>
        </div>
        <div style="position:relative;display:flex;flex-wrap:wrap;gap:10px;margin-top:22px">
            @foreach ([
                ['fa-project-diagram', __('common.projects'), $counts['projects'] ?? 0],
                ['fa-layer-group', __('common.active'), $counts['active'] ?? 0],
                ['fa-users', __('common.people'), $counts['employees'] ?? 0],
                ['fa-truck', __('common.suppliers'), $counts['suppliers'] ?? 0],
                ['fa-tools', __('common.equipment'), $counts['equipment'] ?? 0],
                ['fa-wallet', __('common.accounts'), $counts['accounts'] ?? 0],
                ['fa-warehouse', __('common.warehouses'), $counts['warehouses'] ?? 0],
            ] as [$icon, $label, $value])
                <div style="display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,0.08);color:#fff;border:1px solid rgba(255,255,255,0.1);border-radius:99px;padding:7px 12px;font-size:12px">
                    <i class="fa {{ $icon }}" style="font-size:12px"></i>
                    <span style="opacity:0.7">{{ $label }}</span>
                    <strong>{{ $value }}</strong>
                </div>
            @endforeach
        </div>
    </section>

    {{-- KPI cards --}}
    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px">
        <div style="{{ $card }};padding:18px;background:linear-gradient(180deg,#eef2ff 0%,#fff 55%)">
            <div style="{{ $iconBox }};background:#fff;color:{{ $C['indigo'] }};box-shadow:0 8px 20px rgba(15,23,42,0.06)"><i class="fa fa-balance-scale"></i></div>
            <div style="font-size:12px;color:{{ $C['muted'] }};margin-top:14px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase">{{ __('dashboard.estimated_budget') }}</div>
            <div style="font-size:26px;font-weight:800;color:{{ $C['slate'] }};letter-spacing:-0.03em;margin-top:4px">{{ $moneyK($k['estimated_budget'] ?? 0) }}</div>
            <div style="font-size:12px;color:{{ $C['muted'] }};margin-top:4px">{{ $money($k['estimated_budget'] ?? 0) }}</div>
        </div>
        <div style="{{ $card }};padding:18px;background:linear-gradient(180deg,#ecfeff 0%,#fff 55%)">
            <div style="{{ $iconBox }};background:#fff;color:{{ $C['cyan'] }};box-shadow:0 8px 20px rgba(15,23,42,0.06)"><i class="fa fa-file-invoice-dollar"></i></div>
            <div style="font-size:12px;color:{{ $C['muted'] }};margin-top:14px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase">{{ __('dashboard.actual_cost') }}</div>
            <div style="font-size:26px;font-weight:800;color:{{ $C['slate'] }};letter-spacing:-0.03em;margin-top:4px">{{ $moneyK($k['actual_cost'] ?? 0) }}</div>
            <div style="font-size:12px;color:{{ $C['muted'] }};margin-top:4px">{{ $pct($spendPct) }} {{ __('dashboard.of_budget_spent') }}</div>
        </div>
        <div style="{{ $card }};padding:18px;background:linear-gradient(180deg,{{ $varianceStatus === 'over' ? '#fff1f2' : '#ecfdf5' }} 0%,#fff 55%)">
            <div style="{{ $iconBox }};background:#fff;color:{{ $varianceColor }};box-shadow:0 8px 20px rgba(15,23,42,0.06)">
                <i class="fa {{ $varianceStatus === 'over' ? 'fa-arrow-up' : 'fa-arrow-down' }}"></i>
            </div>
            <div style="font-size:12px;color:{{ $C['muted'] }};margin-top:14px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase">{{ __('dashboard.variance') }}</div>
            <div style="font-size:26px;font-weight:800;color:{{ $varianceColor }};letter-spacing:-0.03em;margin-top:4px">
                {{ ((float)($k['variance'] ?? 0)) > 0 ? '+' : '' }}{{ $moneyK($k['variance'] ?? 0) }}
            </div>
            <div style="font-size:12px;color:{{ $C['muted'] }};margin-top:4px">
                {{ $varianceStatus === 'over' ? __('dashboard.over_estimated_budget') : ($varianceStatus === 'under' ? __('dashboard.under_estimated_budget') : __('dashboard.on_budget')) }}
            </div>
        </div>
        <div style="{{ $card }};padding:18px;background:linear-gradient(180deg,#f5f3ff 0%,#fff 55%)">
            <div style="{{ $iconBox }};background:#fff;color:{{ $C['violet'] }};box-shadow:0 8px 20px rgba(15,23,42,0.06)"><i class="fa fa-chart-pie"></i></div>
            <div style="font-size:12px;color:{{ $C['muted'] }};margin-top:14px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase">{{ __('dashboard.budget_health') }}</div>
            <div style="font-size:26px;font-weight:800;color:{{ $C['slate'] }};letter-spacing:-0.03em;margin-top:4px">{{ $k['under_budget'] ?? 0 }} {{ __('dashboard.under') }}</div>
            <div style="font-size:12px;color:{{ $C['muted'] }};margin-top:4px">{{ $k['over_budget'] ?? 0 }} {{ __('dashboard.over') }} · {{ $k['on_budget'] ?? 0 }} {{ __('dashboard.on_target') }}</div>
        </div>
    </div>

    {{-- Cost composition + Estimated vs actual --}}
    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px">
        <div style="{{ $card }}">
            <div>
                <h3 style="margin:0;font-size:16px;font-weight:800;color:{{ $C['slate'] }}">{{ __('dashboard.cost_composition') }}</h3>
                <p style="margin:4px 0 0;font-size:12px;color:{{ $C['muted'] }}">{{ __('dashboard.materials_labor_machinery_expenses') }}</p>
            </div>
            <div style="display:flex;gap:24px;flex-wrap:wrap;align-items:center;margin-top:16px">
                <svg width="{{ $donutSize }}" height="{{ $donutSize }}" viewBox="0 0 176 176">
                    <circle cx="88" cy="88" r="{{ $donutR }}" fill="none" stroke="#eef2ff" stroke-width="22" />
                    @foreach ($breakdownItems as $item)
                        @if ($item['value'] > 0)
                            @php
                                $frac = $item['value'] / $donutT;
                                $dash = $frac * $donutCirc;
                                $rot = ($donutAcc / $donutT) * 360 - 90;
                                $donutAcc += $item['value'];
                            @endphp
                            <circle cx="88" cy="88" r="{{ $donutR }}" fill="none"
                                stroke="{{ $item['color'] }}" stroke-width="22"
                                stroke-dasharray="{{ $dash }} {{ $donutCirc }}"
                                transform="rotate({{ $rot }} 88 88)" stroke-linecap="butt" />
                        @endif
                    @endforeach
                    <text x="88" y="84" text-anchor="middle" font-size="11" fill="#64748b">{{ __('dashboard.actual') }}</text>
                    <text x="88" y="104" text-anchor="middle" font-size="15" font-weight="800" fill="#0f172a">{{ $moneyK($breakdownTotal) }}</text>
                </svg>
                <div style="flex:1;min-width:220px;display:flex;flex-direction:column;gap:10px">
                    @foreach ($breakdownItems as $item)
                        @php $w = $breakdownTotal > 0 ? max(3, ($item['value'] / $breakdownTotal) * 100) : 0; @endphp
                        <div>
                            <div style="display:flex;justify-content:space-between;font-size:12px;margin-bottom:4px">
                                <span style="color:{{ $C['muted'] }};display:flex;align-items:center;gap:6px">
                                    <span style="width:8px;height:8px;border-radius:99px;background:{{ $item['color'] }};display:inline-block"></span>
                                    {{ $item['label'] }}
                                </span>
                                <span style="font-weight:700;color:{{ $C['slate'] }}">{{ $money($item['value']) }}</span>
                            </div>
                            <div style="{{ $track }}">
                                <div style="height:100%;width:{{ $w }}%;background:{{ $item['color'] }};border-radius:99px"></div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        <div style="{{ $card }}">
            <div>
                <h3 style="margin:0;font-size:16px;font-weight:800;color:{{ $C['slate'] }}">{{ __('dashboard.estimated_vs_actual') }}</h3>
                <p style="margin:4px 0 0;font-size:12px;color:{{ $C['muted'] }}">{{ __('dashboard.portfolio_wide_budget_against_recorded_cost') }}</p>
            </div>
            @php
                $est = (float) ($k['estimated_budget'] ?? 0);
                $act = (float) ($k['actual_cost'] ?? 0);
                $maxBar = max($est, $act, 1);
            @endphp
            <div style="display:flex;flex-direction:column;gap:14px;margin-top:16px">
                <div>
                    <div style="display:flex;justify-content:space-between;font-size:12px;margin-bottom:6px">
                        <span style="color:{{ $C['muted'] }}">{{ __('dashboard.estimated') }}</span>
                        <span style="font-weight:700">{{ $money($est) }}</span>
                    </div>
                    <div style="{{ $track }};height:14px">
                        <div style="height:100%;width:{{ ($est / $maxBar) * 100 }}%;background:linear-gradient(90deg,#c7d2fe,#6366f1);border-radius:99px"></div>
                    </div>
                </div>
                <div>
                    <div style="display:flex;justify-content:space-between;font-size:12px;margin-bottom:6px">
                        <span style="color:{{ $C['muted'] }}">{{ __('dashboard.actual') }}</span>
                        <span style="font-weight:700">{{ $money($act) }}</span>
                    </div>
                    <div style="{{ $track }};height:14px">
                        <div style="height:100%;width:{{ ($act / $maxBar) * 100 }}%;background:linear-gradient(90deg,#67e8f9,#06b6d4);border-radius:99px"></div>
                    </div>
                </div>
            </div>
            <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px">
                @foreach ([[__('common.planning'), $counts['planning'] ?? 0], [__('common.active'), $counts['active'] ?? 0], [__('common.complete'), $counts['complete'] ?? 0]] as [$label, $val])
                    <div style="background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:12px 10px;text-align:center">
                        <div style="font-size:20px;font-weight:800;color:{{ $C['slate'] }}">{{ $val }}</div>
                        <div style="font-size:11px;color:{{ $C['muted'] }};margin-top:2px">{{ $label }}</div>
                    </div>
                @endforeach
            </div>
            <div style="margin-top:18px;display:flex;gap:8px;flex-wrap:wrap">
                <a href="{{ url('/reports/project-budget') }}" style="{{ $ghost }}">{{ __('dashboard.estimated_budget_report') }}</a>
                <a href="{{ url('/reports/project-cost') }}" style="{{ $ghost }}">{{ __('dashboard.cost_vs_budget') }}</a>
            </div>
        </div>
    </div>

    {{-- Payables --}}
    <div>
        <div>
            <h3 style="margin:0;font-size:16px;font-weight:800;color:{{ $C['slate'] }}">{{ __('dashboard.payables_and_commitments') }}</h3>
            <p style="margin:4px 0 0;font-size:12px;color:{{ $C['muted'] }}">{{ __('dashboard.materials_credit_labor_due_and_machinery_hire') }}</p>
        </div>
        <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:14px">
            @php
                $payables = [
                    [
                        'icon' => 'fa-truck', 'title' => __('dashboard.materials'), 'accent' => $C['cyan'],
                        'href' => url('/reports/purchase-payables'),
                        'rows' => [[__('common.purchased'), $k['materials_purchased'] ?? 0], [__('common.paid'), $k['materials_paid'] ?? 0], [__('common.owed'), $k['materials_owed'] ?? 0]],
                        'progress' => $ratio($k['materials_paid'] ?? 0, $k['materials_purchased'] ?? 0),
                    ],
                    [
                        'icon' => 'fa-hard-hat', 'title' => __('dashboard.labor'), 'accent' => $C['amber'],
                        'href' => url('/employee/labor-report'),
                        'rows' => [[__('common.due'), $k['labor_due'] ?? 0], [__('common.paid'), $k['labor_paid'] ?? 0], [__('common.owed'), $k['labor_owed'] ?? 0]],
                        'progress' => $ratio($k['labor_paid'] ?? 0, $k['labor_due'] ?? 0),
                    ],
                    [
                        'icon' => 'fa-tools', 'title' => __('dashboard.machinery'), 'accent' => $C['emerald'],
                        'href' => url('/equipment/reports'),
                        'rows' => [[__('dashboard.usage_cost'), $k['machinery_cost'] ?? 0], [__('common.paid'), $k['machinery_paid'] ?? 0], [__('common.owed'), $k['machinery_owed'] ?? 0]],
                        'progress' => $ratio($k['machinery_paid'] ?? 0, $k['machinery_cost'] ?? 0),
                    ],
                ];
            @endphp
            @foreach ($payables as $p)
                <a href="{{ $p['href'] }}" style="{{ $card }};text-decoration:none;color:inherit;display:block;overflow:hidden">
                    <div style="height:4px;background:{{ $p['accent'] }};margin:-20px -20px 16px"></div>
                    <div style="display:flex;align-items:center;gap:10px;margin-bottom:14px">
                        <div style="{{ $iconBox }};background:{{ $p['accent'] }}18;color:{{ $p['accent'] }}"><i class="fa {{ $p['icon'] }}"></i></div>
                        <div style="font-weight:800;color:{{ $C['slate'] }}">{{ $p['title'] }}</div>
                    </div>
                    @foreach ($p['rows'] as $i => [$label, $val])
                        <div style="display:flex;justify-content:space-between;padding:7px 0;font-size:13px">
                            <span style="color:{{ $i === 2 ? $p['accent'] : $C['muted'] }};font-weight:{{ $i === 2 ? 700 : 500 }}">{{ $label }}</span>
                            <span style="font-weight:700;color:{{ $i === 2 ? $p['accent'] : $C['slate'] }}">{{ $money($val) }}</span>
                        </div>
                    @endforeach
                    <div style="{{ $track }};margin-top:10px">
                        <div style="height:100%;width:{{ $p['progress'] }}%;background:{{ $p['accent'] }};border-radius:99px"></div>
                    </div>
                    <div style="font-size:11px;color:{{ $C['muted'] }};margin-top:6px">{{ $pct($p['progress']) }} settled</div>
                </a>
            @endforeach
        </div>
    </div>

    {{-- Project portfolio --}}
    <div style="{{ $card }}">
        <div style="display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px">
            <div>
                <h3 style="margin:0;font-size:16px;font-weight:800;color:{{ $C['slate'] }}">{{ __('dashboard.project_portfolio') }}</h3>
                <p style="margin:4px 0 0;font-size:12px;color:{{ $C['muted'] }}">{{ __('dashboard.spend_against_each_project_s_estimated_budget') }}</p>
            </div>
            <a href="{{ url('/projects') }}" style="{{ $ghost }}">{{ __('dashboard.manage_projects') }}</a>
        </div>
        @if (empty($data['projects']))
            <div style="padding:18px 8px;color:{{ $C['muted'] }};font-size:13px">
                {{ __('dashboard.no_projects_yet') }}
                <a href="{{ url('/projects') }}" style="color:{{ $C['indigo'] }};font-weight:700">{{ __('dashboard.add_project') }}</a>
            </div>
        @else
            <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px">
                @foreach ($data['projects'] as $p)
                    @php
                        $c = $p['comparison'] ?? [];
                        $a = $p['actual'] ?? [];
                        $st = $statusStyle($p['project']['status'] ?? 'planning');
                        $vs = $statusStyle($c['status'] ?? 'on_budget');
                        $spend = min(100, (float) ($c['spend_percent'] ?? 0));
                    @endphp
                    <div style="border:1px solid #e2e8f0;border-radius:16px;padding:16px;background:#fff">
                        <div style="display:flex;justify-content:space-between;gap:8px;align-items:flex-start">
                            <div>
                                <div style="font-size:11px;color:{{ $C['muted'] }};font-weight:700;letter-spacing:0.04em">{{ $p['project']['project_code'] ?? '' }}</div>
                                <div style="font-weight:800;color:{{ $C['slate'] }};margin-top:2px">{{ $p['project']['project_name'] ?? '' }}</div>
                            </div>
                            <span style="{{ $badgeBase }};background:{{ $st['bg'] }};color:{{ $st['color'] }}">{{ $p['project']['status'] ?? '—' }}</span>
                        </div>
                        <div style="{{ $track }};height:8px;margin:14px 0 8px">
                            <div style="height:100%;width:{{ $spend }}%;border-radius:99px;background:{{ ($c['status'] ?? '') === 'over' ? $C['rose'] : $C['indigo'] }}"></div>
                        </div>
                        <div style="display:flex;justify-content:space-between;font-size:12px;color:{{ $C['muted'] }}">
                            <span>{{ $pct($c['spend_percent'] ?? 0) }} spent</span>
                            <span style="{{ $badgeBase }};padding:2px 8px;background:{{ $vs['bg'] }};color:{{ $vs['color'] }}">
                                {{ ($c['status'] ?? '') === 'over' ? __('dashboard.over') : (($c['status'] ?? '') === 'under' ? __('dashboard.under') : __('dashboard.on_budget')) }}
                            </span>
                        </div>
                        <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px;font-size:12px">
                            <div style="background:#f8fafc;border-radius:10px;padding:8px">
                                <div style="color:{{ $C['muted'] }}">{{ __('dashboard.estimated') }}</div>
                                <div style="font-weight:700">{{ $moneyK($c['estimated_budget'] ?? 0) }}</div>
                            </div>
                            <div style="background:#f8fafc;border-radius:10px;padding:8px">
                                <div style="color:{{ $C['muted'] }}">{{ __('dashboard.actual') }}</div>
                                <div style="font-weight:700">{{ $moneyK($c['actual_total'] ?? 0) }}</div>
                            </div>
                        </div>
                        <div style="display:flex;gap:6px;flex-wrap:wrap;margin-top:10px;font-size:11px;color:{{ $C['muted'] }}">
                            <span>{{ __('dashboard.mat_short') }} {{ $moneyK($a['materials_used'] ?? 0) }}</span>
                            <span>·</span>
                            <span>{{ __('dashboard.lab_short') }} {{ $moneyK($a['labor_cost'] ?? 0) }}</span>
                            <span>·</span>
                            <span>{{ __('dashboard.mach_short') }} {{ $moneyK($a['machinery_cost'] ?? 0) }}</span>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif
    </div>

    {{-- Shareholders / Activity / Quick links --}}
    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px">
        <div style="{{ $card }}">
            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px">
                <div>
                    <h3 style="margin:0;font-size:16px;font-weight:800;color:{{ $C['slate'] }}">{{ __('dashboard.shareholders') }}</h3>
                    <p style="margin:4px 0 0;font-size:12px;color:{{ $C['muted'] }}">{{ __('dashboard.ownership_on_chart_of_accounts') }}</p>
                </div>
                <a href="{{ url('/reports/account-ledger') }}" style="{{ $ghost }}">{{ __('dashboard.ledger') }}</a>
            </div>
            @if (($data['shareholders'] ?? collect())->isEmpty())
                <div style="padding:18px 8px;color:{{ $C['muted'] }};font-size:13px">
                    {{ __('dashboard.no_shareholder_ownership') }}
                    <a href="{{ url('/settings/accounts') }}" style="color:{{ $C['indigo'] }};font-weight:700">{{ __('dashboard.accounts') }}</a>
                </div>
            @else
                <div style="display:flex;flex-direction:column;gap:10px">
                    @foreach ($data['shareholders'] as $s)
                        <div style="display:flex;justify-content:space-between;align-items:center;padding:12px;border-radius:12px;background:#f8fafc;border:1px solid #eef2ff">
                            <div>
                                <div style="font-weight:700;color:{{ $C['slate'] }}">{{ $s->account_name }}</div>
                                <div style="font-size:12px;color:{{ $C['muted'] }}">{{ $s->account_code }} · {{ $s->type_name ?: __('common.account') }}</div>
                            </div>
                            <div style="text-align:right">
                                <div style="font-weight:800;color:{{ $C['indigo'] }}">{{ number_format((float) ($s->ownership_percent ?? 0), 2) }}%</div>
                                <div style="font-size:11px;color:{{ $C['muted'] }}">{{ __('dashboard.ownership') }}</div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>

        <div style="{{ $card }}">
            <div>
                <h3 style="margin:0;font-size:16px;font-weight:800;color:{{ $C['slate'] }}">{{ __('dashboard.recent_activity') }}</h3>
                <p style="margin:4px 0 0;font-size:12px;color:{{ $C['muted'] }}">{{ __('dashboard.purchases_expenses_labor_transfers') }}</p>
            </div>
            <div style="display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 14px">
                @foreach ([
                    ['purchases', __('dashboard.purchases')],
                    ['expenses', __('dashboard.expenses')],
                    ['labor', __('dashboard.labor')],
                    ['transfers', __('dashboard.transfers')],
                ] as [$id, $label])
                    <button type="button" wire:click="setFeed('{{ $id }}')"
                        style="border:1px solid {{ $feed === $id ? $C['slate'] : '#e2e8f0' }};border-radius:99px;padding:6px 12px;font-size:12px;cursor:pointer;font-weight:600;background:{{ $feed === $id ? $C['slate'] : '#f8fafc' }};color:{{ $feed === $id ? '#fff' : $C['muted'] }}">
                        {{ $label }}
                    </button>
                @endforeach
            </div>
            @php $rows = $data['recent'][$feed] ?? collect(); @endphp
            @if ($rows->isEmpty())
                <div style="color:{{ $C['muted'] }};font-size:13px;padding:12px 0">{{ __('dashboard.no_recent_feed', ['feed' => __('dashboard.'.$feed)]) }}</div>
            @else
                <div style="display:flex;flex-direction:column;gap:8px">
                    @foreach ($rows as $r)
                        <div style="display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid #f1f5f9">
                            @if ($feed === 'purchases')
                                <div>
                                    <div style="font-size:13px;font-weight:700;color:{{ $C['slate'] }}">{{ $r->purchase_no ?: __('menu.purchase_order') }} · {{ $r->supplier_name ?: __('common.supplier') }}</div>
                                    <div style="font-size:11px;color:{{ $C['muted'] }};margin-top:2px">{{ $dt($r->purchase_date) }} · {{ $r->payment_type }}</div>
                                </div>
                                <div style="font-size:13px;font-weight:800;color:{{ $C['slate'] }};white-space:nowrap">{{ $money($r->grand_total) }}</div>
                            @elseif ($feed === 'expenses')
                                <div>
                                    <div style="font-size:13px;font-weight:700;color:{{ $C['slate'] }}">{{ $r->expense_no ?: __('dashboard.expenses') }} · {{ $r->project_name ?: __('common.project') }}</div>
                                    <div style="font-size:11px;color:{{ $C['muted'] }};margin-top:2px">{{ $dt($r->expense_date) }} · {{ $r->status }}</div>
                                </div>
                                <div style="font-size:13px;font-weight:800;color:{{ $C['slate'] }};white-space:nowrap">{{ $money($r->amount) }}</div>
                            @elseif ($feed === 'labor')
                                <div>
                                    <div style="font-size:13px;font-weight:700;color:{{ $C['slate'] }}">{{ $r->employee_name ?: __('dashboard.worker') }} · {{ $r->project_name }}</div>
                                    <div style="font-size:11px;color:{{ $C['muted'] }};margin-top:2px">{{ $dt($r->work_date) }} · {{ $r->unit_type }} × {{ $r->quantity }}</div>
                                </div>
                                <div style="font-size:13px;font-weight:800;color:{{ $C['slate'] }};white-space:nowrap">{{ $money($r->amount) }}</div>
                            @else
                                <div>
                                    <div style="font-size:13px;font-weight:700;color:{{ $C['slate'] }}">{{ $r->from_name ?: __('common.from') }} → {{ $r->to_name ?: __('common.to') }}</div>
                                    <div style="font-size:11px;color:{{ $C['muted'] }};margin-top:2px">{{ $dt($r->transfer_date) }} · {{ $r->transfer_no ?: $r->status }}</div>
                                </div>
                                <div style="font-size:13px;font-weight:800;color:{{ $C['slate'] }};white-space:nowrap">{{ $money($r->from_amount ?: $r->to_amount) }}</div>
                            @endif
                        </div>
                    @endforeach
                </div>
            @endif
        </div>

        <div style="{{ $card }}">
            <div>
                <h3 style="margin:0;font-size:16px;font-weight:800;color:{{ $C['slate'] }}">{{ __('dashboard.quick_links') }}</h3>
                <p style="margin:4px 0 0;font-size:12px;color:{{ $C['muted'] }}">{{ __('dashboard.jump_into_the_six_modules') }}</p>
            </div>
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px">
                @foreach ([
                    ['/projects', 'fa-building', __('common.projects')],
                    ['/reports/project-budget', 'fa-balance-scale', __('common.budget')],
                    ['/reports/project-cost', 'fa-clipboard-list', __('dashboard.cost_vs_budget')],
                    ['/reports/purchase-payables', 'fa-credit-card', __('common.payables')],
                    ['/employee/labor-work', 'fa-hard-hat', __('dashboard.labor_work')],
                    ['/employee/labor-report', 'fa-users', __('dashboard.labor_report')],
                    ['/equipment/payments', 'fa-tools', __('dashboard.hire_payments')],
                    ['/equipment/reports', 'fa-tools', __('dashboard.machinery')],
                    ['/purchase/supplier-payments', 'fa-money-bill-wave', __('dashboard.supplier_pay')],
                    ['/purchase/project-expense', 'fa-receipt', __('common.expenses')],
                    ['/reports/account-ledger', 'fa-wallet', __('common.ledger')],
                    ['/account-transfers', 'fa-exchange-alt', __('common.transfers')],
                ] as [$href, $icon, $label])
                    <a href="{{ url($href) }}" style="{{ $qLink }}">
                        <i class="fa {{ $icon }}" style="color:{{ $C['indigo'] }};font-size:13px"></i>
                        {{ $label }}
                    </a>
                @endforeach
            </div>
        </div>
    </div>
</div>