/**
 * 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;
}


/* ============================================================================
 * 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 ITEM HIGHLIGHT
 * The theme's own rules (.lms-lesson-item.current > .bb-lesson-head, and the dark-mode
 * #333 variant) no longer match lessons/topics because of the wrappers above, and its
 * rgba(146,164,183,0.05) tint was barely visible anyway. Accent tint + an accent bar on
 * the reading-start edge (flips in RTL), in both light and dark sidebar modes.
 * Quizzes aren't wrapped, so they're styled on the anchor itself.
 * ============================================================================ */
body .lms-lesson-item.current > .bb-lesson-head-wrapper,
body .lms-topic-item.current > .bb-topic-wrapper,
body .lms-quiz-item.current > .bb-lms-title-wrap {
	background: rgba(var(--bb-primary-color-rgb), 0.1);
	box-shadow: inset 3px 0 0 var(--bb-primary-color);
}

[dir="rtl"] body .lms-lesson-item.current > .bb-lesson-head-wrapper,
[dir="rtl"] body .lms-topic-item.current > .bb-topic-wrapper,
[dir="rtl"] body .lms-quiz-item.current > .bb-lms-title-wrap {
	box-shadow: inset -3px 0 0 var(--bb-primary-color);
}

body .lms-lesson-item.current > .bb-lesson-head-wrapper .bb-lesson-title,
body .lms-topic-item.current > .bb-topic-wrapper .bb-lms-title,
body .lms-quiz-item.current > .bb-lms-title-wrap .bb-lms-title {
	color: var(--bb-primary-color);
	font-weight: 600;
}

/* Hover: a lighter version of the current-item tint on the row wrappers (the theme's own
 * anchor hover is disabled above because the anchor no longer spans the whole row).
 * The current row keeps its own highlight. */
body .lms-lesson-item:not(.current) > .bb-lesson-head-wrapper,
body .lms-topic-item:not(.current) > .bb-topic-wrapper,
body .lms-quiz-item:not(.current) > .bb-lms-title-wrap {
	transition: background-color 0.15s ease;
}

body .lms-lesson-item:not(.current) > .bb-lesson-head-wrapper:hover,
body .lms-topic-item:not(.current) > .bb-topic-wrapper:hover,
body .lms-quiz-item:not(.current) > .bb-lms-title-wrap:hover {
	background: rgba(var(--bb-primary-color-rgb), 0.06);
}

body.bb-dark-theme .lms-lesson-item:not(.current) > .bb-lesson-head-wrapper:hover,
body.bb-dark-theme .lms-topic-item:not(.current) > .bb-topic-wrapper:hover,
body.bb-dark-theme .lms-quiz-item:not(.current) > .bb-lms-title-wrap:hover {
	background: rgba(var(--bb-primary-color-rgb), 0.18);
}

/* Hover title color on the whole row (the theme only colors it on anchor hover, and its
 * accent blue is unreadable on the dark sidebar) */
body .lms-lesson-item:not(.current) > .bb-lesson-head-wrapper:hover .bb-lesson-title,
body .lms-topic-item:not(.current) > .bb-topic-wrapper:hover .bb-lms-title,
body .lms-quiz-item:not(.current) > .bb-lms-title-wrap:hover .bb-lms-title {
	color: var(--bb-primary-color);
}

body.bb-dark-theme .lms-lesson-item:not(.current) > .bb-lesson-head-wrapper:hover .bb-lesson-title,
body.bb-dark-theme .lms-topic-item:not(.current) > .bb-topic-wrapper:hover .bb-lms-title,
body.bb-dark-theme .lms-quiz-item:not(.current) > .bb-lms-title-wrap:hover .bb-lms-title {
	color: #fff;
}

/* Dark mode: stronger tint, and a light title — the accent on a dark ground is low-contrast */
body.bb-dark-theme .lms-lesson-item.current > .bb-lesson-head-wrapper,
body.bb-dark-theme .lms-topic-item.current > .bb-topic-wrapper,
body.bb-dark-theme .lms-quiz-item.current > .bb-lms-title-wrap {
	background: rgba(var(--bb-primary-color-rgb), 0.3);
}

body.bb-dark-theme .lms-lesson-item.current > .bb-lesson-head-wrapper .bb-lesson-title,
body.bb-dark-theme .lms-topic-item.current > .bb-topic-wrapper .bb-lms-title,
body.bb-dark-theme .lms-quiz-item.current > .bb-lms-title-wrap .bb-lms-title {
	color: #fff;
}

/* ============================================================================
 * 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 — dim only the mark ICON, never .alma-status-toggle itself.
 * Element opacity applies to the whole subtree including the tooltip (::after), so
 * fading the toggle made the "Opened / Not Opened" balloon see-through on hover. */
.logged-in .alma-status-toggle:hover .i-progress,
.logged-in .alma-status-toggle:hover .bb-progress {
	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;
}

/* ============================================================================
 * STATUS TOOLTIP — keep the "Opened" / "Not Opened" balloon solid and readable.
 * (The see-through bug was the hover-opacity feedback above, now scoped to the icon.)
 * These rules just make the balloon appear instantly — no fade-in — with an opaque
 * background + white text in both light and dark sidebar modes.
 * ============================================================================ */
.alma-status-toggle[data-balloon]::after,
.alma-status-toggle [data-balloon]::after {
	background: rgb(var(--bb-tooltip-background-rgb)) !important;
	color: #ffffff !important;
	transition: none !important;
}
.alma-status-toggle[data-balloon]::before,
.alma-status-toggle [data-balloon]::before {
	transition: none !important;
}