taskmanager-engine 0.1.0__py3-none-any.whl

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,1048 @@
1
+ /* ==========================================================================
2
+ TaskManager Linear Dark Design System (DESIGN.md tokens)
3
+ ========================================================================== */
4
+
5
+ :root {
6
+ --canvas: #010102;
7
+ --surface-1: #0f1011;
8
+ --surface-2: #141516;
9
+ --surface-3: #18191a;
10
+ --surface-4: #191a1b;
11
+
12
+ --hairline: #23252a;
13
+ --hairline-strong: #34343a;
14
+ --hairline-tertiary: #3e3e44;
15
+
16
+ --primary: #5e6ad2;
17
+ --primary-hover: #828fff;
18
+ --primary-focus: #5e69d1;
19
+ --on-primary: #ffffff;
20
+
21
+ --ink: #f7f8f8;
22
+ --ink-muted: #d0d6e0;
23
+ --ink-subtle: #8a8f98;
24
+ --ink-tertiary: #62666d;
25
+
26
+ --semantic-success: #27a644;
27
+ --semantic-warning: #e59a24;
28
+ --semantic-error: #d14d42;
29
+
30
+ --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, sans-serif;
31
+ --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
32
+
33
+ --radius-sm: 4px;
34
+ --radius-md: 8px;
35
+ --radius-lg: 12px;
36
+ --radius-full: 9999px;
37
+ }
38
+
39
+ * {
40
+ box-sizing: border-box;
41
+ margin: 0;
42
+ padding: 0;
43
+ }
44
+
45
+ body {
46
+ background-color: var(--canvas);
47
+ color: var(--ink);
48
+ font-family: var(--font-sans);
49
+ font-size: 14px;
50
+ line-height: 1.5;
51
+ letter-spacing: -0.01em;
52
+ -webkit-font-smoothing: antialiased;
53
+ min-height: 100vh;
54
+ }
55
+
56
+ /* App Container */
57
+ .app-container {
58
+ display: flex;
59
+ flex-direction: column;
60
+ min-height: 100vh;
61
+ }
62
+
63
+ /* Header */
64
+ .navbar {
65
+ display: flex;
66
+ align-items: center;
67
+ justify-content: space-between;
68
+ padding: 12px 24px;
69
+ background: var(--surface-1);
70
+ border-bottom: 1px solid var(--hairline);
71
+ position: sticky;
72
+ top: 0;
73
+ z-index: 100;
74
+ }
75
+
76
+ .brand {
77
+ display: flex;
78
+ align-items: center;
79
+ gap: 10px;
80
+ font-size: 16px;
81
+ font-weight: 600;
82
+ letter-spacing: -0.03em;
83
+ color: var(--ink);
84
+ }
85
+
86
+ .brand-icon {
87
+ width: 28px;
88
+ height: 28px;
89
+ background: linear-gradient(135deg, var(--primary), #828fff);
90
+ border-radius: var(--radius-md);
91
+ display: flex;
92
+ align-items: center;
93
+ justify-content: center;
94
+ box-shadow: 0 0 12px rgba(94, 106, 210, 0.4);
95
+ }
96
+
97
+ .brand-icon svg {
98
+ width: 16px;
99
+ height: 16px;
100
+ fill: #ffffff;
101
+ }
102
+
103
+ .nav-tabs {
104
+ display: flex;
105
+ gap: 4px;
106
+ background: var(--surface-2);
107
+ padding: 3px;
108
+ border-radius: var(--radius-md);
109
+ border: 1px solid var(--hairline);
110
+ }
111
+
112
+ .nav-tab {
113
+ padding: 6px 14px;
114
+ border-radius: var(--radius-sm);
115
+ background: transparent;
116
+ border: none;
117
+ color: var(--ink-subtle);
118
+ font-size: 13px;
119
+ font-weight: 500;
120
+ cursor: pointer;
121
+ transition: all 0.15s ease;
122
+ display: flex;
123
+ align-items: center;
124
+ gap: 6px;
125
+ }
126
+
127
+ .nav-tab:hover {
128
+ color: var(--ink);
129
+ }
130
+
131
+ .nav-tab.active {
132
+ background: var(--surface-3);
133
+ color: var(--ink);
134
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
135
+ border: 1px solid var(--hairline-strong);
136
+ }
137
+
138
+ .nav-actions {
139
+ display: flex;
140
+ align-items: center;
141
+ gap: 12px;
142
+ }
143
+
144
+ .ws-status {
145
+ display: flex;
146
+ align-items: center;
147
+ gap: 6px;
148
+ font-size: 12px;
149
+ color: var(--ink-subtle);
150
+ padding: 4px 8px;
151
+ background: var(--surface-2);
152
+ border: 1px solid var(--hairline);
153
+ border-radius: var(--radius-full);
154
+ }
155
+
156
+ .status-dot {
157
+ width: 7px;
158
+ height: 7px;
159
+ border-radius: 50%;
160
+ background: var(--semantic-success);
161
+ box-shadow: 0 0 8px var(--semantic-success);
162
+ animation: pulse-dot 2s infinite ease-in-out;
163
+ }
164
+
165
+ .status-dot.disconnected {
166
+ background: var(--semantic-error);
167
+ box-shadow: 0 0 8px var(--semantic-error);
168
+ animation: none;
169
+ }
170
+
171
+ @keyframes pulse-dot {
172
+ 0%, 100% { opacity: 1; transform: scale(1); }
173
+ 50% { opacity: 0.5; transform: scale(0.85); }
174
+ }
175
+
176
+ /* Buttons */
177
+ .btn {
178
+ padding: 7px 14px;
179
+ border-radius: var(--radius-sm);
180
+ font-size: 13px;
181
+ font-weight: 500;
182
+ cursor: pointer;
183
+ transition: all 0.15s ease;
184
+ display: inline-flex;
185
+ align-items: center;
186
+ gap: 6px;
187
+ border: 1px solid transparent;
188
+ }
189
+
190
+ .btn-primary {
191
+ background: var(--primary);
192
+ color: var(--on-primary);
193
+ border-color: var(--primary);
194
+ }
195
+
196
+ .btn-primary:hover {
197
+ background: var(--primary-hover);
198
+ border-color: var(--primary-hover);
199
+ box-shadow: 0 0 12px rgba(94, 106, 210, 0.35);
200
+ }
201
+
202
+ .btn-secondary {
203
+ background: var(--surface-2);
204
+ color: var(--ink-muted);
205
+ border-color: var(--hairline);
206
+ }
207
+
208
+ .btn-secondary:hover {
209
+ background: var(--surface-3);
210
+ color: var(--ink);
211
+ border-color: var(--hairline-strong);
212
+ }
213
+
214
+ .btn-danger {
215
+ background: rgba(209, 77, 66, 0.15);
216
+ color: var(--semantic-error);
217
+ border-color: rgba(209, 77, 66, 0.3);
218
+ }
219
+
220
+ .btn-danger:hover {
221
+ background: rgba(209, 77, 66, 0.25);
222
+ border-color: var(--semantic-error);
223
+ }
224
+
225
+ .btn-sm {
226
+ padding: 4px 8px;
227
+ font-size: 12px;
228
+ }
229
+
230
+ /* Main Content */
231
+ .main-content {
232
+ flex: 1;
233
+ padding: 24px;
234
+ max-width: 1300px;
235
+ width: 100%;
236
+ margin: 0 auto;
237
+ }
238
+
239
+ .tab-pane {
240
+ display: none;
241
+ }
242
+
243
+ .tab-pane.active {
244
+ display: block;
245
+ }
246
+
247
+ /* Cards & Grid */
248
+ .metrics-grid {
249
+ display: grid;
250
+ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
251
+ gap: 16px;
252
+ margin-bottom: 24px;
253
+ }
254
+
255
+ .metric-card {
256
+ background: var(--surface-1);
257
+ border: 1px solid var(--hairline);
258
+ border-radius: var(--radius-md);
259
+ padding: 16px;
260
+ position: relative;
261
+ overflow: hidden;
262
+ transition: border-color 0.15s ease;
263
+ }
264
+
265
+ .metric-card:hover {
266
+ border-color: var(--hairline-strong);
267
+ }
268
+
269
+ .metric-label {
270
+ font-size: 12px;
271
+ color: var(--ink-subtle);
272
+ text-transform: uppercase;
273
+ letter-spacing: 0.05em;
274
+ margin-bottom: 6px;
275
+ }
276
+
277
+ .metric-value {
278
+ font-size: 28px;
279
+ font-weight: 600;
280
+ letter-spacing: -0.03em;
281
+ color: var(--ink);
282
+ }
283
+
284
+ .metric-sub {
285
+ font-size: 12px;
286
+ color: var(--ink-tertiary);
287
+ margin-top: 4px;
288
+ }
289
+
290
+ .metric-progress {
291
+ width: 100%;
292
+ height: 6px;
293
+ background: var(--surface-3);
294
+ border-radius: var(--radius-full);
295
+ margin-top: 10px;
296
+ overflow: hidden;
297
+ border: 1px solid var(--hairline);
298
+ }
299
+
300
+ .metric-progress-fill {
301
+ height: 100%;
302
+ border-radius: var(--radius-full);
303
+ background: linear-gradient(90deg, var(--primary), var(--primary-hover));
304
+ transition: width 0.4s ease, background 0.4s ease;
305
+ }
306
+
307
+ .metric-progress-fill.warn {
308
+ background: linear-gradient(90deg, var(--semantic-warning), #fbbf24);
309
+ }
310
+
311
+ .metric-progress-fill.danger {
312
+ background: linear-gradient(90deg, var(--semantic-error), #f87171);
313
+ }
314
+
315
+ .card {
316
+ background: var(--surface-1);
317
+ border: 1px solid var(--hairline);
318
+ border-radius: var(--radius-md);
319
+ margin-bottom: 24px;
320
+ overflow: hidden;
321
+ }
322
+
323
+ .card-header {
324
+ padding: 14px 18px;
325
+ background: var(--surface-2);
326
+ border-bottom: 1px solid var(--hairline);
327
+ display: flex;
328
+ align-items: center;
329
+ justify-content: space-between;
330
+ }
331
+
332
+ .card-title {
333
+ font-size: 14px;
334
+ font-weight: 600;
335
+ color: var(--ink);
336
+ display: flex;
337
+ align-items: center;
338
+ gap: 8px;
339
+ }
340
+
341
+ .card-body {
342
+ padding: 18px;
343
+ }
344
+
345
+ /* Tables */
346
+ .table-container {
347
+ overflow-x: auto;
348
+ }
349
+
350
+ table {
351
+ width: 100%;
352
+ border-collapse: collapse;
353
+ text-align: left;
354
+ }
355
+
356
+ th {
357
+ padding: 10px 14px;
358
+ font-size: 12px;
359
+ font-weight: 500;
360
+ color: var(--ink-subtle);
361
+ border-bottom: 1px solid var(--hairline);
362
+ background: var(--surface-2);
363
+ text-transform: uppercase;
364
+ letter-spacing: 0.03em;
365
+ }
366
+
367
+ td {
368
+ padding: 12px 14px;
369
+ font-size: 13px;
370
+ border-bottom: 1px solid var(--hairline);
371
+ color: var(--ink-muted);
372
+ }
373
+
374
+ tr:hover td {
375
+ background: var(--surface-2);
376
+ }
377
+
378
+ /* Badges */
379
+ .badge {
380
+ display: inline-flex;
381
+ align-items: center;
382
+ gap: 4px;
383
+ padding: 3px 8px;
384
+ border-radius: var(--radius-full);
385
+ font-size: 11px;
386
+ font-weight: 500;
387
+ line-height: 1;
388
+ }
389
+
390
+ .badge-active {
391
+ background: rgba(94, 106, 210, 0.15);
392
+ color: var(--primary-hover);
393
+ border: 1px solid rgba(94, 106, 210, 0.3);
394
+ }
395
+
396
+ .badge-pending {
397
+ background: rgba(138, 143, 152, 0.15);
398
+ color: var(--ink-subtle);
399
+ border: 1px solid rgba(138, 143, 152, 0.25);
400
+ }
401
+
402
+ .badge-completed {
403
+ background: rgba(39, 166, 68, 0.15);
404
+ color: var(--semantic-success);
405
+ border: 1px solid rgba(39, 166, 68, 0.3);
406
+ }
407
+
408
+ .badge-failed {
409
+ background: rgba(209, 77, 66, 0.15);
410
+ color: var(--semantic-error);
411
+ border: 1px solid rgba(209, 77, 66, 0.3);
412
+ }
413
+
414
+ .badge-delayed, .badge-retrying {
415
+ background: rgba(229, 154, 36, 0.15);
416
+ color: var(--semantic-warning);
417
+ border: 1px solid rgba(229, 154, 36, 0.3);
418
+ }
419
+
420
+ .badge-idle {
421
+ background: rgba(39, 166, 68, 0.12);
422
+ color: #4ade80;
423
+ border: 1px solid rgba(74, 222, 128, 0.2);
424
+ }
425
+
426
+ /* Live Event Log Ticker */
427
+ .event-log-container {
428
+ background: var(--canvas);
429
+ border: 1px solid var(--hairline);
430
+ border-radius: var(--radius-sm);
431
+ padding: 12px;
432
+ font-family: var(--font-mono);
433
+ font-size: 12px;
434
+ max-height: 240px;
435
+ overflow-y: auto;
436
+ }
437
+
438
+ .event-line {
439
+ padding: 4px 0;
440
+ border-bottom: 1px solid rgba(35, 37, 42, 0.5);
441
+ display: flex;
442
+ align-items: center;
443
+ gap: 8px;
444
+ }
445
+
446
+ .event-time {
447
+ color: var(--ink-tertiary);
448
+ }
449
+
450
+ .event-type {
451
+ color: var(--primary-hover);
452
+ font-weight: 500;
453
+ }
454
+
455
+ .event-msg {
456
+ color: var(--ink-muted);
457
+ }
458
+
459
+ /* Worker Cards Grid */
460
+ .workers-grid {
461
+ display: grid;
462
+ grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
463
+ gap: 16px;
464
+ }
465
+
466
+ .worker-card {
467
+ background: var(--surface-1);
468
+ border: 1px solid var(--hairline);
469
+ border-radius: var(--radius-md);
470
+ padding: 16px;
471
+ }
472
+
473
+ .worker-header {
474
+ display: flex;
475
+ align-items: center;
476
+ justify-content: space-between;
477
+ margin-bottom: 12px;
478
+ }
479
+
480
+ .worker-title {
481
+ font-weight: 600;
482
+ font-size: 15px;
483
+ color: var(--ink);
484
+ }
485
+
486
+ .worker-stat-row {
487
+ display: flex;
488
+ justify-content: space-between;
489
+ margin-bottom: 6px;
490
+ font-size: 12px;
491
+ color: var(--ink-subtle);
492
+ }
493
+
494
+ .worker-stat-row strong {
495
+ color: var(--ink-muted);
496
+ }
497
+
498
+ /* Modal */
499
+ .modal-backdrop {
500
+ position: fixed;
501
+ top: 0;
502
+ left: 0;
503
+ right: 0;
504
+ bottom: 0;
505
+ background: rgba(1, 1, 2, 0.85);
506
+ backdrop-filter: blur(4px);
507
+ display: flex;
508
+ align-items: center;
509
+ justify-content: center;
510
+ z-index: 200;
511
+ opacity: 0;
512
+ pointer-events: none;
513
+ transition: opacity 0.2s ease;
514
+ }
515
+
516
+ .modal-backdrop.show {
517
+ opacity: 1;
518
+ pointer-events: auto;
519
+ }
520
+
521
+ .modal {
522
+ background: var(--surface-1);
523
+ border: 1px solid var(--hairline-strong);
524
+ border-radius: var(--radius-lg);
525
+ width: 100%;
526
+ max-width: 540px;
527
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
528
+ overflow: hidden;
529
+ }
530
+
531
+ .modal-header {
532
+ padding: 16px 20px;
533
+ background: var(--surface-2);
534
+ border-bottom: 1px solid var(--hairline);
535
+ display: flex;
536
+ align-items: center;
537
+ justify-content: space-between;
538
+ }
539
+
540
+ .modal-header h3 {
541
+ font-size: 15px;
542
+ font-weight: 600;
543
+ }
544
+
545
+ .modal-close {
546
+ background: transparent;
547
+ border: none;
548
+ color: var(--ink-subtle);
549
+ font-size: 18px;
550
+ cursor: pointer;
551
+ }
552
+
553
+ .modal-body {
554
+ padding: 20px;
555
+ }
556
+
557
+ .modal-footer {
558
+ padding: 14px 20px;
559
+ background: var(--surface-2);
560
+ border-top: 1px solid var(--hairline);
561
+ display: flex;
562
+ justify-content: flex-end;
563
+ gap: 10px;
564
+ }
565
+
566
+ .form-group {
567
+ margin-bottom: 16px;
568
+ }
569
+
570
+ .form-label {
571
+ display: block;
572
+ font-size: 12px;
573
+ font-weight: 500;
574
+ color: var(--ink-subtle);
575
+ margin-bottom: 6px;
576
+ }
577
+
578
+ .form-input, .form-select, .form-textarea {
579
+ width: 100%;
580
+ background: var(--surface-2);
581
+ border: 1px solid var(--hairline);
582
+ border-radius: var(--radius-sm);
583
+ padding: 8px 12px;
584
+ color: var(--ink);
585
+ font-size: 13px;
586
+ outline: none;
587
+ font-family: inherit;
588
+ }
589
+
590
+ .form-input:focus, .form-select:focus, .form-textarea:focus {
591
+ border-color: var(--primary);
592
+ box-shadow: 0 0 0 2px rgba(94, 106, 210, 0.2);
593
+ }
594
+
595
+ .form-textarea {
596
+ min-height: 80px;
597
+ resize: vertical;
598
+ font-family: var(--font-mono);
599
+ }
600
+
601
+ /* LGTM Observability & Trace Waterfall Styles */
602
+ .trace-timeline {
603
+ display: flex;
604
+ flex-direction: column;
605
+ gap: 8px;
606
+ background: var(--surface-2);
607
+ border: 1px solid var(--hairline);
608
+ border-radius: var(--radius-sm);
609
+ padding: 14px;
610
+ }
611
+
612
+ .trace-step {
613
+ display: flex;
614
+ align-items: center;
615
+ gap: 12px;
616
+ font-size: 12px;
617
+ }
618
+
619
+ .trace-dot {
620
+ width: 10px;
621
+ height: 10px;
622
+ border-radius: 50%;
623
+ background: var(--ink-tertiary);
624
+ flex-shrink: 0;
625
+ }
626
+
627
+ .trace-dot.active {
628
+ background: var(--primary);
629
+ box-shadow: 0 0 8px var(--primary);
630
+ }
631
+
632
+ .trace-dot.completed {
633
+ background: var(--semantic-success);
634
+ }
635
+
636
+ .trace-dot.failed {
637
+ background: var(--semantic-error);
638
+ }
639
+
640
+ .trace-step-name {
641
+ font-weight: 500;
642
+ color: var(--ink);
643
+ min-width: 100px;
644
+ }
645
+
646
+ .trace-step-meta {
647
+ color: var(--ink-subtle);
648
+ font-family: var(--font-mono);
649
+ font-size: 11px;
650
+ }
651
+
652
+ .loki-log-console {
653
+ background: #050508;
654
+ border: 1px solid var(--hairline);
655
+ border-radius: var(--radius-sm);
656
+ padding: 12px;
657
+ font-family: var(--font-mono);
658
+ font-size: 12px;
659
+ line-height: 1.6;
660
+ max-height: 200px;
661
+ overflow-y: auto;
662
+ color: #a1a1aa;
663
+ }
664
+
665
+ .loki-log-console .log-entry {
666
+ display: flex;
667
+ gap: 8px;
668
+ }
669
+
670
+ .loki-log-console .log-time {
671
+ color: var(--ink-subtle);
672
+ user-select: none;
673
+ }
674
+
675
+ .loki-log-console .log-msg {
676
+ color: var(--ink);
677
+ }
678
+
679
+ .loki-log-console .log-err {
680
+ color: var(--semantic-error);
681
+ }
682
+
683
+ .json-viewer {
684
+ background: #050508;
685
+ border: 1px solid var(--hairline);
686
+ border-radius: var(--radius-sm);
687
+ padding: 12px;
688
+ font-family: var(--font-mono);
689
+ font-size: 11px;
690
+ color: #e4e4e7;
691
+ max-height: 180px;
692
+ overflow-y: auto;
693
+ white-space: pre-wrap;
694
+ word-break: break-all;
695
+ }
696
+
697
+ pre {
698
+ background: var(--canvas);
699
+ border: 1px solid var(--hairline);
700
+ border-radius: var(--radius-sm);
701
+ padding: 12px;
702
+ font-family: var(--font-mono);
703
+ font-size: 12px;
704
+ color: var(--ink-muted);
705
+ overflow-x: auto;
706
+ }
707
+
708
+ /* Linear Dark Modern Toast Notifications */
709
+ .toast-container {
710
+ position: fixed;
711
+ top: 20px;
712
+ right: 20px;
713
+ z-index: 9999;
714
+ display: flex;
715
+ flex-direction: column;
716
+ gap: 10px;
717
+ pointer-events: none;
718
+ }
719
+
720
+ .toast {
721
+ background: var(--surface-1);
722
+ border: 1px solid var(--hairline-strong);
723
+ border-radius: var(--radius-sm);
724
+ padding: 12px 16px;
725
+ min-width: 300px;
726
+ max-width: 440px;
727
+ box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7);
728
+ display: flex;
729
+ align-items: flex-start;
730
+ gap: 12px;
731
+ color: var(--ink);
732
+ font-size: 13px;
733
+ pointer-events: auto;
734
+ transform: translateX(120%);
735
+ transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
736
+ opacity: 0;
737
+ }
738
+
739
+ .toast.show {
740
+ transform: translateX(0);
741
+ opacity: 1;
742
+ }
743
+
744
+ .toast.toast-success {
745
+ border-left: 3px solid var(--semantic-success);
746
+ }
747
+
748
+ .toast.toast-error {
749
+ border-left: 3px solid var(--semantic-error);
750
+ }
751
+
752
+ .toast.toast-info {
753
+ border-left: 3px solid var(--primary);
754
+ }
755
+
756
+ .toast.toast-warning {
757
+ border-left: 3px solid var(--semantic-warning);
758
+ }
759
+
760
+ .toast-icon {
761
+ font-size: 16px;
762
+ flex-shrink: 0;
763
+ line-height: 1.2;
764
+ }
765
+
766
+ .toast-body {
767
+ flex: 1;
768
+ }
769
+
770
+ .toast-title {
771
+ font-weight: 600;
772
+ font-size: 13px;
773
+ margin-bottom: 2px;
774
+ color: var(--ink);
775
+ }
776
+
777
+ .toast-msg {
778
+ font-size: 12px;
779
+ color: var(--ink-secondary);
780
+ line-height: 1.4;
781
+ word-break: break-word;
782
+ }
783
+
784
+ .toast-close {
785
+ background: transparent;
786
+ border: none;
787
+ color: var(--ink-subtle);
788
+ cursor: pointer;
789
+ font-size: 16px;
790
+ padding: 0 4px;
791
+ line-height: 1;
792
+ transition: color 0.15s ease;
793
+ }
794
+
795
+ .toast-close:hover {
796
+ color: var(--ink);
797
+ }
798
+
799
+ /* Dropdown Menu Component (Linear Dark) */
800
+ .dropdown {
801
+ position: relative;
802
+ display: inline-block;
803
+ }
804
+
805
+ .dropdown-chevron {
806
+ transition: transform 0.2s ease;
807
+ margin-left: 2px;
808
+ }
809
+
810
+ .dropdown.open .dropdown-chevron {
811
+ transform: rotate(180deg);
812
+ }
813
+
814
+ .dropdown-menu {
815
+ position: absolute;
816
+ top: calc(100% + 6px);
817
+ right: 0;
818
+ background: var(--surface-1);
819
+ border: 1px solid var(--hairline-strong);
820
+ border-radius: var(--radius-md);
821
+ box-shadow: 0 16px 36px rgba(0, 0, 0, 0.7);
822
+ min-width: 260px;
823
+ padding: 6px;
824
+ display: none;
825
+ flex-direction: column;
826
+ gap: 2px;
827
+ z-index: 150;
828
+ backdrop-filter: blur(8px);
829
+ animation: dropdown-fade-in 0.15s ease;
830
+ }
831
+
832
+ .dropdown.open .dropdown-menu {
833
+ display: flex;
834
+ }
835
+
836
+ @keyframes dropdown-fade-in {
837
+ from { opacity: 0; transform: translateY(-4px); }
838
+ to { opacity: 1; transform: translateY(0); }
839
+ }
840
+
841
+ .dropdown-item {
842
+ display: flex;
843
+ align-items: center;
844
+ gap: 12px;
845
+ padding: 8px 10px;
846
+ border-radius: var(--radius-sm);
847
+ background: transparent;
848
+ border: none;
849
+ color: var(--ink);
850
+ text-align: left;
851
+ cursor: pointer;
852
+ width: 100%;
853
+ transition: background 0.12s ease;
854
+ }
855
+
856
+ .dropdown-item:hover {
857
+ background: var(--surface-2);
858
+ }
859
+
860
+ .dropdown-icon {
861
+ font-size: 16px;
862
+ flex-shrink: 0;
863
+ }
864
+
865
+ .dropdown-title {
866
+ font-size: 13px;
867
+ font-weight: 500;
868
+ color: var(--ink);
869
+ }
870
+
871
+ .dropdown-desc {
872
+ font-size: 11px;
873
+ color: var(--ink-subtle);
874
+ }
875
+
876
+ .dropdown-divider {
877
+ height: 1px;
878
+ background: var(--hairline);
879
+ margin: 4px 0;
880
+ }
881
+
882
+ /* Icon Buttons */
883
+ .btn-icon {
884
+ width: 32px;
885
+ height: 32px;
886
+ border-radius: var(--radius-sm);
887
+ background: var(--surface-2);
888
+ border: 1px solid var(--hairline);
889
+ color: var(--ink-subtle);
890
+ display: inline-flex;
891
+ align-items: center;
892
+ justify-content: center;
893
+ cursor: pointer;
894
+ transition: all 0.15s ease;
895
+ }
896
+
897
+ .btn-icon:hover {
898
+ background: var(--surface-3);
899
+ color: var(--ink);
900
+ border-color: var(--hairline-strong);
901
+ }
902
+
903
+ /* Command Palette Search Button */
904
+ .btn-command-palette {
905
+ display: flex;
906
+ align-items: center;
907
+ gap: 8px;
908
+ background: var(--surface-2);
909
+ border: 1px solid var(--hairline);
910
+ border-radius: var(--radius-md);
911
+ padding: 6px 10px;
912
+ color: var(--ink-subtle);
913
+ font-size: 12px;
914
+ cursor: pointer;
915
+ transition: all 0.15s ease;
916
+ }
917
+
918
+ .btn-command-palette:hover {
919
+ background: var(--surface-3);
920
+ border-color: var(--hairline-strong);
921
+ color: var(--ink);
922
+ }
923
+
924
+ .kbd-badge {
925
+ font-family: var(--font-mono);
926
+ font-size: 10px;
927
+ padding: 1px 5px;
928
+ border-radius: 4px;
929
+ background: var(--surface-3);
930
+ border: 1px solid var(--hairline);
931
+ color: var(--ink-muted);
932
+ }
933
+
934
+ /* Command Palette Modal */
935
+ .cmd-palette-modal {
936
+ max-width: 580px;
937
+ background: var(--surface-1);
938
+ border: 1px solid var(--hairline-strong);
939
+ border-radius: var(--radius-lg);
940
+ overflow: hidden;
941
+ box-shadow: 0 24px 48px rgba(0, 0, 0, 0.8);
942
+ }
943
+
944
+ .cmd-palette-search {
945
+ display: flex;
946
+ align-items: center;
947
+ gap: 10px;
948
+ padding: 14px 18px;
949
+ border-bottom: 1px solid var(--hairline);
950
+ background: var(--surface-2);
951
+ }
952
+
953
+ .cmd-palette-search svg {
954
+ color: var(--ink-subtle);
955
+ flex-shrink: 0;
956
+ }
957
+
958
+ .cmd-palette-search input {
959
+ flex: 1;
960
+ background: transparent;
961
+ border: none;
962
+ outline: none;
963
+ font-size: 14px;
964
+ color: var(--ink);
965
+ font-family: inherit;
966
+ }
967
+
968
+ .cmd-palette-results {
969
+ max-height: 320px;
970
+ overflow-y: auto;
971
+ padding: 8px;
972
+ }
973
+
974
+ .cmd-group-label {
975
+ font-size: 11px;
976
+ text-transform: uppercase;
977
+ color: var(--ink-tertiary);
978
+ letter-spacing: 0.05em;
979
+ padding: 8px 10px 4px;
980
+ }
981
+
982
+ .cmd-item {
983
+ display: flex;
984
+ align-items: center;
985
+ justify-content: space-between;
986
+ padding: 8px 10px;
987
+ border-radius: var(--radius-sm);
988
+ cursor: pointer;
989
+ font-size: 13px;
990
+ color: var(--ink-muted);
991
+ transition: all 0.1s ease;
992
+ }
993
+
994
+ .cmd-item:hover, .cmd-item.selected {
995
+ background: var(--surface-2);
996
+ color: var(--ink);
997
+ }
998
+
999
+ .cmd-item-left {
1000
+ display: flex;
1001
+ align-items: center;
1002
+ gap: 10px;
1003
+ }
1004
+
1005
+ /* Table Row Action Groups (Linear Calm Hover-Reveal Rhythm) */
1006
+ .action-group {
1007
+ display: flex;
1008
+ align-items: center;
1009
+ gap: 4px;
1010
+ justify-content: flex-start;
1011
+ }
1012
+
1013
+ .btn-action {
1014
+ padding: 3px 8px;
1015
+ font-size: 11px;
1016
+ font-weight: 500;
1017
+ border-radius: var(--radius-sm);
1018
+ background: var(--surface-2);
1019
+ border: 1px solid var(--hairline);
1020
+ color: var(--ink-subtle);
1021
+ cursor: pointer;
1022
+ display: inline-flex;
1023
+ align-items: center;
1024
+ gap: 4px;
1025
+ transition: all 0.12s ease;
1026
+ white-space: nowrap;
1027
+ }
1028
+
1029
+ tr:hover .btn-action {
1030
+ color: var(--ink-muted);
1031
+ border-color: var(--hairline-strong);
1032
+ }
1033
+
1034
+ .btn-action:hover {
1035
+ background: var(--surface-3);
1036
+ color: var(--ink) !important;
1037
+ border-color: var(--primary) !important;
1038
+ box-shadow: 0 0 8px rgba(94, 106, 210, 0.2);
1039
+ }
1040
+
1041
+ .btn-action.btn-action-danger:hover {
1042
+ background: rgba(209, 77, 66, 0.15);
1043
+ color: var(--semantic-error) !important;
1044
+ border-color: var(--semantic-error) !important;
1045
+ box-shadow: 0 0 8px rgba(209, 77, 66, 0.2);
1046
+ }
1047
+
1048
+