/* "Kurs+" tab of the employee profile: package cards with the module tree (pc-employee-kursplus). */

.rd-ep-kp-progress {
	display: flex;
	align-items: center;
	gap: var(--rd-spacing-md);
	margin-bottom: var(--rd-spacing-big);
}

.rd-ep-kp-progress .rd-ep-bar {
	flex: 1;
}

.rd-ep-kp-progress-value {
	white-space: nowrap;
}

.rd-ep-kp-progress-value .rd-gray-text {
	display: inline;
}

.rd-ep-kp-progress-value strong {
	font-size: var(--rd-fontsize-6);
}

.rd-ep-kp-download {
	cursor: pointer;
}

/* The tree view's own chrome (search, selection) is not rendered here; keep the node list flat. */
.rd-ep-kp-tree .rd-treeview-node {
	border-top: 1px solid var(--rd-gray-100);
}

.rd-ep-kp-tree .rd-treeview-node-content {
	display: flex;
	align-items: center;
	gap: var(--rd-spacing-x-sm);
	padding: var(--rd-spacing-x-sm) 0;
}

.rd-ep-kp-tree .rd-treeview-node-title {
	flex: 1;
	min-width: 0;
}

.rd-ep-kp-module {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(120px, 220px) 3.5em;
	align-items: center;
	gap: var(--rd-spacing-md);
}

.rd-ep-kp-module-root .rd-ep-kp-module-name {
	font-weight: 700;
}

.rd-ep-kp-module-name {
	min-width: 0;
	overflow-wrap: anywhere;
}

.rd-ep-kp-module-values {
	white-space: nowrap;
	font-size: var(--rd-fontsize-2);
}

.rd-ep-kp-module-percent {
	text-align: right;
}

@media (max-width: 900px) {
	.rd-ep-kp-module,
	.rd-ep-kp-course {
		grid-template-columns: 1fr;
		gap: var(--rd-spacing-xx-sm);
	}
}

/* ── Overrides of the shared tree view chrome ─────────────────────────── */

pc-employee-kursplus-tree {
	display: block;
	height: auto;
	min-height: 0;
}

/* The base grid reserves 98px for the search header that this tree does not render.
   Same specificity as the base rule would lose on load order, hence the double class. */
.rd-ep-kp-tree.rd-treeview {
	grid-template-rows: auto;
	height: auto;
}

.rd-ep-kp-tree .rd-treeview-nodelist,
.rd-ep-kp-tree .rd-treeview-nodelist-nodes {
	height: auto;
	min-height: 0;
	overflow: visible;
}

/* No selection here, so the checkbox column of the base grid stays empty — hide it. */
.rd-ep-kp-tree .rd-treeview-node-input {
	display: none;
}

.rd-ep-kp-tree .rd-treeview-node-expander {
	flex: none;
	width: 24px;
}

/* The menu element is a dots icon by default; here its text child is the trigger. */
.rd-ep-kp-download {
	display: inline;
	width: auto;
	height: auto;
	border-radius: 0;
	background-image: none;
	background-color: transparent;
}

/* The base element is sized as a 400x500 form field; here it fills the card and grows with its rows. */
pc-employee-kursplus-tree.rd-tree-view {
	width: 100%;
	height: auto;
}

pc-employee-kursplus-tree.rd-tree-view > div {
	height: auto;
}

/* ── Package card head (Figma: chevron, title, subtitle; download menu right) ── */

.rd-ep-kp-head {
	margin-bottom: var(--rd-spacing-md);
}

.rd-ep-kp-toggle {
	display: flex;
	align-items: flex-start;
	gap: var(--rd-spacing-x-sm);
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.rd-ep-kp-toggle > [class*="rd-icon-"]::before {
	width: 20px;
	height: 20px;
	margin: 0;
	background-color: var(--rd-font-dark);
}

.rd-ep-kp-title p {
	margin: var(--rd-spacing-xx-sm) 0 0;
	color: var(--rd-gray-500);
	font-size: var(--rd-fontsize-3);
}

.rd-ep-kp-body[hidden] {
	display: none;
}

/* ── Course rows (tree leaves and the flat list) ─────────────────────── */

.rd-ep-kp-courses .rd-ep-kp-course {
	border-top: 1px solid var(--rd-gray-100);
}

.rd-ep-kp-course {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr) 140px 100px 40px;
	align-items: center;
	gap: var(--rd-spacing-md);
	padding: var(--rd-spacing-x-sm) 0;
}

.rd-ep-kp-course-media {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 56px;
	border-radius: var(--rd-borderradius-border-sm);
	background: var(--rd-list-default-dark);
	overflow: hidden;
}

.rd-ep-kp-course-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rd-ep-kp-course-media [class*="rd-icon-"]::before {
	width: 24px;
	height: 24px;
	margin: 0;
	background-color: var(--rd-primary-active);
}

.rd-ep-kp-course-text {
	display: grid;
	gap: var(--rd-spacing-xx-sm);
	min-width: 0;
}

.rd-ep-kp-course-text strong {
	overflow-wrap: anywhere;
}

.rd-ep-kp-course-status {
	color: var(--rd-gray-500);
	font-size: var(--rd-fontsize-2);
}

.rd-ep-kp-course-completed .rd-ep-kp-course-status {
	color: var(--rd-success-default);
	font-weight: 600;
}

.rd-ep-kp-course-in-progress .rd-ep-kp-course-status {
	color: var(--rd-font-dark);
	font-weight: 600;
}

.rd-ep-kp-course-type,
.rd-ep-kp-course-duration {
	display: inline-flex;
	align-items: center;
	gap: var(--rd-spacing-xx-sm);
	white-space: nowrap;
	font-size: var(--rd-fontsize-2);
}

.rd-ep-kp-course-type {
	color: var(--rd-secondary-active);
}

.rd-ep-kp-course-type::before,
.rd-ep-kp-course-duration::before {
	width: 16px;
	height: 16px;
	margin: 0;
}

.rd-ep-kp-course-type::before {
	background-color: var(--rd-secondary-active);
}

.rd-ep-kp-course-menu {
	display: flex;
	justify-content: flex-end;
}

/* Search row above the packages (Figma): reuses the education tab's search styling. */
.rd-ep-kp > .rd-ep-filterbar {
	margin-bottom: var(--rd-spacing-md);
}