@page "/forms5"
@{
    ViewData["Title"] = "Forms 5";
}
@{
    ViewData["SidebarVariant"] = "5";
}

<div class="p-4 md:p-6 space-y-6">
            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">Forms Showcase</h1><p class="text-gray-500 mt-1 text-sm">Comprehensive demo of form components, layouts, and input controls</p></div>
                <div class="flex items-center gap-2">
                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option selected>All Sections</option><option>Basic Layout</option><option>User Profile</option><option>Company</option><option>Tax</option><option>Currency</option><option>Branch</option></select>
                </div>
            </div>

            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-1">
                <div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg></div><div><h3 class="font-bold text-gray-900">Basic Form Layout</h3><p class="text-xs text-gray-400 mt-0.5">Three fundamental layout patterns — vertical, horizontal, and multi-column grid</p></div></div>
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    <div class="p-4 rounded-lg" style="background:#f8fafc;"><div class="flex items-center gap-2 mb-4"><svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"/></svg><span class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Vertical Stack</span></div><div class="space-y-4"><div><div class="h-2.5 w-20 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-24 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-16 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div></div></div>
                    <div class="p-4 rounded-lg" style="background:#f8fafc;"><div class="flex items-center gap-2 mb-4"><svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg><span class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Horizontal</span></div><div class="space-y-4"><div class="flex items-center gap-3"><div class="h-2.5 w-20 rounded bg-gray-200 shrink-0"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div class="flex items-center gap-3"><div class="h-2.5 w-24 rounded bg-gray-200 shrink-0"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div class="flex items-center gap-3"><div class="h-2.5 w-16 rounded bg-gray-200 shrink-0"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div></div></div>
                    <div class="p-4 rounded-lg" style="background:#f8fafc;"><div class="flex items-center gap-2 mb-4"><svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg><span class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Multi Grid</span></div><div class="space-y-4"><div class="grid grid-cols-2 gap-3"><div><div class="h-2.5 w-16 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-20 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div></div><div><div class="h-2.5 w-24 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div class="grid grid-cols-3 gap-3"><div><div class="h-2.5 w-14 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-12 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div><div><div class="h-2.5 w-16 rounded bg-gray-200 mb-2"></div><div class="h-9 w-full rounded-lg bg-gray-100"></div></div></div></div></div>
                </div>
            </div>

            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-2">
                <div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg></div><div><h3 class="font-bold text-gray-900">User Profile</h3><p class="text-xs text-gray-400 mt-0.5">Manage personal account information and preferences</p></div></div>
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                    <div class="space-y-4"><div><label class="block text-sm font-medium text-gray-700 mb-1.5">Full Name</label><input type="text" value="Alexander Johnson" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div><div><label class="block text-sm font-medium text-gray-700 mb-1.5">Email Address</label><input type="email" value="alex@techprosolutions.com" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div><div><label class="block text-sm font-medium text-gray-700 mb-1.5">Role / Position</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option>Chief Executive Officer</option><option selected>Chief Financial Officer</option><option>Chief Technology Officer</option><option>Operations Director</option><option>Sales Manager</option><option>HR Manager</option></select></div><div><label class="block text-sm font-medium text-gray-700 mb-1.5">Date of Birth</label><input type="date" value="1985-06-15" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div><div class="flex items-center justify-between py-2"><div><p class="text-sm font-medium text-gray-700">Account Active</p><p class="text-xs text-gray-400">Enable or disable this user account</p></div><button type="button" x-data="{ on: true }" x-on:click="on = !on" x-bind:class="on ? 'bg-blue-600' : 'bg-gray-300'" class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2" role="switch"><span x-bind:class="on ? 'translate-x-5' : 'translate-x-0'" class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span></button></div></div>
                    <div class="border-l border-gray-100 pl-6">
                        <label class="block text-sm font-medium text-gray-700 mb-2">Additional Information</label>
                        <div class="space-y-4">
                            <div class="grid grid-cols-2 gap-3"><div><label class="block text-xs font-medium text-gray-600 mb-1">Phone Number</label><input type="text" value="+1 (212) 555-0198" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div><div><label class="block text-xs font-medium text-gray-600 mb-1">Department</label><select class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option selected>Finance</option><option>Engineering</option><option>Marketing</option><option>Operations</option><option>Sales</option></select></div></div>
                            <div><label class="block text-xs font-medium text-gray-600 mb-1">Bio / Notes</label><textarea rows="2" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition">15+ years in financial management and strategic planning.</textarea></div>
                            <div class="grid grid-cols-3 gap-3"><div><label class="block text-xs font-medium text-gray-600 mb-1">City</label><input type="text" value="New York" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div><div><label class="block text-xs font-medium text-gray-600 mb-1">State</label><select class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option selected>NY</option><option>CA</option><option>TX</option><option>FL</option><option>IL</option></select></div><div><label class="block text-xs font-medium text-gray-600 mb-1">Zip Code</label><input type="text" value="10118" class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div></div>
                        </div>
                    </div>
                </div>
                <div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #3b82f6;"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Save Changes</button></div>
            </div>

            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-3">
                <div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div><div><h3 class="font-bold text-gray-900">Company Setting</h3><p class="text-xs text-gray-400 mt-0.5">Configure your business entity information and modules</p></div></div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
                    <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Company Name</label><input type="text" value="TechPro Solutions Inc." class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
                    <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Website</label><input type="text" value="https://www.techprosolutions.com" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
                    <div><label class="block text-sm font-medium text-gray-700 mb-1.5">EIN (Tax ID)</label><input type="text" value="12-3456789" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
                    <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Industry Sector</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option>Technology & Software</option><option selected>Financial Services</option><option>Healthcare & Pharmaceutical</option><option>Manufacturing & Industrial</option><option>Retail & E-Commerce</option><option>Education & Training</option></select></div>
                    <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Business Scale</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option>Startup (1-10 employees)</option><option selected>SME (11-100 employees)</option><option>Mid Enterprise (101-500 employees)</option><option>Large Enterprise (501-2000 employees)</option><option>Corporation (2000+ employees)</option></select></div>
                    <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Country of Domicile</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option selected>United States</option><option>Canada</option><option>United Kingdom</option><option>Australia</option><option>Germany</option><option>Singapore</option></select></div>
                    <div class="md:col-span-2"><label class="block text-sm font-medium text-gray-700 mb-2">Active Feature Modules</label><div class="flex flex-wrap gap-4"><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">CRM</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Accounting</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">HRM</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Inventory</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">EAM</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">POS</span></label></div></div>
                </div>
                <div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #3b82f6;"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Save Settings</button></div>
            </div>

            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-4">
                <div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 14l6-6m-5.5.5h.01m4.99 5h.01M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h14a2 2 0 012 2v14a2 2 0 01-2 2z"/></svg></div><div><h3 class="font-bold text-gray-900">Tax Setting</h3><p class="text-xs text-gray-400 mt-0.5">Configure tax codes, rates, and automatic application rules</p></div></div>
                <div class="space-y-5">
                    <div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Tax Code</label><div class="col-span-2"><input type="text" value="TAX-101" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div></div>
                    <div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Tax Name</label><div class="col-span-2"><input type="text" value="Sales Tax" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div></div>
                    <div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Tax Rate (%)</label><div class="col-span-2"><div class="flex items-center gap-3"><input type="range" min="0" max="15" step="0.5" value="11" x-data x-init="$el.addEventListener('input', function(){ document.getElementById('tax-rate-val').textContent = this.value + '%' })" class="w-full accent-blue-600 cursor-pointer"><span id="tax-rate-val" class="text-sm font-semibold text-blue-600 min-w-[3rem]">11%</span></div></div></div>
                    <div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Tax Type</label><div class="col-span-2"><div class="flex items-center gap-5"><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="tax-type" checked class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Sales Tax</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="tax-type" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Income Tax</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="tax-type" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Withholding</span></label></div></div></div>
                    <div class="grid grid-cols-3 gap-4 items-center"><label class="text-sm font-medium text-gray-700 text-right">Auto Apply on Invoice</label><div class="col-span-2"><button type="button" x-data="{ on: true }" x-on:click="on = !on" x-bind:class="on ? 'bg-blue-600' : 'bg-gray-300'" class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2" role="switch"><span x-bind:class="on ? 'translate-x-5' : 'translate-x-0'" class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span></button></div></div>
                </div>
                <div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #3b82f6;"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Save Tax</button></div>
            </div>

            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-5">
                <div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></div><div><h3 class="font-bold text-gray-900">Currency & Exchange Rate Setting</h3><p class="text-xs text-gray-400 mt-0.5">Manage base currency, symbols, conversion rates, and validity</p></div></div>
                <div class="grid grid-cols-3 gap-x-6 gap-y-4">
                    <div class="col-span-2"><label class="block text-sm font-medium text-gray-700 mb-1.5">Base Currency</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option selected>US Dollar (USD)</option><option>Euro (EUR)</option><option>British Pound (GBP)</option><option>Canadian Dollar (CAD)</option><option>Australian Dollar (AUD)</option><option>Swiss Franc (CHF)</option></select></div>
                    <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Currency Symbol</label><input type="text" value="$" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
                    <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Exchange Rate</label><input type="number" value="1.0000" step="0.0001" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
                    <div class="col-span-2"><label class="block text-sm font-medium text-gray-700 mb-1.5">Effective Date</label><input type="date" value="2026-07-01" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
                </div>
                <div class="mt-4 pt-4 border-t border-gray-100"><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Set as default for all branches</span></label></div>
                <div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #3b82f6;"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Save Currency</button></div>
            </div>

            <div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 anim-fade anim-delay-6">
                <div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></div><div><h3 class="font-bold text-gray-900">Multi-Branch Setting</h3><p class="text-xs text-gray-400 mt-0.5">Configure branch information, regional settings, and document numbering</p></div></div>
                <div class="space-y-4">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
                        <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Branch Name</label><input type="text" value="Head Office - New York" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"></div>
                        <div><label class="block text-sm font-medium text-gray-700 mb-1.5">Region / Time Zone</label><select class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition"><option selected>EST (UTC-5) — Eastern Time</option><option>CST (UTC-6) — Central Time</option><option>MST (UTC-7) — Mountain Time</option><option>PST (UTC-8) — Pacific Time</option></select></div>
                        <div class="md:col-span-2"><label class="block text-sm font-medium text-gray-700 mb-1.5">Branch Address</label><textarea rows="2" class="w-full border border-gray-200 rounded-lg px-3.5 py-2.5 text-sm text-gray-800 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 transition">350 Fifth Avenue, Suite 1200, New York, NY 10118</textarea></div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4"><div><label class="flex items-center gap-2 cursor-pointer"><input type="checkbox" checked class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Allow inter-branch transactions</span></label></div><div><label class="block text-sm font-medium text-gray-700 mb-1.5">Document Code Numbering</label><div class="flex items-center gap-5"><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="doc-numbering" checked class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Automatic</span></label><label class="flex items-center gap-2 cursor-pointer"><input type="radio" name="doc-numbering" class="w-4 h-4 border-gray-300 text-blue-600 focus:ring-blue-400"><span class="text-sm text-gray-700">Manual</span></label></div></div></div>
                </div>
                <div class="mt-5 pt-4 border-t border-gray-100 flex justify-end gap-3"><button class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 transition">Cancel</button><button class="px-5 py-2 text-sm font-semibold text-white rounded-lg transition flex items-center gap-1.5" style="background: #3b82f6;"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg> Save Branch</button></div>
            </div>

        </div>