/* Dashboard tabs (subtle, theme-aware) */
.nav.dashboard-tabs {
    --tab-fg: var(--bs-secondary-color);
    --tab-fg-hover: var(--bs-body-color);
    --tab-active-fg: var(--bs-body-color);
    --tab-indicator: var(--bs-primary); /* underline color for active */
    --tab-border: var(--bs-border-color); /* optional bottom border for the whole bar */

    --env-live-bg: #4ade80; /* soft green */
    --env-live-fg: #064e3b; /* dark text for contrast */
    --env-paper-bg: #facc15; /* optional: soft yellow for paper mode */
    --env-paper-fg: #78350f;

    border-bottom: 1px solid var(--tab-border);
}

    /* base link */
    .nav.dashboard-tabs .nav-link {
        color: var(--tab-fg);
        background: transparent;
        border: none;
        border-bottom: 2px solid transparent; /* we'll use this as the underline */
        border-radius: 0; /* no pill look */
        margin-bottom: -2px; /* keep underline flush with bar */
        transition: color .15s ease, border-color .15s ease;
        text-decoration: none; /* remove native underline */
    }

        /* hover/focus — subtle color shift, no text underline */
        .nav.dashboard-tabs .nav-link:hover,
        .nav.dashboard-tabs .nav-link:focus {
            color: var(--tab-fg-hover);
            border-bottom-color: color-mix(in srgb, var(--tab-indicator) 40%, transparent);
            text-decoration: none; /* prevent underline on hover */
        }

        /* active tab — stronger underline, bold-ish text, no background fill */
        .nav.dashboard-tabs .nav-link.active,
        .nav.dashboard-tabs .nav-link.active:hover,
        .nav.dashboard-tabs .nav-link.active:focus {
            color: var(--tab-active-fg);
            border-bottom-color: var(--tab-indicator);
            font-weight: 600;
            background-color: transparent; /* ensure no blue pill background */
            text-decoration: none;
        }

        /* (Optional) tighten spacing if badges are present inside links */
        .nav.dashboard-tabs .nav-link .badge {
            margin-left: .4rem;
        }

/* BADGE of the tab header */
.env-badge {
    font-weight: 500;
}
    .env-badge[data-env="Live"] {
        background-color: var(--env-live-bg);
        color: var(--env-live-fg);
    }

    .env-badge[data-env="Sandbox"],
    .env-badge[data-env="LiveSandbox"] {
        background-color: var(--env-live-bg);
        color: var(--env-live-fg, #000);
    }

    .env-badge[data-env="Paper"] {
        background-color: var(--env-paper-bg);
        color: var(--env-paper-fg);
    }

/* Tabs: underline tracker */
/*.nav.dashboard-tabs {
    position: relative;
    padding-bottom: .25rem;*/ /* room for the underline */
    /*--tab-underline: var(--bs-primary);
}

    .nav.dashboard-tabs .tab-underline {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 2px;
        width: 0;
        background: var(--tab-underline);
        border-radius: 2px;
        transform: translateX(0);
        transition: transform .25s ease, width .25s ease;
    }*/

/* (optional) if you prefer only underline highlight for active state: */
/*
.nav.dashboard-tabs .nav-link.active {
  background: transparent;
  color: var(--tab-fg-hover);
}
*/