/* fv3-teamnav.css -- FV3_SALES_TOOLS_V1: the team bar (fv3-teamnav.js). Same look on every staff page: it uses the
 * FacilityView360 theme tokens (fv3-themes.css, --th-*) with light fallbacks, and its own class names (tn-*). */
.tn{position:sticky;top:0;z-index:60;background:var(--th-surface,#ffffff);color:var(--th-text,#0f172a);
  border-bottom:1px solid var(--th-border,#e2e8f0);box-shadow:0 1px 3px rgba(15,23,42,.06);
  font:600 13.5px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
.tn *{box-sizing:border-box}
.tn-in{max-width:1500px;margin:0 auto;padding:0 16px;display:flex;align-items:center;gap:6px;min-height:46px}
.tn-brand{display:inline-flex;align-items:center;gap:8px;color:inherit;text-decoration:none;font-weight:800;margin-right:10px;white-space:nowrap}
.tn-logo{display:inline-flex;width:24px;height:24px;border-radius:7px;align-items:center;justify-content:center;
  background:var(--th-accent,#d97706);color:var(--th-on-accent,#fff);font-size:13px}
.tn-list{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:2px;flex:1;min-width:0}
.tn-list a{display:block;padding:8px 10px;border-radius:8px;color:var(--th-text2,#475569);text-decoration:none;white-space:nowrap}
.tn-list a:hover{background:var(--th-surface2,#f1f5f9);color:var(--th-text,#0f172a)}
.tn-list a.on{color:var(--th-text,#0f172a);background:var(--th-surface2,#f1f5f9);box-shadow:inset 0 -2px 0 var(--th-accent,#d97706)}
.tn-list a:focus-visible,.tn button:focus-visible{outline:2px solid var(--th-accent,#d97706);outline-offset:2px}
.tn-me{margin-left:auto;display:flex;align-items:center;gap:10px;padding-left:10px}
.tn-name{color:var(--th-text3,#64748b);font-weight:600;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tn-out{all:unset;cursor:pointer;padding:7px 12px;border-radius:8px;border:1px solid var(--th-border2,#cbd5e1);color:var(--th-text,#0f172a);font-weight:700;white-space:nowrap}
.tn-out:hover{border-color:var(--th-danger,#dc2626);color:var(--th-danger,#dc2626)}
.tn-menu{display:none}
/* the support console already shows Phone / My apps in its own header: the bar has them now */
body.fv3-tn #phoneLink,body.fv3-tn header.top nav.links > a[href="/me"]{display:none}
@media (max-width:1180px){.tn-name{display:none}.tn-list a{padding:8px 7px}}
@media (max-width:900px){
  .tn-menu{display:inline-flex;align-items:center;margin-left:auto;cursor:pointer;padding:7px 12px;border-radius:8px;border:1px solid var(--th-border2,#cbd5e1);
    background:transparent;color:inherit;font:inherit;font-weight:700}
  .tn-list{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;padding:6px 12px 10px;
    background:var(--th-surface,#fff);border-bottom:1px solid var(--th-border,#e2e8f0);box-shadow:0 10px 24px rgba(15,23,42,.14)}
  .tn.open .tn-list{display:flex}
  .tn-list a{padding:11px 10px;font-size:15px}
  .tn-me{margin:6px 0 0;padding:8px 10px 0;border-top:1px solid var(--th-border,#e2e8f0);justify-content:space-between}
  .tn-name{display:inline;max-width:60vw}
}
@media print{.tn{display:none}}