@aortl/admin-css 0.0.1 → 0.2.0

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