From b323862e034023dce560c59f34fa575d93cd587b Mon Sep 17 00:00:00 2001
From: shaamilahmed <shaamilahmed@gmail.com>
Date: Mon, 13 Apr 2026 18:40:17 +0500
Subject: [PATCH] Migrating all validation to use HTMX and endpoints instead of
 WASM/Websocket connections

---
 .../Components/App.razor                      |   3 +
 .../Components/Pages/FormsDemo.razor          |  61 +-
 .../ContactFormModel.cs                       |  13 +
 .../ContactFormValidator.cs                   |  47 ++
 .../Program.cs                                |  22 +-
 .../FormsTests.cs                             |   2 +-
 .../ValidationTests.cs                        | 648 ++++++++++++++++++
 .../Enciphered.Blazor.UIComponents.csproj     |   1 +
 .../Forms/Button.razor                        |   9 -
 .../Forms/DateInput.razor                     |   4 +-
 .../Forms/DateTimeInput.razor                 |  12 +-
 .../Forms/FormField.razor                     |  26 +-
 .../Forms/HtmxForm.razor                      |  30 +
 .../Forms/InputBase.cs                        |  49 +-
 .../Forms/NumberInput.razor                   |   2 +-
 .../Forms/TextInput.razor                     |   6 +-
 .../Forms/TimeInput.razor                     |   9 +-
 .../Forms/Validation/FormModelBinder.cs       |  55 ++
 .../Forms/Validation/FormValidationRule.cs    |  71 ++
 .../Forms/Validation/FormValidator.cs         |  55 ++
 .../HtmxFormValidationExtensions.cs           |  79 +++
 .../Validation/HtmxFormValidationRenderer.cs  |  62 ++
 .../wwwroot/css/app.css                       |   2 +-
 .../wwwroot/js/forms.js                       | 123 ++--
 24 files changed, 1203 insertions(+), 188 deletions(-)
 create mode 100644 Enciphered.Blazor.UIComponents.Demo/ContactFormModel.cs
 create mode 100644 Enciphered.Blazor.UIComponents.Demo/ContactFormValidator.cs
 create mode 100644 Enciphered.Blazor.UIComponents.Tests/ValidationTests.cs
 create mode 100644 Enciphered.Blazor.UIComponents/Forms/HtmxForm.razor
 create mode 100644 Enciphered.Blazor.UIComponents/Forms/Validation/FormModelBinder.cs
 create mode 100644 Enciphered.Blazor.UIComponents/Forms/Validation/FormValidationRule.cs
 create mode 100644 Enciphered.Blazor.UIComponents/Forms/Validation/FormValidator.cs
 create mode 100644 Enciphered.Blazor.UIComponents/Forms/Validation/HtmxFormValidationExtensions.cs
 create mode 100644 Enciphered.Blazor.UIComponents/Forms/Validation/HtmxFormValidationRenderer.cs
diff --git a/Enciphered.Blazor.UIComponents.Demo/Components/App.razor b/Enciphered.Blazor.UIComponents.Demo/Components/App.razor
index 1bf5326..9d4937b 100644
--- a/Enciphered.Blazor.UIComponents.Demo/Components/App.razor
+++ b/Enciphered.Blazor.UIComponents.Demo/Components/App.razor
@@ -26,6 +26,9 @@
 <body class="min-h-svh antialiased bg-background text-foreground">
     <Routes />
     <script src="_framework/blazor.web.js"></script>
+    <script src="https://unpkg.com/htmx.org@2.0.4"
+            integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+"
+            crossorigin="anonymous"></script>
     <script type="module">
         import { init as initDarkMode } from '/_content/Enciphered.Blazor.UIComponents/js/darkmode.js';
         import { init as initSidebar } from '/_content/Enciphered.Blazor.UIComponents/js/sidebar.js';
diff --git a/Enciphered.Blazor.UIComponents.Demo/Components/Pages/FormsDemo.razor b/Enciphered.Blazor.UIComponents.Demo/Components/Pages/FormsDemo.razor
index 05dc6bc..5fd8755 100644
--- a/Enciphered.Blazor.UIComponents.Demo/Components/Pages/FormsDemo.razor
+++ b/Enciphered.Blazor.UIComponents.Demo/Components/Pages/FormsDemo.razor
@@ -5,45 +5,46 @@
 <div class="space-y-6 max-w-lg">
     <div>
         <h1 class="text-3xl font-bold tracking-tight">Forms Demo</h1>
-        <p class="text-muted-foreground">All input components — fully static SSR with JS interactivity.</p>
+        <p class="text-muted-foreground">All input components — fully static SSR with htmx validation.</p>
     </div>
 
-    <form>
+    <HtmxForm Endpoint="/api/forms/contact">
+        <FormField Label="Full Name" For="name">
+            <TextInput Id="name" Name="name" Placeholder="Jane Doe" data-testid="input-name" />
+        </FormField>
 
-        <div class="space-y-4">
-            <FormField Label="Full Name" For="name">
-                <TextInput Id="name" Name="name" Placeholder="Jane Doe" data-testid="input-name" />
-            </FormField>
+        <FormField Label="Email" For="email">
+            <TextInput Id="email" Name="email" Type="email" Placeholder="jane@example.com" data-testid="input-email" />
+        </FormField>
 
-            <FormField Label="Email" For="email">
-                <TextInput Id="email" Name="email" Type="email" Placeholder="jane@example.com" data-testid="input-email" />
-            </FormField>
+        <FormField Label="Password" For="password">
+            <TextInput Id="password" Name="password" Type="password" Placeholder="••••••••" data-testid="input-password" />
+        </FormField>
 
-            <FormField Label="Password" For="password">
-                <TextInput Id="password" Name="password" Type="password" Placeholder="••••••••" data-testid="input-password" />
-            </FormField>
+        <FormField Label="Age" For="age">
+            <NumberInput Id="age" Name="age" Placeholder="25" Min="0" Max="150" data-testid="input-age" />
+        </FormField>
 
-            <FormField Label="Age" For="age">
-                <NumberInput Id="age" Name="age" Placeholder="25" Min="0" Max="150" data-testid="input-age" />
-            </FormField>
+        <FormField Label="Birth Date" For="birthdate">
+            <DateInput Id="birthdate" Name="birthdate" data-testid="input-birthdate" />
+        </FormField>
 
-            <FormField Label="Birth Date" For="birthdate">
-                <DateInput Id="birthdate" Name="birthdate" data-testid="input-birthdate" />
-            </FormField>
+        <FormField Label="Preferred Time" For="preferredtime">
+            <TimeInput Id="preferredtime" Name="preferredtime" data-testid="input-time" />
+        </FormField>
 
-            <FormField Label="Preferred Time" For="preferredtime">
-                <TimeInput Id="preferredtime" Name="preferredtime" data-testid="input-time" />
-            </FormField>
+        <FormField Label="Appointment" For="appointment">
+            <DateTimeInput Id="appointment" Name="appointment" data-testid="input-appointment" />
+        </FormField>
 
-            <FormField Label="Appointment" For="appointment">
-                <DateTimeInput Id="appointment" Name="appointment" data-testid="input-appointment" />
-            </FormField>
+        <FormField Label="Confirmation" For="confirmation">
+            <TextInput Id="confirmation" Name="confirmation" Placeholder='Type "CONFIRM"' data-testid="input-confirmation" />
+        </FormField>
 
-            <div class="flex gap-2 pt-2">
-                <Button Type="submit" data-testid="btn-submit">Submit</Button>
-                <Button Type="reset" Variant="@ButtonVariant.Outline" data-testid="btn-reset">Reset</Button>
-                <Button Variant="@ButtonVariant.Destructive" Disabled="true" data-testid="btn-disabled">Disabled</Button>
-            </div>
+        <div class="flex gap-2 pt-2">
+            <Button Type="submit" data-testid="btn-submit">Submit</Button>
+            <Button Type="reset" Variant="@ButtonVariant.Outline" data-testid="btn-reset">Reset</Button>
+            <Button Variant="@ButtonVariant.Destructive" Disabled="true" data-testid="btn-disabled">Disabled</Button>
         </div>
-    </form>
+    </HtmxForm>
 </div>
diff --git a/Enciphered.Blazor.UIComponents.Demo/ContactFormModel.cs b/Enciphered.Blazor.UIComponents.Demo/ContactFormModel.cs
new file mode 100644
index 0000000..d133e41
--- /dev/null
+++ b/Enciphered.Blazor.UIComponents.Demo/ContactFormModel.cs
@@ -0,0 +1,13 @@
+namespace Enciphered.Blazor.UIComponents.Demo;
+
+public class ContactFormModel
+{
+    public string Name { get; set; } = "";
+    public string Email { get; set; } = "";
+    public string Password { get; set; } = "";
+    public int? Age { get; set; }
+    public DateOnly? Birthdate { get; set; }
+    public TimeOnly? Preferredtime { get; set; }
+    public DateTime? Appointment { get; set; }
+    public string Confirmation { get; set; } = "";
+}
diff --git a/Enciphered.Blazor.UIComponents.Demo/ContactFormValidator.cs b/Enciphered.Blazor.UIComponents.Demo/ContactFormValidator.cs
new file mode 100644
index 0000000..0e3bc03
--- /dev/null
+++ b/Enciphered.Blazor.UIComponents.Demo/ContactFormValidator.cs
@@ -0,0 +1,47 @@
+using Enciphered.Blazor.UIComponents.Validation;
+
+namespace Enciphered.Blazor.UIComponents.Demo;
+
+public class ContactFormValidator : FormValidator
+{
+    public ContactFormValidator()
+    {
+        RuleFor("name",
+            displayName: "Name",
+            required: true,
+            minLength: 2);
+
+        RuleFor("email",
+            displayName: "Email",
+            required: true,
+            pattern: @".+@.+\..+",
+            message: "Please enter a valid email address.");
+
+        RuleFor("password",
+            displayName: "Password",
+            required: true,
+            minLength: 6);
+
+        RuleFor("age",
+            displayName: "Age",
+            min: 0,
+            max: 150);
+
+        RuleFor("birthdate",
+            displayName: "Birth Date",
+            custom: value => !DateOnly.TryParse(value, out _) ? "Please enter a valid date." : null);
+
+        RuleFor("preferredtime",
+            displayName: "Preferred Time",
+            custom: value => !TimeOnly.TryParse(value, out _) ? "Please enter a valid time." : null);
+
+        RuleFor("appointment",
+            displayName: "Appointment",
+            custom: value => !DateTime.TryParse(value, out _) ? "Please enter a valid date and time." : null);
+
+        RuleFor("confirmation",
+            displayName: "Confirmation",
+            required: true,
+            custom: value => value != "CONFIRM" ? "You must type CONFIRM to proceed." : null);
+    }
+}
diff --git a/Enciphered.Blazor.UIComponents.Demo/Program.cs b/Enciphered.Blazor.UIComponents.Demo/Program.cs
index 12dde96..cb6256b 100644
--- a/Enciphered.Blazor.UIComponents.Demo/Program.cs
+++ b/Enciphered.Blazor.UIComponents.Demo/Program.cs
@@ -1,27 +1,41 @@
+using Enciphered.Blazor.UIComponents.Demo;
 using Enciphered.Blazor.UIComponents.Demo.Components;
+using Enciphered.Blazor.UIComponents.Validation;
 
 var builder = WebApplication.CreateBuilder(args);
 
-// Add services to the container.
 builder.Services.AddRazorComponents();
+builder.Services.AddAntiforgery();
 
 var app = builder.Build();
 
-// Configure the HTTP request pipeline.
 if (!app.Environment.IsDevelopment())
 {
     app.UseExceptionHandler("/Error", createScopeForErrors: true);
-    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
     app.UseHsts();
 }
 
 app.UseHttpsRedirection();
 
-
 app.UseAntiforgery();
 
 app.MapStaticAssets();
 app.MapRazorComponents<App>()
     .AddAdditionalAssemblies(typeof(Enciphered.Blazor.UIComponents.SidebarProvider).Assembly);
 
+app.MapFormValidation<ContactFormValidator, ContactFormModel>("/api/forms/contact",
+    onSuccess: async model =>
+    {
+        Console.WriteLine("── Form Submitted ──");
+        Console.WriteLine($"  Name:         {model.Name}");
+        Console.WriteLine($"  Email:        {model.Email}");
+        Console.WriteLine($"  Password:     {model.Password}");
+        Console.WriteLine($"  Age:          {model.Age}");
+        Console.WriteLine($"  Birth Date:   {model.Birthdate}");
+        Console.WriteLine($"  Time:         {model.Preferredtime}");
+        Console.WriteLine($"  Appointment:  {model.Appointment}");
+        Console.WriteLine($"  Confirmation: {model.Confirmation}");
+        await Task.CompletedTask;
+    });
+
 app.Run();
\ No newline at end of file
diff --git a/Enciphered.Blazor.UIComponents.Tests/FormsTests.cs b/Enciphered.Blazor.UIComponents.Tests/FormsTests.cs
index 1444c2c..7e87908 100644
--- a/Enciphered.Blazor.UIComponents.Tests/FormsTests.cs
+++ b/Enciphered.Blazor.UIComponents.Tests/FormsTests.cs
@@ -266,7 +266,7 @@ public class FormsTests : PlaywrightTestBase
 
         var labels = Page.Locator("label");
         var count = await labels.CountAsync();
-        Assert.That(count, Is.EqualTo(7), "Expected 7 labels (one per form field)");
+        Assert.That(count, Is.EqualTo(8), "Expected 8 labels (one per form field)");
     }
 
     [Test]
diff --git a/Enciphered.Blazor.UIComponents.Tests/ValidationTests.cs b/Enciphered.Blazor.UIComponents.Tests/ValidationTests.cs
new file mode 100644
index 0000000..50f0520
--- /dev/null
+++ b/Enciphered.Blazor.UIComponents.Tests/ValidationTests.cs
@@ -0,0 +1,648 @@
+using Microsoft.Playwright;
+
+namespace Enciphered.Blazor.UIComponents.Tests;
+
+/// <summary>
+/// Tests for htmx-powered server-side validation on the Forms Demo page.
+/// Covers: inline field validation on blur, full-form submission validation,
+/// success message display, error styling, and form reset clearing errors.
+/// </summary>
+[TestFixture]
+public class ValidationTests : PlaywrightTestBase
+{
+    // ── Helpers ──────────────────────────────────────────────────────────────
+
+    private async Task GoToFormsAsync()
+    {
+        await Page.GotoAsync($"{BaseUrl}/forms", new PageGotoOptions { WaitUntil = WaitUntilState.NetworkIdle });
+        await Page.WaitForSelectorAsync("[data-testid='btn-submit']", new PageWaitForSelectorOptions { Timeout = 10_000 });
+    }
+
+    private ILocator Input(string testId) => Page.Locator($"[data-testid='{testId}']");
+    private ILocator Btn(string testId) => Page.Locator($"[data-testid='{testId}']");
+
+    private ILocator FieldError(string fieldName) =>
+        Page.Locator($"[data-field-error='{fieldName}']");
+
+    /// <summary>
+    /// Focus an input, clear it, then blur to trigger htmx validation.
+    /// </summary>
+    private async Task BlurEmptyField(string testId)
+    {
+        var input = Input(testId);
+        await input.ClickAsync();
+        await input.FillAsync("");
+        await input.BlurAsync();
+        // Wait for htmx round-trip
+        await Page.WaitForTimeoutAsync(500);
+    }
+
+    /// <summary>
+    /// Fill a field and blur it.
+    /// </summary>
+    private async Task FillAndBlur(string testId, string value)
+    {
+        var input = Input(testId);
+        await input.ClickAsync();
+        await input.FillAsync(value);
+        await input.BlurAsync();
+        await Page.WaitForTimeoutAsync(500);
+    }
+
+    /// <summary>
+    /// Fill all required fields with valid data.
+    /// </summary>
+    private async Task FillAllValidFields()
+    {
+        await Input("input-name").FillAsync("Alice Johnson");
+        await Input("input-email").FillAsync("alice@example.com");
+        await Input("input-password").FillAsync("secure123");
+        await Input("input-confirmation").FillAsync("CONFIRM");
+    }
+
+    // ════════════════════════════════════════════════════════════════════════
+    //  Inline field validation — blur triggers
+    // ════════════════════════════════════════════════════════════════════════
+
+    [Test]
+    public async Task Name_Blank_Shows_Required_Error_On_Blur()
+    {
+        await GoToFormsAsync();
+        await BlurEmptyField("input-name");
+
+        var error = FieldError("name");
+        await Expect(error).ToBeVisibleAsync();
+        await Expect(error).ToHaveTextAsync("Name is required.");
+    }
+
+    [Test]
+    public async Task Name_Too_Short_Shows_Length_Error_On_Blur()
+    {
+        await GoToFormsAsync();
+        await FillAndBlur("input-name", "A");
+
+        var error = FieldError("name");
+        await Expect(error).ToBeVisibleAsync();
+        await Expect(error).ToHaveTextAsync("Name must be at least 2 characters.");
+    }
+
+    [Test]
+    public async Task Name_Valid_Clears_Error_On_Blur()
+    {
+        await GoToFormsAsync();
+
+        // Trigger an error first
+        await BlurEmptyField("input-name");
+        await Expect(FieldError("name")).ToBeVisibleAsync();
+
+        // Now fix it
+        await FillAndBlur("input-name", "Alice");
+
+        var error = FieldError("name");
+        await Expect(error).ToBeHiddenAsync();
+    }
+
+    [Test]
+    public async Task Email_Blank_Shows_Required_Error_On_Blur()
+    {
+        await GoToFormsAsync();
+        await BlurEmptyField("input-email");
+
+        var error = FieldError("email");
+        await Expect(error).ToBeVisibleAsync();
+        await Expect(error).ToHaveTextAsync("Email is required.");
+    }
+
+    [Test]
+    public async Task Email_Invalid_Shows_Format_Error_On_Blur()
+    {
+        await GoToFormsAsync();
+        await FillAndBlur("input-email", "notanemail");
+
+        var error = FieldError("email");
+        await Expect(error).ToBeVisibleAsync();
+        await Expect(error).ToHaveTextAsync("Please enter a valid email address.");
+    }
+
+    [Test]
+    public async Task Email_Valid_Clears_Error_On_Blur()
+    {
+        await GoToFormsAsync();
+        await BlurEmptyField("input-email");
+        await Expect(FieldError("email")).ToBeVisibleAsync();
+
+        await FillAndBlur("input-email", "alice@example.com");
+        await Expect(FieldError("email")).ToBeHiddenAsync();
+    }
+
+    [Test]
+    public async Task Password_Blank_Shows_Required_Error_On_Blur()
+    {
+        await GoToFormsAsync();
+        await BlurEmptyField("input-password");
+
+        var error = FieldError("password");
+        await Expect(error).ToBeVisibleAsync();
+        await Expect(error).ToHaveTextAsync("Password is required.");
+    }
+
+    [Test]
+    public async Task Password_Too_Short_Shows_Length_Error_On_Blur()
+    {
+        await GoToFormsAsync();
+        await FillAndBlur("input-password", "abc");
+
+        var error = FieldError("password");
+        await Expect(error).ToBeVisibleAsync();
+        await Expect(error).ToHaveTextAsync("Password must be at least 6 characters.");
+    }
+
+    [Test]
+    public async Task Password_Valid_Clears_Error_On_Blur()
+    {
+        await GoToFormsAsync();
+        await BlurEmptyField("input-password");
+        await Expect(FieldError("password")).ToBeVisibleAsync();
+
+        await FillAndBlur("input-password", "secure123");
+        await Expect(FieldError("password")).ToBeHiddenAsync();
+    }
+
+    // ════════════════════════════════════════════════════════════════════════
+    //  Input gets destructive border styling on error
+    // ════════════════════════════════════════════════════════════════════════
+
+    [Test]
+    public async Task Input_Gets_Destructive_Border_On_Error()
+    {
+        await GoToFormsAsync();
+        await BlurEmptyField("input-name");
+
+        var cls = await Input("input-name").GetAttributeAsync("class");
+        Assert.That(cls, Does.Contain("border-destructive"), "Input should have destructive border on error");
+    }
+
+    [Test]
+    public async Task Input_Loses_Destructive_Border_When_Valid()
+    {
+        await GoToFormsAsync();
+        await BlurEmptyField("input-name");
+
+        // Verify error styling is present
+        var clsBefore = await Input("input-name").GetAttributeAsync("class");
+        Assert.That(clsBefore, Does.Contain("border-destructive"));
+
+        // Fix the field
+        await FillAndBlur("input-name", "Alice");
+
+        var clsAfter = await Input("input-name").GetAttributeAsync("class");
+        Assert.That(clsAfter, Does.Not.Contain("border-destructive"), "Input should lose destructive border when valid");
+    }
+
+    // ════════════════════════════════════════════════════════════════════════
+    //  Full form submission validation
+    // ════════════════════════════════════════════════════════════════════════
+
+    [Test]
+    public async Task Empty_Submit_Shows_All_Required_Errors()
+    {
+        await GoToFormsAsync();
+
+        await Btn("btn-submit").ClickAsync();
+        await Page.WaitForTimeoutAsync(500);
+
+        // Name, email, and password should show errors
+        await Expect(FieldError("name")).ToBeVisibleAsync();
+        await Expect(FieldError("email")).ToBeVisibleAsync();
+        await Expect(FieldError("password")).ToBeVisibleAsync();
+    }
+
+    [Test]
+    public async Task Valid_Submit_Shows_Success_Message()
+    {
+        await GoToFormsAsync();
+
+        await FillAllValidFields();
+
+        await Btn("btn-submit").ClickAsync();
+        await Page.WaitForTimeoutAsync(500);
+
+        var success = Page.Locator("[data-testid='success-message']");
+        await Expect(success).ToBeVisibleAsync();
+        await Expect(success).ToContainTextAsync("Form submitted successfully");
+    }
+
+    [Test]
+    public async Task Valid_Submit_Clears_All_Errors()
+    {
+        await GoToFormsAsync();
+
+        // First trigger errors
+        await Btn("btn-submit").ClickAsync();
+        await Page.WaitForTimeoutAsync(500);
+        await Expect(FieldError("name")).ToBeVisibleAsync();
+
+        // Now fill valid data and resubmit
+        await FillAllValidFields();
+
+        await Btn("btn-submit").ClickAsync();
+        await Page.WaitForTimeoutAsync(500);
+
+        await Expect(FieldError("name")).ToBeHiddenAsync();
+        await Expect(FieldError("email")).ToBeHiddenAsync();
+        await Expect(FieldError("password")).ToBeHiddenAsync();
+        await Expect(FieldError("confirmation")).ToBeHiddenAsync();
+    }
+
+    [Test]
+    public async Task Partial_Submit_Shows_Only_Invalid_Errors()
+    {
+        await GoToFormsAsync();
+
+        // Fill name only
+        await Input("input-name").FillAsync("Alice");
+
+        await Btn("btn-submit").ClickAsync();
+        await Page.WaitForTimeoutAsync(500);
+
+        // Name should be clear, email and password should show errors
+        await Expect(FieldError("name")).ToBeHiddenAsync();
+        await Expect(FieldError("email")).ToBeVisibleAsync();
+        await Expect(FieldError("password")).ToBeVisibleAsync();
+    }
+
+    // ════════════════════════════════════════════════════════════════════════
+    //  Reset clears validation state
+    // ════════════════════════════════════════════════════════════════════════
+
+    [Test]
+    public async Task Reset_Clears_Validation_Errors()
+    {
+        await GoToFormsAsync();
+
+        // Trigger errors
+        await Btn("btn-submit").ClickAsync();
+        await Page.WaitForTimeoutAsync(500);
+        await Expect(FieldError("name")).ToBeVisibleAsync();
+
+        // Reset the form
+        await Btn("btn-reset").ClickAsync();
+        await Page.WaitForTimeoutAsync(300);
+
+        await Expect(FieldError("name")).ToBeHiddenAsync();
+        await Expect(FieldError("email")).ToBeHiddenAsync();
+        await Expect(FieldError("password")).ToBeHiddenAsync();
+    }
+
+    [Test]
+    public async Task Reset_Clears_Success_Message()
+    {
+        await GoToFormsAsync();
+
+        // Submit valid form
+        await FillAllValidFields();
+        await Btn("btn-submit").ClickAsync();
+        await Page.WaitForTimeoutAsync(500);
+        await Expect(Page.Locator("[data-testid='success-message']")).ToBeVisibleAsync();
+
+        // Reset
+        await Btn("btn-reset").ClickAsync();
+        await Page.WaitForTimeoutAsync(300);
+
+        var result = Page.Locator("#form-result");
+        await Expect(result).ToBeHiddenAsync();
+    }
+
+    [Test]
+    public async Task Reset_Removes_Destructive_Border_Styling()
+    {
+        await GoToFormsAsync();
+
+        // Trigger error on name
+        await BlurEmptyField("input-name");
+        var clsBefore = await Input("input-name").GetAttributeAsync("class");
+        Assert.That(clsBefore, Does.Contain("border-destructive"));
+
+        // Reset
+        await Btn("btn-reset").ClickAsync();
+        await Page.WaitForTimeoutAsync(300);
+
+        var clsAfter = await Input("input-name").GetAttributeAsync("class");
+        Assert.That(clsAfter, Does.Not.Contain("border-destructive"));
+    }
+
+    // ════════════════════════════════════════════════════════════════════════
+    //  Error elements exist for htmx targeting
+    // ════════════════════════════════════════════════════════════════════════
+
+    [Test]
+    public async Task FormField_Renders_Hidden_Error_Placeholder()
+    {
+        await GoToFormsAsync();
+
+        // Each form field should have a hidden [data-field-error] element
+        var nameError = FieldError("name");
+        await Expect(nameError).ToHaveCountAsync(1);
+        await Expect(nameError).ToBeHiddenAsync();
+
+        var emailError = FieldError("email");
+        await Expect(emailError).ToHaveCountAsync(1);
+        await Expect(emailError).ToBeHiddenAsync();
+    }
+
+    // ════════════════════════════════════════════════════════════════════════
+    //  Custom validator — confirmation field must equal "CONFIRM"
+    // ════════════════════════════════════════════════════════════════════════
+
+    [Test]
+    public async Task Confirmation_Blank_Shows_Required_Error_On_Blur()
+    {
+        await GoToFormsAsync();
+        await BlurEmptyField("input-confirmation");
+
+        var error = FieldError("confirmation");
+        await Expect(error).ToBeVisibleAsync();
+        await Expect(error).ToHaveTextAsync("Confirmation is required.");
+    }
+
+    [Test]
+    public async Task Confirmation_Wrong_Value_Shows_Custom_Error_On_Blur()
+    {
+        await GoToFormsAsync();
+        await FillAndBlur("input-confirmation", "nope");
+
+        var error = FieldError("confirmation");
+        await Expect(error).ToBeVisibleAsync();
+        await Expect(error).ToHaveTextAsync("You must type CONFIRM to proceed.");
+    }
+
+    [Test]
+    public async Task Confirmation_Correct_Value_Clears_Error_On_Blur()
+    {
+        await GoToFormsAsync();
+
+        // Trigger error first
+        await FillAndBlur("input-confirmation", "wrong");
+        await Expect(FieldError("confirmation")).ToBeVisibleAsync();
+
+        // Now fix it
+        await FillAndBlur("input-confirmation", "CONFIRM");
+        await Expect(FieldError("confirmation")).ToBeHiddenAsync();
+    }
+
+    [Test]
+    public async Task Confirmation_Error_Shows_On_Submit()
+    {
+        await GoToFormsAsync();
+
+        // Fill everything except confirmation
+        await Input("input-name").FillAsync("Alice Johnson");
+        await Input("input-email").FillAsync("alice@example.com");
+        await Input("input-password").FillAsync("secure123");
+
+        await Btn("btn-submit").ClickAsync();
+        await Page.WaitForTimeoutAsync(500);
+
+        await Expect(FieldError("confirmation")).ToBeVisibleAsync();
+        await Expect(FieldError("confirmation")).ToHaveTextAsync("Confirmation is required.");
+    }
+
+    // ════════════════════════════════════════════════════════════════════════
+    //  Date/Time/DateTime validation
+    // ════════════════════════════════════════════════════════════════════════
+
+    private async Task SetHiddenInputValue(string inputId, string value)
+    {
+        await Page.EvaluateAsync($@"
+            const el = document.getElementById('{inputId}');
+            if (el) {{
+                el.value = '{value}';
+                el.dispatchEvent(new Event('change', {{ bubbles: true }}));
+            }}
+        ");
+    }
+
+    private ILocator PopoverPanelFor(string triggerId) =>
+        Page.Locator($"[data-testid='{triggerId}']")
+            .Locator("xpath=ancestor::*[@data-popover]")
+            .Locator("[data-popover-panel]");
+
+    private ILocator PopoverBackdropFor(string triggerId) =>
+        Page.Locator($"[data-testid='{triggerId}']")
+            .Locator("xpath=ancestor::*[@data-popover]")
+            .Locator("[data-popover-backdrop]");
+
+    private async Task SelectDateAsync(string triggerId, DateOnly target)
+    {
+        await Page.Locator($"[data-testid='{triggerId}']").ClickAsync();
+        await Page.WaitForTimeoutAsync(300);
+
+        var panel = PopoverPanelFor(triggerId);
+
+        var yearButton = panel.Locator("[data-calendar-year]");
+        await yearButton.ClickAsync();
+        await Page.WaitForTimeoutAsync(150);
+
+        var yearGrid = panel.Locator(".grid.grid-cols-4");
+        var targetYearBtn = yearGrid.Locator($"button:has-text('{target.Year}')");
+        var attempts = 0;
+        while (await targetYearBtn.CountAsync() == 0 && attempts < 10)
+        {
+            var firstYearText = await yearGrid.Locator("button").First.InnerTextAsync();
+            var firstYear = int.Parse(firstYearText.Trim());
+            if (target.Year < firstYear)
+                await panel.Locator("button[aria-label='Previous month']").ClickAsync();
+            else
+                await panel.Locator("button[aria-label='Next month']").ClickAsync();
+            await Page.WaitForTimeoutAsync(100);
+            yearGrid = panel.Locator(".grid.grid-cols-4");
+            targetYearBtn = yearGrid.Locator($"button:has-text('{target.Year}')");
+            attempts++;
+        }
+        await targetYearBtn.First.ClickAsync();
+        await Page.WaitForTimeoutAsync(150);
+
+        var monthButton = panel.Locator("[data-calendar-month]");
+        await monthButton.ClickAsync();
+        await Page.WaitForTimeoutAsync(150);
+        var monthGrid = panel.Locator(".grid.grid-cols-3");
+        var targetMonthText = new DateOnly(2000, target.Month, 1).ToString("MMM");
+        await monthGrid.Locator($"button:has-text('{targetMonthText}')").First.ClickAsync();
+        await Page.WaitForTimeoutAsync(150);
+
+        var dayGrid = panel.Locator(".grid.grid-cols-7").Last;
+        var dayButton = dayGrid.Locator("button:not([disabled])").Filter(new LocatorFilterOptions { HasTextString = target.Day.ToString() }).First;
+        await dayButton.ClickAsync();
+        await Page.WaitForTimeoutAsync(300);
+    }
+
+    private async Task SelectTimeAsync(string triggerId, int hour, int minute)
+    {
+        await Page.Locator($"[data-testid='{triggerId}']").ClickAsync();
+        await Page.WaitForTimeoutAsync(300);
+
+        var panel = PopoverPanelFor(triggerId);
+
+        var isPm = hour >= 12;
+        var hour12 = hour % 12;
+        if (hour12 == 0) hour12 = 12;
+
+        var hourColumn = panel.Locator(".scrollbar-thin").First;
+        await hourColumn.Locator($"button:has-text('{hour12:D2}')").First.ClickAsync();
+        await Page.WaitForTimeoutAsync(50);
+
+        var minuteColumn = panel.Locator(".scrollbar-thin").Nth(1);
+        await minuteColumn.Locator($"button:has-text('{minute:D2}')").First.ClickAsync();
+        await Page.WaitForTimeoutAsync(50);
+
+        var periodText = isPm ? "PM" : "AM";
+        await panel.Locator($"button:has-text('{periodText}')").First.ClickAsync();
+        await Page.WaitForTimeoutAsync(50);
+
+        var backdrop = PopoverBackdropFor(triggerId);
+        await backdrop.ClickAsync(new LocatorClickOptions { Force = true });
+        await Page.WaitForTimeoutAsync(200);
+    }
+
+    [Test]
+    public async Task BirthDate_Selected_Via_Popover_Submits_Successfully()
+    {
+        await GoToFormsAsync();
+
+        await FillAllValidFields();
+        await SelectDateAsync("trigger-birthdate", new DateOnly(2000, 6, 15));
+
+        await Btn("btn-submit").ClickAsync();
+        await Page.WaitForTimeoutAsync(500);
+
+        var success = Page.Locator("[data-testid='success-message']");
+        await Expect(success).ToBeVisibleAsync();
+        await Expect(FieldError("birthdate")).ToBeHiddenAsync();
+    }
+
+    [Test]
+    public async Task PreferredTime_Selected_Via_Popover_Submits_Successfully()
+    {
+        await GoToFormsAsync();
+
+        await FillAllValidFields();
+        await SelectTimeAsync("trigger-preferredtime", 14, 30);
+
+        await Btn("btn-submit").ClickAsync();
+        await Page.WaitForTimeoutAsync(500);
+
+        var success = Page.Locator("[data-testid='success-message']");
+        await Expect(success).ToBeVisibleAsync();
+        await Expect(FieldError("preferredtime")).ToBeHiddenAsync();
+    }
+
+    [Test]
+    public async Task Appointment_Date_And_Time_Selected_Via_Popover_Submits_Successfully()
+    {
+        await GoToFormsAsync();
+
+        await FillAllValidFields();
+        await SelectDateAsync("trigger-appointment-date", new DateOnly(2025, 12, 25));
+        await SelectTimeAsync("trigger-appointment-time", 10, 30);
+
+        await Btn("btn-submit").ClickAsync();
+        await Page.WaitForTimeoutAsync(500);
+
+        var success = Page.Locator("[data-testid='success-message']");
+        await Expect(success).ToBeVisibleAsync();
+        await Expect(FieldError("appointment")).ToBeHiddenAsync();
+    }
+
+    [Test]
+    public async Task BirthDate_Hidden_Input_Gets_Correct_Value_After_Selection()
+    {
+        await GoToFormsAsync();
+
+        await SelectDateAsync("trigger-birthdate", new DateOnly(1995, 3, 20));
+
+        var value = await Page.Locator("#birthdate").InputValueAsync();
+        Assert.That(value, Is.EqualTo("1995-03-20"));
+    }
+
+    [Test]
+    public async Task PreferredTime_Hidden_Input_Gets_Correct_Value_After_Selection()
+    {
+        await GoToFormsAsync();
+
+        await SelectTimeAsync("trigger-preferredtime", 9, 15);
+
+        var value = await Page.Locator("#preferredtime").InputValueAsync();
+        Assert.That(value, Is.EqualTo("09:15"));
+    }
+
+    [Test]
+    public async Task Submit_With_Valid_Date_Time_DateTime_Via_Hidden_Input_Succeeds()
+    {
+        await GoToFormsAsync();
+
+        await FillAllValidFields();
+        await SetHiddenInputValue("birthdate", "2000-06-15");
+        await SetHiddenInputValue("preferredtime", "14:30");
+        await SetHiddenInputValue("appointment", "2025-12-25T10:30");
+
+        await Btn("btn-submit").ClickAsync();
+        await Page.WaitForTimeoutAsync(500);
+
+        var success = Page.Locator("[data-testid='success-message']");
+        await Expect(success).ToBeVisibleAsync();
+        await Expect(success).ToContainTextAsync("Form submitted successfully");
+    }
+
+    [Test]
+    public async Task Submit_With_Empty_Optional_DateTime_Fields_Succeeds()
+    {
+        await GoToFormsAsync();
+
+        await FillAllValidFields();
+
+        await Btn("btn-submit").ClickAsync();
+        await Page.WaitForTimeoutAsync(500);
+
+        var success = Page.Locator("[data-testid='success-message']");
+        await Expect(success).ToBeVisibleAsync();
+
+        await Expect(FieldError("birthdate")).ToBeHiddenAsync();
+        await Expect(FieldError("preferredtime")).ToBeHiddenAsync();
+        await Expect(FieldError("appointment")).ToBeHiddenAsync();
+    }
+
+    [Test]
+    public async Task Submit_All_Fields_Including_DateTime_Shows_Success()
+    {
+        await GoToFormsAsync();
+
+        await FillAllValidFields();
+        await SelectDateAsync("trigger-birthdate", new DateOnly(1990, 1, 15));
+        await SelectTimeAsync("trigger-preferredtime", 16, 0);
+        await SelectDateAsync("trigger-appointment-date", new DateOnly(2026, 6, 1));
+        await SelectTimeAsync("trigger-appointment-time", 9, 0);
+
+        await Btn("btn-submit").ClickAsync();
+        await Page.WaitForTimeoutAsync(500);
+
+        var success = Page.Locator("[data-testid='success-message']");
+        await Expect(success).ToBeVisibleAsync();
+        await Expect(success).ToContainTextAsync("Form submitted successfully");
+    }
+
+    [Test]
+    public async Task Reset_Clears_DateTime_Error_Placeholders()
+    {
+        await GoToFormsAsync();
+
+        await Btn("btn-submit").ClickAsync();
+        await Page.WaitForTimeoutAsync(500);
+
+        await Btn("btn-reset").ClickAsync();
+        await Page.WaitForTimeoutAsync(300);
+
+        await Expect(FieldError("birthdate")).ToBeHiddenAsync();
+        await Expect(FieldError("preferredtime")).ToBeHiddenAsync();
+        await Expect(FieldError("appointment")).ToBeHiddenAsync();
+    }
+}
diff --git a/Enciphered.Blazor.UIComponents/Enciphered.Blazor.UIComponents.csproj b/Enciphered.Blazor.UIComponents/Enciphered.Blazor.UIComponents.csproj
index e60cbc4..a237c0e 100644
--- a/Enciphered.Blazor.UIComponents/Enciphered.Blazor.UIComponents.csproj
+++ b/Enciphered.Blazor.UIComponents/Enciphered.Blazor.UIComponents.csproj
@@ -15,6 +15,7 @@
   </ItemGroup>
 
   <ItemGroup>
+    <FrameworkReference Include="Microsoft.AspNetCore.App" />
     <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="9.0.14" />
   </ItemGroup>
 
diff --git a/Enciphered.Blazor.UIComponents/Forms/Button.razor b/Enciphered.Blazor.UIComponents/Forms/Button.razor
index fc6326c..da3a53f 100644
--- a/Enciphered.Blazor.UIComponents/Forms/Button.razor
+++ b/Enciphered.Blazor.UIComponents/Forms/Button.razor
@@ -17,16 +17,7 @@
     [Parameter] public string Type { get; set; } = "button";
     [Parameter] public bool Disabled { get; set; }
 
-    /// <summary>
-    /// Visual variant — accepts any <see cref="ButtonVariant"/> constant
-    /// or a custom Tailwind class string.
-    /// </summary>
     [Parameter] public string Variant { get; set; } = ButtonVariant.Default;
-
-    /// <summary>
-    /// Size preset — accepts any <see cref="ButtonSize"/> constant
-    /// or a custom Tailwind class string.
-    /// </summary>
     [Parameter] public string Size { get; set; } = ButtonSize.Default;
 
     [Parameter] public string? Class { get; set; }
diff --git a/Enciphered.Blazor.UIComponents/Forms/DateInput.razor b/Enciphered.Blazor.UIComponents/Forms/DateInput.razor
index a07ee97..4ccfea2 100644
--- a/Enciphered.Blazor.UIComponents/Forms/DateInput.razor
+++ b/Enciphered.Blazor.UIComponents/Forms/DateInput.razor
@@ -1,7 +1,6 @@
 @namespace Enciphered.Blazor.UIComponents
 @inherits InputBase<DateOnly?>
 
-@* Hidden native input preserves form semantics, name, id, and data-testid for tests *@
 <input type="date"
        id="@Id"
        name="@Name"
@@ -12,7 +11,7 @@
        tabindex="-1"
        aria-hidden="true"
        disabled="@Disabled"
-       @attributes="AdditionalAttributes" />
+       @attributes="MergedAttributes" />
 
 <Popover>
     <Trigger>
@@ -20,7 +19,6 @@
                 disabled="@Disabled"
                 data-testid="@($"trigger-{Id}")"
                 class="@TriggerClass">
-            @* Lucide calendar icon *@
             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                  fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                  class="mr-2 shrink-0 text-muted-foreground">
diff --git a/Enciphered.Blazor.UIComponents/Forms/DateTimeInput.razor b/Enciphered.Blazor.UIComponents/Forms/DateTimeInput.razor
index 846e360..37b6d34 100644
--- a/Enciphered.Blazor.UIComponents/Forms/DateTimeInput.razor
+++ b/Enciphered.Blazor.UIComponents/Forms/DateTimeInput.razor
@@ -1,7 +1,6 @@
 @namespace Enciphered.Blazor.UIComponents
 @inherits InputBase<DateTime?>
 
-@* Hidden native input preserves form semantics, name, id, and data-testid for tests *@
 <input type="datetime-local"
        id="@Id"
        name="@Name"
@@ -10,9 +9,8 @@
        tabindex="-1"
        aria-hidden="true"
        disabled="@Disabled"
-       @attributes="AdditionalAttributes" />
+       @attributes="MergedAttributes" />
 
-@* Hidden helper inputs for JS to write date/time portions separately *@
 <input type="hidden" id="@($"{Id}-date-part")"
        value="@(SelectedDateOnly?.ToString("yyyy-MM-dd") ?? "")"
        data-trigger-id="@($"trigger-{Id}-date")"
@@ -26,16 +24,13 @@
        data-datetime-part="time"
        data-datetime-input-id="@Id" />
 
-@* ── Two side-by-side triggers: date field + time field ── *@
 <div class="flex gap-2">
-    @* ── Date portion ── *@
     <Popover>
         <Trigger>
             <button type="button"
                     disabled="@Disabled"
                     data-testid="@($"trigger-{Id}-date")"
                     class="@TriggerClass">
-                @* Lucide calendar icon *@
                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                      fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                      class="mr-2 shrink-0 text-muted-foreground">
@@ -53,14 +48,12 @@
         </Content>
     </Popover>
 
-    @* ── Time portion ── *@
     <Popover>
         <Trigger>
             <button type="button"
                     disabled="@Disabled"
                     data-testid="@($"trigger-{Id}-time")"
                     class="@TriggerClass">
-                @* Lucide clock icon *@
                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                      fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                      class="mr-2 shrink-0 text-muted-foreground">
@@ -82,9 +75,6 @@
     [Parameter] public string? Min { get; set; }
     [Parameter] public string? Max { get; set; }
 
-    /// <summary>
-    /// Step in seconds. Use "1" for second precision, "60" (default) for minutes only.
-    /// </summary>
     [Parameter] public string? Step { get; set; }
 
     private DateOnly? SelectedDateOnly =>
diff --git a/Enciphered.Blazor.UIComponents/Forms/FormField.razor b/Enciphered.Blazor.UIComponents/Forms/FormField.razor
index 0000beb..3e6b9c1 100644
--- a/Enciphered.Blazor.UIComponents/Forms/FormField.razor
+++ b/Enciphered.Blazor.UIComponents/Forms/FormField.razor
@@ -1,6 +1,6 @@
 @namespace Enciphered.Blazor.UIComponents
 
-<div class="@ComputedClass">
+<div class="@ComputedClass" data-form-field="@For">
     @if (!string.IsNullOrEmpty(Label))
     {
         <label for="@For"
@@ -9,7 +9,9 @@
         </label>
     }
 
-    @ChildContent
+    <CascadingValue Value="@For" Name="FieldName">
+        @ChildContent
+    </CascadingValue>
 
     @if (!string.IsNullOrEmpty(Description))
     {
@@ -18,33 +20,23 @@
 
     @if (!string.IsNullOrEmpty(Error))
     {
-        <p class="text-[0.8rem] font-medium text-destructive">@Error</p>
+        <p data-field-error="@For" class="text-[0.8rem] font-medium text-destructive">@Error</p>
+    }
+    else
+    {
+        <p data-field-error="@For" class="text-[0.8rem] font-medium text-destructive hidden"></p>
     }
 </div>
 
 @code {
-    /// <summary>Label text displayed above the input.</summary>
     [Parameter] public string? Label { get; set; }
-
-    /// <summary>The id of the associated input (for the label's "for" attribute).</summary>
     [Parameter] public string? For { get; set; }
-
-    /// <summary>Help text displayed below the input.</summary>
     [Parameter] public string? Description { get; set; }
-
-    /// <summary>Validation error message displayed below the input.</summary>
     [Parameter] public string? Error { get; set; }
-
-    /// <summary>The input component(s) to render inside the field.</summary>
     [Parameter] public RenderFragment? ChildContent { get; set; }
-
-    /// <summary>Additional CSS classes for the wrapper div.</summary>
     [Parameter] public string? Class { get; set; }
-
-    /// <summary>Additional CSS classes for the label element.</summary>
     [Parameter] public string? LabelClass { get; set; }
 
     private const string BaseClass = "space-y-2";
-
     private string ComputedClass => string.IsNullOrEmpty(Class) ? BaseClass : $"{BaseClass} {Class}";
 }
diff --git a/Enciphered.Blazor.UIComponents/Forms/HtmxForm.razor b/Enciphered.Blazor.UIComponents/Forms/HtmxForm.razor
new file mode 100644
index 0000000..3ae4736
--- /dev/null
+++ b/Enciphered.Blazor.UIComponents/Forms/HtmxForm.razor
@@ -0,0 +1,30 @@
+@namespace Enciphered.Blazor.UIComponents
+
+<CascadingValue Value="@ValidationEndpoint" Name="ValidationEndpoint">
+    <form hx-post="@SubmitUrl"
+          hx-target="@ResultSelector"
+          hx-swap="outerHTML"
+          data-enhance="false"
+          class="@ComputedClass"
+          @attributes="AdditionalAttributes">
+
+        <div class="space-y-4">
+            @ChildContent
+        </div>
+
+        <div id="@ResultId" class="hidden"></div>
+    </form>
+</CascadingValue>
+
+@code {
+    [Parameter, EditorRequired] public string Endpoint { get; set; } = "";
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+    [Parameter] public string? Class { get; set; }
+    [Parameter] public string ResultId { get; set; } = "form-result";
+    [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object>? AdditionalAttributes { get; set; }
+
+    private string ValidationEndpoint => $"{Endpoint.TrimEnd('/')}/validate";
+    private string SubmitUrl => $"{Endpoint.TrimEnd('/')}/submit";
+    private string ResultSelector => $"#{ResultId}";
+    private string ComputedClass => Class ?? "";
+}
diff --git a/Enciphered.Blazor.UIComponents/Forms/InputBase.cs b/Enciphered.Blazor.UIComponents/Forms/InputBase.cs
index 0ca0e16..d110be8 100644
--- a/Enciphered.Blazor.UIComponents/Forms/InputBase.cs
+++ b/Enciphered.Blazor.UIComponents/Forms/InputBase.cs
@@ -2,19 +2,10 @@ using Microsoft.AspNetCore.Components;
 
 namespace Enciphered.Blazor.UIComponents;
 
-/// <summary>
-/// Abstract base for all form input components.  Provides parameter declarations
-/// for value, id, name, disabled state, and CSS class computation.
-/// All interactivity is handled by the forms.js module.
-/// </summary>
 public abstract class InputBase<TValue> : ComponentBase
 {
-    // ── Value (for initial SSR render) ───────────────────────────────────────
-
     [Parameter] public TValue? Value { get; set; }
 
-    // ── Common parameters ────────────────────────────────────────────────────
-
     [Parameter] public string? Id { get; set; }
     [Parameter] public string? Name { get; set; }
     [Parameter] public bool Disabled { get; set; }
@@ -22,15 +13,14 @@ public abstract class InputBase<TValue> : ComponentBase
     [Parameter] public string? Placeholder { get; set; }
     [Parameter] public string? Class { get; set; }
 
-    /// <summary>
-    /// Arbitrary HTML attributes forwarded to the root element via <c>@attributes</c>.
-    /// Allows consumers to pass <c>required</c>, <c>aria-*</c>, <c>data-*</c>,
-    /// <c>maxlength</c>, etc. without the component needing to declare them.
-    /// </summary>
     [Parameter(CaptureUnmatchedValues = true)]
     public Dictionary<string, object>? AdditionalAttributes { get; set; }
 
-    // ── CSS helpers ──────────────────────────────────────────────────────────
+    [CascadingParameter(Name = "ValidationEndpoint")]
+    public string? ValidationEndpoint { get; set; }
+
+    [CascadingParameter(Name = "FieldName")]
+    public string? FieldName { get; set; }
 
     private const string BaseInputClass =
         "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm " +
@@ -38,16 +28,31 @@ public abstract class InputBase<TValue> : ComponentBase
         "placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring " +
         "disabled:cursor-not-allowed disabled:opacity-50";
 
-    /// <summary>
-    /// Computes the full CSS class string: base + consumer override.
-    /// </summary>
-    protected string ComputedClass
+    protected string ComputedClass =>
+        string.IsNullOrEmpty(Class) ? BaseInputClass : $"{BaseInputClass} {Class}";
+
+    protected Dictionary<string, object> MergedAttributes
     {
         get
         {
-            return string.IsNullOrEmpty(Class)
-                ? BaseInputClass
-                : $"{BaseInputClass} {Class}";
+            var attrs = AdditionalAttributes is not null
+                ? new Dictionary<string, object>(AdditionalAttributes)
+                : new Dictionary<string, object>();
+
+            if (!string.IsNullOrEmpty(ValidationEndpoint) &&
+                !string.IsNullOrEmpty(FieldName) &&
+                !attrs.ContainsKey("hx-post"))
+            {
+                attrs["hx-post"] = ValidationEndpoint;
+                attrs["hx-trigger"] = "blur";
+                attrs["hx-target"] = "next [data-field-error]";
+                attrs["hx-swap"] = "outerHTML";
+                attrs["hx-include"] = "this";
+                attrs["hx-vals"] = $"{{\"_field\": \"{FieldName}\"}}";
+            }
+
+            return attrs;
         }
     }
 }
+
diff --git a/Enciphered.Blazor.UIComponents/Forms/NumberInput.razor b/Enciphered.Blazor.UIComponents/Forms/NumberInput.razor
index 79d219b..960cfb5 100644
--- a/Enciphered.Blazor.UIComponents/Forms/NumberInput.razor
+++ b/Enciphered.Blazor.UIComponents/Forms/NumberInput.razor
@@ -13,7 +13,7 @@
            min="@Min"
            max="@Max"
            class="@ComputedClass [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none pr-8"
-           @attributes="AdditionalAttributes" />
+           @attributes="MergedAttributes" />
 
     @if (!Disabled && !ReadOnly)
     {
diff --git a/Enciphered.Blazor.UIComponents/Forms/TextInput.razor b/Enciphered.Blazor.UIComponents/Forms/TextInput.razor
index 032be96..65f61d7 100644
--- a/Enciphered.Blazor.UIComponents/Forms/TextInput.razor
+++ b/Enciphered.Blazor.UIComponents/Forms/TextInput.razor
@@ -9,12 +9,8 @@
        disabled="@Disabled"
        readonly="@ReadOnly"
        class="@ComputedClass"
-       @attributes="AdditionalAttributes" />
+       @attributes="MergedAttributes" />
 
 @code {
-    /// <summary>
-    /// HTML input type.  Defaults to "text".
-    /// Supports: text, email, password, url, tel, search.
-    /// </summary>
     [Parameter] public string Type { get; set; } = "text";
 }
diff --git a/Enciphered.Blazor.UIComponents/Forms/TimeInput.razor b/Enciphered.Blazor.UIComponents/Forms/TimeInput.razor
index b84b683..b18bd93 100644
--- a/Enciphered.Blazor.UIComponents/Forms/TimeInput.razor
+++ b/Enciphered.Blazor.UIComponents/Forms/TimeInput.razor
@@ -1,7 +1,6 @@
 @namespace Enciphered.Blazor.UIComponents
 @inherits InputBase<TimeOnly?>
 
-@* Hidden native input preserves form semantics, name, id, and data-testid for tests *@
 <input type="time"
        id="@Id"
        name="@Name"
@@ -12,7 +11,7 @@
        tabindex="-1"
        aria-hidden="true"
        disabled="@Disabled"
-       @attributes="AdditionalAttributes" />
+       @attributes="MergedAttributes" />
 
 <Popover>
     <Trigger>
@@ -20,7 +19,6 @@
                 disabled="@Disabled"
                 data-testid="@($"trigger-{Id}")"
                 class="@TriggerClass">
-            @* Lucide clock icon *@
             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                  fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                  class="mr-2 shrink-0 text-muted-foreground">
@@ -38,12 +36,7 @@
 </Popover>
 
 @code {
-    /// <summary>
-    /// Step in seconds. Use "1" for second precision, "60" (default) for minutes only.
-    /// </summary>
     [Parameter] public string? Step { get; set; }
-
-    /// <summary>Use 12-hour format with AM/PM. Default is true.</summary>
     [Parameter] public bool Use12Hour { get; set; } = true;
 
     private int ParsedMinuteStep => int.TryParse(Step, out var s) && s >= 60 ? s / 60 : 1;
diff --git a/Enciphered.Blazor.UIComponents/Forms/Validation/FormModelBinder.cs b/Enciphered.Blazor.UIComponents/Forms/Validation/FormModelBinder.cs
new file mode 100644
index 0000000..6b5b107
--- /dev/null
+++ b/Enciphered.Blazor.UIComponents/Forms/Validation/FormModelBinder.cs
@@ -0,0 +1,55 @@
+using System.Globalization;
+using System.Reflection;
+using Microsoft.AspNetCore.Http;
+
+namespace Enciphered.Blazor.UIComponents.Validation;
+
+public static class FormModelBinder
+{
+    public static TModel Bind<TModel>(IFormCollection form) where TModel : new()
+    {
+        var model = new TModel();
+        var props = typeof(TModel).GetProperties(BindingFlags.Public | BindingFlags.Instance)
+            .Where(p => p.CanWrite);
+
+        foreach (var prop in props)
+        {
+            var key = form.Keys.FirstOrDefault(k =>
+                string.Equals(k, prop.Name, StringComparison.OrdinalIgnoreCase));
+
+            if (key is null) continue;
+
+            var raw = form[key].ToString();
+            var value = ConvertValue(raw, prop.PropertyType);
+            if (value is not null)
+                prop.SetValue(model, value);
+        }
+
+        return model;
+    }
+
+    private static object? ConvertValue(string raw, Type target)
+    {
+        var underlying = Nullable.GetUnderlyingType(target);
+        var isNullable = underlying is not null;
+        var type = underlying ?? target;
+
+        if (string.IsNullOrWhiteSpace(raw))
+            return isNullable ? null : (type == typeof(string) ? "" : null);
+
+        if (type == typeof(string)) return raw;
+        if (type == typeof(int)) return int.TryParse(raw, out var i) ? i : null;
+        if (type == typeof(long)) return long.TryParse(raw, out var l) ? l : null;
+        if (type == typeof(double)) return double.TryParse(raw, CultureInfo.InvariantCulture, out var d) ? d : null;
+        if (type == typeof(decimal)) return decimal.TryParse(raw, CultureInfo.InvariantCulture, out var m) ? m : null;
+        if (type == typeof(float)) return float.TryParse(raw, CultureInfo.InvariantCulture, out var f) ? f : null;
+        if (type == typeof(bool)) return bool.TryParse(raw, out var b) ? b : raw == "on" || raw == "1";
+        if (type == typeof(DateTime)) return DateTime.TryParse(raw, CultureInfo.InvariantCulture, DateTimeStyles.None, out var dt) ? dt : null;
+        if (type == typeof(DateOnly)) return DateOnly.TryParse(raw, CultureInfo.InvariantCulture, DateTimeStyles.None, out var d2) ? d2 : null;
+        if (type == typeof(TimeOnly)) return TimeOnly.TryParse(raw, CultureInfo.InvariantCulture, out var t) ? t : null;
+        if (type == typeof(Guid)) return Guid.TryParse(raw, out var g) ? g : null;
+        if (type.IsEnum) return Enum.TryParse(type, raw, ignoreCase: true, out var e) ? e : null;
+
+        return null;
+    }
+}
diff --git a/Enciphered.Blazor.UIComponents/Forms/Validation/FormValidationRule.cs b/Enciphered.Blazor.UIComponents/Forms/Validation/FormValidationRule.cs
new file mode 100644
index 0000000..5e0190b
--- /dev/null
+++ b/Enciphered.Blazor.UIComponents/Forms/Validation/FormValidationRule.cs
@@ -0,0 +1,71 @@
+using System.Text.RegularExpressions;
+
+namespace Enciphered.Blazor.UIComponents.Validation;
+
+public sealed class FormValidationRule
+{
+    public required string Field { get; init; }
+    public string? DisplayName { get; init; }
+    public bool Required { get; init; }
+    public int? MinLength { get; init; }
+    public int? MaxLength { get; init; }
+    public string? Pattern { get; init; }
+    public double? Min { get; init; }
+    public double? Max { get; init; }
+    public string? Message { get; init; }
+    public Func<string, string?>? Custom { get; init; }
+
+    public string? Validate(string? value)
+    {
+        var label = DisplayName ?? ToTitleCase(Field);
+        var v = value?.Trim() ?? "";
+
+        if (Required && string.IsNullOrWhiteSpace(v))
+            return $"{label} is required.";
+
+        if (string.IsNullOrWhiteSpace(v))
+            return null;
+
+        if (MinLength.HasValue && v.Length < MinLength.Value)
+            return $"{label} must be at least {MinLength.Value} characters.";
+
+        if (MaxLength.HasValue && v.Length > MaxLength.Value)
+            return $"{label} must be at most {MaxLength.Value} characters.";
+
+        if (Pattern is not null && !Regex.IsMatch(v, Pattern))
+            return Message ?? $"{label} is not in the correct format.";
+
+        if (Min.HasValue || Max.HasValue)
+        {
+            if (!double.TryParse(v, out var num))
+                return $"{label} must be a number.";
+            if (Min.HasValue && num < Min.Value)
+                return $"{label} must be at least {Min.Value}.";
+            if (Max.HasValue && num > Max.Value)
+                return $"{label} must be at most {Max.Value}.";
+        }
+
+        if (Custom is not null)
+        {
+            var customError = Custom(v);
+            if (customError is not null)
+                return customError;
+        }
+
+        return null;
+    }
+
+    private static string ToTitleCase(string field)
+    {
+        if (string.IsNullOrEmpty(field)) return field;
+        var sb = new System.Text.StringBuilder();
+        sb.Append(char.ToUpper(field[0]));
+        for (int i = 1; i < field.Length; i++)
+        {
+            if (char.IsUpper(field[i]))
+                sb.Append(' ');
+            sb.Append(field[i]);
+        }
+        return sb.ToString();
+    }
+}
diff --git a/Enciphered.Blazor.UIComponents/Forms/Validation/FormValidator.cs b/Enciphered.Blazor.UIComponents/Forms/Validation/FormValidator.cs
new file mode 100644
index 0000000..7954105
--- /dev/null
+++ b/Enciphered.Blazor.UIComponents/Forms/Validation/FormValidator.cs
@@ -0,0 +1,55 @@
+namespace Enciphered.Blazor.UIComponents.Validation;
+
+public abstract class FormValidator
+{
+    private readonly List<FormValidationRule> _rules = [];
+
+    public IReadOnlyList<FormValidationRule> Rules => _rules;
+    public IEnumerable<string> Fields => _rules.Select(r => r.Field);
+
+    protected void RuleFor(
+        string field,
+        string? displayName = null,
+        bool required = false,
+        int? minLength = null,
+        int? maxLength = null,
+        string? pattern = null,
+        double? min = null,
+        double? max = null,
+        string? message = null,
+        Func<string, string?>? custom = null)
+    {
+        _rules.Add(new FormValidationRule
+        {
+            Field = field,
+            DisplayName = displayName,
+            Required = required,
+            MinLength = minLength,
+            MaxLength = maxLength,
+            Pattern = pattern,
+            Min = min,
+            Max = max,
+            Message = message,
+            Custom = custom
+        });
+    }
+
+    public string? ValidateField(string field, string? value)
+    {
+        var rule = _rules.FirstOrDefault(r => r.Field == field);
+        return rule?.Validate(value);
+    }
+
+    public Dictionary<string, string> ValidateAll(Func<string, string?> valueAccessor)
+    {
+        var errors = new Dictionary<string, string>();
+        foreach (var rule in _rules)
+        {
+            var value = valueAccessor(rule.Field);
+            var error = rule.Validate(value);
+            if (error is not null)
+                errors[rule.Field] = error;
+        }
+        return errors;
+    }
+}
diff --git a/Enciphered.Blazor.UIComponents/Forms/Validation/HtmxFormValidationExtensions.cs b/Enciphered.Blazor.UIComponents/Forms/Validation/HtmxFormValidationExtensions.cs
new file mode 100644
index 0000000..d0ea91f
--- /dev/null
+++ b/Enciphered.Blazor.UIComponents/Forms/Validation/HtmxFormValidationExtensions.cs
@@ -0,0 +1,79 @@
+using Microsoft.AspNetCore.Builder;
+using Microsoft.AspNetCore.Http;
+using Microsoft.AspNetCore.Routing;
+
+namespace Enciphered.Blazor.UIComponents.Validation;
+
+public static class HtmxFormValidationExtensions
+{
+    public static RouteGroupBuilder MapFormValidation<TValidator>(
+        this IEndpointRouteBuilder endpoints,
+        string basePath,
+        string successMessage = "✓ Form submitted successfully!",
+        Func<HttpContext, Task>? onSuccess = null)
+        where TValidator : FormValidator, new()
+    {
+        var validator = new TValidator();
+        return MapEndpoints(endpoints, basePath, validator, successMessage, onSuccess);
+    }
+
+    public static RouteGroupBuilder MapFormValidation<TValidator, TModel>(
+        this IEndpointRouteBuilder endpoints,
+        string basePath,
+        Func<TModel, Task> onSuccess,
+        string successMessage = "✓ Form submitted successfully!")
+        where TValidator : FormValidator, new()
+        where TModel : new()
+    {
+        var validator = new TValidator();
+        return MapEndpoints(endpoints, basePath, validator, successMessage, async ctx =>
+        {
+            var model = FormModelBinder.Bind<TModel>(ctx.Request.Form);
+            await onSuccess(model);
+        });
+    }
+
+    private static RouteGroupBuilder MapEndpoints(
+        IEndpointRouteBuilder endpoints,
+        string basePath,
+        FormValidator validator,
+        string successMessage,
+        Func<HttpContext, Task>? onSuccess)
+    {
+        var group = endpoints.MapGroup(basePath);
+
+        group.MapPost("/validate", (HttpContext ctx) =>
+        {
+            var form = ctx.Request.Form;
+            var field = form["_field"].ToString();
+            var value = form.ContainsKey(field) ? form[field].ToString() : "";
+
+            var error = validator.ValidateField(field, value);
+            var html = HtmxFormValidationRenderer.FieldErrorFragment(field, error);
+
+            return Results.Content(html, "text/html");
+        }).DisableAntiforgery();
+
+        group.MapPost("/submit", async (HttpContext ctx) =>
+        {
+            var form = ctx.Request.Form;
+            var errors = validator.ValidateAll(f => form.ContainsKey(f) ? form[f].ToString() : "");
+
+            ctx.Response.ContentType = "text/html; charset=utf-8";
+
+            if (errors.Count > 0)
+            {
+                var html = HtmxFormValidationRenderer.ErrorResponse(validator.Fields, errors);
+                return Results.Content(html, "text/html");
+            }
+
+            if (onSuccess is not null)
+                await onSuccess(ctx);
+
+            var successHtml = HtmxFormValidationRenderer.SuccessResponse(validator.Fields, successMessage);
+            return Results.Content(successHtml, "text/html");
+        }).DisableAntiforgery();
+
+        return group;
+    }
+}
diff --git a/Enciphered.Blazor.UIComponents/Forms/Validation/HtmxFormValidationRenderer.cs b/Enciphered.Blazor.UIComponents/Forms/Validation/HtmxFormValidationRenderer.cs
new file mode 100644
index 0000000..d5dff31
--- /dev/null
+++ b/Enciphered.Blazor.UIComponents/Forms/Validation/HtmxFormValidationRenderer.cs
@@ -0,0 +1,62 @@
+using System.Net;
+
+namespace Enciphered.Blazor.UIComponents.Validation;
+
+public static class HtmxFormValidationRenderer
+{
+    private const string ErrorClasses = "text-[0.8rem] font-medium text-destructive";
+    private const string HiddenClass = "hidden";
+    private const string SuccessClasses =
+        "rounded-md border border-green-500/30 bg-green-500/10 p-3 text-sm text-green-600 dark:text-green-400";
+
+    public static string FieldErrorFragment(string field, string? error)
+    {
+        var safeField = WebUtility.HtmlEncode(field);
+        if (string.IsNullOrEmpty(error))
+            return $"<p data-field-error=\"{safeField}\" class=\"{ErrorClasses} {HiddenClass}\"></p>";
+        var safeError = WebUtility.HtmlEncode(error);
+        return $"<p data-field-error=\"{safeField}\" class=\"{ErrorClasses}\">{safeError}</p>";
+    }
+
+    public static string OobFieldErrorFragment(string field, string? error)
+    {
+        var safeField = WebUtility.HtmlEncode(field);
+        var oobAttr = $"hx-swap-oob=\"outerHTML:[data-field-error='{safeField}']\"";
+        if (string.IsNullOrEmpty(error))
+            return $"<p data-field-error=\"{safeField}\" {oobAttr} class=\"{ErrorClasses} {HiddenClass}\"></p>";
+        var safeError = WebUtility.HtmlEncode(error);
+        return $"<p data-field-error=\"{safeField}\" {oobAttr} class=\"{ErrorClasses}\">{safeError}</p>";
+    }
+
+    public static string ErrorResponse(
+        IEnumerable<string> allFields,
+        Dictionary<string, string> errors,
+        string resultDivId = "form-result")
+    {
+        var html = "";
+        foreach (var field in allFields)
+        {
+            errors.TryGetValue(field, out var err);
+            html += OobFieldErrorFragment(field, err) + "\n";
+        }
+        html += $"<div id=\"{resultDivId}\" class=\"{HiddenClass}\"></div>";
+        return html;
+    }
+
+    public static string SuccessResponse(
+        IEnumerable<string> allFields,
+        string successMessage,
+        string resultDivId = "form-result",
+        string? testId = "success-message")
+    {
+        var html = "";
+        foreach (var field in allFields)
+            html += OobFieldErrorFragment(field, null) + "\n";
+        var testIdAttr = testId is not null ? $" data-testid=\"{testId}\"" : "";
+        html += $"<div id=\"{resultDivId}\">";
+        html += $"<div{testIdAttr} class=\"{SuccessClasses}\">";
+        html += WebUtility.HtmlEncode(successMessage);
+        html += "</div></div>";
+        return html;
+    }
+}
diff --git a/Enciphered.Blazor.UIComponents/wwwroot/css/app.css b/Enciphered.Blazor.UIComponents/wwwroot/css/app.css
index 35db13c..f824e97 100644
--- a/Enciphered.Blazor.UIComponents/wwwroot/css/app.css
+++ b/Enciphered.Blazor.UIComponents/wwwroot/css/app.css
@@ -1,2 +1,2 @@
 /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-black:#000;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--font-weight-medium:500;--font-weight-semibold:600;--tracking-tight:-.025em;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--radius:var(--radius);--color-background:var(--background);--color-foreground:var(--foreground);--color-card:var(--card);--color-card-foreground:var(--card-foreground);--color-popover:var(--popover);--color-popover-foreground:var(--popover-foreground);--color-primary:var(--primary);--color-primary-foreground:var(--primary-foreground);--color-secondary:var(--secondary);--color-secondary-foreground:var(--secondary-foreground);--color-muted-foreground:var(--muted-foreground);--color-accent:var(--accent);--color-accent-foreground:var(--accent-foreground);--color-destructive:var(--destructive);--color-destructive-foreground:var(--destructive-foreground);--color-border:var(--border-color);--color-input:var(--input);--color-ring:var(--ring);--color-sidebar:var(--sidebar-background);--color-sidebar-foreground:var(--sidebar-foreground);--color-sidebar-accent:var(--sidebar-accent);--color-sidebar-accent-foreground:var(--sidebar-accent-foreground);--color-sidebar-border:var(--sidebar-border);--color-sidebar-ring:var(--sidebar-ring);--sidebar-width:16rem;--sidebar-width-icon:3rem}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.collapse{visibility:collapse}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.inset-0{inset:calc(var(--spacing) * 0)}.inset-y-0{inset-block:calc(var(--spacing) * 0)}.start{inset-inline-start:var(--spacing)}.right-0{right:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-40{z-index:40}.z-50{z-index:50}.mx-2{margin-inline:calc(var(--spacing) * 2)}.my-2{margin-block:calc(var(--spacing) * 2)}.mt-1\.5{margin-top:calc(var(--spacing) * 1.5)}.mt-auto{margin-top:auto}.mr-2{margin-right:calc(var(--spacing) * 2)}.mb-1{margin-bottom:calc(var(--spacing) * 1)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-10{height:calc(var(--spacing) * 10)}.h-52{height:calc(var(--spacing) * 52)}.h-full{height:100%}.h-px{height:1px}.h-svh{height:100svh}.max-h-52{max-height:calc(var(--spacing) * 52)}.min-h-0{min-height:calc(var(--spacing) * 0)}.min-h-svh{min-height:100svh}.w-7{width:calc(var(--spacing) * 7)}.w-9{width:calc(var(--spacing) * 9)}.w-16{width:calc(var(--spacing) * 16)}.w-full{width:100%}.min-w-0{min-width:calc(var(--spacing) * 0)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.origin-top-left{transform-origin:0 0}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.resize{resize:both}.\[appearance\:textfield\]{appearance:textfield}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-0\.5{gap:calc(var(--spacing) * .5)}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;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)))}.self-start{align-self:flex-start}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-tr-md{border-top-right-radius:var(--radius-md)}.rounded-br-md{border-bottom-right-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-border{border-color:var(--color-border)}.border-input{border-color:var(--color-input)}.border-sidebar-border{border-color:var(--color-sidebar-border)}.bg-accent{background-color:var(--color-accent)}.bg-background{background-color:var(--color-background)}.bg-black\/50{background-color:#00000080}@supports (color:color-mix(in lab, red, red)){.bg-black\/50{background-color:color-mix(in oklab, var(--color-black) 50%, transparent)}}.bg-card{background-color:var(--color-card)}.bg-destructive{background-color:var(--color-destructive)}.bg-popover{background-color:var(--color-popover)}.bg-primary{background-color:var(--color-primary)}.bg-secondary{background-color:var(--color-secondary)}.bg-sidebar{background-color:var(--color-sidebar)}.bg-sidebar-accent{background-color:var(--color-sidebar-accent)}.bg-sidebar-border{background-color:var(--color-sidebar-border)}.bg-transparent{background-color:#0000}.object-cover{object-fit:cover}.p-2{padding:calc(var(--spacing) * 2)}.p-4{padding:calc(var(--spacing) * 4)}.p-6{padding:calc(var(--spacing) * 6)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-8{padding-inline:calc(var(--spacing) * 8)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.pt-0{padding-top:calc(var(--spacing) * 0)}.pr-1{padding-right:calc(var(--spacing) * 1)}.pr-8{padding-right:calc(var(--spacing) * 8)}.text-left{text-align:left}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[0\.8rem\]{font-size:.8rem}.leading-none{--tw-leading:1;line-height:1}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.whitespace-nowrap{white-space:nowrap}.text-accent-foreground{color:var(--color-accent-foreground)}.text-card-foreground{color:var(--color-card-foreground)}.text-destructive{color:var(--color-destructive)}.text-destructive-foreground{color:var(--color-destructive-foreground)}.text-foreground{color:var(--color-foreground)}.text-muted-foreground,.text-muted-foreground\/40{color:var(--color-muted-foreground)}@supports (color:color-mix(in lab, red, red)){.text-muted-foreground\/40{color:color-mix(in oklab, var(--color-muted-foreground) 40%, transparent)}}.text-popover-foreground{color:var(--color-popover-foreground)}.text-primary{color:var(--color-primary)}.text-primary-foreground{color:var(--color-primary-foreground)}.text-secondary-foreground{color:var(--color-secondary-foreground)}.text-sidebar-accent-foreground{color:var(--color-sidebar-accent-foreground)}.text-sidebar-foreground,.text-sidebar-foreground\/70{color:var(--color-sidebar-foreground)}@supports (color:color-mix(in lab, red, red)){.text-sidebar-foreground\/70{color:color-mix(in oklab, var(--color-sidebar-foreground) 70%, transparent)}}.underline-offset-4{text-underline-offset:4px}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.transition-\[width\,transform\]{transition-property:width,transform;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[width\]{transition-property:width;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.ease-linear{--tw-ease:linear;transition-timing-function:linear}.group-data-\[state\=collapsed\]\:group-data-\[mobile\=false\]\:mx-auto:is(:where(.group)[data-state=collapsed] *):is(:where(.group)[data-mobile=false] *){margin-inline:auto}.group-data-\[state\=collapsed\]\:group-data-\[mobile\=false\]\:hidden:is(:where(.group)[data-state=collapsed] *):is(:where(.group)[data-mobile=false] *){display:none}.group-data-\[state\=collapsed\]\:group-data-\[mobile\=false\]\:size-8:is(:where(.group)[data-state=collapsed] *):is(:where(.group)[data-mobile=false] *){width:calc(var(--spacing) * 8);height:calc(var(--spacing) * 8)}.group-data-\[state\=collapsed\]\:group-data-\[mobile\=false\]\:items-center:is(:where(.group)[data-state=collapsed] *):is(:where(.group)[data-mobile=false] *){align-items:center}.group-data-\[state\=collapsed\]\:group-data-\[mobile\=false\]\:justify-center:is(:where(.group)[data-state=collapsed] *):is(:where(.group)[data-mobile=false] *){justify-content:center}.group-data-\[state\=collapsed\]\:group-data-\[mobile\=false\]\:p-0:is(:where(.group)[data-state=collapsed] *):is(:where(.group)[data-mobile=false] *){padding:calc(var(--spacing) * 0)}.group-data-\[state\=collapsed\]\:group-data-\[mobile\=false\]\:px-0:is(:where(.group)[data-state=collapsed] *):is(:where(.group)[data-mobile=false] *){padding-inline:calc(var(--spacing) * 0)}.peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled~*){cursor:not-allowed}.peer-disabled\:opacity-70:is(:where(.peer):disabled~*){opacity:.7}.file\:border-0::file-selector-button{border-style:var(--tw-border-style);border-width:0}.file\:bg-transparent::file-selector-button{background-color:#0000}.file\:text-sm::file-selector-button{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.file\:font-medium::file-selector-button{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.placeholder\:text-muted-foreground::placeholder{color:var(--color-muted-foreground)}@media (hover:hover){.hover\:bg-accent:hover{background-color:var(--color-accent)}.hover\:bg-destructive\/90:hover{background-color:var(--color-destructive)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-destructive\/90:hover{background-color:color-mix(in oklab, var(--color-destructive) 90%, transparent)}}.hover\:bg-primary\/90:hover{background-color:var(--color-primary)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-primary\/90:hover{background-color:color-mix(in oklab, var(--color-primary) 90%, transparent)}}.hover\:bg-secondary\/80:hover{background-color:var(--color-secondary)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-secondary\/80:hover{background-color:color-mix(in oklab, var(--color-secondary) 80%, transparent)}}.hover\:bg-sidebar-accent:hover{background-color:var(--color-sidebar-accent)}.hover\:text-accent-foreground:hover{color:var(--color-accent-foreground)}.hover\:text-foreground:hover{color:var(--color-foreground)}.hover\:text-sidebar-accent-foreground:hover{color:var(--color-sidebar-accent-foreground)}.hover\:underline:hover{text-decoration-line:underline}}.focus-visible\:ring-1:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + 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-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-ring:focus-visible{--tw-ring-color:var(--color-ring)}.focus-visible\:ring-sidebar-ring:focus-visible{--tw-ring-color:var(--color-sidebar-ring)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.has-\[data-slot\=card-action\]\:grid:has(:is()){display:grid}.has-\[data-slot\=card-action\]\:grid-cols-\[1fr_auto\]:has(:is()){grid-template-columns:1fr auto}.has-\[data-slot\=card-action\]\:items-center:has(:is()){align-items:center}@media (min-width:48rem){.md\:z-10{z-index:10}}.\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button{appearance:none}.\[\&\:\:-webkit-outer-spin-button\]\:appearance-none::-webkit-outer-spin-button{appearance:none}.\[\&\>\[data-slot\=card-description\]\]\:col-span-full>[data-slot=card-description]{grid-column:1/-1}}:root{--background:oklch(100% 0 0);--foreground:oklch(14.5% 0 0);--card:oklch(100% 0 0);--card-foreground:oklch(14.5% 0 0);--popover:oklch(100% 0 0);--popover-foreground:oklch(14.5% 0 0);--primary:oklch(20.5% 0 0);--primary-foreground:oklch(98.5% 0 0);--secondary:oklch(97% 0 0);--secondary-foreground:oklch(20.5% 0 0);--muted:oklch(97% 0 0);--muted-foreground:oklch(55.6% 0 0);--accent:oklch(97% 0 0);--accent-foreground:oklch(20.5% 0 0);--destructive:oklch(57.7% .245 27.325);--destructive-foreground:oklch(98.5% 0 0);--border-color:oklch(92.2% 0 0);--input:oklch(92.2% 0 0);--ring:oklch(70.8% 0 0);--radius:.625rem;--sidebar-background:oklch(98.5% 0 0);--sidebar-foreground:oklch(14.5% 0 0);--sidebar-primary:oklch(20.5% 0 0);--sidebar-primary-foreground:oklch(98.5% 0 0);--sidebar-accent:oklch(97% 0 0);--sidebar-accent-foreground:oklch(20.5% 0 0);--sidebar-border:oklch(92.2% 0 0);--sidebar-ring:oklch(70.8% 0 0)}.dark{--background:oklch(14.5% 0 0);--foreground:oklch(98.5% 0 0);--card:oklch(14.5% 0 0);--card-foreground:oklch(98.5% 0 0);--popover:oklch(14.5% 0 0);--popover-foreground:oklch(98.5% 0 0);--primary:oklch(98.5% 0 0);--primary-foreground:oklch(20.5% 0 0);--secondary:oklch(26.9% 0 0);--secondary-foreground:oklch(98.5% 0 0);--muted:oklch(26.9% 0 0);--muted-foreground:oklch(70.8% 0 0);--accent:oklch(26.9% 0 0);--accent-foreground:oklch(98.5% 0 0);--destructive:oklch(57.7% .245 27.325);--destructive-foreground:oklch(98.5% 0 0);--border-color:oklch(26.9% 0 0);--input:oklch(26.9% 0 0);--ring:oklch(43.9% 0 0);--sidebar-background:oklch(20.5% 0 0);--sidebar-foreground:oklch(98.5% 0 0);--sidebar-primary:oklch(98.5% 0 0);--sidebar-primary-foreground:oklch(20.5% 0 0);--sidebar-accent:oklch(26.9% 0 0);--sidebar-accent-foreground:oklch(98.5% 0 0);--sidebar-border:oklch(26.9% 0 0);--sidebar-ring:oklch(55.6% 0 0)}input[type=date]::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}input[type=time]::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}input[type=datetime-local]::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}input[type=date]::-webkit-date-and-time-value{text-align:left}input[type=time]::-webkit-date-and-time-value{text-align:left}input[type=datetime-local]::-webkit-date-and-time-value{text-align:left}input[type=date],input[type=time],input[type=datetime-local]{color-scheme:light}.dark input[type=date],.dark input[type=time],.dark input[type=datetime-local]{color-scheme:dark}.scrollbar-thin{scrollbar-width:thin;scrollbar-color:var(--muted) transparent}.scrollbar-thin::-webkit-scrollbar{width:6px}.scrollbar-thin::-webkit-scrollbar-track{background:0 0;border-radius:3px}.scrollbar-thin::-webkit-scrollbar-thumb{background-color:var(--muted);border-radius:3px}.scrollbar-thin::-webkit-scrollbar-thumb:hover{background-color:var(--muted-foreground)}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}
\ No newline at end of file
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-green-400:oklch(79.2% .209 151.711);--color-green-500:oklch(72.3% .219 149.579);--color-green-600:oklch(62.7% .194 149.214);--color-black:#000;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--font-weight-medium:500;--font-weight-semibold:600;--tracking-tight:-.025em;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--radius:var(--radius);--color-background:var(--background);--color-foreground:var(--foreground);--color-card:var(--card);--color-card-foreground:var(--card-foreground);--color-popover:var(--popover);--color-popover-foreground:var(--popover-foreground);--color-primary:var(--primary);--color-primary-foreground:var(--primary-foreground);--color-secondary:var(--secondary);--color-secondary-foreground:var(--secondary-foreground);--color-muted-foreground:var(--muted-foreground);--color-accent:var(--accent);--color-accent-foreground:var(--accent-foreground);--color-destructive:var(--destructive);--color-destructive-foreground:var(--destructive-foreground);--color-border:var(--border-color);--color-input:var(--input);--color-ring:var(--ring);--color-sidebar:var(--sidebar-background);--color-sidebar-foreground:var(--sidebar-foreground);--color-sidebar-accent:var(--sidebar-accent);--color-sidebar-accent-foreground:var(--sidebar-accent-foreground);--color-sidebar-border:var(--sidebar-border);--color-sidebar-ring:var(--sidebar-ring);--sidebar-width:16rem;--sidebar-width-icon:3rem}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.collapse{visibility:collapse}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.inset-0{inset:calc(var(--spacing) * 0)}.inset-y-0{inset-block:calc(var(--spacing) * 0)}.start{inset-inline-start:var(--spacing)}.right-0{right:calc(var(--spacing) * 0)}.left-0{left:calc(var(--spacing) * 0)}.z-40{z-index:40}.z-50{z-index:50}.mx-2{margin-inline:calc(var(--spacing) * 2)}.my-2{margin-block:calc(var(--spacing) * 2)}.mt-1\.5{margin-top:calc(var(--spacing) * 1.5)}.mt-auto{margin-top:auto}.mr-2{margin-right:calc(var(--spacing) * 2)}.mb-1{margin-bottom:calc(var(--spacing) * 1)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.ml-auto{margin-left:auto}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-10{height:calc(var(--spacing) * 10)}.h-52{height:calc(var(--spacing) * 52)}.h-full{height:100%}.h-px{height:1px}.h-svh{height:100svh}.max-h-52{max-height:calc(var(--spacing) * 52)}.min-h-0{min-height:calc(var(--spacing) * 0)}.min-h-svh{min-height:100svh}.w-7{width:calc(var(--spacing) * 7)}.w-9{width:calc(var(--spacing) * 9)}.w-16{width:calc(var(--spacing) * 16)}.w-full{width:100%}.min-w-0{min-width:calc(var(--spacing) * 0)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.origin-top-left{transform-origin:0 0}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.resize{resize:both}.\[appearance\:textfield\]{appearance:textfield}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-0\.5{gap:calc(var(--spacing) * .5)}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;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)))}:where(.space-y-4>: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)))}.self-start{align-self:flex-start}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-tr-md{border-top-right-radius:var(--radius-md)}.rounded-br-md{border-bottom-right-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-border{border-color:var(--color-border)}.border-destructive{border-color:var(--color-destructive)}.border-green-500\/30{border-color:#00c7584d}@supports (color:color-mix(in lab, red, red)){.border-green-500\/30{border-color:color-mix(in oklab, var(--color-green-500) 30%, transparent)}}.border-input{border-color:var(--color-input)}.border-sidebar-border{border-color:var(--color-sidebar-border)}.bg-accent{background-color:var(--color-accent)}.bg-background{background-color:var(--color-background)}.bg-black\/50{background-color:#00000080}@supports (color:color-mix(in lab, red, red)){.bg-black\/50{background-color:color-mix(in oklab, var(--color-black) 50%, transparent)}}.bg-card{background-color:var(--color-card)}.bg-destructive{background-color:var(--color-destructive)}.bg-green-500\/10{background-color:#00c7581a}@supports (color:color-mix(in lab, red, red)){.bg-green-500\/10{background-color:color-mix(in oklab, var(--color-green-500) 10%, transparent)}}.bg-popover{background-color:var(--color-popover)}.bg-primary{background-color:var(--color-primary)}.bg-secondary{background-color:var(--color-secondary)}.bg-sidebar{background-color:var(--color-sidebar)}.bg-sidebar-accent{background-color:var(--color-sidebar-accent)}.bg-sidebar-border{background-color:var(--color-sidebar-border)}.bg-transparent{background-color:#0000}.object-cover{object-fit:cover}.p-2{padding:calc(var(--spacing) * 2)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-6{padding:calc(var(--spacing) * 6)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-1\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-8{padding-inline:calc(var(--spacing) * 8)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.pt-0{padding-top:calc(var(--spacing) * 0)}.pr-1{padding-right:calc(var(--spacing) * 1)}.pr-8{padding-right:calc(var(--spacing) * 8)}.text-left{text-align:left}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[0\.8rem\]{font-size:.8rem}.leading-none{--tw-leading:1;line-height:1}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.whitespace-nowrap{white-space:nowrap}.text-accent-foreground{color:var(--color-accent-foreground)}.text-card-foreground{color:var(--color-card-foreground)}.text-destructive{color:var(--color-destructive)}.text-destructive-foreground{color:var(--color-destructive-foreground)}.text-foreground{color:var(--color-foreground)}.text-green-600{color:var(--color-green-600)}.text-muted-foreground,.text-muted-foreground\/40{color:var(--color-muted-foreground)}@supports (color:color-mix(in lab, red, red)){.text-muted-foreground\/40{color:color-mix(in oklab, var(--color-muted-foreground) 40%, transparent)}}.text-popover-foreground{color:var(--color-popover-foreground)}.text-primary{color:var(--color-primary)}.text-primary-foreground{color:var(--color-primary-foreground)}.text-secondary-foreground{color:var(--color-secondary-foreground)}.text-sidebar-accent-foreground{color:var(--color-sidebar-accent-foreground)}.text-sidebar-foreground,.text-sidebar-foreground\/70{color:var(--color-sidebar-foreground)}@supports (color:color-mix(in lab, red, red)){.text-sidebar-foreground\/70{color:color-mix(in oklab, var(--color-sidebar-foreground) 70%, transparent)}}.underline-offset-4{text-underline-offset:4px}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition-\[width\,transform\]{transition-property:width,transform;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[width\]{transition-property:width;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.ease-linear{--tw-ease:linear;transition-timing-function:linear}.group-data-\[state\=collapsed\]\:group-data-\[mobile\=false\]\:mx-auto:is(:where(.group)[data-state=collapsed] *):is(:where(.group)[data-mobile=false] *){margin-inline:auto}.group-data-\[state\=collapsed\]\:group-data-\[mobile\=false\]\:hidden:is(:where(.group)[data-state=collapsed] *):is(:where(.group)[data-mobile=false] *){display:none}.group-data-\[state\=collapsed\]\:group-data-\[mobile\=false\]\:size-8:is(:where(.group)[data-state=collapsed] *):is(:where(.group)[data-mobile=false] *){width:calc(var(--spacing) * 8);height:calc(var(--spacing) * 8)}.group-data-\[state\=collapsed\]\:group-data-\[mobile\=false\]\:items-center:is(:where(.group)[data-state=collapsed] *):is(:where(.group)[data-mobile=false] *){align-items:center}.group-data-\[state\=collapsed\]\:group-data-\[mobile\=false\]\:justify-center:is(:where(.group)[data-state=collapsed] *):is(:where(.group)[data-mobile=false] *){justify-content:center}.group-data-\[state\=collapsed\]\:group-data-\[mobile\=false\]\:p-0:is(:where(.group)[data-state=collapsed] *):is(:where(.group)[data-mobile=false] *){padding:calc(var(--spacing) * 0)}.group-data-\[state\=collapsed\]\:group-data-\[mobile\=false\]\:px-0:is(:where(.group)[data-state=collapsed] *):is(:where(.group)[data-mobile=false] *){padding-inline:calc(var(--spacing) * 0)}.peer-disabled\:cursor-not-allowed:is(:where(.peer):disabled~*){cursor:not-allowed}.peer-disabled\:opacity-70:is(:where(.peer):disabled~*){opacity:.7}.file\:border-0::file-selector-button{border-style:var(--tw-border-style);border-width:0}.file\:bg-transparent::file-selector-button{background-color:#0000}.file\:text-sm::file-selector-button{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.file\:font-medium::file-selector-button{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.placeholder\:text-muted-foreground::placeholder{color:var(--color-muted-foreground)}@media (hover:hover){.hover\:bg-accent:hover{background-color:var(--color-accent)}.hover\:bg-destructive\/90:hover{background-color:var(--color-destructive)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-destructive\/90:hover{background-color:color-mix(in oklab, var(--color-destructive) 90%, transparent)}}.hover\:bg-primary\/90:hover{background-color:var(--color-primary)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-primary\/90:hover{background-color:color-mix(in oklab, var(--color-primary) 90%, transparent)}}.hover\:bg-secondary\/80:hover{background-color:var(--color-secondary)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-secondary\/80:hover{background-color:color-mix(in oklab, var(--color-secondary) 80%, transparent)}}.hover\:bg-sidebar-accent:hover{background-color:var(--color-sidebar-accent)}.hover\:text-accent-foreground:hover{color:var(--color-accent-foreground)}.hover\:text-foreground:hover{color:var(--color-foreground)}.hover\:text-sidebar-accent-foreground:hover{color:var(--color-sidebar-accent-foreground)}.hover\:underline:hover{text-decoration-line:underline}}.focus-visible\:ring-1:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + 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-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-ring:focus-visible{--tw-ring-color:var(--color-ring)}.focus-visible\:ring-sidebar-ring:focus-visible{--tw-ring-color:var(--color-sidebar-ring)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}.has-\[data-slot\=card-action\]\:grid:has(:is()){display:grid}.has-\[data-slot\=card-action\]\:grid-cols-\[1fr_auto\]:has(:is()){grid-template-columns:1fr auto}.has-\[data-slot\=card-action\]\:items-center:has(:is()){align-items:center}@media (min-width:48rem){.md\:z-10{z-index:10}}.dark\:text-green-400:where(.dark,.dark *){color:var(--color-green-400)}.\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button{appearance:none}.\[\&\:\:-webkit-outer-spin-button\]\:appearance-none::-webkit-outer-spin-button{appearance:none}.\[\&\>\[data-slot\=card-description\]\]\:col-span-full>[data-slot=card-description]{grid-column:1/-1}}:root{--background:oklch(100% 0 0);--foreground:oklch(14.5% 0 0);--card:oklch(100% 0 0);--card-foreground:oklch(14.5% 0 0);--popover:oklch(100% 0 0);--popover-foreground:oklch(14.5% 0 0);--primary:oklch(20.5% 0 0);--primary-foreground:oklch(98.5% 0 0);--secondary:oklch(97% 0 0);--secondary-foreground:oklch(20.5% 0 0);--muted:oklch(97% 0 0);--muted-foreground:oklch(55.6% 0 0);--accent:oklch(97% 0 0);--accent-foreground:oklch(20.5% 0 0);--destructive:oklch(57.7% .245 27.325);--destructive-foreground:oklch(98.5% 0 0);--border-color:oklch(92.2% 0 0);--input:oklch(92.2% 0 0);--ring:oklch(70.8% 0 0);--radius:.625rem;--sidebar-background:oklch(98.5% 0 0);--sidebar-foreground:oklch(14.5% 0 0);--sidebar-primary:oklch(20.5% 0 0);--sidebar-primary-foreground:oklch(98.5% 0 0);--sidebar-accent:oklch(97% 0 0);--sidebar-accent-foreground:oklch(20.5% 0 0);--sidebar-border:oklch(92.2% 0 0);--sidebar-ring:oklch(70.8% 0 0)}.dark{--background:oklch(14.5% 0 0);--foreground:oklch(98.5% 0 0);--card:oklch(14.5% 0 0);--card-foreground:oklch(98.5% 0 0);--popover:oklch(14.5% 0 0);--popover-foreground:oklch(98.5% 0 0);--primary:oklch(98.5% 0 0);--primary-foreground:oklch(20.5% 0 0);--secondary:oklch(26.9% 0 0);--secondary-foreground:oklch(98.5% 0 0);--muted:oklch(26.9% 0 0);--muted-foreground:oklch(70.8% 0 0);--accent:oklch(26.9% 0 0);--accent-foreground:oklch(98.5% 0 0);--destructive:oklch(57.7% .245 27.325);--destructive-foreground:oklch(98.5% 0 0);--border-color:oklch(26.9% 0 0);--input:oklch(26.9% 0 0);--ring:oklch(43.9% 0 0);--sidebar-background:oklch(20.5% 0 0);--sidebar-foreground:oklch(98.5% 0 0);--sidebar-primary:oklch(98.5% 0 0);--sidebar-primary-foreground:oklch(20.5% 0 0);--sidebar-accent:oklch(26.9% 0 0);--sidebar-accent-foreground:oklch(98.5% 0 0);--sidebar-border:oklch(26.9% 0 0);--sidebar-ring:oklch(55.6% 0 0)}input[type=date]::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}input[type=time]::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}input[type=datetime-local]::-webkit-calendar-picker-indicator{-webkit-appearance:none;display:none}input[type=date]::-webkit-date-and-time-value{text-align:left}input[type=time]::-webkit-date-and-time-value{text-align:left}input[type=datetime-local]::-webkit-date-and-time-value{text-align:left}input[type=date],input[type=time],input[type=datetime-local]{color-scheme:light}.dark input[type=date],.dark input[type=time],.dark input[type=datetime-local]{color-scheme:dark}.scrollbar-thin{scrollbar-width:thin;scrollbar-color:var(--muted) transparent}.scrollbar-thin::-webkit-scrollbar{width:6px}.scrollbar-thin::-webkit-scrollbar-track{background:0 0;border-radius:3px}.scrollbar-thin::-webkit-scrollbar-thumb{background-color:var(--muted);border-radius:3px}.scrollbar-thin::-webkit-scrollbar-thumb:hover{background-color:var(--muted-foreground)}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}
\ No newline at end of file
diff --git a/Enciphered.Blazor.UIComponents/wwwroot/js/forms.js b/Enciphered.Blazor.UIComponents/wwwroot/js/forms.js
index 26cc246..bdc4f9b 100644
--- a/Enciphered.Blazor.UIComponents/wwwroot/js/forms.js
+++ b/Enciphered.Blazor.UIComponents/wwwroot/js/forms.js
@@ -1,17 +1,6 @@
-/* ═══════════════════════════════════════════════════════════════════════════
- *  Forms Module — handles all interactive form behaviour via vanilla JS.
- *  Manages: Popover open/close, Calendar navigation & day selection,
- *  TimePicker hour/minute/period selection, NumberInput +/- stepping.
- *  Survives Blazor enhanced-navigation via MutationObserver.
- * ═══════════════════════════════════════════════════════════════════════════ */
-
 let initialized = false;
 let bodyObserver = null;
 
-// ─────────────────────────────────────────────────────────────────────────────
-// ── Popover ──────────────────────────────────────────────────────────────────
-// ─────────────────────────────────────────────────────────────────────────────
-
 function openPopover(wrapper) {
     const panel = wrapper.querySelector('[data-popover-panel]');
     const backdrop = wrapper.querySelector('[data-popover-backdrop]');
@@ -36,13 +25,8 @@ function togglePopover(wrapper) {
     else openPopover(wrapper);
 }
 
-// ─────────────────────────────────────────────────────────────────────────────
-// ── Calendar ─────────────────────────────────────────────────────────────────
-// ─────────────────────────────────────────────────────────────────────────────
-
 const DAY_HEADERS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
-const MONTH_NAMES_SHORT = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
-    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+const MONTH_NAMES_SHORT = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
 
 function getCalendarState(cal) {
     return {
@@ -103,7 +87,6 @@ function renderCalendar(cal) {
     const contentEl = cal.querySelector('[data-calendar-content]');
     if (!contentEl) return;
 
-    // Update header labels
     const monthLabel = cal.querySelector('[data-calendar-month]');
     const yearLabel = cal.querySelector('[data-calendar-year]');
     if (monthLabel) monthLabel.textContent = MONTH_NAMES_SHORT[state.displayMonth - 1];
@@ -211,10 +194,6 @@ function calendarNext(cal) {
     setCalendarState(cal, state);
 }
 
-// ─────────────────────────────────────────────────────────────────────────────
-// ── TimePicker ───────────────────────────────────────────────────────────────
-// ─────────────────────────────────────────────────────────────────────────────
-
 function getTimePickerState(tp) {
     return {
         hour: parseInt(tp.getAttribute('data-selected-hour') || '0'),
@@ -234,7 +213,6 @@ function setTimePickerState(tp, state) {
 function renderTimePicker(tp) {
     const state = getTimePickerState(tp);
 
-    // Update selected states on buttons
     tp.querySelectorAll('[data-tp-hour]').forEach(btn => {
         const val = parseInt(btn.getAttribute('data-tp-hour'));
         updateTimeItemSelected(btn, val === state.hour);
@@ -278,10 +256,6 @@ function formatTime12(hour, minute) {
     return String(h12).padStart(2, '0') + ':' + String(minute).padStart(2, '0') + ' ' + (isPm ? 'PM' : 'AM');
 }
 
-// ─────────────────────────────────────────────────────────────────────────────
-// ── NumberInput ──────────────────────────────────────────────────────────────
-// ─────────────────────────────────────────────────────────────────────────────
-
 function handleNumberIncrement(wrapper, direction) {
     const input = wrapper.querySelector('input[type="number"]');
     if (!input) return;
@@ -293,16 +267,13 @@ function handleNumberIncrement(wrapper, direction) {
     let current = parseFloat(input.value) || 0;
     current += step * direction;
 
-    // Clamp
     if (min !== null && current < min) current = min;
     if (max !== null && current > max) current = max;
 
     input.value = current;
-    // Fire native input event so forms pick it up
     input.dispatchEvent(new Event('input', { bubbles: true }));
     input.dispatchEvent(new Event('change', { bubbles: true }));
 
-    // Update disabled state on buttons
     updateStepperDisabledState(wrapper);
 }
 
@@ -325,10 +296,6 @@ function updateStepperDisabledState(wrapper) {
     }
 }
 
-// ─────────────────────────────────────────────────────────────────────────────
-// ── Trigger text sync (DateInput / TimeInput / DateTimeInput) ────────────────
-// ─────────────────────────────────────────────────────────────────────────────
-
 function syncDateTriggerText(hiddenInput) {
     const triggerId = hiddenInput.getAttribute('data-trigger-id');
     if (!triggerId) return;
@@ -341,8 +308,6 @@ function syncDateTriggerText(hiddenInput) {
     if (val) {
         const [y, m, d] = val.split('-').map(Number);
         const date = new Date(y, m - 1, d);
-        // DateTime date-parts use short month ("Dec 25, 2025"),
-        // standalone DateInput uses long month ("December 25, 2025")
         const isDateTimePart = hiddenInput.hasAttribute('data-datetime-part');
         const options = isDateTimePart
             ? { month: 'short', day: 'numeric', year: 'numeric' }
@@ -374,14 +339,9 @@ function syncTimeTriggerText(hiddenInput) {
     }
 }
 
-// ─────────────────────────────────────────────────────────────────────────────
-// ── Global click handler ─────────────────────────────────────────────────────
-// ─────────────────────────────────────────────────────────────────────────────
-
 function handleClick(e) {
     const target = e.target;
 
-    // ── Popover trigger ──
     const popoverTrigger = target.closest('[data-popover-trigger]');
     if (popoverTrigger) {
         const wrapper = popoverTrigger.closest('[data-popover]');
@@ -392,7 +352,6 @@ function handleClick(e) {
         }
     }
 
-    // ── Popover backdrop (close on outside click) ──
     const backdrop = target.closest('[data-popover-backdrop]');
     if (backdrop) {
         const wrapper = backdrop.closest('[data-popover]');
@@ -403,21 +362,18 @@ function handleClick(e) {
         }
     }
 
-    // ── Calendar: Previous button ──
     const prevBtn = target.closest('[data-calendar-prev]');
     if (prevBtn) {
         const cal = prevBtn.closest('[data-calendar]');
         if (cal) { calendarPrev(cal); return; }
     }
 
-    // ── Calendar: Next button ──
     const nextBtn = target.closest('[data-calendar-next]');
     if (nextBtn) {
         const cal = nextBtn.closest('[data-calendar]');
         if (cal) { calendarNext(cal); return; }
     }
 
-    // ── Calendar: Month header toggle ──
     const monthHeader = target.closest('[data-calendar-month]');
     if (monthHeader) {
         const cal = monthHeader.closest('[data-calendar]');
@@ -429,7 +385,6 @@ function handleClick(e) {
         }
     }
 
-    // ── Calendar: Year header toggle ──
     const yearHeader = target.closest('[data-calendar-year]');
     if (yearHeader) {
         const cal = yearHeader.closest('[data-calendar]');
@@ -441,7 +396,6 @@ function handleClick(e) {
         }
     }
 
-    // ── Calendar: Select month ──
     const monthBtn = target.closest('[data-calendar-select-month]');
     if (monthBtn) {
         const cal = monthBtn.closest('[data-calendar]');
@@ -454,7 +408,6 @@ function handleClick(e) {
         }
     }
 
-    // ── Calendar: Select year ──
     const yearBtn = target.closest('[data-calendar-select-year]');
     if (yearBtn) {
         const cal = yearBtn.closest('[data-calendar]');
@@ -469,7 +422,6 @@ function handleClick(e) {
         }
     }
 
-    // ── Calendar: Select day ──
     const dayBtn = target.closest('[data-calendar-day]');
     if (dayBtn && !dayBtn.disabled) {
         const cal = dayBtn.closest('[data-calendar]');
@@ -482,7 +434,6 @@ function handleClick(e) {
             state.displayMonth = m;
             setCalendarState(cal, state);
 
-            // Update the linked hidden input
             const inputId = cal.getAttribute('data-linked-input');
             if (inputId) {
                 const hiddenInput = document.getElementById(inputId);
@@ -493,14 +444,12 @@ function handleClick(e) {
                 }
             }
 
-            // Auto-close popover parent
             const popover = cal.closest('[data-popover]');
             if (popover) closePopover(popover);
             return;
         }
     }
 
-    // ── TimePicker: Select hour ──
     const hourBtn = target.closest('[data-tp-hour]');
     if (hourBtn) {
         const tp = hourBtn.closest('[data-timepicker]');
@@ -513,7 +462,6 @@ function handleClick(e) {
         }
     }
 
-    // ── TimePicker: Select minute ──
     const minuteBtn = target.closest('[data-tp-minute]');
     if (minuteBtn) {
         const tp = minuteBtn.closest('[data-timepicker]');
@@ -526,7 +474,6 @@ function handleClick(e) {
         }
     }
 
-    // ── TimePicker: Select AM/PM ──
     const periodBtn = target.closest('[data-tp-period]');
     if (periodBtn) {
         const tp = periodBtn.closest('[data-timepicker]');
@@ -539,14 +486,12 @@ function handleClick(e) {
         }
     }
 
-    // ── NumberInput: Increment ──
     const incBtn = target.closest('[data-number-increment]');
     if (incBtn) {
         const wrapper = incBtn.closest('[data-number-input]');
         if (wrapper) { handleNumberIncrement(wrapper, 1); return; }
     }
 
-    // ── NumberInput: Decrement ──
     const decBtn = target.closest('[data-number-decrement]');
     if (decBtn) {
         const wrapper = decBtn.closest('[data-number-input]');
@@ -566,10 +511,6 @@ function syncTimeToHiddenInput(tp) {
     syncTimeTriggerText(hiddenInput);
 }
 
-// ─────────────────────────────────────────────────────────────────────────────
-// ── Global input handler (for NumberInput stepper disabled state) ─────────────
-// ─────────────────────────────────────────────────────────────────────────────
-
 function handleInput(e) {
     const target = e.target;
     if (target.matches('[data-number-input] input[type="number"]')) {
@@ -578,27 +519,56 @@ function handleInput(e) {
     }
 }
 
-// ─────────────────────────────────────────────────────────────────────────────
-// ── Init all static calendars/timepickers on the page ────────────────────────
-// ─────────────────────────────────────────────────────────────────────────────
+function syncValidationStyling() {
+    document.querySelectorAll('[data-field-error]').forEach(errEl => {
+        const fieldName = errEl.getAttribute('data-field-error');
+        if (!fieldName) return;
+        const field = document.querySelector(`[data-form-field="${fieldName}"]`);
+        if (!field) return;
+        const input = field.querySelector('input, select, textarea');
+        if (!input) return;
+
+        const hasError = !errEl.classList.contains('hidden') && errEl.textContent.trim().length > 0;
+        if (hasError) {
+            input.classList.add('border-destructive');
+            input.classList.remove('border-input');
+        } else {
+            input.classList.remove('border-destructive');
+            input.classList.add('border-input');
+        }
+    });
+}
+
+function handleFormReset(e) {
+    if (e.target.tagName !== 'FORM') return;
+    const form = e.target;
+    setTimeout(() => {
+        form.querySelectorAll('[data-field-error]').forEach(errEl => {
+            errEl.classList.add('hidden');
+            errEl.textContent = '';
+        });
+        form.querySelectorAll('.border-destructive').forEach(input => {
+            input.classList.remove('border-destructive');
+            input.classList.add('border-input');
+        });
+        const result = form.querySelector('#form-result');
+        if (result) { result.className = 'hidden'; result.innerHTML = ''; }
+    }, 0);
+}
 
 function initComponents() {
-    // Render all calendars
     document.querySelectorAll('[data-calendar]').forEach(cal => {
         renderCalendar(cal);
     });
 
-    // Render all timepickers
     document.querySelectorAll('[data-timepicker]').forEach(tp => {
         renderTimePicker(tp);
     });
 
-    // Init all number input stepper states
     document.querySelectorAll('[data-number-input]').forEach(wrapper => {
         updateStepperDisabledState(wrapper);
     });
 
-    // Ensure all popovers start closed
     document.querySelectorAll('[data-popover]').forEach(wrapper => {
         if (wrapper.getAttribute('data-popover-open') !== 'true') {
             closePopover(wrapper);
@@ -606,30 +576,31 @@ function initComponents() {
     });
 }
 
-// ─────────────────────────────────────────────────────────────────────────────
-// ── Lifecycle ────────────────────────────────────────────────────────────────
-// ─────────────────────────────────────────────────────────────────────────────
-
 export function init() {
     if (initialized) {
         initComponents();
+        if (typeof htmx !== 'undefined') htmx.process(document.body);
         return;
     }
     initialized = true;
 
     initComponents();
+    if (typeof htmx !== 'undefined') htmx.process(document.body);
 
     document.addEventListener('click', handleClick);
     document.addEventListener('input', handleInput);
+    document.addEventListener('reset', handleFormReset, true);
 
-    // Watch for Blazor enhanced-nav replacing content
-    document.addEventListener('blazor:enhanced-load', () => {
-        initComponents();
+    document.addEventListener('htmx:afterSwap', () => {
+        syncValidationStyling();
+    });
+
+    document.addEventListener('blazor:enhanced-load', () => {
+        initComponents();
+        if (typeof htmx !== 'undefined') htmx.process(document.body);
     });
 
-    // Body observer for dynamic content
     bodyObserver = new MutationObserver(() => {
-        // If new calendars/timepickers/popovers appeared, init them
         const uninitCals = document.querySelectorAll('[data-calendar]:not([data-initialized])');
         uninitCals.forEach(cal => {
             cal.setAttribute('data-initialized', 'true');
