/*
 * Material 3 Design für die IdentityServer-Auth-Seiten.
 * Tokens übernommen aus Kundenportal Vnext (Angular-Projects/projects/libs/ui/src/lib/styles/tokens).
 */

:root {
    /* Referenz-Paletten (Auszug aus colors.scss) */
    --md-ref-primary-primary18: #222e3b;
    --md-ref-primary-primary30: #3c4856;
    --md-ref-primary-primary40: #535f6e;
    --md-ref-primary-primary90: #d7e4f5;
    --md-ref-secondary-secondary30: #5e4200;
    --md-ref-secondary-secondary40: #7d5800;
    --md-ref-secondary-secondary70: #dba12a;
    --md-ref-secondary-secondary90: #ffdea8;
    --md-ref-petrol-petrol30: #1a4b54;
    --md-ref-petrol-petrol40: #2c6571;
    --md-ref-petrol-petrol95: #e6f6f9;
    --md-ref-error-error30: #93000a;
    --md-ref-error-error40: #ba1a1a;
    --md-ref-error-error90: #ffdad6;
    --md-ref-neutral-neutral10: #1f1a1e;
    --md-ref-neutral-neutral94: #f4f4f4;
    --md-ref-neutral-neutral98: #fff7fa;
    --md-ref-neutral-neutral100: #ffffff;
    --md-ref-neutralVariant-neutralVariant30: #4d444b;
    --md-ref-neutralVariant-neutralVariant50: #7f747c;
    --md-ref-neutralVariant-neutralVariant80: #d0c3cc;

    /* System-Farben (Light Theme) */
    --md-sys-color-primary: var(--md-ref-primary-primary18);
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: var(--md-ref-primary-primary90);
    --md-sys-color-on-primary-container: var(--md-ref-primary-primary30);
    --md-sys-color-secondary: var(--md-ref-secondary-secondary40);
    --md-sys-color-secondary-container: var(--md-ref-secondary-secondary90);
    --md-sys-color-on-secondary-container: var(--md-ref-secondary-secondary30);
    --md-sys-color-background: var(--md-ref-neutral-neutral98);
    --md-sys-color-surface: var(--md-ref-neutral-neutral100);
    --md-sys-color-surface-container: var(--md-ref-neutral-neutral94);
    --md-sys-color-on-surface: var(--md-ref-neutral-neutral10);
    --md-sys-color-on-surface-variant: var(--md-ref-neutralVariant-neutralVariant30);
    --md-sys-color-outline: var(--md-ref-neutralVariant-neutralVariant50);
    --md-sys-color-outline-variant: var(--md-ref-neutralVariant-neutralVariant80);
    --md-sys-color-error: var(--md-ref-error-error40);
    --md-sys-color-error-container: var(--md-ref-error-error90);
    --md-sys-color-on-error-container: var(--md-ref-error-error30);
    --ps-sys-color-petrol: var(--md-ref-petrol-petrol30);
    --ps-sys-color-petrol-container: var(--md-ref-petrol-petrol95);
    --color-gold: var(--md-ref-secondary-secondary70);

    /* Typografie */
    --md-ref-typeface-brand: 'Quattrocento Sans', 'Helvetica Neue', sans-serif;

    /* Form */
    --md-sys-shape-corner-full: 62.4375rem;
    --md-sys-shape-corner-large: 1rem;
    --md-sys-shape-corner-card: 2rem;
    --md-sys-shape-corner-field: 0.375rem;
}

/* ---------- Basis ---------- */

* {
    box-sizing: border-box;
}

html {
    height: 100%;
}

/* Seitenhintergrund: Primary-Fläche mit weißen Karten, wie die Kupo-Dashboards im Vnext */
body {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    display: flex;
    flex-direction: column;
    font-family: var(--md-ref-typeface-brand);
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
    min-height: 100%;
}

a {
    color: var(--md-sys-color-primary);
}

a:focus,
button:focus {
    outline: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Bootstrap-Grid-Reste neutralisieren */
.row,
.col-sm-12,
.container.body-content,
.container-fluid {
    display: block;
    margin: 0;
    padding: 0;
    width: 100%;
}

.align-center {
    text-align: center;
}

/* ---------- Header ---------- */

.m3-header {
    align-items: center;
    display: flex;
    justify-content: center;
    padding: 1.75rem 1.5rem 1.25rem;
}

.m3-header .m3-header-logo {
    height: 4.5rem;
    width: auto;
}

/* ---------- Hauptbereich ---------- */

.m3-main {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    padding: 2.5rem 1rem 4rem;
}

.login-page,
.logout-page,
.logged-out,
.recover-password {
    margin: 0 auto;
    width: 100%;
}

/* ---------- Karte (M3 Card, wie Vnext: surface, 2rem Radius) ---------- */

body .maske {
    background-color: var(--md-sys-color-surface);
    border-radius: var(--md-sys-shape-corner-card);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
    color: var(--md-sys-color-on-surface);
    margin: 0 auto;
    max-width: 27rem;
    padding: 2rem 2rem 1.75rem;
    width: 100%;
}

body .maske .panel-heading {
    background: none;
    border: 0;
    margin-bottom: 0.5rem;
    padding: 0;
}

body .maske .panel-heading h3,
body .maske .panel-heading .panel-title {
    /* M3 headline-small */
    color: var(--md-sys-color-on-surface);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 2rem;
    margin: 0 0 0.25rem;
}

body .maske .panel-body {
    padding: 0;
}

body .maske .panel-heading p,
body .maske .panel-body p {
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.875rem;
    line-height: 1.25rem;
    margin: 0 0 1.25rem;
}

fieldset {
    border: 0;
    margin: 0;
    min-inline-size: auto;
    padding: 0;
}

.form-group {
    margin-bottom: 1rem;
}

/* ---------- Textfelder (M3 Outlined Text Field) ---------- */

/* Floating-Label-Variante: <div class="m3-field"><input placeholder=" "><label>…</label></div> */
.m3-field {
    margin-bottom: 1.25rem;
    position: relative;
}

.m3-field > input.form-control,
body .maske input.form-control {
    background-color: var(--md-sys-color-surface);
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-corner-field);
    color: var(--md-sys-color-on-surface);
    display: block;
    font-family: inherit;
    font-size: 1rem;
    height: auto;
    line-height: 1.5rem;
    padding: 0.875rem 1rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
}

.m3-field > input.form-control::placeholder,
body .maske input.form-control::placeholder {
    color: var(--md-sys-color-on-surface-variant);
    opacity: 0.8;
}

.m3-field > input.form-control:hover,
body .maske input.form-control:hover {
    border-color: var(--md-sys-color-on-surface);
}

.m3-field > input.form-control:focus,
body .maske input.form-control:focus {
    border-color: var(--md-sys-color-primary);
    box-shadow: inset 0 0 0 1px var(--md-sys-color-primary);
    outline: none;
}

.m3-field > .m3-label {
    background-color: var(--md-sys-color-surface);
    border-radius: 0.25rem;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 1rem;
    left: 0.75rem;
    line-height: 1;
    padding: 0 0.25rem;
    pointer-events: none;
    position: absolute;
    top: 1.0625rem;
    transition: top 0.15s ease, font-size 0.15s ease, color 0.15s ease;
}

.m3-field > input.form-control:focus + .m3-label,
.m3-field > input.form-control:not(:placeholder-shown) + .m3-label,
.m3-field > input.form-control.is-filled + .m3-label,
.m3-field > input.form-control:-webkit-autofill + .m3-label {
    font-size: 0.75rem;
    top: -0.375rem;
}

/* Kennwortfeld mit Auge: <div class="m3-field m3-field--password"><input><label>…</label><button data-password-toggle>…</button></div> */
.m3-field--password > input.form-control {
    padding-right: 3.25rem;
}
.m3-field--password > input.form-control::-ms-reveal {
    display: none;
}
.m3-password-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--md-sys-color-on-surface-variant);
    cursor: pointer;
    display: inline-flex;
    height: 2.5rem;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
    width: 2.5rem;
}
.m3-password-toggle:hover {
    background-color: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
}
.m3-password-toggle > svg {
    fill: currentColor;
    height: 1.5rem;
    width: 1.5rem;
}
.m3-password-toggle > svg[hidden] {
    display: none;
}

.m3-field > input.form-control:focus + .m3-label {
    color: var(--md-sys-color-primary);
}

/* ---------- Buttons ---------- */

/* Filled Button (M3): Pill, Primary */
body .maske .kp-button button,
body .maske .btn-primary {
    align-items: center;
    background-color: var(--md-sys-color-primary);
    border: 0;
    border-radius: var(--md-sys-shape-corner-full);
    color: var(--md-sys-color-on-primary);
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    gap: 0.5rem;
    justify-content: center;
    letter-spacing: 0.00625rem;
    line-height: 1.25rem;
    min-height: 2.75rem;
    padding: 0.625rem 1.5rem;
    text-decoration: none;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
}

body .maske .kp-button button:hover,
body .maske .btn-primary:hover {
    background-color: var(--md-ref-primary-primary30);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    color: var(--md-sys-color-on-primary);
}

body .maske .kp-button button:active,
body .maske .kp-button button:focus,
body .maske .btn-primary:active,
body .maske .btn-primary:focus {
    background-color: var(--md-ref-primary-primary40);
    color: var(--md-sys-color-on-primary);
}

body .maske .kp-button button span,
body .maske .btn-primary span {
    padding: 0;
    text-transform: none;
}

body .maske .kp-button button .glyphicon,
body .maske .btn-primary .glyphicon {
    font-size: 0.875rem;
}

body .maske .lower-links {
    margin: 1.5rem 0 0.5rem;
    text-align: center;
}

/* Text Button (M3): Links und sekundäre Aktionen */
body .maske .upper-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 0;
}

body .maske .upper-links a,
body .maske .back-link,
body .maske .kp-button .upper-links button {
    background: none;
    border: 0;
    border-radius: var(--md-sys-shape-corner-full);
    box-shadow: none;
    color: var(--md-sys-color-primary);
    cursor: pointer;
    display: inline-block;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    margin: 0;
    min-height: 0;
    padding: 0.5rem 0.75rem;
    text-decoration: none;
    transition: background-color 0.15s ease;
    width: auto;
}

body .maske .upper-links a:hover,
body .maske .upper-links a:focus,
body .maske .back-link:hover,
body .maske .kp-button .upper-links button:hover,
body .maske .kp-button .upper-links button:focus {
    background-color: rgba(34, 46, 59, 0.08);
    text-decoration: none;
}

/* Dezenter Berater-Login (bewusst zurückhaltend) */
body .maske .berater-aad-link {
    border-top: 1px solid var(--md-sys-color-outline-variant);
    margin-top: 1.5rem;
    padding-top: 0.875rem;
    text-align: center;
}

body .maske .berater-aad-link a {
    border-radius: var(--md-sys-shape-corner-full);
    color: var(--md-sys-color-on-surface-variant);
    display: inline-block;
    font-size: 0.75rem;
    opacity: 0.8;
    padding: 0.375rem 0.75rem;
    text-decoration: none;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

body .maske .berater-aad-link a:hover,
body .maske .berater-aad-link a:focus {
    background-color: rgba(34, 46, 59, 0.08);
    opacity: 1;
}

/* ---------- Wartungshinweis / Warnungen ---------- */

.alert {
    border: 0;
    border-radius: var(--md-sys-shape-corner-large);
    font-size: 0.875rem;
    line-height: 1.25rem;
    margin-bottom: 1.25rem;
    padding: 1rem 1.25rem;
}

.alert-warning {
    background-color: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.alert a {
    color: inherit;
    font-weight: 500;
}

/* Fehlerliste (ModelState) als M3 Error Container */
.validation-summary-errors {
    background-color: var(--md-sys-color-error-container);
    border-radius: var(--md-sys-shape-corner-large);
    color: var(--md-sys-color-on-error-container);
    font-size: 0.875rem;
    margin: 0 0 1.25rem;
    padding: 1rem 1.25rem;
}

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

.validation-summary-errors li + li {
    margin-top: 0.375rem;
}

/* ---------- Kennwort-Anforderungen ---------- */

.pass-req {
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

#check-container {
    background-color: var(--md-sys-color-surface-container);
    border-radius: var(--md-sys-shape-corner-large);
    margin-bottom: 1.25rem;
    padding: 0.875rem 1rem;
}

#check-container > div {
    align-items: center;
    display: flex;
    gap: 0.625rem;
    padding: 0.1875rem 0;
}

#check-container > div p {
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.8125rem;
    line-height: 1.25rem;
    margin: 0;
}

#check-container > div span {
    background-color: transparent;
    border: 1.5px solid var(--md-sys-color-outline);
    border-radius: 50%;
    color: transparent;
    flex: 0 0 auto;
    font-size: 0.625rem;
    height: 1rem;
    line-height: 0.875rem;
    text-align: center;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    width: 1rem;
}

/* init.js schaltet die Klassen upper/lower/number/special/count auf dem Container */
#check-container.upper #upper,
#check-container.lower #lower,
#check-container.number #number,
#check-container.special #special,
#check-container.count #count {
    background-color: var(--ps-sys-color-petrol);
    border-color: var(--ps-sys-color-petrol);
    color: #ffffff;
}

#check-container.upper #upper::before,
#check-container.lower #lower::before,
#check-container.number #number::before,
#check-container.special #special::before,
#check-container.count #count::before {
    content: "\2713";
}

/* ---------- Checkboxen (AGB / Datenschutz / Werbung) ---------- */

.accept-agb,
.accept-datenschutz,
.accept-werbung,
.accept-loeschung {
    margin-bottom: 1.25rem;
}

.checkbox-text {
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.8125rem;
    line-height: 1.25rem;
    margin-bottom: 0.5rem;
}

.checkbox-row {
    align-items: center;
    display: flex;
    gap: 0.625rem;
}

.checkbox-row input[type="checkbox"] {
    accent-color: var(--md-sys-color-primary);
    cursor: pointer;
    flex: 0 0 auto;
    height: 1.125rem;
    margin: 0;
    width: 1.125rem;
}

.checkbox-row label {
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 400;
    margin: 0;
}

.checkbox-row label a {
    color: var(--md-sys-color-primary);
    font-weight: 500;
    text-decoration: underline;
}

/* Modal-Styling: siehe micromodal.css (auf M3 modernisiert, lädt nur auf Seiten mit Modals) */

/* ---------- LoggedOut / Redirect ---------- */

.logged-out iframe {
    display: none;
    height: 0;
    width: 0;
}

.logged-out .redirect {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.875rem;
    margin: 1.25rem auto 0;
    max-width: 27rem;
    text-align: center;
}

.logged-out .redirect a {
    color: #ffffff;
    font-weight: 500;
    text-decoration: underline;
}

/* ---------- Fehlerseite ---------- */

.error-page {
    margin: 0 auto;
    max-width: 27rem;
    width: 100%;
}

.error-page .page-header h1 {
    color: var(--md-sys-color-on-primary);
    font-size: 1.75rem;
    font-weight: 400;
    line-height: 2.25rem;
    margin: 0 0 1rem;
    text-align: center;
}

.error-page .col-sm-6 {
    margin: 0;
    padding: 0;
    width: 100%;
}

.alert-danger {
    background-color: var(--md-sys-color-error-container);
    color: var(--md-sys-color-on-error-container);
}

.error-page .request-id {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    margin-top: 0.75rem;
    text-align: center;
}

/* ---------- Footer ---------- */

#page-footer {
    background: none;
    color: rgba(255, 255, 255, 0.72);
    flex-shrink: 0;
    font-size: 0.8125rem;
    margin-top: auto;
    padding: 1.5rem 1rem 2rem;
}

#page-footer .row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
    text-align: center;
}

#page-footer p {
    margin: 0;
}

#page-footer .footer-menu a {
    border-radius: var(--md-sys-shape-corner-full);
    color: rgba(255, 255, 255, 0.72);
    padding: 0.375rem 0.625rem;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

#page-footer .footer-menu a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

#page-footer .footer-copyright p,
#page-footer .footer-text p {
    padding: 0 0.625rem;
}

#page-footer .footer-text strong {
    color: var(--color-gold);
    font-weight: 700;
    letter-spacing: 0.03125rem;
}

/* Alte Grid-Spaltenklassen im Footer neutralisieren */
#page-footer [class*="col-"] {
    flex: 0 0 auto;
    padding: 0;
    width: auto;
}

/* ---------- Responsive ---------- */

@media (max-width: 480px) {
    .m3-main {
        padding: 1.25rem 0.75rem 2.5rem;
    }

    body .maske {
        border-radius: var(--md-sys-shape-corner-large);
        padding: 1.5rem 1.25rem 1.25rem;
    }

    .m3-header .m3-header-logo {
        height: 3.5rem;
    }
}