/* instrcreate/manageCourses.php — "Doppelte bearbeiten" popup (facility 100001 only).
   Per duplicate course: a header card with the course image and a participant summary, then
   selectable option cards — one per existing Instruction the customer may add participants to,
   one "Neue Fortbildung anlegen" — plus greyed-out cards for rows that exist but cannot be a
   target, with the reason. See protected/doc/plans/2026-09-14-instrcreate-duplicate-instructions.md §14. */

.rd-edit-duplicates-overlay .rd-op-form {
	width: min(800px, 94vw);
	max-width: 800px;
	text-align: left;
	padding: var(--rd-spacing-x-big);
}

/* ── header ── */
.rd-edit-duplicates-head {
	display: flex;
	align-items: flex-start;
	gap: var(--rd-spacing-md);
	padding-bottom: var(--rd-spacing-md);
	border-bottom: 1px solid var(--rd-gray-200);
}

.rd-edit-duplicates-head-icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: var(--rd-borderradius-border-lg);
	background: var(--rd-primary-inactive);
}

.rd-edit-duplicates-head-icon::before {
	width: 26px;
	height: 26px;
	margin: 0;
	background-color: var(--rd-primary-active);
}

.rd-edit-duplicates-overlay .rd-op-form-over-title {
	text-align: left;
	margin: 0;
}

.rd-edit-duplicates-title {
	font-size: var(--rd-fontsize-7);
	font-weight: 700;
	color: var(--rd-font-dark);
	margin: var(--rd-spacing-xx-sm) 0;
}

.rd-edit-duplicates-intro {
	margin: 0;
	color: var(--rd-gray-600);
	font-size: var(--rd-fontsize-4);
}

/* ── course cards ── */
.rd-edit-duplicates-list {
	max-height: min(58vh, 640px);
	overflow-y: auto;
	margin: var(--rd-spacing-md) 0;
	padding-right: var(--rd-spacing-xx-sm);
}

/* <details>, collapsed by default. NOT a flex child that may shrink: a column flex list with
   max-height squeezes its items to fit and, with overflow hidden, silently clips the option
   cards. Plain block flow. The site's accordion rules only bite on .rd-details-list /
   .rd-icon-arrow-right-green summaries, so this stays unaffected by them. */
.rd-edit-duplicates-course {
	display: block;
	margin-bottom: var(--rd-spacing-md);
	border: 1px solid var(--rd-gray-200);
	border-radius: var(--rd-borderradius-border-lg);
	background: var(--rd-list-default-dark);
	overflow: hidden;
}

.rd-edit-duplicates-course-head {
	display: flex;
	align-items: center;
	gap: var(--rd-spacing-md);
	padding: var(--rd-spacing-md);
	background: var(--rd-card-fg);
	cursor: pointer;
	list-style: none;
}

.rd-edit-duplicates-course-head::-webkit-details-marker {
	display: none;
}

.rd-edit-duplicates-course-head:hover {
	background: var(--rd-list-default-dark);
}

.rd-edit-duplicates-course-head:focus-visible {
	outline: 2px solid var(--rd-secondary-active);
	outline-offset: -2px;
}

.rd-edit-duplicates-chevron {
	flex: 0 0 auto;
	display: inline-grid;
	place-items: center;
	width: 16px;
	height: 16px;
	/* Base state spelled out so nothing can leave it at an inherited angle: the icon points
	   down while the card is closed and flips a full 180° to point up while it is open. */
	transform: rotate(0deg);
	transition: transform 120ms ease;
}

.rd-edit-duplicates-chevron::before {
	width: 14px;
	height: 14px;
	margin: 0;
	background-color: var(--rd-gray-500);
}

.rd-edit-duplicates-course[open] .rd-edit-duplicates-chevron {
	transform: rotate(180deg);
}

.rd-edit-duplicates-course-meta {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--rd-spacing-xx-sm);
}

.rd-edit-duplicates-course-status {
	display: inline-flex;
	align-items: center;
	gap: var(--rd-spacing-xxx-sm);
	font-size: var(--rd-fontsize-3);
	font-weight: 600;
	color: var(--rd-gray-600);
	white-space: nowrap;
}

.rd-edit-duplicates-course-status::before {
	width: 14px;
	height: 14px;
	background-color: var(--rd-gray-500);
}

.rd-edit-duplicates-course-status.is-merge {
	color: var(--rd-success-pressed);
}

.rd-edit-duplicates-course-status.is-merge::before {
	background-color: var(--rd-success-pressed);
}

.rd-edit-duplicates-course-img {
	flex: 0 0 auto;
	display: block;
	width: 96px;
	height: 54px;
	border-radius: var(--rd-borderradius-border-big);
	background: var(--rd-gray-100) center / cover no-repeat;
}

.rd-edit-duplicates-course-text {
	flex: 1 1 auto;
	min-width: 0;
	display: block;
}

.rd-edit-duplicates-course-title {
	display: block;
	font-weight: 700;
	font-size: var(--rd-fontsize-5);
	color: var(--rd-font-dark);
	margin-bottom: var(--rd-spacing-xx-sm);
}

.rd-edit-duplicates-course-found {
	flex: 0 0 auto;
	padding: var(--rd-spacing-xx-sm) var(--rd-spacing-sm);
	border-radius: var(--rd-borderradius-pill);
	background: var(--rd-warning-inactive);
	color: var(--rd-font-dark);
	font-size: var(--rd-fontsize-3);
	font-weight: 600;
	white-space: nowrap;
}

.rd-edit-duplicates-course-summary {
	padding: var(--rd-spacing-sm) var(--rd-spacing-md);
	border-top: 1px solid var(--rd-gray-200);
	background: var(--rd-card-fg);
	color: var(--rd-font-dark);
	font-size: var(--rd-fontsize-4);
}

.rd-edit-duplicates-summary {
	display: inline-flex;
	align-items: flex-start;
	gap: var(--rd-spacing-xx-sm);
}

.rd-edit-duplicates-summary::before {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: var(--rd-spacing-xxx-sm) 0 0;
	background-color: var(--rd-secondary-active);
}

/* ── chips ── */
.rd-edit-duplicates-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rd-spacing-xx-sm) var(--rd-spacing-x-sm);
}

.rd-edit-duplicates-chip {
	display: inline-flex;
	align-items: center;
	font-size: var(--rd-fontsize-3);
	color: var(--rd-gray-600);
	white-space: nowrap;
}

.rd-edit-duplicates-chip::before {
	width: 14px;
	height: 14px;
	background-color: var(--rd-gray-500);
}

/* ── option cards (radio cards) ── */
.rd-edit-duplicates-options {
	display: flex;
	flex-direction: column;
	gap: var(--rd-spacing-x-sm);
	padding: var(--rd-spacing-sm) var(--rd-spacing-md) var(--rd-spacing-md);
}

.rd-edit-duplicates-option {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--rd-spacing-sm);
	width: auto;
	height: auto;
	line-height: normal;
	margin: 0;
	padding: var(--rd-spacing-sm) var(--rd-spacing-md);
	border: 1.5px solid var(--rd-gray-200);
	border-radius: var(--rd-borderradius-border-big);
	background: var(--rd-card-fg);
	cursor: pointer;
	text-align: left;
	transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.rd-edit-duplicates-option input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}

.rd-edit-duplicates-option:hover {
	border-color: var(--rd-gray-400);
}

.rd-edit-duplicates-option:has(input:checked) {
	border-color: var(--rd-success-default);
	background: var(--rd-success-inactive);
	box-shadow: var(--rd-shadow-level-2);
}

.rd-edit-duplicates-option-icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--rd-gray-100);
}

.rd-edit-duplicates-option-icon::before {
	width: 18px;
	height: 18px;
	margin: 0;
	background-color: var(--rd-gray-600);
}

.rd-edit-duplicates-option-new .rd-edit-duplicates-option-icon {
	background: var(--rd-secondary-inactive);
}

.rd-edit-duplicates-option-new .rd-edit-duplicates-option-icon::before {
	background-color: var(--rd-secondary-active);
}

.rd-edit-duplicates-option:has(input:checked) .rd-edit-duplicates-option-icon {
	background: var(--rd-success-default);
}

.rd-edit-duplicates-option:has(input:checked) .rd-edit-duplicates-option-icon::before {
	background-color: var(--rd-font-light);
}

.rd-edit-duplicates-option-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--rd-spacing-xx-sm);
}

.rd-edit-duplicates-option-title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rd-spacing-x-sm);
	font-weight: 600;
	color: var(--rd-font-dark);
	font-size: var(--rd-fontsize-4);
}

.rd-edit-duplicates-badge-ok,
.rd-edit-duplicates-badge-locked {
	display: inline-flex;
	align-items: center;
	padding: 0 var(--rd-spacing-x-sm);
	border-radius: var(--rd-borderradius-pill);
	font-size: var(--rd-fontsize-2);
	font-weight: 600;
	line-height: 20px;
}

.rd-edit-duplicates-badge-ok {
	background: var(--rd-success-inactive);
	color: var(--rd-success-pressed);
}

.rd-edit-duplicates-badge-ok::before {
	width: 12px;
	height: 12px;
	background-color: var(--rd-success-pressed);
}

.rd-edit-duplicates-badge-locked {
	background: var(--rd-gray-200);
	color: var(--rd-gray-700);
}

.rd-edit-duplicates-badge-locked::before {
	width: 12px;
	height: 12px;
	background-color: var(--rd-gray-700);
}

.rd-edit-duplicates-badge-recommended {
	display: inline-flex;
	align-items: center;
	padding: 0 var(--rd-spacing-x-sm);
	border-radius: var(--rd-borderradius-pill);
	background: var(--rd-secondary-inactive);
	color: var(--rd-secondary-pressed);
	font-size: var(--rd-fontsize-2);
	font-weight: 600;
	line-height: 20px;
}

.rd-edit-duplicates-option-sub {
	color: var(--rd-gray-600);
	font-size: var(--rd-fontsize-3);
}

.rd-edit-duplicates-warn {
	display: inline-flex;
	align-items: center;
	color: var(--rd-accent-6-500);
	font-weight: 600;
}

.rd-edit-duplicates-warn::before {
	width: 14px;
	height: 14px;
	background-color: var(--rd-accent-6-500);
}

.rd-edit-duplicates-stat {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--rd-spacing-xx-sm);
	padding: var(--rd-spacing-xx-sm) var(--rd-spacing-x-sm);
	border-radius: var(--rd-borderradius-border-md);
	background: var(--rd-blue-50);
	color: var(--rd-font-dark);
	font-size: var(--rd-fontsize-3);
}

.rd-edit-duplicates-stat::before {
	width: 14px;
	height: 14px;
	background-color: var(--rd-secondary-active);
}

.rd-edit-duplicates-stat-none {
	background: var(--rd-gray-100);
	color: var(--rd-gray-600);
}

.rd-edit-duplicates-stat-none::before {
	background-color: var(--rd-gray-500);
}

.rd-edit-duplicates-hint {
	display: inline-flex;
	align-items: center;
	font-size: var(--rd-fontsize-3);
	color: var(--rd-accent-6-500);
}

.rd-edit-duplicates-hint::before {
	width: 14px;
	height: 14px;
	background-color: var(--rd-accent-6-500);
}

.rd-edit-duplicates-option-check {
	flex: 0 0 auto;
	align-self: center;
	opacity: 0;
	transition: opacity 120ms ease;
}

.rd-edit-duplicates-option-check::before {
	width: 22px;
	height: 22px;
	margin: 0;
	background-color: var(--rd-success-default);
}

.rd-edit-duplicates-option:has(input:checked) .rd-edit-duplicates-option-check {
	opacity: 1;
}

.rd-edit-duplicates-option-locked {
	cursor: default;
	background: var(--rd-gray-100);
	border-style: dashed;
}

.rd-edit-duplicates-option-locked:hover {
	border-color: var(--rd-gray-200);
}

.rd-edit-duplicates-option-locked .rd-edit-duplicates-option-title {
	color: var(--rd-gray-500);
}

.rd-edit-duplicates-option-locked .rd-edit-duplicates-hint {
	color: var(--rd-gray-600);
}

.rd-edit-duplicates-option-locked .rd-edit-duplicates-hint::before {
	background-color: var(--rd-gray-500);
}

/* ── footer ── */
.rd-edit-duplicates-footer {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: var(--rd-spacing-sm);
	padding-top: var(--rd-spacing-md);
	border-top: 1px solid var(--rd-gray-200);
}

/* Both actions are <label>s (they toggle the popup checkbox), so they take the button classes.
   `.rd-op-form .rd-primary-btn` adds a bottom margin for the stacked buttons of the other popup
   on this page; side by side here it lifts the primary button above the outline one. Naming the
   form class as well outweighs that rule, so the reset needs no !important — and size, padding
   and radius stay exactly what Button.css gives every other button. */
.rd-edit-duplicates-form .rd-edit-duplicates-footer > label {
	align-items: center;
	margin: 0;
}

/* Affected cart rows are yellow like everywhere else — the shared rule lives with the other
   .rd-sortable-table-row styles in InstructionCreation.css (.exist, .rd-dup-row). The badges
   below say what happens to such a row. */

.rd-dup-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--rd-spacing-xxx-sm);
	padding: var(--rd-spacing-xxx-sm) var(--rd-spacing-x-sm);
	border-radius: var(--rd-borderradius-pill);
	font-size: var(--rd-fontsize-2);
	font-weight: 600;
	vertical-align: middle;
	white-space: nowrap;
}

.rd-dup-badge::before {
	width: 12px;
	height: 12px;
	margin: 0;
}

/* White chip: the row itself is already --rd-warning-inactive, so a yellow badge on it would
   disappear. */
.rd-dup-badge-exists {
	background: var(--rd-card-fg);
	color: var(--rd-warning-pressed);
	border: var(--rd-borderwidth-border-default) solid var(--rd-warning-default);
}

.rd-dup-badge-exists::before {
	background-color: var(--rd-warning-pressed);
}

.rd-dup-badge-edit {
	background: var(--rd-success-inactive);
	color: var(--rd-success-pressed);
}

.rd-dup-badge-edit::before {
	background-color: var(--rd-success-pressed);
}

/* Locked option cards: the reason is the one thing the customer needs to read, so it gets a
   proper box in readable colours instead of a small grey footnote. */
.rd-edit-duplicates-lock-reason {
	display: flex;
	align-items: flex-start;
	gap: var(--rd-spacing-x-sm);
	margin-top: var(--rd-spacing-xx-sm);
	padding: var(--rd-spacing-x-sm) var(--rd-spacing-sm);
	border-radius: var(--rd-borderradius-border-md);
	background: var(--rd-warning-inactive);
	color: var(--rd-font-dark);
	font-size: var(--rd-fontsize-3);
	line-height: 1.4;
}

.rd-edit-duplicates-lock-reason-icon {
	flex: 0 0 auto;
	display: inline-grid;
	place-items: center;
	width: 16px;
	height: 16px;
}

.rd-edit-duplicates-lock-reason-icon::before {
	width: 16px;
	height: 16px;
	margin: 0;
	background-color: var(--rd-warning-pressed);
}

.rd-edit-duplicates-option-locked .rd-edit-duplicates-badge-locked {
	background: var(--rd-warning-inactive);
	color: var(--rd-warning-pressed);
}

.rd-edit-duplicates-option-locked .rd-edit-duplicates-badge-locked::before {
	background-color: var(--rd-warning-pressed);
}

/* ── cart row: merged courses only lead to the participant selection ── */
/* Colour, size and icon come from .rdsie_actions a / a::before, which every action in this
   column shares — this link only adds the bits that rule leaves open. */
.rd-dup-assign-users {
	/* Fills the cell like the buttons in this column do (.rdsie_actions button is width:100%),
	   so the done-state pill lines up with "individualisiert" instead of hugging its text. */
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--rd-fontsize-4);
	text-decoration: none;
}

.rd-dup-assign-users:hover {
	text-decoration: underline;
}

/* Done state: .edit_instract in the markup gives it the pill "individualisiert" has — but that
   class was written for a <button>, and for an <a> the column's own `.rdsie_actions a` rules
   win on colour and on the hardcoded pencil. Hence this pair, one specificity step above them.
   Padding is set here rather than on .edit_instract so the button keeps its current look. */
.rdsie_actions a.rd-dup-assign-users.is-assigned {
	padding: var(--rd-spacing-xxx-sm) var(--rd-spacing-x-sm);
	color: var(--rd-secondary-hover);
}

.rdsie_actions a.rd-dup-assign-users.is-assigned::before {
	background-color: var(--rd-secondary-hover);
	mask-image: url("/src/img/2026/Icon/Filled/check.svg");
	-webkit-mask-image: url("/src/img/2026/Icon/Filled/check.svg");
}

/* ── editInstruction: locked settings of a merged course ── */
.rd-merged-settings-note {
	display: flex;
	align-items: flex-start;
	gap: var(--rd-spacing-x-sm);
	margin: var(--rd-spacing-md) 0;
	padding: var(--rd-spacing-sm) var(--rd-spacing-md);
	border-radius: var(--rd-borderradius-border-big);
	background: var(--rd-warning-inactive);
	color: var(--rd-font-dark);
	font-size: var(--rd-fontsize-4);
	text-align: left;
}

.rd-merged-settings-note::before {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: var(--rd-spacing-xxx-sm) 0 0;
	background-color: var(--rd-warning-pressed);
}

.rd-merged-settings-list {
	border: 1px solid var(--rd-gray-200);
	border-radius: var(--rd-borderradius-border-lg);
	background: var(--rd-list-default-dark);
	overflow: hidden;
	text-align: left;
}

.rd-merged-settings-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rd-spacing-sm);
	padding: var(--rd-spacing-sm) var(--rd-spacing-md);
	border-top: 1px solid var(--rd-gray-200);
}

.rd-merged-settings-row:first-child {
	border-top: none;
}

.rd-merged-settings-label {
	flex: 0 0 200px;
	color: var(--rd-gray-600);
}

.rd-merged-settings-value {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--rd-font-dark);
	font-weight: 600;
}

.rd-merged-settings-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--rd-spacing-sm);
	margin-top: var(--rd-spacing-x-big);
}