/* Tab Navigation Styles (Outline Button Style) */
.nav-tabs > li > button {
    background-color: var(--tabInActive) !important; /* Transparent background for unselected tabs */
    color: var(--tabInActiveFont) !important; /* Text color for unselected tabs */
    border: 1px solid var(--button-primary) !important; /* Outline border matching primary color */
    box-shadow: inset 0 -8px 7px -9px rgba(0, 0, 0, .2), -2px -2px 5px -2px rgba(0, 0, 0, .2); /* Subtle shadow for unselected tabs */
    transition: all 0.3s ease; /* Smooth transition for background and text color */
}

/* Hover state (same as selected state) */
.nav-tabs > li > button:hover {
    color: var(--button-primary-font) !important; /* Text color for hover state (filled) */
    background-color: var(--button-primary) !important; /* Hover background using primary color */
    border-color: var(--button-primary) !important; /* Border color matching hover background */
}

/* Active tab styles (filled state) */
.nav-tabs > li > button.active,
.nav-tabs > li > button.active:hover {
    background-color: var(--button-primary) !important; /* Active tab background using primary color */
    color: var(--button-primary-font) !important; /* Text color for active tab */
    border-color: var(--button-primary) !important; /* Border matching active background */
    box-shadow: inset 0 0 0 0 rgba(0, 0, 0, .4), -2px -3px 5px -2px rgba(0, 0, 0, .4); /* More defined shadow for active tab */
}

/* Tab Content Styles */
.tab-pane {
    background: #fff; /*F5F5F5*/
    box-shadow: 0 0 4px rgba(0,0,0,.4);
    padding: 5px;
}

/* Focus state (outline with shadow for accessibility) */
.nav-tabs > li > button:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--button-primary-rgb), 0.5) !important; /* Focus ring with primary color */
}

/* Ensuring smooth transitions */
.nav-tabs > li > button {
    transition: all 0.3s ease; /* Smooth transition for background, border, and color changes */
}