/* Trang đăng nhập — bố cục theo ainavi-rt-fe src/features/auth/LoginPage.tsx: card trắng 380px, bo 12px, bóng,
   logo trên cùng, tiêu đề navy, mô tả xám, form dọc kiểu antd. Token ở tokens.css. */
.page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

.card {
  width: 100%;
  max-width: 380px;
  padding: 32px;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-surface);
}

/* Đầu card: logo AINavi đầy đủ (wordmark) + "ID" cùng hàng, cao bằng chữ của logo, màu navy (owner #13b). */
/* "ID" nằm TRONG cùng file SVG (ainavi-id-logo.svg, #13d): cùng chiều cao chữ hoa và đường chân chữ với "AINavi"
   ở mọi mức zoom, không phụ thuộc font hay CSS căn dòng. */
.brand-logo { display: block; height: 32px; width: auto; margin: 0 0 20px; }
h1 { margin: 0 0 4px; color: var(--color-brand); font-size: 18px; font-weight: 600; line-height: 26px; }
/* Trang đăng nhập: tiêu đề rồi tới ngay ô Email. */
h1.title-form { margin-bottom: 16px; }

/* "Ứng dụng của tôi" (/): một thẻ mỗi app. */
.apps { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.app-tile {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius);
  color: var(--color-text); text-decoration: none; transition: border-color 0.2s, background 0.2s;
}
.app-tile:hover { border-color: var(--rt-navy-tint-20); background: var(--rt-navy-tint-95); }
.app-tile:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.app-name { color: var(--color-brand); font-weight: 600; }
.app-role { color: var(--color-text-muted); font-size: 12px; }
.logout { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 12px; border-top: 1px solid var(--color-line); }
.muted-email { color: var(--color-text-muted); font-size: 12px; overflow-wrap: anywhere; }
.sub { margin: 0 0 24px; color: var(--color-text-muted); font-size: 14px; }
.sub strong { color: var(--color-text-secondary); font-weight: 500; }
p { margin: 0 0 12px; }

.field { margin: 0 0 20px; }
.field label { display: block; padding: 0 0 8px; color: var(--color-text); font-size: 13px; }
.field label .req { margin-inline-end: 4px; color: var(--color-danger); }
.hint { margin: 4px 0 0; color: var(--color-text-muted); font-size: 12px; }
.portal-hint { margin: -4px 0 16px; }

.actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.icon-state { display: block; width: 40px; height: 40px; margin: 0 0 12px; }