// FilterBar 筛选工具栏样式
// 使用全局变量，符合设计规范 v3.6
// 注意：全局 .filter-bar 已移除 border-bottom，此处定义组件特定样式

@import '@/styles/variables.scss';

.filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: $spacing-3 0;  // 12px 0 - 更紧凑

    // Tab 样式覆盖
    .ant-tabs {
        .ant-tabs-nav {
            margin: 0;
            
            .ant-tabs-tab {
                padding: $spacing-2 $spacing-3;  // 8px 12px - 更紧凑
                font-size: $font-md;  // 13px
                color: $text-secondary;
                transition: $transition-base;
                
                &:hover {
                    color: $text-primary;
                }
                
                &.ant-tabs-tab-active {
                    .ant-tabs-tab-btn {
                        color: $primary-color;
                        font-weight: $font-weight-semibold;
                    }
                }
            }
            
            .ant-tabs-ink-bar {
                background: $primary-color;
            }
        }
    }

    // 搜索框包装器 - 统一圆角设计
    .search-wrapper {
        display: flex;
        align-items: center;
        width: $spacing-10 * 7.5;  // 300px
        height: 36px;  // 36px - 与 Tab 高度统一
        background: $bg-secondary;
        border: 1px solid $border-base;
        border-radius: $radius-lg;  // 8px
        transition: all 0.2s $easing-default;
        position: relative;
        overflow: hidden;
        
        // 输入框
        .search-input {
            flex: 1;
            border: none !important;
            box-shadow: none !important;
            background: transparent !important;
            
            input {
                font-size: $font-md;  // 13px
                color: $text-primary;
                padding: 0 $spacing-3;  // 12px 左右内边距
                height: 100%;
                
                &::placeholder {
                    color: $text-hint;
                }
            }
        }
        
        // 搜索按钮（右侧）
        .search-button {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 100%;
            background: transparent;
            border: none;
            border-left: 1px solid transparent;
            color: $text-secondary;
            font-size: $font-lg;
            cursor: pointer;
            transition: all 0.2s $easing-default;
            flex-shrink: 0;
            
            &:hover:not(:disabled) {
                color: $primary-color;
                background: rgba(0, 93, 128, 0.05);
            }

            &:disabled {
                cursor: not-allowed;
                opacity: 0.6;
            }
        }

        // 聚焦状态
        &.focused {
            border-color: $primary-color;
            box-shadow: 0 0 0 2px rgba(0, 93, 128, 0.2);
            
            .search-button {
                color: $primary-color;
            }
        }
        
        // 加载状态
        &.loading {
            .search-button {
                color: $text-hint;
            }
        }
        
        // 悬停状态
        &:hover:not(.focused):not(.loading) {
            border-color: $primary-color;
            
            .search-button {
                color: $primary-color;
            }
        }
    }
}

// 移动端适配
@media (max-width: 768px) {
    .filter-bar {
        flex-direction: column;
        gap: $spacing-3;  // 12px
        align-items: stretch;
        
        .ant-tabs {
            width: 100%;
            
            .ant-tabs-nav {
                .ant-tabs-tab {
                    padding: $spacing-2 $spacing-3;  // 8px 12px
                    font-size: $font-sm;  // 11px
                }
            }
        }
        
        .search-wrapper {
            width: 100%;
            
            .search-input {
                input {
                    font-size: $font-base;  // 12px
                }
            }
        }
    }
}
