/* ===== Tabs Container ===== */
.nav-tabs {
    display: flex;
    flex-wrap: nowrap;          /* 🔥 force single line */
    overflow-x: auto;
    gap: 6px;                   /* 🔥 reduced spacing */
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

/* Hide scrollbar */
.nav-tabs::-webkit-scrollbar {
    display: none;
}

/* ===== Tab Items ===== */
.nav-tabs .nav-item {
    flex: 0 0 auto;
}

/* ===== Tab Links ===== */
.nav-tabs .nav-link {
    background: #f5f5f5;
    color: #333;
    border: 1px solid transparent;
    border-radius: 6px;         /* slightly tighter */
    padding: 6px 14px;          /* 🔥 reduced padding */
    font-size: 14px;            /* 🔥 slightly smaller to fit all */
    font-weight: 600;
    white-space: nowrap;        /* 🔥 prevent text breaking */
    transition: all 0.25s ease;
}

/* Hover */
.nav-tabs .nav-link:hover {
    background: #eaeaea;
}

/* ===== ACTIVE TAB ===== */
/* ===== Tabs Container ===== */
.nav-tabs {
    display: flex;
    flex-wrap: nowrap;          /* 🔥 force single line */
    overflow-x: auto;
    gap: 6px;                   /* 🔥 reduced spacing */
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

/* Hide scrollbar */
.nav-tabs::-webkit-scrollbar {
    display: none;
}

/* ===== Tab Items ===== */
.nav-tabs .nav-item {
    flex: 0 0 auto;
}

/* ===== Tab Links ===== */
.nav-tabs .nav-link {
    background: #f5f5f5;
    color: #333;
    border: 1px solid transparent;
    border-radius: 6px;         /* slightly tighter */
    padding: 6px 14px;          /* 🔥 reduced padding */
    font-size: 14px;            /* 🔥 slightly smaller to fit all */
    font-weight: 600;
    white-space: nowrap;        /* 🔥 prevent text breaking */
    transition: all 0.25s ease;
}

/* Hover */
.nav-tabs .nav-link:hover {
    background: #eaeaea;
}

/* ===== ACTIVE TAB ===== */
/* FORCE ACTIVE TAB STYLE */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    background: #000 !important;
    color: #fff !important;
    border: 1px solid #000 !important;
}

.nav-tabs .nav-link.active {
    background: #000;
    color: #fff;
    border: 1px solid #000;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

@media (max-width: 768px) {

    .nav-tabs {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 6px;
        padding: 10px 10px;
        border-bottom: none;
    }

    .nav-tabs .nav-link {
        background: transparent;        /* 🔥 remove heavy boxes */
        border: 1px solid #e0e0e0;
        border-radius: 20px;
        padding: 6px 12px;
        font-size: 14px;
        font-weight: 500;
        color: #555;
        text-align: center;
    }

    /* ACTIVE TAB */
    .nav-tabs .nav-link.active {
        background: #000 !important;
        color: #fff !important;
        border: 1px solid #000 !important;
    }
}

@media (max-width: 768px) {
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
    }
}