/* Canonical Nexus Auth UI — variable driven */

.knx-auth-shell {
  /* Use 88vh to match the visual mockup while avoiding full-viewport quirks
     on some mobile browsers. If you prefer strict viewport height, consider
     using 100dvh (dynamic viewport) instead of 100vh on modern browsers. */
  min-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--nxs-bg, inherit);
  position: relative;

  /* Prevent mobile browsers from auto-adjusting text size which can
     trigger viewport zoom on form focus (notably iOS Safari). */
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

.knx-auth-back {
  position: fixed;
  top: 20px;
  left: 20px;
  text-decoration: none;
}

.knx-back-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: var(--nxs-primary, inherit);
  color: var(--nxs-card, inherit);
  border-radius: 50%;
  font-size: 22px;
}

.knx-auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--nxs-card, inherit);
  padding: 32px 28px;
  border-radius: 14px;
  box-shadow: 0 16px 40px currentColor;
  transform: translateY(-20px);
}

.knx-auth-mode { display: none; }
.knx-auth-shell[data-mode="login"] [data-mode="login"],
.knx-auth-shell[data-mode="register"] [data-mode="register"],
.knx-auth-shell[data-mode="forgot"] [data-mode="forgot"] {
  display: block;
}

.knx-auth-card h1 {
  text-align: center;
  margin-bottom: 6px;
  color: var(--nxs-text, inherit);
}

.knx-auth-sub {
  text-align: center;
  color: var(--nxs-muted, inherit);
  margin-bottom: 22px;
}

label {
  font-size: 14px;
  color: var(--nxs-muted, inherit);
}

/* Ensure inputs in the auth card use at least 16px to avoid iOS Safari
   auto-zooming when the user focuses form fields. This is intentionally
   scoped to the auth card to avoid global visual changes. */
.knx-auth-card input,
.knx-auth-card textarea,
.knx-auth-card select {
  font-size: 16px;
}

input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--nxs-muted, inherit);
  margin: 6px 0 14px;
  background: transparent;
  color: var(--nxs-text, inherit);
}

.knx-password-wrap {
  position: relative;
}

.knx-pass-toggle {
  position: absolute;
  right: 12px;
  top: 0;
  bottom: 0;
  margin: 0px 0px 6px 0px; 
  background: none;
  border: none;
  color: var(--nxs-muted, inherit);
  cursor: pointer;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  line-height: 1;
}

.knx-password-wrap input {
  /* fixed height + line-height to keep icon vertically centered reliably */
  height: 44px;
  line-height: 20px;
  padding-right: 56px; /* reserve space for the toggle */
  box-sizing: border-box;
  font-size: 16px;
}

.knx-pass-toggle i {
  display: block;
  line-height: 1;
}

.knx-auth-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  margin-bottom: 20px;
}

.knx-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  flex: 1 1 auto;
  min-width: 0;
}

.knx-checkbox input {
  margin: 0;
  width: auto;
  flex: 0 0 auto;
}

.knx-checkbox span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.knx-auth-row .knx-link {
  flex: 0 0 auto;
  white-space: nowrap;
  margin-left: 12px;
  /* Fixed blue — not controlled by Admin UI */
  color: #1E6FF0;
  font-weight: 700;
}

.knx-btn-primary {
  width: 100%;
  padding: 14px;
  border-radius: 10px;
  border: none;
  background: var(--nxs-primary, inherit);
  color: var(--nxs-card, inherit);
  font-weight: 600;
  cursor: pointer;
}

.knx-auth-links {
  margin-top: 18px;
  text-align: center;
  font-size: 14px;
  color: var(--nxs-muted, inherit);
}

.knx-auth-links button,
.knx-link {
  background: none;
  border: none;
  /* Fixed blue — not controlled by Admin UI */
  color: #1E6FF0;
  cursor: pointer;
  font-weight: 700;
}

.knx-auth-error {
  color: var(--nxs-primary, inherit);
  text-align: center;
  margin-bottom: 12px;
  font-weight: 600;
}

.knx-hp { display: none; }

/* ==========================
   AUTH TOAST — UI + ANIMS
   ========================== */
.knx-auth-toast {
  /* Be in-flow within the auth card so the toast opens space in the container */
  position: relative;
  display: block;
  pointer-events: auto;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 12px 0;
}

.knx-auth-toast__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  color: #0b1220;
  padding: 12px 14px;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(11,18,32,0.06);
  font-size: 15px;
  line-height: 1.3;
  border: 1px solid rgba(11,18,32,0.04);
  width: 100%;
}

.knx-auth-toast__icon { display: none; }
.knx-auth-toast__msg { flex: 1 1 auto; min-width: 0; }
.knx-auth-toast__close {
  background: transparent;
  border: none;
  font-size: 18px;
  line-height: 1;
  padding: 6px 8px;
  cursor: pointer;
  color: inherit;
}

/* Status colours (soft, SaaS-grade) */
.knx-auth-toast--success .knx-auth-toast__inner { background: #F0FCF4; color: #0B6623; border-color: rgba(11,102,35,0.06); }
.knx-auth-toast--info    .knx-auth-toast__inner { background: #F0F8FF; color: #0B3A66; border-color: rgba(11,58,102,0.06); }
.knx-auth-toast--warning .knx-auth-toast__inner { background: #FFF8ED; color: #7A4A00; border-color: rgba(122,74,0,0.06); }
.knx-auth-toast--error   .knx-auth-toast__inner { background: #FFF6F6; color: #7A1010; border-color: rgba(122,16,16,0.06); }

/* Animations */
.keyframes-placeholder {}
@keyframes knx_auth_toast_in {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes knx_auth_toast_out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}

.knx-auth-toast--anim-in { animation: knx_auth_toast_in 380ms cubic-bezier(.2,.9,.2,1) forwards; }
.knx-auth-toast--anim-out{ animation: knx_auth_toast_out 300ms cubic-bezier(.2,.9,.2,1) forwards; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .knx-auth-toast--anim-in,
  .knx-auth-toast--anim-out { animation: none; opacity: 1 !important; transform: none !important; }
}

/* Desktop tweaks */
@media (min-width: 640px) {
  .knx-auth-toast { margin-bottom: 16px; }
  .knx-auth-toast__inner { padding: 14px 16px; font-size: 15px; }
}

/* Ensure toast doesn't cover main card on very small screens: slight inset
   and max-height to avoid overlapping inputs (it is overlay-only). */
@media (max-width: 360px) {
  .knx-auth-toast { width: calc(100% - 18px); margin-left: auto; margin-right: auto; }
}