/**
 * Learnomy Pro — User Journey (dashboard tab + admin views)
 *
 * Token namespace: .lrn-journey-*
 * Admin admin namespace: .lrn-journey-admin-* / .lrn-journey-card
 *
 * Design rules:
 *   - All values via --lrn-* tokens. No hardcoded hex, px, or font-family.
 *   - No :root additions. Local tokens scoped to the nearest container.
 *   - Dark mode handled via .lrn-dark token reassignments in learnomy.css.
 *     Token-only approach means these styles work in dark mode for free.
 *   - Responsive at three breakpoints: 640, 1024, 1440.
 *   - Tap targets >= 40px (admin action button overridden below).
 *
 * @package Learnomy_Pro\Extensions\User_Journey
 */

/* ==========================================================================
   Local surface tokens (no :root additions — scoped to .lrn-journey-tab
   and .learnomy-admin)
   ========================================================================== */

.lrn-journey-tab,
.learnomy-admin {
	--lrn-journey-dot-size:          12px;
	--lrn-journey-dot-border:        2px;
}

/* ==========================================================================
   Dashboard tab — two-column layout
   ========================================================================== */

.lrn-journey-layout {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   var(--lrn-sp-6);
	align-items:           start;
}

.lrn-journey-layout__sidebar,
.lrn-journey-layout__main {
	display: flex;
	flex-direction: column;
	gap: var(--lrn-sp-6);
}

/* ==========================================================================
   Section wrapper (dashboard tab)
   ========================================================================== */

.lrn-journey-section {
	/* no additional chrome — spacing handled by parent gap */
}

.lrn-journey-section__title {
	font-size:     var(--lrn-text-base);
	font-weight:   var(--lrn-weight-semibold);
	color:         var(--lrn-text);
	margin:        0 0 var(--lrn-sp-3);
}

/* ==========================================================================
   Skills list (shared between dashboard tab and admin detail)
   ========================================================================== */

.lrn-journey-skills {
	list-style: none;
	margin:     0;
	padding:    0;
}

.lrn-journey-skill {
	margin-bottom: var(--lrn-sp-3);
}

.lrn-journey-skill:last-child {
	margin-bottom: 0;
}

.lrn-journey-skill__header {
	display:         flex;
	justify-content: space-between;
	align-items:     baseline;
	font-size:       var(--lrn-text-sm);
	margin-bottom:   var(--lrn-sp-1);
}

.lrn-journey-skill__name {
	color: var(--lrn-text);
}

.lrn-journey-skill__score {
	color:       var(--lrn-text-secondary);
	font-size:   var(--lrn-text-xs);
	font-variant-numeric: tabular-nums;
}

/* Progress bar track */
.lrn-journey-skill__bar {
	background:    var(--lrn-bg-secondary);
	border-radius: var(--lrn-radius-sm);
	height:        8px;
	overflow:      hidden;
}

/* Progress bar fill — width set inline via PHP */
.lrn-journey-skill__fill {
	height:     100%;
	background: var(--lrn-accent);
	transition: width 0.3s ease;
}

/* ==========================================================================
   Achievements list (shared between dashboard tab and admin detail)
   ========================================================================== */

.lrn-journey-achievements {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    grid;
	gap:        var(--lrn-sp-2);
}

.lrn-journey-achievement {
	display:       flex;
	align-items:   center;
	gap:           var(--lrn-sp-3);
	padding:       var(--lrn-sp-3);
	background:    var(--lrn-bg-secondary);
	border-radius: var(--lrn-radius-md);
}

.lrn-journey-achievement__icon {
	flex-shrink: 0;
	color:       var(--lrn-accent);
}

.lrn-journey-achievement__title {
	font-weight: var(--lrn-weight-semibold);
	font-size:   var(--lrn-text-sm);
	color:       var(--lrn-text);
}

.lrn-journey-achievement__desc {
	font-size: var(--lrn-text-xs);
	color:     var(--lrn-text-secondary);
	margin-top: var(--lrn-sp-1);
}

/* ==========================================================================
   Badges (earned milestones) — shared between dashboard tab and admin detail
   ========================================================================== */

.lrn-journey-badges {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    grid;
	gap:        var(--lrn-sp-2);
}

.lrn-journey-badge {
	display:       flex;
	align-items:   flex-start;
	gap:           var(--lrn-sp-3);
	padding:       var(--lrn-sp-3);
	background:    var(--lrn-bg-secondary);
	border-radius: var(--lrn-radius-md);
}

.lrn-journey-badge__icon {
	flex-shrink:     0;
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           2.5rem;
	height:          2.5rem;
	border-radius:   999px;
	color:           var(--lrn-accent);
	background:      color-mix(in srgb, var(--lrn-accent) 12%, transparent);
}

.lrn-journey-badge__body {
	min-width: 0;
}

.lrn-journey-badge__title {
	font-weight: var(--lrn-weight-semibold);
	font-size:   var(--lrn-text-sm);
	color:       var(--lrn-text);
}

.lrn-journey-badge__desc {
	font-size:  var(--lrn-text-xs);
	color:      var(--lrn-text-secondary);
	margin-top: var(--lrn-sp-1);
}

.lrn-journey-badge__meta {
	font-size:  var(--lrn-text-xs);
	color:      var(--lrn-text-secondary);
	margin-top: var(--lrn-sp-1);
	opacity:    0.85;
}

/* ==========================================================================
   Timeline (shared between dashboard tab and admin detail)
   ========================================================================== */

.lrn-journey-timeline {
	list-style:  none;
	margin:      0;
	padding:     0;
	border-left: 2px solid var(--lrn-border);
}

.lrn-journey-timeline__item {
	position:            relative;
	padding-block:       var(--lrn-sp-2);
	padding-inline-end:  0;
	/* No inline-start margin: the dot is absolutely positioned to sit ON the
	   timeline's border-left, and an item margin shifted every item (and its
	   dot) right of the line — the dots then floated off the rail (card C). */
	padding-inline-start: var(--lrn-sp-5);
}

.lrn-journey-timeline__dot {
	position:      absolute;
	left:          calc( -1 * var(--lrn-journey-dot-size) / 2 - var(--lrn-journey-dot-border) / 2 );
	top:           calc( var(--lrn-sp-2) + var(--lrn-sp-2) );
	width:         var(--lrn-journey-dot-size);
	height:        var(--lrn-journey-dot-size);
	background:    var(--lrn-accent);
	border:        var(--lrn-journey-dot-border) solid var(--lrn-bg);
	border-radius: 50%;
}

.lrn-journey-timeline__content {
	font-size: var(--lrn-text-sm);
}

.lrn-journey-timeline__event-title {
	color: var(--lrn-text);
}

.lrn-journey-timeline__event-desc {
	color:               var(--lrn-text-secondary);
	margin-inline-start: var(--lrn-sp-1);
}

.lrn-journey-timeline__date {
	font-size:  var(--lrn-text-xs);
	color:      var(--lrn-text-secondary);
	margin-top: var(--lrn-sp-1);
}

.lrn-journey-timeline__empty {
	color:  var(--lrn-text-secondary);
	margin: 0;
}

/* ==========================================================================
   Admin detail — two-column layout
   ========================================================================== */

.lrn-journey-admin-layout {
	display:               grid;
	grid-template-columns: 1fr 2fr;
	gap:                   var(--lrn-sp-6);
	margin-top:            var(--lrn-sp-4);
	align-items:           start;
}

.lrn-journey-admin-layout__sidebar {
	display:        flex;
	flex-direction: column;
	gap:            var(--lrn-sp-4);
}

/* ==========================================================================
   Admin card (skills panel + achievements panel + timeline panel)
   ========================================================================== */

.lrn-journey-card {
	background:    var(--lrn-bg);
	border:        1px solid var(--lrn-border-heavy);
	border-radius: var(--lrn-radius-md);
	padding:       var(--lrn-sp-4);
}

.lrn-journey-card__title {
	font-size:   var(--lrn-text-md);
	font-weight: var(--lrn-weight-semibold);
	color:       var(--lrn-text);
	margin:      0 0 var(--lrn-sp-3);
}

.lrn-journey-card__empty {
	color:  var(--lrn-text-secondary);
	margin: 0;
	font-size: var(--lrn-text-sm);
}

/* Admin bar height override — denser in the admin context */
.learnomy-admin .lrn-journey-skill__bar {
	height: 6px;
}

/* ==========================================================================
   Admin detail — user email beside heading
   ========================================================================== */

.lrn-journey-detail__email {
	color:       var(--lrn-text-secondary);
	font-weight: var(--lrn-weight-normal);
	font-size:   var(--lrn-text-sm);
}

/* ==========================================================================
   Tap target — admin "View Journey" button must be >= 40px tall
   ========================================================================== */

.lrn-admin-table .lrn-admin-btn--sm {
	min-height: 40px;
	display:    inline-flex;
	align-items: center;
}

/* ==========================================================================
   Responsive — three breakpoints
   ========================================================================== */

/* 1440px — wide desktop: give the detail layout a comfortable read width */
@media (min-width: 1440px) {
	.lrn-journey-layout,
	.lrn-journey-admin-layout {
		max-width: 1200px;
	}
}

/* 1024px — tablet: reduce to equal-width two-column on dashboard tab */
@media (max-width: 1024px) {
	.lrn-journey-admin-layout {
		grid-template-columns: 1fr 1fr;
	}
}

/* 640px — mobile/small tablet: single column for both views */
@media (max-width: 640px) {
	.lrn-journey-layout,
	.lrn-journey-admin-layout {
		grid-template-columns: 1fr;
	}

	.lrn-journey-layout__sidebar,
	.lrn-journey-layout__main {
		gap: var(--lrn-sp-4);
	}

	.lrn-journey-admin-layout__sidebar {
		gap: var(--lrn-sp-3);
	}

	/* Timeline indentation tighter on small screens */
	.lrn-journey-timeline__item {
		padding-inline-start: var(--lrn-sp-4);
	}

	/* Full-width action button on small screens */
	.lrn-admin-table .lrn-admin-btn--sm {
		width:           100%;
		justify-content: center;
	}
}

/* ==========================================================================
   "Recommended next steps" student widget — recommendations + locked badges
   ========================================================================== */

.lrn-pro-next__group + .lrn-pro-next__group {
	margin-top: var(--lrn-sp-5);
}

.lrn-pro-next__heading {
	font-size:   var(--lrn-text-sm);
	font-weight: var(--lrn-weight-semibold);
	color:       var(--lrn-text);
	margin:      0 0 var(--lrn-sp-3);
}

.lrn-pro-reco-list {
	list-style: none;
	margin:     0;
	padding:    0;
	display:    grid;
	gap:        var(--lrn-sp-2);
}

.lrn-pro-reco__link {
	display:         flex;
	align-items:     center;
	gap:             var(--lrn-sp-3);
	padding:         var(--lrn-sp-3);
	background:      var(--lrn-bg-secondary);
	border-radius:   var(--lrn-radius-md);
	text-decoration: none;
	color:           var(--lrn-text);
	transition:      background 0.2s ease;
}

.lrn-pro-reco__link:hover,
.lrn-pro-reco__link:focus-visible {
	background: color-mix(in srgb, var(--lrn-accent) 10%, var(--lrn-bg-secondary));
}

.lrn-pro-reco__icon {
	flex-shrink: 0;
	width:       1.25rem;
	height:      1.25rem;
	color:       var(--lrn-accent);
}

.lrn-pro-reco__body {
	min-width:      0;
	flex:           1 1 auto;
	display:        flex;
	flex-direction: column;
	gap:            var(--lrn-sp-1);
}

.lrn-pro-reco__title {
	font-weight:   var(--lrn-weight-semibold);
	font-size:     var(--lrn-text-sm);
	color:         var(--lrn-text);
	overflow:      hidden;
	text-overflow: ellipsis;
	white-space:   nowrap;
}

.lrn-pro-reco__meta {
	display:   flex;
	flex-wrap: wrap;
	gap:       var(--lrn-sp-3);
	font-size: var(--lrn-text-xs);
	color:     var(--lrn-text-secondary);
}

.lrn-pro-reco__stat {
	display:     inline-flex;
	align-items: center;
	gap:         var(--lrn-sp-1);
}

.lrn-pro-reco__stat svg {
	width:  0.875rem;
	height: 0.875rem;
}

.lrn-pro-reco__go {
	flex-shrink: 0;
	width:       1rem;
	height:      1rem;
	color:       var(--lrn-text-secondary);
}

/* Locked-badge variant — muted, with a lock affordance on the trailing edge */
.lrn-journey-badge--locked {
	opacity: 0.9;
}

.lrn-journey-badge--locked .lrn-journey-badge__icon {
	color:      var(--lrn-text-secondary);
	background: color-mix(in srgb, var(--lrn-text-secondary) 12%, transparent);
}

.lrn-journey-badge--locked .lrn-journey-badge__icon svg {
	width:  1.25rem;
	height: 1.25rem;
}

.lrn-journey-badge__lock {
	flex-shrink:         0;
	width:               1rem;
	height:              1rem;
	color:               var(--lrn-text-secondary);
	margin-inline-start: auto;
	align-self:          center;
}