/* 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)}
/* --sub-badge-w is set by theme.js (on the root element, not this one) to the subscription
   badge's actual rendered width — 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. */
.topbar-right{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-right:calc(4rem + var(--sub-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}
/* 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. */
.account-trigger{position:fixed;top:.75rem;right:1.4rem;z-index:200;width:34px;height:34px;border-radius:50%;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}
.account-trigger:hover,.account-trigger.open{border-color:var(--accent);color:var(--accent)}
.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}
  .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}
}