/* Enhanced Tabs Component Styling
 * Usage: Add class "enhanced-tabs" to your nav-tabs element
 * Example: <ul class="nav nav-tabs enhanced-tabs mb-3" role="tablist">
 */

.enhanced-tabs .nav-link {
    border: 1px solid transparent;
    color: #6c757d;
    font-weight: 500;
    padding: 0.75rem 1rem;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
}

.enhanced-tabs .nav-link:hover {
    color: #495057;
    background-color: #f8f9fa;
    border-color: #dee2e6;
    text-decoration: none;
}

.enhanced-tabs .nav-link.active {
    color: #0d6efd;
    background-color: #fff;
    border-color: #dee2e6 #dee2e6 #fff;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(13, 110, 253, 0.1);
}

.enhanced-tabs .nav-link.active i {
    color: #0d6efd;
}

/* Focus states for accessibility */
.enhanced-tabs .nav-link:focus {
    /* outline: 2px solid #0d6efd; */
    /* outline-offset: 2px; */
}

/* Disabled state */
.enhanced-tabs .nav-link.disabled {
    color: #6c757d;
    background-color: transparent;
    border-color: transparent;
    opacity: 0.5;
    cursor: not-allowed;
}

.enhanced-tabs .nav-link.disabled:hover {
    color: #6c757d;
    background-color: transparent;
    border-color: transparent;
}