/* THEME */
:root{
  --card:#ffffff;
  --bg:#f6f7f8;
  --text:#111;
  --muted:#6b7280;

  --accent:#006B3C;
  --accent-2:#88C999;

  --line:#e6e9ee;                 /* refined border */
  --surface:#ffffff;
  --surface-2:#f8fafb;            /* subtle header surface */
  --surface-3:#f1f4f7;            /* pill surface */
  --tint:rgba(0,107,60,.06);      /* hover tint */

  --shadow-sm:0 1px 2px rgba(16,24,40,.06);
  --shadow-md:0 10px 30px rgba(16,24,40,.10);
}

/* A11y-only label */
.sr-only {
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Controls container stays tidy */
.controls.card { 
  display:flex; align-items:center; gap:8px; 
}

/* Pretty SELECT (status / team) */
.pretty-select {
  position:relative; flex:1;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--line);
  overflow:hidden;
}
.pretty-select select {
  -moz-appearance:none;
  -webkit-appearance:none;
  appearance:none;
  border:0; outline:0; background:transparent;
  width:100%;
  padding:.65rem 2.2rem .65rem .9rem;
  font-size:1rem; line-height:1.2;
}
.pretty-select::after {
  content:"";
  position:absolute; right:.8rem; top:50%; transform:translateY(-50%) rotate(45deg);
  border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);
  pointer-events:none;
}

/* Pretty INPUT (date) to match the SELECT look */
.pretty-input {
  position:relative; flex:1;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--line);
  overflow:hidden;
}
.pretty-input input[type="date"] {
  border:0; outline:0; background:transparent;
  width:100%;
  padding:.65rem 2.2rem .65rem .9rem;
  font-size:1rem; line-height:1.2;
}




/* Improve font rendering sharpness */
.sharecard, .sc-table-standings td, .sc-table-standings th {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
  
  
/* If I use a darker toolbar, I can add a .toolbar-dark parent and mirror colors:
.toolbar-dark .pretty-select, .toolbar-dark .pretty-input { background:#111; border-color:#222; }
.toolbar-dark .pretty-select select, .toolbar-dark .pretty-input input { color:#fff; }
.toolbar-dark .pretty-select::after { border-color:#bbb; }
*/

/* ===== Safe dead-space reclaim (sides) ===== */
@media (max-width:880px){
  body {               /* was 60px 10px 10px; override slightly */
    margin:60px 8px 10px;
  }
  .card {              /* a touch tighter on mobile */
    padding:10px;      /* already apply 10px below; keep it consistent */
  }
}

  
*{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  -moz-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  /* keep your new margins */
  margin:70px 12px 20px;
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased;
}
h1{ margin:0; font-weight:800; font-size:20px; }
h2{ margin:0 0 8px; font-size:16px; }
.sm-muted{ color:#6b7280; font-size:12px; }

/* Competition (mobile) alignment */
td.rcol, th.rcol { vertical-align: middle; }      /* center R vertically */
td.vcol, th.vcol { text-align: center; vertical-align: middle; }  /* center Venue */
td.dcol, th.dcol,
td.tcol, th.tcol { text-align: left; }            /* Date/Time left */
  
/* Header */
.header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.2) blur(8px);
  border-bottom:1px solid rgba(16,24,40,.08);
}
.header::before{ content:""; display:block; height:4px; background:var(--accent); }
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:nowrap;
  gap:12px; padding:10px 16px; max-width:1100px; margin:0 auto;
}
.brand{
  flex:1 1 auto;
  min-width:0;
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color:inherit;
}
.brand img{ width:20px; height:20px; }
.navtabs{ display:flex; gap:8px; align-items:center; }
.navtab{
  padding:8px 12px;
  border-radius:999px;
  background:var(--surface-3);
  cursor:pointer;
  font-weight:700;
  border:1px solid rgba(16,24,40,.06);
}
.navtab:hover{ background:var(--surface-2); }
.navtab.active{ background:var(--accent); color:#fff; border-color:var(--accent); }

.brand{ min-width:0; }                 /* allow shrink inside flex */
.brand h1{
  white-space:nowrap;                  /* force single line */
  overflow:hidden;
  text-overflow:ellipsis;              /* safety on tiny widths */
}

/* Burger / offcanvas */
.burger{ display:none; background:none; border:none; font-size:20px; padding:8px; }
.offcanvas{ position:fixed; inset:0 0 0 auto; width:80%; max-width:320px; background:#fff; box-shadow:-10px 0 24px rgba(0,0,0,.12); transform:translateX(100%); transition:transform .25s ease; z-index:120; }
.offcanvas.open{ transform:translateX(0); }
.offcanvas .oc-head{ padding:14px 16px; font-weight:800; border-bottom:1px solid var(--line); }
.offcanvas .oc-body{ padding:10px; display:flex; flex-direction:column; gap:8px; }

.offcanvas .oc-link{
  padding:10px 12px;
  border-radius:12px;
  background:#f6f7f8;
  cursor:pointer;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.offcanvas .oc-badge{
  font-size:12px;
  padding:2px 8px;
  border-radius:999px;
  background:rgba(0,107,60,.12);
  color:var(--accent);
  font-weight:800;
}

.offcanvas .oc-link.oc-archive{
  background:#f2fbf5;
}

.oc-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.25); opacity:0; pointer-events:none; transition:opacity .2s; z-index:110; }
.oc-backdrop.show{ opacity:1; pointer-events:auto; }

/* Cards & sections */
.card{
  background:var(--surface);
  border-radius:18px;
  border:1px solid rgba(16,24,40,.06);
  box-shadow:var(--shadow-sm);
  padding:14px;
  max-width:1100px;
  margin:0 auto;
}
.section-tabs{ display:flex; gap:10px; margin:6px 0 12px; flex-wrap:wrap; }
.section-tabs .seg{
  padding:9px 14px;
  border-radius:999px;
  background:var(--surface-3);
  cursor:pointer;
  font-weight:800;
  border:1px solid rgba(16,24,40,.06);
}
.section-tabs .seg:hover{ background:var(--surface-2); }
.section-tabs .seg.active{ background:var(--accent); color:#fff; border-color:var(--accent); }

/* View tabs must stay on one row */
.section-tabs.view-tabs{
  flex-wrap:nowrap;
  gap:6px;
}

/* Keep pills compact so they fit */
.section-tabs.view-tabs .seg.vt{
  flex:0 0 auto;
  white-space:nowrap;
  padding:8px 10px;
}

/* Let Championship expand into remaining space */
.section-tabs.view-tabs #comp-tab{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}



/* Competition dropdown */
.menu{
  position:absolute;
  min-width:280px;
  background:var(--surface);
  border:1px solid rgba(16,24,40,.10);
  border-radius:12px;
  box-shadow:var(--shadow-md);
  padding:6px;
  display:none;
  max-height:60vh;
  overflow:auto;
  z-index:130;
}
.menu.open{ display:block; }
.menu .item{ padding:12px 14px; border-radius:10px; cursor:pointer; font-weight:700; }
.menu .item:hover,.menu .item.active{ background:var(--tint); }

/* Selected label */
.comp-selected{ margin:8px 0 10px; font-weight:800; font-size:15px; color:#1f2937; }

/* Always reserve ~two lines for the competition header text */
#comp-selected{
  display:block;
  white-space:normal;   /* allow wrapping */
  line-height:1.2em;
  min-height:2.4em;     /* 2 × line-height */
  overflow:hidden;      /* prevents layout jump if very long */
}
  
/* Share bar */
.sharebar{ display:flex; align-items:center; gap:8px; margin:12px 0 0; }
.sharebar .spacer{ flex:1; }
.iconbtn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 10px; border-radius:10px; border:1px solid var(--line); background:#fff; cursor:pointer; font-weight:700; font-size:13px; }
.iconbtn i{ font-size:14px; }

.iconbtn[data-role="copy"],
.iconbtn[data-role="share"]{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}

.iconbtn[data-role="copy"]:hover,
.iconbtn[data-role="share"]:hover{
  filter:brightness(1.05);
}

.iconbtn[data-role="copy"] i,
.iconbtn[data-role="share"] i{
  color:#fff;
}

/* =========================================================
   TABLES + MATCH ROWS (single source of truth)
   ========================================================= */

.table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:14px;
  border:1px solid rgba(16,24,40,.10);
  background:var(--surface);
  min-width:0;
  box-shadow:var(--shadow-sm);
}

/* Default table sizing */
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;
}

thead th{
  position:sticky;
  top:0;
  z-index:1;
  background:var(--surface-2);
  border-bottom:1px solid rgba(16,24,40,.10);
  color:#1f2937;
  font-size:13px;
  font-weight:800;
  text-align:left;
  padding:12px 12px;
  white-space:nowrap;
}

tbody td{
  padding:12px 12px;
  border-bottom:1px solid var(--line);
  font-size:14px;
  line-height:1.25;
  vertical-align:middle;
  word-break:normal;
  overflow-wrap:normal;
}

/* zebra + hover: micro-depth, not “big cards” */
tbody tr:nth-child(even) td{ background:#fbfcfd; }
tbody tr:hover td{ background:var(--tint); }

/* Column helpers */
td.right, th.right{ text-align:right; }
td.rcol, th.rcol{ text-align:center; vertical-align:middle; }
td.vcol, th.vcol{ text-align:center; vertical-align:middle; }
td.dcol, th.dcol{ text-align:left; }
td.tcol, th.tcol{ text-align:left; }

/* Match block (dense, centred) */
td.match, th.match{ text-align:center; }
.match-block{
  display:grid;
  grid-template-rows:auto auto auto;
  row-gap:3px;
  justify-items:center;
}
.match-team{ display:block; line-height:1.15; }

/* Score pill */
.match-score{
  display:inline-block;
  padding:2px 10px;
  border-radius:999px;
  background:#e6f4ea;
  color:var(--accent);
  font-weight:800;
  font-size:13px;
  line-height:1.2;
  letter-spacing:.2px;
  white-space:nowrap;
}

/* Meta line (team/date views) */
.match-meta{
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
}

/* Status badge */
.status-badge{
  display:inline-block;
  padding:3px 8px;
  border-radius:999px;
  font-weight:700;
  font-size:12px;
  background:#f3f4f6;
  color:#111;
}
.status-badge.status-Result,
.status-badge.status-final,
.status-badge.status-Final{
  background:#e8f5e9;
}
.status-badge.status-Fixture{
  background:#eef2ff;
}

/* =========================================================
   MOBILE TABLE LAYOUT (single, consistent rule-set)
   ========================================================= */
@media (max-width:880px){

  body{ margin:60px 8px 10px; }
  .card{ padding:10px; }

  .navtabs{ display:none; }
  .burger{ display:inline-block; }

  thead th, tbody td{
    padding:9px 6px;
    font-size:13px;
  }

  /* force match tables to behave */
  #g-table, #team-table, #date-table{ table-layout:fixed; width:100%; }

  /* R */
  #g-table thead th:nth-child(1),  #g-table tbody td:nth-child(1),
  #team-table thead th:nth-child(1),#team-table tbody td:nth-child(1),
  #date-table thead th:nth-child(1),#date-table tbody td:nth-child(1){
    width:2.0rem;
    text-align:center !important;
    vertical-align:middle !important;
    white-space:nowrap;
  }

  /* Date/Time column */
  #g-table thead th:nth-child(2),  #g-table tbody td:nth-child(2),
  #team-table thead th:nth-child(2),#team-table tbody td:nth-child(2),
  #date-table thead th:nth-child(2),#date-table tbody td:nth-child(2){
    width:4.8rem;
    text-align:center !important;
    vertical-align:middle !important;
  }

  /* Venue */
  #g-table thead th:nth-child(4),  #g-table tbody td:nth-child(4),
  #team-table thead th:nth-child(4),#team-table tbody td:nth-child(4),
  #date-table thead th:nth-child(4),#date-table tbody td:nth-child(4){
    width:27%;
    text-align:center !important;
    vertical-align:middle !important;
  }

  /* 3-line Date/Time stack */
  .dt3{
    display:grid;
    grid-auto-rows:min-content;
    row-gap:2px;
    justify-items:center;
    line-height:1.05;
  }
  .dt3 .dt-day{ font-weight:800; }
  .dt3 .dt-date,
  .dt3 .dt-time{ font-variant-numeric:tabular-nums; }

  .match-score{ font-size:12.5px; }
}

@media (max-width:360px){
  .card{ padding:8px; }
  thead th, tbody td{ padding:7px 5px; }
}

/* =========================================================
   CONTROLS (status/team/date) – keep tidy + app-like focus
   ========================================================= */
.controls.card{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  box-shadow:none;
  border-radius:12px;
  border:1px solid var(--line);
}

.pretty-select,
.pretty-input{
  flex:1 1 260px;
  min-width:0;
  max-width:360px;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
}
.pretty-select:focus-within,
.pretty-input:focus-within{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(0,107,60,.12);
}

.pretty-input{
  position:relative;
}

.pretty-input input[type="date"]{
  height:44px;
  font-size:15px;
  padding-right:1.1rem; /* no fake chevron now */
  font-variant-numeric:tabular-nums;
}

/* Date: keep ONE icon (native calendar), subtle */
.pretty-input input[type="date"]::-webkit-calendar-picker-indicator{
  opacity:.65;
  cursor:pointer;
}

/* WebKit cleanup */
.pretty-input input[type="date"]::-webkit-inner-spin-button,
.pretty-input input[type="date"]::-webkit-clear-button{
  display:none;
}

/* Invisible tap target over the input (keeps it clean) */
.date-open{
  position:absolute;
  inset:0;
  border:0;
  background:transparent;
  cursor:pointer;
  pointer-events:none;  /* do NOT block the input */
}

/* =========================================================
   COMPETITION HOME LIST
   ========================================================= */
.comp-list{ padding:6px 2px; }

.comp-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 12px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--card);
  margin-bottom:8px;
  cursor:pointer;
  position:relative;
  overflow:hidden;
}
.comp-row::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:3px;
  background:var(--accent);
  opacity:.95;
}
.comp-row .left{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.comp-row .title{ font-weight:800; line-height:1.15; }
.comp-row .sub{
  color:var(--muted);
  font-size:13px;
  line-height:1.25;
  white-space:normal;
}
.comp-row .chev{ color:var(--muted); }

/* Competition home mode */
body.comp-home .matches-wrap,
body.comp-home #g-standings,
body.comp-home #table-footnote,
body.comp-home #sharebar-comp{
  display:none !important;
}

/* Default: standings visible unless comp-home */
#g-standings { display:block; }
#table-footnote { display:block; }

/* =========================================================
   STANDINGS (in-page only; modal disabled)
   ========================================================= */

/* Modal is not used */
#standings-modal{ display:none !important; }

/* Standings table defaults */
#g-standings-table{
  width:100%;
  table-layout:fixed;
}

#g-standings-table thead th,
#g-standings-table tbody td{
  font-variant-numeric:tabular-nums;
}

/* Alignment: Team left, all numeric right */
#g-standings-table th:first-child,
#g-standings-table td:first-child{
  text-align:left;
  white-space:normal;
  overflow-wrap:anywhere;
}

/* Default Team width (desktop/tablet) */
#g-standings-table th:first-child,
#g-standings-table td:first-child{
  width:56%;
}

#g-standings-table th:not(:first-child),
#g-standings-table td:not(:first-child){
  text-align:right;
  white-space:nowrap;
  padding-left:6px;
  padding-right:6px;
}

/* Mobile: narrow Team so PF/PA/PD have space */
@media (max-width:880px){
  #g-standings-table{
    table-layout:fixed;
  }

  #g-standings-table thead th,
  #g-standings-table tbody td{
    padding:8px 4px;
    font-size:13px;
  }

  #g-standings-table th:first-child,
  #g-standings-table td:first-child{
    width:40%;
  }

  /* numeric columns share remaining width */
  #g-standings-table th:not(:first-child),
  #g-standings-table td:not(:first-child){
    width:7.5%;
  }
}

/* Very small screens: allow scroll rather than cramp */
@media (max-width:360px){
  #g-standings-table{
    table-layout:auto;
    min-width:420px;
  }
}

/* Hide standings expand button (if present) */
#standings-expand,
.standings-expand,
.iconbtn[data-role="standings-expand"]{
  display:none !important;
}

/* Standings: compact numeric columns so everything fits */
#g-standings-table{
  table-layout:fixed;
  width:100%;
}

#g-standings-table thead th,
#g-standings-table tbody td{
  padding:8px 4px;
  font-size:13px;
}

/* Team column gets flexible width */
#g-standings-table th:first-child,
#g-standings-table td:first-child{
  width:auto;
  min-width:0;
  white-space:normal;
  overflow-wrap:anywhere;
}

/* All numeric columns tighter */
#g-standings-table th:not(:first-child),
#g-standings-table td:not(:first-child){
  width:9%;
  text-align:right;
  white-space:nowrap;
}

/* Standings alignment: Team left, everything else right */
#g-standings-table th:first-child,
#g-standings-table td:first-child{
  text-align:left;
}

#g-standings-table th:not(:first-child),
#g-standings-table td:not(:first-child){
  text-align:right;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}


/* =========================================================
   SPORT SEGMENTED TOGGLE (keep only one system)
   ========================================================= */
.sportbar{
  margin-top:6px;
  padding:6px 10px;
  border-radius:14px;
}
.sportseg{
  display:flex;
  width:100%;
  padding:3px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
}
.sportseg button{
  flex:1;
  border:0;
  background:transparent;
  border-radius:999px;
  padding:8px 12px;
  font-weight:800;
  font-size:15px;
  line-height:1;
  cursor:pointer;
}
.sportseg button.active{
  background:var(--accent);
  color:#fff;
}

/* =========================================================
   ARCHIVE INDICATOR (text only; no pills)
   ========================================================= */
#season-banner{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  margin:8px 0 0;
  padding:0 2px;

  font-size:12px;
  font-weight:800;
  color:var(--muted);
}

/* small dot only when text exists */
#season-banner::before{
  content:"";
  width:6px; height:6px;
  border-radius:999px;
  background:rgba(0,107,60,.35);
  margin-right:8px;
  display:inline-block;
}
#season-banner:empty::before{ display:none; }

/* hard-disable any old chip markup if still present */
#season-banner .season-chips,
#season-banner .season-chip{ display:none !important; }



/* =========================================================
   FOOTNOTE + SHAREBAR
   ========================================================= */
.footnote{
  margin-top:8px;
  font-size:12px;
  color:var(--muted);
  font-style:italic;
}
.sharebar{ display:flex; align-items:center; gap:8px; margin:14px 0 0; }
.sharebar .spacer{ flex:1; }
@media (max-width:880px){
  .sharebar{ justify-content:center; }
  .sharebar .spacer{ display:none; }
}

.site-footer{
  max-width:1100px;
  margin:14px auto 24px;
  text-align:center;
  color:var(--muted);
  font-weight:800;
  font-size:12px;
}

.site-footer::after{
  content:"";
  display:block;
  margin:10px auto 0;
  width:80px;
  height:3px;
  border-radius:999px;
  background:rgba(0,107,60,.25);
}

.scroll-top-btn{
  position:fixed;
  right:18px;
  bottom:18px;
  left:auto;
  z-index:200;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid var(--accent);
  background:var(--accent);
  color:#fff;
  display:none;              /* your JS toggles it */
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}

.scroll-top-btn i{ color:#fff; }

.scroll-top-btn:hover{
  filter:brightness(1.06);
}