/* ==========================================================================
   BETA / TEST build marker.
   Loaded only by the BETA release. It adds one fixed strip across the top of
   every page and nothing else: no colours, spacing or behaviour of the
   approved interface are altered.

   Deliberate properties:
     * `pointer-events: none` — the strip can never swallow a tap or a click,
       so no control can become unreachable because of it.
     * the two fixed shells (`.sidebar` on the admin page, `.s-side` on the
       settings page) are pushed down by exactly the strip's height, so the
       strip covers nothing.
     * `body` gains the same padding, so the ordinary document flow on the
       employee page starts below the strip.
   ========================================================================== */

:root { --beta-bar-h: 28px; }

body { padding-top: calc(var(--beta-bar-h) + env(safe-area-inset-top)); }

.beta-banner {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: calc(var(--beta-bar-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  z-index: 99999;
  pointer-events: none;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  background: repeating-linear-gradient(135deg, #b45309 0 12px, #92400e 12px 24px);
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  box-shadow: 0 1px 6px rgba(15, 23, 42, .25);
  white-space: nowrap;
  overflow: hidden;
}

.beta-banner .beta-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fde68a;
  flex: none;
}

/* Keep the fixed shells clear of the strip.
   
   `.topbar` and `.side-nav` were added here after the employee portal was redesigned: the top bar
   became STICKY at top:0 and the navigation drawer replaced the bottom bar. Both anchor to the top
   of the VIEWPORT, which is behind this strip — so as soon as the page was scrolled the logo and
   the bell were sliced in half by the banner, and the drawer's own logo and close button sat under
   it. Only the BETA build was affected, which is why it showed in a desktop browser and not in the
   installed app, where the page is rarely scrolled that far.

   Fixed here rather than in styles.css: the strip is what displaces them, and production carries
   no strip. Nothing in the approved interface changes. */
.sidebar,
.s-side,
.topbar { inset-block-start: calc(var(--beta-bar-h) + env(safe-area-inset-top)) !important; }

.side-nav { inset-block-start: calc(var(--beta-bar-h) + env(safe-area-inset-top)) !important; }

@media (max-width: 860px) {
  .s-side { inset-block-start: calc(var(--beta-bar-h) + env(safe-area-inset-top)) !important; }
}