@once
@push('stylesheets')
<style>
    .pci-p3b-mpr-preview-card {
        border: 1px solid #bdbdbd;
        border-radius: 4px;
        background: #fff;
        overflow: hidden;
        margin-bottom: 1rem;
        color: #000;
    }
    .pci-p3b-mpr-preview-head {
        display: flex;
        align-items: center;
        padding: .5rem .75rem .4rem;
        gap: .5rem;
    }
    .pci-p3b-mpr-preview-title {
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: #000;
        white-space: nowrap;
    }
    .pci-p3b-mpr-preview-head-line {
        flex: 1 1 auto;
        height: 1px;
        background: #bdbdbd;
    }
    .pci-p3b-mpr-preview-kpis {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        border-top: 1px solid #bdbdbd;
    }
    .pci-p3b-mpr-kpi {
        text-align: center;
        padding: .75rem .4rem;
        border-right: 1px solid #d4d4d4;
    }
    .pci-p3b-mpr-kpi:last-child { border-right: none; }
    .pci-p3b-mpr-kpi__label {
        font-size: .62rem;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: #000;
        margin-bottom: .3rem;
    }
    .pci-p3b-mpr-kpi__value {
        font-size: 1.25rem;
        font-weight: 700;
        color: #000;
        line-height: 1.15;
        word-break: break-word;
    }
    @media (max-width: 767.98px) {
        .pci-p3b-mpr-preview-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .pci-p3b-mpr-kpi:nth-child(2) { border-right: none; }
        .pci-p3b-mpr-kpi:nth-child(1),
        .pci-p3b-mpr-kpi:nth-child(2) { border-bottom: 1px solid #d4d4d4; }
    }
    @media print {
        .pci-p3b-mpr-preview-card {
            border-color: #000;
            break-inside: avoid;
        }
        .pci-p3b-mpr-preview-head-line,
        .pci-p3b-mpr-preview-kpis { border-color: #000; }
        .pci-p3b-mpr-kpi { border-color: #ccc; }
    }
</style>
@endpush
@endonce

<div class="col-12" id="pci-p3b-mpr-preview-wrap" aria-label="MPR Summary Preview" role="region">
    <div class="pci-p3b-mpr-preview-card">
        <div class="pci-p3b-mpr-preview-head">
            <span class="pci-p3b-mpr-preview-title">MPR Summary Preview</span>
            <span class="pci-p3b-mpr-preview-head-line" aria-hidden="true"></span>
        </div>
        <div class="pci-p3b-mpr-preview-kpis">
            <div class="pci-p3b-mpr-kpi">
                <div class="pci-p3b-mpr-kpi__label">ADP No.</div>
                <div class="pci-p3b-mpr-kpi__value" id="pci-p3b-mpr-adp">—</div>
            </div>
            <div class="pci-p3b-mpr-kpi">
                <div class="pci-p3b-mpr-kpi__label">Reporting Month</div>
                <div class="pci-p3b-mpr-kpi__value" id="pci-p3b-mpr-reporting-month">—</div>
            </div>
            <div class="pci-p3b-mpr-kpi">
                <div class="pci-p3b-mpr-kpi__label">Financial %</div>
                <div class="pci-p3b-mpr-kpi__value" id="pci-p3b-mpr-financial-pct">—</div>
            </div>
            <div class="pci-p3b-mpr-kpi">
                <div class="pci-p3b-mpr-kpi__label">Physical %</div>
                <div class="pci-p3b-mpr-kpi__value" id="pci-p3b-mpr-physical-pct">—</div>
            </div>
        </div>
    </div>
</div>