/* ======================================================= */
/* 足球积分榜  */
/* ======================================================= */

/* ---------- 基础容器 ---------- */
.standings-wrapper {
    margin: 0 auto;
    padding: 20px 10px; /* 左右留一点边距 */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #f9f9fb;
    min-height: 100vh;
}
/* ---------- 头部 ---------- */
.standings-header {
    text-align: center;
    margin-bottom: 30px;
    padding: 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.standings-header h1 {font-size: 2.5rem; color:#2c3e50; margin-bottom:8px; font-weight:700;}
.standings-header p {color:#6c757d; font-size:1.1rem;}

/* ---------- 筛选区 ---------- */
.standings-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    margin-bottom: 25px;
    padding: 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.filter-group {display:flex; flex-direction:column; gap:6px;}
.filter-group label {font-weight:600; color:#495057; font-size:0.9rem; text-transform:uppercase; letter-spacing:0.5px;}
#season-select, #country-filter, #league-search {
    padding:5px 16px; border:2px solid #e9ecef; border-radius:8px;
    font-size:15px; transition:border-color .2s; background:white;
}
#season-select:focus, #country-filter:focus, #league-search:focus {
    outline:none; border-color:#007cba;
}

/* ---------- 联赛网格（核心） ---------- */
.leagues-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
    margin-bottom: 30px;
    padding: 0 10px;
}

/* ---------- 联赛卡片（正方形） ---------- */
.league-card {
    background: white;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    transition: all .2s ease;
    border: 2px solid transparent;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 140px;               /* 正方形 */
}
.league-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    border-color: #007cba;
}

/* LOGO 容器 */
.league-logo-wrapper {
    width: 60px; height: 60px;
    margin-bottom: 8px;
    display: flex; align-items:center; justify-content:center;
}
.league-logo {
    width: 60px; height: 60px;
    border-radius: 8px;
    object-fit: contain;
    background: #f8f9fa;
}

/* 联赛名称 */
.league-name {
    font-size: .85rem;
    font-weight: 600;
    color: #2c3e50;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.league-flag {
    width: 24px;
    height: 18px;
    margin-bottom: 6px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.league-flag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- 响应式（更大屏幕显示更多卡片） ---------- */
@media (min-width: 640px) {
    .leagues-grid {grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));}
    .league-card {height:160px;}
    .league-logo-wrapper, .league-logo {width:70px; height:70px;}
}
@media (min-width: 1024px) {
    .leagues-grid {grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap:20px;}
    .league-card {height:180px;}
    .league-logo-wrapper, .league-logo {width:80px; height:80px;}
    .league-name {font-size:.95rem;}
}
@media (min-width: 1400px) {
    .leagues-grid {grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));}
    .league-card {height:200px;}
    .league-logo-wrapper, .league-logo {width:90px; height:90px;}
}

/* ---------- 加载占位 ---------- */
.loading-placeholder, .loading-placeholder-small {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:40px 20px; color:#6c757d; font-size:1rem;
}
.spinner, .spinner-large {
    width:40px; height:40px; border:4px solid #e9ecef; border-top:4px solid #007cba;
    border-radius:50%; animation:spin 1s linear infinite; margin-bottom:15px;
}
.spinner-large {width:60px; height:60px; border-width:6px;}
@keyframes spin {0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)}}

/* ---------- 空/错误提示 ---------- */
.no-results, .error-message {
    text-align:center; padding:40px 20px; color:#6c757d;
    background:#f8f9fa; border-radius:12px; border-left:4px solid #007cba;
}
.error-message {color:#dc3545; border-left-color:#dc3545;}

/* ---------- 模态框（保持不变） ---------- */
.modal-overlay {display:none; position:fixed; inset:0; background:rgba(0,0,0,.6);
    z-index:10000; align-items:center; justify-content:center; padding:20px;}
.modal-content {background:white; border-radius:12px; width:100%; max-width:1000px;
    max-height:90vh; overflow:hidden; animation:modalSlideIn .3s ease;}
@keyframes modalSlideIn {from{opacity:0;transform:translateY(-20px) scale(.95)}
    to{opacity:1;transform:translateY(0) scale(1)}}
.modal-header {display:flex; justify-content:space-between; align-items:center;
    padding:20px 24px; background:#f8f9fa; border-bottom:1px solid #e9ecef;}
.modal-header h2 {color:#2c3e50; font-size:1.4rem; margin:0;}
.close-btn {background:none; border:none; font-size:24px; color:#6c757d;
    cursor:pointer; width:32px; height:32px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;}
.close-btn:hover {background:#e9ecef; color:#495057;}
.modal-body {padding:0; max-height:calc(90vh - 80px); overflow-y:auto;}

/* ---------- 积分表 ---------- */
.standings-info {padding:20px; background:#f8f9fa; border-bottom:1px solid #e9ecef;}
.league-info-bar {display:flex; justify-content:space-between; align-items:center;
    flex-wrap:wrap; gap:15px;}
.league-name-small {font-weight:700; color:#2c3e50; font-size:1.1rem;}
.last-updated {color:#28a745; font-size:.85rem; font-weight:600;}
.standings-table-wrapper {overflow-x:auto;}
.standings-table {width:100%; border-collapse:collapse; font-size:14px; background:white;}
.standings-table th {background:#2c3e50; color:white; padding:12px 8px;
    text-align:center; font-weight:600; font-size:12px; text-transform:uppercase;
    letter-spacing:.5px; white-space:nowrap;}
.standings-table td {padding:10px 8px; text-align:center; border-bottom:1px solid #e9ecef;}
.standings-table tbody tr:hover {background:#f8f9fa;}
.position {font-weight:700; color:#2c3e50; width:60px;}
.team-info {display:flex; align-items:center; gap:8px; justify-content:flex-start;
    text-align:left; padding-left:15px;}
.team-logo {width:24px; height:24px; border-radius:4px; flex-shrink:0;}
.team-name {font-weight:600; color:#2c3e50; max-width:200px; overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap;}
.goals-diff {font-weight:600;}
.points {font-weight:700; color:#007cba; font-size:15px;}
.form {font-family:monospace; font-size:12px; letter-spacing:1px;}

/* ---------- 排名颜色 ---------- */
.rank-1 td {border-left:4px solid #ffd700;}
.rank-2 td {border-left:4px solid #c0c0c0;}
.rank-3 td {border-left:4px solid #cd7f32;}

/* ---------- 加载指示器（右上角） ---------- */
#loading-indicator {
    position:fixed; top:20px; right:20px; background:white;
    padding:15px 20px; border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,.15);
    display:flex; align-items:center; gap:12px; font-size:14px; color:#2c3e50;
    z-index:1001;
}
#loading-indicator .spinner {width:20px; height:20px; border-width:2px;}

/* ---------- 响应式（小屏） ---------- */
@media (max-width:768px) {
    .standings-wrapper {padding:10px;}
    .standings-header h1 {font-size:2rem;}
    .standings-filters {grid-template-columns:1fr; gap:12px; padding:15px;}
    .leagues-grid {grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px;}
    .league-card {height:130px;}
    .league-logo-wrapper,.league-logo {width:55px; height:55px;}
}
@media (max-width:480px) {
    .standings-table {font-size:13px;}
    .standings-table th,.standings-table td {padding:6px 3px;}
    .team-info {font-size:13px;}
    .team-logo {width:20px; height:20px;}
}