:root {
  --primary: #9c1c17;
  --gold: #f7941d;
  --bg: #f6f7f9;
  --card: #ffffff;
  --text: #1c2430;
  --muted: #667085;
  --border: #e3e7ed;
  --danger: #b3261e;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

header.topbar {
  background: var(--primary);
  color: #fff;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 3px solid var(--gold);
  position: relative;
}

header.topbar a { color: #fff; text-decoration: none; }
header.topbar .brand { font-weight: 700; font-size: 1.1rem; display: flex; align-items: center; gap: 10px; }
header.topbar .brand-link { display: block; flex: none; }
header.topbar .brand-logo { height: 40px; width: auto; display: block; }
/* The version sits small under the title, inside the logo's height, so it
   adds nothing to the bar's width or its depth. */
header.topbar .brand-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; white-space: nowrap; }
header.topbar .brand-version { font-weight: 400; font-size: 0.68rem; opacity: 0.75; }
header.topbar .brand-version:hover { opacity: 1; text-decoration: underline; }
header.topbar nav { display: flex; gap: 18px; align-items: center; font-size: 0.92rem; }
header.topbar nav a { opacity: 0.85; }
header.topbar nav a:hover { opacity: 1; text-decoration: underline; }
header.topbar form { margin: 0; }
/* Log out is a quiet button in the bar's own white. */
header.topbar button.quiet { color: #fff; opacity: 0.85; text-decoration: none; }
header.topbar button.quiet:hover { opacity: 1; text-decoration: underline; }

/* Below the breakpoint, the nav collapses into a dropdown opened by a
   hamburger button - a checkbox drives it so it works with no JS. */
.nav-toggle { display: none; }
.nav-toggle-btn { display: none; cursor: pointer; font-size: 1.5rem; line-height: 1; padding: 2px 4px; }

.admin-group { margin-bottom: 28px; }
.admin-group > h2 { color: var(--primary); border-bottom: 2px solid var(--gold); padding-bottom: 6px; display: inline-block; margin-bottom: 14px; }

.admin-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.admin-cards a.card { display: block; text-decoration: none; color: inherit; transition: border-color 0.15s; }
.admin-cards a.card:hover { border-color: var(--primary); }
.admin-cards h2 { color: var(--primary); margin-bottom: 6px; }
.admin-cards p { margin: 0; color: var(--muted); font-size: 0.88rem; }

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}

/* Team sheets and admin pages carry wide tables (rosters, uniform lists,
   audit logs) that truncate or wrap awkwardly inside the standard reading
   width - let them use the full window instead. Narrow windows still work:
   .table-scroll scrolls its table horizontally rather than the page. */
main.main-wide {
  max-width: none;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 20px;
}

h1 { font-size: 1.5rem; margin: 0 0 4px; }
h2 { font-size: 1.15rem; margin: 0 0 12px; }
p.subtitle { color: var(--muted); margin: 0 0 20px; }

label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 6px; }
input[type="text"], input[type="search"]:not(.gd-search), input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[type="file"], input[type="date"], select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 1rem;
  margin-bottom: 16px;
  background: var(--card);
  color: var(--text);
}

/* Four kinds of button, one look (the president, 3 October 2026: some were
   white with red text and some red with white, with nothing to say why).
   Primary is the one action a form or section is for - red, white text -
   and there is at most one in a form. Secondary is everything else: going
   to another page, a download, a copy, cancel, clear. Danger deletes,
   reverses or unpublishes, and always asks first. Quiet is a small action
   on a table row, drawn as underlined text with no box. A <button> or .btn
   with no kind is drawn grey on purpose, so a missed one reads as plainly
   wrong rather than quietly primary - test/buttons.test.js fails it too.
   Both <button> and <a class="btn"> take them, and .small is the size for a
   page head, a table row or a filter panel. */
button, .btn {
  display: inline-block;
  padding: 10px 18px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #eef1f6;
  color: var(--text);
  font-size: 0.95rem;
  line-height: normal;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
button.primary, .btn.primary { background: var(--primary); color: #fff; border-color: var(--primary); }
button.secondary, .btn.secondary { background: var(--card); color: var(--primary); border-color: var(--border); }
button.danger, .btn.danger { background: var(--card); color: #7a1510; border-color: #f4c7c3; }
button.quiet, .btn.quiet {
  background: none; border: none; border-radius: 0; padding: 0;
  color: var(--primary); text-decoration: underline; font: inherit; text-align: left;
}
button.small, .btn.small { padding: 5px 12px; font-size: 0.85rem; }
button.quiet.small, .btn.quiet.small { padding: 0; font-size: 0.85rem; }
/* The same hover, focus ring and disabled look whatever the kind. */
button:hover, .btn:hover { opacity: 0.92; }
button.secondary:hover, .btn.secondary:hover, button.danger:hover, .btn.danger:hover { background: var(--bg); opacity: 1; }
button.quiet:hover, .btn.quiet:hover { opacity: 1; text-decoration-thickness: 2px; }
button:focus-visible, .btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
button:disabled, button:disabled:hover, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

.error { color: var(--danger); background: #fdecea; border: 1px solid #f4c7c3; padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; font-size: 0.9rem; }
.notice { background: #fff8e6; border: 1px solid #f0dfa8; padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; font-size: 0.9rem; }
/* A list inside a notice: close in, so the notice stays a note rather than a page of its own. */
.notice ul { margin: 6px 0 0; padding-left: 18px; }
/* A test's answer, drawn under its form (public/import-test.js). */
.test-result { margin: 10px 0 4px; padding: 10px 12px; border: 1px dashed #c9cfd8; border-radius: 6px; }
.test-result > .success, .test-result > .error { margin-bottom: 8px; }
.test-result .card { box-shadow: none; border: 0; padding: 4px 0; margin: 0 0 8px; }
.test-result h1 { font-size: 1.1rem; margin: 0 0 6px; }
.test-result-close { margin-top: 4px; }
.notice li + li { margin-top: 6px; }
.success { background: #eaf7ee; border: 1px solid #bfe6cb; padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; font-size: 0.9rem; }

.season-group { margin-bottom: 24px; }
.season-group h2 { color: var(--primary); border-bottom: 2px solid var(--gold); padding-bottom: 6px; display: inline-block; }

table { width: 100%; border-collapse: collapse; margin-top: 8px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 0.92rem; }
th { color: var(--muted); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; }

.team-list { list-style: none; padding: 0; margin: 0; }
.team-list li { padding: 12px 0; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.team-list li:last-child { border-bottom: none; }
.team-list a { color: var(--primary); font-weight: 600; text-decoration: none; }
.team-list a:hover { text-decoration: underline; }

.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; background: #eef1f6; color: var(--primary); }
.badge.player { background: #eaf2ff; color: #1d4ed8; }
.badge.coach { background: #fff1e0; color: #b45309; }
.badge.team_manager { background: #f1e8ff; color: #6d28d9; }
.badge.hidden-status { background: #fff8e6; color: #92620a; }

.muted { color: var(--muted); }
.code-input { letter-spacing: 0.4em; font-size: 1.3rem; text-align: center; }

.admin-season { margin-bottom: 18px; }
.admin-season summary { cursor: pointer; font-weight: 600; color: var(--primary); padding: 8px 0; }

.people-toolbar { display: flex; gap: 10px; margin-bottom: 16px; }
.people-toolbar input, .people-toolbar select { margin-bottom: 0; }

.fixtures-table { max-width: 620px; margin: 0 auto; border: 1px solid var(--border); }
.fixtures-table td { padding: 9px 14px; border-bottom: 1px solid var(--border); }
.fixtures-table tr:last-child td { border-bottom: none; }
.fixtures-table td:last-child { text-align: right; }
/* writing-mode + rowspan is inconsistently supported by print/PDF
   rendering engines (the year text can vanish in a printed/saved PDF while
   still showing fine on screen) - a plain 2D rotate on an inline-block
   span, independent of the cell's own text flow, renders reliably in
   both. */
.fixtures-year {
  text-align: center;
  vertical-align: middle;
  border-right: 1px solid var(--border);
  width: 1px;
  white-space: nowrap;
  position: relative;
}
.fixtures-year span {
  display: inline-block;
  transform: rotate(-90deg);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--primary);
  white-space: nowrap;
}

.impersonation-banner {
  background: var(--gold);
  color: #1c2430;
  padding: 8px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 0.9rem;
  font-weight: 600;
}
.impersonation-banner form { margin: 0; }
.environment-banner {
  padding: 8px 24px;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
}
.environment-green { background: #1f7a4d; color: #fff; }
.environment-read-only { background: #b3261e; color: #fff; }
.impersonation-banner button.quiet { color: inherit; }

.sheet-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.sheet-top-right { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.team-name { text-transform: uppercase; font-style: italic; }

.training-box { width: auto; min-width: 320px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-top: 0; }
.training-box thead tr th[colspan] { background: var(--primary); color: #fff; text-align: left; padding: 8px 12px; text-transform: none; font-size: 0.85rem; letter-spacing: 0; }
.training-box tbody tr:first-child th { background: #eef1f6; }
.training-box th, .training-box td { border-bottom: none; padding: 8px 12px; }

.training-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-top: 10px; }
.training-form > div { flex: 1; min-width: 140px; }
.training-form input { margin-bottom: 0; }
.training-form button { height: 41px; }

.filter-grid { display: grid; grid-template-columns: repeat(4, minmax(140px, 1fr)); gap: 12px 16px; margin-top: 10px; }
.filter-grid label { margin-bottom: 4px; }
.filter-grid input, .filter-grid select { margin-bottom: 0; }
.filter-grid-actions { display: flex; gap: 10px; margin-top: 16px; }
@media (max-width: 640px) {
  .filter-grid { grid-template-columns: repeat(2, 1fr); }

  .nav-toggle-btn { display: block; }
  header.topbar nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 24px;
    background: var(--primary);
    border-bottom: 3px solid var(--gold);
    z-index: 20;
  }
  .nav-toggle:checked ~ nav { display: flex; }
}

.table-scroll { overflow-x: auto; }
.table-scroll table { min-width: 640px; }

@page {
  size: landscape;
  margin: 1.2cm;
}

.print-logo { display: none; }
.print-only { display: none; }

@media print {
  header.topbar, .no-print { display: none !important; }
  .print-only { display: inline; }
  body { background: #fff; }
  main { max-width: 100%; padding: 0; }
  .card { border: none; box-shadow: none; padding: 0; margin-bottom: 20px; }
  /* On screen, .sheet-top-right stacks the training box above the (hidden)
     logo in a right-hand column next to the team name. For print, the logo
     becomes visible and the training box needs to sit centered between the
     name and the logo on one row instead - `display: contents` un-nests
     .sheet-top-right so its children become direct grid items of
     .sheet-top, which a 1fr/auto/1fr grid then lays out as name (left),
     training (centered) and logo (right). */
  .sheet-top { break-inside: avoid; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
  .sheet-top-name { grid-column: 1; }
  .sheet-top-right { display: contents; }
  .training-box { grid-column: 2; justify-self: center; margin: 0; }
  .print-logo { grid-column: 3; justify-self: end; display: block; height: 3cm; width: auto; }
  .table-scroll { overflow-x: visible; }
  .table-scroll table { min-width: 0; }
  a { color: inherit; text-decoration: none; }

  table { break-inside: auto; }
  tr { break-inside: avoid; break-after: auto; }
  thead { display: table-header-row-group; }
  h1, h2 { break-after: avoid; }

  /* The Players table can legitimately span pages (large squads), but Staff
     is only ever a handful of rows - keep it as one unbroken block, pushed
     to the next page whole rather than split, if it doesn't fit under the
     Players table on the first page. */
  .staff-card { break-inside: avoid; }
}

/* Somewhere to actually write. A textarea left to the browser is about
   twenty characters wide, which is no use for a season's notes. */
textarea { font-family: inherit; line-height: 1.5; min-height: 90px; resize: vertical; }

/* Activity's filters wrap on a narrow screen rather than squeezing. */
.audit-toolbar { flex-wrap: wrap; align-items: flex-end; }
.audit-toolbar input[type="text"] { flex: 1 1 260px; min-width: 200px; }
.audit-toolbar .date-pick { flex: 0 0 auto; width: 150px; }

/* Hidden means hidden. A row laid out as a grid or flex box (display: grid)
   otherwise outranks the browser's own [hidden] rule, so a search that hides
   the rows it doesn't match left every one of them on screen - the game-day
   name search did, on 2 October 2026. */
[hidden] { display: none !important; }

/* The page's one Back (views/_back.ejs), at its head. */
p.back-line { margin: 0 0 10px; font-size: 0.92rem; }