/* ============================================
   PANEL TABS
   Tab navigation for right panel
   ============================================ */

.panel-tabs {
    display: flex;
    border-bottom: 1px solid var(--glass-border);
    padding: 4px;
    gap: 4px;
}

/* A primary tab and its subtabs share a wrapper so the desktop rail can draw
   a group line; everywhere else the wrapper is invisible to layout. */
.rail-group {
    display: contents;
}

/* Outside the rail there are no subtabs to list, and an empty flex item still
   costs the bar a gap — room the tab labels need on a phone. */
.panel-tabs:not(.nav-rail) .nav-rail-subtabs {
    display: none;
}

.panel-tab {
    flex: 1;
    padding: 12px 8px;
    border: none;
    background: transparent;
    color: var(--text-color);
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.3s ease;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}

.panel-tab:hover {
    background: var(--entry-hover-bg);
    transform: translateY(-1px);
}

.panel-tab.active {
    background: var(--accent-gradient);
    color: var(--button-primary-text, white);
    font-weight: bold;
    box-shadow: 0 4px 15px var(--accent-glow);
}

.tab-icon {
    margin-right: 8px;
    vertical-align: middle;
}

/* The Builder tab wears the deck's card count where every other tab wears an
   icon, in the rail and in the phone tab bar alike: at a glance the deck's
   size is the fact worth having there. A deck with a rules problem turns the
   count red; the tab's title lists what is wrong. */
.deck-count-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 18px;
    height: 18px;
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--text-color);
}

.deck-count-icon.invalid {
    color: var(--danger-color, #ff6b6b);
}

/* The badge hangs off the count's right edge, so a tab that has one needs
   that much more room before its label starts. */
.deck-count-icon:has(.extra-count-badge) {
    margin-right: 12px;
}

/* Sideboard, maybeboard and companion cards: what the deck carries but does
   not count, on the count's top corner the way a notification badge rides an
   avatar. Offset clear of the digits and ringed in the bar's own colour, so
   neither number is obscured, and kept inside the tab, which clips. */
.deck-count-icon .extra-count-badge {
    position: absolute;
    top: -7px;
    left: 100%;
    margin-left: -3px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    border-radius: 7px;
    background: var(--accent-color);
    box-shadow: 0 0 0 2px var(--panel-bg);
    color: var(--button-primary-text, #fff);
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
}

/* Invalid State for Deck Tab */
.panel-tab.invalid {
    border: 1px solid var(--danger-border, rgba(255, 68, 68, 0.5));
    background: var(--danger-bg, rgba(255, 68, 68, 0.1));
}

.panel-tab.invalid:hover {
    background: var(--danger-bg-hover, rgba(255, 68, 68, 0.15));
}

.panel-tab.invalid.active {
    box-shadow: 0 4px 15px var(--danger-bg);
    background: linear-gradient(135deg, var(--danger-bg) 0%, var(--danger-bg-hover) 100%);
}

/* View Mode Toggles */
.deck-view-toggles {
    display: flex;
    gap: 4px;
}

/* Tab Panel Container (for CSS-based visibility) */
.tab-panel {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
}

.tab-panel.active {
    /* Ensure active panel takes full space */
    flex: 1;
}

/* Panels stay mounted once visited and are hidden here rather than being
   torn down, so returning to a tab does not refetch its data or re-arm its
   loading overlay. `display: none` also stops the browser doing layout or
   paint work for them, which an off-screen or zero-opacity approach would
   not. See the panel-mounting note in ui/router.rs. */
.tab-panel:not(.active) {
    display: none;
}

/* Mobile: Enable scrolling on the tab panel itself */
@media (max-width: 768px) {

    /* Tab bar - horizontal scroll, no wrap */
    .panel-tabs {
        width: 100%;
        max-width: 100vw;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Hide scrollbar on Firefox */
        -ms-overflow-style: none;
        /* Hide scrollbar on IE/Edge */
        padding: 4px;
        gap: 6px;
        display: flex;
        flex-wrap: nowrap !important;

        /* Fixed at bottom — hides/shows based on scroll direction via .tabs-hidden */
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: var(--mobile-nav-z);
        background: var(--panel-bg-opaque);
        transform: translateY(0);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
    }

    .panel-tabs.tabs-hidden {
        transform: translateY(100%);
    }

    /* Sub-tab bar: fixed just above main tabs */
    /* Sub-tab bar: fixed just above main tabs */
    .sub-tab-bar {
        position: fixed !important;
        bottom: var(--mobile-nav-height);
        left: 0;
        right: 0;
        width: 100% !important;
        border-radius: 0 !important;
        z-index: var(--mobile-subnav-z);
        background: var(--panel-bg-opaque) !important;
        border-top: 1px solid var(--glass-border);
        border-bottom: 2px solid var(--panel-bg-opaque);
        box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.2);
        transform: translateY(0);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 4px 8px !important;
    }

    /* Hide subtabs together with main tabs when scrolling down */
    .right-panel.tabs-nav-hidden .sub-tab-bar {
        transform: translateY(calc(100% + 50px));
    }

    /* Collapse the in-flow wrapper divs that held SubTabBar
       (child is now position:fixed, so these become empty) */
    .sub-tab-wrapper,
    .library-header,
    .games-tab-header {
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible;
    }

    .panel-tabs::-webkit-scrollbar {
        display: none;
        /* Hide scrollbar on Chrome/Safari */
    }

    /* Individual tabs - optimized for space */
    .panel-tab {
        min-width: 44px;
        min-height: 40px;
        padding: 6px 8px;
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        font-size: 0;
        /* Hide text nodes */
    }

    /* Active tab shows text */
    .panel-tab.active {
        flex: 1 1 auto;
        min-width: 80px;
        font-size: 14px;
        /* Restore font size for active tab */
    }

    /* The tab that was tapped grows and the others give way, rather than
       all of them snapping. These are the properties that actually differ
       between the two rules above. Restating `transition` here would lose to
       the shared button contract, so the growth rides its extension point
       instead (see `--ui-button-extra-transition` in buttons.css). */
    .panel-tab {
        --ui-button-extra-transition:
            flex-grow 240ms cubic-bezier(0.2, 0.7, 0.3, 1),
            flex-shrink 240ms cubic-bezier(0.2, 0.7, 0.3, 1),
            min-width 240ms cubic-bezier(0.2, 0.7, 0.3, 1),
            padding 240ms cubic-bezier(0.2, 0.7, 0.3, 1),
            font-size 240ms cubic-bezier(0.2, 0.7, 0.3, 1);
    }

    /* The icon slides over to make room for the label as it arrives. */
    .panel-tab .tab-icon {
        transition: margin 240ms cubic-bezier(0.2, 0.7, 0.3, 1);
    }

    @media (prefers-reduced-motion: reduce) {
        .panel-tab {
            --ui-button-extra-transition: outline-color 0s;
        }

        .panel-tab .tab-icon {
            transition: none;
        }
    }

    /* Tab icons - explicit px size with !important */
    .panel-tab .tab-icon {
        margin: 0;
        font-size: 20px !important;
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    .panel-tab.active .tab-icon {
        margin-right: 6px;
    }

    /* The count keeps its own size and its own box where the glyph rule
       above forces every icon to 20px square. It stays legible on an
       inactive tab, whose own rule sets `font-size: 0` to hide its label. */
    .panel-tab .deck-count-icon {
        width: auto;
        height: 18px;
        font-size: 13px !important;
    }

    /* Tab panel content */
    .tab-panel {
        overflow: visible;
    }

    .tab-panel.active {
        flex: 1 0 auto;
        display: flex;
        flex-direction: column;
        overflow: visible !important;
        min-height: 100%;
    }
}

/* Mobile-only bottom-nav tab (Search): hidden on desktop, where search is the persistent left panel. */
.mobile-only-tab {
    display: none !important;
}

@media (max-width: 768px) {
    .mobile-only-tab {
        display: flex !important;
    }
}


/* The narrowest phones (360px and under is still common) leave the open tab a
   few pixels short of its longest label, "Collection". The five closed tabs
   are what the open one is competing with, so they give up some padding and
   some of the gap between them rather than the label being cut.

   The Builder's tab is the exception: a three-digit count with a badge beside
   it needs more room than a glyph does, so it keeps enough and the others pay
   for it. */
@media (max-width: 420px) {
    .panel-tabs {
        gap: 2px;
    }

    .panel-tab {
        min-width: 36px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .panel-tab:has(.deck-count-icon) {
        min-width: 50px;
    }
}