/* Document settings */
body { 
  display: flex;
  flex-direction: column; /* stack header then main */
  justify-content: flex-start;
  align-items: center; /* center main content horizontally */
  min-height: 100vh;
}


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

.page {
  width: 30vw; /* free space on left & right side of page */
  margin: 20px auto; /* place page centered and add spacing from header */
  min-height: 0; 
}

/* Ensure the topbar spans full width at the top */
.topbar {
  width: 100%;
  box-sizing: border-box;
}

.login-card { 
  border: 1px 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 */
.login-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 {
  filter: invert(1);
}