/* ============================================================
   WOKI Customer Portal — login / authentication page
   Standalone entry page. Reuses tokens/reset/font from portal.css.
   ============================================================ */

.login-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background:
    radial-gradient(900px 520px at 50% -8%, #e9f1ff 0%, rgba(233,241,255,0) 60%),
    #f6f8fc;
}

.login-card {
  width: 100%;
  max-width: 392px;
  background: var(--surface);
  border: 1px solid var(--line-light);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  padding: 22px 30px 18px;
  text-align: center;
}
.login-card--wide { max-width: 500px; }

/* ---- quick login: demo accounts by role ---- */
.quick-login { text-align: start; margin-bottom: 4px; }
.quick-login-title {
  margin: 0 0 7px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: .3px;
}
.quick-login-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 4px;
}

/* compact single-line row: avatar · name/role · role tag — no scrolling,
   full permissions text lives in the title tooltip instead of on-screen */
.ql-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: start;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  padding: 7px 10px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.ql-card:hover { border-color: var(--brand); background: var(--brand-subtle); box-shadow: var(--shadow-xs); }
.ql-card.is-recommended { border-color: var(--brand-light); }

.ql-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 12.5px; flex-shrink: 0;
}
.ql-info { flex: 1; min-width: 0; }
.ql-name {
  display: flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 800; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ql-name .ql-star { color: #f5a623; font-size: 10.5px; flex-shrink: 0; }
.ql-role {
  font-size: 11px; color: var(--muted); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ql-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 99px;
  background: var(--brand-light); color: var(--brand-strong);
  font-size: 10px; font-weight: 700; white-space: nowrap; flex-shrink: 0;
}

.login-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 10px;
  color: var(--faint);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-light);
}

.login-logo {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--brand), var(--brand-strong));
  color: #fff;
  font-size: 24px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0, 100, 200, .28);
  margin-bottom: 10px;
}

.login-title {
  margin: 0 0 5px;
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
}
.login-sub {
  margin: 0 0 12px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}

/* ---- segmented control (channel) ---- */
.seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: #eef2f8;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: 10px;
}
.seg button {
  flex: 1;
  border: none;
  background: transparent;
  padding: 9px 6px;
  border-radius: var(--r-sm);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  transition: background var(--t), color var(--t), box-shadow var(--t);
}
.seg button:hover { color: var(--ink-2); }
.seg button.active {
  background: var(--surface);
  color: var(--brand-strong);
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}

/* ---- fields ---- */
.field { text-align: start; margin-bottom: 8px; }
.field > label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
  margin-bottom: 8px;
}

.input-wrap { position: relative; }
.input-wrap input {
  width: 100%;
  height: 48px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  /* physical paddings: email/tel inputs force LTR text, which would flip
     logical padding to the wrong side and let text run under the icon.
     The icon is always on the left, so reserve the left side physically. */
  padding-left: 44px;
  padding-right: 14px;
  font-size: 14px;
  font-family: inherit;
  background: var(--surface-2);
  color: var(--ink);
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.input-wrap input::placeholder { color: var(--faint); }
.input-wrap input:focus {
  outline: none;
  border-color: var(--brand);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--brand-light);
}
.input-wrap .field-icon {
  position: absolute;
  left: 14px;            /* physical: icon always sits on the left */
  top: 50%;
  transform: translateY(-50%);
  color: var(--faint);
  font-size: 17px;
  pointer-events: none;
}

/* ---- send-code button ---- */
.btn-send {
  width: 100%;
  height: 48px;
  border: none;
  border-radius: var(--r-sm);
  background: var(--brand-light);
  color: var(--brand-strong);
  font-size: 14.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 0;
  transition: background var(--t), color var(--t), opacity var(--t);
}
.btn-send:hover { background: #d6e8ff; }

/* ---- OTP ---- */
.otp-label {
  display: block;
  text-align: start;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
  margin-top: 14px;
  margin-bottom: 10px;
}
.otp-row {
  display: flex;
  gap: 10px;
  direction: ltr;            /* code fills left → right */
  justify-content: center;
  margin-bottom: 24px;
}
.otp-row input {
  width: 46px;
  height: 52px;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink);
  font-family: inherit;
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.otp-row input:focus {
  outline: none;
  border-color: var(--brand);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--brand-light);
}
.otp-row input.filled { border-color: var(--brand); background: var(--surface); }

/* ---- login button ---- */
.btn-login {
  width: 100%;
  height: 50px;
  border: none;
  border-radius: var(--r-sm);
  background: var(--brand);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background var(--t), opacity var(--t);
}
.btn-login:hover { background: var(--brand-strong); }

/* ---- footer ---- */
.login-foot {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line-light);
}
.login-foot a {
  font-size: 13px;
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.login-foot a:hover { color: var(--brand-strong); text-decoration: underline; }

@media (max-width: 460px) {
  .login-card { padding: 32px 22px 26px; }
  .otp-row { gap: 7px; }
  .otp-row input { width: 42px; height: 50px; }
}