@nubitio/crud 0.1.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 (8) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +78 -0
  3. package/dist/index.cjs +7966 -0
  4. package/dist/index.d.cts +1869 -0
  5. package/dist/index.d.mts +1869 -0
  6. package/dist/index.mjs +7875 -0
  7. package/dist/style.css +3331 -0
  8. package/package.json +65 -0
package/dist/style.css ADDED
@@ -0,0 +1,3331 @@
1
+ #wrapper {
2
+ display: flex;
3
+ flex-direction: column;
4
+ flex: 1 1 auto;
5
+ min-height: 0;
6
+ }
7
+
8
+ .view.datagrid-list {
9
+ display: flex;
10
+ flex-direction: column;
11
+ flex: 1 1 auto;
12
+ min-height: 0;
13
+ overflow: hidden;
14
+ }
15
+
16
+ .nb-datagrid {
17
+ --nb-datagrid-header-height: var(--grid-header-height, 34px);
18
+ display: flex;
19
+ flex-direction: column;
20
+ flex: 1 1 auto;
21
+ min-height: 0;
22
+ overflow: hidden;
23
+ position: relative;
24
+ }
25
+
26
+ .view-wrapper.view-wrapper-datagrid-list {
27
+ display: flex;
28
+ flex-direction: column;
29
+ flex: 1 1 auto;
30
+ min-height: 0;
31
+ padding-bottom: var(--content-padding);
32
+ padding-top: var(--content-padding);
33
+ }
34
+
35
+ .nb-datagrid__toolbar {
36
+ align-items: center;
37
+ background: var(--surface-1);
38
+ border: 1px solid var(--border-subtle);
39
+ border-radius: var(--radius-lg);
40
+ box-shadow: none;
41
+ display: flex;
42
+ flex: 0 0 auto;
43
+ gap: var(--space-2);
44
+ margin-bottom: var(--toolbar-margin-bottom);
45
+ min-height: var(--toolbar-height);
46
+ padding: 4px 10px;
47
+ }
48
+
49
+ .nb-datagrid__toolbar .grid-header {
50
+ color: var(--text-primary);
51
+ font-size: var(--font-size-md);
52
+ font-weight: var(--font-weight-semibold);
53
+ letter-spacing: -0.01em;
54
+ }
55
+
56
+ .nb-datagrid__toolbar-spacer {
57
+ flex: 1 1 auto;
58
+ }
59
+
60
+ .nb-datagrid__actions-menu {
61
+ position: relative;
62
+ }
63
+ .nb-datagrid__actions-menu summary {
64
+ cursor: pointer;
65
+ list-style: none;
66
+ }
67
+ .nb-datagrid__actions-menu summary[aria-disabled=true] {
68
+ cursor: not-allowed;
69
+ opacity: 0.55;
70
+ }
71
+ .nb-datagrid__actions-menu summary::-webkit-details-marker {
72
+ display: none;
73
+ }
74
+
75
+ .nb-datagrid__actions-popover {
76
+ background: var(--surface-elevated);
77
+ border: 1px solid var(--border-subtle);
78
+ border-radius: var(--radius-lg);
79
+ box-shadow: var(--shadow-md);
80
+ min-width: 190px;
81
+ padding: var(--space-1);
82
+ position: absolute;
83
+ right: 0;
84
+ top: calc(100% + var(--space-2));
85
+ z-index: 20;
86
+ }
87
+
88
+ .nb-datagrid__actions-group:has(.nb-datagrid__actions-group-label) + .nb-datagrid__actions-group:has(.nb-datagrid__actions-group-label) {
89
+ border-top: 1px solid var(--border-subtle);
90
+ margin-top: var(--space-2);
91
+ padding-top: var(--space-2);
92
+ }
93
+
94
+ .nb-datagrid__actions-group-label {
95
+ color: var(--text-tertiary);
96
+ font-size: var(--font-size-xxs);
97
+ font-weight: var(--font-weight-semibold);
98
+ letter-spacing: 0.04em;
99
+ padding: var(--space-1) var(--space-2);
100
+ text-transform: uppercase;
101
+ }
102
+
103
+ .nb-datagrid__actions-item {
104
+ align-items: center;
105
+ background: transparent;
106
+ border: 0;
107
+ border-radius: var(--radius-md);
108
+ color: var(--text-primary);
109
+ cursor: pointer;
110
+ display: flex;
111
+ font-size: var(--font-size-sm);
112
+ gap: var(--space-2);
113
+ min-height: 32px;
114
+ padding: 0 10px;
115
+ text-align: left;
116
+ width: 100%;
117
+ }
118
+ .nb-datagrid__actions-item:hover:not(:disabled) {
119
+ background: var(--control-bg-hover);
120
+ }
121
+ .nb-datagrid__actions-item:disabled {
122
+ cursor: not-allowed;
123
+ opacity: 0.55;
124
+ }
125
+
126
+ .nb-datagrid__actions-item--danger {
127
+ color: var(--status-danger-text, var(--error-color));
128
+ }
129
+ .nb-datagrid__actions-item--danger:hover:not(:disabled) {
130
+ background: var(--status-danger-bg, color-mix(in srgb, var(--error-color) 8%, transparent));
131
+ }
132
+
133
+ .nb-datagrid__actions-danger-group {
134
+ border-top: 1px solid var(--border-subtle);
135
+ margin-top: var(--space-2);
136
+ padding-top: var(--space-2);
137
+ }
138
+
139
+ .nb-datagrid__toolbar-icon-action + .nb-icon-button[aria-label] {
140
+ margin-left: var(--space-1);
141
+ }
142
+
143
+ .nb-datagrid__preset-control {
144
+ align-items: center;
145
+ display: inline-flex;
146
+ flex: 0 1 auto;
147
+ gap: var(--space-2);
148
+ margin-left: var(--space-2);
149
+ min-width: 0;
150
+ }
151
+
152
+ .nb-datagrid__preset-label {
153
+ align-items: center;
154
+ color: var(--text-secondary);
155
+ display: inline-flex;
156
+ flex: 0 0 auto;
157
+ font-size: var(--font-size-xs);
158
+ font-weight: var(--font-weight-medium);
159
+ gap: var(--space-1);
160
+ letter-spacing: 0.01em;
161
+ white-space: nowrap;
162
+ }
163
+ .nb-datagrid__preset-label i {
164
+ color: var(--text-tertiary);
165
+ font-size: 14px;
166
+ }
167
+
168
+ .nb-datagrid__preset-segments {
169
+ background: var(--surface-0);
170
+ border: 1px solid var(--border-subtle);
171
+ border-radius: var(--radius-md);
172
+ display: inline-flex;
173
+ flex: 0 1 auto;
174
+ gap: 1px;
175
+ max-width: 100%;
176
+ min-height: var(--control-height);
177
+ min-width: 0;
178
+ overflow-x: auto;
179
+ padding: 2px;
180
+ scrollbar-width: thin;
181
+ }
182
+
183
+ .nb-datagrid__preset-segment {
184
+ background: transparent;
185
+ border: 0;
186
+ border-radius: calc(var(--radius-md) - 2px);
187
+ color: var(--text-secondary);
188
+ cursor: pointer;
189
+ flex: 0 0 auto;
190
+ font: inherit;
191
+ font-size: var(--font-size-xs);
192
+ font-weight: var(--font-weight-medium);
193
+ line-height: 1;
194
+ min-height: calc(var(--control-height) - 4px);
195
+ padding: 0 var(--space-2);
196
+ transition: background var(--transition-base), box-shadow var(--transition-base), color var(--transition-base);
197
+ }
198
+ .nb-datagrid__preset-segment:hover:not(.nb-datagrid__preset-segment--active) {
199
+ background: var(--control-bg-hover);
200
+ color: var(--text-primary);
201
+ }
202
+ .nb-datagrid__preset-segment:focus-visible {
203
+ box-shadow: 0 0 0 2px var(--focus-ring-color);
204
+ outline: none;
205
+ z-index: 1;
206
+ }
207
+ .nb-datagrid__preset-segment--active {
208
+ background: var(--surface-1);
209
+ box-shadow: var(--shadow-sm);
210
+ color: var(--text-primary);
211
+ font-weight: var(--font-weight-semibold);
212
+ }
213
+
214
+ @media (max-width: 720px) {
215
+ .nb-datagrid__preset-control {
216
+ align-items: stretch;
217
+ flex-direction: column;
218
+ margin-left: 0;
219
+ width: 100%;
220
+ }
221
+ .nb-datagrid__preset-segments {
222
+ width: 100%;
223
+ }
224
+ }
225
+ .nb-datagrid__table-wrap {
226
+ background: var(--surface-1);
227
+ border: 1px solid var(--border-subtle);
228
+ border-radius: var(--radius-lg);
229
+ box-shadow: 0 1px 2px color-mix(in srgb, var(--shadow-color, #0f172a) 8%, transparent);
230
+ display: flex;
231
+ flex: 1 1 auto;
232
+ flex-direction: column;
233
+ min-height: 0;
234
+ min-width: 0;
235
+ overflow: hidden;
236
+ position: relative;
237
+ }
238
+
239
+ .nb-datagrid__table {
240
+ border-collapse: separate;
241
+ border-spacing: 0;
242
+ display: flex;
243
+ flex: 1 1 auto;
244
+ flex-direction: column;
245
+ min-height: 0;
246
+ min-width: 0;
247
+ table-layout: fixed;
248
+ width: 100%;
249
+ }
250
+
251
+ .nb-datagrid__table > thead {
252
+ display: block;
253
+ flex: 0 0 auto;
254
+ overflow: hidden;
255
+ }
256
+
257
+ .nb-datagrid__table > thead > tr,
258
+ .nb-datagrid__table > tbody > tr,
259
+ .nb-datagrid__table > tfoot > tr {
260
+ display: table;
261
+ table-layout: fixed;
262
+ width: var(--nb-datagrid-layout-width, 100%);
263
+ }
264
+
265
+ .nb-datagrid__table > tbody {
266
+ display: block;
267
+ flex: 1 1 auto;
268
+ min-height: 0;
269
+ overflow: auto;
270
+ }
271
+ .nb-datagrid__table > tbody::-webkit-scrollbar:horizontal {
272
+ height: 0;
273
+ }
274
+
275
+ .nb-datagrid__detail-col {
276
+ width: 36px;
277
+ }
278
+
279
+ .nb-datagrid__checkbox-col {
280
+ width: 36px;
281
+ }
282
+
283
+ .nb-datagrid__actions-col {
284
+ width: 44px;
285
+ }
286
+
287
+ .nb-datagrid__table > tfoot {
288
+ display: block;
289
+ flex: 0 0 auto;
290
+ overflow: hidden;
291
+ }
292
+
293
+ .nb-datagrid__hscroll {
294
+ flex: 0 0 auto;
295
+ margin-top: 2px;
296
+ overflow-x: auto;
297
+ overflow-y: hidden;
298
+ }
299
+
300
+ .nb-datagrid__hscroll-inner {
301
+ height: 1px;
302
+ pointer-events: none;
303
+ }
304
+
305
+ .nb-datagrid__hscroll--hidden {
306
+ display: none;
307
+ }
308
+
309
+ .nb-datagrid__table th,
310
+ .nb-datagrid__table td {
311
+ border-bottom: 1px solid var(--border-subtle);
312
+ overflow: hidden;
313
+ padding: var(--grid-cell-padding-y, 0) var(--grid-cell-padding-x, var(--space-3));
314
+ text-overflow: ellipsis;
315
+ vertical-align: middle;
316
+ white-space: nowrap;
317
+ }
318
+
319
+ .nb-datagrid__table td {
320
+ height: var(--row-height);
321
+ line-height: 1;
322
+ }
323
+
324
+ .nb-datagrid__table td .nb-badge {
325
+ font-size: var(--font-size-xxs);
326
+ line-height: 1;
327
+ padding: 0.2em 0.5em;
328
+ }
329
+
330
+ .nb-datagrid__table > thead > tr > th {
331
+ background: var(--grid-header-bg, var(--surface-0));
332
+ border-bottom: 1px solid var(--border-subtle);
333
+ color: var(--text-secondary);
334
+ font-size: var(--font-size-xs);
335
+ font-weight: var(--font-weight-semibold);
336
+ height: var(--nb-datagrid-header-height);
337
+ letter-spacing: 0.02em;
338
+ position: sticky;
339
+ text-align: left;
340
+ text-transform: uppercase;
341
+ top: 0;
342
+ z-index: 3;
343
+ }
344
+
345
+ .nb-datagrid__header-cell--sorted,
346
+ .nb-datagrid__header-cell--filtered {
347
+ color: var(--text-primary) !important;
348
+ }
349
+
350
+ .nb-datagrid__header-cell--sorted {
351
+ box-shadow: inset 0 -1px 0 var(--border-color) !important;
352
+ }
353
+
354
+ .nb-datagrid__header-cell--filtered::after {
355
+ background: color-mix(in srgb, var(--accent-color) 18%, transparent);
356
+ border: 1px solid color-mix(in srgb, var(--accent-color) 28%, transparent);
357
+ border-radius: 999px;
358
+ bottom: 6px;
359
+ content: "";
360
+ height: 5px;
361
+ position: absolute;
362
+ right: 9px;
363
+ width: 5px;
364
+ }
365
+
366
+ .nb-datagrid__table > thead > tr:first-child > th {
367
+ box-shadow: inset 0 -1px 0 var(--border-color);
368
+ }
369
+
370
+ .nb-datagrid__col-resize {
371
+ background: transparent;
372
+ bottom: 0;
373
+ cursor: col-resize;
374
+ position: absolute;
375
+ right: 0;
376
+ top: 0;
377
+ transition: background var(--transition-base);
378
+ width: 4px;
379
+ z-index: 2;
380
+ }
381
+ .nb-datagrid__col-resize:hover {
382
+ background: var(--accent-color);
383
+ }
384
+ .nb-datagrid__col-resize::before {
385
+ background: color-mix(in srgb, var(--border-color) 65%, transparent);
386
+ bottom: 7px;
387
+ content: "";
388
+ opacity: 0;
389
+ position: absolute;
390
+ right: 1px;
391
+ top: 7px;
392
+ transition: opacity var(--transition-fast);
393
+ width: 1px;
394
+ }
395
+ .nb-datagrid__col-resize:hover::before {
396
+ opacity: 1;
397
+ }
398
+
399
+ .nb-datagrid__table > thead > tr:first-child > th:first-child {
400
+ border-top-left-radius: calc(var(--radius-lg) - 1px);
401
+ }
402
+ .nb-datagrid__table > thead > tr:first-child > th:last-child {
403
+ border-top-right-radius: calc(var(--radius-lg) - 1px);
404
+ }
405
+
406
+ .nb-datagrid__row {
407
+ cursor: pointer;
408
+ font-size: var(--font-size-sm);
409
+ outline: 0;
410
+ transition: background var(--transition-fast), box-shadow var(--transition-fast);
411
+ }
412
+ .nb-datagrid--zebra .nb-datagrid__row:nth-child(even) td {
413
+ background: var(--grid-row-alt-bg);
414
+ }
415
+ .nb-datagrid__row:hover td {
416
+ background: var(--grid-row-hover-bg, var(--surface-2));
417
+ }
418
+ .nb-datagrid__row:focus-visible td {
419
+ background: color-mix(in srgb, var(--accent-color) 7%, var(--surface-1));
420
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-color) 34%, transparent);
421
+ }
422
+ .nb-datagrid__row.nb-datagrid__row--selected td {
423
+ background: var(--grid-row-selected-bg, var(--surface-2));
424
+ }
425
+ .nb-datagrid__row.nb-datagrid__row--selected td:first-child {
426
+ box-shadow: inset 2px 0 0 var(--grid-row-selected-border, var(--accent-color));
427
+ }
428
+ .nb-datagrid__row.nb-datagrid__row--selected .nb-datagrid__actions-cell, .nb-datagrid__row.nb-datagrid__row--selected .nb-datagrid__detail-cell {
429
+ background: var(--grid-row-selected-bg, var(--surface-2));
430
+ }
431
+ .nb-datagrid__row.nb-datagrid__row--expanded td {
432
+ background: var(--surface-2);
433
+ border-bottom-color: var(--border-color);
434
+ }
435
+ .nb-datagrid__row:last-child td {
436
+ border-bottom: 0;
437
+ }
438
+
439
+ .nb-datagrid__sort-button,
440
+ .nb-datagrid__column-label {
441
+ align-items: center;
442
+ color: inherit;
443
+ display: inline-flex;
444
+ font-size: inherit;
445
+ gap: var(--space-1);
446
+ overflow: hidden;
447
+ padding: 0;
448
+ text-align: inherit;
449
+ width: 100%;
450
+ }
451
+
452
+ .nb-datagrid__sort-button {
453
+ background: transparent;
454
+ border: 0;
455
+ cursor: pointer;
456
+ min-height: 22px;
457
+ transition: color var(--transition-fast);
458
+ }
459
+ .nb-datagrid__sort-button span {
460
+ min-width: 0;
461
+ overflow: hidden;
462
+ text-overflow: ellipsis;
463
+ }
464
+ .nb-datagrid__sort-button:hover {
465
+ color: var(--accent-color);
466
+ }
467
+
468
+ .nb-datagrid__column-label {
469
+ cursor: default;
470
+ }
471
+
472
+ .nb-datagrid__sort-icon {
473
+ color: var(--accent-color);
474
+ flex: 0 0 auto;
475
+ font-size: 10px;
476
+ opacity: 1;
477
+ }
478
+
479
+ .nb-datagrid__sort-hint {
480
+ flex: 0 0 auto;
481
+ font-size: 10px;
482
+ opacity: 0;
483
+ transition: opacity var(--transition-base);
484
+ }
485
+ .nb-datagrid__sort-button:hover .nb-datagrid__sort-hint {
486
+ opacity: 0.45;
487
+ }
488
+
489
+ .nb-datagrid__filter-row > td {
490
+ background: var(--grid-filter-bg, color-mix(in srgb, var(--surface-0) 70%, var(--surface-1)));
491
+ border-bottom: 1px solid var(--border-subtle);
492
+ overflow: visible;
493
+ padding: 0;
494
+ position: sticky;
495
+ top: var(--nb-datagrid-header-height);
496
+ z-index: 2;
497
+ }
498
+
499
+ .nb-datagrid__filter-row > .nb-datagrid__filter-cell--active {
500
+ background: color-mix(in srgb, var(--accent-color) 5%, var(--surface-1));
501
+ box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--accent-color) 65%, transparent);
502
+ }
503
+
504
+ .nb-datagrid__filter-row .nb-form__lookup {
505
+ width: 100%;
506
+ }
507
+ .nb-datagrid__filter-row .nb-form__lookup .nb-datagrid__filter-select {
508
+ padding-right: var(--control-height, 30px);
509
+ transition: padding-right var(--transition-fast);
510
+ }
511
+ .nb-datagrid__filter-row .nb-form__lookup.has-value .nb-datagrid__filter-select {
512
+ padding-right: calc(var(--control-height, 30px) + var(--control-icon-size, 20px) + var(--space-1));
513
+ }
514
+
515
+ .nb-datagrid__filter-wrap {
516
+ align-items: center;
517
+ display: flex;
518
+ position: relative;
519
+ }
520
+
521
+ .nb-datagrid__filter-wrap--between {
522
+ align-items: stretch;
523
+ }
524
+
525
+ .nb-datagrid__filter-icon {
526
+ color: var(--text-tertiary);
527
+ flex: 0 0 auto;
528
+ font-size: var(--font-size-xxs);
529
+ left: 6px;
530
+ pointer-events: none;
531
+ position: absolute;
532
+ top: 50%;
533
+ transform: translateY(-50%);
534
+ }
535
+
536
+ .nb-datagrid__filter-input {
537
+ background: transparent;
538
+ border: none;
539
+ border-radius: 0;
540
+ box-shadow: none;
541
+ color: var(--text-primary);
542
+ font: inherit;
543
+ font-size: var(--font-size-xs);
544
+ height: var(--grid-filter-height, 32px);
545
+ min-width: 60px;
546
+ outline: none;
547
+ padding: 4px 22px 4px 6px;
548
+ width: 100%;
549
+ }
550
+ .nb-datagrid__filter-input:focus {
551
+ background: color-mix(in srgb, var(--accent-color) 6%, var(--surface-1));
552
+ box-shadow: inset 0 -2px 0 var(--accent-color);
553
+ outline: none;
554
+ position: relative;
555
+ z-index: 1;
556
+ }
557
+
558
+ .nb-datagrid__filter-date .nb-date-picker__trigger {
559
+ background: transparent;
560
+ border: 0;
561
+ border-radius: 0;
562
+ box-shadow: none;
563
+ font-size: var(--font-size-xs);
564
+ height: var(--grid-filter-height, 32px);
565
+ min-height: var(--grid-filter-height, 32px);
566
+ padding: 4px 22px 4px 6px;
567
+ }
568
+ .nb-datagrid__filter-date .nb-date-picker__trigger:hover:not(:disabled) {
569
+ background: transparent;
570
+ border-color: transparent;
571
+ }
572
+ .nb-datagrid__filter-date .nb-date-picker__trigger:focus-visible, .nb-datagrid__filter-date .nb-date-picker__trigger[aria-expanded=true] {
573
+ background: color-mix(in srgb, var(--accent-color) 6%, var(--surface-1));
574
+ border-color: transparent;
575
+ box-shadow: inset 0 -2px 0 var(--accent-color);
576
+ }
577
+ .nb-datagrid__filter-date .nb-date-picker__icon {
578
+ font-size: var(--font-size-xs);
579
+ }
580
+
581
+ .nb-datagrid__filter-range {
582
+ min-width: 0;
583
+ width: 100%;
584
+ }
585
+ .nb-datagrid__filter-range .nb-date-range-picker__trigger {
586
+ background: transparent;
587
+ border: 0;
588
+ border-radius: 0;
589
+ box-shadow: none;
590
+ font-size: var(--font-size-xs);
591
+ height: var(--grid-filter-height, 32px);
592
+ min-height: var(--grid-filter-height, 32px);
593
+ padding: 4px 22px 4px 42px;
594
+ }
595
+ .nb-datagrid__filter-range .nb-date-range-picker__trigger:hover:not(.nb-date-range-picker__trigger--disabled) {
596
+ background: transparent;
597
+ }
598
+ .nb-datagrid__filter-range .nb-date-range-picker__trigger:focus-within:not(.nb-date-range-picker__trigger--disabled):not(.nb-date-range-picker__trigger--readonly), .nb-datagrid__filter-range .nb-date-range-picker__trigger.nb-date-range-picker__trigger--open {
599
+ background: color-mix(in srgb, var(--accent-color) 6%, var(--surface-1));
600
+ border-color: transparent;
601
+ box-shadow: inset 0 -2px 0 var(--accent-color);
602
+ }
603
+ .nb-datagrid__filter-range .nb-date-range-picker__input {
604
+ font-size: var(--font-size-xs);
605
+ min-width: 0;
606
+ }
607
+ .nb-datagrid__filter-range .nb-date-range-picker__sep {
608
+ font-size: 10px;
609
+ }
610
+ .nb-datagrid__filter-range .nb-date-range-picker__icons {
611
+ margin-right: -18px;
612
+ }
613
+ .nb-datagrid__filter-range .nb-date-range-picker__calendar-btn {
614
+ font-size: var(--font-size-xs);
615
+ }
616
+
617
+ .nb-datagrid__filter-operator {
618
+ left: 5px;
619
+ position: absolute;
620
+ top: 50%;
621
+ transform: translateY(-50%);
622
+ width: 30px;
623
+ z-index: 2;
624
+ }
625
+ .nb-datagrid__filter-operator.nb-dropdown .nb-dropdown__trigger {
626
+ appearance: none;
627
+ background: color-mix(in srgb, var(--accent-color) 10%, transparent);
628
+ border: 1px solid color-mix(in srgb, var(--accent-color) 20%, transparent);
629
+ border-radius: 999px;
630
+ box-shadow: none;
631
+ color: var(--accent-color);
632
+ font-size: 10px;
633
+ height: 18px;
634
+ line-height: 1;
635
+ min-height: 18px;
636
+ min-width: 30px;
637
+ padding: 0 3px;
638
+ text-align: center;
639
+ width: 30px;
640
+ }
641
+ .nb-datagrid__filter-operator.nb-dropdown .nb-dropdown__caret {
642
+ display: none;
643
+ }
644
+
645
+ .nb-datagrid__filter-operator + .nb-datagrid__filter-input {
646
+ padding-left: 42px;
647
+ }
648
+
649
+ .nb-datagrid__filter-operator + .nb-datagrid__filter-date .nb-date-picker__trigger {
650
+ padding-left: 42px;
651
+ }
652
+
653
+ .nb-datagrid__filter-operator + .nb-datagrid__filter-range .nb-date-range-picker__trigger {
654
+ padding-left: 42px;
655
+ }
656
+
657
+ .nb-datagrid__filter-between-inputs {
658
+ display: grid;
659
+ gap: 2px;
660
+ grid-template-rows: repeat(2, minmax(24px, auto));
661
+ padding-left: 42px;
662
+ width: 100%;
663
+ }
664
+ .nb-datagrid__filter-between-inputs .nb-datagrid__filter-input {
665
+ min-width: 0;
666
+ }
667
+ .nb-datagrid__filter-between-inputs .nb-datagrid__filter-date .nb-date-picker__trigger {
668
+ min-width: 0;
669
+ }
670
+
671
+ .nb-datagrid__filter-operator + .nb-datagrid__filter-between-inputs {
672
+ padding-left: 42px;
673
+ }
674
+
675
+ .nb-datagrid__filter-select {
676
+ width: 100%;
677
+ }
678
+ .nb-datagrid__filter-select.nb-dropdown .nb-dropdown__trigger {
679
+ background: transparent;
680
+ border: none;
681
+ border-radius: 0;
682
+ box-shadow: none;
683
+ color: var(--text-primary);
684
+ font: inherit;
685
+ font-size: var(--font-size-xs);
686
+ height: var(--grid-filter-height, 32px);
687
+ min-height: var(--grid-filter-height, 32px);
688
+ outline: none;
689
+ padding: 4px var(--space-2);
690
+ width: 100%;
691
+ }
692
+ .nb-datagrid__filter-select.nb-dropdown--open .nb-dropdown__trigger, .nb-datagrid__filter-select.nb-dropdown .nb-dropdown__trigger:focus-visible {
693
+ background: color-mix(in srgb, var(--accent-color) 6%, var(--surface-1));
694
+ border-color: transparent;
695
+ box-shadow: inset 0 -2px 0 var(--accent-color);
696
+ outline: none;
697
+ }
698
+ .nb-datagrid__filter-select:is(input) {
699
+ appearance: none;
700
+ background: transparent;
701
+ border: none;
702
+ border-radius: 0;
703
+ box-shadow: none;
704
+ color: var(--text-primary);
705
+ font: inherit;
706
+ font-size: var(--font-size-xs);
707
+ height: var(--grid-filter-height, 32px);
708
+ outline: none;
709
+ padding: 4px var(--space-4) 4px var(--space-2);
710
+ }
711
+ .nb-datagrid__filter-select:is(input):focus-visible {
712
+ background: color-mix(in srgb, var(--accent-color) 6%, var(--surface-1));
713
+ box-shadow: inset 0 -2px 0 var(--accent-color);
714
+ outline: none;
715
+ }
716
+
717
+ .nb-datagrid__filter-operator:focus {
718
+ border-color: var(--accent-color);
719
+ outline: 2px solid var(--focus-ring-color);
720
+ outline-offset: 1px;
721
+ }
722
+
723
+ .nb-datagrid__filter-clear {
724
+ align-items: center;
725
+ background: transparent;
726
+ border: 0;
727
+ border-radius: 50%;
728
+ color: var(--text-tertiary);
729
+ cursor: pointer;
730
+ display: inline-flex;
731
+ font-size: 10px;
732
+ height: 16px;
733
+ justify-content: center;
734
+ padding: 0;
735
+ position: absolute;
736
+ right: 4px;
737
+ top: 50%;
738
+ transform: translateY(-50%);
739
+ transition: background var(--transition-fast), color var(--transition-fast);
740
+ visibility: hidden;
741
+ width: 16px;
742
+ }
743
+ .nb-datagrid__filter-clear.is-active {
744
+ visibility: visible;
745
+ }
746
+ .nb-datagrid__filter-clear.is-active:focus-visible {
747
+ background: color-mix(in srgb, var(--accent-color) 10%, transparent);
748
+ color: var(--accent-color);
749
+ outline: 2px solid var(--focus-ring-color);
750
+ outline-offset: 1px;
751
+ }
752
+ .nb-datagrid__filter-clear.is-active:hover {
753
+ background: color-mix(in srgb, var(--error-color) 12%, transparent);
754
+ color: var(--error-color);
755
+ }
756
+
757
+ .nb-datagrid__error-row td {
758
+ background: color-mix(in srgb, var(--error-color, #d9534f) 8%, var(--surface-1));
759
+ border-bottom-color: color-mix(in srgb, var(--error-color, #d9534f) 24%, var(--border-subtle));
760
+ color: var(--error-color, #d9534f);
761
+ height: auto;
762
+ padding: 0;
763
+ white-space: normal;
764
+ }
765
+
766
+ .nb-datagrid__error-message {
767
+ align-items: center;
768
+ display: flex;
769
+ gap: var(--space-2);
770
+ min-height: 34px;
771
+ padding: var(--space-2) var(--space-3);
772
+ }
773
+ .nb-datagrid__error-message > span {
774
+ flex: 1 1 auto;
775
+ }
776
+
777
+ .nb-datagrid__error-close {
778
+ align-items: center;
779
+ background: transparent;
780
+ border: 0;
781
+ border-radius: 50%;
782
+ color: inherit;
783
+ cursor: pointer;
784
+ display: inline-flex;
785
+ flex: 0 0 auto;
786
+ height: 22px;
787
+ justify-content: center;
788
+ padding: 0;
789
+ width: 22px;
790
+ }
791
+ .nb-datagrid__error-close:hover {
792
+ background: color-mix(in srgb, currentColor 12%, transparent);
793
+ }
794
+
795
+ .nb-datagrid__select-cell,
796
+ .nb-datagrid__detail-cell {
797
+ text-align: center;
798
+ width: 36px;
799
+ }
800
+
801
+ .nb-datagrid__detail-cell {
802
+ background: var(--surface-1);
803
+ box-shadow: 1px 0 0 var(--border-subtle);
804
+ left: 0;
805
+ min-width: 36px;
806
+ position: sticky;
807
+ z-index: 2;
808
+ }
809
+
810
+ .nb-datagrid__table > thead > tr > .nb-datagrid__detail-cell {
811
+ background: var(--grid-header-bg, var(--surface-0));
812
+ z-index: 5;
813
+ }
814
+
815
+ .nb-datagrid__filter-row > .nb-datagrid__detail-cell {
816
+ background: var(--grid-filter-bg, color-mix(in srgb, var(--surface-0) 70%, var(--surface-1)));
817
+ z-index: 4;
818
+ }
819
+
820
+ .nb-datagrid__summary-footer .nb-datagrid__detail-cell {
821
+ z-index: 4;
822
+ }
823
+
824
+ .nb-datagrid__table td.nb-datagrid__detail-cell,
825
+ .nb-datagrid__table td.nb-datagrid__select-cell {
826
+ text-overflow: clip;
827
+ }
828
+
829
+ .nb-datagrid__expand-button {
830
+ align-items: center;
831
+ background: transparent;
832
+ border: 1px solid transparent;
833
+ border-radius: var(--radius-sm);
834
+ color: var(--text-secondary);
835
+ cursor: pointer;
836
+ display: inline-flex;
837
+ height: 24px;
838
+ justify-content: center;
839
+ padding: 0;
840
+ transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
841
+ width: 24px;
842
+ }
843
+
844
+ .nb-datagrid__expand-button:hover,
845
+ .nb-datagrid__expand-button.is-expanded {
846
+ background: color-mix(in srgb, var(--accent-color) 12%, transparent);
847
+ border-color: color-mix(in srgb, var(--accent-color) 30%, transparent);
848
+ color: var(--accent-color);
849
+ }
850
+
851
+ .nb-datagrid__expand-button.is-expanded {
852
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 10%, transparent);
853
+ }
854
+
855
+ .nb-datagrid__select-cell input {
856
+ accent-color: var(--accent-color);
857
+ }
858
+
859
+ .nb-datagrid__detail-row td {
860
+ background: var(--surface-0);
861
+ border-bottom-color: var(--border-subtle);
862
+ padding: var(--space-3) var(--space-4);
863
+ }
864
+
865
+ .nb-datagrid__detail-content {
866
+ border: 1px solid var(--border-subtle);
867
+ border-radius: var(--radius-lg);
868
+ overflow: hidden;
869
+ }
870
+
871
+ .nb-datagrid__detail-table {
872
+ border-collapse: separate;
873
+ border-spacing: 0;
874
+ table-layout: fixed;
875
+ width: 100%;
876
+ }
877
+
878
+ .nb-datagrid__detail-table th,
879
+ .nb-datagrid__detail-table td {
880
+ border-bottom: 1px solid var(--border-subtle);
881
+ overflow: hidden;
882
+ padding: var(--space-2) var(--space-3);
883
+ text-align: left;
884
+ text-overflow: ellipsis;
885
+ vertical-align: middle;
886
+ white-space: nowrap;
887
+ }
888
+
889
+ .nb-datagrid__detail-table th {
890
+ background: var(--surface-0);
891
+ color: var(--text-secondary);
892
+ font-size: var(--font-size-xs);
893
+ font-weight: var(--font-weight-semibold);
894
+ letter-spacing: 0.02em;
895
+ text-transform: uppercase;
896
+ }
897
+
898
+ .nb-datagrid__detail-table th:first-child {
899
+ border-top-left-radius: calc(var(--radius-lg) - 1px);
900
+ }
901
+
902
+ .nb-datagrid__detail-table th:last-child {
903
+ border-top-right-radius: calc(var(--radius-lg) - 1px);
904
+ }
905
+
906
+ .nb-datagrid__detail-table tbody tr:last-child td {
907
+ border-bottom: 0;
908
+ }
909
+
910
+ .nb-datagrid__detail-table td {
911
+ font-size: var(--font-size-sm);
912
+ }
913
+
914
+ .nb-datagrid__detail-table td:first-child {
915
+ color: var(--text-secondary);
916
+ font-size: var(--font-size-xs);
917
+ font-weight: var(--font-weight-medium);
918
+ }
919
+
920
+ .nb-datagrid .nb-badge {
921
+ border-width: 1px;
922
+ font-size: var(--font-size-xxs);
923
+ font-weight: var(--font-weight-semibold);
924
+ line-height: 1;
925
+ padding: 0.2em 0.5em;
926
+ }
927
+
928
+ html[data-density=compact] .nb-datagrid .nb-badge {
929
+ font-size: 9px;
930
+ min-height: 14px;
931
+ padding: 0 5px;
932
+ }
933
+
934
+ .nb-datagrid__actions-cell {
935
+ background: var(--surface-1);
936
+ box-shadow: -1px 0 0 var(--border-subtle);
937
+ min-width: 44px;
938
+ position: sticky;
939
+ right: 0;
940
+ text-align: center;
941
+ width: 44px;
942
+ z-index: 2;
943
+ }
944
+
945
+ .nb-datagrid__table > thead > tr > .nb-datagrid__actions-cell {
946
+ background: var(--grid-header-bg, var(--surface-0));
947
+ z-index: 5;
948
+ }
949
+
950
+ .nb-datagrid__filter-row > .nb-datagrid__actions-cell {
951
+ background: var(--grid-filter-bg, color-mix(in srgb, var(--surface-0) 70%, var(--surface-1)));
952
+ z-index: 4;
953
+ }
954
+
955
+ .nb-datagrid__summary-footer .nb-datagrid__actions-cell {
956
+ z-index: 4;
957
+ }
958
+
959
+ .nb-datagrid__row-actions {
960
+ align-items: center;
961
+ display: flex;
962
+ gap: 2px;
963
+ justify-content: center;
964
+ opacity: 0.66;
965
+ transition: opacity var(--transition-fast);
966
+ }
967
+
968
+ .nb-datagrid__row:hover .nb-datagrid__row-actions,
969
+ .nb-datagrid__row:focus-visible .nb-datagrid__row-actions,
970
+ .nb-datagrid__row--selected .nb-datagrid__row-actions {
971
+ opacity: 1;
972
+ }
973
+
974
+ .nb-datagrid__row-actions-menu {
975
+ position: relative;
976
+ }
977
+ .nb-datagrid__row-actions-menu summary {
978
+ cursor: pointer;
979
+ list-style: none;
980
+ }
981
+ .nb-datagrid__row-actions-menu summary::-webkit-details-marker {
982
+ display: none;
983
+ }
984
+
985
+ .nb-datagrid__row-actions-popover {
986
+ background: var(--surface-elevated);
987
+ border: 1px solid var(--border-subtle);
988
+ border-radius: var(--radius-lg);
989
+ box-shadow: var(--shadow-md);
990
+ min-width: 190px;
991
+ padding: var(--space-1);
992
+ z-index: var(--z-popover);
993
+ }
994
+
995
+ .nb-datagrid__empty-td {
996
+ padding: 0 !important;
997
+ border-bottom: 0 !important;
998
+ }
999
+
1000
+ .nb-datagrid__empty {
1001
+ align-items: center;
1002
+ bottom: 0;
1003
+ box-sizing: border-box;
1004
+ display: flex;
1005
+ justify-content: center;
1006
+ left: 0;
1007
+ pointer-events: none;
1008
+ position: absolute;
1009
+ right: 0;
1010
+ top: 0;
1011
+ }
1012
+ .nb-datagrid__empty .nb-empty-state {
1013
+ padding-block: var(--space-5);
1014
+ pointer-events: auto;
1015
+ }
1016
+
1017
+ .nb-datagrid__loading {
1018
+ color: var(--text-tertiary);
1019
+ padding: var(--space-5);
1020
+ text-align: center;
1021
+ }
1022
+
1023
+ .nb-datagrid__skeleton-row td {
1024
+ padding: var(--space-2) var(--space-3);
1025
+ }
1026
+
1027
+ .nb-datagrid__skeleton-cell {
1028
+ animation: skeleton-pulse 1.8s ease-in-out infinite;
1029
+ background: linear-gradient(90deg, color-mix(in srgb, var(--border-subtle) 80%, transparent) 0%, color-mix(in srgb, var(--surface-2) 90%, var(--border-subtle)) 50%, color-mix(in srgb, var(--border-subtle) 80%, transparent) 100%);
1030
+ background-size: 200% 100%;
1031
+ border-radius: var(--radius-sm);
1032
+ height: 10px;
1033
+ max-width: 80%;
1034
+ width: 100%;
1035
+ }
1036
+
1037
+ .nb-datagrid__skeleton-row td:nth-child(3n+1) .nb-datagrid__skeleton-cell {
1038
+ max-width: 75%;
1039
+ }
1040
+
1041
+ .nb-datagrid__skeleton-row td:nth-child(3n+2) .nb-datagrid__skeleton-cell {
1042
+ max-width: 55%;
1043
+ }
1044
+
1045
+ .nb-datagrid__skeleton-row td:nth-child(3n) .nb-datagrid__skeleton-cell {
1046
+ max-width: 90%;
1047
+ }
1048
+
1049
+ .nb-datagrid__skeleton-row:nth-child(2) .nb-datagrid__skeleton-cell {
1050
+ animation-delay: -0.3s;
1051
+ }
1052
+
1053
+ .nb-datagrid__skeleton-row:nth-child(3) .nb-datagrid__skeleton-cell {
1054
+ animation-delay: -0.6s;
1055
+ }
1056
+
1057
+ .nb-datagrid__skeleton-row:nth-child(4) .nb-datagrid__skeleton-cell {
1058
+ animation-delay: -0.9s;
1059
+ }
1060
+
1061
+ .nb-datagrid__skeleton-row:nth-child(5) .nb-datagrid__skeleton-cell {
1062
+ animation-delay: -0.4s;
1063
+ }
1064
+
1065
+ .nb-datagrid__skeleton-row:nth-child(6) .nb-datagrid__skeleton-cell {
1066
+ animation-delay: -1.1s;
1067
+ }
1068
+
1069
+ .nb-datagrid__skeleton-row:nth-child(7) .nb-datagrid__skeleton-cell {
1070
+ animation-delay: -0.7s;
1071
+ }
1072
+
1073
+ @keyframes skeleton-pulse {
1074
+ 0% {
1075
+ background-position: 100% 0;
1076
+ opacity: 0.72;
1077
+ }
1078
+ 100% {
1079
+ background-position: -100% 0;
1080
+ opacity: 1;
1081
+ }
1082
+ }
1083
+ .nb-datagrid__pager {
1084
+ align-items: center;
1085
+ background: var(--surface-1);
1086
+ border: 1px solid var(--border-subtle);
1087
+ border-radius: var(--radius-lg);
1088
+ display: flex;
1089
+ flex: 0 0 auto;
1090
+ flex-wrap: wrap;
1091
+ gap: var(--space-2);
1092
+ justify-content: space-between;
1093
+ margin-top: var(--space-2);
1094
+ min-height: 40px;
1095
+ padding: var(--space-1) var(--space-2);
1096
+ }
1097
+
1098
+ .nb-datagrid__pager-status {
1099
+ align-items: center;
1100
+ display: inline-flex;
1101
+ flex-wrap: wrap;
1102
+ gap: var(--space-2);
1103
+ min-width: 0;
1104
+ }
1105
+
1106
+ .nb-datagrid__pager-info {
1107
+ color: var(--text-secondary);
1108
+ font-size: var(--font-size-xs);
1109
+ font-weight: var(--font-weight-medium);
1110
+ }
1111
+
1112
+ .nb-datagrid__pager-selected,
1113
+ .nb-datagrid__pager-page-status {
1114
+ align-items: center;
1115
+ border-left: 1px solid var(--border-subtle);
1116
+ color: var(--text-tertiary);
1117
+ display: inline-flex;
1118
+ font-size: var(--font-size-xs);
1119
+ min-height: 16px;
1120
+ padding-left: var(--space-2);
1121
+ }
1122
+
1123
+ .nb-datagrid__pager-selected {
1124
+ color: var(--accent-color);
1125
+ font-weight: var(--font-weight-semibold);
1126
+ }
1127
+
1128
+ .nb-datagrid__pager-nav {
1129
+ align-items: center;
1130
+ display: flex;
1131
+ gap: 2px;
1132
+ }
1133
+
1134
+ .nb-datagrid__pager-btn {
1135
+ align-items: center;
1136
+ background: transparent;
1137
+ border: 1px solid transparent;
1138
+ border-radius: var(--radius-sm);
1139
+ color: var(--text-primary);
1140
+ cursor: pointer;
1141
+ display: inline-flex;
1142
+ font: inherit;
1143
+ font-size: var(--font-size-xs);
1144
+ height: 26px;
1145
+ justify-content: center;
1146
+ min-width: 26px;
1147
+ padding: 0 var(--space-1);
1148
+ transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
1149
+ }
1150
+ .nb-datagrid__pager-btn:hover:not(:disabled) {
1151
+ background: color-mix(in srgb, var(--accent-color) 10%, transparent);
1152
+ border-color: color-mix(in srgb, var(--accent-color) 30%, transparent);
1153
+ color: var(--accent-color);
1154
+ }
1155
+ .nb-datagrid__pager-btn.is-current {
1156
+ background: var(--accent-color);
1157
+ border-color: var(--accent-color);
1158
+ box-shadow: 0 1px 2px color-mix(in srgb, var(--accent-color) 32%, transparent);
1159
+ color: var(--on-accent-color);
1160
+ font-weight: var(--font-weight-semibold);
1161
+ }
1162
+ .nb-datagrid__pager-btn:disabled {
1163
+ color: var(--text-disabled);
1164
+ cursor: default;
1165
+ opacity: 0.45;
1166
+ }
1167
+
1168
+ .nb-datagrid__pager-ellipsis {
1169
+ align-items: center;
1170
+ color: var(--text-tertiary);
1171
+ display: inline-flex;
1172
+ font-size: var(--font-size-xs);
1173
+ height: 26px;
1174
+ justify-content: center;
1175
+ width: 20px;
1176
+ }
1177
+
1178
+ .nb-datagrid__summary-footer td {
1179
+ background: var(--surface-0);
1180
+ border-bottom: 0;
1181
+ border-top: 2px solid var(--border-color);
1182
+ color: var(--text-primary);
1183
+ font-size: var(--font-size-xs);
1184
+ font-weight: var(--font-weight-semibold);
1185
+ height: 36px;
1186
+ }
1187
+
1188
+ .nb-datagrid__summary-footer tr {
1189
+ box-shadow: 0 -1px 0 var(--border-color);
1190
+ }
1191
+
1192
+ .nb-datagrid__summary-footer tr,
1193
+ .nb-datagrid__summary-footer td.nb-datagrid__actions-cell,
1194
+ .nb-datagrid__summary-footer td.nb-datagrid__detail-cell,
1195
+ .nb-datagrid__summary-footer td.nb-datagrid__select-cell {
1196
+ background: var(--surface-0);
1197
+ }
1198
+
1199
+ .nb-datagrid__summary-cell {
1200
+ align-items: baseline;
1201
+ display: inline-flex;
1202
+ gap: var(--space-2);
1203
+ min-width: 100%;
1204
+ }
1205
+
1206
+ .nb-datagrid__summary-label {
1207
+ color: var(--text-secondary);
1208
+ font-size: var(--font-size-xxs);
1209
+ font-weight: var(--font-weight-medium);
1210
+ letter-spacing: 0.02em;
1211
+ text-transform: uppercase;
1212
+ }
1213
+
1214
+ .nb-datagrid__summary-value {
1215
+ white-space: nowrap;
1216
+ }
1217
+
1218
+ .nb-datagrid__pager-size {
1219
+ align-items: center;
1220
+ display: flex;
1221
+ gap: var(--space-2);
1222
+ }
1223
+
1224
+ .nb-datagrid__pager-size-label {
1225
+ color: var(--text-tertiary);
1226
+ font-size: var(--font-size-xs);
1227
+ white-space: nowrap;
1228
+ }
1229
+
1230
+ .nb-datagrid__loading-overlay {
1231
+ align-items: center;
1232
+ background: color-mix(in srgb, var(--overlay-bg-subtle) 60%, transparent);
1233
+ display: flex;
1234
+ inset: 0;
1235
+ justify-content: center;
1236
+ position: absolute;
1237
+ z-index: 3;
1238
+ }
1239
+
1240
+ .nb-datagrid__loading-card {
1241
+ align-items: center;
1242
+ background: var(--surface-1);
1243
+ border: 1px solid var(--border-color);
1244
+ border-radius: var(--radius-lg);
1245
+ box-shadow: var(--shadow-md);
1246
+ display: inline-flex;
1247
+ gap: var(--space-2);
1248
+ padding: var(--space-3) var(--space-4);
1249
+ }
1250
+
1251
+ .nb-datagrid__loading-card::before {
1252
+ animation: nb-datagrid-spinner 0.8s linear infinite;
1253
+ border: 2px solid color-mix(in srgb, var(--accent-color) 20%, transparent);
1254
+ border-top-color: var(--accent-color);
1255
+ border-radius: 50%;
1256
+ content: "";
1257
+ height: 14px;
1258
+ width: 14px;
1259
+ }
1260
+
1261
+ @keyframes nb-datagrid-spinner {
1262
+ to {
1263
+ transform: rotate(360deg);
1264
+ }
1265
+ }
1266
+ @media (max-width: 767.98px) {
1267
+ .nb-datagrid__pager {
1268
+ flex-wrap: nowrap;
1269
+ }
1270
+ .nb-datagrid__pager-btn--page,
1271
+ .nb-datagrid__pager-ellipsis,
1272
+ .nb-datagrid__pager-selected,
1273
+ .nb-datagrid__pager-size {
1274
+ display: none;
1275
+ }
1276
+ .nb-datagrid__pager-btn {
1277
+ height: 36px;
1278
+ min-width: 36px;
1279
+ }
1280
+ .nb-datagrid__pager-status {
1281
+ flex-wrap: nowrap;
1282
+ white-space: nowrap;
1283
+ }
1284
+ }
1285
+ .nb-datagrid__cards {
1286
+ -webkit-overflow-scrolling: touch;
1287
+ display: flex;
1288
+ flex: 1 1 auto;
1289
+ flex-direction: column;
1290
+ gap: var(--space-2);
1291
+ list-style: none;
1292
+ margin: 0;
1293
+ min-height: 0;
1294
+ overflow-y: auto;
1295
+ padding: 0;
1296
+ }
1297
+
1298
+ .nb-datagrid__card {
1299
+ background: var(--surface-1);
1300
+ border: 1px solid var(--border-subtle);
1301
+ border-radius: var(--radius-lg);
1302
+ flex: 0 0 auto;
1303
+ overflow: hidden;
1304
+ transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
1305
+ }
1306
+
1307
+ .nb-datagrid__card--selected {
1308
+ background: var(--grid-row-selected-bg, var(--surface-2));
1309
+ border-color: color-mix(in srgb, var(--accent-color) 45%, var(--border-subtle));
1310
+ box-shadow: inset 2px 0 0 var(--grid-row-selected-border, var(--accent-color));
1311
+ }
1312
+
1313
+ .nb-datagrid__card--skeleton {
1314
+ display: flex;
1315
+ flex-direction: column;
1316
+ gap: var(--space-2);
1317
+ padding: var(--space-3);
1318
+ }
1319
+ .nb-datagrid__card--skeleton .nb-datagrid__skeleton-cell {
1320
+ max-width: none;
1321
+ }
1322
+
1323
+ .nb-datagrid__card-body {
1324
+ align-items: flex-start;
1325
+ cursor: pointer;
1326
+ display: flex;
1327
+ gap: var(--space-3);
1328
+ outline: 0;
1329
+ padding: var(--space-3);
1330
+ }
1331
+ .nb-datagrid__card-body:focus-visible {
1332
+ box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-color) 34%, transparent);
1333
+ }
1334
+
1335
+ .nb-datagrid__card-check {
1336
+ flex: 0 0 auto;
1337
+ height: 18px;
1338
+ margin-top: 1px;
1339
+ width: 18px;
1340
+ }
1341
+
1342
+ .nb-datagrid__card-content {
1343
+ flex: 1 1 auto;
1344
+ min-width: 0;
1345
+ }
1346
+
1347
+ .nb-datagrid__card-title {
1348
+ color: var(--text-primary);
1349
+ font-size: var(--font-size-sm);
1350
+ font-weight: var(--font-weight-semibold);
1351
+ margin-bottom: var(--space-1);
1352
+ overflow-wrap: anywhere;
1353
+ }
1354
+
1355
+ .nb-datagrid__card-meta {
1356
+ display: flex;
1357
+ flex-direction: column;
1358
+ gap: 2px;
1359
+ margin: 0;
1360
+ }
1361
+
1362
+ .nb-datagrid__card-meta-row {
1363
+ display: flex;
1364
+ font-size: var(--font-size-xs);
1365
+ gap: var(--space-3);
1366
+ justify-content: space-between;
1367
+ }
1368
+ .nb-datagrid__card-meta-row dt {
1369
+ color: var(--text-tertiary);
1370
+ flex: 0 0 auto;
1371
+ font-weight: var(--font-weight-medium);
1372
+ }
1373
+ .nb-datagrid__card-meta-row dd {
1374
+ color: var(--text-secondary);
1375
+ margin: 0;
1376
+ min-width: 0;
1377
+ overflow-wrap: anywhere;
1378
+ text-align: right;
1379
+ }
1380
+
1381
+ .nb-datagrid__card-side {
1382
+ align-items: center;
1383
+ display: flex;
1384
+ flex: 0 0 auto;
1385
+ flex-direction: column;
1386
+ gap: var(--space-1);
1387
+ }
1388
+
1389
+ .nb-datagrid__card-detail {
1390
+ border-top: 1px solid var(--border-subtle);
1391
+ padding: var(--space-2) var(--space-3);
1392
+ }
1393
+
1394
+ .nb-datagrid__detail-cards {
1395
+ display: flex;
1396
+ flex-direction: column;
1397
+ gap: var(--space-2);
1398
+ }
1399
+
1400
+ .nb-datagrid__detail-card {
1401
+ background: var(--surface-0, var(--surface-2));
1402
+ border: 1px solid var(--border-subtle);
1403
+ border-radius: var(--radius-md, 6px);
1404
+ display: flex;
1405
+ flex-direction: column;
1406
+ gap: 2px;
1407
+ padding: var(--space-2) var(--space-3);
1408
+ }
1409
+
1410
+ .nb-datagrid__detail-card-row {
1411
+ display: flex;
1412
+ font-size: var(--font-size-xs);
1413
+ gap: var(--space-3);
1414
+ justify-content: space-between;
1415
+ }
1416
+
1417
+ .nb-datagrid__detail-card-label {
1418
+ color: var(--text-tertiary);
1419
+ flex: 0 0 auto;
1420
+ font-weight: var(--font-weight-medium);
1421
+ }
1422
+
1423
+ .nb-datagrid__detail-card-value {
1424
+ color: var(--text-secondary);
1425
+ min-width: 0;
1426
+ overflow-wrap: anywhere;
1427
+ text-align: right;
1428
+ }
1429
+
1430
+ .nb-datagrid__card-more {
1431
+ align-items: center;
1432
+ background: transparent;
1433
+ border: 0;
1434
+ color: var(--accent-color);
1435
+ cursor: pointer;
1436
+ display: inline-flex;
1437
+ font: inherit;
1438
+ font-size: var(--font-size-xs);
1439
+ font-weight: var(--font-weight-medium);
1440
+ gap: var(--space-1);
1441
+ margin-top: var(--space-1);
1442
+ padding: var(--space-1) 0;
1443
+ }
1444
+
1445
+ .nb-datagrid__card-summary {
1446
+ background: var(--surface-1);
1447
+ border: 1px solid var(--border-subtle);
1448
+ border-radius: var(--radius-lg);
1449
+ display: flex;
1450
+ flex: 0 0 auto;
1451
+ flex-wrap: wrap;
1452
+ gap: var(--space-2) var(--space-4);
1453
+ justify-content: flex-end;
1454
+ margin-top: var(--space-2);
1455
+ padding: var(--space-2) var(--space-3);
1456
+ }
1457
+
1458
+ .nb-datagrid__card-summary-item {
1459
+ align-items: baseline;
1460
+ display: flex;
1461
+ gap: var(--space-2);
1462
+ }
1463
+
1464
+ .nb-datagrid__mobile-filter {
1465
+ display: inline-flex;
1466
+ position: relative;
1467
+ }
1468
+
1469
+ .nb-datagrid__mobile-filter-badge {
1470
+ align-items: center;
1471
+ background: var(--accent-color);
1472
+ border-radius: 999px;
1473
+ color: var(--text-on-accent, #fff);
1474
+ display: inline-flex;
1475
+ font-size: 10px;
1476
+ font-weight: var(--font-weight-semibold);
1477
+ height: 14px;
1478
+ justify-content: center;
1479
+ min-width: 14px;
1480
+ padding: 0 3px;
1481
+ pointer-events: none;
1482
+ position: absolute;
1483
+ right: -2px;
1484
+ top: -2px;
1485
+ }
1486
+
1487
+ @media (max-width: 767.98px) {
1488
+ .nb-datagrid__toolbar {
1489
+ flex-wrap: wrap;
1490
+ }
1491
+ }
1492
+ .nb-datagrid__sheet-root {
1493
+ inset: 0;
1494
+ position: fixed;
1495
+ z-index: var(--z-popover);
1496
+ }
1497
+
1498
+ .nb-datagrid__sheet-scrim {
1499
+ background: color-mix(in srgb, #000 40%, transparent);
1500
+ border: 0;
1501
+ cursor: default;
1502
+ inset: 0;
1503
+ padding: 0;
1504
+ position: absolute;
1505
+ width: 100%;
1506
+ }
1507
+
1508
+ .nb-datagrid__sheet, .nb-datagrid__row-actions-popover--sheet {
1509
+ animation: nb-datagrid-sheet-in 0.18s ease-out;
1510
+ border-bottom: 0;
1511
+ border-radius: var(--radius-xl, 16px) var(--radius-xl, 16px) 0 0;
1512
+ bottom: 0;
1513
+ left: 0;
1514
+ max-height: 80dvh;
1515
+ position: absolute;
1516
+ right: 0;
1517
+ }
1518
+
1519
+ .nb-datagrid__row-actions-popover--sheet {
1520
+ overflow-y: auto;
1521
+ padding: var(--space-2) var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
1522
+ }
1523
+ .nb-datagrid__row-actions-popover--sheet .nb-datagrid__actions-item {
1524
+ min-height: 44px;
1525
+ }
1526
+
1527
+ .nb-datagrid__sheet {
1528
+ background: var(--surface-elevated);
1529
+ border: 1px solid var(--border-subtle);
1530
+ display: flex;
1531
+ flex-direction: column;
1532
+ }
1533
+
1534
+ .nb-datagrid__sheet-header {
1535
+ align-items: center;
1536
+ border-bottom: 1px solid var(--border-subtle);
1537
+ display: flex;
1538
+ flex: 0 0 auto;
1539
+ justify-content: space-between;
1540
+ padding: var(--space-2) var(--space-3);
1541
+ }
1542
+
1543
+ .nb-datagrid__sheet-title {
1544
+ color: var(--text-primary);
1545
+ font-size: var(--font-size-md);
1546
+ font-weight: var(--font-weight-semibold);
1547
+ }
1548
+
1549
+ .nb-datagrid__sheet-body {
1550
+ display: flex;
1551
+ flex: 1 1 auto;
1552
+ flex-direction: column;
1553
+ gap: var(--space-3);
1554
+ overflow-y: auto;
1555
+ padding: var(--space-3);
1556
+ }
1557
+
1558
+ .nb-datagrid__sheet-field {
1559
+ display: flex;
1560
+ flex-direction: column;
1561
+ gap: var(--space-1);
1562
+ }
1563
+ .nb-datagrid__sheet-field .nb-datagrid__filter-wrap,
1564
+ .nb-datagrid__sheet-field .nb-datagrid__filter-select {
1565
+ background: var(--surface-1);
1566
+ border: 1px solid var(--border-color);
1567
+ border-radius: var(--radius-md, 6px);
1568
+ width: 100%;
1569
+ }
1570
+ .nb-datagrid__sheet-field .nb-datagrid__filter-input,
1571
+ .nb-datagrid__sheet-field .nb-datagrid__filter-date .nb-date-picker__trigger {
1572
+ font-size: var(--font-size-sm);
1573
+ height: 38px;
1574
+ min-height: 38px;
1575
+ }
1576
+
1577
+ .nb-datagrid__sheet-label {
1578
+ color: var(--text-secondary);
1579
+ font-size: var(--font-size-xs);
1580
+ font-weight: var(--font-weight-medium);
1581
+ }
1582
+
1583
+ .nb-datagrid__sheet-sort {
1584
+ align-items: center;
1585
+ display: flex;
1586
+ gap: var(--space-2);
1587
+ }
1588
+ .nb-datagrid__sheet-sort > :first-child {
1589
+ flex: 1 1 auto;
1590
+ }
1591
+
1592
+ .nb-datagrid__sheet-footer {
1593
+ border-top: 1px solid var(--border-subtle);
1594
+ display: flex;
1595
+ flex: 0 0 auto;
1596
+ gap: var(--space-2);
1597
+ justify-content: flex-end;
1598
+ padding: var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
1599
+ }
1600
+
1601
+ @keyframes nb-datagrid-sheet-in {
1602
+ from {
1603
+ transform: translateY(24px);
1604
+ opacity: 0.6;
1605
+ }
1606
+ to {
1607
+ transform: translateY(0);
1608
+ opacity: 1;
1609
+ }
1610
+ }
1611
+ .nb-datagrid__quick-search {
1612
+ align-items: center;
1613
+ background: var(--surface-1);
1614
+ border: 1px solid var(--border-subtle);
1615
+ border-radius: var(--radius-lg);
1616
+ display: flex;
1617
+ flex: 0 0 auto;
1618
+ gap: var(--space-2);
1619
+ margin-bottom: var(--space-2);
1620
+ padding: 0 var(--space-3);
1621
+ }
1622
+
1623
+ .nb-datagrid__quick-search-icon {
1624
+ color: var(--text-tertiary);
1625
+ flex: 0 0 auto;
1626
+ }
1627
+
1628
+ .nb-datagrid__quick-search-input {
1629
+ background: transparent;
1630
+ border: 0;
1631
+ color: var(--text-primary);
1632
+ flex: 1 1 auto;
1633
+ font: inherit;
1634
+ font-size: var(--font-size-sm);
1635
+ height: 40px;
1636
+ min-width: 0;
1637
+ outline: none;
1638
+ }
1639
+ .nb-datagrid__quick-search-input::-webkit-search-cancel-button {
1640
+ display: none;
1641
+ }
1642
+
1643
+ .nb-datagrid__quick-search-clear {
1644
+ align-items: center;
1645
+ background: transparent;
1646
+ border: 0;
1647
+ border-radius: 50%;
1648
+ color: var(--text-tertiary);
1649
+ cursor: pointer;
1650
+ display: inline-flex;
1651
+ flex: 0 0 auto;
1652
+ height: 28px;
1653
+ justify-content: center;
1654
+ width: 28px;
1655
+ }
1656
+ .nb-datagrid__quick-search-clear:hover {
1657
+ background: var(--control-bg-hover);
1658
+ color: var(--text-primary);
1659
+ }
1660
+
1661
+ .nb-datagrid__fab {
1662
+ align-items: center;
1663
+ background: var(--accent-color);
1664
+ border: 0;
1665
+ border-radius: 50%;
1666
+ bottom: calc(64px + env(safe-area-inset-bottom, 0px));
1667
+ box-shadow: var(--shadow-lg, 0 6px 16px rgba(15, 23, 42, 0.28));
1668
+ color: var(--text-on-accent, #fff);
1669
+ cursor: pointer;
1670
+ display: flex;
1671
+ font-size: 22px;
1672
+ height: 52px;
1673
+ justify-content: center;
1674
+ position: fixed;
1675
+ right: var(--space-4);
1676
+ width: 52px;
1677
+ z-index: var(--z-sticky, 30);
1678
+ }
1679
+ .nb-datagrid__fab:disabled {
1680
+ cursor: not-allowed;
1681
+ opacity: 0.55;
1682
+ }
1683
+ .nb-datagrid__fab:active {
1684
+ transform: scale(0.96);
1685
+ }
1686
+
1687
+ .nb-datagrid__sheet-presets .nb-datagrid__preset-control {
1688
+ align-items: stretch;
1689
+ flex-direction: column;
1690
+ margin-left: 0;
1691
+ width: 100%;
1692
+ }
1693
+ .nb-datagrid__sheet-presets .nb-datagrid__preset-segments {
1694
+ width: 100%;
1695
+ }
1696
+
1697
+ @media (max-width: 767.98px) {
1698
+ .nb-datagrid__table-wrap {
1699
+ background: transparent;
1700
+ border: 0;
1701
+ border-radius: 0;
1702
+ box-shadow: none;
1703
+ }
1704
+ }
1705
+ .nb-form__file-upload {
1706
+ display: flex;
1707
+ flex-direction: column;
1708
+ gap: var(--space-1);
1709
+ width: 100%;
1710
+ }
1711
+
1712
+ .nb-form__file-upload-zone {
1713
+ align-items: center;
1714
+ background: var(--surface-1);
1715
+ border: 1px dashed var(--border-color);
1716
+ border-radius: var(--radius-lg);
1717
+ box-sizing: border-box;
1718
+ cursor: pointer;
1719
+ display: flex;
1720
+ justify-content: center;
1721
+ min-height: 112px;
1722
+ overflow: hidden;
1723
+ position: relative;
1724
+ transition: border-color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
1725
+ width: 100%;
1726
+ }
1727
+ .nb-form__file-upload-zone:hover:not(.nb-form__file-upload-zone--disabled):not(.nb-form__file-upload-zone--filled) {
1728
+ background: color-mix(in srgb, var(--accent-color) 4%, var(--surface-1));
1729
+ border-color: var(--accent-color);
1730
+ }
1731
+ .nb-form__file-upload-zone--active {
1732
+ background: color-mix(in srgb, var(--accent-color) 8%, var(--surface-1));
1733
+ border-color: var(--accent-color);
1734
+ }
1735
+ .nb-form__file-upload-zone--filled {
1736
+ border-style: solid;
1737
+ cursor: default;
1738
+ min-height: 88px;
1739
+ }
1740
+ .nb-form__file-upload-zone--uploading {
1741
+ pointer-events: none;
1742
+ }
1743
+ .nb-form__file-upload-zone--disabled {
1744
+ cursor: not-allowed;
1745
+ opacity: 0.72;
1746
+ }
1747
+ .nb-form__file-upload-zone:focus-visible {
1748
+ box-shadow: 0 0 0 3px var(--focus-ring-color);
1749
+ outline: none;
1750
+ }
1751
+
1752
+ .nb-form__file-upload--image .nb-form__file-upload-zone {
1753
+ min-height: 168px;
1754
+ }
1755
+
1756
+ .nb-form__file-upload--image .nb-form__file-upload-zone--filled {
1757
+ min-height: 180px;
1758
+ }
1759
+
1760
+ .nb-form__file-upload--invalid .nb-form__file-upload-zone {
1761
+ border-color: var(--error-color);
1762
+ }
1763
+
1764
+ .nb-form__file-upload-placeholder {
1765
+ align-items: center;
1766
+ display: flex;
1767
+ flex-direction: column;
1768
+ gap: var(--space-2);
1769
+ max-width: 320px;
1770
+ padding: var(--space-4);
1771
+ text-align: center;
1772
+ }
1773
+
1774
+ .nb-form__file-upload-icon {
1775
+ align-items: center;
1776
+ background: color-mix(in srgb, var(--accent-color) 10%, transparent);
1777
+ border-radius: 999px;
1778
+ color: var(--accent-color);
1779
+ display: inline-flex;
1780
+ font-size: 24px;
1781
+ height: 48px;
1782
+ justify-content: center;
1783
+ width: 48px;
1784
+ }
1785
+
1786
+ .nb-form__file-upload-title {
1787
+ color: var(--text-primary);
1788
+ font-size: var(--font-size-sm);
1789
+ font-weight: var(--font-weight-semibold);
1790
+ }
1791
+
1792
+ .nb-form__file-upload-hint {
1793
+ color: var(--text-tertiary);
1794
+ font-size: var(--font-size-xs);
1795
+ line-height: var(--line-height-tight);
1796
+ }
1797
+
1798
+ .nb-form__file-upload-preview {
1799
+ display: block;
1800
+ height: 100%;
1801
+ max-height: 220px;
1802
+ object-fit: contain;
1803
+ width: 100%;
1804
+ }
1805
+
1806
+ .nb-form__file-upload-file {
1807
+ align-items: center;
1808
+ display: flex;
1809
+ gap: var(--space-3);
1810
+ max-width: 100%;
1811
+ padding: var(--space-3) var(--space-4);
1812
+ width: 100%;
1813
+ }
1814
+
1815
+ .nb-form__file-upload-file-icon {
1816
+ align-items: center;
1817
+ background: var(--surface-0);
1818
+ border: 1px solid var(--border-subtle);
1819
+ border-radius: var(--radius-md);
1820
+ color: var(--accent-color);
1821
+ display: inline-flex;
1822
+ flex: 0 0 auto;
1823
+ font-size: 22px;
1824
+ height: 44px;
1825
+ justify-content: center;
1826
+ width: 44px;
1827
+ }
1828
+
1829
+ .nb-form__file-upload-file-meta {
1830
+ display: flex;
1831
+ flex: 1 1 auto;
1832
+ flex-direction: column;
1833
+ gap: 2px;
1834
+ min-width: 0;
1835
+ }
1836
+
1837
+ .nb-form__file-upload-file-name {
1838
+ color: var(--text-primary);
1839
+ font-size: var(--font-size-sm);
1840
+ font-weight: var(--font-weight-medium);
1841
+ overflow: hidden;
1842
+ text-overflow: ellipsis;
1843
+ white-space: nowrap;
1844
+ }
1845
+
1846
+ .nb-form__file-upload-file-link {
1847
+ color: var(--accent-color);
1848
+ font-size: var(--font-size-xs);
1849
+ text-decoration: none;
1850
+ }
1851
+ .nb-form__file-upload-file-link:hover {
1852
+ text-decoration: underline;
1853
+ }
1854
+
1855
+ .nb-form__file-upload-overlay {
1856
+ align-items: center;
1857
+ background: rgba(0, 0, 0, 0.42);
1858
+ color: #fff;
1859
+ display: flex;
1860
+ flex-direction: column;
1861
+ font-size: var(--font-size-sm);
1862
+ gap: var(--space-2);
1863
+ inset: 0;
1864
+ justify-content: center;
1865
+ position: absolute;
1866
+ }
1867
+
1868
+ .nb-form__file-upload-spinner {
1869
+ animation: nb-form-file-spin 700ms linear infinite;
1870
+ border: 2px solid rgba(255, 255, 255, 0.35);
1871
+ border-radius: 999px;
1872
+ border-top-color: #fff;
1873
+ height: 24px;
1874
+ width: 24px;
1875
+ }
1876
+
1877
+ @keyframes nb-form-file-spin {
1878
+ to {
1879
+ transform: rotate(360deg);
1880
+ }
1881
+ }
1882
+ .nb-form__file-upload-actions {
1883
+ align-items: center;
1884
+ background: linear-gradient(to top, rgba(0, 0, 0, 0.58), transparent);
1885
+ bottom: 0;
1886
+ display: flex;
1887
+ gap: var(--space-2);
1888
+ inset-inline: 0;
1889
+ justify-content: center;
1890
+ opacity: 0;
1891
+ padding: var(--space-3);
1892
+ position: absolute;
1893
+ transition: opacity var(--transition-base);
1894
+ }
1895
+
1896
+ .nb-form__file-upload-zone--filled:hover .nb-form__file-upload-actions,
1897
+ .nb-form__file-upload-zone--filled:focus-within .nb-form__file-upload-actions {
1898
+ opacity: 1;
1899
+ }
1900
+
1901
+ .nb-form__file-upload-action {
1902
+ align-items: center;
1903
+ background: var(--surface-1);
1904
+ border: 1px solid var(--border-subtle);
1905
+ border-radius: var(--radius-md);
1906
+ color: var(--text-primary);
1907
+ cursor: pointer;
1908
+ display: inline-flex;
1909
+ font: inherit;
1910
+ font-size: var(--font-size-xs);
1911
+ font-weight: var(--font-weight-medium);
1912
+ gap: var(--space-1);
1913
+ min-height: 28px;
1914
+ padding: 0 var(--space-2);
1915
+ transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
1916
+ }
1917
+ .nb-form__file-upload-action:hover {
1918
+ border-color: var(--accent-color);
1919
+ color: var(--accent-color);
1920
+ }
1921
+ .nb-form__file-upload-action--danger:hover {
1922
+ border-color: var(--error-color);
1923
+ color: var(--error-color);
1924
+ }
1925
+ .nb-form__file-upload-action:focus-visible {
1926
+ box-shadow: 0 0 0 2px var(--focus-ring-color);
1927
+ outline: none;
1928
+ }
1929
+
1930
+ .nb-form__file-upload-error {
1931
+ align-items: center;
1932
+ color: var(--error-color);
1933
+ display: inline-flex;
1934
+ font-size: var(--font-size-xs);
1935
+ gap: var(--space-1);
1936
+ }
1937
+
1938
+ .nb-form {
1939
+ color: var(--text-primary);
1940
+ display: flex;
1941
+ flex-direction: column;
1942
+ gap: var(--space-3);
1943
+ min-height: 0;
1944
+ padding: 20px 24px;
1945
+ }
1946
+
1947
+ .nb-form:has(> .nb-form__tabs),
1948
+ .nb-form--with-detail {
1949
+ padding: 0;
1950
+ }
1951
+
1952
+ .nb-form__master-detail {
1953
+ align-items: stretch;
1954
+ display: grid;
1955
+ gap: var(--space-4);
1956
+ grid-template-columns: minmax(280px, 332px) minmax(560px, 1fr);
1957
+ min-height: 0;
1958
+ }
1959
+
1960
+ .nb-form--with-detail .nb-form__master-detail {
1961
+ overflow: visible;
1962
+ }
1963
+
1964
+ .nb-crud-page-shell__body .nb-form--with-detail {
1965
+ flex: 1 1 auto;
1966
+ min-height: 0;
1967
+ overflow: hidden;
1968
+ }
1969
+
1970
+ .nb-crud-page-shell__body .nb-form__master-detail {
1971
+ flex: 1 1 auto;
1972
+ height: 100%;
1973
+ min-height: 0;
1974
+ overflow: hidden;
1975
+ }
1976
+
1977
+ .nb-form--with-detail .nb-form__master-panel {
1978
+ padding: 0 var(--space-5) 0 var(--space-4);
1979
+ }
1980
+
1981
+ .nb-crud-page-shell__body .nb-form__master-panel {
1982
+ overflow-y: auto;
1983
+ overscroll-behavior: contain;
1984
+ }
1985
+
1986
+ .nb-crud-page-shell__body .nb-form__detail-panel {
1987
+ display: flex;
1988
+ flex: 1 1 auto;
1989
+ flex-direction: column;
1990
+ min-height: 0;
1991
+ }
1992
+
1993
+ .nb-crud-page-shell__body .nb-form__detail {
1994
+ flex: 1 1 auto;
1995
+ height: 100%;
1996
+ max-height: none;
1997
+ min-height: 0;
1998
+ }
1999
+
2000
+ .nb-crud-page-shell__body .nb-form:has(> .nb-form__tabs) {
2001
+ flex: 1 1 auto;
2002
+ min-height: 0;
2003
+ overflow: hidden;
2004
+ }
2005
+
2006
+ .nb-form__master-panel,
2007
+ .nb-form__detail-panel {
2008
+ min-height: 0;
2009
+ min-width: 0;
2010
+ }
2011
+
2012
+ .nb-form__master-panel {
2013
+ display: block;
2014
+ }
2015
+
2016
+ .nb-form__detail-panel {
2017
+ display: flex;
2018
+ }
2019
+
2020
+ .nb-form__grid {
2021
+ display: grid;
2022
+ gap: 16px 18px;
2023
+ grid-template-columns: repeat(12, minmax(0, 1fr));
2024
+ }
2025
+
2026
+ .nb-form__field {
2027
+ display: flex;
2028
+ flex-direction: column;
2029
+ gap: var(--space-1);
2030
+ grid-column: span var(--nb-form-col, 12);
2031
+ min-width: 0;
2032
+ }
2033
+
2034
+ .nb-form__label {
2035
+ color: var(--text-secondary);
2036
+ font-size: 12px;
2037
+ font-weight: 600;
2038
+ letter-spacing: 0.01em;
2039
+ margin-bottom: 6px;
2040
+ }
2041
+
2042
+ .nb-form__hint {
2043
+ color: var(--text-tertiary);
2044
+ font-size: 12px;
2045
+ margin-top: 4px;
2046
+ }
2047
+
2048
+ .nb-form__label--required::after {
2049
+ color: var(--error-color);
2050
+ content: " *";
2051
+ }
2052
+
2053
+ .nb-form__control {
2054
+ background: var(--control-bg);
2055
+ border: 1px solid var(--border-color);
2056
+ border-radius: var(--radius-md);
2057
+ box-sizing: border-box;
2058
+ color: var(--text-primary);
2059
+ font: inherit;
2060
+ font-size: var(--font-size-sm);
2061
+ min-height: var(--control-height-form, 34px);
2062
+ padding: 4px 8px;
2063
+ transition: border-color var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base);
2064
+ width: 100%;
2065
+ }
2066
+
2067
+ .nb-form__control:focus {
2068
+ border-color: var(--accent-color);
2069
+ box-shadow: 0 0 0 2px var(--focus-ring-color);
2070
+ outline: none;
2071
+ }
2072
+
2073
+ .nb-form__control--action {
2074
+ cursor: pointer;
2075
+ }
2076
+
2077
+ .nb-form__control--action[readonly] {
2078
+ opacity: 1;
2079
+ }
2080
+
2081
+ .nb-form__control.is-error {
2082
+ border-color: var(--error-color);
2083
+ }
2084
+ .nb-form__control.is-error:focus {
2085
+ border-color: var(--error-color);
2086
+ box-shadow: 0 0 0 2px color-mix(in srgb, var(--error-color) 20%, transparent);
2087
+ }
2088
+
2089
+ .nb-form__control:disabled {
2090
+ background: color-mix(in srgb, var(--surface-0) 72%, var(--surface-1));
2091
+ cursor: not-allowed;
2092
+ opacity: 0.72;
2093
+ }
2094
+
2095
+ .nb-form__control[readonly]:not(.nb-form__control--action) {
2096
+ background: var(--surface-0);
2097
+ border-color: var(--border-subtle);
2098
+ color: var(--text-primary);
2099
+ cursor: default;
2100
+ font-weight: var(--font-weight-medium);
2101
+ opacity: 1;
2102
+ }
2103
+ .nb-form__control[readonly]:not(.nb-form__control--action):focus {
2104
+ border-color: var(--border-subtle);
2105
+ box-shadow: none;
2106
+ }
2107
+
2108
+ .nb-form__input-group {
2109
+ align-items: stretch;
2110
+ display: flex;
2111
+ position: relative;
2112
+ width: 100%;
2113
+ }
2114
+
2115
+ .nb-form__input-group .nb-form__control {
2116
+ padding-right: 34px;
2117
+ }
2118
+
2119
+ .nb-form__input-actions {
2120
+ align-items: center;
2121
+ bottom: 0;
2122
+ display: flex;
2123
+ position: absolute;
2124
+ right: 0;
2125
+ top: 0;
2126
+ }
2127
+
2128
+ .nb-form__input-button {
2129
+ align-items: center;
2130
+ background: transparent;
2131
+ border: 0;
2132
+ border-radius: var(--radius-sm);
2133
+ color: var(--text-tertiary);
2134
+ cursor: pointer;
2135
+ display: flex;
2136
+ font-size: var(--font-size-md);
2137
+ height: 100%;
2138
+ justify-content: center;
2139
+ padding: 0;
2140
+ transition: color var(--transition-base);
2141
+ width: var(--control-height, 30px);
2142
+ }
2143
+ .nb-form__input-button:hover:not(:disabled) {
2144
+ color: var(--accent-color);
2145
+ }
2146
+ .nb-form__input-button:disabled {
2147
+ cursor: not-allowed;
2148
+ opacity: 0.5;
2149
+ }
2150
+
2151
+ .nb-form__lookup {
2152
+ position: relative;
2153
+ }
2154
+
2155
+ .nb-form__lookup .nb-form__control {
2156
+ padding-right: var(--control-height, 30px);
2157
+ transition: padding-right var(--transition-fast);
2158
+ }
2159
+
2160
+ .nb-form__lookup.has-value .nb-form__control {
2161
+ padding-right: calc(var(--control-height, 30px) + var(--control-icon-size, 20px) + var(--space-1));
2162
+ }
2163
+
2164
+ .nb-form__lookup-toggle,
2165
+ .nb-form__lookup-clear {
2166
+ align-items: center;
2167
+ background: transparent;
2168
+ border: 0;
2169
+ color: var(--text-tertiary);
2170
+ cursor: pointer;
2171
+ display: inline-flex;
2172
+ height: calc(var(--control-icon-size, 20px) + var(--space-1));
2173
+ justify-content: center;
2174
+ padding: 0;
2175
+ position: absolute;
2176
+ top: 50%;
2177
+ transform: translateY(-50%);
2178
+ transition: color var(--transition-base);
2179
+ width: calc(var(--control-icon-size, 20px) + var(--space-1));
2180
+ }
2181
+ .nb-form__lookup-toggle:hover,
2182
+ .nb-form__lookup-clear:hover {
2183
+ color: var(--text-primary);
2184
+ }
2185
+ .nb-form__lookup-toggle:focus-visible,
2186
+ .nb-form__lookup-clear:focus-visible {
2187
+ outline: none;
2188
+ }
2189
+
2190
+ .nb-form__lookup-toggle {
2191
+ right: 4px;
2192
+ }
2193
+
2194
+ .nb-form__lookup-clear {
2195
+ right: 28px;
2196
+ }
2197
+
2198
+ .nb-form__lookup-menu {
2199
+ background: var(--surface-elevated, var(--surface-1));
2200
+ border: 1px solid var(--border-subtle);
2201
+ border-radius: var(--radius-lg);
2202
+ box-shadow: var(--shadow-md);
2203
+ left: 0;
2204
+ margin-top: var(--space-1);
2205
+ max-height: 240px;
2206
+ max-width: min(420px, 100vw - 16px);
2207
+ min-width: 160px;
2208
+ overflow: auto;
2209
+ padding: var(--space-1);
2210
+ position: absolute;
2211
+ right: 0;
2212
+ z-index: 20;
2213
+ }
2214
+
2215
+ .nb-form__lookup-option,
2216
+ .nb-form__lookup-status {
2217
+ border-radius: var(--radius-md);
2218
+ color: var(--text-primary);
2219
+ display: block;
2220
+ font: inherit;
2221
+ font-size: var(--font-size-sm);
2222
+ line-height: 1.35;
2223
+ padding: 7px 9px;
2224
+ text-align: left;
2225
+ text-overflow: ellipsis;
2226
+ white-space: nowrap;
2227
+ width: 100%;
2228
+ }
2229
+
2230
+ .nb-form__lookup-option {
2231
+ background: transparent;
2232
+ border: 0;
2233
+ cursor: pointer;
2234
+ transition: background var(--transition-fast), color var(--transition-fast);
2235
+ }
2236
+ .nb-form__lookup-option:hover {
2237
+ background: var(--control-bg-hover, var(--surface-2));
2238
+ }
2239
+ .nb-form__lookup-option.is-active {
2240
+ background: var(--control-bg-hover, var(--surface-2));
2241
+ }
2242
+ .nb-form__lookup-option[aria-selected=true] {
2243
+ background: color-mix(in srgb, var(--accent-color) 10%, transparent);
2244
+ color: var(--accent-color);
2245
+ font-weight: var(--font-weight-semibold, var(--font-weight-medium));
2246
+ }
2247
+ .nb-form__lookup-option[aria-selected=true]:hover {
2248
+ background: color-mix(in srgb, var(--accent-color) 14%, transparent);
2249
+ }
2250
+ .nb-form__lookup-option[aria-selected=true].is-active {
2251
+ background: color-mix(in srgb, var(--accent-color) 16%, transparent);
2252
+ }
2253
+
2254
+ .nb-form__lookup-status {
2255
+ color: var(--text-tertiary);
2256
+ cursor: default;
2257
+ }
2258
+
2259
+ .nb-form__textarea {
2260
+ min-height: 92px;
2261
+ resize: vertical;
2262
+ }
2263
+
2264
+ .nb-form__checkbox,
2265
+ .nb-form__radio-list {
2266
+ align-items: center;
2267
+ display: flex;
2268
+ gap: var(--space-2);
2269
+ min-height: var(--control-height, 30px);
2270
+ }
2271
+
2272
+ .nb-form__checkbox input,
2273
+ .nb-form__radio-item input {
2274
+ accent-color: var(--accent-color);
2275
+ }
2276
+
2277
+ .nb-form__switch {
2278
+ align-items: center;
2279
+ cursor: pointer;
2280
+ display: inline-flex;
2281
+ gap: var(--space-2);
2282
+ min-height: var(--control-height, 30px);
2283
+ user-select: none;
2284
+ }
2285
+ .nb-form__switch input[type=checkbox] {
2286
+ appearance: none;
2287
+ background: var(--border-color);
2288
+ border-radius: 12px;
2289
+ cursor: pointer;
2290
+ flex-shrink: 0;
2291
+ height: 22px;
2292
+ position: relative;
2293
+ transition: background var(--transition-base);
2294
+ width: 40px;
2295
+ }
2296
+ .nb-form__switch input[type=checkbox]::after {
2297
+ background: var(--surface-elevated);
2298
+ border-radius: 50%;
2299
+ box-shadow: var(--shadow-sm);
2300
+ content: "";
2301
+ height: 16px;
2302
+ left: 3px;
2303
+ position: absolute;
2304
+ top: 3px;
2305
+ transition: transform var(--transition-base);
2306
+ width: 16px;
2307
+ }
2308
+ .nb-form__switch input[type=checkbox]:checked {
2309
+ background: var(--accent-color);
2310
+ }
2311
+ .nb-form__switch input[type=checkbox]:checked::after {
2312
+ transform: translateX(18px);
2313
+ }
2314
+ .nb-form__switch input[type=checkbox]:focus-visible {
2315
+ box-shadow: 0 0 0 2px var(--focus-ring-color);
2316
+ outline: none;
2317
+ }
2318
+ .nb-form__switch input[type=checkbox]:disabled {
2319
+ cursor: not-allowed;
2320
+ opacity: 0.45;
2321
+ }
2322
+
2323
+ .nb-form__toggle-label {
2324
+ color: var(--text-primary);
2325
+ font-size: var(--font-size-sm);
2326
+ font-weight: var(--font-weight-medium);
2327
+ }
2328
+
2329
+ .nb-form__radio-list {
2330
+ flex-wrap: wrap;
2331
+ }
2332
+
2333
+ .nb-form__radio-item {
2334
+ align-items: center;
2335
+ display: inline-flex;
2336
+ gap: var(--space-2);
2337
+ }
2338
+
2339
+ .nb-form__html-preview {
2340
+ background: var(--surface-1);
2341
+ border: 1px solid var(--border-color);
2342
+ border-radius: var(--radius-sm);
2343
+ min-height: 80px;
2344
+ padding: var(--space-3);
2345
+ }
2346
+
2347
+ .nb-form__error {
2348
+ align-items: center;
2349
+ color: var(--error-color);
2350
+ display: flex;
2351
+ font-size: var(--font-size-xs);
2352
+ gap: var(--space-1);
2353
+ }
2354
+ .nb-form__error i {
2355
+ flex: 0 0 auto;
2356
+ font-size: 13px;
2357
+ }
2358
+
2359
+ .nb-form__section {
2360
+ background: transparent;
2361
+ border: 0;
2362
+ border-radius: 0;
2363
+ border-top: 1px solid var(--border-color);
2364
+ display: flex;
2365
+ flex-direction: column;
2366
+ min-height: 0;
2367
+ overflow: visible;
2368
+ padding: 18px 0 22px;
2369
+ }
2370
+
2371
+ .nb-form__section:first-child {
2372
+ border-top: 0;
2373
+ padding-top: 0;
2374
+ }
2375
+
2376
+ .nb-form__detail {
2377
+ background: var(--surface-1);
2378
+ border: 1px solid var(--border-subtle);
2379
+ border-radius: var(--radius-lg);
2380
+ display: flex;
2381
+ flex-direction: column;
2382
+ min-height: 240px;
2383
+ overflow: hidden;
2384
+ padding: 0;
2385
+ }
2386
+
2387
+ .nb-form__tabs {
2388
+ background: transparent;
2389
+ border: 0;
2390
+ border-radius: 0;
2391
+ box-shadow: none;
2392
+ display: flex;
2393
+ flex-direction: column;
2394
+ height: 100%;
2395
+ min-height: 0;
2396
+ overflow: hidden;
2397
+ padding: 0;
2398
+ }
2399
+
2400
+ .nb-form__detail {
2401
+ height: auto;
2402
+ max-height: min(100dvh - 220px, 640px);
2403
+ min-height: 0;
2404
+ width: 100%;
2405
+ }
2406
+
2407
+ .nb-form__section-title {
2408
+ color: var(--text-primary);
2409
+ font-size: 13px;
2410
+ font-weight: 700;
2411
+ margin: 0 0 14px;
2412
+ }
2413
+
2414
+ .nb-form__section--collapsible {
2415
+ padding-bottom: 0;
2416
+ }
2417
+ .nb-form__section--collapsible[open] {
2418
+ padding-bottom: 22px;
2419
+ }
2420
+ .nb-form__section--collapsible[open] .nb-form__section-caret {
2421
+ transform: rotate(0deg);
2422
+ }
2423
+
2424
+ .nb-form__section-summary {
2425
+ align-items: center;
2426
+ cursor: pointer;
2427
+ display: flex;
2428
+ justify-content: space-between;
2429
+ list-style: none;
2430
+ margin-bottom: 0;
2431
+ padding: 2px 0 14px;
2432
+ user-select: none;
2433
+ }
2434
+ .nb-form__section-summary::-webkit-details-marker {
2435
+ display: none;
2436
+ }
2437
+ .nb-form__section-summary:hover .nb-form__section-title {
2438
+ color: var(--accent-color);
2439
+ }
2440
+ .nb-form__section-summary .nb-form__section-title {
2441
+ margin: 0;
2442
+ transition: color var(--transition-fast);
2443
+ }
2444
+
2445
+ .nb-form__section-caret {
2446
+ color: var(--text-tertiary);
2447
+ flex: 0 0 auto;
2448
+ font-size: 12px;
2449
+ transform: rotate(-90deg);
2450
+ transition: transform var(--transition-base);
2451
+ }
2452
+
2453
+ .nb-form__section-body {
2454
+ padding-top: 2px;
2455
+ }
2456
+
2457
+ .nb-form__detail-title {
2458
+ color: var(--text-primary);
2459
+ font-size: var(--font-size-sm);
2460
+ font-weight: var(--font-weight-semibold);
2461
+ margin: 0 0 var(--space-3);
2462
+ }
2463
+
2464
+ .nb-form__detail-heading {
2465
+ align-items: center;
2466
+ background: var(--grid-header-bg, var(--surface-0));
2467
+ border-bottom: 1px solid var(--border-subtle);
2468
+ display: flex;
2469
+ justify-content: space-between;
2470
+ min-height: var(--toolbar-height);
2471
+ padding: 0 var(--space-3);
2472
+ }
2473
+
2474
+ .nb-form__detail-title {
2475
+ margin: 0;
2476
+ }
2477
+
2478
+ .nb-form__tabs-nav {
2479
+ background: transparent;
2480
+ border-bottom: 1px solid var(--border-color);
2481
+ display: flex;
2482
+ flex-wrap: nowrap;
2483
+ gap: var(--space-1);
2484
+ margin-bottom: 0;
2485
+ overflow-x: auto;
2486
+ padding: 0 var(--space-4);
2487
+ scrollbar-width: thin;
2488
+ }
2489
+
2490
+ .nb-form__tab-button {
2491
+ align-items: center;
2492
+ background: transparent;
2493
+ border: 0;
2494
+ border-bottom: 2px solid transparent;
2495
+ border-radius: 0;
2496
+ color: var(--text-secondary);
2497
+ cursor: pointer;
2498
+ display: inline-flex;
2499
+ flex: 0 0 auto;
2500
+ font: inherit;
2501
+ font-size: var(--font-size-md);
2502
+ font-weight: var(--font-weight-medium);
2503
+ gap: var(--space-2);
2504
+ margin-bottom: -1px;
2505
+ min-height: var(--toolbar-height);
2506
+ padding: var(--space-2) var(--space-3);
2507
+ position: relative;
2508
+ transition: border-color var(--transition-base), color var(--transition-base);
2509
+ white-space: nowrap;
2510
+ }
2511
+ .nb-form__tab-button i {
2512
+ flex: 0 0 auto;
2513
+ font-size: 15px;
2514
+ opacity: 0.72;
2515
+ }
2516
+ .nb-form__tab-button:hover:not(.nb-form__tab-button--active) {
2517
+ color: var(--text-primary);
2518
+ }
2519
+ .nb-form__tab-button:hover:not(.nb-form__tab-button--active) i {
2520
+ opacity: 0.9;
2521
+ }
2522
+ .nb-form__tab-button:focus-visible {
2523
+ box-shadow: inset 0 -2px 0 var(--accent-color);
2524
+ outline: none;
2525
+ }
2526
+
2527
+ .nb-form__tab-button--active {
2528
+ border-bottom-color: var(--accent-color);
2529
+ color: var(--text-primary);
2530
+ font-weight: var(--font-weight-semibold);
2531
+ }
2532
+ .nb-form__tab-button--active i {
2533
+ color: var(--accent-color);
2534
+ opacity: 1;
2535
+ }
2536
+
2537
+ .nb-form__tabs-body {
2538
+ background: transparent;
2539
+ flex: 1 1 auto;
2540
+ min-height: 0;
2541
+ overflow: auto;
2542
+ padding: var(--space-5) var(--space-4) var(--space-4);
2543
+ }
2544
+ .nb-form__tabs-body .nb-form__grid {
2545
+ gap: 16px 20px;
2546
+ }
2547
+ .nb-form__tabs-body .nb-form__label {
2548
+ font-size: var(--font-size-xs);
2549
+ font-weight: var(--font-weight-semibold);
2550
+ letter-spacing: 0.02em;
2551
+ margin-bottom: var(--space-1);
2552
+ text-transform: none;
2553
+ }
2554
+ .nb-form__tabs-body .nb-form__file-upload-zone {
2555
+ background: transparent;
2556
+ border-color: var(--border-subtle);
2557
+ min-height: 140px;
2558
+ }
2559
+ .nb-form__tabs-body .nb-form__file-upload-zone:hover:not(.nb-form__file-upload-zone--disabled):not(.nb-form__file-upload-zone--filled) {
2560
+ background: var(--surface-2);
2561
+ border-color: color-mix(in srgb, var(--accent-color) 35%, var(--border-subtle));
2562
+ }
2563
+ .nb-form__tabs-body .nb-form__file-upload-icon {
2564
+ background: var(--surface-2);
2565
+ font-size: 20px;
2566
+ height: 40px;
2567
+ width: 40px;
2568
+ }
2569
+ .nb-form__tabs-body .nb-form__file-upload-title {
2570
+ font-size: var(--font-size-md);
2571
+ font-weight: var(--font-weight-medium);
2572
+ }
2573
+
2574
+ .nb-form__detail-table-wrap {
2575
+ display: flex;
2576
+ flex-direction: column;
2577
+ flex: 1 1 auto;
2578
+ min-height: 0;
2579
+ overflow: hidden;
2580
+ }
2581
+
2582
+ .nb-form__detail-table-scroll {
2583
+ flex: 1 1 auto;
2584
+ min-height: 0;
2585
+ overflow: auto;
2586
+ }
2587
+
2588
+ .nb-form__detail-table {
2589
+ border-collapse: collapse;
2590
+ min-width: 600px;
2591
+ table-layout: fixed;
2592
+ width: 100%;
2593
+ }
2594
+
2595
+ .nb-form__col-actions-col {
2596
+ width: 40px;
2597
+ }
2598
+
2599
+ .nb-form__detail-table thead tr {
2600
+ background: var(--grid-header-bg, var(--surface-0));
2601
+ border-bottom: 1px solid var(--border-subtle);
2602
+ }
2603
+
2604
+ .nb-form__detail-table th {
2605
+ background: var(--grid-header-bg, var(--surface-0));
2606
+ color: var(--text-secondary);
2607
+ font-size: var(--font-size-xs);
2608
+ font-weight: var(--font-weight-semibold);
2609
+ letter-spacing: 0.04em;
2610
+ overflow: hidden;
2611
+ padding: 0 var(--grid-cell-padding-x, 8px);
2612
+ position: sticky;
2613
+ text-align: left;
2614
+ text-overflow: ellipsis;
2615
+ text-transform: uppercase;
2616
+ top: 0;
2617
+ white-space: nowrap;
2618
+ z-index: 3;
2619
+ }
2620
+
2621
+ .nb-form__col-header-text {
2622
+ display: block;
2623
+ overflow: hidden;
2624
+ text-overflow: ellipsis;
2625
+ user-select: none;
2626
+ white-space: nowrap;
2627
+ }
2628
+
2629
+ .nb-form__col-resize {
2630
+ background: transparent;
2631
+ bottom: 0;
2632
+ cursor: col-resize;
2633
+ position: absolute;
2634
+ right: 0;
2635
+ top: 0;
2636
+ transition: background var(--transition-base);
2637
+ width: 4px;
2638
+ z-index: 2;
2639
+ }
2640
+ .nb-form__col-resize:hover {
2641
+ background: var(--accent-color);
2642
+ }
2643
+
2644
+ .nb-form__detail-table th.nb-form__col-actions,
2645
+ .nb-form__detail-table td.nb-form__col-actions {
2646
+ position: sticky;
2647
+ right: 0;
2648
+ text-align: center;
2649
+ width: 40px;
2650
+ z-index: 1;
2651
+ }
2652
+
2653
+ .nb-form__detail-table thead th.nb-form__col-actions {
2654
+ background: var(--grid-header-bg, var(--surface-0));
2655
+ z-index: 2;
2656
+ }
2657
+
2658
+ .nb-form__detail-table tbody td.nb-form__col-actions {
2659
+ background: var(--surface-1);
2660
+ }
2661
+
2662
+ .nb-form__detail-table tbody tr:nth-child(even) td.nb-form__col-actions {
2663
+ background: var(--grid-row-alt-bg);
2664
+ }
2665
+
2666
+ .nb-form__detail-table tbody tr:hover td.nb-form__col-actions {
2667
+ background: color-mix(in srgb, var(--accent-color) 5%, var(--surface-1));
2668
+ }
2669
+
2670
+ .nb-form__detail-table td {
2671
+ border-bottom: 1px solid var(--border-subtle);
2672
+ overflow: visible;
2673
+ padding: 0;
2674
+ position: relative;
2675
+ vertical-align: middle;
2676
+ }
2677
+
2678
+ .nb-form__detail-table tbody tr:nth-child(even) {
2679
+ background: var(--grid-row-alt-bg);
2680
+ }
2681
+
2682
+ .nb-form__detail-table tbody tr:hover {
2683
+ background: var(--grid-row-hover-bg, color-mix(in srgb, var(--accent-color) 5%, transparent));
2684
+ }
2685
+
2686
+ .nb-form__detail-summary td {
2687
+ background: var(--surface-2);
2688
+ border-bottom: 0;
2689
+ border-top: 1px solid var(--border-color);
2690
+ color: var(--text-primary);
2691
+ font-size: var(--font-size-sm);
2692
+ font-weight: var(--font-weight-semibold);
2693
+ min-height: 38px;
2694
+ padding: 8px;
2695
+ vertical-align: middle;
2696
+ }
2697
+
2698
+ .nb-form__detail-summary tr,
2699
+ .nb-form__detail-summary td.nb-form__col-actions,
2700
+ .nb-form__detail-summary tr:nth-child(even),
2701
+ .nb-form__detail-summary tr:nth-child(even) td.nb-form__col-actions,
2702
+ .nb-form__detail-summary tr:hover,
2703
+ .nb-form__detail-summary tr:hover td.nb-form__col-actions {
2704
+ background: var(--surface-2);
2705
+ }
2706
+
2707
+ .nb-form__detail-summary-table tbody td.nb-form__col-actions,
2708
+ .nb-form__detail-summary-table tbody tr:nth-child(even) td.nb-form__col-actions,
2709
+ .nb-form__detail-summary-table tbody tr:hover td.nb-form__col-actions {
2710
+ background: var(--surface-2);
2711
+ }
2712
+
2713
+ .nb-form__detail-summary-wrap {
2714
+ background: var(--surface-2);
2715
+ border-top: 0;
2716
+ flex: 0 0 auto;
2717
+ overflow: hidden;
2718
+ scrollbar-width: none;
2719
+ }
2720
+ .nb-form__detail-summary-wrap::-webkit-scrollbar {
2721
+ display: none;
2722
+ }
2723
+
2724
+ .nb-form__detail-summary-table {
2725
+ background: var(--surface-2);
2726
+ min-width: 600px;
2727
+ }
2728
+
2729
+ .nb-form__detail-summary-cell {
2730
+ align-items: baseline;
2731
+ display: inline-flex;
2732
+ gap: var(--space-2);
2733
+ min-width: 100%;
2734
+ }
2735
+
2736
+ .nb-form__detail-summary-label {
2737
+ color: var(--text-secondary);
2738
+ font-size: var(--font-size-xs);
2739
+ font-weight: var(--font-weight-medium);
2740
+ letter-spacing: 0.02em;
2741
+ text-transform: uppercase;
2742
+ }
2743
+
2744
+ .nb-form__detail-summary-value {
2745
+ color: var(--text-primary);
2746
+ font-size: var(--font-size-md);
2747
+ font-weight: var(--font-weight-bold);
2748
+ white-space: nowrap;
2749
+ }
2750
+
2751
+ .nb-form__detail-table td .nb-form__control,
2752
+ .nb-form__detail-table td input:not([type=checkbox]):not([type=radio]) {
2753
+ background: transparent;
2754
+ border: none;
2755
+ border-radius: 0;
2756
+ box-shadow: none;
2757
+ min-height: var(--row-height);
2758
+ outline: none;
2759
+ padding: 4px var(--grid-cell-padding-x, 8px);
2760
+ transition: background var(--transition-fast), box-shadow var(--transition-fast);
2761
+ width: 100%;
2762
+ }
2763
+ .nb-form__detail-table td .nb-form__control:focus,
2764
+ .nb-form__detail-table td input:not([type=checkbox]):not([type=radio]):focus {
2765
+ background: color-mix(in srgb, var(--accent-color) 8%, var(--surface-1));
2766
+ box-shadow: inset 0 -2px 0 var(--accent-color);
2767
+ outline: none;
2768
+ position: relative;
2769
+ z-index: 1;
2770
+ }
2771
+ .nb-form__detail-table td .nb-form__control:disabled, .nb-form__detail-table td .nb-form__control[readonly],
2772
+ .nb-form__detail-table td input:not([type=checkbox]):not([type=radio]):disabled,
2773
+ .nb-form__detail-table td input:not([type=checkbox]):not([type=radio])[readonly] {
2774
+ background: transparent;
2775
+ color: var(--text-primary);
2776
+ cursor: default;
2777
+ font-weight: var(--font-weight-medium);
2778
+ opacity: 1;
2779
+ }
2780
+
2781
+ .nb-form__detail-table td .nb-form__lookup,
2782
+ .nb-form__detail-table td .nb-form__input-group {
2783
+ display: block;
2784
+ width: 100%;
2785
+ }
2786
+ .nb-form__detail-table td .nb-form__lookup .nb-form__control,
2787
+ .nb-form__detail-table td .nb-form__input-group .nb-form__control {
2788
+ border-radius: 0;
2789
+ }
2790
+
2791
+ .nb-form__detail-table td .nb-form__lookup .nb-form__control {
2792
+ padding-right: var(--control-height, 30px);
2793
+ }
2794
+
2795
+ .nb-form__detail-table td .nb-form__lookup.has-value .nb-form__control {
2796
+ padding-right: calc(var(--control-height, 30px) + var(--control-icon-size, 20px) + var(--space-1));
2797
+ }
2798
+
2799
+ .nb-form__detail-table td .nb-form__control.is-error {
2800
+ box-shadow: inset 0 -2px 0 var(--error-color);
2801
+ }
2802
+
2803
+ .nb-form__detail-table td .nb-form__control,
2804
+ .nb-form__detail-table td input {
2805
+ text-align: inherit;
2806
+ }
2807
+
2808
+ .nb-form__detail-table td .nb-icon-button {
2809
+ align-items: center;
2810
+ display: flex;
2811
+ height: var(--row-height);
2812
+ justify-content: center;
2813
+ min-height: var(--row-height);
2814
+ width: 100%;
2815
+ }
2816
+
2817
+ .nb-form__detail-empty {
2818
+ height: 120px;
2819
+ text-align: center !important;
2820
+ vertical-align: middle !important;
2821
+ }
2822
+
2823
+ .nb-form__detail-empty-icon {
2824
+ color: var(--text-disabled);
2825
+ display: block;
2826
+ font-size: 28px;
2827
+ margin: 0 auto var(--space-2);
2828
+ }
2829
+
2830
+ .nb-form__detail-empty-text {
2831
+ color: var(--text-secondary);
2832
+ display: block;
2833
+ font-size: var(--font-size-sm);
2834
+ font-weight: var(--font-weight-medium);
2835
+ }
2836
+
2837
+ .nb-form__detail-empty-hint {
2838
+ color: var(--text-tertiary);
2839
+ display: block;
2840
+ font-size: var(--font-size-xs);
2841
+ margin-top: var(--space-1);
2842
+ }
2843
+
2844
+ .nb-form__detail-actions {
2845
+ border-top: 1px solid var(--border-subtle);
2846
+ display: flex;
2847
+ justify-content: flex-end;
2848
+ margin-top: 0;
2849
+ padding: var(--space-3);
2850
+ }
2851
+
2852
+ .nb-form__detail-actions .nb-button {
2853
+ min-width: 120px;
2854
+ }
2855
+
2856
+ @media (max-width: 768px) {
2857
+ .nb-form {
2858
+ padding: 16px;
2859
+ }
2860
+ .nb-form__master-detail {
2861
+ grid-template-columns: 1fr;
2862
+ }
2863
+ .nb-form__field {
2864
+ grid-column: span 12 !important;
2865
+ }
2866
+ }
2867
+ .nb-form__field .nb-date-picker__trigger {
2868
+ min-height: var(--control-height-form, 34px);
2869
+ }
2870
+
2871
+ .nb-form__field .nb-date-picker__trigger.nb-date-picker__trigger--open,
2872
+ .nb-form__field .nb-date-picker__trigger:focus-within {
2873
+ min-height: var(--control-height-form, 34px);
2874
+ }
2875
+ .nb-form__file-upload {
2876
+ display: flex;
2877
+ flex-direction: column;
2878
+ gap: var(--space-1);
2879
+ width: 100%;
2880
+ }
2881
+
2882
+ .nb-form__file-upload-zone {
2883
+ align-items: center;
2884
+ background: var(--surface-1);
2885
+ border: 1px dashed var(--border-color);
2886
+ border-radius: var(--radius-lg);
2887
+ box-sizing: border-box;
2888
+ cursor: pointer;
2889
+ display: flex;
2890
+ justify-content: center;
2891
+ min-height: 112px;
2892
+ overflow: hidden;
2893
+ position: relative;
2894
+ transition: border-color var(--transition-base), background var(--transition-base), box-shadow var(--transition-base);
2895
+ width: 100%;
2896
+ }
2897
+ .nb-form__file-upload-zone:hover:not(.nb-form__file-upload-zone--disabled):not(.nb-form__file-upload-zone--filled) {
2898
+ background: color-mix(in srgb, var(--accent-color) 4%, var(--surface-1));
2899
+ border-color: var(--accent-color);
2900
+ }
2901
+ .nb-form__file-upload-zone--active {
2902
+ background: color-mix(in srgb, var(--accent-color) 8%, var(--surface-1));
2903
+ border-color: var(--accent-color);
2904
+ }
2905
+ .nb-form__file-upload-zone--filled {
2906
+ border-style: solid;
2907
+ cursor: default;
2908
+ min-height: 88px;
2909
+ }
2910
+ .nb-form__file-upload-zone--uploading {
2911
+ pointer-events: none;
2912
+ }
2913
+ .nb-form__file-upload-zone--disabled {
2914
+ cursor: not-allowed;
2915
+ opacity: 0.72;
2916
+ }
2917
+ .nb-form__file-upload-zone:focus-visible {
2918
+ box-shadow: 0 0 0 3px var(--focus-ring-color);
2919
+ outline: none;
2920
+ }
2921
+
2922
+ .nb-form__file-upload--image .nb-form__file-upload-zone {
2923
+ min-height: 168px;
2924
+ }
2925
+
2926
+ .nb-form__file-upload--image .nb-form__file-upload-zone--filled {
2927
+ min-height: 180px;
2928
+ }
2929
+
2930
+ .nb-form__file-upload--invalid .nb-form__file-upload-zone {
2931
+ border-color: var(--error-color);
2932
+ }
2933
+
2934
+ .nb-form__file-upload-placeholder {
2935
+ align-items: center;
2936
+ display: flex;
2937
+ flex-direction: column;
2938
+ gap: var(--space-2);
2939
+ max-width: 320px;
2940
+ padding: var(--space-4);
2941
+ text-align: center;
2942
+ }
2943
+
2944
+ .nb-form__file-upload-icon {
2945
+ align-items: center;
2946
+ background: color-mix(in srgb, var(--accent-color) 10%, transparent);
2947
+ border-radius: 999px;
2948
+ color: var(--accent-color);
2949
+ display: inline-flex;
2950
+ font-size: 24px;
2951
+ height: 48px;
2952
+ justify-content: center;
2953
+ width: 48px;
2954
+ }
2955
+
2956
+ .nb-form__file-upload-title {
2957
+ color: var(--text-primary);
2958
+ font-size: var(--font-size-sm);
2959
+ font-weight: var(--font-weight-semibold);
2960
+ }
2961
+
2962
+ .nb-form__file-upload-hint {
2963
+ color: var(--text-tertiary);
2964
+ font-size: var(--font-size-xs);
2965
+ line-height: var(--line-height-tight);
2966
+ }
2967
+
2968
+ .nb-form__file-upload-preview {
2969
+ display: block;
2970
+ height: 100%;
2971
+ max-height: 220px;
2972
+ object-fit: contain;
2973
+ width: 100%;
2974
+ }
2975
+
2976
+ .nb-form__file-upload-file {
2977
+ align-items: center;
2978
+ display: flex;
2979
+ gap: var(--space-3);
2980
+ max-width: 100%;
2981
+ padding: var(--space-3) var(--space-4);
2982
+ width: 100%;
2983
+ }
2984
+
2985
+ .nb-form__file-upload-file-icon {
2986
+ align-items: center;
2987
+ background: var(--surface-0);
2988
+ border: 1px solid var(--border-subtle);
2989
+ border-radius: var(--radius-md);
2990
+ color: var(--accent-color);
2991
+ display: inline-flex;
2992
+ flex: 0 0 auto;
2993
+ font-size: 22px;
2994
+ height: 44px;
2995
+ justify-content: center;
2996
+ width: 44px;
2997
+ }
2998
+
2999
+ .nb-form__file-upload-file-meta {
3000
+ display: flex;
3001
+ flex: 1 1 auto;
3002
+ flex-direction: column;
3003
+ gap: 2px;
3004
+ min-width: 0;
3005
+ }
3006
+
3007
+ .nb-form__file-upload-file-name {
3008
+ color: var(--text-primary);
3009
+ font-size: var(--font-size-sm);
3010
+ font-weight: var(--font-weight-medium);
3011
+ overflow: hidden;
3012
+ text-overflow: ellipsis;
3013
+ white-space: nowrap;
3014
+ }
3015
+
3016
+ .nb-form__file-upload-file-link {
3017
+ color: var(--accent-color);
3018
+ font-size: var(--font-size-xs);
3019
+ text-decoration: none;
3020
+ }
3021
+ .nb-form__file-upload-file-link:hover {
3022
+ text-decoration: underline;
3023
+ }
3024
+
3025
+ .nb-form__file-upload-overlay {
3026
+ align-items: center;
3027
+ background: rgba(0, 0, 0, 0.42);
3028
+ color: #fff;
3029
+ display: flex;
3030
+ flex-direction: column;
3031
+ font-size: var(--font-size-sm);
3032
+ gap: var(--space-2);
3033
+ inset: 0;
3034
+ justify-content: center;
3035
+ position: absolute;
3036
+ }
3037
+
3038
+ .nb-form__file-upload-spinner {
3039
+ animation: nb-form-file-spin 700ms linear infinite;
3040
+ border: 2px solid rgba(255, 255, 255, 0.35);
3041
+ border-radius: 999px;
3042
+ border-top-color: #fff;
3043
+ height: 24px;
3044
+ width: 24px;
3045
+ }
3046
+
3047
+ @keyframes nb-form-file-spin {
3048
+ to {
3049
+ transform: rotate(360deg);
3050
+ }
3051
+ }
3052
+ .nb-form__file-upload-actions {
3053
+ align-items: center;
3054
+ background: linear-gradient(to top, rgba(0, 0, 0, 0.58), transparent);
3055
+ bottom: 0;
3056
+ display: flex;
3057
+ gap: var(--space-2);
3058
+ inset-inline: 0;
3059
+ justify-content: center;
3060
+ opacity: 0;
3061
+ padding: var(--space-3);
3062
+ position: absolute;
3063
+ transition: opacity var(--transition-base);
3064
+ }
3065
+
3066
+ .nb-form__file-upload-zone--filled:hover .nb-form__file-upload-actions,
3067
+ .nb-form__file-upload-zone--filled:focus-within .nb-form__file-upload-actions {
3068
+ opacity: 1;
3069
+ }
3070
+
3071
+ .nb-form__file-upload-action {
3072
+ align-items: center;
3073
+ background: var(--surface-1);
3074
+ border: 1px solid var(--border-subtle);
3075
+ border-radius: var(--radius-md);
3076
+ color: var(--text-primary);
3077
+ cursor: pointer;
3078
+ display: inline-flex;
3079
+ font: inherit;
3080
+ font-size: var(--font-size-xs);
3081
+ font-weight: var(--font-weight-medium);
3082
+ gap: var(--space-1);
3083
+ min-height: 28px;
3084
+ padding: 0 var(--space-2);
3085
+ transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
3086
+ }
3087
+ .nb-form__file-upload-action:hover {
3088
+ border-color: var(--accent-color);
3089
+ color: var(--accent-color);
3090
+ }
3091
+ .nb-form__file-upload-action--danger:hover {
3092
+ border-color: var(--error-color);
3093
+ color: var(--error-color);
3094
+ }
3095
+ .nb-form__file-upload-action:focus-visible {
3096
+ box-shadow: 0 0 0 2px var(--focus-ring-color);
3097
+ outline: none;
3098
+ }
3099
+
3100
+ .nb-form__file-upload-error {
3101
+ align-items: center;
3102
+ color: var(--error-color);
3103
+ display: inline-flex;
3104
+ font-size: var(--font-size-xs);
3105
+ gap: var(--space-1);
3106
+ }
3107
+ .nb-crud-dialog-root {
3108
+ z-index: 2500;
3109
+ }
3110
+
3111
+ .nb-crud-dialog .nb-dialog__header {
3112
+ border-bottom-color: var(--border-color);
3113
+ }
3114
+ .nb-crud-dialog .nb-dialog__title {
3115
+ border-bottom: 0;
3116
+ padding-bottom: 0;
3117
+ }
3118
+ .nb-crud-dialog .nb-dialog__body {
3119
+ overflow: auto;
3120
+ padding: var(--space-4);
3121
+ position: relative;
3122
+ }
3123
+ .nb-crud-dialog .nb-dialog__body:has(.nb-form__tabs) {
3124
+ overflow: hidden;
3125
+ padding: 0;
3126
+ }
3127
+ .nb-crud-dialog.fit-content .nb-dialog__body {
3128
+ padding: 0;
3129
+ }
3130
+ .nb-crud-dialog.fit-content .nb-dialog__body .view-wrapper {
3131
+ margin: 0 !important;
3132
+ padding: 0;
3133
+ }
3134
+
3135
+ .nb-crud-dialog:has(.nb-form--with-detail) {
3136
+ overflow: hidden;
3137
+ }
3138
+ .nb-crud-dialog:has(.nb-form--with-detail) .nb-dialog__body {
3139
+ overflow: auto;
3140
+ }
3141
+
3142
+ .nb-crud-dialog__footer .form-popup-buttons-container {
3143
+ align-items: center;
3144
+ display: flex;
3145
+ gap: var(--space-2);
3146
+ justify-content: flex-end;
3147
+ }
3148
+ .nb-crud-dialog__footer .button-indicator {
3149
+ display: inline-block;
3150
+ height: 1em;
3151
+ margin-right: var(--space-2);
3152
+ vertical-align: middle;
3153
+ width: 1em;
3154
+ }
3155
+
3156
+ .nb-crud-dialog__loading {
3157
+ align-items: center;
3158
+ background: var(--overlay-bg-subtle);
3159
+ display: flex;
3160
+ inset: 0;
3161
+ justify-content: center;
3162
+ position: absolute;
3163
+ z-index: 3;
3164
+ }
3165
+
3166
+ .nb-crud-dialog__loading-indicator {
3167
+ animation: nb-crud-dialog-spin 700ms linear infinite;
3168
+ border: 3px solid rgba(255, 255, 255, 0.3);
3169
+ border-radius: 999px;
3170
+ border-top-color: var(--accent-color);
3171
+ height: 28px;
3172
+ width: 28px;
3173
+ }
3174
+
3175
+ @keyframes nb-crud-dialog-spin {
3176
+ to {
3177
+ transform: rotate(360deg);
3178
+ }
3179
+ }
3180
+ #wrapper.wrapper--with-page,
3181
+ #wrapper:has(> .nb-crud-page-shell) {
3182
+ flex: 1 1 auto;
3183
+ min-height: 0;
3184
+ overflow: hidden;
3185
+ }
3186
+
3187
+ .content:has(#wrapper.wrapper--with-page),
3188
+ .content:has(#wrapper > .nb-crud-page-shell) {
3189
+ overflow: hidden;
3190
+ }
3191
+
3192
+ .nb-crud-page-shell {
3193
+ background: var(--surface-1);
3194
+ display: flex;
3195
+ flex: 1 1 auto;
3196
+ flex-direction: column;
3197
+ min-height: 0;
3198
+ overflow: hidden;
3199
+ width: 100%;
3200
+ }
3201
+
3202
+ .nb-crud-page-shell__header {
3203
+ align-items: center;
3204
+ background: var(--surface-1);
3205
+ border-bottom: 1px solid var(--border-color);
3206
+ display: flex;
3207
+ flex: 0 0 auto;
3208
+ gap: var(--space-2);
3209
+ min-height: var(--toolbar-height);
3210
+ padding: var(--space-2) var(--space-4);
3211
+ position: sticky;
3212
+ top: 0;
3213
+ z-index: 1;
3214
+ }
3215
+
3216
+ .nb-crud-page-shell__back {
3217
+ flex: 0 0 auto;
3218
+ }
3219
+
3220
+ .nb-crud-page-shell__title {
3221
+ color: var(--text-primary);
3222
+ flex: 1;
3223
+ font-size: var(--font-size-md);
3224
+ font-weight: var(--font-weight-semibold);
3225
+ letter-spacing: -0.01em;
3226
+ line-height: var(--line-height-tight);
3227
+ margin: 0;
3228
+ min-width: 0;
3229
+ overflow: hidden;
3230
+ text-overflow: ellipsis;
3231
+ white-space: nowrap;
3232
+ }
3233
+
3234
+ .nb-crud-page-shell__body {
3235
+ flex: 1;
3236
+ min-height: 0;
3237
+ overflow: auto;
3238
+ padding: var(--space-4);
3239
+ }
3240
+
3241
+ .nb-crud-page-shell__body:has(.nb-form--with-detail) {
3242
+ display: flex;
3243
+ flex-direction: column;
3244
+ overflow: hidden;
3245
+ padding: var(--space-4);
3246
+ }
3247
+
3248
+ .nb-crud-page-shell__body:has(.nb-form__tabs) {
3249
+ display: flex;
3250
+ flex-direction: column;
3251
+ overflow: hidden;
3252
+ padding: 0;
3253
+ }
3254
+
3255
+ .nb-crud-page-shell:has(.nb-form--with-detail) .nb-crud-page-shell__header,
3256
+ .nb-crud-page-shell:has(.nb-form--with-detail) .nb-crud-page-shell__footer {
3257
+ position: static;
3258
+ }
3259
+
3260
+ .nb-crud-page-shell__footer {
3261
+ background: var(--surface-1);
3262
+ border-top: 1px solid var(--border-subtle);
3263
+ bottom: 0;
3264
+ display: flex;
3265
+ flex-shrink: 0;
3266
+ gap: var(--space-2);
3267
+ justify-content: flex-end;
3268
+ padding: var(--space-3) var(--space-4);
3269
+ position: sticky;
3270
+ z-index: 1;
3271
+ }
3272
+
3273
+ .nb-crud-page-shell__footer .nb-button {
3274
+ min-height: var(--control-height-form);
3275
+ }
3276
+
3277
+ #wrapper.wrapper--with-page > .data-grid-view,
3278
+ #wrapper.wrapper--with-page > .view.datagrid-list,
3279
+ #wrapper.wrapper--with-page > .nb-bulk-toolbar,
3280
+ #wrapper.wrapper--with-page > .nb-audit-trail-toolbar {
3281
+ display: none;
3282
+ }
3283
+
3284
+ html[data-density=compact] .nb-crud-page-shell__header {
3285
+ min-height: var(--toolbar-height);
3286
+ padding: var(--space-1) var(--space-3);
3287
+ }
3288
+ html[data-density=compact] .nb-crud-page-shell__body {
3289
+ padding: var(--space-3);
3290
+ }
3291
+ html[data-density=compact] .nb-crud-page-shell__footer {
3292
+ gap: var(--space-1);
3293
+ padding: var(--space-2) var(--space-3);
3294
+ }
3295
+ .nb-smart-crud-fallback {
3296
+ display: flex;
3297
+ flex-direction: column;
3298
+ gap: 16px;
3299
+ padding: 24px;
3300
+ }
3301
+
3302
+ .nb-smart-crud-fallback--error {
3303
+ gap: 12px;
3304
+ font-size: 0.875rem;
3305
+ color: var(--text-secondary, #6b7280);
3306
+ }
3307
+ .nb-smart-crud-fallback--error .nb-smart-crud-fallback__title {
3308
+ margin: 0;
3309
+ font-size: 1rem;
3310
+ font-weight: 600;
3311
+ color: var(--text-primary, #111827);
3312
+ }
3313
+ .nb-smart-crud-fallback--error .nb-smart-crud-fallback__message {
3314
+ margin: 0;
3315
+ max-width: 42rem;
3316
+ }
3317
+ .nb-smart-crud-fallback--error .nb-smart-crud-fallback__details {
3318
+ max-width: 42rem;
3319
+ font-size: 0.75rem;
3320
+ }
3321
+ .nb-smart-crud-fallback--error .nb-smart-crud-fallback__details summary {
3322
+ cursor: pointer;
3323
+ }
3324
+ .nb-smart-crud-fallback--error .nb-smart-crud-fallback__details pre {
3325
+ margin-top: 8px;
3326
+ overflow: auto;
3327
+ border: 1px solid var(--base-border-color, #d1d5db);
3328
+ border-radius: 4px;
3329
+ padding: 8px;
3330
+ white-space: pre-wrap;
3331
+ }