/* ===========================================================
   Hockey Standings & Schedule — dark "Flutlicht" broadcast look
   Shares the site's --jp-* design tokens (theme style.css) with
   fallbacks so it still reads fine if that stylesheet isn't loaded.
   =========================================================== */

.hockey-standings,
.hockey-schedule {
    --hd-bg: var(--jp-panel, #101c3a);
    --hd-bg-alt: var(--jp-panel-2, #142346);
    --hd-line: var(--jp-line, rgba(255, 255, 255, .12));
    --hd-text: var(--jp-text, #eaf0fd);
    --hd-muted: var(--jp-muted, #93a3c4);
    --hd-accent: var(--jp-cyan, #8ec9ff);
    color: var(--hd-text);

    /* Rounding + clipping live on this wrapper, not the <table> — with
       border-collapse:collapse (below) row lines are one shared line per
       grid row instead of two independently-rounded per-cell borders, so
       they land on the same pixel and actually look straight. */
    background: var(--hd-bg);
    border: 1px solid var(--hd-line);
    border-radius: var(--jp-radius, 14px);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

.hockey-standings table,
.hockey-schedule table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-family: inherit;
    font-size: .92rem;
}

/* table-layout:fixed pins every column to a set width regardless of content
   (Team gets whatever's left over) instead of the browser re-measuring the
   widest cell per column — without this, a team name long enough to wrap
   to a second line makes just that one row taller than its neighbours,
   which reads as the row dividers being crooked even though each one is a
   straight, correctly-drawn line. Team name itself is then ellipsis-
   truncated below so a long name can never force that wrap in the first
   place. */
.hockey-standings table {
    table-layout: fixed;
}
.hockey-standings th:first-child,
.hockey-standings td:first-child { width: 34px; }
.hockey-standings th:nth-child(3),
.hockey-standings th:nth-child(4),
.hockey-standings th:nth-child(5) { width: 34px; }
.hockey-standings th:nth-child(6),
.hockey-standings th:nth-child(7),
.hockey-standings th:nth-child(8) { width: 44px; }
.hockey-standings th:last-child,
.hockey-standings td:last-child { width: 48px; }

.hockey-standings th,
.hockey-standings td,
.hockey-schedule th,
.hockey-schedule td {
    border: none;
    border-bottom: 1px solid var(--hd-line);
    padding: 10px 8px;
    text-align: center;
    vertical-align: middle;
    color: var(--hd-text);
}

.hockey-standings th,
.hockey-schedule th {
    background: rgba(5, 9, 26, .45);
    color: var(--hd-accent);
    font-weight: 700;
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .06em;
}

.hockey-standings tr:last-child td,
.hockey-schedule tr:last-child td {
    border-bottom: none;
}

.hockey-standings tr:nth-child(even) td,
.hockey-schedule tr:nth-child(even) td {
    background: var(--hd-bg-alt);
}

.hockey-standings tbody tr,
.hockey-schedule tbody tr {
    transition: background .15s ease;
}

.hockey-standings tbody tr:hover td,
.hockey-schedule tbody tr:hover td {
    background: rgba(142, 201, 255, .07);
}

/* Own-team highlight: accent left rail + tinted row instead of the old
   flat light-blue fill, so it still reads correctly on a dark panel. */
.hockey-standings tr.highlight-team td,
.hockey-schedule tr.highlight-team td {
    background: rgba(142, 201, 255, .12) !important;
    font-weight: 700;
    color: var(--hd-text);
}

.hockey-standings tr.highlight-team td:first-child,
.hockey-schedule tr.highlight-team td:first-child {
    box-shadow: inset 3px 0 0 var(--hd-accent);
}

/* ---- standings: rank + team ---- */
.hockey-standings td:first-child {
    font-weight: 800;
    color: var(--hd-muted);
    width: 34px;
}

.hockey-standings .team-name {
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

/* The plain team-name text node, the only <span> jungpanther_hockeydata.php
   puts in this cell — truncated so it can never be the reason a row grows
   taller than the fixed-width column allows (see table-layout:fixed above). */
.hockey-standings .team-name span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.hockey-standings .team-logo {
    height: 22px;
    width: 22px;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
    flex: 0 0 auto;
}

/* Points column reads as the headline stat, DEL/NHL table style. */
.hockey-standings td:last-child {
    font-weight: 800;
    color: var(--hd-accent);
}

/* "Last updated" text */
.hockey-standings .last-update,
.hockey-schedule .last-update {
    font-size: .78rem;
    color: var(--hd-muted);
    font-style: italic;
    margin: 0;
    padding: 8px 10px;
    text-align: right;
}

/* ---- schedule: teams + score pill ---- */
.hockey-schedule .team-name {
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-start;
    font-weight: 600;
}

.hockey-schedule .team-logo {
    height: 22px;
    width: 22px;
    object-fit: contain;
    vertical-align: middle;
    flex: 0 0 auto;
}

.hockey-schedule td:nth-child(3) {
    color: var(--hd-muted);
    font-weight: 700;
    font-size: .78rem;
    text-transform: uppercase;
    width: 30px;
}

.hockey-schedule td:last-child {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    font-size: 1rem;
    color: var(--hd-text);
}

/* ===========================================================
   Responsive Adjustments
   =========================================================== */
@media (max-width: 768px) {
    .hockey-standings th.hide-mobile,
    .hockey-standings td.hide-mobile {
        display: none;
    }

    .hockey-standings table,
    .hockey-schedule table {
        font-size: .82rem;
    }

    .hockey-schedule .team-name .team-fullname {
        display: none !important;
    }

    .hockey-schedule .team-name::after {
        content: attr(data-shortname);
        margin-left: 4px;
        font-size: .82rem;
        font-weight: 700;
        color: var(--hd-text);
    }

    .hockey-schedule .team-logo {
        height: 18px;
        width: 18px;
    }

    .hockey-schedule th,
    .hockey-schedule td,
    .hockey-standings th,
    .hockey-standings td {
        padding: 7px 5px;
    }
}