/* ============================================================================
   THE PLATFORM SHELL — one bar across every app behind app.staytch.com
   Added 2026-09-06. Markup comes from tch_core/nav.py, behaviour (Escape,
   outside-click) from tch-nav.js. The dropdown is a <details>, so it opens with
   no JavaScript at all — which is what lets the same bar render in a page whose
   scripts are stripped.

   Its own file, and its own tokens, on purpose. The bar has to look identical in
   every app, including the two that do not use tch.css at all: the dispatch board
   is drawn in Salesforce blue and defines `--brand` as #0176d3, so a bar built on
   the page's variables would come out a different colour in each tool. This is the
   one place in the design system where a hex is written twice, and the reason is
   that the alternative is a header that is teal in six apps and blue in one.
   ========================================================================= */

.topbar, .skiplink, .avatar, .menu {
  --tsh-card:#ffffff;
  --tsh-line:#cfdcdc;
  --tsh-line-soft:#e3ecec;
  --tsh-ink:#20333b;
  --tsh-muted:#51656d;
  --tsh-brand:#126b69;
  --tsh-brand-ink:#0e544f;
  --tsh-tint:#e7f1f0;
  --tsh-tint-line:#cfe6e3;
  --tsh-chip:#eef3f2;
}

/* An app may underline its links; the bar never does. */
.topbar a { text-decoration:none; }

/* Keyboard users get to skip the bar; everyone else never sees this. */
.skiplink { position:absolute; left:-9999px; top:0; z-index:100;
            background:var(--tsh-card); color:var(--tsh-brand-ink); font-weight:650;
            padding:10px 14px; border-radius:0 0 10px 0; box-shadow:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10); }
.skiplink:focus { left:0; text-decoration:none; }

.topbar { font:14px/1.5 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
       Helvetica, Arial, sans-serif; color:var(--tsh-ink);
          position:sticky; top:0; z-index:40; background:rgba(255,255,255,.88);
          -webkit-backdrop-filter:saturate(1.6) blur(10px);
          backdrop-filter:saturate(1.6) blur(10px);
          border-bottom:1px solid var(--tsh-line); }
.topbar-in { max-width:1680px; margin:0 auto; padding:0 22px; height:56px;
             display:flex; align-items:center; gap:14px; }

.topbrand { display:inline-flex; align-items:center; flex:none; border-radius:8px; }
.topbrand img { height:21px; width:auto; display:block; }
.topbrand:hover { text-decoration:none; opacity:.82; }

/* The app's own name, sitting after the mark with a hairline between. Reads as
   "TCH → Rent Ledger", which is the whole point of a shared bar: knowing where you
   are without reading the address bar. */
.topapp { flex:none; font-size:14px; font-weight:650; color:var(--tsh-ink); }
a.topapp:hover { color:var(--tsh-brand); text-decoration:none; }
/* "Internal Dashboard / Rent Ledger" — where you are, and one click back to where
   everything is. The first half is the audience's own home under its own name. */
.topcrumb { flex:none; font-size:14px; font-weight:600; color:var(--tsh-muted);
            padding-left:14px; border-left:1px solid var(--tsh-line); }
.topcrumb:hover { color:var(--tsh-brand); }
.topsep { flex:none; color:var(--tsh-line); font-size:14px; }
/* On the platform's own pages there is no app, so the nav links carry that border. */
.topbar-in > .topapp:first-of-type { padding-left:14px; border-left:1px solid var(--tsh-line); }

.topnav { display:flex; align-items:center; gap:2px; min-width:0; overflow-x:auto;
          scrollbar-width:none; }
.topnav::-webkit-scrollbar { display:none; }
.topnav a { padding:7px 11px; border-radius:8px; font-size:13.5px; font-weight:600;
            color:var(--tsh-muted); white-space:nowrap; }
.topnav a:hover { background:var(--tsh-chip); color:var(--tsh-ink); text-decoration:none; }
.topnav a[aria-current="page"] { background:var(--tsh-tint); color:var(--tsh-brand-ink); }

/* --- the avatar ---------------------------------------------------------- */
.avatar { width:28px; height:28px; border-radius:999px; flex:none;
          display:inline-flex; align-items:center; justify-content:center;
          background:linear-gradient(160deg, var(--tsh-brand) 0%, var(--tsh-brand-ink) 100%);
          color:#fff; font-size:11.5px; font-weight:700; letter-spacing:.02em;
          text-transform:uppercase; user-select:none; }
.avatar.lg { width:40px; height:40px; font-size:15px; }
.avatar.xl { width:64px; height:64px; font-size:22px; }

/* --- the profile menu ---------------------------------------------------- */
.usermenu { position:relative; margin-left:auto; flex:none; }
.usermenu > summary { list-style:none; }
.usermenu > summary::-webkit-details-marker { display:none; }
.userbtn { display:inline-flex; align-items:center; gap:8px; cursor:pointer;
           padding:4px 9px 4px 4px; border-radius:999px; border:1px solid transparent;
           max-width:230px; }
.userbtn:hover { background:var(--tsh-chip); border-color:var(--tsh-line); }
.usermenu[open] > .userbtn { background:var(--tsh-chip); border-color:var(--tsh-line); }
.userbtn-name { font-size:13.5px; font-weight:600; color:var(--tsh-ink);
                white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.userbtn .chev { color:var(--tsh-muted); flex:none; transition:transform .14s ease; }
.usermenu[open] .chev { transform:rotate(180deg); }

.menu { position:absolute; right:0; top:calc(100% + 9px); z-index:50;
        width:288px; max-height:min(78vh, 660px);
        display:flex; flex-direction:column; overflow:hidden;
        background:var(--tsh-card); border:1px solid var(--tsh-line); border-radius:14px;
        padding:6px; box-shadow:0 2px 4px rgba(16,24,40,.05), 0 12px 32px rgba(16,24,40,.16); }
.menu-id { display:flex; align-items:center; gap:11px; padding:10px 10px 12px; }
.menu-id-text { min-width:0; display:flex; flex-direction:column; gap:2px; }
.menu-id-text strong { font-size:14px; font-weight:650; }
.menu-mail { font-size:12.5px; color:var(--tsh-muted);
             overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.menu-badge { align-self:flex-start; margin-top:3px; padding:2px 9px; border-radius:999px;
              font-size:11.5px; font-weight:600; background:var(--tsh-tint);
              color:var(--tsh-brand-ink); border:1px solid var(--tsh-tint-line); }
.menu-sec { margin:6px 0 3px; padding:0 11px; font-size:11px; font-weight:700;
            letter-spacing:.05em; text-transform:uppercase; color:var(--tsh-muted);
            border-top:1px solid var(--tsh-line-soft); padding-top:9px; }
.menu-sec:first-child { border-top:0; padding-top:0; margin-top:2px; }
.menu-item { display:flex; align-items:center; gap:10px; width:100%; text-align:left;
             padding:7px 11px; border-radius:9px; border:0; background:transparent;
             color:var(--tsh-ink); font:inherit; font-size:13.5px; font-weight:550;
             cursor:pointer; }
.menu-item .ico { color:var(--tsh-muted); flex:none; }
/* The dashboard heads its own group — the rows beneath it are what it contains. */
.menu-item.is-home { font-weight:650; border-radius:9px 9px 0 0; padding-bottom:9px;
                     margin-bottom:5px; border-bottom:1px solid var(--tsh-line-soft); }
.menu-item.is-home .ico { color:var(--tsh-brand); }
.menu-item:hover { background:var(--tsh-chip); text-decoration:none; }
.menu-item:hover .ico { color:var(--tsh-brand); }
.menu-text { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis;
             white-space:nowrap; }
.menu-note { font-size:11px; font-weight:600; color:var(--tsh-muted);
             background:var(--tsh-chip); border-radius:999px; padding:1px 7px; flex:none; }
/* Declared, not yet built. Saying so beats hiding it: an owner signing in on day one
   should see what the account will hold, not a menu with two rows in it. */
.menu-item.is-soon { color:var(--tsh-muted); cursor:default; }
.menu-item.is-soon:hover { background:transparent; }
/* The menu is nine tools long for an internal user, so the list is what scrolls —
   not the whole menu. Who you are signed in as, and the row that signs you out, stay
   put: the one action nobody should have to scroll for is the one that ends a
   session on a machine that isn't theirs. */
.menu-scroll { overflow-y:auto; min-height:0; margin:0 -2px; padding:0 2px; }
.menu-out { margin:4px 0 0; padding-top:5px; border-top:1px solid var(--tsh-line-soft); }

@media (max-width:760px) {
  .topbar-in { gap:10px; padding:0 14px; }
  .userbtn-name, .topcrumb, .topsep { display:none; }
  .topapp { padding-left:0; border-left:0; }
  .menu { width:min(302px, calc(100vw - 24px)); }
}
@media (prefers-reduced-motion: reduce) {
  .userbtn .chev { transition:none; }
}