/* =========================================================
   OptiWake Mobile UI v2
   Bezpośrednie selektory mobile-shell.js
   ========================================================= */

:root {
  --ow-blue: #0057b8;
  --ow-navy: #0b1d3a;
  --ow-turquoise: #00d4c6;
  --ow-white: #ffffff;

  --ow-blue-soft: #eaf4fc;
  --ow-turquoise-soft: #e4fbf8;
  --ow-surface: #f4f8fb;
  --ow-border: #d8e3eb;
  --ow-muted: #708395;

  --ow-mobile-nav-height: 72px;
}

@media (max-width: 820px) {
  body.mobile-ui-active {
    padding-bottom:
      calc(
        var(--ow-mobile-nav-height) +
        env(safe-area-inset-bottom)
      ) !important;

    background: var(--ow-surface) !important;
  }

  /* =====================================================
     DOLNA NAWIGACJA
     ===================================================== */

  body.mobile-ui-active
  .mobile-bottom-nav {
    position: fixed !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    z-index: 9000 !important;

    display: grid !important;
    grid-template-columns:
      repeat(4, minmax(0, 1fr)) !important;

    width: 100% !important;
    min-height: var(--ow-mobile-nav-height) !important;

    padding:
      5px
      6px
      max(5px, env(safe-area-inset-bottom)) !important;

    border-top:
      1px solid var(--ow-border) !important;

    border-radius:
      18px 18px 0 0 !important;

    background:
      rgba(255, 255, 255, 0.98) !important;

    box-shadow:
      0 -8px 28px
      rgba(11, 29, 58, 0.12) !important;

    backdrop-filter: blur(12px);
  }

  body.mobile-ui-active
  .mobile-nav-button {
    position: relative !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;

    gap: 4px !important;

    min-width: 0 !important;
    min-height: 58px !important;

    padding: 5px 3px !important;
    margin: 0 !important;

    border: 0 !important;
    border-radius: 13px !important;

    background: transparent !important;
    color: var(--ow-muted) !important;

    box-shadow: none !important;

    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1 !important;

    letter-spacing: 0 !important;

    cursor: pointer !important;
  }

  body.mobile-ui-active
  .mobile-nav-button::before {
    display: block;

    width: 23px;
    height: 23px;

    background: currentColor;

    content: "";

    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;

    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
  }

  /* LIVE */

  body.mobile-ui-active
  .mobile-nav-button[
    data-mobile-view="live"
  ]::before {
    mask-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M3 19h18M5 16V9m4 7V5m4 11v-4m4 4V7m2 9V3'/%3E%3C/svg%3E");

    -webkit-mask-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M3 19h18M5 16V9m4 7V5m4 11v-4m4 4V7m2 9V3'/%3E%3C/svg%3E");
  }

  /* LAB */

  body.mobile-ui-active
  .mobile-nav-button[
    data-mobile-view="lab"
  ]::before {
    mask-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M9 3h6m-5 0v5l-5 9a2 2 0 0 0 1.8 3h10.4A2 2 0 0 0 19 17l-5-9V3M7 15h10'/%3E%3C/svg%3E");

    -webkit-mask-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M9 3h6m-5 0v5l-5 9a2 2 0 0 0 1.8 3h10.4A2 2 0 0 0 19 17l-5-9V3M7 15h10'/%3E%3C/svg%3E");
  }

  /* TRASA */

  body.mobile-ui-active
  .mobile-nav-button[
    data-mobile-view="course"
  ]::before {
    mask-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='6' cy='18' r='2' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Ccircle cx='18' cy='6' r='2' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' d='M7.5 16.5 16.5 7.5M9 6h4M11 4v4'/%3E%3C/svg%3E");

    -webkit-mask-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='6' cy='18' r='2' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Ccircle cx='18' cy='6' r='2' fill='none' stroke='%23000' stroke-width='1.8'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' d='M7.5 16.5 16.5 7.5M9 6h4M11 4v4'/%3E%3C/svg%3E");
  }

  /* WIĘCEJ */

  body.mobile-ui-active
  .mobile-nav-button[
    data-mobile-more
  ]::before {
    mask-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='5' cy='12' r='1.8' fill='%23000'/%3E%3Ccircle cx='12' cy='12' r='1.8' fill='%23000'/%3E%3Ccircle cx='19' cy='12' r='1.8' fill='%23000'/%3E%3C/svg%3E");

    -webkit-mask-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='5' cy='12' r='1.8' fill='%23000'/%3E%3Ccircle cx='12' cy='12' r='1.8' fill='%23000'/%3E%3Ccircle cx='19' cy='12' r='1.8' fill='%23000'/%3E%3C/svg%3E");
  }

  body.mobile-ui-active
  .mobile-nav-button.active {
    background:
      rgba(0, 87, 184, 0.065) !important;

    color: var(--ow-blue) !important;
  }

  body.mobile-ui-active
  .mobile-nav-button.active::after {
    position: absolute;
    top: 2px;
    left: 50%;

    width: 30px;
    height: 3px;

    border-radius: 999px;

    background: var(--ow-blue);

    content: "";

    transform: translateX(-50%);
  }

  body.mobile-ui-active
  .mobile-nav-button:active {
    transform: scale(0.96);
  }

  /* =====================================================
     MENU WIĘCEJ
     ===================================================== */

  body.mobile-ui-active
  .mobile-more-menu {
    right: 8px !important;
    bottom:
      calc(
        var(--ow-mobile-nav-height) +
        8px
      ) !important;

    left: auto !important;

    width: min(
      240px,
      calc(100vw - 16px)
    ) !important;

    padding: 8px !important;

    border:
      1px solid var(--ow-border) !important;

    border-radius: 16px !important;

    background: #ffffff !important;

    box-shadow:
      0 14px 34px
      rgba(11, 29, 58, 0.17) !important;
  }

  body.mobile-ui-active
  .mobile-more-button {
    min-height: 46px !important;

    margin: 0 !important;
    padding: 0 14px !important;

    border: 0 !important;
    border-radius: 11px !important;

    background: transparent !important;
    color: var(--ow-navy) !important;

    font-size: 11px !important;
    font-weight: 800 !important;
    text-align: left !important;
  }

  body.mobile-ui-active
  .mobile-more-button:hover,
  body.mobile-ui-active
  .mobile-more-button:active {
    background: var(--ow-blue-soft) !important;
    color: var(--ow-blue) !important;
  }

  /* =====================================================
     NARZĘDZIA TRENERA
     ===================================================== */

  body.mobile-ui-active
  .mobile-sheet-handle {
    min-height: 58px !important;

    padding: 9px 15px !important;

    border:
      1px solid rgba(0, 87, 184, 0.12) !important;

    border-radius:
      20px 20px 0 0 !important;

    background:
      rgba(255, 255, 255, 0.98) !important;

    color: var(--ow-navy) !important;

    box-shadow:
      0 -9px 26px
      rgba(11, 29, 58, 0.11) !important;
  }

  body.mobile-ui-active
  .mobile-sheet-handle-label {
    display: flex !important;
    align-items: center !important;

    gap: 10px !important;

    font-size: 13px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
  }

  body.mobile-ui-active
  .mobile-sheet-grabber {
    width: 42px !important;
    height: 5px !important;

    border-radius: 999px !important;

    background: #b7c7d3 !important;
  }

  body.mobile-ui-active
  .mobile-sheet-chevron {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 38px !important;
    height: 38px !important;

    border-radius: 50% !important;

    background: #edf4f8 !important;
    color: var(--ow-navy) !important;

    font-size: 20px !important;
  }

  /* =====================================================
     SZYBKIE AKCJE
     ===================================================== */

  body.mobile-ui-active
  .mobile-quick-actions {
    display: grid !important;
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 9px !important;

    padding: 9px !important;

    border-top:
      1px solid var(--ow-border) !important;

    background: var(--ow-surface) !important;
  }

  body.mobile-ui-active
  .mobile-action-button {
    position: relative !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    gap: 9px !important;

    min-width: 0 !important;
    min-height: 56px !important;

    padding: 8px 11px !important;
    margin: 0 !important;

    border:
      1px solid var(--ow-border) !important;

    border-radius: 14px !important;

    background: #ffffff !important;
    color: var(--ow-navy) !important;

    box-shadow: none !important;

    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;

    letter-spacing: 0 !important;

    text-align: left !important;
  }

  body.mobile-ui-active
  .mobile-action-button::before {
    display: inline-flex;

    flex: 0 0 34px;

    width: 34px;
    height: 34px;

    border-radius: 11px;

    background-color: var(--ow-blue-soft);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 19px 19px;

    content: "";
  }

  body.mobile-ui-active
  .mobile-action-button.training {
    border-color:
      rgba(0, 212, 198, 0.38) !important;

    background:
      var(--ow-turquoise-soft) !important;

    color: #08736c !important;
  }

  body.mobile-ui-active
  .mobile-action-button.training::before {
    background-color: var(--ow-turquoise);

    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%230B1D3A' stroke-width='2' stroke-linecap='round' d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  }

  body.mobile-ui-active
  .mobile-action-button.panel::before {
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='16' rx='2' fill='none' stroke='%230057B8' stroke-width='1.8'/%3E%3Cpath fill='none' stroke='%230057B8' stroke-width='1.8' d='M3 10h18M9 10v10'/%3E%3C/svg%3E");
  }

  body.mobile-ui-active
  .mobile-action-button.simulator::before {
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%230057B8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M9 3h6m-5 0v5l-5 9a2 2 0 0 0 1.8 3h10.4A2 2 0 0 0 19 17l-5-9V3M7 15h10'/%3E%3C/svg%3E");
  }

  body.mobile-ui-active
  .mobile-action-button.position::before {
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='7' fill='none' stroke='%230057B8' stroke-width='1.8'/%3E%3Ccircle cx='12' cy='12' r='2' fill='%230057B8'/%3E%3Cpath fill='none' stroke='%230057B8' stroke-width='1.8' stroke-linecap='round' d='M12 2v3M12 19v3M2 12h3M19 12h3'/%3E%3C/svg%3E");
  }

  body.mobile-ui-active
  .mobile-action-button.running {
    border-color:
      rgba(0, 87, 184, 0.32) !important;

    background: var(--ow-blue-soft) !important;

    color: var(--ow-blue) !important;
  }

  body.mobile-ui-active
  .mobile-action-button:active {
    transform: scale(0.98);
  }

  body.mobile-ui-active
  .mobile-action-button[hidden] {
    display: none !important;
  }
}

@media (max-width: 390px) {
  body.mobile-ui-active
  .mobile-action-button {
    gap: 7px !important;
    padding: 7px 8px !important;

    font-size: 9px !important;
  }

  body.mobile-ui-active
  .mobile-action-button::before {
    flex-basis: 31px;

    width: 31px;
    height: 31px;
  }
}

/* =========================================================
   OptiWake Mobile UI — korekta układu v2.1
   ========================================================= */

@media (max-width: 820px) {
  :root {
    --ow-final-nav-height: 68px;
    --ow-final-live-actions-height: 64px;
    --ow-final-lab-actions-height: 122px;
    --ow-final-spacing: 8px;
  }

  /*
   * Dolna nawigacja
   */

  body.mobile-ui-active
  .mobile-bottom-nav {
    height:
      calc(
        var(--ow-final-nav-height) +
        env(safe-area-inset-bottom)
      ) !important;

    min-height:
      calc(
        var(--ow-final-nav-height) +
        env(safe-area-inset-bottom)
      ) !important;

    padding:
      4px
      6px
      max(4px, env(safe-area-inset-bottom)) !important;

    overflow: hidden !important;

    border-radius:
      17px 17px 0 0 !important;

    box-sizing: border-box !important;
  }

  body.mobile-ui-active
  .mobile-nav-button {
    gap: 2px !important;

    min-height: 56px !important;

    padding:
      6px 2px 4px !important;

    overflow: hidden !important;

    border-radius: 12px !important;

    background: transparent !important;

    box-sizing: border-box !important;

    font-size: 9px !important;
  }

  body.mobile-ui-active
  .mobile-nav-button::before {
    width: 20px !important;
    height: 20px !important;

    flex: 0 0 20px !important;
  }

  /*
   * Aktywna zakładka pozostaje lekka.
   * Bez dużego jasnoniebieskiego prostokąta.
   */

  body.mobile-ui-active
  .mobile-nav-button.active {
    background: transparent !important;
    color: var(--ow-blue) !important;
  }

  body.mobile-ui-active
  .mobile-nav-button.active::after {
    top: 1px !important;

    width: 24px !important;
    height: 3px !important;

    background: var(--ow-turquoise) !important;
  }

  /*
   * Szybkie akcje są osobnym, zwartym paskiem
   * położonym nad dolną nawigacją.
   */

  body.mobile-ui-active
  .mobile-quick-actions {
    position: fixed !important;

    right: 8px !important;
    bottom:
      calc(
        var(--ow-final-nav-height) +
        env(safe-area-inset-bottom) +
        var(--ow-final-spacing)
      ) !important;
    left: 8px !important;

    z-index: 8700 !important;

    display: grid !important;
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 8px !important;

    width: auto !important;
    height: auto !important;
    min-height: 0 !important;

    padding: 7px !important;
    margin: 0 !important;

    overflow: hidden !important;

    border:
      1px solid rgba(0, 87, 184, 0.13) !important;

    border-radius: 16px !important;

    background:
      rgba(247, 251, 253, 0.98) !important;

    box-shadow:
      0 7px 22px
      rgba(11, 29, 58, 0.13) !important;

    box-sizing: border-box !important;
  }

  body.mobile-ui-active
  .mobile-quick-actions-live {
    grid-template-rows:
      var(--ow-final-live-actions-height) !important;
  }

  body.mobile-ui-active.mobile-race-lab-actions
  .mobile-quick-actions {
    grid-template-rows:
      repeat(
        2,
        calc(
          (
            var(--ow-final-lab-actions-height) -
            8px
          ) / 2
        )
      ) !important;
  }

  /*
   * Przyciski w pasku akcji.
   */

  body.mobile-ui-active
  .mobile-action-button {
    position: relative !important;

    display: grid !important;
    grid-template-columns:
      34px minmax(0, 1fr) !important;

    align-items: center !important;
    justify-content: stretch !important;

    gap: 9px !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: 100% !important;
    min-height: 50px !important;

    padding: 7px 10px !important;
    margin: 0 !important;

    overflow: hidden !important;

    border-radius: 13px !important;

    box-sizing: border-box !important;

    white-space: normal !important;
  }

  body.mobile-ui-active
  .mobile-action-button::before {
    position: static !important;

    display: block !important;

    width: 34px !important;
    height: 34px !important;

    min-width: 34px !important;
    max-width: 34px !important;

    margin: 0 !important;

    border-radius: 10px !important;

    box-sizing: border-box !important;
  }

  /*
   * NOWY TRENING — bez wystającego turkusowego fragmentu.
   */

  body.mobile-ui-active
  .mobile-action-button.training {
    border-color:
      rgba(0, 212, 198, 0.32) !important;

    background:
      linear-gradient(
        145deg,
        #f0fffd,
        #e5faf7
      ) !important;

    color: #086e68 !important;
  }

  body.mobile-ui-active
  .mobile-action-button.training::before {
    background-color:
      var(--ow-turquoise) !important;
  }

  /*
   * PANEL — spokojny jasny kafel.
   */

  body.mobile-ui-active
  .mobile-action-button.panel {
    border-color:
      rgba(0, 87, 184, 0.15) !important;

    background:
      linear-gradient(
        145deg,
        #ffffff,
        #f3f8fb
      ) !important;

    color: var(--ow-navy) !important;
  }

  /*
   * Panel boczny kończy się nad szybkimi akcjami.
   */

  body.mobile-ui-active
  #app-sidebar {
    bottom:
      calc(
        var(--ow-final-nav-height) +
        env(safe-area-inset-bottom) +
        var(--ow-final-live-actions-height) +
        24px
      ) !important;
  }

  body.mobile-ui-active.mobile-race-lab-actions
  #app-sidebar {
    bottom:
      calc(
        var(--ow-final-nav-height) +
        env(safe-area-inset-bottom) +
        var(--ow-final-lab-actions-height) +
        24px
      ) !important;
  }

  body.mobile-ui-active
  .mobile-sheet-handle {
    width: 100% !important;
    min-height: 56px !important;

    margin: 0 !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
  }

  /*
   * Mapa otrzymuje odpowiedni margines,
   * żeby dolne elementy nie zasłaniały treści.
   */

  body.mobile-ui-active {
    padding-bottom:
      calc(
        var(--ow-final-nav-height) +
        env(safe-area-inset-bottom)
      ) !important;
  }
}

@media (max-width: 390px) {
  body.mobile-ui-active
  .mobile-quick-actions {
    right: 5px !important;
    left: 5px !important;

    gap: 5px !important;

    padding: 5px !important;
  }

  body.mobile-ui-active
  .mobile-action-button {
    grid-template-columns:
      30px minmax(0, 1fr) !important;

    gap: 6px !important;

    padding:
      6px 7px !important;

    font-size: 9px !important;
  }

  body.mobile-ui-active
  .mobile-action-button::before {
    width: 30px !important;
    height: 30px !important;

    min-width: 30px !important;
    max-width: 30px !important;
  }
}

/* =========================================================
   OptiWake Mobile UI v2.2
   Statyczne ikony + panel trzystopniowy + logo
   ========================================================= */

@media (max-width: 820px) {

  /* =====================================================
     Przywrócenie logo w nagłówku
     ===================================================== */

  body.mobile-ui-active header {
    display: grid !important;

    grid-template-columns:
      minmax(110px, 1fr)
      minmax(126px, 166px)
      46px !important;

    grid-template-areas:
      "brand wind account" !important;

    align-items: center !important;
    gap: 8px !important;

    min-height: 66px !important;
    padding: 7px 9px !important;

    overflow: visible !important;
  }

  body.mobile-ui-active header .brand,
  body.mobile-ui-active header .app-brand,
  body.mobile-ui-active header .header-brand,
  body.mobile-ui-active header > :first-child {
    grid-area: brand !important;

    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: auto !important;
    min-width: 100px !important;
    max-width: 160px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    opacity: 1 !important;
    visibility: visible !important;
  }

  body.mobile-ui-active header .brand img,
  body.mobile-ui-active header .app-brand img,
  body.mobile-ui-active header .header-brand img,
  body.mobile-ui-active header > :first-child img {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 150px !important;
    max-height: 44px !important;

    object-fit: contain !important;

    opacity: 1 !important;
    visibility: visible !important;
  }

  body.mobile-ui-active
  header
  .mobile-wind-summary {
    grid-area: wind !important;
  }

  body.mobile-ui-active
  header
  .ow-account-root {
    grid-area: account !important;
  }

  /* =====================================================
     Statyczne ikony dolnej nawigacji
     ===================================================== */

  body.mobile-ui-active
  .mobile-nav-button,

  body.mobile-ui-active
  .mobile-nav-button::before,

  body.mobile-ui-active
  .mobile-nav-button::after {
    animation: none !important;

    transition:
      background-color 120ms ease,
      color 120ms ease,
      border-color 120ms ease !important;

    transform: none !important;
  }

  body.mobile-ui-active
  .mobile-nav-button:active,

  body.mobile-ui-active
  .mobile-nav-button:focus,

  body.mobile-ui-active
  .mobile-nav-button:hover {
    transform: none !important;
  }

  body.mobile-ui-active
  .mobile-nav-button.active {
    border:
      1px solid rgba(0, 87, 184, 0.12) !important;

    background:
      linear-gradient(
        145deg,
        rgba(234, 244, 252, 0.98),
        rgba(244, 249, 253, 0.98)
      ) !important;

    color: var(--ow-blue) !important;

    box-shadow:
      inset 0 0 0 1px
      rgba(255, 255, 255, 0.65) !important;
  }

  body.mobile-ui-active
  .mobile-nav-button.active::after {
    display: none !important;
  }

  body.mobile-ui-active
  .mobile-nav-button.active::before {
    animation: none !important;
    transform: none !important;
  }

  /* =====================================================
     Panel trzystopniowy
     ===================================================== */

  body.mobile-ui-active
  #app-sidebar {
    transition:
      opacity 160ms ease,
      transform 180ms ease,
      height 180ms ease !important;
  }

  /*
   * Stan zamknięty:
   * panel i pasek narzędzi są całkowicie schowane.
   */

  body.mobile-ui-active
  #app-sidebar:not(.mobile-sheet-peek):not(.mobile-sheet-open) {
    opacity: 0 !important;
    visibility: hidden !important;

    pointer-events: none !important;

    transform:
      translateY(
        calc(100% + 90px)
      ) !important;
  }

  /*
   * Pierwszy etap:
   * widoczny jest tylko mały pasek.
   */

  body.mobile-ui-active
  #app-sidebar.mobile-sheet-peek {
    bottom:
      calc(
        var(--ow-final-nav-height) +
        env(safe-area-inset-bottom) +
        8px
      ) !important;

    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;

    overflow: hidden !important;

    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: auto !important;

    transform: translateY(0) !important;
  }

  body.mobile-ui-active
  #app-sidebar.mobile-sheet-peek
  > :not(.mobile-sheet-handle) {
    display: none !important;
  }

  body.mobile-ui-active
  #app-sidebar.mobile-sheet-peek
  .mobile-sheet-handle {
    height: 58px !important;
    min-height: 58px !important;

    border-radius:
      18px 18px 0 0 !important;
  }

  /*
   * Drugi etap:
   * pełna zawartość panelu.
   */

  body.mobile-ui-active
  #app-sidebar.mobile-sheet-open {
    opacity: 1 !important;
    visibility: visible !important;

    pointer-events: auto !important;

    transform: translateY(0) !important;
  }

  /*
   * Przyciski NOWY TRENING / PANEL
   * są widoczne tylko w pełnym panelu.
   */

  body.mobile-ui-active:not(.mobile-sheet-expanded)
  .mobile-quick-actions {
    display: none !important;
  }

  body.mobile-ui-active.mobile-sheet-expanded
  .mobile-quick-actions {
    display: grid !important;
  }

  /*
   * Przy małym pasku panel nie zajmuje miejsca mapy.
   */

  body.mobile-ui-active.mobile-sheet-peek
  .mobile-quick-actions {
    display: none !important;
  }
}

@media (max-width: 390px) {
  body.mobile-ui-active header {
    grid-template-columns:
      minmax(96px, 1fr)
      124px
      42px !important;

    gap: 5px !important;
    padding-right: 6px !important;
    padding-left: 6px !important;
  }

  body.mobile-ui-active header .brand img,
  body.mobile-ui-active header .app-brand img,
  body.mobile-ui-active header > :first-child img {
    max-width: 122px !important;
  }
}

/* OPTIWAKE MOBILE GAP FIX START */

@media (max-width: 820px) {
  /*
   * Dodatkowy pasek szybkich akcji jest obecnie
   * zbędny i powoduje pozostawienie pustej przestrzeni.
   */
  body.mobile-ui-active
  .mobile-quick-actions {
    display: none !important;
  }

  /*
   * Pełny panel dochodzi teraz bezpośrednio
   * do dolnej nawigacji.
   */
  body.mobile-ui-active
  #app-sidebar.mobile-sheet-open,

  body.mobile-ui-active.mobile-race-lab-actions
  #app-sidebar.mobile-sheet-open {
    bottom:
      calc(
        var(--ow-final-nav-height, 68px) +
        env(safe-area-inset-bottom) +
        6px
      ) !important;

    height: auto !important;

    max-height:
      calc(
        100dvh -
        74px -
        var(--ow-final-nav-height, 68px) -
        env(safe-area-inset-bottom)
      ) !important;

    margin-bottom: 0 !important;
  }

  /*
   * Pasek zwiniętego panelu nadal pozostaje
   * tuż nad dolną nawigacją.
   */
  body.mobile-ui-active
  #app-sidebar.mobile-sheet-peek {
    bottom:
      calc(
        var(--ow-final-nav-height, 68px) +
        env(safe-area-inset-bottom) +
        6px
      ) !important;
  }
}

/* OPTIWAKE MOBILE GAP FIX END */

/* OPTIWAKE MOBILE LOGO FIX START */

@media (max-width: 820px) {
  body.mobile-ui-active
  header .brand {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    min-width: 0 !important;
    height: 54px !important;

    overflow: visible !important;
  }

  body.mobile-ui-active
  header .brand-logo {
    display: block !important;

    width: 145px !important;
    height: auto !important;

    max-width: 145px !important;
    max-height: 52px !important;

    object-fit: contain !important;
    object-position: left center !important;

    opacity: 1 !important;
    visibility: visible !important;
  }

  body.mobile-ui-active
  header .subtitle {
    display: none !important;
  }
}

@media (max-width: 390px) {
  body.mobile-ui-active
  header .brand-logo {
    width: 122px !important;
    max-width: 122px !important;
  }
}

/* OPTIWAKE MOBILE LOGO FIX END */

/* OPTIWAKE MOBILE LIVE BUTTONS START */

@media (max-width: 820px) {
  /*
   * Przyciski LIVE są widoczne tylko po pełnym
   * rozwinięciu panelu narzędzi trenera.
   */
  body.mobile-ui-active.mobile-sheet-expanded
  .mobile-quick-actions.mobile-quick-actions-live {
    position: fixed !important;

    right: 8px !important;
    bottom:
      calc(
        var(--ow-final-nav-height, 68px) +
        env(safe-area-inset-bottom) +
        7px
      ) !important;
    left: 8px !important;

    z-index: 8700 !important;

    display: grid !important;
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 8px !important;

    height: 62px !important;
    min-height: 62px !important;

    padding: 6px !important;
    margin: 0 !important;

    overflow: hidden !important;

    border:
      1px solid rgba(0, 87, 184, 0.13) !important;

    border-radius: 15px !important;

    background:
      rgba(248, 251, 253, 0.98) !important;

    box-shadow:
      0 6px 18px
      rgba(11, 29, 58, 0.12) !important;

    box-sizing: border-box !important;
  }

  /*
   * Panel kończy się nad przyciskami,
   * więc nic się nie nakłada.
   */
  body.mobile-ui-active.mobile-sheet-expanded
  #app-sidebar.mobile-sheet-open {
    bottom:
      calc(
        var(--ow-final-nav-height, 68px) +
        env(safe-area-inset-bottom) +
        76px
      ) !important;
  }

  body.mobile-ui-active
  .mobile-quick-actions-live
  .mobile-action-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;

    padding: 0 10px !important;
    margin: 0 !important;

    overflow: hidden !important;

    border-radius: 12px !important;

    box-shadow: none !important;

    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;

    text-align: center !important;
    white-space: normal !important;

    animation: none !important;
    transform: none !important;

    box-sizing: border-box !important;
  }

  /*
   * Usunięcie wcześniejszych symboli i ikon.
   */
  body.mobile-ui-active
  .mobile-quick-actions-live
  .mobile-action-button::before,

  body.mobile-ui-active
  .mobile-quick-actions-live
  .mobile-action-button::after {
    display: none !important;
    content: none !important;
  }

  /*
   * Główna akcja treningowa.
   */
  body.mobile-ui-active
  .mobile-quick-actions-live
  .mobile-action-button.training {
    border:
      1px solid rgba(0, 212, 198, 0.38) !important;

    background:
      linear-gradient(
        145deg,
        #effdfa,
        #dff8f5
      ) !important;

    color: #08726b !important;
  }

  body.mobile-ui-active
  .mobile-quick-actions-live
  .mobile-action-button.training.running {
    border-color:
      rgba(0, 87, 184, 0.28) !important;

    background: #eaf4fc !important;
    color: #0057b8 !important;
  }

  /*
   * Otwieranie i zwijanie panelu.
   */
  body.mobile-ui-active
  .mobile-quick-actions-live
  .mobile-action-button.panel {
    border:
      1px solid rgba(0, 87, 184, 0.2) !important;

    background:
      linear-gradient(
        145deg,
        #ffffff,
        #edf5fa
      ) !important;

    color: #0b1d3a !important;
  }

  body.mobile-ui-active
  .mobile-quick-actions-live
  .mobile-action-button:disabled {
    border-color: #dce5eb !important;
    background: #eef3f6 !important;
    color: #8a9aa7 !important;

    opacity: 1 !important;
  }

  /*
   * W stanie zamkniętym i pośrednim przyciski
   * nie istnieją wizualnie i nie zajmują miejsca.
   */
  body.mobile-ui-active:not(.mobile-sheet-expanded)
  .mobile-quick-actions-live {
    display: none !important;
  }
}

@media (max-width: 390px) {
  body.mobile-ui-active.mobile-sheet-expanded
  .mobile-quick-actions.mobile-quick-actions-live {
    right: 5px !important;
    left: 5px !important;

    gap: 5px !important;
    padding: 5px !important;
  }

  body.mobile-ui-active
  .mobile-quick-actions-live
  .mobile-action-button {
    padding: 0 6px !important;
    font-size: 9px !important;
  }
}

/* OPTIWAKE MOBILE LIVE BUTTONS END */