/* pa-glass.css - the RaXa look, matched to the RaXa ERP (raxa1.pages.dev, rx-glass.css), shared by every page.
   Load this first. Dark glass with white text and a teal accent over the grey paper-cut wallpaper
   (RaXa_System_Solutions/UI_Designs/Wallpaper.svg is the source). */
:root {
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ink: #f6f6f7;
  --ink2: #d9dade;
  --ac: #0f7d77;           /* teal: selected item, main action, icons, with white text (5:1) */
  --ac-hover: #0b6660;
  --ac-rgb: 15, 125, 119;  /* the same teal, for see-through tints: rgba(var(--ac-rgb), .2) */
  --ac-text: #5fd3c6;      /* teal for words, marks and focus rings on the dark glass (the fill teal is too dark there) */
  --bad: #ff9c92;          /* errors and warnings only */
  --line: rgba(255, 255, 255, .18);
  --line-hover: rgba(255, 255, 255, .5);
  --ctl-line: rgba(255, 255, 255, .28);
  --field: rgba(255, 255, 255, .08);       /* inputs and lists */
  --placeholder: rgba(255, 255, 255, .58);
  --tint: rgba(255, 255, 255, .06);        /* a soft block or a row on hover */
  --tint-2: rgba(255, 255, 255, .12);
  --solid-2: #272a34;      /* table heads and sticky bars, solid so rows slide under them */
  --scrim: rgba(8, 9, 12, .55);            /* behind a pop-up */
  --scroll: rgba(255, 255, 255, .3);
  /* how see-through and blurry the glass is */
  --glass-a: .86;          /* how solid the glass is: 0 clear, 1 solid. Near solid: dark glass on the light paper */
  --glass-blur: 16px;      /* how much the glass blurs what is behind it */
  --ctl: rgba(255, 255, 255, .1);
  --card: rgba(255, 255, 255, .05);   /* a card on a glass panel: thin, so layers stay see-through */
  --solid: #1c1e25;   /* pop-ups, where text sits over other content */
  --accent: #0f7d77;
  --glass-bg: linear-gradient(145deg, rgba(16,18,24,calc(var(--glass-a) + .06)), rgba(16,18,24,calc(var(--glass-a) - .12)) 46%, rgba(16,18,24,var(--glass-a)));
  /* no live blur behind the glass: at 86%+ solid over the smooth paper it was invisible, but it made every frame of motion
     re-blur the whole screen (the main cause of lag). The panels look the same without it. */
  --glass-filter: none;
  --glass-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 18px 40px rgba(0,0,0,.35);
  --pop-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 18px 44px rgba(0,0,0,.5);
  --glow-rest: none;
  --glow-hover: none;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: #f3f3f1; }
body { margin: 0; background: transparent; color: var(--ink); font-family: var(--font); font-weight: 400; }

/* the RaXa background: light paper waves on a fixed layer, with a faint teal glow.
   The soft colours paint at once; the 25 KB picture is added once the page has loaded (rx-api.js adds html.rx-bg),
   so it never holds up the page's own content. Dark glass panels sit on top. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(55% 50% at 72% 42%, rgba(var(--ac-rgb), .12), transparent 70%), linear-gradient(180deg, #f6f6f4 0 38%, #c6c7cb 38% 72%, #b1b1b6 72%);
}
body::before {
  background: radial-gradient(55% 50% at 72% 42%, rgba(var(--ac-rgb), .12), transparent 70%), url("wallpaper-paper.jpg") center bottom / cover no-repeat, #f3f3f1;
  background: radial-gradient(55% 50% at 72% 42%, rgba(var(--ac-rgb), .12), transparent 70%), image-set(url("wallpaper-paper.webp") type("image/webp"), url("wallpaper-paper.jpg") type("image/jpeg")) center bottom / cover no-repeat, #f3f3f1;
}
/* phones and portrait tablets: a tall copy drawn for that shape, so the waves stay sharp (UI_Designs\Wallpaper.svg is the source) */
@media (orientation: portrait) {
  body::before {
    background: radial-gradient(70% 40% at 60% 30%, rgba(var(--ac-rgb), .12), transparent 70%), url("wallpaper-paper-phone.jpg") center bottom / cover no-repeat, #f3f3f1;
    background: radial-gradient(70% 40% at 60% 30%, rgba(var(--ac-rgb), .12), transparent 70%), image-set(url("wallpaper-paper-phone.webp") type("image/webp"), url("wallpaper-paper-phone.jpg") type("image/jpeg")) center bottom / cover no-repeat, #f3f3f1;
  }
}/* paper: anything that stands for a sheet of paper keeps dark text on white, on screen and printed */
.dtr-paper, .inv-page, .ux-scan__page { color-scheme: light; color: #242427; --ink: #242427; --ink2: #3b3b40; --bad: #b3261e; --line: rgba(46,46,50,.16); --line-hover: rgba(46,46,50,.5); --solid-2: #f4f4f4; --card: transparent; --tint: rgba(46,46,50,.05); --ac-text: #0b6660; }
@media print {
  body::before { display: none; }
  html { background: #fff; }
  :root { color-scheme: light; --ac-text: #0b6660; --ink: #000; --ink2: #333; --bad: #000; --line: #bbb; --line-hover: #888; --solid: #fff; --solid-2: #fff; --card: transparent; --tint: transparent; }
  body { color: #000; }
}

/* glass: the same plain frosted glass on desktop and phone */
.sm-glass, .rx-glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  box-shadow: var(--glass-shadow);
}

/* ---------- shared finish, every page ---------- */
/* a clear focus ring for keyboard users wherever a page has not set its own */
:where(button, a[href], input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--ac-text); outline-offset: 2px; }
::selection { background: rgba(var(--ac-rgb), .55); color: #fff; }
/* people who ask for less motion get none */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}