{% extends 'base.html' %}
{% load static %}

{% block title %}404 - Page Not Found | POS 254{% endblock %}

{% block extra_css %}
<style>
    .error-container {
        text-align: center;
        background: var(--card-bg);
        padding: 60px 40px;
        border-radius: 20px;
        box-shadow: 0 20px 60px var(--shadow);
        max-width: 600px;
        width: 90%;
        margin: 0 auto;
        border: 1px solid var(--border-color);
    }

    .error-icon {
        font-size: 80px;
        color: #ffc107;
        margin-bottom: 30px;
    }

    .error-code {
        font-size: 72px;
        font-weight: 800;
        color: #ffc107;
        margin-bottom: 20px;
    }

    .error-title {
        font-size: 28px;
        font-weight: 600;
        color: var(--card-fg);
        margin-bottom: 20px;
    }

    .error-message {
        font-size: 18px;
        color: #6c757d;
        margin-bottom: 30px;
        line-height: 1.6;
    }

    .btn-custom {
        background: var(--primary-color);
        border: none;
        padding: 12px 30px;
        border-radius: 25px;
        color: white;
        font-weight: 600;
        text-decoration: none;
        display: inline-block;
        margin: 0 10px 10px 0;
        transition: all 0.3s ease;
    }

    .btn-custom:hover {
        background: var(--secondary-color);
        transform: translateY(-2px);
        color: white;
        text-decoration: none;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid d-flex align-items-center justify-content-center" style="min-height: 70vh;">
    <div class="error-container">
        <div class="error-icon">
            <i class="fas fa-search"></i>
        </div>
        
        <div class="error-code">404</div>
        
        <h1 class="error-title">Page Not Found</h1>
        
        <p class="error-message">
            The page you're looking for doesn't exist. It might have been moved, deleted, or you entered the wrong URL.
        </p>

        <div class="action-buttons">
            <a href="{% url 'dashboard' %}" class="btn-custom">
                <i class="fas fa-home"></i> Go to Dashboard
            </a>
            <a href="javascript:history.back()" class="btn-custom">
                <i class="fas fa-arrow-left"></i> Go Back
            </a>
        </div>
    </div>
</div>
{% endblock %}