/* =========================================================================
   LernFlink Login Look & Feel
   Reines CSS-Override ueber dem Keycloak-Standard-Theme (PatternFly v4/v3).
   Markenwerte abgeleitet aus tailwind.config.ts des LernFlink-Projekts:
     - Primaerfarbe        #3A4195  (primary-100)
     - Primaer dunkel      #303682  (primary-110, Hover/Active)
     - Primaer hell        #ebecf4 / #e1e2ef  (Flaechen, Hintergrund)
     - Schrift             "Approach"
   ========================================================================= */

/* --- Approach Schrift -------------------------------------------------- */
@font-face {
    font-family: "Approach";
    font-weight: 400;
    font-display: swap;
    src:
        url("fonts/Ap1000-Rg.woff2") format("woff2"),
        url("fonts/Ap1000-Rg.woff") format("woff");
}
@font-face {
    font-family: "Approach";
    font-weight: 600;
    font-display: swap;
    src:
        url("fonts/Ap1000-SmBd.woff2") format("woff2"),
        url("fonts/Ap1000-SmBd.woff") format("woff");
}
@font-face {
    font-family: "Approach";
    font-weight: 700;
    font-display: swap;
    src:
        url("fonts/Ap1000-Bd.woff2") format("woff2"),
        url("fonts/Ap1000-Bd.woff") format("woff");
}

/* --- Markenfarben: PatternFly-Globals zentral umbiegen -----------------
   Durch das Ueberschreiben der --pf-global-*-Variablen erben Buttons,
   Karten-Rahmen, Ueberschriften, Links etc. automatisch die LernFlink-Farbe,
   ohne dass jede Komponente einzeln gestylt werden muss. */
:root {
    --pf-global--primary-color--100: #3a4195;
    --pf-global--primary-color--200: #303682;
    --pf-global--active-color--100: #3a4195;
    --pf-global--active-color--200: #303682;
    --pf-global--link--Color: #3a4195;
    --pf-global--link--Color--hover: #303682;
    --pf-global--BorderColor--100: #c4c6e0;
    --pf-global--FontFamily--sans-serif: "Approach", "RedHatText", "Helvetica Neue", Arial, sans-serif;
    --pf-global--FontFamily--heading--sans-serif: "Approach", "RedHatDisplay", "Helvetica Neue", Arial, sans-serif;
}

/* --- Grundlayout ------------------------------------------------------- */
.login-pf body {
    background: #ebecf4;
    font-family: var(--pf-global--FontFamily--sans-serif);
}

body,
input,
button,
select,
textarea,
.pf-c-form-control,
.pf-c-button {
    font-family: var(--pf-global--FontFamily--sans-serif);
}

/* --- Header (Realm-Anzeigename / Logo aus HTML Display name) ----------- */
#kc-header-wrapper {
    color: #3a4195;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    font-size: 28px;
    padding: 48px 10px 24px;
}

/* Logo-Standardbreite 300px. Kein !important -> ein inline style="width:..."
   am <img> im HTML Display name des Realms ueberschreibt diesen Default. */
#kc-header-wrapper img {
    width: 300px;
    height: auto;
}

/* --- Karte ------------------------------------------------------------- */
.card-pf {
    border-top: none;
    border-radius: 1rem;
}

/* Innenabstand der Karte; passt zu den negativen Margins des #kc-info-Footers
   (-40px seitlich, -30px unten), sodass dieser buendig die Kartenraender trifft. */
.login-pf-page .card-pf {
    padding: 40px 40px 30px 40px;
}

/* Der Info-Footer (#kc-info, z. B. "Noch kein Konto?") wird per negativem
   Margin an die Kartenraender gezogen und ueberragt sonst den 1rem-Radius
   mit eckigen Unterkanten -> ebenfalls abrunden. */
#kc-info-wrapper {
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

h1#kc-page-title {
    color: #212b3a;
    font-weight: 700;
}

/* --- Primaerbutton ----------------------------------------------------- */
.pf-c-button.pf-m-primary,
.login-pf-page .btn-primary {
    box-sizing: border-box;
    height: 40px;
    background-color: #3a4195;
    border-color: #3a4195;
    background-image: none;
    border-radius: 10px;
}
.pf-c-button.pf-m-primary:hover,
.pf-c-button.pf-m-primary:focus,
.login-pf-page .btn-primary:hover {
    background-color: #303682;
    border-color: #303682;
}

/* --- Links ------------------------------------------------------------- */
a,
.login-pf a {
    color: #3a4195;
}
.login-pf a:hover {
    color: #303682;
}

/* --- Eingabefelder (nach LernFlink .text-field) ------------------------
   Passiv:  gefuellt grau (#F2F2F2), transparenter Rand, 10px Radius.
   Hover:   etwas dunkleres Grau (#E8E8E8).
   Fokus:   weisser Hintergrund mit Primaer-Rand (#3A4195).
   PatternFly nutzt standardmaessig nur eine Unterlinie -> komplett ersetzen. */
.pf-c-form-control,
input.pf-c-form-control,
textarea.pf-c-form-control {
    box-sizing: border-box;
    height: 40px;
    background-color: #f2f2f2;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 7px 16px;
    font-size: 16px;
    line-height: 1.5;
    color: #212b3a;
    box-shadow: none;
    transition: all 0.15s ease;
}

/* Textarea darf trotz fixer Input-Hoehe mehrzeilig wachsen */
textarea.pf-c-form-control {
    height: auto;
}

.pf-c-form-control::placeholder {
    color: #636363;
}

.pf-c-form-control:hover:not(:focus):not(:focus-within) {
    background-color: #e8e8e8;
}

.pf-c-form-control:focus,
.pf-c-form-control:focus-within {
    background-color: #ffffff;
    border-color: #3a4195;
    /* PatternFly zieht den Unterrand bei Fokus auf 2px -> auf 1px halten */
    border-width: 1px;
    --pf-c-form-control--focus--BorderBottomWidth: 1px;
    box-shadow: none;
    outline: none;
}

.pf-c-form-control:disabled {
    background-color: #ffffff;
    border-color: #909090;
    color: #909090;
    cursor: not-allowed;
}

/* --- Passwortfeld mit Augen-Icon --------------------------------------
   Das Eingabefeld spannt die volle Breite auf; der Sichtbarkeits-Button
   schwebt randlos/transparent rechts ueber dem Feld. */
.pf-c-input-group {
    position: relative;
    display: block;
}

.pf-c-input-group .pf-c-form-control {
    width: 100%;
    /* Platz rechts, damit der Text nicht unter dem Augen-Icon liegt */
    padding-right: 44px;
    /* auch rechts abgerundet (PatternFly kappt Ecken in Input-Groups) */
    border-radius: 10px;
}

.pf-c-input-group .pf-c-button.pf-m-control {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    padding: 0 12px;
    border: none;
    background: transparent;
    box-shadow: none;
    color: #636363;
    z-index: 2;
    /* Icon vertikal/horizontal mittig im Button */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* blaue Unterlinie/Akzent von PatternFly am Control-Button entfernen */
.pf-c-input-group .pf-c-button.pf-m-control::before,
.pf-c-input-group .pf-c-button.pf-m-control::after {
    display: none;
    border: none;
    content: none;
}

.pf-c-input-group .pf-c-button.pf-m-control:hover {
    background: transparent;
    color: #3a4195;
}

/* Eigene SVG-Icons statt Font-Awesome (fa fa-eye / fa-eye-slash).
   Per mask gerendert -> Farbe folgt currentColor des Buttons
   (#636363, Hover #3a4195). Klassennamen kommen aus theme.properties:
   kcFormPasswordVisibilityIconShow=lf-eye / ...Hide=lf-eye-off */
.lf-eye,
.lf-eye-off {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    -webkit-mask: url(../img/eye-line.svg) center / contain no-repeat;
            mask: url(../img/eye-line.svg) center / contain no-repeat;
}

.lf-eye-off {
    -webkit-mask-image: url(../img/eye-close-line.svg);
            mask-image: url(../img/eye-close-line.svg);
}

/* --- Niedrige Bildschirme (z. B. 1280x720) -----------------------------
   Bei wenig Bauhoehe Logo + Abstaende verkleinern, damit das Login-Fenster
   nicht zu weit unten landet bzw. ganz in den Viewport passt. */
@media (max-height: 800px) {
    .login-pf .container {
        padding-top: 16px;
    }
    #kc-header-wrapper {
        padding: 20px 10px 14px;
        font-size: 22px;
    }
    #kc-header-wrapper img {
        width: 200px;
    }
    .login-pf-page .card-pf {
        padding: 28px 40px 22px 40px;
    }
}

@media (max-height: 640px) {
    .login-pf .container {
        padding-top: 8px;
    }
    #kc-header-wrapper {
        padding: 12px 10px 10px;
    }
    #kc-header-wrapper img {
        width: 160px;
    }
    .login-pf-page .card-pf {
        padding: 20px 40px 18px 40px;
    }
}