/*
 * GLOBAL TAB COLOR SCHEME — ISPbills
 * --------------------------------------------------------------------------
 *  Active   : background #0052CC,  text #FFFFFF
 *  Hover    : background #2675D7,  text #FFFFFF
 *  Inactive : background #F4F5F7,  text #172B4D
 *  Focus    : 2px solid outline #FFAB00 (keyboard accessibility)
 *
 *  This file unifies the look of every tabbed navigation across the project:
 *    - Custom GA / NetFlow / Logs sub-navs ........ .nf-subnav .nf-subnav-link
 *    - Bootstrap tabs ............................. .nav-tabs .nav-link
 *    - Bootstrap pills used as horizontal tabs .... .nav-pills:not(.nav-sidebar):not(.nav-treeview) .nav-link
 *    - Customer portal pills ...................... .custom-pills .nav-link
 *
 *  The selectors that target nav-pills explicitly EXCLUDE the vertical
 *  sidebar nav (`.nav-sidebar`, `.nav-treeview`) so we don't disturb the
 *  primary side navigation in any role.
 *
 *  All declarations use !important to win against text-contrast.css's
 *  `.content-wrapper *` color rule and AdminLTE's default tab styles.
 * -------------------------------------------------------------------------- */

:root {
    --tab-active-bg:     #0052CC;
    --tab-active-text:   #FFFFFF;
    --tab-hover-bg:      #2675D7;
    --tab-hover-text:    #FFFFFF;
    --tab-inactive-bg:   #F4F5F7;
    --tab-inactive-text: #172B4D;
    --tab-focus-outline: #FFAB00;
    --tab-border:        #DFE1E6;
}

/* ===================== Inactive (default) state ========================= */
.nf-subnav .nf-subnav-link,
.nav-tabs > li > a.nav-link,
.nav-tabs .nav-link,
.nav-pills:not(.nav-sidebar):not(.nav-treeview) > .nav-item > .nav-link,
.nav-pills:not(.nav-sidebar):not(.nav-treeview) > .nav-link,
.custom-pills .nav-link {
    background-color: var(--tab-inactive-bg) !important;
    color: var(--tab-inactive-text) !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

/* Inherit color so icons / labels follow the link's text color */
.nf-subnav .nf-subnav-link i,
.nf-subnav .nf-subnav-link span,
.nav-tabs .nav-link i,
.nav-tabs .nav-link span,
.nav-pills:not(.nav-sidebar):not(.nav-treeview) .nav-link i,
.nav-pills:not(.nav-sidebar):not(.nav-treeview) .nav-link span,
.custom-pills .nav-link i,
.custom-pills .nav-link span {
    color: inherit !important;
}

/* ===================== Hover state ====================================== */
.nf-subnav .nf-subnav-link:hover,
.nav-tabs .nav-link:hover,
.nav-pills:not(.nav-sidebar):not(.nav-treeview) .nav-link:hover,
.custom-pills .nav-link:hover {
    background-color: var(--tab-hover-bg) !important;
    color: var(--tab-hover-text) !important;
    border-color: var(--tab-hover-bg) !important;
    text-decoration: none !important;
}

/* ===================== Active state ===================================== */
.nf-subnav .nf-subnav-link.is-active,
.nf-subnav .nf-subnav-link.active,
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link,
.nav-pills:not(.nav-sidebar):not(.nav-treeview) .nav-link.active,
.nav-pills:not(.nav-sidebar):not(.nav-treeview) .show > .nav-link,
.custom-pills .nav-link.active {
    background-color: var(--tab-active-bg) !important;
    color: var(--tab-active-text) !important;
    border-color: var(--tab-active-bg) !important;
    box-shadow: 0 1px 2px rgba(0, 82, 204, 0.25);
}

/* Disabled tabs stay readable but mute */
.nav-tabs .nav-link.disabled,
.nav-pills:not(.nav-sidebar):not(.nav-treeview) .nav-link.disabled,
.custom-pills .nav-link.disabled {
    background-color: var(--tab-inactive-bg) !important;
    color: #6B778C !important;
    cursor: not-allowed;
    opacity: 0.65;
}

/* ===================== Focus state (keyboard a11y) ====================== */
.nf-subnav .nf-subnav-link:focus,
.nf-subnav .nf-subnav-link:focus-visible,
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:focus-visible,
.nav-pills:not(.nav-sidebar):not(.nav-treeview) .nav-link:focus,
.nav-pills:not(.nav-sidebar):not(.nav-treeview) .nav-link:focus-visible,
.custom-pills .nav-link:focus,
.custom-pills .nav-link:focus-visible {
    outline: 2px solid var(--tab-focus-outline) !important;
    outline-offset: 2px;
    z-index: 1;
    position: relative;
}

/* ===================== Layout / spacing tweaks ========================== */

/* Bootstrap nav-tabs: keep a subtle bottom rule, drop AdminLTE's default
   colored bottom border so the new active background reads cleanly. */
.nav-tabs {
    border-bottom: 1px solid var(--tab-border) !important;
    gap: .25rem;
    flex-wrap: wrap;
}

.nav-tabs .nav-link {
    margin-bottom: -1px;
    padding: .5rem .9rem;
    font-weight: 500;
}

/* Pills / sub-nav: small inline gap between items */
.nav-pills:not(.nav-sidebar):not(.nav-treeview) {
    gap: .25rem;
    flex-wrap: wrap;
}

.nav-pills:not(.nav-sidebar):not(.nav-treeview) .nav-link {
    padding: .45rem .9rem;
    font-weight: 500;
}

/* nf-subnav already has its own container; just ensure links sit nicely */
.nf-subnav .nf-subnav-link {
    padding: .5rem .85rem;
    margin: 0 .15rem;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

/* Customer portal pills (`.custom-pills`) — preserve the existing block
   layout but apply unified colors. The view-local <style> block uses
   `var(--primary-gradient)` for active; our rule above overrides with the
   spec color via !important. */
.custom-pills {
    flex-wrap: wrap;
    gap: .25rem;
}

.custom-pills .nav-link {
    padding: .5rem 1rem;
    margin-right: .25rem;
    margin-bottom: .25rem;
    font-weight: 500;
}