/* paddle-web base styles, matching the look of the original onlinetransition.com pages. */

* { box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  margin: 0; color: #eee; background: #244526;
}
body.bg-slate { background: #464a46; }
body.bg-teal  { background: #67c1c9; }
/* white/light surfaces need their own dark text colour since body text is now light */
.card, .grid, .player-row, .player-list, input, select, textarea, button {
  color: #222;
}
.content { max-width: 700px; margin: 0 auto; }
.content.content-wide { max-width: 1100px; }
.content.content-history { max-width: 910px; }
main { padding: 1rem 1.25rem 3rem; }
h1 {
  margin-top: 0.5rem; margin-bottom: 1rem; color: #d4af37;
  font-family: Cambria, Georgia, "Times New Roman", serif; font-weight: 700;
  letter-spacing: .06em; text-align: center; text-shadow: 0 1px 3px rgba(0,0,0,.6);
  border-bottom: 2px solid #d4af37; padding-bottom: .5rem;
}
/* tennis leagues sit on a teal background -- swap the gold Masters heading
   for a deep navy that complements teal instead of clashing with it */
body.bg-teal h1 { color: #0b3d49; border-bottom-color: #0b3d49; text-shadow: 0 1px 2px rgba(255,255,255,.3); }

a { color: #8ecae6; text-decoration: none; }
a:hover { text-decoration: underline; }
.grid a.link { color: #222; }
.muted { color: #888; }
.ok    { color: #185c1c; background: #e6f4ea; padding: .5rem .75rem; border-radius: 4px; }
.warn  { color: #8a5a00; background: #fff4e1; padding: .5rem .75rem; border-radius: 4px; }
.error { color: #a01a1a; background: #fde7e7; padding: .5rem .75rem; border-radius: 4px; }

/* header */
.site-header {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .75rem 1.25rem; background: #1e2a38; color: #fff;
}
.site-header a { color: #fff; }
.site-header .brand { font-weight: 700; font-size: 1.1rem; }
.brand-logo { height: 40px; display: block; }
.site-header nav.leagues { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.site-header nav.leagues a.active { text-decoration: underline; }
.site-header nav.leagues .sep { color: rgba(255,255,255,.4); }
.site-header .auth { margin-left: auto; }
.link-btn { background: none; border: none; color: #fff; cursor: pointer; padding: 0; }
.subnav {
  display: flex; gap: 1rem; padding: .5rem 1.25rem;
  background: #eef2f7; border-bottom: 1px solid #d8dee7;
}
.subnav a { color: #1e6bb8; }
.subnav .sep { color: #aaa; }

/* page header / toggles */
.page-header { display: flex; align-items: baseline; justify-content: space-between; }
.page-header .toggles { color: #fff; }
.page-header .toggles a { color: #cfe8d2; }
.season-title {
  display: inline-block; color: #244526; background: linear-gradient(135deg, #ffe51c, #cc9900);
  padding: .15rem .6rem; border-radius: 999px; font-size: .6em; font-weight: bold;
  letter-spacing: .03em; vertical-align: middle; box-shadow: 0 1px 3px rgba(0,0,0,.4);
}

/* tables */
.grid {
  border-collapse: collapse; width: 100%; margin-bottom: 1rem;
  background: #fff; font-family: Arial, sans-serif;
}
.grid th, .grid td {
  padding: .5rem .6rem; border: 1px solid #bbb; text-align: center;
}
.grid thead th {
  background: #9DE0AD; color: #493F3F; font-weight: normal;
}
body.bg-teal .grid thead th { background: #87beed; }
/* tennis leagues sit on a teal page background -- the bright green history
   stripe clashes there, so swap it for a pale cyan that complements teal */
body.bg-teal .grid.history td.tg-reg { background: #d6f3f0; }

/* player stats/awards table -- warm gold tint instead of plain white */
.grid.awards { background: #fdf6e3; }
.grid.awards tr:first-child th {
  background: #cc9900; color: #fff; font-family: Cambria, Georgia, serif; font-size: 1.1rem;
}
.grid.awards td { text-align: left; }
.grid.awards td:last-child { text-align: center; font-weight: bold; }

/* tier classes -- match original tg-* colours and serif look */
.grid td.tg-gold, .grid td.tg-silver, .grid td.tg-bronze, .grid td.tg-copper,
.grid td.tg-reg, .grid td.tg-reg2 {
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-size: 1.5rem; vertical-align: middle;
}
.tg-gold   { background: #ffe51c; }
.tg-silver { background: #f2f2f2; }
.tg-bronze { background: #fca842; }
.tg-copper { background: #de9645; }
.tg-reg    { background: #9aff99; }
.tg-reg2   { background: #f0ead6; color: #222; }

/* history tables reuse the tg-* colours but at a smaller, denser size */
.grid.history td.tg-reg, .grid.history td.tg-reg2,
.grid.awards td.tg-reg, .grid.awards td.tg-reg2 {
  font-size: 1em;
}

/* player name cell: name + medal share the row, name on the left */
.grid td .player-name-cell { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }

/* medal images */
.medal {
  display: inline-block; vertical-align: middle; margin-left: .35rem;
  background-repeat: no-repeat; background-size: contain; background-position: center;
}
.medal-gold   { width: 35px; height: 35px; background-image: url(/img/gold-medal-big.png); }
.medal-silver { width: 30px; height: 30px; background-image: url(/img/silver-medal.png); }
.medal-bronze { width: 25px; height: 25px; background-image: url(/img/bronze-medal.png); }
.medal-copper { width: 20px; height: 20px; background-image: url(/img/ribbon.png); }

/* hall headings */
.hall-heading {
  margin-top: 1.25rem; padding: .4rem .6rem; text-align: center;
  background: #cccccc; color: #222;
  font-family: Impact, Charcoal, sans-serif; font-size: 1.4rem; font-weight: normal;
}

/* forms */
.card {
  background: #fff; border: 1px solid #d8dee7; border-radius: 6px;
  padding: 1rem; margin-bottom: 1rem;
}
.card label { display: block; margin: .35rem 0; }
.card input, .card select {
  font: inherit; padding: .25rem .4rem; border: 1px solid #ccd2da; border-radius: 4px;
}
.card button {
  font: inherit; padding: .4rem .9rem; border: 0; border-radius: 4px;
  background: #1e6bb8; color: #fff; cursor: pointer;
}
.card button:hover { background: #1a5fa3; }

.grid-form {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: .5rem 1rem;
}
.grid-form label {
  display: flex; align-items: center; gap: .4rem;
}

/* match entry */
.match-form fieldset { border: 1px solid #d8dee7; border-radius: 4px; padding: .5rem 1rem; margin: .75rem 0; }
.match-form .player-row {
  display: flex; gap: 1rem; align-items: flex-end; margin-bottom: .5rem;
}
.match-form .actions { display: flex; gap: .5rem; margin-top: 1rem; }

/* players admin list */
.player-list { display: flex; flex-direction: column; gap: .15rem; }
.player-row {
  display: grid;
  grid-template-columns: 1.7fr 1.1fr .5fr .5fr 1.4fr 2.2fr;
  gap: .35rem; align-items: center;
  padding: .25rem .35rem; background: #fff; border: 1px solid #e3e7ee; border-radius: 4px;
}
.player-row > span { min-width: 0; overflow: hidden; }
.player-row.player-head { background: #eef2f7; font-weight: 600; }
.sort-hdr { color: inherit; text-decoration: none; }
.sort-hdr:hover { text-decoration: underline; cursor: pointer; }
.player-entry .player-row > span:first-of-type { display: flex; gap: .3rem; align-items: center; flex-wrap: nowrap; }
.player-row input { padding: .15rem .3rem; border: 1px solid #ccd2da; border-radius: 3px; font: inherit; }
.player-row button { padding: .25rem .6rem; border: 0; border-radius: 3px; background: #1e6bb8; color: #fff; cursor: pointer; }

/* misc */
.league-list { padding-left: 1.2rem; }
.league-list li { margin: .3rem 0; }
.site-footer { padding: 1rem; text-align: center; color: #888; }

/* buttons */
.btn {
  display: inline-block; padding: .4rem .9rem; border-radius: 4px;
  background: #cc9900; color: #fff; border: none; cursor: pointer;
  font: inherit; text-decoration: none;
}
.btn:hover { background: #a87d00; text-decoration: none; color: #fff; }
.btn-danger {
  display: inline-block; padding: .4rem .9rem; border-radius: 4px;
  background: #c0392b; color: #fff; border: none; cursor: pointer; font: inherit;
}
.btn-danger:hover { background: #a02920; }

/* history tables -- wraps within the page width instead of scrolling, with roomy rows */
.grid.history { font-size: 0.95em; table-layout: fixed; width: 100%; }
.grid.history td, .grid.history th {
  white-space: normal; word-break: break-word; padding: .6rem .4rem; line-height: 1.4;
}
.delta-win, .delta-loss {
  display: inline-block; font-weight: bold; border-radius: 3px; padding: 0 .3rem; font-size: .95em;
}
.delta-win  { color: #1a7a2e; }
.delta-loss { color: #b3261e; }
.rating-change { color: #555; font-size: .85em; }
/* reserve room for a 2-line name so the delta line below it always lines up
   across the row, whether a given player's name wraps or not */
.hist-name { line-height: 1.3; white-space: nowrap; }
.hist-delta {
  margin-top: .15rem; display: flex; justify-content: center;
  align-items: baseline; gap: .35rem; flex-wrap: nowrap; white-space: nowrap;
}
.full-name { display: none; }
.short-name { display: inline; }
/* personal player page: widen the match-history table 25% beyond the page container */
.history-bleed { width: 125%; margin-left: -12.5%; }
/* season divider rows inside a player's match history */
.grid.history td.season-divider {
  background: #cc9900; color: #fff; text-align: center;
  font-family: Cambria, Georgia, serif; font-weight: bold; font-size: 1.05em;
  letter-spacing: .04em; padding: .4rem;
}
body.bg-teal .grid.history td.season-divider { background: #0b3d49; }

/* mobile: shrink the oversized serif ladder/standings font and tighten padding
   so Rank/Player/Rating fit without forcing horizontal scroll */
@media (max-width: 480px) {
  .grid td.tg-gold, .grid td.tg-silver, .grid td.tg-bronze, .grid td.tg-copper,
  .grid td.tg-reg, .grid td.tg-reg2 {
    font-size: 1.05rem;
  }
  .grid th, .grid td { padding: .4rem .3rem; }
  h1 { font-size: 1.4rem; }

  /* history tables have 6+ columns -- too narrow to stay side-by-side on a
     phone. Turn each row into a card: Date/Type stack full-width, but all
     4 player cells from the same match stay together on one flex line so
     the whole match is still readable as a single unit. */
  .history-bleed { width: 100%; margin-left: 0; }
  .grid.history { table-layout: auto; }
  .grid.history thead { display: none; }
  .grid.history tr {
    display: flex; flex-wrap: wrap;
    margin-bottom: .6rem; border: 1px solid #bbb; border-radius: 4px; overflow: hidden;
  }
  .grid.history td {
    width: auto !important; border: none; border-bottom: 1px solid rgba(0,0,0,.08);
    flex: 1 0 100%; padding: .35rem .3rem;
  }
  .grid.history td:last-child { border-bottom: none; }
  .grid.history td:not(.hist-player)[data-label]::before {
    content: attr(data-label) ": "; font-weight: bold; font-size: .8em; color: #555;
  }
  .grid.history td.hist-player {
    flex: 1 1 0; min-width: 0; text-align: center;
    border-bottom: none; border-right: 1px solid rgba(0,0,0,.08);
  }
  .grid.history td.hist-player:last-of-type { border-right: none; }
  .grid.history td.hist-player .hist-name { font-size: .72rem; min-height: 0; line-height: 1.2; white-space: nowrap; }
  .grid.history td.hist-player .full-name { display: none; }
  .grid.history td.hist-player .short-name { display: inline; }
  .grid.history td.hist-player .hist-delta { font-size: .68rem; margin-top: 0; }
  .grid.history td.hist-player .rating-change { font-size: .9em; }
  .grid.history td.season-divider { flex: 1 0 100%; }
  .grid.history td.season-divider::before { content: none; }
}

/* flash banner */
.info-banner {
  padding: .5rem .85rem; margin-bottom: 1rem; border-radius: 4px;
  background: #e8f4fd; border: 1px solid #b8d9f5; color: #1a5276;
}