@conduction/nextcloud-vue 0.1.0-beta.12 → 0.1.0-beta.14

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 (30) hide show
  1. package/dist/nextcloud-vue.cjs.js +19981 -648
  2. package/dist/nextcloud-vue.cjs.js.map +1 -1
  3. package/dist/nextcloud-vue.css +2314 -342
  4. package/dist/nextcloud-vue.esm.js +19982 -648
  5. package/dist/nextcloud-vue.esm.js.map +1 -1
  6. package/l10n/en.json +255 -2
  7. package/l10n/nl.json +247 -2
  8. package/package.json +2 -1
  9. package/src/components/CnAdvancedFormDialog/CnDataTab.vue +1 -4
  10. package/src/components/CnContextMenu/CnContextMenu.vue +1 -1
  11. package/src/components/CnDataTable/CnDataTable.vue +7 -2
  12. package/src/components/CnInfoWidget/CnInfoWidget.vue +0 -1
  13. package/src/components/CnObjectDataWidget/CnObjectDataWidget.vue +2 -2
  14. package/src/components/CnObjectMetadataWidget/CnObjectMetadataWidget.vue +2 -2
  15. package/src/components/CnRowActions/CnRowActions.vue +1 -1
  16. package/src/components/CnSchemaFormDialog/CnSchemaConfigurationTab.vue +36 -34
  17. package/src/components/CnSchemaFormDialog/CnSchemaFormDialog.vue +47 -36
  18. package/src/components/CnSchemaFormDialog/CnSchemaPropertiesTab.vue +29 -22
  19. package/src/components/CnSchemaFormDialog/CnSchemaPropertyActions.vue +170 -163
  20. package/src/components/CnSchemaFormDialog/CnSchemaSecurityTab.vue +473 -116
  21. package/src/components/CnStatsBlock/CnStatsBlock.vue +18 -18
  22. package/src/components/CnTabbedFormDialog/CnTabbedFormDialog.vue +12 -0
  23. package/src/components/CnWidgetWrapper/CnWidgetWrapper.vue +7 -7
  24. package/src/composables/useContextMenu.js +1 -1
  25. package/src/css/CnSchemaFormDialog.css +258 -2
  26. package/src/css/dashboard.css +1 -0
  27. package/src/css/detail-page.css +5 -5
  28. package/src/css/index.css +1 -0
  29. package/src/css/patches.css +20 -0
  30. package/src/store/plugins/search.js +7 -7
@@ -1,20 +1,1986 @@
1
1
  /* @conduction/nextcloud-vue — Main CSS entry point */
2
- @import './table.css';
3
- @import './card.css';
4
- @import './pagination.css';
5
- @import './detail.css';
6
- @import './badge.css';
7
- @import './layout.css';
8
- @import './utilities.css';
9
- @import './page-header.css';
10
- @import './actions-bar.css';
11
- @import './index-page.css';
12
- @import './index-sidebar.css';
13
- @import './dashboard.css';
14
- @import './detail-page.css';
15
- @import './CnSchemaFormDialog.css';
16
- @import './timeline-stages.css';
17
- @import './context-menu.css';
2
+ /* ========================================
3
+ @conduction/nextcloud-vue — Table Styles
4
+ ======================================== */
5
+ /* Table Container */
6
+ .cn-table-container {
7
+ background: var(--color-main-background);
8
+ border-radius: var(--border-radius);
9
+ overflow-x: auto;
10
+ box-shadow: 0 2px 4px var(--color-box-shadow);
11
+ border: 1px solid var(--color-border);
12
+ margin-bottom: calc(5 * var(--default-grid-baseline));
13
+ }
14
+ .cn-table-container.cn-table-container--scrollable {
15
+ max-height: 400px;
16
+ overflow-y: auto;
17
+ }
18
+ /* Base Table */
19
+ .cn-data-table {
20
+ width: 100%;
21
+ border-collapse: collapse;
22
+ background-color: var(--color-main-background);
23
+ }
24
+ .cn-data-table th,
25
+ .cn-data-table td {
26
+ padding: calc(3 * var(--default-grid-baseline));
27
+ text-align: left;
28
+ border-bottom: 1px solid var(--color-border);
29
+ vertical-align: middle;
30
+ }
31
+ .cn-data-table th {
32
+ background: var(--color-background-dark);
33
+ font-weight: 500;
34
+ color: var(--color-text-maxcontrast);
35
+ }
36
+ .cn-data-table th.cn-table-header--sortable {
37
+ cursor: pointer;
38
+ user-select: none;
39
+ transition: background-color var(--animation-quick) ease;
40
+ }
41
+ .cn-data-table th.cn-table-header--sortable:hover {
42
+ background-color: var(--color-background-hover);
43
+ }
44
+ .cn-table-sort-indicator {
45
+ margin-left: var(--default-grid-baseline);
46
+ opacity: 0.6;
47
+ }
48
+ /* Row States */
49
+ .cn-table-row {
50
+ border-bottom: 1px solid var(--color-border);
51
+ cursor: pointer;
52
+ transition: background-color var(--animation-quick) ease;
53
+ }
54
+ .cn-table-row:hover {
55
+ background: var(--color-background-hover);
56
+ }
57
+ .cn-table-row--selected {
58
+ background-color: var(--color-primary-light);
59
+ box-shadow: inset 3px 0 0 0 var(--color-primary);
60
+ }
61
+ .cn-table-row--selected:hover {
62
+ background-color: var(--color-primary-light);
63
+ }
64
+ /* Column Types */
65
+ .cn-table-col--checkbox {
66
+ width: 50px;
67
+ text-align: center;
68
+ }
69
+ .cn-table-col--actions {
70
+ width: 120px;
71
+ text-align: center;
72
+ min-width: 120px;
73
+ }
74
+ .cn-table-col--constrained {
75
+ width: 150px;
76
+ max-width: 150px;
77
+ overflow: hidden;
78
+ text-overflow: ellipsis;
79
+ white-space: nowrap;
80
+ }
81
+ .cn-table-col--expanded {
82
+ width: auto;
83
+ min-width: 200px;
84
+ }
85
+ .cn-table-col--title {
86
+ min-width: 120px;
87
+ max-width: 200px;
88
+ word-wrap: break-word;
89
+ overflow: hidden;
90
+ }
91
+ /* Loading State */
92
+ .cn-table-loading {
93
+ text-align: center;
94
+ padding: calc(12 * var(--default-grid-baseline));
95
+ }
96
+ .cn-table-loading p {
97
+ margin-top: calc(5 * var(--default-grid-baseline));
98
+ color: var(--color-text-maxcontrast);
99
+ }
100
+ /* Empty State (inside table) */
101
+ .cn-table-empty td {
102
+ text-align: center;
103
+ padding: calc(12 * var(--default-grid-baseline)) calc(6 * var(--default-grid-baseline));
104
+ color: var(--color-text-maxcontrast);
105
+ }
106
+ /* ========================================
107
+ Backwards compatibility aliases
108
+ (legacy OpenRegister CSS class names)
109
+ ======================================== */
110
+ .viewTableContainer { background: var(--color-main-background); border-radius: var(--border-radius); overflow-x: hidden; overflow-y: visible; box-shadow: 0 2px 4px var(--color-box-shadow); border: 1px solid var(--color-border); margin-bottom: calc(5 * var(--default-grid-baseline)); }
111
+ .viewTableContainer.scrollable { max-height: 400px; overflow-y: auto; }
112
+ .viewTable { width: 100%; border-collapse: collapse; background-color: var(--color-main-background); }
113
+ .viewTable th, .viewTable td { padding: calc(3 * var(--default-grid-baseline)); text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
114
+ .viewTable th { background: var(--color-background-hover); font-weight: 500; color: var(--color-text-maxcontrast); background-color: var(--color-background-dark); }
115
+ .viewTableRow { border-bottom: 1px solid var(--color-border); cursor: pointer; transition: background-color var(--animation-quick) ease; }
116
+ .viewTableRow:hover { background: var(--color-background-hover); }
117
+ .viewTableRow.active, .viewTableRowSelected { background: var(--color-primary-light); }
118
+ .tableColumnCheckbox { width: 50px; text-align: center; }
119
+ .tableColumnActions { width: 120px; text-align: center; min-width: 120px; }
120
+ .tableColumnConstrained { width: 150px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
121
+ .tableColumnExpanded { width: auto; min-width: 200px; }
122
+ .tableColumnTitle { min-width: 120px; max-width: 200px; word-wrap: break-word; overflow: hidden; }
123
+ /* ========================================
124
+ @conduction/nextcloud-vue — Card Styles
125
+ ======================================== */
126
+ /* Card Grid */
127
+ .cn-card-grid {
128
+ display: grid;
129
+ gap: calc(4 * var(--default-grid-baseline));
130
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
131
+ padding: 0.25rem;
132
+ }
133
+ /* Base Card */
134
+ .cn-card {
135
+ background: var(--color-main-background);
136
+ border-radius: var(--border-radius-large);
137
+ padding: calc(5 * var(--default-grid-baseline));
138
+ box-shadow: 0 2px 8px var(--color-box-shadow);
139
+ min-height: 200px;
140
+ transition: transform var(--animation-quick) ease-in-out;
141
+ border: 1px solid var(--color-border);
142
+ }
143
+ .cn-card:hover {
144
+ transform: scale(1.01);
145
+ box-shadow: 0 4px 12px var(--color-box-shadow);
146
+ }
147
+ /* Card Header */
148
+ .cn-card-header {
149
+ display: flex;
150
+ align-items: center;
151
+ justify-content: space-between;
152
+ gap: calc(2 * var(--default-grid-baseline));
153
+ margin-bottom: calc(3 * var(--default-grid-baseline));
154
+ padding-bottom: calc(2 * var(--default-grid-baseline));
155
+ border-bottom: 1px solid var(--color-border);
156
+ }
157
+ .cn-card-header h2,
158
+ .cn-card-header h3 {
159
+ display: flex;
160
+ align-items: center;
161
+ gap: calc(2 * var(--default-grid-baseline));
162
+ margin: 0;
163
+ color: var(--color-main-text);
164
+ }
165
+ .cn-card-header h2 { font-size: 1.2em; }
166
+ .cn-card-header h3 { font-size: 1.1em; }
167
+ /* Settings Card */
168
+ .cn-settings-card {
169
+ background: var(--color-background-hover);
170
+ border-radius: var(--border-radius-large);
171
+ padding: calc(5 * var(--default-grid-baseline));
172
+ margin-bottom: calc(5 * var(--default-grid-baseline));
173
+ }
174
+ .cn-settings-card h4 {
175
+ margin: 0 0 calc(4 * var(--default-grid-baseline)) 0;
176
+ color: var(--color-main-text);
177
+ font-size: 16px;
178
+ font-weight: 600;
179
+ display: flex;
180
+ align-items: center;
181
+ gap: calc(2 * var(--default-grid-baseline));
182
+ }
183
+ .cn-settings-card--collapsible h4 {
184
+ cursor: pointer;
185
+ user-select: none;
186
+ display: flex;
187
+ justify-content: space-between;
188
+ align-items: center;
189
+ transition: color var(--animation-quick) ease;
190
+ margin-bottom: 0;
191
+ }
192
+ .cn-settings-card--collapsible h4:hover {
193
+ color: var(--color-primary-element);
194
+ }
195
+ .cn-settings-card__chevron {
196
+ transition: transform var(--animation-slow) ease;
197
+ color: var(--color-text-maxcontrast);
198
+ }
199
+ .cn-settings-card--collapsible h4:hover .cn-settings-card__chevron {
200
+ color: var(--color-primary-element);
201
+ }
202
+ .cn-settings-card__content {
203
+ padding-top: calc(4 * var(--default-grid-baseline));
204
+ }
205
+ /* Stat Grid */
206
+ .cn-stat-grid {
207
+ display: grid;
208
+ grid-template-columns: repeat(2, 1fr);
209
+ gap: calc(3 * var(--default-grid-baseline));
210
+ margin-bottom: calc(4 * var(--default-grid-baseline));
211
+ }
212
+ .cn-stat-item {
213
+ display: flex;
214
+ flex-direction: column;
215
+ gap: var(--default-grid-baseline);
216
+ }
217
+ .cn-stat-label {
218
+ color: var(--color-text-maxcontrast);
219
+ font-size: 0.9em;
220
+ }
221
+ .cn-stat-value {
222
+ font-size: 1.1em;
223
+ font-weight: 600;
224
+ }
225
+ /* Backwards compatibility aliases */
226
+ .cardGrid { display: grid; gap: calc(4 * var(--default-grid-baseline)); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
227
+ .card { background: var(--color-main-background); border-radius: var(--border-radius-large); padding: calc(5 * var(--default-grid-baseline)); box-shadow: 0 2px 8px var(--color-box-shadow); min-height: 200px; transition: transform var(--animation-quick) ease-in-out; border: 1px solid var(--color-border); }
228
+ .card:hover { transform: scale(1.01); box-shadow: 0 4px 12px var(--color-box-shadow); }
229
+ .cardHeader { display: flex; align-items: center; justify-content: space-between; gap: calc(2 * var(--default-grid-baseline)); margin-bottom: calc(3 * var(--default-grid-baseline)); padding-bottom: calc(2 * var(--default-grid-baseline)); border-bottom: 1px solid var(--color-border); }
230
+ .statGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(3 * var(--default-grid-baseline)); margin-bottom: calc(4 * var(--default-grid-baseline)); }
231
+ .statItem { display: flex; flex-direction: column; gap: var(--default-grid-baseline); }
232
+ .statLabel { color: var(--color-text-maxcontrast); font-size: 0.9em; }
233
+ .statValue { font-size: 1.1em; font-weight: 600; }
234
+ /* ========================================
235
+ @conduction/nextcloud-vue — Pagination
236
+ ======================================== */
237
+ .cn-pagination {
238
+ display: flex;
239
+ justify-content: space-between;
240
+ align-items: center;
241
+ gap: calc(4 * var(--default-grid-baseline));
242
+ margin-top: calc(8 * var(--default-grid-baseline));
243
+ padding: calc(5 * var(--default-grid-baseline));
244
+ flex-wrap: nowrap;
245
+ }
246
+ .cn-pagination__info {
247
+ display: flex;
248
+ align-items: center;
249
+ flex-shrink: 0;
250
+ }
251
+ .cn-pagination__page-info {
252
+ color: var(--color-text-maxcontrast);
253
+ font-size: 0.9rem;
254
+ }
255
+ .cn-pagination__nav {
256
+ display: flex;
257
+ align-items: center;
258
+ gap: calc(2 * var(--default-grid-baseline));
259
+ flex-grow: 1;
260
+ justify-content: center;
261
+ }
262
+ .cn-pagination__numbers {
263
+ display: flex;
264
+ align-items: center;
265
+ gap: var(--default-grid-baseline);
266
+ }
267
+ .cn-pagination__ellipsis {
268
+ padding: 0 var(--default-grid-baseline);
269
+ color: var(--color-text-maxcontrast);
270
+ font-size: 0.9rem;
271
+ }
272
+ .cn-pagination__page-size {
273
+ display: flex;
274
+ align-items: center;
275
+ gap: calc(2 * var(--default-grid-baseline));
276
+ flex-shrink: 0;
277
+ min-width: 0;
278
+ }
279
+ .cn-pagination__page-size label {
280
+ font-size: 0.9rem;
281
+ color: var(--color-text-maxcontrast);
282
+ white-space: nowrap;
283
+ }
284
+ .cn-pagination__page-size-select {
285
+ min-width: 100px !important;
286
+ max-width: 120px !important;
287
+ }
288
+ /* Backwards compatibility aliases */
289
+ .viewPagination { display: flex; justify-content: space-between; align-items: center; gap: calc(4 * var(--default-grid-baseline)); margin-top: calc(8 * var(--default-grid-baseline)); padding: calc(5 * var(--default-grid-baseline)); flex-wrap: nowrap; }
290
+ .viewPaginationInfo { display: flex; align-items: center; flex-shrink: 0; }
291
+ .viewPageInfo { color: var(--color-text-maxcontrast); font-size: 0.9rem; }
292
+ .viewPaginationNav { display: flex; align-items: center; gap: calc(2 * var(--default-grid-baseline)); flex-grow: 1; justify-content: center; }
293
+ .viewPaginationNumbers { display: flex; align-items: center; gap: var(--default-grid-baseline); }
294
+ .viewPaginationEllipsis { padding: 0 var(--default-grid-baseline); color: var(--color-text-maxcontrast); font-size: 0.9rem; }
295
+ .viewPaginationPageSize { display: flex; align-items: center; gap: calc(2 * var(--default-grid-baseline)); flex-shrink: 0; min-width: 0; }
296
+ /* ========================================
297
+ @conduction/nextcloud-vue — Detail Grid & Layout Utility Styles
298
+ ======================================== */
299
+ /* Detail Grid (metadata display) */
300
+ .cn-detail-grid {
301
+ display: grid;
302
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
303
+ gap: calc(4 * var(--default-grid-baseline));
304
+ margin-bottom: calc(5 * var(--default-grid-baseline));
305
+ }
306
+ .cn-detail-item {
307
+ display: flex;
308
+ flex-direction: column;
309
+ gap: var(--default-grid-baseline);
310
+ padding: calc(2 * var(--default-grid-baseline)) calc(3 * var(--default-grid-baseline));
311
+ border-left: 3px solid var(--color-primary-element);
312
+ background: var(--color-background-hover);
313
+ border-radius: 0 var(--border-radius) var(--border-radius) 0;
314
+ }
315
+ .cn-detail-item__label {
316
+ font-size: 0.85em;
317
+ color: var(--color-text-maxcontrast);
318
+ font-weight: 500;
319
+ }
320
+ .cn-detail-item__value {
321
+ font-size: 1em;
322
+ color: var(--color-main-text);
323
+ word-break: break-word;
324
+ }
325
+ /* Detail Layout */
326
+ .cn-detail-layout {
327
+ max-width: 1000px;
328
+ padding: calc(5 * var(--default-grid-baseline));
329
+ }
330
+ .cn-detail-layout__header {
331
+ display: flex;
332
+ align-items: center;
333
+ gap: calc(3 * var(--default-grid-baseline));
334
+ margin-bottom: calc(6 * var(--default-grid-baseline));
335
+ }
336
+ .cn-detail-layout__title {
337
+ flex: 1;
338
+ margin: 0;
339
+ font-size: 1.5em;
340
+ color: var(--color-main-text);
341
+ }
342
+ .cn-detail-layout__actions {
343
+ display: flex;
344
+ gap: calc(2 * var(--default-grid-baseline));
345
+ flex-shrink: 0;
346
+ }
347
+ .cn-detail-layout__content {
348
+ margin-top: calc(4 * var(--default-grid-baseline));
349
+ }
350
+ /* Backwards compatibility aliases */
351
+ .detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: calc(4 * var(--default-grid-baseline)); margin-bottom: calc(5 * var(--default-grid-baseline)); }
352
+ .detail-item { display: flex; flex-direction: column; gap: var(--default-grid-baseline); padding: calc(2 * var(--default-grid-baseline)) calc(3 * var(--default-grid-baseline)); border-left: 3px solid var(--color-primary-element); background: var(--color-background-hover); border-radius: 0 var(--border-radius) var(--border-radius) 0; }
353
+ .detailContainer { margin-block-start: calc(5 * var(--default-grid-baseline)); margin-inline-start: calc(5 * var(--default-grid-baseline)); margin-inline-end: calc(5 * var(--default-grid-baseline)); }
354
+ /* ========================================
355
+ @conduction/nextcloud-vue — Status Badge
356
+ ======================================== */
357
+ .cn-status-badge {
358
+ display: inline-flex;
359
+ align-items: center;
360
+ gap: calc(0.5 * var(--default-grid-baseline));
361
+ padding: calc(0.5 * var(--default-grid-baseline)) calc(2.5 * var(--default-grid-baseline));
362
+ border-radius: var(--border-radius-pill);
363
+ font-size: 0.85em;
364
+ font-weight: 500;
365
+ line-height: 1.4;
366
+ white-space: nowrap;
367
+ }
368
+ /* Size variants */
369
+ .cn-status-badge--small {
370
+ padding: calc(0.25 * var(--default-grid-baseline)) calc(2 * var(--default-grid-baseline));
371
+ font-size: 0.75em;
372
+ }
373
+ /* Color variants */
374
+ .cn-status-badge--default {
375
+ background-color: var(--color-background-dark);
376
+ color: var(--color-main-text);
377
+ }
378
+ .cn-status-badge--primary {
379
+ background-color: var(--color-primary-element-light);
380
+ color: var(--color-primary-element);
381
+ }
382
+ .cn-status-badge--success {
383
+ background-color: var(--color-success-light, rgba(70, 186, 97, 0.15));
384
+ color: var(--color-success);
385
+ }
386
+ .cn-status-badge--warning {
387
+ background-color: var(--color-warning-light, rgba(232, 163, 39, 0.15));
388
+ color: var(--color-warning-text, var(--color-warning));
389
+ }
390
+ .cn-status-badge--error {
391
+ background-color: var(--color-error-light, rgba(224, 68, 68, 0.15));
392
+ color: var(--color-error);
393
+ }
394
+ .cn-status-badge--info {
395
+ background-color: var(--color-info-light, rgba(0, 130, 201, 0.15));
396
+ color: var(--color-info, #0082c9);
397
+ }
398
+ /* Solid variants — solid background with white text for use on colored backgrounds */
399
+ .cn-status-badge--solid.cn-status-badge--default {
400
+ background-color: var(--color-background-dark);
401
+ color: var(--color-main-text);
402
+ }
403
+ .cn-status-badge--solid.cn-status-badge--primary {
404
+ background-color: var(--color-primary-element);
405
+ color: white;
406
+ }
407
+ .cn-status-badge--solid.cn-status-badge--success {
408
+ background-color: var(--color-success);
409
+ color: white;
410
+ }
411
+ .cn-status-badge--solid.cn-status-badge--warning {
412
+ background-color: var(--color-warning);
413
+ color: var(--color-primary-text);
414
+ }
415
+ .cn-status-badge--solid.cn-status-badge--error {
416
+ background-color: var(--color-error);
417
+ color: white;
418
+ }
419
+ .cn-status-badge--solid.cn-status-badge--info {
420
+ background-color: var(--color-info, #0082c9);
421
+ color: white;
422
+ }
423
+ /* ========================================
424
+ @conduction/nextcloud-vue — Layout & Filter Utility Styles
425
+ ======================================== */
426
+ /* List View Layout */
427
+ .cn-list-layout {
428
+ padding: calc(5 * var(--default-grid-baseline));
429
+ }
430
+ .cn-list-layout__header {
431
+ display: flex;
432
+ align-items: center;
433
+ justify-content: space-between;
434
+ margin-bottom: calc(4 * var(--default-grid-baseline));
435
+ }
436
+ .cn-list-layout__title {
437
+ display: flex;
438
+ align-items: baseline;
439
+ gap: calc(2 * var(--default-grid-baseline));
440
+ }
441
+ .cn-list-layout__title h2 {
442
+ margin: 0;
443
+ font-size: 1.4em;
444
+ color: var(--color-main-text);
445
+ }
446
+ .cn-list-layout__title .cn-list-layout__count {
447
+ font-size: 0.85em;
448
+ color: var(--color-text-maxcontrast);
449
+ }
450
+ .cn-list-layout__actions {
451
+ display: flex;
452
+ gap: calc(2 * var(--default-grid-baseline));
453
+ }
454
+ /* Filter Bar */
455
+ .cn-filter-bar {
456
+ display: flex;
457
+ align-items: center;
458
+ gap: calc(3 * var(--default-grid-baseline));
459
+ margin-bottom: calc(4 * var(--default-grid-baseline));
460
+ flex-wrap: wrap;
461
+ }
462
+ .cn-filter-bar__search {
463
+ flex: 1;
464
+ min-width: 200px;
465
+ max-width: 400px;
466
+ }
467
+ .cn-filter-bar__filters {
468
+ display: flex;
469
+ align-items: center;
470
+ gap: calc(2 * var(--default-grid-baseline));
471
+ flex-wrap: wrap;
472
+ }
473
+ .cn-filter-bar__filter {
474
+ min-width: 150px;
475
+ max-width: 200px;
476
+ }
477
+ .cn-filter-bar__clear {
478
+ margin-left: auto;
479
+ }
480
+ /* Dashboard Content */
481
+ .cn-dashboard-content {
482
+ margin-inline: auto;
483
+ max-width: 1200px;
484
+ padding-block: calc(5 * var(--default-grid-baseline));
485
+ padding-inline: calc(5 * var(--default-grid-baseline));
486
+ }
487
+ /* Loading Container */
488
+ .cn-loading-container {
489
+ display: flex;
490
+ align-items: center;
491
+ gap: calc(2 * var(--default-grid-baseline));
492
+ color: var(--color-text-maxcontrast);
493
+ justify-content: center;
494
+ padding-block: calc(10 * var(--default-grid-baseline));
495
+ }
496
+ /* Backwards compatibility aliases */
497
+ .dashboardContent { margin-inline: auto; max-width: 1200px; padding-block: calc(5 * var(--default-grid-baseline)); padding-inline: calc(5 * var(--default-grid-baseline)); }
498
+ .loadingContainer { display: flex; align-items: center; gap: calc(2 * var(--default-grid-baseline)); color: var(--color-text-maxcontrast); justify-content: center; padding-block: calc(10 * var(--default-grid-baseline)); }
499
+ /* ========================================
500
+ @conduction/nextcloud-vue — Utilities
501
+ ======================================== */
502
+ /* Text Utilities */
503
+ .cn-text-ellipsis {
504
+ overflow: hidden;
505
+ text-overflow: ellipsis;
506
+ white-space: nowrap;
507
+ }
508
+ .cn-text-description {
509
+ font-size: 0.9em;
510
+ color: var(--color-text-maxcontrast);
511
+ }
512
+ .cn-text-success { color: var(--color-success); }
513
+ .cn-text-error { color: var(--color-error); }
514
+ .cn-text-warning { color: var(--color-warning); }
515
+ .cn-text-muted { color: var(--color-text-maxcontrast); }
516
+ /* Vue Transition Animations */
517
+ .cn-slide-fade-enter-active {
518
+ transition: all var(--animation-slow) cubic-bezier(0.4, 0, 0.2, 1);
519
+ }
520
+ .cn-slide-fade-leave-active {
521
+ transition: all var(--animation-quick) cubic-bezier(0.4, 0, 1, 1);
522
+ }
523
+ .cn-slide-fade-enter,
524
+ .cn-slide-fade-enter-from {
525
+ transform: translateY(-10px);
526
+ opacity: 0;
527
+ }
528
+ .cn-slide-fade-leave-to {
529
+ transform: translateY(-5px);
530
+ opacity: 0;
531
+ }
532
+ /* Backwards compatibility aliases */
533
+ .textEllipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
534
+ .textDescription { font-size: 0.9em; color: var(--color-text-maxcontrast); }
535
+ .successMessage { color: var(--color-success); }
536
+ .errorMessage { color: var(--color-error); }
537
+ /* CnPageHeader — Reusable page header styles */
538
+ .cn-page-header {
539
+ display: flex;
540
+ align-items: flex-start;
541
+ gap: calc(3 * var(--default-grid-baseline));
542
+ margin-bottom: calc(4 * var(--default-grid-baseline));
543
+ /* Clear the Nextcloud navigation toggle button (44px wide, absolutely positioned) */
544
+ padding-left: 44px;
545
+ }
546
+ .cn-page-header__icon {
547
+ flex-shrink: 0;
548
+ display: flex;
549
+ align-items: center;
550
+ padding-top: var(--default-grid-baseline);
551
+ color: var(--color-primary);
552
+ }
553
+ .cn-page-header__text {
554
+ flex: 1;
555
+ min-width: 0;
556
+ }
557
+ .cn-page-header__title {
558
+ margin: 0 0 var(--default-grid-baseline) 0;
559
+ font-size: 2rem;
560
+ font-weight: 300;
561
+ }
562
+ .cn-page-header__description {
563
+ color: var(--color-text-maxcontrast);
564
+ margin: 0;
565
+ font-size: var(--default-font-size);
566
+ }
567
+ /* CnActionsBar — Reusable actions toolbar styles */
568
+ .cn-actions-bar {
569
+ display: flex;
570
+ justify-content: space-between;
571
+ align-items: center;
572
+ margin-bottom: calc(5 * var(--default-grid-baseline));
573
+ padding: calc(2 * var(--default-grid-baseline));
574
+ background: var(--color-background-hover);
575
+ border-radius: var(--border-radius);
576
+ }
577
+ .cn-actions-bar__info {
578
+ font-weight: 500;
579
+ font-size: var(--default-font-size);
580
+ }
581
+ .cn-actions-bar__count {
582
+ color: var(--color-text-maxcontrast);
583
+ }
584
+ .cn-actions-bar__actions {
585
+ display: flex;
586
+ align-items: center;
587
+ gap: calc(2 * var(--default-grid-baseline));
588
+ }
589
+ .cn-actions-bar__actions .button-vue {
590
+ /* fix issue when adding custom content, button gets squished when not needed */
591
+ /* this is a quick and dirty fix and its possible that this will caused issue of its own when there are too many buttons */
592
+ min-width: fit-content !important;
593
+ }
594
+ /* View mode toggle container */
595
+ .cn-actions-bar__view-toggle {
596
+ display: flex;
597
+ align-items: center;
598
+ }
599
+ .cn-actions-bar__view-toggle span {
600
+ max-height: 34px;
601
+ }
602
+ /* Override Nextcloud's pointer-events:none on disabled action items
603
+ so native title tooltip is visible on hover.
604
+ The button's disabled attribute still prevents click events. */
605
+ .action.action--disabled {
606
+ pointer-events: auto !important;
607
+ cursor: not-allowed;
608
+ }
609
+ .action.action--disabled button {
610
+ cursor: not-allowed;
611
+ }
612
+ /* CnIndexPage — Index page layout styles */
613
+ /* Header styles: see page-header.css (CnPageHeader) */
614
+ /* Actions bar styles: see actions-bar.css (CnActionsBar) */
615
+ .cn-index-page {
616
+ display: flex;
617
+ flex-direction: column;
618
+ height: 100%;
619
+ min-height: 0;
620
+ padding: calc(5 * var(--default-grid-baseline));
621
+ }
622
+ .cn-index-page__below-header {
623
+ margin-bottom: calc(4 * var(--default-grid-baseline));
624
+ }
625
+ /* Body layout */
626
+ .cn-index-page__body {
627
+ display: flex;
628
+ flex: 1;
629
+ min-height: 0;
630
+ }
631
+ .cn-index-page__main {
632
+ flex: 1;
633
+ min-width: 0;
634
+ min-height: 0;
635
+ overflow-y: auto;
636
+ }
637
+ .cn-index-page__loading {
638
+ display: flex;
639
+ justify-content: center;
640
+ padding: calc(15 * var(--default-grid-baseline));
641
+ }
642
+ .cn-index-page__empty {
643
+ padding: calc(10 * var(--default-grid-baseline)) calc(5 * var(--default-grid-baseline));
644
+ text-align: center;
645
+ }
646
+ .cn-index-page__pagination {
647
+ margin-top: calc(4 * var(--default-grid-baseline));
648
+ }
649
+ /* CnIndexSidebar — NcAppSidebar wrapper styles */
650
+ /* Tab content: limit height to container so overflow shows a scrollbar */
651
+ .cn-index-sidebar__tab-content {
652
+ max-height: 100%;
653
+ min-height: 0;
654
+ overflow-y: auto;
655
+ }
656
+ /* Sidebar header icon (compact mode figure area) */
657
+ .cn-index-sidebar__header-icon {
658
+ display: flex;
659
+ align-items: center;
660
+ justify-content: center;
661
+ width: 100%;
662
+ height: 100%;
663
+ color: var(--color-primary-element);
664
+ }
665
+ .cn-index-sidebar__header-emoji {
666
+ font-size: 28px;
667
+ line-height: 1;
668
+ }
669
+ /* Search tab sections */
670
+ .cn-index-sidebar__section {
671
+ padding: calc(4 * var(--default-grid-baseline));
672
+ }
673
+ .cn-index-sidebar__section h3 {
674
+ margin: 0 0 calc(3 * var(--default-grid-baseline)) 0;
675
+ font-size: 15px;
676
+ font-weight: 600;
677
+ }
678
+ .cn-index-sidebar__description {
679
+ color: var(--color-text-maxcontrast);
680
+ font-size: 13px;
681
+ margin: 0 0 calc(4 * var(--default-grid-baseline)) 0;
682
+ }
683
+ .cn-index-sidebar__filter-group {
684
+ margin-bottom: calc(3 * var(--default-grid-baseline));
685
+ }
686
+ .cn-index-sidebar__filter-header {
687
+ display: flex;
688
+ align-items: center;
689
+ gap: var(--default-grid-baseline);
690
+ margin-bottom: var(--default-grid-baseline);
691
+ }
692
+ .cn-index-sidebar__filter-label {
693
+ font-size: 13px;
694
+ font-weight: 500;
695
+ color: var(--color-main-text);
696
+ }
697
+ .cn-index-sidebar__info-btn {
698
+ min-width: var(--clickable-area-small, 24px) !important;
699
+ min-height: var(--clickable-area-small, 24px) !important;
700
+ width: var(--clickable-area-small, 24px) !important;
701
+ height: var(--clickable-area-small, 24px) !important;
702
+ padding: 0 !important;
703
+ color: var(--color-text-maxcontrast);
704
+ }
705
+ .cn-index-sidebar__info-btn:hover {
706
+ color: var(--color-primary);
707
+ }
708
+ .cn-index-sidebar__filter-description {
709
+ padding: calc(2 * var(--default-grid-baseline)) calc(3 * var(--default-grid-baseline));
710
+ max-width: 260px;
711
+ font-size: 13px;
712
+ color: var(--color-main-text);
713
+ margin: 0;
714
+ line-height: var(--default-line-height, 1.4);
715
+ }
716
+ .cn-index-sidebar__select {
717
+ width: 100%;
718
+ }
719
+ /* Visually hide NcSelect's rendered label — the filter heading already shows it.
720
+ Keep input-label prop for screen-reader accessibility. */
721
+ .cn-index-sidebar__select label {
722
+ position: absolute;
723
+ width: 1px;
724
+ height: 1px;
725
+ padding: 0;
726
+ margin: -1px;
727
+ overflow: hidden;
728
+ clip: rect(0, 0, 0, 0);
729
+ white-space: nowrap;
730
+ border: 0;
731
+ }
732
+ .cn-index-sidebar__empty {
733
+ color: var(--color-text-maxcontrast);
734
+ font-size: 13px;
735
+ font-style: italic;
736
+ }
737
+ /* ── Columns tab ── */
738
+ .cn-sidebar-columns {
739
+ padding: calc(4 * var(--default-grid-baseline));
740
+ }
741
+ .cn-sidebar-columns h3 {
742
+ margin-top: 0;
743
+ margin-bottom: calc(2 * var(--default-grid-baseline));
744
+ font-size: 18px;
745
+ font-weight: 600;
746
+ }
747
+ .cn-sidebar-columns__description {
748
+ color: var(--color-text-maxcontrast);
749
+ margin-bottom: calc(4 * var(--default-grid-baseline));
750
+ font-size: var(--default-font-size);
751
+ }
752
+ /* Collapsible column group card */
753
+ .cn-sidebar-columns__group {
754
+ margin-bottom: calc(6 * var(--default-grid-baseline));
755
+ }
756
+ .cn-sidebar-columns__group h4 {
757
+ margin-top: 0;
758
+ margin-bottom: calc(3 * var(--default-grid-baseline));
759
+ font-size: var(--default-font-size);
760
+ font-weight: 600;
761
+ color: var(--color-text-light);
762
+ border-bottom: 1px solid var(--color-border);
763
+ padding-bottom: calc(2 * var(--default-grid-baseline));
764
+ }
765
+ .cn-sidebar-columns__group .checkbox-radio-switch {
766
+ margin-bottom: calc(2 * var(--default-grid-baseline));
767
+ }
768
+ .cn-sidebar-columns__group .checkbox-radio-switch__content {
769
+ padding: var(--default-grid-baseline) 0;
770
+ }
771
+ .cn-sidebar-columns__group--collapsible {
772
+ border: 1px solid var(--color-border);
773
+ border-radius: var(--border-radius);
774
+ padding: 0;
775
+ margin-bottom: calc(3 * var(--default-grid-baseline));
776
+ }
777
+ .cn-sidebar-columns__group-header {
778
+ display: flex;
779
+ align-items: center;
780
+ gap: calc(2 * var(--default-grid-baseline));
781
+ padding: calc(3 * var(--default-grid-baseline));
782
+ cursor: pointer;
783
+ user-select: none;
784
+ transition: background-color var(--animation-quick) ease;
785
+ }
786
+ .cn-sidebar-columns__group-header:hover {
787
+ background-color: var(--color-background-hover);
788
+ }
789
+ .cn-sidebar-columns__group-header h4 {
790
+ margin: 0;
791
+ padding: 0;
792
+ border: none;
793
+ flex: 1;
794
+ color: var(--color-main-text);
795
+ }
796
+ .cn-sidebar-columns__select-all {
797
+ margin: 0 !important;
798
+ font-size: 12px;
799
+ }
800
+ .cn-sidebar-columns__group-content {
801
+ padding: calc(3 * var(--default-grid-baseline));
802
+ border-top: 1px solid var(--color-border);
803
+ display: flex;
804
+ flex-direction: column;
805
+ gap: calc(2 * var(--default-grid-baseline));
806
+ }
807
+ .cn-sidebar-columns__empty {
808
+ color: var(--color-text-maxcontrast);
809
+ font-size: 13px;
810
+ font-style: italic;
811
+ }
812
+ /* @conduction/nextcloud-vue — Dashboard component styles */
813
+ /* Dashboard page layout */
814
+ .cn-dashboard-page {
815
+ padding: 20px;
816
+ max-width: 1400px;
817
+ }
818
+ /* Widget grid item borders for non-tile widgets */
819
+ /* stylelint-disable-next-line selector-pseudo-class-no-unknown */
820
+ .cn-dashboard-grid :deep(.grid-stack-item-content:has(.cn-widget-wrapper)) {
821
+ border: 1px solid var(--color-border);
822
+ }
823
+ /* Dashboard widget content area */
824
+ .cn-dashboard-widget-content {
825
+ padding: 16px;
826
+ }
827
+ /* Dashboard KPI row inside grid */
828
+ .cn-dashboard-kpi-row {
829
+ display: flex;
830
+ align-items: center;
831
+ gap: 12px;
832
+ padding: 16px;
833
+ height: 100%;
834
+ }
835
+ /* Dashboard chart container */
836
+ .cn-dashboard-chart {
837
+ padding: 16px;
838
+ height: 100%;
839
+ display: flex;
840
+ flex-direction: column;
841
+ }
842
+ .cn-dashboard-chart__title {
843
+ margin: 0 0 12px;
844
+ font-size: 15px;
845
+ font-weight: 600;
846
+ }
847
+ .cn-dashboard-chart__content {
848
+ flex: 1;
849
+ min-height: 0;
850
+ overflow: auto;
851
+ }
852
+ /* Dashboard list widget */
853
+ .cn-dashboard-list {
854
+ padding: 0;
855
+ margin: 0;
856
+ list-style: none;
857
+ }
858
+ .cn-dashboard-list__item {
859
+ display: flex;
860
+ align-items: center;
861
+ gap: 8px;
862
+ padding: 8px 16px;
863
+ cursor: pointer;
864
+ border-bottom: 1px solid var(--color-border-dark);
865
+ }
866
+ .cn-dashboard-list__item:last-child {
867
+ border-bottom: none;
868
+ }
869
+ .cn-dashboard-list__item:hover {
870
+ background: var(--color-background-hover);
871
+ }
872
+ /* ========================================
873
+ @conduction/nextcloud-vue — CnDetailPage Styles
874
+ ======================================== */
875
+ .cn-detail-page {
876
+ margin-inline: auto;
877
+ padding: calc(5 * var(--default-grid-baseline));
878
+ position: relative;
879
+ }
880
+ /* Header */
881
+ .cn-detail-page__header {
882
+ display: flex;
883
+ justify-content: space-between;
884
+ align-items: center;
885
+ margin-bottom: calc(4 * var(--default-grid-baseline));
886
+ flex-wrap: wrap;
887
+ gap: calc(4 * var(--default-grid-baseline));
888
+ }
889
+ .cn-detail-page__header-left {
890
+ display: flex;
891
+ align-items: center;
892
+ gap: calc(3 * var(--default-grid-baseline));
893
+ min-width: 0;
894
+ }
895
+ .cn-detail-page__header-text {
896
+ min-width: 0;
897
+ }
898
+ .cn-detail-page__icon {
899
+ flex-shrink: 0;
900
+ }
901
+ .cn-detail-page__title-group {
902
+ display: flex;
903
+ align-items: baseline;
904
+ gap: calc(3 * var(--default-grid-baseline));
905
+ min-width: 0;
906
+ }
907
+ .cn-detail-page__title {
908
+ margin: 0;
909
+ font-size: 22px;
910
+ font-weight: 700;
911
+ line-height: 1.3;
912
+ color: var(--color-main-text);
913
+ white-space: nowrap;
914
+ overflow: hidden;
915
+ text-overflow: ellipsis;
916
+ }
917
+ .cn-detail-page__subtitle {
918
+ font-size: 14px;
919
+ color: var(--color-text-maxcontrast);
920
+ white-space: nowrap;
921
+ }
922
+ .cn-detail-page__description {
923
+ margin: 4px 0 0;
924
+ font-size: var(--default-font-size);
925
+ color: var(--color-text-maxcontrast);
926
+ }
927
+ .cn-detail-page__header-actions {
928
+ display: flex;
929
+ gap: calc(2 * var(--default-grid-baseline));
930
+ flex-wrap: wrap;
931
+ flex-shrink: 0;
932
+ }
933
+ /* Loading state */
934
+ .cn-detail-page__loading {
935
+ display: flex;
936
+ align-items: center;
937
+ gap: calc(2 * var(--default-grid-baseline));
938
+ color: var(--color-text-maxcontrast);
939
+ justify-content: center;
940
+ padding-block: calc(8 * var(--default-grid-baseline));
941
+ }
942
+ /* Error state */
943
+ .cn-detail-page__error {
944
+ padding: calc(8 * var(--default-grid-baseline)) calc(4 * var(--default-grid-baseline));
945
+ }
946
+ /* Empty state */
947
+ .cn-detail-page__empty {
948
+ padding: calc(8 * var(--default-grid-baseline)) calc(4 * var(--default-grid-baseline));
949
+ }
950
+ /* Statistics table */
951
+ .cn-detail-page__stats {
952
+ margin-bottom: calc(5 * var(--default-grid-baseline));
953
+ }
954
+ .cn-detail-page__section-title {
955
+ margin: 0 0 calc(2 * var(--default-grid-baseline));
956
+ font-size: 1.1em;
957
+ font-weight: 600;
958
+ color: var(--color-main-text);
959
+ }
960
+ .cn-detail-page__stats-table {
961
+ width: 100%;
962
+ border-collapse: collapse;
963
+ background: var(--color-main-background);
964
+ border-radius: var(--border-radius-large);
965
+ overflow: hidden;
966
+ border: 1px solid var(--color-border);
967
+ }
968
+ .cn-detail-page__stats-table thead th {
969
+ padding: calc(1.5 * var(--default-grid-baseline)) calc(2 * var(--default-grid-baseline));
970
+ text-align: left;
971
+ font-weight: 600;
972
+ font-size: 0.9em;
973
+ color: var(--color-text-maxcontrast);
974
+ background: var(--color-background-hover);
975
+ border-bottom: 1px solid var(--color-border);
976
+ }
977
+ .cn-detail-page__stats-row--sub td {
978
+ color: var(--color-text-maxcontrast);
979
+ font-size: 0.9em;
980
+ }
981
+ .cn-detail-page__stats-table tbody td {
982
+ padding: calc(1.5 * var(--default-grid-baseline)) calc(2 * var(--default-grid-baseline));
983
+ border-bottom: 1px solid var(--color-border-dark);
984
+ color: var(--color-main-text);
985
+ font-size: 0.95em;
986
+ }
987
+ .cn-detail-page__stats-table tbody tr:last-child td {
988
+ border-bottom: none;
989
+ }
990
+ .cn-detail-page__stats-cell--indented {
991
+ padding-left: calc(5 * var(--default-grid-baseline)) !important;
992
+ }
993
+ .cn-detail-page__stats-cell--center {
994
+ text-align: center;
995
+ }
996
+ .cn-detail-page__stats-cell--right {
997
+ text-align: right;
998
+ }
999
+ /* Body & content */
1000
+ .cn-detail-page__body {
1001
+ display: flex;
1002
+ flex-direction: column;
1003
+ gap: calc(5 * var(--default-grid-baseline));
1004
+ }
1005
+ .cn-detail-page__content {
1006
+ flex: 1;
1007
+ min-width: 0;
1008
+ display: flex;
1009
+ flex-direction: column;
1010
+ gap: calc(4 * var(--default-grid-baseline));
1011
+ }
1012
+ /* Grid layout mode */
1013
+ .cn-detail-page__content--grid {
1014
+ display: grid;
1015
+ grid-template-columns: repeat(12, 1fr);
1016
+ gap: calc(4 * var(--default-grid-baseline));
1017
+ }
1018
+ .cn-detail-page__grid-item {
1019
+ min-width: 0;
1020
+ }
1021
+ .cn-detail-page__widget-title {
1022
+ margin: 0 0 calc(2 * var(--default-grid-baseline)) 0;
1023
+ font-size: 16px;
1024
+ font-weight: 600;
1025
+ line-height: 1.4;
1026
+ }
1027
+ .cn-detail-page__sections {
1028
+ margin-top: calc(4 * var(--default-grid-baseline));
1029
+ }
1030
+ /* Sidebar */
1031
+ .cn-detail-page__sidebar {
1032
+ width: 340px;
1033
+ flex-shrink: 0;
1034
+ position: sticky;
1035
+ top: calc(5 * var(--default-grid-baseline));
1036
+ }
1037
+ .cn-detail-page__sidebar-toggle {
1038
+ position: fixed;
1039
+ right: calc(5 * var(--default-grid-baseline));
1040
+ top: 80px;
1041
+ z-index: 10;
1042
+ }
1043
+ /* Footer */
1044
+ .cn-detail-page__footer {
1045
+ margin-top: calc(4 * var(--default-grid-baseline));
1046
+ padding-top: calc(3 * var(--default-grid-baseline));
1047
+ border-top: 1px solid var(--color-border);
1048
+ }
1049
+ /* Responsive */
1050
+ @media (max-width: 768px) {
1051
+ .cn-detail-page {
1052
+ padding: calc(3 * var(--default-grid-baseline));
1053
+ }
1054
+
1055
+ .cn-detail-page__header {
1056
+ flex-direction: column;
1057
+ }
1058
+
1059
+ .cn-detail-page__header-actions {
1060
+ width: 100%;
1061
+ }
1062
+ }
1063
+ @media (max-width: 600px) {
1064
+ .cn-detail-page__content--grid {
1065
+ grid-template-columns: 1fr;
1066
+ }
1067
+
1068
+ .cn-detail-page__content--grid .cn-detail-page__grid-item {
1069
+ grid-column: 1 / -1 !important;
1070
+ grid-row: auto !important;
1071
+ }
1072
+ }
1073
+ .cn-schema-form__detail-grid {
1074
+ display: grid;
1075
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
1076
+ gap: 20px;
1077
+ margin-bottom: 20px;
1078
+ padding: 0 20px;
1079
+ width: 100%;
1080
+ box-sizing: border-box;
1081
+ }
1082
+ .cn-schema-form__detail-item {
1083
+ display: flex;
1084
+ flex-direction: column;
1085
+ padding: 15px;
1086
+ background-color: var(--color-background-hover);
1087
+ border-radius: var(--border-radius);
1088
+ border-left: 3px solid var(--color-primary);
1089
+ box-shadow: 0 1px 3px var(--color-box-shadow);
1090
+ transition: transform var(--animation-quick) ease,
1091
+ box-shadow var(--animation-quick) ease;
1092
+ }
1093
+ .cn-schema-form__detail-item:hover {
1094
+ transform: translateY(-1px);
1095
+ box-shadow: 0 2px 6px var(--color-box-shadow);
1096
+ }
1097
+ .cn-schema-form__detail-label {
1098
+ font-weight: bold;
1099
+ color: var(--color-text-maxcontrast);
1100
+ margin-bottom: 5px;
1101
+ font-size: 0.9em;
1102
+ }
1103
+ .cn-schema-form__detail-value {
1104
+ word-break: break-word;
1105
+ color: var(--color-main-text);
1106
+ line-height: 1.4;
1107
+ }
1108
+ .cn-schema-form__id-card {
1109
+ background-color: var(--color-background-hover);
1110
+ border-left-color: var(--color-primary-element);
1111
+ }
1112
+ .cn-schema-form__id-card-header {
1113
+ display: flex;
1114
+ justify-content: space-between;
1115
+ align-items: center;
1116
+ width: 100%;
1117
+ margin-bottom: 5px;
1118
+ }
1119
+ .cn-schema-form__id-card .cn-schema-form__detail-value {
1120
+ word-break: break-all;
1121
+ margin-top: 4px;
1122
+ font-family: monospace;
1123
+ font-size: 0.9em;
1124
+ background-color: var(--color-background-dark);
1125
+ padding: 4px 6px;
1126
+ border-radius: var(--border-radius-small);
1127
+ }
1128
+ .cn-schema-form__uuid-value {
1129
+ font-size: 0.9em;
1130
+ color: var(--color-text-maxcontrast);
1131
+ font-family: monospace;
1132
+ margin-top: 4px;
1133
+ display: block;
1134
+ background-color: var(--color-background-dark);
1135
+ padding: 4px 6px;
1136
+ border-radius: var(--border-radius-small);
1137
+ }
1138
+ .cn-schema-form__copy-button {
1139
+ height: 30px;
1140
+ flex-shrink: 0;
1141
+ margin-top: 5px;
1142
+ }
1143
+ /* Tab container */
1144
+ .cn-schema-form__tabContainer {
1145
+ margin-top: 20px;
1146
+ }
1147
+ .cn-schema-form__tabContainer > * ul > li {
1148
+ display: flex;
1149
+ flex: 1;
1150
+ }
1151
+ .cn-schema-form__tabContainer > * ul > li > a {
1152
+ flex: 1;
1153
+ text-align: center;
1154
+ }
1155
+ .cn-schema-form__tabContainer > * ul > li > .active {
1156
+ background: transparent !important;
1157
+ color: var(--color-main-text) !important;
1158
+ border-bottom: var(--default-grid-baseline) solid var(--color-primary-element) !important;
1159
+ }
1160
+ .cn-schema-form__tabContainer > * ul[role="tablist"] {
1161
+ display: flex;
1162
+ margin: 10px 8px 0 8px;
1163
+ justify-content: space-between;
1164
+ border-bottom: 1px solid var(--color-border);
1165
+ }
1166
+ .cn-schema-form__tabContainer > * ul[role="tablist"] > * a[role="tab"] {
1167
+ padding-inline-start: 10px;
1168
+ padding-inline-end: 10px;
1169
+ padding-block-start: 10px;
1170
+ padding-block-end: 10px;
1171
+ }
1172
+ .cn-schema-form__tabContainer > * div[role="tabpanel"] {
1173
+ margin-block-start: var(--OR-margin-10);
1174
+ }
1175
+ /* Table styles */
1176
+ .cn-schema-form__scrollable {
1177
+ max-height: 400px;
1178
+ overflow-y: auto;
1179
+ }
1180
+ .cn-schema-form__viewTable {
1181
+ width: 100%;
1182
+ border-collapse: collapse;
1183
+ background-color: var(--color-main-background);
1184
+ }
1185
+ .cn-schema-form__viewTable th,
1186
+ .cn-schema-form__viewTable td {
1187
+ padding: 12px;
1188
+ text-align: left;
1189
+ border-bottom: 1px solid var(--color-border);
1190
+ vertical-align: middle;
1191
+ }
1192
+ .cn-schema-form__viewTable th {
1193
+ background: var(--color-background-hover);
1194
+ font-weight: 500;
1195
+ color: var(--color-text-maxcontrast);
1196
+ background-color: var(--color-background-dark);
1197
+ }
1198
+ .cn-schema-form__viewTable tbody tr.cn-schema-form__selected-row {
1199
+ background-color: var(--color-primary-light);
1200
+ border-left: 3px solid var(--color-primary);
1201
+ }
1202
+ .cn-schema-form__viewTable tbody tr.cn-schema-form__selected-row:hover {
1203
+ background-color: var(--color-primary-light);
1204
+ }
1205
+ /* Applied to each td of the row currently being edited so inputs sit at the same baseline */
1206
+ .cn-schema-form__editing-cell {
1207
+ vertical-align: baseline !important;
1208
+ }
1209
+ .cn-schema-form__viewTable tbody tr.cn-schema-form__modified-row {
1210
+ background-color: var(--color-warning);
1211
+ border-left: 3px solid var(--color-element-warning);
1212
+ }
1213
+ .cn-schema-form__viewTable tbody tr.cn-schema-form__modified-row:hover {
1214
+ background-color: var(--color-warning);
1215
+ }
1216
+ .cn-schema-form__viewTable
1217
+ tbody
1218
+ tr.cn-schema-form__modified-row.cn-schema-form__selected-row {
1219
+ background-color: var(--color-primary-light);
1220
+ border-left: 3px solid var(--color-primary);
1221
+ }
1222
+ /* Form editor */
1223
+ .cn-schema-form__form-editor {
1224
+ display: flex;
1225
+ flex-direction: column;
1226
+ gap: 16px;
1227
+ padding: 16px;
1228
+ }
1229
+ /* Property row inline editing */
1230
+ .cn-schema-form__name-input-container {
1231
+ display: flex;
1232
+ align-items: center;
1233
+ gap: 8px;
1234
+ }
1235
+ .cn-schema-form__warning-icon {
1236
+ color: var(--color-warning-text);
1237
+ flex-shrink: 0;
1238
+ }
1239
+ /* Table column widths */
1240
+ .cn-schema-form__tableColumnActions {
1241
+ width: 150px;
1242
+ text-align: right;
1243
+ }
1244
+ /* Table actions button */
1245
+ .cn-schema-form__table-actions {
1246
+ margin-bottom: 15px;
1247
+ display: flex;
1248
+ justify-content: flex-end;
1249
+ }
1250
+ /* Enum preview styling */
1251
+ .cn-schema-form__enum-preview {
1252
+ margin-top: 4px;
1253
+ display: flex;
1254
+ align-items: center;
1255
+ gap: 4px;
1256
+ flex-wrap: wrap;
1257
+ }
1258
+ .cn-schema-form__enum-label {
1259
+ color: var(--color-text-maxcontrast);
1260
+ font-size: 11px;
1261
+ font-weight: 500;
1262
+ margin-right: 4px;
1263
+ }
1264
+ .cn-schema-form__enum-value-chip {
1265
+ background: var(--color-primary-light);
1266
+ color: var(--color-primary-light-text);
1267
+ padding: 2px 6px;
1268
+ border-radius: var(--border-radius-container);
1269
+ font-size: 10px;
1270
+ font-weight: 500;
1271
+ border: 1px solid var(--color-primary-element-light);
1272
+ }
1273
+ .cn-schema-form__property-chip.cn-schema-form__chip-info {
1274
+ background: var(--color-info);
1275
+ color: var(--color-primary-text);
1276
+ }
1277
+ .cn-schema-form__property-chip.cn-schema-form__chip-table {
1278
+ background: var(--color-primary);
1279
+ color: var(--color-primary-text);
1280
+ }
1281
+ /* Enum chip styling for action menu using NcActionButton */
1282
+ .cn-schema-form__enum-action-chip {
1283
+ background: var(--color-primary-element-light) !important;
1284
+ border-radius: var(--border-radius-container-large) !important;
1285
+ margin: 2px 4px !important;
1286
+ padding: 4px 12px !important;
1287
+ }
1288
+ .cn-schema-form__enum-action-chip:hover {
1289
+ background: var(--color-primary-element) !important;
1290
+ }
1291
+ .cn-schema-form__enum-action-chip .action-button__text {
1292
+ color: var(--color-primary-text) !important;
1293
+ font-size: 12px !important;
1294
+ font-weight: 500 !important;
1295
+ }
1296
+ .cn-schema-form__enum-action-chip .action-button__icon {
1297
+ color: var(--color-primary-text) !important;
1298
+ }
1299
+ /* RBAC Security Tab Styling */
1300
+ .cn-schema-form__security-section {
1301
+ padding: 20px 0;
1302
+ }
1303
+ .cn-schema-form__loading-groups {
1304
+ display: flex;
1305
+ align-items: center;
1306
+ gap: 10px;
1307
+ padding: 20px;
1308
+ justify-content: center;
1309
+ }
1310
+ .cn-schema-form__rbac-table-container {
1311
+ margin-top: 20px;
1312
+ }
1313
+ .cn-schema-form__rbac-table-container h3 {
1314
+ margin-bottom: 15px;
1315
+ color: var(--color-main-text);
1316
+ font-size: 16px;
1317
+ font-weight: 600;
1318
+ }
1319
+ .cn-schema-form__rbac-table {
1320
+ width: 100%;
1321
+ border-collapse: collapse;
1322
+ border: 1px solid var(--color-border-dark);
1323
+ border-radius: var(--border-radius-element);
1324
+ overflow: hidden;
1325
+ box-shadow: 0 2px 8px rgba(var(--color-box-shadow-rgb), 0.1);
1326
+ }
1327
+ .cn-schema-form__rbac-table th {
1328
+ background: var(--color-background-dark);
1329
+ color: var(--color-main-text);
1330
+ font-weight: 600;
1331
+ padding: 12px 16px;
1332
+ text-align: left;
1333
+ border-bottom: 2px solid var(--color-border-dark);
1334
+ }
1335
+ .cn-schema-form__rbac-table th:first-child {
1336
+ width: 40%;
1337
+ }
1338
+ .cn-schema-form__rbac-table th:not(:first-child) {
1339
+ width: 15%;
1340
+ text-align: center;
1341
+ }
1342
+ .cn-schema-form__rbac-table td {
1343
+ padding: 12px 16px;
1344
+ border-bottom: 1px solid var(--color-border);
1345
+ vertical-align: middle;
1346
+ }
1347
+ .cn-schema-form__rbac-table td:not(.cn-schema-form__group-name) {
1348
+ text-align: center;
1349
+ }
1350
+ .cn-schema-form__rbac-table tr:hover {
1351
+ background: var(--color-background-hover);
1352
+ }
1353
+ .cn-schema-form__public-row {
1354
+ background: var(--color-primary-light) !important;
1355
+ }
1356
+ .cn-schema-form__user-row {
1357
+ background: var(--color-warning) !important;
1358
+ }
1359
+ .cn-schema-form__admin-row {
1360
+ background: var(--color-success) !important;
1361
+ }
1362
+ .cn-schema-form__admin-row:hover {
1363
+ background: var(--color-success) !important;
1364
+ }
1365
+ .cn-schema-form__group-name {
1366
+ display: flex;
1367
+ flex-direction: column;
1368
+ gap: 4px;
1369
+ }
1370
+ .cn-schema-form__group-badge {
1371
+ display: inline-block;
1372
+ padding: 4px 8px;
1373
+ border-radius: var(--border-radius-container);
1374
+ font-size: 12px;
1375
+ font-weight: 600;
1376
+ background: var(--color-primary-element-light);
1377
+ color: var(--color-primary-light-text);
1378
+ }
1379
+ .cn-schema-form__group-badge.cn-schema-form__public {
1380
+ background: var(--color-info);
1381
+ color: var(--color-primary-text);
1382
+ }
1383
+ .cn-schema-form__group-badge.cn-schema-form__user {
1384
+ background: var(--color-warning);
1385
+ color: var(--color-warning-text);
1386
+ }
1387
+ .cn-schema-form__group-badge.cn-schema-form__admin {
1388
+ background: var(--color-success);
1389
+ color: var(--color-success-text);
1390
+ }
1391
+ .cn-schema-form__group-name small {
1392
+ color: var(--color-text-maxcontrast);
1393
+ font-size: 11px;
1394
+ font-style: italic;
1395
+ }
1396
+ .cn-schema-form__rbac-summary {
1397
+ margin-top: 20px;
1398
+ }
1399
+ /* Property-level RBAC Styling - Action Menu Based */
1400
+ .cn-schema-form__property-permission-text {
1401
+ font-family: monospace;
1402
+ font-size: 12px;
1403
+ font-weight: 600;
1404
+ }
1405
+ .cn-schema-form__property-permission-remove-btn {
1406
+ font-size: 11px;
1407
+ color: var(--color-error);
1408
+ }
1409
+ /* Schema Extension Status Pill */
1410
+ .cn-schema-form__statusPill {
1411
+ display: inline-block;
1412
+ padding: 4px 12px;
1413
+ border-radius: var(--border-radius-container);
1414
+ font-size: 0.75em;
1415
+ font-weight: 600;
1416
+ text-transform: uppercase;
1417
+ margin-left: 8px;
1418
+ white-space: nowrap;
1419
+ vertical-align: middle;
1420
+ }
1421
+ .cn-schema-form__statusPill--alert {
1422
+ background-color: var(--color-warning);
1423
+ color: var(--color-warning-text);
1424
+ }
1425
+ /* Title with badge layout */
1426
+ .cn-schema-form__title-with-badge {
1427
+ display: flex;
1428
+ align-items: center;
1429
+ gap: 12px;
1430
+ flex-wrap: wrap;
1431
+ }
1432
+ .cn-schema-form__title-with-badge > :first-child {
1433
+ flex: 1;
1434
+ min-width: 0;
1435
+ }
1436
+ /* Parent schema link styling */
1437
+ .cn-schema-form__parent-schema-link {
1438
+ margin-top: 12px;
1439
+ padding: 8px 12px;
1440
+ background-color: var(--color-background-dark);
1441
+ border-radius: var(--border-radius);
1442
+ font-size: 0.9em;
1443
+ }
1444
+ .cn-schema-form__parent-schema-link strong {
1445
+ color: var(--color-main-text);
1446
+ }
1447
+ /* Extend info card styling */
1448
+ .cn-schema-form__extend-info {
1449
+ margin-top: 12px;
1450
+ margin-bottom: 12px;
1451
+ }
1452
+ .cn-schema-form__extend-info p {
1453
+ margin: 8px 0;
1454
+ }
1455
+ .cn-schema-form__extend-info p:first-of-type {
1456
+ margin-top: 0;
1457
+ }
1458
+ .cn-schema-form__extend-info p:last-of-type {
1459
+ margin-bottom: 0;
1460
+ }
1461
+ /* Property name with chips (moved from openregister/css/main.css) */
1462
+ .cn-schema-form__name-display-container {
1463
+ display: flex;
1464
+ align-items: center;
1465
+ gap: 8px;
1466
+ }
1467
+ .cn-schema-form__name-with-chips {
1468
+ display: flex;
1469
+ align-items: center;
1470
+ gap: 8px;
1471
+ flex-wrap: wrap;
1472
+ }
1473
+ .cn-schema-form__inline-chips {
1474
+ display: flex;
1475
+ flex-wrap: wrap;
1476
+ gap: 4px;
1477
+ align-items: center;
1478
+ }
1479
+ .cn-schema-form__property-chip {
1480
+ display: inline-block;
1481
+ padding: 2px 6px;
1482
+ border-radius: var(--border-radius-pill);
1483
+ font-size: 0.7em;
1484
+ font-weight: 500;
1485
+ line-height: 1.2;
1486
+ white-space: nowrap;
1487
+ }
1488
+ .cn-schema-form__chip-primary {
1489
+ background-color: var(--color-primary-element-light);
1490
+ color: var(--color-primary-element-text);
1491
+ }
1492
+ .cn-schema-form__chip-secondary {
1493
+ background-color: var(--color-background-dark);
1494
+ color: var(--color-text-maxcontrast);
1495
+ border: 1px solid var(--color-border);
1496
+ }
1497
+ .cn-schema-form__chip-warning {
1498
+ background-color: var(--color-warning);
1499
+ color: var(--color-warning-text);
1500
+ }
1501
+ .cn-schema-form__chip-success {
1502
+ background-color: var(--color-success);
1503
+ color: var(--color-success-text);
1504
+ }
1505
+ .cn-schema-form__properties-warning {
1506
+ margin-top: 15px;
1507
+ }
1508
+ /* Copied from openregister — also used in other files */
1509
+ .cn-schema-form__property-name {
1510
+ font-weight: 500;
1511
+ }
1512
+ .cn-schema-form__statusPill--success {
1513
+ background-color: var(--color-success);
1514
+ color: var(--color-success-text);
1515
+ }
1516
+ .cn-schema-form__statusPill--info {
1517
+ background-color: var(--color-info);
1518
+ color: var(--color-info-text);
1519
+ }
1520
+ /* Advanced: Conditional Access Rules — accordion + rule cards */
1521
+ .cn-schema-form__conditional-section {
1522
+ margin-top: 32px;
1523
+ }
1524
+ .cn-schema-form__cond-accordion-header {
1525
+ display: flex;
1526
+ align-items: center;
1527
+ gap: 8px;
1528
+ width: 100%;
1529
+ padding: 12px 16px;
1530
+ background: var(--color-background-dark);
1531
+ border: 1px solid var(--color-border);
1532
+ border-radius: var(--border-radius-element);
1533
+ cursor: pointer;
1534
+ font-size: 14px;
1535
+ font-weight: 600;
1536
+ color: var(--color-main-text);
1537
+ text-align: left;
1538
+ transition: background var(--animation-quick) ease;
1539
+ }
1540
+ .cn-schema-form__cond-accordion-header:hover {
1541
+ background: var(--color-background-hover);
1542
+ }
1543
+ .cn-schema-form__cond-chevron {
1544
+ flex-shrink: 0;
1545
+ color: var(--color-text-maxcontrast);
1546
+ }
1547
+ .cn-schema-form__cond-count-badge {
1548
+ margin-left: auto;
1549
+ padding: 2px 8px;
1550
+ background: var(--color-primary-element);
1551
+ color: var(--color-primary-element-text);
1552
+ border-radius: var(--border-radius-pill);
1553
+ font-size: 12px;
1554
+ font-weight: 600;
1555
+ }
1556
+ .cn-schema-form__cond-accordion-body {
1557
+ margin-top: 4px;
1558
+ border: 1px solid var(--color-border);
1559
+ border-radius: var(--border-radius-element);
1560
+ padding: 16px;
1561
+ display: flex;
1562
+ flex-direction: column;
1563
+ gap: 4px;
1564
+ }
1565
+ /* Per-action container — same border/radius pattern as the RBAC table container */
1566
+ .cn-schema-form__cond-action {
1567
+ margin-top: 16px;
1568
+ border: 1px solid var(--color-border-dark);
1569
+ border-radius: var(--border-radius-element);
1570
+ /* overflow visible so NcSelect dropdowns (appendToBody:true) can position correctly */
1571
+ overflow: visible;
1572
+ box-shadow: 0 2px 8px rgba(var(--color-box-shadow-rgb), 0.06);
1573
+ }
1574
+ .cn-schema-form__cond-action:first-of-type {
1575
+ margin-top: 12px;
1576
+ }
1577
+ /* Action header — matches RBAC table <th> row */
1578
+ .cn-schema-form__cond-action-header {
1579
+ display: flex;
1580
+ align-items: center;
1581
+ justify-content: space-between;
1582
+ padding: 10px 16px;
1583
+ background: var(--color-background-dark);
1584
+ border-bottom: 2px solid var(--color-border-dark);
1585
+ border-radius: var(--border-radius-element) var(--border-radius-element) 0 0;
1586
+ }
1587
+ .cn-schema-form__cond-action-name {
1588
+ font-size: 14px;
1589
+ font-weight: 600;
1590
+ color: var(--color-main-text);
1591
+ text-transform: capitalize;
1592
+ }
1593
+ .cn-schema-form__cond-empty {
1594
+ padding: 12px 16px;
1595
+ color: var(--color-text-maxcontrast);
1596
+ font-style: italic;
1597
+ font-size: 13px;
1598
+ background: var(--color-main-background);
1599
+ }
1600
+ /* Rule card — standalone card so each rule is visually distinct */
1601
+ .cn-schema-form__cond-rule-card {
1602
+ margin: 8px;
1603
+ padding: 14px 16px;
1604
+ background: var(--color-main-background);
1605
+ border: 1px solid var(--color-border);
1606
+ border-radius: var(--border-radius-element);
1607
+ display: flex;
1608
+ flex-direction: column;
1609
+ gap: 12px;
1610
+ overflow: visible;
1611
+ box-shadow: 0 1px 4px rgba(var(--color-box-shadow-rgb), 0.08);
1612
+ transition: background var(--animation-quick) ease,
1613
+ box-shadow var(--animation-quick) ease;
1614
+ }
1615
+ /* Group-based left border — same color variables as the group badges in the RBAC table */
1616
+ .cn-schema-form__cond-rule-card--public {
1617
+ border-left: 3px solid var(--color-info);
1618
+ }
1619
+ .cn-schema-form__cond-rule-card--authenticated {
1620
+ border-left: 3px solid var(--color-warning);
1621
+ }
1622
+ .cn-schema-form__cond-rule-card--admin {
1623
+ border-left: 3px solid var(--color-success);
1624
+ }
1625
+ /* Rule header row: group badge + select + remove button */
1626
+ .cn-schema-form__cond-rule-header {
1627
+ display: flex;
1628
+ align-items: center;
1629
+ gap: 12px;
1630
+ }
1631
+ /* Suppress the badge text since the select already shows the group */
1632
+ .cn-schema-form__cond-rule-header .cn-schema-form__group-badge {
1633
+ display: none;
1634
+ }
1635
+ .cn-schema-form__cond-rule-group-select {
1636
+ flex: 1;
1637
+ max-width: 260px;
1638
+ }
1639
+ /* Remove extra spacing from vue-select so the group select aligns with the Remove rule button */
1640
+ .cn-schema-form__cond-rule-group-select .v-select {
1641
+ margin: 0;
1642
+ }
1643
+ .cn-schema-form__cond-rule-group-select .vs__dropdown-toggle {
1644
+ padding-bottom: 0;
1645
+ }
1646
+ /* Conditions list */
1647
+ .cn-schema-form__cond-match-list {
1648
+ padding-left: 4px;
1649
+ }
1650
+ .cn-schema-form__cond-match-empty {
1651
+ font-size: 12px;
1652
+ font-style: italic;
1653
+ color: var(--color-text-maxcontrast);
1654
+ padding: 4px 0;
1655
+ margin: 0;
1656
+ }
1657
+ .cn-schema-form__cond-match-table {
1658
+ width: 100%;
1659
+ border-collapse: collapse;
1660
+ border: 1px solid var(--color-border-dark);
1661
+ border-radius: var(--border-radius-element);
1662
+ overflow: hidden;
1663
+ box-shadow: 0 2px 8px rgba(var(--color-box-shadow-rgb), 0.1);
1664
+ }
1665
+ /* stylelint-disable-next-line no-descending-specificity */
1666
+ .cn-schema-form__cond-match-table th {
1667
+ background: var(--color-background-dark);
1668
+ color: var(--color-main-text);
1669
+ font-weight: 600;
1670
+ padding: 10px 16px;
1671
+ text-align: left;
1672
+ border-bottom: 2px solid var(--color-border-dark);
1673
+ }
1674
+ /* stylelint-disable-next-line no-descending-specificity */
1675
+ .cn-schema-form__cond-match-table td {
1676
+ padding: 10px 16px;
1677
+ vertical-align: middle;
1678
+ border-bottom: 1px solid var(--color-border);
1679
+ }
1680
+ .cn-schema-form__cond-match-table tbody tr:last-child td {
1681
+ border-bottom: none;
1682
+ }
1683
+ .cn-schema-form__cond-match-actions {
1684
+ width: 44px;
1685
+ text-align: right;
1686
+ }
1687
+ /* Add-condition inline form */
1688
+ .cn-schema-form__cond-add-form {
1689
+ display: flex;
1690
+ flex-direction: column;
1691
+ gap: 12px;
1692
+ padding: 14px;
1693
+ background: var(--color-background-hover);
1694
+ border-radius: var(--border-radius);
1695
+ border: 1px dashed var(--color-border-dark);
1696
+ }
1697
+ /* Three equal columns for Property / Operator / Value selects */
1698
+ .cn-schema-form__cond-add-row {
1699
+ display: grid;
1700
+ grid-template-columns: repeat(3, minmax(0, 1fr));
1701
+ gap: 12px;
1702
+ align-items: start;
1703
+ }
1704
+ .cn-schema-form__cond-add-field {
1705
+ min-width: 0;
1706
+ }
1707
+ /* NcSelect (vue-select) must fill its grid cell */
1708
+ .cn-schema-form__cond-add-field .v-select {
1709
+ width: 100%;
1710
+ min-width: 0;
1711
+ }
1712
+ /* Custom value input — full width below the three selects, never displaces them */
1713
+ .cn-schema-form__cond-custom-row {
1714
+ display: flex;
1715
+ flex-direction: column;
1716
+ gap: 6px;
1717
+ }
1718
+ .cn-schema-form__cond-custom-input {
1719
+ width: 100%;
1720
+ height: 34px;
1721
+ padding: 4px 10px;
1722
+ border: 1px solid var(--color-border-dark);
1723
+ border-radius: var(--border-radius);
1724
+ background: var(--color-main-background);
1725
+ color: var(--color-main-text);
1726
+ font-size: 13px;
1727
+ box-sizing: border-box;
1728
+ }
1729
+ .cn-schema-form__cond-custom-input:focus {
1730
+ outline: 2px solid var(--color-primary-element);
1731
+ outline-offset: -1px;
1732
+ }
1733
+ .cn-schema-form__cond-add-actions {
1734
+ display: flex;
1735
+ gap: 8px;
1736
+ }
1737
+ /* Copied from openregister/SolrWarmupModal — also used in other files */
1738
+ .cn-schema-form__schema-option {
1739
+ display: flex;
1740
+ flex-direction: column;
1741
+ gap: 0.25rem;
1742
+ }
1743
+ .cn-schema-form__option-title {
1744
+ font-weight: 500;
1745
+ }
1746
+ .cn-schema-form__option-description {
1747
+ font-size: 0.875rem;
1748
+ color: var(--color-text-maxcontrast);
1749
+ max-width: 100%;
1750
+ white-space: normal;
1751
+ word-break: break-word;
1752
+ display: -webkit-box;
1753
+ -webkit-line-clamp: 2;
1754
+ -webkit-box-orient: vertical;
1755
+ overflow: hidden;
1756
+ }
1757
+ /* =============================================
1758
+ CnTimelineStages — Timeline / progress stages
1759
+ ============================================= */
1760
+ /* ---------- Root container ---------- */
1761
+ .cn-timeline-stages {
1762
+ display: flex;
1763
+ align-items: flex-start;
1764
+ gap: 0;
1765
+ width: 100%;
1766
+ }
1767
+ /* Horizontal: left-to-right, scrollable overflow */
1768
+ .cn-timeline-stages--horizontal {
1769
+ flex-direction: row;
1770
+ overflow-x: auto;
1771
+ padding-bottom: calc(var(--default-grid-baseline, 4px) * 1);
1772
+ }
1773
+ /* Vertical: top-to-bottom */
1774
+ .cn-timeline-stages--vertical {
1775
+ flex-direction: column;
1776
+ }
1777
+ /* ---------- Stage node ---------- */
1778
+ .cn-timeline-stages__stage {
1779
+ display: flex;
1780
+ flex-direction: column;
1781
+ align-items: center;
1782
+ position: relative;
1783
+ flex: 1 1 0;
1784
+ min-width: calc(var(--default-grid-baseline, 4px) * 20); /* 80px */
1785
+ text-align: center;
1786
+ padding: calc(var(--default-grid-baseline, 4px) * 1);
1787
+ border-radius: var(--border-radius-large, 10px);
1788
+ transition: background-color 0.15s ease;
1789
+ }
1790
+ /* Vertical stages: row layout */
1791
+ .cn-timeline-stages--vertical .cn-timeline-stages__stage {
1792
+ flex-direction: row;
1793
+ align-items: center;
1794
+ text-align: left;
1795
+ min-width: 0;
1796
+ gap: calc(var(--default-grid-baseline, 4px) * 3);
1797
+ }
1798
+ /* ---------- Track line (horizontal) ---------- */
1799
+ .cn-timeline-stages--horizontal .cn-timeline-stages__stage + .cn-timeline-stages__stage::before {
1800
+ content: '';
1801
+ position: absolute;
1802
+ top: 16px; /* half of 32px indicator */
1803
+ right: calc(50% + 16px + 4px);
1804
+ left: calc(-50% + 16px + 4px);
1805
+ height: 2px;
1806
+ background-color: var(--color-border, #ededed);
1807
+ z-index: 0;
1808
+ }
1809
+ /* Completed + current track segments: filled */
1810
+ .cn-timeline-stages--horizontal .cn-timeline-stages__stage--completed + .cn-timeline-stages__stage::before,
1811
+ .cn-timeline-stages--horizontal .cn-timeline-stages__stage--completed + .cn-timeline-stages__stage--current::before {
1812
+ background-color: var(--color-success-text, var(--color-success, #46ba61));
1813
+ }
1814
+ /* ---------- Track line (vertical) ---------- */
1815
+ .cn-timeline-stages--vertical .cn-timeline-stages__stage + .cn-timeline-stages__stage::before {
1816
+ content: '';
1817
+ position: absolute;
1818
+ left: 15px; /* center of 32px indicator */
1819
+ top: -6px;
1820
+ height: 6px;
1821
+ width: 2px;
1822
+ background-color: var(--color-border, #ededed);
1823
+ z-index: 0;
1824
+ }
1825
+ /* Completed + current track segments: filled (vertical) */
1826
+ .cn-timeline-stages--vertical .cn-timeline-stages__stage--completed + .cn-timeline-stages__stage::before,
1827
+ .cn-timeline-stages--vertical .cn-timeline-stages__stage--completed + .cn-timeline-stages__stage--current::before {
1828
+ background-color: var(--color-success-text, var(--color-success, #46ba61));
1829
+ }
1830
+ /* ---------- Indicator (circle) ---------- */
1831
+ .cn-timeline-stages__indicator {
1832
+ display: flex;
1833
+ align-items: center;
1834
+ justify-content: center;
1835
+ width: 32px;
1836
+ height: 32px;
1837
+ border-radius: 50%;
1838
+ flex-shrink: 0;
1839
+ position: relative;
1840
+ z-index: 1;
1841
+ border: 2px solid var(--color-border, #ededed);
1842
+ background-color: var(--color-main-background, #fff);
1843
+ transition: background-color 0.15s ease, border-color 0.15s ease;
1844
+ }
1845
+ /* Completed indicator: success green with white icon */
1846
+ .cn-timeline-stages__stage--completed .cn-timeline-stages__indicator {
1847
+ background-color: var(--color-success-text, var(--color-success, #46ba61));
1848
+ border-color: var(--color-success-text, var(--color-success, #46ba61));
1849
+ color: #fff;
1850
+ }
1851
+ /* Current indicator: primary blue */
1852
+ .cn-timeline-stages__stage--current .cn-timeline-stages__indicator {
1853
+ background-color: var(--color-primary-element, #0082c9);
1854
+ border-color: var(--color-primary-element, #0082c9);
1855
+ color: var(--color-primary-element-text, #fff);
1856
+ }
1857
+ /* ---------- Checkmark SVG ---------- */
1858
+ .cn-timeline-stages__checkmark {
1859
+ width: 16px;
1860
+ height: 16px;
1861
+ }
1862
+ /* ---------- Current dot ---------- */
1863
+ .cn-timeline-stages__dot {
1864
+ display: block;
1865
+ width: 10px;
1866
+ height: 10px;
1867
+ border-radius: 50%;
1868
+ background-color: currentColor;
1869
+ }
1870
+ /* ---------- Label ---------- */
1871
+ .cn-timeline-stages__label {
1872
+ display: block;
1873
+ margin-top: calc(var(--default-grid-baseline, 4px) * 1);
1874
+ font-size: 0.9em;
1875
+ line-height: 1.3;
1876
+ color: var(--color-text-maxcontrast, #767676);
1877
+ word-break: break-word;
1878
+ }
1879
+ /* Vertical: label aligns with indicator center */
1880
+ .cn-timeline-stages--vertical .cn-timeline-stages__label {
1881
+ margin-top: 0;
1882
+ }
1883
+ /* Completed stage label */
1884
+ .cn-timeline-stages__stage--completed .cn-timeline-stages__label {
1885
+ color: var(--color-main-text, #222);
1886
+ }
1887
+ /* Current stage label: bold and prominent */
1888
+ .cn-timeline-stages__stage--current .cn-timeline-stages__label {
1889
+ color: var(--color-main-text, #222);
1890
+ font-weight: bold;
1891
+ }
1892
+ /* ---------- Subtitle ---------- */
1893
+ .cn-timeline-stages__subtitle {
1894
+ display: block;
1895
+ font-size: 0.8em;
1896
+ line-height: 1.3;
1897
+ color: var(--color-text-maxcontrast, #767676);
1898
+ margin-top: 2px;
1899
+ }
1900
+ /* ---------- Small size variant ---------- */
1901
+ .cn-timeline-stages--small .cn-timeline-stages__indicator {
1902
+ width: 20px;
1903
+ height: 20px;
1904
+ }
1905
+ .cn-timeline-stages--small .cn-timeline-stages__checkmark {
1906
+ width: 12px;
1907
+ height: 12px;
1908
+ }
1909
+ .cn-timeline-stages--small .cn-timeline-stages__dot {
1910
+ width: 6px;
1911
+ height: 6px;
1912
+ }
1913
+ .cn-timeline-stages--small .cn-timeline-stages__label {
1914
+ font-size: 0.85em;
1915
+ }
1916
+ .cn-timeline-stages--small .cn-timeline-stages__stage {
1917
+ min-width: calc(var(--default-grid-baseline, 4px) * 14); /* 56px */
1918
+ }
1919
+ /* Small horizontal track line offset */
1920
+ .cn-timeline-stages--small.cn-timeline-stages--horizontal .cn-timeline-stages__stage + .cn-timeline-stages__stage::before {
1921
+ top: 10px; /* half of 20px */
1922
+ right: calc(50% + 10px + 4px);
1923
+ left: calc(-50% + 10px + 4px);
1924
+ }
1925
+ /* Small vertical track line offset */
1926
+ .cn-timeline-stages--small.cn-timeline-stages--vertical .cn-timeline-stages__stage + .cn-timeline-stages__stage::before {
1927
+ left: 9px; /* center of 20px indicator */
1928
+ top: -6px;
1929
+ height: 6px;
1930
+ }
1931
+ /* ---------- Clickable mode ---------- */
1932
+ .cn-timeline-stages--clickable .cn-timeline-stages__stage {
1933
+ cursor: pointer;
1934
+ }
1935
+ .cn-timeline-stages--clickable .cn-timeline-stages__stage:hover {
1936
+ background-color: var(--color-background-dark, #ededed);
1937
+ }
1938
+ /* Focus ring (keyboard only) */
1939
+ .cn-timeline-stages--clickable .cn-timeline-stages__stage:focus-visible {
1940
+ outline: 2px solid var(--color-primary-element, #0082c9);
1941
+ outline-offset: 2px;
1942
+ }
1943
+ /* Remove default outline for mouse clicks */
1944
+ .cn-timeline-stages--clickable .cn-timeline-stages__stage:focus:not(:focus-visible) {
1945
+ outline: none;
1946
+ }
1947
+ /* useContextMenu — Position the context menu popper at cursor coordinates.
1948
+ *
1949
+ * Works with any NcActions that uses useContextMenu().
1950
+ * The data attribute ensures transforms only apply when a context menu is active,
1951
+ * avoiding interference with regular NcActions poppers.
1952
+ */
1953
+ html[data-cn-ctx-menu] .v-popper__popper {
1954
+ transform: translate3d(var(--cn-ctx-menu-x), var(--cn-ctx-menu-y), 0px) !important;
1955
+ }
1956
+ html[data-cn-ctx-menu] .v-popper__popper[data-popper-placement="top"] {
1957
+ transform: translate3d(var(--cn-ctx-menu-x), calc(var(--cn-ctx-menu-y) - 50vh + 34px), 0px) !important;
1958
+ }
1959
+ html[data-cn-ctx-menu] .v-popper__popper .v-popper__arrow-container {
1960
+ display: none;
1961
+ }
1962
+ /* Destructive action styling (shared across all context menus) */
1963
+ html[data-cn-ctx-menu] .cn-row-action--destructive {
1964
+ color: var(--color-error) !important;
1965
+ }
1966
+ /*
1967
+ * Global theme override for NcDateTimePicker's disabled calendar cells.
1968
+ * The underlying vue2-datepicker library ships hardcoded `#f3f3f3` / `#ccc`,
1969
+ * which breaks dark mode. The popup is portaled to <body>, so this must be
1970
+ * unscoped and lives here rather than in each modal that uses the picker.
1971
+ */
1972
+ .mx-calendar-content .cell.disabled {
1973
+ background-color: var(--color-background-dark) !important;
1974
+ color: var(--color-text-maxcontrast) !important;
1975
+ cursor: not-allowed;
1976
+ }
1977
+ .mx-calendar-content .cell.disabled,
1978
+ .mx-calendar-content .cell.disabled * {
1979
+ cursor: not-allowed !important;
1980
+ }
1981
+ .mx-calendar-content .cell.disabled:hover {
1982
+ background-color: var(--color-background-dark) !important;
1983
+ }
18
1984
 
19
1985
 
20
1986
  .cn-cell-renderer--uuid[data-v-1351820e] {
@@ -113,7 +2079,7 @@
113
2079
  }
114
2080
 
115
2081
 
116
- .cn-stats-block[data-v-8f21fbe2] {
2082
+ .cn-stats-block[data-v-5b498ce7] {
117
2083
  background: var(--color-background-hover);
118
2084
  border-radius: var(--border-radius-large, 10px);
119
2085
  padding: 1rem;
@@ -129,33 +2095,59 @@
129
2095
  box-sizing: border-box;
130
2096
  overflow: hidden;
131
2097
  min-width: 0;
132
- }
133
- .cn-stats-block--horizontal[data-v-8f21fbe2] {
2098
+ }
2099
+
2100
+ /* Content */
2101
+
2102
+ .cn-stats-block__content[data-v-5b498ce7] {
2103
+ flex: 1;
2104
+ min-width: 0;
2105
+ text-align: center;
2106
+ }
2107
+
2108
+ .cn-stats-block__count[data-v-5b498ce7] {
2109
+ display: flex;
2110
+ align-items: baseline;
2111
+ justify-content: center;
2112
+ gap: 0.25rem;
2113
+ font-size: 1.2rem;
2114
+ margin-bottom: 0.25rem;
2115
+ white-space: nowrap;
2116
+ overflow: hidden;
2117
+ }
2118
+
2119
+ .cn-stats-block--horizontal[data-v-5b498ce7] {
134
2120
  flex-direction: row;
135
2121
  align-items: center;
136
2122
  gap: 12px;
137
- }
138
- .cn-stats-block--horizontal .cn-stats-block__content[data-v-8f21fbe2] {
2123
+ }
2124
+
2125
+ .cn-stats-block--horizontal .cn-stats-block__content[data-v-5b498ce7] {
139
2126
  text-align: left;
140
2127
  min-width: 0;
141
- }
142
- .cn-stats-block--horizontal .cn-stats-block__count[data-v-8f21fbe2] {
2128
+ }
2129
+
2130
+ .cn-stats-block--horizontal .cn-stats-block__count[data-v-5b498ce7] {
143
2131
  justify-content: flex-start;
144
- }
145
- .cn-stats-block--clickable[data-v-8f21fbe2] {
2132
+ }
2133
+
2134
+ .cn-stats-block--clickable[data-v-5b498ce7] {
146
2135
  cursor: pointer;
147
- }
148
- .cn-stats-block--clickable[data-v-8f21fbe2]:hover {
2136
+ }
2137
+
2138
+ .cn-stats-block--clickable[data-v-5b498ce7]:hover {
149
2139
  border-color: var(--color-primary-element);
150
2140
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
151
- }
152
- .cn-stats-block--clickable[data-v-8f21fbe2]:focus-visible {
2141
+ }
2142
+
2143
+ .cn-stats-block--clickable[data-v-5b498ce7]:focus-visible {
153
2144
  outline: 2px solid var(--color-primary-element);
154
2145
  outline-offset: 2px;
155
2146
  }
156
2147
 
157
- /* Icon */
158
- .cn-stats-block__icon[data-v-8f21fbe2] {
2148
+ /* Icon */
2149
+
2150
+ .cn-stats-block__icon[data-v-5b498ce7] {
159
2151
  display: flex;
160
2152
  align-items: center;
161
2153
  justify-content: center;
@@ -166,36 +2158,35 @@
166
2158
  color: var(--color-primary-element);
167
2159
  flex-shrink: 0;
168
2160
  margin-bottom: 8px;
169
- }
170
- .cn-stats-block--horizontal .cn-stats-block__icon[data-v-8f21fbe2] {
2161
+ }
2162
+
2163
+ .cn-stats-block--horizontal .cn-stats-block__icon[data-v-5b498ce7] {
171
2164
  margin-bottom: 0;
172
2165
  width: 36px;
173
2166
  height: 36px;
174
- }
175
- .cn-stats-block__icon--primary[data-v-8f21fbe2] {
2167
+ }
2168
+
2169
+ .cn-stats-block__icon--primary[data-v-5b498ce7] {
176
2170
  background: var(--color-primary-element-light, rgba(0, 130, 201, 0.1));
177
2171
  color: var(--color-primary-element);
178
- }
179
- .cn-stats-block__icon--success[data-v-8f21fbe2] {
2172
+ }
2173
+
2174
+ .cn-stats-block__icon--success[data-v-5b498ce7] {
180
2175
  background: rgba(70, 186, 97, 0.1);
181
2176
  color: var(--color-element-success, var(--color-success));
182
- }
183
- .cn-stats-block__icon--warning[data-v-8f21fbe2] {
2177
+ }
2178
+
2179
+ .cn-stats-block__icon--warning[data-v-5b498ce7] {
184
2180
  background: rgba(232, 163, 24, 0.1);
185
2181
  color: var(--color-element-warning, var(--color-warning));
186
- }
187
- .cn-stats-block__icon--error[data-v-8f21fbe2] {
2182
+ }
2183
+
2184
+ .cn-stats-block__icon--error[data-v-5b498ce7] {
188
2185
  background: rgba(224, 36, 36, 0.1);
189
2186
  color: var(--color-element-error, var(--color-error));
190
2187
  }
191
2188
 
192
- /* Content */
193
- .cn-stats-block__content[data-v-8f21fbe2] {
194
- flex: 1;
195
- min-width: 0;
196
- text-align: center;
197
- }
198
- .cn-stats-block__header h4[data-v-8f21fbe2] {
2189
+ .cn-stats-block__header h4[data-v-5b498ce7] {
199
2190
  margin-top: 0;
200
2191
  margin-bottom: 0.25rem;
201
2192
  color: var(--color-main-text);
@@ -204,82 +2195,88 @@
204
2195
  white-space: nowrap;
205
2196
  overflow: hidden;
206
2197
  text-overflow: ellipsis;
207
- }
208
- .cn-stats-block__count[data-v-8f21fbe2] {
209
- display: flex;
210
- align-items: baseline;
211
- justify-content: center;
212
- gap: 0.25rem;
213
- font-size: 1.2rem;
214
- margin-bottom: 0.25rem;
215
- white-space: nowrap;
216
- overflow: hidden;
217
- }
218
- .cn-stats-block__count-value[data-v-8f21fbe2] {
2198
+ }
2199
+
2200
+ .cn-stats-block__count-value[data-v-5b498ce7] {
219
2201
  font-size: 2rem;
220
2202
  font-weight: bold;
221
2203
  color: var(--color-primary-element);
222
2204
  flex-shrink: 0;
223
- }
224
- .cn-stats-block--primary .cn-stats-block__count-value[data-v-8f21fbe2] { color: var(--color-primary-element);
225
- }
226
- .cn-stats-block--success .cn-stats-block__count-value[data-v-8f21fbe2] { color: var(--color-element-success, var(--color-success));
227
- }
228
- .cn-stats-block--warning .cn-stats-block__count-value[data-v-8f21fbe2] { color: var(--color-element-warning, var(--color-warning));
229
- }
230
- .cn-stats-block--error .cn-stats-block__count-value[data-v-8f21fbe2] { color: var(--color-element-error, var(--color-error));
231
- }
232
- .cn-stats-block__count-label[data-v-8f21fbe2] {
2205
+ }
2206
+
2207
+ .cn-stats-block--primary .cn-stats-block__count-value[data-v-5b498ce7] { color: var(--color-primary-element);
2208
+ }
2209
+
2210
+ .cn-stats-block--success .cn-stats-block__count-value[data-v-5b498ce7] { color: var(--color-element-success, var(--color-success));
2211
+ }
2212
+
2213
+ .cn-stats-block--warning .cn-stats-block__count-value[data-v-5b498ce7] { color: var(--color-element-warning, var(--color-warning));
2214
+ }
2215
+
2216
+ .cn-stats-block--error .cn-stats-block__count-value[data-v-5b498ce7] { color: var(--color-element-error, var(--color-error));
2217
+ }
2218
+
2219
+ .cn-stats-block__count-label[data-v-5b498ce7] {
233
2220
  color: var(--color-text-maxcontrast);
234
2221
  overflow: hidden;
235
2222
  text-overflow: ellipsis;
236
- }
237
- .cn-stats-block__loading[data-v-8f21fbe2] {
2223
+ }
2224
+
2225
+ .cn-stats-block__loading[data-v-5b498ce7] {
238
2226
  display: flex;
239
2227
  align-items: center;
240
2228
  justify-content: center;
241
2229
  gap: 0.5rem;
242
2230
  color: var(--color-text-maxcontrast);
243
2231
  margin-bottom: 0.5rem;
244
- }
245
- .cn-stats-block__empty[data-v-8f21fbe2] {
2232
+ }
2233
+
2234
+ .cn-stats-block__empty[data-v-5b498ce7] {
246
2235
  text-align: center;
247
2236
  color: var(--color-text-maxcontrast);
248
2237
  font-style: italic;
249
2238
  margin-bottom: 0.5rem;
250
- }
251
- .cn-stats-block__breakdown[data-v-8f21fbe2] {
2239
+ }
2240
+
2241
+ .cn-stats-block__breakdown[data-v-5b498ce7] {
252
2242
  margin-top: 0.5rem;
253
2243
  padding: 0.75rem;
254
2244
  background: var(--color-background-hover);
255
2245
  border-radius: var(--border-radius);
256
2246
  border: 1px solid var(--color-border);
257
2247
  width: 100%;
258
- }
259
- .cn-stats-block__breakdown-item[data-v-8f21fbe2] {
2248
+ }
2249
+
2250
+ .cn-stats-block__breakdown-item[data-v-5b498ce7] {
260
2251
  display: flex;
261
2252
  justify-content: space-between;
262
2253
  align-items: center;
263
2254
  margin-bottom: 0.5rem;
264
- }
265
- .cn-stats-block__breakdown-item[data-v-8f21fbe2]:last-child {
2255
+ }
2256
+
2257
+ .cn-stats-block__breakdown-item[data-v-5b498ce7]:last-child {
266
2258
  margin-bottom: 0;
267
- }
268
- .cn-stats-block__breakdown-label[data-v-8f21fbe2] {
2259
+ }
2260
+
2261
+ .cn-stats-block__breakdown-label[data-v-5b498ce7] {
269
2262
  font-weight: 500;
270
2263
  color: var(--color-main-text);
271
- }
272
- .cn-stats-block__breakdown-value[data-v-8f21fbe2] {
2264
+ }
2265
+
2266
+ .cn-stats-block__breakdown-value[data-v-5b498ce7] {
273
2267
  font-weight: 600;
274
2268
  padding: 0.25rem 0.5rem;
275
2269
  border-radius: var(--border-radius);
276
2270
  background: var(--color-background-hover);
277
- }
278
- .cn-stats-block__breakdown-value--invalid[data-v-8f21fbe2] { color: var(--color-element-warning);
279
- }
280
- .cn-stats-block__breakdown-value--deleted[data-v-8f21fbe2] { color: var(--color-element-error);
281
- }
282
- .cn-stats-block__breakdown-value--published[data-v-8f21fbe2] { color: var(--color-element-success);
2271
+ }
2272
+
2273
+ .cn-stats-block__breakdown-value--invalid[data-v-5b498ce7] { color: var(--color-element-warning);
2274
+ }
2275
+
2276
+ .cn-stats-block__breakdown-value--deleted[data-v-5b498ce7] { color: var(--color-element-error);
2277
+ }
2278
+
2279
+ .cn-stats-block__breakdown-value--published[data-v-5b498ce7] { color: var(--color-element-success);
283
2280
  }
284
2281
 
285
2282
 
@@ -335,8 +2332,7 @@
335
2332
  font-weight: 600;
336
2333
  color: var(--color-main-text);
337
2334
  font-size: 14px;
338
- }
339
-
2335
+ }
340
2336
  /* Status classes for values */
341
2337
  .cn-version-info__status--ok[data-v-135fb480] {
342
2338
  color: var(--color-success);
@@ -450,12 +2446,17 @@
450
2446
  }
451
2447
 
452
2448
 
453
- .cn-card-grid__loading[data-v-c4e62862] {
2449
+ .cn-card-grid__grid[data-v-2dd064bc] {
2450
+ display: grid;
2451
+ grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
2452
+ gap: 16px;
2453
+ }
2454
+ .cn-card-grid__loading[data-v-2dd064bc] {
454
2455
  display: flex;
455
2456
  justify-content: center;
456
2457
  padding: 40px;
457
2458
  }
458
- .cn-card-grid__empty[data-v-c4e62862] {
2459
+ .cn-card-grid__empty[data-v-2dd064bc] {
459
2460
  padding: 40px 20px;
460
2461
  text-align: center;
461
2462
  }
@@ -505,12 +2506,12 @@
505
2506
  }
506
2507
 
507
2508
 
508
- .cn-row-action--destructive[data-v-d73c0bd0] {
2509
+ .cn-row-action--destructive[data-v-61defc0c] {
509
2510
  color: var(--color-error) !important;
510
2511
  }
511
2512
 
512
2513
 
513
- .cn-context-menu[data-v-a96cd2ac] {
2514
+ .cn-context-menu[data-v-56560e88] {
514
2515
  /* Hide the NcActions trigger button — menu opens only via right-click */
515
2516
  display: none;
516
2517
  }
@@ -650,8 +2651,7 @@
650
2651
  display: flex;
651
2652
  flex-direction: column;
652
2653
  gap: 12px;
653
- }
654
-
2654
+ }
655
2655
  /* Summary table */
656
2656
  .cn-mass-import__results h3[data-v-a78a42ac] {
657
2657
  margin: 0 0 12px;
@@ -709,8 +2709,7 @@
709
2709
  }
710
2710
  .cn-mass-import__expand--open[data-v-a78a42ac] {
711
2711
  transform: rotate(180deg);
712
- }
713
-
2712
+ }
714
2713
  /* Error details */
715
2714
  .cn-mass-import__error-row td[data-v-a78a42ac] {
716
2715
  padding: 8px 12px;
@@ -776,26 +2775,86 @@
776
2775
  }
777
2776
 
778
2777
 
779
- .cn-form-dialog__form[data-v-3526144d] {
2778
+ .cn-json-viewer[data-v-e4d4a57e] {
2779
+ display: flex;
2780
+ flex-direction: column;
2781
+ gap: 8px;
2782
+ }
2783
+ .cn-json-viewer__codemirror[data-v-e4d4a57e] {
2784
+ position: relative;
2785
+ }
2786
+ .cn-json-viewer__codemirror[data-v-e4d4a57e] :deep(.cm-editor) {
2787
+ height: 100%;
2788
+ outline: none !important;
2789
+ }
2790
+ .cn-json-viewer__codemirror[data-v-e4d4a57e] :deep(.cm-scroller) {
2791
+ overflow: auto;
2792
+ }
2793
+ .cn-json-viewer__codemirror[data-v-e4d4a57e] :deep(.cm-content) {
2794
+ border-radius: 0 !important;
2795
+ border: none !important;
2796
+ }
2797
+ .cn-json-viewer__codemirror--light > .vue-codemirror[data-v-e4d4a57e] {
2798
+ border: 1px dotted silver;
2799
+ }
2800
+ .cn-json-viewer__codemirror--dark > .vue-codemirror[data-v-e4d4a57e] {
2801
+ border: 1px dotted grey;
2802
+ }
2803
+ /* Text cursor */
2804
+ .cn-json-viewer__codemirror :deep(.cm-content) *[data-v-e4d4a57e] {
2805
+ cursor: text !important;
2806
+ }
2807
+ /* PATCH SELECTION COLOR - default selection system does not work */
2808
+ /* Selection background — CodeMirror uses .cm-selectionBackground instead of ::selection */
2809
+ .cn-json-viewer__codemirror--light[data-v-e4d4a57e] :deep(.cm-selectionBackground) {
2810
+ background: #3390ff !important;
2811
+ }
2812
+ .cn-json-viewer__codemirror--light :deep(.cm-selectionBackground) + .cm-selectionBackground[data-v-e4d4a57e],
2813
+ .cn-json-viewer__codemirror--light[data-v-e4d4a57e] :deep(.cm-line ::selection) {
2814
+ color: white !important;
2815
+ }
2816
+ .cn-json-viewer__codemirror--dark[data-v-e4d4a57e] :deep(.cm-selectionBackground) {
2817
+ background: #3390ff !important;
2818
+ }
2819
+ /* Selected text color */
2820
+ .cn-json-viewer__codemirror--light[data-v-e4d4a57e] :deep(.cm-content ::selection) {
2821
+ background: #3390ff !important;
2822
+ color: white !important;
2823
+ }
2824
+ .cn-json-viewer__codemirror--dark[data-v-e4d4a57e] :deep(.cm-content ::selection) {
2825
+ background: #3390ff !important;
2826
+ color: white !important;
2827
+ }
2828
+ .cn-json-viewer__format-btn[data-v-e4d4a57e] {
2829
+ margin-top: 8px;
2830
+ }
2831
+ .cn-json-viewer__error[data-v-e4d4a57e] {
2832
+ color: var(--color-error);
2833
+ font-size: 14px;
2834
+ }
2835
+
2836
+
2837
+ .cn-form-dialog__form[data-v-0c487c8d] {
780
2838
  display: flex;
781
2839
  flex-direction: column;
782
2840
  gap: 4px;
783
2841
  }
784
- .cn-form-dialog__field[data-v-3526144d] {
2842
+ .cn-form-dialog__field[data-v-0c487c8d] {
785
2843
  margin-bottom: 8px;
786
2844
  }
787
- .cn-form-dialog__textarea-wrapper[data-v-3526144d],
788
- .cn-form-dialog__select-wrapper[data-v-3526144d] {
2845
+ .cn-form-dialog__textarea-wrapper[data-v-0c487c8d],
2846
+ .cn-form-dialog__select-wrapper[data-v-0c487c8d],
2847
+ .cn-form-dialog__json-wrapper[data-v-0c487c8d] {
789
2848
  display: flex;
790
2849
  flex-direction: column;
791
2850
  gap: 4px;
792
2851
  }
793
- .cn-form-dialog__label[data-v-3526144d] {
2852
+ .cn-form-dialog__label[data-v-0c487c8d] {
794
2853
  font-weight: 600;
795
2854
  font-size: 0.9em;
796
2855
  color: var(--color-main-text);
797
2856
  }
798
- .cn-form-dialog__textarea[data-v-3526144d] {
2857
+ .cn-form-dialog__textarea[data-v-0c487c8d] {
799
2858
  width: 100%;
800
2859
  min-height: 80px;
801
2860
  padding: 8px;
@@ -807,19 +2866,19 @@
807
2866
  font-size: inherit;
808
2867
  resize: vertical;
809
2868
  }
810
- .cn-form-dialog__textarea[data-v-3526144d]:focus {
2869
+ .cn-form-dialog__textarea[data-v-0c487c8d]:focus {
811
2870
  border-color: var(--color-primary-element);
812
2871
  outline: none;
813
2872
  }
814
- .cn-form-dialog__textarea[data-v-3526144d]:disabled {
2873
+ .cn-form-dialog__textarea[data-v-0c487c8d]:disabled {
815
2874
  opacity: 0.5;
816
2875
  cursor: not-allowed;
817
2876
  }
818
- .cn-form-dialog__helper[data-v-3526144d] {
2877
+ .cn-form-dialog__helper[data-v-0c487c8d] {
819
2878
  font-size: 0.85em;
820
2879
  color: var(--color-text-maxcontrast);
821
2880
  }
822
- .cn-form-dialog__helper--error[data-v-3526144d] {
2881
+ .cn-form-dialog__helper--error[data-v-0c487c8d] {
823
2882
  color: var(--color-error);
824
2883
  }
825
2884
 
@@ -832,8 +2891,7 @@
832
2891
  display: flex;
833
2892
  align-items: center;
834
2893
  gap: 6px;
835
- }
836
-
2894
+ }
837
2895
  /* patch extreme size in field */
838
2896
  .cn-advanced-form-dialog__boolean-input-row__input > span[data-v-e6f842ea] {
839
2897
  padding-left: 0;
@@ -892,8 +2950,7 @@
892
2950
  }
893
2951
  .cn-advanced-form-dialog__table-row[data-v-d25a1406]:hover {
894
2952
  background-color: var(--color-background-hover);
895
- }
896
-
2953
+ }
897
2954
  /* Active/selected row: light blue; ensure it wins over validation state classes */
898
2955
  .cn-advanced-form-dialog__table-row.cn-advanced-form-dialog__table-row--selected[data-v-d25a1406],
899
2956
  .cn-advanced-form-dialog__table-row--selected[data-v-d25a1406]:hover {
@@ -1011,122 +3068,110 @@
1011
3068
  }
1012
3069
 
1013
3070
 
1014
- .cn-advanced-form-dialog__json-editor[data-v-1aeee536] {
3071
+ .cn-advanced-form-dialog__json-editor[data-v-211fe3d9] {
1015
3072
  display: flex;
1016
3073
  flex-direction: column;
1017
3074
  gap: 8px;
1018
3075
  }
1019
- .cn-advanced-form-dialog__codemirror-container[data-v-1aeee536] {
3076
+ .cn-advanced-form-dialog__codemirror-container[data-v-211fe3d9] {
1020
3077
  margin-top: 6px;
1021
3078
  border: 1px solid var(--color-border);
1022
3079
  border-radius: var(--border-radius);
1023
3080
  position: relative;
1024
3081
  }
1025
- .cn-advanced-form-dialog__codemirror-container[data-v-1aeee536] :deep(.cm-editor) {
1026
- height: 100%;
3082
+ .cn-advanced-form-dialog__codemirror-container[data-v-211fe3d9] :deep(.cm-editor) {
3083
+ height: 100%;
3084
+ outline: none !important;
1027
3085
  }
1028
- .cn-advanced-form-dialog__codemirror-container[data-v-1aeee536] :deep(.cm-scroller) {
3086
+ .cn-advanced-form-dialog__codemirror-container[data-v-211fe3d9] :deep(.cm-scroller) {
1029
3087
  overflow: auto;
1030
3088
  }
1031
- .cn-advanced-form-dialog__codemirror-container[data-v-1aeee536] :deep(.cm-content) {
3089
+ .cn-advanced-form-dialog__codemirror-container[data-v-211fe3d9] :deep(.cm-content) {
1032
3090
  border-radius: 0 !important;
1033
3091
  border: none !important;
1034
3092
  }
1035
- .cn-advanced-form-dialog__codemirror-container[data-v-1aeee536] :deep(.cm-editor) {
1036
- outline: none !important;
1037
- }
1038
- .cn-advanced-form-dialog__codemirror-container--light > .vue-codemirror[data-v-1aeee536] {
3093
+ .cn-advanced-form-dialog__codemirror-container--light > .vue-codemirror[data-v-211fe3d9] {
1039
3094
  border: 1px dotted silver;
1040
3095
  }
1041
- .cn-advanced-form-dialog__codemirror-container--dark > .vue-codemirror[data-v-1aeee536] {
3096
+ .cn-advanced-form-dialog__codemirror-container--dark > .vue-codemirror[data-v-211fe3d9] {
1042
3097
  border: 1px dotted grey;
1043
- }
1044
-
1045
- /* value text color */
3098
+ }
3099
+ /* value text color */
1046
3100
  /* string */
1047
- .cn-advanced-form-dialog__codemirror-container--light[data-v-1aeee536] :deep(.ͼe) {
3101
+ .cn-advanced-form-dialog__codemirror-container--light[data-v-211fe3d9] :deep(.ͼe) {
1048
3102
  color: #448c27;
1049
3103
  }
1050
- .cn-advanced-form-dialog__codemirror-container--dark[data-v-1aeee536] :deep(.ͼe) {
3104
+ .cn-advanced-form-dialog__codemirror-container--dark[data-v-211fe3d9] :deep(.ͼe) {
1051
3105
  color: #88c379;
1052
- }
1053
-
3106
+ }
1054
3107
  /* boolean */
1055
- .cn-advanced-form-dialog__codemirror-container--light[data-v-1aeee536] :deep(.ͼc) {
3108
+ .cn-advanced-form-dialog__codemirror-container--light[data-v-211fe3d9] :deep(.ͼc) {
1056
3109
  color: #221199;
1057
3110
  }
1058
- .cn-advanced-form-dialog__codemirror-container--dark[data-v-1aeee536] :deep(.ͼc) {
3111
+ .cn-advanced-form-dialog__codemirror-container--dark[data-v-211fe3d9] :deep(.ͼc) {
1059
3112
  color: #8d64f7;
1060
- }
1061
-
3113
+ }
1062
3114
  /* null */
1063
- .cn-advanced-form-dialog__codemirror-container--light[data-v-1aeee536] :deep(.ͼb) {
3115
+ .cn-advanced-form-dialog__codemirror-container--light[data-v-211fe3d9] :deep(.ͼb) {
1064
3116
  color: #770088;
1065
3117
  }
1066
- .cn-advanced-form-dialog__codemirror-container--dark[data-v-1aeee536] :deep(.ͼb) {
3118
+ .cn-advanced-form-dialog__codemirror-container--dark[data-v-211fe3d9] :deep(.ͼb) {
1067
3119
  color: #be55cd;
1068
- }
1069
-
3120
+ }
1070
3121
  /* number */
1071
- .cn-advanced-form-dialog__codemirror-container--light[data-v-1aeee536] :deep(.ͼd) {
3122
+ .cn-advanced-form-dialog__codemirror-container--light[data-v-211fe3d9] :deep(.ͼd) {
1072
3123
  color: #d19a66;
1073
3124
  }
1074
- .cn-advanced-form-dialog__codemirror-container--dark[data-v-1aeee536] :deep(.ͼd) {
3125
+ .cn-advanced-form-dialog__codemirror-container--dark[data-v-211fe3d9] :deep(.ͼd) {
1075
3126
  color: #9d6c3a;
1076
- }
1077
-
3127
+ }
1078
3128
  /* text cursor */
1079
- .cn-advanced-form-dialog__codemirror-container :deep(.cm-content) *[data-v-1aeee536] {
3129
+ .cn-advanced-form-dialog__codemirror-container :deep(.cm-content) *[data-v-211fe3d9] {
1080
3130
  cursor: text !important;
1081
- }
1082
-
3131
+ }
1083
3132
  /* selection color */
1084
- .cn-advanced-form-dialog__codemirror-container--light[data-v-1aeee536] :deep(.cm-line)::selection,
1085
- .cn-advanced-form-dialog__codemirror-container--light[data-v-1aeee536] :deep(.cm-line) ::selection {
3133
+ .cn-advanced-form-dialog__codemirror-container--light[data-v-211fe3d9] :deep(.cm-line)::selection,
3134
+ .cn-advanced-form-dialog__codemirror-container--light[data-v-211fe3d9] :deep(.cm-line) ::selection {
1086
3135
  background-color: #d7eaff !important;
1087
3136
  color: black;
1088
3137
  }
1089
- .cn-advanced-form-dialog__codemirror-container--dark[data-v-1aeee536] :deep(.cm-line)::selection,
1090
- .cn-advanced-form-dialog__codemirror-container--dark[data-v-1aeee536] :deep(.cm-line) ::selection {
3138
+ .cn-advanced-form-dialog__codemirror-container--dark[data-v-211fe3d9] :deep(.cm-line)::selection,
3139
+ .cn-advanced-form-dialog__codemirror-container--dark[data-v-211fe3d9] :deep(.cm-line) ::selection {
1091
3140
  background-color: #8fb3e6 !important;
1092
3141
  color: black;
1093
- }
1094
-
3142
+ }
1095
3143
  /* string selection */
1096
- .cn-advanced-form-dialog__codemirror-container--light[data-v-1aeee536] :deep(.cm-line .ͼe)::selection {
3144
+ .cn-advanced-form-dialog__codemirror-container--light[data-v-211fe3d9] :deep(.cm-line .ͼe)::selection {
1097
3145
  color: #2d770f;
1098
3146
  }
1099
- .cn-advanced-form-dialog__codemirror-container--dark[data-v-1aeee536] :deep(.cm-line .ͼe)::selection {
3147
+ .cn-advanced-form-dialog__codemirror-container--dark[data-v-211fe3d9] :deep(.cm-line .ͼe)::selection {
1100
3148
  color: #104e0c;
1101
- }
1102
-
3149
+ }
1103
3150
  /* boolean selection */
1104
- .cn-advanced-form-dialog__codemirror-container--light[data-v-1aeee536] :deep(.cm-line .ͼc)::selection {
3151
+ .cn-advanced-form-dialog__codemirror-container--light[data-v-211fe3d9] :deep(.cm-line .ͼc)::selection {
1105
3152
  color: #221199;
1106
3153
  }
1107
- .cn-advanced-form-dialog__codemirror-container--dark[data-v-1aeee536] :deep(.cm-line .ͼc)::selection {
3154
+ .cn-advanced-form-dialog__codemirror-container--dark[data-v-211fe3d9] :deep(.cm-line .ͼc)::selection {
1108
3155
  color: #4026af;
1109
- }
1110
-
3156
+ }
1111
3157
  /* null selection */
1112
- .cn-advanced-form-dialog__codemirror-container--light[data-v-1aeee536] :deep(.cm-line .ͼb)::selection {
3158
+ .cn-advanced-form-dialog__codemirror-container--light[data-v-211fe3d9] :deep(.cm-line .ͼb)::selection {
1113
3159
  color: #770088;
1114
3160
  }
1115
- .cn-advanced-form-dialog__codemirror-container--dark[data-v-1aeee536] :deep(.cm-line .ͼb)::selection {
3161
+ .cn-advanced-form-dialog__codemirror-container--dark[data-v-211fe3d9] :deep(.cm-line .ͼb)::selection {
1116
3162
  color: #770088;
1117
- }
1118
-
3163
+ }
1119
3164
  /* number selection */
1120
- .cn-advanced-form-dialog__codemirror-container--light[data-v-1aeee536] :deep(.cm-line .ͼd)::selection {
3165
+ .cn-advanced-form-dialog__codemirror-container--light[data-v-211fe3d9] :deep(.cm-line .ͼd)::selection {
1121
3166
  color: #8c5c2c;
1122
3167
  }
1123
- .cn-advanced-form-dialog__codemirror-container--dark[data-v-1aeee536] :deep(.cm-line .ͼd)::selection {
3168
+ .cn-advanced-form-dialog__codemirror-container--dark[data-v-211fe3d9] :deep(.cm-line .ͼd)::selection {
1124
3169
  color: #623907;
1125
3170
  }
1126
- .cn-advanced-form-dialog__format-btn[data-v-1aeee536] {
3171
+ .cn-advanced-form-dialog__format-btn[data-v-211fe3d9] {
1127
3172
  margin-top: 8px;
1128
3173
  }
1129
- .cn-advanced-form-dialog__json-error[data-v-1aeee536] {
3174
+ .cn-advanced-form-dialog__json-error[data-v-211fe3d9] {
1130
3175
  color: var(--color-error);
1131
3176
  font-size: 14px;
1132
3177
  }
@@ -1141,8 +3186,7 @@
1141
3186
  display: flex;
1142
3187
  flex-direction: column;
1143
3188
  gap: 12px;
1144
- }
1145
-
3189
+ }
1146
3190
  /* Bootstrap-Vue tab styling to match ViewObject */
1147
3191
  .tabContainer[data-v-56dc256b] {
1148
3192
  margin-top: 20px;
@@ -1222,8 +3266,7 @@
1222
3266
  }
1223
3267
  .cn-kpi-grid--cols-4[data-v-66291afe] {
1224
3268
  grid-template-columns: repeat(4, 1fr);
1225
- }
1226
-
3269
+ }
1227
3270
  /* Responsive breakpoints */
1228
3271
  @media (max-width: 1200px) {
1229
3272
  .cn-kpi-grid--cols-4[data-v-66291afe] {
@@ -1358,8 +3401,7 @@
1358
3401
  color: var(--color-text-maxcontrast);
1359
3402
  font-size: 13px;
1360
3403
  margin: 0 0 8px 0;
1361
- }
1362
-
3404
+ }
1363
3405
  /* Slide transition */
1364
3406
  .slide-enter-active[data-v-94fecc26],
1365
3407
  .slide-leave-active[data-v-94fecc26] {
@@ -1373,8 +3415,7 @@
1373
3415
  padding-top: 0;
1374
3416
  padding-bottom: 0;
1375
3417
  opacity: 0;
1376
- }
1377
-
3418
+ }
1378
3419
  /* Last row in list should not have bottom border */
1379
3420
  .cn-register-mapping__type-list[data-v-94fecc26] > :last-child {
1380
3421
  border-bottom: none;
@@ -1420,7 +3461,7 @@
1420
3461
  }
1421
3462
 
1422
3463
 
1423
- .cn-widget-wrapper[data-v-4dd9b836] {
3464
+ .cn-widget-wrapper[data-v-2653d35b] {
1424
3465
  height: 100%;
1425
3466
  display: flex;
1426
3467
  flex-direction: column;
@@ -1428,17 +3469,23 @@
1428
3469
  border: 1px solid var(--color-border);
1429
3470
  overflow: hidden;
1430
3471
  }
1431
- .cn-widget-wrapper--borderless[data-v-4dd9b836] {
3472
+ .cn-widget-wrapper__content[data-v-2653d35b] {
3473
+ flex: 1;
3474
+ overflow: auto;
3475
+ min-height: 0;
3476
+ padding: 16px;
3477
+ }
3478
+ .cn-widget-wrapper--borderless[data-v-2653d35b] {
1432
3479
  border: none;
1433
3480
  background: transparent;
1434
3481
  }
1435
- .cn-widget-wrapper--borderless .cn-widget-wrapper__content[data-v-4dd9b836] {
3482
+ .cn-widget-wrapper--borderless .cn-widget-wrapper__content[data-v-2653d35b] {
1436
3483
  padding: 0;
1437
3484
  }
1438
- .cn-widget-wrapper--flush .cn-widget-wrapper__content[data-v-4dd9b836] {
3485
+ .cn-widget-wrapper--flush .cn-widget-wrapper__content[data-v-2653d35b] {
1439
3486
  padding: 0;
1440
3487
  }
1441
- .cn-widget-wrapper__header[data-v-4dd9b836] {
3488
+ .cn-widget-wrapper__header[data-v-2653d35b] {
1442
3489
  display: flex;
1443
3490
  align-items: center;
1444
3491
  justify-content: space-between;
@@ -1446,18 +3493,18 @@
1446
3493
  border-bottom: 1px solid var(--color-border);
1447
3494
  flex-shrink: 0;
1448
3495
  }
1449
- .cn-widget-wrapper__header-left[data-v-4dd9b836] {
3496
+ .cn-widget-wrapper__header-left[data-v-2653d35b] {
1450
3497
  display: flex;
1451
3498
  align-items: center;
1452
3499
  gap: 8px;
1453
3500
  min-width: 0;
1454
3501
  }
1455
- .cn-widget-wrapper__icon[data-v-4dd9b836] {
3502
+ .cn-widget-wrapper__icon[data-v-2653d35b] {
1456
3503
  width: 24px;
1457
3504
  height: 24px;
1458
3505
  flex-shrink: 0;
1459
3506
  }
1460
- .cn-widget-wrapper__title[data-v-4dd9b836] {
3507
+ .cn-widget-wrapper__title[data-v-2653d35b] {
1461
3508
  font-weight: 600;
1462
3509
  font-size: 14px;
1463
3510
  margin: 0;
@@ -1465,18 +3512,12 @@
1465
3512
  overflow: hidden;
1466
3513
  text-overflow: ellipsis;
1467
3514
  }
1468
- .cn-widget-wrapper__content[data-v-4dd9b836] {
1469
- flex: 1;
1470
- overflow: auto;
1471
- min-height: 0;
1472
- padding: 16px;
1473
- }
1474
- .cn-widget-wrapper__actions[data-v-4dd9b836] {
3515
+ .cn-widget-wrapper__actions[data-v-2653d35b] {
1475
3516
  display: flex;
1476
3517
  gap: 4px;
1477
3518
  flex-shrink: 0;
1478
3519
  }
1479
- .cn-widget-wrapper__footer[data-v-4dd9b836] {
3520
+ .cn-widget-wrapper__footer[data-v-2653d35b] {
1480
3521
  display: flex;
1481
3522
  justify-content: flex-end;
1482
3523
  gap: 8px;
@@ -1484,12 +3525,12 @@
1484
3525
  border-top: 1px solid var(--color-border);
1485
3526
  flex-shrink: 0;
1486
3527
  }
1487
- .cn-widget-wrapper__footer-link[data-v-4dd9b836] {
3528
+ .cn-widget-wrapper__footer-link[data-v-2653d35b] {
1488
3529
  font-size: 13px;
1489
3530
  color: var(--color-primary-element);
1490
3531
  text-decoration: none;
1491
3532
  }
1492
- .cn-widget-wrapper__footer-link[data-v-4dd9b836]:hover {
3533
+ .cn-widget-wrapper__footer-link[data-v-2653d35b]:hover {
1493
3534
  text-decoration: underline;
1494
3535
  }
1495
3536
 
@@ -2070,6 +4111,18 @@
2070
4111
 
2071
4112
 
2072
4113
 
4114
+
4115
+
4116
+
4117
+
4118
+
4119
+
4120
+
4121
+
4122
+
4123
+
4124
+
4125
+
2073
4126
 
2074
4127
 
2075
4128
 
@@ -2085,79 +4138,74 @@
2085
4138
 
2086
4139
 
2087
4140
  /* Result phase container */
2088
- .cn-tabbed-form-dialog__result[data-v-04877599] {
4141
+ .cn-tabbed-form-dialog__result[data-v-1eb8c90d] {
2089
4142
  padding: 16px 0;
2090
- }
2091
-
4143
+ }
2092
4144
  /* Form phase container */
2093
- .cn-tabbed-form-dialog__form[data-v-04877599] {
4145
+ .cn-tabbed-form-dialog__form[data-v-1eb8c90d] {
2094
4146
  display: flex;
2095
4147
  flex-direction: column;
2096
4148
  gap: 8px;
2097
- }
2098
-
4149
+ }
2099
4150
  /* Tabs wrapper */
2100
- .cn-tabbed-form-dialog__tabs[data-v-04877599] {
4151
+ .cn-tabbed-form-dialog__tabs[data-v-1eb8c90d] {
2101
4152
  display: flex;
2102
4153
  flex-direction: column;
2103
4154
  gap: 12px;
2104
- }
2105
-
4155
+ }
2106
4156
  /* Tab content area — also uses .form-editor for compatibility */
2107
- .cn-tabbed-form-dialog__tab-content[data-v-04877599] {
4157
+ .cn-tabbed-form-dialog__tab-content[data-v-1eb8c90d] {
2108
4158
  display: flex;
2109
4159
  flex-direction: column;
2110
4160
  gap: 16px;
2111
4161
  padding: 16px 0;
2112
- }
2113
-
4162
+ }
2114
4163
  /* Create another checkbox — push to the left in actions area */
2115
- .cn-tabbed-form-dialog__create-another[data-v-04877599] {
4164
+ .cn-tabbed-form-dialog__create-another[data-v-1eb8c90d] {
2116
4165
  margin-right: auto;
2117
- }
2118
-
4166
+ }
2119
4167
  /* Bootstrap-Vue tab container styling */
2120
- .tabContainer > * ul > li[data-v-04877599] {
4168
+ .tabContainer > * ul > li[data-v-1eb8c90d] {
2121
4169
  display: flex;
2122
4170
  flex: 1;
2123
4171
  }
2124
- .tabContainer > * ul > li[data-v-04877599]:hover {
4172
+ .tabContainer > * ul > li[data-v-1eb8c90d]:hover {
2125
4173
  background-color: var(--color-background-hover);
2126
4174
  }
2127
- .tabContainer > * ul > li > a[data-v-04877599] {
4175
+ .tabContainer > * ul > li > a[data-v-1eb8c90d] {
2128
4176
  flex: 1;
2129
4177
  text-align: center;
2130
4178
  }
2131
- .tabContainer > * ul > li > .active[data-v-04877599] {
4179
+ .tabContainer > * ul > li > .active[data-v-1eb8c90d] {
2132
4180
  background: transparent !important;
2133
4181
  color: var(--color-main-text) !important;
2134
4182
  border-bottom: var(--default-grid-baseline) solid var(--color-primary-element) !important;
2135
4183
  }
2136
- .tabContainer > * ul[role="tablist"][data-v-04877599] {
4184
+ .tabContainer > * ul[role="tablist"][data-v-1eb8c90d] {
2137
4185
  display: flex;
2138
4186
  margin: 10px 8px 0 8px;
2139
4187
  justify-content: space-between;
2140
4188
  border-bottom: 1px solid var(--color-border);
2141
4189
  }
2142
- .tabContainer > * ul[role="tablist"] > * a[role="tab"][data-v-04877599] {
4190
+ .tabContainer > * ul[role="tablist"] > * a[role="tab"][data-v-1eb8c90d] {
2143
4191
  padding-inline-start: 10px;
2144
4192
  padding-inline-end: 10px;
2145
4193
  padding-block-start: 10px;
2146
4194
  padding-block-end: 10px;
2147
4195
  }
2148
- .tabContainer > * div[role="tabpanel"][data-v-04877599] {
4196
+ .tabContainer > * div[role="tabpanel"][data-v-1eb8c90d] {
2149
4197
  margin-block-start: var(--OR-margin-10);
2150
4198
  }
2151
- [data-v-04877599]:deep(.nav-tabs) {
4199
+ [data-v-1eb8c90d]:deep(.nav-tabs) {
2152
4200
  border-bottom: 1px solid var(--color-border);
2153
4201
  margin-bottom: 15px;
2154
4202
  display: flex;
2155
4203
  }
2156
- [data-v-04877599]:deep(.nav-tabs .nav-item) {
4204
+ [data-v-1eb8c90d]:deep(.nav-tabs .nav-item) {
2157
4205
  display: flex;
2158
4206
  flex: 1;
2159
4207
  }
2160
- [data-v-04877599]:deep(.nav-tabs .nav-link) {
4208
+ [data-v-1eb8c90d]:deep(.nav-tabs .nav-link) {
2161
4209
  flex: 1;
2162
4210
  text-align: center;
2163
4211
  border: none;
@@ -2169,27 +4217,27 @@
2169
4217
  gap: 8px;
2170
4218
  justify-content: center;
2171
4219
  }
2172
- [data-v-04877599]:deep(.nav-tabs .nav-link.active) {
4220
+ [data-v-1eb8c90d]:deep(.nav-tabs .nav-link.active) {
2173
4221
  color: var(--color-main-text);
2174
4222
  border-bottom: 2px solid var(--color-primary);
2175
4223
  background-color: transparent;
2176
4224
  }
2177
- [data-v-04877599]:deep(.nav-tabs .nav-link:hover) {
4225
+ [data-v-1eb8c90d]:deep(.nav-tabs .nav-link:hover) {
2178
4226
  border-bottom: 2px solid var(--color-border);
2179
4227
  }
2180
- [data-v-04877599]:deep(.nav-tabs .nav-link.disabled) {
4228
+ [data-v-1eb8c90d]:deep(.nav-tabs .nav-link.disabled) {
2181
4229
  cursor: not-allowed;
2182
4230
  opacity: 0.5;
2183
4231
  color: var(--color-text-maxcontrast);
2184
4232
  pointer-events: auto;
2185
4233
  }
2186
- [data-v-04877599]:deep(.nav-tabs .nav-link.disabled *) {
4234
+ [data-v-1eb8c90d]:deep(.nav-tabs .nav-link.disabled *) {
2187
4235
  cursor: not-allowed;
2188
4236
  }
2189
- [data-v-04877599]:deep(.nav-tabs .nav-link.disabled:hover) {
4237
+ [data-v-1eb8c90d]:deep(.nav-tabs .nav-link.disabled:hover) {
2190
4238
  border-bottom: 2px solid transparent;
2191
4239
  }
2192
- [data-v-04877599]:deep(.tab-content) {
4240
+ [data-v-1eb8c90d]:deep(.tab-content) {
2193
4241
  padding: 16px;
2194
4242
  background-color: var(--color-main-background);
2195
4243
  }
@@ -2715,8 +4763,7 @@
2715
4763
  }
2716
4764
  .cn-progress-bar__fill--rounded[data-v-31e820d6] {
2717
4765
  border-radius: 4px;
2718
- }
2719
-
4766
+ }
2720
4767
  /* Variant colors */
2721
4768
  .cn-progress-bar__fill--default[data-v-31e820d6] {
2722
4769
  background: var(--color-main-text);
@@ -2784,70 +4831,6 @@
2784
4831
  }
2785
4832
 
2786
4833
 
2787
- .cn-json-viewer[data-v-699c5b96] {
2788
- display: flex;
2789
- flex-direction: column;
2790
- gap: 8px;
2791
- }
2792
- .cn-json-viewer__codemirror[data-v-699c5b96] {
2793
- border: 1px solid var(--color-border);
2794
- border-radius: var(--border-radius);
2795
- position: relative;
2796
- }
2797
- .cn-json-viewer__codemirror[data-v-699c5b96] :deep(.cm-editor) {
2798
- height: 100%;
2799
- outline: none !important;
2800
- }
2801
- .cn-json-viewer__codemirror[data-v-699c5b96] :deep(.cm-scroller) {
2802
- overflow: auto;
2803
- }
2804
- .cn-json-viewer__codemirror[data-v-699c5b96] :deep(.cm-content) {
2805
- border-radius: 0 !important;
2806
- border: none !important;
2807
- }
2808
- .cn-json-viewer__codemirror--light > .vue-codemirror[data-v-699c5b96] {
2809
- border: 1px dotted silver;
2810
- }
2811
- .cn-json-viewer__codemirror--dark > .vue-codemirror[data-v-699c5b96] {
2812
- border: 1px dotted grey;
2813
- }
2814
-
2815
- /* Text cursor */
2816
- .cn-json-viewer__codemirror :deep(.cm-content) *[data-v-699c5b96] {
2817
- cursor: text !important;
2818
- }
2819
-
2820
- /* PATCH SELECTION COLOR - default selection system does not work */
2821
- /* Selection background — CodeMirror uses .cm-selectionBackground instead of ::selection */
2822
- .cn-json-viewer__codemirror--light[data-v-699c5b96] :deep(.cm-selectionBackground) {
2823
- background: #3390ff !important;
2824
- }
2825
- .cn-json-viewer__codemirror--light :deep(.cm-selectionBackground) + .cm-selectionBackground[data-v-699c5b96],
2826
- .cn-json-viewer__codemirror--light[data-v-699c5b96] :deep(.cm-line ::selection) {
2827
- color: white !important;
2828
- }
2829
- .cn-json-viewer__codemirror--dark[data-v-699c5b96] :deep(.cm-selectionBackground) {
2830
- background: #3390ff !important;
2831
- }
2832
-
2833
- /* Selected text color */
2834
- .cn-json-viewer__codemirror--light[data-v-699c5b96] :deep(.cm-content ::selection) {
2835
- background: #3390ff !important;
2836
- color: white !important;
2837
- }
2838
- .cn-json-viewer__codemirror--dark[data-v-699c5b96] :deep(.cm-content ::selection) {
2839
- background: #3390ff !important;
2840
- color: white !important;
2841
- }
2842
- .cn-json-viewer__format-btn[data-v-699c5b96] {
2843
- margin-top: 8px;
2844
- }
2845
- .cn-json-viewer__error[data-v-699c5b96] {
2846
- color: var(--color-error);
2847
- font-size: 14px;
2848
- }
2849
-
2850
-
2851
4834
 
2852
4835
 
2853
4836
 
@@ -3021,15 +5004,13 @@
3021
5004
  .cn-detail-grid--grid[data-v-cf35e538] {
3022
5005
  display: grid;
3023
5006
  gap: calc(4 * var(--default-grid-baseline, 4px));
3024
- }
3025
-
5007
+ }
3026
5008
  /* ===== Horizontal layout ===== */
3027
5009
  .cn-detail-grid--horizontal[data-v-cf35e538] {
3028
5010
  display: flex;
3029
5011
  flex-direction: column;
3030
5012
  gap: calc(3 * var(--default-grid-baseline, 4px));
3031
- }
3032
-
5013
+ }
3033
5014
  /* ===== Item (card style) ===== */
3034
5015
  .cn-detail-grid__item[data-v-cf35e538] {
3035
5016
  display: flex;
@@ -3038,21 +5019,18 @@
3038
5019
  padding: calc(2 * var(--default-grid-baseline, 4px)) calc(3 * var(--default-grid-baseline, 4px));
3039
5020
  background: var(--color-background-hover);
3040
5021
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
3041
- }
3042
-
5022
+ }
3043
5023
  /* Accent border */
3044
5024
  .cn-detail-grid--accent .cn-detail-grid__item[data-v-cf35e538] {
3045
5025
  border-left: 3px solid var(--color-primary-element);
3046
- }
3047
-
5026
+ }
3048
5027
  /* Horizontal item: row direction */
3049
5028
  .cn-detail-grid__item--horizontal[data-v-cf35e538] {
3050
5029
  flex-direction: row;
3051
5030
  align-items: center;
3052
5031
  gap: calc(4 * var(--default-grid-baseline, 4px));
3053
5032
  border-radius: var(--border-radius);
3054
- }
3055
-
5033
+ }
3056
5034
  /* ===== Label ===== */
3057
5035
  .cn-detail-grid__label[data-v-cf35e538] {
3058
5036
  font-size: 0.85em;
@@ -3062,8 +5040,7 @@
3062
5040
  .cn-detail-grid--horizontal .cn-detail-grid__label[data-v-cf35e538] {
3063
5041
  min-width: var(--cn-detail-grid-label-width, 150px);
3064
5042
  flex-shrink: 0;
3065
- }
3066
-
5043
+ }
3067
5044
  /* ===== Value ===== */
3068
5045
  .cn-detail-grid__value[data-v-cf35e538] {
3069
5046
  font-size: 1em;
@@ -3073,22 +5050,19 @@
3073
5050
  }
3074
5051
  .cn-detail-grid--horizontal .cn-detail-grid__value[data-v-cf35e538] {
3075
5052
  flex: 1;
3076
- }
3077
-
5053
+ }
3078
5054
  /* ===== Actions ===== */
3079
5055
  .cn-detail-grid__actions[data-v-cf35e538] {
3080
5056
  flex-shrink: 0;
3081
5057
  display: flex;
3082
5058
  align-items: center;
3083
- }
3084
-
5059
+ }
3085
5060
  /* ===== Empty state ===== */
3086
5061
  .cn-detail-grid__empty[data-v-cf35e538] {
3087
5062
  color: var(--color-text-maxcontrast);
3088
5063
  font-style: italic;
3089
5064
  padding: calc(2 * var(--default-grid-baseline, 4px));
3090
- }
3091
-
5065
+ }
3092
5066
  /* ===== Responsive ===== */
3093
5067
  @media (max-width: 600px) {
3094
5068
  .cn-detail-grid--grid[data-v-cf35e538] {
@@ -3410,16 +5384,16 @@ to { opacity: 1; max-height: 600px;
3410
5384
  }
3411
5385
 
3412
5386
 
3413
- .cn-info-widget[data-v-fbcf1704] {
5387
+ .cn-info-widget[data-v-29870b70] {
3414
5388
  display: grid;
3415
5389
  gap: 12px 24px;
3416
5390
  }
3417
- .cn-info-widget__field[data-v-fbcf1704] {
5391
+ .cn-info-widget__field[data-v-29870b70] {
3418
5392
  display: flex;
3419
5393
  flex-direction: column;
3420
5394
  gap: 2px;
3421
5395
  }
3422
- .cn-info-widget__label[data-v-fbcf1704] {
5396
+ .cn-info-widget__label[data-v-29870b70] {
3423
5397
  font-size: 12px;
3424
5398
  font-weight: 600;
3425
5399
  color: var(--color-text-maxcontrast);
@@ -3427,16 +5401,15 @@ to { opacity: 1; max-height: 600px;
3427
5401
  letter-spacing: 0.5px;
3428
5402
  margin: 0;
3429
5403
  }
3430
- .cn-info-widget__value[data-v-fbcf1704] {
5404
+ .cn-info-widget__value[data-v-29870b70] {
3431
5405
  font-size: 14px;
3432
5406
  color: var(--color-main-text);
3433
5407
  margin: 0;
3434
5408
  word-break: break-word;
3435
- }
3436
-
5409
+ }
3437
5410
  /* Responsive: single column on small screens */
3438
5411
  @media (max-width: 600px) {
3439
- .cn-info-widget[data-v-fbcf1704] {
5412
+ .cn-info-widget[data-v-29870b70] {
3440
5413
  grid-template-columns: 1fr !important;
3441
5414
  }
3442
5415
  }
@@ -3495,11 +5468,11 @@ to { opacity: 1; max-height: 600px;
3495
5468
  }
3496
5469
 
3497
5470
 
3498
- .cn-object-data-widget__grid[data-v-64256460] {
5471
+ .cn-object-data-widget__grid[data-v-07fd319a] {
3499
5472
  display: grid;
3500
5473
  gap: calc(2 * var(--default-grid-baseline, 4px)) calc(4 * var(--default-grid-baseline, 4px));
3501
5474
  }
3502
- .cn-object-data-widget__cell[data-v-64256460] {
5475
+ .cn-object-data-widget__cell[data-v-07fd319a] {
3503
5476
  display: flex;
3504
5477
  flex-direction: column;
3505
5478
  gap: 2px;
@@ -3507,36 +5480,36 @@ to { opacity: 1; max-height: 600px;
3507
5480
  border-bottom: 1px solid var(--color-border-dark);
3508
5481
  min-width: 0;
3509
5482
  }
3510
- .cn-object-data-widget__label[data-v-64256460] {
5483
+ .cn-object-data-widget__label[data-v-07fd319a] {
3511
5484
  font-size: 0.85em;
3512
5485
  color: var(--color-text-maxcontrast);
3513
5486
  font-weight: 500;
3514
5487
  }
3515
- .cn-object-data-widget__value[data-v-64256460] {
5488
+ .cn-object-data-widget__value[data-v-07fd319a] {
3516
5489
  font-size: 1em;
3517
5490
  color: var(--color-main-text);
3518
5491
  word-break: break-word;
3519
5492
  position: relative;
3520
5493
  padding-right: 20px;
3521
5494
  }
3522
- .cn-object-data-widget__value--editable[data-v-64256460] {
5495
+ .cn-object-data-widget__value--editable[data-v-07fd319a] {
3523
5496
  cursor: pointer;
3524
5497
  border-radius: var(--border-radius);
3525
5498
  padding: 4px 24px 4px 4px;
3526
5499
  margin: -4px;
3527
5500
  }
3528
- .cn-object-data-widget__value--editable[data-v-64256460]:hover {
5501
+ .cn-object-data-widget__value--editable[data-v-07fd319a]:hover {
3529
5502
  background: var(--color-background-dark);
3530
5503
  }
3531
- .cn-object-data-widget__value--editable[data-v-64256460]:focus-visible {
5504
+ .cn-object-data-widget__value--editable[data-v-07fd319a]:focus-visible {
3532
5505
  outline: 2px solid var(--color-primary-element);
3533
5506
  outline-offset: 2px;
3534
5507
  }
3535
- .cn-object-data-widget__value--empty[data-v-64256460] {
5508
+ .cn-object-data-widget__value--empty[data-v-07fd319a] {
3536
5509
  color: var(--color-text-maxcontrast);
3537
5510
  font-style: italic;
3538
5511
  }
3539
- .cn-object-data-widget__edit-icon[data-v-64256460] {
5512
+ .cn-object-data-widget__edit-icon[data-v-07fd319a] {
3540
5513
  position: absolute;
3541
5514
  right: 4px;
3542
5515
  top: 50%;
@@ -3545,21 +5518,21 @@ to { opacity: 1; max-height: 600px;
3545
5518
  opacity: 0;
3546
5519
  transition: opacity 0.15s ease;
3547
5520
  }
3548
- .cn-object-data-widget__value--editable:hover .cn-object-data-widget__edit-icon[data-v-64256460],
3549
- .cn-object-data-widget__value--editable:focus-visible .cn-object-data-widget__edit-icon[data-v-64256460] {
5521
+ .cn-object-data-widget__value--editable:hover .cn-object-data-widget__edit-icon[data-v-07fd319a],
5522
+ .cn-object-data-widget__value--editable:focus-visible .cn-object-data-widget__edit-icon[data-v-07fd319a] {
3550
5523
  opacity: 1;
3551
5524
  }
3552
- .cn-object-data-widget__editor[data-v-64256460] {
5525
+ .cn-object-data-widget__editor[data-v-07fd319a] {
3553
5526
  display: flex;
3554
5527
  flex-direction: column;
3555
5528
  gap: 4px;
3556
5529
  }
3557
- .cn-object-data-widget__editor-actions[data-v-64256460] {
5530
+ .cn-object-data-widget__editor-actions[data-v-07fd319a] {
3558
5531
  display: flex;
3559
5532
  gap: 2px;
3560
5533
  justify-content: flex-end;
3561
5534
  }
3562
- .cn-object-data-widget__textarea[data-v-64256460] {
5535
+ .cn-object-data-widget__textarea[data-v-07fd319a] {
3563
5536
  width: 100%;
3564
5537
  min-height: 80px;
3565
5538
  padding: 8px;
@@ -3571,22 +5544,21 @@ to { opacity: 1; max-height: 600px;
3571
5544
  font-size: inherit;
3572
5545
  resize: vertical;
3573
5546
  }
3574
- .cn-object-data-widget__textarea[data-v-64256460]:focus {
5547
+ .cn-object-data-widget__textarea[data-v-07fd319a]:focus {
3575
5548
  border-color: var(--color-primary-element);
3576
5549
  outline: none;
3577
5550
  }
3578
- .cn-object-data-widget__empty[data-v-64256460] {
5551
+ .cn-object-data-widget__empty[data-v-07fd319a] {
3579
5552
  color: var(--color-text-maxcontrast);
3580
5553
  font-style: italic;
3581
5554
  padding: calc(2 * var(--default-grid-baseline, 4px));
3582
- }
3583
-
5555
+ }
3584
5556
  /* Responsive: collapse to single column on narrow widths */
3585
5557
  @media (max-width: 600px) {
3586
- .cn-object-data-widget__grid[data-v-64256460] {
5558
+ .cn-object-data-widget__grid[data-v-07fd319a] {
3587
5559
  grid-template-columns: 1fr !important;
3588
5560
  }
3589
- .cn-object-data-widget__cell[data-v-64256460] {
5561
+ .cn-object-data-widget__cell[data-v-07fd319a] {
3590
5562
  grid-column: span 1 !important;
3591
5563
  grid-row: span 1 !important;
3592
5564
  }
@@ -3854,24 +5826,24 @@ to { opacity: 1; max-height: 600px;
3854
5826
 
3855
5827
 
3856
5828
  /* Override CnDetailGrid item styling for a compact table-like appearance */
3857
- [data-v-6d3efcfa]:deep(.cn-detail-grid__item) {
5829
+ [data-v-4327a492]:deep(.cn-detail-grid__item) {
3858
5830
  background: none;
3859
5831
  border-radius: 0;
3860
5832
  border-bottom: 1px solid var(--color-border);
3861
5833
  padding: calc(1.5 * var(--default-grid-baseline, 4px)) 0;
3862
5834
  }
3863
- [data-v-6d3efcfa]:deep(.cn-detail-grid__item:last-child) {
5835
+ [data-v-4327a492]:deep(.cn-detail-grid__item:last-child) {
3864
5836
  border-bottom: none;
3865
5837
  }
3866
- [data-v-6d3efcfa]:deep(.cn-detail-grid--horizontal) {
5838
+ [data-v-4327a492]:deep(.cn-detail-grid--horizontal) {
3867
5839
  gap: 0;
3868
5840
  }
3869
- [data-v-6d3efcfa]:deep(.cn-detail-grid__label) {
5841
+ [data-v-4327a492]:deep(.cn-detail-grid__label) {
3870
5842
  font-size: 0.8em;
3871
5843
  text-transform: uppercase;
3872
5844
  letter-spacing: 0.02em;
3873
5845
  }
3874
- [data-v-6d3efcfa]:deep(.cn-detail-grid__value) {
5846
+ [data-v-4327a492]:deep(.cn-detail-grid__value) {
3875
5847
  font-size: 0.9em;
3876
5848
  word-break: break-all;
3877
5849
  margin: 0;