/* ================================================ */
/* PraxisApps — Petrol Blue Clinical Login          */
/* State-of-the-art · Friendly · Psychotherapie     */
/* ================================================ */


/* ── Page: Full petrol blue gradient ─────────── */
.pf-v5-c-login {
  min-height: 100vh !important;
  background: linear-gradient(145deg,
    #0e4d64 0%,
    #0c3d52 25%,
    #0a2e3f 50%,
    #0d3a4e 75%,
    #0b2c3a 100%) !important;
  background-attachment: fixed !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Soft animated radial glow for depth */
.pf-v5-c-login::before {
  content: '' !important;
  position: fixed !important;
  top: -20% !important;
  right: -10% !important;
  width: 60vw !important;
  height: 60vh !important;
  background: radial-gradient(ellipse, rgba(22, 120, 150, 0.15) 0%, transparent 70%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.pf-v5-c-login::after {
  content: '' !important;
  position: fixed !important;
  bottom: -15% !important;
  left: -10% !important;
  width: 50vw !important;
  height: 50vh !important;
  background: radial-gradient(ellipse, rgba(13, 80, 110, 0.12) 0%, transparent 70%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Kill any parent login.css backgrounds */
.login-pf,
.login-pf body,
.login-pf-page,
#kc-bg {
  background: transparent !important;
  background-image: none !important;
}


/* ── Layout container ────────────────────────── */
.pf-v5-c-login__container {
  position: relative !important;
  z-index: 1 !important;
  max-width: 400px !important;
  margin: 0 auto !important;
  padding: 2rem 1.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
  justify-content: center !important;
}


/* ── [EXPERIMENTE] Badge — top-right, minimal ── */
.pf-v5-c-login__header,
#kc-header {
  position: fixed !important;
  top: 1.5rem !important;
  right: 1.75rem !important;
  left: auto !important;
  bottom: auto !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  text-align: right !important;
  z-index: 100 !important;
}

#kc-header-wrapper,
.pf-v5-c-login__header .pf-v5-c-brand {
  font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 0.65rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
  color: rgba(255, 255, 255, 0.5) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  padding: 0.35rem 0.85rem !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 4px !important;
  text-transform: none !important;
  line-height: 1.2 !important;
  display: inline-block !important;
}


/* ── Hide language picker ────────────────────── */
.pf-v5-c-login__main-header-utilities,
#kc-locale,
#kc-locale-dropdown {
  display: none !important;
}


/* ── Card: Frosted glass with petrol tint ─────── */
.pf-v5-c-login__main {
  background: linear-gradient(165deg,
    rgba(255, 255, 255, 0.92) 0%,
    rgba(248, 253, 255, 0.95) 40%,
    rgba(240, 249, 255, 0.93) 100%) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 20px !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  max-width: 380px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: hidden !important;
}


/* ── Card text: force dark on white background ── */
.pf-v5-c-login__main,
.pf-v5-c-login__main-body,
.pf-v5-c-login__main-footer {
  color: #1e293b !important;
}

.pf-v5-c-login__main p,
.pf-v5-c-login__main .instruction,
.pf-v5-c-login__main .content-area,
.pf-v5-c-login__main h1,
.pf-v5-c-login__main h2,
.pf-v5-c-login__main h3,
.pf-v5-c-login__main span {
  color: #1e293b !important;
}

/* ── Hide the "Anmelden" heading on login page ── */
.pf-v5-c-login__main-header {
  display: none !important;
}


/* ── Form area — compact, no inner box ───────── */
.pf-v5-c-login__main-body {
  padding: 2rem 2rem 0.5rem !important;
  background: transparent !important;
  border: none !important;
}


/* ── Footer inside card ──────────────────────── */
.pf-v5-c-login__main-footer {
  padding: 0.25rem 2rem 1.25rem !important;
  background: transparent !important;
  border: none !important;
}

/* If footer is empty, collapse it */
.pf-v5-c-login__main-footer:empty,
.pf-v5-c-login__main-footer:not(:has(a, button, input)) {
  padding: 0 0 1rem 0 !important;
}


/* ── Form: override PF5 grid gap ─────────────── */
.pf-v5-c-form {
  --pf-v5-c-form--GridGap: 0.75rem !important;
  gap: 0.75rem !important;
  row-gap: 0.75rem !important;
}

/* ── Form groups — tight spacing ─────────────── */
.pf-v5-c-form__group {
  margin-bottom: 0 !important;
}

/* Collapse empty form groups (hidden fields etc) */
.pf-v5-c-form__group:empty,
.pf-v5-c-form__group:not(:has(*:not(input[type="hidden"]))) {
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Actions group (contains the button) — compact */
.pf-v5-c-form__actions {
  margin: 0 !important;
  padding: 0 !important;
}

/* Reduce gap before button */
.pf-v5-c-form__group:has(.pf-v5-c-form__actions) {
  margin-top: 0.5rem !important;
}

/* Last form group (button) — no bottom margin needed */
.pf-v5-c-form__group:last-child {
  margin-bottom: 0 !important;
}


/* ── Labels ──────────────────────────────────── */
.pf-v5-c-form__label {
  margin-bottom: 0.3rem !important;
  padding-bottom: 0 !important;
}

.pf-v5-c-form__label,
.pf-v5-c-form__label-text {
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  color: #475569 !important;
  letter-spacing: 0.01em !important;
}


/* ── Input fields ────────────────────────────── */
.pf-v5-c-form-control {
  border: 1px solid rgba(14, 116, 144, 0.2) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.7) !important;
  transition: all 0.25s ease !important;
}

.pf-v5-c-form-control:focus-within {
  border-color: rgba(14, 116, 144, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.1),
              0 2px 8px rgba(14, 116, 144, 0.06) !important;
  background: rgba(255, 255, 255, 0.9) !important;
}

/* Remove PF5 internal focus indicator */
.pf-v5-c-form-control::after {
  display: none !important;
}

.pf-v5-c-form-control > input {
  font-size: 0.9rem !important;
  color: #1e293b !important;
  padding: 0.7rem 0.9rem !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  font-family: inherit !important;
}

.pf-v5-c-form-control > input::placeholder {
  color: #94a3b8 !important;
}


/* ── Password toggle button ──────────────────── */
.pf-v5-c-input-group__item .pf-v5-c-button.pf-m-control {
  background: rgba(14, 116, 144, 0.04) !important;
  border: 1px solid rgba(14, 116, 144, 0.2) !important;
  border-left: none !important;
  border-radius: 0 12px 12px 0 !important;
  color: rgba(14, 116, 144, 0.5) !important;
  transition: all 0.2s ease !important;
}

.pf-v5-c-input-group__item .pf-v5-c-button.pf-m-control:hover {
  color: #0e7490 !important;
  background: rgba(14, 116, 144, 0.08) !important;
}

/* Fix input border-radius when paired with toggle */
.pf-v5-c-input-group .pf-v5-c-input-group__item.pf-m-fill .pf-v5-c-form-control {
  border-radius: 12px 0 0 12px !important;
  border-right: none !important;
}

/* Seamless input group — unified container */
.pf-v5-c-input-group {
  border: 1px solid rgba(14, 116, 144, 0.2) !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.7) !important;
  transition: all 0.25s ease !important;
  overflow: hidden !important;
}

.pf-v5-c-input-group:focus-within {
  border-color: rgba(14, 116, 144, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.1),
              0 2px 8px rgba(14, 116, 144, 0.06) !important;
  background: rgba(255, 255, 255, 0.9) !important;
}

/* Kill ALL borders on items inside input group */
.pf-v5-c-input-group > .pf-v5-c-input-group__item {
  border: none !important;
  border-left: none !important;
  border-right: none !important;
}

.pf-v5-c-input-group .pf-v5-c-form-control {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.pf-v5-c-input-group .pf-v5-c-form-control:focus-within {
  border: none !important;
  box-shadow: none !important;
}

.pf-v5-c-input-group .pf-v5-c-button.pf-m-control {
  border: none !important;
  border-left: 1px solid rgba(14, 116, 144, 0.1) !important;
  border-radius: 0 !important;
  background: transparent !important;
}


/* ── Login Button ────────────────────────────── */
#kc-login,
.pf-v5-c-button.pf-m-primary.pf-m-block {
  width: 100% !important;
  padding: 0.85rem 1.5rem !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  font-family: inherit !important;
  letter-spacing: 0.02em !important;
  color: #ffffff !important;
  background: linear-gradient(135deg, #0e7490 0%, #0c5e75 50%, #0a4f66 100%) !important;
  border: none !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 4px 12px rgba(14, 116, 144, 0.3),
              inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  margin: 0.5rem 0 0 0 !important;
}

#kc-login:hover,
.pf-v5-c-button.pf-m-primary.pf-m-block:hover {
  background: linear-gradient(135deg, #0c6a84 0%, #0a5268 50%, #08455a 100%) !important;
  box-shadow: 0 6px 20px rgba(14, 116, 144, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  transform: translateY(-1px) !important;
}

#kc-login:active,
.pf-v5-c-button.pf-m-primary.pf-m-block:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(14, 116, 144, 0.25),
              inset 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}


/* ── Remember Me / Form Options ──────────────── */
#kc-form-options label,
.checkbox label {
  font-size: 0.8rem !important;
  font-weight: 400 !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
}

input[type="checkbox"] {
  accent-color: #0e7490 !important;
}


/* ── Links ───────────────────────────────────── */
.pf-v5-c-login a {
  color: #0e7490 !important;
  text-decoration: none !important;
  font-size: 0.8rem !important;
  font-weight: 450 !important;
  transition: color 0.15s ease !important;
}

.pf-v5-c-login a:hover {
  color: #0c5e75 !important;
  text-decoration: underline !important;
}


/* ── Alerts ──────────────────────────────────── */
.pf-v5-c-alert {
  border-radius: 10px !important;
  padding: 0.7rem 1rem !important;
  margin-bottom: 1rem !important;
  font-size: 0.8rem !important;
}

.pf-v5-c-alert.pf-m-danger {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  color: #991b1b !important;
}

.pf-v5-c-alert.pf-m-warning {
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
  color: #92400e !important;
}

.pf-v5-c-alert.pf-m-success {
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  color: #166534 !important;
}

.pf-v5-c-alert.pf-m-info {
  background: #f0f9ff !important;
  border: 1px solid #bae6fd !important;
  color: #075985 !important;
}


/* ── Footer (outside card) ───────────────────── */
.pf-v5-c-login__footer {
  text-align: center !important;
  margin-top: 1.5rem !important;
}

.pf-v5-c-login__footer a {
  color: rgba(255, 255, 255, 0.45) !important;
  font-size: 0.75rem !important;
}

.pf-v5-c-login__footer a:hover {
  color: rgba(255, 255, 255, 0.7) !important;
}


/* ── Remove legacy cruft ─────────────────────── */
.login-pf .login-pf-header,
.kc-logo-text,
.login-pf-page-header {
  display: none !important;
}

/* Top accent line */
body::before {
  content: '' !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg,
    rgba(14, 116, 144, 0.6),
    rgba(103, 210, 216, 0.4),
    rgba(14, 116, 144, 0.6)) !important;
  z-index: 9999 !important;
}


/* ── Focus ring ──────────────────────────────── */
*:focus-visible {
  outline: 2px solid #0e7490 !important;
  outline-offset: 2px !important;
}


/* ── Responsive ──────────────────────────────── */
@media (max-width: 480px) {
  .pf-v5-c-login__header,
  #kc-header {
    top: 0.75rem !important;
    right: 0.75rem !important;
  }

  #kc-header-wrapper {
    font-size: 0.55rem !important;
    padding: 0.25rem 0.6rem !important;
  }

  .pf-v5-c-login__main {
    margin: 0 0.75rem !important;
    border-radius: 12px !important;
  }

  .pf-v5-c-login__main-body {
    padding: 2rem 1.5rem 0.75rem !important;
  }

  .pf-v5-c-login__main-footer {
    padding: 0.5rem 1.5rem 1.75rem !important;
  }

  body::before {
    height: 2px !important;
  }
}