/* =============================================================
   A2W detail-view restyle — DO11961
   --------------------------------------------------------------
   Scoped under .main-content. Styles XAF Blazor DetailViews:
   form-layout group "cards" and tab widgets. Values derive from
   Fluent design-system tokens (--dxds-color-*) so accent presets
   and Light/Dark switch propagate automatically.

   Uses native CSS nesting (Chrome 112+, Firefox 117+, Safari 16.5+).
   Several rules use !important because DevExpress ships a very deep
   selector (up to specificity 0,0,8,8) for tab styling.
   ============================================================= */

.xaf-detail-view-a2w,
.main-content {
    /* ---------- Palette ----------
       Accent follows the Fluent preset/custom color picked in
       SettingsComponent. accent-weak = soft fill for header band,
       tablist, etc. accent-hover = stronger tint for tab hover. */
    --a2w-dv-accent: var(--dxds-color-surface-primary-default-rest);
    --a2w-dv-accent-weak: color-mix(in srgb, var(--a2w-dv-accent) 12%, transparent);
    --a2w-dv-accent-hover: color-mix(in srgb, var(--a2w-dv-accent) 18%, transparent);
    --a2w-dv-border: var(--dxds-color-border-neutral-default-rest);
    --a2w-dv-surface: var(--dxds-color-surface-neutral-default-rest); /* white panel */
    --a2w-dv-fg: var(--dxds-color-content-neutral-default-rest);

    /* ---------- Geometry ----------
       Single source of truth. Adjust to rescale the layer. */
    --a2w-dv-radius: 8px;            /* outer radius of card / tabs widgets */
    --a2w-dv-row-h: 36px;            /* shared height: group header & tabs */
    --a2w-dv-tab-pad-y: 6px;         /* tab vertical padding */
    --a2w-dv-tab-pad-x: 14px;        /* tab horizontal padding */
    --a2w-dv-tab-active-radius: 8px; /* top-corner radius of active tab */
    --a2w-dv-indicator-inset: 24px;  /* L/R inset of DX accent bar (default 12px) */

    /* ---------- Group header icon ----------
       2×2 "section" glyph in a 16×16 box: top-left circle filled,
       the other three outlined. Rendered via mask-image so the
       fill follows the header color (currentColor = accent). */
    --a2w-dv-icon-size: 16px;
    --a2w-dv-icon-gap: 8px;          /* space between icon and title */
    --a2w-dv-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>");

    /* ---------- Field labels ---------- */
    --a2w-dv-label-fs: 11px;
    --a2w-dv-label-fw: 600;

    /* ---------- Untitled card ----------
       Vertical padding inside an untitled-group card (no header band,
       so the fields would otherwise touch the card edges). */
    --a2w-dv-untitled-pad-y: 8px;

    /* ---------- Caption text-transform ----------
       Applied to both group header titles and field labels so the
       whole detail-view caption typography is coherent. Switch to
       "none" to revert to the original casing. */
    --a2w-dv-caption-case: uppercase;
}

/* =============================================================
   DevExpress's form-layout root (.dxbl-fl) ships with its own 1px
   border + white bg that would become an unwanted outer "frame"
   wrapping our cards. Zero it out.
   ============================================================= */
.main-content .dxbl-fl {
    border: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
}

/* =============================================================
   Detail-view section alignment + uniform spacing
   --------------------------------------------------------------
   XAF renders each top-level layout region (Main, tabbed groups,
   audit fields) as a separate .dxbl-fl under .detail-view-content.
   DX adds asymmetric padding (10px 16px) ONLY to the .dxbl-fl that
   directly holds flat fields (e.g. the Created/Updated/OId block),
   via `.dxbl-fl:has(dxbl-form-layout-item)` — which both indents
   that block right by 16px AND adds a 10px gap, while the other
   sections (groups / tabs) get none. The result is an inconsistent
   left edge and uneven vertical rhythm between sections.
   Fix: zero that padding so every section shares the same left
   edge, then add a single uniform gap between consecutive sections. */
.main-content .detail-view-content > .dxbl-fl {
    padding: 0 !important;
}

.main-content .detail-view-content > .dxbl-fl + .dxbl-fl {
    margin-top: 8px;
}

/* The top-level section column (.dxbl-col) carries a 6px lateral gutter
   padding. For sections whose card is an INNER element (titled group,
   tabs), that padding insets the card 6px from the row edge — while the
   untitled card IS the column, so it reaches the row edge. The result is
   a 6px width mismatch between sections. Drop the column gutter so every
   section's card lines up at the same (wider) edge; the untitled card
   then re-adds its own interior horizontal padding below. */
.main-content .detail-view-content > .dxbl-fl > .dxbl-row > .dxbl-col {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* =============================================================
   Card frame — shared base
   --------------------------------------------------------------
   Three surfaces get the same 1px-bordered rounded card:
   1) Titled form groups (.dxbl-fl-group > .dxbl-group)
   2) Top-level untitled groups — .dxbl-fl > row > .dxbl-fl-group
      that does NOT contain a titled .dxbl-group at any depth
      (avoids a doubled frame; DX nests titled groups 3 levels deep)
   3) Tabs widgets (.dxbl-tabs)
   Differentiating rules (header band, internal padding, tab
   internals) follow below.
   ============================================================= */
.main-content .dxbl-fl-group > .dxbl-group,
.main-content .dxbl-fl > .dxbl-row > .dxbl-fl-group:not(:has(.dxbl-group)),
.main-content .dxbl-tabs {
    border: 1px solid var(--a2w-dv-border);
    border-radius: var(--a2w-dv-radius);
    overflow: hidden;
    background: var(--a2w-dv-surface);
}

/* Untitled card — add interior padding. Vertical because there's no
   header band; horizontal because the column gutter padding was dropped
   above (otherwise the fields would touch the card border). The lateral
   values need !important to win over the gutter-removal rule above,
   which also matches this column and carries !important. */
.main-content .dxbl-fl > .dxbl-row > .dxbl-fl-group:not(:has(.dxbl-group)) {
    padding-top: var(--a2w-dv-untitled-pad-y);
    padding-bottom: var(--a2w-dv-untitled-pad-y);
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* Titled card — accent-weak header band on top. */
.main-content .dxbl-fl-group > .dxbl-group {
    & > .dxbl-group-header.dxbl-fl-caption-tmpl {
        display: flex;
        align-items: center;
        gap: var(--a2w-dv-icon-gap);
        min-height: var(--a2w-dv-row-h);
        margin: 0;
        padding: 0 12px;
        background: var(--a2w-dv-accent-weak);
        color: var(--a2w-dv-accent);
        border-bottom: 1px solid var(--a2w-dv-border);
        border-radius: 0;            /* straight divider — outer corners come from the card */

        /* Section icon — filled/outline 2×2 glyph. */
        &::before {
            content: "";
            flex: 0 0 auto;
            width: var(--a2w-dv-icon-size);
            height: var(--a2w-dv-icon-size);
            background-color: currentColor;
            mask: var(--a2w-dv-icon-mask) center / contain no-repeat;
            -webkit-mask: var(--a2w-dv-icon-mask) center / contain no-repeat;
        }

        /* Caption text — inherit accent from the header band. */
        & > .dxbl-text {
            color: inherit;
            font-weight: 600;
            line-height: 1.3;
            text-transform: var(--a2w-dv-caption-case);
        }
    }
}

/* =============================================================
   Field captions (labels above inputs) — small + bold
   ============================================================= */
.main-content label.dxbl-fl-cpt {
    font-size: var(--a2w-dv-label-fs);
    font-weight: var(--a2w-dv-label-fw);
    text-transform: var(--a2w-dv-caption-case);
}

/* =============================================================
   Tabs widget — internals (card frame shared in the block above)
   ============================================================= */
.main-content .dxbl-tabs {
    & .dxbl-tabs-tablist {
        gap: 0;
        background-color: var(--a2w-dv-accent-weak);
        border: 0;                   /* divider moved to individual inactive tabs */

        /* DevExpress emits an inner <ul> with 2px padding (leaks
           accent-weak above/below the active tab). Zero it out. */
        & ul {
            margin: 0;
            padding: 0 !important;
        }
    }

    /* DevExpress's .dxbl-tabs-content-panel ships with its own 1px
       border, which would double up with the container border. */
    & .dxbl-tabs-content-panel {
        border: 0 !important;
    }

    & .dxbl-tabs-item {
        position: relative;
        padding: var(--a2w-dv-tab-pad-y) var(--a2w-dv-tab-pad-x) !important;
        background-color: transparent !important;
        color: var(--a2w-dv-accent) !important;
        /* DX native ::after accent bar — widen L/R inset so the bar
           shrinks ~25% versus DX default 12px. */
        --dxbl-tabs-tab-border-left: var(--a2w-dv-indicator-inset);
        --dxbl-tabs-tab-border-right: var(--a2w-dv-indicator-inset);

        /* Grey divider only under inactive tabs. Active tab carries
           a transparent bottom border so both have the same box
           height — otherwise the 1px delta leaves a sliver where the
           tablist bg or neighbour grey borders can show through. */
        &:not(.dxbl-active) {
            border-bottom: 1px solid var(--a2w-dv-border) !important;
        }

        &:hover:not(.dxbl-active) {
            background-color: var(--a2w-dv-accent-hover) !important;
        }

        &.dxbl-active {
            background-color: var(--a2w-dv-surface) !important;
            color: var(--a2w-dv-fg) !important;
            font-weight: 600;
            border-bottom: 1px solid transparent !important;
            /* Round only top corners. */
            border-radius: var(--a2w-dv-tab-active-radius) var(--a2w-dv-tab-active-radius) 0 0 !important;
        }
    }
}

/* =============================================================
   DashboardViewer — neutralize untitled-card frame + theme bg
   --------------------------------------------------------------
   DO12017: il DashboardViewer è un widget self-contained renderizzato
   come singolo .dxbl-fl-item dentro un .dxbl-fl-group "untitled".
   Lo stile "untitled card" definito sopra (border + radius + bg
   bianco + padding) lascia un bordo bianco visibile attorno alla
   dashboard. Quando il main-content contiene una .xaf-dashboard-container
   azzeriamo solo il frame del .dxbl-fl-group e l'eventuale border
   emesso da DevExpress sulla .xaf-dashboard-container.

   Inoltre: il .dx-dashboard-widget-container ha background hardcoded
   #efefef da DevExpress, che stona con il preset Fluent del tema.
   Lo riallineiamo al tono della .app (accent/6% su body bianco)
   usando un color-mix opaco — opaco e non trasparente perché in
   fullscreen mode il widget si stacca dalla pagina e una bg
   trasparente lascerebbe trasparire sidebar/header sottostanti.
   ============================================================= */
.main-content:has(.xaf-dashboard-container) .dxbl-fl-group {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
}

.main-content .xaf-dashboard-container.border {
    border: 0 !important;
}

.xaf-dashboard-container .dx-dashboard-widget-container {
    background-color: color-mix(in srgb, var(--dxds-color-surface-primary-default-rest) 6%, #fff) !important;
}