/* =========================================================
   OptiWake — jednolity system przycisków mobilnych
   LIVE / LAB / TRASA
   ========================================================= */

@media (max-width: 820px) {
  :root {
    --ow-btn-blue: #0057b8;
    --ow-btn-navy: #0b1d3a;
    --ow-btn-turquoise: #00d4c6;

    --ow-btn-blue-soft: #eaf4fc;
    --ow-btn-turquoise-soft: #e5fbf8;
    --ow-btn-red-soft: #fcebea;
    --ow-btn-red: #a63b35;
    --ow-btn-border: #d4e1e9;
    --ow-btn-disabled: #edf2f5;
  }

  /*
   * Jeden wspólny rozmiar i forma.
   */

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

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

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

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

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

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

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

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

    overflow: hidden !important;

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

    border-radius: 11px !important;

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

    box-shadow: none !important;

    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;

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

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

    box-sizing: border-box !important;
  }

  /*
   * Bez przypadkowych ikon i animowanych symboli.
   */

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

  body.mobile-ui-active
  .mobile-action-button::after,

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

  body.mobile-ui-active
  .training-button::after,

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

  body.mobile-ui-active
  .simulator-button::after,

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

  body.mobile-ui-active
  .course-button::after,

  body.mobile-ui-active
  .live-action-button::before,

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

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

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

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

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

  body.mobile-ui-active
  .live-action-button:active {
    transform: none !important;
  }

  /*
   * Układ przycisków w dwóch kolumnach.
   */

  body.mobile-ui-active
  .training-actions,

  body.mobile-ui-active
  .live-simulator-actions,

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

    gap: 8px !important;
  }

  /*
   * Główne akcje.
   */

  body.mobile-ui-active
  .mobile-action-button.training,

  body.mobile-ui-active
  .training-button.start,

  body.mobile-ui-active
  .simulator-button.start,

  body.mobile-ui-active
  .live-action-button.start,

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

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

    color: #08726b !important;
  }

  /*
   * Akcje dodatkowe i przejścia.
   */

  body.mobile-ui-active
  .mobile-action-button.panel,

  body.mobile-ui-active
  .live-action-button.lab,

  body.mobile-ui-active
  .course-button.reload {
    border-color:
      rgba(0, 87, 184, 0.22) !important;

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

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

  /*
   * Zatrzymanie, zakończenie, usuwanie.
   */

  body.mobile-ui-active
  .training-button.finish,

  body.mobile-ui-active
  .simulator-button.stop,

  body.mobile-ui-active
  .live-action-button.stop,

  body.mobile-ui-active
  .course-button.delete {
    border-color: #efc4c1 !important;

    background:
      var(--ow-btn-red-soft) !important;

    color: var(--ow-btn-red) !important;
  }

  /*
   * Przyciski elementów trasy zachowują
   * znaczenie kolorów, ale mają tę samą formę.
   */

  body.mobile-ui-active
  .course-button.start {
    border-color: #b8dfc8 !important;
    background: #e7f6ed !important;
    color: #117344 !important;
  }

  body.mobile-ui-active
  .course-button.finish {
    border-color: #efc4c1 !important;
    background: #fcebea !important;
    color: #a63b35 !important;
  }

  body.mobile-ui-active
  .course-button.mark {
    border-color: #efd69a !important;
    background: #fff4d8 !important;
    color: #916000 !important;
  }

  body.mobile-ui-active
  .course-button.gate {
    border-color: #d8c1f6 !important;
    background: #f2eaff !important;
    color: #6d31c4 !important;
  }

  /*
   * Czytelna hierarchia układu trasy.
   */

  body.mobile-ui-active
  #course-delete {
    grid-column: 1 / -1 !important;
  }

  body.mobile-ui-active
  .live-simulator-actions
  .live-action-button.lab {
    grid-column: 1 / -1 !important;
  }

  /*
   * Wyłączone przyciski identyczne wszędzie.
   */

  body.mobile-ui-active
  .mobile-action-button:disabled,

  body.mobile-ui-active
  .training-button:disabled,

  body.mobile-ui-active
  .simulator-button:disabled,

  body.mobile-ui-active
  .course-button:disabled,

  body.mobile-ui-active
  .live-action-button:disabled {
    border-color: #dce5eb !important;

    background:
      var(--ow-btn-disabled) !important;

    color: #8999a6 !important;

    opacity: 1 !important;
    cursor: not-allowed !important;
  }
}

@media (max-width: 390px) {
  body.mobile-ui-active
  .mobile-action-button,

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

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

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

  body.mobile-ui-active
  .live-action-button {
    height: 42px !important;
    min-height: 42px !important;

    padding: 0 7px !important;

    font-size: 10px !important;
  }
}

/* =========================================================
   OptiWake — wzmocnienie kontrastu mobilnego UI
   ========================================================= */

@media (max-width: 820px) {
  body.mobile-ui-active {
    color: #0b1d3a !important;
  }

  body.mobile-ui-active
  .app-view-panel,
  body.mobile-ui-active
  .training-panel,
  body.mobile-ui-active
  .course-editor-card,
  body.mobile-ui-active
  .simulator-panel,
  body.mobile-ui-active
  .course-version-manager,
  body.mobile-ui-active
  .course-map-layers {
    border-color: #bfd0dc !important;
    background: #ffffff !important;

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

  body.mobile-ui-active
  .mobile-action-button,
  body.mobile-ui-active
  .training-button,
  body.mobile-ui-active
  .simulator-button,
  body.mobile-ui-active
  .course-button,
  body.mobile-ui-active
  .live-action-button {
    border-color: #b9ccd9 !important;
    background: #ffffff !important;
    color: #0b1d3a !important;

    font-weight: 850 !important;
  }

  body.mobile-ui-active
  .mobile-action-button.training,
  body.mobile-ui-active
  .training-button.start,
  body.mobile-ui-active
  .simulator-button.start,
  body.mobile-ui-active
  .live-action-button.start {
    border-color: #4fded3 !important;
    background: #d9f8f4 !important;
    color: #006c65 !important;
  }

  body.mobile-ui-active
  .mobile-action-button.panel,
  body.mobile-ui-active
  .live-action-button.lab,
  body.mobile-ui-active
  .course-button.reload {
    border-color: #8ebee0 !important;
    background: #e5f2fb !important;
    color: #0057b8 !important;
  }

  body.mobile-ui-active
  .course-button.start {
    border-color: #7bc79c !important;
    background: #dff3e7 !important;
    color: #0d6d3d !important;
  }

  body.mobile-ui-active
  .course-button.finish {
    border-color: #e79b96 !important;
    background: #fae3e1 !important;
    color: #a12d27 !important;
  }

  body.mobile-ui-active
  .course-button.mark {
    border-color: #e7bf5e !important;
    background: #fff0c3 !important;
    color: #8a5800 !important;
  }

  body.mobile-ui-active
  .course-button.gate {
    border-color: #bfa0ee !important;
    background: #ede1ff !important;
    color: #6530b8 !important;
  }

  body.mobile-ui-active
  .training-button.finish,
  body.mobile-ui-active
  .simulator-button.stop,
  body.mobile-ui-active
  .live-action-button.stop,
  body.mobile-ui-active
  .course-button.delete {
    border-color: #e6aaa6 !important;
    background: #f8e4e2 !important;
    color: #a3332d !important;
  }

  body.mobile-ui-active
  .mobile-action-button:disabled,
  body.mobile-ui-active
  .training-button:disabled,
  body.mobile-ui-active
  .simulator-button:disabled,
  body.mobile-ui-active
  .course-button:disabled,
  body.mobile-ui-active
  .live-action-button:disabled {
    border-color: #cbd7df !important;
    background: #e8eef2 !important;
    color: #718493 !important;

    opacity: 1 !important;
  }

  body.mobile-ui-active
  .training-state,
  body.mobile-ui-active
  .simulator-state,
  body.mobile-ui-active
  .course-version-status,
  body.mobile-ui-active
  .status-message {
    border-color: #c6d4de !important;
    background: #edf3f7 !important;
    color: #40566b !important;
  }

  body.mobile-ui-active
  h2,
  body.mobile-ui-active
  h3,
  body.mobile-ui-active
  .panel-title,
  body.mobile-ui-active
  .course-editor-title {
    color: #0b1d3a !important;
  }

  body.mobile-ui-active
  .mobile-nav-button {
    color: #5e7386 !important;
  }

  body.mobile-ui-active
  .mobile-nav-button.active {
    border-color: #9fc8e5 !important;
    background: #e3f1fb !important;
    color: #0057b8 !important;
  }
}