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

/*
    Links, buttons and focus rings are deliberately NOT restated here.

    The scaffolded template pinned them to fixed hex values, which sit on top of
    Bootstrap's own tokens and therefore do not follow the theme - a hard-coded
    #006bb7 link and a white focus ring are unreadable on a dark background.
    Bootstrap's defaults are theme-aware, so the fix is to let them through.
*/

.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;
}
/*
    Blazor's error UI, revealed by the framework setting display: block when a
    circuit fails. It must default to none HERE rather than in a component's
    scoped stylesheet: a scoped rule only matches markup belonging to that
    component, so it cannot hide the copy a host shell declares - which is why
    the Photino window has been showing the banner permanently.

    The .reload and .dismiss class names are load-bearing; Blazor wires its own
    handlers to them.
*/
#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 1050;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    border-radius: 0;
    padding: 0.6rem 2.5rem 0.7rem 1.25rem;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ==================================================================
   The palette
   ==================================================================

   Success, danger and warning are the user's, taken from two reference
   images they supplied: a pale yellow-green Ready to Assign banner with a
   deep green button on it, and three pills - salmon, yellow, green.

   Bootstrap's own success (#198754) and danger (#dc3545) are saturated
   mid-tones carrying white text. These are pale surfaces carrying dark
   text, so overriding the token alone is not enough: .text-bg-success and
   .btn-success bake `color: #fff` into the rule rather than deriving it,
   and would leave white on pale green. Every place that pairing is
   declared is restated below.

   Primary is green too, by the same instruction, and it takes the deep
   tone rather than the pale one: primary is the colour of an action - the
   button on that same reference banner - and a pale surface does not read
   as one. It carries white text where success carries dark, which is why
   the two greens do not collide even side by side.

   One green cannot serve both themes as *text*, though. #497519 on a dark
   page is very nearly unreadable, so anything that draws primary as text
   rather than as a surface - a link, the rail's mark - goes through
   --mawhab-accent, which is the deep tone on a light page and the pale one
   on a dark page. Filled surfaces keep the deep tone in both, because they
   supply their own white text.
*/

:root,
[data-bs-theme="light"] {
    --bs-primary: #497519;
    --bs-primary-rgb: 73, 117, 25;
    --bs-primary-text-emphasis: #2c460f;
    --bs-primary-bg-subtle: #dbe3d1;
    --bs-primary-border-subtle: #b6c8a3;

    --mawhab-accent: #497519;

    --bs-link-color: #497519;
    --bs-link-color-rgb: 73, 117, 25;
    --bs-link-hover-color: #3a5e14;
    --bs-link-hover-color-rgb: 58, 94, 20;

    --bs-success: #addd72;
    --bs-success-rgb: 173, 221, 114;
    --bs-success-text-emphasis: #43601f;
    --bs-success-bg-subtle: #eef8e2;
    --bs-success-border-subtle: #cfebad;

    --bs-danger: #faaca4;
    --bs-danger-rgb: 250, 172, 164;
    --bs-danger-text-emphasis: #72160d;
    --bs-danger-bg-subtle: #fde0dd;
    --bs-danger-border-subtle: #faa79e;

    --bs-warning: #f8d556;
    --bs-warning-rgb: 248, 213, 86;
    --bs-warning-text-emphasis: #745d0b;
    --bs-warning-bg-subtle: #fef6dd;
    --bs-warning-border-subtle: #fbe79d;
}

[data-bs-theme="dark"] {
    --bs-primary: #497519;
    --bs-primary-rgb: 73, 117, 25;
    --bs-primary-text-emphasis: #bce38c;
    --bs-primary-bg-subtle: #1c2810;
    --bs-primary-border-subtle: #3f5a24;

    --mawhab-accent: #addd72;

    --bs-link-color: #addd72;
    --bs-link-color-rgb: 173, 221, 114;
    --bs-link-hover-color: #c4e698;
    --bs-link-hover-color-rgb: 196, 230, 152;

    --bs-success: #addd72;
    --bs-success-rgb: 173, 221, 114;
    --bs-success-text-emphasis: #bce38c;
    --bs-success-bg-subtle: #202914;
    --bs-success-border-subtle: #4a622d;

    --bs-danger: #faaca4;
    --bs-danger-rgb: 250, 172, 164;
    --bs-danger-text-emphasis: #f88478;
    --bs-danger-bg-subtle: #2e1210;
    --bs-danger-border-subtle: #6e2821;

    --bs-warning: #f8d556;
    --bs-warning-rgb: 248, 213, 86;
    --bs-warning-text-emphasis: #f9dd76;
    --bs-warning-bg-subtle: #2e270f;
    --bs-warning-border-subtle: #6f5e20;
}

/*
    Text on those three surfaces. Bootstrap writes the pairing as a literal,
    so the token above cannot reach it - #fff on #addd72 is the result of
    changing one without the other. Dark in both themes, because the surface
    is pale in both themes: these colours mean something, and a pill that
    inverted with the page would stop meaning it.
*/
.text-bg-success,
.text-bg-danger,
.text-bg-warning {
    color: #1f1e1e !important;
}

/*
    Primary, in the places Bootstrap writes the colour as a literal rather
    than reading the token. .btn-primary and .nav-pills' active pill are both
    hard-coded #0d6efd, and .dropdown-item.active with them.
*/
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #497519;
    --bs-btn-border-color: #497519;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #3f6115;
    --bs-btn-hover-border-color: #395813;
    --bs-btn-focus-shadow-rgb: 100, 138, 60;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #395813;
    --bs-btn-active-border-color: #345011;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #497519;
    --bs-btn-disabled-border-color: #497519;
}

.btn-outline-primary {
    --bs-btn-color: var(--mawhab-accent);
    --bs-btn-border-color: var(--mawhab-accent);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #497519;
    --bs-btn-hover-border-color: #497519;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #497519;
    --bs-btn-active-border-color: #497519;
    --bs-btn-disabled-color: var(--mawhab-accent);
    --bs-btn-disabled-border-color: var(--mawhab-accent);
}

[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-hover-color: #1f1e1e;
    --bs-btn-active-color: #1f1e1e;
    --bs-btn-hover-bg: #addd72;
    --bs-btn-hover-border-color: #addd72;
    --bs-btn-active-bg: #addd72;
    --bs-btn-active-border-color: #addd72;
}

.nav-pills {
    --bs-nav-pills-link-active-bg: #497519;
    --bs-nav-pills-link-active-color: #fff;
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: #497519;
    --bs-dropdown-link-active-color: #fff;
}

/*
    Buttons. Success takes the deep green from the same reference image - a
    button is an action and the pale surface tone does not read as one - and
    danger takes the matching tone in its own hue. Warning keeps Bootstrap's
    arrangement of dark text on the pale tone, which is what it already did.
*/
.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: #497519;
    --bs-btn-border-color: #497519;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #3f6115;
    --bs-btn-hover-border-color: #395813;
    --bs-btn-focus-shadow-rgb: 100, 138, 60;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #395813;
    --bs-btn-active-border-color: #345011;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #497519;
    --bs-btn-disabled-border-color: #497519;
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: #84281f;
    --bs-btn-border-color: #84281f;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #70221a;
    --bs-btn-hover-border-color: #672018;
    --bs-btn-focus-shadow-rgb: 150, 72, 63;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #672018;
    --bs-btn-active-border-color: #5d1d16;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #84281f;
    --bs-btn-disabled-border-color: #84281f;
}

.btn-warning {
    --bs-btn-color: #1f1e1e;
    --bs-btn-bg: #f8d556;
    --bs-btn-border-color: #f8d556;
    --bs-btn-hover-color: #1f1e1e;
    --bs-btn-hover-bg: #f7cc34;
    --bs-btn-hover-border-color: #f6c820;
    --bs-btn-focus-shadow-rgb: 211, 182, 77;
    --bs-btn-active-color: #1f1e1e;
    --bs-btn-active-bg: #f6c820;
    --bs-btn-active-border-color: #f6c820;
    --bs-btn-disabled-color: #1f1e1e;
    --bs-btn-disabled-bg: #f8d556;
    --bs-btn-disabled-border-color: #f8d556;
}

/*
    Outline buttons take their colour from the token, which is now a pale
    tone - unreadable as text on a light page. They get the deep tones the
    filled buttons use, and fill with them on hover.
*/
.btn-outline-success {
    --bs-btn-color: #497519;
    --bs-btn-border-color: #497519;
    --bs-btn-hover-bg: #497519;
    --bs-btn-hover-border-color: #497519;
    --bs-btn-active-bg: #497519;
    --bs-btn-active-border-color: #497519;
    --bs-btn-disabled-color: #497519;
    --bs-btn-disabled-border-color: #497519;
}

.btn-outline-danger {
    --bs-btn-color: #84281f;
    --bs-btn-border-color: #84281f;
    --bs-btn-hover-bg: #84281f;
    --bs-btn-hover-border-color: #84281f;
    --bs-btn-active-bg: #84281f;
    --bs-btn-active-border-color: #84281f;
    --bs-btn-disabled-color: #84281f;
    --bs-btn-disabled-border-color: #84281f;
}

[data-bs-theme="dark"] .btn-outline-success {
    --bs-btn-color: #addd72;
    --bs-btn-border-color: #addd72;
    --bs-btn-hover-color: #1f1e1e;
    --bs-btn-active-color: #1f1e1e;
    --bs-btn-hover-bg: #addd72;
    --bs-btn-hover-border-color: #addd72;
    --bs-btn-active-bg: #addd72;
    --bs-btn-active-border-color: #addd72;
    --bs-btn-disabled-color: #addd72;
    --bs-btn-disabled-border-color: #addd72;
}

[data-bs-theme="dark"] .btn-outline-danger {
    --bs-btn-color: #faaca4;
    --bs-btn-border-color: #faaca4;
    --bs-btn-hover-color: #1f1e1e;
    --bs-btn-active-color: #1f1e1e;
    --bs-btn-hover-bg: #faaca4;
    --bs-btn-hover-border-color: #faaca4;
    --bs-btn-active-bg: #faaca4;
    --bs-btn-active-border-color: #faaca4;
    --bs-btn-disabled-color: #faaca4;
    --bs-btn-disabled-border-color: #faaca4;
}

/* ==================================================================
   Full-contrast text
   ==================================================================

   Bright white on a dark page, black on a light one, everywhere. The
   user's instruction, and it stands until they say otherwise.

   Bootstrap does the opposite by default: --bs-secondary-color is the body
   colour at 75% opacity and --bs-tertiary-color at 50%, so headings,
   labels, form text and every .text-body-secondary come out grey. There is
   no utility or token that switches that off - the opacity is baked into
   the token's own value - so the tokens are restated at full strength and
   the semantic text utilities are collapsed onto the body colour.

   Two deliberate exceptions, both cases where following the rule would
   destroy the thing it is meant to serve:

    - Text on a coloured surface. A pill, a badge, a filled button and an
      alert all set their own colour against a background that is not the
      page's, and .text-bg-success above is the worked example.
    - Placeholders. At full contrast a placeholder is indistinguishable
      from a value that has been typed, which reads as a form that is
      already filled in.
*/

:root,
[data-bs-theme="light"] {
    --bs-body-color: #000;
    --bs-body-color-rgb: 0, 0, 0;
    --bs-emphasis-color: #000;
    --bs-emphasis-color-rgb: 0, 0, 0;
    --bs-heading-color: #000;
    --bs-secondary-color: #000;
    --bs-tertiary-color: #000;
}

[data-bs-theme="dark"] {
    --bs-body-color: #fff;
    --bs-body-color-rgb: 255, 255, 255;
    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-heading-color: #fff;
    --bs-secondary-color: #fff;
    --bs-tertiary-color: #fff;
}

/*
    The semantic text utilities. Each one is a fixed hue that no token above
    reaches, and each is a place the application currently renders muted or
    coloured text - the register's memo, a form's help text, the working
    balance. They all become the body colour.

    Scoped away from coloured surfaces, since a .text-body-secondary inside
    a badge or an alert is describing that surface rather than the page.
*/
.text-body-secondary,
.text-body-tertiary,
.text-body-emphasis,
.text-muted,
.text-secondary,
.text-primary,
.text-success,
.text-danger,
.text-warning,
.text-info {
    color: var(--bs-body-color) !important;
}

/*
    ...except on a coloured surface, where the surface decides. A badge, an
    alert or a filled button sets a colour against a background that is not
    the page's, and anything inside it has to keep to that rather than to
    the page's black or white.
*/
.badge :is(.text-body-secondary, .text-body-tertiary, .text-body-emphasis,
           .text-muted, .text-secondary, .text-primary, .text-success,
           .text-danger, .text-warning, .text-info),
.alert :is(.text-body-secondary, .text-body-tertiary, .text-body-emphasis,
           .text-muted, .text-secondary, .text-primary, .text-success,
           .text-danger, .text-warning, .text-info),
.btn :is(.text-body-secondary, .text-body-tertiary, .text-body-emphasis,
         .text-muted, .text-secondary, .text-primary, .text-success,
         .text-danger, .text-warning, .text-info) {
    color: inherit !important;
}

/*
    Dropdown menus, which do not inherit the rule above.

    Bootstrap re-declares its own colours on .dropdown-menu, and under
    [data-bs-theme=dark] it pins them to literals - #dee2e6 for an item and
    #adb5bd for a header - so they stay grey however the body tokens are set.
    Restated at full contrast, which is what makes the rail's plan menu
    readable rather than dim.
*/
.dropdown-menu {
    --bs-dropdown-color: var(--bs-body-color);
    --bs-dropdown-link-color: var(--bs-body-color);
    --bs-dropdown-link-hover-color: var(--bs-body-color);
    --bs-dropdown-header-color: var(--bs-body-color);

    /*
        A third exception to the full-contrast rule, for the reason the other
        two exist: an item that cannot be pressed has to look like it. The rail
        has two - Export plan and Start over, drawn disabled rather than left
        out so the shape of the menu is the shape it will keep - and at full
        contrast they were indistinguishable from the items that work.
    */
    --bs-dropdown-link-disabled-color: rgba(var(--bs-body-color-rgb), 0.45);
}

/*
    Placeholders keep a muted tone of their own, since the token they used
    to borrow is now full strength. Written as the body colour at 55% so it
    follows the theme rather than being pinned to a grey.
*/
.form-control::placeholder,
.form-select:invalid {
    color: rgba(var(--bs-body-color-rgb), 0.55) !important;
}