/*
 * Essay Practice — LifterLMS student dashboard restyle (M3 quick win).
 * Text-first, app-native, single-column at ALL widths (uses LifterLMS's own mobile
 * dropdown nav everywhere). Inherits the theme's text/background; deliberately does NOT
 * recolor with the theme accent (kept the stock LifterLMS colors for progress bars etc.).
 * Scoped under .llms-student-dashboard so it never leaks site-wide.
 */

.llms-student-dashboard {
	--eprac-text:  var(--wp--preset--color--contrast, #1f2328);
	--eprac-bg:    var(--wp--preset--color--base, #ffffff);
	--eprac-line:  #e5e7eb;
	--eprac-muted: #6b7280;
	--eprac-hover: #f6f7f8;
	color: var(--eprac-text);
}

/* --- Single, centered column at every width (like the mobile view) --- */
.llms-student-dashboard,
.llms-student-dashboard.llms-sd-layout-columns,
.llms-student-dashboard.llms-sd-layout-stacked {
	display: block !important;
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}
.llms-student-dashboard.llms-sd-layout-columns > * {
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* --- Navigation: always the compact dropdown, never the link list --- */
.llms-student-dashboard .llms-sd-nav {
	margin: 0 0 1.5rem;
}
.llms-student-dashboard .llms-sd-nav .llms-sd-items {
	display: none !important;
}
.llms-student-dashboard .llms-sd-nav select {
	display: block !important;
	width: 100%;
	font: inherit;
	padding: .65rem .8rem;
	border: 1px solid var(--eprac-line);
	border-radius: 10px;
	background: var(--eprac-bg);
	color: var(--eprac-text);
	line-height: 1.3;
}


/* --- Vertical rhythm between the dashboard sections/cards (kept tight) --- */
.llms-student-dashboard .llms-sd-section,
.llms-student-dashboard .llms-sd-widget,
.llms-student-dashboard .llms-widget {
	margin: 0 0 .8rem !important;
}
.llms-student-dashboard h2,
.llms-student-dashboard h3,
.llms-student-dashboard h4,
.llms-student-dashboard h5 {
	line-height: 1.25;
	margin: 0 0 .8rem;
}

/* --- My Courses: clean, tappable list ROWS (no nested card border) --- */
.llms-student-dashboard .llms-loop {
	margin: 0;
}
.llms-student-dashboard .llms-loop-list {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Reset LifterLMS's default course-card styling on the <li> (it caused the original
   double border), and set an even gap between cards. !important because LifterLMS's own
   rule matches with equal specificity. */
.llms-student-dashboard .llms-loop-item {
	width: 100% !important;
	max-width: none !important;
	float: none !important;
	margin: 0 0 .6rem !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	list-style: none;
}
.llms-student-dashboard .llms-loop-item:last-child {
	margin-bottom: 0 !important;
}
/* ONE clean card per course (a single border of ours -> no misaligned double border). */
.llms-student-dashboard .llms-loop-item-content {
	position: relative;
	border: 1px solid var(--eprac-line) !important;
	border-radius: 10px !important;
	box-shadow: none !important;
	background: var(--eprac-bg);
	padding: .9rem 2.4rem .9rem 1.1rem; /* right room for the chevron */
	transition: background-color .12s ease, border-color .12s ease;
}
.llms-student-dashboard .llms-loop-item-content:hover {
	background: var(--eprac-hover);
	border-color: #d5d8dc !important;
}
/* Chevron: signals the row opens the next lesson (native list feel). */
.llms-student-dashboard .llms-loop-item-content::after {
	content: "\203A"; /* › */
	position: absolute;
	right: .5rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--eprac-muted);
	font-size: 1.5rem;
	line-height: 1;
}
/* Stack the row and push the progress bar to the BOTTOM (it renders first by default). */
.llms-student-dashboard .llms-loop-link {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: var(--eprac-text);
}
/* Title, meta and progress bar must share the row's left edge. The progress bar
   otherwise keeps LifterLMS's full-bleed horizontal margins and sits left of the text. */
.llms-student-dashboard .llms-loop-link > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	max-width: 100%;
}
.llms-student-dashboard .llms-loop-title {
	order: -1;
	margin: 0 0 .3rem;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.3;
}
.llms-student-dashboard .llms-loop-item .llms-progress {
	order: 5;
	width: auto !important; /* fill the row's content width, not LifterLMS's full-bleed width */
	margin: .45rem 0 0 !important;
}
.llms-student-dashboard .llms-loop-item .llms-progress-bar {
	height: 6px;
	border-radius: 999px;
}
.llms-student-dashboard .llms-loop-item .progress__indicator {
	font-size: .75rem;
	margin-bottom: .15rem;
}
/* Text-first: hide the course thumbnail on the dashboard listing. */
.llms-student-dashboard .llms-loop-item-content .llms-featured-image,
.llms-student-dashboard .llms-loop-item-content figure,
.llms-student-dashboard .llms-loop-item-content img {
	display: none !important;
}
/* Muted, comfortably-spaced meta lines (Status / Enrolled date / etc.). */
.llms-student-dashboard .llms-loop-item-content p,
.llms-student-dashboard .llms-loop-item-content .llms-meta,
.llms-student-dashboard .llms-loop-item-footer {
	margin: .12rem 0;
	color: var(--eprac-muted);
	font-size: .85rem;
	line-height: 1.6;
}

/* --- My Grades table --- */
.llms-student-dashboard .llms-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1rem;
}
.llms-student-dashboard .llms-table th,
.llms-student-dashboard .llms-table td {
	padding: .65rem .75rem;
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid var(--eprac-line);
}
.llms-student-dashboard .llms-table thead th {
	font-weight: 600;
	border-bottom-width: 2px;
}

/* --- My Grades (single course): stack the stat widgets one per row --- */
/* LifterLMS lays .llms-sd-widgets out as a row of boxes; one-per-row reads far better,
   especially on mobile. Keeps LifterLMS's own box/header styling. */
.llms-student-dashboard .llms-sd-widgets {
	display: block !important;
	margin: 0 0 .6rem !important; /* same gap before the grades table as between the boxes */
}
.llms-student-dashboard .llms-sd-widgets .llms-sd-widget {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 0 .6rem !important;
	box-sizing: border-box;
}
.llms-student-dashboard .llms-sd-widgets .llms-sd-widget:last-child {
	margin-bottom: 0 !important;
}

/* --- Buttons: gentle rounding, otherwise inherit the theme/LifterLMS style --- */
.llms-student-dashboard .llms-button-action,
.llms-student-dashboard .llms-button-secondary,
.llms-student-dashboard .button {
	border-radius: 8px;
}

/* --- Small screens: stack the grades table into readable rows --- */
@media (max-width: 600px) {
	/* Stack the course-list grades table into readable rows. The single-course grades
	   table (:not) has a different structure, so leave it to LifterLMS. */
	.llms-student-dashboard .llms-table:not(.llms-single-course-grades) thead {
		display: none;
	}
	.llms-student-dashboard .llms-table:not(.llms-single-course-grades) td {
		display: block;
		border-bottom: none;
		padding: .2rem .25rem;
	}
	.llms-student-dashboard .llms-table:not(.llms-single-course-grades) tbody tr {
		display: block;
		border-bottom: 1px solid var(--eprac-line);
		padding: .6rem 0;
	}
}