html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.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 {
    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;
}

/* Animals grid: MudDataGrid's toolbar has a fixed height (56/64px) built for one row of
   content; our toolbar stacks search-on-top + filter chips beneath, which overflowed that
   fixed height. .mud-table-toolbar.mud-toolbar (both classes are on the same element) is
   specific to grid/table toolbars and beats MudBlazor's own plain ".mud-toolbar" rule on
   specificity, so this can't lose a cascade tie regardless of stylesheet order.
   NOTE: this must live here (global app.css), not in a component's scoped .razor.css —
   MudDataGrid renders its toolbar/table through enough internal component layers that
   Blazor's CSS-isolation scope attribute never reaches them, so ::deep rules silently
   match nothing. Confirmed via the browser's actual computed styles, not a guess. */
.mud-table-toolbar.mud-toolbar {
    height: auto;
    min-height: 56px;
    padding-top: 12px;
    padding-bottom: 12px;
    align-items: stretch;
}

/* Drop the Location column below phone width. Same scoping issue as above — this has to
   be global, not in Animals.razor.css, or it never matches. Combined with .mud-table-cell
   (also on the same element) so it beats MudBlazor's own ".mud-table-cell{display:table-cell}"
   rule on specificity instead of relying on stylesheet order. */
@media (max-width: 600px) {
    .mud-table-cell.location-column {
        display: none;
    }
}

/* Breeding season grid (Breeding.razor) date range: below phone width, keep it on one line
   so it can't wrap mid-value and cascade down the cell (issue #2). Phone-scoped like the
   Location rule above — no reason to constrain wrapping on the roomy desktop table, and the
   reported bug is phone-only. Same scoping issue as that rule: must be global, not in
   Breeding.razor.css, or it never matches; combined with .mud-table-cell to win on
   specificity rather than stylesheet order. */
@media (max-width: 600px) {
    .mud-table-cell.season-dates-column {
        white-space: nowrap;
    }
}

/* App bar wordmark + drawer version watermark (MainLayout.razor). Same scoping issue as
   above, but for MudAppBar/MudText this time, not MudDataGrid — confirmed via the actual
   rendered HTML (curl'd, not guessed): neither MudAppBar's <header> nor MudText's <span>
   carry a Blazor CSS-isolation scope attribute, so a scoped MainLayout.razor.css rule
   targeting them silently matches nothing. Must live here. */
.appbar-tall {
    min-height: 72px;
}

.appbar-wordmark-title {
    font-weight: 600;
}

.appbar-wordmark-subtitle {
    opacity: 0.85;
    letter-spacing: 0.02em;
}

/* Dropped on phones — no room, and the farmer doesn't need the subtitle to recognize
   his own app. Same 600px breakpoint as the Animals grid's Location column above. */
@media (max-width: 600px) {
    .appbar-wordmark-subtitle {
        display: none;
    }
}

/* Watermark, not a headline — deliberately low-contrast against the tan drawer background. */
.drawer-version {
    opacity: 0.5;
}

/* ---- Auth screens (Step 10) ------------------------------------------------------ */
/* Centered login card on the warm off-white background. The login form uses native
   inputs (they must post in a full-page form submit — see Login.razor), styled here to
   sit comfortably alongside MudBlazor's own components. */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background-color: var(--mud-palette-background, #F6F4EC);
}

.auth-card {
    width: 100%;
    max-width: 400px;
    padding: 2rem;
}

.auth-label {
    display: block;
    margin: 0.75rem 0 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

.auth-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.65rem 0.75rem;
    font-size: 1rem;
    border: 1px solid var(--mud-palette-lines-inputs, rgba(0, 0, 0, 0.3));
    border-radius: var(--mud-default-borderradius, 4px);
    background-color: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary);
}

.auth-input:focus {
    outline: none;
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 1px var(--mud-palette-primary);
}

/* "or sign in with email" separator on the login page. A classic centered-label rule
   (two flex-grown pseudo-element lines either side of the text) instead of two MudDividers
   in a flex row — the latter overflowed the card and wrapped the label vertically. Lives in
   global app.css because scoped CSS can't reliably target MudBlazor internals anyway, and
   this is used from the login card. */
.auth-divider {
    display: flex;
    align-items: center;
    margin: 1.25rem 0;
    color: var(--mud-palette-text-secondary);
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1 1 auto;
    border-bottom: 1px solid var(--mud-palette-divider, rgba(0, 0, 0, 0.12));
}

.auth-divider span {
    padding: 0 0.75rem;
    font-size: 0.75rem;
    white-space: nowrap;
}