/* Baseball Lineup Manager — Shared Styles (Lineup Logic brand) */

.blm-wrap {
  /* Brand tokens */
  --blm-blue-900:#002b5c; --blm-blue-800:#003d80; --blm-blue-700:#004da2;
  --blm-blue-400:#5fa2d5; --blm-blue-200:#bcdaf0; --blm-blue-100:#e2eff9; --blm-blue-50:#f3f8fc;
  --blm-crimson:#b20031; --blm-crimson-700:#8a0026; --blm-crimson-100:#fbe4ea;
  --blm-gold:#d98a00; --blm-gold-100:#f8ead1;
  --blm-success:#1f8a53;
  --blm-ink:#14202e; --blm-slate-600:#4a5b6d; --blm-slate-500:#697787;
  --blm-slate-300:#c2ccd6; --blm-slate-200:#dfe5eb; --blm-slate-100:#eef2f6; --blm-slate-50:#f7f9fb;
  --blm-fd:'Barlow Condensed','Barlow',sans-serif;
  --blm-fb:'Barlow',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --blm-r-md:8px; --blm-r-lg:14px;
  --blm-sh-sm:0 1px 3px rgba(20,32,46,.08); --blm-sh-md:0 8px 24px rgba(20,32,46,.12);

  font-family: var(--blm-fb);
  color: var(--blm-ink);
  max-width: 1400px;
  margin: 0 auto;
  padding: 1rem;
}
.blm-wrap * { box-sizing: border-box; }

/* Header / subtitle (the "Game Sheet" h2 is removed from the templates) */
.blm-header { text-align: center; margin-bottom: 1.5rem; }
.blm-header h2 { font-family: var(--blm-fd); font-weight: 700; font-size: 1.9rem; color: var(--blm-ink); margin: 0 0 .25rem; }
.blm-header .blm-subtitle {
  font-family: var(--blm-fd); text-transform: uppercase; letter-spacing: .1em;
  font-weight: 600; font-size: 1rem; color: var(--blm-blue-700);
}

/* Section headings */
.blm-setup-col h3 {
  font-family: var(--blm-fd); text-transform: uppercase; letter-spacing: .04em;
  font-weight: 700; font-size: 1.2rem; color: var(--blm-ink); margin: 0 0 .75rem;
}

/* Player entry list */
.blm-player-entry { list-style: none; padding-left: 0; margin: 0; }
.blm-player-entry li {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; padding: .35rem .4rem;
  background: #fff; border-radius: var(--blm-r-md); border: 1px solid var(--blm-slate-200);
}
.blm-batting-number { font-family: var(--blm-fd); font-weight: 700; color: var(--blm-slate-500); min-width: 25px; text-align: center; }
.blm-name-input, .blm-jersey-input {
  padding: .45rem .6rem; border: 1.5px solid var(--blm-slate-300); font-size: .9rem;
  border-radius: var(--blm-r-md); font-family: var(--blm-fb); color: var(--blm-ink);
}
.blm-name-input:focus, .blm-jersey-input:focus { outline: none; border-color: var(--blm-blue-700); }
.blm-name-input { flex: 2; }
.blm-jersey-input { flex: 1; max-width: 80px; }
.blm-remove-player {
  background: var(--blm-crimson); color: #fff; border: none; border-radius: 4px;
  padding: .25rem .5rem; cursor: pointer; font-size: .7rem; font-weight: 700;
}
.blm-remove-player:hover { background: var(--blm-crimson-700); }

/* Controls */
.blm-controls-top {
  background: #fff; padding: 15px; border-radius: var(--blm-r-lg); box-shadow: var(--blm-sh-sm);
  border: 1px solid var(--blm-slate-200); margin-bottom: 20px; text-align: center;
}
.blm-controls-top .blm-btn { margin: 0 4px; }

.blm-btn {
  font-family: var(--blm-fd); text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
  display: inline-block; padding: .55rem 1.1rem; font-size: .9rem; border: 1.5px solid transparent;
  border-radius: var(--blm-r-md); cursor: pointer; text-align: center; vertical-align: middle;
  line-height: 1.2; transition: .15s;
}
.blm-btn-success { background: var(--blm-success); color: #fff; border-color: var(--blm-success); }
.blm-btn-success:hover { background: #187443; }
.blm-btn-danger { background: var(--blm-crimson); color: #fff; border-color: var(--blm-crimson); }
.blm-btn-danger:hover { background: var(--blm-crimson-700); }
.blm-btn-primary { background: var(--blm-blue-700); color: #fff; border-color: var(--blm-blue-700); }
.blm-btn-primary:hover { background: var(--blm-blue-800); }
.blm-btn-outline-secondary { background: transparent; color: var(--blm-slate-600); border-color: var(--blm-slate-300); }
.blm-btn-outline-secondary:hover { background: var(--blm-slate-100); color: var(--blm-blue-700); border-color: var(--blm-blue-700); }
.blm-btn-outline-danger { background: transparent; color: var(--blm-crimson); border-color: var(--blm-crimson); }
.blm-btn-outline-danger:hover { background: var(--blm-crimson); color: #fff; }
.blm-btn-outline-primary { background: transparent; color: var(--blm-blue-700); border-color: var(--blm-blue-700); }
.blm-btn-outline-primary:hover { background: var(--blm-blue-700); color: #fff; }
.blm-btn-sm { padding: .3rem .7rem; font-size: .8rem; }

/* Layout sections */
.blm-setup-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; margin-bottom: 1.5rem; }
.blm-setup-col { flex: 1; min-width: 280px; max-width: 450px; }
.blm-copy-inning {
  background: #fff; border-radius: var(--blm-r-lg); padding: 20px;
  box-shadow: var(--blm-sh-sm); border: 1px solid var(--blm-slate-200);
}
.blm-copy-inning label {
  display: block; margin-bottom: .25rem; font-family: var(--blm-fd);
  text-transform: uppercase; letter-spacing: .05em; font-size: .8rem; font-weight: 600; color: var(--blm-slate-600);
}
.blm-copy-inning select {
  width: 100%; padding: .5rem; border: 1.5px solid var(--blm-slate-300);
  border-radius: var(--blm-r-md); margin-bottom: .75rem; font-family: var(--blm-fb);
}
.blm-hr { border: none; border-top: 1px solid var(--blm-slate-200); margin: 1.5rem 0; }

/* Inning grid */
.blm-inning-wrapper { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 1rem; }
.blm-game-inning {
  background: #fff; border: 1px solid var(--blm-slate-200); border-radius: var(--blm-r-lg);
  position: relative; padding: 1rem 1.25rem; max-width: 380px; flex: 1 0 calc(33.333% - 1rem);
  margin: 10px; box-shadow: var(--blm-sh-sm);
}
.blm-inning-number {
  font-family: var(--blm-fd); font-weight: 700; font-size: 1.5rem; color: var(--blm-blue-700);
  padding: .15rem .7rem; background: var(--blm-blue-50); border-radius: var(--blm-r-md);
  display: inline-block; margin-bottom: .5rem;
}

/* Field positions wrapper — match the SVG aspect ratio so the % coords map
   linearly at any width. */
.blm-field-wrapper {
  position: relative; width: 100%; max-width: 360px; margin: 0 auto;
  aspect-ratio: 300 / 305; background-size: contain; background-repeat: no-repeat; background-position: center;
}
.blm-position {
  position: absolute; z-index: 10; transform: translate(-50%, -50%);
}
.blm-position select {
  width: 110px; padding: 3px 6px; font-size: 11px; border: 1.5px solid var(--blm-blue-700);
  border-radius: 5px; background: #fff; font-family: var(--blm-fd); font-weight: 600; color: var(--blm-blue-800);
}
.blm-position select:focus { outline: none; border-color: var(--blm-blue-800); box-shadow: none; }

/* Field position coordinates — % mapped to the blue field (viewBox 0 -20 300 305). */
.blm-pos-pitcher      { top: 70%; left: 50%; }
.blm-pos-catcher      { top: 91%; left: 50%; }
.blm-pos-first-base   { top: 62%; left: 82%; }
.blm-pos-second-base  { top: 44%; left: 68%; }
.blm-pos-shortstop    { top: 44%; left: 32%; }
.blm-pos-third-base   { top: 62%; left: 18%; }
.blm-pos-left-field   { top: 26%; left: 24%; }
.blm-pos-center-field { top: 16%; left: 50%; }
.blm-pos-right-field  { top: 26%; left: 76%; }

/* Bench */
.blm-bench-section {
  position: relative; background: var(--blm-blue-50); border: 2px dashed var(--blm-blue-700);
  border-radius: var(--blm-r-md); padding: 10px 12px; min-height: 40px; margin-top: 10px;
}
.blm-bench-header {
  font-family: var(--blm-fd); text-transform: uppercase; letter-spacing: .06em;
  font-weight: 600; color: var(--blm-blue-700); margin-bottom: 8px; font-size: .8rem;
}
.blm-bench-list { display: flex; flex-wrap: wrap; gap: 6px; }
.blm-bench-player {
  background: var(--blm-blue-100); border: 1px solid var(--blm-blue-200); color: var(--blm-blue-800);
  padding: 4px 10px; border-radius: 999px; font-size: 11px; cursor: grab; transition: all .2s;
  font-family: var(--blm-fd); font-weight: 600;
}
.blm-bench-player:hover { background: var(--blm-blue-700); color: #fff; transform: translateY(-1px); }
.blm-bench-player.dragging { opacity: .5; cursor: grabbing; }
.blm-position.drag-over { background-color: rgba(0,77,162,.12); border-radius: 8px; }

/* Responsive */
@media (max-width: 991px) {
  .blm-game-inning { flex: 1 0 calc(50% - 1rem); max-width: 45%; }
}
@media (max-width: 575px) {
  .blm-game-inning { flex: 1 0 100%; max-width: 100%; }
  .blm-position select { width: 90px; font-size: 10px; }
}

/* ==================================================================
   Shared panels (LL, All-Stars, softball, HS)
   ================================================================== */

/* Substitute list */
.blm-sub-list-section { margin-top: 1.5rem; padding-top: 1rem; border-top: 2px solid var(--blm-slate-200); }
.blm-sub-list-section h3 {
  font-family: var(--blm-fd); text-transform: uppercase; letter-spacing: .04em;
  font-size: 1.1rem; margin-bottom: .75rem; color: var(--blm-slate-600);
}
.blm-player-entry.blm-sub-entry li { border-color: var(--blm-gold); background: var(--blm-gold-100); }
.blm-sub-badge {
  background: var(--blm-gold); color: #5c3b00; font-family: var(--blm-fd); text-transform: uppercase;
  letter-spacing: .04em; font-size: 9px; font-weight: 700; padding: 1px 8px; border-radius: 999px; white-space: nowrap;
}

/* Re-entry / status text + dots */
.blm-status-eligible { color: var(--blm-success); }
.blm-status-out      { color: var(--blm-crimson); }
.blm-status-in       { color: var(--blm-blue-700); }

.blm-eligibility-section {
  background: var(--blm-blue-50); border: 1px solid var(--blm-blue-200); border-radius: var(--blm-r-md);
  padding: 8px 10px; margin-top: 8px; font-size: 11px;
}
.blm-eligibility-header {
  font-family: var(--blm-fd); text-transform: uppercase; letter-spacing: .05em;
  font-weight: 600; color: var(--blm-blue-700); margin-bottom: 4px; font-size: 12px;
}
.blm-eligibility-list { list-style: none; padding: 0; margin: 0; }
.blm-eligibility-list li {
  padding: 2px 0; border: none; background: none; display: flex; align-items: center; gap: 4px; font-size: 11px;
}
.blm-eligibility-list li .blm-status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.blm-status-dot.active    { background: var(--blm-success); }
.blm-status-dot.reentry   { background: var(--blm-gold); }
.blm-status-dot.exhausted { background: var(--blm-crimson); }

/* Warning / alert banners */
.blm-alert { padding: 8px 12px; border-radius: var(--blm-r-md); margin-top: 8px; font-size: 12px; font-weight: 500; }
.blm-alert-warning { background: var(--blm-gold-100); border: 1px solid var(--blm-gold); color: #5c3b00; }
.blm-alert-danger  { background: var(--blm-crimson-100); border: 1px solid var(--blm-crimson); color: var(--blm-crimson-700); }
.blm-alert-success { background: #e2f2ea; border: 1px solid #9cd2b4; color: #0f5132; }

/* Rules reference panel */
.blm-rules-panel {
  background: var(--blm-slate-50); border: 1px solid var(--blm-slate-200); border-radius: var(--blm-r-md);
  padding: 12px 16px; margin-top: 1rem; font-size: 12px; line-height: 1.5;
}
.blm-rules-panel h4 {
  font-family: var(--blm-fd); text-transform: uppercase; letter-spacing: .04em; font-size: 13px; margin: 0 0 6px; color: var(--blm-ink);
}
.blm-rules-panel p  { margin: 0 0 4px; color: var(--blm-slate-600); }
.blm-rules-panel .blm-rule-item { padding-left: 12px; border-left: 3px solid var(--blm-blue-700); margin-bottom: 6px; }