diff --git a/public/shell.php b/public/shell.php
index d701f6b..92159f1 100644
--- a/public/shell.php
+++ b/public/shell.php
@@ -1,406 +1,1536 @@
 <!DOCTYPE html>
-<html lang="ar" dir="rtl" data-theme="dark">
+<html lang="ar" dir="rtl" data-theme="light">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>مُصادَق | لوحة التحكم الذكية</title>
-    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
+    <link
+        href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&family=El+Messiri:wght@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
+        ═══════════════════════════════════════════════ */
         :root {
-            --emerald: #10b981;
-            --emerald-glow: rgba(16, 185, 129, 0.4);
-            --bg-base: #030712;
-            --bg-surface: #0f172a;
-            --border-default: rgba(255,255,255,0.08);
-            --text-primary: #f8fafc;
-            --text-secondary: #94a3b8;
+            --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);
+
+            /* 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;
         }
-        body { 
-            font-family: 'IBM Plex Sans Arabic', sans-serif; 
-            background-color: var(--bg-base); 
-            color: var(--text-primary);
-            background-image: radial-gradient(circle at top right, rgba(16,185,129,0.05), transparent 400px);
+
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+            font-family: 'IBM Plex Sans Arabic', sans-serif;
+            background: var(--bg);
+            color: var(--text-1);
+            -webkit-font-smoothing: antialiased;
+            font-size: 14px;
+            line-height: 1.6;
+        }
+
+        h1,
+        h2,
+        h3,
+        h4 {
+            font-family: 'El Messiri', 'IBM Plex Sans Arabic', sans-serif;
+            line-height: 1.35;
+        }
+
+        [x-cloak] {
+            display: none !important;
+        }
+
+        /* ── SCROLLBAR ─────────────────────────────── */
+        ::-webkit-scrollbar {
+            width: 5px;
+            height: 5px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: #c8d2e0;
+            border-radius: 10px;
+        }
+
+        /* ── SIDEBAR ───────────────────────────────── */
+        .sidebar {
+            width: 256px;
+            min-width: 256px;
+            background: linear-gradient(175deg, #1a3d6e 0%, #0f2247 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;
+        }
+
+        .sb-logo-area {
+            padding: 28px 20px 20px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.07);
+        }
+
+        .sb-logo-mark {
+            width: 40px;
+            height: 40px;
+            background: var(--gold-bright);
+            border-radius: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 18px;
+            color: var(--navy);
+            flex-shrink: 0;
+            box-shadow: 0 4px 12px rgba(245, 166, 35, 0.4);
+        }
+
+        .sb-brand-name {
+            font-family: 'El Messiri', sans-serif;
+            font-size: 22px;
+            font-weight: 700;
+            color: white;
+        }
+
+        .sb-brand-sub {
+            font-size: 10px;
+            color: rgba(255, 255, 255, 0.35);
+            letter-spacing: 0.08em;
+            margin-top: 2px;
+        }
+
+        .sb-nav {
+            flex: 1;
+            padding: 16px 12px;
+            display: flex;
+            flex-direction: column;
+            gap: 3px;
+            overflow-y: auto;
+        }
+
+        .sb-section-label {
+            font-size: 10px;
+            font-weight: 700;
+            color: rgba(255, 255, 255, 0.25);
+            letter-spacing: 0.12em;
+            text-transform: uppercase;
+            padding: 12px 8px 6px;
+            margin-top: 6px;
+        }
+
+        .nav-btn {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding: 10px 12px;
+            border-radius: 11px;
+            cursor: pointer;
+            border: none;
+            background: transparent;
+            color: var(--sb-text);
+            font-family: 'IBM Plex Sans Arabic', sans-serif;
+            font-size: 14px;
+            font-weight: 500;
+            width: 100%;
+            text-align: right;
+            transition: all 0.18s ease;
+            position: relative;
+        }
+
+        .nav-btn:hover {
+            background: var(--sb-hover);
+            color: white;
+        }
+
+        .nav-btn.active {
+            background: var(--sb-active);
+            color: white;
+            font-weight: 600;
+        }
+
+        .nav-btn.active::before {
+            content: '';
+            position: absolute;
+            right: 0;
+            top: 20%;
+            bottom: 20%;
+            width: 3px;
+            background: var(--sb-accent);
+            border-radius: 3px 0 0 3px;
+        }
+
+        .nav-icon {
+            width: 34px;
+            height: 34px;
+            border-radius: 9px;
+            background: rgba(255, 255, 255, 0.08);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 15px;
+            flex-shrink: 0;
+            transition: all 0.18s;
+        }
+
+        .nav-btn.active .nav-icon {
+            background: var(--sb-accent);
+            box-shadow: 0 3px 10px rgba(245, 166, 35, 0.35);
+        }
+
+        .nav-btn:hover .nav-icon {
+            background: rgba(255, 255, 255, 0.14);
+        }
+
+        .sb-user-area {
+            padding: 16px;
+            border-top: 1px solid rgba(255, 255, 255, 0.07);
+        }
+
+        .sb-user-card {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            padding: 10px;
+            border-radius: 12px;
+            background: rgba(255, 255, 255, 0.05);
+            margin-bottom: 10px;
+        }
+
+        .user-avatar-sb {
+            width: 36px;
+            height: 36px;
+            border-radius: 9px;
+            background: var(--gold-bright);
+            color: var(--navy);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: 700;
+            font-size: 15px;
+            flex-shrink: 0;
+        }
+
+        .role-pill {
+            display: inline-block;
+            padding: 1px 8px;
+            border-radius: 20px;
+            font-size: 10px;
+            font-weight: 600;
+            background: rgba(255, 255, 255, 0.1);
+            color: rgba(255, 255, 255, 0.5);
+            text-transform: uppercase;
+            letter-spacing: 0.04em;
+        }
+
+        .logout-btn {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 8px 10px;
+            border-radius: 9px;
+            background: transparent;
+            border: none;
+            color: rgba(255, 255, 255, 0.4);
+            cursor: pointer;
+            font-family: 'IBM Plex Sans Arabic', sans-serif;
+            font-size: 13px;
+            font-weight: 500;
+            transition: all 0.18s;
+            text-align: right;
+        }
+
+        .logout-btn:hover {
+            background: rgba(220, 38, 38, 0.12);
+            color: #fca5a5;
+        }
+
+        /* ── MAIN LAYOUT ───────────────────────────── */
+        .main-area {
+            flex: 1;
+            overflow-y: auto;
+            display: flex;
+            flex-direction: column;
+            min-width: 0;
+        }
+
+        .page-header {
+            padding: 28px 36px 24px;
+            background: white;
+            border-bottom: 1px solid var(--border);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 16px;
+            position: sticky;
+            top: 0;
+            z-index: 40;
+            box-shadow: var(--shadow-sm);
+        }
+
+        .page-title {
+            font-size: 22px;
+            font-weight: 700;
+            color: var(--text-1);
+        }
+
+        .page-subtitle {
+            font-size: 13px;
+            color: var(--text-3);
+            margin-top: 2px;
+        }
+
+        .page-content {
+            padding: 28px 36px;
+            flex: 1;
+        }
+
+        /* ── STAT CARDS ────────────────────────────── */
+        .stat-card {
+            background: white;
+            border-radius: 16px;
+            padding: 24px;
+            border: 1px solid var(--border);
+            box-shadow: var(--shadow-sm);
+            position: relative;
+            overflow: hidden;
+            transition: transform 0.2s, box-shadow 0.2s;
+        }
+
+        .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;
+        }
+
+        .stat-card::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0;
+            bottom: 0;
+            width: 4px;
+            border-radius: 0 3px 3px 0;
+        }
+
+        .stat-navy::after {
+            background: var(--navy);
+        }
+
+        .stat-navy .stat-icon-box {
+            background: var(--navy-hover);
+        }
+
+        .stat-navy .stat-value {
+            color: var(--navy);
+        }
+
+        .stat-amber::after {
+            background: var(--gold-bright);
+        }
+
+        .stat-amber .stat-icon-box {
+            background: var(--amber-subtle);
+        }
+
+        .stat-amber .stat-value {
+            color: var(--amber);
+        }
+
+        .stat-teal::after {
+            background: var(--teal);
+        }
+
+        .stat-teal .stat-icon-box {
+            background: var(--teal-subtle);
+        }
+
+        .stat-teal .stat-value {
+            color: var(--teal);
+        }
+
+        /* ── QUICK ACTIONS ─────────────────────────── */
+        .quick-action-card {
+            background: white;
+            border: 1px solid var(--border);
+            border-radius: 14px;
+            padding: 18px 20px;
+            display: flex;
+            align-items: center;
+            gap: 14px;
+            cursor: pointer;
+            transition: all 0.2s;
+            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);
+        }
+
+        .qa-icon {
+            width: 44px;
+            height: 44px;
+            border-radius: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            flex-shrink: 0;
+        }
+
+        /* ── DATA TABLE ────────────────────────────── */
+        .table-container {
+            background: white;
+            border-radius: 16px;
+            border: 1px solid var(--border);
+            box-shadow: var(--shadow-sm);
+            overflow: hidden;
+        }
+
+        .table-top-bar {
+            padding: 18px 24px;
+            border-bottom: 1px solid var(--border);
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+
+        .table-top-bar h3 {
+            font-size: 16px;
+            font-weight: 700;
+            color: var(--text-1);
+        }
+
+        .table-count {
+            padding: 2px 10px;
+            background: var(--bg);
+            border: 1px solid var(--border);
+            border-radius: 20px;
+            font-size: 12px;
+            font-weight: 600;
+            color: var(--text-3);
+        }
+
+        .data-table {
+            width: 100%;
+            border-collapse: collapse;
+        }
+
+        .data-table th {
+            padding: 13px 20px;
+            text-align: right;
+            font-size: 11px;
+            font-weight: 700;
+            color: var(--text-3);
+            text-transform: uppercase;
+            letter-spacing: 0.07em;
+            border-bottom: 1px solid var(--border);
+            background: #f8fafc;
+            white-space: nowrap;
+        }
+
+        .data-table td {
+            padding: 15px 20px;
+            border-bottom: 1px solid #f0f4f8;
+            vertical-align: middle;
+        }
+
+        .data-table tbody tr:last-child td {
+            border-bottom: none;
+        }
+
+        .data-table tbody tr {
+            transition: background 0.14s;
+        }
+
+        .data-table tbody tr:hover {
+            background: #f8fafd;
+        }
+
+        .empty-row {
+            text-align: center;
+            padding: 56px 24px;
+        }
+
+        .empty-icon {
+            font-size: 42px;
+            opacity: 0.25;
+            display: block;
+            margin-bottom: 12px;
+        }
+
+        .empty-msg {
+            font-size: 15px;
+            color: var(--text-3);
+        }
+
+        /* ── BADGES ────────────────────────────────── */
+        .badge {
+            display: inline-flex;
+            align-items: center;
+            gap: 5px;
+            padding: 4px 11px;
+            border-radius: 20px;
+            font-size: 12px;
+            font-weight: 600;
+            white-space: nowrap;
+        }
+
+        .badge-teal {
+            background: var(--teal-subtle);
+            color: var(--teal);
+        }
+
+        .badge-amber {
+            background: var(--amber-subtle);
+            color: var(--amber);
+        }
+
+        .badge-blue {
+            background: var(--blue-subtle);
+            color: var(--blue);
+        }
+
+        .badge-gray {
+            background: #f1f5f9;
+            color: #64748b;
+        }
+
+        .badge-navy {
+            background: var(--navy-hover);
+            color: var(--navy);
+        }
+
+        .badge-red {
+            background: var(--red-subtle);
+            color: var(--red);
+        }
+
+        .badge-purple {
+            background: var(--purple-subtle);
+            color: var(--purple);
+        }
+
+        .badge-dot {
+            width: 7px;
+            height: 7px;
+            border-radius: 50%;
+            display: inline-block;
+            flex-shrink: 0;
+        }
+
+        /* ── BUTTONS ───────────────────────────────── */
+        .btn {
+            display: inline-flex;
+            align-items: center;
+            gap: 7px;
+            padding: 10px 20px;
+            border-radius: 10px;
+            font-family: 'IBM Plex Sans Arabic', sans-serif;
+            font-size: 14px;
+            font-weight: 600;
+            cursor: pointer;
+            border: none;
+            transition: all 0.18s;
+            white-space: nowrap;
+        }
+
+        .btn:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+        }
+
+        .btn-navy {
+            background: var(--navy);
+            color: white;
+            box-shadow: 0 2px 8px rgba(22, 50, 92, 0.22);
+        }
+
+        .btn-navy:hover:not(:disabled) {
+            background: var(--navy-mid);
+            transform: translateY(-1px);
+            box-shadow: 0 4px 14px rgba(22, 50, 92, 0.3);
+        }
+
+        .btn-teal {
+            background: var(--teal);
+            color: white;
+            box-shadow: 0 2px 8px rgba(4, 120, 87, 0.22);
+        }
+
+        .btn-teal:hover:not(:disabled) {
+            background: #065f46;
+            transform: translateY(-1px);
+        }
+
+        .btn-ghost {
+            background: white;
+            color: var(--text-2);
+            border: 1px solid var(--border);
+        }
+
+        .btn-ghost:hover {
+            background: var(--bg);
+            border-color: var(--border-mid);
+        }
+
+        .btn-danger-ghost {
+            background: transparent;
+            color: var(--red);
+            border: none;
+            padding: 7px 12px;
+            border-radius: 8px;
+        }
+
+        .btn-danger-ghost:hover {
+            background: var(--red-subtle);
+        }
+
+        .btn-sm {
+            padding: 7px 14px;
+            font-size: 13px;
+        }
+
+        .btn-icon {
+            padding: 8px 12px;
+        }
+
+        .btn-table-action {
+            display: inline-flex;
+            align-items: center;
+            gap: 5px;
+            padding: 6px 13px;
+            border-radius: 8px;
+            font-family: inherit;
+            font-size: 12px;
+            font-weight: 600;
+            cursor: pointer;
+            border: none;
+            transition: all 0.16s;
+        }
+
+        .btn-ta-navy {
+            background: var(--navy-hover);
+            color: var(--navy);
+        }
+
+        .btn-ta-navy:hover {
+            background: var(--navy);
+            color: white;
+        }
+
+        .btn-ta-teal {
+            background: var(--teal-subtle);
+            color: var(--teal);
+        }
+
+        .btn-ta-teal:hover {
+            background: var(--teal);
+            color: white;
+        }
+
+        .btn-ta-red {
+            background: transparent;
+            color: #94a3b8;
+            border-radius: 8px;
+            padding: 6px 10px;
+        }
+
+        .btn-ta-red:hover {
+            background: var(--red-subtle);
+            color: var(--red);
+        }
+
+        /* ── FORM ELEMENTS ─────────────────────────── */
+        .form-group {
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+        }
+
+        .form-label {
+            font-size: 13px;
+            font-weight: 600;
+            color: var(--text-2);
+            display: flex;
+            align-items: center;
+            gap: 5px;
+        }
+
+        .form-label-sub {
+            font-size: 11px;
+            color: var(--text-3);
+            font-weight: 400;
+        }
+
+        .form-input {
+            width: 100%;
+            padding: 11px 14px;
+            border: 1.5px solid var(--border);
+            border-radius: 10px;
+            font-family: 'IBM Plex Sans Arabic', sans-serif;
+            font-size: 14px;
+            color: var(--text-1);
+            background: white;
+            outline: none;
+            transition: border-color 0.18s, box-shadow 0.18s;
+            direction: rtl;
+        }
+
+        .form-input:focus {
+            border-color: var(--navy);
+            box-shadow: 0 0 0 3px rgba(22, 50, 92, 0.08);
+        }
+
+        .form-input::placeholder {
+            color: var(--text-3);
+        }
+
+        .form-input.mono {
+            font-family: 'IBM Plex Mono', monospace;
+        }
+
+        .form-section-title {
+            font-size: 11px;
+            font-weight: 700;
+            color: var(--text-3);
+            text-transform: uppercase;
+            letter-spacing: 0.08em;
+            padding-bottom: 12px;
+            border-bottom: 1px solid var(--border);
+            margin-bottom: 4px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        /* ── MODALS ────────────────────────────────── */
+        .modal-backdrop {
+            position: fixed;
+            inset: 0;
+            background: rgba(12, 26, 53, 0.55);
+            backdrop-filter: blur(5px);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 24px;
+            z-index: 120;
+        }
+
+        .modal-box {
+            background: white;
+            border-radius: 20px;
+            box-shadow: var(--shadow-lg);
+            width: 100%;
+            max-width: 520px;
+            max-height: 92vh;
+            overflow-y: auto;
+        }
+
+        .modal-box-lg {
+            max-width: 680px;
+        }
+
+        .modal-head {
+            padding: 24px 28px 0;
+            display: flex;
+            align-items: flex-start;
+            gap: 14px;
+        }
+
+        .modal-head-icon {
+            width: 46px;
+            height: 46px;
+            border-radius: 13px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            flex-shrink: 0;
+        }
+
+        .modal-head-icon.navy {
+            background: var(--navy-hover);
+        }
+
+        .modal-head-icon.gold {
+            background: var(--gold-subtle);
+        }
+
+        .modal-head-icon.teal {
+            background: var(--teal-subtle);
+        }
+
+        .modal-title {
+            font-size: 19px;
+            font-weight: 700;
+            color: var(--text-1);
+            margin-bottom: 3px;
+        }
+
+        .modal-subtitle {
+            font-size: 13px;
+            color: var(--text-3);
+        }
+
+        .modal-body {
+            padding: 22px 28px;
+        }
+
+        .modal-footer {
+            padding: 18px 28px 24px;
+            display: flex;
+            gap: 10px;
+        }
+
+        .modal-divider {
+            height: 1px;
+            background: var(--border);
+            margin: 0 28px;
+        }
+
+        .modal-close-btn {
+            margin-right: auto;
+            background: transparent;
+            border: none;
+            color: var(--text-3);
+            font-size: 20px;
+            cursor: pointer;
+            padding: 2px;
+            line-height: 1;
+            transition: color 0.15s;
+        }
+
+        .modal-close-btn:hover {
+            color: var(--text-1);
+        }
+
+        /* ── TOAST ─────────────────────────────────── */
+        .toast-error {
+            position: fixed;
+            top: 20px;
+            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;
+            font-size: 14px;
+            max-width: 480px;
+            width: 90%;
+            text-align: center;
+            cursor: pointer;
+        }
+
+        /* ── COMPANY / JOFOTARA STATUS ─────────────── */
+        .jofotara-connected {
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            cursor: pointer;
+            font-size: 13px;
+            font-weight: 600;
+            color: var(--teal);
+        }
+
+        .jofotara-connect {
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            cursor: pointer;
+            font-size: 13px;
+            font-weight: 600;
+            color: var(--text-3);
+            text-decoration: underline;
+        }
+
+        .jofotara-connect:hover {
+            color: var(--navy);
+        }
+
+        .conn-dot {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            flex-shrink: 0;
+        }
+
+        .conn-dot.on {
+            background: var(--teal);
+            box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.18);
+        }
+
+        .conn-dot.off {
+            background: #cbd5e1;
+        }
+
+        /* ── INVOICE VIEW PANEL ────────────────────── */
+        .invoice-field-card {
+            background: #f8fafc;
+            border: 1px solid var(--border);
+            border-radius: 12px;
+            padding: 14px 16px;
+        }
+
+        .invoice-field-label {
+            font-size: 11px;
+            font-weight: 700;
+            color: var(--text-3);
+            text-transform: uppercase;
+            letter-spacing: 0.06em;
+            margin-bottom: 5px;
+        }
+
+        .invoice-field-value {
+            font-size: 15px;
+            font-weight: 600;
+            color: var(--text-1);
+        }
+
+        /* ── STATS MODAL TABLE ─────────────────────── */
+        .stats-table {
+            width: 100%;
+            border-collapse: collapse;
+            font-size: 13px;
+        }
+
+        .stats-table th {
+            padding: 10px 16px;
+            text-align: right;
+            font-weight: 700;
+            color: var(--text-3);
+            font-size: 11px;
+            text-transform: uppercase;
+            background: #f8fafc;
+            border-bottom: 1px solid var(--border);
+        }
+
+        .stats-table td {
+            padding: 12px 16px;
+            border-bottom: 1px solid #f0f4f8;
+        }
+
+        .stats-table tbody tr:last-child td {
+            border-bottom: none;
+        }
+
+        .stats-table tbody tr:hover {
+            background: #f8fafc;
+        }
+
+        .mini-stat {
+            background: white;
+            border: 1px solid var(--border);
+            border-radius: 14px;
+            padding: 20px;
+        }
+
+        .mini-stat-label {
+            font-size: 11px;
+            font-weight: 700;
+            color: var(--text-3);
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            margin-bottom: 8px;
+        }
+
+        .mini-stat-val {
+            font-size: 26px;
+            font-weight: 700;
+            font-family: 'El Messiri', sans-serif;
         }
-        [x-cloak] { display: none !important; }
-        .glass { background: rgba(15, 23, 42, 0.7); backdrop-filter: blur(16px); border: 1px solid var(--border-default); }
-        .glass-elevated { background: rgba(30, 41, 59, 0.8); backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,0.1); }
-        .btn-glow:hover { box-shadow: 0 0 20px var(--emerald-glow); transform: translateY(-1px); }
-        .scrollbar-hide::-webkit-scrollbar { display: none; }
-        .nav-active { background: rgba(16,185,129,0.1); border-right: 4px solid var(--emerald); color: var(--emerald); }
     </style>
 </head>
+
 <body x-data="app" x-init="init()">
 
-    <!-- Global Error Toast -->
-    <div x-show="globalError" x-cloak
-         class="fixed top-6 left-1/2 -translate-x-1/2 z-[100] bg-red-900/90 border border-red-500 text-white px-8 py-4 rounded-2xl shadow-2xl max-w-lg text-center glass"
-         x-text="globalError"
-         x-transition
-         @click="globalError = ''">
+    <!-- ═══ TOAST ERROR ═══════════════════════════════════ -->
+    <div x-show="globalError" x-cloak class="toast-error" x-text="globalError" x-transition @click="globalError = ''">
     </div>
 
-    <div class="flex h-screen overflow-hidden">
-        <!-- Sidebar -->
-        <aside class="w-64 bg-surface border-l border-gray-800 flex flex-col glass">
-            <div class="p-8">
-                <div class="flex items-center gap-3">
-                    <div class="w-8 h-8 rounded-lg bg-emerald-500 flex items-center justify-center text-white font-bold">✓</div>
-                    <h1 class="text-2xl font-bold tracking-tight">مُصادَق</h1>
-                </div>
-                <p class="text-[10px] text-gray-500 mt-2 uppercase tracking-widest">Enterprise SaaS</p>
-            </div>
-            
-            <nav class="flex-1 px-4 space-y-2 mt-4">
-                <button @click="setPage('dashboard')" class="w-full flex items-center gap-3 p-3.5 rounded-xl transition-all" :class="page==='dashboard'?'nav-active':'text-gray-400 hover:bg-gray-800/50'">
-                    <span class="text-xl">📊</span><span class="font-medium">لوحة التحكم</span>
-                </button>
-                <button x-show="user?.role === 'super_admin'" @click="setPage('tenants')" class="w-full flex items-center gap-3 p-3.5 rounded-xl transition-all" :class="page==='tenants'?'nav-active':'text-gray-400 hover:bg-gray-800/50'">
-                    <span class="text-xl">🏢</span><span class="font-medium">المكاتب المحاسبية</span>
-                </button>
-                <button x-show="user?.role !== 'viewer'" @click="setPage('companies')" class="w-full flex items-center gap-3 p-3.5 rounded-xl transition-all" :class="page==='companies'?'nav-active':'text-gray-400 hover:bg-gray-800/50'">
-                    <span class="text-xl">🏭</span><span class="font-medium">الشركات</span>
-                </button>
-                <button x-show="user?.role !== 'viewer'" @click="setPage('invoices')" class="w-full flex items-center gap-3 p-3.5 rounded-xl transition-all" :class="page==='invoices'?'nav-active':'text-gray-400 hover:bg-gray-800/50'">
-                    <span class="text-xl">📄</span><span class="font-medium">الفواتير</span>
-                </button>
-                <button x-show="user?.role === 'super_admin' || user?.role === 'admin'" @click="setPage('users')" class="w-full flex items-center gap-3 p-3.5 rounded-xl transition-all" :class="page==='users'?'nav-active':'text-gray-400 hover:bg-gray-800/50'">
-                    <span class="text-xl">👥</span><span class="font-medium">المستخدمون</span>
-                </button>
-            </nav>
+    <!-- ═══ MAIN LAYOUT ══════════════════════════════════ -->
+    <div style="display:flex; height:100vh; overflow:hidden;">
 
-            <div class="p-6 border-t border-gray-800">
-                <div class="flex items-center gap-3 mb-4 p-3 rounded-xl bg-gray-950/50 border border-gray-800">
-                    <div class="w-10 h-10 rounded-full bg-emerald-500/20 flex items-center justify-center text-emerald-500 font-bold" x-text="user?.name?.[0]"></div>
-                    <div class="truncate">
-                        <p class="text-xs font-bold truncate" x-text="user?.name"></p>
-                        <p class="text-[10px] text-gray-500 uppercase" x-text="user?.role"></p>
+        <!-- ── SIDEBAR ──────────────────────────────────── -->
+        <aside class="sidebar">
+            <!-- Logo -->
+            <div class="sb-logo-area">
+                <div style="display:flex; align-items:center; gap:12px;">
+                    <div class="sb-logo-mark">✓</div>
+                    <div>
+                        <div class="sb-brand-name">مُصادَق</div>
+                        <div class="sb-brand-sub">نظام إدارة المحاسبة الضريبية</div>
                     </div>
                 </div>
-                <button @click="logout()" class="w-full text-right text-red-400 text-xs font-bold hover:text-red-300 transition-colors">🚪 تسجيل الخروج</button>
+            </div>
+
+            <!-- Navigation -->
+            <nav class="sb-nav">
+                <div class="sb-section-label">القائمة الرئيسية</div>
+
+                <button @click="setPage('dashboard')" class="nav-btn" :class="page==='dashboard' ? 'active' : ''">
+                    <span class="nav-icon">🏠</span>
+                    <span>الرئيسية</span>
+                </button>
+
+                <button x-show="user?.role !== 'viewer'" @click="setPage('companies')" class="nav-btn"
+                    :class="page==='companies' ? 'active' : ''">
+                    <span class="nav-icon">🏭</span>
+                    <span>الشركات</span>
+                </button>
+
+                <button x-show="user?.role !== 'viewer'" @click="setPage('invoices')" class="nav-btn"
+                    :class="page==='invoices' ? 'active' : ''">
+                    <span class="nav-icon">📄</span>
+                    <span>الفواتير</span>
+                </button>
+
+                <button x-show="user?.role === 'super_admin' || user?.role === 'admin'" @click="setPage('users')"
+                    class="nav-btn" :class="page==='users' ? 'active' : ''">
+                    <span class="nav-icon">👥</span>
+                    <span>فريق العمل</span>
+                </button>
+
+                <div x-show="user?.role === 'super_admin'">
+                    <div class="sb-section-label">الإدارة العليا</div>
+                    <button @click="setPage('tenants')" class="nav-btn" :class="page==='tenants' ? 'active' : ''">
+                        <span class="nav-icon">🏢</span>
+                        <span>المكاتب المحاسبية</span>
+                    </button>
+                </div>
+            </nav>
+
+            <!-- User -->
+            <div class="sb-user-area">
+                <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;"
+                            x-text="user?.name"></div>
+                        <span class="role-pill" x-text="user?.role"></span>
+                    </div>
+                </div>
+                <button @click="logout()" class="logout-btn">
+                    <span>🚪</span>
+                    <span>تسجيل الخروج</span>
+                </button>
             </div>
         </aside>
 
-        <!-- Main -->
-        <main class="flex-1 overflow-y-auto p-10 bg-[#060910]">
-            <header class="mb-12 flex justify-between items-end">
+        <!-- ── MAIN CONTENT ──────────────────────────── -->
+        <div class="main-area">
+
+            <!-- Page Header -->
+            <div class="page-header">
                 <div>
-                    <h2 class="text-4xl font-bold tracking-tight" x-text="title()"></h2>
-                    <p class="text-gray-500 mt-2 text-sm" x-text="subtitle()"></p>
+                    <h1 class="page-title" x-text="title()"></h1>
+                    <p class="page-subtitle" x-text="subtitle()"></p>
                 </div>
-                <div class="flex items-center gap-4">
-                    <button x-show="page==='tenants' && user?.role === 'super_admin'" @click="showAddTenantModal = true" class="bg-emerald-600 hover:bg-emerald-500 px-6 py-3 rounded-xl text-sm font-bold shadow-lg transition-all active:scale-95 btn-glow">➕ إضافة مكتب محاسبي</button>
-                    <button x-show="page==='users'" @click="showAddUserModal = true" class="bg-emerald-600 hover:bg-emerald-500 px-6 py-3 rounded-xl text-sm font-bold shadow-lg transition-all active:scale-95 btn-glow">➕ إضافة مستخدم</button>
-                    <button x-show="page==='companies'" @click="showAddCompanyModal = true" class="bg-emerald-600 hover:bg-emerald-500 px-6 py-3 rounded-xl text-sm font-bold shadow-lg transition-all active:scale-95 btn-glow">➕ إضافة شركة</button>
-                    <button x-show="page==='invoices'" @click="showUploadModal = true" class="bg-emerald-600 hover:bg-emerald-500 px-6 py-3 rounded-xl text-sm font-bold shadow-lg transition-all active:scale-95 btn-glow">📤 رفع فواتير</button>
-                </div>
-            </header>
-
-            <div id="content" x-transition>
-                <!-- Dashboard -->
-                <div x-show="page === 'dashboard'" class="space-y-8">
-                    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-                        <div class="p-8 bg-surface border border-gray-800 rounded-3xl shadow-xl relative overflow-hidden group glass">
-                            <p class="text-gray-500 text-xs uppercase font-bold tracking-widest">إجمالي الفواتير</p>
-                            <p class="text-5xl font-bold mt-4" x-text="stats.total || 0"></p>
-                            <div class="absolute top-0 right-0 p-6 opacity-5 group-hover:opacity-10 transition-opacity"><span class="text-6xl">📄</span></div>
-                        </div>
-                        <div class="p-8 bg-surface border border-gray-800 rounded-3xl shadow-xl relative overflow-hidden group glass">
-                            <p class="text-gray-500 text-xs uppercase font-bold tracking-widest text-yellow-500">بانتظار الاعتماد</p>
-                            <p class="text-5xl font-bold mt-4 text-yellow-500" x-text="stats.pending || 0"></p>
-                            <div class="absolute top-0 right-0 p-6 opacity-5 group-hover:opacity-10 transition-opacity"><span class="text-6xl">⏳</span></div>
-                        </div>
-                        <div class="p-8 bg-surface border border-gray-800 rounded-3xl shadow-xl relative overflow-hidden group glass">
-                            <p class="text-gray-500 text-xs uppercase font-bold tracking-widest text-emerald-500">تم الاعتماد</p>
-                            <p class="text-5xl font-bold mt-4 text-emerald-500" x-text="stats.approved || 0"></p>
-                            <div class="absolute top-0 right-0 p-6 opacity-5 group-hover:opacity-10 transition-opacity"><span class="text-6xl">✅</span></div>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Companies Table -->
-                <div x-show="page === 'companies'">
-                    <div class="bg-surface border border-gray-800 rounded-3xl overflow-hidden shadow-2xl glass">
-                        <table class="w-full text-right divide-y divide-gray-800">
-                            <thead class="bg-gray-950/50">
-                                <tr>
-                                    <th class="p-6 text-xs font-bold text-gray-500 uppercase">الشركة</th>
-                                    <th class="p-6 text-xs font-bold text-gray-500 uppercase">الأرقام الرسمية</th>
-                                    <th class="p-6 text-xs font-bold text-gray-500 uppercase text-center">الفواتير</th>
-                                    <th class="p-6 text-xs font-bold text-gray-500 uppercase text-center">الإجمالي</th>
-                                    <th class="p-6 text-xs font-bold text-gray-500 uppercase">الفوترة الحكومية</th>
-                                    <th class="p-6 text-xs font-bold text-gray-500 uppercase">التقارير</th>
-                                    <th class="p-6 text-xs font-bold text-gray-500 uppercase text-left">إجراءات</th>
-                                </tr>
-                            </thead>
-                            <tbody class="divide-y divide-gray-800/50">
-                                <tr x-show="companies.length === 0"><td colspan="5" class="p-20 text-center text-gray-600 text-lg">لا توجد شركات مسجلة</td></tr>
-                                <template x-for="c in companies" :key="c.id">
-                                    <tr class="hover:bg-white/[0.02] transition-colors group">
-                                        <td class="p-6">
-                                            <p class="font-bold text-emerald-500 text-lg" x-text="c.name"></p>
-                                            <p class="text-xs text-gray-500" x-text="c.address"></p>
-                                        </td>
-                                        <td class="p-6 text-xs font-mono">
-                                            <p>TIN: <span x-text="c.tax_identification_number"></span></p>
-                                            <p>CRN: <span x-text="c.commercial_registration_number || '-'"></span></p>
-                                        </td>
-                                        <td class="p-6 text-center font-mono text-gray-300" x-text="c.invoices_count || 0"></td>
-                                        <td class="p-6 text-center font-mono text-emerald-400 font-bold" x-text="parseFloat(c.total_amount || 0).toLocaleString() + ' JOD'"></td>
-                                        <td class="p-6">
-                                            <div class="flex items-center gap-2">
-                                                <span class="w-2 h-2 rounded-full" :class="c.jofotara_client_id_encrypted ? 'bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.5)]' : 'bg-gray-700'"></span>
-                                                <button @click="openConnectModal(c)" class="text-xs font-bold hover:underline" :class="c.jofotara_client_id_encrypted ? 'text-emerald-400' : 'text-gray-400'">
-                                                    <span x-text="c.jofotara_client_id_encrypted ? '✅ متصل' : '🔗 ربط الآن'"></span>
-                                                </button>
-                                            </div>
-                                        </td>
-                                        <td class="p-6">
-                                            <button @click="showCompanyStats(c.id)" class="text-xs bg-emerald-500/10 hover:bg-emerald-500/20 text-emerald-400 px-4 py-2 rounded-xl border border-emerald-500/20 transition-all font-bold">📊 تقرير</button>
-                                        </td>
-                                        <td class="p-6 text-left">
-                                            <button @click="confirmDeleteCompany(c)" class="text-gray-500 hover:text-red-500 p-2.5 rounded-xl hover:bg-red-500/10 transition">🗑️</button>
-                                        </td>
-                                    </tr>
-                                </template>
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-
-                <!-- Users Table -->
-                <div x-show="page === 'users'">
-                    <div class="bg-surface border border-gray-800 rounded-3xl overflow-hidden shadow-2xl glass">
-                        <table class="w-full text-right divide-y divide-gray-800">
-                            <thead class="bg-gray-950/50">
-                                <tr>
-                                    <th class="p-6 text-xs font-bold text-gray-500 uppercase">المستخدم</th>
-                                    <th class="p-6 text-xs font-bold text-gray-500 uppercase">المكتب</th>
-                                    <th class="p-6 text-xs font-bold text-gray-500 uppercase">الدور</th>
-                                    <th class="p-6 text-xs font-bold text-gray-500 uppercase">الحالة</th>
-                                    <th class="p-6 text-xs font-bold text-gray-500 uppercase">إجراءات</th>
-                                </tr>
-                            </thead>
-                            <tbody class="divide-y divide-gray-800/50">
-                                <tr x-show="users.length === 0"><td colspan="5" class="p-20 text-center text-gray-600 text-lg">لا يوجد مستخدمون مسجلون</td></tr>
-                                <template x-for="u in users" :key="u.id">
-                                    <tr class="hover:bg-white/[0.02] transition-colors">
-                                        <td class="p-6">
-                                            <p class="font-bold text-emerald-500" x-text="u.name"></p>
-                                            <p class="text-xs text-gray-500 font-mono" x-text="u.email"></p>
-                                        </td>
-                                        <td class="p-6 text-sm text-gray-400" x-text="u.tenant_name || '-'"></td>
-                                        <td class="p-6">
-                                            <span class="px-3 py-1 bg-gray-800/50 border border-gray-700 rounded-full text-[10px] font-bold uppercase tracking-wide" x-text="u.role"></span>
-                                        </td>
-                                        <td class="p-6">
-                                            <span class="w-2.5 h-2.5 rounded-full inline-block" :class="u.is_active?'bg-emerald-400':'bg-red-400'"></span>
-                                        </td>
-                                        <td class="p-6">
-                                            <button x-show="u.id !== user.id" @click="confirmDeleteUser(u)" class="text-gray-500 hover:text-red-500 p-2.5 transition">🗑️</button>
-                                        </td>
-                                    </tr>
-                                </template>
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-
-                <!-- Invoices Table -->
-                <div x-show="page === 'invoices'">
-                    <div class="bg-surface border border-gray-800 rounded-3xl overflow-hidden shadow-2xl glass">
-                        <table class="w-full text-right border-collapse">
-                            <thead class="bg-gray-950/50 border-b border-gray-800">
-                                <tr>
-                                    <th class="p-6 text-xs font-bold text-gray-500 uppercase">الشركة / المورد</th>
-                                    <th class="p-6 text-xs font-bold text-gray-500 uppercase">التاريخ</th>
-                                    <th class="p-6 text-xs font-bold text-gray-500 uppercase">المجموع</th>
-                                    <th class="p-6 text-xs font-bold text-gray-500 uppercase">الحالة</th>
-                                    <th class="p-6 text-xs font-bold text-gray-500 uppercase">إجراءات</th>
-                                </tr>
-                            </thead>
-                            <tbody class="divide-y divide-gray-800/50">
-                                <tr x-show="invoices.length === 0"><td colspan="5" class="p-20 text-center text-gray-600 text-lg">لا توجد فواتير مرفوعة</td></tr>
-                                <template x-for="inv in invoices" :key="inv.id">
-                                    <tr class="hover:bg-white/[0.02] transition-all">
-                                        <td class="p-6">
-                                            <p class="font-bold text-emerald-500" x-text="inv.company_name"></p>
-                                            <p class="text-sm font-medium text-gray-200 mt-1" x-text="inv.supplier_name"></p>
-                                            <p class="text-[10px] text-gray-500 mt-0.5" x-text="inv.supplier_tin"></p>
-                                        </td>
-                                        <td class="p-6 text-sm text-gray-400 font-mono" x-text="inv.invoice_date || '-'"></td>
-                                        <td class="p-6 font-mono font-bold" x-text="parseFloat(inv.grand_total).toLocaleString() + ' JOD'"></td>
-                                        <td class="p-6">
-                                            <span class="px-3 py-1.5 rounded-full text-[10px] font-bold uppercase tracking-wider" 
-                                                  :class="inv.status==='extracted'?'bg-blue-900/40 text-blue-400':(inv.status==='approved'?'bg-emerald-900/40 text-emerald-400':'bg-gray-800 text-gray-400')" 
-                                                  x-text="inv.status === 'approved' ? 'مدققة' : inv.status"></span>
-                                        </td>
-                                        <td class="p-6">
-                                            <button @click="viewInvoice(inv.id)" class="text-gray-500 hover:text-emerald-400 p-3 rounded-2xl hover:bg-emerald-400/10 transition-all">👁️ عرض</button>
-                                        </td>
-                                    </tr>
-                                </template>
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-
-                <!-- Tenants Table (Super Admin Only) -->
-                <div x-show="page === 'tenants' && user?.role === 'super_admin'">
-                    <div class="bg-surface border border-gray-800 rounded-3xl overflow-hidden shadow-2xl glass">
-                        <table class="w-full text-right divide-y divide-gray-800">
-                            <thead class="bg-gray-950/50">
-                                <tr>
-                                    <th class="p-6 text-xs font-bold text-gray-500 uppercase">المكتب المحاسبي</th>
-                                    <th class="p-6 text-xs font-bold text-gray-500 uppercase text-center">الشركات</th>
-                                    <th class="p-6 text-xs font-bold text-gray-500 uppercase text-center">الفواتير</th>
-                                    <th class="p-6 text-xs font-bold text-gray-500 uppercase">التواصل</th>
-                                    <th class="p-6 text-xs font-bold text-gray-500 uppercase">الحالة</th>
-                                    <th class="p-6 text-xs font-bold text-gray-500 uppercase">إجراءات</th>
-                                </tr>
-                            </thead>
-                            <tbody class="divide-y divide-gray-800/50">
-                                <tr x-show="tenants.length === 0"><td colspan="5" class="p-20 text-center text-gray-600 text-lg">لا توجد مكاتب مسجلة</td></tr>
-                                <template x-for="t in tenants" :key="t.id">
-                                    <tr class="hover:bg-white/[0.02] transition-colors">
-                                        <td class="p-6">
-                                            <p class="font-bold text-emerald-500" x-text="t.name"></p>
-                                            <p class="text-[10px] text-gray-500 mt-1" x-text="'انضم: ' + t.created_at.split(' ')[0]"></p>
-                                        </td>
-                                        <td class="p-6 text-center">
-                                            <p class="font-mono text-gray-300" x-text="t.companies_count || 0"></p>
-                                        </td>
-                                        <td class="p-6 text-center">
-                                            <p class="font-mono text-gray-300" x-text="t.invoices_count || 0"></p>
-                                        </td>
-                                        <td class="p-6 text-sm">
-                                            <p class="text-gray-200" x-text="t.email"></p>
-                                            <p class="text-gray-500 font-mono" x-text="t.phone || '-'"></p>
-                                        </td>
-                                        <td class="p-6">
-                                            <span class="px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wide" 
-                                                  :class="t.status==='active'?'bg-emerald-900/40 text-emerald-400':'bg-yellow-900/40 text-yellow-400'"
-                                                  x-text="t.status"></span>
-                                        </td>
-                                        <td class="p-6">
-                                            <button @click="openEditTenantModal(t)" class="text-gray-500 hover:text-emerald-400 p-2 rounded-lg hover:bg-emerald-400/10 transition-all" title="تعديل">⚙️</button>
-                    <button class="text-gray-500 hover:text-blue-400 p-2 rounded-lg hover:bg-blue-400/10 transition-all ml-2" title="تقرير شامل" @click="showTenantStats(t)">📊</button>
-                                        </td>
-                                    </tr>
-                                </template>
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-
-                <!-- Tenant Stats Modal -->
-                <div x-show="showTenantStatsModal" x-cloak class="fixed inset-0 bg-black/90 backdrop-blur-md flex items-center justify-center p-6 z-[110]">
-                    <div class="bg-surface border border-gray-800 w-full max-w-4xl p-10 rounded-[40px] shadow-2xl glass-elevated" @click.away="showTenantStatsModal = false">
-                        <div class="flex justify-between items-start mb-12">
-                            <div>
-                                <h3 class="text-3xl font-bold text-emerald-400" x-text="tenantStats?.tenant?.name"></h3>
-                                <p class="text-xs text-gray-500 mt-2 uppercase tracking-widest font-mono">تقرير أداء المكتب المحاسبي</p>
-                            </div>
-                            <button @click="showTenantStatsModal = false" class="text-gray-500 hover:text-white text-3xl transition">✕</button>
-                        </div>
-
-                        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-12">
-                            <div class="p-8 bg-gray-950/50 border border-gray-800 rounded-3xl">
-                                <p class="text-[10px] text-gray-500 font-bold uppercase mb-3">الشركات المدارة</p>
-                                <p class="text-3xl font-bold" x-text="tenantStats?.summary?.total_companies || 0"></p>
-                            </div>
-                            <div class="p-8 bg-gray-950/50 border border-gray-800 rounded-3xl">
-                                <p class="text-[10px] text-gray-500 font-bold uppercase mb-3">إجمالي الفواتير</p>
-                                <p class="text-3xl font-bold" x-text="tenantStats?.summary?.total_invoices || 0"></p>
-                            </div>
-                            <div class="p-8 bg-gray-950/50 border border-gray-800 rounded-3xl">
-                                <p class="text-[10px] text-gray-500 font-bold uppercase mb-3">المجموع (JOD)</p>
-                                <p class="text-3xl font-bold text-emerald-400 font-mono" x-text="parseFloat(tenantStats?.summary?.total_amount || 0).toLocaleString()"></p>
-                            </div>
-                            <div class="p-8 bg-gray-950/50 border border-gray-800 rounded-3xl">
-                                <p class="text-[10px] text-gray-500 font-bold uppercase mb-3">إجمالي الضرائب</p>
-                                <p class="text-3xl font-bold text-yellow-500 font-mono" x-text="parseFloat(tenantStats?.summary?.total_tax || 0).toLocaleString()"></p>
-                            </div>
-                        </div>
-
-                        <h4 class="text-sm font-bold text-gray-500 uppercase mb-6 tracking-widest">تحليل النشاط الشهري للمكتب</h4>
-                        <div class="bg-gray-950/30 border border-gray-800 rounded-3xl overflow-hidden max-h-64 overflow-y-auto">
-                            <table class="w-full text-right text-xs">
-                                <thead class="bg-gray-900/50 sticky top-0">
-                                    <tr>
-                                        <th class="p-5 text-gray-500 font-bold">الشهر</th>
-                                        <th class="p-5 text-gray-500 font-bold">عدد الفواتير</th>
-                                        <th class="p-5 text-gray-500 font-bold">الضريبة المستحقة</th>
-                                        <th class="p-5 text-gray-500 font-bold text-emerald-500">الإجمالي النهائي</th>
-                                    </tr>
-                                </thead>
-                                <tbody class="divide-y divide-gray-800">
-                                    <template x-for="m in tenantStats?.monthly" :key="m.month">
-                                        <tr>
-                                            <td class="p-5 font-mono text-gray-200" x-text="m.month"></td>
-                                            <td class="p-5" x-text="m.total_invoices"></td>
-                                            <td class="p-5 text-yellow-500 font-mono" x-text="parseFloat(m.total_tax || 0).toLocaleString() + ' JOD'"></td>
-                                            <td class="p-5 font-bold text-emerald-500 font-mono" x-text="parseFloat(m.total_amount || 0).toLocaleString() + ' JOD'"></td>
-                                        </tr>
-                                    </template>
-                                </tbody>
-                            </table>
-                        </div>
-                    </div>
+                <div style="display:flex; align-items:center; gap:10px;">
+                    <button x-show="page==='tenants' && user?.role === 'super_admin'" @click="showAddTenantModal = true"
+                        class="btn btn-navy">
+                        <span>➕</span> إضافة مكتب
+                    </button>
+                    <button x-show="page==='users'" @click="showAddUserModal = true" class="btn btn-navy">
+                        <span>➕</span> إضافة مستخدم
+                    </button>
+                    <button x-show="page==='companies'" @click="showAddCompanyModal = true" class="btn btn-navy">
+                        <span>➕</span> إضافة شركة
+                    </button>
+                    <button x-show="page==='invoices'" @click="showUploadModal = true" class="btn btn-teal">
+                        <span>📤</span> رفع فاتورة
+                    </button>
                 </div>
             </div>
-        </main>
 
-        <!-- Company Stats Modal -->
-        <div x-show="showCompanyStatsModal" x-cloak class="fixed inset-0 bg-black/90 backdrop-blur-md flex items-center justify-center p-6 z-[110]">
-            <div class="bg-surface border border-gray-800 w-full max-w-4xl p-10 rounded-[40px] shadow-2xl glass-elevated" @click.away="showCompanyStatsModal = false">
-                <div class="flex justify-between items-start mb-12">
+            <!-- Page Body -->
+            <div class="page-content" x-transition>
+
+                <!-- ════ DASHBOARD ═══════════════════════════ -->
+                <div x-show="page === 'dashboard'" style="display:flex; flex-direction:column; gap:24px;">
+
+                    <!-- Stat Cards -->
+                    <div style="display:grid; grid-template-columns:repeat(3,1fr); gap:18px;">
+                        <div class="stat-card stat-navy">
+                            <div class="stat-icon-box">📄</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-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-label">مدققة ومعتمدة</div>
+                            <div class="stat-value" x-text="stats.approved || 0"></div>
+                        </div>
+                    </div>
+
+                    <!-- Quick Actions -->
                     <div>
-                        <h3 class="text-3xl font-bold text-emerald-400" x-text="companyStats?.company?.name"></h3>
-                        <p class="text-xs text-gray-500 mt-2 uppercase tracking-widest font-mono" x-text="'TIN: ' + companyStats?.company?.tax_identification_number"></p>
-                    </div>
-                    <button @click="showCompanyStatsModal = false" class="text-gray-500 hover:text-white text-3xl transition">✕</button>
-                </div>
-
-                <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-12">
-                    <div class="p-8 bg-gray-950/50 border border-gray-800 rounded-3xl">
-                        <p class="text-[10px] text-gray-500 font-bold uppercase mb-3">إجمالي الفواتير</p>
-                        <p class="text-3xl font-bold" x-text="companyStats?.totals?.total_invoices || 0"></p>
-                    </div>
-                    <div class="p-8 bg-gray-950/50 border border-gray-800 rounded-3xl">
-                        <p class="text-[10px] text-gray-500 font-bold uppercase mb-3">المجموع (JOD)</p>
-                        <p class="text-3xl font-bold text-emerald-400 font-mono" x-text="parseFloat(companyStats?.totals?.total_amount || 0).toLocaleString()"></p>
-                    </div>
-                    <div class="p-8 bg-gray-950/50 border border-gray-800 rounded-3xl">
-                        <p class="text-[10px] text-gray-500 font-bold uppercase mb-3">إجمالي الضريبة</p>
-                        <p class="text-3xl font-bold text-yellow-500 font-mono" x-text="parseFloat(companyStats?.totals?.total_tax || 0).toLocaleString()"></p>
-                    </div>
-                    <div class="p-8 bg-gray-950/50 border border-gray-800 rounded-3xl">
-                        <p class="text-[10px] text-gray-500 font-bold uppercase mb-3">المعتمدة</p>
-                        <p class="text-3xl font-bold text-blue-400" x-text="companyStats?.totals?.approved_count || 0"></p>
+                        <h3 style="font-size:15px; font-weight:700; color:var(--text-2); margin-bottom:14px;">إجراءات
+                            سريعة</h3>
+                        <div
+                            style="display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:14px;">
+                            <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>
+                                    <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>
+                                </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>
+                                    <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>
+                                </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>
+                                    <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>
+                                </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>
+                                    <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>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
 
-                <h4 class="text-sm font-bold text-gray-500 uppercase mb-6 tracking-widest">التحليل الشهري للفواتير والضرائب</h4>
-                <div class="bg-gray-950/30 border border-gray-800 rounded-3xl overflow-hidden max-h-64 overflow-y-auto">
-                    <table class="w-full text-right text-xs">
-                        <thead class="bg-gray-900/50 sticky top-0">
+                <!-- ════ COMPANIES ═══════════════════════════ -->
+                <div x-show="page === 'companies'">
+                    <div class="table-container">
+                        <div class="table-top-bar">
+                            <span style="font-size:18px;">🏭</span>
+                            <h3>الشركات المسجلة</h3>
+                            <span class="table-count" x-text="companies.length + ' شركة'"></span>
+                        </div>
+                        <table class="data-table">
+                            <thead>
+                                <tr>
+                                    <th>الشركة</th>
+                                    <th>الأرقام الرسمية</th>
+                                    <th style="text-align:center;">الفواتير</th>
+                                    <th style="text-align:center;">الإجمالي</th>
+                                    <th>الفوترة الحكومية</th>
+                                    <th>التقارير</th>
+                                    <th style="text-align:center;">إجراءات</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr x-show="companies.length === 0">
+                                    <td colspan="7">
+                                        <div class="empty-row">
+                                            <span class="empty-icon">🏭</span>
+                                            <p class="empty-msg">لا توجد شركات مسجلة بعد</p>
+                                        </div>
+                                    </td>
+                                </tr>
+                                <template x-for="c in companies" :key="c.id">
+                                    <tr>
+                                        <td>
+                                            <div style="font-weight:700; color:var(--navy); font-size:15px;"
+                                                x-text="c.name"></div>
+                                            <div style="font-size:12px; color:var(--text-3); margin-top:2px;"
+                                                x-text="c.address"></div>
+                                        </td>
+                                        <td style="font-family:'IBM Plex Mono',monospace; font-size:12px;">
+                                            <div style="color:var(--text-2);">TIN: <span
+                                                    x-text="c.tax_identification_number"></span></div>
+                                            <div style="color:var(--text-3); margin-top:2px;">CRN: <span
+                                                    x-text="c.commercial_registration_number || '—'"></span></div>
+                                        </td>
+                                        <td style="text-align:center; font-weight:700; color:var(--text-2);"
+                                            x-text="c.invoices_count || 0"></td>
+                                        <td style="text-align:center; font-weight:700; color:var(--teal); font-family:'IBM Plex Mono',monospace; font-size:13px;"
+                                            x-text="parseFloat(c.total_amount || 0).toLocaleString() + ' JOD'"></td>
+                                        <td>
+                                            <template x-if="c.jofotara_client_id_encrypted">
+                                                <button @click="openConnectModal(c)" class="jofotara-connected">
+                                                    <span class="conn-dot on"></span>
+                                                    متصل بالفوترة
+                                                </button>
+                                            </template>
+                                            <template x-if="!c.jofotara_client_id_encrypted">
+                                                <button @click="openConnectModal(c)" class="jofotara-connect">
+                                                    <span class="conn-dot off"></span>
+                                                    ربط الآن
+                                                </button>
+                                            </template>
+                                        </td>
+                                        <td>
+                                            <button @click="showCompanyStats(c.id)"
+                                                class="btn-table-action btn-ta-navy">
+                                                📊 تقرير
+                                            </button>
+                                        </td>
+                                        <td style="text-align:center;">
+                                            <button @click="confirmDeleteCompany(c)"
+                                                class="btn-table-action btn-ta-red">🗑️</button>
+                                        </td>
+                                    </tr>
+                                </template>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+
+                <!-- ════ USERS ════════════════════════════════ -->
+                <div x-show="page === 'users'">
+                    <div class="table-container">
+                        <div class="table-top-bar">
+                            <span style="font-size:18px;">👥</span>
+                            <h3>فريق العمل</h3>
+                            <span class="table-count" x-text="users.length + ' مستخدم'"></span>
+                        </div>
+                        <table class="data-table">
+                            <thead>
+                                <tr>
+                                    <th>المستخدم</th>
+                                    <th>المكتب</th>
+                                    <th>الصلاحية</th>
+                                    <th style="text-align:center;">الحالة</th>
+                                    <th style="text-align:center;">إجراءات</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr x-show="users.length === 0">
+                                    <td colspan="5">
+                                        <div class="empty-row">
+                                            <span class="empty-icon">👥</span>
+                                            <p class="empty-msg">لا يوجد مستخدمون مسجلون بعد</p>
+                                        </div>
+                                    </td>
+                                </tr>
+                                <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;"
+                                                    x-text="u.name?.[0]"></div>
+                                                <div>
+                                                    <div style="font-weight:700; color:var(--text-1);" x-text="u.name">
+                                                    </div>
+                                                    <div style="font-size:12px; color:var(--text-3); font-family:'IBM Plex Mono',monospace;"
+                                                        x-text="u.email"></div>
+                                                </div>
+                                            </div>
+                                        </td>
+                                        <td style="color:var(--text-2); font-size:13px;" 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'))"
+                                                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'"
+                                                    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>
+                                        </td>
+                                    </tr>
+                                </template>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+
+                <!-- ════ INVOICES ═════════════════════════════ -->
+                <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>
+                        <table class="data-table">
+                            <thead>
+                                <tr>
+                                    <th>الشركة / المورد</th>
+                                    <th>التاريخ</th>
+                                    <th>المجموع الكلي</th>
+                                    <th style="text-align:center;">الحالة</th>
+                                    <th style="text-align:center;">إجراءات</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr x-show="invoices.length === 0">
+                                    <td colspan="5">
+                                        <div class="empty-row">
+                                            <span class="empty-icon">📄</span>
+                                            <p class="empty-msg">لا توجد فواتير مرفوعة بعد</p>
+                                        </div>
+                                    </td>
+                                </tr>
+                                <template x-for="inv in invoices" :key="inv.id">
+                                    <tr>
+                                        <td>
+                                            <div style="font-weight:700; color:var(--navy); font-size:14px;"
+                                                x-text="inv.company_name"></div>
+                                            <div style="font-size:13px; color:var(--text-2); margin-top:2px;"
+                                                x-text="inv.supplier_name"></div>
+                                            <div style="font-size:11px; color:var(--text-3); font-family:'IBM Plex Mono',monospace;"
+                                                x-text="inv.supplier_tin"></div>
+                                        </td>
+                                        <td style="color:var(--text-2); font-size:13px; font-family:'IBM Plex Mono',monospace;"
+                                            x-text="inv.invoice_date || '—'"></td>
+                                        <td style="font-weight:700; color:var(--teal); font-family:'IBM Plex Mono',monospace;"
+                                            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')"
+                                                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>
+                                        </td>
+                                    </tr>
+                                </template>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+
+                <!-- ════ TENANTS (SUPER ADMIN) ════════════════ -->
+                <div x-show="page === 'tenants' && user?.role === 'super_admin'">
+                    <div class="table-container">
+                        <div class="table-top-bar">
+                            <span style="font-size:18px;">🏢</span>
+                            <h3>المكاتب المحاسبية</h3>
+                            <span class="table-count" x-text="tenants.length + ' مكتب'"></span>
+                        </div>
+                        <table class="data-table">
+                            <thead>
+                                <tr>
+                                    <th>المكتب المحاسبي</th>
+                                    <th style="text-align:center;">الشركات</th>
+                                    <th style="text-align:center;">الفواتير</th>
+                                    <th>التواصل</th>
+                                    <th style="text-align:center;">الحالة</th>
+                                    <th style="text-align:center;">إجراءات</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr x-show="tenants.length === 0">
+                                    <td colspan="6">
+                                        <div class="empty-row">
+                                            <span class="empty-icon">🏢</span>
+                                            <p class="empty-msg">لا توجد مكاتب مسجلة بعد</p>
+                                        </div>
+                                    </td>
+                                </tr>
+                                <template x-for="t in tenants" :key="t.id">
+                                    <tr>
+                                        <td>
+                                            <div style="font-weight:700; color:var(--navy); font-size:15px;"
+                                                x-text="t.name"></div>
+                                            <div style="font-size:11px; color:var(--text-3); margin-top:3px; font-family:'IBM Plex Mono',monospace;"
+                                                x-text="'انضم: ' + t.created_at.split(' ')[0]"></div>
+                                        </td>
+                                        <td style="text-align:center; font-weight:700; color:var(--text-2);"
+                                            x-text="t.companies_count || 0"></td>
+                                        <td style="text-align:center; font-weight:700; color:var(--text-2);"
+                                            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:'IBM Plex Mono',monospace;"
+                                                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')"
+                                                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="تقرير"
+                                                    @click="showTenantStats(t)">📊</button>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                </template>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+
+            </div><!-- /page-content -->
+        </div><!-- /main-area -->
+    </div><!-- /flex layout -->
+
+
+    <!-- ════════════════════════════════════════════════════════
+         MODALS
+    ════════════════════════════════════════════════════════ -->
+
+    <!-- ── COMPANY STATS MODAL ──────────────────────────── -->
+    <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 style="flex:1;">
+                    <div class="modal-title" x-text="companyStats?.company?.name"></div>
+                    <div class="modal-subtitle" style="font-family:'IBM Plex Mono',monospace;"
+                        x-text="'TIN: ' + companyStats?.company?.tax_identification_number"></div>
+                </div>
+                <button @click="showCompanyStatsModal = false" class="modal-close-btn">✕</button>
+            </div>
+            <div class="modal-body">
+                <div style="display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:24px;">
+                    <div class="mini-stat">
+                        <div class="mini-stat-label">إجمالي الفواتير</div>
+                        <div class="mini-stat-val" x-text="companyStats?.totals?.total_invoices || 0"></div>
+                    </div>
+                    <div class="mini-stat">
+                        <div class="mini-stat-label">المجموع (JOD)</div>
+                        <div class="mini-stat-val" style="color:var(--teal);"
+                            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);"
+                            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);"
+                            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>
+                <div
+                    style="border:1px solid var(--border); border-radius:12px; overflow:hidden; max-height:240px; overflow-y:auto;">
+                    <table class="stats-table">
+                        <thead>
                             <tr>
-                                <th class="p-5 text-gray-500 font-bold">الشهر</th>
-                                <th class="p-5 text-gray-500 font-bold">عدد الفواتير</th>
-                                <th class="p-5 text-gray-500 font-bold">الضريبة المستحقة</th>
-                                <th class="p-5 text-gray-500 font-bold text-emerald-500">الإجمالي النهائي</th>
+                                <th>الشهر</th>
+                                <th>عدد الفواتير</th>
+                                <th>الضريبة المستحقة</th>
+                                <th style="color:var(--teal);">الإجمالي النهائي</th>
                             </tr>
                         </thead>
-                        <tbody class="divide-y divide-gray-800">
+                        <tbody>
                             <template x-for="m in companyStats?.monthly" :key="m.month">
                                 <tr>
-                                    <td class="p-5 font-mono text-gray-200" x-text="m.month"></td>
-                                    <td class="p-5" x-text="m.total_invoices"></td>
-                                    <td class="p-5 text-yellow-500 font-mono" x-text="parseFloat(m.total_tax || 0).toLocaleString() + ' JOD'"></td>
-                                    <td class="p-5 font-bold text-emerald-500 font-mono" x-text="parseFloat(m.total_amount || 0).toLocaleString() + ' JOD'"></td>
+                                    <td style="font-family:'IBM Plex Mono',monospace; color:var(--text-2);"
+                                        x-text="m.month"></td>
+                                    <td x-text="m.total_invoices"></td>
+                                    <td style="color:var(--amber); font-family:'IBM Plex Mono',monospace;"
+                                        x-text="parseFloat(m.total_tax || 0).toLocaleString() + ' JOD'"></td>
+                                    <td style="font-weight:700; color:var(--teal); font-family:'IBM Plex Mono',monospace;"
+                                        x-text="parseFloat(m.total_amount || 0).toLocaleString() + ' JOD'"></td>
                                 </tr>
                             </template>
                         </tbody>
@@ -408,275 +1538,541 @@
                 </div>
             </div>
         </div>
+    </div>
 
-        <!-- Add User Modal -->
-        <div x-show="showAddUserModal" x-cloak class="fixed inset-0 bg-black/90 flex items-center justify-center p-6 z-[120]">
-            <div class="bg-surface border border-gray-800 w-full max-w-lg p-10 rounded-[40px] shadow-2xl glass-elevated">
-                <h3 class="text-2xl font-bold mb-8">إضافة مستخدم جديد</h3>
-                <form @submit.prevent="createUser" class="space-y-6">
-                    <input type="text" x-model="newUser.name" placeholder="الاسم الكامل" class="w-full bg-gray-950 border border-gray-800 p-4 rounded-2xl outline-none" required>
-                    <input type="email" x-model="newUser.email" placeholder="البريد الإلكتروني" class="w-full bg-gray-950 border border-gray-800 p-4 rounded-2xl outline-none" required>
-                    <input type="password" x-model="newUser.password" placeholder="كلمة المرور" class="w-full bg-gray-950 border border-gray-800 p-4 rounded-2xl outline-none" required>
-                    <select x-model="newUser.role" class="w-full bg-gray-950 border border-gray-800 p-4 rounded-2xl outline-none" required>
-                        <option value="accountant">محاسب</option>
-                        <option value="viewer">مشاهد فقط</option>
-                        <option x-show="user?.role === 'super_admin'" value="admin">مدير مكتب</option>
-                    </select>
+    <!-- ── TENANT STATS MODAL ───────────────────────────── -->
+    <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 style="flex:1;">
+                    <div class="modal-title" x-text="tenantStats?.tenant?.name"></div>
+                    <div class="modal-subtitle">تقرير أداء المكتب المحاسبي</div>
+                </div>
+                <button @click="showTenantStatsModal = false" class="modal-close-btn">✕</button>
+            </div>
+            <div class="modal-body">
+                <div style="display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:24px;">
+                    <div class="mini-stat">
+                        <div class="mini-stat-label">الشركات المدارة</div>
+                        <div class="mini-stat-val" x-text="tenantStats?.summary?.total_companies || 0"></div>
+                    </div>
+                    <div class="mini-stat">
+                        <div class="mini-stat-label">إجمالي الفواتير</div>
+                        <div class="mini-stat-val" x-text="tenantStats?.summary?.total_invoices || 0"></div>
+                    </div>
+                    <div class="mini-stat">
+                        <div class="mini-stat-label">المجموع (JOD)</div>
+                        <div class="mini-stat-val" style="color:var(--teal);"
+                            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);"
+                            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>
+                <div
+                    style="border:1px solid var(--border); border-radius:12px; overflow:hidden; max-height:240px; overflow-y:auto;">
+                    <table class="stats-table">
+                        <thead>
+                            <tr>
+                                <th>الشهر</th>
+                                <th>عدد الفواتير</th>
+                                <th>الضريبة المستحقة</th>
+                                <th style="color:var(--teal);">الإجمالي النهائي</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <template x-for="m in tenantStats?.monthly" :key="m.month">
+                                <tr>
+                                    <td style="font-family:'IBM Plex Mono',monospace; color:var(--text-2);"
+                                        x-text="m.month"></td>
+                                    <td x-text="m.total_invoices"></td>
+                                    <td style="color:var(--amber); font-family:'IBM Plex Mono',monospace;"
+                                        x-text="parseFloat(m.total_tax || 0).toLocaleString() + ' JOD'"></td>
+                                    <td style="font-weight:700; color:var(--teal); font-family:'IBM Plex Mono',monospace;"
+                                        x-text="parseFloat(m.total_amount || 0).toLocaleString() + ' JOD'"></td>
+                                </tr>
+                            </template>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
 
+    <!-- ── ADD USER MODAL ───────────────────────────────── -->
+    <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 style="flex:1;">
+                    <div class="modal-title">إضافة مستخدم جديد</div>
+                    <div class="modal-subtitle">أدخل بيانات الحساب الجديد</div>
+                </div>
+                <button @click="showAddUserModal = false" class="modal-close-btn">✕</button>
+            </div>
+            <div class="modal-divider"></div>
+            <form @submit.prevent="createUser">
+                <div class="modal-body" style="display:flex; flex-direction:column; gap:14px;">
+                    <div class="form-group">
+                        <label class="form-label">الاسم الكامل</label>
+                        <input type="text" x-model="newUser.name" placeholder="مثال: أحمد محمد" class="form-input"
+                            required>
+                    </div>
+                    <div class="form-group">
+                        <label class="form-label">البريد الإلكتروني</label>
+                        <input type="email" x-model="newUser.email" placeholder="example@office.com" class="form-input"
+                            required>
+                    </div>
+                    <div class="form-group">
+                        <label class="form-label">كلمة المرور</label>
+                        <input type="password" x-model="newUser.password" placeholder="••••••••" class="form-input"
+                            required>
+                    </div>
+                    <div class="form-group">
+                        <label class="form-label">الصلاحية</label>
+                        <select x-model="newUser.role" class="form-input" required>
+                            <option value="accountant">محاسب</option>
+                            <option value="viewer">مشاهد فقط</option>
+                            <option x-show="user?.role === 'super_admin'" value="admin">مدير مكتب</option>
+                        </select>
+                    </div>
                     <template x-if="user?.role === 'super_admin'">
-                        <div>
-                            <label class="block text-[10px] font-bold text-gray-500 uppercase mb-2 mr-2">اختر المكتب المحاسبي</label>
-                            <select x-model="newUser.tenant_id" class="w-full bg-gray-950 border border-gray-800 p-4 rounded-2xl outline-none" required>
-                                <option value="">-- اختر المكتب --</option>
+                        <div class="form-group">
+                            <label class="form-label">المكتب المحاسبي</label>
+                            <select x-model="newUser.tenant_id" class="form-input" required>
+                                <option value="">— اختر المكتب —</option>
                                 <template x-for="t in tenants" :key="t.id">
                                     <option :value="t.id" x-text="t.name"></option>
                                 </template>
                             </select>
                         </div>
                     </template>
-                    <div class="flex gap-4 pt-4">
-                        <button type="submit" class="flex-1 bg-emerald-600 hover:bg-emerald-500 py-4 rounded-2xl font-bold transition-all btn-glow" :disabled="isBusy">حفظ المستخدم</button>
-                        <button type="button" @click="showAddUserModal = false" class="px-8 py-4 border border-gray-800 rounded-2xl">إلغاء</button>
-                    </div>
-                </form>
-            </div>
+                </div>
+                <div class="modal-divider"></div>
+                <div class="modal-footer">
+                    <button type="submit" class="btn btn-navy" :disabled="isBusy" style="flex:1;">
+                        <span x-show="!isBusy">💾 حفظ المستخدم</span>
+                        <span x-show="isBusy">⏳ جاري الحفظ...</span>
+                    </button>
+                    <button type="button" @click="showAddUserModal = false" class="btn btn-ghost">إلغاء</button>
+                </div>
+            </form>
         </div>
+    </div>
 
-        <!-- Add Company Modal -->
-        <div x-show="showAddCompanyModal" x-cloak class="fixed inset-0 bg-black/90 flex items-center justify-center p-6 z-[120]">
-            <div class="bg-surface border border-gray-800 w-full max-w-lg p-10 rounded-[40px] shadow-2xl glass-elevated">
-                <h3 class="text-2xl font-bold mb-8">إضافة شركة جديدة</h3>
-                <form @submit.prevent="createCompany" class="space-y-6">
-                    <input type="text" x-model="newCompany.name" placeholder="اسم الشركة (بالعربي)" class="w-full bg-gray-950 border border-gray-800 p-4 rounded-2xl outline-none" required>
-                    <input type="text" x-model="newCompany.tax_identification_number" placeholder="الرقم الضريبي (TIN)" class="w-full bg-gray-950 border border-gray-800 p-4 rounded-2xl outline-none" required>
-                    <input type="text" x-model="newCompany.commercial_registration_number" placeholder="رقم السجل التجاري" class="w-full bg-gray-950 border border-gray-800 p-4 rounded-2xl outline-none">
-                    <input type="text" x-model="newCompany.address" placeholder="العنوان" class="w-full bg-gray-950 border border-gray-800 p-4 rounded-2xl outline-none">
-                    
+    <!-- ── ADD COMPANY MODAL ────────────────────────────── -->
+    <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 style="flex:1;">
+                    <div class="modal-title">إضافة شركة جديدة</div>
+                    <div class="modal-subtitle">أدخل بيانات الشركة الرسمية</div>
+                </div>
+                <button @click="showAddCompanyModal = false" class="modal-close-btn">✕</button>
+            </div>
+            <div class="modal-divider"></div>
+            <form @submit.prevent="createCompany">
+                <div class="modal-body" style="display:flex; flex-direction:column; gap:14px;">
+                    <div class="form-group">
+                        <label class="form-label">اسم الشركة</label>
+                        <input type="text" x-model="newCompany.name" placeholder="الاسم الكامل بالعربي"
+                            class="form-input" required>
+                    </div>
+                    <div class="form-group">
+                        <label class="form-label">الرقم الضريبي (TIN)</label>
+                        <input type="text" x-model="newCompany.tax_identification_number"
+                            placeholder="أدخل رقم التسجيل الضريبي" class="form-input mono" required>
+                    </div>
+                    <div class="form-group">
+                        <label class="form-label">رقم السجل التجاري <span
+                                class="form-label-sub">(اختياري)</span></label>
+                        <input type="text" x-model="newCompany.commercial_registration_number"
+                            placeholder="رقم السجل التجاري" class="form-input mono">
+                    </div>
+                    <div class="form-group">
+                        <label class="form-label">العنوان <span class="form-label-sub">(اختياري)</span></label>
+                        <input type="text" x-model="newCompany.address" placeholder="عنوان الشركة" class="form-input">
+                    </div>
                     <template x-if="user?.role === 'super_admin'">
-                        <div>
-                            <label class="block text-[10px] font-bold text-gray-500 uppercase mb-2 mr-2">إسناد للمكتب المحاسبي</label>
-                            <select x-model="newCompany.tenant_id" class="w-full bg-gray-950 border border-gray-800 p-4 rounded-2xl outline-none" required>
-                                <option value="">-- اختر المكتب --</option>
+                        <div class="form-group">
+                            <label class="form-label">المكتب المحاسبي المسؤول</label>
+                            <select x-model="newCompany.tenant_id" class="form-input" required>
+                                <option value="">— اختر المكتب —</option>
                                 <template x-for="t in tenants" :key="t.id">
                                     <option :value="t.id" x-text="t.name"></option>
                                 </template>
                             </select>
                         </div>
                     </template>
-                    <div class="flex gap-4 pt-4">
-                        <button type="submit" class="flex-1 bg-emerald-600 hover:bg-emerald-500 py-4 rounded-2xl font-bold transition-all btn-glow" :disabled="isBusy">إضافة الشركة</button>
-                        <button type="button" @click="showAddCompanyModal = false" class="px-8 py-4 border border-gray-800 rounded-2xl">إلغاء</button>
-                    </div>
-                </form>
-            </div>
+                </div>
+                <div class="modal-divider"></div>
+                <div class="modal-footer">
+                    <button type="submit" class="btn btn-navy" :disabled="isBusy" style="flex:1;">
+                        <span x-show="!isBusy">🏭 إضافة الشركة</span>
+                        <span x-show="isBusy">⏳ جاري الإضافة...</span>
+                    </button>
+                    <button type="button" @click="showAddCompanyModal = false" class="btn btn-ghost">إلغاء</button>
+                </div>
+            </form>
         </div>
+    </div>
 
-        <!-- JoFotara Connect Modal -->
-        <div x-show="showConnectModal" x-cloak class="fixed inset-0 bg-black/90 backdrop-blur-sm flex items-center justify-center p-6 z-[130]">
-            <div class="bg-surface border border-gray-800 w-full max-w-lg p-10 rounded-[40px] shadow-2xl glass-elevated">
-                <h3 class="text-2xl font-bold mb-4">ربط نظام الفوترة الحكومي</h3>
-                <p class="text-gray-500 text-sm mb-8" x-text="'الشركة: ' + currentCompany?.name"></p>
-                <form @submit.prevent="connectJoFotara" class="space-y-6">
-                    <div>
-                        <label class="block text-xs font-bold text-gray-500 uppercase mb-2">Client ID</label>
-                        <input type="text" x-model="connectData.client_id" placeholder="أدخل Client ID" class="w-full bg-gray-950 border border-gray-800 p-4 rounded-2xl outline-none font-mono text-sm" required>
-                    </div>
-                    <div>
-                        <label class="block text-xs font-bold text-gray-500 uppercase mb-2">Secret Key</label>
-                        <input type="password" x-model="connectData.secret_key" placeholder="أدخل Secret Key" class="w-full bg-gray-950 border border-gray-800 p-4 rounded-2xl outline-none font-mono text-sm" required>
-                    </div>
-                    <div>
-                        <label class="block text-xs font-bold text-gray-500 uppercase mb-2">تسلسل مصدر الدخل</label>
-                        <input type="text" x-model="connectData.income_source_sequence" placeholder="مثال: 1" class="w-full bg-gray-950 border border-gray-800 p-4 rounded-2xl outline-none font-mono text-sm">
-                    </div>
-                    <div class="flex gap-4 pt-4">
-                        <button type="submit" class="flex-1 bg-emerald-600 hover:bg-emerald-500 py-4 rounded-2xl font-bold transition-all btn-glow" :disabled="isBusy">حفظ وتفعيل الربط</button>
-                        <button type="button" @click="showConnectModal = false" class="px-8 py-4 border border-gray-800 rounded-2xl">إلغاء</button>
-                    </div>
-                </form>
+    <!-- ── JOFOTARA CONNECT MODAL ───────────────────────── -->
+    <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 style="flex:1;">
+                    <div class="modal-title">ربط نظام الفوترة الحكومي</div>
+                    <div class="modal-subtitle" x-text="'الشركة: ' + currentCompany?.name"></div>
+                </div>
+                <button @click="showConnectModal = false" class="modal-close-btn">✕</button>
             </div>
+            <div class="modal-divider"></div>
+            <form @submit.prevent="connectJoFotara">
+                <div class="modal-body" style="display:flex; flex-direction:column; gap:14px;">
+                    <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);">
+                        ℹ️ هذه البيانات تُستخرج من بوابة JoFotara الحكومية لربط الفوترة الإلكترونية
+                    </div>
+                    <div class="form-group">
+                        <label class="form-label">Client ID</label>
+                        <input type="text" x-model="connectData.client_id" placeholder="أدخل Client ID"
+                            class="form-input mono" required>
+                    </div>
+                    <div class="form-group">
+                        <label class="form-label">Secret Key</label>
+                        <input type="password" x-model="connectData.secret_key" placeholder="أدخل Secret Key"
+                            class="form-input mono" required>
+                    </div>
+                    <div class="form-group">
+                        <label class="form-label">تسلسل مصدر الدخل <span class="form-label-sub">(مثال: 1)</span></label>
+                        <input type="text" x-model="connectData.income_source_sequence" placeholder="1"
+                            class="form-input mono">
+                    </div>
+                </div>
+                <div class="modal-divider"></div>
+                <div class="modal-footer">
+                    <button type="submit" class="btn btn-teal" :disabled="isBusy" style="flex:1;">
+                        <span x-show="!isBusy">🔗 حفظ وتفعيل الربط</span>
+                        <span x-show="isBusy">⏳ جاري التفعيل...</span>
+                    </button>
+                    <button type="button" @click="showConnectModal = false" class="btn btn-ghost">إلغاء</button>
+                </div>
+            </form>
         </div>
-        <!-- Upload Invoice Modal -->
-        <div x-show="showUploadModal" x-cloak class="fixed inset-0 bg-black/90 flex items-center justify-center p-6 z-[120]">
-            <div class="bg-surface border border-gray-800 w-full max-w-lg p-10 rounded-[40px] shadow-2xl glass-elevated">
-                <h3 class="text-2xl font-bold mb-8">رفع فاتورة جديدة</h3>
-                <form @submit.prevent="uploadInvoice" class="space-y-6">
-                    <div>
-                        <label class="block text-xs font-bold text-gray-500 uppercase mb-2">اختر الشركة</label>
-                        <select x-model="uploadData.company_id" class="w-full bg-gray-950 border border-gray-800 p-4 rounded-2xl outline-none" required>
-                            <option value="">-- يرجى الاختيار --</option>
+    </div>
+
+    <!-- ── UPLOAD INVOICE MODAL ─────────────────────────── -->
+    <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 style="flex:1;">
+                    <div class="modal-title">رفع فاتورة جديدة</div>
+                    <div class="modal-subtitle">سيتم تحليلها آلياً بالذكاء الاصطناعي</div>
+                </div>
+                <button @click="showUploadModal = false" class="modal-close-btn">✕</button>
+            </div>
+            <div class="modal-divider"></div>
+            <form @submit.prevent="uploadInvoice">
+                <div class="modal-body" style="display:flex; flex-direction:column; gap:14px;">
+                    <div class="form-group">
+                        <label class="form-label">اختر الشركة</label>
+                        <select x-model="uploadData.company_id" class="form-input" required>
+                            <option value="">— يرجى اختيار الشركة —</option>
                             <template x-for="c in companies" :key="c.id">
                                 <option :value="c.id" x-text="c.name"></option>
                             </template>
                         </select>
                     </div>
-                    <div>
-                        <label class="block text-xs font-bold text-gray-500 uppercase mb-2">ملف الفاتورة (صورة أو PDF)</label>
-                        <input type="file" @change="selectedFile = $event.target.files[0]" class="w-full bg-gray-950 border border-gray-800 p-4 rounded-2xl outline-none" required>
+                    <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>
+                        <input type="file" @change="selectedFile = $event.target.files[0]" class="form-input"
+                            style="padding:8px;" required>
                     </div>
-                    <div class="flex gap-4 pt-4">
-                        <button type="submit" class="flex-1 bg-emerald-600 hover:bg-emerald-500 py-4 rounded-2xl font-bold transition-all btn-glow" :disabled="isUploading">
-                            <span x-show="!isUploading">📤 رفع وتحليل</span>
-                            <span x-show="isUploading">⏳ جاري التحليل...</span>
-                        </button>
-                        <button type="button" @click="showUploadModal = false" class="px-8 py-4 border border-gray-800 rounded-2xl">إلغاء</button>
-                    </div>
-                </form>
-            </div>
+                </div>
+                <div class="modal-divider"></div>
+                <div class="modal-footer">
+                    <button type="submit" class="btn btn-teal" :disabled="isUploading" style="flex:1;">
+                        <span x-show="!isUploading">📤 رفع وتحليل</span>
+                        <span x-show="isUploading">⏳ جاري التحليل والاستخراج...</span>
+                    </button>
+                    <button type="button" @click="showUploadModal = false" class="btn btn-ghost">إلغاء</button>
+                </div>
+            </form>
         </div>
+    </div>
 
-        <!-- View Invoice Modal -->
-        <div x-show="showViewModal" x-cloak class="fixed inset-0 bg-black/90 backdrop-blur-md flex items-center justify-center p-6 z-[110]">
-            <div class="bg-surface border border-gray-800 w-full max-w-6xl h-[90vh] p-8 rounded-[40px] shadow-2xl glass-elevated flex flex-col md:flex-row gap-8" @click.away="showViewModal = false">
-                <!-- Left: Document Preview -->
-                <div class="flex-1 bg-gray-950 rounded-3xl overflow-hidden border border-gray-800 relative">
-                    <template x-if="currentInvoice?.file_url">
-                        <iframe :src="currentInvoice.file_url + '&token=' + token()" class="w-full h-full border-0"></iframe>
-                    </template>
-                    <div x-show="!currentInvoice?.file_url" class="absolute inset-0 flex items-center justify-center text-gray-600">لا يوجد ملف مرفق</div>
+    <!-- ── 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;">
+
+            <!-- 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>
+                </div>
+                <template x-if="currentInvoice?.file_url">
+                    <iframe :src="currentInvoice.file_url + '&token=' + token()"
+                        style="width:100%; height:100%; border:0;"></iframe>
+                </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>
+                </div>
+            </div>
+
+            <!-- Invoice Data Panel -->
+            <div style="width:340px; flex-shrink:0; display:flex; flex-direction:column; overflow:hidden;">
+                <!-- Header -->
+                <div
+                    style="padding:20px 20px 16px; border-bottom:1px solid var(--border); 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')"
+                            x-text="currentInvoice?.status === 'approved' ? '✓ مدققة' : (currentInvoice?.status === 'extracted' ? 'جاهزة للتدقيق' : currentInvoice?.status)">
+                        </span>
+                    </div>
+                    <button @click="showViewModal = false" class="modal-close-btn">✕</button>
                 </div>
 
-                <!-- Right: Invoice Data -->
-                <div class="w-full md:w-96 flex flex-col h-full overflow-y-auto pr-4 scrollbar-hide">
-                    <div class="flex justify-between items-start mb-6">
-                        <h3 class="text-2xl font-bold text-emerald-400">تفاصيل الفاتورة</h3>
-                        <button @click="showViewModal = false" class="text-gray-500 hover:text-white text-3xl transition">✕</button>
+                <!-- Fields -->
+                <div style="flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px;">
+
+                    <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:'IBM Plex Mono',monospace; margin-top:4px;"
+                            x-text="'TIN: ' + (currentInvoice?.supplier_tin || '—')"></div>
                     </div>
 
-                    <div class="space-y-4 flex-1">
-                        <div class="p-4 bg-gray-900/50 rounded-2xl border border-gray-800">
-                            <p class="text-[10px] text-gray-500 uppercase tracking-widest mb-1">المورد</p>
-                            <p class="font-bold text-lg text-emerald-300" x-text="currentInvoice?.supplier_name || 'غير متوفر'"></p>
-                            <p class="text-xs text-gray-400 font-mono mt-1" x-text="'TIN: ' + (currentInvoice?.supplier_tin || '-')"></p>
-                        </div>
-                        
-                        <div class="p-4 bg-gray-900/50 rounded-2xl border border-gray-800">
-                            <p class="text-[10px] text-gray-500 uppercase tracking-widest mb-1">الرقم والتاريخ</p>
-                            <p class="font-bold" x-text="currentInvoice?.invoice_number || '-'"></p>
-                            <p class="text-sm text-gray-400 font-mono" x-text="currentInvoice?.invoice_date || '-'"></p>
-                        </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:'IBM Plex Mono',monospace; margin-top:3px;"
+                            x-text="currentInvoice?.invoice_date || '—'"></div>
+                    </div>
 
-                        <div class="p-4 bg-gray-900/50 rounded-2xl border border-gray-800">
-                            <p class="text-[10px] text-gray-500 uppercase tracking-widest mb-1">المجموع الكلي</p>
-                            <p class="text-3xl font-bold font-mono text-emerald-400" x-text="parseFloat(currentInvoice?.grand_total || 0).toLocaleString() + ' JOD'"></p>
-                            <p class="text-xs text-yellow-500 mt-1 font-mono" x-text="'الضريبة: ' + parseFloat(currentInvoice?.tax_amount || 0).toLocaleString()"></p>
-                        </div>
-
-                        <!-- Items -->
-                        <div x-show="currentInvoice?.items?.length > 0" class="mt-4 border border-gray-800 rounded-2xl overflow-hidden">
-                            <table class="w-full text-xs text-right">
-                                <thead class="bg-gray-900">
-                                    <tr><th class="p-2">البند</th><th class="p-2">الكمية</th><th class="p-2">السعر</th></tr>
-                                </thead>
-                                <tbody class="divide-y divide-gray-800 bg-gray-900/30">
-                                    <template x-for="item in currentInvoice?.items" :key="item.id">
-                                        <tr>
-                                            <td class="p-2" x-text="item.description"></td>
-                                            <td class="p-2 font-mono text-gray-400" x-text="item.quantity"></td>
-                                            <td class="p-2 font-mono text-emerald-400" x-text="item.unit_price"></td>
-                                        </tr>
-                                    </template>
-                                </tbody>
-                            </table>
-                        </div>
-
-                        <!-- QR Code -->
-                        <div x-show="currentInvoice?.jofotara?.qr_image_uri || currentInvoice?.qr_code" class="mt-6 p-4 bg-white rounded-2xl flex justify-center items-center shadow-inner">
-                            <img :src="getQrSrc(currentInvoice)" class="w-40 h-40 object-contain" alt="QR Code">
+                    <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;"
+                            x-text="parseFloat(currentInvoice?.grand_total || 0).toLocaleString() + ' JOD'"></div>
+                        <div style="font-size:12px; color:var(--amber); margin-top:4px; font-family:'IBM Plex Mono',monospace;"
+                            x-text="'الضريبة: ' + parseFloat(currentInvoice?.tax_amount || 0).toLocaleString() + ' JOD'">
                         </div>
                     </div>
 
-                    <!-- Actions -->
-                    <div class="mt-6 pt-6 border-t border-gray-800 space-y-3">
-                        <button x-show="currentInvoice?.status === 'extracted'" @click="approveInvoice" class="w-full bg-emerald-600 hover:bg-emerald-500 py-4 rounded-2xl font-bold shadow-lg shadow-emerald-900/50 transition-all active:scale-95 btn-glow" :disabled="isBusy">
-                            <span x-show="!isBusy">✔️ تدقيق واعتماد محلي</span>
-                            <span x-show="isBusy">⏳ جاري التدقيق...</span>
-                        </button>
-                        <button x-show="currentInvoice?.status === 'extracted'" class="w-full bg-red-900/30 text-red-400 hover:bg-red-900/50 py-3 rounded-2xl font-bold transition-all">❌ رفض</button>
-                        <div x-show="currentInvoice?.status === 'approved'" class="w-full bg-emerald-900/30 text-emerald-400 py-3 rounded-2xl font-bold text-center border border-emerald-900/50">
-                            ✅ مدققة وموثقة محلياً
-                        </div>
+                    <!-- Items Table -->
+                    <div x-show="currentInvoice?.items?.length > 0"
+                        style="border:1px solid var(--border); border-radius:10px; overflow:hidden;">
+                        <div
+                            style="padding:8px 12px; background:#f8fafc; font-size:11px; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:0.06em;">
+                            بنود الفاتورة</div>
+                        <table style="width:100%; border-collapse:collapse; font-size:12px;">
+                            <thead>
+                                <tr>
+                                    <th
+                                        style="padding:8px 12px; text-align:right; color:var(--text-3); font-size:11px; border-bottom:1px solid var(--border);">
+                                        البند</th>
+                                    <th
+                                        style="padding:8px 12px; text-align:center; color:var(--text-3); font-size:11px; border-bottom:1px solid var(--border);">
+                                        الكمية</th>
+                                    <th
+                                        style="padding:8px 12px; text-align:left; color:var(--text-3); font-size:11px; border-bottom:1px solid var(--border);">
+                                        السعر</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 12px; color:var(--text-2);" x-text="item.description">
+                                        </td>
+                                        <td style="padding:8px 12px; text-align:center; color:var(--text-3); font-family:'IBM Plex Mono',monospace;"
+                                            x-text="item.quantity"></td>
+                                        <td style="padding:8px 12px; text-align:left; color:var(--teal); font-family:'IBM Plex Mono',monospace;"
+                                            x-text="item.unit_price"></td>
+                                    </tr>
+                                </template>
+                            </tbody>
+                        </table>
+                    </div>
+
+                    <!-- QR Code -->
+                    <div x-show="currentInvoice?.jofotara?.qr_image_uri || currentInvoice?.qr_code"
+                        style="background:white; border:1px solid var(--border); border-radius:12px; padding:16px; display:flex; flex-direction:column; align-items:center; gap:8px;">
+                        <div
+                            style="font-size:11px; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:0.07em;">
+                            رمز QR الضريبي</div>
+                        <img :src="getQrSrc(currentInvoice)" style="width:140px; height:140px; object-fit:contain;"
+                            alt="QR Code">
+                    </div>
+                </div>
+
+                <!-- Actions -->
+                <div
+                    style="padding:14px 16px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:8px;">
+                    <button x-show="currentInvoice?.status === 'extracted'" @click="approveInvoice" class="btn btn-teal"
+                        :disabled="isBusy" 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;"
+                        onmouseover="this.style.background='#fecaca'"
+                        onmouseout="this.style.background='var(--red-subtle)'">❌ رفض الفاتورة</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;">
+                        ✅ مدققة ومعتمدة
                     </div>
                 </div>
             </div>
         </div>
     </div>
 
-    <!-- Edit Tenant Modal (Super Admin Only) -->
-    <div x-show="showEditTenantModal" x-cloak class="fixed inset-0 bg-black/90 flex items-center justify-center p-6 z-[140]">
-        <div class="bg-surface border border-gray-800 w-full max-w-xl p-10 rounded-[40px] shadow-2xl glass-elevated overflow-y-auto max-h-[90vh]">
-            <h3 class="text-2xl font-bold mb-8 text-emerald-400">تعديل بيانات المكتب</h3>
-            <form @submit.prevent="updateTenant" class="space-y-6">
-                <div>
-                    <label class="block text-xs font-bold text-gray-500 uppercase mb-2">اسم المكتب</label>
-                    <input type="text" x-model="currentTenant.name" class="w-full bg-gray-950 border border-gray-800 p-4 rounded-2xl outline-none focus:border-emerald-500" required>
+    <!-- ── EDIT TENANT MODAL ────────────────────────────── -->
+    <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 style="flex:1;">
+                    <div class="modal-title">تعديل بيانات المكتب</div>
+                    <div class="modal-subtitle" x-text="currentTenant.name"></div>
                 </div>
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                    <div>
-                        <label class="block text-xs font-bold text-gray-500 uppercase mb-2">البريد الرسمي</label>
-                        <input type="email" x-model="currentTenant.email" class="w-full bg-gray-950 border border-gray-800 p-4 rounded-2xl outline-none focus:border-emerald-500" required>
+                <button @click="showEditTenantModal = false" class="modal-close-btn">✕</button>
+            </div>
+            <div class="modal-divider"></div>
+            <form @submit.prevent="updateTenant">
+                <div class="modal-body" style="display:flex; flex-direction:column; gap:14px;">
+                    <div class="form-group">
+                        <label class="form-label">اسم المكتب</label>
+                        <input type="text" x-model="currentTenant.name" class="form-input" required>
                     </div>
-                    <div>
-                        <label class="block text-xs font-bold text-gray-500 uppercase mb-2">رقم الهاتف</label>
-                        <input type="text" x-model="currentTenant.phone" class="w-full bg-gray-950 border border-gray-800 p-4 rounded-2xl outline-none focus:border-emerald-500">
+                    <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px;">
+                        <div class="form-group">
+                            <label class="form-label">البريد الرسمي</label>
+                            <input type="email" x-model="currentTenant.email" class="form-input" required>
+                        </div>
+                        <div class="form-group">
+                            <label class="form-label">رقم الهاتف</label>
+                            <input type="text" x-model="currentTenant.phone" class="form-input">
+                        </div>
+                    </div>
+                    <div class="form-group">
+                        <label class="form-label">حالة المكتب</label>
+                        <select x-model="currentTenant.status" class="form-input">
+                            <option value="active">✅ نشط (Active)</option>
+                            <option value="suspended">🔴 معلق (Suspended)</option>
+                            <option value="trial">🟡 تجريبي (Trial)</option>
+                        </select>
                     </div>
                 </div>
-                <div>
-                    <label class="block text-xs font-bold text-gray-500 uppercase mb-2">حالة المكتب</label>
-                    <select x-model="currentTenant.status" class="w-full bg-gray-950 border border-gray-800 p-4 rounded-2xl outline-none focus:border-emerald-500">
-                        <option value="active">نشط (Active)</option>
-                        <option value="suspended">معلق (Suspended)</option>
-                        <option value="trial">تجريبي (Trial)</option>
-                    </select>
-                </div>
-
-                <div class="flex gap-4 pt-6 border-t border-gray-800">
-                    <button type="submit" class="flex-1 bg-emerald-600 hover:bg-emerald-500 py-4 rounded-2xl font-bold transition-all btn-glow" :disabled="isBusy">
+                <div class="modal-divider"></div>
+                <div class="modal-footer">
+                    <button type="submit" class="btn btn-navy" :disabled="isBusy" style="flex:1;">
                         <span x-show="!isBusy">💾 حفظ التعديلات</span>
                         <span x-show="isBusy">⏳ جاري الحفظ...</span>
                     </button>
-                    <button type="button" @click="showEditTenantModal = false" class="px-8 py-4 border border-gray-800 rounded-2xl hover:bg-gray-800 transition-colors">إلغاء</button>
+                    <button type="button" @click="showEditTenantModal = false" class="btn btn-ghost">إلغاء</button>
                 </div>
             </form>
         </div>
     </div>
-    
-    <!-- Add Tenant Modal (Super Admin Only) -->
-    <div x-show="showAddTenantModal" x-cloak class="fixed inset-0 bg-black/90 flex items-center justify-center p-6 z-[140]">
-        <div class="bg-surface border border-gray-800 w-full max-w-2xl p-10 rounded-[40px] shadow-2xl glass-elevated overflow-y-auto max-h-[90vh]">
-            <h3 class="text-2xl font-bold mb-8 text-emerald-400">إضافة مكتب محاسبي جديد</h3>
-            <form @submit.prevent="createTenant" class="space-y-8">
-                <!-- Office Details -->
-                <div class="space-y-4">
-                    <p class="text-xs font-bold text-gray-500 uppercase tracking-widest border-b border-gray-800 pb-2">بيانات المكتب</p>
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                        <input type="text" x-model="newTenant.name" placeholder="اسم المكتب" class="w-full bg-gray-950 border border-gray-800 p-4 rounded-2xl outline-none focus:border-emerald-500 transition-colors" required>
-                        <input type="email" x-model="newTenant.email" placeholder="بريد المكتب الرسمي" class="w-full bg-gray-950 border border-gray-800 p-4 rounded-2xl outline-none focus:border-emerald-500 transition-colors" required>
-                        <input type="text" x-model="newTenant.phone" placeholder="رقم الهاتف" class="w-full bg-gray-950 border border-gray-800 p-4 rounded-2xl outline-none focus:border-emerald-500 transition-colors">
+
+    <!-- ── ADD TENANT MODAL ─────────────────────────────── -->
+    <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 style="flex:1;">
+                    <div class="modal-title">إضافة مكتب محاسبي جديد</div>
+                    <div class="modal-subtitle">سيتم إنشاء حساب المدير المسؤول تلقائياً</div>
+                </div>
+                <button @click="showAddTenantModal = false" class="modal-close-btn">✕</button>
+            </div>
+            <div class="modal-divider"></div>
+            <form @submit.prevent="createTenant">
+                <div class="modal-body" style="display:flex; flex-direction:column; gap:18px;">
+
+                    <!-- Office Info -->
+                    <div>
+                        <div class="form-section-title">
+                            <span>🏢</span> بيانات المكتب المحاسبي
+                        </div>
+                        <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px;">
+                            <div class="form-group" style="grid-column:1/-1;">
+                                <label class="form-label">اسم المكتب</label>
+                                <input type="text" x-model="newTenant.name" placeholder="اسم المكتب المحاسبي"
+                                    class="form-input" required>
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label">البريد الرسمي للمكتب</label>
+                                <input type="email" x-model="newTenant.email" placeholder="info@office.com"
+                                    class="form-input" required>
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label">رقم الهاتف <span
+                                        class="form-label-sub">(اختياري)</span></label>
+                                <input type="text" x-model="newTenant.phone" placeholder="+962 7x xxx xxxx"
+                                    class="form-input">
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Manager Info -->
+                    <div>
+                        <div class="form-section-title">
+                            <span>👤</span> بيانات المدير المسؤول
+                        </div>
+                        <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px;">
+                            <div class="form-group" style="grid-column:1/-1;">
+                                <label class="form-label">الاسم الكامل للمدير</label>
+                                <input type="text" x-model="newTenant.manager_name" placeholder="الاسم الكامل"
+                                    class="form-input" required>
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label">بريد المدير الإلكتروني</label>
+                                <input type="email" x-model="newTenant.manager_email" placeholder="manager@office.com"
+                                    class="form-input" required>
+                            </div>
+                            <div class="form-group">
+                                <label class="form-label">كلمة مرور الدخول</label>
+                                <input type="password" x-model="newTenant.manager_password" placeholder="••••••••"
+                                    class="form-input" required>
+                            </div>
+                        </div>
                     </div>
                 </div>
-
-                <!-- Manager Details -->
-                <div class="space-y-4">
-                    <p class="text-xs font-bold text-gray-500 uppercase tracking-widest border-b border-gray-800 pb-2">بيانات مدير المكتب (المسؤول)</p>
-                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                        <input type="text" x-model="newTenant.manager_name" placeholder="اسم المدير الكامل" class="w-full bg-gray-950 border border-gray-800 p-4 rounded-2xl outline-none focus:border-emerald-500 transition-colors" required>
-                        <input type="email" x-model="newTenant.manager_email" placeholder="بريد المدير الخاص" class="w-full bg-gray-950 border border-gray-800 p-4 rounded-2xl outline-none focus:border-emerald-500 transition-colors" required>
-                        <input type="password" x-model="newTenant.manager_password" placeholder="كلمة مرور المدير" class="w-full bg-gray-950 border border-gray-800 p-4 rounded-2xl outline-none focus:border-emerald-500 transition-colors" required>
-                    </div>
-                </div>
-
-                <div class="flex gap-4 pt-4 border-t border-gray-800">
-                    <button type="submit" class="flex-1 bg-emerald-600 hover:bg-emerald-500 py-4 rounded-2xl font-bold transition-all btn-glow" :disabled="isBusy">
+                <div class="modal-divider"></div>
+                <div class="modal-footer">
+                    <button type="submit" class="btn btn-navy" :disabled="isBusy" style="flex:1;">
                         <span x-show="!isBusy">🏗️ إنشاء المكتب والمدير</span>
                         <span x-show="isBusy">⏳ جاري الإنشاء...</span>
                     </button>
-                    <button type="button" @click="showAddTenantModal = false" class="px-8 py-4 border border-gray-800 rounded-2xl hover:bg-gray-800 transition-colors">إلغاء</button>
+                    <button type="button" @click="showAddTenantModal = false" class="btn btn-ghost">إلغاء</button>
                 </div>
             </form>
         </div>
     </div>
 
+
+    <!-- ════════════════════════════════════════════════════════
+         ALPINE.JS — LOGIC UNCHANGED
+    ════════════════════════════════════════════════════════ -->
     <script>
         document.addEventListener('alpine:init', () => {
             Alpine.data('app', () => ({
@@ -684,7 +2080,7 @@
                 page: 'dashboard',
                 users: [], companies: [], invoices: [], tenants: [],
                 stats: { total: 0, pending: 0, approved: 0 },
-                
+
                 showAddUserModal: false, showAddCompanyModal: false, showConnectModal: false,
                 showUploadModal: false, showViewModal: false, showCompanyStatsModal: false,
                 showAddTenantModal: false, showEditTenantModal: false, showTenantStatsModal: false,
@@ -695,7 +2091,7 @@
                 newTenant: { name: '', email: '', phone: '', manager_name: '', manager_email: '', manager_password: '' },
                 connectData: { client_id: '', secret_key: '', income_source_sequence: '1' },
                 uploadData: { company_id: '' },
-                currentCompany: null, currentInvoice: null, companyStats: null, 
+                currentCompany: null, currentInvoice: null, companyStats: null,
                 currentTenant: { name: '', email: '', phone: '', status: '' }, tenantStats: null,
 
                 init() {
@@ -703,8 +2099,8 @@
                     this.loadAll();
                 },
                 setPage(p) { this.page = p; this.loadAll(); },
-                title() { return { dashboard: 'لوحة التحكم', users: 'المستخدمون', companies: 'الشركات', invoices: 'إدارة الفواتير' }[this.page] || ''; },
-                subtitle() { return { dashboard: 'نظرة شاملة', users: 'إدارة الفريق', companies: 'إدارة المؤسسات والربط الضريبي', invoices: 'معالجة الفواتير' }[this.page] || ''; },
+                title() { return { dashboard: 'الرئيسية', users: 'فريق العمل', companies: 'الشركات', invoices: 'إدارة الفواتير', tenants: 'المكاتب المحاسبية' }[this.page] || ''; },
+                subtitle() { return { dashboard: 'نظرة شاملة على نشاط النظام', users: 'إدارة المستخدمين والصلاحيات', companies: 'إدارة الشركات والربط بالفوترة الحكومية', invoices: 'رفع ومعالجة الفواتير الضريبية', tenants: 'إدارة المكاتب المحاسبية المشتركة' }[this.page] || ''; },
                 token() { return localStorage.getItem('access_token'); },
                 showError(msg) { this.globalError = msg; setTimeout(() => this.globalError = '', 8000); },
 
@@ -780,7 +2176,7 @@
                                     size: 250
                                 });
                                 this.currentInvoice.qr_code = qr.toDataURL();
-                            } catch (e) {}
+                            } catch (e) { }
                         }
                     }
                     this.isBusy = false;
@@ -803,11 +2199,11 @@
                 async createTenant() {
                     this.isBusy = true;
                     const res = await this.apiRequest('v1/tenants/create', 'POST', this.newTenant);
-                    if (res) { 
-                        this.showAddTenantModal = false; 
+                    if (res) {
+                        this.showAddTenantModal = false;
                         this.newTenant = { name: '', email: '', phone: '', manager_name: '', manager_email: '', manager_password: '' };
-                        this.loadAll(); 
-                        alert('تم إضافة المكتب المحاسبي والمدير المسؤول بنجاح'); 
+                        this.loadAll();
+                        alert('تم إضافة المكتب المحاسبي والمدير المسؤول بنجاح');
                     }
                     this.isBusy = false;
                 },
@@ -847,11 +2243,11 @@
 
                 selectedFile: null,
                 isUploading: false,
-                
+
                 async uploadInvoice() {
                     if (!this.selectedFile) return alert('الرجاء اختيار ملف');
                     if (!this.uploadData.company_id) return alert('الرجاء اختيار الشركة');
-                    
+
                     this.isUploading = true;
                     const formData = new FormData();
                     formData.append('company_id', this.uploadData.company_id);
@@ -865,7 +2261,7 @@
                         });
                         const json = await res.json();
                         this.isUploading = false;
-                        
+
                         if (json.success) {
                             this.showUploadModal = false;
                             this.selectedFile = null;
@@ -891,7 +2287,7 @@
                         });
                         const json = await res.json();
                         this.isBusy = false;
-                        
+
                         if (json.success) {
                             alert('تم اعتماد الفاتورة بنجاح!');
                             this.showViewModal = false;
@@ -910,4 +2306,5 @@
         });
     </script>
 </body>
+
 </html>
\ No newline at end of file

الشركة	الأرقام الرسمية	الفواتير	الإجمالي	الفوترة الحكومية	التقارير	إجراءات
+ + 🏭 + لا توجد شركات مسجلة بعد + +
+ + +	+ TIN: + CRN: +			+ + +	+ +	+ +
المستخدم	المكتب	الصلاحية	الحالة	إجراءات
+ + 👥 + لا يوجد مستخدمون مسجلون بعد + +
+ + + + + + + + +	+	+ + +	+ + + + +	+ +
الشركة / المورد	التاريخ	المجموع الكلي	الحالة	إجراءات
+ + 📄 + لا توجد فواتير مرفوعة بعد + +
+ + + +			+ + +	+ +
المكتب المحاسبي	الشركات	الفواتير	التواصل	الحالة	إجراءات
+ + 🏢 + لا توجد مكاتب مسجلة بعد + +
+ + +			+ + +	+ + +	+ + + + +