/* Participant card of the instruction detail page (instructions/view2.php).
   Figma: Präsenzkurse → Fortbildungsplaner-Detailseite (7288:13705) + selection bar (7482:22036).
   Table rows/cells come from pc-queries-app / pc-table; the row menu, badges and the green
   selection bar are drawn by InstructionParticipantsCustomizer. */

.rd-ip-card {
	background: var(--rd-card-fg);
	border-radius: var(--rd-borderradius-border-md);
	padding: var(--rd-spacing-x-big);
	color: var(--rd-font-dark);
}

/* Figma "HorizontalBorder": title row closed by a 2px line, 16px gap to the filters/table */
.rd-ip-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rd-spacing-md);
	flex-wrap: wrap;
	padding-bottom: var(--rd-spacing-sm);
	/* border-bottom: 2px solid var(--rd-table-border); */
	/* margin-bottom: var(--rd-spacing-md); */
}

.rd-ip-card-title {
	display: flex;
	align-items: center;
	gap: var(--rd-spacing-md);
	font-size: var(--rd-fontsize-4);
	font-weight: 700;
	color: var(--rd-font-title-gray);
}

.rd-ip-card-actions {
	display: flex;
	align-items: center;
	gap: var(--rd-spacing-x-big);
}

/* --- badges (status column, pending counter) ------------------------------------------- */

.rd-ip-badge {
	display: inline-block;
	padding: var(--rd-spacing-xxx-sm) var(--rd-spacing-x-sm);
	border-radius: var(--rd-borderradius-pill);
	font-size: var(--rd-fontsize-3);
	font-weight: 500;
	line-height: 18px;
	white-space: nowrap;
}

.rd-ip-badge-green {
	background: var(--rd-green-50);
	color: var(--rd-success-pressed);
}

.rd-ip-badge-yellow {
	background: var(--rd-warning-50);
	color: var(--rd-warning-pressed);
}

.rd-ip-badge-blue {
	background: var(--rd-input-disabled);
	color: var(--rd-secondary-pressed);
}

/* --- table -------------------------------------------------------------------------------- */

/* no result count / sorting strip above the table (Figma: head row sits directly under the filters) */
.rd-pctable.rd-ip-table .rd-sortable-table-resultcount-and-sorting {
	display: none;
}

/* overflow stays visible so the row menu of the last rows is not clipped */
.rd-pctable.rd-ip-table .rd-sortable-table-body {
	border: 1px solid var(--rd-table-border);
	border-radius: var(--rd-borderradius-border-md);
	overflow: visible;
}

.rd-pctable.rd-pctable-card.rd-ip-table .rd-sortable-table-body > .rd-sortable-table-row.rd-sortable-table-head {
	border-radius: var(--rd-borderradius-border-md) var(--rd-borderradius-border-md) 0 0;
}

/* Figma head: #f9fafb, 44px, 16/12 padding, Open Sans 600 14 #212b36 */
.rd-pctable.rd-pctable-card.rd-ip-table .rd-sortable-table-body > .rd-sortable-table-row.rd-sortable-table-head {
	background: var(--rd-list-default-dark);
	color: var(--rd-table-heading);
	font-weight: 600;
	min-height: 44px;
	padding: 0 var(--rd-spacing-sm);
	border-bottom: 1px solid var(--rd-table-border);
}

.rd-pctable.rd-ip-table .rd-sortable-table-head .rd-sortable-table-cell button {
	color: var(--rd-table-heading);
	font-size: var(--rd-fontsize-4);
	font-weight: 600;
}

/* narrow left grid column: let head labels wrap instead of being clipped */
.rd-pctable.rd-ip-table .rd-sortable-table-head .rd-sortable-table-cell > div {
	overflow: visible;
	white-space: normal;
}

.rd-pctable.rd-ip-table .rd-sortable-table-head .rd-sortable-table-cell button {
	white-space: normal;
	text-align: left;
	overflow-wrap: break-word;
	hyphens: auto;
	line-height: 1.3;
	display: flex;
	align-items: center;
}

/* Figma row (7485:22444): 12px side padding, 12px top/bottom, checkbox 18px + 16px gap, cells 16px apart */
.rd-pctable.rd-ip-table .rd-sortable-table-body > div > .rd-sortable-table-row {
	border-bottom: 1px solid var(--rd-border-gray);
	padding: var(--rd-spacing-sm);
}

.rd-pctable.rd-ip-table .rd-sortable-table-body > div > .rd-sortable-table-row:last-child {
	border-bottom: none;
}

/* cells: left aligned, no card padding, 16px gap to the next cell (Figma itemSpacing 16) */
.rd-pctable.rd-pctable-card.rd-ip-table .rd-sortable-table-body > div > .rd-sortable-table-row > .rd-sortable-table-cell,
.rd-pctable.rd-pctable-card.rd-ip-table .rd-sortable-table-head > .rd-sortable-table-cell {
	padding: 0;
	justify-content: flex-start;
}

.rd-pctable.rd-ip-table .rd-sortable-table-cell > div {
	width: calc(100% - 16px);
	max-width: calc(100% - 16px);
	margin: 0;
}

/* checkbox column: flex-basis beats the inline width:45px, 18px box + 16px gap */
.rd-pctable.rd-ip-table .rd-sortable-table-cell[data-type="checkbox"] {
	flex: 0 0 34px;
	width: 34px;
	justify-content: flex-start;
}

.rd-pctable.rd-ip-table .rd-sortable-table-cell[data-type="checkbox"] > div {
	width: 100%;
	max-width: 100%;
}

.rd-ip-table .rd-sortable-table-cell[data-key="STATUS"] > div {
	overflow: visible;
}

/* keyboard users: visible focus on every own control */
.rd-ip-menu-trigger:focus-visible,
.rd-ip-menu-item:focus-visible,
.rd-ip-selbar-clear:focus-visible,
.rd-ip-selbar-action:focus-visible {
	outline: 2px solid var(--rd-secondary-active);
	outline-offset: 2px;
}

.rd-ip-participant {
	line-height: 1.3;
}

.rd-ip-participant-name {
	display: block;
	color: var(--rd-secondary-active);
	font-weight: 600;
}

.rd-ip-participant-facility,
.rd-ip-completion-period,
.rd-ip-groups-none {
	display: block;
	font-size: var(--rd-fontsize-3);
	color: var(--rd-gray-600);
}

.rd-ip-groups {
	font-weight: 600;
}

/* "+N mehr" as plain text link (overrides the pill look of pc-tooltip's "more" variant) */
pc-tooltip.pc-tooltip-more.rd-ip-groups-more {
	display: inline;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	color: var(--rd-secondary-active);
	font-size: var(--rd-fontsize-3);
	font-weight: 400;
	line-height: inherit;
	white-space: nowrap;
	cursor: help;
}

.rd-ip-completion-date {
	font-weight: 600;
}

/* admin-set date: standard info icon behind the date */
pc-tooltip.rd-ip-completion-tip {
	margin-left: var(--rd-spacing-xx-sm);
}

.rd-ip-completion-date {
	display: inline-flex;
	align-items: center;
}

/* --- expandable progress row (legacy form?typ=proces fragment) ---------------------------- */

.rd-sortable-table-row-detail {
	padding: var(--rd-spacing-sm) var(--rd-spacing-md) var(--rd-spacing-md);
	background: var(--rd-list-default-dark);
	border-bottom: 1px solid var(--rd-border-gray);
}

.rd-ip-progress-loading {
	display: grid;
	gap: var(--rd-spacing-x-sm);
	/* measured: two lines of the legacy progress fragment */
	min-height: 48px;
}

/* --- row menu ------------------------------------------------------------------------------ */

/* PCTable clips cell content (inline-block + overflow hidden); the menu cell must not.
   The cell hugs the right edge of the row (Figma: dots-vertical at the row end). */
/* menu column: 20px icon flush with the 12px row padding */
.rd-pctable.rd-ip-table .rd-sortable-table-cell[data-key="ACTIONS"] {
	flex: 0 0 20px;
	width: 20px;
	margin-left: auto;
	justify-content: flex-end;
}

.rd-pctable.rd-ip-table .rd-sortable-table-cell[data-key="ACTIONS"] > div {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow: visible;
}

.rd-ip-menu-wrap {
	position: relative;
	display: flex;
	justify-content: flex-end;
	width: 100%;
}

.rd-ip-menu-trigger {
	width: 20px;
	height: 20px;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
}

.rd-ip-menu-trigger::before {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	background-color: var(--rd-primary-active);
	mask: url("/src/img/2024/svg/icons/rd-icon-context-menu.svg") no-repeat 50% / contain;
	-webkit-mask: url("/src/img/2024/svg/icons/rd-icon-context-menu.svg") no-repeat 50% / contain;
}

.rd-ip-menu {
	position: absolute;
	right: 0;
	top: calc(100% + var(--rd-spacing-xx-sm));
	z-index: 20;
	min-width: 231px;
	padding: var(--rd-spacing-md);
	background: var(--rd-card-fg);
	border: 1px solid var(--rd-input-default);
	border-radius: var(--rd-borderradius-border-md);
	box-shadow: var(--rd-shadow-level-2);
	text-align: left;
}

.rd-ip-menu.rd-ip-menu-up {
	top: auto;
	bottom: calc(100% + var(--rd-spacing-xx-sm));
}

.rd-ip-menu-item {
	display: flex;
	align-items: center;
	gap: var(--rd-spacing-x-sm);
	width: 100%;
	padding: var(--rd-spacing-xx-sm) 0;
	border: none;
	background: transparent;
	color: var(--rd-font-dark);
	font-size: var(--rd-fontsize-3);
	font-weight: 600;
	line-height: 20px;
	text-align: left;
	white-space: nowrap;
	cursor: pointer;
}

.rd-ip-menu-item::before {
	background-color: var(--rd-font-dark);
	width: 20px;
	height: 20px;
	flex: none;
}

.rd-ip-menu-item:hover {
	color: var(--rd-secondary-active);
}

.rd-ip-menu-item:hover::before {
	background-color: var(--rd-secondary-active);
}

.rd-ip-menu-item:disabled {
	color: var(--rd-gray);
	cursor: not-allowed;
}

.rd-ip-menu-item:disabled::before {
	background-color: var(--rd-gray);
}

.rd-ip-menu-item-danger,
.rd-ip-menu-item-danger:hover {
	color: var(--rd-error-pressed);
}

.rd-ip-menu-item-danger::before,
.rd-ip-menu-item-danger:hover::before {
	background-color: var(--rd-error-pressed);
}

.rd-ip-menu-separator {
	margin: var(--rd-spacing-x-sm) 0;
	border: none;
	border-top: 1px solid var(--rd-border-gray);
}

/* --- green selection bar (Figma 7482:22043: 80px, padding 8/24, radius 8, Green 500) ------ */

.rd-ip-selbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rd-spacing-md);
	flex-wrap: wrap;
	min-height: 80px;
	margin-bottom: var(--rd-spacing-md);
	padding: var(--rd-spacing-x-sm) var(--rd-spacing-x-big);
	background: var(--rd-success-default);
	border-radius: var(--rd-borderradius-border-md);
	box-shadow: var(--rd-shadow-level-2);
	color: var(--rd-font-light);
}

/* "Mitarbeiter (4)": Open Sans 400 18px, line-height 24.5 */
.rd-ip-selbar-count {
	display: flex;
	align-items: center;
	gap: var(--rd-spacing-xx-sm);
	font-size: var(--rd-fontsize-6);
	font-weight: 400;
	line-height: 24.5px;
}

/* dark green 27x27 chip with a white minus */
.rd-ip-selbar-clear {
	width: 27px;
	height: 27px;
	margin-right: var(--rd-spacing-xxx-sm);
	padding: 0;
	border: none;
	border-radius: 3px;
	background: var(--rd-success-pressed);
	cursor: pointer;
}

.rd-ip-selbar-clear::before {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	margin: auto;
	background-color: var(--rd-font-light);
	mask: url("/src/img/2023/svg/icons/rd-icon-minus.svg") no-repeat 50% / contain;
	-webkit-mask: url("/src/img/2023/svg/icons/rd-icon-minus.svg") no-repeat 50% / contain;
}

.rd-ip-selbar-actions {
	display: flex;
	align-items: center;
	gap: var(--rd-spacing-md);
	flex-wrap: wrap;
}

/* actions: Open Sans 600 14.4px, line-height 19, 24px icon, 8px gap */
.rd-ip-selbar-action {
	display: inline-flex;
	align-items: center;
	gap: var(--rd-spacing-x-sm);
	padding: 0;
	border: none;
	background: transparent;
	color: var(--rd-font-light);
	font-size: 14.4px;
	font-weight: 600;
	line-height: 19px;
	letter-spacing: 0.14px;
	white-space: nowrap;
	cursor: pointer;
}

.rd-ip-selbar-action::before {
	background-color: var(--rd-font-light);
	width: 24px;
	height: 24px;
	flex: none;
}

.rd-ip-selbar-action:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* destructive action: Red 700, 12px, 20px icon */
.rd-ip-selbar-action-danger {
	color: var(--rd-error-pressed);
	font-size: var(--rd-fontsize-3);
	line-height: 16px;
}

.rd-ip-selbar-action-danger::before {
	background-color: var(--rd-error-pressed);
	width: 20px;
	height: 20px;
}

/* --- dialogs ------------------------------------------------------------------------------ */

.rd-ip-dialog p {
	margin: 0 0 var(--rd-spacing-md);
}

@media (max-width: 800px) {
	.rd-ip-card {
		padding: var(--rd-spacing-md);
	}

	.rd-ip-selbar {
		padding: var(--rd-spacing-x-sm) var(--rd-spacing-md);
	}
}