/* Dads & Lads Football - mobile first */

:root {
  --green:      #15803d;   /* button background, white text on it */
  --green-text: #15803d;   /* green used AS text; lightens in dark mode */
  --green-dark: #166534;
  --green-soft: #dcfce7;
  --red:        #b91c1c;
  --red-soft:   #fee2e2;
  --amber:      #b45309;
  --amber-soft: #fef3c7;
  --blue:       #1d4ed8;
  --blue-soft:  #dbeafe;
  --grey:       #4b5563;
  --grey-soft:  #e5e7eb;

  --nav-bg:       #166534;
  --note-bg:      #f9fafb;
  --ghost-bg:     #ffffff;

  --field-bg:     #ffffff;
  --field-ink:    #111827;
  --field-hint:   #6b7280;
  --field-border: #d1d5db;

  --rag-green:  #15803d;
  --rag-amber:  #b45309;
  --rag-red:    #b91c1c;
  --soft-red:   #b5504f;

  --ink:        #111827;
  --ink-soft:   #6b7280;
  --line:       #e5e7eb;
  --bg:         #f4f5f7;
  --card:       #ffffff;
  --radius:     12px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  padding-bottom: 60px;
}

a { color: var(--green-text); }

/* ---------- Layout ---------- */

.top {
  background: var(--green);
  color: #fff;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.top h1 { font-size: 17px; margin: 0; font-weight: 600; }
.top h1 a { display: flex; align-items: center; gap: 8px; }
.top a { color: #fff; text-decoration: none; }
.top .who { font-size: 13px; opacity: .85; }

nav {
  background: var(--nav-bg);
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: sticky;
  top: 0;
  z-index: 30;
}

/* Anchor jumps from the summary tiles must clear the sticky nav. */
.card[id] { scroll-margin-top: 58px; }
nav a {
  color: #fff;
  opacity: .75;
  text-decoration: none;
  padding: 11px 16px;
  font-size: 14px;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}
nav a.on { opacity: 1; border-bottom-color: #fff; font-weight: 600; }

main { max-width: 760px; margin: 0 auto; padding: 16px 12px 40px; }

h2 { font-size: 19px; margin: 24px 0 10px; }
h2:first-child { margin-top: 4px; }
h3 { font-size: 16px; margin: 18px 0 8px; }

/* ---------- Cards ---------- */

.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.card.muted { opacity: .6; }

.fix-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
.fix-date { font-size: 17px; font-weight: 600; }
.fix-meta { color: var(--ink-soft); font-size: 13px; margin-top: 2px; }

/* ---------- Badges ---------- */

.badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.badge.green  { background: var(--green-soft); color: var(--green-dark); }
.badge.red    { background: var(--red-soft);   color: var(--red); }
.badge.amber  { background: var(--amber-soft); color: var(--amber); }
.badge.blue   { background: var(--blue-soft);  color: var(--blue); }
.badge.grey   { background: var(--grey-soft);  color: var(--grey); }

/* ---------- The in/out control ---------- */

.choice { display: flex; gap: 8px; margin-top: 12px; }
.choice button {
  flex: 1;
  padding: 13px 10px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 9px;
  border: 2px solid var(--line);
  background: #fff;
  color: var(--ink-soft);
  cursor: pointer;
  -webkit-appearance: none;
}
.choice button:active { transform: scale(.98); }
.choice button.on-in  { background: var(--green); border-color: var(--green); color: #fff; }
.choice button.on-out { background: #b5504f; border-color: #b5504f; color: #fff; }
.choice button:disabled { opacity: .45; cursor: not-allowed; }

/* Only an unanswered "not playing" shows as an outline. Being in is a place
   taken, so it always looks solid. */
.choice button.on-out.pending { background: transparent; color: #b5504f; border-color: #b5504f; }

.locked-note {
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink-soft);
  background: #f9fafb;
  padding: 9px 11px;
  border-radius: 8px;
}

/* ---------- Numbers strip ---------- */

.nums { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--ink-soft); margin-top: 10px; }
.nums b { color: var(--ink); font-size: 15px; display: block; }

.bar { height: 7px; background: var(--grey-soft); border-radius: 4px; overflow: hidden; margin-top: 10px; }
.bar i { display: block; height: 100%; background: var(--green); }
.bar i.short { background: var(--amber); }

/* ---------- Forms ---------- */

label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 5px; }
label .hint { display: block; font-weight: 400; color: var(--ink-soft); margin-top: 2px; }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=time], input[type=search], input[type=tel],
input[type=url], select, textarea {
  width: 100%;
  padding: 11px 12px;
  font-size: 16px;                    /* 16px stops iOS zooming on focus */
  border: 1px solid var(--field-border);
  border-radius: 9px;
  background: var(--field-bg);
  color: var(--field-ink);
  font-family: inherit;
}
textarea { min-height: 90px; resize: vertical; }

/* Placeholders stay clearly secondary, but readable. Firefox dims them
   by default, hence the explicit opacity. */
input::placeholder, textarea::placeholder { color: var(--field-hint); opacity: 1; }

/* Chrome paints autofilled fields with its own colours; force ours back. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--field-ink);
  -webkit-box-shadow: 0 0 0 1000px var(--field-bg) inset;
  caret-color: var(--field-ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green); }

.btn {
  display: inline-block;
  padding: 12px 18px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 9px;
  border: 0;
  background: var(--green);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  font-family: inherit;
}
.btn:active { transform: scale(.99); }
.btn.wide { display: block; width: 100%; margin-top: 18px; }
.btn.grey { background: var(--grey); }
.btn.red  { background: var(--red); }
.btn.ghost { background: var(--ghost-bg); color: var(--ink); border: 1px solid var(--field-border); }
.btn.small { padding: 7px 12px; font-size: 13px; }

.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

/* ---------- Tables ---------- */

.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--ink-soft);
  padding: 8px 6px;
  border-bottom: 1px solid var(--line);
}
.table td { padding: 10px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; white-space: nowrap; }
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- Flashes ---------- */

.flash {
  padding: 12px 14px;
  border-radius: 9px;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 500;
}
.flash.ok   { background: var(--green-soft); color: var(--green-dark); }
.flash.err  { background: var(--red-soft);   color: var(--red); }
.flash.warn { background: var(--amber-soft); color: var(--amber); }
.flash.blue { background: var(--blue-soft);  color: var(--blue); }

/* ---------- Auth pages ---------- */

.auth { max-width: 380px; margin: 40px auto; padding: 0 16px; }
.auth .card { padding: 22px; }
.auth h2 { margin-top: 0; text-align: center; }
.auth .brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 22px;
  font-weight: 700;
  color: var(--green-text);
  margin-bottom: 18px;
}
.auth .links { text-align: center; margin-top: 16px; font-size: 14px; }

/* ---------- Week-ahead summary (RAG) ---------- */

.rag {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.rag .tile {
  display: block;
  background: var(--card);
  border-radius: 10px;
  padding: 10px 10px 9px;
  text-decoration: none;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.rag .tile:active { transform: scale(.98); }
.rag .d { display: block; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.rag .n { display: block; font-size: 22px; font-weight: 700; line-height: 1.15; margin-top: 1px; }
.rag .n .of { font-size: 13px; font-weight: 400; color: var(--ink-soft); }
.rag .s { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; margin-top: 2px; }
.rag .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--grey); }

.rag .tile.g .n, .rag .tile.g .s { color: var(--rag-green); }
.rag .tile.a .n, .rag .tile.a .s { color: var(--rag-amber); }
.rag .tile.r .n, .rag .tile.r .s { color: var(--rag-red); }
.rag .tile.x            { opacity: .55; }
.rag .tile.x .n, .rag .tile.x .s { color: var(--ink-soft); }

.rag .tile.g .dot { background: var(--rag-green); }
.rag .tile.a .dot { background: var(--rag-amber); }
.rag .tile.r .dot { background: var(--rag-red); }

/* ---------- Who's in grid ---------- */

.grid-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.grid { border-collapse: collapse; width: 100%; font-size: 14px; }
.grid th, .grid td { padding: 9px 4px; border-bottom: 1px solid var(--line); }
.grid tbody tr:last-child td { border-bottom: 0; }

/* The name column stays put while the weeks scroll sideways. */
.grid th.p, .grid td.p {
  position: sticky;
  left: 0;
  background: var(--card);
  text-align: left;
  padding-left: 14px;
  min-width: 118px;
  white-space: nowrap;
}
.grid th.p { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-soft); }

.grid th.d { text-align: center; min-width: 56px; vertical-align: bottom; }
.grid th.d .dd  { display: block; font-size: 12px; font-weight: 600; white-space: nowrap; }
.grid th.d .tot { display: block; font-size: 11px; font-weight: 700; margin-top: 2px; }
.grid th.d .lk  { display: block; font-size: 10px; color: var(--ink-soft); font-weight: 400; }
.grid th.d .tot.g { color: var(--rag-green); }
.grid th.d .tot.a { color: var(--rag-amber); }
.grid th.d .tot.r { color: var(--rag-red); }
.grid th.d .tot.x { color: var(--ink-soft); }

.grid td.c { text-align: center; }

/* A new family starts a slightly heavier line, so a dad and his kids read
   as one block without needing a separate header row. A change of status
   group - playing, waiting, out - gets a stronger one still. */
.grid tr.famtop td { border-top: 2px solid var(--line); }
.grid tr.mine td.p { font-weight: 700; }
.grid .you {
  font-size: 10px; font-weight: 600; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 5px; margin-left: 5px;
}

.dot2 {
  display: inline-block;
  width: 15px; height: 15px;
  border-radius: 50%;
  border: 2px solid transparent;
  box-sizing: border-box;
  vertical-align: middle;
}
.dot2.g { background: var(--rag-green); border-color: var(--rag-green); }
.dot2.a { background: var(--rag-amber); border-color: var(--rag-amber); }
.dot2.d { background: var(--blue);      border-color: var(--blue); }   /* dropped out */
.dot2.n { background: var(--soft-red); border-color: var(--soft-red); }
.dot2.ghost { background: transparent; }

.dotdetail {
  margin: 10px 14px 2px;
  padding: 9px 11px;
  background: var(--note-bg);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
}

.dot2[data-detail] { cursor: pointer; }
.dot2[data-detail]:focus-visible { outline: 2px solid var(--green-text); outline-offset: 2px; }

.key { display: flex; flex-wrap: wrap; gap: 10px 16px; font-size: 13px; }
.swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; display: inline-block; }
.swatch.dash { height: 3px; border-radius: 2px; }
.key span { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- In-place update feedback ---------- */

.pblock { margin-top: 14px; }
.pblock.multi { border-top: 1px solid var(--line); padding-top: 12px; }

.inline-msg {
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
}
.inline-msg.ok  { background: var(--green-soft); color: var(--green-dark); }
.inline-msg.err { background: var(--red-soft);   color: var(--red); }

.choice button[disabled] { opacity: .6; }

/* ---------- Credit / debit drawer ---------- */

.adjbox { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.adjbox summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--green-text);
  list-style: revert;
}
.adjbox[open] summary { margin-bottom: 4px; }

/* ---------- Editable player row ---------- */

.playerrow {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin: 10px 0;
}
.playerrow input[type=text] { flex: 1 1 130px; min-width: 110px; width: auto; }
.playerrow select { flex: 0 1 130px; width: auto; }

/* ---------- Statements ---------- */

details.statement > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
}
details.statement > summary::-webkit-details-marker { display: none; }
details.statement > summary .stotal { margin-left: auto; font-weight: 700; font-size: 17px; }
details.statement[open] > summary { margin-bottom: 6px; }

/* ---------- Month switcher ---------- */

.monthbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 0 14px;
}
.monthbar span { font-size: 17px; font-weight: 600; }
.monthbar .btn { min-width: 46px; font-size: 18px; line-height: 1; padding: 8px 12px; }
.monthbar .btn.off { opacity: .35; pointer-events: none; }

/* ---------- Misc ---------- */

.empty { text-align: center; color: var(--ink-soft); padding: 34px 16px; }
.muted-text { color: var(--ink-soft); font-size: 13px; }
.right { text-align: right; }
.owe { font-size: 22px; font-weight: 700; color: var(--green-dark); }
.pill-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }

.admin-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }

@media (min-width: 620px) {
  .admin-grid { grid-template-columns: 1fr 1fr; }
  main { padding: 20px 16px 50px; }
}

/* ---------- Dark mode ----------
   Follows the device. Everything dark is a variable, so this is the only
   place it is declared. */

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f3f4f6;
    --ink-soft: #9ca3af;
    --line: #374151;
    --bg: #111827;
    --card: #1f2937;
    --grey-soft: #374151;
    --green-soft: #14532d;
    --green-dark: #86efac;
    --green-text: #4ade80;
    --red-soft: #7f1d1d;
    --amber-soft: #78350f;
    --blue-soft: #1e3a8a;
    --red: #fca5a5;
    --amber: #fcd34d;
    --blue: #93c5fd;
    --grey: #9ca3af;

    --rag-green: #4ade80;
    --rag-amber: #fcd34d;
    --rag-red:   #f87171;
    --soft-red:  #e08a8a;

    --nav-bg:       #14532d;
    --note-bg:      #111827;
    --ghost-bg:     #1f2937;

    --field-bg:     #111827;
    --field-ink:    #f9fafb;
    --field-hint:   #9ca3af;
    --field-border: #4b5563;
  }
}
/* ---------- Visually hidden ---------- */

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

/* The emoji brings its own colour, so it needs no styling beyond sitting
   still in the flex row and not inheriting the link underline. */
.ballicon { flex: none; line-height: 1; text-decoration: none; }