/* style.css - 网页样式文件 (炫酷版) */

/* 全局重置和基础设置 */
*, *::before, *::after {
    box-sizing: border-box; /* 更直观的盒模型 */
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Noto Sans SC', 'Arial', sans-serif; /* 使用 Noto Sans SC 作为主字体，更美观 */
    line-height: 1.7; /* 增加行高，提升阅读舒适度 */
    background-color: #f0f2f5; /* 更现代的浅灰色背景 */
    color: #333;
    font-weight: 300; /* 整体字重调细一点 */
}

.container {
    width: 90%; /* 内容区域宽度 */
    max-width: 1400px; /* 最大宽度限制 */
    margin: 0 auto; /* 居中 */
    padding: 0 15px;
}

/* 头部样式 */
header {
    background: linear-gradient(135deg, #56CCF2, #2F80ED); /* 炫酷的渐变背景 */
    color: #fff;
    padding: 40px 0 30px; /* 增加头部padding */
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
}

header h1 {
    font-size: 2.8em; /* 增大标题字号 */
    font-weight: 700; /* 标题加粗 */
    margin-bottom: 10px;
    letter-spacing: 1px; /* 轻微字间距 */
}

header .subtitle {
    font-size: 1.1em;
    font-weight: 300;
    opacity: 0.9;
}

/* 控制区域样式 */
.controls-wrapper {
    background-color: #fff;
    padding: 20px;
    margin-bottom: 30px;
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* 更精致的阴影 */
    display: flex;
    justify-content: flex-end; /* 控制元素靠右 */
    align-items: center;
}

.controls label {
    margin-right: 12px;
    font-weight: 500; /* 标签字重 */
    color: #555;
}

#sort-by {
    padding: 10px 15px; /* 增加下拉框padding */
    border-radius: 6px;
    border: 1px solid #ddd;
    background-color: #fff;
    font-family: inherit; /* 继承字体 */
    font-size: 1em;
    cursor: pointer; /* 鼠标手势 */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* 平滑过渡 */
}

#sort-by:hover {
    border-color: #2F80ED; /* 悬停时边框颜色变化 */
}

#sort-by:focus {
    outline: none;
    border-color: #2F80ED;
    box-shadow: 0 0 0 2px rgba(47, 128, 237, 0.2); /* 聚焦时外发光效果 */
}

/* 表格容器样式 */
.table-container {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    overflow-x: auto; /* 在内容超出时允许水平滚动，特别是在小屏幕上 */
    padding: 15px;
}

#housing-table {
    width: 100%;
    border-collapse: separate; /* 改为 separate 以支持圆角和间距 */
    border-spacing: 0; /* 移除单元格间距，通过padding控制 */
    margin-top: 0;
}

#housing-table th, #housing-table td {
    padding: 15px 18px; /* 增大单元格padding */
    text-align: left;
    border-bottom: 1px solid #e8e8e8; /* 更细的单元格底边框 */
    font-size: 0.95em;
    white-space: nowrap; /* 防止内容换行，配合水平滚动 */
}

#housing-table th {
    background-color: #f8f9fa; /* 表头背景色 */
    font-weight: 500; /* 表头字重 */
    color: #333;
    position: sticky; /* 表头吸顶效果 */
    top: 0;
    z-index: 10; /* 确保表头在滚动时位于上方 */
    cursor: pointer; /* 表头可点击排序提示 */
    transition: background-color 0.2s ease;
}

#housing-table th:hover {
    background-color: #e9ecef; /* 表头悬停效果 */
}

#housing-table tbody tr {
    transition: background-color 0.3s ease, transform 0.2s ease; /* 行的平滑过渡 */
}

#housing-table tbody tr:nth-child(even) {
    background-color: #fdfdfd;
}

#housing-table tbody tr:hover {
    background-color: #e6f7ff; /* 鼠标悬停时高亮行 */
    transform: translateY(-2px); /* 轻微上移效果 */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* 悬停时阴影 */
}

#housing-table td {
    color: #555;
}

/* 表格中的 N/A 文本样式 */
.na-text {
    color: #999;
    font-style: italic;
}


/* 页脚样式 */
footer {
    text-align: center;
    padding: 30px 0;
    margin-top: 40px;
    font-size: 0.9em;
    color: #777;
    border-top: 1px solid #e0e0e0; /* 页脚上方分隔线 */
}
footer p {
    margin-bottom: 5px;
}

/* 响应式设计：针对小屏幕设备进行调整 */
@media (max-width: 1200px) { /* 稍微调大断点 */
    #housing-table th, #housing-table td {
        padding: 12px 10px;
        white-space: normal; /* 允许内容换行 */
    }
}

@media (max-width: 768px) {
    header h1 {
        font-size: 2em;
    }
    header .subtitle {
        font-size: 0.9em;
    }

    .controls-wrapper {
        flex-direction: column; /* 垂直排列控制元素 */
        align-items: stretch; /* 拉伸以适应宽度 */
    }
    .controls {
        width: 100%;
        text-align: left;
    }
    #sort-by {
        width: 100%; /* 下拉框占满宽度 */
        margin-top: 10px;
    }

    /* 针对小屏幕，将表格转换为卡片式列表 */
    .table-container {
        padding: 0;
    }
    #housing-table thead {
        display: none; /* 隐藏原始表头 */
    }
    #housing-table tr {
        display: block; /* 每行变为一个块 */
        background-color: #fff;
        border: none;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px; /* 卡片间距 */
        padding: 15px;
    }
    #housing-table td {
        display: flex; /* 使用flex布局实现标签和内容对齐 */
        justify-content: space-between; /* 内容靠右 */
        align-items: center;
        padding: 10px 0; /* 调整内边距 */
        border-bottom: 1px dashed #eee; /* 单元格间用虚线分隔 */
        text-align: right; /* 内容靠右 */
        white-space: normal;
    }
    #housing-table td:last-child {
        border-bottom: none; /* 最后一个单元格无底边框 */
    }
    #housing-table td::before {
        content: attr(data-label); /* 使用 data-label 属性作为“表头”内容 */
        font-weight: 500;
        color: #333;
        text-align: left; /* 标签靠左 */
        margin-right: 10px;
        white-space: nowrap;
    }
    #housing-table tbody tr:hover {
        transform: none; /* 移除小屏幕下的悬停上移 */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 保持阴影 */
    }
}