/* =====================================================
   BASE TABLE STYLES
   ===================================================== */

   table.datatable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 30px;
    font-size: 1em;
}

table.datatable caption {
    caption-side: top;
    text-align: left;
    font-size: 1.07em;
    font-weight: 600;
    color: #111;
    margin-bottom: 14px;
    padding-bottom: 6px;
    display: none;
}

table.datatable caption.show {
    display: table-caption;
}

table.datatable thead tr {
    background: #333;
    color: white;
}

table.datatable tr td,
table.datatable tr th {
    border-bottom: 1px solid #33333325;
}

table.datatable thead th {
    color: #fff;
    background: #333;
    border: none;
    font-weight: 700;
    font-size: 1em;
    padding: 17px 20px;
}

table.datatable th,
table.datatable td {
    padding: 17px 20px;
    text-align: left;
    border: none;
}

table.datatable tbody th {
    background: inherit;
    color: #222;
    font-size: 1em;
    font-weight: 700;
}

table.datatable td {
    color: #222;
}

table.datatable td:nth-child(n+2),
table.datatable thead th:nth-child(n+2) {
    width: 200px;
    text-align: right;
}


/* =====================================================
   TABLET SCALE ADJUSTMENT
   ===================================================== */

@media (max-width: 800px) {
    table.datatable,
    table.datatable th,
    table.datatable td,
    table.datatable thead th,
    table.datatable tbody th {
        font-size: 0.85em;
    }
}


/* =====================================================
   MOBILE STACKED TABLE
   ===================================================== */

@media (max-width: 700px) {

    /* Hide headers */
    table.datatable thead {
        display: none;
    }

    /* Block layout */
    table.datatable,
    table.datatable tbody,
    table.datatable tr {
        display: block;
        width: 100%;
    }

    table.datatable tr {
        border-bottom: 1px solid #e5e5e5;
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
    }

    /* Row header */
    table.datatable th[scope="row"] {
        display: block;
        font-weight: 600;
        margin-bottom: 0.25rem;
    }

    /* Cell layout */
    table.datatable td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 1rem;
        font-size: 0.95em;
    }

    /* Injected labels */
    table.datatable td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #111;
        opacity: 1;
        flex: 1 1 55%;
        text-align: left;
    }

    table.datatable td:not(:first-child) {
        text-align: right;
    }

    /* =================================================
       CAPTION — CRITICAL FIX
       ================================================= */

    table.datatable caption.show {
        display: block;
        width: 100%;
        max-width: none;
        box-sizing: border-box;
        font-size: 1.05em;
        font-weight: 600;
        margin-bottom: 0.75rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid #ddd;
    }
}