/*
------------------------------------------------
Header
------------------------------------------------
*/

.tl-app-header {
	width: 100%;

	background: var(--tl-color-surface);
	border-bottom: 1px solid var(--tl-color-border-soft);
}


.tl-app-header-inner {
	display: flex;
	align-items: center;
	gap: 12px;

	width: min(
		calc(100% - (var(--tl-page-padding) * 2)),
		var(--tl-content-width)
	);

	margin-inline: auto;
	padding: 12px 0;

	box-sizing: border-box;
}


/*
------------------------------------------------
Trainer Photo
------------------------------------------------
*/

.tl-app-trainer-photo {
	flex: 0 0 44px;
}


.tl-app-trainer-photo img {
	display: block;

	width: 44px;
	height: 44px;

	object-fit: cover;
	border-radius: var(--tl-radius);
}


/*
------------------------------------------------
Identity
------------------------------------------------
*/

.tl-app-identity {
	flex: 1 1 auto;
	min-width: 0;
}


.tl-app-title {
	font-size: 1.1875em;
	font-weight: 700;
	line-height: 1.12;
}


.tl-app-title a,
.tl-app-title a:visited {
	color: var(--tl-color-text);
	text-decoration: none;
}


.tl-app-meta {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px;

	margin-top: 3px;

	color: var(--tl-color-text-secondary);

	font-size: .75em;
	line-height: 1.3;
}


.tl-app-business-name,
.tl-app-business-name:visited {
	color: var(--tl-color-text-secondary);
	text-decoration: none;
}


.tl-app-business-name:hover,
.tl-app-business-name:focus {
	color: var(--tl-color-text);
}


.tl-app-trainer-name {
	color: var(--tl-color-text-secondary);

	font-size: 1em;
	font-weight: 500;
	line-height: inherit;
}


.tl-app-meta-separator {
	color: var(--tl-color-border);
}


.tl-app-profile-photo-link,
.tl-app-profile-photo-link:visited {
	color: var(--tl-color-text-secondary);

	font-size: 1em;
	font-weight: 400;
	line-height: inherit;
	text-decoration: none;
}


.tl-app-profile-photo-link:hover,
.tl-app-profile-photo-link:focus {
	color: var(--tl-color-primary);
}


/*
------------------------------------------------
Header Action
------------------------------------------------
*/

.tl-app-header-action {
	display: flex;
	align-items: center;
	gap: 8px;

	flex: 0 0 auto;

	margin-left: auto;
}


/*
------------------------------------------------
Logout
------------------------------------------------
*/

.tl-app-logout {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 34px;
	padding: 6px 10px;

	box-sizing: border-box;

	background: transparent;
	border: 1px solid var(--tl-color-border);
	border-radius: var(--tl-radius);

	font-size: .75em;
	font-weight: 600;
	text-decoration: none;
}

a.tl-app-logout,
a.tl-app-logout:visited {
	color: var(--tl-color-text-secondary);
}

a.tl-app-logout:hover,
a.tl-app-logout:focus {
	background: var(--tl-color-background);
	border-color: var(--tl-color-border);
	color: var(--tl-color-text);
}


/*
------------------------------------------------
Larger Screens
------------------------------------------------
*/

@media (min-width: 768px) {

	.tl-app-header-inner {
		gap: 12px;
		padding: 12px 0;
	}


	.tl-app-trainer-photo {
		flex-basis: 46px;
	}


	.tl-app-trainer-photo img {
		width: 46px;
		height: 46px;
	}


	.tl-app-title {
		font-size: 1.25em;
	}

}


/*
------------------------------------------------
Trainer Photo Link
------------------------------------------------
*/

.tl-app-trainer-photo a {
	display: block;

	text-decoration: none;
}

.tl-app-admin-link,
.tl-app-admin-link:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 34px;
	padding: 6px 10px;

	color: var(--tl-color-text-secondary);

	font-size: .75em;
	font-weight: 600;
	text-decoration: none;
}


.tl-app-admin-link:hover,
.tl-app-admin-link:focus {
	color: var(--tl-color-text);
}