/* Overview - the league at a glance (leagues/overview.php).

   Cards in rows: the memo and the wrap-up side by side, then the standings and
   this week's Board, then the viewer's picks across the full width. Each card
   is a short look with a link in its corner to the page that has the rest, so
   everything here is kept to a few lines or a few rows. */

.overviewPage{
    box-sizing: border-box;
    /* The dashboard panel centres its text; these cards read left to right. */
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0 auto;
    max-width: 1100px;
    width: 100%;
}

.overviewRow{
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.overviewCard{
    background: var(--c-s1);
    border: 1px solid var(--c1-a2);
    border-radius: var(--r3);
    box-sizing: border-box;
    min-width: 0;
    padding: 14px 16px 16px;
}

.overviewCardHead{
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 10px;
}

.overviewCardTitle{
    align-items: center;
    color: var(--c1);
    display: flex;
    font-family: var(--ff1);
    font-size: var(--fs-body);
    font-weight: var(--fw3);
    gap: 8px;
    margin: 0;
    min-width: 0;
}

.overviewCardTitle > i{
    color: var(--c-league-theme, var(--c2));
}

/* The week a card is about, after its title and a step quieter than it. */
.overviewCardWeek{
    color: var(--c1-a4);
    font-weight: var(--fw1);
}

/* The way to the rest: a link to a page, or for the memo and wrap-up a button
   that opens their window. The two look the same. */
.overviewCardLink{
    align-items: center;
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    border-radius: var(--r2);
    color: var(--c-league-theme, var(--c2));
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font-family: var(--ff1);
    font-size: var(--fs-small1);
    font-weight: var(--fw2);
    gap: 6px;
    padding: 4px 6px;
    text-decoration: none;
    white-space: nowrap;
}

.overviewCardLink:hover,
.overviewCardLink:focus-visible{
    background: var(--c1-a1);
}

.overviewCardSubject{
    color: var(--c1);
    font-family: var(--ff1);
    font-size: var(--fs-body);
    font-weight: var(--fw2);
    margin: 0 0 4px;
}

/* A few lines of the memo or the wrap-up, cut off with an ellipsis: enough to
   say what it is about, and the link above has the rest. */
.overviewCardExcerpt{
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    color: var(--c1-a5);
    display: -webkit-box;
    font-family: var(--ff1);
    font-size: var(--fs-body);
    line-height: 1.45;
    margin: 0;
    overflow: hidden;
}

.overviewCardEmpty{
    color: var(--c1-a4);
    font-family: var(--ff1);
    font-size: var(--fs-body);
    margin: 0;
}

/* --- The tables ------------------------------------------------------------- */
.overviewTable{
    border-collapse: collapse;
    font-family: var(--ff1);
    font-size: var(--fs-body);
    font-variant-numeric: tabular-nums;
    width: 100%;
}

.overviewTable thead th{
    border-bottom: 1px solid rgba(23, 33, 54, .22);
    color: var(--c1-a4);
    font-size: var(--fs-small2);
    font-weight: 600;
    letter-spacing: var(--ls3);    padding: 0 8px 6px;
    text-transform: uppercase;
}

.overviewTable tbody td{
    color: var(--c1);
    padding: 5px 8px;
}

.overviewTable tbody tr:nth-child(even){
    background: var(--c-s3);
}

.overviewRankCol{
    color: var(--c1-a4);
    text-align: right;
    width: 1%;
}

.overviewTable tbody .overviewRankCol{
    color: var(--c1-a4);
}

.overviewEntryCol{
    max-width: 0;
    text-align: left;
    width: 100%;
}

.overviewEntryCol .entryProfileContent{
    gap: 10px;
}

.overviewEntryCol .entryProfileLink{
    --size: 1.55rem;
}

.overviewNumberCol{
    text-align: right;
    white-space: nowrap;
    width: 1%;
}

/* The viewer's own rows: the navy line down the left edge the standings, the
   Board and the Splits tables give them, and the name alone in bold. */
.overviewTable tbody tr.overviewRow--own > td:first-child{
    box-shadow: inset 3px 0 0 var(--c1);
}

.overviewTable tbody tr.overviewRow--own .entryProfileName{
    font-weight: var(--fw3);
}

/* Between the top of the table and the viewer's own entries further down. */
.overviewTable tbody tr.overviewGapRow{
    background: none;
}

.overviewTable tbody tr.overviewGapRow td{
    color: var(--c1-a3);
    padding: 0;
    text-align: center;
}

/* --- The picks card ------------------------------------------------------- */
/* A full slate is wider than the card on a narrow screen; the table scrolls
   sideways inside it rather than widening the page. */
.overviewPicksScroll{
    overflow-x: auto;
}

.overviewPicksTable{
    width: auto;
}

.overviewPicksTable .overviewEntryCol{
    max-width: 200px;
    min-width: 120px;
    width: auto;
}

.overviewPicksTable .overviewEntryCol .entryProfileName{
    display: block;
}

/* A game's two teams, away over home, as the Board heads its columns. */
.overviewGameCol{
    padding-left: 3px !important;
    padding-right: 3px !important;
    text-align: center;
}

.overviewGameTeam{
    display: block;
    line-height: 1.3;
}

/* The spread between the two teams, as the Board prints it, with the triangle
   marking the favourite - .spreadFavoriteMark in week-tracker.css, which the
   dashboard loads alongside this file. It takes the header's own size, weight
   and ink, as the Board's spread takes its teams'. */
.overviewGameSpread{
    align-items: center;
    display: flex;
    justify-content: center;
    line-height: 1.3;
}

.overviewPickCell{
    font-size: var(--fs-small1);
    font-weight: var(--fw2);
    padding: 5px 3px !important;
    text-align: center;
}

/* The result of a finished game, in the Board's own colours. */
.overviewPickCell.is-correct{
    background: var(--c-win);
}

.overviewPickCell.is-incorrect{
    background: var(--c-loss);
}

.overviewPickCell.is-push{
    background: var(--c-push);
}

/* By the page's column rather than the window, so the chat panel beside it
   counts - see #leagueDashboardMain. */
@container dashboard-main (max-width: 800px){
    .overviewRow{
        grid-template-columns: minmax(0, 1fr);
    }
}