source: lan-frontend/src/index.css@ 640ed89

Last change on this file since 640ed89 was 640ed89, checked in by istevanoska <ilinastevanoska@…>, 7 months ago

Initial commit
  • Property mode set to 100644
File size: 27.6 KB
RevLine 
[640ed89]1/* App.css - Modern White Theme со Акцентни Бои */
2@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
3
4:root {
5 --primary-color: #2563eb; /* Син акцент */
6 --secondary-color: #7c3aed; /* Виолетов акцент */
7 --accent-green: #10b981; /* Зелен акцент */
8 --accent-orange: #f59e0b; /* Портокалов акцент */
9 --accent-red: #ef4444; /* Црвен акцент */
10 --text-primary: #1f2937; /* Темно сиво за текст */
11 --text-secondary: #6b7280; /* Средно сиво */
12 --text-light: #9ca3af; /* Светло сиво */
13 --bg-primary: #ffffff; /* Основна позадина */
14 --bg-secondary: #f9fafb; /* Секциска позадина */
15 --bg-tertiary: #f3f4f6; /* Позадина на картички */
16 --border-color: #e5e7eb; /* Граница */
17 --border-hover: #d1d5db; /* Граница при hover */
18 --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
19 --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
20 --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
21 --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
22}
23
24/* Dark mode ако сакаш опција */
25@media (prefers-color-scheme: dark) {
26 :root {
27 --primary-color: #3b82f6;
28 --secondary-color: #8b5cf6;
29 --accent-green: #10b981;
30 --accent-orange: #f59e0b;
31 --accent-red: #ef4444;
32 --text-primary: #f9fafb;
33 --text-secondary: #d1d5db;
34 --text-light: #9ca3af;
35 --bg-primary: #111827;
36 --bg-secondary: #1f2937;
37 --bg-tertiary: #374151;
38 --border-color: #4b5563;
39 --border-hover: #6b7280;
40 }
41}
42
43* {
44 margin: 0;
45 padding: 0;
46 box-sizing: border-box;
47}
48
49body {
50 font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
51 background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
52 color: var(--text-primary);
53 line-height: 1.6;
54}
55
56/* Main Layout */
57.app-container {
58 display: flex;
59 min-height: 100vh;
60 background: var(--bg-secondary);
61}
62
63.main-content {
64 flex: 1;
65 padding: 24px;
66 overflow-y: auto;
67}
68
69/* Top Navigation - Поблиску до AI Assist */
70.top-nav {
71 display: flex;
72 justify-content: space-between;
73 align-items: center;
74 padding: 16px 24px;
75 background: var(--bg-primary);
76 border-radius: 16px;
77 box-shadow: var(--shadow-md);
78 margin-bottom: 24px;
79 border: 1px solid var(--border-color);
80}
81
82.logo {
83 display: flex;
84 align-items: center;
85 gap: 12px;
86}
87
88.logo-icon {
89 font-size: 28px;
90 color: var(--primary-color);
91}
92
93.logo-text h1 {
94 font-size: 20px;
95 font-weight: 700;
96 background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
97 -webkit-background-clip: text;
98 -webkit-text-fill-color: transparent;
99 margin-bottom: 2px;
100}
101
102.logo-subtitle {
103 font-size: 11px;
104 color: var(--text-light);
105 letter-spacing: 0.5px;
106 text-transform: uppercase;
107 font-weight: 500;
108}
109
110.search-bar {
111 position: relative;
112 width: 320px;
113}
114
115.search-bar input {
116 width: 100%;
117 padding: 10px 16px 10px 40px;
118 background: var(--bg-secondary);
119 border: 1px solid var(--border-color);
120 border-radius: 12px;
121 color: var(--text-primary);
122 font-size: 14px;
123 transition: all 0.2s;
124}
125
126.search-bar input:focus {
127 outline: none;
128 border-color: var(--primary-color);
129 box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
130}
131
132.search-icon {
133 position: absolute;
134 left: 12px;
135 top: 50%;
136 transform: translateY(-50%);
137 color: var(--text-light);
138}
139
140.nav-right {
141 display: flex;
142 align-items: center;
143 gap: 12px;
144}
145
146/* AI Assistant Button - Поблиску */
147.ai-toggle-btn {
148 display: flex;
149 align-items: center;
150 gap: 8px;
151 padding: 10px 20px;
152 background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
153 color: white;
154 border: none;
155 border-radius: 12px;
156 cursor: pointer;
157 font-weight: 600;
158 font-size: 14px;
159 transition: all 0.3s;
160 box-shadow: var(--shadow-md);
161}
162
163.ai-toggle-btn:hover {
164 transform: translateY(-1px);
165 box-shadow: var(--shadow-lg);
166}
167
168.ai-toggle-btn.active {
169 box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
170}
171
172.refresh-btn {
173 display: flex;
174 align-items: center;
175 gap: 8px;
176 padding: 10px 16px;
177 background: var(--bg-primary);
178 color: var(--text-primary);
179 border: 1px solid var(--border-color);
180 border-radius: 12px;
181 cursor: pointer;
182 font-weight: 500;
183 font-size: 14px;
184 transition: all 0.2s;
185}
186
187.refresh-btn:hover {
188 background: var(--bg-secondary);
189 border-color: var(--border-hover);
190}
191
192.refresh-icon {
193 font-size: 14px;
194}
195
196.profile-avatar {
197 width: 36px;
198 height: 36px;
199 background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
200 border-radius: 50%;
201 display: flex;
202 align-items: center;
203 justify-content: center;
204 color: white;
205 font-weight: bold;
206 font-size: 14px;
207}
208
209/* Statistics Grid со Графикони */
210.stats-overview {
211 margin-bottom: 32px;
212}
213
214.stats-header {
215 display: flex;
216 justify-content: space-between;
217 align-items: center;
218 margin-bottom: 20px;
219}
220
221.stats-header h2 {
222 font-size: 18px;
223 font-weight: 600;
224 color: var(--text-primary);
225}
226
227.stats-time {
228 color: var(--text-light);
229 font-size: 13px;
230 background: var(--bg-tertiary);
231 padding: 6px 12px;
232 border-radius: 20px;
233}
234
235.stats-grid {
236 display: grid;
237 grid-template-columns: repeat(3, 1fr) 2fr;
238 gap: 20px;
239 margin-bottom: 24px;
240}
241
242.stat-card {
243 background: var(--bg-primary);
244 border-radius: 16px;
245 padding: 24px;
246 display: flex;
247 justify-content: space-between;
248 align-items: center;
249 border: 1px solid var(--border-color);
250 transition: all 0.3s;
251 cursor: pointer;
252}
253
254.stat-card:hover {
255 transform: translateY(-2px);
256 border-color: var(--primary-color);
257 box-shadow: var(--shadow-lg);
258}
259
260.stat-card.online {
261 border-color: var(--accent-green);
262}
263
264.stat-card.idle {
265 border-color: var(--accent-orange);
266}
267
268.stat-card.offline {
269 border-color: var(--accent-red);
270}
271
272.stat-main {
273 display: flex;
274 flex-direction: column;
275}
276
277.stat-number {
278 font-size: 32px;
279 font-weight: 700;
280 margin-bottom: 4px;
281 color: var(--text-primary);
282}
283
284.stat-label {
285 color: var(--text-secondary);
286 font-size: 13px;
287 font-weight: 500;
288 text-transform: uppercase;
289 letter-spacing: 0.5px;
290}
291
292.stat-trend {
293 display: flex;
294 align-items: center;
295 gap: 4px;
296 color: var(--accent-green);
297 font-size: 13px;
298 font-weight: 600;
299}
300
301.trend-up {
302 font-size: 12px;
303}
304
305.stat-badge {
306 background: var(--secondary-color);
307 color: white;
308 padding: 4px 10px;
309 border-radius: 20px;
310 font-size: 11px;
311 font-weight: 600;
312}
313
314/* Interactive Charts Section */
315.charts-section {
316 margin-top: 32px;
317 margin-bottom: 32px;
318}
319
320.charts-header {
321 display: flex;
322 justify-content: space-between;
323 align-items: center;
324 margin-bottom: 20px;
325}
326
327.charts-header h3 {
328 font-size: 16px;
329 font-weight: 600;
330 color: var(--text-primary);
331}
332
333.charts-grid {
334 display: grid;
335 grid-template-columns: 2fr 1fr;
336 gap: 20px;
337}
338
339.chart-container {
340 background: var(--bg-primary);
341 border-radius: 16px;
342 padding: 24px;
343 border: 1px solid var(--border-color);
344}
345
346.chart-container h4 {
347 font-size: 14px;
348 font-weight: 600;
349 margin-bottom: 16px;
350 color: var(--text-primary);
351}
352
353.chart-wrapper {
354 height: 200px;
355 position: relative;
356}
357
358/* Mini charts во sidebar */
359.mini-charts {
360 display: flex;
361 flex-direction: column;
362 gap: 16px;
363}
364
365.mini-chart {
366 background: var(--bg-primary);
367 border-radius: 12px;
368 padding: 16px;
369 border: 1px solid var(--border-color);
370}
371
372.mini-chart h5 {
373 font-size: 13px;
374 font-weight: 600;
375 margin-bottom: 12px;
376 color: var(--text-secondary);
377}
378
379.mini-chart .chart-wrapper {
380 height: 60px;
381}
382
383/* Dashboard Grid */
384.dashboard-grid {
385 display: grid;
386 grid-template-columns: 280px 1fr;
387 gap: 24px;
388}
389
390/* Filter Sidebar */
391.filter-sidebar {
392 background: var(--bg-primary);
393 border-radius: 16px;
394 padding: 20px;
395 border: 1px solid var(--border-color);
396 height: fit-content;
397 position: sticky;
398 top: 24px;
399}
400
401.filter-section {
402 margin-bottom: 24px;
403}
404
405.filter-section h3 {
406 font-size: 14px;
407 font-weight: 600;
408 color: var(--text-primary);
409 margin-bottom: 16px;
410 text-transform: uppercase;
411 letter-spacing: 0.5px;
412}
413
414.filter-group {
415 margin-bottom: 20px;
416}
417
418.filter-group label {
419 display: block;
420 margin-bottom: 8px;
421 color: var(--text-secondary);
422 font-size: 13px;
423 font-weight: 500;
424}
425
426.filter-tags {
427 display: flex;
428 flex-wrap: wrap;
429 gap: 8px;
430}
431
432.filter-tag {
433 padding: 6px 12px;
434 background: var(--bg-secondary);
435 border: 1px solid var(--border-color);
436 border-radius: 8px;
437 color: var(--text-secondary);
438 font-size: 13px;
439 cursor: pointer;
440 transition: all 0.2s;
441}
442
443.filter-tag:hover {
444 background: var(--bg-tertiary);
445}
446
447.filter-tag.active {
448 background: var(--primary-color);
449 color: white;
450 border-color: var(--primary-color);
451}
452
453.filter-select {
454 width: 100%;
455 padding: 10px;
456 background: var(--bg-primary);
457 border: 1px solid var(--border-color);
458 border-radius: 8px;
459 color: var(--text-primary);
460 font-size: 14px;
461 cursor: pointer;
462}
463
464.filter-select:focus {
465 outline: none;
466 border-color: var(--primary-color);
467}
468
469.range-slider {
470 width: 100%;
471 height: 6px;
472 background: var(--bg-tertiary);
473 border-radius: 3px;
474 outline: none;
475 -webkit-appearance: none;
476}
477
478.range-slider::-webkit-slider-thumb {
479 -webkit-appearance: none;
480 width: 18px;
481 height: 18px;
482 background: var(--primary-color);
483 border-radius: 50%;
484 cursor: pointer;
485 border: 3px solid white;
486 box-shadow: var(--shadow-sm);
487}
488
489.reset-filters-btn {
490 width: 100%;
491 padding: 12px;
492 background: var(--bg-secondary);
493 color: var(--text-primary);
494 border: 1px solid var(--border-color);
495 border-radius: 12px;
496 cursor: pointer;
497 font-weight: 600;
498 font-size: 14px;
499 transition: all 0.2s;
500}
501
502.reset-filters-btn:hover {
503 background: var(--bg-tertiary);
504}
505
506.action-btn {
507 width: 100%;
508 padding: 12px;
509 background: transparent;
510 border: 1px solid var(--border-color);
511 border-radius: 12px;
512 color: var(--text-primary);
513 cursor: pointer;
514 display: flex;
515 align-items: center;
516 gap: 10px;
517 margin-bottom: 8px;
518 font-weight: 500;
519 transition: all 0.2s;
520}
521
522.action-btn:hover {
523 background: var(--bg-secondary);
524 border-color: var(--border-hover);
525}
526
527.action-icon {
528 font-size: 16px;
529}
530
531/* Content Area */
532.content-area {
533 background: var(--bg-primary);
534 border-radius: 16px;
535 padding: 24px;
536 border: 1px solid var(--border-color);
537}
538
539.content-header {
540 display: flex;
541 justify-content: space-between;
542 align-items: center;
543 margin-bottom: 24px;
544}
545
546.content-header h2 {
547 font-size: 18px;
548 font-weight: 600;
549 color: var(--text-primary);
550 margin: 0;
551}
552
553.content-subtitle {
554 color: var(--text-light);
555 font-size: 13px;
556 margin-top: 4px;
557}
558
559.sort-select {
560 padding: 8px 12px;
561 background: var(--bg-primary);
562 border: 1px solid var(--border-color);
563 border-radius: 8px;
564 color: var(--text-primary);
565 font-size: 14px;
566 cursor: pointer;
567}
568
569.sort-select:focus {
570 outline: none;
571 border-color: var(--primary-color);
572}
573
574/* Devices Grid */
575.devices-grid {
576 display: grid;
577 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
578 gap: 20px;
579 margin-bottom: 32px;
580}
581
582.device-card {
583 background: var(--bg-primary);
584 border-radius: 16px;
585 padding: 20px;
586 border: 1px solid var(--border-color);
587 cursor: pointer;
588 transition: all 0.3s;
589}
590
591.device-card:hover {
592 border-color: var(--primary-color);
593 transform: translateY(-2px);
594 box-shadow: var(--shadow-lg);
595}
596
597.device-card.online {
598 border-left: 4px solid var(--accent-green);
599}
600
601.device-card.idle {
602 border-left: 4px solid var(--accent-orange);
603}
604
605.device-card.offline {
606 border-left: 4px solid var(--accent-red);
607}
608
609.device-header {
610 display: flex;
611 justify-content: space-between;
612 align-items: flex-start;
613 margin-bottom: 16px;
614}
615
616.device-title {
617 display: flex;
618 align-items: center;
619 gap: 12px;
620}
621
622.device-avatar {
623 width: 40px;
624 height: 40px;
625 background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary));
626 border-radius: 12px;
627 display: flex;
628 align-items: center;
629 justify-content: center;
630 font-size: 20px;
631 color: var(--text-primary);
632}
633
634.device-title h3 {
635 margin: 0;
636 font-size: 15px;
637 font-weight: 600;
638 color: var(--text-primary);
639}
640
641.device-user {
642 margin: 4px 0 0 0;
643 color: var(--text-secondary);
644 font-size: 13px;
645}
646
647.status-indicator {
648 display: flex;
649 align-items: center;
650 gap: 6px;
651 font-size: 12px;
652 padding: 4px 10px;
653 background: var(--bg-secondary);
654 border-radius: 20px;
655 font-weight: 500;
656}
657
658.status-dot {
659 width: 8px;
660 height: 8px;
661 border-radius: 50%;
662}
663
664.status-indicator.online .status-dot {
665 background: var(--accent-green);
666}
667
668.status-indicator.idle .status-dot {
669 background: var(--accent-orange);
670}
671
672.status-indicator.offline .status-dot {
673 background: var(--accent-red);
674}
675
676.device-info {
677 margin-bottom: 20px;
678}
679
680.info-row {
681 display: flex;
682 justify-content: space-between;
683 align-items: center;
684 margin-bottom: 8px;
685 font-size: 13px;
686}
687
688.info-label {
689 color: var(--text-secondary);
690}
691
692.info-value {
693 color: var(--text-primary);
694 font-weight: 500;
695}
696
697.device-metrics {
698 margin-bottom: 20px;
699}
700
701.metric {
702 margin-bottom: 16px;
703}
704
705.metric-header {
706 display: flex;
707 justify-content: space-between;
708 margin-bottom: 8px;
709 font-size: 13px;
710}
711
712.metric-value {
713 color: var(--primary-color);
714 font-weight: 600;
715}
716
717.progress-bar {
718 height: 6px;
719 background: var(--bg-tertiary);
720 border-radius: 3px;
721 overflow: hidden;
722}
723
724.progress-fill {
725 height: 100%;
726 border-radius: 3px;
727}
728
729.progress-fill.cpu {
730 background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
731}
732
733.progress-fill.memory {
734 background: linear-gradient(90deg, var(--accent-green), var(--accent-orange));
735}
736
737.device-footer {
738 display: flex;
739 justify-content: space-between;
740 align-items: center;
741 padding-top: 16px;
742 border-top: 1px solid var(--border-color);
743 font-size: 12px;
744}
745
746.sysmon-badge {
747 display: flex;
748 align-items: center;
749 gap: 6px;
750 padding: 4px 10px;
751 background: rgba(139, 92, 246, 0.1);
752 color: var(--secondary-color);
753 border-radius: 20px;
754 font-size: 11px;
755 font-weight: 600;
756}
757
758/* AI Assistant Sidebar - ПРВО ВО СРЕДИНА */
759.ai-sidebar {
760 position: fixed;
761 top: 100px;
762 right: 24px;
763 width: 380px;
764 height: calc(100vh - 140px);
765 background: var(--bg-primary);
766 border-radius: 20px;
767 border: 1px solid var(--border-color);
768 box-shadow: var(--shadow-xl);
769 display: flex;
770 flex-direction: column;
771 z-index: 1000;
772 overflow: hidden;
773 transition: all 0.3s ease;
774 transform: translateX(400px);
775}
776
777.ai-sidebar.open {
778 transform: translateX(0);
779}
780
781.ai-header {
782 display: flex;
783 justify-content: space-between;
784 align-items: center;
785 padding: 20px;
786 border-bottom: 1px solid var(--border-color);
787 background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
788}
789
790.ai-title {
791 display: flex;
792 align-items: center;
793 gap: 12px;
794}
795
796.ai-avatar {
797 font-size: 24px;
798 background: white;
799 width: 40px;
800 height: 40px;
801 border-radius: 12px;
802 display: flex;
803 align-items: center;
804 justify-content: center;
805}
806
807.ai-title h3 {
808 margin: 0;
809 font-size: 16px;
810 font-weight: 600;
811 color: white;
812}
813
814.ai-subtitle {
815 color: rgba(255, 255, 255, 0.8);
816 font-size: 11px;
817 margin-top: 2px;
818}
819
820.close-ai {
821 background: rgba(255, 255, 255, 0.1);
822 border: none;
823 color: white;
824 font-size: 18px;
825 cursor: pointer;
826 padding: 8px;
827 border-radius: 10px;
828 width: 36px;
829 height: 36px;
830 display: flex;
831 align-items: center;
832 justify-content: center;
833 transition: all 0.2s;
834}
835
836.close-ai:hover {
837 background: rgba(255, 255, 255, 0.2);
838}
839
840.ai-content {
841 flex: 1;
842 display: flex;
843 flex-direction: column;
844 overflow: hidden;
845 padding: 0;
846}
847
848.chat-container {
849 flex: 1;
850 display: flex;
851 flex-direction: column;
852 height: 100%;
853}
854
855.chat-history {
856 flex: 1;
857 overflow-y: auto;
858 padding: 20px;
859 display: flex;
860 flex-direction: column;
861 gap: 16px;
862}
863
864/* Chat Input Area - ВИСОКО ГОРЕ */
865.chat-input-area {
866 padding: 20px;
867 border-top: 1px solid var(--border-color);
868 background: var(--bg-primary);
869}
870
871.chat-select {
872 width: 100%;
873 padding: 10px 12px;
874 background: var(--bg-primary);
875 border: 1px solid var(--border-color);
876 border-radius: 12px;
877 color: var(--text-primary);
878 font-size: 14px;
879 margin-bottom: 12px;
880 cursor: pointer;
881 transition: all 0.2s;
882}
883
884.chat-select:focus {
885 outline: none;
886 border-color: var(--primary-color);
887}
888
889.input-wrapper {
890 display: flex;
891 gap: 12px;
892 align-items: flex-end;
893}
894
895.chat-input {
896 flex: 1;
897 padding: 12px 16px;
898 background: var(--bg-secondary);
899 border: 1px solid var(--border-color);
900 border-radius: 12px;
901 color: var(--text-primary);
902 font-size: 14px;
903 resize: none;
904 min-height: 44px;
905 max-height: 120px;
906 line-height: 1.5;
907 transition: all 0.2s;
908}
909
910.chat-input:focus {
911 outline: none;
912 border-color: var(--primary-color);
913 box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
914}
915
916.send-btn {
917 width: 44px;
918 height: 44px;
919 background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
920 border: none;
921 border-radius: 12px;
922 color: white;
923 cursor: pointer;
924 font-size: 16px;
925 display: flex;
926 align-items: center;
927 justify-content: center;
928 flex-shrink: 0;
929 transition: all 0.2s;
930}
931
932.send-btn:hover:not(:disabled) {
933 transform: translateY(-1px);
934 box-shadow: var(--shadow-md);
935}
936
937.send-btn:disabled {
938 opacity: 0.5;
939 cursor: not-allowed;
940}
941
942/* Chat Messages */
943.welcome-message {
944 background: var(--bg-secondary);
945 border-radius: 16px;
946 padding: 20px;
947 margin-bottom: 16px;
948 border: 1px solid var(--border-color);
949}
950
951.welcome-avatar {
952 font-size: 32px;
953 text-align: center;
954 margin-bottom: 12px;
955}
956
957.welcome-content h4 {
958 margin: 0 0 8px 0;
959 font-size: 15px;
960 font-weight: 600;
961 color: var(--text-primary);
962}
963
964.welcome-content p {
965 color: var(--text-secondary);
966 font-size: 13px;
967 line-height: 1.5;
968 margin-bottom: 16px;
969}
970
971.welcome-questions {
972 display: flex;
973 flex-direction: column;
974 gap: 8px;
975}
976
977.quick-question {
978 text-align: left;
979 padding: 10px 12px;
980 background: var(--bg-primary);
981 border: 1px solid var(--border-color);
982 border-radius: 10px;
983 color: var(--text-primary);
984 font-size: 13px;
985 cursor: pointer;
986 transition: all 0.2s;
987}
988
989.quick-question:hover {
990 background: var(--bg-tertiary);
991 border-color: var(--border-hover);
992}
993
994.chat-message {
995 display: flex;
996 gap: 12px;
997 max-width: 90%;
998 animation: fadeIn 0.3s ease;
999}
1000
1001@keyframes fadeIn {
1002 from {
1003 opacity: 0;
1004 transform: translateY(10px);
1005 }
1006 to {
1007 opacity: 1;
1008 transform: translateY(0);
1009 }
1010}
1011
1012.chat-message.question {
1013 margin-left: auto;
1014 flex-direction: row-reverse;
1015}
1016
1017.message-avatar {
1018 width: 32px;
1019 height: 32px;
1020 border-radius: 10px;
1021 background: var(--bg-tertiary);
1022 display: flex;
1023 align-items: center;
1024 justify-content: center;
1025 font-size: 14px;
1026 flex-shrink: 0;
1027}
1028
1029.chat-message.question .message-avatar {
1030 background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
1031 color: white;
1032}
1033
1034.message-content {
1035 flex: 1;
1036 display: flex;
1037 flex-direction: column;
1038}
1039
1040.chat-message.question .message-content {
1041 align-items: flex-end;
1042}
1043
1044.message-header {
1045 display: flex;
1046 gap: 8px;
1047 margin-bottom: 6px;
1048 font-size: 12px;
1049}
1050
1051.message-sender {
1052 font-weight: 600;
1053 color: var(--text-primary);
1054}
1055
1056.message-context {
1057 color: var(--primary-color);
1058 font-weight: 500;
1059}
1060
1061.message-text {
1062 background: var(--bg-secondary);
1063 padding: 12px 16px;
1064 border-radius: 16px;
1065 font-size: 14px;
1066 line-height: 1.5;
1067 word-wrap: break-word;
1068 border: 1px solid transparent;
1069}
1070
1071.chat-message.question .message-text {
1072 background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
1073 color: white;
1074 border-radius: 16px 4px 16px 16px;
1075}
1076
1077.chat-message.answer .message-text {
1078 background: var(--bg-tertiary);
1079 border-radius: 4px 16px 16px 16px;
1080 border: 1px solid var(--border-color);
1081}
1082
1083.message-time {
1084 font-size: 11px;
1085 color: var(--text-light);
1086 margin-top: 4px;
1087}
1088
1089.typing-indicator {
1090 display: flex;
1091 gap: 4px;
1092 padding: 12px 0;
1093}
1094
1095.typing-indicator div {
1096 width: 8px;
1097 height: 8px;
1098 background: var(--text-light);
1099 border-radius: 50%;
1100 animation: typing 1.4s infinite;
1101}
1102
1103.typing-indicator div:nth-child(2) {
1104 animation-delay: 0.2s;
1105}
1106
1107.typing-indicator div:nth-child(3) {
1108 animation-delay: 0.4s;
1109}
1110
1111@keyframes typing {
1112 0%, 60%, 100% {
1113 transform: translateY(0);
1114 }
1115 30% {
1116 transform: translateY(-4px);
1117 }
1118}
1119
1120/* Modal Styling */
1121.modal-overlay {
1122 position: fixed;
1123 top: 0;
1124 left: 0;
1125 right: 0;
1126 bottom: 0;
1127 background: rgba(0, 0, 0, 0.8);
1128 display: flex;
1129 align-items: center;
1130 justify-content: center;
1131 z-index: 2000;
1132 padding: 20px;
1133 backdrop-filter: blur(4px);
1134}
1135
1136.modal {
1137 background: var(--bg-primary);
1138 border-radius: 20px;
1139 border: 1px solid var(--border-color);
1140 width: 100%;
1141 max-width: 1200px;
1142 max-height: 90vh;
1143 display: flex;
1144 flex-direction: column;
1145 overflow: hidden;
1146 box-shadow: var(--shadow-xl);
1147}
1148
1149.modal-header {
1150 display: flex;
1151 justify-content: space-between;
1152 align-items: center;
1153 padding: 20px 24px;
1154 border-bottom: 1px solid var(--border-color);
1155 background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
1156 color: white;
1157}
1158
1159.modal-title h2 {
1160 margin: 0;
1161 font-size: 20px;
1162 font-weight: 600;
1163 color: white;
1164}
1165
1166.modal-subtitle {
1167 display: flex;
1168 gap: 8px;
1169 margin-top: 8px;
1170 flex-wrap: wrap;
1171}
1172
1173.ip-badge,
1174.os-badge,
1175.status-badge {
1176 padding: 4px 10px;
1177 background: rgba(255, 255, 255, 0.2);
1178 border-radius: 20px;
1179 font-size: 12px;
1180 font-weight: 500;
1181 color: white;
1182}
1183
1184.status-badge.online {
1185 background: rgba(16, 185, 129, 0.3);
1186}
1187
1188.status-badge.idle {
1189 background: rgba(245, 158, 11, 0.3);
1190}
1191
1192.status-badge.offline {
1193 background: rgba(239, 68, 68, 0.3);
1194}
1195
1196.modal-actions {
1197 display: flex;
1198 gap: 12px;
1199 align-items: center;
1200}
1201
1202.modal-btn {
1203 display: flex;
1204 align-items: center;
1205 gap: 8px;
1206 padding: 10px 16px;
1207 background: rgba(255, 255, 255, 0.1);
1208 border: 1px solid rgba(255, 255, 255, 0.2);
1209 border-radius: 10px;
1210 color: white;
1211 cursor: pointer;
1212 font-size: 14px;
1213 transition: all 0.2s;
1214 backdrop-filter: blur(10px);
1215}
1216
1217.modal-btn:hover {
1218 background: rgba(255, 255, 255, 0.2);
1219}
1220
1221.modal-close {
1222 background: none;
1223 border: none;
1224 color: white;
1225 font-size: 20px;
1226 cursor: pointer;
1227 padding: 8px;
1228 border-radius: 10px;
1229 width: 36px;
1230 height: 36px;
1231 display: flex;
1232 align-items: center;
1233 justify-content: center;
1234 transition: all 0.2s;
1235}
1236
1237.modal-close:hover {
1238 background: rgba(255, 255, 255, 0.1);
1239}
1240
1241.modal-content {
1242 flex: 1;
1243 overflow-y: auto;
1244 padding: 24px;
1245}
1246
1247/* Quick Stats in Modal */
1248.quick-stats {
1249 display: grid;
1250 grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
1251 gap: 16px;
1252 margin-bottom: 24px;
1253}
1254
1255.quick-stat {
1256 background: var(--bg-secondary);
1257 border-radius: 16px;
1258 padding: 16px;
1259 display: flex;
1260 align-items: center;
1261 gap: 12px;
1262 border: 1px solid var(--border-color);
1263 transition: all 0.2s;
1264}
1265
1266.quick-stat:hover {
1267 border-color: var(--primary-color);
1268 transform: translateY(-1px);
1269}
1270
1271.stat-icon {
1272 font-size: 20px;
1273 color: var(--primary-color);
1274}
1275
1276.stat-info {
1277 display: flex;
1278 flex-direction: column;
1279}
1280
1281.stat-value {
1282 font-size: 20px;
1283 font-weight: 700;
1284 color: var(--text-primary);
1285}
1286
1287.stat-label {
1288 color: var(--text-secondary);
1289 font-size: 12px;
1290 font-weight: 500;
1291}
1292
1293/* Modal Tabs */
1294.modal-tabs {
1295 background: var(--bg-secondary);
1296 border-radius: 16px;
1297 border: 1px solid var(--border-color);
1298 overflow: hidden;
1299}
1300
1301.tabs-header {
1302 display: flex;
1303 background: var(--bg-tertiary);
1304 border-bottom: 1px solid var(--border-color);
1305 padding: 0 4px;
1306}
1307
1308.tab {
1309 padding: 14px 24px;
1310 background: none;
1311 border: none;
1312 color: var(--text-secondary);
1313 font-size: 14px;
1314 font-weight: 500;
1315 cursor: pointer;
1316 position: relative;
1317 transition: all 0.3s;
1318 border-bottom: 3px solid transparent;
1319}
1320
1321.tab:hover {
1322 color: var(--text-primary);
1323}
1324
1325.tab.active {
1326 color: var(--primary-color);
1327 background: var(--bg-secondary);
1328 border-bottom: 3px solid var(--primary-color);
1329}
1330
1331.tabs-content {
1332 padding: 20px;
1333}
1334
1335/* Data Grid for Sysmon/Network */
1336.data-grid {
1337 background: var(--bg-primary);
1338 border-radius: 12px;
1339 border: 1px solid var(--border-color);
1340 overflow: hidden;
1341 height: 500px;
1342}
1343
1344.grid-container {
1345 display: grid;
1346 grid-template-columns: 300px 1fr;
1347 height: 100%;
1348}
1349
1350.grid-sidebar {
1351 border-right: 1px solid var(--border-color);
1352 overflow-y: auto;
1353 background: var(--bg-secondary);
1354}
1355
1356.grid-content {
1357 overflow-y: auto;
1358 background: var(--bg-primary);
1359}
1360
1361/* JSON Viewer */
1362.json-viewer {
1363 height: 100%;
1364 padding: 20px;
1365 background: var(--bg-primary);
1366}
1367
1368.json-header {
1369 display: flex;
1370 justify-content: space-between;
1371 align-items: center;
1372 margin-bottom: 16px;
1373}
1374
1375.json-header h4 {
1376 margin: 0;
1377 font-size: 14px;
1378 font-weight: 600;
1379 color: var(--text-primary);
1380}
1381
1382.copy-json {
1383 padding: 6px 12px;
1384 background: var(--primary-color);
1385 border: none;
1386 border-radius: 8px;
1387 color: white;
1388 font-size: 12px;
1389 cursor: pointer;
1390 display: flex;
1391 align-items: center;
1392 gap: 6px;
1393 font-weight: 500;
1394 transition: all 0.2s;
1395}
1396
1397.copy-json:hover {
1398 background: var(--secondary-color);
1399}
1400
1401.json-content {
1402 background: var(--bg-tertiary);
1403 border: 1px solid var(--border-color);
1404 border-radius: 12px;
1405 padding: 20px;
1406 color: var(--text-primary);
1407 font-size: 12px;
1408 line-height: 1.5;
1409 font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
1410 white-space: pre-wrap;
1411 word-wrap: break-word;
1412 max-height: 400px;
1413 overflow-y: auto;
1414}
1415
1416/* Responsive Design */
1417@media (max-width: 1200px) {
1418 .dashboard-grid {
1419 grid-template-columns: 1fr;
1420 }
1421
1422 .filter-sidebar {
1423 position: static;
1424 margin-bottom: 24px;
1425 }
1426
1427 .ai-sidebar {
1428 width: 350px;
1429 right: 16px;
1430 }
1431}
1432
1433@media (max-width: 768px) {
1434 .top-nav {
1435 flex-direction: column;
1436 gap: 16px;
1437 padding: 16px;
1438 }
1439
1440 .search-bar {
1441 width: 100%;
1442 }
1443
1444 .nav-right {
1445 width: 100%;
1446 justify-content: space-between;
1447 }
1448
1449 .ai-sidebar {
1450 width: 100%;
1451 height: 70vh;
1452 top: 30vh;
1453 right: 0;
1454 border-radius: 20px 20px 0 0;
1455 }
1456
1457 .stats-grid {
1458 grid-template-columns: 1fr;
1459 }
1460
1461 .charts-grid {
1462 grid-template-columns: 1fr;
1463 }
1464
1465 .devices-grid {
1466 grid-template-columns: 1fr;
1467 }
1468
1469 .grid-container {
1470 grid-template-columns: 1fr;
1471 }
1472
1473 .grid-sidebar {
1474 max-height: 200px;
1475 border-right: none;
1476 border-bottom: 1px solid var(--border-color);
1477 }
1478}
1479
1480/* Scrollbar Styling */
1481::-webkit-scrollbar {
1482 width: 8px;
1483 height: 8px;
1484}
1485
1486::-webkit-scrollbar-track {
1487 background: var(--bg-secondary);
1488 border-radius: 4px;
1489}
1490
1491::-webkit-scrollbar-thumb {
1492 background: var(--text-light);
1493 border-radius: 4px;
1494}
1495
1496::-webkit-scrollbar-thumb:hover {
1497 background: var(--text-secondary);
1498}
1499
1500/* Loading States */
1501.loading-state {
1502 display: flex;
1503 flex-direction: column;
1504 align-items: center;
1505 justify-content: center;
1506 padding: 60px;
1507 color: var(--text-secondary);
1508}
1509
1510.loader {
1511 width: 40px;
1512 height: 40px;
1513 border: 3px solid var(--border-color);
1514 border-top-color: var(--primary-color);
1515 border-radius: 50%;
1516 animation: spin 1s linear infinite;
1517 margin-bottom: 16px;
1518}
1519
1520@keyframes spin {
1521 to {
1522 transform: rotate(360deg);
1523 }
1524}
1525
1526/* Empty States */
1527.empty-state {
1528 grid-column: 1 / -1;
1529 text-align: center;
1530 padding: 60px 20px;
1531 color: var(--text-secondary);
1532}
1533
1534.empty-icon {
1535 font-size: 48px;
1536 margin-bottom: 20px;
1537 opacity: 0.5;
1538 color: var(--text-light);
1539}
1540
1541.empty-state h3 {
1542 margin: 0 0 10px 0;
1543 color: var(--text-primary);
1544 font-weight: 600;
1545}
1546
1547.empty-state p {
1548 margin-bottom: 20px;
1549}
1550
1551.empty-action-btn {
1552 padding: 10px 20px;
1553 background: var(--primary-color);
1554 color: white;
1555 border: none;
1556 border-radius: 10px;
1557 cursor: pointer;
1558 font-weight: 600;
1559 transition: all 0.2s;
1560}
1561
1562.empty-action-btn:hover {
1563 background: var(--secondary-color);
1564}
Note: See TracBrowser for help on using the repository browser.