/* 基本工具栏 & 按钮 */
.toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #d0d7de;
    background: linear-gradient(180deg, #ffffff, #f6f8fa);
    cursor: pointer;
    font-size: 0.95rem;
    transition: box-shadow 0.15s, transform 0.08s;
    text-decoration: none;
    color: #111827;
}

.btn:hover { box-shadow: 0 4px 10px rgba(16,24,40,0.08); transform: translateY(-1px); }
.btn.primary {
    background: linear-gradient(180deg, #2563eb, #1e40af);
    color: white;
    border: 1px solid rgba(0,0,0,0.06);
}
.btn.danger {
    background: linear-gradient(180deg, #ef4444, #b91c1c);
    color: white;
    border: 1px solid rgba(0,0,0,0.06);
}
.input-inline {
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid #d0d7de;
    background: white;
}

/* 面包屑导航 */
.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.95rem;
    margin-bottom: 10px;
    color: #374151;
}
.breadcrumbs a {
    text-decoration: none;
    color: #2563eb;
}
.breadcrumbs .sep { color: #9ca3af; }

body.dark .breadcrumbs {
    color: #ddd;
}

#fileContainer {
    margin-top: 20px;
}

/* 文件容器：图标/列表视图 */
#fileContainer.grid-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 60px;
    align-items: start;
}
#fileContainer.list-view {
    display: block;
}

/* 文件项卡片式 */
.file-item {
    text-align: center;
    border: 1px solid #e6e9ee;
    border-radius: 8px;
    padding: 12px;
    transition: box-shadow 0.2s, transform 0.08s;
    background-color: #ffffff;
    display: flex;
    flex-direction: column; /* 保持垂直布局 */
    align-items: center;
    gap: 8px;
    min-height: 120px;
}
.file-item:hover {
    box-shadow: 0 6px 18px rgba(16,24,40,0.06);
    transform: translateY(-3px);
}

body.dark .file-item {
    background-color: #505050;
    color: #ddd;
}

/* 复选框小块 */
.select-area {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    align-items: center;
}
.file-item-wrapper {
    position: relative;
}

/* 图标 */
.icon {
    width: 64px;
    height: 64px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex: 0 0 auto;
}
/* 通用文件夹和默认文件图标 */
.icon.folder {
    background-image: url('../icons/folder.png');
    cursor: pointer;
}
.icon.file {
    background-image: url('../icons/file.png');
}

/* 文档类 */
.icon.pdf { background-image: url('../icons/pdf.png'); }
.icon.markdown { background-image: url('../icons/markdown.png'); }
.icon.json { background-image: url('../icons/json.png'); }
.icon.python { background-image: url('../icons/python.png'); }
.icon.java { background-image: url('../icons/java.png'); }
.icon.txt, .icon.log, .icon.text, .icon.rtf, .icon.xml, .icon.yml, .icon.toml {
    background-image: url('../icons/text.png');
}

/* Office 文档 */
.icon.doc, .icon.docx, .icon.odt, .icon.word {
    background-image: url('../icons/word.png');
}
.icon.xls, .icon.xlsx, .icon.ods, .icon.spreadsheet, .icon.csv, .icon.tsv {
    background-image: url('../icons/spreadsheet.png');
}
.icon.ppt, .icon.pptx, .icon.odp, .icon.presentation {
    background-image: url('../icons/presentation.png');
}

/* 图片类 */
.icon.jpg, .icon.jpeg, .icon.png, .icon.gif, .icon.webp, .icon.bmp, .icon.tif, .icon.tiff,
.icon.svg, .icon.ico, .icon.heic, .icon.avif, .icon.psd, .icon.ai, .icon.eps, .icon.image {
    background-image: url('../icons/image.png');
}

/* 音频类 */
.icon.mp3, .icon.wav, .icon.flac, .icon.aac, .icon.ogg, .icon.m4a, .icon.wma, .icon.aiff,
.icon.mid, .icon.midi, .icon.amr, .icon.audio {
    background-image: url('../icons/audio.png');
}

/* 视频类 */
.icon.mp4, .icon.avi, .icon.mkv, .icon.mov, .icon.flv, .icon.wmv, .icon.webm, .icon.mpeg,
.icon.mpg, .icon.m4v, .icon.m3u8, .icon.video {
    background-image: url('../icons/video.png');
}

/* 压缩包类 */
.icon.zip, .icon.rar, .icon.\37z, .icon.tar, .icon.gz, .icon.bz2, .icon.xz, .icon.tgz,
.icon.tar\.gz, .icon.iso, .icon.dmg, .icon.archive {
    background-image: url('../icons/archive.png');
}

/* 代码 / 脚本类 */
.icon.pyc, .icon.pyo, .icon.js, .icon.ts, .icon.jsx, .icon.tsx,
.icon.html, .icon.htm, .icon.css, .icon.class, .icon.jar,
.icon.c, .icon.cpp, .icon.h, .icon.hpp, .icon.cs,
.icon.go, .icon.rs, .icon.php, .icon.rb,
.icon.swift, .icon.kt, .icon.kts, .icon.dart,
.icon.json5, .icon.vue, .icon.jsp, .icon.asp, .icon.aspx,
.icon.sql, .icon.db, .icon.sqlite,
.icon.bat, .icon.cmd, .icon.sh, .icon.bash, .icon.zsh, .icon.code {
    background-image: url('../icons/code.png');
}

/* 系统类 / 可执行 */
.icon.exe, .icon.msi, .icon.bin, .icon.dll, .icon.so, .icon.dylib, .icon.sys,
.icon.apk, .icon.ipa, .icon.app, .icon.run, .icon.pkg, .icon.img,
.icon.vmdk, .icon.vdi, .icon.ovf, .icon.ova, .icon.binary {
    background-image: url('../icons/binary.png');
}

/* 设计 / 3D / CAD */
.icon.dwg, .icon.dxf, .icon.blend, .icon.obj, .icon.fbx, .icon.stl, .icon.\3ds,
.icon.gltf, .icon.glb, .icon.indd, .icon.xd, .icon.sketch, .icon.design {
    background-image: url('../icons/design.png');
}

/* 字体类 */
.icon.ttf, .icon.otf, .icon.woff, .icon.woff2, .icon.eot, .icon.font {
    background-image: url('../icons/font.png');
}

/* 数据 / 备份 */
.icon.bak, .icon.old, .icon.tmp, .icon.swp, .icon.backup {
    background-image: url('../icons/backup.png');
}

/* 其他常见文件 */
.icon.torrent { background-image: url('../icons/torrent.png'); }
.icon.url, .icon.lnk { background-image: url('../icons/link.png'); }
.icon.eml, .icon.msg { background-image: url('../icons/mail.png'); }
.icon.ics { background-image: url('../icons/calendar.png'); }
.icon.crt, .icon.pem, .icon.key { background-image: url('../icons/certificate.png'); }

/* 电子书类 */
.icon.epub, .icon.mobi, .icon.azw3, .icon.cbz, .icon.cbr, .icon.ebook {
    background-image: url('../icons/ebook.png');
}

/* 配置类 */
.icon.env, .icon.properties, .icon.ini, .icon.cfg, .icon.conf, .icon.yaml, .icon.config {
    background-image: url('../icons/config.png');
}

/* 文件名 */
.filename {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    font-size: 0.95rem;
}

/* 操作区域 */
.actions {
    margin-top: 6px;
    font-size: 0.9em;
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ===== 列表视图改进 ===== */
.file-header {
    display: none; /* 默认隐藏 */
    grid-template-columns: 40px 1fr 120px 180px 180px;
    align-items: center;
    font-weight: 600;
    border-bottom: 1px solid #ddd;
    padding: 8px 12px;
    background: #f8f9fa;
    color: #333;
    font-size: 14px;
    margin-top: 2%;
}

/* 列表模式下 */
.list-view .file-header {
    display: grid;
}

.list-view .file-item {
    display: grid;
    grid-template-columns: 40px 1fr 120px 180px 180px; /* 与 header 一致 */
    align-items: center;
    text-align: left;
    padding: 8px 12px;
    gap: 12px;
    border-bottom: 1px solid #eee;
    border-radius: 0;
    box-shadow: none;
    min-height: auto;
}
.list-view .file-item:hover {
    box-shadow: 0 4px 10px rgba(16,24,40,0.06);
    transform: none;
}

.list-view .file-item-wrapper {
    margin-bottom: 0;
}
.list-view .file-item-wrapper .select-area {
    position: static;
    flex-shrink: 0;
    padding: 0;
}

/* 文件名区域 - 图标和文件名在同一列 */
.file-name-area {
    display: flex;
    align-items: center;
    gap: 12px;
    overflow: hidden;
}

.grid-view .file-name-area {
    display: flex;
    flex-direction: column; /* 垂直排列 */
    align-items: center;
    gap: 8px;
    width: 100%;
}

.grid-view .icon {
    width: 64px;
    height: 64px;
}

.grid-view .filename {
    text-align: center;
    width: 100%;
}

/* 列表视图中的图标尺寸调整 */
.list-view .icon {
    width: 36px;
    height: 36px;
    margin: 0;
    flex-shrink: 0;
}

/* 列表视图中的文件名样式调整 */
.list-view .filename {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* 空目录提示 */
.empty-placeholder {
    padding: 30px;
    text-align: center;
    color: #6b7280;
    border: 1px dashed #e5e7eb;
    border-radius: 8px;
    background: #fbfbfe;
}

/* 拖拽上传区域 */
.upload-dropzone {
    border: 2px dashed #d1d5db;
    padding: 12px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(250,250,255,0.4));
    transition: border-color 0.12s, background 0.12s;
}
.upload-dropzone.dragover {
    border-color: #2563eb;
    background: linear-gradient(180deg, rgba(37,99,235,0.06), rgba(37,99,235,0.02));
}

/* 上传进度条 */
.progress {
    width: 100%;
    height: 8px;
    background: #f3f4f6;
    border-radius: 999px;
    overflow: hidden;
}
.progress > i {
    display: block;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #60a5fa, #2563eb);
    transition: width 0.2s;
}

/* 模态框样式 */
.modal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background-color: white;
    padding: 0;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
}

.modal-header h3 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.close {
    font-size: 1.5rem;
    cursor: pointer;
    color: #6b7280;
}

.close:hover {
    color: #374151;
}

.modal-body {
    padding: 20px;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
}

#folderNameInput {
    width: 94%;
    padding: 10px 12px;
    font-size: 1rem;
}



/* 响应式 */
@media (max-width: 768px) {
    .toolbar { gap: 6px; }
    .file-item { padding: 10px; }
    #fileContainer.grid-view { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }

    /* 小屏下隐藏部分列 */
    .list-view .file-item,
    .file-header {
        grid-template-columns: 40px 1fr 120px;
    }
    .list-view .file-create-datetime,
    .list-view .actions,
    .file-header .col-time,
    .file-header .col-actions {
        display: none;
    }

    /* 小屏幕下调整文件名区域 */
    .list-view .file-name-area {
        gap: 8px;
    }
    .list-view .icon {
        width: 28px;
        height: 28px;
    }
}