/* Контейнер для вкладок */
.tabs {
    display: flex;
    gap: 5px;
    padding: 5px;
    background-color: var(--sidebar-color);
    border-bottom: 2px solid var(--accent-color);
    overflow-x: auto;
    border-radius: 5px;
    white-space: nowrap;
}

/* Стили для отдельной вкладки */
.tab {
    display: flex;
    align-items: center;
    background-color: var(--sidebar-color);
    color: var(--sidebar-text-color);
    /* Используем переменную для цвета текста */
    padding: 5px 15px;
    border-radius: 5px 5px 0 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.3s ease;
}

/* Активная вкладка */
.tab.active {
    background-color: var(--accent-color);
}

/* Кнопка закрытия вкладки */
.close-tab {
    background: none;
    border: none;
    color: var(--sidebar-text-color);
    /* Используем переменную для цвета текста */
    cursor: pointer;
    font-size: 16px;
    margin-left: 10px;
    padding: 0;
    transition: color 0.3s ease;
}

/* Эффект при наведении на кнопку закрытия */
.close-tab:hover {
    color: #ff6b6b;
}

/* Эффект при наведении на вкладку */
.tab:hover {
    background-color: var(--accent-hover-color);
}