:root {
    --admin-sidebar-bg: #222e3c;
    --admin-sidebar-bg-hover: #2a3749;
    --admin-canvas: #f5f7fb;
    --admin-primary: #3b7ddd;
    --admin-primary-hover: #2f68b8;
    --admin-card-border: #e3e7ed;
    --admin-text-muted: #6c7a91;
    --admin-sidebar-width: 4.5rem;
    --admin-surface: #ffffff;
    --admin-text: #1a1f2b;
}

/* Set by AdminThemeHost.razor.js on <html> once the circuit connects and the saved
   preference (or the just-toggled one) is known - see AdminThemeState. --admin-primary
   and --admin-primary-hover are also overridden inline by the same script whenever the
   accent color preset changes, so this block only needs the day/night-dependent ones. */
:root[data-theme="dark"] {
    --admin-canvas: #12161c;
    --admin-card-border: #2a323d;
    --admin-text-muted: #8b96a8;
    --admin-surface: #1c222b;
    --admin-text: #e7eaf0;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--admin-canvas);
    color: var(--admin-text);
}

h1, h2, h3 {
    font-weight: 700;
    color: var(--admin-text);
}

.content {
    padding-top: 1.1rem;
}

/* Fallback shown in list-table thumbnail slots (products/models/brands) when the row
   has no image - same footprint as the <img> it replaces so rows don't shift. */
.list-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 4px;
    background: var(--admin-primary);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

h1:focus {
    outline: none;
}

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

/* Account/Login.razor renders as static SSR (EditForm + FormName +
   [SupplyParameterFromForm]) for Identity's POST-based sign-in, so its inputs stay
   native <input>/<button> elements rather than MudBlazor components, which don't
   participate in that binding path. Styled here (global, not scoped) to look
   consistent with the MudBlazor Outlined inputs used everywhere else in the app -
   scoped component CSS can't reliably target elements a child component renders. */
.login-field {
    margin-bottom: 1.25rem;
}

.login-label {
    display: block;
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 0.25rem;
}

.login-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.23);
    border-radius: 4px;
    background: #fff;
    color: rgba(0, 0, 0, 0.87);
}

.login-input:focus {
    outline: none;
    border-color: var(--admin-primary);
    border-width: 2px;
    padding: calc(0.5rem - 1px) calc(0.75rem - 1px);
}

.login-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
}

.login-submit {
    display: block;
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    background: var(--admin-primary);
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.login-submit:hover {
    background: var(--admin-primary-hover);
}

.login-validation-summary {
    color: #d32f2f;
    margin-bottom: 1rem;
}

.login-validation-message {
    display: block;
    color: #d32f2f;
    font-size: 0.75rem;
    margin-top: 0.25rem;
}
