/* Custom augmentations for JQM 1.4.5 NewTheme */

/* JQM 1.4 wraps text inputs in <div class="ui-input-text"> with a visible border.
   Hidden inputs (display:none) still show the wrapper div as a bordered empty line.
   JQM 1.2 didn't wrap inputs, so hidden ones were truly hidden. */
.ui-input-text:has(> [style*="display:none"]),
.ui-input-text:has(> [style*="display: none"]),
.ui-input-text:has(> input[type="hidden"]) {
    display: none;
}
/* ASP.NET hidden fields — JQM 1.4 wraps inputs inside .aspNetHidden in
   div.ui-input-text, making them visible. Hide the entire wrapper. */
.aspNetHidden .ui-input-text {
    display: none;
}

/* SYSTEM-WIDE BUTTON SIZING: Restore JQM 1.2 vertical padding.
   JQM 1.4 default: padding:.7em 1em   JQM 1.2 default: padding:.4em 10px
   Only override vertical padding to reduce button height; keep horizontal as-is.
   If this causes layout issues elsewhere, this rule can be removed/scoped. */
.ui-btn {
    padding-top: .55em;
    padding-bottom: .55em;
    font-size: inherit; /* JQM 1.4 sets font-size:16px; JQM 1.2 inherited. */
    font-family: inherit; /* JQM 1.4 sets sans-serif; JQM 1.2 inherited from theme. */
}
/* Preserve JQM 1.4 mini sizing — the .ui-btn inherit above would clobber
   .ui-mini's 12.5px (same specificity, later source wins). Re-assert it. */
.ui-mini.ui-btn {
    font-size: 12.5px;
}
/* Collapsible heading toggle: the <h6> (or other heading) is structural — its
   compressed font-size (.67em for h6) should NOT cascade to the heading toggle.
   Re-set to 1rem so collapsible headers render at a readable, consistent size.
   Other buttons in the heading (e.g. Photos/Attachments) still inherit via .ui-mini. */
.ui-collapsible-heading .ui-collapsible-heading-toggle {
    font-size: 1rem;
}
/* Print multiple checklist list items: JQM 1.4 checkbox labels don't fill
   full width. JQM 1.2's checkbox labels were display:block and filled parent.
   JQM 1.4 uses inline-block sizing that shrinks to content width. */
#selpmlist label.ui-btn {
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
    white-space: normal;
    height: auto;
}

/* JQM 1.4 wraps text inputs in div.ui-input-text (display:block). Inside
   webkit-box/flex parents (like login page), the wrapper doesn't fill available
   width like the bare input did in JQM 1.2. Only apply inside webkit-box. */
[style*="-webkit-box"] > .ui-input-text {
    -webkit-box-flex: 1;
    flex: 1;
    min-width: 0;
}
[style*="-webkit-box"] > img {
    flex: none;
}

/* JQM 1.4 select button text alignment: text shifted up due to asymmetric
   padding from .ui-btn override. Equalize padding on select buttons. */
.ui-select .ui-btn {
    padding-top: .7em;
    padding-bottom: .7em;
}

/* JQM 1.4 added .ui-mobile label { display: block } which JQM 1.2 did not have.
   This breaks inline label layouts throughout the app. Restore inline-block. */
.ui-mobile label {
    display: inline-block;
}
.ui-btn-icon-notext {
    padding-top: 0;
    padding-bottom: 0;
}
/* Mini checkboxes/radios: restore JQM 1.2 compact sizing.
   The .55em global override is still larger than 1.2's .4em.
   ASP.NET's CheckBox doesn't pass data-mini to the rendered <input>,
   so JQM never adds .ui-mini to the label. Target the data attribute instead. */
label.ui-btn[data-mini="true"] {
    padding-top: .2em;
    padding-bottom: .2em;
}
/* Multi-response checkboxes (.rrtcfbox): JQM 1.4's .ui-checkbox wrapper adds
   margin: .5em 0 (extra row spacing) and the -5px left margin on .rrtcfbox
   caused icon overlap with adjacent items. The root cause (missing ui-mini and
   theme classes) is fixed in rrCheckBox.Render() which now passes data-mini and
   data-theme from Attributes to InputAttributes, and CreateFormsLibrary.cs now
   generates data-theme="l" on the checkbox controls. */
.rrtcfbox {
    margin-left: 0;
}
.rrtcfbox .ui-checkbox {
    margin: 4px 0;
}

/* Reduce dialog header title height. JQM 1.4 default: padding:.7em 0, JQM 1.2: .3em
   Scoped to dialogs only so regular page headers are unaffected. */
/* JQM 1.4 dialog: gap between header and content from border/margin differences. */
.ui-dialog-contain > .ui-header {
    border-bottom: none;
}
.ui-dialog-contain > .ui-content {
    border-top: none;
}
.ui-dialog-contain > .ui-header .ui-title {
    padding-top: 0;
    padding-bottom: 0;
}

/* JQM 1.2 applied ui-btn-up-{swatch} to static <li> elements (font-weight:700). */
/* JQM 1.4.5 applies ui-body-inherit instead, which has no font-weight. */
.ui-listview > li.ui-li-static.ui-body-inherit { font-weight: 700; }

/* JQM 1.4 listview title header color: <li data-theme="b"> without a direct <a>
   child gets ui-li-static ui-body-b (gray body swatch). These are title/banner
   headers that precede other dividers, so they cannot use data-role="list-divider"
   (JQM 1.4's hideDividers feature hides dividers with no regular items after them).
   Override ui-body-b to use ui-bar-b colors (blue) on static listview items. */
.ui-listview > .ui-li-static.ui-body-b {
    background-color: #4b88b6 /*{b-bar-background-color}*/;
    border-color: #456f9a /*{b-bar-border}*/;
    color: #ffffff /*{b-bar-color}*/;
    text-shadow: 0 1px 1px #3e6790 /*{b-bar-shadow-color}*/;
    font-weight: bold;
}

/* Hide browser native date picker icon on datebox inputs — v4 datebox provides its own button */
input[data-role="datebox"]::-webkit-calendar-picker-indicator {
    display: none !important;
    -webkit-appearance: none;
}
input[data-role="datebox"]::-webkit-inner-spin-button {
    display: none !important;
}

/* Tighten datebox input — reduce wrapper padding so button fits within container */
.ui-mini.ui-input-has-clear {
    padding-right: 1.5em;
}
.ui-input-has-clear:not(.ui-mini) {
    padding-right: 1.5em;
}
.ui-input-has-clear .ui-btn.ui-input-clear {
    margin-right: 0;
}

/* Observation slider toggle: JQM 1.4 has a separate .ui-slider-track inside
   .ui-slider, with margin-left:68px for the number input. Since the input is
   hidden, remove the margin and style the track as a rounded toggle. Also reduce
   the outer .ui-slider height/margin to match JQM 1.2 compact layout. */
.rrobsslider .ui-slider-input {
    display: none !important;
    width: 0 !important;
}
.rrobsslider .ui-slider {
    height: 22px;
    margin: 0;
}
.rrobsslider .ui-slider-track {
    margin-left: 0 !important;
    height: 22px;
    border-radius: 11px;
    top: 0;
}
.rrobsslider .ui-slider-handle {
    border-radius: 50%;
    width: 22px;
    height: 22px;
    margin-top: -12px;
}
/* Observation slider track colors: ensure ui-bar-f (red/non-compliant) and
   ui-bar-h (green/compliant) override JQM 1.4's theme inheritance on tracks */
.ui-slider-track.ui-bar-f {
    background-color: #cd4b4f !important;
    border-color: #b84347 !important;
}
.ui-slider-track.ui-bar-h {
    background-color: #307751 !important;
    border-color: #2b6b48 !important;
}
/* JQM 1.2 standalone icon spans (ui-icon) rendered as visible inline icons.
   JQM 1.4 icons use :after pseudo-elements on buttons — bare spans are invisible.
   Restore delete icon (red X) for old observation/short scoring files (bare spans)
   and style new JQM 1.4 button version. Uses same delete SVG as JQM 1.4. */
span.ui-icon.ui-icon-delete {
    display: inline-block !important;
    width: 18px;
    height: 18px;
    vertical-align: middle;
    position: relative;
    border-radius: 1em;
    cursor: pointer;
}
span.ui-icon.ui-icon-delete:after {
    content: "";
    position: absolute;
    display: block;
    width: 18px;
    height: 18px;
    top: 0;
    left: 0;
    border-radius: 1em;
    background-color: #b34245;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20width%3D%2214px%22%20height%3D%2214px%22%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpolygon%20fill%3D%22%23FFF%22%20points%3D%2214%2C3%2011%2C0%207%2C4%203%2C0%200%2C3%204%2C7%200%2C11%203%2C14%207%2C10%2011%2C14%2014%2C11%2010%2C7%20%22%2F%3E%3C%2Fsvg%3E");
}
/* New JQM 1.4 button delete icon: red background, inline with label */
a.rrobsdeleteicon.ui-btn {
    background-color: #b34245 !important;
    border-color: #993538 !important;
    vertical-align: middle;
    margin: 0 5px 0 0;
}
a.rrobsdeleteicon.ui-btn:after {
    background-color: #b34245;
}

/* Observation/short scoring vertical spacing: JQM 1.4 adds more margin to
   selects and buttons than JQM 1.2 inside the checklist ID row. */
.rrobschecklistid .ui-select,
.rrobschecklistid .ui-btn {
    margin-top: 0;
    margin-bottom: 0;
}
.rrobstypeofworkerdiv {
    margin-top: 0 !important;
    margin-bottom: 2px !important;
}

/* JQM 1.2 standalone icon spans (ui-icon ui-icon-info) rendered as visible inline icons.
   JQM 1.4 icons use :after pseudo-elements on buttons — bare spans are invisible.
   Restore standalone icon spans for both old (no ui-btn-icon-notext) and new markup. */
span.ui-icon.ui-icon-info {
    display: inline-block !important;
    width: 18px;
    height: 18px;
    vertical-align: baseline;
    position: relative;
    border-radius: 1em;
    background-color: transparent;
    background-position: center center;
    background-repeat: no-repeat;
    margin: 0 1px;
    top: 3px;
}
span.ui-icon.ui-icon-info:after {
    content: "";
    position: absolute;
    display: block;
    width: 18px;
    height: 18px;
    top: 0;
    left: 0;
    background-color: #888;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 1em;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22iso-8859-1%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20%20viewBox%3D%220%200%2014%2014%22%20style%3D%22enable-background%3Anew%200%200%2014%2014%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20style%3D%22fill%3A%23FFFFFF%3B%22%20d%3D%22M7%2C0C3.134%2C0%2C0%2C3.134%2C0%2C7s3.134%2C7%2C7%2C7s7-3.134%2C7-7S10.866%2C0%2C7%2C0z%20M7%2C2c0.552%2C0%2C1%2C0.447%2C1%2C1%20s-0.448%2C1-1%2C1S6%2C3.553%2C6%2C3S6.448%2C2%2C7%2C2z%20M9%2C11H5v-1h1V6H5V5h3v5h1V11z%22%2F%3E%3C%2Fsvg%3E");
}

/* Follow-up list: JQM 1.4 collapsible heading inside listview <li> has .45em
   margin that creates visible gaps between sections. JQM 1.2 had margin: 0. */
.ui-listview > li.ui-collapsible > .ui-collapsible-heading {
    margin: 0 !important;
}
.ui-listview > li.ui-collapsible > .ui-collapsible-heading .ui-btn {
    margin: 0 !important;
}


/* JQM 1.4 changed data-role="fieldcontain" to display:block with 78% width children. */
/* Restore inline behavior when fieldcontain is used with inline-flex layout. */
div[style*="inline-flex"].ui-field-contain {
    display: inline-flex !important;
    padding: 0;
    margin: 0;
    border-bottom: none;
    overflow: visible;
}
div[style*="inline-flex"].ui-field-contain > label ~ [class*="ui-"] {
    float: none;
    width: auto;
}
div[style*="inline-flex"].ui-field-contain > label {
    float: none;
    width: auto;
}

/* JQM 1.4 applies overflow:hidden + white-space:nowrap to .ui-li-static, preventing */
/* inline content from wrapping to the next line. Restore wrapping behavior. */
.ui-listview > .ui-li-static {
    overflow: visible;
    white-space: normal;
}

/* JQM 1.4 wraps text inputs in div.ui-input-text (display:block), breaking inline layout. */
/* When the listview li content uses inline flow, keep the input wrapper inline. */
.ui-listview > li > .ui-input-text {
    display: inline-block !important;
    width: auto;
    vertical-align: middle;
}

/* Vertically align all inline elements within listview static items */
.ui-listview > .ui-li-static > div,
.ui-listview > .ui-li-static > .ui-input-text,
.ui-listview > .ui-li-static > .ui-btn-inline,
.ui-listview > .ui-li-static > .ui-checkbox,
.ui-listview > .ui-li-static .ui-field-contain {
    vertical-align: middle;
}
.ui-listview > .ui-li-static div[style*="inline-flex"] {
    align-items: center;
}

/* JQM 1.4 checkbox/radio native input visibility: JQM 1.2 hid native inputs with
   opacity:0.001 at 10x10px. JQM 1.4 enlarged them to 22x22px but has NO opacity rule,
   so the native browser checkbox/radio is fully visible underneath the styled label. */
.ui-checkbox input,
.ui-radio input {
    opacity: 0;
}

/* JQM 1.4 slider input type fix: after changing type="range" to type="number"
   (so the browser displays the numeric value as text), hide the spinner arrows
   that number inputs show by default — the slider handle is the input method. */
input.ui-slider-input[type="number"]::-webkit-outer-spin-button,
input.ui-slider-input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input.ui-slider-input[type="number"] {
    -moz-appearance: textfield;
}

/* JQM 1.4 controlgroup horizontal: radio items need inline-block for grid wrapping.
   JQM 1.2 handled this automatically; JQM 1.4 leaves divs as block.
   font-size:0 on the fieldset eliminates whitespace/line-height gaps between rows.
   Note: .html() destroys JQM's inner .ui-controlgroup-controls div, so target
   the fieldset itself (.ui-controlgroup-horizontal). */
.ui-controlgroup-horizontal {
    font-size: 0;
}
.ui-controlgroup-horizontal .ui-radio {
    display: inline-block;
    vertical-align: top;
    font-size: 16px;
    margin: 0;
}
/* Center text in destination grid radio labels. JQM 1.4 .ui-radio .ui-btn sets
   text-align:left and .ui-btn sets margin:.5em 0 — override both. */
.ui-radio label.rrwsdestinationcheckbox,
.ui-radio label.rrwsdestinationcheckboxpatient {
    text-align: center !important;
    margin: 0 !important;
    padding: 3px 7px;
    vertical-align: top; /* kill inline-block baseline descender gap below label */
}
/* Hide radio circle icon on destination grid items */
.ui-controlgroup-horizontal .ui-radio label.ui-btn:before,
.ui-controlgroup-horizontal .ui-radio label.ui-btn:after {
    display: none !important;
}

/* JQM 1.4 non-inset collapsibles inside inset collapsible-sets: JQM 1.4 applies
   margin: 0 -1em to non-inset collapsibles, pulling them outside their parent.
   JQM 1.2 contained them properly. Neutralize the negative horizontal margins. */
.ui-collapsible-set .ui-collapsible:not(.ui-collapsible-inset) {
    margin-left: 0;
    margin-right: 0;
}
.ui-collapsible-set .ui-collapsible:not(.ui-collapsible-inset) > .ui-collapsible-heading .ui-btn {
    border-left-width: 1px;
    border-right-width: 1px;
}
.ui-collapsible-set .ui-collapsible-themed-content:not(.ui-collapsible-inset) > .ui-collapsible-content {
    border-left-width: 1px;
    border-right-width: 1px;
}

/* JQM 1.4 collapsible heading icon overlap: the toggle button's padding-left (2.5em)
   and icon position (.5625em) are em-based. Inside <h6> (font-size ~.67em), the em
   values compress so the 22px fixed-size icon overlaps the text. JQM 1.2 used inner
   <span> icons with different positioning, unaffected by heading font-size.
   Fix: use max() so padding is at least 2.5rem (root-relative, ~40px), while still
   allowing larger padding for bigger headings (h1-h3) via 2.5em. */
.ui-collapsible-heading .ui-btn.ui-btn-icon-left {
    padding-left: max(2.5em, 2.5rem);
}

/* Legacy score dropdowns (rrtqscore2box) have data-iconpos="left" from the old
   collapsible form generator. JQM 1.4 renders this as ui-btn-icon-left, placing
   a circular icon disc on the left that overlaps text. Override to match the
   non-collapsible forms' ui-btn-icon-right appearance.
   TODO: These legacy rules can be removed once all pre-existing generated forms
   have been regenerated (they will no longer have data-iconpos="left" or lack
   data-mini="true", since CreateFormsLibrary.cs has been refactored). */
.rrtqscore2box .ui-select .ui-btn.ui-btn-icon-left,
.ui-collapsible-heading .ui-select .ui-btn.ui-btn-icon-left {
    padding-left: 1em;
    padding-right: 2.5em;
}
.rrtqscore2box .ui-select .ui-btn.ui-btn-icon-left:after,
.ui-collapsible-heading .ui-select .ui-btn.ui-btn-icon-left:after {
    left: auto;
    right: .3125em;
}
/* Legacy collapsible score dropdowns lack data-mini="true" controlgroup wrapper
   that non-collapsible forms have. The select is inside an <h6> (collapsible heading)
   whose browser default font-size (~.67em) cascades down. Use absolute 12.5px
   (same as JQM's .ui-mini) to avoid em compounding through the h6.
   TODO: Can be removed once all pre-existing generated forms are regenerated. */
.rrtqscore2box .ui-select .ui-btn {
    font-size: 12.5px;
    text-align: center;
}

/* JQM 1.4 split button text fix: the Widget Factory override in my.js restores
   text and removes ui-btn-icon-notext. These rules widen the split button to
   show text. JQM default is 2.5em icon-only; we override to 6.25em with text. */
.ui-listview > li.ui-li-has-alt > .ui-btn:first-child {
    margin-right: 6.25em;
}
.ui-listview > li.ui-li-has-alt > .ui-btn + .ui-btn {
    width: 6.25em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}
/* Hide the icon pseudo-element on split buttons that now show text */
.ui-listview > li.ui-li-has-alt > .ui-btn + .ui-btn:after {
    display: none !important;
}