/* Контейнер для таблицы с горизонтальным скроллом */
.uk-table-scroll-wrapper {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 20px;
  cursor: grab;
  margin-bottom: 20px; /* Соответствует стандартному отступу UIkit */
}

/* Курсор при активном скролле */
.uk-table-scroll-wrapper:active {
  cursor: grabbing;
}

/* Базовые стили для индикаторов скролла */
.uk-table-scroll-wrapper::before,
.uk-table-scroll-wrapper::after {
  content: "";
  position: absolute;
  bottom: 2px;
  color: #666;
  font-size: 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
}

/* Индикатор "стрелка влево" слева */
.uk-table-scroll-wrapper::before {
  content: "←";
  left: 15px;
  animation-name: bounce-left;
}

/* Индикатор "стрелка вправо" справа */
.uk-table-scroll-wrapper::after {
  content: "→";
  right: 15px;
  animation-name: bounce-right;
}

/* Показываем индикаторы только когда скролл нужен */
.uk-table-scroll-wrapper:not(.uk-no-scroll)::before,
.uk-table-scroll-wrapper:not(.uk-no-scroll)::after {
  opacity: 0.7;
}

/* Анимация для левой стрелки (движение вправо) */
@keyframes bounce-left {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(5px); }
}

/* Анимация для правой стрелки (движение влево) */
@keyframes bounce-right {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-5px); }
}

/* Скрываем индикаторы при активном скролле */
.uk-table-scroll-wrapper:active::before,
.uk-table-scroll-wrapper:active::after {
  opacity: 0 !important;
  animation-play-state: paused; /* Останавливаем анимацию при скролле */
}

/* Стили для таблицы внутри контейнера */
.uk-table-scroll-wrapper > .uk-table {
  min-width: 600px; /* Минимальная ширина для активации скролла */
  margin-bottom: 0; /* Убираем двойной отступ */
  width: 100%; /* Сохраняем адаптивность */
}

/* Состояние когда скролл не требуется */
.uk-table-scroll-wrapper.uk-no-scroll {
  overflow-x: visible;
  padding-bottom: 0;
  cursor: default;
}

/* Состояния скролла: НАЧАЛО */
.uk-table-scroll-wrapper.scroll-start::after {
  opacity: 0.7 !important; /* Правая стрелка видна */
}
.uk-table-scroll-wrapper.scroll-start::before {
  opacity: 0.3 !important; /* Левая стрелка полупрозрачна */
}

/* Состояния скролла: КОНЕЦ */
.uk-table-scroll-wrapper.scroll-end::before {
  opacity: 0.7 !important; /* Левая стрелка видна */
}
.uk-table-scroll-wrapper.scroll-end::after {
  opacity: 0.3 !important; /* Правая стрелка полупрозрачна */
}

/* Состояния скролла: СЕРЕДИНА */
.uk-table-scroll-wrapper.scroll-middle::before,
.uk-table-scroll-wrapper.scroll-middle::after {
  opacity: 0.7 !important; /* Обе стрелки видны */
}

/* Адаптация для темных тем UIkit */
.uk-light .uk-table-scroll-wrapper::before,
.uk-light .uk-table-scroll-wrapper::after {
  color: rgba(255, 255, 255, 0.7);
}

.uk-dark .uk-table-scroll-wrapper::before,
.uk-dark .uk-table-scroll-wrapper::after {
  color: rgba(255, 255, 255, 0.7);
}

/* Оптимизация для мобильных устройств */
@media (pointer: coarse) {
  .uk-table-scroll-wrapper::before,
  .uk-table-scroll-wrapper::after {
    font-size: 22px; /* Увеличиваем для сенсорных устройств */
    bottom: 5px;
  }
}

/* Кастомизация скроллбара для WebKit */
.uk-table-scroll-wrapper::-webkit-scrollbar {
  height: 6px;
  background-color: rgba(0, 0, 0, 0.05);
}

.uk-table-scroll-wrapper::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.uk-light .uk-table-scroll-wrapper::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.3);
}

.uk-dark .uk-table-scroll-wrapper::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.3);
}