/* ══════════════════════════════════════════════════════════════════════
   account-menu.css — Push 94
   Shared dropdown styling for the universal .nav-user → .account-menu
   pattern. Lifted verbatim from wineries.html (lines 132-231) so the
   visual is identical across every admin surface.

   Pages link this file once + ship the full button + menu markup
   inline. account-menu.js handles the open/close JS + Clerk-user
   binding (avatar initials, am-name, am-email, sign-out wiring).

   CSS variables fall back to hard-coded values so the file works even
   on pages that don't load tokens.css.
   ══════════════════════════════════════════════════════════════════════ */

.nav-user {
  display: flex; align-items: center; gap: 8px;
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 8px 4px 4px;
  border-radius: 6px;
  transition: background 0.15s cubic-bezier(0.2,0.7,0.2,1);
  position: relative;
  border: 0;
  background: transparent;
  font-family: inherit;
}
.nav-user:hover { background: rgba(255,255,255,0.06); color: #fff; }

.nav-user .nav-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--blue, #0057A4); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
}

.nav-user-chev {
  width: 10px; height: 10px;
  color: rgba(255,255,255,0.45);
  transition: transform 0.18s cubic-bezier(0.2,0.7,0.2,1);
  flex-shrink: 0;
}
body.account-open .nav-user .nav-user-chev { transform: rotate(180deg); }

.account-menu {
  position: absolute;
  top: 50px; right: 32px;
  width: 280px;
  background: var(--surface, #fff);
  border: 1px solid var(--hairline-strong, rgba(27,42,74,0.22));
  border-top: 2px solid var(--copper, #C87533);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(27,42,74,0.18);
  z-index: 105;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.16s cubic-bezier(0.2,0.7,0.2,1), transform 0.16s cubic-bezier(0.2,0.7,0.2,1);
  overflow: hidden;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
/* Push 95 — !important so this rule beats whatever broad reset / inline
   rule on the admin-gated pages was keeping opacity at 0. Diagnosed
   live via Chrome MCP: the body.account-open selector matched, the
   menu was correctly in the DOM, but opacity stayed 0 unless !important
   was applied. Forcing it removes any cascade ambiguity across the
   8 admin surfaces. */
body.account-open .account-menu {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

.account-menu .am-user {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(to bottom, #fcfbf8, var(--surface, #fff));
  border-bottom: 1px solid var(--hairline, rgba(27,42,74,0.10));
}
.account-menu .am-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--blue, #0057A4); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px; font-weight: 600;
  flex: 0 0 auto;
}
.account-menu .am-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px; font-weight: 600;
  color: var(--navy, #1B2A4A);
  line-height: 1.25;
}
.account-menu .am-email {
  font-family: 'DM Sans', sans-serif;
  font-size: 11.5px;
  color: var(--ink-mute, #8d92a0);
  line-height: 1.3;
  margin-top: 1px;
}
.account-menu .am-list { padding: 6px 0; }
.account-menu .am-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 16px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--ink-soft, #4a4a4a);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s cubic-bezier(0.2,0.7,0.2,1), color 0.12s cubic-bezier(0.2,0.7,0.2,1);
}
.account-menu .am-item:hover {
  background: var(--copper-tint, rgba(200,117,51,0.08));
  color: var(--copper-deep, #a35a1f);
}
.account-menu .am-item svg { width: 14px; height: 14px; flex: 0 0 auto; opacity: 0.7; }
.account-menu .am-item:hover svg { opacity: 1; }
.account-menu .am-divider {
  height: 1px;
  background: var(--hairline, rgba(27,42,74,0.10));
  margin: 6px 0;
}
.account-menu .am-item-danger { color: var(--burgundy, #6B1D2A); }
.account-menu .am-item-danger:hover {
  background: rgba(107, 29, 42, 0.06);
  color: var(--burgundy, #6B1D2A);
}
/* Menu items rendered as <button> (e.g. Manage team) — strip native chrome
   so they match the <a> items. Font/color inherit from .am-item above. */
.account-menu button.am-item {
  width: 100%; background: none; border: 0; text-align: left;
  -webkit-appearance: none; appearance: none;
}

/* ── Deploy freshness in the avatar menu (rendered by portal-nav-render.js).
      Portal-wide, so no per-page corner stamp. ── */
.nav-user .nav-avatar { position: relative; }
.nav-user .nav-avatar.is-behind::after {
  content: ''; position: absolute; top: -1px; right: -1px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--copper, #C87533); border: 2px solid var(--navy, #1B2A4A);
}
/* Soft-tinted footer block so the build reads as a quiet, distinct panel. */
.account-menu .am-build {
  display: flex; align-items: center; gap: 10px;
  margin: 5px 8px 7px; padding: 8px 8px 8px 11px;
  border-radius: 9px; background: rgba(0,87,164,0.07);
  font-family: 'DM Sans', -apple-system, system-ui, sans-serif;
}
.account-menu .am-build-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  background: var(--ink-mute, #8d92a0);
}
.account-menu .am-build-dot.is-ok { background: #3a7250; }
.account-menu .am-build-dot.is-behind { background: var(--copper, #C87533); box-shadow: 0 0 0 3px rgba(200,117,51,0.18); }
.account-menu .am-build-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.account-menu .am-build-line {
  font: 600 12.5px/1.3 'DM Sans', -apple-system, system-ui, sans-serif;
  color: var(--navy, #1B2A4A); letter-spacing: 0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The human build date, riding after "Code Build" — smaller + gray like the status row. */
.account-menu .am-build-line .am-build-when { font-weight: 400; font-size: 11px; color: var(--ink-mute, #8d92a0); }
.account-menu .am-build-sub {
  font: 400 11px/1.3 'DM Sans', -apple-system, system-ui, sans-serif;
  color: var(--ink-mute, #8d92a0); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Behind the live deploy: let the "new version" message wrap to extra rows so it's
   fully readable (a title tooltip is also set in JS), and warm the block. */
.account-menu .am-build.is-behind { background: rgba(200,117,51,0.10); }
.account-menu .am-build.is-behind .am-build-sub { white-space: normal; color: var(--copper-deep, #a35a1f); font-weight: 600; }
/* Copy-status: icon only, with a hover tooltip (same navy-pill hover language). */
.account-menu .am-build-copy {
  position: relative; flex: 0 0 auto; width: 30px; height: 30px; padding: 0;
  border: 0; background: transparent; border-radius: 7px; cursor: pointer;
  color: var(--ink-soft, #4a4a4a); display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.12s ease, color 0.12s ease;
}
.account-menu .am-build-copy svg { width: 15px; height: 15px; opacity: 0.72; }
.account-menu .am-build-copy:hover { background: var(--copper-tint, rgba(200,117,51,0.12)); color: var(--copper-deep, #a35a1f); }
.account-menu .am-build-copy:hover svg { opacity: 1; }
.account-menu .am-build-copy.is-copied { color: #3a7250; }
.account-menu .am-build-copy::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 7px); right: 0; white-space: nowrap;
  background: var(--navy, #1B2A4A); color: #fff; font: 600 10px/1 'DM Sans', system-ui, sans-serif; letter-spacing: 0.02em;
  padding: 6px 9px; border-radius: 6px; box-shadow: 0 8px 20px rgba(27,42,74,0.3);
  opacity: 0; transform: translateY(3px); pointer-events: none; transition: opacity 0.16s ease, transform 0.16s ease; z-index: 30;
}
.account-menu .am-build-copy:hover::after, .account-menu .am-build-copy.is-copied::after { opacity: 1; transform: translateY(0); }
.account-menu .am-item-fresh { color: var(--copper-deep, #a35a1f); font-weight: 600; }
.account-menu .am-item-fresh svg { opacity: 1; }

/* ── Code Build hover detail — WHAT is in the incoming deploy(s), not just that one
      exists. Appended to <body> (the account menu is overflow:hidden), positioned in
      JS to the left of the menu. Crisp: one row per update, topline + plain-language
      description + any Flynn note + id + date/time. */
.am-build { cursor: default; transition: background 0.12s ease; }
.am-build:hover { background: rgba(0,87,164,0.11); }
.am-build.is-behind:hover { background: rgba(200,117,51,0.15); }
.am-build-pop {
  position: fixed; z-index: 120; width: 340px; max-width: calc(100vw - 24px);
  max-height: 70vh; overflow-y: auto; box-sizing: border-box;
  background: var(--surface, #fff);
  border: 1px solid var(--hairline-strong, rgba(27,42,74,0.22));
  border-top: 2px solid var(--copper, #C87533);
  border-radius: 10px; box-shadow: 0 16px 40px rgba(27,42,74,0.24);
  padding: 4px 0 2px;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  opacity: 0; pointer-events: none; transform: translateX(6px);
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.am-build-pop.is-open { opacity: 1; pointer-events: auto; transform: translateX(0); }
.am-build-pop .ab-hd {
  font: 700 9px/1 'DM Mono', monospace; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--copper-deep, #a35a1f); padding: 11px 14px 8px;
}
.am-build-pop .ab-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 9px 14px; border-top: 1px solid var(--hairline, rgba(27,42,74,0.10));
}
.am-build-pop .ab-main { flex: 1; min-width: 0; }
.am-build-pop .ab-title { font: 600 12.5px/1.35 'DM Sans', sans-serif; color: var(--navy, #1B2A4A); }
.am-build-pop .ab-desc { font: 400 11.5px/1.45 'DM Sans', sans-serif; color: var(--ink-soft, #4a4a4a); margin-top: 2px; }
.am-build-pop .ab-note {
  font: 500 11px/1.4 'DM Sans', sans-serif; color: var(--copper-deep, #a35a1f);
  margin-top: 4px; padding: 4px 8px; border-radius: 6px; background: var(--copper-tint, rgba(200,117,51,0.09));
}
.am-build-pop .ab-note-tag {
  font: 700 8px/1 'DM Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--copper, #C87533); margin-right: 6px;
}
.am-build-pop .ab-meta { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.am-build-pop .ab-id { font: 500 10px/1 'DM Mono', monospace; color: var(--navy, #1B2A4A); }
.am-build-pop .ab-when { font: 400 9.5px/1.2 'DM Mono', monospace; color: var(--ink-mute, #8d92a0); }
.am-build-pop .ab-empty { padding: 8px 14px 12px; font: 400 12px/1.4 'DM Sans', sans-serif; color: var(--ink-mute, #8d92a0); }
.am-build-pop .ab-history {
  display: block; text-align: right; text-decoration: none;
  padding: 9px 14px 10px; margin-top: 2px;
  border-top: 1px solid var(--hairline, rgba(27,42,74,0.10));
  font: 700 10px/1 'DM Mono', monospace; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--copper-deep, #a35a1f); transition: background 0.12s ease;
}
.am-build-pop .ab-history:hover { background: var(--copper-tint, rgba(200,117,51,0.09)); }