html, body {
    height: 100%;
}

/* Login / boot splash screen: the XAF SplashScreen component renders the image
   inside a small (~120px) .loading-image-wrapper, which shrinks the branded
   SplashScreen.svg to ~46x30px. Enlarge the wrapper + image so the logo reads
   at demo size. Scoped to the splash wrapper so nothing else is affected. */
.loading-image-wrapper {
    width: 280px !important;
    height: 178px !important;
    max-width: 280px !important;
    max-height: 178px !important;
    /* The default XAF wrapper has a themed blue background + border-radius:50%;
       at this non-square size that rendered as a blue oval behind the logo. */
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

    .loading-image-wrapper img,
    .loading-image-wrapper .loading-image {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
    }

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

.header {
    /*border-bottom: 1px solid #dee2e6;*/ /* Adjust color as needed */
    /* Ticket 019ff3e5: the header is a flex item, so this z-index creates the stacking
       context every header dropdown (settings cog .settings-bar, account .account-main -
       both z-index 1100 INSIDE it) paints within. At 1 the whole context lost to the
       dashboards' sticky header cells (root-level z-index 5-15, compositor-promoted),
       so the cog/user menus opened BEHIND the dashboard tables. 20 beats every dashboard
       z-index (max 15) while staying below DevExpress portal popups/modals (~1000+). */
    z-index: 20; /* Ensure line is above other elements */
    min-height: 70px !important; /* Match metrics container height */
    overflow: hidden; /* Prevent content from overflowing the rounded corner */
    background-color: #ecf0f1;
}

/* Force header height to 80px even when inline styles try to set 70px */
.header[style*="min-height"] {
    min-height: 70px !important;
}

/* Override any parent container that might be constraining height */
.app .main-content-area .header,
.dxbl-header {
    min-height: 70px !important;
}

.header-right-side {
    /*border-bottom: 1px solid #dee2e6;
    border-bottom-left-radius: -8px;*/
}

/* Header toolbar buttons overlapped the account/settings icons on action-heavy detail views
   (Cost Plan: Save and Close / Save / Take Snapshot / Settings / Take Off / Help).
   DevExpress renders the toolbar's button strip (.dxbl-btn-toolbar) POSITION:ABSOLUTE, so it
   is out of flow and overflows VISIBLY: whenever the toolbar's box is narrower than the
   buttons need, the strip simply paints past the box and over whatever sits to its right.
   The box is sized purely by flex-grow (the absolute strip gives the toolbar no intrinsic
   width), so it shares the row ~50/50 with .metrics-container and does end up too narrow.

   The adaptive toolbar does re-collapse items into its overflow menu, but only after an async
   re-measure - the spill is what's on screen until then. Clipping the strip to its own box
   confines it to the space it was actually given, in every state. Popups are unaffected: they
   render in the sibling .dxbl-popup-portal, not inside the strip.

   Do NOT "fix" this by sizing the toolbar to its content (flex:0 0 auto + a static strip):
   DevExpress picks how many items to show FROM the box width, so a content-sized box freezes
   at its initial empty width and every button collapses into the overflow menu for good. */
.header-right-side > .costrix-header-toolbar > .dxbl-btn-toolbar {
    overflow: hidden;
}

.header-left-side {
    min-width: auto !important;
    width: auto !important;
}
#main-view-content {
    border-left: 1px solid #dee2e6;
    border-top: 1px solid #dee2e6;
    border-top-left-radius: 8px;
    outline: 5px solid #ecf0f1;
    outline-offset: -1px;
}
.cq-header-logo {
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url('../images/Logo.svg');
    mask: url('../images/Logo.svg');
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    width: 28px;
    height: 24px;
}

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

.highlighted-item {
    background-color: #FF3300;
    font-weight: bold;
}

.warning-item {
    color: #FF3300 !important;
    font-weight: bold !important;
}

.red-borders {
    border-bottom: 1px solid #FF3300 !important;
    border-top: 1px solid #FF3300 !important;
}

.summary-box {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
    text-align: center;
    /*margin-bottom: 10px;*/
}

    .summary-box label {
        font-weight: bold;
        display: block;
        margin-bottom: 5px;
        color: #333;
    }

    .summary-box span {
        font-size: 1.2em;
        color: #333;
    }

.demo-drawer .dxbl-drawer-content {
    font-size: var(--dxbl-drawer-panel-font-size);
    line-height: var(--dxbl-drawer-panel-line-height);
    overflow: auto;
    padding: var(--dxbl-drawer-panel-padding-y) var(--dxbl-drawer-panel-padding-x);
   
}

.demo-drawer:has(.demo-drawer-menu) {
    --dxbl-drawer-panel-body-padding-x: 0;
    --dxbl-drawer-panel-body-padding-y: 0;
}

.dxbl-menu.demo-drawer-menu {
    --dxbl-menu-item-padding-x: 0.9375rem;
    --dxbl-menu-top-left-border-radius: 0;
    --dxbl-menu-top-right-border-radius: 0;
    --dxbl-menu-bottom-left-border-radius: 0;
    --dxbl-menu-bottom-right-border-radius: 0;
}

.dxbl-sm .dxbl-menu.demo-drawer-menu {
    --dxbl-menu-item-padding-x: 0.8125rem;
}

.dxbl-lg .dxbl-menu.demo-drawer-menu {
    --dxbl-menu-item-padding-x: 1.0625rem;
}

.theme-fluent-light .dxbl-menu.demo-drawer-menu,
.theme-fluent-dark .dxbl-menu.demo-drawer-menu {
    --dxbl-menu-item-padding-y-s: var(--dxds-sizing-xs);
}

.theme-fluent-light .dxbl-btn-toolbar .dxbl-btn.demo-drawer-toggle-button,
.theme-fluent-dark .dxbl-btn-toolbar .dxbl-btn.demo-drawer-toggle-button {
    --dxbl-btn-padding-x-s: var(--dxds-sizing-s);
    --dxbl-btn-padding-x-m: var(--dxds-sizing-m);
    --dxbl-btn-padding-x-l: var(--dxds-sizing-l);
}

.demo-drawer-mini .demo-drawer-mini-menu .dxbl-menu-item-text {
    visibility: hidden;
    transition: visibility linear var(--dxbl-drawer-animation-duration);
}

.sub-heading-row {
    font-weight: bold !important;
}

.note-row {
    font-style: italic !important;
}

.universal-metric-row {
    font-style: italic !important;
    color: #467886 !important;
}

.alt-item > td:not(.dxbl-grid-empty-cell),
.alt-item > td:not(.dxbl-grid-indent-cell) {
    background-color: color-mix(in srgb, var(--bs-gray-300), transparent 80%);
}
/* Fluent Themes */
.alt-item {
    --dxbl-grid-row-bg: var(--dxds-color-surface-neutral-subdued-rest);
}


.focused-item {
    box-sizing: border-box;
    border: 1px solid black !important
}

.cut-row {
    opacity: 0.4;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 4px,
        rgba(0, 0, 0, 0.03) 4px,
        rgba(0, 0, 0, 0.03) 8px
    ) !important;
}

.cut-row > td {
    border-top: 1px dashed #999 !important;
    border-bottom: 1px dashed #999 !important;
}


.dxbl-dropdown-dialog {
    min-width: auto !important;
    width: auto !important;
}

.cq-menuitem {
    padding: 10px 10px 10px 10px;
    border-radius: 6px;
}

    .cq-menuitem:hover {
        background-color: lightsteelblue;
        cursor: pointer;
    }

.cq-menusubitem {
    border-radius: 8px;
    list-style: none;
    line-height: 16px;
    box-sizing: border-box;
    border-radius: 8px;
    list-style-type: none;
    margin: 0px;
    max-height: calc(100vh - var(--global-nav-height,44px) - 8px);
    min-width: 212px;
    max-width: 450px;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 1px 24px 0px;
    padding: 12px 8px;
    clip-path: inset(0px -3px 0px 0px);
    width: auto;
    overflow: hidden auto;
}

.cq-menusubitem-highlight {
    background-color: lightsteelblue;
}


.app .main > div.main-content:first-child {
    padding-top: .3rem !important;
    padding-right: 1rem !important;
    padding-bottom: 0rem !important;
}

.collapse-toggle .sidebar {
    display: block !important;
    min-width: auto !important;
    width: auto !important;
    padding: 15px 5px 15px 5px;
}
.sidebar {
    min-width: 160px !important;
    width: 160px !important;
    padding: 5px 5px 15px 5px;
    box-shadow: none !important;
   margin-top:0em !important;
}

.sidebar-logo {
    display: flex;
   /* align-items: center;
    justify-content: center;*/
    padding: 4px 4px 4px 4px;
    
}
/* Default (expanded) state: show full logo, hide small logo. */
.sidebar-logo-img-full {
    display: inline;
    /*max-width: 100%;*/
    height: auto;
    max-height: 35px;
}
.sidebar-logo-img-small {
    display: none;
}
/* Collapsed state: hide full logo, show small logo. */
.collapse-toggle .sidebar-logo-img-full {
    display: none;
}
.collapse-toggle .sidebar-logo-img-small {
    display: inline;
   
    max-height: 35px;
}
.dxbl-menu-bar {
    
}
.dxbl-edit-btn-clear {
    padding: 0px 0px 0px 0px;
  
   /* position:absolute;*/
   
}

label.xaf-item-sectors,
label.xaf-item-multisectors,
.dxbl-fl-cpt.xaf-item-sectors,
.dxbl-fl-cpt.xaf-item-multisectors {
    font-size: 1.5em !important;
    --dxbl-fl-caption-font-size: 1.5em;
    margin-bottom: 0.5em;
}

/* Show dropdown when parent menu item is hovered */
.dxbl-menu-item:hover > .dxbl-menu-dropdown,
.dxbl-menu-dropdown:hover {
    display: block;
}



    .dxbl-menu-item:hover > .dxbl-menu-dropdown,
    .dxbl-menu-dropdown:hover {
        opacity: 1;
        visibility: visible;
    }

        /* Ensure smooth transitions between parent and child menus */
        .dxbl-menu-item:hover > .dxbl-menu-dropdown::before {
            content: "";
            position: absolute;
            top: -5px;
            left: -5px;
            right: -5px;
            bottom: -5px;
            z-index: -1;
        }


/* Loading animation for when metrics update */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

.metrics-loading {
    animation: pulse 1.5s ease-in-out infinite;
}

/* Responsive improvements */
@media (max-width: 768px) {
    .metrics-row {
        grid-template-columns: 1fr; /* Stack on mobile */
        gap: 2px;
    }

    .stretch-metrics,
    .project-settings-metrics {
        width: 100%;
        min-width: unset;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .main-metric-item,
    .stretch-item,
    .project-settings-item {
        background-color: rgba(255, 255, 255, 0.1);
    }

        .main-metric-item:hover,
        .stretch-item:hover,
        .project-settings-item:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }
}

/* DevExpress Dashboard Grid Center Alignment - Target specific columns */
.dx-dashboard-item .dx-datagrid .dx-datagrid-headers .dx-header-row td[aria-colindex="2"],
.dx-dashboard-item .dx-datagrid .dx-datagrid-headers .dx-header-row td[aria-colindex="3"],
.dx-dashboard-item .dx-datagrid .dx-datagrid-headers .dx-header-row td[aria-colindex="4"],
.dx-dashboard-item .dx-datagrid .dx-datagrid-headers .dx-header-row td[aria-colindex="5"],
.dx-dashboard-item .dx-datagrid .dx-datagrid-headers .dx-header-row td[aria-colindex="6"],
.dx-dashboard-item .dx-datagrid .dx-datagrid-headers .dx-header-row td[aria-colindex="7"] {
    text-align: center !important;
}
    .dx-dashboard-item .dx-datagrid .dx-datagrid-headers .dx-header-row td[aria-colindex="2"] .dx-datagrid-text-content,
    .dx-dashboard-item .dx-datagrid .dx-datagrid-headers .dx-header-row td[aria-colindex="3"] .dx-datagrid-text-content,
    .dx-dashboard-item .dx-datagrid .dx-datagrid-headers .dx-header-row td[aria-colindex="4"] .dx-datagrid-text-content,
    .dx-dashboard-item .dx-datagrid .dx-datagrid-headers .dx-header-row td[aria-colindex="5"] .dx-datagrid-text-content,
    .dx-dashboard-item .dx-datagrid .dx-datagrid-headers .dx-header-row td[aria-colindex="6"] .dx-datagrid-text-content,
    .dx-dashboard-item .dx-datagrid .dx-datagrid-headers .dx-header-row td[aria-colindex="7"] .dx-datagrid-text-content {
        text-align: center !important;
    }


.dx-dashboard-item .dx-datagrid .dx-data-row td[aria-colindex="2"], /* Data rows */
.dx-dashboard-item .dx-datagrid .dx-data-row td[aria-colindex="3"],
.dx-dashboard-item .dx-datagrid .dx-data-row td[aria-colindex="4"],
.dx-dashboard-item .dx-datagrid .dx-data-row td[aria-colindex="5"],
.dx-dashboard-item .dx-datagrid .dx-data-row td[aria-colindex="6"],
.dx-dashboard-item .dx-datagrid .dx-data-row td[aria-colindex="7"] {
    text-align: center !important;
}

/* RichTextPropertyEditor full-width expansion
   The DevExpress RichEdit component defaults to a fixed 950  600 px box
   (.dxreRoot), which leaves ~75 % of the XAF detail-view panel unused.
   These rules override that fixed size so the editor fills the available
   width of the form layout cell (.dxbl-fl-ctrl) it lives in.

   Scope: only targets .dxreRoot/.dxreView inside a XAF form-layout control
   cell (.dxbl-fl-ctrl).  Does NOT match the reporting-viewer (no .dxbl-fl-ctrl
   ancestor there) and does NOT affect print/preview contexts.

   IMPORTANT: the exact selectors are derived from the DevExpress
   dx-blazor-richedit.css NuGet source (v25.2.4).  Confirm against the live
   DOM before closing the ticket  DevExpress may add an extra wrapper element
   between .dxbl-fl-ctrl and .dxreRoot on the installed build. */

/* 1. Make the outermost RichEdit container fill the form cell.
      Ticket 019e583d: editor fills available vertical space.
      200px = app chrome estimate (header ~70px + ribbon ~52px + padding ~78px).
      Tune this value if the editor still appears too short or too tall. */
.dxbl-fl-ctrl .dxreRoot,
.dxbl-fl-ctrl .dxreLoadingPanelRoot {
    width: 100% !important;
    height: calc(100vh - 200px) !important;
    min-height: 500px !important; /* floor for short viewports */
}

/* 2. Scrollable document-view area fills the container */
.dxbl-fl-ctrl .dxreView {
    width: 100% !important;
    overflow: auto !important;
}

/* 3. Let each document page span the available view width.
      Mirrors .dxreSimplePage's own width:100% pattern, scoped to XAF editor. */
.dxbl-fl-ctrl .dxrePage {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-shadow: none !important;
}

/* Ticket 019e5843: DxWindow renders no resize grips while explicit Width/Height
   parameters are set (the dialog gets dxbl-popup-fixed-width). The Width/Height
   params were removed from the markup so AllowResize can emit its grips; the
   initial size is supplied here instead. Native CSS resize stays as a fallback
   grip, and both self/descendant selectors are covered because the CssClass
   placement differs between DX versions. */
.exclusions-window.dxbl-window-dialog,
.exclusions-window .dxbl-window-dialog {
    width: 860px;
    height: 620px;
    resize: both !important;
    overflow: auto !important;
    max-width: 95vw;
    max-height: 90vh;
}

/* Override inline styles with higher specificity */
.dx-dashboard-item .dx-datagrid td[style*="text-align: right"][aria-colindex="3"],
.dx-dashboard-item .dx-datagrid td[style*="text-align: right"][aria-colindex="4"],
.dx-dashboard-item .dx-datagrid td[style*="text-align: right"][aria-colindex="5"],
.dx-dashboard-item .dx-datagrid td[style*="text-align: right"][aria-colindex="6"],
.dx-dashboard-item .dx-datagrid td[style*="text-align: right"][aria-colindex="7"],
.dx-dashboard-item .dx-datagrid td[style*="text-align:right"][aria-colindex="3"],
.dx-dashboard-item .dx-datagrid td[style*="text-align:right"][aria-colindex="4"],
.dx-dashboard-item .dx-datagrid td[style*="text-align:right"][aria-colindex="5"],
.dx-dashboard-item .dx-datagrid td[style*="text-align:right"][aria-colindex="6"],
.dx-dashboard-item .dx-datagrid td[style*="text-align:right"][aria-colindex="7"] {
    text-align: center !important;
}