@extends('layouts.master-auth')

@section('title', 'Access Denied')

@section('content')
<div class="auth-main v1">
    <div class="auth-wrapper">
        <div class="auth-form">
            <div class="error-card text-center">
                <div class="card-body">
                    <div class="error-image-block mb-4">
                        <img class="img-fluid" src="/build/images/pages/img-error-403.svg" alt="img-error-403" onerror="this.src='https://cdn-icons-png.flaticon.com/512/7666/7666147.png'; this.style.width='150px'">
                    </div>
                    <h1 class="mt-4 text-secondary font-weight-bold">403</h1>
                    <h5 class="text-danger mt-3 mb-4">
                        <i class="feather icon-alert-octagon mr-2"></i>Access Denied
                    </h5>
                    <p class="text-muted mb-4">
                        You do not have permission to access the requested resource.<br>
                        Please contact your administrator if you believe this is an error.
                    </p>
                    <a href="{{ route('dashboard') }}" class="btn btn-primary mb-3">
                        <i class="feather icon-home mr-2"></i>Back to Dashboard
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .auth-main.v1 {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f4f7fa;
    }
    .error-card {
        background: white;
        padding: 40px;
        border-radius: 12px;
        box-shadow: 0 4px 24px 0 rgba(0,0,0,0.05);
        max-width: 500px;
        margin: 0 auto;
    }
</style>
@endsection