/* ======================================================= */
/* БАЗОВЫЕ СТИЛИ КОНТЕЙНЕРА И ЯЧЕЕК (Оставляем как есть)  */
/* ======================================================= */
.bg-table-container {
    overflow: auto; 
    -webkit-overflow-scrolling: touch;
    position: relative;
}

.bg-table-container table th,
.bg-table-container table td {
    padding: 1px 2px;
    background-color: #fff;
    border:0;
    border-bottom: 1px solid #ccc; 
}


/* ======================================================= */
/* ОБЩАЯ ФИКСАЦИЯ ПЕРВОГО СТОЛБЦА (left: 0)               */
/* ======================================================= */
.bg-table-container table th:first-child,
.bg-table-container table td:first-child {
    position: sticky;
    left: 0;
    z-index: 10; /* Базовый Z-index для всего первого столбца */
    background-color: #f9f9f9;
}


/* ======================================================= */
/* СЦЕНАРИЙ 1: ТАБЛИЦА С ЗАГОЛОВКОМ (<thead>)             */
/* ======================================================= */

/* Фиксация всего ЗАГОЛОВКА (top: 0) */
.bg-table-container table thead th {
    position: sticky;
    top: 0;
    z-index: 12; /* Выше чем z-index 10 столбца, чтобы перекрыть его при скролле */
    background-color: #eee;
}

/* УГЛОВАЯ ЯЧЕЙКА В ТАБЛИЦЕ С THEAD (ЛЕВЫЙ ВЕРХНИЙ УГОЛ) */
.bg-table-container table thead tr:first-child th:first-child {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 15; /* Самый высокий Z-index, всегда поверх всего */
    background-color: #eee;
}


/* ======================================================= */
/* СЦЕНАРИЙ 2: ТАБЛИЦА БЕЗ ЗАГОЛОВКА (БЕЗ <thead>)        */
/* ======================================================= */

/* 
  Фиксация ПЕРВОЙ СТРОКИ в таблице БЕЗ thead 
  Селектор: table:not(:has(thead)) выбирает только "простые" таблицы
*/
.bg-table-container table:not(:has(thead)) tr:first-child td {
    position: sticky;
    top: 0;
    z-index: 12; /* Фиксируем как заголовок, z-index как у thead */
    background-color: #eee; /* Используем цвет заголовка */
}

/* 
  УГЛОВАЯ ЯЧЕЙКА В ТАБЛИЦЕ БЕЗ THEAD (ЛЕВЫЙ ВЕРХНИЙ УГОЛ)
*/
.bg-table-container table:not(:has(thead)) tr:first-child td:first-child {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 15; /* Самый высокий Z-index, всегда поверх всего */
    background-color: #f9f9f9; /* Цвет первого столбца */
}

/*
  Внутрення тень справа таблицы
*/

.has-shadow {
  /* Создает плавный переход справа (от 100% ширины до края) */
    -webkit-mask-image: linear-gradient(to right, black 0%, black calc(100% - 30px), transparent 100%);
    mask-image: linear-gradient(to right, black 0%, black calc(100% - 30px), transparent 100%);
    
    /* Добавляем тень к самой таблице */
    box-shadow: inset -10px 0 10px -10px rgba(0, 0, 0, 0.4);  */

}

/* Скрываем только ВЕРТИКАЛЬНУЮ полосу прокрутки для Webkit (Chrome, Safari, Opera) */
.bg-table-container::-webkit-scrollbar:vertical {
    display: none;
}

/* 
* Внутренняя тень  на первом столбце появляется, когда JS добавляет класс 
* при начале скроллинга влево 
*/
.is-scrolled table th:first-child,
.is-scrolled table td:first-child {
    /* Тень справа от фиксированного столбца: смещение по X 5px, размытие 5px */
    /*box-shadow: 5px 0 5px -2px rgba(0, 0, 0, 0.2);  */
       box-shadow: inset -5px 0 10px -10px rgba(0, 0, 0, 0.4);
}




/* Общие стили для ячеек */

.bg-table-container table {
  border:0;

}

.bg-table-container tr{
  border-bottom: 1px solid #ddd; 
 }
.bg-table-container table th,
.bg-table-container table td {
    padding: 1px 2px; 
   /* border: 1px solid #ccc; */
    background-color: #fff; /* Фон нужен, чтобы скрыть содержимое под прилипшей ячейкой */
    border:0;
    border-bottom: 1px solid #ccc; 
}

.bg-table-container table th {
    text-align: left;
    border-top: 1px solid #ddd;
}

/*  Уменьшаем шрифты и  ограничиваем контейнер по высоте на мобильных  устройствах */
@media screen and (max-width: 520px) {
  .bg-table-container {
   font-size: 15px !important;
   max-height: 600px;
   line-height: 18px !important; 
   border-top: 1px solid red;
   border-bottom: 1px solid red;

 }
}