/*
 * Statistics pages: only what is specific to them. Layout, navbar, banner, colours and fonts
 * come from the shared stylesheet (/shared/site.css).
 */
:root {
  --st-head: #1f5f3a;      /* dense tables: dark green header, white text */
  --st-head-hover: #27744a;
  --st-sorted: #fbf1d2;    /* highlighted (sorted) column: gold tint */
  --st-line: #e6dfcd;
  --win: #dff0e2;
  --pay: #fbe3e3;
  --self: #fbf1d2;
}

.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 16px; border-radius: 8px; border: 1px solid var(--st-line); }
table.stats, table.heat, table.hist, table.scores, table.details {
  width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; line-height: 1.5; color: #3b463f; background: #fff;
}
table.stats th, table.stats td, table.heat th, table.heat td, table.hist th, table.hist td,
table.scores th, table.scores td, table.details th, table.details td {
  padding: 5px 8px; border-bottom: 1px solid var(--st-line); border-right: 1px solid #f1ece0; text-align: left; white-space: nowrap; vertical-align: middle;
}
table.stats thead th, table.heat thead th, table.hist thead th, table.scores thead th, table.details thead th {
  background: var(--st-head); color: #fff; font: 700 11px/1.35 Montserrat, Lato, sans-serif; letter-spacing: .06em; text-transform: uppercase;
  vertical-align: bottom; position: sticky; top: 0; z-index: 1; border-right-color: rgba(255, 255, 255, .12); border-bottom: 0;
}
table.stats thead th { white-space: normal; min-width: 4em; }
table.stats td, table.details td { text-align: right; }
table.stats td:first-child, table.details th { text-align: left; font-weight: 700; color: #1f2a24; }
table.stats tbody tr:nth-child(even) td, table.details tbody tr:nth-child(even) td, table.details tbody tr:nth-child(even) th,
table.heat tbody tr:nth-child(even) td, table.heat tbody tr:nth-child(even) th { background: #fbf9f3; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { background: var(--st-head-hover); }
th.sortable::after { content: " \2195"; color: rgba(255, 255, 255, .55); font-size: .9em; }
th.sorted-asc::after { content: " \25B2"; color: #e8b53a; }
th.sorted-desc::after { content: " \25BC"; color: #e8b53a; }
th.sorted-asc, th.sorted-desc { background: #163f27; }
table.stats tbody tr:hover td { background: #e4f0e6; }
table.stats td.sorted { background: var(--st-sorted) !important; color: #1f2a24; font-weight: 700; }
abbr[title] { text-decoration: underline dotted; text-decoration-color: rgba(255, 255, 255, .6); cursor: help; }

details { margin: 12px 0; }
details > summary { cursor: pointer; color: #1f5f3a; font-weight: 700; margin: 6px 0; }
details > summary:hover { color: #c1272d; }
details[open] > summary { margin-bottom: 12px; }

.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.tabs button {
  font: 700 11px/1.4 Montserrat, Lato, sans-serif; letter-spacing: .14em; text-transform: uppercase;
  padding: 8px 18px; border: 1px solid #d9cfb3; border-bottom-width: 3px; border-radius: 6px; background: #f5efe0; color: #1f2a24; cursor: pointer;
}
.tabs button:hover { background: #fff; color: #c1272d; }
.tabs button[aria-selected="true"] { background: #1f5f3a; color: #fff; border-color: #163f27; }
.chart-box { position: relative; height: 460px; background: #fff; border: 1px solid var(--st-line); border-radius: 8px; padding: 12px; }
@media (max-width: 640px) { .chart-box { height: 340px; padding: 4px; } }

table.heat td { text-align: center; min-width: 2.6em; }
table.heat th.rot { text-align: left; font-weight: 400; color: #1f2a24; background: #fff; }

table.hist td { text-align: left; vertical-align: top; white-space: normal; min-width: 7.5em; color: #74807a; font-size: 12px; line-height: 1.4; }
table.hist td b { color: #1f2a24; font-size: 13px; }
table.hist td.r { white-space: nowrap; color: #1f2a24; font-size: 13px; font-weight: 700; background: #fbf9f3; }
table.hist i { display: none; font-style: normal; font-size: 11px; }
table.hist.more i { display: block; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; margin-bottom: 12px; }
.toolbar label { font: 400 15px/1.5 Lato, sans-serif; text-transform: none; letter-spacing: 0; color: #3b463f; margin: 0; }
input[type=search] { padding: 8px 12px; border: 1px solid #d9cfb3; border-radius: 8px; font: inherit; min-width: 15em; background: #fff; }
input[type=search]:focus { border-color: #6caf76; outline: 0; box-shadow: 0 0 0 4px rgba(108, 175, 118, .25); }

table.scores td { text-align: right; }
table.scores td.win { background: var(--win); font-weight: 700; color: #1f2a24; }
table.scores td.self { background: var(--self); font-weight: 700; color: #1f2a24; }
table.scores td.pay { background: var(--pay); }
table.scores td.out { color: #bbb; }
table.scores td.fans { text-align: left; white-space: normal; color: #74807a; font-size: 12px; min-width: 14em; }
table.scores tbody th { color: #1f5f3a; font-weight: 700; background: #fbf9f3; }
table.scores tr.wind-start td, table.scores tr.wind-start th { border-top: 2px solid #6caf76; }
table.scores tfoot td, table.scores tfoot th { font-weight: 700; background: #f5efe0; color: #1f2a24; }

.msg { padding: 14px 18px; border-radius: 8px; margin: 10px 0 20px; border: 1px solid transparent; border-left-width: 5px; }
.msg.ok { color: #245b2f; background: #e6f3e8; border-color: #bcdcc2; border-left-color: #6caf76; }
.msg.err { color: #8f1a1f; background: #fbe9e9; border-color: #efc4c4; border-left-color: #c1272d; }
form.upload { display: grid; gap: 14px; max-width: 34em; margin: 22px 0; }
form.upload input[type=file] { display: block; margin-top: 8px; font: 400 15px Lato, sans-serif; text-transform: none; letter-spacing: 0; }
form.upload button { justify-self: start; }