/* Ketjusuunnittelun työtila */
.modal-card.lineup-wide { max-width: min(1700px, 97vw); width: 97vw; max-height: 96vh; }
.modal-card.lineup-wide .lineup-planner { max-height: none; overflow: visible; }

.lineup-topbar { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: flex-start; }
.lineup-topbar > * { margin: 0; }
.lineup-topbar .lineup-plan-meta { flex: 1 1 240px; }
.lineup-topbar fieldset { border: 0; padding: 0; min-width: 0; }

.lb { display: flex; flex-direction: column; gap: 1rem; }
.lb-roster { order: 2; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; padding: 0.75rem; }
.lb-main { order: 1; min-width: 0; }
.lb-roster-head { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.5rem; }
.lb-roster-head h4 { margin: 0; }
.lb-search .form-input { width: 100%; min-height: 44px; font-size: 16px; }
.lb-check { font-size: 0.85rem; color: var(--text-muted); display: flex; gap: 0.4rem; align-items: center; min-height: 32px; }
.lb-roster-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; max-height: 40vh; overflow-y: auto; }
.lb-p { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; padding: 0.5rem 0.65rem; min-height: 44px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-card); cursor: grab; user-select: none; }
.lb-p:hover { background: var(--bg-hover); }
.lb-p.is-placed { opacity: 0.6; }
.lb-p.is-selected, .lb-slot.is-selected { outline: 2px solid var(--accent); outline-offset: 1px; opacity: 1; }
.lb-p-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-badge { flex: none; font-size: 0.7rem; font-weight: 800; padding: 0.1rem 0.4rem; border-radius: 999px; background: var(--accent-fill); color: var(--accent-ink); }
.lb-none { color: var(--text-muted); font-size: 0.85rem; padding: 0.5rem; }
.lb-hint { margin: 0.5rem 0 0; }
.lb-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; }
.lb-actions .btn { min-height: 40px; }
.lb-paste { margin: 0 0 0.75rem; }
.lb-paste summary { cursor: pointer; font-weight: 700; min-height: 36px; display: flex; align-items: center; }
.lb-paste textarea { width: 100%; margin: 0.4rem 0; font-size: 16px; }

.lb-chains { display: grid; grid-template-columns: 1fr; gap: 0.75rem; align-items: start; }
.lb-chain { border: 1px solid var(--border-color); border-radius: 12px; padding: 0.6rem; background: var(--bg-secondary); }
.lb-chain header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem; }
.lb-chain h5 { margin: 0; font-size: 0.95rem; }
.lb-row { display: grid; gap: 0.4rem; margin-bottom: 0.4rem; }
.lb-row--f3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lb-row--f2, .lb-row--d { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lb-row--f3 .lb-slot:nth-child(2) { margin-top: 0.6rem; }
.lb-add-chain { min-height: 56px; border-style: dashed; }

.lb-slot { position: relative; display: flex; flex-direction: column; gap: 0.15rem; min-height: 64px; padding: 0.3rem 0.4rem; border: 1px dashed var(--border-color); border-radius: 10px; background: var(--bg-card); min-width: 0; }
.lb-slot.is-filled { border-style: solid; cursor: grab; }
.lb-slot.has-fuzzy { border-color: #f59e0b; }
.lb-slot.is-dragging { opacity: 0.4; }
.lb-slot.is-drop-target, .lb-roster.is-drop-target { outline: 2px dashed var(--accent); background: var(--bg-hover); }
.lb-pos { font-size: 0.68rem; font-weight: 800; color: var(--text-muted); letter-spacing: 0.04em; }
.lb-name { background: none; border: 0; color: var(--text-main); text-align: left; padding: 0.15rem 0; min-height: 32px; font: inherit; font-weight: 700; font-size: 0.88rem; line-height: 1.15; cursor: pointer; overflow-wrap: anywhere; }
.lb-name.lb-empty { color: var(--text-muted); font-weight: 500; }
.lb-tools { display: flex; gap: 0.25rem; justify-content: flex-end; }
.lb-tool { min-width: 36px; min-height: 36px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-secondary); color: var(--text-main); cursor: pointer; font-size: 0.9rem; }
.lb-tool:hover { background: var(--bg-hover); }
.lb-input { width: 100%; min-height: 44px; font-size: 16px; }
.lb-suggest { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; min-width: 220px; margin: 2px 0 0; padding: 0.25rem; list-style: none; background: var(--bg-card); border: 1px solid var(--accent); border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); max-height: 280px; overflow-y: auto; }
.lb-suggest li { display: flex; justify-content: space-between; gap: 0.5rem; align-items: center; padding: 0.55rem 0.6rem; min-height: 44px; border-radius: 8px; cursor: pointer; }
.lb-suggest li.is-active, .lb-suggest li:hover { background: var(--bg-hover); }
.lb-slot.is-editing { z-index: 31; }

@media (min-width: 900px) {
  .lb { display: grid; grid-template-columns: 290px minmax(0, 1fr); align-items: start; }
  .lb-roster { order: 0; position: sticky; top: 0; }
  .lb-main { order: 0; }
  .lb-roster-list { max-height: calc(96vh - 22rem); }
  .lb-chains { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .lb-name { font-size: 0.95rem; }
}
@media (max-width: 899px) {
  .modal-card.lineup-wide { width: 100%; max-width: 100%; max-height: 94vh; }
  .lb-row--f3 .lb-slot:nth-child(2) { margin-top: 0; }
}

/* Esikatselu (vain luku) ja kätisyysmerkit */
.hand-badge.hand-none { opacity: 0.45; }
.lb-name .hand-badge, .lb-p .hand-badge { margin-left: 0.25rem; vertical-align: middle; }
.lb-preview { display: none; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 12px; padding: 0.6rem; font-size: 0.75rem; }
.lb-preview h4 { margin: 0 0 0.4rem; font-size: 0.85rem; }
/* Salibandykenttä: vaalea lattia, valkoiset laidat, maalialue alhaalla */
.lbv-court { position: relative; display: flex; flex-direction: column; gap: 0.2rem; padding: 0.7rem 0.4rem 0.5rem; border: 4px solid #f4f6f8; border-radius: 28px; outline: 2px solid #8fa3b5; color: #12202e;
  background: radial-gradient(circle at 50% 8%, transparent 0 22px, rgba(40, 90, 160, 0.35) 23px 25px, transparent 26px), linear-gradient(180deg, #6fb7d9, #4f9cc4); }
.lbv-mid { position: absolute; left: 6%; right: 6%; top: 50%; height: 2px; background: rgba(255, 255, 255, 0.55); }
.lbv-band { position: relative; z-index: 1; padding: 0.35rem 0; border-top: 1px dashed rgba(255, 255, 255, 0.45); }
.lbv-band:first-of-type { border-top: 0; }
.lbv-crease { position: relative; z-index: 1; margin: 0.3rem 18% 0; padding: 0.4rem 0.2rem 0.2rem; border: 2px solid rgba(255, 255, 255, 0.85); border-bottom: 0; border-radius: 40px 40px 0 0; background: rgba(255, 255, 255, 0.2); }
.lbv-row { display: grid; gap: 0.2rem; }
.lbv-row--f3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lbv-row--f2, .lbv-row--d { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lbv-row--d { padding: 0 0.9rem; margin-top: 0.15rem; }
.lbv-crease .lbv-row--d { padding: 0; }
.lbv-pl { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; min-width: 0; text-align: center; }
.lbv-pl.is-center { margin-top: 0.8rem; }
.lbv-head { position: relative; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; font-size: 0.78rem; font-weight: 800; color: #fff; background: hsl(var(--h) 65% 42%); border: 2px solid #fff; box-shadow: 0 2px 4px rgba(10, 30, 50, 0.4); }
.lbv-pl.is-empty .lbv-head { background: rgba(255, 255, 255, 0.25); border-style: dashed; box-shadow: none; }
.lbv-pl.is-backup .lbv-head { opacity: 0.75; }
.lbv-head .hand-badge { position: absolute; right: -10px; bottom: -6px; transform: scale(0.7); }
.lbv-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.68rem; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(10, 30, 50, 0.7); }
.lbv-pl.is-empty .lbv-name { opacity: 0.6; font-weight: 600; }
@media (min-width: 1300px) {
  .lb { grid-template-columns: 270px minmax(0, 1fr) 300px; }
  .lb-preview { display: block; position: sticky; top: 0; max-height: calc(96vh - 14rem); overflow-y: auto; }
}