/* What every admin panel needs, on any product.
 *
 * The panel shell (the product's base template and stylesheet) belongs to
 * the product. These rules only fix how this feature's screens, and the
 * screens other features add to the panel, behave on it.
 */

/* ── Wide tables ────────────────────────────────────────────────────────────
 * A table wider than its card used to be cut off at the card's edge, with
 * the actions column (Edit, Delete) out of reach: the product stylesheet
 * said overflow hidden. Products scaffolded since say auto and draw the cue
 * themselves; these rules give the same behaviour to the ones that are not.
 * The table scrolls inside its box, the edge with more to see carries a soft
 * shadow (the "local" layers travel with the content and cover it once an
 * end is reached), and the generic list keeps its actions column pinned to
 * the right. Pure CSS, so it works before and without any script. */

.main .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    background:
        linear-gradient(to right, var(--s-surface, #ffffff) 30%, transparent) left center / 40px 100% no-repeat local,
        linear-gradient(to left, var(--s-surface, #ffffff) 30%, transparent) right center / 40px 100% no-repeat local,
        linear-gradient(to right, rgba(15, 23, 42, 0.16), transparent) left center / 16px 100% no-repeat scroll,
        linear-gradient(to left, rgba(15, 23, 42, 0.16), transparent) right center / 16px 100% no-repeat scroll,
        var(--s-surface, #ffffff);
    scrollbar-width: thin;
}

/* Bootstrap's stripes and hover are opaque inset shadows on every cell,
   which would hide the scroll shadow on those rows. The same tints, see
   through. */
.main .table-responsive > .table {
    --bs-table-striped-bg: rgba(15, 23, 42, 0.025);
    --bs-table-hover-bg: rgba(15, 23, 42, 0.04);
}

.table .sp-sticky-end {
    position: sticky;
    right: 0;
    z-index: 2;
    background-color: var(--s-surface, #ffffff);
    box-shadow: -10px 0 10px -10px rgba(15, 23, 42, 0.3);
}

/* A head cell takes the background its head has: a band of colour
   (table-dark, table-light) sets --bs-table-bg, a plain head leaves it. */
.table thead .sp-sticky-end {
    background-color: var(--bs-table-bg, var(--s-bg, #f8fafc));
}

.table-striped tbody tr:nth-of-type(odd) > .sp-sticky-end {
    background-image: linear-gradient(rgba(248, 250, 252, 0.5), rgba(248, 250, 252, 0.5));
}

.table-hover tbody tr:hover > .sp-sticky-end,
.table-striped tbody tr:hover > .sp-sticky-end {
    background-image: linear-gradient(
        var(--s-primary-soft, rgba(99, 102, 241, 0.08)),
        var(--s-primary-soft, rgba(99, 102, 241, 0.08))
    );
}

/* ── Top bar on a phone ─────────────────────────────────────────────────────
 * A long address pushed the bar past the right edge of the screen and the
 * site name broke onto two lines. Both shorten with an ellipsis instead. */

.topbar .navbar-collapse,
.topbar .navbar-nav,
.topbar-user {
    min-width: 0;
}

.topbar-user__name {
    display: inline-block;
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

@media (max-width: 575.98px) {
    .topbar-site {
        min-width: 0;
        white-space: nowrap;
    }

    .topbar-site span {
        display: inline-block;
        max-width: 8rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
    }

    .topbar-user__name {
        max-width: 7.5rem;
    }
}