<?php
/**
 * dashboard.php
 * Ultra Professional Version - Premium UI Design
 */

require_once __DIR__ . '/config/db.php';
require_once __DIR__ . '/src/auth.php';
require_once __DIR__ . '/src/functions.php';

require_login();

// --- إعدادات المستخدم ---
$avatar = (!empty($_SESSION['avatar']) && file_exists(__DIR__ . '/' . $_SESSION['avatar'])) 
          ? $_SESSION['avatar'] 
          : 'assets/img/avatar.png';
$username = $_SESSION['username'] ?? 'Admin';

// --- إعدادات اللغة ---
$lang = $_GET['lang'] ?? ($_SESSION['lang'] ?? 'en');
$lang = in_array($lang, ['en','ar']) ? $lang : 'en';
$_SESSION['lang'] = $lang;
$dir = $lang === 'ar' ? 'rtl' : 'ltr';

function esc($v){ return htmlspecialchars($v ?? '', ENT_QUOTES, 'UTF-8'); }

// --- معالجة طلبات AJAX (تحديث الإحصائيات) ---
if (isset($_GET['ajax_stats'])) {
    header('Content-Type: application/json; charset=utf-8');
    try {
        $totalProducts = (int)$pdo->query("SELECT COUNT(*) FROM products")->fetchColumn();
        $lowStockCount = (int)$pdo->query("SELECT COUNT(*) FROM products WHERE stock <= 5")->fetchColumn();
        $totalCustomers = (int)$pdo->query("SELECT COUNT(*) FROM customers")->fetchColumn();

        $stmt = $pdo->query("
            SELECT 
                COUNT(*) as invoices_count, 
                COALESCE(SUM(total),0) as sales_sum, 
                COALESCE(SUM(profit),0) as profit_sum 
            FROM sales 
            WHERE DATE(created_at) = CURDATE()
        ");
        $row = $stmt->fetch(PDO::FETCH_ASSOC);
        
        $todayInvoices = (int)($row['invoices_count'] ?? 0);
        $todaySales    = (float)($row['sales_sum'] ?? 0);
        $todayProfit   = (float)($row['profit_sum'] ?? 0);

        $stmtCash = $pdo->query("
            SELECT 
                COALESCE(SUM(CASE WHEN type='in' THEN amount ELSE 0 END), 0) AS total_in,
                COALESCE(SUM(CASE WHEN type='out' THEN amount ELSE 0 END), 0) AS total_out,
                COALESCE(SUM(CASE WHEN type='in' THEN amount ELSE -amount END), 0) AS balance
            FROM cash_transactions
        ");
        $c = $stmtCash->fetch(PDO::FETCH_ASSOC);
        
        echo json_encode([
            'ok' => 1,
            'todayInvoices' => $todayInvoices,
            'todaySales'    => round($todaySales, 2),
            'todayProfit'   => round($todayProfit, 2),
            'totalProducts' => $totalProducts,
            'lowStockCount' => $lowStockCount,
            'totalCustomers'=> $totalCustomers,
            'cashIn'        => round($c['total_in'], 2),
            'cashOut'       => round($c['total_out'], 2),
            'cashBalance'   => round($c['balance'], 2),
            'time'          => date('h:i A')
        ]);
    } catch (Exception $e) {
        echo json_encode(['ok'=>0, 'error'=>$e->getMessage()]);
    }
    exit;
}

try {
    $totalProducts = (int)$pdo->query("SELECT COUNT(*) FROM products")->fetchColumn();
    $lowStockCount = (int)$pdo->query("SELECT COUNT(*) FROM products WHERE stock <= 5")->fetchColumn();
    $totalCustomers = (int)$pdo->query("SELECT COUNT(*) FROM customers")->fetchColumn();
    
    $row = $pdo->query("SELECT COUNT(*) as c, COALESCE(SUM(total),0) as s, COALESCE(SUM(profit),0) as p FROM sales WHERE DATE(created_at) = CURDATE()")->fetch(PDO::FETCH_ASSOC);
    $todayInvoices = $row['c']; $todaySales = $row['s']; $todayProfit = $row['p'];

    $c = $pdo->query("SELECT COALESCE(SUM(CASE WHEN type='in' THEN amount ELSE 0 END), 0) as i, COALESCE(SUM(CASE WHEN type='out' THEN amount ELSE 0 END), 0) as o, COALESCE(SUM(CASE WHEN type='in' THEN amount ELSE -amount END), 0) as b FROM cash_transactions")->fetch(PDO::FETCH_ASSOC);
    $cashIn = $c['i']; $cashOut = $c['o']; $cashBalance = $c['b'];

} catch(Exception $e){
    $db_error = $e->getMessage();
    $totalProducts = $lowStockCount = $totalCustomers = $todayInvoices = 0;
    $todaySales = $todayProfit = $cashIn = $cashOut = $cashBalance = 0;
}

 $T = [
  'en'=>[
    'title'=>'Dashboard',
    'welcome'=>'Welcome back',
    'stats_sales'=>'Today\'s Revenue',
    'stats_products'=>'Total Products',
    'stats_customers'=>'Active Clients',
    'stats_cash'=>'Cash Balance',
    'invoices_count'=>'Invoices Today',
    'low_stock'=>'Low Stock Alert',
    'updated'=>'Last sync',
    'sections'=>'Quick Access',
    'sale_inv'=>'New Sale',
    'sale_list'=>'Sales History',
    'purch_inv'=>'Purchase Invoice',
    'add_prod'=>'Add Product',
    'prod_list'=>'Product Catalog',
    'stock_audit'=>'Stock Audit',
    'cust_add'=>'Customers',
    'cust_debt'=>'Receivables',
    'suppliers'=>'Suppliers',
    'add_bal'=>'Deposit Funds',
    'withdraw'=>'Withdraw',
    'cash_rep'=>'Cash Report',
    'users'=>'User Management',
    'backup'=>'Data Backup',
    'logout'=>'Sign Out',
    'profile'=>'My Profile',
    'settings'=>'System Settings',
    'main_menu'=>'Navigation',
    'system'=>'System',
    'invoices_today'=>'invoices processed',
    'deposit_total'=>'Total deposits',
    'withdraw_total'=>'Total withdrawals'
  ],
  'ar'=>[
    'title'=>'لوحة القيادة',
    'welcome'=>'مرحباً بعودتك',
    'stats_sales'=>'إيرادات اليوم',
    'stats_products'=>'إجمالي المنتجات',
    'stats_customers'=>'العملاء النشطين',
    'stats_cash'=>'رصيد الصندوق',
    'invoices_count'=>'فواتير اليوم',
    'low_stock'=>'تنبيه المخزون',
    'updated'=>'آخر تحديث',
    'sections'=>'الوصول السريع',
    'sale_inv'=>'فاتورة بيع',
    'sale_list'=>'سجل المبيعات',
    'purch_inv'=>'فاتورة مشتريات',
    'add_prod'=>'إضافة منتج',
    'prod_list'=>'دليل المنتجات',
    'stock_audit'=>'جرد المخزون',
    'cust_add'=>'العملاء',
    'cust_debt'=>'المستحقات',
    'suppliers'=>'الموردين',
    'add_bal'=>'إيداع أموال',
    'withdraw'=>'سحب مصاريف',
    'cash_rep'=>'تقرير الصندوق',
    'users'=>'إدارة المستخدمين',
    'backup'=>'نسخة احتياطية',
    'logout'=>'تسجيل الخروج',
    'profile'=>'الملف الشخصي',
    'settings'=>'إعدادات النظام',
    'main_menu'=>'التنقل',
    'system'=>'النظام',
    'invoices_today'=>'فاتورة معالجة',
    'deposit_total'=>'إجمالي الإيداعات',
    'withdraw_total'=>'إجمالي المسحوبات'
  ]
];
 $t = $T[$lang];

 $initialTheme = 'dark';
if (isset($_COOKIE['bo_theme']) && $_COOKIE['bo_theme'] === 'light') {
    $initialTheme = 'light';
}
?>
<!doctype html>
<html lang="<?= esc($lang) ?>" dir="<?= $dir ?>">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title><?= esc($t['title']) ?> — Top Accessories</title>
  
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

  <style>
    /* ======== CSS Custom Properties ======== */
    :root {
      --sidebar-w: 290px;
      --topbar-h: 72px;
      --radius: 16px;
      --radius-lg: 24px;
      --radius-sm: 10px;
      
      /* Dark Theme (Default) — Warm Charcoal + Amber Gold */
      --bg-base: #0C0E14;
      --bg-surface: #13161F;
      --bg-elevated: #1A1E2A;
      --bg-hover: #222738;
      --bg-input: #0F1119;
      
      --text-primary: #F0EDE6;
      --text-secondary: #7C829D;
      --text-tertiary: #4A4F65;
      
      --border-subtle: rgba(255,255,255,0.04);
      --border-default: rgba(255,255,255,0.07);
      --border-strong: rgba(255,255,255,0.12);
      
      --accent: #D4A853;
      --accent-dim: rgba(212,168,83,0.12);
      --accent-glow: rgba(212,168,83,0.25);
      
      --success: #34D399;
      --success-dim: rgba(52,211,153,0.12);
      --danger: #F87171;
      --danger-dim: rgba(248,113,113,0.12);
      --info: #60A5FA;
      --info-dim: rgba(96,165,250,0.12);
      --warning: #FBBF24;
      --warning-dim: rgba(251,191,36,0.12);
      
      --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
      --shadow-md: 0 4px 20px rgba(0,0,0,0.4);
      --shadow-lg: 0 12px 40px rgba(0,0,0,0.5);
      --shadow-accent: 0 4px 30px var(--accent-glow);
      
      --glass: rgba(19, 22, 31, 0.75);
      --glass-border: rgba(255,255,255,0.06);
      
      --font-display: 'Space Grotesk', 'Cairo', sans-serif;
      --font-body: 'Cairo', 'Space Grotesk', sans-serif;
      
      --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
      --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    
    /* Light Theme — Warm Cream + Deep Amber */
    body.light {
      --bg-base: #F5F2EB;
      --bg-surface: #FFFFFF;
      --bg-elevated: #FFFFFF;
      --bg-hover: #F0ECE3;
      --bg-input: #FAF8F5;
      
      --text-primary: #1A1510;
      --text-secondary: #8C8475;
      --text-tertiary: #B8B0A2;
      
      --border-subtle: rgba(0,0,0,0.04);
      --border-default: rgba(0,0,0,0.07);
      --border-strong: rgba(0,0,0,0.12);
      
      --accent: #B8860B;
      --accent-dim: rgba(184,134,11,0.08);
      --accent-glow: rgba(184,134,11,0.15);
      
      --success-dim: rgba(5,150,105,0.08);
      --danger-dim: rgba(220,38,38,0.08);
      --info-dim: rgba(37,99,235,0.08);
      --warning-dim: rgba(217,119,6,0.08);
      
      --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
      --shadow-md: 0 4px 20px rgba(0,0,0,0.08);
      --shadow-lg: 0 12px 40px rgba(0,0,0,0.1);
      
      --glass: rgba(255,255,255,0.8);
      --glass-border: rgba(0,0,0,0.05);
    }

    /* ======== Reset & Base ======== */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    
    body {
      background: var(--bg-base);
      color: var(--text-primary);
      font-family: var(--font-body);
      line-height: 1.6;
      overflow-x: hidden;
      transition: background 0.5s var(--ease-out), color 0.5s var(--ease-out);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--text-tertiary); border-radius: 10px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }

    a { text-decoration: none; color: inherit; }

    /* ======== Ambient Background ======== */
    .ambient {
      position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
    }
    .ambient-orb {
      position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.35;
      animation: orbFloat 20s ease-in-out infinite alternate;
    }
    body.light .ambient-orb { opacity: 0.15; }
    .orb-1 {
      width: 500px; height: 500px; top: -150px; right: -100px;
      background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
      animation-duration: 25s;
    }
    .orb-2 {
      width: 400px; height: 400px; bottom: -100px; left: -50px;
      background: radial-gradient(circle, #2563EB 0%, transparent 70%);
      animation-duration: 30s; animation-delay: -5s;
    }
    .orb-3 {
      width: 300px; height: 300px; top: 40%; left: 50%;
      background: radial-gradient(circle, #7C3AED 0%, transparent 70%);
      animation-duration: 22s; animation-delay: -10s; opacity: 0.15;
    }
    @keyframes orbFloat {
      0% { transform: translate(0, 0) scale(1); }
      33% { transform: translate(30px, -40px) scale(1.05); }
      66% { transform: translate(-20px, 30px) scale(0.95); }
      100% { transform: translate(15px, -15px) scale(1.02); }
    }

    /* ======== Sidebar ======== */
    .sidebar {
      width: var(--sidebar-w);
      height: 100vh;
      background: var(--bg-surface);
      position: fixed;
      top: 0;
      <?= $dir === 'rtl' ? 'right:0;' : 'left:0;' ?>
      z-index: 1060;
      display: flex; flex-direction: column;
      border-<?= $dir === 'rtl' ? 'left' : 'right' ?>: 1px solid var(--border-default);
      transition: transform 0.5s var(--ease-out), background 0.5s var(--ease-out);
    }

    .sidebar-header {
      padding: 28px 24px 20px;
      border-bottom: 1px solid var(--border-subtle);
    }
    .brand {
      display: flex; align-items: center; gap: 14px;
    }
    .brand-mark {
      width: 44px; height: 44px;
      background: linear-gradient(135deg, var(--accent), #E8C468);
      border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      color: #0C0E14; font-family: var(--font-display);
      font-weight: 800; font-size: 1rem;
      box-shadow: var(--shadow-accent);
      flex-shrink: 0;
    }
    .brand-text {
      display: flex; flex-direction: column;
    }
    .brand-name {
      font-family: var(--font-display);
      font-weight: 700; font-size: 1.05rem;
      color: var(--text-primary);
      letter-spacing: -0.3px;
    }
    .brand-sub {
      font-size: 0.7rem; color: var(--text-tertiary);
      font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase;
    }

    /* Nav */
    .sidebar-nav {
      flex: 1; overflow-y: auto; padding: 16px 14px;
    }
    .nav-section-label {
      font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: 2px; color: var(--text-tertiary);
      padding: 12px 14px 8px; 
    }
    .nav-link-custom {
      display: flex; align-items: center; gap: 12px;
      padding: 11px 14px; margin-bottom: 2px;
      color: var(--text-secondary);
      border-radius: var(--radius-sm);
      font-weight: 500; font-size: 0.88rem;
      transition: all 0.25s var(--ease-out);
      position: relative;
      overflow: hidden;
    }
    .nav-link-custom::before {
      content: '';
      position: absolute;
      <?= $dir === 'rtl' ? 'right' : 'left' ?>: 0; top: 50%;
      transform: translateY(-50%) scaleY(0);
      width: 3px; height: 60%;
      background: var(--accent);
      border-radius: 0 4px 4px 0;
      transition: transform 0.3s var(--ease-spring);
    }
    .nav-link-custom:hover {
      background: var(--bg-hover);
      color: var(--text-primary);
    }
    .nav-link-custom.active {
      background: var(--accent-dim);
      color: var(--accent);
      font-weight: 600;
    }
    .nav-link-custom.active::before {
      transform: translateY(-50%) scaleY(1);
    }
    .nav-link-custom i {
      width: 20px; text-align: center; font-size: 1rem;
      flex-shrink: 0;
    }
    .nav-link-custom .nav-badge {
      margin-<?= $dir === 'rtl' ? 'right' : 'left' ?>: auto;
      background: var(--danger-dim);
      color: var(--danger);
      font-size: 0.7rem; font-weight: 700;
      padding: 2px 8px; border-radius: 20px;
    }

    .sidebar-footer {
      padding: 16px 14px;
      border-top: 1px solid var(--border-subtle);
    }
    .nav-link-custom.danger-link:hover {
      background: var(--danger-dim);
      color: var(--danger);
    }

    /* ======== Main Area ======== */
    .main-area {
      margin-<?= $dir === 'rtl' ? 'right' : 'left' ?>: var(--sidebar-w);
      min-height: 100vh;
      position: relative; z-index: 1;
      transition: margin 0.5s var(--ease-out);
    }

    /* ======== Topbar ======== */
    .topbar {
      height: var(--topbar-h);
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 32px;
      position: sticky; top: 0; z-index: 1000;
      background: var(--glass);
      backdrop-filter: blur(20px) saturate(180%);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      border-bottom: 1px solid var(--glass-border);
      transition: background 0.5s var(--ease-out);
    }
    
    .topbar-left { display: flex; align-items: center; gap: 16px; }
    .topbar-right { display: flex; align-items: center; gap: 8px; }

    .page-title {
      font-family: var(--font-display);
      font-weight: 700; font-size: 1.35rem;
      letter-spacing: -0.5px;
    }
    .page-title-sub {
      font-size: 0.78rem; color: var(--text-tertiary);
      font-weight: 400; margin-top: -2px;
    }

    .top-btn {
      width: 40px; height: 40px;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border-default);
      background: transparent;
      color: var(--text-secondary);
      cursor: pointer;
      transition: all 0.25s var(--ease-out);
      font-size: 0.95rem;
      position: relative;
    }
    .top-btn:hover {
      background: var(--bg-hover);
      color: var(--text-primary);
      border-color: var(--border-strong);
      transform: translateY(-1px);
    }

    .lang-btn {
      width: auto; padding: 0 12px;
      font-family: var(--font-display);
      font-weight: 700; font-size: 0.72rem;
      letter-spacing: 1px;
    }

    .topbar-divider {
      width: 1px; height: 28px;
      background: var(--border-default);
      margin: 0 4px;
    }

    .user-chip {
      display: flex; align-items: center; gap: 10px;
      padding: 5px 14px 5px 5px;
      background: var(--bg-hover);
      border: 1px solid var(--border-default);
      border-radius: 50px;
      cursor: pointer;
      transition: all 0.25s var(--ease-out);
    }
    .user-chip:hover {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-dim);
    }
    .user-chip img {
      width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
      border: 2px solid var(--border-default);
    }
    .user-chip-info {
      display: flex; flex-direction: column;
      <?= $dir === 'rtl' ? 'text-align:right;' : 'text-align:left;' ?>
    }
    .user-chip-name { font-size: 0.82rem; font-weight: 600; line-height: 1.2; }
    .user-chip-role { font-size: 0.68rem; color: var(--text-tertiary); }

    /* Live Clock Pill */
    .clock-pill {
      display: flex; align-items: center; gap: 8px;
      padding: 6px 14px;
      background: var(--bg-hover);
      border: 1px solid var(--border-default);
      border-radius: 50px;
      font-family: var(--font-display);
      font-size: 0.82rem; font-weight: 600;
      color: var(--text-secondary);
    }
    .clock-dot {
      width: 6px; height: 6px;
      background: var(--success);
      border-radius: 50%;
      animation: pulse 2s ease-in-out infinite;
    }
    @keyframes pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.4; transform: scale(0.8); }
    }

    /* ======== Content ======== */
    .content { padding: 28px 32px 40px; }

    /* ======== Stat Cards ======== */
    .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 36px; }
    
    .stat-card {
      background: var(--bg-surface);
      border: 1px solid var(--border-default);
      border-radius: var(--radius-lg);
      padding: 24px;
      position: relative;
      overflow: hidden;
      transition: all 0.4s var(--ease-out);
    }
    .stat-card::after {
      content: '';
      position: absolute; top: 0; <?= $dir === 'rtl' ? 'right' : 'left' ?>: 0;
      width: 100%; height: 3px;
      opacity: 0;
      transition: opacity 0.4s var(--ease-out);
    }
    .stat-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-lg);
      border-color: var(--border-strong);
    }
    .stat-card:hover::after { opacity: 1; }
    
    .stat-card.accent-gold::after { background: linear-gradient(90deg, var(--accent), #E8C468); }
    .stat-card.accent-green::after { background: linear-gradient(90deg, var(--success), #6EE7B7); }
    .stat-card.accent-blue::after { background: linear-gradient(90deg, var(--info), #93C5FD); }
    .stat-card.accent-red::after { background: linear-gradient(90deg, var(--danger), #FCA5A5); }

    .stat-card-top {
      display: flex; align-items: flex-start; justify-content: space-between;
      margin-bottom: 18px;
    }
    .stat-icon-wrap {
      width: 48px; height: 48px;
      border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.15rem;
    }
    .stat-card.accent-gold .stat-icon-wrap { background: var(--accent-dim); color: var(--accent); }
    .stat-card.accent-green .stat-icon-wrap { background: var(--success-dim); color: var(--success); }
    .stat-card.accent-blue .stat-icon-wrap { background: var(--info-dim); color: var(--info); }
    .stat-card.accent-red .stat-icon-wrap { background: var(--danger-dim); color: var(--danger); }

    .stat-trend {
      display: flex; align-items: center; gap: 4px;
      font-size: 0.72rem; font-weight: 700;
      padding: 3px 8px; border-radius: 20px;
    }
    .trend-up { background: var(--success-dim); color: var(--success); }
    .trend-down { background: var(--danger-dim); color: var(--danger); }

    .stat-label {
      font-size: 0.78rem; color: var(--text-tertiary);
      font-weight: 500; margin-bottom: 6px;
    }
    .stat-value {
      font-family: var(--font-display);
      font-size: 1.85rem; font-weight: 700;
      letter-spacing: -1px; line-height: 1.1;
      color: var(--text-primary);
    }
    .stat-footer {
      display: flex; align-items: center; gap: 8px;
      margin-top: 14px; padding-top: 14px;
      border-top: 1px solid var(--border-subtle);
      font-size: 0.76rem; color: var(--text-tertiary);
    }
    .stat-footer i { font-size: 0.7rem; }

    /* ======== Section Header ======== */
    .section-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 20px;
    }
    .section-title {
      font-family: var(--font-display);
      font-size: 1.1rem; font-weight: 700;
      display: flex; align-items: center; gap: 10px;
    }
    .section-title::before {
      content: '';
      width: 4px; height: 22px;
      background: var(--accent);
      border-radius: 4px;
    }

    /* ======== Quick Access Tiles ======== */
    .tiles-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      margin-bottom: 36px;
    }

    .tile-card {
      display: flex; align-items: center; gap: 16px;
      padding: 18px 20px;
      background: var(--bg-surface);
      border: 1px solid var(--border-default);
      border-radius: var(--radius);
      transition: all 0.35s var(--ease-out);
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .tile-card::before {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(135deg, transparent, rgba(255,255,255,0.02));
      opacity: 0; transition: opacity 0.35s;
    }
    .tile-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-md);
      border-color: var(--border-strong);
    }
    .tile-card:hover::before { opacity: 1; }
    .tile-card:hover .tile-icon { transform: scale(1.1); }
    .tile-card:hover .tile-arrow { opacity: 1; transform: translateX(0); }

    .tile-icon {
      width: 44px; height: 44px;
      border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.1rem;
      flex-shrink: 0;
      transition: transform 0.35s var(--ease-spring);
    }
    .tile-info { flex: 1; min-width: 0; }
    .tile-label {
      font-weight: 600; font-size: 0.88rem;
      color: var(--text-primary);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .tile-desc {
      font-size: 0.72rem; color: var(--text-tertiary);
      margin-top: 1px;
    }
    .tile-arrow {
      color: var(--text-tertiary);
      font-size: 0.8rem;
      opacity: 0;
      transform: translateX(<?= $dir === 'rtl' ? '8px' : '-8px' ?>);
      transition: all 0.35s var(--ease-out);
    }

    /* Tile Color Variants */
    .tc-gold .tile-icon { background: var(--accent-dim); color: var(--accent); }
    .tc-green .tile-icon { background: var(--success-dim); color: var(--success); }
    .tc-blue .tile-icon { background: var(--info-dim); color: var(--info); }
    .tc-red .tile-icon { background: var(--danger-dim); color: var(--danger); }
    .tc-purple .tile-icon { background: rgba(139,92,246,0.12); color: #8B5CF6; }
    .tc-teal .tile-icon { background: rgba(20,184,166,0.12); color: #14B8A6; }
    .tc-orange .tile-icon { background: var(--warning-dim); color: var(--warning); }
    .tc-pink .tile-icon { background: rgba(236,72,153,0.12); color: #EC4899; }
    .tc-indigo .tile-icon { background: rgba(99,102,241,0.12); color: #6366F1; }
    .tc-emerald .tile-icon { background: rgba(16,185,129,0.12); color: #10B981; }
    .tc-rose .tile-icon { background: rgba(244,63,94,0.12); color: #F43F5E; }
    .tc-slate .tile-icon { background: rgba(100,116,139,0.12); color: #64748B; }

    /* ======== Bottom Row: Cash Detail ======== */
    .detail-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }
    .detail-card {
      background: var(--bg-surface);
      border: 1px solid var(--border-default);
      border-radius: var(--radius-lg);
      padding: 24px;
      transition: all 0.4s var(--ease-out);
    }
    .detail-card:hover {
      border-color: var(--border-strong);
      box-shadow: var(--shadow-md);
    }
    .detail-card-title {
      font-size: 0.78rem; color: var(--text-tertiary);
      font-weight: 600; text-transform: uppercase;
      letter-spacing: 1px; margin-bottom: 20px;
    }
    .detail-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 0;
      border-bottom: 1px solid var(--border-subtle);
    }
    .detail-row:last-child { border-bottom: none; }
    .detail-row-label {
      display: flex; align-items: center; gap: 10px;
      font-size: 0.88rem; color: var(--text-secondary);
    }
    .detail-row-label i { width: 18px; text-align: center; }
    .detail-row-value {
      font-family: var(--font-display);
      font-weight: 700; font-size: 1rem;
    }
    .val-positive { color: var(--success); }
    .val-negative { color: var(--danger); }
    .val-neutral { color: var(--text-primary); }

    /* Mini bar */
    .mini-bar {
      width: 100%; height: 6px;
      background: var(--bg-hover);
      border-radius: 10px;
      overflow: hidden; margin-top: 8px;
    }
    .mini-bar-fill {
      height: 100%; border-radius: 10px;
      transition: width 1s var(--ease-out);
    }

    /* ======== Dropdown (Bootstrap Override) ======== */
    .dropdown-menu {
      background: var(--bg-elevated);
      border: 1px solid var(--border-default);
      box-shadow: var(--shadow-lg);
      border-radius: var(--radius);
      padding: 8px;
      min-width: 200px;
      animation: dropIn 0.25s var(--ease-out);
    }
    @keyframes dropIn {
      from { opacity: 0; transform: translateY(-8px) scale(0.96); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    .dropdown-item {
      color: var(--text-secondary);
      padding: 10px 14px;
      border-radius: var(--radius-sm);
      font-weight: 500; font-size: 0.85rem;
      transition: all 0.2s;
      display: flex; align-items: center; gap: 10px;
    }
    .dropdown-item:hover {
      background: var(--bg-hover);
      color: var(--text-primary);
    }
    .dropdown-item.text-danger:hover {
      background: var(--danger-dim);
      color: var(--danger);
    }
    .dropdown-divider {
      border-color: var(--border-subtle);
      margin: 4px 0;
    }

    /* ======== Footer ======== */
    .page-footer {
      text-align: center;
      padding: 24px 0 8px;
      font-size: 0.72rem;
      color: var(--text-tertiary);
      letter-spacing: 0.5px;
    }

    /* ======== Error Alert ======== */
    .alert-danger {
      background: var(--danger-dim);
      border: 1px solid rgba(248,113,113,0.2);
      color: var(--danger);
      border-radius: var(--radius);
      padding: 14px 20px;
      font-size: 0.88rem;
      margin-bottom: 24px;
    }

    /* ======== Overlay ======== */
    .overlay {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.6);
      backdrop-filter: blur(6px);
      z-index: 1055;
      opacity: 0; pointer-events: none;
      transition: opacity 0.4s var(--ease-out);
    }
    .overlay.show { opacity: 1; pointer-events: auto; }

    /* ======== Responsive ======== */
    @media (max-width: 1400px) {
      .stat-grid { grid-template-columns: repeat(2, 1fr); }
      .tiles-grid { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 991px) {
      .sidebar { transform: translateX(<?= $dir === 'rtl' ? '100%' : '-100%' ?>); }
      .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
      .main-area { margin-inline-start: 0 !important; }
      .content { padding: 20px 16px; }
      .topbar { padding: 0 16px; }
      .tiles-grid { grid-template-columns: repeat(2, 1fr); }
      .detail-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 576px) {
      .stat-grid { grid-template-columns: 1fr; }
      .tiles-grid { grid-template-columns: 1fr; }
      .page-title { font-size: 1.1rem; }
      .stat-value { font-size: 1.5rem; }
      .clock-pill, .user-chip-info { display: none; }
    }

    /* ======== Animation Classes ======== */
    .fade-up {
      opacity: 0; transform: translateY(20px);
      animation: fadeUp 0.6s var(--ease-out) forwards;
    }
    @keyframes fadeUp {
      to { opacity: 1; transform: translateY(0); }
    }
    .delay-1 { animation-delay: 0.05s; }
    .delay-2 { animation-delay: 0.1s; }
    .delay-3 { animation-delay: 0.15s; }
    .delay-4 { animation-delay: 0.2s; }
    .delay-5 { animation-delay: 0.25s; }
    .delay-6 { animation-delay: 0.3s; }
    .delay-7 { animation-delay: 0.35s; }
    .delay-8 { animation-delay: 0.4s; }
    .delay-9 { animation-delay: 0.45s; }
    .delay-10 { animation-delay: 0.5s; }
    .delay-11 { animation-delay: 0.55s; }
    .delay-12 { animation-delay: 0.6s; }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
      }
    }
  </style>
</head>
<body class="<?= $initialTheme === 'light' ? 'light' : '' ?>">

<!-- Ambient Background -->
<div class="ambient" aria-hidden="true">
  <div class="ambient-orb orb-1"></div>
  <div class="ambient-orb orb-2"></div>
  <div class="ambient-orb orb-3"></div>
</div>

<!-- Mobile Overlay -->
<div class="overlay" id="overlay" aria-hidden="true"></div>

<!-- ======== Sidebar ======== -->
<aside class="sidebar" id="sidebar" role="navigation" aria-label="<?= esc($t['main_menu']) ?>">
  <div class="sidebar-header">
    <div class="brand">
      <div class="brand-mark">TA</div>
      <div class="brand-text">
        <span class="brand-name">Top Accessories</span>
        <span class="brand-sub">POS System</span>
      </div>
    </div>
  </div>

  <nav class="sidebar-nav">
    <div class="nav-section-label"><?= $t['main_menu'] ?></div>
    
    <a href="dashboard.php" class="nav-link-custom active" aria-current="page">
      <i class="fa-solid fa-grid-2"></i> <?= $t['title'] ?>
    </a>
    <a href="sales_create.php" class="nav-link-custom">
      <i class="fa-solid fa-cart-plus"></i> <?= $t['sale_inv'] ?>
    </a>
    <a href="sales_list.php" class="nav-link-custom">
      <i class="fa-solid fa-receipt"></i> <?= $t['sale_list'] ?>
    </a>
    <a href="products.php" class="nav-link-custom">
      <i class="fa-solid fa-boxes-stacked"></i> <?= $t['prod_list'] ?>
    </a>
    <a href="customers.php" class="nav-link-custom">
      <i class="fa-solid fa-user-group"></i> <?= $t['cust_add'] ?>
    </a>
    <a href="debts.php" class="nav-link-custom">
      <i class="fa-solid fa-hand-holding-dollar"></i> <?= $t['cust_debt'] ?>
    </a>
    <a href="inventory.php" class="nav-link-custom">
      <i class="fa-solid fa-warehouse"></i> <?= $t['stock_audit'] ?>
      <?php if($lowStockCount > 0): ?>
        <span class="nav-badge"><?= $lowStockCount ?></span>
      <?php endif; ?>
    </a>
    <a href="suppliers.php" class="nav-link-custom">
      <i class="fa-solid fa-truck-field"></i> <?= $t['suppliers'] ?>
    </a>

    <div class="nav-section-label" style="margin-top: 8px;"><?= $t['system'] ?></div>
    
    <a href="users.php" class="nav-link-custom">
      <i class="fa-solid fa-shield-halved"></i> <?= $t['users'] ?>
    </a>
    <a href="admin/create_backup.php" class="nav-link-custom">
      <i class="fa-solid fa-cloud-arrow-up"></i> <?= $t['backup'] ?>
    </a>
  </nav>

  <div class="sidebar-footer">
    <a href="logout.php" class="nav-link-custom danger-link">
      <i class="fa-solid fa-arrow-right-from-bracket"></i> <?= $t['logout'] ?>
    </a>
  </div>
</aside>

<!-- ======== Main Area ======== -->
<div class="main-area">
  
  <!-- Topbar -->
  <header class="topbar">
    <div class="topbar-left">
      <button class="top-btn d-lg-none" id="menuBtn" aria-label="Toggle menu">
        <i class="fa-solid fa-bars"></i>
      </button>
      <div>
        <h1 class="page-title"><?= $t['title'] ?></h1>
        <div class="page-title-sub"><?= $t['welcome'] ?>, <?= esc($username) ?></div>
      </div>
    </div>

    <div class="topbar-right">
      <div class="clock-pill d-none d-md-flex">
        <span class="clock-dot"></span>
        <span id="clock">--:--</span>
      </div>

      <div class="topbar-divider d-none d-sm-block"></div>

      <button class="top-btn" id="themeBtn" aria-label="Toggle theme" title="Toggle theme">
        <i class="fa-solid <?= $initialTheme === 'light' ? 'fa-moon' : 'fa-sun' ?>"></i>
      </button>

      <div class="dropdown">
        <button class="top-btn lang-btn" data-bs-toggle="dropdown" aria-expanded="false">
          <?= strtoupper($lang) ?>
        </button>
        <ul class="dropdown-menu dropdown-menu-end">
          <li><a class="dropdown-item" href="?lang=en">English</a></li>
          <li><a class="dropdown-item" href="?lang=ar">العربية</a></li>
        </ul>
      </div>

      <div class="topbar-divider d-none d-sm-block"></div>

      <div class="dropdown">
        <div class="user-chip" data-bs-toggle="dropdown" aria-expanded="false">
          <img src="<?= esc($avatar) ?>?v=<?= time() ?>" alt="<?= esc($username) ?>" loading="lazy">
          <div class="user-chip-info d-none d-sm-block">
            <span class="user-chip-name"><?= esc($username) ?></span>
            <span class="user-chip-role">Admin</span>
          </div>
          <i class="fa-solid fa-chevron-down" style="font-size:0.6rem; color:var(--text-tertiary); margin-<?= $dir === 'rtl' ? 'right' : 'left' ?>:4px"></i>
        </div>
        <ul class="dropdown-menu dropdown-menu-end" style="margin-top:8px;">
          <li style="padding:8px 14px 12px; border-bottom:1px solid var(--border-subtle); margin-bottom:4px;">
            <div style="font-weight:700; font-size:0.9rem;"><?= esc($username) ?></div>
            <div style="font-size:0.72rem; color:var(--text-tertiary);">admin@topacc.com</div>
          </li>
          <li><a class="dropdown-item" href="profile.php"><i class="fa-regular fa-user"></i> <?= $t['profile'] ?></a></li>
          <li><a class="dropdown-item" href="settings.php"><i class="fa-solid fa-gear"></i> <?= $t['settings'] ?></a></li>
          <li><hr class="dropdown-divider"></li>
          <li><a class="dropdown-item text-danger" href="logout.php"><i class="fa-solid fa-power-off"></i> <?= $t['logout'] ?></a></li>
        </ul>
      </div>
    </div>
  </header>

  <!-- Content -->
  <main class="content">
    
    <?php if(isset($db_error)): ?>
      <div class="alert-danger fade-up">
        <i class="fa-solid fa-triangle-exclamation me-2"></i> <?= esc($db_error) ?>
      </div>
    <?php endif; ?>

    <!-- ===== Stats Cards ===== -->
    <div class="stat-grid">
      <div class="stat-card accent-gold fade-up delay-1">
        <div class="stat-card-top">
          <div class="stat-icon-wrap"><i class="fa-solid fa-coins"></i></div>
          <div class="stat-trend trend-up"><i class="fa-solid fa-arrow-up" style="font-size:0.6rem"></i> Live</div>
        </div>
        <div class="stat-label"><?= $t['stats_sales'] ?></div>
        <div class="stat-value" id="todaySales"><?= number_format($todaySales) ?></div>
        <div class="stat-footer">
          <i class="fa-solid fa-file-invoice"></i>
          <span id="todayInvoices"><?= $todayInvoices ?></span> <?= $t['invoices_today'] ?>
        </div>
      </div>

      <div class="stat-card accent-blue fade-up delay-2">
        <div class="stat-card-top">
          <div class="stat-icon-wrap"><i class="fa-solid fa-box-open"></i></div>
          <div class="stat-trend trend-down"><i class="fa-solid fa-circle-exclamation" style="font-size:0.6rem"></i> <?= $lowStockCount ?></div>
        </div>
        <div class="stat-label"><?= $t['stats_products'] ?></div>
        <div class="stat-value" id="totalProducts"><?= number_format($totalProducts) ?></div>
        <div class="stat-footer">
          <i class="fa-solid fa-triangle-exclamation" style="color:var(--danger)"></i>
          <span id="lowStock"><?= $t['low_stock'] ?></span>
        </div>
      </div>

      <div class="stat-card accent-green fade-up delay-3">
        <div class="stat-card-top">
          <div class="stat-icon-wrap"><i class="fa-solid fa-users"></i></div>
          <div class="stat-trend trend-up"><i class="fa-solid fa-check" style="font-size:0.6rem"></i></div>
        </div>
        <div class="stat-label"><?= $t['stats_customers'] ?></div>
        <div class="stat-value" id="totalCustomers"><?= number_format($totalCustomers) ?></div>
        <div class="stat-footer">
          <i class="fa-solid fa-user-check" style="color:var(--success)"></i>
          <span><?= $lang=='ar' ? 'حسابات نشطة' : 'Active accounts' ?></span>
        </div>
      </div>

      <div class="stat-card accent-red fade-up delay-4">
        <div class="stat-card-top">
          <div class="stat-icon-wrap"><i class="fa-solid fa-vault"></i></div>
        </div>
        <div class="stat-label"><?= $t['stats_cash'] ?></div>
        <div class="stat-value" id="cashBalance" style="color: <?= $cashBalance >= 0 ? 'var(--success)' : 'var(--danger)' ?>"><?= number_format($cashBalance, 2) ?></div>
        <div class="stat-footer">
          <i class="fa-regular fa-clock"></i>
          <span id="lastUpdate"><?= $t['updated'] ?>: <?= date('h:i A') ?></span>
        </div>
      </div>
    </div>

    <!-- ===== Quick Access ===== -->
    <div class="section-header fade-up delay-5">
      <h2 class="section-title"><?= $t['sections'] ?></h2>
    </div>

    <div class="tiles-grid">
      <a href="sales_create.php" class="tile-card tc-gold fade-up delay-5">
        <div class="tile-icon"><i class="fa-solid fa-cart-shopping"></i></div>
        <div class="tile-info">
          <div class="tile-label"><?= $t['sale_inv'] ?></div>
          <div class="tile-desc"><?= $lang=='ar' ? 'إنشاء فاتورة جديدة' : 'Create new invoice' ?></div>
        </div>
        <i class="fa-solid fa-arrow-<?= $dir === 'rtl' ? 'left' : 'right' ?> tile-arrow"></i>
      </a>

      <a href="sales_list.php" class="tile-card tc-blue fade-up delay-6">
        <div class="tile-icon"><i class="fa-solid fa-magnifying-glass-dollar"></i></div>
        <div class="tile-info">
          <div class="tile-label"><?= $t['sale_list'] ?></div>
          <div class="tile-desc"><?= $lang=='ar' ? 'بحث وسجل الفواتير' : 'Search & history' ?></div>
        </div>
        <i class="fa-solid fa-arrow-<?= $dir === 'rtl' ? 'left' : 'right' ?> tile-arrow"></i>
      </a>

      <a href="purchase_invoice.php" class="tile-card tc-purple fade-up delay-7">
        <div class="tile-icon"><i class="fa-solid fa-truck-ramp-box"></i></div>
        <div class="tile-info">
          <div class="tile-label"><?= $t['purch_inv'] ?></div>
          <div class="tile-desc"><?= $lang=='ar' ? 'إدخال بضاعة' : 'Stock incoming' ?></div>
        </div>
        <i class="fa-solid fa-arrow-<?= $dir === 'rtl' ? 'left' : 'right' ?> tile-arrow"></i>
      </a>

      <a href="suppliers.php" class="tile-card tc-teal fade-up delay-8">
        <div class="tile-icon"><i class="fa-solid fa-truck-field"></i></div>
        <div class="tile-info">
          <div class="tile-label"><?= $t['suppliers'] ?></div>
          <div class="tile-desc"><?= $lang=='ar' ? 'إدارة الموردين' : 'Manage suppliers' ?></div>
        </div>
        <i class="fa-solid fa-arrow-<?= $dir === 'rtl' ? 'left' : 'right' ?> tile-arrow"></i>
      </a>

      <a href="add_product.php" class="tile-card tc-orange fade-up delay-6">
        <div class="tile-icon"><i class="fa-solid fa-circle-plus"></i></div>
        <div class="tile-info">
          <div class="tile-label"><?= $t['add_prod'] ?></div>
          <div class="tile-desc"><?= $lang=='ar' ? 'تسجيل منتج جديد' : 'Register new item' ?></div>
        </div>
        <i class="fa-solid fa-arrow-<?= $dir === 'rtl' ? 'left' : 'right' ?> tile-arrow"></i>
      </a>

      <a href="products.php" class="tile-card tc-indigo fade-up delay-7">
        <div class="tile-icon"><i class="fa-solid fa-list-check"></i></div>
        <div class="tile-info">
          <div class="tile-label"><?= $t['prod_list'] ?></div>
          <div class="tile-desc"><?= $lang=='ar' ? 'الأسعار والكميات' : 'Prices & stock' ?></div>
        </div>
        <i class="fa-solid fa-arrow-<?= $dir === 'rtl' ? 'left' : 'right' ?> tile-arrow"></i>
      </a>

      <a href="stock_audit.php" class="tile-card tc-red fade-up delay-8">
        <div class="tile-icon"><i class="fa-solid fa-clipboard-check"></i></div>
        <div class="tile-info">
          <div class="tile-label"><?= $t['stock_audit'] ?></div>
          <div class="tile-desc"><?= $lang=='ar' ? 'نواقص وتالف' : 'Deficits & damaged' ?></div>
        </div>
        <i class="fa-solid fa-arrow-<?= $dir === 'rtl' ? 'left' : 'right' ?> tile-arrow"></i>
      </a>

      <a href="customers.php" class="tile-card tc-pink fade-up delay-9">
        <div class="tile-icon"><i class="fa-solid fa-address-book"></i></div>
        <div class="tile-info">
          <div class="tile-label"><?= $t['cust_add'] ?></div>
          <div class="tile-desc"><?= $lang=='ar' ? 'قاعدة بيانات العملاء' : 'Customer database' ?></div>
        </div>
        <i class="fa-solid fa-arrow-<?= $dir === 'rtl' ? 'left' : 'right' ?> tile-arrow"></i>
      </a>

      <a href="debts.php" class="tile-card tc-rose fade-up delay-7">
        <div class="tile-icon"><i class="fa-solid fa-book-open-reader"></i></div>
        <div class="tile-info">
          <div class="tile-label"><?= $t['cust_debt'] ?></div>
          <div class="tile-desc"><?= $lang=='ar' ? 'متابعة المستحقات' : 'Track receivables' ?></div>
        </div>
        <i class="fa-solid fa-arrow-<?= $dir === 'rtl' ? 'left' : 'right' ?> tile-arrow"></i>
      </a>

      <a href="add_balance.php" class="tile-card tc-emerald fade-up delay-8">
        <div class="tile-icon"><i class="fa-solid fa-money-bill-wave"></i></div>
        <div class="tile-info">
          <div class="tile-label"><?= $t['add_bal'] ?></div>
          <div class="tile-desc"><?= $lang=='ar' ? 'إيداع في الصندوق' : 'Deposit to cashbox' ?></div>
        </div>
        <i class="fa-solid fa-arrow-<?= $dir === 'rtl' ? 'left' : 'right' ?> tile-arrow"></i>
      </a>

      <a href="withdraw.php" class="tile-card tc-slate fade-up delay-9">
        <div class="tile-icon"><i class="fa-solid fa-money-bill-transfer"></i></div>
        <div class="tile-info">
          <div class="tile-label"><?= $t['withdraw'] ?></div>
          <div class="tile-desc"><?= $lang=='ar' ? 'سحب مصاريف' : 'Withdraw expenses' ?></div>
        </div>
        <i class="fa-solid fa-arrow-<?= $dir === 'rtl' ? 'left' : 'right' ?> tile-arrow"></i>
      </a>

      <a href="cash_report.php" class="tile-card tc-gold fade-up delay-10">
        <div class="tile-icon"><i class="fa-solid fa-chart-pie"></i></div>
        <div class="tile-info">
          <div class="tile-label"><?= $t['cash_rep'] ?></div>
          <div class="tile-desc"><?= $lang=='ar' ? 'حركة الصندوق' : 'Cash flow report' ?></div>
        </div>
        <i class="fa-solid fa-arrow-<?= $dir === 'rtl' ? 'left' : 'right' ?> tile-arrow"></i>
      </a>
    </div>

    <!-- ===== Bottom Detail Cards ===== -->
    <div class="detail-grid fade-up delay-10">
      <!-- Cash Flow Summary -->
      <div class="detail-card">
        <div class="detail-card-title"><i class="fa-solid fa-wallet me-2"></i><?= $lang=='ar' ? 'ملخص حركة الصندوق' : 'Cash Flow Summary' ?></div>
        
        <div class="detail-row">
          <div class="detail-row-label">
            <i class="fa-solid fa-arrow-down" style="color:var(--success)"></i>
            <?= $t['deposit_total'] ?>
          </div>
          <div class="detail-row-value val-positive" id="cashIn"><?= number_format($cashIn, 2) ?></div>
        </div>
        <div class="mini-bar"><div class="mini-bar-fill" style="width:<?= $cashIn > 0 && $cashOut > 0 ? min(100, ($cashIn / ($cashIn + $cashOut)) * 100) : 50 ?>%; background:var(--success)"></div></div>

        <div class="detail-row" style="margin-top:8px;">
          <div class="detail-row-label">
            <i class="fa-solid fa-arrow-up" style="color:var(--danger)"></i>
            <?= $t['withdraw_total'] ?>
          </div>
          <div class="detail-row-value val-negative" id="cashOut"><?= number_format($cashOut, 2) ?></div>
        </div>
        <div class="mini-bar"><div class="mini-bar-fill" style="width:<?= $cashIn > 0 && $cashOut > 0 ? min(100, ($cashOut / ($cashIn + $cashOut)) * 100) : 50 ?>%; background:var(--danger)"></div></div>

        <div class="detail-row" style="margin-top:12px; border-top:1px solid var(--border-default); padding-top:16px;">
          <div class="detail-row-label" style="font-weight:700; color:var(--text-primary);">
            <i class="fa-solid fa-equals"></i>
            <?= $lang=='ar' ? 'الرصيد الصافي' : 'Net Balance' ?>
          </div>
          <div class="detail-row-value" style="font-size:1.15rem; color: <?= $cashBalance >= 0 ? 'var(--success)' : 'var(--danger)' ?>" id="cashBalance2"><?= number_format($cashBalance, 2) ?></div>
        </div>
      </div>

      <!-- Today's Performance -->
      <div class="detail-card">
        <div class="detail-card-title"><i class="fa-solid fa-chart-line me-2"></i><?= $lang=='ar' ? 'أداء اليوم' : "Today's Performance" ?></div>
        
        <div class="detail-row">
          <div class="detail-row-label">
            <i class="fa-solid fa-money-bill-trend-up" style="color:var(--accent)"></i>
            <?= $lang=='ar' ? 'إجمالي المبيعات' : 'Total Sales' ?>
          </div>
          <div class="detail-row-value val-neutral" id="todaySales2"><?= number_format($todaySales, 2) ?></div>
        </div>

        <div class="detail-row">
          <div class="detail-row-label">
            <i class="fa-solid fa-piggy-bank" style="color:var(--success)"></i>
            <?= $lang=='ar' ? 'صافي الأرباح' : 'Net Profit' ?>
          </div>
          <div class="detail-row-value val-positive" id="todayProfit2"><?= number_format($todayProfit, 2) ?></div>
        </div>
        <div class="mini-bar"><div class="mini-bar-fill" style="width:<?= $todaySales > 0 ? min(100, ($todayProfit / $todaySales) * 100) : 0 ?>%; background: linear-gradient(90deg, var(--success), #6EE7B7)"></div></div>

        <div class="detail-row" style="margin-top:8px;">
          <div class="detail-row-label">
            <i class="fa-solid fa-file-lines" style="color:var(--info)"></i>
            <?= $t['invoices_count'] ?>
          </div>
          <div class="detail-row-value val-neutral" id="todayInvoices2"><?= $todayInvoices ?></div>
        </div>

        <div class="detail-row">
          <div class="detail-row-label">
            <i class="fa-solid fa-calculator" style="color:var(--warning)"></i>
            <?= $lang=='ar' ? 'متوسط قيمة الفاتورة' : 'Avg. Invoice' ?>
          </div>
          <div class="detail-row-value val-neutral" id="avgInvoice"><?= $todayInvoices > 0 ? number_format($todaySales / $todayInvoices, 2) : '0.00' ?></div>
        </div>

        <div class="detail-row">
          <div class="detail-row-label">
            <i class="fa-solid fa-percent" style="color:var(--accent)"></i>
            <?= $lang=='ar' ? 'هامش الربح' : 'Profit Margin' ?>
          </div>
          <div class="detail-row-value" style="color:var(--accent)" id="profitMargin"><?= $todaySales > 0 ? number_format(($todayProfit / $todaySales) * 100, 1) : '0.0' ?>%</div>
        </div>
      </div>
    </div>

    <footer class="page-footer fade-up delay-12">
      &copy; <?= date('Y') ?> Top Accessories POS &mdash; Version 2.0 Pro
    </footer>
  </main>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {

    // === Live Clock ===
    function updateClock() {
        const now = new Date();
        const opts = { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: true };
        document.getElementById('clock').textContent = 
            now.toLocaleTimeString('<?= $lang === 'ar' ? 'ar-EG' : 'en-US' ?>', opts);
    }
    setInterval(updateClock, 1000);
    updateClock();

    // === Mobile Sidebar ===
    const sidebar = document.getElementById('sidebar');
    const overlay = document.getElementById('overlay');
    const menuBtn = document.getElementById('menuBtn');

    function closeSidebar() {
        sidebar.classList.remove('open');
        overlay.classList.remove('show');
    }
    if (menuBtn) menuBtn.addEventListener('click', () => {
        sidebar.classList.add('open');
        overlay.classList.add('show');
    });
    if (overlay) overlay.addEventListener('click', closeSidebar);

    // Close sidebar on nav click (mobile)
    sidebar.querySelectorAll('.nav-link-custom').forEach(link => {
        link.addEventListener('click', () => {
            if (window.innerWidth < 992) closeSidebar();
        });
    });

    // === Theme Toggle ===
    const themeBtn = document.getElementById('themeBtn');
    const body = document.body;
    const themeIcon = themeBtn.querySelector('i');

    themeBtn.addEventListener('click', () => {
        const isLight = body.classList.toggle('light');
        themeIcon.className = isLight ? 'fa-solid fa-moon' : 'fa-solid fa-sun';
        document.cookie = "bo_theme=" + (isLight ? 'light' : 'dark') + "; path=/; max-age=" + (86400 * 365);
        localStorage.setItem('bo_theme', isLight ? 'light' : 'dark');
    });

    // === Animated Number Counter ===
    function animateValue(el, start, end, duration) {
        const isDecimal = String(end).includes('.');
        const startTime = performance.now();
        function update(currentTime) {
            const elapsed = currentTime - startTime;
            const progress = Math.min(elapsed / duration, 1);
            // Ease out cubic
            const eased = 1 - Math.pow(1 - progress, 3);
            const current = start + (end - start) * eased;
            if (isDecimal) {
                el.textContent = current.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
            } else {
                el.textContent = Math.round(current).toLocaleString();
            }
            if (progress < 1) requestAnimationFrame(update);
        }
        requestAnimationFrame(update);
    }

    // === AJAX Stats ===
    const ajaxUrl = 'dashboard.php?ajax_stats=1&lang=<?= $lang ?>';
    let isFirstFetch = true;

    async function fetchStats() {
        try {
            const res = await fetch(ajaxUrl);
            const data = await res.json();
            if (!data.ok) return;

            const dur = isFirstFetch ? 800 : 500;
            isFirstFetch = false;

            // Sales
            const salesEl = document.getElementById('todaySales');
            const prevSales = parseFloat(salesEl.textContent.replace(/,/g, '')) || 0;
            animateValue(salesEl, prevSales, data.todaySales, dur);

            // Profit
            const profitEl = document.getElementById('todayProfit2');
            const prevProfit = parseFloat(profitEl.textContent.replace(/,/g, '')) || 0;
            animateValue(profitEl, prevProfit, data.todayProfit, dur);

            document.getElementById('todaySales2').textContent = data.todaySales.toLocaleString(undefined, { minimumFractionDigits: 2 });

            // Invoices
            document.getElementById('todayInvoices').textContent = data.todayInvoices;
            document.getElementById('todayInvoices2').textContent = data.todayInvoices;

            // Avg Invoice
            const avg = data.todayInvoices > 0 ? (data.todaySales / data.todayInvoices) : 0;
            document.getElementById('avgInvoice').textContent = avg.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });

            // Profit Margin
            const margin = data.todaySales > 0 ? ((data.todayProfit / data.todaySales) * 100) : 0;
            document.getElementById('profitMargin').textContent = margin.toFixed(1) + '%';

            // Products
            const prodEl = document.getElementById('totalProducts');
            const prevProd = parseInt(prodEl.textContent.replace(/,/g, '')) || 0;
            animateValue(prodEl, prevProd, data.totalProducts, dur);

            document.getElementById('lowStock').textContent = '<?= $t['low_stock'] ?> (' + data.lowStockCount + ')';

            // Customers
            const custEl = document.getElementById('totalCustomers');
            const prevCust = parseInt(custEl.textContent.replace(/,/g, '')) || 0;
            animateValue(custEl, prevCust, data.totalCustomers, dur);

            // Cash
            const cashEl = document.getElementById('cashBalance');
            const prevCash = parseFloat(cashEl.textContent.replace(/,/g, '')) || 0;
            animateValue(cashEl, prevCash, data.cashBalance, dur);
            cashEl.style.color = data.cashBalance >= 0 ? 'var(--success)' : 'var(--danger)';

            const cashEl2 = document.getElementById('cashBalance2');
            cashEl2.textContent = data.cashBalance.toLocaleString(undefined, { minimumFractionDigits: 2 });
            cashEl2.style.color = data.cashBalance >= 0 ? 'var(--success)' : 'var(--danger)';

            document.getElementById('cashIn').textContent = data.cashIn.toLocaleString(undefined, { minimumFractionDigits: 2 });
            document.getElementById('cashOut').textContent = data.cashOut.toLocaleString(undefined, { minimumFractionDigits: 2 });

            // Update mini bars
            const totalFlow = data.cashIn + data.cashOut;
            if (totalFlow > 0) {
                const inPct = Math.min(100, (data.cashIn / totalFlow) * 100);
                const outPct = Math.min(100, (data.cashOut / totalFlow) * 100);
                const bars = document.querySelectorAll('.mini-bar-fill');
                if (bars[0]) bars[0].style.width = inPct + '%';
                if (bars[1]) bars[1].style.width = outPct + '%';
            }
            // Profit bar
            if (data.todaySales > 0) {
                const profitPct = Math.min(100, (data.todayProfit / data.todaySales) * 100);
                const bars = document.querySelectorAll('.mini-bar-fill');
                if (bars[2]) bars[2].style.width = profitPct + '%';
            }

            document.getElementById('lastUpdate').innerHTML = '<i class="fa-regular fa-clock"></i> <?= $t['updated'] ?>: ' + data.time;

        } catch(err) {
            console.error('Stats fetch error:', err);
        }
    }

    // Initial fetch after a short delay (let page animations finish)
    setTimeout(fetchStats, 1500);
    // Then every 8 seconds
    setInterval(fetchStats, 8000);

});
</script>
</body>
</html>