/* "Übersicht" tab of the employee profile (pc-employee-overview). */

.rd-ep-urgent {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 24px;
}

.rd-ep-urgent-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--rd-spacing-x-sm);
	padding: var(--rd-spacing-x-sm) var(--rd-spacing-md);
	border: 1px solid var(--rd-red-500);
	border-radius: var(--rd-borderradius-pill);
	color: var(--rd-red-500);
	font-weight: var(--rd-fontweights-open-sans-1);
	text-decoration: none;
}

.rd-ep-urgent-chip [class*="rd-icon-"]::before {
	/* 	width: 14px;
	height: 14px; */
	margin: 0;
	background-color: var(--rd-error-default);
}

a.rd-ep-urgent-chip:hover {
	color: var(--rd-red-500);
}

.rd-ep-card strong {
	line-height: 125%;
	font-size: var(--rd-fontsize-5);
	color: var(--rd-font-dark);
}

.rd-ep-summary-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--rd-spacing-md);
}

.rd-ep-summary-grid .rd-ep-card {
	margin-top: var(--rd-spacing-md);
}

.rd-ep-summary-card p {
	margin: var(--rd-spacing-x-sm) 0 0;
	/* "05:24 / 09:45 Std absolviert" and "3 / 5 Fortbildungen abgeschlossen" stay on one line (Figma) */
	white-space: nowrap;
	line-height: 125%;
}


/* The global .rd-gray-text is a block; inside these value lines it must flow inline. */
.rd-ep-summary-card p {
	display: inline;

}


.rd-ep-summary-value {
	font-size: var(--rd-fontsize-8);
}

.rd-ep-summary-card .rd-ep-bar {
	margin-top: var(--rd-spacing-x-sm);
}

.rd-ep-summary-value .rd-gray-text {
	color: var(--rd-font-dark);

}

.rd-ep-kv {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--rd-spacing-xx-sm) var(--rd-spacing-md);
	margin: var(--rd-spacing-md) 0 0;
}

.rd-ep-kv dt {
	color: var(--rd-gray-500);
}

.rd-ep-kv dd {
	margin: 0;
	text-align: right;
}

.rd-ep-package-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--rd-spacing-xx-sm) var(--rd-spacing-sm);
	margin-top: var(--rd-spacing-md);
}

.rd-ep-package-row .rd-ep-bar {
	grid-column: 1 / -1;
}

.rd-ep-package-name {
	font-weight: 700;
}

.rd-ep-overview-grid {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
	gap: 0 var(--rd-spacing-md);
	align-items: start;
}

.rd-ep-detail-section {
	margin: var(--rd-spacing-md) 0 0;
	padding: var(--rd-spacing-x-sm) var(--rd-spacing-sm);
	background: var(--rd-list-default-dark);
	color: var(--rd-gray-600);
	font-size: var(--rd-fontsize-2);
	text-transform: none;
}

.rd-ep-detail-row {
	display: grid;
	grid-template-columns: minmax(140px, 1fr) 2fr;
	gap: var(--rd-spacing-md);
	padding: var(--rd-spacing-x-sm) var(--rd-spacing-sm);
	border-bottom: 1px solid var(--rd-gray-100);
}

.rd-ep-detail-row> :last-child {
	font-weight: 600;
	overflow-wrap: anywhere;
}

.rd-ep-documents pc-files,
.rd-ep-notes pc-html-editor {
	display: block;
	min-width: 0;
	max-width: 100%;
}

.rd-ep-access p {
	margin: var(--rd-spacing-x-sm) 0 0;
}

.rd-ep-access-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rd-spacing-x-sm);
	margin-top: var(--rd-spacing-md);
}

.rd-ep-access-hint {
	font-size: var(--rd-fontsize-2);
}

.rd-ep-access-info {
	margin-top: var(--rd-spacing-md);
}

.rd-ep-danger-action {
	color: var(--rd-error-default);
	border-color: var(--rd-error-default);
}

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

@media (max-width: 1200px) {
	.rd-ep-summary-grid {
		grid-template-columns: 1fr;
	}

	.rd-ep-overview-grid {
		grid-template-columns: 1fr;
	}
}

/* Info box inside the access card (Figma "gesperrt+info" / "wird gelöscht"). */
.rd-ep-access-blocker {
	display: grid;
	grid-template-columns: 20px 1fr;
	column-gap: var(--rd-spacing-x-sm);
	row-gap: var(--rd-spacing-xx-sm);
	margin-top: var(--rd-spacing-md);
	padding: var(--rd-spacing-sm) var(--rd-spacing-md);
	border-radius: var(--rd-borderradius-border-sm);
	background: var(--rd-warning-50);
	color: var(--rd-warning-900);
}

.rd-ep-access-blocker::before {
	grid-row: 1 / span 3;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	background-color: currentColor;
}

.rd-ep-access-blocker strong,
.rd-ep-access-blocker span,
.rd-ep-access-blocker a {
	grid-column: 2;
}

.rd-ep-access-blocker a {
	width: fit-content;
	color: inherit;
}

.rd-ep-access-blocker-danger {
	background: var(--rd-red-100);
	color: var(--rd-error-default);
}

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