/*
 * jqm-compat.css — replaces jquery.mobile-1.4.3.min.css after jQuery Mobile was
 * removed from LIS (2026-08-07). Styles the two jQM visuals the app relied on:
 * data-role="button" (as buttons) and data-role="popup" (as centered modals with a
 * dimmed overlay). Paired with jqm-compat.js. data-role="none" needs no rule (inert).
 */

/* ---- Base font -----------------------------------------------------------
   jQuery Mobile's reset set `font-family: sans-serif` on the page and on form
   controls. No other stylesheet sets a base font, so without jQM the browser
   fell back to its serif default (Times New Roman). Restore the exact same
   `sans-serif` jQM used so the rendered font matches the pre-removal app. */
html,
body {
    font-family: sans-serif;
}
input,
select,
textarea,
button {
    font-family: sans-serif;
}

/* ---- Buttons -------------------------------------------------------------
   Covers BOTH jQM `data-role="button"` AND the jQM `ui-*` utility classes the
   markup applies directly (ui-btn 378×, ui-btn-inline 315×, ui-btn-active 164×,
   ui-corner-all, ui-shadow, ui-mini, ui-btn-right, … across 213 files). Many
   branded buttons also carry inline `style="background:#f27227;color:#fff"` which
   still wins over these defaults. */
[data-role="button"],
.ui-btn,
.ui-btn-active {
    display: block;
    margin: .5em 0;
    padding: .6em 1em;
    border: 1px solid #ccc;
    border-radius: .3125em;
    background: #f6f6f6;
    color: #2f3e46 !important;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.3;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    box-sizing: border-box;
    -webkit-appearance: none;
    vertical-align: middle;
}
[data-role="button"]:hover,
.ui-btn:hover,
.ui-btn-active:hover { filter: brightness(0.96); }
[data-role="button"]:active,
.ui-btn:active,
.ui-btn-active:active { filter: brightness(0.92); }

/* Full-width for <button>/<input> auto-enhanced to .ui-btn (jqm-compat.js injects
   `ui-btn` into every bare <button>/<input type=submit|button|reset>, matching jQM).
   Unlike an <a>, a <button>/<input> does NOT fill its container on display:block — it
   shrink-wraps to its label. jQM handled this with a control-specific rule; the shim's
   generic .ui-btn (display:block only) missed it, so EVERY <button class="ui-btn"> (the
   Account/ChangePassword "Change" submit and buttons app-wide) rendered narrow instead
   of the old full-width. Reproduce jQM's exact `button.ui-btn{width:100%}` (specificity
   0,1,1 beats bootstrap-ish `.btn`). Inline buttons (ui-btn-inline / header / footer)
   keep natural width — same-specificity rule placed AFTER so it wins. */
button.ui-btn,
input.ui-btn {
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
}
button.ui-btn-inline,
input.ui-btn-inline,
.ui-header button.ui-btn,
.ui-footer button.ui-btn { width: auto; }

/* ---- Text inputs / textarea ----------------------------------------------
   jQM wrapped every text-type <input>/<textarea> not opted out (data-role="none")
   in a full-width .ui-input-text field (1px border, rounded, inset shadow) and set
   the inner control to display:block; width:100%. With jQM gone they fall back to
   small native inline boxes (Account/ChangePassword, Login, ...). Reproduce the field
   look directly on the control (there is no wrapper element now). Non-text types
   (checkbox/radio/button/submit/reset/file/range/color/image/hidden) were NOT
   enhanced. :where() keeps zero specificity so page-specific input CSS still wins. */
input:where(:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="hidden"]):not([data-role="none"])),
textarea:where(:not([data-role="none"])) {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: .5em 0;
    min-height: 2.2em;
    padding: .4em;
    line-height: 1.4em;
    border: 1px solid #ccc;
    border-radius: .3125em;
    background: #fff;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
    color: #333;
    font-size: 14px;
    outline: 0;
}

/* inline (shrink-to-fit) — jQM made ANY data-inline="true" button inline, not just
   data-role="button". Match button-like elements with data-inline plus ui-btn-inline. */
[data-role="button"][data-inline="true"],
button[data-inline="true"],
a[data-inline="true"],
input[data-inline="true"],
.ui-btn-inline {
    display: inline-block;
    width: auto;
    margin: .25em;
    vertical-align: middle;
}

/* active / primary button — jQM theme-a active was blue (overridden by any
   inline brand color the markup sets). */
.ui-btn-active {
    background: #3388cc;
    border-color: #2e7bbd;
    color: #fff !important;
}

/* jQM rendered its enhanced buttons bold. The app's inline `.btn-white{font-weight:
   normal}` (loaded after this file, same specificity) beat jqm-compat's `.ui-btn`, so
   jQM-enhanced .btn-white buttons — the RequisitionDetails "Back" link and popup
   "Cancel" links — rendered normal-weight instead of the old bold. Reassert bold with a
   2-token selector (beats the single-class .btn-white rule without !important), scoped
   to jQM-enhanced btn-white (ui-btn or data-role="button"); data-role="none" btn-white
   stays normal, matching the old app. */
.btn-white.ui-btn,
.btn-white[data-role="button"] { font-weight: bold; }

/* jQM visual modifiers used in markup */
.ui-corner-all { border-radius: .3125em; }
/* jquery-ui.css (loaded right after this file) also defines `.ui-corner-all`, but at
   3px; jQM used .3125em (5px). On buttons that collision made corners 3px instead of
   the pre-removal 5px. Reassert the jQM radius with a 2-class selector so it wins over
   jQuery UI's single-class rule without needing !important. */
.ui-btn.ui-corner-all,
[data-role="button"].ui-corner-all { border-radius: .3125em; }
.ui-shadow { box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.ui-shadow-inset { box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2); }
.ui-mini { font-size: 12.5px; }
.ui-btn-right { float: right; }
.ui-link { cursor: pointer; }

/* disabled */
.ui-disabled,
.ui-state-disabled,
[data-role="button"][disabled],
.ui-btn[disabled] {
    opacity: .55;
    cursor: default;
    pointer-events: none;
}

/* ---- Selects -------------------------------------------------------------
   jQM rendered every <select> that wasn't opted out (data-role="none") as a
   full-width styled "selectmenu" button with a chevron. 143 of the app's 219
   selects were enhanced this way, so as bare native selects they look shrunken.
   Reproduce the jQM look on those (leave data-role="none" selects native).
   The jQuery UI datepicker's month/year dropdowns (.ui-datepicker-month /
   .ui-datepicker-year) are generated without data-role="none"; the full-width
   display:block treatment stacked them onto separate lines in the calendar
   header, so exclude them here and let them render as native inline selects. */
select:not([data-role="none"]):not(.ui-datepicker-month):not(.ui-datepicker-year) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: .55em 2.2em .55em .7em;
    border: 1px solid #ccc;
    border-radius: .3125em;
    background-color: #f6f6f6;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23555' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .65em center;
    background-size: 1em;
    color: #333;
    font-size: 16px;
    line-height: 1.3;
    cursor: pointer;
}
select:not([data-role="none"])[data-inline="true"] {
    display: inline-block;
    width: auto;
    min-width: 10em;
}
select:not([data-role="none"])[data-mini="true"] {
    font-size: 13px;
    padding-top: .4em;
    padding-bottom: .4em;
}
/* DataTables builds its "Show [N] entries" length <select> dynamically after page
   load, so jQM never enhanced it — keep it small/inline/native, not a full-width
   selectmenu (otherwise "Show / N / entries" breaks onto three lines). */
.dataTables_length select,
label select[name$="_length"],
select[name$="_length"] {
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
    display: inline-block;
    width: auto;
    min-width: 0;
    padding: 1px 4px;
    border: 1px solid #aaa;
    border-radius: 2px;
    background-image: none;
    background-color: #fff;
    font-size: inherit;
}

/* ---- Popups: data-role="popup" modals + overlay --------------------------
   Hidden until opened. jQM used to wrap each popup in a hidden .ui-popup-container,
   so a page could safely set `#thePopup { display:flex }` (as _ResultEntryPopup.cshtml
   does for #popupResultEntry) — that ID rule styled the INNER content while jQM's
   wrapper kept it hidden. With jQM gone the popup div is top-level, and that
   ID-level rule (specificity 100) beats a plain `[data-role="popup"]{display:none}`
   (specificity 10), leaking the popup inline. Guard the hidden state with
   :not(.jqm-popup-open) + !important so no page ID rule can override it; likewise
   force the open-state fixed-centering with !important (pages set
   `#id{position:relative}` expecting jQM's container to do the positioning). */
[data-role="popup"]:not(.jqm-popup-open) { display: none !important; }

[data-role="popup"].jqm-popup-open {
    display: block;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    /* jQM modals read larger/roomier than a shrink-wrapped box: give a comfortable
       floor width so short confirm-style popups aren't cramped, and more padding so
       content-driven popups (e.g. the 600px barcode form) match the old app. */
    min-width: 480px;
    max-width: 90vw;
    max-height: 90vh;
    overflow: auto;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .3);
    padding: 28px;
    z-index: 100000;
}

/* jQM pinned a popup's close button (a.ui-btn-right, the "×" icon) absolutely to
   the popup's top-right corner. Our .ui-btn-right is only `float: right`, and since
   the close <a> sits in the markup AFTER the <h2> title block, the float drops down
   and lands beside the first content row instead of the corner. Position it absolutely
   so it matches the old app. Scoped to a popup's direct-child close button. */
[data-role="popup"] > .ui-btn-right {
    position: absolute;
    top: 10px;
    right: 10px;
    float: none;
    margin: 0;
    z-index: 1;
}

/* Barcode popup (#popupByScan in Worksheet Details / DetailsInput / Create): center
   the "Enter barcode" title so it lines up with its centered Value/input/Confirm body.
   The close button is absolutely positioned, so centering the title doesn't shift it. */
#popupByScan > h2 { text-align: center; }

.jqm-popup-overlay {
    display: none;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    /* jQM's default popup screen dims only faintly; .4 was far darker than the old
       app. Match jQM's light dim so the backdrop looks the same as before. */
    background: rgba(0, 0, 0, .1);
    z-index: 99999;
}
.jqm-popup-overlay.jqm-open { display: block; }

/* ---- Loading spinner: $.mobile.loading('show'|'hide') -------------------- */
.jqm-loading {
    display: none;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .2);
    z-index: 100001;
}
.jqm-loading-box {
    background: #1f1f1f;
    color: #fff;
    padding: 16px 20px;
    border-radius: 6px;
    text-align: center;
}
.jqm-spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid rgba(255, 255, 255, .3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: jqm-spin .8s linear infinite;
}
.jqm-loading-text { display: block; margin-top: 8px; }
@keyframes jqm-spin { to { transform: rotate(360deg); } }

/* ---- Icons: jQM data-icon (only data-icon="delete", all data-iconpos="notext"
   — the "×" close buttons on popups). Render the glyph; hide the label text that
   jQM used to hide for icon-only buttons. -------------------------------------- */
/* jQM rendered an icon-only button as a round ~30px grey circle. The old popups' "×"
   close is exactly that; reproduce the circle (was a bare glyph before) so it matches. */
[data-icon="delete"][data-iconpos="notext"] {
    display: inline-block;
    box-sizing: border-box;
    width: 30px;
    height: 30px;
    min-width: 0;
    padding: 0;
    border: 1px solid #ccc;
    border-radius: 50%;
    background: #f6f6f6;
    font-size: 0;               /* hide the "Close" label text */
    text-align: center;
    line-height: 28px;
    vertical-align: middle;
}
[data-icon="delete"][data-iconpos="notext"]::before {
    content: "\2715";           /* ✕ */
    font-size: 15px;
    font-weight: bold;
    line-height: 28px;
    color: #454545;
}
[data-icon="delete"]:not([data-iconpos="notext"])::before {
    content: "\2715 ";
    margin-right: .3em;
}

/* ---- Grid: jQM ui-grid-a (2-col) / ui-block-* (few uses) ------------------ */
.ui-grid-a { display: flex; flex-wrap: wrap; }
.ui-grid-a > .ui-block-a,
.ui-grid-a > .ui-block-b { box-sizing: border-box; width: 50%; }

/* ---- Collapsible: data-role="collapsible" (behavior added in jqm-compat.js) -- */
[data-role="collapsible"] > .jqm-collapsible-heading {
    cursor: pointer;
    user-select: none;
}
[data-role="collapsible"] > .jqm-collapsible-heading::before {
    content: "\2013\00a0";      /* – expanded */
    display: inline-block;
    width: 1em;
    font-weight: bold;
}
[data-role="collapsible"].jqm-collapsed > .jqm-collapsible-heading::before {
    content: "+\00a0";          /* + collapsed */
}