<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>403 - Access Forbidden</title>

  <!-- Custom fonts -->
  <link href="<?= base_url('assets/'); ?>vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700;900&display=swap" rel="stylesheet">

  <!-- SB Admin 2 styles -->
  <link href="<?= base_url('assets/'); ?>css/sb-admin-2.min.css" rel="stylesheet">

  <style>
    body {
      font-family: 'Nunito', sans-serif;
      background: linear-gradient(135deg, #4e73df, #224abe);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .error-container {
      text-align: center;
      padding: 50px;
      max-width: 600px;
      background: #fff;
      border-radius: 15px;
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
      animation: fadeIn 0.8s ease-in-out;
    }

    .error-icon {
      font-size: 80px;
      margin-bottom: 20px;
      color: #4e73df;
    }

    .error-code {
      font-size: 110px;
      font-weight: 900;
      color: #224abe;
      line-height: 1;
      margin-bottom: 15px;
    }

    .error-message {
      font-size: 22px;
      font-weight: 700;
      color: #5a5c69;
      margin-bottom: 10px;
    }

    .error-detail {
      font-size: 15px;
      color: #858796;
      margin-bottom: 30px;
    }

    .btn-custom {
      padding: 12px 28px;
      font-size: 16px;
      border-radius: 30px;
      font-weight: 600;
      border: none;
      transition: all 0.3s ease;
      text-decoration: none;
      display: inline-block;
      margin: 5px;
    }

    .btn-dashboard {
      background: #4e73df;
      color: white;
    }

    .btn-dashboard:hover {
      background: #2e59d9;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
      color: white;
    }

    .btn-logout {
      background: #e74a3b;
      color: white;
    }

    .btn-logout:hover {
      background: #c0392b;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
      color: white;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  </style>
</head>

<body>
  <div class="error-container">
    <div class="error-icon">
      <i class="fas fa-lock"></i>
    </div>
    <div class="error-code">403</div>
    <div class="error-message">Access Forbidden</div>
    <div class="error-detail">
      Sorry, you don’t have permission to access this page.<br>
      Please contact your administrator if you think this is a mistake.
    </div>
    <div>
      <a href="<?= base_url('dashboard') ?>" class="btn-custom btn-dashboard">
        <i class="fas fa-tachometer-alt mr-2"></i> Dashboard
      </a>
      <a href="<?= base_url('auth/logout') ?>" class="btn-custom btn-logout">
        <i class="fas fa-sign-out-alt mr-2"></i> Logout
      </a>
    </div>
  </div>
</body>
</html>
