/**
 * Module 2 - Profile page list tables as stacked cards on mobile.
 *
 * `table.lp-list-table { min-width: 768px }` (learnpress.css) with no scrolling
 * wrapper makes the Orders and Quizzes tabs (and the My Courses "list" layout)
 * push the whole page sideways on a phone. The theme only patched the My
 * Courses progress table.
 *
 * Below 768px every `.lp-list-table` inside the profile becomes a stack of
 * cards: the header row is visually hidden and each body cell shows its column
 * name (added as `data-lp-mux-label` by profile-tables.js) beside its value.
 * `!important` is used freely - this is a narrow, mobile-only override sheet
 * sitting on top of both LearnPress core and the active theme.
 */

@media (max-width: 768px) {

	body.lp-mux-profile .lp-user-profile table.lp-list-table {
		min-width: 0 !important;
		display: block !important;
		overflow: visible !important; /* undo the theme's display:block + overflow-x:auto */
		border: 0 !important;
		font-size: 14px;
	}

	/* Visually hide the header row (kept for assistive tech). */
	body.lp-mux-profile .lp-user-profile table.lp-list-table thead {
		position: absolute !important;
		width: 1px !important;
		height: 1px !important;
		margin: -1px !important;
		padding: 0 !important;
		border: 0 !important;
		overflow: hidden !important;
		clip: rect(0 0 0 0) !important;
		white-space: nowrap !important;
	}

	body.lp-mux-profile .lp-user-profile table.lp-list-table tbody {
		display: block !important;
	}

	body.lp-mux-profile .lp-user-profile table.lp-list-table tbody tr {
		display: block !important;
		margin: 0 0 14px !important;
		padding: 10px 14px !important;
		border: 1px solid var(--lp-border-color, #E2E0DB) !important;
		border-radius: 8px !important;
		background: #fff !important;
	}

	/* Kill the core zebra striping (it colours the <td>, not the <tr>). */
	body.lp-mux-profile .lp-user-profile table.lp-list-table tbody tr td {
		background: transparent !important;
	}

	body.lp-mux-profile .lp-user-profile table.lp-list-table tbody td {
		display: flex !important;
		gap: 12px;
		align-items: baseline;
		justify-content: space-between;
		width: auto !important;
		padding: 6px 0 !important;
		border: 0 !important;
		text-align: right;
	}

	body.lp-mux-profile .lp-user-profile table.lp-list-table tbody td::before {
		content: attr(data-lp-mux-label);
		flex: 0 1 auto;
		margin-right: auto;
		color: #666;
		font-weight: 600;
		text-align: left;
	}

	/* Label-less cells (e.g. the course thumbnail column) - no label, centre. */
	body.lp-mux-profile .lp-user-profile table.lp-list-table tbody td[data-lp-mux-label=""] {
		display: block !important;
		text-align: center;
	}

	body.lp-mux-profile .lp-user-profile table.lp-list-table tbody td[data-lp-mux-label=""]::before {
		content: none;
	}

	body.lp-mux-profile .lp-user-profile table.lp-list-table tbody td img {
		max-width: 120px;
		height: auto;
		border-radius: 6px;
	}

	/* The "Actions" / links cell can hold several links - let them wrap right. */
	body.lp-mux-profile .lp-user-profile table.lp-list-table tbody td.column-order-actions {
		flex-wrap: wrap;
		justify-content: flex-end;
		gap: 6px 12px;
	}

	/* code-gate's "Continue" button cell -> full-width tap target. */
	body.lp-mux-profile .lp-user-profile table.lp-list-table tbody td.lp-cg-continue-col {
		display: block !important;
		text-align: center;
	}

	body.lp-mux-profile .lp-user-profile table.lp-list-table tbody td.lp-cg-continue-col::before {
		content: none;
	}

	body.lp-mux-profile .lp-user-profile table.lp-list-table tbody td.lp-cg-continue-col .lp-button {
		display: block;
		width: 100%;
		margin-top: 4px;
		text-align: center;
	}

	/* Pagination / "showing x-y of z" row - never a card, never a label. */
	body.lp-mux-profile .lp-user-profile table.lp-list-table tfoot,
	body.lp-mux-profile .lp-user-profile table.lp-list-table tbody tr.list-table-nav {
		display: block !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		background: transparent !important;
	}

	body.lp-mux-profile .lp-user-profile table.lp-list-table tfoot tr {
		display: flex !important;
		flex-wrap: wrap;
		gap: 4px 12px;
		align-items: center;
		justify-content: space-between;
		margin: 0 !important;
		padding: 4px 0 !important;
		border: 0 !important;
		background: transparent !important;
	}

	body.lp-mux-profile .lp-user-profile table.lp-list-table tfoot td {
		display: block !important;
		padding: 2px 0 !important;
		border: 0 !important;
		text-align: left;
	}

	body.lp-mux-profile .lp-user-profile table.lp-list-table tfoot td::before {
		content: none !important;
	}
}

/* Nav rows wrap up to 990px - that's the width where LearnPress switches them
   to the scrollbar-less horizontal scroll. (The table-card rules above stay at
   <=768px.) */
@media (max-width: 990px) {

	/* --- navigation rows: wrap, don't hide items in a silent scroll --------- */
	/* LearnPress forces `.lp-profile-nav-tabs` and `.learn-press-filters` to
	   `flex-wrap:nowrap; overflow-x:auto` below 990px AND hides the scrollbar
	   (`::-webkit-scrollbar{display:none}`), so items past the edge are
	   invisible with no cue that they're there. Let them wrap onto as many
	   rows as needed - every item visible, nothing to scroll. */
	body.lp-mux-profile .lp-user-profile .lp-profile-nav-tabs,
	body.lp-mux-profile .lp-user-profile .learn-press-filters,
	body.lp-mux-profile .lp-user-profile .learn-press-tabs .learn-press-filters {
		flex-wrap: wrap !important;
		overflow: visible !important;
		white-space: normal !important;
		scroll-behavior: auto !important;
		gap: 8px;
	}

	body.lp-mux-profile .lp-user-profile .lp-profile-nav-tabs {
		justify-content: flex-start;
		padding: 8px !important;
		border: 0 !important;
	}

	/* The single-row divider borders make no sense once wrapped - give each
	   tab a chip outline instead so wrapped rows stay readable. */
	body.lp-mux-profile .lp-user-profile .lp-profile-nav-tabs > li {
		flex: 0 0 auto !important;
		margin: 0 !important;
		border: 1px solid var(--lp-border-color, #E2E0DB) !important;
		border-radius: 6px !important;
	}

	body.lp-mux-profile .lp-user-profile .lp-profile-nav-tabs > li > a {
		height: auto !important;
		min-height: 40px;
		padding: 8px 14px !important;
		flex-direction: row !important;
		align-items: center;
		gap: 8px !important;
		font-size: 0.9rem !important;
	}

	body.lp-mux-profile .lp-user-profile .lp-profile-nav-tabs > li > a > i {
		position: static !important;
		transform: none !important;
	}

	/* Make the active tab unmistakable even if the theme leaned on the
	   now-hidden underline indicator. */
	body.lp-mux-profile .lp-user-profile .lp-profile-nav-tabs > li.active {
		border-color: var(--lp-primary-color, #ffb606) !important;
		background: var(--lp-primary-color, #ffb606) !important;
	}

	body.lp-mux-profile .lp-user-profile .lp-profile-nav-tabs > li.active > a,
	body.lp-mux-profile .lp-user-profile .lp-profile-nav-tabs > li.active > a > i {
		color: #fff !important;
	}

	/* Dropdown sub-tabs (e.g. Settings): stay in the flow under their parent. */
	body.lp-mux-profile .lp-user-profile .lp-profile-nav-tabs > li.has-child > a::after {
		margin-left: 4px;
	}
}