html, body {
    height: 100%;
}

app {
    display: block;
    height: 100%;
}

/*
    Application logo shown in the main header and on the logon page. XAF Blazor
    renders an empty <div class="header-logo"> and leaves its appearance to this
    stylesheet. The default template masks a single colour logo with
    currentColor, but the MAX4METS logo is two colours (navy and orange),
    so it is drawn as a background image and scaled to fit the 3.1rem header.
    The 14.4rem width matches the logo's 1048:163.5 aspect ratio at 2.25rem high.
*/
.header-logo {
    flex-shrink: 0;
    background-image: url('../images/Logo.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 14.4rem;
    height: 2.25rem;
}

/*
    Splash screen shown while the Blazor circuit starts. The XAF SplashScreen
    component draws a spinning ring around a disc that holds the image from
    _Host.cshtml, with a caption underneath. The template fills the disc with
    the theme's primary colour for a white monogram; the "M4X" mark from the
    MAX4METS icon is navy and orange, so the disc is kept white and the mark
    enlarged to fill it.
    The theme's bg-primary rule is marked !important, hence the override here.
*/
.loading-image-wrapper {
    background-color: #fff !important;
}

/*
    The SplashScreen component writes its own .loading-image size (46px by
    30px) in an inline <style> after this stylesheet, so a plain .loading-image
    rule loses on source order; the wrapper class raises the specificity.
*/
.loading-image-wrapper .loading-image {
    width: 80px;
    height: 80px;
}

.loading-caption {
    color: #1c2c54;
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

#blazor-error-ui {
    background: inherit;
    bottom: 0;
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100001;
}

.core-job-status {
    display: inline-block;
    min-width: 1.25rem;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}

.core-job-status--in-progress {
    color: #118ab2;
    animation: core-job-status-spin 1.2s linear infinite;
}

.core-job-status--queued {
    color: #073b4c;
    animation: core-job-status-fade 1.5s ease-in-out infinite;
}

.core-job-status--successful {
    color: #06a77d;
}

.core-job-status--warning {
    color: #d96c22;
}

.core-job-status--failed {
    color: #d9365e;
}

.core-job-status--unknown {
    color: currentColor;
}

@keyframes core-job-status-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes core-job-status-fade {
    50% {
        opacity: 0.35;
    }
}

@media (prefers-reduced-motion: reduce) {
    .core-job-status--in-progress,
    .core-job-status--queued {
        animation: none;
    }
}

/*
    Working actions (SHARED-3187).

    A toolbar action that stands for a queued or running background job, such as
    "Updating Inventories", carries the working-action class on its toolbar item
    (see WorkingActionStyle in Core.Xaf.Xpo.Module.Blazor).
    XAF renders the item as a <button class="dxbl-btn dxbl-toolbar-item ...">
    holding an <img class="xaf-toolbar-item-icon"> and a plain <span> caption, and
    DevExpress places the item's CSS class on that button. The Web Forms
    application animates the same class with Font Awesome's spin and fade
    keyframes; here the job status keyframes above are reused. The icon is
    restored to full colour so the spinner is not muted by the toolbar hover rules
    further down, and the caption pulses so the label reads as "in progress" too.
*/
.dxbl-toolbar-item.working-action .xaf-toolbar-item-icon {
    animation: core-job-status-spin 2s linear infinite;
    filter: none;
    opacity: 1;
}

.dxbl-toolbar-item.working-action > span {
    animation: core-job-status-fade 2s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .dxbl-toolbar-item.working-action .xaf-toolbar-item-icon,
    .dxbl-toolbar-item.working-action > span {
        animation: none;
    }
}

/*
    Current jobs indicator in the application header (SHARED-3186). While jobs
    are queued or running, Core.Xaf.Xpo.Module.Blazor's
    CurrentJobsHeaderWindowController shows a "loading" action captioned with
    the job count in the header's CurrentJobs container and marks its toolbar
    item with core-working-action. The icon spins and the caption pulses, the
    animation the Web Forms header gives the same action through its
    working-action class, so the eye is drawn to work still in progress.
*/
.core-working-action .xaf-toolbar-item-icon {
    animation: core-working-action-spin 2s linear infinite;
}

/* The caption is a bare span next to the icon inside the toolbar button. */
.core-working-action > span {
    animation: core-working-action-fade 2s ease-in-out infinite;
}

@keyframes core-working-action-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes core-working-action-fade {
    50% {
        opacity: 0.4;
    }
}

@media (prefers-reduced-motion: reduce) {
    .core-working-action .xaf-toolbar-item-icon,
    .core-working-action > span {
        animation: none;
    }
}

/*
    ============================================================================
    MAX visual refinements (SHARED-3166)
    ============================================================================
    The application ships with the DevExpress Fluent Light theme (selected in
    appsettings.json under DevExpress:ExpressApp:ThemeSwitcher). The rules below
    sit on top of that theme and tune the XAF Blazor shell so the interface reads
    as one calm surface instead of a collection of bordered boxes:

    - the theme accent is a lighter shade of the MAX orange, so buttons, focus
      rings, selection and the tab indicator carry the brand without the
      saturation of the old Office White primary;
    - navigation and grid links are no longer underlined, and group captions are
      set as quiet section headings;
    - toolbar actions are drawn as flat buttons that gain a background on hover,
      with their icons muted until hovered, so a toolbar reads as one bar rather
      than a row of boxes;
    - the tab strip gets space between icon and caption and a light close glyph.

    Only shell chrome is touched; editors, grids and dialogs keep the theme's
    own behaviour so DevExpress upgrades stay low risk.
*/
:root {
    /*
        Brand colours. The navy and orange are taken from Logo.svg; the accent
        is a lighter shade of the website orange (max4mets.com.au uses #ff6900)
        so the theme is unmistakably MAX without the saturation of the old
        Office White primary.
    */
    --max-navy: #1c2c54;
    --max-orange: #fe7109;
    --max-accent: #ff8040;

    /*
        Greys come from the Bootstrap 5.3 tokens each DevExpress theme defines,
        so the chrome below follows whichever theme the user picks.
    */
    --max-text-muted: var(--bs-secondary-color);
    --max-hairline: var(--bs-border-color);
    --max-surface-alt: var(--bs-tertiary-bg);

    /*
        The colour the active theme paints its primary surfaces with - its
        buttons, its active pager button, its selection. Every DevExpress theme
        declares it as Bootstrap's --bs-primary and pairs it with white text on
        its own primary button, whatever hue it is: Blazing Dark #9b17e2,
        Purple #7989ff, Office White #fe7109. The one exception is the Fluent
        themes, which hard-code --bs-primary to a blue they do not actually
        paint with and derive everything from --dxbl-accent-color instead; the
        rule further down puts that right, so this token is the effective
        primary under every theme.
    */
    --max-theme-primary: var(--bs-primary);

    /*
        The Fluent themes derive every primary shade (buttons, focus rings,
        selection, active pager button, links) from this one variable, so
        overriding it re-brands the whole theme without per-component rules.
        Other themes ignore it.
    */
    --dxbl-accent-color: var(--max-accent);

    /*
        Grid header row (SHARED-3220). The Web Forms application fills every
        grid's header row with its theme's base colour and sets the captions in
        white, so the Blazor band follows the active theme's primary rather
        than a fixed hue: under Blazing Dark it is that theme's purple, not an
        orange that belongs to no other part of the page (SHARED-3220
        follow-up). White captions are what every theme puts on its own primary
        button, so they follow the fill. The rule colour is the hairline
        between header cells and is a translucent white so it works over any
        fill in both the light and dark themes.
    */
    --max-grid-header-bg: var(--max-theme-primary);
    --max-grid-header-color: #fff;
    --max-grid-header-rule: rgba(255, 255, 255, 0.35);
}

/*
    The Fluent themes are the exception to --max-theme-primary above. They
    ignore Bootstrap's primary tokens - hard-coding them to a blue nothing on
    the page is painted with - and derive every primary shade from
    --dxbl-accent-color, which the block above brands with the MAX orange. So
    under Fluent, and only under Fluent, Bootstrap's tokens are pointed at the
    accent as well: XAF still uses the Bootstrap utilities for the splash
    screen ring (border-primary), the loading spinner (text-primary) and the
    splash disc (bg-primary), which would otherwise stay Fluent blue. The RGB
    triple must be kept in sync with --max-accent because Bootstrap combines it
    with an opacity.

    The active theme is read from the stylesheet the XAF theme switcher places
    in <head>, the same way the dark themes are detected below.
*/
html:has(head > link[href*="fluent-"]) {
    --bs-primary: var(--max-accent);
    --bs-primary-rgb: 255, 128, 64;

    /*
        --max-accent is a light orange, chosen in SHARED-3166 to keep buttons
        and focus rings from shouting. As a solid band behind white captions it
        is too pale, so the Fluent grid header keeps the deeper orange the Web
        Forms application fills its headers with - the XafFlatTheme baseColor
        configured in MAX.Web/Web.config. The other themes need no such
        adjustment: their primaries are already dark enough to carry the white
        captions they put on their own primary buttons.
    */
    --max-grid-header-bg: #e65c00;
}

/*
    Dark themes. The DevExpress dark themes do not set color-scheme, so the
    active theme is detected from the stylesheet the XAF theme switcher places
    in <head>. The orange accent already reads on a dark surface, so only the
    navy used for text is lifted to a tint that stays legible, and the header
    logo is inverted with its hue restored, which turns the navy pale blue
    while the orange stays orange.
*/
html:has(head > link[href*="-dark."]) {
    --max-navy: #8fa6e6;
}

html:has(head > link[href*="-dark."]) .header-logo {
    filter: invert(1) hue-rotate(180deg);
}

/* ---- Editors ------------------------------------------------------------ */

/*
    Fluent draws a dark "underline" along the bottom edge of every text editor,
    combo box and lookup. Against the light borders on the other three sides it
    reads as a heavy rule under each field, so the underline takes the same
    colour as the rest of the border. The rule matches the theme's own base
    selector so its more specific focused and validation states still win:
    the focused editor keeps the accent underline and an invalid one stays red.
*/
.dxbl-text-edit {
    --dxbl-text-edit-underline-color: var(--dxbl-text-edit-border-color);
}

/* ---- Header ------------------------------------------------------------- */

/* A hairline under the header instead of a drop shadow keeps the top edge quiet. */
.header.shadow-sm {
    box-shadow: none !important;
    border-bottom: 1px solid var(--max-hairline);
}

/* ---- Navigation pane ---------------------------------------------------- */

/*
    A faint tint separates the navigation pane from the content without a
    shadow, and the pane is a little wider than XAF's 270px so longer entry
    captions such as "Inventory Balances Dashboard" fit on one line.
*/
.sidebar,
.header-left-side {
    width: 300px;
    min-width: 300px;
}

.sidebar {
    background-color: var(--max-surface-alt);
    box-shadow: none;
    border-right: 1px solid var(--max-hairline);
}

/* On phones XAF slides the pane over the content; the dimmed area starts where it ends. */
@media (max-width: 575.98px) {
    .header-left-side {
        width: auto;
        min-width: auto;
    }

    .collapse-toggle .sidebar-sm-shadow {
        left: 300px;
    }
}

/*
    XAF enlarges each entry's click target with an absolutely positioned
    .xaf-navigation-link-click-area that fills its nearest positioned ancestor.
    The older themes make the entry's anchor that ancestor; Fluent does not, so
    the overlay grew to the size of the whole group and the last entry's
    overlay covered the entries above it, which made clicks land on the wrong
    entry or nowhere. Positioning the anchor confines each overlay to its own
    entry under every theme.
*/
.sidebar .xaf-nav-item .dxbl-accordion-item-content {
    position: relative;
}

/*
    Navigation entries are links, but underlining every one of them is noise.
    The selector mirrors the XAF rule that adds the underline so it outranks it.
*/
.sidebar .clickable-xaf-nav-item > a .xaf-nav-link,
.sidebar .clickable-xaf-nav-item > div > a .xaf-nav-link,
.sidebar a.dxbl-accordion-item-content,
.sidebar a.dxbl-accordion-item-content:hover {
    text-decoration: none;
}

/* Group captions read as quiet section headings rather than bold rows. */
.sidebar .dxbl-accordion-group > .dxbl-accordion-group-header .xaf-nav-link {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--max-text-muted);
}

/*
    Tighter vertical rhythm. Fluent gives each group heading 6px of padding
    around a 32px expand button and each entry a 32px row; the headings are
    now small uppercase text and do not need that much air. The expand button
    sets the heading's height, so it is shortened too, which brings a
    collapsed group from 44px to 32px.
*/
.sidebar .dxbl-accordion-group > .dxbl-accordion-group-header {
    padding-top: 0;
    padding-bottom: 0;
}

.sidebar .dxbl-accordion-group > .dxbl-accordion-group-header > .dxbl-accordion-item-content {
    min-height: 0;
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
}

.sidebar .dxbl-accordion-group > .dxbl-accordion-group-header .dxbl-group-expand-btn {
    height: 1.75rem;
    min-height: 1.75rem;
    padding-top: 0;
    padding-bottom: 0;
}

.sidebar .dxbl-accordion-group > .dxbl-accordion-group-header .dxbl-accordion-item-text-container {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.sidebar .clickable-xaf-nav-item > a.dxbl-accordion-item-content {
    min-height: 1.75rem;
    height: 1.75rem;
}

/*
    The current view is marked with the brand orange on the left edge. The
    marker sits on the link itself because the theme paints the highlight
    background there, which would otherwise cover it.
*/
.sidebar a.dxbl-accordion-item-content.dxbl-active {
    box-shadow: inset 3px 0 0 var(--max-orange);
}

.sidebar .xaf-nav-item.dxbl-accordion-item.dxbl-active .xaf-nav-link {
    font-weight: 600;
    color: var(--max-navy);
}

/* ---- Tab strip ---------------------------------------------------------- */

/* The Fluent theme leaves no room between a tab's icon and its caption. */
.xaf-tabbed-mdi .xaf-tab-header-template .xaf-layout-tab-icon {
    margin-right: 0.45rem;
}

/*
    XAF draws the tab close button from its "Delete" image, which renders as a
    solid dot at 12px. Replace it with a light multiplication sign that is
    only fully visible on the active or hovered tab.
*/
.xaf-tabbed-mdi .xaf-close-tab-button {
    margin-left: 0.35rem;
    opacity: 0.45;
    transition: opacity 0.15s ease-in-out;
}

.xaf-tabbed-mdi .dxbl-tabs-item:hover .xaf-close-tab-button,
.xaf-tabbed-mdi .dxbl-tabs-item.dxbl-active .xaf-close-tab-button,
.xaf-tabbed-mdi .xaf-close-tab-button:focus-visible {
    opacity: 1;
}

.xaf-tabbed-mdi .xaf-close-tab-button .xaf-image {
    -webkit-mask: none !important;
    mask: none !important;
    background-color: transparent !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
}

.xaf-tabbed-mdi .xaf-close-tab-button .xaf-image::before {
    content: "\00d7";
}

/* ---- Toolbars ----------------------------------------------------------- */

/*
    Secondary actions (everything except Save) lose their box until hovered.
    Split buttons keep a faint divider between the action and its drop-down.
*/
.main-toolbar .dxbl-toolbar-item.dxbl-btn-secondary,
.nested-toolbar .dxbl-toolbar-item.dxbl-btn-secondary,
.main-toolbar .dxbl-toolbar-item .dxbl-btn-secondary,
.nested-toolbar .dxbl-toolbar-item .dxbl-btn-secondary {
    --dxbl-btn-bg: transparent;
    --dxbl-btn-border-color: transparent;
    --dxbl-btn-box-shadow: none;
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
}

.main-toolbar .dxbl-btn-group .dxbl-toolbar-item.dxbl-btn-secondary + .dxbl-toolbar-item.dxbl-btn-secondary,
.nested-toolbar .dxbl-btn-group .dxbl-toolbar-item.dxbl-btn-secondary + .dxbl-toolbar-item.dxbl-btn-secondary {
    border-left-color: var(--max-hairline);
}

/*
    Action icons are multi-colour bitmaps. Muting them until hover keeps the
    eye on the captions; the icon regains its colour when it is about to be used.
*/
.main-toolbar .xaf-toolbar-item-icon,
.nested-toolbar .xaf-toolbar-item-icon {
    filter: grayscale(1);
    opacity: 0.6;
    transition: filter 0.15s ease-in-out, opacity 0.15s ease-in-out;
}

.main-toolbar .dxbl-toolbar-item:hover .xaf-toolbar-item-icon,
.nested-toolbar .dxbl-toolbar-item:hover .xaf-toolbar-item-icon,
.main-toolbar .dxbl-toolbar-item:focus-within .xaf-toolbar-item-icon,
.nested-toolbar .dxbl-toolbar-item:focus-within .xaf-toolbar-item-icon {
    filter: none;
    opacity: 1;
}

/* The primary action stays a solid button and its icon stays legible on navy. */
.main-toolbar .dxbl-btn-primary .xaf-toolbar-item-icon,
.nested-toolbar .dxbl-btn-primary .xaf-toolbar-item-icon {
    filter: grayscale(1) brightness(1.8);
    opacity: 1;
}

/* ---- Detail view layout groups ----------------------------------------- */

/* Group captions become section headings with a hairline underneath. */
.main-content dxbl-group-control:not(.dxbl-accordion-group) > .dxbl-group-header > .dxbl-text {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--max-text-muted);
    border-bottom: 1px solid var(--max-hairline);
    padding-bottom: 0.35rem;
}

/* ---- Grids -------------------------------------------------------------- */

/* Reference columns render as links; show the underline only on hover. */
.dxbl-grid a {
    text-decoration: none;
}

.dxbl-grid a:hover {
    text-decoration: underline;
}

/*
    Header rows (SHARED-3220). The Web Forms application draws a grid's header
    row as a solid band of the theme's base colour with the captions in white,
    bold and upper case, and separates the header cells with a hairline. The
    Fluent themes instead leave the header transparent and, until this rule,
    site.css muted the captions further, so a Blazor list view opened with no
    visible band at all and the columns were hard to pick out from the data.

    The theme paints the band from --dxbl-grid-header-bg and the captions from
    --dxbl-grid-header-color, both defined on .dxbl-grid, so redefining them at
    the same specificity re-colours every grid - list views, nested list views
    on a detail view and the list views XAF opens in a pop-up alike - without
    touching the theme's row, hover, focus and selection colours, which come
    from other variables.
*/
.dxbl-grid {
    --dxbl-grid-header-bg: var(--max-grid-header-bg);
    --dxbl-grid-header-color: var(--max-grid-header-color);
    --dxbl-grid-header-font-weight: 700;
}

/*
    A fixed (pinned) column's header is a sticky cell, and the theme paints
    every sticky cell in the grid background so a scrolled data row cannot show
    through it. That rule is more specific than the header rule above, so a
    pinned column's header would be the only white gap in the band.
*/
.dxbl-grid .dxbl-grid-table > thead .dxbl-grid-header-row > th.dxbl-grid-fixed-cell:not(.dxbl-grid-empty-cell) {
    background: var(--dxbl-grid-header-bg);
}

/*
    When the columns do not use the whole width of the grid, the grid puts a
    spacer cell after the last one. The theme leaves it unpainted, which cut
    the band off part way across; filling it as well makes the header one band
    from edge to edge, as the Web Forms header is. Only the header row's spacer
    is filled - the spacer beside a data row stays the row colour.
*/
.dxbl-grid .dxbl-grid-table > thead .dxbl-grid-header-row > th.dxbl-grid-empty-cell {
    background-color: var(--dxbl-grid-header-bg);
}

/*
    Captions are set in upper case, as the Web Forms headers are. They take
    their colour from the header cell rather than naming it, so the sort arrow
    and any other glyph beside them - all of which are drawn with
    `fill: currentcolor` - follow the same colour.
*/
.dxbl-grid .dxbl-grid-header-row .dxbl-grid-header-content,
.dxbl-grid .dxbl-grid-header-row .dxbl-grid-header-content .dxbl-text {
    color: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/*
    A hairline between header cells, which is how the Web Forms header shows
    where one column ends and the next begins. The empty cell the grid adds
    after the last column, and the indent cells it adds in front of a grouped
    grid, carry no caption and are left without a rule so the band does not end
    in a stray line.
*/
.dxbl-grid .dxbl-grid-table > thead .dxbl-grid-header-row > th:not(.dxbl-grid-empty-cell) + th:not(.dxbl-grid-empty-cell, .dxbl-grid-indent-cell) {
    border-left: 1px solid var(--max-grid-header-rule);
}

/*
    The filter funnel is a button with its own colours, so unlike the sort
    arrow it does not follow the header text. It is drawn in the header colour,
    faded back until the header is hovered so a row of funnels does not compete
    with the captions, and gains a translucent white background on hover
    instead of the theme's grey, which would disappear into the band.
*/
.dxbl-grid .dxbl-grid-header-row .dxbl-btn.dxbl-grid-filter-menu-funnel-btn {
    --dxbl-btn-color: var(--max-grid-header-color);
    --dxbl-btn-bg: transparent;
    --dxbl-btn-border-color: transparent;
    --dxbl-btn-hover-color: var(--max-grid-header-color);
    --dxbl-btn-hover-bg: rgba(255, 255, 255, 0.2);
    --dxbl-btn-hover-background: none;
    --dxbl-btn-hover-border-color: transparent;
    opacity: 0.65;
    transition: opacity 0.15s ease-in-out;
}

.dxbl-grid .dxbl-grid-header-row > th:hover .dxbl-btn.dxbl-grid-filter-menu-funnel-btn,
.dxbl-grid .dxbl-grid-header-row .dxbl-btn.dxbl-grid-filter-menu-funnel-btn:focus-visible,
.dxbl-grid .dxbl-grid-header-row .dxbl-btn.dxbl-grid-filter-menu-funnel-btn.dxbl-grid-filter-menu-funnel-btn-active,
.dxbl-grid .dxbl-grid-header-row .dxbl-btn.dxbl-grid-filter-menu-funnel-btn.dxbl-grid-filter-menu-funnel-btn-filled {
    opacity: 1;
}

/*
    The "select all" check box sits in the header band. The theme draws an
    unchecked box as a dark hairline square, which all but vanishes on the
    fill, so the box is outlined in the header colour and a ticked box is
    filled with it, with the tick itself in the fill colour.
*/
.dxbl-grid .dxbl-grid-header-row .dxbl-checkbox {
    --dxbl-checkbox-primary-unchecked-check-element-bg: transparent;
    --dxbl-checkbox-primary-unchecked-check-element-border: var(--max-grid-header-color);
    --dxbl-checkbox-primary-unchecked-hover-check-element-border: var(--max-grid-header-color);
    --dxbl-checkbox-check-element-primary-unchecked-hover-bg: rgba(255, 255, 255, 0.2);
    --dxbl-checkbox-primary-checked-check-element-bg: var(--max-grid-header-color);
    --dxbl-checkbox-primary-checked-check-element-border: var(--max-grid-header-color);
    --dxbl-checkbox-primary-checked-hover-check-element-bg: var(--max-grid-header-color);
    --dxbl-checkbox-primary-checked-hover-check-element-border: var(--max-grid-header-color);
    --dxbl-checkbox-check-element-check-icon-primary-color: var(--max-grid-header-bg);
    --dxbl-checkbox-indeterminate-check-element-bg: var(--max-grid-header-color);
    --dxbl-checkbox-indeterminate-hover-check-element-bg: var(--max-grid-header-color);
}

/*
    Every second data row steps back slightly, as the Web Forms grids do. The
    class is put on alternate rows by Core.Xaf.Xpo.Module.Blazor's
    AlternatingRowGridListEditorViewController. The theme paints each row from
    --dxbl-grid-row-bg, so redefining that variable on the marked rows leaves
    the theme's hover, focus and selection colours, which use other variables
    and more specific rules, untouched. The tint is a light shade of the
    active theme's primary, mixed into the grid background so it follows both
    the light and dark themes and stays well below the selection colour, and
    so a striped row belongs to the same colour as the header band above it
    rather than carrying an orange the rest of the theme does not use.
*/
.dxbl-grid .dxbl-grid-table > tbody > tr.xaf-alternating-row {
    --dxbl-grid-row-bg: color-mix(in srgb, var(--max-theme-primary) 8%, var(--dxbl-grid-bg));
}

/*
    A hairline between data cells, again as the Web Forms grids draw one
    (SHARED-3220). The Fluent themes rule off the rows but not the columns, so
    a wide list view with several short values read as one run of text; the
    line makes each value belong to the column its header names. The theme's
    own border colour is used, so it is the same hairline the rows are ruled
    off with and it follows whichever theme is picked.

    The cells that span the whole grid rather than sitting in a column are left
    alone: the spacer after the last column, the indent cells in front of a
    grouped row, an expanded row's detail or edit form, and the "no data to
    display" area.
*/
.dxbl-grid .dxbl-grid-table > tbody > tr > td:not(.dxbl-grid-empty-cell, .dxbl-grid-indent-cell, .dxbl-grid-detail-cell, .dxbl-grid-edit-form, .dxbl-grid-empty-data-area) + td:not(.dxbl-grid-empty-cell, .dxbl-grid-indent-cell, .dxbl-grid-detail-cell, .dxbl-grid-edit-form, .dxbl-grid-empty-data-area) {
    border-left: 1px solid var(--dxbl-grid-border-color);
}

/* ---- Report viewer ------------------------------------------------------ */

/*
    The report viewer paints its side tab strip, the border around the report
    page, focus outlines and its progress bar in the theme primary colour,
    which is the accent orange and far too loud around a document. The side
    strip becomes a neutral panel with muted icons, and the remaining primary
    uses are tinted towards the page background so they read as a hint of the
    brand rather than a frame.
*/
.dxbrv-wrapper {
    --dxbrv-primary-color: color-mix(in srgb, var(--max-accent) 55%, var(--bs-body-bg));
}

.dxbrv-wrapper .dxbrv-tabs {
    background-color: var(--bs-tertiary-bg);
    border-left: 1px solid var(--bs-border-color);
}

.dxbrv-wrapper .dxbrv-tabs .dxbrv-tab-icon {
    color: var(--bs-secondary-color);
}

.dxbrv-wrapper .dxbrv-tabs .dxbrv-active-tab {
    background: var(--bs-secondary-bg);
    background-blend-mode: normal;
}

.dxbrv-wrapper .dxbrv-tabs .dxbrv-active-tab .dxbrv-tab-icon {
    color: var(--max-accent);
}

/* The page keeps a hairline instead of a coloured border. */
.dxbrv-wrapper .dxbrv-bricks-container.dxbrv-bricks-container-border-primary {
    border-color: var(--bs-border-color);
}

/* ---- Disabled editors --------------------------------------------------- */

/*
    A disabled editor keeps the buttons it would use to change its value
    (SHARED-3217). XAF renders a read-only property - one whose setter is not
    public, one hidden behind an "AllowEdit=False" view or an appearance rule
    that disables it - as the ordinary DevExpress editor with its host element
    marked `dxbl-disabled`. The buttons inside it are rendered disabled too, so
    they do nothing, but they are still drawn: a numeric field shows its spin
    arrows, a date field its calendar icon, a combo box or lookup its chevron
    and a nullable editor its clear cross. The System Information view is the
    clearest example, where every field is read-only and every numeric and date
    field invites an edit that cannot happen.

    Hiding them leaves a plain box holding a value, which is what a disabled
    field is, and matches the Web Forms application. Each button sits in a flex
    group beside the input, so `display: none` also collapses the group and the
    input grows into the space; no width or padding needs adjusting.

    Only the value-changing buttons DevExpress itself draws are hidden. Any
    other button a property editor puts in the same group - an XAF lookup's
    "New" or "Detail" button, for instance - is left alone, because such a
    button may still be the only way to reach information from a field the user
    cannot type into.
*/
.dxbl-text-edit.dxbl-disabled .dxbl-spin-btns,
.dxbl-text-edit.dxbl-disabled .dxbl-edit-btn-dropdown,
.dxbl-text-edit.dxbl-disabled .dxbl-edit-btn-clear {
    display: none;
}