/* ========================================================================== base.css — resets, global typography, RTL base rules, scrollbar styling. Ported from OHS-DB. Nothing page- or component-specific belongs here. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; padding: 0; color: var(--text); font-family: var(--font-base); font-size: 14px; } /* The page colour lives on alone, never on . A background on body paints in the same step as any other in-flow block descendant — which is *after* negative-z-index boxes — so it would seal the watermark below away. 's background is the page canvas, painted before everything. */ html { background: var(--bg); } /* ---------- Platform background art ---------- A fixed, full-viewport watermark behind every screen. Painted as a body pseudo-element rather than a `background-image` on body so the transparency is a real opacity (87% transparent = .13 opaque) instead of a hardcoded colour wash over the art, which rule 15 forbids outside tokens.css. z-index: -1 keeps it above the page canvas and below every block-level background — the navy sidebar, white cards and the officer phone frame all paint over it, so nothing here costs contrast on text. */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; background-image: url('../background.png'); background-position: center; background-size: cover; background-repeat: no-repeat; opacity: .13; pointer-events: none; } button { font-family: inherit; font-size: inherit; cursor: pointer; } input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; } /* Arabic / RTL gets a font stack that includes Tahoma, matching the prototypes */ [dir="rtl"] { font-family: 'Segoe UI', 'Tahoma', system-ui, sans-serif; } /* ---------- Scrollbar styling (matches the prototypes' subtle look) ---------- */ * { scrollbar-width: thin; scrollbar-color: var(--border) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; border: 2px solid var(--bg); } *::-webkit-scrollbar-thumb:hover { background: var(--muted); }