/* OMRF Responsive Table Styles */

.omrf-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.omrf-responsive-table {
    width: 100%;
}

/* --- Mobile: stack rows vertically below 600px --- */
@media screen and (max-width: 600px) {

    .omrf-responsive-table thead {
        /* Hide the header row visually but keep it accessible */
        display: none;
    }

    .omrf-responsive-table,
    .omrf-responsive-table tbody,
    .omrf-responsive-table tr,
    .omrf-responsive-table td {
        display: block;
        width: 100%;
    }

    .omrf-responsive-table tr {
        border: 1px solid #ddd;
        border-radius: 5px;
        margin-bottom: 10px;
        overflow: hidden;
    }

    .omrf-responsive-table td {
        /* Remove inline border styles that don't apply when stacked */
        border: none !important;
        border-bottom: 1px solid #eee !important;
        padding: 8px 10px !important;
        text-align: right;
        position: relative;
        padding-left: 50% !important;
        box-sizing: border-box;
        border-radius: 0 !important;
    }

    .omrf-responsive-table td:last-child {
        border-bottom: none !important;
    }

    /* Show the column header label as a pseudo-element */
    .omrf-responsive-table td[data-label]::before {
        content: attr(data-label);
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 45%;
        text-align: left;
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}