qantler-flaz-dataview 1.0.0

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.
Files changed (43) hide show
  1. package/package.json +11 -0
  2. package/src/FlazDataView.css +4423 -0
  3. package/src/FlazDataView.jsx +2943 -0
  4. package/src/FlazDataViewList.jsx +787 -0
  5. package/src/MdtActiveFilterBar.jsx +263 -0
  6. package/src/MdtBulkSelectionBar.jsx +91 -0
  7. package/src/MdtColumnPickerPopup.jsx +59 -0
  8. package/src/MdtColumnVisibilityList.jsx +38 -0
  9. package/src/MdtCreateViewModal.jsx +280 -0
  10. package/src/MdtDatetimeValueEditor.jsx +259 -0
  11. package/src/MdtDeleteViewConfirmModal.jsx +83 -0
  12. package/src/MdtDisplayPopup.jsx +170 -0
  13. package/src/MdtEmptyState.jsx +20 -0
  14. package/src/MdtFilterColumnPicker.jsx +66 -0
  15. package/src/MdtFilterOperatorDropdown.jsx +58 -0
  16. package/src/MdtFilterSection.jsx +73 -0
  17. package/src/MdtFilterToolbar.jsx +81 -0
  18. package/src/MdtInlineField.css +221 -0
  19. package/src/MdtInlineField.jsx +187 -0
  20. package/src/MdtInlineFieldRow.jsx +71 -0
  21. package/src/MdtNoDataIllustration.jsx +64 -0
  22. package/src/MdtPopupChecklist.jsx +70 -0
  23. package/src/MdtRowActionsMenu.jsx +281 -0
  24. package/src/MdtSidebarNav.jsx +26 -0
  25. package/src/MdtTabsRow.jsx +354 -0
  26. package/src/MdtTabsSection.jsx +35 -0
  27. package/src/MdtTruncateWithTooltip.jsx +82 -0
  28. package/src/MdtValueEditorPopup.jsx +950 -0
  29. package/src/filterDisplayUtils.jsx +96 -0
  30. package/src/mdtClientSideFilter.js +68 -0
  31. package/src/mdtColumnEditUtils.js +403 -0
  32. package/src/mdtDateFilterUtils.js +135 -0
  33. package/src/mdtExportUtils.js +234 -0
  34. package/src/mdtFilterUtils.js +56 -0
  35. package/src/mdtInlineFieldDisplay.js +66 -0
  36. package/src/mdtMobilePopupPosition.js +107 -0
  37. package/src/mdtMultiSelectDisplay.jsx +279 -0
  38. package/src/mdtSavedViewFilterMatch.js +154 -0
  39. package/src/mdtTabChangeUtils.js +12 -0
  40. package/src/mdtTabStatusRules.js +111 -0
  41. package/src/mdtTableConstants.js +2 -0
  42. package/src/mdtTooltipFormat.js +44 -0
  43. package/src/renderInlineFieldValue.jsx +183 -0
@@ -0,0 +1,4423 @@
1
+ .mdt-page-fill-host>.mdt-page-shell {
2
+ flex: 1 1 auto;
3
+ height: 100%;
4
+ min-height: 0;
5
+ }
6
+
7
+ .mdt-page-shell {
8
+ position: relative;
9
+ width: 100%;
10
+ height: 100%;
11
+ min-height: 0;
12
+ display: flex;
13
+ flex-direction: column;
14
+ background: #ffffff;
15
+ border: none;
16
+ border-radius: 0;
17
+ overflow: hidden;
18
+ }
19
+
20
+ .mdt-shell-layout {
21
+ display: flex;
22
+ width: 100%;
23
+ height: 100%;
24
+ min-height: 0;
25
+ }
26
+
27
+ .mdt-content-layout {
28
+ display: flex;
29
+ width: 100%;
30
+ flex: 1 1 auto;
31
+ min-height: 0;
32
+ align-items: stretch;
33
+ position: relative;
34
+ overflow: hidden;
35
+ }
36
+
37
+ .mdt-shell-side-panel {
38
+ position: relative;
39
+ flex: 0 0 auto;
40
+ height: 100%;
41
+ min-height: 100%;
42
+ align-self: stretch;
43
+ display: flex;
44
+ flex-direction: column;
45
+ overflow: hidden;
46
+ border-right: none;
47
+ background: var(--sidebar-bg, #ffffff);
48
+ }
49
+
50
+ .mdt-shell-side-panel::after {
51
+ content: "";
52
+ position: absolute;
53
+ top: 0;
54
+ bottom: 0;
55
+ right: 0;
56
+ width: 1px;
57
+ background: var(--sidebar-border);
58
+ }
59
+
60
+ .mdt-page-shell--bulk-bar .mdt-root {
61
+ padding-bottom: 56px;
62
+ }
63
+
64
+ .mdt-root {
65
+ width: 100%;
66
+ max-width: 100%;
67
+ min-width: 0;
68
+ flex: 1;
69
+ min-height: 0;
70
+ height: 100%;
71
+ display: flex;
72
+ flex-direction: column;
73
+ color: #3f3f46;
74
+ overflow: hidden;
75
+ }
76
+
77
+ .mdt-content-main {
78
+ flex: 1 1 auto;
79
+ min-width: 0;
80
+ min-height: 0;
81
+ display: flex;
82
+ flex-direction: column;
83
+ overflow: hidden;
84
+ }
85
+
86
+ .mdt-sidebar-nav {
87
+ width: 100%;
88
+ flex: 1 1 auto;
89
+ height: 100%;
90
+ min-height: 0;
91
+ overflow-y: auto;
92
+ overflow-x: hidden;
93
+ padding: 0;
94
+ background: var(--sidebar-bg, #ffffff);
95
+ scrollbar-width: thin;
96
+ scrollbar-color: #bbbbbb #ececec;
97
+ }
98
+
99
+ .mdt-sidebar-nav::-webkit-scrollbar {
100
+ width: 4px;
101
+ }
102
+
103
+ .mdt-sidebar-nav::-webkit-scrollbar-track {
104
+ background: #ececec;
105
+ }
106
+
107
+ .mdt-sidebar-nav::-webkit-scrollbar-thumb {
108
+ background: #bbbbbb;
109
+ border-radius: 0;
110
+ }
111
+
112
+ .mdt-sidebar-nav-item {
113
+ width: 100%;
114
+ min-height: var(--sidebar-item-height, 30px);
115
+ height: var(--sidebar-item-height, 30px);
116
+ border: 0;
117
+ background: var(--sidebar-item-bg, transparent);
118
+ color: var(--sidebar-item-text, oklch(0.4377 0.0066 230.87));
119
+ text-align: left;
120
+ padding: 0 8px 0 17.5px;
121
+ margin: 0 0 var(--sidebar-item-gap, 2px) 0;
122
+ display: flex;
123
+ align-items: center;
124
+ font-size: var(--sidebar-item-font-size, 13px);
125
+ line-height: var(--sidebar-item-line-height, 20px);
126
+ font-weight: var(--sidebar-item-font-weight, 400);
127
+ }
128
+
129
+ .mdt-sidebar-nav-item:hover {
130
+ background: var(--sidebar-submenu-bg-hover, var(--sidebar-item-bg-hover, oklch(14.82% 0.0034 196.79 / 0.05)));
131
+ }
132
+
133
+ .mdt-sidebar-nav-item--active {
134
+ background: var(--sidebar-submenu-active-bg, var(--sidebar-item-active-bg, oklch(14.82% 0.0034 196.79 / 0.1)));
135
+ color: var(--sidebar-item-text-active, oklch(0.2378 0.0029 230.83));
136
+ font-weight: var(--sidebar-item-font-weight-active, 400);
137
+ }
138
+
139
+ .mdt-sidebar-nav-item-label {
140
+ overflow: hidden;
141
+ text-overflow: ellipsis;
142
+ white-space: nowrap;
143
+ }
144
+
145
+ @media (max-width: 899px) {
146
+ .mdt-shell-side-panel {
147
+ display: none;
148
+ }
149
+ }
150
+
151
+ /* List view row typography (override on .mdt-group-wrap or :root) */
152
+ .mdt-group-wrap {
153
+ --mdt-list-id-color: oklch(0.5288 0.0083 230.88);
154
+ --mdt-list-id-font-size: 11px;
155
+ --mdt-list-id-font-weight: 400;
156
+ --mdt-list-id-line-height: 16px;
157
+ --mdt-list-secondary-color: oklch(0.2378 0.0029 230.83);
158
+ --mdt-list-secondary-font-size: 13px;
159
+ --mdt-list-secondary-font-weight: 400;
160
+ --mdt-list-secondary-line-height: 20px;
161
+ --mdt-list-main-gap: 16px;
162
+ }
163
+
164
+ .mdt-table-wrap,
165
+ .mdt-group-wrap {
166
+ flex: 1 1 auto;
167
+ min-height: 0;
168
+ height: 100%;
169
+ position: relative;
170
+ z-index: 1;
171
+ }
172
+
173
+ .mdt-breadcrumb-row {
174
+ display: flex;
175
+ align-items: center;
176
+ justify-content: space-between;
177
+ gap: 12px;
178
+ height: 44px;
179
+ min-height: 44px;
180
+ padding-left: 1.5rem;
181
+ padding-right: 1.5rem;
182
+ border-bottom: 1px solid #e5e7eb;
183
+ background: #ffffff;
184
+ flex-shrink: 0;
185
+ position: relative;
186
+ z-index: 50;
187
+ }
188
+
189
+ /* Toolbar portaled from FlazDataView into global BreadcrumbBar (e.g. Templates list) */
190
+ .mdt-breadcrumb-toolbar-host {
191
+ display: flex;
192
+ align-items: center;
193
+ margin-left: auto;
194
+ flex-shrink: 0;
195
+ min-height: 28px;
196
+ position: relative;
197
+ overflow: visible;
198
+ }
199
+
200
+ .mdt-breadcrumb-toolbar-host .mdt-actions-right--in-breadcrumb {
201
+ flex: 0 0 auto;
202
+ width: auto;
203
+ max-width: none;
204
+ height: 28px;
205
+ min-height: 28px;
206
+ padding: 0;
207
+ display: inline-flex;
208
+ align-items: center;
209
+ gap: 0;
210
+ grid-auto-flow: unset;
211
+ }
212
+
213
+ .mdt-breadcrumb-toolbar-host .mdt-actions-right--in-breadcrumb>* {
214
+ position: relative;
215
+ display: flex;
216
+ align-items: center;
217
+ justify-content: center;
218
+ min-height: 28px;
219
+ box-sizing: border-box;
220
+ }
221
+
222
+ .mdt-breadcrumb-toolbar-host .mdt-actions-right--in-breadcrumb>*:not(:first-child) {
223
+ box-shadow: inset 1px 0 0 #e5e7eb;
224
+ }
225
+
226
+ .mdt-breadcrumb-row .mdt-filter-dropdown,
227
+ .mdt-breadcrumb-row .mdt-display-popup,
228
+ .mdt-breadcrumb-toolbar-host .mdt-filter-dropdown,
229
+ .mdt-breadcrumb-toolbar-host .mdt-display-popup {
230
+ z-index: 10050;
231
+ }
232
+
233
+ .mdt-breadcrumb-left {
234
+ display: flex;
235
+ align-items: center;
236
+ gap: 10px;
237
+ color: #3f3f46;
238
+ font-size: 13px;
239
+ font-weight: 400;
240
+ }
241
+
242
+ .mdt-sidebar-toggle {
243
+ cursor: pointer;
244
+ padding: 4px;
245
+ border: none;
246
+ background: transparent;
247
+ border-radius: 0;
248
+ color: #64748b;
249
+ display: flex;
250
+ align-items: center;
251
+ justify-content: center;
252
+ transition: background 0.15s;
253
+ }
254
+
255
+ .mdt-sidebar-toggle:hover {
256
+ background: #f1f5f9;
257
+ }
258
+
259
+ .mdt-bc-item {
260
+ display: inline-flex;
261
+ align-items: center;
262
+ gap: 6px;
263
+ font-size: 13px;
264
+ font-weight: 400;
265
+ line-height: 20px;
266
+ }
267
+
268
+ .mdt-bc-item>svg {
269
+ width: 16px;
270
+ height: 16px;
271
+ flex-shrink: 0;
272
+ color: #4e5255;
273
+ }
274
+
275
+ .mdt-bc-crumbs {
276
+ display: inline-flex;
277
+ align-items: center;
278
+ gap: 8px;
279
+ color: #3f3f46;
280
+ font-size: 13px;
281
+ font-weight: 400;
282
+ line-height: 20px;
283
+ }
284
+
285
+ .mdt-bc-separator {
286
+ color: #71717a;
287
+ font-size: 14px;
288
+ line-height: 1;
289
+ }
290
+
291
+ .mdt-bc-crumb {
292
+ display: inline-flex;
293
+ align-items: center;
294
+ gap: 6px;
295
+ }
296
+
297
+ .mdt-bc-crumb-icon {
298
+ display: inline-flex;
299
+ align-items: center;
300
+ justify-content: center;
301
+ color: #4e5255;
302
+ width: 16px;
303
+ height: 16px;
304
+ }
305
+
306
+ .mdt-bc-crumb-icon>svg {
307
+ width: 16px;
308
+ height: 16px;
309
+ }
310
+
311
+ .mdt-bc-crumb-label {
312
+ color: inherit;
313
+ }
314
+
315
+ .mdt-bc-menu-wrap {
316
+ position: relative;
317
+ display: inline-flex;
318
+ align-items: center;
319
+ }
320
+
321
+ .mdt-bc-ellipsis {
322
+ display: inline-flex;
323
+ align-items: center;
324
+ justify-content: center;
325
+ width: 26px;
326
+ height: 20px;
327
+ color: #71717a;
328
+ }
329
+
330
+ .mdt-bc-menu-btn {
331
+ border: 0;
332
+ background: transparent;
333
+ color: #3f3f46;
334
+ height: 20px;
335
+ padding: 0;
336
+ display: inline-flex;
337
+ align-items: center;
338
+ gap: 6px;
339
+ font-size: 13px;
340
+ font-weight: 400;
341
+ line-height: 20px;
342
+ }
343
+
344
+ .mdt-bc-menu-btn--open,
345
+ .mdt-bc-menu-btn:hover {
346
+ background: transparent;
347
+ color: #27272a;
348
+ }
349
+
350
+ .mdt-bc-menu-label {
351
+ color: inherit;
352
+ }
353
+
354
+ .mdt-bc-count-badge--crumb {
355
+ min-width: 16px;
356
+ padding: 1px 5px;
357
+ border-radius: 0;
358
+ font-size: 11px;
359
+ line-height: 1;
360
+ }
361
+
362
+ .mdt-bc-title {
363
+ color: inherit;
364
+ }
365
+
366
+ .mdt-bc-title-colon {
367
+ color: inherit;
368
+ flex-shrink: 0;
369
+ }
370
+
371
+ .mdt-bc-view-picker {
372
+ position: relative;
373
+ display: inline-flex;
374
+ align-items: center;
375
+ }
376
+
377
+ /* Saved view trigger — filter chip style, 20px total height (border included) */
378
+ .mdt-bc-view-picker.mdt-filter-chip {
379
+ height: 20px;
380
+ min-height: 20px;
381
+ max-height: 20px;
382
+ box-sizing: border-box;
383
+ }
384
+
385
+ .mdt-bc-view-picker .mdt-bc-view-chip {
386
+ gap: 4px;
387
+ width: 100%;
388
+ height: 100%;
389
+ min-height: 0;
390
+ padding: 0 8px;
391
+ font-size: 11px;
392
+ font-weight: 400;
393
+ line-height: 1;
394
+ box-sizing: border-box;
395
+ color: oklch(0.5288 0.0083 230.88);
396
+ cursor: pointer;
397
+ background: transparent;
398
+ transition: color 0.12s ease;
399
+ }
400
+
401
+ .mdt-bc-view-picker.mdt-filter-chip:hover,
402
+ .mdt-bc-view-picker--open.mdt-filter-chip {
403
+ border-color: #d4d4d8;
404
+ background: #f4f4f5;
405
+ }
406
+
407
+ .mdt-bc-view-picker.mdt-filter-chip:hover .mdt-bc-view-chip,
408
+ .mdt-bc-view-picker--open.mdt-filter-chip .mdt-bc-view-chip {
409
+ background: transparent;
410
+ color: oklch(0.4377 0.0066 230.87);
411
+ }
412
+
413
+ .mdt-bc-view-picker .mdt-bc-view-chip:hover,
414
+ .mdt-bc-view-picker .mdt-bc-view-chip.mdt-chip-label-btn:hover {
415
+ background: transparent;
416
+ }
417
+
418
+ .mdt-bc-view-picker .mdt-bc-view-chip:focus-visible {
419
+ outline: 2px solid oklch(47.99% 0.1158 242.91);
420
+ outline-offset: 1px;
421
+ }
422
+
423
+ .mdt-bc-view-menu.mdt-cv-view-menu {
424
+ z-index: 300;
425
+ }
426
+
427
+ .mdt-bc-count-badge {
428
+ display: inline-flex;
429
+ align-items: center;
430
+ justify-content: center;
431
+ min-width: 18px;
432
+ padding: 2px 6px;
433
+ font-size: 11px;
434
+ font-weight: 600;
435
+ line-height: 12px;
436
+ color: oklch(0.4799 0.1158 242.91);
437
+ background: color-mix(in oklab, oklch(47.99% 0.1158 242.91) 12%, transparent);
438
+ border-radius: 0;
439
+ }
440
+
441
+
442
+
443
+ .mdt-actions-right {
444
+ display: flex;
445
+ align-items: center;
446
+ gap: 8px;
447
+ height: 100%;
448
+ }
449
+
450
+ /* Mobile header: row 1 = title + New; row 2 = filter, display, export, layout, … */
451
+ .mdt-primary.mdt-new-mobile {
452
+ display: none !important;
453
+ }
454
+
455
+ @media (max-width: 679px) {
456
+ .mdt-breadcrumb-row {
457
+ --mdt-header-pad-x: 21.6px;
458
+ flex-wrap: wrap;
459
+ align-items: stretch;
460
+ justify-content: flex-start;
461
+ height: auto;
462
+ min-height: 44px;
463
+ padding: 0 var(--mdt-header-pad-x);
464
+ row-gap: 0;
465
+ position: relative;
466
+ border-bottom: 1px solid #e5e7eb;
467
+ box-sizing: border-box;
468
+ }
469
+
470
+ .main-content-expand .mdt-breadcrumb-row {
471
+ --mdt-header-pad-x: 16px;
472
+ }
473
+
474
+ .mdt-breadcrumb-left {
475
+ display: flex;
476
+ flex: 1 1 100%;
477
+ width: 100%;
478
+ align-items: center;
479
+ justify-content: space-between;
480
+ gap: 12px;
481
+ min-height: 44px;
482
+ padding: 8px 0;
483
+ box-sizing: border-box;
484
+ min-width: 0;
485
+ position: relative;
486
+ border-bottom: none;
487
+ }
488
+
489
+ /* Full-width divider between title row and toolbar (no side gap from header padding) */
490
+ .mdt-breadcrumb-left::after {
491
+ content: "";
492
+ position: absolute;
493
+ left: calc(-1 * var(--mdt-header-pad-x));
494
+ right: calc(-1 * var(--mdt-header-pad-x));
495
+ bottom: 0;
496
+ height: 1px;
497
+ background: #e5e7eb;
498
+ pointer-events: none;
499
+ }
500
+
501
+ .mdt-breadcrumb-left .mdt-bc-item {
502
+ flex: 0 1 auto;
503
+ min-width: 0;
504
+ }
505
+
506
+ .mdt-breadcrumb-left .mdt-primary.mdt-new-mobile {
507
+ flex: 0 0 auto;
508
+ margin-left: auto;
509
+ }
510
+
511
+ .mdt-primary.mdt-new-mobile {
512
+ display: inline-flex !important;
513
+ flex: 0 0 auto;
514
+ }
515
+
516
+ .mdt-primary.mdt-new-desktop {
517
+ display: none !important;
518
+ }
519
+
520
+ .mdt-actions-right {
521
+ flex: 1 1 100%;
522
+ width: 100%;
523
+ max-width: 100%;
524
+ height: auto;
525
+ min-height: 30px;
526
+ padding: 8px 0;
527
+ box-sizing: border-box;
528
+ display: grid;
529
+ grid-auto-flow: column;
530
+ grid-auto-columns: minmax(0, 1fr);
531
+ align-items: center;
532
+ align-self: stretch;
533
+ }
534
+
535
+ /* Equal columns; cell fills column, control centered inside */
536
+ .mdt-actions-right>* {
537
+ position: relative;
538
+ display: flex;
539
+ align-items: center;
540
+ justify-content: center;
541
+ width: 100%;
542
+ min-width: 0;
543
+ min-height: 30px;
544
+ box-sizing: border-box;
545
+ }
546
+
547
+ .mdt-actions-right>*:not(:first-child) {
548
+ box-shadow: inset 1px 0 0 #e5e7eb;
549
+ }
550
+
551
+ .mdt-actions-right>.mdt-layout-switch {
552
+ width: fit-content;
553
+ max-width: 100%;
554
+ margin-inline: auto;
555
+ }
556
+
557
+ .mdt-actions-right>.mdt-filter-button-wrap,
558
+ .mdt-actions-right>.mdt-toolbar-cell {
559
+ width: 100%;
560
+ flex: 0 0 auto;
561
+ }
562
+
563
+ .mdt-actions-right .mdt-ghost.icon {
564
+ width: 30px;
565
+ min-width: 30px;
566
+ flex: 0 0 auto;
567
+ }
568
+
569
+ .mdt-filter-bar .mdt-filter-dropdown,
570
+ .mdt-filter-bar .mdt-chip-replace-dropdown,
571
+ .mdt-filter-bar .mdt-value-popup,
572
+ .mdt-filter-bar .mdt-filter-op-dropdown {
573
+ z-index: 10050;
574
+ }
575
+
576
+ /* Anchored popups: full width inside viewport (top from --mdt-popup-top via JS) */
577
+ .mdt-filter-bar .mdt-value-popup,
578
+ .mdt-filter-bar .mdt-filter-dropdown,
579
+ .mdt-filter-bar .mdt-chip-replace-dropdown,
580
+ .mdt-filter-bar .mdt-filter-op-dropdown,
581
+ .mdt-breadcrumb-row .mdt-filter-dropdown,
582
+ .mdt-breadcrumb-toolbar-host .mdt-filter-dropdown,
583
+ .mdt-breadcrumb-row .mdt-display-popup,
584
+ .mdt-breadcrumb-toolbar-host .mdt-display-popup,
585
+ .mdt-filter-bar .mdt-filter-op-dropdown {
586
+ position: fixed !important;
587
+ left: 8px !important;
588
+ right: 8px !important;
589
+ width: auto !important;
590
+ min-width: 0 !important;
591
+ max-width: none !important;
592
+ top: var(--mdt-popup-top, 72px) !important;
593
+ bottom: auto !important;
594
+ margin: 0 !important;
595
+ max-height: var(--mdt-popup-max-height, min(70vh, calc(100vh - 80px)));
596
+ overflow-y: auto;
597
+ box-sizing: border-box;
598
+ }
599
+
600
+ /* Breadcrumb dropdown: give a bit more breathing room from the trigger/top on mobile */
601
+ .mdt-breadcrumb-row .mdt-filter-dropdown {
602
+ top: calc(var(--mdt-popup-top, 72px) + 24px) !important;
603
+ }
604
+
605
+ .mdt-filter-dropdown.mdt-fd-left,
606
+ .mdt-display-popup {
607
+ right: 8px !important;
608
+ left: 8px !important;
609
+ }
610
+
611
+ .mdt-cell-edit-popup-anchor,
612
+ .mdt-bulk-edit-popup-anchor {
613
+ right: 8px !important;
614
+ width: auto !important;
615
+ min-width: 0 !important;
616
+ max-width: calc(100vw - 16px) !important;
617
+ }
618
+
619
+ .mdt-cell-edit-popup-anchor .mdt-value-popup {
620
+ width: 100% !important;
621
+ max-width: 100% !important;
622
+ }
623
+
624
+ .mdt-row-menu-popup--portal {
625
+ max-width: calc(100vw - 16px);
626
+ }
627
+
628
+ /* Sort menu: stay in column header (absolute), scroll with table like desktop */
629
+ .mdt-table .mdt-sort-popup {
630
+ position: absolute;
631
+ z-index: 10050;
632
+ }
633
+
634
+ .mdt-table thead th:has(.mdt-sort-popup) {
635
+ z-index: 2;
636
+ }
637
+
638
+ .mdt-breadcrumb-row,
639
+ .mdt-actions-right,
640
+ .mdt-filter-button-wrap,
641
+ .mdt-toolbar-cell,
642
+ .mdt-filter-bar {
643
+ overflow: visible;
644
+ }
645
+
646
+ .main-content-expand .mdt-filter-bar {
647
+ padding-left: 16px;
648
+ padding-right: 16px;
649
+ box-sizing: border-box;
650
+ }
651
+
652
+ /* Filter bar only: actions below chips, not on the right */
653
+ .mdt-filter-bar .mdt-filter-inner {
654
+ flex-direction: column;
655
+ align-items: flex-start;
656
+ }
657
+
658
+ .mdt-filter-bar .mdt-filter-right {
659
+ margin-left: 0;
660
+ align-self: flex-end;
661
+ }
662
+ }
663
+
664
+ .mdt-tabs-row {
665
+ display: flex;
666
+ align-items: center;
667
+ gap: 8px;
668
+ width: 100%;
669
+ max-width: 100%;
670
+ box-sizing: border-box;
671
+ padding: 0 21.6px;
672
+ background: #ffffff;
673
+ border-bottom: 1px solid #e5e7eb;
674
+ height: 52px;
675
+ flex-shrink: 0;
676
+ min-width: 0;
677
+ overflow: visible;
678
+ position: relative;
679
+ z-index: 45;
680
+ }
681
+
682
+ .mdt-tabs-row--with-leading {
683
+ position: relative;
684
+ }
685
+
686
+ .mdt-tabs-list-select-all {
687
+ position: absolute;
688
+ left: 3px;
689
+ top: 50%;
690
+ transform: translateY(-50%);
691
+ z-index: 3;
692
+ display: flex;
693
+ align-items: center;
694
+ justify-content: center;
695
+ width: 16px;
696
+ height: 16px;
697
+ flex-shrink: 0;
698
+ pointer-events: auto;
699
+ }
700
+
701
+ .mdt-tabs-list-select-all:hover .mdt-row-select-checkbox--header,
702
+ .mdt-tabs-row--has-selection .mdt-tabs-list-select-all .mdt-row-select-checkbox--header {
703
+ opacity: 1;
704
+ }
705
+
706
+ .mdt-group--flat .mdt-group-row:first-child {
707
+ border-top: none;
708
+ }
709
+
710
+ .mdt-tabs-strip {
711
+ display: flex;
712
+ align-items: center;
713
+ gap: 0;
714
+ max-width: 100%;
715
+ min-width: 0;
716
+ overflow: hidden;
717
+ flex-shrink: 1;
718
+ }
719
+
720
+ .mdt-tabs-visible {
721
+ display: flex;
722
+ align-items: center;
723
+ gap: 8px;
724
+ min-width: 0;
725
+ flex: 0 1 auto;
726
+ overflow: hidden;
727
+ }
728
+
729
+ .mdt-tabs-measure {
730
+ position: absolute;
731
+ left: 0;
732
+ top: 0;
733
+ visibility: hidden;
734
+ pointer-events: none;
735
+ display: flex;
736
+ align-items: center;
737
+ gap: 8px;
738
+ height: 52px;
739
+ width: max-content;
740
+ z-index: -1;
741
+ }
742
+
743
+ .mdt-tabs-more-btn--measure {
744
+ position: absolute;
745
+ visibility: hidden;
746
+ pointer-events: none;
747
+ }
748
+
749
+ .mdt-tabs-overflow-wrap {
750
+ position: relative;
751
+ flex-shrink: 0;
752
+ display: flex;
753
+ align-items: center;
754
+ padding-left: 4px;
755
+ }
756
+
757
+ .mdt-tabs-more-btn {
758
+ display: inline-flex;
759
+ align-items: center;
760
+ justify-content: center;
761
+ width: 32px;
762
+ height: 32px;
763
+ padding: 0;
764
+ border: none;
765
+ border-radius: 0;
766
+ background: transparent;
767
+ color: oklch(0.5288 0.0083 230.88);
768
+ cursor: pointer;
769
+ }
770
+
771
+ .mdt-tabs-more-btn:hover,
772
+ .mdt-tabs-more-btn--open {
773
+ background: #f4f4f5;
774
+ color: oklch(0.4799 0.1158 242.91);
775
+ }
776
+
777
+ .mdt-tabs-overflow-menu {
778
+ position: absolute;
779
+ top: calc(100% + 4px);
780
+ right: 0;
781
+ min-width: 200px;
782
+ max-width: 280px;
783
+ max-height: 320px;
784
+ overflow-y: auto;
785
+ background: #ffffff;
786
+ border: 1px solid #e5e7eb;
787
+ border-radius: 0;
788
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
789
+ z-index: 1000;
790
+ padding: 4px;
791
+ display: flex;
792
+ flex-direction: column;
793
+ }
794
+
795
+ .mdt-tabs-overflow-menu--portal {
796
+ z-index: 400010;
797
+ }
798
+
799
+ .mdt-tabs-overflow-item {
800
+ display: flex;
801
+ align-items: center;
802
+ gap: 6px;
803
+ width: 100%;
804
+ padding: 8px 10px;
805
+ border: none;
806
+ border-radius: 0;
807
+ background: transparent;
808
+ font-size: 13px;
809
+ font-family: "Inter", Arial, Helvetica, sans-serif !important;
810
+ font-weight: 400;
811
+ color: oklch(0.5288 0.0083 230.88);
812
+ text-align: left;
813
+ cursor: pointer;
814
+ white-space: nowrap;
815
+ }
816
+
817
+ .mdt-tabs-overflow-item:hover {
818
+ background: #f4f4f5;
819
+ color: oklch(0.4799 0.1158 242.91);
820
+ }
821
+
822
+ .mdt-tabs-overflow-item--active {
823
+ color: oklch(0.4799 0.1158 242.91);
824
+ background: color-mix(in oklab, oklch(47.99% 0.1158 242.91) 8%, transparent);
825
+ }
826
+
827
+ .mdt-tabs-overflow-label {
828
+ overflow: hidden;
829
+ text-overflow: ellipsis;
830
+ }
831
+
832
+ .mdt-tabs-overflow-count {
833
+ flex-shrink: 0;
834
+ font-size: 13px;
835
+ }
836
+
837
+ .mdt-tab-item {
838
+ height: 52px;
839
+ background: transparent;
840
+ border: 0;
841
+ padding: 0 16px;
842
+ font-size: 13px;
843
+ font-family: "Inter", Arial, Helvetica, sans-serif !important;
844
+ font-weight: 400;
845
+ color: oklch(0.5288 0.0083 230.88);
846
+ display: flex;
847
+ align-items: center;
848
+ gap: 6px;
849
+ cursor: pointer;
850
+ position: relative;
851
+ transition: all 0.2s;
852
+ white-space: nowrap;
853
+ outline: none;
854
+ }
855
+
856
+ .mdt-tab-item:hover {
857
+ color: oklch(0.4799 0.1158 242.91);
858
+ }
859
+
860
+ .mdt-tab-item.mdt-tab-active {
861
+ color: oklch(0.4799 0.1158 242.91);
862
+ }
863
+
864
+ .mdt-tab-entry {
865
+ position: relative;
866
+ display: inline-block;
867
+ height: 52px;
868
+ vertical-align: top;
869
+ }
870
+
871
+ .mdt-tab-entry .mdt-tab-item {
872
+ height: 100%;
873
+ }
874
+
875
+ .mdt-tab-item-inner {
876
+ display: inline-flex;
877
+ align-items: center;
878
+ gap: 6px;
879
+ position: relative;
880
+ }
881
+
882
+ .mdt-tab-edit-btn {
883
+ position: absolute;
884
+ left: calc(100% + 4px);
885
+ top: 50%;
886
+ transform: translateY(-50%);
887
+ z-index: 2;
888
+ display: inline-flex;
889
+ align-items: center;
890
+ justify-content: center;
891
+ width: 14px;
892
+ height: 14px;
893
+ padding: 0;
894
+ border: none;
895
+ border-radius: 2px;
896
+ background: transparent;
897
+ color: oklch(0.5288 0.0083 230.88);
898
+ cursor: pointer;
899
+ }
900
+
901
+ .mdt-tab-edit-btn:hover {
902
+ background: #f4f4f5;
903
+ color: oklch(0.4799 0.1158 242.91);
904
+ }
905
+
906
+ .mdt-tab-edit-btn svg {
907
+ width: 11px;
908
+ height: 11px;
909
+ }
910
+
911
+ .mdt-tab-count {
912
+ font-weight: 400;
913
+ font-size: 13px;
914
+ }
915
+
916
+ /* ── Filter Bar ── */
917
+ .mdt-filter-bar {
918
+ display: flex;
919
+ flex-direction: column;
920
+ padding: 8px 12px;
921
+ background: #ffffff;
922
+ border-bottom: 1px solid #e5e7eb;
923
+ flex-shrink: 0;
924
+ position: relative;
925
+ z-index: 25;
926
+ overflow: visible;
927
+ }
928
+
929
+ .mdt-filter-inner {
930
+ display: flex;
931
+ align-items: center;
932
+ justify-content: space-between;
933
+ gap: 12px;
934
+ padding: 8px 16px;
935
+ background: oklch(96.96% .0007 230.67);
936
+ border-radius: 0;
937
+ min-height: 44px;
938
+ min-width: 0;
939
+ overflow: visible;
940
+ }
941
+
942
+ .mdt-filter-bar .mdt-chip-value-wrap {
943
+ overflow: visible;
944
+ }
945
+
946
+ .mdt-filter-bar .mdt-chip-value-wrap .mdt-value-popup,
947
+ .mdt-filter-bar .mdt-chip-replace-dropdown {
948
+ z-index: 10001;
949
+ }
950
+
951
+ .mdt-filter-chip:has(.mdt-value-popup) {
952
+ z-index: 10002;
953
+ overflow: visible;
954
+ }
955
+
956
+ .mdt-filter-left {
957
+ display: flex;
958
+ align-items: center;
959
+ gap: 8px;
960
+ flex-wrap: wrap;
961
+ flex: 1 1 auto;
962
+ min-width: 0;
963
+ max-width: 100%;
964
+ overflow: visible;
965
+ }
966
+
967
+ .mdt-filter-chip {
968
+ display: flex;
969
+ align-items: center;
970
+ height: 28px;
971
+ max-width: 100%;
972
+ min-width: 0;
973
+ background: #ffffff;
974
+ border: 1px solid #e5e7eb;
975
+ border-radius: 0;
976
+ font-size: 11px;
977
+ font-weight: 400;
978
+ overflow: visible;
979
+ position: relative;
980
+ }
981
+
982
+ .mdt-chip-label,
983
+ .mdt-chip-label-btn {
984
+ display: flex;
985
+ align-items: center;
986
+ gap: 6px;
987
+ padding: 0 10px;
988
+ color: oklch(0.5288 0.0083 230.88);
989
+ height: 100%;
990
+ font-size: 11px;
991
+ font-weight: 400;
992
+ flex-shrink: 0;
993
+ max-width: 9rem;
994
+ min-width: 0;
995
+ overflow: hidden;
996
+ }
997
+
998
+ .mdt-chip-label-text {
999
+ overflow: hidden;
1000
+ text-overflow: ellipsis;
1001
+ white-space: nowrap;
1002
+ min-width: 0;
1003
+ }
1004
+
1005
+ .mdt-chip-icon {
1006
+ display: flex;
1007
+ align-items: center;
1008
+ color: oklch(0.5288 0.0083 230.88);
1009
+ }
1010
+
1011
+ .mdt-chip-op {
1012
+ padding: 0 10px;
1013
+ color: oklch(43.77% .0066 230.87);
1014
+ border-left: 1px solid #e5e7eb;
1015
+ height: 100%;
1016
+ display: flex;
1017
+ align-items: center;
1018
+ font-weight: 400;
1019
+ font-size: 13px;
1020
+ flex-shrink: 0;
1021
+ white-space: nowrap;
1022
+ }
1023
+
1024
+ .mdt-chip-op-wrap {
1025
+ position: relative;
1026
+ flex-shrink: 0;
1027
+ height: 100%;
1028
+ border-left: 1px solid #e5e7eb;
1029
+ }
1030
+
1031
+ .mdt-chip-op-btn {
1032
+ margin: 0;
1033
+ border: none;
1034
+ border-left: none;
1035
+ background: transparent;
1036
+ cursor: pointer;
1037
+ font: inherit;
1038
+ color: inherit;
1039
+ height: 100%;
1040
+ }
1041
+
1042
+ .mdt-chip-op-btn:hover {
1043
+ background: oklch(96.96% .0007 230.67);
1044
+ }
1045
+
1046
+ .mdt-filter-op-dropdown {
1047
+ position: absolute;
1048
+ top: calc(100% + 4px);
1049
+ left: 0;
1050
+ z-index: 10002;
1051
+ min-width: 120px;
1052
+ background: #ffffff;
1053
+ border: 1px solid #e5e7eb;
1054
+ border-radius: 0;
1055
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
1056
+ padding: 4px;
1057
+ display: flex;
1058
+ flex-direction: column;
1059
+ }
1060
+
1061
+ .mdt-filter-op-item {
1062
+ justify-content: space-between;
1063
+ }
1064
+
1065
+ .mdt-chip-value-legacy {
1066
+ padding: 0 10px;
1067
+ color: oklch(43.77% .0066 230.87);
1068
+ border-left: 1px solid #e5e7eb;
1069
+ height: 100%;
1070
+ display: flex;
1071
+ align-items: center;
1072
+ font-size: 13px;
1073
+ }
1074
+
1075
+ .mdt-chip-remove {
1076
+ width: 30px;
1077
+ height: 100%;
1078
+ display: flex;
1079
+ align-items: center;
1080
+ justify-content: center;
1081
+ border: 0;
1082
+ border-left: 1px solid #e5e7eb;
1083
+ background: transparent;
1084
+ color: oklch(0.5288 0.0083 230.88);
1085
+ cursor: pointer;
1086
+ padding: 0;
1087
+ flex-shrink: 0;
1088
+ }
1089
+
1090
+ .mdt-chip-remove:hover {
1091
+ background: #f4f4f5;
1092
+ color: #18181b;
1093
+ }
1094
+
1095
+ .mdt-add-filter {
1096
+ height: 28px;
1097
+ padding: 5px 8px;
1098
+ border: 1px solid #e5e7eb;
1099
+ background: #ffffff;
1100
+ border-radius: 0;
1101
+ display: flex;
1102
+ align-items: center;
1103
+ justify-content: center;
1104
+ color: oklch(0.4377 0.0066 230.87);
1105
+ cursor: pointer;
1106
+ }
1107
+
1108
+ .mdt-add-filter:hover {
1109
+ background: #fafafa;
1110
+ }
1111
+
1112
+ .mdt-filter-right {
1113
+ display: flex;
1114
+ align-items: center;
1115
+ gap: 8px;
1116
+ }
1117
+
1118
+ .mdt-clear-all {
1119
+ height: 28px;
1120
+ padding: 0 10px;
1121
+ background: #ffffff;
1122
+ border: 1px solid #e5e7eb;
1123
+ border-radius: 0;
1124
+ font-size: 13px;
1125
+ font-weight: 400;
1126
+ color: oklch(0.4377 0.0066 230.87);
1127
+ cursor: pointer;
1128
+ white-space: nowrap;
1129
+ }
1130
+
1131
+ .mdt-clear-all:hover {
1132
+ background: #fafafa;
1133
+ }
1134
+
1135
+ /* Active state for filter button */
1136
+
1137
+ .mdt-layout-switch {
1138
+ height: 30px;
1139
+ background: #eeeeef;
1140
+ border: 1px solid #e5e7eb;
1141
+ border-radius: 0;
1142
+ padding: 3px;
1143
+ display: inline-flex;
1144
+ align-items: center;
1145
+ gap: 2px;
1146
+ }
1147
+
1148
+ .mdt-layout-switch button {
1149
+ width: 24px;
1150
+ height: 24px;
1151
+ border: 0;
1152
+ background: transparent;
1153
+ color: #4f5058;
1154
+ padding: 0;
1155
+ border-radius: 0;
1156
+ display: inline-flex;
1157
+ align-items: center;
1158
+ justify-content: center;
1159
+ }
1160
+
1161
+ .mdt-layout-switch button svg {
1162
+ width: 13.99px;
1163
+ height: 13.99px;
1164
+ stroke-width: 2.25;
1165
+ }
1166
+
1167
+ .mdt-layout-switch button.mdt-layout-active {
1168
+ background: rgba(37, 42, 51, 0.1) !important;
1169
+ border: 0 !important;
1170
+ color: #27272a !important;
1171
+ box-shadow: none !important;
1172
+ outline: none !important;
1173
+ }
1174
+
1175
+ .mdt-layout-switch button.mdt-layout-active svg {
1176
+ color: #27272a !important;
1177
+ stroke: currentColor !important;
1178
+ }
1179
+
1180
+ .mdt-ghost,
1181
+ .mdt-primary {
1182
+ height: 30px;
1183
+ min-height: 30px;
1184
+ border-radius: 0;
1185
+ padding: 0 8px;
1186
+ font-size: 12px !important;
1187
+ font-weight: 400;
1188
+ line-height: 30px;
1189
+ border: 1px solid #d4d4d8;
1190
+ background: #ffffff;
1191
+ color: #3f3f46;
1192
+ box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
1193
+ display: inline-flex;
1194
+ align-items: center;
1195
+ justify-content: center;
1196
+ vertical-align: middle;
1197
+ }
1198
+
1199
+ .mdt-ghost.icon {
1200
+ width: 30px;
1201
+ min-width: 30px;
1202
+ padding: 0;
1203
+ }
1204
+
1205
+ .mdt-ghost.icon svg {
1206
+ width: 13.99px;
1207
+ height: 13.99px;
1208
+ stroke-width: 2.25;
1209
+ }
1210
+
1211
+ .mdt-ghost.icon:disabled {
1212
+ opacity: 0.45;
1213
+ cursor: not-allowed;
1214
+ pointer-events: none;
1215
+ }
1216
+
1217
+ .mdt-more-button {
1218
+ background: #f4f4f5;
1219
+ border-color: transparent;
1220
+ border-width: 0;
1221
+ color: #52525b;
1222
+ box-shadow: none;
1223
+ }
1224
+
1225
+ .mdt-primary {
1226
+ background: #1a73e8 !important;
1227
+ border-color: #1a73e8 !important;
1228
+ color: #fff !important;
1229
+ font-weight: 400;
1230
+ }
1231
+
1232
+ .mdt-secondary {
1233
+ background: #ffffff !important;
1234
+ border: 1px solid #d4d4d8 !important;
1235
+ color: #3f3f46 !important;
1236
+ font-weight: 500;
1237
+ box-shadow: 0 1px 2px rgba(0, 0, 0, .04) !important;
1238
+ height: 30px;
1239
+ min-height: 30px;
1240
+ border-radius: 0;
1241
+ padding: 0 8px;
1242
+ font-size: 12px !important;
1243
+ font-weight: 400;
1244
+ line-height: 30px;
1245
+ }
1246
+
1247
+ .mdt-secondary:hover {
1248
+ background: #f4f4f5 !important;
1249
+ border-color: #a1a1aa !important;
1250
+ }
1251
+
1252
+ .mdt-table-wrap {
1253
+ width: 100%;
1254
+ max-width: 100%;
1255
+ min-width: 0;
1256
+ overflow: auto;
1257
+ overscroll-behavior: contain;
1258
+ background: #ffffff;
1259
+ scrollbar-width: thin;
1260
+ scrollbar-color: #bdbfc4 #ffffff;
1261
+ }
1262
+
1263
+ .mdt-table-wrap--empty,
1264
+ .mdt-group-wrap--empty {
1265
+ display: flex;
1266
+ flex-direction: column;
1267
+ align-items: stretch;
1268
+ justify-content: center;
1269
+ overflow: hidden;
1270
+ background: #ffffff;
1271
+ }
1272
+
1273
+ .mdt-empty-state {
1274
+ display: flex;
1275
+ flex: 1 1 auto;
1276
+ flex-direction: column;
1277
+ align-items: center;
1278
+ justify-content: center;
1279
+ min-height: 220px;
1280
+ padding: 40px 24px 48px;
1281
+ text-align: center;
1282
+ box-sizing: border-box;
1283
+ --illustration-fill-primary: #ffffff;
1284
+ --illustration-fill-secondary: #f4f4f5;
1285
+ --illustration-fill-tertiary: #ececef;
1286
+ --illustration-fill-quaternary: #fafafa;
1287
+ --illustration-stroke-primary: #d4d4d8;
1288
+ --illustration-stroke-secondary: #e4e4e7;
1289
+ }
1290
+
1291
+ .mdt-empty-state-icon {
1292
+ display: block;
1293
+ width: 168px;
1294
+ height: auto;
1295
+ max-width: 100%;
1296
+ margin: 0 0 16px;
1297
+ flex-shrink: 0;
1298
+ user-select: none;
1299
+ pointer-events: none;
1300
+ }
1301
+
1302
+ .mdt-empty-state-title {
1303
+ margin: 0;
1304
+ font-size: 15px;
1305
+ font-weight: 400;
1306
+ line-height: 1.35;
1307
+ color: var(--illustration-stroke-primary);
1308
+ }
1309
+
1310
+ .mdt-table-wrap::-webkit-scrollbar {
1311
+ width: 8px;
1312
+ height: 8px;
1313
+ }
1314
+
1315
+ .mdt-table-wrap::-webkit-scrollbar-track {
1316
+ background: #ffffff;
1317
+ }
1318
+
1319
+ .mdt-table-wrap::-webkit-scrollbar-thumb {
1320
+ background: #bdbfc4;
1321
+ border-radius: 0;
1322
+ }
1323
+
1324
+ /* Full width; fixed layout respects col widths — long cell text ellipsizes instead of stretching columns */
1325
+ .mdt-table {
1326
+ width: 100%;
1327
+ border-collapse: collapse;
1328
+ border-spacing: 0;
1329
+ table-layout: fixed;
1330
+ }
1331
+
1332
+ .mdt-table tr {
1333
+ border-bottom: 1px solid #e5e7eb;
1334
+ }
1335
+
1336
+ .mdt-table th,
1337
+ .mdt-table td {
1338
+ box-sizing: border-box;
1339
+ height: 44px;
1340
+ border-bottom: 1px solid #e5e7eb;
1341
+ border-right: 1px solid #e5e7eb;
1342
+ padding: 0;
1343
+ text-align: left;
1344
+ vertical-align: middle;
1345
+ }
1346
+
1347
+ .mdt-table th:last-child,
1348
+ .mdt-table td:last-child {
1349
+ border-right: 0;
1350
+ }
1351
+
1352
+ .mdt-table th {
1353
+ background: #f4f4f5;
1354
+ font-size: 13px;
1355
+ font-weight: 500;
1356
+ white-space: nowrap;
1357
+ overflow: visible;
1358
+ position: sticky;
1359
+ top: 0;
1360
+ z-index: 10;
1361
+ }
1362
+
1363
+ /* ── Data columns only (.mdt-col-data) — options column uses its own rules below ─ */
1364
+ .mdt-table th.mdt-col-data,
1365
+ .mdt-table td.mdt-col-data {
1366
+ overflow: hidden;
1367
+ }
1368
+
1369
+ .mdt-table td.mdt-col-data {
1370
+ background: #fff;
1371
+ font-size: 12px;
1372
+ color: #52525b;
1373
+ white-space: nowrap;
1374
+ overflow: hidden;
1375
+ }
1376
+
1377
+ .mdt-table td.mdt-col-data>.mdt-td-inner,
1378
+ .mdt-table td.mdt-col-data>.mdt-cell-editable-wrap.mdt-td-inner,
1379
+ .mdt-table td.mdt-col-data .mdt-cell-editable-trigger {
1380
+ width: 100%;
1381
+ max-width: 100%;
1382
+ min-width: 0;
1383
+ overflow: hidden;
1384
+ }
1385
+
1386
+ .mdt-table td.mdt-col-data .mdt-cell-truncate-host {
1387
+ display: block;
1388
+ width: 100%;
1389
+ max-width: 100%;
1390
+ min-width: 0;
1391
+ overflow: hidden;
1392
+ }
1393
+
1394
+ .mdt-table td.mdt-col-data .mdt-cell-truncate,
1395
+ .mdt-table td.mdt-col-data .mdt-cell-with-icon-text,
1396
+ .mdt-table td.mdt-col-data .mdt-clickable-value {
1397
+ display: block;
1398
+ width: 100%;
1399
+ max-width: 100%;
1400
+ min-width: 0;
1401
+ overflow: hidden;
1402
+ text-overflow: ellipsis;
1403
+ white-space: nowrap;
1404
+ }
1405
+
1406
+ .mdt-table td.mdt-col-data .mdt-cell-with-icon {
1407
+ display: flex;
1408
+ align-items: center;
1409
+ gap: 6px;
1410
+ width: 100%;
1411
+ min-width: 0;
1412
+ max-width: 100%;
1413
+ overflow: hidden;
1414
+ }
1415
+
1416
+ .mdt-table td.mdt-col-data .mdt-cell-with-icon-text {
1417
+ display: block;
1418
+ flex: 1 1 0;
1419
+ }
1420
+
1421
+ .mdt-table td a {
1422
+ color: inherit;
1423
+ text-decoration: none;
1424
+ }
1425
+
1426
+ .mdt-table td.mdt-td-readonly a {
1427
+ cursor: pointer;
1428
+ }
1429
+
1430
+ .mdt-clickable-value {
1431
+ color: inherit;
1432
+ cursor: pointer;
1433
+ }
1434
+
1435
+ .mdt-table td.mdt-td-readonly {
1436
+ cursor: default;
1437
+ }
1438
+
1439
+ .mdt-table td.mdt-td-clickable,
1440
+ .mdt-table td.mdt-td-clickable .mdt-td-inner {
1441
+ cursor: pointer;
1442
+ }
1443
+
1444
+ .mdt-table td.mdt-col-data.mdt-td-clickable .mdt-cell-truncate,
1445
+ .mdt-table td.mdt-col-data.mdt-td-clickable .mdt-cell-with-icon-text {
1446
+ color: #226EB7;
1447
+ }
1448
+
1449
+ .mdt-table td.mdt-td-clickable-disabled,
1450
+ .mdt-table td.mdt-td-clickable-disabled .mdt-td-inner {
1451
+ cursor: not-allowed;
1452
+ }
1453
+
1454
+ .mdt-table td.mdt-td-editable {
1455
+ padding: 0;
1456
+ cursor: pointer;
1457
+ }
1458
+
1459
+ .mdt-table .mdt-td-editable .mdt-cell-editable-wrap,
1460
+ .mdt-table .mdt-td-first-with-select .mdt-td-inner,
1461
+ .mdt-table .mdt-td-first-with-select .mdt-cell-editable-wrap,
1462
+ .mdt-table .mdt-td-first-with-select .mdt-td-readonly-inner {
1463
+ padding: 0 22px;
1464
+ }
1465
+
1466
+ .mdt-table .mdt-td-editable:focus-within .mdt-cell-editable-wrap {
1467
+ background: rgba(0, 0, 0, 0.04);
1468
+ }
1469
+
1470
+ .mdt-table td.mdt-value-13,
1471
+ .mdt-table td.mdt-value-13 .mdt-td-inner,
1472
+ .mdt-table td.mdt-value-13 .mdt-cell-truncate,
1473
+ .mdt-table td.mdt-value-13 .mdt-clickable-value {
1474
+ font-size: 13px;
1475
+ line-height: 20px;
1476
+ }
1477
+
1478
+ .mdt-table td.mdt-value-13 .mdt-td-inner,
1479
+ .mdt-table td.mdt-value-13 .mdt-cell-editable-wrap {
1480
+ align-items: center;
1481
+ }
1482
+
1483
+ /* ── th wrapper: needed for popup positioning ── */
1484
+ .mdt-th-wrapper {
1485
+ position: relative;
1486
+ display: flex;
1487
+ align-items: center;
1488
+ width: 100%;
1489
+ height: 44px;
1490
+ min-width: 0;
1491
+ padding: 0 22px;
1492
+ box-sizing: border-box;
1493
+ overflow: visible;
1494
+ }
1495
+
1496
+ /* ── clickable header label ── */
1497
+ .mdt-header-cell {
1498
+ display: flex;
1499
+ align-items: center;
1500
+ gap: 0;
1501
+ width: 100%;
1502
+ min-width: 0;
1503
+ overflow: visible;
1504
+ cursor: pointer;
1505
+ user-select: none;
1506
+ border-radius: 0;
1507
+ transition: background 0.15s;
1508
+ }
1509
+
1510
+ .mdt-header-label {
1511
+ display: flex;
1512
+ align-items: center;
1513
+ gap: 6px;
1514
+ flex: 1 1 0;
1515
+ min-width: 0;
1516
+ overflow: hidden;
1517
+ }
1518
+
1519
+ .mdt-header-title {
1520
+ font-family: "Inter", Arial, Helvetica, sans-serif;
1521
+ font-size: 13px;
1522
+ line-height: 19.5px;
1523
+ font-weight: 400;
1524
+ color: oklch(0.4377 0.0066 230.87);
1525
+ white-space: nowrap;
1526
+ overflow: hidden;
1527
+ text-overflow: ellipsis;
1528
+ min-width: 0;
1529
+ }
1530
+
1531
+ /* Data column headers only — full label visible */
1532
+ .mdt-table thead th.mdt-col-data {
1533
+ overflow: visible;
1534
+ }
1535
+
1536
+ .mdt-table thead th.mdt-col-data .mdt-th-wrapper {
1537
+ min-width: min-content;
1538
+ }
1539
+
1540
+ .mdt-table thead th.mdt-col-data .mdt-header-cell,
1541
+ .mdt-table thead th.mdt-col-data .mdt-header-label {
1542
+ min-width: min-content;
1543
+ flex: 0 1 auto;
1544
+ overflow: visible;
1545
+ }
1546
+
1547
+ .mdt-table thead th.mdt-col-data .mdt-header-title {
1548
+ overflow: visible;
1549
+ text-overflow: clip;
1550
+ min-width: min-content;
1551
+ flex-shrink: 0;
1552
+ }
1553
+
1554
+ /* Sort chevron(s) — never shrink or hide behind label text */
1555
+ .mdt-header-sort-slot {
1556
+ flex: 0 0 auto;
1557
+ display: inline-flex;
1558
+ align-items: center;
1559
+ justify-content: center;
1560
+ min-width: 22px;
1561
+ padding-left: 6px;
1562
+ flex-shrink: 0;
1563
+ position: relative;
1564
+ z-index: 2;
1565
+ background: #f4f4f5;
1566
+ }
1567
+
1568
+ .mdt-header-sort-slot .mdt-header-icons-sorted {
1569
+ min-width: 34px;
1570
+ justify-content: flex-end;
1571
+ }
1572
+
1573
+ .mdt-column-icon-img {
1574
+ display: block;
1575
+ object-fit: contain;
1576
+ flex-shrink: 0;
1577
+ }
1578
+
1579
+ .mdt-column-icon {
1580
+ display: inline-flex;
1581
+ align-items: center;
1582
+ justify-content: center;
1583
+ flex-shrink: 0;
1584
+ }
1585
+
1586
+ .mdt-header-icon,
1587
+ .mdt-row-icon {
1588
+ width: 16px;
1589
+ height: 16px;
1590
+ color: oklch(0.5517 0.008 286.03);
1591
+ flex-shrink: 0;
1592
+ }
1593
+
1594
+ .mdt-row-icon {
1595
+ width: 14px;
1596
+ height: 14px;
1597
+ }
1598
+
1599
+ .mdt-td-inner {
1600
+ display: flex;
1601
+ align-items: center;
1602
+ justify-content: flex-start;
1603
+ width: 100%;
1604
+ min-width: 0;
1605
+ height: 44px;
1606
+ min-height: 44px;
1607
+ box-sizing: border-box;
1608
+ overflow: hidden;
1609
+ }
1610
+
1611
+ .mdt-table td>.mdt-td-inner,
1612
+ .mdt-table td>.mdt-cell-editable-wrap.mdt-td-inner {
1613
+ height: 100%;
1614
+ }
1615
+
1616
+ .mdt-td-readonly-inner {
1617
+ padding: 0 22px;
1618
+ }
1619
+
1620
+ .mdt-cell-truncate-host {
1621
+ display: flex;
1622
+ align-items: center;
1623
+ min-width: 0;
1624
+ max-width: 100%;
1625
+ flex: 1 1 auto;
1626
+ overflow: hidden;
1627
+ }
1628
+
1629
+ .mdt-cell-truncate {
1630
+ display: block;
1631
+ width: 100%;
1632
+ min-width: 0;
1633
+ max-width: 100%;
1634
+ overflow: hidden;
1635
+ text-overflow: ellipsis;
1636
+ white-space: nowrap;
1637
+ line-height: normal;
1638
+ }
1639
+
1640
+ .mdt-table td.mdt-col-data .mdt-cell-truncate > .mdt-clickable-value,
1641
+ .mdt-table td.mdt-col-data .mdt-cell-truncate > span,
1642
+ .mdt-table td.mdt-col-data .mdt-cell-truncate > a {
1643
+ /* display: block; */
1644
+ width: 100%;
1645
+ min-width: 0;
1646
+ max-width: 100%;
1647
+ overflow: hidden;
1648
+ text-overflow: ellipsis;
1649
+ white-space: nowrap;
1650
+ }
1651
+
1652
+ .mdt-cell-with-icon {
1653
+ display: flex;
1654
+ align-items: center;
1655
+ gap: 6px;
1656
+ width: 100%;
1657
+ min-width: 0;
1658
+ max-width: 100%;
1659
+ overflow: hidden;
1660
+ }
1661
+
1662
+ .mdt-cell-with-icon-text {
1663
+ flex: 1 1 0;
1664
+ min-width: 0;
1665
+ max-width: 100%;
1666
+ overflow: hidden;
1667
+ text-overflow: ellipsis;
1668
+ white-space: nowrap;
1669
+ }
1670
+
1671
+ .mdt-user-cell {
1672
+ display: inline-flex;
1673
+ align-items: center;
1674
+ justify-content: center;
1675
+ gap: 6px;
1676
+ }
1677
+
1678
+ .mdt-user-avatar {
1679
+ width: 14px;
1680
+ height: 14px;
1681
+ border-radius: 0;
1682
+ display: inline-flex;
1683
+ align-items: center;
1684
+ justify-content: center;
1685
+ flex-shrink: 0;
1686
+ background: oklch(0.4799 0.1158 242.91);
1687
+ color: oklch(0.9848 0.0003 230.66);
1688
+ font-family: "Inter", Arial, Helvetica, sans-serif;
1689
+ font-size: 8px;
1690
+ font-weight: 500;
1691
+ line-height: 0;
1692
+ text-transform: uppercase;
1693
+ }
1694
+
1695
+ .mdt-user-name {
1696
+ color: inherit;
1697
+ }
1698
+
1699
+ .mdt-status-cell {
1700
+ display: inline-flex;
1701
+ align-items: center;
1702
+ gap: 6px;
1703
+ }
1704
+
1705
+ .mdt-status-icon {
1706
+ flex-shrink: 0;
1707
+ }
1708
+
1709
+ .mdt-header-cell:hover {
1710
+ background: transparent;
1711
+ }
1712
+
1713
+
1714
+ /* ── chevron / sort icon ── */
1715
+ .mdt-header-chevron {
1716
+ flex-shrink: 0;
1717
+ color: #a1a1aa;
1718
+ transition: color 0.15s;
1719
+ }
1720
+
1721
+ /* ── both icons shown when column is sorted ── */
1722
+ .mdt-header-icons-sorted {
1723
+ display: inline-flex;
1724
+ align-items: center;
1725
+ gap: 2px;
1726
+ flex-shrink: 0;
1727
+ }
1728
+
1729
+ .mdt-header-chevron.mdt-sorted {
1730
+ color: #00669e;
1731
+ }
1732
+
1733
+
1734
+
1735
+ /* ── sort popup dropdown ── */
1736
+ .mdt-sort-popup {
1737
+ position: absolute;
1738
+ top: calc(100% + 4px);
1739
+ left: 0;
1740
+ z-index: 100;
1741
+ width: 192px;
1742
+ background: oklch(1 0 0);
1743
+ border: 0.5px solid #e4e4e7;
1744
+ border-radius: 0;
1745
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0, 0, 0, 0.06);
1746
+ margin: 4px 0;
1747
+ padding: 10px 8px;
1748
+ display: flex;
1749
+ flex-direction: column;
1750
+ gap: 8px;
1751
+ overflow-y: auto;
1752
+ }
1753
+
1754
+ /* ── individual sort option button ── */
1755
+ .mdt-sort-option {
1756
+ display: flex;
1757
+ align-items: center;
1758
+ gap: 8px;
1759
+ width: 100%;
1760
+ padding: 6px 4px;
1761
+ border: none;
1762
+ background: transparent;
1763
+ border-radius: 0;
1764
+ font-size: 11px;
1765
+ font-family: "Inter", Arial, Helvetica, sans-serif;
1766
+ font-weight: 400;
1767
+ color: oklch(0.4377 0.0066 230.87);
1768
+ text-align: left;
1769
+ cursor: pointer;
1770
+ white-space: nowrap;
1771
+ overflow: hidden;
1772
+ text-overflow: ellipsis;
1773
+ user-select: none;
1774
+ transition: background 0.12s;
1775
+ }
1776
+
1777
+ .mdt-sort-option-icon {
1778
+ color: #71717a;
1779
+ flex-shrink: 0;
1780
+ }
1781
+
1782
+
1783
+ /* ── checkmark for active sort ── */
1784
+ .mdt-sort-check {
1785
+ margin-left: auto;
1786
+ color: oklch(0.4377 0.0066 230.87);
1787
+ }
1788
+
1789
+
1790
+ /* ── clear sorting button ── */
1791
+ .mdt-sort-clear {
1792
+ color: #71717a;
1793
+ }
1794
+
1795
+ .mdt-sort-clear .mdt-sort-option-icon {
1796
+ color: #a1a1aa;
1797
+ }
1798
+
1799
+ /* ── row clickable ── */
1800
+ .mdt-row-clickable {
1801
+ cursor: default;
1802
+ }
1803
+
1804
+ .mdt-row-clickable td.mdt-td-editable {
1805
+ cursor: pointer;
1806
+ }
1807
+
1808
+ /* Show pointer on first-value cells when row click is enabled */
1809
+ .mdt-row-clickable td.mdt-td-first-with-select .mdt-cell-first-content,
1810
+ .mdt-row-clickable td.mdt-td-first-with-select .mdt-clickable-value,
1811
+ .mdt-row-clickable td.mdt-td-first-with-select .mdt-cell-truncate {
1812
+ cursor: pointer;
1813
+ }
1814
+
1815
+ /* List view: left-most main value should show pointer on hover */
1816
+ .mdt-row-clickable .mdt-col-main .mdt-title,
1817
+ .mdt-row-clickable .mdt-col-main .mdt-title * {
1818
+ cursor: pointer;
1819
+ }
1820
+
1821
+ .mdt-skeleton-cell {
1822
+ display: inline-block;
1823
+ width: 72px;
1824
+ max-width: 85%;
1825
+ height: 12px;
1826
+ border-radius: 0;
1827
+ vertical-align: middle;
1828
+ background: linear-gradient(90deg,
1829
+ #f1f2f4 0%,
1830
+ #e9ebee 50%,
1831
+ #f1f2f4 100%);
1832
+ background-size: 220px 100%;
1833
+ animation: mdt-skeleton-shimmer 1.3s ease-in-out infinite;
1834
+ }
1835
+
1836
+ .mdt-skeleton-table-cell {
1837
+ width: 72px;
1838
+ max-width: 85%;
1839
+ }
1840
+
1841
+ .mdt-group-row-skeleton .mdt-col-main {
1842
+ flex: 0 1 auto;
1843
+ max-width: min(100%, 380px);
1844
+ }
1845
+
1846
+ .mdt-group-row-skeleton .mdt-skeleton-main {
1847
+ display: block;
1848
+ width: 120px;
1849
+ max-width: 32vw;
1850
+ min-width: 64px;
1851
+ height: var(--mdt-list-id-line-height, 16px);
1852
+ }
1853
+
1854
+ .mdt-group-row-skeleton .mdt-skeleton-secondary {
1855
+ display: block;
1856
+ width: 160px;
1857
+ max-width: 42vw;
1858
+ min-width: 96px;
1859
+ height: var(--mdt-list-secondary-line-height, 20px);
1860
+ }
1861
+
1862
+ .mdt-chip-skeleton {
1863
+ pointer-events: none;
1864
+ background: #ffffff;
1865
+ }
1866
+
1867
+ .mdt-group-row-skeleton .mdt-skeleton-chip {
1868
+ display: block;
1869
+ width: 56px;
1870
+ height: 12px;
1871
+ }
1872
+
1873
+ .mdt-group-row-skeleton .mdt-skeleton-row-menu {
1874
+ display: block;
1875
+ width: 14px;
1876
+ height: 14px;
1877
+ }
1878
+
1879
+ .mdt-table-loading-more td {
1880
+ border-top: 1px solid #e5e7eb;
1881
+ }
1882
+
1883
+ @keyframes mdt-skeleton-shimmer {
1884
+ 0% {
1885
+ background-position: -220px 0;
1886
+ }
1887
+
1888
+ 100% {
1889
+ background-position: 220px 0;
1890
+ }
1891
+ }
1892
+
1893
+ /* ── Filter Dropdown ── */
1894
+ .mdt-filter-button-wrap {
1895
+ position: relative;
1896
+ }
1897
+
1898
+ .mdt-filter-dropdown {
1899
+ position: absolute;
1900
+ top: calc(100% + 4px);
1901
+ right: 0;
1902
+ width: 240px;
1903
+ background: #ffffff;
1904
+ border: 1px solid #e5e7eb;
1905
+ border-radius: 0;
1906
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
1907
+ z-index: 1000;
1908
+ padding: 4px;
1909
+ display: flex;
1910
+ flex-direction: column;
1911
+ }
1912
+
1913
+ .mdt-filter-dropdown.mdt-fd-left {
1914
+ right: auto;
1915
+ left: 0;
1916
+ }
1917
+
1918
+ .mdt-fd-search {
1919
+ padding: 8px;
1920
+ }
1921
+
1922
+ .mdt-fd-search-wrap {
1923
+ position: relative;
1924
+ display: flex;
1925
+ align-items: center;
1926
+ }
1927
+
1928
+ .mdt-fd-search-icon {
1929
+ position: absolute;
1930
+ left: 8px;
1931
+ display: flex;
1932
+ align-items: center;
1933
+ pointer-events: none;
1934
+ color: #a1a1aa;
1935
+ }
1936
+
1937
+ .mdt-fd-search input {
1938
+ width: 100%;
1939
+ height: 26.5px;
1940
+ padding: 0 10px 0 28px;
1941
+ border: 1px solid #e5e7eb;
1942
+ border-radius: 0;
1943
+ font-size: 12px;
1944
+ font-weight: 400;
1945
+ outline: none;
1946
+ }
1947
+
1948
+ .mdt-fd-search input::placeholder {
1949
+ font-size: 12px;
1950
+ font-weight: 400;
1951
+ color: #a1a1aa;
1952
+ }
1953
+
1954
+ .mdt-fd-search input:focus {
1955
+ border-color: #3b82f6;
1956
+ box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
1957
+ }
1958
+
1959
+ .mdt-fd-list {
1960
+ max-height: 280px;
1961
+ overflow-y: auto;
1962
+ overscroll-behavior: contain;
1963
+ padding: 4px 0;
1964
+ display: flex;
1965
+ flex-direction: column;
1966
+ gap: 6px;
1967
+ scrollbar-width: thin;
1968
+ scrollbar-color: #bbbbbb #ececec;
1969
+ }
1970
+
1971
+ .mdt-fd-list::-webkit-scrollbar {
1972
+ width: 4px;
1973
+ }
1974
+
1975
+ .mdt-fd-list::-webkit-scrollbar-track {
1976
+ background: #ececec;
1977
+ }
1978
+
1979
+ .mdt-fd-list::-webkit-scrollbar-thumb {
1980
+ background: #bbbbbb;
1981
+ border-radius: 0;
1982
+ }
1983
+
1984
+ .mdt-fd-item {
1985
+ width: 100%;
1986
+ height: 28.5px;
1987
+ min-height: 28.5px;
1988
+ display: flex;
1989
+ align-items: center;
1990
+ gap: 0.5rem;
1991
+ padding: 0 12px;
1992
+ border: 0;
1993
+ background: transparent;
1994
+ color: oklch(43.77% .0066 230.87);
1995
+ font-size: 11px;
1996
+ font-weight: 400;
1997
+ line-height: 17px;
1998
+ text-align: left;
1999
+ cursor: pointer;
2000
+ border-radius: 0;
2001
+ transition: background 0.1s;
2002
+ }
2003
+
2004
+ .mdt-fd-item:hover {
2005
+ background: #f4f4f5;
2006
+ color: #18181b;
2007
+ }
2008
+
2009
+ .mdt-fd-item:disabled {
2010
+ opacity: 0.5;
2011
+ cursor: not-allowed;
2012
+ background: transparent !important;
2013
+ color: oklch(43.77% .0066 230.87) !important;
2014
+ }
2015
+
2016
+ .mdt-fd-item-icon {
2017
+ display: flex;
2018
+ align-items: center;
2019
+ justify-content: center;
2020
+ width: 18px;
2021
+ height: 18px;
2022
+ color: oklch(43.77% .0066 230.87);
2023
+ }
2024
+
2025
+ .mdt-fd-empty {
2026
+ padding: 12px;
2027
+ font-size: 13px;
2028
+ color: #a1a1aa;
2029
+ text-align: center;
2030
+ }
2031
+
2032
+ .mdt-fd-svg,
2033
+ .mdt-chip-svg {
2034
+ width: 14px;
2035
+ height: 14px;
2036
+ }
2037
+
2038
+ /* ── Active state for filter button ── */
2039
+ .mdt-filter-active {
2040
+ background: oklch(97.15% .0167 230.9) !important;
2041
+ border: 1px solid oklch(47.99% .1158 242.91) !important;
2042
+ color: oklch(47.99% .1158 242.91) !important;
2043
+ }
2044
+
2045
+ /* ── List Layout (Group Wrap) ── */
2046
+ .mdt-group-wrap {
2047
+ overflow: auto;
2048
+ background: #ffffff;
2049
+ scrollbar-width: thin;
2050
+ scrollbar-color: #bbbbbb #ececec;
2051
+ }
2052
+
2053
+ .mdt-group-wrap::-webkit-scrollbar {
2054
+ width: 4px;
2055
+ }
2056
+
2057
+ .mdt-group-wrap::-webkit-scrollbar-track {
2058
+ background: #ececec;
2059
+ }
2060
+
2061
+ .mdt-group-wrap::-webkit-scrollbar-thumb {
2062
+ background: #bbbbbb;
2063
+ }
2064
+
2065
+ .mdt-group-wrap--loading {
2066
+ display: flex;
2067
+ flex-direction: column;
2068
+ flex: 1 1 auto;
2069
+ min-height: 0;
2070
+ }
2071
+
2072
+ .mdt-group-wrap--loading .mdt-group--loading {
2073
+ flex: 1 1 auto;
2074
+ min-height: 100%;
2075
+ display: flex;
2076
+ flex-direction: column;
2077
+ }
2078
+
2079
+ .mdt-group--loading .mdt-group-head {
2080
+ flex-shrink: 0;
2081
+ }
2082
+
2083
+ .mdt-group--loading .mdt-group-row,
2084
+ .mdt-group--loading .mdt-group-row-skeleton {
2085
+ flex-shrink: 0;
2086
+ }
2087
+
2088
+ .mdt-group--loading .mdt-group-row:last-child {
2089
+ border-bottom: 1px solid #e5e7eb;
2090
+ }
2091
+
2092
+ .mdt-group {
2093
+ border-top: none;
2094
+ }
2095
+
2096
+ .mdt-group+.mdt-group {
2097
+ border-top: none;
2098
+ }
2099
+
2100
+ .mdt-group+.mdt-group .mdt-group-head {
2101
+ border-top: 1px solid #dddde0;
2102
+ }
2103
+
2104
+ .mdt-group-head {
2105
+ height: 48px;
2106
+ min-height: 48px;
2107
+ flex-shrink: 0;
2108
+ padding: 0 22px;
2109
+ background: #f4f4f5;
2110
+ display: flex;
2111
+ align-items: center;
2112
+ gap: 10px;
2113
+ box-sizing: border-box;
2114
+ }
2115
+
2116
+ .mdt-group-head-left {
2117
+ display: flex;
2118
+ align-items: center;
2119
+ gap: 8px;
2120
+ min-width: 0;
2121
+ }
2122
+
2123
+ .mdt-group-head-icon-wrap {
2124
+ display: inline-flex;
2125
+ align-items: center;
2126
+ justify-content: center;
2127
+ flex-shrink: 0;
2128
+ }
2129
+
2130
+ .mdt-group-head-labels {
2131
+ display: flex;
2132
+ align-items: center;
2133
+ gap: 10px;
2134
+ min-width: 0;
2135
+ }
2136
+
2137
+ .mdt-group-head-title {
2138
+ color: oklch(0.2378 0.0029 230.83);
2139
+ font-size: 16px;
2140
+ line-height: 24px;
2141
+ font-weight: 500;
2142
+ }
2143
+
2144
+ .mdt-group-head-title-split {
2145
+ display: inline-flex;
2146
+ align-items: center;
2147
+ gap: 6px;
2148
+ }
2149
+
2150
+ .mdt-group-head-title-prefix,
2151
+ .mdt-group-head-title-suffix {
2152
+ color: oklch(0.2378 0.0029 230.83);
2153
+ font-size: 16px;
2154
+ line-height: 24px;
2155
+ font-weight: 500;
2156
+ }
2157
+
2158
+ .mdt-group-count {
2159
+ color: #71717a;
2160
+ font-size: 13px;
2161
+ font-weight: 500;
2162
+ line-height: 20px;
2163
+ margin-top: 2px;
2164
+ margin-left: 0;
2165
+ }
2166
+
2167
+ .mdt-group-head-toggle {
2168
+ margin-left: auto;
2169
+ flex-shrink: 0;
2170
+ width: 28px;
2171
+ height: 28px;
2172
+ padding: 0;
2173
+ border: 0;
2174
+ border-radius: 0;
2175
+ background: transparent;
2176
+ color: oklch(0.5288 0.0083 230.88);
2177
+ display: inline-flex;
2178
+ align-items: center;
2179
+ justify-content: center;
2180
+ cursor: pointer;
2181
+ }
2182
+
2183
+ .mdt-group-head-toggle:hover {
2184
+ background: rgba(0, 0, 0, 0.04);
2185
+ }
2186
+
2187
+ .mdt-group-row {
2188
+ min-height: 48px;
2189
+ display: flex;
2190
+ flex-wrap: wrap;
2191
+ gap: 8px 12px;
2192
+ align-items: center;
2193
+ justify-content: space-between;
2194
+ padding: 8px 22px;
2195
+ border-bottom: 1px solid #e5e7eb;
2196
+ background: #ffffff;
2197
+ }
2198
+
2199
+ .mdt-group-row:last-child {
2200
+ border-bottom: none;
2201
+ }
2202
+
2203
+ .mdt-group-row:hover {
2204
+ background: #f9f9fb;
2205
+ }
2206
+
2207
+ .mdt-col-main {
2208
+ display: flex;
2209
+ align-items: center;
2210
+ gap: 12px;
2211
+ flex: 1 1 200px;
2212
+ min-width: 0;
2213
+ max-width: 100%;
2214
+ overflow: hidden;
2215
+ }
2216
+
2217
+ .mdt-col-main-text {
2218
+ display: flex;
2219
+ align-items: baseline;
2220
+ flex-wrap: nowrap;
2221
+ gap: var(--mdt-list-main-gap, 16px);
2222
+ min-width: 0;
2223
+ flex: 1;
2224
+ max-width: 100%;
2225
+ overflow: hidden;
2226
+ }
2227
+
2228
+ .mdt-group-head-with-select,
2229
+ .mdt-group-row-with-select {
2230
+ position: relative;
2231
+ overflow: visible;
2232
+ }
2233
+
2234
+ .mdt-group-head-with-select .mdt-cell-select-slot,
2235
+ .mdt-group-row-with-select>.mdt-cell-select-slot {
2236
+ left: 3px;
2237
+ }
2238
+
2239
+ .mdt-group-head-with-select:hover .mdt-row-select-checkbox--header,
2240
+ .mdt-group-head-with-select.mdt-group-head-select-active .mdt-row-select-checkbox--header,
2241
+ .mdt-group-wrap.mdt-has-selection .mdt-group-head-with-select .mdt-row-select-checkbox--header {
2242
+ opacity: 1;
2243
+ }
2244
+
2245
+ .mdt-group-row-with-select:hover .mdt-row-select-checkbox,
2246
+ .mdt-group-row-with-select.mdt-row-selected .mdt-row-select-checkbox {
2247
+ opacity: 1;
2248
+ }
2249
+
2250
+ .mdt-col-meta-wrap {
2251
+ display: flex;
2252
+ align-items: center;
2253
+ gap: 8px;
2254
+ flex: 1 1 auto;
2255
+ justify-content: flex-end;
2256
+ min-width: 0;
2257
+ max-width: 100%;
2258
+ margin-left: auto;
2259
+ }
2260
+
2261
+ .mdt-col-meta {
2262
+ display: flex;
2263
+ align-items: center;
2264
+ gap: 8px;
2265
+ flex-wrap: nowrap;
2266
+ justify-content: flex-end;
2267
+ min-width: 0;
2268
+ max-width: 100%;
2269
+ overflow-x: auto;
2270
+ overflow-y: hidden;
2271
+ scrollbar-width: thin;
2272
+ scrollbar-color: #bdbfc4 transparent;
2273
+ -webkit-overflow-scrolling: touch;
2274
+ }
2275
+
2276
+ .mdt-col-meta::-webkit-scrollbar {
2277
+ height: 4px;
2278
+ }
2279
+
2280
+ .mdt-col-meta::-webkit-scrollbar-thumb {
2281
+ background: #bdbfc4;
2282
+ border-radius: 2px;
2283
+ }
2284
+
2285
+ .mdt-list-row-actions {
2286
+ flex-shrink: 0;
2287
+ display: flex;
2288
+ align-items: center;
2289
+ }
2290
+
2291
+ .mdt-chip-with-icon {
2292
+ display: inline-flex;
2293
+ align-items: center;
2294
+ gap: 6px;
2295
+ min-width: 0;
2296
+ max-width: 100%;
2297
+ }
2298
+
2299
+ .mdt-chip-icon-only {
2300
+ display: inline-flex;
2301
+ align-items: center;
2302
+ justify-content: center;
2303
+ width: 14px;
2304
+ min-width: 14px;
2305
+ flex: 0 0 auto;
2306
+ }
2307
+
2308
+ .mdt-chip-with-icon .mdt-row-icon {
2309
+ flex-shrink: 0;
2310
+ }
2311
+
2312
+ .mdt-chip-text {
2313
+ min-width: 0;
2314
+ overflow: hidden;
2315
+ text-overflow: ellipsis;
2316
+ white-space: nowrap;
2317
+ }
2318
+
2319
+ .mdt-chip {
2320
+ height: 20px;
2321
+ width: auto;
2322
+ max-width: 190px;
2323
+ min-width: 0;
2324
+ flex: 0 0 auto;
2325
+ border: 1px solid #e5e7eb;
2326
+ border-radius: 0;
2327
+ padding: 0 6px;
2328
+ display: inline-flex;
2329
+ align-items: center;
2330
+ gap: 6px;
2331
+ color: oklch(0.4377 0.0066 230.87);
2332
+ font-size: 12px;
2333
+ font-weight: 500;
2334
+ line-height: 20px;
2335
+ background: #ffffff;
2336
+ white-space: nowrap;
2337
+ overflow: hidden;
2338
+ text-overflow: ellipsis;
2339
+ }
2340
+
2341
+ .mdt-chip * {
2342
+ max-width: 100%;
2343
+ overflow: hidden;
2344
+ text-overflow: ellipsis;
2345
+ white-space: nowrap;
2346
+ }
2347
+
2348
+ .mdt-chip-multi-summary .mdt-multi-summary-trigger,
2349
+ .mdt-chip-multi-summary .mdt-multi-summary-count {
2350
+ overflow: visible;
2351
+ text-overflow: unset;
2352
+ max-width: none;
2353
+ }
2354
+
2355
+ .mdt-multi-summary {
2356
+ display: inline-flex;
2357
+ align-items: center;
2358
+ gap: 6px;
2359
+ min-width: 0;
2360
+ }
2361
+
2362
+ .mdt-multi-summary--empty {
2363
+ color: #71717a;
2364
+ }
2365
+
2366
+ .mdt-multi-summary-trigger {
2367
+ display: inline-flex;
2368
+ align-items: center;
2369
+ min-width: 0;
2370
+ }
2371
+
2372
+ .mdt-multi-summary-count {
2373
+ cursor: default;
2374
+ }
2375
+
2376
+ .mdt-multi-tooltip-title {
2377
+ font-size: 12px;
2378
+ font-weight: 600;
2379
+ color: #18181b;
2380
+ margin-bottom: 4px;
2381
+ }
2382
+
2383
+ .mdt-multi-tooltip-body {
2384
+ font-size: 12px;
2385
+ color: #52525b;
2386
+ line-height: 1.45;
2387
+ }
2388
+
2389
+ /* List view: pointer on editable chips only (badge look unchanged) */
2390
+ .mdt-chip.mdt-list-chip-edit-anchor,
2391
+ .mdt-chip.mdt-list-chip-edit-anchor * {
2392
+ cursor: pointer;
2393
+ }
2394
+
2395
+ .mdt-chip.mdt-list-chip-clickable {
2396
+ cursor: pointer;
2397
+ }
2398
+
2399
+ .mdt-chip.mdt-list-chip-clickable-disabled {
2400
+ cursor: not-allowed;
2401
+ }
2402
+
2403
+ .mdt-col-meta .MuiTooltip-root:has(.mdt-list-chip-edit-anchor) {
2404
+ cursor: pointer;
2405
+ display: inline-flex;
2406
+ }
2407
+
2408
+ .mdt-table .mdt-td-editable .mdt-cell-editable-trigger,
2409
+ .mdt-table .mdt-td-editable .mdt-cell-editable-trigger * {
2410
+ cursor: pointer;
2411
+ }
2412
+
2413
+ .mdt-row-menu {
2414
+ width: 24px;
2415
+ height: 24px;
2416
+ border: 0;
2417
+ background: transparent;
2418
+ color: #52525b;
2419
+ display: inline-flex;
2420
+ align-items: center;
2421
+ justify-content: center;
2422
+ }
2423
+
2424
+ .mdt-title {
2425
+ color: var(--mdt-list-id-color);
2426
+ font-size: var(--mdt-list-id-font-size);
2427
+ font-weight: var(--mdt-list-id-font-weight);
2428
+ line-height: var(--mdt-list-id-line-height);
2429
+ flex: 0 1 auto;
2430
+ min-width: 0;
2431
+ max-width: 40%;
2432
+ white-space: nowrap;
2433
+ overflow: hidden;
2434
+ text-overflow: ellipsis;
2435
+ }
2436
+
2437
+ .mdt-title .mdt-clickable-value {
2438
+ color: inherit;
2439
+ font-size: inherit;
2440
+ font-weight: inherit;
2441
+ line-height: inherit;
2442
+ }
2443
+
2444
+ .mdt-list-secondary {
2445
+ color: var(--mdt-list-secondary-color);
2446
+ font-size: var(--mdt-list-secondary-font-size);
2447
+ font-weight: var(--mdt-list-secondary-font-weight);
2448
+ line-height: var(--mdt-list-secondary-line-height);
2449
+ flex: 1 1 auto;
2450
+ min-width: 0;
2451
+ white-space: nowrap;
2452
+ overflow: hidden;
2453
+ text-overflow: ellipsis;
2454
+ }
2455
+
2456
+ /* Narrow: badges move to their own row; left text keeps truncating */
2457
+ @media (max-width: 900px) {
2458
+ .mdt-col-meta-wrap {
2459
+ flex: 1 1 100%;
2460
+ width: 100%;
2461
+ padding-left: 0;
2462
+ }
2463
+
2464
+ .mdt-col-meta {
2465
+ justify-content: flex-start;
2466
+ width: 100%;
2467
+ }
2468
+ }
2469
+
2470
+ /* ── Layout Switcher ── */
2471
+ .mdt-layout-switch {
2472
+ height: 32px;
2473
+ background: #eeeeef;
2474
+ border: 1px solid #e5e7eb;
2475
+ border-radius: 0;
2476
+ padding: 4px;
2477
+ display: inline-flex;
2478
+ align-items: center;
2479
+ gap: 4px;
2480
+ }
2481
+
2482
+ .mdt-layout-switch button {
2483
+ width: 27.99px;
2484
+ height: 22px;
2485
+ border: 0;
2486
+ background: transparent;
2487
+ color: #4f5058;
2488
+ padding: 0;
2489
+ border-radius: 0;
2490
+ display: inline-flex;
2491
+ align-items: center;
2492
+ justify-content: center;
2493
+ cursor: pointer;
2494
+ }
2495
+
2496
+ .mdt-layout-switch button svg {
2497
+ width: 13.99px;
2498
+ height: 13.99px;
2499
+ stroke-width: 2.25;
2500
+ }
2501
+
2502
+ .mdt-layout-switch button.mdt-layout-active {
2503
+ background: rgba(37, 42, 51, 0.1) !important;
2504
+ border: 0 !important;
2505
+ color: #27272a !important;
2506
+ box-shadow: none !important;
2507
+ outline: none !important;
2508
+ }
2509
+
2510
+ .mdt-layout-switch button.mdt-layout-active svg {
2511
+ color: #27272a !important;
2512
+ stroke: currentColor !important;
2513
+ }
2514
+
2515
+ /* ── Display button — icon-only, matches filter button ── */
2516
+ .mdt-display-btn {
2517
+ cursor: pointer;
2518
+ }
2519
+
2520
+ .mdt-cv-display-btn {
2521
+ justify-content: center;
2522
+ min-width: 28px;
2523
+ padding: 0 8px;
2524
+ }
2525
+
2526
+ .mdt-cv-display-btn svg {
2527
+ width: 11px;
2528
+ height: 11px;
2529
+ flex-shrink: 0;
2530
+ }
2531
+
2532
+ .mdt-cv-display-btn--open {
2533
+ background: #fafafa;
2534
+ border-color: #d4d4d8;
2535
+ }
2536
+
2537
+ /* ── Display popup ───────────────────────────────────────────────────────── */
2538
+ .mdt-display-popup {
2539
+ position: absolute;
2540
+ top: calc(100% + 8px);
2541
+ right: 0;
2542
+ z-index: 1000;
2543
+ width: 280px;
2544
+ background: #fff;
2545
+ border: 1px solid #e4e4e7;
2546
+ border-radius: 0;
2547
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.06);
2548
+ overflow: hidden;
2549
+ padding: 8px 0;
2550
+ }
2551
+
2552
+ /* ── Section ─────────────────────────────────────────────────────────────── */
2553
+ .mdt-dp-section {
2554
+ position: relative;
2555
+ }
2556
+
2557
+ .mdt-dp-section:not(:last-child)::after {
2558
+ content: '';
2559
+ display: block;
2560
+ height: 1px;
2561
+ background: #f4f4f5;
2562
+ margin: 4px 12px;
2563
+ }
2564
+
2565
+ .mdt-dp-section-header {
2566
+ width: 100%;
2567
+ display: flex;
2568
+ align-items: center;
2569
+ justify-content: space-between;
2570
+ padding: 6px 12px 2px;
2571
+ background: transparent;
2572
+ font-size: 11px;
2573
+ font-weight: 400;
2574
+ line-height: 12px;
2575
+ color: oklch(0.6161 0.009153 230.867);
2576
+ text-transform: none;
2577
+ letter-spacing: 0;
2578
+ }
2579
+
2580
+ .mdt-dp-chevron {
2581
+ transition: transform 0.2s ease;
2582
+ color: oklch(0.6161 0.009153 230.867);
2583
+ flex-shrink: 0;
2584
+ }
2585
+
2586
+ /* ── Badges area ─────────────────────────────────────────────────────────── */
2587
+ .mdt-dp-badges {
2588
+ display: flex;
2589
+ flex-wrap: wrap;
2590
+ gap: 4px;
2591
+ padding: 0px 12px 8px;
2592
+ }
2593
+
2594
+ .mdt-dp-badge {
2595
+ display: inline-flex;
2596
+ align-items: center;
2597
+ padding: 0.125rem 0.5rem;
2598
+ font-size: 11px;
2599
+ font-weight: 400;
2600
+ line-height: 17px;
2601
+ border-radius: 0;
2602
+ border: 1px solid #e4e4e7;
2603
+ background: #f4f4f5;
2604
+ color: #52525b;
2605
+ cursor: pointer;
2606
+ transition: background 0.12s, border-color 0.12s, color 0.12s;
2607
+ white-space: nowrap;
2608
+ }
2609
+
2610
+ .mdt-dp-badge:hover {
2611
+ background: #e4e4e7;
2612
+ color: #18181b;
2613
+ }
2614
+
2615
+ .mdt-dp-badge.mdt-dp-badge-active {
2616
+ background: oklch(47.99% .1158 242.91);
2617
+ border-color: oklch(47.99% .1158 242.91);
2618
+ color: oklch(0.9848 0.0003 230.66);
2619
+ font-weight: 400;
2620
+ }
2621
+
2622
+ /* ── Order by direction row ──────────────────────────────────────────────── */
2623
+ .mdt-dp-orderby {
2624
+ display: flex;
2625
+ flex-direction: column;
2626
+ gap: 6px;
2627
+ }
2628
+
2629
+ .mdt-dp-order-dir {
2630
+ display: flex;
2631
+ flex-wrap: wrap;
2632
+ gap: 6px;
2633
+ padding: 0 12px 12px;
2634
+ }
2635
+
2636
+ /* ── Group By checklist ──────────────────────────────────────────────────── */
2637
+ .mdt-dp-checklist {
2638
+ display: flex;
2639
+ flex-direction: column;
2640
+ padding: 0px 12px 8px;
2641
+ gap: 0;
2642
+ }
2643
+
2644
+ .mdt-dp-check-row {
2645
+ display: flex;
2646
+ align-items: center;
2647
+ gap: 8px;
2648
+ padding: 5px 0;
2649
+ cursor: pointer;
2650
+ border-radius: 0;
2651
+ }
2652
+
2653
+ .mdt-dp-check-row:hover .mdt-dp-check-label {
2654
+ color: #18181b;
2655
+ }
2656
+
2657
+ .mdt-dp-check-none {
2658
+ margin-top: 0;
2659
+ padding-top: 5px;
2660
+ border-top: none;
2661
+ }
2662
+
2663
+ .mdt-dp-checkbox {
2664
+ appearance: none;
2665
+ -webkit-appearance: none;
2666
+ width: 12px;
2667
+ height: 12px;
2668
+ min-width: 12px;
2669
+ border: 1.5px solid #d4d4d8;
2670
+ border-radius: 50%;
2671
+ background: #fff;
2672
+ cursor: pointer;
2673
+ position: relative;
2674
+ transition: background 0.12s, border-color 0.12s;
2675
+ flex-shrink: 0;
2676
+ }
2677
+
2678
+ .mdt-dp-checkbox:checked {
2679
+ background: oklch(47.99% .1158 242.91);
2680
+ border-color: oklch(47.99% .1158 242.91);
2681
+ }
2682
+
2683
+ .mdt-dp-checkbox:checked::after {
2684
+ content: '';
2685
+ position: absolute;
2686
+ left: 50%;
2687
+ top: 45%;
2688
+ width: 3px;
2689
+ height: 5.5px;
2690
+ border: 1.5px solid #fff;
2691
+ border-top: none;
2692
+ border-left: none;
2693
+ transform: translate(-50%, -50%) rotate(45deg);
2694
+ border-radius: 0;
2695
+ background: transparent;
2696
+ }
2697
+
2698
+ .mdt-dp-check-label {
2699
+ font-size: 11px;
2700
+ font-weight: 400;
2701
+ line-height: 12px;
2702
+ color: oklch(0.4377 0.0066 230.87);
2703
+ user-select: none;
2704
+ }
2705
+
2706
+ /* ── Order By direction sub-rows ─────────────────────────────────────────── */
2707
+ .mdt-dp-order-dir-row {
2708
+ display: flex;
2709
+ flex-direction: column;
2710
+ border-top: 1px solid #f4f4f5;
2711
+ margin-top: 2px;
2712
+ padding-top: 2px;
2713
+ }
2714
+
2715
+ /* ── Section header is now a div — override cursor ───────────────────────── */
2716
+ .mdt-dp-chevron-btn {
2717
+ display: flex;
2718
+ align-items: center;
2719
+ justify-content: center;
2720
+ background: none;
2721
+ border: none;
2722
+ padding: 2px;
2723
+ cursor: pointer;
2724
+ border-radius: 0;
2725
+ color: oklch(0.6161 0.009153 230.867);
2726
+ line-height: 0;
2727
+ }
2728
+
2729
+ .mdt-dp-chevron-btn:hover {
2730
+ background: #f4f4f5;
2731
+ }
2732
+
2733
+ .mdt-dp-header-icons {
2734
+ display: flex;
2735
+ align-items: center;
2736
+ gap: 2px;
2737
+ }
2738
+
2739
+ .mdt-dp-sort-icon-btn {
2740
+ display: flex;
2741
+ align-items: center;
2742
+ justify-content: center;
2743
+ background: rgba(37, 42, 51, 0.1);
2744
+ border: none;
2745
+ padding: 3px;
2746
+ cursor: pointer;
2747
+ border-radius: 0;
2748
+ color: #27272a;
2749
+ line-height: 0;
2750
+ }
2751
+
2752
+ .mdt-dp-sort-icon-btn:hover {
2753
+ background: rgba(37, 42, 51, 0.18);
2754
+ }
2755
+
2756
+ /* ── Chip label as clickable button ─────────────────────────────────────── */
2757
+ .mdt-chip-label-btn {
2758
+ background: transparent;
2759
+ border: none;
2760
+ cursor: pointer;
2761
+ border-radius: 0;
2762
+ padding: 0 10px;
2763
+ height: 100%;
2764
+ transition: background 0.12s;
2765
+ }
2766
+
2767
+ .mdt-chip-label-btn:hover {
2768
+ background: #f4f4f5;
2769
+ }
2770
+
2771
+ /* ── Replace dropdown anchored to the chip ───────────────────────────────── */
2772
+ .mdt-chip-replace-dropdown {
2773
+ position: absolute;
2774
+ top: calc(100% + 4px);
2775
+ left: 0;
2776
+ z-index: 9999;
2777
+ min-width: 200px;
2778
+ }
2779
+
2780
+ /* ── Filter chip value button ────────────────────────────────────────────── */
2781
+ .mdt-chip-value-wrap {
2782
+ display: flex;
2783
+ align-items: center;
2784
+ height: 100%;
2785
+ flex: 1 1 auto;
2786
+ min-width: 0;
2787
+ max-width: 100%;
2788
+ overflow: visible;
2789
+ border-left: 1px solid #e5e7eb;
2790
+ position: relative;
2791
+ z-index: 1;
2792
+ }
2793
+
2794
+ .mdt-chip-value {
2795
+ background: none;
2796
+ border: none;
2797
+ cursor: pointer;
2798
+ font-size: 13px;
2799
+ font-weight: 400;
2800
+ color: oklch(0.2378 0.0029 230.83);
2801
+ padding: 0 10px;
2802
+ height: 100%;
2803
+ width: 100%;
2804
+ min-width: 0;
2805
+ max-width: 100%;
2806
+ display: flex;
2807
+ align-items: center;
2808
+ justify-content: flex-start;
2809
+ border-radius: 0;
2810
+ line-height: 1;
2811
+ overflow: hidden;
2812
+ }
2813
+
2814
+ .mdt-chip-value:hover {
2815
+ background: #f4f4f5;
2816
+ }
2817
+
2818
+ .mdt-chip-value-text {
2819
+ display: block;
2820
+ min-width: 0;
2821
+ max-width: 100%;
2822
+ overflow: hidden;
2823
+ text-overflow: ellipsis;
2824
+ white-space: nowrap;
2825
+ }
2826
+
2827
+ .mdt-chip-value-text--multi {
2828
+ display: flex;
2829
+ align-items: center;
2830
+ min-width: 0;
2831
+ max-width: 100%;
2832
+ overflow: hidden;
2833
+ }
2834
+
2835
+ .mdt-chip-value-entry {
2836
+ display: inline-flex;
2837
+ align-items: center;
2838
+ gap: 3px;
2839
+ min-width: 0;
2840
+ max-width: 100%;
2841
+ overflow: hidden;
2842
+ flex-shrink: 1;
2843
+ }
2844
+
2845
+ .mdt-chip-value-entry-label {
2846
+ overflow: hidden;
2847
+ text-overflow: ellipsis;
2848
+ white-space: nowrap;
2849
+ min-width: 0;
2850
+ }
2851
+
2852
+ .mdt-chip-value-sep {
2853
+ margin-right: 2px;
2854
+ color: oklch(0.2378 0.0029 230.83);
2855
+ flex-shrink: 0;
2856
+ }
2857
+
2858
+ .mdt-chip-value-icon {
2859
+ display: flex;
2860
+ align-items: center;
2861
+ color: oklch(0.5288 0.0083 230.88);
2862
+ flex-shrink: 0;
2863
+ }
2864
+
2865
+ .mdt-chip-date-value {
2866
+ font-size: 12px;
2867
+ font-weight: 400;
2868
+ color: oklch(43.77% .0066 230.87);
2869
+ }
2870
+
2871
+ .mdt-chip-value-more {
2872
+ font-size: 13px;
2873
+ font-weight: 400;
2874
+ color: oklch(52.88% .0083 230.88);
2875
+ margin-left: 4px;
2876
+ white-space: nowrap;
2877
+ flex-shrink: 0;
2878
+ }
2879
+
2880
+ /* ── Filter value popup (text / date) ────────────────────────────────────── */
2881
+ .mdt-value-popup {
2882
+ position: absolute;
2883
+ top: calc(100% + 4px);
2884
+ left: 0;
2885
+ z-index: 9999;
2886
+ background: #fff;
2887
+ border: 1px solid oklch(0.9 0.005 230);
2888
+ border-radius: 0;
2889
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
2890
+ min-width: 260px;
2891
+ max-width: min(320px, calc(100vw - 16px));
2892
+ box-sizing: border-box;
2893
+ }
2894
+
2895
+ .mdt-value-text-popup {
2896
+ padding: 12px;
2897
+ display: flex;
2898
+ flex-direction: column;
2899
+ gap: 8px;
2900
+ min-width: 260px;
2901
+ width: 100%;
2902
+ max-width: 100%;
2903
+ box-sizing: border-box;
2904
+ }
2905
+
2906
+ .mdt-value-text-input,
2907
+ .mdt-value-date-input {
2908
+ width: 100%;
2909
+ height: 30px;
2910
+ border: 1px solid oklch(0.88 0.005 230);
2911
+ border-radius: 0;
2912
+ padding: 0 10px;
2913
+ font-size: 13px;
2914
+ font-weight: 400;
2915
+ color: oklch(0.2 0.005 230);
2916
+ outline: none;
2917
+ box-sizing: border-box;
2918
+ }
2919
+
2920
+ .mdt-value-text-input::placeholder,
2921
+ .mdt-value-date-input::placeholder {
2922
+ font-size: 11px;
2923
+ font-weight: 400;
2924
+ color: oklch(52.88% .0083 230.88);
2925
+ }
2926
+
2927
+ .mdt-value-text-input:focus,
2928
+ .mdt-value-date-input:focus {
2929
+ border-color: oklch(47.99% .1158 242.91);
2930
+ }
2931
+
2932
+ .mdt-value-popup-bottom {
2933
+ display: flex;
2934
+ align-items: center;
2935
+ justify-content: space-between;
2936
+ gap: 8px;
2937
+ min-width: 0;
2938
+ width: 100%;
2939
+ box-sizing: border-box;
2940
+ }
2941
+
2942
+ .mdt-value-popup-hint {
2943
+ font-size: 10px;
2944
+ color: oklch(52.88% .0083 230.88);
2945
+ white-space: nowrap;
2946
+ flex: 1 1 auto;
2947
+ min-width: 0;
2948
+ line-height: 1.35;
2949
+ overflow: hidden;
2950
+ text-overflow: ellipsis;
2951
+ }
2952
+
2953
+ .mdt-value-popup-hint kbd {
2954
+ background: oklch(96.96% .0007 230.67);
2955
+ border: none;
2956
+ border-radius: 0;
2957
+ padding: 1px 6px;
2958
+ font-size: 10px;
2959
+ color: oklch(52.88% .0083 230.88);
2960
+ }
2961
+
2962
+ .mdt-value-popup-actions {
2963
+ display: flex;
2964
+ align-items: center;
2965
+ justify-content: flex-end;
2966
+ gap: 6px;
2967
+ flex-shrink: 0;
2968
+ min-width: 0;
2969
+ }
2970
+
2971
+ .mdt-value-popup-actions .mdt-ghost,
2972
+ .mdt-value-popup-actions .mdt-primary {
2973
+ height: 24px !important;
2974
+ min-height: 24px !important;
2975
+ line-height: 24px !important;
2976
+ font-size: 13px !important;
2977
+ padding: 0 10px;
2978
+ }
2979
+
2980
+ .mdt-value-popup-actions .mdt-primary:disabled {
2981
+ opacity: 0.4;
2982
+ cursor: not-allowed;
2983
+ }
2984
+
2985
+ /* ── Filter value popup (select) ─────────────────────────────────────────── */
2986
+ .mdt-value-select-popup {
2987
+ padding: 0;
2988
+ overflow: hidden;
2989
+ }
2990
+
2991
+ .mdt-value-select-item {
2992
+ display: flex;
2993
+ align-items: center;
2994
+ gap: 8px;
2995
+ }
2996
+
2997
+ /* ── Calendar date picker popup ─────────────────────────────────────────── */
2998
+ .mdt-cal-popup {
2999
+ padding: 20px;
3000
+ width: 320px;
3001
+ user-select: none;
3002
+ }
3003
+
3004
+ .mdt-cal-header {
3005
+ display: flex;
3006
+ align-items: center;
3007
+ justify-content: space-between;
3008
+ margin-bottom: 12px;
3009
+ position: relative;
3010
+ z-index: 4;
3011
+ pointer-events: auto;
3012
+ }
3013
+
3014
+ .mdt-cal-title {
3015
+ font-size: 14px;
3016
+ font-weight: 600;
3017
+ color: oklch(0.2378 0.0029 230.83);
3018
+ flex: 1;
3019
+ text-align: center;
3020
+ }
3021
+
3022
+ .mdt-cal-nav {
3023
+ background: none;
3024
+ border: none;
3025
+ cursor: pointer;
3026
+ font-size: 16px;
3027
+ font-weight: 500;
3028
+ color: oklch(0.4377 0.0066 230.87);
3029
+ padding: 0;
3030
+ border-radius: 0;
3031
+ line-height: 1;
3032
+ min-width: 32px;
3033
+ min-height: 32px;
3034
+ display: inline-flex;
3035
+ align-items: center;
3036
+ justify-content: center;
3037
+ flex-shrink: 0;
3038
+ pointer-events: auto;
3039
+ position: relative;
3040
+ z-index: 5;
3041
+ }
3042
+
3043
+ .mdt-cal-nav:hover {
3044
+ background: oklch(96.96% .0007 230.67);
3045
+ color: oklch(0.2378 0.0029 230.83);
3046
+ }
3047
+
3048
+ .mdt-cal-grid {
3049
+ display: grid;
3050
+ grid-template-columns: repeat(7, 1fr);
3051
+ gap: 0;
3052
+ place-items: stretch;
3053
+ }
3054
+
3055
+ .mdt-cal-dow {
3056
+ font-size: 11px;
3057
+ font-weight: 500;
3058
+ color: oklch(0.5288 0.0083 230.88);
3059
+ text-align: center;
3060
+ padding: 4px 0;
3061
+ }
3062
+
3063
+ .mdt-cal-day {
3064
+ background: none;
3065
+ border: none;
3066
+ cursor: pointer;
3067
+ font-size: 12px;
3068
+ font-weight: 400;
3069
+ color: oklch(0.4377 0.0066 230.87);
3070
+ text-align: center;
3071
+ border-radius: 0;
3072
+ display: flex;
3073
+ align-items: center;
3074
+ justify-content: center;
3075
+ width: 100%;
3076
+ aspect-ratio: 1;
3077
+ min-width: 0;
3078
+ height: auto;
3079
+ margin: 0;
3080
+ padding: 0;
3081
+ position: relative;
3082
+ box-sizing: border-box;
3083
+ z-index: 0;
3084
+ }
3085
+
3086
+ .mdt-cal-day:hover:not(.mdt-cal-day-other) {
3087
+ background: oklch(96.96% .0007 230.67);
3088
+ }
3089
+
3090
+ .mdt-cal-day-other {
3091
+ color: oklch(0.65 0.005 230);
3092
+ cursor: pointer;
3093
+ }
3094
+
3095
+ .mdt-cal-day-other:hover {
3096
+ background: oklch(96.96% .0007 230.67);
3097
+ color: oklch(0.4377 0.0066 230.87);
3098
+ }
3099
+
3100
+ .mdt-cal-day-disabled,
3101
+ .mdt-cal-day-disabled:hover {
3102
+ opacity: 0.35;
3103
+ cursor: not-allowed;
3104
+ pointer-events: none;
3105
+ }
3106
+
3107
+ .mdt-cal-day-today {
3108
+ position: relative;
3109
+ }
3110
+
3111
+ .mdt-cal-day-today::after {
3112
+ content: '';
3113
+ position: absolute;
3114
+ bottom: 3px;
3115
+ left: 50%;
3116
+ transform: translateX(-50%);
3117
+ width: 4px;
3118
+ height: 4px;
3119
+ border-radius: 0;
3120
+ background: color-mix(in oklab, oklch(47.99% .1158 242.91) 50%, transparent);
3121
+ }
3122
+
3123
+ /* Single date (is) — square selection */
3124
+ .mdt-cal-day-selected {
3125
+ background: oklch(47.99% .1158 242.91) !important;
3126
+ color: #fff !important;
3127
+ font-weight: 500;
3128
+ border-radius: 0 !important;
3129
+ }
3130
+
3131
+ /* Range — square cells; solid square on start/end, light fill between after 2nd click */
3132
+ .mdt-cal-day-range-start,
3133
+ .mdt-cal-day-range-end {
3134
+ color: #fff !important;
3135
+ font-weight: 500;
3136
+ border-radius: 0 !important;
3137
+ }
3138
+
3139
+ .mdt-cal-day-range-start::before,
3140
+ .mdt-cal-day-range-end::before {
3141
+ content: "";
3142
+ position: absolute;
3143
+ inset: 0;
3144
+ background: oklch(47.99% .1158 242.91);
3145
+ border-radius: 0;
3146
+ z-index: -1;
3147
+ }
3148
+
3149
+ .mdt-cal-day-in-range {
3150
+ color: oklch(0.4377 0.0066 230.87) !important;
3151
+ border-radius: 0 !important;
3152
+ }
3153
+
3154
+ .mdt-cal-day-in-range::before {
3155
+ content: "";
3156
+ position: absolute;
3157
+ inset: 0;
3158
+ background: color-mix(in oklab, oklch(47.99% .1158 242.91) 18%, transparent);
3159
+ border-radius: 0;
3160
+ z-index: -1;
3161
+ }
3162
+
3163
+ /* ── Active item in filter dropdown ─────────────────────────────────────── */
3164
+ .mdt-fd-item-active {
3165
+ background: oklch(97% 0.005 242.91);
3166
+ color: oklch(47.99% .1158 242.91) !important;
3167
+ }
3168
+
3169
+ .mdt-fd-item-active .mdt-fd-item-icon {
3170
+ color: oklch(47.99% .1158 242.91);
3171
+ }
3172
+
3173
+ /* ── Sticky main column (left, e.g. Application ID) ── */
3174
+ .mdt-col-sticky-left {
3175
+ position: sticky !important;
3176
+ left: 0;
3177
+ z-index: 2;
3178
+ background: #ffffff;
3179
+ overflow: visible !important;
3180
+ box-shadow: inset -3px 0 4px -2px rgba(0, 0, 0, 0.04);
3181
+ }
3182
+
3183
+ .mdt-table thead .mdt-th-sticky-left {
3184
+ position: sticky !important;
3185
+ z-index: 12;
3186
+ background: #f4f4f5;
3187
+ overflow: visible !important;
3188
+ box-shadow: inset -3px 0 4px -2px rgba(0, 0, 0, 0.04);
3189
+ }
3190
+
3191
+ .mdt-col-sticky-left::after,
3192
+ .mdt-table thead .mdt-th-sticky-left::after {
3193
+ content: "";
3194
+ position: absolute;
3195
+ top: 0;
3196
+ right: -5px;
3197
+ bottom: 0;
3198
+ width: 5px;
3199
+ pointer-events: none;
3200
+ background: linear-gradient(to right, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0));
3201
+ z-index: 30;
3202
+ }
3203
+
3204
+ .mdt-col-sticky-left--scroll {
3205
+ border-right: 1px solid #e5e7eb;
3206
+ }
3207
+
3208
+ .mdt-table tbody tr.mdt-row-selected td.mdt-col-sticky-left {
3209
+ background: oklch(97% 0.005 242.91);
3210
+ }
3211
+
3212
+ /* Table loaders — same inner padding as cell content (td padding 0, wrap 0 22px) */
3213
+ .mdt-table-skeleton-row td,
3214
+ .mdt-table-loading-more td {
3215
+ padding: 0;
3216
+ }
3217
+
3218
+ .mdt-cell-skeleton-wrap {
3219
+ display: flex;
3220
+ align-items: center;
3221
+ width: 100%;
3222
+ height: 44px;
3223
+ min-height: 44px;
3224
+ padding: 0 22px;
3225
+ box-sizing: border-box;
3226
+ }
3227
+
3228
+ /* Options column only (⋯) — locked 48px */
3229
+ .mdt-table col.mdt-col-row-menu-col {
3230
+ width: 48px !important;
3231
+ min-width: 48px !important;
3232
+ max-width: 48px !important;
3233
+ }
3234
+
3235
+ .mdt-table th.mdt-th-row-menu,
3236
+ .mdt-table td.mdt-col-row-menu {
3237
+ width: 48px !important;
3238
+ min-width: 48px !important;
3239
+ max-width: 48px !important;
3240
+ padding: 0;
3241
+ text-align: center;
3242
+ vertical-align: middle;
3243
+ overflow: visible !important;
3244
+ box-sizing: border-box;
3245
+ }
3246
+
3247
+ .mdt-table td.mdt-col-row-menu {
3248
+ background: #fff;
3249
+ font-size: 12px;
3250
+ color: #52525b;
3251
+ white-space: nowrap;
3252
+ }
3253
+
3254
+ .mdt-th-row-menu {
3255
+ background: #f4f4f5;
3256
+ }
3257
+
3258
+ .mdt-th-row-menu-inner {
3259
+ display: flex;
3260
+ align-items: center;
3261
+ justify-content: center;
3262
+ width: 100%;
3263
+ height: 100%;
3264
+ cursor: default;
3265
+ }
3266
+
3267
+ .mdt-row-menu-header-icon {
3268
+ color: oklch(0.5288 0.0083 230.88);
3269
+ flex-shrink: 0;
3270
+ }
3271
+
3272
+ .mdt-col-row-menu {
3273
+ background: #ffffff;
3274
+ position: sticky !important;
3275
+ right: 0;
3276
+ z-index: 1;
3277
+ overflow: visible !important;
3278
+ box-shadow: inset 3px 0 4px -2px rgba(0, 0, 0, 0.04);
3279
+ }
3280
+
3281
+ .mdt-table thead .mdt-th-row-menu {
3282
+ position: sticky !important;
3283
+ right: 0;
3284
+ z-index: 11;
3285
+ overflow: visible !important;
3286
+ box-shadow: inset 3px 0 4px -2px rgba(0, 0, 0, 0.04);
3287
+ }
3288
+
3289
+ .mdt-col-row-menu::before,
3290
+ .mdt-table thead .mdt-th-row-menu::before {
3291
+ content: "";
3292
+ position: absolute;
3293
+ top: 0;
3294
+ left: -5px;
3295
+ bottom: 0;
3296
+ width: 5px;
3297
+ pointer-events: none;
3298
+ background: linear-gradient(to left, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0));
3299
+ z-index: 30;
3300
+ }
3301
+
3302
+ .mdt-col-row-menu--scroll,
3303
+ .mdt-th-row-menu.mdt-col-row-menu--scroll {
3304
+ border-left: 1px solid #e5e7eb;
3305
+ }
3306
+
3307
+ .mdt-row-menu-cell {
3308
+ position: relative;
3309
+ display: flex;
3310
+ align-items: center;
3311
+ justify-content: center;
3312
+ width: 100%;
3313
+ height: 100%;
3314
+ min-height: 44px;
3315
+ }
3316
+
3317
+ .mdt-row-menu-trigger {
3318
+ display: inline-flex;
3319
+ align-items: center;
3320
+ justify-content: center;
3321
+ width: 28px;
3322
+ height: 28px;
3323
+ padding: 0;
3324
+ border: none;
3325
+ border-radius: 0;
3326
+ background: transparent;
3327
+ color: oklch(0.4377 0.0066 230.87);
3328
+ cursor: pointer;
3329
+ opacity: 0;
3330
+ transition: opacity 0.12s ease;
3331
+ }
3332
+
3333
+ .mdt-table tbody tr:hover .mdt-row-menu-trigger,
3334
+ .mdt-row-menu-cell-open .mdt-row-menu-trigger,
3335
+ .mdt-row-menu-trigger--always-visible {
3336
+ opacity: 1;
3337
+ }
3338
+
3339
+ /* ── Row selection — overlaid on first column (no extra column width) ───── */
3340
+ .mdt-th-first-with-select,
3341
+ .mdt-td-first-with-select {
3342
+ position: relative;
3343
+ overflow: visible;
3344
+ }
3345
+
3346
+ /* Keep Application ID pinned when bulk checkbox shares the first cell */
3347
+ .mdt-th-first-with-select.mdt-col-sticky-left,
3348
+ .mdt-td-first-with-select.mdt-col-sticky-left {
3349
+ position: sticky;
3350
+ left: 0;
3351
+ }
3352
+
3353
+ .mdt-table thead th.mdt-th-first-with-select.mdt-col-sticky-left {
3354
+ top: 0;
3355
+ z-index: 12;
3356
+ }
3357
+
3358
+ .mdt-cell-select-slot {
3359
+ position: absolute;
3360
+ left: 4px;
3361
+ top: 50%;
3362
+ transform: translateY(-50%);
3363
+ z-index: 3;
3364
+ display: flex;
3365
+ align-items: center;
3366
+ justify-content: center;
3367
+ width: 16px;
3368
+ height: 16px;
3369
+ pointer-events: auto;
3370
+ }
3371
+
3372
+ /* Must stay flex (same element as .mdt-td-inner) — do not use display: block */
3373
+ .mdt-td-inner.mdt-cell-first-content,
3374
+ .mdt-td-readonly-inner.mdt-cell-first-content,
3375
+ .mdt-cell-editable-wrap.mdt-cell-first-content {
3376
+ display: flex;
3377
+ align-items: center;
3378
+ min-width: 0;
3379
+ width: 100%;
3380
+ overflow: hidden;
3381
+ }
3382
+
3383
+ .mdt-cell-editable-trigger {
3384
+ display: flex;
3385
+ align-items: center;
3386
+ justify-content: flex-start;
3387
+ width: 100%;
3388
+ height: 100%;
3389
+ min-width: 0;
3390
+ min-height: 100%;
3391
+ margin: 0;
3392
+ padding: 0;
3393
+ border: none;
3394
+ background: transparent;
3395
+ text-align: left;
3396
+ font: inherit;
3397
+ color: inherit;
3398
+ cursor: pointer;
3399
+ border-radius: 0;
3400
+ overflow: hidden;
3401
+ line-height: normal;
3402
+ }
3403
+
3404
+ .mdt-cell-edit-popup-anchor {
3405
+ pointer-events: auto;
3406
+ box-sizing: border-box;
3407
+ overflow: visible;
3408
+ }
3409
+
3410
+ .mdt-cell-edit-popup-anchor .mdt-value-popup {
3411
+ position: relative;
3412
+ top: 0;
3413
+ left: 0;
3414
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
3415
+ min-width: 100%;
3416
+ width: 100%;
3417
+ max-width: 100%;
3418
+ }
3419
+
3420
+ .mdt-row-select-checkbox {
3421
+ appearance: none;
3422
+ -webkit-appearance: none;
3423
+ width: 14px;
3424
+ height: 14px;
3425
+ min-width: 14px;
3426
+ margin: 0;
3427
+ border: 1.5px solid #d4d4d8;
3428
+ border-radius: 0;
3429
+ background: #fff;
3430
+ cursor: pointer;
3431
+ position: relative;
3432
+ flex-shrink: 0;
3433
+ opacity: 0;
3434
+ transition: opacity 0.12s ease, background 0.12s, border-color 0.12s;
3435
+ }
3436
+
3437
+ .mdt-row-select-checkbox:checked {
3438
+ opacity: 1;
3439
+ background: oklch(47.99% 0.1158 242.91);
3440
+ border-color: oklch(47.99% 0.1158 242.91);
3441
+ }
3442
+
3443
+ .mdt-row-select-checkbox:checked::after {
3444
+ content: "";
3445
+ position: absolute;
3446
+ left: 50%;
3447
+ top: 45%;
3448
+ width: 3px;
3449
+ height: 6px;
3450
+ border: 1.5px solid #fff;
3451
+ border-top: none;
3452
+ border-left: none;
3453
+ transform: translate(-50%, -50%) rotate(45deg);
3454
+ }
3455
+
3456
+ /* Header: minus when partial, tick only when all selected */
3457
+ .mdt-row-select-checkbox--header:indeterminate {
3458
+ opacity: 1;
3459
+ background: oklch(47.99% 0.1158 242.91);
3460
+ border-color: oklch(47.99% 0.1158 242.91);
3461
+ }
3462
+
3463
+ .mdt-row-select-checkbox--header:indeterminate::after {
3464
+ content: "";
3465
+ position: absolute;
3466
+ left: 50%;
3467
+ top: 50%;
3468
+ width: 8px;
3469
+ height: 2px;
3470
+ border: none;
3471
+ background: #fff;
3472
+ transform: translate(-50%, -50%);
3473
+ }
3474
+
3475
+ /* Row: visible when hovering first column only, or when that row is selected */
3476
+ .mdt-table tbody .mdt-td-first-with-select:hover .mdt-row-select-checkbox,
3477
+ .mdt-table tbody tr.mdt-row-selected .mdt-row-select-checkbox {
3478
+ opacity: 1;
3479
+ }
3480
+
3481
+ /* Header: visible when hovering first header cell only, or when any row is selected */
3482
+ .mdt-table thead .mdt-th-first-with-select:hover .mdt-row-select-checkbox--header,
3483
+ .mdt-table.mdt-has-selection .mdt-row-select-checkbox--header {
3484
+ opacity: 1;
3485
+ }
3486
+
3487
+ .mdt-table tbody tr.mdt-row-selected {
3488
+ background: oklch(97% 0.005 242.91);
3489
+ }
3490
+
3491
+ .mdt-table tbody tr.mdt-row-selected td {
3492
+ background: oklch(97% 0.005 242.91);
3493
+ }
3494
+
3495
+ .mdt-table tbody tr.mdt-row-selected td.mdt-col-row-menu {
3496
+ background: #ffffff;
3497
+ }
3498
+
3499
+ .mdt-group-row.mdt-row-selected {
3500
+ background: oklch(97% 0.005 242.91);
3501
+ }
3502
+
3503
+ /* ── Bulk selection bar (bottom toolbar, within table content area) ──────── */
3504
+ .mdt-bulk-bar {
3505
+ position: absolute;
3506
+ bottom: 0;
3507
+ left: 0;
3508
+ right: 0;
3509
+ z-index: 600;
3510
+ background: #ffffff;
3511
+ border-top: 1px solid #e5e7eb;
3512
+ box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
3513
+ }
3514
+
3515
+ .mdt-bulk-bar-inner {
3516
+ display: flex;
3517
+ align-items: center;
3518
+ gap: 12px;
3519
+ height: 56px;
3520
+ padding: 0 22px;
3521
+ min-width: 0;
3522
+ }
3523
+
3524
+ .mdt-bulk-bar-status {
3525
+ display: flex;
3526
+ align-items: center;
3527
+ gap: 10px;
3528
+ flex-shrink: 0;
3529
+ }
3530
+
3531
+ /* Same 14px box as row selection checkboxes, with minus to clear */
3532
+ .mdt-bulk-bar-clear {
3533
+ display: inline-block;
3534
+ width: 14px;
3535
+ height: 14px;
3536
+ min-width: 14px;
3537
+ padding: 0;
3538
+ border: 1.5px solid oklch(47.99% 0.1158 242.91);
3539
+ border-radius: 0;
3540
+ background: oklch(47.99% 0.1158 242.91);
3541
+ cursor: pointer;
3542
+ flex-shrink: 0;
3543
+ position: relative;
3544
+ }
3545
+
3546
+ .mdt-bulk-bar-clear::after {
3547
+ content: "";
3548
+ position: absolute;
3549
+ left: 50%;
3550
+ top: 50%;
3551
+ width: 8px;
3552
+ height: 2px;
3553
+ border: none;
3554
+ background: #fff;
3555
+ transform: translate(-50%, -50%);
3556
+ }
3557
+
3558
+ .mdt-bulk-bar-clear:hover {
3559
+ background: oklch(42% 0.1158 242.91);
3560
+ border-color: oklch(42% 0.1158 242.91);
3561
+ }
3562
+
3563
+ .mdt-bulk-bar-count {
3564
+ font-size: 13px;
3565
+ font-weight: 400;
3566
+ line-height: 20px;
3567
+ color: oklch(0.5288 0.0083 230.88);
3568
+ white-space: nowrap;
3569
+ }
3570
+
3571
+ .mdt-bulk-bar-divider {
3572
+ width: 1px;
3573
+ height: 24px;
3574
+ background: #e5e7eb;
3575
+ flex-shrink: 0;
3576
+ }
3577
+
3578
+ .mdt-bulk-bar-actions {
3579
+ display: flex;
3580
+ align-items: center;
3581
+ gap: 12px;
3582
+ flex: 1;
3583
+ min-width: 0;
3584
+ overflow: hidden;
3585
+ }
3586
+
3587
+ .mdt-bulk-bar-icons {
3588
+ display: flex;
3589
+ align-items: center;
3590
+ gap: 2px;
3591
+ flex-shrink: 0;
3592
+ }
3593
+
3594
+ .mdt-bulk-bar-icon-btn {
3595
+ display: inline-flex;
3596
+ align-items: center;
3597
+ justify-content: center;
3598
+ width: 32px;
3599
+ height: 32px;
3600
+ padding: 0;
3601
+ border: none;
3602
+ border-radius: 0;
3603
+ background: transparent;
3604
+ color: oklch(0.4377 0.0066 230.87);
3605
+ cursor: pointer;
3606
+ }
3607
+
3608
+ .mdt-bulk-bar-icon-btn:hover:not(:disabled) {
3609
+ background: #f4f4f5;
3610
+ }
3611
+
3612
+ .mdt-bulk-bar-icon-btn--disabled,
3613
+ .mdt-bulk-bar-icon-btn:disabled {
3614
+ opacity: 0.4;
3615
+ cursor: not-allowed;
3616
+ }
3617
+
3618
+ .mdt-bulk-bar-fields {
3619
+ display: flex;
3620
+ align-items: center;
3621
+ gap: 8px;
3622
+ flex: 1;
3623
+ min-width: 0;
3624
+ overflow-x: auto;
3625
+ }
3626
+
3627
+ .mdt-bulk-bar-fields::-webkit-scrollbar {
3628
+ display: none;
3629
+ }
3630
+
3631
+ .mdt-bulk-field-btn {
3632
+ display: inline-flex;
3633
+ align-items: center;
3634
+ gap: 6px;
3635
+ height: 28px;
3636
+ padding: 0 10px;
3637
+ border: 1px solid #e5e7eb;
3638
+ border-radius: 0;
3639
+ background: #ffffff;
3640
+ font-size: 12px;
3641
+ font-weight: 400;
3642
+ line-height: 1;
3643
+ color: oklch(0.4377 0.0066 230.87);
3644
+ cursor: pointer;
3645
+ white-space: nowrap;
3646
+ flex-shrink: 0;
3647
+ }
3648
+
3649
+ .mdt-bulk-field-btn:hover {
3650
+ background: #fafafa;
3651
+ border-color: #d4d4d8;
3652
+ }
3653
+
3654
+ .mdt-bulk-field-icon {
3655
+ flex-shrink: 0;
3656
+ color: oklch(0.5288 0.0083 230.88);
3657
+ }
3658
+
3659
+ .mdt-bulk-bar-right {
3660
+ margin-left: auto;
3661
+ flex-shrink: 0;
3662
+ }
3663
+
3664
+ .mdt-row-menu-popup {
3665
+ position: absolute;
3666
+ top: calc(100% + 4px);
3667
+ right: 4px;
3668
+ z-index: 1000;
3669
+ min-width: 160px;
3670
+ padding: 4px;
3671
+ background: #ffffff;
3672
+ border: 1px solid #e4e4e7;
3673
+ border-radius: 0;
3674
+ box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.06);
3675
+ }
3676
+
3677
+ .mdt-row-menu-popup--portal {
3678
+ position: fixed;
3679
+ top: auto;
3680
+ right: auto;
3681
+ width: max-content;
3682
+ min-width: 120px;
3683
+ max-width: calc(100vw - 16px);
3684
+ overflow: visible;
3685
+ }
3686
+
3687
+ .mdt-row-menu-item {
3688
+ width: 100%;
3689
+ display: flex;
3690
+ align-items: center;
3691
+ gap: 0.5rem;
3692
+ padding: 6px 10px;
3693
+ border: none;
3694
+ border-radius: 0;
3695
+ background: transparent;
3696
+ color: oklch(0.4377 0.0066 230.87);
3697
+ font-size: 11px;
3698
+ font-weight: 400;
3699
+ line-height: 17px;
3700
+ text-align: left;
3701
+ cursor: pointer;
3702
+ }
3703
+
3704
+ .mdt-row-menu-item svg {
3705
+ flex-shrink: 0;
3706
+ color: oklch(0.4377 0.0066 230.87);
3707
+ }
3708
+
3709
+ .mdt-row-menu-item-tooltip-wrap {
3710
+ position: relative;
3711
+ display: block;
3712
+ width: 100%;
3713
+ cursor: not-allowed;
3714
+ }
3715
+
3716
+ .mdt-row-menu-item-tooltip-wrap::before,
3717
+ .mdt-row-menu-item-tooltip-wrap::after {
3718
+ opacity: 0;
3719
+ visibility: hidden;
3720
+ pointer-events: none;
3721
+ transition: opacity 0.15s ease, visibility 0.15s ease;
3722
+ }
3723
+
3724
+ .mdt-row-menu-item-tooltip-wrap::after {
3725
+ content: attr(data-tooltip);
3726
+ position: absolute;
3727
+ right: calc(100% + 10px);
3728
+ top: 50%;
3729
+ transform: translateY(-50%);
3730
+ width: max-content;
3731
+ max-width: 220px;
3732
+ padding: 4px 8px;
3733
+ background: rgba(55, 55, 55, 0.92);
3734
+ color: #ffffff;
3735
+ font-size: 12px;
3736
+ font-weight: 400;
3737
+ line-height: 1.35;
3738
+ border: none;
3739
+ border-radius: 4px;
3740
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
3741
+ white-space: normal;
3742
+ text-align: center;
3743
+ z-index: 300010;
3744
+ }
3745
+
3746
+ .mdt-row-menu-item-tooltip-wrap::before {
3747
+ content: "";
3748
+ position: absolute;
3749
+ right: calc(100% + 4px);
3750
+ top: 50%;
3751
+ transform: translateY(-50%);
3752
+ border-width: 5px 0 5px 6px;
3753
+ border-style: solid;
3754
+ border-color: transparent transparent transparent rgba(55, 55, 55, 0.92);
3755
+ z-index: 300011;
3756
+ }
3757
+
3758
+ .mdt-row-menu-item-tooltip-wrap:hover::before,
3759
+ .mdt-row-menu-item-tooltip-wrap:hover::after {
3760
+ opacity: 1;
3761
+ visibility: visible;
3762
+ }
3763
+
3764
+ .mdt-row-menu-item--disabled {
3765
+ opacity: 0.45;
3766
+ cursor: not-allowed;
3767
+ }
3768
+
3769
+ .mdt-row-menu-item--disabled svg {
3770
+ color: oklch(0.65 0.0066 230.87);
3771
+ }
3772
+
3773
+ .mdt-row-select-checkbox--disabled,
3774
+ .mdt-row-select-checkbox:disabled {
3775
+ opacity: 0.35;
3776
+ cursor: not-allowed;
3777
+ }
3778
+
3779
+ /* ── Column visibility picker (table header icon) ── */
3780
+ .mdt-column-picker-popup {
3781
+ width: 260px;
3782
+ background: #ffffff;
3783
+ border: 1px solid #e4e4e7;
3784
+ border-radius: 0;
3785
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.06);
3786
+ overflow: hidden;
3787
+ }
3788
+
3789
+ .mdt-column-picker-popup--portal {
3790
+ position: fixed;
3791
+ }
3792
+
3793
+ .mdt-cp-search {
3794
+ border-bottom: none;
3795
+ }
3796
+
3797
+ .mdt-column-picker-popup .mdt-cp-search {
3798
+ padding: 8px 8px 2px;
3799
+ }
3800
+
3801
+ .mdt-cp-list {
3802
+ max-height: 280px;
3803
+ overflow-y: auto;
3804
+ padding: 4px 0 8px;
3805
+ }
3806
+
3807
+ .mdt-column-picker-popup .mdt-cp-list {
3808
+ padding: 0 0 8px;
3809
+ }
3810
+
3811
+ .mdt-cp-row {
3812
+ display: flex;
3813
+ align-items: center;
3814
+ gap: 8px;
3815
+ padding: 6px 12px;
3816
+ cursor: pointer;
3817
+ margin: 0;
3818
+ }
3819
+
3820
+ .mdt-cp-checkbox {
3821
+ appearance: none;
3822
+ -webkit-appearance: none;
3823
+ width: 14px;
3824
+ height: 14px;
3825
+ min-width: 14px;
3826
+ border: 1.5px solid #d4d4d8;
3827
+ border-radius: 0;
3828
+ background: #fff;
3829
+ cursor: pointer;
3830
+ position: relative;
3831
+ flex-shrink: 0;
3832
+ transition: background 0.12s, border-color 0.12s;
3833
+ }
3834
+
3835
+ .mdt-cp-checkbox:checked {
3836
+ background: oklch(47.99% 0.1158 242.91);
3837
+ border-color: oklch(47.99% 0.1158 242.91);
3838
+ }
3839
+
3840
+ .mdt-cp-checkbox:checked::after {
3841
+ content: "";
3842
+ position: absolute;
3843
+ left: 50%;
3844
+ top: 45%;
3845
+ width: 3px;
3846
+ height: 6px;
3847
+ border: 1.5px solid #fff;
3848
+ border-top: none;
3849
+ border-left: none;
3850
+ transform: translate(-50%, -50%) rotate(45deg);
3851
+ }
3852
+
3853
+ .mdt-cp-row-icon {
3854
+ display: flex;
3855
+ align-items: center;
3856
+ justify-content: center;
3857
+ width: 18px;
3858
+ height: 18px;
3859
+ color: oklch(0.4377 0.0066 230.87);
3860
+ flex-shrink: 0;
3861
+ }
3862
+
3863
+ .mdt-cp-label {
3864
+ font-size: 11px;
3865
+ font-weight: 400;
3866
+ line-height: 17px;
3867
+ color: oklch(0.4377 0.0066 230.87);
3868
+ user-select: none;
3869
+ }
3870
+
3871
+ .mdt-th-column-picker-btn {
3872
+ display: inline-flex;
3873
+ align-items: center;
3874
+ justify-content: center;
3875
+ width: 28px;
3876
+ height: 28px;
3877
+ padding: 0;
3878
+ border: none;
3879
+ border-radius: 0;
3880
+ background: transparent;
3881
+ cursor: pointer;
3882
+ color: oklch(0.4377 0.0066 230.87);
3883
+ transition: background 0.12s ease;
3884
+ }
3885
+
3886
+ .mdt-th-column-picker-btn--active {
3887
+ background: #eeeeef;
3888
+ border-radius: 0;
3889
+ }
3890
+
3891
+ /* ── Create View modal (Save as) ─────────────────────────────────────────── */
3892
+ .mdt-cv-overlay {
3893
+ position: fixed;
3894
+ inset: 0;
3895
+ z-index: 400000;
3896
+ display: flex;
3897
+ align-items: flex-start;
3898
+ justify-content: center;
3899
+ padding: 48px 24px 24px;
3900
+ background: rgba(15, 23, 42, 0.35);
3901
+ }
3902
+
3903
+ .mdt-cv-modal {
3904
+ width: 100%;
3905
+ max-width: 720px;
3906
+ background: #ffffff;
3907
+ border: 1px solid #e4e4e7;
3908
+ border-radius: 0;
3909
+ box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16);
3910
+ display: flex;
3911
+ flex-direction: column;
3912
+ max-height: calc(100vh - 72px);
3913
+ overflow: visible;
3914
+ }
3915
+
3916
+ .mdt-cv-heading {
3917
+ margin: 0;
3918
+ padding: 20px 20px 12px;
3919
+ font-size: 18px;
3920
+ font-weight: 500;
3921
+ line-height: 27px;
3922
+ color: oklch(0.4377 0.0066 230.87);
3923
+ }
3924
+
3925
+ .mdt-cv-body {
3926
+ padding: 0 20px 16px;
3927
+ display: flex;
3928
+ flex-direction: column;
3929
+ gap: 12px;
3930
+ overflow: visible;
3931
+ }
3932
+
3933
+ .mdt-cv-name-input {
3934
+ width: 100%;
3935
+ padding: 8px 10px;
3936
+ border: 1px solid #e5e7eb;
3937
+ border-radius: 0;
3938
+ outline: none;
3939
+ font-size: 12px;
3940
+ font-weight: 400;
3941
+ line-height: 18px;
3942
+ color: oklch(0.2378 0.0029 230.83);
3943
+ background: #ffffff;
3944
+ }
3945
+
3946
+ .mdt-cv-name-input::placeholder {
3947
+ color: #a1a1aa;
3948
+ }
3949
+
3950
+ .mdt-cv-name-input:focus {
3951
+ border-color: oklch(47.99% 0.1158 242.91);
3952
+ box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
3953
+ outline: none;
3954
+ }
3955
+
3956
+ .mdt-cv-description {
3957
+ width: 100%;
3958
+ min-height: 96px;
3959
+ padding: 10px 12px;
3960
+ border: 1px solid #e5e7eb;
3961
+ border-radius: 0;
3962
+ font-size: 13px;
3963
+ font-weight: 400;
3964
+ line-height: 20px;
3965
+ color: oklch(0.2378 0.0029 230.83);
3966
+ resize: vertical;
3967
+ outline: none;
3968
+ font-family: inherit;
3969
+ }
3970
+
3971
+ .mdt-cv-description::placeholder {
3972
+ color: #a1a1aa;
3973
+ }
3974
+
3975
+ .mdt-cv-description:focus {
3976
+ border-color: oklch(47.99% 0.1158 242.91);
3977
+ box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
3978
+ outline: none;
3979
+ }
3980
+
3981
+ .mdt-cv-view-row {
3982
+ display: flex;
3983
+ align-items: center;
3984
+ gap: 8px;
3985
+ position: relative;
3986
+ z-index: 30;
3987
+ }
3988
+
3989
+ .mdt-cv-view-picker {
3990
+ position: relative;
3991
+ }
3992
+
3993
+ .mdt-cv-display-popup.mdt-display-popup {
3994
+ position: absolute;
3995
+ top: calc(100% + 4px);
3996
+ left: 0;
3997
+ z-index: 100;
3998
+ }
3999
+
4000
+ /* Create View modal only — List/Table + Display share same button height */
4001
+ .mdt-cv-view-row .mdt-cv-view-btn {
4002
+ display: inline-flex;
4003
+ align-items: center;
4004
+ gap: 0.5rem;
4005
+ height: 28px;
4006
+ min-height: 28px;
4007
+ padding: 0 10px;
4008
+ border: 1px solid #e5e7eb;
4009
+ border-radius: 0;
4010
+ background: #ffffff;
4011
+ font-size: 11px;
4012
+ font-weight: 400;
4013
+ line-height: 1;
4014
+ color: oklch(0.4377 0.0066 230.87);
4015
+ cursor: pointer;
4016
+ box-sizing: border-box;
4017
+ }
4018
+
4019
+ .mdt-cv-view-row .mdt-cv-view-btn:hover {
4020
+ background: #fafafa;
4021
+ }
4022
+
4023
+ .mdt-cv-view-row .mdt-cv-view-btn svg {
4024
+ flex-shrink: 0;
4025
+ color: oklch(0.4377 0.0066 230.87);
4026
+ }
4027
+
4028
+ .mdt-cv-view-menu {
4029
+ position: absolute;
4030
+ top: calc(100% + 4px);
4031
+ left: 0;
4032
+ z-index: 100;
4033
+ min-width: 160px;
4034
+ padding: 4px;
4035
+ background: #ffffff;
4036
+ border: 1px solid #e4e4e7;
4037
+ border-radius: 0;
4038
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
4039
+ }
4040
+
4041
+ .mdt-cv-view-option {
4042
+ width: 100%;
4043
+ display: flex;
4044
+ align-items: center;
4045
+ gap: 0.5rem;
4046
+ padding: 6px 10px;
4047
+ border: none;
4048
+ border-radius: 0;
4049
+ background: transparent;
4050
+ font-size: 11px;
4051
+ font-weight: 400;
4052
+ line-height: 17px;
4053
+ color: oklch(0.4377 0.0066 230.87);
4054
+ cursor: pointer;
4055
+ text-align: left;
4056
+ }
4057
+
4058
+ .mdt-cv-view-option svg {
4059
+ flex-shrink: 0;
4060
+ color: oklch(0.4377 0.0066 230.87);
4061
+ }
4062
+
4063
+ .mdt-cv-view-option:hover {
4064
+ background: #f4f4f5;
4065
+ }
4066
+
4067
+ .mdt-cv-view-option--selected {
4068
+ background: oklch(97% 0.005 242.91);
4069
+ }
4070
+
4071
+ .mdt-cv-filter-slot {
4072
+ width: 100%;
4073
+ min-width: 0;
4074
+ max-width: 100%;
4075
+ overflow: visible;
4076
+ position: relative;
4077
+ z-index: 1;
4078
+ }
4079
+
4080
+ .mdt-cv-filter-bar.mdt-filter-bar {
4081
+ padding: 0;
4082
+ border-bottom: none;
4083
+ background: transparent;
4084
+ overflow: visible;
4085
+ min-width: 0;
4086
+ max-width: 100%;
4087
+ z-index: 1;
4088
+ }
4089
+
4090
+ .mdt-cv-filter-bar .mdt-filter-inner {
4091
+ width: 100%;
4092
+ min-width: 0;
4093
+ max-width: 100%;
4094
+ }
4095
+
4096
+ .mdt-cv-filter-bar .mdt-filter-left {
4097
+ min-width: 0;
4098
+ max-width: 100%;
4099
+ }
4100
+
4101
+ /* Public visibility toggle in create/edit view modal */
4102
+ .mdt-cv-public-toggle {
4103
+ display: flex;
4104
+ align-items: center;
4105
+ gap: 8px;
4106
+ margin-top: 12px;
4107
+ font-size: 13px;
4108
+ color: #616161;
4109
+ cursor: pointer;
4110
+ user-select: none;
4111
+ }
4112
+
4113
+ .mdt-cv-public-toggle input[type="checkbox"] {
4114
+ width: 16px;
4115
+ height: 16px;
4116
+ cursor: pointer;
4117
+ accent-color: #1976d2;
4118
+ margin: 0;
4119
+ }
4120
+
4121
+ .mdt-cv-filter-bar .mdt-filter-chip {
4122
+ max-width: 100%;
4123
+ }
4124
+
4125
+ .mdt-cv-footer {
4126
+ display: flex;
4127
+ align-items: center;
4128
+ justify-content: flex-end;
4129
+ gap: 8px;
4130
+ padding: 12px 20px 20px;
4131
+ border-top: 1px solid #f4f4f5;
4132
+ }
4133
+
4134
+ .mdt-cv-footer--edit {
4135
+ justify-content: space-between;
4136
+ }
4137
+
4138
+ .mdt-cv-footer-actions {
4139
+ display: flex;
4140
+ align-items: center;
4141
+ gap: 8px;
4142
+ margin-left: auto;
4143
+ }
4144
+
4145
+ .mdt-cv-btn-delete {
4146
+ height: 32px;
4147
+ padding: 0 14px;
4148
+ border: none;
4149
+ border-radius: 0;
4150
+ background: #ef4444;
4151
+ font-size: 13px;
4152
+ font-weight: 500;
4153
+ color: #ffffff;
4154
+ cursor: pointer;
4155
+ }
4156
+
4157
+ .mdt-cv-btn-delete:hover {
4158
+ background: #dc2626;
4159
+ }
4160
+
4161
+ .mdt-cv-btn-cancel {
4162
+ height: 32px;
4163
+ padding: 0 14px;
4164
+ border: 1px solid #e5e7eb;
4165
+ border-radius: 0;
4166
+ background: #ffffff;
4167
+ font-size: 13px;
4168
+ font-weight: 400;
4169
+ color: #18181b;
4170
+ cursor: pointer;
4171
+ }
4172
+
4173
+ .mdt-cv-btn-cancel:hover {
4174
+ background: #fafafa;
4175
+ }
4176
+
4177
+ .mdt-cv-btn-create,
4178
+ .mdt-del-confirm-btn-delete {
4179
+ display: inline-flex;
4180
+ align-items: center;
4181
+ justify-content: center;
4182
+ gap: 6px;
4183
+ }
4184
+
4185
+ .mdt-cv-btn-spinner {
4186
+ animation: mdt-cv-btn-spin 0.8s linear infinite;
4187
+ }
4188
+
4189
+ @keyframes mdt-cv-btn-spin {
4190
+ to {
4191
+ transform: rotate(360deg);
4192
+ }
4193
+ }
4194
+
4195
+ .mdt-cv-btn-create:disabled,
4196
+ .mdt-cv-btn-cancel:disabled,
4197
+ .mdt-cv-btn-delete:disabled,
4198
+ .mdt-del-confirm-btn-cancel:disabled,
4199
+ .mdt-del-confirm-btn-delete:disabled {
4200
+ opacity: 0.65;
4201
+ cursor: not-allowed;
4202
+ }
4203
+
4204
+ .mdt-cv-btn-create {
4205
+ height: 32px;
4206
+ padding: 0 14px;
4207
+ border: none;
4208
+ border-radius: 0;
4209
+ background: oklch(47.99% 0.1158 242.91);
4210
+ font-size: 13px;
4211
+ font-weight: 500;
4212
+ color: #ffffff;
4213
+ cursor: pointer;
4214
+ }
4215
+
4216
+ .mdt-cv-btn-create:hover {
4217
+ background: oklch(42% 0.1158 242.91);
4218
+ }
4219
+
4220
+ /* ── Delete view confirmation ───────────────────────────────────────────── */
4221
+ .mdt-del-confirm-overlay {
4222
+ position: fixed;
4223
+ inset: 0;
4224
+ z-index: 400001;
4225
+ display: flex;
4226
+ align-items: center;
4227
+ justify-content: center;
4228
+ padding: 24px;
4229
+ background: rgba(15, 23, 42, 0.45);
4230
+ }
4231
+
4232
+ .mdt-del-confirm-modal {
4233
+ width: 100%;
4234
+ max-width: 560px;
4235
+ background: #ffffff;
4236
+ border: 1px solid #e4e4e7;
4237
+ border-radius: 0;
4238
+ box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16);
4239
+ padding: 20px 24px 16px;
4240
+ }
4241
+
4242
+ .mdt-del-confirm-body {
4243
+ display: flex;
4244
+ align-items: flex-start;
4245
+ gap: 12px;
4246
+ margin-bottom: 20px;
4247
+ }
4248
+
4249
+ .mdt-del-confirm-icon-wrap {
4250
+ display: inline-flex;
4251
+ align-items: center;
4252
+ justify-content: center;
4253
+ width: 40px;
4254
+ height: 40px;
4255
+ flex-shrink: 0;
4256
+ border-radius: 50%;
4257
+ background: #fef2f2;
4258
+ color: #dc2626;
4259
+ }
4260
+
4261
+ .mdt-del-confirm-icon-wrap--warning {
4262
+ background: #ffedd5;
4263
+ color: #ea580c;
4264
+ }
4265
+
4266
+ .mdt-del-confirm-content {
4267
+ flex: 1;
4268
+ min-width: 0;
4269
+ display: flex;
4270
+ flex-direction: column;
4271
+ gap: 4px;
4272
+ }
4273
+
4274
+ .mdt-del-confirm-title {
4275
+ margin: 0;
4276
+ font-size: 16px;
4277
+ font-weight: 400;
4278
+ line-height: 24px;
4279
+ color: oklch(0.2378 0.0029 230.83);
4280
+ }
4281
+
4282
+ .mdt-del-confirm-desc {
4283
+ margin: 0;
4284
+ font-size: 13px;
4285
+ font-weight: 400;
4286
+ line-height: 20px;
4287
+ color: oklch(0.4377 0.0066 230.87);
4288
+ }
4289
+
4290
+ .mdt-del-confirm-desc strong {
4291
+ font-weight: 600;
4292
+ color: oklch(0.4377 0.0066 230.87);
4293
+ }
4294
+
4295
+ .mdt-del-confirm-footer {
4296
+ display: flex;
4297
+ align-items: center;
4298
+ justify-content: flex-end;
4299
+ gap: 8px;
4300
+ padding-top: 12px;
4301
+ border-top: 1px solid #f4f4f5;
4302
+ }
4303
+
4304
+ .mdt-del-confirm-btn-cancel {
4305
+ height: 32px;
4306
+ padding: 0 14px;
4307
+ border: 1px solid #e5e7eb;
4308
+ border-radius: 0;
4309
+ background: #ffffff;
4310
+ font-size: 13px;
4311
+ font-weight: 400;
4312
+ color: #18181b;
4313
+ cursor: pointer;
4314
+ }
4315
+
4316
+ .mdt-del-confirm-btn-cancel:hover {
4317
+ background: #fafafa;
4318
+ }
4319
+
4320
+ .mdt-del-confirm-btn-delete {
4321
+ height: 32px;
4322
+ padding: 0 14px;
4323
+ border: none;
4324
+ border-radius: 0;
4325
+ background: #ef4444;
4326
+ font-size: 13px;
4327
+ font-weight: 500;
4328
+ color: #ffffff;
4329
+ cursor: pointer;
4330
+ }
4331
+
4332
+ .mdt-del-confirm-btn-delete:hover {
4333
+ background: #dc2626;
4334
+ }
4335
+
4336
+ .mdt-del-confirm-btn-primary {
4337
+ height: 32px;
4338
+ padding: 0 14px;
4339
+ border: none;
4340
+ border-radius: 0;
4341
+ background: #2563eb;
4342
+ font-size: 13px;
4343
+ font-weight: 500;
4344
+ color: #ffffff;
4345
+ cursor: pointer;
4346
+ }
4347
+
4348
+ .mdt-del-confirm-btn-primary:hover {
4349
+ background: #1d4ed8;
4350
+ }
4351
+
4352
+ .mdt-bulk-status-failure-list {
4353
+ margin: 8px 0 0;
4354
+ padding-left: 18px;
4355
+ font-size: 13px;
4356
+ line-height: 20px;
4357
+ color: oklch(0.4377 0.0066 230.87);
4358
+ }
4359
+
4360
+ .mdt-bulk-status-failure-list li+li {
4361
+ margin-top: 4px;
4362
+ }
4363
+
4364
+ /* Table: horizontal column pin — web only (≥992px). Headers stay sticky on mobile. */
4365
+ @media (max-width: 991px) {
4366
+
4367
+ /* Unpin sticky columns — but keep position:relative on first cell so row checkboxes stay per-row */
4368
+ .mdt-table tbody .mdt-col-sticky-left:not(.mdt-td-first-with-select),
4369
+ .mdt-table tbody .mdt-col-row-menu {
4370
+ position: static;
4371
+ left: auto;
4372
+ right: auto;
4373
+ z-index: auto;
4374
+ }
4375
+
4376
+ .mdt-table tbody .mdt-td-first-with-select.mdt-col-sticky-left {
4377
+ position: relative;
4378
+ left: auto;
4379
+ right: auto;
4380
+ z-index: auto;
4381
+ }
4382
+
4383
+ .mdt-table thead .mdt-col-sticky-left,
4384
+ .mdt-table thead .mdt-th-first-with-select.mdt-col-sticky-left,
4385
+ .mdt-table thead .mdt-th-row-menu {
4386
+ left: auto;
4387
+ right: auto;
4388
+ top: 0;
4389
+ position: sticky;
4390
+ }
4391
+
4392
+ .mdt-col-sticky-left--scroll,
4393
+ .mdt-col-row-menu--scroll,
4394
+ .mdt-th-row-menu.mdt-col-row-menu--scroll {
4395
+ border-right: none;
4396
+ border-left: none;
4397
+ box-shadow: none;
4398
+ }
4399
+
4400
+ .mdt-cell-select-slot {
4401
+ z-index: 6;
4402
+ }
4403
+
4404
+ .mdt-table .mdt-td-first-with-select .mdt-td-inner.mdt-cell-first-content,
4405
+ .mdt-table .mdt-td-first-with-select .mdt-cell-editable-wrap.mdt-cell-first-content,
4406
+ .mdt-table .mdt-td-first-with-select .mdt-td-readonly-inner.mdt-cell-first-content {
4407
+ padding-left: 24px;
4408
+ }
4409
+
4410
+ .mdt-table .mdt-th-first-with-select .mdt-th-wrapper {
4411
+ padding-left: 24px;
4412
+ }
4413
+ }
4414
+
4415
+ /* Touch only: always show checkboxes (desktop narrow keeps hover-to-reveal) */
4416
+ @media (hover: none),
4417
+ (pointer: coarse) {
4418
+
4419
+ .mdt-table .mdt-row-select-checkbox,
4420
+ .mdt-table .mdt-row-select-checkbox--header {
4421
+ opacity: 1;
4422
+ }
4423
+ }