/* Disable transitions only on initial page load */
html:not(.transitions-enabled) * {
    transition: none !important;
}

/* Dark mode base styles */
html {
    background-color: #ffffff;
}

    html.dark-mode {
        background-color: #1a1a1a;
    }

        html.dark-mode body {
            background-color: #1a1a1a;
            color: rgba(255, 255, 255, 0.87);
        }

        /* Force MudBlazor components to be dark immediately */
        html.dark-mode .mud-paper,
        html.dark-mode .mud-card,
        html.dark-mode .mud-dialog,
        html.dark-mode .mud-popover,
        html.dark-mode .mud-drawer {
            background-color: #1e1e1e !important;
            color: rgba(255, 255, 255, 0.87) !important;
        }

        html.dark-mode .mud-input,
        html.dark-mode .mud-input-root,
        html.dark-mode .mud-input-control {
            color: rgba(255, 255, 255, 0.87) !important;
        }

        html.dark-mode .mud-input-label,
        html.dark-mode .mud-input-helper-text {
            color: rgba(255, 255, 255, 0.7) !important;
        }

        html.dark-mode .mud-input-outlined .mud-input-outlined-border {
            border-color: rgba(255, 255, 255, 0.23) !important;
        }

        html.dark-mode .mud-button {
            color: rgba(255, 255, 255, 0.87) !important;
        }

        html.dark-mode .mud-typography {
            color: rgba(255, 255, 255, 0.87) !important;
        }

/* Rest of your existing CSS */
html, body {
    background-color: #1a1a1a;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

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::after {
    content: "An error has occurred."
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.blazor-error-boundary {
    background: url(something) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}