/* ===================================
   QlabbirTabs - Modern Professional Styling
   Bootstrap 5 Native
   Uses !important to override Bootstrap 5 default styles
   =================================== */

/* Wrapper */
.qlabbir-tabs {
    margin-bottom: 1.5rem;
}

/* Modern Tabs Style */
.qlabbir-tabs-tabs .nav-tabs {
    border-bottom: 2px solid #e9ecef;
    margin-bottom: 1.5rem;
}

/* Nav Item - Remove extra spacing */
.qlabbir-tabs-tabs .nav-tabs .nav-item {
    margin-bottom: 0;
}

/* Inactive Tab Default State */
.qlabbir-tabs-tabs .nav-tabs .nav-link {
    padding: 0.5rem 1.5rem 0.4rem 1.5rem !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    background-color: #666 !important;
    color: #fff !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    transition: background-color 0.2s linear, color 0.3s ease, border-bottom-color 0.3s ease !important;
    margin-right: 0.5rem;
    border-radius: 0.375rem 0.375rem 0 0 !important;
    position: relative;
}

/* Hover State for Inactive Tabs */
.qlabbir-tabs-tabs .nav-tabs .nav-link:hover:not(.active):not(:disabled) {
    background-color: #f8f9fa !important;
    color: #495057 !important;
    border-bottom-color: #dee2e6 !important;
    border-color: transparent !important;
}

/* Active Tab State */
.qlabbir-tabs-tabs .nav-tabs .nav-link.active {
    color: #000 !important;
    background-color: transparent !important;
    border-color: transparent !important;
    border-bottom-color: #0d6efd !important;
    font-weight: 500 !important;
}

/* Disabled Tab State */
.qlabbir-tabs-tabs .nav-tabs .nav-link:disabled {
    color: #adb5bd !important;
    cursor: not-allowed;
    opacity: 0.6;
    background-color: #999 !important;
}

/* Pills Style */
.qlabbir-tabs-pills .nav-pills {
    margin-bottom: 1.5rem;
}

.qlabbir-tabs-pills .nav-pills .nav-link {
    padding: 0.625rem 1.25rem !important;
    border-radius: 1.25rem !important;
    color: #6c757d !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

.qlabbir-tabs-pills .nav-pills .nav-link:hover:not(.active):not(:disabled) {
    background-color: #e9ecef !important;
    color: #495057 !important;
}

.qlabbir-tabs-pills .nav-pills .nav-link.active {
    background-color: #0d6efd !important;
    color: #ffffff !important;
}

.qlabbir-tabs-pills .nav-pills .nav-link:disabled {
    color: #adb5bd !important;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Tab Title with Icon */
.qlabbir-tab-title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    vertical-align: middle;
}

/* Tab Icon Wrapper */
.qlabbir-tab-icon {
    display: inline-flex;
    align-items: center;
    opacity: 1 !important;
    visibility: visible !important;
}

.qlabbir-tab-icon > i,
.qlabbir-tab-icon > .fa,
.qlabbir-tab-icon > .fas,
.qlabbir-tab-icon > .far,
.qlabbir-tab-icon > .fal,
.qlabbir-tab-icon > .fab {
    font-size: 1rem !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
}

/* Tab Text */
.qlabbir-tab-text {
    display: inline-block;
}

.qlabbir-tab-title > i,
.qlabbir-tab-title > .fa,
.qlabbir-tab-title > .fas,
.qlabbir-tab-title > .far,
.qlabbir-tab-title > .fal,
.qlabbir-tab-title > .fab {
    font-size: 1rem !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin: 0;
}

/* Tab Badge */
.qlabbir-tab-badge {
    margin-left: 0.5rem;
    font-size: 0.6875rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.625rem;
    line-height: 1;
    font-weight: 600;
}

/* Tab Content */
.qlabbir-tabs .tab-content {
    border-left: 1px solid #dee2e6;
    border-right: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    border-radius: 0 0 0.375rem 0.375rem;
    margin-bottom: 1.5rem;
    padding: 15px;
}

.qlabbir-tabs .tab-pane {
    animation: fadeInTab 0.3s ease-in;
}

@keyframes fadeInTab {
    from {
        opacity: 0;
        transform: translateY(-0.625rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Nav Fill (Justified) */
.qlabbir-tabs.nav-fill .nav-tabs .nav-link,
.qlabbir-tabs.nav-fill .nav-pills .nav-link {
    text-align: center;
    flex: 1;
}

/* Responsive Design */
@media (max-width: 768px) {
.qlabbir-tabs-tabs .nav-tabs .nav-link,
.qlabbir-tabs-pills .nav-pills .nav-link {
    padding: 0.35rem 1rem !important;
    font-size: 0.875rem !important;
}
    
    .qlabbir-tab-title {
        gap: 0.375rem;
    }
    
    .qlabbir-tab-title > i,
    .qlabbir-tab-title > .fa,
    .qlabbir-tab-title > .fas,
    .qlabbir-tab-title > .far {
        font-size: 0.75rem;
    }
    
    .qlabbir-tab-badge {
        font-size: 0.625rem;
        padding: 0.125rem 0.375rem;
    }
}

/* Focus States for Accessibility */
.qlabbir-tabs .nav-link:focus {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

.qlabbir-tabs .nav-link:focus:not(:focus-visible) {
    outline: none;
}

/* Dark Theme Support */
.qlabbir-tabs.dark-theme .nav-tabs {
    border-bottom-color: #495057 !important;
}

.qlabbir-tabs.dark-theme .nav-tabs .nav-link {
    color: #adb5bd !important;
    background-color: #495057 !important;
}

.qlabbir-tabs.dark-theme .nav-tabs .nav-link:hover:not(.active):not(:disabled) {
    background-color: #343a40 !important;
    color: #f8f9fa !important;
    border-bottom-color: #6c757d !important;
}

.qlabbir-tabs.dark-theme .nav-tabs .nav-link.active {
    color: #0d6efd !important;
    background-color: transparent !important;
    border-bottom-color: #0d6efd !important;
}

.qlabbir-tabs.dark-theme .nav-pills .nav-link {
    color: #adb5bd !important;
}

.qlabbir-tabs.dark-theme .nav-pills .nav-link:hover:not(.active):not(:disabled) {
    background-color: #343a40 !important;
    color: #f8f9fa !important;
}