/* Wrapper with arrows */
.vanilla-tabs-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%; /* ensures wrapper never expands page */
    overflow: hidden; /* prevents horizontal page scroll */
}

/* Scrollable area */
.vanilla-tabs-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    flex: 1;
    max-width: 100%; /* CRITICAL: prevents page expansion */
    scrollbar-width: none; /* Firefox */
}

    .vanilla-tabs-scroll::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

/* Arrow buttons */
.vanilla-tabs-arrow {
    background: #f8f9fa;
    border: 1px solid #ccc;
    padding: 4px 10px;
    cursor: pointer;
    border-radius: 4px;
    font-weight: bold;
    user-select: none;
}

    .vanilla-tabs-arrow:hover {
        background: #e9ecef;
    }

/* Tabs */
.vanilla-tabs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex; /* CRITICAL: prevents wrapping */
    gap: 4px;
    border-bottom: 2px solid #ccc;
}

    .vanilla-tabs li a {
        display: block;
        padding: 8px 14px;
        background: #eee;
        cursor: pointer;
        border-radius: 4px 4px 0 0;
        text-decoration: none;
        color: inherit;
        border: 1px solid #ccc;
        border-bottom: none;
        position: relative;
    }

    /* Active tab */
    .vanilla-tabs li.active a {
        background: #fff;
        font-weight: bold;
        top: 2px;
        border-top: 5px solid var(--primary);
        border-bottom: 2px solid #fff;
    }

/* Content container */
#vanilla-tabs-container {
    margin-top: -2px;
    border: 1px solid #ccc;
    padding: 10px;
    background: #fff;
    border-radius: 0 4px 4px 4px;
}

/* Layout container */
.vanilla-pills {
    display: flex;
    gap: 0;
}

/* Left column (pills) */
.vanilla-pills-nav {
    width: 150px;
    border-right: 1px solid #ccc;
    background: #f8f9fa;
}

/* Right column (content) */
.vanilla-pills-content {
    flex: 1;
    padding-left: 10px;
}
/* Group header */
.vanilla-pills-group {
    padding: 10px 14px;
    font-size: 0.85rem;
    font-weight: bold;
    color: #555;
    text-transform: uppercase;
    background: #e9ecef;
    border-bottom: 1px solid #ccc;
    cursor: default;
}




/* Pill list */
.vanilla-pills-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    /* Each pill */
    .vanilla-pills-list li a {
        display: block;
        padding: 5px 5px;
        background: #eee;
        border-bottom: 1px solid #ccc;
        text-decoration: none;
        color: inherit;
        cursor: pointer;
        user-select: none;
    }

    /* Active pill */
    .vanilla-pills-list li.active a {
        background: #fff;
        font-weight: bold;
        border-left: 5px solid var(--primary);
        border-bottom: 1px solid #ccc;
    }

/* Content box */
#vanilla-pills-container {
    border: 1px solid #ccc;
    padding: 10px;
    background: #fff;
    border-radius: 4px;
}