:root {
  --app-topbar-ink: #0b1f33;
  --app-topbar-blue-soft: #dceeff;
  --app-topbar-text: #e5f0fa;
  /* Brand mark on the blue bar: ink tile, light brackets, bright scan line. */
  --app-topbar-mark-tile: #0b1f33;
  --app-topbar-mark-bracket: #8fc7f5;
  --app-topbar-mark-scan: #3d95e8;
  --app-topbar-focus-inner: #fff;
  --app-topbar-focus-outer: #0b1f33;
  --app-topbar-font-ui: var(--font-ui);
  --app-topbar-font-data: var(--font-data);
  --app-mobile-nav-height: 4.25rem;
  --app-mobile-nav-space: calc(var(--app-mobile-nav-height) + 0.75rem);
  /* 59px clears the Dynamic Island when Safari cannot expose its safe-area inset. */
  --app-safe-area-top: env(safe-area-inset-top, 59px);
}

[data-avatar-color="gold"] {
  --avatar-background: #F7DFAE;
  --avatar-foreground: #14213D;
}

[data-avatar-color="blue"] {
  --avatar-background: #245B9E;
  --avatar-foreground: #fff;
}

[data-avatar-color="teal"] {
  --avatar-background: #176B62;
  --avatar-foreground: #fff;
}

[data-avatar-color="green"] {
  --avatar-background: #2F6B3F;
  --avatar-foreground: #fff;
}

[data-avatar-color="coral"] {
  --avatar-background: #9C3F36;
  --avatar-foreground: #fff;
}

[data-avatar-color="plum"] {
  --avatar-background: #68479B;
  --avatar-foreground: #fff;
}

.app-icon-sprite {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
}

.app-icon {
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-topbar {
  position: sticky;
  z-index: 1030;
  top: 0;
  color: var(--app-topbar-text);
  background: var(--app-primary-700);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  font-family: var(--app-topbar-font-ui);
  -webkit-font-smoothing: antialiased;
}

/* Keep the Scanner account menu above the camera stacking context. */
.scanner-page-body .app-topbar .app-topbar__menu { z-index: 1100; }

.app-topbar :is(.app-topbar__brand, .app-topbar__nav-link, .app-topbar__control) { color: var(--app-topbar-text); }

.app-topbar__inner {
  width: min(calc(100% - 2.5rem), 90rem);
  min-height: 4.25rem;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1.75rem;
  padding-top: env(safe-area-inset-top, 0px);
}

.app-topbar__brand {
  min-width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 0.6875rem;
  font-family: var(--type-brand-family);
  text-decoration: none;
  font-size: var(--type-brand-size);
  font-weight: var(--type-brand-weight);
  line-height: var(--type-brand-line-height);
  letter-spacing: var(--type-brand-letter-spacing);
  text-transform: var(--type-brand-transform);
}

.app-topbar__brand:hover,
.app-topbar__brand:focus-visible {
  color: #fff;
}

/* Scanner viewfinder framing a stock item — the RestockGenie mark. The SVG carries
   its own ink tile so the logo is identical here and on the marketing site. */
.app-topbar__brand-mark {
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  display: block;
}

.app-topbar__brand-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

.app-topbar__brand-mark .brand-mark__tile { fill: var(--app-topbar-mark-tile); }

.app-topbar__brand-mark .brand-mark__bracket {
  fill: none;
  stroke: var(--app-topbar-mark-bracket);
  stroke-width: 2.4;
  stroke-linecap: round;
}

.app-topbar__brand-mark .brand-mark__box { fill: #fff; }
.app-topbar__brand-mark .brand-mark__scan { fill: var(--app-topbar-mark-scan); }

.app-topbar__brand-accent { color: var(--app-topbar-mark-bracket); }

.app-topbar__nav {
  display: flex;
  align-items: stretch;
  align-self: stretch;
  gap: 0.375rem;
}

.app-topbar__nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-inline: 0.8125rem;
  text-decoration: none;
  font-family: var(--type-navigation-family);
  font-size: var(--type-navigation-size);
  font-weight: var(--type-navigation-weight);
  line-height: var(--type-navigation-line-height);
  letter-spacing: var(--type-navigation-letter-spacing);
  text-transform: var(--type-navigation-transform);
}

.app-topbar__nav-link:hover,
.app-topbar__nav-link:focus-visible,
.app-topbar__nav-link[aria-expanded="true"] {
  color: #fff;
}

.app-topbar__scanner-link .app-icon { color: var(--app-topbar-mark-scan); }

.app-topbar__nav-link.is-active::after {
  position: absolute;
  right: 0.75rem;
  bottom: 0;
  left: 0.75rem;
  height: 0.1875rem;
  border-radius: 0.1875rem 0.1875rem 0 0;
  background: #69b4ff;
  content: "";
}

.app-topbar__count {
  min-width: 1.375rem;
  height: 1.375rem;
  display: inline-grid;
  place-items: center;
  padding-inline: 0.375rem;
  border-radius: 999px;
  color: #fff;
  background: rgba(217, 142, 33, 0.22);
  font-family: var(--type-count-family);
  font-size: var(--type-count-size);
  font-weight: var(--type-count-weight);
  line-height: var(--type-count-line-height);
  letter-spacing: var(--type-count-letter-spacing);
  text-transform: var(--type-count-transform);
  font-variant-numeric: tabular-nums;
}

.app-topbar__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.app-public-topbar .app-topbar__inner {
  justify-content: space-between;
}

.app-public-topbar__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.app-public-topbar :is(.app-public-topbar__login, .app-public-topbar__signup) {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.9rem;
  border: 1px solid transparent;
  border-radius: 0.6875rem;
  color: var(--app-topbar-text);
  font-family: var(--type-control-family);
  font-size: var(--type-control-size);
  font-weight: var(--type-control-weight);
  line-height: var(--type-control-line-height);
  letter-spacing: var(--type-control-letter-spacing);
  text-transform: var(--type-control-transform);
  text-decoration: none;
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

.app-public-topbar .app-public-topbar__login {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
}

.app-public-topbar .app-public-topbar__signup {
  color: var(--app-primary-800);
  background: #fff;
  box-shadow: 0 2px 8px rgba(11, 31, 51, 0.14);
}

.app-public-topbar .app-public-topbar__login:is(:hover, :focus-visible) {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.12);
}

.app-public-topbar .app-public-topbar__signup:is(:hover, :focus-visible) {
  color: var(--app-accent-text);
  background: var(--app-primary-50);
}

.app-topbar__location-dropdown {
  min-width: 0;
  display: flex;
  align-self: stretch;
}

.app-topbar__control {
  min-height: 2.625rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 0.6875rem;
  background: rgba(255, 255, 255, 0.06);
  font: inherit;
  font-family: var(--type-navigation-family);
  font-size: var(--type-navigation-size);
  font-weight: var(--type-navigation-weight);
  line-height: var(--type-navigation-line-height);
  letter-spacing: var(--type-navigation-letter-spacing);
  text-transform: var(--type-navigation-transform);
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.app-topbar__control:hover,
.app-topbar__control:focus-visible,
.app-topbar__control[aria-expanded="true"] {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.23);
  background: rgba(255, 255, 255, 0.11);
}

.app-topbar__location-switcher {
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.app-topbar__control-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-topbar__account-button {
  max-width: 16rem;
  padding: 0.25rem 0.375rem 0.25rem 0.3125rem;
}

.app-topbar__avatar {
  width: 1.9375rem;
  height: 1.9375rem;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 0.5625rem;
  color: var(--avatar-foreground, #14213D);
  background: var(--avatar-background, #F7DFAE);
  font-family: var(--type-caption-family);
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-line-height);
  letter-spacing: var(--type-caption-letter-spacing);
  text-transform: var(--type-caption-transform);
}

.app-topbar__account-label {
  overflow: hidden;
  padding-right: 0.4375rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--type-navigation-family);
  font-size: var(--type-navigation-size);
  font-weight: var(--type-navigation-weight);
  line-height: var(--type-navigation-line-height);
  letter-spacing: var(--type-navigation-letter-spacing);
  text-transform: var(--type-navigation-transform);
}

.app-topbar .app-topbar__menu {
  min-width: 14rem;
  margin-top: 0.5rem !important;
  padding: 0.5rem;
  color: var(--app-ink-950, var(--bs-body-color));
  background-color: var(--app-surface, var(--bs-body-bg));
  border-color: var(--app-line, var(--bs-border-color));
  border-radius: 0.875rem;
  box-shadow: 0 18px 48px rgba(11, 31, 51, 0.16);
  --bs-dropdown-link-active-bg: #185fa5;
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-hover-bg: var(--app-surface-muted, var(--bs-tertiary-bg));
}

.app-topbar .app-topbar__menu .dropdown-header {
  overflow: hidden;
  margin: 0;
  padding: 0.5rem 0.75rem 0.375rem;
  color: var(--app-ink-600, var(--bs-secondary-color));
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--type-label-family);
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-line-height);
  letter-spacing: var(--type-label-letter-spacing);
  text-transform: var(--type-label-transform);
}

.app-topbar .app-topbar__menu .dropdown-item {
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  border-radius: 0.5625rem;
  color: var(--app-ink-800, var(--bs-body-color));
  font-family: var(--type-navigation-family);
  font-size: var(--type-navigation-size);
  font-weight: var(--type-navigation-weight);
  line-height: var(--type-navigation-line-height);
  letter-spacing: var(--type-navigation-letter-spacing);
  text-transform: var(--type-navigation-transform);
}

.app-topbar .app-topbar__menu .dropdown-item:not(.active):hover,
.app-topbar .app-topbar__menu .dropdown-item:not(.active):focus-visible {
  color: var(--app-ink-950, var(--bs-body-color));
  background: var(--app-surface-muted, var(--bs-tertiary-bg));
}

.app-topbar .app-topbar__menu .dropdown-item.active {
  color: #fff;
  background: #185fa5;
}

.app-topbar__account-menu {
  min-width: 16rem !important;
}

.app-topbar__account-summary {
  display: grid;
  gap: 0.125rem;
  padding: 0.5rem 0.75rem 0.375rem;
  color: var(--app-ink-950, var(--bs-body-color));
  overflow-wrap: anywhere;
}

.app-topbar__account-summary strong {
  font-family: var(--type-card-title-family);
  font-size: var(--type-card-title-size);
  font-weight: var(--type-card-title-weight);
  line-height: var(--type-card-title-line-height);
  letter-spacing: var(--type-card-title-letter-spacing);
  text-transform: var(--type-card-title-transform);
}

.app-topbar__account-summary span {
  color: var(--app-ink-600, var(--bs-secondary-color));
  font-family: var(--type-caption-family);
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-line-height);
  letter-spacing: var(--type-caption-letter-spacing);
  text-transform: var(--type-caption-transform);
}

[data-bs-theme="dark"] .app-topbar .app-topbar__menu {
  --bs-dropdown-divider-bg: var(--app-line, var(--bs-border-color));
  --bs-dropdown-link-hover-color: var(--app-ink-950, var(--bs-body-color));
  --bs-dropdown-link-hover-bg: var(--app-surface-muted, var(--bs-tertiary-bg));
}

.app-topbar .app-topbar__logout {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
}

.app-topbar :focus-visible {
  outline: 3px solid var(--app-topbar-focus-inner);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--app-topbar-focus-outer);
}

.app-mobile-nav {
  display: none;
}

.app-mobile-nav__inner {
  height: var(--app-mobile-nav-height);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.app-mobile-nav__link {
  position: relative;
  min-width: 0;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.35rem 0.25rem 0.3rem;
  color: var(--app-ink-600, #526b82);
  font-family: var(--type-navigation-family);
  font-size: 0.7rem;
  font-weight: var(--type-navigation-weight);
  line-height: 1;
  text-decoration: none;
  transition: color 150ms ease, background-color 150ms ease;
}

.app-mobile-nav__link::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2rem;
  height: 0.2rem;
  border-radius: 0 0 999px 999px;
  background: transparent;
  content: "";
  transform: translateX(-50%);
}

.app-mobile-nav__link:is(:hover, :focus-visible),
.app-mobile-nav__link.is-active {
  color: var(--app-primary-700, #185fa5);
}

.app-mobile-nav__link.is-active::before {
  background: var(--app-primary-600, #2575bb);
}

.app-mobile-nav__icon {
  position: relative;
  width: 2rem;
  height: 1.75rem;
  display: inline-grid;
  place-items: center;
  border-radius: 0.75rem;
}

.app-mobile-nav__icon .app-icon {
  width: 1.35rem;
  height: 1.35rem;
}

.app-mobile-nav__link--scanner .app-mobile-nav__icon {
  width: 2.75rem;
  height: 2.75rem;
  margin-top: -0.7rem;
  border: 3px solid var(--app-surface, #fff);
  border-radius: 1rem;
  background: var(--app-accent-200);
  color: var(--app-accent-900);
  box-shadow: 0 7px 18px rgba(11, 31, 51, 0.18);
}

.app-mobile-nav__link--scanner.is-active .app-mobile-nav__icon {
  background: var(--app-primary-700, #185fa5);
  color: #fff;
}

.app-mobile-nav__count {
  position: absolute;
  top: -0.25rem;
  right: -0.45rem;
  min-width: 1.2rem;
  height: 1.2rem;
  display: inline-grid;
  place-items: center;
  padding-inline: 0.28rem;
  border: 2px solid var(--app-surface, #fff);
  border-radius: 999px;
  background: #b86816;
  color: #fff;
  font-family: var(--type-count-family);
  font-size: 0.62rem;
  font-weight: var(--type-count-weight);
  font-variant-numeric: tabular-nums;
}

.app-mobile-nav :focus-visible {
  z-index: 1;
  border-radius: 0.65rem;
  outline: 3px solid var(--app-primary-700, #185fa5);
  outline-offset: -3px;
}

@media (max-width: 61.25rem) {
  .app-topbar__inner {
    width: min(calc(100% - 1.75rem), 90rem);
    gap: 1rem;
  }

  .app-topbar__account-label,
  .app-topbar__account-button > .app-icon {
    display: none;
  }
}

@media (max-width: 47.5rem),
  (orientation: landscape) and (any-pointer: coarse) and (max-height: 31.25rem) {
  html {
    scroll-padding-bottom: calc(var(--app-mobile-nav-space) + env(safe-area-inset-bottom));
  }

  body.app-has-mobile-navigation {
    padding-bottom: calc(var(--app-mobile-nav-space) + env(safe-area-inset-bottom));
  }

  /* The tab bar supplies the app-level route choices on phones. */
  body.app-has-mobile-navigation .app-mobile-hide-back {
    display: none !important;
  }

  .app-topbar__inner {
    width: calc(100% - 1.5rem);
    min-height: 3.5rem;
    flex-wrap: nowrap;
    gap: 0.625rem;
    padding-block-start: calc(0.35rem + env(safe-area-inset-top, 0px));
    padding-block-end: 0.35rem;
  }

  .app-topbar__brand-name {
    display: none;
  }

  .app-topbar__nav {
    display: none;
  }

  .app-topbar__actions {
    width: auto;
    min-width: 0;
    justify-content: flex-end;
    margin-left: auto;
  }

  .app-topbar__account-button {
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.25rem;
  }

  .app-topbar__brand {
    min-height: 2.75rem;
  }

  .app-public-topbar .app-topbar__inner {
    flex-wrap: nowrap;
  }

  .app-public-topbar__actions {
    min-width: 0;
    gap: 0.375rem;
  }

  .app-public-topbar :is(.app-public-topbar__login, .app-public-topbar__signup) {
    min-height: 2.375rem;
    padding-inline: 0.7rem;
    white-space: nowrap;
  }

  body.app-has-mobile-navigation .app-mobile-nav {
    position: fixed;
    z-index: 1025;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    padding-right: max(0.35rem, env(safe-area-inset-right));
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: max(0.35rem, env(safe-area-inset-left));
    border-top: 1px solid var(--app-line, #d7e2ec);
    background: var(--app-surface, #fff);
    background: color-mix(in srgb, var(--app-surface, #fff) 94%, transparent);
    box-shadow: 0 -10px 28px rgba(11, 31, 51, 0.12);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
  }

  .app-mobile-nav__inner {
    width: min(100%, 38rem);
    margin-inline: auto;
  }

  .organization-dashboard-page .app-topbar__inner {
    width: auto;
    margin-right: max(0.75rem, env(safe-area-inset-right));
    margin-left: max(0.75rem, env(safe-area-inset-left));
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.5rem 0.75rem;
    padding-top: max(0.5rem, env(safe-area-inset-top));
  }

  .organization-dashboard-page .app-topbar__brand {
    grid-row: 1;
    grid-column: 1;
  }

  .organization-dashboard-page .app-topbar__nav {
    grid-row: 2;
    grid-column: 1 / -1;
    order: initial;
    width: 100%;
  }

  .organization-dashboard-page .app-topbar__actions {
    grid-row: 1;
    grid-column: 3;
    order: initial;
    width: auto;
    margin-left: 0;
    justify-self: end;
  }
}

/* Phone landscape is wide but vertically constrained. Keep the same reachable
   app navigation while giving the page a little more of the short viewport. */
@media (orientation: landscape) and (any-pointer: coarse) and (max-height: 31.25rem) {
  :root {
    --app-mobile-nav-height: 3.5rem;
    --app-mobile-nav-space: calc(var(--app-mobile-nav-height) + 0.5rem);
  }

  .app-mobile-nav__link {
    gap: 0.1rem;
    padding-block: 0.25rem;
    font-size: 0.66rem;
  }

  .app-mobile-nav__link--scanner .app-mobile-nav__icon {
    width: 2.4rem;
    height: 2.4rem;
    margin-top: -0.45rem;
    border-radius: 0.9rem;
  }
}

/* Home-screen Safari can draw the app behind the status bar. Keep this dynamic so
   the same rule handles a notch, Dynamic Island, and non-notched devices. */
@media (display-mode: standalone) {
  .app-topbar__inner {
    padding-top: var(--app-safe-area-top);
  }
}

html[data-pwa-display-mode="standalone"] .app-topbar__inner {
  padding-top: var(--app-safe-area-top);
}

/* Safari can briefly report a zero inset while opening an installed app. Reserve
   Dynamic Island clearance in portrait rather than letting the brand sit beneath it. */
@supports (-webkit-touch-callout: none) {
  @media (display-mode: standalone) and (orientation: portrait) {
    .app-topbar__inner {
      padding-top: max(3.6875rem, var(--app-safe-area-top));
    }
  }

  @media (orientation: portrait) {
    html[data-pwa-display-mode="standalone"] .app-topbar__inner {
      padding-top: max(3.6875rem, var(--app-safe-area-top));
    }
  }
}

@media (pointer: coarse) {
  .app-topbar__scanner-link {
    border-radius: 0.7rem;
    background: rgba(255, 255, 255, 0.13);
    color: #fff;
  }

  .app-topbar__scanner-link .app-icon { color: var(--app-topbar-mark-bracket); }
}

@media (max-width: 23.75rem) {
  .app-topbar__inner {
    width: calc(100% - 1rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-topbar__control,
  .app-public-topbar :is(.app-public-topbar__login, .app-public-topbar__signup),
  .app-mobile-nav__link {
    transition: none;
  }
}

@media print {
  .app-mobile-nav {
    display: none !important;
  }

  body.app-has-mobile-navigation {
    padding-bottom: 0;
  }
}

/* Reachable navigation when the script that drives the dropdowns never runs.
   Hidden entirely otherwise, so it only ever appears inside <noscript>. */
.app-topbar__noscript {
  border-top: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg);
  padding: 0.5rem 1rem;
}

.app-topbar__noscript-menu > summary {
  cursor: pointer;
  color: var(--bs-body-color);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  padding: 0.25rem 0;
}

.app-topbar__noscript-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
  padding: 0.5rem 0 0.25rem;
}

.app-topbar__noscript-links a,
.app-topbar__noscript-links button {
  color: var(--bs-body-color);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  text-decoration: underline;
}

.app-topbar__noscript-links button {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}

.app-topbar__noscript-links form {
  margin: 0;
}