app.css

 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;

    --layout-toolbar-padding: calc(var(--design-unit) * 1.5px);
}

[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;

    /* overrides of default fluentui-blazor styling */
    --error: #E10B11 !important;

    color-scheme: dark;
}

[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);
    }
}

 @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 .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;
}

/* 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;
}

.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);
}

/* 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-layer1.
*/
[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 fluent-button[appearance=stealth]:not(:hover)::part(control),
.property-grid-container fluent-accordion fluent-data-grid fluent-button[appearance=lightweight]:not(:hover)::part(control) {
    background-color: var(--fill-color);
}

.property-grid-container fluent-accordion fluent-data-grid fluent-button[appearance=stealth]:hover::part(control),
.property-grid-container fluent-accordion fluent-data-grid fluent-button[appearance=lightweight]:hover::part(control) {
    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);
}

.column-header {
    /*
        fluent-data-grid-cells have a height of 100%, which should correspond to
        the height of their parent fluent-data-grid-row.
        On Safari only, this is not the case; height actually computes to the grid height.
        We can force column headers to take the height of their parent by inheriting height
        of their row.
     */
    height: inherit !important;
}

.single-line-toolbar-button {
    margin-top: 5px;
}