/* =====================================================================
   Tab strip scroller — the paint for assets/js/tabs-scroller.js
   ---------------------------------------------------------------------
   A `.nav-tabs` bar with more tabs than the card is wide used to just
   spill out of its parent (OrderLemon's shop view, Settings > Custom
   Fields, the client/lead/project detail bars...). `.scrollable-tabs`
   existed but only inside the mobile media query, so on a desktop the
   overflowing tabs were simply unreachable.

   tabs-scroller.js wraps any overflowing bar in `.nz-tabscroll` and
   turns the <ul> itself into the scrollport (`.nz-tabscroll-track`).
   Two overlay buttons ride on the ends of that wrapper; the script adds
   `nz-tabscroll-has-prev` / `nz-tabscroll-has-next` to the wrapper to
   show them, so which button exists is a pure CSS state.

   Nothing here fires until the script has classed an element, so a bar
   that never overflows — and every bar at all if the script fails —
   keeps exactly the layout it has today.
   ===================================================================== */

/* Bars that opted into scrolling keep their tabs on ONE line at every
   width. `.scrollable-tabs` used to mean "one line" only under the
   mobile media query in app.all.css, which is why these bars wrapped
   into two rows (or overflowed) on a desktop instead of scrolling. */
.nav-tabs.scrollable-tabs:not(.vertical),
.nav-pills.scrollable-tabs:not(.vertical) {
    flex-wrap: nowrap;
}

.nz-tabscroll {
    position: relative;
}

/* The bar itself is the scrollport — wrapping the tabs in yet another
   scrolling <div> would put the tabs' own background/rounded header
   (`.nav-tabs.title`) outside the thing that scrolls.

   The end padding is permanent rather than tied to `has-prev`/`has-next`
   on purpose: adding it at the moment a button appears would shove the
   whole strip sideways in the middle of a scroll. */
.nz-tabscroll > .nz-tabscroll-track {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    /* !important because the bar this most often lands on is
       `.nav-tabs.bg-white:not(.vertical)` in app.all.css — three class
       selectors' worth of specificity for its `padding: 9px 12px`, which
       a two-class selector here cannot outrank */
    padding-inline: 40px !important;
    scroll-padding-inline: 40px;
    /* the strip must not hand a horizontal gesture to the browser's
       back/forward navigation */
    overscroll-behavior-x: contain;
    /* the scrollbar is replaced by the two buttons */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.nz-tabscroll > .nz-tabscroll-track::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.nz-tabscroll-btn {
    position: absolute;
    top: 50%;
    z-index: 4;
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    transform: translateY(-50%);
    border: 1px solid var(--ios26-hairline-strong);
    border-radius: var(--ios26-pill);
    background: var(--ios26-surface-strong);
    -webkit-backdrop-filter: var(--ios26-blur-sm);
    backdrop-filter: var(--ios26-blur-sm);
    box-shadow: var(--ios26-inset), 0 2px 10px rgba(17, 24, 39, 0.18);
    color: var(--ios26-text);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s var(--ios26-ease), transform 0.2s var(--ios26-ease);
}

.nz-tabscroll-btn-prev {
    inset-inline-start: 6px;
}

.nz-tabscroll-btn-next {
    inset-inline-end: 6px;
}

.nz-tabscroll-has-prev > .nz-tabscroll-btn-prev,
.nz-tabscroll-has-next > .nz-tabscroll-btn-next {
    display: flex;
}

.nz-tabscroll-btn:hover {
    background: var(--ios26-surface);
    color: var(--ios26-text);
}

.nz-tabscroll-btn:active {
    transform: translateY(-50%) scale(0.92);
}

.nz-tabscroll-btn:focus-visible {
    outline: 2px solid var(--ios26-accent-ring);
    outline-offset: 2px;
}

.nz-tabscroll-btn i {
    pointer-events: none;
}

/* the chevrons point at the edge they scroll towards, which flips with
   the writing direction (`inset-inline-*` has already flipped the
   buttons themselves) */
[dir="rtl"] .nz-tabscroll-btn i {
    transform: scaleX(-1);
}

/* dark theme: 1E202D.css loads after this file, but it never names
   these classes, so only the shadow needs restating for a dark ground */
body.color-1E202D .nz-tabscroll-btn {
    box-shadow: var(--ios26-inset), 0 2px 10px rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-motion: reduce) {
    .nz-tabscroll-btn {
        transition: none;
    }
}

/* Touch: the strip is swiped, so the buttons are dead weight and the
   40px they reserve at each end is a big share of a phone's width. The
   track itself stays scrollable — that is the part a phone needs from
   this file for the bars that never carried `.scrollable-tabs`. */
@media (hover: none) and (pointer: coarse) {
    .nz-tabscroll .nz-tabscroll-btn {
        display: none;
    }

    .nz-tabscroll > .nz-tabscroll-track {
        padding-inline: 12px !important;
        scroll-padding-inline: 12px;
    }
}