@svadmin/ui 0.72.0 → 0.74.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 (276) hide show
  1. package/README.md +62 -22
  2. package/THIRD_PARTY_NOTICES.md +52 -0
  3. package/dist/app.css +8488 -6297
  4. package/dist/app.theme.css +8514 -6374
  5. package/dist/class-properties.generated.d.ts +1 -0
  6. package/dist/class-properties.generated.js +2 -0
  7. package/dist/classnames.d.ts +8 -0
  8. package/dist/classnames.js +26 -0
  9. package/dist/component-registry.d.ts +14977 -0
  10. package/dist/component-registry.js +216 -0
  11. package/dist/components/AboutSettings.svelte +7 -1
  12. package/dist/components/AboutSettings.svelte.d.ts +4 -1
  13. package/dist/components/ActivityFeed.svelte +9 -3
  14. package/dist/components/ActivityFeed.svelte.d.ts +3 -0
  15. package/dist/components/AdminApp.svelte +19 -10
  16. package/dist/components/AdminApp.svelte.d.ts +6 -0
  17. package/dist/components/ApiSettings.svelte +41 -5
  18. package/dist/components/ApprovalCenter.svelte +283 -0
  19. package/dist/components/ApprovalCenter.svelte.d.ts +10 -0
  20. package/dist/components/AuditLogViewer.svelte +3 -1
  21. package/dist/components/AutoForm.svelte +53 -9
  22. package/dist/components/AutoForm.svelte.d.ts +3 -0
  23. package/dist/components/AutoTable.svelte +846 -43
  24. package/dist/components/AutoTable.svelte.d.ts +22 -1
  25. package/dist/components/BoundRecordDetailDrawer.svelte +17 -2
  26. package/dist/components/BoundRecordDetailDrawer.svelte.d.ts +4 -0
  27. package/dist/components/Breadcrumbs.svelte +11 -1
  28. package/dist/components/CancelTaskButton.svelte +12 -42
  29. package/dist/components/ColorPicker.svelte +73 -0
  30. package/dist/components/ColorPicker.svelte.d.ts +15 -0
  31. package/dist/components/ComboboxField.svelte +143 -34
  32. package/dist/components/ComboboxField.svelte.d.ts +4 -2
  33. package/dist/components/CreatePage.svelte +4 -0
  34. package/dist/components/CreatePage.svelte.d.ts +2 -0
  35. package/dist/components/DashboardView.svelte +99 -0
  36. package/dist/components/DashboardView.svelte.d.ts +14 -0
  37. package/dist/components/DatePicker.svelte +10 -0
  38. package/dist/components/DatePicker.svelte.d.ts +6 -0
  39. package/dist/components/DateRangeInput.svelte +155 -0
  40. package/dist/components/DateRangeInput.svelte.d.ts +35 -0
  41. package/dist/components/DateRangePicker.svelte +10 -0
  42. package/dist/components/DateRangePicker.svelte.d.ts +6 -0
  43. package/dist/components/DateTimeInput.svelte +134 -0
  44. package/dist/components/DateTimeInput.svelte.d.ts +27 -0
  45. package/dist/components/DateTimePicker.svelte +10 -0
  46. package/dist/components/DateTimePicker.svelte.d.ts +6 -0
  47. package/dist/components/DevTools.svelte +36 -28
  48. package/dist/components/DevframePanel.svelte +123 -0
  49. package/dist/components/DevframePanel.svelte.d.ts +3 -0
  50. package/dist/components/EditPage.svelte +4 -0
  51. package/dist/components/EditPage.svelte.d.ts +2 -0
  52. package/dist/components/ErrorSummary.svelte +52 -0
  53. package/dist/components/ErrorSummary.svelte.d.ts +14 -0
  54. package/dist/components/FieldRenderer.svelte +172 -99
  55. package/dist/components/FileUpload.svelte +412 -0
  56. package/dist/components/FileUpload.svelte.d.ts +43 -0
  57. package/dist/components/FilterBuilder.svelte +244 -265
  58. package/dist/components/FilterBuilder.svelte.d.ts +3 -0
  59. package/dist/components/FilterCollectionInput.svelte +80 -0
  60. package/dist/components/FilterCollectionInput.svelte.d.ts +10 -0
  61. package/dist/components/GanttChart.svelte +66 -14
  62. package/dist/components/GanttChart.svelte.d.ts +6 -0
  63. package/dist/components/Header.svelte +18 -2
  64. package/dist/components/ImportWizard.svelte +509 -100
  65. package/dist/components/ImportWizard.svelte.d.ts +11 -0
  66. package/dist/components/JsonSchemaForm.svelte +322 -98
  67. package/dist/components/JsonSchemaForm.svelte.d.ts +18 -1
  68. package/dist/components/KanbanBoard.svelte +195 -40
  69. package/dist/components/KanbanBoard.svelte.d.ts +9 -2
  70. package/dist/components/Layout.svelte +4 -3
  71. package/dist/components/LazyAutoForm.svelte +28 -0
  72. package/dist/components/LazyAutoForm.svelte.d.ts +8 -0
  73. package/dist/components/LazyAutoTable.svelte +28 -0
  74. package/dist/components/LazyAutoTable.svelte.d.ts +8 -0
  75. package/dist/components/LazySettingsPage.svelte +28 -0
  76. package/dist/components/LazySettingsPage.svelte.d.ts +8 -0
  77. package/dist/components/LazyShowPage.svelte +28 -0
  78. package/dist/components/LazyShowPage.svelte.d.ts +8 -0
  79. package/dist/components/LazyTaskQueueDrawer.svelte.d.ts +1 -1
  80. package/dist/components/ListPage.svelte +9 -1
  81. package/dist/components/ListPage.svelte.d.ts +5 -0
  82. package/dist/components/LoginPage.svelte +2 -2
  83. package/dist/components/MoneyInput.svelte +25 -0
  84. package/dist/components/MoneyInput.svelte.d.ts +20 -0
  85. package/dist/components/MultiTabKeepAlive.svelte +11 -6
  86. package/dist/components/NotificationsSettings.svelte +69 -2
  87. package/dist/components/NotificationsSettings.svelte.d.ts +25 -1
  88. package/dist/components/NumberInput.svelte +25 -0
  89. package/dist/components/NumberInput.svelte.d.ts +19 -0
  90. package/dist/components/NumericInput.svelte +110 -0
  91. package/dist/components/NumericInput.svelte.d.ts +23 -0
  92. package/dist/components/PercentInput.svelte +25 -0
  93. package/dist/components/PercentInput.svelte.d.ts +20 -0
  94. package/dist/components/PermissionMatrix.svelte +20 -1
  95. package/dist/components/PivotExportButton.svelte +157 -0
  96. package/dist/components/PivotExportButton.svelte.d.ts +16 -0
  97. package/dist/components/PivotTable.svelte +229 -74
  98. package/dist/components/PivotTable.svelte.d.ts +19 -2
  99. package/dist/components/QuickEditDrawer.svelte +4 -1
  100. package/dist/components/QuickEditDrawer.svelte.d.ts +2 -0
  101. package/dist/components/RadioGroup.svelte +121 -0
  102. package/dist/components/RadioGroup.svelte.d.ts +43 -0
  103. package/dist/components/RangeSlider.svelte +127 -0
  104. package/dist/components/RangeSlider.svelte.d.ts +22 -0
  105. package/dist/components/Rate.svelte +121 -0
  106. package/dist/components/Rate.svelte.d.ts +16 -0
  107. package/dist/components/RecordDetailDrawer.svelte +6 -2
  108. package/dist/components/RecordDetailDrawer.svelte.d.ts +4 -0
  109. package/dist/components/RelationPicker.svelte +341 -0
  110. package/dist/components/RelationPicker.svelte.d.ts +26 -0
  111. package/dist/components/ResourceOperationsPage.svelte +25 -19
  112. package/dist/components/ResourceOperationsPage.svelte.d.ts +5 -1
  113. package/dist/components/RetryTaskButton.svelte +12 -42
  114. package/dist/components/SecuritySettings.svelte +29 -5
  115. package/dist/components/SegmentedControl.svelte +145 -0
  116. package/dist/components/SegmentedControl.svelte.d.ts +38 -0
  117. package/dist/components/SettingsPage.svelte +3 -1
  118. package/dist/components/SettingsPage.svelte.d.ts +1 -0
  119. package/dist/components/ShowInferencer.svelte +4 -2
  120. package/dist/components/ShowInferencer.svelte.d.ts +2 -0
  121. package/dist/components/ShowPage.svelte +25 -6
  122. package/dist/components/ShowPage.svelte.d.ts +5 -0
  123. package/dist/components/Sidebar.svelte +5 -5
  124. package/dist/components/Slider.svelte +100 -0
  125. package/dist/components/Slider.svelte.d.ts +19 -0
  126. package/dist/components/SpreadsheetView.svelte +1037 -124
  127. package/dist/components/SpreadsheetView.svelte.d.ts +19 -0
  128. package/dist/components/StepsForm.svelte +5 -5
  129. package/dist/components/SvarAutoTable.svelte +39 -0
  130. package/dist/components/SvarAutoTable.svelte.d.ts +13 -0
  131. package/dist/components/SvarDataGrid.svelte +362 -0
  132. package/dist/components/SvarDataGrid.svelte.d.ts +57 -0
  133. package/dist/components/SvarGridCell.svelte +10 -0
  134. package/dist/components/SvarGridCell.svelte.d.ts +7 -0
  135. package/dist/components/SvarResourceRead.svelte +50 -0
  136. package/dist/components/SvarResourceRead.svelte.d.ts +23 -0
  137. package/dist/components/SvarResourceTable.svelte +63 -0
  138. package/dist/components/SvarResourceTable.svelte.d.ts +42 -0
  139. package/dist/components/SvarResourceTableView.svelte +364 -0
  140. package/dist/components/SvarResourceTableView.svelte.d.ts +4 -0
  141. package/dist/components/TagsInput.svelte +178 -0
  142. package/dist/components/TagsInput.svelte.d.ts +17 -0
  143. package/dist/components/TaskQueueDrawer.svelte +72 -16
  144. package/dist/components/TimePicker.svelte +10 -0
  145. package/dist/components/TimePicker.svelte.d.ts +6 -0
  146. package/dist/components/TreeSelect.svelte +440 -46
  147. package/dist/components/TreeSelect.svelte.d.ts +6 -1
  148. package/dist/components/TreeTable.svelte +484 -82
  149. package/dist/components/TreeTable.svelte.d.ts +24 -1
  150. package/dist/components/TwoFactorAuthPage.svelte +85 -48
  151. package/dist/components/TwoFactorAuthPage.svelte.d.ts +12 -1
  152. package/dist/components/VirtualTable.svelte +116 -20
  153. package/dist/components/VirtualTable.svelte.d.ts +5 -0
  154. package/dist/components/account/CompanyProfilePage.svelte +74 -38
  155. package/dist/components/account/GetStartedPage.svelte +2 -1
  156. package/dist/components/account/ImportMembersPage.svelte +22 -167
  157. package/dist/components/account/ImportMembersPage.svelte.d.ts +4 -1
  158. package/dist/components/account/MemberDirectory.svelte +156 -0
  159. package/dist/components/account/MemberDirectory.svelte.d.ts +19 -0
  160. package/dist/components/account/MembersStarterPage.svelte +9 -55
  161. package/dist/components/account/MembersStarterPage.svelte.d.ts +5 -1
  162. package/dist/components/account/SecurityLogPage.svelte +4 -1
  163. package/dist/components/account/SettingsPlainPage.svelte +7 -38
  164. package/dist/components/account/SettingsPlainPage.svelte.d.ts +4 -1
  165. package/dist/components/account/SettingsSidebarPage.svelte +7 -20
  166. package/dist/components/account/TeamMembersPage.svelte +4 -20
  167. package/dist/components/account/TeamMembersPage.svelte.d.ts +5 -1
  168. package/dist/components/account/UserProfilePage.svelte +3 -25
  169. package/dist/components/account/UserProfilePage.svelte.d.ts +17 -2
  170. package/dist/components/auto-table-grid.d.ts +26 -0
  171. package/dist/components/auto-table-grid.js +1 -0
  172. package/dist/components/buttons/ExportButton.svelte +56 -12
  173. package/dist/components/buttons/ExportButton.svelte.d.ts +11 -0
  174. package/dist/components/content/ContentPageHeader.svelte +12 -9
  175. package/dist/components/content/ContentPageShell.svelte +6 -9
  176. package/dist/components/content/FileBrowser.svelte +35 -0
  177. package/dist/components/content/FileBrowser.svelte.d.ts +14 -0
  178. package/dist/components/content/MetricBlock.svelte +10 -13
  179. package/dist/components/content/NetworkTable.svelte +3 -3
  180. package/dist/components/content/NetworkTable.svelte.d.ts +1 -0
  181. package/dist/components/content/PageToolbar.svelte +6 -10
  182. package/dist/components/content/ReferenceNotice.svelte +5 -0
  183. package/dist/components/content/ReferenceNotice.svelte.d.ts +18 -0
  184. package/dist/components/content/SectionHeader.svelte +8 -13
  185. package/dist/components/content/SettingsFieldRow.svelte +9 -23
  186. package/dist/components/content/SettingsGroup.svelte +11 -27
  187. package/dist/components/content/StatusBadge.svelte +3 -8
  188. package/dist/components/content/WorkspaceLayout.svelte +8 -12
  189. package/dist/components/enterprise/filter-tree.d.ts +48 -0
  190. package/dist/components/enterprise/filter-tree.js +224 -0
  191. package/dist/components/enterprise/json-schema-form.d.ts +39 -0
  192. package/dist/components/enterprise/json-schema-form.js +195 -0
  193. package/dist/components/enterprise/recursive-schema-form.d.ts +30 -0
  194. package/dist/components/enterprise/recursive-schema-form.js +196 -0
  195. package/dist/components/enterprise/spreadsheet-formula.d.ts +12 -0
  196. package/dist/components/enterprise/spreadsheet-formula.js +245 -0
  197. package/dist/components/export-reference.d.ts +2 -0
  198. package/dist/components/export-reference.js +9 -0
  199. package/dist/components/fieldComponentMap.js +2 -0
  200. package/dist/components/fields/DateField.svelte +12 -12
  201. package/dist/components/fields/date-display.d.ts +6 -0
  202. package/dist/components/fields/date-display.js +24 -0
  203. package/dist/components/fields/date-field-value.d.ts +2 -0
  204. package/dist/components/fields/date-field-value.js +13 -0
  205. package/dist/components/json-schema-form-state.d.ts +37 -0
  206. package/dist/components/json-schema-form-state.js +168 -0
  207. package/dist/components/network/TeamCrewTablePage.svelte +6 -1
  208. package/dist/components/network/UserCardsNFTPage.svelte +2 -0
  209. package/dist/components/profile/PublicProfilePage.svelte +2 -0
  210. package/dist/components/record-detail.svelte.d.ts +3 -0
  211. package/dist/components/record-detail.svelte.js +10 -4
  212. package/dist/components/saved-list-views.d.ts +74 -1
  213. package/dist/components/saved-list-views.js +191 -3
  214. package/dist/components/svar-grid-cells.d.ts +14 -0
  215. package/dist/components/svar-grid-cells.js +2 -0
  216. package/dist/components/svar-grid-contract.d.ts +80 -0
  217. package/dist/components/svar-grid-contract.js +159 -0
  218. package/dist/components/svar-grid-interactions.d.ts +54 -0
  219. package/dist/components/svar-grid-interactions.js +174 -0
  220. package/dist/components/svar-grid-loading.d.ts +40 -0
  221. package/dist/components/svar-grid-loading.js +180 -0
  222. package/dist/components/svar-grid-operations.d.ts +37 -0
  223. package/dist/components/svar-grid-operations.js +186 -0
  224. package/dist/components/svar-grid-panes.d.ts +34 -0
  225. package/dist/components/svar-grid-panes.js +66 -0
  226. package/dist/components/svar-grid-resource-loading.d.ts +18 -0
  227. package/dist/components/svar-grid-resource-loading.js +68 -0
  228. package/dist/components/svar-grid-resource-session.svelte.d.ts +29 -0
  229. package/dist/components/svar-grid-resource-session.svelte.js +61 -0
  230. package/dist/components/table-contract.d.ts +12 -1
  231. package/dist/components/task-action.svelte.d.ts +13 -0
  232. package/dist/components/task-action.svelte.js +73 -0
  233. package/dist/components/ui/DesignSystemShowcase.svelte +164 -0
  234. package/dist/components/ui/DesignSystemShowcase.svelte.d.ts +3 -0
  235. package/dist/components/ui/badge/badge-variants.d.ts +3 -2
  236. package/dist/components/ui/badge/badge-variants.js +2 -1
  237. package/dist/components/ui/badge/badge.svelte +3 -0
  238. package/dist/components/ui/badge/badge.svelte.d.ts +1 -0
  239. package/dist/components/ui/button/button-variants.d.ts +5 -4
  240. package/dist/components/ui/button/button-variants.js +7 -2
  241. package/dist/components/ui/checkbox/checkbox.svelte +5 -1
  242. package/dist/components/ui/checkbox/checkbox.svelte.d.ts +5 -1
  243. package/dist/components/ui/input/input.svelte +8 -6
  244. package/dist/components/ui/input/input.svelte.d.ts +4 -1
  245. package/dist/components/ui/select/select.svelte +4 -1
  246. package/dist/components/ui/select/select.svelte.d.ts +2 -1
  247. package/dist/components/ui/textarea/textarea.svelte +2 -1
  248. package/dist/components.css +3110 -0
  249. package/dist/date-input-policy.d.ts +4 -0
  250. package/dist/date-input-policy.js +35 -0
  251. package/dist/design-contract.d.ts +13 -0
  252. package/dist/design-contract.js +11 -0
  253. package/dist/design-system-components.d.ts +100 -0
  254. package/dist/design-system-components.js +101 -0
  255. package/dist/design-system.d.ts +15 -0
  256. package/dist/design-system.js +7 -0
  257. package/dist/devtools-bridge.d.ts +80 -0
  258. package/dist/devtools-bridge.js +92 -0
  259. package/dist/index.d.ts +50 -1
  260. package/dist/index.js +32 -2
  261. package/dist/page-chrome.css +12 -49
  262. package/dist/recipes.d.ts +960 -0
  263. package/dist/recipes.js +264 -0
  264. package/dist/rendering/index.d.ts +87 -0
  265. package/dist/rendering/index.js +117 -0
  266. package/dist/styles/aliases.css +49 -0
  267. package/dist/styles/compatibility.epilogue.css +384 -0
  268. package/dist/styles/compatibility.prelude.css +5513 -0
  269. package/dist/styles/conditional-states.css +28 -0
  270. package/dist/styles/conditional-utilities.css +22 -0
  271. package/dist/tree-table-model.d.ts +24 -0
  272. package/dist/tree-table-model.js +111 -0
  273. package/dist/utils.d.ts +1 -1
  274. package/dist/utils.js +1 -1
  275. package/package.json +40 -10
  276. package/styles-compatibility.json +12 -0
@@ -0,0 +1,3110 @@
1
+ /* @svadmin/ui - Admin UI product tokens
2
+ * Imported by AdminApp and overridable by consumer CSS.
3
+ * Metronic references inform capability coverage, never visual styling.
4
+ */
5
+
6
+ /* Tailwind v4 resolves this path relative to the published CSS file, so both
7
+ * src/app.css in the workspace and dist/app*.css on npm scan real components. */
8
+ @layer base {
9
+ *, ::after, ::before {
10
+ border-color: var(--color-border, var(--border));
11
+ }
12
+ :root {
13
+ --radius: 0.5rem;
14
+ --background: oklch(0.982 0.003 264);
15
+ --foreground: oklch(0.205 0.012 264);
16
+ --card: oklch(1 0 0);
17
+ --card-foreground: oklch(0.205 0.012 264);
18
+ --popover: oklch(1 0 0);
19
+ --popover-foreground: oklch(0.205 0.012 264);
20
+ --primary: oklch(0.558 0.22 278);
21
+ --primary-foreground: oklch(0.99 0 0);
22
+ --secondary: oklch(0.965 0.004 264);
23
+ --secondary-foreground: oklch(0.265 0.014 264);
24
+ --muted: oklch(0.96 0.004 264);
25
+ --muted-foreground: oklch(0.493 0.018 264);
26
+ --accent: oklch(0.962 0.012 278);
27
+ --accent-foreground: oklch(0.34 0.105 278);
28
+ --destructive: oklch(0.58 0.22 27);
29
+ --destructive-foreground: oklch(0.99 0 0);
30
+ --border: oklch(0.914 0.006 264);
31
+ --input: oklch(0.88 0.008 264);
32
+ --ring: oklch(0.558 0.22 278);
33
+ --chart-1: oklch(0.558 0.22 278);
34
+ --chart-2: oklch(0.57 0.12 196);
35
+ --chart-3: oklch(0.56 0.13 244);
36
+ --chart-4: oklch(0.72 0.15 78);
37
+ --chart-5: oklch(0.62 0.17 19);
38
+ --success: oklch(0.55 0.16 151);
39
+ --success-foreground: oklch(0.99 0 0);
40
+ --warning: oklch(0.7 0.15 75);
41
+ --warning-foreground: oklch(0.25 0.04 60);
42
+ --info: oklch(0.58 0.14 244);
43
+ --info-foreground: oklch(0.99 0 0);
44
+ --sidebar: oklch(0.995 0.001 264);
45
+ --sidebar-foreground: oklch(0.265 0.014 264);
46
+ --sidebar-primary: oklch(0.558 0.22 278);
47
+ --sidebar-primary-foreground: oklch(0.99 0 0);
48
+ --sidebar-accent: oklch(0.962 0.012 278);
49
+ --sidebar-accent-foreground: oklch(0.34 0.105 278);
50
+ --sidebar-border: oklch(0.914 0.006 264);
51
+ --sidebar-ring: oklch(0.558 0.22 278);
52
+ --svadmin-shadow-control: 0 1px 2px rgb(15 23 42 / 0.05), 0 0 0 1px rgb(15 23 42 / 0.025);
53
+ --svadmin-shadow-surface: 0 1px 2px rgb(15 23 42 / 0.035), 0 1px 3px rgb(15 23 42 / 0.025);
54
+ --svadmin-shadow-surface-hover: 0 2px 5px rgb(15 23 42 / 0.055), 0 1px 2px rgb(15 23 42 / 0.035);
55
+ --svadmin-shadow-overlay: 0 18px 48px rgb(15 23 42 / 0.14), 0 4px 12px rgb(15 23 42 / 0.08);
56
+ }
57
+ .dark {
58
+ --background: oklch(0.15 0.01 264);
59
+ --foreground: oklch(0.96 0.004 264);
60
+ --card: oklch(0.185 0.012 264);
61
+ --card-foreground: oklch(0.96 0.004 264);
62
+ --popover: oklch(0.195 0.012 264);
63
+ --popover-foreground: oklch(0.96 0.004 264);
64
+ --primary: oklch(0.68 0.18 278);
65
+ --primary-foreground: oklch(0.15 0.03 278);
66
+ --secondary: oklch(0.235 0.012 264);
67
+ --secondary-foreground: oklch(0.94 0.004 264);
68
+ --muted: oklch(0.235 0.012 264);
69
+ --muted-foreground: oklch(0.7 0.012 264);
70
+ --accent: oklch(0.245 0.035 278);
71
+ --accent-foreground: oklch(0.84 0.09 278);
72
+ --destructive: oklch(0.68 0.19 24);
73
+ --destructive-foreground: oklch(0.98 0 0);
74
+ --border: oklch(0.3 0.012 264);
75
+ --input: oklch(0.335 0.014 264);
76
+ --ring: oklch(0.68 0.18 278);
77
+ --chart-1: oklch(0.68 0.18 278);
78
+ --chart-2: oklch(0.7 0.13 177);
79
+ --chart-3: oklch(0.72 0.13 230);
80
+ --chart-4: oklch(0.78 0.14 83);
81
+ --chart-5: oklch(0.72 0.16 22);
82
+ --success: oklch(0.68 0.15 151);
83
+ --success-foreground: oklch(0.15 0.03 151);
84
+ --warning: oklch(0.8 0.14 78);
85
+ --warning-foreground: oklch(0.22 0.04 60);
86
+ --info: oklch(0.7 0.13 244);
87
+ --info-foreground: oklch(0.15 0.03 244);
88
+ --sidebar: oklch(0.17 0.01 264);
89
+ --sidebar-foreground: oklch(0.9 0.006 264);
90
+ --sidebar-primary: oklch(0.68 0.18 278);
91
+ --sidebar-primary-foreground: oklch(0.15 0.03 278);
92
+ --sidebar-accent: oklch(0.245 0.035 278);
93
+ --sidebar-accent-foreground: oklch(0.84 0.09 278);
94
+ --sidebar-border: oklch(0.3 0.012 264);
95
+ --sidebar-ring: oklch(0.68 0.18 278);
96
+ --svadmin-shadow-control: 0 1px 2px rgb(0 0 0 / 0.24), 0 0 0 1px rgb(255 255 255 / 0.025);
97
+ --svadmin-shadow-surface: 0 1px 2px rgb(0 0 0 / 0.22), 0 1px 3px rgb(0 0 0 / 0.16);
98
+ --svadmin-shadow-surface-hover: 0 2px 5px rgb(0 0 0 / 0.28), 0 1px 2px rgb(0 0 0 / 0.2);
99
+ --svadmin-shadow-overlay: 0 20px 56px rgb(0 0 0 / 0.5), 0 4px 16px rgb(0 0 0 / 0.32);
100
+ }
101
+ [data-theme="neutral"] {
102
+ --primary: oklch(0.205 0.006 286);
103
+ --primary-foreground: oklch(0.985 0 0);
104
+ --ring: oklch(0.205 0.006 286);
105
+ --sidebar-primary: oklch(0.205 0.006 286);
106
+ --sidebar-primary-foreground: oklch(0.985 0 0);
107
+ --sidebar-ring: oklch(0.205 0.006 286);
108
+ --chart-1: oklch(0.558 0.22 278);
109
+ }
110
+ .dark[data-theme="neutral"], .dark [data-theme="neutral"] {
111
+ --primary: oklch(0.922 0.004 286);
112
+ --primary-foreground: oklch(0.205 0.006 286);
113
+ --ring: oklch(0.556 0.004 286);
114
+ --sidebar-primary: oklch(0.922 0.004 286);
115
+ --sidebar-primary-foreground: oklch(0.205 0.006 286);
116
+ --sidebar-ring: oklch(0.556 0.004 286);
117
+ --chart-1: oklch(0.68 0.18 278);
118
+ }
119
+ [data-theme="indigo"] {
120
+ --primary: oklch(0.558 0.22 278);
121
+ --primary-foreground: oklch(0.985 0 0);
122
+ --ring: oklch(0.558 0.22 278);
123
+ --sidebar-primary: oklch(0.558 0.22 278);
124
+ --sidebar-primary-foreground: oklch(0.985 0 0);
125
+ --sidebar-ring: oklch(0.558 0.22 278);
126
+ --chart-1: oklch(0.558 0.22 278);
127
+ }
128
+ .dark[data-theme="indigo"], .dark [data-theme="indigo"] {
129
+ --primary: oklch(0.68 0.18 278);
130
+ --primary-foreground: oklch(0.15 0.04 265);
131
+ --ring: oklch(0.68 0.18 278);
132
+ --sidebar-primary: oklch(0.68 0.18 278);
133
+ --sidebar-primary-foreground: oklch(0.985 0 0);
134
+ --sidebar-ring: oklch(0.68 0.18 278);
135
+ --chart-1: oklch(0.68 0.18 278);
136
+ }
137
+ [data-theme="blue"] {
138
+ --primary: oklch(0.546 0.245 262.881);
139
+ --primary-foreground: oklch(0.985 0 0);
140
+ --ring: oklch(0.546 0.245 262.881);
141
+ --sidebar-primary: oklch(0.546 0.245 262.881);
142
+ --sidebar-primary-foreground: oklch(0.985 0 0);
143
+ --sidebar-ring: oklch(0.546 0.245 262.881);
144
+ --chart-1: oklch(0.546 0.245 262.881);
145
+ }
146
+ .dark[data-theme="blue"], .dark [data-theme="blue"] {
147
+ --primary: oklch(0.623 0.214 259.815);
148
+ --primary-foreground: oklch(0.15 0.04 265);
149
+ --ring: oklch(0.546 0.245 262.881);
150
+ --sidebar-primary: oklch(0.623 0.214 259.815);
151
+ --sidebar-primary-foreground: oklch(0.985 0 0);
152
+ --sidebar-ring: oklch(0.546 0.245 262.881);
153
+ --chart-1: oklch(0.623 0.214 259.815);
154
+ }
155
+ [data-theme="green"] {
156
+ --primary: oklch(0.527 0.185 150.069);
157
+ --primary-foreground: oklch(0.985 0 0);
158
+ --ring: oklch(0.527 0.185 150.069);
159
+ --sidebar-primary: oklch(0.527 0.185 150.069);
160
+ --sidebar-primary-foreground: oklch(0.985 0 0);
161
+ --sidebar-ring: oklch(0.527 0.185 150.069);
162
+ --chart-1: oklch(0.527 0.185 150.069);
163
+ }
164
+ .dark[data-theme="green"], .dark [data-theme="green"] {
165
+ --primary: oklch(0.627 0.194 149.214);
166
+ --primary-foreground: oklch(0.15 0.05 150);
167
+ --ring: oklch(0.527 0.185 150.069);
168
+ --sidebar-primary: oklch(0.627 0.194 149.214);
169
+ --sidebar-primary-foreground: oklch(0.985 0 0);
170
+ --sidebar-ring: oklch(0.527 0.185 150.069);
171
+ --chart-1: oklch(0.627 0.194 149.214);
172
+ }
173
+ [data-theme="rose"] {
174
+ --primary: oklch(0.577 0.245 27.325);
175
+ --primary-foreground: oklch(0.985 0 0);
176
+ --ring: oklch(0.577 0.245 27.325);
177
+ --sidebar-primary: oklch(0.577 0.245 27.325);
178
+ --sidebar-primary-foreground: oklch(0.985 0 0);
179
+ --sidebar-ring: oklch(0.577 0.245 27.325);
180
+ --chart-1: oklch(0.577 0.245 27.325);
181
+ }
182
+ .dark[data-theme="rose"], .dark [data-theme="rose"] {
183
+ --primary: oklch(0.577 0.245 27.325);
184
+ --primary-foreground: oklch(0.985 0 0);
185
+ --ring: oklch(0.577 0.245 27.325);
186
+ --sidebar-primary: oklch(0.577 0.245 27.325);
187
+ --sidebar-primary-foreground: oklch(0.985 0 0);
188
+ --sidebar-ring: oklch(0.577 0.245 27.325);
189
+ --chart-1: oklch(0.577 0.245 27.325);
190
+ }
191
+ [data-theme="orange"] {
192
+ --primary: oklch(0.646 0.222 41.116);
193
+ --primary-foreground: oklch(0.985 0 0);
194
+ --ring: oklch(0.646 0.222 41.116);
195
+ --sidebar-primary: oklch(0.646 0.222 41.116);
196
+ --sidebar-primary-foreground: oklch(0.985 0 0);
197
+ --sidebar-ring: oklch(0.646 0.222 41.116);
198
+ --chart-1: oklch(0.646 0.222 41.116);
199
+ }
200
+ .dark[data-theme="orange"], .dark [data-theme="orange"] {
201
+ --primary: oklch(0.646 0.222 41.116);
202
+ --primary-foreground: oklch(0.985 0 0);
203
+ --ring: oklch(0.646 0.222 41.116);
204
+ --sidebar-primary: oklch(0.646 0.222 41.116);
205
+ --sidebar-primary-foreground: oklch(0.985 0 0);
206
+ --sidebar-ring: oklch(0.646 0.222 41.116);
207
+ --chart-1: oklch(0.646 0.222 41.116);
208
+ }
209
+ [data-theme="violet"] {
210
+ --primary: oklch(0.541 0.281 293.009);
211
+ --primary-foreground: oklch(0.985 0 0);
212
+ --ring: oklch(0.541 0.281 293.009);
213
+ --sidebar-primary: oklch(0.541 0.281 293.009);
214
+ --sidebar-primary-foreground: oklch(0.985 0 0);
215
+ --sidebar-ring: oklch(0.541 0.281 293.009);
216
+ --chart-1: oklch(0.541 0.281 293.009);
217
+ }
218
+ .dark[data-theme="violet"], .dark [data-theme="violet"] {
219
+ --primary: oklch(0.541 0.281 293.009);
220
+ --primary-foreground: oklch(0.985 0 0);
221
+ --ring: oklch(0.541 0.281 293.009);
222
+ --sidebar-primary: oklch(0.541 0.281 293.009);
223
+ --sidebar-primary-foreground: oklch(0.985 0 0);
224
+ --sidebar-ring: oklch(0.541 0.281 293.009);
225
+ --chart-1: oklch(0.541 0.281 293.009);
226
+ }
227
+ }
228
+ @layer components {
229
+ details.svadmin-collapsible:not([open]), [data-svadmin-collapsible]:not([data-open="true"]) {
230
+ margin: 0 !important;
231
+ padding: 0 !important;
232
+ border: 0 !important;
233
+ background: transparent !important;
234
+ box-shadow: none !important;
235
+ }
236
+ [data-svadmin-filter-toolbar] .svadmin-filter-toolbar-advanced[hidden] {
237
+ display: none !important;
238
+ }
239
+ [data-svadmin-filter-toolbar] .svadmin-filter-toolbar-advanced:not([hidden]) {
240
+ min-width: 0;
241
+ }
242
+ }
243
+ body {
244
+ background: var(--background);
245
+ color: var(--foreground);
246
+ font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
247
+ font-size: 0.875rem;
248
+ line-height: 1.5;
249
+ -webkit-font-smoothing: antialiased;
250
+ -moz-osx-font-smoothing: grayscale;
251
+ }
252
+ h1, h2, h3, h4, h5, h6, [data-slot="card-title"] {
253
+ letter-spacing: 0;
254
+ }
255
+ :is([data-slot="button"], .svadmin-button), :is([data-svadmin-button], .svadmin-button), [data-slot="input"], [data-slot="select-trigger"], [data-slot="select"], [data-slot="textarea"] {
256
+ box-shadow: var(--shadow-control);
257
+ transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
258
+ }
259
+ [data-slot="input"], [data-slot="textarea"], [data-slot="select"], [data-slot="select-trigger"] {
260
+ background-color: var(--card);
261
+ }
262
+ [data-slot="card"] {
263
+ box-shadow: var(--shadow-surface);
264
+ transition: border-color 160ms ease, box-shadow 160ms ease;
265
+ }
266
+ [data-slot="card"][data-interactive="true"]:hover {
267
+ border-color: var(--primary);
268
+ @supports (color: color-mix(in lab, red, red)) {
269
+ border-color: color-mix(in oklch, var(--primary) 24%, var(--border));
270
+ }
271
+ box-shadow: var(--shadow-surface-hover);
272
+ }
273
+ [data-slot="dialog-content"], [data-slot="sheet-content"], [data-slot="popover-content"], [data-slot="dropdown-menu-content"], [data-slot="context-menu-content"] {
274
+ box-shadow: var(--shadow-overlay);
275
+ }
276
+ :is([data-slot="button"], .svadmin-button):focus-visible, :is([data-svadmin-button], .svadmin-button):focus-visible, [data-slot="input"]:focus-visible, [data-slot="textarea"]:focus-visible, [data-slot="select-trigger"]:focus-visible, .sidebar-menu-item:focus-visible {
277
+ border-color: var(--ring);
278
+ outline: 2px solid var(--ring);
279
+ @supports (color: color-mix(in lab, red, red)) {
280
+ outline: 2px solid color-mix(in oklch, var(--ring) 48%, transparent);
281
+ }
282
+ outline-offset: 2px;
283
+ }
284
+
285
+ /* Keep primitive defaults below consumer utility overrides. */
286
+ @layer components {
287
+ :is([data-slot="button"], .svadmin-button), :is([data-svadmin-button], .svadmin-button) {
288
+ display: inline-flex;
289
+ flex-shrink: 0;
290
+ align-items: center;
291
+ justify-content: center;
292
+ gap: 0.375rem;
293
+ border: 1px solid transparent;
294
+ border-radius: var(--radius-md);
295
+ background-clip: padding-box;
296
+ font-size: 0.875rem;
297
+ font-weight: 500;
298
+ line-height: 1;
299
+ white-space: nowrap;
300
+ user-select: none;
301
+ outline: none;
302
+ transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
303
+ }
304
+ :is([data-slot="button"], .svadmin-button) > svg, :is([data-svadmin-button], .svadmin-button) > svg {
305
+ width: 1rem;
306
+ height: 1rem;
307
+ flex-shrink: 0;
308
+ pointer-events: none;
309
+ }
310
+ :is([data-slot="button"], .svadmin-button):active, :is([data-svadmin-button], .svadmin-button):active {
311
+ transform: translateY(1px);
312
+ }
313
+ :is([data-slot="button"], .svadmin-button):disabled, :is([data-svadmin-button], .svadmin-button):disabled, :is([data-slot="button"], .svadmin-button)[aria-disabled="true"], :is([data-svadmin-button], .svadmin-button)[aria-disabled="true"] {
314
+ pointer-events: none;
315
+ opacity: 0.5;
316
+ }
317
+ :is([data-slot="button"], .svadmin-button):is([data-variant="default"], .svadmin-button--default), :is([data-svadmin-button], .svadmin-button):is([data-variant="default"], .svadmin-button--default) {
318
+ background: var(--primary);
319
+ color: var(--primary-foreground);
320
+ }
321
+ :is([data-slot="button"], .svadmin-button):is([data-variant="default"], .svadmin-button--default):hover, :is([data-svadmin-button], .svadmin-button):is([data-variant="default"], .svadmin-button--default):hover {
322
+ background: var(--primary);
323
+ @supports (color: color-mix(in lab, red, red)) {
324
+ background: color-mix(in oklch, var(--primary) 80%, var(--foreground));
325
+ }
326
+ }
327
+ :is([data-slot="button"], .svadmin-button):is([data-variant="outline"], .svadmin-button--outline), :is([data-svadmin-button], .svadmin-button):is([data-variant="outline"], .svadmin-button--outline) {
328
+ border-color: var(--color-border, var(--border));
329
+ background: var(--background);
330
+ color: var(--foreground);
331
+ }
332
+ :is([data-slot="button"], .svadmin-button):is([data-variant="outline"], .svadmin-button--outline):hover, :is([data-svadmin-button], .svadmin-button):is([data-variant="outline"], .svadmin-button--outline):hover {
333
+ background: var(--muted);
334
+ }
335
+ :is([data-slot="button"], .svadmin-button):is([data-variant="secondary"], .svadmin-button--secondary), :is([data-svadmin-button], .svadmin-button):is([data-variant="secondary"], .svadmin-button--secondary) {
336
+ background: var(--secondary);
337
+ color: var(--secondary-foreground);
338
+ }
339
+ :is([data-slot="button"], .svadmin-button):is([data-variant="secondary"], .svadmin-button--secondary):hover, :is([data-svadmin-button], .svadmin-button):is([data-variant="secondary"], .svadmin-button--secondary):hover, :is([data-slot="button"], .svadmin-button):is([data-variant="ghost"], .svadmin-button--ghost):hover, :is([data-svadmin-button], .svadmin-button):is([data-variant="ghost"], .svadmin-button--ghost):hover {
340
+ background: var(--muted);
341
+ color: var(--foreground);
342
+ }
343
+ :is([data-slot="button"], .svadmin-button):is([data-variant="destructive"], .svadmin-button--destructive), :is([data-svadmin-button], .svadmin-button):is([data-variant="destructive"], .svadmin-button--destructive) {
344
+ background: var(--destructive);
345
+ @supports (color: color-mix(in lab, red, red)) {
346
+ background: color-mix(in oklch, var(--destructive) 10%, transparent);
347
+ }
348
+ color: var(--destructive);
349
+ }
350
+ :is([data-slot="button"], .svadmin-button):is([data-variant="destructive"], .svadmin-button--destructive):hover, :is([data-svadmin-button], .svadmin-button):is([data-variant="destructive"], .svadmin-button--destructive):hover {
351
+ background: var(--destructive);
352
+ @supports (color: color-mix(in lab, red, red)) {
353
+ background: color-mix(in oklch, var(--destructive) 20%, transparent);
354
+ }
355
+ }
356
+ :is([data-slot="button"], .svadmin-button):is([data-variant="link"], .svadmin-button--link), :is([data-svadmin-button], .svadmin-button):is([data-variant="link"], .svadmin-button--link) {
357
+ color: var(--primary);
358
+ text-decoration: underline;
359
+ text-underline-offset: 0.25rem;
360
+ }
361
+ :is([data-slot="button"], .svadmin-button):is([data-size="default"], .svadmin-button-size--default), :is([data-svadmin-button], .svadmin-button):is([data-size="default"], .svadmin-button-size--default) {
362
+ min-height: 2.25rem;
363
+ padding: 0 0.75rem;
364
+ }
365
+ :is([data-slot="button"], .svadmin-button):is([data-size="xs"], .svadmin-button-size--xs), :is([data-svadmin-button], .svadmin-button):is([data-size="xs"], .svadmin-button-size--xs) {
366
+ min-height: 1.5rem;
367
+ padding: 0 0.5rem;
368
+ font-size: 0.75rem;
369
+ }
370
+ :is([data-slot="button"], .svadmin-button):is([data-size="sm"], .svadmin-button-size--sm), :is([data-svadmin-button], .svadmin-button):is([data-size="sm"], .svadmin-button-size--sm) {
371
+ min-height: 2rem;
372
+ padding: 0 0.75rem;
373
+ font-size: 0.8rem;
374
+ }
375
+ :is([data-slot="button"], .svadmin-button):is([data-size="lg"], .svadmin-button-size--lg), :is([data-svadmin-button], .svadmin-button):is([data-size="lg"], .svadmin-button-size--lg) {
376
+ min-height: 2.5rem;
377
+ padding: 0 1rem;
378
+ }
379
+ :is([data-slot="button"], .svadmin-button):is([data-size="icon"], .svadmin-button-size--icon), :is([data-svadmin-button], .svadmin-button):is([data-size="icon"], .svadmin-button-size--icon) {
380
+ width: 2.25rem;
381
+ height: 2.25rem;
382
+ }
383
+ :is([data-slot="button"], .svadmin-button):is([data-size="icon-xs"], .svadmin-button-size--icon-xs), :is([data-svadmin-button], .svadmin-button):is([data-size="icon-xs"], .svadmin-button-size--icon-xs) {
384
+ width: 1.5rem;
385
+ height: 1.5rem;
386
+ }
387
+ :is([data-slot="button"], .svadmin-button):is([data-size="icon-sm"], .svadmin-button-size--icon-sm), :is([data-svadmin-button], .svadmin-button):is([data-size="icon-sm"], .svadmin-button-size--icon-sm) {
388
+ width: 2rem;
389
+ height: 2rem;
390
+ }
391
+ :is([data-slot="button"], .svadmin-button):is([data-size="icon-lg"], .svadmin-button-size--icon-lg), :is([data-svadmin-button], .svadmin-button):is([data-size="icon-lg"], .svadmin-button-size--icon-lg) {
392
+ width: 2.5rem;
393
+ height: 2.5rem;
394
+ }
395
+ :is([data-slot="alert"], .svadmin-alert).svadmin-alert {
396
+ position: relative;
397
+ display: grid;
398
+ grid-template-columns: 1fr;
399
+ row-gap: 0.125rem;
400
+ align-items: start;
401
+ width: 100%;
402
+ border: 1px solid var(--border);
403
+ border-radius: var(--radius-lg);
404
+ padding: 0.75rem 1rem;
405
+ background: var(--card);
406
+ color: var(--foreground);
407
+ font-size: 0.875rem;
408
+ }
409
+ :is([data-slot="alert"], .svadmin-alert).svadmin-alert > svg {
410
+ width: 1rem;
411
+ height: 1rem;
412
+ color: currentColor;
413
+ transform: translateY(0.125rem);
414
+ }
415
+ :is([data-slot="alert"], .svadmin-alert).svadmin-alert:is([data-variant="destructive"], .svadmin-alert--destructive) {
416
+ color: var(--destructive);
417
+ }
418
+ :is([data-slot="alert"], .svadmin-alert).svadmin-alert:is([data-variant="destructive"], .svadmin-alert--destructive) [data-slot="alert-description"] {
419
+ color: var(--destructive);
420
+ @supports (color: color-mix(in lab, red, red)) {
421
+ color: color-mix(in oklch, var(--destructive) 90%, transparent);
422
+ }
423
+ }
424
+ :is([data-slot="alert"], .svadmin-alert).svadmin-alert:is([data-variant="warning"], .svadmin-alert--warning) {
425
+ border-color: var(--warning);
426
+ @supports (color: color-mix(in lab, red, red)) {
427
+ border-color: color-mix(in oklch, var(--warning) 50%, var(--border));
428
+ }
429
+ background: var(--warning);
430
+ @supports (color: color-mix(in lab, red, red)) {
431
+ background: color-mix(in oklch, var(--warning) 10%, transparent);
432
+ }
433
+ color: var(--warning-foreground);
434
+ }
435
+ :is([data-slot="alert"], .svadmin-alert).svadmin-alert:is([data-variant="success"], .svadmin-alert--success) {
436
+ border-color: var(--success);
437
+ @supports (color: color-mix(in lab, red, red)) {
438
+ border-color: color-mix(in oklch, var(--success) 50%, var(--border));
439
+ }
440
+ background: var(--success);
441
+ @supports (color: color-mix(in lab, red, red)) {
442
+ background: color-mix(in oklch, var(--success) 10%, transparent);
443
+ }
444
+ color: var(--success);
445
+ }
446
+ .svadmin-avatar {
447
+ display: flex;
448
+ flex-shrink: 0;
449
+ overflow: hidden;
450
+ align-items: center;
451
+ justify-content: center;
452
+ border-radius: 999px;
453
+ }
454
+ .svadmin-avatar:is([data-size="default"], .svadmin-avatar-size--default) {
455
+ width: 2.5rem;
456
+ height: 2.5rem;
457
+ }
458
+ .svadmin-avatar:is([data-size="sm"], .svadmin-avatar-size--sm) {
459
+ width: 2rem;
460
+ height: 2rem;
461
+ }
462
+ .svadmin-avatar:is([data-size="lg"], .svadmin-avatar-size--lg) {
463
+ width: 3rem;
464
+ height: 3rem;
465
+ }
466
+ .svadmin-avatar:is([data-size="xl"], .svadmin-avatar-size--xl) {
467
+ width: 4rem;
468
+ height: 4rem;
469
+ }
470
+ [data-slot="avatar"] {
471
+ width: 100%;
472
+ height: 100%;
473
+ aspect-ratio: 1;
474
+ object-fit: cover;
475
+ }
476
+ [data-slot="avatar-fallback"] {
477
+ background: var(--muted);
478
+ color: var(--muted-foreground);
479
+ font-size: 0.875rem;
480
+ font-weight: 500;
481
+ }
482
+ :is([data-slot="badge"], .svadmin-badge).svadmin-badge {
483
+ display: inline-flex;
484
+ flex-shrink: 0;
485
+ align-items: center;
486
+ justify-content: center;
487
+ gap: 0.25rem;
488
+ width: fit-content;
489
+ min-height: 1.25rem;
490
+ overflow: hidden;
491
+ border: 1px solid transparent;
492
+ border-radius: var(--radius-sm);
493
+ padding: 0.125rem 0.625rem;
494
+ font-size: 0.75rem;
495
+ font-weight: 600;
496
+ line-height: 1;
497
+ white-space: nowrap;
498
+ transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
499
+ }
500
+ :is([data-slot="badge"], .svadmin-badge).svadmin-badge > svg {
501
+ width: 0.75rem;
502
+ height: 0.75rem;
503
+ pointer-events: none;
504
+ }
505
+ :is([data-slot="badge"], .svadmin-badge).svadmin-badge:is([data-variant="default"], .svadmin-badge--default) {
506
+ background: var(--primary);
507
+ color: var(--primary-foreground);
508
+ }
509
+ :is([data-slot="badge"], .svadmin-badge).svadmin-badge:is([data-variant="secondary"], .svadmin-badge--secondary) {
510
+ background: var(--secondary);
511
+ color: var(--secondary-foreground);
512
+ }
513
+ :is([data-slot="badge"], .svadmin-badge).svadmin-badge:is([data-variant="destructive"], .svadmin-badge--destructive), :is([data-slot="badge"], .svadmin-badge).svadmin-badge:is([data-variant="subtle-destructive"], .svadmin-badge--subtle-destructive) {
514
+ border-color: var(--destructive);
515
+ @supports (color: color-mix(in lab, red, red)) {
516
+ border-color: color-mix(in oklch, var(--destructive) 20%, transparent);
517
+ }
518
+ background: var(--destructive);
519
+ @supports (color: color-mix(in lab, red, red)) {
520
+ background: color-mix(in oklch, var(--destructive) 10%, transparent);
521
+ }
522
+ color: var(--destructive);
523
+ }
524
+ :is([data-slot="badge"], .svadmin-badge).svadmin-badge:is([data-variant="subtle"], .svadmin-badge--subtle) {
525
+ border-color: var(--primary);
526
+ @supports (color: color-mix(in lab, red, red)) {
527
+ border-color: color-mix(in oklch, var(--primary) 20%, transparent);
528
+ }
529
+ background: var(--primary);
530
+ @supports (color: color-mix(in lab, red, red)) {
531
+ background: color-mix(in oklch, var(--primary) 10%, transparent);
532
+ }
533
+ color: var(--primary);
534
+ }
535
+ :is([data-slot="badge"], .svadmin-badge).svadmin-badge:is([data-variant="subtle-success"], .svadmin-badge--subtle-success) {
536
+ border-color: var(--success);
537
+ @supports (color: color-mix(in lab, red, red)) {
538
+ border-color: color-mix(in oklch, var(--success) 20%, transparent);
539
+ }
540
+ background: var(--success);
541
+ @supports (color: color-mix(in lab, red, red)) {
542
+ background: color-mix(in oklch, var(--success) 10%, transparent);
543
+ }
544
+ color: var(--success);
545
+ }
546
+ :is([data-slot="badge"], .svadmin-badge).svadmin-badge:is([data-variant="subtle-warning"], .svadmin-badge--subtle-warning) {
547
+ border-color: var(--warning);
548
+ @supports (color: color-mix(in lab, red, red)) {
549
+ border-color: color-mix(in oklch, var(--warning) 20%, transparent);
550
+ }
551
+ background: var(--warning);
552
+ @supports (color: color-mix(in lab, red, red)) {
553
+ background: color-mix(in oklch, var(--warning) 10%, transparent);
554
+ }
555
+ color: var(--warning);
556
+ }
557
+ :is([data-slot="badge"], .svadmin-badge).svadmin-badge:is([data-variant="subtle-pill"], .svadmin-badge--subtle-pill) {
558
+ border-color: var(--border);
559
+ @supports (color: color-mix(in lab, red, red)) {
560
+ border-color: color-mix(in oklch, var(--border) 80%, transparent);
561
+ }
562
+ border-radius: 999px;
563
+ background: var(--muted);
564
+ @supports (color: color-mix(in lab, red, red)) {
565
+ background: color-mix(in oklch, var(--muted) 70%, transparent);
566
+ }
567
+ color: var(--muted-foreground);
568
+ font-weight: 500;
569
+ }
570
+ :is([data-slot="badge"], .svadmin-badge).svadmin-badge:is([data-variant="outline"], .svadmin-badge--outline) {
571
+ border-color: var(--color-border, var(--border));
572
+ color: var(--foreground);
573
+ }
574
+ :is([data-slot="badge"], .svadmin-badge).svadmin-badge:is([data-variant="ghost"], .svadmin-badge--ghost):hover, :is([data-slot="badge"], .svadmin-badge).svadmin-badge:is([data-variant="outline"], .svadmin-badge--outline):hover {
575
+ background: var(--muted);
576
+ color: var(--muted-foreground);
577
+ }
578
+ :is([data-slot="badge"], .svadmin-badge).svadmin-badge:is([data-variant="link"], .svadmin-badge--link) {
579
+ color: var(--primary);
580
+ text-decoration: underline;
581
+ text-underline-offset: 0.25rem;
582
+ }
583
+ }
584
+ * {
585
+ scrollbar-color: var(--muted-foreground) transparent;
586
+ @supports (color: color-mix(in lab, red, red)) {
587
+ scrollbar-color: color-mix(in oklch, var(--muted-foreground) 42%, transparent) transparent;
588
+ }
589
+ scrollbar-width: thin;
590
+ }
591
+ ::-webkit-scrollbar {
592
+ width: 6px;
593
+ height: 6px;
594
+ }
595
+ ::-webkit-scrollbar-track {
596
+ background: transparent;
597
+ }
598
+ ::-webkit-scrollbar-thumb {
599
+ background: var(--muted-foreground);
600
+ @supports (color: color-mix(in lab, red, red)) {
601
+ background: color-mix(in oklch, var(--muted-foreground) 42%, transparent);
602
+ }
603
+ border-radius: 3px;
604
+ }
605
+ ::-webkit-scrollbar-thumb:hover {
606
+ background: var(--muted-foreground);
607
+ @supports (color: color-mix(in lab, red, red)) {
608
+ background: color-mix(in oklch, var(--muted-foreground) 62%, transparent);
609
+ }
610
+ }
611
+ [data-slot="table-row"] {
612
+ transition: background-color 140ms ease;
613
+ }
614
+ [data-slot="table-row"]:hover {
615
+ background-color: var(--primary);
616
+ @supports (color: color-mix(in lab, red, red)) {
617
+ background-color: color-mix(in oklch, var(--primary) 4%, var(--background));
618
+ }
619
+ }
620
+ @keyframes svadmin-skeleton-pulse {
621
+ 50% {
622
+ opacity: 0.62;
623
+ }
624
+ }
625
+ [data-slot="skeleton"] {
626
+ animation: svadmin-skeleton-pulse 1.5s ease-in-out infinite;
627
+ background: var(--muted);
628
+ }
629
+ @keyframes svadmin-page-enter {
630
+ from {
631
+ opacity: 0;
632
+ }
633
+ to {
634
+ opacity: 1;
635
+ }
636
+ }
637
+ .svadmin-page-enter {
638
+ animation: svadmin-page-enter 180ms ease-out;
639
+ }
640
+ [data-sonner-toaster] [data-sonner-toast] {
641
+ transition-duration: 180ms;
642
+ transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
643
+ }
644
+ @keyframes svadmin-row-delete {
645
+ to {
646
+ opacity: 0;
647
+ transform: translateX(12px);
648
+ height: 0;
649
+ padding: 0;
650
+ margin: 0;
651
+ }
652
+ }
653
+ .svadmin-deleting {
654
+ animation: svadmin-row-delete 240ms ease-out forwards;
655
+ pointer-events: none;
656
+ }
657
+ [data-slot="tooltip-content"] {
658
+ animation: svadmin-tooltip-enter 120ms ease-out;
659
+ }
660
+ @keyframes svadmin-tooltip-enter {
661
+ from {
662
+ opacity: 0;
663
+ }
664
+ to {
665
+ opacity: 1;
666
+ }
667
+ }
668
+ main {
669
+ scroll-behavior: smooth;
670
+ }
671
+ .svadmin-sidebar-expanded,
672
+ .svadmin-sidebar-collapsed {
673
+ flex: 0 0 auto;
674
+ width: var(--svadmin-sidebar-width);
675
+ }
676
+ .svadmin-sidebar-expanded {
677
+ --svadmin-sidebar-width: 252px;
678
+ }
679
+ .svadmin-sidebar-collapsed {
680
+ --svadmin-sidebar-width: 70px;
681
+ }
682
+ .svadmin-sidebar-content-expanded,
683
+ .svadmin-sidebar-content-collapsed {
684
+ min-width: 0;
685
+ }
686
+ @media (min-width: 768px) {
687
+ .svadmin-sidebar-content-expanded {
688
+ margin-left: 252px;
689
+ }
690
+ .svadmin-sidebar-content-collapsed {
691
+ margin-left: 70px;
692
+ }
693
+ [dir="rtl"] .svadmin-sidebar-content-expanded {
694
+ margin-left: 0;
695
+ margin-right: 252px;
696
+ }
697
+ [dir="rtl"] .svadmin-sidebar-content-collapsed {
698
+ margin-left: 0;
699
+ margin-right: 70px;
700
+ }
701
+ }
702
+ [dir="rtl"] {
703
+ direction: rtl;
704
+ }
705
+ [dir="rtl"] aside {
706
+ left: auto;
707
+ right: 0;
708
+ }
709
+ .sidebar-menu-item, .sidebar-menu-item-active {
710
+ position: relative;
711
+ }
712
+ .sidebar-menu-item {
713
+ cursor: pointer;
714
+ -webkit-tap-highlight-color: transparent;
715
+ }
716
+ .sidebar-scroll [data-radix-scroll-area-viewport] > div {
717
+ display: flex;
718
+ min-height: 100%;
719
+ flex-direction: column;
720
+ }
721
+ @media (prefers-reduced-motion: reduce) {
722
+ *, *::before, *::after {
723
+ animation-duration: 0.01ms !important;
724
+ animation-iteration-count: 1 !important;
725
+ scroll-behavior: auto !important;
726
+ transition-duration: 0.01ms !important;
727
+ }
728
+ }
729
+ @supports (padding-bottom: env(safe-area-inset-bottom)) {
730
+ main {
731
+ padding-bottom: env(safe-area-inset-bottom);
732
+ }
733
+ }
734
+ @media (max-width: 640px) and (pointer: coarse) {
735
+ :is([data-slot="button"], .svadmin-button) {
736
+ position: relative;
737
+ }
738
+ :is([data-slot="button"], .svadmin-button)::after {
739
+ position: absolute;
740
+ z-index: 1;
741
+ top: 50%;
742
+ left: 50%;
743
+ width: 100%;
744
+ min-width: 44px;
745
+ height: 100%;
746
+ min-height: 44px;
747
+ content: '';
748
+ transform: translate(-50%, -50%);
749
+ }
750
+ }
751
+ @layer components {
752
+ .svadmin-line-chart-point:hover {
753
+ r: 6px;
754
+ }
755
+ .svadmin-rich-text {
756
+ color: var(--foreground);
757
+ }
758
+ .svadmin-file-input {
759
+ position: relative;
760
+ width: 100%;
761
+ min-width: 0;
762
+ height: 2.25rem;
763
+ }
764
+ .svadmin-file-input__visual {
765
+ display: flex;
766
+ align-items: center;
767
+ gap: 0.75rem;
768
+ width: 100%;
769
+ height: 100%;
770
+ overflow: hidden;
771
+ border: 1px solid var(--border);
772
+ border-radius: 0.5rem;
773
+ background: var(--card);
774
+ box-shadow: var(--shadow-control);
775
+ padding: 0.25rem 0.75rem 0.25rem 0.25rem;
776
+ color: var(--muted-foreground);
777
+ pointer-events: none;
778
+ transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
779
+ }
780
+ .svadmin-file-input__button {
781
+ flex: 0 0 auto;
782
+ display: inline-flex;
783
+ align-items: center;
784
+ height: 1.75rem;
785
+ border: 1px solid var(--border);
786
+ @supports (color: color-mix(in lab, red, red)) {
787
+ border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
788
+ }
789
+ border-radius: 0.375rem;
790
+ padding: 0 0.625rem;
791
+ background: var(--muted);
792
+ color: var(--foreground);
793
+ font: inherit;
794
+ font-size: 0.75rem;
795
+ white-space: nowrap;
796
+ }
797
+ .svadmin-file-input__name {
798
+ overflow: hidden;
799
+ text-overflow: ellipsis;
800
+ white-space: nowrap;
801
+ }
802
+ .svadmin-file-input[data-disabled="true"] .svadmin-file-input__visual {
803
+ opacity: 0.5;
804
+ }
805
+ .svadmin-input {
806
+ width: 100%;
807
+ min-width: 0;
808
+ height: 2.25rem;
809
+ border: 1px solid var(--border);
810
+ border-radius: 0.5rem;
811
+ background: transparent;
812
+ color: var(--foreground);
813
+ outline: none;
814
+ transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
815
+ }
816
+ .svadmin-input:not([data-input-type="file"]) {
817
+ padding: 0.375rem 0.75rem;
818
+ font-size: 0.875rem;
819
+ }
820
+ .svadmin-input[data-input-type="file"] {
821
+ position: absolute;
822
+ z-index: 1;
823
+ inset: 0;
824
+ height: 100%;
825
+ border: 0;
826
+ padding: 0;
827
+ opacity: 0;
828
+ appearance: none;
829
+ cursor: pointer;
830
+ }
831
+ .svadmin-input[data-input-type="file"]:focus-visible + .svadmin-file-input__visual {
832
+ border-color: var(--ring);
833
+ box-shadow: 0 0 0 3px var(--ring);
834
+ @supports (color: color-mix(in lab, red, red)) {
835
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 20%, transparent);
836
+ }
837
+ }
838
+ .svadmin-input:focus-visible {
839
+ border-color: var(--ring);
840
+ box-shadow: 0 0 0 3px var(--ring);
841
+ @supports (color: color-mix(in lab, red, red)) {
842
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 20%, transparent);
843
+ }
844
+ }
845
+ .svadmin-input[aria-invalid="true"] {
846
+ border-color: var(--destructive);
847
+ box-shadow: 0 0 0 3px var(--destructive);
848
+ @supports (color: color-mix(in lab, red, red)) {
849
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--destructive) 20%, transparent);
850
+ }
851
+ }
852
+ .svadmin-input:disabled {
853
+ cursor: not-allowed;
854
+ opacity: 0.5;
855
+ }
856
+ .svadmin-input::placeholder {
857
+ color: var(--muted-foreground);
858
+ }
859
+ .svadmin-card {
860
+ display: flex;
861
+ flex-direction: column;
862
+ gap: 1rem;
863
+ overflow: hidden;
864
+ border-radius: 0.5rem;
865
+ padding: 1rem 0;
866
+ background: var(--card);
867
+ color: var(--card-foreground);
868
+ font-size: 0.875rem;
869
+ box-shadow: var(--svadmin-shadow-surface);
870
+ }
871
+ .svadmin-card[data-size="sm"] {
872
+ gap: 0.75rem;
873
+ padding-top: 0.75rem;
874
+ padding-bottom: 0.75rem;
875
+ }
876
+ .svadmin-card:has([data-slot="card-footer"]) {
877
+ padding-bottom: 0;
878
+ }
879
+ .svadmin-card > img:first-child {
880
+ border-top-left-radius: 0.5rem;
881
+ border-top-right-radius: 0.5rem;
882
+ }
883
+ .svadmin-card > img:last-child {
884
+ border-bottom-left-radius: 0.5rem;
885
+ border-bottom-right-radius: 0.5rem;
886
+ }
887
+ .svadmin-table-cell {
888
+ padding: 0.5rem;
889
+ vertical-align: middle;
890
+ white-space: nowrap;
891
+ }
892
+ .svadmin-table-cell[data-density="compact"] {
893
+ height: 2rem;
894
+ padding: 0.25rem 0.5rem;
895
+ font-size: 0.75rem;
896
+ }
897
+ .svadmin-table-cell[data-sticky="right"], .svadmin-table-cell[data-sticky="left"] {
898
+ position: sticky;
899
+ z-index: 10;
900
+ background: var(--background);
901
+ }
902
+ .svadmin-table-cell[data-sticky="right"] {
903
+ right: 0;
904
+ box-shadow: -1px 0 0 var(--border);
905
+ }
906
+ .svadmin-table-cell[data-sticky="left"] {
907
+ left: 0;
908
+ box-shadow: 1px 0 0 var(--border);
909
+ }
910
+ .svadmin-table-row:hover .svadmin-table-cell[data-sticky], .svadmin-table-row[data-state="selected"] .svadmin-table-cell[data-sticky] {
911
+ background: var(--muted);
912
+ }
913
+ .svadmin-dialog-content {
914
+ position: fixed;
915
+ top: 50%;
916
+ left: 50%;
917
+ z-index: 50;
918
+ display: grid;
919
+ width: 100%;
920
+ max-width: min(32rem, calc(100% - 2rem));
921
+ gap: 1rem;
922
+ border-radius: 0.75rem;
923
+ padding: 1.5rem;
924
+ background: var(--background);
925
+ color: var(--foreground);
926
+ outline: none;
927
+ box-shadow: var(--svadmin-shadow-overlay);
928
+ transform: translate(-50%, -50%);
929
+ transition: opacity 300ms ease, transform 300ms ease;
930
+ }
931
+ .svadmin-dialog-content[data-state="closed"] {
932
+ opacity: 0;
933
+ transform: translate(-50%, -50%) scale(0.98);
934
+ }
935
+ .svadmin-dialog-overlay, .svadmin-alert-dialog-overlay, .svadmin-sheet-overlay {
936
+ position: fixed;
937
+ inset: 0;
938
+ z-index: 50;
939
+ background: var(--foreground);
940
+ @supports (color: color-mix(in lab, red, red)) {
941
+ background: color-mix(in srgb, var(--foreground) 20%, transparent);
942
+ }
943
+ isolation: isolate;
944
+ backdrop-filter: blur(4px);
945
+ animation: svadmin-overlay-enter 160ms ease-out;
946
+ }
947
+ .svadmin-alert-dialog-overlay, .svadmin-sheet-overlay {
948
+ background: var(--foreground);
949
+ @supports (color: color-mix(in lab, red, red)) {
950
+ background: color-mix(in srgb, var(--foreground) 80%, transparent);
951
+ }
952
+ }
953
+ .svadmin-alert-dialog-content {
954
+ position: fixed;
955
+ top: 50%;
956
+ left: 50%;
957
+ z-index: 50;
958
+ display: grid;
959
+ width: 100%;
960
+ max-width: 32rem;
961
+ gap: 1rem;
962
+ border: 1px solid var(--border);
963
+ border-radius: 0.5rem;
964
+ padding: 1.5rem;
965
+ background: var(--background);
966
+ color: var(--foreground);
967
+ box-shadow: var(--svadmin-shadow-overlay);
968
+ transform: translate(-50%, -50%);
969
+ animation: svadmin-dialog-enter 200ms ease-out;
970
+ }
971
+ .svadmin-alert-dialog-content[data-state="closed"] {
972
+ opacity: 0;
973
+ transform: translate(-50%, -50%) scale(0.95);
974
+ }
975
+ .svadmin-sheet-panel {
976
+ position: fixed;
977
+ z-index: 50;
978
+ display: flex;
979
+ height: 100%;
980
+ width: 75%;
981
+ max-width: 24rem;
982
+ flex-direction: column;
983
+ gap: 1rem;
984
+ padding: 1.5rem;
985
+ background: var(--background);
986
+ color: var(--foreground);
987
+ box-shadow: var(--svadmin-shadow-overlay);
988
+ }
989
+ .svadmin-sheet-panel[data-side="right"] {
990
+ inset: 0 0 0 auto;
991
+ border-left: 1px solid var(--border);
992
+ }
993
+ .svadmin-sheet-panel[data-side="left"] {
994
+ inset: 0 auto 0 0;
995
+ border-right: 1px solid var(--border);
996
+ }
997
+ .svadmin-sheet-content {
998
+ display: flex;
999
+ height: 100%;
1000
+ flex-direction: column;
1001
+ gap: 1rem;
1002
+ }
1003
+ .svadmin-sheet-close {
1004
+ position: absolute;
1005
+ top: 1rem;
1006
+ right: 1rem;
1007
+ border: 0;
1008
+ border-radius: 0.25rem;
1009
+ padding: 0.25rem;
1010
+ background: transparent;
1011
+ color: inherit;
1012
+ opacity: 0.7;
1013
+ cursor: pointer;
1014
+ transition: opacity 120ms ease, box-shadow 120ms ease;
1015
+ }
1016
+ .svadmin-sheet-close:hover {
1017
+ opacity: 1;
1018
+ }
1019
+ .svadmin-sheet-close:focus-visible {
1020
+ outline: none;
1021
+ box-shadow: 0 0 0 2px var(--ring);
1022
+ }
1023
+ @keyframes svadmin-overlay-enter {
1024
+ from {
1025
+ opacity: 0;
1026
+ }
1027
+ to {
1028
+ opacity: 1;
1029
+ }
1030
+ }
1031
+ @keyframes svadmin-dialog-enter {
1032
+ from {
1033
+ opacity: 0;
1034
+ transform: translate(-50%, -48%) scale(0.98);
1035
+ }
1036
+ to {
1037
+ opacity: 1;
1038
+ transform: translate(-50%, -50%) scale(1);
1039
+ }
1040
+ }
1041
+ .svadmin-label {
1042
+ display: flex;
1043
+ align-items: center;
1044
+ gap: 0.5rem;
1045
+ color: var(--foreground);
1046
+ font-size: 0.875rem;
1047
+ line-height: 1;
1048
+ font-weight: 500;
1049
+ user-select: none;
1050
+ }
1051
+ .svadmin-label:has(+ :disabled), .svadmin-label[data-disabled="true"] {
1052
+ cursor: not-allowed;
1053
+ opacity: 0.5;
1054
+ }
1055
+ .svadmin-textarea {
1056
+ width: 100%;
1057
+ min-height: 5rem;
1058
+ resize: vertical;
1059
+ border: 1px solid var(--border);
1060
+ border-radius: 0.5rem;
1061
+ padding: 0.5rem 0.75rem;
1062
+ background: transparent;
1063
+ color: var(--foreground);
1064
+ font: inherit;
1065
+ font-size: 0.875rem;
1066
+ outline: none;
1067
+ transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
1068
+ }
1069
+ .svadmin-textarea:focus-visible {
1070
+ border-color: var(--ring);
1071
+ box-shadow: 0 0 0 3px var(--ring);
1072
+ @supports (color: color-mix(in lab, red, red)) {
1073
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 20%, transparent);
1074
+ }
1075
+ }
1076
+ .svadmin-textarea[aria-invalid="true"] {
1077
+ border-color: var(--destructive);
1078
+ box-shadow: 0 0 0 3px var(--destructive);
1079
+ @supports (color: color-mix(in lab, red, red)) {
1080
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--destructive) 20%, transparent);
1081
+ }
1082
+ }
1083
+ .svadmin-textarea:disabled {
1084
+ cursor: not-allowed;
1085
+ opacity: 0.5;
1086
+ }
1087
+ .svadmin-textarea::placeholder {
1088
+ color: var(--muted-foreground);
1089
+ }
1090
+ .svadmin-skeleton {
1091
+ border-radius: 0.375rem;
1092
+ background: var(--muted);
1093
+ animation: svadmin-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
1094
+ }
1095
+ @keyframes svadmin-pulse {
1096
+ 50% {
1097
+ opacity: 0.5;
1098
+ }
1099
+ }
1100
+ .svadmin-progress {
1101
+ position: relative;
1102
+ width: 100%;
1103
+ height: 0.5rem;
1104
+ overflow: hidden;
1105
+ border-radius: 999px;
1106
+ background: var(--primary);
1107
+ @supports (color: color-mix(in lab, red, red)) {
1108
+ background: color-mix(in srgb, var(--primary) 20%, transparent);
1109
+ }
1110
+ }
1111
+ .svadmin-progress-value {
1112
+ width: 100%;
1113
+ height: 100%;
1114
+ flex: 1;
1115
+ background: var(--primary);
1116
+ transition: transform 200ms ease;
1117
+ }
1118
+ .svadmin-separator {
1119
+ flex-shrink: 0;
1120
+ background: var(--border);
1121
+ }
1122
+ .svadmin-separator[data-orientation="horizontal"] {
1123
+ width: 100%;
1124
+ height: 1px;
1125
+ }
1126
+ .svadmin-separator[data-orientation="vertical"] {
1127
+ width: 1px;
1128
+ height: 100%;
1129
+ }
1130
+ .svadmin-card-header {
1131
+ display: grid;
1132
+ grid-auto-rows: min-content;
1133
+ grid-template-columns: 1fr;
1134
+ align-items: start;
1135
+ gap: 0.25rem;
1136
+ padding: 0 1rem;
1137
+ }
1138
+ .svadmin-card-header:has([data-slot="card-action"]) {
1139
+ grid-template-columns: 1fr auto;
1140
+ }
1141
+ .svadmin-card-header:has([data-slot="card-description"]) {
1142
+ grid-template-rows: auto auto;
1143
+ }
1144
+ .svadmin-card[data-size="sm"] .svadmin-card-header, .svadmin-card[data-size="sm"] .svadmin-card-content {
1145
+ padding-right: 0.75rem;
1146
+ padding-left: 0.75rem;
1147
+ }
1148
+ .svadmin-card-header:has(+ .svadmin-card-content), .svadmin-card-header[class*="border-b"] {
1149
+ padding-bottom: 1rem;
1150
+ }
1151
+ .svadmin-card-content {
1152
+ padding: 0 1rem;
1153
+ }
1154
+ .svadmin-card-footer {
1155
+ display: flex;
1156
+ align-items: center;
1157
+ border-radius: 0 0 0.75rem 0.75rem;
1158
+ padding: 1rem;
1159
+ background: var(--muted);
1160
+ @supports (color: color-mix(in lab, red, red)) {
1161
+ background: color-mix(in srgb, var(--muted) 50%, transparent);
1162
+ }
1163
+ }
1164
+ .svadmin-card[data-size="sm"] .svadmin-card-footer {
1165
+ padding: 0.75rem;
1166
+ }
1167
+ .svadmin-card-title {
1168
+ color: var(--card-foreground);
1169
+ font-size: inherit;
1170
+ font-weight: 600;
1171
+ line-height: 1;
1172
+ letter-spacing: 0;
1173
+ }
1174
+ .svadmin-card[data-size="sm"] .svadmin-card-title {
1175
+ font-size: 0.875rem;
1176
+ }
1177
+ .svadmin-card-description {
1178
+ color: var(--muted-foreground);
1179
+ font-size: 0.875rem;
1180
+ }
1181
+ .svadmin-card-action {
1182
+ grid-column: 2;
1183
+ grid-row: span 2;
1184
+ grid-row-start: 1;
1185
+ align-self: start;
1186
+ justify-self: end;
1187
+ }
1188
+ .svadmin-table-caption {
1189
+ margin-top: 1rem;
1190
+ color: var(--muted-foreground);
1191
+ font-size: 0.875rem;
1192
+ }
1193
+ .svadmin-table-footer {
1194
+ background: var(--muted);
1195
+ @supports (color: color-mix(in lab, red, red)) {
1196
+ background: color-mix(in srgb, var(--muted) 50%, transparent);
1197
+ }
1198
+ font-weight: 500;
1199
+ }
1200
+ .svadmin-breadcrumb-list {
1201
+ display: flex;
1202
+ flex-wrap: wrap;
1203
+ align-items: center;
1204
+ gap: 0.375rem;
1205
+ color: var(--muted-foreground);
1206
+ font-size: 0.875rem;
1207
+ overflow-wrap: break-word;
1208
+ }
1209
+ .svadmin-breadcrumb-item {
1210
+ display: inline-flex;
1211
+ align-items: center;
1212
+ gap: 0.375rem;
1213
+ }
1214
+ .svadmin-breadcrumb-link {
1215
+ transition: color 120ms ease;
1216
+ }
1217
+ .svadmin-breadcrumb-link:hover {
1218
+ color: var(--foreground);
1219
+ }
1220
+ .svadmin-breadcrumb-page {
1221
+ color: var(--foreground);
1222
+ font-weight: 400;
1223
+ }
1224
+ .svadmin-breadcrumb-separator {
1225
+ display: inline-flex;
1226
+ align-items: center;
1227
+ }
1228
+ .svadmin-breadcrumb-ellipsis {
1229
+ display: flex;
1230
+ width: 2.25rem;
1231
+ height: 2.25rem;
1232
+ align-items: center;
1233
+ justify-content: center;
1234
+ }
1235
+ .svadmin-breadcrumb-icon {
1236
+ width: 0.875rem;
1237
+ height: 0.875rem;
1238
+ }
1239
+ .svadmin-alert-dialog-header {
1240
+ display: flex;
1241
+ flex-direction: column;
1242
+ gap: 0.5rem;
1243
+ text-align: center;
1244
+ }
1245
+ .svadmin-alert-dialog-footer {
1246
+ display: flex;
1247
+ flex-direction: column-reverse;
1248
+ gap: 0.5rem;
1249
+ }
1250
+ .svadmin-alert-dialog-title, .svadmin-dialog-title {
1251
+ color: var(--foreground);
1252
+ font-size: 1.125rem;
1253
+ line-height: 1;
1254
+ font-weight: 600;
1255
+ }
1256
+ .svadmin-alert-dialog-description, .svadmin-dialog-description, .svadmin-sheet-description {
1257
+ color: var(--muted-foreground);
1258
+ font-size: 0.875rem;
1259
+ }
1260
+ .svadmin-dialog-description a {
1261
+ text-decoration: underline;
1262
+ text-underline-offset: 3px;
1263
+ }
1264
+ .svadmin-dialog-description a:hover {
1265
+ color: var(--foreground);
1266
+ }
1267
+ .svadmin-dialog-header {
1268
+ display: flex;
1269
+ flex-direction: column;
1270
+ gap: 0.5rem;
1271
+ }
1272
+ .svadmin-dialog-footer {
1273
+ display: flex;
1274
+ flex-direction: column-reverse;
1275
+ gap: 0.5rem;
1276
+ margin: 0 -1.5rem -1.5rem;
1277
+ border-top: 1px solid var(--border);
1278
+ border-radius: 0 0 0.75rem 0.75rem;
1279
+ padding: 1rem;
1280
+ background: var(--muted);
1281
+ @supports (color: color-mix(in lab, red, red)) {
1282
+ background: color-mix(in srgb, var(--muted) 50%, transparent);
1283
+ }
1284
+ }
1285
+ .svadmin-sheet-header {
1286
+ display: flex;
1287
+ flex-direction: column;
1288
+ gap: 0.375rem;
1289
+ padding-bottom: 1rem;
1290
+ }
1291
+ .svadmin-sheet-footer {
1292
+ display: flex;
1293
+ flex-direction: column-reverse;
1294
+ gap: 0.5rem;
1295
+ margin-top: auto;
1296
+ }
1297
+ .svadmin-sheet-title {
1298
+ color: var(--foreground);
1299
+ font-size: 1.125rem;
1300
+ font-weight: 600;
1301
+ }
1302
+ .svadmin-dropdown-separator, .svadmin-command-separator {
1303
+ height: 1px;
1304
+ margin: 0.25rem -0.25rem;
1305
+ background: var(--border);
1306
+ }
1307
+ .svadmin-command-group {
1308
+ overflow: hidden;
1309
+ padding: 0.25rem;
1310
+ color: var(--foreground);
1311
+ }
1312
+ .svadmin-command-heading {
1313
+ padding: 0.375rem 0.5rem;
1314
+ color: var(--muted-foreground);
1315
+ font-size: 0.75rem;
1316
+ font-weight: 500;
1317
+ }
1318
+ .svadmin-command-empty {
1319
+ padding: 1.5rem 0;
1320
+ text-align: center;
1321
+ font-size: 0.875rem;
1322
+ }
1323
+ .svadmin-select {
1324
+ width: 100%;
1325
+ height: 2.25rem;
1326
+ border: 1px solid var(--border);
1327
+ border-radius: 0.5rem;
1328
+ padding: 0.375rem 0.75rem;
1329
+ background: var(--background);
1330
+ color: var(--foreground);
1331
+ font: inherit;
1332
+ font-size: 0.875rem;
1333
+ outline: none;
1334
+ transition: border-color 120ms ease, box-shadow 120ms ease;
1335
+ }
1336
+ .svadmin-select:focus-visible {
1337
+ border-color: var(--ring);
1338
+ box-shadow: 0 0 0 3px var(--ring);
1339
+ @supports (color: color-mix(in lab, red, red)) {
1340
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 20%, transparent);
1341
+ }
1342
+ }
1343
+ .svadmin-select:disabled {
1344
+ cursor: not-allowed;
1345
+ opacity: 0.5;
1346
+ }
1347
+ .svadmin-tabs {
1348
+ display: flex;
1349
+ flex-direction: column;
1350
+ gap: 0.5rem;
1351
+ }
1352
+ .svadmin-tabs-list {
1353
+ display: inline-flex;
1354
+ width: fit-content;
1355
+ height: 2.25rem;
1356
+ align-items: center;
1357
+ justify-content: center;
1358
+ gap: 0.25rem;
1359
+ border-radius: 0.5rem;
1360
+ padding: 0.1875rem;
1361
+ background: var(--muted);
1362
+ color: var(--muted-foreground);
1363
+ }
1364
+ .svadmin-tabs-trigger {
1365
+ display: inline-flex;
1366
+ align-items: center;
1367
+ justify-content: center;
1368
+ gap: 0.375rem;
1369
+ white-space: nowrap;
1370
+ border: 0;
1371
+ border-radius: 0.375rem;
1372
+ padding: 0.25rem 0.625rem;
1373
+ background: transparent;
1374
+ color: var(--muted-foreground);
1375
+ font: inherit;
1376
+ font-size: 0.875rem;
1377
+ font-weight: 500;
1378
+ outline: none;
1379
+ cursor: pointer;
1380
+ transition: color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
1381
+ }
1382
+ .svadmin-tabs-trigger[data-state="active"] {
1383
+ background: var(--background);
1384
+ color: var(--foreground);
1385
+ box-shadow: var(--svadmin-shadow-control);
1386
+ }
1387
+ .svadmin-tabs-trigger:hover {
1388
+ color: var(--foreground);
1389
+ }
1390
+ .svadmin-tabs-trigger:focus-visible {
1391
+ box-shadow: 0 0 0 2px var(--ring);
1392
+ @supports (color: color-mix(in lab, red, red)) {
1393
+ box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 50%, transparent);
1394
+ }
1395
+ }
1396
+ .svadmin-tabs-trigger:disabled {
1397
+ cursor: not-allowed;
1398
+ opacity: 0.5;
1399
+ }
1400
+ .svadmin-tabs-trigger svg {
1401
+ width: 1rem;
1402
+ height: 1rem;
1403
+ flex-shrink: 0;
1404
+ }
1405
+ .svadmin-tabs-content {
1406
+ flex: 1;
1407
+ outline: none;
1408
+ }
1409
+ .svadmin-command {
1410
+ display: flex;
1411
+ width: 100%;
1412
+ height: 100%;
1413
+ flex-direction: column;
1414
+ overflow: hidden;
1415
+ border-radius: 0.375rem;
1416
+ background: var(--popover);
1417
+ color: var(--popover-foreground);
1418
+ }
1419
+ .svadmin-command-input {
1420
+ width: 100%;
1421
+ border: 0;
1422
+ background: transparent;
1423
+ color: inherit;
1424
+ font-size: 0.875rem;
1425
+ outline: none;
1426
+ }
1427
+ .svadmin-command-input:disabled {
1428
+ cursor: not-allowed;
1429
+ opacity: 0.5;
1430
+ }
1431
+ .svadmin-command-list {
1432
+ max-height: 18rem;
1433
+ overflow-x: hidden;
1434
+ overflow-y: auto;
1435
+ }
1436
+ .svadmin-command-item {
1437
+ position: relative;
1438
+ display: flex;
1439
+ align-items: center;
1440
+ gap: 0.5rem;
1441
+ border-radius: 0.125rem;
1442
+ padding: 0.375rem 0.5rem;
1443
+ color: var(--foreground);
1444
+ font-size: 0.875rem;
1445
+ outline: none;
1446
+ cursor: default;
1447
+ user-select: none;
1448
+ }
1449
+ .svadmin-command-item[data-selected] {
1450
+ background: var(--accent);
1451
+ color: var(--accent-foreground);
1452
+ }
1453
+ .svadmin-command-item[data-disabled] {
1454
+ pointer-events: none;
1455
+ opacity: 0.5;
1456
+ }
1457
+ .svadmin-dropdown-menu {
1458
+ position: relative;
1459
+ display: inline-block;
1460
+ }
1461
+ .svadmin-dropdown-content {
1462
+ position: absolute;
1463
+ z-index: 50;
1464
+ min-width: 8rem;
1465
+ margin-top: 0.25rem;
1466
+ overflow: hidden;
1467
+ border: 1px solid var(--border);
1468
+ border-radius: 0.5rem;
1469
+ padding: 0.25rem;
1470
+ background: var(--popover);
1471
+ color: var(--popover-foreground);
1472
+ box-shadow: var(--svadmin-shadow-overlay);
1473
+ animation: svadmin-menu-enter 120ms ease-out;
1474
+ }
1475
+ .svadmin-dropdown-align-start {
1476
+ left: 0;
1477
+ }
1478
+ .svadmin-dropdown-align-center {
1479
+ left: 50%;
1480
+ transform: translateX(-50%);
1481
+ }
1482
+ .svadmin-dropdown-align-end {
1483
+ right: 0;
1484
+ }
1485
+ .svadmin-dropdown-item, .svadmin-dropdown-checkbox-item {
1486
+ position: relative;
1487
+ display: flex;
1488
+ width: 100%;
1489
+ align-items: center;
1490
+ gap: 0.5rem;
1491
+ border: 0;
1492
+ border-radius: 0.375rem;
1493
+ padding: 0.375rem 0.5rem;
1494
+ background: transparent;
1495
+ color: var(--foreground);
1496
+ font: inherit;
1497
+ font-size: 0.875rem;
1498
+ outline: none;
1499
+ cursor: pointer;
1500
+ user-select: none;
1501
+ transition: background-color 120ms ease, color 120ms ease;
1502
+ }
1503
+ .svadmin-dropdown-item[data-inset="true"] {
1504
+ padding-left: 2rem;
1505
+ }
1506
+ .svadmin-dropdown-item:hover, .svadmin-dropdown-item:focus, .svadmin-dropdown-checkbox-item:hover, .svadmin-dropdown-checkbox-item:focus {
1507
+ background: var(--accent);
1508
+ color: var(--accent-foreground);
1509
+ }
1510
+ .svadmin-dropdown-item[data-variant="destructive"] {
1511
+ color: var(--destructive);
1512
+ }
1513
+ .svadmin-dropdown-item[data-variant="destructive"]:hover, .svadmin-dropdown-item[data-variant="destructive"]:focus {
1514
+ background: var(--destructive);
1515
+ @supports (color: color-mix(in lab, red, red)) {
1516
+ background: color-mix(in srgb, var(--destructive) 10%, transparent);
1517
+ }
1518
+ }
1519
+ .svadmin-dropdown-item:disabled, .svadmin-dropdown-checkbox-item[data-disabled] {
1520
+ pointer-events: none;
1521
+ opacity: 0.5;
1522
+ }
1523
+ .svadmin-dropdown-item svg, .svadmin-dropdown-checkbox-item svg {
1524
+ width: 1rem;
1525
+ height: 1rem;
1526
+ flex-shrink: 0;
1527
+ }
1528
+ .svadmin-dropdown-checkbox-item {
1529
+ padding-right: 0.5rem;
1530
+ padding-left: 2rem;
1531
+ cursor: default;
1532
+ }
1533
+ .svadmin-dropdown-checkbox-indicator {
1534
+ position: absolute;
1535
+ left: 0.5rem;
1536
+ display: flex;
1537
+ width: 0.875rem;
1538
+ height: 0.875rem;
1539
+ align-items: center;
1540
+ justify-content: center;
1541
+ pointer-events: none;
1542
+ }
1543
+ .svadmin-dropdown-checkbox-indicator svg {
1544
+ width: 1rem;
1545
+ height: 1rem;
1546
+ }
1547
+ .svadmin-checkbox {
1548
+ position: relative;
1549
+ display: flex;
1550
+ width: 1rem;
1551
+ height: 1rem;
1552
+ flex-shrink: 0;
1553
+ align-items: center;
1554
+ justify-content: center;
1555
+ border: 1px solid var(--border);
1556
+ border-radius: 0.25rem;
1557
+ background: var(--background);
1558
+ color: var(--primary-foreground);
1559
+ outline: none;
1560
+ cursor: pointer;
1561
+ transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
1562
+ }
1563
+ .svadmin-checkbox[data-state="checked"], .svadmin-checkbox[data-state="indeterminate"], .svadmin-checkbox[data-checked] {
1564
+ border-color: var(--primary);
1565
+ background: var(--primary);
1566
+ }
1567
+ .svadmin-checkbox:focus-visible {
1568
+ border-color: var(--ring);
1569
+ box-shadow: 0 0 0 3px var(--ring);
1570
+ @supports (color: color-mix(in lab, red, red)) {
1571
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
1572
+ }
1573
+ }
1574
+ .svadmin-checkbox:disabled {
1575
+ cursor: not-allowed;
1576
+ opacity: 0.5;
1577
+ }
1578
+ .svadmin-checkbox-indicator {
1579
+ display: grid;
1580
+ place-content: center;
1581
+ color: currentColor;
1582
+ }
1583
+ .svadmin-checkbox-indicator svg {
1584
+ width: 0.875rem;
1585
+ height: 0.875rem;
1586
+ }
1587
+ .svadmin-switch {
1588
+ display: inline-flex;
1589
+ width: 2.25rem;
1590
+ height: 1.25rem;
1591
+ flex-shrink: 0;
1592
+ align-items: center;
1593
+ border: 2px solid transparent;
1594
+ border-radius: 999px;
1595
+ padding: 0;
1596
+ background: var(--input);
1597
+ outline: none;
1598
+ cursor: pointer;
1599
+ box-shadow: var(--svadmin-shadow-control);
1600
+ transition: background-color 160ms ease, box-shadow 160ms ease;
1601
+ }
1602
+ .svadmin-switch[data-state="checked"] {
1603
+ background: var(--primary);
1604
+ }
1605
+ .svadmin-switch:focus-visible {
1606
+ box-shadow: 0 0 0 3px var(--ring);
1607
+ @supports (color: color-mix(in lab, red, red)) {
1608
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
1609
+ }
1610
+ }
1611
+ .svadmin-switch:disabled {
1612
+ cursor: not-allowed;
1613
+ opacity: 0.5;
1614
+ }
1615
+ .svadmin-switch-thumb {
1616
+ display: block;
1617
+ width: 1rem;
1618
+ height: 1rem;
1619
+ border-radius: 999px;
1620
+ background: var(--background);
1621
+ box-shadow: var(--svadmin-shadow-overlay);
1622
+ transform: translateX(0);
1623
+ transition: transform 160ms ease;
1624
+ pointer-events: none;
1625
+ }
1626
+ .svadmin-switch[data-state="checked"] .svadmin-switch-thumb {
1627
+ transform: translateX(1rem);
1628
+ }
1629
+ .svadmin-navigation-menu {
1630
+ position: relative;
1631
+ z-index: 10;
1632
+ display: flex;
1633
+ max-width: max-content;
1634
+ flex: 1;
1635
+ align-items: center;
1636
+ justify-content: center;
1637
+ }
1638
+ .svadmin-navigation-list {
1639
+ display: flex;
1640
+ flex: 1;
1641
+ align-items: center;
1642
+ justify-content: center;
1643
+ gap: 0.25rem;
1644
+ margin: 0;
1645
+ padding: 0;
1646
+ list-style: none;
1647
+ }
1648
+ .svadmin-navigation-item {
1649
+ position: relative;
1650
+ }
1651
+ .svadmin-navigation-link, .svadmin-navigation-trigger {
1652
+ display: inline-flex;
1653
+ width: max-content;
1654
+ height: 2.25rem;
1655
+ align-items: center;
1656
+ justify-content: center;
1657
+ gap: 0.25rem;
1658
+ border: 0;
1659
+ border-radius: 0.375rem;
1660
+ padding: 0.5rem 1rem;
1661
+ background: transparent;
1662
+ color: var(--muted-foreground);
1663
+ font: inherit;
1664
+ font-size: 0.875rem;
1665
+ font-weight: 500;
1666
+ outline: none;
1667
+ cursor: pointer;
1668
+ transition: background-color 120ms ease, color 120ms ease;
1669
+ }
1670
+ .svadmin-navigation-link:hover, .svadmin-navigation-link:focus, .svadmin-navigation-trigger:hover, .svadmin-navigation-trigger:focus, .svadmin-navigation-trigger[data-state="open"] {
1671
+ background: var(--muted);
1672
+ color: var(--foreground);
1673
+ }
1674
+ .svadmin-navigation-link:focus-visible, .svadmin-navigation-trigger:focus-visible {
1675
+ box-shadow: 0 0 0 2px var(--ring);
1676
+ @supports (color: color-mix(in lab, red, red)) {
1677
+ box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 50%, transparent);
1678
+ }
1679
+ }
1680
+ .svadmin-navigation-link:disabled, .svadmin-navigation-trigger:disabled {
1681
+ pointer-events: none;
1682
+ opacity: 0.5;
1683
+ }
1684
+ .svadmin-navigation-trigger-icon {
1685
+ width: 0.75rem;
1686
+ height: 0.75rem;
1687
+ margin-left: 0.25rem;
1688
+ transition: transform 160ms ease;
1689
+ }
1690
+ .svadmin-navigation-trigger[data-state="open"] .svadmin-navigation-trigger-icon {
1691
+ transform: rotate(180deg);
1692
+ }
1693
+ .svadmin-navigation-content {
1694
+ top: 0;
1695
+ left: 0;
1696
+ width: 100%;
1697
+ }
1698
+ .svadmin-navigation-indicator {
1699
+ top: 100%;
1700
+ z-index: 1;
1701
+ display: flex;
1702
+ height: 0.375rem;
1703
+ align-items: flex-end;
1704
+ justify-content: center;
1705
+ overflow: hidden;
1706
+ }
1707
+ .svadmin-navigation-indicator-arrow {
1708
+ position: relative;
1709
+ top: 60%;
1710
+ width: 0.5rem;
1711
+ height: 0.5rem;
1712
+ border-top-left-radius: 0.125rem;
1713
+ background: var(--border);
1714
+ box-shadow: var(--svadmin-shadow-control);
1715
+ transform: rotate(45deg);
1716
+ }
1717
+ .svadmin-navigation-viewport-wrapper {
1718
+ position: absolute;
1719
+ top: 100%;
1720
+ left: 0;
1721
+ display: flex;
1722
+ justify-content: center;
1723
+ }
1724
+ .svadmin-navigation-viewport {
1725
+ position: relative;
1726
+ width: 100%;
1727
+ margin-top: 0.375rem;
1728
+ overflow: hidden;
1729
+ border: 1px solid var(--border);
1730
+ border-radius: 0.375rem;
1731
+ background: var(--popover);
1732
+ color: var(--popover-foreground);
1733
+ box-shadow: var(--svadmin-shadow-overlay);
1734
+ backdrop-filter: blur(12px);
1735
+ transition: width 300ms ease, height 300ms ease;
1736
+ }
1737
+ .svadmin-popover-content {
1738
+ z-index: 50;
1739
+ width: 18rem;
1740
+ border: 1px solid var(--border);
1741
+ border-radius: 0.375rem;
1742
+ padding: 1rem;
1743
+ background: var(--popover);
1744
+ color: var(--popover-foreground);
1745
+ outline: none;
1746
+ box-shadow: var(--svadmin-shadow-overlay);
1747
+ animation: svadmin-dialog-enter 120ms ease-out;
1748
+ }
1749
+ .svadmin-popover-content[data-state="closed"] {
1750
+ opacity: 0;
1751
+ transform: scale(0.95);
1752
+ }
1753
+ .svadmin-avatar-image {
1754
+ display: block;
1755
+ width: 100%;
1756
+ height: 100%;
1757
+ aspect-ratio: 1;
1758
+ object-fit: cover;
1759
+ }
1760
+ .svadmin-avatar-fallback {
1761
+ display: flex;
1762
+ align-items: center;
1763
+ justify-content: center;
1764
+ background: var(--muted);
1765
+ color: var(--muted-foreground);
1766
+ font-size: 0.875rem;
1767
+ font-weight: 500;
1768
+ }
1769
+ .svadmin-tooltip-arrow {
1770
+ position: absolute;
1771
+ z-index: -1;
1772
+ width: 0.625rem;
1773
+ height: 0.625rem;
1774
+ border-radius: 0.125rem;
1775
+ background: var(--primary);
1776
+ transform: rotate(45deg);
1777
+ }
1778
+ .svadmin-command-dialog-content {
1779
+ overflow: hidden;
1780
+ padding: 0;
1781
+ }
1782
+ .svadmin-command-dialog-root {
1783
+ display: flex;
1784
+ width: 100%;
1785
+ height: 100%;
1786
+ flex-direction: column;
1787
+ overflow: hidden;
1788
+ border-radius: 0.375rem;
1789
+ background: var(--popover);
1790
+ color: var(--popover-foreground);
1791
+ }
1792
+ .svadmin-command-dialog-root [data-command-group-heading] {
1793
+ padding: 0 0.5rem;
1794
+ color: var(--muted-foreground);
1795
+ font-weight: 500;
1796
+ }
1797
+ .svadmin-command-dialog-root [data-command-group]:not([hidden]) ~ [data-command-group] {
1798
+ padding-top: 0;
1799
+ }
1800
+ .svadmin-command-dialog-root [data-cmdk-input-wrapper] svg {
1801
+ width: 1.25rem;
1802
+ height: 1.25rem;
1803
+ }
1804
+ .svadmin-command-dialog-root [data-command-input] {
1805
+ height: 3rem;
1806
+ }
1807
+ .svadmin-command-dialog-root [data-command-item] {
1808
+ padding: 0.75rem 0.5rem;
1809
+ }
1810
+ .svadmin-sr-only {
1811
+ position: absolute;
1812
+ width: 1px;
1813
+ height: 1px;
1814
+ padding: 0;
1815
+ overflow: hidden;
1816
+ clip: rect(0, 0, 0, 0);
1817
+ white-space: nowrap;
1818
+ border: 0;
1819
+ }
1820
+ .svadmin-metric-strip {
1821
+ display: grid;
1822
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1823
+ gap: 1px;
1824
+ overflow: hidden;
1825
+ border: 1px solid var(--border);
1826
+ border-radius: 0.5rem;
1827
+ background: var(--border);
1828
+ box-shadow: var(--svadmin-shadow-surface);
1829
+ }
1830
+ .svadmin-metric-strip[data-columns="2"] {
1831
+ grid-template-columns: repeat(1, minmax(0, 1fr));
1832
+ }
1833
+ .svadmin-metric-strip[data-columns="3"] {
1834
+ grid-template-columns: repeat(1, minmax(0, 1fr));
1835
+ }
1836
+ .svadmin-metric-strip[data-columns="4"], .svadmin-metric-strip[data-columns="5"], .svadmin-metric-strip[data-columns="6"], .svadmin-metric-strip[data-columns="auto"] {
1837
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1838
+ }
1839
+ .svadmin-metric-item {
1840
+ display: flex;
1841
+ min-width: 0;
1842
+ flex-direction: column;
1843
+ justify-content: space-between;
1844
+ gap: 0.25rem;
1845
+ padding: 0.875rem;
1846
+ background: var(--card);
1847
+ color: var(--foreground);
1848
+ text-align: left;
1849
+ text-decoration: none;
1850
+ transition: background-color 150ms ease;
1851
+ }
1852
+ .svadmin-metric-item[data-interactive="true"] {
1853
+ cursor: pointer;
1854
+ }
1855
+ .svadmin-metric-item[data-interactive="true"]:hover {
1856
+ background: var(--muted);
1857
+ @supports (color: color-mix(in lab, red, red)) {
1858
+ background: color-mix(in srgb, var(--muted) 40%, transparent);
1859
+ }
1860
+ }
1861
+ .svadmin-metric-heading, .svadmin-metric-value-row {
1862
+ display: flex;
1863
+ align-items: center;
1864
+ justify-content: space-between;
1865
+ gap: 0.5rem;
1866
+ }
1867
+ .svadmin-metric-value-row {
1868
+ align-items: baseline;
1869
+ }
1870
+ .svadmin-metric-label {
1871
+ overflow: hidden;
1872
+ color: var(--muted-foreground);
1873
+ font-size: 0.75rem;
1874
+ font-weight: 600;
1875
+ text-overflow: ellipsis;
1876
+ white-space: nowrap;
1877
+ }
1878
+ .svadmin-metric-icon {
1879
+ flex-shrink: 0;
1880
+ color: var(--muted-foreground);
1881
+ @supports (color: color-mix(in lab, red, red)) {
1882
+ color: color-mix(in srgb, var(--muted-foreground) 70%, transparent);
1883
+ }
1884
+ }
1885
+ .svadmin-metric-icon svg {
1886
+ width: 0.875rem;
1887
+ height: 0.875rem;
1888
+ }
1889
+ .svadmin-metric-value {
1890
+ color: var(--foreground);
1891
+ font-size: 1.25rem;
1892
+ font-weight: 700;
1893
+ letter-spacing: 0;
1894
+ font-variant-numeric: tabular-nums;
1895
+ }
1896
+ .svadmin-metric-item[data-tone="primary"] .svadmin-metric-value {
1897
+ color: var(--primary);
1898
+ }
1899
+ .svadmin-metric-item[data-tone="success"] .svadmin-metric-value {
1900
+ color: var(--success);
1901
+ }
1902
+ .svadmin-metric-item[data-tone="warning"] .svadmin-metric-value {
1903
+ color: var(--warning);
1904
+ }
1905
+ .svadmin-metric-item[data-tone="danger"] .svadmin-metric-value {
1906
+ color: var(--destructive);
1907
+ }
1908
+ .svadmin-metric-item[data-tone="info"] .svadmin-metric-value {
1909
+ color: var(--info);
1910
+ }
1911
+ .svadmin-metric-skeleton {
1912
+ width: 4rem;
1913
+ height: 1.5rem;
1914
+ }
1915
+ .svadmin-metric-badge {
1916
+ display: inline-flex;
1917
+ align-items: center;
1918
+ border: 1px solid var(--border);
1919
+ border-radius: 999px;
1920
+ padding: 0.125rem 0.375rem;
1921
+ background: var(--muted);
1922
+ color: var(--muted-foreground);
1923
+ font-size: 0.6875rem;
1924
+ font-weight: 600;
1925
+ }
1926
+ .svadmin-metric-badge[data-tone="success"] {
1927
+ border-color: var(--success);
1928
+ @supports (color: color-mix(in lab, red, red)) {
1929
+ border-color: color-mix(in srgb, var(--success) 20%, transparent);
1930
+ }
1931
+ background: var(--success);
1932
+ @supports (color: color-mix(in lab, red, red)) {
1933
+ background: color-mix(in srgb, var(--success) 10%, transparent);
1934
+ }
1935
+ color: var(--success);
1936
+ }
1937
+ .svadmin-metric-badge[data-tone="warning"] {
1938
+ border-color: var(--warning);
1939
+ @supports (color: color-mix(in lab, red, red)) {
1940
+ border-color: color-mix(in srgb, var(--warning) 20%, transparent);
1941
+ }
1942
+ background: var(--warning);
1943
+ @supports (color: color-mix(in lab, red, red)) {
1944
+ background: color-mix(in srgb, var(--warning) 10%, transparent);
1945
+ }
1946
+ color: var(--warning);
1947
+ }
1948
+ .svadmin-metric-badge[data-tone="danger"] {
1949
+ border-color: var(--destructive);
1950
+ @supports (color: color-mix(in lab, red, red)) {
1951
+ border-color: color-mix(in srgb, var(--destructive) 20%, transparent);
1952
+ }
1953
+ background: var(--destructive);
1954
+ @supports (color: color-mix(in lab, red, red)) {
1955
+ background: color-mix(in srgb, var(--destructive) 10%, transparent);
1956
+ }
1957
+ color: var(--destructive);
1958
+ }
1959
+ .svadmin-metric-badge[data-tone="info"] {
1960
+ border-color: var(--info);
1961
+ @supports (color: color-mix(in lab, red, red)) {
1962
+ border-color: color-mix(in srgb, var(--info) 20%, transparent);
1963
+ }
1964
+ background: var(--info);
1965
+ @supports (color: color-mix(in lab, red, red)) {
1966
+ background: color-mix(in srgb, var(--info) 10%, transparent);
1967
+ }
1968
+ color: var(--info);
1969
+ }
1970
+ .svadmin-metric-trend {
1971
+ display: inline-flex;
1972
+ align-items: center;
1973
+ gap: 0.125rem;
1974
+ font-size: 0.75rem;
1975
+ font-weight: 500;
1976
+ font-variant-numeric: tabular-nums;
1977
+ }
1978
+ .svadmin-metric-trend[data-direction="up"] {
1979
+ color: var(--success);
1980
+ }
1981
+ .svadmin-metric-trend[data-direction="down"] {
1982
+ color: var(--destructive);
1983
+ }
1984
+ .svadmin-metric-trend-label {
1985
+ margin-left: 0.125rem;
1986
+ color: var(--muted-foreground);
1987
+ }
1988
+ .svadmin-alert-description {
1989
+ grid-column: 2;
1990
+ color: var(--muted-foreground);
1991
+ font-size: 0.875rem;
1992
+ }
1993
+ .svadmin-alert-description p {
1994
+ line-height: 1.625;
1995
+ }
1996
+ .svadmin-alert-title {
1997
+ grid-column: 2;
1998
+ min-height: 1rem;
1999
+ overflow: hidden;
2000
+ color: var(--foreground);
2001
+ font-weight: 500;
2002
+ letter-spacing: 0;
2003
+ text-overflow: ellipsis;
2004
+ white-space: nowrap;
2005
+ }
2006
+ .svadmin-scroll-area {
2007
+ position: relative;
2008
+ overflow: hidden;
2009
+ }
2010
+ .svadmin-scroll-area-viewport {
2011
+ width: 100%;
2012
+ height: 100%;
2013
+ overflow: auto;
2014
+ scrollbar-width: thin;
2015
+ scrollbar-color: var(--border) transparent;
2016
+ }
2017
+ .svadmin-scroll-area-horizontal {
2018
+ overflow-x: auto;
2019
+ overflow-y: hidden;
2020
+ }
2021
+ .svadmin-scroll-area-vertical {
2022
+ overflow-x: hidden;
2023
+ overflow-y: auto;
2024
+ }
2025
+ .svadmin-table-container {
2026
+ position: relative;
2027
+ width: 100%;
2028
+ overflow-x: auto;
2029
+ }
2030
+ .svadmin-table {
2031
+ width: 100%;
2032
+ caption-side: bottom;
2033
+ font-size: 0.875rem;
2034
+ }
2035
+ .svadmin-table-head {
2036
+ height: 2.25rem;
2037
+ padding: 0.5rem;
2038
+ color: var(--foreground);
2039
+ text-align: left;
2040
+ vertical-align: middle;
2041
+ font-weight: 500;
2042
+ white-space: nowrap;
2043
+ }
2044
+ .svadmin-table-head[data-density="compact"] {
2045
+ height: 2rem;
2046
+ padding: 0.25rem 0.5rem;
2047
+ font-size: 0.75rem;
2048
+ }
2049
+ .svadmin-table-head[data-sticky="right"], .svadmin-table-head[data-sticky="left"] {
2050
+ position: sticky;
2051
+ z-index: 20;
2052
+ background: var(--background);
2053
+ }
2054
+ .svadmin-table-head[data-sticky="right"] {
2055
+ right: 0;
2056
+ box-shadow: -1px 0 0 var(--border);
2057
+ }
2058
+ .svadmin-table-head[data-sticky="left"] {
2059
+ left: 0;
2060
+ box-shadow: 1px 0 0 var(--border);
2061
+ }
2062
+ .svadmin-pagination {
2063
+ display: flex;
2064
+ width: 100%;
2065
+ justify-content: center;
2066
+ margin: 0 auto;
2067
+ }
2068
+ .svadmin-pagination-content {
2069
+ display: flex;
2070
+ flex-direction: row;
2071
+ align-items: center;
2072
+ gap: 0.25rem;
2073
+ margin: 0;
2074
+ padding: 0;
2075
+ list-style: none;
2076
+ }
2077
+ .svadmin-pagination-control {
2078
+ gap: 0.25rem;
2079
+ }
2080
+ .svadmin-pagination-ellipsis {
2081
+ display: flex;
2082
+ width: 2rem;
2083
+ height: 2rem;
2084
+ align-items: center;
2085
+ justify-content: center;
2086
+ }
2087
+ .svadmin-pagination-icon {
2088
+ width: 1rem;
2089
+ height: 1rem;
2090
+ }
2091
+ @keyframes svadmin-menu-enter {
2092
+ from {
2093
+ opacity: 0;
2094
+ transform: scale(0.98);
2095
+ }
2096
+ to {
2097
+ opacity: 1;
2098
+ transform: scale(1);
2099
+ }
2100
+ }
2101
+ @media (min-width: 640px) {
2102
+ .svadmin-metric-strip[data-columns="2"] {
2103
+ grid-template-columns: repeat(2, minmax(0, 1fr));
2104
+ }
2105
+ .svadmin-metric-strip[data-columns="3"], .svadmin-metric-strip[data-columns="4"] {
2106
+ grid-template-columns: repeat(3, minmax(0, 1fr));
2107
+ }
2108
+ .svadmin-metric-strip[data-columns="5"], .svadmin-metric-strip[data-columns="6"], .svadmin-metric-strip[data-columns="auto"] {
2109
+ grid-template-columns: repeat(3, minmax(0, 1fr));
2110
+ }
2111
+ .svadmin-alert-dialog-header {
2112
+ text-align: left;
2113
+ }
2114
+ .svadmin-alert-dialog-footer, .svadmin-dialog-footer, .svadmin-sheet-footer {
2115
+ flex-direction: row;
2116
+ justify-content: flex-end;
2117
+ }
2118
+ .svadmin-breadcrumb-list {
2119
+ gap: 0.625rem;
2120
+ }
2121
+ .svadmin-dialog-content {
2122
+ max-width: 32rem;
2123
+ }
2124
+ }
2125
+ @media (min-width: 1024px) {
2126
+ .svadmin-metric-strip[data-columns="4"] {
2127
+ grid-template-columns: repeat(4, minmax(0, 1fr));
2128
+ }
2129
+ .svadmin-metric-strip[data-columns="5"] {
2130
+ grid-template-columns: repeat(5, minmax(0, 1fr));
2131
+ }
2132
+ .svadmin-metric-strip[data-columns="6"], .svadmin-metric-strip[data-columns="auto"] {
2133
+ grid-template-columns: repeat(6, minmax(0, 1fr));
2134
+ }
2135
+ }
2136
+ }
2137
+
2138
+ /* Tailwind CSS v4 — Map design tokens to utility classes */
2139
+
2140
+ /* ─── svadmin UI Components CSS ─────────────────────────────── */
2141
+ /* These rules were moved from .svelte files to eliminate \3c style> tags */
2142
+
2143
+ /* Collapsible details normalization stays scoped to svadmin-owned hooks. */
2144
+ details[data-svadmin-filter]:not([open]) > :not(summary), details.svadmin-collapsible-filter:not([open]) > :not(summary), details.svadmin-collapsible:not([open]) > :not(summary) {
2145
+ display: none !important;
2146
+ }
2147
+
2148
+ /* --- Admin UI layout preset (clean-flat) --- */
2149
+ /* Keep this public class for layoutPreset API compatibility. The preset only
2150
+ * adjusts density and composition; color, focus, and elevation stay semantic. */
2151
+ .layout-clean-flat {
2152
+ --radius: 0.5rem;
2153
+ --svadmin-content-width: 74rem;
2154
+ --svadmin-surface: var(--card);
2155
+ --svadmin-surface-muted: var(--muted);
2156
+ @supports (color: color-mix(in lab, red, red)) {
2157
+ --svadmin-surface-muted: color-mix(in oklch, var(--muted) 72%, var(--card));
2158
+ }
2159
+ --svadmin-surface-hover: var(--primary);
2160
+ @supports (color: color-mix(in lab, red, red)) {
2161
+ --svadmin-surface-hover: color-mix(in oklch, var(--primary) 4%, var(--card));
2162
+ }
2163
+ --svadmin-border: var(--border);
2164
+ --svadmin-border-strong: var(--border);
2165
+ @supports (color: color-mix(in lab, red, red)) {
2166
+ --svadmin-border-strong: color-mix(in oklch, var(--border) 74%, var(--foreground));
2167
+ }
2168
+ --svadmin-text: var(--foreground);
2169
+ --svadmin-text-muted: var(--muted-foreground);
2170
+ --svadmin-focus-ring: var(--ring);
2171
+ --svadmin-control-shadow: var(--shadow-control);
2172
+ --svadmin-surface-shadow: var(--shadow-surface);
2173
+ --svadmin-surface-hover-shadow: var(--shadow-surface-hover);
2174
+ --svadmin-floating-shadow: var(--shadow-overlay);
2175
+ }
2176
+ .layout-clean-flat [data-svadmin-main] {
2177
+ background: var(--background);
2178
+ color: var(--svadmin-text);
2179
+ }
2180
+ .layout-clean-flat [data-svadmin-main] > div, .layout-clean-flat [data-svadmin-main] section, .layout-clean-flat [data-svadmin-main] [data-slot="card-content"] {
2181
+ min-width: 0;
2182
+ }
2183
+ .layout-clean-flat [data-svadmin-sidebar] {
2184
+ border-color: var(--sidebar-border);
2185
+ background: var(--sidebar);
2186
+ color: var(--sidebar-foreground);
2187
+ box-shadow: inset -1px 0 0 var(--sidebar-border);
2188
+ }
2189
+ .layout-clean-flat .sidebar-menu-item {
2190
+ border-radius: var(--radius-md);
2191
+ color: var(--svadmin-text-muted);
2192
+ box-shadow: none;
2193
+ transition: background-color 140ms ease, color 140ms ease;
2194
+ }
2195
+ .layout-clean-flat .sidebar-menu-item:hover {
2196
+ background: var(--sidebar-accent);
2197
+ @supports (color: color-mix(in lab, red, red)) {
2198
+ background: color-mix(in oklch, var(--sidebar-accent) 72%, transparent);
2199
+ }
2200
+ color: var(--sidebar-foreground);
2201
+ }
2202
+ .layout-clean-flat .sidebar-menu-item-active {
2203
+ background: var(--sidebar-accent);
2204
+ color: var(--sidebar-primary);
2205
+ font-weight: 600;
2206
+ }
2207
+ .layout-clean-flat .sidebar-menu-item-active svg {
2208
+ color: var(--sidebar-primary);
2209
+ opacity: 1;
2210
+ }
2211
+ .layout-clean-flat [data-svadmin-content-page] .svadmin-u-cd0ad9a56558, .layout-clean-flat [data-slot="card"] {
2212
+ min-width: 0;
2213
+ border-color: var(--svadmin-border);
2214
+ border-radius: var(--radius-lg);
2215
+ background: var(--svadmin-surface);
2216
+ box-shadow: var(--svadmin-surface-shadow);
2217
+ }
2218
+ .layout-clean-flat [data-slot="card"][data-interactive="true"]:hover {
2219
+ border-color: var(--primary);
2220
+ @supports (color: color-mix(in lab, red, red)) {
2221
+ border-color: color-mix(in oklch, var(--primary) 24%, var(--svadmin-border));
2222
+ }
2223
+ box-shadow: var(--svadmin-surface-hover-shadow);
2224
+ }
2225
+ .layout-clean-flat :is([data-slot="button"], .svadmin-button) {
2226
+ border-radius: var(--radius-md);
2227
+ box-shadow: var(--svadmin-control-shadow);
2228
+ }
2229
+ .layout-clean-flat :is([data-slot="button"], .svadmin-button):is([data-variant="default"], .svadmin-button--default) {
2230
+ background: var(--primary);
2231
+ color: var(--primary-foreground);
2232
+ }
2233
+ .layout-clean-flat :is([data-slot="button"], .svadmin-button):is([data-variant="default"], .svadmin-button--default):hover {
2234
+ background: var(--primary);
2235
+ @supports (color: color-mix(in lab, red, red)) {
2236
+ background: color-mix(in oklch, var(--primary) 90%, var(--foreground));
2237
+ }
2238
+ }
2239
+ .layout-clean-flat :is([data-slot="button"], .svadmin-button):is([data-variant="outline"], .svadmin-button--outline) {
2240
+ border-color: var(--svadmin-border-strong);
2241
+ background: var(--svadmin-surface);
2242
+ color: var(--svadmin-text);
2243
+ }
2244
+ .layout-clean-flat :is([data-slot="button"], .svadmin-button):is([data-variant="outline"], .svadmin-button--outline):hover {
2245
+ border-color: var(--primary);
2246
+ @supports (color: color-mix(in lab, red, red)) {
2247
+ border-color: color-mix(in oklch, var(--primary) 18%, var(--svadmin-border-strong));
2248
+ }
2249
+ background: var(--svadmin-surface-muted);
2250
+ color: var(--svadmin-text);
2251
+ }
2252
+ .layout-clean-flat [data-slot="input"], .layout-clean-flat [data-slot="textarea"], .layout-clean-flat [data-slot="select"], .layout-clean-flat [data-slot="select-trigger"] {
2253
+ border-color: var(--svadmin-border-strong);
2254
+ border-radius: var(--radius-md);
2255
+ background: var(--svadmin-surface);
2256
+ color: var(--svadmin-text);
2257
+ box-shadow: var(--svadmin-control-shadow);
2258
+ }
2259
+ .layout-clean-flat [data-slot="input"]:focus-visible, .layout-clean-flat [data-slot="textarea"]:focus-visible, .layout-clean-flat [data-slot="select-trigger"]:focus-visible {
2260
+ border-color: var(--svadmin-focus-ring);
2261
+ outline-color: var(--svadmin-focus-ring);
2262
+ @supports (color: color-mix(in lab, red, red)) {
2263
+ outline-color: color-mix(in oklch, var(--svadmin-focus-ring) 48%, transparent);
2264
+ }
2265
+ }
2266
+ .layout-clean-flat [data-svadmin-table-head] [data-slot="table-head"] {
2267
+ height: 3rem;
2268
+ border-bottom-color: var(--svadmin-border);
2269
+ background: var(--svadmin-surface-muted);
2270
+ color: var(--svadmin-text-muted);
2271
+ font-size: 0.75rem;
2272
+ font-weight: 600;
2273
+ letter-spacing: 0;
2274
+ text-transform: none;
2275
+ }
2276
+ .layout-clean-flat [data-svadmin-table-row] [data-slot="table-cell"] {
2277
+ height: 3.5rem;
2278
+ border-bottom-color: var(--svadmin-border);
2279
+ color: var(--svadmin-text);
2280
+ font-size: 0.8125rem;
2281
+ }
2282
+ .layout-clean-flat [data-svadmin-table-row]:hover [data-slot="table-cell"] {
2283
+ background: var(--svadmin-surface-hover);
2284
+ }
2285
+ .layout-clean-flat [data-svadmin-list-header], .layout-clean-flat [data-svadmin-form-header], .layout-clean-flat [data-svadmin-page-header] {
2286
+ border-top: 0;
2287
+ border-right: 0;
2288
+ border-left: 0;
2289
+ border-radius: 0;
2290
+ background: transparent;
2291
+ padding-right: 0;
2292
+ padding-left: 0;
2293
+ }
2294
+ .layout-clean-flat [data-svadmin-page-header] h1, .layout-clean-flat [data-svadmin-list-header] h1, .layout-clean-flat [data-svadmin-form-header] h1, .layout-clean-flat [data-svadmin-resource-operations] h1 {
2295
+ line-height: 1.2;
2296
+ letter-spacing: 0;
2297
+ }
2298
+ .layout-clean-flat [data-svadmin-table-card], .layout-clean-flat [data-svadmin-show-card], .layout-clean-flat [data-svadmin-form-card] {
2299
+ width: 100%;
2300
+ max-width: 100%;
2301
+ min-width: 0;
2302
+ }
2303
+ .layout-clean-flat [data-svadmin-table-toolbar] {
2304
+ border-color: var(--svadmin-border);
2305
+ border-radius: var(--radius-lg);
2306
+ background: var(--svadmin-surface);
2307
+ padding: 0.875rem;
2308
+ box-shadow: var(--svadmin-surface-shadow);
2309
+ }
2310
+ .layout-clean-flat [data-svadmin-table-toolbar] [data-slot="input"] {
2311
+ height: 2.625rem;
2312
+ background: var(--svadmin-surface-muted);
2313
+ }
2314
+ .layout-clean-flat [data-svadmin-list-actions] :is([data-slot="button"], .svadmin-button), .layout-clean-flat [data-svadmin-table-toolbar] :is([data-slot="button"], .svadmin-button), .layout-clean-flat [data-svadmin-form-actions] :is([data-slot="button"], .svadmin-button) {
2315
+ height: 2.5rem;
2316
+ flex-shrink: 0;
2317
+ }
2318
+ .layout-clean-flat [data-svadmin-datatable] {
2319
+ min-width: 0;
2320
+ border-collapse: separate;
2321
+ border-spacing: 0;
2322
+ table-layout: fixed;
2323
+ }
2324
+ .layout-clean-flat [data-svadmin-table-scroll] {
2325
+ max-width: 100%;
2326
+ min-width: 0;
2327
+ scrollbar-gutter: stable both-edges;
2328
+ }
2329
+ .layout-clean-flat [data-svadmin-table-head] [data-slot="table-head"], .layout-clean-flat [data-svadmin-table-row] [data-slot="table-cell"] {
2330
+ overflow: hidden;
2331
+ text-overflow: ellipsis;
2332
+ white-space: nowrap;
2333
+ }
2334
+ .layout-clean-flat [data-svadmin-pagination] {
2335
+ border-top: 1px solid var(--svadmin-border);
2336
+ border-radius: 0;
2337
+ padding: 0.75rem 0.15rem 0.35rem;
2338
+ }
2339
+ .layout-clean-flat [data-svadmin-pagination] [data-slot="pagination-content"] {
2340
+ flex-wrap: wrap;
2341
+ justify-content: center;
2342
+ }
2343
+ .layout-clean-flat [data-svadmin-form-content] {
2344
+ padding-top: 0;
2345
+ padding-bottom: 0;
2346
+ }
2347
+ .layout-clean-flat [data-svadmin-form-row] {
2348
+ border-bottom: 1px solid var(--svadmin-border);
2349
+ padding: 1.25rem 0;
2350
+ }
2351
+ .layout-clean-flat [data-svadmin-form-row]:last-child {
2352
+ border-bottom: 0;
2353
+ }
2354
+ .layout-clean-flat [data-svadmin-field-label] {
2355
+ color: var(--svadmin-text);
2356
+ font-weight: 600;
2357
+ }
2358
+ .layout-clean-flat [data-svadmin-form-settings] [data-slot="input"], .layout-clean-flat [data-svadmin-form-settings] textarea, .layout-clean-flat [data-svadmin-form-settings] [data-slot="select-trigger"] {
2359
+ min-height: 2.625rem;
2360
+ background: var(--svadmin-surface);
2361
+ }
2362
+ .layout-clean-flat [data-svadmin-form-actions] {
2363
+ width: fit-content;
2364
+ max-width: 100%;
2365
+ border-color: var(--svadmin-border);
2366
+ border-radius: var(--radius-lg);
2367
+ background: var(--svadmin-surface);
2368
+ box-shadow: var(--svadmin-floating-shadow);
2369
+ }
2370
+ .layout-clean-flat [data-svadmin-main] h1, .layout-clean-flat [data-svadmin-main] h2, .layout-clean-flat [data-svadmin-main] h3, .layout-clean-flat [data-svadmin-main] [data-slot="card-title"] {
2371
+ max-width: 100%;
2372
+ overflow-wrap: anywhere;
2373
+ letter-spacing: 0;
2374
+ }
2375
+ .layout-clean-flat [data-svadmin-main] p, .layout-clean-flat [data-svadmin-main] [data-slot="card-description"] {
2376
+ max-width: 100%;
2377
+ overflow-wrap: break-word;
2378
+ }
2379
+ .layout-clean-flat [data-svadmin-main] :is([data-slot="badge"], .svadmin-badge), .layout-clean-flat [data-svadmin-main] [data-slot="tabs-trigger"] {
2380
+ min-width: 0;
2381
+ max-width: 100%;
2382
+ overflow: hidden;
2383
+ text-overflow: ellipsis;
2384
+ white-space: nowrap;
2385
+ }
2386
+ .layout-clean-flat [data-svadmin-main] [data-slot="tabs-list"] {
2387
+ min-width: 0;
2388
+ border-radius: var(--radius-md);
2389
+ }
2390
+ .layout-clean-flat [data-svadmin-ops-hero] {
2391
+ align-items: stretch;
2392
+ }
2393
+ .layout-clean-flat [data-svadmin-metric-card] [data-slot="card-content"] {
2394
+ min-height: 8rem;
2395
+ }
2396
+ .layout-clean-flat [data-svadmin-panel-card] [data-slot="card-content"] > * + * {
2397
+ border-top: 1px solid var(--svadmin-border);
2398
+ }
2399
+ .layout-clean-flat [data-svadmin-content-page] {
2400
+ --svadmin-content-border: var(--svadmin-border);
2401
+ --svadmin-content-muted: var(--svadmin-surface-muted);
2402
+ width: min(100%, var(--svadmin-content-width));
2403
+ margin-inline: auto;
2404
+ }
2405
+ .layout-clean-flat [data-svadmin-content-page] > div:first-child, .layout-clean-flat [data-svadmin-content-page] > .svadmin-u-60fbb7713999:first-child, .layout-clean-flat [data-svadmin-content-page] > .svadmin-u-d89972fe17d6:first-child {
2406
+ min-width: 0;
2407
+ }
2408
+ .layout-clean-flat [data-svadmin-content-page] h1, .layout-clean-flat [data-svadmin-content-page] h2 {
2409
+ line-height: 1.2;
2410
+ letter-spacing: 0;
2411
+ }
2412
+ .layout-clean-flat [data-svadmin-content-page] [data-slot="card"] {
2413
+ border-color: var(--svadmin-content-border);
2414
+ border-radius: var(--radius-lg);
2415
+ background: var(--svadmin-surface);
2416
+ box-shadow: var(--svadmin-surface-shadow);
2417
+ }
2418
+ .layout-clean-flat [data-svadmin-content-page] [data-slot="card"][data-interactive="true"]:hover {
2419
+ border-color: var(--primary);
2420
+ @supports (color: color-mix(in lab, red, red)) {
2421
+ border-color: color-mix(in oklch, var(--primary) 24%, var(--svadmin-content-border));
2422
+ }
2423
+ box-shadow: var(--svadmin-surface-hover-shadow);
2424
+ }
2425
+ .layout-clean-flat [data-svadmin-content-page] [data-slot="tabs-list"] {
2426
+ border-bottom: 1px solid var(--svadmin-content-border);
2427
+ border-radius: 0;
2428
+ background: transparent;
2429
+ padding: 0;
2430
+ }
2431
+ .layout-clean-flat [data-svadmin-content-page] [data-slot="tabs-trigger"] {
2432
+ min-height: 2.5rem;
2433
+ border-radius: 0;
2434
+ }
2435
+ .layout-clean-flat [data-svadmin-content-page] table {
2436
+ min-width: 0;
2437
+ }
2438
+ .layout-clean-flat [data-svadmin-content-page] th, .layout-clean-flat [data-svadmin-content-page] td {
2439
+ overflow-wrap: break-word;
2440
+ }
2441
+ .layout-clean-flat [data-svadmin-content-page="error"] [data-slot="card"], .layout-clean-flat [data-svadmin-content-page="auth-2fa"] [data-slot="card"] {
2442
+ width: 100%;
2443
+ max-width: 32rem;
2444
+ }
2445
+ @media (min-width: 768px) {
2446
+ .layout-clean-flat [data-svadmin-form-settings] [data-svadmin-field] {
2447
+ display: grid;
2448
+ grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
2449
+ align-items: start;
2450
+ column-gap: 2rem;
2451
+ row-gap: 0.35rem;
2452
+ }
2453
+ .layout-clean-flat [data-svadmin-form-settings] [data-svadmin-field] > [data-svadmin-field-label] {
2454
+ padding-top: 0.75rem;
2455
+ }
2456
+ .layout-clean-flat [data-svadmin-form-settings] [data-svadmin-field] > :not([data-svadmin-field-label]) {
2457
+ grid-column: 2;
2458
+ }
2459
+ }
2460
+ @media (min-width: 1024px) {
2461
+ .layout-clean-flat [data-svadmin-datatable] {
2462
+ min-width: 760px;
2463
+ }
2464
+ }
2465
+ @media (max-width: 767px) {
2466
+ .layout-clean-flat [data-svadmin-main] h1 {
2467
+ font-size: 1.625rem;
2468
+ }
2469
+ .layout-clean-flat [data-svadmin-list-actions] :is([data-slot="button"], .svadmin-button), .layout-clean-flat [data-svadmin-table-toolbar] :is([data-slot="button"], .svadmin-button), .layout-clean-flat [data-svadmin-form-actions] :is([data-slot="button"], .svadmin-button) {
2470
+ max-width: 100%;
2471
+ min-width: 0;
2472
+ }
2473
+ .layout-clean-flat [data-svadmin-form-actions] {
2474
+ width: 100%;
2475
+ }
2476
+ .layout-clean-flat [data-svadmin-content-page] {
2477
+ width: 100%;
2478
+ }
2479
+ .layout-clean-flat [data-svadmin-content-page] [data-slot="card-content"], .layout-clean-flat [data-svadmin-content-page] [data-slot="card-header"] {
2480
+ padding-right: 1rem;
2481
+ padding-left: 1rem;
2482
+ }
2483
+ }
2484
+
2485
+ /* Business components use semantic hooks so consumers do not need utility CSS. */
2486
+ .svadmin-activity-feed {
2487
+ display: flex;
2488
+ flex-direction: column;
2489
+ gap: 1rem;
2490
+ border: 1px solid var(--border);
2491
+ border-radius: 0.75rem;
2492
+ background: var(--card);
2493
+ padding: 1rem;
2494
+ color: var(--foreground);
2495
+ font-size: 0.75rem;
2496
+ line-height: 1rem;
2497
+ box-shadow: var(--shadow-surface);
2498
+ }
2499
+ .svadmin-activity-feed__header, .svadmin-activity-feed__meta, .svadmin-activity-feed__summary, .svadmin-activity-feed__timestamp, .svadmin-batch-action-bar, .svadmin-batch-action-bar__selection, .svadmin-batch-action-bar__actions, .svadmin-approval-card__header, .svadmin-approval-card__title-row, .svadmin-approval-card__actions, .svadmin-stats-card, .svadmin-stats-card__value-row {
2500
+ display: flex;
2501
+ align-items: center;
2502
+ }
2503
+ .svadmin-activity-feed__header {
2504
+ justify-content: space-between;
2505
+ padding-bottom: 0.5rem;
2506
+ border-bottom: 1px solid var(--border);
2507
+ @supports (color: color-mix(in lab, red, red)) {
2508
+ border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
2509
+ }
2510
+ }
2511
+ .svadmin-activity-feed__title, .svadmin-activity-feed__user, .svadmin-activity-feed__target, .svadmin-stats-card__value {
2512
+ font-weight: 600;
2513
+ }
2514
+ .svadmin-activity-feed__title, .svadmin-activity-feed__summary, .svadmin-activity-feed__timestamp {
2515
+ display: flex;
2516
+ align-items: center;
2517
+ gap: 0.375rem;
2518
+ }
2519
+ .svadmin-activity-feed__icon, .svadmin-activity-feed__timestamp-icon, .svadmin-batch-action-bar__icon, .svadmin-approval-card__status-icon, .svadmin-approval-card__action-icon, .svadmin-anomaly-badge__icon {
2520
+ width: 1rem;
2521
+ height: 1rem;
2522
+ }
2523
+ .svadmin-activity-feed__icon, .svadmin-batch-action-bar__icon {
2524
+ color: var(--primary);
2525
+ }
2526
+ .svadmin-activity-feed__count, .svadmin-activity-feed__action, .svadmin-activity-feed__timestamp, .svadmin-activity-feed__empty, .svadmin-approval-card__applicant {
2527
+ color: var(--muted-foreground);
2528
+ }
2529
+ .svadmin-activity-feed__count, .svadmin-activity-feed__timestamp {
2530
+ font-size: 0.6875rem;
2531
+ }
2532
+ .svadmin-activity-feed__timestamp-icon, .svadmin-approval-card__status-icon, .svadmin-anomaly-badge__icon {
2533
+ width: 0.75rem;
2534
+ height: 0.75rem;
2535
+ }
2536
+ .svadmin-activity-feed__timestamp {
2537
+ gap: 0.25rem;
2538
+ }
2539
+ .svadmin-activity-feed :is([data-slot="badge"], .svadmin-badge).svadmin-badge[data-status] {
2540
+ --activity-tone: var(--primary);
2541
+ --activity-text: var(--primary);
2542
+ border-color: var(--activity-tone);
2543
+ @supports (color: color-mix(in lab, red, red)) {
2544
+ border-color: color-mix(in oklch, var(--activity-tone) 20%, transparent);
2545
+ }
2546
+ background: var(--activity-tone);
2547
+ @supports (color: color-mix(in lab, red, red)) {
2548
+ background: color-mix(in oklch, var(--activity-tone) 15%, transparent);
2549
+ }
2550
+ color: var(--activity-text);
2551
+ padding: 0 0.25rem;
2552
+ font-size: 0.625rem;
2553
+ }
2554
+ .svadmin-activity-feed :is([data-slot="badge"], .svadmin-badge)[data-status="success"] {
2555
+ --activity-tone: var(--success);
2556
+ --activity-text: var(--success);
2557
+ }
2558
+ .svadmin-activity-feed :is([data-slot="badge"], .svadmin-badge)[data-status="warning"] {
2559
+ --activity-tone: var(--warning);
2560
+ --activity-text: var(--warning-foreground);
2561
+ }
2562
+ .svadmin-activity-feed :is([data-slot="badge"], .svadmin-badge)[data-status="destructive"] {
2563
+ --activity-tone: var(--destructive);
2564
+ --activity-text: var(--destructive);
2565
+ }
2566
+ .svadmin-activity-feed :is([data-slot="badge"], .svadmin-badge).svadmin-badge[data-status="info"] {
2567
+ background: var(--primary);
2568
+ @supports (color: color-mix(in lab, red, red)) {
2569
+ background: color-mix(in oklch, var(--primary) 10%, transparent);
2570
+ }
2571
+ }
2572
+ .svadmin-activity-feed__timeline {
2573
+ position: relative;
2574
+ display: flex;
2575
+ flex-direction: column;
2576
+ gap: 1rem;
2577
+ padding-left: 1rem;
2578
+ }
2579
+ .svadmin-activity-feed__timeline:before {
2580
+ position: absolute;
2581
+ top: 0.5rem;
2582
+ bottom: 0.5rem;
2583
+ left: 0.375rem;
2584
+ width: 0.125rem;
2585
+ background: var(--border);
2586
+ @supports (color: color-mix(in lab, red, red)) {
2587
+ background: color-mix(in srgb, var(--border) 60%, transparent);
2588
+ }
2589
+ content: "";
2590
+ }
2591
+ .svadmin-activity-feed__item {
2592
+ position: relative;
2593
+ display: flex;
2594
+ align-items: flex-start;
2595
+ gap: 0.75rem;
2596
+ }
2597
+ .svadmin-activity-feed__dot {
2598
+ position: absolute;
2599
+ top: 0.25rem;
2600
+ left: -1rem;
2601
+ width: 0.75rem;
2602
+ height: 0.75rem;
2603
+ border: 2px solid var(--card);
2604
+ border-radius: 999px;
2605
+ background: var(--primary);
2606
+ box-shadow: 0 0 0 2px var(--primary);
2607
+ @supports (color: color-mix(in lab, red, red)) {
2608
+ box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent);
2609
+ }
2610
+ }
2611
+ .svadmin-activity-feed__body, .svadmin-activity-feed__summary, .svadmin-approval-card__heading, .svadmin-approval-card__content, .svadmin-approval-card__dialog-form, .svadmin-stats-card__body {
2612
+ display: flex;
2613
+ flex-direction: column;
2614
+ }
2615
+ .svadmin-activity-feed__body {
2616
+ flex: 1;
2617
+ min-width: 0;
2618
+ gap: 0.375rem;
2619
+ }
2620
+ .svadmin-activity-feed__meta {
2621
+ justify-content: space-between;
2622
+ flex-wrap: wrap;
2623
+ gap: 0.25rem;
2624
+ }
2625
+ .svadmin-activity-feed__summary {
2626
+ flex-direction: row;
2627
+ flex-wrap: wrap;
2628
+ }
2629
+ .svadmin-activity-feed__comment {
2630
+ border: 1px solid var(--border);
2631
+ @supports (color: color-mix(in lab, red, red)) {
2632
+ border: 1px solid color-mix(in oklch, var(--border) 40%, transparent);
2633
+ }
2634
+ border-radius: 0.5rem;
2635
+ background: var(--muted);
2636
+ @supports (color: color-mix(in lab, red, red)) {
2637
+ background: color-mix(in oklch, var(--muted) 40%, transparent);
2638
+ }
2639
+ padding: 0.625rem;
2640
+ overflow-wrap: anywhere;
2641
+ }
2642
+ .svadmin-activity-feed__empty {
2643
+ padding: 1.5rem 0;
2644
+ text-align: center;
2645
+ }
2646
+ .svadmin-activity-feed__composer {
2647
+ display: flex;
2648
+ flex-direction: column;
2649
+ gap: 0.5rem;
2650
+ border-top: 1px solid var(--border);
2651
+ @supports (color: color-mix(in lab, red, red)) {
2652
+ border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
2653
+ }
2654
+ padding-top: 0.75rem;
2655
+ }
2656
+ .svadmin-activity-feed__textarea, .svadmin-approval-card__textarea, .svadmin-approval-card__input {
2657
+ width: 100%;
2658
+ border: 1px solid var(--input);
2659
+ border-radius: 0.375rem;
2660
+ background: var(--background);
2661
+ padding: 0.5rem;
2662
+ color: var(--foreground);
2663
+ font-size: 0.75rem;
2664
+ line-height: 1rem;
2665
+ }
2666
+ .svadmin-activity-feed__textarea:focus-visible, .svadmin-approval-card__textarea:focus-visible, .svadmin-approval-card__input:focus-visible {
2667
+ outline: 1px solid var(--ring);
2668
+ outline-offset: 0;
2669
+ }
2670
+ .svadmin-activity-feed__textarea {
2671
+ min-height: 4rem;
2672
+ resize: vertical;
2673
+ }
2674
+ .svadmin-activity-feed__send {
2675
+ display: flex;
2676
+ justify-content: flex-end;
2677
+ }
2678
+ .svadmin-activity-feed__send-button:is([data-slot="button"], .svadmin-button) {
2679
+ min-height: 1.75rem;
2680
+ height: 1.75rem;
2681
+ gap: 0.25rem;
2682
+ font-size: 0.75rem;
2683
+ }
2684
+ .svadmin-activity-feed__send-icon {
2685
+ width: 0.875rem;
2686
+ height: 0.875rem;
2687
+ }
2688
+ .svadmin-activity-feed__send-icon--loading {
2689
+ animation: svadmin-spin 1s linear infinite;
2690
+ }
2691
+ @keyframes svadmin-spin {
2692
+ to {
2693
+ transform: rotate(360deg);
2694
+ }
2695
+ }
2696
+ .svadmin-batch-action-bar {
2697
+ justify-content: space-between;
2698
+ flex-wrap: wrap;
2699
+ gap: 0.5rem;
2700
+ border: 1px solid var(--primary);
2701
+ @supports (color: color-mix(in lab, red, red)) {
2702
+ border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
2703
+ }
2704
+ border-radius: 0.375rem;
2705
+ background: var(--primary);
2706
+ @supports (color: color-mix(in lab, red, red)) {
2707
+ background: color-mix(in srgb, var(--primary) 5%, transparent);
2708
+ }
2709
+ padding: 0.5rem 0.75rem;
2710
+ font-size: 0.75rem;
2711
+ }
2712
+ .svadmin-batch-action-bar--floating {
2713
+ position: fixed;
2714
+ z-index: 40;
2715
+ bottom: 1.5rem;
2716
+ left: 50%;
2717
+ transform: translateX(-50%);
2718
+ width: max-content;
2719
+ max-width: calc(100% - 2rem);
2720
+ gap: 0.75rem;
2721
+ border-color: var(--border);
2722
+ @supports (color: color-mix(in lab, red, red)) {
2723
+ border-color: color-mix(in oklch, var(--border) 80%, transparent);
2724
+ }
2725
+ border-radius: 0.5rem;
2726
+ background: var(--background);
2727
+ @supports (color: color-mix(in lab, red, red)) {
2728
+ background: color-mix(in oklch, var(--background) 95%, transparent);
2729
+ }
2730
+ padding: 0.625rem 1rem;
2731
+ box-shadow: var(--shadow-overlay);
2732
+ backdrop-filter: blur(12px);
2733
+ animation: svadmin-batch-enter 200ms ease-out;
2734
+ }
2735
+ .svadmin-batch-action-bar--subtle {
2736
+ border-color: var(--border);
2737
+ @supports (color: color-mix(in lab, red, red)) {
2738
+ border-color: color-mix(in srgb, var(--border) 60%, transparent);
2739
+ }
2740
+ background: var(--muted);
2741
+ @supports (color: color-mix(in lab, red, red)) {
2742
+ background: color-mix(in srgb, var(--muted) 40%, transparent);
2743
+ }
2744
+ }
2745
+ .svadmin-batch-action-bar__selection {
2746
+ gap: 0.5rem;
2747
+ }
2748
+ .svadmin-batch-action-bar--floating .svadmin-batch-action-bar__selection {
2749
+ border-right: 1px solid var(--border);
2750
+ @supports (color: color-mix(in lab, red, red)) {
2751
+ border-right: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
2752
+ }
2753
+ padding-right: 0.5rem;
2754
+ }
2755
+ .svadmin-batch-action-bar__actions {
2756
+ gap: 0.375rem;
2757
+ }
2758
+ .svadmin-batch-action-bar__label {
2759
+ color: var(--foreground);
2760
+ font-weight: 500;
2761
+ font-variant-numeric: tabular-nums;
2762
+ }
2763
+ .svadmin-batch-action-bar__clear {
2764
+ border-radius: 0.125rem;
2765
+ color: var(--muted-foreground);
2766
+ font-size: 0.75rem;
2767
+ cursor: pointer;
2768
+ }
2769
+ .svadmin-batch-action-bar__clear:not([data-slot="button"]) {
2770
+ margin-left: 0.25rem;
2771
+ text-decoration: underline;
2772
+ text-underline-offset: 2px;
2773
+ }
2774
+ .svadmin-batch-action-bar__clear:not([data-slot="button"]):focus-visible {
2775
+ outline: 2px solid var(--ring);
2776
+ outline-offset: 1px;
2777
+ }
2778
+ .svadmin-batch-action-bar__clear:is([data-slot="button"], .svadmin-button) {
2779
+ min-height: 1.75rem;
2780
+ height: 1.75rem;
2781
+ padding: 0 0.5rem;
2782
+ font-size: 0.75rem;
2783
+ }
2784
+ .svadmin-batch-action-bar__clear:hover {
2785
+ color: var(--foreground);
2786
+ }
2787
+ .svadmin-batch-action-bar__clear-icon {
2788
+ width: 0.875rem;
2789
+ height: 0.875rem;
2790
+ margin-right: 0.25rem;
2791
+ }
2792
+ .svadmin-batch-action-bar__count:is([data-slot="badge"], .svadmin-badge).svadmin-badge {
2793
+ height: 1.25rem;
2794
+ border-color: var(--primary);
2795
+ @supports (color: color-mix(in lab, red, red)) {
2796
+ border-color: color-mix(in oklch, var(--primary) 20%, transparent);
2797
+ }
2798
+ background: var(--primary);
2799
+ @supports (color: color-mix(in lab, red, red)) {
2800
+ background: color-mix(in oklch, var(--primary) 15%, transparent);
2801
+ }
2802
+ color: var(--primary);
2803
+ padding-right: 0.375rem;
2804
+ padding-left: 0.375rem;
2805
+ font-size: 0.6875rem;
2806
+ font-variant-numeric: tabular-nums;
2807
+ }
2808
+ @keyframes svadmin-batch-enter {
2809
+ from {
2810
+ opacity: 0;
2811
+ translate: 0 1rem;
2812
+ }
2813
+ to {
2814
+ opacity: 1;
2815
+ translate: 0 0;
2816
+ }
2817
+ }
2818
+ @media (prefers-reduced-motion: reduce) {
2819
+ .svadmin-batch-action-bar--floating, .svadmin-activity-feed__send-icon--loading {
2820
+ animation: none;
2821
+ }
2822
+ }
2823
+ .svadmin-approval-card {
2824
+ display: flex;
2825
+ flex-direction: column;
2826
+ gap: 0.75rem;
2827
+ border: 1px solid var(--border);
2828
+ border-radius: 0.75rem;
2829
+ background: var(--card);
2830
+ padding: 1rem;
2831
+ color: var(--foreground);
2832
+ box-shadow: var(--shadow-surface);
2833
+ }
2834
+ .svadmin-approval-card__header {
2835
+ justify-content: space-between;
2836
+ flex-wrap: wrap;
2837
+ gap: 0.5rem;
2838
+ border-bottom: 1px solid var(--border);
2839
+ @supports (color: color-mix(in lab, red, red)) {
2840
+ border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
2841
+ }
2842
+ padding-bottom: 0.75rem;
2843
+ }
2844
+ .svadmin-approval-card__heading {
2845
+ gap: 0.125rem;
2846
+ }
2847
+ .svadmin-approval-card__title-row {
2848
+ gap: 0.5rem;
2849
+ flex-wrap: wrap;
2850
+ }
2851
+ .svadmin-approval-card__title {
2852
+ font-size: 0.875rem;
2853
+ font-weight: 600;
2854
+ }
2855
+ .svadmin-approval-card__applicant {
2856
+ font-size: 0.75rem;
2857
+ }
2858
+ .svadmin-approval-card__applicant strong {
2859
+ color: var(--foreground);
2860
+ }
2861
+ .svadmin-approval-card__actions {
2862
+ gap: 0.375rem;
2863
+ }
2864
+ .svadmin-approval-card__action:is([data-slot="button"], .svadmin-button) {
2865
+ height: 2rem;
2866
+ gap: 0.25rem;
2867
+ color: var(--muted-foreground);
2868
+ font-size: 0.75rem;
2869
+ }
2870
+ .svadmin-approval-card__action--reject:is([data-slot="button"], .svadmin-button) {
2871
+ border-color: var(--destructive);
2872
+ @supports (color: color-mix(in lab, red, red)) {
2873
+ border-color: color-mix(in oklch, var(--destructive) 30%, transparent);
2874
+ }
2875
+ color: var(--destructive);
2876
+ }
2877
+ .svadmin-approval-card__action--reject:is([data-slot="button"], .svadmin-button):hover {
2878
+ background: var(--destructive);
2879
+ @supports (color: color-mix(in lab, red, red)) {
2880
+ background: color-mix(in oklch, var(--destructive) 10%, transparent);
2881
+ }
2882
+ }
2883
+ .svadmin-approval-card__action--approve:is([data-slot="button"], .svadmin-button), .svadmin-approval-card__confirm--approve:is([data-slot="button"], .svadmin-button) {
2884
+ background: var(--success);
2885
+ color: var(--success-foreground);
2886
+ }
2887
+ .svadmin-approval-card__action--approve:is([data-slot="button"], .svadmin-button):hover, .svadmin-approval-card__confirm--approve:is([data-slot="button"], .svadmin-button):hover {
2888
+ background: var(--success);
2889
+ @supports (color: color-mix(in lab, red, red)) {
2890
+ background: color-mix(in oklch, var(--success) 90%, transparent);
2891
+ }
2892
+ }
2893
+ .svadmin-approval-card__action-icon {
2894
+ width: 0.875rem;
2895
+ height: 0.875rem;
2896
+ }
2897
+ .svadmin-approval-card :is([data-slot="badge"], .svadmin-badge).svadmin-badge[data-status] {
2898
+ --approval-tone: var(--warning);
2899
+ --approval-text: var(--warning-foreground);
2900
+ border-color: var(--approval-tone);
2901
+ @supports (color: color-mix(in lab, red, red)) {
2902
+ border-color: color-mix(in oklch, var(--approval-tone) 20%, transparent);
2903
+ }
2904
+ background: var(--approval-tone);
2905
+ @supports (color: color-mix(in lab, red, red)) {
2906
+ background: color-mix(in oklch, var(--approval-tone) 15%, transparent);
2907
+ }
2908
+ color: var(--approval-text);
2909
+ font-size: 0.6875rem;
2910
+ font-weight: 500;
2911
+ }
2912
+ .svadmin-approval-card :is([data-slot="badge"], .svadmin-badge)[data-status="approved"] {
2913
+ --approval-tone: var(--success);
2914
+ --approval-text: var(--success);
2915
+ }
2916
+ .svadmin-approval-card :is([data-slot="badge"], .svadmin-badge)[data-status="rejected"] {
2917
+ --approval-tone: var(--destructive);
2918
+ --approval-text: var(--destructive);
2919
+ }
2920
+ .svadmin-approval-card :is([data-slot="badge"], .svadmin-badge).svadmin-badge[data-status="recalled"] {
2921
+ border-color: var(--color-border, var(--border));
2922
+ background: var(--muted);
2923
+ color: var(--muted-foreground);
2924
+ }
2925
+ .svadmin-approval-card__content {
2926
+ gap: 0.5rem;
2927
+ font-size: 0.75rem;
2928
+ }
2929
+ .svadmin-approval-card__dialog-form {
2930
+ gap: 0.75rem;
2931
+ padding: 0.5rem 0;
2932
+ font-size: 0.75rem;
2933
+ }
2934
+ .svadmin-approval-card__dialog.svadmin-dialog-content {
2935
+ width: calc(100% - 2rem);
2936
+ max-width: 28rem;
2937
+ }
2938
+ .svadmin-approval-card__dialog-label {
2939
+ font-weight: 500;
2940
+ }
2941
+ .svadmin-approval-card__textarea {
2942
+ min-height: 5rem;
2943
+ resize: vertical;
2944
+ }
2945
+ .svadmin-approval-card__textarea--reject {
2946
+ border-color: var(--destructive);
2947
+ @supports (color: color-mix(in lab, red, red)) {
2948
+ border-color: color-mix(in srgb, var(--destructive) 40%, transparent);
2949
+ }
2950
+ }
2951
+ .svadmin-approval-card__textarea--reject:focus-visible {
2952
+ outline-color: var(--destructive);
2953
+ }
2954
+ .svadmin-approval-card__reject-title {
2955
+ color: var(--destructive);
2956
+ }
2957
+ .svadmin-approval-card__input {
2958
+ height: 2rem;
2959
+ }
2960
+ .svadmin-anomaly-badge__value {
2961
+ color: var(--muted-foreground);
2962
+ font-size: 0.875rem;
2963
+ font-weight: 500;
2964
+ font-variant-numeric: tabular-nums;
2965
+ }
2966
+ .svadmin-anomaly-badge__trigger:is([data-slot="button"], .svadmin-button) {
2967
+ min-height: 0;
2968
+ height: auto;
2969
+ padding: 0;
2970
+ }
2971
+ .svadmin-anomaly-badge__trigger:is([data-slot="button"], .svadmin-button):hover {
2972
+ background: transparent;
2973
+ }
2974
+ .svadmin-anomaly-badge:is([data-slot="badge"], .svadmin-badge) {
2975
+ display: inline-flex;
2976
+ align-items: center;
2977
+ gap: 0.25rem;
2978
+ padding: 0 0.375rem;
2979
+ font-family: var(--font-mono);
2980
+ font-size: 0.75rem;
2981
+ font-variant-numeric: tabular-nums;
2982
+ }
2983
+ .svadmin-anomaly-badge:is([data-slot="badge"], .svadmin-badge)[data-good="true"] {
2984
+ background: var(--success);
2985
+ color: var(--success-foreground);
2986
+ }
2987
+ .svadmin-anomaly-badge:is([data-slot="badge"], .svadmin-badge)[data-good="true"]:hover {
2988
+ background: var(--success);
2989
+ @supports (color: color-mix(in lab, red, red)) {
2990
+ background: color-mix(in oklch, var(--success) 90%, transparent);
2991
+ }
2992
+ }
2993
+ .svadmin-stats-card {
2994
+ gap: 1rem;
2995
+ border-radius: 0.5rem;
2996
+ padding: 1.25rem;
2997
+ }
2998
+ .svadmin-stats-card[data-variant="default"] {
2999
+ background: var(--card);
3000
+ box-shadow: var(--shadow-surface);
3001
+ transition: box-shadow 300ms;
3002
+ }
3003
+ .svadmin-stats-card[data-variant="default"]:hover {
3004
+ box-shadow: var(--shadow-surface-hover);
3005
+ }
3006
+ .svadmin-stats-card[data-variant="outline"] {
3007
+ border: 2px solid var(--border);
3008
+ background: transparent;
3009
+ }
3010
+ .svadmin-stats-card[data-variant="filled"] {
3011
+ border: 0;
3012
+ background: var(--muted);
3013
+ @supports (color: color-mix(in lab, red, red)) {
3014
+ background: color-mix(in srgb, var(--muted) 50%, transparent);
3015
+ }
3016
+ box-shadow: var(--shadow-surface);
3017
+ }
3018
+ .svadmin-stats-card__icon {
3019
+ display: flex;
3020
+ flex-shrink: 0;
3021
+ align-items: center;
3022
+ justify-content: center;
3023
+ width: 3rem;
3024
+ height: 3rem;
3025
+ border-radius: 0.5rem;
3026
+ }
3027
+ .svadmin-stats-card__icon-glyph {
3028
+ width: 1.5rem;
3029
+ height: 1.5rem;
3030
+ }
3031
+ .svadmin-stats-card[data-color="primary"] .svadmin-stats-card__icon {
3032
+ background: var(--primary);
3033
+ @supports (color: color-mix(in lab, red, red)) {
3034
+ background: color-mix(in srgb, var(--primary) 10%, transparent);
3035
+ }
3036
+ color: var(--primary);
3037
+ }
3038
+ .svadmin-stats-card[data-color="success"] .svadmin-stats-card__icon {
3039
+ background: var(--success);
3040
+ @supports (color: color-mix(in lab, red, red)) {
3041
+ background: color-mix(in srgb, var(--success) 10%, transparent);
3042
+ }
3043
+ color: var(--success);
3044
+ }
3045
+ .svadmin-stats-card[data-color="warning"] .svadmin-stats-card__icon {
3046
+ background: var(--warning);
3047
+ @supports (color: color-mix(in lab, red, red)) {
3048
+ background: color-mix(in srgb, var(--warning) 10%, transparent);
3049
+ }
3050
+ color: var(--warning);
3051
+ }
3052
+ .svadmin-stats-card[data-color="danger"] .svadmin-stats-card__icon {
3053
+ background: var(--destructive);
3054
+ @supports (color: color-mix(in lab, red, red)) {
3055
+ background: color-mix(in srgb, var(--destructive) 10%, transparent);
3056
+ }
3057
+ color: var(--destructive);
3058
+ }
3059
+ .svadmin-stats-card[data-color="info"] .svadmin-stats-card__icon {
3060
+ background: var(--info);
3061
+ @supports (color: color-mix(in lab, red, red)) {
3062
+ background: color-mix(in srgb, var(--info) 10%, transparent);
3063
+ }
3064
+ color: var(--info);
3065
+ }
3066
+ .svadmin-stats-card__body {
3067
+ min-width: 0;
3068
+ flex: 1;
3069
+ }
3070
+ .svadmin-stats-card__label {
3071
+ color: var(--muted-foreground);
3072
+ font-size: 0.875rem;
3073
+ }
3074
+ .svadmin-stats-card__value-row {
3075
+ align-items: baseline;
3076
+ flex-wrap: wrap;
3077
+ gap: 0.5rem;
3078
+ }
3079
+ .svadmin-stats-card__value {
3080
+ color: var(--foreground);
3081
+ font-family: var(--font-mono);
3082
+ font-size: 1.25rem;
3083
+ line-height: 1.75rem;
3084
+ overflow-wrap: anywhere;
3085
+ }
3086
+ .svadmin-stats-card__skeleton {
3087
+ width: 5rem;
3088
+ height: 1.75rem;
3089
+ margin-top: 0.25rem;
3090
+ }
3091
+ .svadmin-stats-card__trend {
3092
+ display: inline-flex;
3093
+ align-items: center;
3094
+ gap: 0.125rem;
3095
+ font-size: 0.75rem;
3096
+ font-weight: 500;
3097
+ }
3098
+ .svadmin-stats-card__trend[data-positive="true"] {
3099
+ color: var(--success);
3100
+ }
3101
+ .svadmin-stats-card__trend[data-positive="false"] {
3102
+ color: var(--destructive);
3103
+ }
3104
+ .svadmin-stats-card__trend-label {
3105
+ margin-left: 0.125rem;
3106
+ color: var(--muted-foreground);
3107
+ }
3108
+ .svadmin-stats-card__footer {
3109
+ margin-top: 0.5rem;
3110
+ }