{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "benefits-enrollment-portal",
  "title": "Benefits Enrollment Portal",
  "type": "registry:page",
  "files": [
    {
      "path": "packages/registry-vue/blocks/benefits-enrollment-portal/BenefitsEnrollmentPortal.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref, type HTMLAttributes } from 'vue'\nimport {\n  AlertCircle,\n  Check,\n  CheckCircle2,\n  Clock,\n  Download,\n  Eye,\n  FileCheck,\n  FileSignature,\n  HeartPulse,\n  PiggyBank,\n  RefreshCw,\n  ShieldCheck,\n  User,\n  Users,\n  Percent,\n} from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'\nimport { Slider } from '@/components/ui/slider'\nimport CostSummaryPanel from './CostSummaryPanel.vue'\n\ninterface Props {\n  employeeName?: string\n  employeeId?: string\n  coverageTier?: string\n  department?: string\n  deadlineDate?: string\n  daysRemaining?: number\n  annualSalary?: number\n  payPeriodsPerYear?: number\n  initialMedicalPlan?: string\n  initialDentalPlan?: string\n  initialVisionPlan?: string\n  initial401kRate?: number\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  employeeName: 'Elena Rostova',\n  employeeId: 'EMP-48201',\n  coverageTier: 'Employee + Spouse',\n  department: 'Engineering · Senior Staff',\n  deadlineDate: 'Sep 15',\n  daysRemaining: 14,\n  annualSalary: 120000,\n  payPeriodsPerYear: 24,\n  initialMedicalPlan: 'medical-ppo-hsa',\n  initialDentalPlan: 'dental-comprehensive',\n  initialVisionPlan: 'vision-choice-plus',\n  initial401kRate: 6,\n})\n\n// Benefit plans configuration\nexport interface MedicalPlan {\n  id: string\n  name: string\n  carrier: string\n  badge?: string\n  badgeVariant?: 'default' | 'secondary' | 'outline'\n  employeeCostPerPaycheck: number\n  employerCostPerMonth: number\n  deductible: string\n  outOfPocketMax: string\n  copayOrCoinsurance: string\n  hsaSeed: number\n  description: string\n  highlights: string[]\n}\n\nconst MEDICAL_PLANS: MedicalPlan[] = [\n  {\n    id: 'medical-ppo-hsa',\n    name: 'BlueCross PPO High Deductible + HSA',\n    carrier: 'BlueCross BlueShield',\n    badge: 'Popular · HSA Eligible',\n    badgeVariant: 'secondary',\n    employeeCostPerPaycheck: 85,\n    employerCostPerMonth: 450,\n    deductible: '$1,600 ind / $3,200 fam',\n    outOfPocketMax: '$4,000 ind / $8,000 fam',\n    copayOrCoinsurance: '10% after deductible',\n    hsaSeed: 500,\n    description: 'Triple tax-advantaged health savings account with an employer-funded annual HSA contribution.',\n    highlights: [\n      '$500 annual employer HSA contribution funded on Jan 1',\n      '100% preventive care covered in-network with $0 deductible',\n      'Flexible nationwide PPO specialist access without referrals',\n    ],\n  },\n  {\n    id: 'medical-gold-ppo',\n    name: 'BlueCross Gold Premier PPO',\n    carrier: 'BlueCross BlueShield',\n    badge: 'Low $250 Deductible',\n    badgeVariant: 'outline',\n    employeeCostPerPaycheck: 180,\n    employerCostPerMonth: 520,\n    deductible: '$250 ind / $500 fam',\n    outOfPocketMax: '$2,500 ind / $5,000 fam',\n    copayOrCoinsurance: '$20 Primary / $40 Specialist',\n    hsaSeed: 0,\n    description: 'Predictable low-copay coverage designed for frequent medical care, prescriptions, and peace of mind.',\n    highlights: [\n      'Ultra-low $250 individual deductible for comprehensive care',\n      '$20 primary care & $40 specialist fixed office visit copays',\n      'Tier 1 generic prescriptions covered at $10 copay',\n    ],\n  },\n  {\n    id: 'medical-kaiser-hmo',\n    name: 'Kaiser Permanente HMO',\n    carrier: 'Kaiser Permanente',\n    badge: '$0 Deductible',\n    badgeVariant: 'outline',\n    employeeCostPerPaycheck: 40,\n    employerCostPerMonth: 420,\n    deductible: '$0 ind / $0 fam',\n    outOfPocketMax: '$1,500 ind / $3,000 fam',\n    copayOrCoinsurance: '$15 Primary / $25 Specialist',\n    hsaSeed: 0,\n    description: 'Integrated in-network HMO coverage with zero deductible and lowest payroll deduction.',\n    highlights: [\n      '$0 deductible with everything under one roof at Kaiser centers',\n      '$15 copay for routine medical and virtual telehealth visits',\n      'Lowest bi-weekly payroll deduction across all medical tiers',\n    ],\n  },\n]\n\nexport interface DentalPlan {\n  id: string\n  name: string\n  carrier: string\n  badge?: string\n  badgeVariant?: 'default' | 'secondary' | 'outline'\n  employeeCostPerPaycheck: number\n  employerCostPerMonth: number\n  annualMax: string\n  preventive: string\n  basic: string\n  majorOrOrtho: string\n  description: string\n}\n\nconst DENTAL_PLANS: DentalPlan[] = [\n  {\n    id: 'dental-comprehensive',\n    name: 'Delta Dental Premier Comprehensive',\n    carrier: 'Delta Dental',\n    badge: 'Comprehensive · Ortho Included',\n    badgeVariant: 'secondary',\n    employeeCostPerPaycheck: 14,\n    employerCostPerMonth: 35,\n    annualMax: '$2,000 / member / yr',\n    preventive: '100% (2 cleanings & exams / yr)',\n    basic: '80% coverage (fillings & endodontics)',\n    majorOrOrtho: '50% coverage ($1,500 lifetime ortho)',\n    description: 'Complete coverage for preventative cleanings, major restorative procedures, and orthodontic care.',\n  },\n  {\n    id: 'dental-basic',\n    name: 'Delta Dental Basic',\n    carrier: 'Delta Dental',\n    badge: 'Basic Preventive',\n    badgeVariant: 'outline',\n    employeeCostPerPaycheck: 5,\n    employerCostPerMonth: 20,\n    annualMax: '$1,000 / member / yr',\n    preventive: '100% (2 cleanings / yr)',\n    basic: '50% coverage',\n    majorOrOrtho: 'Not covered',\n    description: 'Essential preventive dental care for routine bi-annual cleanings, exams, and basic cavity fillings.',\n  },\n  {\n    id: 'dental-waive',\n    name: 'Waive Dental Coverage',\n    carrier: 'Decline',\n    employeeCostPerPaycheck: 0,\n    employerCostPerMonth: 0,\n    annualMax: '$0',\n    preventive: 'None',\n    basic: 'None',\n    majorOrOrtho: 'None',\n    description: 'Decline dental insurance coverage for the 2026-2027 plan year.',\n  },\n]\n\nexport interface VisionPlan {\n  id: string\n  name: string\n  carrier: string\n  badge?: string\n  badgeVariant?: 'default' | 'secondary' | 'outline'\n  employeeCostPerPaycheck: number\n  employerCostPerMonth: number\n  examCopay: string\n  frameAllowance: string\n  lenses: string\n  description: string\n}\n\nconst VISION_PLANS: VisionPlan[] = [\n  {\n    id: 'vision-choice-plus',\n    name: 'VSP Vision Choice Plus',\n    carrier: 'VSP Vision Care',\n    badge: '$200 Frame Allowance',\n    badgeVariant: 'secondary',\n    employeeCostPerPaycheck: 8,\n    employerCostPerMonth: 12,\n    examCopay: '$10 copay (every 12 mo)',\n    frameAllowance: '$200 allowance + 20% off overage',\n    lenses: 'Progressives & anti-glare covered in full',\n    description: 'Premium vision coverage with generous designer frame allowances and full progressive lens coverage.',\n  },\n  {\n    id: 'vision-standard',\n    name: 'VSP Standard Vision',\n    carrier: 'VSP Vision Care',\n    badge: 'Standard',\n    badgeVariant: 'outline',\n    employeeCostPerPaycheck: 3,\n    employerCostPerMonth: 8,\n    examCopay: '$15 copay (every 12 mo)',\n    frameAllowance: '$120 frame allowance',\n    lenses: 'Standard single-vision lenses covered',\n    description: 'Core vision benefit for annual eye exams and standard prescription glasses.',\n  },\n  {\n    id: 'vision-waive',\n    name: 'Waive Vision Coverage',\n    carrier: 'Decline',\n    employeeCostPerPaycheck: 0,\n    employerCostPerMonth: 0,\n    examCopay: '$0',\n    frameAllowance: '$0',\n    lenses: 'None',\n    description: 'Decline vision insurance coverage for the 2026-2027 plan year.',\n  },\n]\n\n// State\nconst selectedMedical = ref<string>(props.initialMedicalPlan)\nconst selectedDental = ref<string>(props.initialDentalPlan)\nconst selectedVision = ref<string>(props.initialVisionPlan)\nconst k401Rate = ref<number>(props.initial401kRate)\nconst isSubmitted = ref<boolean>(false)\nconst signatureAcknowledged = ref<boolean>(false)\nconst showSignModal = ref<boolean>(false)\n\n// 401(k) slider marks\nconst SLIDER_MARKS = {\n  1: '1%',\n  4: '4%',\n  6: '6% (Max Match)',\n  10: '10%',\n  15: '15%',\n  20: '20%',\n}\n\n// Current Plan Objects\nconst currentMedical = computed(() => MEDICAL_PLANS.find((p) => p.id === selectedMedical.value) ?? MEDICAL_PLANS[0])\nconst currentDental = computed(() => DENTAL_PLANS.find((p) => p.id === selectedDental.value) ?? DENTAL_PLANS[0])\nconst currentVision = computed(() => VISION_PLANS.find((p) => p.id === selectedVision.value) ?? VISION_PLANS[0])\n\n// Paycheck & Salary Calculations\nconst paycheckGross = computed(() => props.annualSalary / props.payPeriodsPerYear)\n\n// 401(k) Employee Contribution\nconst k401EmployeePerPaycheck = computed(() => (paycheckGross.value * k401Rate.value) / 100)\nconst k401EmployeeAnnual = computed(() => k401EmployeePerPaycheck.value * props.payPeriodsPerYear)\n\n// Employer 401(k) Match Logic:\n// 100% match up to 4% + 50% match on next 2% -> Max 5.0% match unlocked at 6% employee contribution\n// At $120,000 salary: 5.0% of $120,000 = $6,000 / year ($250 / paycheck)\nconst employerMatchRate = computed(() => {\n  if (k401Rate.value <= 0) return 0\n  if (k401Rate.value <= 4) return k401Rate.value\n  if (k401Rate.value === 5) return 4.5\n  return 5.0\n})\n\nconst k401EmployerPerPaycheck = computed(() => (paycheckGross.value * employerMatchRate.value) / 100)\nconst k401EmployerAnnual = computed(() => k401EmployerPerPaycheck.value * props.payPeriodsPerYear)\nconst maxMatchUnlocked = computed(() => k401Rate.value >= 6)\nconst missedMatchAnnual = computed(() => {\n  const maxPossible = (props.annualSalary * 5.0) / 100\n  return Math.max(0, maxPossible - k401EmployerAnnual.value)\n})\n\n// Health & Welfare Employee Cost Per Paycheck\nconst healthCostPerPaycheck = computed(() => {\n  return (\n    currentMedical.value.employeeCostPerPaycheck +\n    currentDental.value.employeeCostPerPaycheck +\n    currentVision.value.employeeCostPerPaycheck\n  )\n})\n\n// Total Employee Deductions Per Paycheck (Health + 401k)\nconst totalEmployeePerPaycheck = computed(() => healthCostPerPaycheck.value + k401EmployeePerPaycheck.value)\n\n// Tax Savings Estimate (assuming ~25% effective marginal bracket for pre-tax deductions)\nconst estimatedTaxSavingsPerPaycheck = computed(() => Math.round(totalEmployeePerPaycheck.value * 0.25 * 100) / 100)\nconst netTakeHomeImpact = computed(() => totalEmployeePerPaycheck.value - estimatedTaxSavingsPerPaycheck.value)\n\n// Total Employer Annual Benefit Value\n// Employer Medical + Employer Dental + Employer Vision + HSA Seed + Employer 401k Match + Life/Disability Insurance ($2,386)\nconst employerMedicalAnnual = computed(() => currentMedical.value.employerCostPerMonth * 12)\nconst employerDentalAnnual = computed(() => currentDental.value.employerCostPerMonth * 12)\nconst employerVisionAnnual = computed(() => currentVision.value.employerCostPerMonth * 12)\nconst hsaSeedAnnual = computed(() => currentMedical.value.hsaSeed)\nconst employerLifeDisabilityAnnual = 2386\n\nconst totalEmployerAnnualValue = computed(() => {\n  return (\n    employerMedicalAnnual.value +\n    employerDentalAnnual.value +\n    employerVisionAnnual.value +\n    hsaSeedAnnual.value +\n    k401EmployerAnnual.value +\n    employerLifeDisabilityAnnual\n  )\n})\n\nfunction handleSignAndSubmit() {\n  if (!signatureAcknowledged.value) return\n  isSubmitted.value = true\n  showSignModal.value = false\n}\n\nfunction handleResetEnrollment() {\n  isSubmitted.value = false\n  signatureAcknowledged.value = false\n}\n</script>\n\n<template>\n  <div\n    data-slot=\"benefits-enrollment-portal\"\n    :class=\"cn('mx-auto w-full max-w-6xl space-y-8 p-4 sm:p-6 lg:p-8', props.class)\"\n  >\n    <!-- Header Banner -->\n    <div class=\"border-border bg-card relative overflow-hidden rounded-xl border p-6 shadow-xs\">\n      <div class=\"flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between\">\n        <div class=\"space-y-2\">\n          <div class=\"flex flex-wrap items-center gap-2.5\">\n            <Badge\n              wrap\n              variant=\"outline\"\n              class=\"border-warning/30 bg-warning/10 text-warning max-w-full gap-1.5 px-3 py-1 text-left text-xs font-semibold\"\n            >\n              <Clock class=\"size-3.5\" />\n              Open Enrollment Period Ends {{ deadlineDate }} · {{ daysRemaining }} Days Left\n            </Badge>\n            <Badge\n              v-if=\"isSubmitted\"\n              variant=\"secondary\"\n              class=\"border-success/30 bg-success/10 text-success gap-1 text-xs font-semibold\"\n            >\n              <CheckCircle2 class=\"size-3.5\" />\n              Elections Submitted & Signed\n            </Badge>\n          </div>\n\n          <div>\n            <h1 class=\"text-foreground text-2xl font-bold tracking-tight sm:text-3xl\">\n              Annual Benefits Open Enrollment\n            </h1>\n            <p class=\"text-muted-foreground mt-1 text-sm sm:text-base\">\n              Select your health coverage, retirement matching, and ancillary wellness plans for the 2026-2027 plan\n              year.\n            </p>\n          </div>\n\n          <!-- Employee metadata strip -->\n          <div\n            class=\"border-border/60 bg-muted/40 text-muted-foreground mt-3 inline-flex flex-wrap items-center gap-x-4 gap-y-1.5 rounded-lg border px-3.5 py-2 text-xs\"\n          >\n            <div class=\"text-foreground flex items-center gap-1.5 font-medium\">\n              <User class=\"text-primary size-3.5\" />\n              <span>{{ employeeName }}</span>\n            </div>\n            <div class=\"flex items-center gap-1.5\">\n              <Users class=\"size-3.5\" />\n              <span\n                >Tier: <strong class=\"text-foreground font-medium\">{{ coverageTier }}</strong></span\n              >\n            </div>\n            <div>\n              <span\n                >ID: <strong class=\"text-foreground font-mono font-medium\">{{ employeeId }}</strong></span\n              >\n            </div>\n            <div>\n              <span\n                >Base:\n                <strong class=\"text-foreground font-medium tabular-nums\"\n                  >${{ annualSalary.toLocaleString('en-US') }}/yr</strong\n                ></span\n              >\n            </div>\n          </div>\n        </div>\n\n        <div class=\"flex flex-col gap-2.5 sm:flex-row lg:flex-col lg:items-end\">\n          <Button v-if=\"!isSubmitted\" size=\"lg\" class=\"gap-2 font-semibold shadow-xs\" @click=\"showSignModal = true\">\n            <FileSignature class=\"size-4\" />\n            Save Selections & Sign\n          </Button>\n          <Button\n            v-else\n            variant=\"outline\"\n            size=\"lg\"\n            class=\"border-success/40 bg-success/5 text-success hover:bg-success/10 gap-2 font-semibold\"\n            @click=\"handleResetEnrollment\"\n          >\n            <RefreshCw class=\"size-4\" />\n            Modify My Elections\n          </Button>\n\n          <p class=\"text-muted-foreground text-xs lg:text-right\">\n            Changes take effect <span class=\"text-foreground font-medium\">October 1, 2026</span>\n          </p>\n        </div>\n      </div>\n    </div>\n\n    <!-- Submitted Banner (If Confirmed) -->\n    <div\n      v-if=\"isSubmitted\"\n      class=\"border-success/30 bg-success/10 text-foreground flex flex-col items-start justify-between gap-4 rounded-xl border p-4 sm:flex-row sm:items-center\"\n    >\n      <div class=\"flex flex-wrap items-start gap-3\">\n        <div\n          class=\"border-success/30 bg-success/20 text-success mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-lg border\"\n        >\n          <Check class=\"size-4\" />\n        </div>\n        <div>\n          <p class=\"text-foreground text-sm font-semibold\">Enrollment Signed & Confirmed for Plan Year 2026-2027</p>\n          <p class=\"text-muted-foreground mt-0.5 text-xs\">\n            Confirmation Reference: <span class=\"text-foreground font-mono font-medium\">#BEN-2026-89241</span> · Signed\n            by {{ employeeName }} on August 21, 2026.\n          </p>\n        </div>\n      </div>\n      <Button aria-label=\"Download attachment\" variant=\"outline\" size=\"sm\" class=\"gap-1.5 text-xs\">\n        <Download class=\"size-3.5\" />\n        Download Summary PDF\n      </Button>\n    </div>\n\n    <!-- Main 2-Column Grid: Plan Options (Col 8) + Sticky Paycheck Impact (Col 4) -->\n    <div class=\"grid grid-cols-1 gap-8 lg:grid-cols-12 lg:items-start\">\n      <!-- Plan Selection Flow -->\n      <div class=\"space-y-8 lg:col-span-8\">\n        <!-- Category 1: Medical Health Plan -->\n        <Card class=\"border-border shadow-xs\">\n          <CardHeader class=\"pb-4\">\n            <div class=\"flex flex-wrap items-center justify-between gap-3 sm:flex-nowrap\">\n              <div class=\"flex items-center gap-2.5\">\n                <div\n                  class=\"border-primary/20 bg-primary/10 text-primary flex size-8 shrink-0 items-center justify-center rounded-lg border\"\n                >\n                  <HeartPulse class=\"size-4\" />\n                </div>\n                <div>\n                  <CardTitle class=\"text-base sm:text-lg\">1. Medical Health Plan</CardTitle>\n                  <CardDescription\n                    >Comprehensive inpatient, outpatient, prescription, and preventive medical\n                    coverage.</CardDescription\n                  >\n                </div>\n              </div>\n              <Badge variant=\"secondary\" class=\"text-xs\"> 3 Plans Available </Badge>\n            </div>\n          </CardHeader>\n\n          <CardContent class=\"space-y-4\">\n            <RadioGroup\n              :model-value=\"selectedMedical\"\n              @update:model-value=\"(val) => (selectedMedical = String(val))\"\n              class=\"gap-3.5\"\n            >\n              <div\n                v-for=\"plan in MEDICAL_PLANS\"\n                :key=\"plan.id\"\n                role=\"button\"\n                tabindex=\"0\"\n                :aria-pressed=\"selectedMedical === plan.id\"\n                :class=\"\n                  cn(\n                    'focus-visible:ring-ring relative flex cursor-pointer flex-col gap-3 rounded-xl border p-4.5 transition-colors duration-150 focus-visible:ring-2 focus-visible:outline-none',\n                    selectedMedical === plan.id\n                      ? 'border-primary bg-primary/[0.03] dark:bg-primary/10 ring-primary/30 shadow-xs ring-1'\n                      : 'border-border hover:border-border/80 hover:bg-muted/30',\n                  )\n                \"\n                @click=\"selectedMedical = plan.id\"\n                @keydown.enter=\"selectedMedical = plan.id\"\n                @keydown.space.prevent=\"selectedMedical = plan.id\"\n              >\n                <div class=\"flex flex-wrap items-start justify-between gap-3\">\n                  <div class=\"flex flex-wrap items-start gap-3\">\n                    <RadioGroupItem :id=\"plan.id\" :value=\"plan.id\" class=\"mt-0.5\" />\n                    <div class=\"space-y-1\">\n                      <div class=\"flex flex-wrap items-center gap-2\">\n                        <label :for=\"plan.id\" class=\"text-foreground cursor-pointer text-sm font-semibold sm:text-base\">\n                          {{ plan.name }}\n                        </label>\n                        <Badge v-if=\"plan.badge\" :variant=\"plan.badgeVariant\" class=\"text-xs font-medium\">\n                          {{ plan.badge }}\n                        </Badge>\n                      </div>\n                      <p class=\"text-muted-foreground text-xs\">{{ plan.carrier }} · {{ plan.description }}</p>\n                    </div>\n                  </div>\n\n                  <div class=\"shrink-0 text-right\">\n                    <div class=\"flex items-baseline justify-end gap-1\">\n                      <span class=\"text-foreground text-lg font-bold tabular-nums sm:text-xl\">\n                        ${{ plan.employeeCostPerPaycheck }}\n                      </span>\n                      <span class=\"text-muted-foreground text-xs font-normal\">/ paycheck</span>\n                    </div>\n                    <p class=\"text-muted-foreground text-xs\">\n                      Employer pays\n                      <span class=\"text-foreground font-medium tabular-nums\">${{ plan.employerCostPerMonth }}/mo</span>\n                    </p>\n                  </div>\n                </div>\n\n                <!-- Plan Benefit Matrix Details -->\n                <div\n                  class=\"border-border/60 bg-card/60 mt-1 grid grid-cols-2 gap-2.5 rounded-lg border p-3 text-xs sm:grid-cols-4\"\n                >\n                  <div>\n                    <span class=\"text-muted-foreground block\">Annual Deductible</span>\n                    <span class=\"text-foreground font-semibold tabular-nums\">{{ plan.deductible }}</span>\n                  </div>\n                  <div>\n                    <span class=\"text-muted-foreground block\">Out-of-Pocket Max</span>\n                    <span class=\"text-foreground font-semibold tabular-nums\">{{ plan.outOfPocketMax }}</span>\n                  </div>\n                  <div>\n                    <span class=\"text-muted-foreground block\">Primary / Specialist</span>\n                    <span class=\"text-foreground font-semibold\">{{ plan.copayOrCoinsurance }}</span>\n                  </div>\n                  <div>\n                    <span class=\"text-muted-foreground block\">HSA Company Seed</span>\n                    <span\n                      :class=\"\n                        plan.hsaSeed > 0\n                          ? 'text-success font-semibold tabular-nums'\n                          : 'text-muted-foreground font-medium'\n                      \"\n                    >\n                      {{ plan.hsaSeed > 0 ? `$${plan.hsaSeed} / yr` : 'Not eligible' }}\n                    </span>\n                  </div>\n                </div>\n\n                <!-- Plan Bullet Highlights -->\n                <ul class=\"text-muted-foreground mt-0.5 space-y-1 text-xs\">\n                  <li v-for=\"(highlight, i) in plan.highlights\" :key=\"i\" class=\"flex items-center gap-2\">\n                    <Check class=\"text-primary size-3.5 shrink-0\" />\n                    <span>{{ highlight }}</span>\n                  </li>\n                </ul>\n              </div>\n            </RadioGroup>\n          </CardContent>\n        </Card>\n\n        <!-- Category 2: Dental Plan -->\n        <Card class=\"border-border shadow-xs\">\n          <CardHeader class=\"pb-4\">\n            <div class=\"flex flex-wrap items-center justify-between gap-3 sm:flex-nowrap\">\n              <div class=\"flex items-center gap-2.5\">\n                <div\n                  class=\"border-primary/20 bg-primary/10 text-primary flex size-8 shrink-0 items-center justify-center rounded-lg border\"\n                >\n                  <ShieldCheck class=\"size-4\" />\n                </div>\n                <div>\n                  <CardTitle class=\"text-base sm:text-lg\">2. Dental Plan</CardTitle>\n                  <CardDescription\n                    >Preventive exams, cleanings, restorative treatments, and orthodontic benefits.</CardDescription\n                  >\n                </div>\n              </div>\n              <Badge variant=\"secondary\" class=\"text-xs\"> 2 Plans + Waive </Badge>\n            </div>\n          </CardHeader>\n\n          <CardContent class=\"space-y-4\">\n            <RadioGroup\n              :model-value=\"selectedDental\"\n              @update:model-value=\"(val) => (selectedDental = String(val))\"\n              class=\"gap-3.5\"\n            >\n              <div\n                v-for=\"plan in DENTAL_PLANS\"\n                :key=\"plan.id\"\n                role=\"button\"\n                tabindex=\"0\"\n                :aria-pressed=\"selectedDental === plan.id\"\n                :class=\"\n                  cn(\n                    'focus-visible:ring-ring relative flex cursor-pointer flex-col gap-3 rounded-xl border p-4.5 transition-colors duration-150 focus-visible:ring-2 focus-visible:outline-none',\n                    selectedDental === plan.id\n                      ? 'border-primary bg-primary/[0.03] dark:bg-primary/10 ring-primary/30 shadow-xs ring-1'\n                      : 'border-border hover:border-border/80 hover:bg-muted/30',\n                  )\n                \"\n                @click=\"selectedDental = plan.id\"\n                @keydown.enter=\"selectedDental = plan.id\"\n                @keydown.space.prevent=\"selectedDental = plan.id\"\n              >\n                <div class=\"flex flex-wrap items-start justify-between gap-3\">\n                  <div class=\"flex flex-wrap items-start gap-3\">\n                    <RadioGroupItem :id=\"plan.id\" :value=\"plan.id\" class=\"mt-0.5\" />\n                    <div class=\"space-y-1\">\n                      <div class=\"flex flex-wrap items-center gap-2\">\n                        <label :for=\"plan.id\" class=\"text-foreground cursor-pointer text-sm font-semibold sm:text-base\">\n                          {{ plan.name }}\n                        </label>\n                        <Badge v-if=\"plan.badge\" :variant=\"plan.badgeVariant ?? 'outline'\" class=\"text-xs font-medium\">\n                          {{ plan.badge }}\n                        </Badge>\n                      </div>\n                      <p class=\"text-muted-foreground text-xs\">{{ plan.carrier }} · {{ plan.description }}</p>\n                    </div>\n                  </div>\n\n                  <div class=\"shrink-0 text-right\">\n                    <div class=\"flex items-baseline justify-end gap-1\">\n                      <span class=\"text-foreground text-lg font-bold tabular-nums sm:text-xl\">\n                        ${{ plan.employeeCostPerPaycheck }}\n                      </span>\n                      <span class=\"text-muted-foreground text-xs font-normal\">/ paycheck</span>\n                    </div>\n                    <p v-if=\"plan.employerCostPerMonth > 0\" class=\"text-muted-foreground text-xs\">\n                      Employer pays\n                      <span class=\"text-foreground font-medium tabular-nums\">${{ plan.employerCostPerMonth }}/mo</span>\n                    </p>\n                    <p v-else class=\"text-muted-foreground text-xs\">No payroll deduction</p>\n                  </div>\n                </div>\n\n                <div\n                  v-if=\"plan.employeeCostPerPaycheck > 0\"\n                  class=\"border-border/60 bg-card/60 mt-1 grid grid-cols-2 gap-2.5 rounded-lg border p-3 text-xs sm:grid-cols-4\"\n                >\n                  <div>\n                    <span class=\"text-muted-foreground block\">Annual Maximum</span>\n                    <span class=\"text-foreground font-semibold tabular-nums\">{{ plan.annualMax }}</span>\n                  </div>\n                  <div>\n                    <span class=\"text-muted-foreground block\">Preventive Cleanings</span>\n                    <span class=\"text-foreground font-semibold\">{{ plan.preventive }}</span>\n                  </div>\n                  <div>\n                    <span class=\"text-muted-foreground block\">Basic Services</span>\n                    <span class=\"text-foreground font-semibold\">{{ plan.basic }}</span>\n                  </div>\n                  <div>\n                    <span class=\"text-muted-foreground block\">Major &amp; Orthodontics</span>\n                    <span class=\"text-foreground font-semibold\">{{ plan.majorOrOrtho }}</span>\n                  </div>\n                </div>\n              </div>\n            </RadioGroup>\n          </CardContent>\n        </Card>\n\n        <!-- Category 3: Vision Plan -->\n        <Card class=\"border-border shadow-xs\">\n          <CardHeader class=\"pb-4\">\n            <div class=\"flex flex-wrap items-center justify-between gap-3 sm:flex-nowrap\">\n              <div class=\"flex items-center gap-2.5\">\n                <div\n                  class=\"border-primary/20 bg-primary/10 text-primary flex size-8 shrink-0 items-center justify-center rounded-lg border\"\n                >\n                  <Eye class=\"size-4\" />\n                </div>\n                <div>\n                  <CardTitle class=\"text-base sm:text-lg\">3. Vision Plan</CardTitle>\n                  <CardDescription\n                    >Routine eye exams, designer frame allowances, contact lenses, and progressive lens\n                    discounts.</CardDescription\n                  >\n                </div>\n              </div>\n              <Badge variant=\"secondary\" class=\"text-xs\"> 2 Plans + Waive </Badge>\n            </div>\n          </CardHeader>\n\n          <CardContent class=\"space-y-4\">\n            <RadioGroup\n              :model-value=\"selectedVision\"\n              @update:model-value=\"(val) => (selectedVision = String(val))\"\n              class=\"gap-3.5\"\n            >\n              <div\n                v-for=\"plan in VISION_PLANS\"\n                :key=\"plan.id\"\n                role=\"button\"\n                tabindex=\"0\"\n                :aria-pressed=\"selectedVision === plan.id\"\n                :class=\"\n                  cn(\n                    'focus-visible:ring-ring relative flex cursor-pointer flex-col gap-3 rounded-xl border p-4.5 transition-colors duration-150 focus-visible:ring-2 focus-visible:outline-none',\n                    selectedVision === plan.id\n                      ? 'border-primary bg-primary/[0.03] dark:bg-primary/10 ring-primary/30 shadow-xs ring-1'\n                      : 'border-border hover:border-border/80 hover:bg-muted/30',\n                  )\n                \"\n                @click=\"selectedVision = plan.id\"\n                @keydown.enter=\"selectedVision = plan.id\"\n                @keydown.space.prevent=\"selectedVision = plan.id\"\n              >\n                <div class=\"flex flex-wrap items-start justify-between gap-3\">\n                  <div class=\"flex flex-wrap items-start gap-3\">\n                    <RadioGroupItem :id=\"plan.id\" :value=\"plan.id\" class=\"mt-0.5\" />\n                    <div class=\"space-y-1\">\n                      <div class=\"flex flex-wrap items-center gap-2\">\n                        <label :for=\"plan.id\" class=\"text-foreground cursor-pointer text-sm font-semibold sm:text-base\">\n                          {{ plan.name }}\n                        </label>\n                        <Badge v-if=\"plan.badge\" :variant=\"plan.badgeVariant ?? 'outline'\" class=\"text-xs font-medium\">\n                          {{ plan.badge }}\n                        </Badge>\n                      </div>\n                      <p class=\"text-muted-foreground text-xs\">{{ plan.carrier }} · {{ plan.description }}</p>\n                    </div>\n                  </div>\n\n                  <div class=\"shrink-0 text-right\">\n                    <div class=\"flex items-baseline justify-end gap-1\">\n                      <span class=\"text-foreground text-lg font-bold tabular-nums sm:text-xl\">\n                        ${{ plan.employeeCostPerPaycheck }}\n                      </span>\n                      <span class=\"text-muted-foreground text-xs font-normal\">/ paycheck</span>\n                    </div>\n                    <p v-if=\"plan.employerCostPerMonth > 0\" class=\"text-muted-foreground text-xs\">\n                      Employer pays\n                      <span class=\"text-foreground font-medium tabular-nums\">${{ plan.employerCostPerMonth }}/mo</span>\n                    </p>\n                    <p v-else class=\"text-muted-foreground text-xs\">No payroll deduction</p>\n                  </div>\n                </div>\n\n                <div\n                  v-if=\"plan.employeeCostPerPaycheck > 0\"\n                  class=\"border-border/60 bg-card/60 mt-1 grid grid-cols-1 gap-2.5 rounded-lg border p-3 text-xs sm:grid-cols-3\"\n                >\n                  <div>\n                    <span class=\"text-muted-foreground block\">Annual Exam Copay</span>\n                    <span class=\"text-foreground font-semibold\">{{ plan.examCopay }}</span>\n                  </div>\n                  <div>\n                    <span class=\"text-muted-foreground block\">Frame Allowance</span>\n                    <span class=\"text-foreground font-semibold tabular-nums\">{{ plan.frameAllowance }}</span>\n                  </div>\n                  <div>\n                    <span class=\"text-muted-foreground block\">Prescription Lenses</span>\n                    <span class=\"text-foreground font-semibold\">{{ plan.lenses }}</span>\n                  </div>\n                </div>\n              </div>\n            </RadioGroup>\n          </CardContent>\n        </Card>\n\n        <!-- Category 4: 401(k) Retirement & Employer Match -->\n        <Card class=\"border-border shadow-xs\">\n          <CardHeader class=\"pb-4\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center gap-2.5\">\n                <div\n                  class=\"border-primary/20 bg-primary/10 text-primary flex size-8 shrink-0 items-center justify-center rounded-lg border\"\n                >\n                  <PiggyBank class=\"size-4\" />\n                </div>\n                <div>\n                  <CardTitle class=\"text-base sm:text-lg\">4. 401(k) Retirement &amp; Employer Match</CardTitle>\n                  <CardDescription\n                    >Pre-tax salary deferrals with tiered 100% + 50% company matching formula.</CardDescription\n                  >\n                </div>\n              </div>\n              <Badge :variant=\"maxMatchUnlocked ? 'default' : 'outline'\" class=\"text-xs\">\n                {{ maxMatchUnlocked ? 'Max Match Active' : 'Match Available' }}\n              </Badge>\n            </div>\n          </CardHeader>\n\n          <CardContent class=\"space-y-6\">\n            <!-- Employer Match Callout Box -->\n            <div\n              class=\"border-primary/30 bg-primary/5 dark:bg-primary/10 flex flex-col gap-3 rounded-xl border p-4 sm:flex-row sm:items-center sm:justify-between\"\n            >\n              <div class=\"flex flex-wrap items-start gap-3\">\n                <Percent class=\"text-primary mt-0.5 size-5 shrink-0\" />\n                <div class=\"space-y-1\">\n                  <span class=\"text-foreground text-sm font-semibold\">Company Match Formula</span>\n                  <p class=\"text-muted-foreground text-xs leading-relaxed\">\n                    100% match up to 4% + 50% match on next 2% ·\n                    <strong class=\"text-foreground font-medium\">Maximum $6,000 employer match unlocked!</strong>\n                  </p>\n                </div>\n              </div>\n\n              <div class=\"shrink-0\">\n                <Badge\n                  :variant=\"maxMatchUnlocked ? 'secondary' : 'outline'\"\n                  :class=\"\n                    maxMatchUnlocked\n                      ? 'border-success/30 bg-success/10 text-success'\n                      : 'border-warning/30 bg-warning/10 text-warning'\n                  \"\n                  class=\"gap-1.5 px-3 py-1 text-xs font-semibold\"\n                >\n                  <CheckCircle2 v-if=\"maxMatchUnlocked\" class=\"size-3.5\" />\n                  <AlertCircle v-else class=\"size-3.5\" />\n                  {{\n                    maxMatchUnlocked\n                      ? '100% Max Match Achieved ($6,000/yr)'\n                      : `Leaving $${missedMatchAnnual.toLocaleString('en-US')}/yr on table`\n                  }}\n                </Badge>\n              </div>\n            </div>\n\n            <!-- Interactive Slider Section -->\n            <div class=\"space-y-4\">\n              <div class=\"flex items-center justify-between\">\n                <div class=\"space-y-0.5\">\n                  <span class=\"text-foreground text-sm font-semibold\">Your Pre-Tax Contribution Rate</span>\n                  <p class=\"text-muted-foreground text-xs\">\n                    Calculated from gross salary (${{\n                      paycheckGross.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })\n                    }}\n                    / semi-monthly paycheck)\n                  </p>\n                </div>\n\n                <div class=\"text-right\">\n                  <div class=\"flex items-baseline justify-end gap-1\">\n                    <span class=\"text-primary text-2xl font-bold tabular-nums sm:text-3xl\"> {{ k401Rate }}% </span>\n                    <span class=\"text-muted-foreground text-xs\">Contribution</span>\n                  </div>\n                  <span class=\"text-foreground text-xs font-medium tabular-nums\">\n                    ${{ k401EmployeePerPaycheck.toFixed(2) }} / paycheck (${{\n                      k401EmployeeAnnual.toLocaleString('en-US')\n                    }}/yr)\n                  </span>\n                </div>\n              </div>\n\n              <div class=\"py-5\">\n                <Slider\n                  :model-value=\"k401Rate\"\n                  :min=\"1\"\n                  :max=\"20\"\n                  :step=\"1\"\n                  :marks=\"SLIDER_MARKS\"\n                  :tooltip=\"\n                    (val) =>\n                      `${val}% (${((props.annualSalary * val) / 100).toLocaleString('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 })}/yr)`\n                  \"\n                  @update:model-value=\"(val) => (k401Rate = typeof val === 'number' ? val : val[0])\"\n                />\n              </div>\n            </div>\n\n            <!-- 401(k) Financial Impact Breakdown -->\n            <div class=\"grid grid-cols-1 gap-3 sm:grid-cols-3\">\n              <div class=\"border-border bg-card/60 rounded-lg border p-3 text-center sm:text-left\">\n                <span class=\"text-muted-foreground block text-xs\">Your Paycheck Deferral</span>\n                <span class=\"text-foreground text-lg font-bold tabular-nums\">\n                  ${{ k401EmployeePerPaycheck.toFixed(2) }}\n                </span>\n                <span class=\"text-muted-foreground block text-xs tabular-nums\">\n                  ${{ k401EmployeeAnnual.toLocaleString('en-US') }} / year\n                </span>\n              </div>\n\n              <div class=\"border-success/30 bg-success/5 rounded-lg border p-3 text-center sm:text-left\">\n                <span class=\"text-success block text-xs font-medium\">Employer Match Added</span>\n                <span class=\"text-success text-lg font-bold tabular-nums\">\n                  +${{ k401EmployerPerPaycheck.toFixed(2) }}\n                </span>\n                <span class=\"text-muted-foreground block text-xs tabular-nums\">\n                  ${{ k401EmployerAnnual.toLocaleString('en-US') }} / year (Free Match)\n                </span>\n              </div>\n\n              <div class=\"border-border bg-card/60 rounded-lg border p-3 text-center sm:text-left\">\n                <span class=\"text-muted-foreground block text-xs\">Total 401(k) Annual Savings</span>\n                <span class=\"text-foreground text-lg font-bold tabular-nums\">\n                  ${{ (k401EmployeeAnnual + k401EmployerAnnual).toLocaleString('en-US') }}\n                </span>\n                <span class=\"text-muted-foreground block text-xs\"> 2026 IRS Cap: $23,500 </span>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n\n      <!-- Sticky Paycheck Impact Summary Box (Col 4) -->\n      <div class=\"lg:sticky lg:top-8 lg:col-span-4\">\n        <Card class=\"border-border bg-card shadow-xs\">\n          <CardHeader class=\"pb-4\">\n            <div class=\"flex items-center justify-between\">\n              <span class=\"text-muted-foreground text-xs font-semibold tracking-wider uppercase\">\n                Paycheck Impact Summary\n              </span>\n              <Badge variant=\"outline\" class=\"text-xs\"> Semi-Monthly </Badge>\n            </div>\n\n            <!-- Primary Highlight Metric 1: Total Employee Cost per Paycheck -->\n            <div class=\"mt-4 space-y-1\">\n              <span class=\"text-muted-foreground text-xs font-medium\">Total Employee Benefit Cost</span>\n              <div class=\"flex items-baseline gap-1.5\">\n                <span class=\"text-foreground text-4xl font-bold tracking-tight tabular-nums sm:text-5xl\">\n                  ${{ healthCostPerPaycheck.toFixed(2) }}\n                </span>\n                <span class=\"text-muted-foreground text-sm font-normal\"> / pay period</span>\n              </div>\n              <p class=\"text-muted-foreground text-xs\">Pre-tax health, dental, and vision deductions</p>\n            </div>\n\n            <!-- Primary Highlight Metric 2: Total Annual Employer Benefit Value -->\n            <div class=\"border-primary/20 bg-primary/5 dark:bg-primary/10 mt-4 rounded-xl border p-3.5\">\n              <span class=\"text-muted-foreground block text-xs font-medium\">Total Annual Employer Value</span>\n              <div class=\"flex items-baseline gap-1\">\n                <span class=\"text-primary text-2xl font-bold tracking-tight tabular-nums sm:text-3xl\">\n                  ${{\n                    totalEmployerAnnualValue.toLocaleString('en-US', {\n                      minimumFractionDigits: 2,\n                      maximumFractionDigits: 2,\n                    })\n                  }}\n                </span>\n                <span class=\"text-muted-foreground text-xs font-normal\"> / year</span>\n              </div>\n              <p class=\"text-muted-foreground mt-1 text-xs\">\n                Includes company medical, dental, vision subsidies, HSA seed, match &amp; insurance.\n              </p>\n            </div>\n          </CardHeader>\n\n          <CardContent class=\"space-y-4 pt-0\">\n            <Separator />\n\n            <!-- Itemized Paycheck Deductions -->\n            <div class=\"space-y-2 text-xs\">\n              <span class=\"text-muted-foreground block font-semibold tracking-wider uppercase\">\n                Employee Payroll Deductions\n              </span>\n\n              <div class=\"flex items-center justify-between\">\n                <span class=\"text-foreground\"\n                  >Medical ({{ currentMedical.name.split(' ')[0] }} {{ currentMedical.name.split(' ')[1] }})</span\n                >\n                <span class=\"text-foreground font-medium tabular-nums\"\n                  >${{ currentMedical.employeeCostPerPaycheck.toFixed(2) }}</span\n                >\n              </div>\n\n              <div class=\"flex items-center justify-between\">\n                <span class=\"text-foreground\"\n                  >Dental ({{ currentDental.name.split(' ')[0] }} {{ currentDental.name.split(' ')[1] }})</span\n                >\n                <span class=\"text-foreground font-medium tabular-nums\"\n                  >${{ currentDental.employeeCostPerPaycheck.toFixed(2) }}</span\n                >\n              </div>\n\n              <div class=\"flex items-center justify-between\">\n                <span class=\"text-foreground\"\n                  >Vision ({{ currentVision.name.split(' ')[0] }} {{ currentVision.name.split(' ')[1] }})</span\n                >\n                <span class=\"text-foreground font-medium tabular-nums\"\n                  >${{ currentVision.employeeCostPerPaycheck.toFixed(2) }}</span\n                >\n              </div>\n\n              <div class=\"border-border/60 flex items-center justify-between border-t pt-1.5 font-semibold\">\n                <span class=\"text-foreground\">Pre-Tax Health Total</span>\n                <span class=\"text-foreground tabular-nums\">${{ healthCostPerPaycheck.toFixed(2) }}</span>\n              </div>\n\n              <div class=\"text-muted-foreground flex items-center justify-between\">\n                <span>401(k) Contribution ({{ k401Rate }}%)</span>\n                <span class=\"text-foreground font-medium tabular-nums\">${{ k401EmployeePerPaycheck.toFixed(2) }}</span>\n              </div>\n\n              <div class=\"bg-muted/50 flex items-center justify-between rounded-md p-2 font-semibold\">\n                <span class=\"text-foreground\">Total Pre-Tax per Paycheck</span>\n                <span class=\"text-foreground tabular-nums\">${{ totalEmployeePerPaycheck.toFixed(2) }}</span>\n              </div>\n\n              <div class=\"border-border/60 text-muted-foreground flex items-center justify-between border-t pt-1\">\n                <span>Est. Pre-Tax Tax Savings (~25%)</span>\n                <span class=\"text-success font-medium tabular-nums\"\n                  >-${{ estimatedTaxSavingsPerPaycheck.toFixed(2) }}</span\n                >\n              </div>\n\n              <div class=\"text-muted-foreground flex items-center justify-between\">\n                <span>Est. Net Take-Home Impact</span>\n                <span class=\"text-foreground font-medium tabular-nums\">-${{ netTakeHomeImpact.toFixed(2) }}</span>\n              </div>\n            </div>\n\n            <Separator />\n\n            <!-- Itemized Employer Annual Contributions -->\n            <div class=\"space-y-1.5 text-xs\">\n              <span class=\"text-muted-foreground block font-semibold tracking-wider uppercase\">\n                Employer Benefits Breakdown\n              </span>\n\n              <div class=\"flex items-center justify-between\">\n                <span class=\"text-muted-foreground\">Medical Subsidy</span>\n                <span class=\"text-foreground font-medium tabular-nums\"\n                  >${{ (currentMedical.employerCostPerMonth * 12).toLocaleString('en-US') }}/yr</span\n                >\n              </div>\n\n              <div class=\"flex items-center justify-between\">\n                <span class=\"text-muted-foreground\">Dental Subsidy</span>\n                <span class=\"text-foreground font-medium tabular-nums\"\n                  >${{ (currentDental.employerCostPerMonth * 12).toLocaleString('en-US') }}/yr</span\n                >\n              </div>\n\n              <div class=\"flex items-center justify-between\">\n                <span class=\"text-muted-foreground\">Vision Subsidy</span>\n                <span class=\"text-foreground font-medium tabular-nums\"\n                  >${{ (currentVision.employerCostPerMonth * 12).toLocaleString('en-US') }}/yr</span\n                >\n              </div>\n\n              <div v-if=\"currentMedical.hsaSeed > 0\" class=\"flex items-center justify-between\">\n                <span class=\"text-muted-foreground\">HSA Annual Contribution</span>\n                <span class=\"text-foreground font-medium tabular-nums\"\n                  >${{ currentMedical.hsaSeed.toLocaleString('en-US') }}/yr</span\n                >\n              </div>\n\n              <div class=\"flex items-center justify-between\">\n                <span class=\"text-muted-foreground\">401(k) Employer Match</span>\n                <span class=\"text-foreground font-medium tabular-nums\"\n                  >${{ k401EmployerAnnual.toLocaleString('en-US') }}/yr</span\n                >\n              </div>\n\n              <div class=\"flex items-center justify-between\">\n                <span class=\"text-muted-foreground\">Life, AD&amp;D &amp; Disability</span>\n                <span class=\"text-foreground font-medium tabular-nums\"\n                  >${{ employerLifeDisabilityAnnual.toLocaleString('en-US') }}/yr</span\n                >\n              </div>\n            </div>\n          </CardContent>\n\n          <CardFooter class=\"flex flex-col gap-2.5 pt-0\">\n            <Button\n              v-if=\"!isSubmitted\"\n              size=\"lg\"\n              class=\"w-full gap-2 font-semibold shadow-xs\"\n              @click=\"showSignModal = true\"\n            >\n              <FileSignature class=\"size-4\" />\n              Save Selections & Sign\n            </Button>\n            <Button\n              v-else\n              variant=\"outline\"\n              size=\"default\"\n              class=\"border-success/30 bg-success/10 text-success w-full gap-2 font-semibold\"\n              @click=\"handleResetEnrollment\"\n            >\n              <Check class=\"size-4\" />\n              Elections Signed (Edit)\n            </Button>\n\n            <p class=\"text-muted-foreground text-center text-xs\">\n              Annual elections lock on {{ deadlineDate }}, 11:59 PM EST\n            </p>\n          </CardFooter>\n        </Card>\n      </div>\n    </div>\n\n    <!-- Electronic Signature Confirmation Modal Dialog -->\n    <div\n      v-if=\"showSignModal\"\n      class=\"bg-background/80 fixed inset-0 z-50 flex items-center justify-center p-4 backdrop-blur-xs\"\n    >\n      <div\n        class=\"border-border bg-card animate-in fade-in zoom-in-95 relative w-full max-w-lg rounded-xl border p-6 shadow-xl duration-150\"\n      >\n        <div class=\"space-y-2\">\n          <div class=\"text-primary flex items-center gap-2\">\n            <FileSignature class=\"size-5\" />\n            <h3 class=\"text-foreground text-lg font-bold\">Review &amp; Sign Elective Enrollment</h3>\n          </div>\n          <p class=\"text-muted-foreground text-xs\">\n            Please verify your selections below before electronically signing for the 2026-2027 plan year.\n          </p>\n        </div>\n\n        <div class=\"border-border bg-muted/40 my-4 space-y-2 rounded-lg border p-3.5 text-xs\">\n          <div class=\"flex items-center justify-between\">\n            <span class=\"text-muted-foreground\">Employee:</span>\n            <span class=\"text-foreground font-medium\">{{ employeeName }} ({{ coverageTier }})</span>\n          </div>\n          <div class=\"flex items-center justify-between\">\n            <span class=\"text-muted-foreground\">Medical Plan:</span>\n            <span class=\"text-foreground font-medium\">{{ currentMedical.name }}</span>\n          </div>\n          <div class=\"flex items-center justify-between\">\n            <span class=\"text-muted-foreground\">Dental Plan:</span>\n            <span class=\"text-foreground font-medium\">{{ currentDental.name }}</span>\n          </div>\n          <div class=\"flex items-center justify-between\">\n            <span class=\"text-muted-foreground\">Vision Plan:</span>\n            <span class=\"text-foreground font-medium\">{{ currentVision.name }}</span>\n          </div>\n          <div class=\"flex items-center justify-between\">\n            <span class=\"text-muted-foreground\">401(k) Contribution:</span>\n            <span class=\"text-foreground font-medium tabular-nums\"\n              >{{ k401Rate }}% (${{ k401EmployeePerPaycheck.toFixed(2) }} / paycheck)</span\n            >\n          </div>\n          <div class=\"border-border/60 flex items-center justify-between border-t pt-2 font-bold\">\n            <span class=\"text-foreground\">Total Deduction per Paycheck:</span>\n            <span class=\"text-foreground tabular-nums\">${{ totalEmployeePerPaycheck.toFixed(2) }}</span>\n          </div>\n        </div>\n\n        <div class=\"space-y-3\">\n          <label class=\"flex cursor-pointer items-start gap-2.5 select-none\">\n            <input\n              type=\"checkbox\"\n              v-model=\"signatureAcknowledged\"\n              class=\"border-input text-primary focus-visible:ring-ring mt-0.5 size-4 rounded border focus-visible:ring-2\"\n            />\n            <span class=\"text-muted-foreground text-xs leading-relaxed\">\n              I acknowledge that I have selected the benefit plans above and authorize pre-tax semi-monthly payroll\n              deductions commencing October 1, 2026.\n            </span>\n          </label>\n        </div>\n\n        <div class=\"mt-6 flex items-center justify-end gap-2.5\">\n          <Button variant=\"outline\" size=\"sm\" @click=\"showSignModal = false\"> Cancel </Button>\n          <Button\n            size=\"sm\"\n            :disabled=\"!signatureAcknowledged\"\n            class=\"gap-1.5 font-semibold\"\n            @click=\"handleSignAndSubmit\"\n          >\n            <FileCheck class=\"size-4\" />\n            Confirm &amp; Submit Signature\n          </Button>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n",
      "type": "registry:page",
      "target": "~/app/components/blocks/BenefitsEnrollmentPortal.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/radio-group.json",
    "https://uipkge.dev/r/vue/slider.json"
  ],
  "description": "Employee benefits open enrollment portal with interactive medical, dental, and vision plan comparisons, customizable 401(k) contribution slider with real-time employer match calculation, and a sticky paycheck impact summary.",
  "categories": [
    "hr",
    "app",
    "form"
  ]
}