/*!
 * tenant-navigation-compat.css — FastAdmin multiplenav compatibility for the
 * tenant workspace shell. Scoped to body#tabs.multiplenav only, so the default
 * (multiplenav=0) layout is untouched.
 *
 * Why: with multiplenav=1 Auth.php puts the top-level groups into #firstnav and
 * the really opened pages into #secondnav (backend/index.js:113-114). The theme
 * uses #firstnav as its tab bar, so the actual page tabs were hidden under the
 * fixed header. tenant-theme.js now drives the active tab container from
 * body.multiplenav; this sheet makes #secondnav the visible tab bar and keeps
 * #firstnav measurable-but-offscreen (never display:none, so FastAdmin's own
 * group click/last-id code and jQuery visibility checks keep working).
 *
 * Load order: tenant-theme.css -> tenant-refinements.css ->
 *             tenant-navigation-compat.css (this file).
 */

/* --------------------------------------------------------------------------
 * 1. #firstnav = original top-level group strip, kept as a hidden source
 * ------------------------------------------------------------------------ */

body#tabs.multiplenav #firstnav.tt-tabbar {
    position: fixed !important;
    top: 0;
    left: -20000px;
    z-index: -1;
    box-sizing: border-box;
    width: 960px;
    height: var(--tt-tabbar-h);
    margin: 0;
    padding: 0 14px;
    overflow: hidden;
    visibility: visible;
    opacity: 0;
    pointer-events: none;
    transition: none;
}

/* --------------------------------------------------------------------------
 * 2. #secondnav = the real opened-page tab bar
 * ------------------------------------------------------------------------ */

body#tabs.multiplenav #secondnav.tt-page-tabs {
    position: relative;
    top: auto;
    left: auto;
    display: block;
    box-sizing: border-box;
    width: calc(100% - var(--tt-primary-w));
    height: var(--tt-tabbar-h);
    margin-left: var(--tt-primary-w);
    padding: 0 14px 0 18px;
    overflow: visible;
    background: #fff;
    border-top: 1px solid #eef3ef;
    box-shadow: none;
    transition: margin 0.2s ease, width 0.2s ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

body#tabs.multiplenav.sidebar-collapse #secondnav.tt-page-tabs {
    width: 100%;
    margin-left: 0;
}

/* Same offsets as tenant-refinements.css section 2, so the visible strip does
   not slide under the secondary column. */
body#tabs.multiplenav.tt-has-secondary #secondnav.tt-page-tabs {
    width: calc(100% - var(--tt-primary-w) - var(--tt-secondary-w));
    margin-left: calc(var(--tt-primary-w) + var(--tt-secondary-w));
}

body#tabs.multiplenav #secondnav .nav-addtabs {
    position: static;
    left: auto;
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
}

/* Beat the legacy #secondnav rules in backend.css (border/padding boxes). */
body#tabs.multiplenav #secondnav .nav-addtabs > li {
    box-sizing: border-box;
    position: relative;
    float: left;
    height: 34px;
    min-height: 0;
    margin: 5px 4px 5px 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

body#tabs.multiplenav #secondnav .nav-addtabs > li > a,
body#tabs.multiplenav #secondnav .nav-addtabs > li.active > a,
body#tabs.multiplenav #secondnav .nav-addtabs > li.active > a:hover,
body#tabs.multiplenav #secondnav .nav-addtabs > li.active > a:focus {
    display: block;
    box-sizing: border-box;
    height: 34px;
    padding: 0 13px;
    overflow: hidden;
    font-size: 13px;
    line-height: 34px;
    border: 0;
    border-radius: 8px;
}

body#tabs.multiplenav #secondnav .nav-addtabs > li > a {
    color: #63766b;
    background: transparent;
}

body#tabs.multiplenav #secondnav .nav-addtabs > li > a:hover,
body#tabs.multiplenav #secondnav .nav-addtabs > li > a:focus {
    color: var(--tt-primary-hover);
    background: var(--tt-hover);
}

body#tabs.multiplenav #secondnav .nav-addtabs > li.active > a,
body#tabs.multiplenav #secondnav .nav-addtabs > li.active > a:hover,
body#tabs.multiplenav #secondnav .nav-addtabs > li.active > a:focus {
    color: #126d57;
    font-weight: 600;
    background: var(--tt-selected);
}

body#tabs.multiplenav #secondnav .nav-addtabs > li > a .fa {
    margin-right: 4px;
    font-size: 12px;
}

body#tabs.multiplenav #secondnav .nav-addtabs > li .close-tab {
    position: absolute;
    top: 50%;
    right: 0;
    display: none;
    place-items: center;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    color: #93a79a;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
}

body#tabs.multiplenav #secondnav .nav-addtabs > li:hover > .close-tab {
    display: grid;
}

/* --------------------------------------------------------------------------
 * 3. Responsive: same geometry as the theme's tab strip
 * ------------------------------------------------------------------------ */

@media (max-width: 900px) {
    body#tabs.multiplenav #secondnav.tt-page-tabs,
    body#tabs.multiplenav.tt-has-secondary #secondnav.tt-page-tabs {
        width: 100%;
        margin-left: 0;
        padding: 0 8px;
    }

    body#tabs.multiplenav #secondnav .nav-addtabs > li {
        height: 32px;
        margin: 3px 4px 3px 0;
    }

    body#tabs.multiplenav #secondnav .nav-addtabs > li > a,
    body#tabs.multiplenav #secondnav .nav-addtabs > li.active > a,
    body#tabs.multiplenav #secondnav .nav-addtabs > li.active > a:hover,
    body#tabs.multiplenav #secondnav .nav-addtabs > li.active > a:focus {
        height: 32px;
        padding: 0 10px;
        line-height: 32px;
        border-radius: 7px;
    }
}

/* Keyboard users should not tab into the invisible source strip. */
body#tabs.multiplenav #firstnav a,
body#tabs.multiplenav #firstnav button {
    visibility: hidden;
}