/* =========================================================================
   The account area.

   Everything under /Account renders without a circuit - the pages carry
   [ExcludeFromInteractiveRouting], because a sign-in form is a form post and
   has no business holding a websocket open. That rules MudBlazor out: its
   inputs do not emit the name attributes static server-side form binding
   needs. So these screens get plain elements and this stylesheet, built from
   the same palette the rest of the portal uses.

   It replaces Bootstrap, which was loaded on every page in the application
   for the sake of these thirty routes.

   Two vocabularies live here on purpose:

     .acct-*     ours, used by the pages written by hand - the sign-in path,
                 which is what a customer actually sees.

     .form-control, .btn, .row, .col-*, .nav-pills, .alert, .text-danger
                 the scaffolded Identity markup's own class names, kept and
                 redefined so the twenty /Account/Manage pages did not have
                 to be rewritten to get Bootstrap out. Anything rewritten
                 from here on should use the first set.

   Tokens are duplicated from PortalTheme rather than read from it: this
   sheet loads before MudBlazor has told the document anything, and a
   sign-in screen that renders unstyled for a beat is a sign-in screen that
   looks broken.
   ========================================================================= */

:root {
    --acct-navy: #14223A;
    --acct-navy-lift: #1E3050;
    --acct-green: #234923;
    --acct-green-mid: #2C622C;
    --acct-teal: #467886;
    --acct-brick: #A6432F;
    --acct-gold: #F1B53D;
    --acct-bone: #ECEDEA;
    --acct-ink: #1D1D1B;

    --acct-ground: #ECEDEA;
    --acct-surface: #FFFFFF;
    --acct-rule: #D3D5CE;
    --acct-dim: #55606F;
    --acct-fade: #7A838F;
}

/* ------------------------------------------------------------- the shell
   A band of navy at the top and the form centred under it. No drawer: a
   signed-out person has no navigation, and the empty navy gutter that used
   to sit there pushed the only thing on the page off-centre. */

.acct {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--acct-ground);
    color: var(--acct-ink);
    font-family: Arial, Helvetica, sans-serif;
}

.acct__bar {
    background: var(--acct-navy);
    border-bottom: 3px solid var(--acct-green-mid);
    padding: 0.875rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.acct__mark {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.acct__mark img {
    height: 26px;
    width: auto;
    display: block;
}

.acct__product {
    color: #C9D2DE;
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
}

@media (max-width: 30rem) {
    .acct__product { display: none; }
}

.acct__main {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 2.5rem 1.25rem 3rem;
}

.acct__col {
    width: 100%;
    max-width: 26rem;
}

/* A wider column for the pages that carry a list rather than a form -
   recovery codes, the authenticator setup. */
.acct__col--wide { max-width: 40rem; }

.acct__card {
    background: var(--acct-surface);
    border: 1px solid var(--acct-rule);
    border-radius: 4px;
    padding: 1.75rem 1.5rem 1.5rem;
}

.acct__title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0 0 0.4rem;
}

/* One line under the title saying what this screen is for. The scaffolded
   pages had two headings saying the same thing - "Log in" above "Use a
   local account to log in." - which is a heading and its own echo. */
.acct__lede {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--acct-dim);
    margin: 0 0 1.5rem;
}

.acct__foot {
    margin-top: 1.25rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--acct-rule);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.acct__help {
    margin: 1.25rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--acct-fade);
    text-align: center;
}

.acct__help a { color: var(--acct-dim); }

/* --------------------------------------------------------------- fields
   Labels above their input rather than floating inside it. A floating
   label is a label that disappears at the moment somebody is typing into
   the field it names, which on a password box is exactly when a person
   wants to check what they are filling in. */

.acct-field { margin-bottom: 1.1rem; }

.acct-field > label,
.form-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--acct-dim);
    margin-bottom: 0.3rem;
}

.acct-field input,
.form-control {
    width: 100%;
    font: inherit;
    font-size: 0.9375rem;
    color: var(--acct-ink);
    background: var(--acct-surface);
    border: 1px solid #B9BDB4;
    border-radius: 3px;
    padding: 0.6rem 0.7rem;
    transition: border-color 100ms ease-in-out, box-shadow 100ms ease-in-out;
}

.acct-field input::placeholder,
.form-control::placeholder { color: #9AA0A8; }

.acct-field input:hover,
.form-control:hover { border-color: #8D9288; }

.acct-field input:focus,
.form-control:focus,
.form-check-input:focus {
    outline: none;
    border-color: var(--acct-green-mid);
    box-shadow: 0 0 0 3px rgba(44, 98, 44, 0.18);
}

.acct-field input[aria-invalid="true"],
.form-control.invalid { border-color: var(--acct-brick); }

/* The tick, and the words beside it, as one target. */
.acct-check,
.checkbox label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--acct-ink);
    cursor: pointer;
    margin-bottom: 1.1rem;
    font-weight: 400;
    letter-spacing: 0;
}

.acct-check input,
.form-check-input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--acct-green-mid);
    margin: 0;
    flex: 0 0 auto;
}

/* -------------------------------------------------------------- buttons */

.acct-btn,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.2;
    padding: 0.65rem 1.1rem;
    border-radius: 3px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 100ms ease-in-out, border-color 100ms ease-in-out;
}

.acct-btn--primary,
.btn-primary,
.btn-lg.btn-primary {
    width: 100%;
    background: var(--acct-green);
    border-color: var(--acct-green);
    color: #FFFFFF;
}

.acct-btn--primary:hover,
.btn-primary:hover,
.btn-primary:focus {
    background: var(--acct-green-mid);
    border-color: var(--acct-green-mid);
    color: #FFFFFF;
}

.acct-btn--quiet,
.btn-secondary,
.btn-outline-primary {
    background: transparent;
    border-color: #B9BDB4;
    color: var(--acct-ink);
}

.acct-btn--quiet:hover,
.btn-secondary:hover,
.btn-outline-primary:hover { border-color: var(--acct-ink); background: rgba(0,0,0,0.03); }

/* Red, and never the widest thing on the screen. A destructive action that
   is also the biggest button is one people press by reflex. */
.acct-btn--danger,
.btn-danger {
    background: var(--acct-brick);
    border-color: var(--acct-brick);
    color: #FFFFFF;
}

.acct-btn--danger:hover,
.btn-danger:hover { background: #8E3927; border-color: #8E3927; }

.acct-btn--link,
.btn-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--acct-green);
    font-weight: 400;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.acct-btn--link:hover,
.btn-link:hover { color: var(--acct-green-mid); }

.acct-btn:focus-visible,
.btn:focus-visible,
a:focus-visible {
    outline: 2px solid var(--acct-teal);
    outline-offset: 2px;
}

.w-100 { width: 100%; }

/* --------------------------------------------------------------- notices
   Message first, colour second. Somebody who cannot get in is reading, not
   glancing, so the text is full size and the colour is an edge rather than
   a wash. */

.acct-notice,
.alert {
    display: block;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--acct-rule);
    border-left-width: 3px;
    border-radius: 3px;
    font-size: 0.9375rem;
    line-height: 1.5;
    margin-bottom: 1.25rem;
    background: #F4F5F1;
}

.acct-notice--bad,
.alert-danger {
    border-left-color: var(--acct-brick);
    background: #FBF1EE;
}

.acct-notice--good,
.alert-success {
    border-left-color: var(--acct-green-mid);
    background: #F0F5F0;
}

.acct-notice--note,
.alert-info,
.alert-warning {
    border-left-color: var(--acct-gold);
    background: #FDF7E9;
}

.text-danger,
.validation-message {
    display: block;
    color: var(--acct-brick);
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0;
    margin-top: 0.3rem;
}

.validation-errors { margin: 0 0 1rem; padding-left: 1.1rem; }

/* ------------------------------------------------------------ the divider
   "OR" with a rule either side, rather than a horizontal rule above a
   centred word, which is two lines doing one job. */

.acct-or {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem 0;
    color: var(--acct-fade);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
}

.acct-or::before,
.acct-or::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--acct-rule);
}

hr {
    border: none;
    border-top: 1px solid var(--acct-rule);
    margin: 1.25rem 0;
}

/* =========================================================================
   The scaffolded vocabulary, kept so /Account/Manage did not have to be
   rewritten. A minimal grid and list, not a framework.
   ========================================================================= */

.row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 0;
}

[class*="col-"] { flex: 1 1 18rem; min-width: 0; }

.col-lg-3 { flex: 0 1 14rem; }
.col-lg-9 { flex: 1 1 24rem; }
.col-md-3 { flex: 0 1 14rem; }

.mb-3 { margin-bottom: 1.1rem; }
.mt-2 { margin-top: 0.5rem; }
.mx-auto { margin-inline: auto; }
.d-flex { display: flex; }
.flex-column { flex-direction: column; }
.text-secondary { color: var(--acct-dim); }

/* The settings menu down the side of /Account/Manage. Pills in name only:
   a flat list with the current page marked by a rule, which is what the
   portal's own navigation does. */
.nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.nav-link {
    display: block;
    padding: 0.5rem 0.75rem;
    font-size: 0.9375rem;
    color: var(--acct-dim);
    text-decoration: none;
    border-left: 3px solid transparent;
    border-radius: 0 3px 3px 0;
}

.nav-link:hover { background: rgba(0,0,0,0.035); color: var(--acct-ink); }

.nav-link.active {
    border-left-color: var(--acct-green-mid);
    background: rgba(44, 98, 44, 0.07);
    color: var(--acct-ink);
    font-weight: 700;
}

.list-group { list-style: none; margin: 0; padding: 0; border: 1px solid var(--acct-rule); border-radius: 3px; }
.list-group-item { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--acct-rule); }
.list-group-item:last-child { border-bottom: none; }

/* The account pages set their own type scale; the portal's h1 is the page
   title and these are inside a card. */
.acct h1 { font-size: 1.5rem; font-weight: 700; margin: 0 0 0.75rem; letter-spacing: -0.01em; }
.acct h2 { font-size: 1.125rem; font-weight: 700; margin: 0 0 0.6rem; }
.acct h3 { font-size: 1rem; font-weight: 700; margin: 0 0 0.5rem; }
.acct h4 { font-size: 0.9375rem; font-weight: 700; margin: 0 0 0.4rem; }
.acct p { margin: 0 0 0.9rem; line-height: 1.55; }
.acct a { color: var(--acct-green); text-underline-offset: 0.15em; }
.acct a:hover { color: var(--acct-green-mid); }
.acct code { font-family: Consolas, "Cascadia Mono", monospace; font-size: 0.9em; background: #E8E9E4; padding: 0.1em 0.3em; border-radius: 2px; }

/* Reachable with a keyboard, visibly. */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* ------------------------------------------------------ email preferences
   Switches with their explanation beside them rather than a column of bare
   labels. "Milestones" means nothing on its own; "when a consignment departs,
   arrives, or is delivered" is the thing somebody is deciding about. */
.acct-lede {
    color: var(--acct-muted);
    margin: 0 0 1.25rem;
}

.acct-switches {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1.25rem;
}

.acct-switch {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--acct-line);
    border-radius: 6px;
    cursor: pointer;
}

.acct-switch:hover {
    border-color: var(--acct-accent);
}

/* The box itself, sized up: this is read on a phone as often as a desk, and
   the default checkbox is a small target for a thumb. */
.acct-switch input[type="checkbox"] {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.15rem;
    flex: 0 0 auto;
    accent-color: var(--acct-accent);
}

.acct-switch strong {
    display: block;
    font-weight: 600;
}

.acct-switch small {
    display: block;
    color: var(--acct-muted);
    line-height: 1.45;
}

.acct-note {
    color: var(--acct-muted);
    font-size: 0.85rem;
    margin: 0 0 1.25rem;
}