:root {
    --lenslator-content-padding: 1.25rem;
}

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

/* FluentMessageBar's background always renders its light-theme variant here (its `.dark` class
   never gets applied), but body text still switches to white in dark mode - without this the
   message text becomes white-on-near-white and unreadable. !important is needed because the
   library's own scoped CSS (bundled into Lenslator.Web.styles.css, loaded after this file) sets
   color at the same specificity. */
.fluent-messagebar,
.fluent-messagebar-message {
    color: #1a1a1a !important;
}

/* Sync preview/run progress block - the bar, its stage caption and the "keep running" hint. */
.sync-progress {
    max-width: 640px;
    margin-bottom: 1rem;
}

    .sync-progress p {
        margin: 0.4rem 0;
    }

    .sync-progress strong {
        margin-left: 0.4rem;
    }

.sync-hint {
    font-size: 0.85em;
    opacity: 0.75;
}
/* A native <select>, where a FluentSelect won't do: it always preselects its first option, so it
   can't make the assortment group picker on the catalogue upload a deliberate choice. Follows the
   Fluent theme tokens so it reads correctly in light and dark mode. */
.assignment-select {
    min-width: 10rem;
    padding: 0.2rem 0.4rem;
    font: inherit;
    color: var(--neutral-foreground-rest);
    background: var(--neutral-fill-input-rest);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: calc(var(--control-corner-radius) * 1px);
}

/* Item-level change lists on the review page. */
.item-change-table {
    border-collapse: collapse;
    margin: 0.5rem 0;
}

    .item-change-table th,
    .item-change-table td {
        padding: 0.25rem 0.75rem;
        text-align: left;
        border-bottom: 1px solid var(--neutral-stroke-rest);
    }

/* Outcome and warning notices on the review page. Built on theme tokens rather than
   FluentMessageBar, whose forced dark text (above) is unreadable on its dark-mode background. */
.review-notice {
    margin: 0.75rem 0;
    padding: 0.6rem 0.9rem;
    color: var(--neutral-foreground-rest);
    background: var(--neutral-layer-2);
    border-left: 4px solid var(--accent-fill-rest);
    border-radius: 4px;
}

.review-notice-warning {
    border-left-color: #d29200;
}

/* One run on the catalogue history page. */
.history-run {
    margin: 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--neutral-stroke-rest);
}

/* Optional schedule time on the review pages - a native datetime-local input, styled like the
   assignment picker. */
.schedule-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0.75rem 0;
}

    .schedule-field input {
        padding: 0.2rem 0.4rem;
        font: inherit;
        color: var(--neutral-foreground-rest);
        background: var(--neutral-fill-input-rest);
        border: 1px solid var(--neutral-stroke-rest);
        border-radius: calc(var(--control-corner-radius) * 1px);
        color-scheme: light dark;
    }