/*
 * Mina uppgifter (Pages/AccountManagement.razor). Owner: package B6. Registered on the theme after documents.css.
 * The change-password and change-email pages are Identity cards (_CardLayout) and use identity.css.
 * Rules: only var(--dxds-*) / var(--eng-*), classes of our own markup, DevExpress components only through CssClass
 * and their public API (docs/design/theming/css-rules.md).
 */

/* The page is one narrow column like the Identity cards: the two sections stack on every screen width. */
.eng-account {
    max-width: var(--eng-card-max-width);
}

/* The H2 inside the header of a section (DxFormLayoutGroup HeaderContentTemplate). The orange rule is for the H1 only (red thread 2). */
.eng-account-heading {
    margin: 0;
    font-size: var(--dxds-font-size-title-lg);
    line-height: var(--dxds-line-height-title-lg);
}

/* "E-postadress" and the address as a term and its value: text, not a field that looks editable. */
.eng-account-facts {
    margin: 0 0 var(--dxds-spacing-80);
}

.eng-account-facts dt {
    color: var(--dxds-color-content-neutral-subdued-rest);
}

.eng-account-facts dd {
    margin: 0;
    font-weight: var(--dxds-font-weight-700);
    overflow-wrap: anywhere;
}

/* The help line under the address: visible text, not a tooltip (decision 41). */
.eng-account-help {
    max-width: var(--eng-measure);
    margin: 0 0 var(--dxds-spacing-160);
    color: var(--dxds-color-content-neutral-subdued-rest);
}

.eng-account-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dxds-spacing-120);
}

/* The message of a field that broke a rule: text under the field (the red frame and the icon of the editor are extra,
   never the only sign). The class is on Blazor's ValidationMessage; Blazor itself ships no style for it. */
.eng-account-error {
    margin-top: var(--dxds-spacing-80);
    color: var(--dxds-color-content-danger-default-rest);
}

/* Buttons and fields are at least 44 px high (red thread 10). DevExpress' Large size is 40 px for a button and 36 px
   for an editor; the classes go on through CssClass. */
.eng-account-button,
.eng-account-field {
    min-height: 2.75rem;
}