/* ============================================================
   SCORECARD — Stylesheet
   ============================================================ */

/* ── Stats Bar ── */
.sc-stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 28px;
}
.sc-stat { background: var(--white); padding: 20px 16px; text-align: center; }
.sc-stat-val {
  font-family: var(--font-display);
  font-size: 32px;
  letter-spacing: 0.02em;
  color: var(--ink);
  line-height: 1;
}
.sc-stat-lbl {
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
}

/* ── Scorecard List ── */
.sc-list { display: flex; flex-direction: column; gap: 2px; }
.sc-row {
  display: grid;
  grid-template-columns: 64px 1fr auto 24px;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink);
  transition: all 0.15s;
}
.sc-row:hover {
  border-color: var(--green);
  box-shadow: var(--shadow);
  transform: translateX(3px);
  text-decoration: none;
}
.sc-row-date { text-align: center; }
.sc-day { display: block; font-family: var(--font-display); font-size: 28px; line-height: 1; color: var(--ink); }
.sc-month { display: block; font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; }
.sc-course-name { font-weight: 500; font-size: 15px; color: var(--ink); }
.sc-holes-tag { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.sc-row-score { text-align: right; }
.sc-total-score { font-family: var(--font-display); font-size: 28px; line-height: 1; color: var(--ink); }
.sc-vs-par {
  font-size: 12px; font-weight: 600; margin-top: 2px;
  display: inline-block; padding: 1px 8px; border-radius: 10px;
}
.sc-row-arrow { color: var(--ink-3); font-size: 18px; }

/* Score colours (list row badges) */
.sc-eagle-plus { background: #ffd700; color: #5a4000; }
.sc-par        { background: var(--green-pale); color: var(--green); }
.sc-bogey      { background: #fdecea; color: #c0392b; }
.sc-double-plus { background: #c0392b; color: #fff; }

/* ── Result Badge (view page) ── */
.sc-result-badge {
  border-radius: var(--radius);
  padding: 16px 24px;
  text-align: center;
  min-width: 120px;
}
.sc-result-score { font-family: var(--font-display); font-size: 56px; line-height: 1; }
.sc-result-diff  { font-size: 13px; font-weight: 500; margin-top: 4px; }
.sc-result-under    { background: #ffd700; color: #5a4000; }
.sc-result-par      { background: var(--green-pale); color: var(--green); }
.sc-result-over     { background: #fdecea; color: #c0392b; }
.sc-result-over-big { background: #c0392b; color: #fff; }

/* ── Scorecard Card ── */
.sc-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 32px;
}
.sc-section-label {
  background: var(--ink);
  color: #f0efe9;
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.08em;
  padding: 8px 16px;
}
[data-theme="dark"] .sc-section-label { background: #0c0c0a; }

/* ── Scorecard View Table ── */
.sc-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sc-view-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 600px;
}
.sc-view-table th,
.sc-view-table td {
  text-align: center;
  padding: 8px 6px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  min-width: 36px;
}
.sc-view-table th:last-child,
.sc-view-table td:last-child { border-right: none; }
.sc-th-label {
  text-align: left !important;
  padding-left: 14px !important;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
  min-width: 60px !important;
  background: var(--bg-2);
}
.sc-th-out, .sc-th-in { background: var(--bg-2); font-weight: 700; color: var(--ink); }
.sc-th-total { background: var(--ink); color: #f0efe9; font-weight: 700; }
[data-theme="dark"] .sc-th-total { background: #0c0c0a; }
.sc-par-row { background: var(--bg-2); }
.sc-par-row td, .sc-par-row th { color: var(--ink-3); font-size: 12px; }
.sc-yds-row td, .sc-yds-row th { color: var(--ink-3); font-size: 11px; background: var(--bg); }
.sc-si-row  td, .sc-si-row  th { color: var(--ink-3); font-size: 11px; }
.sc-score-row td, .sc-score-row th { font-weight: 700; font-size: 15px; }
.sc-score-total { font-family: var(--font-display); font-size: 20px !important; }

/* ── Hole Score Highlights ── */
.sc-hole-score { position: relative; padding: 6px !important; }
.sc-score-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  font-size: 13px;
  font-weight: 700;
}

/* Eagle — gold double circle */
.sc-eagle .sc-score-inner {
  background: #ffd700;
  color: #5a4000;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #ffd700;
}
/* Birdie — filled green circle */
.sc-birdie .sc-score-inner {
  background: var(--green);
  color: #fff;
  border-radius: 50%;
}
/* Par — plain text */
.sc-par-hole .sc-score-inner { color: var(--ink); }
/* Bogey — single red square outline */
.sc-bogey .sc-score-inner {
  border: 2px solid #c0392b;
  border-radius: 3px;
  color: #c0392b;
}
/* Double — filled red square */
.sc-double .sc-score-inner {
  background: #c0392b;
  color: #fff;
  border-radius: 3px;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #c0392b;
}
/* Triple+ — dark red filled square */
.sc-triple-plus .sc-score-inner {
  background: #7b0000;
  color: #fff;
  border-radius: 3px;
}

/* ── Legend — solid swatches ── */
.sc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.sc-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-3);
}
.sc-legend-swatch {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  flex-shrink: 0;
}
.sc-legend-eagle  { background: #ffd700; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #ffd700; }
.sc-legend-birdie { background: var(--green); border-radius: 50%; }
.sc-legend-par    { background: var(--bg-2); border: 1px solid var(--line); }
.sc-legend-bogey  { background: transparent; border: 2px solid #c0392b; }
.sc-legend-double { background: #c0392b; }
.sc-legend-triple { background: #7b0000; }

/* ── Entry Form ── */
.sc-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sc-entry-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sc-entry-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 500px;
}
.sc-entry-table th {
  background: var(--ink);
  color: #f0efe9;
  padding: 10px 8px;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
[data-theme="dark"] .sc-entry-table th { background: #0c0c0a; }
.sc-entry-table td { padding: 4px; border-bottom: 1px solid var(--line); text-align: center; }
.sc-entry-table input[type="number"] {
  width: 56px;
  padding: 7px 4px;
  text-align: center;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
}
.sc-entry-table input[type="number"]:focus { outline: none; border-color: var(--green); }
.sc-entry-table .hole-num { font-family: var(--font-display); font-size: 18px; color: var(--ink); width: 40px; }
.sc-entry-table .score-cell input { font-weight: 700; }
.sc-entry-table tr.sc-nine-break td { border-top: 3px solid var(--ink); }
.sc-totals-row td { padding: 12px 8px; font-family: var(--font-display); font-size: 18px; background: var(--bg-2); }
.sc-result-live {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
}

/* ── Course Search ── */
.course-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  z-index: 100;
  max-height: 280px;
  overflow-y: auto;
  margin-top: 4px;
}
.course-suggestion-item {
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  transition: background 0.1s;
}
.course-suggestion-item:last-child { border-bottom: none; }
.course-suggestion-item:hover { background: var(--green-pale); }
.cs-name { font-weight: 500; font-size: 14px; color: var(--ink); }
.cs-meta { font-size: 12px; color: var(--ink-3); margin-top: 2px; }

/* ── Responsive ── */
@media (max-width: 640px) {
  .sc-stats-bar { grid-template-columns: 1fr 1fr; }
  .sc-row { grid-template-columns: 56px 1fr auto; }
  .sc-row-arrow { display: none; }
  .sc-form-grid { grid-template-columns: 1fr; }
  .sc-form-grid > div[style*="grid-column"] { grid-column: 1 !important; }
}