/* ==========================================================================
   DAR Tabs — shared full-width segmented switcher with a sliding thumb.

   Opt in by putting data-dar-tabs on a role="tablist" container whose direct
   role="tab" children carry .is-active, plus one
   <span class="dar-tabs__thumb" aria-hidden="true"></span> as the first child.
   The thumb is placed from the active tab's own box by js/dar-tabs.js, so RTL
   and varying label widths need no separate handling.

   The thumb lives in the markup rather than being injected, because the
   activities page mounts Vue over this markup and would discard foreign nodes.
   ========================================================================== */

[data-dar-tabs] {
    position: relative;
    display: flex;
    width: 100%;
    box-sizing: border-box;
}

[data-dar-tabs] > [role="tab"] {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    text-align: center;
}

/* Lift/scale effects would slide the label out from under the static thumb. */
[data-dar-tabs] > [role="tab"]:hover,
[data-dar-tabs] > [role="tab"]:active {
    transform: none !important;
}

.dar-tabs__thumb {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 0;
    height: 0;
    border-radius: var(--dar-radius-pill, 9999px);
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    opacity: 0;
    pointer-events: none;
}

.dar-tabs__thumb.is-ready {
    opacity: 1;
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Only once the thumb is actually driving the active surface do we flatten the
   per-page active styles; without JS the original backgrounds still show.
   Doubled .is-active outranks the !important dark-mode rules in the page CSS. */
[data-dar-tabs].dar-tabs--ready > [role="tab"].is-active.is-active {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

[data-theme="dark"] .dar-tabs__thumb,
[data-bs-theme="dark"] .dar-tabs__thumb {
    background: var(--dar-surface, #1e2923);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

@media (prefers-reduced-motion: reduce) {
    .dar-tabs__thumb.is-ready {
        transition: none;
    }
}