/**
 * client/assets/css/admin-header.css
 *
 * Phase 23 — Admin Profile / Account Settings. Styles the header
 * user-menu that assets/js/admin-header.js injects into
 * components/layout/header.php's pre-existing (but until now empty)
 * `#ant-header-actions-slot` on every Admin Panel page — that file's
 * own Phase 3 docblock reserved this exact addition ("the Admin
 * user-menu (added in Phase 4/23)").
 *
 * Loaded site-wide via components/layout/head.php (Rule 6 precedent:
 * theme.css/select2.css are linked there the same way).
 */

.ant-admin-usermenu {
  position: relative;
  display: inline-flex;
}

.ant-admin-usermenu__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 4px 12px 4px 4px;
  cursor: pointer;
  color: var(--color-text-primary);
  font: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.ant-admin-usermenu__trigger:hover {
  background: var(--color-surface-hover, var(--color-primary-50));
  border-color: var(--color-primary-300);
}
.ant-admin-usermenu__trigger[aria-expanded='true'] {
  border-color: var(--color-primary-400);
  box-shadow: var(--shadow-focus);
}
[data-theme='dark'] .ant-admin-usermenu__trigger:hover {
  background: var(--color-dark-surface);
}

.ant-admin-usermenu__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary-600), var(--color-primary-400));
  color: var(--color-neutral-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-caption);
  font-weight: 700;
  letter-spacing: 0.02em;
  flex: 0 0 auto;
  box-shadow: 0 2px 6px rgba(30, 58, 138, 0.3);
}
.ant-admin-usermenu__trigger i {
  color: var(--color-text-placeholder);
  font-size: 11px;
  transition: transform 0.15s ease;
}
.ant-admin-usermenu__trigger[aria-expanded='true'] i {
  transform: rotate(180deg);
  color: var(--color-primary-500);
}

.ant-admin-usermenu__panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  min-width: 230px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
  padding: var(--space-2);
  z-index: 900;
  display: none;
  animation: ant-menu-pop 0.14s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
@keyframes ant-menu-pop {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.ant-admin-usermenu__panel.is-open {
  display: block;
}

.ant-admin-usermenu__username {
  padding: var(--space-2) var(--space-3) var(--space-3);
  font-weight: 700;
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
  overflow-wrap: anywhere;
  border-bottom: 1px solid var(--color-border-soft);
  margin-bottom: var(--space-2);
}
.ant-admin-usermenu__username small {
  display: block;
  font-weight: 500;
  font-size: var(--font-size-caption);
  color: var(--color-text-placeholder);
  margin-top: 2px;
}

.ant-admin-usermenu__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--color-text-primary);
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}
.ant-admin-usermenu__item i {
  width: 18px;
  text-align: center;
  color: var(--color-text-secondary);
  font-size: 14px;
}
.ant-admin-usermenu__item:hover {
  background: var(--color-primary-50);
}
.ant-admin-usermenu__item--danger {
  color: var(--color-danger-600, var(--color-danger-500));
}
.ant-admin-usermenu__item--danger i {
  color: var(--color-danger-500);
}
.ant-admin-usermenu__item--danger:hover {
  background: var(--color-error-100);
}