/* ==========================================================================
   Sales Administration System
   Enterprise Tabs
   File        : tabs.css
   Description : Enterprise Tab Component
   Dependency  : theme.css
   ========================================================================== */


/* ==========================================================================
   TAB CONTAINER
   ========================================================================== */

.tabs {
    width: 100%;
}


/* ==========================================================================
   NAV TAB
   ========================================================================== */

.nav-tabs {
    display: flex;
    align-items: center;
    gap: .25rem;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
}


    /* ==========================================================================
   TAB ITEM
   ========================================================================== */

    .nav-tabs .nav-item {
        margin-bottom: -1px;
    }


    /* ==========================================================================
   TAB LINK
   ========================================================================== */

    .nav-tabs .nav-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        min-height: 44px;
        padding: .75rem 1rem;
        border: 1px solid transparent;
        border-top-left-radius: var(--radius-md);
        border-top-right-radius: var(--radius-md);
        background: transparent;
        color: var(--text-secondary);
        font-weight: 500;
        transition: all var(--transition-fast);
    }

        .nav-tabs .nav-link:hover {
            background: #F8F9FA;
            color: var(--color-primary);
            border-color: transparent;
        }

        .nav-tabs .nav-link:focus {
            box-shadow: none;
        }


        /* ==========================================================================
   ACTIVE TAB
   ========================================================================== */

        .nav-tabs .nav-link.active {
            background: #FFFFFF;
            color: var(--color-primary);
            font-weight: 600;
            border-color: var(--border-color);
            border-bottom-color: #FFFFFF;
        }


        /* ==========================================================================
   TAB ICON
   ========================================================================== */

        .nav-tabs .nav-link i {
            font-size: 1rem;
        }


    /* ==========================================================================
   TAB BADGE
   ========================================================================== */

    .nav-tabs .badge {
        margin-left: .35rem;
    }


/* ==========================================================================
   TAB CONTENT
   ========================================================================== */

.tab-content {
    width: 100%;
}

.tab-pane {
    animation: tabFade .18s ease;
}


/* ==========================================================================
   TAB CARD
   ========================================================================== */

.tab-card {
    background: #FFFFFF;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

    .tab-card > .nav-tabs {
        margin-bottom: 0;
        padding: 0 1rem;
        background: #FFFFFF;
    }

    .tab-card > .tab-content {
        padding: 1.5rem;
    }


/* ==========================================================================
   UNDERLINE TAB
   ========================================================================== */

.nav-tabs-underline {
    gap: 1rem;
    border-bottom: 1px solid var(--border-color);
}

    .nav-tabs-underline .nav-link {
        border: none;
        border-radius: 0;
        background: transparent;
        margin-bottom: -1px;
        border-bottom: 3px solid transparent;
    }

        .nav-tabs-underline .nav-link.active {
            border: none;
            border-bottom: 3px solid var(--color-primary);
            background: transparent;
        }


/* ==========================================================================
   PILLS
   ========================================================================== */

.nav-pills {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

    .nav-pills .nav-link {
        border-radius: var(--radius-pill);
        color: var(--text-secondary);
        background: #F3F4F6;
        padding: .65rem 1rem;
        transition: all var(--transition-fast);
    }

        .nav-pills .nav-link:hover {
            background: #E9ECEF;
        }

        .nav-pills .nav-link.active {
            background: var(--color-primary);
            color: #FFFFFF;
        }


/* ==========================================================================
   VERTICAL TAB
   ========================================================================== */

.tabs-vertical {
    display: flex;
    gap: 1.5rem;
}

    .tabs-vertical .nav {
        display: flex;
        flex-direction: column;
        min-width: 220px;
        gap: .25rem;
    }

    .tabs-vertical .nav-link {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: .75rem;
        border-radius: var(--radius-md);
        color: var(--text-secondary);
    }

        .tabs-vertical .nav-link.active {
            background: var(--color-primary-soft);
            color: var(--color-primary);
        }


/* ==========================================================================
   TAB TOOLBAR
   ========================================================================== */

.tab-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.tab-toolbar-left,
.tab-toolbar-right {
    display: flex;
    align-items: center;
    gap: .75rem;
}


/* ==========================================================================
   TAB TITLE
   ========================================================================== */

.tab-title {
    font-size: 1rem;
    font-weight: 600;
}

.tab-description {
    margin-top: .25rem;
    color: var(--text-secondary);
    font-size: .85rem;
}


/* ==========================================================================
   TAB LOADING
   ========================================================================== */

.tab-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 240px;
}


/* ==========================================================================
   EMPTY TAB
   ========================================================================== */

.tab-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    text-align: center;
}

    .tab-empty i {
        font-size: 3rem;
        color: #CED4DA;
        margin-bottom: 1rem;
    }

.tab-empty-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: .5rem;
}

.tab-empty-description {
    color: var(--text-secondary);
}


/* ==========================================================================
   TAB SCROLL
   ========================================================================== */

.tabs-scroll {
    overflow-x: auto;
    overflow-y: hidden;
}

    .tabs-scroll .nav-tabs {
        flex-wrap: nowrap;
        white-space: nowrap;
    }


/* ==========================================================================
   TAB ANIMATION
   ========================================================================== */

@keyframes tabFade {

    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width:992px) {

    .tabs-vertical {
        flex-direction: column;
    }

        .tabs-vertical .nav {
            min-width: 100%;
        }
}

@media (max-width:768px) {

    .nav-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        white-space: nowrap;
    }

        .nav-tabs .nav-link {
            min-width: max-content;
        }

    .tab-card > .tab-content {
        padding: 1rem;
    }

    .tab-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .tab-toolbar-left,
    .tab-toolbar-right {
        width: 100%;
    }
}