{{-- Two-column layout matching overview width --}}
<div class="flex flex-col xl:flex-row gap-4">

    {{-- LEFT: Site Risk Cases --}}
    <div class="bg-white border border-gray-300 rounded-xl p-6 xl:w-[440px] flex-shrink-0" id="siteRiskCasesCard">
        <div class="flex items-center justify-between mb-6 border-b border-gray-300 pb-6">
            <h3 class="text-[20px] font-bold " style="color:#111827;font-family:'DM Sans',sans-serif;">Site Risk Cases</h3>
            <button id="siteRiskExportBtn" title="Export" style="color:#9ca3af;">
                <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
                    <rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/>
                    <rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/>
                </svg>
            </button>
        </div>

        <div class="space-y-5">
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-2.5">
                    <span class="w-2.5 h-2.5 rounded-full flex-shrink-0" style="background:#ef4444;"></span>
                    <span class="text-[14px]" style="color:#374151;font-family:'DM Sans',sans-serif;">Located in Flood Plain</span>
                </div>
                <div class="text-right">
                    <div class="text-[14px] font-bold" style="color:#111827;font-family:'DM Sans',sans-serif;">24,810</div>
                    <div class="text-[11px]" style="color:#9ca3af;font-family:'DM Sans',sans-serif;">(3.8%)</div>
                </div>
            </div>
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-2.5">
                    <span class="w-2.5 h-2.5 rounded-full flex-shrink-0" style="background:#f59e0b;"></span>
                    <span class="text-[14px]" style="color:#374151;font-family:'DM Sans',sans-serif;">Near Hazardous Location</span>
                </div>
                <div class="text-right">
                    <div class="text-[14px] font-bold" style="color:#111827;font-family:'DM Sans',sans-serif;">8,340</div>
                    <div class="text-[11px]" style="color:#9ca3af;font-family:'DM Sans',sans-serif;">(1.3%)</div>
                </div>
            </div>
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-2.5">
                    <span class="w-2.5 h-2.5 rounded-full flex-shrink-0" style="background:#a855f7;"></span>
                    <span class="text-[14px]" style="color:#374151;font-family:'DM Sans',sans-serif;">Both — Flood + Hazardous</span>
                </div>
                <div class="text-right">
                    <div class="text-[14px] font-bold" style="color:#111827;font-family:'DM Sans',sans-serif;">1,240</div>
                    <div class="text-[11px]" style="color:#9ca3af;font-family:'DM Sans',sans-serif;">(0.2%)</div>
                </div>
            </div>

            <div class="border-t border-gray-300 pt-4">
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-2.5">
                        <span class="w-2.5 h-2.5 rounded-full flex-shrink-0" style="background:#1A6B3C;"></span>
                        <span class="text-[14px]" style="color:#374151;font-family:'DM Sans',sans-serif;">Cleared — No Risk Flags</span>
                    </div>
                    <div class="text-right">
                        <div class="text-[14px] font-bold" style="color:#1A6B3C;font-family:'DM Sans',sans-serif;">608,555</div>
                        <div class="text-[11px]" style="color:#9ca3af;font-family:'DM Sans',sans-serif;">(94.3%)</div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Segmented Progress Bar --}}
        <div class="mt-6 flex rounded-full overflow-hidden h-2.5">
            <div style="width:3.8%;background:#ef4444;"></div>
            <div style="width:1.3%;background:#f59e0b;"></div>
            <div style="width:0.2%;background:#a855f7;"></div>
            <div style="width:94.7%;background:#1A6B3C;"></div>
        </div>
    </div>

    {{-- RIGHT: Site Risk Register Table --}}
    <div class="bg-white border border-gray-300 rounded-xl flex-1 min-w-0 overflow-hidden" id="siteRiskRegisterCard">
        <div class="px-5 py-3.5 border-b border-gray-100 flex items-center justify-between gap-3">
            <h3 class="text-[20px] font-bold" style="color:#111827;font-family:'DM Sans',sans-serif;">Site Risk Register</h3>
            <div class="flex items-center gap-3">
                <span id="siteRiskTableCount" class="text-[14px]" style="color:#9ca3af;font-family:'DM Sans',sans-serif;"></span>
                <button id="siteRiskFilterBtn" style="color:#9ca3af;" title="Filter">
                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
                        <line x1="4" y1="6" x2="20" y2="6"/><line x1="8" y1="12" x2="16" y2="12"/><line x1="11" y1="18" x2="13" y2="18"/>
                    </svg>
                </button>
                <input id="siteRiskTableSearch" type="text" placeholder="Search..."
                    class="border border-gray-200 rounded-lg px-3 py-1.5 text-[14px] outline-none focus:border-gray-400 w-40"
                    style="font-family:'DM Sans',sans-serif;color:#374151;" />
            </div>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full border-collapse" style="min-width:650px;">
                <thead>
                    <tr style="background:#F5F2EB;border-bottom:1px solid #d2d4d8;">
                        <th data-srtcol="district"   class="srt-th px-5 py-3 text-left whitespace-nowrap cursor-pointer select-none" style="font-size:13px;font-weight:600;color:#9ca3af;letter-spacing:.05em;font-family:'DM Sans',sans-serif;text-transform:uppercase;">District <span class="srt-icon" style="color:#d1d5db;">↕</span></th>
                        <th data-srtcol="ip"         class="srt-th px-5 py-3 text-left whitespace-nowrap cursor-pointer select-none" style="font-size:13px;font-weight:600;color:#9ca3af;letter-spacing:.05em;font-family:'DM Sans',sans-serif;text-transform:uppercase;">IP <span class="srt-icon" style="color:#d1d5db;">↕</span></th>
                        <th data-srtcol="riskType"   class="srt-th px-5 py-3 text-left whitespace-nowrap cursor-pointer select-none" style="font-size:13px;font-weight:600;color:#9ca3af;letter-spacing:.05em;font-family:'DM Sans',sans-serif;text-transform:uppercase;">Risk Type <span class="srt-icon" style="color:#d1d5db;">↕</span></th>
                        <th data-srtcol="cases"      class="srt-th px-5 py-3 text-left whitespace-nowrap cursor-pointer select-none" style="font-size:13px;font-weight:600;color:#9ca3af;letter-spacing:.05em;font-family:'DM Sans',sans-serif;text-transform:uppercase;">Cases <span class="srt-icon" style="color:#d1d5db;">↕</span></th>
                        <th data-srtcol="status"     class="srt-th px-5 py-3 text-left whitespace-nowrap cursor-pointer select-none" style="font-size:13px;font-weight:600;color:#9ca3af;letter-spacing:.05em;font-family:'DM Sans',sans-serif;text-transform:uppercase;">Status <span class="srt-icon" style="color:#d1d5db;">↕</span></th>
                        <th data-srtcol="clearance"  class="srt-th px-5 py-3 text-left whitespace-nowrap cursor-pointer select-none" style="font-size:13px;font-weight:600;color:#9ca3af;letter-spacing:.05em;font-family:'DM Sans',sans-serif;text-transform:uppercase;">Clearance <span class="srt-icon" style="color:#d1d5db;">↕</span></th>
                        <th data-srtcol="action"     class="srt-th px-4 py-3 text-left whitespace-nowrap" style="font-size:13px;font-weight:600;color:#9ca3af;letter-spacing:.05em;font-family:'DM Sans',sans-serif;text-transform:uppercase;">Action</th>
                    </tr>
                </thead>
                <tbody id="siteRiskTableBody"></tbody>
            </table>
        </div>
    </div>

</div>