/* =========================[ FEX SEGMENTED NAV ]========================= */

/* Container geral */
.tab-container {
    padding: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid var(--color-gray-light);
}

/* Scroll discreto */
.tab-container::-webkit-scrollbar {
    height: 4px;
}

.tab-container::-webkit-scrollbar-thumb {
    background: var(--color-gray-medium);
    border-radius: 4px;
}

/* Linha interna */
.config-nav {
    display: flex;
    gap: 4px;
    min-width: max-content;
}

/* =======================================================================
   TAB RESET (ISOLA DO BUTTON.CSS)
======================================================================= */

.tab-item {
    all: unset; /* 🔥 REMOVE herança do button.css */
    
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 6px 14px;
    font-size: var(--font-size-small);

    color: var(--color-gray);
    border-bottom: 1px solid transparent;

    cursor: pointer;
    transition: 
        background 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
}

/* Hover */
.tab-item:hover {
    background: white;
    color: var(--color-blue-primary);
    border-bottom: 1px solid var(--color-blue-primary);

    
    box-shadow: 0 0px 0px rgba(0,0,0,0.08);

    padding: 6px 14px;
    font-size: var(--font-size-small);
}

/* Ativo */
.tab-item.active {
    background: #ffffff;
    color: var(--color-blue-primary);
    border-bottom: 1px solid var(--color-blue-primary);
    font-weight: 600;
    box-shadow: 0 0px 0px rgba(0,0,0,0.08);
}

/* =======================================================================
   SUBTABS
======================================================================= */

.subtab-item {
    all: unset;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 5px 12px;
    font-size: var(--font-size-small);
    font-weight: 500;

    color: var(--color-gray);
    border-radius: var(--radius-tiny);
    border-bottom: 1px solid transparent;

    cursor: pointer;
    transition: 
        background 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
    box-shadow: 0 0px 0px rgba(0,0,0,0.06);
}

.subtab-item:hover {
    background: white;
    color: var(--color-blue-primary);

    padding: 5px 12px;
    font-size: var(--font-size-small);
    border-bottom: 1px solid var(--color-blue-primary);
    box-shadow: 0 0px 0px rgba(0,0,0,0.06);
}

.subtab-item.active {
    background: #ffffff;
    color: var(--color-blue-primary);
    font-weight: 600;
    box-shadow: 0 0px 0px rgba(0,0,0,0.06);
}