From 7541a042a706a4fe2d3d18a7867f7a41c900e2d3 Mon Sep 17 00:00:00 2001
From: Hamza-Ayed <hamzaayedflutter@gmail.com>
Date: Sat, 9 May 2026 20:51:16 +0300
Subject: [PATCH] Update: 2026-05-09 20:51:16

---
 public/shell.php | 2031 +++++++++++++++++++++++++++-------------------
 1 file changed, 1218 insertions(+), 813 deletions(-)

diff --git a/public/shell.php b/public/shell.php
index b35ebbf..8d1305f 100644
--- a/public/shell.php
+++ b/public/shell.php
@@ -7,53 +7,51 @@
     <title>مُصادَق | لوحة التحكم الذكية</title>
     <link rel="icon" type="image/jpeg" href="assets/img/logo.jpg">
     <link
-        href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&family=El+Messiri:wght@500;600;700&display=swap"
+        href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&family=Inter:wght@400;500;600;700&display=swap"
         rel="stylesheet">
     <script src="https://cdn.tailwindcss.com"></script>
     <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/qrious/4.0.2/qrious.min.js"></script>
     <style>
         /* ═══════════════════════════════════════════════
-           MUSADDAQ DESIGN SYSTEM - LIGHT PROFESSIONAL
+           MUSADDAQ 2.0 — MODERN PROFESSIONAL DESIGN
         ═══════════════════════════════════════════════ */
         :root {
-            --navy: #16325c;
-            --navy-mid: #1e4080;
-            --navy-light: #2d5fa6;
-            --navy-hover: rgba(22, 50, 92, 0.07);
-            --gold: #b07d1a;
-            --gold-bright: #f5a623;
-            --gold-subtle: #fef5e0;
-            --teal: #047857;
-            --teal-mid: #059669;
-            --teal-subtle: #d1fae5;
-            --amber: #b45309;
-            --amber-subtle: #fef3c7;
-            --red: #b91c1c;
-            --red-subtle: #fee2e2;
-            --blue: #1d4ed8;
-            --blue-subtle: #dbeafe;
-            --purple: #6d28d9;
-            --purple-subtle: #ede9fe;
-            --bg: #edf0f5;
-            --bg-card: #ffffff;
-            --border: #dde3ed;
-            --border-mid: #c8d2e0;
-            --text-1: #0c1a35;
-            --text-2: #3d5166;
-            --text-3: #8496ac;
-            --shadow-sm: 0 1px 4px rgba(15, 40, 80, 0.06);
-            --shadow: 0 2px 12px rgba(15, 40, 80, 0.08);
-            --shadow-md: 0 6px 24px rgba(15, 40, 80, 0.12);
-            --shadow-lg: 0 16px 48px rgba(15, 40, 80, 0.18);
+            --primary: #6366f1;
+            --primary-dark: #4f46e5;
+            --primary-light: #818cf8;
+            --primary-ghost: #eef2ff;
+            --accent: #f59e0b;
+            --accent-light: #fffbeb;
+            --success: #10b981;
+            --success-light: #d1fae5;
+            --danger: #ef4444;
+            --danger-light: #fee2e2;
+            --warning: #f59e0b;
+            --info: #3b82f6;
+            --info-light: #dbeafe;
 
-            /* Sidebar tokens */
-            --sb-bg: #16325c;
-            --sb-text: rgba(255, 255, 255, 0.62);
-            --sb-text-a: #ffffff;
-            --sb-hover: rgba(255, 255, 255, 0.07);
-            --sb-active: rgba(245, 166, 35, 0.14);
-            --sb-accent: #f5a623;
+            --bg: #f8fafc;
+            --surface: #ffffff;
+            --surface-hover: #f8fafc;
+            --border: #e2e8f0;
+            --border-light: #f1f5f9;
+
+            --text-1: #0f172a;
+            --text-2: #475569;
+            --text-3: #94a3b8;
+
+            --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+            --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+            --shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+            --shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+            --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.15);
+
+            --radius-sm: 8px;
+            --radius: 12px;
+            --radius-lg: 16px;
+            --radius-xl: 20px;
+            --radius-2xl: 24px;
         }
 
         * {
@@ -63,21 +61,23 @@
         }
 
         body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'IBM Plex Sans Arabic', Roboto, Helvetica, Arial, sans-serif;
+            font-family: 'Tajawal', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
             background: var(--bg);
             color: var(--text-1);
             -webkit-font-smoothing: antialiased;
-            font-size: 14px;
+            font-size: 15px;
             line-height: 1.6;
         }
 
-        .premium-font {
-            font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
-        }
-
-        h1, h2, h3, h4, h5, h6 {
-            font-family: 'El Messiri', 'IBM Plex Sans Arabic', -apple-system, sans-serif;
-            font-weight: 700;
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+            font-family: 'Tajawal', sans-serif;
+            font-weight: 800;
+            letter-spacing: -0.02em;
         }
 
         [x-cloak] {
@@ -86,8 +86,8 @@
 
         /* ── SCROLLBAR ─────────────────────────────── */
         ::-webkit-scrollbar {
-            width: 5px;
-            height: 5px;
+            width: 6px;
+            height: 6px;
         }
 
         ::-webkit-scrollbar-track {
@@ -95,174 +95,187 @@
         }
 
         ::-webkit-scrollbar-thumb {
-            background: #c8d2e0;
+            background: #cbd5e1;
             border-radius: 10px;
         }
 
+        ::-webkit-scrollbar-thumb:hover {
+            background: #94a3b8;
+        }
+
         /* ── SIDEBAR ───────────────────────────────── */
         .sidebar {
-            width: 256px;
-            min-width: 256px;
-            background: linear-gradient(175deg, #1a3d6e 0%, #0f2247 100%);
+            width: 270px;
+            min-width: 270px;
+            background: linear-gradient(180deg, #1e1b4b 0%, #312e81 50%, #1e1b4b 100%);
             display: flex;
             flex-direction: column;
             height: 100vh;
             position: sticky;
             top: 0;
-            box-shadow: -6px 0 30px rgba(0, 0, 0, 0.18);
             z-index: 50;
+            border-left: 1px solid rgba(255, 255, 255, 0.06);
         }
 
         .sb-logo-area {
-            padding: 28px 20px 20px;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.07);
+            padding: 32px 24px 24px;
         }
 
         .sb-logo-mark {
-            width: 40px;
-            height: 40px;
-            background: var(--gold-bright);
-            border-radius: 12px;
+            width: 44px;
+            height: 44px;
+            background: linear-gradient(135deg, var(--accent) 0%, #fbbf24 100%);
+            border-radius: 14px;
             display: flex;
             align-items: center;
             justify-content: center;
-            font-size: 18px;
-            color: var(--navy);
+            font-size: 20px;
+            color: #1e1b4b;
             flex-shrink: 0;
-            box-shadow: 0 4px 12px rgba(245, 166, 35, 0.4);
+            box-shadow: 0 8px 16px rgba(245, 158, 11, 0.3);
         }
 
         .sb-brand-name {
-            font-family: 'El Messiri', sans-serif;
-            font-size: 22px;
-            font-weight: 700;
+            font-family: 'Tajawal', sans-serif;
+            font-size: 24px;
+            font-weight: 900;
             color: white;
+            letter-spacing: 0;
         }
 
         .sb-brand-sub {
-            font-size: 10px;
-            color: rgba(255, 255, 255, 0.35);
-            letter-spacing: 0.08em;
-            margin-top: 2px;
+            font-size: 11px;
+            color: rgba(255, 255, 255, 0.4);
+            font-weight: 500;
+            margin-top: 4px;
         }
 
         .sb-nav {
             flex: 1;
-            padding: 16px 12px;
+            padding: 16px 14px;
             display: flex;
             flex-direction: column;
-            gap: 3px;
+            gap: 4px;
             overflow-y: auto;
         }
 
         .sb-section-label {
             font-size: 10px;
-            font-weight: 700;
+            font-weight: 800;
             color: rgba(255, 255, 255, 0.25);
-            letter-spacing: 0.12em;
+            letter-spacing: 0.1em;
             text-transform: uppercase;
-            padding: 12px 8px 6px;
-            margin-top: 6px;
+            padding: 16px 12px 8px;
+            margin-top: 4px;
         }
 
         .nav-btn {
             display: flex;
             align-items: center;
             gap: 12px;
-            padding: 10px 12px;
-            border-radius: 11px;
+            padding: 11px 14px;
+            border-radius: 14px;
             cursor: pointer;
             border: none;
             background: transparent;
-            color: var(--sb-text);
-            font-family: 'IBM Plex Sans Arabic', sans-serif;
-            font-size: 14px;
-            font-weight: 500;
+            color: rgba(255, 255, 255, 0.55);
+            font-family: 'Tajawal', sans-serif;
+            font-size: 15px;
+            font-weight: 600;
             width: 100%;
             text-align: right;
-            transition: all 0.18s ease;
+            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
             position: relative;
         }
 
         .nav-btn:hover {
-            background: var(--sb-hover);
+            background: rgba(255, 255, 255, 0.08);
             color: white;
+            transform: translateX(-2px);
         }
 
         .nav-btn.active {
-            background: var(--sb-active);
+            background: rgba(99, 102, 241, 0.25);
             color: white;
-            font-weight: 600;
+            font-weight: 700;
+            box-shadow: 0 4px 15px rgba(99, 102, 241, 0.2);
         }
 
         .nav-btn.active::before {
             content: '';
             position: absolute;
             right: 0;
-            top: 20%;
-            bottom: 20%;
+            top: 25%;
+            bottom: 25%;
             width: 3px;
-            background: var(--sb-accent);
+            background: var(--accent);
             border-radius: 3px 0 0 3px;
         }
 
         .nav-icon {
-            width: 34px;
-            height: 34px;
-            border-radius: 9px;
-            background: rgba(255, 255, 255, 0.08);
+            width: 36px;
+            height: 36px;
+            border-radius: 10px;
+            background: rgba(255, 255, 255, 0.06);
             display: flex;
             align-items: center;
             justify-content: center;
-            font-size: 15px;
+            font-size: 16px;
             flex-shrink: 0;
-            transition: all 0.18s;
+            transition: all 0.2s;
         }
 
         .nav-btn.active .nav-icon {
-            background: var(--sb-accent);
-            box-shadow: 0 3px 10px rgba(245, 166, 35, 0.35);
+            background: var(--primary);
+            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
         }
 
         .nav-btn:hover .nav-icon {
-            background: rgba(255, 255, 255, 0.14);
+            background: rgba(255, 255, 255, 0.12);
         }
 
         .sb-user-area {
             padding: 16px;
-            border-top: 1px solid rgba(255, 255, 255, 0.07);
+            border-top: 1px solid rgba(255, 255, 255, 0.06);
+            margin-top: auto;
         }
 
         .sb-user-card {
             display: flex;
             align-items: center;
-            gap: 10px;
-            padding: 10px;
-            border-radius: 12px;
+            gap: 12px;
+            padding: 12px;
+            border-radius: 16px;
             background: rgba(255, 255, 255, 0.05);
             margin-bottom: 10px;
+            border: 1px solid rgba(255, 255, 255, 0.05);
+            transition: all 0.2s;
+        }
+
+        .sb-user-card:hover {
+            background: rgba(255, 255, 255, 0.08);
         }
 
         .user-avatar-sb {
-            width: 36px;
-            height: 36px;
-            border-radius: 9px;
-            background: var(--gold-bright);
-            color: var(--navy);
+            width: 38px;
+            height: 38px;
+            border-radius: 10px;
+            background: linear-gradient(135deg, var(--accent), #fbbf24);
+            color: #1e1b4b;
             display: flex;
             align-items: center;
             justify-content: center;
-            font-weight: 700;
-            font-size: 15px;
+            font-weight: 800;
+            font-size: 16px;
             flex-shrink: 0;
         }
 
         .role-pill {
             display: inline-block;
-            padding: 1px 8px;
+            padding: 2px 10px;
             border-radius: 20px;
             font-size: 10px;
-            font-weight: 600;
+            font-weight: 700;
             background: rgba(255, 255, 255, 0.1);
             color: rgba(255, 255, 255, 0.5);
             text-transform: uppercase;
@@ -274,21 +287,21 @@
             display: flex;
             align-items: center;
             gap: 8px;
-            padding: 8px 10px;
-            border-radius: 9px;
+            padding: 10px 12px;
+            border-radius: 12px;
             background: transparent;
             border: none;
-            color: rgba(255, 255, 255, 0.4);
+            color: rgba(255, 255, 255, 0.35);
             cursor: pointer;
-            font-family: 'IBM Plex Sans Arabic', sans-serif;
-            font-size: 13px;
-            font-weight: 500;
-            transition: all 0.18s;
+            font-family: 'Tajawal', sans-serif;
+            font-size: 14px;
+            font-weight: 600;
+            transition: all 0.2s;
             text-align: right;
         }
 
         .logout-btn:hover {
-            background: rgba(220, 38, 38, 0.12);
+            background: rgba(239, 68, 68, 0.15);
             color: #fca5a5;
         }
 
@@ -299,12 +312,14 @@
             display: flex;
             flex-direction: column;
             min-width: 0;
+            background: var(--bg);
         }
 
         .page-header {
-            padding: 28px 36px 24px;
-            background: white;
-            border-bottom: 1px solid var(--border);
+            padding: 24px 32px;
+            background: rgba(255, 255, 255, 0.8);
+            backdrop-filter: blur(12px);
+            border-bottom: 1px solid var(--border-light);
             display: flex;
             align-items: center;
             justify-content: space-between;
@@ -312,215 +327,245 @@
             position: sticky;
             top: 0;
             z-index: 40;
-            box-shadow: var(--shadow-sm);
         }
 
         .page-title {
-            font-size: 22px;
-            font-weight: 700;
+            font-size: 26px;
+            font-weight: 900;
             color: var(--text-1);
+            line-height: 1.2;
         }
 
         .page-subtitle {
-            font-size: 13px;
+            font-size: 14px;
             color: var(--text-3);
-            margin-top: 2px;
+            margin-top: 4px;
+            font-weight: 500;
         }
 
         .page-content {
-            padding: 28px 36px;
+            padding: 32px;
             flex: 1;
         }
 
         /* ── STAT CARDS ────────────────────────────── */
+        .stats-grid {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 20px;
+            margin-bottom: 32px;
+        }
+
         .stat-card {
-            background: white;
-            border-radius: 16px;
+            background: var(--surface);
+            border-radius: var(--radius-xl);
             padding: 24px;
-            border: 1px solid var(--border);
+            border: 1px solid var(--border-light);
             box-shadow: var(--shadow-sm);
             position: relative;
             overflow: hidden;
-            transition: transform 0.2s, box-shadow 0.2s;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         }
 
         .stat-card:hover {
-            transform: translateY(-2px);
-            box-shadow: var(--shadow);
-        }
-
-        .stat-icon-box {
-            width: 50px;
-            height: 50px;
-            border-radius: 14px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 22px;
-            margin-bottom: 16px;
-        }
-
-        .stat-label {
-            font-size: 12px;
-            font-weight: 700;
-            color: var(--text-3);
-            text-transform: uppercase;
-            letter-spacing: 0.06em;
-        }
-
-        .stat-value {
-            font-size: 40px;
-            font-weight: 700;
-            margin-top: 6px;
-            line-height: 1;
-            font-family: 'El Messiri', sans-serif;
+            transform: translateY(-4px);
+            box-shadow: var(--shadow-md);
+            border-color: var(--border);
         }
 
         .stat-card::after {
             content: '';
             position: absolute;
-            left: 0;
             top: 0;
-            bottom: 0;
-            width: 4px;
-            border-radius: 0 3px 3px 0;
+            right: 0;
+            left: 0;
+            height: 4px;
+            border-radius: 4px 4px 0 0;
         }
 
-        .stat-navy::after {
-            background: var(--navy);
+        .stat-primary::after {
+            background: linear-gradient(90deg, var(--primary), var(--primary-light));
         }
 
-        .stat-navy .stat-icon-box {
-            background: var(--navy-hover);
+        .stat-accent::after {
+            background: linear-gradient(90deg, var(--accent), #fbbf24);
         }
 
-        .stat-navy .stat-value {
-            color: var(--navy);
+        .stat-success::after {
+            background: linear-gradient(90deg, var(--success), #34d399);
         }
 
-        .stat-amber::after {
-            background: var(--gold-bright);
+        .stat-danger::after {
+            background: linear-gradient(90deg, var(--danger), #f87171);
         }
 
-        .stat-amber .stat-icon-box {
-            background: var(--amber-subtle);
+        .stat-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 16px;
         }
 
-        .stat-amber .stat-value {
-            color: var(--amber);
+        .stat-icon-box {
+            width: 48px;
+            height: 48px;
+            border-radius: 14px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 24px;
         }
 
-        .stat-teal::after {
-            background: var(--teal);
+        .stat-primary .stat-icon-box {
+            background: var(--primary-ghost);
         }
 
-        .stat-teal .stat-icon-box {
-            background: var(--teal-subtle);
+        .stat-accent .stat-icon-box {
+            background: var(--accent-light);
         }
 
-        .stat-teal .stat-value {
-            color: var(--teal);
+        .stat-success .stat-icon-box {
+            background: var(--success-light);
         }
 
-        .stat-red::after {
-            background: #e11d48;
+        .stat-danger .stat-icon-box {
+            background: var(--danger-light);
         }
 
-        .stat-red .stat-icon-box {
-            background: #fff1f2;
+        .stat-label {
+            font-size: 13px;
+            font-weight: 700;
+            color: var(--text-3);
+            text-transform: uppercase;
+            letter-spacing: 0.04em;
         }
 
-        .stat-red .stat-value {
-            color: #e11d48;
+        .stat-value {
+            font-size: 36px;
+            font-weight: 900;
+            margin-top: 4px;
+            line-height: 1;
+            font-family: 'Tajawal', sans-serif;
+            color: var(--text-1);
+        }
+
+        .stat-primary .stat-value {
+            color: var(--primary-dark);
+        }
+
+        .stat-accent .stat-value {
+            color: #b45309;
+        }
+
+        .stat-success .stat-value {
+            color: #047857;
+        }
+
+        .stat-danger .stat-value {
+            color: #b91c1c;
         }
 
         /* ── QUICK ACTIONS ─────────────────────────── */
+        .quick-actions-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+            gap: 16px;
+        }
+
         .quick-action-card {
-            background: white;
-            border: 1px solid var(--border);
-            border-radius: 14px;
-            padding: 18px 20px;
+            background: var(--surface);
+            border: 1px solid var(--border-light);
+            border-radius: var(--radius-lg);
+            padding: 20px;
             display: flex;
             align-items: center;
-            gap: 14px;
+            gap: 16px;
             cursor: pointer;
-            transition: all 0.2s;
+            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
             text-align: right;
             box-shadow: var(--shadow-sm);
         }
 
         .quick-action-card:hover {
-            border-color: var(--navy-light);
-            box-shadow: 0 4px 16px rgba(22, 50, 92, 0.12);
-            transform: translateY(-1px);
+            border-color: var(--primary-light);
+            box-shadow: var(--shadow-md), var(--shadow-glow);
+            transform: translateY(-2px) scale(1.01);
         }
 
         .qa-icon {
-            width: 44px;
-            height: 44px;
-            border-radius: 12px;
+            width: 48px;
+            height: 48px;
+            border-radius: 14px;
             display: flex;
             align-items: center;
             justify-content: center;
-            font-size: 20px;
+            font-size: 22px;
             flex-shrink: 0;
+            transition: transform 0.2s;
+        }
+
+        .quick-action-card:hover .qa-icon {
+            transform: scale(1.1) rotate(-5deg);
         }
 
         /* ── DATA TABLE ────────────────────────────── */
         .table-container {
-            background: white;
-            border-radius: 16px;
-            border: 1px solid var(--border);
+            background: var(--surface);
+            border-radius: var(--radius-xl);
+            border: 1px solid var(--border-light);
             box-shadow: var(--shadow-sm);
             overflow: hidden;
         }
 
         .table-top-bar {
-            padding: 18px 24px;
-            border-bottom: 1px solid var(--border);
+            padding: 20px 24px;
+            border-bottom: 1px solid var(--border-light);
             display: flex;
             align-items: center;
             gap: 12px;
+            flex-wrap: wrap;
         }
 
         .table-top-bar h3 {
-            font-size: 16px;
-            font-weight: 700;
+            font-size: 18px;
+            font-weight: 800;
             color: var(--text-1);
         }
 
         .table-count {
-            padding: 2px 10px;
+            padding: 3px 12px;
             background: var(--bg);
             border: 1px solid var(--border);
             border-radius: 20px;
             font-size: 12px;
-            font-weight: 600;
+            font-weight: 700;
             color: var(--text-3);
         }
 
         .data-table {
             width: 100%;
-            border-collapse: collapse;
+            border-collapse: separate;
+            border-spacing: 0;
         }
 
         .data-table th {
-            padding: 13px 20px;
+            padding: 14px 20px;
             text-align: right;
             font-size: 11px;
-            font-weight: 700;
+            font-weight: 800;
             color: var(--text-3);
             text-transform: uppercase;
-            letter-spacing: 0.07em;
-            border-bottom: 1px solid var(--border);
+            letter-spacing: 0.06em;
+            border-bottom: 1px solid var(--border-light);
             background: #f8fafc;
             white-space: nowrap;
         }
 
         .data-table td {
-            padding: 15px 20px;
-            border-bottom: 1px solid #f0f4f8;
+            padding: 16px 20px;
+            border-bottom: 1px solid var(--border-light);
             vertical-align: middle;
+            transition: background 0.15s;
         }
 
         .data-table tbody tr:last-child td {
@@ -528,75 +573,85 @@
         }
 
         .data-table tbody tr {
-            transition: background 0.14s;
+            transition: all 0.15s;
         }
 
-        .data-table tbody tr:hover {
-            background: #f8fafd;
+        .data-table tbody tr:hover td {
+            background: #f8fafc;
         }
 
         .empty-row {
             text-align: center;
-            padding: 56px 24px;
+            padding: 64px 24px;
         }
 
         .empty-icon {
-            font-size: 42px;
-            opacity: 0.25;
+            font-size: 56px;
+            opacity: 0.2;
             display: block;
-            margin-bottom: 12px;
+            margin-bottom: 16px;
+            filter: grayscale(100%);
         }
 
         .empty-msg {
-            font-size: 15px;
+            font-size: 16px;
             color: var(--text-3);
+            font-weight: 500;
         }
 
         /* ── BADGES ────────────────────────────────── */
         .badge {
             display: inline-flex;
             align-items: center;
-            gap: 5px;
-            padding: 4px 11px;
+            gap: 6px;
+            padding: 5px 12px;
             border-radius: 20px;
             font-size: 12px;
-            font-weight: 600;
+            font-weight: 700;
             white-space: nowrap;
+            border: 1px solid transparent;
         }
 
-        .badge-teal {
-            background: var(--teal-subtle);
-            color: var(--teal);
+        .badge-success {
+            background: var(--success-light);
+            color: #047857;
+            border-color: rgba(16, 185, 129, 0.2);
         }
 
-        .badge-amber {
-            background: var(--amber-subtle);
-            color: var(--amber);
+        .badge-warning {
+            background: var(--accent-light);
+            color: #92400e;
+            border-color: rgba(245, 158, 11, 0.2);
         }
 
-        .badge-blue {
-            background: var(--blue-subtle);
-            color: var(--blue);
+        .badge-info {
+            background: var(--info-light);
+            color: #1d4ed8;
+            border-color: rgba(59, 130, 246, 0.2);
         }
 
         .badge-gray {
             background: #f1f5f9;
             color: #64748b;
+            border-color: #e2e8f0;
         }
 
-        .badge-navy {
-            background: var(--navy-hover);
-            color: var(--navy);
+        .badge-primary {
+            background: var(--primary-ghost);
+            color: var(--primary-dark);
+            border-color: rgba(99, 102, 241, 0.2);
         }
 
-        .badge-red {
-            background: var(--red-subtle);
-            color: var(--red);
+        .badge-danger {
+            background: var(--danger-light);
+            color: #991b1b;
+            border-color: rgba(239, 68, 68, 0.2);
         }
 
         .badge-purple {
-            background: var(--purple-subtle);
-            color: var(--purple);
+            background: #f3e8ff;
+            color: #7e22ce;
+            border-color: rgba(168, 85, 247, 0.2);
         }
 
         .badge-dot {
@@ -611,67 +666,72 @@
         .btn {
             display: inline-flex;
             align-items: center;
-            gap: 7px;
+            justify-content: center;
+            gap: 8px;
             padding: 10px 20px;
-            border-radius: 10px;
-            font-family: 'IBM Plex Sans Arabic', sans-serif;
+            border-radius: 12px;
+            font-family: 'Tajawal', sans-serif;
             font-size: 14px;
-            font-weight: 600;
+            font-weight: 700;
             cursor: pointer;
             border: none;
-            transition: all 0.18s;
+            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
             white-space: nowrap;
+            line-height: 1.5;
         }
 
         .btn:disabled {
-            opacity: 0.6;
+            opacity: 0.5;
             cursor: not-allowed;
+            transform: none !important;
         }
 
-        .btn-navy {
-            background: var(--navy);
+        .btn-primary {
+            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
             color: white;
-            box-shadow: 0 2px 8px rgba(22, 50, 92, 0.22);
+            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25), 0 1px 3px rgba(99, 102, 241, 0.1);
         }
 
-        .btn-navy:hover:not(:disabled) {
-            background: var(--navy-mid);
-            transform: translateY(-1px);
-            box-shadow: 0 4px 14px rgba(22, 50, 92, 0.3);
+        .btn-primary:hover:not(:disabled) {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 20px rgba(99, 102, 241, 0.35), 0 2px 4px rgba(99, 102, 241, 0.1);
         }
 
-        .btn-teal {
-            background: var(--teal);
+        .btn-success {
+            background: linear-gradient(135deg, var(--success) 0%, #059669 100%);
             color: white;
-            box-shadow: 0 2px 8px rgba(4, 120, 87, 0.22);
+            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
         }
 
-        .btn-teal:hover:not(:disabled) {
-            background: #065f46;
-            transform: translateY(-1px);
+        .btn-success:hover:not(:disabled) {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 20px rgba(16, 185, 129, 0.35);
         }
 
         .btn-ghost {
-            background: white;
+            background: var(--surface);
             color: var(--text-2);
-            border: 1px solid var(--border);
+            border: 1.5px solid var(--border);
+            font-weight: 600;
         }
 
         .btn-ghost:hover {
             background: var(--bg);
-            border-color: var(--border-mid);
+            border-color: var(--text-3);
+            color: var(--text-1);
         }
 
         .btn-danger-ghost {
             background: transparent;
-            color: var(--red);
+            color: var(--danger);
             border: none;
-            padding: 7px 12px;
-            border-radius: 8px;
+            padding: 8px 12px;
+            border-radius: 10px;
+            font-weight: 600;
         }
 
         .btn-danger-ghost:hover {
-            background: var(--red-subtle);
+            background: var(--danger-light);
         }
 
         .btn-sm {
@@ -680,113 +740,118 @@
         }
 
         .btn-icon {
-            padding: 8px 12px;
+            padding: 8px;
+            width: 36px;
+            height: 36px;
         }
 
         .btn-table-action {
             display: inline-flex;
             align-items: center;
-            gap: 5px;
-            padding: 6px 13px;
-            border-radius: 8px;
+            gap: 6px;
+            padding: 7px 14px;
+            border-radius: 10px;
             font-family: inherit;
             font-size: 12px;
-            font-weight: 600;
+            font-weight: 700;
             cursor: pointer;
             border: none;
-            transition: all 0.16s;
+            transition: all 0.2s;
         }
 
-        .btn-ta-navy {
-            background: var(--navy-hover);
-            color: var(--navy);
+        .btn-ta-primary {
+            background: var(--primary-ghost);
+            color: var(--primary-dark);
         }
 
-        .btn-ta-navy:hover {
-            background: var(--navy);
+        .btn-ta-primary:hover {
+            background: var(--primary);
+            color: white;
+            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
+        }
+
+        .btn-ta-success {
+            background: var(--success-light);
+            color: #047857;
+        }
+
+        .btn-ta-success:hover {
+            background: var(--success);
             color: white;
         }
 
-        .btn-ta-teal {
-            background: var(--teal-subtle);
-            color: var(--teal);
-        }
-
-        .btn-ta-teal:hover {
-            background: var(--teal);
-            color: white;
-        }
-
-        .btn-ta-red {
+        .btn-ta-danger {
             background: transparent;
             color: #94a3b8;
-            border-radius: 8px;
-            padding: 6px 10px;
+            border-radius: 10px;
+            padding: 7px 10px;
         }
 
-        .btn-ta-red:hover {
-            background: var(--red-subtle);
-            color: var(--red);
+        .btn-ta-danger:hover {
+            background: var(--danger-light);
+            color: var(--danger);
         }
 
         /* ── FORM ELEMENTS ─────────────────────────── */
         .form-group {
             display: flex;
             flex-direction: column;
-            gap: 6px;
+            gap: 8px;
         }
 
         .form-label {
             font-size: 13px;
-            font-weight: 600;
+            font-weight: 700;
             color: var(--text-2);
             display: flex;
             align-items: center;
-            gap: 5px;
+            gap: 6px;
         }
 
         .form-label-sub {
             font-size: 11px;
             color: var(--text-3);
-            font-weight: 400;
+            font-weight: 500;
         }
 
         .form-input {
             width: 100%;
-            padding: 11px 14px;
+            padding: 12px 16px;
             border: 1.5px solid var(--border);
-            border-radius: 10px;
-            font-family: 'IBM Plex Sans Arabic', sans-serif;
-            font-size: 14px;
+            border-radius: 12px;
+            font-family: 'Tajawal', sans-serif;
+            font-size: 15px;
             color: var(--text-1);
-            background: white;
+            background: var(--surface);
             outline: none;
-            transition: border-color 0.18s, box-shadow 0.18s;
+            transition: all 0.2s;
             direction: rtl;
         }
 
         .form-input:focus {
-            border-color: var(--navy);
-            box-shadow: 0 0 0 3px rgba(22, 50, 92, 0.08);
+            border-color: var(--primary);
+            box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
         }
 
         .form-input::placeholder {
             color: var(--text-3);
+            font-weight: 400;
         }
 
         .form-input.mono {
-            font-family: 'Outfit', sans-serif;
+            font-family: 'Inter', monospace;
+            font-weight: 500;
         }
 
         .form-section-title {
             font-size: 11px;
-            font-weight: 700;
+            font-weight: 800;
             color: var(--text-3);
             text-transform: uppercase;
             letter-spacing: 0.08em;
             padding-bottom: 12px;
-            border-bottom: 1px solid var(--border);
-            margin-bottom: 4px;
+            border-bottom: 1px solid var(--border-light);
+            margin-bottom: 8px;
             display: flex;
             align-items: center;
             gap: 8px;
@@ -796,29 +861,54 @@
         .modal-backdrop {
             position: fixed;
             inset: 0;
-            background: rgba(12, 26, 53, 0.55);
-            backdrop-filter: blur(5px);
+            background: rgba(15, 23, 42, 0.5);
+            backdrop-filter: blur(8px);
             display: flex;
             align-items: center;
             justify-content: center;
             padding: 24px;
             z-index: 120;
+            animation: fadeIn 0.2s ease;
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+            }
+
+            to {
+                opacity: 1;
+            }
         }
 
         .modal-box {
-            background: white;
-            border-radius: 20px;
+            background: var(--surface);
+            border-radius: var(--radius-2xl);
             box-shadow: var(--shadow-lg);
             width: 100%;
             max-width: 520px;
             max-height: 92vh;
             overflow-y: auto;
+            animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            border: 1px solid var(--border-light);
         }
 
         .modal-box-lg {
             max-width: 680px;
         }
 
+        @keyframes slideUp {
+            from {
+                opacity: 0;
+                transform: translateY(20px) scale(0.98);
+            }
+
+            to {
+                opacity: 1;
+                transform: translateY(0) scale(1);
+            }
+        }
+
         .modal-head {
             padding: 24px 28px 0;
             display: flex;
@@ -827,117 +917,154 @@
         }
 
         .modal-head-icon {
-            width: 46px;
-            height: 46px;
-            border-radius: 13px;
+            width: 48px;
+            height: 48px;
+            border-radius: 14px;
             display: flex;
             align-items: center;
             justify-content: center;
-            font-size: 20px;
+            font-size: 22px;
             flex-shrink: 0;
         }
 
-        .modal-head-icon.navy {
-            background: var(--navy-hover);
+        .modal-head-icon.primary {
+            background: var(--primary-ghost);
         }
 
-        .modal-head-icon.gold {
-            background: var(--gold-subtle);
+        .modal-head-icon.accent {
+            background: var(--accent-light);
         }
 
-        .modal-head-icon.teal {
-            background: var(--teal-subtle);
+        .modal-head-icon.success {
+            background: var(--success-light);
         }
 
         .modal-title {
-            font-size: 19px;
-            font-weight: 700;
+            font-size: 20px;
+            font-weight: 800;
             color: var(--text-1);
-            margin-bottom: 3px;
+            margin-bottom: 4px;
         }
 
         .modal-subtitle {
-            font-size: 13px;
+            font-size: 14px;
             color: var(--text-3);
+            font-weight: 500;
         }
 
         .modal-body {
-            padding: 22px 28px;
+            padding: 24px 28px;
         }
 
         .modal-footer {
-            padding: 18px 28px 24px;
+            padding: 20px 28px 24px;
             display: flex;
             gap: 10px;
         }
 
         .modal-divider {
             height: 1px;
-            background: var(--border);
+            background: var(--border-light);
             margin: 0 28px;
         }
 
         .modal-close-btn {
             margin-right: auto;
-            background: transparent;
+            background: var(--bg);
             border: none;
             color: var(--text-3);
-            font-size: 20px;
+            font-size: 18px;
             cursor: pointer;
-            padding: 2px;
+            padding: 6px;
+            width: 32px;
+            height: 32px;
+            border-radius: 10px;
             line-height: 1;
-            transition: color 0.15s;
+            transition: all 0.2s;
+            display: flex;
+            align-items: center;
+            justify-content: center;
         }
 
         .modal-close-btn:hover {
-            color: var(--text-1);
+            background: var(--danger-light);
+            color: var(--danger);
         }
 
         /* ── TOAST ─────────────────────────────────── */
         .toast-error {
             position: fixed;
-            top: 20px;
+            top: 24px;
             left: 50%;
             transform: translateX(-50%);
             z-index: 300;
             background: white;
-            border-right: 4px solid var(--red);
-            border-radius: 12px;
-            padding: 14px 22px;
-            box-shadow: var(--shadow-md);
-            color: var(--red);
-            font-weight: 600;
+            border-right: 4px solid var(--danger);
+            border-radius: 16px;
+            padding: 16px 28px;
+            box-shadow: var(--shadow-lg);
+            color: var(--danger);
+            font-weight: 700;
             font-size: 14px;
             max-width: 480px;
             width: 90%;
             text-align: center;
             cursor: pointer;
+            animation: slideDown 0.3s ease;
+        }
+
+        @keyframes slideDown {
+            from {
+                opacity: 0;
+                transform: translate(-50%, -20px);
+            }
+
+            to {
+                opacity: 1;
+                transform: translate(-50%, 0);
+            }
         }
 
         /* ── COMPANY / JOFOTARA STATUS ─────────────── */
         .jofotara-connected {
             display: inline-flex;
             align-items: center;
-            gap: 6px;
+            gap: 8px;
             cursor: pointer;
             font-size: 13px;
-            font-weight: 600;
-            color: var(--teal);
+            font-weight: 700;
+            color: var(--success);
+            padding: 6px 12px;
+            background: var(--success-light);
+            border-radius: 20px;
+            border: 1px solid rgba(16, 185, 129, 0.2);
+            transition: all 0.2s;
+        }
+
+        .jofotara-connected:hover {
+            background: #a7f3d0;
+            transform: scale(1.05);
         }
 
         .jofotara-connect {
             display: inline-flex;
             align-items: center;
-            gap: 6px;
+            gap: 8px;
             cursor: pointer;
             font-size: 13px;
-            font-weight: 600;
+            font-weight: 700;
             color: var(--text-3);
-            text-decoration: underline;
+            padding: 6px 12px;
+            background: var(--bg);
+            border-radius: 20px;
+            border: 1px solid var(--border);
+            transition: all 0.2s;
         }
 
         .jofotara-connect:hover {
-            color: var(--navy);
+            color: var(--primary);
+            border-color: var(--primary-light);
+            background: var(--primary-ghost);
         }
 
         .conn-dot {
@@ -948,8 +1075,8 @@
         }
 
         .conn-dot.on {
-            background: var(--teal);
-            box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.18);
+            background: var(--success);
+            box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
         }
 
         .conn-dot.off {
@@ -958,48 +1085,56 @@
 
         /* ── INVOICE VIEW PANEL ────────────────────── */
         .invoice-field-card {
-            background: #f8fafc;
-            border: 1px solid var(--border);
-            border-radius: 12px;
-            padding: 14px 16px;
+            background: var(--bg);
+            border: 1px solid var(--border-light);
+            border-radius: 14px;
+            padding: 16px;
+            transition: all 0.2s;
+        }
+
+        .invoice-field-card:hover {
+            border-color: var(--border);
+            box-shadow: var(--shadow-sm);
         }
 
         .invoice-field-label {
             font-size: 11px;
-            font-weight: 700;
+            font-weight: 800;
             color: var(--text-3);
             text-transform: uppercase;
             letter-spacing: 0.06em;
-            margin-bottom: 5px;
+            margin-bottom: 6px;
         }
 
         .invoice-field-value {
-            font-size: 15px;
-            font-weight: 600;
+            font-size: 16px;
+            font-weight: 700;
             color: var(--text-1);
         }
 
         /* ── STATS MODAL TABLE ─────────────────────── */
         .stats-table {
             width: 100%;
-            border-collapse: collapse;
-            font-size: 13px;
+            border-collapse: separate;
+            border-spacing: 0;
+            font-size: 14px;
         }
 
         .stats-table th {
-            padding: 10px 16px;
+            padding: 12px 16px;
             text-align: right;
-            font-weight: 700;
+            font-weight: 800;
             color: var(--text-3);
             font-size: 11px;
             text-transform: uppercase;
             background: #f8fafc;
-            border-bottom: 1px solid var(--border);
+            border-bottom: 1px solid var(--border-light);
+            letter-spacing: 0.05em;
         }
 
         .stats-table td {
-            padding: 12px 16px;
-            border-bottom: 1px solid #f0f4f8;
+            padding: 14px 16px;
+            border-bottom: 1px solid var(--border-light);
         }
 
         .stats-table tbody tr:last-child td {
@@ -1011,25 +1146,162 @@
         }
 
         .mini-stat {
-            background: white;
-            border: 1px solid var(--border);
-            border-radius: 14px;
+            background: var(--surface);
+            border: 1px solid var(--border-light);
+            border-radius: var(--radius-lg);
             padding: 20px;
+            transition: all 0.2s;
+        }
+
+        .mini-stat:hover {
+            box-shadow: var(--shadow);
+            border-color: var(--border);
         }
 
         .mini-stat-label {
             font-size: 11px;
-            font-weight: 700;
+            font-weight: 800;
             color: var(--text-3);
             text-transform: uppercase;
             letter-spacing: 0.05em;
-            margin-bottom: 8px;
+            margin-bottom: 10px;
         }
 
         .mini-stat-val {
-            font-size: 26px;
-            font-weight: 700;
-            font-family: 'El Messiri', sans-serif;
+            font-size: 28px;
+            font-weight: 900;
+            font-family: 'Tajawal', sans-serif;
+            color: var(--text-1);
+        }
+
+        /* ── SUBSCRIPTION PAGE ─────────────────────── */
+        .plan-card {
+            background: var(--surface);
+            border: 2px solid var(--border-light);
+            border-radius: var(--radius-2xl);
+            padding: 40px 32px;
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            position: relative;
+        }
+
+        .plan-card:hover {
+            border-color: var(--border);
+            box-shadow: var(--shadow-md);
+            transform: translateY(-4px);
+        }
+
+        .plan-card.active {
+            border-color: var(--accent);
+            box-shadow: var(--shadow-lg), 0 0 30px rgba(245, 158, 11, 0.15);
+            transform: scale(1.02);
+        }
+
+        .plan-badge {
+            position: absolute;
+            top: -12px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: linear-gradient(135deg, var(--accent), #fbbf24);
+            color: white;
+            padding: 5px 18px;
+            border-radius: 20px;
+            font-size: 12px;
+            font-weight: 800;
+            box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
+        }
+
+        .plan-price {
+            font-size: 52px;
+            font-weight: 900;
+            color: var(--primary-dark);
+            font-family: 'Tajawal', sans-serif;
+            line-height: 1;
+        }
+
+        .plan-features li {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            font-size: 15px;
+            color: var(--text-2);
+            font-weight: 500;
+        }
+
+        .plan-features .feature-check {
+            width: 22px;
+            height: 22px;
+            background: var(--success-light);
+            color: var(--success);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 11px;
+            flex-shrink: 0;
+        }
+
+        /* ── PROGRESS BAR ──────────────────────────── */
+        .progress-bar-bg {
+            height: 10px;
+            background: #f1f5f9;
+            border-radius: 10px;
+            overflow: hidden;
+        }
+
+        .progress-bar-fill {
+            height: 100%;
+            background: linear-gradient(90deg, var(--success), #34d399);
+            border-radius: 10px;
+            transition: width 1s ease;
+        }
+
+        /* ── RESPONSIVE ────────────────────────────── */
+        @media (max-width: 1280px) {
+            .stats-grid {
+                grid-template-columns: repeat(2, 1fr);
+            }
+        }
+
+        @media (max-width: 768px) {
+            .sidebar {
+                display: none;
+            }
+
+            .stats-grid {
+                grid-template-columns: 1fr;
+            }
+
+            .page-content {
+                padding: 20px;
+            }
+
+            .page-header {
+                padding: 16px 20px;
+            }
+        }
+
+        /* ── UTILITIES ─────────────────────────────── */
+        .flex-1 {
+            flex: 1;
+        }
+
+        .text-right {
+            text-align: right;
+        }
+
+        .text-center {
+            text-align: center;
+        }
+
+        .w-full {
+            width: 100%;
+        }
+
+        .justify-center {
+            justify-content: center;
         }
     </style>
 </head>
@@ -1047,9 +1319,10 @@
         <aside class="sidebar">
             <!-- Logo -->
             <div class="sb-logo-area">
-                <div style="display:flex; align-items:center; gap:12px;">
-                    <div class="sb-logo-mark" style="overflow:hidden; background:transparent;">
-                        <img src="assets/img/logo.jpg" alt="Musadaq Logo" style="width:100%; height:100%; object-fit:cover;">
+                <div style="display:flex; align-items:center; gap:14px;">
+                    <div class="sb-logo-mark" style="overflow:hidden;">
+                        <img src="assets/img/logo.jpg" alt="Musadaq Logo"
+                            style="width:100%; height:100%; object-fit:cover;">
                     </div>
                     <div>
                         <div class="sb-brand-name">مُصادَق</div>
@@ -1087,11 +1360,13 @@
 
                 <div x-show="user?.role === 'super_admin' || user?.role === 'admin'">
                     <div class="sb-section-label">الإدارة العليا</div>
-                    <button x-show="user?.role === 'super_admin'" @click="setPage('tenants')" class="nav-btn" :class="page==='tenants' ? 'active' : ''">
+                    <button x-show="user?.role === 'super_admin'" @click="setPage('tenants')" class="nav-btn"
+                        :class="page==='tenants' ? 'active' : ''">
                         <span class="nav-icon">🏢</span>
                         <span>المكاتب المحاسبية</span>
                     </button>
-                    <button @click="setPage('subscription')" class="nav-btn" :class="page==='subscription' ? 'active' : ''">
+                    <button @click="setPage('subscription')" class="nav-btn"
+                        :class="page==='subscription' ? 'active' : ''">
                         <span class="nav-icon">💎</span>
                         <span>اشتراكي</span>
                     </button>
@@ -1103,7 +1378,7 @@
                 <div class="sb-user-card">
                     <div class="user-avatar-sb" x-text="user?.name?.[0]"></div>
                     <div style="overflow:hidden; flex:1;">
-                        <div style="font-size:13px; font-weight:700; color:white; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;"
+                        <div style="font-size:14px; font-weight:800; color:white; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;"
                             x-text="user?.name"></div>
                         <span class="role-pill" x-text="user?.role"></span>
                     </div>
@@ -1124,21 +1399,21 @@
                     <h1 class="page-title" x-text="title()"></h1>
                     <p class="page-subtitle" x-text="subtitle()"></p>
                 </div>
-                <div style="display:flex; align-items:center; gap:10px;">
+                <div style="display:flex; align-items:center; gap:10px; flex-wrap:wrap;">
                     <button x-show="page==='tenants' && user?.role === 'super_admin'" @click="showAddTenantModal = true"
-                        class="btn btn-navy">
+                        class="btn btn-primary">
                         <span>➕</span> إضافة مكتب
                     </button>
-                    <button x-show="page==='users'" @click="showAddUserModal = true" class="btn btn-navy">
+                    <button x-show="page==='users'" @click="showAddUserModal = true" class="btn btn-primary">
                         <span>➕</span> إضافة مستخدم
                     </button>
-                    <button x-show="page==='companies'" @click="showAddCompanyModal = true" class="btn btn-navy">
+                    <button x-show="page==='companies'" @click="showAddCompanyModal = true" class="btn btn-primary">
                         <span>➕</span> إضافة شركة
                     </button>
-                    <button x-show="page==='invoices'" @click="showUploadModal = true" class="btn btn-teal">
+                    <button x-show="page==='invoices'" @click="showUploadModal = true" class="btn btn-success">
                         <span>📤</span> رفع فاتورة
                     </button>
-                    <button x-show="page==='invoices'" @click="showBatchUploadModal = true" class="btn btn-navy">
+                    <button x-show="page==='invoices'" @click="showBatchUploadModal = true" class="btn btn-primary">
                         <span>📁</span> استيراد مجمع (Batch)
                     </button>
                 </div>
@@ -1148,35 +1423,65 @@
             <div class="page-content" x-transition>
 
                 <!-- ════ DASHBOARD ═══════════════════════════ -->
-                <div x-show="page === 'dashboard'" style="display:flex; flex-direction:column; gap:24px;">
+                <div x-show="page === 'dashboard'" style="display:flex; flex-direction:column; gap:32px;">
+
+                    <!-- Welcome Banner -->
+                    <div
+                        style="background: linear-gradient(135deg, var(--primary-dark) 0%, #7c3aed 100%); border-radius: var(--radius-xl); padding: 28px 32px; color: white; position: relative; overflow: hidden;">
+                        <div
+                            style="position: absolute; top: -20px; left: -20px; width: 150px; height: 150px; background: rgba(255,255,255,0.08); border-radius: 50%;">
+                        </div>
+                        <div
+                            style="position: absolute; bottom: -40px; right: 10%; width: 100px; height: 100px; background: rgba(255,255,255,0.05); border-radius: 50%;">
+                        </div>
+                        <div style="position: relative; z-index: 1;">
+                            <div style="font-size: 14px; opacity: 0.8; margin-bottom: 6px; font-weight: 500;">أهلاً بك
+                                مجدداً، <span x-text="user?.name"></span> 👋</div>
+                            <h2 style="font-size: 22px; font-weight: 900; margin-bottom: 8px;">نظرة شاملة على نشاطك</h2>
+                            <p style="opacity: 0.7; font-size: 14px;">إدارة فعّالة للفواتير والتقارير الضريبية في مكان
+                                واحد</p>
+                        </div>
+                    </div>
 
                     <!-- Stat Cards -->
-                    <div style="display:grid; grid-template-columns:repeat(4,1fr); gap:18px;">
-                        <div class="stat-card stat-navy">
-                            <div class="stat-icon-box">📄</div>
+                    <div class="stats-grid">
+                        <div class="stat-card stat-primary">
+                            <div class="stat-header">
+                                <div class="stat-icon-box">📄</div>
+                            </div>
                             <div class="stat-label">إجمالي الفواتير</div>
                             <div class="stat-value" x-text="stats.total || 0"></div>
                         </div>
-                        <div class="stat-card stat-amber">
-                            <div class="stat-icon-box">⏳</div>
+                        <div class="stat-card stat-accent">
+                            <div class="stat-header">
+                                <div class="stat-icon-box">⏳</div>
+                            </div>
                             <div class="stat-label">بانتظار التدقيق</div>
                             <div class="stat-value" x-text="stats.pending || 0"></div>
                         </div>
-                        <div class="stat-card stat-teal">
-                            <div class="stat-icon-box">✅</div>
+                        <div class="stat-card stat-success">
+                            <div class="stat-header">
+                                <div class="stat-icon-box">✅</div>
+                            </div>
                             <div class="stat-label">مدققة ومعتمدة</div>
                             <div class="stat-value" x-text="stats.approved || 0"></div>
                         </div>
                         <template x-if="user?.role === 'super_admin'">
-                            <div class="stat-card stat-navy">
-                                <div class="stat-icon-box">🏢</div>
+                            <div class="stat-card stat-primary">
+                                <div class="stat-header">
+                                    <div class="stat-icon-box">🏢</div>
+                                </div>
                                 <div class="stat-label">المكاتب والمستخدمين</div>
-                                <div class="stat-value" x-text="(stats.tenants || 0) + ' / ' + (stats.users || 0)"></div>
+                                <div class="stat-value" x-text="(stats.tenants || 0) + ' / ' + (stats.users || 0)">
+                                </div>
                             </div>
                         </template>
                         <template x-if="user?.role !== 'super_admin'">
-                            <div class="stat-card" :class="subscription?.invoices?.warning ? 'stat-red' : 'stat-navy'">
-                                <div class="stat-icon-box">📊</div>
+                            <div class="stat-card"
+                                :class="subscription?.invoices?.warning ? 'stat-danger' : 'stat-primary'">
+                                <div class="stat-header">
+                                    <div class="stat-icon-box">📊</div>
+                                </div>
                                 <div class="stat-label">استهلاك الحصة</div>
                                 <div class="stat-value" x-text="(subscription?.invoices?.percent || 0) + '%'"></div>
                             </div>
@@ -1185,45 +1490,44 @@
 
                     <!-- Quick Actions -->
                     <div>
-                        <h3 style="font-size:15px; font-weight:700; color:var(--text-2); margin-bottom:14px;">إجراءات
+                        <h3 style="font-size:16px; font-weight:800; color:var(--text-2); margin-bottom:16px;">إجراءات
                             سريعة</h3>
-                        <div
-                            style="display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:14px;">
+                        <div class="quick-actions-grid">
                             <div x-show="user?.role !== 'viewer'" class="quick-action-card"
                                 @click="setPage('invoices'); showUploadModal = true">
-                                <div class="qa-icon" style="background:var(--teal-subtle);">📤</div>
+                                <div class="qa-icon" style="background:var(--success-light);">📤</div>
                                 <div>
-                                    <div style="font-weight:700; font-size:14px; color:var(--text-1);">رفع فاتورة</div>
-                                    <div style="font-size:12px; color:var(--text-3); margin-top:2px;">رفع وتحليل بالذكاء
+                                    <div style="font-weight:800; font-size:15px; color:var(--text-1);">رفع فاتورة</div>
+                                    <div style="font-size:13px; color:var(--text-3); margin-top:2px;">رفع وتحليل بالذكاء
                                         الاصطناعي</div>
                                 </div>
                             </div>
                             <div x-show="user?.role !== 'viewer'" class="quick-action-card"
                                 @click="setPage('companies'); showAddCompanyModal = true">
-                                <div class="qa-icon" style="background:var(--navy-hover);">🏭</div>
+                                <div class="qa-icon" style="background:var(--primary-ghost);">🏭</div>
                                 <div>
-                                    <div style="font-weight:700; font-size:14px; color:var(--text-1);">إضافة شركة</div>
-                                    <div style="font-size:12px; color:var(--text-3); margin-top:2px;">تسجيل شركة جديدة
+                                    <div style="font-weight:800; font-size:15px; color:var(--text-1);">إضافة شركة</div>
+                                    <div style="font-size:13px; color:var(--text-3); margin-top:2px;">تسجيل شركة جديدة
                                     </div>
                                 </div>
                             </div>
                             <div x-show="user?.role !== 'viewer'" class="quick-action-card"
                                 @click="setPage('invoices')">
-                                <div class="qa-icon" style="background:var(--amber-subtle);">📋</div>
+                                <div class="qa-icon" style="background:var(--accent-light);">📋</div>
                                 <div>
-                                    <div style="font-weight:700; font-size:14px; color:var(--text-1);">الفواتير المعلقة
+                                    <div style="font-weight:800; font-size:15px; color:var(--text-1);">الفواتير المعلقة
                                     </div>
-                                    <div style="font-size:12px; color:var(--text-3); margin-top:2px;">عرض ومراجعة
+                                    <div style="font-size:13px; color:var(--text-3); margin-top:2px;">عرض ومراجعة
                                         الفواتير</div>
                                 </div>
                             </div>
                             <div x-show="user?.role === 'super_admin' || user?.role === 'admin'"
                                 class="quick-action-card" @click="setPage('users'); showAddUserModal = true">
-                                <div class="qa-icon" style="background:var(--purple-subtle);">👤</div>
+                                <div class="qa-icon" style="background:#f3e8ff;">👤</div>
                                 <div>
-                                    <div style="font-weight:700; font-size:14px; color:var(--text-1);">إضافة مستخدم
+                                    <div style="font-weight:800; font-size:15px; color:var(--text-1);">إضافة مستخدم
                                     </div>
-                                    <div style="font-size:12px; color:var(--text-3); margin-top:2px;">إنشاء حساب جديد
+                                    <div style="font-size:13px; color:var(--text-3); margin-top:2px;">إنشاء حساب جديد
                                     </div>
                                 </div>
                             </div>
@@ -1235,7 +1539,7 @@
                 <div x-show="page === 'companies'">
                     <div class="table-container">
                         <div class="table-top-bar">
-                            <span style="font-size:18px;">🏭</span>
+                            <span style="font-size:20px;">🏭</span>
                             <h3>الشركات المسجلة</h3>
                             <span class="table-count" x-text="companies.length + ' شركة'"></span>
                         </div>
@@ -1263,20 +1567,20 @@
                                 <template x-for="c in companies" :key="c.id">
                                     <tr>
                                         <td>
-                                            <div style="font-weight:700; color:var(--navy); font-size:15px;"
+                                            <div style="font-weight:800; color:var(--primary-dark); font-size:15px;"
                                                 x-text="c.name"></div>
-                                            <div style="font-size:12px; color:var(--text-3); margin-top:2px;"
+                                            <div style="font-size:13px; color:var(--text-3); margin-top:3px;"
                                                 x-text="c.address"></div>
                                         </td>
-                                        <td style="font-family:'Outfit',sans-serif; font-size:12px;">
-                                            <div style="color:var(--text-2);">TIN: <span
+                                        <td style="font-family:'Inter',sans-serif; font-size:13px;">
+                                            <div style="color:var(--text-2); font-weight:600;">TIN: <span
                                                     x-text="c.tax_identification_number"></span></div>
-                                            <div style="color:var(--text-3); margin-top:2px;">CRN: <span
+                                            <div style="color:var(--text-3); margin-top:3px;">CRN: <span
                                                     x-text="c.commercial_registration_number || '—'"></span></div>
                                         </td>
-                                        <td style="text-align:center; font-weight:700; color:var(--text-2);"
+                                        <td style="text-align:center; font-weight:800; color:var(--text-2); font-size:15px;"
                                             x-text="c.invoices_count || 0"></td>
-                                        <td style="text-align:center; font-weight:700; color:var(--teal); font-family:'Outfit',sans-serif; font-size:13px;"
+                                        <td style="text-align:center; font-weight:800; color:var(--success); font-family:'Inter',sans-serif; font-size:14px;"
                                             x-text="parseFloat(c.total_amount || 0).toLocaleString() + ' JOD'"></td>
                                         <td>
                                             <template x-if="c.jofotara_client_id_encrypted">
@@ -1294,13 +1598,13 @@
                                         </td>
                                         <td>
                                             <button @click="showCompanyStats(c.id)"
-                                                class="btn-table-action btn-ta-navy">
+                                                class="btn-table-action btn-ta-primary">
                                                 📊 تقرير
                                             </button>
                                         </td>
                                         <td style="text-align:center;">
                                             <button @click="confirmDeleteCompany(c)"
-                                                class="btn-table-action btn-ta-red">🗑️</button>
+                                                class="btn-table-action btn-ta-danger">🗑️</button>
                                         </td>
                                     </tr>
                                 </template>
@@ -1313,7 +1617,7 @@
                 <div x-show="page === 'users'">
                     <div class="table-container">
                         <div class="table-top-bar">
-                            <span style="font-size:18px;">👥</span>
+                            <span style="font-size:20px;">👥</span>
                             <h3>فريق العمل</h3>
                             <span class="table-count" x-text="users.length + ' مستخدم'"></span>
                         </div>
@@ -1339,35 +1643,38 @@
                                 <template x-for="u in users" :key="u.id">
                                     <tr>
                                         <td>
-                                            <div style="display:flex; align-items:center; gap:10px;">
-                                                <div style="width:34px;height:34px;border-radius:9px;background:var(--navy-hover);color:var(--navy);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0;"
+                                            <div style="display:flex; align-items:center; gap:12px;">
+                                                <div style="width:40px;height:40px;border-radius:12px;background:var(--primary-ghost);color:var(--primary-dark);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;flex-shrink:0;"
                                                     x-text="u.name?.[0]"></div>
                                                 <div>
-                                                    <div style="font-weight:700; color:var(--text-1);" x-text="u.name">
+                                                    <div style="font-weight:800; color:var(--text-1); font-size:15px;"
+                                                        x-text="u.name">
                                                     </div>
-                                                    <div style="font-size:12px; color:var(--text-3); font-family:'Outfit',sans-serif;"
+                                                    <div style="font-size:13px; color:var(--text-3); font-family:'Inter',sans-serif;"
                                                         x-text="u.email"></div>
                                                 </div>
                                             </div>
                                         </td>
-                                        <td style="color:var(--text-2); font-size:13px;" x-text="u.tenant_name || '—'">
+                                        <td style="color:var(--text-2); font-size:14px; font-weight:500;"
+                                            x-text="u.tenant_name || '—'">
                                         </td>
                                         <td>
                                             <span class="badge"
-                                                :class="u.role==='super_admin'?'badge-navy':(u.role==='admin'?'badge-blue':(u.role==='accountant'?'badge-teal':'badge-gray'))"
+                                                :class="u.role==='super_admin'?'badge-primary':(u.role==='admin'?'badge-info':(u.role==='accountant'?'badge-success':'badge-gray'))"
                                                 x-text="u.role==='super_admin'?'مدير عام':(u.role==='admin'?'مدير مكتب':(u.role==='accountant'?'محاسب':'مشاهد'))">
                                             </span>
                                         </td>
                                         <td style="text-align:center;">
-                                            <span class="badge" :class="u.is_active ? 'badge-teal' : 'badge-red'">
-                                                <span class="badge-dot" :class="u.is_active ? 'bg-teal' : 'bg-red'"
+                                            <span class="badge" :class="u.is_active ? 'badge-success' : 'badge-danger'">
+                                                <span class="badge-dot"
+                                                    :class="u.is_active ? 'bg-success' : 'bg-danger'"
                                                     style="background:currentColor;"></span>
                                                 <span x-text="u.is_active ? 'نشط' : 'موقف'"></span>
                                             </span>
                                         </td>
                                         <td style="text-align:center;">
                                             <button x-show="u.id !== user.id" @click="confirmDeleteUser(u)"
-                                                class="btn-table-action btn-ta-red">🗑️ حذف</button>
+                                                class="btn-table-action btn-ta-danger">🗑️ حذف</button>
                                         </td>
                                     </tr>
                                 </template>
@@ -1380,14 +1687,14 @@
                 <div x-show="page === 'invoices'">
                     <div class="table-container">
                         <div class="table-top-bar">
-                            <span style="font-size:18px;">📄</span>
-                             <h3>إدارة الفواتير</h3>
-                             <span class="table-count" x-text="invoices.length + ' فاتورة'"></span>
-                             <div class="flex-1"></div>
-                             <button @click="showExcelModal = true" class="btn btn-teal btn-sm">
-                                 <span>📊 استيراد اكسل (Bulk)</span>
-                             </button>
-                         </div>
+                            <span style="font-size:20px;">📄</span>
+                            <h3>إدارة الفواتير</h3>
+                            <span class="table-count" x-text="invoices.length + ' فاتورة'"></span>
+                            <div class="flex-1"></div>
+                            <button @click="showExcelModal = true" class="btn btn-success btn-sm">
+                                <span>📊 استيراد اكسل (Bulk)</span>
+                            </button>
+                        </div>
                         <table class="data-table">
                             <thead>
                                 <tr>
@@ -1410,25 +1717,26 @@
                                 <template x-for="inv in invoices" :key="inv.id">
                                     <tr>
                                         <td>
-                                            <div style="font-weight:700; color:var(--navy); font-size:14px;"
+                                            <div style="font-weight:800; color:var(--primary-dark); font-size:15px;"
                                                 x-text="inv.company_name"></div>
-                                            <div style="font-size:13px; color:var(--text-2); margin-top:2px;"
+                                            <div style="font-size:14px; color:var(--text-2); margin-top:3px;"
                                                 x-text="inv.supplier_name"></div>
-                                            <div style="font-size:11px; color:var(--text-3); font-family:'Outfit',sans-serif;"
+                                            <div style="font-size:12px; color:var(--text-3); font-family:'Inter',sans-serif;"
                                                 x-text="inv.supplier_tin"></div>
                                         </td>
-                                        <td style="color:var(--text-2); font-size:13px; font-family:'Outfit',sans-serif;"
+                                        <td style="color:var(--text-2); font-size:14px; font-family:'Inter',sans-serif; font-weight:500;"
                                             x-text="inv.invoice_date || '—'"></td>
-                                        <td style="font-weight:700; color:var(--teal); font-family:'Outfit',sans-serif;"
+                                        <td style="font-weight:800; color:var(--success); font-family:'Inter',sans-serif; font-size:15px;"
                                             x-text="parseFloat(inv.grand_total).toLocaleString() + ' JOD'"></td>
                                         <td style="text-align:center;">
                                             <span class="badge"
-                                                :class="inv.status==='extracted' ? 'badge-blue' : (inv.status==='approved' ? 'badge-teal' : 'badge-gray')"
+                                                :class="inv.status==='extracted' ? 'badge-info' : (inv.status==='approved' ? 'badge-success' : 'badge-gray')"
                                                 x-text="inv.status === 'approved' ? '✓ مدققة' : (inv.status === 'extracted' ? 'جاهزة للتدقيق' : inv.status)">
                                             </span>
                                         </td>
                                         <td style="text-align:center;">
-                                            <button @click="viewInvoice(inv.id)" class="btn-table-action btn-ta-navy">
+                                            <button @click="viewInvoice(inv.id)"
+                                                class="btn-table-action btn-ta-primary">
                                                 👁️ عرض
                                             </button>
                                         </td>
@@ -1443,7 +1751,7 @@
                 <div x-show="page === 'tenants' && user?.role === 'super_admin'">
                     <div class="table-container">
                         <div class="table-top-bar">
-                            <span style="font-size:18px;">🏢</span>
+                            <span style="font-size:20px;">🏢</span>
                             <h3>المكاتب المحاسبية</h3>
                             <span class="table-count" x-text="tenants.length + ' مكتب'"></span>
                         </div>
@@ -1470,31 +1778,33 @@
                                 <template x-for="t in tenants" :key="t.id">
                                     <tr>
                                         <td>
-                                            <div style="font-weight:700; color:var(--navy); font-size:15px;"
+                                            <div style="font-weight:800; color:var(--primary-dark); font-size:15px;"
                                                 x-text="t.name"></div>
-                                            <div style="font-size:11px; color:var(--text-3); margin-top:3px; font-family:'Outfit',sans-serif;"
+                                            <div style="font-size:12px; color:var(--text-3); margin-top:4px; font-family:'Inter',sans-serif;"
                                                 x-text="'انضم: ' + t.created_at.split(' ')[0]"></div>
                                         </td>
-                                        <td style="text-align:center; font-weight:700; color:var(--text-2);"
+                                        <td style="text-align:center; font-weight:800; color:var(--text-2); font-size:15px;"
                                             x-text="t.companies_count || 0"></td>
-                                        <td style="text-align:center; font-weight:700; color:var(--text-2);"
+                                        <td style="text-align:center; font-weight:800; color:var(--text-2); font-size:15px;"
                                             x-text="t.invoices_count || 0"></td>
                                         <td>
-                                            <div style="font-size:13px; color:var(--text-2);" x-text="t.email"></div>
-                                            <div style="font-size:12px; color:var(--text-3); font-family:'Outfit',sans-serif;"
+                                            <div style="font-size:14px; color:var(--text-2); font-weight:600;"
+                                                x-text="t.email"></div>
+                                            <div style="font-size:13px; color:var(--text-3); font-family:'Inter',sans-serif;"
                                                 x-text="t.phone || '—'"></div>
                                         </td>
                                         <td style="text-align:center;">
                                             <span class="badge"
-                                                :class="t.status==='active'?'badge-teal':(t.status==='trial'?'badge-amber':'badge-red')"
+                                                :class="t.status==='active'?'badge-success':(t.status==='trial'?'badge-warning':'badge-danger')"
                                                 x-text="t.status==='active'?'نشط':(t.status==='trial'?'تجريبي':'معلق')">
                                             </span>
                                         </td>
                                         <td style="text-align:center;">
                                             <div style="display:inline-flex; gap:6px; align-items:center;">
                                                 <button @click="openEditTenantModal(t)"
-                                                    class="btn-table-action btn-ta-navy" title="تعديل">⚙️ تعديل</button>
-                                                <button class="btn-table-action btn-ta-teal" title="تقرير"
+                                                    class="btn-table-action btn-ta-primary" title="تعديل">⚙️
+                                                    تعديل</button>
+                                                <button class="btn-table-action btn-ta-success" title="تقرير"
                                                     @click="showTenantStats(t)">📊</button>
                                             </div>
                                         </td>
@@ -1507,121 +1817,158 @@
 
                 <!-- ── SUBSCRIPTION PAGE ────────────────────────── -->
                 <div x-show="page === 'subscription'">
-                    <div style="display:flex; justify-content:space-between; align-items:end; margin-bottom:24px;">
+                    <div
+                        style="display:flex; justify-content:space-between; align-items:end; margin-bottom:28px; flex-wrap:wrap; gap:16px;">
                         <div>
-                            <h2 style="font-size:28px; font-weight:800; color:var(--navy); letter-spacing:-0.02em;">إدارة الاشتراك</h2>
-                            <p style="color:var(--text-3); font-size:15px;">تفاصيل باقتك الحالية واستهلاك الموارد</p>
+                            <h2 style="font-size:32px; font-weight:900; color:var(--text-1); letter-spacing:-0.02em;">
+                                إدارة الاشتراك</h2>
+                            <p style="color:var(--text-3); font-size:15px; margin-top:4px;">تفاصيل باقتك الحالية
+                                واستهلاك الموارد</p>
                         </div>
-                        <div style="background:var(--navy); padding:8px 20px; border-radius:12px; color:white; display:flex; align-items:center; gap:10px; box-shadow:var(--shadow);">
+                        <div
+                            style="background: linear-gradient(135deg, var(--primary-dark), #7c3aed); padding:10px 24px; border-radius: 16px; color:white; display:flex; align-items:center; gap:12px; box-shadow: var(--shadow-md);">
                             <span style="font-size:14px; opacity:0.8;">الباقة الحالية:</span>
-                            <span style="font-weight:700; font-size:18px;" x-text="subscription?.plan_name"></span>
+                            <span style="font-weight:900; font-size:20px;" x-text="subscription?.plan_name"></span>
                         </div>
                     </div>
 
                     <!-- Usage Stats Grid -->
-                    <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:24px; margin-bottom:40px;">
+                    <div
+                        style="display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:20px; margin-bottom:40px;">
                         <!-- Invoices Card -->
                         <div class="table-container" style="padding:24px; position:relative; overflow:hidden;">
-                            <div style="display:flex; justify-content:space-between; margin-bottom:16px;">
-                                <span style="font-weight:700; color:var(--navy);">الفواتير الشهرية</span>
-                                <span class="premium-font" style="font-weight:700; color:var(--teal);" x-text="subscription?.invoices?.used + ' / ' + subscription?.invoices?.limit"></span>
+                            <div
+                                style="display:flex; justify-content:space-between; margin-bottom:16px; align-items:center;">
+                                <span style="font-weight:800; color:var(--primary-dark); font-size:15px;">الفواتير
+                                    الشهرية</span>
+                                <span
+                                    style="font-weight:900; color:var(--success); font-family:'Inter',sans-serif; font-size:18px;"
+                                    x-text="subscription?.invoices?.used + ' / ' + subscription?.invoices?.limit"></span>
                             </div>
-                            <div style="height:10px; background:#f1f5f9; border-radius:10px; overflow:hidden; margin-bottom:12px;">
-                                <div :style="'width:' + (subscription?.invoices?.percent || 0) + '%; height:100%; background:var(--teal); border-radius:10px; transition:width 1s ease;'"></div>
+                            <div class="progress-bar-bg" style="margin-bottom:12px;">
+                                <div class="progress-bar-fill"
+                                    :style="'width:' + (subscription?.invoices?.percent || 0) + '%;'"></div>
                             </div>
-                            <div style="display:flex; justify-content:space-between; font-size:12px; color:var(--text-3);">
-                                <span x-text="'يتم التصفير في: ' + (subscription?.period_end?.split(' ')[0] || '—')"></span>
-                                <span class="premium-font" x-text="(subscription?.invoices?.percent || 0) + '%'"></span>
+                            <div
+                                style="display:flex; justify-content:space-between; font-size:13px; color:var(--text-3); font-weight:500;">
+                                <span
+                                    x-text="'يتم التصفير في: ' + (subscription?.period_end?.split(' ')[0] || '—')"></span>
+                                <span style="font-weight:800;"
+                                    x-text="(subscription?.invoices?.percent || 0) + '%'"></span>
                             </div>
                         </div>
 
                         <!-- Companies Card -->
                         <div class="table-container" style="padding:24px;">
-                            <div style="display:flex; justify-content:space-between; margin-bottom:16px;">
-                                <span style="font-weight:700; color:var(--navy);">الشركات المدارة</span>
-                                <span class="premium-font" style="font-weight:700; color:var(--teal);" x-text="subscription?.companies?.used + ' / ' + subscription?.companies?.limit"></span>
+                            <div
+                                style="display:flex; justify-content:space-between; margin-bottom:16px; align-items:center;">
+                                <span style="font-weight:800; color:var(--primary-dark); font-size:15px;">الشركات
+                                    المدارة</span>
+                                <span
+                                    style="font-weight:900; color:var(--success); font-family:'Inter',sans-serif; font-size:18px;"
+                                    x-text="subscription?.companies?.used + ' / ' + subscription?.companies?.limit"></span>
                             </div>
-                            <div style="height:10px; background:#f1f5f9; border-radius:10px; overflow:hidden; margin-bottom:12px;">
-                                <div :style="'width:' + (subscription?.companies?.percent || 0) + '%; height:100%; background:var(--teal); border-radius:10px;'"></div>
+                            <div class="progress-bar-bg" style="margin-bottom:12px;">
+                                <div class="progress-bar-fill"
+                                    :style="'width:' + (subscription?.companies?.percent || 0) + '%;'"></div>
                             </div>
-                            <div style="font-size:12px; color:var(--text-3);" x-text="'إجمالي الشركات المسموح بها'"></div>
+                            <div style="font-size:13px; color:var(--text-3); font-weight:500;"
+                                x-text="'إجمالي الشركات المسموح بها'"></div>
                         </div>
 
                         <!-- Team Card -->
                         <div class="table-container" style="padding:24px;">
-                            <div style="display:flex; justify-content:space-between; margin-bottom:16px;">
-                                <span style="font-weight:700; color:var(--navy);">فريق العمل</span>
-                                <span class="premium-font" style="font-weight:700; color:var(--teal);" x-text="subscription?.users?.used + ' / ' + subscription?.users?.limit"></span>
+                            <div
+                                style="display:flex; justify-content:space-between; margin-bottom:16px; align-items:center;">
+                                <span style="font-weight:800; color:var(--primary-dark); font-size:15px;">فريق
+                                    العمل</span>
+                                <span
+                                    style="font-weight:900; color:var(--success); font-family:'Inter',sans-serif; font-size:18px;"
+                                    x-text="subscription?.users?.used + ' / ' + subscription?.users?.limit"></span>
                             </div>
-                            <div style="height:10px; background:#f1f5f9; border-radius:10px; overflow:hidden; margin-bottom:12px;">
-                                <div :style="'width:' + (subscription?.users?.percent || 0) + '%; height:100%; background:var(--teal); border-radius:10px;'"></div>
+                            <div class="progress-bar-bg" style="margin-bottom:12px;">
+                                <div class="progress-bar-fill"
+                                    :style="'width:' + (subscription?.users?.percent || 0) + '%;'"></div>
                             </div>
-                            <div style="font-size:12px; color:var(--text-3);" x-text="'مستخدمين نشطين في النظام'"></div>
+                            <div style="font-size:13px; color:var(--text-3); font-weight:500;"
+                                x-text="'مستخدمين نشطين في النظام'"></div>
                         </div>
                     </div>
 
                     <!-- Pending Payment Warning -->
-                    <div x-show="subscription?.pending_payment" 
-                         style="background:var(--gold-subtle); border:2px dashed var(--gold); border-radius:20px; padding:30px; margin-bottom:40px; display:flex; justify-content:space-between; align-items:center; animation:pulse 2s infinite;">
-                        <div style="display:flex; gap:20px; align-items:center;">
-                            <div style="background:var(--gold); color:white; width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:24px;">⌛</div>
+                    <div x-show="subscription?.pending_payment"
+                        style="background:var(--accent-light); border:2px dashed var(--accent); border-radius:20px; padding:28px; margin-bottom:40px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;">
+                        <div style="display:flex; gap:16px; align-items:center;">
+                            <div
+                                style="background:var(--accent); color:white; width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:24px; box-shadow:0 4px 12px rgba(245,158,11,0.3);">
+                                ⌛</div>
                             <div>
-                                <h4 style="font-weight:800; color:var(--navy); font-size:18px;">لديك طلب ترقية قيد الانتظار</h4>
-                                <p style="color:var(--text-2); font-size:14px;">بانتظار تأكيد عملية التحويل برقم المرجع: <strong class="premium-font" x-text="subscription?.pending_payment?.reference"></strong></p>
+                                <h4 style="font-weight:900; color:var(--text-1); font-size:18px;">لديك طلب ترقية قيد
+                                    الانتظار</h4>
+                                <p style="color:var(--text-2); font-size:14px; margin-top:4px;">بانتظار تأكيد عملية
+                                    التحويل برقم المرجع: <strong style="font-family:'Inter',sans-serif;"
+                                        x-text="subscription?.pending_payment?.reference"></strong></p>
                             </div>
                         </div>
-                        <div style="display:flex; gap:12px;">
-                            <button @click="upgradePlan({id: subscription.pending_payment.plan_id})" class="btn-primary" style="background:var(--navy);">متابعة الدفع</button>
-                            <button @click="cancelPayment(subscription.pending_payment.id)" class="btn btn-ghost" style="color:var(--red);">إلغاء الطلب</button>
+                        <div style="display:flex; gap:10px;">
+                            <button @click="upgradePlan({id: subscription.pending_payment.plan_id})"
+                                class="btn btn-primary">متابعة الدفع</button>
+                            <button @click="cancelPayment(subscription.pending_payment.id)" class="btn btn-ghost"
+                                style="color:var(--danger);">إلغاء الطلب</button>
                         </div>
                     </div>
 
                     <!-- Pricing Section -->
                     <div style="text-align:center; margin-bottom:32px;">
-                        <h3 style="font-size:24px; font-weight:800; color:var(--navy); margin-bottom:8px;">تغيير أو ترقية الباقة</h3>
-                        <p style="color:var(--text-3);">اختر الباقة التي تناسب احتياجات مكتبك المحاسبي</p>
+                        <h3 style="font-size:28px; font-weight:900; color:var(--text-1); margin-bottom:8px;">تغيير أو
+                            ترقية الباقة</h3>
+                        <p style="color:var(--text-3); font-size:15px;">اختر الباقة التي تناسب احتياجات مكتبك المحاسبي
+                        </p>
                     </div>
 
-                    <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:30px;">
+                    <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:24px;">
                         <template x-for="p in plans" :key="p.id">
-                            <div class="table-container" 
-                                 style="padding:40px; display:flex; flex-direction:column; gap:20px; border:2px solid transparent; transition:all 0.3s ease; position:relative;"
-                                 :style="subscription?.plan_id === p.id ? 'border-color:var(--gold); transform:scale(1.02); box-shadow:var(--shadow-lg);' : 'hover:border-color:var(--border-mid);'">
-                                
-                                <div x-show="subscription?.plan_id === p.id" 
-                                     style="position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--gold); color:white; padding:4px 16px; border-radius:20px; font-size:12px; font-weight:700; box-shadow:var(--shadow-sm);">
+                            <div class="plan-card" :class="subscription?.plan_id === p.id ? 'active' : ''">
+
+                                <div x-show="subscription?.plan_id === p.id" class="plan-badge">
                                     باقتك الحالية
                                 </div>
 
                                 <div style="text-align:center;">
-                                    <h4 style="font-size:22px; font-weight:800; color:var(--navy); margin-bottom:8px;" x-text="p.name_ar"></h4>
-                                    <p style="font-size:13px; color:var(--text-3); min-height:40px;" x-text="p.description_ar"></p>
+                                    <h4 style="font-size:24px; font-weight:900; color:var(--text-1); margin-bottom:8px;"
+                                        x-text="p.name_ar"></h4>
+                                    <p style="font-size:14px; color:var(--text-3); min-height:40px; font-weight:500;"
+                                        x-text="p.description_ar"></p>
                                 </div>
 
-                                <div style="text-align:center; padding:20px 0; border-top:1px solid #f1f5f9; border-bottom:1px solid #f1f5f9;">
-                                    <span class="premium-font" style="font-size:48px; font-weight:800; color:var(--teal);" x-text="p.price_jod"></span>
-                                    <span style="font-size:16px; color:var(--text-3); font-weight:500;"> دينار / شهر</span>
+                                <div
+                                    style="text-align:center; padding:24px 0; border-top:1px solid var(--border-light); border-bottom:1px solid var(--border-light);">
+                                    <span
+                                        style="font-size:56px; font-weight:900; color:var(--primary-dark); font-family:'Tajawal',sans-serif; line-height:1;"
+                                        x-text="p.price_jod"></span>
+                                    <span style="font-size:16px; color:var(--text-3); font-weight:600;"> دينار /
+                                        شهر</span>
                                 </div>
 
-                                <ul style="list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; flex:1;">
+                                <ul class="plan-features"
+                                    style="list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:16px; flex:1;">
                                     <template x-for="f in p.features">
-                                        <li style="font-size:14px; color:var(--text-2); display:flex; gap:12px; align-items:center;">
-                                            <div style="width:20px; height:20px; background:var(--teal-subtle); color:var(--teal); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px;">✔</div>
+                                        <li>
+                                            <div class="feature-check">✔</div>
                                             <span x-text="f"></span>
                                         </li>
                                     </template>
                                 </ul>
 
-                                <button x-show="subscription?.plan_id !== p.id" 
-                                        @click="upgradePlan(p)"
-                                        class="btn-primary" 
-                                        style="width:100%; height:54px; font-size:16px; font-weight:800; border-radius:14px; background:linear-gradient(135deg, var(--teal), var(--teal-mid)); color:white; box-shadow:0 4px 15px rgba(5, 150, 105, 0.3); margin-top:20px; border:none; cursor:pointer;">
+                                <button x-show="subscription?.plan_id !== p.id" @click="upgradePlan(p)"
+                                    class="btn btn-success"
+                                    style="width:100%; height:56px; font-size:17px; font-weight:900; border-radius:16px; margin-top:8px;">
                                     ترقية الباقة الآن
                                 </button>
-                                
-                                <div x-show="subscription?.plan_id === p.id" 
-                                     style="text-align:center; padding:15px; border-radius:12px; background:var(--gold-subtle); color:var(--gold); font-weight:700; font-size:14px; margin-top:20px;">
-                                    أنت مشترك في هذه الباقة
+
+                                <div x-show="subscription?.plan_id === p.id"
+                                    style="text-align:center; padding:16px; border-radius:14px; background:var(--accent-light); color:#92400e; font-weight:800; font-size:15px; border:1px solid rgba(245,158,11,0.2);">
+                                    ✨ أنت مشترك في هذه الباقة
                                 </div>
                             </div>
                         </template>
@@ -1641,10 +1988,10 @@
     <div x-show="showCompanyStatsModal" x-cloak class="modal-backdrop" @click.self="showCompanyStatsModal = false">
         <div class="modal-box" style="max-width:680px;">
             <div class="modal-head" style="padding-bottom:0;">
-                <div class="modal-head-icon teal">📊</div>
+                <div class="modal-head-icon success">📊</div>
                 <div style="flex:1;">
                     <div class="modal-title" x-text="companyStats?.company?.name"></div>
-                    <div class="modal-subtitle" style="font-family:'Outfit',sans-serif;"
+                    <div class="modal-subtitle" style="font-family:'Inter',sans-serif;"
                         x-text="'TIN: ' + companyStats?.company?.tax_identification_number"></div>
                 </div>
                 <button @click="showCompanyStatsModal = false" class="modal-close-btn">✕</button>
@@ -1657,43 +2004,44 @@
                     </div>
                     <div class="mini-stat">
                         <div class="mini-stat-label">المجموع (JOD)</div>
-                        <div class="mini-stat-val" style="color:var(--teal);"
+                        <div class="mini-stat-val" style="color:var(--success);"
                             x-text="parseFloat(companyStats?.totals?.total_amount || 0).toLocaleString()"></div>
                     </div>
                     <div class="mini-stat">
                         <div class="mini-stat-label">إجمالي الضريبة</div>
-                        <div class="mini-stat-val" style="color:var(--amber);"
+                        <div class="mini-stat-val" style="color:var(--accent);"
                             x-text="parseFloat(companyStats?.totals?.total_tax || 0).toLocaleString()"></div>
                     </div>
                     <div class="mini-stat">
                         <div class="mini-stat-label">المعتمدة</div>
-                        <div class="mini-stat-val" style="color:var(--blue);"
+                        <div class="mini-stat-val" style="color:var(--info);"
                             x-text="companyStats?.totals?.approved_count || 0"></div>
                     </div>
                 </div>
                 <div
-                    style="font-size:12px; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:0.07em; margin-bottom:12px;">
-                    التحليل الشهري للفواتير والضرائب</div>
+                    style="font-size:12px; font-weight:800; color:var(--text-3); text-transform:uppercase; letter-spacing:0.07em; margin-bottom:12px;">
+                    التحليل الشهري للفواتير والضرائب
+                </div>
                 <div
-                    style="border:1px solid var(--border); border-radius:12px; overflow:hidden; max-height:240px; overflow-y:auto;">
+                    style="border:1px solid var(--border-light); border-radius:14px; overflow:hidden; max-height:260px; overflow-y:auto;">
                     <table class="stats-table">
                         <thead>
                             <tr>
                                 <th>الشهر</th>
                                 <th>عدد الفواتير</th>
                                 <th>الضريبة المستحقة</th>
-                                <th style="color:var(--teal);">الإجمالي النهائي</th>
+                                <th style="color:var(--success);">الإجمالي النهائي</th>
                             </tr>
                         </thead>
                         <tbody>
                             <template x-for="m in companyStats?.monthly" :key="m.month">
                                 <tr>
-                                    <td style="font-family:'Outfit',sans-serif; color:var(--text-2);"
+                                    <td style="font-family:'Inter',sans-serif; color:var(--text-2); font-weight:600;"
                                         x-text="m.month"></td>
-                                    <td x-text="m.total_invoices"></td>
-                                    <td style="color:var(--amber); font-family:'Outfit',sans-serif;"
+                                    <td style="font-weight:700;" x-text="m.total_invoices"></td>
+                                    <td style="color:var(--accent); font-family:'Inter',sans-serif; font-weight:600;"
                                         x-text="parseFloat(m.total_tax || 0).toLocaleString() + ' JOD'"></td>
-                                    <td style="font-weight:700; color:var(--teal); font-family:'Outfit',sans-serif;"
+                                    <td style="font-weight:800; color:var(--success); font-family:'Inter',sans-serif;"
                                         x-text="parseFloat(m.total_amount || 0).toLocaleString() + ' JOD'"></td>
                                 </tr>
                             </template>
@@ -1708,7 +2056,7 @@
     <div x-show="showTenantStatsModal" x-cloak class="modal-backdrop" @click.self="showTenantStatsModal = false">
         <div class="modal-box" style="max-width:680px;">
             <div class="modal-head">
-                <div class="modal-head-icon navy">🏢</div>
+                <div class="modal-head-icon primary">🏢</div>
                 <div style="flex:1;">
                     <div class="modal-title" x-text="tenantStats?.tenant?.name"></div>
                     <div class="modal-subtitle">تقرير أداء المكتب المحاسبي</div>
@@ -1727,38 +2075,39 @@
                     </div>
                     <div class="mini-stat">
                         <div class="mini-stat-label">المجموع (JOD)</div>
-                        <div class="mini-stat-val" style="color:var(--teal);"
+                        <div class="mini-stat-val" style="color:var(--success);"
                             x-text="parseFloat(tenantStats?.summary?.total_amount || 0).toLocaleString()"></div>
                     </div>
                     <div class="mini-stat">
                         <div class="mini-stat-label">إجمالي الضرائب</div>
-                        <div class="mini-stat-val" style="color:var(--amber);"
+                        <div class="mini-stat-val" style="color:var(--accent);"
                             x-text="parseFloat(tenantStats?.summary?.total_tax || 0).toLocaleString()"></div>
                     </div>
                 </div>
                 <div
-                    style="font-size:12px; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:0.07em; margin-bottom:12px;">
-                    تحليل النشاط الشهري للمكتب</div>
+                    style="font-size:12px; font-weight:800; color:var(--text-3); text-transform:uppercase; letter-spacing:0.07em; margin-bottom:12px;">
+                    تحليل النشاط الشهري للمكتب
+                </div>
                 <div
-                    style="border:1px solid var(--border); border-radius:12px; overflow:hidden; max-height:240px; overflow-y:auto;">
+                    style="border:1px solid var(--border-light); border-radius:14px; overflow:hidden; max-height:260px; overflow-y:auto;">
                     <table class="stats-table">
                         <thead>
                             <tr>
                                 <th>الشهر</th>
                                 <th>عدد الفواتير</th>
                                 <th>الضريبة المستحقة</th>
-                                <th style="color:var(--teal);">الإجمالي النهائي</th>
+                                <th style="color:var(--success);">الإجمالي النهائي</th>
                             </tr>
                         </thead>
                         <tbody>
                             <template x-for="m in tenantStats?.monthly" :key="m.month">
                                 <tr>
-                                    <td style="font-family:'Outfit',sans-serif; color:var(--text-2);"
+                                    <td style="font-family:'Inter',sans-serif; color:var(--text-2); font-weight:600;"
                                         x-text="m.month"></td>
-                                    <td x-text="m.total_invoices"></td>
-                                    <td style="color:var(--amber); font-family:'Outfit',sans-serif;"
+                                    <td style="font-weight:700;" x-text="m.total_invoices"></td>
+                                    <td style="color:var(--accent); font-family:'Inter',sans-serif; font-weight:600;"
                                         x-text="parseFloat(m.total_tax || 0).toLocaleString() + ' JOD'"></td>
-                                    <td style="font-weight:700; color:var(--teal); font-family:'Outfit',sans-serif;"
+                                    <td style="font-weight:800; color:var(--success); font-family:'Inter',sans-serif;"
                                         x-text="parseFloat(m.total_amount || 0).toLocaleString() + ' JOD'"></td>
                                 </tr>
                             </template>
@@ -1773,7 +2122,7 @@
     <div x-show="showAddUserModal" x-cloak class="modal-backdrop">
         <div class="modal-box">
             <div class="modal-head">
-                <div class="modal-head-icon gold">👤</div>
+                <div class="modal-head-icon accent">👤</div>
                 <div style="flex:1;">
                     <div class="modal-title">إضافة مستخدم جديد</div>
                     <div class="modal-subtitle">أدخل بيانات الحساب الجديد</div>
@@ -1782,7 +2131,7 @@
             </div>
             <div class="modal-divider"></div>
             <form @submit.prevent="createUser">
-                <div class="modal-body" style="display:flex; flex-direction:column; gap:14px;">
+                <div class="modal-body" style="display:flex; flex-direction:column; gap:16px;">
                     <div class="form-group">
                         <label class="form-label">الاسم الكامل</label>
                         <input type="text" x-model="newUser.name" placeholder="مثال: أحمد محمد" class="form-input"
@@ -1820,7 +2169,7 @@
                 </div>
                 <div class="modal-divider"></div>
                 <div class="modal-footer">
-                    <button type="submit" class="btn btn-navy" :disabled="isBusy" style="flex:1;">
+                    <button type="submit" class="btn btn-primary" :disabled="isBusy" style="flex:1;">
                         <span x-show="!isBusy">💾 حفظ المستخدم</span>
                         <span x-show="isBusy">⏳ جاري الحفظ...</span>
                     </button>
@@ -1834,7 +2183,7 @@
     <div x-show="showAddCompanyModal" x-cloak class="modal-backdrop">
         <div class="modal-box">
             <div class="modal-head">
-                <div class="modal-head-icon navy">🏭</div>
+                <div class="modal-head-icon primary">🏭</div>
                 <div style="flex:1;">
                     <div class="modal-title">إضافة شركة جديدة</div>
                     <div class="modal-subtitle">أدخل بيانات الشركة الرسمية</div>
@@ -1843,7 +2192,7 @@
             </div>
             <div class="modal-divider"></div>
             <form @submit.prevent="createCompany">
-                <div class="modal-body" style="display:flex; flex-direction:column; gap:14px;">
+                <div class="modal-body" style="display:flex; flex-direction:column; gap:16px;">
                     <div class="form-group">
                         <label class="form-label">اسم الشركة</label>
                         <input type="text" x-model="newCompany.name" placeholder="الاسم الكامل بالعربي"
@@ -1878,7 +2227,7 @@
                 </div>
                 <div class="modal-divider"></div>
                 <div class="modal-footer">
-                    <button type="submit" class="btn btn-navy" :disabled="isBusy" style="flex:1;">
+                    <button type="submit" class="btn btn-primary" :disabled="isBusy" style="flex:1;">
                         <span x-show="!isBusy">🏭 إضافة الشركة</span>
                         <span x-show="isBusy">⏳ جاري الإضافة...</span>
                     </button>
@@ -1892,7 +2241,7 @@
     <div x-show="showConnectModal" x-cloak class="modal-backdrop">
         <div class="modal-box">
             <div class="modal-head">
-                <div class="modal-head-icon teal">🔗</div>
+                <div class="modal-head-icon success">🔗</div>
                 <div style="flex:1;">
                     <div class="modal-title">ربط نظام الفوترة الحكومي</div>
                     <div class="modal-subtitle" x-text="'الشركة: ' + currentCompany?.name"></div>
@@ -1901,9 +2250,9 @@
             </div>
             <div class="modal-divider"></div>
             <form @submit.prevent="connectJoFotara">
-                <div class="modal-body" style="display:flex; flex-direction:column; gap:14px;">
+                <div class="modal-body" style="display:flex; flex-direction:column; gap:16px;">
                     <div
-                        style="background:var(--teal-subtle); border:1px solid rgba(4,120,87,0.2); border-radius:10px; padding:12px 14px; font-size:13px; color:var(--teal);">
+                        style="background:var(--success-light); border:1px solid rgba(16,185,129,0.2); border-radius:12px; padding:14px 16px; font-size:13px; color:#047857; font-weight:600;">
                         ℹ️ هذه البيانات تُستخرج من بوابة JoFotara الحكومية لربط الفوترة الإلكترونية
                     </div>
                     <div class="form-group">
@@ -1920,7 +2269,7 @@
                 </div>
                 <div class="modal-divider"></div>
                 <div class="modal-footer">
-                    <button type="submit" class="btn btn-teal" :disabled="isBusy" style="flex:1;">
+                    <button type="submit" class="btn btn-success" :disabled="isBusy" style="flex:1;">
                         <span x-show="!isBusy">🔗 حفظ وتفعيل الربط</span>
                         <span x-show="isBusy">⏳ جاري التفعيل...</span>
                     </button>
@@ -1934,7 +2283,7 @@
     <div x-show="showUploadModal" x-cloak class="modal-backdrop">
         <div class="modal-box">
             <div class="modal-head">
-                <div class="modal-head-icon teal">📤</div>
+                <div class="modal-head-icon success">📤</div>
                 <div style="flex:1;">
                     <div class="modal-title">رفع فاتورة جديدة</div>
                     <div class="modal-subtitle">سيتم تحليلها آلياً بالذكاء الاصطناعي</div>
@@ -1943,7 +2292,7 @@
             </div>
             <div class="modal-divider"></div>
             <form @submit.prevent="uploadInvoice">
-                <div class="modal-body" style="display:flex; flex-direction:column; gap:14px;">
+                <div class="modal-body" style="display:flex; flex-direction:column; gap:16px;">
                     <div class="form-group">
                         <label class="form-label">اختر الشركة</label>
                         <select x-model="uploadData.company_id" class="form-input" required>
@@ -1955,15 +2304,15 @@
                     </div>
                     <div class="form-group">
                         <label class="form-label">ملف الفاتورة</label>
-                        <div style="font-size:12px; color:var(--text-3); margin-bottom:6px;">مدعوم: صور (JPG, PNG) أو
-                            ملفات PDF</div>
+                        <div style="font-size:13px; color:var(--text-3); margin-bottom:6px; font-weight:500;">مدعوم: صور
+                            (JPG, PNG) أو ملفات PDF</div>
                         <input type="file" @change="selectedFile = $event.target.files[0]" class="form-input"
-                            style="padding:8px;" required>
+                            style="padding:10px;" required>
                     </div>
                 </div>
                 <div class="modal-divider"></div>
                 <div class="modal-footer">
-                    <button type="submit" class="btn btn-teal" :disabled="isUploading" style="flex:1;">
+                    <button type="submit" class="btn btn-success" :disabled="isUploading" style="flex:1;">
                         <span x-show="!isUploading">📤 رفع وتحليل</span>
                         <span x-show="isUploading">⏳ جاري التحليل والاستخراج...</span>
                     </button>
@@ -1977,7 +2326,7 @@
     <div x-show="showBatchUploadModal" x-cloak class="modal-backdrop">
         <div class="modal-box">
             <div class="modal-head">
-                <div class="modal-head-icon navy">📁</div>
+                <div class="modal-head-icon primary">📁</div>
                 <div style="flex:1;">
                     <div class="modal-title">رفع مجمع للفواتير (Batch Processing)</div>
                     <div class="modal-subtitle">اختر عدة فواتير لمعالجتها في الخلفية</div>
@@ -1986,10 +2335,11 @@
             </div>
             <div class="modal-divider"></div>
             <form @submit.prevent="uploadBatchInvoices">
-                <div class="modal-body" style="display:flex; flex-direction:column; gap:14px;">
+                <div class="modal-body" style="display:flex; flex-direction:column; gap:16px;">
                     <div class="form-group">
                         <label class="form-label">اختر الشركة</label>
-                        <select x-model="uploadData.company_id" class="form-input" required :disabled="isUploadingBatch">
+                        <select x-model="uploadData.company_id" class="form-input" required
+                            :disabled="isUploadingBatch">
                             <option value="">— يرجى اختيار الشركة —</option>
                             <template x-for="c in companies" :key="c.id">
                                 <option :value="c.id" x-text="c.name"></option>
@@ -1998,27 +2348,32 @@
                     </div>
                     <div class="form-group">
                         <label class="form-label">ملفات الفواتير (متعدد)</label>
-                        <div style="font-size:12px; color:var(--text-3); margin-bottom:6px;">مدعوم: صور أو PDF (يمكنك تحديد أكثر من ملف)</div>
-                        <input type="file" id="batchFileInput" multiple accept="image/*,application/pdf" class="form-input"
-                            style="padding:8px;" required :disabled="isUploadingBatch">
+                        <div style="font-size:13px; color:var(--text-3); margin-bottom:6px; font-weight:500;">مدعوم: صور
+                            أو PDF (يمكنك تحديد أكثر من ملف)</div>
+                        <input type="file" id="batchFileInput" multiple accept="image/*,application/pdf"
+                            class="form-input" style="padding:10px;" required :disabled="isUploadingBatch">
                     </div>
                     <div x-show="isUploadingBatch" style="margin-top:10px;">
-                        <div style="font-size:12px; font-weight:bold; color:var(--navy); margin-bottom:4px; display:flex; justify-content:space-between;">
+                        <div
+                            style="font-size:13px; font-weight:800; color:var(--primary-dark); margin-bottom:6px; display:flex; justify-content:space-between;">
                             <span>جاري رفع الدفعة...</span>
                             <span x-text="batchProgress.current + ' / ' + batchProgress.total"></span>
                         </div>
-                        <div style="height:6px; background:#e2e8f0; border-radius:3px; overflow:hidden;">
-                            <div style="height:100%; background:var(--navy); transition:width 0.3s;" :style="'width:' + (batchProgress.total ? (batchProgress.current/batchProgress.total*100) : 0) + '%'"></div>
+                        <div class="progress-bar-bg">
+                            <div class="progress-bar-fill" style="background:var(--primary);"
+                                :style="'width:' + (batchProgress.total ? (batchProgress.current/batchProgress.total*100) : 0) + '%'">
+                            </div>
                         </div>
                     </div>
                 </div>
                 <div class="modal-divider"></div>
                 <div class="modal-footer">
-                    <button type="submit" class="btn btn-navy" :disabled="isUploadingBatch" style="flex:1;">
+                    <button type="submit" class="btn btn-primary" :disabled="isUploadingBatch" style="flex:1;">
                         <span x-show="!isUploadingBatch">📁 بدء الرفع المجمع</span>
                         <span x-show="isUploadingBatch">⏳ يرجى الانتظار...</span>
                     </button>
-                    <button type="button" @click="showBatchUploadModal = false" class="btn btn-ghost" :disabled="isUploadingBatch">إلغاء</button>
+                    <button type="button" @click="showBatchUploadModal = false" class="btn btn-ghost"
+                        :disabled="isUploadingBatch">إلغاء</button>
                 </div>
             </form>
         </div>
@@ -2027,13 +2382,13 @@
     <!-- ── VIEW INVOICE MODAL ───────────────────────────── -->
     <div x-show="showViewModal" x-cloak class="modal-backdrop" @click.self="showViewModal = false">
         <div
-            style="background:white; border-radius:20px; box-shadow:var(--shadow-lg); width:100%; max-width:900px; height:88vh; display:flex; overflow:hidden;">
+            style="background:white; border-radius:24px; box-shadow:var(--shadow-lg); width:100%; max-width:900px; height:88vh; display:flex; overflow:hidden; border:1px solid var(--border-light);">
 
             <!-- Document Preview -->
             <div
-                style="flex:1; background:#f0f4f8; border-left:1px solid var(--border); position:relative; overflow:hidden;">
-                <div style="position:absolute; top:12px; right:12px; z-index:10;">
-                    <span class="badge badge-navy">معاينة الملف</span>
+                style="flex:1; background:#f1f5f9; border-left:1px solid var(--border-light); position:relative; overflow:hidden;">
+                <div style="position:absolute; top:16px; right:16px; z-index:10;">
+                    <span class="badge badge-primary">معاينة الملف</span>
                 </div>
                 <template x-if="currentInvoice?.file_url">
                     <iframe :src="currentInvoice.file_url + '&token=' + token()"
@@ -2041,20 +2396,21 @@
                 </template>
                 <div x-show="!currentInvoice?.file_url"
                     style="position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:var(--text-3);">
-                    <span style="font-size:48px; opacity:0.3;">📄</span>
-                    <p style="font-size:14px;">لا يوجد ملف مرفق</p>
+                    <span style="font-size:56px; opacity:0.2;">📄</span>
+                    <p style="font-size:15px; font-weight:600;">لا يوجد ملف مرفق</p>
                 </div>
             </div>
 
             <!-- Invoice Data Panel -->
-            <div style="width:340px; flex-shrink:0; display:flex; flex-direction:column; overflow:hidden;">
+            <div
+                style="width:360px; flex-shrink:0; display:flex; flex-direction:column; overflow:hidden; background:var(--surface);">
                 <!-- Header -->
                 <div
-                    style="padding:20px 20px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between;">
+                    style="padding:24px 24px 20px; border-bottom:1px solid var(--border-light); display:flex; align-items:center; justify-content:space-between;">
                     <div>
-                        <div style="font-size:16px; font-weight:700; color:var(--text-1);">تفاصيل الفاتورة</div>
-                        <span class="badge" style="margin-top:4px;"
-                            :class="currentInvoice?.status==='extracted' ? 'badge-blue' : (currentInvoice?.status==='approved' ? 'badge-teal' : 'badge-gray')"
+                        <div style="font-size:18px; font-weight:900; color:var(--text-1);">تفاصيل الفاتورة</div>
+                        <span class="badge" style="margin-top:6px;"
+                            :class="currentInvoice?.status==='extracted' ? 'badge-info' : (currentInvoice?.status==='approved' ? 'badge-success' : 'badge-gray')"
                             x-text="currentInvoice?.status === 'approved' ? '✓ مدققة' : (currentInvoice?.status === 'extracted' ? 'جاهزة للتدقيق' : currentInvoice?.status)">
                         </span>
                     </div>
@@ -2062,15 +2418,17 @@
                 </div>
 
                 <!-- Validation Warnings Banner -->
-                <div x-show="currentInvoice?.validation_warnings?.length > 0" 
-                     style="background:#fffbeb; border-bottom:1px solid #fde68a; padding:12px 16px;">
-                    <div style="display:flex; gap:10px; align-items:flex-start;">
-                        <span style="font-size:18px;">⚠️</span>
+                <div x-show="currentInvoice?.validation_warnings?.length > 0"
+                    style="background:#fffbeb; border-bottom:1px solid #fde68a; padding:14px 18px;">
+                    <div style="display:flex; gap:12px; align-items:flex-start;">
+                        <span style="font-size:20px;">⚠️</span>
                         <div>
-                            <div style="font-weight:700; color:#92400e; font-size:13px; margin-bottom:4px;">تنبيهات المدقق الذكي:</div>
-                            <ul style="margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:4px;">
+                            <div style="font-weight:800; color:#92400e; font-size:13px; margin-bottom:6px;">تنبيهات
+                                المدقق الذكي:</div>
+                            <ul
+                                style="margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:5px;">
                                 <template x-for="w in currentInvoice.validation_warnings">
-                                    <li style="font-size:12px; color:#b45309; display:flex; gap:6px;">
+                                    <li style="font-size:12px; color:#b45309; display:flex; gap:6px; font-weight:500;">
                                         <span>•</span>
                                         <span x-text="w"></span>
                                     </li>
@@ -2081,56 +2439,72 @@
                 </div>
 
                 <!-- Fields -->
-                <div style="flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px;">
+                <div style="flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:12px;">
 
                     <div class="invoice-field-card">
                         <div class="invoice-field-label">المورد (البائع)</div>
                         <div class="invoice-field-value" x-text="currentInvoice?.supplier_name || 'غير متوفر'"></div>
-                        <div style="font-size:12px; color:var(--text-3); font-family:'Outfit',sans-serif; margin-top:4px;"
+                        <div style="font-size:13px; color:var(--text-3); font-family:'Inter',sans-serif; margin-top:4px;"
                             x-text="'TIN: ' + (currentInvoice?.supplier_tin || '—')"></div>
                     </div>
 
                     <div class="invoice-field-card">
                         <div class="invoice-field-label">رقم الفاتورة والتاريخ</div>
                         <div class="invoice-field-value" x-text="currentInvoice?.invoice_number || '—'"></div>
-                        <div style="font-size:13px; color:var(--text-2); font-family:'Outfit',sans-serif; margin-top:3px;"
+                        <div style="font-size:14px; color:var(--text-2); font-family:'Inter',sans-serif; margin-top:4px; font-weight:600;"
                             x-text="currentInvoice?.invoice_date || '—'"></div>
                     </div>
 
                     <div class="invoice-field-card"
-                        style="background:var(--teal-subtle); border-color:rgba(4,120,87,0.2);">
-                        <div class="invoice-field-label" style="color:var(--teal);">المجموع الكلي</div>
-                        <div style="font-size:26px; font-weight:700; color:var(--teal); font-family:'El Messiri',sans-serif;"
+                        style="background:var(--success-light); border-color:rgba(16,185,129,0.2);">
+                        <div class="invoice-field-label" style="color:#047857;">المجموع الكلي</div>
+                        <div style="font-size:28px; font-weight:900; color:#047857; font-family:'Tajawal',sans-serif;"
                             x-text="parseFloat(currentInvoice?.grand_total || 0).toLocaleString() + ' JOD'"></div>
-                        <div style="font-size:12px; color:var(--amber); margin-top:4px; font-family:'Outfit',sans-serif;"
+                        <div style="font-size:13px; color:var(--accent); margin-top:6px; font-family:'Inter',sans-serif; font-weight:700;"
                             x-text="'الضريبة: ' + parseFloat(currentInvoice?.tax_amount || 0).toLocaleString() + ' JOD'">
                         </div>
                     </div>
 
                     <!-- Items Table -->
                     <div x-show="currentInvoice?.items?.length > 0"
-                        style="border:1px solid var(--border); border-radius:10px; overflow-x:auto;">
-                        <div style="padding:8px 12px; background:#f8fafc; font-size:11px; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:0.06em; position:sticky; top:0; z-index:2; border-bottom:1px solid var(--border);">
+                        style="border:1px solid var(--border-light); border-radius:14px; overflow-x:auto;">
+                        <div
+                            style="padding:10px 14px; background:#f8fafc; font-size:11px; font-weight:800; color:var(--text-3); text-transform:uppercase; letter-spacing:0.06em; position:sticky; top:0; z-index:2; border-bottom:1px solid var(--border-light);">
                             بنود الفاتورة
                         </div>
-                        <table style="width:100%; border-collapse:collapse; font-size:11px; min-width:320px;">
+                        <table style="width:100%; border-collapse:collapse; font-size:12px; min-width:320px;">
                             <thead style="background:white;">
                                 <tr>
-                                    <th style="padding:8px 10px; text-align:right; color:var(--text-3); font-weight:600; border-bottom:1px solid var(--border);">البند</th>
-                                    <th style="padding:8px 10px; text-align:center; color:var(--text-3); font-weight:600; border-bottom:1px solid var(--border);">الكمية</th>
-                                    <th style="padding:8px 10px; text-align:left; color:var(--text-3); font-weight:600; border-bottom:1px solid var(--border);">السعر</th>
-                                    <th style="padding:8px 10px; text-align:left; color:var(--text-3); font-weight:600; border-bottom:1px solid var(--border);">الضريبة</th>
-                                    <th style="padding:8px 10px; text-align:left; color:var(--text-3); font-weight:600; border-bottom:1px solid var(--border);">الإجمالي</th>
+                                    <th
+                                        style="padding:10px 12px; text-align:right; color:var(--text-3); font-weight:700; border-bottom:1px solid var(--border-light);">
+                                        البند</th>
+                                    <th
+                                        style="padding:10px 12px; text-align:center; color:var(--text-3); font-weight:700; border-bottom:1px solid var(--border-light);">
+                                        الكمية</th>
+                                    <th
+                                        style="padding:10px 12px; text-align:left; color:var(--text-3); font-weight:700; border-bottom:1px solid var(--border-light);">
+                                        السعر</th>
+                                    <th
+                                        style="padding:10px 12px; text-align:left; color:var(--text-3); font-weight:700; border-bottom:1px solid var(--border-light);">
+                                        الضريبة</th>
+                                    <th
+                                        style="padding:10px 12px; text-align:left; color:var(--text-3); font-weight:700; border-bottom:1px solid var(--border-light);">
+                                        الإجمالي</th>
                                 </tr>
                             </thead>
                             <tbody>
                                 <template x-for="item in currentInvoice?.items" :key="item.id">
-                                    <tr style="border-bottom:1px solid #f0f4f8;">
-                                        <td style="padding:8px 10px; color:var(--text-2);" x-text="item.description"></td>
-                                        <td style="padding:8px 10px; text-align:center; color:var(--text-3); font-family:'Outfit',sans-serif;" x-text="item.quantity"></td>
-                                        <td style="padding:8px 10px; text-align:left; color:var(--teal); font-family:'Outfit',sans-serif;" x-text="item.unit_price"></td>
-                                        <td style="padding:8px 10px; text-align:left; color:var(--amber); font-family:'Outfit',sans-serif;" x-text="(item.tax_rate || 0) + '%'"></td>
-                                        <td style="padding:8px 10px; text-align:left; font-weight:bold; color:var(--navy); font-family:'Outfit',sans-serif;" x-text="item.line_total"></td>
+                                    <tr style="border-bottom:1px solid var(--border-light);">
+                                        <td style="padding:10px 12px; color:var(--text-2); font-weight:600;"
+                                            x-text="item.description"></td>
+                                        <td style="padding:10px 12px; text-align:center; color:var(--text-3); font-family:'Inter',sans-serif; font-weight:600;"
+                                            x-text="item.quantity"></td>
+                                        <td style="padding:10px 12px; text-align:left; color:var(--success); font-family:'Inter',sans-serif; font-weight:700;"
+                                            x-text="item.unit_price"></td>
+                                        <td style="padding:10px 12px; text-align:left; color:var(--accent); font-family:'Inter',sans-serif; font-weight:600;"
+                                            x-text="(item.tax_rate || 0) + '%'"></td>
+                                        <td style="padding:10px 12px; text-align:left; font-weight:800; color:var(--primary-dark); font-family:'Inter',sans-serif;"
+                                            x-text="item.line_total"></td>
                                     </tr>
                                 </template>
                             </tbody>
@@ -2139,15 +2513,18 @@
 
                     <!-- QR Code -->
                     <div x-show="currentInvoice?.status === 'approved' || currentInvoice?.qr_code || currentInvoice?.jofotara?.qr_image_uri"
-                        style="background:white; border:1px solid var(--border); border-radius:12px; padding:16px; display:flex; flex-direction:column; align-items:center; gap:8px;">
+                        style="background:var(--bg); border:1px solid var(--border-light); border-radius:16px; padding:20px; display:flex; flex-direction:column; align-items:center; gap:10px;">
                         <div
-                            style="font-size:11px; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:0.07em;">
-                            رمز QR الضريبي</div>
+                            style="font-size:11px; font-weight:800; color:var(--text-3); text-transform:uppercase; letter-spacing:0.07em;">
+                            رمز QR الضريبي
+                        </div>
                         <template x-if="getQrSrc(currentInvoice)">
-                            <img :src="getQrSrc(currentInvoice)" style="width:140px; height:140px; object-fit:contain;"
+                            <img :src="getQrSrc(currentInvoice)"
+                                style="width:150px; height:150px; object-fit:contain; border-radius:12px;"
                                 alt="QR Code">
                         </template>
-                        <div x-show="!getQrSrc(currentInvoice)" style="font-size:12px; color:var(--text-3); text-align:center;">
+                        <div x-show="!getQrSrc(currentInvoice)"
+                            style="font-size:13px; color:var(--text-3); text-align:center; font-weight:500;">
                             جاري توليد الرمز...
                         </div>
                     </div>
@@ -2155,28 +2532,31 @@
 
                 <!-- Actions -->
                 <div
-                    style="padding:14px 16px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:8px;">
+                    style="padding:16px 20px 20px; border-top:1px solid var(--border-light); display:flex; flex-direction:column; gap:10px; background:var(--surface);">
                     <!-- Warnings Acknowledgement -->
                     <div x-show="currentInvoice?.status === 'extracted' && currentInvoice?.validation_warnings?.length > 0"
-                         style="background:#f8fafc; border:1px solid var(--border); border-radius:10px; padding:10px; margin-bottom:4px;">
+                        style="background:var(--bg); border:1px solid var(--border-light); border-radius:12px; padding:12px; margin-bottom:4px;">
                         <label style="display:flex; gap:10px; align-items:center; cursor:pointer; user-select:none;">
-                            <input type="checkbox" x-model="acknowledgedWarnings" style="width:16px; height:16px; accent-color:var(--teal);">
-                            <span style="font-size:12px; font-weight:600; color:var(--text-2);">لقد راجعت التنبيهات وأتحمل مسؤولية الاعتماد</span>
+                            <input type="checkbox" x-model="acknowledgedWarnings"
+                                style="width:18px; height:18px; accent-color:var(--success);">
+                            <span style="font-size:13px; font-weight:700; color:var(--text-2);">لقد راجعت التنبيهات
+                                وأتحمل مسؤولية الاعتماد</span>
                         </label>
                     </div>
 
-                    <button x-show="currentInvoice?.status === 'extracted'" @click="approveInvoice" class="btn btn-teal"
-                        :disabled="isBusy || (currentInvoice?.validation_warnings?.length > 0 && !acknowledgedWarnings)" 
+                    <button x-show="currentInvoice?.status === 'extracted'" @click="approveInvoice"
+                        class="btn btn-success"
+                        :disabled="isBusy || (currentInvoice?.validation_warnings?.length > 0 && !acknowledgedWarnings)"
                         style="width:100%; justify-content:center;">
                         <span x-show="!isBusy">✔️ تدقيق واعتماد</span>
                         <span x-show="isBusy">⏳ جاري التدقيق...</span>
                     </button>
                     <button x-show="currentInvoice?.status === 'extracted'"
-                        style="width:100%; background:var(--red-subtle); color:var(--red); border:none; padding:10px; border-radius:10px; font-family:inherit; font-size:14px; font-weight:600; cursor:pointer; transition:all 0.18s;"
+                        style="width:100%; background:var(--danger-light); color:var(--danger); border:none; padding:12px; border-radius:12px; font-family:inherit; font-size:14px; font-weight:800; cursor:pointer; transition:all 0.2s;"
                         onmouseover="this.style.background='#fecaca'"
-                        onmouseout="this.style.background='var(--red-subtle)'">❌ رفض الفاتورة</button>
+                        onmouseout="this.style.background='var(--danger-light)'">❌ رفض الفاتورة</button>
                     <div x-show="currentInvoice?.status === 'approved'"
-                        style="width:100%; background:var(--teal-subtle); color:var(--teal); border:1px solid rgba(4,120,87,0.2); padding:10px; border-radius:10px; font-size:14px; font-weight:700; text-align:center;">
+                        style="width:100%; background:var(--success-light); color:#047857; border:1px solid rgba(16,185,129,0.2); padding:12px; border-radius:12px; font-size:15px; font-weight:900; text-align:center;">
                         ✅ مدققة ومعتمدة
                     </div>
                 </div>
@@ -2188,7 +2568,7 @@
     <div x-show="showEditTenantModal" x-cloak class="modal-backdrop">
         <div class="modal-box" style="max-width:540px;">
             <div class="modal-head">
-                <div class="modal-head-icon navy">⚙️</div>
+                <div class="modal-head-icon primary">⚙️</div>
                 <div style="flex:1;">
                     <div class="modal-title">تعديل بيانات المكتب</div>
                     <div class="modal-subtitle" x-text="currentTenant.name"></div>
@@ -2197,7 +2577,7 @@
             </div>
             <div class="modal-divider"></div>
             <form @submit.prevent="updateTenant">
-                <div class="modal-body" style="display:flex; flex-direction:column; gap:14px;">
+                <div class="modal-body" style="display:flex; flex-direction:column; gap:16px;">
                     <div class="form-group">
                         <label class="form-label">اسم المكتب</label>
                         <input type="text" x-model="currentTenant.name" class="form-input" required>
@@ -2223,7 +2603,7 @@
                 </div>
                 <div class="modal-divider"></div>
                 <div class="modal-footer">
-                    <button type="submit" class="btn btn-navy" :disabled="isBusy" style="flex:1;">
+                    <button type="submit" class="btn btn-primary" :disabled="isBusy" style="flex:1;">
                         <span x-show="!isBusy">💾 حفظ التعديلات</span>
                         <span x-show="isBusy">⏳ جاري الحفظ...</span>
                     </button>
@@ -2237,7 +2617,7 @@
     <div x-show="showAddTenantModal" x-cloak class="modal-backdrop">
         <div class="modal-box modal-box-lg">
             <div class="modal-head">
-                <div class="modal-head-icon gold">🏗️</div>
+                <div class="modal-head-icon accent">🏗️</div>
                 <div style="flex:1;">
                     <div class="modal-title">إضافة مكتب محاسبي جديد</div>
                     <div class="modal-subtitle">سيتم إنشاء حساب المدير المسؤول تلقائياً</div>
@@ -2246,7 +2626,7 @@
             </div>
             <div class="modal-divider"></div>
             <form @submit.prevent="createTenant">
-                <div class="modal-body" style="display:flex; flex-direction:column; gap:18px;">
+                <div class="modal-body" style="display:flex; flex-direction:column; gap:20px;">
 
                     <!-- Office Info -->
                     <div>
@@ -2299,7 +2679,7 @@
                 </div>
                 <div class="modal-divider"></div>
                 <div class="modal-footer">
-                    <button type="submit" class="btn btn-navy" :disabled="isBusy" style="flex:1;">
+                    <button type="submit" class="btn btn-primary" :disabled="isBusy" style="flex:1;">
                         <span x-show="!isBusy">🏗️ إنشاء المكتب والمدير</span>
                         <span x-show="isBusy">⏳ جاري الإنشاء...</span>
                     </button>
@@ -2312,15 +2692,21 @@
 
     <!-- ════ EXCEL IMPORT MODAL ════════════════════════════ -->
     <div x-show="showExcelModal" class="modal-backdrop" x-cloak @click.self="showExcelModal = false">
-        <div class="modal-card" style="max-width: 500px;">
-            <div class="modal-header">
-                <h3>📊 استيراد فواتير (Excel/Bulk)</h3>
-                <button @click="showExcelModal = false" class="text-2xl">&times;</button>
+        <div class="modal-box" style="max-width: 500px;">
+            <div class="modal-head">
+                <div class="modal-head-icon success">📊</div>
+                <div style="flex:1;">
+                    <div class="modal-title">استيراد فواتير (Excel/Bulk)</div>
+                    <div class="modal-subtitle">استخدم هذه الميزة لاستيراد كميات كبيرة من الفواتير</div>
+                </div>
+                <button @click="showExcelModal = false" class="modal-close-btn">✕</button>
             </div>
-            <div class="p-6">
-                <p class="text-sm text-gray-500 mb-6">استخدم هذه الميزة لاستيراد كميات كبيرة من الفواتير من ملف Excel. سيقوم النظام بمحاولة مطابقة الأعمدة تلقائياً.</p>
-                
-                <div class="form-group mb-4">
+            <div class="modal-divider"></div>
+            <div class="modal-body" style="display:flex; flex-direction:column; gap:16px;">
+                <p style="font-size:14px; color:var(--text-3); font-weight:500;">سيقوم النظام بمحاولة مطابقة الأعمدة
+                    تلقائياً.</p>
+
+                <div class="form-group">
                     <label class="form-label">الشركة المستهدفة</label>
                     <select x-model="uploadData.company_id" class="form-input">
                         <option value="">اختر الشركة...</option>
@@ -2330,70 +2716,89 @@
                     </select>
                 </div>
 
-                <div class="form-group mb-6">
+                <div class="form-group">
                     <label class="form-label">ملف الـ Excel (.xlsx, .csv)</label>
-                    <input type="file" id="excelFileInput" class="form-input" accept=".xlsx, .xls, .csv">
-                </div>
-
-                <div class="modal-footer px-0 pb-0">
-                    <button @click="uploadExcel()" class="btn btn-teal w-full justify-center" :disabled="isBusy">
-                        <span x-show="!isBusy">🚀 بدء الاستيراد الآن</span>
-                        <span x-show="isBusy">⏳ جاري المعالجة...</span>
-                    </button>
+                    <input type="file" id="excelFileInput" class="form-input" accept=".xlsx, .xls, .csv"
+                        style="padding:10px;">
                 </div>
             </div>
+            <div class="modal-divider"></div>
+            <div class="modal-footer">
+                <button @click="uploadExcel()" class="btn btn-success w-full justify-center" :disabled="isBusy">
+                    <span x-show="!isBusy">🚀 بدء الاستيراد الآن</span>
+                    <span x-show="isBusy">⏳ جاري المعالجة...</span>
+                </button>
+            </div>
         </div>
     </div>
 
     <!-- ── UPLOAD PAYMENT RECEIPT MODAL ─────────────────────────── -->
     <div x-show="showPaymentModal" x-cloak class="modal-backdrop">
-        <div class="modal-box" style="max-width:440px; padding:15px;">
-            <div class="modal-head" style="margin-bottom:12px;">
-                <div class="modal-head-icon gold" style="width:36px; height:36px; font-size:18px;">💳</div>
+        <div class="modal-box" style="max-width:440px;">
+            <div class="modal-head" style="margin-bottom:8px;">
+                <div class="modal-head-icon accent" style="width:40px; height:40px; font-size:20px;">💳</div>
                 <div style="flex:1;">
-                    <div class="modal-title" style="font-size:17px;">تأكيد دفع الاشتراك</div>
-                    <div class="modal-subtitle" style="font-size:11px;">يرجى تحويل المبلغ ثم رفع وصل الدفع</div>
+                    <div class="modal-title" style="font-size:18px;">تأكيد دفع الاشتراك</div>
+                    <div class="modal-subtitle" style="font-size:12px;">يرجى تحويل المبلغ ثم رفع وصل الدفع</div>
                 </div>
                 <button @click="showPaymentModal = false" class="modal-close-btn">✕</button>
             </div>
-            
-            <div class="modal-body p-0">
-                <div style="background:var(--teal-subtle); border:1px solid rgba(4,120,87,0.15); border-radius:10px; padding:12px; margin-bottom:12px;">
+
+            <div class="modal-body" style="padding-top:12px;">
+                <div
+                    style="background:var(--success-light); border:1px solid rgba(16,185,129,0.15); border-radius:12px; padding:14px; margin-bottom:14px;">
                     <div style="display:flex; justify-content:space-between; font-size:13px; margin-bottom:6px;">
-                        <span style="color:var(--text-3);">الباقة:</span>
-                        <span style="font-weight:700; color:var(--navy);" x-text="paymentData.plan_name"></span>
+                        <span style="color:var(--text-3); font-weight:600;">الباقة:</span>
+                        <span style="font-weight:800; color:var(--text-1);" x-text="paymentData.plan_name"></span>
                     </div>
                     <div style="display:flex; justify-content:space-between; font-size:13px; margin-bottom:6px;">
-                        <span style="color:var(--text-3);">المبلغ:</span>
-                        <span style="font-weight:700; color:var(--teal);" x-text="paymentData.amount + ' JOD'"></span>
+                        <span style="color:var(--text-3); font-weight:600;">المبلغ:</span>
+                        <span style="font-weight:800; color:var(--success);"
+                            x-text="paymentData.amount + ' JOD'"></span>
                     </div>
-                    <div style="display:flex; justify-content:space-between; font-size:13px; margin-bottom:10px; border-bottom:1px dashed rgba(0,0,0,0.1); padding-bottom:6px;">
-                        <span style="color:var(--text-3);">Reference:</span>
-                        <span style="font-weight:700; color:var(--amber);" x-text="paymentData.reference"></span>
-                    </div>
-                    
-                    <div style="text-align:center;">
-                        <p style="margin-bottom:5px; font-size:11px; color:var(--text-2);">التحويل عبر CliQ للحساب:</p>
-                        <div style="background:white; padding:6px 12px; border:1px solid var(--teal); border-radius:6px; font-family:'Outfit',sans-serif; font-size:17px; font-weight:bold; color:var(--navy); display:inline-block;" x-text="paymentData.cliq_alias"></div>
+                    <div
+                        style="display:flex; justify-content:space-between; font-size:13px; margin-bottom:12px; border-bottom:1px dashed rgba(0,0,0,0.1); padding-bottom:8px;">
+                        <span style="color:var(--text-3); font-weight:600;">Reference:</span>
+                        <span style="font-weight:800; color:var(--accent); font-family:'Inter',sans-serif;"
+                            x-text="paymentData.reference"></span>
                     </div>
 
-                    <div style="margin-top:12px; background:white; padding:10px; border-radius:8px; border:1px solid var(--teal-subtle);">
-                        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:4px;">
-                            <label style="color:var(--navy); font-weight:700; font-size:11px;">رقم المرجع (من البنك)</label>
-                            <span style="background:var(--teal); color:white; font-size:8px; padding:1px 5px; border-radius:4px; font-weight:700;">تفعيل فوري ⚡</span>
+                    <div style="text-align:center;">
+                        <p style="margin-bottom:6px; font-size:12px; color:var(--text-2); font-weight:600;">التحويل عبر
+                            CliQ للحساب:</p>
+                        <div style="background:white; padding:8px 16px; border:2px solid var(--success); border-radius:10px; font-family:'Inter',sans-serif; font-size:18px; font-weight:900; color:var(--primary-dark); display:inline-block;"
+                            x-text="paymentData.cliq_alias"></div>
+                    </div>
+
+                    <div
+                        style="margin-top:14px; background:white; padding:12px; border-radius:10px; border:1px solid var(--success-light);">
+                        <div
+                            style="display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;">
+                            <label style="color:var(--primary-dark); font-weight:800; font-size:12px;">رقم المرجع (من
+                                البنك)</label>
+                            <span
+                                style="background:var(--success); color:white; font-size:9px; padding:2px 8px; border-radius:6px; font-weight:800;">تفعيل
+                                فوري ⚡</span>
                         </div>
-                        <input type="text" x-model="paymentData.bank_reference" class="form-input" placeholder="ألصق رقم المرجع هنا..." style="font-family:'Outfit',sans-serif; font-size:14px; padding:6px; border:1px solid var(--teal); text-align:center;">
+                        <input type="text" x-model="paymentData.bank_reference" class="form-input"
+                            placeholder="ألصق رقم المرجع هنا..."
+                            style="font-family:'Inter',sans-serif; font-size:14px; padding:8px; border:2px solid var(--success); text-align:center; font-weight:700;">
                     </div>
                 </div>
-                
-                <div style="margin-bottom:12px;">
-                    <label style="font-size:12px; font-weight:600; color:var(--text-2); display:block; margin-bottom:4px;">صورة وصل التحويل (اختياري)</label>
-                    <input type="file" @change="selectedFile = $event.target.files[0]" class="form-input" style="padding:5px; font-size:12px;" accept="image/*,application/pdf">
+
+                <div style="margin-bottom:14px;">
+                    <label
+                        style="font-size:13px; font-weight:700; color:var(--text-2); display:block; margin-bottom:6px;">صورة
+                        وصل التحويل (اختياري)</label>
+                    <input type="file" @change="selectedFile = $event.target.files[0]" class="form-input"
+                        style="padding:8px; font-size:13px;" accept="image/*,application/pdf">
                 </div>
 
                 <div style="display:flex; gap:8px;">
-                    <button @click="showPaymentModal = false" class="btn btn-ghost" style="flex:1; height:40px; font-size:13px;">إلغاء</button>
-                    <button @click="uploadReceipt()" class="btn btn-navy" :disabled="isBusy" style="flex:2; height:40px; font-size:13px;">
+                    <button @click="showPaymentModal = false" class="btn btn-ghost"
+                        style="flex:1; height:44px; font-size:14px;">إلغاء</button>
+                    <button @click="uploadReceipt()" class="btn btn-primary" :disabled="isBusy"
+                        style="flex:2; height:44px; font-size:14px;">
                         <span x-show="!isBusy">📤 إرسال الوصل للتفعيل</span>
                         <span x-show="isBusy">⏳ جاري الإرسال...</span>
                     </button>
@@ -2415,11 +2820,11 @@
                 paymentData: { cliq_alias: '', amount: 0, plan_name: '', reference: '', payment_id: '' },
                 stats: { total: 0, pending: 0, approved: 0 },
 
-                 showAddUserModal: false, showAddCompanyModal: false, showConnectModal: false,
-                 showUploadModal: false, showViewModal: false, showCompanyStatsModal: false,
-                 showExcelModal: false, showBatchUploadModal: false,
-                 isUploadingBatch: false, batchProgress: { total: 0, current: 0 },
-                 showAddTenantModal: false, showEditTenantModal: false, showTenantStatsModal: false,
+                showAddUserModal: false, showAddCompanyModal: false, showConnectModal: false,
+                showUploadModal: false, showViewModal: false, showCompanyStatsModal: false,
+                showExcelModal: false, showBatchUploadModal: false,
+                isUploadingBatch: false, batchProgress: { total: 0, current: 0 },
+                showAddTenantModal: false, showEditTenantModal: false, showTenantStatsModal: false,
                 acknowledgedWarnings: false,
                 isBusy: false, globalError: '',
 
@@ -2478,13 +2883,13 @@
                     if (this.page === 'subscription') this.plans = await this.apiRequest('v1/subscriptions/plans') || [];
                     if (this.user.role === 'super_admin') this.tenants = await this.apiRequest('v1/tenants') || [];
                 },
-//
+                //
                 getQrSrc(inv) {
                     if (!inv) return '';
                     if (inv.jofotara?.qr_image_uri) return inv.jofotara.qr_image_uri;
-                    
+
                     let qrData = inv.qr_code;
-                    
+
                     // If no QR data in DB but approved, generate a fallback data string
                     if (!qrData && inv.status === 'approved') {
                         qrData = `Invoice: ${inv.invoice_number || 'N/A'}\nSupplier: ${inv.supplier_name || 'N/A'}\nTotal: ${inv.grand_total || '0'} JOD\nDate: ${inv.invoice_date || ''}`;
@@ -2499,9 +2904,9 @@
                                 level: 'M'
                             });
                             return qr.toDataURL();
-                        } catch (e) { 
+                        } catch (e) {
                             console.error('QR Gen Error:', e);
-                            return ''; 
+                            return '';
                         }
                     }
                     return '';
@@ -2648,7 +3053,7 @@
 
                     this.isUploadingBatch = true;
                     this.batchProgress = { total: fileInput.files.length, current: 0 };
-                    
+
                     try {
                         // 1. Create batch
                         const batchRes = await fetch('/index.php?route=v1/batches/create', {
@@ -2661,17 +3066,17 @@
                             this.isUploadingBatch = false;
                             return this.showError(batchRes.message);
                         }
-                        
+
                         const batchId = batchRes.data.batch_id;
-                        
+
                         // 2. Upload files sequentially
                         for (let i = 0; i < fileInput.files.length; i++) {
                             const file = fileInput.files[i];
                             const formData = new FormData();
                             formData.append('batch_id', batchId);
-                            formData.append('image_order', i+1);
+                            formData.append('image_order', i + 1);
                             formData.append('image', file);
-                            
+
                             await fetch('/index.php?route=v1/batches/upload-image', {
                                 method: 'POST',
                                 headers: { 'Authorization': 'Bearer ' + this.token() },
@@ -2679,14 +3084,14 @@
                             });
                             this.batchProgress.current = i + 1;
                         }
-                        
+
                         // 3. Finalize
                         await fetch('/index.php?route=v1/batches/finalize', {
                             method: 'POST',
                             headers: { 'Authorization': 'Bearer ' + this.token(), 'Content-Type': 'application/json' },
                             body: JSON.stringify({ batch_id: batchId })
                         });
-                        
+
                         this.isUploadingBatch = false;
                         this.showBatchUploadModal = false;
                         alert('تم رفع الدفعة بنجاح! جاري معالجتها في الخلفية.');
@@ -2721,125 +3126,125 @@
                         this.isBusy = false;
                         this.showError('حدث خطأ أثناء الاعتماد');
                     }
-                 },
- 
-                 async uploadExcel() {
-                     const fileInput = document.getElementById('excelFileInput');
-                     if (!fileInput.files[0]) return alert('الرجاء اختيار ملف اكسل');
-                     if (!this.uploadData.company_id) return alert('الرجاء اختيار الشركة');
- 
-                     this.isBusy = true;
-                     const formData = new FormData();
-                     formData.append('company_id', this.uploadData.company_id);
-                     formData.append('file', fileInput.files[0]);
- 
-                     try {
-                         const res = await fetch('/index.php?route=v1/excel/import', {
-                             method: 'POST',
-                             headers: { 'Authorization': 'Bearer ' + this.token() },
-                             body: formData
-                         });
-                         const json = await res.json();
-                         this.isBusy = false;
- 
-                         if (json.success) {
-                             alert(json.message);
-                             this.showExcelModal = false;
-                             fileInput.value = '';
-                             this.loadAll();
-                         } else {
-                             this.showError(json.message);
-                         }
-                     } catch (e) {
-                         this.isBusy = false;
-                         this.showError('فشل الاتصال بالخادم أثناء استيراد الاكسل');
-                     }
-                 },
+                },
 
-                 async upgradePlan(plan) {
-                     if (this.isBusy) return;
-                     this.isBusy = true;
-                     try {
-                         const res = await fetch('/index.php?route=v1/payments/create', {
-                             method: 'POST',
-                             headers: { 'Authorization': 'Bearer ' + this.token(), 'Content-Type': 'application/json' },
-                             body: JSON.stringify({ plan_id: plan.id })
-                         });
-                         const json = await res.json();
-                         this.isBusy = false;
+                async uploadExcel() {
+                    const fileInput = document.getElementById('excelFileInput');
+                    if (!fileInput.files[0]) return alert('الرجاء اختيار ملف اكسل');
+                    if (!this.uploadData.company_id) return alert('الرجاء اختيار الشركة');
 
-                         if (json.success) {
-                             this.paymentData = {
-                                 cliq_alias: json.data.cliq_alias,
-                                 amount: json.data.amount_jod,
-                                 plan_name: json.data.plan_name,
-                                 reference: json.data.reference_number,
-                                 payment_id: json.data.payment_id
-                             };
-                             this.showPaymentModal = true;
-                         } else {
-                             this.showError(json.message);
-                         }
-                     } catch (e) {
-                         this.isBusy = false;
-                         this.showError('فشل في إنشاء طلب الدفع. يرجى المحاولة لاحقاً.');
-                     }
-                 },
+                    this.isBusy = true;
+                    const formData = new FormData();
+                    formData.append('company_id', this.uploadData.company_id);
+                    formData.append('file', fileInput.files[0]);
 
-                 async uploadReceipt() {
-                     if (!this.selectedFile || this.isBusy) return alert('الرجاء اختيار صورة الوصل');
-                     if (!this.paymentData.bank_reference) return alert('الرجاء إدخال رقم مرجع الحوالة للتفعيل الآلي');
-                     
-                     this.isBusy = true;
-                     const formData = new FormData();
-                     formData.append('payment_id', this.paymentData.payment_id);
-                     formData.append('bank_reference', this.paymentData.bank_reference);
-                     formData.append('receipt', this.selectedFile);
+                    try {
+                        const res = await fetch('/index.php?route=v1/excel/import', {
+                            method: 'POST',
+                            headers: { 'Authorization': 'Bearer ' + this.token() },
+                            body: formData
+                        });
+                        const json = await res.json();
+                        this.isBusy = false;
 
-                     try {
-                         const res = await fetch('/index.php?route=v1/payments/upload-receipt', {
-                             method: 'POST',
-                             headers: { 'Authorization': 'Bearer ' + this.token() },
-                             body: formData
-                         });
-                         const json = await res.json();
-                         this.isBusy = false;
+                        if (json.success) {
+                            alert(json.message);
+                            this.showExcelModal = false;
+                            fileInput.value = '';
+                            this.loadAll();
+                        } else {
+                            this.showError(json.message);
+                        }
+                    } catch (e) {
+                        this.isBusy = false;
+                        this.showError('فشل الاتصال بالخادم أثناء استيراد الاكسل');
+                    }
+                },
 
-                         if (json.success) {
-                             alert(json.message);
-                             this.showPaymentModal = false;
-                             this.selectedFile = null;
-                             await this.loadAll();
-                         } else {
-                             this.showError(json.message);
-                         }
-                     } catch (e) {
-                         this.isBusy = false;
-                         this.showError('حدث خطأ أثناء رفع الوصل.');
-                     }
-                 },
+                async upgradePlan(plan) {
+                    if (this.isBusy) return;
+                    this.isBusy = true;
+                    try {
+                        const res = await fetch('/index.php?route=v1/payments/create', {
+                            method: 'POST',
+                            headers: { 'Authorization': 'Bearer ' + this.token(), 'Content-Type': 'application/json' },
+                            body: JSON.stringify({ plan_id: plan.id })
+                        });
+                        const json = await res.json();
+                        this.isBusy = false;
 
-                 async cancelPayment(paymentId) {
-                     if (!confirm('هل أنت متأكد من إلغاء طلب الترقية؟')) return;
-                     this.isBusy = true;
-                     try {
-                         const res = await fetch('/index.php?route=v1/payments/delete', {
-                             method: 'POST',
-                             headers: { 'Authorization': 'Bearer ' + this.token(), 'Content-Type': 'application/json' },
-                             body: JSON.stringify({ payment_id: paymentId })
-                         });
-                         const json = await res.json();
-                         this.isBusy = false;
-                         if (json.success) {
-                             await this.loadAll();
-                         } else {
-                             this.showError(json.message);
-                         }
-                     } catch (e) {
-                         this.isBusy = false;
-                         this.showError('فشل إلغاء الطلب.');
-                     }
-                 },
+                        if (json.success) {
+                            this.paymentData = {
+                                cliq_alias: json.data.cliq_alias,
+                                amount: json.data.amount_jod,
+                                plan_name: json.data.plan_name,
+                                reference: json.data.reference_number,
+                                payment_id: json.data.payment_id
+                            };
+                            this.showPaymentModal = true;
+                        } else {
+                            this.showError(json.message);
+                        }
+                    } catch (e) {
+                        this.isBusy = false;
+                        this.showError('فشل في إنشاء طلب الدفع. يرجى المحاولة لاحقاً.');
+                    }
+                },
+
+                async uploadReceipt() {
+                    if (!this.selectedFile || this.isBusy) return alert('الرجاء اختيار صورة الوصل');
+                    if (!this.paymentData.bank_reference) return alert('الرجاء إدخال رقم مرجع الحوالة للتفعيل الآلي');
+
+                    this.isBusy = true;
+                    const formData = new FormData();
+                    formData.append('payment_id', this.paymentData.payment_id);
+                    formData.append('bank_reference', this.paymentData.bank_reference);
+                    formData.append('receipt', this.selectedFile);
+
+                    try {
+                        const res = await fetch('/index.php?route=v1/payments/upload-receipt', {
+                            method: 'POST',
+                            headers: { 'Authorization': 'Bearer ' + this.token() },
+                            body: formData
+                        });
+                        const json = await res.json();
+                        this.isBusy = false;
+
+                        if (json.success) {
+                            alert(json.message);
+                            this.showPaymentModal = false;
+                            this.selectedFile = null;
+                            await this.loadAll();
+                        } else {
+                            this.showError(json.message);
+                        }
+                    } catch (e) {
+                        this.isBusy = false;
+                        this.showError('حدث خطأ أثناء رفع الوصل.');
+                    }
+                },
+
+                async cancelPayment(paymentId) {
+                    if (!confirm('هل أنت متأكد من إلغاء طلب الترقية؟')) return;
+                    this.isBusy = true;
+                    try {
+                        const res = await fetch('/index.php?route=v1/payments/delete', {
+                            method: 'POST',
+                            headers: { 'Authorization': 'Bearer ' + this.token(), 'Content-Type': 'application/json' },
+                            body: JSON.stringify({ payment_id: paymentId })
+                        });
+                        const json = await res.json();
+                        this.isBusy = false;
+                        if (json.success) {
+                            await this.loadAll();
+                        } else {
+                            this.showError(json.message);
+                        }
+                    } catch (e) {
+                        this.isBusy = false;
+                        this.showError('فشل إلغاء الطلب.');
+                    }
+                },
 
                 logout() { localStorage.clear(); window.location.href = '/login.php'; }
             }));