/* 表格布局样式 */
.table-list-container {
    width: 100%;
    overflow-x: auto;
    margin: 20px 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.table-list {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.table-list th,
.table-list td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
}

.table-list th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #333;
    position: sticky;
    top: 0;
    z-index: 10;
}

.table-list tbody tr:hover {
    background-color: #f8f9fa;
}

/* 变红列样式 */
.column-red {
    color: #dc3545 !important;
    font-weight: 600;
}

.column-red a {
    color: #dc3545 !important;
}

/* 置顶列样式 */
.column-sticky {
    position: sticky;
    left: 0;
    background-color: #fff;
    z-index: 5;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}

/* 当行悬停时，置顶列的背景色也要变化 */
.table-row:hover .column-sticky {
    background-color: #f8f9fa;
}

/* 表头置顶样式 */
.table-list th.column-sticky {
    background-color: #f8f9fa;
    z-index: 15;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .table-list-container {
        font-size: 12px;
    }
    
    .table-list th,
    .table-list td {
        padding: 8px 12px;
    }
    
    /* 在小屏幕上取消置顶效果 */
    .column-sticky {
        position: relative;
        box-shadow: none;
    }
    
    .table-list th.column-sticky {
        position: sticky;
    }
}

/* 无数据样式 */
.no-data {
    text-align: center;
    color: #6c757d;
    padding: 40px;
    font-style: italic;
}

/* 列特定样式 */
.column-title {
    min-width: 200px;
    max-width: 300px;
}

.column-price {
    min-width: 100px;
    text-align: right;
}

.column-location {
    min-width: 150px;
}

.column-season {
    min-width: 100px;
}

.column-date {
    min-width: 120px;
    text-align: center;
}

/* 链接样式 */
.table-list a {
    color: #007bff;
    text-decoration: none;
    transition: color 0.2s;
}

.table-list a:hover {
    color: #0056b3;
    text-decoration: underline;
}

/* 增强标红列样式 */
.column-red {
    color: #e74c3c !important;
    font-weight: 600;
}

/* 修复置顶列在表格中的显示 */
.table-list .sticky-row {
    background-color: #f8f9fa;
    border-left: 3px solid #3498db;
}

/* 确保标红样式在所有表格中生效 */
.table-list td.column-red a {
    color: #e74c3c !important;
    text-decoration: underline;
}