/* xImageFrame UI tuning — layered on top of the Radzen Material theme (material-dark by default, material in light mode). Loaded AFTER the Radzen theme so these win, BEFORE the scoped component styles so those still win. Rule: only mode-agnostic values go in :root. Anything that must differ between light and dark is scoped by [data-theme] (set on by the theme loader in _Host.cshtml) so both modes stay correct. */ :root { /* Refined accent — a clean azure that reads well on both light and dark. (Derived tints are left to the theme; this just shifts the main accent.) */ --rz-primary: #4a90e2; --rz-primary-dark: #3a7bc8; --rz-on-primary: #ffffff; /* Slightly larger, more modern (Material-3-leaning) corner rounding. */ --rz-border-radius: 9px; } html, body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* App-bar brand: a small gradient mark + the title. Global (not scoped) because the title renders on a child RadzenLabel that scoped CSS can't reach. */ .xif-appbar-logo { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(135deg, #5e9dff, #2dd4bf); color: #04111f; font-weight: 800; font-size: 13px; flex: none; user-select: none; } .xif-appbar-title { font-weight: 650; font-size: 1.05rem; letter-spacing: .01em; } /* Consistent, subtle interaction feedback across the common surfaces. */ .rz-button, .rz-card, .rz-badge, a.rz-link { transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; } /* Thin, theme-matched scrollbars (the default chunky light scrollbar on a dark app is one of the things that read as "old"). */ * { scrollbar-width: thin; } [data-theme="dark"] * { scrollbar-color: #3a434f transparent; } [data-theme="light"] * { scrollbar-color: #c4ccd6 transparent; } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { border-radius: 99px; border: 3px solid transparent; background-clip: content-box; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background-color: #3a434f; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background-color: #4a5562; } [data-theme="light"] ::-webkit-scrollbar-thumb { background-color: #c4ccd6; } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background-color: #aab4c0; } /* Full-height flex column for pages whose grid should stretch to the bottom of the screen. The Radzen layout body (.rz-body) is the 1fr row of a 100dvh grid, so it has a definite height and height:100% resolves; the grid inside the host then uses flex:1; min-height:0 to fill the remaining space. */ .xif-fill { height: 100%; min-height: 0; display: flex; flex-direction: column; } /* ---------------- Responsive + a11y (Phases 3–4) ---------------- */ /* Visible keyboard-focus ring (only for keyboard users, not mouse clicks). */ :focus-visible { outline: 2px solid var(--rz-primary, #4a90e2); outline-offset: 2px; } /* Backstop: wide content (data grids, tables) scrolls inside its own box and can never widen the page into a horizontal scrollbar on mobile. Radzen grids already scroll internally; this just guarantees it. */ .rz-datatable, .rz-data-grid, .rz-grid-table { max-width: 100%; } @media (max-width: 640px) { /* Dialogs must fit within a phone screen rather than overflow its edge. */ .rz-dialog { max-width: 96vw !important; } }