/* 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;
}
/* Generic .hidden — every host that uses this topbar needs the same
   display:none behaviour for #signed-out-controls (when signed in) AND
   #header-signout (when signed out). RetirementCalculator shipped
   without its own .hidden rule and rendered sign-in alongside sign-out
   on every signed-out load until this rule landed shared. Apps that
   want their own .hidden semantics on a specific element can still win
   via specificity (e.g. QuickCut's existing `.player-empty.hidden`
   already-display-none rule). !important guards against host CSS that
   accidentally outranks an unscoped overlay rule. */
.hidden { display: none !important; }
/* Kept for backward compatibility — was the only rule before the
   generic .hidden landed and some hosts may rely on the bare specifier
   for !important-free overrides. Both reduce to display:none here. */
#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 cluster (sign in / sign up / projects / 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.
   ``#header-projects`` is QuickCut-only (its topbar shortcut to the
   project explorer modal). Other .btn.icon-only buttons (e.g.
   doc-action helpers) stay transparent. */
#header-signin,
#header-signup,
#header-projects,
#user-menu-btn,
#header-signout {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}
#header-signin:hover,
#header-signup:hover,
#header-projects:hover,
#user-menu-btn:hover,
#header-signout:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}
#header-signin svg,
#header-signup svg,
#header-projects svg,
#user-menu-btn svg,
#header-signout svg {
  color: var(--accent-fg);
}

/* -----------------------------------------------------------------
   Apps-grid switcher
   -----------------------------------------------------------------
   ``#header-apps`` lives at the left of the right-cluster — first
   icon a user sees in that cluster, so it reads as "switch tools"
   before "manage account". Stays transparent (NOT azure) to keep the
   primary-CTA visual weight on the account cluster. */
#header-apps {
  background: transparent;
  color: var(--fg-dim);
  border-color: transparent;
}
#header-apps:hover {
  background: var(--bg-elev-3);
  color: var(--fg);
  border-color: var(--accent);
}
#header-apps svg { color: currentColor; }

/* Anchor for the popover — sits in the normal flow between
   ``#header-apps`` and the next sibling, but the popover itself is
   absolutely positioned off the parent topbar so the right-cluster
   doesn't shift when it opens.

   z-index here is what actually keeps the popover above the host app's
   ``#main`` / dropzone / sidebar. Without it, ``.apps-grid-wrap`` is
   ``position: relative`` with implicit z-index: auto, and any sibling
   stacking context (#main with position: relative in PdfFiller, etc.)
   wins by document order regardless of the inner popover's z-index.
   1100 is high enough to clear normal app surfaces but stays below the
   shared modal layer (5000) and toast layer (1500). */
.apps-grid-wrap { position: relative; z-index: 1100; }
.apps-grid-wrap.hidden { display: none; }

.apps-grid-popover {
  /* Fixed-position so the popover anchors to the viewport, not to the
     apps-grid button. JS sets ``top`` on open (just below the topbar's
     bottom edge) so the menu hangs from the topbar regardless of how
     tall the topbar grows per product. ``right`` is set here to 8px so
     the popover hugs the viewport's right edge, Google-style, instead
     of aligning to the button's right edge (which would leave a wider
     gutter beyond the account-controls cluster). */
  position: fixed;
  top: 56px;  /* JS overrides this on open; fallback so first paint
                 isn't off-screen if JS races. */
  right: 8px;
  /* ``background-color`` (not ``background``) so any host-app rule that
     accidentally sets ``background: <gradient/image>`` on a parent
     doesn't shorthand-clear our color. Hex fallback after the var so
     even a stripped/missing token can't drop us to transparent — the
     popover must read as a solid surface, never a window onto the
     content beneath. */
  background-color: var(--bg-elev-2, #1f242d);
  /* Isolate the stacking context so descendants can never accidentally
     inherit a parent's ``opacity`` / ``filter`` / ``mix-blend-mode``
     (which is what made the popover look "transparent" over the
     dropzone — the parent .topbar's backdrop-filter was bleeding into
     this subtree). */
  isolation: isolate;
  border: 1px solid var(--border);
  /* 24px corners (double the original 12px). The scrollbar that
     overflow-y: auto exposes on the right edge gets visually clipped
     by the corner radius — same trade-off Google Apps' switcher
     makes. A thin, theme-coloured scrollbar (rule below) softens the
     truncation so it reads as deliberate. */
  border-radius: 24px;
  padding: 14px 10px 10px;
  width: min(360px, calc(100vw - 24px));
  /* 70% of the available viewport space (viewport minus topbar + gutter).
     Keeps the popover shorter than the page content beneath it so the
     menu doesn't dominate the screen on tall windows; the slim
     scrollbar absorbs anything that doesn't fit. */
  max-height: calc((100vh - 80px) * 0.7);
  overflow-y: auto;
  /* Slim, theme-aware scrollbar so it doesn't fight the rounded
     corner. Firefox first (standard), then a more granular WebKit/
     Chromium fallback below. */
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  /* Explicit overflow-x: hidden. Without this, browsers default to
     overflow-x: auto when overflow-y is non-visible, and any tile that
     blows past its 1fr column would create a scrollbar (or visually
     clip the leftmost content). minmax(0, 1fr) below stops the blow-out
     at the source, but defending the popover edge belt-and-suspenders
     keeps a misbehaving tile from breaking layout cross-product. */
  overflow-x: hidden;
  z-index: 1100;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.apps-grid-popover::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.apps-grid-popover::-webkit-scrollbar-track {
  background: transparent;
}
.apps-grid-popover::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
.apps-grid-popover::-webkit-scrollbar-thumb:hover {
  background: var(--fg-dim, var(--border));
}
/* Hide every variant of the platform-default arrow buttons on both
   vertical AND horizontal scrollbars. The previous bare-selector rule
   missed the Windows Chromium "increment/decrement" single-button
   variant on the horizontal track, which is what the user reported
   still seeing. Belt-and-suspenders across single-button, double-button,
   start, end, vertical, and horizontal variants — plus 0×0 sizing so a
   browser that ignores ``display:none`` on this pseudo-element can't
   reserve space. */
.apps-grid-popover::-webkit-scrollbar-button,
.apps-grid-popover::-webkit-scrollbar-button:single-button,
.apps-grid-popover::-webkit-scrollbar-button:double-button,
.apps-grid-popover::-webkit-scrollbar-button:start,
.apps-grid-popover::-webkit-scrollbar-button:end,
.apps-grid-popover::-webkit-scrollbar-button:vertical,
.apps-grid-popover::-webkit-scrollbar-button:horizontal,
.apps-grid-popover::-webkit-scrollbar-button:vertical:start,
.apps-grid-popover::-webkit-scrollbar-button:vertical:end,
.apps-grid-popover::-webkit-scrollbar-button:horizontal:start,
.apps-grid-popover::-webkit-scrollbar-button:horizontal:end,
.apps-grid-popover::-webkit-scrollbar-button:decrement,
.apps-grid-popover::-webkit-scrollbar-button:increment {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}
/* Also hide the corner where a vertical+horizontal scrollbar would
   meet (we shouldn't have horizontal scroll given overflow-x: hidden,
   but if a future tile blows the layout, the corner still vanishes). */
.apps-grid-popover::-webkit-scrollbar-corner {
  display: none;
  background: transparent;
}

.apps-grid-header {
  padding: 0 8px 10px;
  color: var(--fg-dim);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Each category is its own rounded sub-panel — Google-style. Slightly
   tinted against the popover background so the section reads as a card,
   not just a label. */
.apps-grid-section {
  background: var(--bg-elev-3, var(--border));
  border-radius: 16px;
  padding: 14px 12px 12px;
  margin-bottom: 8px;
}
.apps-grid-section:last-child { margin-bottom: 0; }

.apps-grid-section-label {
  padding: 0 6px 10px;
  color: var(--fg-dim);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.apps-grid-tiles {
  display: grid;
  /* 3 columns matching Google's apps switcher. minmax(0, 1fr) — not
     bare 1fr — so a long product name can't push its column past
     a third of the section. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px 4px;
}

.apps-grid-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 6px;
  border-radius: 12px;
  color: var(--fg);
  text-decoration: none;
  text-align: center;
  transition: background 120ms ease;
  /* Tile is a grid-cell child AND a flex container itself; without
     min-width: 0 the cell can't shrink below its content's intrinsic
     width, defeating the minmax(0, 1fr) above. */
  min-width: 0;
  /* Subtle hover-only affordance — no permanent border so the tile
     looks Google-clean at rest. */
}
.apps-grid-tile:hover {
  background: rgba(0, 162, 232, 0.10);
}
.apps-grid-tile.is-active {
  background: var(--accent-soft, rgba(0, 162, 232, 0.14));
}
.apps-grid-tile.is-active .apps-grid-tile-name { color: var(--accent); }

.apps-grid-tile-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 12px;
  object-fit: contain;
}
.apps-grid-tile-icon--blank {
  background: var(--bg-elev-3);
  border: 1px dashed var(--border);
}

.apps-grid-tile-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.25;
}

/* Status chip under the product name. Mirrors the badge users see
   on the www.supercala.ai landing card so "Beta" reads the same in
   both surfaces. Compact + muted so it doesn't compete with the tile
   icon — readable signal, not a CTA. */
.apps-grid-tile-badge {
  display: inline-block;
  margin-top: 2px;
  padding: 1px 6px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
  border-radius: 999px;
}
.apps-grid-tile-badge.beta {
  background: var(--accent-soft, rgba(0, 162, 232, 0.14));
  color: var(--accent, #00a2e8);
}

/* 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;
}