/* rugby-styles.css v4.1.3 — shared styles for WC Rugby Desk public pages */

/* ── FONTS ─────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Barlow:wght@300;400;500;600&family=JetBrains+Mono:wght@400;600&display=swap');

/* ── COLOR TOKENS ───────────────────────────────────────────────────────── */
:root{
  --bg:#0a0c0f;
  --surface:#12151c;
  --surface2:#181c26;
  --border:#1e2433;
  --accent:#e8401c;
  --accent2:#f5a623;
  --green:#2ec27e;
  --text:#e8eaf0;
  --text2:#c8d0e0;
  --text3:#8890a8;
  --fd:'Rajdhani',sans-serif;
  --fb:'Barlow',sans-serif;
  --fm:'JetBrains Mono',monospace;

  /* ── TYPE SCALE ──────────────────────────────────────────────────────── */
  --text-xs:  11px;  /* labels, metadata, letter-spaced caps        */
  --text-sm:  13px;  /* secondary text, table data                  */
  --text-base:15px;  /* body, most UI text                          */
  --text-md:  18px;  /* player names, standings, prominent labels   */
  --text-lg:  23px;  /* section headings, score displays            */
  --text-xl:  38px;  /* large scores, keypad numbers                */

  /* ── SPACING SCALE ───────────────────────────────────────────────────── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 14px;
  --space-lg: 20px;
  --space-xl: 32px;

  /* ── BORDER RADIUS ───────────────────────────────────────────────────── */
  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:12px;

  /* ── TABLE ───────────────────────────────────────────────────────────── */
  --table-col-pad:16px; /* horizontal padding between table columns */

  /* ── STYLE GUIDE DEMO ──────────────────────────────────────────────────── */
  --swatch-size:60px; /* color swatch dimensions in style guide */
}

/* ── THEMES ─────────────────────────────────────────────────────────────── */
.theme-light{
  --bg:#f0f2f5;
  --surface:#fff;
  --surface2:#e8eaf0;
  --border:#d0d4de;
  --text:#1a1d26;
  --text2:#4a5268;
  --text3:#8890a4;
  --accent2:#b07800;
}
.theme-dusk{
  --bg:#1a0e2e;
  --surface:#231540;
  --surface2:#2d1a52;
  --border:#3d2870;
  --accent:#c084fc;
  --accent2:#f59e0b;
  --green:#34d399;
}

/* ── RESET ──────────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html,body{
  height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:var(--fb);
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
}

/* ── TOPBAR ─────────────────────────────────────────────────────────────── */
#topbar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:var(--surface);
  border-bottom:2px solid var(--accent);
  padding:0 16px;
  height:52px;
  display:flex;
  align-items:center;
  gap:12px;
  padding-top:env(safe-area-inset-top);
}
.logo{
  font-family:var(--fd);
  font-weight:900;
  font-size:20px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--text);
  white-space:nowrap;
}
.logo span{color:var(--accent)}
.logo .sub{
  font-size:9px;
  font-weight:400;
  color:var(--text3);
  letter-spacing:1px;
  margin-left:6px;
  font-family:var(--fm);
}

/* ── NAV LINKS ──────────────────────────────────────────────────────────── */
.nav-links{display:flex;gap:16px;margin-left:8px;}
.nav-links a{
  font-family:var(--fm);
  font-size:11px;
  color:var(--text3);
  text-decoration:none;
  letter-spacing:1px;
}
.nav-links a:hover,
.nav-links a.active{color:var(--accent2);}

/* ── THEME BUTTONS ──────────────────────────────────────────────────────── */
.theme-btns{display:flex;gap:4px;margin-left:auto;flex-shrink:0}
.tbtn{
  background:none;
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  color:var(--text3);
  font-size:11px;
  padding:4px 8px;
  cursor:pointer;
  font-family:var(--fm);
}
.tbtn.active,
.tbtn:hover{border-color:var(--accent2);color:var(--accent2);}

/* ══════════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM
   ══════════════════════════════════════════════════════════════════════════ */

/* ── TYPOGRAPHY ─────────────────────────────────────────────────────────── */
.t-label{
  font-family:var(--fm);font-size:var(--text-xs);
  color:var(--text3);text-transform:uppercase;letter-spacing:1.5px;
}
.t-meta{
  font-family:var(--fm);font-size:var(--text-sm);color:var(--text2);
}
.t-body{
  font-family:var(--fm);font-size:var(--text-base);color:var(--text);
}
.t-name{
  font-family:var(--fd);font-weight:700;font-size:var(--text-md);color:var(--text);
}
.t-heading{
  font-family:var(--fd);font-weight:900;font-size:var(--text-lg);color:var(--text);letter-spacing:1px;
}
.t-score{
  font-family:var(--fd);font-weight:900;font-size:var(--text-xl);color:var(--text);
}

/* ── SECTION TITLE ──────────────────────────────────────────────────────── */
.section-title{
  font-family:var(--fd);font-weight:900;font-size:var(--text-xs);
  letter-spacing:3px;text-transform:uppercase;color:var(--accent2);
  border-bottom:1px solid var(--border);padding-bottom:var(--space-sm);
  margin:0 0 var(--space-md);
}

/* ── CARDS / SURFACES ───────────────────────────────────────────────────── */
.card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:var(--space-md);
}
.card-sm{
  background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);
}

/* ── BADGES ─────────────────────────────────────────────────────────────── */
.badge{
  font-family:var(--fm);font-size:var(--text-xs);font-weight:600;
  padding:2px 7px;border-radius:var(--radius-sm);letter-spacing:0.5px;
  display:inline-block;
}
.badge-accent{background:rgba(232,64,28,0.15);color:var(--accent);border:1px solid var(--accent);}
.badge-green {background:rgba(46,194,126,0.15);color:var(--green); border:1px solid var(--green);}
.badge-warn  {background:rgba(245,166,35,0.15); color:var(--accent2);border:1px solid var(--accent2);}
.badge-muted {background:var(--surface2);color:var(--text3);border:1px solid var(--border);}

/* ── BUTTONS ────────────────────────────────────────────────────────────── */
.btn{
  font-family:var(--fd);font-weight:700;font-size:13px;
  letter-spacing:1px;text-transform:uppercase;
  padding:var(--space-sm) var(--space-md);
  border:none;border-radius:var(--radius-md);cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
  -webkit-tap-highlight-color:transparent;
}
.btn-r{background:var(--accent);color:#fff;}
.btn-s{background:var(--surface2);color:var(--text2);border:1px solid var(--border);}
.btn-g{background:var(--green);color:#fff;}
.btn-d{background:rgba(232,64,28,0.12);color:var(--accent);border:1px solid var(--accent);}
.btn-sm{padding:4px 10px;font-size:11px;}
.btn-xs{padding:3px 8px;font-size:10px;}
.btn-lg{padding:12px 20px;font-size:15px;}

/* ── FORM INPUTS ────────────────────────────────────────────────────────── */
.si{
  background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--radius-md);color:var(--text);
  font-family:var(--fd);font-size:var(--text-base);
  padding:var(--space-sm);
}
.fi{
  background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--radius-sm);color:var(--text);
  font-family:var(--fm);font-size:var(--text-sm);
  padding:3px var(--space-sm);
}

/* ── TABLE ──────────────────────────────────────────────────────────────── */
.wrd-table{width:100%;border-collapse:collapse;}
.wrd-table th{
  font-family:var(--fm);font-size:var(--text-xs);color:var(--text3);
  text-transform:uppercase;letter-spacing:1px;
  padding:var(--space-xs) var(--table-col-pad);
  border-bottom:1px solid var(--border);text-align:left;
}
.wrd-table th.r,.wrd-table td.r{text-align:right;}
.wrd-table th.c,.wrd-table td.c{text-align:center;}
.wrd-table td{
  font-family:var(--fm);font-size:var(--text-sm);color:var(--text);
  padding:var(--space-xs) var(--table-col-pad);border-bottom:1px solid var(--border);
}
.wrd-table tr:hover{background:var(--surface2);}
.wrd-table td.name-cell{
  font-family:var(--fd);font-weight:700;font-size:var(--text-base);
}

/* ── EMPTY STATE ────────────────────────────────────────────────────────── */
.empty{
  font-family:var(--fm);font-size:var(--text-sm);color:var(--text3);
  text-align:center;padding:var(--space-xl) var(--space-md);
}

/* ── ROSTER ROW ─────────────────────────────────────────────────────────── */
.roster-row{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-xs) var(--space-sm);border-bottom:1px solid var(--border);}
.roster-num{font-family:var(--fm);font-size:var(--text-sm);color:var(--text3);min-width:24px;}
.roster-name{font-family:var(--fd);font-weight:700;font-size:var(--text-base);color:var(--text);flex:1;}
.roster-class{font-family:var(--fm);font-size:var(--text-xs);background:var(--surface2);color:var(--text2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1px 6px;}
.roster-dnp{font-family:var(--fm);font-size:var(--text-xs);color:var(--accent);}

/* ── GAME ROW ───────────────────────────────────────────────────────────── */
.game-row{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--border);cursor:pointer;}
.game-row:hover{background:var(--surface2);}
.game-time{font-family:var(--fm);font-size:var(--text-xs);color:var(--text3);min-width:80px;}
.game-teams{font-family:var(--fd);font-weight:700;font-size:var(--text-base);color:var(--text);flex:1;}
.game-score{font-family:var(--fd);font-weight:900;font-size:var(--text-base);color:var(--text);text-align:right;}

/* ── TEAM COLOR TOKENS ────────────────────────────────────────────────────
   .to-a/.to-b read --color-a/--color-b, which are NOT set by this stylesheet.
   Any page using these classes must set both custom properties itself, e.g.:
     document.documentElement.style.setProperty('--color-a', <hex>);
     document.documentElement.style.setProperty('--color-b', <hex>);
   (see scoresheet2.html's updateColorVars() for a working reference).
   Without that JS, .to-a/.to-b render with no color set — not broken, just
   inert until the host page wires up its own team-color source.
   ────────────────────────────────────────────────────────────────────── */
.to-a{color:var(--color-a);}
.to-b{color:var(--color-b);}
.btn.to-a{border:1px solid var(--color-a);background:color-mix(in srgb,var(--color-a) 15%,transparent);justify-content:center;width:25%;align-self:center;}
.btn.to-b{border:1px solid var(--color-b);background:color-mix(in srgb,var(--color-b) 15%,transparent);justify-content:center;width:25%;align-self:center;}

/* ── TIMEOUT LIST ─────────────────────────────────────────────────────────
   Small numbered-slot display used for per-team, per-period timeout tracking.
   Structure: a .to-times wrapper containing repeated .t-label period headers
   followed by .to-slot-line rows (slot number + optional recorded time).
   ────────────────────────────────────────────────────────────────────── */
.to-times{font-family:var(--fm);font-size:var(--text-xs);line-height:1.6;width:25%;align-self:center;}
.to-times .t-label{margin-top:6px;display:block;}
.to-times .t-label:first-child{margin-top:0;}
.to-slot-line{display:flex;justify-content:space-between;gap:4px;}
.to-slot-num{opacity:0.55;}
.to-divider{border-top:1px solid var(--border);margin:4px 0;}
.team-timeout-block{display:flex;flex-direction:column;gap:6px;margin-top:10px;}

/* ── SHARED THEME JS ────────────────────────────────────────────────────── */
/* setTheme() must be defined inline per page; localStorage key = 'wrd-theme' */