/* ======================================================= */
/* 足球比分直播 - 最终完整修复版（已修复当前时间 + 倒计时） */
/* ======================================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { 
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 
    background: #f8f9fa; 
    color: #1f2937; 
}

/* 容器 */
.hoy-wrapper { display:block; margin:0 auto; padding:16px; background:#f8f9fa; min-height:100vh; }
.hoy-main { width:80%; margin:0 auto;background:#fff; border-radius:12px; box-shadow:0 10px 25px rgba(0,0,0,.08); overflow:hidden; }

/* 动态导航栏 */
.data-nav {
    display: flex; background: #fff; border-bottom: 1px solid #e5e7eb; padding: 0 20px;
    flex-wrap: wrap; gap: 4px;
}
.data-nav a {
    padding: 14px 20px; font-size: 15px; font-weight: 600; color: #475569;
    text-decoration: none; border-bottom: 3px solid transparent;
    display: flex; align-items: center; gap: 6px; white-space: nowrap;
}
.data-nav a.active { color: #dc2626; border-bottom: 3px solid #dc2626; }
.data-nav .count {
    background: #e2e8f0; color: #475569; font-size: 13px;
    padding: 2px 8px; border-radius: 9999px; font-weight: 500;
}

/* 顶部操作栏 */
.hoy-topbar { padding: 20px; background: #fff; border-bottom: 1px solid #e5e7eb; }
.hoy-topbar-content { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.hoy-date-picker, .hoy-filter-select, .hoy-search-box { flex: 1; min-width: 200px; }
#date-input { padding:12px 16px; border:1px solid #d1d5db; border-radius:8px; font-size:16px; }
.hoy-btn-primary {
    padding:12px 28px; background:linear-gradient(135deg,#1e40af,#1e3a8a);
    color:#fff; border:none; border-radius:8px; font-weight:600; font-size:16px; cursor:pointer;
}
.hoy-btn-small {
    padding:12px 20px; background:#64748b; color:#fff; border:none; border-radius:8px; cursor:pointer;
}

/* 当前时间条 + 自动刷新指示器（关键修复） */
.info-bar {
    display:flex; justify-content:center; align-items:center;
    padding:14px 20px; background:#f0f7ff; border-bottom:1px solid #e5e7eb;
    font-size:15px; font-weight:600; color:#1e40af;
}


/* 主表格 */
#table-matches-content table { width:100%; border-collapse:collapse; font-size:15px; background:#fff; }
#table-matches-content thead th {
    background:#f8fafc; color:#475569; padding:12px 8px; font-weight:600;
    text-align:center; border-bottom:2px solid #e2e8f0;
}
#table-matches-content tbody tr { border-bottom:1px solid #f1f5f9; }
#table-matches-content tbody tr:hover { background:#f8fafc; }
#table-matches-content td { padding:14px 8px; vertical-align:middle; text-align:center; }

/* 联赛彩标 + 球队 + 比分 + 状态 */
.league-tag { display:inline-block; padding:4px 12px; border-radius:4px; font-size:13px; font-weight:600; color:#fff; }
.team-cell { display:flex; align-items:center; gap:8px; justify-content:center; }
.team-logo { width:28px; height:28px; border-radius:50%; flex-shrink:0; }
.team-name { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:160px; }
.score-cell { font-size:24px; font-weight:800; color:#dc2626; min-width:80px; }
.score-details { font-size:12px; color:#64748b; margin-top:4px; }
.status { display:inline-block; padding:6px 16px; border-radius:9999px; font-size:13.5px; font-weight:700; min-width:68px; }
.not-started .status { background:#64748b; color:#fff; }
.in-progress .status { background:#dc2626; color:#fff; animation:pulse 2s infinite; }
.match-finished .status { background:#16a34a; color:#fff; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.75} }

/* 其他 */
.notice { text-align:center; padding:20px; background:#f8fafc; color:#64748b; border-radius:8px; margin:20px; }

/* 响应式 */
@media (max-width:768px) {
    .hoy-main { width:100%;}
    .hoy-topbar-content { flex-direction:column; }
    #table-matches-content td, #table-matches-content th { padding:10px 6px; font-size:14px; }
}


@keyframes spin {
    to { transform: rotate(360deg); }
}

/* 倒计时数字高亮 */
#refresh-countdown {
    font-weight: 700;
    min-width: 24px;
    text-align: center;
}

/* ====================== 角球 / 黄牌 / 红牌 统计列优化 ====================== */
#table-matches-content td:nth-child(7),  /* 角球列 */
#table-matches-content td:nth-child(8),  /* 黄牌列 */
#table-matches-content td:nth-child(9) { /* 红牌列 */
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1e40af !important;
    text-align: center !important;
    letter-spacing: -0.5px;
    padding: 14px 4px !important;
}

/* 角球列（绿色调，更突出） */
#table-matches-content td:nth-child(7) {
    color: #10b981 !important;
    background: rgba(16, 185, 129, 0.08);
}

/* 黄牌列（橙色调） */
#table-matches-content td:nth-child(8) {
    color: #f59e0b !important;
    background: rgba(245, 158, 11, 0.08);
}

/* 红牌列（红色调） */
#table-matches-content td:nth-child(9) {
    color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.08);
}

/* 移动端适配（防止挤压） */
@media (max-width: 768px) {
    #table-matches-content td:nth-child(7),
    #table-matches-content td:nth-child(8),
    #table-matches-content td:nth-child(9) {
        width: 55px !important;
        min-width: 55px !important;
        font-size: 14px !important;
        padding: 12px 2px !important;
    }
}

/* ====================== iPhone 专用修复：主队/客队名称完整显示 ====================== */
@media (max-width: 768px) {
    /* 关键修复：移除 .hoy-main 的 overflow:hidden，防止裁剪水平滚动 */
    .hoy-main {
        overflow: visible !important;
    }

    /* 强制表格更宽，让队名有足够空间 */
    #table-matches-content table {
        min-width: 1280px !important;   /* 比之前更大，确保主队/客队列有足够宽度 */
    }

    /* 主队/客队名称：给更多空间，不再过度裁剪 */
    .team-name {
        max-width: 155px !important;
        font-size: 13px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .team-cell {
        gap: 6px;
    }

    /* 给主队和客队列设置最小宽度（第3列和第5列） */
    #table-matches-content th:nth-child(3),
    #table-matches-content td:nth-child(3),
    #table-matches-content th:nth-child(5),
    #table-matches-content td:nth-child(5) {
        min-width: 155px !important;
    }

    /* 整体表格内容更紧凑但清晰 */
    #table-matches-content td,
    #table-matches-content th {
        padding: 8px 4px !important;
        font-size: 12.5px !important;
    }
}

/* 更小 iPhone（如 SE、13 mini） */
@media (max-width: 390px) {
    #table-matches-content table {
        min-width: 1180px !important;
    }
    .team-name {
        max-width: 130px !important;
        font-size: 12px !important;
    }
}