<?php
declare(strict_types=1);

if (!isset($page_title)) {
    $page_title = 'Admin Panel';
}
?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= e($page_title) ?></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
    <style>
        *{
            box-sizing:border-box;
            margin:0;
            padding:0;
        }
        body{
            font-family:Tahoma, Arial, sans-serif;
            background:#f4f7fb;
            color:#1f2937;
        }
        a{
            text-decoration:none;
            color:inherit;
        }
        .admin-shell{
            min-height:100vh;
            display:flex;
        }
        .main-content{
            flex:1;
            min-width:0;
            padding:24px;
        }
        .topbar{
            background:#fff;
            border:1px solid #e5e7eb;
            border-radius:18px;
            padding:18px 20px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            margin-bottom:20px;
            box-shadow:0 10px 30px rgba(0,0,0,0.04);
        }
        .topbar h1{
            font-size:24px;
            font-weight:700;
        }
        .topbar .topbar-meta{
            font-size:14px;
            color:#6b7280;
        }
        .card{
            background:#fff;
            border:1px solid #e5e7eb;
            border-radius:18px;
            padding:20px;
            box-shadow:0 10px 30px rgba(0,0,0,0.04);
        }
        .flash{
            padding:14px 16px;
            border-radius:14px;
            margin-bottom:16px;
            font-size:14px;
            font-weight:700;
        }
        .flash.success{
            background:#ecfdf5;
            color:#065f46;
            border:1px solid #a7f3d0;
        }
        .flash.error{
            background:#fef2f2;
            color:#991b1b;
            border:1px solid #fecaca;
        }
        .flash.warning{
            background:#fffbeb;
            color:#92400e;
            border:1px solid #fde68a;
        }
        .btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:8px;
            border:none;
            border-radius:12px;
            padding:11px 16px;
            font-size:14px;
            font-weight:700;
            cursor:pointer;
            transition:.2s ease;
        }
        .btn-primary{
            background:#2563eb;
            color:#fff;
        }
        .btn-primary:hover{
            background:#1d4ed8;
        }
        .btn-danger{
            background:#dc2626;
            color:#fff;
        }
        .btn-danger:hover{
            background:#b91c1c;
        }
        .btn-light{
            background:#f3f4f6;
            color:#111827;
        }
        .btn-light:hover{
            background:#e5e7eb;
        }
        .table-wrap{
            width:100%;
            overflow:auto;
        }
        table{
            width:100%;
            border-collapse:collapse;
        }
        table th, table td{
            padding:14px 12px;
            border-bottom:1px solid #eef2f7;
            text-align:right;
            vertical-align:middle;
            white-space:nowrap;
            font-size:14px;
        }
        table th{
            background:#f8fafc;
            color:#374151;
            font-weight:800;
        }
        .badge{
            display:inline-flex;
            align-items:center;
            padding:7px 11px;
            border-radius:999px;
            font-size:12px;
            font-weight:800;
        }
        .badge.green{
            background:#dcfce7;
            color:#166534;
        }
        .badge.red{
            background:#fee2e2;
            color:#991b1b;
        }
        .badge.blue{
            background:#dbeafe;
            color:#1d4ed8;
        }
        .badge.gray{
            background:#f3f4f6;
            color:#374151;
        }
        .form-grid{
            display:grid;
            grid-template-columns:repeat(2, minmax(0, 1fr));
            gap:16px;
        }
        .form-group{
            display:flex;
            flex-direction:column;
            gap:8px;
        }
        .form-group.full{
            grid-column:1 / -1;
        }
        label{
            font-size:14px;
            font-weight:700;
            color:#374151;
        }
        input, select, textarea{
            width:100%;
            border:1px solid #d1d5db;
            border-radius:12px;
            padding:12px 14px;
            font-size:14px;
            background:#fff;
            outline:none;
        }
        input:focus, select:focus, textarea:focus{
            border-color:#2563eb;
            box-shadow:0 0 0 3px rgba(37,99,235,0.1);
        }
        textarea{
            min-height:120px;
            resize:vertical;
        }
        .page-actions{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-bottom:16px;
        }
        .empty-state{
            text-align:center;
            color:#6b7280;
            padding:40px 20px;
            font-size:15px;
        }
        @media (max-width: 992px){
            .admin-shell{
                flex-direction:column;
            }
            .main-content{
                padding:14px;
            }
            .topbar{
                flex-direction:column;
                align-items:flex-start;
            }
            .form-grid{
                grid-template-columns:1fr;
            }
        }
    </style>
</head>
<body>