/* 顶部标签页导航栏样式 - Modern Clean Style */
.tabs-nav-container {
    position: fixed;
    top: 60px; /* 紧接 Top Navbar (60px) 之下 */
    left: 210px; /* 默认对齐侧边栏 */
    right: 0;
    height: 44px; /* Slightly taller for better breathing room */
    background-color: #ffffff; /* 纯白背景，更干净 */
    border-bottom: 1px solid #d1d3e2; /* 与顶部菜单和侧边栏一致的边框 */
    box-shadow: 0 4px 6px rgba(0,0,0,0.03); /* 增加阴影，增强层次感 */
    z-index: 850;
    display: flex;
    align-items: center;
    padding: 0 15px; /* 增加左右内边距 */
    overflow: hidden;
    transition: left 0.3s ease;
}

/* 标签滚动区域 */
.tabs-scroll-wrapper {
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    display: flex;
    align-items: center;
    height: 100%;
    gap: 6px; /* 使用 gap 控制标签间距 */
}

.tabs-scroll-wrapper::-webkit-scrollbar {
    display: none;
}

/* 单个标签项 - Pill/Card Style */
.nav-tab {
    display: inline-flex;
    align-items: center;
    height: 32px; /* 保持适中高度 */
    padding: 0 12px 0 16px; /* 左侧文字留白多一点，右侧给关闭按钮留空间 */
    background-color: transparent; /* 默认透明 */
    border: 1px solid transparent; /* 预留边框位置防止跳动 */
    border-radius: 4px; /* 全圆角 */
    font-size: 13px;
    color: #858796; /* 默认灰色字体 */
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    position: relative;
    max-width: 200px; /* 限制最大宽度 */
}

/* 悬停状态 */
.nav-tab:hover {
    background-color: #f8f9fc;
    color: #5a5c69;
}

/* 激活状态 */
.nav-tab.active {
    background-color: #eef2ff; /* 极淡的品牌色背景 */
    color: #4e73df; /* 品牌色字体 */
    font-weight: 600;
    border: 1px solid rgba(78, 115, 223, 0.1); /* 极淡的品牌色边框 */
}

/* 激活状态下的伪元素装饰（可选：左侧小竖条） */
.nav-tab.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background-color: #4e73df;
    border-radius: 0 2px 2px 0;
    display: none; /* 暂时隐藏，如果需要更强强调可以开启 */
}

.nav-tab-title {
    margin-right: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 关闭按钮 */
.nav-tab-close {
    width: 18px;
    height: 18px;
    border-radius: 4px; /* 方形圆角 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px; /* 稍微调小图标 */
    color: #b7b9cc; /* 默认非常淡，减少视觉干扰 */
    transition: all 0.2s;
    opacity: 0.8;
}

/* 激活标签的关闭按钮稍微明显一点 */
.nav-tab.active .nav-tab-close {
    color: #a0aec0;
}

.nav-tab:hover .nav-tab-close {
    opacity: 1;
    color: #858796;
}

.nav-tab-close:hover {
    background-color: #e74a3b;
    color: #ffffff !important; /* 强制变白 */
}

/* 右键菜单 - 保持原样，微调阴影 */
.tabs-context-menu {
    position: fixed;
    background: #fff;
    border: 1px solid #e3e6f0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-radius: 6px;
    padding: 6px 0;
    min-width: 140px;
    z-index: 99999;
    display: none;
    animation: fadeIn 0.1s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.tabs-context-menu-item {
    padding: 8px 16px;
    font-size: 13px;
    color: #5a5c69;
    cursor: pointer;
    transition: background 0.1s;
    display: flex;
    align-items: center;
}

.tabs-context-menu-item:hover {
    background-color: #f8f9fa;
    color: #4e73df;
}

.tabs-context-menu-item i {
    margin-right: 10px;
    width: 16px;
    text-align: center;
    font-size: 12px;
}

.tabs-context-divider {
    height: 1px;
    background-color: #eaecf4;
    margin: 4px 0;
}

/* 适配主题 - 现代纯白 */
body.theme-modern-light .tabs-nav-container {
    background-color: #ffffff;
    border-bottom-color: #eaecf4;
}

/* 适配主题 - 活力渐变 */
body.theme-vibrant-gradient .tabs-nav-container {
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}

/* 布局调整 */
body.has-tabs-nav .content {
    /* 80px (Navbar + gap) + 35px (Tabs extra height) */
    margin-top: 115px !important; 
}

body.has-tabs-nav .sticky-search-container {
    top: 115px !important;
}

/* 移动端复原：隐藏顶部标签栏，避免干扰移动端布局 */
@media (max-width: 768px) {
    .tabs-nav-container {
        display: none !important;
    }
    body.has-tabs-nav .content {
        margin-top: 80px !important;
    }
    body.has-tabs-nav .sticky-search-container {
        top: 80px !important;
        left: 0 !important;
        margin: 0 10px !important;
    }
}