@extends('layouts.app')
@section('title', '403 Forbidden — Access Denied')
@section('header', 'Access Denied')

@section('content')
<div style="min-height: 480px; display: flex; align-items: center; justify-content: center; padding: 40px 20px;">
    <div style="max-width: 520px; text-align: center; background: #0c1428; border: 1px solid #1c2a4f; border-radius: 16px; padding: 40px 30px; box-shadow: 0 20px 40px rgba(0,0,0,0.5);">
        
        <!-- Shield Lock Icon -->
        <div style="width: 72px; height: 72px; border-radius: 50%; background: #281423; color: #f43f5e; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px; border: 2px solid #581c3b;">
            <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
                <circle cx="12" cy="11" r="1"/>
                <path d="M12 14v-2"/>
            </svg>
        </div>

        <h1 style="font-size: 24px; color: #ffffff; margin: 0 0 8px 0; font-weight: 800; letter-spacing: -0.5px;">
            403 — Access Denied
        </h1>

        <p style="color: #cbd5e1; font-size: 14px; margin: 0 0 16px 0; line-height: 1.5;">
            {{ $message ?? 'You do not have the required role or permission to access this page or perform this action.' }}
        </p>

        @if(!empty($permission))
            <div style="display: inline-block; background: #141f38; border: 1px solid #283a64; color: #93c5fd; padding: 4px 12px; border-radius: 6px; font-size: 12px; font-family: monospace; margin-bottom: 24px;">
                Required capability: <strong>{{ $permission }}</strong>
            </div>
        @endif

        <div style="display: flex; gap: 10px; justify-content: center;">
            <a href="javascript:history.back()" class="btn btn-secondary">
                ← Go Back
            </a>
            <a href="{{ route('dashboard') }}" class="btn">
                Return to Dashboard
            </a>
        </div>
    </div>
</div>
@endsection