/* Full tables remain the desktop view. Compact screens use labelled record cards. */
.responsive-table-container {
    overflow-x: auto;
}

/* Empty-state tables have no records to label, so their column heading is noise. */
.responsive-data-table:has(tbody tr td[colspan]) thead {
    display: none;
}

.responsive-data-table tbody tr.is-filter-hidden {
    display: none !important;
}

.dynamic-no-results.is-filter-hidden {
    display: none !important;
}

@media (max-width: 1050px) {
    .responsive-table-container {
        overflow-x: visible !important;
    }
    .responsive-data-table {
        width: 100% !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }

    .responsive-data-table thead {
        display: none;
    }

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

    .responsive-data-table tbody tr {
        position: relative;
        margin: 0 0 14px;
        padding: 9px clamp(13px, 4vw, 18px);
        border: 1px solid #d6e3ed;
        border-radius: 12px;
        background: #ffffff;
        box-shadow: 0 7px 20px rgba(15, 52, 78, .07);
    }

    .responsive-data-table tbody tr.dynamic-no-results,
    .responsive-data-table tbody tr:has(td[colspan]) {
        margin: 0;
        padding: 28px 10px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    .responsive-data-table tbody tr:last-child {
        margin-bottom: 0;
    }

    .responsive-data-table tbody tr:has(td[colspan]) td {
        display: block !important;
        padding: 28px 10px !important;
        text-align: center !important;
    }

    .responsive-data-table tbody tr:has(td[colspan]) td::before {
        content: none;
    }

    .responsive-data-table tbody td {
        display: grid !important;
        grid-template-columns: minmax(92px, 38%) minmax(0, 1fr);
        gap: 10px;
        align-items: start;
        min-width: 0;
        padding: 8px 0 !important;
        border-bottom: 1px solid #e7eef4 !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        text-align: left !important;
    }

    .responsive-data-table tbody td:last-child {
        border-bottom: 0 !important;
    }

    .responsive-data-table tbody td::before {
        content: attr(data-label);
        color: #52728b;
        font-family: 'JetBrains Mono', monospace;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: .04em;
        line-height: 1.45;
        text-transform: uppercase;
    }

    .responsive-data-table tbody td:first-child {
        padding-top: 11px !important;
    }

    .responsive-data-table tbody td:first-child strong,
    .responsive-data-table tbody td:first-child a {
        color: #0a4174;
        font-weight: 800;
    }

    .responsive-data-table tbody td[data-label="Actions"],
    .responsive-data-table tbody td[data-label="Action"] {
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 8px;
    }

    .responsive-data-table tbody td[data-label="Actions"]::before,
    .responsive-data-table tbody td[data-label="Action"]::before {
        margin-right: auto;
    }

    .responsive-data-table tbody td[data-label="Actions"] > .d-inline-flex,
    .responsive-data-table tbody td[data-label="Action"] > .d-inline-flex {
        max-width: 100%;
        flex-wrap: wrap;
        justify-content: flex-end !important;
    }

    .responsive-data-table tbody td[data-label="Actions"] .btn,
    .responsive-data-table tbody td[data-label="Action"] .btn,
    .responsive-data-table tbody td[data-label="Actions"] button,
    .responsive-data-table tbody td[data-label="Action"] button,
    .responsive-data-table tbody td[data-label="Actions"] a,
    .responsive-data-table tbody td[data-label="Action"] a {
        min-height: 34px;
        margin: 0 !important;
        white-space: nowrap;
    }

    .responsive-data-table tbody td:has(> input[type="checkbox"]):not(:has(> :not(input))) {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
    }

    .responsive-data-table tbody td:has(> input[type="checkbox"]):not(:has(> :not(input)))::before {
        content: 'Select';
    }
}

@media (max-width: 560px) {
    .responsive-data-table tbody td {
        grid-template-columns: minmax(88px, 34%) minmax(0, 1fr);
        gap: 8px;
    }

    .responsive-data-table tbody td[data-label="Actions"],
    .responsive-data-table tbody td[data-label="Action"] {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
    }

    .responsive-data-table tbody td[data-label="Actions"]::before,
    .responsive-data-table tbody td[data-label="Action"]::before {
        grid-column: 1 / -1;
    }

    .responsive-data-table tbody td[data-label="Actions"] > *,
    .responsive-data-table tbody td[data-label="Action"] > * {
        width: 100%;
        justify-content: center;
    }
}