/* TAB组件样式 - 现代设计版 */

:root {
    --tab-color-primary: #4361ee;
    --tab-color-primary-light: #4895ef;
    --tab-color-secondary: #4cc9f0;
    --tab-color-text: #333;
    --tab-color-text-secondary: #666;
    --tab-color-bg: #ffffff;
    --tab-color-bg-light: #f8f9fa;
    --tab-color-bg-hover: #f0f4ff;
    --tab-color-border: #e0e0e0;
    --tab-color-border-light: #f0f0f0;
}

/* 标签容器 */
.tabs {
    margin: 1.5rem 0;
    font-family: var(--font-family-base, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--tab-color-bg);
}

/* 标签导航栏 */
.tab-nav {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    background-color: var(--tab-color-bg-light);
    border-bottom: 1px solid var(--tab-color-border-light);
}

/* 标签按钮基础样式 */
.tab-btn {
    padding: 1rem 1.75rem;
    background-color: transparent;
    border: none;
    color: var(--tab-color-text-secondary);
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    position: relative;
    white-space: nowrap;
    user-select: none;
}

/* 标签按钮悬停效果 */
.tab-btn:hover:not(:disabled) {
    background-color: var(--tab-color-bg-hover);
    color: var(--tab-color-primary);
}

/* 标签按钮激活状态 - 现代下划线样式 */
.tab-btn.active {
    color: var(--tab-color-primary);
    background-color: var(--tab-color-bg);
    font-weight: 600;
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%;
    width: 60%;
    height: 3px;
    background: linear-gradient(90deg, var(--tab-color-primary), var(--tab-color-primary-light));
    border-radius: 3px;
    animation: tabSlideIn 0.3s ease-out;
}

/* 标签下划线动画 */
@keyframes tabSlideIn {
    from {
        width: 0;
        left: 50%;
    }
    to {
        width: 60%;
        left: 20%;
    }
}

/* 标签按钮禁用状态 */
.tab-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 标签内容区域 */
.tab-content {
    padding: 2rem;
    min-height: 240px;
}

/* 标签面板 */
.tab-panel {
    display: none;
}

/* 激活的标签面板 - 带淡入动画 */
.tab-panel.active {
    display: block;
    animation: tabFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 内容淡入动画 */
@keyframes tabFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 变体样式：圆角标签 */
.tabs.-rounded {
    border-radius: 20px;
}

.tabs.-rounded .tab-nav {
    border-radius: 20px 20px 0 0;
}

.tabs.-rounded .tab-content {
    border-radius: 0 0 20px 20px;
}

.tabs.-rounded .tab-btn {
    padding: 0.9rem 1.5rem;
}

/* 变体样式：卡片式标签 */
.tabs.-card {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--tab-color-border-light);
}

.tabs.-card .tab-nav {
    background-color: transparent;
    border-bottom: 1px solid var(--tab-color-border-light);
}

.tabs.-card .tab-btn {
    padding: 1rem 2rem;
}

.tabs.-card .tab-content {
    background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
}

/* 变体样式：简约标签 */
.tabs.-simple {
    box-shadow: none;
    border: 1px solid var(--tab-color-border);
}

.tabs.-simple .tab-nav {
    background-color: var(--tab-color-bg-light);
    border-bottom: 1px solid var(--tab-color-border);
}

.tabs.-simple .tab-btn.active {
    background-color: var(--tab-color-primary);
    color: white;
}

.tabs.-simple .tab-btn.active::after {
    display: none;
}

/* 变体样式：图标标签 */
.tabs.-icon .tab-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tabs.-icon .tab-btn i {
    font-size: 1.1rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .tabs {
        margin: 1rem 0;
    }
    
    .tab-nav {
        flex-direction: column;
        background-color: var(--tab-color-bg);
    }
    
    .tab-btn {
        width: 100%;
        text-align: left;
        padding: 0.9rem 1.5rem;
        border-bottom: 1px solid var(--tab-color-border-light);
    }
    
    .tab-btn:last-child {
        border-bottom: none;
    }
    
    .tab-btn.active {
        background-color: var(--tab-color-bg-hover);
    }
    
    .tab-btn.active::after {
        left: 0;
        width: 4px;
        height: 60%;
        top: 20%;
        animation: tabSlideInMobile 0.3s ease-out;
    }
    
    @keyframes tabSlideInMobile {
        from {
            height: 0;
            top: 50%;
        }
        to {
            height: 60%;
            top: 20%;
        }
    }
    
    .tab-content {
        padding: 1.5rem;
        min-height: 200px;
    }
    
    /* 移动设备上的卡片样式调整 */
    .tabs.-card .tab-nav {
        border-bottom: none;
    }
    
    .tabs.-card .tab-btn {
        border-bottom: 1px solid var(--tab-color-border-light);
    }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
    :root {
        --tab-color-primary: #4cc9f0;
        --tab-color-primary-light: #4895ef;
        --tab-color-text: #f5f5f5;
        --tab-color-text-secondary: #a0a0a0;
        --tab-color-bg: #1e1e2e;
        --tab-color-bg-light: #2a2a3a;
        --tab-color-bg-hover: #333344;
        --tab-color-border: #3a3a4a;
        --tab-color-border-light: #333344;
    }
    
    .tabs {
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
    }
    
    .tabs.-card .tab-content {
        background: linear-gradient(135deg, #2a2a3a 0%, #1e1e2e 100%);
    }
}