/* Login page layout. Loaded last in Views/Login/Index.cshtml so it wins on source order.
   Only page layout lives here — the fields, buttons and alert are DDS components and must
   keep their own sizing, focus and hover styling.

   Colours, shadows, radii, spacing and type come from the Infineon design tokens linked in the
   view (ifx-tokens/css-variables.css). Every var() carries a literal fallback so the page still
   renders sanely if that stylesheet cannot be reached. */

html,
body {
    height: 100%;
    margin: 0;
    overflow: hidden;
}

body {
    color: var(--ifx-color-base-black, #1D1D1D);
    font-family: var(--ifx-font-family-body, "Source Sans 3"), sans-serif;
    font-size: var(--ifx-font-size-m, 1rem);
    font-weight: var(--ifx-font-weight-regular, 400);
    line-height: var(--ifx-line-height-m, 1.5rem);
}

.login-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.login-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    overflow: auto;
    position: relative;
}

/* Floats over the grey panel instead of pushing it down. Anchored inside .login-content rather
   than to the viewport, so it clears the navbar without hard-coding a navbar height. */
.login-alert {
    left: 50%;
    position: absolute;
    top: var(--ifx-space-200, 16px);
    transform: translateX(-50%);
    transition: opacity 400ms ease-out;
    width: min(560px, calc(100% - 32px));
    z-index: 1050;
}

.login-alert.is-dismissing {
    opacity: 0;
}

.login-page {
    align-items: center;
    background-color: var(--ifx-color-engineering-100, #F7F7F7);
    box-sizing: border-box;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
    padding: var(--ifx-space-300, 24px) var(--ifx-space-200, 16px);
}

.login-box {
    background-color: var(--ifx-color-base-white, #FFFFFF);
    border-radius: var(--ifx-border-radius-50, 4px);
    box-shadow: var(--ifx-shadow-200, 0 2px 4px 0 #1D1D1D1F, 0 0 1px 0 #1D1D1D1F);
    box-sizing: border-box;
    padding: var(--ifx-space-300, 24px);
    width: min(400px, 100%);
}

.login-title {
    font-size: var(--ifx-font-size-xl, 1.25rem);
    font-weight: var(--ifx-font-weight-semibold, 600);
    line-height: var(--ifx-line-height-xl, 1.75rem);
    margin: 0 0 var(--ifx-space-200, 16px);
}

/* A real <hr>, not a border faked onto the caption below it. The overrides below are required, not
   cosmetic: Bootstrap styles `hr` with `opacity: .25`, which renders the rule washed out instead of
   the Infineon grey. `border: 0` plus an explicit height and background-color paints the line
   ourselves, which is version-proof -- Bootstrap 5.1.3 drew it with `background-color: currentColor`
   and 5.3 draws it with `border-top`, and this rule overrides either. A class beats that element
   selector, so no !important is needed. */
.login-rule {
    background-color: var(--ifx-color-engineering-200, #EEEDED);
    border: 0;
    height: 1px;
    margin: var(--ifx-space-200, 16px) 0;
    opacity: 1;
}

.login-or {
    color: var(--ifx-color-engineering-500, #575352);
    font-size: var(--ifx-font-size-s, 0.875rem);
    line-height: var(--ifx-line-height-s, 1.25rem);
    margin: 0 0 var(--ifx-space-200, 16px);
    text-align: center;
}

.login-field {
    margin-bottom: var(--ifx-space-150, 12px);
}

/* The password field is the last div in the form, so this keeps a wider break between the inputs
   and the submit button below them. */
.login-field:last-of-type {
    margin-bottom: var(--ifx-space-300, 24px);
}

.login-validation {
    color: var(--ifx-color-red-500, #CD002F);
    display: block;
    font-size: var(--ifx-font-size-s, 0.875rem);
}