/* ============================================================
   Trang đăng nhập: templates/login.html (trang độc lập, tự mang <html>, nạp nd-theme.js nên theo lựa chọn
   giao diện đã lưu hoặc hệ điều hành). Dựng trên bộ component .ndh-*; file này chỉ bổ sung bố cục.
   CHỈ dùng token semantic var(--ad-*): không màu thô, không token primitive, nên tự đổi theo sáng / tối.
   Tiền tố .ndlg- (login).
   ============================================================ */

.ndlg-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ad-space-4); padding: var(--ad-space-5) var(--ad-space-4); }
.ndlg-card { display: flex; flex-direction: column; gap: var(--ad-space-4); width: min(100%, 420px); padding: var(--ad-space-6); border-top: 3px solid var(--ad-accent); box-shadow: var(--ad-shadow); }
.ndlg-brand { display: flex; align-items: center; gap: var(--ad-space-3); color: var(--ad-fg); font-size: var(--ad-text-lg); font-weight: 700; letter-spacing: -0.01em; }
.ndlg-brand img { display: block; width: 40px; height: auto; }
.ndlg-title { font-size: var(--ad-text-xl); font-weight: 700; letter-spacing: -0.01em; }
.ndh .ndlg-sub { margin-top: var(--ad-space-1); }

/* ô mật khẩu có nút hiện / ẩn nằm trong ô */
.ndlg-pass { position: relative; }
.ndlg-pass .ndh-input { padding-right: 44px; }
.ndlg-pass__toggle { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); }
.ndlg-pass__toggle[hidden] { display: none !important; }

/* trạng thái lỗi: viền đỏ ở hai ô khi đăng nhập sai */
.ndlg-card .ndh-input[aria-invalid="true"] { border-color: var(--ad-danger); }
.ndlg-card .ndh-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--ad-danger-soft); }

.ndlg-submit { width: 100%; padding-top: 10px; padding-bottom: 10px; font-size: var(--ad-text-md); }
.ndlg-help { margin: 0; text-align: center; }
.ndlg-foot { margin: 0; font-size: var(--ad-text-xs); }

@media screen and (max-width: 480px) {
    .ndlg-card { padding: var(--ad-space-5); }
}