html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Lines up digits in money/date columns so amounts scan vertically. */
.tabular-nums {
    font-variant-numeric: tabular-nums;
}

/* Muted text that tracks the active palette (MudText Color=Secondary would be the
   gold brand color, not a de-emphasized gray - hence a custom class). */
.text-muted {
    color: var(--mud-palette-text-secondary);
}

/* Keeps multi-item cell content (icon + text, Edit/Remove buttons) as ONE cluster with a
   fixed gap. Without this, MudTable's stacked mobile layout - where each cell becomes a
   space-between flex row (label left, value right) - treats every child as its own flex
   item and spreads them across the full row width. */
.cell-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* In the stacked mobile layout the cell is a flex row; label-less cells (action
       buttons) have nothing on the left, so without this the group sits at flex-start
       while every labeled cell's value sits at the right edge. Auto margins compute to
       zero in normal inline flow, so desktop tables are unaffected. */
    margin-left: auto;
}

/*
  Static-rendered forms (Account/Login, MFA, password reset) can't use MudBlazor's
  input components: those rely on an interactive circuit and don't render a "name"
  attribute, so native form posts on these pre-auth/antiforgery pages can't bind
  through them. These styles keep the built-in InputText/InputCheckbox consistent
  with the MudBlazor theme instead.
*/
.form-field {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem 0.75rem;
    margin-bottom: 1rem;
    font-size: 1rem;
    /* Native inputs don't inherit text color, and the browser default is near-black -
       unreadable on the dark palette. Follow the MudBlazor theme vars (set globally by
       ThemeToggle's MudThemeProvider) so these fields track light/dark like everything else. */
    color: var(--mud-palette-text-primary, inherit);
    border: 1px solid var(--mud-palette-lines-inputs, rgba(0, 0, 0, 0.23));
    border-radius: 6px;
    background: transparent;
}

.form-field:focus {
    outline: none;
    border-color: var(--mud-palette-primary, #1B4332);
    border-width: 2px;
}

.form-field-label {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
    opacity: 0.8;
}

.form-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

/* Appbar logo shrinks below MudBlazor's md breakpoint (960px) - at sm/xs the bar
   also holds the menu button, fund selector, and theme toggle, and 28px is too
   cramped there. */
.appbar-logo {
    height: 28px;
    width: auto;
    display: block;
}

@media (max-width: 959.98px) {
    .appbar-logo {
        height: 20px;
    }
}

/*
  The acting-fund select sits on the appbar, which is dark green in BOTH palettes
  (#1B4332 light / #152a22 dark - see FundPlatformTheme). The light theme's default
  input colors (near-black text, primary-green focus accents) are unreadable there,
  so pin every part of the control to white regardless of theme. !important because
  MudBlazor's own theme rules for label/border colors are more specific.
*/
.acting-fund-select .mud-input-label,
.acting-fund-select .mud-input-root,
.acting-fund-select .mud-input,
.acting-fund-select .mud-icon-root {
    color: rgba(255, 255, 255, 0.92) !important;
}

.acting-fund-select .mud-input-outlined-border {
    border-color: rgba(255, 255, 255, 0.55) !important;
}

/* Compact acting-fund select, all widths (user preference: the smaller version fits
   the appbar's height better everywhere). !important throughout for the same reason
   as the color rules above.
   - The Class parameter lands on the inner .mud-input-control div, but the element
     that takes the horizontal space is its .mud-select wrapper (no user class
     reaches it), which flex-grows inside the toolbar - width/min-width overrides on
     the inner div never bind. Kill the wrapper's grow (scoped via .mud-appbar; this
     is the appbar's only select) and give the slot an explicit width instead; every
     shrink-to-fit ancestor then follows.
   - No `input.` prefix on .mud-input-slot: with a fund selected, MudSelect displays
     the text in a sibling DIV.mud-input-slot (the native input collapses to 0x0),
     so an input-only selector leaves the selected text at full-size padding/font.
   - The popover rules are outside the control's subtree (MudBlazor renders it at
     the provider), hence the separate acting-fund-popover class via PopoverClass. */
.mud-appbar .mud-select {
    flex-grow: 0 !important;
    min-width: 0 !important;
    /* Right-justified next to ThemeToggle (no spacer between them) - keep a gap. */
    margin-right: 12px;
}

.acting-fund-select {
    min-width: 0 !important;
}

.acting-fund-select .mud-input-slot {
    width: 140px !important;
    flex: 0 1 auto !important;
    font-size: 0.8rem !important;
    padding: 7px 0 7px 10px !important;
}

/* Own the label transform in every state rather than partially overriding
   MudBlazor's (a :focus-within inside :not() proved unreliable - Chromium kept
   applying the stale match after focus changed). Base rule: re-center the resting
   label for this 33px control (MudBlazor's translate(14px,12px) targets the
   default 40px one). Override rule: replicate the float-to-border transform for
   both float triggers - .mud-shrink on the sibling .mud-input (value selected)
   and :focus-within (dropdown open / control focused, nothing selected yet;
   focus stays on the inner input while the popover is open). Higher specificity
   -> the float rules win over the base pin. */
.acting-fund-select .mud-input-label {
    font-size: 0.8rem !important;
    transform: translate(10px, 7px) scale(1) !important;
}

.acting-fund-select:focus-within .mud-input-label,
.acting-fund-select .mud-input.mud-shrink ~ .mud-input-label {
    transform: translate(14px, -6px) scale(0.75) !important;
}

/* The outlined border's notch is sized by a hidden copy of the label text inside
   the fieldset legend, which keeps MudBlazor's default 12px (0.75rem) - 25% wider
   than the shrunken floated label (0.8rem x 0.75 scale = 9.6px). Match it so the
   notch hugs the text. */
.acting-fund-select .mud-input-outlined-border legend {
    font-size: 0.6rem !important;
}

.acting-fund-select .mud-input-adornment .mud-icon-root {
    font-size: 1.25rem !important;
}

.acting-fund-popover .mud-list-item {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.acting-fund-popover .mud-list-item .mud-typography {
    font-size: 0.8rem !important;
}

h1:focus {
    outline: none;
}

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

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

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

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