/* ==========================================
   体育运动页面样式
   ==========================================
   包含体育运动页面特有的样式
   注意：共享样式在 sports-common.css 中
   ========================================== */

/* ---- 体育运动子页面导航 ---- */
.sports-tabs-container {
    display: block;
    clear: both;
    margin-bottom: var(--spacing-lg);
}

.sports-tab-btn {
    display: inline-block;
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--card-bg-color);
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius-md);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    color: var(--text-color);
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    margin-right: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.sports-tab-btn:hover {
    background: var(--hover-background);
    border-color: var(--primary-color);
}

.sports-tab-btn.active {
    background: var(--primary-color);
    color: var(--white);
    border-color: var(--primary-color);
}

/* ---- 体育运动内容容器 ---- */
.sports-container {
    display: flex;
    gap: var(--spacing-lg);
    min-height: 500px;
}

.sports-sidebar {
    width: 280px;
    flex-shrink: 0;
    background-color: var(--card-bg-color);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-light);
    border: 2px solid transparent;
}

.sports-sidebar:hover {
    border-color: var(--secondary-color);
}

.sports-content {
    flex: 1;
    min-width: 0;
}

.sports-sidebar .title {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-sm);
    color: var(--heading-color);
}

.sports-sidebar .location-info {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-bottom: var(--spacing-md);
}

.sports-content {
    flex: 1;
    min-width: 0;
}

.sports-summary-container {
    margin: 0 0 var(--spacing-xl) 0;
    padding: var(--spacing-xl);
    background-color: var(--card-bg-color);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-light);
    border: 2px solid transparent;
}

.sports-summary-container:hover {
    border-color: var(--secondary-color);
}

/* ---- 体育运动活动表格 ---- */
.activities-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--spacing-md);
}

.activities-table th,
.activities-table td {
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.activities-table th {
    background: var(--card-bg-color);
    font-weight: var(--font-weight-semibold);
    color: var(--heading-color);
}

.activities-table tr:hover {
    background: var(--hover-background);
}

/* ---- 体育运动活动详情容器 ---- */
.sports-activity-container {
    display: flex;
    gap: var(--spacing-lg);
    min-height: 500px;
}

.activity-sidebar {
    width: 300px;
    flex-shrink: 0;
    padding: var(--spacing-md);
    background: var(--card-bg-color);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color);
}

.activity-content {
    flex: 1;
    min-width: 0;
}

.activity-charts {
    margin-top: var(--spacing-md);
}

/* ---- 活跃统计图样式 ---- */
.summary-content {
    padding: var(--spacing-md) 0;
}

/* ---- 响应式 ---- */
@media (max-width: 768px) {
    .sports-container,
    .sports-activity-container {
        flex-direction: column;
    }

    .sports-sidebar,
    .activity-sidebar {
        width: 100%;
    }
}


@media (max-width: 900px) {
    /* 平板宽度: 容器间距收紧 */
    .mainbox {
        padding: var(--spacing-lg);
    }
}

@media (max-width: 1200px) {
    /* 1200px: 大屏到中屏过渡,无特殊调整 */
}


@media (max-width: 1800px) {
    /* 1800px: 超大屏限制,无特殊调整 */
}

@media (max-width: 480px) {
    /* 480px: 超小屏,无特殊调整 */
}


@media (max-width: 600px) {
    /* 600px: 小屏,无特殊调整 */
}