/* The top bar, once it stops fitting.
 *
 * The wide layout centres .page-tabs absolutely inside <nav> and parks
 * .nav-actions (language switcher, Sign out) at the right-hand end.  Absolute
 * centring is the whole reason this needed fixing: the tabs do not take part in
 * the flex layout, so nothing pushes back when the bar gets narrow.  The tabs
 * slid under the language switcher first, and then — because the centred block
 * keeps growing outwards from the middle — ran off both edges of the screen
 * with no way to scroll to them.
 *
 * So below some width the tabs, the switcher and Sign out all move into a
 * dropdown behind a hamburger, and the bar keeps nothing but that button (plus
 * the brand, on the landing page, which shares this bar and this file).
 *
 * *Which* width is measured, not declared, and static/js/nav-menu.js does the
 * measuring — see the comment there.  A media query cannot answer this one:
 * /admin/ carries eleven tabs against the five a tenant sees, and the German
 * labels ("Eliza-Einstellungen", "Unternehmensdaten") are half again as wide as
 * the English ones, so the width at which the bar stops fitting is a property
 * of this page in this language, not of the viewport.  Everything here is
 * therefore keyed off .nav-collapsed / .nav-open, which that script sets.
 */

/* ── The hamburger ───────────────────────────────────────────────────────── */

/* Hidden until the bar actually runs out of room.  Class selectors on purpose:
 * `nav button` in dashboard.css / settings.css / admin-common.css paints every
 * button in the bar steelblue, and a lone icon button should not read as a
 * second Sign out. */
.nav-toggle {
  display: none;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.25rem;
  padding: 0;
  /* Bootstrap is loaded on the landing page and puts native button chrome back,
     which would otherwise ignore every colour below — the same reason
     .nav-auth-btn in showcase.css carries it. */
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 1px solid var(--bd);
  border-radius: 6px;
  color: var(--fg-soft);
  cursor: pointer;
}

/* The button's accessible name.  It is a visually hidden <span> rather than an
 * aria-label because app/i18n.py translates data-i18n regions and has no
 * data-i18n-aria-label — so this way the name is rendered in the page's
 * language by the server, and I18n.applyAll() retranslates it on a switch, with
 * no JavaScript of its own.  The /admin/ pages load no i18n at all and keep the
 * English source text, which is what they want. */
.nav-toggle-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.nav-toggle:hover,
.nav-toggle[aria-expanded="true"] {
  background: var(--bg-raised);
  border-color: var(--bd-strong);
  color: var(--fg-strong);
}

.nav-toggle:focus-visible {
  outline: 2px solid steelblue;
  outline-offset: 2px;
}

nav.nav-collapsed .nav-toggle { display: inline-flex; }

/* Three bars from one element: the middle one is the span, the outer two are
 * its pseudo-elements.  Keeping it to a single child is what makes the markup
 * addition one line per page. */
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.2s, background 0.2s;
}

.nav-toggle-bars { position: relative; }

.nav-toggle-bars::before,
.nav-toggle-bars::after { content: ''; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after  { top: 6px; }

/* Open: the bars cross. */
nav.nav-open .nav-toggle-bars { background: transparent; }
nav.nav-open .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
nav.nav-open .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .nav-toggle-bars,
  .nav-toggle-bars::before,
  .nav-toggle-bars::after { transition: none; }
}

/* ── The wrapper, while the bar still fits ───────────────────────────────── */

/* .nav-menu holds the tabs and the actions so that there is one thing to turn
 * into a panel.  Wide, it must be invisible to the layout: .page-tabs stays
 * absolutely positioned against <nav> (its containing block is the nearest
 * positioned ancestor, and this wrapper is static, so that still resolves to
 * <nav>), and .nav-actions stays the single in-flow child of a row-reverse,
 * space-between flex row — which is exactly where it sat before. */
.nav-menu {
  display: flex;
  align-items: center;
}

/* ── The panel, once it does not ─────────────────────────────────────────── */

nav.nav-collapsed .nav-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 60;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-width: min(16rem, calc(100vw - 2rem));
  max-width: calc(100vw - 2rem);
  /* Eleven tabs on /admin/ plus the actions is taller than a phone in
   * landscape, so the panel scrolls rather than running off the bottom. */
  max-height: calc(100vh - 5rem);
  overflow-y: auto;
  padding: 0.5rem;
  background: var(--bg-panel);
  border: 1px solid var(--bd);
  border-top: none;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 12px 24px var(--shadow-deep);
}

nav.nav-collapsed.nav-open .nav-menu { display: flex; }

/* The tabs stop being a centred row and become the list in the panel. */
nav.nav-collapsed .nav-menu .page-tabs {
  position: static;
  left: auto;
  top: auto;
  transform: none;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin: 0;
}

/* `> a` rather than `.page-tab`: the landing page's tabs are built by
   showcase.js as bare <a> elements, and the panel is the same panel. */
nav.nav-collapsed .nav-menu .page-tabs > a {
  padding: 0.6rem 0.75rem;
  border-radius: 6px;
  font-size: 0.8rem;
}

nav.nav-collapsed .nav-menu .page-tabs > a:hover { background: var(--bg-hover); }

nav.nav-collapsed .nav-menu .page-tabs > a.active { background: var(--bg-raised); color: var(--fg-max); }

/* Signed out, the landing page's tab list is there but empty. An empty block
   with a rule above it reads as a menu that failed to load. */
nav.nav-collapsed .nav-menu .page-tabs:empty { display: none; }

nav.nav-collapsed .nav-menu .page-tabs:empty + .nav-actions {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* Language switcher and Sign out, below a rule so the panel reads as
 * "where you can go" and then "what you can do". */
nav.nav-collapsed .nav-menu .nav-actions {
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--bd);
}

nav.nav-collapsed .nav-menu .nav-actions > * { width: 100%; }

/* The bar itself has nothing left in it but the hamburger, so it can afford the
 * narrower gutter a phone wants. */
@media (max-width: 640px) {
  nav { padding-left: 1rem; padding-right: 1rem; }
}