@php
    /**
     * Branded shell for every system notification email. Fed by
     * {@see \App\Notifications\SystemNotification::toMail()}, so all alerts look
     * like one product instead of Laravel's stock markdown mailer.
     */
    $primary = $setting?->primary_color ?: '#124a61';
    $accent = $setting?->accent_color ?: '#2e86ab';

    $tones = [
        'info' => ['bg' => '#eff6ff', 'border' => '#bfdbfe', 'text' => '#1d4ed8'],
        'success' => ['bg' => '#ecfdf5', 'border' => '#a7f3d0', 'text' => '#047857'],
        'warning' => ['bg' => '#fffbeb', 'border' => '#fde68a', 'text' => '#b45309'],
        'danger' => ['bg' => '#fef2f2', 'border' => '#fecaca', 'text' => '#b91c1c'],
    ];
    $t = $tones[$tone ?? 'info'] ?? $tones['info'];
@endphp

<x-mail-shell :message="$message ?? null" :setting="$setting" :heading="$heading" :preview="$body">

    @if (! empty($recipientName))
        <p style="margin:0 0 18px; font-size:15px; color:#64748b;">{{ __('Hi :name,', ['name' => $recipientName]) }}</p>
    @endif

    <h1 style="margin:0 0 14px; font-size:21px; line-height:1.3; font-weight:700; color:#0f172a;">{{ $title }}</h1>

    <!-- Tone bar: carries the urgency at a glance, before the detail table -->
    <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin:0 0 22px;">
        <tr>
            <td style="background-color:{{ $t['bg'] }}; border:1px solid {{ $t['border'] }}; border-radius:10px; padding:14px 16px; font-size:15px; line-height:1.6; color:{{ $t['text'] }};">
                {{ $body }}
            </td>
        </tr>
    </table>

    @if (! empty($details))
        <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin:0 0 24px; border:1px solid #e2e8f0; border-radius:10px; border-collapse:separate; overflow:hidden;">
            @foreach ($details as $label => $value)
                <tr>
                    <td style="padding:11px 16px; font-size:13px; color:#64748b; white-space:nowrap; vertical-align:top; {{ $loop->first ? '' : 'border-top:1px solid #f1f5f9;' }} background-color:#f8fafc;">
                        {{ $label }}
                    </td>
                    <td align="right" style="padding:11px 16px; font-size:14px; font-weight:600; color:#0f172a; vertical-align:top; {{ $loop->first ? '' : 'border-top:1px solid #f1f5f9;' }}">
                        {{ $value }}
                    </td>
                </tr>
            @endforeach
        </table>
    @endif

    @if ($actionUrl)
        <table role="presentation" cellpadding="0" cellspacing="0" border="0" style="margin:0 0 22px;">
            <tr>
                <td align="center" style="background-color:{{ $primary }}; background-image:linear-gradient(135deg,{{ $primary }},{{ $accent }}); border-radius:10px;">
                    <a href="{{ $actionUrl }}" style="display:inline-block; padding:13px 30px; font-size:15px; font-weight:600; color:#ffffff; text-decoration:none;">
                        {{ $actionLabel }}
                    </a>
                </td>
            </tr>
        </table>
    @endif

    @if ($footnote)
        <p style="margin:0; padding-top:18px; border-top:1px solid #f1f5f9; font-size:13px; line-height:1.6; color:#94a3b8;">{{ $footnote }}</p>
    @endif

</x-mail-shell>