:root {

  --bs-spacer: 1rem;

  --bs-spacer-0: 0;
  --bs-spacer-1: 0.25rem;
  --bs-spacer-2: 0.5rem;
  --bs-spacer-3: 1rem;
  --bs-spacer-4: 1.5rem;
  --bs-spacer-5: 3rem;

  --bs-border-radius-sm: 0.4rem;

/*  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-xxl: 2rem;
  --bs-border-radius-pill: 50rem;*/
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-VariableFont_opsz,wght.woff2') format('woff2'),
       url('/fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Italic-VariableFont_opsz,wght.woff2') format('woff2'),
       url('/fonts/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
}

.btn.dropdown-toggle::after {
  display: none !important;
}


body {
  background-color: #1c1f22;
}


html, body {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
}

html {
  touch-action: manipulation;
}

body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  overscroll-behavior-y: none;
  overscroll-behavior-x: none;
}

input, textarea {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
  -moz-user-select: text;
  -ms-user-select: text;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

:focus {
  outline: none;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.form-control-sm:focus,
.form-control-lg:focus {
  outline: none;
  box-shadow: none;
  border-color: inherit;
}

.form-control,
.form-select,
.form-check-input {
  -webkit-tap-highlight-color: transparent;
}


.btn-square {
  padding-left: 0;
  padding-right: 0;
  width: 1.9rem;
  min-width: 1.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}







#nav-home-btn {
  display: flex;
}

@media (min-width: 768px) {
  #nav-home-btn {
    display: none;
  }
}



#tab-nav {
  display: flex;
  align-items: center;
  background-color: #212529;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
/*  padding: 0.75rem;*/
  z-index: 10000;

  background: var(--bs-tertiary-bg);
  padding: var(--bs-spacer-2);
  border-radius: calc(var(--bs-border-radius-sm) + var(--bs-spacer-2));
  margin: var(--bs-spacer-2);


}

#main-container {
  padding: 0.5rem;
/*  padding-bottom: 30rem;*/
}

.workout-controls {
  background: var(--bs-tertiary-bg);
  padding: var(--bs-spacer-2);
  border-radius: calc(var(--bs-border-radius-sm) + var(--bs-spacer-2));
}


.workout-controls input,
.workout-controls select,
.workout-controls textarea {
  border-color: var(--bs-body-bg);
  flex: 1 1 0;
  min-width: 0;
}


/* Адаптация для ПК (768px и больше) */
@media (min-width: 768px) {
  .workout-controls {
    flex-wrap: wrap; /* Включаем перенос для ПК */
  }

  .workout-controls input,
  .workout-controls select,
  .workout-controls textarea {
    flex: 0 1 auto; /* Ширина по содержимому, без растягивания */
    max-width: 100%; /* Ограничиваем максимальную ширину */
  }
}

.workout-body {
  padding-bottom: 30rem;
}

@media (min-width: 768px) {
  #main-container {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-template-rows: auto auto 1fr; /* Изменено: теперь workout-head не растягивается */
    height: 100vh;
    overflow: hidden;
/*    padding: 0;*/
    padding: 0.5rem; /* Добавлен отступ со всех сторон */
/*    gap: 0.5rem;  Добавлен отступ между столбцами и строками */
    column-gap: 0.5rem; /* Отступ только между столбцами */
  }

  #tab-nav {
    grid-column: 1;
    position: fixed;
    bottom: 0;
    left: 0;
    right: auto;
    width: 200px;
/*    background-color: #212529;*/
/*    padding: 0;*/
    display: flex;
    align-items: center;
    z-index: 10000;
    margin: 0.5rem;

  }

  .workout-container {
    display: contents;
  }

  .workout-body {
    grid-column: 2;
    grid-row: 1 / 4;
    overflow: auto;
/*    padding: 0.5rem;*/
  }

  .workout-controls {
    grid-column: 1;
    grid-row: 1;
/*    padding: 0.5rem 0 0.5rem 0.5rem;*/
  }

  .workout-head {
    grid-column: 1;
    grid-row: 2;
    padding: 0.5rem 0 0.5rem 0.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    background: var(--bs-tertiary-bg);
    border-radius: calc(var(--bs-border-radius-sm) + var(--bs-spacer-2));
  }

  .workout-head input,
  .workout-head select,
  .workout-head textarea {
    flex: 0 1 auto;
    max-width: 100%;
    border-color: var(--bs-body-bg);
  }

  .workout-footer {
    grid-column: 1;
    grid-row: 3;
/*    padding: 0.5rem 0 0.5rem 0.5rem;*/
  }
}

/* Базовые стили (для мобильных устройств) */
.workout-head {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  margin-top: var(--bs-spacer-2);
  background: var(--bs-tertiary-bg);
  padding: var(--bs-spacer-2);
  border-radius: calc(var(--bs-border-radius-sm) + var(--bs-spacer-2));
}

.workout-head input,
.workout-head select,
.workout-head textarea {
  border-color: var(--bs-body-bg);
  flex: 1 1 0;
  min-width: 0;
}


/* Адаптация для ПК (768px и больше) */
@media (min-width: 768px) {
  .workout-head {
    flex-wrap: wrap; /* Включаем перенос для ПК */
  }

  .workout-head input,
  .workout-head select,
  .workout-head textarea {
    flex: 0 1 auto; /* Ширина по содержимому, без растягивания */
    max-width: 100%; /* Ограничиваем максимальную ширину */
  }
}




.track-audio {
  margin-top: var(--bs-spacer-2);
  background: var(--bs-tertiary-bg);
  padding: var(--bs-spacer-2);
  border-radius: calc(var(--bs-border-radius-sm) + var(--bs-spacer-2));
}

.track-controls {
  margin-top: var(--bs-spacer-2);
  background: var(--bs-tertiary-bg);
  padding: var(--bs-spacer-2);
  border-radius: calc(var(--bs-border-radius-sm) + var(--bs-spacer-2));
}

.track-head {
  display: flex;
  flex-wrap: wrap; /* По умолчанию допускаем перенос на мобильных */
  gap: 0.5rem;
  margin-top: var(--bs-spacer-2);
  background: var(--bs-tertiary-bg);
  padding: var(--bs-spacer-2);
  border-radius: calc(var(--bs-border-radius-sm) + var(--bs-spacer-2));
}

.track-footer {
  padding-top: var(--bs-spacer-2);
}

@media (min-width: 768px) {
  .track-container {
    display: flex; /* Flex-контейнер */
    flex-wrap: wrap; /* Разрешаем перенос */
/*    gap: 0.5rem;  Промежуток между элементами */
    column-gap: 0.5rem; /* Отступ только между столбцами */
    width: 100%; /* Убеждаемся, что контейнер занимает всю ширину */
  }

  .track-controls,
  .track-head,
  .track-audio{
    width: fit-content; /* Минимальная ширина по содержимому для переноса */
    flex-grow: 1; /* Растягиваем после переноса */
    flex-shrink: 0; /* Предотвращаем сжатие меньше fit-content */
    flex-basis: auto; /* Базовая ширина определяется width */
    min-width: 0; /* Предотвращаем переполнение */
/*    margin-top: 0;*/
  }


/*
  .track-footer {
    padding-top: 0;
  }*/

  /* Ставим track-head на первое место */
  .track-head {
    order: -1; /* Перемещаем в начало */
  }

  /* Отключаем flex-поведение для остальных div */
  .track-container > div:not(.track-controls):not(.track-audio):not(.track-head) {
    flex: none; /* Обычное блочное поведение */
    width: 100%; /* Полная ширина для остальных */
  }
}








.progress-bar {
  min-width: 70px;
}



.audio-total-time {
  padding: 0px;
  align-self: center;
  font-size: .875rem;
}

.audio-current-time {
  padding: 0px;
  align-self: center;
  font-size: .875rem;
}

.load-music-button {
  min-width: max-content;
}


.track-container {
  padding-top: var(--bs-spacer-4);
  padding-bottom: var(--bs-spacer-5);
}



.track-head input,
.track-head select,
.track-head textarea {
  border-color: var(--bs-body-bg);
}

/* Мобильная версия (до 767px) */
@media (max-width: 767px) {
  .track-head {
    flex-wrap: nowrap; /* Запрещаем перенос, чтобы оба элемента были в одной строке */
  }

  .track-head .form-control {
    flex: 1 1 0; /* Делим доступное пространство поровну, минимальная ширина 0 */
    max-width: none; /* Убираем ограничение по максимальной ширине */
  }

  .track-head .track-number {
    min-width: 0; /* Предотвращаем переполнение */
  }

  .track-head .track-title {
    min-width: 0; /* Предотвращаем переполнение */
  }
}

/* ПК версия (768px и выше) */
@media (min-width: 768px) {
  .track-head {
    flex-wrap: nowrap; /* Оставляем как есть для ПК */
  }

  .track-head .track-number {
    width: auto;
    min-width: 100px;
/*    flex: 0 0 150px; /* Фиксированная ширина 150px */*/
  }

  .track-head .track-title {
    width: auto;
    min-width: 120px;
/*    flex: 0 0 300px; /* Фиксированная ширина 300px */*/
  }
}




.time-adjuster {
  position: relative;
  background: var(--bs-btn-bg); /* Сохраняем ваш фон */
  height: 100%; /* Оставляем растяжку по высоте, как было ранее */
  border-radius: var(--bs-border-radius-sm);

}

.time-adjuster::before {
  content: "";
  position: absolute;
  top: 0.5rem;    /* Отступ сверху */
  bottom: 0.5rem; /* Отступ снизу */
  left: 0.5rem;   /* Отступ слева */
  right: 0.5rem;  /* Отступ справа */
  background-image: repeating-linear-gradient(
    to right,           /* Горизонтальное направление для вертикальных линий */
    var(--bs-border-color),               /* Цвет линий (можно заменить на var(--bs-border-color)) */
    var(--bs-border-color) 2px,           /* Толщина линии */
    transparent 1px,    /* Начало прозрачности */
    transparent 16px    /* Расстояние между линиями */
  );
  opacity: 0.4;         /* Прозрачность линий */
  z-index: 0;           /* Помещаем линии под содержимое */
  pointer-events: none; /* Линии не мешают взаимодействию */
}

.time-offset-label {
  position: absolute;
  left: 5px; /* Отступ от левого края */
  top: 50%;
  transform: translateY(-50%); /* Центрируем по высоте */
  color: white;
  font-size: 12px;
  pointer-events: none; /* Чтобы не мешал кликам */
}




.track-title {
  padding: 0px;
  align-self: center;
  padding-left: 0.25rem;
}


.sortable-ghost {
  background: #ffeb3b;
/*  border: 2px dashed #000;*/
  opacity: 0.3;
}




.block-container {
  padding-top: var(--bs-spacer-5);
}

.block-controls {
/*  margin-top: var(--bs-spacer-2);*/
  background: var(--bs-tertiary-bg);
  padding: var(--bs-spacer-2);
  border-radius: calc(var(--bs-border-radius-sm) + var(--bs-spacer-2));
}

.block-number-title {
  padding: 0px;
  align-self: center;
  padding-left: 0.25rem;
}

.block-footer {
  padding-top: var(--bs-spacer-2);
}








.exercise-container {
  background: var(--bs-tertiary-bg);
  padding: var(--bs-spacer-2);
  border-radius: calc(var(--bs-border-radius-sm) + var(--bs-spacer-2));
  margin-top: var(--bs-spacer-2);

}

.exercise-container input,
.exercise-container select,
.exercise-container textarea {
  border-color: var(--bs-body-bg);
}


  .exercise-container {
    display: grid;
    grid-template-columns: 1fr 25px;
    grid-template-rows: auto auto;
    column-gap: var(--bs-spacer-2);
/*    row-gap: var(--bs-spacer-1);*/
/*    margin-top: var(--bs-spacer-2);*/
  }

  .exercise-handle {
    grid-column: 2;
    grid-row: 1 / 3;
    background-color: var(--bs-body-bg);
    border-radius: var(--bs-border-radius-sm);
    cursor: move;
    position: relative;
    overflow: hidden;
  }

  .exercise-handle::before {
    content: "";
    position: absolute;
    top: 0.5rem;
    bottom: 0.5rem;
    left: 0.5rem;
    right: 0.5rem;
    background-image: linear-gradient(
      to bottom,
      transparent 0%,           /* Прозрачное начало */
      transparent calc(50% - 5px), /* Пространство до первой линии */
      var(--bs-border-color) calc(50% - 5px), /* Начало первой линии */
      var(--bs-border-color) calc(50% - 3px), /* Конец первой линии (2px толщина) */
      transparent calc(50% - 3px), /* Пространство между линиями */
      transparent calc(50% - 1px), /* Пространство до второй линии */
      var(--bs-border-color) calc(50% - 1px), /* Начало второй линии */
      var(--bs-border-color) calc(50% + 1px), /* Конец второй линии (2px толщина) */
      transparent calc(50% + 1px), /* Пространство между линиями */
      transparent calc(50% + 3px), /* Пространство до третьей линии */
      var(--bs-border-color) calc(50% + 3px), /* Начало третьей линии */
      var(--bs-border-color) calc(50% + 5px), /* Конец третьей линии (2px толщина) */
      transparent calc(50% + 5px), /* Пространство после третьей линии */
      transparent 100%           /* Прозрачный конец */
    );
    opacity: 0.4;
    z-index: 0;
    pointer-events: none;
  }

  .exercise-controls-row {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Убеждаемся, что занимает всю ширину ячейки сетки */


/*    padding-top: var(--bs-spacer-2);*/
    padding-bottom: var(--bs-spacer-2);

  }

  .exercise-controls {
    justify-content: flex-end;
    flex-shrink: 0; /* Предотвращаем сжатие этого блока */
  }

  .time-adjuster {
    flex-grow: 1; /* Занимает все доступное пространство */
    flex-shrink: 1; /* Позволяет сжиматься, если нужно */
    height: 100%; /* Растягивается по высоте родителя */
    display: flex; /* Чтобы дочерний элемент (timeOffsetLabel) мог выравниваться */
    align-items: center; /* Вертикальное центрирование содержимого */
    min-width: 0; /* Предотвращаем переполнение */
    order: -1;
  }

  .time-offset-label {
    white-space: nowrap; /* Предотвращаем перенос текста */
  }

  .exercise-head {
    grid-column: 1;
    grid-row: 2;
  }



/* ПК версия (768px и выше) */
@media (min-width: 768px) {
/*  .track-head {
    flex-wrap: nowrap;
  }

  .track-head .track-number {
    width: auto;
    min-width: 130px;
  }

  .track-head .track-title {
    width: auto;
    min-width: 130px;
  }*/
}











.time-offset-label {
  white-space: nowrap;
  opacity: 0; /* Изначально скрываем */
  transition: opacity 0.2s ease; /* Плавное появление/исчезновение */
}

.time-adjuster.active .time-offset-label {
  opacity: 1; /* Показываем, когда time-adjuster активен */
}


.exercise-head {
  display: grid;
  gap: var(--bs-spacer-2);
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "time counts"
    "position position"
    "pace resistance";
}


@media (max-width: 767px) {
  .exercise-head .input-group,
  .exercise-head .exercise-counts,
  .exercise-head .exercise-position,
  .exercise-head .exercise-pace,
  .exercise-head .exercise-resistance {
    width: 100% !important; /* Перебивает встроенный style */
  }
}


.exercise-head .input-group {
  grid-area: time;
}

.exercise-head .exercise-counts {
  grid-area: counts;
}

.exercise-head .exercise-position {
  grid-area: position;
}

.exercise-head .exercise-pace {
  grid-area: pace;
}

.exercise-head .exercise-resistance {
  grid-area: resistance;
}

@media (min-width: 768px) {
  .exercise-head {
    grid-template-columns: 1fr 1fr;
  }
}

/*
  .exercise-head  {
    flex-wrap: nowrap;
  }


  .exercise-head .exercise-time,
  .exercise-head .exercise-counts,
  .exercise-head .exercise-position,
  .exercise-head .exercise-resistance,
  .exercise-head .exercise-pace {
    width: auto;
  }

    .exercise-head .form-control {
        flex: 1 1 0;
        max-width: none;
    }
*/



@media (min-width: 768px) {
  .exercise-container {
    display: flex; /* Переводим в Flexbox */
    flex-wrap: wrap; /* Перенос элементов, если не помещаются */
    align-items: center; /* Выравнивание по вертикали */
    gap: var(--bs-spacer-2); /* Отступы между элементами */
    padding: var(--bs-spacer-2);
    background: var(--bs-tertiary-bg);
    border-radius: calc(var(--bs-border-radius-sm) + var(--bs-spacer-2));
    margin-top: var(--bs-spacer-2);
  }

  /* Убираем grid-стили для вложенных элементов */
  .exercise-controls-row {
    display: contents; /* Убираем обёртку, чтобы элементы внутри стали прямыми детьми flex */
    width: fit-content; /* Минимально необходимая ширина */

  }

  .exercise-head {
    display: contents; /* Убираем grid внутри exercise-head, элементы станут частью основного flex */
  }

  /* Порядок элементов через order + width: fit-content */
  .time-adjuster {
    order: 1;
    flex: 0 1 auto; /* Не растягивается, занимает естественную ширину */
    width: fit-content; /* Минимально необходимая ширина */
    min-width: 120px;
    height: 30px;
    display: flex; /* Убеждаемся, что дочерние элементы выстраиваются */
    align-items: center; /* Вертикальное центрирование */
  }

  .exercise-time-group {
    order: 2;
    flex: 0 1 auto; /* Естественная ширина */
    width: fit-content; /* Минимально необходимая ширина */
  }

  .exercise-time {
    width: fit-content; /* Минимально необходимая ширина */
  }


  .exercise-counts {
    order: 3;
    flex: 0 1 auto;
    width: fit-content; /* Минимально необходимая ширина */
    min-width: 70px;
  }

  .exercise-position {
    order: 4;
    flex: 0 1 auto;
    width: fit-content; /* Минимально необходимая ширина */
    min-width: 200px;
  }

  .exercise-resistance {
    order: 5;
    flex: 0 1 auto;
    width: fit-content; /* Минимально необходимая ширина */
    min-width: 100px;
  }

  .exercise-pace {
    order: 6;
    flex: 0 1 auto;
    width: fit-content; /* Минимально необходимая ширина */
    min-width: 100px;
  }

  .exercise-controls {
    order: 7;
    flex: 0 1 auto;
    display: flex; /* Сохраняем горизонтальное выравнивание кнопок */
    gap: var(--bs-spacer-1);
    width: fit-content; /* Минимально необходимая ширина */
  }

  .exercise-handle {
    order: 8;
    flex: 0 0 25px; /* Фиксированная ширина, как в мобильной версии */
    width: 25px; /* Явно задаём ширину вместо fit-content, так как это фиксированный элемент */
    height: 30px; /* Явная высота, чтобы гарантировать видимость */
    background-color: var(--bs-body-bg);
    border-radius: var(--bs-border-radius-sm);
    cursor: move;
    position: relative;
  }

  /* Убираем лишние отступы и стили, которые конфликтуют */
  .exercise-controls-row {
    padding-bottom: 0; /* Убираем лишний отступ */
  }

  /* Убеждаемся, что time-offset-label внутри time-adjuster виден */
  .time-offset-label {
    opacity: 1; /* Делаем видимым по умолчанию для теста */
  }
}

/* Существующие стили для exercise-handle::before и других элементов остаются без изменений */