/* THE TIE HUB FRAME (#82 + #23; approved 23 Oct: Back + Home on every page, the left side scrolls as one, no big name — the current dashboard is the filled box). One top bar + one left side on every dashboard.
 * Model: the Ops FMS / Warehouse Stock look Riddhi likes — slim, quiet, small department names, nothing "in your face".
 * Type: IBM Plex Sans (one font), IBM Plex Mono (codes). Corners 4–6px, never a pill.
 * Every tap target ≥ 44px. Light by default; dark only when the person flips the switch (data-theme on <html>). */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --tthf-surface: #ffffff; --tthf-ground: #f1f2f5; --tthf-sunk: #eceef2;
  --tthf-ink: #161c2b; --tthf-ink2: #4b5466; --tthf-ink3: #7a8293; --tthf-line: #dde0e7; --tthf-line2: #c9cdd6;
  --tthf-side: #1b2745; --tthf-side-ink: rgba(255,255,255,.72); --tthf-side-ink3: rgba(255,255,255,.42);
  --tthf-side-hover: rgba(255,255,255,.06); --tthf-side-on: rgba(255,255,255,.11); --tthf-side-line: rgba(255,255,255,.09);
  --tthf-accent: #b5722e;            /* copper: the one mark for "you are here" */
  --tthf-av: #1f2f52; --tthf-av-ink: #ffffff;
  --tthf-count: #DC2626;
  --tthf-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --tthf-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --tthf-bar: 52px; --tthf-sidew: 232px; --tthf-r: 4px;
  --tthf-h: var(--tthf-bar);         /* the bar's real height (two rows on a phone); set by tth-frame.js */
  --tthf-logo-filter: none;
}
/* LIGHT by default, never from the device (Riddhi 23 Oct: "wanted light … the option of dark and light mode; you click on that, it becomes dark"): dark only by the ☀/☾ switch */
:root[data-theme="dark"] {
  --tthf-surface: #161a24; --tthf-ground: #0f121a; --tthf-sunk: #1c2130;
  --tthf-ink: #e6e9f0; --tthf-ink2: #a6adbd; --tthf-ink3: #7b8396; --tthf-line: #262c3a; --tthf-line2: #343b4c;
  --tthf-side: #121826; --tthf-side-line: rgba(255,255,255,.07);
  --tthf-accent: #d29a5c; --tthf-av: #9db3dc; --tthf-av-ink: #0f1420; --tthf-count: #E5484D;
  --tthf-logo-filter: invert(1);
}

/* ── the page makes room for the frame ── */
body.tthf-on { padding-top: var(--tthf-h) !important; padding-left: var(--tthf-sidew) !important; box-sizing: border-box; }

/* ── THE TOP BAR: one row, 52px, the same on every dashboard ── */
.tthf-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 8000; display: flex; align-items: center; gap: 0;
  min-height: var(--tthf-bar); padding: 0 8px 0 16px; background: var(--tthf-surface); color: var(--tthf-ink);
  border-bottom: 1px solid var(--tthf-line); font-family: var(--tthf-sans); font-size: 14px; line-height: 1.3; box-sizing: border-box; }
.tthf-bar *, .tthf-side * { box-sizing: border-box; }
.tthf-bar .tthf-menu { display: none; }
.tthf-more[hidden] { display: none !important; }
.tthf-id { display: flex; align-items: center; flex: none; min-height: 44px; margin-right: 18px; }
.tthf-logo { display: flex; align-items: center; height: 44px; flex: none; }
.tthf-logo img { display: block; height: 30px; width: 90px; filter: var(--tthf-logo-filter); }   /* ONE size, its own box: nothing can sit on it */
/* Back + Home: on every page, at the far left (Riddhi 23 Oct: from the Accounts desk into the Inbox there was no way back) */
.tthf-bar .tthf-menu { order: 0; } .tthf-go { order: 1; } .tthf-id { order: 2; } .tthf-apps { order: 3; } .tthf-tools { order: 4; }
.tthf-break { display: none; }
.tthf-go { display: flex; align-items: center; gap: 2px; flex: none; padding-right: 12px; margin-right: 14px; border-right: 1px solid var(--tthf-line2); height: 24px; }
.tthf-btn { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 9px 0 7px; border: 0; background: none; border-radius: var(--tthf-r);
  color: var(--tthf-ink2); font: 500 13px/1 var(--tthf-sans); text-decoration: none; cursor: pointer; white-space: nowrap; }
.tthf-btn:hover { background: var(--tthf-sunk); color: var(--tthf-ink); }
.tthf-btn.on { color: var(--tthf-ink); font-weight: 600; }
.tthf-btn svg { flex: none; }

/* the person's dashboards: small words; the current one is a filled copper box — it says once where you are (Riddhi 23 Oct: no big name beside the logo) */
.tthf-apps { display: flex; align-items: stretch; gap: 2px; flex: 1; min-width: 0; align-self: stretch; overflow: hidden; }
.tthf-app { flex: none; display: flex; align-items: center; min-height: 44px; padding: 0 10px; border-bottom: 2px solid transparent; margin-bottom: -1px; 
  color: var(--tthf-ink2); text-decoration: none; font-size: 13px; font-weight: 500; white-space: nowrap; background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; font-family: inherit; }
.tthf-app:hover { color: var(--tthf-ink); border-bottom-color: var(--tthf-line2); }
.tthf-app.on { color: #fff; font-weight: 600; border-bottom-color: transparent; position: relative; z-index: 0; }
.tthf-app.on::before { content: ''; position: absolute; inset: 7px 0; border-radius: var(--tthf-r); background: var(--tthf-accent); z-index: -1; }
.tthf-app.on:hover { color: #fff; border-bottom-color: transparent; }
.tthf-app[hidden] { display: none; }
.tthf-more { position: relative; display: flex; }
.tthf-more-menu { position: absolute; top: calc(100% + 1px); right: 0; min-width: 210px; background: var(--tthf-surface); border: 1px solid var(--tthf-line); border-radius: 6px;
  box-shadow: 0 10px 28px rgba(15,23,42,.14); padding: 4px; display: none; z-index: 8100; }
.tthf-more.open .tthf-more-menu { display: block; }
.tthf-more-menu a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--tthf-r); color: var(--tthf-ink); text-decoration: none; font-size: 13.5px; }
.tthf-more-menu a:hover { background: var(--tthf-sunk); }

.tthf-tools { display: flex; align-items: center; gap: 4px; flex: none; margin-left: 8px; }
.tthf-icon { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: none; border-radius: var(--tthf-r); color: var(--tthf-ink2); cursor: pointer; }
.tthf-icon:hover { background: var(--tthf-sunk); color: var(--tthf-ink); }
.tthf-icon .tthf-c { position: absolute; top: 4px; right: 2px; margin: 0; }
.tthf-me { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px 0 6px; border: 0; background: none; border-radius: var(--tthf-r); cursor: default; color: var(--tthf-ink); font-family: inherit; text-align: left; }
.tthf-av { width: 32px; height: 32px; border-radius: 50%; background: var(--tthf-av); color: var(--tthf-av-ink); display: grid; place-items: center; font-size: 13px; font-weight: 600; flex: none; }
.tthf-who { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.tthf-who b { font-size: 13px; font-weight: 600; white-space: nowrap; }
.tthf-who small { font-size: 11.5px; color: var(--tthf-ink3); white-space: nowrap; }

/* THE count: a number in a red circle, nothing at 0 (tthCount) */
.tthf-c, .tthf-bar .tth-count, .tthf-side .tth-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: auto;
  border-radius: 10px !important; background: var(--tthf-count) !important; color: #fff !important; font: 700 11.5px/1 var(--tthf-sans) !important; border: 0 !important; letter-spacing: 0; flex: none; }
.tthf-c:empty, .tthf-c.tthf-zero { display: none !important; }

/* ── THE LEFT SIDE: one width, section labels, the active line, counts, Sign out at the bottom ── */
.tthf-side { position: fixed; top: var(--tthf-h); left: 0; bottom: 0; width: var(--tthf-sidew); z-index: 7900; display: flex; flex-direction: column;
  background: var(--tthf-side); color: var(--tthf-side-ink); font-family: var(--tthf-sans); font-size: 13.5px; }
.tthf-side-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 6px 0 0;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent;
  /* a soft shadow at the bottom edge only while there is more below (it disappears at the end of the list) */
  background: linear-gradient(transparent, var(--tthf-side) 70%) 0 100% / 100% 36px no-repeat local,
              linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.38)) 0 100% / 100% 22px no-repeat scroll, var(--tthf-side); }
/* round 2: the footer is the END of the list (margin-top:auto keeps it at the bottom when the list is short) — it never sits on top of a section */
.tthf-side-foot { margin-top: auto; flex: none; border-top: 1px solid var(--tthf-side-line); padding: 6px 0 8px; margin-bottom: 0; }
.tthf-side .tthf-own { flex: none; }
/* every page's own nav, whatever it was built from, wears the same clothes */
.tthf-side .tthf-own { all: unset; display: block; }
.tthf-side .tthf-own > * { display: block !important; overflow: visible !important; background: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important; width: auto !important; height: auto !important; max-height: none !important; position: static !important; box-shadow: none !important; }
.tthf-side .tthf-l { display: block !important; font: 600 10.5px/1 var(--tthf-sans) !important; letter-spacing: .09em !important; text-transform: uppercase !important;
  color: var(--tthf-side-ink3) !important; padding: 16px 18px 6px !important; margin: 0 !important; background: none !important; border: 0 !important; }
.tthf-side .tthf-i { display: flex !important; align-items: center !important; justify-content: flex-start !important; flex-direction: row !important; gap: 10px !important; min-height: 44px !important; padding: 0 14px 0 15px !important; margin: 0 !important;
  border: 0 !important; border-left: 3px solid transparent !important; border-radius: 0 !important; background: none !important; color: var(--tthf-side-ink) !important;
  font: 400 13.5px/1.25 var(--tthf-sans) !important; text-decoration: none !important; text-align: left !important; cursor: pointer; width: 100% !important; opacity: 1 !important; box-shadow: none !important; }
/* a page's own label inside an item keeps the item's size (STORES 24 Oct: its phone tab-strip CSS shrank the words to ~11px) */
.tthf-side .tthf-i span:not(.tthf-c):not(.tth-count) { font-size: inherit !important; line-height: inherit !important; font-weight: inherit !important; }
.tthf-side .tthf-i:hover { background: var(--tthf-side-hover) !important; color: #fff !important; }
.tthf-side .tthf-i.tthf-act { background: var(--tthf-side-on) !important; color: #fff !important; font-weight: 600 !important; border-left-color: var(--tthf-accent) !important; }
.tthf-side .tthf-i svg, .tthf-side .tthf-i .ic, .tthf-side .tthf-i .nav-icon, .tthf-side .tthf-i .tthmd-ic, .tthf-side .tthf-i .tthf-ico { display: none !important; }   /* words only: no emoji, no mixed icon sets */
.tthf-side .tthf-i[hidden], .tthf-side .tthf-i[style*="display: none"], .tthf-side .tthf-i[style*="display:none"] { display: none !important; }
.tthf-side .tthf-hide { display: none !important; }
.tthf-side .tthf-i .tthf-c { margin-left: auto; }
.tthf-side .tthf-out { color: var(--tthf-side-ink) !important; }
.tthf-side .tthf-pin { display: flex; align-items: center; min-height: 44px; padding: 0 18px; font-size: 12.5px; color: var(--tthf-side-ink3); text-decoration: none; }
.tthf-side .tthf-pin:hover { color: #fff; }

/* the phone: the bar wraps to two rows (who + where, then the dashboards); the side slides in from ☰ */
.tthf-scrim { display: none; }
@media (max-width: 820px) {
  body.tthf-on { padding-left: 0 !important; }
  .tthf-bar { flex-wrap: wrap; padding: 0 4px 0 4px; }
  .tthf-bar .tthf-menu { display: grid; }
  .tthf-id { flex: 1; min-width: 0; }
  .tthf-logo img { height: 24px; width: 72px; }
  .tthf-id { order: 1; } .tthf-tools { order: 2; margin-left: 0; }
  /* row 2 on a phone: Back + Home first, then the person's dashboards sliding sideways */
  .tthf-break { display: block; order: 3; flex: 0 0 100%; height: 0; border-top: 1px solid var(--tthf-line); }
  .tthf-go { order: 4; height: 28px; padding-right: 4px; margin-right: 4px; }
  .tthf-btn { padding: 0 8px 0 6px; font-size: 12.5px; }
  .tthf-who { display: none; }
  .tthf-me { padding: 0 6px; }
  .tthf-apps { order: 5; flex: 1 1 0; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 0; gap: 0 2px; }
  .tthf-apps::-webkit-scrollbar { display: none; }
  .tthf-app { min-height: 44px; padding: 0 9px; font-size: 12.5px; }
  .tthf-more { display: none; }
  .tthf-apps .tthf-app[hidden] { display: flex; }
  .tthf-side { transform: translateX(-100%); transition: transform .2s ease, visibility .2s; visibility: hidden; width: min(84vw, 300px); box-shadow: none; }
  body.tthf-open .tthf-side { transform: none; visibility: visible; box-shadow: 0 0 40px rgba(0,0,0,.3); }
  body.tthf-open .tthf-scrim { display: block; position: fixed; inset: var(--tthf-h) 0 0 0; background: rgba(15,23,42,.45); z-index: 7800; }
}
body.tthf-open .tthhelp-fab { visibility: hidden; }   /* the help button never sits on the open menu */
.tthf-theme svg { display: block; }
.tthf-upd { font-size: 12px; color: var(--tthf-ink3); white-space: nowrap; margin-right: 2px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.tthf-upd.tthf-bad { color: var(--tthf-count); }
.tthf-refresh[aria-busy="true"] svg { animation: tthf-spin 1s linear infinite; }
@keyframes tthf-spin { to { transform: rotate(360deg); } }
@media (max-width: 820px) { .tthf-upd { display: none; } }
/* "a newer version of this page is ready" — one slim line under the bar */
.tthf-newer { position: fixed; top: var(--tthf-h); left: 0; right: 0; z-index: 8050; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px;
  padding: 0 12px; background: var(--tthf-accent); color: #fff; font: 500 13.5px/1.3 var(--tthf-sans); }
.tthf-newer-go { min-height: 36px; padding: 0 14px; border: 1px solid rgba(255,255,255,.7); border-radius: var(--tthf-r); background: transparent; color: #fff; font: 600 13px var(--tthf-sans); cursor: pointer; }