/* =====================================================================
   Web File Explorer - 样式表
   结构说明：
   1) 主题与变量（基础主题 + 暗色主题）
   2) 基础与通用（重置、滚动条、工具类）
   3) 布局（整体布局、侧边栏折叠/展开）
   4) 标题栏/输入/按钮
   5) 导航树（侧边栏）
   6) 面包屑路径
   7) 主内容（列表/网格）
   8) 模态窗口（高斯模糊遮罩 + 小窗）
   9) 详情/上传信息区（预览、键值对布局）
   10) 其他（页脚、链接、文本选中）
   ===================================================================== */


/* =====================================================================
   1) 主题与变量（基础主题 + 暗色主题）
   - 使用 CSS 变量统一管理颜色、阴影、圆角等
   - --sidebar-w 用于固定侧边栏宽度（与 JS 收起逻辑配合）
   ===================================================================== */
:root {
    --bg: #f5f6f8;
    --bg-alt: #ffffff;
    --bg-elev: #ffffff;
    --border: #d0d4db;
    --border-soft: #e3e6ec;
    --text: #222;
    --text-muted: #666;
    --accent: #1976d2;
    --accent-hover: #155fa9;
    --accent-warn: #d35400;
    --danger: #dc3545;
    --danger-hover: #b52a36;
    --shadow: 0 4px 12px rgba(0,0,0,.08);
    --card-shadow: 0 3px 10px rgba(0,0,0,.08);
    --radius: 6px;
    --prog-bg: #e0e0e0;
    --prog-bar: #4caf50;
    --scroll-thumb: #c1c5cc;
    --scroll-thumb-hover: #a2a8b1;
    --sidebar-w: 360px; /* 侧边栏固定宽度 */
}

    :root[data-theme="dark"] {
        --bg: #1d242c;
        --bg-alt: #242c35;
        --bg-elev: #2d3641;
        --border: #39444f;
        --border-soft: #2f3943;
        --text: #e8edf2;
        --text-muted: #96a2af;
        --accent: #4ba3ff;
        --accent-hover: #1d86f0;
        --accent-warn: #ff9f43;
        --danger: #ff5b6b;
        --danger-hover: #e73e52;
        --shadow: 0 4px 14px rgba(0,0,0,.45);
        --card-shadow: 0 3px 12px rgba(0,0,0,.4);
        --prog-bg: #3a4653;
        --prog-bar: #55c878;
        --scroll-thumb: #4d5a66;
        --scroll-thumb-hover: #64707b;
    }

    /* 海洋 */
    :root[data-palette="ocean"] {
    }

[data-theme=dark][data-palette="ocean"] {
}

/* 森林 */
:root[data-palette="forest"] {
    --accent: #2e7d32;
    --accent-hover: #246628;
    --accent-weak: #e8f5e9;
    --accent-outline: rgba(46,125,50,.35);
    --warn: #c17900;
    --warn-hover: #9c6200;
    --danger: #d9534f;
    --danger-hover: #b3423f;
}

[data-theme=dark][data-palette="forest"] {
    --accent: #59a05c;
    --accent-hover: #488a4c;
    --accent-weak: rgba(89,160,92,.15);
    --accent-outline: rgba(89,160,92,.4);
    --warn: #d49533;
    --warn-hover: #b9802b;
    --danger: #e07773;
    --danger-hover: #c76561;
}

/* 日落 */
:root[data-palette="sunset"] {
    --accent: #ff7a45;
    --accent-hover: #e26737;
    --accent-weak: #fff1e8;
    --accent-outline: rgba(255,122,69,.35);
    --warn: #ff9800;
    --warn-hover: #e68900;
    --danger: #ff5b6b;
    --danger-hover: #e04959;
}

[data-theme=dark][data-palette="sunset"] {
    --accent: #ff9a73;
    --accent-hover: #f07f55;
    --accent-weak: rgba(255,154,115,.15);
    --accent-outline: rgba(255,154,115,.4);
    --warn: #ffb547;
    --warn-hover: #e6a33f;
    --danger: #ff7d89;
    --danger-hover: #e66b76;
}

/* 葡萄 */
:root[data-palette="grape"] {
    --accent: #7c4dff;
    --accent-hover: #5f35d6;
    --accent-weak: #f2edff;
    --accent-outline: rgba(124,77,255,.35);
    --warn: #ffa000;
    --warn-hover: #e18e00;
    --danger: #e53935;
    --danger-hover: #c62828;
}

[data-theme=dark][data-palette="grape"] {
    --accent: #9a78ff;
    --accent-hover: #815ce6;
    --accent-weak: rgba(154,120,255,.15);
    --accent-outline: rgba(154,120,255,.4);
    --warn: #ffb84d;
    --warn-hover: #e6a545;
    --danger: #ef6a67;
    --danger-hover: #d45a56;
}

/* 玫瑰 */
:root[data-palette="rose"] {
    --accent: #e91e63;
    --accent-hover: #c2185b;
    --accent-weak: #ffebf1;
    --accent-outline: rgba(233,30,99,.35);
    --warn: #ff8f00;
    --warn-hover: #e67f00;
    --danger: #e53935;
    --danger-hover: #c62828;
}

[data-theme=dark][data-palette="rose"] {
    --accent: #f06292;
    --accent-hover: #d94b7c;
    --accent-weak: rgba(240,98,146,.15);
    --accent-outline: rgba(240,98,146,.4);
    --warn: #ffae42;
    --warn-hover: #e69c3a;
    --danger: #ef6a67;
    --danger-hover: #d45a56;
}

/* 单色（极简） */
:root[data-palette="mono"] {
    --accent: #6b7280;
    --accent-hover: #565d6b;
    --accent-weak: #f1f2f4;
    --accent-outline: rgba(107,114,128,.35);
    --warn: #9aa0aa;
    --warn-hover: #868c96;
    --danger: #8b5e5e;
    --danger-hover: #744e4e;
}

[data-theme=dark][data-palette="mono"] {
    --accent: #9aa0aa;
    --accent-hover: #868c96;
    --accent-weak: rgba(154,160,170,.15);
    --accent-outline: rgba(154,160,170,.4);
    --warn: #b9bec6;
    --warn-hover: #a5aabb;
    --danger: #a57b7b;
    --danger-hover: #8e6868;
}

/* =====================================================================
   2) 基础与通用（重置、滚动条、工具类）
   ===================================================================== */
* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font: 14px/1.5 -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
}

.hidden {
    display: none;
}

/* 自定义滚动条（WebKit） */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb);
    border-radius: 6px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: var(--scroll-thumb-hover);
    }


/* =====================================================================
   3) 布局（整体布局、侧边栏折叠/展开）
   - 收起时采用 transform 左移到屏外，避免文字被压缩竖排
   ===================================================================== */
.layout {
    display: flex;
    min-height: 100vh;
    background: var(--bg);
    position: relative; /* 使侧栏在收起时可绝对定位覆盖 */
}

/* 侧边栏（固定宽度，位移动画） */
.sidebar {
    width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    background: var(--bg-alt);
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
    transition: transform .25s ease;
    will-change: transform;
    overflow: hidden;
    box-shadow: var(--shadow);
    z-index: 10;
    transform: translateX(0);
}

body.sidebar-collapsed .sidebar {
    transform: translateX(-100%);
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    pointer-events: none; /* 防止不可见侧栏阻挡交互 */
}

/* 主内容区域（Flex 自动占满） */
.main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-width: 0;
}


/* =====================================================================
   4) 标题栏/输入/按钮
   - 顶栏工具区、输入框、按钮风格
   ===================================================================== */
.topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.flex {
    flex: 1;
}

.input {
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-elev);
    color: var(--text);
    outline: none;
    transition: .15s;
    min-width: 140px;
}

    .input:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 2px rgba(25,118,210,.25);
    }

.chk-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-muted);
    user-select: none;
}

/* 按钮（与主界面统一风格） */
.btn, .mini-btn {
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--bg-elev);
    color: var(--text);
    padding: 6px 12px;
    border-radius: var(--radius);
    font-size: 13px;
    transition: .15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .btn:hover, .mini-btn:hover {
        background: var(--accent);
        border-color: var(--accent);
        color: #fff;
    }

.btn-primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

    .btn-primary:hover {
        background: var(--accent-hover);
        border-color: var(--accent-hover);
    }

.mini-btn {
    padding: 4px 8px;
    font-size: 12px;
}


/* =====================================================================
   5) 导航树（侧边栏）
   ===================================================================== */
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: center; /* 居中“文件导航” */
    padding: 8px 10px;
    background: var(--bg-elev);
    border-bottom: 1px solid var(--border);
}

    .sidebar-header .logo-text {
        margin: 0 auto;
        text-align: center;
    }

.logo-text {
    font-size: 14px;
    font-weight: 600;
}

.nav-tree {
    list-style: none;
    margin: 0;
    padding: 6px 0 12px 10px;
    font-size: 14px;
    flex: 1;
    overflow: auto;
}

    .nav-tree li {
        margin: 2px 0;
        line-height: 20px;
    }

.nav-item-row {
    display: flex;
    align-items: center;
    gap: 4px;
    user-select: none;
    padding: 2px 4px;
    border-radius: 4px;
    transition: .15s;
}

    .nav-item-row:hover {
        background: var(--bg-elev);
        box-shadow: inset 0 0 0 1px var(--border-soft);
    }

    .nav-item-row .toggle {
        width: 14px;
        text-align: center;
        cursor: pointer;
        color: var(--accent);
    }

    .nav-item-row .name.folder {
        font-weight: 600;
        cursor: pointer;
        color: var(--text);
    }

    .nav-item-row .name.file {
        cursor: pointer;
        color: var(--text);
    }

        .nav-item-row .name.file:hover,
        .nav-item-row .name.folder:hover {
            text-decoration: underline;
        }


/* =====================================================================
   6) 面包屑路径
   ===================================================================== */
.path-bar {
    padding: 6px 10px;
    font-size: 13px;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--border);
    color: var(--text);
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

    .path-bar span {
        cursor: pointer;
        color: var(--accent);
    }

        .path-bar span:hover {
            text-decoration: underline;
        }


/* =====================================================================
   7) 主内容（列表/网格）
   ===================================================================== */
.table-wrap {
    flex: 1;
    overflow: auto;
    background: var(--bg);
    padding: 0 0 4px;
}

/* 表格列表 */
.file-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-alt);
    box-shadow: var(--shadow);
}

    .file-table thead {
        background: var(--bg-elev);
        position: sticky;
        top: 0;
        z-index: 2;
    }

    .file-table th, .file-table td {
        padding: 6px 8px;
        border-bottom: 1px solid var(--border-soft);
        vertical-align: middle;
        user-select: none;
        color: var(--text);
    }

    .file-table th {
        font-weight: 600;
        font-size: 13px;
        text-align: left;
    }

.row-click {
    cursor: pointer;
    transition: background .12s;
}

    .row-click:hover {
        background: var(--bg-elev);
    }

.file-table td.icon-cell {
    text-align: center;
    font-size: 22px;
    width: 56px;
    cursor: pointer;
}

.file-name-click {
    color: var(--accent);
    cursor: pointer;
}

    .file-name-click:hover {
        text-decoration: underline;
    }

.badge {
    display: inline-block;
    font-size: 11px;
    padding: 2px 6px;
    background: var(--bg-elev);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    color: var(--text-muted);
}

/* “返回上一级”强调色 */
.return-up .icon-cell,
.file-card.up-card .icon {
    color: var(--accent-warn);
}

.return-up .file-name-click,
.file-card.up-card .name {
    color: var(--accent-warn);
    font-weight: 600;
}

/* 网格视图 */
.grid-wrap {
    padding: 12px;
    flex: 1;
    overflow: auto;
    background: var(--bg);
}

.grid-container {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

.file-card {
    border: 1px solid var(--border);
    background: var(--bg-alt);
    border-radius: var(--radius);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    transition: box-shadow .15s, transform .15s, background .15s;
    box-shadow: var(--shadow);
}

    .file-card:hover {
        box-shadow: var(--card-shadow);
        transform: translateY(-2px);
        background: var(--bg-elev);
    }

    .file-card .icon {
        font-size: 32px;
        text-align: center;
        color: var(--accent);
    }

    .file-card .name {
        font-size: 13px;
        font-weight: 600;
        word-break: break-all;
        text-align: center;
        line-height: 1.3;
        color: var(--text);
    }

    .file-card .meta {
        font-size: 11px;
        color: var(--text-muted);
        text-align: center;
    }


/* =====================================================================
   8) 模态窗口（高斯模糊遮罩 + 小窗）
   - 小窗右上角“叉号”关闭；点背景（半透明+模糊）也可关闭
   ===================================================================== */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.25);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.modal {
    background: var(--bg-elev);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,.20);
    max-width: 92vw;
    max-height: 92vh;
    overflow: auto;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-soft);
}

.modal-title {
    font-weight: 600;
    /* 如果需要右对齐标题可取消注释： */
    /* width: 100%; text-align: right; */
}

.modal-close {
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

    .modal-close:hover {
        color: var(--accent);
    }

.modal-body {
    padding: 12px;
}

.modal-footer {
    padding: 10px 12px;
    border-top: 1px solid var(--border-soft);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* 弹窗中的按钮（沿用主按钮风格，并扩展描边/危险态） */
.modal .btn {
    padding: 6px 12px;
    border-radius: var(--radius);
}

.btn-outline {
    background: var(--bg-elev);
    color: var(--text);
    border: 1px solid var(--border);
}

    .btn-outline:hover {
        background: var(--accent);
        color: #fff;
        border-color: var(--accent);
    }

.btn-danger {
    background: var(--danger);
    color: #fff;
    border: 1px solid var(--danger);
}

    .btn-danger:hover {
        background: var(--danger-hover);
        border-color: var(--danger-hover);
    }

/* 上传进度容器（仅在真正开始上传后显示） */
.prog-box {
    margin-top: 10px;
}

    .prog-box.hidden {
        display: none;
    }


/* =====================================================================
   9) 详情/上传信息区（预览、键值对布局）
   - kv-grid 为“标签-内容”两列布局
   - --kv-label-w 控制标签列宽度（由 JS 动态设置）
   ===================================================================== */
.file-detail, .upload-panel {
    --kv-label-w: 120px;
}

/* 预览图（图片类型时显示） */
.file-preview-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 8px 4px;
}

.file-preview {
    max-width: 100%;
    max-height: 260px;
    border-radius: 8px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-soft);
    object-fit: contain;
    background: var(--bg);
}

/* 键值对网格（默认垂直堆叠，每行一对） */
.kv-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
}

    .kv-grid.compact .kv-row {
        margin: 2px 0;
    }

.kv-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

/* 标签列（可通过 JS 动态调整宽度），默认右对齐 */
.kv-label {
    width: var(--kv-label-w);
    color: var(--text-muted);
    text-align: right;
    white-space: nowrap;
}
/* 值列（多行左对齐） */
.kv-value {
    flex: 1;
    word-break: break-all;
    white-space: normal;
    line-height: 1.5;
}

/* 上传窗口：目标文件夹行强制一行展示（避免意外换行） */
.upload-panel .kv-row {
    flex-wrap: nowrap;
    align-items: center;
}

.upload-panel .kv-value {
    flex: 1 1 auto;
    min-width: 0; /* 允许收缩，避免被挤换行 */
    display: flex;
    align-items: center;
}

    .upload-panel .kv-value .input {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }


/* =====================================================================
   10) 其他（页脚、链接、文本选中）
   ===================================================================== */
.footer {
    margin-top: auto;
    padding: 10px;
    font-size: 12px;
    text-align: center;
    color: var(--text-muted);
    background: var(--bg-alt);
    border-top: 1px solid var(--border);
}

a {
    color: var(--accent);
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }

/* 选中文本背景 */
::selection {
    background: var(--accent);
    color: #fff;
}

/* 次要文本 */
.text-muted, .muted {
    color: var(--text-muted);
    font-size: 12px;
}