/* Document settings */
body { 
	display: flex;
	justify-content: center; /* Horizontal centering */
	align-items: center; /* Vertical centering */
}


/* Generell page structure: one color in the center */

.page {
  width: 30vw;								/* free space on left & right side of page */
  margin: 0 auto;							/* place columns horizontally centered */
  min-height: 0; 
}

.topbar {
  background: var(--color-primary);  /* blue background, old: rgb(99,120,255)*/
  color: var(--textcolor-primary);	 /* text color white */  
  padding: 10px 16px;         					   /* padding around content on all sides */
  display: flex;
  text-align: center;  
  font-size: clamp(10px, 3vw, 20px); 
  font-weight: 600;
}

.register-card { 
  border: 2px solid var(--color-primary);				
}              


/* Area showing ?-Avatar */
.avatar-area {
  padding: 40px;
  background: var(--color-secondary);
  display: flex;
  flex-direction: column;
  align-items: center;      			     /* place avatar horizontally centered in the card */
}

/* ?-Avatar */
.register-avatar {
  width: 130px; 
  height: 130px;
  font-size: 40px;      
}


/* Input-Area: input-fields for name and password */
.input-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: var(--textcolor-primary);
  padding: 25px;
  background: var(--background-secondary);
}

.input-block label {
  color: var(--textcolor-primary);                      				/* change text color of form's default-text  */
  font-weight: 600;                     			
}
.input-block input {
  margin-top: 7px;
  border: 1px solid var(--color-secondary);
}


/* Submit button and register link */

.submit-block{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: baseline;
  margin-top: 5px;
}

/* Global anchor defaults (keep for other areas) */
a {
  color: var(--textcolor-secondary);
  text-decoration: underline;
}
a:hover {
  color: var(--textcolor-primary);
}

/* In the form submit area we prefer a non-underlined, neutral link */
.submit-block a {
  color: var(--textcolor-primary);
  text-decoration: none;
}
.submit-block a:hover {
  color: var(--textcolor-secondary);
}

/* Color password-input reveal-eye in white */
#password::-ms-reveal, #password-repeat::-ms-reveal {
  filter: invert(1);
}

/* Layout override: place header on top and center the main page */
body.layout-topbar {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  min-height: 100vh;
}
.page.layout-topbar {
  margin: 20px auto !important;
}
.topbar.layout-topbar {
  width: 100%;
  box-sizing: border-box;
}

/* Direct layout override: ensure header on top and page centered */
body {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  min-height: 100vh !important;
}
.page {
  margin: 20px auto !important;
}
.topbar {
  width: 100% !important;
  box-sizing: border-box !important;
}