/* scoring.css — Scoring system styles */

/* Setup modal */
#scoring-setup-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
#scoring-setup-modal.hidden { display: none; }

#scoring-setup-card {
  background: var(--surface-glass, rgba(26,29,39,0.7));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 24px;
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#scoring-setup-header {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary, #e4e6ed);
  letter-spacing: 0.02em;
}

.scoring-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.scoring-field-label {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.scoring-sport-row,
.scoring-pf-row {
  display: flex;
  gap: 6px;
}

.btn-sport, .btn-pf {
  flex: 1;
  padding: 6px 10px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: rgba(255,255,255,0.7);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-sport.active, .btn-pf.active {
  background: #42a5ff;
  border-color: #42a5ff;
  color: #fff;
}
.btn-sport:hover:not(.active), .btn-pf:hover:not(.active) {
  background: rgba(255,255,255,0.12);
  color: #fff;
}

#scoring-hits-input {
  width: 60px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: var(--text-primary, #e4e6ed);
  font-size: 13px;
  font-weight: 600;
}
#scoring-hits-input:focus {
  outline: none;
  border-color: #42a5ff;
}

.scoring-setup-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
}

/* Add Scoring / Penalties buttons */
.btn-scoring {
  background: rgba(52,199,89,0.15);
  border: 1px solid rgba(52,199,89,0.4);
  color: #7ED99B;
  flex-shrink: 0;
}
.btn-scoring:hover:not(:disabled) {
  background: rgba(52,199,89,0.3);
}
.btn-scoring:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn-penalties {
  background: rgba(255,127,116,0.12);
  border: 1px solid rgba(255,127,116,0.35);
  color: #FF7B74;
  flex-shrink: 0;
}
.btn-penalties:hover:not(:disabled) {
  background: rgba(255,127,116,0.25);
}
.btn-penalties:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Penalties modal */
#penalties-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
#penalties-modal.hidden { display: none; }

#penalties-card {
  background: var(--surface-glass, rgba(26,29,39,0.7));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 20px 24px;
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.penalties-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary, #e4e6ed);
  letter-spacing: 0.02em;
}

.btn-modal-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.4);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
}
.btn-modal-close:hover { color: rgba(255,255,255,0.8); }

.penalties-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.penalty-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
}

.penalty-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.penalty-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #e4e6ed);
}

.penalty-pts {
  font-size: 11px;
  color: rgba(255,127,116,0.8);
  font-weight: 500;
}

.penalty-counter {
  display: flex;
  align-items: center;
  gap: 8px;
}

.penalty-minus, .penalty-plus {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.07);
  color: var(--text-primary, #e4e6ed);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  transition: background 0.12s;
}
.penalty-minus:hover, .penalty-plus:hover {
  background: rgba(255,255,255,0.15);
}

.penalty-count {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary, #e4e6ed);
  min-width: 20px;
  text-align: center;
}

/* Target type header row in shot log */
.shot-scoring-target-header td {
  padding: 5px 8px 3px;
  background: rgba(255,255,255,0.04);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.scoring-header-content {
  display: flex;
  align-items: center;
  gap: 8px;
}
.scoring-target-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 4px;
  padding: 1px 6px;
  color: #fff;
}
.scoring-type-btns {
  display: flex;
  gap: 4px;
}
.btn-target-type {
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.15);
  background: transparent;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.btn-target-type.active {
  background: rgba(255,255,255,0.18);
  color: #fff;
  border-color: rgba(255,255,255,0.3);
}
.btn-target-type:hover:not(.active) {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.8);
}

/* Score strip row */
.shot-score-strip td {
  padding: 3px 8px 5px;
  background: rgba(255,255,255,0.02);
}
.score-btns-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.btn-score {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.6);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  padding: 0;
}
.btn-score:hover {
  background: rgba(255,255,255,0.14);
  color: #fff;
}
.btn-score.active {
  color: #fff;
  border-color: transparent;
}

/* Scoring metric values */
#hit-factor-value {
  color: #7ED99B;
}

/* '?' extra-shot button — visually separated from zone buttons */
.btn-score-unknown {
  margin-left: 4px;
  color: rgba(255,255,255,0.35);
  border-color: rgba(255,255,255,0.1);
}
.btn-score-unknown.active {
  color: rgba(255,255,255,0.75);
}

/* Scoring metrics hidden until enabled — controlled by .hidden class */

/* Classifier search input */
#scoring-classifier-wrap {
  position: relative;
}
#scoring-classifier-input {
  width: 100%;
  padding: 6px 10px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: var(--text-primary, #e4e6ed);
  font-size: 12px;
  font-weight: 500;
  box-sizing: border-box;
}
#scoring-classifier-input:focus {
  outline: none;
  border-color: #42a5ff;
}

/* Classifier custom dropdown */
#scoring-classifier-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: rgba(18,20,28,0.98);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  max-height: 192px;
  overflow-y: auto;
  z-index: 200;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}
#scoring-classifier-dropdown.hidden { display: none; }

.scoring-classifier-option {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 7px 10px;
  cursor: pointer;
  transition: background 0.1s;
}
.scoring-classifier-option:hover,
.scoring-classifier-option.focused {
  background: rgba(66,165,255,0.18);
}
.scoring-classifier-code {
  font-size: 12px;
  font-weight: 700;
  color: #e4e6ed;
  flex-shrink: 0;
}
.scoring-classifier-name {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Division button row */
.scoring-division-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.btn-division {
  padding: 5px 9px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 7px;
  color: rgba(255,255,255,0.7);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn-division.active {
  background: #42a5ff;
  border-color: #42a5ff;
  color: #fff;
}
.btn-division:hover:not(.active) {
  background: rgba(255,255,255,0.12);
  color: #fff;
}

/* "(optional)" label suffix */
.scoring-field-optional {
  color: rgba(255,255,255,0.3);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  font-size: 10px;
}