/* * Mjara Brand CSS * =============== * Loaded via app_include_css → injected in before first paint. * All styling here is zero-flicker. * * Sections: * 0. Arabic font (IBM Plex Sans Arabic) + font-stack override * 1. Hide anchors that point at Frappe / ERPNext domains * 2. Hide "Powered by / Built on Frappe" footer variants * 3. Replace navbar logo image with "Mjara" text (until logo is uploaded) */ /* ========================================================================= 0. Arabic font — IBM Plex Sans Arabic Place the woff2 files in: apps/mjara_brand/mjara_brand/public/fonts/ Until they land, Arabic glyphs fall back to system fonts (Tahoma / SF Arabic / Segoe UI Arabic depending on OS). ========================================================================= */ @font-face { font-family: "IBM Plex Sans Arabic"; src: url("/assets/mjara_brand/fonts/IBMPlexSansArabic-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Sans Arabic"; src: url("/assets/mjara_brand/fonts/IBMPlexSansArabic-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Sans Arabic"; src: url("/assets/mjara_brand/fonts/IBMPlexSansArabic-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Sans Arabic"; src: url("/assets/mjara_brand/fonts/IBMPlexSansArabic-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "IBM Plex Sans Arabic"; src: url("/assets/mjara_brand/fonts/IBMPlexSansArabic-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* Override Frappe's --font-stack so Arabic glyphs render in IBM Plex Sans Arabic while Latin glyphs continue to use InterVariable. */ :root { --font-stack: "IBM Plex Sans Arabic", "InterVariable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; } /* Press dashboard hardcodes Inter on its app root, bypassing --font-stack. Force a shaping-aware Arabic font in RTL pages so words like "مجرة" render as connected Arabic letters instead of isolated Latin-font glyphs. */ html[dir=rtl] body, html[dir=rtl] body *:not(svg):not(path):not(code):not(pre) { font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif !important; font-variant-ligatures: normal; text-rendering: optimizeLegibility; } @media (min-width: 768px) { html[dir=rtl] aside button .text-base.font-medium.leading-none.hidden { display: block !important; direction: rtl; unicode-bidi: isolate; white-space: nowrap; } } /* Billing overview uses fixed px-60 side padding, which leaves a very narrow content column on smaller dashboard widths and causes Arabic labels/buttons to collide. Keep the desktop spacing only on roomy viewports. */ @media (max-width: 1100px) { html[dir=rtl] .flex.flex-1.flex-col.gap-8.overflow-y-auto.px-60.pt-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } } @media (max-width: 640px) { html[dir=rtl] .flex.flex-1.flex-col.gap-8.overflow-y-auto.px-60.pt-6 { gap: 1.25rem !important; padding-left: 1rem !important; padding-right: 1rem !important; } html[dir=rtl] .flex.flex-1.flex-col.gap-8.overflow-y-auto.px-60.pt-6 .flex.items-center.justify-between { align-items: stretch !important; flex-direction: column !important; gap: 0.75rem !important; } html[dir=rtl] .flex.flex-1.flex-col.gap-8.overflow-y-auto.px-60.pt-6 .shrink-0, html[dir=rtl] .flex.flex-1.flex-col.gap-8.overflow-y-auto.px-60.pt-6 .shrink-0 > button { width: 100% !important; } html[dir=rtl] .flex.flex-1.flex-col.gap-8.overflow-y-auto.px-60.pt-6 button { justify-content: center !important; max-width: 100% !important; white-space: normal !important; } } /* ========================================================================= Indigo color palette tokens + Frappe Desk primary color overrides Palette: 12 shades supplied by the Mjara design system. Indigo-9 (#3E63DD) is the brand primary — buttons, links, active accents. ========================================================================= */ :root { /* --- Indigo palette tokens --- */ --indigo-1: #FDFDFE; --indigo-2: #F7F9FF; --indigo-3: #EDF2FE; --indigo-4: #E1E9FF; --indigo-5: #D2DEFF; --indigo-6: #C1D0FF; --indigo-7: #ABBDF9; --indigo-8: #8DA4EF; --indigo-9: #3E63DD; --indigo-10: #3358D4; --indigo-11: #3A5BC7; --indigo-12: #1F2D5C; /* --- Frappe Desk primary overrides --- */ --primary: var(--indigo-9); --primary-color: var(--indigo-9); --btn-primary: var(--indigo-9); --brand-color: var(--indigo-9); --border-primary: var(--indigo-9); /* Sidebar active item highlight */ --sidebar-select-color: var(--indigo-3); /* Input / control focus border */ --dark-border-color: var(--indigo-8); /* Hyperlinks */ --ink-blue-link: var(--indigo-9); /* ---- Frappe-UI / CRM blue scale → Indigo ---- CRM and other Vue SPAs use --blue-* and --dark-blue-* as their base palette, referenced via Tailwind utility classes compiled as var(--blue-500) etc. Remap the whole scale to Indigo shades. */ --blue-50: var(--indigo-1); /* #FDFDFE */ --blue-100: var(--indigo-3); /* #EDF2FE */ --blue-200: var(--indigo-4); /* #E1E9FF */ --blue-300: var(--indigo-5); /* #D2DEFF */ --blue-400: var(--indigo-7); /* #ABBDF9 */ --blue-500: var(--indigo-9); /* #3E63DD — main interactive */ --blue-600: var(--indigo-10); /* #3358D4 */ --blue-700: var(--indigo-11); /* #3A5BC7 */ --blue-800: var(--indigo-12); /* #1F2D5C */ --blue-900: var(--indigo-12); /* #1F2D5C */ /* Frappe espresso semantic blue tokens — ink (text/icon) */ --ink-blue-1: var(--indigo-3); /* lightest tint */ --ink-blue-2: var(--indigo-9); /* main interactive = #3E63DD */ --ink-blue-3: var(--indigo-10); /* darker interactive */ --ink-blue-link: var(--indigo-9); /* hyperlinks */ /* Frappe espresso semantic blue tokens — surface (backgrounds) */ --surface-blue-1: var(--indigo-2); /* lightest hover bg */ --surface-blue-2: var(--indigo-3); /* selected bg */ --surface-blue-3: var(--indigo-9); /* SOLID button bg = #3E63DD */ /* Border */ --outline-blue-1: var(--indigo-6); /* #C1D0FF */ /* Vue SPA primary action buttons (frappe-ui solid gray theme = default) → Indigo frappe-ui Button.vue default theme="gray" renders as bg-surface-gray-7. The compiled class uses var(--surface-gray-7, #171717) so overriding the variable here is sufficient; class-level overrides below are belt-and-suspenders. */ --surface-gray-7: #3E63DD; /* primary button bg (was near-black #171717) */ --surface-gray-6: #3358D4; /* hover state */ --surface-gray-5: #3A5BC7; /* active/pressed state */ } /* ========================================================================= Indigo accent — component-level overrides that use hard values ========================================================================= */ /* Indicator dots (small colored circles before a label) → solid Indigo */ .indicator.blue::before { background: var(--indigo-9) !important; } /* Indicator pills (list view status badges like "Submitted", "Draft") → light Indigo background with dark Indigo text, same pattern as Frappe's native blue pill but in our palette. Solid bg made text invisible. */ .indicator-pill.blue { background: var(--indigo-3, #EDF2FE) !important; color: var(--indigo-9, #3E63DD) !important; } [data-theme="dark"] .indicator-pill.blue { background: #1F2D5C !important; color: #ABBDF9 !important; } /* Checkbox checked state */ input[type="checkbox"]:checked, .checkbox-input:checked { accent-color: var(--indigo-9); } /* Primary button explicit background (some Frappe components bypass --primary) */ .btn-primary { background-color: var(--indigo-9) !important; border-color: var(--indigo-10) !important; } .btn-primary:hover, .btn-primary:focus { background-color: var(--indigo-10) !important; border-color: var(--indigo-11) !important; } .btn-primary:active { background-color: var(--indigo-11) !important; } /* Hyperlinks across the Desk */ a.grey-link:hover, .form-links .badge-link:hover, .sidebar-item.selected .sidebar-item-label, .sidebar-item:hover .sidebar-item-label { color: var(--indigo-9) !important; } /* List / report row selection highlight */ .list-row-col.checkbox input:checked + span, .list-row.selected { background-color: var(--indigo-3) !important; } /* Active nav tabs (form tabs, report tabs) */ .nav-link.active, .nav-pills .nav-link.active { color: var(--indigo-9) !important; border-color: var(--indigo-9) !important; } /* Frappe-UI primary button (Vue SPAs — variant-solid with data-state attribute) */ .btn.variant-solid[data-state] { background-color: var(--indigo-9) !important; } /* Frappe Desk btn-primary-light (filter indicator when filters are active). Light mode: keep original light-gray bg, Indigo text — readable. Dark mode: solid Indigo bg with white text — matches primary button style. */ .btn-primary-light { background-color: #e2e2e2 !important; color: var(--indigo-9) !important; } .btn-primary-light:hover { background-color: #ededed !important; } [data-theme="dark"] .btn-primary-light { background-color: var(--indigo-9) !important; border-color: var(--indigo-10) !important; color: #ffffff !important; } [data-theme="dark"] .btn-primary-light:hover { background-color: var(--indigo-10) !important; } /* ========================================================================= Frappe-UI hardcoded blue utility overrides Frappe-UI's Tailwind config compiles bg-blue-* / text-blue-* to hardcoded RGB values (not CSS variables), so --blue-500 overrides alone do nothing. We target the generated classes directly. ========================================================================= */ /* Background fill utilities */ .bg-blue-500 { background-color: #3E63DD !important; } .bg-blue-600 { background-color: #3358D4 !important; } .bg-blue-700 { background-color: #3A5BC7 !important; } .bg-blue-400 { background-color: #ABBDF9 !important; } .bg-blue-300 { background-color: #D2DEFF !important; } .bg-blue-200 { background-color: #E1E9FF !important; } .bg-blue-100 { background-color: #EDF2FE !important; } /* Hover state overrides */ .hover\:bg-blue-500:hover { background-color: #3E63DD !important; } .hover\:bg-blue-600:hover { background-color: #3358D4 !important; } .hover\:bg-blue-400:hover { background-color: #ABBDF9 !important; } .hover\:bg-blue-300:hover { background-color: #D2DEFF !important; } /* Active state overrides */ .active\:bg-blue-700:active { background-color: #3A5BC7 !important; } .active\:bg-blue-600:active { background-color: #3358D4 !important; } /* Text color utilities */ .text-blue-500 { color: #3E63DD !important; } .text-blue-600 { color: #3358D4 !important; } .text-blue-700 { color: #3A5BC7 !important; } .text-blue-400 { color: #ABBDF9 !important; } /* Focus ring */ .focus-visible\:ring-blue-400:focus-visible { --tw-ring-color: #ABBDF9 !important; } /* Dark mode — blue utilities use lighter shades */ [data-theme="dark"] .bg-blue-500, [data-theme="dark"] .hover\:bg-blue-500:hover { background-color: #8DA4EF !important; } [data-theme="dark"] .bg-blue-600, [data-theme="dark"] .hover\:bg-blue-600:hover { background-color: #ABBDF9 !important; } [data-theme="dark"] .text-blue-500, [data-theme="dark"] .text-blue-600 { color: #ABBDF9 !important; } /* ========================================================================= Frappe-UI gray solid button → Indigo rebrand Belt-and-suspenders class overrides in addition to the CSS variable declarations above. Frappe-UI compiles these as: .bg-surface-gray-7 { background-color: var(--surface-gray-7, #171717) !important } Both sides have !important → last-in-cascade wins → ours (injected last). ========================================================================= */ .bg-surface-gray-7 { background-color: #3E63DD !important; } .hover\:bg-surface-gray-6:hover { background-color: #3358D4 !important; } .active\:bg-surface-gray-5:active { background-color: #3A5BC7 !important; } [data-theme="dark"] .bg-surface-gray-7 { background-color: #ABBDF9 !important; } [data-theme="dark"] .hover\:bg-surface-gray-6:hover { background-color: #8DA4EF !important; } [data-theme="dark"] .active\:bg-surface-gray-5:active { background-color: #C1D0FF !important; } /* Dark mode — use lighter Indigo shades so they're visible on dark backgrounds */ [data-theme="dark"] { /* Frappe Desk */ --primary: var(--indigo-7); --primary-color: var(--indigo-7); /* Frappe-UI / CRM semantic tokens (dark theme redefines these) */ --ink-blue-1: #EDF2FE; /* near-white for subtle icon/text */ --ink-blue-2: var(--indigo-7); /* #ABBDF9 — main interactive on dark */ --ink-blue-3: var(--indigo-6); /* #C1D0FF — lighter variant */ --ink-blue-link: var(--indigo-7); /* #ABBDF9 — links on dark bg */ --surface-blue-1: #1F2D5C; /* dark indigo tint for hover bg */ --surface-blue-2: #162248; /* slightly darker hover */ --surface-blue-3: var(--indigo-9); /* #3E63DD — solid button stays saturated */ --outline-blue-1: var(--indigo-12); /* #1F2D5C — dark border */ /* --blue-* scale for dark mode */ --blue-400: var(--indigo-7); /* #ABBDF9 */ --blue-500: var(--indigo-8); /* #8DA4EF */ /* Restore original Frappe alert-bg-info so .alert.alert-info callout boxes don't appear as jarring deep-blue rectangles in dark mode. Our :root --blue-900 override (indigo-12 = #1F2D5C) would otherwise tint every info alert with our brand indigo; neutral gray is less distracting. */ --alert-bg-info: var(--gray-800); /* neutral dark gray, not indigo-blue */ /* Surface-gray → lighter Indigo in dark mode (dark bg needs lighter fg for contrast) */ --surface-gray-7: var(--indigo-7); /* #ABBDF9 — light indigo on dark bg */ --surface-gray-6: var(--indigo-8); /* #8DA4EF */ --surface-gray-5: var(--indigo-6); /* #C1D0FF */ } /* Primary button text — force white in dark mode. Frappe sets --neutral: var(--neutral-black) = #000000 in dark mode and .btn.btn-primary uses color: var(--neutral). Overriding --neutral and setting color directly ensures white text regardless of !important cascade. */ [data-theme="dark"] .btn-primary, [data-theme="dark"] .btn.btn-primary { --neutral: #ffffff; --neutral-black: #ffffff; color: #ffffff !important; } [data-theme="dark"] .btn-primary:hover, [data-theme="dark"] .btn.btn-primary:hover, [data-theme="dark"] .btn-primary:focus, [data-theme="dark"] .btn.btn-primary:focus { --neutral: #ffffff; --neutral-black: #ffffff; color: #ffffff !important; } /* ========================================================================= Beam SPA — RTL sidebar position Raven hard-codes position:fixed;left:0 on the sidebar and margin-left on the main content. These physical properties don't auto-flip with direction inheritance — we override them explicitly for html[dir="rtl"]. ========================================================================= */ /* Move the fixed sidebar from the left edge to the right edge */ html[dir="rtl"] .radix-themes .rt-r-position-fixed.rt-r-left-0 { left: auto !important; right: 0 !important; border-right: 0 !important; border-left: 1px solid var(--gray-a3) !important; } /* Flip the inner workspace-icon column divider border */ html[dir="rtl"] .radix-themes .rt-r-fd-column.w-20.border-r { border-right: 0 !important; border-left: 1px solid var(--gray-a3) !important; } /* Push main content away from the right (where the sidebar now lives) */ html[dir="rtl"] .radix-themes [class*="ml-[var(--sidebar-width)]"] { margin-left: 0 !important; margin-right: var(--sidebar-width) !important; } /* Radix primitives (Tabs, Select, Dialog, ScrollArea…) each render dir="ltr" as a DOM attribute, which cuts off RTL inheritance for their entire subtree — form grids, tab panels, etc. Reset them all to RTL in one rule. */ html[dir="rtl"] .radix-themes [dir="ltr"] { direction: rtl !important; } /* Settings page: nav sidebar border flips (sidebar is on right in RTL) */ html[dir="rtl"] .radix-themes .fixed.w-64.border-r { border-right: 0 !important; border-left: 1px solid var(--gray-a4) !important; } /* Settings page: content area has sm:ml-64 — flip to margin-right */ html[dir="rtl"] .radix-themes [class*="sm:ml-64"] { margin-left: 0 !important; margin-right: 16rem !important; } /* ========================================================================= 1. Hide Frappe / ERPNext external links (docs, telegram, github, discuss…) Covers anything that slipped past the server-side navbar filter. ========================================================================= */ a[href*="frappe.io"], a[href*="frappeframework.com"], a[href*="frappecloud.com"], a[href*="erpnext.com"], a[href*="erpnext.org"], a[href*="discuss.frappe.io"], a[href*="discuss.erpnext.com"], a[href*="t.me/frappe"], a[href*="t.me/erpnext"], a[href*="github.com/frappe"], a[href*="github.com/erpnext"], a[href*="twitter.com/frappetech"], a[href*="twitter.com/erpnext"], a[href*="youtube.com/@frappetech"], a[href*="youtube.com/c/FrappeTech"], a[href*="linkedin.com/company/frappe"] { display: none !important; } /* ========================================================================= 2. Suppress "Powered by Frappe" / "Built on Frappe" footer variants Belt-and-suspenders — Website Settings.footer_powered="" does it server-side. ========================================================================= */ .footer-powered, .powered-by-frappe, .built-on-frappe { display: none !important; } /* ========================================================================= 3. Navbar logo — Mjara SVG icon app_logo_url is set server-side in extend_bootinfo so the Desk img src is already correct. We just size it and remove any text fallback. ========================================================================= */ .navbar .navbar-brand img, .navbar-home img { display: block !important; width: 120px !important; height: auto !important; max-height: none !important; object-fit: contain; } /* Remove the old text fallback */ .navbar .navbar-brand::before, .navbar-home::before { content: none !important; } /* Splash logo on boot screen */ .splash img { display: block !important; width: 180px !important; height: auto !important; object-fit: contain; content: url("/assets/mjara_brand/images/logo-light.svg"); } .splash::before { content: none !important; } /* Drive share dialog: prevent long email chips from overflowing the member row and pushing "Can view" off-screen. Keep this scoped to rows that actually contain chip buttons so setup-domain suffixes do not get clipped. */ .bg-surface-gray-2:has(button) { min-width: 0; overflow: hidden; } .bg-surface-gray-2:has(button) > div { min-width: 0; } .bg-surface-gray-2:has(button) > div > div:first-child { width: 100% !important; min-width: 0; overflow: hidden; } .bg-surface-gray-2:has(button) > div > div:empty { display: none !important; } /* Truncate the email label inside each chip button */ .bg-surface-gray-2:has(button) button { max-width: 100%; overflow: hidden; } .bg-surface-gray-2:has(button) button > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 18ch; } /* ========================================================================= RTL — Vue SPA sidebar icon-text gap fix Vue SPAs (Drive, CRM, Helpdesk …) use Tailwind's ml-2 / mr-2 utilities to space the label after the icon in sidebar nav items. In RTL flex these margins end up on the wrong side, making icons appear flush against text. Swap the margin direction for every element that carries these classes inside an RTL page. ========================================================================= */ html[dir=rtl] .flex > span.ml-2, html[dir=rtl] .flex > span.ml-1, html[dir=rtl] .flex.items-center > span.ml-2, html[dir=rtl] .flex.items-center > span.ml-1, html[dir=rtl] .flex.items-center span.flex-1.ml-2, html[dir=rtl] .flex.items-center span.flex-shrink-0.ml-2 { margin-left: 0 !important; margin-right: 0.5rem !important; } html[dir=rtl] .flex > span.ml-1, html[dir=rtl] .flex.items-center > span.ml-1 { margin-left: 0 !important; margin-right: 0.25rem !important; } html[dir=rtl] .flex.items-center > .icon.mr-2, html[dir=rtl] .flex > .mr-2:first-child, html[dir=rtl] .flex.items-center > .mr-2.flex-shrink-0, html[dir=rtl] .flex.items-center > .mr-2.h-4, html[dir=rtl] .flex.items-center > .mr-1\.5.flex-shrink-0, html[dir=rtl] .flex.items-center > .mr-1.flex-shrink-0 { margin-right: 0 !important; margin-left: 0.5rem !important; } /* Press dashboard sidebar uses physical text-left classes in Vue. Flip only the dashboard navigation rows when the page is Arabic. */ html[dir=rtl] aside nav a, html[dir=rtl] aside nav button, html[dir=rtl] aside nav summary { text-align: right !important; } html[dir=rtl] aside nav a > span.flex-1, html[dir=rtl] aside nav button > span.flex-1, html[dir=rtl] aside nav summary > span.flex-1 { text-align: right !important; } html[dir=rtl] aside nav .ml-5 { margin-left: 0 !important; margin-right: 1.25rem !important; } /* Arabic shaping breaks when Latin-oriented tracking is applied. */ html[dir=rtl], html[dir=rtl] body, html[dir=rtl] body * { letter-spacing: 0 !important; } /* ========================================================================= RTL — Dropdown / menu popup direction fix Reka UI (used by frappe-ui Dropdown) renders popup content via a portal and internally defaults to dir="ltr", overriding the page-level RTL. Force RTL on all menu role elements so icons and text flow correctly. ========================================================================= */ html[dir=rtl] [role="menu"], html[dir=rtl] [role="menuitem"], html[dir=rtl] [role="option"], html[dir=rtl] .dropdown-content { direction: rtl !important; } /* Reka UI popper wrapper (teleported to ) also needs direction */ html[dir=rtl] [data-reka-popper-content-wrapper], html[dir=rtl] [data-radix-popper-content-wrapper] { direction: rtl !important; } /* ========================================================================= RTL — Drive file list row spacing fix frappe-ui ListRow uses `space-x-4` on the row grid and `pr-2` on the checkbox cell. In RTL these are on the wrong side, making the file icon flush against the select checkbox. ========================================================================= */ html[dir=rtl] .space-x-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 1 !important; } html[dir=rtl] .space-x-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 1 !important; } html[dir=rtl] .space-x-3 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 1 !important; } /* Checkbox column: swap pr-2 → pl-2 in RTL */ html[dir=rtl] .grid.items-center > div.pr-2 { padding-right: 0 !important; padding-left: 0.5rem !important; } /* Press dashboard marketplace list: the upstream column widths are `0.3fr 0.3fr 40rem`, which makes Arabic app names nearly invisible. */ html[dir=rtl] body:has(a.router-link-exact-active[href="/dashboard/apps"]) .relative.flex.w-full.flex-1.flex-col.overflow-x-auto > .flex.w-max.min-w-full.flex-col.overflow-y-hidden { width: 100% !important; min-width: 100% !important; } html[dir=rtl] body:has(a.router-link-exact-active[href="/dashboard/apps"]) .relative.flex.w-full.flex-1.flex-col.overflow-x-auto .grid.items-center.gap-4 { grid-template-columns: 12rem 6rem minmax(16rem, 1fr) !important; } /* The mobile sidebar appears below 768px, while the notification popover uses a 640px mobile check. In the 640-767px band it is positioned as a desktop right-side popover, which pushes the full-screen drawer off-canvas. */ @media (max-width: 767px) { [data-reka-popper-content-wrapper]:has(.h-screen.w-screen), [data-radix-popper-content-wrapper]:has(.h-screen.w-screen) { height: 100vh !important; inset: 0 !important; min-width: 0 !important; position: fixed !important; transform: none !important; width: 100vw !important; } [data-reka-popper-content-wrapper]:has(.h-screen.w-screen) .PopoverContent, [data-radix-popper-content-wrapper]:has(.h-screen.w-screen) .PopoverContent, [data-reka-popper-content-wrapper]:has(.h-screen.w-screen) .body-container, [data-radix-popper-content-wrapper]:has(.h-screen.w-screen) .body-container, [data-reka-popper-content-wrapper]:has(.h-screen.w-screen) .h-screen.w-screen, [data-radix-popper-content-wrapper]:has(.h-screen.w-screen) .h-screen.w-screen { height: 100vh !important; margin: 0 !important; max-width: 100vw !important; width: 100vw !important; } }