/* P160: compact, responsive mobile navigation without duplicate panel actions. */
#ow-mobile-command-p150 {
  display: none;
}

.ow-shared-panel-label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.ow-shared-panel-label > .ow-nav-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  color: #1c5a88;
}

.ow-shared-panel-label > .ow-shared-panel-label-text {
  min-width: 0;
}

a.ow-shared-panel-label {
  justify-content: flex-start;
}

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

  body.mobile-ui-active .mobile-bottom-nav,
  body.mobile-ui-active .mobile-quick-actions,
  body.mobile-ui-active .mobile-more-menu,
  body.mobile-ui-active .mobile-sheet-handle,
  body.mobile-ui-active #opti-mobile-tools-drawer,
  body.mobile-ui-active .opti-mobile-tools-toggle {
    display: none !important;
  }

  body.mobile-ui-active .app-sidebar {
    top: 54px !important;
    right: 0 !important;
    bottom: var(--mobile-bottom-space) !important;
    left: 0 !important;
    width: 100% !important;
    height: calc(100dvh - 54px - var(--mobile-bottom-space)) !important;
    max-height: none !important;
    min-height: 0 !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    border: 0 !important;
    border-radius: 0 !important;
    transform: translateY(105%) !important;
    -webkit-overflow-scrolling: touch;
  }

  body.mobile-ui-active .app-sidebar.mobile-sheet-open {
    transform: translateY(0) !important;
  }

  body.mobile-ui-active .app-sidebar .app-view-panel,
  body.mobile-ui-active .app-sidebar .training-panel,
  body.mobile-ui-active .app-sidebar .course-editor,
  body.mobile-ui-active .app-sidebar .ow-simulation-settings,
  body.mobile-ui-active .app-sidebar .ow-sim-competitor-section {
    max-height: none !important;
    overflow: visible !important;
  }

  body.mobile-ui-active .ow-mobile-panel-header {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 54px;
    padding: 5px 12px;
    border-bottom: 1px solid #d4e0e9;
    background: rgba(255, 255, 255, 0.98);
    box-sizing: border-box;
  }

  body.mobile-ui-active .ow-mobile-panel-title {
    color: #0b1d33;
    font-size: 17px;
    font-weight: 900;
  }

  body.mobile-ui-active .ow-mobile-panel-close,
  #ow-mobile-command-p150 button {
    min-height: 46px;
    touch-action: manipulation;
  }

  body.mobile-ui-active .ow-mobile-panel-close {
    width: 46px;
    border: 1px solid #c5d5e1;
    border-radius: 12px;
    background: #f2f7fa;
    color: #0b1d33;
    font-size: 27px;
    line-height: 1;
  }

  body.mobile-ui-active .leaflet-control-zoom {
    display: none !important;
  }

  html.optiwake-auth-login-visible #ow-mobile-command-p150,
  html.auth-pending #ow-mobile-command-p150 {
    display: none !important;
  }

  #ow-mobile-command-p150 {
    display: block;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    height: var(--mobile-bottom-space);
    z-index: 12000;
    pointer-events: auto;
  }

  #ow-mobile-command-p150.open {
    top: 0;
    height: auto;
  }

  #ow-mobile-command-p150 .ow-mobile-primary-nav {
    position: absolute;
    right: max(8px, env(safe-area-inset-right));
    bottom: max(7px, env(safe-area-inset-bottom));
    left: max(8px, env(safe-area-inset-left));
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: 62px;
    padding: 4px;
    border: 1px solid #c7d7e3;
    border-radius: 19px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 7px 24px rgba(4, 25, 45, 0.25);
    box-sizing: border-box;
    backdrop-filter: blur(12px);
    pointer-events: auto;
  }

  #ow-mobile-command-p150 .ow-mobile-primary-nav button {
    display: flex;
    min-width: 0;
    min-height: 52px;
    padding: 3px 2px 2px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1px;
    border: 0;
    border-radius: 14px;
    background: transparent;
    color: #47627a;
    font-size: 10px;
    font-weight: 900;
    line-height: 1.05;
  }

  #ow-mobile-command-p150 .ow-mobile-primary-nav button i {
    height: 25px;
    color: #284a66;
    font-size: 24px;
    font-style: normal;
    line-height: 24px;
  }

  #ow-mobile-command-p150 .ow-nav-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
  }

  #ow-mobile-command-p150 .ow-mobile-primary-nav button.active,
  #ow-mobile-command-p150 .ow-mobile-primary-nav button[aria-expanded="true"] {
    background: #dff2f4;
    color: #006f76;
  }

  #ow-mobile-command-p150 .ow-mobile-primary-nav button.active i,
  #ow-mobile-command-p150 .ow-mobile-primary-nav button[aria-expanded="true"] i {
    color: #008e95;
  }

  #ow-mobile-command-p150 .ow-mobile-command-backdrop {
    position: absolute;
    top: 0;
    right: 0;
    bottom: var(--mobile-bottom-space);
    left: 0;
    background: rgba(4, 20, 36, 0.48);
    opacity: 0;
    transition: opacity 160ms ease;
    pointer-events: none;
  }

  #ow-mobile-command-p150 .ow-mobile-command-panel {
    position: absolute;
    right: 0;
    bottom: var(--mobile-bottom-space);
    left: 0;
    max-height: min(72dvh, 620px);
    padding: 0 14px 14px;
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 20px 20px 0 0;
    background: #fff;
    box-shadow: 0 -12px 34px rgba(4, 25, 45, 0.3);
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(105%);
    transition: transform 180ms ease, opacity 160ms ease;
    -webkit-overflow-scrolling: touch;
    pointer-events: none;
  }

  #ow-mobile-command-p150.open {
    pointer-events: auto;
  }

  #ow-mobile-command-p150.open .ow-mobile-command-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  #ow-mobile-command-p150.open .ow-mobile-command-panel {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  #ow-mobile-command-p150 header {
    position: sticky !important;
    top: 0;
    z-index: 2;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 58px !important;
    padding: 6px 0 !important;
    background: rgba(255, 255, 255, 0.98);
  }

  #ow-mobile-command-p150 header strong {
    color: #0b2948;
    font-size: 19px;
    font-weight: 900;
  }

  #ow-mobile-command-p150 .ow-mobile-command-close {
    width: 46px;
    padding: 0;
    border: 1px solid #c5d5e1;
    border-radius: 12px;
    background: #f2f7fa;
    color: #0b1d33;
    font-size: 27px;
  }

  #ow-mobile-command-p150 .ow-mobile-context-action {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #c9d9e5;
    border-radius: 12px;
    background: #f4f8fb;
    color: #1a3855;
    box-sizing: border-box;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
  }

  #ow-mobile-command-p150 h2 {
    margin: 18px 2px 9px;
    color: #0b1d33;
    font-size: 15px;
  }

  #ow-mobile-command-p150 .ow-mobile-context-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  #ow-mobile-command-p150 .ow-mobile-context-group {
    overflow: hidden;
    border: 1px solid #c9d9e5;
    border-radius: 14px;
    background: #f8fbfd;
  }

  #ow-mobile-command-p150 .ow-mobile-context-group > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 8px 12px;
    color: #0b2948;
    cursor: pointer;
    font-size: 14px;
    font-weight: 900;
    list-style: none;
  }

  #ow-mobile-command-p150 .ow-mobile-context-group > summary::-webkit-details-marker {
    display: none;
  }

  #ow-mobile-command-p150 .ow-mobile-context-group > summary::after {
    content: "⌄";
    margin-left: 8px;
    color: #487087;
    font-size: 18px;
    transition: transform 150ms ease;
  }

  #ow-mobile-command-p150 .ow-mobile-context-group[open] > summary::after {
    transform: rotate(180deg);
  }

  #ow-mobile-command-p150 .ow-mobile-context-group > summary small {
    margin-left: auto;
    padding: 2px 7px;
    border-radius: 999px;
    background: #e3f1f5;
    color: #37647d;
    font-size: 10px;
  }

  #ow-mobile-command-p150 .ow-mobile-context-group-list {
    display: grid;
    gap: 6px;
    padding: 0 7px 7px;
  }

  #ow-mobile-command-p150 .ow-mobile-context-action {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    text-align: left;
  }

  #ow-mobile-command-p150 .ow-mobile-context-group-list .ow-mobile-context-action {
    border-color: #d5e2ea;
    background: #fff;
  }

  #ow-mobile-command-p150 .ow-mobile-context-action:disabled {
    opacity: 0.42;
    filter: grayscale(0.75);
    cursor: default;
  }

  #ow-mobile-command-p150 .ow-mobile-context-action .ow-nav-icon {
    color: #1c5a88;
  }

  #ow-mobile-command-p150 .ow-mobile-context-action small {
    color: #788c9d;
    font-size: 10px;
    font-weight: 800;
  }

  #ow-mobile-command-p150 .ow-mobile-context-action:disabled {
    border-color: #dce5eb;
    background: #f5f7f8;
    color: #8293a1;
    opacity: 1;
  }

  #ow-mobile-command-p150 .ow-mobile-regattas-link {
    width: 100%;
    min-height: 48px;
    margin-top: 12px;
    border: 1px solid #b8d3df;
    border-radius: 12px;
    background: #e7f5f6;
    color: #086d75;
    font-size: 13px;
    font-weight: 900;
  }

  #ow-mobile-command-p150 .ow-mobile-command-feedback {
    position: absolute;
    right: 14px;
    bottom: calc(var(--mobile-bottom-space) + 10px);
    left: 14px;
    z-index: 7;
    padding: 10px 12px;
    border-radius: 12px;
    background: #0b2948;
    box-shadow: 0 5px 18px rgba(4, 25, 45, 0.25);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    pointer-events: none;
  }

  body.mobile-ui-active #ow-map-quick-actions-v1 > button {
    display: none !important;
  }

  body.mobile-ui-active #ow-map-quick-actions-v1 #ow-race-lite-panel.ow-collapsed {
    display: none !important;
  }

  body.mobile-ui-active #ow-map-quick-actions-v1 {
    right: 8px !important;
    bottom: calc(var(--mobile-bottom-space) + 8px) !important;
    background: transparent !important;
    pointer-events: none;
  }

  body.mobile-ui-active #ow-map-quick-actions-v1 #ow-race-lite-panel:not(.ow-collapsed) {
    pointer-events: auto;
  }

  body.mobile-ui-active .training-controls {
    display: flex !important;
    flex-direction: column !important;
  }

  body.mobile-ui-active #training-state { order: 1; }
  body.mobile-ui-active #training-start,
  body.mobile-ui-active #training-finish,
  body.mobile-ui-active #training-create,
  body.mobile-ui-active #training-cancel { order: 2; }
  body.mobile-ui-active #training-name,
  body.mobile-ui-active #training-description,
  body.mobile-ui-active #training-date { order: 3; }
  body.mobile-ui-active #training-gps-readiness { order: 4; }
  body.mobile-ui-active .ow-mobile-attendance-toggle,
  body.mobile-ui-active #training-roster { order: 5; }

  body.mobile-ui-active .ow-mobile-attendance-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 48px;
    padding: 8px 12px;
    border: 1px solid #c9d9e5;
    border-radius: 12px;
    background: #f4f8fb;
    color: #173650;
    font-size: 13px;
    font-weight: 900;
  }

  body.mobile-ui-active .ow-mobile-attendance-toggle i {
    font-size: 18px;
    font-style: normal;
  }

  body.mobile-ui-active #training-roster.ow-mobile-attendance-collapsed {
    display: none !important;
  }

  body.mobile-ui-active .ow-simulation-settings {
    display: flex;
    flex-direction: column;
  }

  /* Keep the desktop form hierarchy, including Save after all parameters. */
  body.mobile-ui-active #ow-simulation-sidebar-card .ow-simulation-settings > * { order: 0; }

  body.mobile-ui-active #app-sidebar[data-mobile-lab-section="simulator"] [data-view-panel="lab"] > :not(.race-lab-simulator-card):not(.racelab-course-picker),
  body.mobile-ui-active #app-sidebar[data-mobile-lab-section="parameters"] [data-view-panel="lab"] > :not(#ow-simulation-sidebar-card) {
    display: none !important;
  }

  body.mobile-ui-active #app-sidebar[data-mobile-lab-section="parameters"] #ow-simulation-sidebar-card {
    display: block !important;
  }

  body.mobile-ui-active #ow-simulation-sidebar-card .ow-sim-competitor-trigger ~ .ow-sim-competitor-open {
    display: none !important;
  }

  /* Expand competitors inside the parameter sheet, not outside its viewport. */
  body.mobile-ui-active #ow-simulation-sidebar-card .ow-sim-competitor-drawer {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    box-sizing: border-box;
    overflow-x: auto;
    box-shadow: none;
    animation: none;
  }

  body.mobile-ui-active .racelab-course-picker {
    margin-top: 18px !important;
  }

  body.mobile-ui-active button,
  body.mobile-ui-active a.app-control-button,
  body.mobile-ui-active select,
  body.mobile-ui-active input {
    max-width: 100%;
  }

  body.mobile-ui-active .app-view-panel,
  body.mobile-ui-active .training-controls,
  body.mobile-ui-active .course-editor,
  body.mobile-ui-active .ow-simulation-settings {
    min-width: 0;
  }

  body.ow-shared-navigation {
    padding-bottom: calc(var(--mobile-bottom-space) + 12px) !important;
  }

  body.ow-shared-navigation .rg-mobile-nav,
  body.ow-shared-navigation .rc-tabs {
    display: none !important;
  }

  body.ow-shared-navigation .rc-content {
    padding-bottom: 18px !important;
  }
}
