/* MR/Claude 10/20/2026: the xm-4 look for jQuery QueryBuilder 2.5.1: every xm:formfield type="querybuilder" (the grid's
   Search Filters, trigger, assignment and workflow conditions, rule editors, Flex Studio) and the Workbench filter.
   It is styling only: QueryBuilder's markup and the rules JSON it saves are unchanged.

   Layout. Each group is ONE flex box. Its header and the header's two button groups are display:contents, so their
   pieces sit around the rules: the active condition is a pill on a rail left of the rules (the rail is drawn by each
   rule's ::before/::after), Add rule / Add group go under the rules, Not / Invert / Delete at the right of that row.
   Nested groups are cards. js/querybuilder.js makes the pill switch the condition and titles nested groups.

   Specificity. Every selector starts with :is(.query-builder,#xm4-qb). No element has that id: it only lifts these rules
   above the sheets that load later in the page and target the same elements (query-builder.default.css, the inline
   <style> in formfield.cfm, Flex Studio's rich-inputs.css, trigger-editor.css, the data explorer's main.css). The few
   !important flags here answer !important rules in those sheets. */

.xm4 :is(.query-builder,#xm4-qb) {
    --xmqb-rail: 50px;      /* the column the condition pill sits in */
    --xmqb-pill: 42px;      /* the pill's width; the rail line runs through its centre */
    --xmqb-gap: 8px;        /* space between rules */
    --xmqb-control: 34px;   /* height of selects and inputs */
    --xmqb-row: color-mix(in srgb, var(--xm4-soft) 55%, var(--xm4-surface));
    --xmqb-wire: color-mix(in srgb, var(--xm4-faint) 55%, var(--xm4-surface));
    --xmqb-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    color: var(--xm4-text);
    font-size: 13px;
    line-height: 1.4;
}

/* ===================== Groups ===================== */
.xm4 :is(.query-builder,#xm4-qb) .rules-group-container {
    position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0;
    width: auto; height: auto; margin: 0; padding: 0;
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
}
.xm4 :is(.query-builder,#xm4-qb) .rules-list > .rules-group-container {
    padding: 12px;
    background: var(--xm4-surface); border: 1px solid var(--xm4-line); border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.xm4 :is(.query-builder,#xm4-qb) .rules-group-header,
.xm4 :is(.query-builder,#xm4-qb) .rules-group-header > .group-actions,
.xm4 :is(.query-builder,#xm4-qb) .rules-group-header > .group-conditions {display: contents; float: none; margin: 0;}

/* "Group · 3 conditions" (added by js/querybuilder.js to nested groups) */
.xm4 :is(.query-builder,#xm4-qb) .xmqb-title {order: 1; flex: 1 1 100%; display: flex; align-items: baseline; gap: 5px; min-width: 0; font-size: 12.5px; line-height: 1.3; color: var(--xm4-muted);}
.xm4 :is(.query-builder,#xm4-qb) .xmqb-title b {font-weight: 600; color: var(--xm4-ink-2);}

/* The rules, beside the rail */
.xm4 :is(.query-builder,#xm4-qb) .rules-group-body {order: 5; flex: 1 1 calc(100% - var(--xmqb-rail)); min-width: 0; margin: 0; padding: 0; display: block;}
.xm4 :is(.query-builder,#xm4-qb) .rules-list {display: flex; flex-direction: column; gap: var(--xmqb-gap); width: auto; height: auto; margin: 0; padding: 0; list-style: none;}
.xm4 :is(.query-builder,#xm4-qb) .rules-group-body:has(> .rules-list:empty) {display: none;}

/* ===================== Condition pill (And / Or) ===================== */
/* Only the active condition shows; the others stay in the DOM because QueryBuilder reads and writes their radios. */
.xm4 :is(.query-builder,#xm4-qb) .group-conditions > label {display: none !important;}
.xm4 :is(.query-builder,#xm4-qb) .group-conditions > label.active {
    order: 4; flex: 0 0 auto; align-self: center; position: relative; z-index: 1;
    display: inline-block !important; width: var(--xmqb-pill); height: 26px;
    margin: 0 calc(var(--xmqb-rail) - var(--xmqb-pill)) 0 0 !important; padding: 0 4px;
    font-size: 12px; font-weight: 500; line-height: 24px; text-align: center; text-transform: lowercase; letter-spacing: 0; white-space: nowrap;
    color: var(--xm4-ink-2) !important; background: var(--xm4-surface) !important; border: 1px solid var(--xmqb-wire) !important;
    border-radius: 999px !important; box-shadow: 0 1px 1px rgba(15,23,42,.05) !important; opacity: 1;
    cursor: pointer; user-select: none; pointer-events: auto; transition: color .15s, border-color .15s, background-color .15s;
}
.xm4 :is(.query-builder,#xm4-qb) .group-conditions > label.active::first-letter {text-transform: uppercase;}
.xm4 :is(.query-builder,#xm4-qb) .group-conditions > label.active:hover {color: var(--xm4-accent) !important; border-color: var(--xm4-accent) !important; background: var(--xm4-tint) !important;}
.xm4 :is(.query-builder,#xm4-qb) .group-conditions > label.active:has(input:focus-visible) {outline: 2px solid var(--xm4-accent); outline-offset: 2px;}
/* QueryBuilder disables the condition while a group has one rule, and for condition_readonly groups */
.xm4 :is(.query-builder,#xm4-qb) .group-conditions > label.active:is(.disabled,.readonly) {cursor: default; color: var(--xm4-faint) !important; background: var(--xm4-surface) !important; border-color: var(--xmqb-wire) !important;}
/* GM/Claude 10/21/2026: an empty group still hides its And/Or pill, but :has() now sits on the element it styles and hands the label a
   custom property. As "container:has(...) > header > conditions > label", Chrome re-checked it on every DOM change in the page: each
   style recalc cost ~31 ms instead of 4.4 ms on the SAMIS Contracts grid (1,300-row Columns list) and typing in its filter froze
   the page (ticket 571499). Only label.active is visible here (the other labels are hidden above), so that is the one it sets */
.xm4 :is(.query-builder,#xm4-qb) .rules-group-container:has(> .rules-group-body > .rules-list:empty) {--xmqb-empty-cond: none;}
.xm4 :is(.query-builder,#xm4-qb) .rules-group-header > .group-conditions > label.active {display: var(--xmqb-empty-cond, inline-block) !important;}

/* ===================== Rail ===================== */
/* Each rule draws its own piece of the rail: ::before from the gap above down to its middle (with the tick across to
   the rule), ::after from its middle down through the gap below. The first and last rule round the corners. */
.xm4 :is(.query-builder,#xm4-qb) .rules-list > * {position: relative; margin: 0 !important;}
.xm4 :is(.query-builder,#xm4-qb) .rules-list > *::before,
.xm4 :is(.query-builder,#xm4-qb) .rules-list > *::after {
    content: ""; display: block; position: absolute;
    left: calc(var(--xmqb-pill) / 2 - var(--xmqb-rail)); width: calc(var(--xmqb-rail) - var(--xmqb-pill) / 2 - 1px);
    border: 0 solid var(--xmqb-wire); border-radius: 0; pointer-events: none;
}
.xm4 :is(.query-builder,#xm4-qb) .rules-list > *::before {top: calc(var(--xmqb-gap) / -2 - 1px); height: calc(50% + var(--xmqb-gap) / 2 + 1px); border-left-width: 1px; border-bottom-width: 1px;}
.xm4 :is(.query-builder,#xm4-qb) .rules-list > *::after {top: 50%; height: calc(50% + var(--xmqb-gap) / 2 + 1px); border-left-width: 1px;}
.xm4 :is(.query-builder,#xm4-qb) .rules-list > :first-child::before {display: none;}
.xm4 :is(.query-builder,#xm4-qb) .rules-list > :first-child::after {border-top-width: 1px; border-top-left-radius: 10px;}
.xm4 :is(.query-builder,#xm4-qb) .rules-list > :last-child::before {display: block; border-bottom-left-radius: 10px;}
.xm4 :is(.query-builder,#xm4-qb) .rules-list > :last-child::after {display: none;}
.xm4 :is(.query-builder,#xm4-qb) .rules-list > :only-child::before {top: 50%; height: 0; border-left-width: 0; border-radius: 0;}

/* ===================== Add rule / Add group, Not / Invert / Delete ===================== */
.xm4 :is(.query-builder,#xm4-qb) .rules-group-header::after {content: ""; order: 7; flex: 1 1 0; height: 0;}
.xm4 :is(.query-builder,#xm4-qb) .rules-group-header .btn {
    display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 7px; float: none; position: relative;
    height: 32px; margin: 0 8px 0 0 !important; padding: 0 12px 0 11px;
    font: 600 13px/1 inherit; font-family: inherit; letter-spacing: 0; text-transform: none; text-shadow: none; white-space: nowrap;
    color: var(--xm4-text) !important; background: var(--xm4-surface) !important; border: 1px solid var(--xm4-line) !important;
    border-radius: 10px !important; box-shadow: 0 1px 1px rgba(15,23,42,.04) !important; opacity: 1;
    transition: color .15s, border-color .15s, background-color .15s;
}
.xm4 :is(.query-builder,#xm4-qb) .rules-group-header .btn:hover {background: var(--xm4-soft) !important; border-color: color-mix(in srgb, var(--xm4-faint) 60%, var(--xm4-line)) !important;}
.xm4 :is(.query-builder,#xm4-qb) .rules-group-header .btn > i {display: none;}
.xm4 :is(.query-builder,#xm4-qb) .rules-group-header .btn::before {font: 400 13px/1 "Font Awesome 6 Pro"; color: var(--xm4-muted);}
.xm4 :is(.query-builder,#xm4-qb) .rules-group-header [data-add] {order: 6;}
.xm4 :is(.query-builder,#xm4-qb) .rules-group-header [data-add=rule]::before {content: "\2b";}
.xm4 :is(.query-builder,#xm4-qb) .rules-group-header [data-add=group]::before {content: "\f65e";}
/* the group's own tools: smaller, quieter */
.xm4 :is(.query-builder,#xm4-qb) .rules-group-header :is([data-not],[data-invert],[data-delete=group]) {order: 8; height: 28px; margin: 0 0 0 6px !important; padding: 0 9px; font-size: 12px; font-weight: 500; color: var(--xm4-muted) !important; background: transparent !important; border-color: transparent !important; box-shadow: none !important;}
.xm4 :is(.query-builder,#xm4-qb) .rules-group-header :is([data-not],[data-invert]):hover {color: var(--xm4-text) !important; background: var(--xm4-soft) !important;}
.xm4 :is(.query-builder,#xm4-qb) .rules-group-header :is([data-not]:not(.active),[data-invert]) {width: 30px; padding: 0; gap: 0; font-size: 0 !important;}
.xm4 :is(.query-builder,#xm4-qb) .rules-group-header [data-not]::before {content: "\f05e"; font-size: 13px;}
.xm4 :is(.query-builder,#xm4-qb) .rules-group-header [data-invert]::before {content: "\f362"; font-size: 13px;}
.xm4 :is(.query-builder,#xm4-qb) .rules-group-header [data-not].active {color: var(--xm4-danger) !important; background: color-mix(in srgb, var(--xm4-danger) 10%, var(--xm4-surface)) !important; border-color: color-mix(in srgb, var(--xm4-danger) 35%, var(--xm4-surface)) !important;}
.xm4 :is(.query-builder,#xm4-qb) .rules-group-header [data-not].active::before {color: inherit;}
.xm4 :is(.query-builder,#xm4-qb) .rules-group-header > .error-container {order: 8; margin-left: 6px;}

/* Delete: an icon button; its text stays in the DOM (font-size 0) for screen readers and the tooltip */
.xm4 :is(.query-builder,#xm4-qb) :is(.rules-group-header,.rule-actions) [data-delete] {width: 30px; height: 30px; padding: 0; gap: 0; font-size: 0 !important; color: var(--xm4-faint) !important; background: transparent !important; border: 1px solid transparent !important; border-radius: 8px !important; box-shadow: none !important;}
.xm4 :is(.query-builder,#xm4-qb) :is(.rules-group-header,.rule-actions) [data-delete] > i {display: none;}
.xm4 :is(.query-builder,#xm4-qb) :is(.rules-group-header,.rule-actions) [data-delete]::before {font: 400 14px/1 "Font Awesome 6 Pro"; color: inherit; content: "\f00d";}
.xm4 :is(.query-builder,#xm4-qb) .rules-group-header [data-delete] {order: 9;}
.xm4 :is(.query-builder,#xm4-qb) .rules-group-header [data-delete]::before {content: "\f2ed"; font-size: 13px;}
.xm4 :is(.query-builder,#xm4-qb) :is(.rules-group-header,.rule-actions) [data-delete]:hover {color: var(--xm4-danger) !important; background: color-mix(in srgb, var(--xm4-danger) 10%, transparent) !important;}
.xm4 :is(.query-builder,#xm4-qb) .btn:focus-visible {outline: 2px solid var(--xm4-accent); outline-offset: 2px;}
.xm4 :is(.query-builder,#xm4-qb) .btn:is([disabled],.disabled):not(label) {opacity: .55; pointer-events: none;}

/* ===================== Rules ===================== */
.xm4 :is(.query-builder,#xm4-qb) .rule-container {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    min-height: 50px; margin: 0; padding: 7px 8px 7px 10px;
    background: var(--xmqb-row); border: 1px solid var(--xm4-line); border-radius: 12px; box-shadow: none;
}
.xm4 :is(.query-builder,#xm4-qb) .rule-container > .rule-header {display: contents; float: none;}
.xm4 :is(.query-builder,#xm4-qb) .rule-container .rule-actions {order: 9; display: flex; margin: 0 0 0 auto; float: none;}
.xm4 :is(.query-builder,#xm4-qb) .rule-container .rule-actions > .btn {margin: 0 !important; float: none;}
.xm4 :is(.query-builder,#xm4-qb) .rule-container > .error-container {order: 8;}
.xm4 :is(.query-builder,#xm4-qb) .rule-container > .drag-handle {order: 0;}
.xm4 :is(.query-builder,#xm4-qb) .rule-container :is(.rule-filter-container,.rule-operator-container,.rule-value-container) {display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; max-width: 100%; margin: 0; padding: 0; border: 0;}
.xm4 :is(.query-builder,#xm4-qb) .rule-container .rule-filter-container {order: 1; flex: 0 1 auto;}
.xm4 :is(.query-builder,#xm4-qb) .rule-container .rule-operator-container {order: 2; flex: 0 1 auto;}
.xm4 :is(.query-builder,#xm4-qb) .rule-container .rule-value-container {order: 3; flex: 0 1 auto; color: var(--xm4-muted);}
.xm4 :is(.query-builder,#xm4-qb) .rule-container .rule-value-container:has(textarea) {flex: 1 1 260px;}
.xm4 :is(.query-builder,#xm4-qb) .rule-container .rule-value-container:empty {display: none;}
.xm4 :is(.query-builder,#xm4-qb) .rule-operator-container .hide {display: none !important;}
.xm4 :is(.query-builder,#xm4-qb) .rule-operator-container > span {padding: 0 4px; color: var(--xm4-muted);}
.xm4 :is(.query-builder,#xm4-qb) .rule-value-container label {display: inline-flex; align-items: center; gap: 5px; margin: 0 8px 0 0; font-weight: 400; color: var(--xm4-text);}

/* Native selects and inputs: white pills */
/* :where() keeps this rule at the weight of its scope, so the select and textarea rules below can refine it */
.xm4 :is(.query-builder,#xm4-qb) .rule-container :where(select,input:not([type=radio]):not([type=checkbox]),textarea) {
    display: inline-block; width: auto; max-width: 100%; height: var(--xmqb-control); min-height: 0; margin: 0;
    padding: 0 10px; font: 400 13px/1.3 inherit; font-family: inherit; color: var(--xm4-text);
    background-color: var(--xm4-surface); border: 1px solid var(--xm4-line); border-radius: 9px;
    box-shadow: 0 1px 1px rgba(15,23,42,.03); vertical-align: middle; transition: border-color .15s, box-shadow .15s;
}
.xm4 :is(.query-builder,#xm4-qb) .rule-container select:not([multiple]) {appearance: none; -webkit-appearance: none; padding-right: 30px; background-image: var(--xmqb-chevron); background-repeat: no-repeat; background-position: right 10px center; background-size: 12px 12px; cursor: pointer;}
.xm4 :is(.query-builder,#xm4-qb) .rule-container select[multiple] {height: auto; padding: 4px 6px;}
.xm4 :is(.query-builder,#xm4-qb) .rule-container textarea {width: 100%; height: auto; min-height: 64px; padding: 8px 10px; resize: vertical;}
.xm4 :is(.query-builder,#xm4-qb) .rule-container :is(select,input,textarea):focus {outline: 0; border-color: var(--xm4-accent); box-shadow: 0 0 0 3px var(--xm4-tint);}
.xm4 :is(.query-builder,#xm4-qb) .rule-container :is(select,input,textarea):disabled {color: var(--xm4-muted); background-color: var(--xm4-soft); cursor: default;}
.xm4 :is(.query-builder,#xm4-qb) .rule-container input:is([type=radio],[type=checkbox]) {width: 15px; height: 15px; margin: 0; accent-color: var(--xm4-accent);}

/* select2 (the field list, and choice values as chips) */
.xm4 :is(.query-builder,#xm4-qb) .select2-container {max-width: 100%; vertical-align: middle;}
.xm4 :is(.query-builder,#xm4-qb) .rule-filter-container .select2-container {min-width: min(170px, 100%); max-width: min(260px, 100%);}
.xm4 :is(.query-builder,#xm4-qb) .rule-value-container .select2-container {min-width: min(170px, 100%); max-width: min(420px, 100%);}
.xm4 :is(.query-builder,#xm4-qb) .select2-container .select2-selection {
    min-height: var(--xmqb-control); margin: 0 !important; font-size: 13px;
    background: var(--xm4-surface) !important; border: 1px solid var(--xm4-line) !important; border-radius: 9px !important;
    box-shadow: 0 1px 1px rgba(15,23,42,.03) !important; transition: border-color .15s, box-shadow .15s;
}
.xm4 :is(.query-builder,#xm4-qb) .select2-container :is(.select2-selection--single) {display: flex; align-items: center; height: var(--xmqb-control) !important; padding: 0 30px 0 10px !important;}
.xm4 :is(.query-builder,#xm4-qb) .select2-selection--single .select2-selection__rendered {flex: 1 1 auto; min-width: 0; padding: 0 !important; line-height: 1.3 !important; color: var(--xm4-text) !important;}
.xm4 :is(.query-builder,#xm4-qb) .select2-selection--single .select2-selection__placeholder {color: var(--xm4-muted) !important;} /* MR/Claude 10/20/2026: text, so --xm4-muted (4.5:1); --xm4-faint is for icons and borders, see the token note in theme.css */
.xm4 :is(.query-builder,#xm4-qb) .select2-selection__arrow {top: 0 !important; right: 10px !important; width: 12px !important; height: 100% !important; margin: 0 !important; background: var(--xmqb-chevron) no-repeat center / 12px 12px;}
.xm4 :is(.query-builder,#xm4-qb) .select2-selection__arrow b {display: none !important;}
.xm4 :is(.query-builder,#xm4-qb) .select2-container--open .select2-selection,
.xm4 :is(.query-builder,#xm4-qb) .select2-container--focus .select2-selection {border-color: var(--xm4-accent) !important; box-shadow: 0 0 0 3px var(--xm4-tint) !important;}
.xm4 :is(.query-builder,#xm4-qb) .select2-selection--multiple {display: flex; align-items: center; padding: 3px 28px 3px 4px !important; background: var(--xmqb-row) !important;}
.xm4 :is(.query-builder,#xm4-qb) .select2-selection--multiple .select2-selection__rendered {display: flex !important; flex-wrap: wrap; align-items: center; gap: 4px; width: 100%; margin: 0 !important; padding: 0 !important; list-style: none;}
.xm4 :is(.query-builder,#xm4-qb) .select2-selection--multiple .select2-selection__choice {
    display: inline-flex !important; flex-direction: row-reverse; align-items: center; gap: 6px; float: none;
    max-width: 100%; height: 26px; margin: 0 !important; padding: 0 7px 0 10px !important;
    font-size: 12.5px; line-height: 24px; color: var(--xm4-text) !important;
    background: var(--xm4-surface) !important; border: 1px solid var(--xm4-line) !important; border-radius: 8px !important;
}
.xm4 :is(.query-builder,#xm4-qb) .select2-selection__choice__remove {float: none; margin: 0 !important; font-size: 15px; font-weight: 400; line-height: 1; color: var(--xm4-faint) !important;}
.xm4 :is(.query-builder,#xm4-qb) .select2-selection__choice__remove:hover {color: var(--xm4-danger) !important;}
.xm4 :is(.query-builder,#xm4-qb) .select2-selection--multiple .select2-search--inline {flex: 1 1 60px; min-width: 60px;}
.xm4 :is(.query-builder,#xm4-qb) .select2-selection--multiple .select2-search__field {width: 100% !important; height: 26px !important; margin: 0 !important; padding: 0 6px !important; color: var(--xm4-text); background: transparent !important; border: 0 !important; box-shadow: none !important;}
.xm4 :is(.query-builder,#xm4-qb) .select2-selection__clear {position: absolute !important; top: 50% !important; right: 8px !important; margin: -9px 0 0 !important; width: 18px; height: 18px; line-height: 17px; text-align: center; font-size: 15px; color: var(--xm4-faint) !important; float: none !important;}
.xm4 :is(.query-builder,#xm4-qb) .select2-selection__clear:hover {color: var(--xm4-danger) !important;}

/* ===================== Errors, dragging, read-only ===================== */
.xm4 :is(.query-builder,#xm4-qb) .error-container {display: none; color: var(--xm4-danger); cursor: help;}
.xm4 :is(.query-builder,#xm4-qb) .has-error > .error-container,
.xm4 :is(.query-builder,#xm4-qb) .has-error > .rules-group-header > .error-container {display: inline-flex !important; align-items: center;}
.xm4 :is(.query-builder,#xm4-qb) .rule-container.has-error {background: color-mix(in srgb, var(--xm4-danger) 6%, var(--xm4-surface)); border-color: color-mix(in srgb, var(--xm4-danger) 45%, var(--xm4-surface));}
.xm4 :is(.query-builder,#xm4-qb) .rules-list > .rules-group-container.has-error {border-color: color-mix(in srgb, var(--xm4-danger) 45%, var(--xm4-surface));}
.xm4 :is(.query-builder,#xm4-qb) .drag-handle {display: inline-flex; align-items: center; margin: 0; padding: 0 2px; color: var(--xm4-faint); cursor: grab;}
.xm4 :is(.query-builder,#xm4-qb) .rule-placeholder {min-height: 50px; background: transparent; border: 1px dashed var(--xmqb-wire); border-radius: 12px; opacity: 1;}
.xm4 :is(.query-builder,#xm4-qb) .dragging {opacity: .6;}
.xm4 :is(.query-builder,#xm4-qb) p.filter-description {flex: 1 1 100%; order: 10; margin: 0; padding: 6px 10px; font-size: 12px; color: var(--xm4-ink-2); background: var(--xm4-tint); border: 0; border-radius: 8px;}