/*——————————————————————————————————————————————————————————————————————————————————————————————————
  APP HEADER
  Společná hlavička aplikace pro všechny přihlášené stránky
——————————————————————————————————————————————————————————————————————————————————————————————————*/

.app-header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 20px;
	background: #4A90E2;
	color: #fff;
}

.app-header__title{
	margin: 0;
	font-size: 24px;
	font-weight: 600;
}

.app-header__avatar{
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	border: none;
	cursor: pointer;
	transition: all 0.2s ease;
}

.app-header__avatar:hover{
	background: rgba(255, 255, 255, 0.4);
}


/*——————————————————————————————————————————————————————————————————————————————————————————————————
  APP CONTAINER
  Hlavní kontejner pro obsah stránek
——————————————————————————————————————————————————————————————————————————————————————————————————*/

.app-container{
	min-height: calc(100vh - 72px);
	background: #f5f5f5;
}


/*——————————————————————————————————————————————————————————————————————————————————————————————————
  NAVIGATION HEADER (p.komp.nav_header.php)
  Společná komponenta pro navigační header se zpět tlačítkem
——————————————————————————————————————————————————————————————————————————————————————————————————*/

.al__header{
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 20px 20px 16px 20px;
	background: #fff;
	border-bottom: 1px solid #e0e0e0;
}

.al__header .vp__back{
	font-size: 24px;
	color: #333;
	text-decoration: none;
	font-weight: 300;
	line-height: 1;
	padding: 4px 8px;
}

.al__project-name{
	margin: 0;
	font-size: 24px;
	font-weight: 600;
	color: #333;
}


/*——————————————————————————————————————————————————————————————————————————————————————————————————
  RESPONSIVE
——————————————————————————————————————————————————————————————————————————————————————————————————*/
@media (max-width: 768px){
	.app-header{
		padding: 12px 16px;
	}

	.app-header__title{
		font-size: 20px;
	}

	.al__header{
		padding: 16px 16px 12px 16px;
	}

	.al__project-name{
		font-size: 20px;
	}
}