/* ==========================================================================
   StarNexus 统一登录主题 — styles-brand-v10.css
   --------------------------------------------------------------------------
   ⚠️ 为什么从 v9 改名到 v10（2026-10-03，血泪教训）：
      Keycloak 会**持久化缓存「曾被请求过的主题资源的 gzip 副本」**，且
      `docker restart` 不会清除。表现为：把 v9 原地覆盖成新内容后，
         · 不带 Accept-Encoding 的请求（curl 默认）→ 拿到**新**文件
         · 带 gzip 的真实浏览器 → 拿到**旧**文件（旧 gzip 副本）
      于是「curl 验证通过」但页面照样是坏的，极难发现。
      结论：**改主题样式一律换文件名（新 URL），不要原地覆盖。**
      v9 文件保留在盘上（线上同样保留），仅不再被 theme.properties 引用。
   --------------------------------------------------------------------------
   设计来源：starpress-master/view/oidc/oidc_loading.html（OIDC 中转页 v2.6）
   视觉规范（与 oidc_loading 完全一致）：
     · 主色   #4A3A6B（深紫） / #3A2B5A（深紫-深） / #6C5F7B（深紫-浅）
     · 辅色   #D4AF37（金）   / #E8C84C（金-亮）   / #B8942B（金-深）
     · 背景   浅紫白 #F8F6FC + 顶部径向光晕 #EFEAF8
     · 卡片   白底、圆角 20px、柔和紫色阴影、顶部紫→金渐变条（5px）
     · 按钮   金色渐变胶囊、hover 上浮 1px、focus 金色光环
     · 页脚   锁图标 + 安全提示
   覆盖范围：全部 login 类型页面（template.ftl 共用，故 login / register /
             reset-password / otp / webauthn 等自动统一）
   原则：只改视觉，不动表单结构（字段名 / CSRF / execution 参数原样保留）
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 设计令牌
   -------------------------------------------------------------------------- */
:root {
  --snx-primary: #4A3A6B;
  --snx-primary-dark: #3A2B5A;
  --snx-primary-soft: #6C5F7B;
  --snx-gold: #D4AF37;
  --snx-gold-light: #E8C84C;
  /* WCAG AA 修正(20260928)：原 #B8942B 在白底仅 2.87:1（链接 hover 文字不达标），
     加深到 #7D6318 → 白底 5.72:1、浅紫底 4.85:1，同时用作输入框聚焦描边（≥3:1） */
  --snx-gold-deep: #7D6318;
  --snx-bg: #F8F6FC;
  --snx-bg-tint: #EFEAF8;
  --snx-surface: #FFFFFF;
  --snx-border: #E2DEF0;
  /* WCAG AA 修正(20260928)：输入框描边是「可输入」的唯一视觉标识，
     须满足 1.4.11 非文本对比 ≥3:1；原 #E2DEF0 白底仅 1.32:1 → 改用 #8F89A3（3.35:1）。
     卡片描边属装饰，仍沿用 --snx-border 以保持 oidc_loading 的轻盈观感。 */
  --snx-border-control: #8F89A3;
  --snx-text: #2D2A3A;
  --snx-muted: #6B6580;
  /* WCAG AA 修正(20260928)：原 #8A85A0 在浅紫底仅 2.99:1、白底 3.53:1，
     brand-sub / 页脚等小字不达标 → 与 --snx-muted 统一为 #6B6580（白底 5.53:1、浅紫底 4.68:1） */
  --snx-muted-soft: #6B6580;
  --snx-danger-bg: #FDECEC;
  --snx-danger-border: #F5C2C2;
  --snx-danger-text: #B3261E;
  --snx-radius-card: 20px;
  --snx-radius-ctl: 12px;
  --snx-shadow-card: 0 18px 50px -12px rgba(74, 58, 107, .22), 0 4px 12px rgba(74, 58, 107, .06);
  --snx-shadow-btn: 0 6px 16px -4px rgba(212, 175, 55, .55), inset 0 1px 0 rgba(255, 255, 255, .45);
  --snx-focus-ring: 0 0 0 3px rgba(212, 175, 55, .45);
  /* WCAG AA 修正(20260928)：柔和金环 rgba(212,175,55,.45) 叠在白底后对比度仅约 1.6:1，
     满足不了 1.4.11 对「焦点指示器 ≥3:1」的要求。故另加一圈不透明的深金环做保证，
     浅色柔环保留做品牌观感。 */
  --snx-focus-ring-strong: 0 0 0 2px var(--snx-gold-deep);

  /* 强制浅色，避免 OS 深色模式与品牌浅色设计冲突 */
  color-scheme: light;
}

/* --------------------------------------------------------------------------
   1. 页面背景：浅紫白 + 顶部径向光晕（对齐 oidc_loading body）
   -------------------------------------------------------------------------- */
html,
body,
body#keycloak-bg,
.login-pf,
.login-pf body,
.pf-v5-c-login {
  background-color: var(--snx-bg) !important;
  background-image:
    radial-gradient(1100px 520px at 50% -8%, #EFEAF8 0%, rgba(239, 234, 248, 0) 62%),
    linear-gradient(180deg, #F8F6FC 0%, #F4F1FA 100%) !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  color: var(--snx-text) !important;
}

body,
.pf-v5-c-login {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --------------------------------------------------------------------------
   2. 布局：品牌头在上、卡片居中（覆盖 PF 的 xl 双列网格）
   -------------------------------------------------------------------------- */
.pf-v5-c-login__container {
  grid-template-areas: "header" "main" "footer" !important;
  grid-template-columns: minmax(0, 1fr) !important;
  column-gap: 0 !important;
  justify-content: center !important;
  max-width: 452px !important;
  width: 100% !important;
  padding-inline-end: 0 !important;
  padding-inline-start: 0 !important;
}

.pf-v5-c-login__header {
  grid-area: header !important;
  justify-self: center !important;
  text-align: center !important;
  width: 100% !important;
  margin-block-start: 0 !important;
  /* SNX_COMPACT(20260928)：22→18px。开启「语言选择器 + 记住我」后卡片增高 62px，
     压缩各区块纵向间距把整页从 904px 收到 ≈860px，保证 1280×900 无滚动。 */
  margin-bottom: 18px !important;
  padding-inline-end: 0 !important;
  padding-inline-start: 0 !important;
}

#kc-header {
  background: none !important;
}

#kc-header-wrapper.pf-v5-c-brand,
#kc-header-wrapper {
  background: none !important;
  margin-block-end: 0 !important;
  text-align: center !important;
}

/* --------------------------------------------------------------------------
   3. 品牌区：树形 Logo + 金色光环 + 品牌名 + 副标
   -------------------------------------------------------------------------- */
.snx-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.snx-brand-logo {
  width: 60px;
  height: 60px;
  /* 2026-10-03 由圆裁（50%）改为圆角方形：LOGO 本身是方形构图，
     圆裁会切掉树冠两侧与树根，方形圆角更贴合且与 .press / OJS / OMP 一致 */
  border-radius: 13px;
  object-fit: cover;
  background-color: var(--snx-primary);
  box-shadow:
    0 6px 18px rgba(74, 58, 107, .20),
    0 0 0 3px #fff,
    0 0 0 4px rgba(212, 175, 55, .28);
  display: block;
}

.snx-brand-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--snx-primary) !important;
  letter-spacing: .4px;
  line-height: 1;
  display: block;
}

.snx-brand-dot {
  color: var(--snx-gold);
}

.snx-brand-sub {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--snx-muted-soft);
}

/* --------------------------------------------------------------------------
   4. 卡片：#kc login main —— 白底、圆角、紫金渐变顶条
   -------------------------------------------------------------------------- */
.pf-v5-c-login__main {
  position: relative !important;
  grid-area: main !important;
  width: 100% !important;
  max-width: 452px !important;
  background-color: var(--snx-surface) !important;
  border: 1px solid rgba(226, 222, 240, .9) !important;
  border-radius: var(--snx-radius-card) !important;
  box-shadow: var(--snx-shadow-card) !important;
  overflow: hidden !important;
  animation: snx-card-in .42s ease both;
}

.pf-v5-c-login__main::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  height: 5px !important;
  background: linear-gradient(90deg, var(--snx-primary) 0%, var(--snx-primary-soft) 46%, var(--snx-gold) 100%) !important;
}

@keyframes snx-card-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   5. 卡片头部：标题 + 副标题 + 语言选择
   -------------------------------------------------------------------------- */
.pf-v5-c-login__main-header {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  grid-template-columns: 100% !important;
  row-gap: 0 !important;
  column-gap: 0 !important;
  text-align: center !important;
  padding: 26px 32px 14px !important;
  border-bottom: 1px solid #F0EDF7 !important;
}

#kc-page-title,
.pf-v5-c-login__main-header h1,
.pf-v5-c-title {
  color: var(--snx-primary-dark) !important;
  -webkit-text-fill-color: var(--snx-primary-dark) !important;
  -webkit-text-stroke: 0 !important;
  background-image: none !important;
  text-shadow: none !important;
  font-weight: 700 !important;
  font-size: 19px !important;
  line-height: 1.45 !important;
  letter-spacing: .2px !important;
  margin: 0 !important;
  text-align: center !important;
}

.snx-subtitle {
  margin: 8px 0 0 !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: var(--snx-muted) !important;
  text-align: center !important;
}

/* 语言切换：小而克制的胶囊 */
.pf-v5-c-login__main-header-utilities {
  grid-column: auto !important;
  grid-row: auto !important;
  width: auto !important;
  margin-top: 14px !important;
}

.pf-v5-c-login__main-header-utilities .pf-v5-c-form-control {
  width: auto !important;
  min-width: 132px !important;
  border-radius: 999px !important;
  background-color: var(--snx-bg-tint) !important;
}

.pf-v5-c-login__main-header-utilities select {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--snx-primary) !important;
  padding: 6px 30px 6px 14px !important;
  height: auto !important;
}

/* SNX_LOCALE_COLOR(20260928)：通用规则 `.pf-v5-c-form-control > select`（2 个类）
   的特异性高于上面的 `.pf-v5-c-login__main-header-utilities select`（1 个类），
   会把语言选择器文字染成 --snx-text。此处提高特异性，让其回到品牌紫，
   与其它控件一致（两者对比度均满足 AA：紫 8.44:1 / 深灰 12:1）。 */
.pf-v5-c-login__main-header-utilities .pf-v5-c-form-control > select {
  color: var(--snx-primary) !important;
}

/* --------------------------------------------------------------------------
   6. 表单主体
   -------------------------------------------------------------------------- */
.pf-v5-c-login__main-body {
  background: transparent !important;
  padding: 20px 32px 6px !important;
}

.pf-v5-c-form__group {
  margin-bottom: 15px !important;
}

.pf-v5-c-form__group-label {
  padding-bottom: 7px !important;
}

label,
.pf-v5-c-form__label,
.pf-v5-c-form__label-text,
.pf-v5-c-check__label {
  color: var(--snx-primary) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: .1px !important;
}

/* 输入框 */
.pf-v5-c-form-control {
  background-color: var(--snx-surface) !important;
  border: 1px solid var(--snx-border-control) !important;
  border-radius: var(--snx-radius-ctl) !important;
  box-shadow: none !important;
  transition: border-color .18s ease, box-shadow .18s ease !important;
}

/* 关掉 PatternFly 用伪元素绘制的边框 / 焦点下划线 */
.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after {
  content: none !important;
  border: 0 !important;
}

.pf-v5-c-form-control > input,
.pf-v5-c-form-control > textarea,
.pf-v5-c-form-control > select {
  width: 100% !important;
  background-color: transparent !important;
  color: var(--snx-text) !important;
  border: 0 !important;
  border-radius: inherit !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  font-family: inherit !important;
  box-shadow: none !important;
}

.pf-v5-c-form-control > input::placeholder {
  color: var(--snx-muted-soft) !important;
}

/* 金色聚焦态：描边用 --snx-gold-deep（白底 5.72:1，满足 1.4.11 的 ≥3:1），
   外层保留品牌金环做视觉强调 */
.pf-v5-c-form-control:focus-within,
input:focus {
  border-color: var(--snx-gold-deep) !important;
  box-shadow: var(--snx-focus-ring) !important;
  outline: none !important;
}

/* 校验错误态 */
.pf-v5-c-form-control.pf-m-error,
.pf-v5-c-form-control.snx-error {
  border-color: var(--snx-danger-border) !important;
}

/* 密码框：与「显示密码」按钮之间的间隙 */
.pf-v5-c-input-group {
  --pf-v5-c-input-group__item--MarginLeft: 8px !important;
  column-gap: 8px !important;
  align-items: stretch !important;
}

.pf-v5-c-input-group__item:not(:first-child) {
  margin-inline-start: 8px !important;
}

.pf-v5-c-button.pf-m-control,
.pf-v5-c-button.pf-m-secondary {
  background-color: var(--snx-bg-tint) !important;
  border: 1px solid var(--snx-border-control) !important;
  color: var(--snx-primary) !important;
  border-radius: var(--snx-radius-ctl) !important;
  min-width: 46px !important;
  transition: background-color .18s ease !important;
}

.pf-v5-c-button.pf-m-control:hover,
.pf-v5-c-button.pf-m-secondary:hover {
  background-color: var(--snx-surface) !important;
  border-color: var(--snx-gold) !important;
}

/* 帮助文本 / 忘记密码 */
.pf-v5-c-form__helper-text,
.pf-v5-c-helper-text {
  margin-top: 8px !important;
}

.pf-v5-c-helper-text__item-text {
  font-size: 12.5px !important;
  color: var(--snx-muted) !important;
}

/* 记住我 */
.pf-v5-c-check__input {
  accent-color: var(--snx-gold) !important;
  width: 16px !important;
  height: 16px !important;
}

.pf-v5-c-check {
  align-items: center !important;
  gap: 8px !important;
}

/* --------------------------------------------------------------------------
   7. 主按钮：金色渐变胶囊 + hover 上浮
   -------------------------------------------------------------------------- */
#kc-login,
button[type=submit].pf-m-primary,
input[name=login] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  margin-top: 6px !important;
  padding: 15px 22px !important;
  border: none !important;
  border-radius: 999px !important;
  background-color: var(--snx-gold) !important;
  background-image: linear-gradient(180deg, var(--snx-gold-light) 0%, var(--snx-gold) 100%) !important;
  color: var(--snx-primary-dark) !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: .2px !important;
  box-shadow: var(--snx-shadow-btn) !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
  -webkit-tap-highlight-color: transparent;
}

#kc-login:hover,
button[type=submit].pf-m-primary:hover,
input[name=login]:hover {
  filter: brightness(1.04) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 24px -6px rgba(212, 175, 55, .65), inset 0 1px 0 rgba(255, 255, 255, .5) !important;
}

#kc-login:active,
button[type=submit].pf-m-primary:active {
  transform: translateY(0) !important;
  filter: brightness(.98) !important;
}

/* 主按钮自身是金色，深金环叠在金色上不足 3:1，故用「白隔断 + 深紫环」：
   深紫 #4A3A6B 对白底 9.96:1，焦点位置清晰可辨 */
#kc-login:focus-visible,
button[type=submit].pf-m-primary:focus-visible,
input[name=login]:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--snx-primary), var(--snx-shadow-btn) !important;
}

/* 提交中：保留文案，右侧追加双色旋转指示器（Keycloak onsubmit 会 disable 按钮） */
#kc-login[disabled],
#kc-login.pf-m-disabled {
  cursor: progress !important;
  opacity: 1 !important;
}

#kc-login[disabled]::after {
  content: '' !important;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border: 2px solid rgba(58, 43, 90, .25);
  border-top-color: var(--snx-primary-dark);
  border-right-color: var(--snx-primary-soft);
  border-radius: 50%;
  animation: snx-spin .85s linear infinite;
}

@keyframes snx-spin {
  to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   8. 链接
   -------------------------------------------------------------------------- */
a,
.pf-v5-c-button.pf-m-link {
  color: var(--snx-primary) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: color .18s ease !important;
}

a:hover,
.pf-v5-c-button.pf-m-link:hover {
  color: var(--snx-gold-deep) !important;
  text-decoration: underline !important;
}

a:focus-visible,
.pf-v5-c-button:focus-visible {
  outline: none !important;
  box-shadow: var(--snx-focus-ring-strong) !important;
  border-radius: 6px;
}

/* --------------------------------------------------------------------------
   9. 提示条（错误 / 警告 / 成功）
   -------------------------------------------------------------------------- */
.pf-v5-c-alert {
  border-radius: var(--snx-radius-ctl) !important;
  border: 1px solid var(--snx-danger-border) !important;
  background-color: var(--snx-danger-bg) !important;
  color: var(--snx-danger-text) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  box-shadow: none !important;
  margin-bottom: 18px !important;
}

.pf-v5-c-alert.pf-m-warning {
  background-color: #FFF8E6 !important;
  border-color: #F0DDA6 !important;
  color: #7A5B12 !important;
}

.pf-v5-c-alert.pf-m-success {
  background-color: #EAF7EF !important;
  border-color: #BFE3CC !important;
  color: #1E6B3A !important;
}

.pf-v5-c-alert__icon,
.pf-v5-c-alert__title {
  color: inherit !important;
}

/* --------------------------------------------------------------------------
   10. 卡片页脚：安全提示（对齐 oidc_loading .footnote）
   -------------------------------------------------------------------------- */
.pf-v5-c-login__main-footer {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  padding: 0 32px 20px !important;
}

.pf-v5-c-login__main-footer > * {
  flex-basis: auto !important;
  width: 100% !important;
}

.snx-footnote {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #F0EDF7;
  font-size: 11.5px;
  color: var(--snx-muted-soft);
  line-height: 1.6;
  text-align: center;
}

.snx-footnote-lock {
  margin-inline-end: 4px;
  color: var(--snx-primary-soft);
}

.snx-footnote-ver {
  margin-top: 7px;
  font-size: 11.5px;
  /* WCAG AA 修正(20260928)：原 opacity:.78 把有效对比度压到 2.54:1，
     去掉透明度改为实色，白底 5.53:1 */
  color: var(--snx-muted-soft);
  text-align: center;
}

/* 「还没有账号？注册」信息带 */
#kc-registration {
  text-align: center !important;
  font-size: 13px !important;
  color: var(--snx-muted) !important;
  padding-top: 6px !important;
}

#kc-registration a {
  margin-inline-start: 4px;
}

/* --------------------------------------------------------------------------
   11. 响应式
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .pf-v5-c-login {
    padding-inline-end: 16px !important;
    padding-inline-start: 16px !important;
  }

  .pf-v5-c-login__container {
    max-width: 100% !important;
  }

  .pf-v5-c-login__main {
    max-width: 100% !important;
    border-radius: 18px !important;
  }

  .pf-v5-c-login__main-header {
    padding: 26px 22px 15px !important;
  }

  .pf-v5-c-login__main-body {
    padding: 20px 22px 6px !important;
  }

  .pf-v5-c-login__main-footer {
    padding: 0 22px 22px !important;
  }

  .snx-brand-logo {
    width: 54px;
    height: 54px;
  }

  .snx-brand-name {
    font-size: 20px;
  }

  #kc-page-title,
  .pf-v5-c-login__main-header h1 {
    font-size: 17.5px !important;
  }

  #kc-login,
  button[type=submit].pf-m-primary {
    padding: 14px 18px !important;
  }
}

/* --------------------------------------------------------------------------
   12. 无障碍：尊重系统的「减少动态效果」
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}