/* =========================================================
   TennisFinalsPro — SPOŁECZNOŚĆ 2026
   Jeden system wizualny oparty 1:1 na zaakceptowanej Lidze.
   Wszystkie filtry ról korzystają z tego samego community.php.
   ========================================================= */

body[data-page='community-directory'] {
	--com-navy: #0b2349;
	--com-navy-2: #123d77;
	--com-cyan: #0e789f;
	--com-blue: #1769df;
	--com-ink: #10213f;
	--com-muted: #68768d;
	--com-line: #d4e0ee;
	--com-line-strong: #c4d4e7;
	background:
		radial-gradient(circle at 10% 0%, rgba(23, 105, 223, 0.055), transparent 28rem),
		radial-gradient(circle at 92% 8%, rgba(14, 120, 159, 0.05), transparent 26rem),
		linear-gradient(180deg, #f8fbff 0%, #f4f8fc 55%, #f8fbff 100%) !important;
	color: var(--com-ink) !important;
	overflow-x: hidden !important;
}

body[data-page='community-directory'] .community-page,
body[data-page='community-directory'] .community-page *,
body[data-page='community-directory'] .community-page *::before,
body[data-page='community-directory'] .community-page *::after {
	box-sizing: border-box !important;
}

body[data-page='community-directory'] .community-page {
	width: min(1480px, calc(100% - 40px)) !important;
	max-width: 1480px !important;
	margin: 0 auto !important;
	padding: 24px 0 56px !important;
	overflow: visible !important;
}

/* HERO — identyczny rytm jak Liga */
body[data-page='community-directory'] .community-page-head {
	position: relative !important;
	isolation: isolate !important;
	overflow: hidden !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 28px !important;
	min-height: 112px !important;
	height: 112px !important;
	margin: 0 0 12px !important;
	padding: 22px 26px !important;
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
	border-radius: 22px !important;
	color: #fff !important;
	background:
		radial-gradient(circle at 90% -20%, rgba(47, 196, 232, 0.26), transparent 18rem),
		linear-gradient(135deg, #0b2349 0%, #123d77 62%, #0e789f 100%) !important;
	box-shadow: 0 18px 42px rgba(15, 44, 88, 0.14) !important;
}
body[data-page='community-directory'] .community-page-head::before {
	content: '' !important;
	position: absolute !important;
	width: 240px !important;
	height: 240px !important;
	right: -110px !important;
	top: -145px !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: 50% !important;
	box-shadow: 0 0 0 36px rgba(255, 255, 255, 0.035) !important;
	pointer-events: none !important;
	z-index: -1 !important;
}
body[data-page='community-directory'] .community-page-head__copy {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	justify-content: center !important;
	min-width: 0 !important;
}
body[data-page='community-directory'] .community-page-head__eyebrow {
	width: auto !important;
	min-height: 22px !important;
	margin: 0 0 7px !important;
	padding: 0 10px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	border-radius: 999px !important;
	background: rgba(255, 255, 255, 0.1) !important;
	color: #d7f3ff !important;
	font-size: 8px !important;
	line-height: 1 !important;
	font-weight: 700 !important;
	letter-spacing: 0.11em !important;
	text-transform: uppercase !important;
	white-space: nowrap !important;
}
body[data-page='community-directory'] .community-page-head h1 {
	margin: 0 !important;
	color: #fff !important;
	font-size: clamp(31px, 2.7vw, 40px) !important;
	line-height: 1.02 !important;
	font-weight: 700 !important;
	letter-spacing: -0.025em !important;
}
body[data-page='community-directory'] .community-page-head__copy > p {
	display: none !important;
}
body[data-page='community-directory'] .community-page-head__stats {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(82px, 1fr)) !important;
	gap: 8px !important;
	flex: 0 0 auto !important;
}
body[data-page='community-directory'] .community-head-stat {
	min-width: 88px !important;
	height: 58px !important;
	padding: 9px 11px !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	border-radius: 12px !important;
	background: rgba(255, 255, 255, 0.08) !important;
	color: #fff !important;
	text-decoration: none !important;
	transition:
		background 0.16s ease,
		border-color 0.16s ease,
		transform 0.16s ease !important;
}
body[data-page='community-directory'] .community-head-stat:hover,
body[data-page='community-directory'] .community-head-stat.is-active {
	background: rgba(255, 255, 255, 0.15) !important;
	border-color: rgba(255, 255, 255, 0.28) !important;
	transform: translateY(-1px) !important;
}
body[data-page='community-directory'] .community-head-stat strong {
	color: #fff !important;
	font-size: 18px !important;
	line-height: 1 !important;
	font-weight: 700 !important;
	letter-spacing: -0.02em !important;
}
body[data-page='community-directory'] .community-head-stat span {
	margin-top: 4px !important;
	color: rgba(235, 245, 255, 0.78) !important;
	font-size: 7.5px !important;
	line-height: 1 !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	white-space: nowrap !important;
}

/* Główne zakładki ról */
body[data-page='community-directory'] .community-tabs--primary {
	width: 100% !important;
	min-height: 46px !important;
	margin: 0 0 12px !important;
	padding: 6px !important;
	display: flex !important;
	align-items: center !important;
	gap: 4px !important;
	overflow-x: auto !important;
	border: 1px solid var(--com-line) !important;
	border-radius: 14px !important;
	background: rgba(255, 255, 255, 0.96) !important;
	box-shadow: 0 7px 20px rgba(17, 39, 75, 0.035) !important;
	scrollbar-width: none !important;
}
body[data-page='community-directory'] .community-tabs--primary::-webkit-scrollbar {
	display: none !important;
}
body[data-page='community-directory'] .community-tabs--primary a {
	min-height: 34px !important;
	padding: 0 13px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 auto !important;
	border: 1px solid transparent !important;
	border-radius: 10px !important;
	color: #52617a !important;
	background: transparent !important;
	font-size: 10.5px !important;
	line-height: 1 !important;
	font-weight: 600 !important;
	letter-spacing: 0.005em !important;
	text-decoration: none !important;
	white-space: nowrap !important;
}
body[data-page='community-directory'] .community-tabs--primary a:hover {
	background: #f4f8fd !important;
	color: #123d77 !important;
}
body[data-page='community-directory'] .community-tabs--primary a.is-active {
	color: #fff !important;
	border-color: var(--com-blue) !important;
	background: linear-gradient(135deg, #1769df, #18a9dd) !important;
	box-shadow: 0 5px 12px rgba(23, 105, 223, 0.15) !important;
}

/* Panel wyszukiwarki */
body[data-page='community-directory'] .community-panel {
	margin: 0 !important;
	padding: 0 14px 16px !important;
	overflow: hidden !important;
	border: 1px solid var(--com-line) !important;
	border-radius: 18px !important;
	background: #fff !important;
	box-shadow: 0 12px 30px rgba(17, 39, 75, 0.05) !important;
}
body[data-page='community-directory'] .community-panel__head {
	min-height: 58px !important;
	margin: 0 -14px 14px !important;
	padding: 11px 14px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 14px !important;
	border: 0 !important;
	border-radius: 17px 17px 0 0 !important;
	background: linear-gradient(105deg, #0b2349 0%, #123d77 70%, #1769a8 100%) !important;
}
body[data-page='community-directory'] .community-panel__head .community-kicker {
	display: block !important;
	margin: 0 0 3px !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: #7fc8ff !important;
	font-size: 7px !important;
	line-height: 1 !important;
	font-weight: 700 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
}
body[data-page='community-directory'] .community-panel__head h2 {
	margin: 0 !important;
	color: #fff !important;
	font-size: 16px !important;
	line-height: 1.1 !important;
	font-weight: 700 !important;
	letter-spacing: -0.012em !important;
}
body[data-page='community-directory'] .community-panel__head p {
	margin: 3px 0 0 !important;
	color: rgba(231, 241, 255, 0.82) !important;
	font-size: 9px !important;
	line-height: 1.25 !important;
	font-weight: 500 !important;
}
body[data-page='community-directory'] .community-count {
	min-height: 28px !important;
	padding: 0 10px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	border-radius: 999px !important;
	background: rgba(255, 255, 255, 0.11) !important;
	color: #fff !important;
	font-size: 9px !important;
	font-weight: 650 !important;
	white-space: nowrap !important;
}

body[data-page='community-directory'] .community-toolbar--directory {
	display: grid !important;
	grid-template-columns: minmax(300px, 2fr) minmax(160px, 0.8fr) minmax(170px, 0.8fr) auto !important;
	gap: 9px !important;
	align-items: end !important;
	margin: 0 0 10px !important;
}
body[data-page='community-directory'] .community-toolbar label {
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
	min-width: 0 !important;
}
body[data-page='community-directory'] .community-toolbar label > span {
	color: #75839a !important;
	font-size: 7.5px !important;
	line-height: 1 !important;
	font-weight: 700 !important;
	letter-spacing: 0.09em !important;
	text-transform: uppercase !important;
}
body[data-page='community-directory'] .community-toolbar input,
body[data-page='community-directory'] .community-toolbar select {
	width: 100% !important;
	height: 42px !important;
	min-height: 42px !important;
	padding: 0 12px !important;
	border: 1px solid var(--com-line-strong) !important;
	border-radius: 11px !important;
	outline: 0 !important;
	background: #fff !important;
	color: var(--com-ink) !important;
	box-shadow: none !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	letter-spacing: 0.004em !important;
}
body[data-page='community-directory'] .community-toolbar input:focus,
body[data-page='community-directory'] .community-toolbar select:focus {
	border-color: #79aee8 !important;
	box-shadow: 0 0 0 3px rgba(23, 105, 223, 0.07) !important;
}
body[data-page='community-directory'] .community-toolbar button,
body[data-page='community-directory'] .community-clear {
	height: 42px !important;
	min-height: 42px !important;
	padding: 0 16px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border: 1px solid var(--com-blue) !important;
	border-radius: 11px !important;
	background: var(--com-blue) !important;
	color: #fff !important;
	font-size: 10px !important;
	font-weight: 650 !important;
	text-decoration: none !important;
	white-space: nowrap !important;
}
body[data-page='community-directory'] .community-clear {
	border-color: var(--com-line) !important;
	background: #fff !important;
	color: #52617a !important;
}

/* Alfabet */
body[data-page='community-directory'] .community-alpha {
	display: flex !important;
	align-items: center !important;
	gap: 3px !important;
	overflow-x: auto !important;
	margin: 0 0 12px !important;
	padding: 7px !important;
	border: 1px solid var(--com-line) !important;
	border-radius: 12px !important;
	background: #f8fbff !important;
	scrollbar-width: none !important;
}
body[data-page='community-directory'] .community-alpha::-webkit-scrollbar {
	display: none !important;
}
body[data-page='community-directory'] .community-alpha a {
	min-width: 27px !important;
	height: 27px !important;
	padding: 0 6px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 auto !important;
	border: 1px solid transparent !important;
	border-radius: 8px !important;
	color: #66758e !important;
	font-size: 8.5px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}
body[data-page='community-directory'] .community-alpha a:hover,
body[data-page='community-directory'] .community-alpha a.is-active {
	color: #fff !important;
	background: var(--com-blue) !important;
}
body[data-page='community-directory'] .community-alpha a.is-disabled {
	opacity: 0.28 !important;
	pointer-events: none !important;
}

/* Katalog */
body[data-page='community-directory'] .community-directory-head {
	margin: 0 0 9px !important;
	padding: 0 2px 10px !important;
	display: flex !important;
	align-items: end !important;
	justify-content: space-between !important;
	gap: 14px !important;
	border-bottom: 1px solid var(--com-line) !important;
}
body[data-page='community-directory'] .community-directory-head__eyebrow {
	display: block !important;
	margin: 0 0 3px !important;
	color: #1769df !important;
	font-size: 7px !important;
	font-weight: 700 !important;
	letter-spacing: 0.1em !important;
	text-transform: uppercase !important;
}
body[data-page='community-directory'] .community-directory-head h2 {
	margin: 0 !important;
	color: var(--com-ink) !important;
	font-size: 17px !important;
	line-height: 1.1 !important;
	font-weight: 700 !important;
	letter-spacing: -0.014em !important;
}
body[data-page='community-directory'] .community-directory-head small,
body[data-page='community-directory'] .community-directory-head strong {
	color: var(--com-muted) !important;
	font-size: 9px !important;
	line-height: 1.3 !important;
	font-weight: 500 !important;
}
body[data-page='community-directory'] .community-directory {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 10px !important;
}
body[data-page='community-directory'] .community-row {
	position: relative !important;
	min-width: 0 !important;
	min-height: 132px !important;
	padding: 12px !important;
	display: grid !important;
	grid-template-columns: 1fr auto !important;
	grid-template-areas: 'person action' 'role role' 'meta meta' !important;
	gap: 8px 10px !important;
	border: 1px solid var(--com-line) !important;
	border-radius: 15px !important;
	background: #fff !important;
	box-shadow: 0 7px 20px rgba(17, 39, 75, 0.04) !important;
	transition:
		transform 0.16s ease,
		border-color 0.16s ease,
		box-shadow 0.16s ease !important;
}
body[data-page='community-directory'] .community-row::before {
	content: '' !important;
	position: absolute !important;
	inset: 10px auto 10px 0 !important;
	width: 2px !important;
	border-radius: 2px !important;
	background: linear-gradient(180deg, #1769df, #18a9dd) !important;
}
body[data-page='community-directory'] .community-row:hover {
	transform: translateY(-1px) !important;
	border-color: #bfd0e6 !important;
	box-shadow: 0 12px 28px rgba(17, 39, 75, 0.07) !important;
}
body[data-page='community-directory'] .community-row__person {
	grid-area: person !important;
	display: flex !important;
	align-items: center !important;
	gap: 9px !important;
	min-width: 0 !important;
}
body[data-page='community-directory'] .community-row__action {
	grid-area: action !important;
	display: flex !important;
	align-items: flex-start !important;
	justify-content: flex-end !important;
}
body[data-page='community-directory'] .community-row__role {
	grid-area: role !important;
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 4px !important;
}
body[data-page='community-directory'] .community-row__meta {
	grid-area: meta !important;
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 4px !important;
}
body[data-page='community-directory'] .community-avatar {
	width: 43px !important;
	height: 43px !important;
	min-width: 43px !important;
	overflow: hidden !important;
	display: grid !important;
	place-items: center !important;
	border: 1px solid #d6e3f2 !important;
	border-radius: 12px !important;
	background: linear-gradient(135deg, #1769df, #18a9dd) !important;
	color: #fff !important;
	font-size: 11px !important;
	font-weight: 700 !important;
}
body[data-page='community-directory'] .community-avatar img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}
body[data-page='community-directory'] .community-row__main {
	min-width: 0 !important;
}
body[data-page='community-directory'] .community-row__nameline {
	display: flex !important;
	align-items: center !important;
	gap: 5px !important;
	min-width: 0 !important;
}
body[data-page='community-directory'] .community-row__icon {
	display: none !important;
}
body[data-page='community-directory'] .community-row h3 {
	margin: 0 !important;
	overflow: hidden !important;
	color: var(--com-ink) !important;
	font-size: 13px !important;
	line-height: 1.2 !important;
	font-weight: 650 !important;
	letter-spacing: -0.005em !important;
	white-space: nowrap !important;
	text-overflow: ellipsis !important;
}
body[data-page='community-directory'] .community-row__main p {
	margin: 3px 0 0 !important;
	overflow: hidden !important;
	color: var(--com-muted) !important;
	font-size: 9px !important;
	line-height: 1.25 !important;
	font-weight: 500 !important;
	white-space: nowrap !important;
	text-overflow: ellipsis !important;
}
body[data-page='community-directory'] .community-badge,
body[data-page='community-directory'] .community-row__meta > span {
	min-height: 22px !important;
	padding: 0 7px !important;
	display: inline-flex !important;
	align-items: center !important;
	border: 1px solid #d9e5f1 !important;
	border-radius: 999px !important;
	background: #f8fbff !important;
	color: #607087 !important;
	font-size: 7.5px !important;
	line-height: 1 !important;
	font-weight: 600 !important;
	white-space: nowrap !important;
}
body[data-page='community-directory'] .community-row__looking {
	color: #0b8c61 !important;
	border-color: #c9efdf !important;
	background: #effbf6 !important;
}
body[data-page='community-directory'] .community-row__action a,
body[data-page='community-directory'] .community-row__action span {
	min-height: 29px !important;
	padding: 0 9px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border: 1px solid var(--com-line) !important;
	border-radius: 9px !important;
	background: #f7faff !important;
	color: #1769df !important;
	font-size: 8px !important;
	font-weight: 650 !important;
	text-decoration: none !important;
	white-space: nowrap !important;
}
body[data-page='community-directory'] .community-empty {
	padding: 24px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
	align-items: center !important;
	justify-content: center !important;
	border: 1px dashed var(--com-line-strong) !important;
	border-radius: 14px !important;
	background: #f8fbff !important;
	color: var(--com-muted) !important;
}
body[data-page='community-directory'] .community-empty strong {
	color: var(--com-ink) !important;
	font-size: 13px !important;
}
body[data-page='community-directory'] .community-empty span {
	font-size: 10px !important;
}
body[data-page='community-directory'] .community-pagination {
	margin-top: 12px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
}
body[data-page='community-directory'] .community-pagination a,
body[data-page='community-directory'] .community-pagination span {
	min-height: 32px !important;
	padding: 0 10px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border: 1px solid var(--com-line) !important;
	border-radius: 9px !important;
	background: #fff !important;
	color: #52617a !important;
	font-size: 8.5px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}
body[data-page='community-directory'] .community-pagination a.is-disabled {
	opacity: 0.35 !important;
	pointer-events: none !important;
}

@media (max-width: 1180px) {
	body[data-page='community-directory'] .community-page {
		width: min(1120px, calc(100% - 36px)) !important;
	}
	body[data-page='community-directory'] .community-page-head__stats {
		grid-template-columns: repeat(2, minmax(86px, 1fr)) !important;
	}
	body[data-page='community-directory'] .community-directory {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 720px) {
	body[data-page='community-directory'] .community-page {
		width: calc(100% - 20px) !important;
		padding: 12px 0 38px !important;
	}
	body[data-page='community-directory'] .community-page-head {
		height: auto !important;
		min-height: 0 !important;
		padding: 17px !important;
		margin-bottom: 10px !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 12px !important;
		border-radius: 18px !important;
	}
	body[data-page='community-directory'] .community-page-head__eyebrow {
		min-height: 20px !important;
		padding: 0 8px !important;
		margin-bottom: 6px !important;
		font-size: 6.8px !important;
		letter-spacing: 0.085em !important;
	}
	body[data-page='community-directory'] .community-page-head h1 {
		font-size: 28px !important;
		letter-spacing: -0.018em !important;
	}
	body[data-page='community-directory'] .community-page-head__stats {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
		gap: 5px !important;
	}
	body[data-page='community-directory'] .community-head-stat {
		min-width: 0 !important;
		height: 48px !important;
		padding: 7px 5px !important;
		border-radius: 9px !important;
	}
	body[data-page='community-directory'] .community-head-stat strong {
		font-size: 14px !important;
	}
	body[data-page='community-directory'] .community-head-stat span {
		overflow: hidden !important;
		font-size: 5.8px !important;
		letter-spacing: 0.02em !important;
		text-overflow: ellipsis !important;
	}
	body[data-page='community-directory'] .community-tabs--primary {
		min-height: 42px !important;
		margin-bottom: 10px !important;
		padding: 5px !important;
		border-radius: 12px !important;
	}
	body[data-page='community-directory'] .community-tabs--primary a {
		min-height: 31px !important;
		padding: 0 10px !important;
		font-size: 9px !important;
	}
	body[data-page='community-directory'] .community-panel {
		padding: 0 10px 12px !important;
		border-radius: 16px !important;
	}
	body[data-page='community-directory'] .community-panel__head {
		margin: 0 -10px 10px !important;
		padding: 10px 11px !important;
		border-radius: 15px 15px 0 0 !important;
	}
	body[data-page='community-directory'] .community-panel__head h2 {
		font-size: 14px !important;
	}
	body[data-page='community-directory'] .community-panel__head p {
		font-size: 8.5px !important;
	}
	body[data-page='community-directory'] .community-toolbar--directory {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 7px 6px !important;
	}
	body[data-page='community-directory'] .community-toolbar__search {
		grid-column: 1 / -1 !important;
	}
	body[data-page='community-directory'] .community-toolbar button {
		grid-column: 1 / 2 !important;
	}
	body[data-page='community-directory'] .community-clear {
		grid-column: 2 / 3 !important;
	}
	body[data-page='community-directory'] .community-toolbar input,
	body[data-page='community-directory'] .community-toolbar select,
	body[data-page='community-directory'] .community-toolbar button,
	body[data-page='community-directory'] .community-clear {
		height: 37px !important;
		min-height: 37px !important;
		border-radius: 9px !important;
		font-size: 9px !important;
	}
	body[data-page='community-directory'] .community-toolbar label > span {
		font-size: 6.3px !important;
	}
	body[data-page='community-directory'] .community-alpha {
		margin-bottom: 10px !important;
		padding: 5px !important;
	}
	body[data-page='community-directory'] .community-directory-head {
		align-items: flex-start !important;
	}
	body[data-page='community-directory'] .community-directory-head strong {
		max-width: 42% !important;
		text-align: right !important;
	}
	body[data-page='community-directory'] .community-directory {
		grid-template-columns: 1fr !important;
		gap: 8px !important;
	}
	body[data-page='community-directory'] .community-row {
		min-height: 116px !important;
		padding: 10px !important;
		border-radius: 13px !important;
	}
}

@media (max-width: 390px) {
	body[data-page='community-directory'] .community-page-head__stats {
		gap: 4px !important;
	}
	body[data-page='community-directory'] .community-head-stat span {
		display: none !important;
	}
	body[data-page='community-directory'] .community-head-stat {
		height: 40px !important;
	}
	body[data-page='community-directory'] .community-toolbar--directory {
		gap: 6px 5px !important;
	}
}