/* Topbar — Phase 5 of mockup H rollout (2026-06-26).
 *
 * Copied verbatim from:
 *   docs/mockups/dashboard/mockup_h_dashboard_warm.html
 *   lines 184-227 (.topbar, .topbar .breadcrumb, .topbar-spacer,
 *                  .topbar-theme*)
 *
 * 2026-06-27: refactored to use --topbar-* theme tokens from
 * static/styles.css so the topbar adapts per theme. The mockup's
 * `.topbar` is dark in Slate + Dark variants and (per operator's intent)
 * light on Pro — the per-theme values in styles.css land each one.
 * Same family as the 2026-06-27 sidebar refactor.
 *
 * The .topbar-theme / .topbar-theme-btn / .topbar-theme-menu rules
 * already exist in static/styles.css (the original picker location
 * lived in <main class="content"> with absolute positioning). The
 * MOVE into the topbar is markup-only — the picker keeps id="topbar-theme"
 * and the existing static/theme.js click handlers continue to work
 * unchanged. The styles below override the previous `position: absolute;
 * top: 16px; right: 24px;` placement so the picker renders inline inside
 * the topbar flex row.
 */

/* ============ TOPBAR ============ */
.topbar {
  background: var(--topbar-bg);
  color: var(--topbar-text);
  padding: 10px 24px;
  /* 2026-07-26 (install-button / theme-◐ overlap fix): the topbar's right
     edge IS the viewport's right edge (`.layout-with-topbar` is the flex
     sibling of the sidebar), and the theme ◐ is `position: fixed` at that
     same corner (static/styles.css `.theme-toggle-fixed`) — out of flow, so
     it reserves nothing. Anything right-aligned in this row therefore lands
     under it. The "Install Claimind" PWA prompt below did exactly that: at
     the base 24px right padding the button's edge sat 30px INSIDE the ◐'s
     54px footprint (measured in headless Chromium at 1440x900 and 1280x800),
     so the two read as one jammed cluster and the prompt's dismiss "x" was
     hidden under the toggle entirely — unclickable.

     Reserve the toggle's published footprint (--theme-toggle-reserve, next
     to the rule that defines the toggle's position) plus a 12px breathing
     gap, so the row's right-aligned content STOPS 12px clear of the ◐ at
     every width. Layout reserve, not a stacking hack: no z-index change, the
     toggle itself does not move (its position is device-tested — see the
     #493 session-banner safe-area work), and this holds with the
     session-expired banner up too, since that banner pushes this topbar and
     the toggle down by the same measured height.

     No phantom gap when the install prompt is absent (the common case — it
     only appears in browsers that fire `beforeinstallprompt`, and never in
     the installed PWA): the topbar background spans the full width and its
     only right-aligned children are the two install surfaces, so with them
     hidden this padding just shortens the invisible `.topbar-spacer`.
     Left padding is untouched (the <=900px rule below still owns its 60px
     hamburger clearance). The px fallback keeps the reserve in browsers
     that would drop the whole declaration on an unknown custom property. */
  padding-right: calc(12px + var(--theme-toggle-reserve, 54px));
  font-weight: 600;
  font-size: 13px;
  display: flex; align-items: center; gap: 16px;
  border-bottom: 1px solid var(--topbar-border);
}
/* 2026-07-12 (Pro all-gray look-see, reversible): the dashboard's
 * firm-info topbar reads as a white strip against the gray card
 * floor. `.topbar-dashboard` is a template-only class (base.html)
 * set exclusively when `topbar_firm_info` is passed — i.e. only on
 * the dashboard route. Claim-detail's topbar (breadcrumb, no
 * firm-info) keeps the base `--topbar-bg`. Scoped to Pro; text/
 * controls unchanged. To revert: delete this rule. */
/* 2026-07-14 (firm-header-always-top fix): operator brief — the org
 * header (company name + date/counts line + theme menu) must ALWAYS
 * be frozen at the very top of the page, fully independent of the
 * CLAIMS dock unit's up/down toggle (static/css/dashboard.css
 * `.dashboard-dock-unit`). Previously `.topbar` had no sticky/fixed
 * positioning at all — it was just the first in-flow child of
 * `.layout-with-topbar`, so it scrolled away with everything else,
 * and had no relationship to the dock toggle (dock-bottom moves the
 * CLAIMS bar to the viewport bottom; it never touched the header —
 * the "it moves to the bottom" the operator described was really
 * "it just scrolls out of view like normal content").
 *
 * Scoped to `.topbar-dashboard` only (template-only class, set
 * exclusively when `topbar_firm_info` is passed — the dashboard
 * route) so claim-detail's topbar (breadcrumb, its own separate
 * frozen-header system) is untouched.
 *
 * z-index 70 matches `.sidebar`'s tier (static/styles.css) — both are
 * "always-visible chrome" — and clears `.dashboard-dock-unit`'s 50
 * (top-dock, sticky) and 60 (bottom-dock, fixed) so the header always
 * paints above the dock unit during the sticky hand-off at scroll.
 * `.dashboard-dock-unit`'s own top-dock `top` offset is
 * `var(--dash-topbar-h)` (dashboard.css) instead of `0` so it docks
 * BELOW this header instead of underneath/behind it — see
 * templates/dashboard.html for the JS that measures and sets that
 * variable (the header's real height varies by theme/content, so a
 * hardcoded px offset would drift out of sync). */
.topbar-dashboard {
  position: sticky;
  top: 0;
  z-index: 70;
}
body[data-theme="pro"] .topbar.topbar-dashboard {
  background: var(--claim-page-floor);
  /* 2026-07-12 (band-divider pass, same-day follow-up): once the
     header and the filter bar below it share the same floor gray,
     the base `border-bottom: 1px solid var(--topbar-border)`
     (#e5e7eb — LIGHTER than the #c4cdd9 floor) became invisible,
     so the header/filter-bar boundary disappeared. Bumps to
     --border-strong (#9ca3af), a clear step darker than the floor,
     for this route only. */
  border-bottom: 1px solid var(--border-strong);
}
/* Per mockup_h_dashboard_warm.html L3963-3982 the topbar wraps its
 * contents (firm-info OR breadcrumb, spacer, theme picker) in a
 * single .topbar-row1 flex row. `flex: 1` + `min-width: 0` lets the
 * row span the full topbar width and shrink correctly when the
 * firm-info text would otherwise push the theme picker off-screen. */
.topbar .topbar-row1 {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}
.topbar .breadcrumb { color: var(--topbar-muted); font-size: 12px; font-weight: 500; }
.topbar .breadcrumb strong { color: var(--topbar-text); }
.topbar .topbar-spacer { flex-grow: 1; }

/* Firm-info block — dashboard route only (base.html renders it
 * only when `topbar_firm_info` is in context). Two-line layout:
 * company name <h1> on top, dated stats meta below. Theme tokens
 * carry the colors so the block adapts across Pro/Slate/Dark. */
.topbar .firm-info {
  display: flex;
  flex-direction: column;
  /* 2026-07-11 (operator brief, spacing pass): bumped 2px -> 4px — a
     touch more room between the company name and the dated stats
     line, matching the small breathing-room bump below the topbar. */
  gap: 4px;
  min-width: 0;
}
.topbar .firm-info h1 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--topbar-text);
  line-height: 1.2;
}
.topbar .firm-info .meta {
  font-size: 12px;
  font-weight: 500;
  color: var(--topbar-muted);
  margin-top: 1px;
  line-height: 1.3;
}
.topbar .firm-info .meta strong {
  color: var(--topbar-text);
  font-weight: 700;
}

/* Theme picker — when nested inside .topbar, override the legacy
 * absolute-position rule from styles.css so the picker renders inline.
 * The button + menu styling stays identical (legacy rules in styles.css
 * already match the mockup token-for-token). */
.topbar .topbar-theme {
  position: relative;
  /* Reset the legacy `top: 16px; right: 24px;` that pinned the picker
     to the top-right corner of <main class="content">. Inside the
     topbar it is a regular flex item. */
  top: auto;
  right: auto;
}

/* 2026-07-13 (mobile responsive fix): the fixed hamburger/logo button
   (static/styles.css .sidebar-toggle, shown at <=900px) sits at
   `top: 8px; left: 8px; width: 44px` — a 52px-wide top-left zone.
   `.content` already gets `padding-top: 64px` in that same breakpoint
   to clear it vertically, but `.topbar` is a SIBLING that renders
   ABOVE `.content` (templates/base.html, both inside
   `.layout-with-topbar`) at the very top of the page — exactly where
   the button sits — and its own 24px left padding (base rule above)
   put the firm-info title/subtitle (or the breadcrumb, on other
   routes) directly underneath it. Not scoped to `.topbar-dashboard`:
   the fixed button is a page-wide layout element, not a dashboard-only
   concern, so every route sharing this topbar needs the same
   clearance. 60px matches the `padding-top: 60px` convention already
   used in styles.css for the same button's footprint elsewhere. */
@media (max-width: 900px) {
  .topbar {
    padding-left: 60px;
  }
}

/* 2026-07-19 (round 4, sticky-header seam fix): rounds 2-3 tried
   splitting the mobile-dash frozen zone across TWO independently
   sticky pieces — this topbar (org name + AI button, top:0) and
   dashboard.css's .mobile-dash-sticky-controls (search + filter,
   top: var(--dash-topbar-h)) — trusting a JS-measured height to line
   them up exactly. On a real device the two didn't quite match: a
   transparent seam opened between them and claim rows scrolled up
   through it, visible sandwiched between the org row and the search
   bar. Root cause: two separately-positioned sticky elements can
   never GUARANTEE zero gap, only approximate it.

   Fix: the ENTIRE mobile-dash frozen zone (org name, AI button,
   search, filter) is now ONE sticky container living inside
   .mobile-dash itself (static/css/dashboard.css
   .mobile-dash-sticky-controls) — a single opaque block has no seam
   to open, by construction, regardless of any measured height. This
   topbar therefore has NO role on the mobile-dash breakpoint anymore
   (firm-info's 2-line desktop content and the theme picker are both
   already dashboard/desktop-only) — hidden wholesale here instead of
   per-child, and `.content`'s own padding-top clearance for the fixed
   hamburger toggle (static/styles.css, <=900px) is restored (dashboard.
   css) since this topbar can no longer be relied on to provide it.

   2026-07-19 (round 5, desktop/tablet frozen-header parity): the
   same seam bug this topbar was created to dodge on mobile turned out
   to still be live on desktop (>=1200px) — this topbar (org name,
   top:0) and dashboard.css's .dashboard-dock-unit (search/filter,
   top:var(--dash-topbar-h)) were the SAME two-independently-sticky-
   pieces pattern, just at the desktop breakpoint instead of the
   mobile one. Fix: org name + stats moved into templates/
   dashboard.html's own `.dashboard-firm-info`, now wrapped alongside
   `.dashboard-dock-unit` in ONE sticky container (`.dashboard-sticky-
   header`, dashboard.css) for every width the dashboard route
   renders at. This topbar's firm-info branch has no role on the
   dashboard route at ANY width anymore, so the previous <=1199px-only
   hide is now unconditional. */
.topbar-dashboard {
  display: none;
}

/* ==========================================================================
 * In-app "Install Claimind" prompt (2026-07-16)
 *
 * JS (static/js/pwa_install.js) decides WHEN either surface below is
 * shown (both start `display:none` inline in the template — no flash
 * on platforms/browsers where they never apply); this file only
 * covers HOW they look. Theme tokens only, matching the theme-picker
 * button right next to it (`--topbar-text`, `--topbar-muted`,
 * `--accent`/`--cta`) so it reads as part of the same topbar chrome
 * on Pro/Slate/Dark rather than a bolted-on banner.
 * ========================================================================== */
.pwa-install-prompt {
  display: none; /* JS flips to inline-flex */
  align-items: center;
  gap: 4px;
}
.pwa-install-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--cta, var(--accent));
  color: var(--on-accent);
  border: none;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.pwa-install-btn:hover {
  background: var(--cta-hover, var(--accent));
}
.pwa-install-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
.pwa-install-btn i {
  font-size: 13px;
}
.pwa-install-dismiss {
  background: none;
  border: none;
  color: var(--topbar-muted);
  font-size: 16px;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
  border-radius: 4px;
}
.pwa-install-dismiss:hover {
  color: var(--topbar-text);
  background: var(--surface-2, transparent);
}
.pwa-install-ios-hint {
  display: none; /* JS flips to inline-flex */
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--topbar-muted);
  white-space: nowrap;
}
.pwa-install-ios-hint i {
  font-size: 13px;
}

/* Narrow viewports: the hint's full sentence + the theme picker won't
   both fit next to the breadcrumb — drop the text hint (the button
   variant already only shows an icon + short label, which does fit;
   iOS users without room for the hint can still find the native
   Share-sheet install path on their own). */
@media (max-width: 640px) {
  .pwa-install-ios-hint {
    display: none !important;
  }
}