@php
    $hm = function ($min) {
        $min = max(0, (int) round($min));
        return intdiv($min, 60) . 'h ' . str_pad($min % 60, 2, '0', STR_PAD_LEFT) . 'm';
    };
    // Hours read better as a decimal once you are comparing three columns of
    // them; minutes are for the personal view, where every one of them is yours.
    $hrs = fn ($min) => round(max(0, (int) $min) / 60, 1);

    // The day's punctuality ruling, not the clock lifecycle: a day can be
    // closed and still be late.
    $dayBadge = [
        'present' => ['emerald', __('Present')],
        'late' => ['amber', __('Late')],
        'absent' => ['rose', __('Absent')],
    ];

    $tabMeta = [
        'me' => ['label' => __('My attendance'), 'icon' => 'user-circle'],
        'hours' => ['label' => __('Hours & gaps'), 'icon' => 'chart-pie'],
        'today' => ['label' => __('Who is in'), 'icon' => 'users'],
        'records' => ['label' => __('Records'), 'icon' => 'queue-list'],
        'appeals' => ['label' => __('Appeals'), 'icon' => 'scale-balance'],
        'offsite' => ['label' => __('Off-site'), 'icon' => 'shield-check'],
    ];
    $tabs = array_intersect_key($tabMeta, array_flip($visibleTabs));

    $subtitle = match ($tab) {
        'hours' => __('What was meant to be worked, what was clocked, and the gap.'),
        'today' => __('Who is in, out, late or on leave right now.'),
        'records' => __('Every clock record for the team.'),
        'appeals' => __('Staff asking for a late or absent day to be reconsidered.'),
        'offsite' => __('Clocking in from away from the shop.'),
        default => __('Clock in, on site, track your hours and request leave.'),
    };
@endphp

<div class="px-4 py-8 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-7xl space-y-6">
    <x-people-tabs />

    <x-page-header :title="__('Attendance')" :subtitle="$subtitle">
        <div class="flex flex-wrap items-center gap-2">
            @if ($canHrSettings)
                <a href="{{ route('hr.index', ['tab' => 'settings']) }}" wire:navigate>
                    <x-secondary-button type="button">
                        <x-icon name="cog-6-tooth" class="mr-1.5 h-4 w-4" /> {{ __('Clock-in rules') }}
                    </x-secondary-button>
                </a>
            @endif
            @if ($tab === 'me')
                <x-secondary-button type="button" wire:click="exportReport">
                    <x-icon name="arrow-down-tray" class="mr-1.5 h-4 w-4" /> {{ __('Export') }}
                </x-secondary-button>
            @endif
        </div>
    </x-page-header>

    {{-- Clock bar, slim status + live timer + action ---------------------- --}}
    <div @class([
        'flex flex-col gap-3 rounded-2xl px-5 py-3.5 shadow-sm ring-1 transition-colors sm:flex-row sm:items-center sm:justify-between',
        'bg-gradient-to-r from-emerald-600 to-emerald-700 ring-emerald-700/20 text-white' => $isClockedIn,
        'bg-white ring-slate-200/70' => ! $isClockedIn,
    ])>
        <div class="flex items-center gap-3">
            <span @class([
                'flex h-10 w-10 shrink-0 items-center justify-center rounded-xl',
                'bg-white/15 text-white' => $isClockedIn,
                'bg-slate-100 text-slate-500' => ! $isClockedIn,
            ])><x-icon name="clock" class="h-5 w-5" /></span>

            @if ($isClockedIn)
                <div class="leading-tight">
                    <p class="flex items-center gap-1.5 text-xs font-medium text-emerald-100">
                        <span class="relative flex h-2 w-2">
                            <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-white opacity-75"></span>
                            <span class="relative inline-flex h-2 w-2 rounded-full bg-white"></span>
                        </span>{{ __('On the clock') }}
                        @if ($isRemoteToday)
                            <span class="ms-1 rounded-full bg-white/20 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-white">{{ __('Remote') }}</span>
                        @endif
                    </p>
                    <p class="font-mono text-2xl font-bold tabular-nums tracking-tight"
                        x-data="{ start: {{ $clockStartTimestamp }}, label: '00:00:00', tick() { let s = Math.max(0, Math.floor(Date.now()/1000) - this.start); let h = String(Math.floor(s/3600)).padStart(2,'0'); let m = String(Math.floor((s%3600)/60)).padStart(2,'0'); let sec = String(s%60).padStart(2,'0'); this.label = `${h}:${m}:${sec}`; } }"
                        x-init="tick(); setInterval(() => tick(), 1000)" x-text="label">00:00:00</p>
                </div>
            @else
                <div class="leading-tight">
                    <p class="text-sm font-bold text-slate-800">
                        {{ __('Not Clocked In') }}
                        @if ($isRemoteToday)
                            <span class="ms-1 align-middle"><x-badge color="violet">{{ __('Remote') }}</x-badge></span>
                        @endif
                    </p>
                    <p class="text-xs text-slate-500">
                        {{ $today && $today->clock_in_at
                            ? __('Welcome back.')
                            : __('Day starts :start · on time until :cutoff', ['start' => $expectedStart, 'cutoff' => $absentCutoff]) }}
                    </p>

                    {{-- Not going to make it: book the hours rather than arrive
                         late and appeal the ruling afterwards. Approved, the
                         deadline above moves and the day is never marked late. --}}
                    @if ($myPartialLeave)
                        <p class="mt-1 flex items-center gap-1.5 text-xs font-medium text-indigo-600">
                            <x-icon name="check-circle" class="h-3.5 w-3.5" />
                            {{ __('Approved: :length · due in by :cutoff', [
                                'length' => $myPartialLeave->lengthLabel(),
                                'cutoff' => $absentCutoff,
                            ]) }}
                        </p>
                    @elseif ($canBookTimeOff)
                        <button type="button" wire:click="openLeave('partial')"
                            class="mt-1 inline-flex items-center gap-1 text-xs font-semibold text-indigo-600 transition hover:text-indigo-800">
                            <x-icon name="clock" class="h-3.5 w-3.5" />
                            {{ __('Running late? Apply for the hours off') }}
                        </button>
                    @endif
                </div>
            @endif
        </div>

        {{-- Both buttons route through `clockAction` so a geofenced workspace can
             take a position reading before the action fires. --}}
        <div x-data="clockAction(@js($needsLocation))" class="flex flex-col items-stretch gap-1 sm:items-end">
            @if ($isClockedIn)
                <button type="button" @click="clock('clockOut')" :disabled="busy"
                    class="inline-flex items-center justify-center gap-2 rounded-xl bg-white px-5 py-2.5 text-sm font-semibold text-emerald-700 shadow-sm transition hover:bg-emerald-50 disabled:opacity-50">
                    <x-icon name="stop" class="h-4 w-4" x-show="!locating" />
                    <x-icon name="map-pin" class="h-4 w-4 animate-pulse" x-show="locating" x-cloak />
                    <span x-text="locating ? '{{ __('Checking location…') }}' : '{{ __('Clock out') }}'">{{ __('Clock out') }}</span>
                </button>
            @else
                <button type="button" @click="clock('clockIn')" :disabled="busy"
                    class="inline-flex items-center justify-center gap-2 rounded-xl bg-brand-900 px-5 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-brand-800 disabled:opacity-50">
                    <x-icon name="play" class="h-4 w-4" x-show="!locating" />
                    <x-icon name="map-pin" class="h-4 w-4 animate-pulse" x-show="locating" x-cloak />
                    <span x-text="locating ? '{{ __('Checking location…') }}' : '{{ __('Clock in') }}'">{{ __('Clock in') }}</span>
                </button>
            @endif
        </div>
    </div>

    {{-- What I'm working on: a quick note the team can see ------------------- --}}
    @if ($isClockedIn || $workUpdates->isNotEmpty())
        <div class="rounded-2xl bg-white px-5 py-3.5 shadow-sm ring-1 ring-slate-200/70">
            <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                <div class="flex items-center gap-2 text-sm">
                    <x-icon name="pencil-square" class="h-4 w-4 text-slate-400" />
                    @if ($workUpdates->isNotEmpty())
                        @php $latestUpdate = $workUpdates->first(); @endphp
                        <span class="text-slate-700">{{ $latestUpdate->body }}</span>
                        @if ($latestUpdate->subjectLabel())
                            <x-badge color="slate">{{ $latestUpdate->subjectLabel() }}</x-badge>
                        @endif
                        <span class="whitespace-nowrap text-xs text-slate-400">{{ $latestUpdate->created_at->timezone($tz)->format('H:i') }}</span>
                    @else
                        <span class="text-slate-500">
                            {{ __('What are you working on today?') }}
                            @if ($activityCheckOn)<span class="text-xs text-slate-400">{{ __('A quick line keeps the team up to date.') }}</span>@endif
                        </span>
                    @endif
                </div>
                <button type="button" wire:click="toggleWorkUpdateForm" class="inline-flex items-center gap-1 whitespace-nowrap text-xs font-semibold text-indigo-600 transition hover:text-indigo-800">
                    <x-icon name="plus" class="h-3.5 w-3.5" />{{ __('Add an update') }}
                </button>
            </div>

            @if ($showWorkUpdateForm)
                <form wire:submit="postWorkUpdate" class="mt-3 grid grid-cols-1 gap-3 border-t border-slate-100 pt-3 sm:grid-cols-12">
                    <div class="sm:col-span-7">
                        <x-label for="wu_body" :value="__('What I\'m working on')" />
                        <x-input id="wu_body" type="text" maxlength="500" class="mt-1 block w-full" wire:model="wu_body" placeholder="{{ __('e.g. Following up three leads from the expo') }}" />
                        <x-input-error for="wu_body" class="mt-2" />
                    </div>
                    <div class="sm:col-span-3">
                        <x-label for="wu_link" :value="__('Link (optional)')" />
                        <select id="wu_link" wire:model="wu_link" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="">{{ __('Nothing') }}</option>
                            @foreach ($workLinkOptions as $group => $options)
                                @if (! empty($options))
                                    <optgroup label="{{ $group }}">
                                        @foreach ($options as $value => $label)<option value="{{ $value }}">{{ $label }}</option>@endforeach
                                    </optgroup>
                                @endif
                            @endforeach
                        </select>
                        <x-input-error for="wu_link" class="mt-2" />
                    </div>
                    <div class="flex items-end sm:col-span-2">
                        <x-button type="submit" class="w-full justify-center" wire:loading.attr="disabled" wire:target="postWorkUpdate">{{ __('Post') }}</x-button>
                    </div>
                </form>
                @if ($workUpdates->count() > 1)
                    <ul class="mt-3 space-y-1 text-xs text-slate-500">
                        @foreach ($workUpdates->skip(1) as $u)
                            <li><span class="text-slate-400">{{ $u->created_at->timezone($tz)->format('H:i') }}</span> {{ $u->body }}@if ($u->subjectLabel()) · {{ $u->subjectLabel() }}@endif</li>
                        @endforeach
                    </ul>
                @endif
            @endif
        </div>
    @endif

    {{-- Today's off-site application, while it is still live ---------------- --}}
    @if ($offsiteRequest && ! $offsiteRequest->revoked_at)
        @php $isPendingOffsite = $offsiteRequest->isPending(); @endphp
        <div @class([
            'flex items-start gap-3 rounded-2xl px-5 py-4 ring-1',
            'bg-amber-50 ring-amber-200' => $isPendingOffsite,
            'bg-rose-50 ring-rose-200' => $offsiteRequest->isRejected(),
            'bg-emerald-50 ring-emerald-200' => $offsiteRequest->isApproved(),
        ])>
            <span @class([
                'mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg',
                'bg-amber-100 text-amber-600' => $isPendingOffsite,
                'bg-rose-100 text-rose-600' => $offsiteRequest->isRejected(),
                'bg-emerald-100 text-emerald-600' => $offsiteRequest->isApproved(),
            ])>
                <x-icon :name="$isPendingOffsite ? 'clock' : ($offsiteRequest->isRejected() ? 'x-circle' : 'check-circle')" class="h-5 w-5" />
            </span>
            <div class="min-w-0">
                <p class="text-sm font-semibold text-slate-800">
                    @if ($isPendingOffsite)
                        {{ __('Your off-site request is waiting for approval') }}
                    @elseif ($offsiteRequest->isRejected())
                        {{ __('Your off-site request was declined') }}
                    @else
                        {{ __('You are cleared to work off-site today') }}
                    @endif
                </p>
                <p class="mt-1 text-sm text-slate-600">
                    @if ($isPendingOffsite)
                        {{ __('Sent at :time.', [
                            'time' => $offsiteRequest->requested_at?->timezone($tz)?->format('H:i'),
                        ]) }}
                    @elseif ($offsiteRequest->decision_note)
                        {{ $offsiteRequest->decision_note }}
                    @else
                        {{ __('Clock in from where you are.') }}
                    @endif
                </p>
            </div>
        </div>
    @endif

    {{-- Tabs ----------------------------------------------------------- --}}
    <div @class([
        'flex flex-wrap items-center gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1 text-sm font-medium',
        'hidden' => count($tabs) < 2,
    ])>
        @foreach ($tabs as $key => $meta)
            <button type="button" wire:click="setTab('{{ $key }}')"
                class="inline-flex items-center gap-1.5 whitespace-nowrap rounded-lg px-3.5 py-1.5 transition {{ $tab === $key ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700' }}">
                <x-icon :name="$meta['icon']" class="h-4 w-4" />
                {{ $meta['label'] }}
                @if ($key === 'appeals' && $pendingAppealCount > 0)
                    <span class="inline-flex h-5 min-w-[1.25rem] items-center justify-center rounded-full bg-rose-500 px-1 text-[10px] font-bold text-white">{{ $pendingAppealCount }}</span>
                @endif
                @if ($key === 'offsite' && $pendingOffsiteCount > 0)
                    <span class="inline-flex h-5 min-w-[1.25rem] items-center justify-center rounded-full bg-rose-500 px-1 text-[10px] font-bold text-white">{{ $pendingOffsiteCount }}</span>
                @endif
            </button>
        @endforeach
    </div>

    <div>
        @if ($tab === 'me')
        @php
            // Donut geometry (two arcs: regular + overtime).
            $C = 2 * M_PI * 54;
            $regLen = $C * ($summary['regularPct'] ?? 0) / 100;
            $otLen = $C * ($summary['overtimePct'] ?? 0) / 100;

            $leaveTabs = [
                'all' => __('All'), 'pending' => __('Pending'), 'approved' => __('Approved'),
                'rejected' => __('Rejected'), 'cancelled' => __('Cancelled'),
            ];

            // Today's ruling, if it is one the member can do something about.
            $todayRuling = $today && in_array($today->day_status, ['late', 'absent'], true) ? $today : null;
            $todayAppeal = $todayRuling ? $myAppeals->get($todayRuling->id) : null;
        @endphp
        {{-- Today's ruling, only when there is something to act on ------------ --}}
        @if ($todayRuling)
            @php $isAbsent = $todayRuling->day_status === 'absent'; @endphp
            <div @class([
                'flex flex-col gap-3 rounded-2xl px-5 py-4 ring-1 sm:flex-row sm:items-center sm:justify-between',
                'bg-rose-50 ring-rose-200' => $isAbsent,
                'bg-brand-yellow-50 ring-brand-yellow-200' => ! $isAbsent,
            ])>
                <div class="flex items-start gap-3">
                    <span @class([
                        'mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-xl',
                        'bg-rose-100 text-rose-600' => $isAbsent,
                        'bg-brand-yellow-100 text-brand-yellow-700' => ! $isAbsent,
                    ])><x-icon name="exclamation-triangle" class="h-5 w-5" /></span>
                    <div class="leading-tight">
                        <p @class(['text-sm font-bold', 'text-rose-900' => $isAbsent, 'text-brand-yellow-900' => ! $isAbsent])>
                            {{ $isAbsent ? __('Today is recorded as absent') : __('Today is recorded as late') }}
                        </p>
                    </div>
                </div>

                <div class="shrink-0 sm:pl-3">
                    @if ($todayAppeal?->status === 'pending')
                        <x-badge color="amber">{{ __('Appeal pending') }}</x-badge>
                    @elseif ($todayAppeal?->status === 'rejected')
                        <x-badge color="rose">{{ __('Appeal rejected') }}</x-badge>
                    @else
                        <button type="button" wire:click="openAppeal({{ $todayRuling->id }})"
                            class="inline-flex items-center justify-center gap-2 rounded-xl bg-white px-4 py-2 text-sm font-semibold text-slate-700 shadow-sm ring-1 ring-slate-200 transition hover:bg-slate-50">
                            <x-icon name="pencil-square" class="h-4 w-4" /> {{ __('Appeal this') }}
                        </button>
                    @endif
                </div>
            </div>
        @endif

        {{-- Metrics strip, all KPIs in one compact row ----------------------- --}}
        @php
            $tones = [
                'brand' => 'bg-brand-50 text-brand-700', 'accent' => 'bg-accent-50 text-accent-700',
                'emerald' => 'bg-emerald-50 text-emerald-700', 'sky' => 'bg-sky-50 text-sky-700',
                'amber' => 'bg-brand-yellow-50 text-brand-yellow-700', 'violet' => 'bg-accent-50 text-accent-700',
            ];
            $metrics = [
                ['label' => __('Today'), 'value' => $hm($todayMinutes), 'icon' => 'clock', 'tone' => 'brand'],
                ['label' => __('This Week'), 'value' => $hm($weekMinutes), 'icon' => 'chart-pie', 'tone' => 'accent'],
                ['label' => __('This Month'), 'value' => $hm($monthMinutes), 'icon' => 'calendar', 'tone' => 'emerald'],
                ['label' => __('Entitlement'), 'value' => (float) $balance['entitlement'] . 'd', 'icon' => 'gift', 'tone' => 'sky'],
                ['label' => __('Taken'), 'value' => (float) $balance['taken'] . 'd', 'icon' => 'calendar', 'tone' => 'amber'],
                ['label' => __('Remaining'), 'value' => (float) $balance['remaining'] . 'd', 'icon' => 'check-circle', 'tone' => 'emerald'],
                ['label' => __('Pending'), 'value' => (string) $pendingLeaveCount, 'icon' => 'document-text', 'tone' => 'violet'],
            ];
        @endphp
        <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-7">
            @foreach ($metrics as $m)
                <div class="flex items-center gap-2.5 rounded-xl bg-white px-3 py-2.5 ring-1 ring-slate-200/70 shadow-sm transition hover:shadow-md">
                    <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg {{ $tones[$m['tone']] }}">
                        <x-icon :name="$m['icon']" class="h-4 w-4" />
                    </span>
                    <div class="min-w-0">
                        <p class="truncate text-[10px] font-semibold uppercase tracking-wider text-slate-400">{{ $m['label'] }}</p>
                        <p class="truncate text-base font-bold leading-tight text-slate-900">{{ $m['value'] }}</p>
                    </div>
                </div>
            @endforeach
        </div>

        {{-- My pay & overtime -------------------------------------------------- --}}
        @if (($myPay['breakdown'] ?? null))
            @php $b = $myPay['breakdown']; $cur = $b['currency']; @endphp
            <div class="rounded-2xl bg-white p-5 ring-1 ring-slate-200/70 shadow-sm">
                <div class="flex items-center justify-between">
                    <h2 class="text-base font-semibold text-slate-900">{{ __('My Pay & Overtime') }}</h2>
                    <span class="text-xs text-slate-400">{{ __('Only you and management can see this') }}</span>
                </div>
                <div class="mt-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
                    <div class="rounded-xl bg-slate-50 px-4 py-3 ring-1 ring-slate-200">
                        <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Daily rate') }}</p>
                        <p class="mt-1 text-lg font-bold text-slate-900">{{ $cur }} {{ number_format($b['daily_rate'], 2) }}</p>
                        <p class="mt-0.5 font-mono text-[11px] text-slate-400">= {{ __('Salary') }} ÷ {{ number_format($b['avg_days_per_month'], 2) }}</p>
                    </div>
                    <div class="rounded-xl bg-slate-50 px-4 py-3 ring-1 ring-slate-200">
                        <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Hourly rate') }}</p>
                        <p class="mt-1 text-lg font-bold text-slate-900">{{ $cur }} {{ number_format($b['hourly_rate'], 2) }}</p>
                        <p class="mt-0.5 font-mono text-[11px] text-slate-400">= {{ __('Salary') }} ÷ {{ number_format($b['avg_monthly_hours'], 2) }}</p>
                    </div>
                    <div class="rounded-xl bg-slate-50 px-4 py-3 ring-1 ring-slate-200">
                        <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Overtime (this month)') }}</p>
                        <p class="mt-1 text-lg font-bold text-slate-900">{{ (float) $myPay['otHours'] }}h</p>
                        <p class="mt-0.5 font-mono text-[11px] text-slate-400">{{ $cur }} {{ number_format($myPay['otEarnings'], 2) }} @ ×{{ rtrim(rtrim(number_format($b['overtime_multiplier'], 2), '0'), '.') }}</p>
                    </div>
                    <div class="rounded-xl bg-slate-50 px-4 py-3 ring-1 ring-slate-200">
                        <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Last payslip') }}</p>
                        @if ($myPay['lastPayslip'])
                            <p class="mt-1 text-lg font-bold text-slate-900">{{ $cur }} {{ number_format($myPay['lastPayslip']['net'], 2) }}</p>
                            <p class="mt-0.5 text-[11px] text-slate-400">{{ optional($myPay['lastPayslip']['period'])->format('M Y') }}</p>
                        @else
                            <p class="mt-1 text-sm text-slate-400">{{ __('None yet') }}</p>
                        @endif
                    </div>
                </div>
                @if (($myPay['owed'] ?? collect())->isNotEmpty())
                    <div class="mt-3 rounded-xl bg-amber-50 px-4 py-3 text-sm text-amber-800 ring-1 ring-amber-200">
                        <p class="font-semibold">{{ __('Salary owed to you: :cur :amt', ['cur' => $cur, 'amt' => number_format($myPay['owed']->sum(fn ($a) => $a->outstanding()), 2)]) }}</p>
                        <p class="mt-0.5 text-xs">
                            @foreach ($myPay['owed'] as $owed){{ $owed->periodLabel() }} ({{ number_format($owed->outstanding(), 2) }})@if (! $loop->last), @endif @endforeach
                            · {{ __('earned and taxed already, to be paid on a later run or directly.') }}
                        </p>
                    </div>
                @endif
                <p class="mt-3 font-mono text-[11px] text-slate-400">
                    {{ __('Overtime pay') }} = {{ __('OT hours') }} × {{ __('Hourly rate') }} × {{ rtrim(rtrim(number_format($b['overtime_multiplier'], 2), '0'), '.') }}
                </p>
            </div>
        @endif

        {{-- Row 3, leave list + summary ------------------------------------- --}}
        <div class="grid gap-6 lg:grid-cols-3">
            {{-- My leave requests --}}
            <div class="lg:col-span-2 rounded-2xl bg-white ring-1 ring-slate-200/70 shadow-sm">
                <div class="flex items-center justify-between gap-3 border-b border-slate-100 px-5 py-4">
                    <h2 class="text-base font-semibold text-slate-900">{{ __('My Leave Requests') }}</h2>
                    <x-button variant="primary" wire:click="openLeave"><x-icon name="plus" class="h-4 w-4" /> {{ __('Apply for Leave') }}</x-button>
                </div>

                {{-- Same segmented control as every other filter strip in the app. --}}
                <div class="mx-5 mt-4 flex flex-wrap items-center gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1 text-xs font-medium">
                    @foreach ($leaveTabs as $key => $label)
                        <button type="button" wire:click="setLeaveFilter('{{ $key }}')"
                            @class([
                                'inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 transition',
                                'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' => $leaveFilter === $key,
                                'text-slate-500 hover:text-slate-700' => $leaveFilter !== $key,
                            ])>
                            {{ $label }}
                            <span @class([
                                'rounded-full px-1.5 text-[10px] font-semibold',
                                'bg-indigo-50 text-indigo-600' => $leaveFilter === $key,
                                'bg-white text-slate-500 ring-1 ring-slate-200' => $leaveFilter !== $key,
                            ])>{{ $leaveCounts[$key] }}</span>
                        </button>
                    @endforeach
                </div>

                @if ($myLeave->isEmpty())
                    <div class="p-5">
                        <x-empty-state icon="gift" :title="__('No leave requests yet')" :message="__('You haven\'t submitted any leave requests.')" />
                    </div>
                @else
                    <div class="overflow-x-auto p-2">
                        <table class="min-w-full divide-y divide-slate-100 text-sm">
                            <thead>
                                <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                                    <th class="px-3 lg:px-4 py-3.5">{{ __('Type') }}</th>
                                    <th class="px-3 lg:px-4 py-3.5">{{ __('Dates') }}</th>
                                    <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Days') }}</th>
                                    <th class="px-3 lg:px-4 py-3.5">{{ __('Status') }}</th>
                                    <th class="px-3 lg:px-4 py-3.5"></th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-50">
                                @foreach ($myLeave as $leave)
                                    <tr wire:key="myleave-{{ $leave->id }}" class="transition hover:bg-slate-50/70">
                                        <td class="px-3 lg:px-4 py-3 font-medium text-slate-800">{{ $leave->leaveType?->name }}</td>
                                        <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-slate-600">
                                            {{ $leave->isPartial()
                                                ? $leave->start_date->format('D d M Y')
                                                : $leave->start_date->format('d M') . ' – ' . $leave->end_date->format('d M Y') }}
                                            @if ($leave->isPartial())
                                                <span class="block text-[11px] text-indigo-600">{{ $leave->lengthLabel() }}</span>
                                            @endif
                                        </td>
                                        <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-right tabular-nums text-slate-700">{{ (float) $leave->requested_days }}</td>
                                        <td class="whitespace-nowrap px-3 lg:px-4 py-3">
                                            @php $tone = match ($leave->status) { 'approved' => 'emerald', 'rejected' => 'rose', 'cancelled' => 'slate', default => 'amber' }; @endphp
                                            <x-badge :color="$tone">{{ ucfirst($leave->status) }}</x-badge>
                                            @if ($leave->status === 'rejected' && $leave->blocked_reason)<span class="ml-1 text-xs text-slate-400">{{ $leave->blocked_reason }}</span>@endif
                                        </td>
                                        <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-right">
                                            @if (in_array($leave->status, ['pending', 'approved'], true))
                                                <button wire:click="cancelLeave({{ $leave->id }})" class="text-xs font-medium text-slate-500 hover:text-rose-600">{{ __('Cancel') }}</button>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>

            {{-- Attendance summary --}}
            <div class="rounded-2xl bg-white ring-1 ring-slate-200/70 shadow-sm">
                <div class="flex items-center justify-between gap-3 border-b border-slate-100 px-5 py-4">
                    <h2 class="text-base font-semibold text-slate-900">{{ __('Attendance Summary') }}</h2>
                    <span class="rounded-lg bg-slate-100 px-2.5 py-1 text-xs font-medium text-slate-600">{{ __('This Month') }}</span>
                </div>

                <div class="flex flex-col items-center px-5 py-5">
                    <div class="relative h-44 w-44">
                        <svg viewBox="0 0 120 120" class="h-full w-full -rotate-90">
                            <circle cx="60" cy="60" r="54" fill="none" stroke="#eef2f7" stroke-width="12" />
                            @if (($summary['workedMinutes'] ?? 0) > 0)
                                <circle cx="60" cy="60" r="54" fill="none" stroke="#6366f1" stroke-width="12" stroke-linecap="round"
                                    stroke-dasharray="{{ $regLen }} {{ $C - $regLen }}" stroke-dashoffset="0" />
                                <circle cx="60" cy="60" r="54" fill="none" stroke="#10b981" stroke-width="12" stroke-linecap="round"
                                    stroke-dasharray="{{ $otLen }} {{ $C - $otLen }}" stroke-dashoffset="{{ -$regLen }}" />
                            @endif
                        </svg>
                        <div class="absolute inset-0 flex flex-col items-center justify-center">
                            <span class="text-2xl font-bold tracking-tight text-slate-900">{{ $hm($summary['workedMinutes']) }}</span>
                            <span class="text-xs text-slate-500">{{ __('Total Worked') }}</span>
                        </div>
                    </div>

                    <div class="mt-5 w-full space-y-2.5 text-sm">
                        <div class="flex items-center justify-between">
                            <span class="flex items-center gap-2 text-slate-600"><span class="h-2.5 w-2.5 rounded-full" style="background:#6366f1"></span>{{ __('Regular Hours') }}</span>
                            <span class="font-medium text-slate-800">{{ $hm($summary['regularMinutes']) }} <span class="text-slate-400">({{ $summary['regularPct'] }}%)</span></span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="flex items-center gap-2 text-slate-600"><span class="h-2.5 w-2.5 rounded-full" style="background:#10b981"></span>{{ __('Overtime') }}</span>
                            <span class="font-medium text-slate-800">{{ $hm($summary['overtimeMinutes']) }} <span class="text-slate-400">({{ $summary['overtimePct'] }}%)</span></span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="flex items-center gap-2 text-slate-600"><span class="h-2.5 w-2.5 rounded-full" style="background:#f59e0b"></span>{{ __('Late Arrivals') }}</span>
                            <span class="font-medium text-slate-800">{{ $hm($summary['lateMinutes']) }}</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="flex items-center gap-2 text-slate-600"><span class="h-2.5 w-2.5 rounded-full" style="background:#14b8a6"></span>{{ __('Early Departures') }}</span>
                            <span class="font-medium text-slate-800">{{ $hm($summary['earlyMinutes']) }}</span>
                        </div>
                    </div>

                    <div class="mt-5 grid w-full grid-cols-4 gap-2 border-t border-slate-100 pt-4 text-center">
                        <div><p class="text-[11px] uppercase tracking-wide text-slate-400">{{ __('Work Days') }}</p><p class="mt-0.5 text-sm font-bold text-slate-900">{{ $summary['workDays'] }}</p></div>
                        <div><p class="text-[11px] uppercase tracking-wide text-slate-400">{{ __('Avg/Day') }}</p><p class="mt-0.5 text-sm font-bold text-slate-900">{{ $hm($summary['avgMinutes']) }}</p></div>
                        <div><p class="text-[11px] uppercase tracking-wide text-slate-400">{{ __('Overtime') }}</p><p class="mt-0.5 text-sm font-bold text-slate-900">{{ $hm($summary['overtimeMinutes']) }}</p></div>
                        <div><p class="text-[11px] uppercase tracking-wide text-slate-400">{{ __('Attendance') }}</p><p class="mt-0.5 text-sm font-bold text-emerald-600">{{ $summary['attendancePct'] }}%</p></div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Row 4, recent days --------------------------------------------- --}}
        <div class="rounded-2xl bg-white ring-1 ring-slate-200/70 shadow-sm">
            <div class="border-b border-slate-100 px-5 py-4"><h2 class="text-base font-semibold text-slate-900">{{ __('Recent Days') }}</h2></div>
            @if ($recent->isEmpty())
                <div class="p-5"><x-empty-state icon="clock" :title="__('No clock records yet')" /></div>
            @else
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-slate-100 text-sm">
                        <thead>
                            <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Date') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('In') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Out') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Total Hours') }}</th>
                                <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Overtime') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Status') }}</th>
                                <th class="px-3 lg:px-4 py-3.5"></th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-50">
                            @foreach ($recent as $r)
                                <tr wire:key="recent-{{ $r->id }}" class="transition hover:bg-slate-50/70">
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3 font-medium text-slate-800">{{ $r->business_date->format('D d M Y') }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-slate-600">{{ $r->clock_in_at?->timezone($tz)?->format('H:i') ?? '—' }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-slate-600">{{ $r->clock_out_at?->timezone($tz)?->format('H:i') ?? '—' }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-right"><span class="rounded-md bg-emerald-50 px-2 py-0.5 text-xs font-medium text-emerald-700">{{ $hm($r->worked_minutes) }}</span></td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-right">
                                        @if ($r->overtime_minutes > 0)<span class="rounded-md bg-violet-50 px-2 py-0.5 text-xs font-medium text-violet-700">{{ $hm($r->overtime_minutes) }}</span>@else<span class="text-slate-400">—</span>@endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3">
                                        @php [$badgeColor, $badgeLabel] = $dayBadge[$r->day_status] ?? $dayBadge['present']; @endphp
                                        <x-badge :color="$badgeColor">{{ $badgeLabel }}</x-badge>
                                        @if ($r->day_status_corrected_at)
                                            <span class="ml-1 text-xs text-slate-400">{{ __('corrected') }}</span>
                                        @elseif ($r->marked_absent_at && $r->clock_in_at)
                                            <span class="ml-1 text-xs text-slate-400">{{ __('arrived after cut-off') }}</span>
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-right">
                                        @php $appeal = $myAppeals->get($r->id); @endphp
                                        @if ($appeal?->status === 'pending')
                                            <button type="button" wire:click="cancelAppeal({{ $appeal->id }})"
                                                wire:confirm="{{ __('Withdraw this appeal?') }}"
                                                class="text-xs font-medium text-amber-600 transition hover:text-amber-800">{{ __('Appeal pending') }}</button>
                                        @elseif ($appeal?->status === 'approved')
                                            <span class="text-xs font-medium text-emerald-600">{{ __('Appeal approved') }}</span>
                                        @elseif ($appeal?->status === 'rejected')
                                            <span class="text-xs font-medium text-rose-500" @if ($appeal->decision_note) title="{{ $appeal->decision_note }}" @endif>{{ __('Appeal rejected') }}</span>
                                        @elseif (in_array($r->day_status, ['late', 'absent'], true))
                                            <button type="button" wire:click="openAppeal({{ $r->id }})"
                                                class="text-xs font-medium text-indigo-600 transition hover:text-indigo-800">{{ __('Appeal') }}</button>
                                        @else
                                            <span class="text-slate-300">—</span>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                @if ($canReadTeam)
                    <div class="border-t border-slate-100 px-5 py-3 text-center">
                        <button type="button" wire:click="setTab('records')" class="inline-flex items-center gap-1 text-sm font-medium text-accent-700 hover:text-accent-800">
                            {{ __('View the whole team’s attendance records') }} <x-icon name="arrow-right" class="h-4 w-4" />
                        </button>
                    </div>
                @endif
            @endif
        </div>

        {{-- HOURS: PLANNED vs CLOCKED --}}
        @elseif ($tab === 'hours')
            @php
                // One colour scale for the whole tab, so a bar, a chip and a
                // percentage never disagree about whether a number is good.
                $tone = fn (int $pct) => match (true) {
                    $pct >= 100 => ['bg-emerald-500', 'text-emerald-700', 'bg-emerald-50 ring-emerald-200'],
                    $pct >= 90 => ['bg-sky-500', 'text-sky-700', 'bg-sky-50 ring-sky-200'],
                    $pct >= 70 => ['bg-amber-500', 'text-amber-700', 'bg-amber-50 ring-amber-200'],
                    default => ['bg-rose-500', 'text-rose-700', 'bg-rose-50 ring-rose-200'],
                };

                $grains = [
                    'day' => ['label' => __('Daily'), 'icon' => 'calendar'],
                    'week' => ['label' => __('Weekly'), 'icon' => 'calendar-days'],
                    'month' => ['label' => __('Monthly'), 'icon' => 'table-cells'],
                ];

                $totals = $hours['totals'];
                $onePerson = ! $teamWide || $h_user_id;
                $headcount = count($hours['people']);
                $whose = $teamWide
                    ? ($h_user_id ? ($members->firstWhere('id', (int) $h_user_id)?->name ?? __('One employee')) : __('Everyone'))
                    : __('You');

                // The standard day/week/month is one person's. Quoting it beside
                // a whole-team total would read as though three people between
                // them owed eight hours, so the footnote follows the scope.
                $glanceCards = [
                    ['key' => 'day', 'label' => __('Today'), 'sub' => $onePerson
                        ? __('against a :n h day', ['n' => $standardDay])
                        : trans_choice('{1} :count person, :n h each|[2,*] :count people, :n h each', $headcount, ['count' => $headcount, 'n' => $standardDay])],
                    ['key' => 'week', 'label' => __('This week'), 'sub' => $onePerson
                        ? __('against :n h a week', ['n' => $weeklyHours])
                        : trans_choice('{1} :count person, :n h each|[2,*] :count people, :n h each', $headcount, ['count' => $headcount, 'n' => $weeklyHours])],
                    ['key' => 'month', 'label' => __('This month'), 'sub' => $onePerson
                        ? __('against ~:n h a month', ['n' => $monthlyHours])
                        : trans_choice('{1} :count person, ~:n h each|[2,*] :count people, ~:n h each', $headcount, ['count' => $headcount, 'n' => $monthlyHours])],
                ];
            @endphp

            <div class="space-y-6">
                {{-- At a glance: the three questions, always the same three,
                     whatever range the breakdown below is set to. --}}
                <div class="grid gap-4 sm:grid-cols-3">
                    @foreach ($glanceCards as $card)
                        @php
                            $g = $glance[$card['key']];
                            $pct = (int) $g['pct'];
                            [$bar, $text, $chip] = $tone($pct);
                            $behind = (int) $g['gap'];
                        @endphp
                        <div class="rounded-2xl bg-white p-5 ring-1 ring-slate-200/70 shadow-sm transition hover:shadow-md">
                            <div class="flex items-start justify-between gap-2">
                                <div class="min-w-0">
                                    <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ $card['label'] }}</p>
                                    <p class="mt-2 text-2xl font-bold leading-none tracking-tight text-slate-900 tabular-nums">{{ $hrs($g['worked']) }}<span class="text-base font-semibold text-slate-400">h</span></p>
                                    <p class="mt-1.5 text-xs text-slate-500">
                                        {{ __('of :n h expected', ['n' => $hrs($g['expected'])]) }}
                                        @if ($g['leave'] > 0)
                                            · <span class="text-indigo-600">{{ __(':n h on leave', ['n' => $hrs($g['leave'])]) }}</span>
                                        @endif
                                    </p>
                                </div>
                                <span class="shrink-0 rounded-full px-2.5 py-1 text-[11px] font-semibold ring-1 {{ $chip }} {{ $text }}">{{ $pct }}%</span>
                            </div>

                            <div class="mt-4 h-2 w-full overflow-hidden rounded-full bg-slate-100">
                                <div class="h-full rounded-full {{ $bar }} transition-all" style="width: {{ min(100, $pct) }}%"></div>
                            </div>

                            <p class="mt-2.5 flex items-center gap-1.5 text-xs">
                                @if ($g['expected'] <= 0)
                                    <span class="text-slate-400">{{ __('Nothing expected — non-working time.') }}</span>
                                @elseif ($behind > 0)
                                    <x-icon name="exclamation-triangle" class="h-3.5 w-3.5 text-amber-500" />
                                    <span class="font-semibold text-amber-700">{{ __(':n h short', ['n' => $hrs($behind)]) }}</span>
                                    <span class="text-slate-400">· {{ $card['sub'] }}</span>
                                @else
                                    <x-icon name="check-circle" class="h-3.5 w-3.5 text-emerald-500" />
                                    <span class="font-semibold text-emerald-700">
                                        {{ $g['surplus'] > 0 ? __(':n h over', ['n' => $hrs($g['surplus'])]) : __('On target') }}
                                    </span>
                                    <span class="text-slate-400">· {{ $card['sub'] }}</span>
                                @endif
                            </p>
                        </div>
                    @endforeach
                </div>

                {{-- The breakdown ------------------------------------------ --}}
                <div class="rounded-2xl bg-white ring-1 ring-slate-200/70 shadow-sm">
                    <div class="flex flex-wrap items-center justify-between gap-3 border-b border-slate-100 px-5 py-4">
                        <div>
                            <h2 class="text-base font-semibold text-slate-900">{{ __('Planned vs clocked') }}</h2>
                            <p class="text-xs text-slate-500">
                                {{ __(':who · :from to :to', [
                                    'who' => $whose,
                                    'from' => $hours['from']->format('d M Y'),
                                    'to' => $hours['to']->format('d M Y'),
                                ]) }}
                            </p>
                        </div>
                        <div class="flex flex-wrap items-center gap-2">
                            <div class="flex items-center gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1 text-xs font-medium">
                                @foreach ($grains as $key => $meta)
                                    <button type="button" wire:click="setGranularity('{{ $key }}')"
                                        class="flex items-center gap-1.5 rounded-lg px-3 py-1.5 transition {{ $h_granularity === $key ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700' }}">
                                        <x-icon :name="$meta['icon']" class="h-4 w-4" />
                                        {{ $meta['label'] }}
                                    </button>
                                @endforeach
                            </div>
                            <x-button variant="secondary" wire:click="exportHours">
                                <x-icon name="arrow-down-tray" class="h-4 w-4" /> {{ __('Export CSV') }}
                            </x-button>
                        </div>
                    </div>

                    <div class="grid gap-3 border-b border-slate-100 bg-slate-50/60 px-5 py-4 sm:grid-cols-2 lg:grid-cols-4">
                        @if ($teamWide)
                            <div>
                                <x-label for="h_user_id" :value="__('Employee')" />
                                <select id="h_user_id" wire:model.live="h_user_id" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-accent-500 focus:ring-accent-500">
                                    <option value="">{{ __('Everyone') }}</option>
                                    @foreach ($members as $m)<option value="{{ $m->id }}">{{ $m->name }}</option>@endforeach
                                </select>
                            </div>
                        @endif
                        <div>
                            <x-label for="h_from" :value="__('From')" />
                            <x-input id="h_from" type="date" class="mt-1 block w-full" wire:model.live="h_from" />
                        </div>
                        <div>
                            <x-label for="h_to" :value="__('To')" />
                            <x-input id="h_to" type="date" class="mt-1 block w-full" wire:model.live="h_to" />
                        </div>
                        <div class="flex items-end">
                            <x-button variant="secondary" wire:click="resetHoursFilters" class="w-full justify-center">{{ __('Reset') }}</x-button>
                        </div>
                    </div>

                    {{-- Range totals, the one line a director reads first --}}
                    <div class="flex flex-wrap items-center gap-x-6 gap-y-2 border-b border-slate-100 px-5 py-3 text-xs text-slate-500">
                        <span>{{ __('Expected') }} <span class="font-semibold tabular-nums text-slate-800">{{ $hrs($totals['expected']) }}h</span></span>
                        <span>{{ __('Clocked') }} <span class="font-semibold tabular-nums text-slate-800">{{ $hrs($totals['worked']) }}h</span></span>
                        <span>{{ __('On leave') }} <span class="font-semibold tabular-nums text-indigo-700">{{ $hrs($totals['leave']) }}h</span></span>
                        <span>{{ __('Overtime') }} <span class="font-semibold tabular-nums text-emerald-700">{{ $hrs($totals['overtime']) }}h</span></span>
                        <span>{{ __('Gap') }}
                            <span class="font-semibold tabular-nums {{ $totals['gap'] > 0 ? 'text-rose-600' : 'text-emerald-700' }}">
                                {{ $totals['gap'] > 0 ? '−'.$hrs($totals['gap']).'h' : __('none') }}
                            </span>
                        </span>
                        <span class="ml-auto">{{ __('Days present') }} <span class="font-semibold tabular-nums text-slate-800">{{ $totals['days_present'] }}</span> / {{ $totals['days_expected'] }}</span>
                    </div>

                    @if (empty($hours['buckets']))
                        <div class="p-5">
                            <x-empty-state icon="clock" :title="__('Nothing to measure yet')"
                                :message="__('There are no working days in this range, or the range starts after today.')" />
                        </div>
                    @else
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-slate-100 text-sm">
                                <thead>
                                    <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                                        <th class="px-3 lg:px-4 py-3.5">{{ $grains[$h_granularity]['label'] }}</th>
                                        <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Expected') }}</th>
                                        <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Clocked') }}</th>
                                        <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Leave') }}</th>
                                        <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('OT') }}</th>
                                        <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Gap') }}</th>
                                        <th class="px-3 lg:px-4 py-3.5 w-48">{{ __('Attainment') }}</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-slate-50">
                                    @foreach (array_reverse($hours['buckets']) as $b)
                                        @php [$bar, $text, $chip] = $tone((int) $b['pct']); @endphp
                                        <tr wire:key="hb-{{ $b['key'] }}" class="transition hover:bg-slate-50/70">
                                            <td class="px-3 lg:px-4 py-3">
                                                <span class="font-medium text-slate-800">{{ $b['label'] }}</span>
                                                @if ($b['sub'])
                                                    <span class="block text-[11px] text-slate-400">{{ $b['sub'] }}</span>
                                                @endif
                                                @if ($b['days_late'] > 0 || $b['days_absent'] > 0)
                                                    <span class="mt-0.5 block text-[11px]">
                                                        @if ($b['days_late'] > 0)<span class="text-amber-700">{{ trans_choice('{1} :count late day|[2,*] :count late days', $b['days_late'], ['count' => $b['days_late']]) }}</span>@endif
                                                        @if ($b['days_late'] > 0 && $b['days_absent'] > 0)<span class="text-slate-300">·</span>@endif
                                                        @if ($b['days_absent'] > 0)<span class="text-rose-600">{{ trans_choice('{1} :count absent day|[2,*] :count absent days', $b['days_absent'], ['count' => $b['days_absent']]) }}</span>@endif
                                                    </span>
                                                @endif
                                            </td>
                                            <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-right tabular-nums text-slate-500">{{ $hrs($b['expected']) }}h</td>
                                            <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-right tabular-nums font-semibold text-slate-800">{{ $hrs($b['worked']) }}h</td>
                                            <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-right tabular-nums {{ $b['leave'] > 0 ? 'text-indigo-700' : 'text-slate-300' }}">{{ $b['leave'] > 0 ? $hrs($b['leave']).'h' : '—' }}</td>
                                            <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-right tabular-nums {{ $b['overtime'] > 0 ? 'font-semibold text-emerald-700' : 'text-slate-300' }}">{{ $b['overtime'] > 0 ? $hrs($b['overtime']).'h' : '—' }}</td>
                                            <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-right tabular-nums">
                                                @if ($b['gap'] > 0)
                                                    <span class="font-semibold text-rose-600">−{{ $hrs($b['gap']) }}h</span>
                                                @elseif ($b['surplus'] > 0)
                                                    <span class="font-semibold text-emerald-700">+{{ $hrs($b['surplus']) }}h</span>
                                                @else
                                                    <span class="text-slate-300">—</span>
                                                @endif
                                            </td>
                                            <td class="px-3 lg:px-4 py-3">
                                                <div class="flex items-center gap-2">
                                                    <div class="h-1.5 flex-1 overflow-hidden rounded-full bg-slate-100">
                                                        <div class="h-full rounded-full {{ $bar }}" style="width: {{ min(100, (int) $b['pct']) }}%"></div>
                                                    </div>
                                                    <span class="w-10 shrink-0 text-right text-xs font-semibold tabular-nums {{ $text }}">{{ $b['pct'] }}%</span>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                </div>

                {{-- Per person, only when there is more than one of them ---- --}}
                @if (count($hours['people']) > 1)
                    <div class="rounded-2xl bg-white ring-1 ring-slate-200/70 shadow-sm">
                        <div class="border-b border-slate-100 px-5 py-4">
                            <h2 class="text-base font-semibold text-slate-900">{{ __('By employee') }}</h2>
                            <p class="text-xs text-slate-500">{{ __('The same range, one row per person.') }}</p>
                        </div>
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-slate-100 text-sm">
                                <thead>
                                    <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                                        <th class="px-3 lg:px-4 py-3.5">{{ __('Employee') }}</th>
                                        <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Days') }}</th>
                                        <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Expected') }}</th>
                                        <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Clocked') }}</th>
                                        <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Leave') }}</th>
                                        <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Gap') }}</th>
                                        <th class="px-3 lg:px-4 py-3.5 w-48">{{ __('Attainment') }}</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-slate-50">
                                    @foreach ($hours['people'] as $p)
                                        @php [$bar, $text, $chip] = $tone((int) $p['pct']); @endphp
                                        <tr wire:key="hp-{{ $p['user_id'] }}" class="transition hover:bg-slate-50/70">
                                            <td class="px-3 lg:px-4 py-3">
                                                <button type="button" wire:click="$set('h_user_id', {{ $p['user_id'] }})" class="font-medium text-slate-800 transition hover:text-indigo-600">{{ $p['name'] }}</button>
                                                @if ($p['days_absent'] > 0)
                                                    <span class="ml-1.5 text-[11px] font-medium text-rose-600">{{ trans_choice('{1} :count absent|[2,*] :count absent', $p['days_absent'], ['count' => $p['days_absent']]) }}</span>
                                                @endif
                                            </td>
                                            <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-right tabular-nums text-slate-600">{{ $p['days_present'] }} / {{ $p['days_expected'] }}</td>
                                            <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-right tabular-nums text-slate-500">{{ $hrs($p['expected']) }}h</td>
                                            <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-right tabular-nums font-semibold text-slate-800">{{ $hrs($p['worked']) }}h</td>
                                            <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-right tabular-nums {{ $p['leave'] > 0 ? 'text-indigo-700' : 'text-slate-300' }}">{{ $p['leave'] > 0 ? $hrs($p['leave']).'h' : '—' }}</td>
                                            <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-right tabular-nums">
                                                @if ($p['gap'] > 0)
                                                    <span class="font-semibold text-rose-600">−{{ $hrs($p['gap']) }}h</span>
                                                @elseif ($p['surplus'] > 0)
                                                    <span class="font-semibold text-emerald-700">+{{ $hrs($p['surplus']) }}h</span>
                                                @else
                                                    <span class="text-slate-300">—</span>
                                                @endif
                                            </td>
                                            <td class="px-3 lg:px-4 py-3">
                                                <div class="flex items-center gap-2">
                                                    <div class="h-1.5 flex-1 overflow-hidden rounded-full bg-slate-100">
                                                        <div class="h-full rounded-full {{ $bar }}" style="width: {{ min(100, (int) $p['pct']) }}%"></div>
                                                    </div>
                                                    <span class="w-10 shrink-0 text-right text-xs font-semibold tabular-nums {{ $text }}">{{ $p['pct'] }}%</span>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                @endif
            </div>

        {{-- TODAY: THE ROSTER --}}
        @elseif ($tab === 'today')
            @php
                $statusMeta = [
                    'in' => ['label' => __('On the clock'), 'color' => 'emerald'],
                    'out' => ['label' => __('Clocked out'), 'color' => 'sky'],
                    'absent' => ['label' => __('Not clocked in'), 'color' => 'rose'],
                    'leave' => ['label' => __('On leave'), 'color' => 'amber'],
                    'off' => ['label' => __('Non-working day'), 'color' => 'slate'],
                ];
            @endphp
            <div class="rounded-2xl bg-white ring-1 ring-slate-200/70 shadow-sm" @if ($rosterIsToday) wire:poll.60s @endif>
                <div class="flex flex-wrap items-center justify-between gap-3 border-b border-slate-100 px-5 py-4">
                    <div>
                        <h2 class="text-base font-semibold text-slate-900">
                            {{ $rosterIsToday ? __('Who is in today') : __('Roster for :date', ['date' => $rosterDay->format('D d M Y')]) }}
                        </h2>
                        <p class="text-xs text-slate-500">
                            {{ $rosterDay->format('l d M Y') }}
                            @if ($rosterIsWorkingDay)
                                · {{ __('day starts :time', ['time' => $expectedIn]) }}
                            @else
                                · {{ __('non-working day') }}
                            @endif
                        </p>
                    </div>
                    <div class="flex flex-wrap items-center gap-2">
                        <div class="inline-flex overflow-hidden rounded-lg ring-1 ring-slate-200">
                            <button type="button" wire:click="shiftRosterDay(-1)" class="bg-white px-2.5 py-1.5 text-slate-500 transition hover:bg-slate-50" title="{{ __('Previous day') }}">
                                <x-icon name="chevron-left" class="h-4 w-4" />
                            </button>
                            <button type="button" wire:click="shiftRosterDay(0)" class="border-x border-slate-200 bg-white px-3 py-1.5 text-xs font-medium text-slate-600 transition hover:bg-slate-50">{{ __('Today') }}</button>
                            <button type="button" wire:click="shiftRosterDay(1)" class="bg-white px-2.5 py-1.5 text-slate-500 transition hover:bg-slate-50" title="{{ __('Next day') }}">
                                <x-icon name="chevron-right" class="h-4 w-4" />
                            </button>
                        </div>
                        <input type="date" wire:model.live="rosterDate" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-accent-500 focus:ring-accent-500" />
                        <x-button variant="secondary" wire:click="exportRoster">
                            <x-icon name="arrow-down-tray" class="h-4 w-4" /> {{ __('Export') }}
                        </x-button>
                        @if ($canCorrect)
                            <x-button variant="secondary" wire:click="openCorrection({{ (int) auth()->id() }}, '{{ $rosterDay->format('Y-m-d') }}')">
                                <x-icon name="pencil-square" class="h-4 w-4" /> {{ __('Manual entry') }}
                            </x-button>
                        @endif
                    </div>
                </div>

                {{-- Status counts --}}
                <div class="flex flex-wrap gap-2 border-b border-slate-100 px-5 py-3 text-xs">
                    @foreach (['in', 'out', 'absent', 'leave'] as $key)
                        <span class="inline-flex items-center gap-1.5 rounded-full bg-slate-50 px-3 py-1 ring-1 ring-slate-200">
                            <span @class([
                                'h-2 w-2 rounded-full',
                                'bg-emerald-500' => $key === 'in',
                                'bg-sky-500' => $key === 'out',
                                'bg-rose-500' => $key === 'absent',
                                'bg-amber-500' => $key === 'leave',
                            ])></span>
                            <span class="text-slate-500">{{ $statusMeta[$key]['label'] }}</span>
                            <span class="font-semibold text-slate-800">{{ $rosterTotals[$key] }}</span>
                        </span>
                    @endforeach
                    @if ($rosterTotals['late'] > 0)
                        <span class="inline-flex items-center gap-1.5 rounded-full bg-brand-yellow-50 px-3 py-1 text-brand-yellow-800 ring-1 ring-brand-yellow-200">
                            <x-icon name="clock" class="h-3.5 w-3.5" />
                            {{ trans_choice('{1} :count arrived late|[2,*] :count arrived late', $rosterTotals['late'], ['count' => $rosterTotals['late']]) }}
                        </span>
                    @endif
                    <span class="ml-auto inline-flex items-center gap-1.5 text-slate-500">
                        {{ __('Team hours logged') }}
                        <span class="font-semibold text-slate-800">{{ round($rosterTotals['worked_minutes'] / 60, 1) }}h</span>
                    </span>
                </div>

                @if (! $roster)
                    <div class="p-5"><x-empty-state icon="users" :title="__('No active staff')" :message="__('Add staff under Payroll → Staff.')" /></div>
                @else
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-slate-100 text-sm">
                            <thead>
                                <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                                    <th class="px-3 lg:px-4 py-3.5">{{ __('Employee') }}</th>
                                    <th class="px-3 lg:px-4 py-3.5">{{ __('Status') }}</th>
                                    <th class="px-3 lg:px-4 py-3.5">{{ __('In') }}</th>
                                    <th class="px-3 lg:px-4 py-3.5">{{ __('Out') }}</th>
                                    <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Hours') }}</th>
                                    <th class="px-3 lg:px-4 py-3.5">{{ __('Note') }}</th>
                                    <th class="px-3 lg:px-4 py-3.5"></th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-50">
                                @foreach ($roster as $row)
                                    <tr wire:key="roster-{{ $row['user_id'] }}" class="transition hover:bg-slate-50/70 {{ $row['status'] === 'absent' ? 'bg-brand-red-50/40' : '' }}">
                                        <td class="px-3 lg:px-4 py-3 font-medium text-slate-800">{{ $row['name'] }}</td>
                                        <td class="whitespace-nowrap px-3 lg:px-4 py-3">
                                            <x-badge :color="$statusMeta[$row['status']]['color']">{{ $statusMeta[$row['status']]['label'] }}</x-badge>
                                        </td>
                                        <td class="whitespace-nowrap px-3 lg:px-4 py-3 tabular-nums {{ $row['late_minutes'] > 0 ? 'font-semibold text-brand-yellow-700' : 'text-slate-600' }}">
                                            {{ $row['clock_in'] ?? '—' }}
                                        </td>
                                        <td class="whitespace-nowrap px-3 lg:px-4 py-3 tabular-nums text-slate-600">
                                            {{ $row['clock_out'] ?? ($row['status'] === 'in' ? __('still in') : '—') }}
                                        </td>
                                        <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-right tabular-nums text-slate-700">
                                            {{ $row['worked_minutes'] > 0 ? round($row['worked_minutes'] / 60, 1).'h' : '—' }}
                                        </td>
                                        <td class="px-3 lg:px-4 py-3 text-xs text-slate-500">
                                            @if ($row['day_status'] === 'late')
                                                <span class="font-medium text-brand-yellow-700">{{ __('recorded late') }}</span>
                                            @elseif ($row['day_status'] === 'absent')
                                                <span class="font-medium text-rose-600">{{ __('recorded absent') }}</span>
                                            @endif
                                            @if ($row['corrected'])
                                                <span class="ml-1 text-emerald-700">{{ __('corrected to present') }}</span>
                                            @elseif ($row['marked_absent'] && $row['clock_in'])
                                                <span class="ml-1 text-slate-400">{{ __('arrived after cut-off') }}</span>
                                            @endif
                                            @if ($row['late_minutes'] > 0)
                                                <span class="ml-1 text-brand-yellow-700">{{ __(':n min late', ['n' => $row['late_minutes']]) }}</span>
                                            @endif
                                            @if ($row['partial_leave'])
                                                <span class="text-indigo-600">{{ __(':length approved', ['length' => $row['partial_leave']]) }}</span>
                                                @if ($row['due_in'])
                                                    <span class="text-slate-400">· {{ __('due in :time', ['time' => $row['due_in']]) }}</span>
                                                @endif
                                            @elseif ($row['leave_type'])
                                                <span class="text-amber-700">{{ $row['leave_type'] }}</span>
                                            @endif
                                            @if ($row['remote'] ?? false)
                                                <span class="ml-1 align-middle"><x-badge color="violet">{{ __('Remote') }}</x-badge></span>
                                            @elseif ($row['off_network'])
                                                <span class="ml-1 inline-flex items-center gap-1 text-rose-600">
                                                    <x-icon name="exclamation-triangle" class="h-3.5 w-3.5" />
                                                    {{ $row['off_site'] && $row['distance_label']
                                                        ? __(':d away', ['d' => $row['distance_label']])
                                                        : __('off-site') }}
                                                </span>
                                            @elseif ($row['distance_label'])
                                                <span class="ml-1 text-slate-400" title="{{ __('Distance from the shop at clock-in') }}">{{ $row['distance_label'] }}</span>
                                            @endif
                                            @if ($row['source'] === 'manual')
                                                <span class="ml-1 text-sky-700">{{ __('manual entry') }}</span>
                                            @endif
                                        </td>
                                        <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-right">
                                            @if ($canCorrect)
                                                <button wire:click="openCorrection({{ $row['user_id'] }}, '{{ $rosterDay->format('Y-m-d') }}')" class="text-xs font-medium text-slate-500 hover:text-accent-700">
                                                    {{ $row['record_id'] ? __('Edit') : __('Record') }}
                                                </button>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>

        {{-- ATTENDANCE HISTORY --}}

        {{-- THE TEAM'S CLOCK RECORDS --}}
        @elseif ($tab === 'records')
            <div class="rounded-2xl bg-white ring-1 ring-slate-200/70 shadow-sm">
                <div class="flex flex-wrap items-center justify-between gap-3 border-b border-slate-100 px-5 py-4">
                    <div>
                        <h2 class="text-base font-semibold text-slate-900">{{ __('Attendance') }}</h2>
                        <p class="text-xs text-slate-500">{{ __('Every clock record for the team.') }}</p>
                    </div>
                    <div class="flex flex-wrap items-center gap-2">
                        {{-- Ledger vs timesheet grid. Same segmented control as
                             every other in-card filter strip in the app. --}}
                        @php $historyViews = ['list' => ['label' => __('Records'), 'icon' => 'queue-list'], 'month' => ['label' => __('Month grid'), 'icon' => 'table-cells']]; @endphp
                        <div class="flex items-center gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1 text-xs font-medium">
                            @foreach ($historyViews as $key => $meta)
                                <button type="button" wire:click="setHistoryView('{{ $key }}')"
                                    class="flex items-center gap-1.5 rounded-lg px-3 py-1.5 transition {{ $f_view === $key ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700' }}">
                                    <x-icon :name="$meta['icon']" class="h-4 w-4" />
                                    {{ $meta['label'] }}
                                </button>
                            @endforeach
                        </div>
                        <x-button variant="secondary" wire:click="exportHistory">
                            <x-icon name="arrow-down-tray" class="h-4 w-4" /> {{ __('Export CSV') }}
                        </x-button>
                        @if ($canCorrect)
                            <x-button variant="secondary" wire:click="openCorrection">
                                <x-icon name="plus" class="h-4 w-4" /> {{ __('Add a day') }}
                            </x-button>
                        @endif
                    </div>
                </div>

                {{-- Filters. The grid is a whole month at a time, so the date
                     range and capture-method filters only belong on the ledger. --}}
                <div class="grid gap-3 border-b border-slate-100 bg-slate-50/60 px-5 py-4 sm:grid-cols-2 lg:grid-cols-5">
                    <div>
                        <x-label for="f_user_id" :value="__('Employee')" />
                        <select id="f_user_id" wire:model.live="f_user_id" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-accent-500 focus:ring-accent-500">
                            <option value="">{{ __('Everyone') }}</option>
                            @foreach ($members as $m)<option value="{{ $m->id }}">{{ $m->name }}</option>@endforeach
                        </select>
                    </div>

                    @if ($f_view === 'month')
                        <div class="sm:col-span-2">
                            <x-label :value="__('Month')" />
                            <div class="mt-1 flex items-center gap-2">
                                <x-secondary-button type="button" wire:click="shiftGridMonth(-1)" class="!px-2.5">
                                    <x-icon name="chevron-left" class="h-4 w-4" />
                                </x-secondary-button>
                                <span class="flex-1 rounded-xl border border-slate-300 bg-white px-3 py-2 text-center text-sm font-semibold text-slate-800">
                                    {{ $grid['month']->format('F Y') }}
                                </span>
                                <x-secondary-button type="button" wire:click="shiftGridMonth(1)" class="!px-2.5">
                                    <x-icon name="chevron-right" class="h-4 w-4" />
                                </x-secondary-button>
                                <x-secondary-button type="button" wire:click="shiftGridMonth(0)">{{ __('This month') }}</x-secondary-button>
                            </div>
                        </div>
                    @else
                    <div>
                        <x-label for="f_from" :value="__('From')" />
                        <x-input id="f_from" type="date" class="mt-1 block w-full" wire:model.live="f_from" />
                    </div>
                    <div>
                        <x-label for="f_to" :value="__('To')" />
                        <x-input id="f_to" type="date" class="mt-1 block w-full" wire:model.live="f_to" />
                    </div>
                    <div>
                        <x-label for="f_status" :value="__('Show')" />
                        <select id="f_status" wire:model.live="f_status" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-accent-500 focus:ring-accent-500">
                            <option value="all">{{ __('All records') }}</option>
                            <option value="open">{{ __('Still clocked in') }}</option>
                            <option value="closed">{{ __('Completed days') }}</option>
                            <option value="off_network">{{ __('Off-site / overridden clock-ins') }}</option>
                            <option value="manual">{{ __('Manual entries') }}</option>
                            <option value="remote">{{ __('Remote days') }}</option>
                            <option value="late">{{ __('Late days') }}</option>
                            <option value="absent">{{ __('Absent days') }}</option>
                        </select>
                    </div>
                    <div class="flex items-end">
                        <x-button variant="secondary" wire:click="clearFilters" class="w-full justify-center">{{ __('Reset') }}</x-button>
                    </div>
                    @endif
                </div>

                @php
                    // One vocabulary for both halves of this tab: the grid cells
                    // and the ledger badges must never disagree about what a
                    // colour means.
                    $cellTone = [
                        'present' => ['bg-emerald-50 text-emerald-700 ring-emerald-200', __('Present')],
                        'late' => ['bg-amber-50 text-amber-700 ring-amber-200', __('Late')],
                        'absent' => ['bg-rose-50 text-rose-700 ring-rose-200', __('Absent')],
                        'leave' => ['bg-indigo-50 text-indigo-700 ring-indigo-200', __('On leave')],
                        'off' => ['bg-slate-50 text-slate-300 ring-slate-100', __('Non-working day')],
                        'none' => ['bg-white text-slate-300 ring-slate-200', __('No record')],
                        'future' => ['bg-white text-slate-200 ring-slate-100', __('Still to come')],
                    ];
                @endphp

                @if ($f_view === 'month')
                    {{-- Legend, so a wall of coloured cells is readable --}}
                    <div class="flex flex-wrap items-center gap-x-4 gap-y-1 border-b border-slate-100 px-5 py-3 text-xs text-slate-500">
                        @foreach (['present', 'late', 'absent', 'leave', 'off'] as $key)
                            <span class="inline-flex items-center gap-1.5">
                                <span class="h-3.5 w-3.5 rounded ring-1 {{ $cellTone[$key][0] }}"></span>{{ $cellTone[$key][1] }}
                            </span>
                        @endforeach
                        <span class="inline-flex items-center gap-1.5"><span class="h-3.5 w-3.5 rounded border-b-2 border-violet-500 bg-white ring-1 ring-slate-200"></span>{{ __('Remote day') }}</span>
                        @if ($canCorrect)
                            <span class="text-slate-400">{{ __('Click any day to edit it.') }}</span>
                        @endif
                    </div>

                    @if (empty($grid['rows']))
                        <div class="p-5"><x-empty-state icon="users" :title="__('Nobody on the roster')" :message="__('Add active employees under Payroll → Staff to see their month here.')" class="border-0 bg-transparent py-0" /></div>
                    @else
                        <div class="overflow-x-auto">
                            <table class="min-w-full text-sm">
                                <thead>
                                    <tr class="bg-slate-50/80 text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                                        <th class="sticky left-0 z-10 bg-slate-50 px-3 lg:px-4 py-3.5 text-left">{{ __('Employee') }}</th>
                                        @foreach ($grid['days'] as $day)
                                            <th class="w-8 px-0 py-2 text-center font-semibold {{ $day['working'] ? 'text-slate-500' : 'text-slate-300' }}">
                                                <span class="block text-[9px] leading-tight">{{ $day['dow'] }}</span>
                                                <span class="block leading-tight">{{ $day['day'] }}</span>
                                            </th>
                                        @endforeach
                                        <th class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-right">{{ __('Days') }}</th>
                                        <th class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-right">{{ __('Hours') }}</th>
                                        <th class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-right">{{ __('OT') }}</th>
                                        <th class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-right">{{ __('Late') }}</th>
                                        <th class="whitespace-nowrap px-3 lg:px-4 py-3.5 text-right">{{ __('Absent') }}</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-slate-100 bg-white">
                                    @foreach ($grid['rows'] as $row)
                                        <tr wire:key="grid-{{ $row['user_id'] }}" class="transition hover:bg-slate-50/70">
                                            <td class="sticky left-0 z-10 whitespace-nowrap bg-white px-3 lg:px-4 py-2 font-medium text-slate-800">{{ $row['name'] }}@if (($row['work_mode'] ?? 'office') !== 'office') <span class="ms-1 align-middle"><x-badge color="violet">{{ $row['work_mode'] === 'remote' ? __('Remote') : __('Hybrid') }}</x-badge></span>@endif</td>
                                            @foreach ($row['cells'] as $cell)
                                                @php $tone = $cellTone[$cell['status']] ?? $cellTone['none']; @endphp
                                                <td class="px-0.5 py-1 text-center">
                                                    <button type="button"
                                                        @if ($canCorrect) wire:click="openCorrection({{ $row['user_id'] }}, '{{ $cell['date'] }}')" @else disabled @endif
                                                        title="{{ $tone[1] }}{{ $cell['hours'] ? ' · '.$cell['hours'].'h' : '' }}{{ $cell['leave_type'] ? ' · '.$cell['leave_type'] : '' }}{{ ($cell['remote'] ?? false) ? ' · '.__('Remote') : '' }}"
                                                        class="mx-auto flex h-7 w-7 items-center justify-center rounded text-[10px] font-semibold tabular-nums ring-1 transition {{ $tone[0] }} {{ $cell['today'] ? 'outline outline-2 outline-offset-1 outline-indigo-400' : '' }} {{ ($cell['remote'] ?? false) ? 'border-b-2 border-violet-500' : '' }} {{ $canCorrect ? 'hover:brightness-95' : 'cursor-default' }}">
                                                        {{ $cell['hours'] ?? '' }}
                                                    </button>
                                                </td>
                                            @endforeach
                                            <td class="whitespace-nowrap px-3 lg:px-4 py-2 text-right tabular-nums font-semibold text-slate-800">{{ $row['days_worked'] }}</td>
                                            <td class="whitespace-nowrap px-3 lg:px-4 py-2 text-right tabular-nums text-slate-700">{{ $row['hours'] }}h</td>
                                            <td class="whitespace-nowrap px-3 lg:px-4 py-2 text-right tabular-nums {{ $row['overtime'] > 0 ? 'font-semibold text-emerald-700' : 'text-slate-400' }}">{{ $row['overtime'] }}h</td>
                                            <td class="whitespace-nowrap px-3 lg:px-4 py-2 text-right tabular-nums {{ $row['late'] > 0 ? 'font-semibold text-amber-700' : 'text-slate-400' }}">{{ $row['late'] }}</td>
                                            <td class="whitespace-nowrap px-3 lg:px-4 py-2 text-right tabular-nums {{ $row['absent'] > 0 ? 'font-semibold text-rose-700' : 'text-slate-400' }}">{{ $row['absent'] }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif

                @else
                {{-- Filtered totals --}}
                <div class="flex flex-wrap gap-x-6 gap-y-1 border-b border-slate-100 px-5 py-3 text-xs text-slate-500">
                    <span>{{ __('Days') }} <span class="font-semibold text-slate-800">{{ $historyTotals['days'] }}</span></span>
                    <span>{{ __('People') }} <span class="font-semibold text-slate-800">{{ $historyTotals['people'] }}</span></span>
                    <span>{{ __('Hours worked') }} <span class="font-semibold text-slate-800">{{ $historyTotals['workedHours'] }}h</span></span>
                    <span>{{ __('Overtime') }} <span class="font-semibold text-emerald-700">{{ $historyTotals['overtimeHours'] }}h</span></span>
                </div>

                @if ($records->isEmpty())
                    <div class="p-5"><x-empty-state icon="clock" :title="__('No attendance records')" :message="__('Nothing matches these filters.')" /></div>
                @else
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-slate-100 text-sm">
                            <thead>
                                <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                                    <th class="px-3 lg:px-4 py-3.5">{{ __('Employee') }}</th>
                                    <th class="px-3 lg:px-4 py-3.5">{{ __('Date') }}</th>
                                    <th class="px-3 lg:px-4 py-3.5">{{ __('In') }}</th>
                                    <th class="px-3 lg:px-4 py-3.5">{{ __('Out') }}</th>
                                    <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Worked') }}</th>
                                    <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('OT') }}</th>
                                    <th class="px-3 lg:px-4 py-3.5">{{ __('Ruling') }}</th>
                                    <th class="px-3 lg:px-4 py-3.5">{{ __('Source') }}</th>
                                    <th class="px-3 lg:px-4 py-3.5"></th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-50">
                                @foreach ($records as $r)
                                    <tr wire:key="att-{{ $r->id }}" class="transition hover:bg-slate-50/70">
                                        <td class="px-3 lg:px-4 py-3 font-medium text-slate-800">{{ $r->user?->name }}</td>
                                        <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-slate-600">{{ $r->business_date->format('D d M Y') }}</td>
                                        <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-slate-600">{{ $r->clock_in_at?->timezone($tz)?->format('H:i') ?? '—' }}</td>
                                        <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-slate-600">
                                            {{ $r->clock_out_at?->timezone($tz)?->format('H:i') ?? '—' }}
                                            @if ($r->status === 'open')<x-badge color="emerald" class="ml-1">{{ __('open') }}</x-badge>@endif
                                        </td>
                                        <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-right tabular-nums text-slate-700">{{ $r->worked_hours }}h</td>
                                        <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-right tabular-nums {{ $r->overtime_minutes > 0 ? 'text-emerald-700 font-semibold' : 'text-slate-400' }}">{{ $r->overtime_hours }}h</td>
                                        <td class="whitespace-nowrap px-3 lg:px-4 py-3">
                                            @php $rulingColor = ['present' => 'emerald', 'late' => 'amber', 'absent' => 'rose'][$r->day_status] ?? 'slate'; @endphp
                                            <x-badge :color="$rulingColor">{{ ucfirst($r->day_status) }}</x-badge>
                                            @if ($r->day_status_corrected_at)
                                                <x-icon name="check-circle" class="ml-1 inline h-4 w-4 text-emerald-500" title="{{ __('Corrected on appeal') }}" />
                                            @endif
                                        </td>
                                        <td class="whitespace-nowrap px-3 lg:px-4 py-3">
                                            <x-badge :color="$r->source === 'override' ? 'amber' : ($r->source === 'manual' ? 'sky' : 'slate')">{{ $r->source }}</x-badge>
                                            @if ($r->is_remote)
                                                <x-badge color="violet">{{ __('Remote') }}</x-badge>
                                            @endif
                                            @unless ($r->gatePassed())
                                                <x-icon name="exclamation-triangle" class="ml-1 inline h-4 w-4 text-amber-500"
                                                    title="{{ $r->location_allowed === false && $r->clockInDistanceLabel()
                                                        ? __('Clocked in :d from the shop', ['d' => $r->clockInDistanceLabel()])
                                                        : __('Did not pass the office gate on its own') }}" />
                                            @endunless
                                            @if ($r->gatePassed() && $r->clockInDistanceLabel())
                                                <span class="ml-1 text-[11px] text-slate-400">{{ $r->clockInDistanceLabel() }}</span>
                                            @endif
                                        </td>
                                        <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-right text-xs font-medium">
                                            @if ($canCorrect)
                                                <div class="flex items-center justify-end gap-3">
                                                    <button wire:click="editRecord({{ $r->id }})" class="text-indigo-600 transition hover:text-indigo-800">{{ __('Edit') }}</button>
                                                    <button wire:click="deleteRecord({{ $r->id }})" wire:confirm="{{ __('Remove this attendance day entirely?') }}" class="text-rose-600 transition hover:text-rose-800">{{ __('Delete') }}</button>
                                                </div>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="px-5 py-3">{{ $records->links() }}</div>
                @endif
                @endif
            </div>

        {{-- LEAVE --}}

        {{-- ATTENDANCE APPEALS --}}
        @elseif ($tab === 'appeals')
            @php
                $ruling = ['present' => 'emerald', 'late' => 'amber', 'absent' => 'rose'];
            @endphp
            <div class="space-y-6">
                <div class="rounded-2xl bg-white ring-1 ring-slate-200/70 shadow-sm">
                    <div class="border-b border-slate-100 px-5 py-4">
                        <h2 class="text-base font-semibold text-slate-900">{{ __('Pending appeals') }}</h2>
                        <p class="text-xs text-slate-400">{{ __('Staff asking for a late or absent day to be recorded as present.') }}</p>
                    </div>
                    @if ($pendingAppeals->isEmpty())
                        <div class="p-5"><x-empty-state icon="check-circle" :title="__('Nothing to review')" :message="__('No attendance appeals are waiting on a decision.')" class="border-0 bg-transparent py-0" /></div>
                    @else
                        <ul class="divide-y divide-slate-50">
                            @foreach ($pendingAppeals as $appeal)
                                <li wire:key="appeal-{{ $appeal->id }}" class="flex flex-wrap items-start justify-between gap-3 px-5 py-4">
                                    <div class="min-w-0 flex-1">
                                        <p class="flex flex-wrap items-center gap-2 font-medium text-slate-800">
                                            {{ $appeal->user?->name }}
                                            <span class="text-slate-400">·</span>
                                            {{ $appeal->business_date->format('D d M Y') }}
                                            <x-badge :color="$ruling[$appeal->from_status] ?? 'slate'">{{ ucfirst($appeal->from_status) }}</x-badge>
                                        </p>
                                        <p class="mt-1 text-sm text-slate-500">
                                            @if ($appeal->record?->clock_in_at)
                                                {{ __('Clocked in :time.', ['time' => $appeal->record->clock_in_at->timezone($tz)->format('H:i')]) }}
                                            @else
                                                {{ __('No clock-in recorded.') }}
                                            @endif
                                            <span class="text-slate-400">— {{ $appeal->reason }}</span>
                                        </p>
                                    </div>
                                    @if ($canCorrect)
                                        <div class="flex shrink-0 items-center gap-2">
                                            <x-button variant="primary" wire:click="approveAppeal({{ $appeal->id }})">{{ __('Approve') }}</x-button>
                                            <x-button variant="secondary" wire:click="openRejectAppeal({{ $appeal->id }})">{{ __('Reject') }}</x-button>
                                        </div>
                                    @endif
                                </li>
                            @endforeach
                        </ul>
                    @endif
                </div>

                <div class="rounded-2xl bg-white ring-1 ring-slate-200/70 shadow-sm">
                    <div class="border-b border-slate-100 px-5 py-4"><h2 class="text-base font-semibold text-slate-900">{{ __('Recently decided') }}</h2></div>
                    @if ($decidedAppeals->isEmpty())
                        <div class="p-5 text-sm text-slate-500">{{ __('No decisions yet.') }}</div>
                    @else
                        <ul class="divide-y divide-slate-50 text-sm">
                            @foreach ($decidedAppeals as $appeal)
                                <li wire:key="decided-{{ $appeal->id }}" class="flex flex-wrap items-center justify-between gap-3 px-5 py-3">
                                    <span class="text-slate-700">
                                        {{ $appeal->user?->name }} · {{ $appeal->business_date->format('d M Y') }}
                                        <span class="text-slate-400">{{ __('by :who', ['who' => $appeal->decider?->name ?? __('a director')]) }}</span>
                                        @if ($appeal->decision_note)<span class="text-slate-400">— {{ $appeal->decision_note }}</span>@endif
                                    </span>
                                    <x-badge :color="$appeal->status === 'approved' ? 'emerald' : 'rose'">{{ ucfirst($appeal->status) }}</x-badge>
                                </li>
                            @endforeach
                        </ul>
                    @endif
                </div>
            </div>

        {{-- OVERTIME / LEAVE CASH --}}

        {{-- OFF-SITE CLOCK-IN --}}
        @elseif ($tab === 'offsite')
            {{-- The queue: people who tried to clock in away from the shop and
                 applied. Approving one also clocks them in, backdated. --}}
            @if ($offsiteRequests->isNotEmpty())
                <div class="mb-4 overflow-hidden rounded-2xl bg-white ring-1 ring-amber-200 shadow-sm">
                    <div class="flex items-center gap-2 border-b border-amber-100 bg-amber-50/70 px-5 py-4">
                        <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-amber-100 text-amber-600">
                            <x-icon name="map-pin" class="h-4 w-4" />
                        </span>
                        <div>
                            <h2 class="text-base font-semibold text-slate-900">
                                {{ __('Waiting to be let on the clock') }}
                                <x-badge color="amber">{{ $offsiteRequests->count() }}</x-badge>
                            </h2>
                        </div>
                    </div>

                    <div class="divide-y divide-slate-100">
                        @foreach ($offsiteRequests as $req)
                            <div wire:key="offsite-{{ $req->id }}" class="flex flex-col gap-3 px-5 py-4 sm:flex-row sm:items-start sm:justify-between">
                                <div class="min-w-0">
                                    <p class="text-sm font-semibold text-slate-800">
                                        {{ $req->user?->name }}
                                        <span class="ml-1 font-normal text-slate-400">
                                            {{ __('asked at :time', ['time' => $req->requested_at?->timezone($tz)?->format('H:i')]) }}
                                            @if ($req->requestedDistanceLabel())
                                                · {{ __(':d from the shop', ['d' => $req->requestedDistanceLabel()]) }}
                                            @endif
                                        </span>
                                    </p>
                                    <p class="mt-1 text-sm text-slate-600">{{ $req->reason }}</p>
                                    <p class="mt-0.5 text-[11px] text-slate-400">
                                        {{ __('For :date', ['date' => $req->effective_date->format('D d M Y')]) }}
                                        @if ($req->requested_ip) · <span class="font-mono">{{ $req->requested_ip }}</span> @endif
                                    </p>
                                </div>

                                @if ($canOverride)
                                    <div class="flex shrink-0 items-center gap-2">
                                        <button type="button" wire:click="openRejectOffsite({{ $req->id }})"
                                            class="rounded-lg px-3 py-1.5 text-sm font-medium text-slate-600 transition hover:bg-slate-100 hover:text-rose-600">{{ __('Decline') }}</button>
                                        <x-button variant="primary" wire:click="approveOffsite({{ $req->id }})" wire:loading.attr="disabled" wire:target="approveOffsite({{ $req->id }})">
                                            <x-icon name="check-circle" class="h-4 w-4" /> {{ __('Approve & clock in') }}
                                        </x-button>
                                    </div>
                                @endif
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif

            <div class="rounded-2xl bg-white ring-1 ring-slate-200/70 shadow-sm">
                <div class="flex items-center justify-between gap-3 border-b border-slate-100 px-5 py-4">
                    <div>
                        <h2 class="text-base font-semibold text-slate-900">{{ __('Off-site clock-in overrides') }}</h2>
                        <p class="text-xs text-slate-500">{{ __('One employee, one day, away from the shop.') }}</p>
                    </div>
                    @if ($canOverride)
                        <x-button variant="primary" wire:click="openOverride"><x-icon name="plus" class="h-4 w-4" /> {{ __('Grant override') }}</x-button>
                    @endif
                </div>
                @if ($overrides->isEmpty())
                    <div class="p-5"><x-empty-state icon="shield-check" :title="__('No overrides')" /></div>
                @else
                    <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-slate-100 text-sm">
                        <thead>
                            <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Employee') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Date') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Reason') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Granted by') }}</th>
                                <th class="px-3 lg:px-4 py-3.5">{{ __('Status') }}</th>
                                <th class="px-3 lg:px-4 py-3.5"></th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-50">
                            @foreach ($overrides as $ov)
                                <tr wire:key="ov-{{ $ov->id }}" class="transition hover:bg-slate-50/70">
                                    <td class="px-3 lg:px-4 py-3 font-medium text-slate-800">{{ $ov->user?->name }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-slate-600">{{ $ov->effective_date->format('d M Y') }}</td>
                                    <td class="px-3 lg:px-4 py-3 text-slate-600">
                                        {{ $ov->reason }}
                                        @if ($ov->wasRequested())
                                            <span class="mt-0.5 block text-[11px] text-slate-400">
                                                {{ __('Applied for by :who', ['who' => $ov->user?->name]) }}
                                                @if ($ov->requestedDistanceLabel())
                                                    · {{ __(':d from the shop', ['d' => $ov->requestedDistanceLabel()]) }}
                                                @endif
                                                @if ($ov->auto_clocked_in)
                                                    · {{ __('clocked in automatically') }}
                                                @endif
                                            </span>
                                        @endif
                                        @if ($ov->decision_note)
                                            <span class="mt-0.5 block text-[11px] italic text-slate-400">{{ $ov->decision_note }}</span>
                                        @endif
                                    </td>
                                    <td class="px-3 lg:px-4 py-3 text-slate-500">{{ $ov->grantedBy?->name }}</td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3">
                                        @if ($ov->isRejected())<x-badge color="rose">{{ __('Declined') }}</x-badge>
                                        @elseif ($ov->revoked_at)<x-badge color="slate">{{ __('Revoked') }}</x-badge>
                                        @else<x-badge color="emerald">{{ __('Active') }}</x-badge>@endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 lg:px-4 py-3 text-right">
                                        @if ($canOverride && ! $ov->revoked_at && ! $ov->isRejected())
                                            <button wire:click="revokeOverride({{ $ov->id }})" class="text-xs font-medium text-slate-500 hover:text-rose-600">{{ __('Revoke') }}</button>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    </div>
                @endif
            </div>
        @endif
    </div>

    </div>

    @if ($tab === 'me')
        {{-- Apply-leave modal ----------------------------------------------- --}}
        <x-dialog-modal wire:model.live="showLeaveModal" maxWidth="lg">
            <x-slot name="title">{{ $leave_mode === 'partial' ? __('Apply for time off') : __('Apply for leave') }}</x-slot>
            <x-slot name="content">
                <div class="space-y-4">
                    {{-- Whole days, or a few hours of one day. Same form, and the
                         same approval queue; only the shape of the ask differs. --}}
                    <div class="flex items-center gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1 text-xs font-medium">
                        @foreach (['days' => __('Whole days'), 'partial' => __('A few hours')] as $key => $label)
                            <button type="button" wire:click="setLeaveMode('{{ $key }}')"
                                class="flex-1 rounded-lg px-3 py-1.5 transition {{ $leave_mode === $key ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700' }}">
                                {{ $label }}
                            </button>
                        @endforeach
                    </div>

                    <div>
                        <x-label for="leave_type_id" :value="__('Leave type')" />
                        <select id="leave_type_id" wire:model="leave_type_id" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-accent-500 focus:ring-accent-500">
                            <option value="">{{ __('Select…') }}</option>
                            @foreach ($leaveTypes as $type)<option value="{{ $type->id }}">{{ $type->name }}</option>@endforeach
                        </select>
                        <x-input-error for="leave_type_id" class="mt-1" />
                    </div>

                    @if ($leave_mode === 'partial')
                        <div class="grid gap-4 sm:grid-cols-3">
                            <div>
                                <x-label for="leave_start" :value="__('Day')" />
                                <x-input id="leave_start" type="date" class="mt-1 block w-full" wire:model="leave_start" />
                                <x-input-error for="leave_start" class="mt-1" />
                            </div>
                            <div>
                                <x-label for="leave_hours" :value="__('Hours off')" />
                                <x-input id="leave_hours" type="number" step="0.5" min="0.5" class="mt-1 block w-full" wire:model="leave_hours" />
                                <x-input-error for="leave_hours" class="mt-1" />
                            </div>
                            <div>
                                <x-label for="leave_from_time" :value="__('From (optional)')" />
                                <x-input id="leave_from_time" type="time" class="mt-1 block w-full" wire:model="leave_from_time" />
                                <x-input-error for="leave_from_time" class="mt-1" />
                            </div>
                        </div>

                    @else
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <x-label for="leave_start" :value="__('From')" />
                                <x-input id="leave_start" type="date" class="mt-1 block w-full" wire:model="leave_start" />
                                <x-input-error for="leave_start" class="mt-1" />
                                <label class="mt-2 flex items-center gap-2 text-xs text-slate-600"><x-checkbox wire:model="leave_half_start" /> {{ __('Half day') }}</label>
                            </div>
                            <div>
                                <x-label for="leave_end" :value="__('To')" />
                                <x-input id="leave_end" type="date" class="mt-1 block w-full" wire:model="leave_end" />
                                <x-input-error for="leave_end" class="mt-1" />
                                <label class="mt-2 flex items-center gap-2 text-xs text-slate-600"><x-checkbox wire:model="leave_half_end" /> {{ __('Half day') }}</label>
                            </div>
                        </div>
                    @endif

                    <div>
                        <x-label for="leave_reason" :value="__('Reason (optional)')" />
                        <textarea id="leave_reason" rows="2" wire:model="leave_reason" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-accent-500 focus:ring-accent-500"></textarea>
                    </div>
                </div>
            </x-slot>
            <x-slot name="footer">
                <x-button variant="secondary" wire:click="$set('showLeaveModal', false)">{{ __('Cancel') }}</x-button>
                <x-button variant="primary" class="ml-2" wire:click="applyLeave">{{ __('Submit request') }}</x-button>
            </x-slot>
        </x-dialog-modal>

        {{-- Appeal a late / absent day --------------------------------------- --}}
        <x-dialog-modal wire:model.live="showAppealModal" maxWidth="lg">
            <x-slot name="title">{{ __('Appeal an attendance record') }}</x-slot>
            <x-slot name="content">
                @php $appealRecord = $appeal_record_id ? $recent->firstWhere('id', $appeal_record_id) : null; @endphp
                <div class="space-y-4">
                    @if ($appealRecord)
                        <div class="flex items-center justify-between rounded-xl bg-slate-50 px-4 py-3 ring-1 ring-slate-200">
                            <div class="leading-tight">
                                <p class="text-sm font-semibold text-slate-900">{{ $appealRecord->business_date->format('D d M Y') }}</p>
                                <p class="text-xs text-slate-500">
                                    {{ $appealRecord->clock_in_at
                                        ? __('Clocked in :time', ['time' => $appealRecord->clock_in_at->timezone($tz)->format('H:i')])
                                        : __('No clock-in recorded') }}
                                </p>
                            </div>
                            @php [$badgeColor, $badgeLabel] = $dayBadge[$appealRecord->day_status] ?? $dayBadge['present']; @endphp
                            <x-badge :color="$badgeColor">{{ $badgeLabel }}</x-badge>
                        </div>
                    @endif

                    <div>
                        <x-label for="appeal_reason" :value="__('Why should this be recorded as present?')" />
                        <textarea id="appeal_reason" rows="4" wire:model="appeal_reason"
                            placeholder="{{ __('e.g. I was on a client delivery from 07:30 and could not reach a company device to clock in.') }}"
                            class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm placeholder:text-xs focus:border-accent-500 focus:ring-accent-500"></textarea>
                        <x-input-error for="appeal_reason" class="mt-1" />
                    </div>
                </div>
            </x-slot>
            <x-slot name="footer">
                <x-button variant="secondary" wire:click="$set('showAppealModal', false)">{{ __('Cancel') }}</x-button>
                <x-button variant="primary" class="ml-2" wire:click="submitAppeal" wire:loading.attr="disabled" wire:target="submitAppeal">
                    <span wire:loading.remove wire:target="submitAppeal">{{ __('Send appeal') }}</span>
                    <span wire:loading wire:target="submitAppeal">{{ __('Sending…') }}</span>
                </x-button>
            </x-slot>
        </x-dialog-modal>
    @endif

    {{-- The team-facing dialogs. Drawn only for whoever can act on them, so a
         regular employee never ships the override and correction forms. --}}
    @if ($canManageHr || $canOverride || $canCorrect)

    {{-- Reject attendance appeal --}}
    <x-dialog-modal wire:model.live="showRejectAppealModal" maxWidth="md">
        <x-slot name="title">{{ __('Reject attendance appeal') }}</x-slot>
        <x-slot name="content">
            <x-label for="appeal_note" :value="__('Reason (optional)')" />
            <textarea id="appeal_note" rows="3" wire:model="appeal_note"
                placeholder="{{ __('Shown to the employee with the decision.') }}"
                class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm placeholder:text-xs focus:border-accent-500 focus:ring-accent-500"></textarea>
        </x-slot>
        <x-slot name="footer">
            <x-button variant="secondary" wire:click="$set('showRejectAppealModal', false)">{{ __('Cancel') }}</x-button>
            <x-button variant="primary" class="ml-2" wire:click="rejectAppeal">{{ __('Reject') }}</x-button>
        </x-slot>
    </x-dialog-modal>

    {{-- Declining an off-site request. A reason is required here, unlike an
         appeal: the person is standing somewhere waiting to start work. --}}
    <x-dialog-modal wire:model.live="showRejectOffsiteModal" maxWidth="md">
        <x-slot name="title">{{ __('Decline off-site request') }}</x-slot>
        <x-slot name="content">
            <x-label for="offsite_note" :value="__('Why?')" />
            <textarea id="offsite_note" rows="3" wire:model="offsite_note"
                placeholder="{{ __('e.g. Come in to the shop, the Epson job needs finishing today.') }}"
                class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm placeholder:text-xs focus:border-accent-500 focus:ring-accent-500"></textarea>
            <x-input-error for="offsite_note" class="mt-1" />
        </x-slot>
        <x-slot name="footer">
            <x-button variant="secondary" wire:click="$set('showRejectOffsiteModal', false)">{{ __('Cancel') }}</x-button>
            <x-button variant="primary" class="ml-2" wire:click="rejectOffsite">{{ __('Decline') }}</x-button>
        </x-slot>
    </x-dialog-modal>

    {{-- Override modal --}}
    <x-dialog-modal wire:model.live="showOverrideModal" maxWidth="md">
        <x-slot name="title">{{ __('Grant clock-in override') }}</x-slot>
        <x-slot name="content">
            <div class="space-y-4">
                <div>
                    <x-label for="ov_user_id" :value="__('Employee')" />
                    <select id="ov_user_id" wire:model="ov_user_id" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-accent-500 focus:ring-accent-500">
                        <option value="">{{ __('Select…') }}</option>
                        @foreach ($members as $m)<option value="{{ $m->id }}">{{ $m->name }}</option>@endforeach
                    </select>
                    <x-input-error for="ov_user_id" class="mt-1" />
                </div>
                <div>
                    <x-label for="ov_date" :value="__('Date')" />
                    <x-input id="ov_date" type="date" class="mt-1 block w-full" wire:model="ov_date" />
                    <x-input-error for="ov_date" class="mt-1" />
                </div>
                <div>
                    <x-label for="ov_reason" :value="__('Reason')" />
                    <textarea id="ov_reason" rows="2" wire:model="ov_reason" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-accent-500 focus:ring-accent-500"></textarea>
                    <x-input-error for="ov_reason" class="mt-1" />
                </div>
            </div>
        </x-slot>
        <x-slot name="footer">
            <x-button variant="secondary" wire:click="$set('showOverrideModal', false)">{{ __('Cancel') }}</x-button>
            <x-button variant="primary" class="ml-2" wire:click="grantOverride">{{ __('Grant') }}</x-button>
        </x-slot>
    </x-dialog-modal>

    {{-- Manual correction modal --}}
    <x-dialog-modal wire:model.live="showCorrectionModal" maxWidth="md">
        <x-slot name="title">{{ $corr_record_id ? __('Edit attendance day') : __('Manual attendance entry') }}</x-slot>
        <x-slot name="content">
            <div class="space-y-4">
                <div>
                    <x-label for="corr_user_id" :value="__('Employee')" />
                    {{-- Locked once a day is on file: moving a record to another
                         person would silently overwrite THEIR day. Delete and
                         re-key instead. --}}
                    <select id="corr_user_id" wire:model="corr_user_id" @disabled((bool) $corr_record_id)
                        class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-accent-500 focus:ring-accent-500 disabled:bg-slate-100 disabled:text-slate-500">
                        <option value="">{{ __('Select…') }}</option>
                        @foreach ($members as $m)<option value="{{ $m->id }}">{{ $m->name }}</option>@endforeach
                    </select>
                    <x-input-error for="corr_user_id" class="mt-1" />
                </div>
                <div>
                    <x-label for="corr_date" :value="__('Date')" />
                    <x-input id="corr_date" type="date" class="mt-1 block w-full" wire:model="corr_date" :disabled="(bool) $corr_record_id" />
                    <x-input-error for="corr_date" class="mt-1" />
                </div>

                <div>
                    <x-label for="corr_ruling" :value="__('Ruling')" />
                    <select id="corr_ruling" wire:model.live="corr_ruling" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-accent-500 focus:ring-accent-500">
                        <option value="">{{ __('Work it out from the clock-in time') }}</option>
                        <option value="present">{{ __('Present') }}</option>
                        <option value="late">{{ __('Late') }}</option>
                        <option value="absent">{{ __('Absent — no hours for the day') }}</option>
                    </select>
                    <x-input-error for="corr_ruling" class="mt-1" />
                </div>

                @if ($corr_ruling !== 'absent')
                    <div class="grid grid-cols-2 gap-4">
                        <div><x-label for="corr_in" :value="__('Clock in')" /><x-input id="corr_in" type="time" class="mt-1 block w-full" wire:model="corr_in" /><x-input-error for="corr_in" class="mt-1" /></div>
                        <div><x-label for="corr_out" :value="__('Clock out')" /><x-input id="corr_out" type="time" class="mt-1 block w-full" wire:model="corr_out" /><x-input-error for="corr_out" class="mt-1" /></div>
                    </div>
                @endif

                <div>
                    <x-label for="corr_note" :value="__('Reason (optional)')" />
                    <textarea id="corr_note" rows="2" wire:model="corr_note"
                        placeholder="{{ __('Why this day was keyed in or changed') }}"
                        class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm placeholder:text-xs focus:border-accent-500 focus:ring-accent-500"></textarea>
                    <x-input-error for="corr_note" class="mt-1" />
                </div>
            </div>
        </x-slot>
        <x-slot name="footer">
            <div class="flex w-full items-center justify-between gap-3">
                <div>
                    @if ($corr_record_id)
                        <button type="button" wire:click="deleteRecord({{ $corr_record_id }})"
                            wire:confirm="{{ __('Remove this attendance day entirely?') }}"
                            class="text-sm font-medium text-rose-600 transition hover:text-rose-800">{{ __('Delete day') }}</button>
                    @endif
                </div>
                <div class="flex items-center gap-2">
                    <x-button variant="secondary" wire:click="$set('showCorrectionModal', false)">{{ __('Cancel') }}</x-button>
                    <x-button variant="primary" wire:click="saveCorrection" wire:loading.attr="disabled" wire:target="saveCorrection">
                        <span wire:loading.remove wire:target="saveCorrection">{{ __('Save') }}</span>
                        <span wire:loading wire:target="saveCorrection">{{ __('Saving…') }}</span>
                    </x-button>
                </div>
            </div>
        </x-slot>
    </x-dialog-modal>

    @endif
</div>