/* usermenu.css — DROPDOWN tài khoản: nút avatar ở header (.ah-avatar) mở menu
   (Bài của tôi · Cài đặt · Đổi mật khẩu · [admin] · Đăng xuất). Chỉ token ngữ
   nghĩa từ tokens.css (KHÔNG hardcode hex/spacing/radius). Mở/đóng do app.js
   (initUserMenu) — file này lo trình bày. Mobile (<560px): menu thành bottom-sheet. */

.ah-usermenu {
  position: relative;
  flex: none;
}

/* Nút avatar = .ah-avatar nhưng là <button>: bỏ padding mặc định, thêm viền + con trỏ. */
.ah-avatar-btn {
  padding: 0;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color var(--dur, .15s) ease, box-shadow var(--dur, .15s) ease;
}
.ah-avatar-btn:hover { border-color: var(--border-strong); }
.ah-avatar-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.ah-avatar-btn[aria-expanded="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ===== Panel menu (desktop: thả xuống dưới nút, neo phải) ===== */
.ah-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 50;
  min-width: 244px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  transform-origin: top right;
  animation: ah-menu-pop var(--dur, .15s) ease;
}
.ah-menu[hidden] { display: none; }

@keyframes ah-menu-pop {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to { opacity: 1; transform: none; }
}

/* Đầu menu: avatar + tên + @username */
.ah-menu-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.ah-menu-av {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--r-pill);
  overflow: hidden;
  background: var(--surface-2);
  color: var(--muted);
}
.ah-menu-av img { width: 100%; height: 100%; object-fit: cover; }
.ah-menu-av .fa-icon { width: 18px; height: 18px; }
.ah-menu-id {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.ah-menu-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ah-menu-user {
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mục menu (link & nút logout dùng chung) — chạm ≥44px */
.ah-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur, .15s) ease, color var(--dur, .15s) ease;
}
.ah-menu-item .fa-icon {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--muted);
  transition: color var(--dur, .15s) ease;
}
.ah-menu-item:hover,
.ah-menu-item:focus-visible {
  background: var(--surface-2);
  color: var(--text);
  outline: none;
}
.ah-menu-item:hover .fa-icon,
.ah-menu-item:focus-visible .fa-icon { color: var(--accent); }

/* Mục admin: icon nhấn brand để phân biệt nhóm quản trị */
.ah-menu-item-admin .fa-icon { color: var(--accent); }

.ah-menu-sep {
  height: 1px;
  margin: 4px 6px;
  border: 0;
  background: var(--border);
}

.ah-menu-form { margin: 0; }

/* Đăng xuất: ngữ nghĩa "thoát" → đỏ (danger) */
.ah-menu-logout { color: var(--danger); }
.ah-menu-logout .fa-icon { color: var(--danger); }
.ah-menu-logout:hover,
.ah-menu-logout:focus-visible { background: var(--danger-soft); color: var(--danger); }
.ah-menu-logout:hover .fa-icon,
.ah-menu-logout:focus-visible .fa-icon { color: var(--danger); }

/* ===== Mobile hẹp: vẫn là dropdown neo phải, chỉ chặn tràn + chạm to hơn =====
   (Không dùng position:fixed cho bottom-sheet vì .app-header có backdrop-filter →
   tạo containing block, fixed sẽ neo theo header 60px chứ không theo viewport.) */
@media (max-width: 560px) {
  .ah-menu {
    min-width: 220px;
    max-width: calc(100vw - 24px);
  }
  .ah-menu-item { min-height: 48px; }
}

/* Tôn trọng giảm chuyển động */
@media (prefers-reduced-motion: reduce) {
  .ah-menu { animation: none; }
}