/**
 * SVG 图标样式
 * 用于替换 emoji，提供跨平台一致性
 */

/* 基础图标样式 */
.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    stroke: currentColor;
    fill: none;
    vertical-align: -0.125em;
    overflow: visible;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 尺寸变体 */
.icon-xs {
    width: 0.75em;
    height: 0.75em;
}

.icon-sm {
    width: 0.875em;
    height: 0.875em;
}

.icon-lg {
    width: 1.25em;
    height: 1.25em;
}

.icon-xl {
    width: 1.5em;
    height: 1.5em;
}

.icon-2x {
    width: 2em;
    height: 2em;
}

.icon-3x {
    width: 3em;
    height: 3em;
}

/* 固定像素尺寸 */
.icon-16 {
    width: 16px;
    height: 16px;
}

.icon-20 {
    width: 20px;
    height: 20px;
}

.icon-24 {
    width: 24px;
    height: 24px;
}

.icon-32 {
    width: 32px;
    height: 32px;
}

/* 颜色变体 */
.icon-primary {
    stroke: var(--primary-color, #3b82f6);
}

.icon-success {
    stroke: var(--success-color, #10b981);
}

.icon-warning {
    stroke: var(--warning-color, #f59e0b);
}

.icon-danger {
    stroke: var(--danger-color, #ef4444);
}

.icon-muted {
    stroke: var(--text-muted, #6b7280);
}

/* 填充样式（用于需要填充的图标如星标） */
.icon-filled {
    fill: currentColor;
}

.icon-star-filled {
    fill: #fbbf24;
    stroke: #fbbf24;
}

/* 统计卡片图标样式 */
.stat-icon .icon {
    width: 32px;
    height: 32px;
    stroke-width: 1.5;
}

/* 搜索图标样式 */
.search-icon .icon {
    width: 18px;
    height: 18px;
    stroke: var(--text-muted, #6b7280);
}

/* 按钮图标样式 */
.btn-icon .icon {
    width: 20px;
    height: 20px;
}

/* 标题图标样式 */
h3 .icon {
    vertical-align: -0.1em;
    margin-right: 0.25em;
}

/* 登录页标题图标 */
.login-header .icon {
    width: 1.2em;
    height: 1.2em;
    vertical-align: -0.15em;
    margin-right: 0.1em;
}

/* 动画效果 */
.icon-spin {
    animation: icon-spin 1s linear infinite;
}

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

/* 悬停效果 */
.icon-hover:hover {
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

/* 过渡效果 */
.icon-transition {
    transition: all 0.2s ease;
}