/* ============================================================
   Beziehungen — Profil und Kontrollzentrum
   Klassennamen stammen aus dem Plugin und bleiben unveraendert;
   das Skript und die in PHP erzeugten Markierungen haengen daran.
   ============================================================ */

/* ---- Anzeige im Profil -------------------------------------- */
.rpgrelation_profile_section { margin: 0; }
.rpgrelation_profile_header { display: none; }
.rpgrelation_profile_content { max-height: none; overflow: visible; }
.rpgrelation_profile_empty { margin: 0; color: var(--md-ink-faint); }

.rpgrelation_type_section + .rpgrelation_type_section { margin-top: clamp(1.75rem, 4vw, 2.5rem); }
.rpgrelation_type_header {
	margin: 0 0 1rem;
	padding-bottom: .5rem;
	border-bottom: 1px solid var(--md-rule-hair);
	font-family: var(--md-f-sans);
	font-size: var(--md-t-micro);
	font-weight: 500;
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	color: var(--md-ink-faint);
}

.rpgrelation_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: clamp(1.1rem, 2.5vw, 1.6rem); }

/* Eine Beziehung ist im Abschnitt nur Bild und Name; alles Weitere
   steht im Dialog dahinter. */
.md-rel { display: grid; justify-items: center; gap: .6rem; cursor: pointer; }
.md-rel__av img {
	width: 68px; height: 68px;
	object-fit: cover;
	border-radius: 50%;
	background: var(--md-wash);
	filter: var(--md-portrait-filter);
	transition: filter var(--md-dur) var(--md-ease);
}
.md-rel:hover .md-rel__av img { filter: none; }
.md-rel__n {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: center;
	font-size: var(--md-t-micro);
	letter-spacing: var(--md-ls-body);
	color: var(--md-ink-dim);
	transition: color var(--md-dur) var(--md-ease);
}
.md-rel:hover .md-rel__n { color: var(--md-ink-bright); }
/* Der Name bleibt im Kachelbild Beschriftung, nicht Verweis — geklickt
   wird die Kachel als Ganzes. Im Dialog ist er wieder ein Verweis. */
.md-rel__n a { color: inherit; pointer-events: none; }

.md-rel__box {
	position: relative;
	width: min(42rem, calc(100vw - 3rem));
	overflow: visible;
	padding: clamp(2rem, 4vw, 2.75rem) clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2rem);
	background: var(--md-scrim-solid);
	border: 1px solid var(--md-rule-soft);
	border-radius: 0;
	box-shadow: 0 30px 80px rgb(0 0 0 / .45);
	color: var(--md-ink);
	font-family: var(--md-f-sans);
	text-align: center;
	cursor: default;
}
.md-rel__box::backdrop { background: var(--md-veil); backdrop-filter: blur(3px); }
.md-rel__scroll { max-height: calc(80vh - 5rem); overflow-y: auto; scrollbar-width: thin; }
.md-rel__bav { display: block; line-height: 0; }
.md-rel__bav img {
	width: 84px; height: 84px;
	object-fit: cover;
	border-radius: 50%;
	background: var(--md-wash);
	filter: var(--md-portrait-filter);
}
.md-rel__bn {
	margin: 1rem 0 0;
	font-family: var(--md-f-serif);
	font-size: 1.15rem;
	line-height: 1.5;
	color: var(--md-ink-bright);
}
.md-rel__bn a { color: var(--md-ink-bright); }
.md-rel__bn a:hover { color: var(--md-accent); }
.md-rel__bn .rpgrelation_title,
.md-rel__bn .rpgrelation_type { display: inline; margin: 0; }

.md-rel__desc {
	max-width: 62ch;
	max-height: none;
	margin: 1.4rem auto 0;
	padding-top: 1.2rem;
	border-top: 1px solid var(--md-rule-hair);
	font-size: var(--md-t-body);
	line-height: 1.9;
	text-align: left;
	color: var(--md-ink-dim);
	overflow: visible;
}
.md-rel__box .rpgrelation_custom_fields {
	max-width: 62ch;
	margin: .9rem auto 0;
	text-align: left;
	font-size: var(--md-t-micro);
	font-style: italic;
	color: var(--md-ink-faint);
}

/* Bearbeiten und Loeschen: zwei gezeichnete Zeichen in einer Reihe. */
.rpgrelation_edit_icons {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.4rem;
	margin-top: 1.6rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--md-rule-hair);
}
.rpgrelation_inline_form { margin: 0; display: flex; }
.rpgrelation_edit_icon,
.rpgrelation_delete_icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto; height: auto;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	font-size: .95rem;
	line-height: 1;
	color: var(--md-ink-faint);
	cursor: pointer;
	transition: color var(--md-dur) var(--md-ease);
}
.rpgrelation_edit_icon:hover { background: none; color: var(--md-ink-bright); }
.rpgrelation_delete_icon:hover { background: none; color: var(--md-accent); }

.rpgrelation_add_button_container { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.rpgrelation_add_button .icon { margin-right: .4rem; }

/* ---- Marken ------------------------------------------------- */
.rpgrelation_npc_badge,
.rpgrelation_status {
	display: inline-block;
	margin-left: .5rem;
	font-family: var(--md-f-sans);
	font-size: var(--md-t-micro);
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	color: var(--md-ink-faint);
}
.rpgrelation_status_accepted { color: var(--md-ink-dim); }
.rpgrelation_status_pending { color: var(--md-ink); }
.rpgrelation_status_declined { color: var(--md-accent-soft); }
.rpgrelation_wanted_link { margin-left: .5rem; color: var(--md-ink-faint); }
.rpgrelation_wanted_link:hover { color: var(--md-ink); }

/* ---- Kontrollzentrum: Reiter -------------------------------- */
.rpgrelation_tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.5rem;
	margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
	padding: 0 0 .6rem;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--md-rule-hair);
}
.rpgrelation_tab,
.rpgrelation_tab:link,
.rpgrelation_tab:visited {
	display: inline-block;
	padding: 0;
	border: 0;
	font-size: var(--md-t-micro);
	font-weight: 400;
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	color: var(--md-ink-faint) !important;
}
.rpgrelation_tab:hover { background: none; color: var(--md-ink) !important; }
.rpgrelation_tab.active,
.rpgrelation_tab.active:link,
.rpgrelation_tab.active:visited,
.rpgrelation_tab.active:hover { background: none; color: var(--md-ink-bright) !important; font-weight: 500; }
.rpgrelation_tab_content { padding: 0; }
.rpgrelation_pending_badge {
	display: inline-block;
	margin-left: .35rem;
	padding: 0;
	background: none;
	border-radius: 0;
	font-size: var(--md-t-micro);
	font-weight: 400;
	color: var(--md-accent-soft);
}
.rpgrelation_tab.active .rpgrelation_pending_badge { background: none; color: var(--md-accent); }

/* ---- Karten im Kontrollzentrum ------------------------------ */
.rpgrelation_pending_card,
.rpgrelation_relation_card,
.rpgrelation_npc_card {
	display: flex;
	align-items: flex-start;
	gap: clamp(1rem, 2.5vw, 1.5rem);
	margin: 0;
	padding: clamp(1rem, 2.5vw, 1.4rem) 0;
	background: none;
	border: 0;
	border-top: 1px solid var(--md-rule-hair);
	border-radius: 0;
	box-shadow: none;
}
.rpgrelation_pending_card:hover,
.rpgrelation_relation_card:hover,
.rpgrelation_npc_card:hover { box-shadow: none; }
.rpgrelation_pending_avatar img,
.rpgrelation_card_avatar img,
.rpgrelation_npc_avatar img {
	width: 64px; height: 64px;
	object-fit: cover;
	border: 1px solid var(--md-rule-hair);
	border-radius: 0;
	filter: var(--md-portrait-filter);
}
.rpgrelation_pending_info,
.rpgrelation_card_info,
.rpgrelation_npc_info { flex: 1; min-width: 0; }
.rpgrelation_pending_header,
.rpgrelation_card_header,
.rpgrelation_npc_header { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; margin-bottom: .4rem; }
.rpgrelation_pending_header strong,
.rpgrelation_card_header strong,
.rpgrelation_npc_header strong {
	font-family: var(--md-f-serif);
	font-size: 1.05rem;
	font-weight: 400;
	color: var(--md-ink);
}
.rpgrelation_pending_header strong a,
.rpgrelation_card_header strong a,
.rpgrelation_npc_header strong a { color: var(--md-ink); text-decoration: none; }
.rpgrelation_pending_header strong a:hover,
.rpgrelation_card_header strong a:hover,
.rpgrelation_npc_header strong a:hover { color: var(--md-ink-bright); text-decoration: none; }
.rpgrelation_card_title {
	margin: .2rem 0;
	font-size: var(--md-t-micro);
	font-style: italic;
	font-weight: 400;
	color: var(--md-ink-faint);
}
.rpgrelation_pending_desc,
.rpgrelation_card_desc,
.rpgrelation_npc_desc {
	max-height: 7rem;
	overflow-y: auto;
	margin: .4rem 0 0;
	font-size: var(--md-t-micro);
	line-height: 1.9;
	color: var(--md-ink-dim);
}
.rpgrelation_pending_meta,
.rpgrelation_npc_meta {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem 1.2rem;
	margin-top: .5rem;
	font-size: var(--md-t-micro);
	letter-spacing: var(--md-ls-body);
	color: var(--md-ink-faint);
}
.rpgrelation_pending_actions,
.rpgrelation_card_actions,
.rpgrelation_npc_actions { display: flex; flex-direction: column; gap: .5rem; flex-shrink: 0; }
.rpgrelation_pending_actions form { margin: 0; }

/* ---- Schaltflaechen ----------------------------------------- */
.rpgrelation_btn,
.rpgrelation_add_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	padding: .5rem 1.2rem;
	background: none;
	border: 1px solid var(--md-rule-soft);
	border-radius: 0;
	font-family: var(--md-f-sans);
	font-size: var(--md-t-kicker);
	font-weight: 400;
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	color: var(--md-ink);
	text-align: center;
	cursor: pointer;
	transition: border-color var(--md-dur) var(--md-ease), color var(--md-dur) var(--md-ease);
}
.rpgrelation_btn:hover,
.rpgrelation_add_button:hover { background: none; border-color: var(--md-rule); color: var(--md-ink-bright); }
.rpgrelation_btn_accept,
.rpgrelation_btn_edit { background: none; color: var(--md-ink); }
.rpgrelation_btn_accept:hover,
.rpgrelation_btn_edit:hover { background: none; color: var(--md-ink-bright); }
.rpgrelation_btn_decline,
.rpgrelation_btn_delete { background: none; color: var(--md-ink-faint); }
.rpgrelation_btn_decline:hover,
.rpgrelation_btn_delete:hover { background: none; border-color: var(--md-accent-soft); color: var(--md-accent); }
.button_delete { background: none !important; border-color: var(--md-accent-soft) !important; color: var(--md-accent) !important; }

.rpgrelation_no_items { padding: 1.5rem 0; text-align: center; color: var(--md-ink-faint); }

/* ---- Formulare ---------------------------------------------- */
.rpgrelation_tab_content form { margin: 0; }
.rpgrelation_form_row { margin-bottom: 1.1rem; text-align: left; }
.rpgrelation_form_row label {
	display: block;
	margin-bottom: .35rem;
	font-size: var(--md-t-micro);
	font-weight: 400;
	letter-spacing: var(--md-ls-nav);
	text-transform: uppercase;
	color: var(--md-ink-faint);
}
.rpgrelation_target_display {
	padding: .5rem .7rem;
	background: var(--md-wash);
	border: 1px solid var(--md-rule-hair);
	border-radius: 0;
	text-align: left;
	color: var(--md-ink);
}
.rpgrelation_form_hint { margin-top: .35rem; font-size: var(--md-t-micro); font-style: italic; color: var(--md-ink-faint); }
.rpgrelation_form_group label input[type="radio"] { margin-right: .4rem; vertical-align: middle; }
#target_user_fields,
#target_npc_fields {
	margin-top: .8rem;
	padding: 1rem;
	background: none;
	border: 1px solid var(--md-rule-hair);
	border-radius: 0;
}
.rpgrelation_section_header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.rpgrelation_section_header h3 { margin: 0; }

/* ---- Modal -------------------------------------------------- */
.rpgrelation_modal_overlay {
	position: fixed;
	inset: 0;
	z-index: 9998;
	background: var(--md-veil);
	backdrop-filter: blur(3px);
}
.rpgrelation_modal {
	position: fixed;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	z-index: 9999;
	display: flex;
	flex-direction: column;
	width: min(38rem, calc(100vw - 3rem));
	max-height: 90vh;
	overflow: visible;
	background: var(--md-scrim-solid);
	border: 1px solid var(--md-rule-soft);
	border-radius: 0;
	box-shadow: 0 30px 80px rgb(0 0 0 / .45);
	color: var(--md-ink);
	font-family: var(--md-f-sans);
}
.rpgrelation_modal_header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.5rem, 4vw, 2.25rem) .8rem;
	background: none;
	border: 0;
	color: var(--md-ink);
}
.rpgrelation_modal_header h3 {
	margin: 0;
	font-size: var(--md-t-kicker);
	font-weight: 400;
	letter-spacing: var(--md-ls-kicker);
	text-indent: var(--md-ls-kicker);
	text-transform: lowercase;
	color: var(--md-ink-faint);
}
.rpgrelation_modal_body {
	flex: 1;
	max-height: calc(90vh - 11rem);
	overflow-y: auto;
	padding: 0 clamp(1.5rem, 4vw, 2.25rem);
}
.rpgrelation_modal_footer {
	display: flex;
	justify-content: flex-end;
	gap: .7rem;
	padding: 1.2rem clamp(1.5rem, 4vw, 2.25rem) clamp(1.25rem, 3vw, 1.75rem);
	background: none;
	border-top: 1px solid var(--md-rule-hair);
	text-align: right;
}
.rpgrelation_modal_footer .button { margin-left: 0; }
.rpgrelation_modal_message {
	margin-top: 1rem;
	padding: .7rem 0 0;
	border-top: 1px solid var(--md-rule-hair);
	border-radius: 0;
	font-size: var(--md-t-micro);
	color: var(--md-ink-dim);
}
.rpgrelation_msg_success { background: none; border-color: var(--md-rule-hair); color: var(--md-ink-bright); }
.rpgrelation_msg_error { background: none; border-color: var(--md-rule-hair); color: var(--md-accent); }
.trow_error { padding: .85rem 1.15rem; background: none; border: 1px solid var(--md-rule-hair); border-left: 2px solid var(--md-accent-soft); color: var(--md-ink-dim); }
.trow_success { padding: .85rem 1.15rem; background: none; border: 1px solid var(--md-rule-hair); border-left: 2px solid var(--md-rule-soft); color: var(--md-ink-dim); }

/* ---- Namensvorschlaege -------------------------------------- */
.rpgrelation_username_wrapper { position: relative; }
.rpgrelation_autocomplete {
	position: absolute;
	z-index: 1000;
	top: 100%; left: 0;
	display: none;
	width: 16rem;
	max-height: 13rem;
	overflow-y: auto;
	margin-top: -1px;
	background: var(--md-scrim-solid);
	border: 1px solid var(--md-rule-soft);
	border-radius: 0;
	box-shadow: 0 18px 46px rgb(0 0 0 / .4);
}
.rpgrelation_autocomplete_item {
	padding: .5rem .8rem;
	border-bottom: 1px solid var(--md-rule-hair);
	color: var(--md-ink-dim);
	cursor: pointer;
}
.rpgrelation_autocomplete_item:last-child { border-bottom: 0; }
.rpgrelation_autocomplete_item:hover,
.rpgrelation_autocomplete_item.selected { background: none; color: var(--md-ink-bright); }

/* ---- Hilfsklassen des Plugins ------------------------------- */
.rpgrelation_input_xs   { width: 6rem; }
.rpgrelation_input_sm   { width: 12rem; }
.rpgrelation_input_md   { width: 15rem; }
.rpgrelation_input_lg   { width: 19rem; }
.rpgrelation_input_xl   { width: 25rem; }
.rpgrelation_input_full { width: 100%; }
.rpgrelation_required_star { color: var(--md-accent); }
.rpgrelation_hidden { display: none; }

@media (max-width: 700px) {
	.rpgrelation_grid { grid-template-columns: minmax(0, 1fr); }
	.rpgrelation_pending_card,
	.rpgrelation_relation_card,
	.rpgrelation_npc_card { flex-direction: column; }
	.rpgrelation_pending_actions,
	.rpgrelation_card_actions,
	.rpgrelation_npc_actions { flex-direction: row; flex-wrap: wrap; }
}