/* ===================================================================
   VietMap Console — Keycloak login theme
   Thiết kế đồng bộ với trang Đăng ký của Console (shadcn-like tokens).
   =================================================================== */

/* ---- Design tokens (light) ---- */
:root,
[data-theme="light"] {
  /* Đồng bộ palette với app Console (src/styles/theme.css) — slate + brand navy.
     Lưu giá trị dạng HSL triplet để dùng với hsl(var(--x) / alpha). */
  --background: 0 0% 100%;
  --foreground: 222 84% 5%;
  --card: 0 0% 100%;
  --card-foreground: 222 84% 5%;
  --muted: 210 40% 96%;
  --muted-foreground: 215 16% 47%;
  --border: 214 32% 91%;
  --input: 214 32% 91%;
  --primary: 214 63% 19%;          /* #122c4f — brand (giống app) */
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96%;
  --secondary-foreground: 222 47% 11%;
  --ring: 214 63% 19%;
  --destructive: 0 84% 60%;
  --success: 152 69% 31%;
  --warning: 38 92% 50%;
  --stage-bg: 210 40% 97%;
  --radius: 0.75rem;
  --shadow-card: 0 1px 2px rgb(0 0 0 / .05), 0 8px 24px -12px rgb(15 23 42 / .12);
}

/* ---- Design tokens (dark) ---- */
[data-theme="dark"] {
  /* Dark — đồng bộ với .dark của app Console */
  --background: 222 84% 5%;
  --foreground: 210 40% 98%;
  --card: 222 47% 7%;
  --card-foreground: 210 40% 98%;
  --muted: 215 28% 17%;
  --muted-foreground: 218 11% 65%;
  --border: 217 33% 17%;
  --input: 217 33% 20%;
  --primary: 214 63% 19%;          /* #122c4f — brand (giống app) */
  --primary-foreground: 210 40% 98%;
  --secondary: 215 28% 17%;
  --secondary-foreground: 210 40% 98%;
  --ring: 214 63% 19%;
  --destructive: 0 72% 58%;
  --success: 152 65% 55%;
  --warning: 38 92% 60%;
  --stage-bg: 222 84% 5%;
  --shadow-card: 0 1px 2px rgb(0 0 0 / .4), 0 12px 32px -12px rgb(0 0 0 / .6);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

.vm-body {
  font-family: "Nunito", ui-sans-serif, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: hsl(var(--stage-bg));
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ---- Stage (căn giữa) ---- */
.vm-stage {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 24px 16px;
}

/* ---- Topbar: đổi ngôn ngữ + theme (cú pháp tối giản, tránh quirk parser) ---- */
.vm-topbar {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.vm-dd { position: relative; }
.vm-dd-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: hsl(var(--foreground));
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}
.vm-dd-trigger:hover { background: hsl(var(--muted)); }
.vm-theme-btn {
  width: 34px;
  padding: 0;
  justify-content: center;
  border-radius: 999px;
}
.vm-flag { font-size: 16px; line-height: 1; }
.vm-chev { opacity: 0.6; }
.vm-dd-menu {
  position: absolute;
  right: 0;
  top: 40px;
  min-width: 160px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 10px;
  box-shadow: var(--shadow-card);
  padding: 4px;
  display: none;
  z-index: 20;
}
.vm-dd.open .vm-dd-menu { display: block; }
.vm-dd-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: hsl(var(--foreground));
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.vm-dd-item:hover { background: hsl(var(--muted)); }
.vm-dd-check { margin-left: auto; color: hsl(var(--primary)); font-size: 12px; }
.vm-theme .vm-dd-check { display: none; }
html[data-theme-mode="light"] #vm-theme-menu [data-theme-set="light"] .vm-dd-check,
html[data-theme-mode="dark"] #vm-theme-menu [data-theme-set="dark"] .vm-dd-check,
html[data-theme-mode="system"] #vm-theme-menu [data-theme-set="system"] .vm-dd-check { display: inline; }
.vm-icon-moon { display: none; }
[data-theme="dark"] .vm-icon-sun { display: none; }
[data-theme="dark"] .vm-icon-moon { display: inline; }

/* ---- Logo ---- */
.vm-logo img { height: 38px; width: auto; display: block; }

/* ---- Card ---- */
.vm-card {
  width: 100%;
  max-width: 420px;
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 32px;
  animation: vm-rise .35s ease both;
}
@keyframes vm-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .vm-card { animation: none; } }

.vm-card-head { margin-bottom: 22px; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.vm-title { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.vm-subtitle { margin-top: 6px; font-size: 14px; font-weight: 400; color: hsl(var(--muted-foreground)); }

/* ---- Alert (thông báo) ---- */
.vm-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 11px 14px;
  margin-bottom: 18px;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid;
  font-size: 13.5px;
  line-height: 1.5;
}
.vm-alert-error   { background: hsl(var(--destructive) / .1); border-color: hsl(var(--destructive) / .35); color: hsl(var(--destructive)); }
.vm-alert-warning { background: hsl(var(--warning) / .12);    border-color: hsl(var(--warning) / .4);     color: hsl(38 92% 38%); }
.vm-alert-success { background: hsl(var(--success) / .12);    border-color: hsl(var(--success) / .4);     color: hsl(var(--success)); }
.vm-alert-info    { background: hsl(var(--primary) / .1);     border-color: hsl(var(--primary) / .35);    color: hsl(var(--primary)); }

/* ---- SSO / Identity providers (icon, hover mở rộng hiện tên) ---- */
.vm-sso { display: flex; gap: 10px; margin-top: 22px; }
.vm-sso-btn {
  flex: 1 1 0;
  min-width: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0;
  overflow: hidden;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  /* flex-grow + label nở đồng pha để không khựng */
  transition:
    flex-grow .45s cubic-bezier(.22, 1, .36, 1),
    background .15s ease,
    border-color .15s ease;
}
.vm-sso-btn:hover,
.vm-sso-btn:focus-visible {
  flex-grow: 2.6;
  background: hsl(var(--muted));
}
.vm-sso-ic { display: inline-flex; }
.vm-sso-ic svg { display: block; }
.vm-sso-lbl {
  max-width: 0;
  opacity: 0;
  padding-left: 0;
  white-space: nowrap;
  overflow: hidden;
  transition:
    max-width .45s cubic-bezier(.22, 1, .36, 1),
    padding-left .45s cubic-bezier(.22, 1, .36, 1),
    opacity .3s ease;
}
.vm-sso-btn:hover .vm-sso-lbl,
.vm-sso-btn:focus-visible .vm-sso-lbl {
  max-width: 90px;
  opacity: 1;
  padding-left: 8px;
}
@media (prefers-reduced-motion: reduce) {
  .vm-sso-btn,
  .vm-sso-lbl { transition: none; }
}

/* ---- Divider ---- */
.vm-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: hsl(var(--muted-foreground));
}
.vm-divider::before,
.vm-divider::after { content: ""; flex: 1; height: 1px; background: hsl(var(--border)); }

/* ---- Form ---- */
.vm-form { margin-top: 4px; }
.vm-field { margin-bottom: 16px; }
.vm-label { display: block; font-size: 13.5px; font-weight: 500; margin-bottom: 7px; color: hsl(var(--foreground)); }

.vm-input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid hsl(var(--input));
  background: transparent;
  color: hsl(var(--foreground));
  font: inherit;
  font-size: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.vm-input::placeholder { color: hsl(var(--muted-foreground) / .8); }
.vm-input:focus { outline: none; border-color: hsl(var(--ring)); box-shadow: 0 0 0 3px hsl(var(--ring) / .25); }
.vm-input[aria-invalid="true"] { border-color: hsl(var(--destructive)); box-shadow: 0 0 0 3px hsl(var(--destructive) / .2); }

/* password + nút hiện/ẩn */
.vm-pw { position: relative; }
.vm-pw .vm-input { padding-inline-end: 40px; }
.vm-eye {
  position: absolute;
  inset-inline-end: 4px;
  top: 4px;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: hsl(var(--muted-foreground));
  border-radius: 8px;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.vm-eye:hover { background: hsl(var(--muted)); }
/* Mặc định (mật khẩu ẩn): hiện mắt gạch chéo. Khi hiện mật khẩu: đổi sang mắt mở */
.vm-eye .vm-eye-on { display: none; }
.vm-eye .vm-eye-off { display: block; }
.vm-eye.is-revealed .vm-eye-off { display: none; }
.vm-eye.is-revealed .vm-eye-on { display: block; }

.vm-error { display: block; margin-top: 6px; font-size: 13px; color: hsl(var(--destructive)); }

/* ---- Row: remember me + forgot password ---- */
.vm-row { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 20px; gap: 12px; }
.vm-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: hsl(var(--foreground)); cursor: pointer; }
.vm-check input { width: 16px; height: 16px; accent-color: hsl(var(--primary)); }

.vm-link { color: hsl(var(--primary)); font-size: 13.5px; font-weight: 500; text-decoration: none; }
.vm-link:hover { text-decoration: underline; }

/* ---- Primary button ---- */
.vm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 42px;
  border: 1px solid transparent;
  border-radius: calc(var(--radius) - 2px);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: filter .15s ease, background .15s ease;
}
.vm-btn-primary { background: hsl(var(--primary)); border-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.vm-btn-primary:hover { filter: brightness(1.07); }
.vm-btn:disabled { opacity: .6; cursor: not-allowed; }

/* ---- Info / swap ---- */
.vm-info { margin-top: 22px; }
.vm-swap { text-align: center; font-size: 13.5px; color: hsl(var(--muted-foreground)); }

/* ---- Responsive ---- */
@media (max-width: 480px) {
  .vm-card { padding: 24px 20px; }
  /* SSO: xuống 2 cột, luôn hiện tên (không cần hover trên mobile) */
  .vm-sso { flex-wrap: wrap; }
  .vm-sso-btn { flex: 1 1 calc(50% - 5px); }
  .vm-sso-lbl { max-width: none; opacity: 1; padding-left: 8px; }
}

/* ===================================================================
   Trang phụ: update-password, otp, config-totp, update-profile,
   page-expired, error, info, logout-confirm, terms, select-authenticator,
   oauth-grant. Dùng chung token + style với trang login.
   =================================================================== */

/* Nút thứ cấp + nhiều nút */
.vm-btn-secondary { background: transparent; border-color: hsl(var(--border)); color: hsl(var(--foreground)); }
.vm-btn-secondary:hover { background: hsl(var(--muted)); }
.vm-btn + .vm-btn { margin-top: 10px; }
.vm-btn-row { display: flex; gap: 10px; }
.vm-btn-row .vm-btn { flex: 1; width: auto; margin-top: 0; }

/* Lưới 2 cột (first/last name) */
.vm-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* Text phụ + khối ghi chú */
.vm-muted { font-size: 13px; color: hsl(var(--muted-foreground)); line-height: 1.6; }
.vm-note { background: hsl(var(--muted) / .5); border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 2px); padding: 12px 14px; font-size: 13.5px;
  color: hsl(var(--foreground)); line-height: 1.6; }
.vm-note p { margin: 0; }

/* Nhóm nút dọc (page expired) */
.vm-actions { display: flex; flex-direction: column; gap: 10px; }
.vm-actions .vm-btn { margin-top: 0; }

/* Danh sách lựa chọn (select-authenticator, OTP credentials) */
.vm-choice { display: flex; flex-direction: column; gap: 10px; }
.vm-choice-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) - 2px);
  font-size: 14px; color: hsl(var(--foreground)); cursor: pointer; }
.vm-choice-item input { accent-color: hsl(var(--primary)); }
.vm-choice-btn { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  padding: 14px 16px; border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) - 2px);
  background: transparent; color: hsl(var(--foreground)); font: inherit; cursor: pointer;
  transition: border-color .15s ease, background .15s ease; }
.vm-choice-btn:hover { border-color: hsl(var(--ring)); background: hsl(var(--muted) / .5); }
.vm-choice-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.vm-choice-name { font-size: 14px; font-weight: 600; }
.vm-choice-help { font-size: 12.5px; color: hsl(var(--muted-foreground)); }
.vm-choice-arrow { color: hsl(var(--muted-foreground)); flex-shrink: 0; }

/* TOTP setup */
.vm-steps { margin: 0 0 16px; padding-left: 20px; color: hsl(var(--foreground)); font-size: 13.5px; line-height: 1.7; }
.vm-totp { text-align: center; margin-bottom: 18px; }
.vm-totp-qr { width: 180px; height: 180px; padding: 8px; background: #fff;
  border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) - 2px); }
.vm-totp-manual { margin-top: 12px; text-align: left; }
.vm-totp-manual summary { cursor: pointer; font-size: 13px; color: hsl(var(--primary)); font-weight: 500; }
.vm-totp-meta { margin-top: 8px; font-size: 12px; }
.vm-code { margin-top: 8px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px;
  word-break: break-all; background: hsl(var(--muted) / .6); border: 1px solid hsl(var(--border));
  border-radius: 8px; padding: 10px 12px; color: hsl(var(--foreground)); }

/* Terms box */
.vm-terms { max-height: 280px; overflow-y: auto; border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 2px); padding: 16px; margin-bottom: 18px;
  font-size: 13.5px; line-height: 1.65; color: hsl(var(--foreground)); }

/* Consent list (oauth-grant) */
.vm-consent { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.vm-consent li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px;
  color: hsl(var(--foreground)); line-height: 1.5; }
.vm-consent-ic { color: hsl(var(--primary)); flex-shrink: 0; margin-top: 2px; }

/* State (error / info) */
.vm-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; margin: 6px 0 20px; }
.vm-state-ic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; }
.vm-state-error .vm-state-ic { background: hsl(var(--destructive) / .12); color: hsl(var(--destructive)); }
.vm-state-info .vm-state-ic { background: hsl(var(--primary) / .12); color: hsl(var(--primary)); }
.vm-state-text { font-size: 14px; color: hsl(var(--foreground)); line-height: 1.6; margin: 0; }

@media (max-width: 480px) {
  .vm-grid2 { grid-template-columns: 1fr; }
  .vm-btn-row { flex-direction: column; }
}