/* ═══════════════════════════════════════════════════════════
   Top bar — the fixed application header.

   Consolidated from ScanEasy's, which carries a lot: brand, primary nav,
   a combined company+warehouse selector, a notifications bell with unread
   badge, and an account menu that also hosts the language switcher. The
   structure is kept; the things that made it fragile are not.

   What changed, and why:

   • ONE HEIGHT TOKEN. ScanEasy repeats its bar height in eleven files as
     56px / 64px / 3.5rem, and its sub-nav assumes 56 under a 64 bar — so
     every section page sits 8px under the header. Everything here derives
     from --tn-topbar-height, so the bar and everything that clears it can
     never disagree.

   • REAL LAYOUT, NOT MAGIC NUMBERS. The original absolutely-positions the
     brand and the actions and pushes nav clear with `margin-left: 250px`
     — a guess at brand width, so a longer wordmark or a translated string
     overlaps the nav, and the two can't push each other because they're in
     different positioning contexts. This is a three-region flex row: the
     ends size to content, the middle takes the rest and is allowed to
     shrink.

   • SLOTS, NOT AUTH BRANCHES. ScanEasy renders three near-identical bars
     from three AuthorizeView branches with copy-pasted brand markup. Fill
     the regions with whatever a given user should see instead.

   Dropdowns are NOT redefined here — the account and notification panels
   compose with .tn-menu (menu.css), which already has trigger/chevron/
   panel/item/divider. This file owns the bar and its bar-specific controls.

     <header class="tn-topbar">
       <a class="tn-topbar-brand" href="/">…</a>
       <nav class="tn-topbar-nav">…tn-topbar-link…</nav>
       <div class="tn-topbar-actions">
         <button class="tn-topbar-context">…</button>
         <button class="tn-topbar-icon-btn">…bell + tn-topbar-badge…</button>
         <div class="tn-menu">…account…</div>
       </div>
     </header>
     <div class="tn-topbar-offset">…page…</div>
   ═══════════════════════════════════════════════════════════ */

.tn-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--tn-z-fixed-nav);
    display: flex;
    align-items: center;
    gap: var(--tn-space-lg);
    height: var(--tn-topbar-height);
    padding: 0 var(--tn-page-pad-x);
    background: var(--tn-bg-card);
    border-bottom: 1px solid var(--tn-border);
}

/* Push page content clear of the fixed bar. Use on the content wrapper —
   deriving from the same token is what stops the two drifting apart. */
.tn-topbar-offset {
    padding-top: var(--tn-topbar-height);
}

.tn-topbar-offset--subbar {
    padding-top: calc(var(--tn-topbar-height) + var(--tn-subbar-height));
}

/* ── Brand ── */
.tn-topbar-brand {
    display: flex;
    align-items: center;
    gap: var(--tn-space-sm);
    flex-shrink: 0;
    color: var(--tn-text-primary);
    font-size: var(--tn-font-size-lg);
    font-weight: 700;
    letter-spacing: -0.01em;
    text-decoration: none;
    white-space: nowrap;
}

.tn-topbar-logo {
    display: block;
    height: 30px;
    width: auto;
}

/* ── Primary nav — takes the free space and is the part allowed to shrink ── */
.tn-topbar-nav {
    display: flex;
    align-items: center;
    gap: var(--tn-space-xs);
    flex: 1 1 auto;
    /* min-width:0 is what actually lets a flex child shrink below its content
       and so lets the ends keep their size instead of being pushed off. */
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.tn-topbar-nav::-webkit-scrollbar {
    display: none;
}

.tn-topbar-link {
    display: inline-flex;
    align-items: center;
    gap: var(--tn-space-sm);
    flex-shrink: 0;
    padding: 8px 12px;
    border-radius: var(--tn-radius);
    color: var(--tn-text-secondary);
    font-size: var(--tn-font-size-base);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--tn-transition), color var(--tn-transition);
}

.tn-topbar-link:hover {
    background: var(--tn-bg-hover);
    color: var(--tn-text-primary);
}

.tn-topbar-link.is-active {
    background: var(--tn-accent-light);
    color: var(--tn-accent);
}

.tn-topbar-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--tn-accent);
}

/* ── Actions ── */
.tn-topbar-actions {
    display: flex;
    align-items: center;
    gap: var(--tn-space-sm);
    flex-shrink: 0;
    margin-left: auto;
}

/* Icon button (bell, help, settings). Square, centred, real touch size. */
.tn-topbar-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tn-touch-target);
    height: var(--tn-touch-target);
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--tn-text-secondary);
    font-size: 1.2rem;
    cursor: pointer;
    transition: background var(--tn-transition), color var(--tn-transition);
}

.tn-topbar-icon-btn:hover {
    background: var(--tn-bg-hover);
    color: var(--tn-text-primary);
}

.tn-topbar-icon-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--tn-accent);
}

/* Unread count. Give it an aria-label — a screen reader otherwise announces
   a bare number with no idea what it counts. */
.tn-topbar-badge {
    position: absolute;
    top: 4px;
    right: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--tn-danger);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
}

/* ── Context selector — company + warehouse in one control.
   Two truncating labels split by a rule, matching how the app actually
   works: you pick a company AND a place within it, and both need to stay
   visible. Each label truncates independently so a long company name can't
   starve the warehouse. ── */
.tn-topbar-context {
    display: inline-flex;
    align-items: center;
    gap: var(--tn-space-sm);
    min-height: var(--tn-touch-target);
    max-width: 320px;
    padding: 0 var(--tn-space-md);
    border: 1px solid var(--tn-border);
    border-radius: var(--tn-radius);
    background: var(--tn-bg-card);
    color: var(--tn-text-primary);
    font-family: inherit;
    font-size: var(--tn-font-size-sm);
    cursor: pointer;
    transition: background var(--tn-transition), border-color var(--tn-transition);
}

.tn-topbar-context:hover {
    background: var(--tn-bg-hover);
    border-color: var(--tn-text-secondary);
}

.tn-topbar-context:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--tn-accent);
}

.tn-topbar-context-part {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.tn-topbar-context-part .bi {
    flex-shrink: 0;
    color: var(--tn-text-muted);
}

.tn-topbar-context-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.tn-topbar-context-sep {
    flex-shrink: 0;
    width: 1px;
    height: 16px;
    background: var(--tn-border);
}

/* Nothing chosen yet — a real state, not an empty label. ScanEasy's
   equivalent is an unstyled sentence that hangs out of the bar. */
.tn-topbar-context.is-empty {
    border-color: var(--tn-warning);
    color: var(--tn-warning-text);
}

.tn-topbar-context.is-empty .bi {
    /* --tn-warning-text, matching the label beside it — the vivid
       --tn-warning this replaced measured 3.25:1/2.98:1 on card/page,
       under the 3:1 non-text minimum on the page surface. */
    color: var(--tn-warning-text);
}

/* ── Account trigger — avatar + name. The name hides before the avatar
   does, because the avatar stays recognisable at any width and the name
   is what actually costs room. ── */
.tn-topbar-account {
    display: inline-flex;
    align-items: center;
    gap: var(--tn-space-sm);
    min-height: var(--tn-touch-target);
    padding: 0 var(--tn-space-sm);
    border: none;
    border-radius: var(--tn-radius);
    background: none;
    color: var(--tn-text-primary);
    font-family: inherit;
    font-size: var(--tn-font-size-sm);
    cursor: pointer;
    transition: background var(--tn-transition);
}

.tn-topbar-account:hover {
    background: var(--tn-bg-hover);
}

.tn-topbar-account:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--tn-accent);
}

.tn-topbar-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--tn-accent);
    color: var(--tn-accent-contrast, #fff);
    font-size: var(--tn-font-size-xs);
    font-weight: 700;
}

.tn-topbar-account-name {
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

/* ── Mobile trigger (hamburger) — hidden on desktop.
   Shares the icon-button treatment rather than restating it; only the
   display toggle is its own. What it OPENS is a .tn-panel (panel.css) —
   this file does not reimplement a drawer.

   ScanEasy's drawer is worth not copying: it parks at `right: -350px` and
   opens with `translateX(-350px)` for a 300px panel, so two mismatched
   magic numbers leave it overshooting the edge by 50px, and it animates
   `transform` while the closed state is set with `right`, so opening jumps
   and only closing eases. .tn-panel does the standard thing instead. */
.tn-topbar-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: var(--tn-touch-target);
    height: var(--tn-touch-target);
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--tn-text-secondary);
    font-size: 1.35rem;
    cursor: pointer;
    transition: background var(--tn-transition), color var(--tn-transition);
}

.tn-topbar-menu-btn:hover {
    background: var(--tn-bg-hover);
    color: var(--tn-text-primary);
}

.tn-topbar-menu-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--tn-accent);
}

/* ── Identity block for the top of a drawer — avatar, name, email.
   On mobile the account menu has no room in the bar, so who-you-are moves
   into the drawer and needs to be stated there. Lives here rather than in
   panel.css because it's the top bar's account identity, not a general
   drawer part. ── */
.tn-topbar-identity {
    display: flex;
    align-items: center;
    gap: var(--tn-space-md);
    padding: var(--tn-space-md);
    background: var(--tn-bg-page);
    border-radius: var(--tn-radius-lg);
}

.tn-topbar-identity .tn-topbar-avatar {
    width: 42px;
    height: 42px;
    font-size: var(--tn-font-size-sm);
}

.tn-topbar-identity-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.tn-topbar-identity-name {
    font-weight: 700;
    color: var(--tn-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tn-topbar-identity-mail {
    font-size: var(--tn-font-size-xs);
    color: var(--tn-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════
   Sub bar — the second-level strip: back, page title, optional actions.

   In ScanEasy the back button and page title live ONLY here, never in the
   app bar, and its `top` is a hardcoded 3.5rem repeated across eleven
   files. Here it derives from the bar's own token, so changing the bar
   height moves this automatically.
   ═══════════════════════════════════════════════════════════ */
.tn-subbar {
    position: fixed;
    top: var(--tn-topbar-height);
    left: 0;
    right: 0;
    z-index: calc(var(--tn-z-fixed-nav) - 1);
    display: flex;
    align-items: center;
    gap: var(--tn-space-sm);
    height: var(--tn-subbar-height);
    padding: 0 var(--tn-page-pad-x);
    background: var(--tn-bg-card);
    border-bottom: 1px solid var(--tn-border);
}

.tn-subbar-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tn-touch-target);
    height: var(--tn-touch-target);
    flex-shrink: 0;
    margin-left: calc(var(--tn-space-sm) * -1);
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--tn-text-secondary);
    font-size: 1.15rem;
    cursor: pointer;
    transition: background var(--tn-transition);
}

.tn-subbar-back:hover {
    background: var(--tn-bg-hover);
    color: var(--tn-text-primary);
}

.tn-subbar-back:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--tn-accent);
}

.tn-subbar-title {
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--tn-font-size-lg);
    font-weight: 600;
}

.tn-subbar-actions {
    display: flex;
    align-items: center;
    gap: var(--tn-space-sm);
    flex-shrink: 0;
    margin-left: auto;
}

/* ═══════════════════════════════════════════════════════════
   Mobile — nav moves to the bottom bar (bottomnav.css), so the top bar
   keeps identity and context only.

   Deliberately 900px, matching the rest of this system. ScanEasy switches
   its shell at 1024 while its tables, modals and forms switch at 768,
   leaving a 256px band that gets the phone shell with desktop content —
   a documented source of bugs there. One breakpoint, not two.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .tn-topbar {
        gap: var(--tn-space-sm);
    }

    .tn-topbar-nav {
        display: none;
    }

    .tn-topbar-menu-btn {
        display: inline-flex;
    }

    /* The context selector collapses to a chip: warehouse only, since that's
       what an operator changes during a shift. Still a full touch target —
       the original shrinks this to roughly 15px tall, on the primary control
       for switching warehouse. */
    .tn-topbar-context {
        max-width: 46vw;
        padding: 0 10px;
    }

    .tn-topbar-context-sep,
    .tn-topbar-context-part--company {
        display: none;
    }

    .tn-topbar-account-name {
        display: none;
    }

    .tn-topbar-brand {
        font-size: var(--tn-font-size-base);
    }

    .tn-topbar-logo {
        height: 24px;
    }
}

/* Chrome for a fixed bar shouldn't print */
@media print {
    .tn-topbar,
    .tn-subbar {
        display: none;
    }

    .tn-topbar-offset,
    .tn-topbar-offset--subbar {
        padding-top: 0;
    }
}