html, body {
    /* The brand face (Inter, self-hosted in tip-app-theme.css) for plain HTML text too; MudBlazor sets it only
       on its own typography classes, so signed-out pages and raw headings fell back to Trebuchet MS. */
    font-family: "Inter", system-ui, "Segoe UI", Roboto, Arial, sans-serif;

    /* Theme 2.0: clip horizontal overflow (#536). Use clip, not hidden: hidden makes the body a
       scroll container, which breaks position:sticky on the nav rail and left a dark gap at
       lower resolutions (#538). This alone does not keep the closed NotificationPane out of
       reach, because the root's clip reaches the viewport as hidden; the
       .tip-notification-pane rule below does (#1702). */
    overflow-x: clip;
}

/* #1702: the NotificationPane drawer is outside a MudLayout, so MudBlazor gives it
   position: absolute and the closed panel sits 390px past the right edge of the body, widening
   the document. The root's overflow-x: clip reaches the viewport as hidden, which still lets
   focus or scrollIntoView slide the page sideways. A fixed box adds nothing to the document's
   scroll width, and an overlay drawer belongs to the viewport anyway. */
.mud-drawer.tip-notification-pane {
    position: fixed;
    /* On a phone narrower than the 390px panel, fit the viewport rather than start left of it,
       which clipped the title's first letter. The drawer's Width is min(390px, 100vw) too. */
    max-width: 100vw;
    box-sizing: border-box;
}

.tips-font-family {
    font-family: "Inter", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Footer fallbacks mirror PortalTheme.cs for a page with no MudThemeProvider (palette variables undefined there). */
body {
    --tip-fallback-surface: #ffffff;
    --tip-fallback-line: rgba(24, 24, 27, .10);
    --tip-fallback-muted: #5b6678;
    --tip-fallback-link: #1d4ed8;
    --tip-error-boundary-bg: #b32121;
    --tip-error-boundary-fg: #ffffff;
}

body.theme-dark {
    --tip-fallback-surface: #18181b;
    --tip-fallback-line: rgba(255, 255, 255, .09);
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

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

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

/*Loader Overlay Styles*/
.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--mud-palette-overlay-dark); /* palette scrim — mode-aware (#548) */
    display: flex;
    justify-content: center;
    align-items: start;
    padding-top: 10rem;
    z-index: 1000; /* high z-index to cover everything else */
}

.loader-overlay-title {
    display: block;
    margin-bottom: 10px;
}

.loader-overlay-container {
    text-align: center;
    width: 150px;
    display: block;
    padding-top: 10px;
}

.loader-overlay-container-md {
    text-align: center;
    width: 250px;
    display: block;
    padding-top: 10px;
}

/* ── Theme 2.0 app header (public layouts + NS portal) ──
   Replaces the old two-tone navy band. Themed app-bar driven by the palette, so it reads
   light on the public pages (default) and dark if ever toggled. */
.tip-appheader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 64px;
    padding: 0 24px;
    background: var(--mud-palette-appbar-background);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.tip-appheader-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.tip-appheader-logo {
    height: 38px;
    width: auto;
}

.tip-appheader-brand-group {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.tip-appheader-divider {
    width: 1px;
    height: 26px;
    background: var(--mud-palette-lines-default);
    flex-shrink: 0;
}

.tip-appheader-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tip-appheader-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* NS app-bar: live chip, user block (avatar + name + role), and Log Out. */
.tip-chiplive {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: var(--tip-status-ok-fg);
    background: color-mix(in srgb, var(--tip-tone-success) 14%, transparent);
    padding: 4px 11px;
    border-radius: 14px;
    white-space: nowrap;
}

.tip-chiplive-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mud-palette-success);
}

.tip-appheader-user {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.tip-appheader-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}

.tip-appheader-uname {
    font-size: 12.5px;
    line-height: 1.15;
    color: var(--mud-palette-text-primary);
}

.tip-appheader-urole {
    font-size: 10.5px;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.tip-appheader-logout {
    background: none;
    border: 0;
    padding: 0;
    font-family: inherit;
    font-size: 12.5px;
    color: var(--mud-palette-primary);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

    .tip-appheader-logout:hover {
        text-decoration: underline;
    }

/* Mode-aware wordmark: dark logo on a light surface, white mono logo on a dark surface. */
.tip-logo-dark {
    display: none;
}

body.theme-dark .tip-logo-light {
    display: none;
}

body.theme-dark .tip-logo-dark {
    display: inline-block;
}

@media screen and (max-width: 800px) {
    .tip-appheader {
        padding: 0 14px;
    }

    .tip-appheader-logo {
        height: 32px;
    }
}

/* Shared footer. Palette-driven with fallbacks so it also reads on the static login page
   (which has no MudThemeProvider, so the palette vars are undefined there). Fallbacks mirror
   PortalTheme.cs. */
.footer {
    background-color: var(--mud-palette-surface, var(--tip-fallback-surface));
    border-top: 1px solid var(--mud-palette-lines-default, var(--tip-fallback-line));
    padding: 10px 20px;
    width: 100%;
    font-size: 12px;
    color: var(--mud-palette-text-secondary, var(--tip-fallback-muted));
}

    .footer a {
        color: var(--tip-link, var(--tip-fallback-link));
        text-decoration: none;
    }

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

/* Copyright text morphs with the theme. It previously used Bootstrap's fixed gray,
   which read as washed-out on the dark surface. */
.tip-footer-copy {
    color: var(--mud-palette-text-secondary, var(--tip-fallback-muted));
}

/* In dark mode the fixed footer reads as a subtle raised bar that lifts off the darker
   page background, matching the card/appbar surfaces. */
body.theme-dark .footer {
    background-color: var(--mud-palette-surface, var(--tip-fallback-surface));
    box-shadow: 0 -1px 0 var(--mud-palette-lines-default, var(--tip-fallback-line));
}

/* Epic #2947 Phase 0 (#2971): the dev deploy banner's height, set only while the banner is on the page. The shell's
   sticky rail and top bar (MainLayout.razor.css) start below it and the rail shrinks by it, so a page that fits the
   screen gains no scrollbar. Unset (prd, local), the offset falls back to 0. */
body:has(.tip-dev-banner) {
    --tip-dev-banner-h: 1.75rem;
}