/* Shared application-bar STYLES. The nav markup itself is static HTML in each page
   (so navigation works without JavaScript and is visible in view-source); this file
   only styles it, keeping one visual source of truth.

   Original note:
   One source of truth for navigation across the chat, KB and metrics pages, so the nav can't
   drift per page. Inherits each page's existing design tokens (--bg/--surface/--accent/...),
   which are identical across pages, so it needs no palette of its own. */

.appbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:flex-end; gap:18px; flex-wrap:wrap;   /* tabs sit ON the bottom border */
  padding:0 18px; min-height:52px;
  background:var(--bg); border-bottom:1px solid var(--line);
  font-family:var(--sans);
}
.appbar .brand{display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink);
  padding:9px 0 12px; white-space:nowrap}
.appbar .brand .dot{width:26px; height:26px; border-radius:7px; background:var(--accent);
  color:var(--accent-ink,#fff); display:grid; place-items:center;
  font-family:var(--mono); font-weight:700; font-size:13px}
.appbar .brand b{font-size:15px; letter-spacing:-.01em}

/* primary navigation — boxed tabs sitting on the bar's bottom border */
.appbar nav{display:flex; align-items:flex-end; gap:3px; flex-wrap:wrap; margin-left:4px}
.appbar nav a{
  display:flex; align-items:center; gap:7px;
  padding:0 14px; height:38px;
  color:var(--muted); text-decoration:none; font-size:13.5px; font-weight:600;
  white-space:nowrap;
  background:var(--surface-2);
  border:1px solid var(--line); border-bottom:none;
  border-radius:8px 8px 0 0;
  margin-bottom:-1px;               /* overlap the bar's border so tabs sit on the line */
  border-top:2px solid transparent; /* reserved so the active accent doesn't shift layout */
}
.appbar nav a:hover{color:var(--ink); background:var(--surface)}
.appbar nav a.active{
  color:var(--accent); background:var(--surface);
  border-top-color:var(--accent);
  box-shadow:0 1px 0 0 var(--surface);  /* covers the bar border -> tab joins the page below */
  height:40px; font-weight:700;
}
.appbar nav a:focus-visible{outline:2px solid var(--accent); outline-offset:-3px}
.appbar nav a .ic{font-size:14px; line-height:1; opacity:.9}
.appbar nav a .lbl-short{display:none}
/* count badge (e.g. items awaiting approval) */
.appbar nav a .badge{
  font-family:var(--mono); font-size:10.5px; font-weight:800; line-height:1;
  padding:3px 6px; border-radius:999px; min-width:18px; text-align:center;
  background:color-mix(in srgb, var(--warn) 20%, transparent); color:var(--warn);
}
.appbar .grow{flex:1}
.appbar .ext{color:var(--muted); font-size:12.5px; text-decoration:none; padding:9px 0}
.appbar .ext:hover{color:var(--accent)}

/* Per-page controls live under the nav, never inside it. Uses --surface so it forms one
   continuous surface with the ACTIVE tab above it — that join is what makes it read as tabs. */
.toolbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 18px; background:var(--surface); border-bottom:1px solid var(--line);
}
.toolbar .grow{flex:1}
.toolbar input,.toolbar select{font:inherit; font-size:13px; padding:6px 8px;
  border:1px solid var(--line); border-radius:7px; background:var(--surface); color:var(--ink)}
.toolbar button{font:inherit; font-weight:600; font-size:13px; padding:6px 14px; border:none;
  border-radius:7px; background:var(--accent); color:var(--accent-ink,#fff); cursor:pointer}
.toolbar .hint{color:var(--muted); font-size:12px}

/* Operator identity, filled by app-session.js. Empty (and invisible) when login is not
   configured, so a deployment without it looks exactly as it did before. */
.appbar .who{display:flex; align-items:center; gap:10px; padding:9px 0; font-size:12.5px}
.appbar .who .who-name{color:var(--muted); font-family:var(--mono); font-size:11.5px}
.appbar .who a{color:var(--accent); text-decoration:none; font-weight:600}
.appbar .who a:hover{text-decoration:underline}
@media (max-width:640px){ .appbar .who .who-name{display:none} }

@media (max-width:640px){
  .appbar{gap:8px; padding:0 12px}
  .appbar nav a{padding:0 10px; font-size:13px}
  .appbar nav a .lbl-long{display:none}    /* swap to short labels on small screens */
  .appbar nav a .lbl-short{display:inline}
  .toolbar{padding:9px 12px}
}