@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");

/* =========================
   MudBlazor Palette -> CSS Vars
   ========================= */
:root {
  font-size: 14px;

  /* ---- LIGHT (default) ---- */
  --mud-primary: #14377D;
  --mud-secondary: #297480;

  --mud-background: #F6F7FB;
  --mud-surface: #FFFFFF;
  --mud-drawer-bg: #FFFFFF;
  --mud-appbar-bg: rgba(255,255,255,0.85);

  --mud-text-primary: #17122C;
  --mud-text-secondary: #4A4F6A;
  --mud-text-disabled: #17122C33;

  --mud-action-default: #14377D;
  --mud-action-disabled: #17122C4D;
  --mud-action-disabled-bg: #17122C14;

  --mud-info: #14377D;
  --mud-success: #297480;
  --mud-warning: #F4BD50;
  --mud-error: #E68F84;

  --mud-gray-light: #E7E9F2;
  --mud-gray-lighter: #F6F7FB;

  --mud-divider: #D9DCE8;
  --mud-lines-default: #E1E4EF;
  --mud-table-lines: #E1E4EF;

  --mud-overlay-light: #17122C14;

  /* ---- Keycloak/Patternfly variable mapping ---- */
  --pf-global--BackgroundColor--light-100: var(--mud-surface);
  --pf-global--primary-color--100: var(--mud-primary);
  --pf-global--primary-color--200: var(--mud-secondary);

  /* Buttons (Primary) */
  --pf-c-button--m-primary--BackgroundColor: var(--mud-primary);
  --pf-c-button--m-primary--Color: #fff;

  /* Focus ring */
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--mud-primary) 25%, transparent);

  /* Radius / shadows */
  --radius-xl: 30px;
  --radius-md: 10px;
  --shadow-md: 0 10px 30px rgba(23, 18, 44, 0.10);
  
  --page-pad: 24px;
  --page-inner-h: calc(100vh - (2 * var(--page-pad)));
}

/* ---- DARK override (optional):
   Aktiviert sich, wenn Browser/OS dark ist.
   Falls du Dark anders togglest, kannst du stattdessen .theme-dark auf den body setzen. */
@media (prefers-color-scheme: dark) {
  :root {
    --mud-primary: #14377D;
    --mud-secondary: #297480;

    --mud-surface: #17122C;
    --mud-background: #110E2D;
    --mud-background-gray: #0D0B24;

    --mud-text-primary: #F3F4F8;
    --mud-text-secondary: #C6C8D5;
    --mud-text-disabled: #FFFFFF33;

    --mud-action-default: #8F93AD;
    --mud-action-disabled: #FFFFFF4D;
    --mud-action-disabled-bg: #FFFFFF1F;

    --mud-info: #14377D;
    --mud-success: #297480;
    --mud-warning: #F4BD50;
    --mud-error: #E68F84;

    --mud-gray-light: #252141;
    --mud-gray-lighter: #1C1836;

    --mud-lines-default: #2B2750;
    --mud-table-lines: #2B2750;
    --mud-divider: #221E3F;

    --mud-overlay-light: #17122C80;

    --pf-global--BackgroundColor--light-100: var(--mud-surface);

    /* Buttons in dark: Primary bleibt CI, Text weiß */
    --pf-c-button--m-primary--BackgroundColor: var(--mud-primary);
    --pf-c-button--m-primary--Color: #fff;

    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.35);
  }
}

/* =========================
   Layout
   ========================= */
.login-pf {
  background: none;
  height: 100%;
  width: 100%;
}

.login-pf body {
  background: var(--mud-background);
  font-family: Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  min-height: 100vh;
  height: auto;
  margin: 0;
  color: var(--mud-text-primary);
}

#kc-header-wrapper {
  display: none;
}

.login-pf-page {
  padding: var(--page-pad);
  box-sizing: border-box;

  display: flex;
  justify-content: center;

  /* WICHTIG: gleich hohe Spalten */
  align-items: stretch;

  /* Zentrierung des "Rows" im verfügbaren Platz */
  flex-wrap: wrap;
  align-content: center;

  min-height: 100vh;

  /* wenn zu groß: scroll */
  overflow-y: auto;
  
}

.login-pf-page-header,
.card-pf {
  min-width: 0;
}

/* Left brand panel */
.login-pf-page-header {
  //min-height: 100%;   
  flex: 0 0 35em;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  border-top-left-radius: var(--radius-xl); 
  border-bottom-left-radius: var(--radius-xl); 
  background-color: var(--mud-primary); 
  color: #fff; 
  box-shadow: var(--shadow-md);
  margin-bottom: 0px !important;
}

/* Right card */
.card-pf {
  border-top: 0;
  margin: 0;
  flex: 0 0 35em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-top-right-radius: var(--radius-xl);
  border-bottom-right-radius: var(--radius-xl);
  min-height: 550px;
}


/* =========================
   Typography
   ========================= */
.login-pf-page .login-pf-header h1 {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 2rem;
  text-align: left;
  color: var(--mud-text-primary);
}

.login-subtitle {
  font-size: 1rem;
  line-height: 1.4rem;
  padding: 16px 0;
  color: var(--mud-text-secondary);
}

/* =========================
   Form / Inputs
   ========================= */
.pf-c-form__label {
  font-weight: 700;
  color: var(--mud-text-primary);
}

input[type="text"],
input[type="password"],
select {
  height: 48px;
  width: 100%;
  padding: 12px 14px;
  margin: 8px 0;
  display: inline-block;

  background: var(--mud-surface);
  color: var(--mud-text-primary);

  border: 1px solid var(--mud-divider);
  border-radius: var(--radius-md);
  box-sizing: border-box;

  transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

input[type="text"]::placeholder,
input[type="password"]::placeholder {
  color: color-mix(in srgb, var(--mud-text-secondary) 70%, transparent);
}

input[type="text"]:focus,
input[type="password"]:focus,
select:focus {
  outline: none;
  border-color: var(--mud-primary);
  box-shadow: var(--focus-ring);
}

.pf-c-form-control[aria-invalid="true"] {
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem 1rem;
}

/* Checkbox area */
#kc-form-options .checkbox {
  padding: 0;
  margin: 0;
  color: var(--mud-text-secondary);
}

/* Divider-ish borders inside KC components (falls vorhanden) */
hr,
.pf-c-divider {
  border-color: var(--mud-divider);
}

/* =========================
   Buttons
   ========================= */

/* Patternfly / KC primary button */
.pf-c-button,
.pf-c-button.pf-m-primary {
  background-color: var(--pf-c-button--m-primary--BackgroundColor);
  border-radius: var(--radius-md);
}

/* Hover: Mud-Style -> Secondary als Akzent + Primary Text */
.pf-c-button.pf-m-primary:hover,
.pf-m-primary:hover {
  background-color: var(--mud-secondary) !important;
  color: #fff !important;
}

/* Disabled */
.pf-c-button:disabled,
.pf-c-button.pf-m-disabled,
button:disabled,
input[type="submit"]:disabled {
  background: var(--mud-action-disabled-bg) !important;
  color: var(--mud-action-disabled) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* Your old input submit (falls Keycloak das nutzt) */
input[type="submit"] {
  width: 100%;
  background-color: var(--mud-primary);
  color: #fff;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: filter 120ms ease, background-color 120ms ease;
}

input[type="submit"]:hover {
  background-color: var(--mud-secondary);
}

/* PatternFly input-group fix (Password toggle, OTP, etc.) */
.pf-c-input-group {
  display: flex;
  align-items: stretch;
  width: 100%;
}

/* Input soll in der Gruppe flexibel sein */
.pf-c-input-group > .pf-c-form-control {
  flex: 1 1 auto;
  width: auto !important;     /* überschreibt width:100% */
  margin: 0 !important;       /* überschreibt margin:8px 0 */
  display: block;             /* stabiler als inline-block */
  border-right: 0;
}

/* Control-Button im Input-Group: PF-After-Border sauber setzen */
.pf-c-input-group > .pf-c-button.pf-m-control {
  /* gleiche optische Hoehe wie Form-Control */
  min-height: var(--pf-c-form-control--Height, 44px);
  padding: 0 1rem;

  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;

  /* wir wollen NICHT den Primary-Button-Look */
  background: transparent !important;
  color: inherit !important;

  /* Naht zwischen Input & Button: keine doppelte Kante */
  border-left: 0 !important;

  /* PatternFly Border kommt uebers ::after -> hier korrigieren */
  --pf-c-button--after--BorderColor: var(--pf-c-form-control--BorderColor, #d2d2d2);
  --pf-c-button--after--BorderWidth: 1px;
  --pf-c-button--after--BorderRadius: 0 var(--radius-md) var(--radius-md) 0;

  /* sorgt dafuer, dass der After-Rand nicht “square” bleibt */
  --pf-c-button--BorderRadius: 0 var(--radius-md) var(--radius-md) 0;
}

/* Button soll daneben stehen, nicht umbrechen */
.pf-c-input-group > .pf-c-button.pf-m-control {
  //flex: 0 0 auto;
  //margin: 0 !important;
  //height: 48px;               /* gleiche Höhe wie Input */
  //border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* Optional: Input-Radius links, damit es "wie ein Feld" aussieht */
.pf-c-input-group > .pf-c-form-control {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

/* DAS ist entscheidend: PatternFly Border liegt im ::after */
.pf-c-input-group > .pf-c-button.pf-m-control::after {
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;

  /* sicherstellen, dass es nicht uebersteht */
  inset: 0; 
}

/* =========================
   Status / Alerts
   ========================= */
.pf-m-error {
  color: var(--mud-error) !important;
}

.pf-c-alert {
  margin-bottom: 15px;
}

/* Falls KC Erfolgs-/Infohinweise verwendet */
.pf-m-success { color: var(--mud-success) !important; }
.pf-m-warning { color: var(--mud-warning) !important; }
.pf-m-info { color: var(--mud-info) !important; }

/* =========================
   Responsive
   ========================= */
@media (max-width: 750px) {

  .login-pf-page {
    flex-direction: column;
    justify-content: center;
    padding: 10px;
  }

  .login-pf-page-header {
    border-top-left-radius: var(--radius-md);
    border-bottom-left-radius: 0;
    border-top-right-radius: var(--radius-md);
    border-bottom-right-radius: 0;
    flex: 0 0 15em;
  }

  .card-pf {
    border-top-right-radius: 0;
    border-bottom-right-radius: var(--radius-md);
    border-top-left-radius: 0;
    border-bottom-left-radius: var(--radius-md);
  }
}


/* =========================
   Keycloak locale dropdown fix (KC 26)
   ========================= */
#kc-locale {
  position: relative;
}

/* Container */
#kc-locale-dropdown {
  position: relative;
  display: inline-block;
  z-index: 2000;
}

/* Link (optional hübscher) */
#kc-current-locale-link {
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
}

/* Liste standardmäßig zu */
#kc-locale-dropdown ul {
  display: none;
  position: absolute;
  top: 12px;
  left: 0;
  margin: 6px 0 0;
  padding: 6px 0;
  list-style: none;

  background: var(--mud-surface);
  border: 1px solid var(--mud-divider);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);

  min-width: 200px;
}

/* Auf Desktop (Hover) + für Klick/Tastatur (focus-within) öffnen */
#kc-locale-dropdown:hover ul,
#kc-locale-dropdown:focus-within ul {
  display: block;
}

/* Items */
#kc-locale-dropdown li a {
  display: block;
  padding: 8px 12px;
  color: var(--mud-text-primary);
  text-decoration: none;
}

#kc-locale-dropdown li a:hover,
#kc-locale-dropdown li a:focus {
  background: var(--mud-overlay-light);
  outline: none;
}