/* --- Контейнер таблицы --- */
.table-container {
	display: block;
	width: 100%;
	margin: 24px auto;
	border: 0.1px solid var(--color-debug);
	overflow: hidden;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.05);
	overscroll-behavior: contain; /* предотвращает «перетягивание» страницы */
}

/* --- Таблица --- */
table {
	width: 100%;
	table-layout: fixed;
	font: var(--font-style) var(--font-size) var(--font-family);
	color: var(--font-color-main);
	border-spacing: 0; /* убираем промежутки между ячейками */
	/*border: 0.1px solid #381cd1; /* рамка по периметру */
}

/* Заголовок таблицы */
#tableTitle,
#tableHead,
#tableFoot {
	font: var(--font-style) var(--font-size) var(--font-family);
	color: var(--font-color-main);
}

#tableTitle {
	font-weight: bold;
}

/* Прокрутка тела таблицы */
thead,
tbody {
	display: block; /* чтобы тело прокручивалось */
	width: 100%;
}

/*

thead tr:first-child th:first-child {
	border-top-left-radius: 12px;
}
thead tr:first-child th:last-child {
	border-top-right-radius: 12px;
}
*/
thead th {
	border-bottom: 0.1px solid #c115a4; /* и линию под заголовком */
	background: var(--table-color-head-background);
	/*font-weight: bold;*/
	color: var(--font-color-main);
}
/* Совпадение ширины колонок */
thead tr,
tbody tr {
	display: table;
	width: 100%;
	table-layout: fixed;
	border-collapse: separate;
}
/* Высота тела и скролл */
tbody {
	max-height: 500px;
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-gutter: stable;
}

/* внутренние линии между строками и колонками */
tbody td {
	border-bottom: 0.1px solid #46e21b7d;
	border-left: 0.1px solid #46e21b7d;
}
/* первая колонка без левой границы */
tbody td:first-child {
	border-left: none;
}
/* нижняя граница последней строки таблицы 
tbody tr:last-child td {
	border-bottom: 1px dashed #c115a4;
}
*/

/* Чередование цветов строк и подсветка при наведении после чередования*/
tbody tr:nth-child(odd) {
	background-color: #ffffff;
}
tbody tr:nth-child(even) {
	background-color: #f0f4fa;
}
tbody tr:hover {
	background-color: #e0ecff;
}

/* Ячейки: одна общая граница, без лишнего дублирования */
th,
td {
	font: var(--font-style) var(--font-size) var(--font-family);
	color: var(--font-color-main);
	border: 0.1px solid var(--table-color-border);
	padding: 1px 8px;
	word-break: break-word;
	max-width: 300px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Последняя колонка и последняя строка */
tr:last-child td {
	border-bottom: none; /* последняя строка без нижней границы */
}
tr td:last-child,
tr th:last-child {
	border-right: none; /* последняя колонка без правой границы */
}

/* --- Table Footer --- */
tfoot {
	display: table-footer-group; /* стандартное поведение */
	width: 100%;
}

tfoot tr {
	display: table;
	width: 100%;
	table-layout: fixed;
	background-color: #f5f5f5; /* можно чуть светлее/темнее, чтобы выделить */
}

tfoot td {
	font: var(--font-style) var(--font-size) var(--font-family);
	color: var(--font-color-main);
	/* border-top: 1px solid var(--table-color-border); линия над футером */
	border: none; /* убираем внутренние границы */
	padding: 1px 8px;
	word-break: break-word;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	/*font-weight: bold; выделяем суммарные значения */
	background-color: inherit; /* наследуем фон от tr */
}

/* Если нужно, чтобы последняя колонка футера была без правой границы - в случае если отрисовываем границы футера
tfoot td:last-child {
	border-right: none;
}*/

tfoot td:first-child {
	width: 25%; /* первая колонка — 25% ширины таблицы */
}

tfoot td:last-child {
	width: 70%; /* вторая колонка — 70% */
}

tfoot tr:first-child {
	border-top: 0.1px solid #c115a4; /* и линию под заголовком */
}
tfoot tr:last-child {
	border-bottom: 0.1px solid #c115a4; /* и линию под заголовком */
	/* скругление нижних углов таблицы */
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;
	overflow: hidden; /* чтобы фон футера не вылезал */
}