<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Cashier Assistant{% endblock %}</title>
    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🧾</text></svg>">
    <style>
        :root {
            --bg: #f1f5f9;
            --surface: #ffffff;
            --ink: #172033;
            --muted: #64748b;
            --line: #e2e8f0;
            --primary: #8a4d00;
            --primary-soft: #fff7ed;
            --accent: #10b981;
            --danger: #dc2626;
            --warn: #d97706;
            --shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
            --radius: 16px;
        }
        * { box-sizing: border-box; }
        body {
            margin: 0;
            font-family: "Segoe UI", "Avenir Next", "Helvetica Neue", sans-serif;
            background:
                radial-gradient(circle at top left, rgba(245, 158, 11, 0.12), transparent 28%),
                linear-gradient(180deg, #f8fafc 0%, var(--bg) 100%);
            color: var(--ink);
            min-height: 100vh;
        }
        a { color: inherit; text-decoration: none; }
        .shell { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
        .sidebar {
            background: #111827;
            color: #e5e7eb;
            padding: 24px 18px;
            display: flex;
            flex-direction: column;
            gap: 18px;
        }
        .brand { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.03em; }
        .brand span { color: #f59e0b; }
        .nav a {
            display: block;
            padding: 12px 14px;
            border-radius: 12px;
            color: #cbd5e1;
            margin-bottom: 6px;
        }
        .nav a:hover, .nav a.active { background: rgba(245, 158, 11, 0.16); color: #fff; }
        .content { padding: 28px; }
        .topbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 16px;
            margin-bottom: 24px;
        }
        .muted { color: var(--muted); }
        .card {
            background: var(--surface);
            border: 1px solid var(--line);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            padding: 18px;
        }
        .grid { display: grid; gap: 16px; }
        .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        .grid-2 { grid-template-columns: 1.2fr 0.8fr; }
        .kpi-label { font-size: 0.85rem; color: var(--muted); margin-bottom: 8px; }
        .kpi-value { font-size: 1.8rem; font-weight: 800; letter-spacing: -0.04em; }
        table { width: 100%; border-collapse: collapse; }
        th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
        th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
        .badge {
            display: inline-flex;
            align-items: center;
            padding: 4px 10px;
            border-radius: 999px;
            font-size: 0.78rem;
            font-weight: 700;
        }
        .badge-ok { background: #d1fae5; color: #047857; }
        .badge-warn { background: #ffedd5; color: #c2410c; }
        .badge-danger { background: #fee2e2; color: #b91c1c; }
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            border: 0;
            border-radius: 12px;
            padding: 12px 16px;
            font-weight: 700;
            cursor: pointer;
        }
        .btn-primary { background: var(--primary); color: white; }
        .btn-ghost { background: transparent; color: #cbd5e1; border: 1px solid #334155; }
        .auth-wrap {
            min-height: 100vh;
            display: grid;
            place-items: center;
            padding: 24px;
        }
        .auth-card { width: min(420px, 100%); }
        .field { display: grid; gap: 6px; margin-bottom: 14px; }
        .field input {
            width: 100%;
            border: 1px solid var(--line);
            border-radius: 12px;
            padding: 12px 14px;
            font: inherit;
        }
        .flash-error {
            background: #fee2e2;
            color: #991b1b;
            border-radius: 12px;
            padding: 12px 14px;
            margin-bottom: 14px;
        }
        .section-title { font-size: 1.35rem; font-weight: 800; margin: 0 0 4px; }
        @media (max-width: 980px) {
            .shell { grid-template-columns: 1fr; }
            .sidebar { flex-direction: row; flex-wrap: wrap; align-items: center; }
            .nav { display: flex; flex-wrap: wrap; gap: 6px; }
            .grid-4, .grid-2 { grid-template-columns: 1fr; }
        }
    </style>
    {% block stylesheets %}{% endblock %}
</head>
<body>
{% block body %}{% endblock %}
{% block javascripts %}{% endblock %}
</body>
</html>
