/* Cabeau staging environment banner
 *
 * Injected by nginx sub_filter into the *-stg-cabeau.hsclr.com vhosts on
 * srv11.nettantra.com. Nothing here is part of any application codebase.
 *
 * Source of truth : https://gist.github.com/devadattas/9b5d181a1f2a3ab711d80fbe81281c1d
 * Delivered via   : https://gist.githack.com/... (serves text/css, 60s cache)
 *
 * Both overlays are drawn on the html element rather than body, so they do
 * not collide with app chrome that already styles body::before/::after
 * (Odoo, Metabase and Kestra all do). Both set pointer-events:none, so they
 * are purely visual and can never intercept a click meant for the app.
 */

:root {
  --nt-stg-bar-bg: #b45309;
  --nt-stg-bar-fg: #fff7ed;
  --nt-stg-bar-h: 28px;
  --nt-stg-ribbon-bg: #b45309;
  --nt-stg-ribbon-fg: #fff7ed;
  --nt-stg-z: 2147483000;
}

/* Top ticker
   The bar itself stays still; only the text travels, because the animation
   drives text-indent rather than transform. Animating transform would drag
   the background across the viewport with it. */
html::before {
  content: "STAGING ENVIRONMENT · This is a test system. Data may be reset without notice. Not for production use.   ·   STAGING ENVIRONMENT · This is a test system. Data may be reset without notice. Not for production use.   ·   STAGING ENVIRONMENT · This is a test system. Data may be reset without notice. Not for production use.   ·   STAGING ENVIRONMENT · This is a test system. Data may be reset without notice. Not for production use.   ·   ";

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nt-stg-bar-h);

  background: var(--nt-stg-bar-bg);
  border-bottom: 1px solid rgba(0, 0, 0, 0.25);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.28);
  color: var(--nt-stg-bar-fg);

  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: var(--nt-stg-bar-h);
  letter-spacing: 0.06em;
  text-transform: uppercase;

  white-space: nowrap;
  overflow: hidden;
  text-indent: 0;
  animation: nt-stg-ticker 30s linear infinite;

  z-index: var(--nt-stg-z);
  pointer-events: none;
}

/* Travel exactly one copy of the message. ch is used rather than a percentage
   because a percentage resolves against the viewport while the text width does
   not, so a percentage loop drifts out of sync and leaves the bar blank for
   part of every cycle. One copy is 109 characters, and the message is repeated
   four times above, so some text covers the bar at every point of the cycle
   and the restart lands on an identical frame. */
@keyframes nt-stg-ticker {
  from { text-indent: 0ch; }
  to   { text-indent: -109ch; }
}

/* Reserve the ticker's height at the top of the document, so an application's
   own header (the Odoo navbar, for example) is pushed down instead of sitting
   underneath the overlay.
 *
 * This is padding on html rather than a margin on body, because these apps
 * size the document to the full viewport. A body margin does shift the header
 * correctly, but body is already 100% tall, so the document ends up one bar
 * taller than the viewport and gains a stray 28px scrollbar. With border-box,
 * the padding is absorbed inside html's existing height, so body resolves to
 * viewport minus bar and nothing overflows. It also degrades correctly on
 * ordinary auto-height pages, where it simply shifts the content down. */
html {
  box-sizing: border-box;
  padding-top: var(--nt-stg-bar-h);
}

/* Bottom-right diagonal ribbon */
html::after {
  content: "STAGING";

  position: fixed;
  right: -58px;
  bottom: 34px;
  width: 200px;

  transform: rotate(-45deg);

  background: repeating-linear-gradient(
    45deg,
    var(--nt-stg-ribbon-bg) 0 10px,
    #92400e 10px 20px
  );
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  color: var(--nt-stg-ribbon-fg);

  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 26px;
  letter-spacing: 0.18em;
  text-align: center;
  text-transform: uppercase;

  z-index: var(--nt-stg-z);
  pointer-events: none;
}

/* Respect a reader's motion preference: keep the warning, drop the travel. */
@media (prefers-reduced-motion: reduce) {
  html::before {
    animation: none;
    text-indent: 0;
    padding-left: 12px;
    text-overflow: ellipsis;
  }
}

/* Narrow viewports: keep the ticker, shrink the ribbon so it does not
   swallow the corner of a phone screen. */
@media (max-width: 600px) {
  html::after {
    right: -64px;
    bottom: 26px;
    width: 180px;
    font-size: 10px;
    line-height: 22px;
  }
}

/* Never carry the staging furniture into a printed page or a PDF export. */
@media print {
  html::before,
  html::after {
    display: none !important;
  }
}