@proveanything/smartlinks-utils-ui 0.9.2 → 0.9.4

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