/*
 * Small layout tweaks shared by every layout (admin, default and v1_0 customer).
 */

/*
 * Scrollbars at half Tabler's size. Tabler draws them 1rem wide with a 5px transparent
 * border around the thumb; half of each keeps the same look, thinner.
 */
::-webkit-scrollbar,
.modal-body::-webkit-scrollbar {
    width: .5rem;
    height: .5rem;
}
::-webkit-scrollbar-thumb {
    border-width: 2px;
}
* {
    scrollbar-width: thin; /* Firefox: no width in px, "thin" is its half */
}

/*
 * List footers on a phone: rows-per-page and "Showing x to y" on the first line, the
 * pagination on its own second line. On one line the page links overflowed the card.
 */
@media (max-width: 767.98px) {
    .card-footer.d-flex:has(> .pagination) {
        flex-wrap: wrap;
        row-gap: .5rem;
    }
    .card-footer.d-flex > .pagination {
        flex-basis: 100%;
        flex-wrap: wrap;
        justify-content: center;
        margin-left: 0 !important;
    }
}