/* KONA Atelier — login / landing brand override (WeKnora green → Kona navy/red).
   Safe additive CSS only. Do not rename WeKnora JS keys. */

:root,
:root[theme-mode="light"],
html {
  --td-brand-color: #8B0003;
  --td-brand-color-hover: #A31014;
  --td-brand-color-focus: #A31014;
  --td-brand-color-active: #6E0002;
  --td-brand-color-disabled: #C48A8C;
  --td-brand-color-light: #F5E8E9;
  --td-brand-color-light-hover: #EAD0D2;
}

/* Login page background: navy-dominant (red only as tiny corner accent) */
.login-layout {
  background: linear-gradient(
    135deg,
    #061018 0%,
    #0B1F3A 38%,
    #152848 68%,
    #1A2744 88%,
    #2a1830 100%
  ) !important;
}

.login-layout .knowledge-node {
  box-shadow:
    0 0 15px rgba(255, 255, 255, 0.22),
    0 0 28px rgba(11, 31, 58, 0.45),
    inset 0 0 8px rgba(255, 255, 255, 0.08) !important;
}

/* Primary actions already use TDesign brand vars; reinforce login buttons */
.login-layout .submit-button.t-button--theme-primary,
.login-layout .t-button--theme-primary {
  background-color: #8B0003 !important;
  border-color: #8B0003 !important;
}

.login-layout .submit-button.t-button--theme-primary:hover,
.login-layout .t-button--theme-primary:hover {
  background-color: #A31014 !important;
  border-color: #A31014 !important;
}

.login-layout .register-cta__button.t-button--variant-outline,
.login-layout .t-button--variant-outline {
  border-color: #8B0003 !important;
  color: #8B0003 !important;
}

.login-layout .invite-banner:not(.invite-banner--error),
.login-layout .t-alert--info {
  background: rgba(139, 0, 3, 0.08) !important;
  border-color: rgba(139, 0, 3, 0.22) !important;
  color: #4A0E16 !important;
}

.login-layout .login-features .feature-icon,
.login-layout .feature-icon {
  background: rgba(139, 0, 3, 0.12) !important;
  color: #8B0003 !important;
}

.login-layout .form-footer .link-button,
.login-layout a.link-button {
  color: #8B0003 !important;
}

/* Hide Official Website + GitHub on login header (keep language button).
   Use tag `a` — language switch is a <button class="header-link">. */
.login-layout .header-links > a.header-link,
.login-layout .header-links a.header-link[href*="weknora.weixin.qq.com"],
.login-layout .header-links a.header-link[href*="github.com/Tencent/WeKnora"] {
  display: none !important;
}

/* No public registration — hide CTA / register card / "new to…" hints */
.login-layout .register-cta,
.login-layout .register-cta__button,
.login-layout .form-hint,
.login-layout .form-card .form-footer a.link-button {
  display: none !important;
}

/* Login showcase: R1 only (Search · Agents · Wiki) — hide 4th Hybrid/Smart Search tag */
.login-layout .feature-tags .tag:nth-child(4) {
  display: none !important;
}

/* Cream top banner via ::after — Vue Login.vue already owns ::before */
.login-layout::after {
  content: "" !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  width: 100% !important;
  height: 120px !important; /* tall enough for 2× wordmark */
  background: #f7f1e8 !important;
  z-index: 95 !important;
  box-shadow: 0 1px 0 rgba(11, 31, 58, 0.1) !important;
  pointer-events: none !important;
  border-radius: 0 !important;
  transform: none !important;
}

.login-layout .header-logo {
  top: 22px !important;
  left: 40px !important;
  z-index: 110 !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important; /* no cream pill sticking below the banner */
  border-radius: 0 !important;
  background: transparent !important;
}

.login-layout .header-links {
  top: 36px !important;
  right: 28px !important;
  z-index: 110 !important;
}

/* Language / header controls on cream — dark text (was white-on-cream) */
.login-layout .header-links .header-link,
.login-layout .language-switch > button.header-link {
  background: rgba(11, 31, 58, 0.06) !important;
  border: 1px solid rgba(11, 31, 58, 0.22) !important;
  color: #0b1f3a !important;
}

.login-layout .header-links .header-link:hover,
.login-layout .language-switch > button.header-link:hover {
  background: rgba(11, 31, 58, 0.12) !important;
  border-color: rgba(11, 31, 58, 0.35) !important;
  color: #061018 !important;
}

.login-layout .header-links .header-link .link-text,
.login-layout .language-switch .link-text {
  color: #0b1f3a !important;
}

.login-layout .language-switch > button.header-link svg {
  stroke: #0b1f3a !important;
  color: #0b1f3a !important;
}

.login-layout .language-dropdown {
  background: #ffffff !important;
  border: 1px solid rgba(11, 31, 58, 0.15) !important;
  box-shadow: 0 8px 24px rgba(11, 31, 58, 0.14) !important;
  z-index: 120 !important;
}

.login-layout .language-dropdown .language-option {
  color: #0b1f3a !important;
}

.login-layout .language-dropdown .language-option .lang-label {
  color: #0b1f3a !important;
}

.login-layout .language-dropdown .language-option:hover,
.login-layout .language-dropdown .language-option.active {
  background: rgba(11, 31, 58, 0.06) !important;
  color: #061018 !important;
}

/* Clear showcase title from under the cream strip (was overlapping) */
.login-layout .showcase-section {
  padding-top: 148px !important;
}

.login-layout .showcase-content {
  z-index: 2 !important;
}

.login-layout .animated-bg {
  top: 120px !important; /* keep nodes below cream banner */
}

/* 2× default 120px wordmark; no dark-mode invert on cream */
.login-layout a.header-logo .logo-image,
.login-layout .header-logo .logo-image {
  width: 240px !important;
  max-width: min(240px, 42vw) !important;
  height: auto !important;
  filter: none !important;
  -webkit-filter: none !important;
}

@media (max-width: 900px) {
  .login-layout::after {
    height: 100px !important;
  }

  .login-layout .animated-bg {
    top: 100px !important;
  }

  .login-layout .header-logo {
    top: 16px !important;
    left: 24px !important;
  }

  .login-layout .header-links {
    top: 28px !important;
  }

  .login-layout .showcase-section {
    padding-top: 128px !important;
  }

  .login-layout a.header-logo .logo-image,
  .login-layout .header-logo .logo-image {
    width: 200px !important;
    max-width: min(200px, 48vw) !important;
  }
}

@media (max-width: 600px) {
  .login-layout::after {
    height: 88px !important;
  }

  .login-layout .animated-bg {
    top: 88px !important;
  }

  .login-layout .showcase-section {
    padding-top: 112px !important;
  }

  .login-layout a.header-logo .logo-image,
  .login-layout .header-logo .logo-image {
    width: 160px !important;
    max-width: min(160px, 56vw) !important;
  }
}

/* ---- Invite / share-link popups (Members) — no scroll, fit content ---- */
.member-invite-popup-overlay.t-popup,
.member-invite-popup-overlay {
  z-index: 6200 !important;
}

.member-invite-popup-overlay .t-popup__content,
.wk-popover.member-invite-popup-overlay .t-popup__content,
.wk-popover.wk-popover--form.member-invite-popup-overlay .t-popup__content {
  width: 520px !important;
  max-width: calc(100vw - 48px) !important;
  min-width: 280px !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: hidden !important; /* no x/y scrollbars */
}

.member-invite-popup-inner {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

.member-invite-popup-overlay .member-invite-popup-title,
.member-invite-popup-overlay .invite-confirm-body {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  max-width: 100% !important;
}

.member-invite-popup-overlay .invite-popup-footer {
  display: flex !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 20px !important;
  padding-bottom: 0 !important;
}

.member-invite-popup-overlay .t-form,
.member-invite-popup-overlay .member-invite-form,
.member-invite-popup-overlay .t-select,
.member-invite-popup-overlay .t-input__wrap,
.member-invite-popup-overlay .t-input,
.member-invite-popup-overlay .t-form__controls,
.member-invite-popup-overlay .share-link-row,
.member-invite-popup-overlay .share-link-row__input {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}