@agile-team/mach-table-react 0.30.1 → 0.31.1

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.
@@ -1,2306 +1 @@
1
- .mach-root {
2
- --mach-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
3
- "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
4
- --mach-font-size: 13px;
5
- --mach-font-size-sm: 12px;
6
- --mach-header-font-weight: 650;
7
- --mach-cell-padding: 9px;
8
- --mach-row-h: 36px;
9
- --mach-header-h: 40px;
10
-
11
- --mach-primary: #2563eb;
12
- --mach-primary-weak: #dbeafe;
13
-
14
- --mach-success: #16a34a;
15
- --mach-warning: #d97706;
16
- --mach-danger: #dc2626;
17
- --mach-info: #0284c7;
18
-
19
- --mach-border-color: #e6eaf0;
20
- --mach-row-border-color: #eef1f6;
21
- --mach-cell-border-color: transparent;
22
- --mach-border-width: 1px;
23
- --mach-header-border-width: 1px;
24
- --mach-header-accent-color: #d9e1eb;
25
- --mach-header-bg: #f4f7fb;
26
- --mach-header-group-bg: #edf2f8;
27
- --mach-header-fg: #344054;
28
- --mach-body-bg: #ffffff;
29
- --mach-body-fg: #26303f;
30
-
31
- --mach-row-hover-bg: #f6f8fa;
32
- --mach-row-selected-bg: #eff6ff;
33
- --mach-zebra-bg: #fafbfd;
34
- --mach-cell-focus-color: #2563eb;
35
- --mach-focus-width: 1.5px;
36
- --mach-scrollbar-thumb: #c9d2dd;
37
-
38
- --mach-radius-sm: 4px;
39
- --mach-radius: 6px;
40
- --mach-radius-lg: 8px;
41
- --mach-shadow-sm: 0 1px 4px rgba(15, 23, 42, 0.08);
42
- --mach-shadow: 0 6px 20px rgba(15, 23, 42, 0.12);
43
- --mach-transition: 0.15s ease;
44
-
45
- --mach-z-overlay: 10;
46
- --mach-z-loading: 15;
47
- --mach-z-popup: 1000;
48
- --mach-z-menu: 1001;
49
-
50
- position: relative;
51
- display: flex;
52
- flex-direction: column;
53
- width: 100%;
54
- height: 100%;
55
- min-height: 120px;
56
- overflow: hidden;
57
- font-family: var(--mach-font-family);
58
- font-size: var(--mach-font-size);
59
- color: var(--mach-body-fg);
60
- background: var(--mach-body-bg);
61
- outline: none;
62
- box-sizing: border-box;
63
- border: 1px solid var(--mach-border-color);
64
- color-scheme: light;
65
- -webkit-font-smoothing: antialiased;
66
- -moz-osx-font-smoothing: grayscale;
67
- font-variant-numeric: tabular-nums;
68
- contain: layout style;
69
- }
70
-
71
- .mach-root.mach-dom-layout--auto-height {
72
- height: auto;
73
- min-height: 0;
74
- }
75
-
76
- .mach-root.mach-dom-layout--auto-height .mach-body {
77
- flex: none;
78
- }
79
-
80
- .mach-root.mach-dom-layout--auto-height .mach-body-viewport--scroll {
81
- overflow-y: hidden;
82
- }
83
-
84
- .mach-toolbar {
85
- display: flex;
86
- align-items: center;
87
- justify-content: space-between;
88
- gap: 10px;
89
- min-height: 44px;
90
- padding: 6px 8px;
91
- font: 13px/1.4 var(--mach-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
92
- color: var(--mach-body-fg, #26303f);
93
- background: var(--mach-body-bg, #fff);
94
- border: 1px solid var(--mach-border-color, #e6eaf0);
95
- border-bottom: 0;
96
- border-radius: var(--mach-radius-lg, 8px) var(--mach-radius-lg, 8px) 0 0;
97
- }
98
-
99
- .mach-toolbar__main,
100
- .mach-toolbar__aside {
101
- display: flex;
102
- align-items: center;
103
- gap: 6px;
104
- min-width: 0;
105
- }
106
-
107
- .mach-toolbar__search {
108
- display: flex;
109
- align-items: center;
110
- gap: 6px;
111
- width: min(240px, 32vw);
112
- height: 32px;
113
- padding: 0 9px;
114
- color: #64748b;
115
- background: var(--mach-header-bg, #fafbfd);
116
- border: 1px solid var(--mach-border-color, #e6eaf0);
117
- border-radius: 6px;
118
- transition: border-color var(--mach-transition, .15s ease), box-shadow var(--mach-transition, .15s ease);
119
- }
120
-
121
- .mach-toolbar__search:focus-within {
122
- border-color: var(--mach-primary, #2563eb);
123
- box-shadow: 0 0 0 2px color-mix(in srgb, var(--mach-primary, #2563eb) 12%, transparent);
124
- }
125
-
126
- .mach-toolbar__search input {
127
- min-width: 0;
128
- width: 100%;
129
- color: inherit;
130
- background: transparent;
131
- border: 0;
132
- outline: 0;
133
- }
134
-
135
- .mach-toolbar__button,
136
- .mach-toolbar__select-host,
137
- .mach-toolbar__selection {
138
- height: 32px;
139
- padding: 0 10px;
140
- color: inherit;
141
- background: var(--mach-body-bg, #fff);
142
- border: 1px solid var(--mach-border-color, #e6eaf0);
143
- border-radius: 6px;
144
- cursor: pointer;
145
- transition: color var(--mach-transition, .15s ease), border-color var(--mach-transition, .15s ease), background var(--mach-transition, .15s ease);
146
- }
147
-
148
- .mach-toolbar__button {
149
- min-width: 32px;
150
- padding: 0 8px;
151
- font-size: 16px;
152
- }
153
-
154
- .mach-toolbar__button:hover:not(:disabled),
155
- .mach-toolbar__select-host:hover {
156
- color: var(--mach-primary, #2563eb);
157
- border-color: var(--mach-primary, #2563eb);
158
- }
159
-
160
- .mach-toolbar__button:disabled {
161
- cursor: not-allowed;
162
- opacity: .45;
163
- }
164
-
165
- .mach-toolbar__selection {
166
- color: var(--mach-primary, #2563eb);
167
- background: var(--mach-primary-weak, #dbeafe);
168
- border-color: transparent;
169
- font-size: 12px;
170
- }
171
-
172
- .mach-toolbar__select-host {
173
- width: 82px;
174
- padding: 0;
175
- }
176
-
177
- .mach-toolbar__select-control,
178
- .mach-toolbar__select-control .mach-select-trigger {
179
- width: 100%;
180
- height: 100%;
181
- }
182
-
183
- .mach-toolbar__select-control .mach-select-trigger {
184
- border: 0;
185
- border-radius: 5px;
186
- background: transparent;
187
- box-shadow: none;
188
- }
189
-
190
- @media (max-width: 640px) {
191
- .mach-toolbar { align-items: stretch; flex-direction: column; }
192
- .mach-toolbar__main, .mach-toolbar__aside { flex-wrap: wrap; }
193
- .mach-toolbar__search { flex: 1; width: auto; }
194
- }
195
-
196
- .mach-size--compact {
197
- --mach-font-size: 12px;
198
- --mach-cell-padding: 6px;
199
- }
200
-
201
- .mach-size--normal {
202
- --mach-font-size: 13px;
203
- --mach-cell-padding: 9px;
204
- }
205
-
206
- .mach-size--large {
207
- --mach-font-size: 14px;
208
- --mach-cell-padding: 12px;
209
- }
210
-
211
- .mach-root.mach-cell-borders {
212
- --mach-cell-border-color: var(--mach-border-color);
213
- }
214
-
215
- .mach-root.mach-theme-dark,
216
- .mach-root.mach-theme-dark.mach-size--compact,
217
- .mach-root.mach-theme-dark.mach-size--normal,
218
- .mach-root.mach-theme-dark.mach-size--large {
219
- --mach-border-color: #26324a;
220
- --mach-row-border-color: #1c2740;
221
- --mach-header-accent-color: #33415e;
222
- --mach-header-bg: #101a2e;
223
- --mach-header-group-bg: #16213a;
224
- --mach-header-fg: #c3cee0;
225
- --mach-body-bg: #0d1526;
226
- --mach-body-fg: #dbe4f0;
227
- --mach-row-hover-bg: #142138;
228
- --mach-row-selected-bg: #14304f;
229
- --mach-zebra-bg: #0f1a2e;
230
- --mach-cell-focus-color: #60a5fa;
231
- --mach-primary: #60a5fa;
232
- --mach-primary-weak: #1e3a5f;
233
- --mach-scrollbar-thumb: #33415e;
234
- --mach-success: #4ade80;
235
- --mach-warning: #fbbf24;
236
- --mach-danger: #f87171;
237
- --mach-info: #38bdf8;
238
- --mach-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.4);
239
- --mach-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
240
- color-scheme: dark;
241
- }
242
-
243
- .mach-root *,
244
- .mach-root *::before,
245
- .mach-root *::after {
246
- box-sizing: border-box;
247
- }
248
-
249
- .mach-portal,
250
- .mach-portal *,
251
- .mach-portal *::before,
252
- .mach-portal *::after {
253
- box-sizing: border-box;
254
- }
255
-
256
- .mach-root:focus-visible {
257
- outline: 2px solid var(--mach-primary);
258
- outline-offset: -2px;
259
- }
260
-
261
- .mach-header {
262
- display: flex;
263
- flex-shrink: 0;
264
- width: 100%;
265
- height: var(--mach-header-h);
266
- background: var(--mach-header-bg);
267
- border-bottom: var(--mach-header-border-width) solid var(--mach-header-accent-color);
268
- box-shadow: 0 1px 2px color-mix(in srgb, var(--mach-header-fg) 8%, transparent);
269
- overflow: hidden;
270
- position: relative;
271
- z-index: 3;
272
- user-select: none;
273
- }
274
-
275
- .mach-body {
276
- display: flex;
277
- flex: 1;
278
- min-height: 0;
279
- width: 100%;
280
- position: relative;
281
- overflow: hidden;
282
- }
283
-
284
- .mach-pane {
285
- position: relative;
286
- overflow: hidden;
287
- flex-shrink: 0;
288
- }
289
-
290
- .mach-pane--center {
291
- flex: 1 1 auto;
292
- min-width: 0;
293
- }
294
-
295
- .mach-pane--hidden {
296
- display: none;
297
- }
298
-
299
- .mach-header-viewport {
300
- width: 100%;
301
- height: 100%;
302
- overflow: hidden;
303
- }
304
-
305
- .mach-header-rows {
306
- position: relative;
307
- height: 100%;
308
- width: 100%;
309
- }
310
-
311
- .mach-header-row {
312
- position: absolute;
313
- left: 0;
314
- }
315
-
316
- .mach-header-row .mach-header-cell {
317
- position: absolute;
318
- top: 0;
319
- }
320
-
321
- .mach-header-cell--group {
322
- justify-content: center;
323
- border-bottom: var(--mach-border-width) solid var(--mach-border-color);
324
- font-weight: var(--mach-header-font-weight);
325
- background: var(--mach-header-group-bg);
326
- }
327
-
328
- .mach-header-label--custom {
329
- display: inline-flex;
330
- align-items: center;
331
- min-width: 0;
332
- overflow: hidden;
333
- }
334
-
335
- .mach-header-cell {
336
- display: flex;
337
- align-items: center;
338
- gap: 4px;
339
- padding: 0 var(--mach-cell-padding);
340
- border-right: var(--mach-border-width) solid transparent;
341
- color: var(--mach-header-fg);
342
- font-weight: var(--mach-header-font-weight);
343
- font-size: var(--mach-font-size);
344
- letter-spacing: 0.15px;
345
- cursor: default;
346
- overflow: hidden;
347
- white-space: nowrap;
348
- background: var(--mach-header-bg);
349
- transition: color var(--mach-transition), background-color var(--mach-transition);
350
- }
351
-
352
- .mach-header-cell--leaf:hover {
353
- background: color-mix(in srgb, var(--mach-primary) 4%, var(--mach-header-bg));
354
- }
355
-
356
- .mach-header-cell.mach-header-cell--sorted {
357
- color: var(--mach-primary);
358
- background: color-mix(in srgb, var(--mach-primary) 5%, var(--mach-header-bg));
359
- }
360
-
361
- .mach-root.mach-cell-borders .mach-header-cell {
362
- border-right-color: var(--mach-border-color);
363
- }
364
-
365
- .mach-header-label {
366
- flex: 1;
367
- min-width: 0;
368
- overflow: hidden;
369
- text-overflow: ellipsis;
370
- cursor: pointer;
371
- }
372
-
373
- .mach-header-cell--selection {
374
- justify-content: center;
375
- gap: 0;
376
- padding: 0;
377
- }
378
-
379
- .mach-header-cell--selection .mach-header-label:empty {
380
- display: none;
381
- }
382
-
383
- .mach-sort-indicator {
384
- display: inline-flex;
385
- align-items: center;
386
- gap: 3px;
387
- color: var(--mach-primary);
388
- flex-shrink: 0;
389
- }
390
-
391
- .mach-sort-indicator svg {
392
- width: 10px;
393
- height: 10px;
394
- }
395
-
396
- .mach-sort-indicator:empty {
397
- display: none;
398
- }
399
-
400
- .mach-sort-badge {
401
- font-size: 9px;
402
- line-height: 1;
403
- padding: 1.5px 4px;
404
- border-radius: 999px;
405
- background: var(--mach-primary-weak);
406
- color: var(--mach-primary);
407
- font-weight: 600;
408
- }
409
-
410
- .mach-filter-btn {
411
- display: inline-flex;
412
- align-items: center;
413
- justify-content: center;
414
- width: 22px;
415
- height: 22px;
416
- padding: 0;
417
- border: none;
418
- border-radius: var(--mach-radius-sm);
419
- background: transparent;
420
- color: inherit;
421
- opacity: 0.36;
422
- cursor: pointer;
423
- flex-shrink: 0;
424
- transition: opacity var(--mach-transition), color var(--mach-transition), background-color var(--mach-transition);
425
- }
426
-
427
- .mach-filter-btn svg {
428
- width: 12px;
429
- height: 12px;
430
- pointer-events: none;
431
- }
432
-
433
- .mach-header-cell:hover .mach-filter-btn,
434
- .mach-header-cell:hover .mach-menu-btn {
435
- opacity: 0.62;
436
- }
437
-
438
- .mach-filter-btn:hover {
439
- opacity: 1;
440
- background: var(--mach-row-hover-bg);
441
- }
442
-
443
- .mach-filter-btn--active {
444
- opacity: 1;
445
- color: var(--mach-primary);
446
- }
447
-
448
- .mach-filter-tag {
449
- display: inline-flex;
450
- align-items: center;
451
- max-width: 96px;
452
- overflow: hidden;
453
- text-overflow: ellipsis;
454
- white-space: nowrap;
455
- padding: 0 6px;
456
- height: 16px;
457
- line-height: 16px;
458
- border-radius: 999px;
459
- background: var(--mach-primary-weak);
460
- color: var(--mach-primary);
461
- font-size: 10px;
462
- font-weight: 500;
463
- flex-shrink: 0;
464
- }
465
-
466
- .mach-menu-btn {
467
- display: inline-flex;
468
- align-items: center;
469
- justify-content: center;
470
- width: 22px;
471
- height: 22px;
472
- padding: 0;
473
- border: none;
474
- border-radius: var(--mach-radius-sm);
475
- background: transparent;
476
- color: inherit;
477
- opacity: 0.36;
478
- cursor: pointer;
479
- flex-shrink: 0;
480
- font-size: 12px;
481
- line-height: 1;
482
- transition: opacity var(--mach-transition), color var(--mach-transition), background-color var(--mach-transition);
483
- }
484
-
485
- .mach-menu-btn:hover {
486
- opacity: 1;
487
- background: var(--mach-row-hover-bg);
488
- }
489
-
490
- .mach-menu-btn svg {
491
- width: 12px;
492
- height: 12px;
493
- pointer-events: none;
494
- }
495
-
496
- .mach-header-resize {
497
- position: absolute;
498
- top: 0;
499
- right: 0;
500
- width: 8px;
501
- height: 100%;
502
- cursor: col-resize;
503
- z-index: 2;
504
- touch-action: none;
505
- }
506
-
507
- .mach-header-resize:hover::after,
508
- .mach-root--resizing .mach-header-resize::after {
509
- content: "";
510
- position: absolute;
511
- inset: 0 3px;
512
- background: var(--mach-primary);
513
- opacity: 0.45;
514
- border-radius: 1px;
515
- }
516
-
517
- .mach-header-cell--dragging {
518
- opacity: 0.22;
519
- }
520
-
521
- .mach-column-drag-ghost {
522
- position: fixed;
523
- top: 0;
524
- left: 0;
525
- z-index: calc(var(--mach-z-menu) + 1);
526
- display: flex;
527
- align-items: center;
528
- height: var(--mach-header-h);
529
- max-width: calc(100vw - 16px);
530
- padding: 0 var(--mach-cell-padding);
531
- overflow: hidden;
532
- color: var(--mach-body-fg);
533
- font: var(--mach-header-font-weight) var(--mach-font-size)/1.3 var(--mach-font-family);
534
- text-overflow: ellipsis;
535
- white-space: nowrap;
536
- pointer-events: none;
537
- background: var(--mach-body-bg);
538
- border: 1px solid var(--mach-primary);
539
- border-radius: var(--mach-radius);
540
- box-shadow: var(--mach-shadow);
541
- opacity: 0.96;
542
- will-change: transform;
543
- }
544
-
545
- .mach-drop-indicator {
546
- position: absolute;
547
- top: 3px;
548
- left: 0;
549
- width: 2px;
550
- height: calc(100% - 6px);
551
- border-radius: 2px;
552
- background: var(--mach-primary);
553
- z-index: 4;
554
- pointer-events: none;
555
- will-change: transform;
556
- }
557
-
558
- .mach-root--dragging {
559
- cursor: grabbing;
560
- }
561
-
562
- .mach-root--dragging .mach-header-cell,
563
- .mach-root--resizing .mach-header-cell {
564
- cursor: default;
565
- }
566
-
567
- .mach-root--resizing {
568
- cursor: col-resize;
569
- }
570
-
571
- .mach-body-viewport {
572
- position: relative;
573
- width: 100%;
574
- height: 100%;
575
- overflow: hidden;
576
- }
577
-
578
- .mach-body-viewport--scroll {
579
- overflow: auto;
580
- overscroll-behavior: contain;
581
- }
582
-
583
- .mach-body-viewport--scroll {
584
- scrollbar-width: thin;
585
- scrollbar-color: var(--mach-scrollbar-thumb) transparent;
586
- }
587
-
588
- .mach-body-viewport--scroll::-webkit-scrollbar {
589
- width: 10px;
590
- height: 10px;
591
- }
592
-
593
- .mach-body-viewport--scroll::-webkit-scrollbar-track {
594
- background: transparent;
595
- }
596
-
597
- .mach-body-viewport--scroll::-webkit-scrollbar-thumb {
598
- background: var(--mach-scrollbar-thumb);
599
- border-radius: 999px;
600
- border: 3px solid transparent;
601
- background-clip: padding-box;
602
- transition: background-color var(--mach-transition);
603
- }
604
-
605
- .mach-body-viewport--scroll::-webkit-scrollbar-thumb:hover {
606
- background: color-mix(in srgb, var(--mach-scrollbar-thumb) 60%, var(--mach-primary));
607
- background-clip: padding-box;
608
- }
609
-
610
- .mach-body-viewport--scroll::-webkit-scrollbar-thumb:active {
611
- background: var(--mach-primary);
612
- background-clip: padding-box;
613
- }
614
-
615
- .mach-body-viewport--scroll::-webkit-scrollbar-corner {
616
- background: transparent;
617
- }
618
-
619
- .mach-row-container {
620
- position: relative;
621
- width: 100%;
622
- }
623
-
624
- .mach-row {
625
- position: absolute;
626
- top: 0;
627
- left: 0;
628
- display: flex;
629
- width: 100%;
630
- background: var(--mach-body-bg);
631
- border-bottom: var(--mach-border-width) solid var(--mach-row-border-color);
632
- contain: layout style;
633
- }
634
-
635
- .mach-row,
636
- .mach-row .mach-cell {
637
- transition: background-color var(--mach-transition);
638
- }
639
-
640
- .mach-root.mach-striped .mach-row--odd,
641
- .mach-root.mach-striped .mach-row--odd .mach-cell {
642
- background: var(--mach-zebra-bg);
643
- }
644
-
645
- .mach-cell {
646
- position: absolute;
647
- top: 0;
648
- display: flex;
649
- align-items: center;
650
- height: 100%;
651
- padding: 0 var(--mach-cell-padding);
652
- border-right: 1px solid var(--mach-cell-border-color);
653
- overflow: hidden;
654
- white-space: nowrap;
655
- text-overflow: ellipsis;
656
- cursor: default;
657
- line-height: calc(var(--mach-row-h) - 2px);
658
- }
659
-
660
- .mach-cell--loading {
661
- pointer-events: none;
662
- }
663
-
664
- .mach-cell-loading-bar {
665
- display: block;
666
- height: 8px;
667
- max-width: 132px;
668
- border-radius: 999px;
669
- background: linear-gradient(90deg, var(--mach-row-hover-bg), var(--mach-border-color), var(--mach-row-hover-bg));
670
- background-size: 200% 100%;
671
- animation: mach-cell-loading 1.25s ease-in-out infinite;
672
- }
673
-
674
- @keyframes mach-cell-loading {
675
- from { background-position: 200% 0; }
676
- to { background-position: -200% 0; }
677
- }
678
-
679
- @media (prefers-reduced-motion: reduce) {
680
- .mach-cell-loading-bar { animation: none; }
681
- }
682
-
683
- .mach-cell--num {
684
- justify-content: flex-end;
685
- }
686
-
687
- .mach-cell--selection {
688
- justify-content: center;
689
- padding: 0;
690
- }
691
-
692
- .mach-cell--editing {
693
- padding: 0 3px;
694
- }
695
-
696
- .mach-cell--focus {
697
- box-shadow: inset 0 0 0 var(--mach-focus-width) var(--mach-cell-focus-color);
698
- border-radius: var(--mach-radius-sm);
699
- z-index: 1;
700
- }
701
-
702
- .mach-cell--selection.mach-cell--focus {
703
- box-shadow: none;
704
- border-radius: 0;
705
- z-index: auto;
706
- }
707
-
708
- .mach-row--hover,
709
- .mach-row--hover .mach-cell {
710
- background: var(--mach-row-hover-bg);
711
- }
712
-
713
- .mach-row--selected,
714
- .mach-row--selected .mach-cell {
715
- background: var(--mach-row-selected-bg);
716
- }
717
-
718
- .mach-row--selected.mach-row--hover,
719
- .mach-row--selected.mach-row--hover .mach-cell {
720
- background: var(--mach-row-selected-bg);
721
- filter: brightness(0.985);
722
- }
723
-
724
- input.mach-row-checkbox,
725
- input.mach-select-all {
726
- width: 13px;
727
- height: 13px;
728
- margin: 0;
729
- accent-color: var(--mach-primary);
730
- cursor: pointer;
731
- flex-shrink: 0;
732
- }
733
-
734
- .mach-detail-row {
735
- background: var(--mach-zebra-bg);
736
- z-index: 0;
737
- }
738
-
739
- .mach-detail {
740
- height: 100%;
741
- overflow: auto;
742
- padding: 10px 12px;
743
- }
744
-
745
- .mach-cell--detail-toggle {
746
- justify-content: center;
747
- padding: 0;
748
- cursor: pointer;
749
- }
750
-
751
- .mach-detail-toggle {
752
- display: inline-flex;
753
- align-items: center;
754
- justify-content: center;
755
- width: 100%;
756
- font-size: 10px;
757
- color: var(--mach-header-fg);
758
- transition: transform 0.15s ease;
759
- }
760
-
761
- .mach-detail-toggle--open {
762
- transform: rotate(90deg);
763
- }
764
-
765
- .mach-detail-toggle--loading {
766
- animation: mach-tree-spin 0.8s linear infinite;
767
- color: var(--mach-primary);
768
- }
769
-
770
- .mach-detail-toggle--error {
771
- color: #dc2626;
772
- }
773
-
774
- @keyframes mach-tree-spin {
775
- to { transform: rotate(360deg); }
776
- }
777
-
778
- @media (prefers-reduced-motion: reduce) {
779
- .mach-detail-toggle--loading { animation: none; }
780
- }
781
-
782
- .mach-cell--group {
783
- cursor: pointer;
784
- background: var(--mach-header-bg);
785
- }
786
-
787
- .mach-row .mach-cell--group,
788
- .mach-row:has(.mach-cell--group) {
789
- background: var(--mach-header-bg);
790
- }
791
-
792
- .mach-group-label {
793
- display: inline-flex;
794
- align-items: center;
795
- gap: 5px;
796
- min-width: 0;
797
- overflow: hidden;
798
- }
799
-
800
- .mach-group-text {
801
- font-weight: 600;
802
- white-space: nowrap;
803
- overflow: hidden;
804
- text-overflow: ellipsis;
805
- }
806
-
807
- .mach-group-count {
808
- color: var(--mach-header-fg);
809
- font-size: 10px;
810
- flex-shrink: 0;
811
- opacity: 0.8;
812
- }
813
-
814
- .mach-tree-cell {
815
- display: inline-flex;
816
- align-items: center;
817
- gap: 5px;
818
- min-width: 0;
819
- width: 100%;
820
- }
821
-
822
- .mach-tree-indent {
823
- flex-shrink: 0;
824
- }
825
-
826
- .mach-tree-toggle-spacer {
827
- width: 10px;
828
- flex-shrink: 0;
829
- }
830
-
831
- .mach-tree-text {
832
- overflow: hidden;
833
- text-overflow: ellipsis;
834
- white-space: nowrap;
835
- }
836
-
837
- .mach-cell--drag {
838
- justify-content: center;
839
- padding: 0;
840
- cursor: grab;
841
- }
842
-
843
- .mach-row-drag-handle {
844
- color: var(--mach-header-fg);
845
- opacity: 0.5;
846
- font-size: 12px;
847
- cursor: grab;
848
- user-select: none;
849
- }
850
-
851
- .mach-row-drag-handle:hover {
852
- opacity: 1;
853
- color: var(--mach-primary);
854
- }
855
-
856
- .mach-row-drop-indicator {
857
- position: absolute;
858
- top: 0;
859
- left: 0;
860
- width: 100%;
861
- height: 2px;
862
- background: var(--mach-primary);
863
- z-index: 5;
864
- pointer-events: none;
865
- will-change: transform;
866
- }
867
-
868
- .mach-root--row-dragging {
869
- cursor: grabbing;
870
- }
871
-
872
- .mach-root--row-dragging .mach-row {
873
- cursor: grabbing;
874
- }
875
-
876
- .mach-cell--index {
877
- color: var(--mach-header-fg);
878
- font-size: calc(var(--mach-font-size) - 1px);
879
- }
880
-
881
- .mach-editor-input.mach-editor-invalid,
882
- .mach-editor-invalid .mach-editor-input,
883
- .mach-editor-invalid .mach-select-trigger,
884
- .mach-editor-invalid input,
885
- .mach-editor-invalid select:not([hidden]) {
886
- border-color: #ef4444 !important;
887
- box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.35);
888
- }
889
-
890
- .mach-editor-validating {
891
- cursor: progress;
892
- opacity: 0.72;
893
- }
894
-
895
- .mach-footer {
896
- display: flex;
897
- flex-shrink: 0;
898
- width: 100%;
899
- overflow: hidden;
900
- background: var(--mach-header-bg);
901
- border-top: 1px solid var(--mach-border-color);
902
- font-weight: 600;
903
- color: var(--mach-header-fg);
904
- position: relative;
905
- z-index: 3;
906
- }
907
-
908
- .mach-footer-row {
909
- position: relative;
910
- overflow: hidden;
911
- flex-shrink: 0;
912
- }
913
-
914
- .mach-footer-row--center {
915
- flex: 1 1 auto;
916
- min-width: 0;
917
- }
918
-
919
- .mach-footer-cell {
920
- position: absolute;
921
- top: 0;
922
- display: flex;
923
- align-items: center;
924
- padding: 0 var(--mach-cell-padding);
925
- border-right: 1px solid transparent;
926
- overflow: hidden;
927
- white-space: nowrap;
928
- text-overflow: ellipsis;
929
- height: 100%;
930
- font-variant-numeric: tabular-nums;
931
- }
932
-
933
- .mach-root.mach-cell-borders .mach-footer-cell {
934
- border-right-color: var(--mach-border-color);
935
- }
936
-
937
- .mach-cell--range {
938
- background: color-mix(in srgb, var(--mach-primary) 7%, transparent) !important;
939
- }
940
-
941
- .mach-cell--range::after {
942
- content: "";
943
- position: absolute;
944
- inset: 0;
945
- z-index: 2;
946
- border: 0 solid var(--mach-primary);
947
- pointer-events: none;
948
- }
949
-
950
- .mach-cell--range.mach-cell--range-top::after {
951
- border-top-width: 1.5px;
952
- }
953
-
954
- .mach-cell--range.mach-cell--range-bottom::after {
955
- border-bottom-width: 1.5px;
956
- }
957
-
958
- .mach-cell--range.mach-cell--range-left::after {
959
- border-left-width: 1.5px;
960
- }
961
-
962
- .mach-cell--range.mach-cell--range-right::after {
963
- border-right-width: 1.5px;
964
- }
965
-
966
- .mach-cell--range.mach-cell--focus {
967
- box-shadow: inset 0 0 0 var(--mach-focus-width) var(--mach-cell-focus-color);
968
- }
969
-
970
- .mach-cell--range.mach-cell--focus::after {
971
- display: none;
972
- }
973
-
974
- .mach-context-menu {
975
- position: fixed;
976
- z-index: var(--mach-z-menu);
977
- display: flex;
978
- flex-direction: column;
979
- min-width: 140px;
980
- padding: 5px;
981
- background: var(--mach-body-bg);
982
- color: var(--mach-body-fg);
983
- border: 1px solid var(--mach-border-color);
984
- border-radius: var(--mach-radius-lg);
985
- box-shadow: var(--mach-shadow);
986
- font-family: var(--mach-font-family);
987
- font-size: var(--mach-font-size);
988
- }
989
-
990
- .mach-context-menu-item {
991
- text-align: left;
992
- padding: 6px 10px;
993
- border: none;
994
- border-radius: var(--mach-radius);
995
- background: transparent;
996
- color: inherit;
997
- font: inherit;
998
- cursor: pointer;
999
- white-space: nowrap;
1000
- }
1001
-
1002
- .mach-context-menu-item:hover {
1003
- background: var(--mach-row-hover-bg);
1004
- color: var(--mach-primary);
1005
- }
1006
-
1007
- .mach-fill-handle {
1008
- position: absolute;
1009
- width: 8px;
1010
- height: 8px;
1011
- border-radius: 2px;
1012
- background: var(--mach-primary);
1013
- border: 1.5px solid var(--mach-body-bg);
1014
- cursor: crosshair;
1015
- z-index: 6;
1016
- box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.35);
1017
- }
1018
-
1019
- .mach-root--filling,
1020
- .mach-root--filling * {
1021
- user-select: none !important;
1022
- cursor: crosshair !important;
1023
- }
1024
-
1025
- .mach-infinite-loading {
1026
- position: absolute;
1027
- left: 50%;
1028
- bottom: 14px;
1029
- transform: translateX(-50%);
1030
- display: flex;
1031
- align-items: center;
1032
- gap: 8px;
1033
- padding: 5px 14px;
1034
- border-radius: 999px;
1035
- background: var(--mach-body-bg);
1036
- border: 1px solid var(--mach-border-color);
1037
- box-shadow: var(--mach-shadow-sm);
1038
- color: var(--mach-header-fg);
1039
- font-size: 12px;
1040
- z-index: var(--mach-z-loading);
1041
- }
1042
-
1043
- .mach-infinite-loading .mach-spinner {
1044
- width: 14px;
1045
- height: 14px;
1046
- border-width: 2px;
1047
- }
1048
-
1049
- .mach-statusbar {
1050
- display: flex;
1051
- align-items: center;
1052
- gap: 18px;
1053
- flex-shrink: 0;
1054
- height: 28px;
1055
- padding: 0 12px;
1056
- background: var(--mach-header-bg);
1057
- border-top: 1px solid var(--mach-border-color);
1058
- color: var(--mach-header-fg);
1059
- font-size: 11px;
1060
- overflow: hidden;
1061
- white-space: nowrap;
1062
- font-variant-numeric: tabular-nums;
1063
- }
1064
-
1065
- .mach-statusbar-item--rangeAggregate {
1066
- margin-left: auto;
1067
- }
1068
-
1069
- .mach-pinned-rows {
1070
- display: flex;
1071
- width: 100%;
1072
- overflow: hidden;
1073
- background: var(--mach-header-bg);
1074
- flex-shrink: 0;
1075
- border-bottom: 1px solid var(--mach-border-color);
1076
- }
1077
-
1078
- .mach-pinned-rows--bottom {
1079
- border-bottom: none;
1080
- border-top: 1px solid var(--mach-border-color);
1081
- }
1082
-
1083
- .mach-pinned-viewport {
1084
- flex: 1 1 auto;
1085
- min-width: 0;
1086
- overflow: hidden;
1087
- }
1088
-
1089
- .mach-pinned-seg {
1090
- position: relative;
1091
- overflow: hidden;
1092
- flex-shrink: 0;
1093
- }
1094
-
1095
- .mach-pinned-seg--center {
1096
- position: relative;
1097
- }
1098
-
1099
- .mach-pinned-row {
1100
- position: relative;
1101
- width: 100%;
1102
- border-bottom: 1px solid var(--mach-row-border-color);
1103
- }
1104
-
1105
- .mach-pinned-row .mach-cell {
1106
- position: absolute;
1107
- top: 0;
1108
- background: var(--mach-header-bg);
1109
- font-weight: 600;
1110
- color: var(--mach-header-fg);
1111
- }
1112
-
1113
- .mach-pinned-row:last-child {
1114
- border-bottom: none;
1115
- }
1116
-
1117
- .mach-cell--wrap {
1118
- white-space: normal;
1119
- word-break: break-word;
1120
- line-height: 1.45;
1121
- align-items: flex-start;
1122
- padding-top: 5px;
1123
- padding-bottom: 5px;
1124
- }
1125
-
1126
- .mach-editor-input,
1127
- .mach-editor-select-control .mach-select-trigger {
1128
- width: 100%;
1129
- height: calc(var(--mach-row-h) - 8px);
1130
- padding: 0 6px;
1131
- border: 1px solid var(--mach-primary);
1132
- border-radius: var(--mach-radius-sm);
1133
- font-family: inherit;
1134
- font-size: var(--mach-font-size);
1135
- color: inherit;
1136
- background: var(--mach-body-bg);
1137
- outline: none;
1138
- }
1139
-
1140
- .mach-select-control {
1141
- position: relative;
1142
- display: inline-flex;
1143
- min-width: 0;
1144
- font-family: var(--mach-font-family, inherit);
1145
- font-size: var(--mach-font-size, 14px);
1146
- }
1147
-
1148
- .mach-select-native[hidden] {
1149
- display: none !important;
1150
- }
1151
-
1152
- .mach-select-trigger {
1153
- display: flex;
1154
- align-items: center;
1155
- justify-content: space-between;
1156
- gap: 10px;
1157
- min-width: 0;
1158
- height: 34px;
1159
- padding: 0 10px;
1160
- border: 1px solid var(--mach-border-color, #e6eaf0);
1161
- border-radius: var(--mach-radius, 6px);
1162
- outline: none;
1163
- color: var(--mach-body-fg, #1f2937);
1164
- background: var(--mach-body-bg, #fff);
1165
- font: inherit;
1166
- line-height: 1;
1167
- text-align: left;
1168
- cursor: pointer;
1169
- transition: border-color var(--mach-transition, .15s ease),
1170
- box-shadow var(--mach-transition, .15s ease),
1171
- background-color var(--mach-transition, .15s ease);
1172
- }
1173
-
1174
- .mach-select-trigger:hover {
1175
- border-color: color-mix(in srgb, var(--mach-primary, #2563eb) 44%, var(--mach-border-color, #e6eaf0));
1176
- background: color-mix(in srgb, var(--mach-primary, #2563eb) 3%, var(--mach-body-bg, #fff));
1177
- }
1178
-
1179
- .mach-select-trigger:focus-visible,
1180
- .mach-select-trigger[aria-expanded="true"] {
1181
- border-color: var(--mach-primary, #2563eb);
1182
- box-shadow: 0 0 0 3px color-mix(in srgb, var(--mach-primary, #2563eb) 12%, transparent);
1183
- }
1184
-
1185
- .mach-select-value {
1186
- min-width: 0;
1187
- overflow: hidden;
1188
- text-overflow: ellipsis;
1189
- white-space: nowrap;
1190
- }
1191
-
1192
- .mach-select-caret {
1193
- width: 8px;
1194
- height: 8px;
1195
- flex: 0 0 auto;
1196
- border-right: 1.5px solid currentColor;
1197
- border-bottom: 1.5px solid currentColor;
1198
- transform: translateY(-2px) rotate(45deg);
1199
- transition: transform var(--mach-transition, .15s ease);
1200
- }
1201
-
1202
- .mach-select-trigger[aria-expanded="true"] .mach-select-caret {
1203
- transform: translateY(2px) rotate(225deg);
1204
- }
1205
-
1206
- .mach-select-listbox {
1207
- position: fixed;
1208
- z-index: var(--mach-z-menu, 1200);
1209
- display: none;
1210
- flex-direction: column;
1211
- gap: 2px;
1212
- min-width: 112px;
1213
- max-width: min(320px, calc(100vw - 16px));
1214
- max-height: min(244px, calc(100vh - 16px));
1215
- padding: 5px;
1216
- overflow: auto;
1217
- overscroll-behavior: contain;
1218
- border: 1px solid color-mix(in srgb, var(--mach-border-color, #e6eaf0) 88%, var(--mach-primary, #2563eb));
1219
- border-radius: calc(var(--mach-radius-lg, 8px) + 1px);
1220
- color: var(--mach-body-fg, #1f2937);
1221
- background: var(--mach-body-bg, #fff);
1222
- box-shadow: 0 14px 36px color-mix(in srgb, var(--mach-body-fg, #1f2937) 18%, transparent),
1223
- var(--mach-shadow-sm, 0 1px 3px rgba(15, 23, 42, .12));
1224
- font-family: var(--mach-font-family, inherit);
1225
- font-size: var(--mach-font-size, 14px);
1226
- isolation: isolate;
1227
- }
1228
-
1229
- .mach-select-listbox--open {
1230
- display: flex;
1231
- animation: mach-select-listbox-in .12s ease-out;
1232
- }
1233
-
1234
- .mach-select-option {
1235
- position: relative;
1236
- display: flex;
1237
- align-items: center;
1238
- flex: 0 0 auto;
1239
- width: 100%;
1240
- min-height: 32px;
1241
- padding: 0 30px 0 10px;
1242
- border: 0;
1243
- border-radius: var(--mach-radius, 6px);
1244
- outline: none;
1245
- color: inherit;
1246
- background: transparent;
1247
- font: inherit;
1248
- text-align: left;
1249
- cursor: pointer;
1250
- transition: color var(--mach-transition, .15s ease), background-color var(--mach-transition, .15s ease);
1251
- }
1252
-
1253
- .mach-select-option:hover,
1254
- .mach-select-option:focus-visible,
1255
- .mach-select-option--active {
1256
- color: var(--mach-primary, #2563eb);
1257
- background: color-mix(in srgb, var(--mach-primary, #2563eb) 9%, var(--mach-body-bg, #fff));
1258
- }
1259
-
1260
- .mach-select-option[aria-selected="true"] {
1261
- color: var(--mach-primary, #2563eb);
1262
- background: color-mix(in srgb, var(--mach-primary, #2563eb) 13%, var(--mach-body-bg, #fff));
1263
- font-weight: 600;
1264
- }
1265
-
1266
- .mach-select-option[aria-selected="true"]::after {
1267
- content: "✓";
1268
- position: absolute;
1269
- right: 10px;
1270
- font-size: 12px;
1271
- font-weight: 700;
1272
- }
1273
-
1274
- .mach-select-option:disabled {
1275
- opacity: .42;
1276
- cursor: not-allowed;
1277
- }
1278
-
1279
- @keyframes mach-select-listbox-in {
1280
- from { transform: translateY(-3px) scale(.99); }
1281
- to { transform: translateY(0) scale(1); }
1282
- }
1283
-
1284
- .mach-select-listbox--above {
1285
- transform-origin: bottom;
1286
- }
1287
-
1288
- .mach-filter-select-control {
1289
- width: 100%;
1290
- }
1291
-
1292
- .mach-filter-select-trigger {
1293
- width: 100%;
1294
- background: color-mix(in srgb, var(--mach-header-bg) 62%, var(--mach-body-bg));
1295
- }
1296
-
1297
- .mach-filter-listbox {
1298
- width: auto;
1299
- }
1300
-
1301
- .mach-overlay {
1302
- position: absolute;
1303
- inset: 0;
1304
- display: flex;
1305
- align-items: center;
1306
- justify-content: center;
1307
- background: var(--mach-body-bg);
1308
- z-index: var(--mach-z-overlay);
1309
- }
1310
-
1311
- .mach-overlay-text {
1312
- color: var(--mach-header-fg);
1313
- font-size: var(--mach-font-size);
1314
- }
1315
-
1316
- .mach-overlay-content {
1317
- max-width: min(100%, 320px);
1318
- }
1319
-
1320
- .mach-loading {
1321
- display: grid;
1322
- justify-items: center;
1323
- gap: 14px;
1324
- min-width: 172px;
1325
- padding: 20px 24px;
1326
- }
1327
-
1328
- .mach-loading__visual {
1329
- position: relative;
1330
- display: grid;
1331
- gap: 8px;
1332
- width: 132px;
1333
- padding: 14px 16px;
1334
- overflow: hidden;
1335
- background: color-mix(in srgb, var(--mach-header-bg) 82%, var(--mach-body-bg));
1336
- border: 1px solid var(--mach-border-color);
1337
- border-radius: var(--mach-radius-lg);
1338
- box-shadow: var(--mach-shadow-sm);
1339
- }
1340
-
1341
- .mach-loading__visual::before {
1342
- content: "";
1343
- position: absolute;
1344
- inset: 0;
1345
- transform: translateX(-100%);
1346
- background: linear-gradient(
1347
- 100deg,
1348
- transparent 20%,
1349
- color-mix(in srgb, var(--mach-primary) 11%, transparent) 50%,
1350
- transparent 80%
1351
- );
1352
- animation: mach-loading-sweep 1.35s ease-in-out infinite;
1353
- }
1354
-
1355
- .mach-loading__row {
1356
- height: 7px;
1357
- border-radius: 999px;
1358
- background: color-mix(in srgb, var(--mach-primary) 13%, var(--mach-border-color));
1359
- }
1360
-
1361
- .mach-loading__row:nth-child(2) { width: 82%; }
1362
- .mach-loading__row:nth-child(3) { width: 92%; }
1363
- .mach-loading__row:nth-child(4) { width: 66%; }
1364
-
1365
- .mach-loading__status {
1366
- display: inline-flex;
1367
- align-items: center;
1368
- gap: 8px;
1369
- color: var(--mach-header-fg);
1370
- font-size: var(--mach-font-size-sm);
1371
- }
1372
-
1373
- .mach-loading__spinner {
1374
- width: 14px;
1375
- height: 14px;
1376
- }
1377
-
1378
- .mach-loading__label {
1379
- line-height: 1;
1380
- }
1381
-
1382
- .mach-spinner {
1383
- width: 22px;
1384
- height: 22px;
1385
- border: 2px solid var(--mach-border-color);
1386
- border-top-color: var(--mach-primary);
1387
- border-radius: 50%;
1388
- animation: mach-spin 0.8s linear infinite;
1389
- }
1390
-
1391
- @keyframes mach-spin {
1392
- to {
1393
- transform: rotate(360deg);
1394
- }
1395
- }
1396
-
1397
- @keyframes mach-loading-sweep {
1398
- to {
1399
- transform: translateX(100%);
1400
- }
1401
- }
1402
-
1403
- .mach-filter-panel {
1404
- position: fixed;
1405
- z-index: var(--mach-z-popup);
1406
- display: flex;
1407
- flex-direction: column;
1408
- gap: 10px;
1409
- width: 224px;
1410
- max-width: calc(100vw - 16px);
1411
- padding: 12px;
1412
- background: var(--mach-body-bg);
1413
- color: var(--mach-body-fg);
1414
- border: 1px solid color-mix(in srgb, var(--mach-border-color) 88%, var(--mach-primary));
1415
- border-radius: calc(var(--mach-radius-lg) + 2px);
1416
- box-shadow: 0 14px 36px color-mix(in srgb, var(--mach-body-fg) 16%, transparent), var(--mach-shadow-sm);
1417
- font-family: var(--mach-font-family);
1418
- font-size: var(--mach-font-size);
1419
- animation: mach-filter-panel-in 0.14s ease-out;
1420
- }
1421
-
1422
- .mach-filter-body {
1423
- display: flex;
1424
- flex-direction: column;
1425
- gap: 8px;
1426
- }
1427
-
1428
- .mach-filter-input {
1429
- width: 100%;
1430
- height: 34px;
1431
- padding: 0 10px;
1432
- border: 1px solid var(--mach-border-color);
1433
- border-radius: var(--mach-radius);
1434
- font-family: inherit;
1435
- font-size: var(--mach-font-size);
1436
- color: inherit;
1437
- background: var(--mach-body-bg);
1438
- outline: none;
1439
- transition: border-color var(--mach-transition), box-shadow var(--mach-transition);
1440
- }
1441
-
1442
- .mach-filter-input:focus {
1443
- border-color: var(--mach-primary);
1444
- box-shadow: 0 0 0 3px color-mix(in srgb, var(--mach-primary) 12%, transparent);
1445
- }
1446
-
1447
- @keyframes mach-filter-panel-in {
1448
- from {
1449
- opacity: 0;
1450
- transform: translateY(-3px) scale(0.99);
1451
- }
1452
- }
1453
-
1454
- .mach-filter-set-list {
1455
- max-height: 220px;
1456
- overflow: auto;
1457
- display: flex;
1458
- flex-direction: column;
1459
- gap: 1px;
1460
- border: 1px solid var(--mach-border-color);
1461
- border-radius: var(--mach-radius);
1462
- padding: 4px;
1463
- }
1464
-
1465
- .mach-filter-set-item {
1466
- display: flex;
1467
- align-items: center;
1468
- gap: 6px;
1469
- padding: 3px 5px;
1470
- border-radius: var(--mach-radius-sm);
1471
- cursor: pointer;
1472
- white-space: nowrap;
1473
- overflow: hidden;
1474
- text-overflow: ellipsis;
1475
- }
1476
-
1477
- .mach-filter-set-item:hover {
1478
- background: var(--mach-row-hover-bg);
1479
- }
1480
-
1481
- .mach-filter-set-item input {
1482
- accent-color: var(--mach-primary);
1483
- margin: 0;
1484
- width: 13px;
1485
- height: 13px;
1486
- }
1487
-
1488
- .mach-filter-footer {
1489
- display: flex;
1490
- justify-content: flex-end;
1491
- gap: 6px;
1492
- }
1493
-
1494
- .mach-filter-footer button {
1495
- padding: 4px 12px;
1496
- border-radius: var(--mach-radius);
1497
- border: 1px solid var(--mach-border-color);
1498
- background: var(--mach-body-bg);
1499
- color: inherit;
1500
- font-family: inherit;
1501
- font-size: var(--mach-font-size);
1502
- cursor: pointer;
1503
- }
1504
-
1505
- .mach-filter-footer button:hover {
1506
- border-color: var(--mach-primary);
1507
- color: var(--mach-primary);
1508
- }
1509
-
1510
- .mach-filter-btn-apply {
1511
- background: var(--mach-primary) !important;
1512
- border-color: var(--mach-primary) !important;
1513
- color: #fff !important;
1514
- }
1515
-
1516
- .mach-filter-btn-apply:hover {
1517
- opacity: 0.9;
1518
- color: #fff !important;
1519
- }
1520
-
1521
- .mach-column-panel {
1522
- min-width: 220px;
1523
- max-height: 70vh;
1524
- overflow: auto;
1525
- }
1526
-
1527
- .mach-column-panel[role="dialog"] {
1528
- width: min(440px, calc(100vw - 16px));
1529
- }
1530
-
1531
- .mach-column-workbench-search {
1532
- box-sizing: border-box;
1533
- width: 100%;
1534
- height: 30px;
1535
- padding: 0 9px;
1536
- border: 1px solid var(--mach-border-color);
1537
- border-radius: var(--mach-radius);
1538
- background: var(--mach-body-bg);
1539
- color: var(--mach-body-fg);
1540
- font: inherit;
1541
- outline: none;
1542
- }
1543
-
1544
- .mach-column-workbench-search:focus {
1545
- border-color: var(--mach-primary);
1546
- box-shadow: 0 0 0 2px var(--mach-primary-weak);
1547
- }
1548
-
1549
- .mach-column-panel-title {
1550
- font-weight: 600;
1551
- color: var(--mach-header-fg);
1552
- white-space: nowrap;
1553
- overflow: hidden;
1554
- text-overflow: ellipsis;
1555
- }
1556
-
1557
- .mach-column-panel-subtitle {
1558
- font-size: 11px;
1559
- color: var(--mach-header-fg);
1560
- margin-top: 2px;
1561
- }
1562
-
1563
- .mach-column-panel-actions {
1564
- display: flex;
1565
- gap: 6px;
1566
- flex-wrap: wrap;
1567
- }
1568
-
1569
- .mach-column-panel-btn {
1570
- flex: 1;
1571
- min-width: 60px;
1572
- padding: 4px 8px;
1573
- border-radius: var(--mach-radius);
1574
- border: 1px solid var(--mach-border-color);
1575
- background: var(--mach-body-bg);
1576
- color: inherit;
1577
- font-family: inherit;
1578
- font-size: 12px;
1579
- cursor: pointer;
1580
- white-space: nowrap;
1581
- }
1582
-
1583
- .mach-column-panel-btn:hover {
1584
- border-color: var(--mach-primary);
1585
- color: var(--mach-primary);
1586
- }
1587
-
1588
- .mach-column-panel-divider {
1589
- height: 1px;
1590
- background: var(--mach-border-color);
1591
- margin: 4px 0;
1592
- }
1593
-
1594
- .mach-column-panel-list {
1595
- max-height: 280px;
1596
- overflow: auto;
1597
- display: flex;
1598
- flex-direction: column;
1599
- gap: 1px;
1600
- border: 1px solid var(--mach-border-color);
1601
- border-radius: var(--mach-radius);
1602
- padding: 4px;
1603
- }
1604
-
1605
- .mach-column-workbench-item {
1606
- display: grid;
1607
- grid-template-columns: minmax(120px, 1fr) 108px 26px 26px;
1608
- align-items: center;
1609
- gap: 4px;
1610
- min-height: 32px;
1611
- padding: 2px 3px;
1612
- border-radius: var(--mach-radius);
1613
- }
1614
-
1615
- .mach-column-workbench-item:hover {
1616
- background: var(--mach-row-hover-bg);
1617
- }
1618
-
1619
- .mach-column-workbench-label {
1620
- display: flex;
1621
- min-width: 0;
1622
- align-items: center;
1623
- gap: 7px;
1624
- cursor: pointer;
1625
- }
1626
-
1627
- .mach-column-workbench-name {
1628
- overflow: hidden;
1629
- text-overflow: ellipsis;
1630
- white-space: nowrap;
1631
- }
1632
-
1633
- .mach-column-workbench-pin-control,
1634
- .mach-column-workbench-move {
1635
- height: 26px;
1636
- border: 1px solid var(--mach-border-color);
1637
- border-radius: var(--mach-radius);
1638
- background: var(--mach-body-bg);
1639
- color: inherit;
1640
- font: inherit;
1641
- }
1642
-
1643
- .mach-column-workbench-pin-control {
1644
- width: 108px;
1645
- border: 0;
1646
- }
1647
-
1648
- .mach-column-workbench-pin-control .mach-select-trigger {
1649
- width: 100%;
1650
- height: 26px;
1651
- padding: 0 7px;
1652
- border-radius: var(--mach-radius);
1653
- font-size: 12px;
1654
- box-shadow: none;
1655
- }
1656
-
1657
- .mach-column-workbench-move {
1658
- padding: 0;
1659
- cursor: pointer;
1660
- }
1661
-
1662
- .mach-column-workbench-move:disabled {
1663
- cursor: not-allowed;
1664
- opacity: 0.35;
1665
- }
1666
-
1667
- .mach-tag {
1668
- display: inline-flex;
1669
- align-items: center;
1670
- gap: 4px;
1671
- padding: 0 8px;
1672
- height: 20px;
1673
- line-height: 18px;
1674
- border-radius: 999px;
1675
- font-size: var(--mach-font-size-sm);
1676
- font-weight: 500;
1677
- white-space: nowrap;
1678
- }
1679
-
1680
- .mach-tag::before {
1681
- content: "";
1682
- width: 5px;
1683
- height: 5px;
1684
- border-radius: 999px;
1685
- background: currentColor;
1686
- }
1687
-
1688
- .mach-tag--success {
1689
- color: var(--mach-success);
1690
- background: color-mix(in srgb, var(--mach-success) 10%, transparent);
1691
- }
1692
-
1693
- .mach-tag--warning {
1694
- color: var(--mach-warning);
1695
- background: color-mix(in srgb, var(--mach-warning) 12%, transparent);
1696
- }
1697
-
1698
- .mach-tag--danger {
1699
- color: var(--mach-danger);
1700
- background: color-mix(in srgb, var(--mach-danger) 10%, transparent);
1701
- }
1702
-
1703
- .mach-tag--info {
1704
- color: var(--mach-info);
1705
- background: color-mix(in srgb, var(--mach-info) 10%, transparent);
1706
- }
1707
-
1708
- .mach-tag--neutral {
1709
- color: var(--mach-header-fg);
1710
- background: color-mix(in srgb, var(--mach-header-fg) 10%, transparent);
1711
- }
1712
-
1713
- .mach-progress {
1714
- display: flex;
1715
- align-items: center;
1716
- gap: 6px;
1717
- width: 100%;
1718
- }
1719
-
1720
- .mach-progress__track {
1721
- flex: 1;
1722
- min-width: 0;
1723
- height: 6px;
1724
- border-radius: 999px;
1725
- background: color-mix(in srgb, var(--mach-header-fg) 14%, transparent);
1726
- overflow: hidden;
1727
- }
1728
-
1729
- .mach-progress__bar {
1730
- height: 100%;
1731
- border-radius: 999px;
1732
- background: var(--mach-primary);
1733
- transition: width var(--mach-transition);
1734
- }
1735
-
1736
- .mach-progress__label {
1737
- flex-shrink: 0;
1738
- font-size: var(--mach-font-size-sm);
1739
- color: var(--mach-header-fg);
1740
- font-variant-numeric: tabular-nums;
1741
- }
1742
-
1743
- .mach-link {
1744
- color: var(--mach-primary);
1745
- cursor: pointer;
1746
- }
1747
-
1748
- .mach-link:hover {
1749
- text-decoration: underline;
1750
- }
1751
-
1752
- .mach-actions {
1753
- display: inline-flex;
1754
- align-items: center;
1755
- gap: 2px;
1756
- }
1757
-
1758
- .mach-sr-only {
1759
- position: absolute !important;
1760
- width: 1px !important;
1761
- height: 1px !important;
1762
- padding: 0 !important;
1763
- margin: -1px !important;
1764
- overflow: hidden !important;
1765
- clip: rect(0, 0, 0, 0) !important;
1766
- white-space: nowrap !important;
1767
- border: 0 !important;
1768
- }
1769
-
1770
- .mach-action-btn {
1771
- display: inline-flex;
1772
- align-items: center;
1773
- justify-content: center;
1774
- min-width: 24px;
1775
- height: 24px;
1776
- padding: 0 4px;
1777
- border: none;
1778
- border-radius: var(--mach-radius-sm);
1779
- background: transparent;
1780
- color: var(--mach-header-fg);
1781
- font-size: var(--mach-font-size-sm);
1782
- line-height: 1;
1783
- cursor: pointer;
1784
- white-space: nowrap;
1785
- transition: color var(--mach-transition), background-color var(--mach-transition), transform var(--mach-transition);
1786
- }
1787
-
1788
- .mach-action-btn:hover {
1789
- background: var(--mach-row-hover-bg);
1790
- color: var(--mach-primary);
1791
- }
1792
-
1793
- .mach-action-btn--danger:hover {
1794
- background: color-mix(in srgb, var(--mach-danger) 10%, transparent);
1795
- color: var(--mach-danger);
1796
- transform: scale(1.06);
1797
- }
1798
-
1799
- .mach-action-btn--success:hover {
1800
- background: color-mix(in srgb, var(--mach-success) 12%, transparent);
1801
- color: var(--mach-success);
1802
- transform: scale(1.06);
1803
- }
1804
-
1805
- .mach-action-btn--primary {
1806
- color: var(--mach-primary);
1807
- }
1808
-
1809
- .mach-action-btn--warning {
1810
- color: var(--mach-warning);
1811
- }
1812
-
1813
- .mach-action-btn--success,
1814
- .mach-edit-control--confirm {
1815
- color: var(--mach-success);
1816
- }
1817
-
1818
- .mach-action-btn--danger {
1819
- color: var(--mach-danger);
1820
- }
1821
-
1822
- .mach-action-btn:focus-visible,
1823
- .mach-edit-control:focus-visible,
1824
- .mach-cell-edit-trigger:focus-visible,
1825
- .mach-action-drawer__close:focus-visible {
1826
- outline: 2px solid color-mix(in srgb, var(--mach-primary) 65%, transparent);
1827
- outline-offset: 1px;
1828
- }
1829
-
1830
- .mach-action-btn:disabled {
1831
- cursor: not-allowed;
1832
- opacity: 0.4;
1833
- }
1834
-
1835
- .mach-action-btn--loading svg {
1836
- animation: mach-spin 0.8s linear infinite;
1837
- }
1838
-
1839
- .mach-dictionary-value--loading {
1840
- color: var(--mach-header-fg);
1841
- opacity: 0.72;
1842
- }
1843
-
1844
- .mach-dictionary-value--error {
1845
- text-decoration: underline dotted;
1846
- text-underline-offset: 3px;
1847
- }
1848
-
1849
- .mach-action-btn--icon {
1850
- padding: 0;
1851
- width: 24px;
1852
- }
1853
-
1854
- .mach-context-menu-item--danger {
1855
- color: var(--mach-danger);
1856
- }
1857
-
1858
- .mach-context-menu-item,
1859
- .mach-action-drawer__item {
1860
- display: flex;
1861
- align-items: center;
1862
- gap: 9px;
1863
- }
1864
-
1865
- .mach-context-menu-item--primary,
1866
- .mach-action-drawer__item--primary {
1867
- color: var(--mach-primary);
1868
- }
1869
-
1870
- .mach-context-menu-item--warning,
1871
- .mach-action-drawer__item--warning {
1872
- color: var(--mach-warning);
1873
- }
1874
-
1875
- .mach-context-menu-item--success,
1876
- .mach-action-drawer__item--success {
1877
- color: var(--mach-success);
1878
- }
1879
-
1880
- .mach-context-menu-item--danger,
1881
- .mach-action-drawer__item--danger {
1882
- color: var(--mach-danger);
1883
- }
1884
-
1885
- .mach-action-drawer-backdrop {
1886
- position: fixed;
1887
- inset: 0;
1888
- z-index: calc(var(--mach-z-menu) + 2);
1889
- background: rgba(15, 23, 42, 0.2);
1890
- backdrop-filter: blur(1px);
1891
- }
1892
-
1893
- .mach-action-drawer {
1894
- position: absolute;
1895
- top: 0;
1896
- right: 0;
1897
- display: flex;
1898
- flex-direction: column;
1899
- width: min(340px, calc(100vw - 24px));
1900
- height: 100%;
1901
- background: var(--mach-body-bg);
1902
- color: var(--mach-body-fg);
1903
- border-left: 1px solid var(--mach-border-color);
1904
- box-shadow: -16px 0 40px rgba(15, 23, 42, 0.14);
1905
- font-family: var(--mach-font-family);
1906
- animation: mach-drawer-in 0.18s ease-out;
1907
- }
1908
-
1909
- .mach-action-drawer__header {
1910
- display: flex;
1911
- align-items: center;
1912
- justify-content: space-between;
1913
- min-height: 56px;
1914
- padding: 0 16px 0 20px;
1915
- border-bottom: 1px solid var(--mach-border-color);
1916
- }
1917
-
1918
- .mach-action-drawer__close {
1919
- display: inline-flex;
1920
- align-items: center;
1921
- justify-content: center;
1922
- width: 30px;
1923
- height: 30px;
1924
- padding: 0;
1925
- border: 0;
1926
- border-radius: var(--mach-radius);
1927
- background: transparent;
1928
- color: var(--mach-header-fg);
1929
- cursor: pointer;
1930
- }
1931
-
1932
- .mach-action-drawer__close:hover {
1933
- color: var(--mach-primary);
1934
- background: var(--mach-row-hover-bg);
1935
- }
1936
-
1937
- .mach-action-drawer__body {
1938
- display: flex;
1939
- flex-direction: column;
1940
- gap: 4px;
1941
- padding: 12px;
1942
- overflow: auto;
1943
- }
1944
-
1945
- .mach-action-drawer__item {
1946
- width: 100%;
1947
- min-height: 40px;
1948
- padding: 0 12px;
1949
- border: 0;
1950
- border-radius: var(--mach-radius);
1951
- background: transparent;
1952
- font: inherit;
1953
- text-align: left;
1954
- cursor: pointer;
1955
- }
1956
-
1957
- .mach-action-drawer__item:hover:not(:disabled) {
1958
- background: var(--mach-row-hover-bg);
1959
- }
1960
-
1961
- .mach-action-drawer__item:disabled {
1962
- opacity: 0.4;
1963
- cursor: not-allowed;
1964
- }
1965
-
1966
- @keyframes mach-drawer-in {
1967
- from { transform: translateX(18px); opacity: 0; }
1968
- to { transform: translateX(0); opacity: 1; }
1969
- }
1970
-
1971
- @media (max-width: 640px) {
1972
- .mach-action-drawer {
1973
- top: auto;
1974
- bottom: 0;
1975
- width: 100%;
1976
- height: auto;
1977
- max-height: min(70vh, 520px);
1978
- border-top: 1px solid var(--mach-border-color);
1979
- border-left: 0;
1980
- border-radius: var(--mach-radius-lg) var(--mach-radius-lg) 0 0;
1981
- animation-name: mach-drawer-up;
1982
- }
1983
- }
1984
-
1985
- @keyframes mach-drawer-up {
1986
- from { transform: translateY(18px); opacity: 0; }
1987
- to { transform: translateY(0); opacity: 1; }
1988
- }
1989
-
1990
- .mach-cell:has(.mach-cell-edit-trigger) {
1991
- padding-right: 29px;
1992
- }
1993
-
1994
- .mach-cell-edit-trigger {
1995
- position: absolute;
1996
- right: 5px;
1997
- top: 50%;
1998
- display: inline-flex;
1999
- align-items: center;
2000
- justify-content: center;
2001
- width: 20px;
2002
- height: 20px;
2003
- padding: 0;
2004
- transform: translateY(-50%);
2005
- border: 0;
2006
- border-radius: var(--mach-radius-sm);
2007
- background: transparent;
2008
- color: var(--mach-header-fg);
2009
- cursor: pointer;
2010
- opacity: 0;
2011
- transition: opacity var(--mach-transition), color var(--mach-transition), background-color var(--mach-transition);
2012
- }
2013
-
2014
- .mach-cell-edit-trigger svg {
2015
- width: 13px;
2016
- height: 13px;
2017
- }
2018
-
2019
- .mach-cell:hover .mach-cell-edit-trigger--hover,
2020
- .mach-cell:focus-within .mach-cell-edit-trigger--hover,
2021
- .mach-cell-edit-trigger--always {
2022
- opacity: 0.72;
2023
- }
2024
-
2025
- .mach-cell-edit-trigger:hover {
2026
- opacity: 1;
2027
- color: var(--mach-primary);
2028
- background: color-mix(in srgb, var(--mach-primary) 9%, transparent);
2029
- }
2030
-
2031
- .mach-cell--editing {
2032
- overflow: visible;
2033
- z-index: 4;
2034
- }
2035
-
2036
- .mach-cell-editor-shell,
2037
- .mach-row-editor-shell {
2038
- display: flex;
2039
- align-items: center;
2040
- width: 100%;
2041
- min-width: 0;
2042
- gap: 5px;
2043
- }
2044
-
2045
- .mach-cell-editor-shell > .mach-editor-input,
2046
- .mach-cell-editor-shell > .mach-editor-select-control,
2047
- .mach-cell-editor-shell > :not(.mach-cell-editor-controls),
2048
- .mach-row-editor-shell > * {
2049
- flex: 1 1 auto;
2050
- min-width: 0;
2051
- }
2052
-
2053
- .mach-cell-editor-controls {
2054
- display: inline-flex;
2055
- flex: 0 0 auto;
2056
- align-items: center;
2057
- gap: 2px;
2058
- padding: 2px;
2059
- border: 1px solid var(--mach-border-color);
2060
- border-radius: var(--mach-radius);
2061
- background: var(--mach-body-bg);
2062
- box-shadow: var(--mach-shadow-sm);
2063
- }
2064
-
2065
- .mach-edit-control {
2066
- display: inline-flex;
2067
- align-items: center;
2068
- justify-content: center;
2069
- width: 22px;
2070
- height: 22px;
2071
- padding: 0;
2072
- border: 0;
2073
- border-radius: var(--mach-radius-sm);
2074
- background: transparent;
2075
- color: var(--mach-header-fg);
2076
- cursor: pointer;
2077
- transition: color var(--mach-transition), background-color var(--mach-transition), transform var(--mach-transition);
2078
- }
2079
-
2080
- .mach-edit-control svg {
2081
- width: 14px;
2082
- height: 14px;
2083
- }
2084
-
2085
- .mach-edit-control--confirm {
2086
- color: var(--mach-success);
2087
- }
2088
-
2089
- .mach-edit-control--confirm:hover {
2090
- background: color-mix(in srgb, var(--mach-success) 12%, transparent);
2091
- transform: scale(1.06);
2092
- }
2093
-
2094
- .mach-edit-control--cancel {
2095
- color: var(--mach-danger);
2096
- }
2097
-
2098
- .mach-edit-control--cancel:hover {
2099
- background: color-mix(in srgb, var(--mach-danger) 10%, transparent);
2100
- transform: scale(1.06);
2101
- }
2102
-
2103
- .mach-edit-control:disabled {
2104
- opacity: 0.35;
2105
- cursor: wait;
2106
- }
2107
-
2108
- .mach-row--editing,
2109
- .mach-row--editing .mach-cell {
2110
- background: color-mix(in srgb, var(--mach-primary) 3%, var(--mach-body-bg));
2111
- }
2112
-
2113
- .mach-cell--row-editing .mach-editor-input,
2114
- .mach-cell--row-editing .mach-editor-select-control .mach-select-trigger {
2115
- border-color: color-mix(in srgb, var(--mach-primary) 45%, var(--mach-border-color));
2116
- box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
2117
- }
2118
-
2119
- .mach-cell--row-editing .mach-editor-input:focus,
2120
- .mach-cell--row-editing .mach-editor-select-control .mach-select-trigger:focus-visible,
2121
- .mach-cell--row-editing .mach-editor-select-control .mach-select-trigger[aria-expanded="true"] {
2122
- border-color: var(--mach-primary);
2123
- box-shadow: 0 0 0 2px color-mix(in srgb, var(--mach-primary) 12%, transparent);
2124
- }
2125
-
2126
- .mach-tooltip {
2127
- position: fixed;
2128
- z-index: var(--mach-z-menu);
2129
- max-width: 320px;
2130
- padding: 6px 10px;
2131
- border-radius: var(--mach-radius);
2132
- background: var(--mach-body-fg);
2133
- color: var(--mach-body-bg);
2134
- font-size: var(--mach-font-size-sm);
2135
- line-height: 1.5;
2136
- box-shadow: var(--mach-shadow);
2137
- pointer-events: none;
2138
- word-break: break-word;
2139
- }
2140
-
2141
- .mach-cell--flash {
2142
- animation: mach-flash 0.8s ease-out;
2143
- }
2144
-
2145
- @keyframes mach-flash {
2146
- 0% {
2147
- background-color: color-mix(in srgb, var(--mach-primary) 35%, transparent);
2148
- }
2149
- 100% {
2150
- background-color: transparent;
2151
- }
2152
- }
2153
-
2154
- .mach-context-menu-separator {
2155
- height: 1px;
2156
- margin: 4px 6px;
2157
- background: var(--mach-border-color);
2158
- }
2159
-
2160
- .mach-context-menu-item:disabled {
2161
- opacity: 0.45;
2162
- cursor: not-allowed;
2163
- }
2164
-
2165
- .mach-pagination {
2166
- display: flex;
2167
- align-items: center;
2168
- justify-content: flex-end;
2169
- gap: 6px;
2170
- flex-shrink: 0;
2171
- height: 40px;
2172
- padding: 0 12px;
2173
- background: var(--mach-body-bg);
2174
- border-top: var(--mach-border-width) solid var(--mach-border-color);
2175
- color: var(--mach-body-fg);
2176
- font-size: var(--mach-font-size-sm);
2177
- user-select: none;
2178
- }
2179
-
2180
- .mach-pagination-total {
2181
- color: var(--mach-header-fg);
2182
- margin-right: 8px;
2183
- font-variant-numeric: tabular-nums;
2184
- }
2185
-
2186
- .mach-pagination-page {
2187
- min-width: 72px;
2188
- text-align: center;
2189
- color: var(--mach-body-fg);
2190
- font-variant-numeric: tabular-nums;
2191
- }
2192
-
2193
- .mach-pagination-btn {
2194
- display: inline-flex;
2195
- align-items: center;
2196
- justify-content: center;
2197
- width: 24px;
2198
- height: 24px;
2199
- border: var(--mach-border-width) solid var(--mach-border-color);
2200
- border-radius: var(--mach-radius-sm);
2201
- background: var(--mach-body-bg);
2202
- color: var(--mach-header-fg);
2203
- font-size: 13px;
2204
- line-height: 1;
2205
- cursor: pointer;
2206
- transition: border-color var(--mach-transition), color var(--mach-transition),
2207
- background-color var(--mach-transition);
2208
- }
2209
-
2210
- .mach-pagination-btn:hover:not(:disabled) {
2211
- border-color: var(--mach-primary);
2212
- color: var(--mach-primary);
2213
- }
2214
-
2215
- .mach-pagination-btn:disabled {
2216
- opacity: 0.35;
2217
- cursor: not-allowed;
2218
- }
2219
-
2220
- .mach-pagination-size-control {
2221
- height: 24px;
2222
- margin-left: 6px;
2223
- width: 92px;
2224
- font-size: var(--mach-font-size-sm);
2225
- }
2226
-
2227
- .mach-pagination-size-control .mach-select-trigger {
2228
- width: 100%;
2229
- height: 24px;
2230
- padding: 0 6px;
2231
- border-width: var(--mach-border-width);
2232
- border-radius: var(--mach-radius-sm);
2233
- color: var(--mach-header-fg);
2234
- box-shadow: none;
2235
- }
2236
-
2237
- .mach-watermark {
2238
- position: absolute;
2239
- inset: 0;
2240
- z-index: 6;
2241
- pointer-events: none;
2242
- background-repeat: repeat;
2243
- }
2244
-
2245
- .mach-empty {
2246
- display: flex;
2247
- flex-direction: column;
2248
- align-items: center;
2249
- justify-content: center;
2250
- gap: 4px;
2251
- padding: 32px 16px;
2252
- min-height: 160px;
2253
- }
2254
-
2255
- .mach-empty__icon {
2256
- margin-bottom: 6px;
2257
- }
2258
-
2259
- .mach-empty__title {
2260
- font-size: var(--mach-font-size);
2261
- color: var(--mach-body-fg);
2262
- font-weight: 500;
2263
- }
2264
-
2265
- .mach-empty__hint {
2266
- font-size: var(--mach-font-size-sm);
2267
- color: var(--mach-header-fg);
2268
- }
2269
-
2270
- @media (prefers-reduced-motion: reduce) {
2271
- .mach-spinner,
2272
- .mach-loading__visual::before {
2273
- animation-duration: 2.4s;
2274
- }
2275
- }
2276
-
2277
- .mach-cell--center {
2278
- justify-content: center;
2279
- }
2280
-
2281
- .mach-cell--right {
2282
- justify-content: flex-end;
2283
- }
2284
-
2285
- .mach-header-cell--center .mach-header-label {
2286
- text-align: center;
2287
- }
2288
-
2289
- .mach-header-cell--right .mach-header-label {
2290
- text-align: right;
2291
- }
2292
-
2293
- @media (prefers-reduced-motion: reduce) {
2294
- .mach-root *,
2295
- .mach-root *::before,
2296
- .mach-root *::after {
2297
- scroll-behavior: auto !important;
2298
- animation-duration: 0.01ms !important;
2299
- animation-iteration-count: 1 !important;
2300
- transition-duration: 0.01ms !important;
2301
- }
2302
-
2303
- .mach-action-drawer {
2304
- animation: none !important;
2305
- }
2306
- }
1
+ .mach-root{--mach-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;--mach-font-size: 13px;--mach-font-size-sm: 12px;--mach-header-font-weight: 650;--mach-cell-padding: 9px;--mach-row-h: 36px;--mach-header-h: 40px;--mach-primary: #2563eb;--mach-primary-weak: #dbeafe;--mach-success: #16a34a;--mach-warning: #d97706;--mach-danger: #dc2626;--mach-info: #0284c7;--mach-border-color: #e6eaf0;--mach-row-border-color: #eef1f6;--mach-cell-border-color: transparent;--mach-border-width: 1px;--mach-header-border-width: 1px;--mach-header-accent-color: #d9e1eb;--mach-header-bg: #f4f7fb;--mach-header-group-bg: #edf2f8;--mach-header-fg: #344054;--mach-body-bg: #ffffff;--mach-body-fg: #26303f;--mach-row-hover-bg: #f6f8fa;--mach-row-selected-bg: #eff6ff;--mach-zebra-bg: #fafbfd;--mach-cell-focus-color: #2563eb;--mach-focus-width: 1.5px;--mach-scrollbar-thumb: #c9d2dd;--mach-radius-sm: 4px;--mach-radius: 6px;--mach-radius-lg: 8px;--mach-shadow-sm: 0 1px 4px rgba(15, 23, 42, .08);--mach-shadow: 0 6px 20px rgba(15, 23, 42, .12);--mach-transition: .15s ease;--mach-z-overlay: 10;--mach-z-loading: 15;--mach-z-popup: 1000;--mach-z-menu: 1001;position:relative;display:flex;flex-direction:column;width:100%;height:100%;min-height:120px;overflow:hidden;font-family:var(--mach-font-family);font-size:var(--mach-font-size);color:var(--mach-body-fg);background:var(--mach-body-bg);outline:none;box-sizing:border-box;border:1px solid var(--mach-border-color);color-scheme:light;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-variant-numeric:tabular-nums;contain:layout style}.mach-root.mach-dom-layout--auto-height{height:auto;min-height:0}.mach-root.mach-dom-layout--auto-height .mach-body{flex:none}.mach-root.mach-dom-layout--auto-height .mach-body-viewport--scroll{overflow-y:hidden}.mach-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:6px 8px;font:13px/1.4 var(--mach-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);color:var(--mach-body-fg, #26303f);background:var(--mach-body-bg, #fff);border:1px solid var(--mach-border-color, #e6eaf0);border-bottom:0;border-radius:var(--mach-radius-lg, 8px) var(--mach-radius-lg, 8px) 0 0}.mach-toolbar__main,.mach-toolbar__aside{display:flex;align-items:center;gap:6px;min-width:0}.mach-toolbar__search{display:flex;align-items:center;gap:6px;width:min(240px,32vw);height:32px;padding:0 9px;color:#64748b;background:var(--mach-header-bg, #fafbfd);border:1px solid var(--mach-border-color, #e6eaf0);border-radius:6px;transition:border-color var(--mach-transition, .15s ease),box-shadow var(--mach-transition, .15s ease)}.mach-toolbar__search:focus-within{border-color:var(--mach-primary, #2563eb);box-shadow:0 0 0 2px color-mix(in srgb,var(--mach-primary, #2563eb) 12%,transparent)}.mach-toolbar__search input{min-width:0;width:100%;color:inherit;background:transparent;border:0;outline:0}.mach-toolbar__button,.mach-toolbar__select-host,.mach-toolbar__selection{height:32px;padding:0 10px;color:inherit;background:var(--mach-body-bg, #fff);border:1px solid var(--mach-border-color, #e6eaf0);border-radius:6px;cursor:pointer;transition:color var(--mach-transition, .15s ease),border-color var(--mach-transition, .15s ease),background var(--mach-transition, .15s ease)}.mach-toolbar__button{min-width:32px;padding:0 8px;font-size:16px}.mach-toolbar__button:hover:not(:disabled),.mach-toolbar__select-host:hover{color:var(--mach-primary, #2563eb);border-color:var(--mach-primary, #2563eb)}.mach-toolbar__button:disabled{cursor:not-allowed;opacity:.45}.mach-toolbar__selection{color:var(--mach-primary, #2563eb);background:var(--mach-primary-weak, #dbeafe);border-color:transparent;font-size:12px}.mach-toolbar__select-host{width:82px;padding:0}.mach-toolbar__select-control,.mach-toolbar__select-control .mach-select-trigger{width:100%;height:100%}.mach-toolbar__select-control .mach-select-trigger{border:0;border-radius:5px;background:transparent;box-shadow:none}@media(max-width:640px){.mach-toolbar{align-items:stretch;flex-direction:column}.mach-toolbar__main,.mach-toolbar__aside{flex-wrap:wrap}.mach-toolbar__search{flex:1;width:auto}}.mach-size--compact{--mach-font-size: 12px;--mach-cell-padding: 6px}.mach-size--normal{--mach-font-size: 13px;--mach-cell-padding: 9px}.mach-size--large{--mach-font-size: 14px;--mach-cell-padding: 12px}.mach-root.mach-cell-borders{--mach-cell-border-color: var(--mach-border-color)}.mach-root.mach-theme-dark,.mach-root.mach-theme-dark.mach-size--compact,.mach-root.mach-theme-dark.mach-size--normal,.mach-root.mach-theme-dark.mach-size--large{--mach-border-color: #26324a;--mach-row-border-color: #1c2740;--mach-header-accent-color: #33415e;--mach-header-bg: #101a2e;--mach-header-group-bg: #16213a;--mach-header-fg: #c3cee0;--mach-body-bg: #0d1526;--mach-body-fg: #dbe4f0;--mach-row-hover-bg: #142138;--mach-row-selected-bg: #14304f;--mach-zebra-bg: #0f1a2e;--mach-cell-focus-color: #60a5fa;--mach-primary: #60a5fa;--mach-primary-weak: #1e3a5f;--mach-scrollbar-thumb: #33415e;--mach-success: #4ade80;--mach-warning: #fbbf24;--mach-danger: #f87171;--mach-info: #38bdf8;--mach-shadow-sm: 0 1px 4px rgba(0, 0, 0, .4);--mach-shadow: 0 6px 20px rgba(0, 0, 0, .5);color-scheme:dark}.mach-root *,.mach-root *:before,.mach-root *:after{box-sizing:border-box}.mach-portal,.mach-portal *,.mach-portal *:before,.mach-portal *:after{box-sizing:border-box}.mach-root:focus-visible{outline:2px solid var(--mach-primary);outline-offset:-2px}.mach-header{display:flex;flex-shrink:0;width:100%;height:var(--mach-header-h);background:var(--mach-header-bg);border-bottom:var(--mach-header-border-width) solid var(--mach-header-accent-color);box-shadow:0 1px 2px color-mix(in srgb,var(--mach-header-fg) 8%,transparent);overflow:hidden;position:relative;z-index:3;user-select:none}.mach-body{display:flex;flex:1;min-height:0;width:100%;position:relative;overflow:hidden}.mach-pane{position:relative;overflow:hidden;flex-shrink:0}.mach-pane--center{flex:1 1 auto;min-width:0}.mach-pane--hidden{display:none}.mach-header-viewport{width:100%;height:100%;overflow:hidden}.mach-header-rows{position:relative;height:100%;width:100%}.mach-header-row{position:absolute;left:0}.mach-header-row .mach-header-cell{position:absolute;top:0}.mach-header-cell--group{justify-content:center;border-bottom:var(--mach-border-width) solid var(--mach-border-color);font-weight:var(--mach-header-font-weight);background:var(--mach-header-group-bg)}.mach-header-label--custom{display:inline-flex;align-items:center;min-width:0;overflow:hidden}.mach-header-cell{display:flex;align-items:center;gap:4px;padding:0 var(--mach-cell-padding);border-right:var(--mach-border-width) solid transparent;color:var(--mach-header-fg);font-weight:var(--mach-header-font-weight);font-size:var(--mach-font-size);letter-spacing:.15px;cursor:default;overflow:hidden;white-space:nowrap;background:var(--mach-header-bg);transition:color var(--mach-transition),background-color var(--mach-transition)}.mach-header-cell--leaf:hover{background:color-mix(in srgb,var(--mach-primary) 4%,var(--mach-header-bg))}.mach-header-cell.mach-header-cell--sorted{color:var(--mach-primary);background:color-mix(in srgb,var(--mach-primary) 5%,var(--mach-header-bg))}.mach-root.mach-cell-borders .mach-header-cell{border-right-color:var(--mach-border-color)}.mach-header-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;cursor:pointer}.mach-header-cell--selection{justify-content:center;gap:0;padding:0}.mach-header-cell--selection .mach-header-label:empty{display:none}.mach-sort-indicator{display:inline-flex;align-items:center;gap:3px;color:var(--mach-primary);flex-shrink:0}.mach-sort-indicator svg{width:10px;height:10px}.mach-sort-indicator:empty{display:none}.mach-sort-badge{font-size:9px;line-height:1;padding:1.5px 4px;border-radius:999px;background:var(--mach-primary-weak);color:var(--mach-primary);font-weight:600}.mach-filter-btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border:none;border-radius:var(--mach-radius-sm);background:transparent;color:inherit;opacity:.36;cursor:pointer;flex-shrink:0;transition:opacity var(--mach-transition),color var(--mach-transition),background-color var(--mach-transition)}.mach-filter-btn svg{width:12px;height:12px;pointer-events:none}.mach-header-cell:hover .mach-filter-btn,.mach-header-cell:hover .mach-menu-btn{opacity:.62}.mach-filter-btn:hover{opacity:1;background:var(--mach-row-hover-bg)}.mach-filter-btn--active{opacity:1;color:var(--mach-primary)}.mach-filter-tag{display:inline-flex;align-items:center;max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 6px;height:16px;line-height:16px;border-radius:999px;background:var(--mach-primary-weak);color:var(--mach-primary);font-size:10px;font-weight:500;flex-shrink:0}.mach-menu-btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border:none;border-radius:var(--mach-radius-sm);background:transparent;color:inherit;opacity:.36;cursor:pointer;flex-shrink:0;font-size:12px;line-height:1;transition:opacity var(--mach-transition),color var(--mach-transition),background-color var(--mach-transition)}.mach-menu-btn:hover{opacity:1;background:var(--mach-row-hover-bg)}.mach-menu-btn svg{width:12px;height:12px;pointer-events:none}.mach-header-resize{position:absolute;top:0;right:0;width:8px;height:100%;cursor:col-resize;z-index:2;touch-action:none}.mach-header-resize:hover:after,.mach-header-resize--active:after{content:"";position:absolute;inset:0 3px;background:var(--mach-primary);opacity:.45;border-radius:1px}.mach-column-resize-guide{position:absolute;bottom:0;width:2px;pointer-events:none;background:var(--mach-primary);box-shadow:0 0 0 1px var(--mach-primary-weak);z-index:8}.mach-column-resize-label{position:absolute;top:6px;min-width:52px;padding:3px 7px;border-radius:var(--mach-radius-sm);color:#fff;background:var(--mach-primary);font:600 11px/1.5 var(--mach-font-family);text-align:center;white-space:nowrap;transform:translate(-50%);box-shadow:var(--mach-shadow-sm)}.mach-header-cell--dragging{opacity:.22}.mach-column-drag-ghost{position:fixed;top:0;left:0;z-index:calc(var(--mach-z-menu) + 1);display:flex;align-items:center;height:var(--mach-header-h);max-width:calc(100vw - 16px);padding:0 var(--mach-cell-padding);overflow:hidden;color:var(--mach-body-fg);font:var(--mach-header-font-weight) var(--mach-font-size)/1.3 var(--mach-font-family);text-overflow:ellipsis;white-space:nowrap;pointer-events:none;background:var(--mach-body-bg);border:1px solid var(--mach-primary);border-radius:var(--mach-radius);box-shadow:var(--mach-shadow);opacity:.96;will-change:transform}.mach-drop-indicator{position:absolute;top:3px;left:0;width:2px;height:calc(100% - 6px);border-radius:2px;background:var(--mach-primary);z-index:4;pointer-events:none;will-change:transform}.mach-root--dragging{cursor:grabbing}.mach-root--dragging .mach-header-cell,.mach-root--resizing .mach-header-cell{cursor:default}.mach-root--resizing{cursor:col-resize}.mach-body-viewport{position:relative;width:100%;height:100%;overflow:hidden}.mach-body-viewport--scroll{overflow:auto;overscroll-behavior:contain}.mach-body-viewport--scroll{scrollbar-width:thin;scrollbar-color:var(--mach-scrollbar-thumb) transparent}.mach-body-viewport--scroll::-webkit-scrollbar{width:10px;height:10px}.mach-body-viewport--scroll::-webkit-scrollbar-track{background:transparent}.mach-body-viewport--scroll::-webkit-scrollbar-thumb{background:var(--mach-scrollbar-thumb);border-radius:999px;border:3px solid transparent;background-clip:padding-box;transition:background-color var(--mach-transition)}.mach-body-viewport--scroll::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--mach-scrollbar-thumb) 60%,var(--mach-primary));background-clip:padding-box}.mach-body-viewport--scroll::-webkit-scrollbar-thumb:active{background:var(--mach-primary);background-clip:padding-box}.mach-body-viewport--scroll::-webkit-scrollbar-corner{background:transparent}.mach-row-container{position:relative;width:100%}.mach-row{position:absolute;top:0;left:0;display:flex;width:100%;background:var(--mach-body-bg);border-bottom:var(--mach-border-width) solid var(--mach-row-border-color);contain:layout style}.mach-row,.mach-row .mach-cell{transition:background-color var(--mach-transition)}.mach-root.mach-striped .mach-row--odd,.mach-root.mach-striped .mach-row--odd .mach-cell{background:var(--mach-zebra-bg)}.mach-cell{position:absolute;top:0;display:flex;align-items:center;height:100%;padding:0 var(--mach-cell-padding);border-right:1px solid var(--mach-cell-border-color);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:default;line-height:calc(var(--mach-row-h) - 2px)}.mach-cell--loading{pointer-events:none}.mach-cell-loading-bar{display:block;height:8px;max-width:132px;border-radius:999px;background:linear-gradient(90deg,var(--mach-row-hover-bg),var(--mach-border-color),var(--mach-row-hover-bg));background-size:200% 100%;animation:mach-cell-loading 1.25s ease-in-out infinite}@keyframes mach-cell-loading{0%{background-position:200% 0}to{background-position:-200% 0}}@media(prefers-reduced-motion:reduce){.mach-cell-loading-bar{animation:none}}.mach-cell--num{justify-content:flex-end}.mach-cell--selection{justify-content:center;padding:0}.mach-cell--editing{padding:0 3px}.mach-cell--focus{box-shadow:inset 0 0 0 var(--mach-focus-width) var(--mach-cell-focus-color);border-radius:var(--mach-radius-sm);z-index:1}.mach-cell--selection.mach-cell--focus{box-shadow:none;border-radius:0;z-index:auto}.mach-row--hover,.mach-row--hover .mach-cell{background:var(--mach-row-hover-bg)}.mach-row--selected,.mach-row--selected .mach-cell{background:var(--mach-row-selected-bg)}.mach-row--selected.mach-row--hover,.mach-row--selected.mach-row--hover .mach-cell{background:var(--mach-row-selected-bg);filter:brightness(.985)}input.mach-row-checkbox,input.mach-select-all{width:13px;height:13px;margin:0;accent-color:var(--mach-primary);cursor:pointer;flex-shrink:0}.mach-detail-row{background:var(--mach-zebra-bg);z-index:0}.mach-detail{height:100%;overflow:auto;padding:10px 12px}.mach-cell--detail-toggle{justify-content:center;padding:0;cursor:pointer}.mach-detail-toggle{display:inline-flex;align-items:center;justify-content:center;width:100%;font-size:10px;color:var(--mach-header-fg);transition:transform .15s ease}.mach-detail-toggle--open{transform:rotate(90deg)}.mach-detail-toggle--loading{animation:mach-tree-spin .8s linear infinite;color:var(--mach-primary)}.mach-detail-toggle--error{color:#dc2626}@keyframes mach-tree-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.mach-detail-toggle--loading{animation:none}}.mach-cell--group{cursor:pointer;background:var(--mach-header-bg)}.mach-row .mach-cell--group,.mach-row:has(.mach-cell--group){background:var(--mach-header-bg)}.mach-group-label{display:inline-flex;align-items:center;gap:5px;min-width:0;overflow:hidden}.mach-group-text{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mach-group-count{color:var(--mach-header-fg);font-size:10px;flex-shrink:0;opacity:.8}.mach-tree-cell{display:inline-flex;align-items:center;gap:4px;min-width:0;width:100%}.mach-tree-indent{flex-shrink:0}.mach-tree-toggle{display:inline-flex;align-items:center;justify-content:center;flex:0 0 20px;width:20px;height:22px;padding:0;border:0;border-radius:var(--mach-radius-sm);color:var(--mach-header-fg);background:transparent;cursor:pointer}.mach-tree-toggle:hover,.mach-tree-toggle:focus-visible{color:var(--mach-primary);background:var(--mach-primary-weak)}.mach-tree-toggle:focus-visible{outline:1px solid var(--mach-primary);outline-offset:-1px}.mach-tree-toggle>.mach-detail-toggle{width:10px;line-height:1;color:inherit;pointer-events:none}.mach-tree-toggle>.mach-detail-toggle--loading{color:var(--mach-primary)}.mach-tree-toggle>.mach-detail-toggle--error{color:var(--mach-danger)}.mach-tree-toggle-spacer{flex:0 0 20px;width:20px}.mach-tree-text{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mach-cell--drag{justify-content:center;padding:0;cursor:grab}.mach-row-drag-handle{display:grid;place-items:center;width:26px;height:26px;padding:0;border:1px solid transparent;border-radius:var(--mach-radius-sm);color:var(--mach-header-fg);background:transparent;opacity:.55;cursor:grab;user-select:none;touch-action:none;transition:color var(--mach-transition),background var(--mach-transition),opacity var(--mach-transition)}.mach-row-drag-handle:before{content:"";width:10px;height:14px;background:radial-gradient(circle,currentColor 1.3px,transparent 1.5px) 0 0 / 5px 5px}.mach-row-drag-handle:hover:not(:disabled),.mach-row-drag-handle:focus-visible{opacity:1;color:var(--mach-primary);background:var(--mach-primary-weak);border-color:color-mix(in srgb,var(--mach-primary) 28%,transparent);outline:none}.mach-row-drag-handle:disabled{opacity:.2;cursor:not-allowed}.mach-row-drop-indicator{position:absolute;top:0;left:0;width:100%;height:2px;background:var(--mach-primary);box-shadow:0 0 0 1px color-mix(in srgb,var(--mach-body-bg) 65%,transparent);z-index:5;pointer-events:none;will-change:transform}.mach-row-drop-indicator:before{content:"";position:absolute;left:1px;top:-2px;width:6px;height:6px;border-radius:50%;background:var(--mach-primary)}.mach-pane--center .mach-row-drop-indicator:before,.mach-pane--right .mach-row-drop-indicator:before{display:none}.mach-row-drag-preview{position:absolute;top:0;left:0;z-index:var(--mach-z-overlay);max-width:min(216px,calc(100% - 16px));padding:9px 14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid color-mix(in srgb,var(--mach-primary) 35%,var(--mach-border-color));border-radius:var(--mach-radius);background:var(--mach-body-bg);color:var(--mach-body-fg);box-shadow:var(--mach-shadow);font-weight:600;pointer-events:none}.mach-root--row-dragging,.mach-root--row-dragging .mach-cell,.mach-root--row-dragging .mach-row-drag-handle{cursor:grabbing;user-select:none}.mach-root .mach-row--drag-source{opacity:.45}.mach-cell--index{color:var(--mach-header-fg);font-size:calc(var(--mach-font-size) - 1px)}.mach-editor-input.mach-editor-invalid,.mach-editor-invalid .mach-editor-input,.mach-editor-invalid .mach-select-trigger,.mach-editor-invalid input,.mach-editor-invalid select:not([hidden]){border-color:#ef4444!important;box-shadow:0 0 0 1px #ef444459}.mach-editor-validating{cursor:progress;opacity:.72}.mach-footer{display:flex;flex-shrink:0;width:100%;overflow:hidden;background:var(--mach-header-bg);border-top:1px solid var(--mach-border-color);font-weight:600;color:var(--mach-header-fg);position:relative;z-index:3}.mach-footer-row{position:relative;overflow:hidden;flex-shrink:0}.mach-footer-row--center{flex:1 1 auto;min-width:0}.mach-footer-cell{position:absolute;top:0;display:flex;align-items:center;padding:0 var(--mach-cell-padding);border-right:1px solid transparent;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;height:100%;font-variant-numeric:tabular-nums}.mach-root.mach-cell-borders .mach-footer-cell{border-right-color:var(--mach-border-color)}.mach-cell--range{background:color-mix(in srgb,var(--mach-primary) 7%,transparent)!important}.mach-cell--range:after{content:"";position:absolute;inset:0;z-index:2;border:0 solid var(--mach-primary);pointer-events:none}.mach-cell--range.mach-cell--range-top:after{border-top-width:1.5px}.mach-cell--range.mach-cell--range-bottom:after{border-bottom-width:1.5px}.mach-cell--range.mach-cell--range-left:after{border-left-width:1.5px}.mach-cell--range.mach-cell--range-right:after{border-right-width:1.5px}.mach-cell--range.mach-cell--focus{box-shadow:inset 0 0 0 var(--mach-focus-width) var(--mach-cell-focus-color)}.mach-cell--range.mach-cell--focus:after{display:none}.mach-context-menu{position:fixed;z-index:var(--mach-z-menu);display:flex;flex-direction:column;min-width:140px;padding:5px;background:var(--mach-body-bg);color:var(--mach-body-fg);border:1px solid var(--mach-border-color);border-radius:var(--mach-radius-lg);box-shadow:var(--mach-shadow);font-family:var(--mach-font-family);font-size:var(--mach-font-size)}.mach-context-menu-item{text-align:left;padding:6px 10px;border:none;border-radius:var(--mach-radius);background:transparent;color:inherit;font:inherit;cursor:pointer;white-space:nowrap}.mach-context-menu-item:hover{background:var(--mach-row-hover-bg);color:var(--mach-primary)}.mach-fill-handle{position:absolute;width:8px;height:8px;border-radius:2px;background:var(--mach-primary);border:1.5px solid var(--mach-body-bg);cursor:crosshair;z-index:6;box-shadow:0 0 0 1px #2563eb59}.mach-root--filling,.mach-root--filling *{user-select:none!important;cursor:crosshair!important}.mach-infinite-loading{position:absolute;left:50%;bottom:14px;transform:translate(-50%);display:flex;align-items:center;gap:8px;padding:5px 14px;border-radius:999px;background:var(--mach-body-bg);border:1px solid var(--mach-border-color);box-shadow:var(--mach-shadow-sm);color:var(--mach-header-fg);font-size:12px;z-index:var(--mach-z-loading)}.mach-infinite-loading .mach-spinner{width:14px;height:14px;border-width:2px}.mach-statusbar{display:flex;align-items:center;gap:18px;flex-shrink:0;height:28px;padding:0 12px;background:var(--mach-header-bg);border-top:1px solid var(--mach-border-color);color:var(--mach-header-fg);font-size:11px;overflow:hidden;white-space:nowrap;font-variant-numeric:tabular-nums}.mach-statusbar-item--rangeAggregate{margin-left:auto}.mach-pinned-rows{display:flex;width:100%;overflow:hidden;background:var(--mach-header-bg);flex-shrink:0;border-bottom:1px solid var(--mach-border-color)}.mach-pinned-rows--bottom{border-bottom:none;border-top:1px solid var(--mach-border-color)}.mach-pinned-viewport{flex:1 1 auto;min-width:0;overflow:hidden}.mach-pinned-seg{position:relative;overflow:hidden;flex-shrink:0}.mach-pinned-seg--center{position:relative}.mach-pinned-row{position:relative;width:100%;border-bottom:1px solid var(--mach-row-border-color)}.mach-pinned-row .mach-cell{position:absolute;top:0;background:var(--mach-header-bg);font-weight:600;color:var(--mach-header-fg)}.mach-pinned-row:last-child{border-bottom:none}.mach-cell--wrap{white-space:normal;word-break:break-word;line-height:1.45;align-items:flex-start;padding-top:5px;padding-bottom:5px}.mach-editor-input,.mach-editor-select-control .mach-select-trigger{width:100%;height:calc(var(--mach-row-h) - 8px);padding:0 6px;border:1px solid var(--mach-primary);border-radius:var(--mach-radius-sm);font-family:inherit;font-size:var(--mach-font-size);color:inherit;background:var(--mach-body-bg);outline:none}.mach-select-control{position:relative;display:inline-flex;min-width:0;font-family:var(--mach-font-family, inherit);font-size:var(--mach-font-size, 14px)}.mach-select-native[hidden]{display:none!important}.mach-select-trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;height:34px;padding:0 10px;border:1px solid var(--mach-border-color, #e6eaf0);border-radius:var(--mach-radius, 6px);outline:none;color:var(--mach-body-fg, #1f2937);background:var(--mach-body-bg, #fff);font:inherit;line-height:1;text-align:left;cursor:pointer;transition:border-color var(--mach-transition, .15s ease),box-shadow var(--mach-transition, .15s ease),background-color var(--mach-transition, .15s ease)}.mach-select-trigger:hover{border-color:color-mix(in srgb,var(--mach-primary, #2563eb) 44%,var(--mach-border-color, #e6eaf0));background:color-mix(in srgb,var(--mach-primary, #2563eb) 3%,var(--mach-body-bg, #fff))}.mach-select-trigger:focus-visible,.mach-select-trigger[aria-expanded=true]{border-color:var(--mach-primary, #2563eb);box-shadow:0 0 0 3px color-mix(in srgb,var(--mach-primary, #2563eb) 12%,transparent)}.mach-select-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mach-select-caret{width:8px;height:8px;flex:0 0 auto;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform var(--mach-transition, .15s ease)}.mach-select-trigger[aria-expanded=true] .mach-select-caret{transform:translateY(2px) rotate(225deg)}.mach-select-listbox{position:fixed;z-index:var(--mach-z-menu, 1200);display:none;flex-direction:column;gap:2px;min-width:112px;max-width:min(320px,calc(100vw - 16px));max-height:min(244px,calc(100vh - 16px));padding:5px;overflow:auto;overscroll-behavior:contain;border:1px solid color-mix(in srgb,var(--mach-border-color, #e6eaf0) 88%,var(--mach-primary, #2563eb));border-radius:calc(var(--mach-radius-lg, 8px) + 1px);color:var(--mach-body-fg, #1f2937);background:var(--mach-body-bg, #fff);box-shadow:0 14px 36px color-mix(in srgb,var(--mach-body-fg, #1f2937) 18%,transparent),var(--mach-shadow-sm, 0 1px 3px rgba(15, 23, 42, .12));font-family:var(--mach-font-family, inherit);font-size:var(--mach-font-size, 14px);isolation:isolate}.mach-select-listbox--open{display:flex;animation:mach-select-listbox-in .12s ease-out}.mach-select-option{position:relative;display:flex;align-items:center;flex:0 0 auto;width:100%;min-height:32px;padding:0 30px 0 10px;border:0;border-radius:var(--mach-radius, 6px);outline:none;color:inherit;background:transparent;font:inherit;text-align:left;cursor:pointer;transition:color var(--mach-transition, .15s ease),background-color var(--mach-transition, .15s ease)}.mach-select-option:hover,.mach-select-option:focus-visible,.mach-select-option--active{color:var(--mach-primary, #2563eb);background:color-mix(in srgb,var(--mach-primary, #2563eb) 9%,var(--mach-body-bg, #fff))}.mach-select-option[aria-selected=true]{color:var(--mach-primary, #2563eb);background:color-mix(in srgb,var(--mach-primary, #2563eb) 13%,var(--mach-body-bg, #fff));font-weight:600}.mach-select-option[aria-selected=true]:after{content:"\2713";position:absolute;right:10px;font-size:12px;font-weight:700}.mach-select-option:disabled{opacity:.42;cursor:not-allowed}@keyframes mach-select-listbox-in{0%{transform:translateY(-3px) scale(.99)}to{transform:translateY(0) scale(1)}}.mach-select-listbox--above{transform-origin:bottom}.mach-filter-select-control{width:100%}.mach-filter-select-trigger{width:100%;background:color-mix(in srgb,var(--mach-header-bg) 62%,var(--mach-body-bg))}.mach-filter-listbox{width:auto}.mach-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--mach-body-bg);z-index:var(--mach-z-overlay)}.mach-overlay-text{color:var(--mach-header-fg);font-size:var(--mach-font-size)}.mach-overlay-content{max-width:min(100%,320px)}.mach-loading{display:grid;justify-items:center;gap:14px;min-width:172px;padding:20px 24px}.mach-loading__visual{position:relative;display:grid;gap:8px;width:132px;padding:14px 16px;overflow:hidden;background:color-mix(in srgb,var(--mach-header-bg) 82%,var(--mach-body-bg));border:1px solid var(--mach-border-color);border-radius:var(--mach-radius-lg);box-shadow:var(--mach-shadow-sm)}.mach-loading__visual:before{content:"";position:absolute;inset:0;transform:translate(-100%);background:linear-gradient(100deg,transparent 20%,color-mix(in srgb,var(--mach-primary) 11%,transparent) 50%,transparent 80%);animation:mach-loading-sweep 1.35s ease-in-out infinite}.mach-loading__row{height:7px;border-radius:999px;background:color-mix(in srgb,var(--mach-primary) 13%,var(--mach-border-color))}.mach-loading__row:nth-child(2){width:82%}.mach-loading__row:nth-child(3){width:92%}.mach-loading__row:nth-child(4){width:66%}.mach-loading__status{display:inline-flex;align-items:center;gap:8px;color:var(--mach-header-fg);font-size:var(--mach-font-size-sm)}.mach-loading__spinner{width:14px;height:14px}.mach-loading__label{line-height:1}.mach-spinner{width:22px;height:22px;border:2px solid var(--mach-border-color);border-top-color:var(--mach-primary);border-radius:50%;animation:mach-spin .8s linear infinite}@keyframes mach-spin{to{transform:rotate(360deg)}}@keyframes mach-loading-sweep{to{transform:translate(100%)}}.mach-filter-panel{position:fixed;z-index:var(--mach-z-popup);display:flex;flex-direction:column;gap:10px;width:224px;max-width:calc(100vw - 16px);padding:12px;background:var(--mach-body-bg);color:var(--mach-body-fg);border:1px solid color-mix(in srgb,var(--mach-border-color) 88%,var(--mach-primary));border-radius:calc(var(--mach-radius-lg) + 2px);box-shadow:0 14px 36px color-mix(in srgb,var(--mach-body-fg) 16%,transparent),var(--mach-shadow-sm);font-family:var(--mach-font-family);font-size:var(--mach-font-size);animation:mach-filter-panel-in .14s ease-out}.mach-filter-body{display:flex;flex-direction:column;gap:8px}.mach-filter-input{width:100%;height:34px;padding:0 10px;border:1px solid var(--mach-border-color);border-radius:var(--mach-radius);font-family:inherit;font-size:var(--mach-font-size);color:inherit;background:var(--mach-body-bg);outline:none;transition:border-color var(--mach-transition),box-shadow var(--mach-transition)}.mach-filter-input:focus{border-color:var(--mach-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--mach-primary) 12%,transparent)}@keyframes mach-filter-panel-in{0%{opacity:0;transform:translateY(-3px) scale(.99)}}.mach-filter-set-list{max-height:220px;overflow:auto;display:flex;flex-direction:column;gap:1px;border:1px solid var(--mach-border-color);border-radius:var(--mach-radius);padding:4px}.mach-filter-set-item{display:flex;align-items:center;gap:6px;padding:3px 5px;border-radius:var(--mach-radius-sm);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mach-filter-set-item:hover{background:var(--mach-row-hover-bg)}.mach-filter-set-item input{accent-color:var(--mach-primary);margin:0;width:13px;height:13px}.mach-filter-footer{display:flex;justify-content:flex-end;gap:6px}.mach-filter-footer button{padding:4px 12px;border-radius:var(--mach-radius);border:1px solid var(--mach-border-color);background:var(--mach-body-bg);color:inherit;font-family:inherit;font-size:var(--mach-font-size);cursor:pointer}.mach-filter-footer button:hover{border-color:var(--mach-primary);color:var(--mach-primary)}.mach-filter-btn-apply{background:var(--mach-primary)!important;border-color:var(--mach-primary)!important;color:#fff!important}.mach-filter-btn-apply:hover{opacity:.9;color:#fff!important}.mach-column-panel{min-width:220px;max-height:70vh;overflow:auto}.mach-column-panel[role=dialog]{width:min(440px,calc(100vw - 16px))}.mach-column-workbench-search{box-sizing:border-box;width:100%;height:30px;padding:0 9px;border:1px solid var(--mach-border-color);border-radius:var(--mach-radius);background:var(--mach-body-bg);color:var(--mach-body-fg);font:inherit;outline:none}.mach-column-workbench-search:focus{border-color:var(--mach-primary);box-shadow:0 0 0 2px var(--mach-primary-weak)}.mach-column-panel-title{font-weight:600;color:var(--mach-header-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mach-column-panel-subtitle{font-size:11px;color:var(--mach-header-fg);margin-top:2px}.mach-column-panel-actions{display:flex;gap:6px;flex-wrap:wrap}.mach-column-panel-btn{flex:1;min-width:60px;padding:4px 8px;border-radius:var(--mach-radius);border:1px solid var(--mach-border-color);background:var(--mach-body-bg);color:inherit;font-family:inherit;font-size:12px;cursor:pointer;white-space:nowrap}.mach-column-panel-btn:hover{border-color:var(--mach-primary);color:var(--mach-primary)}.mach-column-panel-divider{height:1px;background:var(--mach-border-color);margin:4px 0}.mach-column-panel-list{max-height:280px;overflow:auto;display:flex;flex-direction:column;gap:1px;border:1px solid var(--mach-border-color);border-radius:var(--mach-radius);padding:4px}.mach-column-workbench-item{display:grid;grid-template-columns:minmax(120px,1fr) 108px 26px 26px;align-items:center;gap:4px;min-height:32px;padding:2px 3px;border-radius:var(--mach-radius)}.mach-column-workbench-item:hover{background:var(--mach-row-hover-bg)}.mach-column-workbench-label{display:flex;min-width:0;align-items:center;gap:7px;cursor:pointer}.mach-column-workbench-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mach-column-workbench-pin-control,.mach-column-workbench-move{height:26px;border:1px solid var(--mach-border-color);border-radius:var(--mach-radius);background:var(--mach-body-bg);color:inherit;font:inherit}.mach-column-workbench-pin-control{width:108px;border:0}.mach-column-workbench-pin-control .mach-select-trigger{width:100%;height:26px;padding:0 7px;border-radius:var(--mach-radius);font-size:12px;box-shadow:none}.mach-column-workbench-move{padding:0;cursor:pointer}.mach-column-workbench-move:disabled{cursor:not-allowed;opacity:.35}.mach-tag{display:inline-flex;align-items:center;gap:4px;padding:0 8px;height:20px;line-height:18px;border-radius:999px;font-size:var(--mach-font-size-sm);font-weight:500;white-space:nowrap}.mach-tag:before{content:"";width:5px;height:5px;border-radius:999px;background:currentColor}.mach-tag--success{color:var(--mach-success);background:color-mix(in srgb,var(--mach-success) 10%,transparent)}.mach-tag--warning{color:var(--mach-warning);background:color-mix(in srgb,var(--mach-warning) 12%,transparent)}.mach-tag--danger{color:var(--mach-danger);background:color-mix(in srgb,var(--mach-danger) 10%,transparent)}.mach-tag--info{color:var(--mach-info);background:color-mix(in srgb,var(--mach-info) 10%,transparent)}.mach-tag--neutral{color:var(--mach-header-fg);background:color-mix(in srgb,var(--mach-header-fg) 10%,transparent)}.mach-progress{display:flex;align-items:center;gap:6px;width:100%}.mach-progress__track{flex:1;min-width:0;height:6px;border-radius:999px;background:color-mix(in srgb,var(--mach-header-fg) 14%,transparent);overflow:hidden}.mach-progress__bar{height:100%;border-radius:999px;background:var(--mach-primary);transition:width var(--mach-transition)}.mach-progress__label{flex-shrink:0;font-size:var(--mach-font-size-sm);color:var(--mach-header-fg);font-variant-numeric:tabular-nums}.mach-link{color:var(--mach-primary);cursor:pointer}.mach-link:hover{text-decoration:underline}.mach-actions{display:inline-flex;align-items:center;gap:2px}.mach-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.mach-action-btn{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 4px;border:none;border-radius:var(--mach-radius-sm);background:transparent;color:var(--mach-header-fg);font-size:var(--mach-font-size-sm);line-height:1;cursor:pointer;white-space:nowrap;transition:color var(--mach-transition),background-color var(--mach-transition),transform var(--mach-transition)}.mach-action-btn:hover{background:var(--mach-row-hover-bg);color:var(--mach-primary)}.mach-action-btn--danger:hover{background:color-mix(in srgb,var(--mach-danger) 10%,transparent);color:var(--mach-danger);transform:scale(1.06)}.mach-action-btn--success:hover{background:color-mix(in srgb,var(--mach-success) 12%,transparent);color:var(--mach-success);transform:scale(1.06)}.mach-action-btn--primary{color:var(--mach-primary)}.mach-action-btn--warning{color:var(--mach-warning)}.mach-action-btn--success,.mach-edit-control--confirm{color:var(--mach-success)}.mach-action-btn--danger{color:var(--mach-danger)}.mach-action-btn:focus-visible,.mach-edit-control:focus-visible,.mach-cell-edit-trigger:focus-visible,.mach-action-drawer__close:focus-visible{outline:2px solid color-mix(in srgb,var(--mach-primary) 65%,transparent);outline-offset:1px}.mach-action-btn:disabled{cursor:not-allowed;opacity:.4}.mach-action-btn--loading svg{animation:mach-spin .8s linear infinite}.mach-dictionary-value--loading{color:var(--mach-header-fg);opacity:.72}.mach-dictionary-value--error{text-decoration:underline dotted;text-underline-offset:3px}.mach-action-btn--icon{padding:0;width:24px}.mach-context-menu-item--danger{color:var(--mach-danger)}.mach-context-menu-item,.mach-action-drawer__item{display:flex;align-items:center;gap:9px}.mach-context-menu-item--primary,.mach-action-drawer__item--primary{color:var(--mach-primary)}.mach-context-menu-item--warning,.mach-action-drawer__item--warning{color:var(--mach-warning)}.mach-context-menu-item--success,.mach-action-drawer__item--success{color:var(--mach-success)}.mach-context-menu-item--danger,.mach-action-drawer__item--danger{color:var(--mach-danger)}.mach-action-drawer-backdrop{position:fixed;inset:0;z-index:calc(var(--mach-z-menu) + 2);background:#0f172a33;backdrop-filter:blur(1px)}.mach-action-drawer{position:absolute;top:0;right:0;display:flex;flex-direction:column;width:min(340px,calc(100vw - 24px));height:100%;background:var(--mach-body-bg);color:var(--mach-body-fg);border-left:1px solid var(--mach-border-color);box-shadow:-16px 0 40px #0f172a24;font-family:var(--mach-font-family);animation:mach-drawer-in .18s ease-out}.mach-action-drawer__header{display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:0 16px 0 20px;border-bottom:1px solid var(--mach-border-color)}.mach-action-drawer__close{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:0;border-radius:var(--mach-radius);background:transparent;color:var(--mach-header-fg);cursor:pointer}.mach-action-drawer__close:hover{color:var(--mach-primary);background:var(--mach-row-hover-bg)}.mach-action-drawer__body{display:flex;flex-direction:column;gap:4px;padding:12px;overflow:auto}.mach-action-drawer__item{width:100%;min-height:40px;padding:0 12px;border:0;border-radius:var(--mach-radius);background:transparent;font:inherit;text-align:left;cursor:pointer}.mach-action-drawer__item:hover:not(:disabled){background:var(--mach-row-hover-bg)}.mach-action-drawer__item:disabled{opacity:.4;cursor:not-allowed}@keyframes mach-drawer-in{0%{transform:translate(18px);opacity:0}to{transform:translate(0);opacity:1}}@media(max-width:640px){.mach-action-drawer{top:auto;bottom:0;width:100%;height:auto;max-height:min(70vh,520px);border-top:1px solid var(--mach-border-color);border-left:0;border-radius:var(--mach-radius-lg) var(--mach-radius-lg) 0 0;animation-name:mach-drawer-up}}@keyframes mach-drawer-up{0%{transform:translateY(18px);opacity:0}to{transform:translateY(0);opacity:1}}.mach-cell:has(.mach-cell-edit-trigger){padding-right:29px}.mach-cell-edit-trigger{position:absolute;right:5px;top:50%;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;transform:translateY(-50%);border:0;border-radius:var(--mach-radius-sm);background:transparent;color:var(--mach-header-fg);cursor:pointer;opacity:0;transition:opacity var(--mach-transition),color var(--mach-transition),background-color var(--mach-transition)}.mach-cell-edit-trigger svg{width:13px;height:13px}.mach-cell:hover .mach-cell-edit-trigger--hover,.mach-cell:focus-within .mach-cell-edit-trigger--hover,.mach-cell-edit-trigger--always{opacity:.72}.mach-cell-edit-trigger:hover{opacity:1;color:var(--mach-primary);background:color-mix(in srgb,var(--mach-primary) 9%,transparent)}.mach-cell--editing{overflow:visible;z-index:4}.mach-cell-editor-shell,.mach-row-editor-shell{display:flex;align-items:center;width:100%;min-width:0;gap:5px}.mach-cell-editor-shell>.mach-editor-input,.mach-cell-editor-shell>.mach-editor-select-control,.mach-cell-editor-shell>:not(.mach-cell-editor-controls),.mach-row-editor-shell>*{flex:1 1 auto;min-width:0}.mach-cell-editor-controls{display:inline-flex;flex:0 0 auto;align-items:center;gap:2px;padding:2px;border:1px solid var(--mach-border-color);border-radius:var(--mach-radius);background:var(--mach-body-bg);box-shadow:var(--mach-shadow-sm)}.mach-edit-control{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;border:0;border-radius:var(--mach-radius-sm);background:transparent;color:var(--mach-header-fg);cursor:pointer;transition:color var(--mach-transition),background-color var(--mach-transition),transform var(--mach-transition)}.mach-edit-control svg{width:14px;height:14px}.mach-edit-control--confirm{color:var(--mach-success)}.mach-edit-control--confirm:hover{background:color-mix(in srgb,var(--mach-success) 12%,transparent);transform:scale(1.06)}.mach-edit-control--cancel{color:var(--mach-danger)}.mach-edit-control--cancel:hover{background:color-mix(in srgb,var(--mach-danger) 10%,transparent);transform:scale(1.06)}.mach-edit-control:disabled{opacity:.35;cursor:wait}.mach-row--editing,.mach-row--editing .mach-cell{background:color-mix(in srgb,var(--mach-primary) 3%,var(--mach-body-bg))}.mach-cell--row-editing .mach-editor-input,.mach-cell--row-editing .mach-editor-select-control .mach-select-trigger{border-color:color-mix(in srgb,var(--mach-primary) 45%,var(--mach-border-color));box-shadow:0 1px 2px #0f172a0a}.mach-cell--row-editing .mach-editor-input:focus,.mach-cell--row-editing .mach-editor-select-control .mach-select-trigger:focus-visible,.mach-cell--row-editing .mach-editor-select-control .mach-select-trigger[aria-expanded=true]{border-color:var(--mach-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--mach-primary) 12%,transparent)}.mach-tooltip{position:fixed;z-index:var(--mach-z-menu);max-width:320px;padding:6px 10px;border-radius:var(--mach-radius);background:var(--mach-body-fg);color:var(--mach-body-bg);font-size:var(--mach-font-size-sm);line-height:1.5;box-shadow:var(--mach-shadow);pointer-events:none;word-break:break-word}.mach-cell--flash{animation:mach-flash .8s ease-out}@keyframes mach-flash{0%{background-color:color-mix(in srgb,var(--mach-primary) 35%,transparent)}to{background-color:transparent}}.mach-context-menu-separator{height:1px;margin:4px 6px;background:var(--mach-border-color)}.mach-context-menu-item:disabled{opacity:.45;cursor:not-allowed}.mach-pagination{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-shrink:0;height:40px;padding:0 12px;background:var(--mach-body-bg);border-top:var(--mach-border-width) solid var(--mach-border-color);color:var(--mach-body-fg);font-size:var(--mach-font-size-sm);user-select:none}.mach-pagination-total{color:var(--mach-header-fg);margin-right:8px;font-variant-numeric:tabular-nums}.mach-pagination-page{min-width:72px;text-align:center;color:var(--mach-body-fg);font-variant-numeric:tabular-nums}.mach-pagination-btn{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:var(--mach-border-width) solid var(--mach-border-color);border-radius:var(--mach-radius-sm);background:var(--mach-body-bg);color:var(--mach-header-fg);font-size:13px;line-height:1;cursor:pointer;transition:border-color var(--mach-transition),color var(--mach-transition),background-color var(--mach-transition)}.mach-pagination-btn:hover:not(:disabled){border-color:var(--mach-primary);color:var(--mach-primary)}.mach-pagination-btn:disabled{opacity:.35;cursor:not-allowed}.mach-pagination-size-control{height:24px;margin-left:6px;width:92px;font-size:var(--mach-font-size-sm)}.mach-pagination-size-control .mach-select-trigger{width:100%;height:24px;padding:0 6px;border-width:var(--mach-border-width);border-radius:var(--mach-radius-sm);color:var(--mach-header-fg);box-shadow:none}.mach-watermark{position:absolute;inset:0;z-index:6;pointer-events:none;background-repeat:repeat}.mach-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:32px 16px;min-height:160px}.mach-empty__icon{margin-bottom:6px}.mach-empty__title{font-size:var(--mach-font-size);color:var(--mach-body-fg);font-weight:500}.mach-empty__hint{font-size:var(--mach-font-size-sm);color:var(--mach-header-fg)}@media(prefers-reduced-motion:reduce){.mach-spinner,.mach-loading__visual:before{animation-duration:2.4s}}.mach-cell--center{justify-content:center}.mach-cell--right{justify-content:flex-end}.mach-header-cell--center .mach-header-label{text-align:center}.mach-header-cell--right .mach-header-label{text-align:right}@media(prefers-reduced-motion:reduce){.mach-root *,.mach-root *:before,.mach-root *:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.mach-action-drawer{animation:none!important}}.mach-root{--mach-row-warning-bg: color-mix(in srgb, var(--mach-warning) 11%, var(--mach-body-bg));--mach-row-danger-bg: color-mix(in srgb, var(--mach-danger) 9%, var(--mach-body-bg));--mach-row-success-bg: color-mix(in srgb, var(--mach-success) 10%, var(--mach-body-bg));--mach-row-info-bg: color-mix(in srgb, var(--mach-info) 10%, var(--mach-body-bg))}.mach-row--styled[data-row-tone=warning]{--mach-row-rule-bg: var(--mach-row-warning-bg)}.mach-row--styled[data-row-tone=danger]{--mach-row-rule-bg: var(--mach-row-danger-bg)}.mach-row--styled[data-row-tone=success]{--mach-row-rule-bg: var(--mach-row-success-bg)}.mach-row--styled[data-row-tone=info]{--mach-row-rule-bg: var(--mach-row-info-bg)}.mach-root :is(.mach-row,.mach-pinned-row).mach-row--styled,.mach-root :is(.mach-row,.mach-pinned-row).mach-row--styled .mach-cell{background-color:var(--mach-row-rule-bg, var(--mach-body-bg));color:var(--mach-row-rule-fg, var(--mach-body-fg))}.mach-root .mach-row--styled.mach-row--hover,.mach-root .mach-row--styled.mach-row--hover .mach-cell{background-color:color-mix(in srgb,var(--mach-primary) 4%,var(--mach-row-rule-bg, var(--mach-body-bg)))}.mach-root .mach-row--styled.mach-row--selected,.mach-root .mach-row--styled.mach-row--selected .mach-cell{background-color:color-mix(in srgb,var(--mach-primary) 12%,var(--mach-row-rule-bg, var(--mach-body-bg)))}