/* Shared design tokens + topbar, used by every page in this app — the Blazor-rendered
   Ask SQL page (via App.razor/MainLayout.razor) and every static dashboard under
   StaticPages/. Keep this as the single source of truth for the topbar look; new pages
   should link this file rather than re-inlining these rules. */

:root{
  --bg:#f4f3ef;--surface:#fff;--surface2:#f9f8f5;--border:#e8e6e0;--border2:#d4d1c9;
  --text:#1a1917;--text2:#6b6860;--text3:#6e6b64;
  --accent:#1a3a5c;--accent2:#2d5f8a;--accent-bg:#eef3f8;--accent-m:rgba(26,58,92,.08);
  --green:#166534;--gbg:#f0fdf4;--amber:#92400e;--abg:#fffbeb;
  --red:#991b1b;--rbg:#fef2f2;--blue:#1d4ed8;--bbg:#eff6ff;
  --r:10px;--rlg:14px;--sh:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
}
body{font-family:"DM Sans",sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;min-height:100vh;margin:0;padding:0}
.dash-body{padding:1.5rem 1.75rem;max-width:1440px;margin:0 auto}
/* Column, not row: topbar-right (tabs) always sits on its own line below topbar-left (title),
   on every page. Row layout used to be the default here, with wrapping to this same stacked
   look only incidental — it only triggered on pages whose topbar-right had enough content
   (e.g. dashboards' extra "As of" badges) to not fit beside the title at the current viewport
   width, so the same page could flip between "beside" and "stacked" depending on how wide the
   window was, and pages with nothing extra in topbar-right (just Ask SQL's tab-group) almost
   never wrapped at all. Forcing the stack makes every page look the same regardless of width. */
.topbar{background:var(--surface);border-bottom:1px solid var(--border);padding:.85rem 1.75rem;display:flex;flex-direction:column;align-items:flex-start;position:sticky;top:0;z-index:100;gap:.6rem}
.topbar-left .brand{font-size:.68rem;font-weight:600;color:var(--text3);letter-spacing:.1em;text-transform:uppercase}
.topbar-left .agent{font-size:1rem;font-weight:600;color:var(--text)}
/* --account-w, --sub-badge-w, and --version-badge-w are set by theme.js (on the root element,
   not this one) to the account-menu trigger's, subscription badge's, and Hermes-version badge's
   actual rendered widths — this element can't safely be given an inline style of its own on the
   Blazor "Ask SQL" page, since Blazor re-renders this subtree once its async
   dashboard-visibility check resolves and wipes any style attribute set on it by plain JS.
   1.4rem+.5rem mirror the trigger's own right offset and its gap to whatever sits left of it
   (the badges, if present, or this row otherwise). */
.topbar-right{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-right:calc(1.4rem + var(--account-w, 34px) + .5rem + var(--sub-badge-w, 0px) + var(--version-badge-w, 0px));min-width:0}
.badge{background:var(--accent-bg);color:var(--accent);padding:.3rem .7rem;border-radius:6px;font-size:.72rem;font-weight:500;border:1px solid rgba(26,58,92,.15)}
.btn-ghost{background:none;border:1px solid var(--border2);color:var(--text2);padding:.3rem .7rem;border-radius:6px;font-family:inherit;font-size:.76rem;cursor:pointer;transition:all .2s;text-decoration:none;display:inline-block}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
/* Page-nav tabs — touching segments (adjacent 1px borders collapsed via negative margin) so
   the whole page list reads as one connected strip; the current page shows as a filled,
   non-interactive tab instead of being omitted from the list entirely. */
.tab-group{display:flex;flex-wrap:wrap;min-width:0}
.tab-link{background:none;border:1px solid var(--border2);color:var(--text2);padding:.3rem .7rem;font-family:inherit;font-size:.76rem;cursor:pointer;transition:all .2s;text-decoration:none;display:inline-block;margin-left:-1px}
.tab-link:first-child{margin-left:0}
a.tab-link:hover{background:var(--surface2);color:var(--accent);position:relative;z-index:1}
.tab-active{background:var(--accent);color:#fff;font-weight:500;border-color:var(--accent);cursor:default;position:relative;z-index:1}
/* Category dropdowns built by theme.js around the same .tab-link items above (see
   "Nav grouping" there) - a handful of these wrap groups of tab-links instead of one flat row.
   .nav-group-panel reuses the account-dropdown's vertical-menu look rather than the horizontal
   pill look, since it's a dropdown list, not another row of tabs. */
.nav-group{position:relative}
.nav-group-label{background:none;border:1px solid var(--border2);color:var(--text2);padding:.3rem .7rem;font-family:inherit;font-size:.76rem;cursor:pointer;display:flex;align-items:center;gap:.35rem;margin-left:-1px;transition:all .2s}
.nav-group:first-child .nav-group-label{margin-left:0}
.nav-group-label:hover{background:var(--surface2);color:var(--accent);position:relative;z-index:1}
.nav-group-label.current{color:var(--accent);border-color:var(--accent);font-weight:500}
.nav-group-label .chev{font-size:.6rem;transition:transform .15s}
.nav-group-label.open{background:var(--accent);color:#fff;border-color:var(--accent);position:relative;z-index:2}
.nav-group-label.open .chev{transform:rotate(180deg)}
.nav-group-panel{display:none;position:absolute;top:100%;left:0;margin-top:4px;min-width:200px;background:var(--surface);border:1px solid var(--border2);border-radius:var(--rlg);box-shadow:var(--sh);padding:.4rem;flex-direction:column;gap:2px;z-index:150}
.nav-group-panel.open{display:flex}
.nav-group-panel .tab-link{border:none;margin:0;border-radius:8px;padding:.55rem .7rem;font-size:.82rem;display:block}
.nav-group-panel a.tab-link:hover{background:var(--surface2);color:var(--text)}
.nav-group-panel .tab-active{background:none;color:var(--accent);font-weight:500}
/* Account menu (theme toggle / change password / logout) — deliberately fixed to the viewport
   corner as a page-level action, outside the topbar's flex row, so it reads as separate from
   the nav links. Built by theme.js (not hand-copied per page like the old separate theme-fab/
   logout-fab pair this replaces) so every page picks up menu changes automatically — see the
   "Account menu" block there. The topbar-right margin above reserves clear space for it.
   min-width (not width) + the account-username span let the pill grow to fit the signed-in
   user's login code, injected by theme.js once /api/current-user resolves; with that span
   empty (or before the fetch resolves) the min-width alone still renders a plain 34px circle,
   matching the icon-only look this had before. */
.account-trigger{position:fixed;top:.75rem;right:1.4rem;z-index:200;min-width:34px;height:34px;border-radius:17px;background:var(--surface);border:1px solid var(--border2);color:var(--text2);display:flex;align-items:center;justify-content:center;font-size:1rem;cursor:pointer;box-shadow:var(--sh);transition:all .2s;padding:0 .4rem;box-sizing:border-box}
.account-trigger:hover,.account-trigger.open{border-color:var(--accent);color:var(--accent)}
/* :not(:empty) rather than a permanent gap on the trigger's flex row - keeps the icon-only
   state (before /api/current-user resolves, or if it fails) tight enough that min-width above
   still wins and renders a plain circle, exactly as before this element could show a username. */
.account-username{font-family:"DM Sans",sans-serif;font-size:.78rem;font-weight:500;color:var(--text);white-space:nowrap;max-width:9rem;overflow:hidden;text-overflow:ellipsis}
.account-username:not(:empty){margin-right:.4rem}
.account-icon{line-height:1}
.account-dropdown{position:fixed;top:3.25rem;right:1.4rem;z-index:200;min-width:190px;background:var(--surface);border:1px solid var(--border2);border-radius:var(--rlg);box-shadow:var(--sh);padding:.4rem;display:none;flex-direction:column;gap:2px}
.account-dropdown.open{display:flex}
.account-item{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;border-radius:8px;border:none;background:none;color:var(--text);font-family:inherit;font-size:.82rem;cursor:pointer;text-decoration:none;text-align:left;width:100%;box-sizing:border-box}
.account-item:hover{background:var(--surface2)}
.account-item .ico{font-size:.95rem;width:1.1rem;text-align:center}
@media(max-width:900px){
  .dash-body{padding:1rem}
  .topbar{padding:.8rem 1rem}
}
/* Phone web browsers: the 17-item tab-group has no room to wrap into rows without
   burying the page under a wall of nav pills, so make it one horizontally-scrollable
   row instead. Desktop/tablet wrapping behavior above is untouched.
   topbar-right also needs align-self:stretch here: .topbar's align-items:flex-start
   (desktop-only concern otherwise) leaves it shrink-to-fit sized, so overflow-x below
   has no real edge to clip against without this. stretch respects margin-right so it
   doesn't fight the account-menu/badge reservation on that rule.
   #subscription-expiry-badge (theme.js) is a fixed-position, content-width pill anchored
   to the right edge (right:4rem) with no left bound — on a narrow phone its left edge
   lands under the topbar-left title instead of clearing it, and it eats most of the
   width margin-right was reserving for the tab strip. !important is required: theme.js
   sets display:flex in the element's own inline style, which otherwise beats any external
   selector. Hiding it also zeroes the --sub-badge-w CSS var theme.js derives from its
   measured width (getBoundingClientRect on a display:none element is 0), so margin-right
   shrinks back down on its own. */
@media(max-width:640px){
  #subscription-expiry-badge{display:none!important}
  #hermes-version-badge{display:none!important}
  .topbar-right{align-self:stretch}
  .tab-group{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:.2rem}
  .tab-link{flex-shrink:0}
}