/*
 * P35 — płynny Race Lab, przypinanie pozycji i jedno mobilne menu narzędzi.
 */

#ow-race-lite-panel .ow-position-pin {
  display: inline-grid !important;
  width: 24px !important;
  height: 24px !important;
  place-items: center !important;
  margin: -4px 5px -4px 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: #91a4b7 !important;
  background: transparent !important;
  font-size: 17px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

#ow-race-lite-panel .ow-position-pin:hover,
#ow-race-lite-panel .ow-position-pin.is-pinned {
  color: #f59e0b !important;
  background: rgba(245, 158, 11, 0.16) !important;
}

#ow-race-lite-panel tr.ow-position-row-pinned td {
  background: rgba(245, 158, 11, 0.09) !important;
}

#ow-race-lite-panel .ow-race-lite-box {
  width: 410px !important;
}

#ow-race-lite-panel th:nth-child(2),
#ow-race-lite-panel td:nth-child(2) {
  width: 150px !important;
}

@media (max-width: 820px) {
  :root {
    --mobile-actions-height: 0px;
    --mobile-bottom-space:
      calc(
        var(--mobile-nav-height) +
        env(safe-area-inset-bottom)
      );
  }

  /*
   * Jedynym wejściem do narzędzi mobilnych jest dolne menu „Więcej”.
   * Wyłączamy stary boczny drawer i osobne pływające launchery analiz.
   */
  #opti-mobile-tools-drawer,
  .opti-mobile-tools-toggle,
  #ow-sidebar-delegate-handle-v2,
  .coach-analysis-launcher,
  .leg-analysis-launcher,
  #ow-analysis-v2-toolbar,
  #ow-analysis-v2-toolbar .ow-analysis-v2-btn {
    display: none !important;
  }

  .mobile-quick-actions {
    display: none !important;
  }

  .mobile-more-menu {
    right: 8px !important;
    bottom:
      calc(
        var(--mobile-nav-height) +
        env(safe-area-inset-bottom) +
        8px
      ) !important;
    width: min(310px, calc(100vw - 16px)) !important;
    max-height:
      calc(
        100dvh -
        var(--mobile-nav-height) -
        84px
      ) !important;
    padding: 9px !important;
    gap: 6px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  .mobile-more-menu .mobile-more-button {
    flex: none !important;
    width: 100% !important;
    min-height: 42px !important;
    height: auto !important;
    padding: 9px 12px !important;
    border-radius: 9px !important;
    box-shadow: none !important;
    color: #193a59 !important;
    background: #edf4f8 !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    text-align: left !important;
  }

  .mobile-more-menu .mobile-more-button.running {
    color: #ffffff !important;
    background: #087ac1 !important;
  }

  .mobile-more-menu .mobile-more-button:disabled {
    color: #7990a4 !important;
    background: #f2f5f7 !important;
  }

  .mobile-more-status {
    order: -1;
    padding: 9px 11px;
    border: 1px solid #c6deeb;
    border-radius: 9px;
    color: #0f5f86;
    background: #eff9fd;
    font-size: 11px;
    font-weight: 900;
  }

  /*
   * Przyciski mapy pozostają programowalnymi celami dla menu „Więcej”,
   * ale nie są osobnymi pływającymi etykietami. Lista pozycji może nadal
   * otworzyć własną tabelę po prawej stronie.
   */
  #ow-map-quick-actions-v1 {
    right: 8px !important;
    bottom:
      calc(
        var(--mobile-nav-height) +
        env(safe-area-inset-bottom) +
        8px
      ) !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    gap: 0 !important;
    pointer-events: none !important;
  }

  #ow-map-fullscreen-toggle-v1,
  #ow-map-labels-toggle-v1,
  #ow-map-quick-actions-v1
  #ow-race-lite-panel
  .ow-race-lite-toggle {
    display: none !important;
  }

  #ow-map-quick-actions-v1 #ow-race-lite-panel {
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
  }

  #ow-map-quick-actions-v1
  #ow-race-lite-panel
  .ow-race-lite-box {
    right: 0 !important;
    bottom: 8px !important;
    width: min(410px, calc(100vw - 16px)) !important;
    max-width: calc(100vw - 16px) !important;
    max-height:
      calc(
        100dvh -
        var(--mobile-nav-height) -
        104px
      ) !important;
    overflow: auto !important;
    pointer-events: auto !important;
  }

  .mobile-map-hud {
    top: 6px !important;
    right: 6px !important;
  }

  .mobile-hud-button {
    min-height: 32px !important;
    padding: 5px 8px !important;
    border-radius: 9px !important;
    font-size: 9px !important;
  }

  .mobile-hud-button[aria-expanded="true"] {
    border-color: #087ac1 !important;
    color: #087ac1 !important;
    background: #e9f5fc !important;
  }

  body.mobile-ui-active
  #tracker-legend.mobile-control-panel {
    top: 60px !important;
    right: 6px !important;
    width: min(330px, calc(100vw - 12px)) !important;
    max-width: calc(100vw - 12px) !important;
    max-height: min(62dvh, 520px) !important;
    padding: 8px !important;
    border-radius: 14px !important;
  }

  body.mobile-ui-active
  #tracker-legend.mobile-control-panel
  .tracker-legend-title {
    min-height: 38px !important;
    padding-bottom: 5px !important;
    font-size: 14px !important;
  }

  body.mobile-ui-active
  #tracker-legend.mobile-control-panel
  .tracker-legend-row {
    min-height: 44px !important;
    height: 44px !important;
    padding: 3px 0 !important;
  }

  body.mobile-ui-active
  #tracker-legend.mobile-control-panel
  .ow-tracker-final-list {
    max-height: min(38dvh, 320px) !important;
    overflow-y: auto !important;
  }

  body.mobile-ui-active
  #tracker-legend.mobile-control-panel
  .tracker-legend-name {
    font-size: 12px !important;
  }

  body.mobile-ui-active
  #tracker-legend.mobile-control-panel
  .ow-tracker-action-button,
  body.mobile-ui-active
  #tracker-legend.mobile-control-panel
  .ow-tracker-show-all {
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
  }

  #ow-race-lite-panel .ow-race-lite-box {
    width: min(410px, calc(100vw - 16px)) !important;
  }
}