/* Leaderboard pages. Builds on the site's style.css (checker background, patterned tables). */

.lb-page { max-width: 1180px; margin: 0 auto; padding: 8px 12px 24px; text-align: center; }
.lb-banner img { max-width: 720px; width: 100%; border: 3px dotted #34BEED; }
.lb-nav { margin: 8px auto 14px; padding: 6px 10px; max-width: 720px; background: url(../../images/Pattern2.jpg); border: 2px solid #397dbd; font-size: 15px; font-weight: bold; }
.lb-nav a { margin: 0 8px; }
.lb-nav a.active { color: skyblue; text-decoration: underline !important; }
.lb-admin .lb-nav { max-width: 1000px; text-align: left; font-size: 13px; }
.lb-nav-right { float: right; font-weight: normal; }
.lb-nav::after { content: ""; display: block; clear: both; }

.lb-intro { max-width: 720px; margin: 0 auto 10px; font-size: 12px; line-height: 1.5; }
.lb-updated { color: #9cc9ff; }
h1.lb-title { font-size: 40px; margin: 8px 0 4px; }
h1.lb-title a { color: dodgerblue; }
.lb-cup { margin: 18px 0 4px; }
.lb-cup img { max-height: 64px; }

/* the leaderboard page itself uses the original leaderboards.html markup and the site's style.css;
   only these small additions */
.lb-wide .lb-page { max-width: none; padding-left: 0; padding-right: 0; }
.lb-wide .lb-banner, .lb-wide .lb-nav, .lb-wide .lb-intro, .lb-wide .lb-footer { max-width: 720px; }
a.lb-player { color: inherit; }
a.lb-player:hover { color: dodgerblue; }
td.lb-empty { text-align: center; color: #9cc9ff; padding: 12px; }
.rank-img { height: 25px; display: block; margin: 0 auto; }
.rank-num { font-weight: bold; color: #9cc9ff; }
.flag { vertical-align: middle; max-height: 16px; }
.flag-none { display: inline-block; width: 22px; height: 14px; border: 1px dashed #397dbd; vertical-align: middle; }
.vehicle { vertical-align: middle; max-height: 24px; }
/* the record * : gold, same size and weight as the time it follows */
.record-mark { color: gold; }

/* generic panels & tables */
.lb-panel { background: url(../../images/Pattern2.jpg); border: 2px solid #397dbd; padding: 10px 14px; margin: 10px auto; max-width: 1000px; text-align: left; }
.lb-panel h2 { margin: 0 0 8px; font-size: 16px; color: dodgerblue; border-bottom: 1px dashed #397dbd; padding-bottom: 4px; }
.lb-panel h3 { margin: 12px 0 6px; font-size: 14px; }
table.lb-table { width: 100%; }
table.lb-table th { background: #0b2440; text-align: left; white-space: nowrap; }
table.lb-table td, table.lb-table th { padding: 4px 6px; }
table.lb-table td.num, table.lb-table th.num { text-align: right; }
.muted { color: #9cc9ff; }
.small { font-size: 11px; }

/* profile */
.lb-profile-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.lb-profile-head > div { text-align: left; margin: 0; }
.lb-profile-head h1 { margin: 0; font-size: 30px; }
.lb-profile-head h1 .flag { max-height: 24px; vertical-align: middle; margin-left: 6px; position: relative; top: -2px; }
.lb-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0 0; }
.lb-stat { margin: 0; border: 1px solid #397dbd; background: rgba(0, 0, 0, 0.55); padding: 6px 8px; text-align: center; }
.lb-stat b { display: block; font-size: 20px; color: #fff; }
.lb-stat span { color: #9cc9ff; font-size: 11px; }
tr.rank-1 td.pb { color: gold; font-weight: bold; }
tr.rank-2 td.pb { color: #d8d8d8; font-weight: bold; }
tr.rank-3 td.pb { color: #d9955b; font-weight: bold; }
details.history summary { cursor: pointer; color: dodgerblue; }
details.history ol { margin: 4px 0 0 18px; padding: 0; }
.embed-code { width: 100%; box-sizing: border-box; font-family: Consolas, monospace; font-size: 11px; background: #000; color: #fff; border: 1px solid #397dbd; padding: 6px; }

/* forms (admin) */
.lb-form label { display: block; margin: 8px 0 2px; font-weight: bold; color: dodgerblue; }
.lb-form input[type=text], .lb-form input[type=password], .lb-form input[type=url], .lb-form input[type=date], .lb-form select, .lb-form textarea {
	background: #000; color: #fff; border: 1px solid #397dbd; padding: 4px 6px; font: inherit; box-sizing: border-box; max-width: 100%; }
.lb-form .row { display: flex; flex-wrap: wrap; gap: 12px; }
.lb-form .row > div { margin: 0; flex: 1 1 180px; }
.lb-form .row input, .lb-form .row select { width: 100%; }
.lb-form .hint { font-weight: normal; color: #9cc9ff; font-size: 11px; }
button, input[type=submit] { background: #000; color: #fff; border: 1px solid #397dbd; padding: 4px 12px; cursor: pointer; font: inherit; }
button:hover, input[type=submit]:hover { background: dodgerblue; color: #000; }
button.danger { border-color: #ff6b6b; color: #ff8a8a; }
button.danger:hover { background: #ff6b6b; color: #000; }
button.linkish { background: none; border: 0; color: dodgerblue; padding: 0; }
button.linkish:hover { background: none; color: #fff; }
form.inline { display: inline; }
.lb-flash { max-width: 720px; margin: 6px auto; padding: 6px 10px; border: 1px solid #397dbd; background: rgba(0, 0, 0, 0.7); color: #9cc9ff; }
.lb-flash-error { border-color: #ff6b6b; color: #ff8a8a; }
.lb-pager { margin-top: 8px; }
.lb-pager a, .lb-pager b { margin-right: 6px; }

.lb-footer { margin: 24px auto 0; max-width: 720px; background: url(../../images/Pattern2.jpg); border: 2px solid dodgerblue; padding: 6px; }

@media (max-width: 640px) {
	.lb-stats { grid-template-columns: repeat(2, 1fr); }
	h1.lb-title { font-size: 28px; }
	.lb-nav-right { float: none; display: block; margin-top: 4px; }
}

/* BKT history */
.bkt-month { color: dodgerblue; border-bottom: 1px dashed #397dbd; padding-bottom: 3px; margin: 16px 0 6px; }
.bkt { display: flex; gap: 10px; align-items: flex-start; padding: 8px; margin: 6px 0; border: 1px solid #1d3f63; background: rgba(0, 0, 0, 0.55); }
.bkt-current { border-color: gold; }
.bkt-course { width: 138px; flex: 0 0 auto; border: 1px solid #397dbd; }
.bkt-body { flex: 1; min-width: 0; margin: 0; }
.bkt-head { margin: 0 0 4px; }
.bkt-date { color: #9cc9ff; margin-right: 8px; }
.bkt-badge { display: inline-block; margin-left: 6px; padding: 0 5px; border: 1px solid gold; color: gold; font-size: 10px; }
.bkt-line { line-height: 1.8; margin: 0; }
.bkt-time { font-weight: bold; font-size: 13px; }
.bkt-gain { color: #7CFC9A; }
.bkt-note { margin: 6px 0 0; padding: 6px 8px; border-left: 2px solid dodgerblue; color: #e3efff; font-style: italic; }
@media (max-width: 640px) { .bkt { flex-direction: column; } .bkt-course { width: 100%; max-width: 276px; } }

/* sortable tables */
table.sortable th button { background: none; border: 0; padding: 0; color: inherit; font: inherit; font-weight: bold; cursor: pointer; white-space: nowrap; }
table.sortable th button:hover { color: dodgerblue; background: none; }
table.sortable th button::after { content: " \2195"; color: #3d5a78; }
table.sortable th[aria-sort="ascending"] button::after { content: " \25B2"; color: dodgerblue; }
table.sortable th[aria-sort="descending"] button::after { content: " \25BC"; color: dodgerblue; }

/* Mii portraits */
img.mii { border: 1px solid #397dbd; background: #fff; border-radius: 4px; vertical-align: middle; object-fit: cover; }
img.mii-lg { width: 96px; height: 96px; }
img.mii-sm { width: 24px; height: 24px; margin-right: 3px; }
.mii-swatch { display: inline-block; width: 10px; height: 10px; border: 1px solid #fff; vertical-align: middle; }
.mii-admin { display: flex; gap: 12px; align-items: center; }
.mii-admin > div { margin: 0; line-height: 1.9; }

/* dropdowns: readable white-on-black boxes AND open lists (the browser otherwise draws
   the options with black text on the black background) */
.lb select { background-color: #000; color: #fff; border: 1px solid #397dbd; }
.lb select option, .lb select optgroup { background-color: #000; color: #fff; }
.lb select optgroup { color: #9cc9ff; font-style: normal; }
.lb select option:checked { background-color: #1d4f86; color: #fff; }
.bkt-lasted { margin-left: 8px; color: #9cc9ff; font-size: 11px; }
.bkt-lasted b { color: #fff; }
.bkt-lasted-now b { color: gold; }
.character { vertical-align: middle; max-height: 24px; }
.character-name { font-size: 11px; color: #cfe4ff; white-space: nowrap; }

/* Public pages: panels and the nav bar exactly as wide as the footer (736px
   including its border), so everything lines up under the banner. The
   leaderboard page and the admin area keep their own widths. */
body.lb:not(.lb-admin) .lb-panel,
body.lb:not(.lb-admin) .lb-nav,
body.lb:not(.lb-admin) .lb-footer { box-sizing: border-box; max-width: 736px; }