/* components.css */

.section-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-tab {
    padding: 6px 16px;

    border: none;
    border-radius: 8px;

    background: var(--section-tab-background);
    color: var(--section-tab-color);

    font-family: "Arial", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;

    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}

.section-tab:hover {
    background: var(--section-tab-hover-background);
}

.section-tab.active {
    background: var(--section-tab-active-background);
    color: var(--section-tab-active-color);
}

.tooltip {
    position: absolute;

    background: var(--bg-tooltip);
    color: var(--text-tooltip);
    backdrop-filter: blur(6px);

    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;

    white-space: nowrap;
    transform: translateX(-50%) scale(0.95);

    opacity: 0;
    transition: 
        opacity .25s cubic-bezier(0.22, 1, 0.36, 1),
        transform .25s cubic-bezier(0.22, 1, 0.36, 1);

    pointer-events: none;
    z-index: 100;
}

.tooltip.show {
    opacity: 1;
    transform: translate(-50%) scale(1);
}

.dark .tooltip {
    border: 1px solid rgba(255, 255, 255, 0.35);
}