/* ===========================================================================
   v2/tabs.css — THE canonical fleet tab bar, reproduced as literal CSS
   (NO variables). This is galen's bar: <ul class="ui-tabs-nav"> with the
   current item <li class="ui-state-active">. Dark-hive glossy strip, blue
   active tab. Same look in light- and dark-header layouts. No JS needed.

   Drop-in compatible with the fleet markup — same class names as global.css
   so an app already using ui-tabs-nav renders identically here.
   Add .ui-tabs-sub on a second <ul> for a tier-2 sub-row.
   =========================================================================== */

.ui-tabs-nav {
    margin: 0;
    padding: 4px 4px 0;
    list-style: none;
    display: flex;
    align-items: flex-end;
    gap: 0;
    border: 1px solid #333333;
    background: linear-gradient(to bottom,
        #757575 0%, #757575 25%, #535353 50%, #444444 75%, #444444 100%);
    border-radius: 6px;
    /* self-contained font so it never inherits a wide body font that would
       overflow a multi-tab bar; flex-wrap is the hard guarantee it can't. */
    font-family: Verdana, Arial, sans-serif;
    font-size: 15px;
    font-weight: bold;
    flex-wrap: wrap;
}

.ui-tabs-nav::after { content: ""; display: table; clear: both; }

/* Tier-2 sub-row: recessed gray, tucked flush under the primary row. */
.ui-tabs-nav.ui-tabs-sub {
    margin-top: -1px;
    border-top: 0;
    border-radius: 0 0 6px 6px;
    background: linear-gradient(to bottom,
        #5e5e5e 0%, #5e5e5e 25%, #3e3e3e 50%, #2e2e2e 75%, #2e2e2e 100%);
}

/* Tab items — default (inactive) state */
.ui-tabs-nav li {
    position: relative;
    top: 1px;
    margin: 0 2px 1px 0;
    border-bottom: 0 !important;
    padding: 0;
    white-space: nowrap;
    border: 1px solid #444444;
    background: linear-gradient(to bottom,
        #505050 0%, #505050 25%, #303030 50%, #222222 75%, #222222 100%);
    border-radius: 6px 6px 0 0;
    font-weight: normal;
}

.ui-tabs-nav li a {
    display: block;
    padding: 8px 14px;
    color: #eeeeee;
    text-decoration: none;
    font-family: inherit;
    font-size: 15px;
    outline: none;
}

/* Hover */
.ui-tabs-nav li:hover {
    border-color: #0b93d5;
    background: linear-gradient(to bottom,
        rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 50%), #0b93d5;
}
.ui-tabs-nav li:hover a { color: #ffffff; }

/* Active / selected — blue */
.ui-tabs-nav li.ui-state-active {
    margin-bottom: 0;
    padding-bottom: 1px;
    border-color: #26b3f7;
    background: linear-gradient(to bottom,
        #2682af 0%, #2682af 25%, #1579a9 50%, #0972a5 75%, #0972a5 100%);
}
.ui-tabs-nav li.ui-state-active a { color: #ffffff; cursor: default; }

/* ===========================================================================
   LIGHT variant — <ul class="ui-tabs-nav light"> for use under the LIGHT
   <bcl-header> (white bar, blue logo). Light strip + white inactive tabs;
   the active tab keeps the same brand blue so both variants read as one system.
   =========================================================================== */
.ui-tabs-nav.light {
    border: 1px solid #bcbcbc;
    /* gradient OPPOSITE the tabs: darker at top, lighter at the foot */
    background: linear-gradient(to bottom, #c4c4c4 0%, #f5f5f5 100%);
    box-shadow: 0 1px 2px rgba(0,0,0,0.12);   /* soft outer drop */
}
.ui-tabs-nav.light li {
    border: 1px solid #bfbfbf;
    /* raised glossy chip — a bit more depth: brighter top, darker foot */
    background: linear-gradient(to bottom,
        #ffffff 0%, #f6f6f6 46%, #e2e2e2 54%, #cfcfcf 100%);
    /* full-white top bevel + stronger bottom shade */
    box-shadow: inset 0 1px 0 #ffffff,
                inset 0 -1px 0 rgba(0,0,0,0.08);
}
.ui-tabs-nav.light li a { color: #444444; text-shadow: 0 1px 0 rgba(255,255,255,0.8); }

.ui-tabs-nav.light li:hover {
    border-color: #0b93d5;
    background: linear-gradient(to bottom,
        #eef9ff 0%, #ddf0fc 48%, #c9e8fa 52%, #b9e0f7 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9),
                inset 0 -1px 0 rgba(0,0,0,0.05);
}
.ui-tabs-nav.light li:hover a { color: #0a3d5c; }

.ui-tabs-nav.light li.ui-state-active {
    border-color: #0f6f9e;
    /* glossy blue: sheen on top half, deepen below the midline */
    background: linear-gradient(to bottom,
        #3a9fd4 0%, #1c84bb 48%, #0c79ab 52%, #0972a5 100%);
    /* inner top sheen + recessed bottom for a pressed-but-glossy active tab */
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.45),
                inset 0 -2px 4px rgba(0,0,0,0.18);
}
.ui-tabs-nav.light li.ui-state-active a { color: #ffffff; text-shadow: 0 -1px 0 rgba(0,0,0,0.25); }