/* Inter, self-hosted. Previously pulled from fonts.googleapis.com, which cost a render-blocking
   cross-origin stylesheet plus two preconnects before a single glyph could be requested — and sent
   every visitor's IP to a third party, which a German site would rather not do. Variable woff2
   (wght 100–900), so one file per subset covers all four weights the app uses.
   Inter is licensed under the SIL Open Font License 1.1 — see fonts/inter-license.txt. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/inter-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("fonts/inter-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

:root {
    --fen-font-family: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

html, body {
    font-family: var(--fen-font-family);
    line-height: 1.6;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.mud-typography,
.mud-input,
.mud-button,
.mud-list-item-text {
    font-family: var(--fen-font-family);
}

.mud-typography-body1 {
    font-size: clamp(1rem, 0.97rem + 0.15vw, 1.08rem);
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.72;
}

.mud-typography-body2 {
    font-size: clamp(0.92rem, 0.9rem + 0.1vw, 0.98rem);
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.6;
}

@media (max-width: 600px) {
    .mud-typography-body1 {
        line-height: 1.66;
    }

    .mud-typography-body2 {
        line-height: 1.55;
    }
}

.mud-theme-dark .mud-typography,
.mud-theme-dark .mud-input > input,
.mud-theme-dark .mud-input-slot {
    color: #edf0f7;
}

.mud-theme-dark .mud-typography.mud-secondary-text {
    color: #c7cedb;
}

/* Links inside running text must not rely on colour alone (axe: link-in-text-block). The primary
   green only reaches 1.98:1 against body text, well under the required 3:1, so links inside a
   paragraph are underlined at rest. Global rather than per-MudLink: it is a rule about running
   text, and 50-odd call sites across the pages would each be a chance to forget it. An explicit
   Underline="Underline.None" still wins — that opt-out is deliberate. */
p.mud-typography a.mud-link:not(.mud-link-underline-none),
p.mud-typography a.mud-typography[href]:not(.mud-link-underline-none) {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.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."
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* SpotMarketChart: controls group — row on desktop, column on mobile */
.spot-chart-controls {
    flex-direction: row !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 599px) {
    .spot-chart-controls {
        flex-direction: column !important;
        align-items: flex-start;
    }
}

/* MudDatePicker inside a dialog: the calendar brings its own padding and must not gain a
   scrollbar. Scoped to dialogs that actually hold a picker — as a blanket rule it stripped the
   gutters off every dialog and clipped content that needed to scroll. */
.mud-dialog .mud-picker {
    min-width: 310px !important;
    overflow: hidden !important;
}

.mud-dialog .mud-dialog-content:has(> .mud-picker) {
    overflow: hidden !important;
    padding: 0 !important;
}

.mud-dialog .mud-picker-content {
    overflow: hidden !important;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}