/* ============================================================
   Analytics dashboard — layout, tabs, table, charts
   ============================================================ */

/* Grey body background + white content box (mirrors ldr-sidebar-narrow
   for pages using no-sidebar Astra layout). */
body.ldr-analytics-page {
	background-color: var(--ast-global-color-5, #f0f2f5) !important;
}
body.ldr-analytics-page #content.site-content {
	padding-top: 2em;
}
body.ldr-analytics-page #content .ast-container {
	background-color: var(--ast-global-color-4, #ffffff);
	background-clip: content-box;
}

/* ---- Wrapper ---- */
.ldr-analytics-wrapper {
	padding: 1.5rem 2rem 3rem;
	max-width: 1200px;
	margin: 0 auto;
}

/* ---- Admin selector ---- */
.ldr-admin-selector {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
	font-size: 0.875rem;
}
.ldr-admin-selector label {
	font-weight: 600;
	color: #555;
}
.ldr-admin-selector select {
	padding: 0.3rem 0.5rem;
	border: 1px solid #ccc;
	border-radius: 4px;
}
#ldr-student-go {
	padding: 0.3rem 0.75rem;
	background: #4e79a7;
	color: #fff;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 0.875rem;
}
#ldr-student-go:hover { background: #3a5f87; }

/* ---- Tab bar ---- */
.ldr-analytics-tabs {
	display: flex;
	gap: 0;
	border-bottom: 2px solid #dde1e7;
	margin-bottom: 1.5rem;
}
.ldr-tab {
	padding: 0.6rem 1.25rem;
	border: none;
	background: none;
	cursor: pointer;
	font-size: 0.9375rem;
	font-weight: 500;
	color: #666;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	transition: color 0.15s, border-color 0.15s;
}
.ldr-tab:hover { color: #333; }
.ldr-tab--active {
	color: #4e79a7;
	border-bottom-color: #4e79a7;
	font-weight: 600;
}

/* ---- Panels ---- */
.ldr-panel { display: none; }
.ldr-panel--active { display: block; }

.ldr-loading {
	padding: 2rem;
	text-align: center;
	color: #888;
	font-style: italic;
}
.ldr-error { color: #c0392b; padding: 1rem; }
.ldr-no-data { color: #999; font-style: italic; padding: 1rem 0; }

/* ---- Sections ---- */
.ldr-section { margin-bottom: 2.5rem; }
.ldr-section-header {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	margin-bottom: 0.75rem;
}
.ldr-section-title {
	font-size: 1rem;
	font-weight: 600;
	margin: 0;
	color: #333;
	flex: 1 0 auto;
}

/* ---- Toggle buttons ---- */
.ldr-toggle-group {
	display: flex;
	border: 1px solid #ccd0d5;
	border-radius: 5px;
	overflow: hidden;
}
.ldr-toggle-btn {
	padding: 0.3rem 0.75rem;
	border: none;
	background: #f5f6f8;
	cursor: pointer;
	font-size: 0.8125rem;
	color: #555;
	border-right: 1px solid #ccd0d5;
	transition: background 0.15s, color 0.15s;
}
.ldr-toggle-btn:last-child { border-right: none; }
.ldr-toggle-btn:hover { background: #e8ecf0; color: #333; }
.ldr-toggle-btn--active {
	background: #4e79a7;
	color: #fff;
}

.ldr-control-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

/* ---- Charts layout ---- */
.ldr-charts-row {
	display: flex;
	gap: 1.5rem;
	margin-bottom: 2rem;
	flex-wrap: wrap;
}
.ldr-chart-section {
	flex: 1 1 0;
	min-width: 300px;
}
.ldr-chart-half { flex: 1 1 45%; }
.ldr-chart-box {
	position: relative;
	height: 300px;
}
.ldr-chart-box canvas {
	max-height: 300px;
}

/* ---- Breadcrumb ---- */
.ldr-breadcrumb {
	font-size: 0.8125rem;
	color: #666;
	flex: 1 0 100%;
	margin-bottom: 0.25rem;
}
.ldr-bc-link {
	color: #4e79a7;
	cursor: pointer;
	text-decoration: underline;
}
.ldr-bc-link:hover { color: #2c5282; }
.ldr-bc-seg--current { color: #333; font-weight: 500; }
.ldr-bc-sep { color: #aaa; margin: 0 2px; }

/* ---- Filter checkboxes ---- */
.ldr-filter-checkboxes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1rem;
	margin-bottom: 0.5rem;
	font-size: 0.8125rem;
}
.ldr-filter-label {
	color: #888;
	align-self: center;
}
.ldr-check-label {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	cursor: pointer;
	color: #444;
}
.ldr-check-swatch {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 2px;
	flex-shrink: 0;
}

/* ---- Overview hierarchical table ---- */
.ldr-tree-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
}
.ldr-tree-table thead th {
	text-align: left;
	padding: 0.4rem 0.75rem;
	border-bottom: 2px solid #dde1e7;
	font-weight: 600;
	color: #555;
	font-size: 0.8125rem;
	white-space: nowrap;
}
.ldr-tree-table tbody tr {
	border-bottom: 1px solid #eef0f3;
}
.ldr-tree-table tbody tr:hover { background: #f7f9fc; }
.ldr-tree-table td {
	padding: 0.45rem 0.75rem;
	vertical-align: middle;
}

/* Depth-based font weight */
.ldr-depth-0 td { font-weight: 700; }
.ldr-depth-1 td { font-weight: 600; }
.ldr-depth-2 td { font-weight: 500; color: #444; }
.ldr-depth-3 td { font-weight: 400; color: #555; font-size: 0.8375rem; }

.ldr-col-label    { min-width: 220px; }
.ldr-col-questions { text-align: right; white-space: nowrap; width: 110px; }
.ldr-col-progress { width: 120px; }
.ldr-col-accuracy { text-align: right; width: 90px; white-space: nowrap; }
.ldr-col-time     { text-align: right; width: 90px; white-space: nowrap; }

.ldr-tree-arrow {
	display: inline-block;
	margin-right: 6px;
	font-size: 0.65em;
	color: #999;
	transition: transform 0.15s;
	cursor: pointer;
}
.ldr-tree-arrow--open { transform: rotate(90deg); }
.ldr-tree-indent { display: inline-block; width: 16px; margin-right: 6px; }

.ldr-tree-row[data-has-children] { cursor: pointer; }

/* Depth-4 rows (quiz level under new tree) */
.ldr-depth-4 td { font-weight: 400; color: #666; font-size: 0.8125rem; }

/* ---- Group boxes (light grey card, mirrors builder page style) ---- */
.ldr-group-box {
	background: #f4f5f7;
	border: 1px solid #e3e5e9;
	border-radius: 8px;
	padding: 1.25rem 1.5rem 1rem;
	margin-bottom: 1.5rem;
}
.ldr-group-box .ldr-section:last-child { margin-bottom: 0; }
.ldr-group-box .ldr-charts-row { margin-bottom: 1.25rem; }

/* ---- Bubble chart + manual legend ---- */
.ldr-bubble-with-legend {
	display: flex;
	gap: 1.25rem;
	align-items: flex-start;
}
/* Default order: legend LEFT, chart RIGHT (LR matrix) */
.ldr-bubble-with-legend .ldr-bubble-legend { order: 0; }
.ldr-bubble-with-legend .ldr-bubble-chart-area { order: 1; }
/* legend-right modifier: chart LEFT, legend RIGHT (RC matrices) */
.ldr-bubble-with-legend.legend-right .ldr-bubble-legend { order: 1; }
.ldr-bubble-with-legend.legend-right .ldr-bubble-chart-area { order: 0; }

.ldr-bubble-legend {
	width: 180px;
	flex-shrink: 0;
	font-size: 0.8rem;
	padding-top: 0.25rem;
}
.ldr-bubble-chart-area {
	flex: 1;
	min-width: 0;
	height: 340px;
}
.ldr-bubble-chart-area canvas { max-height: 340px; }

.ldr-legend-item {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 0.35rem;
	line-height: 1.3;
	color: #444;
}
.ldr-legend-swatch {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 2px;
	flex-shrink: 0;
}

/* ---- RC passage bar + filter checkboxes side by side ---- */
.ldr-rc-bar-with-filters {
	display: flex;
	gap: 1.25rem;
	align-items: flex-start;
}
.ldr-rc-bar-area {
	flex: 1;
	min-width: 0;
	height: 280px;
}
.ldr-rc-bar-area canvas { max-height: 280px; }
.ldr-rc-filter-side {
	width: 170px;
	flex-shrink: 0;
	flex-direction: column;
	padding-top: 0.25rem;
}
.ldr-rc-filter-side .ldr-check-label { margin-bottom: 0.25rem; }

/* ---- Time chart controls (Select All + checkboxes below chart) ---- */
.ldr-time-controls {
	margin-top: 0.75rem;
}
.ldr-select-all-btn {
	padding: 0.25rem 0.75rem;
	background: #f0f2f5;
	border: 1px solid #ccd0d5;
	border-radius: 4px;
	cursor: pointer;
	font-size: 0.8125rem;
	color: #555;
	margin-bottom: 0.5rem;
}
.ldr-select-all-btn:hover { background: #e4e7eb; color: #333; }

/* Progress bar */
.ldr-progress-bar {
	height: 7px;
	background: #e8ecf0;
	border-radius: 4px;
	overflow: hidden;
}
.ldr-progress-fill {
	height: 100%;
	background: #4e79a7;
	border-radius: 4px;
	transition: width 0.3s;
}

/* ---- Attempt History collapsible ---- */
.ldr-attempts-section {
	margin-top: 1.875rem;
	margin-bottom: 2.625rem;
}

.ldr-attempts-toggle {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	width: 100%;
	background: #f0f2f5;
	border: none;
	border-bottom: 1px solid #e0e4ea;
	border-radius: 0;
	padding: 0.6rem 0.75rem;
	cursor: pointer;
	font-size: 1rem;
	font-weight: 600;
	color: #1a1a1a;
	text-align: left;
}
.ldr-attempts-toggle:hover,
.ldr-attempts-toggle:focus,
.ldr-attempts-toggle:active { outline: none; color: #fff; box-shadow: none; }
.ldr-attempts-toggle:hover .ldr-attempts-count,
.ldr-attempts-toggle:focus .ldr-attempts-count,
.ldr-attempts-toggle:active .ldr-attempts-count { color: rgba(255,255,255,0.8); }
.ldr-attempts-toggle:hover .ldr-attempts-arrow,
.ldr-attempts-toggle:focus .ldr-attempts-arrow,
.ldr-attempts-toggle:active .ldr-attempts-arrow { color: rgba(255,255,255,0.8); }
.ldr-attempts-toggle[aria-expanded="true"] { border-bottom-color: transparent; }

.ldr-attempts-count {
	font-weight: 400;
	color: #666;
	font-size: 0.9rem;
}

.ldr-attempts-arrow {
	margin-left: auto;
	font-size: 0.75rem;
	color: #888;
}

.ldr-attempts-body {
	margin-top: 0.75rem;
	overflow-x: auto;
}

.ldr-attempts-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
}
.ldr-attempts-table th {
	text-align: left;
	padding: 0.4rem 0.75rem;
	background: #f0f2f5;
	color: #555;
	font-weight: 600;
	border-bottom: 1px solid #dde1e7;
}
.ldr-attempts-table td {
	padding: 0.45rem 0.75rem;
	border-bottom: 1px solid #edf0f4;
	color: #333;
	vertical-align: middle;
}
.ldr-attempts-table tr:last-child td { border-bottom: none; }
.ldr-attempts-table tr:hover td { background: #f8f9fb; }

.ldr-attempts-score { white-space: nowrap; }
.ldr-attempts-date  { white-space: nowrap; color: #555; }
.ldr-attempts-stats { white-space: nowrap; }

.ldr-attempts-stats .user_statistic {
	color: #4e79a7;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}
.ldr-attempts-stats .user_statistic:hover { text-decoration: underline; }

/* Pagination controls */
.ldr-attempts-pager {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 0.6rem;
	font-size: 0.875rem;
	color: #555;
}
.ldr-pager-btn {
	padding: 0.25rem 0.7rem;
	background: #f0f2f5;
	border: 1px solid #ccd0d5;
	border-radius: 4px;
	cursor: pointer;
	font-size: 0.8125rem;
	color: #444;
}
.ldr-pager-btn:hover:not([disabled]) { background: #e4e7eb; color: #222; }
.ldr-pager-btn[disabled] { opacity: 0.4; cursor: default; }