@alaarab/ogrid-react-fluent 2.4.2 → 2.5.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 (3) hide show
  1. package/dist/esm/index.css +1 -1406
  2. package/dist/esm/index.js +1 -1275
  3. package/package.json +2 -2
package/dist/esm/index.css CHANGED
@@ -1,1406 +1 @@
1
- @charset "UTF-8";
2
-
3
- /* esbuild-sass-plugin:css-chunksrc/ColumnHeaderFilter/ColumnHeaderFilter.module.scss */
4
- .ogrid-fluent__ColumnHeaderFilter-module__columnHeader {
5
- display: flex;
6
- align-items: center;
7
- gap: 4px;
8
- width: 100%;
9
- max-width: 100%;
10
- min-width: 0;
11
- position: relative;
12
- box-sizing: border-box;
13
- overflow: hidden;
14
- }
15
- :root {
16
- --dt-header-resize-zone: 16px;
17
- --dt-header-action-button: 24px;
18
- --dt-header-action-gap: 2px;
19
- }
20
- .ogrid-fluent__ColumnHeaderFilter-module__headerContent {
21
- display: flex;
22
- align-items: center;
23
- gap: 4px;
24
- flex: 1;
25
- min-width: 0;
26
- width: 100%;
27
- max-width: 100%;
28
- padding: 2px 0;
29
- box-sizing: border-box;
30
- overflow: hidden;
31
- }
32
- .ogrid-fluent__ColumnHeaderFilter-module__columnName {
33
- display: block;
34
- min-width: 0;
35
- max-width: 100%;
36
- overflow: hidden;
37
- text-overflow: ellipsis;
38
- white-space: nowrap;
39
- font-weight: 600;
40
- font-size: 14px;
41
- color: var(--colorNeutralForeground1, #242424);
42
- }
43
- .ogrid-fluent__ColumnHeaderFilter-module__headerActions {
44
- display: flex;
45
- align-items: center;
46
- gap: var(--dt-header-action-gap);
47
- margin-left: auto;
48
- flex-shrink: 0;
49
- }
50
- .ogrid-fluent__ColumnHeaderFilter-module__filterIcon {
51
- display: flex;
52
- align-items: center;
53
- justify-content: center;
54
- width: 24px;
55
- height: 24px;
56
- padding: 4px;
57
- margin-left: 2px;
58
- border: none;
59
- border-radius: var(--borderRadiusSmall, 4px);
60
- background-color: transparent;
61
- color: var(--colorNeutralForeground2, #616161);
62
- cursor: pointer;
63
- flex-shrink: 0;
64
- position: relative;
65
- transition: all 0.15s ease;
66
- }
67
- .ogrid-fluent__ColumnHeaderFilter-module__filterIcon svg {
68
- font-size: 14px;
69
- }
70
- .ogrid-fluent__ColumnHeaderFilter-module__filterIcon:hover {
71
- background-color: var(--colorSubtleBackgroundHover, #f5f5f5);
72
- color: var(--colorNeutralForeground2Hover, #424242);
73
- }
74
- .ogrid-fluent__ColumnHeaderFilter-module__filterIcon.ogrid-fluent__ColumnHeaderFilter-module__filterActive {
75
- background-color: var(--colorSubtleBackgroundSelected, #e0e0e0);
76
- color: var(--colorNeutralForeground2, #616161);
77
- }
78
- .ogrid-fluent__ColumnHeaderFilter-module__filterIcon.ogrid-fluent__ColumnHeaderFilter-module__filterActive:hover {
79
- background-color: var(--colorSubtleBackgroundHover, #f5f5f5);
80
- }
81
- .ogrid-fluent__ColumnHeaderFilter-module__filterIcon.ogrid-fluent__ColumnHeaderFilter-module__filterOpen {
82
- background-color: var(--colorSubtleBackgroundPressed, #ebebeb);
83
- color: var(--colorNeutralForeground2, #616161);
84
- }
85
- .ogrid-fluent__ColumnHeaderFilter-module__filterBadge {
86
- position: absolute;
87
- top: 2px;
88
- right: 2px;
89
- width: 6px;
90
- height: 6px;
91
- background-color: var(--colorBrandBackground, #0f6cbd);
92
- border-radius: 50%;
93
- border: 1px solid var(--colorNeutralBackground1, #ffffff);
94
- }
95
- .ogrid-fluent__ColumnHeaderFilter-module__filterPopover {
96
- min-width: 280px;
97
- max-width: 320px;
98
- overflow: hidden;
99
- padding: 0;
100
- background-color: var(--colorNeutralBackground1, #ffffff);
101
- border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
102
- border-radius: var(--borderRadiusMedium, 4px);
103
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
104
- font-family: var(--fontFamilyBase, "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif);
105
- font-size: 14px;
106
- color: var(--colorNeutralForeground1, #242424);
107
- }
108
- .ogrid-fluent__ColumnHeaderFilter-module__popoverHeader {
109
- padding: 10px 14px;
110
- font-size: 12px;
111
- font-weight: 600;
112
- color: var(--colorNeutralForeground2, #616161);
113
- border-bottom: 1px solid var(--colorNeutralStroke2, #e0e0e0);
114
- background-color: var(--colorNeutralBackground2, #fafafa);
115
- }
116
- .ogrid-fluent__ColumnHeaderFilter-module__popoverSearch {
117
- padding: 10px 12px;
118
- border-bottom: 1px solid var(--colorNeutralStroke2, #e0e0e0);
119
- }
120
- .ogrid-fluent__ColumnHeaderFilter-module__nativeInputWrapper {
121
- display: flex;
122
- align-items: center;
123
- gap: 8px;
124
- width: 100%;
125
- border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
126
- border-radius: var(--borderRadiusMedium, 4px);
127
- background-color: var(--colorNeutralBackground1, #ffffff);
128
- padding: 6px 12px;
129
- min-height: 36px;
130
- box-sizing: border-box;
131
- }
132
- .ogrid-fluent__ColumnHeaderFilter-module__nativeInputWrapper:focus-within {
133
- border-color: var(--colorBrandStroke1, #0f6cbd);
134
- outline: none;
135
- }
136
- .ogrid-fluent__ColumnHeaderFilter-module__nativeInputIcon {
137
- color: var(--colorNeutralForeground3, #616161);
138
- font-size: 16px;
139
- flex-shrink: 0;
140
- }
141
- .ogrid-fluent__ColumnHeaderFilter-module__nativeInput {
142
- flex: 1;
143
- min-width: 0;
144
- border: none;
145
- outline: none;
146
- padding: 0;
147
- font-size: 14px;
148
- font-family: inherit;
149
- background: transparent;
150
- color: var(--colorNeutralForeground1, #242424);
151
- }
152
- .ogrid-fluent__ColumnHeaderFilter-module__nativeInput::placeholder {
153
- color: var(--colorNeutralForeground4, #707070);
154
- }
155
- .ogrid-fluent__ColumnHeaderFilter-module__resultCount {
156
- margin-top: 6px;
157
- font-size: 11px;
158
- color: var(--colorNeutralForeground2, #616161);
159
- }
160
- .ogrid-fluent__ColumnHeaderFilter-module__selectAllRow {
161
- display: flex;
162
- gap: 8px;
163
- padding: 6px 12px;
164
- border-bottom: 1px solid var(--colorNeutralStroke2, #e0e0e0);
165
- background-color: var(--colorNeutralBackground2, #fafafa);
166
- }
167
- .ogrid-fluent__ColumnHeaderFilter-module__selectAllButton {
168
- background: none;
169
- border: none;
170
- color: var(--colorBrandForeground1, #0f6cbd);
171
- font-size: 12px;
172
- font-weight: 500;
173
- cursor: pointer;
174
- padding: 4px 8px;
175
- border-radius: var(--borderRadiusSmall, 4px);
176
- transition: background-color 0.15s ease;
177
- }
178
- .ogrid-fluent__ColumnHeaderFilter-module__selectAllButton:hover {
179
- background-color: var(--colorBrandBackground2, #ebf3fc);
180
- }
181
- .ogrid-fluent__ColumnHeaderFilter-module__popoverOptions {
182
- overflow-y: auto;
183
- max-height: 250px;
184
- padding: 6px 0;
185
- }
186
- .ogrid-fluent__ColumnHeaderFilter-module__popoverOptions::-webkit-scrollbar {
187
- width: 6px;
188
- }
189
- .ogrid-fluent__ColumnHeaderFilter-module__popoverOptions::-webkit-scrollbar-track {
190
- background: var(--colorNeutralBackground3, #f5f5f5);
191
- }
192
- .ogrid-fluent__ColumnHeaderFilter-module__popoverOptions::-webkit-scrollbar-thumb {
193
- background: var(--colorNeutralStroke1, #d1d1d1);
194
- border-radius: 3px;
195
- }
196
- .ogrid-fluent__ColumnHeaderFilter-module__popoverOptions::-webkit-scrollbar-thumb:hover {
197
- background: var(--colorNeutralForeground2, #616161);
198
- }
199
- .ogrid-fluent__ColumnHeaderFilter-module__popoverOption {
200
- padding: 4px 12px;
201
- font-size: 13px;
202
- display: flex;
203
- align-items: center;
204
- gap: 8px;
205
- transition: background-color 0.1s ease;
206
- cursor: pointer;
207
- }
208
- .ogrid-fluent__ColumnHeaderFilter-module__popoverOption:hover {
209
- background-color: var(--colorNeutralBackground1Hover, #f5f5f5);
210
- }
211
- .ogrid-fluent__ColumnHeaderFilter-module__nativeCheckbox {
212
- width: 16px;
213
- height: 16px;
214
- margin: 0;
215
- cursor: pointer;
216
- accent-color: var(--colorBrandBackground, #0f6cbd);
217
- flex-shrink: 0;
218
- }
219
- .ogrid-fluent__ColumnHeaderFilter-module__checkboxLabel {
220
- margin-left: 8px;
221
- font-size: 14px;
222
- color: var(--colorNeutralForeground1, #242424);
223
- overflow: hidden;
224
- text-overflow: ellipsis;
225
- white-space: nowrap;
226
- min-width: 0;
227
- cursor: pointer;
228
- }
229
- .ogrid-fluent__ColumnHeaderFilter-module__personOption {
230
- padding: 8px 12px;
231
- cursor: pointer;
232
- transition: background-color 0.1s ease;
233
- }
234
- .ogrid-fluent__ColumnHeaderFilter-module__personOption:hover {
235
- background-color: var(--colorNeutralBackground1Hover, #f5f5f5);
236
- }
237
- .ogrid-fluent__ColumnHeaderFilter-module__loadingContainer {
238
- display: flex;
239
- align-items: center;
240
- justify-content: center;
241
- gap: 8px;
242
- padding: 20px;
243
- }
244
- .ogrid-fluent__ColumnHeaderFilter-module__filterSpinner {
245
- width: 20px;
246
- height: 20px;
247
- border: 2px solid var(--colorNeutralStroke1, #d1d1d1);
248
- border-top-color: var(--colorBrandBackground, #0f6cbd);
249
- border-radius: 50%;
250
- animation: ogrid-fluent__ColumnHeaderFilter-module__ogrid-filter-spin 0.8s linear infinite;
251
- }
252
- @keyframes ogrid-fluent__ColumnHeaderFilter-module__ogrid-filter-spin {
253
- to {
254
- transform: rotate(360deg);
255
- }
256
- }
257
- .ogrid-fluent__ColumnHeaderFilter-module__noResults {
258
- padding: 16px;
259
- text-align: center;
260
- font-size: 12px;
261
- color: var(--colorNeutralForeground2, #616161);
262
- }
263
- .ogrid-fluent__ColumnHeaderFilter-module__selectedUserSection {
264
- padding: 10px 12px;
265
- border-bottom: 1px solid var(--colorNeutralStroke2, #e0e0e0);
266
- background-color: var(--colorSubtleBackgroundSelected, #e0e0e0);
267
- }
268
- .ogrid-fluent__ColumnHeaderFilter-module__selectedUserLabel {
269
- font-size: 11px;
270
- color: var(--colorNeutralForeground2, #616161);
271
- margin-bottom: 6px;
272
- }
273
- .ogrid-fluent__ColumnHeaderFilter-module__selectedUser {
274
- display: flex;
275
- align-items: center;
276
- justify-content: space-between;
277
- gap: 8px;
278
- }
279
- .ogrid-fluent__ColumnHeaderFilter-module__userInfo {
280
- display: flex;
281
- align-items: center;
282
- gap: 8px;
283
- }
284
- .ogrid-fluent__ColumnHeaderFilter-module__avatar {
285
- width: 32px;
286
- height: 32px;
287
- border-radius: 50%;
288
- background-color: var(--colorBrandBackground, #0f6cbd);
289
- display: flex;
290
- align-items: center;
291
- justify-content: center;
292
- flex-shrink: 0;
293
- overflow: hidden;
294
- }
295
- .ogrid-fluent__ColumnHeaderFilter-module__avatarImg {
296
- width: 100%;
297
- height: 100%;
298
- object-fit: cover;
299
- border-radius: 50%;
300
- }
301
- .ogrid-fluent__ColumnHeaderFilter-module__avatarInitials {
302
- color: var(--colorNeutralForegroundOnBrand, #ffffff);
303
- font-size: 12px;
304
- font-weight: 600;
305
- line-height: 1;
306
- }
307
- .ogrid-fluent__ColumnHeaderFilter-module__userText {
308
- display: flex;
309
- flex-direction: column;
310
- }
311
- .ogrid-fluent__ColumnHeaderFilter-module__userSecondary {
312
- font-size: 12px;
313
- color: var(--colorNeutralForeground2, #616161);
314
- }
315
- .ogrid-fluent__ColumnHeaderFilter-module__removeUserButton {
316
- display: flex;
317
- align-items: center;
318
- justify-content: center;
319
- width: 24px;
320
- height: 24px;
321
- padding: 0;
322
- border: none;
323
- border-radius: 50%;
324
- background-color: transparent;
325
- color: var(--colorNeutralForeground2, #616161);
326
- cursor: pointer;
327
- transition: all 0.15s ease;
328
- }
329
- .ogrid-fluent__ColumnHeaderFilter-module__removeUserButton:hover {
330
- background-color: var(--colorNeutralBackground1Hover, #f5f5f5);
331
- color: var(--colorPaletteRedForeground1, #c4314b);
332
- }
333
- .ogrid-fluent__ColumnHeaderFilter-module__popoverActions {
334
- display: flex;
335
- justify-content: flex-end;
336
- gap: 8px;
337
- padding: 10px 12px;
338
- border-top: 1px solid var(--colorNeutralStroke2, #e0e0e0);
339
- background-color: var(--colorNeutralBackground2, #fafafa);
340
- }
341
- .ogrid-fluent__ColumnHeaderFilter-module__clearButton {
342
- padding: 6px 12px;
343
- border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
344
- border-radius: var(--borderRadiusMedium, 4px);
345
- background-color: var(--colorNeutralBackground1, #ffffff);
346
- color: var(--colorNeutralForeground1, #242424);
347
- font-size: 12px;
348
- font-weight: 500;
349
- cursor: pointer;
350
- transition: all 0.15s ease;
351
- }
352
- .ogrid-fluent__ColumnHeaderFilter-module__clearButton:hover:not(:disabled) {
353
- background-color: var(--colorNeutralBackground1Hover, #f5f5f5);
354
- border-color: var(--colorNeutralStroke1Hover, #c7c7c7);
355
- }
356
- .ogrid-fluent__ColumnHeaderFilter-module__clearButton:disabled {
357
- opacity: 0.5;
358
- cursor: not-allowed;
359
- }
360
- .ogrid-fluent__ColumnHeaderFilter-module__applyButton {
361
- padding: 6px 12px;
362
- border: 1px solid var(--colorBrandBackground, #0f6cbd);
363
- border-radius: var(--borderRadiusMedium, 4px);
364
- background-color: var(--colorBrandBackground, #0f6cbd);
365
- color: var(--colorNeutralForegroundOnBrand, #ffffff);
366
- font-size: 12px;
367
- font-weight: 600;
368
- cursor: pointer;
369
- transition: all 0.15s ease;
370
- }
371
- .ogrid-fluent__ColumnHeaderFilter-module__applyButton:hover {
372
- background-color: var(--colorBrandBackgroundHover, #115ea3);
373
- border-color: var(--colorBrandBackgroundHover, #115ea3);
374
- }
375
-
376
- /* esbuild-sass-plugin:css-chunksrc/ColumnHeaderMenu/ColumnHeaderMenu.module.scss */
377
- .ogrid-fluent__ColumnHeaderMenu-module__content {
378
- min-width: 140px;
379
- background: var(--ogrid-bg, #ffffff);
380
- border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
381
- border-radius: 6px;
382
- padding: 4px;
383
- box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2);
384
- z-index: 1000;
385
- animation-duration: 400ms;
386
- animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
387
- will-change: transform, opacity;
388
- }
389
- .ogrid-fluent__ColumnHeaderMenu-module__item {
390
- font-size: 13px;
391
- line-height: 1;
392
- color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
393
- border-radius: 4px;
394
- border: none;
395
- background: transparent;
396
- display: flex;
397
- align-items: center;
398
- height: 28px;
399
- padding: 0 8px;
400
- position: relative;
401
- user-select: none;
402
- outline: none;
403
- cursor: pointer;
404
- width: 100%;
405
- text-align: left;
406
- }
407
- .ogrid-fluent__ColumnHeaderMenu-module__item:disabled {
408
- color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
409
- pointer-events: none;
410
- cursor: not-allowed;
411
- }
412
- .ogrid-fluent__ColumnHeaderMenu-module__item:hover:not(:disabled) {
413
- background-color: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
414
- color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
415
- }
416
- .ogrid-fluent__ColumnHeaderMenu-module__separator {
417
- height: 1px;
418
- background-color: var(--ogrid-border, rgba(0, 0, 0, 0.12));
419
- margin: 4px 0;
420
- }
421
-
422
- /* esbuild-sass-plugin:css-chunksrc/DataGridTable/DataGridTable.module.scss */
423
- .ogrid-fluent__DataGridTable-module__tableScrollContent {
424
- display: flex;
425
- flex-direction: column;
426
- width: 100%;
427
- min-width: 0;
428
- background: var(--ogrid-bg, #fff);
429
- }
430
- .ogrid-fluent__DataGridTable-module__tableWidthAnchor {
431
- position: relative;
432
- width: max-content;
433
- min-width: var(--data-table-min-width, max-content);
434
- background: var(--ogrid-bg, #fff);
435
- overflow-x: clip;
436
- }
437
- .ogrid-fluent__DataGridTable-module__tableWrapper {
438
- position: relative;
439
- flex: 1;
440
- min-height: 0;
441
- overflow-x: hidden;
442
- overflow-y: auto;
443
- width: 100%;
444
- min-width: 0;
445
- max-width: 100%;
446
- box-sizing: border-box;
447
- background: var(--ogrid-bg, #fff);
448
- will-change: scroll-position;
449
- }
450
- .ogrid-fluent__DataGridTable-module__tableWrapper[data-overflow-x=true] {
451
- overflow-x: auto;
452
- }
453
- .ogrid-fluent__DataGridTable-module__tableWrapper[data-empty=true] {
454
- overflow-x: hidden;
455
- }
456
- .ogrid-fluent__DataGridTable-module__tableWrapper[data-loading=true] {
457
- min-height: 200px;
458
- }
459
- .ogrid-fluent__DataGridTable-module__dataTable {
460
- width: var(--data-table-width, fit-content);
461
- max-width: 100%;
462
- min-width: var(--data-table-min-width, max-content);
463
- border-collapse: separate;
464
- border-spacing: 0;
465
- box-sizing: border-box;
466
- table-layout: auto;
467
- background-color: var(--ogrid-bg, #fff);
468
- color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
469
- }
470
- .ogrid-fluent__DataGridTable-module__dataTable tbody tr {
471
- height: var(--ogrid-row-height, auto);
472
- }
473
- .ogrid-fluent__DataGridTable-module__groupHeaderCell {
474
- text-align: center;
475
- font-weight: 600;
476
- border-bottom: 2px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
477
- padding: var(--ogrid-cell-padding, 6px 10px);
478
- background: var(--ogrid-header-bg, #f5f5f5);
479
- }
480
- .ogrid-fluent__DataGridTable-module__headerCellContent {
481
- display: flex;
482
- align-items: center;
483
- gap: 4px;
484
- }
485
- .ogrid-fluent__DataGridTable-module__headerMenuTrigger {
486
- background: transparent;
487
- border: none;
488
- cursor: pointer;
489
- padding: 2px 4px;
490
- font-size: 16px;
491
- line-height: 1;
492
- color: var(--ogrid-fg-secondary, rgba(0, 0, 0, 0.6));
493
- opacity: 1;
494
- transition: background-color 0.15s;
495
- border-radius: 3px;
496
- display: flex;
497
- align-items: center;
498
- justify-content: center;
499
- min-width: 20px;
500
- height: 20px;
501
- }
502
- .ogrid-fluent__DataGridTable-module__headerMenuTrigger:hover {
503
- background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
504
- }
505
- .ogrid-fluent__DataGridTable-module__headerMenuTrigger:active {
506
- background: var(--ogrid-active-bg, rgba(0, 0, 0, 0.08));
507
- }
508
- .ogrid-fluent__DataGridTable-module__headerMenuTrigger:focus-visible {
509
- outline: 2px solid var(--ogrid-accent, #0078d4);
510
- outline-offset: 2px;
511
- }
512
- .ogrid-fluent__DataGridTable-module__dropIndicator {
513
- position: absolute;
514
- top: 0;
515
- bottom: 0;
516
- width: 3px;
517
- background: var(--ogrid-selection-color, #217346);
518
- pointer-events: none;
519
- z-index: var(--ogrid-z-drop-indicator, 100);
520
- transition: left 0.05s;
521
- }
522
- .ogrid-fluent__DataGridTable-module__resizeHandle {
523
- position: absolute;
524
- top: 0;
525
- right: -3px;
526
- bottom: 0;
527
- width: 8px;
528
- cursor: col-resize;
529
- user-select: none;
530
- z-index: var(--ogrid-z-resize-handle, 1);
531
- }
532
- .ogrid-fluent__DataGridTable-module__resizeHandle::after {
533
- content: "";
534
- position: absolute;
535
- top: 0;
536
- right: 3px;
537
- bottom: 0;
538
- width: 2px;
539
- }
540
- .ogrid-fluent__DataGridTable-module__resizeHandle:hover::after {
541
- background-color: var(--ogrid-accent, #0078d4);
542
- }
543
- .ogrid-fluent__DataGridTable-module__resizeHandle:active::after {
544
- background-color: var(--ogrid-accent-dark, #005a9e);
545
- }
546
- .ogrid-fluent__DataGridTable-module__pinnedColLeft {
547
- position: sticky;
548
- z-index: var(--ogrid-z-pinned, 6);
549
- background: var(--ogrid-bg, #ffffff);
550
- }
551
- .ogrid-fluent__DataGridTable-module__pinnedColLeft::after {
552
- content: "";
553
- position: absolute;
554
- top: -1px;
555
- right: -4px;
556
- bottom: -1px;
557
- width: 4px;
558
- background:
559
- linear-gradient(
560
- to right,
561
- var(--ogrid-pinned-shadow, rgba(0, 0, 0, 0.12)),
562
- transparent);
563
- pointer-events: none;
564
- }
565
- .ogrid-fluent__DataGridTable-module__pinnedColRight {
566
- position: sticky;
567
- z-index: var(--ogrid-z-pinned, 6);
568
- background: var(--ogrid-bg, #ffffff);
569
- }
570
- .ogrid-fluent__DataGridTable-module__pinnedColRight::before {
571
- content: "";
572
- position: absolute;
573
- top: -1px;
574
- left: -4px;
575
- bottom: -1px;
576
- width: 4px;
577
- background:
578
- linear-gradient(
579
- to left,
580
- var(--ogrid-pinned-shadow, rgba(0, 0, 0, 0.12)),
581
- transparent);
582
- pointer-events: none;
583
- }
584
- .ogrid-fluent__DataGridTable-module__cellContent {
585
- width: 100%;
586
- height: 100%;
587
- display: flex;
588
- align-items: center;
589
- min-width: 0;
590
- box-sizing: border-box;
591
- overflow: hidden;
592
- text-overflow: ellipsis;
593
- white-space: nowrap;
594
- user-select: none;
595
- outline: none;
596
- contain: content;
597
- }
598
- .ogrid-fluent__DataGridTable-module__cellContent:focus-visible {
599
- outline: none;
600
- }
601
- .ogrid-fluent__DataGridTable-module__pinnedColLeft .ogrid-fluent__DataGridTable-module__cellContent,
602
- .ogrid-fluent__DataGridTable-module__pinnedColRight .ogrid-fluent__DataGridTable-module__cellContent {
603
- contain: none;
604
- }
605
- .ogrid-fluent__DataGridTable-module__dataTable:not([data-virtual-scroll]) tbody tr {
606
- content-visibility: auto;
607
- }
608
- .ogrid-fluent__DataGridTable-module__tableWrapper .ogrid-fluent__DataGridTable-module__activeCellContent.ogrid-fluent__DataGridTable-module__activeCellContent {
609
- outline: 2px solid var(--ogrid-selection-color, #217346);
610
- outline-offset: -1px;
611
- z-index: var(--ogrid-z-active-cell, 2);
612
- position: relative;
613
- overflow: visible;
614
- background: var(--ogrid-active-cell-bg, rgba(0, 0, 0, 0.02));
615
- }
616
- .ogrid-fluent__DataGridTable-module__tableWrapper .ogrid-fluent__DataGridTable-module__editingCellContent.ogrid-fluent__DataGridTable-module__editingCellContent {
617
- width: 100%;
618
- height: 100%;
619
- display: flex;
620
- align-items: center;
621
- box-sizing: border-box;
622
- outline: 2px solid var(--ogrid-selection-color, #217346);
623
- outline-offset: -1px;
624
- z-index: var(--ogrid-z-active-cell, 2);
625
- position: relative;
626
- background: var(--ogrid-bg, #fff);
627
- overflow: visible;
628
- padding: 0;
629
- }
630
- .ogrid-fluent__DataGridTable-module__tableWrapper .ogrid-fluent__DataGridTable-module__cellInRange {
631
- background: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12));
632
- }
633
- .ogrid-fluent__DataGridTable-module__tableWrapper [data-drag-range] {
634
- background: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12));
635
- }
636
- .ogrid-fluent__DataGridTable-module__tableWrapper [data-drag-anchor] {
637
- background: var(--ogrid-bg, #fff);
638
- }
639
- .ogrid-fluent__DataGridTable-module__tableWrapper .ogrid-fluent__DataGridTable-module__activeCellContent.ogrid-fluent__DataGridTable-module__activeCellContent[data-drag-anchor],
640
- .ogrid-fluent__DataGridTable-module__tableWrapper .ogrid-fluent__DataGridTable-module__activeCellContent.ogrid-fluent__DataGridTable-module__activeCellContent[data-drag-range] {
641
- outline: none;
642
- }
643
- .ogrid-fluent__DataGridTable-module__tableWrapper .ogrid-fluent__DataGridTable-module__activeCellContent.ogrid-fluent__DataGridTable-module__activeCellContent.ogrid-fluent__DataGridTable-module__inRange {
644
- outline: none;
645
- background: var(--ogrid-bg, #fff);
646
- }
647
- .ogrid-fluent__DataGridTable-module__tableWrapper .ogrid-fluent__DataGridTable-module__cellCut {
648
- background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
649
- opacity: 0.7;
650
- }
651
- .ogrid-fluent__DataGridTable-module__fillHandle {
652
- position: absolute;
653
- right: -3px;
654
- bottom: -3px;
655
- width: 7px;
656
- height: 7px;
657
- background: var(--ogrid-selection-color, #217346);
658
- border: 1px solid var(--ogrid-bg, #fff);
659
- border-radius: 1px;
660
- cursor: crosshair;
661
- pointer-events: auto;
662
- z-index: var(--ogrid-z-fill-handle, 3);
663
- }
664
- .ogrid-fluent__DataGridTable-module__selectionHeaderCellInner,
665
- .ogrid-fluent__DataGridTable-module__selectionCellInner {
666
- display: flex;
667
- align-items: center;
668
- justify-content: center;
669
- width: 100%;
670
- }
671
- .ogrid-fluent__DataGridTable-module__rowNumberHeaderCellInner,
672
- .ogrid-fluent__DataGridTable-module__rowNumberCellInner {
673
- display: flex;
674
- align-items: center;
675
- justify-content: center;
676
- width: 100%;
677
- font-variant-numeric: tabular-nums;
678
- }
679
- .ogrid-fluent__DataGridTable-module__columnLetterRow {
680
- background: var(--ogrid-column-letter-bg, var(--ogrid-header-bg));
681
- }
682
- .ogrid-fluent__DataGridTable-module__columnLetterCell {
683
- text-align: center;
684
- font-size: 11px;
685
- font-weight: 500;
686
- color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
687
- padding: 2px 4px;
688
- background: var(--ogrid-column-letter-bg, var(--ogrid-header-bg));
689
- border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
690
- user-select: none;
691
- font-variant-numeric: tabular-nums;
692
- }
693
- .ogrid-fluent__DataGridTable-module__statusBar {
694
- display: flex;
695
- align-items: center;
696
- gap: 16px;
697
- width: 100%;
698
- padding: 6px 12px;
699
- box-sizing: border-box;
700
- font-size: 12px;
701
- line-height: 20px;
702
- color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
703
- background: var(--ogrid-header-bg, #f5f5f5);
704
- border-top: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
705
- min-height: 33px;
706
- }
707
- .ogrid-fluent__DataGridTable-module__statusBarItem {
708
- display: inline-flex;
709
- align-items: center;
710
- gap: 4px;
711
- }
712
- .ogrid-fluent__DataGridTable-module__statusBarItem:not(:last-child)::after {
713
- content: "";
714
- width: 1px;
715
- height: 14px;
716
- background: var(--ogrid-border, rgba(0, 0, 0, 0.12));
717
- margin-left: 12px;
718
- }
719
- .ogrid-fluent__DataGridTable-module__statusBarLabel {
720
- color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
721
- }
722
- .ogrid-fluent__DataGridTable-module__statusBarValue {
723
- color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
724
- font-weight: 600;
725
- }
726
- .ogrid-fluent__DataGridTable-module__contextMenu {
727
- position: fixed;
728
- z-index: var(--ogrid-z-context-menu, 10000);
729
- min-width: 160px;
730
- padding: 4px 0;
731
- background: var(--ogrid-bg, #fff);
732
- border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
733
- border-radius: 6px;
734
- box-shadow: var(--ogrid-shadow, 0 4px 16px rgba(0, 0, 0, 0.12));
735
- }
736
- .ogrid-fluent__DataGridTable-module__contextMenuItem {
737
- display: flex;
738
- align-items: center;
739
- justify-content: space-between;
740
- gap: 24px;
741
- width: 100%;
742
- padding: 6px 12px;
743
- border: none;
744
- background: none;
745
- font-size: 13px;
746
- text-align: left;
747
- cursor: pointer;
748
- color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
749
- }
750
- .ogrid-fluent__DataGridTable-module__contextMenuItem:hover:not(:disabled) {
751
- background: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
752
- }
753
- .ogrid-fluent__DataGridTable-module__contextMenuItem:disabled {
754
- opacity: 0.5;
755
- cursor: not-allowed;
756
- }
757
- .ogrid-fluent__DataGridTable-module__contextMenuItemLabel {
758
- flex: 1;
759
- }
760
- .ogrid-fluent__DataGridTable-module__contextMenuItemShortcut {
761
- color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
762
- font-size: 0.85em;
763
- }
764
- .ogrid-fluent__DataGridTable-module__contextMenuDivider {
765
- height: 1px;
766
- margin: 4px 0;
767
- background: var(--ogrid-border, rgba(0, 0, 0, 0.12));
768
- }
769
- .ogrid-fluent__DataGridTable-module__loadingOverlay {
770
- position: absolute;
771
- inset: 0;
772
- z-index: var(--ogrid-z-loading, 2);
773
- display: flex;
774
- align-items: center;
775
- justify-content: center;
776
- background: var(--ogrid-loading-overlay, rgba(255, 255, 255, 0.7));
777
- backdrop-filter: blur(1px);
778
- pointer-events: all;
779
- }
780
- .ogrid-fluent__DataGridTable-module__loadingOverlayContent {
781
- display: flex;
782
- flex-direction: column;
783
- align-items: center;
784
- gap: 8px;
785
- padding: 16px 24px;
786
- background: var(--ogrid-bg, #fff);
787
- border: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
788
- border-radius: 6px;
789
- box-shadow: var(--ogrid-shadow-sm, 0 2px 4px rgba(0, 0, 0, 0.08));
790
- }
791
- .ogrid-fluent__DataGridTable-module__loadingOverlayText {
792
- font-size: 13px;
793
- font-weight: 500;
794
- color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
795
- }
796
- .ogrid-fluent__DataGridTable-module__loadingDimmed {
797
- opacity: 0.6;
798
- pointer-events: none;
799
- }
800
- .ogrid-fluent__DataGridTable-module__emptyStateInGrid {
801
- display: flex;
802
- flex-direction: column;
803
- align-items: center;
804
- justify-content: center;
805
- text-align: center;
806
- padding: 20px 16px;
807
- min-height: 88px;
808
- width: 100%;
809
- box-sizing: border-box;
810
- border-top: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
811
- background: var(--ogrid-header-bg, #f5f5f5);
812
- }
813
- .ogrid-fluent__DataGridTable-module__emptyStateInGridTitle {
814
- font-size: 14px;
815
- font-weight: 600;
816
- color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
817
- margin-bottom: 4px;
818
- }
819
- .ogrid-fluent__DataGridTable-module__emptyStateInGridMessage {
820
- font-size: 13px;
821
- color: var(--ogrid-fg-muted, rgba(0, 0, 0, 0.5));
822
- line-height: 1.5;
823
- }
824
- .ogrid-fluent__DataGridTable-module__emptyStateInGridLink {
825
- background: none;
826
- border: none;
827
- color: var(--ogrid-accent, #0078d4);
828
- text-decoration: underline;
829
- cursor: pointer;
830
- padding: 0;
831
- font-size: inherit;
832
- font-family: inherit;
833
- }
834
- .ogrid-fluent__DataGridTable-module__emptyStateInGridLink:hover {
835
- color: var(--ogrid-accent-dark, #005a9e);
836
- }
837
- .ogrid-fluent__DataGridTable-module__spinner {
838
- width: 24px;
839
- height: 24px;
840
- border: 2px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
841
- border-top-color: var(--ogrid-accent, #0078d4);
842
- border-radius: 50%;
843
- animation: ogrid-fluent__DataGridTable-module__ogrid-spin 0.8s linear infinite;
844
- }
845
- @keyframes ogrid-fluent__DataGridTable-module__ogrid-spin {
846
- to {
847
- transform: rotate(360deg);
848
- }
849
- }
850
- :where(:root) {
851
- --ogrid-cell-padding: 6px 10px;
852
- --ogrid-cell-padding-vertical: 6px;
853
- --ogrid-cell-padding-horizontal: 10px;
854
- --ogrid-z-resize-handle: 1;
855
- --ogrid-z-active-cell: 2;
856
- --ogrid-z-fill-handle: 3;
857
- --ogrid-z-row-number: 5;
858
- --ogrid-z-pinned: 6;
859
- --ogrid-z-selection-cell: 7;
860
- --ogrid-z-thead: 8;
861
- --ogrid-z-pinned-header: 10;
862
- --ogrid-z-header-focus: 11;
863
- --ogrid-z-selection-header-pinned: 12;
864
- --ogrid-z-checkbox: 12;
865
- --ogrid-z-loading: 2;
866
- --ogrid-z-drop-indicator: 100;
867
- --ogrid-z-filter-popover: 1000;
868
- --ogrid-z-popover: 1000;
869
- --ogrid-z-fullscreen: 9999;
870
- --ogrid-z-context-menu: 10000;
871
- --ogrid-bg: #ffffff;
872
- --ogrid-fg: rgba(0, 0, 0, 0.87);
873
- --ogrid-fg-secondary: rgba(0, 0, 0, 0.6);
874
- --ogrid-fg-muted: rgba(0, 0, 0, 0.5);
875
- --ogrid-border: rgba(0, 0, 0, 0.12);
876
- --ogrid-border-strong: rgba(0, 0, 0, 0.5);
877
- --ogrid-border-hover: rgba(0, 0, 0, 0.3);
878
- --ogrid-header-bg: #f5f5f5;
879
- --ogrid-hover-bg: rgba(0, 0, 0, 0.04);
880
- --ogrid-selected-row-bg: #e6f0fb;
881
- --ogrid-bg-selected-hover: #dae8f8;
882
- --ogrid-active-cell-bg: rgba(0, 0, 0, 0.02);
883
- --ogrid-range-bg: rgba(33, 115, 70, 0.12);
884
- --ogrid-accent: #0078d4;
885
- --ogrid-accent-dark: #005a9e;
886
- --ogrid-selection-color: #217346;
887
- --ogrid-primary: #0078d4;
888
- --ogrid-primary-fg: #fff;
889
- --ogrid-primary-hover: #106ebe;
890
- --ogrid-bg-subtle: #f5f5f5;
891
- --ogrid-bg-hover: rgba(0, 0, 0, 0.04);
892
- --ogrid-active-bg: rgba(0, 0, 0, 0.06);
893
- --ogrid-muted: rgba(0, 0, 0, 0.5);
894
- --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
895
- --ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
896
- --ogrid-pinned-shadow: rgba(0, 0, 0, 0.1);
897
- --ogrid-loading-overlay: rgba(255, 255, 255, 0.7);
898
- --ogrid-formula-error-color: #d32f2f;
899
- --ogrid-selection: #217346;
900
- --ogrid-bg-range: rgba(33, 115, 70, 0.12);
901
- --ogrid-bg-selected: #e6f0fb;
902
- --ogrid-loading-bg: rgba(255, 255, 255, 0.7);
903
- }
904
- @media (prefers-color-scheme: dark) {
905
- :where(:root:not([data-theme=light])) {
906
- --ogrid-bg: #1e1e1e;
907
- --ogrid-fg: rgba(255, 255, 255, 0.87);
908
- --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);
909
- --ogrid-fg-muted: rgba(255, 255, 255, 0.5);
910
- --ogrid-border: rgba(255, 255, 255, 0.12);
911
- --ogrid-border-strong: rgba(255, 255, 255, 0.5);
912
- --ogrid-border-hover: rgba(255, 255, 255, 0.3);
913
- --ogrid-header-bg: #2c2c2c;
914
- --ogrid-hover-bg: rgba(255, 255, 255, 0.08);
915
- --ogrid-selected-row-bg: #1a3a5c;
916
- --ogrid-bg-selected-hover: #1f3650;
917
- --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);
918
- --ogrid-range-bg: rgba(46, 160, 67, 0.15);
919
- --ogrid-accent: #4da6ff;
920
- --ogrid-accent-dark: #3390e0;
921
- --ogrid-selection-color: #2ea043;
922
- --ogrid-primary: #4da6ff;
923
- --ogrid-primary-fg: #fff;
924
- --ogrid-primary-hover: #66b3ff;
925
- --ogrid-bg-subtle: rgba(255, 255, 255, 0.04);
926
- --ogrid-bg-hover: rgba(255, 255, 255, 0.08);
927
- --ogrid-active-bg: rgba(255, 255, 255, 0.08);
928
- --ogrid-muted: rgba(255, 255, 255, 0.5);
929
- --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
930
- --ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);
931
- --ogrid-pinned-shadow: rgba(0, 0, 0, 0.3);
932
- --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
933
- --ogrid-formula-error-color: #ef5350;
934
- --ogrid-selection: #2ea043;
935
- --ogrid-bg-range: rgba(46, 160, 67, 0.15);
936
- --ogrid-bg-selected: #1a3a5c;
937
- --ogrid-loading-bg: rgba(0, 0, 0, 0.7);
938
- }
939
- }
940
- :where([data-theme=dark]) {
941
- --ogrid-bg: #1e1e1e;
942
- --ogrid-fg: rgba(255, 255, 255, 0.87);
943
- --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);
944
- --ogrid-fg-muted: rgba(255, 255, 255, 0.5);
945
- --ogrid-border: rgba(255, 255, 255, 0.12);
946
- --ogrid-border-strong: rgba(255, 255, 255, 0.5);
947
- --ogrid-border-hover: rgba(255, 255, 255, 0.3);
948
- --ogrid-header-bg: #2c2c2c;
949
- --ogrid-hover-bg: rgba(255, 255, 255, 0.08);
950
- --ogrid-selected-row-bg: #1a3a5c;
951
- --ogrid-bg-selected-hover: #1f3650;
952
- --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);
953
- --ogrid-range-bg: rgba(46, 160, 67, 0.15);
954
- --ogrid-accent: #4da6ff;
955
- --ogrid-accent-dark: #3390e0;
956
- --ogrid-selection-color: #2ea043;
957
- --ogrid-primary: #4da6ff;
958
- --ogrid-primary-fg: #fff;
959
- --ogrid-primary-hover: #66b3ff;
960
- --ogrid-bg-subtle: rgba(255, 255, 255, 0.04);
961
- --ogrid-bg-hover: rgba(255, 255, 255, 0.08);
962
- --ogrid-active-bg: rgba(255, 255, 255, 0.08);
963
- --ogrid-muted: rgba(255, 255, 255, 0.5);
964
- --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
965
- --ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);
966
- --ogrid-pinned-shadow: rgba(0, 0, 0, 0.3);
967
- --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
968
- --ogrid-formula-error-color: #ef5350;
969
- --ogrid-selection: #2ea043;
970
- --ogrid-bg-range: rgba(46, 160, 67, 0.15);
971
- --ogrid-bg-selected: #1a3a5c;
972
- --ogrid-loading-bg: rgba(0, 0, 0, 0.7);
973
- }
974
- .fui-FluentProvider {
975
- --ogrid-bg: var(--colorNeutralBackground1, #ffffff);
976
- --ogrid-fg: var(--colorNeutralForeground1, rgba(0, 0, 0, 0.87));
977
- --ogrid-fg-secondary: var(--colorNeutralForeground2, rgba(0, 0, 0, 0.6));
978
- --ogrid-fg-muted: var(--colorNeutralForeground3, rgba(0, 0, 0, 0.5));
979
- --ogrid-border: var(--colorNeutralStroke2, rgba(0, 0, 0, 0.12));
980
- --ogrid-header-bg: var(--colorSubtleBackgroundSelected, #f3f2f1);
981
- --ogrid-hover-bg: var(--colorSubtleBackgroundHover, rgba(0, 0, 0, 0.04));
982
- --ogrid-selected-row-bg: var(--colorNeutralBackground1Selected, #e6f0fb);
983
- --ogrid-active-cell-bg: rgba(0, 0, 0, 0.02);
984
- --ogrid-range-bg: rgba(33, 115, 70, 0.12);
985
- --ogrid-accent: var(--colorBrandForeground1, #0078d4);
986
- --ogrid-selection-color: #217346;
987
- --ogrid-loading-overlay: rgba(255, 255, 255, 0.7);
988
- }
989
- .ogrid-fluent__DataGridTable-module__tableScrollContent {
990
- min-height: 100%;
991
- background-color: var(--colorNeutralBackground1, var(--ogrid-bg, #ffffff));
992
- }
993
- .ogrid-fluent__DataGridTable-module__tableWidthAnchor {
994
- background-color: var(--colorNeutralBackground1, var(--ogrid-bg, #ffffff));
995
- overflow-x: clip;
996
- }
997
- .ogrid-fluent__DataGridTable-module__tableWrapper {
998
- border: none;
999
- background-color: var(--colorNeutralBackground1, var(--ogrid-bg, #ffffff));
1000
- -webkit-overflow-scrolling: touch;
1001
- outline: none;
1002
- }
1003
- .ogrid-fluent__DataGridTable-module__tableWrapper .ogrid-fluent__DataGridTable-module__dataTable {
1004
- table-layout: auto;
1005
- }
1006
- .ogrid-fluent__DataGridTable-module__dataTable {
1007
- background-color: var(--colorNeutralBackground1, var(--ogrid-bg, #ffffff));
1008
- }
1009
- .ogrid-fluent__DataGridTable-module__dataTable .fui-TableHeaderCell,
1010
- .ogrid-fluent__DataGridTable-module__dataTable .fui-TableCell {
1011
- min-width: 80px;
1012
- box-sizing: border-box;
1013
- border-right: 1px solid var(--colorNeutralStroke1, #c4c4c4);
1014
- font-size: 13px;
1015
- vertical-align: middle;
1016
- }
1017
- .ogrid-fluent__DataGridTable-module__dataTable .fui-TableHeaderCell {
1018
- padding: 6px 10px;
1019
- font-weight: 600;
1020
- font-size: 14px;
1021
- color: var(--ogrid-fg, rgba(0, 0, 0, 0.87));
1022
- white-space: nowrap;
1023
- background-color: var(--colorSubtleBackgroundSelected, var(--ogrid-header-bg, #f3f2f1));
1024
- z-index: var(--ogrid-z-thead, 8);
1025
- border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
1026
- }
1027
- .ogrid-fluent__DataGridTable-module__dataTable .fui-TableHeaderCell > .fui-TableHeaderCell__button {
1028
- position: static;
1029
- }
1030
- .ogrid-fluent__DataGridTable-module__dataTable .fui-TableHeaderCell:focus-visible {
1031
- outline: 2px solid var(--colorBrandStroke1, var(--ogrid-accent, #0078d4));
1032
- outline-offset: -2px;
1033
- z-index: var(--ogrid-z-header-focus, 11);
1034
- }
1035
- .ogrid-fluent__DataGridTable-module__dataTable .fui-TableCell {
1036
- padding: 0;
1037
- overflow: hidden;
1038
- text-overflow: ellipsis;
1039
- white-space: nowrap;
1040
- font-size: 12px;
1041
- height: 1px;
1042
- border-right: 1px solid var(--colorNeutralStroke1, #c4c4c4);
1043
- position: relative;
1044
- border-bottom: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
1045
- }
1046
- .ogrid-fluent__DataGridTable-module__dataTable .fui-TableCell > * {
1047
- min-width: 0;
1048
- }
1049
- .ogrid-fluent__DataGridTable-module__dataTable .fui-TableCell:focus-visible {
1050
- outline: none;
1051
- }
1052
- .ogrid-fluent__DataGridTable-module__dataTable .fui-TableHeaderCell:last-of-type,
1053
- .ogrid-fluent__DataGridTable-module__dataTable .fui-TableCell:last-of-type {
1054
- border-right: none;
1055
- }
1056
- .ogrid-fluent__DataGridTable-module__dataTable .fui-TableBody .fui-TableRow:last-child .fui-TableCell {
1057
- border-bottom: none;
1058
- }
1059
- .ogrid-fluent__DataGridTable-module__dataTable .fui-TableBody .fui-TableRow:hover .fui-TableCell {
1060
- background-color: var(--colorSubtleBackgroundHover, var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04)));
1061
- }
1062
- .ogrid-fluent__DataGridTable-module__leafHeaderCellSpan {
1063
- font-weight: 600;
1064
- padding: 6px 10px;
1065
- background: var(--ogrid-header-bg, #f3f2f1);
1066
- }
1067
- .ogrid-fluent__DataGridTable-module__dataTable .ogrid-fluent__DataGridTable-module__selectionHeaderCellWrapper {
1068
- width: 48px;
1069
- min-width: 48px;
1070
- max-width: 48px;
1071
- padding: 4px;
1072
- text-align: center;
1073
- }
1074
- .ogrid-fluent__DataGridTable-module__dataTable .ogrid-fluent__DataGridTable-module__selectionCellWrapper {
1075
- width: 48px;
1076
- min-width: 48px;
1077
- max-width: 48px;
1078
- padding: 4px;
1079
- text-align: center;
1080
- }
1081
- .ogrid-fluent__DataGridTable-module__dataTable .ogrid-fluent__DataGridTable-module__rowNumberHeaderCellWrapper {
1082
- padding: 4px 8px;
1083
- text-align: center;
1084
- background: var(--ogrid-header-bg, #f5f5f5);
1085
- font-weight: 600;
1086
- color: var(--colorNeutralForeground3, #666);
1087
- border-right: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
1088
- position: relative;
1089
- }
1090
- .ogrid-fluent__DataGridTable-module__dataTable .ogrid-fluent__DataGridTable-module__rowNumberCellWrapper {
1091
- padding: 4px 8px;
1092
- text-align: center;
1093
- background: var(--colorNeutralBackground3, #f5f5f5);
1094
- font-weight: 600;
1095
- color: var(--colorNeutralForeground3, #666);
1096
- border-right: 1px solid var(--ogrid-border, rgba(0, 0, 0, 0.12));
1097
- }
1098
- .ogrid-fluent__DataGridTable-module__dataTable .fui-TableBody .ogrid-fluent__DataGridTable-module__selectedRow .fui-TableCell {
1099
- background-color: var(--colorNeutralBackground1Selected, var(--ogrid-selected-row-bg, #e6f0fb));
1100
- }
1101
- .ogrid-fluent__DataGridTable-module__selectableGrid .ogrid-fluent__DataGridTable-module__dataTable .fui-TableBody .fui-TableRow:hover .fui-TableCell {
1102
- background-color: var(--colorSubtleBackgroundHover, #f5f5f5);
1103
- cursor: pointer;
1104
- }
1105
- .ogrid-fluent__DataGridTable-module__selectableGrid .ogrid-fluent__DataGridTable-module__dataTable .fui-TableBody .ogrid-fluent__DataGridTable-module__selectedRow:hover .fui-TableCell {
1106
- background-color: var(--colorNeutralBackground1Hover, #dae8f8);
1107
- }
1108
- .ogrid-fluent__DataGridTable-module__selectableGrid .ogrid-fluent__DataGridTable-module__dataTable .fui-TableBody .fui-TableRow {
1109
- cursor: pointer;
1110
- }
1111
- .ogrid-fluent__DataGridTable-module__cellContent {
1112
- padding: var(--ogrid-cell-padding, 4px 8px);
1113
- }
1114
- .ogrid-fluent__DataGridTable-module__tableWrapper .ogrid-fluent__DataGridTable-module__activeCellContent {
1115
- outline: 2px solid var(--ogrid-selection-color, #217346);
1116
- background-color: var(--ogrid-active-cell-bg, rgba(0, 0, 0, 0.02));
1117
- }
1118
- .ogrid-fluent__DataGridTable-module__tableWrapper .ogrid-fluent__DataGridTable-module__cellInRange {
1119
- background-color: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12));
1120
- }
1121
- .ogrid-fluent__DataGridTable-module__tableWrapper [data-drag-range] {
1122
- background-color: var(--ogrid-range-bg, rgba(33, 115, 70, 0.12));
1123
- }
1124
- .ogrid-fluent__DataGridTable-module__tableWrapper [data-drag-anchor] {
1125
- background-color: var(--ogrid-bg, #ffffff);
1126
- }
1127
- .ogrid-fluent__DataGridTable-module__tableWrapper .ogrid-fluent__DataGridTable-module__cellCut {
1128
- background-color: var(--ogrid-hover-bg, rgba(0, 0, 0, 0.04));
1129
- }
1130
- .ogrid-fluent__DataGridTable-module__stickyHeader {
1131
- z-index: var(--ogrid-z-thead, 8);
1132
- background-color: var(--colorSubtleBackgroundSelected, var(--ogrid-header-bg, #f3f2f1));
1133
- }
1134
- .ogrid-fluent__DataGridTable-module__stickyHeader .fui-TableHeaderCell {
1135
- position: sticky;
1136
- top: 0;
1137
- }
1138
- .ogrid-fluent__DataGridTable-module__stickyHeader .ogrid-fluent__DataGridTable-module__pinnedColLeft,
1139
- .ogrid-fluent__DataGridTable-module__stickyHeader .ogrid-fluent__DataGridTable-module__pinnedColRight {
1140
- top: 0;
1141
- z-index: var(--ogrid-z-pinned-header, 10);
1142
- }
1143
- .ogrid-fluent__DataGridTable-module__dataTable .ogrid-fluent__DataGridTable-module__pinnedColLeft {
1144
- background-color: var(--colorNeutralBackground1, var(--ogrid-bg, #ffffff));
1145
- border-right: 1px solid var(--colorNeutralStroke1, var(--ogrid-border, rgba(0, 0, 0, 0.12)));
1146
- box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.1);
1147
- }
1148
- .ogrid-fluent__DataGridTable-module__dataTable .fui-TableHeader .ogrid-fluent__DataGridTable-module__pinnedColLeft {
1149
- background-color: var(--colorSubtleBackgroundSelected, var(--ogrid-header-bg, #f3f2f1));
1150
- }
1151
- .ogrid-fluent__DataGridTable-module__dataTable .ogrid-fluent__DataGridTable-module__pinnedColRight {
1152
- background-color: var(--colorNeutralBackground1, var(--ogrid-bg, #ffffff));
1153
- border-left: 1px solid var(--colorNeutralStroke1, var(--ogrid-border, rgba(0, 0, 0, 0.12)));
1154
- box-shadow: -2px 0 4px -1px rgba(0, 0, 0, 0.1);
1155
- }
1156
- .ogrid-fluent__DataGridTable-module__dataTable .fui-TableHeader .ogrid-fluent__DataGridTable-module__pinnedColRight {
1157
- background-color: var(--colorSubtleBackgroundSelected, var(--ogrid-header-bg, #f3f2f1));
1158
- }
1159
- .ogrid-fluent__DataGridTable-module__headerMenuTrigger {
1160
- color: var(--colorNeutralForeground3, #666);
1161
- }
1162
- .ogrid-fluent__DataGridTable-module__headerMenuTrigger:hover {
1163
- background: var(--colorNeutralBackground1Hover, #f3f2f1);
1164
- }
1165
- .ogrid-fluent__DataGridTable-module__headerMenuTrigger:active {
1166
- background: var(--colorNeutralBackground1Pressed, #e1dfdd);
1167
- }
1168
- .ogrid-fluent__DataGridTable-module__headerMenuTrigger:focus-visible {
1169
- outline: 2px solid var(--colorBrandStroke1, var(--ogrid-accent, #0078d4));
1170
- }
1171
- .ogrid-fluent__DataGridTable-module__resizeHandle:hover::after {
1172
- background-color: var(--colorBrandForeground1, var(--ogrid-accent, #0078d4));
1173
- }
1174
- .ogrid-fluent__DataGridTable-module__resizeHandle:active::after {
1175
- background-color: var(--colorBrandForeground1Pressed, #005a9e);
1176
- }
1177
- .ogrid-fluent__DataGridTable-module__statusBar {
1178
- min-width: 0;
1179
- color: var(--colorNeutralForeground2, #616161);
1180
- background-color: var(--colorSubtleBackgroundSelected, #f3f2f1);
1181
- border-top: 1px solid var(--colorNeutralStroke2, #e0e0e0);
1182
- user-select: none;
1183
- }
1184
- .ogrid-fluent__DataGridTable-module__statusBarItem:not(:last-child)::after {
1185
- display: inline-block;
1186
- background-color: var(--colorNeutralStroke1, #c4c4c4);
1187
- }
1188
- .ogrid-fluent__DataGridTable-module__statusBarLabel {
1189
- color: var(--colorNeutralForeground3, #707070);
1190
- font-weight: 400;
1191
- }
1192
- .ogrid-fluent__DataGridTable-module__statusBarValue {
1193
- color: var(--colorNeutralForeground1, #242424);
1194
- }
1195
- .ogrid-fluent__DataGridTable-module__contextMenu {
1196
- background: var(--colorNeutralBackground1, #fff);
1197
- border: 1px solid var(--colorNeutralStroke1, #e0e0e0);
1198
- border-radius: var(--borderRadiusMedium, 4px);
1199
- box-shadow: var(--shadow16, 0 4px 16px rgba(0, 0, 0, 0.12));
1200
- outline: none;
1201
- }
1202
- .ogrid-fluent__DataGridTable-module__contextMenuItem {
1203
- color: var(--colorNeutralForeground1, #242424);
1204
- }
1205
- .ogrid-fluent__DataGridTable-module__contextMenuItem:hover:not(:disabled) {
1206
- background-color: var(--colorSubtleBackgroundHover, #f5f5f5);
1207
- }
1208
- .ogrid-fluent__DataGridTable-module__contextMenuItemShortcut {
1209
- color: var(--colorNeutralForeground3, rgba(0, 0, 0, 0.4));
1210
- }
1211
- .ogrid-fluent__DataGridTable-module__contextMenuDivider {
1212
- background-color: var(--colorNeutralStroke2, #e0e0e0);
1213
- }
1214
- .ogrid-fluent__DataGridTable-module__loadingOverlayContent {
1215
- background: var(--colorNeutralBackground1, #ffffff);
1216
- border: 1px solid var(--colorNeutralStroke1, #c4c4c4);
1217
- border-radius: var(--borderRadiusMedium, 4px);
1218
- box-shadow: var(--shadow4, 0 2px 4px rgba(0, 0, 0, 0.14));
1219
- }
1220
- .ogrid-fluent__DataGridTable-module__loadingOverlayText {
1221
- color: var(--colorNeutralForeground2, #616161);
1222
- }
1223
- .ogrid-fluent__DataGridTable-module__loadingDimmed {
1224
- transition: opacity 0.15s ease;
1225
- }
1226
- .ogrid-fluent__DataGridTable-module__emptyStateInGrid {
1227
- min-width: 0;
1228
- border-top: 1px solid var(--colorNeutralStroke2, #e0e0e0);
1229
- background-color: var(--colorNeutralBackground2, #fafafa);
1230
- }
1231
- .ogrid-fluent__DataGridTable-module__emptyStateInGridMessageSticky {
1232
- position: sticky;
1233
- left: 50%;
1234
- transform: translateX(-50%);
1235
- display: inline-flex;
1236
- flex-direction: column;
1237
- align-items: center;
1238
- text-align: center;
1239
- }
1240
- .ogrid-fluent__DataGridTable-module__emptyStateInGridIcon {
1241
- font-size: 24px;
1242
- margin-bottom: 8px;
1243
- opacity: 0.6;
1244
- }
1245
- .ogrid-fluent__DataGridTable-module__emptyStateInGridTitle {
1246
- color: var(--colorNeutralForeground1, #242424);
1247
- }
1248
- .ogrid-fluent__DataGridTable-module__emptyStateInGridMessage {
1249
- color: var(--colorNeutralForeground2, #616161);
1250
- max-width: 100%;
1251
- }
1252
- .ogrid-fluent__DataGridTable-module__emptyStateInGridLink {
1253
- color: var(--colorBrandForeground1, #0f6cbd);
1254
- }
1255
- .ogrid-fluent__DataGridTable-module__emptyStateInGridLink:hover {
1256
- color: var(--colorBrandForeground1Hover, #115ea3);
1257
- }
1258
- .ogrid-fluent__DataGridTable-module__dataTable .fui-Link {
1259
- color: var(--colorBrandForeground1, #0f6cbd);
1260
- font-weight: 600;
1261
- text-decoration: none;
1262
- }
1263
- .ogrid-fluent__DataGridTable-module__dataTable .fui-Link:hover {
1264
- text-decoration: underline;
1265
- color: var(--colorBrandForeground1Hover, #115ea3);
1266
- }
1267
- .ogrid-fluent__DataGridTable-module__dataTable .fui-Link:active {
1268
- color: var(--colorBrandForeground1Pressed, #0c3b5e);
1269
- }
1270
- .ogrid-fluent__DataGridTable-module__density-compact .ogrid-fluent__DataGridTable-module__dataTable .fui-TableHeaderCell {
1271
- padding: 4px 8px;
1272
- }
1273
- .ogrid-fluent__DataGridTable-module__density-compact .ogrid-fluent__DataGridTable-module__cellContent {
1274
- padding: 4px 8px;
1275
- }
1276
- .ogrid-fluent__DataGridTable-module__density-comfortable .ogrid-fluent__DataGridTable-module__dataTable .fui-TableHeaderCell {
1277
- padding: 12px 16px;
1278
- }
1279
- .ogrid-fluent__DataGridTable-module__density-comfortable .ogrid-fluent__DataGridTable-module__cellContent {
1280
- padding: 12px 16px;
1281
- }
1282
- .ogrid-fluent__DataGridTable-module__tableWrapper .fui-Button:focus-visible,
1283
- .ogrid-fluent__DataGridTable-module__tableWrapper .fui-MenuButton:focus-visible {
1284
- outline: 2px solid var(--colorBrandStroke1, #0078d4);
1285
- outline-offset: 2px;
1286
- }
1287
- .ogrid-fluent__DataGridTable-module__tableWrapper .fui-Checkbox:focus-visible {
1288
- outline: 2px solid var(--colorBrandStroke1, #0078d4);
1289
- outline-offset: 2px;
1290
- }
1291
-
1292
- /* esbuild-sass-plugin:css-chunksrc/ColumnChooser/ColumnChooser.module.scss */
1293
- .ogrid-fluent__ColumnChooser-module__container {
1294
- position: relative;
1295
- display: inline-flex;
1296
- }
1297
- .ogrid-fluent__ColumnChooser-module__dropdown {
1298
- position: absolute;
1299
- top: calc(100% + 4px);
1300
- right: 0;
1301
- z-index: 10000;
1302
- min-width: 220px;
1303
- display: flex;
1304
- flex-direction: column;
1305
- background: var(--colorNeutralBackground1, #fff);
1306
- border: 1px solid var(--colorNeutralStroke2, #edebe9);
1307
- border-radius: 6px;
1308
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
1309
- padding: 0;
1310
- }
1311
- .ogrid-fluent__ColumnChooser-module__header {
1312
- padding: 8px 12px;
1313
- border-bottom: 1px solid var(--colorNeutralStroke2, #edebe9);
1314
- font-weight: 600;
1315
- font-size: 13px;
1316
- }
1317
- .ogrid-fluent__ColumnChooser-module__optionsList {
1318
- max-height: 320px;
1319
- overflow-y: auto;
1320
- padding: 0;
1321
- }
1322
- .ogrid-fluent__ColumnChooser-module__optionItem {
1323
- padding: 4px 12px;
1324
- display: flex;
1325
- align-items: center;
1326
- min-height: 32px;
1327
- }
1328
- .ogrid-fluent__ColumnChooser-module__optionItem:hover {
1329
- background: var(--colorNeutralBackground1Hover, #f5f5f5);
1330
- }
1331
- .ogrid-fluent__ColumnChooser-module__actions {
1332
- display: flex;
1333
- justify-content: flex-end;
1334
- gap: 8px;
1335
- padding: 8px 12px;
1336
- border-top: 1px solid var(--colorNeutralStroke2, #edebe9);
1337
- }
1338
-
1339
- /* esbuild-sass-plugin:css-chunksrc/PaginationControls/PaginationControls.module.scss */
1340
- .ogrid-fluent__PaginationControls-module__pagination {
1341
- display: flex;
1342
- flex-wrap: wrap;
1343
- align-items: center;
1344
- justify-content: space-between;
1345
- gap: 14px 24px;
1346
- width: 100%;
1347
- min-width: 0;
1348
- box-sizing: border-box;
1349
- padding: 0;
1350
- }
1351
- .ogrid-fluent__PaginationControls-module__paginationInfo {
1352
- font-size: 13px;
1353
- color: var(--colorNeutralForeground2, #605e5c);
1354
- flex-shrink: 0;
1355
- font-variant-numeric: tabular-nums;
1356
- }
1357
- .ogrid-fluent__PaginationControls-module__paginationControls {
1358
- display: flex;
1359
- align-items: center;
1360
- gap: 4px;
1361
- flex-wrap: wrap;
1362
- flex: 1 1 auto;
1363
- justify-content: center;
1364
- min-width: 0;
1365
- }
1366
- .ogrid-fluent__PaginationControls-module__navBtn {
1367
- min-width: 28px;
1368
- min-height: 28px;
1369
- }
1370
- .ogrid-fluent__PaginationControls-module__pageNumbers {
1371
- display: inline-flex;
1372
- align-items: center;
1373
- gap: 4px;
1374
- margin: 0 8px;
1375
- }
1376
- .ogrid-fluent__PaginationControls-module__pageBtn {
1377
- min-width: 28px;
1378
- min-height: 28px;
1379
- font-variant-numeric: tabular-nums;
1380
- }
1381
- .ogrid-fluent__PaginationControls-module__ellipsis {
1382
- display: inline-flex;
1383
- align-items: center;
1384
- justify-content: center;
1385
- min-width: 24px;
1386
- font-size: 12px;
1387
- color: var(--colorNeutralForeground3, #8a8886);
1388
- user-select: none;
1389
- pointer-events: none;
1390
- letter-spacing: 0.02em;
1391
- }
1392
- .ogrid-fluent__PaginationControls-module__pageSizeSelector {
1393
- display: inline-flex;
1394
- align-items: center;
1395
- gap: 8px;
1396
- flex-shrink: 0;
1397
- }
1398
- .ogrid-fluent__PaginationControls-module__pageSizeSelector .ogrid-fluent__PaginationControls-module__pageSizeLabel {
1399
- font-size: 13px;
1400
- color: var(--colorNeutralForeground2, #605e5c);
1401
- user-select: none;
1402
- white-space: nowrap;
1403
- }
1404
- .ogrid-fluent__PaginationControls-module__pageSizeSelector .ogrid-fluent__PaginationControls-module__pageSizeSelect {
1405
- min-width: 72px;
1406
- }
1
+ @charset "UTF-8";.ogrid-fluent__ColumnHeaderFilter-module__columnHeader{display:flex;align-items:center;gap:4px;width:100%;max-width:100%;min-width:0;position:relative;box-sizing:border-box;overflow:hidden}:root{--dt-header-resize-zone: 16px;--dt-header-action-button: 24px;--dt-header-action-gap: 2px}.ogrid-fluent__ColumnHeaderFilter-module__headerContent{display:flex;align-items:center;gap:4px;flex:1;min-width:0;width:100%;max-width:100%;padding:2px 0;box-sizing:border-box;overflow:hidden}.ogrid-fluent__ColumnHeaderFilter-module__columnName{display:block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;font-size:14px;color:var(--colorNeutralForeground1, #242424)}.ogrid-fluent__ColumnHeaderFilter-module__headerActions{display:flex;align-items:center;gap:var(--dt-header-action-gap);margin-left:auto;flex-shrink:0}.ogrid-fluent__ColumnHeaderFilter-module__filterIcon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:4px;margin-left:2px;border:none;border-radius:var(--borderRadiusSmall, 4px);background-color:transparent;color:var(--colorNeutralForeground2, #616161);cursor:pointer;flex-shrink:0;position:relative;transition:all .15s ease}.ogrid-fluent__ColumnHeaderFilter-module__filterIcon svg{font-size:14px}.ogrid-fluent__ColumnHeaderFilter-module__filterIcon:hover{background-color:var(--colorSubtleBackgroundHover, #f5f5f5);color:var(--colorNeutralForeground2Hover, #424242)}.ogrid-fluent__ColumnHeaderFilter-module__filterIcon.ogrid-fluent__ColumnHeaderFilter-module__filterActive{background-color:var(--colorSubtleBackgroundSelected, #e0e0e0);color:var(--colorNeutralForeground2, #616161)}.ogrid-fluent__ColumnHeaderFilter-module__filterIcon.ogrid-fluent__ColumnHeaderFilter-module__filterActive:hover{background-color:var(--colorSubtleBackgroundHover, #f5f5f5)}.ogrid-fluent__ColumnHeaderFilter-module__filterIcon.ogrid-fluent__ColumnHeaderFilter-module__filterOpen{background-color:var(--colorSubtleBackgroundPressed, #ebebeb);color:var(--colorNeutralForeground2, #616161)}.ogrid-fluent__ColumnHeaderFilter-module__filterBadge{position:absolute;top:2px;right:2px;width:6px;height:6px;background-color:var(--colorBrandBackground, #0f6cbd);border-radius:50%;border:1px solid var(--colorNeutralBackground1, #ffffff)}.ogrid-fluent__ColumnHeaderFilter-module__filterPopover{min-width:280px;max-width:320px;overflow:hidden;padding:0;background-color:var(--colorNeutralBackground1, #ffffff);border:1px solid var(--colorNeutralStroke1, #d1d1d1);border-radius:var(--borderRadiusMedium, 4px);box-shadow:0 4px 16px #00000024;font-family:var(--fontFamilyBase, "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif);font-size:14px;color:var(--colorNeutralForeground1, #242424)}.ogrid-fluent__ColumnHeaderFilter-module__popoverHeader{padding:10px 14px;font-size:12px;font-weight:600;color:var(--colorNeutralForeground2, #616161);border-bottom:1px solid var(--colorNeutralStroke2, #e0e0e0);background-color:var(--colorNeutralBackground2, #fafafa)}.ogrid-fluent__ColumnHeaderFilter-module__popoverSearch{padding:10px 12px;border-bottom:1px solid var(--colorNeutralStroke2, #e0e0e0)}.ogrid-fluent__ColumnHeaderFilter-module__nativeInputWrapper{display:flex;align-items:center;gap:8px;width:100%;border:1px solid var(--colorNeutralStroke1, #d1d1d1);border-radius:var(--borderRadiusMedium, 4px);background-color:var(--colorNeutralBackground1, #ffffff);padding:6px 12px;min-height:36px;box-sizing:border-box}.ogrid-fluent__ColumnHeaderFilter-module__nativeInputWrapper:focus-within{border-color:var(--colorBrandStroke1, #0f6cbd);outline:none}.ogrid-fluent__ColumnHeaderFilter-module__nativeInputIcon{color:var(--colorNeutralForeground3, #616161);font-size:16px;flex-shrink:0}.ogrid-fluent__ColumnHeaderFilter-module__nativeInput{flex:1;min-width:0;border:none;outline:none;padding:0;font-size:14px;font-family:inherit;background:transparent;color:var(--colorNeutralForeground1, #242424)}.ogrid-fluent__ColumnHeaderFilter-module__nativeInput::placeholder{color:var(--colorNeutralForeground4, #707070)}.ogrid-fluent__ColumnHeaderFilter-module__resultCount{margin-top:6px;font-size:11px;color:var(--colorNeutralForeground2, #616161)}.ogrid-fluent__ColumnHeaderFilter-module__selectAllRow{display:flex;gap:8px;padding:6px 12px;border-bottom:1px solid var(--colorNeutralStroke2, #e0e0e0);background-color:var(--colorNeutralBackground2, #fafafa)}.ogrid-fluent__ColumnHeaderFilter-module__selectAllButton{background:none;border:none;color:var(--colorBrandForeground1, #0f6cbd);font-size:12px;font-weight:500;cursor:pointer;padding:4px 8px;border-radius:var(--borderRadiusSmall, 4px);transition:background-color .15s ease}.ogrid-fluent__ColumnHeaderFilter-module__selectAllButton:hover{background-color:var(--colorBrandBackground2, #ebf3fc)}.ogrid-fluent__ColumnHeaderFilter-module__popoverOptions{overflow-y:auto;max-height:250px;padding:6px 0}.ogrid-fluent__ColumnHeaderFilter-module__popoverOptions::-webkit-scrollbar{width:6px}.ogrid-fluent__ColumnHeaderFilter-module__popoverOptions::-webkit-scrollbar-track{background:var(--colorNeutralBackground3, #f5f5f5)}.ogrid-fluent__ColumnHeaderFilter-module__popoverOptions::-webkit-scrollbar-thumb{background:var(--colorNeutralStroke1, #d1d1d1);border-radius:3px}.ogrid-fluent__ColumnHeaderFilter-module__popoverOptions::-webkit-scrollbar-thumb:hover{background:var(--colorNeutralForeground2, #616161)}.ogrid-fluent__ColumnHeaderFilter-module__popoverOption{padding:4px 12px;font-size:13px;display:flex;align-items:center;gap:8px;transition:background-color .1s ease;cursor:pointer}.ogrid-fluent__ColumnHeaderFilter-module__popoverOption:hover{background-color:var(--colorNeutralBackground1Hover, #f5f5f5)}.ogrid-fluent__ColumnHeaderFilter-module__nativeCheckbox{width:16px;height:16px;margin:0;cursor:pointer;accent-color:var(--colorBrandBackground, #0f6cbd);flex-shrink:0}.ogrid-fluent__ColumnHeaderFilter-module__checkboxLabel{margin-left:8px;font-size:14px;color:var(--colorNeutralForeground1, #242424);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;cursor:pointer}.ogrid-fluent__ColumnHeaderFilter-module__personOption{padding:8px 12px;cursor:pointer;transition:background-color .1s ease}.ogrid-fluent__ColumnHeaderFilter-module__personOption:hover{background-color:var(--colorNeutralBackground1Hover, #f5f5f5)}.ogrid-fluent__ColumnHeaderFilter-module__loadingContainer{display:flex;align-items:center;justify-content:center;gap:8px;padding:20px}.ogrid-fluent__ColumnHeaderFilter-module__filterSpinner{width:20px;height:20px;border:2px solid var(--colorNeutralStroke1, #d1d1d1);border-top-color:var(--colorBrandBackground, #0f6cbd);border-radius:50%;animation:ogrid-fluent__ColumnHeaderFilter-module__ogrid-filter-spin .8s linear infinite}@keyframes ogrid-fluent__ColumnHeaderFilter-module__ogrid-filter-spin{to{transform:rotate(360deg)}}.ogrid-fluent__ColumnHeaderFilter-module__noResults{padding:16px;text-align:center;font-size:12px;color:var(--colorNeutralForeground2, #616161)}.ogrid-fluent__ColumnHeaderFilter-module__selectedUserSection{padding:10px 12px;border-bottom:1px solid var(--colorNeutralStroke2, #e0e0e0);background-color:var(--colorSubtleBackgroundSelected, #e0e0e0)}.ogrid-fluent__ColumnHeaderFilter-module__selectedUserLabel{font-size:11px;color:var(--colorNeutralForeground2, #616161);margin-bottom:6px}.ogrid-fluent__ColumnHeaderFilter-module__selectedUser{display:flex;align-items:center;justify-content:space-between;gap:8px}.ogrid-fluent__ColumnHeaderFilter-module__userInfo{display:flex;align-items:center;gap:8px}.ogrid-fluent__ColumnHeaderFilter-module__avatar{width:32px;height:32px;border-radius:50%;background-color:var(--colorBrandBackground, #0f6cbd);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}.ogrid-fluent__ColumnHeaderFilter-module__avatarImg{width:100%;height:100%;object-fit:cover;border-radius:50%}.ogrid-fluent__ColumnHeaderFilter-module__avatarInitials{color:var(--colorNeutralForegroundOnBrand, #ffffff);font-size:12px;font-weight:600;line-height:1}.ogrid-fluent__ColumnHeaderFilter-module__userText{display:flex;flex-direction:column}.ogrid-fluent__ColumnHeaderFilter-module__userSecondary{font-size:12px;color:var(--colorNeutralForeground2, #616161)}.ogrid-fluent__ColumnHeaderFilter-module__removeUserButton{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:50%;background-color:transparent;color:var(--colorNeutralForeground2, #616161);cursor:pointer;transition:all .15s ease}.ogrid-fluent__ColumnHeaderFilter-module__removeUserButton:hover{background-color:var(--colorNeutralBackground1Hover, #f5f5f5);color:var(--colorPaletteRedForeground1, #c4314b)}.ogrid-fluent__ColumnHeaderFilter-module__popoverActions{display:flex;justify-content:flex-end;gap:8px;padding:10px 12px;border-top:1px solid var(--colorNeutralStroke2, #e0e0e0);background-color:var(--colorNeutralBackground2, #fafafa)}.ogrid-fluent__ColumnHeaderFilter-module__clearButton{padding:6px 12px;border:1px solid var(--colorNeutralStroke1, #d1d1d1);border-radius:var(--borderRadiusMedium, 4px);background-color:var(--colorNeutralBackground1, #ffffff);color:var(--colorNeutralForeground1, #242424);font-size:12px;font-weight:500;cursor:pointer;transition:all .15s ease}.ogrid-fluent__ColumnHeaderFilter-module__clearButton:hover:not(:disabled){background-color:var(--colorNeutralBackground1Hover, #f5f5f5);border-color:var(--colorNeutralStroke1Hover, #c7c7c7)}.ogrid-fluent__ColumnHeaderFilter-module__clearButton:disabled{opacity:.5;cursor:not-allowed}.ogrid-fluent__ColumnHeaderFilter-module__applyButton{padding:6px 12px;border:1px solid var(--colorBrandBackground, #0f6cbd);border-radius:var(--borderRadiusMedium, 4px);background-color:var(--colorBrandBackground, #0f6cbd);color:var(--colorNeutralForegroundOnBrand, #ffffff);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s ease}.ogrid-fluent__ColumnHeaderFilter-module__applyButton:hover{background-color:var(--colorBrandBackgroundHover, #115ea3);border-color:var(--colorBrandBackgroundHover, #115ea3)}.ogrid-fluent__ColumnHeaderMenu-module__content{min-width:140px;background:var(--ogrid-bg, #ffffff);border:1px solid var(--ogrid-border, rgba(0, 0, 0, .12));border-radius:6px;padding:4px;box-shadow:0 10px 38px -10px #16171859,0 10px 20px -15px #16171833;z-index:1000;animation-duration:.4s;animation-timing-function:cubic-bezier(.16,1,.3,1);will-change:transform,opacity}.ogrid-fluent__ColumnHeaderMenu-module__item{font-size:13px;line-height:1;color:var(--ogrid-fg, rgba(0, 0, 0, .87));border-radius:4px;border:none;background:transparent;display:flex;align-items:center;height:28px;padding:0 8px;position:relative;user-select:none;outline:none;cursor:pointer;width:100%;text-align:left}.ogrid-fluent__ColumnHeaderMenu-module__item:disabled{color:var(--ogrid-fg-muted, rgba(0, 0, 0, .5));pointer-events:none;cursor:not-allowed}.ogrid-fluent__ColumnHeaderMenu-module__item:hover:not(:disabled){background-color:var(--ogrid-hover-bg, rgba(0, 0, 0, .04));color:var(--ogrid-fg, rgba(0, 0, 0, .87))}.ogrid-fluent__ColumnHeaderMenu-module__separator{height:1px;background-color:var(--ogrid-border, rgba(0, 0, 0, .12));margin:4px 0}.ogrid-fluent__DataGridTable-module__tableScrollContent{display:flex;flex-direction:column;width:100%;min-width:0;background:var(--ogrid-bg, #fff)}.ogrid-fluent__DataGridTable-module__tableWidthAnchor{position:relative;width:max-content;min-width:var(--data-table-min-width, max-content);background:var(--ogrid-bg, #fff);overflow-x:clip}.ogrid-fluent__DataGridTable-module__tableWrapper{position:relative;flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;width:100%;min-width:0;max-width:100%;box-sizing:border-box;background:var(--ogrid-bg, #fff);will-change:scroll-position}.ogrid-fluent__DataGridTable-module__tableWrapper[data-overflow-x=true]{overflow-x:auto}.ogrid-fluent__DataGridTable-module__tableWrapper[data-empty=true]{overflow-x:hidden}.ogrid-fluent__DataGridTable-module__tableWrapper[data-loading=true]{min-height:200px}.ogrid-fluent__DataGridTable-module__dataTable{width:var(--data-table-width, fit-content);max-width:100%;min-width:var(--data-table-min-width, max-content);border-collapse:separate;border-spacing:0;box-sizing:border-box;table-layout:auto;background-color:var(--ogrid-bg, #fff);color:var(--ogrid-fg, rgba(0, 0, 0, .87))}.ogrid-fluent__DataGridTable-module__dataTable tbody tr{height:var(--ogrid-row-height, auto)}.ogrid-fluent__DataGridTable-module__groupHeaderCell{text-align:center;font-weight:600;border-bottom:2px solid var(--ogrid-border, rgba(0, 0, 0, .12));padding:var(--ogrid-cell-padding, 6px 10px);background:var(--ogrid-header-bg, #f5f5f5)}.ogrid-fluent__DataGridTable-module__headerCellContent{display:flex;align-items:center;gap:4px}.ogrid-fluent__DataGridTable-module__headerMenuTrigger{background:transparent;border:none;cursor:pointer;padding:2px 4px;font-size:16px;line-height:1;color:var(--ogrid-fg-secondary, rgba(0, 0, 0, .6));opacity:1;transition:background-color .15s;border-radius:3px;display:flex;align-items:center;justify-content:center;min-width:20px;height:20px}.ogrid-fluent__DataGridTable-module__headerMenuTrigger:hover{background:var(--ogrid-hover-bg, rgba(0, 0, 0, .04))}.ogrid-fluent__DataGridTable-module__headerMenuTrigger:active{background:var(--ogrid-active-bg, rgba(0, 0, 0, .08))}.ogrid-fluent__DataGridTable-module__headerMenuTrigger:focus-visible{outline:2px solid var(--ogrid-accent, #0078d4);outline-offset:2px}.ogrid-fluent__DataGridTable-module__dropIndicator{position:absolute;top:0;bottom:0;width:3px;background:var(--ogrid-selection-color, #217346);pointer-events:none;z-index:var(--ogrid-z-drop-indicator, 100);transition:left .05s}.ogrid-fluent__DataGridTable-module__resizeHandle{position:absolute;top:0;right:-3px;bottom:0;width:8px;cursor:col-resize;user-select:none;touch-action:none;z-index:var(--ogrid-z-resize-handle, 1)}.ogrid-fluent__DataGridTable-module__resizeHandle:after{content:"";position:absolute;top:0;right:3px;bottom:0;width:2px}.ogrid-fluent__DataGridTable-module__resizeHandle:hover:after{background-color:var(--ogrid-accent, #0078d4)}.ogrid-fluent__DataGridTable-module__resizeHandle:active:after{background-color:var(--ogrid-accent-dark, #005a9e)}@media(pointer:coarse){.ogrid-fluent__DataGridTable-module__resizeHandle{width:16px;right:-8px}}.ogrid-fluent__DataGridTable-module__pinnedColLeft{position:sticky;z-index:var(--ogrid-z-pinned, 6);background:var(--ogrid-bg, #ffffff)}.ogrid-fluent__DataGridTable-module__pinnedColLeft:after{content:"";position:absolute;top:-1px;right:-4px;bottom:-1px;width:4px;background:linear-gradient(to right,var(--ogrid-pinned-shadow, rgba(0, 0, 0, .12)),transparent);pointer-events:none}.ogrid-fluent__DataGridTable-module__pinnedColRight{position:sticky;z-index:var(--ogrid-z-pinned, 6);background:var(--ogrid-bg, #ffffff)}.ogrid-fluent__DataGridTable-module__pinnedColRight:before{content:"";position:absolute;top:-1px;left:-4px;bottom:-1px;width:4px;background:linear-gradient(to left,var(--ogrid-pinned-shadow, rgba(0, 0, 0, .12)),transparent);pointer-events:none}.ogrid-fluent__DataGridTable-module__cellContent{width:100%;height:100%;display:flex;align-items:center;min-width:0;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:none;outline:none;contain:content}.ogrid-fluent__DataGridTable-module__cellContent:focus-visible{outline:none}.ogrid-fluent__DataGridTable-module__pinnedColLeft .ogrid-fluent__DataGridTable-module__cellContent,.ogrid-fluent__DataGridTable-module__pinnedColRight .ogrid-fluent__DataGridTable-module__cellContent{contain:none}.ogrid-fluent__DataGridTable-module__dataTable:not([data-virtual-scroll]) tbody tr{content-visibility:auto}.ogrid-fluent__DataGridTable-module__tableWrapper .ogrid-fluent__DataGridTable-module__activeCellContent.ogrid-fluent__DataGridTable-module__activeCellContent{outline:2px solid var(--ogrid-selection-color, #217346);outline-offset:-1px;z-index:var(--ogrid-z-active-cell, 2);position:relative;overflow:visible;background:var(--ogrid-active-cell-bg, rgba(0, 0, 0, .02))}.ogrid-fluent__DataGridTable-module__tableWrapper .ogrid-fluent__DataGridTable-module__editingCellContent.ogrid-fluent__DataGridTable-module__editingCellContent{width:100%;height:100%;display:flex;align-items:center;box-sizing:border-box;outline:2px solid var(--ogrid-selection-color, #217346);outline-offset:-1px;z-index:var(--ogrid-z-active-cell, 2);position:relative;background:var(--ogrid-bg, #fff);overflow:visible;padding:0}.ogrid-fluent__DataGridTable-module__tableWrapper .ogrid-fluent__DataGridTable-module__cellInRange,.ogrid-fluent__DataGridTable-module__tableWrapper [data-drag-range]{background:var(--ogrid-range-bg, rgba(33, 115, 70, .12))}.ogrid-fluent__DataGridTable-module__tableWrapper [data-drag-anchor]{background:var(--ogrid-bg, #fff)}.ogrid-fluent__DataGridTable-module__tableWrapper .ogrid-fluent__DataGridTable-module__activeCellContent.ogrid-fluent__DataGridTable-module__activeCellContent[data-drag-anchor],.ogrid-fluent__DataGridTable-module__tableWrapper .ogrid-fluent__DataGridTable-module__activeCellContent.ogrid-fluent__DataGridTable-module__activeCellContent[data-drag-range]{outline:none}.ogrid-fluent__DataGridTable-module__tableWrapper .ogrid-fluent__DataGridTable-module__activeCellContent.ogrid-fluent__DataGridTable-module__activeCellContent.ogrid-fluent__DataGridTable-module__inRange{outline:none;background:var(--ogrid-bg, #fff)}.ogrid-fluent__DataGridTable-module__tableWrapper .ogrid-fluent__DataGridTable-module__cellCut{background:var(--ogrid-hover-bg, rgba(0, 0, 0, .04));opacity:.7}.ogrid-fluent__DataGridTable-module__fillHandle{position:absolute;right:-3px;bottom:-3px;width:7px;height:7px;background:var(--ogrid-selection-color, #217346);border:1px solid var(--ogrid-bg, #fff);border-radius:1px;cursor:crosshair;pointer-events:auto;touch-action:none;z-index:var(--ogrid-z-fill-handle, 3)}@media(pointer:coarse){.ogrid-fluent__DataGridTable-module__fillHandle{width:14px;height:14px;right:-7px;bottom:-7px;border-radius:2px}}.ogrid-fluent__DataGridTable-module__selectionHeaderCellInner,.ogrid-fluent__DataGridTable-module__selectionCellInner{display:flex;align-items:center;justify-content:center;width:100%}.ogrid-fluent__DataGridTable-module__rowNumberHeaderCellInner,.ogrid-fluent__DataGridTable-module__rowNumberCellInner{display:flex;align-items:center;justify-content:center;width:100%;font-variant-numeric:tabular-nums}.ogrid-fluent__DataGridTable-module__columnLetterRow{background:var(--ogrid-column-letter-bg, var(--ogrid-header-bg))}.ogrid-fluent__DataGridTable-module__columnLetterCell{text-align:center;font-size:11px;font-weight:500;color:var(--ogrid-fg-muted, rgba(0, 0, 0, .5));padding:2px 4px;background:var(--ogrid-column-letter-bg, var(--ogrid-header-bg));border-bottom:1px solid var(--ogrid-border, rgba(0, 0, 0, .12));user-select:none;font-variant-numeric:tabular-nums}.ogrid-fluent__DataGridTable-module__statusBar{display:flex;align-items:center;gap:16px;width:100%;padding:6px 12px;box-sizing:border-box;font-size:12px;line-height:20px;color:var(--ogrid-fg-muted, rgba(0, 0, 0, .5));background:var(--ogrid-header-bg, #f5f5f5);border-top:1px solid var(--ogrid-border, rgba(0, 0, 0, .12));min-height:33px}.ogrid-fluent__DataGridTable-module__statusBarItem{display:inline-flex;align-items:center;gap:4px}.ogrid-fluent__DataGridTable-module__statusBarItem:not(:last-child):after{content:"";width:1px;height:14px;background:var(--ogrid-border, rgba(0, 0, 0, .12));margin-left:12px}.ogrid-fluent__DataGridTable-module__statusBarLabel{color:var(--ogrid-fg-muted, rgba(0, 0, 0, .5))}.ogrid-fluent__DataGridTable-module__statusBarValue{color:var(--ogrid-fg, rgba(0, 0, 0, .87));font-weight:600}.ogrid-fluent__DataGridTable-module__contextMenu{position:fixed;z-index:var(--ogrid-z-context-menu, 10000);min-width:160px;padding:4px 0;background:var(--ogrid-bg, #fff);border:1px solid var(--ogrid-border, rgba(0, 0, 0, .12));border-radius:6px;box-shadow:var(--ogrid-shadow, 0 4px 16px rgba(0, 0, 0, .12))}.ogrid-fluent__DataGridTable-module__contextMenuItem{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;padding:6px 12px;border:none;background:none;font-size:13px;text-align:left;cursor:pointer;color:var(--ogrid-fg, rgba(0, 0, 0, .87))}.ogrid-fluent__DataGridTable-module__contextMenuItem:hover:not(:disabled){background:var(--ogrid-hover-bg, rgba(0, 0, 0, .04))}.ogrid-fluent__DataGridTable-module__contextMenuItem:disabled{opacity:.5;cursor:not-allowed}.ogrid-fluent__DataGridTable-module__contextMenuItemLabel{flex:1}.ogrid-fluent__DataGridTable-module__contextMenuItemShortcut{color:var(--ogrid-fg-muted, rgba(0, 0, 0, .5));font-size:.85em}.ogrid-fluent__DataGridTable-module__contextMenuDivider{height:1px;margin:4px 0;background:var(--ogrid-border, rgba(0, 0, 0, .12))}.ogrid-fluent__DataGridTable-module__loadingOverlay{position:absolute;inset:0;z-index:var(--ogrid-z-loading, 2);display:flex;align-items:center;justify-content:center;background:var(--ogrid-loading-overlay, rgba(255, 255, 255, .7));backdrop-filter:blur(1px);pointer-events:all}.ogrid-fluent__DataGridTable-module__loadingOverlayContent{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 24px;background:var(--ogrid-bg, #fff);border:1px solid var(--ogrid-border, rgba(0, 0, 0, .12));border-radius:6px;box-shadow:var(--ogrid-shadow-sm, 0 2px 4px rgba(0, 0, 0, .08))}.ogrid-fluent__DataGridTable-module__loadingOverlayText{font-size:13px;font-weight:500;color:var(--ogrid-fg-muted, rgba(0, 0, 0, .5))}.ogrid-fluent__DataGridTable-module__loadingDimmed{opacity:.6;pointer-events:none}.ogrid-fluent__DataGridTable-module__emptyStateInGrid{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px 16px;min-height:88px;width:100%;box-sizing:border-box;border-top:1px solid var(--ogrid-border, rgba(0, 0, 0, .12));background:var(--ogrid-header-bg, #f5f5f5)}.ogrid-fluent__DataGridTable-module__emptyStateInGridTitle{font-size:14px;font-weight:600;color:var(--ogrid-fg, rgba(0, 0, 0, .87));margin-bottom:4px}.ogrid-fluent__DataGridTable-module__emptyStateInGridMessage{font-size:13px;color:var(--ogrid-fg-muted, rgba(0, 0, 0, .5));line-height:1.5}.ogrid-fluent__DataGridTable-module__emptyStateInGridLink{background:none;border:none;color:var(--ogrid-accent, #0078d4);text-decoration:underline;cursor:pointer;padding:0;font-size:inherit;font-family:inherit}.ogrid-fluent__DataGridTable-module__emptyStateInGridLink:hover{color:var(--ogrid-accent-dark, #005a9e)}.ogrid-fluent__DataGridTable-module__spinner{width:24px;height:24px;border:2px solid var(--ogrid-border, rgba(0, 0, 0, .12));border-top-color:var(--ogrid-accent, #0078d4);border-radius:50%;animation:ogrid-fluent__DataGridTable-module__ogrid-spin .8s linear infinite}@keyframes ogrid-fluent__DataGridTable-module__ogrid-spin{to{transform:rotate(360deg)}}@media(max-width:576px){.ogrid-fluent__DataGridTable-module__paginationNav{order:-1;width:100%;justify-content:center}.ogrid-fluent__DataGridTable-module__paginationInfo{font-size:11px;text-align:center;width:100%}.ogrid-fluent__DataGridTable-module__paginationSize{font-size:11px}}:where(:root){--ogrid-cell-padding: 6px 10px;--ogrid-cell-padding-vertical: 6px;--ogrid-cell-padding-horizontal: 10px;--ogrid-z-resize-handle: 1;--ogrid-z-active-cell: 2;--ogrid-z-fill-handle: 3;--ogrid-z-row-number: 5;--ogrid-z-pinned: 6;--ogrid-z-selection-cell: 7;--ogrid-z-thead: 8;--ogrid-z-pinned-header: 10;--ogrid-z-header-focus: 11;--ogrid-z-selection-header-pinned: 12;--ogrid-z-checkbox: 12;--ogrid-z-loading: 2;--ogrid-z-drop-indicator: 100;--ogrid-z-filter-popover: 1000;--ogrid-z-popover: 1000;--ogrid-z-fullscreen: 9999;--ogrid-z-context-menu: 10000;--ogrid-bg: #ffffff;--ogrid-fg: rgba(0, 0, 0, .87);--ogrid-fg-secondary: rgba(0, 0, 0, .6);--ogrid-fg-muted: rgba(0, 0, 0, .5);--ogrid-border: rgba(0, 0, 0, .12);--ogrid-border-strong: rgba(0, 0, 0, .5);--ogrid-border-hover: rgba(0, 0, 0, .3);--ogrid-header-bg: #f5f5f5;--ogrid-hover-bg: rgba(0, 0, 0, .04);--ogrid-selected-row-bg: #e6f0fb;--ogrid-bg-selected-hover: #dae8f8;--ogrid-active-cell-bg: rgba(0, 0, 0, .02);--ogrid-range-bg: rgba(33, 115, 70, .12);--ogrid-accent: #0078d4;--ogrid-accent-dark: #005a9e;--ogrid-selection-color: #217346;--ogrid-primary: #0078d4;--ogrid-primary-fg: #fff;--ogrid-primary-hover: #106ebe;--ogrid-bg-subtle: #f5f5f5;--ogrid-bg-hover: rgba(0, 0, 0, .04);--ogrid-active-bg: rgba(0, 0, 0, .06);--ogrid-muted: rgba(0, 0, 0, .5);--ogrid-shadow: 0 4px 16px rgba(0, 0, 0, .12);--ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, .08);--ogrid-pinned-shadow: rgba(0, 0, 0, .1);--ogrid-loading-overlay: rgba(255, 255, 255, .7);--ogrid-formula-error-color: #d32f2f;--ogrid-selection: #217346;--ogrid-bg-range: rgba(33, 115, 70, .12);--ogrid-bg-selected: #e6f0fb;--ogrid-loading-bg: rgba(255, 255, 255, .7)}@media(prefers-color-scheme:dark){:where(:root:not([data-theme=light])){--ogrid-bg: #1e1e1e;--ogrid-fg: rgba(255, 255, 255, .87);--ogrid-fg-secondary: rgba(255, 255, 255, .6);--ogrid-fg-muted: rgba(255, 255, 255, .5);--ogrid-border: rgba(255, 255, 255, .12);--ogrid-border-strong: rgba(255, 255, 255, .5);--ogrid-border-hover: rgba(255, 255, 255, .3);--ogrid-header-bg: #2c2c2c;--ogrid-hover-bg: rgba(255, 255, 255, .08);--ogrid-selected-row-bg: #1a3a5c;--ogrid-bg-selected-hover: #1f3650;--ogrid-active-cell-bg: rgba(255, 255, 255, .06);--ogrid-range-bg: rgba(46, 160, 67, .15);--ogrid-accent: #4da6ff;--ogrid-accent-dark: #3390e0;--ogrid-selection-color: #2ea043;--ogrid-primary: #4da6ff;--ogrid-primary-fg: #fff;--ogrid-primary-hover: #66b3ff;--ogrid-bg-subtle: rgba(255, 255, 255, .04);--ogrid-bg-hover: rgba(255, 255, 255, .08);--ogrid-active-bg: rgba(255, 255, 255, .08);--ogrid-muted: rgba(255, 255, 255, .5);--ogrid-shadow: 0 4px 16px rgba(0, 0, 0, .4);--ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, .25);--ogrid-pinned-shadow: rgba(0, 0, 0, .3);--ogrid-loading-overlay: rgba(0, 0, 0, .7);--ogrid-formula-error-color: #ef5350;--ogrid-selection: #2ea043;--ogrid-bg-range: rgba(46, 160, 67, .15);--ogrid-bg-selected: #1a3a5c;--ogrid-loading-bg: rgba(0, 0, 0, .7)}}:where([data-theme=dark]){--ogrid-bg: #1e1e1e;--ogrid-fg: rgba(255, 255, 255, .87);--ogrid-fg-secondary: rgba(255, 255, 255, .6);--ogrid-fg-muted: rgba(255, 255, 255, .5);--ogrid-border: rgba(255, 255, 255, .12);--ogrid-border-strong: rgba(255, 255, 255, .5);--ogrid-border-hover: rgba(255, 255, 255, .3);--ogrid-header-bg: #2c2c2c;--ogrid-hover-bg: rgba(255, 255, 255, .08);--ogrid-selected-row-bg: #1a3a5c;--ogrid-bg-selected-hover: #1f3650;--ogrid-active-cell-bg: rgba(255, 255, 255, .06);--ogrid-range-bg: rgba(46, 160, 67, .15);--ogrid-accent: #4da6ff;--ogrid-accent-dark: #3390e0;--ogrid-selection-color: #2ea043;--ogrid-primary: #4da6ff;--ogrid-primary-fg: #fff;--ogrid-primary-hover: #66b3ff;--ogrid-bg-subtle: rgba(255, 255, 255, .04);--ogrid-bg-hover: rgba(255, 255, 255, .08);--ogrid-active-bg: rgba(255, 255, 255, .08);--ogrid-muted: rgba(255, 255, 255, .5);--ogrid-shadow: 0 4px 16px rgba(0, 0, 0, .4);--ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, .25);--ogrid-pinned-shadow: rgba(0, 0, 0, .3);--ogrid-loading-overlay: rgba(0, 0, 0, .7);--ogrid-formula-error-color: #ef5350;--ogrid-selection: #2ea043;--ogrid-bg-range: rgba(46, 160, 67, .15);--ogrid-bg-selected: #1a3a5c;--ogrid-loading-bg: rgba(0, 0, 0, .7)}.fui-FluentProvider{--ogrid-bg: var(--colorNeutralBackground1, #ffffff);--ogrid-fg: var(--colorNeutralForeground1, rgba(0, 0, 0, .87));--ogrid-fg-secondary: var(--colorNeutralForeground2, rgba(0, 0, 0, .6));--ogrid-fg-muted: var(--colorNeutralForeground3, rgba(0, 0, 0, .5));--ogrid-border: var(--colorNeutralStroke2, rgba(0, 0, 0, .12));--ogrid-header-bg: var(--colorSubtleBackgroundSelected, #f3f2f1);--ogrid-hover-bg: var(--colorSubtleBackgroundHover, rgba(0, 0, 0, .04));--ogrid-selected-row-bg: var(--colorNeutralBackground1Selected, #e6f0fb);--ogrid-active-cell-bg: rgba(0, 0, 0, .02);--ogrid-range-bg: rgba(33, 115, 70, .12);--ogrid-accent: var(--colorBrandForeground1, #0078d4);--ogrid-selection-color: #217346;--ogrid-loading-overlay: rgba(255, 255, 255, .7)}.ogrid-fluent__DataGridTable-module__tableScrollContent{min-height:100%;background-color:var(--colorNeutralBackground1, var(--ogrid-bg, #ffffff))}.ogrid-fluent__DataGridTable-module__tableWidthAnchor{background-color:var(--colorNeutralBackground1, var(--ogrid-bg, #ffffff));overflow-x:clip}.ogrid-fluent__DataGridTable-module__tableWrapper{border:none;background-color:var(--colorNeutralBackground1, var(--ogrid-bg, #ffffff));-webkit-overflow-scrolling:touch;outline:none}.ogrid-fluent__DataGridTable-module__tableWrapper .ogrid-fluent__DataGridTable-module__dataTable{table-layout:auto}.ogrid-fluent__DataGridTable-module__dataTable{background-color:var(--colorNeutralBackground1, var(--ogrid-bg, #ffffff))}.ogrid-fluent__DataGridTable-module__dataTable .fui-TableHeaderCell,.ogrid-fluent__DataGridTable-module__dataTable .fui-TableCell{min-width:80px;box-sizing:border-box;border-right:1px solid var(--colorNeutralStroke1, #c4c4c4);font-size:13px;vertical-align:middle}.ogrid-fluent__DataGridTable-module__dataTable .fui-TableHeaderCell{padding:6px 10px;font-weight:600;font-size:14px;color:var(--ogrid-fg, rgba(0, 0, 0, .87));white-space:nowrap;background-color:var(--colorSubtleBackgroundSelected, var(--ogrid-header-bg, #f3f2f1));z-index:var(--ogrid-z-thead, 8);border-bottom:1px solid var(--ogrid-border, rgba(0, 0, 0, .12))}.ogrid-fluent__DataGridTable-module__dataTable .fui-TableHeaderCell>.fui-TableHeaderCell__button{position:static}.ogrid-fluent__DataGridTable-module__dataTable .fui-TableHeaderCell:focus-visible{outline:2px solid var(--colorBrandStroke1, var(--ogrid-accent, #0078d4));outline-offset:-2px;z-index:var(--ogrid-z-header-focus, 11)}.ogrid-fluent__DataGridTable-module__dataTable .fui-TableCell{padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;height:1px;border-right:1px solid var(--colorNeutralStroke1, #c4c4c4);position:relative;border-bottom:1px solid var(--ogrid-border, rgba(0, 0, 0, .12))}.ogrid-fluent__DataGridTable-module__dataTable .fui-TableCell>*{min-width:0}.ogrid-fluent__DataGridTable-module__dataTable .fui-TableCell:focus-visible{outline:none}.ogrid-fluent__DataGridTable-module__dataTable .fui-TableHeaderCell:last-of-type,.ogrid-fluent__DataGridTable-module__dataTable .fui-TableCell:last-of-type{border-right:none}.ogrid-fluent__DataGridTable-module__dataTable .fui-TableBody .fui-TableRow:last-child .fui-TableCell{border-bottom:none}.ogrid-fluent__DataGridTable-module__dataTable .fui-TableBody .fui-TableRow:hover .fui-TableCell{background-color:var(--colorSubtleBackgroundHover, var(--ogrid-hover-bg, rgba(0, 0, 0, .04)))}.ogrid-fluent__DataGridTable-module__leafHeaderCellSpan{font-weight:600;padding:6px 10px;background:var(--ogrid-header-bg, #f3f2f1)}.ogrid-fluent__DataGridTable-module__dataTable .ogrid-fluent__DataGridTable-module__selectionHeaderCellWrapper,.ogrid-fluent__DataGridTable-module__dataTable .ogrid-fluent__DataGridTable-module__selectionCellWrapper{width:48px;min-width:48px;max-width:48px;padding:4px;text-align:center}.ogrid-fluent__DataGridTable-module__dataTable .ogrid-fluent__DataGridTable-module__rowNumberHeaderCellWrapper{padding:4px 8px;text-align:center;background:var(--ogrid-header-bg, #f5f5f5);font-weight:600;color:var(--colorNeutralForeground3, #666);border-right:1px solid var(--ogrid-border, rgba(0, 0, 0, .12));position:relative}.ogrid-fluent__DataGridTable-module__dataTable .ogrid-fluent__DataGridTable-module__rowNumberCellWrapper{padding:4px 8px;text-align:center;background:var(--colorNeutralBackground3, #f5f5f5);font-weight:600;color:var(--colorNeutralForeground3, #666);border-right:1px solid var(--ogrid-border, rgba(0, 0, 0, .12))}.ogrid-fluent__DataGridTable-module__dataTable .fui-TableBody .ogrid-fluent__DataGridTable-module__selectedRow .fui-TableCell{background-color:var(--colorNeutralBackground1Selected, var(--ogrid-selected-row-bg, #e6f0fb))}.ogrid-fluent__DataGridTable-module__selectableGrid .ogrid-fluent__DataGridTable-module__dataTable .fui-TableBody .fui-TableRow:hover .fui-TableCell{background-color:var(--colorSubtleBackgroundHover, #f5f5f5);cursor:pointer}.ogrid-fluent__DataGridTable-module__selectableGrid .ogrid-fluent__DataGridTable-module__dataTable .fui-TableBody .ogrid-fluent__DataGridTable-module__selectedRow:hover .fui-TableCell{background-color:var(--colorNeutralBackground1Hover, #dae8f8)}.ogrid-fluent__DataGridTable-module__selectableGrid .ogrid-fluent__DataGridTable-module__dataTable .fui-TableBody .fui-TableRow{cursor:pointer}.ogrid-fluent__DataGridTable-module__cellContent{padding:var(--ogrid-cell-padding, 4px 8px)}.ogrid-fluent__DataGridTable-module__tableWrapper .ogrid-fluent__DataGridTable-module__activeCellContent{outline:2px solid var(--ogrid-selection-color, #217346);background-color:var(--ogrid-active-cell-bg, rgba(0, 0, 0, .02))}.ogrid-fluent__DataGridTable-module__tableWrapper .ogrid-fluent__DataGridTable-module__cellInRange,.ogrid-fluent__DataGridTable-module__tableWrapper [data-drag-range]{background-color:var(--ogrid-range-bg, rgba(33, 115, 70, .12))}.ogrid-fluent__DataGridTable-module__tableWrapper [data-drag-anchor]{background-color:var(--ogrid-bg, #ffffff)}.ogrid-fluent__DataGridTable-module__tableWrapper .ogrid-fluent__DataGridTable-module__cellCut{background-color:var(--ogrid-hover-bg, rgba(0, 0, 0, .04))}.ogrid-fluent__DataGridTable-module__stickyHeader{z-index:var(--ogrid-z-thead, 8);background-color:var(--colorSubtleBackgroundSelected, var(--ogrid-header-bg, #f3f2f1))}.ogrid-fluent__DataGridTable-module__stickyHeader .fui-TableHeaderCell{position:sticky;top:0}.ogrid-fluent__DataGridTable-module__stickyHeader .ogrid-fluent__DataGridTable-module__pinnedColLeft,.ogrid-fluent__DataGridTable-module__stickyHeader .ogrid-fluent__DataGridTable-module__pinnedColRight{top:0;z-index:var(--ogrid-z-pinned-header, 10)}.ogrid-fluent__DataGridTable-module__dataTable .ogrid-fluent__DataGridTable-module__pinnedColLeft{background-color:var(--colorNeutralBackground1, var(--ogrid-bg, #ffffff));border-right:1px solid var(--colorNeutralStroke1, var(--ogrid-border, rgba(0, 0, 0, .12)));box-shadow:2px 0 4px -1px #0000001a}.ogrid-fluent__DataGridTable-module__dataTable .fui-TableHeader .ogrid-fluent__DataGridTable-module__pinnedColLeft{background-color:var(--colorSubtleBackgroundSelected, var(--ogrid-header-bg, #f3f2f1))}.ogrid-fluent__DataGridTable-module__dataTable .ogrid-fluent__DataGridTable-module__pinnedColRight{background-color:var(--colorNeutralBackground1, var(--ogrid-bg, #ffffff));border-left:1px solid var(--colorNeutralStroke1, var(--ogrid-border, rgba(0, 0, 0, .12)));box-shadow:-2px 0 4px -1px #0000001a}.ogrid-fluent__DataGridTable-module__dataTable .fui-TableHeader .ogrid-fluent__DataGridTable-module__pinnedColRight{background-color:var(--colorSubtleBackgroundSelected, var(--ogrid-header-bg, #f3f2f1))}.ogrid-fluent__DataGridTable-module__headerMenuTrigger{color:var(--colorNeutralForeground3, #666)}.ogrid-fluent__DataGridTable-module__headerMenuTrigger:hover{background:var(--colorNeutralBackground1Hover, #f3f2f1)}.ogrid-fluent__DataGridTable-module__headerMenuTrigger:active{background:var(--colorNeutralBackground1Pressed, #e1dfdd)}.ogrid-fluent__DataGridTable-module__headerMenuTrigger:focus-visible{outline:2px solid var(--colorBrandStroke1, var(--ogrid-accent, #0078d4))}.ogrid-fluent__DataGridTable-module__resizeHandle:hover:after{background-color:var(--colorBrandForeground1, var(--ogrid-accent, #0078d4))}.ogrid-fluent__DataGridTable-module__resizeHandle:active:after{background-color:var(--colorBrandForeground1Pressed, #005a9e)}.ogrid-fluent__DataGridTable-module__statusBar{min-width:0;color:var(--colorNeutralForeground2, #616161);background-color:var(--colorSubtleBackgroundSelected, #f3f2f1);border-top:1px solid var(--colorNeutralStroke2, #e0e0e0);user-select:none}.ogrid-fluent__DataGridTable-module__statusBarItem:not(:last-child):after{display:inline-block;background-color:var(--colorNeutralStroke1, #c4c4c4)}.ogrid-fluent__DataGridTable-module__statusBarLabel{color:var(--colorNeutralForeground3, #707070);font-weight:400}.ogrid-fluent__DataGridTable-module__statusBarValue{color:var(--colorNeutralForeground1, #242424)}.ogrid-fluent__DataGridTable-module__contextMenu{background:var(--colorNeutralBackground1, #fff);border:1px solid var(--colorNeutralStroke1, #e0e0e0);border-radius:var(--borderRadiusMedium, 4px);box-shadow:var(--shadow16, 0 4px 16px rgba(0, 0, 0, .12));outline:none}.ogrid-fluent__DataGridTable-module__contextMenuItem{color:var(--colorNeutralForeground1, #242424)}.ogrid-fluent__DataGridTable-module__contextMenuItem:hover:not(:disabled){background-color:var(--colorSubtleBackgroundHover, #f5f5f5)}.ogrid-fluent__DataGridTable-module__contextMenuItemShortcut{color:var(--colorNeutralForeground3, rgba(0, 0, 0, .4))}.ogrid-fluent__DataGridTable-module__contextMenuDivider{background-color:var(--colorNeutralStroke2, #e0e0e0)}.ogrid-fluent__DataGridTable-module__loadingOverlayContent{background:var(--colorNeutralBackground1, #ffffff);border:1px solid var(--colorNeutralStroke1, #c4c4c4);border-radius:var(--borderRadiusMedium, 4px);box-shadow:var(--shadow4, 0 2px 4px rgba(0, 0, 0, .14))}.ogrid-fluent__DataGridTable-module__loadingOverlayText{color:var(--colorNeutralForeground2, #616161)}.ogrid-fluent__DataGridTable-module__loadingDimmed{transition:opacity .15s ease}.ogrid-fluent__DataGridTable-module__emptyStateInGrid{min-width:0;border-top:1px solid var(--colorNeutralStroke2, #e0e0e0);background-color:var(--colorNeutralBackground2, #fafafa)}.ogrid-fluent__DataGridTable-module__emptyStateInGridMessageSticky{position:sticky;left:50%;transform:translate(-50%);display:inline-flex;flex-direction:column;align-items:center;text-align:center}.ogrid-fluent__DataGridTable-module__emptyStateInGridIcon{font-size:24px;margin-bottom:8px;opacity:.6}.ogrid-fluent__DataGridTable-module__emptyStateInGridTitle{color:var(--colorNeutralForeground1, #242424)}.ogrid-fluent__DataGridTable-module__emptyStateInGridMessage{color:var(--colorNeutralForeground2, #616161);max-width:100%}.ogrid-fluent__DataGridTable-module__emptyStateInGridLink{color:var(--colorBrandForeground1, #0f6cbd)}.ogrid-fluent__DataGridTable-module__emptyStateInGridLink:hover{color:var(--colorBrandForeground1Hover, #115ea3)}.ogrid-fluent__DataGridTable-module__dataTable .fui-Link{color:var(--colorBrandForeground1, #0f6cbd);font-weight:600;text-decoration:none}.ogrid-fluent__DataGridTable-module__dataTable .fui-Link:hover{text-decoration:underline;color:var(--colorBrandForeground1Hover, #115ea3)}.ogrid-fluent__DataGridTable-module__dataTable .fui-Link:active{color:var(--colorBrandForeground1Pressed, #0c3b5e)}.ogrid-fluent__DataGridTable-module__density-compact .ogrid-fluent__DataGridTable-module__dataTable .fui-TableHeaderCell,.ogrid-fluent__DataGridTable-module__density-compact .ogrid-fluent__DataGridTable-module__cellContent{padding:4px 8px}.ogrid-fluent__DataGridTable-module__density-comfortable .ogrid-fluent__DataGridTable-module__dataTable .fui-TableHeaderCell,.ogrid-fluent__DataGridTable-module__density-comfortable .ogrid-fluent__DataGridTable-module__cellContent{padding:12px 16px}.ogrid-fluent__DataGridTable-module__tableWrapper .fui-Button:focus-visible,.ogrid-fluent__DataGridTable-module__tableWrapper .fui-MenuButton:focus-visible{outline:2px solid var(--colorBrandStroke1, #0078d4);outline-offset:2px}.ogrid-fluent__DataGridTable-module__tableWrapper .fui-Checkbox:focus-visible{outline:2px solid var(--colorBrandStroke1, #0078d4);outline-offset:2px}.ogrid-fluent__ColumnChooser-module__container{position:relative;display:inline-flex}.ogrid-fluent__ColumnChooser-module__dropdown{position:absolute;top:calc(100% + 4px);right:0;z-index:10000;min-width:220px;display:flex;flex-direction:column;background:var(--colorNeutralBackground1, #fff);border:1px solid var(--colorNeutralStroke2, #edebe9);border-radius:6px;box-shadow:0 4px 16px #0000001f;padding:0}.ogrid-fluent__ColumnChooser-module__header{padding:8px 12px;border-bottom:1px solid var(--colorNeutralStroke2, #edebe9);font-weight:600;font-size:13px}.ogrid-fluent__ColumnChooser-module__optionsList{max-height:320px;overflow-y:auto;padding:0}.ogrid-fluent__ColumnChooser-module__optionItem{padding:4px 12px;display:flex;align-items:center;min-height:32px}.ogrid-fluent__ColumnChooser-module__optionItem:hover{background:var(--colorNeutralBackground1Hover, #f5f5f5)}.ogrid-fluent__ColumnChooser-module__actions{display:flex;justify-content:flex-end;gap:8px;padding:8px 12px;border-top:1px solid var(--colorNeutralStroke2, #edebe9)}.ogrid-fluent__PaginationControls-module__pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;width:100%;min-width:0;box-sizing:border-box;padding:0}.ogrid-fluent__PaginationControls-module__paginationInfo{font-size:13px;color:var(--colorNeutralForeground2, #605e5c);flex-shrink:0;font-variant-numeric:tabular-nums}.ogrid-fluent__PaginationControls-module__paginationControls{display:flex;align-items:center;gap:4px;flex-wrap:wrap;flex:1 1 auto;justify-content:center;min-width:0}.ogrid-fluent__PaginationControls-module__navBtn{min-width:28px;min-height:28px}.ogrid-fluent__PaginationControls-module__pageNumbers{display:inline-flex;align-items:center;gap:4px;margin:0 8px}.ogrid-fluent__PaginationControls-module__pageBtn{min-width:28px;min-height:28px;font-variant-numeric:tabular-nums}.ogrid-fluent__PaginationControls-module__ellipsis{display:inline-flex;align-items:center;justify-content:center;min-width:24px;font-size:12px;color:var(--colorNeutralForeground3, #8a8886);user-select:none;pointer-events:none;letter-spacing:.02em}.ogrid-fluent__PaginationControls-module__pageSizeSelector{display:inline-flex;align-items:center;gap:8px;flex-shrink:0}.ogrid-fluent__PaginationControls-module__pageSizeSelector .ogrid-fluent__PaginationControls-module__pageSizeLabel{font-size:13px;color:var(--colorNeutralForeground2, #605e5c);user-select:none;white-space:nowrap}.ogrid-fluent__PaginationControls-module__pageSizeSelector .ogrid-fluent__PaginationControls-module__pageSizeSelect{min-width:72px}