/* General Body & Container */
body {
    background-color: #202428;
    color: #c8c8c8;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    margin: 0;
    padding: 20px;
    font-size: 14px;
    line-height: 1.4;
}

.container {
    background-color: #2c3034;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    margin: 0 auto;
    max-width: 1400px; /* 主内容区域最大宽度，可根据喜好调整 */
}

/* Header & Breadcrumbs */
.header {
    background-color: #3a3f44;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #4a4f54;
}

.header-left {
    font-size: 16px;
    font-weight: normal; /* 之前可能是bold，调整为normal */
}
.header-left .fas {
    margin-right: 8px;
    color: #78b0f8;
}
.header-left a {
    color: #C8C8C8; /* 面包屑链接颜色 */
    text-decoration: none;
}
.header-left a:hover {
    text-decoration: underline;
}

.header-right {
    font-size: 12px;
    color: #a0a0a0;
}

/* File List */
.file-list-header, .file-item-row {
    display: flex;
    padding: 12px 20px;
    border-bottom: 1px solid #3a3f44;
    align-items: center;
}

.file-list-header {
    background-color: #34383c;
    font-weight: bold;
    color: #e0e0e0;
}
.file-item-row:last-child {
    border-bottom: none;
}
.file-item-row:hover {
    background-color: #383c40;
}

.col-name { flex: 3; display: flex; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-name .fas { margin-right: 10px; width: 16px; text-align: center; color: #78b0f8;}
.col-name .fa-folder, .col-name .fa-level-up-alt { color: #f8d775; } /* 文件夹及 ".." 图标颜色 */
.col-type { flex: 1; text-align: center; }
.col-size { flex: 1; text-align: right; }
.col-date { flex: 1.5; text-align: right; }
.col-downloads { flex: 1; text-align: right; }
.col-action { flex: 1.5; text-align: center; display: flex; justify-content: center; align-items: center; gap: 8px;} /* 调整flex和gap */


/* Folder name links in the file list */
.file-item-row .col-name a {
    color: #C8C8C8;
    text-decoration: none;
    white-space: nowrap; /* 防止长文件夹名换行 */
    overflow: hidden;    /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
    display: inline-block; /* 确保 ellipsis 生效 */
    max-width: calc(100% - 30px); /* 减去图标宽度和间距 */
}
.file-item-row .col-name a:hover {
    color: #b8e2ff;
    text-decoration: underline;
}

.empty-message {
    padding: 20px;
    text-align: center;
    color: #888;
    width: 100%;
}
.empty-message a {
    color: #C8C8C8;
    text-decoration: none;
}
.empty-message a:hover {
    text-decoration: underline;
}


/* Action Buttons */
.btn-action {
    background-color: #4a76a8;
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 12px;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}
.btn-action .fas {
    margin-right: 5px;
}
.btn-action:hover {
    background-color: #5a86b8;
}
.btn-action:disabled {
    background-color: #5cb85c; /* 用于 "已复制!" 反馈 */
    opacity: 0.8; /* 轻微透明表示禁用 */
    cursor: default;
}

/* Modals (General) */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* 若模态框本身可能超出视窗，允许滚动条 */
    background-color: rgba(0,0,0,0.75); /* 遮罩层颜色加深一点 */
    padding-top: 2vh; /* 给模态框顶部一些初始间距 */
}

.modal .modal-content {
    background-color: #3a3f44; /* 模态框内容区背景 */
    margin: 2vh auto;          /* 模态框上下边距，水平居中 */
    padding: 20px;
    border: 1px solid #555;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.4); /* 阴影加深一点 */
    position: relative;        /* 作为关闭按钮定位的参考 */
    color: #e0e0e0;
    display: flex;             /* 使用Flexbox进行内部布局 */
    flex-direction: column;    /* 标题、内容、页脚垂直排列 */
    max-height: 80vh;          /* 模态框内容区最大高度，防止溢出屏幕 */
    overflow: hidden;          /* 内容溢出由内部元素（如预览区）自行处理滚动 */
}

.modal .modal-content h3 { /* 通用模态框标题 */
    margin-top: 0;
    color: #f0f0f0;
    border-bottom: 1px solid #50555a;
    padding-bottom: 10px;
    margin-bottom: 15px;
    font-size: 18px;
    flex-shrink: 0; /* 防止标题在空间不足时被压缩 */
}

.modal-close-button { /* 通用关闭按钮 */
    color: #aaa;
    position: absolute;
    top: 15px; /* 调整关闭按钮位置 */
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    line-height: 1;
}
.modal-close-button:hover,
.modal-close-button:focus {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

/* Download Link Modal (#downloadModal) */
#downloadModal .modal-content {
    width: 80%;
    max-width: 500px; /* 此模态框较小 */
}
#downloadModal input[type="text"] {
    width: calc(100% - 22px); /* 减去padding和border */
    padding: 10px;
    margin-bottom: 20px;
    background-color: #2c3034;
    color: #c8c8c8;
    border: 1px solid #50555a;
    border-radius: 4px;
    font-size: 14px;
}
#downloadModal #copyLinkButton { /* “下载”模态框里的“复制”按钮 */
    min-width: 80px;
}

/* Text Preview Modal (#textViewModal) */
#textViewModal .modal-content {
    width: 80%;
    max-width: 900px; /* 文本预览宽度 */
}
#textViewModalContent { /* <pre> 标签 */
    flex-grow: 1; /* 占据可用垂直空间 */
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-y: auto; /* 内容超出时，此区域滚动 */
    background-color: #272b2f; /* 文本区域背景 */
    color: #d1d1d1;
    padding: 15px;
    border-radius: 4px;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size: 13px;
    line-height: 1.5;
    border: 1px solid #4a4f54;
    margin-bottom: 15px; /* 与页脚的间距 */
}

/* Image Preview Modal (#imageViewModel) */
#imageViewModel .modal-content {
    width: 90%;      /* 图片预览可更宽 */
    max-width: 1400px; 
    min-height: 300px; /* 模态框最小高度 */
}
#imageViewModel .image-preview-container {
    flex-grow: 1; /* 占据可用垂直空间 */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 15px;
    min-height: 200px; /* 图片展示区域最小高度 */
}
#imageViewModelImage { /* <img> 标签 */
    max-width: 100%;
    max-height: 100%; /* 图片最大高度充满其容器 */
    object-fit: contain; /* 保持宽高比并完整显示 */
    display: block;
    border-radius: 4px;
    background-color: #202428; /* 透明图片或加载时的背景 */
}

/* Preview Modal Footer (Common for text and image preview modals) */
.preview-modal-footer {
    padding-top: 15px;
    border-top: 1px solid #50555a;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0; /* 防止页脚被压缩 */
    margin-top: auto;  /* 如果内容区没有填满，页脚会被推到底部 */
}
.preview-modal-footer label {
    color: #c8c8c8;
    font-size: 12px;
    display: block;
}
.preview-modal-footer input[type="text"] {
    width: calc(100% - 22px);
    padding: 8px;
    background-color: #2c3034;
    color: #C8C8C8; /* 链接使用醒目颜色 */
    border: 1px solid #50555a;
    border-radius: 4px;
    font-size: 12px;
    font-family: monospace;
}
/* .preview-modal-footer button (e.g. #copyPreviewLinkButton, #copyImagePreviewLinkButton) 会使用 .btn-action 样式 */


/* 页脚样式 */
.page-footer {
    width: 100%;
    padding: 20px 0;
    margin-top: 40px;
    border-top: 1px solid #3a3f44;
    text-align: center;
}

.page-footer p b a { /* 定位到加粗标签内的链接 */
    color: #dcdcdc; /* 链接颜色 */
    text-decoration: none; /* 默认不显示下划线 */
}
/* 页脚内 <p> 标签的样式由HTML内联样式定义 */


/* Responsive Adjustments */
@media (max-width: 768px) {
    body { padding: 10px; font-size: 13px; }
    .container { border-radius: 4px; }
    .header { padding: 10px 15px; flex-direction: column; gap: 5px; }
    .header-left { font-size: 14px; text-align: center; width: 100%;}
    .header-right { text-align: center; width: 100%;}
    
    .file-list-header { display: none; } /* 小屏幕下可隐藏表头 */
    .file-item-row { 
        flex-direction: column; /* 堆叠列内容 */
        align-items: flex-start; /* 左对齐 */
        padding: 10px;
    }
    .col-name, .col-type, .col-size, .col-date, .col-downloads, .col-action {
        flex-basis: auto; /* 取消flex比例 */
        width: 100%;      /* 每列占满宽度 */
        text-align: left; /* 统一左对齐 */
        padding: 4px 0;   /* 列内上下间距 */
    }
    .col-name { order: 1; font-weight: bold; } /* 名称最前 */
    .col-date { order: 2; font-size: 11px; color: #aaa; } /* 日期次之 */
    .col-size { order: 3; font-size: 11px; color: #aaa; } /* 大小 */
    .col-type { display: none; } /* 类型可继续隐藏或改为标签 */
    .col-downloads { display: none; } /* 下载次数可继续隐藏 */
    .col-action { 
        order: 4; 
        text-align: center; /* 操作按钮居中 */
        padding-top: 8px; 
        justify-content: flex-start; /* 按钮靠左排列，通过gap控制间距 */
    }

    .btn-action { padding: 8px 10px; font-size: 12px; }

    .modal .modal-content {
        width: 95%;
        margin: 2vh auto;
        padding: 15px;
        max-height: 95vh; /* 确保模态框在小屏幕上不会过高 */
    }
    .modal .modal-content h3 { font-size: 16px; margin-bottom: 10px; }
    #textViewModalContent { font-size: 12px; padding: 10px; }
    #imageViewModel .image-preview-container { min-height: 150px; }
    .preview-modal-footer input[type="text"] { padding: 6px; }
}

@media (max-width: 480px) {
    .col-name a { max-width: calc(100% - 25px); } /* 进一步调整名称列链接的最大宽度 */
    .header-left {word-break: break-all;} /* 面包屑过长时换行 */
}