/* Minimal, clean styling */
:root { --accent: #2563eb; --accent-dark: #1d4ed8; --ink: #111827; --muted: #64748b; --line: #e2e8f0; --surface: #fff; --surface-soft: #f8fafc; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: #f8fafc; color: var(--ink); }
.wrap { max-width: 1080px; margin: 0 auto; padding: 18px; }
.topbar { border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); position: sticky; top: 0; z-index: 20; backdrop-filter: blur(10px); }
.brand a { text-decoration: none; color: var(--ink); font-weight: 750; letter-spacing: -.01em; }
.nav { display: flex; gap: 12px; align-items: center; }
.nav a { text-decoration: none; color: #475569; padding: 7px 10px; border-radius: 8px; transition: background .15s ease, color .15s ease; }
.nav a:hover, .nav a.active { background: #eff6ff; color: var(--accent-dark); }
.nav-right { margin-left: auto; }
h1 { margin: 18px 0 16px; font-size: 30px; letter-spacing: -.025em; }
h2 { margin: 10px 0 10px; }
h3 { margin: 14px 0 10px; }
.card { border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: var(--surface); box-shadow: 0 5px 18px rgba(15,23,42,.04); }
.grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .grid { grid-template-columns: 1.2fr 0.8fr; } }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 11px 9px; border-bottom: 1px solid #eef2f7; vertical-align: top; }
tbody tr:hover { background: #f8fafc; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); white-space: nowrap; }
.badge { display: inline-block; padding: 4px 9px; border-radius: 999px; background: #eff6ff; color: var(--accent-dark); font-size: 12px; }
.small { color: var(--muted); font-size: 14px; }
.form-row { margin-bottom: 12px; }
label { display:block; font-size: 13px; color:#334155; margin-bottom: 6px; font-weight: 600; }
input[type="text"], input[type="password"], input[type="date"], textarea, select {
  width: 100%; padding: 10px 11px; border-radius: 10px; border: 1px solid #cbd5e1; background: #fff;
}
textarea { min-height: 90px; }
.btn { display:inline-block; padding: 9px 12px; border-radius: 9px; border: 1px solid #cbd5e1; background:#fff; text-decoration:none; color:#1e293b; cursor:pointer; transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease; }
.btn:hover { background:#f8fafc; border-color:#94a3b8; transform: translateY(-1px); }
.btn-primary { border-color:var(--accent); background:var(--accent); color:#fff; }
.btn-primary:hover { border-color:var(--accent-dark); background:var(--accent-dark); color:#fff; }
.btn-danger { border-color:#a00; background:#fff; color:#a00; }
.btn-danger:hover { background:#fff0f0; }
.actions { display:flex; gap:10px; flex-wrap: wrap; align-items:center; }
.footer { padding-top: 18px; padding-bottom: 40px; color:#666; }
.notice { padding: 10px 12px; border-radius: 12px; background:#fffbe6; border:1px solid #f0e6a0; }
.error { padding: 10px 12px; border-radius: 12px; background:#fff0f0; border:1px solid #f0b0b0; }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(37,99,235,.28); outline-offset: 2px; }
.card:has(table) { overflow-x: auto; }
.card.standings-card { overflow-x: visible; }
.standings-table { table-layout: auto; }
.mobile-table-hint { display: none; }
.column-info-header { position: relative; }
.column-info-trigger { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: help; }
.column-info-trigger:hover, .column-info-trigger:focus-visible { color: var(--accent-dark); }
.column-info-popover { position: fixed; z-index: 100; top: 0; left: 0; width: 260px; max-height: min(60vh, 260px); overflow-y: auto; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 8px; background: #1e293b; color: #fff; font-size: 12px; font-weight: 400; line-height: 1.35; letter-spacing: normal; text-align: left; text-transform: none; white-space: normal; overflow-wrap: break-word; opacity: 0; visibility: hidden; pointer-events: none; transform: none; transition: opacity .15s ease, visibility .15s ease; }
.column-info-header > .column-info-popover { display: none; }
.column-info-popover.is-visible { opacity: 1; visibility: visible; pointer-events: none; }
.latest-event-card { align-self: start; }
.latest-event-card h2 { margin-top: 0; padding-bottom: 10px; border-bottom: 1px solid #eee; }
.latest-event-date { margin: 16px 0 12px; font-size: 18px; }
.latest-event-notes { margin: 0 0 18px; padding: 10px 12px; border-left: 3px solid #ddd; background: #fafafa; border-radius: 0 8px 8px 0; }
.latest-event-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.latest-event-actions .btn { box-sizing: border-box; width: 100%; padding: 9px 10px; text-align: center; }
@media (max-width: 420px) { .latest-event-actions { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .nav { gap: 4px; } .nav a { padding: 7px 8px; font-size: 14px; } .wrap { padding: 14px; } .card { padding: 14px; } }
@media (max-width: 700px) {
  .standings-card { overflow-x: auto; }
  .standings-table { min-width: 980px; }
  .standings-table th, .standings-table td { padding: 9px 7px; font-size: 12px; white-space: nowrap; }
  .standings-table th { font-size: 10px; letter-spacing: .03em; }
  .standings-table th, .standings-table td { position: relative; }
  .standings-table th { position: sticky; top: 0; z-index: 2; background: var(--surface); }
  .standings-table th:nth-child(1), .standings-table td:nth-child(1) { position: sticky; left: 0; width: 42px; min-width: 42px; background: var(--surface); z-index: 4; }
  .standings-table th:nth-child(2), .standings-table td:nth-child(2) { position: sticky; left: 42px; width: 150px; min-width: 150px; background: var(--surface); z-index: 4; }
  .standings-table th:nth-child(1), .standings-table th:nth-child(2) { z-index: 5; }
  .mobile-table-hint { display: block; margin: 0 0 10px; color: var(--muted); font-size: 12px; }
  .column-info-trigger { cursor: pointer; }
}