html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /* Remove the default UA 8px body margin — it left a gap strip above the app header. */
    margin: 0;
}

/* MW-498 (WCAG 2.2 2.4.11) — fragment jumps (the skip link) and Tab scrolling land targets below the
   sticky action row instead of under it. 72px = the row's height (ADR-016); it is sticky only from 768
   (AppShellLayout.razor.css), so below that no padding is needed. */
@media (min-width: 768px) {
    html {
        scroll-padding-top: 72px;
    }
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

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

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

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    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."
    }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

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

/* MIS-042 — presentation-template header/footer preview, rendered as ESCAPED text in a <pre> on both
   the editor and the read-only detail page. Global (not per-component scoped) because both pages share
   the class. Wrap long lines into a soft box instead of overflowing the column. */
.presentation-template-block {
    margin: 0;
    padding: var(--spacing-12);
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
    background-color: var(--color-background-base-tertiary);
    border-radius: var(--border-radius-8);
}

/* Global button styling for the plain `mud-button` class used across pages (Mud.Blazor, the
   vendored library, ships no actual MudButton component — this class is just a CSS hook on plain
   <button> elements). Centralised here instead of per-page scoped CSS so every button using this
   class looks consistent, including :hover/:focus-visible/:disabled states. */
.mud-button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 1rem;
    border: 1px solid var(--mud-color-lines-default, #cfd4dc);
    border-radius: var(--mud-radius-default, 0.375rem);
    background-color: var(--mud-color-surface, #fff);
    color: var(--mud-color-text-primary, #1c1f24);
    font: inherit;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.mud-button:hover:not(:disabled) {
    background-color: var(--mud-color-background-grey, #f5f6f8);
}

/* Primary call-to-action variant (state transitions, sign, compile, export …). */
.mud-button--primary {
    border-color: var(--mud-color-primary, #1268b3);
    background-color: var(--mud-color-primary, #1268b3);
    color: #fff;
}

.mud-button--primary:hover:not(:disabled) {
    background-color: var(--mud-color-primary-darken, #0d5490);
    border-color: var(--mud-color-primary-darken, #0d5490);
}

/* Verdict variants — a transition button wears the colour of the state it LEADS TO, picked in one place
   (ReportActionAppearance) and rendered by both the review workspace and the state card. Filled for the two
   terminal verdicts, outlined for the send-back: approving and rejecting end the report, requesting a
   revision hands it back, and an outline says "less final" without a third shouting fill.
   Lives here with .mud-button--primary for that block's stated reason — one home for the class, hover and
   disabled states included, rather than a copy in each page's scoped CSS. */
.mud-button--success {
    border-color: var(--color-background-success-default);
    background-color: var(--color-background-success-default);
    color: #fff;
}

.mud-button--success:hover:not(:disabled) {
    background-color: var(--color-background-success-default-hover);
    border-color: var(--color-background-success-default-hover);
}

/* The DS's own .btn-destructive pairing (danger-default + white), reused rather than re-picked. */
.mud-button--danger {
    border-color: var(--color-background-danger-default);
    background-color: var(--color-background-danger-default);
    color: #fff;
}

.mud-button--danger:hover:not(:disabled) {
    background-color: var(--color-background-danger-default-hover);
    border-color: var(--color-background-danger-default-hover);
}

/* Outlined, not filled: --color-background-warning-default is apricot-400 (#FDB022), a light amber that
   carries white text at ~1.8:1. Amber on the surface says the same thing and stays legible. */
.mud-button--warning {
    border-color: var(--color-border-warning-default);
    background-color: var(--color-background-base-default);
    color: var(--color-text-warning-default);
}

.mud-button--warning:hover:not(:disabled) {
    background-color: var(--color-background-warning-secondary);
}

.mud-button:focus-visible {
    outline: 2px solid var(--mud-color-primary, #1268b3);
    outline-offset: 2px;
}

.mud-button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* MIS-021 — design-aviz export fidelity.
   The /components gallery serves as design-aviz evidence and is exported to PDF.
   By default browsers strip background-color when printing, so MUD filled buttons,
   tabs, badges and toasts render as bare text in the export — making compliant
   components look un-styled. print-color-adjust:exact preserves the MUD fills.
   The property is inherited, so declaring it on html covers the whole tree. */
html {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
/* Text for assistive technology only — e.g. the row a table's "Acțiuni" trigger acts on (WCAG 2.4.6), where the
   visible label stays short. Three screens carry their own copy of this rule (MyDrafts, the shell's user menu,
   dashboard table captions); new uses take this one. */
.mis-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* A data register with many columns beside the 368 px rail: a 16 px cell gutter instead of the MUD table reference's
   24 px, so the rightmost (actions) column is not clipped at 1280 (runtime E2E S3-6, MW-553). Wrap the MudTable in an
   element carrying this class. Three class selectors outrank the table's own scoped rule whatever the stylesheet
   order. /drafts keeps its own copy of the rule. */
.mis-table-compact .mud-table .mud-table__th,
.mis-table-compact .mud-table .mud-table__td {
    padding-inline: var(--spacing-16);
}