{{-- サイドパネル：消込詳細 --}}
<div class="bg-white border border-gray-200 rounded-lg shadow-lg h-full flex flex-col"
    x-data="{ loading: false }"
    role="dialog"
    aria-modal="true"
    aria-labelledby="side-panel-title">
    {{-- パネルヘッダー --}}
    <div class="flex justify-between items-center px-4 py-3 border-b border-gray-200 bg-gray-50 rounded-t-lg"
        x-data="{ isAllocation: false }"
        @breakdown-selected.window="isAllocation = $event.detail.isAllocation || false">
        <h3 id="side-panel-title" class="text-sm font-semibold text-gray-700 flex items-center gap-2">
            <i class="fa-solid fa-link text-primary-600" aria-hidden="true"></i>
            消込詳細
            <template x-if="selectedBreakdownIndex !== null">
                <span class="text-xs font-normal text-gray-500">
                    - <span x-text="isAllocation ? '振分No.' : '内訳No.'"></span><span x-text="selectedBreakdownIndex + 1"></span>
                </span>
            </template>
        </h3>
        <button type="button"
            @click="closeSidePanel()"
            class="text-gray-400 hover:text-gray-600 transition-colors p-1"
            title="閉じる"
            aria-label="消込パネルを閉じる">
            <i class="fa-solid fa-times" aria-hidden="true"></i>
        </button>
    </div>

    {{-- パネルボディ --}}
    <div class="flex-1 overflow-y-auto p-4" id="side-panel-body">
        {{-- Livewireコンポーネント（常時マウント、内部で選択状態に応じた表示を制御） --}}
        <livewire:partials.user.payment-receipt-new.entry-matching-side-panel
            :wire:key="'side-panel-matching'" />
    </div>

    {{-- パネルフッター --}}
    <div class="px-4 py-3 border-t border-gray-200 bg-gray-50 rounded-b-lg">
        <div class="flex justify-end">
            <button type="button"
                @click="closeSidePanel()"
                class="px-4 py-2 text-sm bg-gray-200 text-gray-700 rounded hover:bg-gray-300 transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-1"
                aria-label="消込パネルを閉じる">
                閉じる
            </button>
        </div>
    </div>
</div>