/* ---- Typography --------------------------------------------------------------------------- No font is named in this file, and nothing here branches on language. culture.js resolves the UI font for the active language and publishes it as --fjq-ui-font on , so adding a language never touches this stylesheet. To change a face, edit the FONTS table at the top of culture.js. Selectors are html[dir] rather than :root deliberately. MudThemeProvider injects its own :root block into the DOM at runtime, which lands after this stylesheet in document order — at equal specificity it would win. html[dir] outranks :root, so these hold regardless of injection order. culture.js always sets dir, so html[dir] always matches. */ html[dir] body { font-family: var(--fjq-ui-font, 'Segoe UI', Tahoma, Helvetica, Arial, sans-serif); } /* MudBlazor renders its typography from these custom properties, so redefining them reaches every MudText, button and input at once instead of chasing individual components. */ html[dir] { --mud-typography-default-family: var(--fjq-ui-font); --mud-typography-h1-family: var(--fjq-ui-font); --mud-typography-h2-family: var(--fjq-ui-font); --mud-typography-h3-family: var(--fjq-ui-font); --mud-typography-h4-family: var(--fjq-ui-font); --mud-typography-h5-family: var(--fjq-ui-font); --mud-typography-h6-family: var(--fjq-ui-font); --mud-typography-subtitle1-family: var(--fjq-ui-font); --mud-typography-subtitle2-family: var(--fjq-ui-font); --mud-typography-body1-family: var(--fjq-ui-font); --mud-typography-body2-family: var(--fjq-ui-font); --mud-typography-button-family: var(--fjq-ui-font); --mud-typography-caption-family: var(--fjq-ui-font); --mud-typography-overline-family: var(--fjq-ui-font); } /* Code keeps the monospace face in both directions. Under RTL it also stays left-to-right: identifiers and code are not Arabic text, and letting them mirror mangles them. */ code, pre, .markdown-body pre { font-family: var(--fjq-mono-font, Consolas, 'Courier New', monospace); } html[dir="rtl"] code, html[dir="rtl"] pre, html[dir="rtl"] .markdown-body pre { direction: ltr; text-align: left; } /* Live numeric readouts — countdowns, timers, anything that reticks in place. font-variant-numeric: tabular-nums alone is not enough: it is a request for the font's tnum OpenType feature, and a face that does not ship tnum makes it a silent no-op, leaving proportional digits that change width as the value ticks. Roboto has tnum, Tajawal does not, so the same markup was steady in English and jittered in Arabic. The monospace stack is tabular by construction, so this holds for every language including ones not yet added — which keying off the language or direction would not. Same reasoning as the code rule above: a clock readout is a machine value, not prose. Prefixed html[dir] for the same reason the typography block at the top of this file is, and it is not optional here: index.html loads this stylesheet BEFORE MudBlazor.min.css, and MudBlazor sets both font-family and letter-spacing on .mud-typography-caption. A bare .fjq-numeric ties that on specificity (0,1,0) and loses on document order — silently, with the element simply keeping the UI font. html[dir] .fjq-numeric is 0,2,1 and wins regardless of link order. */ html[dir] .fjq-numeric { font-family: var(--fjq-mono-font, Consolas, 'Courier New', monospace); font-variant-numeric: tabular-nums; letter-spacing: 0.5px; } /* Keeps a negative (expired) readout as "-04:32" rather than letting bidi reorder the sign onto the other side of the digits. */ html[dir="rtl"] .fjq-numeric { direction: ltr; } /* ---- Right-to-left --------------------------------------------------------------------- MudRTLProvider (see MainLayout) flips MudBlazor's own components. The rules below cover what it does not: the hand-written CSS in this file that would otherwise hardcode a side. Keyed off the dir attribute culture.js sets on , so none of it needs a C# flag. */ /* Mirrors a directional glyph — a back/next arrow or chevron — for the reading direction. MudRTLProvider moves a StartIcon to the trailing side but does not touch the glyph itself, so an unmarked back arrow still points left under RTL, where left is forwards. Opt in per icon: only glyphs meaning "the way you came" or "the way ahead" should turn — a folder or a search icon must not. Put the class on a MudIcon (first selector) or on the MudButton carrying it (the other two, which reach the icon without flipping the label). A MudIconButton renders neither the class on the glyph nor a mud-button-icon-start, so it needs the last selector — there is no label beside it to protect. Deliberately not a bare .fjq-mirror-icon: that would also match the button root and mirror its text. Prefixed html[dir] for the specificity reason described at the top of this file. */ html[dir="rtl"] .mud-icon-root.fjq-mirror-icon, html[dir="rtl"] .fjq-mirror-icon .mud-button-icon-start, html[dir="rtl"] .fjq-mirror-icon .mud-button-icon-end, html[dir="rtl"] .fjq-mirror-icon .mud-icon-root { transform: scaleX(-1); } h1:focus { outline: none; } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid red; } .validation-message { color: red; } #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; inset-inline-end: 0.75rem; top: 0.5rem; } /* The bar is wordless (see index.html), so the two glyphs need the gap the sentence used to provide. Logical property: the reload control follows the warning mark in both directions. */ #blazor-error-ui .reload { margin-inline-start: 0.75rem; font-size: 1.1rem; text-decoration: none; } .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." } code { color: #c02d76; } /* Rendered Markdown page bodies (see PageContentView). Keeps headings, lists, code and tables sensibly sized inside MudBlazor cards rather than using raw browser defaults. */ .markdown-body { overflow-wrap: anywhere; } .markdown-body > :first-child { margin-top: 0; } .markdown-body > :last-child { margin-bottom: 0; } .markdown-body h1 { font-size: 1.6rem; margin: 1.2rem 0 0.6rem; } .markdown-body h2 { font-size: 1.35rem; margin: 1.1rem 0 0.5rem; } .markdown-body h3 { font-size: 1.15rem; margin: 1rem 0 0.5rem; } .markdown-body h4, .markdown-body h5, .markdown-body h6 { font-size: 1rem; margin: 1rem 0 0.5rem; } .markdown-body p, .markdown-body ul, .markdown-body ol, .markdown-body blockquote, .markdown-body table { margin: 0 0 0.85rem; } /* Logical properties throughout so rendered Markdown mirrors with the document direction instead of needing a parallel [dir="rtl"] rule for every side. */ .markdown-body ul, .markdown-body ol { padding-inline-start: 1.5rem; } .markdown-body blockquote { border-inline-start: 3px solid var(--mud-palette-lines-default, #e0e0e0); padding-inline-start: 1rem; color: var(--mud-palette-text-secondary, #616161); } /* Light themes: a translucent dark overlay so the block sits a touch DARKER than the card surface (background-gray reads lighter than the surface in some light themes). Dark themes keep the solid background-gray panel, which already contrasts nicely. */ .markdown-body pre { background: rgba(0, 0, 0, 0.06); padding: 0.75rem 1rem; border-radius: 8px; overflow-x: auto; } .fjq-theme-dark .markdown-body pre { background: var(--mud-palette-background-gray, rgba(255, 255, 255, 0.06)); } .markdown-body pre code { color: inherit; } /* Syntax highlighting tokens (ColorCode class-based output), themed to match GitHub. Role colors are defined as variables here (GitHub light palette) and overridden for dark mode under .fjq-theme-dark (GitHub dark palette, applied to MudLayout by MainLayout); each token class just references a role variable. Untokenised text inherits the code text color. */ .markdown-body { --code-comment: #6e7781; --code-keyword: #cf222e; --code-string: #0a3069; --code-constant: #0550ae; --code-entity: #8250df; --code-tag: #116329; } .fjq-theme-dark .markdown-body { --code-comment: #8b949e; --code-keyword: #ff7b72; --code-string: #a5d6ff; --code-constant: #79c0ff; --code-entity: #d2a8ff; --code-tag: #7ee787; } .markdown-body pre .keyword, .markdown-body pre .preprocessorKeyword, .markdown-body pre .controlKeyword, .markdown-body pre .pseudoKeyword { color: var(--code-keyword); } .markdown-body pre .string, .markdown-body pre .stringCSharpVerbatim, .markdown-body pre .stringEscape, .markdown-body pre .htmlAttributeValue, .markdown-body pre .xmlAttributeValue, .markdown-body pre .cssPropertyValue, .markdown-body pre .jsonString { color: var(--code-string); } .markdown-body pre .comment, .markdown-body pre .xmlComment, .markdown-body pre .xmlDocComment, .markdown-body pre .htmlComment, .markdown-body pre .xmlDocTag { color: var(--code-comment); font-style: italic; } .markdown-body pre .type, .markdown-body pre .className, .markdown-body pre .namespace, .markdown-body pre .cssSelector { color: var(--code-entity); } .markdown-body pre .htmlElementName, .markdown-body pre .xmlName { color: var(--code-tag); } .markdown-body pre .number, .markdown-body pre .jsonNumber, .markdown-body pre .htmlAttributeName, .markdown-body pre .xmlAttribute, .markdown-body pre .cssPropertyName, .markdown-body pre .attribute, .markdown-body pre .jsonKey { color: var(--code-constant); } .markdown-body pre .markdownHeader { color: var(--code-constant); } .markdown-body pre .bold, .markdown-body pre .markdownHeader { font-weight: 600; } .markdown-body pre .italic { font-style: italic; } .markdown-body img { max-width: 100%; height: auto; } /* A wide table scrolls sideways inside its own box instead of crushing its columns — the same deal

 gets. The wrapper div is emitted by ScrollableTableRenderer; the margin moves onto
       it so the gap below the block is unchanged. */
    .md-table-scroll {
        overflow-x: auto;
        margin: 0 0 0.85rem;
    }

    .markdown-body table {
        width: 100%;
        border-collapse: collapse;
    }

    .md-table-scroll > table {
        margin: 0;
    }

    /* .markdown-body sets overflow-wrap:anywhere so a long URL in a paragraph can't blow out the
       card. Inside a table that same rule is what does the crushing: `anywhere` counts toward a
       column's minimum width, so auto layout is told every column can shrink to one character and
       happily fits twelve of them into the card. `break-word` still breaks a word too long to fit
       but leaves the minimum at the longest word, so the table asks for its natural width and
       overflows into the scroller instead. */
    .markdown-body th,
    .markdown-body td {
        border: 1px solid var(--mud-palette-lines-default, #e0e0e0);
        padding: 8px 12px;
        text-align: start;
        overflow-wrap: break-word;
    }

    /* table-hover is a theme-relative overlay (subtle dark in light themes, subtle light in
       dark themes), so the header sits just off the card surface in both — unlike the absolute
       background-gray, which is near-white in light and heavy-dark in dark. */
    .markdown-body th {
        background: var(--mud-palette-table-hover, rgba(128, 128, 128, 0.08));
        font-weight: 600;
    }

    .markdown-body tbody tr:hover {
        background: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.04));
    }

/* ---- Admin lists that fold to a list on a phone -------------------------------------------
   Below md the users and roles tables stop being tables: each row becomes one tappable list
   item — tinted circle, name, kebab — and the table head goes with it, since column labels have
   nothing left to label once the row is a single cell. Shared here rather than repeated in a