      <!-- Equity Statement Results Table -->
      <div v-if="equityStatement" class="space-y-6">
        
        <!-- Standardized Header -->
        <StatementHeader
          :customerName="equityStatement.profile?.holders?.holder?.[0]?.name || 'Customer'"
          :address="equityStatement.profile?.holders?.holder?.[0]?.address || ''"
          :customerId="equityStatement.profile?.holders?.holder?.[0]?.xfina?.customerId || ''"
          :institutionName="equityStatement.xfina?.institutionName || 'Broker'"
          statementType="Equity / Brokerage"
          :accountNumber="equityStatement.maskedAccNumber || ''"
          :statementDetails="[
            ...(equityStatement.transactions?.startDate ? [{ label: 'From', value: formatDate(equityStatement.transactions.startDate) }] : []),
            ...(equityStatement.transactions?.endDate ? [{ label: 'To', value: formatDate(equityStatement.transactions.endDate) }] : []),
            ...(equityStatement.xfina?.generatedDate ? [{ label: 'Generated', value: formatDateTime(equityStatement.xfina.generatedDate, 'xfina.generatedDate', equityStatement.xfina?.dateOnlyPaths) }] : [])
          ]"
        />

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <Card class="bg-card text-card-foreground shadow-sm">
            <CardHeader class="pb-2">
              <CardTitle class="text-sm text-muted-foreground font-semibold uppercase tracking-wider">Portfolio Summary</CardTitle>
            </CardHeader>
            <CardContent>
              <div class="space-y-2">
                <div class="flex justify-between items-center"><span class="text-sm text-muted-foreground">Invested Value</span><span class="font-medium font-mono">{{ formatCurrency(equityStatement.summary?.investmentValue) }}</span></div>
                <div class="flex justify-between items-center"><span class="text-sm text-muted-foreground">Current Value</span><span class="font-medium font-mono text-primary">{{ formatCurrency(equityStatement.summary?.currentValue) }}</span></div>
              </div>
            </CardContent>
          </Card>
        </div>

        <Accordion type="single" collapsible class="w-full">
          <AccordionItem value="holdings" class="border rounded-lg bg-card text-card-foreground shadow-sm overflow-hidden" :disabled="!equityStatement.summary?.investment?.holdings?.holding?.length">
            <AccordionTrigger class="group hover:no-underline px-4 py-4 data-[state=open]:border-b border-border">
              <span class="font-medium text-foreground text-lg text-left w-full pr-4">Holdings</span>
              <template #icon>
                <div class="flex items-center gap-1.5 text-xs font-mono bg-primary/10 text-primary pl-2.5 pr-2 py-1.5 rounded shrink-0 ml-2">
                  <span>{{ equityStatement.summary?.investment?.holdings?.holding?.length || 0 }} {{ equityStatement.summary?.investment?.holdings?.holding?.length === 1 ? 'Asset' : 'Assets' }}</span>
                  <ChevronDown v-if="equityStatement.summary?.investment?.holdings?.holding?.length" class="h-4 w-4 transition-transform duration-200 group-data-[state=open]:rotate-180" />
                </div>
              </template>
            </AccordionTrigger>
            <AccordionContent class="p-4">
              <div class="rounded-md border border-border overflow-x-auto">
                <Table>
                  <TableHeader class="bg-muted/50">
                    <TableRow class="hover:bg-transparent">
                      <TableHead class="text-muted-foreground whitespace-nowrap">Asset</TableHead>
                      <TableHead class="text-muted-foreground whitespace-nowrap text-right">Units</TableHead>
                      <TableHead class="text-right text-muted-foreground whitespace-nowrap">Avg Cost Basis</TableHead>
                      <TableHead class="text-right text-muted-foreground whitespace-nowrap">Last Price</TableHead>
                      <TableHead class="text-right text-muted-foreground whitespace-nowrap">Value</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    <TableRow v-for="(holding, idx) in equityStatement.summary?.investment?.holdings?.holding" :key="idx" class="hover:bg-muted/50 transition-colors">
                      <TableCell class="text-foreground">
                        <div class="flex flex-col">
                          <span class="font-medium">{{ holding.issuerName || holding.description }}</span>
                          <span class="text-xs text-muted-foreground">{{ holding.description || holding.issuerName }} <span v-if="holding.isin">| ISIN: {{ holding.isin }}</span></span>
                        </div>
                      </TableCell>
                      <TableCell class="text-right font-mono text-foreground">{{ formatNumber(holding.units) }}</TableCell>
                      <TableCell class="text-right font-mono text-foreground">{{ formatCurrency(holding.rate) }}</TableCell>
                      <TableCell class="text-right font-mono text-foreground">{{ formatCurrency(holding.lastTradedPrice) }}</TableCell>
                      <TableCell class="text-right font-mono text-foreground font-medium text-primary">{{ formatCurrency((holding.units || 0) * (holding.lastTradedPrice || 0)) }}</TableCell>
                    </TableRow>
                  </TableBody>
                </Table>
              </div>
            </AccordionContent>
          </AccordionItem>
        </Accordion>

        <Accordion type="single" collapsible class="w-full mt-4">
          <AccordionItem value="transactions" class="border rounded-lg bg-card text-card-foreground shadow-sm overflow-hidden" :disabled="!equityStatement.transactions?.transaction?.length">
            <AccordionTrigger class="group hover:no-underline px-4 py-4 data-[state=open]:border-b border-border">
              <span class="font-medium text-foreground text-lg text-left w-full pr-4">Transactions</span>
              <template #icon>
                <div class="flex items-center gap-1.5 text-xs font-mono bg-primary/10 text-primary pl-2.5 pr-2 py-1.5 rounded shrink-0 ml-2">
                  <span>{{ equityStatement.transactions?.transaction?.length || 0 }} {{ equityStatement.transactions?.transaction?.length === 1 ? 'Txn' : 'Txns' }}</span>
                  <ChevronDown v-if="equityStatement.transactions?.transaction?.length" class="h-4 w-4 transition-transform duration-200 group-data-[state=open]:rotate-180" />
                </div>
              </template>
            </AccordionTrigger>
            <AccordionContent class="p-4">
              <div class="rounded-md border border-border overflow-x-auto">
                <Table>
                  <TableHeader class="bg-muted/50">
                    <TableRow class="hover:bg-transparent">
                      <TableHead class="text-muted-foreground whitespace-nowrap">Date</TableHead>
                      <TableHead class="text-muted-foreground whitespace-nowrap">Asset</TableHead>
                      <TableHead class="text-muted-foreground whitespace-nowrap">Type</TableHead>
                      <TableHead class="text-right text-muted-foreground whitespace-nowrap">Units</TableHead>
                      <TableHead class="text-right text-muted-foreground whitespace-nowrap">Rate / Price</TableHead>
                      <TableHead class="text-right text-muted-foreground whitespace-nowrap">Value</TableHead>
                      <TableHead class="text-right text-muted-foreground whitespace-nowrap">Fees</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    <TableRow v-for="(txn, idx) in equityStatement.transactions?.transaction" :key="idx" class="hover:bg-muted/50 transition-colors">
                      <TableCell class="text-foreground whitespace-nowrap">{{ formatDateTime(txn.transactionDateTime, 'transactions.transaction.transactionDateTime', equityStatement.xfina?.dateOnlyPaths) }}</TableCell>
                      <TableCell class="text-foreground">
                        <div class="flex flex-col">
                          <span class="font-medium text-sm">{{ txn.companyName || txn.symbol }}</span>
                          <span class="text-xs text-muted-foreground">{{ txn.symbol }}</span>
                        </div>
                      </TableCell>
                      <TableCell class="text-foreground">
                        <span class="font-medium text-xs px-2 py-1 rounded" :class="{'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400': txn.type === 'BUY', 'bg-rose-100 text-rose-700 dark:bg-rose-900/30 dark:text-rose-400': txn.type === 'SELL'}">
                          {{ txn.type || '-' }}
                        </span>
                      </TableCell>
                      <TableCell class="text-right font-mono text-foreground">{{ formatNumber(txn.units) }}</TableCell>
                      <TableCell class="text-right font-mono text-foreground">{{ formatCurrency(txn.rate) }}</TableCell>
                      <TableCell class="text-right font-mono text-foreground">{{ formatCurrency(txn.tradeValue) }}</TableCell>
                      <TableCell class="text-right font-mono text-foreground">{{ formatCurrency(txn.totalCharge) }}</TableCell>
                    </TableRow>
                  </TableBody>
                </Table>
              </div>
            </AccordionContent>
          </AccordionItem>
        </Accordion>
      </div>
