/*
 * Interactive behaviour for the Trauerfall checklist.
 *
 * Scoped to #ab-checkliste (Ablauf, full) and #home-checklist (Startseite,
 * compact) so nothing else on the site is affected. The script tags the parts it
 * needs — .dc-item / .dc-text / .dc-box / .dc-check — so these rules work for
 * both layouts (icon-list rows and icon+text rows) without knowing the markup.
 *
 * Colours mirror the tokens already used by the Elementor build:
 *   #595959 primary-gray · #2B2B2B text · #666666 muted · #E0E0E0 border
 */

/* --- tickable rows -------------------------------------------------------- */

.dc-item {
	cursor: pointer;
	border-radius: 8px;
	transition: background-color .15s ease;
}

.dc-item:hover {
	background-color: rgba(89, 89, 89, .05);
}

.dc-item:focus-visible {
	outline: 2px solid #595959;
	outline-offset: 2px;
}

/* The tick is a path appended into the lucide square SVG itself, so it shares
   the glyph's coordinate system and needs no positioning. */
.dc-check {
	fill: none;
	stroke: #FFFFFF;
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0;
	transition: opacity .15s ease;
}

/* checked: fill the square, reveal the white tick, mute + strike the label */
.dc-item.dc-checked .dc-check {
	opacity: 1;
}

.dc-item.dc-checked .dc-box rect {
	fill: #595959;
}

.dc-item.dc-checked .dc-text,
.dc-item.dc-checked .dc-text p {
	color: #666666;
	text-decoration: line-through;
}

/* --- progress bar --------------------------------------------------------- */

.dc-progress {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 16px;
	width: 100%;
}

/* compact variant: the count lives in the existing subtitle, so the bar is on
   its own and needs no top margin fighting the card's gap */
.dc-progress--bare {
	margin-top: 0;
	margin-bottom: 4px;
}

.dc-progress-track {
	flex: 1 1 auto;
	height: 8px;
	background-color: #E7E5E4;
	border-radius: 9999px;
	overflow: hidden;
}

.dc-progress-fill {
	display: block;
	height: 100%;
	width: 0;
	background-color: #595959;
	border-radius: 9999px;
	transition: width .4s ease;
}

.dc-progress-label {
	flex: 0 0 auto;
	font-size: 14px;
	font-weight: 500;
	color: #595959;
	white-space: nowrap;
}

/* --- per-phase counter ---------------------------------------------------- */

.dc-phase-count {
	font-size: 14px;
	color: #666666;
	white-space: nowrap;
	margin-left: auto;
	padding-left: 16px;
	font-weight: 400;
}

/* Phase title sits in a column container; put the counter on the title line. */
.dc-phase-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
}

@media (max-width: 767px) {
	.dc-progress {
		gap: 12px;
	}
	.dc-progress-label,
	.dc-phase-count {
		font-size: 13px;
	}
}

/* The PDF is generated separately; keep the bar out of browser print. */
@media print {
	.dc-progress {
		display: none;
	}
}