/* ==========================================================================
   alert-box.css — site-wide AlertBox popup chrome (QEN-8865)

   Loaded by BOTH Default.master.cs and Blank.master.cs. These rules used to
   live in components.css, but Blank.master (every LoadControl.aspx /
   window.open popup) does NOT load components.css, so alerts raised inside a
   popup window kept rendering the legacy navy band + yellow body — e.g. the
   Officer Matrix "Compliance Status" window (body.popup-omcompliance), whose
   Compliance Settings save emits `SessionManager.AlertInfo = new AlertInfoDTO
   (…, AlertType.Success)` from OfficerMatrixComplianceSettings.ascx.cs:175.
   Same split-out pattern as loading-modal.css and icon-swaps.css.

   Two render paths share the same legacy class chrome:
     (a) JS-injected `<div id="alertBoxJS">` from Portal.BusinessLayer/
         GeneralBusiness.cs:433 (synchronous server-built alert HTML),
     (b) AlertBox.ascx codebehind via `panelAlert` (PopupControlExtender
         pceAB), mounted on Default.Master:155 + Blank.Master:20 — its
         rendered ID ends in `_alertbox_panelAlert` (ASP.NET naming).
   Both paths emit `.modTitlePopup BGv{2|6|8} + .modTLeft + .modTRight`
   etc., so one rule set covers both — scoped via `:is(#alertBoxJS,
   [id$="_alertbox_panelAlert"])`. The `[id$=]` form follows the existing
   naming-container pattern (see memory: aspnet-naming-container-id-
   selectors) — `[id$="_alertbox_panelAlert"]` is narrow enough to match
   only the AlertBox instance without colliding with other `panelAlert`
   IDs in the codebase.

   Legacy rendering: ModuleTemplate with a 800px-wide table, a coloured
   title band (`modTitlePopup BGv8` for Success → navy `--brand-accent`,
   `BGv6` for Error, `BGv2` for Info) and a `BGv4` yellow message body
   (`pnlM`) holding a bold `lblCustomMessage`. Icon comes from a legacy
   sprite `/images/icons/alertSuccessSmall.png` and the close link uses
   `/images/icons/close_red.gif`.

   Refresh: collapse the two coloured bands into a single white card
   (Figma node 366:11058 "Saved successfully") — slate border, 8px radius,
   md drop-shadow, 16px padding. Replace the icon sprite with a circular
   teal check mask and the close gif with a Lucide X mask. Body text
   normalises to slate-800 / regular weight; the inline "click here"
   anchor stays teal via the existing `--text-link` token.
   ========================================================================== */
body.sidebar-nav :is(#alertBoxJS, [id$="_alertbox_panelAlert"]) table.modContainerStd,
body.sidebar-nav :is(#alertBoxJS, [id$="_alertbox_panelAlert"]) .modContainerStd {
    width: auto !important;
    min-width: 360px;
    max-width: 520px;
    border-collapse: separate;
    background: transparent !important;
}

body.sidebar-nav :is(#alertBoxJS, [id$="_alertbox_panelAlert"]) .modAboveLeft,
body.sidebar-nav :is(#alertBoxJS, [id$="_alertbox_panelAlert"]) .modAboveRight,
body.sidebar-nav :is(#alertBoxJS, [id$="_alertbox_panelAlert"]) .modBelowLeft,
body.sidebar-nav :is(#alertBoxJS, [id$="_alertbox_panelAlert"]) .modBelowRight,
body.sidebar-nav :is(#alertBoxJS, [id$="_alertbox_panelAlert"]) .modTitleHeader,
body.sidebar-nav :is(#alertBoxJS, [id$="_alertbox_panelAlert"]) .modSub1,
body.sidebar-nav :is(#alertBoxJS, [id$="_alertbox_panelAlert"]) .modFooter2 {
    display: none !important;
}

body.sidebar-nav :is(#alertBoxJS, [id$="_alertbox_panelAlert"]) .modInnerContainer {
    background-color: var(--surface-card, #ffffff) !important;
    border: 1px solid var(--border-subtle, #e2e8f0) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    /* !important because page stylesheets flatten the legacy ModuleTemplate
       chrome wholesale and catch the alert card as collateral — e.g.
       popupQuestionnaireSide.css:408 `body.popup-omcompliance .modInnerContainer
       { padding: 0 !important }`, which left the card's text flush against its
       own border on the Officer Matrix Compliance Status window. Our selector
       out-specifies those (it carries an id), so !important is enough. */
    padding: 16px !important;
    overflow: hidden;
}

/* JS render path only: GeneralBusiness.GeneratePopupContent hard-codes
   `style="width:700px"` on `.modInnerContainer` and there is no
   `.modContainerStd` wrapper to carry the 360–520px clamp above, so the card
   rendered near-full-width. `max-width` beats the inline `width` without
   needing !important; `box-sizing` keeps the 16px padding inside the clamp. */
body.sidebar-nav #alertBoxJS .modInnerContainer {
    box-sizing: border-box;
    max-width: 520px;
}

/* The legacy wrapper is `position:absolute; left:0; top:0` (MainWhiteout.css),
   which pinned the flat card hard against the viewport corner and clipped its
   own border-radius + drop-shadow. Inset it; `border-box` keeps the legacy
   `width:99%` from overflowing once padding is added. */
body.sidebar-nav #alertBoxJS {
    box-sizing: border-box;
    padding: 12px;
}

/* Title row — flatten the legacy coloured band; let the icon + label sit
   inline with the close X right-aligned. */
body.sidebar-nav :is(#alertBoxJS, [id$="_alertbox_panelAlert"]) .modTitle,
body.sidebar-nav :is(#alertBoxJS, [id$="_alertbox_panelAlert"]) .modTitlePopup,
body.sidebar-nav :is(#alertBoxJS, [id$="_alertbox_panelAlert"]) .modTitlePopup.BGv8,
body.sidebar-nav :is(#alertBoxJS, [id$="_alertbox_panelAlert"]) .modTitlePopup.BGv6,
body.sidebar-nav :is(#alertBoxJS, [id$="_alertbox_panelAlert"]) .modTitlePopup.BGv2,
body.sidebar-nav :is(#alertBoxJS, [id$="_alertbox_panelAlert"]) .modTitlePopup.BGv4 {
    background-color: transparent !important;
    background-image: none !important;
    color: var(--text-primary, #1e293b) !important;
    border: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    overflow: visible;
}

body.sidebar-nav :is(#alertBoxJS, [id$="_alertbox_panelAlert"]) .modTLeft {
    float: none !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-primary, #1e293b);
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}

body.sidebar-nav :is(#alertBoxJS, [id$="_alertbox_panelAlert"]) .modTRight {
    float: none !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
}

/* Icon — hide the legacy sprite (alertSuccessSmall / alertErrorSmall /
   alertInfoSmall) and render a Figma-spec 16px filled chip on `.modTLeft::before`.
   Default chip uses the Lucide Check (Success); Error and Info variants override
   the SVG and circle colour below. The white stroke is baked into the data-URI
   so a single `background-image` draws the glyph over the circle fill — no
   mask-composite tricks.

   Two render paths emit the legacy icon differently:
     - AlertBox.ascx codebehind: `<img id="..._imgAlert">` (ASP.NET-named id)
     - GeneralBusiness.cs JS popup: bare `<img src="/images/icons/alertSuccessSmall.png">`
       with no id.
   Hide any <img> inside `.modTLeft` so both paths drop the black sprite
   before the green ::before chip paints. */
body.sidebar-nav :is(#alertBoxJS, [id$="_alertbox_panelAlert"]) .modTLeft img {
    display: none !important;
}

body.sidebar-nav :is(#alertBoxJS, [id$="_alertbox_panelAlert"]) .modTLeft::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border-radius: 9999px;
    background-color: var(--text-primary, #1e293b);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: 10px 10px;
    background-position: center;
    background-repeat: no-repeat;
}

/* Error + Information variants (AlertType.Error → `modTitlePopup BGv6`,
   AlertType.Information → `modTitlePopup BGv2`). Figma node 368:7961 renders
   BOTH with the same monochrome Lucide "Info" glyph (727:8988 / 374:7997
   "Icon / 16px / Info") in slate-800 #1e293b — a transparent-fill OUTLINE
   icon, NOT a red filled triangle (error) or teal filled circle (info). The
   only error/info difference in the Figma is the title text. Pixel-sampled
   #1e293b for the stroke (= base/accent-foreground, same token as the Success
   chip fill + title text). The 24-viewBox circle (r=10) drawn at 16px box →
   13.33px circle, matching the Figma icon's 13.333px vector exactly. */
body.sidebar-nav :is(#alertBoxJS, [id$="_alertbox_panelAlert"]) .modTitlePopup.BGv6 .modTLeft::before,
body.sidebar-nav :is(#alertBoxJS, [id$="_alertbox_panelAlert"]) .modTitlePopup.BGv2 .modTLeft::before {
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e293b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
    background-size: 16px 16px;
}

/* NoImage variant (AlertType.NoImage → `modTitlePopup BGv4`) — codebehind
   nulls out TitleLeft/TitleRight and hides `imgAlert.Visible`, so the
   title row is empty. Collapse it so the card renders body-only without a
   leading 8px gap. */
body.sidebar-nav :is(#alertBoxJS, [id$="_alertbox_panelAlert"]) .modTitlePopup.BGv4:empty,
body.sidebar-nav :is(#alertBoxJS, [id$="_alertbox_panelAlert"]) .modTitlePopup.BGv4:not(:has(.modTLeft)) {
    display: none !important;
}

/* Close X — hide the legacy close_red.gif and draw a Lucide X on the parent
   container via background-image. Masking the <img> directly only clips its
   own pixels (the gif still contributes), so the source needs to disappear
   before the chrome can read crisply.

   Two render paths to cover:
     (a) AlertBox.ascx wraps the close img in an `<a>` (anchor click target).
     (b) GeneralBusiness.GeneratePopupContent emits a bare `<img id="alertBoxJSClose">`
         directly inside `.modTRight` — no anchor (the cursor:pointer is inline
         and the dismissal handler is bound by JS to the img element itself).
   Both selectors run the same chrome — when there's no anchor, we paint the
   X on .modTRight itself; when there is, we paint it on the anchor. */
body.sidebar-nav :is(#alertBoxJS, [id$="_alertbox_panelAlert"]) .modTRight img {
    display: none !important;
}

body.sidebar-nav :is(#alertBoxJS, [id$="_alertbox_panelAlert"]) .modTRight a,
body.sidebar-nav :is(#alertBoxJS, [id$="_alertbox_panelAlert"]) .modTRight:not(:has(> a)) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: var(--raw-radius-sm, 4px);
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e293b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
    background-size: 12px 12px;
    background-position: center;
    background-repeat: no-repeat;
    color: transparent;
    text-decoration: none;
    cursor: pointer;
}

body.sidebar-nav :is(#alertBoxJS, [id$="_alertbox_panelAlert"]) .modTRight a:hover,
body.sidebar-nav :is(#alertBoxJS, [id$="_alertbox_panelAlert"]) .modTRight:not(:has(> a)):hover {
    background-color: var(--surface-hover, #f1f5f9);
}

/* Message body — drop the yellow BGv4 / bold-everywhere chrome, render
   as plain card text. The inline "click here" anchor inside the message
   inherits `--text-link` from the questionnaire/Phase 2 token cascade. */
body.sidebar-nav :is(#alertBoxJS, [id$="_alertbox_panelAlert"]) .modMain {
    padding: 0 !important;
    /* `.modMain` defaults to white from the legacy ModuleTemplate chrome; left
       unset it paints a white inner panel on top of the #f8fafc card surface,
       creating a two-tone box. Neutralise it so the card reads as one uniform
       surface (Figma 368:7961 cards are a single flat fill). */
    background-color: transparent !important;
}

body.sidebar-nav :is(#alertBoxJS, [id$="_alertbox_panelAlert"]) .modMain .BGv4,
body.sidebar-nav :is(#alertBoxJS, [id$="_alertbox_panelAlert"]) [id$="_pnlM"] {
    background-color: transparent !important;
    padding: 0 !important;
    color: var(--text-primary, #1e293b);
    font-size: 16px;
    line-height: 24px;
}

/* Normalise the message body — both render paths hard-code `font-weight: bold`
   via inline style on the message span. The Figma card uses regular weight
   for the primary message. Inline styles win unless we !important the
   override.
     - AlertBox.ascx codebehind emits `span#..._lblCustomMessage`
     - GeneralBusiness.cs JS popup emits a bare `<span style="font-weight: bold">`
       inside `#popupMessageContainer`
   Header + red labels retain bold below (intentionally emphatic for
   multi-error blocks and red error callouts). */
body.sidebar-nav :is(#alertBoxJS, [id$="_alertbox_panelAlert"]) .modMain span[id$="_lblCustomMessage"],
body.sidebar-nav #alertBoxJS #popupMessageContainer,
body.sidebar-nav #alertBoxJS #popupMessageContainer > span {
    font-weight: 400 !important;
    color: var(--text-primary, #1e293b);
}

/* `lblCustomHeader` carries text like "Please correct the following
   error(s):" — keep it bold as a sub-heading inside the body. */
body.sidebar-nav :is(#alertBoxJS, [id$="_alertbox_panelAlert"]) .modMain span[id$="_lblCustomHeader"] {
    font-weight: 600 !important;
    color: var(--text-primary, #1e293b);
    display: block;
    margin-bottom: 4px;
}

/* `lblCustomMessageRed` carries a separate red-coloured emphasis line —
   keep bold + red. */
body.sidebar-nav :is(#alertBoxJS, [id$="_alertbox_panelAlert"]) .modMain span[id$="_lblCustomMessageRed"] {
    font-weight: 600 !important;
    color: var(--status-error, #dc2626) !important;
    display: block;
    margin-top: 4px;
}

body.sidebar-nav :is(#alertBoxJS, [id$="_alertbox_panelAlert"]) .modMain a {
    color: var(--text-link, #0d9488);
    text-decoration: underline;
}

body.sidebar-nav :is(#alertBoxJS, [id$="_alertbox_panelAlert"]) .modMain a:hover {
    color: var(--text-link-hover, #0f766e);
}

/* Drop the AjaxToolkit DropShadowExtender's manual shadow divs — our
   card has its own box-shadow now. */
body.sidebar-nav :is(#alertBoxJS, [id$="_alertbox_panelAlert"]) > div[id*="_dse"],
body.sidebar-nav :is(#alertBoxJS, [id$="_alertbox_panelAlert"]) .ajax__dropshadow_panel {
    display: none !important;
}

/* The same DropShadowExtender also sets an inline `box-shadow` directly on
   panelAlert itself (not just via the sibling shadow div above). Stacked on
   top of .modInnerContainer's own box-shadow, the two mismatched
   shadows/borders read as a malformed, jagged popup outline. */
body.sidebar-nav :is(#alertBoxJS, [id$="_alertbox_panelAlert"]) {
    box-shadow: none !important;
}