/* Shared first-paint authentication gate for all backoffice roles. */
body.auth-locked {
  overflow: hidden;
  background: #edf3f9;
}

body.auth-locked > header,
body.auth-locked > .layout,
body.auth-locked > dialog,
body.auth-locked > .toast,
body.auth-locked > #paymentMask {
  display: none !important;
}

body.auth-locked .login-mask {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background-color: #edf3f9;
  background-image:
    linear-gradient(rgba(43, 82, 120, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43, 82, 120, 0.055) 1px, transparent 1px);
  background-size: 32px 32px;
}

.login-mask .login-panel {
  width: min(430px, 100%);
  border: 1px solid #d4e0ec;
  border-radius: 10px;
  padding: 30px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(25, 52, 79, 0.15);
}

.login-mask .login-brand-row {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 30px;
}

.login-mask .login-brand-mark {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #102b45;
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.login-mask .login-brand-name {
  color: #102b45;
  font-size: 19px;
  font-weight: 900;
  letter-spacing: 0;
}

.login-mask .login-role {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 10px;
  background: #eaf3ff;
  color: #155d9c;
  font-size: 12px;
  font-weight: 800;
}

.login-mask .login-title {
  margin: 16px 0 6px;
  color: #14283e;
  font-size: 26px;
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: 0;
}

.login-mask .login-copy {
  margin: 0 0 24px;
  color: #687b90;
  font-size: 13px;
  line-height: 1.65;
}

.login-mask .login-field {
  display: grid;
  gap: 7px;
  margin-top: 15px;
}

.login-mask .login-field label {
  color: #3e5369;
  font-size: 12px;
  font-weight: 700;
}

.login-mask .login-field input {
  width: 100%;
  height: 46px;
  border: 1px solid #cbd8e6;
  border-radius: 7px;
  padding: 0 13px;
  background: #fbfdff;
  color: #14283e;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.login-mask .login-field input:hover {
  border-color: #aebfd0;
}

.login-mask .login-field input:focus {
  border-color: #2e7fc2;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(46, 127, 194, 0.13);
}

.login-mask .login-submit {
  width: 100%;
  height: 46px;
  margin-top: 22px;
  border: 0;
  border-radius: 7px;
  background: #1769a9;
  color: #ffffff;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}

.login-mask .login-submit:hover {
  background: #12578e;
}

.login-mask .login-submit:active {
  transform: translateY(1px);
}

.login-mask .login-submit:disabled {
  cursor: wait;
  opacity: 0.65;
}

.login-mask .login-error {
  min-height: 20px;
  margin: 10px 0 0;
  color: #b83232;
  font-size: 12px;
  line-height: 1.5;
}

.login-mask .login-foot {
  margin: 20px 0 0;
  padding-top: 17px;
  border-top: 1px solid #e6edf4;
  color: #8292a4;
  font-size: 11px;
  line-height: 1.6;
}

@media (max-width: 520px) {
  body.auth-locked .login-mask {
    align-items: flex-start;
    padding: 18px 14px;
    overflow-y: auto;
  }

  .login-mask .login-panel {
    margin-top: max(18px, 7vh);
    padding: 24px 20px;
  }

  .login-mask .login-brand-row {
    margin-bottom: 24px;
  }
}