@extends('layouts.auth')

@section('title', '403 Forbidden')

@section('content')
<div class="auth-card text-center p-4">
    <div class="rounded-circle bg-danger-subtle text-danger mx-auto d-flex align-items-center justify-content-center mb-3" style="width: 72px; height: 72px; font-size: 2rem;">
        <i class="bi bi-shield-x"></i>
    </div>
    <h3 class="fw-bold text-dark mb-2">403 Access Forbidden</h3>
    <p class="text-muted small mb-4">
        {{ $exception->getMessage() ?: 'You do not have permission to access this protected area or store resource.' }}
    </p>
    <div class="d-flex justify-content-center gap-2">
        <a href="{{ route('dashboard') }}" class="btn btn-agri btn-sm">
            <i class="bi bi-house me-1"></i> Return to Dashboard
        </a>
        <a href="javascript:history.back()" class="btn btn-light border btn-sm">
            <i class="bi bi-arrow-left me-1"></i> Go Back
        </a>
    </div>
</div>
@endsection