/**
 * 全局通用组件样式
 * 包含：按钮、卡片、徽章、标签、警告提示等所有页面通用的UI组件
 * 
 * 注意：此文件中的样式不应被其他CSS文件重复定义！
 */

/* ========== 按钮系统 ========== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--font-base);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
    line-height: var(--leading-normal);
    white-space: nowrap;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

.btn:active {
    transform: translateY(0);
}

/* 主按钮 - 品牌绿色 */
.btn-primary {
    background: var(--primary-gradient);
    color: white;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--primary-dark), #8aa632);
}

/* 次要按钮 */
.btn-secondary {
    background: var(--bg-gray);
    color: var(--text-secondary);
}

.btn-secondary:hover {
    background: var(--bg-hover);
}

/* 边框按钮 */
.btn-outline {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.btn-outline:hover {
    background: var(--bg-gray);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* 危险按钮 */
.btn-danger {
    background: var(--error-color);
    color: white;
}

.btn-danger:hover {
    background: #ff5252;
}

/* 成功按钮 */
.btn-success {
    background: var(--success-color);
    color: white;
}

.btn-success:hover {
    background: #45a816;
}

/* 链接按钮 */
.btn-link {
    background: transparent;
    color: var(--primary-color);
    padding: var(--spacing-sm) var(--spacing-md);
}

.btn-link:hover {
    background: var(--primary-light);
    transform: none;
    box-shadow: none;
}

/* 按钮尺寸变体 */
.btn-sm {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-sm);
    border-radius: var(--radius-sm);
}

.btn-lg {
    padding: var(--spacing-lg) var(--spacing-xl);
    font-size: var(--font-lg);
    border-radius: var(--radius-lg);
}

/* 禁用状态 */
.btn:disabled,
.btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* 全宽按钮 */
.btn-block {
    width: 100%;
}

/* 带图标的按钮 */
.btn i.material-icons {
    font-size: 18px;
}

.btn-sm i.material-icons {
    font-size: 16px;
}

.btn-lg i.material-icons {
    font-size: 20px;
}

/* ========== 卡片系统 ========== */
.card {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: all var(--transition-base);
}

.card:hover {
    box-shadow: var(--shadow-md);
}

.card-header {
    padding: var(--spacing-lg) var(--spacing-xl);
    border-bottom: 1px solid var(--border-light);
}

.card-header h3 {
    margin: 0;
    font-size: var(--font-xl);
    font-weight: 600;
    color: var(--text-primary);
}

.card-body {
    padding: var(--spacing-xl);
}

.card-footer {
    padding: var(--spacing-md) var(--spacing-xl);
    border-top: 1px solid var(--border-light);
    background: var(--bg-light);
}

/* 可点击卡片 */
.card-clickable {
    cursor: pointer;
}

.card-clickable:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* 无边框卡片 */
.card-borderless {
    box-shadow: none;
    border: 1px solid var(--border-color);
}

/* 紧凑卡片 */
.card-compact .card-body {
    padding: var(--spacing-md);
}

/* ========== 徽章/标签系统 ========== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: 20px;
    font-size: var(--font-xs);
    font-weight: 500;
    line-height: var(--leading-normal);
}

.badge-primary {
    background: var(--primary-light);
    color: #7a9c38;
}

.badge-success {
    background: rgba(82, 196, 26, 0.15);
    color: #389e0d;
}

.badge-warning {
    background: rgba(255, 193, 7, 0.15);
    color: #d48806;
}

.badge-error {
    background: rgba(255, 107, 107, 0.15);
    color: #cf1322;
}

.badge-info {
    background: rgba(24, 144, 255, 0.15);
    color: #096dd9;
}

.badge-default {
    background: var(--bg-gray);
    color: var(--text-secondary);
}

/* 小徽章 */
.badge-sm {
    padding: 2px var(--spacing-xs);
    font-size: 11px;
}

/* 大徽章 */
.badge-lg {
    padding: 6px var(--spacing-md);
    font-size: var(--font-sm);
}

/* ========== 警告提示系统 ========== */
.alert {
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    font-size: var(--font-base);
    line-height: var(--leading-relaxed);
}

.alert i.material-icons {
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.alert-success {
    background: #f6ffed;
    border: 1px solid #b7eb8f;
    color: #389e0d;
}

.alert-success i {
    color: var(--success-color);
}

.alert-error {
    background: #fff2f0;
    border: 1px solid #ffccc7;
    color: #cf1322;
}

.alert-error i {
    color: var(--error-color);
}

.alert-warning {
    background: #fffbe6;
    border: 1px solid #ffe58f;
    color: #d48806;
}

.alert-warning i {
    color: var(--warning-color);
}

.alert-info {
    background: #e6f7ff;
    border: 1px solid #91d5ff;
    color: #096dd9;
}

.alert-info i {
    color: var(--info-color);
}

/* 可关闭的警告 */
.alert-dismissible {
    position: relative;
    padding-right: 48px;
}

.alert-close {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
    transition: opacity var(--transition-fast);
}

.alert-close:hover {
    opacity: 1;
}

/* ========== 空状态 ========== */
.empty-state {
    text-align: center;
    padding: var(--spacing-3xl) var(--spacing-xl);
    color: var(--text-muted);
}

.empty-state i.material-icons {
    font-size: 64px;
    color: #d9d9d9;
    margin-bottom: var(--spacing-md);
}

.empty-state h3 {
    font-size: var(--font-xl);
    color: var(--text-secondary);
    margin: 0 0 var(--spacing-xs) 0;
}

.empty-state p {
    font-size: var(--font-base);
    margin: 0 0 var(--spacing-lg) 0;
}

/* ========== 加载状态 ========== */
.loading {
    text-align: center;
    padding: var(--spacing-xl);
    color: var(--text-muted);
}

.loading i.material-icons {
    font-size: 32px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ========== 分隔线 ========== */
.divider {
    height: 1px;
    background: var(--border-color);
    margin: var(--spacing-lg) 0;
}

.divider-text {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--text-muted);
    font-size: var(--font-base);
    margin: var(--spacing-lg) 0;
}

.divider-text::before,
.divider-text::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--border-color);
}

.divider-text::before {
    margin-right: var(--spacing-md);
}

.divider-text::after {
    margin-left: var(--spacing-md);
}

/* ========== 响应式适配 ========== */
@media (max-width: 768px) {
    .btn {
        padding: 10px 20px;
        font-size: var(--font-base);
    }
    
    .btn-lg {
        padding: 14px 28px;
    }
    
    .card-body {
        padding: var(--spacing-lg);
    }
    
    .alert {
        padding: var(--spacing-sm) var(--spacing-md);
    }
}