<?php
/**
 * header.php - هيدر احترافي فائق السرعة
 */
?><!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
    <title>Max Pro - <?php echo $page_title ?? 'لوحة التحكم' ?></title>
    
    <!-- Preload critical assets -->
    <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
    
    <!-- Critical CSS inline -->
    <style>
        *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
        body{font-family:'Tajawal',sans-serif;background:#f0f2f5;direction:rtl}
        .main-content{margin-right:280px;padding:25px;min-height:100vh;transition:margin-right .2s}
        .top-bar{background:#fff;border-radius:20px;padding:15px 25px;margin-bottom:25px;box-shadow:0 4px 20px rgba(0,0,0,.02);display:flex;align-items:center;backdrop-filter:blur(10px)}
        .stat-card{background:#fff;border-radius:20px;padding:1.5rem;box-shadow:0 4px 20px rgba(0,0,0,.02);border-right:4px solid #F57C00;position:relative;height:100%;transition:all .2s}
        .stat-card:hover{transform:translateY(-3px);box-shadow:0 8px 25px rgba(245,124,0,.1)}
        .stat-card i{position:absolute;left:1.5rem;top:50%;transform:translateY(-50%);font-size:2.5rem;opacity:.1;color:#F57C00}
        .stat-number{font-size:2rem;font-weight:800;color:#1e293b;margin-bottom:.25rem}
        .stat-label{font-size:.85rem;color:#64748b;text-transform:uppercase;letter-spacing:.5px}
        .card{background:#fff;border-radius:20px;border:none;box-shadow:0 4px 20px rgba(0,0,0,.02);overflow:hidden}
        .card-header{background:#fff;border-bottom:1px solid #f1f5f9;padding:1.2rem 1.5rem;font-weight:600}
        .btn{transition:all .2s;border-radius:12px;font-weight:500}
        .btn-primary{background:#F57C00;border:none}
        .btn-primary:hover{background:#E65100;transform:translateY(-2px);box-shadow:0 4px 15px rgba(245,124,0,.3)}
        .badge{padding:.4rem .8rem;border-radius:30px;font-weight:500}
        @media(max-width:768px){.main-content{margin-right:0;padding:15px}.stat-number{font-size:1.5rem}}
    </style>
    
    <!-- Defer non-critical CSS -->
    <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.rtl.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
    
    <noscript>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.rtl.min.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    </noscript>
</head>
<body>