/* ============================================================
 * redesign-tabs.css — opt-in tab-bar redesign (PBI 6426)
 *
 * Extends tabcontrol.css; does NOT replace it. Wrap a page's
 * <TabControl__V1> in <div class="pd-tabs-shell"> to opt in.
 * Everything below is scoped under .pd-tabs-shell so the five
 * other pages on TabControl__V1 (CompanyAdminEditorMain,
 * EmployeeFullDetails, TimesheetSetupPage, CompanyPackageManagement,
 * RoleDetails) keep rendering exactly as before.
 *
 * Markup produced by TabControl__V1 (do not assume otherwise):
 *   .tab-control > .nav-wrapper > ul.nav.nav-tabs > li.nav-item
 *      > button.nav-link[.active] > div > i.fas.icon-spacing + span.tab-label
 * ============================================================ */

.pd-tabs-shell .nav-wrapper {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
}

.pd-tabs-shell .nav-tabs {
    background: var(--is-bg-surface);
    border: 1px solid var(--is-border-1);
    border-radius: var(--is-radius-md);
    padding: 4px;
    box-shadow: var(--is-shadow-1);
    gap: 2px;
    scrollbar-width: thin;
}

.pd-tabs-shell .nav-tabs::-webkit-scrollbar {
    height: 6px;
}

.pd-tabs-shell .nav-tabs::-webkit-scrollbar-track {
    background: transparent;
}

.pd-tabs-shell .nav-tabs::-webkit-scrollbar-thumb {
    background: var(--is-border-3);
    border-radius: 3px;
}

.pd-tabs-shell .nav-tabs .nav-item {
    margin-bottom: 0 !important;
}

.pd-tabs-shell .nav-tabs .nav-link {
    color: var(--is-fg-2);
    font: 600 13px var(--is-font-sans);
    padding: 9px 14px;
    margin: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    white-space: nowrap;
    transition: background .15s, color .15s;
}

.pd-tabs-shell .nav-tabs .nav-link i {
    font-size: 13px;
    color: var(--is-fg-3);
    transition: color .15s;
}

.pd-tabs-shell .nav-tabs .nav-link:hover {
    background: var(--is-bg-surface-3);
    color: var(--is-fg-1);
}

.pd-tabs-shell .nav-tabs .nav-link:hover i {
    color: var(--is-fg-1);
}

.pd-tabs-shell .nav-tabs .nav-link.active {
    background: var(--is-brand-blue-100);
    color: var(--is-brand-blue-700);
    border: none;
}

.pd-tabs-shell .nav-tabs .nav-link.active i {
    color: var(--is-brand-blue);
}

/* tabcontrol.css draws a 2px underline pseudo-element on the active tab —
   the pill background replaces it here. */
.pd-tabs-shell .nav-tabs .nav-link.active::after {
    display: none;
}

.pd-tabs-shell .tab-badge {
    background: rgba(255, 255, 255, .7);
    color: inherit;
    font: 600 11px var(--is-font-sans);
    padding: 1px 7px;
    border-radius: 999px;
}

.pd-tabs-shell .nav-tabs .nav-link:not(.active) .tab-badge {
    background: var(--is-bg-surface-3);
    color: var(--is-fg-2);
}