html, body {
    height: 100%;
}

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

.header-logo {
    flex-shrink: 0;
    background-color: currentColor;
    background-image: none !important;
    -webkit-mask-image: url('../images/TaskManagerLogo.svg?v=20260729-work') !important;
    mask-image: url('../images/TaskManagerLogo.svg?v=20260729-work') !important;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    width: 32px;
    height: 32px;
}

.app:not(#logon-template-component) .header .header-logo {
    align-items: center;
    background: transparent !important;
    display: inline-flex;
    height: 32px;
    justify-content: flex-start;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    min-width: 2.65rem;
    width: auto;
}

.app:not(#logon-template-component) .header .header-logo::after {
    color: currentColor;
    content: "FTA";
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .075em;
    line-height: 1;
}

/* Mint is fixed; the settings menu only exposes Fluent Light/Dark mode. */
.settings-bar .themes-menu.themes-menu-tms ul.nav.nav-pills {
    display: none !important;
}

.settings-bar .themeswitcher-fluent-mode {
    padding: .75rem 1rem 1rem;
}

/* Project login page ------------------------------------------------------- */
#logon-template-component.app {
    align-items: center;
    background: #dff7ee;
    color: #102a43;
    display: flex;
    justify-content: center;
    min-height: 100%;
    overflow: hidden;
    position: relative;
}

#logon-template-component::before {
    background: url('../images/login-taskmanager.jpg') center center / cover no-repeat;
    content: "";
    filter: blur(3px) brightness(1.12) saturate(.78) contrast(.88);
    inset: -.65rem;
    position: absolute;
    transform: scale(1.055);
    z-index: 0;
}

#logon-template-component::after {
    background:
        radial-gradient(circle at 18% 20%, rgba(190, 255, 229, .34), transparent 34rem),
        radial-gradient(circle at 82% 76%, rgba(215, 255, 243, .28), transparent 30rem),
        linear-gradient(135deg, rgba(226, 255, 246, .18), rgba(6, 76, 77, .18));
    content: "";
    inset: 0;
    position: absolute;
    z-index: 1;
}

#logon-template-component .logon-template-header {
    align-items: center;
    background: transparent;
    border: 0;
    color: #fff;
    display: flex;
    height: auto;
    justify-content: center;
    left: 50%;
    margin: 0;
    padding: 0;
    position: absolute;
    top: clamp(1.75rem, 5vh, 3.25rem);
    transform: translateX(-50%);
    width: max-content;
    z-index: 3;
}

#logon-template-component .logon-template-header .header-logo {
    display: none !important;
}

#logon-template-component .logon-template-header .header-logo::after {
    content: none;
}

#logon-template-component .logon-template-header::after {
    content: none;
}

#applicationLoadingPanel,
.xaf-loading.show {
    backdrop-filter: none;
    background: transparent !important;
    color: #13352f;
}

#applicationLoadingPanel .loading {
    align-items: center;
    background:
        radial-gradient(circle at 50% 50%, rgba(244, 255, 251, .88) 0 2.25rem, rgba(224, 255, 246, .38) 3.45rem, transparent 5.7rem),
        linear-gradient(135deg, rgba(226, 255, 246, .5), rgba(20, 91, 88, .24)),
        url('../images/waiting-taskmanager.jpg?v=20260807') 54% 52% / cover no-repeat;
    border: 1px solid rgba(122, 203, 181, .78);
    border-radius: 1rem;
    box-shadow: 0 1rem 3rem rgba(13, 68, 59, .18);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: auto;
    justify-content: center;
    min-width: 16rem;
    padding: 1.35rem 2.1rem;
}

#applicationLoadingPanel .loading-image-wrapper {
    align-items: center;
    background: transparent !important;
    display: inline-flex;
    height: 64px !important;
    justify-content: center;
    position: relative;
    width: 64px !important;
}

#applicationLoadingPanel .loading-image-wrapper::before {
    animation: taskmanager-mint-orbit 1.85s linear infinite;
    background: conic-gradient(
        from 0deg,
        rgba(15, 143, 120, 0) 0deg,
        rgba(15, 143, 120, .08) 165deg,
        rgba(42, 196, 164, .55) 245deg,
        #33d6b2 305deg,
        rgba(15, 143, 120, 0) 360deg);
    border-radius: 50%;
    content: "";
    filter: drop-shadow(0 0 3px rgba(42, 196, 164, .42));
    inset: 4px;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    position: absolute;
}

#applicationLoadingPanel .loading-image {
    filter:
        brightness(0)
        saturate(100%)
        invert(43%)
        sepia(48%)
        saturate(772%)
        hue-rotate(119deg)
        brightness(91%)
        contrast(89%);
    height: 32px !important;
    position: relative;
    width: 32px !important;
    z-index: 1;
}

#applicationLoadingPanel .loading-border {
    display: none !important;
}

#applicationLoadingPanel .loading-border-primary {
    display: none !important;
}

#applicationLoadingPanel .loading-caption {
    color: #285c51;
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.2;
    margin-top: .8rem;
}

.xaf-loading-content {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
    color: #285c51;
    display: flex;
    flex-direction: column;
    font-size: .92rem;
    font-weight: 700;
    height: auto;
    justify-content: center;
    min-width: 16rem;
    padding: 0;
    position: relative;
}

.xaf-loading-content::before {
    background:
        radial-gradient(circle at 50% 50%, rgba(244, 255, 251, .88) 0 2.25rem, rgba(224, 255, 246, .38) 3.45rem, transparent 5.7rem),
        linear-gradient(135deg, rgba(226, 255, 246, .5), rgba(20, 91, 88, .24)),
        url('../images/waiting-taskmanager.jpg?v=20260807') 54% 52% / cover no-repeat;
    border: 1px solid rgba(122, 203, 181, .78);
    border-radius: 1rem;
    box-shadow: 0 1rem 3rem rgba(13, 68, 59, .18);
    box-sizing: border-box;
    content: "";
    display: block;
    flex: 0 0 8rem;
    height: 8rem;
    width: 16rem;
}

.xaf-loading-content::after {
    background: url('../images/TaskManagerLogo.svg?v=20260729-work') center / contain no-repeat;
    content: "";
    filter:
        brightness(0)
        saturate(100%)
        invert(43%)
        sepia(48%)
        saturate(772%)
        hue-rotate(119deg)
        brightness(91%)
        contrast(89%);
    height: 32px;
    left: calc(50% - 16px);
    position: absolute;
    top: calc(4rem - 16px);
    width: 32px;
    z-index: 2;
}

.xaf-loading-content .spinner-border {
    animation: taskmanager-mint-orbit 1.85s linear infinite;
    background: conic-gradient(
        from 0deg,
        rgba(15, 143, 120, 0) 0deg,
        rgba(15, 143, 120, .08) 165deg,
        rgba(42, 196, 164, .55) 245deg,
        #33d6b2 305deg,
        rgba(15, 143, 120, 0) 360deg);
    border: 0;
    border-radius: 50%;
    filter: drop-shadow(0 0 3px rgba(42, 196, 164, .42));
    height: 56px;
    left: calc(50% - 28px);
    margin: 0 !important;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    position: absolute;
    top: calc(4rem - 28px);
    width: 56px;
}

.xaf-loading-content > span {
    color: #285c51;
    line-height: 1.2;
    margin: .8rem 0 0 !important;
    text-align: center;
}

@keyframes taskmanager-mint-orbit {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    #applicationLoadingPanel .loading-image-wrapper::before,
    .xaf-loading-content .spinner-border {
        animation-duration: 3.6s;
    }
}

/*
 * BootstrapThemeLink renders the selected stylesheet before XAF adds its
 * theme class to <body>. Use that early signal to prevent a light flash while
 * a persisted dark session is initialized after login or reconnect.
 */
html:has(head link[href*="/dx.dark.css"]) body,
html:has(head link[href*="blazing-dark"]) body {
    background: #111c25;
    color: #edf4f1;
    color-scheme: dark;
}

html:has(head link[href*="/dx.dark.css"]) :is(#applicationLoadingPanel, .xaf-loading.show),
html:has(head link[href*="blazing-dark"]) :is(#applicationLoadingPanel, .xaf-loading.show) {
    background: transparent !important;
    color: #edf4f1;
}

html:has(head link[href*="/dx.dark.css"]) #applicationLoadingPanel .loading,
html:has(head link[href*="blazing-dark"]) #applicationLoadingPanel .loading,
html:has(head link[href*="/dx.dark.css"]) .xaf-loading-content::before,
html:has(head link[href*="blazing-dark"]) .xaf-loading-content::before {
    background:
        radial-gradient(circle at 50% 50%, rgba(7, 22, 28, .84) 0 2.25rem, rgba(10, 38, 40, .42) 3.45rem, transparent 5.7rem),
        linear-gradient(135deg, rgba(8, 19, 26, .42), rgba(12, 55, 56, .34)),
        url('../images/waiting-taskmanager.jpg?v=20260807') 54% 52% / cover no-repeat;
    border-color: rgba(89, 181, 158, .68);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .38);
}

html:has(head link[href*="/dx.dark.css"]) #applicationLoadingPanel .loading-image,
html:has(head link[href*="blazing-dark"]) #applicationLoadingPanel .loading-image,
html:has(head link[href*="/dx.dark.css"]) .xaf-loading-content::after,
html:has(head link[href*="blazing-dark"]) .xaf-loading-content::after {
    filter:
        brightness(0)
        saturate(100%)
        invert(88%)
        sepia(24%)
        saturate(860%)
        hue-rotate(106deg)
        brightness(105%)
        contrast(103%);
}

html:has(head link[href*="/dx.dark.css"]) #applicationLoadingPanel .loading-image-wrapper::before,
html:has(head link[href*="blazing-dark"]) #applicationLoadingPanel .loading-image-wrapper::before {
    background: conic-gradient(
        from 0deg,
        rgba(111, 226, 194, 0) 0deg,
        rgba(111, 226, 194, .1) 165deg,
        rgba(111, 226, 194, .62) 245deg,
        #8af5d7 305deg,
        rgba(111, 226, 194, 0) 360deg);
    filter: drop-shadow(0 0 3px rgba(111, 226, 194, .48));
}

html:has(head link[href*="/dx.dark.css"]) #applicationLoadingPanel .loading-caption,
html:has(head link[href*="blazing-dark"]) #applicationLoadingPanel .loading-caption,
html:has(head link[href*="/dx.dark.css"]) .xaf-loading-content > span,
html:has(head link[href*="blazing-dark"]) .xaf-loading-content > span {
    color: #d7eee7;
}

#logon-template-component .logon-template-body {
    align-items: center;
    background: transparent;
    color: #102a43;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: 4.5rem 1.25rem;
    position: relative;
    width: 100%;
    z-index: 2;
}

#logon-template-component .logon-main-container {
    max-width: 25.5rem;
    width: 100%;
}

#logon-template-component .logon-main.card {
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(255, 255, 255, .74);
    border-radius: 1.2rem;
    box-shadow: 0 1.75rem 5rem rgba(0, 14, 19, .38);
    color: #102a43;
    overflow: hidden;
    width: 100%;
}

#logon-template-component .logon-main > .card-header {
    background: transparent;
    border: 0;
    color: #102a43;
    font-size: clamp(1.5rem, 2vw, 1.85rem);
    font-weight: 760;
    letter-spacing: -.035em;
    padding: 1.65rem 1.85rem .2rem;
    text-align: left !important;
}

#logon-template-component .logon-main > .card-body {
    background: transparent;
    color: #52606d;
    padding: .55rem 1.85rem 1.65rem;
}

#logon-template-component .xaf-static-text {
    color: #627d98;
    display: block;
    font-size: .9rem;
    line-height: 1.4;
    margin-bottom: .25rem;
}

#logon-template-component .dxbl-fl-cpt {
    color: #243b53;
    font-size: .88rem;
    font-weight: 650;
    margin-bottom: .2rem;
}

#logon-template-component dxbl-input-editor.dxbl-text-edit {
    background: #fff;
    border-color: #bcccdc;
    border-radius: .45rem;
    box-shadow: none;
    height: 2.1rem;
    min-height: 2.1rem;
}

#logon-template-component dxbl-input-editor.dxbl-text-edit:focus-within {
    border-color: #0097a7;
    box-shadow: 0 0 0 .2rem rgba(0, 151, 167, .14);
}

#logon-template-component .dxbl-text-edit-input {
    background: #fff;
    color: #102a43;
    font-size: .9rem;
    height: 2rem;
    min-height: 2rem;
    padding-block: .2rem;
}

#logon-template-component .dxbl-text-edit-input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 3rem #fff inset;
    -webkit-text-fill-color: #102a43;
}

#logon-template-component .logon-toolbar {
    margin-top: .75rem;
    padding-block: 0;
}

#logon-template-component .taskmanager-remember-me {
    align-items: center;
    color: #334e68;
    cursor: pointer;
    display: grid;
    font-size: .82rem;
    gap: .45rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    margin: .65rem 0 .15rem;
    min-height: 1.5rem;
    user-select: none;
}

#logon-template-component .taskmanager-remember-me input {
    accent-color: #008c95;
    height: 1rem;
    margin: 0;
    width: 1rem;
}

#logon-template-component .taskmanager-remember-me small {
    color: #829ab1;
    font-size: .72rem;
}

#logon-template-component .taskmanager-preferred-provider {
    background: #e6f7f2 !important;
    border-color: #4aa892 !important;
    box-shadow: 0 0 0 1px rgba(74, 168, 146, .12);
    color: #123f36 !important;
    font-weight: 700;
}

#logon-template-component .taskmanager-preferred-provider:hover {
    background: #d5f1e9 !important;
    border-color: #237d6b !important;
}

#logon-template-component .logon-toolbar .dxbl-toolbar {
    background: transparent;
    border: 0;
    height: 2.25rem !important;
    width: 100%;
}

#logon-template-component .logon-bottom-toolbar.dxbl-toolbar {
    background: transparent;
    border: 0;
    height: 2.15rem !important;
    width: 100%;
}

#logon-template-component .logon-bottom-toolbar .dxbl-btn-group {
    gap: .45rem;
}

#logon-template-component .logon-toolbar .dxbl-btn-toolbar,
#logon-template-component .logon-toolbar .dxbl-btn-group,
#logon-template-component .logon-bottom-toolbar .dxbl-btn-toolbar,
#logon-template-component .logon-bottom-toolbar .dxbl-btn-group,
#logon-template-component .logon-toolbar dxbl-toolbar-item,
#logon-template-component .logon-bottom-toolbar dxbl-toolbar-item {
    width: 100%;
}

#logon-template-component .logon-toolbar button[data-action-name="Log In"] {
    background: linear-gradient(135deg, #008c95, #006d77);
    border: 0;
    border-radius: .45rem;
    box-shadow: 0 .35rem .8rem rgba(0, 109, 119, .18);
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    justify-content: center;
    height: 2.25rem;
    min-height: 2.25rem;
    padding-block: .25rem;
    width: 100%;
}

#logon-template-component .logon-toolbar button[data-action-name="Log In"]:hover {
    background: linear-gradient(135deg, #007d86, #005d66);
}

#logon-template-component .middle-text-separator {
    align-items: center;
    color: #829ab1;
    column-gap: .7rem;
    display: grid;
    font-size: .85rem;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    line-height: 1;
    margin: .75rem 0;
    padding: 0;
    text-align: center;
    width: 100%;
}

#logon-template-component .middle-text-separator::before,
#logon-template-component .middle-text-separator::after {
    border-bottom-color: #9fb3c8;
    margin: 0;
    width: 100%;
}

#logon-template-component .logon-bottom-toolbar button {
    background: #fff;
    border: 1px solid #bcccdc;
    border-radius: .45rem;
    color: #243b53;
    font-size: .82rem;
    justify-content: center;
    height: 2.15rem;
    line-height: 1.15;
    min-height: 2.15rem;
    padding: .25rem .65rem;
    width: 100%;
}

#logon-template-component .logon-bottom-toolbar button:hover {
    background: #f0f4f8;
    border-color: #829ab1;
}

@media (max-width: 960px) {
    #logon-template-component.app {
        overflow: hidden;
    }

    #logon-template-component::before {
        background-position: 42% center;
    }

    #logon-template-component .logon-template-header {
        margin: 0;
    }

    #logon-template-component .logon-template-body {
        min-height: 100vh;
        padding: 4.5rem clamp(1.1rem, 6vw, 2.5rem);
    }
}

@media (max-width: 560px) {
    #logon-template-component .logon-template-header {
        top: 1.5rem;
    }

    #logon-template-component .logon-template-body {
        padding: 4.25rem 1rem;
    }

    #logon-template-component .logon-main > .card-header {
        font-size: 1.45rem;
        padding: 1.4rem 1.35rem .2rem;
    }

    #logon-template-component .logon-main > .card-body {
        padding: .5rem 1.35rem 1.35rem;
    }
}

/* Mint application shell --------------------------------------------------- */
body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) {
    --taskmanager-mint-50: #f3fcf8;
    --taskmanager-mint-100: #e5f8f1;
    --taskmanager-mint-200: #ccefe3;
    --taskmanager-mint-300: #a9e2d1;
    --taskmanager-mint-700: #176b5d;
    --taskmanager-mint-900: #0d443b;
    --taskmanager-light-canvas: #edf9f4;
    --taskmanager-light-panel: #e3f4ed;
    --taskmanager-light-panel-raised: #eef9f5;
    --taskmanager-light-panel-header: #d7eee5;
    --taskmanager-light-input: #f5fbf8;
    --taskmanager-light-border: #b7d8cc;
    --taskmanager-light-border-strong: #92c5b5;
    --taskmanager-light-text: #13352f;
    --taskmanager-light-muted: #52736b;
    --dxds-color-surface-neutral-default-rest: var(--taskmanager-light-panel-raised);
    --dxds-color-surface-neutral-default-hovered: #d9eee6;
    --dxds-color-surface-neutral-subdued-rest: var(--taskmanager-light-panel);
    --dxds-color-surface-neutral-subdued-hovered: #d4ebe2;
    --dxds-color-border-neutral-default-rest: var(--taskmanager-light-border);
    --dxds-color-border-neutral-accessible-rest: var(--taskmanager-light-border-strong);
    --dxds-color-content-neutral-default-rest: var(--taskmanager-light-text);
    --dxds-color-content-neutral-default-hovered: #082a24;
    --dxds-color-content-neutral-subdued-rest: var(--taskmanager-light-muted);
    background: var(--taskmanager-mint-50);
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .app:not(#logon-template-component) {
    background: var(--taskmanager-light-canvas);
}

/* Keep the XAF primary Save Action on the FTA Mint palette on every client.
   The explicit action class prevents semantic Danger buttons from being recolored. */
body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark)
    .app:not(#logon-template-component) button.xaf-primary-toolbar-btn {
    --dxbl-btn-bg: #0f8f78;
    --dxbl-btn-border-color: #0f8f78;
    --dxbl-btn-color: #ffffff;
    --dxds-color-surface-primary-default-rest: #0f8f78;
    --dxds-color-border-primary-default-rest: #0f8f78;
    --dxds-color-content-primary-on-primary-rest: #ffffff;
    background-color: #0f8f78;
    border-color: #0f8f78;
    color: #ffffff;
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark)
    .app:not(#logon-template-component) button.xaf-primary-toolbar-btn:hover:not(:disabled):not(.dxbl-disabled),
body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark)
    .app:not(#logon-template-component) button.xaf-primary-toolbar-btn:focus-visible {
    --dxbl-btn-bg: #0c7564;
    --dxbl-btn-border-color: #0c7564;
    background-color: #0c7564;
    border-color: #0c7564;
    box-shadow: 0 0 0 3px rgba(15, 143, 120, .2);
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark)
    .app:not(#logon-template-component) button.xaf-primary-toolbar-btn:disabled,
body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark)
    .app:not(#logon-template-component) button.xaf-primary-toolbar-btn.dxbl-disabled {
    --dxbl-btn-bg: #82bbae;
    --dxbl-btn-border-color: #82bbae;
    background-color: #82bbae;
    border-color: #82bbae;
    color: rgba(255, 255, 255, .92);
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark)
    .app:not(#logon-template-component) button.xaf-primary-toolbar-btn
    :is(.xaf-image, .dxbl-image, .dxbl-btn-icon, img, svg) {
    color: #ffffff;
    filter: brightness(0) invert(1);
}

/* Fluent 26.1 can resolve neutral disabled toolbar Actions to a very dark
   surface after the FTA light palette overrides. Keep non-primary Actions
   visibly disabled, but readable, and leave the primary Save styling intact. */
body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark)
    .app:not(#logon-template-component) .dxbl-toolbar
    button.dxbl-btn:is(.dxbl-disabled, :disabled):not(.xaf-primary-toolbar-btn) {
    --dxbl-btn-disabled-bg: #dbeae4;
    --dxbl-btn-disabled-border-color: #b7d0c7;
    --dxbl-btn-disabled-color: #52736b;
    --dxbl-btn-bg: #dbeae4;
    --dxbl-btn-border-color: #b7d0c7;
    --dxbl-btn-color: #52736b;
    background-color: #dbeae4;
    border-color: #b7d0c7;
    color: #52736b;
    opacity: .78;
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark)
    .app:not(#logon-template-component) .dxbl-toolbar
    button.dxbl-btn:is(.dxbl-disabled, :disabled):not(.xaf-primary-toolbar-btn)
    :is(.xaf-image, .dxbl-image, .dxbl-btn-icon, img, svg) {
    color: currentColor;
    filter: none;
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .app:not(#logon-template-component) .header {
    background:
        linear-gradient(110deg, rgba(245, 255, 251, .96), rgba(204, 239, 227, .96));
    border-bottom-color: var(--taskmanager-mint-300);
    box-shadow: 0 .25rem 1rem rgba(13, 68, 59, .08);
    color: var(--taskmanager-mint-900);
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .app:not(#logon-template-component) .header .header-left-side,
body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .app:not(#logon-template-component) .header .header-right-side,
body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .app:not(#logon-template-component) .header .btn-header {
    color: var(--taskmanager-mint-900);
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark)
    .app:not(#logon-template-component) .header .header-logo {
    background-color: #0f8f78;
    filter:
        drop-shadow(0 0 .35px rgba(14, 116, 94, .9))
        drop-shadow(0 0 1.35px rgba(45, 212, 191, .38));
}

body.dxbl-theme-fluent .app:not(#logon-template-component) .sidebar {
    isolation: isolate;
    min-width: var(--taskmanager-navigation-width, 220px);
    overflow: hidden;
    position: relative;
    transition:
        width .22s ease,
        min-width .22s ease,
        max-width .22s ease;
    white-space: nowrap;
    width: var(--taskmanager-navigation-width, 220px);
}

@media (min-width: 576px) {
    body.dxbl-theme-fluent .app:not(#logon-template-component) .header-left-side {
        min-width: var(--taskmanager-navigation-width, 220px);
        width: var(--taskmanager-navigation-width, 220px);
    }

    body.dxbl-theme-fluent .app:not(#logon-template-component).collapse-toggle .header-left-side {
        max-width: var(--taskmanager-navigation-width, 220px);
    }

    body.taskmanager-navigation-shrink.dxbl-theme-fluent
        .app:not(#logon-template-component) .sidebar {
        display: flex !important;
        max-width: var(--taskmanager-navigation-collapsed-width, 68px) !important;
        min-width: var(--taskmanager-navigation-collapsed-width, 68px) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -ms-overflow-style: none;
        scrollbar-width: none;
        width: var(--taskmanager-navigation-collapsed-width, 68px) !important;
    }

    body.taskmanager-navigation-shrink.dxbl-theme-fluent
        .app:not(#logon-template-component) .sidebar :is(
            .dxbl-scroll-viewer,
            .dxbl-scroll-viewer-content
        ) {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    body.taskmanager-navigation-shrink.dxbl-theme-fluent
        .app:not(#logon-template-component) .sidebar::-webkit-scrollbar,
    body.taskmanager-navigation-shrink.dxbl-theme-fluent
        .app:not(#logon-template-component) .sidebar
        :is(.dxbl-scroll-viewer, .dxbl-scroll-viewer-content)::-webkit-scrollbar {
        display: none;
        height: 0;
        width: 0;
    }

    body.taskmanager-navigation-shrink.dxbl-theme-fluent
        .app:not(#logon-template-component) .sidebar :is(
            .dxbl-scroll-viewer-vert-scroll-bar,
            [class*="vert-scroll-bar"],
            [class*="vertical-scroll-bar"]
        ) {
        display: none !important;
    }

    body.taskmanager-navigation-shrink.dxbl-theme-fluent
        .app:not(#logon-template-component) .header-left-side {
        justify-content: center;
        max-width: var(--taskmanager-navigation-collapsed-width, 68px) !important;
        min-width: var(--taskmanager-navigation-collapsed-width, 68px) !important;
        overflow: hidden;
        padding-inline: 0 !important;
        width: var(--taskmanager-navigation-collapsed-width, 68px) !important;
    }

    body.taskmanager-navigation-shrink.dxbl-theme-fluent
        .app:not(#logon-template-component) .header-left-side .header-logo {
        display: none !important;
    }

    body.taskmanager-navigation-shrink.dxbl-theme-fluent
        .app:not(#logon-template-component) .sidebar :is(
            .dxbl-navigation-filter,
            .dxbl-accordion-filter,
            .xaf-sidebar-search,
            .about-info,
            .xaf-about-info,
            .xaf-application-info
        ) {
        display: none !important;
    }

    body.taskmanager-navigation-shrink.dxbl-theme-fluent
        .app:not(#logon-template-component) .sidebar :is(
            .dxbl-nav-item-text,
            .nav-item-text,
            .xaf-nav-text,
            .dxbl-text,
            .dxbl-btn-text,
            .dxbl-treeview-item-text,
            [class*="item-text"],
            [class*="group-caption"]
        ) {
        display: none !important;
    }

    body.taskmanager-navigation-shrink.dxbl-theme-fluent
        .app:not(#logon-template-component) .sidebar :is(
            .dxbl-nav-group-expand-btn,
            .dxbl-group-expand-btn,
            .xaf-nav-expand-btn
        ) {
        align-items: center;
        display: inline-flex !important;
        flex: 0 0 .875rem;
        inset-inline-end: .1rem;
        justify-content: center;
        margin-inline: 0 !important;
        opacity: .72;
        position: absolute;
        width: .875rem;
    }

    body.taskmanager-navigation-shrink.dxbl-theme-fluent
        .app:not(#logon-template-component) .sidebar :is(
            .dxbl-accordion-group,
            .dxbl-accordion-item,
            .dxbl-treeview-node,
            .dxbl-treeview-item
        ) {
        margin-inline: 0 !important;
        max-width: var(--taskmanager-navigation-collapsed-width, 68px) !important;
        padding-inline: 0 !important;
        text-indent: 0 !important;
        width: 100% !important;
    }

    body.taskmanager-navigation-shrink.dxbl-theme-fluent
        .app:not(#logon-template-component) .sidebar :is(
            .nav-link,
            .dxbl-nav-item,
            .dxbl-accordion-item-content,
            .dxbl-treeview-item-content,
            .xaf-nav-link
        ) {
        align-items: center !important;
        box-sizing: border-box;
        justify-content: center !important;
        min-width: 0 !important;
        padding-inline: .5rem !important;
        position: relative;
        width: 100% !important;
    }

    body.taskmanager-navigation-shrink.dxbl-theme-fluent
        .app:not(#logon-template-component) .sidebar :is(
            img,
            .dxbl-icon,
            .xaf-image,
            [class*="icon"]
        ) {
        flex: 0 0 auto;
        margin-inline: 0 !important;
    }
}

@media (max-width: 575.98px) {
    body.dxbl-theme-fluent .app:not(#logon-template-component) .sidebar-sm-shadow {
        left: var(--taskmanager-navigation-width, 220px);
    }
}

body.dxbl-theme-fluent .app:not(#logon-template-component) .sidebar::before {
    background: url('../images/login-taskmanager.jpg') 42% center / cover no-repeat;
    content: "";
    inset: -.65rem;
    position: absolute;
    transform: scale(1.08);
    z-index: 0;
}

body.dxbl-theme-fluent .app:not(#logon-template-component) .sidebar::after {
    content: "";
    inset: 0;
    position: absolute;
    z-index: 0;
}

body.dxbl-theme-fluent .app:not(#logon-template-component) .sidebar > * {
    position: relative;
    z-index: 1;
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .app:not(#logon-template-component) .sidebar {
    background: var(--taskmanager-mint-100);
    border-color: var(--taskmanager-mint-300);
    box-shadow: .5rem 0 1.75rem rgba(13, 68, 59, .09);
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .app:not(#logon-template-component) .sidebar::before {
    filter: blur(3px) brightness(1.12) saturate(.76) contrast(.9);
    opacity: .52;
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .app:not(#logon-template-component) .sidebar::after {
    background:
        radial-gradient(circle at 18% 12%, rgba(236, 255, 249, .4), transparent 18rem),
        linear-gradient(180deg, rgba(218, 247, 237, .64), rgba(195, 235, 222, .74));
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .app:not(#logon-template-component) .sidebar .xaf-navmenu,
body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .app:not(#logon-template-component) .sidebar .dxbl-accordion,
body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .app:not(#logon-template-component) .sidebar .dxbl-navigation-filter {
    background: transparent;
    color: var(--taskmanager-mint-900);
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .app:not(#logon-template-component) .sidebar .dxbl-accordion-group,
body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .app:not(#logon-template-component) .sidebar .dxbl-accordion-item {
    border-color: rgba(23, 107, 93, .12);
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .app:not(#logon-template-component) .sidebar .dxbl-accordion-item:hover,
body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .app:not(#logon-template-component) .sidebar .xaf-nav-item:hover {
    background: rgba(245, 255, 251, .66);
}

/* Active navigation item: PPG_QM_V2 geometry, adapted to the Mint light palette. */
body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark)
    .app:not(#logon-template-component) .sidebar
    .dxbl-accordion .dxbl-accordion-group
    .dxbl-accordion-item:not(.dxbl-accordion-group):not(.dxbl-disabled):not(:disabled).dxbl-active
    > .dxbl-accordion-item-content,
body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark)
    .app:not(#logon-template-component) .sidebar .dxbl-treeview-item.dxbl-active,
body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark)
    .app:not(#logon-template-component) .sidebar .dxbl-treeview-item.dxbl-selected,
body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark)
    .app:not(#logon-template-component) .sidebar .nav-link.active,
body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark)
    .app:not(#logon-template-component) .sidebar a.active,
body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark)
    .app:not(#logon-template-component) .sidebar [aria-current="page"] {
    background-color: rgba(204, 239, 227, .94) !important;
    border-inline-start: 5px solid #0f8f78 !important;
    box-shadow: inset 0 0 0 1px rgba(23, 107, 93, .12);
    box-sizing: border-box;
    color: var(--taskmanager-mint-900) !important;
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .app:not(#logon-template-component) .xaf-main-layout,
body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .app:not(#logon-template-component) .main,
body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .app:not(#logon-template-component) .main-content.xaf-flex-auto {
    background: var(--taskmanager-light-canvas);
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .app:not(#logon-template-component) .detail-view-content > .dxbl-fl,
body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .app:not(#logon-template-component) .main-content > .grid-content {
    background-color: var(--taskmanager-light-panel);
    border: 1px solid var(--taskmanager-light-border);
    border-radius: var(--dxds-border-radius-40, .5rem);
}

body.dxbl-theme-fluent .app:not(#logon-template-component) .detail-view-content > .dxbl-fl,
body.dxbl-theme-fluent :is(.modal, .dxbl-modal, .dxbl-window) .detail-view-content > .dxbl-fl {
    box-sizing: border-box;
    padding: .5rem .65rem;
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .app:not(#logon-template-component) .dxbl-fl,
body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) :is(.modal, .dxbl-modal, .dxbl-window) .dxbl-fl {
    --dxbl-fl-caption-color: var(--taskmanager-light-text);
    --dxbl-fl-group-bg: var(--taskmanager-light-panel);
    --dxbl-fl-group-border-color: var(--taskmanager-light-border);
    --dxbl-fl-group-header-bg: var(--taskmanager-light-panel-header);
    --dxbl-fl-group-header-color: var(--taskmanager-light-text);
    --dxbl-fl-group-header-btn-bg: transparent;
    --dxbl-fl-group-header-btn-color: var(--taskmanager-light-text);
    --dxbl-fl-group-header-btn-hover-bg: #cce6dc;
    --dxbl-fl-group-header-btn-hover-color: #082a24;
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .app:not(#logon-template-component) .dxbl-fl-group .dxbl-fl-group > .dxbl-group,
body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) :is(.modal, .dxbl-modal, .dxbl-window) .dxbl-fl-group .dxbl-fl-group > .dxbl-group {
    --dxbl-group-bg: var(--taskmanager-light-panel-raised);
    --dxbl-group-header-bg: var(--taskmanager-light-panel-raised);
    --dxbl-group-border-color: var(--taskmanager-light-border-strong);
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .app:not(#logon-template-component) .dxbl-grid,
body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) :is(.modal, .dxbl-modal, .dxbl-window) .dxbl-grid {
    --dxbl-grid-bg: var(--taskmanager-light-panel-raised);
    --dxbl-grid-row-bg: var(--taskmanager-light-panel-raised);
    --dxbl-grid-header-bg: var(--taskmanager-light-panel-header);
    --dxbl-grid-footer-bg: var(--taskmanager-light-panel-header);
    --dxbl-grid-border-color: var(--taskmanager-light-border);
    --dxbl-grid-fixed-column-border-color: var(--taskmanager-light-border-strong);
    --dxbl-grid-hover-bg: #d4ebe2;
    --dxbl-grid-hover-color: #082a24;
    --dxbl-grid-color: var(--taskmanager-light-text);
    --dxbl-grid-header-color: var(--taskmanager-light-text);
    --dxbl-grid-footer-color: var(--taskmanager-light-text);
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .app:not(#logon-template-component) :is(.dxbl-text-edit, .dxbl-spin-edit, .dxbl-combobox),
body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) :is(.modal, .dxbl-modal, .dxbl-window) :is(.dxbl-text-edit, .dxbl-spin-edit, .dxbl-combobox) {
    --dxbl-text-edit-bg: var(--taskmanager-light-input);
    --dxbl-text-edit-color: var(--taskmanager-light-text);
    --dxbl-text-edit-border-color: var(--taskmanager-light-border-strong);
    background-color: var(--taskmanager-light-input);
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .modal {
    --bs-modal-bg: var(--taskmanager-light-panel);
    --bs-modal-color: var(--taskmanager-light-text);
    --bs-modal-border-color: var(--taskmanager-light-border);
    --bs-modal-header-border-color: var(--taskmanager-light-border);
    --bs-modal-footer-border-color: var(--taskmanager-light-border);
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) :is(.dxbl-modal, .dxbl-window) {
    --dxbl-popups-bg: var(--taskmanager-light-panel);
    --dxbl-popups-color: var(--taskmanager-light-text);
    --dxbl-popups-border-width: 1px;
    --dxbl-popups-border-style: solid;
    --dxbl-popups-border-color: var(--taskmanager-light-border);
    --dxbl-popups-header-bg: var(--taskmanager-light-panel-header);
    --dxbl-popups-header-color: var(--taskmanager-light-text);
    --dxbl-popups-header-border-width: 1px;
    --dxbl-popups-header-border-color: var(--taskmanager-light-border);
    --dxbl-popups-body-bg: var(--taskmanager-light-canvas);
    --dxbl-popups-body-color: var(--taskmanager-light-text);
    --dxbl-popups-footer-bg: var(--taskmanager-light-panel-header);
    --dxbl-popups-footer-color: var(--taskmanager-light-text);
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .modal-content {
    background-color: var(--taskmanager-light-panel);
    border-color: var(--taskmanager-light-border);
    color: var(--taskmanager-light-text);
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) :is(.modal-header, .modal-footer) {
    background-color: var(--taskmanager-light-panel-header);
    border-color: var(--taskmanager-light-border);
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .modal-body {
    background-color: var(--taskmanager-light-canvas);
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) :is(.modal, .dxbl-modal, .dxbl-window) .detail-view-content > .dxbl-fl,
body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) :is(.modal, .dxbl-modal, .dxbl-window) .grid-content {
    background-color: var(--taskmanager-light-panel);
    border: 1px solid var(--taskmanager-light-border);
    border-radius: var(--dxds-border-radius-40, .5rem);
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) {
    --taskmanager-mint-50: #101820;
    --taskmanager-mint-100: #17232d;
    --taskmanager-mint-200: #253340;
    --taskmanager-mint-300: #3b4a58;
    --taskmanager-mint-700: #83d8c0;
    --taskmanager-mint-900: #e1f5ef;
    --taskmanager-dark-canvas: #101820;
    --taskmanager-dark-panel: #17232d;
    --taskmanager-dark-panel-raised: #1d2935;
    --taskmanager-dark-panel-header: #1b2732;
    --taskmanager-dark-input: #111c25;
    --taskmanager-dark-border: #3b4a58;
    --taskmanager-dark-border-strong: #4a5a68;
    --taskmanager-dark-text: #edf4f1;
    --taskmanager-dark-muted: #a9b7c4;
    --taskmanager-dark-selection: #29463f;
    --taskmanager-dark-selection-hover: #315248;
    --taskmanager-dark-selection-focus: #365c50;
    --taskmanager-dark-selection-focus-hover: #3d6859;
    --dxds-color-surface-neutral-default-rest: var(--taskmanager-dark-panel-raised);
    --dxds-color-surface-neutral-default-hovered: #253340;
    --dxds-color-surface-neutral-subdued-rest: var(--taskmanager-dark-panel);
    --dxds-color-surface-neutral-subdued-hovered: #20303d;
    --dxds-color-border-neutral-default-rest: var(--taskmanager-dark-border);
    --dxds-color-border-neutral-accessible-rest: var(--taskmanager-dark-border-strong);
    --dxds-color-content-neutral-default-rest: var(--taskmanager-dark-text);
    --dxds-color-content-neutral-default-hovered: #ffffff;
    --dxds-color-content-neutral-subdued-rest: var(--taskmanager-dark-muted);
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) .app:not(#logon-template-component) {
    background: var(--taskmanager-dark-canvas);
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark)
    .app:not(#logon-template-component) button.xaf-primary-toolbar-btn {
    --dxbl-btn-bg: #42dcc1;
    --dxbl-btn-border-color: #42dcc1;
    --dxbl-btn-color: #082a24;
    --dxds-color-surface-primary-default-rest: #42dcc1;
    --dxds-color-border-primary-default-rest: #42dcc1;
    --dxds-color-content-primary-on-primary-rest: #082a24;
    background-color: #42dcc1;
    border-color: #42dcc1;
    color: #082a24;
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark)
    .app:not(#logon-template-component) button.xaf-primary-toolbar-btn:hover:not(:disabled):not(.dxbl-disabled),
:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark)
    .app:not(#logon-template-component) button.xaf-primary-toolbar-btn:focus-visible {
    --dxbl-btn-bg: #6fe6d1;
    --dxbl-btn-border-color: #6fe6d1;
    background-color: #6fe6d1;
    border-color: #6fe6d1;
    box-shadow: 0 0 0 3px rgba(66, 220, 193, .22);
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark)
    .app:not(#logon-template-component) button.xaf-primary-toolbar-btn:disabled,
:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark)
    .app:not(#logon-template-component) button.xaf-primary-toolbar-btn.dxbl-disabled {
    --dxbl-btn-bg: #286b63;
    --dxbl-btn-border-color: #286b63;
    background-color: #286b63;
    border-color: #286b63;
    color: #bfeee5;
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark)
    .app:not(#logon-template-component) button.xaf-primary-toolbar-btn
    :is(.xaf-image, .dxbl-image, .dxbl-btn-icon, img, svg) {
    color: currentColor;
    filter: brightness(0) saturate(100%) invert(12%) sepia(24%) saturate(1028%) hue-rotate(121deg) brightness(92%) contrast(98%) !important;
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) :is(#applicationLoadingPanel, .xaf-loading.show) {
    background: transparent !important;
    color: #edf4f1;
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) #applicationLoadingPanel .loading,
:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) .xaf-loading-content::before {
    background:
        radial-gradient(circle at 50% 50%, rgba(7, 22, 28, .84) 0 2.25rem, rgba(10, 38, 40, .42) 3.45rem, transparent 5.7rem),
        linear-gradient(135deg, rgba(8, 19, 26, .42), rgba(12, 55, 56, .34)),
        url('../images/waiting-taskmanager.jpg?v=20260807') 54% 52% / cover no-repeat;
    border-color: rgba(89, 181, 158, .68);
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .38);
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) #applicationLoadingPanel .loading-image {
    filter:
        brightness(0)
        saturate(100%)
        invert(88%)
        sepia(24%)
        saturate(860%)
        hue-rotate(106deg)
        brightness(105%)
        contrast(103%);
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) #applicationLoadingPanel .loading-image-wrapper::before {
    background: conic-gradient(
        from 0deg,
        rgba(111, 226, 194, 0) 0deg,
        rgba(111, 226, 194, .1) 165deg,
        rgba(111, 226, 194, .62) 245deg,
        #8af5d7 305deg,
        rgba(111, 226, 194, 0) 360deg);
    filter: drop-shadow(0 0 3px rgba(111, 226, 194, .48));
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) #applicationLoadingPanel .loading-border {
    border-color: #36564f !important;
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) #applicationLoadingPanel .loading-border-primary {
    border-top-color: #6fe2c2 !important;
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) #applicationLoadingPanel .loading-caption {
    color: #d7eee7;
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) .xaf-loading-content::after {
    filter:
        brightness(0)
        saturate(100%)
        invert(88%)
        sepia(24%)
        saturate(860%)
        hue-rotate(106deg)
        brightness(105%)
        contrast(103%);
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) .xaf-loading-content .spinner-border {
    background: conic-gradient(
        from 0deg,
        rgba(111, 226, 194, 0) 0deg,
        rgba(111, 226, 194, .1) 165deg,
        rgba(111, 226, 194, .62) 245deg,
        #8af5d7 305deg,
        rgba(111, 226, 194, 0) 360deg);
    filter: drop-shadow(0 0 3px rgba(111, 226, 194, .48));
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) .xaf-loading-content > span {
    color: #d7eee7;
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) .app:not(#logon-template-component) .header {
    background: linear-gradient(110deg, rgba(17, 28, 37, .99), rgba(23, 45, 46, .99));
    border-bottom-color: var(--taskmanager-dark-border);
    box-shadow: 0 .3rem 1.15rem rgba(0, 0, 0, .3);
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) .app:not(#logon-template-component) .header :is(
    .header-left-side,
    .header-right-side,
    .header-logo,
    .view-caption-root,
    .xaf-view-caption-lg,
    .xaf-view-caption-sm,
    .xaf-image,
    .btn-header,
    .navigate-back-icon-container
) {
    color: var(--taskmanager-dark-text);
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) .app:not(#logon-template-component) .header .xaf-view-caption-sm {
    color: #b9d7ce;
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark)
    .app:not(#logon-template-component) .header .header-logo {
    background-color: #6fe2c2;
    filter: none;
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) .app:not(#logon-template-component) .header :is(svg, path) {
    fill: currentColor;
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) .app:not(#logon-template-component) .sidebar {
    background: var(--taskmanager-dark-panel);
    border-color: var(--taskmanager-dark-border);
    box-shadow: .5rem 0 1.75rem rgba(0, 0, 0, .28);
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) .app:not(#logon-template-component) .sidebar::before {
    filter: blur(4px) brightness(.68) saturate(.72) contrast(.96);
    opacity: .58;
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) .app:not(#logon-template-component) .sidebar::after {
    background:
        radial-gradient(circle at 18% 12%, rgba(83, 145, 128, .18), transparent 18rem),
        linear-gradient(180deg, rgba(20, 39, 44, .72), rgba(18, 48, 43, .84));
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) .app:not(#logon-template-component) .sidebar .dxbl-accordion-item:hover,
:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) .app:not(#logon-template-component) .sidebar .xaf-nav-item:hover {
    background: rgba(83, 145, 128, .2);
}

/* Active navigation item: PPG_QM_V2 geometry, adapted to the Mint dark palette. */
:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark)
    .app:not(#logon-template-component) .sidebar
    .dxbl-accordion .dxbl-accordion-group
    .dxbl-accordion-item:not(.dxbl-accordion-group):not(.dxbl-disabled):not(:disabled).dxbl-active
    > .dxbl-accordion-item-content,
:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark)
    .app:not(#logon-template-component) .sidebar .dxbl-treeview-item.dxbl-active,
:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark)
    .app:not(#logon-template-component) .sidebar .dxbl-treeview-item.dxbl-selected,
:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark)
    .app:not(#logon-template-component) .sidebar .nav-link.active,
:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark)
    .app:not(#logon-template-component) .sidebar a.active,
:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark)
    .app:not(#logon-template-component) .sidebar [aria-current="page"] {
    background-color: rgba(72, 137, 120, .34) !important;
    border-inline-start: 5px solid #6fe2c2 !important;
    box-shadow:
        inset 0 0 0 1px rgba(111, 226, 194, .18),
        0 0 .45rem rgba(111, 226, 194, .08);
    box-sizing: border-box;
    color: #f3fffb !important;
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) .app:not(#logon-template-component) .xaf-main-layout,
:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) .app:not(#logon-template-component) .main,
:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) .app:not(#logon-template-component) .main-content.xaf-flex-auto {
    background: var(--taskmanager-dark-canvas);
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark)
    .app:not(#logon-template-component)
    .dxbl-accordion-item :is(img, svg) {
    filter:
        drop-shadow(0 0 .35px rgba(14, 116, 94, .9))
        drop-shadow(0 0 1.35px rgba(45, 212, 191, .38));
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark)
    .app:not(#logon-template-component)
    .dxbl-accordion-item :is(img, svg) {
    filter:
        brightness(0)
        saturate(100%)
        invert(88%)
        sepia(24%)
        saturate(860%)
        hue-rotate(106deg)
        brightness(105%)
        contrast(103%) !important;
}

/* XAF action buttons can render their image one level below the icon wrapper.
   Enforce the dark-mode mint contour for actions such as Save as well. */
:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark)
    .app:not(#logon-template-component)
    :is(button, .dxbl-btn, .xaf-action)
    :is(.xaf-image, .dxbl-image, .dxbl-btn-icon) {
    --dxds-icon-color-black: #6fe2c2;
    --dxds-icon-color-white: #6fe2c2;
    color: #6fe2c2 !important;
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark)
    .app:not(#logon-template-component)
    :is(button, .dxbl-btn, .xaf-action)
    :is(
        svg,
        img:not([src*="/api/users/"][src*="/avatar"]):not([src^="data:image/png"]):not([src^="data:image/jpeg"]):not([src^="data:image/gif"]):not([src^="data:image/webp"]):not([src^="data:image/bmp"])
    ) {
    color: #6fe2c2 !important;
    filter:
        brightness(0)
        saturate(100%)
        invert(88%)
        sepia(24%)
        saturate(860%)
        hue-rotate(106deg)
        brightness(105%)
        contrast(103%) !important;
    opacity: 1;
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark)
    .app:not(#logon-template-component)
    :is(button, .dxbl-btn, .xaf-action)
    svg :is(path, polygon, polyline, circle, rect, line) {
    fill: currentColor !important;
    stroke: currentColor !important;
}

/* DevExpress renders action dropdowns in a portal outside the application
   container. Apply the same mint icon treatment to these overlay menus. */
:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark)
    :is(
        .dxbl-popup,
        .dxbl-dropdown,
        .dxbl-dropdown-menu,
        .dxbl-context-menu,
        .dropdown-menu,
        [role="menu"],
        [class*="dxbl-dropdown"]
    )
    :is(svg, img) {
    color: #6fe2c2 !important;
    filter:
        brightness(0)
        saturate(100%)
        invert(88%)
        sepia(24%)
        saturate(860%)
        hue-rotate(106deg)
        brightness(105%)
        contrast(103%) !important;
    opacity: 1;
}

/* Profile pictures are user content, not monochrome action icons. Keep their
   original palette in XAF image editors and in the current-user menu. */
.app:not(#logon-template-component) img:is(
    [src*="/api/users/"][src*="/avatar"],
    [src^="data:image/png"],
    [src^="data:image/jpeg"],
    [src^="data:image/gif"],
    [src^="data:image/webp"],
    [src^="data:image/bmp"]
) {
    filter: none !important;
    opacity: 1;
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark)
    :is(
        .dxbl-popup,
        .dxbl-dropdown,
        .dxbl-dropdown-menu,
        .dxbl-context-menu,
        .dropdown-menu,
        [role="menu"],
        [class*="dxbl-dropdown"]
    )
    svg :is(path, polygon, polyline, circle, rect, line) {
    fill: currentColor !important;
    stroke: currentColor !important;
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) .app:not(#logon-template-component) .detail-view-content > .dxbl-fl,
:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) .app:not(#logon-template-component) .main-content > .grid-content {
    background-color: var(--taskmanager-dark-panel);
    border: 1px solid var(--taskmanager-dark-border);
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) .app:not(#logon-template-component) .dxbl-fl,
:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) :is(.modal, .dxbl-modal, .dxbl-window) .dxbl-fl {
    --dxbl-fl-caption-color: var(--taskmanager-dark-text);
    --dxbl-fl-group-bg: var(--taskmanager-dark-panel);
    --dxbl-fl-group-border-color: var(--taskmanager-dark-border);
    --dxbl-fl-group-header-bg: var(--taskmanager-dark-panel-header);
    --dxbl-fl-group-header-color: var(--taskmanager-dark-text);
    --dxbl-fl-group-header-btn-bg: transparent;
    --dxbl-fl-group-header-btn-color: var(--taskmanager-dark-text);
    --dxbl-fl-group-header-btn-hover-bg: #253340;
    --dxbl-fl-group-header-btn-hover-color: #ffffff;
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) .app:not(#logon-template-component) .dxbl-fl-group .dxbl-fl-group > .dxbl-group,
:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) :is(.modal, .dxbl-modal, .dxbl-window) .dxbl-fl-group .dxbl-fl-group > .dxbl-group {
    --dxbl-group-bg: var(--taskmanager-dark-panel-raised);
    --dxbl-group-header-bg: var(--taskmanager-dark-panel-raised);
    --dxbl-group-border-color: var(--taskmanager-dark-border-strong);
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) .app:not(#logon-template-component) .dxbl-grid,
:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) :is(.modal, .dxbl-modal, .dxbl-window) .dxbl-grid,
.taskmanager-dark-grid-preview .dxbl-grid {
    --dxbl-grid-bg: var(--taskmanager-dark-panel);
    --dxbl-grid-row-bg: var(--taskmanager-dark-panel);
    --dxbl-grid-header-bg: var(--taskmanager-dark-panel-header);
    --dxbl-grid-footer-bg: var(--taskmanager-dark-panel-header);
    --dxbl-grid-border-color: var(--taskmanager-dark-border-strong);
    --dxbl-grid-fixed-column-border-color: var(--taskmanager-dark-border-strong);
    --dxbl-grid-hover-bg: #253340;
    --dxbl-grid-hover-color: #ffffff;
    --dxbl-grid-selection-bg: var(--taskmanager-dark-selection, #29463f);
    --dxbl-grid-selection-color: #f3fffb;
    --dxbl-grid-focus-bg: var(--taskmanager-dark-selection-hover, #315248);
    --dxbl-grid-focus-color: #f3fffb;
    --dxbl-grid-selection-focus-dark-bg: var(--taskmanager-dark-selection-focus, #365c50);
    --dxbl-grid-selection-focus-dark-color: #f3fffb;
    --dxbl-grid-selection-focus-dark-hover-bg: var(--taskmanager-dark-selection-focus-hover, #3d6859);
    --dxbl-grid-selected-hover-bg: var(--taskmanager-dark-selection-hover, #315248);
    --dxbl-grid-touch-bg: var(--taskmanager-dark-selection-focus, #365c50);
    --dxbl-grid-touch-color: #f3fffb;
    --dxbl-grid-color: var(--taskmanager-dark-text);
    --dxbl-grid-header-color: var(--taskmanager-dark-text);
    --dxbl-grid-footer-color: var(--taskmanager-dark-text);
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) .app:not(#logon-template-component) :is(.dxbl-text-edit, .dxbl-spin-edit, .dxbl-combobox),
:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) :is(.modal, .dxbl-modal, .dxbl-window) :is(.dxbl-text-edit, .dxbl-spin-edit, .dxbl-combobox) {
    --dxbl-text-edit-bg: var(--taskmanager-dark-input);
    --dxbl-text-edit-color: var(--taskmanager-dark-text);
    --dxbl-text-edit-border-color: var(--taskmanager-dark-border-strong);
    background-color: var(--taskmanager-dark-input);
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) .modal {
    --bs-modal-bg: var(--taskmanager-dark-panel);
    --bs-modal-color: var(--taskmanager-dark-text);
    --bs-modal-border-color: var(--taskmanager-dark-border);
    --bs-modal-header-border-color: var(--taskmanager-dark-border);
    --bs-modal-footer-border-color: var(--taskmanager-dark-border);
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) :is(.dxbl-modal, .dxbl-window) {
    --dxbl-popups-bg: var(--taskmanager-dark-panel);
    --dxbl-popups-color: var(--taskmanager-dark-text);
    --dxbl-popups-border-width: 1px;
    --dxbl-popups-border-style: solid;
    --dxbl-popups-border-color: var(--taskmanager-dark-border);
    --dxbl-popups-header-bg: var(--taskmanager-dark-panel-header);
    --dxbl-popups-header-color: var(--taskmanager-dark-text);
    --dxbl-popups-header-border-width: 1px;
    --dxbl-popups-header-border-color: var(--taskmanager-dark-border);
    --dxbl-popups-body-bg: var(--taskmanager-dark-canvas);
    --dxbl-popups-body-color: var(--taskmanager-dark-text);
    --dxbl-popups-footer-bg: var(--taskmanager-dark-panel-header);
    --dxbl-popups-footer-color: var(--taskmanager-dark-text);
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) .modal-content {
    background-color: var(--taskmanager-dark-panel);
    border-color: var(--taskmanager-dark-border);
    color: var(--taskmanager-dark-text);
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) :is(.modal-header, .modal-footer) {
    background-color: var(--taskmanager-dark-panel-header);
    border-color: var(--taskmanager-dark-border);
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) .modal-body {
    background-color: var(--taskmanager-dark-canvas);
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) :is(.modal, .dxbl-modal, .dxbl-window) .detail-view-content > .dxbl-fl,
:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) :is(.modal, .dxbl-modal, .dxbl-window) .grid-content {
    background-color: var(--taskmanager-dark-panel);
    border: 1px solid var(--taskmanager-dark-border);
    border-radius: var(--dxds-border-radius-40, .5rem);
}

/* XAF's standard record-delete confirmation follows the compact custom-control dialog. */
.taskmanager-xaf-delete-popup {
    max-width: calc(100vw - 2rem) !important;
    width: min(36rem, calc(100vw - 2rem)) !important;
}

.taskmanager-xaf-delete-popup .dxbl-modal-content {
    border-radius: .7rem;
    overflow: hidden;
}

.taskmanager-xaf-delete-popup .dxbl-modal-header {
    align-items: flex-start;
    min-height: 3.45rem;
    padding: .62rem 1rem .85rem;
}

.taskmanager-xaf-delete-popup .dxbl-modal-header .dxbl-popup-close-button {
    margin-top: -.05rem;
}

.taskmanager-xaf-delete-popup .dxbl-modal-body {
    padding: 1.25rem 1.35rem 1.35rem !important;
}

.taskmanager-xaf-delete-content {
    align-items: start;
    display: grid;
    gap: .75rem;
    grid-template-columns: 2.1rem minmax(0, 1fr);
}

.taskmanager-xaf-delete-icon {
    align-items: center;
    background: color-mix(in srgb, #d84b45 10%, transparent);
    border: 1px solid color-mix(in srgb, #d84b45 35%, transparent);
    border-radius: 50%;
    color: #d84b45;
    display: inline-flex;
    height: 2.1rem;
    justify-content: center;
    width: 2.1rem;
}

.taskmanager-xaf-delete-icon svg {
    fill: none;
    height: 1rem;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
    width: 1rem;
}

.taskmanager-xaf-delete-content strong {
    display: block;
    font-size: .86rem;
    line-height: 1.3;
    margin: .05rem 0 .3rem;
}

.taskmanager-xaf-delete-content p {
    font-size: .78rem;
    line-height: 1.45;
    margin: 0;
}

.taskmanager-xaf-delete-content small {
    display: block;
    font-size: .7rem;
    line-height: 1.4;
    margin-top: .42rem;
    opacity: .72;
}

.taskmanager-xaf-delete-popup .dxbl-modal-footer {
    align-items: flex-end;
    display: flex;
    gap: .65rem;
    justify-content: flex-end;
    min-height: 4.15rem;
    padding: 1rem 1.25rem .8rem;
}

.taskmanager-xaf-delete-popup .dxbl-modal-footer > :is(div, section) {
    display: flex;
    gap: .65rem;
    justify-content: flex-end !important;
    width: 100%;
}

.taskmanager-xaf-delete-popup .dxbl-modal-footer .dxbl-btn {
    min-width: 5.5rem;
}

.taskmanager-xaf-delete-popup .taskmanager-xaf-delete-confirm {
    --dxbl-btn-bg: #d7192d;
    --dxbl-btn-border-color: #d7192d;
    --dxbl-btn-color: #fff;
    background-color: #d7192d;
    border-color: #d7192d;
    color: #fff;
}

.taskmanager-xaf-delete-popup .taskmanager-xaf-delete-confirm:hover {
    --dxbl-btn-bg: #ba1325;
    --dxbl-btn-border-color: #ba1325;
    background-color: #ba1325;
    border-color: #ba1325;
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) .taskmanager-xaf-delete-popup .dxbl-modal-content {
    background-color: var(--taskmanager-dark-panel) !important;
    border-color: var(--taskmanager-dark-border) !important;
    color: var(--taskmanager-dark-text) !important;
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) .taskmanager-xaf-delete-popup :is(.dxbl-modal-header, .dxbl-modal-footer) {
    background-color: var(--taskmanager-dark-panel-header) !important;
    border-color: var(--taskmanager-dark-border) !important;
    color: var(--taskmanager-dark-text) !important;
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) .taskmanager-xaf-delete-popup .dxbl-modal-body {
    background-color: var(--taskmanager-dark-canvas) !important;
    color: var(--taskmanager-dark-text) !important;
}

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

.xaf-ai-text-editor {
    display: grid;
    gap: .25rem;
    width: 100%;
}

.xaf-ai-text-input {
    width: 100%;
}

.xaf-ai-summary-input {
    min-height: 2.35rem;
}

.xaf-ai-toolbar {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: .3rem;
    display: flex;
    flex-wrap: wrap;
    gap: .18rem;
    justify-self: start;
    max-width: 100%;
    padding: .1rem 0;
    width: fit-content;
}

.xaf-ai-badge {
    align-items: center;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    border-radius: .26rem;
    color: #fff;
    display: inline-flex;
    font-size: .58rem;
    font-weight: 800;
    height: 1.28rem;
    justify-content: center;
    letter-spacing: .03em;
    width: 1.28rem;
}

.xaf-ai-operation,
.xaf-ai-button {
    border: 1px solid var(--bs-border-color, #cbd5e1);
    border-radius: .28rem;
    box-sizing: border-box;
    font-size: .7rem;
    line-height: 1.1;
    height: 1.5rem;
    min-height: 1.5rem;
}

.xaf-ai-operation {
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #1f2937);
    flex: 0 1 10.25rem;
    min-width: 7.75rem;
    max-width: 10.25rem;
    padding: .08rem 1.35rem .08rem .38rem;
}

.xaf-ai-button {
    align-items: center;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #1f2937);
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    padding: .08rem .4rem;
    white-space: nowrap;
}

.xaf-ai-operation:focus-visible,
.xaf-ai-button:focus-visible,
.xaf-ai-upload:focus-within {
    outline: 2px solid color-mix(in srgb, var(--bs-primary, #176b5d) 72%, transparent);
    outline-offset: 1px;
}

.xaf-ai-button:hover:not(:disabled):not(.disabled) {
    background: color-mix(in srgb, var(--bs-primary, #2563eb) 8%, var(--bs-body-bg, #fff));
    border-color: var(--bs-primary, #2563eb);
}

.xaf-ai-button-primary {
    background: var(--bs-primary, #2563eb);
    border-color: var(--bs-primary, #2563eb);
    color: #fff;
}

.xaf-ai-button-primary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--bs-primary, #2563eb) 86%, #000);
    color: #fff;
}

.xaf-ai-run {
    background: color-mix(in srgb, var(--bs-primary, #176b5d) 12%, transparent);
    border-color: color-mix(in srgb, var(--bs-primary, #176b5d) 58%, transparent);
    color: var(--bs-primary, #176b5d);
    font-weight: 650;
}

.xaf-ai-run:hover:not(:disabled) {
    background: color-mix(in srgb, var(--bs-primary, #176b5d) 20%, transparent);
    border-color: var(--bs-primary, #176b5d);
    color: var(--bs-primary, #176b5d);
}

.xaf-ai-button:disabled,
.xaf-ai-button.disabled,
.xaf-ai-operation:disabled {
    cursor: default;
    opacity: .55;
}

.xaf-ai-upload {
    margin: 0;
    overflow: hidden;
    position: relative;
}

.xaf-ai-upload input[type="file"] {
    height: 1px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 1px;
}

.xaf-ai-hint {
    color: var(--bs-secondary-color, #64748b);
    font-size: .68rem;
}

.xaf-ai-autocomplete {
    align-items: center;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: .42rem;
    color: #1e1b4b;
    display: flex;
    flex-wrap: wrap;
    font-size: .76rem;
    gap: .35rem;
    justify-content: space-between;
    padding: .35rem .5rem;
}

.xaf-ai-autocomplete > span {
    flex: 1 1 20rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.xaf-ai-autocomplete-loading {
    color: #4338ca;
}

.xaf-ai-autocomplete-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: .25rem;
}

.xaf-ai-unavailable {
    color: var(--bs-warning-text-emphasis, #92400e);
}

.xaf-ai-message,
.xaf-ai-result {
    border-radius: .5rem;
    font-size: .76rem;
    padding: .45rem .55rem;
}

.xaf-ai-error {
    background: color-mix(in srgb, var(--bs-danger, #dc2626) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--bs-danger, #dc2626) 30%, transparent);
    color: var(--bs-danger-text-emphasis, #991b1b);
}

.xaf-ai-result {
    background: color-mix(in srgb, var(--bs-primary, #2563eb) 5%, var(--bs-body-bg, #fff));
    border: 1px solid color-mix(in srgb, var(--bs-primary, #2563eb) 22%, transparent);
    display: grid;
    gap: .35rem;
}

.xaf-ai-result-header {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: space-between;
}

.xaf-ai-result-header span {
    color: var(--bs-secondary-color, #64748b);
    font-size: .75rem;
}

.xaf-ai-result-text {
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #cbd5e1);
    border-radius: .4rem;
    color: var(--bs-body-color, #1f2937);
    min-height: 6rem;
    padding: .55rem;
    resize: vertical;
    width: 100%;
}

.xaf-ai-result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .xaf-ai-toolbar {
    background: transparent;
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .xaf-ai-badge {
    background: linear-gradient(135deg, #176b5d, #31917d);
    color: #ffffff;
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .xaf-ai-operation {
    background: var(--taskmanager-light-input);
    border-color: var(--taskmanager-light-border-strong);
    color: var(--taskmanager-light-text);
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .xaf-ai-button {
    background: var(--taskmanager-light-panel-raised);
    border-color: var(--taskmanager-light-border);
    color: var(--taskmanager-light-text);
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .xaf-ai-button:hover:not(:disabled):not(.disabled) {
    background: var(--taskmanager-light-panel-header);
    border-color: #5fae98;
    color: #082a24;
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .xaf-ai-button-primary {
    background: #176b5d;
    border-color: #176b5d;
    color: #ffffff;
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .xaf-ai-button-primary:hover:not(:disabled) {
    background: #0d443b;
    border-color: #0d443b;
    color: #ffffff;
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .xaf-ai-run {
    background: color-mix(in srgb, #176b5d 10%, transparent);
    border-color: color-mix(in srgb, #176b5d 48%, var(--taskmanager-light-border));
    color: #0d594c;
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .xaf-ai-run:hover:not(:disabled) {
    background: color-mix(in srgb, #176b5d 17%, transparent);
    border-color: #176b5d;
    color: #0d443b;
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .xaf-ai-autocomplete {
    background: var(--taskmanager-light-panel);
    border-color: var(--taskmanager-light-border-strong);
    color: var(--taskmanager-light-text);
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .xaf-ai-autocomplete-loading {
    color: #176b5d;
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .xaf-ai-result {
    background: var(--taskmanager-light-panel);
    border-color: var(--taskmanager-light-border-strong);
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) :is(
    .xaf-ai-result-text,
    .xaf-ai-result-text:focus
) {
    background: var(--taskmanager-light-input);
    border-color: var(--taskmanager-light-border-strong);
    color: var(--taskmanager-light-text);
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) :is(
    .xaf-ai-hint,
    .xaf-ai-result-header span
) {
    color: var(--taskmanager-light-muted);
}

:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .xaf-ai-toolbar {
    background: transparent;
}

:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .xaf-ai-badge {
    background: linear-gradient(135deg, #176b5d, #3e8f7b);
    color: #ffffff;
}

:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .xaf-ai-operation {
    background: var(--taskmanager-dark-input);
    border-color: var(--taskmanager-dark-border-strong);
    color: var(--taskmanager-dark-text);
}

:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .xaf-ai-operation option {
    background: var(--taskmanager-dark-panel);
    color: var(--taskmanager-dark-text);
}

:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .xaf-ai-button {
    background: var(--taskmanager-dark-panel-raised);
    border-color: var(--taskmanager-dark-border);
    color: var(--taskmanager-dark-text);
}

:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .xaf-ai-button:hover:not(:disabled):not(.disabled) {
    background: #253340;
    border-color: #5fae98;
    color: #ffffff;
}

:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .xaf-ai-button-primary {
    background: #2d806f;
    border-color: #4da58f;
    color: #ffffff;
}

:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .xaf-ai-button-primary:hover:not(:disabled) {
    background: #3b9d87;
    border-color: #6bc0aa;
    color: #ffffff;
}

:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .xaf-ai-run {
    background: color-mix(in srgb, #65cfb2 10%, transparent);
    border-color: color-mix(in srgb, #65cfb2 44%, var(--taskmanager-dark-border));
    color: #a8ead7;
}

:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .xaf-ai-run:hover:not(:disabled) {
    background: color-mix(in srgb, #65cfb2 17%, transparent);
    border-color: #65cfb2;
    color: #d5f8ee;
}

:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .xaf-ai-autocomplete {
    background: var(--taskmanager-dark-panel);
    border-color: var(--taskmanager-dark-border-strong);
    color: var(--taskmanager-dark-text);
}

:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .xaf-ai-autocomplete-loading {
    color: #83d8c0;
}

:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .xaf-ai-result {
    background: var(--taskmanager-dark-panel);
    border-color: var(--taskmanager-dark-border-strong);
}

:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) :is(
    .xaf-ai-result-text,
    .xaf-ai-result-text:focus
) {
    background: var(--taskmanager-dark-input);
    border-color: var(--taskmanager-dark-border-strong);
    color: var(--taskmanager-dark-text);
}

:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) :is(
    .xaf-ai-hint,
    .xaf-ai-result-header span
) {
    color: var(--taskmanager-dark-muted);
}

@media (max-width: 720px) {
    .xaf-ai-toolbar {
        width: 100%;
    }

    .xaf-ai-operation {
        flex: 1 1 9rem;
        min-width: 0;
        max-width: 100%;
        width: auto;
    }
}

.ai-preview-page {
    align-items: flex-start;
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, .18), transparent 34rem),
        #f4f7fb;
    color: #111827;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: 3rem 2rem;
}

.ai-preview-page.dxbl-theme-dark {
    background:
        radial-gradient(circle at top left, rgba(70, 187, 157, .12), transparent 34rem),
        var(--taskmanager-dark-main, #111c25);
    color: var(--taskmanager-dark-text, #edf4f1);
}

.ai-preview-page.dxbl-theme-dark .ai-preview-card {
    background: var(--taskmanager-dark-panel, #16232d);
    border-color: var(--taskmanager-dark-border, #314552);
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, .32);
}

.ai-preview-page.dxbl-theme-dark :is(.ai-preview-intro, .ai-preview-value pre) {
    color: var(--taskmanager-dark-muted, #a9b9c2);
}

.ai-preview-page.dxbl-theme-dark .ai-preview-value pre {
    background: var(--taskmanager-dark-main, #111c25);
    border-color: var(--taskmanager-dark-border, #314552);
}

.ai-preview-card {
    background: #fff;
    border: 1px solid #dce3ed;
    border-radius: 1rem;
    box-shadow: 0 1.5rem 4rem rgba(31, 41, 55, .12);
    display: grid;
    gap: 1.25rem;
    max-width: 64rem;
    padding: 2.5rem;
    width: 100%;
}

.ai-preview-card h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    letter-spacing: -.04em;
    margin: 0;
}

.ai-preview-eyebrow {
    color: #2563eb;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .16em;
    margin: 0 0 -.75rem;
    text-transform: uppercase;
}

.ai-preview-intro {
    color: #5f6b7a;
    margin: -.5rem 0 0;
}

.ai-preview-status {
    border-radius: .5rem;
    font-size: .82rem;
    padding: .55rem .7rem;
}

.ai-preview-status.available {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
}

.ai-preview-status.unavailable {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}

.ai-preview-value {
    display: grid;
    gap: .4rem;
}

.ai-preview-summary {
    display: grid;
    gap: .45rem;
}

.ai-preview-summary > label {
    color: #374151;
    font-size: .875rem;
    font-weight: 700;
}

.ai-preview-value pre {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: .5rem;
    margin: 0;
    min-height: 4rem;
    padding: .75rem;
    white-space: pre-wrap;
}

.xaf-color-editor {
    display: grid;
    grid-template-columns: 3rem minmax(7rem, 1fr);
    align-items: center;
    gap: .5rem;
    width: 100%;
}

.xaf-color-editor-picker {
    width: 3rem;
    height: 2.25rem;
    padding: .15rem;
    border: 1px solid var(--bs-border-color, #adb5bd);
    border-radius: .375rem;
    background: var(--bs-body-bg, #fff);
    cursor: pointer;
}

.xaf-color-editor-picker:disabled {
    cursor: default;
    opacity: .65;
}

.xaf-color-editor-value {
    width: 100%;
    min-height: 2.25rem;
    padding: .375rem .75rem;
    border: 1px solid var(--bs-border-color, #adb5bd);
    border-radius: .375rem;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #212529);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    text-transform: uppercase;
}

.xaf-color-editor-value:focus,
.xaf-color-editor-picker:focus {
    border-color: var(--bs-primary, #0d6efd);
    outline: 0;
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--bs-primary, #0d6efd) 25%, transparent);
}

body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) :is(.xaf-color-editor-picker, .xaf-color-editor-value) {
    background: var(--taskmanager-light-input);
    border-color: var(--taskmanager-light-border-strong);
    color: var(--taskmanager-light-text);
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) :is(.xaf-color-editor-picker, .xaf-color-editor-value) {
    background: var(--taskmanager-dark-input);
    border-color: var(--taskmanager-dark-border-strong);
    color: var(--taskmanager-dark-text);
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) .xaf-color-editor-picker::-webkit-color-swatch-wrapper {
    padding: .12rem;
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) .xaf-color-editor-picker::-webkit-color-swatch {
    border: 1px solid var(--taskmanager-dark-border-strong);
    border-radius: .2rem;
}

:is(body.dxbl-theme-dark, body.dxbl-theme-fluent-mode-dark) .xaf-color-editor-picker::-moz-color-swatch {
    border: 1px solid var(--taskmanager-dark-border-strong);
    border-radius: .2rem;
}

.color-preview-page {
    align-items: center;
    background:
        radial-gradient(circle at top left, rgba(59, 130, 246, 0.18), transparent 34rem),
        #f4f7fb;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
}

.color-preview-card {
    background: #fff;
    border: 1px solid #dce3ed;
    border-radius: 1rem;
    box-shadow: 0 1.5rem 4rem rgba(31, 41, 55, 0.12);
    max-width: 38rem;
    padding: 2.5rem;
    width: 100%;
}

.color-preview-card h1 {
    color: #111827;
    font-size: clamp(2rem, 5vw, 3rem);
    letter-spacing: -0.04em;
    margin: 0;
}

.color-preview-eyebrow {
    color: #2563eb;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    margin: 0 0 0.5rem;
    text-transform: uppercase;
}

.color-preview-intro {
    color: #5f6b7a;
    margin: 0.75rem 0 2rem;
}

.color-preview-field {
    display: grid;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.color-preview-field label {
    color: #374151;
    font-size: 0.875rem;
    font-weight: 600;
}

.color-preview-swatch {
    align-items: flex-end;
    border-radius: 0.75rem;
    color: #fff;
    display: flex;
    justify-content: space-between;
    margin-top: 1.25rem;
    min-height: 8rem;
    padding: 1.25rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
    transition: background-color 160ms ease;
}

.color-preview-swatch span {
    font-size: 0.8rem;
    opacity: 0.9;
}

.color-preview-swatch strong {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    letter-spacing: 0.06em;
}

.image-preview-page {
    background: #f4f7fb;
    color: #111827;
    min-height: 100vh;
    padding: 3rem 2rem 5rem;
}

.image-preview-shell {
    margin: 0 auto;
    max-width: 82rem;
}

.image-preview-page h1 {
    font-size: clamp(2rem, 5vw, 3.25rem);
    letter-spacing: -0.04em;
    margin: 0;
}

.image-preview-eyebrow {
    color: #2563eb;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    margin: 0 0 0.5rem;
    text-transform: uppercase;
}

.image-preview-intro {
    color: #5f6b7a;
    margin: 0.75rem 0 2.5rem;
}

.image-preview-group {
    margin-top: 2.5rem;
}

.image-preview-group h2 {
    font-size: 1.15rem;
    margin-bottom: 0.9rem;
}

.image-preview-grid {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

.image-preview-item {
    align-items: center;
    background: #fff;
    border: 1px solid #dce3ed;
    border-radius: 0.75rem;
    display: flex;
    gap: 0.9rem;
    min-height: 5rem;
    padding: 0.9rem;
}

.image-preview-item img {
    flex: 0 0 auto;
    height: 2.5rem;
    object-fit: contain;
    width: 2.5rem;
}

.image-preview-item div {
    display: grid;
    min-width: 0;
}

.image-preview-item strong {
    font-size: 0.9rem;
}

.image-preview-item span {
    color: #6b7280;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.72rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.image-preview-page.dxbl-theme-dark {
    background: #111827;
    color: #f3f4f6;
}

.image-preview-page.dxbl-theme-dark .image-preview-intro,
.image-preview-page.dxbl-theme-dark .image-preview-item span {
    color: #aeb8c7;
}

.image-preview-page.dxbl-theme-dark .image-preview-item {
    background: #1f2937;
    border-color: #3b4758;
}

.image-preview-page.dxbl-theme-dark .image-preview-item img {
    filter: brightness(0) invert(1);
}

/* Central issue overview -------------------------------------------------- */