/**
 * Team-logo upload widget (editTeam) and inline display frame (detailTeam).
 * Both share a 350 × 130 max box (no fixed aspect ratio) so what the user sees
 * while editing matches the final team_detail rendering. The image keeps its own
 * proportions via object-fit:contain inside the box.
 */

.team-logo-widget {
	margin: 0 0 24px;
}
.tx-frontendformslib-example {
	display: none;
}

.team-logo-widget > label {
	display: block;
	margin: 0 0 12px;
	font-size: inherit;
	font-weight: bold;
	color: inherit;
}

.team-logo-frame,
.team-logo-display {
	width: 230px;
	height: 130px;
	background: #fff;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	overflow: hidden;
}

.team-logo-frame .team-logo-preview,
.team-logo-display img {
	max-width: 230px;
	max-height: 130px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.team-logo-frame .team-logo-empty {
	color: #888;
	font-size: 0.85em;
	font-style: italic;
}

.team-logo-hint {
	margin: 24px 0 12px;
	padding-top: 10px;
	font-size: 0.85em;
	color: #555;
}
.team-logo-upload,
.team-logo-delete,
.team-logo-save,
.team-logo-cancel {
	min-width: 90px;
}
.team-logo-save {
	background-color: var(--fsg_green);
	color: #fff;
}
.team-logo-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.team-logo-status {
	margin: 10px 0 0;
	font-size: 0.9em;
	min-height: 1.2em;
}
.team-logo-status[data-kind="ok"]    { color: #0a0; }
.team-logo-status[data-kind="error"] { color: #b00; }
.team-logo-status[data-kind="info"]  { color: #555; }
.team-logo-display {
	margin: 0 auto;
}
.team-logo-pane-crop[hidden] { display: none; }
.team-logo-pane-crop {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.team-logo-crop-stage {
	width: 100%;
	max-width: 480px;
	min-height: 240px;   
	background: #222;
	margin-bottom: 10px;
	overflow: hidden;
}
.team-logo-crop-stage img {
	display: block;
	max-width: 100%;
}

.team-logo-crop-stage .cropper-line {
	background-color: #39f;
	opacity: 0.25;
}
.team-logo-crop-stage .cropper-point {
	width: 12px;
	height: 12px;
	background-color: #fff;
	border: 2px solid #000;
	border-radius: 2px;
	opacity: 1;
}
.team-logo-crop-stage .cropper-point.point-se {
	width: 12px;
	height: 12px;
}
.team-logo-crop-stage .cropper-view-box {
	outline: 1px solid #39f;
}
.team-logo-crop-size {
	margin: 4px 0;
	font-size: 0.9em;
	font-variant-numeric: tabular-nums;
	color: #000;
}
.team-logo-crop-size.too-small {
	color: #c00;
	font-weight: bold;
}
.team-logo-ratios {
	display: flex;
	gap: 6px;
	margin: 6px 0 4px;
}
.team-logo-ratio {
	padding: 3px 10px;
	font-size: 0.85em;
	border: 1px solid #aaa;
	background: #fff;
	cursor: pointer;
	border-radius: 12px;
	line-height: 1.4;
}
.team-logo-ratio:hover { background: #f0f0f0; }
.team-logo-ratio.is-active {
	background: #39f;
	color: #fff;
	border-color: #39f;
}
.team-logo-ratio.is-active:hover { background: #28e; }