@php
    $rows = $section['rows'];
@endphp

<style>

    /* Remove default marker */
    summary::marker { display: none; }

    /* WRAPPER for consistent spacing */
    details {
        margin-bottom: 14px;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 2px 6px rgba(0,0,0,0.07);
        border: 1px solid #d8dbe6;
        background: white;
    }

    /* HEADER */
    details > summary {
        background: linear-gradient(90deg, #0d6efd, #3e44ff);
        padding: 16px 22px;
        font-size: 16px;
        font-weight: 600;
        color: white !important;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        list-style: none;
        transition: background 0.3s, box-shadow 0.3s;
    }

    /* Hover effect */
    details > summary:hover {
        background: linear-gradient(90deg, #0b5ed7, #363ce6);
    }

    /* When expanded */
    details[open] > summary {
        background: linear-gradient(90deg, #0b58c0, #2f35cc);
        box-shadow: inset 0 -2px 4px rgba(0,0,0,0.12);
    }

    /* Chevron icon */
    details > summary::after {
        content: "▾";
        font-size: 20px;
        transition: transform 0.3s ease;
        margin-left: 20px;
    }

    details[open] > summary::after {
        transform: rotate(180deg);
    }

    /* Title text */
    .accordion-title-text {
        font-weight: 700;
        font-size: 16px;
    }

    /* SCORE BUBBLE */
    .accordion-score-bubble {
        padding: 6px 14px;
        border-radius: 16px;
        font-size: 14px;
        font-weight: 600;
        display: inline-block;
        margin-right: 12px;
        min-width: 58px;
        text-align: center;
    }

    /* Color-coded score bubbles */
    .score-green  { background:#1fa650; color:white; }
    .score-orange { background:#ff9800; color:white; }
    .score-red    { background:#dc3545; color:white; }
    .score-na     { background:#6c757d; color:white; }


    /* CONTENT WRAPPER */
    .access-section-wrapper {
        padding: 15px;
        background: white;
        border-top: 1px solid #ececf5;
    }

    /* Table visual improvements */
    .table thead th {
        background: #f3f5fb;
        font-weight: 700;
        padding: 12px;
        color: #444;
        text-transform: uppercase;
        font-size: 13px;
        border-bottom: 1px solid #dcdfe6;
    }

    .table tbody tr:hover {
        background: #fafbff;
    }

    .metric-label { font-weight:700; }
    .metric-left { padding:12px; min-width:260px; }
    .metric-cell { text-align:center; padding:10px; }

    /* Badges */
    .badge-yes { background:#28a745; color:white; padding:6px 14px; border-radius:20px; }
    .badge-no  { background:#dc3545; color:white; padding:6px 14px; border-radius:20px; }
    .badge-time { background:#0ea5e9; color:white; padding:6px 14px; border-radius:20px; }
    .badge-score { background:#7c3aed; color:white; padding:6px 14px; border-radius:20px; }

</style>



<div class="access-section-wrapper">

    <div class="p-3">

        <div class="table-responsive">
            <table class="table table-striped table-sm mb-0">

                <thead>
                    <tr>
                        <th class="metric-left">Metric</th>
                        @foreach($calls as $callId => $label)
                            <th class="text-center">{{ $label }}</th>
                        @endforeach
                    </tr>
                </thead>

                <tbody>
                @foreach($rows as $row)
                    <tr>
                        <td class="metric-left">
                            <div class="metric-label">{{ $row['label'] }}</div>
                            <div class="small-muted">{{ $row['column'] }}</div>
                        </td>

                        @foreach($calls as $callId => $label)
                            <td class="metric-cell">
                                {!! $row['formatted'][$callId] ?? '' !!}
                            </td>
                        @endforeach
                    </tr>
                @endforeach
                </tbody>

            </table>
        </div>

    </div>
</div>