/*
 * Identity pages (Razor Pages with Bootstrap): the card from Areas/Identity/Pages/Shared/_CardLayout.cshtml,
 * its message boxes and links, and form validation. Owner: package B1 (B7 uses the same card).
 * Registered after layout.css.
 */

/* ------------------------------------------------------------------ */
/* Identity pages: light card instead of the old dark panel */
/* ------------------------------------------------------------------ */
.eng-auth-card {
    width: 100%;
    max-width: var(--eng-auth-card-width);
    margin: var(--dxds-spacing-160) auto;
    padding: var(--dxds-spacing-320);
    background: var(--eng-color-surface);
    color: var(--eng-color-text);
    border: var(--dxds-border-width-10) solid var(--dxds-color-border-neutral-default-rest);
    border-radius: var(--eng-radius-card);
    box-shadow: var(--dxds-box-shadow-sm);
}

.eng-auth-card h1 {
    font-size: var(--dxds-font-size-headline-md);
    line-height: var(--dxds-line-height-headline-md);
    margin-bottom: var(--dxds-spacing-160);
}

.eng-auth-card .form-floating + .form-floating,
.eng-auth-card .form-floating + .form-check {
    margin-top: var(--dxds-spacing-120);
}

.eng-auth-links {
    margin: var(--dxds-spacing-240) 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--dxds-spacing-80);
}

/* Validation: danger text on white (Fluent danger-90 on white = 6.1:1) and never colour alone. */
.field-validation-error,
.text-danger {
    color: var(--dxds-color-content-danger-default-rest);
}

.field-validation-error {
    display: block;
    margin-top: var(--dxds-spacing-80);
}

.eng-form-errors.validation-summary-valid {
    display: none;
}

.eng-form-errors.validation-summary-errors {
    display: flex;
    gap: var(--dxds-spacing-120);
    margin-bottom: var(--dxds-spacing-160);
    padding: var(--dxds-spacing-120) var(--dxds-spacing-160);
    color: var(--dxds-color-content-danger-default-rest);
    background: var(--eng-color-surface);
    border: var(--dxds-border-width-10) solid var(--dxds-color-border-danger-default-rest);
    border-inline-start-width: var(--dxds-border-width-40);
    border-radius: var(--dxds-border-radius-40);
}

.eng-form-errors.validation-summary-errors::before {
    content: "\f33a"; /* bi-exclamation-triangle-fill; fallback for browsers without alt text in content */
    content: "\f33a" / ""; /* empty alt text: the glyph is decoration, the error text carries the meaning */
    font-family: "bootstrap-icons";
    line-height: inherit;
}

.eng-form-errors ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.input-validation-error.form-control {
    border-color: var(--dxds-color-border-danger-default-rest);
}

/* ------------------------------------------------------------------ */
/* The card of Shared/_CardLayout.cshtml: lead, message and links (red thread 4, 5 and 7). */
/* The H1, its orange rule and the card itself are .eng-auth-card above and the title rule in app.css. */
/* ------------------------------------------------------------------ */
.eng-card-lead {
    margin-bottom: var(--dxds-spacing-240);
}

/* One message at the top of the card. The icon is a Bootstrap icon (aria-hidden); the colour is never alone. */
.eng-card-message {
    --eng-card-message-color: var(--dxds-color-content-danger-default-rest);
    --eng-card-message-border: var(--dxds-color-border-danger-default-rest);
    display: flex;
    gap: var(--dxds-spacing-120);
    margin-bottom: var(--dxds-spacing-160);
    padding: var(--dxds-spacing-120) var(--dxds-spacing-160);
    color: var(--eng-card-message-color);
    background: var(--eng-color-surface);
    border: var(--dxds-border-width-10) solid var(--eng-card-message-border);
    border-inline-start-width: var(--dxds-border-width-40);
    border-radius: var(--dxds-border-radius-40);
}

.eng-card-message-status {
    --eng-card-message-color: var(--dxds-color-content-success-default-rest);
    --eng-card-message-border: var(--dxds-color-border-success-default-rest);
}

/* The error takes focus when the page loads (autofocus + tabindex="-1"); the ring is the page's own. */
.eng-card-message:focus-visible {
    outline: var(--eng-focus-ring-width) solid var(--eng-focus-ring-color);
    outline-offset: var(--eng-focus-ring-offset);
}

/* The H1 is only a landing point (tabindex="-1" + autofocus after a receipt), not something to operate: no ring. */
.eng-auth-card h1:focus {
    outline: none;
}

/* At most two links under the button. Each link is at least 44 px high (WCAG 2.5.8, red thread 10). */
.eng-card-links {
    margin: var(--dxds-spacing-120) 0 0;
    padding: 0;
    list-style: none;
}

.eng-card-links a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
}

/* ------------------------------------------------------------------ */
/* Fields of the B1 pages (Logga in, Skapa konto, Skicka bekräftelsemejlet igen): each field is an .eng-field */
/* with the floating input, its help text and its error, linked to the input with aria-describedby (B1-6). */
/* ------------------------------------------------------------------ */
.eng-field + .eng-field {
    margin-top: var(--dxds-spacing-160);
}

/* Help shown before the first attempt, such as the password rules (decision 35): text, never only a tooltip. */
.eng-field .form-text {
    margin: var(--dxds-spacing-80) 0 0;
    color: var(--dxds-color-content-neutral-subdued-rest);
}

/* "Glömt lösenordet?" right under the password (UX 5.2), with a 44 px target like the card's links. */
.eng-field-link {
    margin: 0;
}

.eng-field-link a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
}

.eng-field + .form-check {
    margin-top: var(--dxds-spacing-80);
}

/* A link inside a message ("Skicka bekräftelsemejlet igen" in the sign-in error) keeps the link colour and */
/* an underline, so it is not told apart by colour alone. */
.eng-card-message a {
    color: var(--dxds-color-content-primary-default-rest);
    text-decoration: underline;
}

/* An address or other token that should not break in the middle. */
.eng-nowrap {
    white-space: nowrap;
}