/* ==========================================================================
 * impersonate.css —— v0.7.6 账号视角切换（超管 impersonation）
 * 覆盖：顶栏「超管视角」警示 pill、用户下拉说明行/菜单项、切换弹窗。
 * 全部颜色/圆角/间距/字号消费 core/static/tokens.json 令牌（--yx-*）。
 * ========================================================================== */

/* ---------- 顶栏：impersonation 态用户名旁警示 pill ---------- */
.yx-topbar__user-name-row {
  display: flex;
  align-items: center;
  gap: var(--yx-spacing-x1);
  min-width: 0;
}

.yx-topbar__impersonation-pill {
  flex: 0 0 auto;
  padding: 1px var(--yx-spacing-x1);
  border-radius: var(--yx-radius-tag);
  background: var(--yx-color-functional-warning-subtle);
  color: var(--yx-color-functional-warning-on-light);
  font-size: 10px;
  font-weight: var(--yx-font-weight-medium);
  line-height: var(--yx-font-lineHeight-tight);
  white-space: nowrap;
}

/* ---------- 用户下拉：impersonation 说明行 ---------- */
.yx-topbar__dropdown-note {
  margin-bottom: var(--yx-spacing-x1);
  padding: var(--yx-spacing-x1) var(--yx-spacing-x2);
  border-radius: var(--yx-radius-button);
  background: var(--yx-color-functional-warning-subtle);
  color: var(--yx-color-functional-warning-on-light);
  font-size: var(--yx-font-size-xs);
  line-height: var(--yx-font-lineHeight-tight);
}

/* ---------- 用户下拉：带图标菜单项（切换账号 / 退出切换） ---------- */
.yx-topbar__dropdown-item--icon {
  display: flex;
  align-items: center;
  gap: var(--yx-spacing-x2);
}

.yx-topbar__dropdown-item--icon svg {
  flex: 0 0 auto;
}

/* ---------- 切换弹窗（复用 .yx-modal-overlay / .yx-modal 组件类） ---------- */
.yx-impersonate-modal {
  max-width: 480px;
}

.yx-impersonate-modal__search {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: var(--yx-spacing-x2);
}

.yx-impersonate-modal__search > svg {
  position: absolute;
  left: var(--yx-spacing-x3);
  color: var(--yx-color-text-tertiary);
  pointer-events: none;
}

.yx-impersonate-modal__input {
  width: 100%;
  height: 36px;
  padding: 0 var(--yx-spacing-x3) 0 32px;
  border: 1px solid var(--yx-color-border-default);
  border-radius: var(--yx-radius-input);
  background: var(--yx-color-bg-search);
  font-family: inherit;
  font-size: var(--yx-font-size-base);
  color: var(--yx-color-text-primary);
  outline: none;
  transition: border-color var(--yx-motion-duration-base)
    var(--yx-motion-easing-standard);
}

.yx-impersonate-modal__input::placeholder {
  color: var(--yx-color-text-placeholder);
}

.yx-impersonate-modal__input:focus {
  border-color: var(--yx-color-brand-primary);
}

.yx-impersonate-modal__hint {
  margin: 0 0 var(--yx-spacing-x3);
  font-size: var(--yx-font-size-xs);
  color: var(--yx-color-text-muted);
  line-height: var(--yx-font-lineHeight-base);
}

.yx-impersonate-modal__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--yx-spacing-x1);
}

/* ---------- 候选用户行 ---------- */
.yx-impersonate-item {
  display: flex;
  align-items: center;
  gap: var(--yx-spacing-x3);
  padding: var(--yx-spacing-x2) var(--yx-spacing-x3);
  border-radius: var(--yx-radius-button);
  cursor: pointer;
  transition: background var(--yx-motion-duration-base)
    var(--yx-motion-easing-standard);
}

.yx-impersonate-item:hover {
  background: var(--yx-color-bg-subtle);
}

.yx-impersonate-item.is-disabled,
.yx-impersonate-item.is-disabled:hover {
  background: transparent;
  opacity: 0.5;
  cursor: not-allowed;
}

.yx-impersonate-item__avatar {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--yx-color-brand-primary);
  color: var(--yx-color-brand-on-primary);
  font-size: var(--yx-font-size-xs);
  font-weight: var(--yx-font-weight-semibold);
  overflow: hidden;
}

.yx-impersonate-item__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.yx-impersonate-item__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.yx-impersonate-item__name {
  display: flex;
  align-items: center;
  gap: var(--yx-spacing-x2);
  font-size: var(--yx-font-size-base);
  font-weight: var(--yx-font-weight-medium);
  color: var(--yx-color-text-primary);
  line-height: var(--yx-font-lineHeight-tight);
}

.yx-impersonate-item__username {
  font-size: var(--yx-font-size-xs);
  color: var(--yx-color-text-muted);
  line-height: var(--yx-font-lineHeight-tight);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yx-impersonate-item__role {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: 20px;
  padding: 0 var(--yx-spacing-x2);
  border-radius: var(--yx-radius-tag);
  background: var(--yx-color-fill-neutral);
  color: var(--yx-color-text-secondary);
  font-size: var(--yx-font-size-xs);
  white-space: nowrap;
}

.yx-impersonate-item__status {
  flex: 0 0 auto;
  font-size: var(--yx-font-size-xs);
  color: var(--yx-color-text-muted);
  white-space: nowrap;
}

.yx-impersonate-item__status.is-inactive {
  color: var(--yx-color-functional-danger-on-light);
}

/* 「当前」标记（is_current 行，warning 语义） */
.yx-impersonate-item__current {
  flex: 0 0 auto;
  padding: 1px var(--yx-spacing-x1);
  border-radius: var(--yx-radius-tag);
  background: var(--yx-color-functional-warning-subtle);
  color: var(--yx-color-functional-warning-on-light);
  font-size: 10px;
  font-weight: var(--yx-font-weight-medium);
  line-height: var(--yx-font-lineHeight-tight);
  white-space: nowrap;
}

.yx-impersonate-item__empty {
  padding: var(--yx-spacing-x5) var(--yx-spacing-x3);
  text-align: center;
  font-size: var(--yx-font-size-sm);
  color: var(--yx-color-text-muted);
}

/* ---------- 移动端：触控目标 ≥44px ---------- */
@media (max-width: 768px) {
  /* 下拉菜单项整行可点 ≥44px（a 项历史内联 display:block 需强制覆盖） */
  .yx-topbar__dropdown-item {
    min-height: 44px;
  }
  a.yx-topbar__dropdown-item {
    display: flex !important;
    align-items: center;
  }
  .yx-topbar__dropdown-item--icon {
    min-height: 44px;
  }
  .yx-impersonate-item {
    min-height: 44px;
  }
  .yx-impersonate-modal__input {
    height: 44px;
  }
}