/* ============================================================================
   Shared in-page data tabs
   ----------------------------------------------------------------------------
   MudTabs layout, active and hover states, panel sizing, focus treatment,
   mobile sizing, and reduced-motion behavior.

   Source: Pasted text(20260903-154552).txt:1436-1529 and generic tab rules from 1629-1651.
   ============================================================================ */

.store-data-tabs {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    color: var(--store-text-main);
    background: var(--store-white);
}

    .store-data-tabs > .mud-tabs-tabbar {
        flex: 0 0 auto;
        min-height: 3.75rem;
        background: var(--store-surface-subtle);
        border-bottom: 1px solid var(--store-border);
    }

    .store-data-tabs .mud-tabs-tabbar-inner {
        min-height: 3.75rem;
    }

    .store-data-tabs .mud-tabs-tabbar-content {
        flex-wrap: nowrap;
        gap: 0.25rem;
        min-width: max-content;
        padding: 0.5rem 0.75rem 0;
    }

    .store-data-tabs .mud-tab {
        min-width: 9.5rem;
        min-height: 3.25rem;
        padding: 0.7rem 1rem;
        color: var(--store-text-secondary);
        font-size: 0.875rem;
        font-weight: 700;
        line-height: 1.25;
        text-transform: none;
        opacity: 1;
        background: transparent;
        border-radius: var(--store-radius-sm) var(--store-radius-sm) 0 0;
        transition: color 160ms ease, background-color 160ms ease;
    }

        .store-data-tabs .mud-tab .mud-icon-root {
            color: var(--store-text-muted);
            transition: color 160ms ease;
        }

        .store-data-tabs .mud-tab.mud-tab-active {
            color: var(--store-main-color-dark);
            font-weight: 850;
            background: color-mix( in srgb, var(--store-main-color) 9%, var(--store-white) );
        }

            .store-data-tabs .mud-tab.mud-tab-active .mud-icon-root {
                color: var(--store-main-color);
            }

        .store-data-tabs .mud-tab:focus-visible {
            outline: 3px solid var(--store-main-color);
            outline-offset: -3px;
        }

    .store-data-tabs .mud-tabs-slider {
        height: 0.25rem;
        background: var(--store-main-color);
        border-radius: 999px 999px 0 0;
    }

    .store-data-tabs .mud-tabs-panels {
        display: flex;
        flex: 1 1 auto;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
        background: var(--store-white);
    }

    .store-data-tabs .mud-tabs-panel {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        min-height: 0;
    }

@media (hover: hover) and (pointer: fine) {
    .store-data-tabs .mud-tab:hover:not(.mud-tab-active) {
        color: var(--store-text-main);
        background: color-mix( in srgb, var(--store-main-color) 5%, var(--store-white) );
    }
}

@media screen and (max-width: 599.98px) {
    .store-data-tabs > .mud-tabs-tabbar, .store-data-tabs .mud-tabs-tabbar-inner {
        min-height: 3.5rem;
    }

    .store-data-tabs .mud-tabs-tabbar-content {
        padding-inline: 0.5rem;
    }

    .store-data-tabs .mud-tab {
        flex: 1 0 auto;
        min-width: 8.75rem;
        min-height: 3rem;
        padding-inline: 0.75rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .store-data-tabs .mud-tab, .store-data-tabs .mud-tab .mud-icon-root {
        transition: none !important;
    }
}