/* 增强图标系统 - 只为缺失的图标添加替代方案 */

/* 🎨 使用现有yunfont图标的完美映射 */

/* 只为不存在的图标添加映射 */
.icon-img:before {
    content: "\e91d"; /* icon-beauty - 美化图标，适合图片 */
}

.icon-music:before {
    content: "\e943"; /* icon-musicplay - 专业音乐播放图标 */
}

.icon-video:before {
    content: "\e926"; /* icon-play - 播放按钮图标 */
}

.icon-other:before {
    content: "\e920"; /* icon-list - 列表图标 */
}

/* 功能性图标 - 只为不存在的添加 */
.icon-menu:before {
    content: "\e913"; /* icon-more - 更多菜单图标 */
}

.icon-trash:before {
    content: "\e923"; /* icon-recovery - 回收站图标 */
}

.icon-chart-line:before {
    content: "\e911"; /* icon-grid - 网格图标，适合数据分析 */
}

.icon-vip:before {
    content: "\e969"; /* icon-share-sellmall - 商城图标，适合VIP */
}

.icon-record:before {
    content: "\e921"; /* icon-history - 历史记录图标 */
}

.icon-money:before {
    content: "\e907"; /* icon-download - 下载图标，适合提现 */
}

/* 为文件类型添加特定的图标样式 */
.el-menu-item[data-type="all"] .icon {
    color: #3B82F6; /* 蓝色 */
}

.el-menu-item[data-type="img"] .icon {
    color: #F97316; /* 橙色 */
}

.el-menu-item[data-type="video"] .icon {
    color: #EF4444; /* 红色 */
}

.el-menu-item[data-type="music"] .icon {
    color: #22C55E; /* 绿色 */
}

.el-menu-item[data-type="other"] .icon {
    color: #6B7280; /* 灰色 */
}

/* 移动端 tabbar 图标颜色 */
.mobile-tab-item[data-type="all"] .mobile-tab-icon {
    color: #3B82F6;
}

.mobile-tab-item[data-type="img"] .mobile-tab-icon {
    color: #F97316;
}

.mobile-tab-item[data-type="video"] .mobile-tab-icon {
    color: #EF4444;
}

.mobile-tab-item[data-type="music"] .mobile-tab-icon {
    color: #22C55E;
}

.mobile-tab-item[data-type="other"] .mobile-tab-icon {
    color: #6B7280;
}

.mobile-tab-item[data-type="share"] .mobile-tab-icon {
    color: #8B5CF6;
}

/* 活跃状态的图标颜色 */
.el-menu-item.select .icon,
.mobile-tab-item.active .mobile-tab-icon {
    color: #FFFFFF !important;
}

/* 移动端抽屉菜单图标样式 */
.mobile-drawer-item .icon {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

.mobile-drawer-item:hover .icon {
    color: var(--primary-color);
}

/* 特殊图标的颜色定义 */
.icon-dashboard {
    color: #8B5CF6; /* 紫色 - 站长中心 */
}

.icon-chart-line {
    color: #06B6D4; /* 青色 - 数据分析 */
}

.icon-vip {
    color: #F59E0B; /* 黄色 - VIP */
}

.icon-money {
    color: #10B981; /* 绿色 - 财务 */
}

.icon-record {
    color: #6366F1; /* 靛蓝色 - 记录 */
}

.icon-star {
    color: #F59E0B; /* 黄色 - 星级 */
}

/* 主题适配 */
[data-theme="dark"] .mobile-drawer-item .icon {
    color: var(--text-secondary);
}

[data-theme="dark"] .mobile-drawer-item:hover .icon {
    color: var(--primary-color);
}

/* 响应式图标大小 */
@media (max-width: 768px) {
    .mobile-tab-icon {
        font-size: 20px;
    }
    
    .mobile-drawer-item .icon {
        font-size: 18px;
    }
}

/* 图标动画效果 */
.icon {
    transition: color 0.3s ease, transform 0.3s ease;
}

.icon:hover {
    transform: scale(1.1);
}

/* 特殊图标的旋转动画 */
.icon-setting:hover {
    animation: rotate 0.5s ease-in-out;
}

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

/* 音乐图标的脉动动画 */
.icon-musicplay:hover {
    animation: pulse 0.5s ease-in-out;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* 视频图标的播放动画 */
.icon-play:hover {
    animation: playPulse 0.5s ease-in-out;
}

@keyframes playPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}