/* ═══════════════════════════════════════════════════════════════
   VGC SCORECARD GENERATOR — Stylesheet
   Victoria Golf Club
   ═══════════════════════════════════════════════════════════════
   SECTIONS:
     1. Reset & Base
     2. Top Bar (navigation)
     3. Layout
     4. Dashboard (left panel)
     5. Preview Area
     6. Cards
     7. Card Elements (boxes, underlines)
     8. Tables
     9. Score Grid (strokeplay right side)
    10. Landscape Headers
    11. Print Styles
   ═══════════════════════════════════════════════════════════════ */


/* ───────────────────────────────────────────────────────────────
   1. RESET & BASE
   ─────────────────────────────────────────────────────────────── */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, sans-serif;
  background: #f0f2f5;
}


/* ───────────────────────────────────────────────────────────────
   2. TOP BAR
   Change background colour here to restyle the nav bar
   ─────────────────────────────────────────────────────────────── */
.topbar {
  background: #1a2638;          /* ← Nav bar background colour */
  color: #fff;
  padding: 7px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
  gap: 8px;
}

.topbar h1 {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.topbar h1 span {
  color: #c8a951;               /* ← Gold accent colour in title */
}

/* Button group wrapper */
.tbns {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* Card switcher buttons */
.tb {
  padding: 4px 9px;
  border: 1.5px solid #c8a951;  /* ← Button border colour */
  background: transparent;
  color: #c8a951;               /* ← Button text colour */
  border-radius: 3px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  transition: all .15s;
  white-space: nowrap;
}

.tb.active,
.tb:hover {
  background: #c8a951;          /* ← Active/hover fill colour */
  color: #1a2638;
}

.tb.pr {
  background: #c8a951;          /* ← Print button colour */
  color: #1a2638;
}

/* Group label text (e.g. "MATCHPLAY:") */
.tg {
  color: #c8a951;
  font-size: 9px;
  font-weight: 700;
  opacity: .7;
  padding: 0 4px;
  display: flex;
  align-items: center;
  white-space: nowrap;
}


/* ───────────────────────────────────────────────────────────────
   3. LAYOUT
   ─────────────────────────────────────────────────────────────── */
.layout {
  display: flex;
  min-height: calc(100vh - 40px);
}


/* ───────────────────────────────────────────────────────────────
   4. DASHBOARD (left panel)
   ─────────────────────────────────────────────────────────────── */
.dash {
  width: 296px;
  min-width: 280px;
  background: #fff;
  border-right: 1px solid #ddd;
  overflow-y: auto;
  padding-bottom: 24px;
  flex-shrink: 0;
}

/* Section heading bars */
.ds {
  background: #1a2638;          /* ← Section header background */
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 5px 12px;
  margin-top: 6px;
}

/* Row container */
.dr {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid #f0f0f0;
  min-height: 30px;
}

/* Row label */
.dl {
  width: 128px;
  min-width: 128px;
  font-size: 10px;
  font-weight: 700;
  color: #444;
  padding: 3px 5px 3px 12px;
  background: #f4f6f9;
  border-right: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  line-height: 1.3;
}

/* Row input wrapper */
.di {
  flex: 1;
  padding: 2px 6px;
  display: flex;
  align-items: center;
}

/* Input & select fields */
.di input,
.di select {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 3px 5px;
  font-size: 11px;
  font-family: Arial, sans-serif;
  background: #fffde7;          /* ← Input background (pale yellow) */
  color: #1a2638;
}

.di input:focus,
.di select:focus {
  outline: none;
  border-color: #1a2638;
  background: #fff;
}

/* Calculated value display (green) */
.dc {
  flex: 1;
  padding: 2px 6px;
  font-size: 12px;
  font-weight: 700;
  color: #1a6b3a;               /* ← Calculated value text colour */
  background: #d4edda;          /* ← Calculated value background */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Shots received display box */
.dshots {
  flex: 1;
  margin: 3px 6px;
  border: 2px solid #999;
  border-radius: 3px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
}

/* Note / info panels */
.dnote {
  font-size: 9px;
  color: #555;
  font-style: italic;
  padding: 4px 12px;
  background: #fff9c4;
  border-bottom: 1px solid #f0f0f0;
  line-height: 1.4;
}

.dinfo {
  font-size: 9px;
  color: #444;
  padding: 4px 12px;
  background: #f0f4f8;
  border-bottom: 1px solid #e0e0e0;
  line-height: 1.5;
}

/* Colour legend */
.legend {
  padding: 5px 12px;
  background: #fff;
  border-bottom: 1px solid #eee;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 2px;
  font-size: 10px;
}

.lsw {
  width: 13px;
  height: 13px;
  border: 1px solid #999;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Print button inside dashboard */
.prbtn {
  display: block;
  margin: 12px auto 0;
  padding: 8px 0;
  background: #1a2638;
  color: #fff;
  border: none;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  width: calc(100% - 24px);
}

.prbtn:hover {
  background: #2e4057;
}


/* ───────────────────────────────────────────────────────────────
   5. PREVIEW AREA (right panel)
   ─────────────────────────────────────────────────────────────── */
.preview {
  flex: 1;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
}

.plbl {
  font-size: 10px;
  font-weight: 700;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}


/* ───────────────────────────────────────────────────────────────
   6. CARDS
   .cp = portrait A5 (559×794px)
   .cl = landscape A5 (794px wide)
   ─────────────────────────────────────────────────────────────── */
.card {
  background: #fff;
  box-shadow: 0 2px 14px rgba(0,0,0,.18);
  border: 1px solid #ccc;
  font-family: Arial, sans-serif;
  display: none !important;
}

.card.active {
  display: flex !important;
  flex-direction: column;
}

/* Portrait A5 card */
.cp {
  width: 559px;
  height: 794px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Landscape A5 card */
.cl {
  width: 794px;
  padding: 6px 8px;
}


/* ───────────────────────────────────────────────────────────────
   7. CARD ELEMENTS
   ─────────────────────────────────────────────────────────────── */

/* Underline placeholder (e.g. for player name) */
.uline {
  border-bottom: 1px solid #000;
  display: inline-block;
  min-width: 60px;
  padding-bottom: 1px;
}

/* Result box (single column) */
.rbox {
  border: 2px solid #000;
  font-size: 8px;
  font-weight: 700;
}

.rbox .rh {
  text-align: center;
  padding: 2px;
  border-bottom: 1px solid #000;
}

.rbox .rv {
  height: 24px;
}

/* Result box (two columns: label | value) */
.rbox2 {
  border: 2px solid #000;
  display: grid;
  grid-template-columns: 1fr 55px;
  font-size: 8px;
  font-weight: 700;
}

.rbox2 .rh {
  text-align: center;
  padding: 2px;
  border-bottom: 1px solid #000;
}

.rbox2 .rh:first-child {
  border-right: 1px solid #000;
}

.rbox2 .rv {
  height: 24px;
}

.rbox2 .rv:first-child {
  border-right: 1px solid #000;
}

/* Grey notice banner at top of some cards */
.gnotice {
  background: #d0d0d0;
  font-size: 7px;
  font-weight: 700;
  padding: 2px 5px;
  border: 1px solid #888;
  margin-bottom: 3px;
}


/* ───────────────────────────────────────────────────────────────
   8. TABLES
   .ct       = standard table
   .ct-fill  = flex-stretch version (fills remaining card height)
   Row classes:
     .hr = hole row
     .or = Out row
     .sr = summary row (In / Out / Total)
     .fr = footer row (Scratch Rating / Slope)
     .sig = signature row (Player / Marker)
   ─────────────────────────────────────────────────────────────── */
.ct {
  width: 100%;
  border-collapse: collapse;
  font-size: 7px;
}

/* Flex-fill version stretches to fill remaining card space */
.ct-fill {
  flex: 1;
  width: 100%;
  border-collapse: collapse;
  height: 1px;
}

.ct-fill tr {
  height: 0;
}

.ct-fill tr.hr td,
.ct-fill tr.or td,
.ct-fill tr.sr td,
.ct-fill tr.fr td {
  height: inherit;              /* rows stretch to fill available space */
}

/* All cells */
.ct td,
.ct th {
  border: 1px solid #000;
  padding: 1px 2px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}

/* Column header row */
.ct th {
  font-weight: 700;
  font-size: 6px;
  background: #fff;
  height: 16px;
}

/* Hole rows */
.ct .hr td {
  height: 14px;
}

/* Out / In / Total rows */
.ct .or td,
.ct .sr td {
  font-weight: 700;
  font-size: 7px;
  height: 13px;
}

/* Footer rows (Rating / Slope) */
.ct .fr td {
  font-size: 6.5px;
  height: 13px;
}

/* Signature / Player-Marker row */
.ct .sig td {
  font-size: 9px;
  font-weight: 700;
  text-align: left;
  padding: 1px 4px;
  height: 22px;
  border-top: 2px solid #000;
}


/* ───────────────────────────────────────────────────────────────
   9. SCORE GRID (portrait strokeplay — right side panel)
   ─────────────────────────────────────────────────────────────── */

/* Outer grey wrapper */
.sgw {
  background: #d0d0d0;
  padding: 2px;
  border: 1px solid #000;
  margin-bottom: 3px;
}

/* Header label row */
.slr {
  display: grid;
  font-size: 7px;
  font-weight: 700;
  background: #bbb;
  text-align: center;
  border-bottom: 1px solid #888;
}

/* Data row */
.sdr {
  display: grid;
  background: #fff;
  border-bottom: 1px solid #ccc;
}

.sdr:last-child {
  border-bottom: none;
}

/* Individual score cell */
.sc {
  border-right: 1px solid #ccc;
  text-align: center;
  font-size: 8px;
  min-height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sc:last-child {
  border-right: none;
}

/* Thick divider bar between front/back columns */
.sc.wbar {
  background: #555;
  min-width: 5px;
  padding: 0;
  border-right: 2px solid #000;
}


/* ───────────────────────────────────────────────────────────────
   10. LANDSCAPE HEADER ROWS
   ─────────────────────────────────────────────────────────────── */
.lhdr {
  border: 1px solid #000;
  margin-bottom: 3px;
  font-size: 8px;
}

.lrow {
  display: flex;
  border-bottom: 1px solid #000;
}

.lrow:last-child {
  border-bottom: none;
}

.lc {
  border-right: 1px solid #000;
  padding: 2px 4px;
  display: flex;
  align-items: center;
  gap: 3px;
}

.lc:last-child {
  border-right: none;
}

.lc b {
  font-weight: 700;
  white-space: nowrap;
  font-size: 8px;
}

.lc span {
  font-size: 8px;
}

.lv {
  border-bottom: 1px solid #000;
  min-width: 40px;
  display: inline-block;
}


/* ═══════════════════════════════════════════════════════════════
   11. PRINT STYLES
   Controls how the card prints on A5 paper.
   To adjust print size/font — edit values here.
   ═══════════════════════════════════════════════════════════════ */
@media print {

  /* Page size: A5 portrait, 4mm margins all around */
  @page {
    size: 148mm 210mm portrait;
    margin: 4mm;
  }

  html, body {
    width: 140mm;
    height: 202mm;
    margin: 0;
    padding: 0;
  }

  /* Force background colours and images to print */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  /* Hide everything except the active card */
  body * {
    visibility: hidden;
  }

  .card.active,
  .card.active * {
    visibility: visible;
  }

  /* Active card fills the printable area */
  .card.active {
    position: fixed;
    left: 0;
    top: 0;
    width: 140mm;
    height: 202mm;
    box-shadow: none;
    border: 2px solid #000 !important;   /* ← Outer border thickness */
    padding: 0;
    margin: 0;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
  }

  /* Table stretches to fill remaining card height */
  .card.active table.ct-fill {
    flex: 1 !important;
    width: 100%;
    height: 1px !important;
    border-collapse: collapse;
    border-left: 2px solid #000 !important;
    border-right: 2px solid #000 !important;
    border-bottom: 2px solid #000 !important;
  }

  .card.active table.ct-fill tr {
    height: 0 !important;
  }

  /* Thick outer borders on first and last cell of every row */
  .card.active .ct td:first-child,
  .card.active .ct th:first-child {
    border-left: 2px solid #000 !important;
  }

  .card.active .ct td:last-child,
  .card.active .ct th:last-child {
    border-right: 2px solid #000 !important;
  }

  /* ── FONT SIZES FOR PRINT ──
     Edit these to make text bigger or smaller on the printed card */

  /* All table cells */
  .card.active .ct td,
  .card.active .ct th {
    font-size: 8.5pt !important;
    padding: 0 0.5mm !important;
    overflow: hidden;
  }

  /* Column header row */
  .card.active .ct th {
    font-size: 7.5pt !important;
  }

  /* Out / In / Total rows */
  .card.active .ct .or td,
  .card.active .ct .sr td {
    font-size: 8.5pt !important;
  }

  /* Footer rows (Scratch Rating / Slope / Deduct) */
  .card.active .ct .fr td {
    font-size: 5.5pt !important;
    white-space: normal !important;
    line-height: 1.1 !important;
    vertical-align: middle !important;
  }

  /* Player / Marker signature row */
  .card.active .ct .sig td {
    font-size: 12pt !important;
  }

  /* Separator gap between front and back 9 */
  .card.active .ct tr[style*="background:#e8e8e8"] td {
    font-size: 1pt !important;
  }

  /* ── HEADER TEXT SIZES ──
     Player name, Date, Time, Competition etc. */
  .card.active [style*="font-size:12px"] { font-size: 11pt !important; }
  .card.active [style*="font-size:11px"] { font-size: 10pt !important; }
  .card.active [style*="font-size:9.5px"] { font-size: 9.5pt !important; }
  .card.active [style*="font-size:10px"] { font-size: 9.5pt !important; }

  /* Hide UI elements */
  .topbar,
  .dash,
  .plbl {
    display: none !important;
  }
}