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

.grid fluent-text-field {
    width: 100%;
}

.paginator {
    margin-top: 0 !important;
    padding: 0 !important;
}

.inputfile-content {
    width: 100% !important;
}

.ppp-editor-wrapper .ppp-value-wrapper {
    width: 100%;
}

fluent-tab {
    padding: 1em 1.5em;
}

    fluent-tab::after {
        content: "";
        position: relative;
        left: 1.5em;
        top: 0; /* start the line lower */
        height: 2em; /* or any fixed px value */
        width: 1px;
        background: var(--neutral-stroke-rest);
    }

fluent-tabs {
    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest);
    border-radius: calc(var(--control-corner-radius) * 1px);
}

.ppp-column-display-value-label {
    color: var(--neutral-foreground-hover);
}

/* Read-only number/money editor — renders the same border, height, padding, and
   disabled-opacity as a disabled fluent-number-field so the two states line up
   visually in forms. The text span uses margin-left:auto so the value right-aligns
   whether or not a leading icon (MoneyEdit) is present. */
.ppp-editor-readonly-value {
    display: flex;
    align-items: center;
    gap: calc(var(--design-unit) * 2px);
    box-sizing: border-box;
    width: 100%;
    /* Matches the internal height formula fluent-text-field / fluent-number-field use
       so a read-only row lines up with an editable row in the same form. */
    min-height: calc((var(--base-height-multiplier) + var(--density)) * var(--design-unit) * 1px);
    padding: 0 calc(var(--design-unit) * 2px + 1px);
    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest);
    border-radius: calc(var(--control-corner-radius) * 1px);
    background: var(--neutral-fill-input-rest);
    color: var(--neutral-foreground-rest);
    opacity: var(--disabled-opacity);
    font-size: var(--type-ramp-base-font-size);
    line-height: var(--type-ramp-base-line-height);
    cursor: not-allowed;
    user-select: text;
}

.ppp-editor-readonly-value-text {
    margin-left: auto;
    text-align: right;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media screen and (min-width: 767.98px) {
    .ppp-mobile-screen {
        display: none;
    }
}

@media screen and (max-width: 767.97px) {
    .ppp-desktop-screen {
        display: none !important;
    }
}

/* The Fluent UI Blazor FluentOverlay has a higher z-index than FluentDialog by
   default, which causes message boxes shown while an overlay is visible to be
   hidden behind the overlay. Lower the overlay's z-index so dialogs stack on top. */
.fluent-overlay {
    z-index: 100 !important;
}

/* FluentMessageBar dark-theme override.

   FluentUI Blazor's FluentMessageBar (v4.0.0) ships intent-* color rules as
   hardcoded hex literals in its scoped CSS (FluentMessageBar.razor.rz.scp.css),
   with a separate `.fluent-messagebar.dark.intent-*` rule for dark mode. The
   `.dark` class is supposed to be added by the component when the FluentDesignTheme
   reports dark luminance — but the wiring doesn't fire reliably in all render
   paths, so consumers see the light-theme bg (#FDF6F3 etc.) against an otherwise-
   dark page.

   We force the dark variant via `body[data-theme="dark"]` (the attribute App.razor
   templates set both server-side from the cookie and client-side from
   loading-theme.js), so as long as the rest of the page is in dark mode, the
   MessageBar is too. Hex literals here mirror the framework's own dark values
   verbatim — using `var(--neutral-layer-N)` etc. would drop the warning / error
   semantic-color signal (`var()` swap can't encode "this is a warning"). */
body[data-theme="dark"] .fluent-messagebar.intent-info {
    background-color: #141414;
    border-color: #666;
}
body[data-theme="dark"] .fluent-messagebar.intent-warning {
    background-color: #411200;
    border-color: #DA3B01;
}
body[data-theme="dark"] .fluent-messagebar.intent-error {
    background-color: #3F1011;
    border-color: #D13438;
}
body[data-theme="dark"] .fluent-messagebar.intent-success {
    background-color: #052505;
    border-color: #107C10;
}