/* Shared table behaviour for narrow screens.  The companion script adds
   .app-table-scroll to existing overflow containers or creates one when a
   table does not have a suitable parent.  This wrapper owns horizontal
   overflow only; the application shell remains responsible for vertical page
   scrolling. */
.app-table-scroll {
    display: block;
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: auto !important;
    /* Do not clip a page or a component which already owns vertical scroll.
       The wrapper has no fixed height, so a normal table still expands it to
       its full height while narrow screens can scroll horizontally. */
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: oklch(var(--bc) / 0.35) transparent;
}

.app-table-surface {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: visible;
}

/* Keep long paginated lists compact while preserving horizontal cell spacing. */
.app-table-paginated .table :where(th, td) {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.app-table-pagination {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

@media (max-width: 639px) {
    .app-table-pagination {
        align-items: flex-start;
        padding: 0.625rem 0.75rem;
    }

    .app-table-pagination > :first-child {
        flex: 1 1 100%;
    }

    .app-table-pagination > :nth-child(2) {
        margin-left: auto;
    }
}

.app-table-scroll > table.app-table-responsive,
.app-table-scroll table.app-table-responsive {
    width: 100%;
    min-width: 100%;
}

@media (max-width: 1023px) {
    .app-table-scroll > table.app-table-responsive,
    .app-table-scroll table.app-table-responsive {
        width: max-content !important;
        min-width: 100%;
        max-width: none !important;
    }

    table.app-table-responsive[data-sticky-actions="true"] {
        border-collapse: separate;
        border-spacing: 0;
    }

    table.app-table-responsive[data-sticky-actions="true"] :where(
        thead th:last-child,
        tbody td:last-child,
        tfoot th:last-child,
        tfoot td:last-child
    ):not([colspan]) {
        width: 1% !important;
        min-width: 0 !important;
        padding-left: 0.375rem !important;
        padding-right: 0.375rem !important;
        white-space: nowrap;
        position: sticky !important;
        right: 0 !important;
        z-index: 2;
        background-color: oklch(var(--b1)) !important;
        box-shadow: inset 1px 0 0 oklch(var(--b3) / 0.7);
    }

    table.app-table-responsive[data-sticky-actions="true"] thead th:last-child {
        z-index: 4;
    }

    table.app-table-responsive[data-sticky-actions="true"][data-action-header="true"] thead th:last-child {
        /* Keep the semantic header for assistive technology, but do not let
           its label make the pinned controls column wider on mobile. */
        font-size: 0 !important;
        line-height: 0 !important;
    }

    table.app-table-responsive[data-sticky-actions="true"][data-action-header="true"] thead th:last-child * {
        font-size: 0 !important;
        line-height: 0 !important;
    }

    table.app-table-responsive[data-sticky-actions="true"] tbody tr:hover td:last-child {
        background-color: oklch(var(--b2)) !important;
    }
}