/* =====================================================
   League Table + Predictions Page — tbl- prefix
   ===================================================== */

.tbl-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 20px 0 20px;
}
.tbl-hero__flag { font-size: 36px; flex-shrink: 0; }
.tbl-hero__title {
    font-size: 22px;
    font-weight: 800;
    color: #111827;
    margin: 0 0 4px;
}
.tbl-hero__sub {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
}

.tbl-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 20px;
    align-items: start;
    padding-bottom: 48px;
}
.tbl-standings-col,
.tbl-preds-col {
    min-width: 0;
}

.tbl-full-table {
    width: 100%;
    border-collapse: collapse;
}
.tbl-full-table th {
    font-size: 11px;
    color: #4b5563;
    font-weight: 600;
    padding: 8px 10px 6px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}
.tbl-full-table th:nth-child(2) { text-align: left; }
.tbl-full-table td {
    padding: 9px 10px;
    font-size: 13px;
    color: #9ca3af;
    text-align: center;
}
.tbl-full-table td:nth-child(2) { text-align: left; }
.tbl-full-table tr {
    border-bottom: 1px solid rgba(255,255,255,.04);
    transition: background .1s;
}
.tbl-full-table tr:last-child { border-bottom: none; }
.tbl-full-table tr:hover { background: rgba(255,255,255,.03); }

@media (max-width: 1050px) {
    .tbl-layout { grid-template-columns: 1fr 300px; }
}
@media (max-width: 820px) {
    .tbl-layout { grid-template-columns: 1fr; }
    .tbl-full-table th:nth-child(n+7),
    .tbl-full-table td:nth-child(n+7) { display: none; }
}
@media (max-width: 560px) {
    .tbl-hero__flag { font-size: 28px; }
    .tbl-hero__title { font-size: 18px; }
    .tbl-full-table th:nth-child(n+5),
    .tbl-full-table td:nth-child(n+5) { display: none; }
}
@media (max-width: 420px) {
    .tbl-hero { padding: 16px 14px; gap: 12px; }
    .tbl-hero__title { font-size: 15px; }
    .tbl-full-table td, .tbl-full-table th { padding: 8px 6px; font-size: 11px; }
    .tbl-league-nav { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
    .tbl-nav-pill { font-size: 11px; padding: 5px 10px; white-space: nowrap; }
}