/* Styles for the Identity account pages (login, register, password reset), loaded after bootstrap
   so these rules win on shared selectors. Colours come from css/palette.css — add hex values
   there, not here, except the validation red/green below: the palette has no error/success colour. */

.account-page {
    background-color: var(--loopa-background);
    color: var(--loopa-text);
    font-family: 'Work Sans', 'Roboto', 'Helvetica', 'Arial', 'sans-serif';
}

.account-navbar {
    background-color: var(--loopa-primary-dark);
}

.account-card {
    background-color: var(--loopa-surface);
}

.rounded-5 {
    border-radius: 20px
}

.account-page h1,
.account-page h2,
.account-page h3,
.account-page h4,
.account-page h5,
.account-page h6 {
    color: var(--loopa-primary-dark);
}

/* Used on both headings and the intro paragraphs beneath them, so it deliberately sets no
   colour: headings pick up the purple above, paragraphs inherit body text from .account-page. */
.modalheading {
    text-align: center;
    font-family: 'Work Sans', 'Roboto', 'Helvetica', 'Arial', 'sans-serif';
}

/* ---- Controls ------------------------------------------------------------------
   Bootstrap's default blue would otherwise show through on the submit buttons, links
   and focus rings, so each is re-pointed at the brand purple. */

/* Bootstrap 5.1 compiles button colours as literal declarations — it has no --bs-btn-* variables
   to retarget (those arrived in 5.3) — so every state has to be overridden explicitly. */
.account-page .btn-primary {
    background-color: var(--loopa-primary);
    border-color: var(--loopa-primary);
    color: var(--loopa-on-primary);
}

    .account-page .btn-primary:hover,
    .account-page .btn-primary:focus,
    .account-page .btn-primary:active,
    .account-page .btn-primary.active {
        background-color: var(--loopa-primary-dark);
        border-color: var(--loopa-primary-dark);
        color: var(--loopa-on-primary-dark);
    }

    .account-page .btn-primary:focus {
        box-shadow: 0 0 0 .25rem rgba(188, 125, 255, .5); /* --loopa-primary-light */
    }

    .account-page .btn-primary:disabled,
    .account-page .btn-primary.disabled {
        background-color: var(--loopa-primary);
        border-color: var(--loopa-primary);
        color: var(--loopa-on-primary);
    }

.account-page a {
    color: var(--loopa-primary);
}

    .account-page a:hover,
    .account-page a:focus {
        color: var(--loopa-primary-dark);
    }

/* The navbar brand is a bare logo link; the generic anchor colour above would tint its focus ring. */
.account-navbar .navbar-brand {
    color: inherit;
}

/* Bootstrap's outline-light resting state (transparent + faint border) all but disappears
   against the dark purple navbar. Give it a visible fill at rest; the hover/focus fill Bootstrap
   already provides (solid white, dark text) is kept as-is by restating it explicitly here. */
.account-navbar .btn-outline-light {
    background-color: rgba(255, 255, 255, .15);
    border-color: rgba(255, 255, 255, .6);
    color: var(--loopa-on-primary-dark);
}

    .account-navbar .btn-outline-light:hover,
    .account-navbar .btn-outline-light:focus {
        background-color: #fff;
        border-color: #fff;
        color: #212529;
    }

.account-page .form-control:focus {
    border-color: var(--loopa-primary-light);
    box-shadow: 0 0 0 .25rem rgba(188, 125, 255, .25); /* --loopa-primary-light */
}

.account-page .form-check-input:checked {
    background-color: var(--loopa-primary);
    border-color: var(--loopa-primary);
}

.account-page .form-check-input:focus {
    border-color: var(--loopa-primary-light);
    box-shadow: 0 0 0 .25rem rgba(188, 125, 255, .25);
}

.account-page .form-floating > label {
    color: var(--loopa-text-muted);
}

/* Bootstrap's nav-pills default to its blue "active" fill; the Manage area side nav needs the
   brand purple instead so it reads as part of the same design as the rest of the account pages. */
.account-page .nav-pills .nav-link.active,
.account-page .nav-pills .show > .nav-link {
    background-color: var(--loopa-primary);
    color: var(--loopa-on-primary);
}

.account-page .nav-pills .nav-link {
    color: var(--loopa-text);
    border-radius: 20px;
    transition: background-color .15s ease-in-out, color .15s ease-in-out;
}

    .account-page .nav-pills .nav-link:hover,
    .account-page .nav-pills .nav-link:focus {
        background-color: rgba(131, 91, 175, .12); /* --loopa-primary tint */
        color: var(--loopa-primary-dark);
    }

    /* Needs equal-or-higher specificity than the plain :hover above, so an active pill darkens
       on hover instead of losing its purple fill to the inactive tint. */
    .account-page .nav-pills .nav-link.active:hover,
    .account-page .nav-pills .nav-link.active:focus {
        background-color: var(--loopa-primary-dark);
        color: var(--loopa-on-primary-dark);
    }

/* Shared by "Back to portal" and "Forget this browser" — themed to fill brand purple on hover
   instead of Bootstrap's default grey, matching the .btn-primary hover treatment above. */
.account-page .btn-outline-secondary {
    color: var(--loopa-text);
    border-color: var(--loopa-text-muted);
    transition: background-color .15s ease-in-out, color .15s ease-in-out, border-color .15s ease-in-out;
}

    .account-page .btn-outline-secondary:hover,
    .account-page .btn-outline-secondary:focus,
    .account-page .btn-outline-secondary:active {
        background-color: var(--loopa-primary);
        border-color: var(--loopa-primary);
        color: var(--loopa-on-primary);
    }

    .account-page .btn-outline-secondary:focus {
        box-shadow: 0 0 0 .25rem rgba(188, 125, 255, .25); /* --loopa-primary-light */
    }

/* jQuery unobtrusive validation swaps this class in and out as the form is edited, so the
   summary must collapse to nothing when valid — it still renders an empty <ul>. */
.validation-summary-valid {
    display: none;
}

.validation-summary-errors {
    position: relative;
    margin-bottom: 1rem;
    padding: 14px 18px 14px 48px;
    border: 1px solid #F1C0C4;
    border-left: 4px solid #D32F2F;
    border-radius: 12px;
    background-color: #FDECEE;
    color: #8A1F28;
    font-family: 'Work Sans', 'Roboto', 'Helvetica', 'Arial', 'sans-serif';
    font-size: 14px;
    line-height: 20px;
    text-align: left;
}

    .validation-summary-errors::before {
        content: "!";
        position: absolute;
        top: 14px;
        left: 18px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #D32F2F;
        color: #FFFFFF;
        font-size: 13px;
        font-weight: 700;
        line-height: 20px;
        text-align: center;
    }

    .validation-summary-errors ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .validation-summary-errors li + li {
        margin-top: 6px;
    }

.field-validation-error {
    display: block;
    margin: 6px 0 0 18px;
    font-size: 13px;
    line-height: 18px;
}

/* Server-side: the tag helper stamps this on inputs whose ModelState entry has an error. */
.form-control.input-validation-error {
    border-color: #D32F2F;
    background-color: #FFF8F8;
}

    .form-control.input-validation-error:focus {
        border-color: #D32F2F;
        box-shadow: 0 0 0 .25rem rgba(211, 47, 47, .2);
    }

.form-floating > .form-control.input-validation-error ~ label {
    color: #D32F2F;
}

/* :user-invalid only fires after a field is edited and blurred, unlike :invalid which paints an
   untouched empty field red on load. Kept in its own rule block, not merged with the one above:
   a browser that doesn't recognise :user-invalid would discard the whole selector list. */
.form-control:user-invalid {
    border-color: #D32F2F;
    background-color: #FFF8F8;
}

    .form-control:user-invalid:focus {
        border-color: #D32F2F;
        box-shadow: 0 0 0 .25rem rgba(211, 47, 47, .2);
    }

.form-floating > .form-control:user-invalid ~ label {
    color: #D32F2F;
}

.password-rules {
    margin: 8px 0 0 18px;
    padding: 0;
    list-style: none;
    font-family: 'Work Sans', 'Roboto', 'Helvetica', 'Arial', 'sans-serif';
    font-size: 13px;
    line-height: 22px;
    color: var(--loopa-text-muted);
}

    .password-rules li {
        position: relative;
        padding-left: 22px;
    }

        .password-rules li::before {
            content: "\2022"; /* bullet while unmet — a cross would read as an error before they've typed */
            position: absolute;
            left: 4px;
            font-weight: 700;
            color: var(--loopa-text-muted);
        }

        .password-rules li.met {
            color: #1E7A45;
        }

            .password-rules li.met::before {
                content: "\2713"; /* tick */
                left: 2px;
                color: #1E7A45;
            }