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;
}
body { margin: 0; font-family: system-ui, "Segoe UI", sans-serif; }
.error { color: var(--dxds-color-content-danger-default-rest, #c00); }

/* Login */
.login { max-width: 340px; margin: 10vh auto; padding: 0 16px; }
.login form { display: flex; flex-direction: column; gap: 12px; }
.login label { display: flex; flex-direction: column; gap: 4px; }
.login input { padding: 6px 8px; }

/* Shell: header on top, side menu on the left */
.app { display: grid; grid-template-columns: 220px 1fr; grid-template-rows: auto 1fr; min-height: 100vh; }
.app-header {
    grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 6px 16px;
    border-bottom: 1px solid var(--dxds-color-border-neutral-default-rest, #e0e0e0);
}
.app-header form { display: inline; }
.app-title { flex: 1; font-size: 1.1rem; font-weight: 600; }
.app-sidebar { padding: 8px; border-right: 1px solid var(--dxds-color-border-neutral-default-rest, #e0e0e0); }
.app-content { padding: 16px 24px; min-width: 0; }
.app-content h1 { margin-top: 0; font-size: 1.5rem; }
.nav-toggle { display: none; }
.nav-toggle-btn { cursor: pointer; font-size: 1.25rem; padding: 0 4px; user-select: none; }
/* Desktop: the toggle hides the menu. Phone: the menu is hidden until toggled. */
.nav-toggle:checked ~ .app-sidebar { display: none; }
.app:has(.nav-toggle:checked) { grid-template-columns: 1fr; }
@media (max-width: 768px) {
    .app { grid-template-columns: 1fr; }
    .app-sidebar { display: none; border-right: 0; border-bottom: 1px solid var(--dxds-color-border-neutral-default-rest, #e0e0e0); }
    .nav-toggle:checked ~ .app-sidebar { display: block; }
    .app-user { display: none; }
}

/* Theme switcher */
.theme-switcher { position: relative; }
.theme-panel {
    position: absolute; right: 0; top: calc(100% + 4px); z-index: 1000; width: 240px; padding: 12px;
    display: flex; flex-direction: column; gap: 8px; border-radius: 8px;
    background: var(--dxds-color-surface-neutral-default-rest, #fff);
    border: 1px solid var(--dxds-color-border-neutral-default-rest, #e0e0e0);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.theme-section { display: flex; justify-content: space-between; align-items: center; font-weight: 600; }
.theme-swatches { display: grid; grid-template-columns: repeat(6, 28px); gap: 8px; }
.swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.swatch.selected { outline: 2px solid currentColor; outline-offset: 2px; }
.theme-classic { text-align: left; background: none; border: 0; padding: 4px 6px; border-radius: 4px; cursor: pointer; color: inherit; }
.theme-classic:hover { background: rgba(127, 127, 127, .15); }
.theme-classic.selected { font-weight: 600; }
.app-header .btn-link { background: none; border: 0; padding: 4px 8px; color: inherit; font: inherit; cursor: pointer; border-radius: 4px; }
.app-header .btn-link:hover { background: rgba(127, 127, 127, .15); }

/* Side menu icons: SVG masks filled with currentColor, so they follow every theme (incl. dark). */
.nav-icon { display: inline-block; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.icon-tenants { --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-linejoin='round'%3E%3Cpath d='M4 21V4h10v17M14 9h6v12M2 21h20M7 8h1M10 8h1M7 12h1M10 12h1M7 16h1M10 16h1M17 13h1M17 17h1'/%3E%3C/svg%3E"); }
.icon-users { --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'%3E%3Ccircle cx='9' cy='8' r='4'/%3E%3Cpath d='M2 21c0-4 3-6 7-6s7 2 7 6M16 4a4 4 0 0 1 0 8M19 15c2 1 3 3 3 6'/%3E%3C/svg%3E"); }
.icon-roles { --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-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M12 2l8 3v6c0 5-3.5 9-8 11-4.5-2-8-6-8-11V5z'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-5'/%3E%3C/svg%3E"); }