/* Shared application chrome — the top bar, its controls, and the page filter
 * row underneath it.
 *
 * WHY THIS FILE EXISTS: every page used to carry its own copy of the header
 * markup and CSS. Ten copies drifted: the link set differed page to page
 * (catalog.html and admin.html had no role switch and no language button at
 * all), and the bar was one wrapping flex row whose items were split by a
 * `margin-right:auto` on the title. Whether an item landed on the left or the
 * right therefore depended on how many role-gated links happened to be visible
 * — so for a user holding several roles at once the bar visibly rearranged
 * itself as they moved between pages.
 *
 * THE FIX IS THE GRID BELOW: three fixed zones. Title left, navigation in the
 * middle, session controls right. The middle zone SCROLLS instead of wrapping,
 * so adding a link can never push the logout button onto a second line and
 * nothing changes position when a role-gated link appears or disappears.
 *
 * Page-specific filters (subject, status, search) belong to `.pagebar`, not to
 * the header — putting them in the bar is what crowded it into wrapping in the
 * first place. */

:root {
  --bg:#101418; --panel:#1a2129; --border:#2c3947; --text:#e8edf2;
  --muted:#8fa1b3; --accent:#4fa3ff; --ok:#2c9c6a; --err:#b3423f;
  --warn:#c9762c; --user:#22405e; --code-bg:#0b0e11;
}
:root[data-theme="light"] {
  --bg:#eef2f6; --panel:#ffffff; --border:#c7d2dd; --text:#1c2530;
  --muted:#5c6d7e; --accent:#1769c4; --ok:#2c9c6a; --err:#c94840;
  --warn:#a85a14; --user:#d5e6f9; --code-bg:#e6ebf0;
}

* { box-sizing:border-box; }

/* ------------------------------------------------------------- the top bar */
header.appbar {
  display:grid;
  /* The title column is a FIXED width, not `auto`. With `auto` the space left
   * for the navigation depended on how long that page's title happened to be,
   * so the bar was one row on "Profil" and two on "Adminisztráció" — the same
   * class of drift, just driven by wording instead of by roles. */
  grid-template-columns:9.5rem minmax(0, 1fr) auto;
  grid-template-areas:"brand nav chrome";
  align-items:center;
  gap:.75rem;
  /* Pinned, NOT inherited: the pages do not agree on a body font size (the map
   * and statistics pages run at 14px, the rest at 15px), and a shared component
   * that inherits it is a different height on different pages. Measured: 48.3px
   * vs 49.0px, which is exactly the kind of drift this file exists to end. */
  font-size:15px; line-height:1.5;
  padding:.5rem 1rem;
  background:var(--panel);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:20;
}
header.appbar > h1 {
  grid-area:brand;
  font-size:.95rem; font-weight:600; margin:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* The middle zone wraps WITHIN ITS OWN COLUMN. That is the whole trick: the
 * grid pins the three zones, so a wrapping nav makes the bar taller but never
 * moves the title or the session controls — which is what used to happen when
 * the bar was one flex row split by an auto margin.
 *
 * Wrapping rather than scrolling is deliberate. A horizontally scrolling nav
 * keeps the bar one line tall, but at 820px it silently hid three links behind
 * an edge with no visible affordance (measured). Hidden navigation is worse
 * than a two-line bar. */
header.appbar .navzone {
  grid-area:nav;
  display:flex; align-items:center; gap:.15rem;
  min-width:0; flex-wrap:wrap;
}
header.appbar .navzone a {
  color:var(--accent); text-decoration:none; font-size:.82rem;
  white-space:nowrap; padding:.22rem .42rem; border-radius:6px;
  border:1px solid transparent;
}
header.appbar .navzone a:hover { background:var(--bg); }
/* The page you are on is marked, not linked away from. */
header.appbar .navzone a[aria-current="page"] {
  color:var(--text); background:var(--bg); border-color:var(--border);
  font-weight:600; cursor:default;
}

header.appbar .chromezone {
  grid-area:chrome; display:flex; align-items:center; gap:.35rem;
}

/* MEASURED breakpoint, not a guessed one: one row of this navigation needs
 * about 1304px (title 152 + links 811 + session controls 285 + gaps). Below
 * that the bar becomes DELIBERATELY two rows — title and session controls on
 * top, navigation underneath — rather than letting the links wrap into a
 * ragged shape that differs page by page. The session controls stay top-right
 * either way, which is the property that was actually broken. */
@media (max-width: 1320px) {
  header.appbar {
    grid-template-columns:minmax(0, 1fr) auto;
    grid-template-areas:"brand chrome"
                        "nav   nav";
    row-gap:.35rem;
  }
}

.chromebtn {
  background:none; color:var(--muted); border:1px solid var(--border);
  border-radius:6px; font-size:.9rem; padding:.25rem .55rem; cursor:pointer;
}
.chromebtn:hover { color:var(--text); border-color:var(--accent); }

#roleswitch { display:flex; gap:.25rem; }
.roleswitchbtn {
  background:none; color:var(--muted); border:1px solid var(--border);
  border-radius:6px; font-size:.78rem; font-weight:600;
  padding:.2rem .55rem; cursor:pointer;
}
.roleswitchbtn:hover { color:var(--text); border-color:var(--accent); }
.roleswitchbtn.active {
  color:var(--text); border-color:var(--accent); background:var(--bg);
}

/* --------------------------------------------------- the page filter row */
.pagebar {
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  padding:.5rem 1rem;
  background:var(--bg); border-bottom:1px solid var(--border);
}
.pagebar label { color:var(--muted); font-size:.8rem; }
.pagebar select, .pagebar input {
  background:var(--panel); color:var(--text);
  border:1px solid var(--border); border-radius:6px;
  padding:.35rem .5rem; font-size:.85rem;
}
.pagebar .grow { flex:1 1 auto; }

@media (max-width: 640px) {
  header.appbar { grid-template-columns:6rem minmax(0, 1fr) auto;
                  gap:.5rem; padding:.5rem .6rem; }
}