/* =============================================================
   A2W app-wide tint — DO11961
   --------------------------------------------------------------
   Replaces DevExpress's neutral-grey app-wrapper background
   (normally --dxds-color-surface-neutral-default-hovered = #f4f4f3)
   with a very tenuous tint of the current Fluent accent. The
   tint propagates across all areas that inherit the wrapper
   background: behind the ribbon tabs (Home/View/Tools), behind
   the listview grid, behind detail views, etc.

   Scope target: .app.main-ribbon-template — the outermost
   content wrapper rendered by the XAF Blazor main template.
   ============================================================= */
/* DevExpress ships a rule at specificity (0,0,3,0):
     .dxbl-theme-fluent .main-ribbon-template.app { background: ... }
   We match the Fluent theme scope so our override wins on specificity. */
.dxbl-theme-fluent .app.main-ribbon-template {
    /* Accent percentage for the app-wide surface tint. Bump up for
       a more saturated look, down for a more neutral one. 4% reads
       as "nearly white with a hint of brand color" on Rust/Rose/
       Orchid presets; on Storm/Steel it stays near-grey. */
    --a2w-app-accent-tint: 6%;

    background-color: color-mix(
        in srgb,
        var(--dxds-color-surface-primary-default-rest) var(--a2w-app-accent-tint),
        transparent
    ) !important;
}

/* =============================================================
   Header logo — dark-mode inversion
   --------------------------------------------------------------
   The logo is a SVG set as background-image by the Razor template
   via an inline style (.header-left-side > div). SVGs served as
   background-image can't be re-tinted from outside CSS, so in dark
   mode we invert the rendered pixels and rotate hues 180° — the
   net effect on a flat logo (black text + saturated accent colour)
   is: black → white, red/blue/etc. → preserved.
   Assumes the logo is light-mode designed (dark strokes on
   transparent bg). A logo already designed for dark mode would
   be over-inverted — in that case migrate to a dedicated
   *-dark.svg asset and drop this rule.
   ============================================================= */
body.dxbl-theme-dark .header-left-side > div {
    filter: invert(1) hue-rotate(180deg);
}

/* =============================================================
   Manual buttons — download-manual-section
   --------------------------------------------------------------
   Compact icon+label buttons in the header toolbar area.
   Styled to blend with the XAF Fluent header rather than
   standing out as full Bootstrap card/buttons.
   ============================================================= */
.download-manual-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    background: transparent;
    border: none !important;
}

body.dxbl-theme-dark .helpButton > img {
    filter: invert(1) brightness(2);
}

.download-manual-section .helpButton {
   cursor: pointer;
}

.download-manual-section .helpButton:hover {
    background-color: color-mix( in srgb, var(--dxds-color-surface-primary-default-hovered) 30%, transparent);
    border-color: color-mix( in srgb, var(--dxds-color-border-primary-default-hovered) 40%, transparent );
}

/* Dark mode adjustments */
body.dxbl-theme-dark .download-manual-section .helpButton {
    border-color: var(--dxds-color-border-neutral-default-rest);
    color: var(--dxds-color-text-neutral-default-rest);
}

/* =============================================================
   Timezone badge — header right side
   Pill shape with accent color tint, modern look.
   ============================================================= */
.a2w-badge {
    height: 26px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px 3px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 500;
    white-space: nowrap;
    align-self: center;
    margin: 0 2px;
    color: var(--dxds-color-text-primary-default-rest);
    background-color: color-mix( in srgb, var(--dxds-color-surface-primary-default-rest) 20%, transparent );
    border: 1px solid color-mix( in srgb, var(--dxds-color-surface-primary-default-rest) 40%, transparent );
    backdrop-filter: blur(4px);
}

.theme-settings{
    padding-left: 0 !important;
}