/* Guarantees a minimum gap between navbar items -- ms-auto alone collapses to 0 once the row is full. */
.navbar > .container-fluid {
    column-gap: 0.5rem;
}

/* Light, unobtrusive per-row toggle -- pale gray until favorited/hovered (a solid star, since
   this project's Font Awesome subset doesn't ship the outline weight). */
.scoreboard .favorite-star-cell {
    text-align: center;
    padding-left: 0;
    padding-right: 0;
}

.scoreboard .favorite-star {
    cursor: pointer;
    color: #ccc;
    font-size: 0.9em;
}

.scoreboard .favorite-star:hover {
    color: #d4a017;
}

.scoreboard .favorite-star.favorited {
    color: #f0b400;
}

.scoreboard tr.favorite-row {
    background-color: rgba(240, 180, 0, 0.12);
}

/* .scoretn sets its own opaque white background (.cl_FFFFFF) per problem category color; drop it
   to transparent here so the row's own highlight shows through directly, instead of painting a
   second translucent yellow layer on top of it and coming out darker than the rest of the row. */
.scoreboard tr.favorite-row .scoretn {
    background-color: transparent;
}

/* Dimmed row for a team disqualified from this contest (0 ACs/penalty, sorted last) -- the
   grayscale + reduced opacity keeps it readable while visually distinct from a real 0-solve row. */
.scoreboard tr.disqualified-row {
    opacity: 0.55;
    filter: grayscale(60%);
}

.scoreboard tr.no-show-divider td {
    padding: 0;
    border-top: 2px solid #adb5bd;
    background-color: #f1f3f5;
}

.no-show-divider-button {
    display: block;
    width: 100%;
    padding: 6px 0;
    border: 0;
    background: transparent;
    color: #6c757d;
    font-size: 0.85em;
    cursor: pointer;
}

.no-show-divider-button:hover {
    color: #212529;
    background-color: rgba(0, 0, 0, 0.05);
}

.no-show-divider-icon {
    margin-right: 6px;
}

.disqualified-badge {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 3px;
    background-color: #c0392b;
    color: #fff;
    font-size: 0.75em;
    font-weight: 600;
    line-height: 1.4;
}

.season-debut-marker {
    line-height: 1;
    margin-right: 4px;
    cursor: help;
}

/* Brief highlight for a row landed on via a shared #team-<id> link; transitions back to normal
   as the class is removed on a timer (see scrollToTeamFromHash), rather than just vanishing. */
.scoreboard tr.team-row-target {
    background-color: rgba(13, 110, 253, 0.18);
    transition: background-color 1.5s ease;
}

.scoreboard tr.team-row-target .scoretn {
    background-color: transparent;
}

/* Outline star that fills gold once active; overrides Bootstrap's .btn.active gray fill. */
#favorites-filter i {
    color: inherit;
}

#favorites-filter[aria-pressed="true"] {
    color: #f0b400;
    border-color: #f0b400;
    background-color: #fff;
}

/* Matches the "En curso" status badge color, so an active toggle reads as "live and updating". */
#auto-refresh-toggle[aria-pressed="true"] {
    color: #198754;
    border-color: #198754;
}

#guest-filter[aria-pressed="true"] {
    color: #0d6efd;
    border-color: #0d6efd;
    background-color: #fff;
}

/* Anchors the value bubble to the slider alone, not the whole control bar, so its left%
   positioning lines up with the track underneath it. */
.time-travel-slider-wrap {
    position: relative;
}

/* Value-preview bubble shown above the slider on hover/drag -- lets a viewer aim a click at a
   specific minute instead of guessing blindly along an otherwise unlabeled track. */
.time-travel-value-bubble {
    position: absolute;
    top: 100%;
    margin-top: 4px;
    transform: translateX(-50%);
    padding: 0.1rem 0.4rem;
    background-color: #212529;
    color: #fff;
    font-size: 0.72rem;
    border-radius: 0.25rem;
    white-space: nowrap;
    pointer-events: none;
}

.scoreboard .team-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: auto;
}

.scoreboard th {
    top: 0; /* sticks to .scoreboard-scroll's own top edge, not the page's */
    padding-left: 5px;
    padding-right: 5px;
}

/* Bounds the table's own height so it scrolls on both axes within its box (a sticky header
   needs a real scrollport), rather than the whole page scrolling. Only .scoreboard-container's
   1rem top margin is left out of the height, so the box ends exactly at the viewport's bottom
   and the page itself never scrolls; the end-of-table breathing room is padding inside the box. */
/* style_domjudge.css gives body a 4em padding-bottom, which would make the page itself scroll
   past this box. */
body:has(.scoreboard-scroll) {
    padding-bottom: 0;
}

.scoreboard-scroll {
    overflow: auto;
    max-height: calc(100vh - var(--navbar-height, 4.5rem) - 1rem);
    max-height: calc(100dvh - var(--navbar-height, 4.5rem) - 1rem);
    padding-bottom: 1rem;
    -webkit-overflow-scrolling: touch;
}

.scoreboard .team-member {
    padding-left: 10px;
    font-size: 12px;
    display: flex;
    align-items: center;
    /* Members and the team-rank dot never shrink; .team-name (min-width: 0 below) is the
       one that gives up space and ellipsizes instead. */
    flex-shrink: 0;
    white-space: nowrap;
}

.scoreboard .team-rank {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    margin: 4px 8px;
    flex-shrink: 0;
}

/* table-layout: fixed switches column sizing to the <col> elements below, so .team-col (the
   only one left without a width) absorbs whatever the others don't need, instead of the table
   shrink-to-fitting and leaving blank side margins. */
.scoreboard-table {
    table-layout: fixed;
    width: 100%;
}

/* "#" (favorite-star-col + rank-col) and "Puntaje" (solved-col + penalty-col) are kept as narrow
   as their content allows -- a star glyph / rank number and a 2-digit solved count / up-to-4-digit
   penalty, respectively -- so the wider columns (team, problems) can claim the space instead. */
.scoreboard .favorite-star-col {
    width: 14px;
}

.scoreboard .rank-col {
    width: 28px;
}

/* Only present on a repechage contest's scoreboard -- see createScoreboardTable. Wide enough
   for an "R1".."R20" chip, not just a bare number. */
.scoreboard .regional-slot-col {
    width: 40px;
}

.scoreboard .regional-slot-cell {
    text-align: center;
}

/* An already-granted slot is fixed, informational -- dimmed so it reads as settled rather than
   competing for attention with a potential-slot chip. */
.scoreboard .regional-slot-actual {
    color: #999;
}

/* Shared pill styling for a Cupo-style value -- the repechage scoreboard's regional-slot
   column and the season standing's Cupo column both use it: green for a real/first-tier slot,
   yellow for an extra slot shown purely for informational purposes. */
.cupo-chip {
    display: inline-block;
    min-width: 1.6em;
    padding: 0.05em 0.45em;
    border-radius: 1em;
    font-weight: bold;
    font-size: 85%;
    line-height: 1.4;
}

.cupo-chip-green {
    background-color: #d4edda;
    color: #155724;
}

.cupo-chip-yellow {
    background-color: #fff3cd;
    color: #856404;
}

.scoreboard .country-col {
    width: 40px;
}

.scoreboard .solved-col {
    width: 24px;
}

.scoreboard .penalty-col {
    width: 38px;
}

/* style_domjudge.css's base .scoreprob rule (3.0em) is too narrow for a problem letter plus its
   tries/solve-time badge -- widen it here rather than editing the vendored file. */
.scoreboard .scoreprob {
    width: 4em;
}

/* Floor so a narrow screen doesn't compute .team-col to 0 under table-layout: fixed; the
   table grows past 100% and relies on .scoreboard-scroll's horizontal scroll instead. */
.scoreboard .team-col {
    min-width: 400px;
}

/* style_domjudge.css's base .univ rule has no text-overflow, so a long school name would
   otherwise clip mid-word with no visual cue. */
.scoreboard .univ {
    text-overflow: ellipsis;
}

.scoreboard .team-name {
    display: inline-block;
    /* The one shrinkable item in .team-container: flex-grow: 0 keeps it flush right (via
       justify-content: flex-end) instead of stretching into leftover space, only shrinking
       and ellipsizing (min-width: 0 overrides the flex default) once a long name doesn't
       fit. text-align: left keeps the ellipsis at the end, not the start. */
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.scoreboard .fas {
    padding-right: 3px;
}

.team-member.cf-unranked {
    color: rgb(0, 0, 0);
    font-weight: normal;
}
.team-member.cf-newbie {
    color: rgb(128, 128, 128);
}
.team-member.cf-pupil {
    color: rgb(0, 128, 0);
}
.team-member.cf-specialist {
    color: rgb(3, 168, 158);
}
.team-member.cf-expert {
    color: rgb(0, 0, 255);
}
.team-member.cf-candidate-master {
    color: rgb(170, 0, 170);
}
.team-member.cf-master {
    color: rgb(255, 140, 0);
}
.team-member.cf-international-master {
    color: rgb(255, 140, 0);
}
.team-member.cf-grandmaster {
    color: rgb(255, 0, 0);
}
.team-member.cf-international-grandmaster {
    color: rgb(255, 0, 0);
}
.team-member.cf-legendary-grandmaster {
    color: rgb(255, 0, 0);
}

.team-rank.cf-unranked {
}
.team-rank.cf-newbie {
    background-color: rgb(128, 128, 128);
}
.team-rank.cf-pupil {
    background-color: rgb(0, 128, 0);
}
.team-rank.cf-specialist {
    background-color: rgb(3, 168, 158);
}
.team-rank.cf-expert {
    background-color: rgb(0, 0, 255);
}
.team-rank.cf-candidate-master {
    background-color: rgb(170, 0, 170);
}
.team-rank.cf-master {
    background-color: rgb(255, 140, 0);
}
.team-rank.cf-international-master {
    background-color: rgb(255, 140, 0);
}
.team-rank.cf-grandmaster {
    background-color: rgb(255, 0, 0);
}
.team-rank.cf-international-grandmaster {
    background-color: rgb(255, 0, 0);
}
.team-rank.cf-legendary-grandmaster {
    background-color: rgb(255, 0, 0);
}

/* Base sizes are tuned for a desktop projector; on a phone people were pinch-zooming to read
   them, which breaks the sticky header (pinch-zoom panning isn't tracked like scrolling). */
@media (max-width: 767.98px) {
    .scoreboard td {
        font-size: 1rem;
    }
}

/* Favorite-team solve toasts: stacked bottom-right, above every other fixed/sticky element on
   the page (sticky header/navbar top out at 1001 above). column-reverse + appending new toasts
   at the end keeps the newest one at the bottom of the stack, growing upward as older ones pile
   up behind it. */
#solve-toast-container {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1100;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.5rem;
    width: 320px;
    pointer-events: none;
}

.solve-toast {
    pointer-events: auto;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.375rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
    overflow: hidden;
    transition: opacity 0.25s ease, transform 0.25s ease;
    opacity: 1;
    transform: translateY(0) scale(1);
}

.solve-toast.solve-toast-entering {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
}

.solve-toast.solve-toast-leaving {
    opacity: 0;
    transform: translateX(24px);
}

.solve-toast-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem;
    background-color: #f8f9fa;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 0.85rem;
}

.solve-toast-header .fa-star {
    color: #f0b400;
    font-size: 0.8em;
}

.solve-toast-team {
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: auto;
}

.solve-toast-time {
    color: #6c757d;
    font-size: 0.78rem;
}

.solve-toast-close {
    background: transparent;
    border: 0;
    color: #6c757d;
    line-height: 1;
    font-size: 0.9rem;
    padding: 0 0 0 0.25rem;
    cursor: pointer;
}

.solve-toast-close:hover {
    color: #000;
}

.solve-toast-body {
    padding: 0.5rem 0.6rem 0.6rem;
    font-size: 0.9rem;
}

.solve-toast-body .solve-toast-problem-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3em;
    height: 1.3em;
    border-radius: 0.2em;
    font-weight: bold;
    font-size: 0.85em;
    margin: 0 0.15em;
}

.solve-toast-rank {
    margin-left: 0.3rem;
    color: #1a7a3c;
    font-weight: bold;
    white-space: nowrap;
}

.solve-toast-rank .fa-arrow-trend-up {
    margin-right: 0.15rem;
}

/* Team season-history hover card: fixed-position, positioned by JS next to the hovered team
   cell. z-index above #solve-toast-container (1100) so it isn't hidden behind a toast. Hidden by
   default (opacity/pointer-events) rather than display:none, so JS can measure outerWidth()
   before the reveal to clamp its horizontal position within the viewport. */
.season-history-card {
    position: fixed;
    z-index: 1150;
    width: 340px;
    max-height: calc(100vh - 16px);
    overflow-y: auto;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.375rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.season-history-card.season-history-card-visible {
    opacity: 1;
    pointer-events: auto;
}

.season-history-loading {
    padding: 0.6rem;
    font-size: 0.85rem;
    color: #6c757d;
}

.season-history-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.2rem 0.4rem;
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.season-history-row:last-child {
    border-bottom: none;
}

.season-history-row:hover {
    background-color: #f8f9fa;
}

.season-history-contest-name {
    flex: 1 1 100%;
}

.season-history-rank {
    font-weight: bold;
    white-space: nowrap;
}

.season-history-stats {
    color: #6c757d;
    font-size: 0.78rem;
    white-space: nowrap;
}

.season-history-trend {
    font-weight: bold;
    white-space: nowrap;
}

.season-history-trend-up {
    color: #1a7a3c;
}

.season-history-trend-down {
    color: #b02a2a;
}

.season-history-trend-same {
    color: #6c757d;
}

.season-history-note {
    color: #6c757d;
    font-size: 0.8rem;
    font-style: italic;
}

/* Sits right after the last row that counts for season points (see findLastCountingRowIndex),
   not necessarily the card's last row -- a bolder top border sets it apart as a jump to the
   season-wide standing rather than one more per-contest row. */
.season-history-acumulado-link {
    font-weight: bold;
    border-top: 2px solid rgba(0, 0, 0, 0.12);
}

/* Click/tap trigger for the card -- the mobile-friendly path, since phones have no hover. Sits
   next to the team-name link rather than wrapping it, so it never intercepts that navigation. */
.season-history-trigger {
    /* .team-container is a flex row with no align-items set, so it defaults to stretch --
       without this, the icon's box stretches to the row's full height and its glyph renders
       pinned to the top instead of level with the team-name text next to it. */
    align-self: center;
    margin-left: 0.35rem;
    color: #adb5bd;
    cursor: pointer;
    font-size: 0.85em;
}

.season-history-trigger:hover,
.season-history-trigger.season-history-trigger-active {
    color: #495057;
}

.scoreboard td.stats-cell {
    text-align: left;
    padding: 6px 8px;
}