/* tracportal-dialog-fixups.css
 *
 * Loaded LAST after jQuery UI 1.13 base + base2 overrides. Forces the
 * specific dialog and overlay look the app had under jQuery UI 1.8:
 *   - Titlebar: grey-blue background matching the app's chrome
 *   - Overlay: black at 50% opacity, covers the full viewport including
 *     scrolled-away areas (1.13's default is position:fixed with 100%
 *     height, but some base2 rules were shortening it; explicit inset:0
 *     is the belt-and-suspenders form)
 *
 * These use !important on background because jQuery UI 1.13's own rules
 * for .ui-widget-header set the background via a more specific compound
 * selector (.ui-widget.ui-widget-content etc.) and beat plain
 * .ui-dialog-titlebar in the cascade.
 */

.ui-dialog .ui-dialog-titlebar,
.ui-dialog.ui-widget .ui-dialog-titlebar {
    background: #BAC0C9 !important;
    color: #000023;
    border: 0 !important;
    border-radius: 0;
}

.ui-dialog .ui-dialog-titlebar .ui-dialog-title {
    color: #000023;
}

/* Modal overlay — cover the entire viewport (fixed) at 50% black.
 * `inset:0` is shorthand for top/right/bottom/left all 0. */
.ui-widget-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    background: #000 !important;
    opacity: 0.5 !important;
}

/* Close button: absolutely-positioned 20x20 in the titlebar. Renders a
 * plain unicode "×" via ::before instead of the jQuery UI icon sprite.
 * Bootstrap 5's CSS + jQuery UI 1.13's own icon styling collide in ways
 * that make the sprite approach fragile; the ::before technique needs
 * no image, no compound-selector specificity gymnastics.
 */
.ui-dialog .ui-dialog-titlebar-close,
.ui-dialog.ui-widget .ui-dialog-titlebar-close,
.ui-dialog .ui-dialog-titlebar-close.ui-state-hover,
.ui-dialog .ui-dialog-titlebar-close.ui-state-focus,
.ui-dialog .ui-dialog-titlebar-close.ui-state-active,
.ui-dialog .ui-dialog-titlebar-close:hover,
.ui-dialog .ui-dialog-titlebar-close:focus,
.ui-dialog .ui-dialog-titlebar-close:focus-visible,
.ui-dialog .ui-dialog-titlebar-close:active {
    position: absolute !important;
    top: 50% !important;
    right: 10px !important;
    width: 20px !important;
    height: 20px !important;
    margin: -10px 0 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    display: block !important;
    /* Kill the "Close" text jQuery UI puts in the button so only our × shows. */
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
}

/* Hide the jQuery UI icon spans — we're drawing the X ourselves via ::before. */
.ui-dialog .ui-dialog-titlebar-close .ui-icon,
.ui-dialog .ui-dialog-titlebar-close .ui-button-icon,
.ui-dialog .ui-dialog-titlebar-close .ui-button-icon-space {
    display: none !important;
}

/* The X itself. transform-based centering avoids margin math. */
.ui-dialog .ui-dialog-titlebar-close::before {
    content: "\00d7";  /* × U+00D7 MULTIPLICATION SIGN */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    line-height: 1;
    font-weight: bold;
    color: #000023;
    font-family: Arial, sans-serif;
}
.ui-dialog .ui-dialog-titlebar-close:hover::before {
    color: #B22222;
}