/**
 * AHR Course WIP Progress – card and checklist
 * Enqueued only on pages that use [ahr_course_wip]
 */

/* =========================================================
   Wrapper (single shortcode outputs card + checklist)
   ========================================================= */

.ahr-wip {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
	max-width: 100%;
	box-sizing: border-box;
	padding: 0.5rem 0;
	margin-top: -30px;
}

/* Not logged in: shift shortcode block down */
.ahr-wip--guest {
	padding-top: 50px;
}

/* Heading above progress card */
.ahr-wip__heading {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.5rem;
	width: 100%;
	margin: 0 0 0.25rem 20px;
	font-size: 1.25rem;
	font-weight: 600;
	color: #615260;
	line-height: 1.4;
}

.ahr-wip__heading-icon {
	display: block;
	width: 38px;
	height: 38px;
	object-fit: contain;
	flex-shrink: 0;
}

.ahr-wip__heading-text {
	display: inline-block;
	text-decoration: underline;
}

@media (max-width: 480px) {
	.ahr-wip {
		gap: 1.25rem;
		padding: 0.25rem 0;
	}

	.ahr-wip__heading {
		justify-content: center;
		margin-left: 0;
		font-size: 1rem;
	}

	.ahr-wip__heading-icon {
		width: 29px;
		height: 29px;
	}
}

/* =========================================================
   Progress card
   ========================================================= */

.ahr-wip .ahr-wip-card,
.ahr-wip-card {
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	padding: 1.25rem 1.5rem;
	max-width: 100%;
	box-sizing: border-box;
}

.ahr-wip-card__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	margin-bottom: 1rem;
}

.ahr-wip-card__percent {
	font-size: 1.25rem;
	font-weight: 700;
	color: #2ba1e9;
	line-height: 1.2;
}

.ahr-wip-card__status {
	flex: 1;
	min-width: 0;
	font-size: 1rem;
	color: #374151;
	line-height: 1.4;
}

.ahr-wip-card__time {
	font-size: 0.9375rem;
	color: #6b7280;
	line-height: 1.4;
}

.ahr-wip-card__bar-track {
	height: 10px;
	background: #d6eef9;
	border-radius: 999px;
	overflow: hidden;
}

.ahr-wip-card__bar-fill {
	height: 100%;
	background: #2ba1e9;
	border-radius: 999px;
	transition: width 0.3s ease;
}

/* Phone: smaller fonts and tighter spacing */
@media (max-width: 480px) {
	.ahr-wip-card {
		padding: 1rem 1rem;
		border-radius: 16px;
	}

	.ahr-wip-card__row {
		gap: 0.4rem 0.75rem;
		margin-bottom: 0.75rem;
	}

	.ahr-wip-card__percent {
		font-size: 1.0625rem;
	}

	.ahr-wip-card__status,
	.ahr-wip-card__time {
		font-size: 0.8125rem;
		line-height: 1.35;
	}

	.ahr-wip-card__bar-track {
		height: 8px;
	}
}

/* Very small phones */
@media (max-width: 360px) {
	.ahr-wip-card {
		padding: 0.875rem 0.875rem;
	}

	.ahr-wip-card__percent {
		font-size: 1rem;
	}

	.ahr-wip-card__status,
	.ahr-wip-card__time {
		font-size: 0.75rem;
	}

	.ahr-wip-card__bar-track {
		height: 6px;
	}
}

/* =========================================================
   Lesson checklist
   ========================================================= */

/* Outer card stays: clean panel */
.ahr-wip .ahr-wip-checklist,
.ahr-wip-checklist {
	max-width: 100%;
	box-sizing: border-box;
	padding: 1.5rem 1.75rem;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

@media (max-width: 480px) {
	.ahr-wip .ahr-wip-checklist,
	.ahr-wip-checklist {
		padding: 1rem 1rem;
		border-radius: 16px;
	}
}

@media (max-width: 360px) {
	.ahr-wip .ahr-wip-checklist,
	.ahr-wip-checklist {
		padding: 0.875rem 0.75rem;
	}
}

/* Table header row: "Course Outline" | Recorded | Edited – aligned like a proper table */
.ahr-wip-checklist__th--lesson {
	width: 100%;
	padding-right: 1.25rem;
	font-size: 1rem;
	font-weight: 600;
	color: #111827;
	letter-spacing: -0.01em;
}

/* Table: no inner lined box – just content */
.ahr-wip-checklist__table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: none;
	outline: none;
	/* Prevent horizontal scroll from long words on narrow screens */
	overflow-wrap: break-word;
}

.ahr-wip-checklist__table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	font-size: 1rem;
	line-height: 1.5;
	border: none;
	outline: none;
}

.ahr-wip-checklist__th {
	text-align: left;
	font-weight: 600;
	color: #6b7280;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0 0 1rem;
	vertical-align: bottom;
}

/* Lesson column takes all remaining space so titles don’t wrap */
.ahr-wip-checklist__th--sep {
	width: 0;
	padding: 0;
	border: none;
	min-width: 0;
}

/* Thin columns: just enough for one tick/dash */
.ahr-wip-checklist__th--col {
	text-align: center;
	width: 2.5rem;
	min-width: 2.5rem;
	padding: 0 0.35rem 1rem;
	font-size: 0.65rem;
	line-height: 1.2;
	letter-spacing: 0.02em;
}

/* Module heading row */
.ahr-wip-checklist__module-row {
	vertical-align: bottom;
}

.ahr-wip-checklist__module-cell {
	padding: 1.25rem 0 0.35rem;
	font-size: 1rem;
	font-weight: 700;
	color: #111827;
	line-height: 1.3;
	letter-spacing: -0.01em;
	border: none;
	vertical-align: bottom;
}

/* Separator line between modules */
.ahr-wip-checklist__separator-row {
	vertical-align: top;
}

.ahr-wip-checklist__separator-cell {
	height: 0;
	padding: 0;
	border: none;
	border-top: 1px solid #e5e7eb;
	line-height: 0;
	vertical-align: top;
}

.ahr-wip-checklist__cell {
	padding: 0.875rem 0;
	border-bottom: 1px solid #f0f0f0;
	vertical-align: middle;
}

.ahr-wip-checklist__item:last-child .ahr-wip-checklist__cell {
	border-bottom: none;
}

.ahr-wip-checklist__cell--lesson {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	padding-right: 1.25rem;
	min-width: 0; /* Allow flex item to shrink so long titles wrap on phone */
}

/* Spacer – no vertical line so no inner “box” */
.ahr-wip-checklist__cell--sep {
	width: 0;
	min-width: 0;
	padding: 0.875rem 0;
	border: none;
	border-bottom: 1px solid #f0f0f0;
}

.ahr-wip-checklist__item:last-child .ahr-wip-checklist__cell--sep {
	border-bottom: none;
}

/* Thin columns: one icon width + minimal padding, no left border */
.ahr-wip-checklist__cell--tick {
	text-align: center;
	width: 2.5rem;
	min-width: 2.5rem;
	padding: 0.875rem 0.35rem;
	border: none;
	border-bottom: 1px solid #f0f0f0;
}

/* Tick: checkmark (yes) or dash (no) */
.ahr-wip-checklist__tick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25rem;
	height: 1.25rem;
	margin: 0 auto;
}

.ahr-wip-checklist__tick--yes::after {
	content: "";
	width: 0.45rem;
	height: 0.75rem;
	border: solid #10b981;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	margin-bottom: 0.1rem;
}

.ahr-wip-checklist__tick--no::after {
	content: "";
	width: 0.75rem;
	height: 0;
	border-bottom: 2px solid #d1d5db;
}

.ahr-wip-checklist__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	flex-shrink: 0;
}

/* Done: filled green circle with white check (SVG) */
.ahr-wip-checklist__item--done .ahr-wip-checklist__icon::after {
	content: none;
}

.ahr-wip-checklist__item--done .ahr-wip-checklist__icon {
	background-image: url("https://courses.ahrstudios.com/wp-content/uploads/2025/11/check-symbol-4794.svg");
	background-size: 0.9rem 0.9rem;
	background-repeat: no-repeat;
	background-position: center;
}

.ahr-wip-checklist__item--done .ahr-wip-checklist__label {
	color: #6b7280;
	text-decoration: line-through;
}

/* In progress: blue filled circle (overridden below when icon--partial/empty so it always shows) */
.ahr-wip-checklist__item--in_progress .ahr-wip-checklist__icon::after {
	content: "";
	width: 0.625rem;
	height: 0.625rem;
	background: #2ba1e9;
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba(43, 161, 233, 0.5);
	animation: ahr-wip-in-progress-glow 1.5s ease-in-out infinite;
}

/* Ensure in-progress row always shows blue dot, not check or pending ring */
.ahr-wip-checklist__item--in_progress .ahr-wip-checklist__icon {
	background-image: none;
}

.ahr-wip-checklist__item--in_progress .ahr-wip-checklist__label {
	color: #111827;
	font-weight: 500;
}

.ahr-wip-checklist__badge {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 600;
	color: #2ba1e9;
	background: #e1f2fc;
	padding: 0.2rem 0.5rem;
	border-radius: 999px;
}

/* Pending: ring half grey (left), half green (right); ring a bit thicker */
.ahr-wip-checklist__item--pending .ahr-wip-checklist__icon::after {
	content: "";
	width: 0.9rem;
	height: 0.9rem;
	border-radius: 50%;
	box-sizing: border-box;
	background: conic-gradient(#10b981 0deg 180deg, #d1d5db 180deg 360deg);
	mask: radial-gradient(circle, transparent 40%, black 40%);
	-webkit-mask: radial-gradient(circle, transparent 40%, black 40%);
}

.ahr-wip-checklist__item--pending .ahr-wip-checklist__label {
	color: #9ca3af;
}

/* Left icon by recorded+edited (overrides row status icon when set) */
.ahr-wip-checklist__item .ahr-wip-checklist__icon--complete::after {
	content: none;
}

.ahr-wip-checklist__item .ahr-wip-checklist__icon--complete {
	background-image: url("https://courses.ahrstudios.com/wp-content/uploads/2025/11/check-symbol-4794.svg");
	background-size: 0.9rem 0.9rem;
	background-repeat: no-repeat;
	background-position: center;
}

.ahr-wip-checklist__item .ahr-wip-checklist__icon--partial::after {
	content: "";
	width: 0.9rem;
	height: 0.9rem;
	border-radius: 50%;
	box-sizing: border-box;
	background: conic-gradient(#10b981 0deg 180deg, #d1d5db 180deg 360deg);
	mask: radial-gradient(circle, transparent 40%, black 40%);
	-webkit-mask: radial-gradient(circle, transparent 40%, black 40%);
}

.ahr-wip-checklist__item .ahr-wip-checklist__icon--partial {
	background-image: none;
}

.ahr-wip-checklist__item .ahr-wip-checklist__icon--empty::after {
	content: "";
	width: 0.9rem;
	height: 0.9rem;
	border-radius: 50%;
	box-sizing: border-box;
	border: 2px solid #d1d5db;
	background: transparent;
}

.ahr-wip-checklist__item .ahr-wip-checklist__icon--empty {
	background-image: none;
}

/* In progress: override icon--partial/empty so left icon is always blue glowing circle */
.ahr-wip-checklist__item--in_progress .ahr-wip-checklist__icon.ahr-wip-checklist__icon--partial::after,
.ahr-wip-checklist__item--in_progress .ahr-wip-checklist__icon.ahr-wip-checklist__icon--empty::after {
	content: "";
	width: 0.625rem;
	height: 0.625rem;
	background: #2ba1e9;
	border-radius: 50%;
	border: none;
	box-shadow: 0 0 0 0 rgba(43, 161, 233, 0.5);
	mask: none;
	-webkit-mask: none;
	animation: ahr-wip-in-progress-glow 1.5s ease-in-out infinite;
}

@keyframes ahr-wip-in-progress-glow {
	0%, 100% {
		box-shadow: 0 0 0 0 rgba(43, 161, 233, 0.5);
	}
	50% {
		box-shadow: 0 0 0 6px rgba(43, 161, 233, 0);
	}
}

/* Phone: smaller fonts and tighter spacing for whole list */
@media (max-width: 480px) {
	.ahr-wip-checklist__table {
		font-size: 0.875rem;
		line-height: 1.45;
	}

	.ahr-wip-checklist__th {
		font-size: 0.6875rem;
		padding-bottom: 0.75rem;
	}

	.ahr-wip-checklist__th--lesson {
		padding-right: 0.75rem;
	}

	.ahr-wip-checklist__th--col {
		font-size: 0.6rem;
		width: 2.25rem;
		min-width: 2.25rem;
		padding: 0 0.25rem 0.75rem;
	}

	.ahr-wip-checklist__module-cell {
		padding: 1rem 0 0.25rem;
		font-size: 0.875rem;
		line-height: 1.3;
	}

	.ahr-wip-checklist__cell {
		padding: 0.625rem 0;
		font-size: 0.875rem;
	}

	.ahr-wip-checklist__cell--lesson {
		padding-right: 0.75rem;
		gap: 0.4rem 0.5rem;
	}

	.ahr-wip-checklist__cell--sep,
	.ahr-wip-checklist__cell--tick {
		padding-top: 0.625rem;
		padding-bottom: 0.625rem;
	}

	.ahr-wip-checklist__cell--tick {
		width: 2.25rem;
		min-width: 2.25rem;
		padding-left: 0.25rem;
		padding-right: 0.25rem;
	}

	.ahr-wip-checklist__label {
		font-size: inherit;
		word-break: break-word;
	}

	.ahr-wip-checklist__icon {
		width: 1.35rem;
		height: 1.35rem;
		flex-shrink: 0;
	}

	.ahr-wip-checklist__item--done .ahr-wip-checklist__icon {
		background-size: 0.75rem 0.75rem;
	}

	.ahr-wip-checklist__item--in_progress .ahr-wip-checklist__icon::after,
	.ahr-wip-checklist__item--in_progress .ahr-wip-checklist__icon.ahr-wip-checklist__icon--partial::after,
	.ahr-wip-checklist__item--in_progress .ahr-wip-checklist__icon.ahr-wip-checklist__icon--empty::after {
		width: 0.55rem;
		height: 0.55rem;
	}

	.ahr-wip-checklist__item--pending .ahr-wip-checklist__icon::after {
		width: 0.75rem;
		height: 0.75rem;
	}

	.ahr-wip-checklist__badge {
		font-size: 0.6875rem;
		padding: 0.15rem 0.4rem;
	}

	.ahr-wip-checklist__tick {
		width: 1.125rem;
		height: 1.125rem;
	}

	.ahr-wip-checklist__tick--yes::after {
		width: 0.4rem;
		height: 0.65rem;
		border-width: 0 1.5px 1.5px 0;
	}

	.ahr-wip-checklist__tick--no::after {
		width: 0.65rem;
		border-bottom-width: 1.5px;
	}
}

/* Very small phones: even smaller */
@media (max-width: 360px) {
	.ahr-wip-checklist__table {
		font-size: 0.8125rem;
	}

	.ahr-wip-checklist__th {
		font-size: 0.625rem;
		padding-bottom: 0.5rem;
	}

	.ahr-wip-checklist__th--col {
		font-size: 0.5625rem;
		width: 2rem;
		min-width: 2rem;
		padding-bottom: 0.5rem;
	}

	.ahr-wip-checklist__module-cell {
		padding: 0.75rem 0 0.2rem;
		font-size: 0.8125rem;
	}

	.ahr-wip-checklist__cell {
		padding: 0.5rem 0;
		font-size: 0.8125rem;
	}

	.ahr-wip-checklist__cell--lesson {
		padding-right: 0.5rem;
	}

	.ahr-wip-checklist__cell--tick {
		width: 2rem;
		min-width: 2rem;
		padding: 0.5rem 0.2rem;
	}

	.ahr-wip-checklist__badge {
		font-size: 0.625rem;
		padding: 0.125rem 0.35rem;
	}
}