{% extends "layouts/app_shell.html" %}
{# In-app 403 — renders inside the authenticated shell so the user keeps
   their sidebar, persona badge, and logout context. Shipped as part of
   the #776 fix (cycle 219). #}

{% block title %}Access Denied - {{ app_name | default("Dazzle") }}{% endblock %}

{% block content %}
<div class="flex flex-col items-center justify-center min-h-[60vh] px-4">
  <h1 class="text-[48px] font-semibold leading-none text-[hsl(var(--foreground))] mb-4">403</h1>
  <p class="text-[15px] text-[hsl(var(--muted-foreground))] mb-6 text-center max-w-[480px]">
    {{ message | default("You don't have permission to access this page.") }}
  </p>
  <div class="flex items-center gap-2">
    {% if back_url %}
    <a href="{{ back_url }}"
       class="inline-flex items-center gap-1.5 h-8 px-3 rounded-[4px] text-[13px] font-medium
              bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]
              hover:brightness-110 transition-[filter] duration-[80ms]
              [transition-timing-function:cubic-bezier(0.2,0,0,1)]">
      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
      </svg>
      {{ back_label | default("Back") }}
    </a>
    {% endif %}
    <a href="/app"
       class="inline-flex items-center h-8 px-3 rounded-[4px] text-[13px] font-medium
              text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--muted))] hover:text-[hsl(var(--foreground))]
              transition-colors duration-[80ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]">
      Go to Dashboard
    </a>
  </div>
</div>
{% endblock %}