/* style.css */

/* 通用样式：重置默认边距和字体 */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #eafff8ff; /* 轻柔的背景色 */
    color: #000000;
    margin: 0;
    padding: 20px; /* 默认较大的 padding */
    display: flex;
    flex-direction: column;
    align-items: center; /* 居中内容 */
}

/* 容器样式：用于包裹页面内容 */
.container {
    background-color: #ffffff;
    padding: 30px 40px; /* 默认较大的 padding */
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    max-width: 800px;
    width: 100%;
    box-sizing: border-box;
}

/* ------------------------------------- */
/* 移动端响应式调整：适用于屏幕宽度小于 600px 的设备 */
/* ------------------------------------- */
@media (max-width: 600px) {
    body {
        padding: 10px; /* 减小主体内边距 */
    }

    .container {
        padding: 15px 20px; /* 减小容器内边距 */
        border-radius: 8px;
    }
    
    /* 确保输入框和文件选择器在小屏幕上易于点击 */
    input[type="file"] {
        padding: 10px;
    }
}


/* ------------------------------------- */
/* 修复后的按钮和居中样式 */
/* ------------------------------------- */

/* 专门用于内容居中的类 (用于 index.html 的 .container) */
.center-content {
    text-align: center;
}

/* 按钮通用样式和主页按钮样式合并 */
a[role="button"] {
    /* 通用样式 */
    padding: 12px 25px; /* 增加点击区域 */
    text-decoration: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease;
    text-align: center;
    white-space: nowrap;
    font-size: 16px; /* 确保字体清晰 */
    
    /* 主页按钮（绿色）样式 */
    background-color: #327140; 
    color: rgb(255, 255, 255); /* 提高对比度 */
    border: none;

    /* 居中修复：将按钮变为居中的块级元素 */
    display: block; 
    width: 100%; /* 移动端按钮占满容器宽度 */
    max-width: 300px; /* 限制按钮最大宽度 */
    margin: 10px auto; /* 居中 */
}

a[role="button"]:hover {
    background-color: #327140;
    transform: translateY(-1px);
}
/* ------------------------------------- */


/* 标题样式 */
h2 {
    color: #498fd9; /* 强调色 */
    text-align: center;
    margin-top: 0;
    margin-bottom: 25px;
    font-weight: 600;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 10px;
    font-size: 1.8em; /* 确保标题在移动端清晰可见 */
}

/* 提交按钮（蓝色）样式 */
input[type="submit"] {
    background-color: #498fd9; /* 蓝色 */
    color: white;
    border: none;
    padding: 12px 25px;
    font-size: 16px;
    margin-top: 20px;
    display: block; /* 移动端让提交按钮占满一行 */
    width: 100%;
    max-width: 300px; /* 限制最大宽度 */
    margin: 15px auto 5px auto; /* 居中并调整间距 */
    border-radius: 6px; 
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease;
}

input[type="submit"]:hover {
    background-color: #498fd9;
    transform: translateY(-1px);
}

/* 文件上传/选择区域样式 */
input[type="file"] {
    padding: 10px; /* 增加点击区域 */
    border: 1px solid #d3dce5;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 10px;
    font-size: 16px; /* 增加字体大小 */
}

/* downloader.php 中的表格样式 */
/* 新增：创建表格响应式容器 */
#table-responsive {
    width: 100%;
    overflow-x: auto; /* 关键：允许表格在小屏幕上横向滚动 */
}

table {
    width: 100%;
    min-width: 500px; /* 确保表格在小屏幕上至少有最小宽度 */
    border-collapse: collapse;
    margin-top: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden; 
}

th, td {
    border: 1px solid #dee2e6; 
    padding: 10px 12px; /* 移动端略微减小内边距 */
    text-align: left;
    font-size: 0.9em;
}

th {
    background-color: #e9ecef;
    color: #495057;
    font-weight: 700;
    text-transform: uppercase;
}

/* 表格行悬停效果 */
tr:nth-child(even) {
    background-color: #f8f9fa; 
}

tr:hover {
    background-color: #e2e6ea;
}

/* 表格中的链接样式 */
td a {
    color: #498fd9;
    text-decoration: none;
    font-weight: 500;
    /* 移动端增加链接点击区域 (如果需要) */
}

td a:hover {
    text-decoration: underline;
    color: #498fd9;
}

/* 删除链接特殊颜色 */
td a[href*="delete_file.php"] {
    color: #dc3545; 
}

td a[href*="delete_file.php"]:hover {
    color: #bd2130;
}