/**
 * LearnDash Auto-Viewed Toggle Styles
 *
 * Minimal overrides to add clickable status icons without breaking original design.
 * Only targets elements inside our wrapper divs to avoid affecting other pages.
 * Supports both LTR and RTL layouts using CSS logical properties.
 *
 * @package AlmaSchool
 */

/* Hide "Complete" label on lesson/topic pages since auto-complete makes it always show */
.bb-ld-status {
	display: none !important;
}

/* ============================================================================
 * LESSON WRAPPER (.bb-lesson-head-wrapper)
 * Original: <a class="bb-lesson-head"> contains everything including status icon
 * Modified: <div class="bb-lesson-head-wrapper"><a class="bb-lesson-head">...</a><div class="alma-status-toggle">...</div></div>
 * ============================================================================ */

/* Wrapper takes over the layout role - matches original anchor styling */
.bb-lesson-head-wrapper {
	display: flex;
	align-items: center;
	width: 100%;
	border-radius: 0;
}

/* Anchor fills available space, remove end padding since status is now outside */
.bb-lesson-head-wrapper .bb-lesson-head {
	flex: 1;
	min-width: 0; /* Allow text truncation */
	/* Remove padding on the end side (right in LTR, left in RTL) - status icon is now outside */
	padding-inline-end: 0 !important;
	/* Ensure flex children (title, lock icon, counts) stay vertically centered
	 * when the title wraps to multiple lines */
	flex-direction: row !important;
	align-items: center !important;
}

/* Status toggle needs end padding that was originally on anchor */
.bb-lesson-head-wrapper .alma-status-toggle {
	/* Add padding on the end side (right in LTR, left in RTL) */
	padding-inline-end: 30px;
	flex-shrink: 0;
}

/* Remove hover from anchor since wrapper handles it now */
.bb-lesson-head-wrapper .bb-lesson-head:hover {
	background: transparent !important;
}

/* Current lesson highlight - original CSS targets direct child but we have wrapper in between
 * Original: .lms-lesson-item.current > .bb-lesson-head { background: rgba(146, 164, 183, 0.05); }
 * We need to apply to wrapper instead since .bb-lesson-head is now grandchild */
.lms-lesson-item.current > .bb-lesson-head-wrapper {
	background: rgba(146, 164, 183, 0.05);
}

/* ============================================================================
 * TOPIC WRAPPER (.bb-topic-wrapper)
 * Original: <a class="bb-lms-title-wrap"> contains everything including status icon
 * Modified: <div class="bb-topic-wrapper"><a class="bb-lms-title-wrap">...</a><div class="alma-status-toggle">...</div></div>
 * ============================================================================ */

/* Wrapper takes over the layout role */
.bb-topic-wrapper {
	display: flex;
	align-items: center;
	width: 100%;
}

/* Anchor fills available space, remove end padding since status is now outside */
.bb-topic-wrapper .bb-lms-title-wrap {
	flex: 1;
	min-width: 0; /* Allow text truncation */
	/* Remove padding on the end side (right in LTR, left in RTL) - status icon is now outside */
	padding-inline-end: 0 !important;
	/* Ensure flex children stay vertically centered when title wraps */
	flex-direction: row !important;
	align-items: center !important;
}

/* Status toggle needs end padding that was originally on anchor */
.bb-topic-wrapper .alma-status-toggle {
	/* Add padding on the end side (right in LTR, left in RTL) */
	padding-inline-end: 30px;
	flex-shrink: 0;
}

/* Remove hover from anchor since wrapper handles it now */
.bb-topic-wrapper .bb-lms-title-wrap:hover {
	background: transparent !important;
}

/* Current topic highlight - original CSS targets direct child but we have wrapper in between
 * Original: .lms-topic-item.current > .bb-lms-title-wrap { background: rgba(146, 164, 183, 0.05); }
 * We need to apply to wrapper instead since .bb-lms-title-wrap is now grandchild */
.lms-topic-item.current > .bb-topic-wrapper {
	background: rgba(146, 164, 183, 0.05);
}

/* ============================================================================
 * CLICKABLE STATUS TOGGLE
 * Minimal styling - just make icons clickable without changing their appearance
 * ============================================================================ */

/* Make status icons clickable — only for logged-in users (.logged-in on <body>) */
.logged-in .alma-status-toggle {
	cursor: pointer !important;
	background: transparent;
}

/* Subtle hover feedback - don't change size to avoid layout shifts */
.logged-in .alma-status-toggle:hover {
	opacity: 0.7;
}

/* Guests: default cursor, no interaction — WordPress adds .logged-in but NOT .logged-out */
body:not(.logged-in) .alma-status-toggle {
	cursor: default !important;
	pointer-events: none;
}

/* BuddyBoss disables all links inside .lms-is-locked items, but our plugin handles
 * access control server-side (shows a purchase page), so links must stay navigable */
.lms-topic-sidebar-wrapper .lms-is-locked a,
.learndash_course_content .bb-lessons-list li.lms-is-locked a.bb-lesson-head {
	pointer-events: auto !important;
	cursor: pointer !important;
}

/* ============================================================================
 * NEXT BUTTON - Green like checkmark
 * Override BuddyBoss grey button with green primary color
 * ============================================================================ */

.learndash-wrapper .ld-content-action .ld-button.alma-next-button,
.learndash-wrapper .ld-content-action:first-child .ld-button.alma-next-button:not(.ld-button-reverse):not(.learndash-link-previous-incomplete):not(.ld-button-transparent):not([disabled]) {
	background-color: var(--bb-primary-color) !important;
	border-color: var(--bb-primary-color) !important;
	color: #fff !important;
}

.learndash-wrapper .ld-content-action .ld-button.alma-next-button:hover,
.learndash-wrapper .ld-content-action:first-child .ld-button.alma-next-button:hover {
	background-color: var(--bb-primary-color) !important;
	border-color: var(--bb-primary-color) !important;
	color: #fff !important;
	opacity: 0.85;
}