/* ------------------------------------------------------------------
   Wide section-builder tables (Frontend > Manage Section)
   A section with many element fields makes the table wider than the
   card, so the Action column scrolls out of reach. Pin it to the right
   edge and keep the scrollbar visible so there is something to grab.
   Below 768px the theme stacks these tables into cards, so the sticky
   column is desktop-only.
------------------------------------------------------------------ */
@media (min-width: 768px) {
    .table-responsive:has(> .custom-data-table) {
        overflow-x: auto;
    }

    table.custom-data-table thead th:last-child,
    table.custom-data-table tbody td:last-child {
        position: sticky;
        right: 0;
        z-index: 2;
    }

    /* The theme tints these cells with a translucent colour. Sticky cells
       sit on top of scrolling content, so paint the tint over an opaque
       white base instead of letting the row show through. */
    table.table--light.style--two.custom-data-table thead th:last-child {
        background-color: hsl(var(--white));
        background-image: linear-gradient(hsl(var(--primary) / 0.2), hsl(var(--primary) / 0.2));
    }

    table.table--light.style--two.custom-data-table tbody tr td:last-child {
        background-color: hsl(var(--white));
        background-image: linear-gradient(hsl(var(--primary) / 0.03), hsl(var(--primary) / 0.03));
    }

    table.table--light.style--two.custom-data-table tbody tr:nth-child(even) td:last-child {
        background-image: none;
    }

    /* The theme clips this cell to round its corners; the edge shadow sits
       just outside the box, so let it through. */
    table.table--light.style--two.custom-data-table tbody tr td:last-child {
        overflow: visible;
    }

    /* Edge shadow, shown only while there is content hidden underneath. */
    table.custom-data-table thead th:last-child::before,
    table.custom-data-table tbody td:last-child::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -14px;
        width: 14px;
        pointer-events: none;
        background: linear-gradient(to right, rgba(23, 23, 40, 0), rgba(23, 23, 40, 0.09));
    }
}

/* macOS hides overlay scrollbars until they are used, which makes a wide
   table look like it simply ends. Give this one a permanent track. */
.table-responsive:has(> .custom-data-table)::-webkit-scrollbar {
    height: 10px;
    -webkit-appearance: none;
}

.table-responsive:has(> .custom-data-table)::-webkit-scrollbar-track {
    background: hsl(var(--primary) / 0.06);
    border-radius: 10px;
}

.table-responsive:has(> .custom-data-table)::-webkit-scrollbar-thumb {
    background: hsl(var(--primary) / 0.45);
    border-radius: 10px;
}

.table-responsive:has(> .custom-data-table)::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--primary) / 0.7);
}

/* ------------------------------------------------------------------
   Show / hide button inside every password and PIN field
------------------------------------------------------------------ */
.password-toggle-wrap {
    position: relative;
    display: block;
}

.password-toggle-wrap > input {
    padding-right: 46px !important;
}

.password-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 46px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: #8a8f98;
    cursor: pointer;
}

.password-toggle:hover,
.password-toggle:focus-visible {
    color: hsl(var(--primary));
}

/* Shown while the platform owner is looking inside a restaurant. */
.impersonation-bar {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px;
    padding: 10px 20px; background: #1f2328; color: #fff; font-weight: 600;
}
.impersonation-bar a { color: #fff; text-decoration: underline; }

/* A smaller logo, with less empty space around it, so the menu starts higher. */
.sidebar__logo { padding: 30px 28px 26px; }
.sidebar__logo .sidebar__main-logo img { max-height: 40px; width: auto; }