@extends('layouts.app')

@section('title', 'Unauthorized')

@section('content')

<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

.unauthorized-wrap {
    font-family: 'Poppins', sans-serif;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f7f8fc 0%, #fff 100%);
    padding: 2rem;
}

.unauthorized-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(65,70,98,.1);
    padding: 3rem;
    text-align: center;
    max-width: 500px;
}

.unauthorized-icon {
    font-size: 80px;
    margin-bottom: 1.5rem;
    display: block;
}

.unauthorized-title {
    font-size: 28px;
    font-weight: 700;
    color: #2d2f45;
    margin: 0 0 8px;
}

.unauthorized-subtitle {
    font-size: 14px;
    color: #9099b8;
    margin: 0 0 2rem;
    line-height: 1.6;
}

.unauthorized-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #414662;
    color: #fff;
    text-decoration: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    transition: background .2s;
    margin-top: 1.5rem;
}

.unauthorized-btn:hover {
    background: #f5a623;
}

.unauthorized-btn svg {
    width: 16px;
    height: 16px;
}
</style>

<div class="unauthorized-wrap">
    <div class="unauthorized-card">
        <span class="unauthorized-icon">🔒</span>
        <h1 class="unauthorized-title">Unauthorized Access</h1>
        <p class="unauthorized-subtitle">
            Your user role doesn't have access to the dashboard. Please contact your administrator.
        </p>

        <a href="{{ route('profile.show') }}" class="unauthorized-btn">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M19 12H5M12 19l-7-7 7-7"/>
            </svg>
            Go to Profile
        </a>
    </div>
</div>

@endsection