/*
 * SSA Event Arena – CI-Overrides fuer das Keycloak-Login.
 * Farben/Radius/Font sind an die Angular-App (styles.scss, DaisyUI "Standard-light") angelehnt.
 */

:root {
    --ea-primary: #4397d6;
    --ea-primary-hover: #2f81c0;
    --ea-secondary: #051559;
    --ea-base-100: #ffffff;
    --ea-base-200: #ececec;
    --ea-base-300: #ced3d9;
    --ea-base-content: #1e2734;
    --ea-error: #ff6e6e;

    --ea-radius-box: 1rem;
    --ea-radius-field: 2rem;
    --ea-border: 2px;
    /* Seitliches und unteres Card-Padding. Als Variablen, weil der
       Footer-Streifen sie als negative Margins spiegeln muss und die
       Media Query fuer schmale Viewports sie ueberschreibt. */
    --ea-card-pad-x: 32px;
    --ea-card-pad-b: 24px;
}

@font-face {
    font-family: "Roboto Condensed";
    src: url("../fonts/RobotoCondensed-latin-var.woff2") format("woff2");
    font-weight: 100 900;
    /* optional statt swap: "swap" zeichnet sofort mit der Fallback-Schrift und
       tauscht danach - weil Roboto Condensed deutlich schmaler ist als jeder
       Fallback (Helvetica/Arial), springt der Text dabei sichtbar von breit auf
       schmal. "optional" hat eine 100ms-Blockphase und *keine* Swap-Phase: ist
       die Schrift rechtzeitig da, wird sie benutzt, sonst bleibt es fuer diesen
       Seitenaufruf beim Fallback. In beiden Faellen kein Umbruch mitten im
       Rendern. Vom Server ist die Datei in wenigen Millisekunden da. */
    font-display: optional;
}

/* ---------- Grundlayout / Hintergrund ---------- */
/* Identischer Gradient wie die App (.bg-gradient in styles.scss). */
.login-pf body {
    background: rgb(0, 22, 93) linear-gradient(24deg, rgba(13, 17, 23, 1) 0%, rgba(0, 22, 93, 1) 35%, rgba(0, 153, 220, 1) 100%) no-repeat center center fixed;
    background-size: cover;
    font-family: "Roboto Condensed", "Roboto", sans-serif;
    color: var(--ea-base-content);
}

/* Logo-Box horizontal zentrieren. Der Wrapper ist inline-block, deshalb
   ueber text-align des Elternelements. */
#kc-header,
.login-pf-page .login-pf-page-header {
    text-align: center;
}

/* Logo statt Standard-Keycloak-Text im Header.
   realm.displayNameHtml ist leer -> Header-Wrapper traegt das Logo.
   Weisse Box im Stil der Navbar (ssa-navbar.component.ts): "rounded-box"
   (1rem) und p-5 (1.25rem Padding).
   Bewusst nur die DSS-Bildmarke ohne die Wortmarke "EVENT ARENA": der
   Keycloak wird mit der Content Arena geteilt, die Login-Seite darf also
   kein anwendungsspezifisches Branding tragen. */
#kc-header-wrapper {
    display: inline-block;
    box-sizing: border-box;
    /* Weisse Box im Stil der Navbar (ssa-navbar.component.ts): rounded-box
       (1rem) und p-5 (1.25rem Padding).
       Box auf das Seitenverhaeltnis des Logos (372:49 = 7.59:1) abgestimmt,
       damit das Padding ringsum gleich breit wirkt: Inhalt 18.5rem x 2.5rem,
       das Logo fuellt es breitenbegrenzt fast genau aus. */
    width: 21rem;
    max-width: 100%;
    height: 5rem;
    margin: 8px 0 28px;
    padding: 1.25rem; /* p-5 */
    background-color: #ffffff;
    background-image: url("../img/logo-dsss-schulsportarena.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-origin: content-box; /* Logo respektiert das Padding wie das <img> in der App */
    border-radius: var(--ea-radius-box); /* rounded-box */
    font-size: 0; /* den darunterliegenden Realm-Namen ausblenden */
    color: transparent;
}

/* ---------- Login-Card ---------- */
.login-pf-page .card-pf {
    border: var(--ea-border) solid var(--ea-base-300);
    border-radius: var(--ea-radius-box);
    box-shadow: 0 10px 30px rgba(5, 21, 89, 0.12);
    background: var(--ea-base-100);
    /* Unten ebenfalls Padding. Der Register-Footer hebt es per negativem
       Margin wieder auf und bildet dann den unteren Abschluss - fehlt er,
       weil die Registrierung im Realm aus ist, bleibt das Padding stehen.
       overflow:hidden klippt den Footer auf die abgerundeten Card-Ecken. */
    padding: 24px var(--ea-card-pad-x) var(--ea-card-pad-b);
    overflow: hidden;
}

#kc-header-wrapper {
    color: var(--ea-secondary);
}

#kc-page-title,
.login-pf-page .login-pf-header h1 {
    color: var(--ea-base-content);
    text-align: center;
}

/* Der Hinweis "* Benoetigte Felder" wird nicht gebraucht - die Pflichtfelder
   sind ohnehin am Sternchen im Label erkennbar. Steht im Basis-Template unter
   .subtitle und nur dort. */
.login-pf-page .subtitle {
    display: none;
}

/* Bei Seiten mit displayRequiredFields (z.B. Registrierung) wickelt das
   Basis-Template den Titel in eine col-md-10, wodurch er nicht mittig sitzt.
   Diese Klasse kommt in den Login-Templates ausschliesslich an dieser Stelle
   vor, deshalb ist der Zugriff eindeutig. */
.login-pf-page .col-md-10 {
    width: 100%;
    float: none;
}


/* ---------- Formularfelder ---------- */
.login-pf-page .form-control,
.login-pf-page input[type="text"],
.login-pf-page input[type="email"],
.login-pf-page input[type="password"],
.login-pf-page .pf-c-form-control {
    /* Die App nutzt "input input-primary" (ssa-input.component.ts), der Rahmen
       ist dort also schon im Ruhezustand in der Primaerfarbe - nicht grau. */
    border: var(--ea-border) solid var(--ea-primary);
    border-radius: var(--ea-radius-field);
    height: auto;
    padding: 10px 16px;
}

.login-pf-page .form-control:focus,
.login-pf-page .pf-c-form-control:focus {
    border-color: var(--ea-primary);
    box-shadow: 0 0 0 2px rgba(67, 151, 214, 0.25);
    outline: none;
}

/* ---------- Passwort-Feld mit "Anzeigen"-Button ----------
   Markup: <div.pf-c-input-group> <input> <button.pf-m-control> </div>
   Feld + Button als EIN zusammenhaengendes Control statt zwei loser Kaesten. */
.login-pf-page .pf-c-input-group {
    display: flex;
    align-items: stretch;
    border: var(--ea-border) solid var(--ea-primary);
    border-radius: var(--ea-radius-field);
    background: #ffffff;
    overflow: hidden;
}

.login-pf-page .pf-c-input-group:focus-within {
    border-color: var(--ea-primary);
    box-shadow: 0 0 0 2px rgba(67, 151, 214, 0.25);
}

/* Das innere Input bringt KEINEN eigenen Rahmen/Radius mehr mit. */
.login-pf-page .pf-c-input-group .pf-c-form-control {
    flex: 1 1 auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.login-pf-page .pf-c-input-group .pf-c-form-control:focus {
    box-shadow: none;
}

/* Auge-Button: schlichtes Icon im Feld, kein abgesetzter grauer Kasten und
   keine Trennlinie - das ist der PatternFly-Look, den wir hier nicht wollen.
   Ruhezustand gedimmt, bei Hover/Fokus volle Deckkraft. */
.login-pf-page .pf-c-input-group .pf-c-button.pf-m-control {
    border: 0;
    /* Kein eigener Radius und kein Abstand nach rechts: der Button laeuft bis
       an die Feldkante, und .pf-c-input-group klippt seine Hover-Flaeche per
       overflow:hidden auf die Rundung des Feldes. Sonst bleibt rechts ein
       ungefuellter Rest stehen. */
    border-radius: 0;
    background: transparent;
    color: var(--ea-base-content);
    opacity: 0.55;
    padding: 0 18px;
    transition: opacity 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.login-pf-page .pf-c-input-group .pf-c-button.pf-m-control:hover,
.login-pf-page .pf-c-input-group .pf-c-button.pf-m-control:focus {
    opacity: 1;
    background: var(--ea-base-200);
}

/* PatternFly zeichnet unter pf-m-control eine Linie via ::after -> entfernen. */
.login-pf-page .pf-c-input-group .pf-c-button.pf-m-control::after {
    display: none;
    border: 0;
}

/* Die App nutzt "checkbox checkbox-primary" (ssa-checkbox.component.ts).
   accent-color faerbt das native Control ohne appearance-Override. */
.login-pf-page input[type="checkbox"] {
    accent-color: var(--ea-primary);
    width: 1.05rem;
    height: 1.05rem;
}

/* Checkbox-Zeile ("Angemeldet bleiben").
   Bootstrap setzt die Checkbox auf position:absolute mit margin-top:4px und
   gibt dem Label padding-left:20px. Dadurch sitzt der Text 8px unter der
   Mitte der Checkbox und die Luecke betraegt nur 3px.
   Die App macht es per Flexbox (ssa-checkbox.component.ts: "flex items-center"
   plus "ms-2"), also hier genauso: zentriert und mit 0.5rem Abstand. */
.login-pf-page .checkbox label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 0;
    line-height: 1.4;
}

.login-pf-page .checkbox input[type="checkbox"] {
    position: static;
    margin: 0;
    flex: 0 0 auto;
}

label,
.pf-c-form__label,
.pf-c-form__label-text {
    color: var(--ea-base-content);
    font-weight: 600;
}

/* ---------- Buttons ---------- */
.login-pf-page .btn-primary,
.login-pf-page .pf-c-button.pf-m-primary {
    background-color: var(--ea-primary);
    border-color: var(--ea-primary);
    border-radius: var(--ea-radius-field);
    color: #ffffff;
    font-weight: 600;
    padding: 10px 16px;
    transition: background-color 0.15s ease-in-out;
}

.login-pf-page .btn-primary:hover,
.login-pf-page .btn-primary:focus,
.login-pf-page .pf-c-button.pf-m-primary:hover,
.login-pf-page .pf-c-button.pf-m-primary:focus {
    background-color: var(--ea-primary-hover);
    border-color: var(--ea-primary-hover);
}

/* ---------- Register-Footer ("Neuer Benutzer? Registrieren") ----------
   Liegt im Markup innerhalb der .card-pf, wird aber von PatternFly per
   Negativraendern herausgezogen. Hier als sauberer, buendiger Card-Footer:
   volle Cardbreite (-32px = Card-Padding), oben abgesetzt durch eine Linie. */
#kc-info.login-pf-signup {
    /* zieht sich ueber das Card-Padding hinaus bis an die Kanten */
    margin: 24px calc(-1 * var(--ea-card-pad-x)) calc(-1 * var(--ea-card-pad-b));
    padding: 18px var(--ea-card-pad-x);
    background: var(--ea-base-200);
    border-top: 1px solid var(--ea-base-300);
    text-align: center;
    font-size: 15px;
    color: var(--ea-base-content);
}

#kc-info-wrapper,
#kc-registration-container,
#kc-registration {
    margin: 0;
    padding: 0;
    background: transparent; /* eigener heller Kasten weg -> nur Footer-Grau */
}

/* ---------- Links ---------- */
.login-pf-page a,
#kc-registration a,
#kc-info-wrapper a {
    color: var(--ea-primary);
    font-weight: 600;
}

.login-pf-page a:hover {
    color: var(--ea-secondary);
    text-decoration: underline;
}

/* ---------- Fehlermeldungen ---------- */
.login-pf-page .pf-c-form__helper-text.pf-m-error,
.login-pf-page .has-error .control-label {
    color: var(--ea-error);
}

/* ---------- Hinweis bei deaktiviertem Passwort-Reset ---------- */
/* Bewusst dezent: kein Alarm-Rot, nur abgesetzte Fussnote unter dem Login-Button.
   Wird nur gerendert, solange resetPasswordAllowed=false ist (siehe login.ftl). */
#ssa-password-reset-hint {
    margin-top: 1.25rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--ea-base-300);
    font-size: 0.8125rem;
    line-height: 1.45;
    text-align: center;
    color: var(--ea-base-content);
    opacity: 0.75;
}

#ssa-password-reset-hint a {
    /* Adresse solide sichtbar, auch wenn der Hinweistext gedimmt ist */
    color: var(--ea-primary);
    font-weight: 600;
    white-space: nowrap;
}

/* ---------- Schmale Viewports ---------- */
/* PatternFly setzt die Card unterhalb von 768px randlos (keine col-sm-Offsets
   mehr). Dadurch laufen drei verschiedene linke Kanten auseinander: die
   Logo-Box bei 15px (Padding von .login-pf-page-header), die Card bei 0 und
   der Card-Inhalt bei 32px Card-Padding. Hier werden alle auf denselben
   Randabstand gezogen und das Card-Padding an das der Logo-Box angeglichen,
   damit Logo und Formularfelder auf einer Achse sitzen. */
@media (max-width: 767px) {
    :root {
        /* Schmaler als die 32px/24px der Desktop-Ansicht. Seitlich derselbe
           Wert wie das Padding der Logo-Box, damit die Innenmasse der beiden
           weissen Flaechen zusammenpassen. */
        --ea-card-pad-x: 1.25rem;
        --ea-card-pad-b: 20px;
    }

    /* gleicher Randabstand wie .login-pf-page-header, damit die abgerundeten
       Ecken der Card wieder sichtbar sind und die Kanten fluchten */
    .login-pf-page .card-pf {
        margin-left: 15px;
        margin-right: 15px;
        padding-top: 20px;
    }

    /* Der Footer-Streifen zieht sich per negativem Margin an die Card-Kanten.
       Der Wert muss dem seitlichen Card-Padding entsprechen, sonst bleibt
       links und rechts ein weisser Rest stehen. */
    /* Auf kleinen Schirmen ist Hoehe knapper als Breite: Abstand zwischen
       Logo-Box und Card verkleinern. */
    #kc-header-wrapper {
        margin-bottom: 18px;
    }

    /* Hinweistext bekommt etwas mehr Luft, weil er hier drei Zeilen braucht. */
    #ssa-password-reset-hint {
        margin-top: 1rem;
        padding-top: 0.75rem;
    }
}