/*
 * The Core's look on Keycloak's sign-in pages (FF-60 KC-8, Bootstrap cut of 24.09.2026).
 *
 * Bootstrap 5.3 does the work (bootstrap.min.css next to this file, the application's copy); this
 * sheet carries only what the application's `assets/styles/app.css` adds on top of it and these
 * pages need, plus the places where a `base` page body writes markup no `kc*` key reaches. Each of
 * the latter says which page it is for.
 *
 * The two hex values are the brand's, the same two `app.css` declares once for `.mdc-brand-mark`.
 * They are repeated, not imported: a Keycloak theme is served by another process from another
 * directory, and there is no build step that could share them.
 */

/* app.css: the density knob — ≈15 px root, as a percentage so a larger browser font still scales. */
html {
    font-size: 93.75%;
}

/* app.css: the shell fills the viewport, the content column takes the rest. */
.mdc-layout {
    min-height: 100dvh;
}

.mdc-content {
    flex: 1 1 auto;
    min-width: 0;
}

/* app.css: the sign-in column — narrow, centred, no card around it (as MDC-Fleet's sign-in pages). */
.mdc-login-card {
    max-width: 24rem;
    margin: 0 auto;
}

/* app.css: the brand mark — dark-blue M, light-blue check. */
.mdc-brand-mark {
    display: inline-block;
    vertical-align: -0.15em;
}

.mdc-brand-mark__m {
    fill: #16305c;
}

.mdc-brand-mark__check {
    fill: #3d97e3;
}

/* The locale menu: Keycloak's script toggles `display` and `aria-expanded`, nothing else. */
#kc-locale .dropdown-menu {
    min-width: 8rem;
}

/* ---- Page bodies of `base` -------------------------------------------------------------------- */

/* login.ftl, login-reset-password.ftl: the options row ("Passwort vergessen?", "Zurück zur
   Anmeldung", remember-me) — quiet and small; the submit button that shares the row on the reset
   page takes a line of its own at full size. */
.mdc-login-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    font-size: .875rem;
}

.mdc-login-options > #kc-form-buttons {
    flex: 0 0 100%;
    font-size: 1rem;
}

/* The primary action, full width like the Core's sign-in button. `base` renders it as an <input>. */
#kc-form-buttons .btn,
#kc-login {
    width: 100%;
}

/* Plain `.checkbox` wrappers (remember me; "Von anderen Geräten abmelden" on update password). */
.checkbox label {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
}

.checkbox input[type="checkbox"] {
    margin: 0;
}

/* The attempted username with its "restart" link (password, OTP and update-password steps). */
#kc-username {
    display: flex;
    align-items: center;
    gap: .5rem;
}

#kc-attempted-username {
    font-weight: 500;
    margin: 0;
}

#reset-login .kc-tooltip-text {
    display: none;
}

/* login-config-totp.ftl: the numbered steps and the QR code. */
#kc-totp-settings {
    padding-left: 1.25rem;
}

#kc-totp-settings li {
    margin-bottom: .75rem;
}

#kc-totp-supported-apps {
    margin: .25rem 0 0;
}

#kc-totp-secret-qr-code {
    display: block;
    max-width: 12rem;
    margin: .5rem 0 1rem;
}

#kc-totp-secret-key {
    font-family: var(--bs-font-monospace);
    word-break: break-all;
}

/* login-otp.ftl with more than one device: a hidden radio before each list-group row. */
.mdc-otp-device {
    cursor: pointer;
    border-radius: var(--bs-border-radius);
    margin-bottom: .5rem;
}

.mdc-otp-device-input:checked + .mdc-otp-device {
    border-color: var(--bs-primary);
    background-color: var(--bs-primary-bg-subtle);
}

.mdc-otp-device-input:focus-visible + .mdc-otp-device {
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}

/* Every page: `base` marks a failed field only with aria-invalid, never `.is-invalid`. */
.form-control[aria-invalid="true"] {
    border-color: var(--bs-form-invalid-border-color);
}

.form-control[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .25);
}

/* login-config-totp.ftl hard-codes `control-label` instead of the kcLabelClass. */
.control-label {
    display: inline-block;
    margin-bottom: .5rem;
}

.required {
    color: var(--bs-danger);
    margin-left: .125rem;
}

/* The page title that some bodies (info, error) fill with a whole sentence. */
#kc-page-title {
    overflow-wrap: anywhere;
}