/*
 * Global navigation — the off-canvas board and the session bar above it.
 *
 * The board overlays the page rather than reflowing it, so no page needed a
 * layout change to gain navigation, and there is one behaviour at every width
 * instead of a desktop bar plus a phone variant to keep in step. It is opened
 * by the red tag on its own edge — the handle the dashboard sidebar used.
 *
 * Self-contained on purpose: propshaft's `stylesheet_link_tag :app` bulk-loads
 * every stylesheet and does not promise an order, so nothing here relies on
 * cascading against application.css. Where a page rule has to be beaten, it is
 * beaten on specificity (`.topbar .crumbs`), not on load order.
 */

/* ── Breadcrumbs, in the bar ─────────────────────────── */

/* Outranks the page-level `.crumbs` in dash.css on specificity, so the trail
   picks up board ink wherever the two stylesheets happen to land. */
.topbar .crumbs {
  padding: 0;
  font-size: 0.8rem;
  color: var(--board-ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.topbar .crumbs a { color: var(--twine); text-decoration: none; }
.topbar .crumbs a:hover { color: var(--board-ink); text-decoration: underline; }

/* ── The board ───────────────────────────────────────── */

/* A floating board rather than a full-height rail: it sits down from the bar,
   is only as tall as it needs to be, and leaves the page visible above and
   below it. Same geometry the dashboard's own sidebar used, now global.
   Under the topbar (60) so the bar stays on top of it. */
.nav-rail {
  position: fixed;
  top: 12vh;
  left: 0;
  width: 260px;
  min-height: 200px;
  height: fit-content;
  max-height: 82vh;
  z-index: 55;
  transform: translateX(0);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* -100%, not -260px: the panel is fully off screen at any width, and the tag —
   pinned 38px past the panel's right edge — lands exactly on x=0. */
.nav-rail.collapsed {
  transform: translateX(-100%);
}

.nav-rail-inner {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  max-height: 82vh;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 1.1rem 0.85rem 1.4rem;
  background: var(--board);
  color: var(--board-ink);
  --cut: 16px;
  clip-path: var(--bevel-right);
  border: 1px solid var(--border);
  border-left: none;
  box-shadow: var(--shadow);
  visibility: visible;
  transition: visibility 0s;
}

/* Hidden, not merely translated: an off-screen menu must leave the tab order,
   or the first Tab on any page walks into it. Applied to the panel and not the
   whole board, because the tag has to stay clickable — it is the way back in.
   Delayed so it does not blink out before the slide finishes. */
.nav-rail.collapsed .nav-rail-inner {
  visibility: hidden;
  transition: visibility 0s 0.35s;
}

/* ── The tag ─────────────────────────────────────────── */

/* A red tag hanging off the board's free edge, cut on that edge only. */
.nav-tag {
  position: absolute;
  right: -38px;
  top: 24px;
  width: 38px;
  height: 76px;
  background: var(--tag-red);
  color: var(--tag-red-ink);
  border: none;
  --cut: 12px;
  clip-path: var(--bevel-right);
  cursor: pointer;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.nav-tag:hover {
  background: var(--tag-red-hover);
}

.nav-tag svg {
  width: 20px;
  height: 20px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Chevron points right when collapsed (open me), left when expanded. */
.nav-rail.collapsed .nav-tag svg {
  transform: rotate(180deg);
}

/* ── Groups ──────────────────────────────────────────── */

.nav-group-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.8rem;
  cursor: pointer;
  color: var(--twine);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  --cut: 8px;
  clip-path: var(--bevel);
  list-style: none;
}

.nav-group-head::-webkit-details-marker { display: none; }

.nav-group-head:hover {
  background: rgba(230, 211, 179, 0.14);
  color: var(--board-ink);
}

/* Disclosure chevron, drawn rather than shipped — the app has no icon set and
   is not about to grow one for two borders. */
.nav-group-head::after {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
}

.nav-group[open] > .nav-group-head::after {
  transform: rotate(45deg);
}

/* A rule down the left says "these belong to the heading above" without
   needing indentation deep enough to cost width the rail does not have. */
.nav-list,
.nav-tabs {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  list-style: none;
  margin: 0 0 0.4rem 1.4rem;
  padding: 0 0 0 0.35rem;
  border-left: 1px solid var(--board-grid);
}

/* ── Rows ────────────────────────────────────────────── */

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.8rem;
  color: var(--board-ink-muted);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  --cut: 8px;
  clip-path: var(--bevel);
}

/* Top-level entries that are their own destination — Dashboard, Assistants —
   read as headings, so they sit level with the group names beside them. */
.nav-link-top {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--twine);
}

.nav-label {
  margin-right: auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-link:hover {
  background: rgba(230, 211, 179, 0.14);
  color: var(--board-ink);
}

/* The red fill is the same "you are here" the filter chips and dashboard tabs
   use. It never travels alone: nav_link also sets aria-current="page". */
.nav-link.is-active {
  background: var(--tag-red);
  color: var(--tag-red-ink);
  font-weight: 700;
}

/* Dashboard panels. Styled as buttons originally; they are links now, so they
   need the display and text-decoration a <button> came with. */
.tab-button {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: none;
  color: var(--board-ink-muted);
  text-align: left;
  text-decoration: none;
  padding: 0.5rem 0.8rem;
  cursor: pointer;
  --cut: 8px;
  clip-path: var(--bevel);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  transition: all 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tab-button:hover {
  background: rgba(230, 211, 179, 0.14);
  color: var(--board-ink);
}

.tab-button.active {
  background: var(--tag-red);
  color: var(--tag-red-ink);
  font-weight: 700;
}

/* ── Session chrome ──────────────────────────────────── */

.role-switch { display: flex; align-items: center; gap: 0.4rem; }

.role-switch-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--board-ink-muted);
}

.role-switch select { font-size: 0.82rem; padding: 0.25rem 0.45rem; }

.topbar-user {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--twine);
  white-space: nowrap;
}

.topbar-signout button,
.topbar-signout input[type="submit"] {
  background: transparent;
  color: var(--board-ink-muted);
  border: 1px solid var(--board-grid);
  font-size: 0.8rem;
  padding: 0.3rem 0.7rem;
  /* Two words, one line — wrapping it makes the whole bar taller. */
  white-space: nowrap;
}

/* The bar is a single non-wrapping flex row, so anything that will not shrink
   has to say so, or the row grows past the viewport and the page scrolls
   sideways. */
.theme-toggle,
.topbar-signout,
.topbar-logo {
  flex: none;
}

/* Carries a number, not just a dot: "how much is waiting" is the useful
   signal, and it stays legible to anyone who cannot see the colour. */
.queue-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 1.25rem;
  padding: 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.45;
  color: #ffffff;
  background: var(--tag-red);
  border-radius: 999px;
}

/* A red badge on a red active row disappears. */
.nav-link.is-active .queue-badge {
  background: var(--tag-red-ink);
  color: var(--tag-red);
}

/* ── Narrow bars ─────────────────────────────────────── */

/* Nothing here is navigation — the board carries all of that at every width —
   so these are dropped to keep the bar on one line rather than replaced. */
@media (max-width: 820px) {
  .topbar .crumbs,
  .topbar-user,
  .role-switch-label {
    display: none;
  }
}

/* On a phone the wordmark is the last thing to go: the logo beside it is
   already the link home, and the tab title says which app this is. */
@media (max-width: 520px) {
  .topbar {
    padding-left: 0.6rem;
    padding-right: 0.6rem;
    gap: 0.5rem;
  }

  .topbar-brand span { display: none; }

  .role-switch select {
    max-width: 7.5rem;
  }
}

/* ── Bevel upgrade (see application.css) ─────────────── */

/* clip-path cuts the focus ring away with the corner, so beveled controls pull
   the outline inside until corner-shape can do the cut on the box itself. */
.nav-link:focus-visible,
.nav-group-head:focus-visible,
.tab-button:focus-visible {
  outline-offset: -3px;
}

.nav-tag:focus-visible {
  outline-offset: -4px;
}

@supports (corner-shape: bevel) {
  .nav-link,
  .nav-group-head,
  .tab-button {
    clip-path: none;
    corner-shape: bevel;
    border-radius: var(--cut);
  }

  .nav-rail-inner,
  .nav-tag {
    clip-path: none;
    corner-shape: bevel;
    border-radius: 0 var(--cut) var(--cut) 0;
  }

  .nav-tag:focus-visible,
  .nav-link:focus-visible,
  .nav-group-head:focus-visible,
  .tab-button:focus-visible {
    outline-offset: 2px;
  }
}