/* ==========================================================================
   VSI shared sub-navigation (.vsi-subnav)
   --------------------------------------------------------------------------
   The single source of truth for every sub-application's secondary menu bar:
   a fixed white bar below the main VSI header with brand, "›" crumb, and a
   row of tabs. Formerly lived (per-app) in bull.css / abe.css; now unified.
   Markup is rendered by www/views/partials/vsi_subnav.php.

   Loaded globally via main.css (@import), so it is available on every page
   that uses the main layout (Bull, Abe, …). Beacon — which uses its own
   layout — links this file directly.
   ========================================================================== */

/* The site-wide --header-height variable doesn't match the actual rendered
   header at tablet/mobile widths because the topbar stays visible through
   ~480px even though --header-height drops to 80/60. Pin the subnav `top` to
   the real header height per breakpoint via vars on :root so the sibling
   content section can read them too. */
:root {
    --vsi-subnav-top: 130px;
    --vsi-subnav-height: 44px;
    --dev-banner-offset: 0px;
}
/* When the dev-data banner is showing, the fixed site-header is dropped 28px
   (header.css: body.has-dev-banner .site-header { top: 28px }). The subnav is
   also position:fixed, so it must shift down by the same amount or the header
   slides over it and hides it. Stack the offset onto --vsi-subnav-top via calc
   so the per-breakpoint values below keep working unchanged. */
body.has-dev-banner { --dev-banner-offset: 28px; }

.vsi-subnav {
    position: fixed;
    left: 0;
    right: 0;
    top: calc(var(--vsi-subnav-top) + var(--dev-banner-offset));
    background: #fff;
    border-bottom: 1px solid #e2e2e2;
    z-index: 950;       /* below site-header (1000) but above page content */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}
.vsi-subnav__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    height: 44px;
}
.vsi-subnav__brand {
    font-weight: 700;
    color: #003a25;
    font-size: 0.95rem;
    padding-right: 12px;
    border-right: 1px solid #e2e2e2;
    white-space: nowrap;
    text-decoration: none;
}
.vsi-subnav__brand:hover { text-decoration: none; color: #00261a; }
.vsi-subnav__crumb { color: #888; padding: 0 4px; user-select: none; }
.vsi-subnav__links {
    display: flex;
    gap: 4px;
    flex: 1;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.vsi-subnav__link {
    padding: 7px 14px;
    color: #4e4e4e;
    font-size: 0.88rem;
    text-decoration: none;
    border-radius: 4px;
    white-space: nowrap;
    transition: background .15s, color .15s;
}
.vsi-subnav__link:hover { background: #f3f3f3; color: #003a25; text-decoration: none; }
.vsi-subnav__link--active { background: #003a25; color: #fff; }
.vsi-subnav__link--active:hover { background: #00261a; color: #fff; }

/* Dropdown group (opt-in via a tab's 'children' key — Admin "Website").
   The toggle is a <button> styled as a normal tab; the menu is position:fixed
   (placed by the partial's script) so the links row's overflow-x scrolling
   cannot clip it. */
.vsi-subnav__group { display: inline-flex; }
.vsi-subnav__group-toggle {
    background: none;
    border: 0;
    font: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.vsi-subnav__caret { font-size: 0.7em; line-height: 1; }
.vsi-subnav__menu {
    position: fixed;
    z-index: 1200;                /* above site-header (1000) */
    display: flex;
    flex-direction: column;
    min-width: 180px;
    background: #fff;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    padding: 6px;
}
.vsi-subnav__menu[hidden] { display: none; }
.vsi-subnav__menu-link {
    display: block;
    padding: 8px 12px;
    color: #4e4e4e;
    font-size: 0.88rem;
    text-decoration: none;
    border-radius: 4px;
    white-space: nowrap;
}
.vsi-subnav__menu-link:hover { background: #f3f3f3; color: #003a25; text-decoration: none; }
.vsi-subnav__menu-link--active { background: #003a25; color: #fff; }
.vsi-subnav__menu-link--active:hover { background: #00261a; color: #fff; }

/* Disabled / "coming soon" tab (rendered as a <span>, e.g. Abe Reports). */
.vsi-subnav__link--disabled { color: #bbb; cursor: default; }
.vsi-subnav__link--disabled:hover { background: none; color: #bbb; }

/* Accent tab: bold + orange so it stands out (e.g. Bull's Assign queue). */
.vsi-subnav__link--assign { font-weight: 700; color: #b8500a; }
.vsi-subnav__link--assign:hover { background: #fff1e6; color: #8f3d06; }
.vsi-subnav__link--assign.vsi-subnav__link--active { background: #b8500a; color: #fff; }
.vsi-subnav__link--assign.vsi-subnav__link--active:hover { background: #8f3d06; color: #fff; }

/* Pages need extra top padding to clear BOTH the main header and the 44px
   fixed subnav. Targeting via sibling selector means the content wrapper that
   directly follows the subnav inherits it. Covers the known wrappers across
   apps (.page-section = Bull, .abe-page = Abe, .beacon-page = Beacon). */
.vsi-subnav + .page-section,
.vsi-subnav + .abe-page,
.vsi-subnav + .beacon-page,
.vsi-subnav + .admin-content {
    padding-top: calc(var(--vsi-subnav-top, 130px) + var(--vsi-subnav-height, 44px) + var(--dev-banner-offset, 0px) + 1rem);
}

/* Tablet / phone breakpoints — track the *actual* header height. The topbar
   is visible until <=480px, so the header doesn't shrink to 60px until then. */
@media (max-width: 992px) {
    :root { --vsi-subnav-top: 128px; }     /* topbar (~48px) + main (80px) */
}
/* Optional shorter tab labels for narrow (tablet/phone) widths. A tab that
   supplies a 'short' label renders both; the full one shows on desktop, the
   short one at <=992px. Tabs without a 'short' label are unaffected. */
.vsi-subnav__lbl-short { display: none; }
@media (max-width: 992px) {
    .vsi-subnav__lbl-full  { display: none; }
    .vsi-subnav__lbl-short { display: inline; }
}

@media (max-width: 768px) {
    :root { --vsi-subnav-top: 100px; }     /* topbar (~40px) + main (60px) */
    .vsi-subnav__brand { display: none; }
    .vsi-subnav__crumb { display: none; }
    .vsi-subnav__inner { padding: 0 12px; gap: 6px; }
    .vsi-subnav__link  { padding: 6px 10px; font-size: 0.82rem; }
}
@media (max-width: 480px) {
    :root { --vsi-subnav-top: 60px; }      /* topbar hidden, main only */
}