/* TES shared theme: the top bar and design tokens used by every staff tool (staff.tesx.io, dashboard, invoices).
   Every rule is scoped to .tes-bar or the tes- prefix so it never fights a tool's own styles. */
:root {
  --tes-navy: #0f1b2d;
  --tes-navy-2: #17263d;
  --tes-navy-3: #22344f;
  --tes-orange: #e56910;
  --tes-orange-dark: #c8580a;
  --tes-orange-soft: #fdf0e6;
  --tes-paper: #f4f6f9;
  --tes-card: #ffffff;
  --tes-ink: #17212f;
  --tes-muted: #5f6b7c;
  --tes-line: #e1e6ed;
  --tes-green: #157a55;
  --tes-green-soft: #e3f3ec;
  --tes-red: #b63232;
  --tes-red-soft: #fbeaea;
  --tes-amber: #8a5a00;
  --tes-amber-soft: #fff3d9;
  --tes-radius: 10px;
  --tes-shadow: 0 1px 2px rgba(15, 27, 45, .06), 0 4px 14px rgba(15, 27, 45, .06);
  --tes-font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --tes-bar-height: 58px;
}

.tes-bar { position: sticky; top: 0; z-index: 1000; background: var(--tes-navy); color: #fff; font-family: var(--tes-font);
  font-size: 14px; line-height: 1.3; box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 2px 10px rgba(0,0,0,.18); }
.tes-bar *, .tes-bar *::before, .tes-bar *::after { box-sizing: border-box; }
/* Guard against tools whose own CSS styles every <header> (e.g. display:flex, margins): the bar always
   spans the full width with no outer spacing. */
header.tes-bar { display: block; margin: 0; padding: 0; width: 100%; justify-content: normal; align-items: normal; border: 0; border-radius: 0; }
.tes-bar .tes-bar__inner { width: 100%; }
.tes-bar__inner { display: flex; align-items: center; gap: 22px; height: var(--tes-bar-height); max-width: 1440px; margin: 0 auto; padding: 0 20px; }
.tes-bar__brand { display: flex; align-items: center; gap: 11px; color: #fff; text-decoration: none; flex: 0 0 auto; }
.tes-bar__brand img { width: 34px; height: 34px; display: block; }
.tes-bar__name { display: flex; flex-direction: column; font-weight: 700; font-size: 15px; letter-spacing: .1px; white-space: nowrap; }
.tes-bar__name small { font-size: 11px; font-weight: 600; color: #9fb0c6; letter-spacing: .9px; text-transform: uppercase; margin-top: 1px; }
.tes-bar__nav { display: flex; align-items: stretch; gap: 2px; height: 100%; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; min-width: 0; }
.tes-bar__nav::-webkit-scrollbar { display: none; }
.tes-bar__link { position: relative; display: flex; align-items: center; padding: 0 13px; color: #c3cedc; text-decoration: none;
  font-weight: 600; white-space: nowrap; border-radius: 0; transition: color .15s, background-color .15s; }
.tes-bar__link:hover { color: #fff; background: rgba(255,255,255,.05); }
.tes-bar__link:focus-visible, .tes-bar__brand:focus-visible, .tes-bar__signout:focus-visible { outline: 2px solid var(--tes-orange); outline-offset: -2px; }
.tes-bar__link.is-active { color: #fff; }
.tes-bar__link.is-active::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--tes-orange); }
.tes-bar__badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 99px;
  background: var(--tes-orange); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; }
.tes-bar__user { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.tes-bar__me { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; border-radius: 8px; padding: 3px 6px; margin: 0 -6px; }
.tes-bar__me:hover { background: rgba(255,255,255,.06); }
.tes-bar__me:focus-visible { outline: 2px solid var(--tes-orange); outline-offset: 0; }
img.tes-bar__avatar { object-fit: cover; padding: 0; }
.tes-bar__avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--tes-navy-3); color: #fff; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; letter-spacing: .3px; border: 1px solid rgba(255,255,255,.12); }
.tes-bar__who { display: flex; flex-direction: column; max-width: 220px; }
.tes-bar__who strong { font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tes-bar__who span { font-size: 12px; color: #9fb0c6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tes-bar__signout { color: #c3cedc; text-decoration: none; font-weight: 600; font-size: 13px; padding: 7px 11px; border: 1px solid var(--tes-navy-3);
  border-radius: 7px; white-space: nowrap; transition: border-color .15s, color .15s; }
.tes-bar__signout:hover { color: #fff; border-color: var(--tes-orange); }
@media (max-width: 860px) { .tes-bar__who { display: none; } .tes-bar__name small { display: none; } }
@media (max-width: 560px) { .tes-bar__inner { gap: 10px; padding: 0 12px; } .tes-bar__name { display: none; } .tes-bar__avatar { display: none; } }
@media print { .tes-bar { display: none; } }