/* The brand palette used to be here. It now lives once in the shared component library, at
   `UI/wwwroot/brand.css`, and App.razor links it as `_content/ChorePoints.UI/brand.css` before
   this file -- so --brand-primary and the rest are already defined by the time anything below
   reads them. See Documentation/60-The-Shared-Component-Library.md. */

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

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

/* The primary button and the focus ring arrived with the Blazor template painted Blazor blue
   (#1b6ec2 and #258cfb), which is not a ChorePoints colour. They read the brand instead.

   Two things are worth knowing. The first is that this sets Bootstrap's --bs-btn-* variables
   rather than `background-color` outright, which is what the template did: a rule that sets
   the property wins over a scoped component stylesheet setting the variable, so a component
   wanting its own shade had no way in (the phone app hit exactly that -- doc 59 -- and doc 21
   is the pattern this follows). The second is why the button sits on --brand-primary-dark and
   not on --brand-primary: white on the lighter purple is 3.7:1, short of AA, and these are
   buttons full of ordinary-sized words. See Documentation/77-Brand-Coloured-Buttons.md. */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand-primary-dark);
    --bs-btn-border-color: var(--brand-primary-dark);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-primary-deep);
    --bs-btn-hover-border-color: var(--brand-primary-deep);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-primary-deep);
    --bs-btn-active-border-color: var(--brand-primary-deep);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--brand-primary-dark);
    --bs-btn-disabled-border-color: var(--brand-primary-dark);
}

/* The outline button is the primary one's partner -- "Join with a family name and PIN instead"
   beside "Go to the family" -- and Bootstrap drew it the same template blue. Its label is the
   one piece of this that is text on the page rather than text on a button, so it takes
   --brand-primary-deep: 5.0:1 against --brand-page-bg, where --brand-primary-dark would be
   3.9:1. The border keeps the lighter shade, which only has 3:1 to clear as a control edge. */
.btn-outline-primary {
    --bs-btn-color: var(--brand-primary-deep);
    --bs-btn-border-color: var(--brand-primary-dark);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-primary-dark);
    --bs-btn-hover-border-color: var(--brand-primary-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--brand-primary-deep);
    --bs-btn-active-border-color: var(--brand-primary-deep);
    --bs-btn-disabled-color: var(--brand-primary-dark);
    --bs-btn-disabled-border-color: var(--brand-primary-dark);
}

/* The card header on the eleven standing-alone pages an account passes through -- login,
   register, the two password-reset steps, the three email-confirmation ones, access denied,
   send feedback, accepting an invite and recovering a family -- was `bg-primary text-white`,
   so it drew the last of Bootstrap's own blue at the top of the first page anyone sees. These
   headers read the brand instead, and they read it as --brand-nav-gradient: the same light-to-
   dark sweep the navigation sidebar wears, so the band across the top of the card and the band
   down the side of the app are one colour rather than two purples.

   Contrast: white on the top of that gradient (--brand-primary) is 3.7:1, which is short of
   the 4.5:1 AA asks of ordinary text and is exactly the open question doc 24 raised about the
   0.9rem nav labels. It is not short here, because every one of these headers holds a single
   <h3> -- 1.75rem, 28px -- and AA asks 3:1 of text that size. So the gradient is safe for a
   card title and still not safe for small print; anything smaller added to one of these
   headers wants --brand-primary-dark (4.8:1) or deeper. The `text-white` utility went with
   the blue, so the colour is set here rather than in each page's markup.

   See Documentation/82-Brand-Coloured-Card-Headers.md. */
.card-header-brand {
    background: var(--brand-nav-gradient);
    color: #fff;
    border-bottom-color: var(--brand-primary-dark);
}

.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 var(--brand-primary);
}

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

/* --- Checkbox, radio and switch outlines -----------------------------------
   Bootstrap's unticked outline is rgba(0, 0, 0, .25), which is too faint to read as the
   edge of something tappable (see the note on --brand-check-border in brand.css). The
   colour goes in through --bs-border-color, which the `border` shorthand Bootstrap writes
   on .form-check-input reads, so a component that wants its own edge still has a way in --
   and the ticked state, whose border-color Bootstrap sets outright, is left alone.

   A switch's knob is a background image rather than a border, so it is re-stated with the
   same grey: a dark ring around a pale knob would look like a mistake. That one is the
   literal hex and not the token, because a custom property cannot be read from inside a
   data: url -- keep the two in step. The ticked knob (white) and the focus knob are
   Bootstrap's own and unchanged.

   This replaces the Blazor template's .darker-border-checkbox, which was the same idea
   applied by hand and which no markup in either app ever wore.
   See Documentation/97-The-Checkbox-Outline.md. */
.form-check-input {
    --bs-border-color: var(--brand-check-border);
}

.form-switch .form-check-input {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23767676'/%3e%3c/svg%3e");
}

/* The ticked state, which Bootstrap writes as a literal #0d6efd rather than as a variable,
   so it survived every other repaint: a blue tick on a purple card was the loudest template
   blue left on the login page once the box above started being noticed. --brand-primary-dark
   is the same shade a filled button rests on, and for the same reason -- the tick and the
   knob are white, and white needs 4.5:1 (doc 77). */
.form-check-input:checked {
    background-color: var(--brand-primary-dark);
    border-color: var(--brand-primary-dark);
}

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

/* --- The Notes toggle ------------------------------------------------------
   Notes are optional and usually absent, so they stay behind a toggle rather than
   taking permanent vertical space. Here rather than in a component's scoped CSS
   because two components wear it: the chore card and the add/edit form (doc 78). */
.chore-notes-toggle {
    --bs-btn-padding-x: 0;
    --bs-btn-padding-y: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    text-decoration: none;
    color: var(--bs-secondary-color, #6c757d);
}

.chore-notes-toggle:hover,
.chore-notes-toggle:focus-visible {
    color: var(--bs-body-color, #212529);
}

/* On the form only: the chore already has notes, which are a click away while the
   field is closed. The card never needs it -- it only draws the toggle at all when
   there are notes to read. */
.chore-notes-toggle.chore-notes-filled {
    color: var(--bs-body-color, #212529);
    font-weight: 600;
}

.chore-notes-caret {
    font-size: 0.65rem;
    transition: transform 0.15s ease;
}

.chore-notes-toggle[aria-expanded="true"] .chore-notes-caret {
    transform: rotate(180deg);
}