/* ============================================
   СТИЛИ ДЛЯ ТАБЛИЦЫ СОДЕРЖАНИЯ
   ============================================ */

/* Основная таблица содержания */
.work-content table.table-of-contents,
table.table-of-contents {
	width: 100% !important;
	max-width: 100% !important;
	border: none !important;
	border-collapse: collapse !important;
	table-layout: auto !important;
	margin: 20px 0 !important;
	display: table !important;
	background: transparent !important;
}

.work-content table.table-of-contents tr,
table.table-of-contents tr {
	border: none !important;
}

.work-content table.table-of-contents th,
.work-content table.table-of-contents td,
table.table-of-contents th,
table.table-of-contents td {
	padding: 4px 0 !important;
	border: none !important;
	background: transparent !important;
	vertical-align: top !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
}

/* Стили для div внутри ячеек */
.work-content table.table-of-contents td > div,
table.table-of-contents td > div {
	display: flex !important;
	align-items: baseline !important;
	width: 100% !important;
}

/* Скрываем <br /> внутри flex-контейнера, чтобы не ломать раскладку */
.work-content table.table-of-contents td > div br,
table.table-of-contents td > div br {
	display: none !important;
}

/* Ссылки в содержании */
.work-content table.table-of-contents td > div a,
table.table-of-contents td > div a {
	flex-shrink: 1 !important;
	min-width: 0 !important;
	text-decoration: none !important;
	color: #0066cc !important;
	word-wrap: break-word !important;
	word-break: break-word !important;
	overflow-wrap: break-word !important;
	transition: color 0.2s ease;
}

.work-content table.table-of-contents td > div a:hover,
table.table-of-contents td > div a:hover {
	color: #004499 !important;
	text-decoration: underline !important;
}

/* Пунктирная линия между текстом и номером страницы */
.work-content table.table-of-contents td > div span[style*="flex-grow"],
table.table-of-contents td > div span[style*="flex-grow"] {
	flex-grow: 1 !important;
	flex-shrink: 0 !important;
	border-bottom: 1px dotted #999 !important;
	margin: 0 8px !important;
	min-width: 20px !important;
}

/* Номер страницы */
.work-content table.table-of-contents td > div span[style*="flex-shrink"]:last-child,
table.table-of-contents td > div span[style*="flex-shrink"]:last-child {
	flex-shrink: 0 !important;
	white-space: nowrap !important;
	color: #333 !important;
	font-weight: 500;
}

/* ============================================
   МОБИЛЬНАЯ ВЕРСИЯ (до 768px)
   ============================================ */

@media (max-width: 768px) {
	.work-content table.table-of-contents,
	table.table-of-contents {
		width: 100% !important;
		max-width: 100% !important;
		font-size: 11px !important;
		margin: 15px 0 !important;
		border: none !important;
		table-layout: auto !important;
	}

	.work-content table.table-of-contents th,
	.work-content table.table-of-contents td,
	table.table-of-contents th,
	table.table-of-contents td {
		padding: 4px 0 !important;
		font-size: 11px !important;
		line-height: 1.4 !important;
		border: none !important;
	}

	.work-content table.table-of-contents td > div a,
	table.table-of-contents td > div a {
		font-size: 11px !important;
		max-width: 70% !important;
	}

	.work-content table.table-of-contents td > div span[style*="flex-shrink"]:last-child,
	table.table-of-contents td > div span[style*="flex-shrink"]:last-child {
		font-size: 11px !important;
	}
}

/* ============================================
   ОЧЕНЬ МАЛЕНЬКИЕ ЭКРАНЫ (до 400px)
   ============================================ */

@media (max-width: 400px) {
	.work-content table.table-of-contents,
	table.table-of-contents {
		font-size: 10px !important;
	}

	.work-content table.table-of-contents th,
	.work-content table.table-of-contents td,
	table.table-of-contents th,
	table.table-of-contents td {
		padding: 3px 0 !important;
		font-size: 10px !important;
	}

	.work-content table.table-of-contents td > div a,
	table.table-of-contents td > div a {
		font-size: 10px !important;
		max-width: 65% !important;
	}

	.work-content table.table-of-contents td > div span[style*="flex-shrink"]:last-child,
	table.table-of-contents td > div span[style*="flex-shrink"]:last-child {
		font-size: 10px !important;
	}

	/* Уменьшаем отступы для пунктирной линии */
	.work-content table.table-of-contents td > div span[style*="flex-grow"],
	table.table-of-contents td > div span[style*="flex-grow"] {
		margin: 0 5px !important;
		min-width: 20px !important;
	}
}

/* ============================================
   ВРЕМЕННАЯ ОТЛАДКА (удалить после проверки)
   ============================================ */

/* Раскомментируйте для визуальной проверки:

.work-content table.table-of-contents,
table.table-of-contents {
	border: 3px solid red !important;
	background: #ffe0e0 !important;
}

.work-content table.table-of-contents::before,
table.table-of-contents::before {
	content: "✅ ТАБЛИЦА СОДЕРЖАНИЯ" !important;
	display: block !important;
	background: green !important;
	color: white !important;
	padding: 10px !important;
	text-align: center !important;
	font-weight: bold !important;
}

*/