/* * AndreGoepel.Design.Blazor — an app-neutral design system for Blazor. * * Originally derived from the "AppFoundation Screens" Claude Design project. It remaps * Radzen's --rz-* design tokens onto an emerald-accented neutral palette with * matching light + dark themes, and provides the shell / login / control classes * the sample host uses to reproduce the mockup. * * Load order matters: reference this file AFTER Radzen's material-base.css so the * variable overrides win. * * Theme is selected with a `data-theme` attribute on : "dark" (default) or * "light". "auto" is resolved to one of those by the theme-toggle script. */ /* ------------------------------------------------------------------ tokens */ :root, :root[data-theme="dark"] { --ag-bg: #101619; --ag-bg-sidebar: #0c1114; --ag-surface: #131a1e; --ag-input: #151c20; --ag-hover: #182226; --ag-border: #1e262b; --ag-border2: #263137; --ag-text: #eef2f3; --ag-text2: #d3dadd; --ag-muted: #7d8a91; --ag-faint: #536066; --ag-accent: #10b981; --ag-on-accent: #06281c; --ag-accent-text: #5eead4; --ag-accent-soft: rgba(16, 185, 129, 0.12); --ag-warn: #f5a524; --ag-warn-soft: rgba(245, 165, 36, 0.12); --ag-danger: #f47171; --ag-danger-soft: rgba(244, 113, 113, 0.12); --ag-info: #4cb8e8; --ag-info-soft: rgba(76, 184, 232, 0.12); color-scheme: dark; } :root[data-theme="light"] { --ag-bg: #f7faf9; --ag-bg-sidebar: #ffffff; --ag-surface: #ffffff; --ag-input: #ffffff; --ag-hover: #eef4f1; --ag-border: #e0e8e4; --ag-border2: #d0dcd6; --ag-text: #141d19; --ag-text2: #37413e; --ag-muted: #68766f; --ag-faint: #9aa6a1; --ag-accent: #0e9f6e; --ag-on-accent: #ffffff; --ag-accent-text: #0b8a60; --ag-accent-soft: rgba(14, 159, 110, 0.1); --ag-warn: #b45309; --ag-warn-soft: rgba(180, 83, 9, 0.1); --ag-danger: #dc2626; --ag-danger-soft: rgba(220, 38, 38, 0.08); --ag-info: #0369a1; --ag-info-soft: rgba(3, 105, 161, 0.08); color-scheme: light; } /* --------------------------------------------------- Radzen variable remap */ :root { /* typography */ --rz-text-font-family: "Manrope", system-ui, -apple-system, sans-serif; --rz-body-font-family: "Manrope", system-ui, -apple-system, sans-serif; /* accent / primary */ --rz-primary: var(--ag-accent); --rz-primary-light: var(--ag-accent); --rz-primary-lighter: var(--ag-accent-soft); --rz-primary-dark: var(--ag-accent); --rz-primary-darker: var(--ag-accent); --rz-primary-contrast-text: var(--ag-on-accent); --rz-secondary: var(--ag-muted); /* surfaces */ --rz-body-background-color: var(--ag-bg); --rz-base-background-color: var(--ag-bg); --rz-content-background-color: var(--ag-bg); --rz-panel-background-color: var(--ag-surface); --rz-card-background-color: var(--ag-surface); --rz-input-background-color: var(--ag-input); --rz-series-1: var(--ag-accent); /* text */ --rz-text-color: var(--ag-text2); --rz-text-title-color: var(--ag-text); --rz-text-secondary-color: var(--ag-muted); --rz-text-tertiary-color: var(--ag-faint); --rz-text-disabled-color: var(--ag-faint); --rz-input-value-color: var(--ag-text); --rz-input-placeholder-color: var(--ag-faint); --rz-label-color: var(--ag-muted); /* borders */ --rz-border-color: var(--ag-border); --rz-base-300: var(--ag-border); /* Neutral base ramp — Radzen's light defaults otherwise leak into the dark shell: --rz-base / --rz-on-base back ButtonStyle.Base (which DialogService.Confirm uses for its Cancel button) and --rz-base-200 backs BadgeStyle.Light (measured 1.2:1 contrast unmapped). Keep 200 a step below the already-mapped 300 (#4). */ --rz-base-200: var(--ag-hover); --rz-base: var(--ag-hover); --rz-on-base: var(--ag-text); --rz-input-border-color: var(--ag-border2); --rz-input-disabled-background: var(--ag-hover); --rz-border-radius: 6px; --rz-card-border-radius: 10px; /* data grid surfaces (Radzen defaults are white — break dark mode row hover and the striped-row background, which otherwise alternates to Radzen's light default) (#4) */ --rz-grid-background-color: var(--ag-surface); --rz-grid-hover-background-color: var(--ag-hover); --rz-grid-stripe-background-color: var(--ag-hover); --rz-grid-stripe-odd-background-color: var(--ag-surface); /* status colours */ --rz-success: var(--ag-accent); --rz-info: var(--ag-info); --rz-warning: var(--ag-warn); --rz-danger: var(--ag-danger); /* Switches + checkboxes: Radzen's "checked" state has its own colour variables (not --rz-primary), so it otherwise stays Radzen's default indigo. Map the on-state onto the emerald accent. */ --rz-switch-checked-background-color: var(--ag-accent); --rz-switch-checked-circle-background-color: #ffffff; --rz-checkbox-checked-background-color: var(--ag-accent); --rz-checkbox-checked-border: 1px solid var(--ag-accent); --rz-checkbox-checked-color: var(--ag-on-accent); } /* ---------------------------------------------------------- global element */ html, body { margin: 0; background: var(--ag-bg); color: var(--ag-text2); font-family: "Manrope", system-ui, -apple-system, sans-serif; } h1, h2, h3, h4, h5, h6, .rz-text-h1, .rz-text-h2, .rz-text-h3, .rz-text-h4, .rz-text-h5, .rz-text-h6, .ag-display { font-family: "Space Grotesk", system-ui, sans-serif; color: var(--ag-text); letter-spacing: -0.01em; } code, .ag-mono, .rz-text-mono { font-family: "JetBrains Mono", ui-monospace, monospace; } /* Blazor's FocusOnNavigate focuses the page heading on navigation; that's for screen readers/keyboard, but the browser paints a focus ring on the (non- interactive) heading. Suppress the visible ring — focus still moves. */ h1:focus, h2:focus, h3:focus, h4:focus, h5:focus, h6:focus, h1:focus-visible, h2:focus-visible, h3:focus-visible, h4:focus-visible, h5:focus-visible, h6:focus-visible { outline: none; } /* Inputs picked up by Radzen textboxes / dropdowns */ .rz-textbox, .rz-inputtext, .rz-dropdown, .rz-lookup { background: var(--ag-input); border: 1px solid var(--ag-border2); border-radius: 6px; color: var(--ag-text); } .rz-textbox:focus, .rz-inputtext:focus, .rz-textbox:focus-within, .rz-inputtext:focus-within { border-color: var(--ag-accent); box-shadow: 0 0 0 3px var(--ag-accent-soft); outline: none; } /* Read-only / disabled fields read as greyed out (design's muted look). */ .rz-textbox[readonly], .rz-textbox:disabled, .rz-textbox.rz-state-disabled { background: var(--ag-hover); color: var(--ag-muted); border-color: var(--ag-border); cursor: not-allowed; } /* Cards / panels */ .rz-card, .rz-panel { background: var(--ag-surface); border: 1px solid var(--ag-border); border-radius: 10px; color: var(--ag-text2); } /* Field labels: small, semibold, muted (the design's form label style). */ .rz-label { font: 600 12.5px "Manrope", sans-serif; color: var(--ag-muted); } /* The design uses sentence case everywhere; Radzen's Material theme upper-cases. */ .rz-button { text-transform: none; font-size: 13px; } /* Primary buttons keep the emerald accent with dark on-accent text. The !important beats Radzen's own filled-variant contrast colour (white). */ .rz-button.rz-primary, .rz-button.rz-success { background-color: var(--ag-accent); color: var(--ag-on-accent) !important; font-weight: 800; } .rz-button.rz-primary:hover, .rz-button.rz-success:hover { filter: brightness(1.08); } /* Secondary / light / base share the transparent hairline look. `rz-base` is what Radzen's Confirm/Alert dialogs use for the Cancel button — without this it falls back to Radzen's default white fill and clashes with the design. */ .rz-button.rz-secondary, .rz-button.rz-light, .rz-button.rz-base { background: transparent; border: 1px solid var(--ag-border2); color: var(--ag-text); } .rz-button.rz-secondary:hover, .rz-button.rz-light:hover, .rz-button.rz-base:hover { background: var(--ag-hover); } .rz-button.rz-danger { background: var(--ag-danger-soft) !important; color: var(--ag-danger) !important; border: 1px solid transparent; } .rz-button.rz-danger:hover { border-color: var(--ag-danger); } /* Multi-select list (e.g. the role picker in "Edit user roles"). Force the token palette so items don't fall back to Radzen's default selection colour. */ .rz-listbox { background: var(--ag-input); border: 1px solid var(--ag-border2); border-radius: 6px; } .rz-listbox .rz-listbox-item { color: var(--ag-text2); } /* Radzen's material-base hover rule is `.rz-listbox:not(.rz-state-disabled) .rz-listbox-item:hover:hover` — the doubled `:hover` and the `:not()` are a deliberate specificity bump. A plain `.rz-listbox-item:hover` loses to it, leaving the light base-theme hover colour in dark mode (unreadable dark text on a light row). Match the selector exactly so this layer — loaded after material-base — wins on source order. */ .rz-listbox:not(.rz-state-disabled) .rz-listbox-item:hover:hover { background: var(--ag-hover); color: var(--ag-text); } .rz-listbox .rz-listbox-item.rz-state-highlight { background: var(--ag-accent-soft); color: var(--ag-accent-text); } /* Data grid */ .rz-datatable, .rz-grid-table { background: var(--ag-surface); color: var(--ag-text2); } .rz-datatable thead th, .rz-grid-table thead th { background: var(--ag-surface); color: var(--ag-faint); font: 700 11px "Manrope", sans-serif; letter-spacing: 0.07em; text-transform: uppercase; border-bottom: 1px solid var(--ag-border); } /* RadzenDataGrid renders header labels in .rz-column-title-content. */ .rz-column-title-content { text-transform: uppercase; font: 700 11px "Manrope", sans-serif; letter-spacing: 0.07em; color: var(--ag-faint); } .rz-datatable tbody td, .rz-grid-table tbody td { border-bottom: 1px solid var(--ag-border); } .rz-datatable tbody tr:hover, .rz-grid-table tbody tr:hover { background: var(--ag-hover); } /* Let the grid fill the card and fit its columns instead of sizing to the sum of the fixed column widths (which overflowed the card horizontally). */ .rz-data-grid .rz-grid-table { width: 100% !important; min-width: 0 !important; table-layout: auto !important; } /* In-card grid toolbar: a filter box on the left, a row count on the right. */ .ag-grid-toolbar { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-bottom: 1px solid var(--ag-border); } .ag-search { flex: 1; max-width: 280px; height: 34px; border-radius: 6px; background: var(--ag-input); border: 1px solid var(--ag-border); display: flex; align-items: center; gap: 8px; padding: 0 11px; box-sizing: border-box; } .ag-search:focus-within { border-color: var(--ag-accent); box-shadow: 0 0 0 3px var(--ag-accent-soft); } .ag-search-icon { color: var(--ag-faint); font-size: 13px; } .ag-search-input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--ag-text); font: 400 12.5px "Manrope", sans-serif; } .ag-search-input::placeholder { color: var(--ag-faint); } .ag-grid-count { margin-left: auto; font-size: 12px; color: var(--ag-faint); white-space: nowrap; } /* Inline info box (e.g. "Next scheduled run …") — a soft tinted pill. */ .ag-info-box { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 8px; background: var(--ag-hover); font-size: 13px; } .ag-info-box-label { color: var(--ag-muted); } .ag-info-box-value { font-weight: 700; color: var(--ag-text); } /* Roomier header/row cells (Radzen's compact density is too tight — the design uses generous horizontal padding around the cell text). */ .rz-density-compact .rz-grid-table th { padding: 12px 20px; } .rz-density-compact .rz-grid-table td { padding: 13px 20px; } /* Context menus (grid row overflow "⋯" menus). Radzen's default hover is a near-white block that erases the text in dark mode — make it a dark hover. */ .rz-menu { background: var(--ag-surface); border: 1px solid var(--ag-border); border-radius: 8px; overflow: hidden; padding: 4px; } .rz-navigation-item-link { color: var(--ag-text2); border-radius: 5px; } .rz-navigation-item-text { color: inherit; } .rz-navigation-item-icon { color: var(--ag-muted); } .rz-navigation-item:hover > .rz-navigation-item-wrapper > .rz-navigation-item-link, .rz-navigation-item-link:hover { background: var(--ag-hover) !important; color: var(--ag-text) !important; } /* Radzen also fills the (sharp-cornered) wrapper/item near-white on hover, which showed as white corners behind the rounded link — keep those transparent. */ .rz-navigation-item:hover, .rz-navigation-item:hover > .rz-navigation-item-wrapper, .rz-navigation-item-wrapper:hover { background: transparent !important; } /* Destructive item (Delete): the icon carries an inline colour via IconColor, so tint the whole row — icon and text — the danger red, hover included. */ .rz-navigation-item-link:has(.rz-navigation-item-icon[style*="color"]), .rz-navigation-item:hover > .rz-navigation-item-wrapper > .rz-navigation-item-link:has(.rz-navigation-item-icon[style*="color"]) { color: var(--ag-danger) !important; } /* Alerts: soften Radzen's filled variant into the design's tinted banners — 13px body text in --ag-text2, and an icon tinted to the status colour. */ .rz-alert { font-size: 13px; line-height: 1.55; } .rz-alert .rz-alert-icon { font-size: 18px; } .rz-alert.rz-info { background: var(--ag-info-soft); border: 1px solid var(--ag-info); color: var(--ag-text2); } .rz-alert.rz-warning { background: var(--ag-warn-soft); border: 1px solid var(--ag-warn); color: var(--ag-text2); } .rz-alert.rz-danger { background: var(--ag-danger-soft); border: 1px solid var(--ag-danger); color: var(--ag-text2); } .rz-alert.rz-success { background: var(--ag-accent-soft); border: 1px solid var(--ag-accent); color: var(--ag-text2); } .rz-alert.rz-info .rz-alert-icon { color: var(--ag-info); } .rz-alert.rz-warning .rz-alert-icon { color: var(--ag-warn); } .rz-alert.rz-danger .rz-alert-icon { color: var(--ag-danger); } .rz-alert.rz-success .rz-alert-icon { color: var(--ag-accent); } /* Inline (non-footer) button group; align-self stops the parent column stack (align-items:stretch) from stretching a lone button to full width. */ .ag-actions-inline { display: flex; flex-wrap: wrap; gap: 10px; align-self: flex-start; } /* Status pills (email confirmed, role status, …). */ .ag-badge { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 5px; font: 700 11.5px "Manrope", sans-serif; white-space: nowrap; } .ag-badge-success { background: var(--ag-accent-soft); color: var(--ag-accent-text); } .ag-badge-danger { background: var(--ag-danger-soft); color: var(--ag-danger); } /* Table row actions: a primary action plus a compact overflow (⋯) button. */ .ag-row-actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; } .ag-icon-btn.rz-button { width: 30px; min-width: 30px; padding: 0; } /* Name + id stacked cell (id is monospace, muted, truncated). */ .ag-cell-name { font-weight: 700; color: var(--ag-text); } .ag-cell-id { display: block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 10.5px "JetBrains Mono", monospace; color: var(--ag-faint); } /* Two-column field grid (collapses to one column when narrow). */ .ag-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; } @media (max-width: 640px) { .ag-form-grid { grid-template-columns: 1fr; } } /* Page header row with a heading on the left and an action on the right. */ .ag-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; } /* Dashed empty-state card (no passkeys, no data, …). */ .ag-empty { background: var(--ag-surface); border: 1px dashed var(--ag-border2); border-radius: 10px; padding: 44px 30px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; } .ag-empty-icon { font-size: 22px; color: var(--ag-faint); } .ag-empty-title { font: 600 14px "Manrope", sans-serif; color: var(--ag-text); } .ag-empty-text { font-size: 12.5px; color: var(--ag-muted); } /* Links */ a, .rz-link { color: var(--ag-accent-text); } a:hover, .rz-link:hover { text-decoration: underline; } /* Card footer action row: bordered separator, natural-width buttons, aligned to the end (forms) or start (destructive/data pages), matching the design. */ .ag-card-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; border-top: 1px solid var(--ag-border); padding-top: 18px; margin-top: 2px; } .ag-card-actions.ag-start { justify-content: flex-start; } /* ===================================================== APP SHELL (host) === */ .ag-shell { display: flex; min-height: 100vh; } .ag-sidebar { width: 232px; flex: none; background: var(--ag-bg-sidebar); border-right: 1px solid var(--ag-border); display: flex; flex-direction: column; padding: 20px 12px; gap: 3px; box-sizing: border-box; } .ag-brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 20px; } .ag-brand-mark { width: 30px; height: 30px; border-radius: 7px; background: var(--ag-accent); display: flex; align-items: center; justify-content: center; color: var(--ag-on-accent); font: 700 15px "Space Grotesk", sans-serif; flex: none; } .ag-brand-name { font: 700 14px "Space Grotesk", sans-serif; color: var(--ag-text); } .ag-nav-section { padding: 16px 11px 6px; font: 700 10.5px "Manrope", sans-serif; letter-spacing: 0.1em; color: var(--ag-faint); } .ag-nav-group { display: flex; flex-direction: column; gap: 1px; } .ag-nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 11px; font: 600 12.5px "Manrope", sans-serif; color: var(--ag-muted); border-left: 2px solid transparent; border-radius: 0 5px 5px 0; cursor: pointer; text-decoration: none; } .ag-nav-item:hover { color: var(--ag-text); text-decoration: none; } /* Blazor's NavLink applies the "active" class on the matched route. */ .ag-nav-item.active { color: var(--ag-accent-text); background: var(--ag-accent-soft); border-left-color: var(--ag-accent); } .ag-nav-item.ag-home { padding: 9px 11px; border-radius: 6px; font-size: 13px; border-left: none; } .ag-sidebar-footer { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: 12px 8px 0; } .ag-sidebar-note { font-size: 11px; color: var(--ag-faint); padding: 0 2px; } .ag-main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .ag-topbar { display: flex; align-items: center; justify-content: space-between; padding: 0 28px; height: 58px; border-bottom: 1px solid var(--ag-border); } .ag-topbar-title { font: 600 17px "Space Grotesk", sans-serif; color: var(--ag-text); } .ag-topbar-actions { display: flex; align-items: center; gap: 16px; } .ag-topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; } /* Hamburger + backdrop: hidden on desktop, shown when the sidebar collapses. */ .ag-hamburger { display: none; width: 34px; height: 34px; flex: none; border-radius: 6px; background: transparent; border: 1px solid var(--ag-border2); color: var(--ag-text); cursor: pointer; align-items: center; justify-content: center; font-size: 16px; padding: 0; } .ag-hamburger:hover { background: var(--ag-hover); } .ag-backdrop { display: none; } .ag-content { padding: 32px 28px; } /* theme toggle pill */ .ag-theme-toggle { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 16px; background: var(--ag-input); border: 1px solid var(--ag-border); } .ag-theme-btn { width: 26px; height: 26px; border-radius: 50%; border: 1px solid transparent; background: transparent; color: var(--ag-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12.5px; padding: 0; box-sizing: border-box; } .ag-theme-btn.ag-active { background: var(--ag-accent-soft); border-color: var(--ag-accent); color: var(--ag-accent-text); } /* user chip */ .ag-user-chip { display: flex; align-items: center; gap: 9px; padding: 5px 8px; border-radius: 6px; cursor: pointer; } .ag-user-chip:hover { background: var(--ag-hover); } .ag-avatar { width: 29px; height: 29px; border-radius: 50%; background: var(--ag-accent-soft); border: 1px solid var(--ag-accent); display: flex; align-items: center; justify-content: center; color: var(--ag-accent-text); font: 700 11px "Manrope", sans-serif; flex: none; } .ag-user-email { font: 600 12.5px "Manrope", sans-serif; color: var(--ag-text2); } /* ==================================================== LOGIN (auth pages) == */ .ag-login { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 40px 20px; box-sizing: border-box; background: var(--ag-bg); } .ag-login-inner { width: 100%; max-width: 420px; display: flex; flex-direction: column; } .ag-login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; justify-content: center; } .ag-login-brand .ag-brand-mark { width: 38px; height: 38px; border-radius: 9px; font-size: 19px; } .ag-login-brand .ag-brand-name { font-size: 18px; } .ag-login-card { width: 100%; max-width: 420px; background: var(--ag-surface); border: 1px solid var(--ag-border); border-radius: 10px; padding: 36px 36px 32px; display: flex; flex-direction: column; gap: 20px; box-sizing: border-box; } .ag-login-head { display: flex; flex-direction: column; gap: 6px; } .ag-login-head h1, .ag-login-head .rz-text-h4 { margin: 0; font: 600 24px "Space Grotesk", sans-serif; color: var(--ag-text); } .ag-login-sub { margin: 0; font-size: 13.5px; color: var(--ag-muted); } .ag-login-footer { font-size: 12px; color: var(--ag-faint); } /* The auth pages stack their form controls; give them the design's rhythm. */ .ag-login-card .rz-label { font: 600 12.5px "Manrope", sans-serif; color: var(--ag-muted); } .ag-login-card .rz-textbox, .ag-login-card .rz-password, .ag-login-card .rz-password input { width: 100%; box-sizing: border-box; height: 42px; } /* Full-width, stacked, sentence-case (Radzen's Material theme upper-cases). */ .ag-login-card .rz-button { height: 44px; border-radius: 6px; width: 100%; text-transform: none; justify-content: center; font-size: 14px; } .ag-login-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; } /* Second action ("Log in with a passkey") is an outline button, not filled. */ .ag-login-card .rz-button[data-af="passkey"] { background: transparent; border: 1px solid var(--ag-border2); color: var(--ag-text); font-weight: 600; display: flex; align-items: center; gap: 9px; } .ag-login-card .rz-button[data-af="passkey"]:hover { background: var(--ag-hover); filter: none; } /* Password label row with the inline "Forgot password?" link. */ .ag-login-field-head { display: flex; justify-content: space-between; align-items: baseline; } .ag-login-forgot { font: 600 12px "Manrope", sans-serif; color: var(--ag-accent-text); } .ag-login-footer-links { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 2px; } .ag-login-resend { font: 600 12.5px "Manrope", sans-serif; color: var(--ag-muted); } /* The heading is a plain h1 — never let a theme give it a control border. */ .ag-login-head .rz-text-h4 { border: none; outline: none; background: none; padding: 0; } /* ==================================================== RESPONSIVE ========== */ /* Under 1000px the sidebar becomes an off-canvas drawer toggled by the hamburger; a backdrop covers the content while it's open. */ @media (max-width: 1000px) { .ag-hamburger { display: inline-flex; } .ag-sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 60; overflow-y: auto; transform: translateX(-100%); transition: transform 0.2s ease; } .ag-shell[data-nav-open="true"] .ag-sidebar { transform: translateX(0); box-shadow: 0 0 40px rgba(0, 0, 0, 0.4); } .ag-shell[data-nav-open="true"] .ag-backdrop { display: block; position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, 0.5); } } /* Under 700px: tighter padding, hide the user email, single-column grids and horizontally scrollable data tables. */ @media (max-width: 700px) { .ag-topbar { padding: 0 14px; } .ag-content { padding: 20px 14px; } .ag-user-email { display: none; } .ag-topbar-actions { gap: 10px; } .ag-form-grid { grid-template-columns: 1fr; } /* Keep data grids usable: give the table a min width and let the cell area scroll horizontally instead of crushing the columns. */ .rz-data-grid .rz-grid-table { min-width: 620px !important; } .rz-data-grid-data { overflow-x: auto; } }