/* ---------- 登录，XAF 卡片 ---------- */

/*
   故意最后附加。上面的两个登录部分携带此卡片的早期版本；较晚的相同特异性规则胜出，
   所以此块是决定的。将三个折叠为一个值得做，但不是重新样式的副作用——这个文件已经
   在今天的一个过于雄心勃勃的合并中丢失过一次。

   参考是 XAF 自己的登录：紧凑的边框面板、左对齐的标题在一行指示上、
   每个字段上方的标题，以及全宽的主要操作。
*/
.atlas-login-card {
    --login-line: #d9dde2;
    --login-muted: #6b7480;

    margin: auto;
    padding: 24px;
    min-width: 360px;
    max-width: 360px;
    border: 1px solid var(--login-line);
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 2px 6px rgb(0 0 0 / 8%);
}

:root[data-theme="dark"] .atlas-login-card {
    --login-line: rgb(255 255 255 / 18%);
    --login-muted: #9aa4af;

    background-color: #1f1f1f;
}

/* 左对齐，XAF 风格——下面没有品牌规则，旧卡片绘制并且这个必须取消。 */
.atlas-login-head {
    margin-bottom: 16px;
    padding-bottom: 0;
    border-bottom: 0;
    text-align: left;
}

.atlas-login-title {
    font-size: 17px;
    font-weight: 600;
    line-height: 24px;
}

.atlas-login-subtitle {
    margin-top: 8px;
    color: var(--login-muted);
    font-size: 13px;
    line-height: 18px;
}

/* DxFormLayout 在编辑器上方绘制的标题。 */
.atlas-login-layout .dxbl-fl-cpt,
.atlas-login-layout label {
    font-size: 13px;
}

/*
   Chrome 用自己的浅蓝色绘制自动填充的字段并忽略 background-color——
   这是登录截图显示的色调，不是任何人选择的样式。与旧本地输入使用的相同 inset-shadow 技巧，
   针对套件的 input 元素。
*/
.atlas-login-field input:-webkit-autofill,
.atlas-login-field input:-webkit-autofill:hover,
.atlas-login-field input:-webkit-autofill:focus {
    box-shadow: 0 0 0 100px #fff inset;
    -webkit-text-fill-color: #17212b;
    caret-color: #17212b;
}

:root[data-theme="dark"] .atlas-login-field input:-webkit-autofill,
:root[data-theme="dark"] .atlas-login-field input:-webkit-autofill:hover,
:root[data-theme="dark"] .atlas-login-field input:-webkit-autofill:focus {
    box-shadow: 0 0 0 100px #1f1f1f inset;
    -webkit-text-fill-color: #f5f5f5;
    caret-color: #f5f5f5;
}

/* 被拒尝试消息，在密码和复选框之间——眼睛已经在的地方，而不是卡片顶部。 */
.atlas-login-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.55rem;
    border: 1px solid #991700;
    border-radius: 4px;
    background-color: #feddd7;
    color: #4a4a4a;
    font-size: 13px;
    line-height: 18px;
}

.atlas-login-alert .atlas-icon {
    flex: 0 0 auto;
    color: #991700;
}

/* 逐字段验证，其自己的元素而不是 ValidationMessage 的标记，所以间距在字段有效时折叠为空。 */
.atlas-field-error {
    color: #b91c1c;
    font-size: 12px;
    line-height: 16px;
}

.atlas-field-error:not(:empty) {
    margin-top: 0.25rem;
}

.atlas-login-remember {
    font-size: 13px;
}


.atlas-vicon--large{
  font-size: 20px;
}


/* ---------- 移动端：登录卡贴合窄屏 ----------
   03-signin 里的 min-width: 28rem 在 360px 手机上直接横向溢出。 */
@media (max-width: 560px) {
  .atlas-login {
    min-width: 0;
    width: 100%;
  }

  .atlas-auth {
    padding: 1rem;
  }

  .atlas-login-card {
    padding: 1.5rem 1.25rem;
  }
}