/* 1. Главный контейнер для прокрутки */
.table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Плавный скролл на iOS */
    margin-bottom: 25px;
    border: 1px solid #ccc; /* Возвращаем общую рамку вокруг таблицы */
    border-radius: 4px; /* Легкое скругление углов (по желанию) */
    
    /* Делаем подсказку: легкий градиент справа показывает, что там есть скрытый контент */
    background: linear-gradient(to right, white 30%, rgba(255,255,255,0)), 
                linear-gradient(to right, rgba(255,255,255,0), white 70%) 0 100%, 
                radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.2), rgba(0,0,0,0)), 
                radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
}

/* 2. Сама таблица */
.responsive-table {
    width: 100%;
    border-collapse: collapse;
    font-family: sans-serif;
    font-size: 14px;
    min-width: 700px; /* Фиксируем минимальную ширину, чтобы колонки не сжимались */
}

/* 3. Очищаем внешние рамки, так как теперь за них отвечает контейнер */
.responsive-table th, 
.responsive-table td {
    padding: 12px 10px;
    text-align: left;
    border-bottom: 1px solid #eee; /* Внутренние горизонтальные линии */
    border-right: 1px solid #eee;  /* Внутренние вертикальные линии */
}

.responsive-table tr:last-child td {
    border-bottom: none; /* Убираем дублирование нижней линии */
}

.responsive-table th:last-child,
.responsive-table td:last-child {
    border-right: none; /* Убираем крайнюю правую линию */
}

.responsive-table th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #333;
}

/* 4. Магия: принудительно показываем скроллбар (ползунок) на мобильных устройствах */
.table-container::-webkit-scrollbar {
    height: 6px; /* Высота горизонтального ползунка */
}

.table-container::-webkit-scrollbar-track {
    background: #f1f1f1; /* Цвет дорожки, по которой бегает ползунок */
    border-radius: 3px;
}

.table-container::-webkit-scrollbar-thumb {
    background: #c1c1c1; /* Цвет самого ползунка */
    border-radius: 3px;
}

.table-container::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8; /* Цвет ползунка при наведении */
}