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;
}
/* Backoffice shell */
html, body {
    margin: 0;
    height: 100%;
    font-family: "Segoe UI", system-ui, sans-serif;
    background: var(--color-sf-content-bg-color);
    color: var(--color-sf-content-text-color);
}

/* The top bar is square-cornered. */
.app-bar.e-appbar {
    border-radius: 0;
}

.app-bar .app-title {
    font-size: 1.1rem;
    font-weight: 600;
}

.app-bar .app-user {
    margin-right: 0.75rem;
}

.theme-switch {
    display: flex;
    gap: 2px;
    margin-right: 0.5rem;
}

/* Icons are drawn as masks so they take the button's text colour in every theme. */
.theme-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask: var(--theme-icon) center / contain no-repeat;
    mask: var(--theme-icon) center / contain no-repeat;
}

.theme-icon-light {
    --theme-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41'/%3E%3C/svg%3E");
}

.theme-icon-dark {
    --theme-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z'/%3E%3C/svg%3E");
}

.theme-icon-auto {
    --theme-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E");
}

.theme-button.active {
    background: rgba(0, 0, 0, 0.18);
}

.app-logout {
    margin: 0;
}

/* Shell: SfSidebar renders inside .app-shell and offsets the next sibling (.app-content). */
.app-shell {
    position: relative;
    min-height: calc(100vh - 48px);
}

.app-sidebar {
    padding-top: 0.5rem;
    border-right: 1px solid var(--color-sf-border-light);
}

/* Docked sidebar: SfMenu renders the label as a bare text node, so the row's font size is zeroed and the icon restores its own.
   The flyouts are appended to the body (they inherit the CssClass too), so every rule is scoped to the sidebar. */
.e-sidebar .app-dock-menu.e-menu-container,
.e-sidebar .app-dock-menu.e-menu-container ul.e-menu.e-vertical {
    display: block;
    width: 100%;
    min-width: 0;
    background: transparent;
    border: 0;
}

.e-sidebar .app-dock-menu.e-menu-container ul.e-menu > .e-menu-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0;
    font-size: 0;
}

.e-sidebar .app-dock-menu.e-menu-container ul.e-menu > .e-menu-item .e-caret {
    display: none;
}

.e-sidebar .app-dock-menu.e-menu-container ul.e-menu > .e-menu-item .e-menu-icon {
    margin: 0;
    font-size: 18px;
}

.app-content {
    min-width: 0;
    padding: 1.25rem 1.5rem;
}

.app-breadcrumb {
    margin-bottom: 0.75rem;
}

.app-content h1 {
    margin-top: 0;
    font-size: 1.5rem;
}

.form-field {
    margin-bottom: 1rem;
}

.form-field label {
    display: block;
    margin-bottom: 0.25rem;
}

.form-buttons {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

/* Sign-in page */
.empty-layout {
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    background: var(--color-sf-content-bg-color);
}

.login-card {
    width: 360px;
    padding: 0.5rem;
}

.login-card label {
    display: block;
    margin: 0.75rem 0 0.25rem;
}

.login-card .e-input {
    width: 100%;
    box-sizing: border-box;
}

.login-error {
    margin-bottom: 0.5rem;
    color: var(--color-sf-danger);
}

.login-submit {
    width: 100%;
    margin-top: 1.25rem;
}

.form-row {
    display: flex;
    gap: 1rem;
}

.form-row > .form-field {
    flex: 1;
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0.75rem 0;
}

.muted {
    color: var(--color-sf-content-text-color-alt2);
}

.more {
    margin-top: 0.75rem;
}

.audit-changes {
    border-collapse: collapse;
}

.audit-changes th,
.audit-changes td {
    padding: 0.25rem 0.75rem;
    border-bottom: 1px solid var(--color-sf-border-light);
    text-align: left;
    vertical-align: top;
}

.card-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.25rem 1rem;
    margin-bottom: 1rem;
}

.card-facts dt {
    color: var(--color-sf-content-text-color-alt2);
}

.card-facts dd {
    margin: 0;
}

.placement-list {
    list-style: none;
    padding: 0;
}

.placement-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hierarchy-panes {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.hierarchy-pane {
    flex: 1;
    min-width: 320px;
}

.image-upload-button {
    position: relative;
    cursor: pointer;
}

.image-upload-button.e-disabled {
    pointer-events: none;
}

/* The native input is kept for the keyboard and screen readers but drawn by its label. */
.image-upload-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.image-tile {
    margin: 0;
    border: 1px solid var(--color-sf-border-light);
    border-radius: 4px;
    overflow: hidden;
}

.image-tile img,
.image-placeholder {
    display: block;
    width: 100%;
    height: 160px;
    object-fit: contain;
    background: var(--color-sf-content-bg-color-alt2);
}

.image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-sf-content-text-color-alt2);
}

.image-tile figcaption {
    padding: 0.5rem;
}

.image-labels {
    display: flex;
    gap: 0.25rem;
    min-height: 1.4rem;
}

.image-badge,
.image-state {
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-size: 0.75rem;
    background: var(--color-sf-content-bg-color-alt3);
}

.image-badge {
    background: var(--color-sf-primary-light);
    color: var(--color-sf-content-text-color);
}

.image-state-failed {
    background: var(--color-sf-danger-light);
    color: var(--color-sf-content-text-color);
}

.image-alt {
    margin: 0.25rem 0;
    overflow-wrap: anywhere;
}

.image-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.attachment-public {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.attachment-table {
    width: 100%;
    border-collapse: collapse;
}

.attachment-table th,
.attachment-table td {
    padding: 0.4rem 0.6rem;
    text-align: left;
    border-bottom: 1px solid var(--color-sf-border-light);
}

/* Tags: chips in the tag color (inline style), a swatch in pickers, the color field of the tag dialog. */
.tag-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.tag-chip {
    display: inline-block;
    padding: 0.1rem 0.55rem;
    border: 1px solid var(--color-sf-border-light);
    border-radius: 999px;
    font-size: 0.85em;
    line-height: 1.4;
    white-space: nowrap;
}

.tag-swatch {
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    margin-right: 0.4rem;
    border-radius: 50%;
    vertical-align: middle;
}

.color-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.color-field input[type="color"] {
    width: 2.5rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--color-sf-border-light);
    background: none;
}