@import '/_content/Waves.Tooling.App.Core/css/fonts.css';
@import '/_content/Waves.Tooling.App.Components/css/waves-app-component.css';

:root {
    color-scheme: var(--mud-native-html-color-scheme); /* link MudBlazor theme mode to the CSS styling system - allows css light-dark function to work */    
}

body {    
    height: 100%;
    overflow: hidden;
}

body:has(.loading-progress)::after {
    content: "";
    background-image: url("/logo.svg");
    background-position: right bottom;
    background-size: 50%;
    background-repeat: no-repeat;
    opacity: 0.2;
    top: 0;
    left: 0;
    bottom: 15px;
    right: 15px;
    position: absolute;
    z-index: -1;
}

blockquote p:last-child {
    margin-bottom: 0;
}

.home div[sm="4"], .home div[sm="6"], .home div[sm="8"] {
    border-bottom: 1px solid var(--neutral-stroke-divider-rest) !important;
}

/*.siteheader {    
    background-color: var(--fill-color) !important;
    border-bottom: calc(var(--stroke-width) * 2px) solid var(--accent-fill-rest);
    margin-bottom: 0 !important;
}*/

    /*.siteheader .logo {
        width: 108px;        
        grid-column: 1;
    }

    .siteheader .search {
        display: flex;
        align-items: center;
        margin-right: 10px;*/
/*        padding-right: 20px;*/
    /*}

    .siteheader .header-toolbar {
        
    }

    [dir="rtl"] .siteheader .settings {
        padding: 0 0 0 6px;
        margin-left: 10px;
        margin-right: 0;
    }

    [dir="rtl"] .siteheader .search {
        padding-left: 20px;
        padding-right: 0;
    }

    [dir="rtl"] .siteheader .header-toolbar {
        
    }*/

/*.pageheader {
    width: 100%;
    background-color: var(--neutral-layer-1) !important; 
    box-shadow: calc(var(--stroke-width) * 1px) 0.1rem 0.3rem var(--neutral-layer-4);
    margin-bottom: 0 !important;
}

.pagefooter {
    width: 100%;
    background-color: var(--neutral-layer-1) !important;    
    box-shadow: calc(var(--stroke-width) * 1px) 0.1rem 0.3rem var(--neutral-layer-4);
    margin-bottom: 0 !important;
}*/

.search-result-icon {
    vertical-align: middle;
}

.body-stack {
    flex-direction: row;
}

.footer {
    display: flex !important;
    flex-direction: row !important;
    background: var(--fill-color);
    color: var(--neutral-foreground-rest) !important;
    padding: 10px 10px;
    margin-top: 0px !important;
}

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

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

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


/*nav.sitenav {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.75rem 0.25rem 0.5rem;
    height: calc(100dvh - 100px);
    overflow-y: auto;
    background-color: var(--neutral-fill-layer-rest);
    box-shadow: calc(var(--stroke-width) * 1px) 0px 0.25rem var(--accent-fill-rest);
}*/

nav h2 {
    font-size: var(--type-ramp-plus-1-font-size);
    line-height: var(--type-ramp-plus-1-line-height);
    padding: 15px 0;
    margin: 0;
    pointer-events: none;
}

nav h3 {
    font-size: var(--type-ramp-base-font-size);
    line-height: var(--type-ramp-minus-1-line-height);
    padding: 10px 0;
    margin: 0;
    pointer-events: none;
}


nav fluent-anchor {
    width: 100%;
    color: var(--fill-color);
}

    nav fluent-anchor::part(control) {
        justify-content: start;
        background: var(--accent-fill-rest);
    }


.fluent-nav-link.notactive .fluent-nav-text {
    font-weight: 600 !important;
}

/* Fixed width navigation for non-mobile breakpoints */
.nav-container {
    height: 100%;
}

/*.content-message-bar-top {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
    padding: 0;
    margin: 0;
    overflow: hidden;
}*/

/*.content {
    height: 1px;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.5rem 0.5rem 0.75rem;
    margin: 0 0;
    overflow: hidden;
}*/

ul.news {
    padding-left: 0;
    list-style-type: none;
}

    ul.news li {
        display: flex;
        gap: calc(var(--design-unit) * 2px);
        align-items: center;
        padding-bottom: calc(var(--design-unit) * 2px);
    }

.news .calendar {
}

.news a {
    font-size: var(--type-ramp-plus-1-font-size);
    line-height: var(--type-ramp-plus-1-line-height);
    font-weight: 600;
    text-decoration: none;
}


/*#navmenu-toggle {
    display: none;
}

.navmenu-icon {
    display: none;
}

#navmenu-toggle:checked > nav {
    width: 0px;
}

[dir="rtl"] #navmenu-toggle:checked ~ nav {
    right: 0px;
}*/

#color {
    margin-right: 10px;
    margin-left: 0;
}

[dir="rtl"] #color {
    margin-left: 10px;
    margin-right: 0;
}


label {
    color: var(--neutral-foreground-rest);
    cursor: pointer;
}

.shell, .sourceCode {
    background: var(--neutral-stroke-layer-rest);
    padding: 7px;
}

code {
    background: var(--neutral-stroke-layer-rest);
}

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

.highlighted {
    background-color: var(--accent-stroke-control-active);
}

    .highlighted > td {
        color: var(--neutral-fill-inverse-rest);
    }


kbd {
    padding: 0.10rem 0.25rem;
    font-size: 0.875em;
    color: var(--neutral-foreground-rest);
    background-color: var(--neutral-fill-secondary-rest);
    border-radius: 0.25rem;
    border: 1px solid var(--accent-fill-rest);
}

#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;
    color: var(--neutral-foreground-rest);
}

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

.blazor-error-boundary {
    border: 1px dashed var(--error);
    background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nNDgnIGhlaWdodD0nNDgnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZycgeG1sbnM6eGxpbms9J2h0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsnIG92ZXJmbG93PSdoaWRkZW4nIGZpbGw9JyNCQzJGMzInPjxwYXRoIGQ9J0MyNCA0YTIwIDIwIDAgMSAwIDAgNDAgMjAgMjAgMCAwIDAgMC00MFptMCA5Yy42OSAwIDEuMjUuNTYgMS4yNSAxLjI1djEyLjVhMS4yNSAxLjI1IDAgMSAxLTIuNSAwdi0xMi41YzAtLjY5LjU2LTEuMjUgMS4yNS0xLjI1Wm0wIDIxYTIgMiAwIDEgMSAwLTQgMiAyIDAgMCAxIDAgNFonPjwvcGF0aD48L3N2Zz4=") no-repeat 1rem/1.8rem;
    padding: 1rem 1rem 1rem 3.7rem;
}

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

#logo-anim path:nth-child(1) {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    stroke-width: 1.25em;
    fill: #682A7B;
    fill-opacity: 0.1;
    animation: line-anim 2s ease forwards, fill-anim 1s ease forwards 1.5s;
}

#logo-anim path:nth-child(2) {
    stroke-width: 1.25em;
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    fill: #4A81C3;
    fill-opacity: 0.1;
    animation: line-anim 2s ease forwards, fill-anim 3s ease forwards 1.2s;
}

@keyframes line-anim {
    to {
        stroke-dashoffset: 0;
        stroke-width: 0;
    }
}

@keyframes fill-anim {
    from {
        fill-opacity: 0.1;
    }

    to {
        fill-opacity: 1;
    }
}

@media (max-width: 767px) {

    /*.siteheader {
        grid-area: header;
        grid-template-columns: 150px 1fr;
        align-items: center;
        justify-content: flex-start;
    }

        
        .siteheader .logo {
            width: 160px;
            height: 23px;*/
            /*padding: 0 25px;*/
        /*}


    .body-stack {
        flex-direction: column !important;
    }*/

/*    .navmenu {
        z-index: 499;
        box-shadow: calc(var(--stroke-width) * 1px) calc(var(--stroke-width) * 1px) 0.5rem var(--accent-fill-rest);
        width: 100%;
    }

    #navmenu-toggle {
        appearance: none;
    }    

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

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

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

    #navmenu-toggle ~ article {
        display: block;
    }

    #navmenu-toggle:checked ~ article {
        display: none;
    }*/

    /*.content {
        flex-direction: column;
        padding: 0.5rem 0.25rem 0.5rem 0.25rem;
    }*/

    /*article {
        padding-top: 0px;
        width: 100%;
    }*/

/*    .footer {
        display: grid;
        grid-template-columns: 10px auto 10px;
    }*/

    /*.footer .version {
            grid-column: 2;
            justify-self: start;
        }*/

/*    .footer .copy {
            grid-column: 2;
            grid-row: 2;
            justify-self: end;
        }*/


    @media screen and (max-width: 767px) and (orientation: landscape) {

        nav {
            padding: 25px 40px;
        }

            nav ul {
                margin: 0 0;
            }
    }
}

/* Surface Duo specific styling */
@media (horizontal-viewport-segments: 2) {

    .siteheader {
        grid-area: header;
        display: grid;
        grid-template-columns: 150px calc(env(viewport-segment-width 0 0) - 160px) 1fr;
        grid-template-rows: 1fr;
        align-items: center;
        justify-content: flex-start;
        padding: 12px 0;
        background-color: var(--neutral-layer-4);
    }

        .siteheader a {
            padding: 0px 15px;
            color: var(--neutral-foreground-rest);
        }

        /*.siteheader .logo {
            grid-column: 1;
            width: 108px;
            height: 23px;*/
            /*padding: 0 30px;*/
        /*}*/

    main {
        display: grid;
        grid-template-columns: env(viewport-segment-width 0 0) 1fr;
        grid-template-rows: repeat(0, 1fr);
    }

    nav {
        grid-column: 1;
        width: env(viewport-segment-width 0 0) !important;
    }

   /* .content {
        display: grid;
        grid-template-columns: auto;
    }    */

    /*article {
        grid-area: 1 / 2 / 2 / 3;
        padding-top: 0px;
        margin-inline-start: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));*/ /* hinge width */
        /*margin-inline-end: calc(100% - env(viewport-segment-left 1 0));
        width: auto;
    }*/
}

@media print {
    pre, code {
        white-space: pre-wrap !important;
        word-wrap: break-word !important;
    }

    body {
        overflow: visible !important;
        height: auto !important;
    }

    .body-content {
        overflow: hidden !important;
        max-height: 100% !important;
    }

    h2:nth-of-type(n+2) {
        page-break-before: always !important;
    }


    h3, h4, h5, h6 {
        page-break-after: avoid !important;
    }

    fluent-tab-panel {
        page-break-inside: avoid !important;
    }

    .navmenu, .siteheader {
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .layout > footer {
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    a {
        text-decoration: none;
        color: black;
    }

        a::after {
            content: " (" attr(href) ")";
            font-size: 12px;
            color: #555;
        }

    fluent-tab-panel {
        display: block !important; /* Make all tab panels visible */
        visibility: visible !important;
        page-break-inside: avoid !important;
    }

        fluent-tab-panel[hidden] {
            display: block !important; /* Override hidden attribute */
        }

    button, .FluentButton {
        display: none !important;
    }

    /*article {
        padding: 0 !important;
        border-right: hidden !important;
    }*/

    .video-link {
        display: block;
        font-size: 12pt;
        color: black;
    }

    img {
        width: auto !important; /* Shrinks oversized images */
        max-height: 250px !important; /* Limits vertical size */
        display: block; /* Prevents inline scaling issues */
    }
}

@media screen {
    .video-link {
        display: none;
    }
}

/*NEW*/

/*ToDo: make this more generic for common use */
.waves-page-layout-host-stack {
/*    row-gap: 0.5rem !important;*/
}

.waves-component-layout-host-stack {
/*    row-gap: 0.5rem !important;*/
}

fluent-anchor.status-bar-link::part(control) {
    line-height: unset !important;
}

/* Dialog layout fix - make content area flex and scrollable */
fluent-dialog.fluent-dialog-main {
    display: flex;
    flex-direction: column;
    max-height: var(--dialog-height);
}

    fluent-dialog.fluent-dialog-main .fluent-dialog-header {
        flex-shrink: 0;
    }

    fluent-dialog.fluent-dialog-main .fluent-dialog-body {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        min-height: 0; /* Important for flex children to scroll properly */
    }

    fluent-dialog.fluent-dialog-main .fluent-dialog-footer {
        flex-shrink: 0;
    }

/* START FluentButton notification styling */
fluent-button.app-header-notification-button::part(control) {
    padding: 0 !important;
}

fluent-button.app-header-notification-button::part(content) {
    height: 24px;
    width: 24px;
}
/* END FluentButton notification styling */

/* START fluent-messagebar styling */
/* Base styling for all message bars */
.fluent-messagebar-notification {
    border-radius: 8px;
    margin-bottom: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    padding: 12px 16px;
}

    /* Style by intent class */
    .fluent-messagebar-notification.intent-error {
        border-left: 4px solid var(--error);
    }

    .fluent-messagebar-notification.intent-warning {
        border-left: 4px solid var(--warning);
    }

    .fluent-messagebar-notification.intent-success {
        border-left: 4px solid var(--success);
    }

    .fluent-messagebar-notification.intent-info {
        border-left: 4px solid var(--info);
    }

/* Style the content area */
.fluent-messagebar-notification-content {
    gap: 8px;
}

/* Style the message title */
.fluent-messagebar-notification-message {
    font-weight: 600;
}

/* Style the timestamp */
.fluent-messagebar-notification-time {
    opacity: 0.7;
    font-size: 0.85em;
}
/* END fluent-messagebar styling */

/*END NEW*/

/* Media Queries for Browser Size */

/* Browser size less than 599px = Xs */
@media (max-width: 599px) {
    /* In mobile make dialogs full screen */
    .fluent-dialog-main {
        --dialog-width: 100vw;
    }

    /* FluentUI Reconnect Dialog is too wide on some mobile displays */
    .components-reconnect-dialog {
        width: 15rem !important;
    }
}

/* Browser size less than 959px = Sm or smaller */
@media (max-width: 959px) {

    .siteheader {
        grid-area: header;
        grid-template-columns: 150px 1fr;
        align-items: center;
        justify-content: flex-start;
    }

/*        .siteheader .logo {
            width: 160px;
            height: 23px;
            padding: 0 25px;
        }*/

/*    nav.sitenav {
        width: unset;
        height: unset;
        background-color: var(--neutral-fill-layer-rest);
        box-shadow: calc(var(--stroke-width) * 1px) calc(var(--stroke-width) * 1px) 0.25rem var(--accent-fill-rest);
        position: absolute;
        z-index: 500;
    }*/
    
    .body-stack {
        flex-direction: column !important;
    }

/*    .content {
        flex-direction: column;
        padding: 0.25rem 0.25rem 0.25rem 0.25rem;
    }*/

    /*ToDo: make this more generic for common use */
    .waves-page-layout-host-stack {
/*        row-gap: 0.25rem !important;*/
    }

    .waves-component-layout-host-stack {
/*        row-gap: 0.25rem !important;*/
    }

    .fluent-dialog-main {
        --dialog-width: 340px;
    }
}

/* Browser size less than 1279px = Md or smaller */
@media (max-width: 1279px) {
}

/* Browser size less than 1919px = Lg or smaller */
@media (max-width: 1919px) {
}

/* Browser size less than 2559px = Xl or smaller */
@media (max-width: 2559px) {
}

/* Browser size less than 2560px = Xxl or smaller */
@media (min-width: 2560px) {
}

/* END - Media Queries for Broser Size */


/* MudBlazor MudListItem enhancements */
.waves-mli-align-start {
    align-items: flex-start;
}
/* END MudBlazor MudListItem enhancements */




/* MudBlazor Override - Sankey CHart */

/* When the last (bottom) item in the sankey chart is very small, then the label is clipped inside the chart
    real fix is in Mudblazor where the svg viewbox needs to be slightly bigger. Temporary fix is here where
    we can set overflow:visible on the svg and the clipping stops.
*/
.mudblazor-sankey-chart-svg-overflow-visible > div.mud-chart-sankey > svg {
    overflow: visible;
}

/* END MudBlazor Override - Sankey CHart */