/* SparkyFitness: мобильные правки вёрстки (Игорь) */

/* 1. Фиксированный таб-бар не должен перекрывать контент */
@media (max-width: 639px) {
  body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
}

/* 2. Таб-бар: подписи не обрезаются в «Панель уп…» */
@media (max-width: 639px) {
  nav.apple-safe-area {
    height: auto;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  nav.apple-safe-area > div {
    height: auto;
    min-height: 56px;
  }
  nav.apple-safe-area button {
    min-width: 0;
    height: auto;
    padding: 6px 2px;
    gap: 2px;
  }
  nav.apple-safe-area button span,
  nav.apple-safe-area button small {
    display: block;
    max-width: 100%;
    font-size: 10px;
    line-height: 1.15;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* 3. Заголовок секции не наезжает на ссылку/кнопку справа */
@media (max-width: 639px) {
  div:has(> h1), div:has(> h2), div:has(> h3) {
    gap: 8px;
  }
  div:has(> h1) > h1,
  div:has(> h2) > h2,
  div:has(> h3) > h3 {
    min-width: 0;
    flex: 1 1 auto;
    overflow-wrap: anywhere;
  }
  div:has(> h1) > a, div:has(> h2) > a, div:has(> h3) > a,
  div:has(> h1) > button, div:has(> h2) > button, div:has(> h3) > button {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* 4. Длинные URL и ссылки в диалогах не вылезают за край (любой экран) */
[role="dialog"] a,
[role="dialog"] p,
[role="dialog"] code {
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}
[role="dialog"] {
  max-width: calc(100vw - 24px);
}

/* 5. Графики не обрезаются по ширине на телефоне */
@media (max-width: 639px) {
  .recharts-responsive-container,
  .recharts-wrapper {
    max-width: 100% !important;
  }
}