/* XM 4 — application shell.
   <body.xm4> > #wrapper is a CSS grid: columns [rail | page], rows [header | content].
   #header is position:sticky (not fixed), so every other sticky bar on a page stacks under it:
   shell.js measures .page-head / .xmStickyTop bars in DOM order, writes each bar's `top` and
   publishes the total as --xm4-sticky-stack (use it for table headers, side panels, etc.).
   Legacy XM ids/classes (#header, #nav, .slider, .main_nav, .page-head, #main, .navbar_category,
   .xmStickyTop, .xm-drop-box, .control_panel_slider …) are kept for shared scripts and modules. */
:root,[data-bs-theme="light"] {
  --xm4-bg:#f5f7fb; --xm4-surface:#ffffff; --xm4-soft:#f1f4f9; --xm4-text:#0f172a; --xm4-ink-2:#334155;
  --xm4-muted:#64748b; --xm4-faint:#94a3b8; --xm4-line:#e2e8f0; --xm4-line-2:#eef2f7;
  --xm4-accent:#2563eb; --xm4-accent-dark:#1d4ed8; --xm4-tint:#eaf1ff; --xm4-danger:#dc2626; --xm4-success:#16a34a; --xm4-warning:#d97706;
  --xm4-shadow:0 1px 2px rgba(15,23,42,.05),0 12px 32px -16px rgba(15,23,42,.25);
  --xm4-shadow-lg:0 24px 60px -20px rgba(15,23,42,.35);
  --xm4-header:60px; --xm4-page-head:52px; --xm4-rail:256px; --xm4-rail-icons:74px; --xm4-bottom:0px; --xm4-gutter:24px; --xm4-content-max:1600px;
  --xm4-radius:14px; --xm4-radius-sm:10px;
  --bs-body-font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --bs-body-font-size:.875rem; --bs-body-color:var(--xm4-text); --bs-body-bg:var(--xm4-bg); --bs-border-color:var(--xm4-line);
  --bs-primary:#2563eb; --bs-primary-rgb:37,99,235; --bs-link-color:var(--xm4-accent); --bs-link-hover-color:var(--xm4-accent-dark);
}
[data-bs-theme="dark"] {
  --xm4-bg:#0d1422; --xm4-surface:#141e2e; --xm4-soft:#1b293d; --xm4-text:#e7edf7; --xm4-ink-2:#c3cfe0;
  --xm4-muted:#a4b2c7; --xm4-faint:#6f7f98; --xm4-line:#2b3a50; --xm4-line-2:#233043;
  --xm4-accent:#8ab4ff; --xm4-accent-dark:#6f9dff; --xm4-tint:#1c3153; --xm4-danger:#f87171; --xm4-success:#4ade80; --xm4-warning:#fbbf24;
  --xm4-shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px -12px rgba(0,0,0,.6); --xm4-shadow-lg:0 24px 60px -20px rgba(0,0,0,.7);
  --bs-body-color:var(--xm4-text); --bs-body-bg:var(--xm4-bg); --bs-border-color:var(--xm4-line); --bs-link-color:var(--xm4-accent); --bs-link-hover-color:var(--xm4-accent-dark);
}
html {scroll-padding-top:calc(var(--xm4-sticky-stack,var(--xm4-header)) + 16px);}
body.xm4 {margin:0; padding:0 0 var(--xm4-bottom); background:var(--xm4-bg); color:var(--xm4-text); font:400 var(--bs-body-font-size)/1.5 var(--bs-body-font-family); -webkit-tap-highlight-color:transparent; -webkit-font-smoothing:antialiased;}
.xm4 *, .xm4 *::before, .xm4 *::after {box-sizing:border-box;}
.xm4 [hidden] {display:none!important;}
/* The default link colour is written with :where() so it carries no specificity beyond the element: a module (or
   Bootstrap) that styles an <a> as a button sets its colour with a single class, and a plain `.xm4 a` selector would
   outrank that and paint every anchor-button's label accent blue - invisible on a blue button, wrong on any coloured
   one. Ordinary links still get the accent, and the shell's own nested link rules are unaffected. */
:where(.xm4) a {color:var(--xm4-accent); text-decoration:none;}
:where(.xm4) a:where(:hover) {color:var(--xm4-accent-dark);}
.xm4 a:focus {box-shadow:none;}
.xm4 a:focus:not(:focus-visible) {outline:none;}
.xm4 button, .xm4 input, .xm4 select, .xm4 textarea {font-family:inherit;}
.xm4 button {cursor:pointer;}
.xm4 :focus-visible {outline:2px solid var(--xm4-accent); outline-offset:2px;}
.xm4 .xm4-muted {color:var(--xm4-muted); font-size:.875rem;}
.xm4 ::selection {background:var(--xm4-tint); color:var(--xm4-text);}
.xm4 ::-webkit-scrollbar {width:10px;height:10px;}
.xm4 ::-webkit-scrollbar-thumb {background:var(--xm4-line); border-radius:8px; border:2px solid transparent; background-clip:padding-box;}
.xm4 ::-webkit-scrollbar-thumb:hover {background:var(--xm4-faint); background-clip:padding-box;}
.xm4 ::-webkit-scrollbar-track {background:transparent;}
/* a styled scrollbar's corner defaults to white: the square where two scrollbars meet (pqGrid's scroll pane) showed in dark mode */
.xm4 ::-webkit-scrollbar-corner {background:transparent;}

/* ===================== Shell grid ===================== */
/* overflow:clip (not hidden) keeps #wrapper out of the scroll-container chain, so position:sticky
   inside the page still sticks to the viewport. */
.xm4 #wrapper {position:relative; display:grid; grid-template-columns:var(--xm4-rail-col,0px) minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); width:100%; min-height:100dvh; overflow:clip;}
.xm4.xm4-has-nav {--xm4-rail-col:var(--xm4-rail);}
html.xm4-rail-collapsed .xm4.xm4-has-nav {--xm4-rail-col:var(--xm4-rail-icons);}
html.xm4-ready .xm4 #wrapper {transition:grid-template-columns .2s ease;}
.xm4 .footer_bottom {grid-column:2; grid-row:2; display:flex; flex-direction:column; min-width:0; min-height:0; padding:0;}

/* ===================== Header ===================== */
.xm4 #header {grid-column:1 / -1; grid-row:1; position:sticky; top:0; z-index:1030; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:16px; height:calc(var(--xm4-header) + env(safe-area-inset-top)); padding:env(safe-area-inset-top) 16px 0 12px; font-size:0.875rem; line-height:1.4; letter-spacing:0; color:var(--xm4-text); background:color-mix(in srgb,var(--xm4-surface) 88%,transparent); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--xm4-line); box-shadow:none; transform:none; transition:none!important;}
.xm4 #header::after {display:none;}
.xm4 #header .left-holder, .xm4 #header .right-holder, .xm4 #header .xm4-header-center {display:flex; align-items:center; min-width:0; height:100%; float:none; width:auto; padding:0; margin:0; border:0; background:none;}
.xm4 #header .left-holder {gap:10px;}
.xm4 #header .xm4-header-center {justify-content:center; padding:0 8px;}
.xm4 #header .right-holder {gap:6px; justify-content:flex-end;}
.xm4 #header .right-holder > * {flex:none;}
.xm4 #header #logo {display:flex; align-items:center; gap:10px; max-width:260px; min-width:0; margin:0; padding:0 4px; height:40px; border-radius:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--xm4-text)!important; font:700 1rem/1.2 var(--bs-body-font-family)!important; letter-spacing:-.02em; border:0;}
.xm4 #header #logo:hover {background:var(--xm4-soft); color:var(--xm4-text);}
.xm4 #header #logo img {display:block; width:auto!important; height:auto!important; max-height:34px!important; max-width:220px!important; object-fit:contain!important;}
/* An SVG exported with only a viewBox has an aspect ratio but no intrinsic size. Inside the shrink-to-fit logo box it
   then contributes nothing, so the image and the box both collapse to zero and the logo disappears. A definite height
   gives the ratio something to work from; raster logos keep their own size, capped by the max-height above. */
.xm4 #header #logo img[src*=".svg"] {height:34px!important;}
.xm4 #header #logo:focus::after {box-shadow:none;}
.xm4 #header a:focus-visible, .xm4 #header button:focus-visible {outline:2px solid var(--xm4-accent); outline-offset:2px;}
/* 38px icon buttons shared by the hamburger, alerts, search toggle and integrations */
.xm4 #header .xm4-iconbtn, .xm4 #header .nav-opener, .xm4 #header .alert-block .alert, .xm4 #header .xm4-search-toggle, .xm4 #header .airobot-btn, .xm4 #header .aiMicBot-btn, .xm4 #header .xm-otp-header-launcher {position:relative; display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; min-width:38px; padding:0; margin:0; border:1px solid var(--xm4-line); border-radius:11px; background:var(--xm4-surface); color:var(--xm4-ink-2); font-size:15px; line-height:1; text-decoration:none; float:none; transition:background .15s,border-color .15s,color .15s;}
.xm4 #header .xm4-iconbtn:hover, .xm4 #header .nav-opener:hover, .xm4 #header .alert-block .alert:hover, .xm4 #header .xm4-search-toggle:hover, .xm4 #header .airobot-btn:hover, .xm4 #header .xm-otp-header-launcher:hover {background:var(--xm4-soft); border-color:var(--xm4-faint); color:var(--xm4-text);}
.xm4 #header .nav-opener[aria-expanded="true"] {background:var(--xm4-tint); border-color:transparent; color:var(--xm4-accent);}
.xm4 #header .nav-opener > span, .xm4 #header .nav-opener .nav-opener-holder {display:none;}
.xm4 #header .nav-opener::before {content:"\f0c9"; font-family:"Font Awesome 7 Pro","Font Awesome 6 Pro"; font-weight:900; font-size:16px;}
.xm4 #header .nav-opener > i {display:none;}
.xm4 #header .alert-block, .xm4 #header .profile-block, .xm4 #header .airobot-box, .xm4 #header .aiMicBot-box, .xm4 #header .xm-otp-header-block {display:block; padding:0; margin:0; height:auto; background:none; border:0; float:none;}
.xm4 #header .right-holder i {position:static; font-size:15px; line-height:1; width:auto; height:auto; margin:0; float:none;}
.xm4 #header .alert-block .alert {width:38px!important; color:var(--xm4-ink-2);}
.xm4 #header .alert-block .alert i {font-size:16px!important;}
.xm4 #header .alert_description {position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--xm4-danger); color:#fff; font:800 10px/14px var(--bs-body-font-family); text-align:center; border:2px solid var(--xm4-surface); box-sizing:border-box;
	/* sized by its digits: with only right set, an absolute box's auto width stops at its static position (after the bell),
	   which left 22px for the pill and pushed a third digit past its red background */
	width:max-content; white-space:nowrap;}
/* Profile pill → control panel */
.xm4 #header .profile-holder {display:flex; align-items:center; float:none; margin:0 0 0 4px; padding:0; border:0!important;}
.xm4 #header .profile-opener {position:relative; display:flex; align-items:center; gap:9px; height:38px; min-width:38px; width:auto!important; margin:0; padding:3px 8px 3px 3px; border:1px solid transparent; border-radius:11px; color:var(--xm4-text); background:transparent; box-shadow:none; text-decoration:none;}
.xm4 #header .profile-opener:hover, .xm4 #header .profile-opener[aria-expanded="true"] {background:var(--xm4-soft); border-color:var(--xm4-line);}
.xm4 #header .profile-opener .name {display:block; order:2; min-width:0; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:0; color:var(--xm4-text); font:600 .8125rem/1.3 var(--bs-body-font-family); text-transform:none;}
.xm4 #header .profile-opener .icon-chevron-down {display:none;}
.xm4 #header .profile-opener .xm4-profile-caret {order:3; font-size:10px!important; color:var(--xm4-faint);}
.xm4 #header .profile-opener .photo {display:block; order:1; position:relative; flex:none; width:30px; height:30px; border-radius:50%; overflow:visible;}
.xm4 #header .profile-opener .photo img {display:block; width:30px!important; height:30px!important; border-radius:50%; object-fit:cover; background:var(--xm4-soft);}
.xm4 #header .profile-opener .status-circle {position:absolute; right:-1px; bottom:-1px; width:10px!important; height:10px!important; border-radius:50%; background:var(--xm4-success); border:2px solid var(--xm4-surface)!important;}
.xm4 #header .profile-opener .flag_tooltip {order:1;}
.xm4 #header .avatar, .xm4 #header .avatar-holder {width:30px; height:30px; margin:0; border-radius:50%; overflow:hidden;}
.xm4 #header .avatar img {width:100%; height:100%; object-fit:cover;}
/* Header search: a wide command-style field on desktop, an icon that reveals the field on small screens */
.xm4 #header .site-search {position:relative; display:flex; align-items:center; width:100%; max-width:560px; margin:0; height:auto;}
.xm4 #header .site-search label {cursor:pointer; padding:10px; color:var(--xm4-muted);}
.xm4 #header .site-search .xm4-search-toggle {display:none;}
.xm4 #header .site-search .input_holder {position:relative; display:flex!important; align-items:center; gap:10px; width:100%; height:38px; padding:0 8px 0 12px; border:1px solid var(--xm4-line); border-radius:12px; background:var(--xm4-soft); color:var(--xm4-muted); box-shadow:none; transition:box-shadow .15s,border-color .15s,background .15s;}
/* The rounded search field replaces xm-3's vertical divider. */
.xm4 #header .site-search .input_holder::before {content:none; display:none;}
.xm4 #header .site-search .input_holder:hover {border-color:var(--xm4-faint);}
.xm4 #header .site-search .input_holder:focus-within {border-color:var(--xm4-accent); background:var(--xm4-surface); box-shadow:0 0 0 4px color-mix(in srgb,var(--xm4-accent) 12%,transparent);}
.xm4 #header .site-search .input_holder > i {flex:none; font-size:14px!important; color:var(--xm4-faint);}
.xm4 #header .site-search .input_holder input, .xm4 #header .site-search .input_holder input[type=search], .xm4 #header .site-search .input_holder input[type=text] {flex:1; min-width:0; max-width:none!important; height:36px; margin:0; padding:0!important; border:0!important; border-radius:0; background:transparent; box-shadow:none!important; color:var(--xm4-text); font:400 .8125rem/1.4 var(--bs-body-font-family); outline:none;}
.xm4 #header .site-search .input_holder input::placeholder {color:var(--xm4-muted);}
/* Important rules reverse layer priority. Override the legacy forced-white search
   background inside that same layer so both appearances use the shell surface. */
@layer xm-legacy { .xm4 #header .site-search .input_holder input {background:transparent!important;} }
.xm4 #header .site-search .input_holder input::-webkit-search-cancel-button {-webkit-appearance:none;}
.xm4 #header .site-search kbd {flex:none; font:700 10.5px/1 var(--bs-body-font-family); color:var(--xm4-faint); border:1px solid var(--xm4-line); border-bottom-width:2px; border-radius:6px; padding:3px 6px; background:var(--xm4-surface);}
/* Signed-out header */
.xm4 #header .login-btns-container {display:flex; align-items:center; gap:8px; float:none; margin:0; padding:0;}
.xm4 #header .login-btn {display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 14px; border:1px solid var(--xm4-line); border-radius:11px; background:var(--xm4-surface); color:var(--xm4-text); font:600 .8125rem/1 var(--bs-body-font-family); letter-spacing:0; text-transform:none; text-decoration:none; float:none; margin:0;}
.xm4 #header .login-btn:first-child {background:var(--xm4-accent); border-color:var(--xm4-accent); color:#fff;}
.xm4 #header .login-btn:hover {filter:brightness(1.04);}
.xm4 #header .login-btn i {font-size:13px;}

/* ===================== Application rail (#nav) ===================== */
/* Grid column 1, sticky under the header. Collapsed state is a class on <html>, applied before paint by appearance.js. */
.xm4 #nav {grid-column:1; grid-row:2; position:sticky; top:var(--xm4-header); align-self:start; display:flex; flex-direction:column; width:100%; height:calc(100dvh - var(--xm4-header)); min-height:0; margin:0; padding:0; overflow:hidden; background:var(--xm4-surface); border-right:1px solid var(--xm4-line); z-index:0;}
/* z-index:0 (not 1020): the rail never overlaps in-flow page content, but fixed overlays rendered inside the page
   column often live in a module's own stacking context (the portal home wraps the AI Data Explorer bar in
   .lpx-wrap {position:relative; z-index:1}). A high rail z-index painted the rail over those bars. */
/* Local tokens let the sidebar stay dark while the rest of the portal is light. */
html[data-xm4-sidebar-appearance="dark"] .xm4 #nav {
  --xm4-surface:#10192b; --xm4-soft:#1d2b43; --xm4-text:#f1f5fc; --xm4-ink-2:#cbd5e6;
  --xm4-muted:#a4b4ce; --xm4-faint:#93a5c1; --xm4-line:#29374d;
  --xm4-accent:#a8c7ff; --xm4-tint:#243d63; color-scheme:dark;
  background:linear-gradient(165deg,#151f36,#10192b 60%);
}
.xm4 #nav .nav-opener {display:none;}
.xm4 #nav .slider {position:static; inset:auto; flex:1; min-height:0; width:auto; height:auto; max-height:none; margin:0; padding:10px 12px calc(20px + env(safe-area-inset-bottom)); overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; background:transparent; color:var(--xm4-text); border:0; box-shadow:none; transform:none; visibility:visible; opacity:1; transition:none;}
.xm4 .xm4-drawer-heading {display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:34px; margin:0 0 4px; padding:2px 6px 0; font:700 .6875rem/1 var(--bs-body-font-family); letter-spacing:.12em; text-transform:uppercase; color:var(--xm4-faint);}
.xm4 .xm4-drawer-close {display:none; flex:none; width:32px; height:32px; margin:-4px -6px 0 0; border:0; border-radius:9px; background:transparent; color:var(--xm4-muted); font-size:18px; line-height:1;}
.xm4 .xm4-drawer-close:hover {background:var(--xm4-soft); color:var(--xm4-text);}
.xm4 #nav .xm-nav-search {position:sticky; top:-10px; z-index:2; margin:0 0 6px; padding:6px 0 10px; background:var(--xm4-surface); border:0;}
.xm4 #nav .xm-nav-search i {position:absolute; left:12px; top:calc(50% - 2px); transform:translateY(-50%); font-size:13px; color:var(--xm4-faint); pointer-events:none;}
.xm4 #nav .xm-nav-search input, .xm4 #nav .xm-nav-search input[type=text] {width:100%; height:38px; margin:0; padding:0 10px 0 34px!important; font:400 .8125rem/1.4 var(--bs-body-font-family); color:var(--xm4-text); background:var(--xm4-soft); border:1px solid var(--xm4-line); border-radius:10px; outline:none; box-shadow:none; text-transform:none;}
.xm4 #nav .xm-nav-search input:focus {border-color:var(--xm4-accent); background:var(--xm4-surface); box-shadow:0 0 0 3px color-mix(in srgb,var(--xm4-accent) 14%,transparent);}
.xm4 #nav .xm-nav-noresults {display:none; padding:20px 12px; font:400 .8125rem/1.4 var(--bs-body-font-family); color:var(--xm4-muted); text-align:center;}
.xm4 #nav .main_nav, .xm4 #nav #main_nav {display:block; padding:0; margin:0; min-height:0!important; list-style:none; font-family:inherit;}
.xm4 #nav .main_nav, .xm4 #nav .main_nav ul {background:transparent; border:0;}
.xm4 #nav .main_nav li {list-style:none; margin:1px 0; padding:0; border:0; background:none; position:relative;}
.xm4 #nav .main_nav li.xm-nav-hide {display:none!important;}
.xm4 #nav .main_nav li > a, .xm4 #nav .main_nav li > button {position:relative; display:flex; align-items:center; gap:10px; width:100%; min-height:38px; padding:8px 10px; border:0; border-radius:9px; font:500 .8125rem/1.35 var(--bs-body-font-family); text-transform:none; text-align:left; text-decoration:none; color:var(--xm4-ink-2); background:transparent; transition:background .12s,color .12s;}
.xm4 #nav .main_nav li > a:hover {background:var(--xm4-soft); color:var(--xm4-text);}
.xm4 #nav .main_nav a > i {flex:none; width:20px; text-align:center; font-size:14px; color:var(--xm4-muted); transition:color .12s;}
.xm4 #nav .main_nav .xm4-nav-label {min-width:0; overflow-wrap:anywhere;}
.xm4 #nav .main_nav a > img, .xm4 #nav .main_nav a > svg {flex:none; width:20px; height:20px; object-fit:contain;}
.xm4 #nav .main_nav a:hover > i {color:var(--xm4-ink-2);}
.xm4 #nav .main_nav a.xm-nav-current, .xm4 #nav .main_nav a[aria-current] {background:var(--xm4-tint); color:var(--xm4-accent); font-weight:600; box-shadow:none;}
.xm4 #nav .main_nav a.xm-nav-current > i, .xm4 #nav .main_nav a[aria-current] > i {color:var(--xm4-accent);}
.xm4 #nav .main_nav a.xm-nav-current::before, .xm4 #nav .main_nav a[aria-current]::before {content:""; position:absolute; left:-12px; top:9px; bottom:9px; width:3px; border-radius:0 3px 3px 0; background:var(--xm4-accent);}
.xm4 #nav .main_nav > li > .opener {min-height:28px; margin-top:14px; padding:6px 10px 4px; font:700 .6875rem/1.2 var(--bs-body-font-family); letter-spacing:.1em; text-transform:uppercase; color:var(--xm4-faint); background:transparent!important;}
.xm4 #nav .main_nav > li:first-child > .opener {margin-top:4px;}
.xm4 #nav .main_nav > li > .opener:hover {color:var(--xm4-muted);}
.xm4 #nav .main_nav .opener::after {content:"\f078"; font:900 9px/1 "Font Awesome 7 Pro","Font Awesome 6 Pro"; margin-left:auto; transition:transform .15s;}
.xm4 #nav .main_nav .xm4-group-closed > .opener::after {transform:rotate(-90deg);}
.xm4 #nav .main_nav .slide {display:block; position:static; padding:0; margin:0; width:auto; height:auto; max-height:none; background:none; box-shadow:none; visibility:visible; opacity:1;}
.xm4 #nav .main_nav .slide .slide {padding-left:10px;}
.xm4 #nav .main_nav .xm4-group-closed > .slide {display:none;}
.xm4 .xm4-menu-flat > .xm4-app-group {display:contents;}
.xm4 #nav .xm4-menu-flat > .xm4-app-group > .opener {display:none;}
.xm4 #nav .xm4-menu-flat > .xm4-app-group > .slide {display:block!important;}
.xm4 .xm4-rail-footer {flex:none; padding:10px 12px; border-top:1px solid var(--xm4-line);}
.xm4 .xm4-rail-collapse, .xm4 .xm4-rail-search {display:flex; align-items:center; gap:10px; width:100%; min-height:40px; padding:8px 10px; border:0; border-radius:10px; background:transparent; color:var(--xm4-muted); font:500 .75rem/1.4 var(--bs-body-font-family); text-align:left; white-space:nowrap;}
.xm4 .xm4-rail-collapse i, .xm4 .xm4-rail-search i {flex:none; width:20px; text-align:center; font-size:15px;}
.xm4 .xm4-rail-collapse:hover, .xm4 .xm4-rail-search:hover {background:var(--xm4-soft); color:var(--xm4-text);}
.xm4 .xm4-rail-search {display:none;}
/* The label floats outside the scrolling rail. The link's own text remains available to AT. */
.xm4 .xm4-rail-tooltip {position:fixed; z-index:1035; max-width:min(260px,calc(100vw - 100px)); padding:9px 13px; border:1px solid #33445e; border-radius:9px; background:#17243a; color:#f1f5fc; box-shadow:var(--xm4-shadow); font:500 .8125rem/1.4 var(--bs-body-font-family); overflow-wrap:anywhere;}
/* Application flyout: hover (or ArrowRight on) a rail application to preview its pages. Same ?xm_menu_only source as the
   portal home cards. Fixed and body-appended because #nav clips overflow; the ::before strip bridges the 10px gap. */
.xm4 .xm4-rail-flyout {position:fixed; z-index:1035; min-width:240px; max-width:320px; overflow:auto; scrollbar-width:thin; padding:6px; border:1px solid var(--xm4-line); border-radius:12px; background:var(--xm4-surface); color:var(--xm4-text); box-shadow:var(--xm4-shadow-lg); font:500 .8125rem/1.4 var(--bs-body-font-family);}
.xm4 .xm4-rail-flyout::before {content:""; position:absolute; top:0; bottom:0; left:-12px; width:12px;}
.xm4 .xm4-rail-flyout.is-loading {min-height:72px; display:grid; place-items:center;}
.xm4 .xm4-rail-flyout.is-loading::after {content:""; width:20px; height:20px; border:2px solid var(--xm4-line); border-top-color:var(--xm4-accent); border-radius:50%; animation:xm4Spin .8s linear infinite;}
@keyframes xm4Spin {to {transform:rotate(360deg);}}
.xm4 .xm4-rail-flyout-head {margin:0 0 4px; padding:0 0 4px; border-bottom:1px solid var(--xm4-line);}
.xm4 .xm4-rail-flyout-head a {display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; color:var(--xm4-text); font-weight:700; text-decoration:none;}
.xm4 .xm4-rail-flyout-head a:hover {background:var(--xm4-soft); color:var(--xm4-accent);}
.xm4 .xm4-rail-flyout-head i {flex:none; width:20px; text-align:center; font-size:14px; color:var(--xm4-accent);}
.xm4 .xm4-rail-flyout ul {list-style:none; margin:0; padding:0;}
.xm4 .xm4-rail-flyout li {margin:0; padding:0; list-style:none;}
.xm4 .xm4-rail-flyout li a, .xm4 .xm4-rail-flyout li > .xm4-nav-label {display:flex; align-items:center; gap:10px; min-height:34px; padding:7px 10px; border-radius:8px; color:var(--xm4-ink-2); text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.xm4 .xm4-rail-flyout li a:hover, .xm4 .xm4-rail-flyout li a:focus-visible {background:var(--xm4-soft); color:var(--xm4-accent); outline-offset:-2px;}
.xm4 .xm4-rail-flyout li a[aria-current] {background:var(--xm4-tint); color:var(--xm4-accent); font-weight:600;}
.xm4 .xm4-rail-flyout li a > i {flex:none; width:16px; text-align:center; font-size:12px; color:var(--xm4-muted);}
.xm4 .xm4-rail-flyout li a > span {min-width:0; overflow:hidden; text-overflow:ellipsis;}
.xm4 .xm4-rail-flyout .badge {margin-left:auto; padding:2px 7px; border-radius:999px; background:var(--xm4-tint); color:var(--xm4-accent); font-size:.6875rem; font-weight:700;}
.xm4 .xm4-rail-flyout li > .xm4-nav-label {min-height:0; margin-top:6px; padding:8px 10px 2px; font:700 .6875rem/1.2 var(--bs-body-font-family); letter-spacing:.08em; text-transform:uppercase; color:var(--xm4-faint);}
.xm4 .xm4-rail-flyout ul ul li a {padding-left:30px; font-size:.75rem; color:var(--xm4-muted);}
.xm4 .xm4-rail-flyout ul ul ul li a {padding-left:44px;}
.xm4 #nav .main_nav li > a[data-xm4-flyout]:not([data-xm4-flyout-empty])::after {content:"\f054"; font:900 8px/1 "Font Awesome 7 Pro","Font Awesome 6 Pro"; margin-left:auto; color:var(--xm4-faint); opacity:0; transition:opacity .15s,transform .15s;}
.xm4 #nav .main_nav li > a[data-xm4-flyout]:hover::after, .xm4 #nav .main_nav li > a[data-xm4-flyout][aria-expanded="true"]::after {opacity:.7; transform:translateX(2px);}

/* ===================== Page column ===================== */
/* Content gutters align the title row, the module area and the footer on one edge. */
.xm4 .page-head, .xm4 #main, .xm4 #footer, .xm4 .xm4-module-nav.xm4-standalone, .xm4 #xmcssmenu {padding-inline:max(var(--xm4-gutter),calc((100% - var(--xm4-content-max)) / 2));}
.xm4.xm4-wide-screen .page-head, .xm4.xm4-wide-screen #main, .xm4.xm4-wide-screen #footer, .xm4.xm4-wide-screen .xm4-module-nav.xm4-standalone {padding-inline:var(--xm4-gutter);}
.xm4 #main {flex:1 1 auto; max-width:none; width:auto; margin:0; padding-top:20px; padding-bottom:32px; float:none; background:transparent;}
.xm4 #main.fixed_layout {max-width:none;}
.xm4 #xmMainContainer {max-width:var(--xm4-content-max); width:100%; margin:0 auto; padding:0;}
.xm4.xm4-wide-screen #xmMainContainer {max-width:none;}
.xm4 #PageInstructionsBox {margin:0 0 18px; padding:12px 16px; border:1px solid var(--xm4-line); border-left:3px solid var(--xm4-accent); border-radius:10px; background:var(--xm4-surface); color:var(--xm4-ink-2); font-size:.8125rem; box-shadow:none;}
.xm4 #footer {flex:none; margin:12px 0 0; padding-top:18px; padding-bottom:calc(18px + env(safe-area-inset-bottom)); background:transparent; color:var(--xm4-muted)!important; font-size:9px!important; text-align:center; border-top:1px solid var(--xm4-line);}
.xm4 #footer a {color:var(--xm4-muted);}
.xm4 #footer a:hover {color:var(--xm4-accent);}
.xm4 .accessibility {position:fixed; top:-100px; left:12px; z-index:1200; background:var(--xm4-surface); padding:12px; border-radius:8px; border:1px solid var(--xm4-line);}
.xm4 .accessibility:focus {top:8px;}

/* Title row: the existing module icon and title open its menu. */
.xm4 .page-head {position:relative; z-index:1015; display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:var(--xm4-page-head); margin:0; padding-top:6px; padding-bottom:6px; background:var(--xm4-bg); border-bottom:1px solid var(--xm4-line); transition:none!important; transform:none!important;}
.xm4 .page-head.xmStickyTop {position:sticky; top:var(--xm4-header); background:color-mix(in srgb,var(--xm4-bg) 86%,transparent); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);}
.xm4 .page-head::after {display:none;}
.xm4 .xm4-page-head-main {display:flex; align-items:center; gap:10px; flex:1 1 auto; min-width:0;}
.xm4 .page-head h1 {display:flex; align-items:center; gap:8px; float:none; min-width:0; margin:0; padding:0; font:650 1.125rem/1.3 var(--bs-body-font-family); letter-spacing:-.02em; color:var(--xm4-text); transition:none;}
.xm4 .page-head h1 > a {display:flex; align-items:center; gap:8px; min-width:0; color:inherit; text-decoration:none;}
.xm4 .page-head h1 > a:hover {color:var(--xm4-accent);}
.xm4 .page-head h1 > a[href="#"]:not([role="button"]) {cursor:default;}
.xm4 .page-head h1 > a[href="#"]:not([role="button"]):hover {color:inherit;}
.xm4 .page-head .xm4-page-title {min-height:38px; padding:4px 8px; border-radius:8px;}
.xm4 .page-head .xm4-page-title[role="button"] {cursor:pointer;}
.xm4 .page-head .xm4-page-title[role="button"]:hover {background:var(--xm4-soft); color:var(--xm4-accent);}
.xm4 .page-head .xm4-page-title:focus-visible {outline:2px solid var(--xm4-accent); outline-offset:1px; box-shadow:none;}
.xm4 .page-head .xm4-page-title[aria-expanded="true"] {background:var(--xm4-tint); color:var(--xm4-accent);}
.xm4 .page-head h1 #PageTitle {display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.xm4 .page-head h1 #PageTitle > i {display:inline-block; width:auto; margin-right:4px; font-size:.9em; color:var(--xm4-muted); position:static; padding:0;}
.xm4 .page-head h1 > a > i, .xm4 .page-head .slide-drop, .xm4 .page-head h1 .icon-chevron-down {display:none;}
.xm4 .page-head #PgInstrToggle {position:static!important; display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; margin:0; border-radius:6px; font-size:12px!important; color:var(--xm4-faint); cursor:pointer;}
.xm4 .page-head #PgInstrToggle:hover {background:var(--xm4-soft); color:var(--xm4-accent);}
/* Standalone menu control only for pages without a title row. */
.xm4 .xm4-module-trigger {display:inline-flex; flex:none; align-items:center; justify-content:center; width:38px; height:38px; padding:0; margin:0; border:1px solid var(--xm4-line); border-radius:11px; background:var(--xm4-surface); color:var(--xm4-ink-2); font-size:16px; line-height:1; transition:background .15s,border-color .15s,color .15s;}
.xm4 .xm4-module-trigger:hover {background:var(--xm4-soft); border-color:var(--xm4-faint); color:var(--xm4-text);}
.xm4 .xm4-module-trigger[aria-expanded="true"] {background:var(--xm4-accent); border-color:var(--xm4-accent); color:#fff;}
.xm4 .xm4-module-trigger i {position:static; padding:0; margin:0; line-height:1; float:none; width:auto;}
.xm4 .page-head .breadcrumbs {flex:none; float:none; padding:0; margin:0; font:500 .75rem/1.3 var(--bs-body-font-family); color:var(--xm4-muted);}
.xm4 .page-head .breadcrumbs ul {display:flex; align-items:center; flex-wrap:wrap; gap:0; list-style:none; margin:0; padding:0;}
.xm4 .page-head .breadcrumbs ul::after {display:none;}
.xm4 .page-head .breadcrumbs ul li {float:none; color:var(--xm4-muted); white-space:nowrap;}
.xm4 .page-head .breadcrumbs ul li a {color:var(--xm4-muted); transition:color .12s;}
.xm4 .page-head .breadcrumbs ul li a:hover {color:var(--xm4-accent);}
.xm4 .page-head .breadcrumbs ul li::after {content:"\f054"; font:900 8px/1 "Font Awesome 7 Pro","Font Awesome 6 Pro"; margin:0 8px; color:var(--xm4-faint);}
.xm4 .page-head .breadcrumbs ul li:last-child {color:var(--xm4-text); font-weight:600;}
.xm4 .page-head .breadcrumbs ul li:last-child::after {display:none;}

/* Add New (module-emitted .xm-drop-box markup; opened by contentPopup, which toggles .xm-popup-active) */
.xm4 #xm-page-header {display:flex; align-items:center; gap:8px; margin:0!important; padding:0!important; background:none!important; min-width:0;}
.xm4 #xm-add-new-container {position:relative; display:inline-flex; align-items:center; margin:0!important;}
.xm4 .xm-drop-box {float:none; padding:0; position:relative; display:inline-flex;}
.xm4 .xm-btn {display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 14px 0 12px; border:1px solid var(--xm4-accent); border-radius:10px; background:var(--xm4-accent); color:#fff; font:600 .8125rem/1 var(--bs-body-font-family); letter-spacing:0; text-decoration:none; white-space:nowrap; box-shadow:0 8px 20px -12px color-mix(in srgb,var(--xm4-accent) 80%,transparent); transition:background .15s,transform .1s;}
.xm4 .xm-btn:hover {background:var(--xm4-accent-dark); border-color:var(--xm4-accent-dark); color:#fff; text-decoration:none;}
.xm4 .xm-btn:active {transform:translateY(1px);}
.xm4 .xm-btn:not(:has(i))::before {content:"\2b"; font:900 12px/1 "Font Awesome 7 Pro","Font Awesome 6 Pro";}
.xm4 .xm-btn span {float:none; position:static; display:inline; min-width:0; padding:0; border:0; background:transparent!important; color:inherit; font:inherit;}
/* Remove both strokes of the legacy CSS icons; xm-4 supplies the icon on the button. */
.xm4 .xm-btn span::before, .xm4 .xm-btn span::after {content:none; display:none;}
.xm4 .xm-btn span i {margin-right:2px;}
.xm4 .xm-drop-box .xm-btn::after {content:"\f078"; font:900 9px/1 "Font Awesome 7 Pro","Font Awesome 6 Pro"; margin-left:2px; opacity:.85; transition:transform .15s;}
.xm4 .xm-drop-box.xm-popup-active .xm-btn {background:var(--xm4-accent-dark); border-color:var(--xm4-accent-dark);}
.xm4 .xm-drop-box.xm-popup-active .xm-btn::after {transform:rotate(180deg);}
.xm4 .xm-btn.xm-btn-alt {background:var(--xm4-accent); color:#fff;}
/* dark mode's accent is a light blue (#8ab4ff): white text on it measured 2.1:1, so the filled button takes the page's dark ink */
[data-bs-theme="dark"] .xm4 .xm-btn, [data-bs-theme="dark"] .xm4 .xm-btn:hover, [data-bs-theme="dark"] .xm4 .xm-btn.xm-btn-alt {color:var(--xm4-bg);}
.xm4 .xm-drop-box .xm-drop, .xm4 .xm-edit .xm-drop {position:absolute; top:calc(100% + 8px); left:0; right:auto; z-index:1025!important; padding:0; font-size:.8125rem; line-height:1.4; text-align:left;}
.xm4 .xm-drop-box .xm-drop .xm-drop-frame, .xm4 .xm-edit .xm-drop .xm-drop-frame {width:auto!important; min-width:240px; max-width:min(360px,calc(100vw - 32px)); padding:6px; border:1px solid var(--xm4-line); border-radius:12px; background:var(--xm4-surface); color:var(--xm4-text); box-shadow:var(--xm4-shadow-lg); z-index:1;}
.xm4 .xm-drop-box .xm-drop .xm-drop-frame::before, .xm4 .xm-drop-box .xm-drop .xm-drop-frame::after, .xm4 .xm-edit .xm-drop .xm-drop-frame::before, .xm4 .xm-edit .xm-drop .xm-drop-frame::after {display:none;}
.xm4 .xm-drop-box .xm-drop ul {margin:0; padding:0; list-style:none; overflow:visible; max-height:min(60vh,520px); overflow-y:auto;}
.xm4 .xm-drop-box .xm-drop a {display:flex; align-items:center; gap:10px; margin:0; padding:9px 12px; border:0; border-radius:8px; color:var(--xm4-text); font:500 .8125rem/1.35 var(--bs-body-font-family); text-decoration:none; transition:background .12s,color .12s;}
.xm4 .xm-drop-box .xm-drop a::before {content:"\2b"; position:static; margin:0; flex:none; width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; border-radius:6px; background:var(--xm4-tint); color:var(--xm4-accent); font:900 10px/1 "Font Awesome 7 Pro","Font Awesome 6 Pro";}
.xm4 .xm-drop-box .xm-drop a:has(i)::before {display:none;}
.xm4 .xm-drop-box .xm-drop a.add-new::after {content:none; display:none;}
.xm4 .xm-drop-box .xm-drop a:hover, .xm4 .xm-drop-box .xm-drop a:focus-visible {background:var(--xm4-soft); color:var(--xm4-accent);}

/* Module navigation source and the fallback control for pages without a title row. */
.xm4 .xm4-module-nav {display:none; position:relative; z-index:auto; width:auto; margin:0; padding:0; border:0; background:transparent; transform:none;}
.xm4 .xm4-module-nav.xm4-standalone {display:flex; align-items:center; gap:10px; min-height:48px; padding-top:5px; padding-bottom:5px; background:var(--xm4-bg); border-bottom:1px solid var(--xm4-line);}
.xm4 .xm4-module-nav .slideset {display:none!important;}
.xm4 .xm4-module-nav.xmStickyTop {position:static;}
/* Fragment responses may include the fallback because their request has no page header.
   Suppress it before JS runs when the host page already supplies the title control. */
.xm4 .footer_bottom:has(.page-head .xm4-page-title) .xm4-module-nav:not([data-xm4-ready]) > .xm4-module-trigger {display:none;}
html[data-xm4-module-layout="mega"] .xm4 .footer_bottom:has(.page-head .xm4-page-title) .xm4-module-nav.xm4-standalone:not([data-xm4-ready]) {display:none;}

/* ===================== Sticky stack ===================== */
/* shell.js writes `top` per bar; these are the pre-script defaults. */
.xm4 .xmStickyTop {position:sticky; top:var(--xm4-header); z-index:1010;}
.xm4 .page-head.xmStickyTop {z-index:1015;} /* the title row (and its Add New menu) stays above toolbars that stack under it */
.xm4 .controlBar.xmStickyTop, .xm4 #ControlBar.xmStickyTop {background:var(--xm4-surface);}
.xm4 table.stHeader thead th, .xm4 table.stHeader thead td, .xm4.fullscreen table.stHeader thead th, .xm4.fullscreen table.stHeader thead td {top:var(--xm4-sticky-stack,var(--xm4-header));}
.xm4 .xm4-status {position:fixed; left:50%; bottom:calc(var(--xm4-bottom) + 16px); transform:translateX(-50%); z-index:1080; max-width:calc(100% - 24px); padding:10px 16px; border:1px solid var(--xm4-line); border-radius:12px; background:var(--xm4-surface); box-shadow:var(--xm4-shadow); color:var(--xm4-text); font-size:.875rem; display:flex; align-items:center; gap:12px;}
.xm4 .xm4-status button {border:0; background:var(--xm4-tint); color:var(--xm4-accent); border-radius:6px; padding:5px 9px;}
.xm4 .xm4-status button.xm4-status-secondary {background:transparent; color:var(--xm4-muted);}
.xm4 .xm4-status button.xm4-status-secondary:hover {background:var(--xm4-soft); color:var(--xm4-text);}
.xm4:has(.xpr-wrap--composer-docked) .xm4-status {bottom:calc(var(--xm4-bottom) + var(--xpr-dock-height,72px) + 16px);} /* above the AI Data Explorer dock */
.xm4 .xm4-backdrop {position:fixed; inset:0; z-index:1040; background:#07122773; border:0; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);}
.xm4.xm4-drawer-open {overflow:hidden;}
.xm4 .xm4-bottom-nav {display:none;}
.xm4 [data-xm4-focus-boundary] {position:absolute;width:1px;height:1px;overflow:hidden;}

/* ===================== Control panel (existing XM hooks) ===================== */
/* Control panel: retain the XM hooks, with fixed controls and native scrolling. */
.xm4 .control_panel_slider {container:xm4-panel / inline-size;position:fixed;inset:0 0 0 auto;width:min(460px,100%);height:100dvh;overflow:hidden;overscroll-behavior:contain;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);background:var(--xm4-surface);color:var(--xm4-text);border-left:1px solid var(--xm4-line);box-shadow:var(--xm4-shadow);transform:translateX(105%);visibility:hidden;z-index:1045;transition:transform .2s ease,visibility .2s;}
.xm4 #wrapper.settings-active .control_panel_slider {transform:translateX(0); visibility:visible;}
.xm4 .control_panel_slider.xm4-panel-has-frame {width:min(820px,100%);}
.xm4 .control_panel_slider.xm4-panel-has-frame.xm4-panel-expanded {width:100%;}
.xm4 .control_panel {width:100%;height:100%;min-height:0;background:transparent;padding:0;position:static;}
.xm4 .control_panel > .tab-container {width:100%;height:100%;min-height:0;display:flex;flex-direction:column;}
.xm4 .xm4-panel-heading {display:flex;align-items:center;flex:none;gap:8px;min-height:58px;padding:10px 20px;}
.xm4 .xm4-panel-heading h2 {flex:1;font:650 1rem/1.4 var(--bs-body-font-family);margin:0;letter-spacing:-.025em;}
.xm4 .xm4-panel-action,.xm4 .control_panel .xm4-panel-heading .btn-close {display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;padding:0;border:1px solid transparent;border-radius:10px;opacity:1;filter:none;color:var(--xm4-muted);background:transparent;font-size:16px;position:static;}
.xm4 .xm4-panel-action:hover,.xm4 .control_panel .xm4-panel-heading .btn-close:hover {background:var(--xm4-tint);color:var(--xm4-accent);}
.xm4 .control_panel .tabset {position:relative;flex:none;display:flex;align-items:center;gap:18px;overflow-x:auto;margin:0;padding:0 20px;list-style:none;background:var(--xm4-surface);border-bottom:1px solid var(--xm4-line);scrollbar-width:thin;}
.xm4 .control_panel .tabset li {display:flex;align-items:center;float:none;flex:none;width:auto;margin:0;}
.xm4 .control_panel .tabset a {position:relative;display:flex;align-items:center;gap:6px;padding:11px 2px;min-height:44px;font:550 .8125rem/1.5 var(--bs-body-font-family);color:var(--xm4-muted);background:transparent;border:0;border-radius:0;box-shadow:none;text-transform:none;white-space:nowrap;}
.xm4 .control_panel .tabset a.active {color:var(--xm4-accent);background:transparent;border:0;box-shadow:inset 0 -2px var(--xm4-accent);}
.xm4 .control_panel .tabset .tab-close {display:none;}
.xm4 .control_panel .tabset .xm4-tab-remove {width:32px;height:36px;margin-left:2px;background:transparent;font-size:12px;}
.xm4 .control_panel .xm4-panel-content {flex:1;min-height:0;padding:20px;height:auto!important;max-height:none;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--xm4-line) transparent;color:var(--xm4-text);background:var(--xm4-bg);}
.xm4 .control_panel .xm4-panel-content > [role=tabpanel] {min-width:0;}
.xm4 .control_panel .xm4-panel-content.xm4-frame-content {padding:0;overflow:hidden;}
.xm4 .xm4-frame-tab {display:block;width:100%!important;height:100%!important;min-height:0!important;border:0!important;}
.xm4 .xm4-frame-tab > iframe:only-child {display:block;width:100%!important;height:100%!important;border:0;}
@media(max-width:820px) {.xm4 .xm4-panel-heading > .xm4-panel-action:not(.btn-close) {display:none;}}
.xm4 [data-xm4-focus-boundary] {position:absolute;width:1px;height:1px;overflow:hidden;}
.xm4 #header .site-search .xm4-search-open {display:block!important;}
.xm4 .control_panel .box {background:var(--xm4-surface);color:var(--xm4-text);border-color:var(--xm4-line);}
.xm4 .control_panel .profile {display:flex;align-items:flex-start;gap:12px;padding:2px 0 20px;margin:0;border:0;background:transparent;}
.xm4 .control_panel .profile .avatar {position:relative;float:none;flex:none;width:44px;height:44px;margin:0;}
.xm4 .control_panel .profile .avatar-holder {width:44px;height:44px;border:1px solid var(--xm4-line);border-radius:50%;overflow:hidden;background:var(--xm4-surface);}
.xm4 .control_panel .profile .text-holder {min-width:0;min-height:0!important;padding:0;overflow-wrap:anywhere;}
.xm4 .control_panel .profile .xm4-avatar-edit {position:absolute;left:-6px;bottom:-5px;display:grid;place-items:center;width:22px;height:22px;padding:0;border:1px solid var(--xm4-line);border-radius:50%;background:var(--xm4-surface);color:var(--xm4-muted);font-size:10px;box-shadow:var(--xm4-shadow);cursor:pointer;}
.xm4 .control_panel .profile .xm4-avatar-edit:hover {color:var(--xm4-accent);border-color:var(--xm4-accent);}
.xm4 .control_panel .profile .xm4-avatar-edit:disabled {cursor:progress;opacity:.6;}
.xm4 .control_panel .profile .xm4-avatar-remove {display:inline-block;margin:0 0 3px;padding:0;border:0;background:none;color:var(--xm4-muted);font:400 .75rem/1.5 var(--bs-body-font-family);text-decoration:underline;cursor:pointer;}
.xm4 .control_panel .profile .xm4-avatar-remove:hover {color:var(--xm4-danger);}
.xm4 .control_panel .profile .xm4-avatar-status {margin:0;font:400 .75rem/1.5 var(--bs-body-font-family);color:var(--xm4-muted);}
.xm4 .control_panel .profile .xm4-avatar-status:empty {display:none;}
.xm4 .control_panel .profile h2 {font:600 1rem/1.35 var(--bs-body-font-family);letter-spacing:-.02em;text-transform:none;margin:0 0 5px;}
.xm4 .control_panel .profile .position,.xm4 .control_panel .profile .mail {display:block;font:400 .75rem/1.5 var(--bs-body-font-family);color:var(--xm4-muted);margin:0 0 3px;}
.xm4 .control_panel h2,.xm4 .control_panel h3,.xm4 .control_panel label {color:var(--xm4-text);}
.xm4 .control_panel #tab1 {background:var(--xm4-bg);}
.xm4 .control_panel .accordion {display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;border:0;background:transparent;color:var(--xm4-text);font-family:var(--bs-body-font-family);}
.xm4 .control_panel #tab1 > .accordion {background:var(--xm4-bg);}
.xm4 .control_panel .accordion > li {flex:none;margin:0;border:1px solid var(--xm4-line);border-radius:12px;overflow:clip;background:var(--xm4-surface);}
.xm4 .control_panel .accordion > li > .opener {display:flex;align-items:center;gap:10px;min-height:50px;padding:13px 14px;background:var(--xm4-surface);color:var(--xm4-text);font:600 .8125rem/1.5 var(--bs-body-font-family);text-transform:none;}
.xm4 .control_panel .accordion > li > .opener:hover {background:var(--xm4-soft);}
.xm4 .control_panel .accordion > li > .opener:focus-visible {outline:2px solid var(--xm4-accent);outline-offset:-3px;border-radius:10px;}
.xm4 .control_panel .accordion > li > .opener > i {position:static!important;flex:none;width:18px;margin:0;font-size:16px!important;color:var(--xm4-muted);}
.xm4 .control_panel .accordion > li > .opener > .icon-arrow-with-circle-down {display:none;}
.xm4 .control_panel [data-xm4-panel-section]::after {content:"";width:7px;height:7px;flex:none;border:solid var(--xm4-muted);border-width:0 1.5px 1.5px 0;margin-left:auto;margin-right:3px;transform:rotate(45deg);}
.xm4 .control_panel [data-xm4-panel-section][aria-expanded=true]::after {transform:rotate(225deg);}
.xm4 .control_panel .accordion > li > .slide {position:static;width:auto;background:var(--xm4-surface);}
.xm4 .control_panel .form_row {position:relative;display:block;min-width:0;padding:11px 14px!important;background:var(--xm4-surface);color:var(--xm4-text);font-size:.8125rem;line-height:1.5;border:0;}
/* Plain text, passkey actions and QR images need the full row width. */
.xm4 .control_panel .form_row:has(> i) {display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;column-gap:10px;row-gap:6px;min-height:50px;}
.xm4 .control_panel .form_row::before {display:block;position:absolute;inset:0 14px auto;height:1px;width:auto;opacity:1;background:var(--xm4-line);content:"";transition:none;}.xm4 .control_panel .form_row::after {display:none;}
.xm4 .control_panel .form_row:has(> i)::before {left:42px;}
.xm4 .control_panel .form_row > i {grid-column:1;position:static!important;width:18px;font-size:15px;color:var(--xm4-muted);}
.xm4 .control_panel .form_row > label {grid-column:2;min-width:0;overflow-wrap:anywhere;font-weight:450;line-height:1.45;margin:0;}
.xm4 .control_panel .form_row span {float:none;color:inherit;}
.xm4 .control_panel .form_row > .pull-right {grid-column:3;float:none!important;display:flex;align-items:center;flex-wrap:wrap;gap:6px;justify-content:flex-end;}
.xm4 .control_panel .form_row > span.pull-right:has(.btn) {grid-column:2 / -1;justify-content:flex-start;}
.xm4 .control_panel .form_row > span:not(.pull-right) {grid-column:2 / -1;font-size:.6875rem;letter-spacing:.02em;color:var(--xm4-muted)!important;padding:0!important;}
.xm4 .control_panel .form_row .btn {display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;min-width:34px;max-width:100%;padding:6px 10px;border:1px solid var(--xm4-line);border-radius:7px;box-shadow:none;font:500 .75rem/1.5 var(--bs-body-font-family);text-decoration:none;white-space:normal;text-align:center;}
.xm4 .control_panel .passKeyBlock .noPassKeys {padding:18px 14px 4px!important;text-align:center;}
.xm4 .control_panel .passKeyBlock .noPassKeys > label {color:var(--xm4-muted);font-weight:400;}
.xm4 .control_panel .passKeyBlock .passkeyrow {padding:12px 14px 18px!important;}
.xm4 .control_panel .passKeyBlock .passkeyrow::before {display:none;}
.xm4 .control_panel .passKeyBlock .btnCreatePasskey {min-width:144px;min-height:40px;padding:9px 16px;}
.xm4 .control_panel .passKeyBlock .pull-right > a {display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--xm4-line);border-radius:8px;color:var(--xm4-muted);background:var(--xm4-bg);}
.xm4 .control_panel .passKeyBlock .pull-right > a:hover {color:var(--xm4-accent);background:var(--xm4-tint);}
.xm4 .control_panel .qrCodeBlock .form_row {padding:14px 20px 4px!important;color:var(--xm4-muted);}
.xm4 .control_panel .qrCodeBlock .form_row + .form_row {padding:12px 20px 20px!important;}
.xm4 .control_panel .qrCodeBlock .form_row + .form_row::before {display:none;}
.xm4 .control_panel .qrCodeBlock img {display:block;width:min(100%,208px)!important;max-width:100%;height:auto!important;aspect-ratio:1;object-fit:contain;margin:0 auto;background:#fff;border-radius:8px;}
.xm4 .control_panel .form_row .ui-switcher {display:none!important;}
.xm4 .control_panel .form_row input.toggleCheck[type=checkbox] {display:inline-block!important;appearance:none;float:none;position:relative;flex:none;width:42px;height:26px;margin:0;border:1px solid var(--xm4-line);border-radius:20px;background:var(--xm4-muted);background-image:none;cursor:pointer;box-shadow:none;}
.xm4 .control_panel .form_row input.toggleCheck[type=checkbox]::before {content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:white;transition:transform .15s;}
.xm4 .control_panel .form_row input.toggleCheck[type=checkbox]:checked {background:#2563eb;border-color:#2563eb;}
.xm4 .control_panel .form_row input.toggleCheck[type=checkbox]:checked::before {transform:translateX(16px);}
.xm4 .control_panel .form_row input.toggleCheck:disabled {opacity:.5;cursor:default;}
.xm4 .control_panel .message {padding:0;}
.xm4 .xm4-preferences {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,190px);align-items:center;gap:12px;padding:16px;margin:0 0 20px;border:1px solid var(--xm4-line);border-radius:12px;background:var(--xm4-surface);}
.xm4 .xm4-preferences h3 {grid-column:1 / -1;color:var(--xm4-muted);font:600 .6875rem/1.5 var(--bs-body-font-family);letter-spacing:.07em;text-transform:uppercase;margin:0 0 2px;}
.xm4 .xm4-preferences label {display:block;min-width:0;font-size:.8125rem;font-weight:450;line-height:1.4;margin:0;}
.xm4 .xm4-preferences .btn,.xm4 .xm4-preferences p {grid-column:1 / -1;margin:0;}
/* Normalize the utility links emitted as colored Bootstrap 3 buttons. */
.xm4 .control_panel #tab1 .form_row .btn {color:var(--xm4-text);background:var(--xm4-bg);}
.xm4 .control_panel #tab1 .form_row .btn:hover {color:var(--xm4-accent);background:var(--xm4-tint);border-color:var(--xm4-accent);}
.xm4 .control_panel #tab1 .form_row .btn:active {background:var(--xm4-soft);}
.xm4 .control_panel #tab1 .form_row .btn-primary {color:#fff;background:#2563eb;border-color:#2563eb;}
.xm4 .control_panel #tab1 .form_row .btn-primary:hover {color:#fff;background:#1d4ed8;border-color:#1d4ed8;}
.xm4 .control_panel #tab1 .form_row .btn.disabled {opacity:.45;pointer-events:none;}
.xm4 .control_panel #tab1 .form_row .btn i {position:static;margin:0;color:inherit;font-size:13px;}
.xm4 .control_panel .form_row > a.pull-right {grid-column:3;justify-self:end;min-width:0;}
.xm4 .control_panel #PageRenderTime {--xm4-perf-color:var(--xm4-muted);gap:7px;min-height:30px;padding:5px 8px;font-size:.6875rem;font-variant-numeric:tabular-nums;color:var(--xm4-muted);background:var(--xm4-bg);border-color:transparent;}
.xm4 .control_panel #PageRenderTime::before {content:"";width:6px;height:6px;flex:none;border-radius:50%;background:var(--xm4-perf-color);}
.xm4 .control_panel #PageRenderTime.btn-success {--xm4-perf-color:#24835c;}
.xm4 .control_panel #PageRenderTime.btn-warning {--xm4-perf-color:#a76b09;}
.xm4 .control_panel #PageRenderTime.btn-danger {--xm4-perf-color:#d14141;}
.xm4 .control_panel #PageRenderTime:empty {display:none;}
.xm4 .control_panel .profile .avatar::after {right:0;bottom:0;width:10px;height:10px;border:2px solid var(--xm4-bg);}
.xm4 .control_panel .profile .avatar.online::after {background:#24835c;}
.xm4 .control_panel .profile .avatar.offline::after {background:var(--xm4-muted);}
.xm4 .control_panel .profile .text-holder .position:last-child {font-size:.6875rem;color:var(--xm4-muted);}
.xm4 .control_panel .profile .mail:hover {color:var(--xm4-accent);}
.xm4 .control_panel .tabset a:focus-visible {outline:2px solid var(--xm4-accent);outline-offset:-3px;border-radius:4px;}
.xm4 .control_panel .tabset a .badge {min-width:19px;padding:2px 5px;border-radius:6px;background:var(--xm4-soft)!important;color:var(--xm4-muted);font-size:10px;}
.xm4 .xm4-preferences .form-select {min-width:0;min-height:40px;padding:8px 30px 8px 10px;font-size:.8125rem;color:var(--xm4-text);background-color:var(--xm4-bg);border:1px solid var(--xm4-line);border-radius:7px;box-shadow:none;}
.xm4 .xm4-preferences .form-select:focus {border-color:var(--xm4-accent);outline:2px solid var(--xm4-tint);}
@container xm4-panel (max-width:380px) {
  .xm4 .control_panel .xm4-panel-content {padding:16px;}
  .xm4 .xm4-preferences {grid-template-columns:1fr;gap:8px;padding:14px;}
  .xm4 .xm4-preferences label {margin-top:4px;}
  .xm4 .xm4-preferences .form-select {font-size:16px;}
  .xm4 .control_panel .form_row > #PageRenderTime {grid-column:2 / -1;justify-self:start;}
  .xm4 .control_panel .form_row .btn {min-height:44px;min-width:44px;}
}
@media(max-width:767.98px) {
  .xm4 .xm4-preferences .form-select {font-size:16px;min-height:44px;}
  .xm4 .control_panel #tab1 .form_row .btn {min-height:44px;min-width:44px;}
  .xm4 .control_panel .passKeyBlock .pull-right > a {width:44px;height:44px;}
  .xm4 .control_panel .xm4-panel-heading .btn-close {width:44px;height:44px;margin:-4px;}
}
.xm4.unobstructed .page-head,.xm4.unobstructed .navbar_category,.xm4.unobstructed #PageInstructionsBox,.xm4.unobstructed .moduleBar {display:none;}

/* Bootstrap 3 vocabulary used by XM modules. Keep this bridge scoped to xm-4. */
.xm4 .panel,.xm4 .well {background:var(--xm4-surface); color:var(--xm4-text); border:1px solid var(--xm4-line); border-radius:12px; margin-bottom:20px; box-shadow:none;}
.xm4 .panel-heading {padding:14px 18px; border-bottom:1px solid var(--xm4-line); background:var(--xm4-surface); border-radius:12px 12px 0 0; color:var(--xm4-text);}
.xm4 .panel-title {font-size:1rem; margin:0; color:inherit;}
.xm4 .panel-body,.xm4 .well {padding:18px;}
.xm4 .panel-footer {padding:12px 18px; background:var(--xm4-soft); border-top:1px solid var(--xm4-line);}
.xm4 .btn-default {--bs-btn-color:var(--xm4-text); --bs-btn-bg:var(--xm4-surface); --bs-btn-border-color:var(--xm4-line); --bs-btn-hover-bg:var(--xm4-soft); --bs-btn-hover-border-color:var(--xm4-muted); --bs-btn-hover-color:var(--xm4-text);}
.xm4 .btn {border-radius:8px; font-size:.875rem; font-weight:550;}
.xm4 .btn-xs,.xm4 .btn-mini {padding:3px 7px; font-size:.75rem;}
.xm4 .btn-primary {--bs-btn-bg:#2563eb; --bs-btn-border-color:#2563eb;}
.xm4 .pull-right {float:right!important;}.xm4 .pull-left {float:left!important;}
.xm4 .hidden {display:none!important;}.xm4 .center-block {display:block;margin-inline:auto;}
.xm4 .sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.xm4 .label {display:inline-block; padding:3px 7px; border-radius:5px; font-size:.75rem; line-height:1.4; background:var(--xm4-soft); color:var(--xm4-text);}
.xm4 .label-danger {background:#b42318;color:#fff;}.xm4 .label-success {background:#087443;color:#fff;}.xm4 .label-warning {background:#ffe8a3;color:#644600;}.xm4 .label-primary {background:#2563eb;color:#fff;}
/* Portal grid (lib/tag/xm/inc/dataexplorer, pqGrid). xm-4 rows are shorter than the xm-3 rows the grid's own styles were tuned
   for, so row numbers, labels and the header menu icon are re-centred on the cell text. "Special markup" columns (NoColFilter)
   get room for their info icon, drawn as a circled i: a bare fa-info sat on the title and read like a text cursor. */
.xm4 .pq-body-outer .pq-grid-number-cell {display:flex; align-items:center; justify-content:center; padding-top:0; padding-bottom:0;}
.xm4 .pq-grid-cell .label {padding:1px 7px; line-height:1.35; vertical-align:top;}
.xm4 .pq-grid-title-row .pq-grid-col .pq-icon-menu {top:50%; margin-top:-7.5px;}
.xm4 .pq-grid-title-row .pq-grid-col.NoColFilter > .pq-td-div {padding-right:24px;}
.xm4 .pq-grid-title-row .pq-grid-col.NoColFilter > i.fa-info {top:50%!important; right:6px!important; margin-top:-9.5px; width:15px; height:15px; border:1px solid currentColor; border-radius:50%; font-size:8px; line-height:13px; text-align:center; color:rgba(255,255,255,.8)!important;}
.xm4 .help-block {display:block;margin:6px 0;color:var(--xm4-muted);font-size:.875rem;}
.xm4 .input-group-addon {display:flex;align-items:center;padding:8px 12px;border:1px solid var(--xm4-line);background:var(--xm4-soft);color:var(--xm4-muted);}
.xm4 .input-group-btn {display:flex;}.xm4 .input-group-btn .btn {height:100%;}
.xm4 .fade.in {opacity:1;}.xm4 .collapse.in {display:block;}.xm4 .open > .dropdown-menu {display:block;}
/* Bootstrap 5 styles the dropdown container but expects .dropdown-item children; modules still emit Bootstrap 3's
   `ul.dropdown-menu > li > a`, which therefore got the 1rem container with no item styling at all - every label wrapped
   onto two or three lines inside the 160px menu (seen on the Flex Design page). Give the container the theme's tokens
   and the legacy items the sizing Bootstrap 3 gave them. */
.xm4 .dropdown-menu {--bs-dropdown-font-size:.875rem; --bs-dropdown-color:var(--xm4-text); --bs-dropdown-bg:var(--xm4-surface); --bs-dropdown-border-color:var(--xm4-line); --bs-dropdown-border-radius:12px; --bs-dropdown-link-color:var(--xm4-text); --bs-dropdown-link-hover-color:var(--xm4-text); --bs-dropdown-link-hover-bg:var(--xm4-soft); --bs-dropdown-link-active-color:var(--xm4-accent); --bs-dropdown-link-active-bg:var(--xm4-tint); --bs-dropdown-header-color:var(--xm4-muted); --bs-dropdown-divider-bg:var(--xm4-line); box-shadow:var(--xm4-shadow-lg);}
.xm4 .dropdown-menu > li > a {display:block;padding:8px 16px;color:var(--xm4-text);white-space:nowrap;}.xm4 .dropdown-menu > li > a:hover {background:var(--xm4-soft);}
.xm4 .dropdown-menu > li > a > i, .xm4 .dropdown-item > i {width:18px; margin-right:6px; text-align:center; color:var(--xm4-muted);}
.xm4 .dropdown-menu .divider {height:1px; margin:6px 0; overflow:hidden; background:var(--xm4-line);}
.xm4 .dropdown-menu .dropdown-header {padding:6px 16px; font:700 .6875rem/1.4 var(--bs-body-font-family); letter-spacing:.08em; text-transform:uppercase; color:var(--xm4-muted);}
.xm4 .close {border:0;background:none;font-size:1.5rem;color:var(--xm4-text);margin-left:auto;}
.xm4 .table {--bs-table-color:var(--xm4-text);--bs-table-bg:var(--xm4-surface);--bs-table-border-color:var(--xm4-line);font-size:.875rem;}
.xm4 .table > :not(caption) > * > * {padding:12px;}
.xm4 .controlBar,.xm4 .moduleBar {background:var(--xm4-surface);color:var(--xm4-text);border-color:var(--xm4-line);}
.xm4 .col-xs-1{width:8.333333%}.xm4 .col-xs-2{width:16.666667%}.xm4 .col-xs-3{width:25.000000%}.xm4 .col-xs-4{width:33.333333%}.xm4 .col-xs-5{width:41.666667%}.xm4 .col-xs-6{width:50.000000%}.xm4 .col-xs-7{width:58.333333%}.xm4 .col-xs-8{width:66.666667%}.xm4 .col-xs-9{width:75.000000%}.xm4 .col-xs-10{width:83.333333%}.xm4 .col-xs-11{width:91.666667%}.xm4 .col-xs-12{width:100.000000%}

/* ===================== Responsive ===================== */
@media(min-width:1100px) {
  .xm4 #nav .xm4-drawer-close {display:none;}
  html.xm4-rail-collapsed .xm4 #nav .slider {padding:12px 12px 16px;}
  html.xm4-rail-collapsed .xm4 #nav .xm4-drawer-heading,
  html.xm4-rail-collapsed .xm4 #nav .xm-nav-search,
  html.xm4-rail-collapsed .xm4 #nav .xm-nav-noresults,
  html.xm4-rail-collapsed .xm4 #nav .xm4-app-group > .opener {display:none;}
  html.xm4-rail-collapsed .xm4 #nav .xm4-rail-search {display:flex; justify-content:center; min-height:44px; margin-bottom:8px; padding:0; background:var(--xm4-soft);}
  html.xm4-rail-collapsed .xm4 #nav .main_nav .xm4-app-group > .slide {display:block!important;}
  html.xm4-rail-collapsed .xm4 #nav .main_nav > .xm4-app-group {margin-top:10px; padding-top:10px; border-top:1px solid var(--xm4-line);}
  html.xm4-rail-collapsed .xm4 #nav .main_nav > .xm4-app-group:first-child {margin-top:0; padding-top:0; border-top:0;}
  html.xm4-rail-collapsed .xm4 #nav .main_nav .slide .slide {padding-left:0;}
  html.xm4-rail-collapsed .xm4 #nav .main_nav li > a,
  html.xm4-rail-collapsed .xm4 #nav .main_nav li > button {justify-content:center; gap:0; min-height:44px; margin:3px 0; padding:10px 0; border-radius:11px; font-size:0;}
  html.xm4-rail-collapsed .xm4 #nav .main_nav a > i {width:24px; font-size:18px;}
  html.xm4-rail-collapsed .xm4 #nav .main_nav a > img,
  html.xm4-rail-collapsed .xm4 #nav .main_nav a > svg {width:24px; height:24px;}
  html.xm4-rail-collapsed .xm4 #nav .main_nav .opener::after {position:absolute; right:2px; bottom:4px; font-size:8px;}
  html.xm4-rail-collapsed .xm4 #nav .main_nav li > a[data-xm4-flyout]::after {display:none;}
  html.xm4-rail-collapsed .xm4 #nav .xm4-nav-label,
  html.xm4-rail-collapsed .xm4 #nav .xm4-rail-collapse span {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;}
  html.xm4-rail-collapsed .xm4 #nav .xm4-rail-collapse {justify-content:center; min-height:44px; padding:0;}
  html.xm4-rail-collapsed .xm4 #nav .xm4-rail-collapse i {transform:rotate(180deg);}
}
@media(max-width:1099.98px) {
  .xm4 #wrapper {grid-template-columns:minmax(0,1fr);}
  .xm4 #header {grid-column:1;}
  .xm4 .footer_bottom {grid-column:1;}
  .xm4.xm4-has-nav {--xm4-rail-col:0px;} /* the drawer is off-canvas: fixed bars in the page column start at the viewport edge */
  /* Off-canvas drawer; the collapsed preference only applies to the desktop rail. */
  .xm4 #nav {grid-area:auto; position:fixed; inset:0 auto 0 0; top:0; width:min(340px,calc(100% - 36px)); height:100dvh; padding-top:env(safe-area-inset-top); border-right:1px solid var(--xm4-line); box-shadow:var(--xm4-shadow-lg); transform:translateX(-105%); visibility:hidden; z-index:1045; transition:transform .2s ease,visibility .2s;}
  .xm4.nav-active #nav {transform:translateX(0); visibility:visible;}
  .xm4 .xm4-drawer-heading {min-height:44px; padding-top:10px;}
  .xm4 .xm4-drawer-close {display:inline-flex; align-items:center; justify-content:center;}
  .xm4 .xm4-rail-footer, .xm4 .xm4-rail-tooltip {display:none;}
  .xm4 #header .profile-opener .name {max-width:120px;}
  .xm4 #header .site-search {max-width:420px;}
  :root {--xm4-gutter:20px;}
}
@media(max-width:767.98px) {
  :root {--xm4-bottom:calc(64px + env(safe-area-inset-bottom)); --xm4-header:56px; --xm4-page-head:48px; --xm4-gutter:14px;}
  .xm4 #header {grid-template-columns:auto minmax(0,1fr) auto; gap:8px; padding-inline:10px;}
  .xm4 #header .left-holder, .xm4 #header .right-holder {gap:6px;}
  .xm4 #header #logo {max-width:150px;}
  .xm4 #header #logo img {max-width:140px!important; max-height:28px!important;}
  .xm4 #header #logo img[src*=".svg"] {height:28px!important;}
  .xm4 #header .profile-opener .name, .xm4 #header .profile-opener .xm4-profile-caret, .xm4 #header .welcome_nav {display:none;}
  .xm4 #header .profile-opener {min-width:38px; padding:3px;}
  .xm4 #header .nav-opener {display:none;}
  .xm4 #header .xm4-header-center {justify-content:flex-end; padding:0;}
  .xm4 #header .site-search {width:auto; max-width:none;}
  .xm4 #header .site-search .xm4-search-toggle {display:inline-flex;}
  .xm4 #header .site-search .input_holder {display:none!important; position:fixed; left:10px; right:10px; top:calc(var(--xm4-header) + 8px); width:auto; z-index:1031; background:var(--xm4-surface); box-shadow:var(--xm4-shadow-lg);}
  .xm4 #header .site-search .input_holder.xm4-search-open {display:flex!important;}
  .xm4 #header .site-search kbd {display:none;}
  .xm4 .page-head {gap:8px; min-height:var(--xm4-page-head);}
  .xm4 .page-head h1 {font-size:1rem;}
  .xm4 .page-head .breadcrumbs {display:none;}
  .xm4 .xm-btn span {display:none;}
  .xm4 .xm-btn {padding:0 10px; gap:5px;}
  .xm4 .xm-btn:not(:has(i))::before {font-size:13px;}
  .xm4 .xm-drop-box .xm-drop {left:auto; right:0;}
  .xm4 #main {padding-top:14px; padding-bottom:20px;}
  .xm4 .xm4-bottom-nav {position:fixed; inset:auto 0 0; display:flex; align-items:stretch; justify-content:space-around; height:var(--xm4-bottom); padding:5px 8px calc(5px + env(safe-area-inset-bottom)); border-top:1px solid var(--xm4-line); background:var(--xm4-surface); z-index:1030;}
  .xm4 .xm4-bottom-nav button,.xm4 .xm4-bottom-nav a {display:flex; flex:1; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-width:44px; border:0; border-radius:10px; background:transparent; color:var(--xm4-muted); font-size:.6875rem; line-height:1.2; text-decoration:none;}
  .xm4 .xm4-bottom-nav i {font-size:18px;}
  .xm4 .xm4-bottom-nav [aria-expanded="true"] {background:var(--xm4-tint); color:var(--xm4-accent);}
  .xm4 input:not([type=checkbox]):not([type=radio]),.xm4 select,.xm4 textarea {font-size:16px;}
  .xm4 .controlBar,.xm4 .moduleBar {max-width:100%; overflow-x:auto;}
  .xm4 .hidden-xs {display:none!important;}
  .xm4 #footer {margin-bottom:0;}
}
/* ===================== jQuery contextMenu (Flex Design toolbar, dataexplorer grid) ===================== */
/* 2.9.2 sets font-family/font-size to inherit and then sizes the whole menu in em: min-width:13em,
   padding:.2em 2em. At the xm-4 body size that leaves a panel barely wider than its own padding, so
   every label wrapped to one word per line. It also puts the caller's Font Awesome classes on the
   <li> itself (`context-menu-icon--fa fa fa-toggle-on`), so FA's font-weight:900 and icon font were
   inherited by the label text. Size in px, and give the label back a text font. dark.css recolors. */
.xm4 .context-menu-list {min-width:210px; max-width:360px; padding:6px; margin:4px 0 0; border:1px solid var(--xm4-line); border-radius:12px; background:var(--xm4-surface); box-shadow:var(--xm4-shadow); color:var(--xm4-text); font:400 .8125rem/1.4 var(--bs-body-font-family);}
/* The library writes z-index:1 inline, which loses to anything the page stacks above it -- the
   Design view's sticky field library sits at 10, and painted straight over the open menu. Sit
   above the backdrop and drawer (1040/1045) but below status toasts (1080). */
.xm4 .context-menu-list.context-menu-root {z-index:1060!important;}
.xm4 .context-menu-item {box-sizing:border-box; padding:7px 12px 7px 36px; border-radius:8px; background:transparent; color:var(--xm4-text); white-space:nowrap;}
/* The <li> is a menu row, but it carries the caller's icon classes. Font Awesome 7 styles `.fa`
   as an icon BOX -- width:var(--fa-width,1.25em), text-align:center, font-weight:900 -- where 6
   only set the font, so the row collapsed to its own padding and the label had nowhere to go. */
.xm4 .context-menu-item.context-menu-icon--fa {width:auto; text-align:left; font-weight:400; line-height:inherit;}
.xm4 .context-menu-item > span {display:block; font:400 .8125rem/1.4 var(--bs-body-font-family); color:inherit;}
.xm4 .context-menu-item.context-menu-hover {background:var(--xm4-tint); color:var(--xm4-accent);}
.xm4 .context-menu-item.context-menu-disabled {color:var(--xm4-faint); background:transparent;}
.xm4 .context-menu-item.context-menu-icon::before {left:10px; width:20px; font-size:14px; line-height:inherit; color:var(--xm4-muted);}
/* When the caller passes Font Awesome classes, contextMenu puts them on the <li> and forces its own
   icon font onto ::before, so the codepoint renders as tofu. Worse, the class it writes is the bare
   `fa`, which was a solid alias in Font Awesome 6 but in 7 only sets --fa: the content is never
   emitted, so the item shows an empty box. Name the family and emit --fa here. Harmless on 6, where
   the same value is already in play. */
.xm4 .context-menu-item.context-menu-icon--fa::before {content:var(--fa,""); font-family:"Font Awesome 6 Pro","Font Awesome 6 Free"; font-weight:900;}
.xm4 .context-menu-item.context-menu-hover.context-menu-icon::before {color:var(--xm4-accent);}
.xm4 .context-menu-item.fa-toggle-on::before {color:var(--xm4-success);}
.xm4 .context-menu-separator {margin:5px 4px; border-bottom:1px solid var(--xm4-line);}
.xm4 .context-menu-submenu::after {border-left-color:var(--xm4-muted);}

/* ===================== Data explorer toolbar, quick filters and row actions (lib/tag/xm/inc/dataexplorer) ===================== */
/* _grid.cfm's own styles are the xm-3 ones: a grey #f6f6f6 bar of square white tiles, a grey band of filters and a white
   caret, several of them literal colours that stay light in dark mode. In xm-4: one rounded surface for the menu, the
   quick icons (ghost buttons), the search and the record count (a soft pill); the filters sit on the page and the eraser
   is an icon button. Tokens only, so dark mode follows; !important only where the markup carries inline styles. */
.xm4 .inner-header {align-items:stretch; column-gap:10px;}
.xm4 .search-filter-bar {align-items:center; min-height:48px; padding:0 5px; background:var(--xm4-surface); border:1px solid var(--xm4-line); border-radius:var(--xm4-radius-sm); box-shadow:0 1px 2px rgba(15,23,42,.04); transition:border-color .15s, box-shadow .15s;}
.xm4 .search-filter-bar:focus-within {border-color:var(--xm4-accent); box-shadow:0 0 0 3px var(--xm4-tint);}
.xm4 .head-filter {display:flex; align-items:center;}
.xm4 button.filter-button, .xm4 .head-buttons {display:inline-flex; flex-direction:column; align-items:center; justify-content:center; width:38px; height:38px; margin:0 1px; padding:0; border:0; border-radius:8px; background:transparent; color:var(--xm4-muted); cursor:pointer;}
.xm4 button.filter-button span {display:block; width:16px; height:2px; margin:1.5px 0; border-radius:2px; background-color:currentColor;}
.xm4 button.filter-button:hover, .xm4 .head-buttons:hover {background:var(--xm4-soft); color:var(--xm4-text);}
.xm4 .head-buttons > span {display:inline-flex; align-items:center; justify-content:center; width:100%; height:100%;}
.xm4 .head-buttons i {font-size:15px; color:inherit;}
.xm4 .head-search {align-self:stretch; display:flex; align-items:center; margin-left:5px; padding-left:5px; border-left:1px solid var(--xm4-line);}
.xm4 .head-search > .search-field {flex:1;}
.xm4 div.search-field {height:46px; padding:0 6px 0 8px; background:transparent; border:0; color:var(--xm4-muted);}
.xm4 .search-field .fa-magnifying-glass {font-size:16px; margin-right:8px; color:var(--xm4-faint);}
.xm4 .search-field input {font-size:.95rem; color:var(--xm4-text);}
.xm4 .search-field input::placeholder {color:var(--xm4-faint);}
.xm4 .search-field .filter-box-opener {padding:8px; border-radius:8px; color:var(--xm4-muted); cursor:pointer;}
.xm4 .search-field .filter-box-opener:hover {background:var(--xm4-soft); color:var(--xm4-accent);}
.xm4 #TotalRecords.filter-box {display:inline-flex; align-items:center; justify-content:center; align-self:center; min-width:44px; height:34px; margin:0 2px 0 4px; padding:0 12px; background:var(--xm4-soft); border:0; border-radius:8px; color:var(--xm4-ink-2); font-size:.875rem; font-weight:650; font-variant-numeric:tabular-nums;}
.xm4 .inner-header .gtBtn {border-radius:var(--xm4-radius-sm); padding:0 18px; font-weight:600; box-shadow:0 1px 2px rgba(15,23,42,.08);}
.xm4 .filter-dropdown, .xm4 .search-dropdown {background:var(--xm4-surface); border-color:var(--xm4-line); color:var(--xm4-text); border-radius:var(--xm4-radius-sm); box-shadow:var(--xm4-shadow-lg);}
/* The advanced-search panel is absolutely positioned with no top. Inside the flex .head-search (align-items:center) its static
   position is CENTRED on the search bar, so a tall panel rose behind the sticky module menu, and its sticky "Search Filters"
   header (forms.css) then parked over the Quick Filter row: Archived etc. could not be reached. Open it below the bar, and keep
   the header static there; the panel's body scrolls on its own (_grid.cfm sets its max-height). */
.xm4 .head-search > .search-dropdown {top:calc(100% + 6px); --xm4-form-header-position:static;}
.xm4 .filter-dropdown select {height:34px; padding:4px 8px; background-color:var(--xm4-surface); color:var(--xm4-text); border:1px solid var(--xm4-line); border-radius:8px;}
/* the panel's saved-view and switch-action pickers are select2 with the bootstrap theme (a white #ccc box; forms.css only
   covers the default theme and selects carrying .form-control); its open list is appended to body, so those rules are global */
.xm4 .filter-dropdown .select2-container--bootstrap .select2-selection {height:34px; background-color:var(--xm4-surface); border-color:var(--xm4-line); border-radius:8px; color:var(--xm4-text); box-shadow:none;}
.xm4 .filter-dropdown .select2-container--bootstrap .select2-selection__rendered {color:var(--xm4-text);}
.xm4 .filter-dropdown .select2-container--bootstrap .select2-selection__placeholder {color:var(--xm4-faint);}
.xm4 .filter-dropdown .select2-container--bootstrap .select2-selection--single .select2-selection__arrow b {border-top-color:var(--xm4-muted);}
.xm4 .filter-dropdown .select2-container--bootstrap.select2-container--focus .select2-selection, .xm4 .filter-dropdown .select2-container--bootstrap.select2-container--open .select2-selection {border-color:var(--xm4-accent); box-shadow:0 0 0 3px var(--xm4-tint);}
.xm4 .select2-container--bootstrap .select2-results__option[aria-selected=true] {background-color:var(--xm4-soft); color:var(--xm4-text);}
.xm4 .select2-container--bootstrap .select2-results__option--highlighted[aria-selected] {background-color:var(--xm4-accent); color:#fff;}
.xm4 .select2-container--bootstrap .select2-search--dropdown .select2-search__field {background-color:var(--xm4-surface); border-color:var(--xm4-line); color:var(--xm4-text);}
/* quick filters: on the page, not in a band (the strip's background and padding are inline) */
.xm4 .search-bar {align-items:center; gap:8px; margin:10px 0 8px; padding:0!important; background:transparent!important;}
.xm4 .search-bar > div {flex:0 1 220px;}
.xm4 .search-bar .searchBarFilterEraser {display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:42px; height:42px; border:1px solid var(--xm4-line); border-radius:var(--xm4-radius-sm); background:var(--xm4-surface); color:var(--xm4-muted);}
.xm4 .search-bar .searchBarFilterEraser:hover {background:var(--xm4-soft); color:var(--xm4-danger);}
/* row actions: View + its menu as one outlined split button (main.js renders both with inline font and colours) */
.xm4 .xm-grid-actions .btn-group {border-radius:7px;}
.xm4 .xm-grid-actions .btn-grid-view, .xm4 .xm-grid-actions .btn-grid-view:hover, .xm4 .xm-grid-actions .btn-grid-view:focus {height:22px; padding:0 9px; font-size:11.5px!important; font-weight:600!important; line-height:20px; background:var(--xm4-surface); border:1px solid var(--xm4-line); border-radius:7px; color:var(--xm4-accent)!important; box-shadow:none;}
.xm4 .xm-grid-actions .btn-grid-view:hover {background:var(--xm4-tint); border-color:color-mix(in srgb, var(--xm4-accent) 40%, var(--xm4-line));}
.xm4 .xm-grid-actions .btn-group > .btn-grid-view:not(:last-child) {border-top-right-radius:0; border-bottom-right-radius:0;}
.xm4 .xm-grid-actions .btn-grid-more {display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; padding:0; background:var(--xm4-surface)!important; border:1px solid var(--xm4-line); border-left:0; border-radius:0 7px 7px 0; color:var(--xm4-muted); box-shadow:none;}
.xm4 .xm-grid-actions .btn-grid-more:hover, .xm4 .xm-grid-actions .btn-grid-more:focus {background:var(--xm4-soft)!important; color:var(--xm4-text);}
.xm4 .xm-grid-actions .btnIcon.fal {color:var(--xm4-faint);}
.xm4 .xm-grid-actions .btnIcon.fal:hover {color:var(--xm4-accent);}
/* ===================== AI Data Explorer composer (lib/com/ai/explorer) ===================== */
/* The docked/floating composer is position:fixed and full-width. In the shell it starts at the page column, so it never
   covers the rail (or its Collapse button), follows the rail width, clears the phone bottom bar, and stays below the
   control panel drawer (1045), its backdrop (1040) and Bootstrap modals (1055). */
.xm4 .xpr-wrap--composer-docked .xpr-composer, .xm4 .xpr-wrap--composer-floating .xpr-composer {z-index:1029;}
.xm4.xm4-has-nav .xpr-wrap--composer-docked .xpr-composer {left:var(--xm4-rail-col,0px); right:0; width:auto; bottom:var(--xm4-bottom);}
html.xm4-ready .xm4.xm4-has-nav .xpr-wrap--composer-docked .xpr-composer {transition:left .2s ease;}
.xm4.xm4-has-nav .xpr-wrap--composer-floating .xpr-composer {left:calc(var(--xm4-rail-col,0px) + (100vw - var(--xm4-rail-col,0px)) / 2); width:min(calc(100vw - var(--xm4-rail-col,0px) - 24px),960px); bottom:calc(var(--xm4-bottom) + 16px + env(safe-area-inset-bottom,0px));}
.xm4:has(.xpr-wrap--composer-docked), .xm4:has(.xpr-wrap--composer-floating) {padding-bottom:calc(var(--xm4-bottom) + var(--xpr-dock-offset,110px));}
/* Signed-out auth pages (request.app.xm4.auth_page): the LoginPage block is the whole body. */
.xm4.xm4-auth #main {padding:0; max-width:none;}
.xm4.xm4-auth #wrapper {min-height:100dvh;}
/* The sign-in card (lib/inc/_sign_in_xm.cfm, its xm-3 branch) brings its own light styles: a #fff box with grey top and
   bottom rules, #383838 Register text, #565656 passkey status. Under dark mode the theme's light text landed on that white
   box (title, Remember Me, Having trouble? all but invisible) and the Register text went dark-on-dark. Tokens, so both modes follow. */
.xm4 .sing-box {background:var(--xm4-surface); border:1px solid var(--xm4-line); border-radius:var(--xm4-radius); box-shadow:var(--xm4-shadow); color:var(--xm4-text);}
.xm4 .sing-box h1.title {color:var(--xm4-text); font-weight:600;}
.xm4 .sing-box label[for="remember_me"], .xm4 .sing-box .support-btn, .xm4 .xm-passkey-status {color:var(--xm4-muted);}
.xm4 .xm-passkey-status .xm-passkey-cancel {color:var(--xm4-accent);}
.xm4 a.signup-btn {background:var(--xm4-surface); border:1px solid var(--xm4-line); color:var(--xm4-text); box-shadow:none;}
.xm4 a.signup-btn:hover, .xm4 a.signup-btn:focus-visible {background:var(--xm4-soft); border-color:var(--xm4-accent); color:var(--xm4-accent);}
/* Embedded / fullscreen pages: no shell chrome, single column, stickies start at 0. */
.xm4.fullscreen, .xm4.xm4-chromeless {--xm4-header:0px; --xm4-page-head:0px; --xm4-bottom:0px; --xm4-rail-col:0px; padding:0; background:var(--xm4-bg)!important;}
.xm4.fullscreen #wrapper, .xm4.xm4-chromeless #wrapper {grid-template-columns:minmax(0,1fr); min-height:0;}
.xm4.fullscreen .footer_bottom, .xm4.xm4-chromeless .footer_bottom {grid-column:1;}
.xm4.fullscreen #main, .xm4.xm4-chromeless #main {margin:0!important;}
.xm4.fullscreen #header, .xm4.fullscreen #nav, .xm4.xm4-chromeless #nav, .xm4.fullscreen .xm4-bottom-nav, .xm4.xm4-chromeless .xm4-bottom-nav {display:none;}
@media(prefers-reduced-motion:reduce) {.xm4 *, .xm4 *::before, .xm4 *::after {scroll-behavior:auto!important; transition:none!important; animation:none!important;}}
@media print {
  .xm4 {padding:0; background:white; color:black;}
  .xm4 #wrapper {display:block;}
  .xm4 #header,.xm4 #nav,.xm4 .control_panel_slider,.xm4 .xm4-bottom-nav,.xm4 .xm4-module-nav,.xm4 .xm4-module-trigger,.xm4 .xm4-status,.xm4 .xm4-backdrop,.xm4 .xm-drop-box,.xm4 .page-head .breadcrumbs {display:none!important;}
  .xm4 .page-head {position:static; border:0; background:none;}
  .xm4 #main {margin:0!important; padding:0;}
}