/* ========== 全局样式——定义整个站点的基本外观 ========== */
body {
    background-color: #f5f6fa;  /* 页面背景色：浅灰蓝 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;  /* 系统默认字体栈，优先使用苹方/微软雅黑 */
}

/* ========== 导航栏样式 ========== */
.navbar {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);  /* 导航栏底部阴影，增加层次感 */
}

/* ========== 卡片组件样式 ========== */
.card {
    border: none;               /* 去掉卡片默认边框 */
    border-radius: 0.5rem;      /* 圆角 */
}

.card-header {
    background-color: #fff;                      /* 卡片头部白色背景 */
    border-bottom: 1px solid #e9ecef;            /* 卡片头部底部分隔线 */
    border-radius: 0.5rem 0.5rem 0 0 !important; /* 保持顶部圆角 */
}

/* ========== 表格样式 ========== */
.table th {
    font-size: 0.85rem;            /* 表头字体稍小 */
    text-transform: uppercase;     /* 表头字母大写 */
    letter-spacing: 0.03em;        /* 字母间距 */
    white-space: nowrap;           /* 表头文字不换行 */
}

.table td {
    vertical-align: middle;        /* 单元格内容垂直居中 */
    font-size: 0.9rem;            /* 单元格字体大小 */
}

.table-hover tbody tr:hover {
    background-color: #f0f4ff;     /* 鼠标悬停行高亮：浅蓝色 */
}

/* ========== 徽章/标签样式 ========== */
.badge {
    font-weight: 500;              /* 字体中等粗细 */
    font-size: 0.78rem;            /* 徽章字体大小 */
}

/* ========== 按钮组样式 ========== */
.btn-group .btn {
    border-radius: 0.35rem;        /* 按钮组中按钮的圆角 */
    margin: 0 1px;                 /* 按钮之间的间距 */
}

/* ========== 文件上传拖拽区域样式 ========== */
.upload-dropzone {
    border: 2px dashed #dee2e6;    /* 虚线边框，提示可拖拽 */
    background-color: #f8f9fa;      /* 浅灰背景 */
    transition: all 0.3s ease;      /* 过渡动画效果 */
    cursor: pointer;                /* 鼠标指针变为手型，提示可点击 */
}

.upload-dropzone:hover {
    border-color: #0d6efd;          /* 悬停时边框变蓝 */
    background-color: #f0f4ff;      /* 悬停时背景变浅蓝 */
}

.upload-dropzone.dragover {
    border-color: #198754;          /* 拖拽文件悬停时边框变绿 */
    background-color: #e8f5e9;      /* 拖拽文件悬停时背景变浅绿 */
    transform: scale(1.01);         /* 轻微放大效果，视觉反馈 */
}

.upload-dropzone input[type="file"] {
    max-width: 300px;               /* 文件选择按钮最大宽度 */
    margin: 0 auto;                 /* 居中显示 */
}

/* ========== 文件预览页面样式 ========== */
.preview-container {
    min-height: 60vh;               /* 预览区域最小高度，确保有足够空间 */
}

.preview-code {
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', 'Monaco', monospace;  /* 代码预览等宽字体 */
    line-height: 1.6;               /* 代码行高 */
    tab-size: 4;                    /* Tab 缩进为 4 个空格宽度 */
    white-space: pre-wrap;          /* 保留空格和换行，但允许自动换行 */
    word-wrap: break-word;          /* 长单词自动断行 */
}

/* ========== 模态框样式 ========== */
.modal-content {
    border: none;                                    /* 去掉边框 */
    border-radius: 0.5rem;                           /* 圆角 */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);     /* 模态框阴影 */
}

.modal-header.bg-primary {
    border-radius: 0.4rem 0.4rem 0 0;                /* 蓝色头部保持上方圆角 */
}

.modal-header.bg-success {
    border-radius: 0.4rem 0.4rem 0 0;                /* 绿色头部保持上方圆角 */
}

.modal-header.bg-danger {
    border-radius: 0.4rem 0.4rem 0 0;                /* 红色头部保持上方圆角 */
}

/* ========== 空状态样式——列表为空时的大图标提示 ========== */
.text-center.py-5 .bi.display-1 {
    opacity: 0.25;                 /* 空状态图标半透明，降低视觉冲击 */
}

/* ========== 标签页(Tabs)样式 ========== */
.nav-tabs .nav-link {
    color: #6c757d;                /* 未激活标签页文字灰色 */
    font-weight: 500;              /* 字体中等粗细 */
    border: none;                  /* 去掉边框 */
    padding: 0.6rem 1.2rem;        /* 内边距 */
}

.nav-tabs .nav-link.active {
    color: #0d6efd;                /* 激活标签页文字蓝色 */
    border-bottom: 2px solid #0d6efd;  /* 激活标签页底部蓝色指示线 */
    background: transparent;       /* 透明背景 */
}

.nav-tabs .nav-link:hover:not(.active) {
    border-bottom: 2px solid #dee2e6;  /* 悬停时底部灰色指示线 */
}

/* ========== 页脚样式 ========== */
footer {
    color: #adb5bd;                /* 页脚文字浅灰色 */
}

/* ========== 选中文件信息区域——过渡动画 ========== */
#selectedFileInfo {
    transition: all 0.3s ease;     /* 显示/隐藏时的平滑过渡 */
}

/* ========== Excel 表格预览样式 ========== */
.excel-table {
    font-size: 0.82rem;            /* 表格字体稍小，容纳更多列 */
    background: #fff;              /* 白色背景 */
}

.excel-table thead th {
    position: sticky;              /* 表头粘性定位 */
    top: 0;                        /* 粘在容器顶部 */
    z-index: 1;                    /* 确保表头在数据行上方 */
    white-space: nowrap;           /* 表头不换行 */
    font-size: 0.8rem;            /* 表头字体大小 */
    font-weight: 600;              /* 表头字体加粗 */
}

.excel-table tbody td {
    white-space: nowrap;           /* 单元格内容不换行 */
    max-width: 300px;              /* 单元格最大宽度 */
    overflow: hidden;              /* 超出隐藏 */
    text-overflow: ellipsis;       /* 超出部分显示省略号 */
}

.excel-table tbody tr:hover {
    background-color: #f0f4ff;     /* 悬停行高亮（与主表格一致） */
}

.excel-sheet h6 {
    border-bottom: 1px solid #dee2e6;  /* 工作表标题底部边框 */
    padding-bottom: 0.5rem;            /* 工作表标题底部内边距 */
}

/* ========== Word 文档预览样式 ========== */
.word-preview-content {
    font-size: 0.95rem;            /* 正文字体大小 */
    line-height: 1.8;              /* 正文行高，提升可读性 */
    color: #333;                   /* 正文颜色 */
    background: #fff;              /* 白色背景 */
}

/* Word 各层级标题样式 */
.word-preview-content h1,
.word-preview-content h2,
.word-preview-content h3,
.word-preview-content h4 {
    color: #1a1a1a;                /* 标题颜色：深灰 */
    margin-top: 1.2em;             /* 标题上方间距 */
    margin-bottom: 0.6em;          /* 标题下方间距 */
}

.word-preview-content h1 { font-size: 1.6rem; border-bottom: 2px solid #0d6efd; padding-bottom: 0.3em; }   /* 一级标题 */
.word-preview-content h2 { font-size: 1.4rem; border-bottom: 1px solid #dee2e6; padding-bottom: 0.25em; }  /* 二级标题 */
.word-preview-content h3 { font-size: 1.2rem; }  /* 三级标题 */
.word-preview-content h4 { font-size: 1.05rem; }  /* 四级标题 */

.word-preview-content p {
    margin-bottom: 0.8em;          /* 段落底部间距 */
    text-indent: 2em;              /* 段落首行缩进 2 个字符 */
}

.word-preview-content ul,
.word-preview-content ol {
    margin-bottom: 0.8em;          /* 列表底部间距 */
    padding-left: 2em;             /* 列表左侧缩进 */
}

.word-preview-content table {
    width: 100%;                   /* 表格宽度占满 */
    margin-bottom: 1em;            /* 表格底部间距 */
    border-collapse: collapse;     /* 合并表格边框 */
    font-size: 0.9rem;            /* 表格字体大小 */
}

.word-preview-content table th,
.word-preview-content table td {
    border: 1px solid #dee2e6;     /* 单元格边框 */
    padding: 0.5rem 0.75rem;       /* 单元格内边距 */
    vertical-align: top;            /* 单元格内容顶部对齐 */
}

.word-preview-content table th {
    background-color: #f0f4ff;     /* 表头浅蓝背景 */
    font-weight: 600;              /* 表头字体加粗 */
}

.word-preview-content table tr:nth-child(even) td {
    background-color: #f8f9fa;     /* 偶数行浅灰背景（斑马纹） */
}

.word-preview-content img {
    max-width: 100%;               /* 图片最大宽度为容器宽度 */
    height: auto;                  /* 图片高度自适应 */
    border-radius: 0.25rem;        /* 图片圆角 */
}

.word-preview-content blockquote {
    border-left: 4px solid #0d6efd;   /* 引用块左侧蓝色边框 */
    padding: 0.5em 1em;               /* 引用块内边距 */
    margin: 1em 0;                    /* 引用块上下间距 */
    background: #f8f9fa;              /* 引用块浅灰背景 */
    color: #555;                      /* 引用块文字颜色 */
}

.word-doc-text p {
    margin-bottom: 0.6em;          /* 段落底部间距 */
    line-height: 1.8;              /* 行高 */
    text-indent: 2em;              /* 首行缩进 */
}

/* ========== 操作按钮组样式（文件行的操作按钮） ========== */
.action-btns {
    display: flex;                 /* 弹性布局 */
    gap: 4px;                      /* 按钮间距 */
    flex-wrap: nowrap;             /* 不换行 */
    align-items: center;           /* 垂直居中对齐 */
}

.action-btns .btn {
    white-space: nowrap;           /* 按钮文字不换行 */
    font-size: 0.8rem;            /* 按钮字体大小 */
    padding: 0.25rem 0.55rem;     /* 按钮内边距 */
    border-radius: 0.3rem;        /* 按钮圆角 */
    transition: all 0.15s ease;   /* 过渡动画 */
}

.action-btns .btn:hover {
    transform: translateY(-1px);                  /* 悬停时轻微上移 */
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);       /* 悬停时增加阴影 */
}

.action-btns .btn i {
    font-size: 0.85rem;            /* 按钮中图标大小 */
}

/* ========== 反馈附件预览样式 ========== */
.attachment-img {
    transition: all 0.2s ease;     /* 图片过渡动画 */
}

.attachment-img:hover {
    opacity: 0.85;                 /* 悬停时图片轻微透明 */
    transform: scale(1.02);        /* 悬停时图片轻微放大 */
}

.enlarge-video-btn {
    opacity: 0.75;                 /* 放大按钮默认半透明 */
    transition: opacity 0.2s ease;  /* 透明度过渡 */
}

.enlarge-video-btn:hover {
    opacity: 1;                    /* 悬停时完全不透明 */
}

/* 图片/视频放大查看模态框——深色背景 */
#imageModal .modal-content,
#videoModal .modal-content {
    background: rgba(0, 0, 0, 0.95) !important;  /* 近乎全黑的背景，突出媒体内容 */
}

#imageModal .modal-body,
#videoModal .modal-body {
    min-height: 50vh;              /* 模态框内容最小高度 */
}

/* ========== 响应式样式——移动端适配 ========== */
@media (max-width: 768px) {
    .container {
        padding-left: 0.75rem;     /* 移动端容器左内边距减小 */
        padding-right: 0.75rem;    /* 移动端容器右内边距减小 */
    }

    h2 {
        font-size: 1.3rem;         /* 移动端标题字体缩小 */
    }

    .btn-group {
        flex-wrap: wrap;           /* 移动端按钮组允许换行 */
    }

    .btn-group .btn {
        border-radius: 0.25rem !important;  /* 移动端按钮圆角调整 */
        margin: 1px;               /* 移动端按钮间距 */
    }

    .action-btns {
        flex-wrap: wrap;           /* 移动端操作按钮允许换行 */
        gap: 2px;                  /* 移动端按钮间距缩小 */
    }

    .action-btns .btn {
        font-size: 0.75rem;        /* 移动端操作按钮字体缩小 */
        padding: 0.2rem 0.45rem;  /* 移动端操作按钮内边距缩小 */
    }

    .upload-dropzone {
        padding: 1.5rem !important;  /* 移动端上传区域缩小内边距 */
    }
}