/* Refresh the existing xm:controlbar and xm:modulebar markup. Keep its IDs, links,
   menus and update APIs intact; these rules apply only within the xm-4 shell. */
.xm4 .controlBar.row, .xm4 .moduleBar.row {--bs-gutter-x:0; margin:0 0 16px; padding:0; border:0; background:transparent; overflow:visible; min-width:0;}
.xm4 .controlBar > .col-xs-12, .xm4 .moduleBar > .col-xs-12 {width:100%; padding:0; min-width:0; float:none;}
/* JH/Claude 11/03/2026: tighter record title bar (was 18px above and below, 14px between the title and the buttons, a 22px title);
   with the title on its own row the bar grew taller, Jennifer asked for a smaller title and less vertical padding. */
.xm4 .controlBar > .col-xs-12 > .reports-block {display:flex; flex-wrap:wrap; align-items:center; gap:8px 24px; margin:0; padding:12px 20px; border:1px solid var(--xm4-line); border-radius:16px; background:var(--xm4-surface); box-shadow:0 1px 2px rgb(15 23 42 / 3%);}
.xm4 .controlBar.xmStickyTop {z-index:1010; border-radius:16px;}
/* JH/Claude 11/5/2026: open actions taller than the screen scroll with the page (record-bars.js fit), ticket 569568 */
.xm4 .controlBar.xmStickyTop.xm4-actions-unstuck {position:relative; top:auto!important;}
/* A bar with neither a title nor actions (the grid emits one and fills it later through addControlBarItem) renders nothing
   until it has content; :has() is live, so items added at runtime bring it back. */
.xm4 .controlBar.row:not(:has(.frame_container)):not(:has(.OGTitle:not(:empty))) {display:none; margin:0;} /* :has() cannot nest, so both conditions sit on the bar */
/* JH/Claude 11/03/2026: the record title takes its own full row above the buttons; beside them a long title wrapped into a tall
   narrow column and stretched the whole bar (NPF ticket 568963 review). Narrow screens already did this. */
.xm4 .controlBar .reports-block > .head {flex:1 1 100%; min-width:0; padding:0; margin:0; border:0; background:transparent;}
.xm4 .controlBar .head .OGTitle {margin:0; padding:0; color:var(--xm4-text); font:650 1.25rem/1.3 var(--bs-body-font-family); letter-spacing:-.025em; text-transform:none; overflow-wrap:anywhere;}
.xm4 .controlBar .head .cbSubTitle {display:block; margin:5px 0 0; font:400 .8125rem/1.45 var(--bs-body-font-family); color:var(--xm4-muted);}
.xm4 .controlBar .head:has(.xm-avatars) {padding-right:100px;}
.xm4 .controlBar .reports-block > .frame_container {flex:0 1 auto; min-width:0; padding:0; margin:0; border:0; background:transparent; white-space:normal;}
.xm4 .controlBar .reports-block > .frame_container > ul {position:static; display:flex; flex-flow:row wrap; align-items:center; gap:6px; padding:0; margin:0; overflow:visible; list-style:none; font:500 .8125rem/1.4 var(--bs-body-font-family);}
.xm4 .controlBar .reports-block > .frame_container > ul > li {flex:none; display:block; padding:0; margin:0; border:0!important; background:transparent;}
.xm4 .controlBar .reports-block > .frame_container > ul > li::after {display:none;}
.xm4 .controlBar .reports-block > .frame_container > ul > li > a {display:inline-flex; align-items:center; justify-content:center; min-height:36px; padding:8px 11px; border:1px solid transparent; border-radius:9px; color:var(--xm4-ink-2); font:inherit; text-decoration:none; transition:background .15s,color .15s;}
.xm4 .controlBar .reports-block > .frame_container > ul > li > a > span {display:inline-flex; align-items:center; gap:7px;}
.xm4 .controlBar .reports-block > .frame_container > ul > li > a i {color:var(--xm4-muted); font-size:.875rem;}
.xm4 .controlBar .reports-block > .frame_container > ul > li > a:hover {background:var(--xm4-soft); color:var(--xm4-accent);}
.xm4 .controlBar .reports-block > .frame_container > ul > li > a:hover i {color:inherit;}
.xm4 .controlBar .reports-block > .frame_container > ul > li.xm4-action-primary > a {background:var(--xm4-accent); color:#fff; border-color:var(--xm4-accent);}
.xm4 .controlBar .reports-block > .frame_container > ul > li.xm4-action-primary > a i {color:inherit;}
.xm4 .controlBar .reports-block > .frame_container > ul > li.xm4-action-primary > a:hover {background:var(--xm4-accent-dark);}
.xm4 .controlBar .reports-block > .frame_container > ul > li.cb-active-tab:not(.xm4-action-primary) > a {background:var(--xm4-tint); color:var(--xm4-accent);}
/* JH/Claude 10/30/2026: items that bring their own look style the li inline (xm:controlbaritem style=): a section's "New ..."
   button sets background:<section colour> and the record Submit button sets border:1px solid #5cb85c. The li rule above is square
   (the link inside has the 9px corners) and its border:0!important erased Submit's outline, so coloured buttons were square and
   Submit had no outline (team review 10/30). The li now takes the same corners, keeps an inline border in its own text colour,
   and its link uses that colour. */
.xm4 .controlBar .reports-block > .frame_container > ul > li:is([style*="background"], [style*="border:"]) {border-radius:9px;}
.xm4 .controlBar .reports-block > .frame_container > ul > li[style*="border:"] {border:1px solid currentColor!important;}
.xm4 .controlBar .reports-block > .frame_container > ul > li:is([style*="background"], [style*="border:"]):not(.xm4-action-primary) > a,
.xm4 .controlBar .reports-block > .frame_container > ul > li:is([style*="background"], [style*="border:"]):not(.xm4-action-primary) > a i {color:inherit;}
.xm4 .controlBar .reports-block > .frame_container > ul > li[style*="background"]:not(.xm4-action-primary) > a:hover {background:rgb(0 0 0 / 12%);}
.xm4 .controlBar .reports-block > .frame_container > ul > li[style*="border:"]:not(.xm4-action-primary) > a:hover {background:color-mix(in srgb, currentColor 10%, transparent);}
.xm4 .controlBar .reports-block > .frame_container > .mobileOnly {display:none!important;}
.xm4 .controlBar .reports-block > .controlBarFooter {flex:1 0 100%; padding-top:12px!important; border-top:1px solid var(--xm4-line)!important; border-bottom:0!important; background:transparent!important;}
.xm4 .xm4-actions-toggle {display:none; align-items:center; gap:7px; padding:8px 11px; border:1px solid var(--xm4-line); border-radius:9px; min-height:40px; background:var(--xm4-surface); color:var(--xm4-ink-2); font:500 .8125rem/1.4 var(--bs-body-font-family);}
.xm4 .xm4-actions-toggle:hover {background:var(--xm4-soft); color:var(--xm4-accent);}
/* MR/Claude 11/3/2026: the Workflow picker (select#selWFAction in a custom xm:controlbaritem: _toolbar.cfm, _detail.cfm,
   _modify_init.cfm, _toolbar_section.cfm) was a bare browser select beside the rounded buttons. It now matches them: a 36px
   rounded control with the workflow icon, its own arrow and a focus ring, in the amber "needs attention" tint the compact record
   header already gives it (lib/tag/xm/controlbar.cfm .rdh-compact). The list of choices is still the browser's own. */
.xm4 .controlBar .reports-block > .frame_container > ul > li:has(> #selWFAction) {position:relative; display:inline-flex; align-items:center; min-height:36px; padding:0; border:1px solid #f59e0b!important; border-radius:9px; background:#fffbeb; color:#92400e; transition:background .15s, box-shadow .15s;}
.xm4 .controlBar .reports-block > .frame_container > ul > li:has(> #selWFAction):hover {background:#fef3c7;}
.xm4 .controlBar .reports-block > .frame_container > ul > li:has(> #selWFAction):focus-within {box-shadow:0 0 0 3px rgb(245 158 11 / 28%);}
.xm4 .controlBar .reports-block > .frame_container > ul > li:has(> #selWFAction)::before,
.xm4 .controlBar .reports-block > .frame_container > ul > li:has(> #selWFAction)::after {position:absolute; top:50%; transform:translateY(-50%); pointer-events:none; color:inherit; font-family:"Font Awesome 7 Pro","Font Awesome 6 Pro"; font-weight:900; line-height:1;}
.xm4 .controlBar .reports-block > .frame_container > ul > li:has(> #selWFAction)::before {content:"\f4d7"; left:11px; font-size:.8rem;}
.xm4 .controlBar .reports-block > .frame_container > ul > li:has(> #selWFAction)::after {display:block; content:"\f078"; right:11px; font-size:.625rem; opacity:.8; width:auto; height:auto; margin:0; border:0; background:none;} /* the theme's 1px grey item separator is also an ::after */
.xm4 .controlBar .reports-block > .frame_container > ul > li > select#selWFAction {appearance:none; -webkit-appearance:none; height:34px; max-width:260px; margin:0; padding:0 30px 0 31px; border:0; border-radius:9px; outline:0; background:transparent; color:inherit; font:600 .8125rem/34px var(--bs-body-font-family); text-overflow:ellipsis; cursor:pointer;}
.xm4 .controlBar .reports-block > .frame_container > ul > li > select#selWFAction :is(option, optgroup) {background:var(--xm4-surface, #fff); color:var(--xm4-text, #1f2937); font-weight:400;}
[data-bs-theme="dark"] .xm4 .controlBar .reports-block > .frame_container > ul > li:has(> #selWFAction) {background:color-mix(in srgb, #f59e0b 14%, var(--xm4-surface)); color:#fcd34d;}
[data-bs-theme="dark"] .xm4 .controlBar .reports-block > .frame_container > ul > li:has(> #selWFAction):hover {background:color-mix(in srgb, #f59e0b 22%, var(--xm4-surface));}

/* Summary values retain their table cells so addModuleBarItem and direct field
   updates keep working. record-bars.js pairs each label with its value in the grid. */
.xm4 .moduleBar .reports-block {margin:0; border:1px solid var(--xm4-line); border-radius:16px; background:var(--xm4-surface); overflow:hidden;}
.xm4 .moduleBar .account_info {margin:0; width:100%; color:var(--xm4-text);}
.xm4 .moduleBar .account_info.xm4-summary-grid {display:grid; grid-template-columns:repeat(var(--xm4-fact-columns,4),minmax(0,1fr)); border:0; border-collapse:separate;}
.xm4 .moduleBar .xm4-summary-grid > :is(thead,tbody), .xm4 .moduleBar .xm4-summary-grid > :is(thead,tbody) > tr {display:contents;}
.xm4 .moduleBar .account_info :is(th,td) {min-width:0; margin:0; text-align:left; vertical-align:top; border:0; border-inline-start:1px solid var(--xm4-line); background:transparent; color:var(--xm4-text); overflow-wrap:anywhere;}
/* JH/Claude 10/30/2026: less vertical padding in the record summary strip (was 16px above the label, 5px between, 17px below the
   value: about 83px for one row of facts); Jennifer, team review 10/30. JH/Claude 11/03/2026: trimmed again from 10/3/10 to 7/2/7. */
.xm4 .moduleBar .account_info th {padding:7px 18px 2px; font:500 .75rem/1.4 var(--bs-body-font-family); color:var(--xm4-muted);}
.xm4 .moduleBar .account_info td {padding:0 18px 7px; font:550 .875rem/1.5 var(--bs-body-font-family);}
.xm4 .moduleBar .account_info th.xm4-fact-next-row {border-top:1px solid var(--xm4-line);}
.xm4 .moduleBar .account_info .xm4-fact-first {border-inline-start:0;}
.xm4 .moduleBar .account_info th a {text-decoration:none; color:inherit;}
.xm4 .moduleBar .account_info th:has(a):hover, .xm4 .moduleBar .account_info th[onclick]:hover {color:var(--xm4-accent); background:var(--xm4-soft);}
.xm4 .moduleBar .account_info th i {font-size:.7rem; margin-inline-end:4px;}
.xm4 .moduleBar .account_info td > span {display:block;}
.xm4 .moduleBar .account_info td > span > i.fa-circle {font-size:6px; margin-inline-end:6px; vertical-align:middle;}
.xm4 .moduleBar .account_info td :is(.label,.badge,.btn) {font-size:.75rem; line-height:1.25; padding:4px 8px; border-radius:6px; vertical-align:middle; box-shadow:none;}
.xm4 .moduleBar .account_info td :is(.label-success,.bg-success,.btn-success) {background:color-mix(in srgb,var(--xm4-success) 12%,var(--xm4-surface))!important; color:color-mix(in srgb,var(--xm4-success) 65%,var(--xm4-text))!important; border-color:transparent;}
.xm4 .moduleBar .account_info td :is(.label-default,.badge-default,.btn-default) {background:var(--xm4-soft); color:var(--xm4-muted);}
@media(max-width:767px) {
    /* JH/Claude 11/03/2026: same trim on small screens (bar 14px all round, label 12/4, value 13) */
    .xm4 .controlBar > .col-xs-12 > .reports-block {gap:8px; padding:10px 14px; border-radius:12px;}
    .xm4 .controlBar .reports-block > .head {flex-basis:100%;}
    .xm4 .controlBar .head .OGTitle {font-size:1.125rem;}
    .xm4 .controlBar .reports-block > .frame_container {flex:1 1 100%; display:flex; align-items:flex-start; gap:6px;}
    .xm4 .controlBar .reports-block > .frame_container > ul {flex:1; min-width:0; gap:4px;}
    .xm4 .controlBar .reports-block > .frame_container > ul > li > a {min-height:40px; padding:8px 9px;}
    .xm4 .controlBar .reports-block > .frame_container > ul.xm4-actions-collapsed.xm4-has-action-overflow > li.xm4-action-overflow {display:none;}
    .xm4 .controlBar .reports-block > .frame_container > .xm4-actions-toggle:not([hidden]) {display:inline-flex; flex:none;}
    .xm4 .moduleBar .account_info th {padding:8px 14px 2px;}
    .xm4 .moduleBar .account_info td {padding:0 14px 8px; font-size:.8125rem;}
}
@media print {
    .xm4 .controlBar {position:static!important;}
    .xm4 .controlBar .reports-block > .frame_container {display:none;}
}
@media(max-width:374px) {
    .xm4 .xm4-actions-toggle {width:40px; padding:0; justify-content:center;}
    .xm4 .xm4-actions-toggle > span {display:none;}
}

[data-bs-theme="dark"] .xm4 .controlBar .reports-block > .frame_container > ul > li.xm4-action-primary > a {color:var(--xm4-bg);}