/**
 * 专业文件类型图标样式
 * LAN Transfer - Professional File Type Icons
 * 设计风格：现代扁平化，带文件类型字母标识
 */

/* 基础文件图标容器 */
.file-icon {
    width: 32px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
    vertical-align: middle;
    margin-right: 8px;
    border-radius: 6px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 700;
    font-size: 11px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 
        0 2px 4px rgba(0,0,0,0.1),
        0 1px 2px rgba(0,0,0,0.08),
        inset 0 1px 0 rgba(255,255,255,0.2);
    overflow: hidden;
}

/* 文件图标内部结构 */
.file-icon::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 12px;
    height: 12px;
    background: linear-gradient(135deg, rgba(255,255,255,0.3) 50%, transparent 50%);
    border-bottom-left-radius: 4px;
}

/* 图标内文字样式 */
.file-icon-text {
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* ===== 微软 Office 文档 ===== */

/* Word 文档 - 蓝色 */
.file-icon-doc,
.file-icon-docx {
    background: linear-gradient(135deg, #2b579a 0%, #1e3f6f 100%);
}
.file-icon-doc::after,
.file-icon-docx::after {
    content: 'W';
}

/* Excel 表格 - 绿色 */
.file-icon-xls,
.file-icon-xlsx,
.file-icon-csv {
    background: linear-gradient(135deg, #217346 0%, #165532 100%);
}
.file-icon-xls::after,
.file-icon-xlsx::after,
.file-icon-csv::after {
    content: 'X';
}

/* PPT 演示 - 橙色 */
.file-icon-ppt,
.file-icon-pptx {
    background: linear-gradient(135deg, #d24726 0%, #a33618 100%);
}
.file-icon-ppt::after,
.file-icon-pptx::after {
    content: 'P';
}

/* ===== Adobe 文档 ===== */

/* PDF 文件 - 红色 */
.file-icon-pdf {
    background: linear-gradient(135deg, #dc3545 0%, #b02a37 100%);
}
.file-icon-pdf::after {
    content: 'PDF';
    font-size: 8px;
    letter-spacing: 0;
}

/* ===== 文本文件 ===== */

/* 纯文本 - 灰色 */
.file-icon-txt {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
}
.file-icon-txt::after {
    content: 'TXT';
    font-size: 8px;
    letter-spacing: 0;
}

/* Markdown - 深灰色 */
.file-icon-md {
    background: linear-gradient(135deg, #495057 0%, #343a40 100%);
}
.file-icon-md::after {
    content: 'M↓';
    font-size: 9px;
}

/* ===== 图片文件 - 紫色系 ===== */

.file-icon-jpg,
.file-icon-jpeg,
.file-icon-png,
.file-icon-gif,
.file-icon-bmp,
.file-icon-webp,
.file-icon-svg,
.file-icon-ico,
.file-icon-tiff,
.file-icon-raw,
.file-icon-psd {
    background: linear-gradient(135deg, #9333ea 0%, #7e22ce 100%);
}
.file-icon-jpg::after,
.file-icon-jpeg::after {
    content: 'JPG';
    font-size: 8px;
}
.file-icon-png::after {
    content: 'PNG';
    font-size: 8px;
}
.file-icon-gif::after {
    content: 'GIF';
    font-size: 8px;
}
.file-icon-svg::after {
    content: 'SVG';
    font-size: 8px;
}
.file-icon-webp::after {
    content: 'WEB';
    font-size: 7px;
}
.file-icon-ico::after {
    content: 'ICO';
    font-size: 8px;
}
.file-icon-bmp::after,
.file-icon-tiff::after,
.file-icon-raw::after,
.file-icon-psd::after {
    content: 'IMG';
    font-size: 8px;
}

/* ===== 视频文件 - 橙/琥珀色 ===== */

.file-icon-mp4,
.file-icon-avi,
.file-icon-mov,
.file-icon-wmv,
.file-icon-flv,
.file-icon-mkv,
.file-icon-webm,
.file-icon-m4v,
.file-icon-mpg,
.file-icon-mpeg {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}
.file-icon-mp4::after {
    content: 'MP4';
    font-size: 8px;
}
.file-icon-avi::after {
    content: 'AVI';
    font-size: 8px;
}
.file-icon-mov::after {
    content: 'MOV';
    font-size: 8px;
}
.file-icon-mkv::after {
    content: 'MKV';
    font-size: 8px;
}
.file-icon-wmv::after,
.file-icon-flv::after,
.file-icon-webm::after,
.file-icon-m4v::after,
.file-icon-mpg::after,
.file-icon-mpeg::after {
    content: 'VID';
    font-size: 8px;
}

/* ===== 音频文件 - 粉色/洋红色 ===== */

.file-icon-mp3,
.file-icon-wav,
.file-icon-flac,
.file-icon-aac,
.file-icon-ogg,
.file-icon-wma,
.file-icon-m4a {
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
}
.file-icon-mp3::after {
    content: 'MP3';
    font-size: 8px;
}
.file-icon-wav::after {
    content: 'WAV';
    font-size: 8px;
}
.file-icon-flac::after {
    content: 'FLAC';
    font-size: 7px;
}
.file-icon-aac::after,
.file-icon-ogg::after,
.file-icon-wma::after,
.file-icon-m4a::after {
    content: '♪';
    font-size: 14px;
}

/* ===== 压缩包文件 - 青绿色 ===== */

.file-icon-zip,
.file-icon-rar,
.file-icon-7z,
.file-icon-tar,
.file-icon-gz,
.file-icon-bz2,
.file-icon-xz {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
}
.file-icon-zip::after {
    content: 'ZIP';
    font-size: 8px;
}
.file-icon-rar::after {
    content: 'RAR';
    font-size: 8px;
}
.file-icon-7z::after {
    content: '7Z';
    font-size: 10px;
}
.file-icon-tar::after,
.file-icon-gz::after,
.file-icon-bz2::after,
.file-icon-xz::after {
    content: 'ZIP';
    font-size: 8px;
}

/* ===== 代码文件 - 蓝色系 ===== */

/* Python - 蓝绿色 */
.file-icon-py {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}
.file-icon-py::after {
    content: 'PY';
    font-size: 9px;
}

/* JavaScript - 黄色 */
.file-icon-js {
    background: linear-gradient(135deg, #facc15 0%, #eab308 100%);
    color: #1f2937;
}
.file-icon-js::after {
    content: 'JS';
    font-size: 10px;
}

/* TypeScript - 蓝色 */
.file-icon-ts {
    background: linear-gradient(135deg, #3178c6 0%, #235a97 100%);
}
.file-icon-ts::after {
    content: 'TS';
    font-size: 10px;
}

/* HTML - 橙色 */
.file-icon-html,
.file-icon-htm {
    background: linear-gradient(135deg, #e34c26 0%, #c73e1d 100%);
}
.file-icon-html::after,
.file-icon-htm::after {
    content: 'HTML';
    font-size: 7px;
    letter-spacing: 0;
}

/* CSS - 蓝色 */
.file-icon-css {
    background: linear-gradient(135deg, #264de4 0%, #1a3cb3 100%);
}
.file-icon-css::after {
    content: 'CSS';
    font-size: 8px;
}

/* JSON - 深灰色 */
.file-icon-json {
    background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
}
.file-icon-json::after {
    content: '{}';}
    font-size: 12px;
}

/* XML - 深橙色 */
.file-icon-xml {
    background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
}
.file-icon-xml::after {
    content: '</>';
    font-size: 9px;
}

/* YAML - 紫色 */
.file-icon-yaml,
.file-icon-yml {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}
.file-icon-yaml::after,
.file-icon-yml::after {
    content: 'YML';
    font-size: 8px;
}

/* Java - 红色 */
.file-icon-java {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}
.file-icon-java::after {
    content: 'JAVA';
    font-size: 7px;
}

/* C/C++ - 深蓝色 */
.file-icon-c,
.file-icon-cpp,
.file-icon-h,
.file-icon-hpp {
    background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
}
.file-icon-c::after {
    content: 'C';
    font-size: 12px;
}
.file-icon-cpp::after {
    content: 'C++';
    font-size: 9px;
}
.file-icon-h::after {
    content: 'H';
    font-size: 12px;
}
.file-icon-hpp::after {
    content: 'H++';
    font-size: 8px;
}

/* Go - 青色 */
.file-icon-go {
    background: linear-gradient(135deg, #00add8 0%, #0090b3 100%);
}
.file-icon-go::after {
    content: 'GO';
    font-size: 9px;
}

/* Rust - 橙色 */
.file-icon-rs {
    background: linear-gradient(135deg, #ff6b35 0%, #e55a2b 100%);
}
.file-icon-rs::after {
    content: 'RS';
    font-size: 10px;
}

/* PHP - 紫色 */
.file-icon-php {
    background: linear-gradient(135deg, #777bb4 0%, #5a5f9e 100%);
}
.file-icon-php::after {
    content: 'PHP';
    font-size: 8px;
}

/* Ruby - 红色 */
.file-icon-rb {
    background: linear-gradient(135deg, #e0115f 0%, #b80d4d 100%);
}
.file-icon-rb::after {
    content: 'RB';
    font-size: 10px;
}

/* Swift - 橙色 */
.file-icon-swift {
    background: linear-gradient(135deg, #ff6b34 0%, #f15a24 100%);
}
.file-icon-swift::after {
    content: 'SW';
    font-size: 9px;
}

/* Kotlin - 紫粉色 */
.file-icon-kt {
    background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
}
.file-icon-kt::after {
    content: 'KT';
    font-size: 10px;
}

/* React/JSX - 蓝色 */
.file-icon-jsx,
.file-icon-tsx {
    background: linear-gradient(135deg, #61dafb 0%, #4fa8c6 100%);
    color: #1f2937;
}
.file-icon-jsx::after {
    content: 'JSX';
    font-size: 8px;
}
.file-icon-tsx::after {
    content: 'TSX';
    font-size: 8px;
}

/* Vue - 绿色 */
.file-icon-vue {
    background: linear-gradient(135deg, #42b883 0%, #35495e 100%);
}
.file-icon-vue::after {
    content: 'VUE';
    font-size: 8px;
}

/* SQL - 深绿色 */
.file-icon-sql {
    background: linear-gradient(135deg, #047857 0%, #065f46 100%);
}
.file-icon-sql::after {
    content: 'SQL';
    font-size: 8px;
}

/* Shell 脚本 - 黑色 */
.file-icon-sh,
.file-icon-bash {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
}
.file-icon-sh::after,
.file-icon-bash::after {
    content: 'SH';
    font-size: 10px;
}

/* PowerShell - 蓝色 */
.file-icon-ps1 {
    background: linear-gradient(135deg, #0078d4 0%, #005a9e 100%);
}
.file-icon-ps1::after {
    content: 'PS';
    font-size: 10px;
}

/* ===== 默认/未知文件类型 - 灰色 ===== */
.file-icon-default {
    background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
}
.file-icon-default::after {
    content: '?';
    font-size: 14px;
}

/* ===== 暗色主题适配 ===== */
[data-theme="dark"] .file-icon {
    box-shadow: 
        0 2px 4px rgba(0,0,0,0.3),
        0 1px 2px rgba(0,0,0,0.2),
        inset 0 1px 0 rgba(255,255,255,0.15);
}

/* ===== 响应式适配 ===== */
@media (max-width: 640px) {
    .file-icon {
        width: 28px;
        height: 35px;
        font-size: 9px;
        margin-right: 6px;
        border-radius: 5px;
    }
    
    .file-icon::before {
        width: 10px;
        height: 10px;
    }
    
    .file-icon-pdf::after,
    .file-icon-txt::after,
    .file-icon-md::after {
        font-size: 7px;
    }
    
    .file-icon-html::after,
    .file-icon-htm::after,
    .file-icon-java::after {
        font-size: 6px;
    }
}