/* The playtest panel. MudBlazor draws the rest with its default light and dark palettes; these rules use its theme variables. */

body { background: var(--mud-palette-background); }
h1:focus { outline: none; }

.panel-muted { opacity: .75; }
.words { white-space: pre-wrap; overflow-wrap: anywhere; }
.small-code { font-size: .75rem; }
.tile-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }

pre.json { background: var(--mud-palette-background-gray); color: var(--mud-palette-text-primary); padding: .5rem; border-radius: 6px;
    max-height: 24rem; overflow: auto; font-size: .8rem; white-space: pre-wrap; word-break: break-all; margin: .25rem 0; }

.shot { display: block; max-width: 100%; max-height: 20rem; border-radius: 6px; border: 1px solid var(--mud-palette-lines-default); }
.report-card { height: 100%; }

.config-paper { max-width: 48rem; }
.config-actions { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }
.mono textarea { font-family: Consolas, "Cascadia Mono", monospace; font-size: .85rem; }

/* The login page: static, so a plain form on the dark palette. */
.bare { min-height: 100vh; display: grid; place-items: center; background: var(--mud-palette-background); }
.login-card { width: min(24rem, calc(100vw - 2rem)); background: var(--mud-palette-surface) !important; }
.login-field { display: block; margin-bottom: 1rem; color: var(--mud-palette-text-secondary); font-size: .85rem; }
.login-field input, .login-field textarea { display: block; width: 100%; margin-top: .3rem; padding: .6rem .7rem; border-radius: 6px; font-size: 1rem;
    color: var(--mud-palette-text-primary); background: var(--mud-palette-background-gray); border: 1px solid var(--mud-palette-lines-inputs); }
.login-field input:focus, .login-field textarea:focus { outline: 2px solid var(--mud-palette-primary); border-color: transparent; }
.login-command { display: block; margin: .35rem 0; font-size: .8rem; word-break: break-all; }

#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 2000; padding: .6rem 1.2rem;
    background: var(--mud-palette-error); color: #fff; }
#blazor-error-ui .dismiss { cursor: pointer; float: right; }
.blazor-error-boundary { padding: 1rem; background: var(--mud-palette-error); color: #fff; }
.blazor-error-boundary::after { content: "An error has occurred."; }

/*
    Vazirmatn, served from this server rather than a font CDN: the testers are in Iran and a request
    to Google's fonts is one more thing that can be slow or blocked. Three weights, 50 KB each, and
    the latin glyphs come with them, so a line of mixed Persian and English keeps one shape.
    SIL Open Font License 1.1 — wwwroot/fonts/OFL.txt.
*/
@font-face {
    font-family: Vazirmatn;
    src: url("fonts/Vazirmatn-Regular.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: Vazirmatn;
    src: url("fonts/Vazirmatn-Medium.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: Vazirmatn;
    src: url("fonts/Vazirmatn-Bold.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}

/*
    Only the Persian side wears it. The rule is on [dir="rtl"], which the tester's layout sets when
    the language is Persian, so the admin panel and the English side keep MudBlazor's own font.
*/
[dir="rtl"], [dir="rtl"] .mud-typography, [dir="rtl"] .mud-input, [dir="rtl"] .mud-button-root,
[dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select, [dir="rtl"] button {
    font-family: Vazirmatn, var(--mud-typography-default-family), sans-serif;
}

/* Persian digits and words sit a little tighter than the latin default lets them. */
[dir="rtl"] { line-height: 1.8; }