/* 基础样式 */
body {
    font-family: 'Microsoft YaHei', sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f5f5f5;
}

.container {
    max-width: 1280px;
    margin: 0 auto;
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: center;
    color: #333;
}

h5 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
}

/* 区域选择按钮 */
.area-selector {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.area-selector button {
    padding: 10px 20px;
    margin: 0 10px;
    border: none;
    background-color: #e0e0e0;
    color: #333;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: bold;
    font-size: 1em;
    width: 200px;
}

.area-selector button.active {
    background-color: #4CAF50;
    color: white;
}

/* 楼栋容器 */
.building-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 30px;
}

/* 楼栋样式 */
.building {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 15px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.building h3 {
    position: sticky;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 10;
    background-color: #f9f9f9;
    margin: 0 auto 15px;
    color: #444;
    font-size: 1.2em;
    padding: 5px 0;
    border-bottom: 1px solid #ddd;
    width: 100%;
}

.building-grid {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 10px;
    margin-top: 15px;
    padding: 0 10px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.unit-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    position: relative;
}

.unit-column:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -6px;
    top: 0;
    bottom: 0;
    width: 1px;
    border-right: 2px dashed #90caf9;
}


/* 住户样式 */
.household {
    background-color: #d8f3da;
    border: 1px solid #7cc77e;
    border-radius: 4px;
    padding: 5px;
    text-align: center;
    font-size: 0.9em;
    width: 68px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.household:hover {
    background-color: #f5e170;
    cursor: pointer;
}

.household-nodata {
    background-color: #d4cfce;
    border: 1px solid #a5d6a7;
    border-radius: 4px;
    padding: 5px;
    text-align: center;
    font-size: 0.9em;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.household-selected {
    background-color: #f86969;
    border: 1px solid #460101;
    border-radius: 4px;
    padding: 5px;
    text-align: center;
    text-decoration: line-through;
    font-size: 0.9em;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.unit-header {
    font-weight: bold;
    margin: 0 auto 10px;
    text-align: center;
    background-color: #e3f2fd;
    padding: 5px 0;
    border-radius: 4px;
    width: 80%;
}

/* 住户提示框样式 */
.household-tooltip {
    position: absolute;
    display: none;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 100;
    min-width: 200px;
    font-size: 0.9em;
}

.household-tooltip div {
    margin: 3px 0;
}

.household-tooltip strong {
    display: inline-block;
    width: 70px;
}

.household-tooltip #title {
    align-content: center;
    font-size: 1.2em;
    font-weight: bolder;
}

/* 响应式设计 */
@media (max-width: 780px) {
    .building {
        overflow-x: auto;
        padding-bottom: 15px;
        -webkit-overflow-scrolling: touch;
    }
    
    .building-grid {
        display: inline-flex;
        gap: 5px;
        padding: 0 10px;
        white-space: nowrap;
    }
    
    .unit-column {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5px;
        margin-right: 5px;
        position: relative;
        min-width: 120px;
    }

    .unit-column:not(:last-child)::after {
        content: "";
        position: absolute;
        right: -6px;
        top: 0;
        bottom: 0;
        width: 1px;
        border-right: 2px dashed #90caf9;
    }
}

/* 房源统计信息样式 */
.stats-info {
    text-align: center;
    margin: 10px auto 20px;
    padding: 10px;
    background-color: #f0f8ff;
    border-radius: 4px;
    font-size: 0.5em;
    width: 90%;
    max-width: 1000px;
}

.stats-info strong {
    font-weight: bold;
    color: #0066cc;
    margin: 6px;
}