/* ============================================================================
   Page-level rules written before the shared component layer.

   The tokens are in css/tokens.css and the shared components (buttons, fields,
   alerts, tables, chips, page header, stats, filters, dialogs' parts, the action
   menu and the rest) in css/components.css, where the old page-prefixed names
   (lic-head, adm-stat, dlg-field, doc-num…) are aliases of the component they
   copied. What is left here is specific to one page or flow. When a page moves
   to the shared components, delete its rules from this file.

   Every colour comes from a token. Amber appears only on the primary action,
   the active navigation marker and the mark (decisions: DESIGN).
   ========================================================================== */

/* ---------- Identity pages (sign-in, registration, password reset) ---------- */

.sip-auth {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 1rem;
}

    .sip-auth .sip-auth-mark {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 1.5rem;
    }

    .sip-auth .sip-auth-wordmark {
        font-weight: 700;
        font-size: 1.3rem;
        letter-spacing: 0.35em;
        margin-right: -0.35em; /* optically recentre the tracked-out text */
        color: var(--sip-text);
    }

    .sip-auth .sip-auth-card {
        background-color: var(--sip-card);
        border: 1px solid var(--sip-hairline);
        border-radius: var(--radius-lg);
        padding: 2rem;
        width: 100%;
        max-width: 440px;
    }

    .sip-auth h1 {
        font-size: 1.3rem;
        margin-bottom: 1.25rem;
        text-align: center;
    }

    .sip-auth .sip-auth-links {
        margin-top: 1.25rem;
        text-align: center;
        font-size: var(--text-sm);
    }

        .sip-auth .sip-auth-links p {
            margin-bottom: 0.4rem;
        }

@media (max-width: 480px) {
    .sip-auth {
        padding: 1.5rem 0;
    }

        .sip-auth .sip-auth-card {
            padding: 1.25rem;
        }
}

.sip-auth-wide .sip-auth-card {
    max-width: 34rem;
}

.sip-auth-blurb {
    color: var(--sip-text-2);
    font-size: var(--text-sm);
    margin-bottom: 1.25rem;
}

/* Bootstrap's floating labels, on the dark field. */
.form-floating > label {
    color: var(--sip-muted);
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--sip-text-2);
}

    .form-floating > .form-control:focus ~ label::after,
    .form-floating > .form-control:not(:placeholder-shown) ~ label::after {
        background-color: transparent;
    }

.form-floating > .form-control,
.form-floating > .form-select {
    min-height: calc(3.5rem + 2px);
}

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

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

.darker-border-checkbox.form-check-input {
    border-color: var(--sip-control-line);
}

/* The sign-in role chooser (being retired by the email-first sign-in): neutral, not amber. */
.sip-role-choices {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0.5rem 0 0.25rem;
}

.sip-role {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem;
    border: 1px solid var(--sip-hairline);
    border-radius: var(--sip-radius-sm);
    background-color: rgba(var(--sip-text-rgb), 0.02);
    color: var(--sip-text);
    text-decoration: none;
    transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}

    .sip-role:hover {
        border-color: var(--sip-text-2);
        background-color: rgba(var(--sip-text-rgb), 0.05);
        color: var(--sip-text);
    }

.sip-role-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background-color: rgba(var(--sip-text-rgb), 0.08);
    color: var(--sip-text);
}

    .sip-role-icon svg {
        width: 19px;
        height: 19px;
    }

.sip-role-title {
    font-weight: 600;
    font-size: var(--text-md);
}

.sip-role-chevron {
    margin-left: auto;
    color: var(--sip-muted);
    display: grid;
    place-items: center;
}

    .sip-role-chevron svg {
        width: 14px;
        height: 14px;
    }

/* A form section heading on the registration page: sentence case, not tracked capitals. */
.reg-section {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--sip-text-2);
    margin: 1.5rem 0 0.75rem;
}

.reg-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 0.6rem;
}

@media (max-width: 480px) {
    .reg-row {
        grid-template-columns: 1fr;
    }
}

.sip-captcha {
    margin: 1.25rem 0;
}

.sip-captcha-image {
    display: block;
    width: 220px;
    max-width: 100%;
    height: auto;
    border-radius: var(--sip-radius-sm);
    border: 1px solid var(--sip-hairline);
    /* The PNG is dark-on-white; invert it so it belongs in the dark card. */
    filter: invert(1) hue-rotate(180deg);
    margin-bottom: 0.6rem;
}

.sip-captcha-hint {
    color: var(--sip-muted);
    font-size: var(--text-sm);
    margin: 0.4rem 0 0;
}

/* ---------- licences: capacity line and purchases strip ---------- */

.lic-capacity {
    color: var(--sip-text-2);
    font-size: var(--text-sm);
    margin: 0.3rem 0 0;
}

    .lic-capacity strong {
        color: var(--sip-text);
        font-size: 1.05rem;
    }

.lic-capacity-trial {
    color: var(--sip-muted);
}

.lic-purchases-card {
    margin-bottom: 1.25rem;
}

    .lic-purchases-card h2 {
        margin-bottom: 0.85rem;
    }

.lic-purchase-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.lic-purchase {
    background-color: var(--sip-surface);
    border: 1px solid var(--sip-hairline);
    border-radius: var(--sip-radius-sm);
    padding: 0.7rem 0.9rem;
    min-width: min(180px, 100%);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

/* An expired purchase stays on record and reads as past: muted text and a dashed edge, never a
   half-transparent block whose text drops below the contrast minimum. */
.lic-purchase-expired {
    border-style: dashed;
}

    .lic-purchase-expired .lic-purchase-count,
    .lic-purchase-expired .lic-purchase-count-label,
    .lic-purchase-expired .lic-purchase-term,
    .lic-purchase-expired .lic-purchase-used {
        color: var(--sip-muted);
    }

.lic-purchase-qty {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-bottom: 0.2rem;
}

.lic-purchase-count {
    font-size: 1.15rem;
    font-weight: 700;
}

.lic-purchase-count-label {
    color: var(--sip-text-2);
    font-size: var(--text-sm);
}

.lic-purchase-term {
    margin-left: auto;
    color: var(--sip-text-2);
    font-size: var(--text-xs);
    font-weight: 600;
}

.lic-purchase-meta {
    color: var(--sip-muted);
    font-size: var(--text-xs);
}

.lic-purchase-used {
    color: var(--sip-text-2);
    font-size: var(--text-sm);
    margin-top: 0.25rem;
}

/* ---------- licences: seats ---------- */

.lic-seats-title {
    margin: 0 0 0.75rem;
}

.lic-seat-filters {
    margin-top: 0.35rem;
}

.lic-table {
    margin-bottom: 0.25rem;
}

.lic-expiry-past {
    color: var(--sip-danger);
}

.lic-expiry-soon {
    color: var(--sip-warning);
}

/* "Nobody yet" reads as a state; an em dash reads as missing data. */
.lic-unassigned {
    color: var(--sip-muted);
    font-style: italic;
}

.lic-recipient-name {
    color: var(--sip-muted);
    font-size: var(--text-sm);
    margin-left: 0.4rem;
}

.lic-remaining {
    color: var(--sip-text-2);
    font-size: var(--text-xs);
    margin-left: 0.4rem;
}

/* ---------- the older row menus (pages not yet on SipActionMenu) ----------
   Fixed, not absolute: a table card scrolls sideways, which per spec makes it clip vertically too,
   so an absolutely positioned menu was cut off on the last rows. The anchor comes from the click
   (MouseEventArgs.ClientX/Y written into these custom properties); clamp() keeps it on screen. */

.lic-menu-btn {
    line-height: 1;
    min-width: var(--control-h-sm);
    padding: 0.4rem 0.65rem;
}

.lic-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
}

.lic-menu {
    position: fixed;
    top: min(var(--sip-menu-y, 0px), calc(100vh - 16rem));
    left: clamp(0.5rem, calc(var(--sip-menu-x, 0px) - 15rem + 1rem), calc(100vw - 15.5rem));
    width: 15rem;
    z-index: 1041;
    min-width: min(220px, calc(100vw - 1rem));
    max-height: 15rem;
    overflow-y: auto;
    background-color: var(--sip-card);
    border: 1px solid var(--sip-line-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-pop);
    padding: 0.35rem;
    display: flex;
    flex-direction: column;
}

/* Opened from the keyboard, where the click carries no coordinates: centred instead. */
.lic-menu-centred {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.lic-menu-item {
    min-height: 38px;
    background: none;
    border: none;
    border-radius: 8px;
    color: var(--sip-text);
    text-align: left;
    font-size: var(--text-sm);
    font-weight: 500;
    padding: 0.45rem 0.7rem;
    cursor: pointer;
    white-space: nowrap;
}

    .lic-menu-item:hover {
        background-color: var(--sip-raise);
    }

    .lic-menu-item:focus-visible {
        outline: 2px solid var(--sip-text);
        outline-offset: -2px;
    }

.lic-menu-danger {
    color: var(--sip-danger);
}

    .lic-menu-danger:hover {
        background-color: rgba(var(--sip-danger-rgb), 0.12);
        color: var(--sip-danger-text);
    }

/* ---------- licences: dialogs ---------- */

/* Live "will be valid until…" line under the term/kind pickers. */
.lic-computed {
    color: var(--sip-text-2);
    font-size: var(--text-sm);
    margin: 0.25rem 0 1rem;
}

/* Device-code input + issued-code display (direct licence dialog). */
.lic-code-input {
    font-family: var(--sip-mono);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.lic-issued-code {
    font-family: var(--sip-mono);
    font-size: clamp(1.25rem, 5vw, 1.7rem);
    letter-spacing: 0.1em;
    text-align: center;
    background-color: var(--sip-input);
    border: 1px solid var(--sip-line-strong);
    border-radius: var(--radius-md);
    padding: 1rem;
    margin: 0.75rem 0;
    user-select: all;
    word-break: break-all;
}

.lic-issued-actions {
    display: flex;
    justify-content: center;
    margin-bottom: 0.75rem;
}

.lic-issued-expiry {
    text-align: center;
}

.lic-email-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

    .lic-email-row .form-control {
        flex: 1 1 12rem;
    }

.lic-quote-total {
    background-color: var(--sip-surface);
    border: 1px solid var(--sip-hairline);
    border-radius: var(--sip-radius-sm);
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
}

.lic-quote-line {
    color: var(--sip-text-2);
    font-size: var(--text-sm);
}

.lic-quote-amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--sip-text);
    font-variant-numeric: tabular-nums;
    margin: 0.2rem 0;
}

.lic-quote-note {
    color: var(--sip-muted);
    font-size: var(--text-xs);
}

/* A form laid out on a page rather than inside a dialog — same fields, more room. */
.lic-form-card {
    max-width: 46rem;
    padding: 1.25rem 1.5rem;
}

/* ---------- licences: bulk import ---------- */

.lic-csv-help {
    border: 1px solid var(--sip-hairline);
    border-radius: var(--sip-radius-sm);
    padding: 0.75rem 0.9rem;
    background-color: rgba(var(--sip-text-rgb), 0.02);
}

.lic-csv-sample {
    margin: 0 0 0.6rem;
    padding: 0.6rem 0.75rem;
    background-color: rgba(0, 0, 0, 0.35);
    border-radius: var(--sip-radius-sm);
    color: var(--sip-text);
    font-family: var(--sip-mono);
    font-size: var(--text-xs);
    line-height: 1.5;
    overflow-x: auto;
}

.lic-csv-rules {
    margin: 0 0 0.7rem;
    padding-left: 1.1rem;
    color: var(--sip-text-2);
    font-size: var(--text-sm);
    line-height: 1.65;
}

.lic-csv-input {
    font-family: var(--sip-mono);
    font-size: var(--text-sm);
}

.lic-csv-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.25rem 0 0.75rem;
}

.lic-csv-stat {
    flex: 1 1 8rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--sip-hairline);
    border-radius: var(--sip-radius-sm);
    color: var(--sip-text-2);
    font-size: var(--text-sm);
}

.lic-csv-ok {
    border-color: var(--sip-success);
    color: var(--sip-text);
}

.lic-csv-bad {
    border-color: var(--sip-danger);
    color: var(--sip-text);
}

/* Capped so a file with 400 bad rows cannot make the dialog itself the problem. */
.lic-csv-problems {
    max-height: 16rem;
    overflow: auto;
    border: 1px solid var(--sip-hairline);
    border-radius: var(--sip-radius-sm);
    padding: 0 0.6rem;
}

.lic-csv-problem {
    color: var(--sip-danger);
    font-size: var(--text-sm);
}

/* ---------- licences: the plan cards in the quote dialog ---------- */

.lic-brackets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.lic-bracket {
    flex: 1 1 8rem;
    background-color: var(--sip-surface);
    border: 1px solid var(--sip-hairline);
    border-radius: var(--sip-radius-sm);
    padding: 0.55rem 0.7rem;
    text-align: center;
}

/* The plan this order lands in: neutral selection, as every other choice. */
.lic-bracket-active {
    border-color: var(--sip-text-2);
    background-color: rgba(var(--sip-text-rgb), 0.08);
}

.lic-bracket-range {
    display: block;
    font-size: var(--text-xs);
    color: var(--sip-text-2);
}

.lic-bracket-price {
    display: block;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.lic-bracket-unit {
    display: block;
    font-size: var(--text-xs);
    color: var(--sip-muted);
}

.lic-bracket-devices {
    display: block;
    font-size: var(--text-sm);
    color: var(--sip-text-2);
    margin: 0.1rem 0 0.25rem;
}

/* As a picker: a card is a button, so it needs the page's type. */
button.lic-bracket {
    color: inherit;
    font: inherit;
    cursor: pointer;
}

/* ---------- commerce documents (quotations, invoices) ---------- */

.doc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.doc-party {
    color: var(--sip-text-2);
    line-height: 1.65;
    margin-bottom: 0;
}

    .doc-party strong {
        color: var(--sip-text);
    }

.doc-number {
    font-family: var(--sip-mono);
    font-size: var(--text-sm);
    white-space: nowrap;
}

.doc-amount {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.doc-lines tfoot td {
    border-top: 1px solid var(--sip-hairline);
    color: var(--sip-text-2);
}

.doc-total-row td {
    color: var(--sip-text);
    font-size: 1.05rem;
    font-weight: 700;
}

.doc-footnote {
    color: var(--sip-muted);
    font-size: var(--text-sm);
    margin: 0.6rem 0 0;
}

/* A missing PO number is the usual reason an invoice sits unpaid — say so, quietly. */
.doc-missing {
    color: var(--sip-warning);
    font-size: var(--text-sm);
}

.doc-days {
    color: var(--sip-muted);
    font-size: var(--text-xs);
    margin-left: 0.4rem;
}

.doc-pay {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.35rem 1rem;
    margin: 0;
}

    .doc-pay dt {
        color: var(--sip-muted);
        font-size: var(--text-sm);
        font-weight: 400;
    }

    .doc-pay dd {
        margin: 0;
        font-family: var(--sip-mono);
        font-size: var(--text-sm);
        overflow-wrap: anywhere;
    }

/* The line editor's columns do not fit a dialog at every width: they scroll rather than push out. */
.doc-line-scroll {
    overflow-x: auto;
    margin-bottom: 0.5rem;
}

/* ---------- operator dashboard ---------- */

.adm-stat-warn {
    color: var(--sip-danger);
}

/* min(…, 100%): a single column never asks for more than the screen has (it did at 375px). */
.adm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

    .adm-grid .sip-card {
        overflow-x: auto;
    }

    .adm-grid h2 {
        font-size: var(--text-md);
        margin-bottom: 0.75rem;
    }

/* "See all" beside a panel heading, for cards that show a capped slice of a longer list. */
.adm-card-link {
    float: right;
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.adm-activity {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--text-sm);
}

    .adm-activity li {
        display: flex;
        gap: 0.75rem;
        padding: 0.45rem 0;
        border-bottom: 1px solid var(--sip-hairline);
        flex-wrap: wrap;
    }

        .adm-activity li:last-child {
            border-bottom: none;
        }

.adm-activity-when {
    color: var(--sip-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.adm-activity-action {
    color: var(--sip-text-2);
    font-family: var(--sip-mono);
    font-size: var(--text-xs);
    white-space: nowrap;
}

.adm-activity-detail {
    color: var(--sip-text-2);
    flex: 1;
    min-width: min(200px, 100%);
    overflow-wrap: anywhere;
}

.adm-users {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .adm-users li {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: wrap;
        padding: 0.35rem 0;
    }

/* ---------- operator search page ---------- */

.adm-search-card {
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
}

.adm-search-input {
    font-size: var(--text-md);
}

.adm-search-results {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .adm-search-results li + li {
        border-top: 1px solid var(--sip-hairline);
    }

    .adm-search-results a {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
        padding: 0.6rem 0.35rem;
        text-decoration: none;
        border-radius: var(--sip-radius-sm);
    }

        .adm-search-results a:hover {
            background-color: rgba(var(--sip-text-rgb), 0.04);
        }

.adm-search-title {
    color: var(--sip-text);
    font-weight: 600;
}

.adm-search-subtitle {
    color: var(--sip-muted);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}

/* ---------- billing settings ---------- */

.set-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
    gap: 1rem;
    align-items: start;
    margin-bottom: 1.25rem;
}

/* The pricing table needs the full width whatever the grid does around it. */
.set-wide {
    grid-column: 1 / -1;
}

.set-note {
    color: var(--sip-muted);
    font-size: var(--text-sm);
    margin: 0 0 1rem;
}

.set-short {
    max-width: 10rem;
}

/* A dropdown has to be wide enough for its longest option ("5 years"). */
select.set-short {
    min-width: 6.5rem;
}

.set-price {
    max-width: 9rem;
    margin-left: auto;
    text-align: right;
}

.set-brackets td {
    vertical-align: middle;
}

.set-range {
    color: var(--sip-text-2);
    font-size: var(--text-sm);
    white-space: nowrap;
}

.set-preview {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--sip-hairline);
}

    .set-preview h3 {
        font-size: 0.95rem;
        margin-bottom: 0.75rem;
    }

.set-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-bottom: 2rem;
}

/* ---------- Blazor's error boundary (kept from the scaffold, recoloured) ---------- */

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--sip-danger-strong);
    padding: 1rem 1rem 1rem 3.7rem;
    color: #FFFFFF;
    border-radius: var(--sip-radius-sm);
}

    .blazor-error-boundary::after {
        content: "Something went wrong in this part of the page. Reload to try again.";
    }