/* The shared suite bar. Deliberately self-contained and prefixed `fv-` so it
   cannot collide with either application's own styles — the PO app and the
   sales dashboard both define their own tokens, and this borrows neither. */

.fv-suitebar {
  --fv-navy: #011A4A;
  --fv-brand: #04A7E4;
  --fv-ink: #E8EDF6;
  --fv-dim: #93A3BE;
  --fv-line: rgba(255, 255, 255, .14);
  position: sticky;
  top: 0;
  z-index: 2147483000;               /* above both apps' own sticky headers */
  background: var(--fv-navy);
  color: var(--fv-ink);
  font: 500 13px/1.4 "IBM Plex Sans", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .18);
}
.fv-sb-in {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 18px;
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 46px;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------------ brand */
.fv-sb-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: #fff;
  flex: none;
}
/* The real mark, traced from the brand artwork. Served as the on-dark file
   rather than filtered to white — a brightness/invert filter would flatten the
   cyan swoosh along with the wordmark and lose the brand colour. */
.fv-sb-logo {
  height: 25px; width: auto; display: block; align-self: center;
}
.fv-sb-sub {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--fv-dim); padding-left: 9px; border-left: 1px solid var(--fv-line);
}

/* -------------------------------------------------------------------- nav */
.fv-sb-nav { display: flex; gap: 2px; margin-right: auto; flex-wrap: wrap; }
.fv-sb-link {
  color: var(--fv-dim);
  text-decoration: none;
  padding: 13px 14px;
  font-size: 12.5px;
  letter-spacing: .01em;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.fv-sb-link:hover { color: #fff; }
.fv-sb-link.on { color: #fff; border-bottom-color: var(--fv-brand); font-weight: 600; }
.fv-single .fv-sb-nav { display: none; }        /* one app available: no switcher */

/* ------------------------------------------------------------------ right */
.fv-sb-right { display: flex; align-items: center; gap: 10px; flex: none; }
.fv-sb-who {
  display: flex; flex-direction: column; line-height: 1.25; text-align: right;
  font-size: 11.5px; color: var(--fv-dim); max-width: 230px;
}
.fv-sb-who b {
  color: #fff; font-weight: 600; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.fv-sb-role { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.fv-sb-ghost {
  background: transparent;
  border: 1px solid var(--fv-line);
  color: var(--fv-ink);
  border-radius: 7px;
  padding: 6px 11px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.fv-sb-ghost:hover { border-color: var(--fv-brand); color: #fff; }
.fv-suitebar :focus-visible { outline: 2px solid var(--fv-brand); outline-offset: 2px; }

@media (max-width: 700px) {
  .fv-sb-in { gap: 12px; padding: 0 12px; }
  .fv-sb-sub, .fv-sb-who { display: none; }
  .fv-sb-link { padding: 11px 10px; }
}
@media print { .fv-suitebar { display: none; } }

/* The PO application prints the signed-in address in its own header. With the
   suite bar above it that is shown twice, so the app's copy stands down. */
.fv-has-suitebar #who { display: none !important; }

/* Sign-in removed. Amber, not red: this is a deliberate setting, but it must
   never be the thing nobody notices. */
.fv-sb-open {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  color: #FFD79A;
  background: rgba(250, 178, 25, .13);
  border: 1px solid rgba(250, 178, 25, .40);
  border-radius: 999px; padding: 4px 12px; cursor: help; white-space: nowrap;
}
.fv-sb-open::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: #FAB219; flex: none;
}
@media (max-width: 700px) { .fv-sb-open { padding: 3px 9px; font-size: 11px; } }