/**
 * Responsive data tables.
 *
 * Opt in by adding `data-stack-mobile` to a `<table>`. Below the mobile
 * breakpoint the table stops being a grid and each row becomes a card whose
 * cells are label/value pairs. The labels come from the table header and are
 * written into `data-label` by `js/responsive-table.js`.
 */

@media (max-width: 767.98px) {

    /* The wrapper's horizontal scroll is what we are replacing, so drop it
       once the table is stacked. The class is added by the JS module. */
    .table-responsive--stacked {
        overflow-x: visible;
    }

    .table-stack__table {
        display: block;
        width: 100%;
    }

    .table-stack__table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .table-stack__table tbody,
    .table-stack__table tr {
        display: block;
        width: 100%;
    }

    .table-stack__table tbody tr {
        margin-bottom: 10px;
        padding: 4px 16px;
        border: 1px solid var(--dt-line, #f0f0ee);
        border-radius: 20px;
        background: var(--main-color, #fff);
    }

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

    .table-stack__table tbody td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 16px;
        width: auto;
        padding: 10px 0;
        border: 0;
        border-bottom: 1px solid var(--dt-line-soft, #f5f5f3);
        text-align: right;
        white-space: normal;
        /* Unbroken values (IPv6 addresses, long emails, reference codes) must
           wrap rather than widen the card. */
        overflow-wrap: anywhere;
    }

    .table-stack__table tbody tr td:last-child {
        border-bottom: 0;
    }

    .table-stack__table tbody td::before {
        content: attr(data-label);
        flex: 0 0 40%;
        color: var(--dt-faint, #a3a3a3);
        font-size: 12px;
        font-weight: 400;
        line-height: 1.5;
        text-align: left;
        word-break: break-word;
    }

    /* Cells with no header behind them (empty states, spanning cells) keep the
       full width and render without a label. */
    .table-stack__table tbody td[data-label=""]::before,
    .table-stack__table tbody td:not([data-label])::before {
        content: none;
    }

    .table-stack__table tbody td[data-label=""],
    .table-stack__table tbody td:not([data-label]) {
        display: block;
        text-align: center;
    }

    /* The value side of the pair. It keeps its natural width — so badges and
       buttons are not stretched across the card — and is pushed against the
       right edge, opposite its label. */
    .table-stack__table tbody td > * {
        flex: 0 1 auto;
        min-width: 0;
        margin-left: auto;
        text-align: right;
        overflow-wrap: anywhere;
    }

    .table-stack__table tbody td[data-label=""] > *,
    .table-stack__table tbody td:not([data-label]) > * {
        text-align: center;
    }

    /* Cells whose value is a list are too tall and too wide for the two-column
       pair, so their label sits above the content instead of beside it. */
    .table-stack__table tbody td:has(> ul):not(:has(> ul[class])),
    .table-stack__table tbody td:has(> ol) {
        display: block;
        text-align: left;
    }

    .table-stack__table tbody td:has(> ul):not(:has(> ul[class]))::before,
    .table-stack__table tbody td:has(> ol)::before {
        display: block;
        margin-bottom: 6px;
    }

    .table-stack__table tbody td:has(> ul):not(:has(> ul[class])) > ul,
    .table-stack__table tbody td:has(> ol) > ol {
        margin-bottom: 0;
        padding-left: 18px;
        text-align: left;
    }

    /* Controls carry short labels that must not be broken apart by the
       aggressive wrapping the value text needs. */
    .table-stack__table tbody td .btn,
    .table-stack__table tbody td .badge {
        overflow-wrap: normal;
        white-space: nowrap;
    }

    .table-stack__table tbody td .btn {
        min-height: 40px;
    }

    /* Row striping reads as a half-painted band once rows become cards. It is
       drawn with an inset box-shadow, so clearing the background is not
       enough. */
    .table-stack__table.table-striped tbody tr,
    .table-stack__table.table-striped tbody tr > * {
        background: transparent;
        box-shadow: none;
    }

    /* Action cells: the buttons keep their own alignment and get a tap target
       large enough to hit comfortably. */
    .table-stack__table tbody td .orderDatatable_actions,
    .table-stack__table tbody td .userDatatable-content .orderDatatable_actions {
        justify-content: flex-end;
        gap: 4px;
        padding-left: 0;
        list-style: none;
    }

    .table-stack__table tbody td .orderDatatable_actions > li > a,
    .table-stack__table tbody td .orderDatatable_actions > li > form > button,
    .table-stack__table tbody td .orderDatatable_actions > li > button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        min-height: 40px;
    }

    .table-stack__table tbody td .float-right,
    .table-stack__table tbody td .float-end {
        float: none !important;
    }
}