/* App overrides for the stock jQuery UI theme.
 *
 * Loaded AFTER js/jquery.ui/themes/1.14.2Theme/jquery-ui-1.14.2.css so a theme regeneration (or a
 * version bump) never silently reverts these. Keep it to rules that must survive a vendor theme swap.
 * ------------------------------------------------------------------------------------------------ */

/* STACKING. jQuery UI gives every floating widget the class .ui-front and ships it at z-index: 100.
 * The widget appends its menu to the nearest .ui-front / <dialog> ancestor and, failing that, to
 * document.body -- so on an ordinary page an autocomplete menu lands on <body> at z-index 100.
 *
 * That is far below this application's chrome, which stacks very high for historical reasons:
 *
 *     .ac_results (the OLD autocomplete plugin's dropdown)   99999   css/default.css
 *     .modal-backdrop                                        99990   css/bs5-custom.css
 *     .modal                                                100000   css/bs5-custom.css
 *     --bs-popover-zindex                                   100005   css/bs5-custom.css
 *     assorted site chrome                                1000-10000 css/default.css, css/main.css
 *
 * The symptom is an autocomplete that works on some pages and appears to do nothing on others: the
 * request succeeds and the rows come back, but the menu paints behind whatever overlaps it. It is not
 * intermittent -- it depends on what happens to sit under that input on a given page.
 *
 * This never arose before because the jQuery UI build this app used to load (1.9.1, custom) did not
 * include the autocomplete widget at all; the 2008 plugin drew its own .ac_results list, and that list
 * was given z-index 99999 for exactly this reason. This restores the same intent for its replacement.
 *
 * 100010 clears BS5's modal (100000) and popover (100005) so a menu opened from an input INSIDE a
 * modal still renders above it -- which is the whole point of a transient dropdown. */
.ui-front {
    z-index: 100010;
}

/* THE OLD PLUGIN'S LIST GOES ABOVE A DIALOG TOO (owner report, 2026-10-10: Billing Item Management > Edit Billing Item
 * "is not loading the list of projects"). .ui-front is not only the autocomplete widget's class: every jQuery UI DIALOG
 * carries it, so the rule above lifted every dialog to 100010 -- over .ac_results (99999, css/default.css), the list
 * the 2008 plugin (radpiAutocomplete, behind ViewHelperSelectCombobox's searching comboboxes) appends to <body>. The
 * project list in the edit dialog did open, with every project in it, but it painted BEHIND the dialog, so clicking
 * the arrow appeared to do nothing. RADPI's 1.9.1 dialogs sat near 1000, under the list. RADPI PARITY RESTORED.
 *
 * 100014: above a dialog (100010) and the BS5 modal and tooltip stack, below jquery.impromptu's blocking prompt
 * (100015/100016, css/bs5-custom.css) -- a transient list over everything except the one thing that is modal and
 * blocking. It is the FLOOR: jQuery UI raises a dialog one above its highest visible sibling on every click, without
 * limit, so js/jquery.autocomplete.js lifts the list one above the dialog its box is in whenever that dialog has
 * climbed past this. */
.ac_results {
    z-index: 100014;
}

/* WIDGET SHADOW. jQuery UI 1.12 replaced the old image-and-opacity shadow with a real box-shadow, and
 * the value stock Cupertino 1.14.2 generates is FULLY OPAQUE BLACK offset up and to the left:
 *
 *     1.9.1 (what this app used to ship)
 *         .ui-widget-shadow { margin:-7px 0 0 -7px; padding:7px; background:#000 url(...);
 *                             opacity:.3; border-radius:8px; }      <- 30% opaque, a soft haze
 *     1.14.2 (stock)
 *         .ui-widget-shadow { box-shadow: -7px -7px 7px #000000; }   <- 100% opaque black slab
 *
 * jQuery UI puts this class on the tooltip element, so every text-input tooltip (Display.TextToolTips
 * binds one to `:text`, i.e. most inputs on the site) picked up a hard black rectangle sitting up-left
 * of the bubble. Measured in Chrome before this override: `rgb(0,0,0) -7px -7px 7px 0px`.
 *
 * Restoring the old alpha keeps the offset and blur the new theme intends while bringing the weight
 * back to what the app rendered for years. Fixing the CLASS rather than just `.ui-tooltip` means any
 * other widget the theme decides to shadow is covered too. */
.ui-widget-shadow {
    box-shadow: -7px -7px 7px rgba(0, 0, 0, 0.3);
}

/* TOOLTIP SHADOW. On top of the above, the 1.9.1 theme gave the tooltip its own softer, centred
 * shadow (`.ui-tooltip { box-shadow: 0 0 5px #aaa; }`) which stock 1.14.2 drops entirely. Restoring it
 * reproduces the pre-upgrade look exactly, and it also suppresses css/default.css:3782
 * (`.ui-tooltip { box-shadow: 0 0 7px black; }`) -- a RADPI rule that was ALSO never visible before,
 * because the old theme loaded after default.css and overrode it. Same story for .ui-tooltipWarning
 * (default.css:3789, `0 0 7px red`): the warning bubble carries both classes and the theme's
 * `.ui-tooltip` rule won there too. This file loads after the theme, so it is the right place to
 * pin the intent without editing either the vendor theme or the original RADPI stylesheet. */
.ui-tooltip {
    box-shadow: 0 0 5px #aaa;
}

/* AUTOCOMPLETE MENU SIZING. jQuery UI sizes its menu from the widest row --
 *     _resizeMenu: outerWidth(Math.max(contentWidth + 1, this.element.outerWidth()))
 * -- and ships `position: { collision: "none" }`, meaning the menu is NEVER nudged back into the
 * viewport. Together those put the menu off the right edge of the page for any input sitting near it
 * (the go-to-project box on the project Overview page is the clearest case).
 *
 * The 2008 plugin this replaced behaved differently: it defaulted to `width: 0`, which made the list
 * exactly the input's width (jquery.autocomplete.js:793), with `max-height: 200px; overflow: auto` on
 * the list (themes/radpi/jquery.autocomplete.css). RADPI's dropdown therefore always lined up with its
 * input and scrolled instead of growing.
 *
 * The width is pinned back to the input in RADPI/Autocomplete.js (_resizeMenu is a method, not an
 * option, so it cannot be set from here); these rules restore the rest: the scroll cap, and wrapping
 * so a long label folds inside the menu instead of being clipped by overflow. */
.ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    /* Belt-and-braces: even if a caller overrides the width, never exceed the viewport. */
    max-width: 90vw;
}

.ui-autocomplete .ui-menu-item-wrapper {
    white-space: normal;
    overflow-wrap: break-word;
}