/* ─────────────────────────────────────────────────────────────
   Tabs — one look for every tab set in the app.

   Underline tabs: the labels sit on a hairline, the open one is in the primary colour
   with a 2px bar under it, and a count (if any) rides in a small pill after the label.
   The same look is used for:
     .seg-tabs / .seg-tab        Calendar (Calendar · Holidays · My leave · Approvals),
                                 My leave (Apply for leave · History), Mapping
     .rev-tabs / .rev-tab        Manager Review (Submitted for review · Work list · Team)
     .ws-act__tabs / .ws-act__tab  the Activity filter in the issue drawer and worksheet
                                 (compact: the same tabs, smaller, inside a panel)
   The open tab is marked .on, .is-on or aria-selected="true" — whichever the page uses.
   A count is an <em> or .rev-tab__n inside the tab; an empty one is not drawn.
   ───────────────────────────────────────────────────────────── */

.seg-tabs,
.rev-tabs,
.ws-act__tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    margin: 0 0 var(--sp-4);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    /* The hairline is drawn inside the row, so the open tab's bar can sit on it without
       hanging outside a row that scrolls sideways on a phone. */
    box-shadow: inset 0 -1px 0 var(--line);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    width: auto;
}

.seg-tabs::-webkit-scrollbar,
.rev-tabs::-webkit-scrollbar,
.ws-act__tabs::-webkit-scrollbar {
    display: none;
}

.seg-tab,
.rev-tab,
.ws-act__tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: none;
    margin: 0;
    padding: 9px 14px 10px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: var(--r-sm) var(--r-sm) 0 0;
    background: none;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1.2;
    color: var(--muted-ink);
    white-space: nowrap;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.seg-tab + .seg-tab {
    border-left: 0;
}

.seg-tab:hover,
.rev-tab:hover,
.ws-act__tab:hover {
    color: var(--ink);
    background: var(--surface-2);
}

/* the open tab */
.seg-tab.on,
.seg-tab[aria-selected="true"],
.rev-tab.is-on,
.rev-tab[aria-selected="true"],
.ws-act__tab[aria-selected="true"] {
    color: var(--primary);
    border-bottom-color: var(--primary);
    background: none;
}

.seg-tab:focus-visible,
.rev-tab:focus-visible,
.ws-act__tab:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--primary-soft-2, var(--primary-soft));
}

.seg-tab[hidden],
.rev-tab[hidden],
.ws-act__tab[hidden] {
    display: none;
}

/* the count beside a label */
.seg-tab em,
.rev-tab__n,
.ws-act__tab em {
    min-width: 20px;
    margin: 0;
    padding: 1px 7px;
    border-radius: var(--r-pill);
    background: var(--surface-3);
    color: var(--ink-3);
    font-size: var(--fs-2xs);
    font-style: normal;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    opacity: 1;
}

.seg-tab em:empty,
.rev-tab__n:empty,
.ws-act__tab em:empty {
    display: none;
}

.seg-tab.on em,
.seg-tab[aria-selected="true"] em,
.rev-tab.is-on .rev-tab__n,
.rev-tab[aria-selected="true"] .rev-tab__n,
.ws-act__tab[aria-selected="true"] em {
    background: var(--primary-soft);
    color: var(--primary);
}

/* compact: the same tabs inside a panel (the Activity filter) */
.ws-act__tabs {
    margin: 0;
    gap: 2px;
}

.ws-act__tab {
    padding: 6px 10px 7px;
    font-size: var(--fs-xs);
}