/* SuperCala studio topbar — shared icon-button + popover styles for
 * the right-anchored controls (settings, sign-in, sign-up). Loaded by
 * every utility app that follows the cross-product topbar design
 * (ChartLab, JsonEditor, PdfFiller, QuickCut — and any new ones).
 *
 * Consumes the tokens defined in supercala-app-tokens.css
 * (--bg-elev-2, --bg-elev-3, --accent, --fg, --fg-dim, --border) so
 * dark/light themes work without per-app overrides. Per-app
 * stylesheets load AFTER this file; if a product wants to nudge a
 * specific rule, it can override on cascade.
 *
 * Design principle: theme toggle lives INSIDE the settings popover,
 * not as its own topbar icon. See memory/design_topbar_icons.md.
 */

/* The topbar is a flex row; the brand sits left, the doc/title fills
   the middle, and this cluster anchors to the far right. ChartLab's
   topbar is a CSS grid so it overrides this with `justify-self: end`
   in its own app.css. */
.topbar-right {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
}

/* Wrapper for the logged-out icon pair (sign-in + sign-up). Hidden via
   .hidden when the user is signed in. */
#signed-out-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}
/* The `.hidden` class is what every host page applies to
   #signed-out-controls when a real session exists. Previously the
   class was set but no rule defined it, so signed-in users saw the
   sign-in / sign-up icons next to their settings + sign-out icons.
   Scoped to the wrapper to avoid colliding with any other .hidden
   class a host page might define for its own non-display-none
   semantics. */
#signed-out-controls.hidden { display: none; }

/* Icon-only square button — used for settings/sign-in/sign-up.
   24×24 inline SVG inside, currentColor-stroked so it follows theme. */
.btn.icon-only {
  padding: 6px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.btn.icon-only:hover {
  background: var(--bg-elev-3);
  border-color: var(--accent);
}
.btn.icon-only svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* The account-action quartet (sign in / sign up / settings / sign
   out) wears the SuperCala azure so it reads as the primary CTA
   cluster on the topbar — matches LedgerPilot + MyNetWorth so the
   family looks consistent. ``#header-signout`` is hidden via the
   ``.auth-only`` class on the logged-out path; once revealed it sits
   at the right of the cluster as the natural mirror of sign-in.
   Other .btn.icon-only buttons (e.g. doc-action helpers) stay
   transparent, since this rule is keyed to the four account IDs. */
#header-signin,
#header-signup,
#user-menu-btn,
#header-signout {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}
#header-signin:hover,
#header-signup:hover,
#user-menu-btn:hover,
#header-signout:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}
#header-signin svg,
#header-signup svg,
#user-menu-btn svg,
#header-signout svg {
  color: var(--accent-fg);
}

/* Settings popover — anchored to the gear button below, tab-style
   stack of rows (email header + theme toggle + account links + sign
   out). Wider min-width than the previous account-only popover to
   accommodate the email row + the theme toggle's right-aligned icon. */
.user-menu { position: relative; }
.popover {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  z-index: 1000;
}
.popover a {
  padding: 8px 12px;
  color: var(--fg);
  text-decoration: none;
  border-radius: 4px;
}
.popover a:hover { background: var(--bg-elev-3); }

/* Email row at the top of the popover — quiet, with a separator below.
   Hidden when empty (logged-out state). */
.popover-email {
  padding: 8px 12px 6px;
  color: var(--fg-dim);
  font-size: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.popover-email:empty { display: none; }

/* Generic interactive row (theme toggle, future settings entries).
   Label on the left, optional icon on the right. */
.popover-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  color: var(--fg);
  background: transparent;
  border: none;
  border-radius: 4px;
  font: inherit;
  cursor: pointer;
  width: 100%;
  text-align: left;
}
.popover-row:hover { background: var(--bg-elev-3); }
.popover-row-icon { display: inline-flex; }
.popover-row-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}