/* ==========================================================================
   iCloneU — Shared popup chrome (Phase 2 of Knowledge UI harmonization)
   --------------------------------------------------------------------------
   Apply `CssClass="icu-popup"` to any DxPopup and the header / body / footer
   inherit the standardized look used across Experts, Dashboard and the
   Knowledge surfaces:

   - Soft brand-purple shadow + 10px radius
   - Section-style header title with bottom divider
   - Right-aligned footer button row with consistent gap + padding
   - All chrome colors via --icu-* design tokens so light + dark modes work
     automatically (site.css overrides --icu-* in body[data-theme="dark"])

   The DxPopup DOM (from observation, DevExpress.Blazor v25.x):

       .dxbl-popup                <- outer wrapper (we receive CssClass here)
         └─ .dxbl-popup-window
              ├─ .dxbl-popup-header       (rendered when HeaderText set)
              │     ├─ .dxbl-popup-header-text
              │     └─ .dxbl-btn-popup-close-button (when ShowCloseButton=true)
              ├─ .dxbl-popup-content / .dxbl-popup-body
              └─ .dxbl-popup-footer       (rendered when ShowFooter=true)

   We target the same DOM via `.icu-popup ...` descendants so applying the
   class doesn't require any other DxPopup parameter changes. Pair with
   `<IcuPopupFooter>` for the footer button row.
   ========================================================================== */

/* ---- Outer chrome ----------------------------------------------------- */
.icu-popup .dxbl-popup-window {
    border-radius: var(--icu-radius-lg) !important;
    box-shadow: var(--icu-shadow-lg) !important;
    overflow: hidden;   /* keep rounded corners against the header's bg */
}

/* ---- Header ----------------------------------------------------------- */
.icu-popup .dxbl-popup-header {
    padding: 16px 20px 14px 20px !important;
    border-bottom: 1px solid var(--icu-line) !important;
    background: var(--icu-surface) !important;
    color: var(--icu-ink) !important;
    font-family: var(--icu-font-sans) !important;
    font-size: var(--icu-fs-lg) !important;
    font-weight: var(--icu-fw-semibold) !important;
    line-height: 1.3 !important;
    letter-spacing: -0.005em;
}

.icu-popup .dxbl-popup-header .dxbl-popup-header-text {
    color: var(--icu-ink) !important;
    font-size: var(--icu-fs-lg) !important;
    font-weight: var(--icu-fw-semibold) !important;
}

/* Close button — quiet ink-3 default, brand on hover. DxPopup ships two
   class names for the close button across versions; cover both. */
.icu-popup .dxbl-popup-header .dxbl-btn-popup-close-button,
.icu-popup .dxbl-popup-header .dxbl-popup-close-button {
    color: var(--icu-ink-3) !important;
    background: transparent !important;
    border: none !important;
    border-radius: var(--icu-radius-sm) !important;
    transition: color 0.12s ease, background-color 0.12s ease;
}

.icu-popup .dxbl-popup-header .dxbl-btn-popup-close-button:hover,
.icu-popup .dxbl-popup-header .dxbl-popup-close-button:hover {
    color: var(--icu-brand) !important;
    background: var(--icu-brand-50) !important;
}

/* ---- Body ------------------------------------------------------------- */
.icu-popup .dxbl-popup-body,
.icu-popup .dxbl-popup-content {
    padding: 20px !important;
    background: var(--icu-surface) !important;
    color: var(--icu-ink) !important;
}

/* If a popup needs flush-to-edge content (a grid that scrolls, an embedded
   iframe), the caller can opt out with a second class:
       <DxPopup CssClass="icu-popup icu-popup--flush" ...>
   The body padding collapses and the caller manages its own inner spacing. */
.icu-popup.icu-popup--flush .dxbl-popup-body,
.icu-popup.icu-popup--flush .dxbl-popup-content {
    padding: 0 !important;
}

/* ---- Footer ----------------------------------------------------------- */
.icu-popup .dxbl-popup-footer {
    /* 12px vertical matches DevExpress's allocated footer height —
       a previous experiment bumped this to 16px to give DxButton
       more breathing room, but the taller footer caused the button
       to overflow the popup's rounded bottom edge. Stick with 12px. */
    padding: 12px 20px !important;
    border-top: 1px solid var(--icu-line) !important;
    background: var(--icu-surface) !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Buttons in the footer get a consistent minimum width so two-button rows
   align visually — Cancel + Save shouldn't be wildly different widths. */
.icu-popup .dxbl-popup-footer .dxbl-btn {
    min-width: 100px;
}

/* If a caller embeds extra content on the LEFT of the footer (a status line,
   a "Don't show again" checkbox, page-count text), wrap it in
   `.icu-popup-footer-aside` and it'll occupy the far-left side while the
   action buttons stay right-aligned. */
.icu-popup .dxbl-popup-footer .icu-popup-footer-aside {
    margin-right: auto;
    color: var(--icu-ink-3);
    font-size: var(--icu-fs-sm);
}

/* ---- Blurred backdrop modifier --------------------------------------
   Adds the BuyUnits / AddPaymentMethod-style dark + frosted-glass scrim
   behind the popup. DxPopup renders its backdrop as
   `.dxbl-modal > .dxbl-modal-back`; the inline opacity/back-bg defaults
   produce a flat 50% black overlay, so we override both and layer a
   `backdrop-filter: blur(2px)` on top to match the rest of the site's
   modal chrome.

       <DxPopup CssClass="icu-popup icu-popup-blurred …">

   Pair with `icu-popup` (which styles header / body / footer) for the
   full modal treatment. */
.dxbl-modal:has(.icu-popup-blurred) > .dxbl-modal-back {
    background-color: rgba(20, 15, 30, 0.5);
    opacity: 1;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}