/* Account menu in the app top bar (includes/nav_user_menu.html, opened by js/drobo-main.js), drawn like the theme
   switch's .ui-menu in css/drobo-ui.css: the same card, border, radius, shadow and pop-in, .8125rem rows with .ti icons,
   inset separators between groups, and a header (avatar, name, handle, email, plan) at .75rem.
   Loaded after css/drobo-ui.css by drobo/app/base.html. It overrides the marketing menu in css/drobo.css, which stays
   as it is for pages outside the app frame. Every colour is a --ui-* token, so light and dark follow the theme. */

/* ── Trigger: the avatar pill, quiet like the other top-bar buttons ─────── */
body.ui-app .nav-user-trigger.nav-pill { padding: 0 .45rem 0 .25rem !important; transform: none; transition: background .15s, color .15s; }
body.ui-app .nav-user-trigger.nav-pill:hover, body.ui-app .nav-user-trigger.nav-pill[aria-expanded="true"] { transform: none; box-shadow: none; }
body.ui-app .nav-user-chevron { transition: transform .2s var(--ui-ease); }
body.ui-app .nav-user-trigger[aria-expanded="true"] .nav-user-chevron { transform: rotate(180deg); }

/* ── Panel ──────────────────────────────────────────────────────────────── */
/* The top bar blurs what is under it, which makes it the box for fixed children too, so the panel always drops from
   the trigger, as the theme menu does. Opening: js shows it, then adds .is-open (the pop-in); closing fades it out. */
body.ui-app .nav-user-panel {
  position: absolute; top: calc(100% + .4rem); right: 0; left: auto; z-index: 60;
  width: 16.5rem; min-width: 0; max-width: calc(100vw - 1.5rem); max-height: min(36rem, calc(100dvh - 4.5rem));
  padding: .3rem; box-sizing: border-box; color: var(--ui-fg); background: var(--ui-card);
  border: 1px solid var(--ui-border); border-radius: 10px; box-shadow: var(--ui-shadow-lg);
  backdrop-filter: none; -webkit-backdrop-filter: none; opacity: 0; transform: none; transition: opacity .12s ease-out;
}
body.ui-app .nav-user-panel.is-open { opacity: 1; transform: none; transition: none; animation: ui-pop .16s var(--ui-ease); }
body.ui-app .nav-user-panel-scroll { scrollbar-width: thin; }
body.ui-app .nav-user-panel-body { padding: 0; }

/* Header: avatar, then name, handle, email and plan */
body.ui-app .nav-user-panel-head { position: relative; gap: .65rem; padding: .5rem .55rem .75rem; margin-bottom: .3rem; border: 0; }
body.ui-app .nav-user-panel-avatar { width: 2.25rem; height: 2.25rem; border: 0; box-shadow: 0 0 0 1px var(--ui-border); }
body.ui-app .nav-user-panel-avatar--initial { font-size: .8125rem; font-weight: 600; }
body.ui-app .nav-user-panel-copy { display: grid; gap: .05rem; }
body.ui-app .nav-user-panel-name { margin: 0; font-size: .8125rem; font-weight: 600; line-height: 1.35; color: var(--ui-fg); }
body.ui-app .nav-user-panel-handle, body.ui-app .nav-user-panel-email, body.ui-app .nav-user-panel-plan {
  margin: 0; overflow: hidden; font-size: .75rem; font-weight: 400; line-height: 1.4; color: var(--ui-muted); text-overflow: ellipsis; white-space: nowrap;
}
body.ui-app .nav-user-panel-plan { display: flex; align-items: center; gap: .3rem; margin-top: .3rem; font-weight: 500; color: var(--ui-fg-2); }
body.ui-app .nav-user-panel-plan .ti { flex: 0 0 auto; font-size: .8125rem; color: var(--ui-faint); }
body.ui-app .nav-user-panel-plan[data-tone="ok"] .ti { color: var(--ui-primary); }

/* Separators: the theme menu's hairline, inset from the edge */
body.ui-app .nav-user-panel-head::after {
  content: ""; position: absolute; right: -.1rem; bottom: 0; left: -.1rem; height: 1px; background: var(--ui-border);
}
body.ui-app .nav-user-group + .nav-user-group, body.ui-app .nav-user-panel-foot { margin: 0; padding: 0; border: 0; }
body.ui-app .nav-user-group + .nav-user-group::before, body.ui-app .nav-user-panel-foot::before {
  content: ""; display: block; height: 1px; margin: .3rem .2rem; background: var(--ui-border);
}
body.ui-app .nav-user-section-label {
  margin: 0; padding: .35rem .55rem .25rem; font-size: .6875rem; font-weight: 600; letter-spacing: .02em; line-height: 1.2;
  text-transform: none; color: var(--ui-faint);
}

/* Rows: the theme menu's rows */
body.ui-app .nav-user-panel .nav-user-item {
  display: flex; align-items: center; gap: .55rem; width: 100%; min-height: var(--ui-h-sm); padding: .35rem .55rem; box-sizing: border-box;
  font-size: .8125rem; font-weight: 400; line-height: 1.5; color: var(--ui-fg-2); text-decoration: none;
  background: transparent; border-radius: 6px; box-shadow: none; transform: none; animation: none; transition: background .15s, color .15s;
}
body.ui-app .nav-user-panel .nav-user-item .ti { width: auto; font-size: 1rem; color: var(--ui-muted); opacity: 1; }
body.ui-app .nav-user-panel .nav-user-item:hover, body.ui-app .nav-user-panel .nav-user-item:focus-visible {
  color: var(--ui-fg); background: var(--ui-hover); outline: none; transform: none;
}
/* This page: bold with a tick, as the theme menu marks the chosen theme */
body.ui-app .nav-user-panel .nav-user-item.is-active { color: var(--ui-fg); font-weight: 600; background: transparent; box-shadow: none; }
body.ui-app .nav-user-panel .nav-user-item.is-active:hover { background: var(--ui-hover); }
body.ui-app .nav-user-panel .nav-user-item.is-active::after { content: "✓"; margin-left: auto; font-size: .75rem; color: var(--ui-primary); }
body.ui-app .nav-user-panel .nav-user-item--logout:hover, body.ui-app .nav-user-panel .nav-user-item--logout:focus-visible,
body.ui-app .nav-user-panel .nav-user-item--logout:hover .ti, body.ui-app .nav-user-panel .nav-user-item--logout:focus-visible .ti { color: var(--ui-bad); }
body.ui-app .nav-user-panel .nav-user-item--logout:hover, body.ui-app .nav-user-panel .nav-user-item--logout:focus-visible {
  background: color-mix(in srgb, var(--ui-bad) 10%, transparent);
}

/* Phones and tablets: the marketing menu turns into a full-width sheet with a scrim and a scroll lock; in the app it
   stays a dropdown like the theme menu, and the page keeps the body it always has (clip, not a scroll box of its own:
   `overflow-y: auto` here made the body its own scroller, and the sticky top bar jumped up by however far the page was
   scrolled each time the menu opened). */
@media (max-width: 1023px) {
  body.ui-app.nav-user-open { overflow-x: clip; overflow-y: visible; }
  body.ui-app.nav-user-open::before { content: none; }
  body.ui-app .nav-user-panel { position: absolute; top: calc(100% + .4rem); right: 0; left: auto; width: 16.5rem; max-height: min(36rem, calc(100dvh - 4.5rem)); }
  body.ui-app .nav-user-panel.is-open { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.ui-app .nav-user-panel, body.ui-app .nav-user-panel.is-open { animation: none; transition: none; }
}