/* Pagination sits next to the record counter, so it drops its own spacing. */
.table-footer .pagination {
    margin-bottom: 0;
    flex-wrap: wrap;
    row-gap: 0.25rem;
}

.table-footer .page-link {
    white-space: nowrap;
    cursor: pointer;
}

/* On phones the pagination takes its own full-width row with compact links. */
@media (max-width: 575.98px) {
    .table-footer > nav {
        width: 100%;
    }

    .table-footer .page-link {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
    }
}

/* From xl up the table must fit the card: long text columns wrap instead of
   pushing the actions column out of the viewport. */
@media (min-width: 1200px) {
    .table-fit {
        width: 100%;
        margin-bottom: 0;
    }

    .table-fit > tbody > tr > td.col-wrap,
    .table-fit > thead > tr > th.col-wrap {
        white-space: normal;
        overflow-wrap: break-word;
        min-width: 8rem;
    }

    /* Fixed-content columns only take what they need, but never less: shrinking
       them would clip the state badge or the action icons. */
    .table-fit > tbody > tr > td:not(.col-wrap),
    .table-fit > thead > tr > th:not(.col-wrap) {
        width: 1%;
        min-width: min-content;
    }

    /* Actions are the point of the table: they stay pinned to the right edge
       even if the remaining columns still force a scroll. */
    .table-fit > thead > tr > th.actions-col,
    .table-fit > tbody > tr > td.actions-col {
        position: sticky;
        right: 0;
        z-index: 2;
        background-color: var(--bs-table-bg, #fff);
        box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg))),
        -0.5rem 0 0.5rem -0.5rem rgba(0, 0, 0, 0.15);
    }

    /* The sticky cell is its own stacking context, so the menu can never rise
       above it: while open the cell itself has to clear the action cells of the
       rows below and the active pagination link, which Bootstrap raises to 3. */
    .table-fit > tbody > tr > td.actions-col:has(.dropdown-menu.show) {
        z-index: 1000;
    }
}

/* Below xl the table stops behaving like a table: every row becomes a card
   and every cell a label/value line, so the content grows vertically instead
   of forcing a horizontal scroll. */
@media (max-width: 1199.98px) {
    .table-stack {
        overflow-x: visible;
    }

    .table-stack > table,
    .table-stack > table > tbody {
        display: block;
        width: 100%;
        border: 0;
    }

    .table-stack > table > thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .table-stack > table > tbody > tr {
        display: block;
        margin-bottom: 0.75rem;
        padding: 0.25rem 0.75rem;
        border: 1px solid var(--bs-border-color, #dee2e6);
        border-radius: 0.5rem;
        background-color: var(--bs-body-bg, #fff);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    }

    .table-stack > table > tbody > tr > td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        width: 100%;
        padding: 0.5rem 0;
        border: 0;
        border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.1));
        white-space: normal !important;
        text-align: right;
        overflow-wrap: anywhere;
    }

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

    /* Zebra striping only muddies the card look. */
    .table-stack > table.table-striped > tbody > tr > td {
        box-shadow: none;
    }

    .table-stack > table > tbody > tr > td::before {
        content: attr(data-label);
        flex: 0 0 40%;
        text-align: left;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        color: var(--bs-secondary-color, #6c757d);
    }

    .table-stack > table > tbody > tr > td:not([data-label])::before,
    .table-stack > table > tbody > tr > td[data-label=""]::before {
        display: none;
    }

    /* Action icons keep a comfortable touch target but must wrap inside the
       card instead of widening it. */
    .table-stack > table > tbody > tr > td > .d-flex {
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
        row-gap: 0.5rem;
    }

    .table-stack > table > tbody > tr > td > .d-flex span.bi:not(.badge) {
        font-size: 1.5rem;
        line-height: 1;
    }

    /* Empty-table message keeps the full width of the card. */
    .table-stack > table > tbody > tr > td[colspan]::before {
        display: none;
    }

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