/* =============================================================
   A2W popup dialog header — DO11961
   --------------------------------------------------------------
   Styles the header of XAF Blazor popup dialogs (e.g. report
   parameters, nested DetailViews, confirmation dialogs) with the
   same visual language as DetailView group card headers:
     - accent-weak fill
     - accent-colored uppercase title
     - 2×2 circle icon on the left
     - header buttons (maximize / close) inherit the accent color

   Scope: .xafPopup — XAF-specific popup variant, so we don't
   leak styling to unrelated DX popups (tooltips, date pickers…).

   Real DOM facts (DevExpress 25.2.x):
   - popup root:  <dxbl-modal-dialog>.dxbl-popup.xafPopup
   - content:     .dxbl-modal-content
   - header:      <dxbl-popup-header>.dxbl-modal-header
   - title span:  .dxbl-modal-header-default
   - max button:  button.xaf-popup-fullscreen-toggle
   - close btn:   button.dxbl-popup-header-button
   ============================================================= */

.xafPopup .dxbl-modal-header {
    --a2w-pop-accent: var(--dxds-color-surface-primary-default-rest);
    --a2w-pop-accent-weak: color-mix(in srgb, var(--a2w-pop-accent) 12%, transparent);
    --a2w-pop-border: var(--dxds-color-border-neutral-default-rest);

    /* Local mask — kept independent of the detail-view icon so it
       can evolve separately (e.g. different glyph for popups). */
    --a2w-pop-icon-size: 16px;
    --a2w-pop-icon-gap: 8px;
    --a2w-pop-icon-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='3.5' cy='3.5' r='3.5'/><circle cx='12.5' cy='3.5' r='3' fill='none' stroke='black'/><circle cx='3.5' cy='12.5' r='3' fill='none' stroke='black'/><circle cx='12.5' cy='12.5' r='3' fill='none' stroke='black'/></svg>");

    display: flex;
    align-items: center;
    gap: var(--a2w-pop-icon-gap);
    /* Tighter than DX default (padding 24 24 12 + font 20 → ~67px).
       ~40 px total, aligned with DetailView group-card header. */
    min-height: 40px;
    padding: 0 16px !important;
    font-size: 14px;
    background-color: var(--a2w-pop-accent-weak) !important;
    color: var(--a2w-pop-accent) !important;
    border-bottom: 1px solid var(--a2w-pop-border);

    /* Section icon — 2×2 circles glyph mirroring the DetailView
       group header. Drawn via mask-image so the fill follows the
       header color (currentColor = accent). */
    &::before {
        content: "";
        flex: 0 0 auto;
        width: var(--a2w-pop-icon-size);
        height: var(--a2w-pop-icon-size);
        background-color: currentColor;
        mask: var(--a2w-pop-icon-mask) center / contain no-repeat;
        -webkit-mask: var(--a2w-pop-icon-mask) center / contain no-repeat;
    }

    /* Title — uppercase + bold, coherent with group card header. */
    & .dxbl-modal-header-default {
        flex: 1 1 auto;
        text-transform: uppercase;
        font-weight: 600;
        color: inherit;
    }

    /* Header buttons (maximize / close) — inherit accent color from
       the header band and keep a transparent background so the tint
       stays clean. */
    & button.xaf-popup-fullscreen-toggle,
    & button.dxbl-popup-header-button {
        color: currentColor !important;
        background-color: transparent !important;
    }
}

/* Small white gap between the accent-weak header and the first
   body element (DX default body padding-top is 4 px, tight). */
.xafPopup .dxbl-modal-body {
    padding-top: 12px !important;
}