body {
    --body-font: "Roboto", sans-serif;
    margin: 0;
    padding: 0;
    height: 100vh;
    font-family: var(--body-font);
    font-size: var(--type-ramp-base-font-size);
    line-height: var(--type-ramp-base-line-height);
    font-weight: var(--font-weight);
    color: var(--neutral-foreground-rest);
    background: var(--neutral-fill-layer-rest);
}

fluent-toolbar fluent-switch,
fluent-toolbar p {
    margin-inline-end: 15px;
}

fluent-toolbar[orientation=horizontal] {
    width: 100%;
}

/* Hide any web components that haven't been */
:not(:defined),
.before-upgrade {
    visibility: hidden;
}

.col-long-content {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 100%;
}

.trace-tag-icon {
    margin-right: 3px;
}

:root {
    --log-critical: #F8ECEB;
    --log-error: #F8ECEB;
    --log-warning: #FBF3DD;
    --info: #717171 !important;
    --warning: #E85E36 !important;
    --success: #108310 !important;
    --badge-fill-error: var(--error);
    --badge-fill-warning: var(--warning);
    --badge-color-error: var(--foreground-on-accent-rest);
    --foreground-subtext-rest: #5D5D5D;
    --foreground-subtext-hover: #6C6C6C;
    --error-ui-foreground-color: #131313;
    --error-ui-accent-foreground-color: #1d00d0;
    --reconnection-ui-bg: rgb(255, 255, 255);
    --error-counter-badge-foreground-color: var(--neutral-fill-rest);
    --kbd-background-color: var(--neutral-layer-4);
    --messagebar-warning-background-color: #FDF6F3;
    --messagebar-warning-border-color: #f4bfab;
    --messagebar-info-background-color: #f5f5f5;
    --messagebar-info-border-color: #d1d1d1;
    --layout-toolbar-padding: calc(var(--design-unit) * 1.5px);
    /*
        --neutral-layer-2 is the background for the body of most of the site so
        we can default the datagrid hover color to that and just override it as
        necessary elsewhere (e.g. in the details view)
    */
    --datagrid-hover-color: var(--neutral-layer-2-hover);
}

[data-theme="dark"] {
    --log-critical: #493634;
    --log-error: #493634;
    --log-warning: #3F3A2B;
    --foreground-subtext-rest: #8D8D8D;
    --foreground-subtext-hover: #A1A1A1;
    --error-ui-foreground-color: #000000;
    --error-ui-accent-foreground-color: #512bd4;
    --reconnection-ui-bg: #D6D6D6;
    --error-counter-badge-foreground-color: #ffffff;
    --kbd-background-color: var(--fill-color);
    --messagebar-warning-background-color: #411200;
    --messagebar-warning-border-color: #DA3B01;
    --messagebar-info-background-color: #141414;
    --messagebar-info-border-color: #666;
    /* overrides of default fluentui-blazor styling */
    --error: #E10B11 !important;
    color-scheme: dark;
}

/*
    Override the `cursor: pointer` in the default styles from fluentui-blazor since
    we don't have selection implemented and the pointer doesn't really make sense.
    The `fluent-data-grid-row[role='row']` part added to the beginning is a bit of
    a hack to get the specificity higher than the default style to avoid using
    `!important` just in case there's a reason to to override further later.
*/
fluent-data-grid-row[role='row'].hover:not([row-type='header'],[row-type='sticky-header']):hover {
    cursor: auto;
}

[data-theme="light"] {
    color-scheme: light;
}

fluent-select.resource-list {
    /* overrides of default fluentui-blazor styling */
    --disabled-opacity: 0.7;
}

[data-theme="dark"] fluent-select.resource-list {
    /* overrides of default fluentui-blazor styling */
    --disabled-opacity: 0.85;
}

h1 {
    font-size: var(--type-ramp-plus-4-font-size);
    line-height: var(--type-ramp-plus-4-line-height);
    margin-top: 0.25rem;
    margin-bottom: 0.5rem;
}

#components-reconnect-modal :is(h5, p) {
    color: var(--error-ui-foreground-color);
}

#components-reconnect-modal a {
    color: var(--error-ui-accent-foreground-color);
}

#components-reconnect-modal {
    /* avoid making modal take the entire screen dimensions */
    inset: unset !important;
    /* force modal to be compact, centered, slightly padded, and towards the top - media queries below adjust the width and height of the modal for
     mobile and desktop screens
    */
    top: 5% !important;
    padding: 2px;
    /* add a slight shadow */
    box-shadow: 2px 2px 2px var(--neutral-fill-secondary-rest);
    /* avoid modal being see-through */
    opacity: 1 !important;
    /* ensure sufficient contrast between all elements in the modal and its background */
    background-color: var(--reconnection-ui-bg) !important;
}

@media (max-width: 768px) {
    #components-reconnect-modal {
        left: 15% !important;
        right: 15% !important;
        height: 130px;
    }

    /* we want less padding on mobile screens to preserve screen height for other elements */
    .page-header {
        padding: calc(var(--design-unit) * 1.5px) calc(var(--design-unit) * 0.5px) 0;
    }
}

@media (min-width: 768px) {
    #components-reconnect-modal {
        left: 30% !important;
        right: 30% !important;
        height: 105px;
    }

    .page-header {
        padding: calc(var(--design-unit) * 1.5px) calc(var(--design-unit) * 2.5px);
    }
}

.datagrid-overflow-area,
.parent-details-container {
    /*
        Height of the browser - static height for other content
        TODO: Is there a better way to do this?
    */
    height: 100%;
    min-width: 100%;
    overflow: auto;
}
fluent-data-grid{
    height: calc(100vh - 153px);
}
fluent-data-grid .empty-content-cell,
fluent-data-grid .loading-content-cell {
    padding: calc(var(--design-unit) * 5px);
    display: flex;
    align-items: center;
}

    /*
    Default LoadingContent template has align-items set to start, so the
    text doesn't line up with the spinner properly. It is set via inline style
    so we need to use !important to override it.
*/
    fluent-data-grid .loading-content-cell .stack-horizontal {
        align-items: center !important;
        column-gap: calc(var(--design-unit) * 2px) !important;
    }

.custom-body-content {
    margin-right: 10px;
}

.top-messagebar {
    padding: calc(var(--design-unit) * 2px);
    padding-bottom: 0;
}

.fluent-messagebar.intent-warning {
    background-color: var(--messagebar-warning-background-color) !important;
    border: 1px solid var(--messagebar-warning-border-color) !important;
}

.fluent-messagebar.intent-info {
    background-color: var(--messagebar-info-background-color) !important;
    border: 1px solid var(--messagebar-info-border-color) !important;
}

/* The fluent dialog's default fill color is too dark in our current dark theme.
   Setting it to the floating layer allows it to stand out more and doesn't impact light theme. */
fluent-dialog::part(control) {
    background: var(--neutral-layer-floating);
}

fluent-dialog fluent-toolbar {
    background-color: var(--neutral-layer-floating);
}

/* Changing the dialog's fill color means stealth buttons on the dialog have the wrong background,
   so change it to match */
fluent-dialog fluent-button[appearance=stealth]:not(:hover)::part(control),
fluent-dialog fluent-button[appearance=lightweight]:not(:hover)::part(control),
fluent-dialog fluent-anchor[appearance=stealth]:not(:hover)::part(control),
fluent-dialog fluent-anchor[appearance=lightweight]:not(:hover)::part(control) {
    background: var(--neutral-layer-floating);
}

/* But changing the stealth button's background in dialogs means the stealth buttons used as headers for grid cells
   now have the wrong background. So change that back */
fluent-dialog fluent-data-grid-cell[cell-type=columnheader] fluent-button[appearance=stealth]:not(:hover)::part(control) {
    background: var(--fill-layer);
}

.pane-details-subtext {
    color: var(--foreground-subtext-rest);
    padding-left: 0.5rem;
    font-size: 12px;
}

fluent-data-grid-row {
    align-items: center;
}

fluent-data-grid-cell .long-inner-content {
    width: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
}

.parent-details-container {
    display: grid;
    grid-template-rows: 1fr;
    gap: calc(var(--design-unit) * 2px);
}

.version {
    text-align: end;
    font-size: small;
}

.anchor-no-padding::part(control) {
    padding: 0;
    flex-grow: 0;
}

.ellipsis-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fluent-popover-header,
.fluent-popover-body {
    color: var(--neutral-foreground-rest);
}

.subtext {
    color: var(--foreground-subtext-rest);
}

.selected-row .subtext {
    color: var(--neutral-foreground-rest);
}

.validation-message {
    color: var(--error);
}

.selected-row,
.selected-row fluent-button[appearance=lightweight]:not(:hover)::part(control),
.selected-row fluent-anchor[appearance=lightweight]:not(:hover)::part(control) {
    background-color: var(--neutral-fill-secondary-rest); /* Same color as the menu hover */
}

    .selected-row fluent-button[appearance=lightweight]:hover::part(control),
    .selected-row fluent-anchor[appearance=lightweight]:hover::part(control) {
        background-color: var(--neutral-fill-stealth-rest); /* Essentially inverts the hover compared to an unselected row */
    }

.severity-icon {
    vertical-align: text-bottom;
    margin-right: 3px;
}

.align-text-bottom {
    vertical-align: text-bottom;
}

.visually-hidden {
    top: 0;
    left: -2px;
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden;
}

split-panels::part(handle) {
    display: none;
}

div.error-counter-badge {
    padding: 3px 3px;
    color: var(--error-counter-badge-foreground-color) !important; /* color is applied directly to div style, so !important to override since we can't use a more specific selector */
}

.layout > .header > .header-gutters {
    margin: 0 1.5rem 0 0;
}

layout > .header {
    font-size: var(--type-ramp-base-font-size);
}

.flex-filler {
    flex-grow: 1;
}


kbd {
    color: unset;
    background-color: var(--kbd-background-color);
}

fluent-switch.table-switch::part(label) {
    width: 160px;
}

/*
    If ShowHover is enabled on a FluentDataGrid, we need to tweak the way anchors and buttons
    are colored when a row is hovered
*/
fluent-data-grid-row[row-type=default].hover:hover fluent-anchor[appearance=lightweight]::part(control):not(:hover),
fluent-data-grid-row[row-type=default].hover:hover fluent-anchor[appearance=stealth]::part(control):not(:hover),
fluent-data-grid-row[row-type=default].hover:hover fluent-button[appearance=lightweight]::part(control):not(:hover),
fluent-data-grid-row[row-type=default].hover:hover fluent-button[appearance=stealth]::part(control):not(:hover) {
    background-color: var(--datagrid-hover-color);
}

fluent-data-grid-row[row-type=default].hover:hover fluent-anchor[appearance=lightweight]::part(control):hover,
fluent-data-grid-row[row-type=default].hover:hover fluent-anchor[appearance=stealth]::part(control):hover,
fluent-data-grid-row[row-type=default].hover:hover fluent-button[appearance=lightweight]::part(control):hover,
fluent-data-grid-row[row-type=default].hover:hover fluent-button[appearance=stealth]::part(control):hover {
    background-color: var(--fill-color);
}

.property-grid-container {
    grid-area: main;
    overflow: auto;
    width: 100%;
    height: 100%;
    padding: calc(var(--design-unit) * 1px);
    padding-top: 0;
}

    .property-grid-container fluent-accordion {
        gap: calc(var(--design-unit) * 2px);
        --fill-color: var(--neutral-layer-1);
    }

        .property-grid-container fluent-accordion fluent-data-grid {
            --datagrid-hover-color: var(--neutral-layer-1-hover);
        }

/* Under the current light theme, --neutral-layer-1 is too white, so we'll
   use something that's halfway between --neutral-layer-2 and --neutral-layer-1.
*/
[data-theme="light"] .property-grid-container fluent-accordion {
    --fill-color: var(--neutral-fill-rest);
}

.property-grid-container fluent-accordion-item,
.property-grid-container fluent-accordion-item::part(region) {
    background-color: var(--fill-color);
}

/* This is a hack because we can't do a selector that selects inside of a ::part,
   which is what we'd need to do to access `::part(heading):not(:hover) .icon`.
   So instead we just change the color token the non-hovered state uses.
*/
[data-theme="light"] .property-grid-container fluent-accordion-item::part(icon) {
    --neutral-fill-stealth-rest-on-neutral-fill-layer-rest: var(--fill-color);
}

.property-grid-container fluent-accordion-item::part(region) {
    padding-bottom: 0;
}

.property-grid-container fluent-accordion-item::part(heading-content) {
    font-weight: 600;
    font-size: var(--type-ramp-plus-1-font-size);
}

.property-grid-container fluent-accordion fluent-data-grid-row:last-of-type {
    border-bottom: none;
}

.property-grid-container fluent-accordion fluent-data-grid-row fluent-button[appearance=stealth]::part(control):not(:hover),
.property-grid-container fluent-accordion fluent-data-grid-row fluent-button[appearance=lightweight]::part(control):not(:hover) {
    background-color: var(--fill-color);
}

.property-grid-container fluent-accordion fluent-data-grid-row:not([row-type=default]) fluent-button[appearance=stealth]::part(control):hover,
.property-grid-container fluent-accordion fluent-data-grid-row:not([row-type=default]) fluent-button[appearance=lightweight]::part(control):hover {
    background-color: var(--neutral-fill-stealth-hover-on-neutral-fill-layer-rest);
}

/* Under the current dark theme, the fluent-badge background color was too dark on --neutral-layer-1 */
[data-theme="dark"] .property-grid-container fluent-accordion-item fluent-badge::part(control) {
    background-color: var(--neutral-fill-active);
}

.total-items-footer {
    padding-top: calc(var(--design-unit) * 2.5px);
    padding-left: calc(var(--design-unit) * 2.5px);
    padding-bottom: calc(var(--design-unit) * 2.5px);
}

/* Align the toast with the top of the body/bottom of the header
   and the right edge of the filter box
*/
.layout .fluent-toast-provider.position-topright {
    top: 50px;
    right: calc(var(--design-unit) * 1.5px);
}


/* Some of the data-columns (e.g. logs and details in the resource page)
   should not have ellipsis as this is unnecessary and a bit distracting.
   !important is required to override the fluentui-blazor styling.
*/
fluent-data-grid-cell.no-ellipsis {
    text-overflow: unset !important;
}

.endpoint-overflow {
    overflow-x: visible !important;
}

    .endpoint-overflow .fluent-overflow-more {
        display: flex;
    }

.endpoint-button {
    height: unset;
    font-size: var(--type-ramp-minus-1-font-size);
    line-height: var(--type-ramp-minus-1-line-height);
}

    .endpoint-button::part(control) {
        padding: calc(((var(--design-unit) * 0.5) - var(--stroke-width)) * 1px) calc((var(--design-unit) - var(--stroke-width)) * 1px);
    }

.mobile-toolbar {
    width: 100%;
    height: max(5vh, 30px);
}

.mobile-absolute-toolbar {
    position: absolute;
    left: 0;
    bottom: 0;
}

.page-content-container {
    height: 100%;
    overflow: auto;
}
::deep .log-row-critical,
::deep .log-row-critical fluent-button[appearance=lightweight]:not(:hover)::part(control) {
    background-color: var(--log-critical);
}

::deep .log-row-error,
::deep .log-row-error fluent-button[appearance=lightweight]:not(:hover)::part(control) {
    background-color: var(--log-error);
}

::deep .log-row-warning,
::deep .log-row-warning fluent-button[appearance=lightweight]:not(:hover)::part(control) {
    background-color: var(--log-warning);
}

::deep .logs-summary-layout {
    display: grid;
    grid-template-rows: 1fr auto;
    height: 100%;
    width: 100%;
    grid-template-areas:
        "main"
        "foot";
    gap: calc(var(--design-unit) * 2px);
}

    ::deep .logs-summary-layout > .logs-grid-container {
        grid-area: main;
        overflow: auto;
    }

::deep .wrap {
    text-wrap: wrap;
    white-space: pre-line;
}



@media (max-width: 768px) {

    .toolar-mobile {
        width: 100%;
    }
}

.continuous-scroll-overflow {
    width: 100%;
    overflow-x: auto;
}