/* RJD Engineering Solutions — shared top banner
 * Canonical source for the 96 px sticky banner used by every RJD app.
 *
 * Locked dimensions:
 *   .rjd-topbar height: 96px  (asserted in tests/test_brand.py)
 *   Sidebar top-offset in WMS / Compliance must match this height.
 *
 * Edit this file, run tools/sync_brand_to_runtime.py, and every consumer
 * picks up the change on next deploy. Do not override .rjd-topbar in
 * consumer CSS — that's enforced by tests/test_brand.py.
 */

.rjd-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 96px;
  display: flex;
  align-items: center;
  gap: var(--space-4, 16px);
  padding: 0 var(--space-8, 32px);
  background: rgba(243, 244, 246, 0.92);
  -webkit-backdrop-filter: saturate(1.1) blur(10px);
  backdrop-filter: saturate(1.1) blur(10px);
  border-bottom: 1px solid var(--border-subtle, #E3E6EB);
  color: var(--brand-ink, #1B2A3A);
  font-family: var(--font-sans, "Inter Tight", Helvetica, Arial, sans-serif);
}

[data-theme="dark"] .rjd-topbar {
  background: rgba(14, 20, 27, 0.92);
  border-bottom-color: var(--border-subtle, #232D38);
}

.rjd-topbar__home {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  outline: none;
}

.rjd-topbar__home:focus-visible {
  box-shadow: 0 0 0 3px var(--ring, rgba(14, 122, 95, 0.45));
  border-radius: var(--radius-sm, 4px);
}

.rjd-topbar__nav {
  display: flex;
  align-items: center;
  gap: var(--space-8, 32px);
  margin-left: var(--space-10, 40px);
  font-size: 0.9375rem;
  color: var(--brand-ink-500, #4A5968);
}

.rjd-topbar__nav a {
  color: inherit;
  text-decoration: none;
  padding: 8px 0;
  transition: color 120ms ease;
}

.rjd-topbar__nav a:hover {
  color: var(--brand-ink, #1B2A3A);
}

.rjd-topbar__spacer {
  flex: 1 1 auto;
}

.rjd-topbar__slot {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3, 12px);
}

/* CTA pill — sign-in / primary action.
 * Anchored to stable hex values: consumers (e.g. Compliance landing) flip
 * --brand-ink to a near-white in dark mode, which would erase a CTA that
 * referenced --brand-ink against its own white label. Don't switch these
 * to tokens without re-thinking the dark-mode flip below.
 */
.rjd-topbar__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-sm, 4px);
  background: #1B2A3A;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
}

.rjd-topbar__cta:hover {
  background: #2B3A4B;
  color: #fff;
}

/* Dark mode — flip to Signal Green 400 with ink text.
 * Mirrors the hero button treatment in landing pages: white text on
 * Signal-Green-400 fails contrast (~1.5:1), so use ink for the label. */
[data-theme="dark"] .rjd-topbar__cta {
  background: #3DD9AC;
  color: #1B2A3A;
}

[data-theme="dark"] .rjd-topbar__cta:hover {
  background: #2BC699;
  color: #1B2A3A;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .rjd-topbar__cta {
    background: #3DD9AC;
    color: #1B2A3A;
  }
  html:not([data-theme="light"]) .rjd-topbar__cta:hover {
    background: #2BC699;
    color: #1B2A3A;
  }
}

.rjd-topbar__user {
  font-size: 0.8125rem;
  color: var(--brand-ink-500, #4A5968);
}

.rjd-topbar__user strong {
  color: var(--brand-ink, #1B2A3A);
  font-weight: 600;
}

.rjd-topbar__menu {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm, 4px);
  border: 1px solid var(--border-subtle, #E3E6EB);
  background: var(--bg-surface, #fff);
  color: var(--brand-ink, #1B2A3A);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.rjd-topbar__menu svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 1023px) {
  .rjd-topbar {
    padding: 0 var(--space-5, 20px);
    gap: var(--space-3, 12px);
  }
  .rjd-topbar__nav {
    display: none;
  }
  .rjd-topbar__menu {
    display: inline-flex;
  }
}