/*
 * Tables.
 *
 * The bid tables used to be coloured the way a spreadsheet is: a solid block
 * of colour across the header, every other row tinted, a border round every
 * cell. Now the colour is a thin rule along the top of the card and a pill
 * round the number the table is sorted by, the rows are separated by a
 * hairline, and the numbers are set in tabular figures and lined up on the
 * right so a column of bids reads as a column.
 *
 * Every table on the site shares the header treatment -- small, capitalised,
 * grey -- so the community votes table, the account page and the admin pages
 * match without being coloured like a position.
 */

/* --- Every .table on the site ------------------------------------------- */

.table {
    color: #212832;
}

.table > thead > tr > th {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #69707a;
    border-bottom: 2px solid #e0e5ec;
    white-space: nowrap;
}

/* The theme draws the line under a header in the text colour, which is the
   heavy black rule these tables used to have. */
.table > :not(:last-child) > :last-child > * {
    border-bottom-color: #e0e5ec;
}

.table > tbody > tr > td,
.table > tbody > tr > th {
    border-bottom: 1px solid #eef1f5;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}

/* The admin pages write their first cell as a th; make it a name, not a
   heading. */
.table > tbody > tr > th {
    font-weight: 600;
    color: #212832;
}

.table > tbody > tr:last-child > td,
.table > tbody > tr:last-child > th {
    border-bottom: 0;
}

.table > tbody > tr:hover > td,
.table > tbody > tr:hover > th {
    background-color: #f7f9fc;
}

/* --- The position bid tables -------------------------------------------- */

/* Each position's colour, from the same palette as its bar in Highest Bids
   of the Week: the full colour for the rule along the top of the card, a
   darker ink for text on a tint of it. A position without a colour of its
   own gets the theme's blue -- the defaults come first so the position's
   own rule, at the same specificity, wins. */
.bid-card {
    --bid-color: #0061f2;
    --bid-ink: #004fc4;
    --bid-tint: #dde9fd;
    border-top: 4px solid var(--bid-color);
    overflow: hidden;
}

.bid-card-rb  { --bid-color: #00ac69; --bid-ink: #00784a; --bid-tint: #e0f5ec; }
.bid-card-wr  { --bid-color: #f4a100; --bid-ink: #9a6300; --bid-tint: #fdf1d6; }
.bid-card-qb  { --bid-color: #0061f2; --bid-ink: #004fc4; --bid-tint: #dde9fd; }
.bid-card-te  { --bid-color: #f76400; --bid-ink: #b84a00; --bid-tint: #feeadb; }
.bid-card-k   { --bid-color: #6900c7; --bid-ink: #5600a3; --bid-tint: #ede1f9; }
.bid-card-def { --bid-color: #e81500; --bid-ink: #b31000; --bid-tint: #fce2de; }

/* The theme gives an actions header a fixed height, sized for one line. The
   week, the words "Waiver Wire" and the position wrap to two on a phone. */
.bid-card .card-header {
    height: auto;
    min-height: 3.5625rem;
    gap: 0.75rem;
    font-weight: 600;
    background-color: #fff;
}

/* The position's abbreviation, at the right of the card header. */
.bid-position-badge {
    display: inline-block;
    padding: 0.3em 0.7em;
    border-radius: 999px;
    background-color: var(--bid-tint);
    color: var(--bid-ink);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* The card body's padding is for prose. A table that scrolls sideways wants
   to run to the card's edges, so the padding moves inside the cells. */
.bid-card .card-body {
    padding: 0;
}

.bid-card .dataTable-wrapper .dataTable-container {
    font-size: 0.875rem;
}

/* simple-datatables still puts its bars above and below the table when the
   page has asked for nothing in them, and the theme pads the top one. */
.bid-card .dataTable-top,
.bid-card .dataTable-bottom {
    display: none;
}

.bid-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    color: #212832;
    font-variant-numeric: tabular-nums;
}

.bid-table > thead > tr > th,
.bid-table > tbody > tr > td,
.bid-table > tfoot > tr > th {
    padding: 0.7rem 0.85rem;
    vertical-align: middle;
    white-space: nowrap;
    border: 0;
    background-color: #fff;
}

.bid-table > thead > tr > th:first-child,
.bid-table > tbody > tr > td:first-child,
.bid-table > tfoot > tr > th:first-child {
    padding-left: 1.35rem;
}

.bid-table > thead > tr > th:last-child,
.bid-table > tbody > tr > td:last-child,
.bid-table > tfoot > tr > th:last-child {
    padding-right: 1.35rem;
}

/* Tighter on a phone, where every column that fits is one fewer to scroll
   to. */
@media (max-width: 575.98px) {
    .bid-table > thead > tr > th,
    .bid-table > tbody > tr > td,
    .bid-table > tfoot > tr > th {
        padding: 0.6rem 0.6rem;
    }

    .bid-table > thead > tr > th:first-child,
    .bid-table > tbody > tr > td:first-child,
    .bid-table > tfoot > tr > th:first-child {
        padding-left: 1rem;
    }

    .bid-table > thead > tr > th:last-child,
    .bid-table > tbody > tr > td:last-child,
    .bid-table > tfoot > tr > th:last-child {
        padding-right: 1rem;
    }
}

/* Header: small grey capitals over a rule. */
.bid-table > thead > tr > th {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #69707a;
    border-bottom: 2px solid #e0e5ec;
    background-color: #f8fafc;
}

/* Rows: a hairline between each, a wash on the one under the pointer. */
.bid-table > tbody > tr > td {
    border-bottom: 1px solid #eef1f5;
}

.bid-table > tbody > tr:hover > td {
    background-color: #f7f9fc;
}

/* Numbers sit on the right, under a right-aligned label. */
.bid-table .bid-col-num {
    text-align: right;
}

/* The player column stays put while the rest scrolls sideways, which on a
   phone is every table: a week of bids is a dozen columns wide. */
.bid-table > thead > tr > th:first-child,
.bid-table > tbody > tr > td:first-child,
.bid-table > tfoot > tr > th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    box-shadow: inset -1px 0 0 #eef1f5;
}

.bid-player-name {
    font-weight: 600;
    color: #212832;
}

.bid-col-team {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #69707a;
}

/* The expert count, in the position's colour: it is what the table is
   sorted by, and the one number on the row that is not money. */
.bid-count {
    display: inline-block;
    min-width: 1.9em;
    padding: 0.2em 0.55em;
    border-radius: 999px;
    background-color: var(--bid-tint);
    color: var(--bid-ink);
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

.bid-avg {
    font-weight: 700;
}

.bid-muted {
    color: #a7aeb8;
}

.bid-votes {
    font-size: 0.75rem;
    color: #69707a;
}

/* An expert's bid is quieter than the computed columns beside it. */
.bid-col-expert {
    color: #4a515b;
}

/* The most and the least any expert bid on a player: green for the top of
   the row, red for the bottom. Neither is a position's colour, so they read
   the same in every table. */
.bid-mark {
    display: inline-block;
    padding: 0.15em 0.5em;
    border-radius: 999px;
    font-weight: 600;
    line-height: 1.3;
}

.bid-high {
    background-color: #e0f5ec;
    color: #00784a;
}

.bid-low {
    background-color: #fce2de;
    color: #b31000;
}

/* Sorting. The theme draws two faint triangles on every header; here a
   header shows one, and only when it is the column the table is sorted by,
   or under the pointer as a hint that it could be. */
.bid-table .dataTable-sorter {
    padding-right: 1rem;
}

.bid-table .dataTable-sorter::before {
    display: none;
}

.bid-table .dataTable-sorter::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    height: 0;
    width: 0;
    margin-top: -2px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 5px solid currentColor;
    border-top: 0;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.bid-table > thead > tr > th:hover .dataTable-sorter::after {
    opacity: 0.35;
}

.bid-table > thead > tr > th.asc .dataTable-sorter::after,
.bid-table > thead > tr > th.desc .dataTable-sorter::after {
    opacity: 1;
    color: var(--bid-color);
}

.bid-table > thead > tr > th.desc .dataTable-sorter::after {
    border-bottom: 0;
    border-top: 5px solid currentColor;
}

.bid-table > thead > tr > th.asc,
.bid-table > thead > tr > th.desc {
    color: #212832;
}

/* Footer: a link to each expert's article, under that expert's column. */
.bid-table > tfoot > tr > th {
    border-top: 1px solid #e0e5ec;
    background-color: #f8fafc;
}

.bid-sources-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #69707a;
}

.bid-source-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 100%;
    background-color: var(--bid-tint);
    color: var(--bid-ink);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.bid-source-link:hover,
.bid-source-link:focus {
    background-color: var(--bid-color);
    color: #fff;
}

.bid-source-link svg {
    width: 0.85rem;
    height: 0.85rem;
}

/* --- The community votes table ----------------------------------------- */

.vote-player-name {
    font-weight: 600;
    color: #212832;
}

/* The "another player" row at the foot of the panel. The autocomplete
   stylesheet sizes its input for a full-width admin form (16px text, 12px
   padding); in a third-of-the-row card it takes the small form-control look
   of the selects beside it instead. */
#votes .vote-another td {
    border-bottom: none;
}

#votes .auto-search-wrapper input {
    font-size: 0.875rem;
    padding: 0.25rem 2rem 0.25rem 0.5rem;
    border: 1px solid #c5ccd6;
    border-radius: 0.35rem;
}

#votes .auto-search-wrapper input:focus {
    border-color: #0061f2;
}

#votes .auto-results-wrapper {
    border-color: #c5ccd6;
    border-radius: 0 0 0.35rem 0.35rem;
    font-size: 0.875rem;
    text-align: left;
}

#votes .auto-results-wrapper ul li {
    padding: 0.4rem 0.5rem;
}

#votes .auto-clear {
    width: 2rem;
}

.vote-search-meta {
    color: #69707a;
    font-size: 0.8em;
    margin-left: 0.25rem;
}

/* The link to a popular player's poll on X, under his team and position. */
.vote-x-link {
    white-space: nowrap;
}

/* --- Availability in the reader's own leagues ---------------------------- */

/* A pill after a name: Available, Taken, Yours, or "Open in 2 of 3". A
   button, since a click lists each league, but drawn as the pill it was.
   Neither colour is a position's, so it reads the same in every panel and
   every table. */
.league-mark {
    display: inline-block;
    padding: 0.15em 0.55em;
    border: 0;
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.4;
    vertical-align: middle;
    white-space: nowrap;
}

button.league-mark {
    cursor: pointer;
}

button.league-mark:focus-visible {
    outline: 2px solid #0061f2;
    outline-offset: 1px;
}

.league-available {
    background-color: #e0f5ec;
    color: #00784a;
}

.league-taken {
    background-color: #eef1f5;
    color: #69707a;
}

.league-own {
    background-color: #dde9fd;
    color: #004fc4;
}

/* Free in some leagues and not others: the amber of the WR table, which is
   the one colour on the page that already means "look closer". */
.league-mixed {
    background-color: #fdf1d6;
    color: #9a6300;
}

/* In the table with one league, the taken pill names the team, which can
   run long. */
.league-team-name {
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}

/* The popover's list: one league a line, its mark at the right. Wider
   than a popover is by default, so a league's name and the team holding
   the player sit on one line; the two-class selector is what outranks
   Bootstrap's own cap. Never wider than the screen, less a margin. */
.popover.league-popover {
    max-width: min(34rem, calc(100vw - 2rem));
}

.league-popover .popover-body {
    padding: 0.5rem 0.75rem;
}

.league-pop {
    list-style: none;
    margin: 0;
    padding: 0;
}

.league-pop li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem 1.25rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid #eef1f5;
    font-size: 0.85rem;
}

.league-pop li:last-child {
    border-bottom: 0;
}

/* The league's name never gives way to what sits beside it: the team
   name wraps or drops to its own line first. It folds itself only when
   it is wider than the whole popover. */
.league-pop-name {
    flex: 0 0 auto;
    max-width: 100%;
    font-weight: 600;
    color: #212832;
}

/* The team holding him, at the right. It wraps: on a phone the popover is
   the screen's width, and a long team name has to fold rather than run off
   the edge. The mark before it does not shrink. */
.league-pop-team {
    color: #69707a;
    font-size: 0.8rem;
    /* Room for a team name on the same line where there is any; where
       there is not, on a phone, it drops to a full-width line under the
       league and the mark rather than folding into a column. */
    flex: 1 1 12rem;
    min-width: 0;
    text-align: right;
    overflow-wrap: anywhere;
}

.league-pop li > .league-mark {
    flex: 0 0 auto;
}

/* Larger on a phone, where everything is read at arm's length and tapped
   rather than pointed at: the pills wherever they appear, and the popover,
   which has a whole screen's width to spend. */
@media (max-width: 575.98px) {
    .league-mark {
        padding: 0.25em 0.7em;
        font-size: 0.85rem;
    }

    /* The column's header keeps up with the pills under it. */
    .bid-table > thead > tr > th.bid-col-league {
        font-size: 0.85rem;
    }

    .league-pop li {
        font-size: 1rem;
        padding: 0.45rem 0;
    }

    .league-pop-team {
        font-size: 0.9rem;
    }

    /* The Column Definitions card above the tables, read the same way. Its
       list is already at the page's base size, so it goes past it. */
    .column-definitions .card-body {
        font-size: 1.1rem;
    }

    /* And the league card above it: the league names, the note under
       them and the filter's label, which are small print on a desktop. */
    .league-card .card-body {
        font-size: 1.1rem;
    }

    .league-card .small {
        font-size: 1rem;
    }

    .league-card .form-select-sm {
        font-size: 0.875rem;
    }

    /* The Your Leagues card on the account page, the same way: its prose,
       the table of connected leagues, the small print under each name, the
       form that connects one and the buttons on each row. */
    .account-leagues .card-body {
        font-size: 1.1rem;
    }

    .account-leagues .table > thead > tr > th {
        font-size: 0.85rem;
    }

    .account-leagues .small,
    .account-leagues .form-text {
        font-size: 1rem;
    }

    .account-leagues .form-control,
    .account-leagues .form-select {
        font-size: 1.1rem;
    }

    .account-leagues .btn-sm {
        font-size: 0.9rem;
    }

    .account-leagues h5 {
        font-size: 1.25rem;
    }

    /* The Connect a League form is read while typing into it, so its small
       print, the cookie names and the Connect button come all the way up
       to the card's size. */
    .account-leagues form .small,
    .account-leagues form .form-text,
    .account-leagues form .btn {
        font-size: 1.1rem;
    }

    .account-leagues form code {
        font-size: 1rem;
    }
}

/* A row whose player is on a roster in every league steps back so the wire
   stands out. */
.bid-table > tbody > tr.league-row-taken > td,
.bid-table > tbody > tr.league-row-own > td {
    color: #8a919b;
}

.bid-table > tbody > tr.league-row-taken > td .bid-player-name,
.bid-table > tbody > tr.league-row-own > td .bid-player-name {
    color: #69707a;
    font-weight: 500;
}

/* "Only show players available in ...": the rows that fail the filter. A
   class on each row rather than on the body, because which rows pass
   depends on the league chosen, and simple-datatables keeps the row
   elements themselves through a sort. */
.bid-table > tbody > tr.league-row-hidden {
    display: none;
}

.league-card {
    border-left: 4px solid #00ac69;
}

.league-picker-note {
    flex: 1 1 20rem;
}