/* ============================================================
   familycp.css – Facing the Storm
   Bereinigte Storm-Version für das Family-Plugin

   Inhaltsverzeichnis
   01. Seitenlayout
   02. Navigation / Sidebar
   03. Panels & MyBB-Grundelemente
   04. Formulare
   05. Filter- & Ergebnistabellen
   06. Familienansicht
   07. Generationen & Mitgliedergrid
   08. Mitgliederkarten & Bilder
   09. Aktionen / Claim / Wanted
   10. Popups
   11. Profil-Tab
   12. Responsive
   ============================================================ */


/* ============================================================
   01. SEITENLAYOUT
   ============================================================ */

.fts-family-page {
	width: min(1300px, calc(100% - 48px));
	margin: var(--space-xl, 40px) auto;
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: var(--space-lg, 28px);
	align-items: start;
	color: var(--text);
	font-family: var(--font-body);
}

.fts-family-page *,
.fts-family-page *::before,
.fts-family-page *::after {
	box-sizing: border-box;
}

.fts-family-main {
	min-width: 0;
}

#family {
	width: 100%;
	margin: 0;
	text-align: left;
	color: var(--text);
	font-family: var(--font-body);
}


/* ============================================================
   02. NAVIGATION / SIDEBAR
   ============================================================ */

.fts-family-sidebar {
	position: sticky;
	top: 110px;
	min-width: 0;
}

/* UserCP-artige Box */
.fts-family-nav {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-md, 8px);
	overflow: hidden;
	box-shadow: 0 18px 40px rgba(0,0,0,.06);
}

.fts-family-nav-head,
.fts-family-nav-subhead {
	display: block;
	width: 100%;
	padding: 12px 16px;
	background: var(--sapphire, #3C507D);
	color: var(--quicksand, #E0C58F);
	font-family: var(--font-ui);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .18em;
	line-height: 1.4;
	text-align: center;
	text-transform: uppercase;
	border-bottom: 1px solid rgba(201,168,76,.35);
}

.fts-family-nav-subhead {
	margin-top: 8px;
	border-top: 1px solid var(--border);
}

.fts-family-nav a {
	display: block;
	width: 100%;
	padding: 12px 16px;
	background: transparent;
	color: var(--text-muted);
	font-family: var(--font-ui);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .12em;
	line-height: 1.5;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid var(--border);
	transition: background .18s ease, color .18s ease, padding-left .18s ease;
}

.fts-family-nav a:hover,
.fts-family-nav a:focus {
	color: var(--gold, #C9A84C);
	background: rgba(201,168,76,.08);
	padding-left: 20px;
}

.fts-family-nav a:last-child {
	border-bottom: none;
}

/* Falls alte Navigation noch als Tabelle geladen wird */
.fts-family-sidebar table,
.fts-family-sidebar tbody,
.fts-family-sidebar tr,
.fts-family-sidebar td {
	display: block;
	width: 100% !important;
}

.fts-family-sidebar .tborder {
	margin: 0;
}


/* ============================================================
   03. PANELS & MYBB-GRUNDELEMENTE
   ============================================================ */

#family .tborder,
.fts-family-main > .tborder,
.fts-family-main .tborder {
	width: 100% !important;
	margin: 0 0 var(--space-md, 20px);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-md, 8px);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	box-shadow: 0 18px 40px rgba(0,0,0,.06);
}

#family .thead,
.fts-family-main .thead,
.fts-family-generation-head {
	background: var(--sapphire, #3C507D);
	color: var(--quicksand, #E0C58F);
	font-family: var(--font-ui);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .18em;
	line-height: 1.4;
	text-align: center;
	text-transform: uppercase;
	padding: 13px 16px;
	border-bottom: 2px solid rgba(201,168,76,.35);
}

#family .tcat,
.fts-family-main .tcat {
	background: rgba(201,168,76,.08);
	color: var(--gold, #C9A84C);
	font-family: var(--font-ui);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .16em;
	line-height: 1.4;
	text-transform: uppercase;
	padding: 10px 14px;
	border-top: 1px solid rgba(201,168,76,.18);
	border-bottom: 1px solid rgba(201,168,76,.18);
}

#family .trow1,
#family .trow2,
.fts-family-main .trow1,
.fts-family-main .trow2 {
	background: var(--surface);
	color: var(--text-muted);
	border-bottom: 1px solid var(--border);
	font-size: 13px;
	line-height: 1.7;
}

#family td,
.fts-family-main td {
	font-size: 13px;
	line-height: 1.7;
}

#family a,
.fts-family-main a {
	color: var(--link);
	text-decoration: none;
}

#family a:hover,
.fts-family-main a:hover {
	color: var(--gold, #C9A84C);
}

.fts-family-content-cell,
.fts-family-welcome {
	padding: var(--space-lg, 28px) !important;
	text-align: left !important;
}

.fts-family-welcome-inner {
	width: 100%;
	margin: 0;
	padding: var(--space-md, 20px);
	font-size: 14px;
	line-height: 1.9;
}


/* ============================================================
   04. FORMULARE
   ============================================================ */

#family form,
.fts-family-main form {
	width: 100%;
	max-width: none;
}

#family input.textbox,
#family .textbox,
#family textarea,
#family select,
.fts-family-main input.textbox,
.fts-family-main .textbox,
.fts-family-main textarea,
.fts-family-main select {
	width: 100%;
	max-width: 100%;
	background: var(--bg, #f7f4ee);
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm, 4px);
	padding: 9px 11px;
	font-family: var(--font-body);
	font-size: 13px;
	outline: none;
}

#family textarea,
.fts-family-main textarea {
	min-height: 160px;
	resize: vertical;
}

#family input.textbox:focus,
#family .textbox:focus,
#family textarea:focus,
#family select:focus,
.fts-family-main input.textbox:focus,
.fts-family-main .textbox:focus,
.fts-family-main textarea:focus,
.fts-family-main select:focus {
	border-color: rgba(201,168,76,.65);
	box-shadow: 0 0 0 3px rgba(201,168,76,.12);
}

#family input[type="submit"],
#family button,
#family .button,
.fts-family-main input[type="submit"],
.fts-family-main button,
.fts-family-main .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--sapphire, #3C507D);
	color: var(--quicksand, #E0C58F) !important;
	border: 1px solid rgba(201,168,76,.4);
	border-radius: var(--radius-sm, 4px);
	padding: 9px 16px;
	font-family: var(--font-ui);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .14em;
	line-height: 1.4;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background .18s ease, color .18s ease, transform .18s ease;
}

#family input[type="submit"]:hover,
#family button:hover,
#family .button:hover,
.fts-family-main input[type="submit"]:hover,
.fts-family-main button:hover,
.fts-family-main .button:hover {
	background: var(--gold, #C9A84C);
	color: var(--sapphire, #3C507D) !important;
	transform: translateY(-1px);
}

.fts-family-label {
	width: 35%;
	color: var(--text);
}

.fts-family-submit {
	text-align: center;
}

.fts-family-age-row {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

#family .fts-family-age-input,
#family .fts-family-short-input,
.fts-family-main .fts-family-age-input,
.fts-family-main .fts-family-short-input {
	width: 70px !important;
	text-align: center;
}

#family .fts-family-age-input,
.fts-family-main .fts-family-age-input {
	width: 54px !important;
}


/* ============================================================
   05. FILTER- & ERGEBNISTABELLEN
   ============================================================ */

.fts-family-filter-box,
.fts-family-edit-box {
	width: 100% !important;
	margin-bottom: var(--space-lg, 28px) !important;
}

.fts-family-results-table {
	width: 100% !important;
	margin-top: var(--space-lg, 28px) !important;
}

.fts-family-results-table .thead,
.fts-family-results-table .tcat,
.fts-family-results-table td {
	text-align: center;
}

.fts-family-results-table td:first-child {
	text-align: left;
}

.fts-family-intro {
	margin-bottom: var(--space-lg, 28px);
	color: var(--text-muted);
	font-size: 14px;
	line-height: 1.9;
}


/* ============================================================
   06. FAMILIENANSICHT
   ============================================================ */

.fts-family-title {
	margin: 0 0 var(--space-lg, 28px);
	color: var(--sapphire, #3C507D);
	font-family: var(--font-display, serif);
	font-size: 28px;
	font-weight: 400;
	letter-spacing: .08em;
	line-height: 1.3;
	text-align: center;
	text-transform: uppercase;
}

.fts-family-overview {
	margin-bottom: var(--space-lg, 28px) !important;
}

.fts-family-description {
	padding: var(--space-md, 20px) !important;
	color: var(--text-muted);
	font-size: 14px;
	line-height: 1.9;
	text-align: justify;
}

.fts-family-stats {
	padding: 0 !important;
}

.family_numbers {
	display: block;
	width: 100%;
	padding: 9px 14px;
	color: var(--text-muted);
	font-family: var(--font-ui);
	font-size: 10px;
	letter-spacing: .1em;
	line-height: 1.5;
	text-align: left;
	text-transform: uppercase;
	border-bottom: 1px solid var(--border);
}

.family_numbers strong {
	color: var(--gold, #C9A84C);
	margin-right: 4px;
}


/* ============================================================
   07. GENERATIONEN & MITGLIEDERGRID
   ============================================================ */

.fts-family-generations {
	margin-top: var(--space-lg, 28px);
}

.fts-family-generation {
	margin-top: var(--space-lg, 28px);
}

.fts-family-generation:first-child {
	margin-top: 0;
}

.fts-family-generation-head {
	margin-bottom: var(--space-md, 20px);
	border-radius: var(--radius-md, 8px);
	overflow: hidden;
}

.fts-family-members-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
	gap: var(--space-md, 20px) !important;
	width: 100% !important;
	align-items: stretch;
}


/* ============================================================
   08. MITGLIEDERKARTEN & BILDER
   ============================================================ */

.fts-family-members-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, 260px) !important;
	gap: var(--space-md, 20px) !important;
	justify-content: center !important;
	align-items: start !important;
	width: 100% !important;
}

.fts-family-member-card {
	width: 260px !important;
	max-width: 260px !important;
	min-width: 0 !important;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-md, 8px);
	overflow: hidden;
	display: flex !important;
	flex-direction: column !important;
	box-shadow: 0 14px 30px rgba(0,0,0,.06);
}

.fts-family-member-image,
.taken-img,
.free-img {
	width: 100% !important;
	min-height: 260px !important;
	overflow: visible !important;
	background: rgba(201,168,76,.06);
}

.fts-family-member-image a,
.taken-img a,
.free-img a {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
}

.family-picture,
.fts-family-member-image img,
.taken-img img,
.free-img img,
.familyangaben img {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	height: 260px !important;
	object-fit: cover !important;
	object-position: center !important;
	margin: 0 auto !important;
}

.free-img img {
	filter: grayscale(100%);
	opacity: .72;
}

.family-fullname {
	width: 100%;
	padding: 9px var(--space-sm, 12px) 6px;
	color: var(--text);
	font-family: var(--font-ui);
	font-size: 10px;
	letter-spacing: .1em;
	line-height: 1.4;
	text-align: center;
	text-transform: uppercase;
}

.family-fullname:first-child {
	padding-top: 12px;
	font-weight: 600;
}

.family-fullname:last-of-type {
	color: var(--text-muted);
	font-size: 9px;
	padding-bottom: 12px;
}

.family-fullname a {
	color: var(--link);
	text-decoration: none;
}

.family-fullname a:hover {
	color: var(--gold, #C9A84C);
}

/* ============================================================
   09. AKTIONEN / CLAIM / WANTED
   ============================================================ */

.edit-fammember,
.edit-family,
div.thead.edit-fammember {
	width: 100%;
	margin: 0;
	padding: 7px var(--space-sm, 12px) !important;
	background: transparent !important;
	color: var(--text-muted) !important;
	text-align: center !important;
	border-top: 1px solid var(--border) !important;
	border-bottom: none !important;
}

.edit-fammember a,
.edit-family a,
div.thead.edit-fammember a {
	display: inline-block;
	margin: 0 4px;
	color: var(--link) !important;
	font-family: var(--font-ui);
	font-size: 10px !important;
	letter-spacing: .08em;
	line-height: 1.5;
	text-transform: uppercase;
	text-decoration: none;
}

.edit-fammember a:hover,
.edit-family a:hover,
div.thead.edit-fammember a:hover {
	color: var(--gold, #C9A84C) !important;
}

.claim-fammember {
	padding: 7px var(--space-sm, 12px);
	color: var(--text-muted);
	font-family: var(--font-ui);
	font-size: 9px;
	letter-spacing: .08em;
	line-height: 1.5;
	text-align: center;
	text-transform: uppercase;
	border-top: 1px solid rgba(201,168,76,.2);
}

.claim-fammember a {
	color: var(--gold, #C9A84C);
	text-decoration: none;
}


/* ============================================================
   10. POPUPS
   ============================================================ */

.fts-family-pop,
.family-pop {
	display: block;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.6);
	z-index: 9999;
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease;
}

.fts-family-pop:target,
.family-pop:target {
	opacity: 1;
	pointer-events: auto;
}

.fts-family-pop > .pop,
.family-pop > .pop {
	width: min(520px, 90vw);
	position: relative;
	margin: 8vh auto;
	padding: var(--space-lg, 28px);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-md, 8px);
	box-shadow: 0 24px 70px rgba(0,0,0,.42);
	z-index: 3;
}

.fts-family-pop > .pop > .tcat,
.family-pop > .pop > .tcat {
	margin: 0 0 var(--space-sm, 12px);
	padding: 0 0 var(--space-sm, 12px);
	background: transparent;
	color: var(--text);
	border: none;
	border-bottom: 1px solid rgba(201,168,76,.3);
	font-family: var(--font-ui);
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.fts-family-pop > .pop > .tcat strong,
.family-pop > .pop > .tcat strong {
	color: var(--gold, #C9A84C);
}

.fts-family-pop .description,
.family-pop .description {
	margin-top: var(--space-sm, 12px);
	max-height: 240px;
	overflow: auto;
	color: var(--text-muted);
	font-family: var(--font-body);
	font-size: 13px;
	line-height: 1.8;
}

.closepop {
	position: absolute;
	inset: 0;
	z-index: 2;
}


/* ============================================================
   11. PROFIL-TAB
   ============================================================ */

.profile_family {
	display: flex;
	justify-content: center;
	width: 120px;
	padding: 10px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm, 4px);
	margin: 10px auto 15px;
}


/* ============================================================
   12. RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
	.fts-family-page {
		width: min(100% - 24px, 1300px);
		grid-template-columns: 1fr;
	}

	.fts-family-sidebar {
		position: static;
	}

	.fts-family-members-grid {
		grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
	}

	.fts-family-content-cell,
	.fts-family-welcome {
		padding: var(--space-md, 20px) !important;
	}
}

@media (max-width: 600px) {
	.fts-family-page {
		width: min(100% - 16px, 1300px);
	}

	.fts-family-members-grid {
		grid-template-columns: 1fr !important;
	}

	.fts-family-filter-box tr,
	.fts-family-edit-box tr,
	.fts-family-filter-box td,
	.fts-family-edit-box td {
		display: block;
		width: 100% !important;
	}

	.fts-family-label {
		width: 100%;
	}

	.family-picture,
	.fts-family-member-image img,
	.taken-img img,
	.free-img img,
	.familyangaben img {
		height: 240px !important;
	}
}