/* Tables with class "table-stack" show each row as a card on phones.
   Scripts/table-stack.js copies each column's header into its cells' data-label,
   and the header's stack-title / stack-minor classes onto the cells. */
@media (max-width: 767.98px) {
    table.table-stack,
    table.table-stack > tbody,
    table.table-stack > tbody > tr,
    table.table-stack > tbody > tr > td {
        display: block;
        width: 100% !important;
    }

    table.table-stack > thead,
    table.table-stack > tfoot {
        display: none;
    }

    table.table-stack {
        border: 0;
        background: transparent;
    }

    table.table-stack > tbody > tr,
    table.table-stack.table-striped > tbody > tr:nth-of-type(odd),
    table.table-stack.table-hover > tbody > tr:hover {
        display: flex;
        flex-direction: column;
        margin-bottom: 10px;
        padding: 8px 12px;
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
    }

    table.table-stack > tbody > tr > td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        min-height: 0;
        padding: 4px 0;
        border: 0;
        text-align: right;
        overflow-wrap: anywhere;
    }

    table.table-stack > tbody > tr > td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        max-width: 45%;
        color: #5f6673;
        font-size: .85rem;
        font-weight: 600;
        text-align: left;
    }

    table.table-stack > tbody > tr > td.stack-title {
        order: -1;
        justify-content: flex-start;
        padding-bottom: 6px;
        font-size: 1.05rem;
        font-weight: 700;
        text-align: left;
    }

    table.table-stack > tbody > tr > td.stack-title::before,
    table.table-stack > tbody > tr > td.dataTables_empty::before {
        content: none;
    }

    table.table-stack > tbody > tr > td.dataTables_empty {
        justify-content: center;
        text-align: center;
    }

    table.table-stack > tbody > tr > td.stack-minor {
        display: none;
    }
}