/* Inline dossier links: styles for both the editor and the frontend. */

/* Editor toolbar buttons */
.mce-toolbar button.d-dossier-inline-btn {
	display: inline-flex;
	align-items: center;
	padding: 2px 10px;
	font-size: 12px;
	line-height: 1.4;
}

.mce-toolbar button.d-dossier-btn-company {
	color: #b7482e;
}

.mce-toolbar button.d-dossier-btn-person {
	color: #2f6fb0;
}

.mce-toolbar button.d-dossier-inline-btn:hover {
	background: rgba(0, 0, 0, 0.08);
}

/* Editor marker: the wrapped fragment is highlighted with a background +
   border so it clearly differs from a normal link. Different hue per kind.
   The bare selector works both in the editor iframe (loaded via mce_css)
   and anywhere the marker span is rendered. */
span.d-dossier-marker,
span[data-d-dossier-type] {
	border: 1px solid;
	border-radius: 3px;
	padding: 0 2px;
	cursor: default;
	transition: background 0.15s ease, border-color 0.15s ease;
}

span[data-d-dossier-type="company"] {
	background: #fdecea;
	border-color: #e0a9a3;
	color: inherit;
}

span[data-d-dossier-type="person"] {
	background: #eaf2fc;
	border-color: #a9c3e0;
	color: inherit;
}

span[data-d-dossier-type]:hover {
	filter: brightness(0.96);
}

/* Frontend link: subtle "dossier" marker */
a.d-e-dossier-inline {
	text-decoration: none;
	border-bottom: 1px dotted currentColor;
	transition: border-bottom-color 0.2s ease;
}

a.d-e-dossier-inline:hover {
	border-bottom-style: solid;
}

/* Different tint for company vs person links (falls back to currentColor when unset). */
a.d-e-dossier-inline[data-d-dossier-type="company"] {
	color: #b7482e;
}

a.d-e-dossier-inline[data-d-dossier-type="person"] {
	color: #2f6fb0;
}