/* ==========================================================================
   Transfers
   ========================================================================== */

/* The shortlist above the market (#580): balance, marked players, and what is
   left over once they are all bought. */
.watchlist__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.watchlist__list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.watchlist__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* The price is pushed to the far right so the column of deductions lines up
   under one another and above the summary. */
.watchlist__price {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

.watchlist__team {
    font-size: 0.85rem;
}

.watchlist__remove {
    padding: 0;
    line-height: 1;
}

.watchlist__summary {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--bs-border-color);
    font-variant-numeric: tabular-nums;
}

/* Buy and star sit side by side in the market's action column. */
.market-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    justify-content: flex-end;
}

.market-watch-btn {
    padding: 0.25rem 0.4rem;
    line-height: 1;
    /* An unmarked star is an outline in the body colour, not a link blue. */
    color: var(--bs-body-color);
    text-decoration: none;
}

.market-watch-btn:hover {
    color: var(--bs-warning);
}

/* The clear button sits at the far end of the shortlist header. */
.watchlist__clear {
    margin-left: auto;
}

/* The returned scout's shortlist shows each candidate as a portrait above his
   name (#466). The portrait is filled in async, so the box keeps its height
   from the start and the cards do not jump once the SVGs arrive. */
.scout-candidate__portrait {
    display: flex;
    justify-content: center;
    min-height: 117px;
    margin-bottom: 0.5rem;
}