/* Layout matching Nextcloud 33 LoginBox / LoginForm (as on ba.hubincloud.com) */
:root {
  --default-clickable-area: 34px;
}

body#body-login {
  min-height: 100%;
}

/* Same size as dashboard panels / real NC login-box */
.login-box {
  width: 320px;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  margin: 0 auto 12px;
  padding: calc(3 * var(--default-grid-baseline, 4px));
}

.login-form {
  text-align: start;
  font-size: 1rem;
  margin: 0;
  width: 100%;
}

.login-form__fieldset {
  width: 100%;
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.login-form__headline {
  text-align: center;
  overflow-wrap: anywhere;
  /* guest.css h2 — 20px; rem завязан на --default-font-size:15px, поэтому не 1.25rem */
  font-size: 20px;
  font-weight: bold;
  line-height: 140%;
  margin: 0 0 12px;
  color: var(--color-main-text);
}

.login-form .input-field {
  margin-block: 6px 0;
  width: 100%;
}

.login-form .input-field__main-wrapper {
  height: var(--default-clickable-area);
  padding: var(--border-width-input-focused, 2px);
  position: relative;
}

.login-form .input-field__input {
  height: 100%;
  width: 100%;
  border: 0;
  border-radius: var(--border-radius-element, 8px);
  padding-inline: 12px;
  background-color: var(--color-main-background);
  color: var(--color-main-text);
  font-size: 15px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-border-maxcontrast), 65% transparent),
    0 -1px var(--color-border-maxcontrast);
  outline: none;
  box-sizing: border-box;
}

.login-form .input-field__input--with-trailing {
  padding-inline-end: calc(var(--default-clickable-area) - 2px);
}

.login-form .input-field__input:focus {
  box-shadow: 0 0 0 2px var(--color-main-text);
}

.login-form .input-field__trailing-button {
  position: absolute;
  top: var(--border-width-input-focused, 2px);
  inset-inline-end: var(--border-width-input-focused, 2px);
  width: calc(var(--default-clickable-area) - 4px);
  height: calc(var(--default-clickable-area) - 4px);
  border: 0;
  border-radius: calc(var(--border-radius-element, 8px) - 2px);
  background: transparent;
  color: var(--color-main-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.login-form .input-field__trailing-button:hover {
  background-color: var(--color-background-hover, #f5f5f5);
}

.login-form .input-field__trailing-button svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.login-form .input-field__label {
  position: absolute;
  inset-inline-start: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-maxcontrast);
  pointer-events: none;
  transition: all .1s ease;
  background: transparent;
  padding: 0 2px;
  font-size: 15px;
  line-height: 1.2;
}

.login-form .input-field__input:focus + .input-field__label,
.login-form .input-field__input:not(:placeholder-shown) + .input-field__label {
  top: 0;
  font-size: 12px;
  background: var(--color-main-background);
  color: var(--color-main-text);
}

.login-form .input-field__helper-text-message {
  color: var(--color-text-error, var(--color-error-text));
  font-size: 13px;
  margin: 2px 2px 0;
  text-align: start;
}

.login-form .input-field--error .input-field__input {
  box-shadow: 0 0 0 2px var(--color-element-error, #c90000);
}

.login-form__remember {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  margin: 0;
  padding: 0 10px;
  min-height: var(--default-clickable-area);
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  border-radius: var(--border-radius-element, 8px);
  color: var(--color-main-text);
  font-size: 15px;
  user-select: none;
  cursor: pointer;
  transition: background-color .1s ease;
}

.login-form__remember:hover {
  background-color: var(--color-background-hover, #f5f5f5);
}

.login-form__remember input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--color-primary-element);
  cursor: pointer;
  flex-shrink: 0;
  outline: none !important;
  box-shadow: none !important;
}

.login-form__remember input:focus,
.login-form__remember input:focus-visible,
.login-form__remember input:active {
  outline: none !important;
  box-shadow: none !important;
}

.login-form__submit {
  margin-top: .5rem;
}

.button-vue {
  --button-size: var(--default-clickable-area);
  --button-inner-size: calc(var(--button-size) - 4px);
  position: relative;
  width: 100%;
  min-height: var(--button-size);
  height: var(--button-size);
  border: 0;
  border-radius: var(--border-radius-element, 8px);
  font-weight: 700;
  font-size: var(--default-font-size, 15px);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color .1s ease;
  box-sizing: border-box;
}

.button-vue__wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 0;
}

.button-vue__icon {
  height: var(--button-inner-size);
  width: var(--button-inner-size);
  min-height: var(--button-inner-size);
  min-width: var(--button-inner-size);
  display: flex;
  justify-content: center;
  align-items: center;
}

.button-vue__icon svg {
  /* vue-material-design-icons ArrowRight default size */
  height: 20px;
  width: 20px;
  fill: currentColor;
}

.button-vue__text {
  font-weight: bold;
  padding-inline: var(--default-grid-baseline, 4px);
  white-space: nowrap;
}

.button-vue--vue-primary {
  background-color: var(--color-primary-element);
  border-color: var(--color-primary-element-hover);
  color: var(--color-primary-element-text, #fff);
}

.button-vue--vue-primary:hover,
.button-vue--vue-primary:focus {
  background-color: var(--color-primary-element-hover);
}

.button-vue--vue-tertiary {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-main-text);
  text-decoration: none;
  box-sizing: border-box;
  padding-inline: 12px;
}

.button-vue--vue-tertiary:hover,
.button-vue--vue-tertiary:focus {
  background-color: var(--color-background-hover, #f5f5f5);
}

a.button-vue {
  text-decoration: none;
}

.login-form__actions {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.25rem;
  width: 100%;
}

.guest-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.notecard.error {
  --note-background: var(--color-error);
  --note-theme: var(--color-error-text);
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  text-align: start;
}

@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%,60% { transform: translateX(-4px); }
  40%,80% { transform: translateX(4px); }
}
.shake { animation: shake .35s ease; }