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

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

/* Services Portal look & feel -- every color/font below reads from the
   MudBlazor theme tokens (set once in MainLayout.razor), never a literal
   hardcoded value, so light/dark stay consistent by construction. */

body {
    font-family: "Geist", "Segoe UI", system-ui, sans-serif;
}

.app-bar-flat {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.app-drawer .mud-drawer-content {
    border-right: 1px solid var(--mud-palette-lines-default);
}

.app-brand-mark {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 7px;
    background: var(--mud-palette-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-brand-name {
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--mud-palette-appbar-text);
}

.app-nav-section {
    display: block;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    padding: 16px 10px 6px 10px;
}

.mud-drawer .mud-nav-link {
    border-radius: 6px;
    margin: 2px 8px;
    width: calc(100% - 16px);
}

.mud-drawer .mud-nav-link.active {
    background-color: var(--mud-palette-primary-hover);
    color: var(--mud-palette-primary);
}

.mud-card {
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.mud-card:hover {
    transform: translateY(-2px);
}

.app-logout-link {
    display: flex;
    align-items: center;
    width: 100%;
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.875rem;
    padding: 8px 10px;
    border-radius: 6px;
    color: var(--mud-palette-text-primary);
}

.app-logout-link:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.app-add-button {
    min-width: 168px;
}

/* A secret entered as plain text but drawn as dots. type="password" makes Chrome offer to save the value
   to the Google Password Manager (it ignores autocomplete for that), so secret fields that aren't real
   logins use this instead. Firefox doesn't support the property and shows the text unmasked. */
.secret-mask.secret-masked input {
    -webkit-text-security: disc;
}

/* CODECO EDI Profiles > Designer tab. Theme tokens only, same as the rest of the app. */

.edi-canvas {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.edi-section {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: var(--mud-palette-surface);
    overflow: hidden;
}

.edi-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--mud-palette-background-gray);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.edi-section-title {
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.edi-section-sub {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.edi-section-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.edi-dropzone {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 44px;
    border-radius: 8px;
}

/* MudBlazor adds this to every zone while a drag is in progress. */
.edi-dragging .edi-dropzone,
.edi-dropzone.edi-dragging {
    outline: 2px dashed var(--mud-palette-primary);
    outline-offset: 2px;
}

.edi-empty {
    padding: 10px 12px;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 8px;
    text-align: center;
}

.edi-node {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 8px 10px;
    background: var(--mud-palette-surface);
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.edi-node:hover {
    border-color: var(--mud-palette-primary);
}

.edi-node.selected,
.edi-loop-head.selected {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 2px var(--mud-palette-primary-hover);
}

.edi-node-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.edi-node-title {
    font-weight: 600;
}

.edi-node-meta {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.edi-node-children {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 8px 0 0 16px;
}

.edi-seq {
    min-width: 28px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.edi-drag-icon {
    cursor: grab;
    color: var(--mud-palette-text-secondary);
}

.edi-flag {
    font-weight: 700;
    color: var(--mud-palette-warning);
}

.edi-node-preview,
.edi-json-preview {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 0.8rem;
}

.edi-node-preview {
    margin-top: 4px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.edi-node-warn {
    margin-top: 2px;
    font-size: 0.75rem;
    color: var(--mud-palette-warning);
}

.edi-json-preview {
    margin: 0;
    padding: 8px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-primary);
    white-space: pre-wrap;
    word-break: break-all;
}

.edi-loop {
    border: 1px solid var(--mud-palette-primary);
    border-radius: 10px;
    overflow: hidden;
}

.edi-loop-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--mud-palette-primary-hover);
    border: 1px solid transparent;
    cursor: pointer;
}

.edi-loop-body {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}

.edi-loop-body .edi-dropzone {
    width: 100%;
}

.edi-inspector-wrap {
    position: sticky;
    top: 76px;
    max-height: calc(100vh - 92px);
    overflow-y: auto;
}

.edi-field {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
}

.edi-field:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.edi-field-pos {
    min-width: 42px;
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.edi-field-main {
    flex: 1;
    min-width: 0;
}

.edi-field-value {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.edi-field-meta {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.home-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: calc(100vh - 56px - 96px);
}