/* Справочные таблицы в статьях калькуляторов — см. includes/calc-tables.php */

.cl-tbl-block,
.cl-tbl-details { margin: 1.25rem 0 1.75rem; }

.cl-tbl-title {
	font-size: 1rem;
	font-weight: 600;
	color: #1f2937;
	margin: 0 0 .35rem;
}
.cl-tbl-intro {
	font-size: .9375rem;
	color: #4b5563;
	margin: 0 0 .6rem;
	line-height: 1.5;
}
.cl-tbl-note {
	font-size: .8125rem;
	color: #6b7280;
	margin: .5rem 0 0;
	line-height: 1.5;
}

/* Горизонтальный скролл вместо перелома вёрстки на телефоне */
.cl-tbl-wrap {
	overflow-x: auto;
	overflow-y: auto;
	max-width: 100%;
	border: 1px solid #e5e7eb;
	border-radius: .5rem;
	background: #fff;
	-webkit-overflow-scrolling: touch;
}
.cl-tbl-wrap[data-tall] { max-height: 26rem; }

table.cl-tbl {
	border-collapse: collapse;
	width: 100%;
	margin: 0;
	font-size: .875rem;
	line-height: 1.35;
	background: #fff;
}
table.cl-tbl th,
table.cl-tbl td {
	padding: .45rem .7rem;
	border: 0;
	border-bottom: 1px solid #f1f5f9;
	white-space: nowrap;
	font-weight: 400;
	color: #374151;
	vertical-align: middle;
}
table.cl-tbl thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	background: #eff6ff;
	color: #1e40af;
	font-weight: 600;
	font-size: .8125rem;
	border-bottom: 1px solid #bfdbfe;
	white-space: normal;
	min-width: 4.5rem;
}
/* Сортировка кликом по заголовку столбца (calc-tables.js) */
table.cl-tbl thead th.cl-tbl-sortable {
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
}
table.cl-tbl thead th.cl-tbl-sortable:hover { background: #dbeafe; }
table.cl-tbl thead th.cl-tbl-sortable:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: -2px;
}
table.cl-tbl thead th.cl-tbl-sortable::after {
	content: "↕";
	display: inline-block;
	margin-left: .3em;
	font-size: .95em;
	line-height: 1;
	opacity: .35;
}
table.cl-tbl thead th.is-asc,
table.cl-tbl thead th.is-desc { background: #dbeafe; }
table.cl-tbl thead th.is-asc::after  { content: "↑"; opacity: 1; }
table.cl-tbl thead th.is-desc::after { content: "↓"; opacity: 1; }

table.cl-tbl tbody tr:nth-child(even) > * { background: #f9fafb; }
table.cl-tbl tbody tr:hover > *        { background: #eff6ff; }
table.cl-tbl tbody th:first-child      { font-weight: 600; color: #111827; }
table.cl-tbl tbody tr:last-child > *   { border-bottom: 0; }
/* В таблицах с подзаголовками обычные строки не выделяем жирным —
   жирный остается только за подзаголовками */
table.cl-tbl:has(tr.cl-tbl-sub) tbody tr:not(.cl-tbl-sub) > th:first-child {
	font-weight: 400;
}
table.cl-tbl tbody tr.cl-tbl-sub > * {
	background: #dbe3ec;
	font-weight: 700;
	color: #0f172a;
	font-size: .8125rem;
	letter-spacing: .02em;
	padding-top: .55rem;
	padding-bottom: .55rem;
	border-top: 1px solid #b9c5d4;
	border-bottom: 1px solid #b9c5d4;
	white-space: normal;
}
table.cl-tbl tbody tr.cl-tbl-sub:first-child > * { border-top: 0; }
table.cl-tbl tbody tr.cl-tbl-sub:hover > *      { background: #d2dce8; }

/* Спойлер для больших сортаментов */
.cl-tbl-details > summary {
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .5rem .95rem;
	border: 1px solid #bfdbfe;
	border-radius: .5rem;
	background: #eff6ff;
	color: #1d4ed8;
	font-size: .9375rem;
	font-weight: 600;
	list-style: none;
	user-select: none;
}
.cl-tbl-details > summary::-webkit-details-marker { display: none; }
.cl-tbl-details > summary::before {
	content: "";
	width: .5rem;
	height: .5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform .15s ease;
}
.cl-tbl-details[open] > summary::before { transform: rotate(-135deg) translateY(-2px); }
.cl-tbl-details > summary:hover { background: #dbeafe; }
.cl-tbl-details-body { margin-top: .75rem; }

/* Живой поиск по таблице */
.cl-tbl-search {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: 0 0 .5rem;
	flex-wrap: wrap;
}
.cl-tbl-search input {
	flex: 1 1 16rem;
	max-width: 24rem;
	padding: .45rem .7rem;
	border: 1px solid #d1d5db;
	border-radius: .45rem;
	font-size: .875rem;
	background: #fff;
	color: #111827;
}
.cl-tbl-search input:focus {
	outline: none;
	border-color: #2563eb;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
.cl-tbl-found { font-size: .8125rem; color: #6b7280; }

@media (max-width: 640px) {
	table.cl-tbl { font-size: .8125rem; }
	table.cl-tbl th,
	table.cl-tbl td { padding: .4rem .55rem; }
}

/* строка, подсвеченная атрибутом hl (подчинённые SEO-страницы: «Арматура Ø12») */
table.cl-tbl tbody tr.is-hl > *,
table.cl-tbl tbody tr.is-hl:hover > * { background: #fef3c7; font-weight: 700; }