/* ==========================================================================
   Ignited Academy — Student Dashboard Widgets (dash.css)
   --------------------------------------------------------------------------
   Styles the INNER content of the dashboard cards rendered by:
     render_dashboard_courses, render_dashboard_pending_lessons,
     render_dashboard_quiz_scores, render_dashboard_deadlines,
     render_dashboard_webinars, render_dashboard_certificates,
     render_dashboard_badges, render_dashboard_maya_entry, render_daily_tip.

   Every selector is scoped under .ign-academy. These widgets sit inside the
   .iga-app shell (already styled in auth.css) — that shell is NOT touched
   here. Base .ign-card / .ign-btn / .ign-progress come from academy.css; we
   layer dashboard-specific structure on top, with var() fallbacks so the file
   degrades gracefully regardless of stylesheet load order.

   Brand tokens (with fallbacks):
     accent   var(--ign-accent,#FF4D1A)
     accent-2 var(--ign-accent-2,#ff6a40)
     ink/bg   var(--ign-bg,#0A0A0B)
     surface  var(--ign-surface,#131316)
     surf-2   #17171b
     line     var(--ign-line,#242428)
     text     var(--ign-text,#FAFAF7)
     soft     rgba(250,250,247,.72)
     muted    var(--ign-muted,#8a8a85)
   ========================================================================== */

/* ==========================================================================
   1. DASHBOARD SHELL — wrapper, hero head, grid
   ========================================================================== */

.ign-academy.ign-dashboard {
	color: var(--ign-text, #FAFAF7);
}

/* When embedded inside the app-shell main area, hide the widget's own hero. */
.ign-academy.ign-dashboard--embed .ign-dashboard__head {
	display: none;
}

/* Standalone (chrome=1) hero head. The dashboard is a full-page view here,
   so the top section must clear the theme's fixed ~64px header. */
.ign-academy .ign-dashboard__head {
	padding: 100px 24px 28px;
	border-bottom: 1px solid var(--ign-line, #242428);
	background:
		radial-gradient(1100px 360px at 12% -40%, rgba(255, 77, 26, .14), transparent 60%),
		var(--ign-bg, #0A0A0B);
}

.ign-academy .ign-dashboard__head-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.ign-academy .ign-dashboard__welcome {
	display: block;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ign-accent-2, #ff6a40);
	margin-bottom: 4px;
}

.ign-academy .ign-dashboard__name {
	margin: 0;
	font-size: clamp(1.7rem, 3.4vw, 2.4rem);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.1;
}

/* Grid: main column + side rail. Collapses to one column on tablet. */
.ign-academy .ign-dashboard__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
	gap: 22px;
	align-items: start;
	max-width: 1200px;
	margin: 0 auto;
}

/* When standalone (with a hero), pad the grid in from the page edges. */
.ign-academy .ign-dashboard:not(.ign-dashboard--embed) .ign-dashboard__grid,
.ign-academy.ign-dashboard:not(.ign-dashboard--embed) .ign-dashboard__grid {
	padding: 28px 24px 64px;
}

.ign-academy .ign-dashboard__main,
.ign-academy .ign-dashboard__side {
	display: grid;
	gap: 22px;
	min-width: 0;
	align-content: start;
}

/* ==========================================================================
   2. CARD CHROME — shared title + empty state for all dash widgets
   ========================================================================== */

/* Reinforce the base card look so widgets read as raised dark panels even if
   academy.css hasn't loaded. */
.ign-academy .ign-card.ign-dash-courses,
.ign-academy .ign-card.ign-dash-pending,
.ign-academy .ign-card.ign-dash-quizzes,
.ign-academy .ign-card.ign-dash-deadlines,
.ign-academy .ign-card.ign-dash-webinars,
.ign-academy .ign-card.ign-dash-certs,
.ign-academy .ign-card.ign-dash-badges,
.ign-academy .ign-card.ign-dash-maya {
	position: relative;
	padding: 20px;
	border: 1px solid var(--ign-line, #242428);
	border-radius: var(--ign-radius, 16px);
	background: var(--ign-surface, #131316);
	box-shadow: var(--ign-shadow, 0 1px 2px rgba(0, 0, 0, .4));
}

.ign-academy .ign-card__title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--ign-text, #FAFAF7);
}

/* Accent tick before each card title for a scannable, branded rhythm. */
.ign-academy .ign-card__title::before {
	content: "";
	flex: none;
	width: 4px;
	height: 18px;
	border-radius: 999px;
	background: linear-gradient(180deg, var(--ign-accent, #FF4D1A), var(--ign-accent-2, #ff6a40));
}

/* Empty states — calm, centered, muted. */
.ign-academy .ign-empty {
	margin: 0 0 14px;
	padding: 18px;
	text-align: center;
	font-size: .9375rem;
	color: rgba(250, 250, 247, .72);
	background: var(--ign-surface-2, #17171b);
	border: 1px dashed var(--ign-line, #242428);
	border-radius: var(--ign-radius-sm, 12px);
}

.ign-academy .ign-empty + .ign-btn {
	display: inline-flex;
}

/* ==========================================================================
   3. MY COURSES — render_dashboard_courses
   .ign-dash-courses / .ign-grid--dash / .ign-dash-course
   ========================================================================== */

.ign-academy .ign-grid.ign-grid--dash {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 16px;
}

.ign-academy .ign-dash-course {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--ign-line, #242428);
	border-radius: var(--ign-radius-sm, 12px);
	background: var(--ign-surface-2, #17171b);
	transition:
		border-color var(--ign-ease, 160ms cubic-bezier(.2, .6, .2, 1)),
		transform var(--ign-ease, 160ms cubic-bezier(.2, .6, .2, 1)),
		box-shadow var(--ign-ease, 160ms cubic-bezier(.2, .6, .2, 1));
}

.ign-academy .ign-dash-course:hover {
	border-color: var(--ign-accent-line, rgba(255, 77, 26, .42));
	transform: translateY(-3px);
	box-shadow: var(--ign-shadow-md, 0 10px 30px rgba(0, 0, 0, .45));
}

/* Thumbnail — fixed 16:9 well; image covers, graceful fallback when empty. */
.ign-academy .ign-dash-course__thumb {
	display: block;
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background:
		linear-gradient(135deg, rgba(255, 77, 26, .18), rgba(255, 106, 64, .06)),
		var(--ign-surface-3, #202024);
}

.ign-academy .ign-dash-course__img,
.ign-academy .ign-dash-course__thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms ease;
}

.ign-academy .ign-dash-course:hover .ign-dash-course__img,
.ign-academy .ign-dash-course:hover .ign-dash-course__thumb img {
	transform: scale(1.05);
}

.ign-academy .ign-dash-course__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 14px;
}

.ign-academy .ign-dash-course__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -.01em;
}

.ign-academy .ign-dash-course__title a {
	color: var(--ign-text, #FAFAF7);
}

.ign-academy .ign-dash-course__title a:hover {
	color: var(--ign-accent-2, #ff6a40);
}

/* Pending / non-active enrollment tag. */
.ign-academy .ign-dash-course .ign-tag {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .02em;
	border-radius: 999px;
}

.ign-academy .ign-dash-course .ign-tag--pending {
	color: var(--ign-warning, #FBBF24);
	background: var(--ign-warning-soft, rgba(251, 191, 36, .14));
	border: 1px solid rgba(251, 191, 36, .35);
}

/* Progress within a course card. (.ign-progress base from academy.css.) */
.ign-academy .ign-dash-course .ign-progress {
	width: 100%;
	height: 8px;
	background: var(--ign-surface-3, #202024);
	border-radius: 999px;
	overflow: hidden;
}

.ign-academy .ign-dash-course .ign-progress__bar {
	display: block;
	height: 100%;
	min-width: 6px;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--ign-accent, #FF4D1A), var(--ign-accent-2, #ff6a40));
	transition: width 500ms cubic-bezier(.2, .6, .2, 1);
}

.ign-academy .ign-dash-course__pct {
	font-size: .8125rem;
	font-weight: 600;
	color: rgba(250, 250, 247, .72);
}

/* Push the action button to the bottom so cards line up evenly. */
.ign-academy .ign-dash-course__body .ign-btn {
	margin-top: auto;
	width: 100%;
}

/* ==========================================================================
   4. SHARED LIST PRIMITIVE — pending / score / deadline / webinar / cert
   Each uses its own classes, so we group their common row layout here, then
   add per-widget specifics below.
   ========================================================================== */

.ign-academy .ign-pending-list,
.ign-academy .ign-score-list,
.ign-academy .ign-deadline-list,
.ign-academy .ign-webinar-list,
.ign-academy .ign-cert-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

/* ==========================================================================
   5. PICK UP WHERE YOU LEFT OFF — render_dashboard_pending_lessons
   .ign-dash-pending / .ign-pending-list / .ign-pending-list__item
   ========================================================================== */

.ign-academy .ign-pending-list__item {
	border: 1px solid var(--ign-line, #242428);
	border-radius: var(--ign-radius-sm, 12px);
	background: var(--ign-surface-2, #17171b);
	transition:
		border-color var(--ign-ease, 160ms cubic-bezier(.2, .6, .2, 1)),
		background-color var(--ign-ease, 160ms cubic-bezier(.2, .6, .2, 1));
}

.ign-academy .ign-pending-list__item:hover {
	border-color: var(--ign-accent-line, rgba(255, 77, 26, .42));
	background: var(--ign-surface-3, #202024);
}

.ign-academy .ign-pending-list__item > a {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 12px 40px 12px 14px;
	position: relative;
	color: inherit;
}

.ign-academy .ign-pending-list__item > a:hover {
	color: inherit;
}

/* Resume chevron. */
.ign-academy .ign-pending-list__item > a::after {
	content: "›";
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.4rem;
	line-height: 1;
	color: var(--ign-accent, #FF4D1A);
	transition: transform var(--ign-ease, 160ms cubic-bezier(.2, .6, .2, 1));
}

.ign-academy .ign-pending-list__item:hover > a::after {
	transform: translate(3px, -50%);
}

.ign-academy .ign-pending-list__lesson {
	font-size: .9375rem;
	font-weight: 700;
	color: var(--ign-text, #FAFAF7);
	line-height: 1.3;
}

.ign-academy .ign-pending-list__course {
	font-size: .8125rem;
	color: var(--ign-muted, #8a8a85);
}

/* ==========================================================================
   6. QUIZ SCORES — render_dashboard_quiz_scores
   .ign-dash-quizzes / .ign-score-list / .ign-score-list__item
   ========================================================================== */

.ign-academy .ign-score-list__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	border-radius: var(--ign-radius-sm, 12px);
	background: var(--ign-surface-2, #17171b);
	border: 1px solid var(--ign-line, #242428);
}

.ign-academy .ign-score-list__name {
	min-width: 0;
	font-size: .9375rem;
	font-weight: 600;
	color: var(--ign-text, #FAFAF7);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Score chip — pass/fail color coded. */
.ign-academy .ign-score-list__score {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 12px;
	font-size: .875rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	border-radius: 999px;
	border: 1px solid transparent;
}

.ign-academy .ign-score-list__score.is-pass {
	color: var(--ign-success, #34D399);
	background: var(--ign-success-soft, rgba(52, 211, 153, .14));
	border-color: rgba(52, 211, 153, .35);
}

.ign-academy .ign-score-list__score.is-pass::before {
	content: "✓";
	font-size: .85em;
}

.ign-academy .ign-score-list__score.is-fail {
	color: var(--ign-danger, #F87171);
	background: var(--ign-danger-soft, rgba(248, 113, 113, .14));
	border-color: rgba(248, 113, 113, .35);
}

/* ==========================================================================
   7. UPCOMING DEADLINES — render_dashboard_deadlines
   .ign-dash-deadlines / .ign-deadline-list / .ign-deadline-list__item
   ========================================================================== */

.ign-academy .ign-deadline-list__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 12px 11px 14px;
	border-radius: var(--ign-radius-sm, 12px);
	background: var(--ign-surface-2, #17171b);
	border: 1px solid var(--ign-line, #242428);
	border-left: 3px solid var(--ign-accent, #FF4D1A);
}

.ign-academy .ign-deadline-list__title {
	min-width: 0;
	font-size: .9375rem;
	font-weight: 600;
	color: var(--ign-text, #FAFAF7);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ign-academy .ign-deadline-list__date {
	flex: none;
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	font-size: .75rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--ign-warning, #FBBF24);
	background: var(--ign-warning-soft, rgba(251, 191, 36, .14));
	border-radius: 999px;
}

/* ==========================================================================
   8. UPCOMING WEBINARS — render_dashboard_webinars
   .ign-dash-webinars / .ign-webinar-list / .ign-webinar-list__item
   ========================================================================== */

.ign-academy .ign-webinar-list__item {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	column-gap: 12px;
	row-gap: 4px;
	padding: 12px 14px;
	border-radius: var(--ign-radius-sm, 12px);
	background: var(--ign-surface-2, #17171b);
	border: 1px solid var(--ign-line, #242428);
}

.ign-academy .ign-webinar-list__title {
	grid-column: 1;
	font-size: .9375rem;
	font-weight: 700;
	color: var(--ign-text, #FAFAF7);
	line-height: 1.3;
}

.ign-academy .ign-webinar-list__date {
	grid-column: 1;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .8125rem;
	font-variant-numeric: tabular-nums;
	color: var(--ign-muted, #8a8a85);
}

.ign-academy .ign-webinar-list__date::before {
	content: "🗓";
	font-size: .9em;
	opacity: .85;
}

/* Join button spans both rows on the right. */
.ign-academy .ign-webinar-list__item .ign-btn {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
}

/* ==========================================================================
   9. MY CERTIFICATES — render_dashboard_certificates
   .ign-dash-certs / .ign-cert-list / .ign-cert-list__item
   ========================================================================== */

.ign-academy .ign-cert-list__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 11px 12px 11px 14px;
	border-radius: var(--ign-radius-sm, 12px);
	background:
		linear-gradient(135deg, rgba(255, 77, 26, .07), transparent 70%),
		var(--ign-surface-2, #17171b);
	border: 1px solid var(--ign-line, #242428);
}

.ign-academy .ign-cert-list__course {
	min-width: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: .9375rem;
	font-weight: 600;
	color: var(--ign-text, #FAFAF7);
	overflow: hidden;
}

/* Award medal glyph before each earned certificate. */
.ign-academy .ign-cert-list__course::before {
	content: "🎖";
	flex: none;
	font-size: 1.05em;
}

/* ==========================================================================
   10. BADGES EARNED — render_dashboard_badges
   .ign-dash-badges / .ign-badge-grid / .ign-badge
   ========================================================================== */

.ign-academy .ign-badge-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
	gap: 12px;
}

.ign-academy .ign-badge-grid .ign-badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	padding: 14px 8px;
	text-align: center;
	border-radius: var(--ign-radius-sm, 12px);
	background: var(--ign-surface-2, #17171b);
	border: 1px solid var(--ign-line, #242428);
	transition:
		transform var(--ign-ease, 160ms cubic-bezier(.2, .6, .2, 1)),
		border-color var(--ign-ease, 160ms cubic-bezier(.2, .6, .2, 1));
}

.ign-academy .ign-badge-grid .ign-badge:hover {
	transform: translateY(-3px);
	border-color: var(--ign-accent-line, rgba(255, 77, 26, .42));
}

.ign-academy .ign-badge__icon {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	font-size: 1.5rem;
	line-height: 1;
	border-radius: 50%;
	background:
		radial-gradient(circle at 30% 25%, rgba(255, 106, 64, .3), transparent 65%),
		var(--ign-surface-3, #202024);
	border: 1px solid var(--ign-accent-line, rgba(255, 77, 26, .42));
}

.ign-academy .ign-badge__label {
	font-size: .75rem;
	font-weight: 600;
	line-height: 1.25;
	color: rgba(250, 250, 247, .72);
}

/* ==========================================================================
   11. ASK MAYA ENTRY — render_dashboard_maya_entry
   .ign-dash-maya / .ign-dash-maya__sub / .ign-maya-action
   ========================================================================== */

.ign-academy .ign-card.ign-dash-maya {
	background:
		radial-gradient(420px 200px at 100% 0%, rgba(255, 77, 26, .16), transparent 60%),
		var(--ign-surface, #131316);
	border-color: var(--ign-accent-line, rgba(255, 77, 26, .42));
}

.ign-academy .ign-dash-maya__sub {
	margin: 0 0 16px;
	font-size: .9375rem;
	line-height: 1.55;
	color: rgba(250, 250, 247, .72);
}

/* Action region / button. (.ign-maya-action wraps the CTA when present.) */
.ign-academy .ign-maya-action {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ign-academy .ign-dash-maya .ign-btn,
.ign-academy .ign-maya-action .ign-btn {
	width: 100%;
}

/* ==========================================================================
   12. DAILY TIP — render_daily_tip
   .ign-daily-tip / .ign-daily-tip__label / .ign-daily-tip__text
   ========================================================================== */

.ign-academy .ign-daily-tip {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-width: 380px;
	padding: 14px 18px;
	border-radius: var(--ign-radius, 16px);
	background: var(--ign-surface, #131316);
	border: 1px solid var(--ign-line, #242428);
	box-shadow: var(--ign-shadow, 0 1px 2px rgba(0, 0, 0, .4));
}

.ign-academy .ign-daily-tip__label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .6875rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ign-accent-2, #ff6a40);
}

.ign-academy .ign-daily-tip__label::before {
	content: "💡";
	font-size: 1.1em;
}

.ign-academy .ign-daily-tip__text {
	font-size: .9375rem;
	line-height: 1.5;
	color: var(--ign-text, #FAFAF7);
}

/* ==========================================================================
   13. RESPONSIVE
   ========================================================================== */

/* Tablet — collapse the two-column grid into a single stacked column. */
@media (max-width: 920px) {
	.ign-academy .ign-dashboard__grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.ign-academy .ign-dashboard:not(.ign-dashboard--embed) .ign-dashboard__grid,
	.ign-academy.ign-dashboard:not(.ign-dashboard--embed) .ign-dashboard__grid {
		padding: 22px 18px 56px;
	}

	.ign-academy .ign-dashboard__head {
		padding: 96px 18px 24px;
	}

	.ign-academy .ign-daily-tip {
		max-width: none;
		width: 100%;
	}
}

/* Phone — tighten cards, let course tiles go full width, stack lists. */
@media (max-width: 600px) {
	.ign-academy .ign-card.ign-dash-courses,
	.ign-academy .ign-card.ign-dash-pending,
	.ign-academy .ign-card.ign-dash-quizzes,
	.ign-academy .ign-card.ign-dash-deadlines,
	.ign-academy .ign-card.ign-dash-webinars,
	.ign-academy .ign-card.ign-dash-certs,
	.ign-academy .ign-card.ign-dash-badges,
	.ign-academy .ign-card.ign-dash-maya {
		padding: 16px;
	}

	.ign-academy .ign-grid.ign-grid--dash {
		grid-template-columns: 1fr;
	}

	.ign-academy .ign-dashboard__head {
		padding: 92px 16px 22px;
	}

	.ign-academy .ign-dashboard__head-inner {
		flex-direction: column;
		align-items: flex-start;
	}

	/* Score / deadline rows: keep label + chip on one line but allow wrap. */
	.ign-academy .ign-score-list__item,
	.ign-academy .ign-deadline-list__item {
		flex-wrap: wrap;
	}

	.ign-academy .ign-badge-grid {
		grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
	}
}

/* ==========================================================================
   14. FOCUS / MOTION — accessible states
   ========================================================================== */

.ign-academy .ign-pending-list__item > a:focus-visible,
.ign-academy .ign-dash-course__thumb:focus-visible,
.ign-academy .ign-dash-course__title a:focus-visible,
.ign-academy .ign-cert-list__item .ign-btn:focus-visible,
.ign-academy .ign-webinar-list__item .ign-btn:focus-visible,
.ign-academy .ign-badge-grid .ign-badge:focus-visible {
	outline: none;
	box-shadow: var(--ign-ring, 0 0 0 3px rgba(255, 77, 26, .14), 0 0 0 1px #FF4D1A);
	border-radius: var(--ign-radius-sm, 12px);
}

@media (prefers-reduced-motion: reduce) {
	.ign-academy .ign-dash-course,
	.ign-academy .ign-dash-course__img,
	.ign-academy .ign-dash-course__thumb img,
	.ign-academy .ign-pending-list__item,
	.ign-academy .ign-pending-list__item > a::after,
	.ign-academy .ign-badge-grid .ign-badge,
	.ign-academy .ign-progress__bar,
	.ign-academy .ign-dash-course .ign-progress__bar {
		transition: none;
	}
}