Hugging Face's logo

Spaces:
Really-amin
/
Hoghoghi
Paused

App Files Community
1
Really-amin commited on
Commit
0ee6d9a
·
verified ·
1 Parent(s): 120e2d5

Create recent-activity.html

Browse files
Files changed (1) hide show
  1. app/static/recent-activity.html +1454 -0
app/static/recent-activity.html ADDED
@@ -0,0 +1,1454 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="fa" dir="rtl">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>داشبورد مدیریتی حقوقی | سامانه هوشمند</title>
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
11
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
12
+ <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.min.js"></script>
13
+ <script src="js/api-client.js"></script>
14
+ <script src="js/core.js"></script>
15
+ <script src="js/api-connection-test.js"></script>
16
+ <script src="js/file-upload-handler.js"></script>
17
+ <script src="js/document-crud.js"></script>
18
+ <script src="js/scraping-control.js"></script>
19
+ <style>
20
+ :root {
21
+ /* رنگ‌بندی مدرن و هارمونیک */
22
+ --text-primary: #0f172a;
23
+ --text-secondary: #475569;
24
+ --text-muted: #64748b;
25
+ --text-light: #ffffff;
26
+
27
+ /* پس‌زمینه‌های بهبود یافته */
28
+ --body-bg: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 50%, #cbd5e1 100%);
29
+ --card-bg: rgba(255, 255, 255, 0.95);
30
+ --glass-bg: rgba(255, 255, 255, 0.9);
31
+ --glass-border: rgba(148, 163, 184, 0.2);
32
+ --sidebar-bg: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
33
+
34
+ /* گرادیان‌های مدرن */
35
+ --primary-gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
36
+ --secondary-gradient: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
37
+ --success-gradient: linear-gradient(135deg, #10b981 0%, #047857 100%);
38
+ --warning-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
39
+ --danger-gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
40
+
41
+ /* سایه‌های ملایم */
42
+ --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.05);
43
+ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
44
+ --shadow-md: 0 4px 15px rgba(0, 0, 0, 0.1);
45
+ --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.12);
46
+ --shadow-glow-primary: 0 0 20px rgba(59, 130, 246, 0.15);
47
+ --shadow-glow-success: 0 0 20px rgba(16, 185, 129, 0.15);
48
+ --shadow-glow-warning: 0 0 20px rgba(245, 158, 11, 0.15);
49
+ --shadow-glow-danger: 0 0 20px rgba(239, 68, 68, 0.15);
50
+
51
+ /* متغیرهای کامپکت */
52
+ --sidebar-width: 260px;
53
+ --border-radius: 12px;
54
+ --border-radius-sm: 8px;
55
+ --border-radius-lg: 16px;
56
+ --transition-smooth: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
57
+ --transition-fast: all 0.15s ease-in-out;
58
+
59
+ /* فونت‌های کامپکت */
60
+ --font-size-xs: 0.7rem;
61
+ --font-size-sm: 0.8rem;
62
+ --font-size-base: 0.9rem;
63
+ --font-size-lg: 1.1rem;
64
+ --font-size-xl: 1.25rem;
65
+ --font-size-2xl: 1.5rem;
66
+ }
67
+
68
+ /* ریست و تنظیمات پایه */
69
+ * {
70
+ margin: 0;
71
+ padding: 0;
72
+ box-sizing: border-box;
73
+ }
74
+
75
+ html {
76
+ box-sizing: border-box;
77
+ }
78
+
79
+ body {
80
+ font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, sans-serif;
81
+ background: var(--body-bg);
82
+ color: var(--text-primary);
83
+ line-height: 1.6;
84
+ overflow-x: hidden;
85
+ font-size: var(--font-size-base);
86
+ margin: 0;
87
+ padding: 0;
88
+ }
89
+
90
+ /* اسکرول‌بار مدرن */
91
+ ::-webkit-scrollbar {
92
+ inline-size: 6px;
93
+ block-size: 6px;
94
+ }
95
+
96
+ ::-webkit-scrollbar-track {
97
+ background: rgba(0, 0, 0, 0.02);
98
+ border-radius: 10px;
99
+ }
100
+
101
+ ::-webkit-scrollbar-thumb {
102
+ background: var(--primary-gradient);
103
+ border-radius: 10px;
104
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
105
+ }
106
+
107
+ ::-webkit-scrollbar-thumb:hover {
108
+ background: var(--secondary-gradient);
109
+ }
110
+
111
+ /* کلاس‌های کمکی */
112
+ .sr-only {
113
+ position: absolute;
114
+ inline-size: 1px;
115
+ block-size: 1px;
116
+ padding: 0;
117
+ margin: -1px;
118
+ overflow: hidden;
119
+ clip: rect(0, 0, 0, 0);
120
+ white-space: nowrap;
121
+ border: 0;
122
+ }
123
+
124
+ /* کانتینر اصلی */
125
+ .dashboard-container {
126
+ display: flex;
127
+ min-block-size: 100vh;
128
+ inline-size: 100%;
129
+ position: relative;
130
+ overflow-x: hidden;
131
+ }
132
+
133
+ /* سایدبار کامپکت و بهبود یافته */
134
+ .sidebar {
135
+ inline-size: var(--sidebar-width);
136
+ background: linear-gradient(135deg,
137
+ rgba(248, 250, 252, 0.98) 0%,
138
+ rgba(241, 245, 249, 0.95) 25%,
139
+ rgba(226, 232, 240, 0.98) 50%,
140
+ rgba(203, 213, 225, 0.95) 75%,
141
+ rgba(148, 163, 184, 0.1) 100%);
142
+ backdrop-filter: blur(25px);
143
+ -webkit-backdrop-filter: blur(25px);
144
+ padding: 1rem 0;
145
+ position: fixed;
146
+ block-size: 100vh;
147
+ inset-inline-end: 0;
148
+ inset-block-start: 0;
149
+ z-index: 1000;
150
+ overflow-y: auto;
151
+ overflow-x: hidden;
152
+ box-shadow:
153
+ 0 0 0 1px rgba(59, 130, 246, 0.08),
154
+ -8px 0 32px rgba(59, 130, 246, 0.12),
155
+ inset 0 1px 0 rgba(255, 255, 255, 0.6);
156
+ border-inline-start: 1px solid rgba(59, 130, 246, 0.15);
157
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
158
+ }
159
+
160
+ .sidebar::before {
161
+ content: '';
162
+ position: absolute;
163
+ inset-block-start: 0;
164
+ inset-inline-start: 0;
165
+ inset-inline-end: 0;
166
+ inset-block-end: 0;
167
+ background:
168
+ radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.03) 0%, transparent 50%),
169
+ radial-gradient(circle at 80% 80%, rgba(16, 185, 129, 0.02) 0%, transparent 50%),
170
+ linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
171
+ pointer-events: none;
172
+ border-radius: inherit;
173
+ }
174
+
175
+ .sidebar.collapsed {
176
+ inline-size: 70px;
177
+ }
178
+
179
+ .sidebar.collapsed .logo-text,
180
+ .sidebar.collapsed .nav-title,
181
+ .sidebar.collapsed .nav-link span:not(.nav-badge),
182
+ .sidebar.collapsed .nav-badge,
183
+ .sidebar.collapsed .submenu-toggle {
184
+ opacity: 0;
185
+ visibility: hidden;
186
+ pointer-events: none;
187
+ transition: opacity 0.2s ease, visibility 0.2s ease;
188
+ }
189
+
190
+ .sidebar.collapsed .nav-link {
191
+ justify-content: center;
192
+ padding: 0.6rem;
193
+ position: relative;
194
+ }
195
+
196
+ .sidebar.collapsed .nav-link:hover::after {
197
+ content: attr(data-tooltip);
198
+ position: absolute;
199
+ inset-inline-start: 100%;
200
+ inset-block-start: 50%;
201
+ transform: translateY(-50%);
202
+ background: rgba(0, 0, 0, 0.8);
203
+ color: white;
204
+ padding: 0.5rem 0.8rem;
205
+ border-radius: 4px;
206
+ font-size: 0.8rem;
207
+ white-space: nowrap;
208
+ z-index: 10001;
209
+ margin-inline-start: 0.5rem;
210
+ opacity: 0;
211
+ animation: fadeIn 0.2s ease forwards;
212
+ }
213
+
214
+ @keyframes fadeIn {
215
+ to { opacity: 1; }
216
+ }
217
+
218
+ .sidebar.collapsed .nav-icon {
219
+ margin-inline-start: 0;
220
+ }
221
+
222
+ .sidebar.collapsed .submenu {
223
+ display: none;
224
+ }
225
+
226
+ .sidebar.collapsed .sidebar-header {
227
+ justify-content: center;
228
+ }
229
+
230
+ .sidebar.collapsed .logo {
231
+ gap: 0;
232
+ }
233
+
234
+ .sidebar.collapsed + .main-content {
235
+ margin-inline-end: 70px;
236
+ inline-size: calc(100% - 70px);
237
+ max-inline-size: calc(100% - 70px);
238
+ }
239
+
240
+ .sidebar-header {
241
+ padding: 0 1rem 1rem;
242
+ border-block-end: 1px solid rgba(59, 130, 246, 0.12);
243
+ margin-block-end: 1rem;
244
+ display: flex;
245
+ justify-content: space-between;
246
+ align-items: center;
247
+ background: linear-gradient(135deg,
248
+ rgba(255, 255, 255, 0.4) 0%,
249
+ rgba(248, 250, 252, 0.2) 100%);
250
+ margin: 0 0.5rem 1rem;
251
+ border-radius: var(--border-radius);
252
+ backdrop-filter: blur(10px);
253
+ -webkit-backdrop-filter: blur(10px);
254
+ position: relative;
255
+ }
256
+
257
+ .sidebar-header::before {
258
+ content: '';
259
+ position: absolute;
260
+ inset-block-start: 0;
261
+ inset-inline-start: 0;
262
+ inset-inline-end: 0;
263
+ inset-block-end: 0;
264
+ background: linear-gradient(135deg,
265
+ rgba(59, 130, 246, 0.05) 0%,
266
+ rgba(16, 185, 129, 0.03) 100%);
267
+ border-radius: inherit;
268
+ pointer-events: none;
269
+ }
270
+
271
+ .logo {
272
+ display: flex;
273
+ align-items: center;
274
+ gap: 0.6rem;
275
+ color: var(--text-primary);
276
+ transition: var(--transition-smooth);
277
+ position: relative;
278
+ z-index: 1;
279
+ }
280
+
281
+ .logo-icon {
282
+ inline-size: 2rem;
283
+ block-size: 2rem;
284
+ background: var(--primary-gradient);
285
+ border-radius: var(--border-radius-sm);
286
+ display: flex;
287
+ align-items: center;
288
+ justify-content: center;
289
+ font-size: 1rem;
290
+ box-shadow:
291
+ var(--shadow-glow-primary),
292
+ inset 0 1px 0 rgba(255, 255, 255, 0.3);
293
+ position: relative;
294
+ }
295
+
296
+ .logo-icon::before {
297
+ content: '';
298
+ position: absolute;
299
+ inset: 1px;
300
+ background: linear-gradient(135deg,
301
+ rgba(255, 255, 255, 0.2) 0%,
302
+ transparent 50%,
303
+ rgba(0, 0, 0, 0.1) 100%);
304
+ border-radius: inherit;
305
+ pointer-events: none;
306
+ }
307
+
308
+ .sidebar-toggle {
309
+ background: var(--primary-gradient);
310
+ border: none;
311
+ inline-size: 2rem;
312
+ block-size: 2rem;
313
+ border-radius: var(--border-radius-sm);
314
+ color: white;
315
+ cursor: pointer;
316
+ display: flex;
317
+ align-items: center;
318
+ justify-content: center;
319
+ transition: var(--transition-smooth);
320
+ box-shadow:
321
+ var(--shadow-sm),
322
+ inset 0 1px 0 rgba(255, 255, 255, 0.3);
323
+ position: relative;
324
+ z-index: 1;
325
+ }
326
+
327
+ .sidebar-toggle::before {
328
+ content: '';
329
+ position: absolute;
330
+ inset: 1px;
331
+ background: linear-gradient(135deg,
332
+ rgba(255, 255, 255, 0.2) 0%,
333
+ transparent 50%);
334
+ border-radius: inherit;
335
+ pointer-events: none;
336
+ }
337
+
338
+ .sidebar-toggle:hover {
339
+ transform: scale(1.05);
340
+ box-shadow:
341
+ var(--shadow-glow-primary),
342
+ inset 0 1px 0 rgba(255, 255, 255, 0.4);
343
+ }
344
+
345
+ .logo-text {
346
+ font-size: var(--font-size-lg);
347
+ font-weight: 700;
348
+ background: var(--primary-gradient);
349
+ -webkit-background-clip: text;
350
+ -webkit-text-fill-color: transparent;
351
+ transition: var(--transition-smooth);
352
+ }
353
+
354
+ /* منوی کامپکت */
355
+ .nav-section {
356
+ margin-block-end: 1rem;
357
+ }
358
+
359
+ .nav-title {
360
+ padding: 0 1rem 0.4rem;
361
+ font-size: var(--font-size-xs);
362
+ font-weight: 600;
363
+ text-transform: uppercase;
364
+ letter-spacing: 0.5px;
365
+ color: var(--text-secondary);
366
+ transition: var(--transition-smooth);
367
+ background: linear-gradient(90deg,
368
+ var(--text-secondary) 0%,
369
+ var(--primary-gradient) 100%);
370
+ -webkit-background-clip: text;
371
+ -webkit-text-fill-color: transparent;
372
+ position: relative;
373
+ }
374
+
375
+ .nav-title::after {
376
+ content: '';
377
+ position: absolute;
378
+ inset-block-end: 0;
379
+ inset-inline-end: 1rem;
380
+ inset-inline-start: 1rem;
381
+ block-size: 1px;
382
+ background: linear-gradient(90deg,
383
+ transparent 0%,
384
+ rgba(59, 130, 246, 0.3) 50%,
385
+ transparent 100%);
386
+ }
387
+
388
+ .nav-menu {
389
+ list-style: none;
390
+ }
391
+
392
+ .nav-item {
393
+ margin: 0.15rem 0.5rem;
394
+ }
395
+
396
+ .nav-link {
397
+ display: flex;
398
+ align-items: center;
399
+ padding: 0.6rem 0.8rem;
400
+ color: var(--text-primary);
401
+ text-decoration: none;
402
+ border-radius: var(--border-radius-sm);
403
+ transition: var(--transition-smooth);
404
+ position: relative;
405
+ font-weight: 500;
406
+ font-size: var(--font-size-sm);
407
+ cursor: pointer;
408
+ border: 1px solid transparent;
409
+ background: transparent;
410
+ }
411
+
412
+ .nav-link::before {
413
+ content: '';
414
+ position: absolute;
415
+ inset: 0;
416
+ background: linear-gradient(135deg,
417
+ rgba(59, 130, 246, 0.0) 0%,
418
+ rgba(59, 130, 246, 0.0) 100%);
419
+ border-radius: inherit;
420
+ transition: var(--transition-smooth);
421
+ opacity: 0;
422
+ }
423
+
424
+ .nav-link:hover {
425
+ color: var(--text-primary);
426
+ transform: translateX(-2px);
427
+ border-color: rgba(59, 130, 246, 0.15);
428
+ box-shadow:
429
+ 0 2px 8px rgba(59, 130, 246, 0.08),
430
+ inset 0 1px 0 rgba(255, 255, 255, 0.1);
431
+ }
432
+
433
+ .nav-link:hover::before {
434
+ background: linear-gradient(135deg,
435
+ rgba(59, 130, 246, 0.08) 0%,
436
+ rgba(16, 185, 129, 0.04) 100%);
437
+ opacity: 1;
438
+ }
439
+
440
+ .nav-link.active {
441
+ background: var(--primary-gradient);
442
+ color: var(--text-light);
443
+ box-shadow:
444
+ var(--shadow-glow-primary),
445
+ inset 0 1px 0 rgba(255, 255, 255, 0.3),
446
+ 0 4px 12px rgba(59, 130, 246, 0.4);
447
+ border-color: rgba(59, 130, 246, 0.5);
448
+ position: relative;
449
+ }
450
+
451
+ .nav-link.active::before {
452
+ background: linear-gradient(135deg,
453
+ rgba(255, 255, 255, 0.1) 0%,
454
+ transparent 50%,
455
+ rgba(0, 0, 0, 0.05) 100%);
456
+ opacity: 1;
457
+ }
458
+
459
+ .nav-link.active::after {
460
+ content: '';
461
+ position: absolute;
462
+ inset-inline-end: -0.5rem;
463
+ inset-block-start: 50%;
464
+ transform: translateY(-50%);
465
+ inline-size: 3px;
466
+ block-size: 1.5rem;
467
+ background: var(--primary-gradient);
468
+ border-radius: 2px;
469
+ box-shadow:
470
+ 0 0 8px rgba(59, 130, 246, 0.6),
471
+ inset 0 1px 0 rgba(255, 255, 255, 0.3);
472
+ }
473
+
474
+ .nav-icon {
475
+ margin-inline-start: 0.6rem;
476
+ inline-size: 1rem;
477
+ text-align: center;
478
+ font-size: 0.9rem;
479
+ opacity: 0.9;
480
+ transition: var(--transition-smooth);
481
+ }
482
+
483
+ .submenu-toggle {
484
+ background: none;
485
+ border: none;
486
+ color: var(--text-secondary);
487
+ padding: 0.2rem;
488
+ cursor: pointer;
489
+ margin-inline-end: auto;
490
+ transition: var(--transition-fast);
491
+ font-size: 0.8rem;
492
+ }
493
+
494
+ .submenu-toggle:hover {
495
+ color: var(--text-primary);
496
+ }
497
+
498
+ .submenu-toggle.open {
499
+ transform: rotate(90deg);
500
+ }
501
+
502
+ .submenu {
503
+ max-block-size: 0;
504
+ overflow: hidden;
505
+ transition: max-height 0.25s ease-out;
506
+ margin-block-start: 0.15rem;
507
+ }
508
+
509
+ .submenu.open {
510
+ max-block-size: 800px;
511
+ }
512
+
513
+ .submenu .nav-link {
514
+ padding: 0.45rem 0.6rem 0.45rem 2rem;
515
+ font-size: var(--font-size-xs);
516
+ color: var(--text-secondary);
517
+ margin: 0.1rem 0;
518
+ background: rgba(255, 255, 255, 0.3);
519
+ backdrop-filter: blur(5px);
520
+ -webkit-backdrop-filter: blur(5px);
521
+ border: 1px solid rgba(59, 130, 246, 0.08);
522
+ position: relative;
523
+ }
524
+
525
+ .submenu .nav-link::before {
526
+ content: '';
527
+ position: absolute;
528
+ inset-inline-end: 1.2rem;
529
+ inset-block-start: 50%;
530
+ transform: translateY(-50%);
531
+ inline-size: 3px;
532
+ block-size: 3px;
533
+ background: var(--primary-gradient);
534
+ border-radius: 50%;
535
+ opacity: 0.6;
536
+ }
537
+
538
+ .submenu .nav-link:hover {
539
+ color: var(--text-primary);
540
+ background: rgba(59, 130, 246, 0.08);
541
+ border-color: rgba(59, 130, 246, 0.15);
542
+ box-shadow:
543
+ 0 2px 8px rgba(59, 130, 246, 0.1),
544
+ inset 0 1px 0 rgba(255, 255, 255, 0.2);
545
+ }
546
+
547
+ .submenu .nav-link:hover::before {
548
+ opacity: 1;
549
+ transform: translateY(-50%) scale(1.2);
550
+ }
551
+
552
+ .nav-badge {
553
+ background: var(--danger-gradient);
554
+ color: white;
555
+ padding: 0.15rem 0.4rem;
556
+ border-radius: 10px;
557
+ font-size: var(--font-size-xs);
558
+ font-weight: 600;
559
+ margin-inline-end: auto;
560
+ min-inline-size: 1.2rem;
561
+ text-align: center;
562
+ box-shadow:
563
+ 0 2px 4px rgba(239, 68, 68, 0.3),
564
+ inset 0 1px 0 rgba(255, 255, 255, 0.3);
565
+ position: relative;
566
+ }
567
+
568
+ .nav-badge::before {
569
+ content: '';
570
+ position: absolute;
571
+ inset: 1px;
572
+ background: linear-gradient(135deg,
573
+ rgba(255, 255, 255, 0.2) 0%,
574
+ transparent 70%);
575
+ border-radius: inherit;
576
+ pointer-events: none;
577
+ }
578
+
579
+ /* محتوای اصلی */
580
+ .main-content {
581
+ flex: 1;
582
+ margin-inline-end: var(--sidebar-width);
583
+ padding: 1rem;
584
+ min-block-size: 100vh;
585
+ transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
586
+ inline-size: calc(100% - var(--sidebar-width));
587
+ max-inline-size: calc(100% - var(--sidebar-width));
588
+ box-sizing: border-box;
589
+ }
590
+
591
+ .main-content.sidebar-collapsed {
592
+ margin-inline-end: 70px;
593
+ inline-size: calc(100% - 70px);
594
+ max-inline-size: calc(100% - 70px);
595
+ }
596
+
597
+ /* هدر کامپکت */
598
+ .dashboard-header {
599
+ display: flex;
600
+ justify-content: space-between;
601
+ align-items: center;
602
+ margin-block-end: 1.2rem;
603
+ padding: 0.8rem 0;
604
+ }
605
+
606
+ .dashboard-title {
607
+ font-size: var(--font-size-2xl);
608
+ font-weight: 800;
609
+ background: var(--primary-gradient);
610
+ -webkit-background-clip: text;
611
+ -webkit-text-fill-color: transparent;
612
+ display: flex;
613
+ align-items: center;
614
+ gap: 0.6rem;
615
+ position: relative;
616
+ }
617
+
618
+ .dashboard-title::after {
619
+ content: '';
620
+ position: absolute;
621
+ inset-block-end: -0.3rem;
622
+ inset-inline-end: 0;
623
+ inline-size: 2.5rem;
624
+ block-size: 2px;
625
+ background: var(--primary-gradient);
626
+ border-radius: 2px;
627
+ }
628
+
629
+ .title-icon {
630
+ background: var(--primary-gradient);
631
+ -webkit-background-clip: text;
632
+ -webkit-text-fill-color: transparent;
633
+ }
634
+
635
+ .header-actions {
636
+ display: flex;
637
+ align-items: center;
638
+ gap: 0.8rem;
639
+ }
640
+
641
+ .search-container {
642
+ position: relative;
643
+ }
644
+
645
+ .search-input {
646
+ inline-size: 280px;
647
+ padding: 0.6rem 1rem 0.6rem 2.2rem;
648
+ border: none;
649
+ border-radius: 20px;
650
+ background: var(--glass-bg);
651
+ backdrop-filter: blur(10px);
652
+ -webkit-backdrop-filter: blur(10px);
653
+ box-shadow: var(--shadow-sm);
654
+ font-family: inherit;
655
+ font-size: var(--font-size-sm);
656
+ color: var(--text-primary);
657
+ transition: var(--transition-smooth);
658
+ border: 1px solid var(--glass-border);
659
+ }
660
+
661
+ .search-input::placeholder {
662
+ color: var(--text-secondary);
663
+ }
664
+
665
+ .search-input:focus {
666
+ outline: none;
667
+ box-shadow: var(--shadow-glow-primary);
668
+ background: var(--card-bg);
669
+ border-color: rgba(59, 130, 246, 0.3);
670
+ }
671
+
672
+ .search-icon {
673
+ position: absolute;
674
+ inset-inline-end: 0.8rem;
675
+ inset-block-start: 50%;
676
+ transform: translateY(-50%);
677
+ color: var(--text-secondary);
678
+ font-size: 0.9rem;
679
+ }
680
+
681
+ .user-profile {
682
+ display: flex;
683
+ align-items: center;
684
+ gap: 0.6rem;
685
+ padding: 0.4rem 0.8rem;
686
+ background: var(--glass-bg);
687
+ backdrop-filter: blur(10px);
688
+ -webkit-backdrop-filter: blur(10px);
689
+ border-radius: 18px;
690
+ box-shadow: var(--shadow-sm);
691
+ cursor: pointer;
692
+ transition: var(--transition-smooth);
693
+ border: 1px solid var(--glass-border);
694
+ }
695
+
696
+ .user-profile:hover {
697
+ box-shadow: var(--shadow-md);
698
+ transform: translateY(-1px);
699
+ }
700
+
701
+ .user-avatar {
702
+ inline-size: 1.8rem;
703
+ block-size: 1.8rem;
704
+ border-radius: 50%;
705
+ background: var(--primary-gradient);
706
+ display: flex;
707
+ align-items: center;
708
+ justify-content: center;
709
+ color: white;
710
+ font-weight: 600;
711
+ font-size: var(--font-size-sm);
712
+ box-shadow:
713
+ 0 4px 12px rgba(59, 130, 246, 0.3),
714
+ inset 0 1px 0 rgba(255, 255, 255, 0.3),
715
+ inset 0 -1px 0 rgba(0, 0, 0, 0.1);
716
+ position: relative;
717
+ }
718
+
719
+ .user-avatar::before {
720
+ content: '';
721
+ position: absolute;
722
+ inset: 1px;
723
+ background: linear-gradient(135deg,
724
+ rgba(255, 255, 255, 0.2) 0%,
725
+ transparent 50%,
726
+ rgba(0, 0, 0, 0.05) 100%);
727
+ border-radius: inherit;
728
+ pointer-events: none;
729
+ }
730
+
731
+ .user-info {
732
+ display: flex;
733
+ flex-direction: column;
734
+ }
735
+
736
+ .user-name {
737
+ font-weight: 600;
738
+ color: var(--text-primary);
739
+ font-size: var(--font-size-sm);
740
+ }
741
+
742
+ .user-role {
743
+ font-size: var(--font-size-xs);
744
+ color: var(--text-secondary);
745
+ }
746
+
747
+ /* کارت‌های آمار کامپکت */
748
+ .stats-grid {
749
+ display: grid;
750
+ grid-template-columns: repeat(4, 1fr);
751
+ gap: 1rem;
752
+ margin-block-end: 1.2rem;
753
+ }
754
+
755
+ .stat-card {
756
+ background: var(--card-bg);
757
+ backdrop-filter: blur(10px);
758
+ -webkit-backdrop-filter: blur(10px);
759
+ border-radius: var(--border-radius);
760
+ padding: 1.2rem;
761
+ box-shadow:
762
+ 0 4px 20px rgba(0, 0, 0, 0.08),
763
+ 0 2px 8px rgba(0, 0, 0, 0.06),
764
+ 0 1px 3px rgba(0, 0, 0, 0.12),
765
+ inset 0 1px 0 rgba(255, 255, 255, 0.6);
766
+ border: 1px solid rgba(255, 255, 255, 0.3);
767
+ position: relative;
768
+ overflow: hidden;
769
+ transition: var(--transition-smooth);
770
+ min-block-size: 130px;
771
+ }
772
+
773
+ .stat-card::before {
774
+ content: '';
775
+ position: absolute;
776
+ inset-block-start: 0;
777
+ inset-inline-start: 0;
778
+ inset-inline-end: 0;
779
+ block-size: 4px;
780
+ background: var(--primary-gradient);
781
+ }
782
+
783
+ .stat-card::after {
784
+ content: '';
785
+ position: absolute;
786
+ inset-block-start: 0;
787
+ inset-inline-start: 0;
788
+ inset-inline-end: 0;
789
+ inset-block-end: 0;
790
+ background: linear-gradient(135deg,
791
+ rgba(255, 255, 255, 0.1) 0%,
792
+ rgba(255, 255, 255, 0.05) 50%,
793
+ transparent 100%);
794
+ pointer-events: none;
795
+ }
796
+
797
+ .stat-card.primary::before { background: var(--primary-gradient); }
798
+ .stat-card.success::before { background: var(--success-gradient); }
799
+ .stat-card.danger::before { background: var(--danger-gradient); }
800
+ .stat-card.warning::before { background: var(--warning-gradient); }
801
+
802
+ .stat-card:hover {
803
+ transform: translateY(-6px) scale(1.02);
804
+ box-shadow:
805
+ 0 12px 35px rgba(0, 0, 0, 0.15),
806
+ 0 6px 20px rgba(0, 0, 0, 0.1),
807
+ 0 2px 8px rgba(0, 0, 0, 0.12),
808
+ inset 0 1px 0 rgba(255, 255, 255, 0.8);
809
+ }
810
+
811
+ .stat-card.primary:hover {
812
+ box-shadow:
813
+ 0 12px 35px rgba(59, 130, 246, 0.25),
814
+ 0 6px 20px rgba(59, 130, 246, 0.15),
815
+ 0 2px 8px rgba(59, 130, 246, 0.1),
816
+ inset 0 1px 0 rgba(255, 255, 255, 0.8);
817
+ }
818
+ .stat-card.success:hover {
819
+ box-shadow:
820
+ 0 12px 35px rgba(16, 185, 129, 0.25),
821
+ 0 6px 20px rgba(16, 185, 129, 0.15),
822
+ 0 2px 8px rgba(16, 185, 129, 0.1),
823
+ inset 0 1px 0 rgba(255, 255, 255, 0.8);
824
+ }
825
+ .stat-card.danger:hover {
826
+ box-shadow:
827
+ 0 12px 35px rgba(239, 68, 68, 0.25),
828
+ 0 6px 20px rgba(239, 68, 68, 0.15),
829
+ 0 2px 8px rgba(239, 68, 68, 0.1),
830
+ inset 0 1px 0 rgba(255, 255, 255, 0.8);
831
+ }
832
+ .stat-card.warning:hover {
833
+ box-shadow:
834
+ 0 12px 35px rgba(245, 158, 11, 0.25),
835
+ 0 6px 20px rgba(245, 158, 11, 0.15),
836
+ 0 2px 8px rgba(245, 158, 11, 0.1),
837
+ inset 0 1px 0 rgba(255, 255, 255, 0.8);
838
+ }
839
+
840
+ .stat-header {
841
+ display: flex;
842
+ justify-content: space-between;
843
+ align-items: flex-start;
844
+ margin-block-end: 0.8rem;
845
+ position: relative;
846
+ z-index: 1;
847
+ }
848
+
849
+ .stat-icon {
850
+ inline-size: 2.2rem;
851
+ block-size: 2.2rem;
852
+ border-radius: var(--border-radius-sm);
853
+ display: flex;
854
+ align-items: center;
855
+ justify-content: center;
856
+ font-size: 1.1rem;
857
+ box-shadow:
858
+ 0 4px 12px rgba(0, 0, 0, 0.15),
859
+ inset 0 1px 0 rgba(255, 255, 255, 0.3),
860
+ inset 0 -1px 0 rgba(0, 0, 0, 0.1);
861
+ opacity: 0.95;
862
+ transition: var(--transition-smooth);
863
+ position: relative;
864
+ }
865
+
866
+ .stat-icon::before {
867
+ content: '';
868
+ position: absolute;
869
+ inset: 1px;
870
+ background: linear-gradient(135deg,
871
+ rgba(255, 255, 255, 0.2) 0%,
872
+ transparent 50%,
873
+ rgba(0, 0, 0, 0.05) 100%);
874
+ border-radius: inherit;
875
+ pointer-events: none;
876
+ }
877
+
878
+ .stat-card:hover .stat-icon {
879
+ transform: scale(1.08);
880
+ box-shadow:
881
+ 0 6px 16px rgba(0, 0, 0, 0.2),
882
+ inset 0 1px 0 rgba(255, 255, 255, 0.4),
883
+ inset 0 -1px 0 rgba(0, 0, 0, 0.15);
884
+ }
885
+
886
+ .stat-icon.primary { background: var(--primary-gradient); color: white; }
887
+ .stat-icon.success { background: var(--success-gradient); color: white; }
888
+ .stat-icon.danger { background: var(--danger-gradient); color: white; }
889
+ .stat-icon.warning { background: var(--warning-gradient); color: white; }
890
+
891
+ .stat-content {
892
+ flex: 1;
893
+ }
894
+
895
+ .stat-title {
896
+ font-size: var(--font-size-xs);
897
+ color: var(--text-secondary);
898
+ font-weight: 600;
899
+ margin-block-end: 0.3rem;
900
+ line-height: 1.3;
901
+ }
902
+
903
+ .stat-value {
904
+ font-size: var(--font-size-xl);
905
+ font-weight: 800;
906
+ color: var(--text-primary);
907
+ line-height: 1;
908
+ margin-block-end: 0.3rem;
909
+ }
910
+
911
+ .stat-extra {
912
+ font-size: var(--font-size-xs);
913
+ color: var(--text-muted);
914
+ margin-block-end: 0.3rem;
915
+ }
916
+
917
+ .stat-change {
918
+ display: flex;
919
+ align-items: center;
920
+ gap: 0.25rem;
921
+ font-size: var(--font-size-xs);
922
+ font-weight: 700;
923
+ }
924
+
925
+ .stat-change.positive {
926
+ color: #059669;
927
+ }
928
+
929
+ .stat-change.negative {
930
+ color: #dc2626;
931
+ }
932
+
933
+ /* نمودارها */
934
+ .charts-section {
935
+ display: grid;
936
+ grid-template-columns: 2fr 1fr;
937
+ gap: 1.5rem;
938
+ margin-block-end: 1.5rem;
939
+ }
940
+
941
+ .chart-card {
942
+ background: var(--card-bg);
943
+ backdrop-filter: blur(10px);
944
+ -webkit-backdrop-filter: blur(10px);
945
+ border-radius: var(--border-radius);
946
+ padding: 1.5rem;
947
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
948
+ border: 1px solid rgba(255, 255, 255, 0.3);
949
+ transition: var(--transition-smooth);
950
+ position: relative;
951
+ }
952
+
953
+ .chart-card::after {
954
+ content: '';
955
+ position: absolute;
956
+ inset-block-start: 0;
957
+ inset-inline-start: 0;
958
+ inset-inline-end: 0;
959
+ inset-block-end: 0;
960
+ background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 50%, transparent 100%);
961
+ pointer-events: none;
962
+ border-radius: inherit;
963
+ }
964
+
965
+ .chart-card:hover {
966
+ transform: translateY(-4px);
967
+ box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15), 0 6px 20px rgba(0, 0, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8);
968
+ }
969
+
970
+ .chart-header {
971
+ display: flex;
972
+ justify-content: space-between;
973
+ align-items: center;
974
+ margin-block-end: 1.2rem;
975
+ }
976
+
977
+ .chart-title {
978
+ font-size: var(--font-size-lg);
979
+ font-weight: 700;
980
+ color: var(--text-primary);
981
+ }
982
+
983
+ .chart-filters {
984
+ display: flex;
985
+ gap: 0.3rem;
986
+ }
987
+
988
+ .chart-filter {
989
+ padding: 0.3rem 0.8rem;
990
+ border: none;
991
+ border-radius: 12px;
992
+ background: rgba(59, 130, 246, 0.08);
993
+ color: var(--text-secondary);
994
+ font-family: inherit;
995
+ font-size: var(--font-size-xs);
996
+ font-weight: 500;
997
+ cursor: pointer;
998
+ transition: var(--transition-fast);
999
+ }
1000
+
1001
+ .chart-filter:hover {
1002
+ background: rgba(59, 130, 246, 0.12);
1003
+ }
1004
+
1005
+ .chart-filter.active {
1006
+ background: var(--primary-gradient);
1007
+ color: white;
1008
+ box-shadow: var(--shadow-glow-primary);
1009
+ }
1010
+
1011
+ .chart-container {
1012
+ block-size: 280px;
1013
+ position: relative;
1014
+ }
1015
+
1016
+ .chart-placeholder {
1017
+ block-size: 100%;
1018
+ display: flex;
1019
+ align-items: center;
1020
+ justify-content: center;
1021
+ flex-direction: column;
1022
+ color: var(--text-muted);
1023
+ background: rgba(0, 0, 0, 0.02);
1024
+ border-radius: var(--border-radius-sm);
1025
+ border: 2px dashed rgba(0, 0, 0, 0.1);
1026
+ }
1027
+
1028
+ .chart-placeholder i {
1029
+ font-size: 3rem;
1030
+ margin-block-end: 1rem;
1031
+ opacity: 0.3;
1032
+ }
1033
+
1034
+ /* Toast Notifications */
1035
+ .toast-container {
1036
+ position: fixed;
1037
+ inset-block-start: 1rem;
1038
+ inset-inline-start: 1rem;
1039
+ z-index: 10001;
1040
+ display: flex;
1041
+ flex-direction: column;
1042
+ gap: 0.5rem;
1043
+ }
1044
+
1045
+ .toast {
1046
+ background: var(--card-bg);
1047
+ border-radius: var(--border-radius-sm);
1048
+ padding: 1rem 1.5rem;
1049
+ box-shadow: var(--shadow-lg);
1050
+ border-inline-start: 4px solid;
1051
+ display: flex;
1052
+ align-items: center;
1053
+ gap: 0.8rem;
1054
+ min-inline-size: 300px;
1055
+ transform: translateX(-100%);
1056
+ transition: all 0.3s ease;
1057
+ }
1058
+
1059
+ .toast.show {
1060
+ transform: translateX(0);
1061
+ }
1062
+
1063
+ .toast.success {
1064
+ border-inline-start-color: #10b981;
1065
+ }
1066
+
1067
+ .toast.error {
1068
+ border-inline-start-color: #ef4444;
1069
+ }
1070
+
1071
+ .toast.warning {
1072
+ border-inline-start-color: #f59e0b;
1073
+ }
1074
+
1075
+ .toast.info {
1076
+ border-inline-start-color: #3b82f6;
1077
+ }
1078
+
1079
+ .toast-icon {
1080
+ font-size: 1.2rem;
1081
+ }
1082
+
1083
+ .toast.success .toast-icon {
1084
+ color: #10b981;
1085
+ }
1086
+
1087
+ .toast.error .toast-icon {
1088
+ color: #ef4444;
1089
+ }
1090
+
1091
+ .toast.warning .toast-icon {
1092
+ color: #f59e0b;
1093
+ }
1094
+
1095
+ .toast.info .toast-icon {
1096
+ color: #3b82f6;
1097
+ }
1098
+
1099
+ .toast-content {
1100
+ flex: 1;
1101
+ }
1102
+
1103
+ .toast-title {
1104
+ font-weight: 600;
1105
+ font-size: var(--font-size-sm);
1106
+ margin-block-end: 0.2rem;
1107
+ }
1108
+
1109
+ .toast-message {
1110
+ font-size: var(--font-size-xs);
1111
+ color: var(--text-secondary);
1112
+ }
1113
+
1114
+ .recent-activity-list {
1115
+ list-style: none;
1116
+ padding: 0;
1117
+ margin: 0;
1118
+ }
1119
+
1120
+ .activity-item {
1121
+ display: flex;
1122
+ align-items: center;
1123
+ gap: 1rem;
1124
+ padding: 1rem;
1125
+ border-block-end: 1px solid rgba(0, 0, 0, 0.05);
1126
+ transition: all 0.2s ease-in-out;
1127
+ }
1128
+
1129
+ .activity-item:last-child {
1130
+ border-block-end: none;
1131
+ }
1132
+
1133
+ .activity-item:hover {
1134
+ background: rgba(59, 130, 246, 0.05);
1135
+ }
1136
+
1137
+ .activity-icon {
1138
+ inline-size: 2.5rem;
1139
+ block-size: 2.5rem;
1140
+ border-radius: 50%;
1141
+ display: flex;
1142
+ align-items: center;
1143
+ justify-content: center;
1144
+ font-size: 1.2rem;
1145
+ color: white;
1146
+ flex-shrink: 0;
1147
+ box-shadow: var(--shadow-sm);
1148
+ }
1149
+
1150
+ .activity-icon.primary { background: var(--primary-gradient); }
1151
+ .activity-icon.success { background: var(--success-gradient); }
1152
+ .activity-icon.danger { background: var(--danger-gradient); }
1153
+ .activity-icon.warning { background: var(--warning-gradient); }
1154
+
1155
+ .activity-content {
1156
+ flex-grow: 1;
1157
+ display: flex;
1158
+ flex-direction: column;
1159
+ }
1160
+
1161
+ .activity-details {
1162
+ font-size: var(--font-size-sm);
1163
+ font-weight: 500;
1164
+ color: var(--text-primary);
1165
+ }
1166
+
1167
+ .activity-details span {
1168
+ font-weight: 700;
1169
+ }
1170
+
1171
+ .activity-time {
1172
+ font-size: var(--font-size-xs);
1173
+ color: var(--text-muted);
1174
+ margin-block-start: 0.2rem;
1175
+ }
1176
+
1177
+ /* حالت تیره برای سایدبار */
1178
+ body.dark-mode {
1179
+ --body-bg: linear-gradient(135deg, #1f2937 0%, #111827 50%, #0f172a 100%);
1180
+ --text-primary: #f8fafc;
1181
+ --text-secondary: #e2e8f0;
1182
+ --text-muted: #94a3b8;
1183
+ --card-bg: rgba(30, 41, 59, 0.95);
1184
+ --glass-bg: rgba(30, 41, 59, 0.8);
1185
+ --glass-border: rgba(71, 85, 105, 0.2);
1186
+ --sidebar-bg: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
1187
+ }
1188
+
1189
+ body.dark-mode .sidebar {
1190
+ background: linear-gradient(135deg,
1191
+ rgba(30, 41, 59, 0.98) 0%,
1192
+ rgba(17, 24, 39, 0.95) 50%,
1193
+ rgba(15, 23, 42, 0.98) 100%);
1194
+ border-inline-start: 1px solid rgba(59, 130, 246, 0.1);
1195
+ box-shadow:
1196
+ 0 0 0 1px rgba(59, 130, 246, 0.08),
1197
+ -8px 0 32px rgba(59, 130, 246, 0.05),
1198
+ inset 0 1px 0 rgba(255, 255, 255, 0.1);
1199
+ }
1200
+
1201
+ body.dark-mode .sidebar-header {
1202
+ background: linear-gradient(135deg,
1203
+ rgba(59, 130, 246, 0.1) 0%,
1204
+ rgba(16, 185, 129, 0.05) 100%);
1205
+ border-block-end: 1px solid rgba(59, 130, 246, 0.2);
1206
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
1207
+ }
1208
+
1209
+ body.dark-mode .nav-link:hover {
1210
+ background: rgba(59, 130, 246, 0.15);
1211
+ border-color: rgba(59, 130, 246, 0.3);
1212
+ }
1213
+
1214
+ body.dark-mode .nav-link.active::after {
1215
+ box-shadow: 0 0 8px rgba(59, 130, 246, 0.8);
1216
+ }
1217
+
1218
+ body.dark-mode .submenu .nav-link {
1219
+ background: rgba(0, 0, 0, 0.1);
1220
+ border-color: rgba(59, 130, 246, 0.15);
1221
+ }
1222
+
1223
+ body.dark-mode .stat-card,
1224
+ body.dark-mode .chart-card {
1225
+ box-shadow:
1226
+ 0 8px 25px rgba(0, 0, 0, 0.3),
1227
+ 0 4px 12px rgba(0, 0, 0, 0.2),
1228
+ 0 2px 6px rgba(0, 0, 0, 0.25),
1229
+ inset 0 1px 0 rgba(255, 255, 255, 0.1);
1230
+ border: 1px solid rgba(71, 85, 105, 0.3);
1231
+ }
1232
+
1233
+ body.dark-mode .stat-card:hover,
1234
+ body.dark-mode .chart-card:hover {
1235
+ box-shadow:
1236
+ 0 12px 35px rgba(0, 0, 0, 0.4),
1237
+ 0 6px 20px rgba(0, 0, 0, 0.3),
1238
+ 0 3px 10px rgba(0, 0, 0, 0.25),
1239
+ inset 0 1px 0 rgba(255, 255, 255, 0.2);
1240
+ }
1241
+
1242
+ body.dark-mode .search-input {
1243
+ background: var(--glass-bg);
1244
+ border-color: rgba(71, 85, 105, 0.3);
1245
+ }
1246
+
1247
+ body.dark-mode .user-profile {
1248
+ background: var(--glass-bg);
1249
+ border-color: rgba(71, 85, 105, 0.3);
1250
+ }
1251
+
1252
+ body.dark-mode .activity-item:hover {
1253
+ background: rgba(59, 130, 246, 0.1);
1254
+ }
1255
+ </style>
1256
+ </head>
1257
+ <body>
1258
+
1259
+ <div class="dashboard-container">
1260
+ <aside class="sidebar">
1261
+ <div class="sidebar-header">
1262
+ <a href="#" class="logo">
1263
+ <span class="logo-icon"><i class="fa-solid fa-gavel"></i></span>
1264
+ <span class="logo-text">سامانه حقوقی</span>
1265
+ </a>
1266
+ <button class="sidebar-toggle" onclick="toggleSidebar()">
1267
+ <i class="fa-solid fa-chevron-right"></i>
1268
+ </button>
1269
+ </div>
1270
+ <nav class="nav-section">
1271
+ <span class="nav-title">داشبورد</span>
1272
+ <ul class="nav-menu">
1273
+ <li class="nav-item">
1274
+ <a href="#" class="nav-link active" data-tooltip="خانه">
1275
+ <span class="nav-icon"><i class="fa-solid fa-home"></i></span>
1276
+ <span>خانه</span>
1277
+ </a>
1278
+ </li>
1279
+ <li class="nav-item">
1280
+ <a href="#" class="nav-link" data-tooltip="مدیریت پرونده‌ها">
1281
+ <span class="nav-icon"><i class="fa-solid fa-folder-open"></i></span>
1282
+ <span>مدیریت پرونده‌ها</span>
1283
+ </a>
1284
+ </li>
1285
+ <li class="nav-item">
1286
+ <a href="#" class="nav-link" data-tooltip="فعالیت‌های اخیر">
1287
+ <span class="nav-icon"><i class="fa-solid fa-history"></i></span>
1288
+ <span>فعالیت‌های اخیر</span>
1289
+ </a>
1290
+ </li>
1291
+ </ul>
1292
+ </nav>
1293
+ <nav class="nav-section">
1294
+ <span class="nav-title">ابزارها</span>
1295
+ <ul class="nav-menu">
1296
+ <li class="nav-item">
1297
+ <a href="#" class="nav-link" data-tooltip="جستجوی اسناد">
1298
+ <span class="nav-icon"><i class="fa-solid fa-search"></i></span>
1299
+ <span>جستجوی اسناد</span>
1300
+ </a>
1301
+ </li>
1302
+ <li class="nav-item">
1303
+ <a href="#" class="nav-link" data-tooltip="تحلیلگر حقوقی">
1304
+ <span class="nav-icon"><i class="fa-solid fa-chart-line"></i></span>
1305
+ <span>تحلیلگر حقوقی</span>
1306
+ </a>
1307
+ </li>
1308
+ <li class="nav-item">
1309
+ <a href="#" class="nav-link" data-tooltip="تنظیمات">
1310
+ <span class="nav-icon"><i class="fa-solid fa-cog"></i></span>
1311
+ <span>تنظیمات</span>
1312
+ </a>
1313
+ </li>
1314
+ </ul>
1315
+ </nav>
1316
+ </aside>
1317
+
1318
+ <main class="main-content">
1319
+ <header class="dashboard-header">
1320
+ <h1 class="dashboard-title">
1321
+ <i class="title-icon fa-solid fa-tachometer-alt"></i>
1322
+ داشبورد مدیریتی
1323
+ </h1>
1324
+ <div class="header-actions">
1325
+ <div class="search-container">
1326
+ <input type="text" class="search-input" placeholder="جستجو...">
1327
+ <i class="search-icon fa-solid fa-search"></i>
1328
+ </div>
1329
+ <div class="user-profile">
1330
+ <span class="user-avatar">ج.م</span>
1331
+ <div class="user-info">
1332
+ <span class="user-name">جعفر محبی</span>
1333
+ <span class="user-role">مدیر سیستم</span>
1334
+ </div>
1335
+ </div>
1336
+ </div>
1337
+ </header>
1338
+
1339
+ <section class="stats-grid">
1340
+ <div class="stat-card primary">
1341
+ <div class="stat-header">
1342
+ <div class="stat-content">
1343
+ <h3 class="stat-title">پرونده‌های فعال</h3>
1344
+ <div class="stat-value">124</div>
1345
+ <div class="stat-extra">این ماه</div>
1346
+ </div>
1347
+ <div class="stat-icon primary"><i class="fa-solid fa-balance-scale"></i></div>
1348
+ </div>
1349
+ <div class="stat-change positive"><i class="fa-solid fa-caret-up"></i> 12% نسبت به ماه قبل</div>
1350
+ </div>
1351
+
1352
+ <div class="stat-card success">
1353
+ <div class="stat-header">
1354
+ <div class="stat-content">
1355
+ <h3 class="stat-title">قراردادهای تکمیل شده</h3>
1356
+ <div class="stat-value">87</div>
1357
+ <div class="stat-extra">این ماه</div>
1358
+ </div>
1359
+ <div class="stat-icon success"><i class="fa-solid fa-file-contract"></i></div>
1360
+ </div>
1361
+ <div class="stat-change positive"><i class="fa-solid fa-caret-up"></i> 5% نسبت به ماه قبل</div>
1362
+ </div>
1363
+
1364
+ <div class="stat-card danger">
1365
+ <div class="stat-header">
1366
+ <div class="stat-content">
1367
+ <h3 class="stat-title">مهلت‌های نزدیک</h3>
1368
+ <div class="stat-value">6</div>
1369
+ <div class="stat-extra">در 7 روز آینده</div>
1370
+ </div>
1371
+ <div class="stat-icon danger"><i class="fa-solid fa-calendar-alt"></i></div>
1372
+ </div>
1373
+ <div class="stat-change negative"><i class="fa-solid fa-caret-down"></i> 3% نسبت به ماه قبل</div>
1374
+ </div>
1375
+
1376
+ <div class="stat-card warning">
1377
+ <div class="stat-header">
1378
+ <div class="stat-content">
1379
+ <h3 class="stat-title">اسناد در انتظار بازبینی</h3>
1380
+ <div class="stat-value">18</div>
1381
+ <div class="stat-extra">جمع اسناد</div>
1382
+ </div>
1383
+ <div class="stat-icon warning"><i class="fa-solid fa-hourglass-half"></i></div>
1384
+ </div>
1385
+ <div class="stat-change positive"><i class="fa-solid fa-caret-up"></i> 8% نسبت به ماه قبل</div>
1386
+ </div>
1387
+ </section>
1388
+
1389
+ <section class="recent-activity-section">
1390
+ <div class="card-large chart-card">
1391
+ <div class="chart-header">
1392
+ <h2 class="chart-title">فعالیت‌های اخیر</h2>
1393
+ <div class="chart-filters">
1394
+ <a href="#" class="chart-filter active">امروز</a>
1395
+ <a href="#" class="chart-filter">این هفته</a>
1396
+ <a href="#" class="chart-filter">این ماه</a>
1397
+ </div>
1398
+ </div>
1399
+ <div class="card-body">
1400
+ <ul class="recent-activity-list">
1401
+ <li class="activity-item">
1402
+ <div class="activity-icon success"><i class="fa-solid fa-plus"></i></div>
1403
+ <div class="activity-content">
1404
+ <div class="activity-details"><span>جعفر محبی</span> یک پرونده جدید به نام "شرکت الف" اضافه کرد.</div>
1405
+ <div class="activity-time">5 دقیقه پیش</div>
1406
+ </div>
1407
+ </li>
1408
+ <li class="activity-item">
1409
+ <div class="activity-icon primary"><i class="fa-solid fa-edit"></i></div>
1410
+ <div class="activity-content">
1411
+ <div class="activity-details"><span>علی محمدی</span> وضعیت پرونده "دعوای حقوقی" را به "در حال رسیدگی" تغییر داد.</div>
1412
+ <div class="activity-time">2 ساعت پیش</div>
1413
+ </div>
1414
+ </li>
1415
+ <li class="activity-item">
1416
+ <div class="activity-icon danger"><i class="fa-solid fa-trash"></i></div>
1417
+ <div class="activity-content">
1418
+ <div class="activity-details"><span>فاطمه احمدی</span> یک سند از پرونده "قرارداد فروش" را حذف کرد.</div>
1419
+ <div class="activity-time">دیروز، ساعت 14:30</div>
1420
+ </div>
1421
+ </li>
1422
+ <li class="activity-item">
1423
+ <div class="activity-icon warning"><i class="fa-solid fa-upload"></i></div>
1424
+ <div class="activity-content">
1425
+ <div class="activity-details"><span>جعفر محبی</span> یک سند جدید را در پرونده "مذاکرات" بارگذاری کرد.</div>
1426
+ <div class="activity-time">2 روز پیش</div>
1427
+ </div>
1428
+ </li>
1429
+ </ul>
1430
+ </div>
1431
+ </div>
1432
+ </section>
1433
+ </main>
1434
+ </div>
1435
+
1436
+ <div class="toast-container"></div>
1437
+ <script>
1438
+ function toggleSidebar() {
1439
+ const sidebar = document.querySelector('.sidebar');
1440
+ const mainContent = document.querySelector('.main-content');
1441
+ const toggleButtonIcon = document.querySelector('.sidebar-toggle i');
1442
+ sidebar.classList.toggle('collapsed');
1443
+ mainContent.classList.toggle('sidebar-collapsed');
1444
+ if (sidebar.classList.contains('collapsed')) {
1445
+ toggleButtonIcon.classList.remove('fa-chevron-right');
1446
+ toggleButtonIcon.classList.add('fa-chevron-left');
1447
+ } else {
1448
+ toggleButtonIcon.classList.remove('fa-chevron-left');
1449
+ toggleButtonIcon.classList.add('fa-chevron-right');
1450
+ }
1451
+ }
1452
+ </script>
1453
+ </body>
1454
+ </html>