/* HUB-TABS-V1 (2026-06-21): the shared tabbed entity-hub pattern. One look + behaviour for every
   hub page (team / club / player / league). Pill tabs that swap a sub-view in place — no reload.
   Markup contract:
     <div class="hub-tabs">
       <button class="hub-tab" data-pane="overview">Overview</button> ...
     </div>
     <div id="pane-overview" class="hub-pane"> ... </div> ...
   js/hub.js wires the clicks + URL-hash deep-linking. --hub is the per-page accent (default HKPL green). */
:root { --hub: #00913a; --hub-soft: #e6f4ec; }
.hub-tabs { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 18px; }
.hub-tab {
  padding:7px 16px; font-size:14px; font-weight:700; cursor:pointer;
  border:1px solid #e5e7eb; background:#fff; color:#6b7280; border-radius:999px;
  white-space:nowrap; transition:all .12s;
}
.hub-tab:hover { border-color:var(--hub); color:var(--hub); }
.hub-tab.on { background:var(--hub); color:#fff; border-color:var(--hub); }
.hub-pane { display:none; }
.hub-pane.on { display:block; }
/* a generic clickable row used across hubs (match rows, table rows, player chips) */
.hub-row {
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px;
  border:1px solid transparent; cursor:pointer; text-decoration:none; color:inherit;
}
.hub-row:hover { background:#f9fafb; border-color:#eef0f2; }