/* Preserve the legacy XM component vocabulary below the new design system. */
/* xm4-first is declared before xm-legacy on purpose: an !important declaration in an EARLIER layer beats one in a later
   layer, and no unlayered rule can beat the legacy sheet's !important declarations. Only !important overrides belong in
   it: for normal declarations a later layer wins, so those stay unlayered below. */
@layer xm4-first, xm-legacy;
@import url('/lib/theme/xm-3/css/main.css') layer(xm-legacy);

/* The classic designer's property list (#XMSidePanel, e.g. the Field page's "Type To Filter" list) sits beside the form
   from 1400px. xm-3's main.css capped #main:has(#XMSidePanel) at 1604px !important from 1620px; xm-4 centres the page with
   padding inside #main, so that cap ate the content and the form got NARROWER as the window got wider (2026-10-09: a
   Field page on a wide screen showed a ~400px form). From 1400px the form and the list now share the row. */
@layer xm4-first {
    @media (min-width: 1400px) {
        .xm4 #main:has(#XMSidePanel) {max-width:none !important; display:flex !important; justify-content:flex-start !important;}
    }
}
@media (min-width: 1400px) {
    .xm4 #main:has(#XMSidePanel) {gap:16px;}
    .xm4 #main:has(#XMSidePanel) > #xmMainContainer {flex:1 1 auto; min-width:0;}
    .xm4 #main > #XMSidePanel {flex:0 0 clamp(240px, 22vw, 360px); min-width:0; max-width:360px;}
}

/* Code editors (ACE) number their lines in a gutter with z-index 4; without a stacking context of their own the gutter
   painted over the designer's sticky section headers (a "1" on top of "Advanced Settings"). */
.xm4 .ace_editor {isolation:isolate;}

/* MR/Claude 10/20/2026: xm-4 loads Bootstrap 5, which has no Glyphicons font, so every Bootstrap 3 `glyphicon` rendered as
   an empty 0x0 span that stayed clickable. Reported on the SAMIS contract Flow page: the xm:pod panel menu
   (lib/tag/xm/pod.cfm, glyphicon-menu-hamburger) that holds "Reset WF" was invisible. About 60 lib files and many site
   folders still write glyphicons (pqGrid's bootstrap mode too), so every Bootstrap 3.3 glyphicon is drawn here with its
   Font Awesome equivalent. Outline glyphs (unchecked, star-empty, time...) use the regular weight so they stay outlines.
   The grid skin (grid.css) styles its own sort/group glyphicons with stronger selectors and still wins there.
   font-family is !important because grid pages print `.glyphicon {font-family:'Glyphicons Halflings' !important}`
   (lib/tag/xm/grid.cfm, lib/pqgrid/_init_js_css.cfm, dataexplorer v28 main.css) and xm-4 has no such font: without it
   these icons became tofu boxes on every grid page. */
.xm4 .glyphicon {position:relative; top:1px; display:inline-block; font-family:"Font Awesome 7 Pro","Font Awesome 6 Pro" !important; font-style:normal; font-weight:900; line-height:1; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
.xm4 .glyphicon-asterisk::before {content:"\*";}
.xm4 .glyphicon-plus::before {content:"\+";}
.xm4 .glyphicon-euro::before,.xm4 .glyphicon-eur::before {content:"\f153";}
.xm4 .glyphicon-minus::before {content:"\f068";}
.xm4 .glyphicon-cloud::before {content:"\f0c2";}
.xm4 .glyphicon-envelope::before {content:"\f0e0";}
.xm4 .glyphicon-pencil::before {content:"\f303";}
.xm4 .glyphicon-glass::before {content:"\f000";}
.xm4 .glyphicon-music::before {content:"\f001";}
.xm4 .glyphicon-search::before {content:"\f002";}
.xm4 .glyphicon-heart::before,.xm4 .glyphicon-heart-empty::before {content:"\f004";}
.xm4 .glyphicon-star::before,.xm4 .glyphicon-star-empty::before {content:"\f005";}
.xm4 .glyphicon-user::before {content:"\f007";}
.xm4 .glyphicon-film::before {content:"\f008";}
.xm4 .glyphicon-th-large::before {content:"\f009";}
.xm4 .glyphicon-th::before {content:"\f00a";}
.xm4 .glyphicon-th-list::before {content:"\f00b";}
.xm4 .glyphicon-ok::before {content:"\f00c";}
.xm4 .glyphicon-remove::before {content:"\f00d";}
.xm4 .glyphicon-zoom-in::before {content:"\f00e";}
.xm4 .glyphicon-zoom-out::before {content:"\f010";}
.xm4 .glyphicon-off::before {content:"\f011";}
.xm4 .glyphicon-signal::before {content:"\f012";}
.xm4 .glyphicon-cog::before {content:"\f013";}
.xm4 .glyphicon-trash::before {content:"\f1f8";}
.xm4 .glyphicon-home::before {content:"\f015";}
.xm4 .glyphicon-file::before {content:"\f15b";}
.xm4 .glyphicon-time::before {content:"\f017";}
.xm4 .glyphicon-road::before {content:"\f018";}
.xm4 .glyphicon-download-alt::before {content:"\f019";}
.xm4 .glyphicon-download::before {content:"\f358";}
.xm4 .glyphicon-upload::before {content:"\f35b";}
.xm4 .glyphicon-inbox::before {content:"\f01c";}
.xm4 .glyphicon-play-circle::before {content:"\f144";}
.xm4 .glyphicon-repeat::before {content:"\f2f9";}
.xm4 .glyphicon-refresh::before {content:"\f021";}
.xm4 .glyphicon-list-alt::before {content:"\f022";}
.xm4 .glyphicon-lock::before {content:"\f023";}
.xm4 .glyphicon-flag::before {content:"\f024";}
.xm4 .glyphicon-headphones::before {content:"\f025";}
.xm4 .glyphicon-volume-off::before {content:"\f026";}
.xm4 .glyphicon-volume-down::before {content:"\f027";}
.xm4 .glyphicon-volume-up::before,.xm4 .glyphicon-sound-stereo::before,.xm4 .glyphicon-sound-dolby::before,.xm4 .glyphicon-sound-5-1::before,.xm4 .glyphicon-sound-6-1::before,.xm4 .glyphicon-sound-7-1::before {content:"\f028";}
.xm4 .glyphicon-qrcode::before {content:"\f029";}
.xm4 .glyphicon-barcode::before {content:"\f02a";}
.xm4 .glyphicon-tag::before {content:"\f02b";}
.xm4 .glyphicon-tags::before {content:"\f02c";}
.xm4 .glyphicon-book::before {content:"\f02d";}
.xm4 .glyphicon-bookmark::before {content:"\f02e";}
.xm4 .glyphicon-print::before {content:"\f02f";}
.xm4 .glyphicon-camera::before {content:"\f030";}
.xm4 .glyphicon-font::before,.xm4 .glyphicon-text-color::before {content:"\f031";}
.xm4 .glyphicon-bold::before {content:"\f032";}
.xm4 .glyphicon-italic::before {content:"\f033";}
.xm4 .glyphicon-text-height::before {content:"\f034";}
.xm4 .glyphicon-text-width::before {content:"\f035";}
.xm4 .glyphicon-align-left::before {content:"\f036";}
.xm4 .glyphicon-align-center::before {content:"\f037";}
.xm4 .glyphicon-align-right::before {content:"\f038";}
.xm4 .glyphicon-align-justify::before {content:"\f039";}
.xm4 .glyphicon-list::before {content:"\f03a";}
.xm4 .glyphicon-indent-left::before {content:"\f03b";}
.xm4 .glyphicon-indent-right::before {content:"\f03c";}
.xm4 .glyphicon-facetime-video::before,.xm4 .glyphicon-sd-video::before,.xm4 .glyphicon-hd-video::before {content:"\f03d";}
.xm4 .glyphicon-picture::before {content:"\f03e";}
.xm4 .glyphicon-map-marker::before {content:"\f3c5";}
.xm4 .glyphicon-adjust::before {content:"\f042";}
.xm4 .glyphicon-tint::before {content:"\f043";}
.xm4 .glyphicon-edit::before {content:"\f044";}
.xm4 .glyphicon-share::before {content:"\f14d";}
.xm4 .glyphicon-check::before {content:"\f14a";}
.xm4 .glyphicon-move::before {content:"\f047";}
.xm4 .glyphicon-step-backward::before {content:"\f048";}
.xm4 .glyphicon-fast-backward::before {content:"\f049";}
.xm4 .glyphicon-backward::before {content:"\f04a";}
.xm4 .glyphicon-play::before {content:"\f04b";}
.xm4 .glyphicon-pause::before {content:"\f04c";}
.xm4 .glyphicon-stop::before {content:"\f04d";}
.xm4 .glyphicon-forward::before {content:"\f04e";}
.xm4 .glyphicon-fast-forward::before {content:"\f050";}
.xm4 .glyphicon-step-forward::before {content:"\f051";}
.xm4 .glyphicon-eject::before {content:"\f052";}
.xm4 .glyphicon-chevron-left::before {content:"\f053";}
.xm4 .glyphicon-chevron-right::before {content:"\f054";}
.xm4 .glyphicon-plus-sign::before {content:"\f055";}
.xm4 .glyphicon-minus-sign::before {content:"\f056";}
.xm4 .glyphicon-remove-sign::before,.xm4 .glyphicon-remove-circle::before {content:"\f057";}
.xm4 .glyphicon-ok-sign::before,.xm4 .glyphicon-ok-circle::before,.xm4 .glyphicon-saved::before {content:"\f058";}
.xm4 .glyphicon-question-sign::before {content:"\f059";}
.xm4 .glyphicon-info-sign::before {content:"\f05a";}
.xm4 .glyphicon-screenshot::before {content:"\f05b";}
.xm4 .glyphicon-ban-circle::before {content:"\f05e";}
.xm4 .glyphicon-arrow-left::before {content:"\f060";}
.xm4 .glyphicon-arrow-right::before {content:"\f061";}
.xm4 .glyphicon-arrow-up::before {content:"\f062";}
.xm4 .glyphicon-arrow-down::before {content:"\f063";}
.xm4 .glyphicon-share-alt::before {content:"\f064";}
.xm4 .glyphicon-resize-full::before {content:"\f065";}
.xm4 .glyphicon-resize-small::before {content:"\f066";}
.xm4 .glyphicon-exclamation-sign::before {content:"\f06a";}
.xm4 .glyphicon-gift::before {content:"\f06b";}
.xm4 .glyphicon-leaf::before {content:"\f06c";}
.xm4 .glyphicon-fire::before {content:"\f06d";}
.xm4 .glyphicon-eye-open::before {content:"\f06e";}
.xm4 .glyphicon-eye-close::before {content:"\f070";}
.xm4 .glyphicon-warning-sign::before,.xm4 .glyphicon-alert::before {content:"\f071";}
.xm4 .glyphicon-plane::before {content:"\f072";}
.xm4 .glyphicon-calendar::before {content:"\f073";}
.xm4 .glyphicon-random::before {content:"\f074";}
.xm4 .glyphicon-comment::before {content:"\f075";}
.xm4 .glyphicon-magnet::before {content:"\f076";}
.xm4 .glyphicon-chevron-up::before {content:"\f077";}
.xm4 .glyphicon-chevron-down::before {content:"\f078";}
.xm4 .glyphicon-retweet::before {content:"\f079";}
.xm4 .glyphicon-shopping-cart::before {content:"\f07a";}
.xm4 .glyphicon-folder-close::before {content:"\f07b";}
.xm4 .glyphicon-folder-open::before {content:"\f07c";}
.xm4 .glyphicon-resize-vertical::before {content:"\f07d";}
.xm4 .glyphicon-resize-horizontal::before {content:"\f07e";}
.xm4 .glyphicon-hdd::before {content:"\f0a0";}
.xm4 .glyphicon-bullhorn::before {content:"\f0a1";}
.xm4 .glyphicon-bell::before {content:"\f0f3";}
.xm4 .glyphicon-certificate::before {content:"\f0a3";}
.xm4 .glyphicon-thumbs-up::before {content:"\f164";}
.xm4 .glyphicon-thumbs-down::before {content:"\f165";}
.xm4 .glyphicon-hand-right::before {content:"\f0a4";}
.xm4 .glyphicon-hand-left::before {content:"\f0a5";}
.xm4 .glyphicon-hand-up::before {content:"\f0a6";}
.xm4 .glyphicon-hand-down::before {content:"\f0a7";}
.xm4 .glyphicon-circle-arrow-right::before {content:"\f0a9";}
.xm4 .glyphicon-circle-arrow-left::before {content:"\f0a8";}
.xm4 .glyphicon-circle-arrow-up::before {content:"\f0aa";}
.xm4 .glyphicon-circle-arrow-down::before {content:"\f0ab";}
.xm4 .glyphicon-globe::before {content:"\f0ac";}
.xm4 .glyphicon-wrench::before {content:"\f0ad";}
.xm4 .glyphicon-tasks::before {content:"\f0ae";}
.xm4 .glyphicon-filter::before {content:"\f0b0";}
.xm4 .glyphicon-briefcase::before {content:"\f0b1";}
.xm4 .glyphicon-fullscreen::before {content:"\f31e";}
.xm4 .glyphicon-dashboard::before {content:"\f625";}
.xm4 .glyphicon-paperclip::before {content:"\f0c6";}
.xm4 .glyphicon-link::before {content:"\f0c1";}
.xm4 .glyphicon-phone::before {content:"\f3cd";}
.xm4 .glyphicon-pushpin::before {content:"\f08d";}
.xm4 .glyphicon-usd::before {content:"\$";}
.xm4 .glyphicon-gbp::before {content:"\f154";}
.xm4 .glyphicon-sort::before {content:"\f0dc";}
.xm4 .glyphicon-sort-by-alphabet::before {content:"\f15d";}
.xm4 .glyphicon-sort-by-alphabet-alt::before {content:"\f881";}
.xm4 .glyphicon-sort-by-order::before {content:"\f162";}
.xm4 .glyphicon-sort-by-order-alt::before {content:"\f886";}
.xm4 .glyphicon-sort-by-attributes::before {content:"\f884";}
.xm4 .glyphicon-sort-by-attributes-alt::before {content:"\f160";}
.xm4 .glyphicon-unchecked::before {content:"\f0c8";}
.xm4 .glyphicon-expand::before {content:"\f152";}
.xm4 .glyphicon-collapse-down::before {content:"\f150";}
.xm4 .glyphicon-collapse-up::before {content:"\f151";}
.xm4 .glyphicon-log-in::before {content:"\f2f6";}
.xm4 .glyphicon-flash::before {content:"\f0e7";}
.xm4 .glyphicon-log-out::before {content:"\f2f5";}
.xm4 .glyphicon-new-window::before {content:"\f35d";}
.xm4 .glyphicon-record::before {content:"\f111";}
.xm4 .glyphicon-save::before {content:"\e094";}
.xm4 .glyphicon-open::before {content:"\e09a";}
.xm4 .glyphicon-import::before {content:"\f56f";}
.xm4 .glyphicon-export::before {content:"\f56e";}
.xm4 .glyphicon-send::before {content:"\f1d8";}
.xm4 .glyphicon-floppy-disk::before,.xm4 .glyphicon-floppy-saved::before,.xm4 .glyphicon-floppy-save::before,.xm4 .glyphicon-floppy-open::before {content:"\f0c7";}
.xm4 .glyphicon-floppy-remove::before {content:"\e181";}
.xm4 .glyphicon-credit-card::before {content:"\f09d";}
.xm4 .glyphicon-transfer::before {content:"\f362";}
.xm4 .glyphicon-cutlery::before {content:"\f2e7";}
.xm4 .glyphicon-header::before {content:"\f1dc";}
.xm4 .glyphicon-compressed::before {content:"\f1c6";}
.xm4 .glyphicon-earphone::before {content:"\f095";}
.xm4 .glyphicon-phone-alt::before {content:"\f879";}
.xm4 .glyphicon-tower::before {content:"\f447";}
.xm4 .glyphicon-stats::before {content:"\e0e3";}
.xm4 .glyphicon-subtitles::before {content:"\f20a";}
.xm4 .glyphicon-copyright-mark::before {content:"\f1f9";}
.xm4 .glyphicon-registration-mark::before {content:"\f25d";}
.xm4 .glyphicon-cloud-download::before {content:"\f0ed";}
.xm4 .glyphicon-cloud-upload::before {content:"\f0ee";}
.xm4 .glyphicon-tree-conifer::before {content:"\f1bb";}
.xm4 .glyphicon-tree-deciduous::before {content:"\f400";}
.xm4 .glyphicon-cd::before {content:"\f51f";}
.xm4 .glyphicon-save-file::before {content:"\f56d";}
.xm4 .glyphicon-open-file::before {content:"\f574";}
.xm4 .glyphicon-level-up::before {content:"\f3bf";}
.xm4 .glyphicon-copy::before {content:"\f0c5";}
.xm4 .glyphicon-paste::before {content:"\f0ea";}
.xm4 .glyphicon-equalizer::before {content:"\f1de";}
.xm4 .glyphicon-king::before {content:"\f43f";}
.xm4 .glyphicon-queen::before {content:"\f445";}
.xm4 .glyphicon-pawn::before {content:"\f443";}
.xm4 .glyphicon-bishop::before {content:"\f43a";}
.xm4 .glyphicon-knight::before {content:"\f441";}
.xm4 .glyphicon-baby-formula::before {content:"\e673";}
.xm4 .glyphicon-tent::before {content:"\e57d";}
.xm4 .glyphicon-blackboard::before {content:"\f51b";}
.xm4 .glyphicon-bed::before {content:"\f236";}
.xm4 .glyphicon-apple::before {content:"\f5d1";}
.xm4 .glyphicon-erase::before {content:"\f12d";}
.xm4 .glyphicon-hourglass::before {content:"\f252";}
.xm4 .glyphicon-lamp::before {content:"\f4ca";}
.xm4 .glyphicon-duplicate::before {content:"\f24d";}
.xm4 .glyphicon-piggy-bank::before {content:"\f4d3";}
.xm4 .glyphicon-scissors::before {content:"\f0c4";}
.xm4 .glyphicon-bitcoin::before,.xm4 .glyphicon-btc::before,.xm4 .glyphicon-xbt::before {content:"\e0b4";}
.xm4 .glyphicon-yen::before,.xm4 .glyphicon-jpy::before {content:"\f157";}
.xm4 .glyphicon-ruble::before,.xm4 .glyphicon-rub::before {content:"\f158";}
.xm4 .glyphicon-scale::before {content:"\f24e";}
.xm4 .glyphicon-ice-lolly::before,.xm4 .glyphicon-ice-lolly-tasted::before {content:"\f810";}
.xm4 .glyphicon-education::before {content:"\f19d";}
.xm4 .glyphicon-option-horizontal::before {content:"\f141";}
.xm4 .glyphicon-option-vertical::before {content:"\f142";}
.xm4 .glyphicon-menu-hamburger::before {content:"\f0c9";}
.xm4 .glyphicon-modal-window::before {content:"\f2d0";}
.xm4 .glyphicon-oil::before {content:"\f613";}
.xm4 .glyphicon-grain::before {content:"\e2cd";}
.xm4 .glyphicon-sunglasses::before {content:"\f530";}
.xm4 .glyphicon-text-size::before {content:"\f894";}
.xm4 .glyphicon-text-background::before {content:"\f591";}
.xm4 .glyphicon-object-align-top::before {content:"\e3c0";}
.xm4 .glyphicon-object-align-bottom::before {content:"\e3bb";}
.xm4 .glyphicon-object-align-horizontal::before {content:"\e3bc";}
.xm4 .glyphicon-object-align-left::before {content:"\e3be";}
.xm4 .glyphicon-object-align-vertical::before {content:"\e3bd";}
.xm4 .glyphicon-object-align-right::before {content:"\e3bf";}
.xm4 .glyphicon-triangle-right::before {content:"\f0da";}
.xm4 .glyphicon-triangle-left::before {content:"\f0d9";}
.xm4 .glyphicon-triangle-bottom::before {content:"\f0d7";}
.xm4 .glyphicon-triangle-top::before {content:"\f0d8";}
.xm4 .glyphicon-console::before {content:"\f120";}
.xm4 .glyphicon-superscript::before {content:"\f12b";}
.xm4 .glyphicon-subscript::before {content:"\f12c";}
.xm4 .glyphicon-menu-left::before {content:"\f104";}
.xm4 .glyphicon-menu-right::before {content:"\f105";}
.xm4 .glyphicon-menu-down::before {content:"\f107";}
.xm4 .glyphicon-menu-up::before {content:"\f106";}
.xm4 .glyphicon-star-empty,.xm4 .glyphicon-time,.xm4 .glyphicon-download,.xm4 .glyphicon-upload,.xm4 .glyphicon-play-circle,.xm4 .glyphicon-list-alt,.xm4 .glyphicon-check,.xm4 .glyphicon-remove-circle,.xm4 .glyphicon-ok-circle,.xm4 .glyphicon-heart-empty,.xm4 .glyphicon-unchecked,.xm4 .glyphicon-expand,.xm4 .glyphicon-collapse-down,.xm4 .glyphicon-collapse-up {font-weight:400;}

/* MR/Claude 10/21/2026: every Date/Time field's picker (jQuery UI Timepicker Addon 1.4, loaded by lib/tag/xm/date.cfm)
   printed "Time" on top of the chosen time and the Hour/Minute sliders on top of their labels (ticket: trustcentral.org
   Parent Club > Workshop > New Workshop). xm-3's main.css, imported above into the xm-legacy layer, lifts each label with
   `dt {height:25px; margin-bottom:-25px}` and indents its control with `dd {margin-left:65px}`, but Bootstrap 5's
   unlayered `dd {margin-left:0}` beats the layered indent, so label and control sat on the same spot. Laid out here as a
   label | control grid. The addon hides an unused unit (seconds, timezone) on its dt but not on its dd, so the dd after a
   hidden dt is hidden too, or it would take a row of its own. Grid columns follow direction, so .ui-timepicker-rtl
   mirrors on its own. Colours inherit from the picker, which dark.css already themes. */
.xm4 .ui-timepicker-div dl {display:grid; grid-template-columns:max-content minmax(0,1fr); align-items:center; column-gap:12px; row-gap:12px; margin:6px 4px 10px; padding:0; text-align:start;}
.xm4 .ui-timepicker-div dl dt {grid-column:1; height:auto; margin:0; padding:0; font-weight:600; line-height:1.3;}
.xm4 .ui-timepicker-div dl dd {grid-column:2; min-width:0; margin:0; padding:0 10px 0 2px;}
.xm4 .ui-timepicker-div dl dt[style*="none"] + dd {display:none;}
.xm4 .ui-timepicker-div dl dd.ui_tpicker_time {font-variant-numeric:tabular-nums;}