@wellingtonhlc/shared-ui 0.1.16 → 0.21.0

package/dist/styles.css

@@ -591,43 +591,15 @@ h2.react-datepicker__current-month {
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
-    --color-red-50: oklch(97.1% 0.013 17.38);
-    --color-red-100: oklch(93.6% 0.032 17.717);
     --color-red-200: oklch(88.5% 0.062 18.334);
-    --color-red-300: oklch(80.8% 0.114 19.571);
     --color-red-400: oklch(70.4% 0.191 22.216);
     --color-red-500: oklch(63.7% 0.237 25.331);
     --color-red-600: oklch(57.7% 0.245 27.325);
     --color-red-700: oklch(50.5% 0.213 27.518);
-    --color-red-800: oklch(44.4% 0.177 26.899);
     --color-red-950: oklch(25.8% 0.092 26.042);
-    --color-amber-50: oklch(98.7% 0.022 95.277);
-    --color-amber-100: oklch(96.2% 0.059 95.617);
-    --color-amber-300: oklch(87.9% 0.169 91.605);
-    --color-amber-500: oklch(76.9% 0.188 70.08);
     --color-amber-600: oklch(66.6% 0.179 58.318);
     --color-amber-700: oklch(55.5% 0.163 48.998);
-    --color-amber-800: oklch(47.3% 0.137 46.201);
-    --color-emerald-50: oklch(97.9% 0.021 166.113);
-    --color-emerald-100: oklch(95% 0.052 163.051);
-    --color-emerald-200: oklch(90.5% 0.093 164.15);
-    --color-emerald-300: oklch(84.5% 0.143 164.978);
-    --color-emerald-500: oklch(69.6% 0.17 162.48);
-    --color-emerald-600: oklch(59.6% 0.145 163.225);
-    --color-emerald-700: oklch(50.8% 0.118 165.612);
-    --color-emerald-800: oklch(43.2% 0.095 166.913);
-    --color-blue-50: oklch(97% 0.014 254.604);
-    --color-blue-100: oklch(93.2% 0.032 255.585);
-    --color-blue-200: oklch(88.2% 0.059 254.128);
-    --color-blue-300: oklch(80.9% 0.105 251.813);
-    --color-blue-500: oklch(62.3% 0.214 259.815);
-    --color-blue-600: oklch(54.6% 0.245 262.881);
-    --color-blue-700: oklch(48.8% 0.243 264.376);
-    --color-blue-800: oklch(42.4% 0.199 265.638);
     --color-slate-900: oklch(20.8% 0.042 265.755);
-    --color-gray-200: oklch(92.8% 0.006 264.531);
-    --color-gray-300: oklch(87.2% 0.01 258.338);
-    --color-gray-700: oklch(37.3% 0.034 259.733);
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
@@ -668,6 +640,35 @@ h2.react-datepicker__current-month {
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
+    --color-background: var(--background);
+    --color-background-secondary: var(--background-secondary);
+    --color-surface: var(--surface);
+    --color-foreground: var(--foreground);
+    --color-foreground-muted: var(--foreground-muted);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-app-border: var(--app-border);
+    --color-primary: var(--primary);
+    --color-primary-hover: var(--primary-hover);
+    --color-primary-light: var(--primary-light);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-brand: var(--brand);
+    --color-brand-hover: var(--brand-hover);
+    --color-sidebar-background: var(--sidebar-background);
+    --color-sidebar-flyout-background: var(--sidebar-flyout-background);
+    --color-destructive: var(--destructive);
+    --color-input-bg: var(--input-bg);
+    --color-status-info-bg: var(--status-info-bg);
+    --color-status-info-border: var(--status-info-border);
+    --color-status-info-text: var(--status-info-text);
+    --color-status-success-bg: var(--status-success-bg);
+    --color-status-success-border: var(--status-success-border);
+    --color-status-success-text: var(--status-success-text);
+    --color-status-warning-bg: var(--status-warning-bg);
+    --color-status-warning-border: var(--status-warning-border);
+    --color-status-warning-text: var(--status-warning-text);
+    --color-status-danger-bg: var(--status-danger-bg);
+    --color-status-danger-border: var(--status-danger-border);
+    --color-status-danger-text: var(--status-danger-text);
   }
 }
 @layer base {
@@ -974,6 +975,9 @@ h2.react-datepicker__current-month {
   .my-0 {
     margin-block: calc(var(--spacing) * 0);
   }
+  .mt-0 {
+    margin-top: calc(var(--spacing) * 0);
+  }
   .mt-0\.5 {
     margin-top: calc(var(--spacing) * 0.5);
   }
@@ -983,6 +987,9 @@ h2.react-datepicker__current-month {
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
+  .mt-3 {
+    margin-top: calc(var(--spacing) * 3);
+  }
   .mt-px {
     margin-top: 1px;
   }
@@ -1037,6 +1044,9 @@ h2.react-datepicker__current-month {
   .inline-flex {
     display: inline-flex;
   }
+  .table {
+    display: table;
+  }
   .size-3 {
     width: calc(var(--spacing) * 3);
     height: calc(var(--spacing) * 3);
@@ -1124,6 +1134,9 @@ h2.react-datepicker__current-month {
   .h-16 {
     height: calc(var(--spacing) * 16);
   }
+  .h-56 {
+    height: calc(var(--spacing) * 56);
+  }
   .h-72 {
     height: calc(var(--spacing) * 72);
   }
@@ -1271,9 +1284,18 @@ h2.react-datepicker__current-month {
   .w-\[28rem\] {
     width: 28rem;
   }
+  .w-\[32rem\] {
+    width: 32rem;
+  }
+  .w-\[34rem\] {
+    width: 34rem;
+  }
   .w-\[42rem\] {
     width: 42rem;
   }
+  .w-\[46rem\] {
+    width: 46rem;
+  }
   .w-\[min\(10rem\,24vw\)\] {
     width: min(10rem, 24vw);
   }
@@ -1402,6 +1424,10 @@ h2.react-datepicker__current-month {
     --tw-translate-x: -100%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-x-0 {
+    --tw-translate-x: calc(var(--spacing) * 0);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1523,6 +1549,9 @@ h2.react-datepicker__current-month {
   .gap-6 {
     gap: calc(var(--spacing) * 6);
   }
+  .gap-8 {
+    gap: calc(var(--spacing) * 8);
+  }
   .space-y-1 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -1530,18 +1559,18 @@ h2.react-datepicker__current-month {
       margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
-  .space-y-3 {
+  .space-y-2 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
+      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
-  .space-y-4 {
+  .space-y-5 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
+      margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
   .divide-y {
@@ -1553,6 +1582,11 @@ h2.react-datepicker__current-month {
       border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
     }
   }
+  .divide-app-border {
+    :where(& > :not(:last-child)) {
+      border-color: var(--color-app-border);
+    }
+  }
   .self-center {
     align-self: center;
   }
@@ -1591,9 +1625,6 @@ h2.react-datepicker__current-month {
   .rounded {
     border-radius: 0.25rem;
   }
-  .rounded-\[1\.5rem\] {
-    border-radius: 1.5rem;
-  }
   .rounded-\[var\(--radius\)\] {
     border-radius: var(--radius);
   }
@@ -1649,10 +1680,10 @@ h2.react-datepicker__current-month {
     --tw-border-style: dashed;
     border-style: dashed;
   }
-  .border-\[color-mix\(in_srgb\,var\(--brand\)_28\%\,var\(--app-border\)\)\] {
+  .border-\[color-mix\(in_srgb\,var\(--brand\)_34\%\,var\(--app-border\)\)\] {
     border-color: var(--brand);
     @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in srgb,var(--brand) 28%,var(--app-border));
+      border-color: color-mix(in srgb,var(--brand) 34%,var(--app-border));
     }
   }
   .border-\[color-mix\(in_srgb\,var\(--brand\)_40\%\,transparent\)\] {
@@ -1661,6 +1692,12 @@ h2.react-datepicker__current-month {
       border-color: color-mix(in srgb,var(--brand) 40%,transparent);
     }
   }
+  .border-\[color-mix\(in_srgb\,var\(--brand\)_44\%\,var\(--app-border\)\)\] {
+    border-color: var(--brand);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in srgb,var(--brand) 44%,var(--app-border));
+    }
+  }
   .border-\[color-mix\(in_srgb\,var\(--brand\)_64\%\,\#fff\)\] {
     border-color: var(--brand);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1679,6 +1716,9 @@ h2.react-datepicker__current-month {
       border-color: color-mix(in srgb,var(--foreground-muted) 42%,var(--app-border));
     }
   }
+  .border-\[var\(--status-danger-border\,\#f87171\)\] {
+    border-color: var(--status-danger-border,#f87171);
+  }
   .border-\[var\(--status-danger-border\,\#fca5a5\)\] {
     border-color: var(--status-danger-border,#fca5a5);
   }
@@ -1691,17 +1731,11 @@ h2.react-datepicker__current-month {
   .border-\[var\(--status-warning-border\,\#fcd34d\)\] {
     border-color: var(--status-warning-border,#fcd34d);
   }
-  .border-amber-300 {
-    border-color: var(--color-amber-300);
-  }
-  .border-blue-300 {
-    border-color: var(--color-blue-300);
-  }
-  .border-emerald-300 {
-    border-color: var(--color-emerald-300);
+  .border-app-border {
+    border-color: var(--color-app-border);
   }
-  .border-red-300 {
-    border-color: var(--color-red-300);
+  .border-brand {
+    border-color: var(--color-brand);
   }
   .border-red-500 {
     border-color: var(--color-red-500);
@@ -1721,6 +1755,12 @@ h2.react-datepicker__current-month {
       background-color: color-mix(in srgb,var(--brand) 10%,var(--surface));
     }
   }
+  .bg-\[color-mix\(in_srgb\,var\(--brand\)_12\%\,var\(--surface\)\)\] {
+    background-color: var(--brand);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb,var(--brand) 12%,var(--surface));
+    }
+  }
   .bg-\[color-mix\(in_srgb\,var\(--brand\)_14\%\,var\(--surface\)\)\] {
     background-color: var(--brand);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1733,6 +1773,12 @@ h2.react-datepicker__current-month {
       background-color: color-mix(in srgb,var(--destructive) 12%,var(--surface));
     }
   }
+  .bg-\[color-mix\(in_srgb\,var\(--foreground-muted\)_5\%\,var\(--surface\)\)\] {
+    background-color: var(--foreground-muted);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb,var(--foreground-muted) 5%,var(--surface));
+    }
+  }
   .bg-\[color-mix\(in_srgb\,var\(--foreground-muted\)_8\%\,var\(--surface\)\)\] {
     background-color: var(--foreground-muted);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1745,6 +1791,18 @@ h2.react-datepicker__current-month {
       background-color: color-mix(in srgb,var(--foreground-muted) 14%,var(--surface));
     }
   }
+  .bg-\[color-mix\(in_srgb\,var\(--foreground-muted\)_16\%\,var\(--surface\)\)\] {
+    background-color: var(--foreground-muted);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb,var(--foreground-muted) 16%,var(--surface));
+    }
+  }
+  .bg-\[color-mix\(in_srgb\,var\(--foreground-muted\)_18\%\,var\(--surface\)\)\] {
+    background-color: var(--foreground-muted);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in srgb,var(--foreground-muted) 18%,var(--surface));
+    }
+  }
   .bg-\[rgb\(var\(--color-brand\)\/0\.08\)\] {
     background-color: rgb(var(--color-brand)/0.08);
   }
@@ -1763,6 +1821,9 @@ h2.react-datepicker__current-month {
   .bg-\[var\(--status-info-bg\,rgba\(219\,234\,254\,0\.8\)\)\] {
     background-color: var(--status-info-bg,rgba(219,234,254,0.8));
   }
+  .bg-\[var\(--status-info-text\,\#1d4ed8\)\] {
+    background-color: var(--status-info-text,#1d4ed8);
+  }
   .bg-\[var\(--status-success-bg\,rgba\(220\,252\,231\,0\.8\)\)\] {
     background-color: var(--status-success-bg,rgba(220,252,231,0.8));
   }
@@ -1772,8 +1833,17 @@ h2.react-datepicker__current-month {
   .bg-\[var\(--status-warning-bg\,rgba\(254\,243\,199\,0\.8\)\)\] {
     background-color: var(--status-warning-bg,rgba(254,243,199,0.8));
   }
-  .bg-amber-50 {
-    background-color: var(--color-amber-50);
+  .bg-\[var\(--status-warning-text\,\#92400e\)\] {
+    background-color: var(--status-warning-text,#92400e);
+  }
+  .bg-app-border {
+    background-color: var(--color-app-border);
+  }
+  .bg-background {
+    background-color: var(--color-background);
+  }
+  .bg-background-secondary {
+    background-color: var(--color-background-secondary);
   }
   .bg-black\/50 {
     background-color: color-mix(in srgb, #000 50%, transparent);
@@ -1781,17 +1851,17 @@ h2.react-datepicker__current-month {
       background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
     }
   }
-  .bg-blue-50 {
-    background-color: var(--color-blue-50);
-  }
-  .bg-emerald-50 {
-    background-color: var(--color-emerald-50);
+  .bg-brand {
+    background-color: var(--color-brand);
   }
-  .bg-gray-300 {
-    background-color: var(--color-gray-300);
+  .bg-brand\/15 {
+    background-color: var(--color-brand);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-brand) 15%, transparent);
+    }
   }
-  .bg-red-50 {
-    background-color: var(--color-red-50);
+  .bg-input-bg {
+    background-color: var(--color-input-bg);
   }
   .bg-slate-900\/18 {
     background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 18%, transparent);
@@ -1811,6 +1881,9 @@ h2.react-datepicker__current-month {
       background-color: color-mix(in oklab, var(--color-slate-900) 42%, transparent);
     }
   }
+  .bg-surface {
+    background-color: var(--color-surface);
+  }
   .bg-transparent {
     background-color: transparent;
   }
@@ -1820,16 +1893,15 @@ h2.react-datepicker__current-month {
       background-color: color-mix(in oklab, var(--color-white) 80%, transparent);
     }
   }
-  .bg-gradient-to-br {
-    --tw-gradient-position: to bottom right in oklab;
-    background-image: linear-gradient(var(--tw-gradient-stops));
-  }
   .bg-\[linear-gradient\(135deg\,color-mix\(in_srgb\,var\(--color-surface\,var\(--surface\)\)_92\%\,var\(--color-primary\,var\(--brand\)\)_8\%\)\,var\(--color-surface\,var\(--surface\)\)\)\] {
     background-image: linear-gradient(135deg,var(--color-surface,var(--surface)),var(--color-surface,var(--surface)));
     @supports (color: color-mix(in lab, red, red)) {
       background-image: linear-gradient(135deg,color-mix(in srgb,var(--color-surface,var(--surface)) 92%,var(--color-primary,var(--brand)) 8%),var(--color-surface,var(--surface)));
     }
   }
+  .fill-surface {
+    fill: var(--color-surface);
+  }
   .p-0 {
     padding: calc(var(--spacing) * 0);
   }
@@ -1854,6 +1926,9 @@ h2.react-datepicker__current-month {
   .p-6 {
     padding: calc(var(--spacing) * 6);
   }
+  .p-8 {
+    padding: calc(var(--spacing) * 8);
+  }
   .px-1\.5 {
     padding-inline: calc(var(--spacing) * 1.5);
   }
@@ -1917,6 +1992,9 @@ h2.react-datepicker__current-month {
   .pt-4 {
     padding-top: calc(var(--spacing) * 4);
   }
+  .pt-5 {
+    padding-top: calc(var(--spacing) * 5);
+  }
   .pr-1 {
     padding-right: calc(var(--spacing) * 1);
   }
@@ -1935,8 +2013,8 @@ h2.react-datepicker__current-month {
   .pr-14 {
     padding-right: calc(var(--spacing) * 14);
   }
-  .pb-3 {
-    padding-bottom: calc(var(--spacing) * 3);
+  .pb-2 {
+    padding-bottom: calc(var(--spacing) * 2);
   }
   .pb-4 {
     padding-bottom: calc(var(--spacing) * 4);
@@ -2106,12 +2184,63 @@ h2.react-datepicker__current-month {
   .whitespace-nowrap {
     white-space: nowrap;
   }
+  .text-\[color-mix\(in_srgb\,var\(--brand\)_68\%\,var\(--foreground-muted\)\)\] {
+    color: var(--brand);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in srgb,var(--brand) 68%,var(--foreground-muted));
+    }
+  }
+  .text-\[color-mix\(in_srgb\,var\(--brand\)_72\%\,var\(--foreground\)\)\] {
+    color: var(--brand);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in srgb,var(--brand) 72%,var(--foreground));
+    }
+  }
+  .text-\[color-mix\(in_srgb\,var\(--brand\)_82\%\,var\(--foreground\)\)\] {
+    color: var(--brand);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in srgb,var(--brand) 82%,var(--foreground));
+    }
+  }
+  .text-\[color-mix\(in_srgb\,var\(--brand\)_86\%\,var\(--foreground\)\)\] {
+    color: var(--brand);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in srgb,var(--brand) 86%,var(--foreground));
+    }
+  }
+  .text-\[color-mix\(in_srgb\,var\(--brand\)_88\%\,var\(--foreground\)\)\] {
+    color: var(--brand);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in srgb,var(--brand) 88%,var(--foreground));
+    }
+  }
+  .text-\[color-mix\(in_srgb\,var\(--destructive\)_86\%\,var\(--foreground\)\)\] {
+    color: var(--destructive);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in srgb,var(--destructive) 86%,var(--foreground));
+    }
+  }
+  .text-\[color-mix\(in_srgb\,var\(--status-info-text\,\#2563eb\)_76\%\,var\(--foreground\)\)\] {
+    color: var(--status-info-text,#2563eb);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in srgb,var(--status-info-text,#2563eb) 76%,var(--foreground));
+    }
+  }
+  .text-\[color-mix\(in_srgb\,var\(--status-warning-text\,\#d97706\)_76\%\,var\(--foreground\)\)\] {
+    color: var(--status-warning-text,#d97706);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in srgb,var(--status-warning-text,#d97706) 76%,var(--foreground));
+    }
+  }
   .text-\[var\(--brand\)\] {
     color: var(--brand);
   }
   .text-\[var\(--primary-foreground\,\#ffffff\)\] {
     color: var(--primary-foreground,#ffffff);
   }
+  .text-\[var\(--status-danger-text\,\#7f1d1d\)\] {
+    color: var(--status-danger-text,#7f1d1d);
+  }
   .text-\[var\(--status-danger-text\,\#b91c1c\)\] {
     color: var(--status-danger-text,#b91c1c);
   }
@@ -2127,42 +2256,39 @@ h2.react-datepicker__current-month {
   .text-amber-600 {
     color: var(--color-amber-600);
   }
-  .text-amber-700 {
-    color: var(--color-amber-700);
+  .text-brand {
+    color: var(--color-brand);
   }
-  .text-amber-800 {
-    color: var(--color-amber-800);
-  }
-  .text-blue-600 {
-    color: var(--color-blue-600);
+  .text-current {
+    color: currentcolor;
   }
-  .text-blue-700 {
-    color: var(--color-blue-700);
+  .text-foreground {
+    color: var(--color-foreground);
   }
-  .text-blue-800 {
-    color: var(--color-blue-800);
+  .text-foreground-muted {
+    color: var(--color-foreground-muted);
   }
-  .text-current {
-    color: currentcolor;
+  .text-foreground-muted\/50 {
+    color: var(--color-foreground-muted);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-foreground-muted) 50%, transparent);
+    }
   }
-  .text-emerald-600 {
-    color: var(--color-emerald-600);
+  .text-foreground-muted\/90 {
+    color: var(--color-foreground-muted);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-foreground-muted) 90%, transparent);
+    }
   }
-  .text-emerald-700 {
-    color: var(--color-emerald-700);
+  .text-primary {
+    color: var(--color-primary);
   }
-  .text-emerald-800 {
-    color: var(--color-emerald-800);
+  .text-primary-foreground {
+    color: var(--color-primary-foreground);
   }
   .text-red-600 {
     color: var(--color-red-600);
   }
-  .text-red-700 {
-    color: var(--color-red-700);
-  }
-  .text-red-800 {
-    color: var(--color-red-800);
-  }
   .text-white {
     color: var(--color-white);
   }
@@ -2233,12 +2359,33 @@ h2.react-datepicker__current-month {
     }
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-\[0_10px_22px_-16px_color-mix\(in_srgb\,var\(--status-info-text\,\#1d4ed8\)_70\%\,\#000\)\] {
+    --tw-shadow: 0 10px 22px -16px var(--tw-shadow-color, var(--status-info-text,#1d4ed8));
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-shadow: 0 10px 22px -16px var(--tw-shadow-color, color-mix(in srgb,var(--status-info-text,#1d4ed8) 70%,#000));
+    }
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-\[0_10px_22px_-16px_color-mix\(in_srgb\,var\(--status-warning-text\,\#92400e\)_70\%\,\#000\)\] {
+    --tw-shadow: 0 10px 22px -16px var(--tw-shadow-color, var(--status-warning-text,#92400e));
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-shadow: 0 10px 22px -16px var(--tw-shadow-color, color-mix(in srgb,var(--status-warning-text,#92400e) 70%,#000));
+    }
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-\[0_12px_32px_rgba\(15\,23\,42\,0\.06\)\] {
     --tw-shadow: 0 12px 32px var(--tw-shadow-color, rgba(15,23,42,0.06));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-\[0_18px_32px_-22px_var\(--brand-hover\)\] {
-    --tw-shadow: 0 18px 32px -22px var(--tw-shadow-color, var(--brand-hover));
+  .shadow-\[0_14px_26px_-20px_color-mix\(in_srgb\,var\(--brand\)_45\%\,\#000\)\] {
+    --tw-shadow: 0 14px 26px -20px var(--tw-shadow-color, var(--brand));
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-shadow: 0 14px 26px -20px var(--tw-shadow-color, color-mix(in srgb,var(--brand) 45%,#000));
+    }
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-\[0_16px_36px_-24px_color-mix\(in_srgb\,\#000_50\%\,transparent\)\] {
+    --tw-shadow: 0 16px 36px -24px var(--tw-shadow-color, color-mix(in srgb,#000 50%,transparent));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
   .shadow-\[0_20px_45px_-20px_color-mix\(in_srgb\,\#000_45\%\,transparent\)\] {
@@ -2249,6 +2396,13 @@ h2.react-datepicker__current-month {
     --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, color-mix(in srgb,#fff 32%,transparent)), 0 8px 18px -14px var(--tw-shadow-color, rgba(0,0,0,0.55));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-\[inset_0_0_0_1px_color-mix\(in_srgb\,var\(--brand\)_8\%\,transparent\)\] {
+    --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, var(--brand));
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, color-mix(in srgb,var(--brand) 8%,transparent));
+    }
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-\[inset_0_0_0_1px_rgb\(var\(--color-brand\)\/0\.10\)\] {
     --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, rgb(var(--color-brand)/0.10));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2261,6 +2415,10 @@ h2.react-datepicker__current-month {
     --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, rgba(15,23,42,0.06));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-\[inset_0_1px_0_color-mix\(in_srgb\,\#fff_40\%\,transparent\)\] {
+    --tw-shadow: inset 0 1px 0 var(--tw-shadow-color, color-mix(in srgb,#fff 40%,transparent));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-lg {
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2306,6 +2464,11 @@ h2.react-datepicker__current-month {
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[background-color\,border-color\,box-shadow\] {
+    transition-property: background-color,border-color,box-shadow;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-\[background-color\,border-color\,color\,box-shadow\,transform\,opacity\] {
     transition-property: background-color,border-color,color,box-shadow,transform,opacity;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2403,6 +2566,18 @@ h2.react-datepicker__current-month {
       }
     }
   }
+  .group-hover\:text-brand {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        color: var(--color-brand);
+      }
+    }
+  }
+  .placeholder\:text-foreground-muted {
+    &::placeholder {
+      color: var(--color-foreground-muted);
+    }
+  }
   .first\:border-l-0 {
     &:first-child {
       border-left-style: var(--tw-border-style);
@@ -2445,6 +2620,16 @@ h2.react-datepicker__current-month {
       }
     }
   }
+  .hover\:border-\[color-mix\(in_srgb\,var\(--brand\)_48\%\,var\(--app-border\)\)\] {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--brand);
+        @supports (color: color-mix(in lab, red, red)) {
+          border-color: color-mix(in srgb,var(--brand) 48%,var(--app-border));
+        }
+      }
+    }
+  }
   .hover\:border-\[color-mix\(in_srgb\,var\(--brand\)_52\%\,transparent\)\] {
     &:hover {
       @media (hover: hover) {
@@ -2455,12 +2640,26 @@ h2.react-datepicker__current-month {
       }
     }
   }
-  .hover\:border-\[color-mix\(in_srgb\,var\(--foreground-muted\)_42\%\,var\(--app-border\)\)\] {
+  .hover\:border-\[var\(--destructive\)\] {
     &:hover {
       @media (hover: hover) {
-        border-color: var(--foreground-muted);
+        border-color: var(--destructive);
+      }
+    }
+  }
+  .hover\:border-brand {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-brand);
+      }
+    }
+  }
+  .hover\:border-brand\/60 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-brand);
         @supports (color: color-mix(in lab, red, red)) {
-          border-color: color-mix(in srgb,var(--foreground-muted) 42%,var(--app-border));
+          border-color: color-mix(in oklab, var(--color-brand) 60%, transparent);
         }
       }
     }
@@ -2496,6 +2695,16 @@ h2.react-datepicker__current-month {
       }
     }
   }
+  .hover\:bg-\[color-mix\(in_srgb\,var\(--brand\)_7\%\,var\(--surface\)\)\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--brand);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in srgb,var(--brand) 7%,var(--surface));
+        }
+      }
+    }
+  }
   .hover\:bg-\[color-mix\(in_srgb\,var\(--brand\)_8\%\,transparent\)\] {
     &:hover {
       @media (hover: hover) {
@@ -2536,6 +2745,16 @@ h2.react-datepicker__current-month {
       }
     }
   }
+  .hover\:bg-\[color-mix\(in_srgb\,var\(--brand\)_18\%\,var\(--surface\)\)\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--brand);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in srgb,var(--brand) 18%,var(--surface));
+        }
+      }
+    }
+  }
   .hover\:bg-\[color-mix\(in_srgb\,var\(--destructive\)_12\%\,transparent\)\] {
     &:hover {
       @media (hover: hover) {
@@ -2556,42 +2775,42 @@ h2.react-datepicker__current-month {
       }
     }
   }
-  .hover\:bg-\[color-mix\(in_srgb\,var\(--foreground-muted\)_10\%\,transparent\)\] {
+  .hover\:bg-\[color-mix\(in_srgb\,var\(--status-danger-text\,\#b91c1c\)_88\%\,\#000\)\] {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--foreground-muted);
+        background-color: var(--status-danger-text,#b91c1c);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in srgb,var(--foreground-muted) 10%,transparent);
+          background-color: color-mix(in srgb,var(--status-danger-text,#b91c1c) 88%,#000);
         }
       }
     }
   }
-  .hover\:bg-\[color-mix\(in_srgb\,var\(--foreground-muted\)_10\%\,var\(--surface\)\)\] {
+  .hover\:bg-\[color-mix\(in_srgb\,var\(--status-info-text\,\#1d4ed8\)_88\%\,\#000\)\] {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--foreground-muted);
+        background-color: var(--status-info-text,#1d4ed8);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in srgb,var(--foreground-muted) 10%,var(--surface));
+          background-color: color-mix(in srgb,var(--status-info-text,#1d4ed8) 88%,#000);
         }
       }
     }
   }
-  .hover\:bg-\[color-mix\(in_srgb\,var\(--status-danger-text\,\#b91c1c\)_88\%\,\#000\)\] {
+  .hover\:bg-\[color-mix\(in_srgb\,var\(--status-success-text\,\#15803d\)_88\%\,\#000\)\] {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--status-danger-text,#b91c1c);
+        background-color: var(--status-success-text,#15803d);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in srgb,var(--status-danger-text,#b91c1c) 88%,#000);
+          background-color: color-mix(in srgb,var(--status-success-text,#15803d) 88%,#000);
         }
       }
     }
   }
-  .hover\:bg-\[color-mix\(in_srgb\,var\(--status-success-text\,\#15803d\)_88\%\,\#000\)\] {
+  .hover\:bg-\[color-mix\(in_srgb\,var\(--status-warning-text\,\#92400e\)_88\%\,\#000\)\] {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--status-success-text,#15803d);
+        background-color: var(--status-warning-text,#92400e);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in srgb,var(--status-success-text,#15803d) 88%,#000);
+          background-color: color-mix(in srgb,var(--status-warning-text,#92400e) 88%,#000);
         }
       }
     }
@@ -2617,6 +2836,40 @@ h2.react-datepicker__current-month {
       }
     }
   }
+  .hover\:bg-background {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-background);
+      }
+    }
+  }
+  .hover\:bg-background\/40 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-background);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-background) 40%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-brand\/10 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-brand);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-brand) 10%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-destructive {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-destructive);
+      }
+    }
+  }
   .hover\:bg-white\/70 {
     &:hover {
       @media (hover: hover) {
@@ -2635,6 +2888,16 @@ h2.react-datepicker__current-month {
       }
     }
   }
+  .hover\:text-\[color-mix\(in_srgb\,var\(--brand\)_86\%\,var\(--foreground\)\)\] {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--brand);
+        @supports (color: color-mix(in lab, red, red)) {
+          color: color-mix(in srgb,var(--brand) 86%,var(--foreground));
+        }
+      }
+    }
+  }
   .hover\:text-\[var\(--brand\)\] {
     &:hover {
       @media (hover: hover) {
@@ -2649,6 +2912,30 @@ h2.react-datepicker__current-month {
       }
     }
   }
+  .hover\:text-brand {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-brand);
+      }
+    }
+  }
+  .hover\:text-brand\/70 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-brand);
+        @supports (color: color-mix(in lab, red, red)) {
+          color: color-mix(in oklab, var(--color-brand) 70%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:text-foreground {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-foreground);
+      }
+    }
+  }
   .hover\:text-red-700 {
     &:hover {
       @media (hover: hover) {
@@ -2674,6 +2961,17 @@ h2.react-datepicker__current-month {
       }
     }
   }
+  .hover\:shadow-\[0_16px_28px_-18px_color-mix\(in_srgb\,var\(--brand\)_80\%\,\#000\)\] {
+    &:hover {
+      @media (hover: hover) {
+        --tw-shadow: 0 16px 28px -18px var(--tw-shadow-color, var(--brand));
+        @supports (color: color-mix(in lab, red, red)) {
+          --tw-shadow: 0 16px 28px -18px var(--tw-shadow-color, color-mix(in srgb,var(--brand) 80%,#000));
+        }
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+    }
+  }
   .hover\:shadow-\[inset_0_0_0_1px_rgba\(15\,23\,42\,0\.05\)\] {
     &:hover {
       @media (hover: hover) {
@@ -2682,17 +2980,59 @@ h2.react-datepicker__current-month {
       }
     }
   }
+  .focus\:border-brand {
+    &:focus {
+      border-color: var(--color-brand);
+    }
+  }
   .focus\:border-red-500 {
     &:focus {
       border-color: var(--color-red-500);
     }
   }
+  .focus\:bg-surface {
+    &:focus {
+      background-color: var(--color-surface);
+    }
+  }
   .focus\:ring-2 {
     &:focus {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
+  .focus\:ring-brand\/20 {
+    &:focus {
+      --tw-ring-color: var(--color-brand);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-brand) 20%, transparent);
+      }
+    }
+  }
+  .focus\:ring-brand\/25 {
+    &:focus {
+      --tw-ring-color: var(--color-brand);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-brand) 25%, transparent);
+      }
+    }
+  }
+  .focus\:ring-brand\/35 {
+    &:focus {
+      --tw-ring-color: var(--color-brand);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-brand) 35%, transparent);
+      }
+    }
+  }
+  .focus\:ring-brand\/50 {
+    &:focus {
+      --tw-ring-color: var(--color-brand);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-brand) 50%, transparent);
+      }
+    }
+  }
   .focus\:ring-red-200 {
     &:focus {
       --tw-ring-color: var(--color-red-200);
@@ -2715,12 +3055,52 @@ h2.react-datepicker__current-month {
       --tw-ring-inset: inset;
     }
   }
+  .focus-visible\:border-brand\/60 {
+    &:focus-visible {
+      border-color: var(--color-brand);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, var(--color-brand) 60%, transparent);
+      }
+    }
+  }
   .focus-visible\:ring-2 {
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
+  .focus-visible\:ring-brand\/30 {
+    &:focus-visible {
+      --tw-ring-color: var(--color-brand);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-brand) 30%, transparent);
+      }
+    }
+  }
+  .focus-visible\:ring-brand\/35 {
+    &:focus-visible {
+      --tw-ring-color: var(--color-brand);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-brand) 35%, transparent);
+      }
+    }
+  }
+  .focus-visible\:ring-brand\/40 {
+    &:focus-visible {
+      --tw-ring-color: var(--color-brand);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-brand) 40%, transparent);
+      }
+    }
+  }
+  .focus-visible\:ring-brand\/50 {
+    &:focus-visible {
+      --tw-ring-color: var(--color-brand);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-brand) 50%, transparent);
+      }
+    }
+  }
   .focus-visible\:outline-2 {
     &:focus-visible {
       outline-style: var(--tw-outline-style);
@@ -2764,6 +3144,15 @@ h2.react-datepicker__current-month {
       }
     }
   }
+  .enabled\:hover\:border-brand {
+    &:enabled {
+      &:hover {
+        @media (hover: hover) {
+          border-color: var(--color-brand);
+        }
+      }
+    }
+  }
   .enabled\:hover\:bg-\[color-mix\(in_srgb\,var\(--foreground-muted\)_8\%\,transparent\)\] {
     &:enabled {
       &:hover {
@@ -2804,11 +3193,21 @@ h2.react-datepicker__current-month {
       cursor: not-allowed;
     }
   }
+  .disabled\:border-app-border {
+    &:disabled {
+      border-color: var(--color-app-border);
+    }
+  }
   .disabled\:border-transparent {
     &:disabled {
       border-color: transparent;
     }
   }
+  .disabled\:bg-input-bg {
+    &:disabled {
+      background-color: var(--color-input-bg);
+    }
+  }
   .disabled\:bg-transparent {
     &:disabled {
       background-color: transparent;
@@ -2886,6 +3285,21 @@ h2.react-datepicker__current-month {
       opacity: 100%;
     }
   }
+  .data-\[state\=active\]\:border-app-border {
+    &[data-state="active"] {
+      border-color: var(--color-app-border);
+    }
+  }
+  .data-\[state\=active\]\:border-b-surface {
+    &[data-state="active"] {
+      border-bottom-color: var(--color-surface);
+    }
+  }
+  .data-\[state\=active\]\:text-foreground {
+    &[data-state="active"] {
+      color: var(--color-foreground);
+    }
+  }
   .data-\[state\=open\]\:bg-\[color-mix\(in_srgb\,\#facc15_14\%\,transparent\)\] {
     &[data-state="open"] {
       background-color: color-mix(in srgb,#facc15 14%,transparent);
@@ -2899,11 +3313,21 @@ h2.react-datepicker__current-month {
       }
     }
   }
+  .data-\[state\=open\]\:bg-background {
+    &[data-state="open"] {
+      background-color: var(--color-background);
+    }
+  }
   .data-\[state\=open\]\:text-amber-700 {
     &[data-state="open"] {
       color: var(--color-amber-700);
     }
   }
+  .data-\[state\=open\]\:text-foreground {
+    &[data-state="open"] {
+      color: var(--color-foreground);
+    }
+  }
   .data-\[state\=open\]\:text-red-700 {
     &[data-state="open"] {
       color: var(--color-red-700);
@@ -3082,256 +3506,205 @@ h2.react-datepicker__current-month {
       width: calc(var(--spacing) * 72);
     }
   }
-  .dark\:border-amber-500\/30 {
-    @media (prefers-color-scheme: dark) {
-      border-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 30%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        border-color: color-mix(in oklab, var(--color-amber-500) 30%, transparent);
-      }
-    }
-  }
-  .dark\:border-blue-500\/20 {
+  .dark\:border-\[color-mix\(in_srgb\,var\(--brand\)_42\%\,var\(--app-border\)\)\] {
     @media (prefers-color-scheme: dark) {
-      border-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 20%, transparent);
+      border-color: var(--brand);
       @supports (color: color-mix(in lab, red, red)) {
-        border-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
+        border-color: color-mix(in srgb,var(--brand) 42%,var(--app-border));
       }
     }
   }
-  .dark\:border-blue-500\/30 {
+  .dark\:\!bg-\[rgb\(var\(--color-brand\)\/0\.13\)\] {
     @media (prefers-color-scheme: dark) {
-      border-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 30%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        border-color: color-mix(in oklab, var(--color-blue-500) 30%, transparent);
-      }
+      background-color: rgb(var(--color-brand)/0.13) !important;
     }
   }
-  .dark\:border-emerald-500\/20 {
+  .dark\:bg-\[color-mix\(in_srgb\,var\(--brand\)_18\%\,var\(--surface\)\)\] {
     @media (prefers-color-scheme: dark) {
-      border-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 20%, transparent);
+      background-color: var(--brand);
       @supports (color: color-mix(in lab, red, red)) {
-        border-color: color-mix(in oklab, var(--color-emerald-500) 20%, transparent);
+        background-color: color-mix(in srgb,var(--brand) 18%,var(--surface));
       }
     }
   }
-  .dark\:border-emerald-500\/30 {
+  .dark\:bg-\[color-mix\(in_srgb\,var\(--foreground-muted\)_28\%\,var\(--surface\)\)\] {
     @media (prefers-color-scheme: dark) {
-      border-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 30%, transparent);
+      background-color: var(--foreground-muted);
       @supports (color: color-mix(in lab, red, red)) {
-        border-color: color-mix(in oklab, var(--color-emerald-500) 30%, transparent);
+        background-color: color-mix(in srgb,var(--foreground-muted) 28%,var(--surface));
       }
     }
   }
-  .dark\:border-red-500\/30 {
+  .dark\:bg-\[color-mix\(in_srgb\,var\(--foreground-muted\)_30\%\,var\(--surface\)\)\] {
     @media (prefers-color-scheme: dark) {
-      border-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 30%, transparent);
+      background-color: var(--foreground-muted);
       @supports (color: color-mix(in lab, red, red)) {
-        border-color: color-mix(in oklab, var(--color-red-500) 30%, transparent);
+        background-color: color-mix(in srgb,var(--foreground-muted) 30%,var(--surface));
       }
     }
   }
-  .dark\:\!bg-\[rgb\(var\(--color-brand\)\/0\.13\)\] {
-    @media (prefers-color-scheme: dark) {
-      background-color: rgb(var(--color-brand)/0.13) !important;
-    }
-  }
   .dark\:bg-\[rgb\(var\(--color-brand\)\/0\.13\)\] {
     @media (prefers-color-scheme: dark) {
       background-color: rgb(var(--color-brand)/0.13);
     }
   }
-  .dark\:bg-amber-500\/10 {
-    @media (prefers-color-scheme: dark) {
-      background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 10%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent);
-      }
-    }
-  }
-  .dark\:bg-blue-500\/10 {
+  .dark\:bg-white\/\[0\.08\] {
     @media (prefers-color-scheme: dark) {
-      background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 10%, transparent);
+      background-color: color-mix(in srgb, #fff 8%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
+        background-color: color-mix(in oklab, var(--color-white) 8%, transparent);
       }
     }
   }
-  .dark\:bg-emerald-500\/10 {
+  .dark\:text-\[color-mix\(in_srgb\,var\(--brand\)_42\%\,\#fff\)\] {
     @media (prefers-color-scheme: dark) {
-      background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 10%, transparent);
+      color: var(--brand);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-emerald-500) 10%, transparent);
+        color: color-mix(in srgb,var(--brand) 42%,#fff);
       }
     }
   }
-  .dark\:bg-gray-700 {
+  .dark\:text-foreground {
     @media (prefers-color-scheme: dark) {
-      background-color: var(--color-gray-700);
+      color: var(--color-foreground);
     }
   }
-  .dark\:bg-red-500\/10 {
+  .dark\:text-red-400 {
     @media (prefers-color-scheme: dark) {
-      background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 10%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-red-500) 10%, transparent);
-      }
+      color: var(--color-red-400);
     }
   }
-  .dark\:bg-white\/\[0\.08\] {
+  .dark\:shadow-\[0_14px_28px_-20px_color-mix\(in_srgb\,var\(--brand\)_86\%\,\#000\)\] {
     @media (prefers-color-scheme: dark) {
-      background-color: color-mix(in srgb, #fff 8%, transparent);
+      --tw-shadow: 0 14px 28px -20px var(--tw-shadow-color, var(--brand));
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-white) 8%, transparent);
+        --tw-shadow: 0 14px 28px -20px var(--tw-shadow-color, color-mix(in srgb,var(--brand) 86%,#000));
       }
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
-  .dark\:text-amber-100 {
-    @media (prefers-color-scheme: dark) {
-      color: var(--color-amber-100);
-    }
-  }
-  .dark\:text-amber-300 {
-    @media (prefers-color-scheme: dark) {
-      color: var(--color-amber-300);
-    }
-  }
-  .dark\:text-blue-100 {
+  .dark\:shadow-\[inset_0_0_0_1px_rgb\(var\(--color-brand\)\/0\.18\)\] {
     @media (prefers-color-scheme: dark) {
-      color: var(--color-blue-100);
+      --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, rgb(var(--color-brand)/0.18));
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
-  .dark\:text-blue-100\/80 {
+  .dark\:hover\:border-\[color-mix\(in_srgb\,var\(--brand\)_54\%\,var\(--app-border\)\)\] {
     @media (prefers-color-scheme: dark) {
-      color: color-mix(in srgb, oklch(93.2% 0.032 255.585) 80%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        color: color-mix(in oklab, var(--color-blue-100) 80%, transparent);
+      &:hover {
+        @media (hover: hover) {
+          border-color: var(--brand);
+          @supports (color: color-mix(in lab, red, red)) {
+            border-color: color-mix(in srgb,var(--brand) 54%,var(--app-border));
+          }
+        }
       }
     }
   }
-  .dark\:text-blue-200\/80 {
+  .dark\:hover\:\!bg-\[rgb\(var\(--color-brand\)\/0\.17\)\] {
     @media (prefers-color-scheme: dark) {
-      color: color-mix(in srgb, oklch(88.2% 0.059 254.128) 80%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        color: color-mix(in oklab, var(--color-blue-200) 80%, transparent);
+      &:hover {
+        @media (hover: hover) {
+          background-color: rgb(var(--color-brand)/0.17) !important;
+        }
       }
     }
   }
-  .dark\:text-blue-300 {
+  .dark\:hover\:bg-\[color-mix\(in_srgb\,var\(--brand\)_12\%\,transparent\)\] {
     @media (prefers-color-scheme: dark) {
-      color: var(--color-blue-300);
-    }
-  }
-  .dark\:text-emerald-100 {
-    @media (prefers-color-scheme: dark) {
-      color: var(--color-emerald-100);
-    }
-  }
-  .dark\:text-emerald-100\/80 {
-    @media (prefers-color-scheme: dark) {
-      color: color-mix(in srgb, oklch(95% 0.052 163.051) 80%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        color: color-mix(in oklab, var(--color-emerald-100) 80%, transparent);
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--brand);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in srgb,var(--brand) 12%,transparent);
+          }
+        }
       }
     }
   }
-  .dark\:text-emerald-200\/80 {
+  .dark\:hover\:bg-\[color-mix\(in_srgb\,var\(--brand\)_14\%\,transparent\)\] {
     @media (prefers-color-scheme: dark) {
-      color: color-mix(in srgb, oklch(90.5% 0.093 164.15) 80%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        color: color-mix(in oklab, var(--color-emerald-200) 80%, transparent);
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--brand);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in srgb,var(--brand) 14%,transparent);
+          }
+        }
       }
     }
   }
-  .dark\:text-emerald-300 {
-    @media (prefers-color-scheme: dark) {
-      color: var(--color-emerald-300);
-    }
-  }
-  .dark\:text-gray-200\/80 {
+  .dark\:hover\:bg-\[color-mix\(in_srgb\,var\(--brand\)_24\%\,var\(--surface\)\)\] {
     @media (prefers-color-scheme: dark) {
-      color: color-mix(in srgb, oklch(92.8% 0.006 264.531) 80%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        color: color-mix(in oklab, var(--color-gray-200) 80%, transparent);
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--brand);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in srgb,var(--brand) 24%,var(--surface));
+          }
+        }
       }
     }
   }
-  .dark\:text-red-100 {
-    @media (prefers-color-scheme: dark) {
-      color: var(--color-red-100);
-    }
-  }
-  .dark\:text-red-100\/80 {
+  .dark\:hover\:bg-\[rgb\(var\(--color-brand\)\/0\.16\)\] {
     @media (prefers-color-scheme: dark) {
-      color: color-mix(in srgb, oklch(93.6% 0.032 17.717) 80%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        color: color-mix(in oklab, var(--color-red-100) 80%, transparent);
+      &:hover {
+        @media (hover: hover) {
+          background-color: rgb(var(--color-brand)/0.16);
+        }
       }
     }
   }
-  .dark\:text-red-200\/80 {
+  .dark\:hover\:bg-\[rgb\(var\(--color-brand\)\/0\.17\)\] {
     @media (prefers-color-scheme: dark) {
-      color: color-mix(in srgb, oklch(88.5% 0.062 18.334) 80%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        color: color-mix(in oklab, var(--color-red-200) 80%, transparent);
+      &:hover {
+        @media (hover: hover) {
+          background-color: rgb(var(--color-brand)/0.17);
+        }
       }
     }
   }
-  .dark\:text-red-300 {
-    @media (prefers-color-scheme: dark) {
-      color: var(--color-red-300);
-    }
-  }
-  .dark\:text-red-400 {
-    @media (prefers-color-scheme: dark) {
-      color: var(--color-red-400);
-    }
-  }
-  .dark\:text-white {
-    @media (prefers-color-scheme: dark) {
-      color: var(--color-white);
-    }
-  }
-  .dark\:shadow-\[inset_0_0_0_1px_rgb\(var\(--color-brand\)\/0\.18\)\] {
-    @media (prefers-color-scheme: dark) {
-      --tw-shadow: inset 0 0 0 1px var(--tw-shadow-color, rgb(var(--color-brand)/0.18));
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-  }
-  .dark\:hover\:\!bg-\[rgb\(var\(--color-brand\)\/0\.17\)\] {
+  .dark\:hover\:bg-white\/\[0\.06\] {
     @media (prefers-color-scheme: dark) {
       &:hover {
         @media (hover: hover) {
-          background-color: rgb(var(--color-brand)/0.17) !important;
+          background-color: color-mix(in srgb, #fff 6%, transparent);
+          @supports (color: color-mix(in lab, red, red)) {
+            background-color: color-mix(in oklab, var(--color-white) 6%, transparent);
+          }
         }
       }
     }
   }
-  .dark\:hover\:bg-\[rgb\(var\(--color-brand\)\/0\.16\)\] {
+  .dark\:hover\:text-\[color-mix\(in_srgb\,var\(--brand\)_30\%\,\#fff\)\] {
     @media (prefers-color-scheme: dark) {
       &:hover {
         @media (hover: hover) {
-          background-color: rgb(var(--color-brand)/0.16);
+          color: var(--brand);
+          @supports (color: color-mix(in lab, red, red)) {
+            color: color-mix(in srgb,var(--brand) 30%,#fff);
+          }
         }
       }
     }
   }
-  .dark\:hover\:bg-\[rgb\(var\(--color-brand\)\/0\.17\)\] {
+  .dark\:hover\:text-\[color-mix\(in_srgb\,var\(--brand\)_78\%\,\#fff\)\] {
     @media (prefers-color-scheme: dark) {
       &:hover {
         @media (hover: hover) {
-          background-color: rgb(var(--color-brand)/0.17);
+          color: var(--brand);
+          @supports (color: color-mix(in lab, red, red)) {
+            color: color-mix(in srgb,var(--brand) 78%,#fff);
+          }
         }
       }
     }
   }
-  .dark\:hover\:bg-white\/\[0\.06\] {
+  .dark\:hover\:text-foreground {
     @media (prefers-color-scheme: dark) {
       &:hover {
         @media (hover: hover) {
-          background-color: color-mix(in srgb, #fff 6%, transparent);
-          @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--color-white) 6%, transparent);
-          }
+          color: var(--color-foreground);
         }
       }
     }
@@ -3350,6 +3723,30 @@ h2.react-datepicker__current-month {
       }
     }
   }
+  .\[\&_\[data-slot\=modal-description\]\]\:text-sm {
+    & [data-slot=modal-description] {
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+    }
+  }
+  .\[\&_\[data-slot\=modal-description\]\]\:text-xs {
+    & [data-slot=modal-description] {
+      font-size: var(--text-xs);
+      line-height: var(--tw-leading, var(--text-xs--line-height));
+    }
+  }
+  .\[\&_\[data-slot\=modal-title\]\]\:text-base {
+    & [data-slot=modal-title] {
+      font-size: var(--text-base);
+      line-height: var(--tw-leading, var(--text-base--line-height));
+    }
+  }
+  .\[\&_\[data-slot\=modal-title\]\]\:text-lg {
+    & [data-slot=modal-title] {
+      font-size: var(--text-lg);
+      line-height: var(--tw-leading, var(--text-lg--line-height));
+    }
+  }
   .\[\&_svg\]\:size-3\.5 {
     & svg {
       width: calc(var(--spacing) * 3.5);
@@ -3374,6 +3771,11 @@ h2.react-datepicker__current-month {
       height: 1.125rem;
     }
   }
+  .\[\&_svg\]\:stroke-\[2\.6\] {
+    & svg {
+      stroke-width: 2.6;
+    }
+  }
   .\[\&_td\]\:py-2 {
     & td {
       padding-block: calc(var(--spacing) * 2);
@@ -3498,6 +3900,22 @@ h2.react-datepicker__current-month {
   --sidebar-background: var(--surface);
   --destructive: #ef4444;
   --input-bg: var(--light-input-bg, #eceef5);
+  --status-info-bg: #dbeafe;
+  --status-info-border: #60a5fa;
+  --status-info-text: #172554;
+  --status-info-icon: #1d4ed8;
+  --status-success-bg: #d1fae5;
+  --status-success-border: #34d399;
+  --status-success-text: #064e3b;
+  --status-success-icon: #047857;
+  --status-warning-bg: #fef3c7;
+  --status-warning-border: #f59e0b;
+  --status-warning-text: #78350f;
+  --status-warning-icon: #b45309;
+  --status-danger-bg: #fee2e2;
+  --status-danger-border: #f87171;
+  --status-danger-text: #7f1d1d;
+  --status-danger-icon: #dc2626;
   --radius: 0.5rem;
 }
 .dark {
@@ -3510,6 +3928,130 @@ h2.react-datepicker__current-month {
   --app-border: var(--dark-app-border, #2a245a);
   --input-bg: var(--dark-input-bg, #161138);
   --sidebar-background: var(--surface);
+  --status-info-bg: color-mix(in srgb, #3b82f6 16%, transparent);
+  --status-info-border: color-mix(in srgb, #60a5fa 34%, transparent);
+  --status-info-text: #dbeafe;
+  --status-info-icon: #93c5fd;
+  --status-success-bg: color-mix(in srgb, #10b981 16%, transparent);
+  --status-success-border: color-mix(in srgb, #34d399 34%, transparent);
+  --status-success-text: #d1fae5;
+  --status-success-icon: #6ee7b7;
+  --status-warning-bg: color-mix(in srgb, #f59e0b 16%, transparent);
+  --status-warning-border: color-mix(in srgb, #fbbf24 38%, transparent);
+  --status-warning-text: #fef3c7;
+  --status-warning-icon: #fcd34d;
+  --status-danger-bg: color-mix(in srgb, #ef4444 16%, transparent);
+  --status-danger-border: color-mix(in srgb, #f87171 38%, transparent);
+  --status-danger-text: #fee2e2;
+  --status-danger-icon: #fca5a5;
+}
+.app-page-message--default {
+  border-color: var(--app-border);
+  background-color: var(--surface);
+  color: var(--foreground);
+}
+.app-page-message--info {
+  border-color: var(--status-info-border);
+  background-color: var(--status-info-bg);
+  color: var(--status-info-text);
+}
+.app-page-message--success {
+  border-color: var(--status-success-border);
+  background-color: var(--status-success-bg);
+  color: var(--status-success-text);
+}
+.app-page-message--warning {
+  border-color: var(--status-warning-border);
+  background-color: var(--status-warning-bg);
+  color: var(--status-warning-text);
+}
+.app-page-message--danger {
+  border-color: var(--status-danger-border);
+  background-color: var(--status-danger-bg);
+  color: var(--status-danger-text);
+}
+.app-page-message__icon--default {
+  color: var(--foreground-muted);
+}
+.app-page-message__icon--info {
+  color: var(--status-info-icon);
+}
+.app-page-message__icon--success {
+  color: var(--status-success-icon);
+}
+.app-page-message__icon--warning {
+  color: var(--status-warning-icon);
+}
+.app-page-message__icon--danger {
+  color: var(--status-danger-icon);
+}
+.app-stat-card--default {
+  border-color: var(--app-border);
+  background-color: var(--surface);
+}
+.app-stat-card--info {
+  border-color: var(--status-info-border);
+  background-color: var(--status-info-bg);
+}
+.app-stat-card--success {
+  border-color: var(--status-success-border);
+  background-color: var(--status-success-bg);
+}
+.app-stat-card--warning {
+  border-color: var(--status-warning-border);
+  background-color: var(--status-warning-bg);
+}
+.app-stat-card--danger {
+  border-color: var(--status-danger-border);
+  background-color: var(--status-danger-bg);
+}
+.app-stat-card__label--default,
+.app-stat-card__description--default,
+.app-stat-card__icon--default {
+  color: var(--foreground-muted);
+}
+.app-stat-card__value--default {
+  color: var(--foreground);
+}
+.app-stat-card__label--info,
+.app-stat-card__description--info {
+  color: var(--status-info-text);
+}
+.app-stat-card__value--info {
+  color: var(--status-info-text);
+}
+.app-stat-card__icon--info {
+  color: var(--status-info-icon);
+}
+.app-stat-card__label--success,
+.app-stat-card__description--success {
+  color: var(--status-success-text);
+}
+.app-stat-card__value--success {
+  color: var(--status-success-text);
+}
+.app-stat-card__icon--success {
+  color: var(--status-success-icon);
+}
+.app-stat-card__label--warning,
+.app-stat-card__description--warning {
+  color: var(--status-warning-text);
+}
+.app-stat-card__value--warning {
+  color: var(--status-warning-text);
+}
+.app-stat-card__icon--warning {
+  color: var(--status-warning-icon);
+}
+.app-stat-card__label--danger,
+.app-stat-card__description--danger {
+  color: var(--status-danger-text);
+}
+.app-stat-card__value--danger {
+  color: var(--status-danger-text);
+}
+.app-stat-card__icon--danger {
+  color: var(--status-danger-icon);
 }
 .app-datepicker-popper {
   z-index: 9999 !important;