/* ============================================================
   Leaderboard-only additions on top of main.css (copied as-is from
   the course site). Colours, type and spacing come from main.css's
   tokens only — add a token there rather than a literal here.
   ============================================================ */

/* --- navbar: login / logout -------------------------------- */

.nav-auth {
    display: flex;
    align-items: center;
    margin-left: var(--s3);
}

.nav-user {
    display: inline-flex;
    align-items: center;
    gap: var(--s3);
    font-family: 'Open Sans', sans-serif;
    color: var(--ink-3);
}

.nav-user[hidden],
.btn-auth[hidden],
.nav-item[hidden] {
    display: none !important;
}

.btn-auth {
    font-family: 'Open Sans', sans-serif;
    font-size: 1rem;
    color: var(--crimson);
    background: var(--bg);
    border: 1px solid var(--crimson);
    border-radius: var(--r-sm);
    padding: 6px 16px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-auth:hover {
    color: var(--on-crimson);
    background: var(--crimson);
    text-decoration: none;
}

@media (max-width: 767px) {
    .nav-auth {
        margin: var(--s2) 0 var(--s3);
    }
}

/* --- buttons and forms ------------------------------------- */

.btn-crimson {
    font-size: 1rem;
    font-weight: 600;
    color: var(--on-crimson);
    background: var(--crimson);
    border: 1px solid var(--crimson);
    border-radius: var(--r-sm);
    padding: 8px 22px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-crimson:hover:not(:disabled) {
    background: var(--crimson-dark);
}

.btn-crimson:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.form-card {
    max-width: 560px;
    margin: var(--s5) auto 0;
    padding: var(--s6);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
}

.form-card.narrow {
    max-width: 400px;
}

.form-field {
    margin-bottom: var(--s5);
}

.form-field label {
    display: block;
    font-weight: 600;
    color: var(--ink-2);
    margin-bottom: var(--s2);
}

.form-field .hint {
    font-size: 0.9rem;
    color: var(--ink-3);
    margin-top: var(--s1);
}

.form-field input[type="text"],
.form-field input[type="password"] {
    width: 100%;
    padding: 8px var(--s3);
    font-size: 1rem;
    color: var(--ink);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
}

.form-field input:focus {
    outline: none;
    border-color: var(--crimson);
    box-shadow: 0 0 0 3px var(--crimson-100);
}

/* --- zip drop zone ----------------------------------------- */

.dropzone {
    display: block;
    padding: var(--s6) var(--s4);
    text-align: center;
    color: var(--ink-3);
    background: var(--surface);
    border: 2px dashed var(--border-strong);
    border-radius: var(--r);
    cursor: pointer;
    transition: all 0.15s ease;
}

.dropzone:hover,
.dropzone.dragover {
    color: var(--crimson);
    background: var(--crimson-050);
    border-color: var(--crimson);
}

.dropzone .dropzone-main {
    font-size: 1.05rem;
    font-weight: 600;
}

.dropzone .dropzone-file {
    margin-top: var(--s2);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.95rem;
    word-break: break-all;
}

.dropzone input[type="file"] {
    display: none;
}

/* --- status messages --------------------------------------- */

.status {
    margin-top: var(--s4);
    padding: var(--s3) var(--s4);
    border-radius: var(--r-sm);
    border: 1px solid transparent;
}

.status:empty {
    display: none;
}

.status.error {
    color: var(--crimson-dark);
    background: var(--crimson-050);
    border-color: var(--crimson-200);
}

.status.ok {
    color: var(--green);
    background: var(--green-050);
    border-color: var(--green-200);
}

.status.info {
    color: var(--ink-2);
    background: var(--surface);
    border-color: var(--border);
}

/* --- tables ------------------------------------------------ */

.board-table td.rank,
.board-table th.rank {
    width: 4.5em;
    text-align: center;
}

.board-table td.num,
.board-table th.num {
    text-align: right;
}

.board-table td.empty {
    text-align: center;
    color: var(--ink-3);
    padding: var(--s6) var(--s3);
}

.badge-pending {
    display: inline-block;
    font-size: 0.85rem;
    color: var(--amber);
    background: var(--amber-050);
    border: 1px solid var(--amber-200);
    border-radius: 999px;
    padding: 1px 10px;
}

.board-note {
    text-align: center;
    color: var(--ink-3);
    margin-top: var(--s3);
}

/* --- leaderboard card (layout after cachecompetition.com/leaderboard) --- */

:root {
    /* medal colours for ranks 1-3 */
    --gold: #C7932E;
    --silver: #7C7C82;
    --bronze: #AD6B45;
}

.board-card {
    margin-top: var(--s6);
    padding: 28px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 12px 38px rgba(20, 22, 26, 0.10);
}

.board-card .board-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 var(--s4);
}

.board-card .board-refreshed {
    color: var(--ink-3);
    margin: 0 0 var(--s5);
}

table.board {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

table.board th,
table.board td {
    padding: var(--s4);
    text-align: left;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

table.board td:nth-child(2) {
    white-space: normal;   /* long names wrap; everything else stays on one line */
}

table.board th {
    background: var(--crimson-050);
    color: var(--ink);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

table.board tbody tr:hover td {
    background: var(--surface);
}

table.board td.empty {
    text-align: center;
    color: var(--ink-3);
    padding: var(--s6) var(--s4);
}

.board-rank {
    font-weight: 700;
    color: var(--crimson);
}

.board-rank.rank-1 { color: var(--gold); }
.board-rank.rank-2 { color: var(--silver); }
.board-rank.rank-3 { color: var(--bronze); }
.board-rank.pending { color: var(--ink-4); }

.board-score {
    font-weight: 700;
    font-size: 1.05rem;
}

.board-card .board-note {
    text-align: left;
    margin: var(--s4) 0 0;
}

@media (max-width: 575px) {
    .board-card {
        padding: var(--s4);
    }

    .board-card .board-title {
        font-size: 24px;
    }
}

/* main.css frames every .table-responsive; inside the card the card is the frame */
.board-card .table-responsive {
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* the logged-in person's own best, below the top 10 */
table.board tr.board-me-label td {
    padding: var(--s5) var(--s4) var(--s2);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--crimson);
    border-bottom: 2px solid var(--crimson-200);
    background: var(--bg) !important;
}

table.board tr.board-me td {
    background: var(--crimson-050);
}

table.board tr.board-me:hover td {
    background: var(--crimson-100);
}

/* --- grading results --------------------------------------- */

.of {
    color: var(--ink-3);
    font-weight: 400;
}

.muted {
    color: var(--ink-4);
}

.badge-status {
    display: inline-block;
    font-size: 0.85rem;
    border-radius: 999px;
    padding: 1px 10px;
    border: 1px solid;
}

.badge-queued { color: var(--ink-3); background: var(--surface); border-color: var(--border); }
.badge-running { color: var(--blue); background: var(--blue-050); border-color: var(--blue-200); }
.badge-error { color: var(--crimson-dark); background: var(--crimson-050); border-color: var(--crimson-200); }

.btn-tasks {
    font-size: 0.9rem;
    color: var(--crimson);
    background: var(--bg);
    border: 1px solid var(--crimson-200);
    border-radius: var(--r-sm);
    padding: 2px 10px;
    white-space: nowrap;
    cursor: pointer;
}

.btn-tasks:hover {
    background: var(--crimson-050);
}

.history-table tr.detail-row > td {
    background: var(--surface);
    padding: var(--s3) var(--s4);
}

.grade-error {
    margin: 0;
    white-space: pre-wrap;
    font-family: var(--font-mono);
    font-size: 0.85rem;
}

table.task-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg);
    font-variant-numeric: tabular-nums;
}

table.task-table th,
table.task-table td {
    padding: 6px var(--s3);
    border-bottom: 1px solid var(--border);
    text-align: left;
}

table.task-table th {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-3);
}

table.task-table .num {
    text-align: right;
}

.ok-mark { color: var(--green); font-weight: 700; }
.no-mark { color: var(--ink-4); }
.task-table .reason { color: var(--ink-3); font-size: 0.92em; }

.form-field input[type="number"] {
    width: 10em;
    padding: 8px var(--s3);
    font-size: 1rem;
    color: var(--ink);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-sm);
}

.form-field label .optional {
    font-weight: 400;
    color: var(--ink-3);
}