/* ============================================================
   SCORR - PRINT.CSS
   Fixed light-mode-only variables and layout rules for the
   print/fixtures.html page. Deliberately independent of
   theme.css's --bg/--text toggle system - print output is
   always white, regardless of the visitor's saved dark/light
   preference. Loaded AFTER theme.css so these rules win.
   ============================================================ */
:root {
  --print-bg:        #ffffff;
  --print-surface:   #f7f7f7;
  --print-border:    #cccccc;
  --print-text:      #111111;
  --print-text-sub:  #555555;
  --print-gold:      #A6791E;
  /* Fixed, print-safe highlight palette - independent of the
     dashboard's --highlight-1..4 theme variables, which aren't
     guaranteed to have print-appropriate contrast on white. */
  --print-hl-1: #2C6FB0;
  --print-hl-2: #1E8449;
  --print-hl-3: #8E44AD;
  --print-hl-4: #C0392B;
}
body.print-page {
  background: var(--print-bg);
  color: var(--print-text);
}
.print-wrap {
  max-width: 700px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md) 60px var(--space-md);
}
body.mode-team .print-wrap {
  max-width: 760px;
}
/* Session 17c: wordmark is now the dot-matrix Scorr mark (inline SVG,
   currentColor fill) instead of styled text - width-constrained box,
   colour driven by --print-gold same as before so it stays consistent
   if the print gold shade is ever adjusted. */
.print-wordmark {
  color: var(--print-gold);
  width: 150px;
  margin-bottom: 6px;
}
.print-wordmark svg {
  display: block;
  width: 100%;
  height: auto;
}
.print-header {
  border-bottom: 2px solid var(--print-gold);
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-lg);
}
.print-header h1 {
  color: var(--print-gold);
  margin: 0;
}
.print-meta {
  color: var(--print-text-sub);
  font-family: var(--font-display);
  font-size: var(--small-size);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-top: var(--space-xs);
}
.print-tz-note {
  color: var(--print-text-sub);
  font-family: var(--font-body);
  font-size: var(--small-size);
  margin-top: var(--space-sm);
}
.print-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-md);
  background: var(--print-gold);
  color: #ffffff;
  border: none;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  font-size: var(--small-size);
  cursor: pointer;
}

/* ---- Highlight legend ---- */
.print-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
  font-size: var(--small-size);
  color: var(--print-text);
}
.legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
  flex-shrink: 0;
}
.legend-swatch.highlight-1 { background: var(--print-hl-1); }
.legend-swatch.highlight-2 { background: var(--print-hl-2); }
.legend-swatch.highlight-3 { background: var(--print-hl-3); }
.legend-swatch.highlight-4 { background: var(--print-hl-4); }

/* ---- Highlighted team names (bold + coloured underline, so the
   marking survives a grayscale/B&W print - bold reads as
   emphasis, colour is a bonus on colour printers) ---- */
.print-hl {
  font-weight: 700;
}
.print-hl.highlight-1 { color: var(--print-hl-1); border-bottom: 2px solid var(--print-hl-1); }
.print-hl.highlight-2 { color: var(--print-hl-2); border-bottom: 2px solid var(--print-hl-2); }
.print-hl.highlight-3 { color: var(--print-hl-3); border-bottom: 2px solid var(--print-hl-3); }
.print-hl.highlight-4 { color: var(--print-hl-4); border-bottom: 2px solid var(--print-hl-4); }

/* ---- Column layout ----
   Only the team-list view uses CSS multi-column. #print-groups
   (full fixture list) is deliberately kept a plain block
   container - putting it inside a multicol context breaks
   .print-week's break-before:page, which browsers treat as a
   column-break instead of a page-break once the parent is a
   multicol formatting context, even at column-count:1. */
body.print-cols-2 #print-team-list {
  column-count: 2;
  column-gap: var(--space-lg);
}

/* ---- Full fixture list (existing) ---- */
.print-week {
  break-inside: avoid-page;
  page-break-inside: avoid;
  margin-bottom: var(--space-lg);
}
.print-week + .print-week {
  break-before: page;
  page-break-before: always;
}
.print-week h2 {
  color: var(--print-gold);
  font-size: var(--h3-size);
  border-bottom: 1px solid var(--print-border);
  padding-bottom: var(--space-xs);
  margin-bottom: var(--space-sm);
}
.print-date-heading {
  color: var(--print-text-sub);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-top: var(--space-sm);
  margin-bottom: 2px;
}
.print-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 6px 0;
  border-bottom: 1px solid var(--print-border);
  font-family: var(--font-body);
  font-size: var(--body-size);
  break-inside: avoid;
}
.print-row-round {
  color: var(--print-text-sub);
  font-size: var(--small-size);
  font-family: var(--font-display);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  min-width: 45px;
  flex-shrink: 0;
}
.print-row-teams {
  flex: 1;
  text-align: center;
  color: var(--print-text);
}
.print-row-result {
  min-width: 90px;
  text-align: right;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--print-text);
}

/* ---- Single-team compact list (new) ---- */
.print-team-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  border-bottom: 1px solid var(--print-border);
  font-family: var(--font-body);
  font-size: 12px;
  break-inside: avoid;
  page-break-inside: avoid;
}
.print-team-date {
  color: var(--print-text-sub);
  width: 62px;
  min-width: 62px;
  flex-shrink: 0;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}
.print-team-opp {
  flex: 1;
  color: var(--print-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.print-team-ha {
  color: var(--print-text-sub);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  min-width: 14px;
  flex-shrink: 0;
}
/* Session 18m Step (c): competition label, cross-competition team
   print view only (team.html's own Print Fixtures button) -
   competition.html's Print Fixtures button never needed this, since
   that whole page is already scoped to one competition. .print-team-
   row is plain flexbox rather than a fixed-column grid, so this is a
   genuine additional flex item rather than something bolted onto
   .print-team-opp - sits between opponent and H/A. Muted and compact
   so it doesn't compete visually with the opponent name; ellipsis
   rather than wrapping keeps every row the same height even for a
   longer competition name like "League Cup". */
.print-team-comp {
  color: var(--print-text-sub);
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  min-width: 52px;
  max-width: 70px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}
.print-team-result {
  min-width: 55px;
  text-align: right;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--print-text);
}

.print-fallback {
  color: var(--print-text-sub);
  padding: var(--space-lg) 0;
}
@page {
  margin: 15mm;
}
@media print {
  .no-print {
    display: none !important;
  }
  body.print-page {
    background: #ffffff;
  }
}
/* Toggle: when off, match days flow continuously instead of each
   starting a new printed page. .no-print already hides the toggle
   control itself in the actual print output - this rule only
   affects the page-break behaviour, not visibility of the switch. */
body.no-pagebreaks .print-week + .print-week {
  break-before: auto;
  page-break-before: auto;
}