/* ==========================================================================
   TRANG ĐĂNG NHẬP — Design.md §6.7 (form), §2.4 (nút đen), §2.3 (chữ đỏ)
   Phụ thuộc token trong gpm-theme.css, phải nạp sau file đó.
   ========================================================================== */

/* Bố cục giữa màn hình, không sidebar/topbar */
body.gpm-login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.gpm-login-wrapper {
  width: 100%;
  max-width: 420px;
}

.gpm-login-logo {
  text-align: center;
  margin-bottom: 32px;
}

.gpm-login-logo img {
  max-height: 72px;
  max-width: 100%;
  width: auto;
}

/* --- Card (§6.1) --- */
.gpm-login-card {
  background: var(--gpm-surface);
  border: 1px solid var(--gpm-line);
  border-radius: var(--gpm-r-lg);
  box-shadow: var(--gpm-sh-2);
  padding: 32px 28px;
}

.gpm-login-card__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--gpm-ink);
  margin: 0 0 6px;
  text-align: center;
}

.gpm-login-card__desc {
  font-size: 13px;
  color: var(--gpm-ink-2);
  text-align: center;
  margin-bottom: 24px;
}

/* --- Nhãn & ô nhập (§6.7) --- */
.gpm-form-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gpm-ink-2);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.gpm-form-control {
  width: 100%;
  height: 40px;
  border: 1px solid var(--gpm-line);
  border-radius: var(--gpm-r-sm);
  padding: 8px 12px;
  font-size: 14px;
  color: var(--gpm-ink);
  background-color: var(--gpm-surface);
  transition: border-color .15s ease;
}

.gpm-form-control::placeholder { color: var(--gpm-ink-3); }

/* Viền focus do gpm-theme.css lo: viền đen đậm lên, không có vòng đỏ bên ngoài. */

/* Trạng thái lỗi do server hoặc jQuery validate gắn vào */
.gpm-form-control.input-validation-error { border-color: var(--gpm-red); }

/* Ô đang lỗi mà được focus thì giữ ĐỎ, không đổi sang đen.
   Ở đây đỏ có nghĩa thật (ô này sai), nên nó phải thắng viền focus mặc định — nếu không, người
   dùng bấm vào đúng ô cần sửa là dấu hiệu lỗi biến mất. */
.gpm-form-control.input-validation-error:focus-visible {
  border-color: var(--gpm-red);
  box-shadow: 0 0 0 1px var(--gpm-red);
}

.field-validation-error {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--gpm-red-ink); /* Chữ đỏ cỡ thường BẮT BUỘC dùng red-ink — §2.3 */
}

/* --- Ô mật khẩu kèm nút con mắt --- */
.gpm-input-password {
  position: relative;
  display: flex;
  align-items: center;
}

.gpm-input-password .gpm-form-control { padding-right: 42px; }

.gpm-btn-eye {
  position: absolute;
  right: 5px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: var(--gpm-r-sm);
  color: var(--gpm-ink-3);
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}

.gpm-btn-eye:hover {
  color: var(--gpm-ink);
  background-color: var(--gpm-bg);
}

/* Nút con mắt nằm LỌT bên trong ô nhập, nên thu vòng focus sát vào.
   Để nguyên offset 2px mặc định thì vòng đen tràn ra chạm viền của chính ô đó. */
.gpm-btn-eye:focus-visible { outline-offset: 1px; }

/* --- Checkbox ghi nhớ --- */
.gpm-form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--gpm-ink);
  cursor: pointer;
  user-select: none;
}

.gpm-form-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--gpm-black); /* Đen, không phải đỏ — §2.4 */
}

.gpm-form-check__hint {
  margin: 6px 0 0 24px;
  font-size: 12px;
  color: var(--gpm-ink-3);
}

/* --- Nút đăng nhập: ĐEN, không phải đỏ (§2.4) ---
   Đỏ trong dashboard tiền nghĩa là lỗ. Bôi đỏ lên nút bấm thì lúc ô lợi nhuận
   hiện đỏ thật, mắt không còn phân biệt được cảnh báo với màu thương hiệu. */
.btn-gpm-login {
  width: 100%;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--gpm-black);
  color: #FFF;
  border: 0;
  border-radius: var(--gpm-r-md);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease;
}

.btn-gpm-login:hover { background-color: #262626; color: #FFF; }

/* --- Trạng thái đang gửi ---
   Không hạ opacity: nút mờ đi đọc ra như "đã hỏng / không bấm được nữa". Ở đây nó đang LÀM VIỆC,
   nên giữ nguyên độ đậm và để spinner nói phần đó. */
.btn-gpm-login[disabled] { cursor: progress; }

.btn-gpm-login__spinner { display: none; }

/* Bcrypt work factor 12 tốn khoảng một phần tư giây, cộng round-trip nữa là đủ lâu để người dùng
   tưởng nút không ăn. Spinner thay chỗ mũi tên để bề ngang nút không đổi — đổi thì nút giật một
   cái ngay lúc bấm. */
.btn-gpm-login[data-busy] .btn-gpm-login__spinner { display: inline-block; }

.btn-gpm-login[data-busy] .btn-gpm-login__icon { display: none; }

/* --- Toast báo lỗi toàn form (§12) ---
   Nền đỏ nhạt + chữ --gpm-red-ink chứ không phải nền đỏ đặc + chữ trắng: đây là dashboard tiền,
   một mảng đỏ lớn ở góc màn hình đọc ra như "đang lỗ nặng" chứ không phải "gõ sai mật khẩu". */
.gpm-toast {
  background-color: var(--gpm-neg-050);
  border: 1px solid var(--gpm-neg);
  border-left-width: 3px;
  border-radius: var(--gpm-r-md);
  box-shadow: var(--gpm-sh-2);
  color: var(--gpm-red-ink); /* 6.07:1 — chữ đỏ cỡ thường phải là red-ink, §2.3 */
  max-width: 380px;
}

.gpm-toast .toast-body {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  padding: 12px 14px;
}

.gpm-toast svg { flex-shrink: 0; margin-top: 1px; }

.gpm-toast__text { flex: 1; }

.gpm-toast .btn-close {
  flex-shrink: 0;
  padding: 0;
  margin: 2px 0 0;
  width: 12px;
  height: 12px;
  opacity: .55;
}

.gpm-toast .btn-close:hover { opacity: 1; }

.gpm-login-footer {
  text-align: center;
  margin-top: 24px;
  font-size: 12px;
  color: var(--gpm-ink-3);
  line-height: 1.7;
}