:root {
  --opti-sidebar-width: 310px;
  --opti-header-control-height: 34px;
}

/* =====================================================
   GŁÓWNY NAGŁÓWEK
   ===================================================== */

@media (min-width: 901px) {
  body > header {
    min-height: 52px !important;
    padding: 5px 12px !important;

    gap: 10px !important;
  }

  body > header img {
    width: auto !important;
    max-height: 38px !important;
  }

  body > header h1,
  body > header h2 {
    margin: 0 !important;

    font-size: 17px !important;
    line-height: 1.05 !important;
  }

  body > header p,
  body > header small {
    margin: 1px 0 0 !important;

    font-size: 9px !important;
    line-height: 1.15 !important;
  }
}

/* =====================================================
   PASEK ZAKŁADEK I STATUSÓW
   ===================================================== */

.app-view-tabs {
  min-height: 40px !important;
  padding: 4px 10px !important;

  gap: 6px !important;

  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;

  scrollbar-width: thin;
}

.app-view-tab {
  min-height: 32px !important;
  padding: 5px 10px !important;

  flex: 0 0 auto !important;

  font-size: 10px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

#simulator-header-status-slot {
  margin-right: 4px !important;
  margin-left: 4px !important;
}

#simulator-header-status-slot #simulator-state {
  min-height: 32px !important;
  max-height: 32px !important;

  padding: 0 10px !important;

  border-radius: 9px !important;

  font-size: 9px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* =====================================================
   OBSZAR ROBOCZY I PANEL LEWY
   ===================================================== */

.app-workspace {
  position: relative !important;

  grid-template-columns:
    var(--opti-sidebar-width)
    minmax(0, 1fr) !important;

  transition:
    grid-template-columns
    220ms ease !important;
}

.app-sidebar {
  min-width: 0 !important;

  transition:
    opacity 160ms ease,
    transform 220ms ease !important;
}

body.opti-sidebar-collapsed {
  --opti-sidebar-width: 0px;
}

body.opti-sidebar-collapsed
.app-sidebar {
  opacity: 0 !important;

  pointer-events: none !important;

  overflow: hidden !important;

  border-right: 0 !important;

  transform:
    translateX(-100%) !important;
}

/* =====================================================
   PRZYCISK CHOWANIA PANELU
   ===================================================== */

#app-sidebar-toggle {
  position: absolute;

  top: 10px;
  left:
    calc(
      var(--opti-sidebar-width) - 15px
    );

  z-index: 1600;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 30px;
  height: 42px;

  padding: 0;

  border: 1px solid #aebfca;
  border-radius: 0 9px 9px 0;

  background: rgba(255, 255, 255, 0.97);
  color: #29485d;

  box-shadow:
    2px 3px 10px
    rgba(17, 45, 65, 0.16);

  font-family: inherit;
  font-size: 21px;
  font-weight: 900;
  line-height: 1;

  cursor: pointer;

  transition:
    left 220ms ease,
    background 150ms ease;
}

#app-sidebar-toggle:hover {
  background: #eaf3f8;
}

body.opti-sidebar-collapsed
#app-sidebar-toggle {
  left: 6px;

  border-radius: 9px;
}

/* =====================================================
   KOMPAKTOWY PANEL KONFIGURACJI
   ===================================================== */

.app-sidebar {
  font-size: 11px !important;
}

.app-sidebar .app-view-panel {
  padding: 8px !important;
}

.app-sidebar .app-module-card,
.app-sidebar .training-panel {
  margin-bottom: 8px !important;
  padding: 9px !important;

  border-radius: 10px !important;
}

.app-sidebar h2 {
  margin-bottom: 7px !important;

  font-size: 13px !important;
}

.app-sidebar h3 {
  margin: 5px 0 !important;

  font-size: 11px !important;
}

.app-sidebar label,
.app-sidebar p,
.app-sidebar span {
  font-size: 10px;
}

.app-sidebar input,
.app-sidebar select {
  min-height: 31px !important;
  padding: 5px 7px !important;

  font-size: 10px !important;
}

.app-sidebar .simulator-controls {
  gap: 6px !important;
}

.app-sidebar .simulator-button,
.app-sidebar button {
  min-height: 33px !important;
  padding: 6px 9px !important;

  font-size: 10px !important;
  line-height: 1.1 !important;
}

.app-sidebar #selected-start,
.app-sidebar #simulator-state {
  padding: 6px 7px !important;

  font-size: 9px !important;
  line-height: 1.2 !important;
}

/* =====================================================
   PANELE ANALIZ
   ===================================================== */

.coach-analysis-panel,
.leg-analysis-panel {
  top: 8px !important;
  bottom: 62px !important;

  border-radius: 13px !important;

  box-shadow:
    0 10px 28px
    rgba(15, 42, 61, 0.22) !important;

  font-size: 12px !important;
}

.coach-analysis-panel h2,
.leg-analysis-panel h2 {
  font-size: 16px !important;
  line-height: 1.15 !important;
}

.coach-analysis-panel h3,
.leg-analysis-panel h3 {
  font-size: 13px !important;
  line-height: 1.2 !important;
}

.coach-analysis-panel p,
.leg-analysis-panel p,
.coach-analysis-panel label,
.leg-analysis-panel label {
  font-size: 11px !important;
  line-height: 1.4 !important;
}

.coach-analysis-panel button,
.leg-analysis-panel button,
.coach-analysis-panel select,
.leg-analysis-panel select,
.coach-analysis-panel input,
.leg-analysis-panel input {
  min-height: 32px;

  font-size: 11px !important;
}

/* =====================================================
   ANALIZA ODCINKÓW — WIĘKSZA CZYTELNOŚĆ
   ===================================================== */

.leg-matrix-title-row h3,
.leg-runs-header h3 {
  font-size: 15px !important;
}

.leg-matrix-toolbar {
  gap: 8px !important;
}

.leg-matrix-toolbar label > span {
  font-size: 10px !important;
}

.leg-matrix-table th,
.leg-matrix-table td,
.leg-runs-table th,
.leg-runs-table td {
  padding: 8px 10px !important;

  font-size: 12px !important;
  line-height: 1.25 !important;
}

.leg-matrix-table td strong,
.leg-matrix-table th strong,
.leg-runs-table td strong,
.leg-runs-table th strong {
  font-size: 13px !important;
}

.leg-matrix-table small,
.leg-runs-table small {
  font-size: 10px !important;
}

.leg-matrix-device {
  max-width: 130px !important;

  font-size: 11px !important;
}

.leg-matrix-table th:first-child,
.leg-runs-table th:first-child {
  min-width: 180px !important;
  max-width: 180px !important;
}

/* =====================================================
   ANALIZA TRENERA — WIĘKSZE TEKSTY
   ===================================================== */

.coach-athlete-card h3 {
  font-size: 15px !important;
}

.coach-simple-item-top span {
  font-size: 10px !important;
}

.coach-simple-item-top strong {
  font-size: 11px !important;
}

.coach-simple-item p {
  font-size: 11px !important;
  line-height: 1.4 !important;
}

.coach-simple-summary-title {
  font-size: 13px !important;
}

.coach-metric-mode,
.coach-metric-mode button {
  font-size: 10px !important;
}

/* =====================================================
   SZERSZE ANALIZY NA DUŻYM EKRANIE
   ===================================================== */

@media (min-width: 1280px) {
  .coach-analysis-panel {
    width: 410px !important;
    max-width: 410px !important;
  }

  .leg-analysis-panel {
    right: 432px !important;
  }
}

/* =====================================================
   MNIEJSZE EKRANY
   ===================================================== */

@media (max-width: 900px) {
  #app-sidebar-toggle {
    display: none !important;
  }

  body.opti-sidebar-collapsed {
    --opti-sidebar-width: 0px;
  }
}

/* OPTIWAKE SIDEBAR HANDLE BRAND V1 START */

@media (min-width: 761px) {
  .ow-sidebar-map-anchor {
    overflow:
      hidden !important;

    border:
      1px solid
      #19c3c9 !important;

    border-left:
      0 !important;

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

    background:
      linear-gradient(
        180deg,
        #0b1d3a 0%,
        #0c365d 100%
      ) !important;

    color:
      #ffffff !important;

    box-shadow:
      0 8px 22px
      rgba(11, 29, 58, 0.32),
      inset 4px 0 0
      #19c3c9 !important;

    font-size:
      27px !important;

    font-weight:
      900 !important;

    line-height:
      1 !important;

    text-shadow:
      none !important;

    cursor:
      pointer !important;

    transition:
      background 160ms ease,
      color 160ms ease,
      border-color 160ms ease,
      box-shadow 160ms ease !important;
  }

  .ow-sidebar-map-anchor:hover {
    border-color:
      #0b1d3a !important;

    background:
      #19c3c9 !important;

    color:
      #0b1d3a !important;

    box-shadow:
      0 9px 24px
      rgba(11, 29, 58, 0.36),
      inset 4px 0 0
      #0b1d3a !important;
  }

  .ow-sidebar-map-anchor:active {
    background:
      #12aeb6 !important;
  }

  .ow-sidebar-map-anchor:focus-visible {
    outline:
      3px solid
      rgba(25, 195, 201, 0.42) !important;

    outline-offset:
      3px !important;
  }

  .ow-sidebar-map-anchor *,
  .ow-sidebar-map-anchor::before,
  .ow-sidebar-map-anchor::after {
    color:
      inherit !important;
  }

  .ow-sidebar-map-anchor svg {
    fill:
      currentColor !important;

    stroke:
      currentColor !important;
  }
}

/* OPTIWAKE SIDEBAR HANDLE BRAND V1 END */

/* DESKTOP TRACKERS POPOVER LAYER V1 START */

/*
 * Wyłącznie układ komputerowy.
 * Mobilne kontrolki trackerów pozostają bez zmian.
 */

@media (min-width: 821px) {
  body:not(.mobile-ui-active)
  .app-view-tabs {
    position:
      relative !important;

    z-index:
      4600 !important;

    overflow:
      visible !important;
  }

  body:not(.mobile-ui-active)
  .desktop-status-tools {
    position:
      relative !important;

    z-index:
      4650 !important;

    overflow:
      visible !important;
  }

  body:not(.mobile-ui-active)
  .desktop-status-widget,
  body:not(.mobile-ui-active)
  .desktop-trackers-widget {
    position:
      relative !important;

    overflow:
      visible !important;
  }

  body:not(.mobile-ui-active)
  .desktop-trackers-widget[open] {
    z-index:
      4700 !important;
  }

  body:not(.mobile-ui-active)
  .desktop-trackers-popover {
    position:
      absolute !important;

    top:
      calc(100% + 8px) !important;

    right:
      0 !important;

    bottom:
      auto !important;

    left:
      auto !important;

    z-index:
      4800 !important;

    display:
      block;

    min-width:
      220px !important;

    max-height:
      min(
        420px,
        calc(100dvh - 170px)
      ) !important;

    overflow-x:
      hidden !important;

    overflow-y:
      auto !important;

    visibility:
      visible !important;

    pointer-events:
      auto !important;

    overscroll-behavior:
      contain !important;
  }

  body:not(.mobile-ui-active)
  .desktop-trackers-widget:not([open])
  .desktop-trackers-popover {
    display:
      none !important;
  }
}

/* DESKTOP TRACKERS POPOVER LAYER V1 END */

/* DESKTOP TRACKERS POPOVER STABLE V2 START */

/*
 * Wyłącznie widok PC.
 * Mobilny przycisk i mobilny panel trackerów
 * pozostają całkowicie bez zmian.
 */

@media (min-width: 821px) {
  body:not(.mobile-ui-active)
  .desktop-trackers-popover {
    min-height:
      0 !important;

    height:
      auto !important;

    animation:
      none !important;

    transition:
      none !important;
  }

  body:not(.mobile-ui-active)
  .desktop-trackers-popover
  .tracker-legend {
    position:
      static !important;

    display:
      block !important;

    width:
      auto !important;

    height:
      auto !important;

    min-height:
      0 !important;

    max-height:
      none !important;

    margin:
      0 !important;

    padding:
      2px !important;

    opacity:
      1 !important;

    visibility:
      visible !important;

    transform:
      none !important;

    animation:
      none !important;

    transition:
      none !important;
  }

  /*
   * Oryginalny przycisk zamykania legendy
   * jest zbędny wewnątrz desktopowego popupu.
   */

  body:not(.mobile-ui-active)
  .desktop-trackers-popover
  .tracker-legend-toggle,

  body:not(.mobile-ui-active)
  .desktop-trackers-popover
  .ow-map-tracker-control,

  body:not(.mobile-ui-active)
  .desktop-trackers-popover
  button[title*="zamknij" i],

  body:not(.mobile-ui-active)
  .desktop-trackers-popover
  button[aria-label*="zamknij" i] {
    display:
      none !important;

    width:
      0 !important;

    height:
      0 !important;

    min-width:
      0 !important;

    min-height:
      0 !important;

    margin:
      0 !important;

    padding:
      0 !important;

    border:
      0 !important;

    visibility:
      hidden !important;

    pointer-events:
      none !important;
  }

  body:not(.mobile-ui-active)
  .desktop-trackers-popover
  .tracker-legend-row,

  body:not(.mobile-ui-active)
  .desktop-trackers-popover
  .tracker-legend-title,

  body:not(.mobile-ui-active)
  .desktop-trackers-popover
  .tracker-legend-state {
    animation:
      none !important;

    transition:
      none !important;
  }
}

/* DESKTOP TRACKERS POPOVER STABLE V2 END */