/* "Fortbildungen" tab of the employee profile: filter bar, summary and the education table. */

/* ── Search row (Figma "core / searchbar"): date box on the left, the search box taking the rest.
   Both are 52px boxes with a 4px radius; icon and "Suchen:" sit inside the search box. ── */

.rd-ep-searchrow {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--rd-spacing-x-sm);
}

.rd-ep-searchrow .datepiker {
	flex: 0 0 328px;
	max-width: 100%;
}

.rd-ep-searchrow #reportrange,
.rd-ep-searchrow .rd-ep-period-static,
.rd-ep-searchrow .rd-ep-period-select {
	display: flex;
	align-items: center;
	gap: var(--rd-spacing-x-sm);
	height: 52px;
	padding: 0 var(--rd-spacing-md);
	border: 1px solid var(--rd-gray-400);
	border-radius: var(--rd-borderradius-border-md);
	background: var(--rd-card-fg);
	font-size: var(--rd-fontsize-3);
	color: var(--rd-font-dark);
	cursor: pointer;
}

.rd-ep-searchrow #reportrange span,
.rd-ep-searchrow .rd-ep-period-static span,
.rd-ep-searchrow .rd-ep-period-select select {
	flex: 1;
	order: 0;
}

/* The calendar sits on the right (Figma), the caret is not part of the design. */
.rd-ep-searchrow #reportrange .fa-calendar,
.rd-ep-searchrow .rd-ep-period-static .fa-calendar,
.rd-ep-searchrow .rd-ep-period-select .fa-calendar {
	order: 1;
	color: var(--rd-font-dark);
}

.rd-ep-searchrow #reportrange .fa-caret-down {
	display: none;
}

.rd-ep-searchrow .rd-ep-period-select select {
	border: none;
	background: transparent;
	font: inherit;
	color: inherit;
}

.rd-ep-searchfield {
	display: flex;
	flex: 1;
	min-width: 260px;
	align-items: center;
	gap: var(--rd-spacing-x-big);
	height: 52px;
	padding: 0 var(--rd-spacing-md);
	border: 1px solid var(--rd-gray-400);
	border-radius: var(--rd-borderradius-border-md);
	background: var(--rd-card-fg);
	cursor: text;
}

.rd-ep-searchrow-label {
	display: flex;
	align-items: center;
	gap: var(--rd-spacing-x-sm);
	font-size: var(--rd-fontsize-4);
	font-weight: 700;
	white-space: nowrap;
}

.rd-ep-searchrow-icon::before {
	width: 20px;
	height: 20px;
	margin: 0;
}

.rd-ep-searchfield pc-textinput {
	flex: 1;
	min-width: 0;
}

.rd-ep-searchfield .autocomplete_textvalue_wrap input[type="text"] {
	height: auto;
	padding: 0;
	border: none;
	background: transparent;
	font-size: var(--rd-fontsize-4);
	box-shadow: none;
}

/* ── Filter bar (Figma "Filterbar"): one row — "Schnellauswahl" chips, then "Filter" pills. ── */

.rd-ep-filterrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rd-spacing-sm) var(--rd-spacing-x-big);
	margin-top: var(--rd-spacing-x-big);
}

.rd-ep-quick,
.rd-ep-knobs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rd-spacing-md);
}

.rd-ep-quick-label {
	color: var(--rd-secondary-active);
	font-size: var(--rd-fontsize-4);
	font-weight: var(--rd-fontweights-open-sans-1);
	white-space: nowrap;
}

/* Quick chips: 32px, 4px radius, semibold label with a bold count. */
.rd-ep-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--rd-spacing-xx-sm);
	height: 32px;
	padding: var(--rd-spacing-xx-sm) var(--rd-spacing-md);
	border: 1px solid var(--rd-secondary-inactive);
	border-radius: var(--rd-borderradius-border-md);
	background: var(--rd-card-fg);
	color: var(--rd-font-dark);
	font-size: var(--rd-fontsize-3);
	font-weight: var(--rd-fontweights-open-sans-1);
	line-height: 1;
	cursor: pointer;
}

.rd-ep-chip b {
	font-weight: 700;
}

.rd-ep-chip:hover {
	border-color: var(--rd-secondary-active);
	color: var(--rd-secondary-active);
}

.rd-ep-chip.is-active {
	border-color: var(--rd-secondary-active);
	background: var(--rd-tag-tag1-inactive);
	color: var(--rd-secondary-active);
}

/* Filter pills are the platform knobs; in their default state only the label shows (Figma). */
.rd-ep-knobs .rd-knob-body {
	font-weight: var(--rd-fontweights-open-sans-1);
}

.rd-ep-knobs .rd-knob[data-is-default-value="true"] .rd-knob-value-short {
	display: none;
}

.rd-ep-list-head {
	display: flex;
	align-items: center;
	gap: var(--rd-spacing-md);
	text-align: left;
	border-bottom: unset !important;
}

.rd-ep-list-head > :first-child {
	margin-right: auto;
}

.rd-ep-list-head p {
	font-size: var(--rd-fontsize-4);
	font-weight: 400;
	line-height: 125%;
	white-space: nowrap;
	color:var(--rd-gray-500);
	margin-bottom:var(--rd-spacing-xx-sm);
}

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

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

/* "05:24 / 12:45 Std absolviert" and "3 / 7 Fortbildungen abgeschlossen" stay on one line
   (Figma); the global .rd-gray-text is a block and would otherwise push the rest down. */
.rd-ep-list-progress-value {
	white-space: nowrap;
}

.rd-ep-list-progress-value .rd-gray-text,
.rd-ep-list-head p .rd-gray-text {
	display: inline;
}

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

/* ── Table cells ──────────────────────────────────────────────────────── */

.rd-ep-row-title {
	display: flex;
	align-items: center;
	gap: var(--rd-spacing-sm);
	min-width: 0;
}

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

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

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

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

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

.rd-ep-row-due {
	color: var(--rd-gray-500);
	font-size: var(--rd-fontsize-2);
}

.rd-ep-row-tone-expired .rd-ep-row-due {
	color: var(--rd-error-default);
	font-weight: 600;
}

.rd-ep-row-tone-locked .rd-ep-row-due {
	color: var(--rd-warning-900);
	font-weight: 600;
}

.rd-ep-row-type,
.rd-ep-row-duration {
	display: inline-flex;
	align-items: center;
	gap: var(--rd-spacing-xx-sm);
	white-space: nowrap;
}

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

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

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

.rd-ep-row-progress {
	display: flex;
	align-items: center;
	gap: var(--rd-spacing-x-sm);
}

.rd-ep-row-progress .rd-ep-bar {
	flex: 1;
	min-width: 60px;
}

/* Row backgrounds by state: overdue red, locked yellow. */
.rd-ep-list .rd-sortable-table-row:has(.rd-ep-row-tone-expired) {
	background: var(--rd-red-100);
}

.rd-ep-list .rd-sortable-table-row:has(.rd-ep-row-tone-locked) {
	background: var(--rd-warning-50);
}

/* ── Batch bar ────────────────────────────────────────────────────────── */

.rd-ep-batchbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rd-spacing-md);
	margin-bottom: var(--rd-spacing-md);
	padding: var(--rd-spacing-sm) var(--rd-spacing-md);
	border-radius: var(--rd-borderradius-border-md);
	background: var(--rd-success-default);
	color: var(--rd-card-fg);
}

.rd-ep-batchbar strong {
	margin-right: auto;
	font-size: var(--rd-fontsize-5);
}

.rd-ep-batch-action {
	display: inline-flex;
	align-items: center;
	gap: var(--rd-spacing-xx-sm);
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.rd-ep-batch-action::before {
	width: 18px;
	height: 18px;
	margin: 0;
	background-color: var(--rd-card-fg);
}

.rd-ep-batch-action.disabled {
	opacity: var(--rd-opacity-inactive);
	cursor: not-allowed;
}

/* ── Empty states ─────────────────────────────────────────────────────── */

.rd-ep-empty {
	display: grid;
	justify-items: center;
	gap: var(--rd-spacing-x-sm);
	padding: var(--rd-spacing-xx-big) var(--rd-spacing-big);
	text-align: center;
}

.rd-ep-empty h3,
.rd-ep-empty p {
	margin: 0;
}

.rd-ep-empty .rd-primary-btn {
	margin-top: var(--rd-spacing-sm);
}

.rd-ep-empty-icon::before {
	width: 48px;
	height: 48px;
	margin: 0;
	background-color: var(--rd-gray-400);
}

/* ── Status column (origin of the education) and Vivendi marker ─────────── */

.rd-ep-list-head-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rd-spacing-x-sm);
	align-items: flex-start;
}

.rd-ep-row-title a {
	color: inherit;
}

.rd-ep-row-source {
	white-space: nowrap;
}

.rd-ep-row-source-owner {
	background: var(--rd-primary-50);
	border-color: var(--rd-primary-100);
}

.rd-ep-row-source-shared_to {
	background: var(--rd-secondary-50);
	border-color: var(--rd-secondary-100);
}

.rd-ep-row-source-public {
	background: var(--rd-success-50);
	border-color: var(--rd-success-100);
}

.rd-ep-row-vivendi {
	display: inline-flex;
	align-items: center;
	gap: var(--rd-spacing-xx-sm);
	width: fit-content;
	padding: 0 var(--rd-spacing-x-sm);
	border-radius: var(--rd-borderradius-border-big);
	font-size: var(--rd-fontsize-1);
	font-weight: 600;
	background: var(--rd-success-50);
	color: var(--rd-success-900);
}

.rd-ep-row-vivendi::before {
	width: 14px;
	height: 14px;
	margin: 0;
	background-color: currentColor;
}

.rd-ep-row-vivendi-failed {
	background: var(--rd-red-100);
	color: var(--rd-error-default);
}

.rd-ep-batch-action.disabled {
	opacity: var(--rd-opacity-inactive);
	cursor: not-allowed;
}