/* Tab bar in one line, whatever the width (static/js/nav-scroller.js, see the styleguide).
   The bar never wraps; what does not fit is reached with the two arrows beside it. They only
   appear when there is something to reach. */

.managi-nav-scroller {
    display: flex;
    align-items: center;
    gap: .25rem;
    /* In a card header the bar is a flex child: without min-width it would keep its full
       content width and push the header apart instead of scrolling. */
    flex: 1 1 auto;
    min-width: 0;
}

/* Card header: Tablers .card-header-tabs paints the grey strip, pulls it over the padding of
   the header and rounds its upper corners. That moves to the wrapper, which is the element
   that now reaches the edges; the bar inside keeps its plain margins. */
.managi-nav-scroller-header {
    background: var(--tblr-bg-surface-tertiary);
    margin: calc(var(--tblr-card-cap-padding-y) * -1) calc(var(--tblr-card-cap-padding-x) * -1);
    padding: calc(var(--tblr-card-cap-padding-y) * .5) calc(var(--tblr-card-cap-padding-x) * .5) 0;
    border-radius: var(--tblr-card-border-radius) var(--tblr-card-border-radius) 0 0;
}

.managi-nav-scroller-header > .card-header-tabs {
    margin: 0;
    padding: 0;
    background: none;
    border-radius: 0;
}

/* The tabs stand on the lower edge of the strip; centred, the arrows would float above the
   row of tab labels. */
.managi-nav-scroller-header .managi-nav-scroller-arrow {
    align-self: flex-end;
    margin-bottom: calc(var(--tblr-card-cap-padding-y) * .5);
}

.managi-nav-scroller > .nav {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-behavior: smooth;
    /* No scrollbar of its own: the arrows say that there is more, and on a trackpad the bar
       scrolls anyway. A bar 4px high under the tabs would only cut into the card header. */
    scrollbar-width: none;
}

.managi-nav-scroller > .nav::-webkit-scrollbar {
    display: none;
}

/* Nothing in the bar breaks into a second line - the state badges inside a tab included.
   They are inline-edit fields and bring white-space: pre-wrap, which would let „In Planung"
   fall apart over two lines and make the bar twice as high. */
.managi-nav-scroller > .nav .nav-link,
.managi-nav-scroller > .nav .nav-link .badge,
.managi-nav-scroller > .nav .nav-link .inline-edit {
    white-space: nowrap;
}

.managi-nav-scroller-arrow {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: var(--tblr-border-radius);
    background: none;
    color: var(--tblr-secondary);
    line-height: 1;
}

.managi-nav-scroller-arrow:hover:not(:disabled) {
    color: var(--tblr-body-color);
    background: var(--tblr-bg-surface-secondary);
}

/* At the end of the bar the arrow stays in place rather than disappearing – a row of tabs
   that shifts sideways under the pointer is hard to hit. */
.managi-nav-scroller-arrow:disabled {
    opacity: .3;
}