/* GymGenius mobile reflow R6.
   This is a true narrow-screen layout pass: content reflows inside the viewport
   instead of being hidden by overflow clipping. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
#root {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  overflow-x: clip;
}

body {
  position: relative;
}

img,
video,
canvas,
svg {
  max-width: 100%;
}

main,
header,
footer,
section,
article,
nav,
aside,
div {
  min-width: 0;
}

@media (max-width: 639px) {
  html,
  body,
  #root {
    width: 100vw;
    max-width: 100vw;
  }

  /* The app shell is a flex row. Its content pane must be allowed to shrink. */
  #root > .min-h-screen.flex {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  #root > .min-h-screen.flex > .flex-1,
  #root > .min-h-screen.flex > .flex-1 > div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Program page header and current-program summary. */
  header.sticky,
  header.sticky > .px-4.py-4 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  header.sticky > .px-4.py-4 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  header.sticky > .px-4.py-4 > .mb-4 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  header.sticky > .px-4.py-4 > .mb-4 p {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  /* Muscle filters: two compact rows instead of a clipped horizontal strip. */
  header.sticky .scrollbar-hide {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  header.sticky .scrollbar-hide > button {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 9px 13px !important;
    font-size: 14px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
  }

  /* Main list and its cards must remain inside the visual viewport. */
  .px-4.py-4.pb-8 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    overflow: visible !important;
  }

  button.relative.w-full.min-h-48 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 170px !important;
  }

  button.relative.w-full.min-h-48 .absolute.inset-0.p-4 {
    padding: 16px !important;
  }

  button.relative.w-full.min-h-48 h3 {
    max-width: 100% !important;
    font-size: 26px !important;
    line-height: 1.08 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  button.relative.w-full.min-h-48 .max-w-\[72\%\] {
    max-width: 68% !important;
  }

  /* Full-width AI action: no cut-off label or oversized intrinsic width. */
  .px-4.py-4.pb-8 > .pt-3.pb-4,
  .px-4.py-4.pb-8 > .pt-3.pb-4 > button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .px-4.py-4.pb-8 > .pt-3.pb-4 > button {
    padding-left: 16px !important;
    padding-right: 16px !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
  }

  /* Bottom navigation: equal-width tabs and one-line labels — 5 columns, one per route
     (Сегодня/Программа/Прогресс/История/Профиль). Was hard-coded to 4 columns, which pushed
     the 5th tab ("Профиль") onto its own row on every viewport in this file's breakpoint. */
  nav.fixed.bottom-0.left-0.right-0 > div {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    justify-content: stretch !important;
  }

  nav.fixed.bottom-0.left-0.right-0 > div > button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
  }

  nav.fixed.bottom-0.left-0.right-0 > div > button > span:last-child {
    display: block !important;
    max-width: 100% !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  /* Profile summary cards are too dense in four columns on narrow phones. */
  .grid.grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Long user-facing copy may wrap, but controls and navigation labels may not. */
  h1,
  h2,
  h3,
  h4,
  p {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
  }

  .fixed.inset-0 {
    width: 100vw !important;
    max-width: 100vw !important;
  }
}

@media (max-width: 359px) {
  header.sticky .scrollbar-hide > button {
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: 13px !important;
  }

  nav.fixed.bottom-0.left-0.right-0 > div > button > span:last-child {
    font-size: 9px !important;
  }

  button.relative.w-full.min-h-48 h3 {
    font-size: 23px !important;
  }
}


/* GymGenius readiness scroll final */
html,
body {
  min-height: 100%;
  height: auto !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
}

#root {
  min-height: 100vh;
  height: auto !important;
  overflow-y: visible !important;
}