/*
 * QEN-8704 — Processing Request popup chrome (LoadingModal.ascx → #loadingIMG)
 * Figma node 133:9184 ("Q88 Account & Tools").
 *
 * Originally lived in components.css under body.sidebar-nav scope (commit
 * 7c784a4b). Split out into its own file so it can also be registered by
 * Blank.master.cs — iframe pages (AttachDocs.aspx, EditQuestionAnswer.aspx,
 * QuestionnaireContactDetails.aspx, …) fire LoadingModal on their own async
 * postbacks and were still rendering the legacy yellow loadingBG.png chrome.
 *
 * Scope: unscoped #loadingIMG. The file is gated at registration time
 * (Config.EnableRefreshedFrontend + portal 0/1/2) — same gate as components.css.
 *
 * !important is required on a few properties to beat MainWhiteout.css:2839's
 * `background: url(...) !important; height: 110px !important` longhand.
 * Avoids the css-shorthand-var-important-parser-trap by using
 * background-color: + background-image: longhand.
 */

.modalBackground {
    /* MainWhiteout.css sets `opacity: 0.7` on this same class (paired there with
     * its own `background-color: Gray`). We don't redeclare background-color,
     * so without resetting opacity too, that legacy 0.7 keeps applying to the
     * *element*, multiplying against this rgba alpha: 0.4 * 0.7 = 0.28 effective
     * dim instead of the intended 0.4. Background content (e.g. a grid pager
     * sitting behind a popup) stays legible enough to visually compete with the
     * popup's own footer buttons. Reset to 1 so the rgba alpha is the only thing
     * controlling the dim. */
    opacity: 1;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

@keyframes q88-spin {
    to { transform: rotate(360deg); }
}

/* `.loadingIMG` (class) is the ASPxGridView LoadingPanel skin
 * (App_Themes/Default/ASPxGridView.skin) — fires on every grid callback
 * including column resize. `#loadingIMG` (id) is LoadingModal.ascx. Both
 * shapes painted here so resize/sort/filter on legacy DX grids no longer
 * surfaces the ship-wheel loadingBG.png chrome. */
#loadingIMG,
.loadingIMG {
    background-color: #ffffff !important;
    background-image: none !important;
    /* No !important on display: DevExpress ASPxGridView toggles inline
     * `display: none` <-> `display: block` directly on .loadingIMG to hide/show
     * its panel. External !important would pin the panel visible forever. Inline
     * style has higher specificity than non-important external CSS, so visibility
     * still works. Main.css/MainWhiteout.css set `display: inline-block` without
     * !important, so cascade order (loading-modal.css loads later) wins here. */
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: auto !important;
    height: auto !important;
    padding: 16px !important;
    border: 1px solid var(--border-subtle, #e2e8f0);
    border-radius: 8px;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -2px rgba(0, 0, 0, 0.1);
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    color: var(--text-primary, #0f172a);
    text-align: left;
}

/* Hide every real child — LoadingModal.ascx's inline JS toggles
 * `divNotIE.style.display = "block"` on every async postback, so a per-id
 * `display: none !important` is fragile (inline style runs after the cascade
 * settles and re-paints the legacy ship-wheel gif beside the new chrome,
 * duplicating "Processing Request"). Hiding all direct children leaves only
 * the ::before spinner + ::after label visible. Same treatment hides the
 * DevExpress ASPxGridView LoadingPanel's inner <tbody>/<img>/text. */
#loadingIMG > *,
.loadingIMG > * {
    display: none !important;
}

#loadingIMG::before,
.loadingIMG::before {
    content: '';
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    background-color: var(--text-primary, #0f172a);
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12a9 9 0 1 1-6.219-8.56'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12a9 9 0 1 1-6.219-8.56'/></svg>");
    -webkit-mask-size: 24px 24px;
    mask-size: 24px 24px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    animation: q88-spin 0.8s linear infinite;
}

#loadingIMG::after,
.loadingIMG::after {
    content: 'Processing Request';
    white-space: nowrap;
}