/* Scorecard photo-import review modal — cross-platform.
   The button is visible everywhere now (web/PWA/iOS/Android) because the
   scan runs against a Cloud Function (Gemini via Vertex AI) using the
   browser's native <input type="file" capture> camera flow. */

#scorecardImportBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Accuracy caveat shown in the pre-scan confirm dialog — a full-width amber
   note reminding users to verify OCR results before saving. */
.scorecard-import-scan-caveat {
  margin: 8px 0 4px;
  padding: 8px 10px;
  font-size: var(--text-sm, 13px);
  line-height: 1.35;
  color: var(--warn, #f39c12);
  background: rgba(243, 156, 18, 0.12);
  border: 1px solid rgba(243, 156, 18, 0.45);
  border-radius: 8px;
  text-align: left;
}

/* Overlay */
.scorecard-import-overlay {
  position: fixed;
  inset: 0;
  z-index: 10100;  /* above hamburger side menu (10040) */
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  /* center (not stretch) so the sheet sizes to its content and is bounded by
     its max-height instead of filling the whole screen. Use the JS-injected
     --safe-*-inset vars (Android WebView reports 0 for env(safe-area-inset-*),
     which is why the sheet used to clip under the status / nav bars). */
  align-items: center;
  justify-content: center;
  animation: scorecardImportFadeIn 150ms ease-out;
  padding: max(var(--safe-top-inset, env(safe-area-inset-top, 0px)), 12px) 0
           max(var(--safe-bottom-inset, env(safe-area-inset-bottom, 0px)), 12px);
}
.scorecard-import-overlay--closing {
  animation: scorecardImportFadeOut 150ms ease-in forwards;
}
@keyframes scorecardImportFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes scorecardImportFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Sheet — full-width on phone, max-width on larger */
.scorecard-import-sheet {
  /* Solid surface — --panel is semi-transparent in dark mode (rgba .9), which
     let the dimmed backdrop bleed through the scan sheet. */
  background: var(--panel-solid, var(--panel, #2a3038));
  color: var(--ink, #ffffff);
  width: 100%;
  max-width: 1100px;
  margin: 0 12px;
  /* ~25% shorter than full-screen and never taller than the safe area (100%
     of the inset-padded overlay). The table area scrolls within. */
  max-height: min(75dvh, 100%);
  border-radius: var(--radius-xl, 12px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  line-height: 1.05;
}

/* Header */
.scorecard-import-header {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--line, #556170);
  flex: 0 0 auto;
}
.scorecard-import-header h2 {
  margin: 0;
  font-size: var(--text-xl, 16px);
  font-weight: 600;
}
.scorecard-import-progress-actions {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 4px;
}
.scorecard-import-progress-cancel-btn {
  min-height: 36px;
  padding: 8px 14px;
  border: 1px solid rgba(173, 181, 189, 0.35);
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink, #ffffff);
}
.scorecard-import-progress-cancel-btn:hover {
  background: rgba(255, 255, 255, 0.08);
}
.scorecard-import-progress-cancel-btn:active {
  background: rgba(255, 255, 255, 0.12);
}
.scorecard-import-subtitle {
  margin: 4px 0 0;
  font-size: var(--text-sm, 12px);
  color: var(--muted, #adb5bd);
}
/* Warn modifier — flags when some scanned rows couldn't be matched to a hole
   (dropped) so the user knows to enter those by hand instead of assuming the
   scan covered every hole. Amber, distinct from the neutral subtitle. */
.scorecard-import-subtitle--warn {
  color: var(--warn, #e0a800);
}

/* Table area — scrollable both axes */
.scorecard-import-table-wrap {
  flex: 1 1 auto;
  overflow: auto;
  padding: 6px;
  -webkit-overflow-scrolling: touch;
}
.scorecard-import-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: var(--text-sm, 12px);
}
.scorecard-import-table th,
.scorecard-import-table td {
  border-bottom: 1px solid var(--line, #556170);
  padding: 2px;
  text-align: center;
  vertical-align: middle;
  min-width: 32px;
}
.scorecard-import-table thead th {
  background: var(--panel-alt, #343d47);
  position: sticky;
  top: 0;
  z-index: 2;
}
.scorecard-import-table .scorecard-import-name-col {
  text-align: left;
  min-width: 110px;
  position: sticky;
  left: 0;
  /* --panel-solid avoids ghosting from score columns that scroll
     horizontally under the sticky name column. */
  background: var(--panel-solid, var(--panel, #2a3038));
  z-index: 1;
}
.scorecard-import-table thead .scorecard-import-name-col {
  background: var(--panel-alt, #343d47);
  z-index: 3;
}
.scorecard-import-divider-col {
  width: 16px;
  min-width: 16px;
  padding: 0 6px 0 0;
  background: transparent;
  border-left: 2px solid var(--line, #556170);
  border-bottom-color: transparent;
}
/* Gap after the front-nine divider column (hole 10 sits in column 12). */
.scorecard-import-table th:nth-child(12),
.scorecard-import-table td:nth-child(12) {
  padding-left: 10px;
}
.scorecard-import-summary-col {
  min-width: 56px;
  width: 56px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, 0.04);
}
.scorecard-import-par-row td,
.scorecard-import-par-row th {
  background: var(--panel-alt, #343d47);
  color: var(--muted, #adb5bd);
  font-weight: 600;
}

/* Score input cells — match the main #scorecard .score-input style:
   black cell, rounded border, white digits. The explicit `color` +
   `-webkit-text-fill-color` is required for iOS WKWebView, which
   ignores `color: inherit` on form inputs and falls back to the
   system default (which renders dark on dark and is invisible). */
.scorecard-import-score-cell {
  min-width: 46px;
  width: 46px;
  padding: 2px 1px;
}
.scorecard-import-score-input {
  width: 100%;
  box-sizing: border-box;
  background: #000000;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
  border: 2px solid var(--line, #556170);
  border-radius: var(--radius-md, 8px);
  outline: none;
  text-align: center;
  /* Sized to fit two-digit scores comfortably on desktop Safari, which
     was clipping "10" etc. with the larger --text-lg. */
  font-size: var(--text-md, 14px);
  line-height: 1;
  font-family: inherit;
  font-weight: 500;
  padding: 2px 0;
  min-width: 42px;
  height: var(--touch-min);
  min-height: var(--touch-min);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.05em;
  -webkit-appearance: none;
  -moz-appearance: textfield;
  appearance: none;
}
.scorecard-import-score-input::-webkit-outer-spin-button,
.scorecard-import-score-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.scorecard-import-score-input:focus {
  border-color: var(--accent, #00bc8c);
  background: #0d1a16;
}

/* Name cell input — flat, transparent, matches main scorecard's .name-edit */
.scorecard-import-name-input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.10);
  color: var(--ink, #ffffff);
  -webkit-text-fill-color: var(--ink, #ffffff);
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-md, 8px);
  outline: none;
  text-align: left;
  font-size: var(--text-md, 14px);
  font-family: inherit;
  font-weight: 500;
  padding: 6px 8px;
}
.scorecard-import-name-input:focus {
  border-color: var(--accent, #00bc8c);
  background: rgba(0, 188, 140, 0.12);
}

:root[data-theme="light"] .scorecard-import-sheet {
  color: var(--ink, #0f2233);
}
:root[data-theme="light"] .scorecard-import-table thead th {
  background: rgba(244, 249, 255, 0.96);
  color: var(--ink, #0f2233);
}
:root[data-theme="light"] .scorecard-import-table .scorecard-import-name-col {
  background: rgba(255, 255, 255, 0.98);
  color: var(--ink, #0f2233);
}
:root[data-theme="light"] .scorecard-import-par-row td,
:root[data-theme="light"] .scorecard-import-par-row th,
:root[data-theme="light"] .scorecard-import-summary-col {
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink, #0f2233);
}
:root[data-theme="light"] .scorecard-import-divider-col {
  border-left-color: rgba(104, 137, 163, 0.38);
}
:root[data-theme="light"] .scorecard-import-score-input,
:root[data-theme="light"] .scorecard-import-name-input {
  background: #ffffff;
  color: #0f2233;
  -webkit-text-fill-color: #0f2233;
  border-color: rgba(104, 137, 163, 0.38);
}
:root[data-theme="light"] .scorecard-import-score-input:focus,
:root[data-theme="light"] .scorecard-import-name-input:focus {
  background: #ffffff;
}
:root[data-theme="light"] .scorecard-import-progress-cancel-btn {
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink, #0f2233);
  border-color: rgba(104, 137, 163, 0.45);
}
:root[data-theme="light"] .scorecard-import-progress-cancel-btn:hover {
  background: #ffffff;
}
:root[data-theme="light"] .scorecard-import-progress-cancel-btn:active {
  background: rgba(244, 249, 255, 0.98);
}

/* Footer */
.scorecard-import-footer {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--line, #556170);
  background: var(--panel, #2a3038);
}
.scorecard-import-cancel-btn {
  background: transparent;
  border: 1px solid var(--line, #556170);
  color: var(--ink, #ffffff);
}
.scorecard-import-save-btn {
  background: var(--accent, #00bc8c);
  color: #ffffff;
  border: none;
  font-weight: 600;
}

/* Progress overlay — shown while OCR is running. */
.scorecard-import-progress-overlay {
  position: fixed;
  inset: 0;
  z-index: 10110;  /* above the modal, in case both are mounted briefly */
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: scorecardImportFadeIn 150ms ease-out;
}
.scorecard-import-progress-box {
  background: var(--panel, #2a3038);
  color: var(--ink, #ffffff);
  padding: 22px 24px;
  border-radius: var(--radius-lg, 10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: min(92vw, 360px);
  box-shadow: 0 10px 40px var(--shadow, rgba(0, 0, 0, 0.45));
  transition: opacity 0.2s ease;
}
.scorecard-import-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid var(--line, #556170);
  border-top-color: var(--accent, #00bc8c);
  border-radius: 50%;
  animation: scorecardImportSpin 0.9s linear infinite;
}
@keyframes scorecardImportSpin {
  to { transform: rotate(360deg); }
}
.scorecard-import-progress-title {
  font-size: var(--text-xl, 16px);
  font-weight: 700;
  text-align: center;
}
.scorecard-import-progress-shell {
  width: 100%;
  margin: 6px 0 4px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 8px;
}
.scorecard-import-progress-track {
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line, #556170) 50%, transparent);
  overflow: hidden;
}
.scorecard-import-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent, #00bc8c) 80%, #ffffff 20%), var(--accent, #00bc8c));
  transition: width 0.2s ease;
}
.scorecard-import-progress-percent {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted, #adb5bd);
  min-width: 34px;
  text-align: right;
}
.scorecard-import-progress-label {
  font-size: var(--text-md, 14px);
  text-align: center;
  max-width: 280px;
  font-weight: 700;
}
.scorecard-import-progress-detail {
  font-size: var(--text-sm, 12px);
  text-align: center;
  max-width: 300px;
  color: var(--muted, #adb5bd);
  line-height: 1.35;
}

/* Error overlay */
.scorecard-import-overlay--error {
  align-items: center;
}
.scorecard-import-error-box {
  background: var(--panel, #2a3038);
  padding: 18px 18px 14px;
  border-radius: var(--radius-lg, 10px);
  max-width: 320px;
  width: calc(100% - 32px);
  text-align: center;
  box-shadow: 0 10px 40px var(--shadow, rgba(0, 0, 0, 0.45));
}
.scorecard-import-error-box p {
  margin: 0 0 14px;
  font-size: var(--text-md, 14px);
  line-height: 1.4;
}