/*
 * P31 — czytelniejsze sterowanie Replay, przypinanie zawodników
 * i analiza porównawcza odcinków.
 */

.ow-p31-transport {
  display: grid !important;
  grid-template-columns: 44px 44px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 7px !important;
  margin-bottom: 10px !important;
}

.ow-p31-transport .ow-rv4e-btn {
  min-width: 0 !important;
  height: 42px !important;
  padding: 0 10px !important;
}

.ow-p31-play,
.ow-p31-pause {
  border-color: #0f2c4f !important;
  color: #fff !important;
  background: #0f2c4f !important;
  font-size: 16px !important;
}

.ow-p31-play.is-active,
.ow-p31-pause.is-active {
  box-shadow: 0 0 0 3px rgba(13, 115, 204, .18) !important;
  background: #086bc1 !important;
}

.ow-p31-speed-group {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(28px, 1fr)) !important;
  gap: 5px !important;
}

.ow-p31-speed {
  height: 42px !important;
  padding: 0 8px !important;
  border: 1px solid #bdd2e5 !important;
  border-radius: 10px !important;
  color: #1d3d5b !important;
  background: #f5f9fd !important;
  font: inherit !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

.ow-p31-speed.is-active {
  border-color: #086bc1 !important;
  color: #fff !important;
  background: #086bc1 !important;
}

.ow-p31-clear {
  grid-column: 1 / -1 !important;
  height: 36px !important;
  color: #9f2424 !important;
  background: #fff5f5 !important;
}

.ow-p31-speed-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}

.ow-replay-pin {
  display: inline-grid !important;
  width: 24px !important;
  height: 24px !important;
  place-items: center !important;
  margin-right: 5px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: #7890a8 !important;
  background: transparent !important;
  font-size: 16px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.ow-replay-pin:hover,
.ow-replay-pin.is-pinned {
  color: #d97706 !important;
  background: #fff7df !important;
}

#ow-race-lite-panel tr.ow-replay-row-pinned td {
  background: #fffaf0 !important;
}

body[data-optiwake-active-view="replay"] #ow-race-lite-panel {
  width: min(460px, calc(100vw - 16px)) !important;
}

#optiwake-tracker-click-popover-v1 {
  z-index: 1000000 !important;
}

.ow-analysis-v2-controls {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(145px, 1fr)) !important;
  gap: 9px !important;
  margin: 0 0 14px !important;
  padding: 12px !important;
  border: 1px solid #dbe7ef !important;
  border-radius: 16px !important;
  background: #f8fbfd !important;
}

.ow-analysis-v2-controls label {
  display: grid !important;
  gap: 5px !important;
}

.ow-analysis-v2-controls label > span {
  color: #5f7488 !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
}

.ow-analysis-v2-controls input,
.ow-analysis-v2-controls select {
  width: 100% !important;
  min-width: 0 !important;
  height: 38px !important;
  padding: 0 10px !important;
  border: 1px solid #bfd1df !important;
  border-radius: 10px !important;
  color: #17324d !important;
  background: #fff !important;
  font: inherit !important;
  font-size: 12px !important;
  font-weight: 750 !important;
}

.ow-analysis-v2-comparison {
  margin-bottom: 15px !important;
  overflow: hidden !important;
  border: 1px solid #cfe1ed !important;
  border-radius: 18px !important;
  background: #fff !important;
}

.ow-analysis-v2-comparison-title {
  display: flex !important;
  align-items: end !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 12px 14px !important;
  background: linear-gradient(135deg, #edf7ff, #f4fbff) !important;
}

.ow-analysis-v2-comparison-title span,
.ow-analysis-v2-leg-insights > span {
  color: #086bc1 !important;
  font-size: 10px !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
}

.ow-analysis-v2-comparison-title h3,
.ow-analysis-v2-leg-insights h3 {
  margin: 2px 0 0 !important;
  color: #10233f !important;
  font-size: 16px !important;
}

.ow-analysis-v2-comparison-title small {
  color: #61788e !important;
  font-weight: 750 !important;
}

.ow-analysis-v2-comparison-title small .is-gain {
  color: #006b52 !important;
}

.ow-analysis-v2-comparison-title small .is-loss {
  color: #a84300 !important;
}

.ow-analysis-v2-matrix-scroll {
  overflow-x: auto !important;
}

.ow-analysis-v2-matrix {
  width: 100% !important;
  min-width: 680px !important;
  border-collapse: collapse !important;
}

.ow-analysis-v2-matrix th,
.ow-analysis-v2-matrix td {
  min-width: 112px !important;
  padding: 9px 10px !important;
  border-right: 1px solid #e2ebf1 !important;
  border-bottom: 1px solid #e2ebf1 !important;
  text-align: left !important;
  font-size: 11px !important;
}

.ow-analysis-v2-matrix thead th,
.ow-analysis-v2-matrix tbody th {
  color: #415c73 !important;
  background: #f7fafc !important;
  font-weight: 950 !important;
}

.ow-analysis-v2-matrix td strong,
.ow-analysis-v2-matrix td small {
  display: block !important;
}

.ow-analysis-v2-matrix td.is-reference {
  background: #ecfdf5 !important;
}

.ow-analysis-v2-delta {
  margin-top: 3px !important;
  color: #70879b !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

.ow-analysis-v2-delta.is-gain {
  color: #006b52 !important;
  background: #e3f8f0 !important;
}

.ow-analysis-v2-delta.is-loss {
  color: #a84300 !important;
  background: #fff0e3 !important;
}

.ow-analysis-v2-delta.is-gain,
.ow-analysis-v2-delta.is-loss {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  width: max-content !important;
  padding: 2px 5px !important;
  border-radius: 6px !important;
}

.ow-analysis-v2-delta b {
  font-size: 9px !important;
}

.ow-analysis-v2-leg-insights {
  margin-top: 15px !important;
  padding: 15px 16px !important;
  border: 1px solid #cfe1ed !important;
  border-radius: 18px !important;
  background: #fff !important;
}

.ow-analysis-v2-leg-insights ul {
  display: grid !important;
  gap: 7px !important;
  margin: 10px 0 0 !important;
  padding-left: 20px !important;
  color: #415c73 !important;
  line-height: 1.4 !important;
}

.ow-analysis-v2-leg-insights li.is-major {
  margin-left: -7px !important;
  padding: 7px 10px !important;
  border-left: 3px solid #d97706 !important;
  border-radius: 8px !important;
  color: #8a4205 !important;
  background: #fff7ed !important;
}

body.ow-analysis-v2-legs-open:not(.ow-analysis-v2-coach-open)
#ow-analysis-v2-legs-panel {
  right: 22px !important;
  width: min(1260px, 76vw) !important;
  max-width: calc(100vw - 390px) !important;
}

@media (min-width: 1201px) {
  body.ow-analysis-v2-coach-open.ow-analysis-v2-legs-open
  #ow-analysis-v2-coach-panel {
    right: 22px !important;
    width: min(500px, 27vw) !important;
    max-width: 30vw !important;
  }

  body.ow-analysis-v2-coach-open.ow-analysis-v2-legs-open
  #ow-analysis-v2-legs-panel {
    right: calc(38px + min(500px, 27vw)) !important;
    width: min(1120px, calc(73vw - 64px)) !important;
    max-width: calc(100vw - min(500px, 27vw) - 82px) !important;
  }
}

.ow-analysis-v2-scope {
  display: block !important;
  margin-top: 4px !important;
  color: #0f5f86 !important;
  font-size: 11px !important;
}

.ow-analysis-v2-card-detail {
  display: block !important;
  margin-top: 3px !important;
  color: #52708a !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  text-transform: uppercase !important;
}

.ow-analysis-v2-sort {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  color: inherit !important;
  background: transparent !important;
  font: inherit !important;
  font-weight: 950 !important;
  text-align: left !important;
  cursor: pointer !important;
}

.ow-analysis-v2-sort span {
  color: #087ac1 !important;
  font-size: 10px !important;
}

@media (max-width: 1120px) {
  .ow-analysis-v2-controls {
    grid-template-columns: repeat(2, minmax(145px, 1fr)) !important;
  }

  body.ow-analysis-v2-legs-open:not(.ow-analysis-v2-coach-open)
  #ow-analysis-v2-legs-panel {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
  }
}

@media (max-width: 620px) {
  .ow-analysis-v2-controls {
    grid-template-columns: 1fr !important;
  }
}