/* App-level layer on top of the Classical design system (classical/styles.css).
   Every color, font, spacing and radius comes from the Classical tokens; the
   only additions are the two status roles below, which the mono palette
   deliberately does not carry. */

:root {
    /* Status roles for job outcomes - muted, ink-like, in keeping with the
       stroke-not-fill direction. Used as text/border colors with color-mix
       tints for backgrounds, never as solid fills. */
    --app-danger: #8c2f2f;
    --app-success: #3d6b45;
}

a, .btn-link {
    color: var(--color-accent);
}

/* Bootstrap's :disabled button rules outrank Classical's single-class ones
   (.btn-primary:disabled beats .btn-primary), which resurrected solid blue
   fills on disabled buttons. Restate the Classical stroke look at matching
   specificity; Classical's own .btn:disabled opacity still applies. */
.btn.btn-primary:disabled, .btn.btn-primary.disabled {
    background-color: transparent;
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.btn.btn-secondary:disabled, .btn.btn-secondary.disabled {
    background-color: transparent;
    color: var(--color-text);
    border-color: var(--color-divider);
}

.content {
    padding-top: var(--space-4);
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--color-accent-400);
}

.invalid {
    outline: 1px solid var(--app-danger);
}

.validation-message {
    color: var(--app-danger);
    font-size: 13px;
}

.blazor-error-boundary {
    border: 1px solid var(--app-danger);
    border-left-width: 4px;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--app-danger) 7%, var(--color-bg));
    color: var(--color-text);
    padding: var(--space-3) var(--space-4);
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* Bootstrap form-floating placeholders (Account template pages still use them) */
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: color-mix(in srgb, var(--color-text) 45%, transparent);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}