/* ProStudio (an AlmostBest app) - shared styles. No brand colours (user choice): neutral greys, light or dark as the device says. */

h1:focus {
    outline: none;
}

.validation-message {
    color: #c62828;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "Something went wrong.";
    }

.mono {
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    word-break: break-all;
}

/* ---- Account pages (server-rendered forms) ---- */
:root {
    --account-bg: #f4f4f5;
    --account-card: #ffffff;
    --account-text: #1f1f23;
    --account-muted: #5f6068;
    --account-border: #d4d4d8;
    --account-button: #2f2f35;
    --account-button-text: #ffffff;
    --account-error: #b3261e;
    --account-ok: #1b5e20;
}

@media (prefers-color-scheme: dark) {
    :root {
        --account-bg: #18181b;
        --account-card: #232327;
        --account-text: #ececf0;
        --account-muted: #a1a1aa;
        --account-border: #3f3f46;
        --account-button: #e4e4e7;
        --account-button-text: #18181b;
        --account-error: #f2b8b5;
        --account-ok: #a5d6a7;
    }
}

.account-page {
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 1rem;
    background: var(--account-bg);
    color: var(--account-text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    box-sizing: border-box;
}

.account-card {
    width: 100%;
    max-width: 26rem;
    background: var(--account-card);
    border: 1px solid var(--account-border);
    border-radius: 8px;
    padding: 1.5rem;
    box-sizing: border-box;
}

.account-brand {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.account-parent {
    font-size: 0.8rem;
    opacity: 0.7;
    margin: 0 0 1rem 0;
}

.app-parent {
    opacity: 0.7;
}

.account-card h1 {
    font-size: 1.15rem;
    margin: 0 0 1rem 0;
}

.account-card label {
    display: block;
    font-size: 0.9rem;
    margin: 0.75rem 0 0.25rem 0;
}

.account-card input[type=email],
.account-card input[type=password],
.account-card input[type=text] {
    width: 100%;
    box-sizing: border-box;
    padding: 0.6rem;
    font-size: 1rem;
    border: 1px solid var(--account-border);
    border-radius: 6px;
    background: transparent;
    color: var(--account-text);
}

.account-card button {
    margin-top: 1.25rem;
    width: 100%;
    padding: 0.7rem;
    font-size: 1rem;
    border: none;
    border-radius: 6px;
    background: var(--account-button);
    color: var(--account-button-text);
    cursor: pointer;
}

.account-card a {
    color: inherit;
}

.account-links {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--account-muted);
}

.account-error {
    color: var(--account-error);
    margin: 0.75rem 0;
}

.account-ok {
    color: var(--account-ok);
    margin: 0.75rem 0;
}

.account-key {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 1rem;
    letter-spacing: 0.05em;
    word-break: break-all;
    padding: 0.5rem;
    border: 1px dashed var(--account-border);
    border-radius: 6px;
}

.account-codes {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    columns: 2;
}