body {
    --body-font: "Segoe UI Variable", "Segoe UI", sans-serif;
    font-family: var(--body-font);
    font-size: var(--type-ramp-base-font-size);
    line-height: var(--type-ramp-base-line-height);
    margin: 0;
    height: 100vh;
}

/* ?? FluentUI design token overrides per theme ?? */
/* FluentDesignTheme sets document.body.dataset.theme = "light" | "dark" */
body[data-theme='dark'] {
    --neutral-fill-layer-rest: #111B3A;
}

.navmenu-icon {
    display: none;
}

.main {
    min-height: calc(100dvh - 86px);
    color: var(--neutral-foreground-rest);
    align-items: stretch !important;
}

.body-content {
    align-self: stretch;
    height: calc(100dvh - 86px) !important;
    display: flex;
}

.content {
    padding: 0.5rem 1.5rem;
    align-self: stretch !important;
    width: 100%;
}

footer {
    /* --neutral-layer-4 is the deepest FluentUI layer and reads as a black band in dark theme
       (issue #466); --neutral-layer-2 is the raised-chrome surface the app uses elsewhere. */
    background: var(--neutral-layer-2);
    color: var(--neutral-foreground-rest);
    align-items: center;
    padding: 10px 10px;
}

    footer a {
        color: var(--neutral-foreground-rest);
        text-decoration: none;
    }

        footer a:focus {
            outline: 1px dashed;
            outline-offset: 3px;
        }

        footer a:hover {
            text-decoration: underline;
        }

.alert {
    border: 1px dashed var(--accent-fill-rest);
    padding: 5px;
}


#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    margin: 20px 0;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::before {
        content: "An error has occurred. "
    }


#df-loading-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
    background-color: #1D2856;
    position: relative;
    overflow: hidden;
    --grid-x: 50%;
    --grid-y: 50%;
    --grid-radius: 90px;
    --grid-feather: 80px;
}

#df-loading-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(235, 191, 9, 0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(235, 191, 9, 0.09) 1px, transparent 1px);
    background-size: 48px 48px;
    background-position: 0 0;
    opacity: 0.6;
    pointer-events: none;
}

#df-loading-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(235, 191, 9, 0.4) 1px, transparent 1px), linear-gradient(90deg, rgba(235, 191, 9, 0.4) 1px, transparent 1px);
    background-size: 48px 48px;
    background-position: 0 0;
    pointer-events: none;
    opacity: 0.9;
    -webkit-mask-image: radial-gradient(circle at var(--grid-x) var(--grid-y), rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 1) var(--grid-radius), rgba(0, 0, 0, 0) calc(var(--grid-radius) + var(--grid-feather)));
    mask-image: radial-gradient(circle at var(--grid-x) var(--grid-y), rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 1) var(--grid-radius), rgba(0, 0, 0, 0) calc(var(--grid-radius) + var(--grid-feather)));
}

.df-logo-container {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    user-select: none;
}

.df-word {
    position: relative;
    display: inline-block;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: clamp(2.5rem, 8vw, 4.5rem);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.1;
}

/* Base layer: same color as background so text is hidden until the gold outline reveals it */
.df-text-base {
    display: block;
    color: #1D2856;
}

/* Overlay layer: gold outline only (transparent interior so base shows through),
   clipped left-to-right as --blazor-load-percentage advances */
.df-text-fill {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    -webkit-text-stroke: 1.5px #EBBF09;
    -webkit-text-fill-color: transparent;
    color: transparent;
    white-space: nowrap;
    clip-path: inset(0 calc(100% - var(--blazor-load-percentage, 0%)) 0 0);
    transition: clip-path 0.05s ease-in-out;
}

.df-divider-track {
    align-self: stretch;
    height: 5px;
    margin: 16px 0;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.df-divider-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: var(--blazor-load-percentage, 0%);
    background-color: #EBBF09;
    border-radius: 3px;
    transition: width 0.05s ease-in-out;
}

.df-subtitle {
    margin-top: 28px;
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: clamp(1.5rem, 4.5vw, 2.75rem);
    letter-spacing: 0.08em;
    line-height: 1.25;
    text-align: center;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

/* Played on the divider bar while Blazor initialises after download completes */
@keyframes df-bar-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.45; }
}

.df-complete .df-divider-bar {
    animation: df-bar-pulse 1s ease-in-out infinite;
}

code {
    color: #c02d76;
}

@media (max-width: 600px) {
    .header-gutters {
        margin: 0.5rem 3rem 0.5rem 1.5rem !important;
    }

    [dir="rtl"] .header-gutters {
        margin: 0.5rem 1.5rem 0.5rem 3rem !important;
    }

    .main {
        flex-direction: column !important;
        row-gap: 0 !important;
    }

    nav.sitenav {
        width: 100%;
        height: 100%;
    }

    #main-menu {
        width: 100% !important;
    }

        #main-menu > div:first-child:is(.expander) {
            display: none;
        }

    .navmenu {
        width: 100%;
    }

    #navmenu-toggle {
        appearance: none;
    }

        #navmenu-toggle ~ nav {
            display: none;
        }

        #navmenu-toggle:checked ~ nav {
            display: block;
        }

    .navmenu-icon {
        cursor: pointer;
        z-index: 10;
        display: block;
        position: absolute;
        top: 15px;
        left: unset;
        right: 20px;
        width: 20px;
        height: 20px;
        border: none;
    }

    [dir="rtl"] .navmenu-icon {
        left: 20px;
        right: unset;
    }
}

/* ── Shared Telerik/Kendo chart theming ─────────────────────────────────────
   The Kendo Fluent theme is light-only — its --kendo-color-* tokens do not flip
   for dark mode, so charts render light regardless of the app theme. Mapping the
   chart's OWN CSS variables onto FluentUI's theme-aware --neutral-* tokens makes
   any chart carrying class "df-chart" follow light/dark automatically. Reusable
   across features (the calibration/interview charts can adopt it too).

   NOTE the !important: the Kendo theme stylesheet loads AFTER app.css and declares
   these vars on `.k-chart` with equal specificity, so a plain rule loses the
   cascade. !important on the custom-property declarations wins regardless of
   source order (the theme's declarations are not !important). */
.df-chart {
    /* Plot area, axis text and gridlines. */
    --kendo-chart-bg: transparent !important;
    --kendo-chart-text: var(--neutral-foreground-rest) !important;
    --kendo-chart-major-lines: color-mix(in srgb, var(--neutral-stroke-rest) 70%, transparent) !important;
    --kendo-chart-minor-lines: transparent !important;
    --kendo-chart-crosshair-bg: var(--neutral-foreground-hint) !important;
    --kendo-chart-inactive: var(--neutral-foreground-hint) !important;

    /* General Kendo tokens so the tooltip/legend (when rendered within the chart) theme too. */
    --kendo-color-surface-alt: var(--neutral-fill-layer-rest) !important;
    --kendo-color-on-app-surface: var(--neutral-foreground-rest) !important;
    --kendo-color-border: var(--neutral-stroke-rest) !important;

    /* Axis labels, axis titles and legend text onto the app's type ramp, so chart text reads as part
       of the page rather than as Kendo's default face and size. Kendo composes its chart font from
       these two tokens; anything it renders as inline SVG font attributes is set from them at draw
       time, which is why this works where a plain `font-size` on .k-chart would not. */
    --kendo-font-family: var(--body-font-family, "Segoe UI", system-ui, sans-serif) !important;
    --kendo-font-size: var(--type-ramp-minus-1-font-size) !important;
}

/* ── Merge wizard (MergeIssuesDialog): on mobile, stretch only the scrollable
   dialog body to the dialog's right edge so its scrollbar sits at the edge
   instead of floating inside the control's --dialog-padding. The wizard itself
   pads the cards away from the scrollbar (.merge-wiz-main, scoped CSS); the
   header, footer and left side keep the standard dialog padding.
   Scoped to this dialog via :has(.merge-wiz); the leading `body` lifts
   specificity over the FluentUI bundle, which loads after app.css. ── */
@media (max-width: 640px) {
    body fluent-dialog:has(.merge-wiz) .fluent-dialog-body {
        width: calc(100% + var(--dialog-padding, 24px));
        margin-right: calc(-1 * var(--dialog-padding, 24px));
    }
}

/* ── Merge wizard: let the wizard grid take the dialog body's full height, so the step
   rail's divider runs all the way down to the footer instead of stopping where the
   current step's content happens to end. A column flex parent plus flex-grow gives the
   grid a height to fill; if the body is content-sized there is no spare height and this
   changes nothing. Desktop only — the rail is display:none below 640px. ── */
@media (min-width: 641px) {
    body fluent-dialog:has(.merge-wiz) .fluent-dialog-body {
        display: flex;
        flex-direction: column;
    }

    body fluent-dialog:has(.merge-wiz) .merge-wiz {
        flex: 1 1 auto;
    }
}