<!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=5.0" />
  <meta http-equiv="X-Content-Type-Options" content="nosniff" />
  <meta name="referrer" content="strict-origin-when-cross-origin" />
  <meta name="theme-color" content="#090a0f" />

  <title>بلاي زون برو — نظام إدارة الصالات</title>

  <!-- Google Fonts: Cairo, Orbitron, Space Grotesk -->
  <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@400;500;600;700;800;900&family=Orbitron:wght@600;700;800;900&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet" />

  <!-- Lucide Icons -->
  <script src="https://unpkg.com/lucide@latest"></script>

  <!-- Dual-path stylesheet reference (root + relative fallback) -->
  <link rel="stylesheet" href="/style.css?v=compact_btn_v8" />
  <link rel="stylesheet" href="style.css?v=compact_btn_v8" />

  <!-- Critical Theme & Anti-FOUC Protective Styling -->
  <style>
    :root {
      --bg-deep: #080c16;
      --bg-surface: #0e1424;
      --border-cyan: rgba(2, 132, 199, 0.3);
      --accent-cyan: #0284c7;
      --text-primary: #ffffff;
      --text-muted: #64748b;
    }
    *, *::before, *::after {
      box-sizing: border-box;
    }
    html, body {
      background-color: #080c16 !important;
      color: #ffffff !important;
      font-family: 'Cairo', system-ui, -apple-system, sans-serif !important;
      margin: 0;
      padding: 0;
      min-height: 100vh;
      direction: rtl;
    }
    /* Guarantee modals and overlays never render unstyled in document flow */
    .modal-overlay {
      display: none !important;
      position: fixed;
      inset: 0;
      z-index: 10000;
    }
    .modal-overlay.active {
      display: flex !important;
    }
    .subscription-expired-overlay {
      display: none !important;
    }
    .subscription-warning-banner {
      display: none !important;
    }
  
    /* High-End Commercial SaaS Auth Card Styling */
    .auth-landing-view {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #090a0f !important;
      position: fixed;
      inset: 0;
      z-index: 99999;
      overflow-y: auto;
      padding: 1.5rem;
    }
    .auth-card {
      width: 100%;
      max-width: 420px;
      background: #111319;
      border: 1px solid #1e222d;
      border-radius: 12px;
      padding: 2.25rem 2rem;
      box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.04);
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
    }
    .auth-header {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      margin-bottom: 1.75rem;
    }
    .auth-logo-badge {
      width: 52px;
      height: 52px;
      border-radius: 10px;
      background: #161a24;
      border: 1px solid #23293a;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #2563eb;
      margin-bottom: 1rem;
    }
    .auth-logo-badge i, .auth-logo-badge svg {
      width: 26px;
      height: 26px;
    }
    .auth-title {
      font-size: 1.35rem;
      font-weight: 700;
      letter-spacing: 0.5px;
      color: #f8fafc;
      margin: 0 0 0.35rem 0;
      font-family: inherit;
    }
    .auth-subtitle {
      font-size: 0.85rem;
      color: #94a3b8;
      margin: 0;
      line-height: 1.4;
    }
    .auth-form {
      display: flex;
      flex-direction: column;
      gap: 1.1rem;
      width: 100%;
    }
    .auth-field {
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
      text-align: right;
    }
    .auth-field label {
      font-size: 0.82rem;
      font-weight: 600;
      color: #cbd5e1;
    }
    .auth-input-wrap {
      position: relative;
      display: flex;
      align-items: center;
    }
    .auth-input-wrap > i, .auth-input-wrap > svg:not(.auth-toggle-svg) {
      position: absolute;
      right: 0.9rem;
      width: 18px;
      height: 18px;
      color: #64748b;
      pointer-events: none;
    }
    .auth-input-wrap input {
      width: 100%;
      height: 42px;
      background: #0b0d13;
      border: 1px solid #212634;
      border-radius: 8px;
      color: #f8fafc;
      font-size: 0.9rem;
      padding: 0 2.5rem 0 2.5rem;
      font-family: inherit;
      transition: border-color 0.15s ease, box-shadow 0.15s ease;
    }
    .auth-input-wrap input:focus {
      outline: none;
      border-color: #2563eb;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    }
    .auth-input-wrap input::placeholder {
      color: #475569;
    }
    .auth-toggle-pass {
      position: absolute;
      left: 0.75rem;
      background: transparent;
      border: none;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      height: 100%;
    }
    .auth-toggle-pass:hover {
      color: #cbd5e1;
    }
    .auth-actions-row {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-top: -0.25rem;
    }
    .auth-forgot-link {
      font-size: 0.78rem;
      color: #94a3b8;
      text-decoration: none;
      transition: color 0.15s ease;
    }
    .auth-forgot-link:hover {
      color: #60a5fa;
      text-decoration: underline;
    }
    .btn-auth-submit {
      width: 100%;
      height: 42px;
      background: #2563eb;
      color: #ffffff;
      border: 1px solid #1d4ed8;
      border-radius: 8px;
      font-size: 0.92rem;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      transition: background-color 0.15s ease, border-color 0.15s ease;
      margin-top: 0.4rem;
    }
    .btn-auth-submit:hover {
      background: #1d4ed8;
      border-color: #1e40af;
    }
    .btn-auth-submit:active {
      background: #1e40af;
    }
    .btn-auth-submit:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }
    .auth-footer-note {
      text-align: center;
      font-size: 0.75rem;
      color: #64748b;
      margin-top: 0.75rem;
      margin-bottom: 0;
    }
  </style>
</head>
<body>

  <!-- Subscription Expired Fullscreen Lock Overlay -->
  <div class="subscription-expired-overlay" id="subscriptionExpiredOverlay" style="display: none;">
    <div class="expired-lock-card">
      <div class="expired-lock-icon">
        <i data-lucide="lock"></i>
      </div>
      <h2 class="expired-lock-title">تم قفل النظام — انتهى الاشتراك الشهري</h2>
      <p class="expired-lock-desc">
        انتهت صلاحية اشتراك هذه الصالة في نظام <strong>PLAYZONE PRO</strong>. تم إيقاف التايمرات والعمليات التشغيلية حتى سداد وتجديد الاشتراك.
      </p>
      <div class="expired-price-tag">
        <span>التفعيل بعد مراجعة إثبات السداد بواسطة إدارة المنصة</span>
        <span id="expiredLoungeNameTag">اسم الصالة</span>
      </div>
      <div style="display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap;">
        <button class="btn-modal-action btn-confirm-checkout" onclick="openOwnerDashboardModal('dashTabSubscription')" style="background: var(--accent-cyan); color: #000; font-weight: 700;">
          <i data-lucide="receipt"></i>
          <span>سداد الاشتراك / إرسال إثبات الدفع</span>
        </button>
        <button class="btn-modal-action btn-secondary" onclick="contactPlatformAdminWhatsApp()" style="background: rgba(34, 197, 94, 0.15); border-color: #22c55e; color: #4ade80;">
          <i data-lucide="message-circle"></i>
          <span>تواصل مع الإدارة (01061905411)</span>
        </button>
      </div>
    </div>
  </div>

  <!-- =========================================================================
       SAAS CLIENT LOGIN VIEW — تسجيل دخول الصالة
       ========================================================================= -->
  <div class="auth-landing-view" id="authLandingView" style="display: none;">
    <div class="auth-card" id="neumorphicCard">
      <!-- Header / Brand -->
      <div class="auth-header">
        <div class="auth-logo-badge">
          <i data-lucide="gamepad-2"></i>
        </div>
        <h1 class="auth-title" id="neumorphicTitle">PLAYZONE PRO</h1>
        <p class="auth-subtitle" id="neumorphicSubtitle">تسجيل دخول الصالة</p>
      </div>

      <!-- Secure Login Form -->
      <form class="auth-form" id="authLoginForm" onsubmit="event.preventDefault(); handleUserLogin();">
        <div class="auth-field">
          <label for="loginUsername">اسم المستخدم أو رقم الهاتف</label>
          <div class="auth-input-wrap">
            <i data-lucide="user"></i>
            <input type="text" id="loginUsername" placeholder="أدخل اسم المستخدم أو الهاتف" required autocomplete="username" />
          </div>
        </div>

        <div class="auth-field">
          <label for="loginPassword">كلمة المرور</label>
          <div class="auth-input-wrap">
            <i data-lucide="lock"></i>
            <input type="password" id="loginPassword" placeholder="••••••••••••" required autocomplete="current-password" />
            <button type="button" class="auth-toggle-pass" onclick="togglePasswordVisibility('loginPassword', this)" title="إظهار / إخفاء كلمة المرور">
              <svg class="auth-toggle-svg" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>
            </button>
          </div>
        </div>

        <div class="auth-actions-row">
          <a href="#" onclick="event.preventDefault(); contactPlatformAdminWhatsApp();" class="auth-forgot-link">
            نسيت كلمة المرور؟ تواصل مع الإدارة
          </a>
        </div>

        <button type="submit" class="btn-auth-submit" id="btnLoginSubmit">
          <i data-lucide="log-in" style="width: 16px; height: 16px;"></i>
          <span>تسجيل الدخول</span>
        </button>

        <p class="auth-footer-note">يتم تزويد بيانات الدخول من الإدارة المركزية للمنصة</p>
      </form>
    </div>
  </div>

  <!-- =========================================================================
       CASHIER / SHIFT VIEW — الواجهة الرئيسية للعامل في الشيفت
       ========================================================================= -->
  <div class="app-main-wrapper" id="appMainWrapper" style="display: none;">

    <!-- Expiring Soon Warning Banner -->
    <div class="subscription-warning-banner" id="subscriptionWarningBanner" style="display: none;">
      <div>
        <i data-lucide="alert-triangle" style="width: 16px; height: 16px; display: inline-block; vertical-align: middle;"></i>
        <span id="subscriptionWarningText">⚠️ تنبيه: ينتهي اشتراك الصالة الشهري خلال 2 أيام!</span>
      </div>
      <button class="btn-role-nav" onclick="openSubscriptionTabModal()">تجديد الاشتراك (300 ج)</button>
    </div>

    <!-- User & Role Top Bar -->
    <div class="user-role-bar" id="userRoleBar">
      <div class="user-info-badge" onclick="openShiftSwitchModal()" style="cursor: pointer;" title="اضغط لتبديل شفت الكاشير">
        <i data-lucide="user-check"></i>
        <span id="currentUserNameDisplay">اسم المستخدم</span>
        <span class="role-pill owner" id="currentUserRoleBadge">المستخدم</span>
        <span style="color: var(--text-muted); font-size: 0.7rem;">|</span>
        <span id="currentLoungeNameDisplay" style="color: var(--accent-cyan); font-weight: 700; cursor: pointer;" onclick="event.stopPropagation(); openLoungeSettingsModal();" title="اضغط لتعديل اسم المكان">اسم الصالة</span>
      </div>
      <div class="role-actions-group">
        <button class="btn-role-nav btn-notif-wrap" id="btnNotifications" onclick="openNotificationsModal()" title="التنبيهات والإشعارات">
          <i data-lucide="bell"></i>
          <span>الإشعارات</span>
          <span class="notif-badge-pill" id="notifUnreadBadge" style="display: none;">0</span>
        </button>
        <button class="btn-role-nav" id="btnOpenLoungeSettings" onclick="openLoungeSettingsModal()" title="تعديل اسم الصالة والمالك">
          <i data-lucide="store"></i>
          <span>بيانات المكان</span>
        </button>
        <button class="btn-role-nav" id="btnOpenOwnerDash" onclick="openOwnerDashboardModal()" style="display: none;">
          <i data-lucide="layout-dashboard"></i>
          <span>لوحة المالك والمشتريات</span>
        </button>
        <button class="btn-role-nav" id="btnLogout" onclick="handleUserLogout()" title="تسجيل الخروج من النظام" style="border-color: rgba(239, 68, 68, 0.4); color: #fca5a5;">
          <i data-lucide="log-out"></i>
          <span>خروج</span>
        </button>
      </div>
    </div>

    <!-- Top Shift Stats Header -->
    <header class="cashier-header">
      <div class="cafe-brand-row">
        <div class="cafe-logo-wrap">
          <i data-lucide="gamepad-2"></i>
          <div>
            <h1 class="cafe-name" id="displayCafeName">PLAYZONE PRO</h1>
            <span class="cafe-branch">شيفت الكاشير الحالي: <strong id="currentShiftWorker" style="color: var(--accent-cyan); cursor: pointer; text-decoration: underline;" onclick="openShiftSwitchModal()" title="اضغط لتبديل الشفت">—</strong> <button type="button" class="btn-quick-shift-inline" onclick="openShiftSwitchModal()" title="تبديل الشفت"><i data-lucide="repeat"></i> <span>تبديل الشفت</span></button></span>
          </div>
        </div>
        <div class="header-action-btns">
          <button class="btn-header-action" onclick="openShiftCloseModal()">
            <i data-lucide="lock"></i>
            <span>تقفيل الشيفت</span>
          </button>
          <button class="btn-header-action btn-secondary" onclick="openExpenseModal()">
            <i data-lucide="wallet"></i>
            <span>مصاريف</span>
          </button>
        </div>
      </div>

      <!-- Shift Operational Telemetry Strip (Cash Figures Hidden for Privacy) -->
      <div class="shift-telemetry-row">
        <div class="shift-stat-box">
          <span class="stat-lbl">أجهزة قيد التشغيل (مشغولة) 🎮</span>
          <div class="stat-val-row">
            <span class="stat-num text-cyan" id="statActiveConsoles">0</span>
            <span class="stat-sub">/ <span id="statTotalConsoles">0</span> جهاز</span>
          </div>
        </div>
        <div class="shift-stat-box">
          <span class="stat-lbl">أجهزة شاغرة ومتاحة للزبائن 🟢</span>
          <div class="stat-val-row">
            <span class="stat-num text-green" id="statAvailableConsoles">0</span>
            <span class="stat-sub">جاهز للتشغيل</span>
          </div>
        </div>
        <div class="shift-stat-box">
          <span class="stat-lbl">نسبة إشغال الصالة الحالية ⚡</span>
          <div class="stat-val-row">
            <span class="stat-num text-purple" id="statOccupancyRate">0%</span>
            <span class="stat-sub">معدل الإشغال</span>
          </div>
        </div>

        <!-- Hidden financial telemetry elements (accessible to shift calculations & owner ledger) -->
        <span id="statTimeRevenue" style="display: none;">0</span>
        <span id="statCafeRevenue" style="display: none;">0</span>
        <span id="statTotalDrawerCash" style="display: none;">0</span>
      </div>
    </header>

    <!-- Filter Categories Bar + Add Device Button -->
    <div class="filter-controls-container">
      <div class="category-chips-scroll" id="categoryChipsBar">
        <!-- Injected dynamically -->
      </div>
      <button class="btn-add-device" onclick="openAddDeviceModal()">
        <i data-lucide="plus-circle"></i>
        <span>إضافة جهاز جديد</span>
      </button>
    </div>

    <!-- Main Consoles Grid -->
    <main class="consoles-grid" id="consolesGrid">
      <!-- Injected Dynamically by app.js -->
    </main>

  </div><!-- /app-main-wrapper -->


  <!-- =========================================================================
       MODALS
       ========================================================================= -->

  <!-- 1. Start Session Modal -->
  <div class="modal-overlay" id="modalStartSession" onclick="if(event.target===this) closeModal('modalStartSession')">
    <div class="modal-card">
      <div class="modal-header">
        <div class="modal-title-group">
          <i data-lucide="play-circle"></i>
          <h3 id="startModalDeviceTitle">بدء وقت اللعب</h3>
        </div>
        <button class="modal-close-btn" onclick="closeModal('modalStartSession')"><i data-lucide="x"></i></button>
      </div>

      <div class="modal-body">
        <!-- Play Mode Selection -->
        <div class="form-group">
          <label>نوع ونظام اللعب:</label>
          <div class="play-mode-selector">
            <button class="btn-mode active" data-mode="single" onclick="selectPlayMode('single')">
              <span class="mode-icon"><i data-lucide="user"></i></span>
              <span class="mode-title">فردي (Single)</span>
              <small class="mode-price" id="modePriceSingle">— ج / س</small>
            </button>
            <button class="btn-mode" data-mode="multi" onclick="selectPlayMode('multi')">
              <span class="mode-icon"><i data-lucide="users"></i></span>
              <span class="mode-title">زوجي (2 دراعات)</span>
              <small class="mode-price" id="modePriceMulti">— ج / س</small>
            </button>
            <button class="btn-mode" data-mode="quad" onclick="selectPlayMode('quad')">
              <span class="mode-icon"><i data-lucide="users-round"></i></span>
              <span class="mode-title">مالتي (4 دراعات)</span>
              <small class="mode-price" id="modePriceQuad">— ج / س</small>
            </button>
          </div>
        </div>

        <!-- Session Duration Mode -->
        <div class="form-group">
          <label>نظام الوقت:</label>
          <div class="time-system-selector">
            <label class="radio-label">
              <input type="radio" name="timeSystem" value="open" checked onchange="toggleTimeDurationInput(false)" />
              <span>وقت مفتوح (يعد للأمام حتى إيقافه)</span>
            </label>
            <label class="radio-label">
              <input type="radio" name="timeSystem" value="fixed" onchange="toggleTimeDurationInput(true)" />
              <span>وقت محدد مسبقاً (جرس تنبيه عند الانتهاء)</span>
            </label>
          </div>
        </div>

        <div class="form-group" id="fixedDurationWrap" style="display: none;">
          <label>مدة اللعب المحددة:</label>
          <select id="fixedDurationSelect">
            <option value="30">نصف ساعة (30 دقيقة)</option>
            <option value="60" selected>ساعة كاملة (60 دقيقة)</option>
            <option value="90">ساعة ونصف (90 دقيقة)</option>
            <option value="120">ساعتان (120 دقيقة)</option>
            <option value="180">ثلاث ساعات (180 دقيقة)</option>
          </select>
        </div>

        <div class="form-group">
          <label>اسم الزبون (اختياري):</label>
          <input type="text" id="startCustomerName" placeholder="اسم الزبون أو رقم الطاولة (اختياري)" />
        </div>
      </div>

      <div class="modal-footer">
        <button class="btn-modal-action btn-confirm-start" id="btnStartSessionConfirm" onclick="confirmStartSession()">
          <i data-lucide="play"></i>
          <span>بدء تشغيل الجهاز الآن ⚡</span>
        </button>
      </div>
    </div>
  </div>

  <!-- 2. Canteen Quick Order Modal -->
  <div class="modal-overlay" id="modalCanteen" onclick="if(event.target===this) closeModal('modalCanteen')">
    <div class="modal-card">
      <div class="modal-header">
        <div class="modal-title-group">
          <i data-lucide="coffee"></i>
          <h3 id="canteenModalTitle">بوفيه ومشروبات</h3>
        </div>
        <button class="modal-close-btn" onclick="closeModal('modalCanteen')"><i data-lucide="x"></i></button>
      </div>

      <div class="modal-body">
        <div class="canteen-items-grid" id="canteenItemsGrid">
          <!-- Injected by JS -->
        </div>

        <div class="current-device-orders-box">
          <h4>الطلبات المضافة لهذه الجلسة:</h4>
          <div class="orders-list-summary" id="currentDeviceOrdersList">
          </div>
        </div>

        <div class="canteen-manage-shortcut">
          <button type="button" class="btn-link-mgr" onclick="closeModal('modalCanteen'); openCanteenManagerModal();">
            <i data-lucide="settings-2"></i>
            <span>تعديل أسعار البوفيه وتحديث السوق ⚡</span>
          </button>
        </div>
      </div>

      <div class="modal-footer">
        <button class="btn-modal-action btn-confirm-start" id="btnCanteenSave" onclick="closeModal('modalCanteen')">
          <i data-lucide="check"></i>
          <span>حفظ ومتابعة اللعب</span>
        </button>
      </div>
    </div>
  </div>

  <!-- 3. Checkout & Invoice Modal -->
  <div class="modal-overlay" id="modalCheckout" onclick="if(event.target===this) closeModal('modalCheckout')">
    <div class="modal-card invoice-card">
      <div class="modal-header">
        <div class="modal-title-group">
          <i data-lucide="receipt"></i>
          <h3>فاتورة الحساب النهائي</h3>
        </div>
        <button class="modal-close-btn" onclick="closeModal('modalCheckout')"><i data-lucide="x"></i></button>
      </div>

      <div class="modal-body">
        <div class="invoice-paper" id="invoicePaper">
          <div class="invoice-top-brand">
            <span class="inv-logo">PLAYZONE PRO</span>
            <h4 id="invCafeTitle">—</h4>
            <span class="inv-date" id="invDateTime">—</span>
          </div>

          <div class="inv-divider"></div>

          <div class="inv-details-row">
            <span>الجهاز:</span>
            <strong id="invDeviceName">—</strong>
          </div>
          <div class="inv-details-row">
            <span>نظام اللعب:</span>
            <span id="invPlayMode">—</span>
          </div>
          <div class="inv-details-row">
            <span>مدة اللعب الفعالة:</span>
            <strong id="invDuration">—</strong>
          </div>
          <div class="inv-details-row">
            <span>حساب وقت اللعب:</span>
            <span id="invTimeCost">—</span>
          </div>

          <div class="inv-canteen-list" id="invCanteenList"></div>

          <div class="inv-divider"></div>

          <div class="inv-total-row">
            <span>الإجمالي المطلوب:</span>
            <strong class="inv-grand-total" id="invGrandTotal">0 ج</strong>
          </div>
        </div>

        <div class="invoice-actions-row">
          <button class="btn-inv-action" onclick="sendInvoiceWhatsApp()">
            <i data-lucide="message-circle"></i>
            <span>واتساب</span>
          </button>
          <button class="btn-inv-action" onclick="printInvoice()">
            <i data-lucide="printer"></i>
            <span>طباعة</span>
          </button>
        </div>
      </div>

      <div class="modal-footer">
        <button class="btn-modal-action btn-confirm-checkout" id="btnCheckoutConfirm" onclick="confirmCheckoutAndFreeDevice()">
          <i data-lucide="check-circle-2"></i>
          <span>تم استلام الكاش وتحرير الجهاز 🟢</span>
        </button>
      </div>
    </div>
  </div>

  <!-- 4. Time Extension Modal -->
  <div class="modal-overlay" id="modalExtendTime" onclick="if(event.target===this) closeModal('modalExtendTime')">
    <div class="modal-card">
      <div class="modal-header">
        <div class="modal-title-group">
          <i data-lucide="timer"></i>
          <h3 id="extendTimeModalTitle">تمديد وقت اللعب</h3>
        </div>
        <button class="modal-close-btn" onclick="closeModal('modalExtendTime')"><i data-lucide="x"></i></button>
      </div>

      <div class="modal-body">
        <div class="extend-info-box" id="extendCurrentInfo">
          <!-- Injected by JS: current session info -->
        </div>

        <div class="form-group">
          <label>اختر مدة التمديد:</label>
          <div class="extend-options-grid" id="extendOptionsGrid">
            <button class="btn-extend-option active" data-minutes="15" onclick="selectExtendDuration(15)">
              <span class="extend-val">15</span>
              <span class="extend-unit">دقيقة</span>
            </button>
            <button class="btn-extend-option" data-minutes="30" onclick="selectExtendDuration(30)">
              <span class="extend-val">30</span>
              <span class="extend-unit">دقيقة</span>
            </button>
            <button class="btn-extend-option" data-minutes="60" onclick="selectExtendDuration(60)">
              <span class="extend-val">60</span>
              <span class="extend-unit">دقيقة</span>
            </button>
            <button class="btn-extend-option" data-minutes="90" onclick="selectExtendDuration(90)">
              <span class="extend-val">90</span>
              <span class="extend-unit">دقيقة</span>
            </button>
          </div>
        </div>

        <div class="form-group">
          <label>أو أدخل عدد الدقائق يدوياً:</label>
          <input type="number" id="customExtendMinutes" placeholder="مثلاً: 45" min="1" max="600" />
        </div>
      </div>

      <div class="modal-footer">
        <button class="btn-modal-action btn-confirm-start" id="btnExtendTimeConfirm" onclick="confirmExtendTime()">
          <i data-lucide="plus-circle"></i>
          <span>تأكيد تمديد الوقت</span>
        </button>
      </div>
    </div>
  </div>

  <!-- 5. Add New Device Modal -->
  <div class="modal-overlay" id="modalAddDevice" onclick="if(event.target===this) closeModal('modalAddDevice')">
    <div class="modal-card">
      <div class="modal-header">
        <div class="modal-title-group">
          <i data-lucide="monitor-speaker"></i>
          <h3>إضافة جهاز / غرفة جديدة</h3>
        </div>
        <button class="modal-close-btn" onclick="closeModal('modalAddDevice')"><i data-lucide="x"></i></button>
      </div>

      <div class="modal-body">
        <div class="form-group">
          <label>اسم الجهاز / الغرفة:</label>
          <input type="text" id="newDeviceName" placeholder="اسم الجهاز أو الغرفة" />
        </div>

        <div class="form-group">
          <label>نوع الجهاز:</label>
          <select id="newDeviceType">
            <option value="ps5">PlayStation 5</option>
            <option value="ps4">PlayStation 4</option>
            <option value="vip">روم VIP</option>
            <option value="billiards">بلياردو</option>
          </select>
        </div>

        <div class="form-group">
          <label>سعر الساعة — فردي (جنيه):</label>
          <input type="number" id="newDeviceRateSingle" placeholder="السعر الفعلي" min="0" />
        </div>
        <div class="form-group">
          <label>سعر الساعة — زوجي (جنيه):</label>
          <input type="number" id="newDeviceRateMulti" placeholder="السعر الفعلي" min="0" />
        </div>
        <div class="form-group">
          <label>سعر الساعة — 4 دراعات (جنيه):</label>
          <input type="number" id="newDeviceRateQuad" placeholder="السعر الفعلي" min="0" />
        </div>
      </div>

      <div class="modal-footer">
        <button class="btn-modal-action btn-confirm-start" id="btnAddDeviceConfirm" onclick="confirmAddDevice()">
          <i data-lucide="plus"></i>
          <span>إضافة الجهاز</span>
        </button>
      </div>
    </div>
  </div>

  <!-- 6. Shift Close Modal -->
  <div class="modal-overlay" id="modalShiftClose" onclick="if(event.target===this) closeModal('modalShiftClose')">
    <div class="modal-card">
      <div class="modal-header">
        <div class="modal-title-group">
          <i data-lucide="shield-alert"></i>
          <h3>تقفيل وتصفية شيفت الكاشير</h3>
        </div>
        <button class="modal-close-btn" onclick="closeModal('modalShiftClose')"><i data-lucide="x"></i></button>
      </div>

      <div class="modal-body">
        <div class="shift-audit-box">
          <div class="audit-row">
            <span>إجمالي دخل وقت الأجهزة:</span>
            <strong id="shiftCloseTimeRev">0 ج</strong>
          </div>
          <div class="audit-row">
            <span>إجمالي مبيعات البوفيه:</span>
            <strong id="shiftCloseCafeRev">0 ج</strong>
          </div>
          <div class="audit-row text-danger">
            <span>إجمالي المصاريف:</span>
            <strong id="shiftCloseExpenses">0 ج</strong>
          </div>
          <div class="audit-row total-expected">
            <span>صافي الكاش المفروض في الدرج:</span>
            <strong class="text-green" id="shiftCloseExpectedNet">0 ج</strong>
          </div>
        </div>

        <!-- Linked Owner Phone Card -->
        <div class="shift-owner-phone-card" style="background: rgba(37, 211, 102, 0.08); border: 1px solid rgba(37, 211, 102, 0.35); border-radius: var(--radius-sm); padding: 0.85rem; margin-bottom: 1rem;">
          <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.45rem;">
            <label style="display: flex; align-items: center; gap: 6px; font-weight: 700; color: #25D366; font-size: 0.86rem; margin: 0;">
              <i data-lucide="message-circle" style="width: 17px; height: 17px;"></i>
              <span>رقم صاحب الصالة (المستلم للتقرير عبر واتساب):</span>
            </label>
            <span id="shiftClosePhoneStatusBadge" class="badge" style="background: rgba(37, 211, 102, 0.2); color: #25D366; font-size: 0.72rem; padding: 2px 8px; border-radius: 999px; font-weight: 700;">
              مربوط بالسيستم ✅
            </span>
          </div>
          <div style="position: relative;">
            <input type="text" id="shiftCloseOwnerPhone" placeholder="أدخل رقم واتساب صاحب الصالة (مثال: 01012345678)" style="width: 100%; direction: ltr; text-align: right; padding-right: 2.2rem; font-weight: 600;" oninput="onShiftClosePhoneChanged()" />
            <i data-lucide="phone" style="position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--text-muted); pointer-events: none;"></i>
          </div>
          <small style="color: var(--text-secondary); font-size: 0.76rem; display: block; margin-top: 5px;">
            💡 سيتم إرسال تقرير تقفيل الشيفت مفصلاً ومطابقة الدرج آلياً عبر واتساب إلى هذا الرقم.
          </small>
        </div>

        <div class="form-group">
          <label>المبلغ الفعلي في درج النقدية:</label>
          <input type="number" id="actualCashInDrawer" placeholder="أدخل المبلغ الفعلي الموجود في الدرج..." oninput="calcShiftDiscrepancy()" />
        </div>

        <!-- Live Discrepancy Status Card -->
        <div id="shiftDiscrepancyBadge" style="display: none; padding: 0.65rem 0.85rem; border-radius: var(--radius-sm); margin-bottom: 0.85rem; font-size: 0.85rem; font-weight: 600; text-align: center;">
        </div>

        <div class="form-group">
          <label>ملاحظات تسليم الشيفت:</label>
          <textarea id="shiftHandoverNotes" rows="2" placeholder="أي ملاحظات أو نواقص أو تسليم للوردية القادمة..."></textarea>
        </div>
      </div>

      <div class="modal-footer" style="display: flex; flex-direction: column; gap: 0.5rem;">
        <button class="btn-modal-action" id="btnShiftCloseConfirm" onclick="confirmShiftClosing()" style="background: linear-gradient(135deg, #25D366, #128C7E); color: #fff; font-weight: 700; border: none; padding: 0.85rem 1.25rem; font-size: 0.95rem; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; width: 100%; box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);">
          <i data-lucide="send"></i>
          <span>إرسال التقرير لواتساب صاحب الصالة وتصفية الشيفت</span>
        </button>
        <button class="btn-modal-action" id="btnShiftCloseLocalOnly" onclick="confirmShiftClosing({ skipWhatsApp: true })" style="background: rgba(255, 255, 255, 0.06); color: #cbd5e1; font-size: 0.78rem; border: 1px solid rgba(255, 255, 255, 0.1); padding: 0.45rem; border-radius: var(--radius-sm); width: 100%; cursor: pointer;">
          تقفيل الشيفت محلياً بدون إرسال واتساب
        </button>
      </div>
    </div>
  </div>

  <!-- 7. Expense Modal -->
  <div class="modal-overlay" id="modalExpense" onclick="if(event.target===this) closeModal('modalExpense')">
    <div class="modal-card">
      <div class="modal-header">
        <div class="modal-title-group">
          <i data-lucide="receipt"></i>
          <h3>تسجيل مصاريف الشيفت</h3>
        </div>
        <button class="modal-close-btn" onclick="closeModal('modalExpense')"><i data-lucide="x"></i></button>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label>بيان المنصرف:</label>
          <input type="text" id="expenseReason" placeholder="مثال: كراتين مياه، وجبات عمال..." />
        </div>
        <div class="form-group">
          <label>المبلغ (جنيه):</label>
          <input type="number" id="expenseAmount" placeholder="المبلغ الفعلي" />
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn-modal-action btn-confirm-start" id="btnExpenseConfirm" onclick="submitExpense()">
          <i data-lucide="check"></i>
          <span>خصم من الدرج وحفظ</span>
        </button>
      </div>
    </div>
  </div>

  <!-- 8. Delete Device Confirmation Modal -->
  <div class="modal-overlay" id="modalDeleteDevice" onclick="if(event.target===this) closeModal('modalDeleteDevice')">
    <div class="modal-card">
      <div class="modal-header">
        <div class="modal-title-group">
          <i data-lucide="trash-2"></i>
          <h3>حذف الجهاز</h3>
        </div>
        <button class="modal-close-btn" onclick="closeModal('modalDeleteDevice')"><i data-lucide="x"></i></button>
      </div>
      <div class="modal-body">
        <div class="delete-confirm-box">
          <i data-lucide="alert-triangle" class="delete-warn-icon"></i>
          <p id="deleteDeviceMessage">هل أنت متأكد من حذف هذا الجهاز؟</p>
          <span class="delete-hint">الجهاز لازم يكون فاضي (مفيش جلسة عليه) عشان تقدر تمسحه.</span>
        </div>
      </div>
      <div class="modal-footer delete-footer">
        <button class="btn-modal-action btn-cancel-delete" onclick="closeModal('modalDeleteDevice')">
          <span>إلغاء</span>
        </button>
        <button class="btn-modal-action btn-confirm-delete" id="btnDeleteConfirm" onclick="confirmDeleteDevice()">
          <i data-lucide="trash-2"></i>
          <span>حذف نهائي</span>
        </button>
      </div>
    </div>
  </div>

  <!-- 9. Canteen Price Manager Modal (إدارة وتحديث أسعار البوفيه التلقائية واليدوية) -->
  <div class="modal-overlay" id="modalCanteenManager" onclick="if(event.target===this) closeModal('modalCanteenManager')">
    <div class="modal-card modal-canteen-manager-card">
      <div class="modal-header">
        <div class="modal-title-group">
          <i data-lucide="utensils"></i>
          <h3>إدارة أسعار المأكولات والمشروبات</h3>
        </div>
        <button class="modal-close-btn" onclick="closeModal('modalCanteenManager')"><i data-lucide="x"></i></button>
      </div>

      <div class="modal-body">
        <!-- Market Auto-Sync Panel -->
        <div class="market-sync-box">
          <div class="market-sync-header">
            <div class="sync-icon-wrap">
              <i data-lucide="trending-up"></i>
            </div>
            <div>
              <div class="sync-title">مزامنة أوتوماتيكية مع أسعار السوق</div>
              <span class="sync-desc">تحديث فوري لأسعار البيع لما أسعار الشركات تزيد في السوق</span>
            </div>
          </div>

          <div class="sync-actions-row">
            <button class="btn-sync-market" onclick="syncWithMarketPrices()">
              <i data-lucide="refresh-cw"></i>
              <span>مزامنة أسعار السوق والشركات الآن ⚡</span>
            </button>
            <div class="quick-adjust-group">
              <button class="btn-quick-adjust" onclick="adjustAllCanteenPrices(5)">+5 ج للكل</button>
              <button class="btn-quick-adjust" onclick="adjustAllCanteenPrices(-5)">-5 ج للكل</button>
              <button class="btn-quick-adjust btn-reset" onclick="resetDefaultCanteenPrices()">الافتراضي</button>
            </div>
          </div>
        </div>

        <!-- Items Price List -->
        <div class="canteen-mgr-section-title">
          <span>قائمة الأصناف وأسعار البيع الحالية:</span>
          <span class="items-count" id="canteenTotalItemsCount">11 صنف</span>
        </div>

        <div class="canteen-manager-list" id="canteenManagerItemsList">
          <!-- Injected dynamically by app.js -->
        </div>

        <!-- Add New Canteen Item -->
        <div class="add-canteen-item-box">
          <div class="canteen-mgr-section-title">
            <span>+ إضافة صنف جديد للبوفيه:</span>
          </div>
          <div class="add-item-form-row">
            <input type="text" id="newCanteenName" placeholder="اسم الصنف الجديد" />
            <input type="number" id="newCanteenPrice" placeholder="السعر (ج)" min="1" />
            <button class="btn-add-canteen-item" onclick="addNewCanteenItem()">
              <i data-lucide="plus"></i>
              <span>إضافة</span>
            </button>
          </div>
        </div>
      </div>

      <div class="modal-footer">
        <button class="btn-modal-action btn-confirm-start" onclick="closeModal('modalCanteenManager')">
          <i data-lucide="check"></i>
          <span>حفظ وتطبيق في شاشة الكاشير</span>
        </button>
      </div>
    </div>
  </div>

  <!-- 10. Owner Dashboard & Inventory Manager Modal -->
  <div class="modal-overlay" id="modalOwnerDashboard" onclick="if(event.target===this) closeModal('modalOwnerDashboard')">
    <div class="modal-card modal-owner-card">
      <div class="modal-header">
        <div class="modal-title-group">
          <i data-lucide="layout-dashboard"></i>
          <h3>لوحة تحكم المالك — المخزون والتسعير والتقارير</h3>
        </div>
        <button class="modal-close-btn" onclick="closeModal('modalOwnerDashboard')"><i data-lucide="x"></i></button>
      </div>

      <div class="modal-body">
        <!-- Navigation Tabs -->
        <div class="dashboard-nav-tabs">
          <button class="btn-dash-tab active" data-tab="dashTabStock" onclick="switchDashTab('dashTabStock')">
            <i data-lucide="package"></i>
            <span>المخزون والمنتجات</span>
          </button>
          <button class="btn-dash-tab" data-tab="dashTabPurchases" onclick="switchDashTab('dashTabPurchases')">
            <i data-lucide="boxes"></i>
            <span>المشتريات وتوريد الكراتين</span>
          </button>
          <button class="btn-dash-tab" data-tab="dashTabPricing" onclick="switchDashTab('dashTabPricing')">
            <i data-lucide="calculator"></i>
            <span>التسعير والربح</span>
          </button>
          <button class="btn-dash-tab" data-tab="dashTabReports" onclick="switchDashTab('dashTabReports')">
            <i data-lucide="trending-up"></i>
            <span>التقارير والأرباح</span>
          </button>
          <button class="btn-dash-tab" data-tab="dashTabSalesLog" onclick="switchDashTab('dashTabSalesLog')">
            <i data-lucide="receipt-text"></i>
            <span>سجل المبيعات والحركات 📋</span>
          </button>
          <button class="btn-dash-tab" data-tab="dashTabSubscription" onclick="switchDashTab('dashTabSubscription')">
            <i data-lucide="credit-card"></i>
            <span>الاشتراك والفواتير (300 ج)</span>
          </button>
          <button class="btn-dash-tab" data-tab="dashTabEmployees" onclick="switchDashTab('dashTabEmployees')">
            <i data-lucide="users"></i>
            <span>إدارة الموظفين</span>
          </button>
        </div>

        <!-- TAB 1: Stock & Products -->
        <div class="dash-tab-content active" id="dashTabStock">
          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem;">
            <h4 style="margin: 0; font-size: 0.9rem;">حالة مخزون البوفيه الحالية:</h4>
            <span id="lowStockWarningBadge" style="display: none;" class="badge-stock low">⚠️ يوجد نواقص في المخزن!</span>
          </div>

          <div class="data-table-wrap">
            <table class="data-table">
              <thead>
                <tr>
                  <th>المنتج</th>
                  <th>الفئة</th>
                  <th>الرصيد المتاح</th>
                  <th>الحد الأدنى</th>
                  <th>الحالة</th>
                  <th>إجراءات المخزن</th>
                </tr>
              </thead>
              <tbody id="ownerStockTableBody">
                <!-- Injected by JS -->
              </tbody>
            </table>
          </div>

          <!-- Add New Product Form -->
          <div class="add-canteen-item-box" style="margin-top: 1rem;">
            <div class="canteen-mgr-section-title">
              <span>+ إضافة منتج جديد بمواصفات التسعير والمخزون:</span>
            </div>
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.5rem; margin-top: 0.5rem;">
              <input type="text" id="newOwnerProdName" placeholder="اسم المنتج (مثلاً: بيبسي دايت)" />
              <input type="number" id="newOwnerProdCost" placeholder="سعر التكلفة (ج)" />
              <input type="number" id="newOwnerProdProfit" placeholder="هامش الربح" />
              <input type="number" id="newOwnerProdStock" placeholder="الكمية الأولية" />
              <input type="number" id="newOwnerProdMin" placeholder="حد التنبيه" />
              <button class="btn-add-canteen-item" onclick="submitOwnerCreateProduct()">
                <i data-lucide="plus"></i>
                <span>حفظ المنتج</span>
              </button>
            </div>
          </div>
        </div>

        <!-- TAB 2: Pricing Logic -->
        <div class="dash-tab-content" id="dashTabPricing">
          <div style="background: rgba(0,242,254,0.06); border: 1px solid var(--accent-cyan); border-radius: var(--radius-sm); padding: 0.75rem; margin-bottom: 1rem; font-size: 0.8rem; line-height: 1.5;">
            <strong>قاعدة التسعير الذكية:</strong> سعر البيع = تكلفة السوق المعتمدة + هامش الربح المحدد.<br/>
            <span style="color: var(--text-muted);">يمكنك تغيير التكلفة أو هامش الربح لكل صنف على حدة وسيقوم النظام بتحديث سعر البيع في شاشة الكاشير تلقائياً دون التأثير على الفواتير القديمة.</span>
          </div>

          <div class="data-table-wrap">
            <table class="data-table">
              <thead>
                <tr>
                  <th>المنتج</th>
                  <th>سعر التكلفة (ج)</th>
                  <th>هامش الربح (ج)</th>
                  <th>سعر البيع النهائي (ج)</th>
                  <th>مصدر السعر</th>
                  <th>تعديل</th>
                </tr>
              </thead>
              <tbody id="ownerPricingTableBody">
                <!-- Injected by JS -->
              </tbody>
            </table>
          </div>
        </div>

        <!-- TAB 4: Financial Reports -->
        <div class="dash-tab-content" id="dashTabReports">
          
          <!-- 1. LOCK VIEW -->
          <div id="reportsLockView" style="display: none; flex-direction: column; align-items: center; justify-content: center; min-height: 380px; text-align: center; padding: 2.5rem 1rem;">
            <div class="lock-card" style="max-width: 480px; width: 100%; background: #101728; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-lg); padding: 2.25rem 1.75rem; box-shadow: 0 20px 50px rgba(0,0,0,0.8), 0 0 30px rgba(14,165,233,0.15); margin: 1rem auto;">
              <div style="width: 70px; height: 70px; border-radius: 50%; background: #080d1a; border: 1px solid rgba(14, 165, 233, 0.4); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; box-shadow: 0 0 20px rgba(14, 165, 233, 0.25);">
                <i data-lucide="lock" style="width: 34px; height: 34px; color: var(--accent-cyan);"></i>
              </div>
              <h3 style="color: var(--text-main); font-size: 1.25rem; margin-bottom: 0.5rem; font-weight: 800;">التقارير والأرباح محمية بكلمة المرور 🔒</h3>
              <p style="font-size: 0.84rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 1.5rem;">
                للاطلاع على تفاصيل الأرباح، الإيرادات، وسجلات التقفيل، يرجى إدخال كلمة المرور المحددة لك من قِبل إدارة المنصة.
              </p>

              <div id="reportsPinAlert" style="display: none; width: 100%; padding: 0.65rem 0.85rem; background: rgba(225, 29, 72, 0.1); border: 1px solid rgba(225, 29, 72, 0.3); border-radius: var(--radius-sm); color: var(--accent-red); font-size: 0.82rem; margin-bottom: 1rem; text-align: right;">
                <i data-lucide="alert-circle" style="width: 16px; height: 16px; vertical-align: middle;"></i>
                <span id="reportsPinAlertMsg">كلمة المرور غير صحيحة، يرجى مراجعة إدارة المنصة</span>
              </div>

              <form onsubmit="submitFinancialPin(event, 'reports')" style="width: 100%;">
                <div class="admin-input-wrap" style="position: relative; margin-bottom: 1rem;">
                  <input 
                    type="password" 
                    id="reportsPinInput" 
                    placeholder="أدخل كلمة المرور..." 
                    required 
                    autocomplete="off" 
                    style="width: 100%; height: 46px; background: #080d1a; border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: inset 0 2px 5px rgba(0,0,0,0.6); border-radius: var(--radius-sm); padding: 0 1rem 0 2.75rem; color: #ffffff; font-size: 1rem; text-align: center; letter-spacing: 2px;"
                  />
                  <button type="button" class="btn-toggle-password" onclick="togglePasswordVisibility('reportsPinInput', this)" title="إظهار / إخفاء" style="position: absolute; left: 10px; top: 50%; transform: translateY(-50%); z-index: 50; background: none; border: none; color: #64748b; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 6px;">
                    <i data-lucide="eye"></i>
                  </button>
                </div>
                <button type="submit" class="btn-modal-action btn-confirm-start" style="width: 100%; height: 46px; font-size: 0.95rem; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 0.5rem;">
                  <i data-lucide="key-round"></i>
                  <span>فتح وعرض التقارير 🔓</span>
                </button>
              </form>

              <div style="margin-top: 1.25rem; font-size: 0.76rem; color: var(--text-dim); line-height: 1.5;">
                💡 تم تعيين كلمة المرور من لوحة الإدارة الرئيسية. للاستفسار تواصل مع الدعم: <strong style="color: var(--accent-cyan);">01061905411</strong>
              </div>
            </div>
          </div>

          <!-- 2. UNLOCKED VIEW -->
          <div id="reportsDataView" style="display: block;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem;">
              <div>
                <h4 style="margin: 0; font-size: 0.95rem; font-weight: 800; color: var(--text-main);">📊 التقارير المالية والأرباح:</h4>
                <p style="margin: 0.2rem 0 0; font-size: 0.76rem; color: var(--text-muted);">متابعة دقيقة للأرباح الصافية، الإيرادات، ومطابقة عجز وزيادة النقدية.</p>
              </div>
              <div style="display: flex; align-items: center; gap: 0.5rem;">
                <button type="button" class="btn-role-nav" onclick="loadOwnerReports()" style="background: rgba(14, 165, 233, 0.15); border-color: var(--accent-cyan); color: #00f0ff; font-size: 0.75rem;">
                  <i data-lucide="refresh-cw"></i>
                  <span>تحديث التقارير</span>
                </button>
                <button type="button" class="btn-role-nav" onclick="lockFinancialTabs()" style="background: rgba(244, 63, 94, 0.12); border-color: rgba(244, 63, 94, 0.4); color: #fb7185; font-size: 0.75rem;">
                  <i data-lucide="lock" style="width: 14px; height: 14px;"></i>
                  <span>قفل الصفحة 🔒</span>
                </button>
              </div>
            </div>

            <div class="financial-metrics-grid">
              <div class="fin-metric-card">
                <div class="fin-metric-title">إجمالي المبيعات (Revenue)</div>
                <div class="fin-metric-val text-cyan" id="finTotalRevenue">0 ج</div>
              </div>
              <div class="fin-metric-card">
                <div class="fin-metric-title">تكلفة بضاعة البوفيه المباعة</div>
                <div class="fin-metric-val text-danger" id="finCanteenCost">0 ج</div>
              </div>
              <div class="fin-metric-card">
                <div class="fin-metric-title">إجمالي المصروفات</div>
                <div class="fin-metric-val text-danger" id="finTotalExpenses">0 ج</div>
              </div>
              <div class="fin-metric-card" style="border-color: var(--accent-green);">
                <div class="fin-metric-title" style="color: var(--accent-green); font-weight: 800;">صافي الأرباح (Profit)</div>
                <div class="fin-metric-val text-green" id="finNetProfit">0 ج</div>
              </div>
            </div>

            <h4 style="font-size: 0.85rem; margin-bottom: 0.5rem;">آخر الجلسات والفواتير المحصلة (بالأسعار التاريخية وقت البيع):</h4>
            <div class="data-table-wrap">
              <table class="data-table">
                <thead>
                  <tr>
                    <th>رقم الفاتورة</th>
                    <th>الجهاز</th>
                    <th>الزبون</th>
                    <th>الكاشير المسؤول</th>
                    <th>وقت اللعب</th>
                    <th>طلبات البوفيه</th>
                    <th>الإجمالي</th>
                    <th>التاريخ</th>
                    <th style="text-align: center; width: 60px;">حذف</th>
                  </tr>
                </thead>
                <tbody id="ownerRecentOrdersTableBody">
                  <!-- Injected by JS -->
                </tbody>
              </table>
            </div>

            <h4 style="font-size: 0.85rem; margin-top: 1.25rem; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 6px;">
              <i data-lucide="shield-check" style="width: 16px; height: 16px; color: var(--accent-cyan);"></i>
              <span>سجل تقفيل وتصفية الشيفتات ومطابقة النقدية:</span>
            </h4>
            <div class="data-table-wrap">
              <table class="data-table">
                <thead>
                  <tr>
                    <th>تاريخ وتوقيت التقفيل</th>
                    <th>مسؤول الشيفت</th>
                    <th>دخل الأجهزة</th>
                    <th>مبيعات البوفيه</th>
                    <th>المصاريف</th>
                    <th>المتوقع بالدرج</th>
                    <th>الفعلي المستلم</th>
                    <th>حالة المطابقة</th>
                    <th>هاتف المالك المستلم</th>
                    <th>الملاحظات</th>
                  </tr>
                </thead>
                <tbody id="ownerShiftClosingsTableBody">
                  <!-- Injected by JS -->
                </tbody>
              </table>
            </div>
          </div>
        </div>

        <!-- TAB: Detailed Sales Log (سجل المبيعات المفصل للبوفيه وساعات اللعب) -->
        <div class="dash-tab-content" id="dashTabSalesLog">
          
          <!-- 1. LOCK VIEW -->
          <div id="salesLogTabLockView" style="display: none; flex-direction: column; align-items: center; justify-content: center; min-height: 380px; text-align: center; padding: 2.5rem 1rem;">
            <div class="lock-card" style="max-width: 480px; width: 100%; background: #101728; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-lg); padding: 2.25rem 1.75rem; box-shadow: 0 20px 50px rgba(0,0,0,0.8), 0 0 30px rgba(14,165,233,0.15); margin: 1rem auto;">
              <div style="width: 70px; height: 70px; border-radius: 50%; background: #080d1a; border: 1px solid rgba(14, 165, 233, 0.4); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; box-shadow: 0 0 20px rgba(14, 165, 233, 0.25);">
                <i data-lucide="lock" style="width: 34px; height: 34px; color: var(--accent-cyan);"></i>
              </div>
              <h3 style="color: var(--text-main); font-size: 1.25rem; margin-bottom: 0.5rem; font-weight: 800;">سجل المبيعات محمي بكلمة المرور 🔒</h3>
              <p style="font-size: 0.84rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 1.5rem;">
                للاطلاع على تفاصيل مبيعات البوفيه، جلسات الغرف، وهوامش الأرباح، يرجى إدخال كلمة المرور المحددة لك من قِبل إدارة المنصة.
              </p>

              <div id="salesLogTabPinAlert" style="display: none; width: 100%; padding: 0.65rem 0.85rem; background: rgba(225, 29, 72, 0.1); border: 1px solid rgba(225, 29, 72, 0.3); border-radius: var(--radius-sm); color: var(--accent-red); font-size: 0.82rem; margin-bottom: 1rem; text-align: right;">
                <i data-lucide="alert-circle" style="width: 16px; height: 16px; vertical-align: middle;"></i>
                <span id="salesLogTabPinAlertMsg">كلمة المرور غير صحيحة، يرجى مراجعة إدارة المنصة</span>
              </div>

              <form onsubmit="submitFinancialPin(event, 'salesLog')" style="width: 100%;">
                <div class="admin-input-wrap" style="position: relative; margin-bottom: 1rem;">
                  <input 
                    type="password" 
                    id="salesLogTabPinInput" 
                    placeholder="أدخل كلمة المرور..." 
                    required 
                    autocomplete="off" 
                    style="width: 100%; height: 46px; background: #080d1a; border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: inset 0 2px 5px rgba(0,0,0,0.6); border-radius: var(--radius-sm); padding: 0 1rem 0 2.75rem; color: #ffffff; font-size: 1rem; text-align: center; letter-spacing: 2px;"
                  />
                  <button type="button" class="btn-toggle-password" onclick="togglePasswordVisibility('salesLogTabPinInput', this)" title="إظهار / إخفاء" style="position: absolute; left: 10px; top: 50%; transform: translateY(-50%); z-index: 50; background: none; border: none; color: #64748b; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 6px;">
                    <i data-lucide="eye"></i>
                  </button>
                </div>
                <button type="submit" class="btn-modal-action btn-confirm-start" style="width: 100%; height: 46px; font-size: 0.95rem; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 0.5rem;">
                  <i data-lucide="key-round"></i>
                  <span>فتح وعرض سجل المبيعات 🔓</span>
                </button>
              </form>

              <div style="margin-top: 1.25rem; font-size: 0.76rem; color: var(--text-dim); line-height: 1.5;">
                💡 تم تعيين كلمة المرور من لوحة الإدارة الرئيسية. للاستفسار تواصل مع الدعم: <strong style="color: var(--accent-cyan);">01061905411</strong>
              </div>
            </div>
          </div>

          <!-- 2. Unlocked Content Container -->
          <div id="salesLogUnlockedContent" style="display: block;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.85rem; flex-wrap: wrap; gap: 0.5rem;">
              <div>
                <h4 style="margin: 0; font-size: 0.95rem; font-weight: 800; color: var(--text-main);">سجل المبيعات وحركات الصالة المفصلة:</h4>
                <p style="margin: 0.2rem 0 0; font-size: 0.76rem; color: var(--text-muted);">متابعة فورية لمبيعات البوفيه، ساعات اللعب، الإيراد، وهوامش الربح الحقيقية.</p>
              </div>
              <div style="display: flex; align-items: center; gap: 0.5rem;">
                <button class="btn-role-nav" onclick="loadOwnerSalesLog()" style="background: rgba(14, 165, 233, 0.15); border-color: var(--accent-cyan); color: #00f0ff; font-size: 0.75rem;">
                  <i data-lucide="refresh-cw"></i>
                  <span>تحديث السجل</span>
                </button>
                <button type="button" class="btn-role-nav" onclick="lockFinancialTabs()" style="background: rgba(244, 63, 94, 0.12); border-color: rgba(244, 63, 94, 0.4); color: #fb7185; font-size: 0.75rem;">
                  <i data-lucide="lock" style="width: 14px; height: 14px;"></i>
                  <span>قفل السجل 🔒</span>
                </button>
              </div>
            </div>

            <!-- Summary Metrics Cards -->
            <div class="financial-metrics-grid" style="grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));">
              <div class="fin-metric-card">
                <div class="fin-metric-title">🥤 مبيعات البوفيه</div>
                <div class="fin-metric-val text-cyan" id="salesLogCanteenRev">0 ج</div>
                <div style="font-size: 0.68rem; color: var(--text-muted); margin-top: 2px;" id="salesLogCanteenUnits">0 قطعة مباعة</div>
              </div>
              <div class="fin-metric-card">
                <div class="fin-metric-title">⏱️ دخل ساعات اللعب</div>
                <div class="fin-metric-val text-purple" id="salesLogTimeRev">0 ج</div>
                <div style="font-size: 0.68rem; color: var(--text-muted); margin-top: 2px;" id="salesLogTimeHours">0 ساعة لعب</div>
              </div>
              <div class="fin-metric-card">
                <div class="fin-metric-title">💰 إجمالي المبيعات</div>
                <div class="fin-metric-val text-amber" id="salesLogTotalRev">0 ج</div>
                <div style="font-size: 0.68rem; color: var(--text-muted); margin-top: 2px;">شامل البوفيه والوقت</div>
              </div>
              <div class="fin-metric-card" style="border-color: var(--accent-green);">
                <div class="fin-metric-title" style="color: var(--accent-green); font-weight: 800;">📈 صافي الأرباح</div>
                <div class="fin-metric-val text-green" id="salesLogTotalProfit">0 ج</div>
                <div style="font-size: 0.68rem; color: var(--accent-green); margin-top: 2px;">بعد خصم التكلفة</div>
              </div>
            </div>

            <!-- Controls: Filter Pills & Search Input -->
            <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.85rem; background: #0e1526; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-sm); padding: 0.6rem 0.75rem;">
              <div style="display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap;">
                <button class="sales-filter-btn active" id="btnFilterSalesAll" onclick="setSalesLogFilter('all')">
                  🔘 الكل (<span id="salesFilterCountAll">0</span>)
                </button>
                <button class="sales-filter-btn" id="btnFilterSalesCanteen" onclick="setSalesLogFilter('canteen')">
                  🥤 أصناف البوفيه (<span id="salesFilterCountCanteen">0</span>)
                </button>
                <button class="sales-filter-btn" id="btnFilterSalesTime" onclick="setSalesLogFilter('time')">
                  ⏱️ ساعات اللعب (<span id="salesFilterCountTime">0</span>)
                </button>
              </div>
              <div style="flex: 1; max-width: 280px; min-width: 170px;">
                <input type="text" id="salesLogSearchInput" placeholder="🔍 بحث بالصنف، الكاشير، أو الجهاز..." oninput="handleSalesLogSearch()" style="width: 100%; padding: 0.45rem 0.75rem; background: #080d1a; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: inset 0 1px 3px rgba(0,0,0,0.5); border-radius: var(--radius-sm); color: #ffffff; font-size: 0.78rem;" />
              </div>
            </div>

            <!-- Sales Table -->
            <div class="data-table-wrap">
              <table class="data-table">
                <thead>
                  <tr>
                    <th>التوقيت والتاريخ</th>
                    <th>النوع</th>
                    <th>الصنف / الحركة</th>
                    <th>المكان / الجهاز</th>
                    <th>الكمية / المدة</th>
                    <th>سعر البيع</th>
                    <th>الإجمالي</th>
                    <th>الربح</th>
                    <th>الكاشير المسؤول</th>
                    <th>العميل</th>
                  </tr>
                </thead>
                <tbody id="ownerSalesLogTableBody">
                  <!-- Injected dynamically by app.js -->
                </tbody>
              </table>
            </div>
          </div>
        </div>

        <!-- TAB: Purchases & Carton Supply (Owner Only - Part 7, 8, 9, 10) -->
        <div class="dash-tab-content" id="dashTabPurchases">
          <!-- Intelligent Run-Out Recommendations Box -->
          <div id="ownerInventoryIntelligenceBox" style="margin-bottom: 1rem;">
            <!-- Injected by JS: Real alerts or empty state -->
          </div>

          <!-- Purchase Entry Card -->
          <div class="add-canteen-item-box" style="margin-bottom: 1.25rem;">
            <div class="canteen-mgr-section-title">
              <i data-lucide="truck"></i>
              <span>تسجيل شحنة بضاعة جديدة بالكرتونة (توريد المخزن):</span>
            </div>
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.5rem; margin-top: 0.5rem;">
              <div>
                <label style="font-size: 0.72rem; color: var(--text-muted);">الصنف:</label>
                <select id="purchaseProductSelect" onchange="handlePurchaseProductChange()" style="width: 100%; padding: 0.6rem; background: #080d1a; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-sm); color: #ffffff;">
                  <option value="prod_twist" data-units="24" data-cost="14" data-price="20">تويست كانز 330 مل (رصيد حالي: 48)</option>
                  <option value="prod_redbull" data-units="24" data-cost="45" data-price="60">ريد بُل Red Bull طاقة (رصيد حالي: 24)</option>
                  <option value="prod_indomie" data-units="40" data-cost="14" data-price="20">إندومي بالخضار جامبو (رصيد حالي: 40)</option>
                  <option value="prod_pepsi" data-units="24" data-cost="14" data-price="20">بيبسي كانز 330 مل (رصيد حالي: 48)</option>
                  <option value="prod_schweppes" data-units="24" data-cost="14" data-price="20">شويبس رمان كانز 330 مل (رصيد حالي: 36)</option>
                  <option value="prod_water" data-units="20" data-cost="5" data-price="10">مياه معدنية 600 مل (رصيد حالي: 60)</option>
                  <option value="prod_chipsy" data-units="30" data-cost="15" data-price="20">شيبسي عائلي سوبر (رصيد حالي: 35)</option>
                  <option value="prod_spiro" data-units="24" data-cost="10" data-price="15">سبيرو سباتس ليمون / تفاح (رصيد حالي: 40)</option>
                  <option value="prod_tea" data-units="50" data-cost="4" data-price="15">شاي كرك / نعناع (رصيد حالي: 120)</option>
                  <option value="prod_espresso" data-units="50" data-cost="12" data-price="30">إسبريسو دبل إيطالي (رصيد حالي: 100)</option>
                  <option value="prod_nescafe" data-units="24" data-cost="8" data-price="18">نسكافيه 3*1 / كوفي ميكس (رصيد حالي: 50)</option>
                  <option value="prod_kitkat" data-units="24" data-cost="20" data-price="30">شوكولاتة كيت كات 4 أصابع (رصيد حالي: 30)</option>
                </select>
              </div>
              <div>
                <label style="font-size: 0.72rem; color: var(--text-muted);">نوع العبوة:</label>
                <select id="purchaseUnitType" style="width: 100%; padding: 0.6rem; background: #080d1a; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-sm); color: #ffffff;">
                  <option value="CAN">كانز (Can)</option>
                  <option value="BOTTLE">زجاجة (Bottle)</option>
                  <option value="UNIT">علبة / باكو (Unit)</option>
                  <option value="PACKET">كيس / شيبسي (Packet)</option>
                </select>
              </div>
              <div>
                <label style="font-size: 0.72rem; color: var(--text-muted);">عدد الكراتين:</label>
                <input type="number" id="purchaseCartonsCount" value="10" min="1" oninput="updatePurchaseCalculationLive()" />
              </div>
              <div>
                <label style="font-size: 0.72rem; color: var(--text-muted);">سعة الكرتونة (الوحدات):</label>
                <input type="number" id="purchaseUnitsPerCarton" min="1" oninput="updatePurchaseCalculationLive()" />
              </div>
              <div>
                <label style="font-size: 0.72rem; color: var(--text-muted);">سعر الكرتونة الإجمالي (ج):</label>
                <input type="number" id="purchaseCartonCost" placeholder="مثال: 480" oninput="updatePurchaseCalculationLive()" />
              </div>
              <div>
                <label style="font-size: 0.72rem; color: var(--text-muted);">المورد / الشركة:</label>
                <input type="text" id="purchaseSupplier" placeholder="مثال: شركة بيبسي" />
              </div>
            </div>

            <!-- Live Calculation Preview -->
            <div class="carton-calc-preview">
              <div class="carton-calc-item">
                <span class="carton-calc-label">الوحدات المضافة للرصيد:</span>
                <span class="carton-calc-val" id="purchaseCalcTotalUnits">240 وحدة</span>
              </div>
              <div class="carton-calc-item">
                <span class="carton-calc-label">سعر تكلفة العلبة الواحدة:</span>
                <span class="carton-calc-val text-green" id="purchaseCalcUnitCost">0.00 ج</span>
              </div>
              <div class="carton-calc-item">
                <span class="carton-calc-label">سعر البيع المقترح للكاشير:</span>
                <span class="carton-calc-val text-amber" id="purchaseCalcSellingPrice">0.00 ج</span>
              </div>
            </div>

            <button class="btn-add-canteen-item" style="width: 100%; justify-content: center; padding: 0.75rem;" onclick="submitPurchaseCartonEntry()">
              <i data-lucide="plus-circle"></i>
              <span>تسجيل الشحنة وإضافتها لرصيد المخزن 📦</span>
            </button>
          </div>

          <!-- Purchase History Table -->
          <h4 style="font-size: 0.85rem; margin-bottom: 0.5rem;">سجل شحنات وتوريدات البضاعة السابقة:</h4>
          <div class="data-table-wrap">
            <table class="data-table">
              <thead>
                <tr>
                  <th>التاريخ</th>
                  <th>الصنف</th>
                  <th>الكراتين</th>
                  <th>إجمالي الوحدات</th>
                  <th>سعر الكرتونة</th>
                  <th>تكلفة الوحدة</th>
                  <th>الإجمالي</th>
                  <th>المورد</th>
                </tr>
              </thead>
              <tbody id="ownerPurchasesTableBody">
                <!-- Injected by JS -->
              </tbody>
            </table>
          </div>
        </div>

        <!-- TAB: Subscription & Invoices (Part 4, 5 — 500 EGP Monthly) -->
        <div class="dash-tab-content" id="dashTabSubscription">
          <!-- Subscription Plan Card -->
          <div style="background: rgba(0, 242, 254, 0.06); border: 1px solid var(--border-cyan); border-radius: var(--radius-sm); padding: 1rem; margin-bottom: 1rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem;">
            <div>
              <div style="font-size: 0.75rem; color: var(--text-muted);">خطة الاشتراك الحالية:</div>
              <div style="font-size: 1.15rem; font-weight: 800; color: var(--accent-cyan);" id="ownerSubPlanName">PLAYZONE PRO MONTHLY</div>
              <div style="font-size: 0.8rem; color: var(--text-muted);" id="ownerSubStatusText">حالة الاشتراك: نشط</div>
            </div>
            <div style="text-align: left;">
              <div style="font-size: 1.25rem; font-weight: 800; color: var(--text-main);"><span id="ownerSubPriceDisplay">300 ج <span style="font-size: 0.75rem; color: var(--text-muted);">/ شهرياً</span></span></div>
              <span class="badge-stock in-stock" id="ownerSubBadge">ACTIVE</span>
            </div>
          </div>

          <!-- Invoices Table -->
          <h4 style="font-size: 0.85rem; margin-bottom: 0.5rem;">فواتير تجديد الاشتراك الشهرية:</h4>
          <div class="data-table-wrap">
            <table class="data-table">
              <thead>
                <tr>
                  <th>رقم الفاتورة</th>
                  <th>تاريخ الاستحقاق</th>
                  <th>المبلغ</th>
                  <th>الحالة</th>
                  <th>طريقة الدفع</th>
                  <th>الإجراء</th>
                </tr>
              </thead>
              <tbody id="ownerInvoicesTableBody">
                <!-- Injected by JS -->
              </tbody>
            </table>
          </div>

          <!-- Payment Proof Submission Box -->
          <div id="paymentProofBox" style="display: none; margin-top: 1rem; background: #0e1526; border: 1px solid rgba(168, 85, 247, 0.35); border-radius: var(--radius-sm); padding: 0.85rem;">
            <div style="font-size: 0.85rem; font-weight: 700; color: var(--accent-purple); margin-bottom: 0.4rem;">
              إرسال إثبات سداد الاشتراك (300 ج):
            </div>
            <p style="font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.6rem;">
              قم بالتحويل عبر <strong>فودافون كاش / إنستاباي</strong>، ثم اكتب رقم العملية أو المرجع أدناه:
            </p>
            <input type="hidden" id="payInvoiceId" />
            <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
              <input type="text" id="payInvoiceRef" placeholder="رقم العملية أو كود التحويل" style="flex: 1; min-width: 160px;" />
              <button class="btn-role-nav" onclick="submitInvoicePaymentProof()" style="background: rgba(168, 85, 247, 0.15); border: 1px solid rgba(168, 85, 247, 0.4); color: #c084fc; font-weight: 700;">
                <span>تأكيد إرسال الإثبات</span>
              </button>
            </div>
          </div>
        </div>

        <!-- TAB: Employees Management (إدارة موظفي الصالة والكاشير) -->
        <div class="dash-tab-content" id="dashTabEmployees">
          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.85rem; flex-wrap: wrap; gap: 0.5rem;">
            <div>
              <h4 style="margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--text-main);">فريق العمل وموظفي الصالة:</h4>
              <p style="margin: 0.2rem 0 0; font-size: 0.78rem; color: var(--text-muted);">تحكم بحسابات الكاشير، تفعيل أو تعطيل الحسابات فورياً، وإعادة تعيين كلمات المرور.</p>
            </div>
            <button class="btn-role-nav" onclick="openAddEmployeeModal()" style="background: rgba(14, 165, 233, 0.15); border: 1px solid var(--accent-cyan); color: #00f0ff; font-weight: 800;">
              <i data-lucide="user-plus"></i>
              <span>+ إضافة موظف جديد</span>
            </button>
          </div>

          <div class="data-table-wrap">
            <table class="data-table">
              <thead>
                <tr>
                  <th>الاسم الكامل</th>
                  <th>اسم المستخدم</th>
                  <th>الدور / الصلاحية</th>
                  <th>رقم الهاتف</th>
                  <th>الحالة</th>
                  <th>تاريخ الإضافة</th>
                  <th>الإجراءات</th>
                </tr>
              </thead>
              <tbody id="ownerEmployeesTableBody">
                <!-- Injected dynamically by app.js -->
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <div class="modal-footer">
        <button class="btn-modal-action btn-confirm-start" onclick="closeModal('modalOwnerDashboard')">
          <i data-lucide="check"></i>
          <span>إغلاق اللوحة</span>
        </button>
      </div>
    </div>
  </div>


  <!-- 12. Quick Restock Modal -->
  <div class="modal-overlay" id="modalRestock" onclick="if(event.target===this) closeModal('modalRestock')">
    <div class="modal-card" style="max-width: 480px;">
      <div class="modal-header">
        <div class="modal-title-group">
          <i data-lucide="boxes" style="color: var(--accent-cyan);"></i>
          <h3 id="restockModalTitle">توريد بضاعة للمخزن 📦</h3>
        </div>
        <button class="modal-close-btn" onclick="closeModal('modalRestock')"><i data-lucide="x"></i></button>
      </div>
      <div class="modal-body">
        <div style="background: rgba(0, 242, 254, 0.06); border: 1px solid var(--border-cyan); border-radius: var(--radius-sm); padding: 0.75rem; margin-bottom: 1rem;">
          <div style="font-size: 0.75rem; color: var(--text-muted);">المنتج المستهدف للتوريد:</div>
          <div style="font-size: 1.15rem; font-weight: 800; color: var(--accent-cyan);" id="restockProdName">—</div>
        </div>
        <div style="font-size: 0.82rem; margin-bottom: 0.75rem; color: var(--text-muted);" id="restockProductDesc">
          اختر الكمية الموردة لإضافتها فوراً لرصيد المخزن:
        </div>
        <div style="display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap;">
          <button type="button" class="btn-extend-option" onclick="document.getElementById('restockQtyInput').value = 12;">+12 علبة</button>
          <button type="button" class="btn-extend-option active" onclick="document.getElementById('restockQtyInput').value = 24;">+24 (كرتونة)</button>
          <button type="button" class="btn-extend-option" onclick="document.getElementById('restockQtyInput').value = 48;">+48 (كرتونتين)</button>
        </div>
        <div class="form-group">
          <label>أو اكتب عدد العلب الموردة يدوياً:</label>
          <input type="number" id="restockQtyInput" min="1" value="12" />
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn-modal-action btn-confirm-start" onclick="confirmRestockSubmit()">
          <i data-lucide="plus"></i>
          <span>تأكيد التوريد وإضافة الرصيد</span>
        </button>
      </div>
    </div>
  </div>

  <!-- 12B. Direct Stock Count Edit Modal (تعديل رصيد وعدد المخزون مباشرة) -->
  <div class="modal-overlay" id="modalEditStock" onclick="if(event.target===this) closeModal('modalEditStock')">
    <div class="modal-card" style="max-width: 480px;">
      <div class="modal-header">
        <div class="modal-title-group">
          <i data-lucide="package-check" style="color: var(--accent-cyan);"></i>
          <h3>تعديل رصيد المخزن وجرد المنتج 📦</h3>
        </div>
        <button class="modal-close-btn" onclick="closeModal('modalEditStock')"><i data-lucide="x"></i></button>
      </div>
      <form onsubmit="event.preventDefault(); submitEditStockModal();">
        <div class="modal-body">
          <input type="hidden" id="editStockProdId" />
          
          <div style="background: #090e1c; border: 1px solid rgba(14, 165, 233, 0.3); border-radius: var(--radius-sm); padding: 0.85rem; margin-bottom: 1.25rem;">
            <div style="font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.25rem;">اسم الصنف / المنتج:</div>
            <div style="font-size: 1.15rem; font-weight: 800; color: var(--text-main);" id="editStockProdNameDisplay">—</div>
            <div style="font-size: 0.8rem; color: var(--text-muted); margin-top: 0.35rem;">
              الرصيد المسجل حالياً في النظام: <strong id="editStockCurrentStockDisplay" style="color: var(--accent-cyan); font-size: 0.95rem;">0</strong> علبة
            </div>
          </div>

          <div class="form-group" style="margin-bottom: 1rem;">
            <label style="font-weight: 700; color: var(--text-main); display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem;">
              <span>العدد الفعلي الجديد في المخزن:</span>
              <span style="font-size: 0.75rem; color: var(--text-muted); font-weight: 400;">اكتب الكمية الفعلية الموجودة على الرف</span>
            </label>
            <div style="display: flex; gap: 0.5rem; align-items: center;">
              <button type="button" class="btn-extend-option" style="padding: 0.4rem 0.85rem; font-weight: 700; font-size: 1rem;" onclick="stepEditStock(-1)">-1</button>
              <input 
                type="number" 
                id="editStockNewQuantity" 
                min="0" 
                max="99999" 
                required 
                style="flex: 1; height: 46px; text-align: center; font-size: 1.25rem; font-weight: 800; color: #00f0ff; background: #080d1a; border: 1px solid rgba(14, 165, 233, 0.4); border-radius: var(--radius-sm);"
              />
              <button type="button" class="btn-extend-option" style="padding: 0.4rem 0.85rem; font-weight: 700; font-size: 1rem;" onclick="stepEditStock(1)">+1</button>
            </div>
          </div>

          <div style="display: flex; gap: 0.4rem; margin-bottom: 1.25rem; flex-wrap: wrap;">
            <button type="button" class="btn-extend-option" onclick="stepEditStock(-5)" style="font-size: 0.78rem;">-5 علب</button>
            <button type="button" class="btn-extend-option" onclick="stepEditStock(5)" style="font-size: 0.78rem;">+5 علب</button>
            <button type="button" class="btn-extend-option" onclick="stepEditStock(12)" style="font-size: 0.78rem;">+12 (نصف كرتونة)</button>
            <button type="button" class="btn-extend-option" onclick="stepEditStock(24)" style="font-size: 0.78rem;">+24 (كرتونة)</button>
            <button type="button" class="btn-extend-option" onclick="document.getElementById('editStockNewQuantity').value = 0;" style="font-size: 0.78rem; border-color: rgba(225, 29, 72, 0.4); color: var(--accent-red);">تصفير (0)</button>
          </div>

          <div class="form-group" style="margin-bottom: 0.5rem;">
            <label style="font-size: 0.82rem; color: var(--text-muted); margin-bottom: 0.35rem;">
              حد التنبيه عند النواقص (اختياري):
            </label>
            <input 
              type="number" 
              id="editStockMinThreshold" 
              min="0" 
              max="999" 
              placeholder="مثال: 5" 
              style="width: 100%; height: 38px; background: #080d1a; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-sm); padding: 0 0.75rem; color: #ffffff;"
            />
          </div>
        </div>

        <div class="modal-footer" style="display: flex; gap: 0.75rem; justify-content: flex-end;">
          <button type="button" class="btn-modal-action btn-secondary" onclick="closeModal('modalEditStock')">إلغاء</button>
          <button type="submit" class="btn-modal-action btn-confirm-start" id="btnConfirmEditStock" style="background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%); border: none; color: #ffffff; font-weight: 700;">
            <i data-lucide="check"></i>
            <span>حفظ وتعديل الرصيد فوراً 💾</span>
          </button>
        </div>
      </form>
    </div>
  </div>

  <!-- 13. Shift & Worker Switcher Modal -->
  <div class="modal-overlay" id="modalAccountSwitch" onclick="if(event.target===this) closeModal('modalAccountSwitch')">
    <div class="modal-card">
      <div class="modal-header">
        <div class="modal-title-group">
          <i data-lucide="repeat"></i>
          <h3>تبديل شفت الكاشير / الموظفين</h3>
        </div>
        <button class="modal-close-btn" onclick="closeModal('modalAccountSwitch')"><i data-lucide="x"></i></button>
      </div>
      <div class="modal-body">
        <div style="font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.75rem;">
          اختر الكاشير أو الموظف المستلم للشيفت الآن لتسجيل الأوردرات وحساب الدرج باسمه:
        </div>
        
        <div id="switchableAccountsList" style="display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem;">
          <!-- Injected dynamically by JS -->
        </div>

        <!-- إضافة كاشير جديد يدوياً -->
        <div class="quick-add-cashier-box" style="border-top: 1px solid rgba(203, 206, 209, 0.6); padding-top: 0.85rem; margin-top: 0.5rem;">
          <div style="margin-bottom: 0.5rem;">
            <div style="font-size: 0.82rem; font-weight: 700; color: var(--text-main); display: flex; align-items: center; gap: 0.4rem;">
              <i data-lucide="user-plus" style="width: 16px; height: 16px; color: var(--accent-cyan);"></i>
              <span>إضافة اسم كاشير جديد يدوياً:</span>
            </div>
          </div>

          <div style="display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.4rem;">
            <div style="flex: 1; min-width: 220px;">
              <input 
                type="text" 
                id="quickCashierName" 
                placeholder="اكتب اسم الكاشير هنا (مثلاً: أحمد، محمود)..." 
                style="width: 100%; height: 42px; background: #080d1a; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-sm); padding: 0 0.75rem; color: #ffffff; font-family: inherit; font-size: 0.85rem;"
                onkeydown="if(event.key==='Enter') submitQuickAddCashier()"
              />
            </div>
            <button 
              type="button" 
              class="btn-modal-action btn-confirm-start" 
              style="min-width: 130px; height: 42px; margin: 0; padding: 0 1rem; font-size: 0.82rem; display: flex; align-items: center; justify-content: center; gap: 0.4rem; white-space: nowrap;"
              onclick="submitQuickAddCashier()"
            >
              <i data-lucide="plus"></i>
              <span>حفظ وإضافة</span>
            </button>
          </div>
          <div style="font-size: 0.72rem; color: var(--text-muted);">
            💡 اكتب اسم الكاشير واضغط «حفظ وإضافة» وسيظهر في القائمة أعلاه فوراً لاستلام الشيفت.
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn-modal-action" style="background: rgba(255, 255, 255, 0.06); color: #cbd5e1; border: 1px solid rgba(255, 255, 255, 0.1);" onclick="closeModal('modalAccountSwitch')">
          <span>إغلاق</span>
        </button>
      </div>
    </div>
  </div>

  <!-- 13B. Notifications Modal -->
  <div class="modal-overlay" id="modalNotifications" onclick="if(event.target===this) closeModal('modalNotifications')">
    <div class="modal-card">
      <div class="modal-header">
        <div class="modal-title-group">
          <i data-lucide="bell"></i>
          <h3>مركز التنبيهات والإشعارات</h3>
        </div>
        <button class="modal-close-btn" onclick="closeModal('modalNotifications')"><i data-lucide="x"></i></button>
      </div>
      <div class="modal-body">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem;">
          <span style="font-size: 0.8rem; color: var(--text-muted);">أحدث إشعارات الصالة والاشتراكات والمخزون:</span>
          <button class="btn-role-nav" style="padding: 0.3rem 0.6rem; font-size: 0.72rem;" onclick="markAllNotificationsAsRead()">
            <i data-lucide="check-check"></i>
            <span>تمييز الكل كمقروء</span>
          </button>
        </div>
        <div id="notificationsListContainer">
          <!-- Injected dynamically by JS -->
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn-modal-action" style="background: rgba(255, 255, 255, 0.06); color: #cbd5e1; border: 1px solid rgba(255, 255, 255, 0.1);" onclick="closeModal('modalNotifications')">
          <span>إغلاق</span>
        </button>
      </div>
    </div>
  </div>

  <!-- 14. Lounge Profile & Customization Modal -->
  <div class="modal-overlay" id="modalLoungeSettings" onclick="if(event.target===this) closeModal('modalLoungeSettings')">
    <div class="modal-card">
      <div class="modal-header">
        <div class="modal-title-group">
          <i data-lucide="store"></i>
          <h3>تعديل بيانات المكان والمالك</h3>
        </div>
        <button class="modal-close-btn" onclick="closeModal('modalLoungeSettings')"><i data-lucide="x"></i></button>
      </div>
      <div class="modal-body">
        <div style="font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.85rem; line-height: 1.5;">
          اكتب اسم صالتك الفعلي واسمك الشخصي ورقم التليفون، وسيتم تطبيقها فوراً في شريط النظام والفواتير ومطبوعات الشيفت:
        </div>
        <div class="form-group">
          <label>اسم الصالة / المحل:</label>
          <input type="text" id="settingLoungeName" placeholder="اسم صالتك" />
        </div>
        <div class="form-group">
          <label>اسم صاحب الصالة / المالك:</label>
          <input type="text" id="settingOwnerName" placeholder="اسم المالك" />
        </div>
        <div class="form-group">
          <label>اسم الكاشير المستلم للوردية الحالية:</label>
          <input type="text" id="settingCashierName" placeholder="اسم الكاشير" />
        </div>
        <div class="form-group">
          <label style="display:flex; align-items:center; gap:6px;">
            <i data-lucide="phone-call" style="width:16px; height:16px; color:#25D366;"></i>
            <span>رقم واتساب صاحب الصالة (المستلم لتقارير الشيفتات):</span>
          </label>
          <input type="text" id="settingLoungePhone" placeholder="مثال: 01012345678 أو 011..." style="direction: ltr; text-align: right;" />
          <small style="color: var(--text-muted); font-size: 0.76rem; display: block; margin-top: 4px;">
            💡 هذا هو الرقم الذي يربط به الكاشير تلقائياً لإرسال تقرير تقفيل الشيفت وحسابات الدرج عبر واتساب.
          </small>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn-modal-action btn-confirm-start" onclick="saveLoungeSettings()">
          <i data-lucide="check"></i>
          <span>حفظ وتطبيق البيانات في النظام</span>
        </button>
      </div>
    </div>
  </div>

  <!-- 15. Add Employee Modal -->
  <div class="modal-overlay" id="modalAddEmployee" onclick="if(event.target===this) closeModal('modalAddEmployee')">
    <div class="modal-card">
      <div class="modal-header">
        <div class="modal-title-group">
          <i data-lucide="user-plus"></i>
          <h3>إضافة موظف / كاشير جديد</h3>
        </div>
        <button class="modal-close-btn" onclick="closeModal('modalAddEmployee')"><i data-lucide="x"></i></button>
      </div>
      <form onsubmit="event.preventDefault(); submitCreateEmployee();">
        <div class="modal-body">
          <div class="form-group">
            <label>اسم الموظف بالكامل:</label>
            <input type="text" id="newEmpName" placeholder="مثال: أحمد محمد" required />
          </div>
          <div class="form-group">
            <label>رقم هاتف الموظف (اختياري):</label>
            <input type="text" id="newEmpPhone" placeholder="01xxxxxxxxx" />
          </div>
          <div class="form-group">
            <label>اسم المستخدم للدخول (Username):</label>
            <input type="text" id="newEmpUsername" placeholder="مثال: ahmed_cashier" required autocomplete="username" />
          </div>
          <div class="form-group" id="groupNewEmpPassword">
            <label>كلمة المرور (اختياري للكاشير):</label>
            <input type="password" id="newEmpPassword" placeholder="اختياري — الكاشير يستلم الوردية بدون كلمة سر" autocomplete="new-password" />
          </div>
          <div class="form-group">
            <label>الدور / الصلاحية في الصالة:</label>
            <select id="newEmpRole" style="width: 100%; background: #080d1a; border: 1px solid rgba(255, 255, 255, 0.12); color: #ffffff; padding: 0.65rem; border-radius: var(--radius-sm); font-family: var(--font-ar);">
              <option value="cashier">كاشير (تسجيل الجلسات والبوفيه وتقفيل الوردية فقط)</option>
              <option value="manager">مدير وردية (Manager)</option>
            </select>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn-modal-action btn-secondary" onclick="closeModal('modalAddEmployee')">إلغاء</button>
          <button type="submit" class="btn-modal-action btn-confirm-start" id="btnSubmitAddEmployee">
            <i data-lucide="check"></i>
            <span>حفظ الموظف وتفعيل الحساب</span>
          </button>
        </div>
      </form>
    </div>
  </div>

  <!-- 16. Reset Employee Password Modal -->
  <div class="modal-overlay" id="modalResetEmployeePassword" onclick="if(event.target===this) closeModal('modalResetEmployeePassword')">
    <div class="modal-card">
      <div class="modal-header">
        <div class="modal-title-group">
          <i data-lucide="key-round"></i>
          <h3>إعادة تعيين كلمة مرور الموظف</h3>
        </div>
        <button class="modal-close-btn" onclick="closeModal('modalResetEmployeePassword')"><i data-lucide="x"></i></button>
      </div>
      <form onsubmit="event.preventDefault(); submitResetPassword();">
        <div class="modal-body">
          <input type="hidden" id="resetEmpTargetId" />
          <div style="background: rgba(0, 242, 254, 0.06); border: 1px solid var(--border-cyan); border-radius: var(--radius-sm); padding: 0.75rem; margin-bottom: 1rem;">
            <div style="font-size: 0.75rem; color: var(--text-muted);">الموظف المستهدف:</div>
            <div style="font-size: 1.05rem; font-weight: 700; color: var(--accent-cyan);" id="resetEmpTargetNameDisplay">—</div>
          </div>
          <div class="form-group">
            <label>كلمة المرور الجديدة (4 خانات على الأقل):</label>
            <input type="password" id="resetEmpNewPassword" placeholder="4 خانات على الأقل" required minlength="4" autocomplete="new-password" />
          </div>
          <p style="font-size: 0.75rem; color: var(--text-muted); margin-top: 0.4rem; line-height: 1.4;">
            ⚠️ ملاحظة أمنية: سيتم إلغاء أي جلسات دخول نشطة حالياً لهذا الموظف فوراً لحمايته وإجباره على الدخول بالكلمة الجديدة.
          </p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn-modal-action btn-secondary" onclick="closeModal('modalResetEmployeePassword')">إلغاء</button>
          <button type="submit" class="btn-modal-action btn-confirm-start" id="btnSubmitResetPass">
            <i data-lucide="shield-check"></i>
            <span>تحديث كلمة المرور وإلغاء الجلسات</span>
          </button>
        </div>
      </form>
    </div>
  </div>

  <!-- =========================================================================
       19. SALES LEDGER & ROOM SESSIONS MODAL (سجل المبيعات وجلسات الغرف الشامل)
       ========================================================================= -->
  <div class="modal-overlay" id="modalSalesLedger" onclick="if(event.target===this) closeModal('modalSalesLedger')">
    <div class="modal-card modal-owner-card" style="max-width: 1150px; width: 96%; max-height: 94vh; display: flex; flex-direction: column;">
      <div class="modal-header" style="flex-shrink: 0;">
        <div class="modal-title-group">
          <i data-lucide="clipboard-list" style="color: var(--accent-cyan); width: 22px; height: 22px;"></i>
          <div>
            <h3 style="margin: 0; font-size: 1.1rem; color: var(--text-main);">سجل المبيعات التفصيلي وجلسات الغرف 📋</h3>
            <span style="font-size: 0.76rem; color: var(--text-muted);">سجل شامل لكافة أوقات اللعب في الغرف وطلبات ومبيعات البوفيه</span>
          </div>
        </div>
        <div style="display: flex; align-items: center; gap: 0.5rem;">
          <button type="button" class="btn-role-nav" id="btnLockSalesLedger" onclick="lockSalesLedger()" style="display: none; padding: 0.35rem 0.75rem; font-size: 0.76rem; background: rgba(244, 63, 94, 0.12); border: 1px solid rgba(244, 63, 94, 0.35); color: #fb7185;">
            <i data-lucide="lock" style="width: 14px; height: 14px;"></i>
            <span>قفل السجل 🔒</span>
          </button>
          <button class="modal-close-btn" onclick="closeModal('modalSalesLedger')"><i data-lucide="x"></i></button>
        </div>
      </div>

      <div class="modal-body" style="flex: 1; overflow-y: auto; padding: 1.25rem;">
        
        <!-- 1. LOCK SCREEN VIEW (إذا لم يتم إدخال الباسورد بعد) -->
        <div id="salesLedgerLockView" style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 380px; text-align: center; padding: 1.5rem 1rem;">
          <div style="width: 70px; height: 70px; border-radius: 50%; background: #080d1a; border: 1px solid rgba(14, 165, 233, 0.4); display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; box-shadow: 0 0 20px rgba(14, 165, 233, 0.25);">
            <i data-lucide="shield-check" style="width: 36px; height: 36px; color: var(--accent-cyan);"></i>
          </div>
          <h3 style="color: var(--text-main); font-size: 1.25rem; margin-bottom: 0.5rem; font-weight: 800;">سجل المبيعات محمي بكلمة مرور المالك 🔒</h3>
          <p style="max-width: 460px; font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 1.5rem;">
            للاطلاع على تفاصيل أرباح ومبيعات الصالة وأوقات جلسات الغرف، يرجى إدخال كلمة المرور المعتمدة والمحددة من قِبل إدارة المنصة.
          </p>

          <div id="salesLedgerPinAlert" style="display: none; max-width: 360px; width: 100%; padding: 0.6rem 0.85rem; background: rgba(225, 29, 72, 0.1); border: 1px solid rgba(225, 29, 72, 0.3); border-radius: var(--radius-sm); color: var(--accent-red); font-size: 0.82rem; margin-bottom: 1rem;">
            <i data-lucide="alert-circle" style="width: 16px; height: 16px; vertical-align: middle;"></i>
            <span id="salesLedgerPinAlertMsg">كلمة المرور غير صحيحة، يرجى مراجعة إدارة المنصة</span>
          </div>

          <form onsubmit="submitSalesLedgerPin(event)" style="max-width: 360px; width: 100%;">
            <div class="admin-input-wrap" style="position: relative; margin-bottom: 1rem;">
              <input 
                type="password" 
                id="salesLedgerPinInput" 
                placeholder="أدخل كلمة مرور سجل المبيعات..." 
                required 
                autocomplete="off" 
                style="width: 100%; height: 46px; background: #080d1a; border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: inset 0 2px 5px rgba(0,0,0,0.6); border-radius: var(--radius-sm); padding: 0 1rem 0 2.75rem; color: #ffffff; font-size: 1rem; text-align: center; letter-spacing: 2px;"
              />
              <button type="button" class="btn-toggle-password" onclick="togglePasswordVisibility('salesLedgerPinInput', this)" title="إظهار / إخفاء" style="position: absolute; left: 10px; top: 50%; transform: translateY(-50%); z-index: 50; background: none; border: none; color: #64748b; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 6px;">
                <i data-lucide="eye"></i>
              </button>
            </div>
            <button type="submit" class="btn-modal-action btn-confirm-start" style="width: 100%; height: 46px; font-size: 0.95rem; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 0.5rem;">
              <i data-lucide="key-round"></i>
              <span>دخول وعرض سجل المبيعات 🔓</span>
            </button>
          </form>

          <div style="margin-top: 1.25rem; font-size: 0.75rem; color: var(--text-dim);">
            📞 للاستفسار أو الحصول على كلمة المرور، تواصل مع واتساب الإدارة: <strong>01061905411</strong>
          </div>
        </div>

        <!-- 2. UNLOCKED DATA VIEW (لوحة البيانات الكاملة بعد إدخال الباسورد) -->
        <div id="salesLedgerDataView" style="display: none;">
          
          <!-- Summary KPIs Cards -->
          <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.75rem; margin-bottom: 1.25rem;">
            <div style="background: #101728; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-sm); padding: 0.85rem; box-shadow: 0 4px 14px rgba(0,0,0,0.35);">
              <div style="font-size: 0.76rem; color: var(--text-muted); margin-bottom: 0.35rem;">دخل ساعات اللعب (الغرف)</div>
              <div style="font-size: 1.4rem; font-weight: 800; color: var(--accent-cyan);" id="ledgerKpiTimeRevenue">0 <small style="font-size: 0.85rem;">ج</small></div>
              <div style="font-size: 0.72rem; color: var(--text-dim); margin-top: 0.2rem;"><span id="ledgerKpiTotalHours">0</span> ساعة لعب محسوبة</div>
            </div>

            <div style="background: #101728; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-sm); padding: 0.85rem; box-shadow: 0 4px 14px rgba(0,0,0,0.35);">
              <div style="font-size: 0.76rem; color: var(--text-muted); margin-bottom: 0.35rem;">إجمالي مبيعات البوفيه</div>
              <div style="font-size: 1.4rem; font-weight: 800; color: var(--accent-purple);" id="ledgerKpiCanteenRevenue">0 <small style="font-size: 0.85rem;">ج</small></div>
              <div style="font-size: 0.72rem; color: var(--text-dim); margin-top: 0.2rem;"><span id="ledgerKpiCanteenUnits">0</span> صنف ومشروب مباع</div>
            </div>

            <div style="background: #101728; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-sm); padding: 0.85rem; box-shadow: 0 4px 14px rgba(0,0,0,0.35);">
              <div style="font-size: 0.76rem; color: var(--text-muted); margin-bottom: 0.35rem;">الإجمالي العام المحصل</div>
              <div style="font-size: 1.4rem; font-weight: 800; color: var(--accent-green);" id="ledgerKpiTotalRevenue">0 <small style="font-size: 0.85rem;">ج</small></div>
              <div style="font-size: 0.72rem; color: var(--text-dim); margin-top: 0.2rem;">شامل الوقت والبوفيه</div>
            </div>

            <div style="background: #101728; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-sm); padding: 0.85rem; box-shadow: 0 4px 14px rgba(0,0,0,0.35);">
              <div style="font-size: 0.76rem; color: var(--text-muted); margin-bottom: 0.35rem;">إجمالي الأرباح الصافية</div>
              <div style="font-size: 1.4rem; font-weight: 800; color: var(--accent-amber);" id="ledgerKpiTotalProfit">0 <small style="font-size: 0.85rem;">ج</small></div>
              <div style="font-size: 0.72rem; color: var(--text-dim); margin-top: 0.2rem;">بعد خصم تكاليف البضاعة</div>
            </div>

            <div style="background: #101728; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-sm); padding: 0.85rem; box-shadow: 0 4px 14px rgba(0,0,0,0.35);">
              <div style="font-size: 0.76rem; color: var(--text-muted); margin-bottom: 0.35rem;">عدد الجلسات المنفذة</div>
              <div style="font-size: 1.4rem; font-weight: 800; color: var(--text-main);" id="ledgerKpiSessionsCount">0</div>
              <div style="font-size: 0.72rem; color: var(--text-dim); margin-top: 0.2rem;">جلسة غرفة / بيع مباشر</div>
            </div>
          </div>

          <!-- Navigation & Filters Bar -->
          <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; border-bottom: 1px solid rgba(203, 206, 209, 0.6); padding-bottom: 0.75rem;">
            <div style="display: flex; gap: 0.4rem; flex-wrap: wrap;">
              <button class="btn-dash-tab active" id="tabLedgerSessions" onclick="switchLedgerViewTab('sessions')">
                <i data-lucide="gamepad-2"></i>
                <span>تفاصيل جلسات الغرف والطلبات 🎮</span>
              </button>
              <button class="btn-dash-tab" id="tabLedgerCanteen" onclick="switchLedgerViewTab('canteen')">
                <i data-lucide="coffee"></i>
                <span>حركة مبيعات البوفيه بالتفصيل 🥤</span>
              </button>
            </div>

            <div style="display: flex; gap: 0.5rem; flex: 1; justify-content: flex-end; min-width: 250px;">
              <input 
                type="text" 
                id="ledgerSearchInput" 
                placeholder="بحث بالغرفة، العميل، الصنف، أو الكاشير..." 
                oninput="filterSalesLedger()"
                style="height: 38px; background: #080d1a; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-sm); padding: 0 0.75rem; color: #ffffff; font-size: 0.82rem; min-width: 200px; flex: 1; max-width: 320px;" 
              />
              <button type="button" class="btn-role-nav" onclick="refreshSalesLedgerData()" title="تحديث السجل" style="height: 38px; padding: 0 0.75rem;">
                <i data-lucide="refresh-cw"></i>
                <span>تحديث</span>
              </button>
            </div>
          </div>

          <!-- VIEW 1: ROOM SESSIONS TABLE -->
          <div id="ledgerSessionsWrap" class="data-table-wrap">
            <table class="data-table" style="font-size: 0.82rem;">
              <thead>
                <tr>
                  <th style="min-width: 110px;">الغرفة / الجهاز</th>
                  <th style="min-width: 90px;">العميل</th>
                  <th style="min-width: 85px;">وقت الابتداء</th>
                  <th style="min-width: 85px;">وقت الانتهاء</th>
                  <th style="min-width: 85px;">مدة اللعب</th>
                  <th style="min-width: 80px;">حساب الوقت</th>
                  <th style="min-width: 240px;">المشاريب والأكل في الغرفة</th>
                  <th style="min-width: 80px;">حساب البوفيه</th>
                  <th style="min-width: 90px;">الإجمالي المطلوب</th>
                  <th style="min-width: 100px;">الكاشير والتاريخ</th>
                </tr>
              </thead>
              <tbody id="ledgerSessionsTableBody">
                <tr><td colspan="10" class="empty-state">جاري تحميل سجل الجلسات...</td></tr>
              </tbody>
            </table>
          </div>

          <!-- VIEW 2: CANTEEN MOVEMENT TABLE -->
          <div id="ledgerCanteenWrap" class="data-table-wrap" style="display: none;">
            <table class="data-table" style="font-size: 0.82rem;">
              <thead>
                <tr>
                  <th>توقيت البيع</th>
                  <th>الصنف / المشروب</th>
                  <th>الكمية</th>
                  <th>سعر البيع</th>
                  <th>التكلفة</th>
                  <th>إجمالي التحصيل</th>
                  <th>صافي الربح</th>
                  <th>مصدر الطلب (الغرفة)</th>
                  <th>العميل</th>
                  <th>الكاشير</th>
                </tr>
              </thead>
              <tbody id="ledgerCanteenTableBody">
                <tr><td colspan="10" class="empty-state">جاري تحميل مبيعات البوفيه...</td></tr>
              </tbody>
            </table>
          </div>

        </div><!-- /salesLedgerDataView -->

      </div><!-- /modal-body -->

      <div class="modal-footer" style="display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;">
        <div style="font-size: 0.76rem; color: var(--text-dim);">
          💡 يتم تحديث هذا السجل تلقائياً فور إنهاء كل جلسة لعب أو بيع أي منتج من البوفيه.
        </div>
        <button class="btn-modal-action" style="background: rgba(255, 255, 255, 0.06); color: #cbd5e1; border: 1px solid rgba(255, 255, 255, 0.1);" onclick="closeModal('modalSalesLedger')">
          <span>إغلاق النافذة</span>
        </button>
      </div>
    </div>
  <!-- Modal: Audio Test & Mobile Volume Calibration -->
  <div class="modal-overlay" id="modalAudioTest" onclick="if(event.target===this) closeAudioTestModal()">
    <div class="modal-card" style="max-width: 520px;">
      <div class="modal-header">
        <div class="modal-title">
          <i data-lucide="volume-2" style="color: var(--accent-cyan);"></i>
          <span>معايرة واختبار الأصوات الصوتية (Audio Engine)</span>
        </div>
        <button class="modal-close-btn" onclick="closeAudioTestModal()">
          <i data-lucide="x"></i>
        </button>
      </div>
      <div class="modal-body">
        <p style="font-size: 0.85rem; color: #cbd5e1; margin-bottom: 1.25rem; line-height: 1.5;">
          اضغط على أي زر بالأسفل لتشغيل الصوت الفعلي على هاتفك. بمجرد الضغط، يتم تفعيل سماعة الموبايل بالكامل للنظام.
        </p>

        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1.25rem;">
          <button type="button" class="btn-secondary" style="background: rgba(6, 182, 212, 0.15); border-color: #06b6d4; color: #67e8f9; padding: 0.85rem; border-radius: 12px; font-weight: 700; display: flex; flex-direction: column; align-items: center; gap: 6px;" onclick="AudioEngine.processing()">
            <span style="font-size: 1.4rem;">⚡</span>
            <span>صوت Processing</span>
            <small style="font-size: 0.7rem; opacity: 0.8;">معالجة العمليات</small>
          </button>

          <button type="button" class="btn-secondary" style="background: rgba(34, 197, 94, 0.15); border-color: #22c55e; color: #4ade80; padding: 0.85rem; border-radius: 12px; font-weight: 700; display: flex; flex-direction: column; align-items: center; gap: 6px;" onclick="AudioEngine.subscribed()">
            <span style="font-size: 1.4rem;">💰</span>
            <span>صوت Subscribed</span>
            <small style="font-size: 0.7rem; opacity: 0.8;">تأكيد الدفع والاشتراك</small>
          </button>

          <button type="button" class="btn-secondary" style="background: rgba(239, 68, 68, 0.15); border-color: #ef4444; color: #f87171; padding: 0.85rem; border-radius: 12px; font-weight: 700; display: flex; flex-direction: column; align-items: center; gap: 6px;" onclick="AudioEngine.expired()">
            <span style="font-size: 1.4rem;">🚨</span>
            <span>صوت Expired</span>
            <small style="font-size: 0.7rem; opacity: 0.8;">إنذار انتهاء الاشتراك</small>
          </button>

          <button type="button" class="btn-secondary" style="background: rgba(168, 85, 247, 0.15); border-color: #a855f7; color: #e9d5ff; padding: 0.85rem; border-radius: 12px; font-weight: 700; display: flex; flex-direction: column; align-items: center; gap: 6px;" onclick="AudioEngine.chime()">
            <span style="font-size: 1.4rem;">🔔</span>
            <span>رنة Chime</span>
            <small style="font-size: 0.7rem; opacity: 0.8;">انتهاء وقت الجهاز</small>
          </button>
        </div>

        <div style="background: rgba(15, 23, 42, 0.8); border: 1px solid rgba(148, 163, 184, 0.25); border-radius: 10px; padding: 0.85rem; font-size: 0.8rem; color: #94a3b8; line-height: 1.6;">
          <strong style="color: #facc15;">💡 نصائح هامة لضمان سماع الصوت بوضوح على الموبايل:</strong>
          <ul style="margin-top: 0.4rem; padding-right: 1.2rem;">
            <li>تأكد من رفع <strong>صوت الوسائط (Media Volume)</strong> لأعلى درجة وليس صوت نغمة الرنين فقط.</li>
            <li>في هواتف <strong>iPhone</strong>: تأكد من إيقاف الزر الجانبي لوضع الصامت (Silent Switch).</li>
            <li>المتصفحات بتطلب لمس الشاشة مرة واحدة للسماح بتشغيل الأصوات، وده بيحصل تلقائياً أول ما تضغط على أي زرار.</li>
          </ul>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn-secondary" onclick="closeAudioTestModal()">إغلاق</button>
      </div>
    </div>
  </div>

  <script src="/app.js?v=voice_audio_v10" onerror="this.onerror=null; this.src='app.js?v=voice_audio_v10';"></script>
  <script>
    if (window.lucide) {
      lucide.createIcons();
    }
  </script>


  <script>
    function togglePasswordVisibility(inputId, btn) {
      const input = document.getElementById(inputId);
      if (!input) return;
      const isPass = input.type === 'password';
      input.type = isPass ? 'text' : 'password';
      const eyeSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>';
      const eyeOffSvg = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><line x1="2" x2="22" y1="2" y2="22"/></svg>';
      btn.innerHTML = isPass ? eyeOffSvg : eyeSvg;
      btn.style.color = isPass ? '#0066ff' : '#64748b';
    }
  </script>
</body>
</html>
