/* ---------- 登录 ---------- */

/*
   XAF的Fluent登录，用纯CSS重建。

   页面静态呈现所以可以写auth cookie，这排除了组件套件 — 所以Fluent外观必须手工复制。
   使其读作Fluent而非"居中表单"的是特定的：32px控件高度、4px半径、卡上一个提升
   其他地方无、聚焦字段上2px重音下划线而非发光、单个填充主要操作。

   颜色是纯值而非组件套件的自定义属性。应用已在使用。
*/
.atlas-login{
  min-width: 28rem;
}
.atlas-auth {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem;
  /* Fluent在较暗的画布上设置登录卡，不在卡白。 */
  background-color: #fff;
  background-color: #f3f4f6;
  color: #111;
}

.atlas-login-card {
  width: min(32rem, 100%);
  padding: 2rem;
  border-radius: 8px;
  background-color: #fff;
  /* 深度-16：卡漂浮在画布上，内部的任何东西都不漂浮。 */
  box-shadow: 0 6.4px 14.4px rgba(0, 0, 0, 0.13), 0 1.2px 3.6px rgba(0, 0, 0, 0.1);
}

.atlas-login-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid currentColor;
}

/* 代替标志。填充的重音方块是Fluent应用标识形状，它给卡一个饱和元素而不是裸字标。 */
.atlas-login-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 6px;
  background-color: #fff;
  color: currentColor;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
}

.atlas-login-names {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

/* 登录卡 Logo：亮/暗各一张（.atlas-theme-*-only 显隐），高度锁定按比例缩放。 */
.atlas-login-logo {
  margin-bottom: 0.75rem;
}

.atlas-login-logo img {
  display: block;
  height: 2.25rem;
  width: auto;
}

/* 系统名称行：登录卡头部、"登录"标题之上，安静的一行品牌字。 */
.atlas-login-appname {
  margin-bottom: 0.375rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--dxds-color-content-neutral-subdued-rest);
}

.atlas-login-title {
  font-size: 1.825rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.atlas-login-sub {
  color: currentColor;
  font-size: 0.8125rem;
}

.atlas-login-heading {
  margin: 1.25rem 0 1rem;
  font-size: 1rem;
  font-weight: 600;
}

.atlas-field {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

/* Fluent标签坐在字段上方以正文大小和半粗 — 不是很多表单使用的小灰色标题。 */
.atlas-field-label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
  font-weight: 600;
}


.atlas-input-wrap {
  position: relative;
  display: block;
}

.atlas-input-wrap::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 2px;
  border-end-start-radius: 4px;
  border-end-end-radius: 4px;
  background-color: #fff;
  transform: scaleX(0);
  /* Fluent的decelerateMax曲线。 */
  transition: transform 200ms cubic-bezier(0.1, 0.9, 0.2, 1);
}

.atlas-input-wrap:focus-within::after {
  transform: scaleX(1);
}


.atlas-input-wrap {
  width: 100%;
}

/* 无环、无边框颜色改变 — 上面的下划线是整个焦点信号，正如Fluent做的。 */
.atlas-input:focus {
  outline: none;
}

/*
   Chrome以其自身背景绘制自动填充字段并忽略background-color，在深色样本上在其他暗卡中留下两条浅蓝条。
   字段大小的内部阴影是覆盖它的长期方式，-webkit-text-fill-color是文本的匹配覆盖，
   Chrome也强制它。这是页面通常处于的状态 — 密码管理器在看到前填充它。

   掩码必须是字段的背景且文本是其颜色。两者都是currentColor，这是文本颜色：在深色样本上
   在字段上绘制白块然后用白写值。
*/
.atlas-input:-webkit-autofill,
.atlas-input:-webkit-autofill:hover,
.atlas-input:-webkit-autofill:focus {
  box-shadow: 0 0 0 100px var(--atlas-field-bg) inset;
  -webkit-text-fill-color: currentColor;
  caret-color: currentColor;
}

.atlas-input.invalid {
  border-color: #b91c1c;
  border-block-end-color: #b91c1c;
}

.atlas-login-remember {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.25rem 0 1.25rem;
  font-size: 0.875rem;
  cursor: pointer;
}

.atlas-login-remember input {
  width: 1rem;
  height: 1rem;
  accent-color: currentColor;
  cursor: pointer;
}
.atlas-login-error {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0.55rem 0.7rem;
  border-radius: 4px;
  background-color: #b91c1c;
  color: #fff;
  font-size: 0.8125rem;
}

.atlas-login-error-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: #fff;
  color: #b91c1c;
  font-size: 0.7rem;
  font-weight: 700;
}

.atlas-auth .validation-message {
  display: block;
  margin-top: 0.3rem;
  color: #b91c1c;
  font-size: 0.8125rem;
}

.atlas-modulebutton,
.atlas-barbutton {
  border-radius: var(--dxds-border-radius-40, 4px);
}

/* 标签在条开始换行前让位给图标。 */
@media (max-width: 900px) {
  .atlas-bar-hide-sm,
  .atlas-brand-sub {
    display: none;
  }
}

.atlas-body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}


/* 两步验证对话框：二维码居中白底（暗色主题下扫码需要浅色底），密钥可选中复制。 */
.atlas-twofactor-qr {
  display: block;
  width: 180px;
  height: 180px;
  margin: 0.5rem auto;
  padding: 8px;
  border: 1px solid var(--dxds-color-border-neutral-subdued-rest);
  border-radius: 6px;
  background: #fff;
}

.atlas-twofactor-secret {
  display: block;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--dxds-color-border-neutral-subdued-rest);
  border-radius: 4px;
  font-family: ui-monospace, monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  word-break: break-all;
  user-select: all;
}