/* SV-036: ServerVision-Aussehen fuer die Keycloak-Anmeldung.
   Farben und Masse stammen aus frontend/theme.css (Stand 20.09.2026) und
   muessen bei einer Aenderung dort hier nachgezogen werden.
   Nur Aussehen: Diese Datei aendert keine Funktion der Seiten. Faellt sie weg,
   sieht die Anmeldung wieder aus wie Keycloak und funktioniert unveraendert. */

/* Schrift liegt im Theme selbst: keine Anfrage an Google Fonts oder andere
   fremde Server. Lizenz: fonts/OFL-Inter.txt */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/inter-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/inter-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/inter-latin-800-normal.woff2) format('woff2')}

:root{
  color-scheme:light;
  --sv-bg:#f4f5f7;
  --sv-surface:#ffffff;
  --sv-surface-sunken:#f0f1f6;
  --sv-border:#e4e6ee;
  --sv-border-strong:#d3d6e2;
  --sv-text:#161821;
  --sv-text-muted:#6b7086;
  /* Schwarz-Rot (SV-036, Entscheidung 6g = B2): Knoepfe graphit, Rot nur als
     Akzent. Gefuelltes Rot gehoert in ServerVision den Alarmen. */
  --sv-primary:#161821;
  --sv-primary-hover:#000000;
  --sv-primary-soft:#eef0f4;
  --sv-brand:#D71920;
  --sv-danger:#dc2626;
  --sv-radius:10px;
  --sv-radius-lg:14px;
  --sv-shadow:0 1px 2px rgba(20,22,35,.04),0 4px 14px rgba(20,22,35,.06);
  --sv-font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* PatternFly auf ServerVision umstellen */
  --pf-v5-global--FontFamily--text:var(--sv-font);
  --pf-v5-global--FontFamily--text--vf:var(--sv-font);
  --pf-v5-global--FontFamily--heading:var(--sv-font);
  --pf-v5-global--FontFamily--heading--vf:var(--sv-font);
  --pf-v5-global--primary-color--100:var(--sv-primary);
  --pf-v5-global--primary-color--200:var(--sv-primary-hover);
  --pf-v5-global--primary-color--dark-100:var(--sv-primary-hover);
  --pf-v5-global--active-color--100:var(--sv-brand);
  --pf-v5-global--link--Color:var(--sv-primary);
  --pf-v5-global--link--Color--hover:var(--sv-brand);
  --pf-v5-global--Color--100:var(--sv-text);
  --pf-v5-global--Color--200:var(--sv-text-muted);
}

/* --- Seite ------------------------------------------------------------ */
html,.login-pf body,body#keycloak-bg{
  background:
    radial-gradient(900px 480px at 50% -8%,rgba(215,25,32,.06),transparent 70%),
    var(--sv-bg);
  background-attachment:fixed;
  color:var(--sv-text);
  font-family:var(--sv-font);
  -webkit-font-smoothing:antialiased;
}
.pf-v5-c-login{
  --pf-v5-c-login__container--PaddingLeft:16px;
  --pf-v5-c-login__container--PaddingRight:16px;
  --pf-v5-c-login__main--BoxShadow:var(--sv-shadow);
  --pf-v5-c-login__main--BackgroundColor:var(--sv-surface);
  min-height:100vh;
}
.pf-v5-c-login__container{grid-template-columns:minmax(0,27rem)}

/* --- Karte ------------------------------------------------------------ */
.pf-v5-c-login__main{
  border:1px solid var(--sv-border);
  border-top:3px solid var(--sv-brand);
  border-radius:var(--sv-radius-lg);
  overflow:hidden;
}
#kc-page-title{
  font-family:var(--sv-font);font-size:1.3rem;font-weight:700;
  letter-spacing:-.01em;color:var(--sv-text);
}
.pf-v5-c-login__main-header{--pf-v5-c-login__main-header--PaddingTop:32px}

/* Beschriftungen und Hinweise */
.pf-v5-c-form__label-text{font-weight:600;font-size:.88rem;color:var(--sv-text)}
.pf-v5-c-form__label-required{color:var(--sv-danger)}
#kc-info,#kc-info-wrapper,.kc-feedback-text{font-size:.9rem}

/* Eingabefelder: ganzer Rahmen wie in der Oberflaeche, nicht nur die
   PatternFly-Unterstreichung. Mindestens 44 px hoch (Handy, wie SV-034). */
.pf-v5-c-form-control{
  --pf-v5-c-form-control--before--BorderTopColor:var(--sv-border-strong);
  --pf-v5-c-form-control--before--BorderRightColor:var(--sv-border-strong);
  --pf-v5-c-form-control--before--BorderLeftColor:var(--sv-border-strong);
  --pf-v5-c-form-control--before--BorderBottomColor:var(--sv-border-strong);
  --pf-v5-c-form-control--after--BorderBottomColor:transparent;
  --pf-v5-c-form-control--hover--after--BorderBottomColor:transparent;
  --pf-v5-c-form-control--focus--after--BorderBottomColor:transparent;
  border-radius:var(--sv-radius);
  min-height:44px;
  background:var(--sv-surface);
}
.pf-v5-c-form-control::before,.pf-v5-c-form-control::after{border-radius:inherit}
.pf-v5-c-form-control:hover{--pf-v5-c-form-control--before--BorderTopColor:#b9bdd0;--pf-v5-c-form-control--before--BorderRightColor:#b9bdd0;--pf-v5-c-form-control--before--BorderLeftColor:#b9bdd0;--pf-v5-c-form-control--before--BorderBottomColor:#b9bdd0}
.pf-v5-c-form-control:focus-within{
  box-shadow:0 0 0 3px rgba(22,24,33,.12);
  --pf-v5-c-form-control--before--BorderTopColor:var(--sv-primary);
  --pf-v5-c-form-control--before--BorderRightColor:var(--sv-primary);
  --pf-v5-c-form-control--before--BorderLeftColor:var(--sv-primary);
  --pf-v5-c-form-control--before--BorderBottomColor:var(--sv-primary);
}
.pf-v5-c-form-control.pf-m-error{
  --pf-v5-c-form-control--before--BorderTopColor:var(--sv-danger);
  --pf-v5-c-form-control--before--BorderRightColor:var(--sv-danger);
  --pf-v5-c-form-control--before--BorderLeftColor:var(--sv-danger);
  --pf-v5-c-form-control--before--BorderBottomColor:var(--sv-danger);
  --pf-v5-c-form-control--m-error--after--BorderBottomColor:transparent;
}
.pf-v5-c-form-control>input,.pf-v5-c-form-control>select{font-size:.95rem}

/* Passwortfeld mit Auge: Feld und Knopf bilden eine Einheit */
.pf-v5-c-input-group>.pf-v5-c-input-group__item:first-child .pf-v5-c-form-control{border-top-right-radius:0;border-bottom-right-radius:0}
.pf-v5-c-input-group>.pf-v5-c-input-group__item:last-child .pf-v5-c-button.pf-m-control{
  border-radius:0 var(--sv-radius) var(--sv-radius) 0;min-height:44px;
  --pf-v5-c-button--m-control--after--BorderTopColor:var(--sv-border-strong);
  --pf-v5-c-button--m-control--after--BorderRightColor:var(--sv-border-strong);
  --pf-v5-c-button--m-control--after--BorderBottomColor:var(--sv-border-strong);
  --pf-v5-c-button--m-control--after--BorderLeftColor:var(--sv-border-strong);
}
.pf-v5-c-button.pf-m-control::after{border-radius:inherit}

/* Sprachwahl oben rechts: schlicht */
#login-select-toggle{font-size:.85rem}
.pf-v5-c-login__main-header-utilities .pf-v5-c-form-control{min-height:36px}

/* --- Knoepfe ---------------------------------------------------------- */
.pf-v5-c-button{
  --pf-v5-c-button--BorderRadius:var(--sv-radius);
  --pf-v5-c-button--FontWeight:600;
  font-family:var(--sv-font);
}
.pf-v5-c-button.pf-m-primary{
  --pf-v5-c-button--m-primary--BackgroundColor:var(--sv-primary);
  --pf-v5-c-button--m-primary--hover--BackgroundColor:var(--sv-primary-hover);
  --pf-v5-c-button--m-primary--focus--BackgroundColor:var(--sv-primary-hover);
  --pf-v5-c-button--m-primary--active--BackgroundColor:var(--sv-primary-hover);
  min-height:44px;
}
.pf-v5-c-button.pf-m-secondary{
  --pf-v5-c-button--m-secondary--Color:var(--sv-primary);
  --pf-v5-c-button--m-secondary--after--BorderColor:var(--sv-border-strong);
  --pf-v5-c-button--m-secondary--hover--after--BorderColor:var(--sv-primary);
  min-height:44px;
}
.pf-v5-c-button.pf-m-link{--pf-v5-c-button--m-link--Color:var(--sv-primary);--pf-v5-c-button--m-link--hover--Color:var(--sv-primary-hover)}
.pf-v5-c-login a{color:var(--sv-primary);font-weight:500;text-decoration:underline;text-decoration-color:var(--sv-brand);text-underline-offset:3px}
.pf-v5-c-login a:hover{color:var(--sv-brand)}

/* --- Meldungen: Farben der Oberflaeche, runde Ecken ------------------- */
.pf-v5-c-alert.pf-m-inline{border-radius:var(--sv-radius)}

/* --- Fusszeile unter der Karte (footer.ftl) --------------------------- */
.sv-footer{
  grid-area:footer;
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;
  padding:18px 16px 8px;
  font-size:.8rem;color:var(--sv-text-muted);
}
.pf-v5-c-login__container{grid-template-areas:"header" "main" "footer"}
.sv-footer a{color:var(--sv-text-muted);font-weight:500;text-decoration:none}
.sv-footer a:hover{color:var(--sv-text);text-decoration:underline}

/* --- Handy ------------------------------------------------------------ */
@media (max-width:480px){
  .pf-v5-c-login{--pf-v5-c-login--PaddingTop:24px}
  .pf-v5-c-login__main-header{--pf-v5-c-login__main-header--PaddingTop:24px}
}

/* --- Nachschaerfung nach der ersten Bildschirmfoto-Runde (20.09.) -------- */
/* Das eigentliche <input> fuellt den Rahmen; der Fokus zeigt sich einmal,
   als Ring am Rahmen, nicht zusaetzlich als schwarze Browser-Kontur. */
.pf-v5-c-form-control>input,.pf-v5-c-form-control>select{min-height:42px;outline:none}
.pf-v5-c-form-control>input:focus-visible{outline:none}
/* Sprachwahl klein oben rechts ueber dem Titel, damit der Titel die volle
   Breite hat und nicht umbricht - auf dem Handy statt eines breiten Feldes. */
div.pf-v5-c-login__main-header{grid-template-columns:minmax(0,1fr)!important;row-gap:4px}
.pf-v5-c-login__main-header-utilities{grid-area:auto!important;order:-1;justify-self:end;margin:-12px -20px 0 0}
.pf-v5-c-login__main-header-utilities>.pf-v5-c-form-control{display:inline-grid}
.pf-v5-c-login__main-header-utilities .pf-v5-c-form-control{
  width:auto;min-height:32px;
  --pf-v5-c-form-control--before--BorderTopColor:transparent;
  --pf-v5-c-form-control--before--BorderRightColor:transparent;
  --pf-v5-c-form-control--before--BorderLeftColor:transparent;
  --pf-v5-c-form-control--before--BorderBottomColor:transparent;
  background:transparent;
}
.pf-v5-c-login__main-header-utilities .pf-v5-c-form-control:hover{background:var(--sv-surface-sunken)}
.pf-v5-c-login__main-header-utilities .pf-v5-c-form-control>select{min-height:32px;font-size:.82rem;color:var(--sv-text-muted);padding-right:28px}
/* Handy: Karte mit Rand wie in der Oberflaeche, nicht bis an die Kante */
@media (max-width:767px){.pf-v5-c-login__container{padding-left:16px;padding-right:16px}}
/* Meldungen in normaler Schriftstaerke - fett wirkt wie ein Alarm */
.pf-v5-c-alert__title.kc-feedback-text{font-weight:500}
/* Abstand zwischen Frage und Knopf (Abmelden, Hinweisseiten) */
#kc-logout-confirm p,.instruction{margin-bottom:16px}
/* "Weiter" auf der Zwischenseite der Einladung als Knopf */
#kc-info-message>p:not(.instruction)>a{
  display:flex;align-items:center;justify-content:center;min-height:44px;
  background:var(--sv-primary);color:#fff;border-radius:var(--sv-radius);
  font-weight:600;text-decoration:none!important;margin-top:8px;
}
#kc-info-message>p:not(.instruction)>a:hover{background:var(--sv-primary-hover);color:#fff}

/* --- Logo (20.09.): ServerVision-Logo im RECDATA-Stil statt "SV"-Quadrat --
   Der Text "ServerVision" bleibt im HTML (Screenreader, Suchmaschinen) und
   wird nur optisch durch das Logo ersetzt. */
#kc-header-wrapper{
  background:url(../img/servervision-logo.svg) center/contain no-repeat;
  height:64px;width:100%;max-width:320px;margin:0 auto 14px;
  color:transparent!important;font-size:0!important;overflow:hidden;
}
#kc-header-wrapper::before{content:none}
@media (max-width:480px){#kc-header-wrapper{height:52px;max-width:260px}}

/* Gesperrte Felder (E-Mail-Adresse im Schritt "Ihr Name", seit SV-036 nur
   durch Admins aenderbar) muessen auch so aussehen - sonst tippt man hinein
   und wundert sich. */
.pf-v5-c-form-control:has(>input:disabled),.pf-v5-c-form-control.pf-m-disabled{background:var(--sv-surface-sunken)}
.pf-v5-c-form-control>input:disabled{color:var(--sv-text-muted);cursor:not-allowed;-webkit-text-fill-color:var(--sv-text-muted)}