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

:root {
  /* Brand — matches app ThemeProvider.tsx + _shared.css */
  --cfh-primary: #ba3d03;        /* --orange */
  --cfh-primary-hover: #8c2c00; /* --orangeD */
  --cfh-primary-active: #6e2400;
  --cfh-text: #18181b;           /* --text1 */
  --cfh-text-secondary: #71717a; /* --text3 */
  --cfh-bg: #f9fafb;             /* --bg */
  --cfh-card-border: #e2e2e5;    /* --border */
  --cfh-input-border: #e2e2e5;   /* --border */
  --cfh-input-focus-outline: rgba(186, 61, 3, 0.16); /* --orangeRing */

  /* Override PatternFly primary so the rest of the theme follows our brand */
  --pf-v5-global--primary-color--100: var(--cfh-primary);
  --pf-v5-global--primary-color--200: var(--cfh-primary-hover);
  --pf-v5-global--link--Color: var(--cfh-primary);
  --pf-v5-global--link--Color--hover: var(--cfh-primary-hover);
  --pf-v5-global--active-color--100: var(--cfh-primary);
  --pf-v5-global--BackgroundColor--100: var(--cfh-bg);
}

.login-pf,
.login-pf body {
  background: var(--cfh-bg) !important;
  font-family: "Inter", -apple-system, "system-ui", "Segoe UI", Helvetica, Arial,
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--cfh-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Hide the default Keycloak text-logo in the header; replace with ConfigHub mark */
#kc-header-wrapper {
  font-size: 0 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: transparent !important;
  background-image: url("../img/logo.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 60px;
  width: 60px;
  margin: 0 auto 20px auto;
}

/* "Sign in to ConfigHub" headline */
.pf-v5-c-login__main-header {
  display: block !important;
  grid-template-columns: 1fr !important;
  text-align: center;
}

#kc-page-title {
  font-family: "Roboto", "Inter", -apple-system, "system-ui", "Segoe UI", sans-serif;
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: var(--cfh-text) !important;
  text-align: center;
  margin-bottom: 28px;
  width: 100%;
}

/* Card */
.pf-v5-c-login__main {
  background: #ffffff;
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 4px 12px rgba(0, 0, 0, 0.07),
    0 12px 32px rgba(0, 0, 0, 0.05),
    0 0 0 1px rgba(0, 0, 0, 0.06);
  padding: 32px 48px;
  max-width: 30rem;
  margin: 0 auto;
}

/* Default kc.v2 puts extra padding inside the card, which makes the form
   narrower than the social-provider buttons. Zero them out — the card's own
   40px padding is enough on all sides. */
.pf-v5-c-login__main-header,
.pf-v5-c-login__main-body,
.pf-v5-c-login__main-footer {
  padding: 0 !important;
}

.pf-v5-c-login__container {
  grid-template-columns: 30rem;
}

/* Inputs — make them fill the card content area */
.pf-v5-c-form,
.pf-v5-c-form__group,
.pf-v5-c-form-control,
.pf-v5-c-input-group,
#kc-form,
#kc-form-wrapper,
#kc-form-login {
  width: 100%;
  max-width: none !important;
}

/* Field labels: 14px / 500, tight gap to input */
.pf-v5-c-form__label,
.pf-v5-c-form__label-text {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--cfh-text-secondary) !important;
  letter-spacing: 0.01em;
  margin-bottom: 6px !important;
}

.pf-v5-c-form-control {
  border-radius: 10px !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1px var(--cfh-input-border) !important;
  background: #ffffff !important;
  font-size: 16px;
  padding: 1px !important;
  transition: box-shadow 0.15s ease;
}

/* PatternFly draws an underline via ::before/::after — suppress both */
.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after {
  display: none !important;
  content: none !important;
  border: 0 !important;
}

/* Password field uses a flex input-group (input + eye toggle). Promote the
   group itself to be the bordered box so total width matches the email box,
   then strip border/bg from the nested form-control and toggle button so they
   read as one continuous control. */
.pf-v5-c-input-group {
  display: flex !important;
  align-items: stretch;
  width: 100%;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--cfh-input-border);
  background: #ffffff;
  padding: 1px;
  overflow: hidden;
  transition: box-shadow 0.15s ease;
}

.pf-v5-c-input-group:focus-within {
  box-shadow: inset 0 0 0 1px var(--cfh-input-border), 0 0 0 3px var(--cfh-input-focus-outline);
  outline: none;
}

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

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

.pf-v5-c-input-group .pf-v5-c-button,
.pf-v5-c-input-group .pf-v5-c-button::before,
.pf-v5-c-input-group .pf-v5-c-button::after {
  background: transparent !important;
  border: 0 !important;
  border-left: 0 !important;
  box-shadow: none !important;
  color: var(--cfh-text-secondary) !important;
  padding: 0 12px !important;
}

.pf-v5-c-input-group .pf-v5-c-button:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  color: var(--cfh-text) !important;
}

.pf-v5-c-form-control input {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  font-size: 15px;
  background: transparent;
  border: 0;
  color: var(--cfh-text);
}

.pf-v5-c-form-control input::placeholder {
  color: #b0b7c3;
  font-size: 15px;
}

.pf-v5-c-form-control:focus-within,
.pf-v5-c-form-control:focus {
  box-shadow: inset 0 0 0 1px var(--cfh-input-border), 0 0 0 3px var(--cfh-input-focus-outline) !important;
  outline: none;
}

.pf-v5-c-form-control input:focus,
.pf-v5-c-form-control input:focus-visible {
  outline: none;
}

/* Primary button — "Continue" / "Sign in"
   Shadow matches app _shared.css .btn-primary */
.pf-v5-c-button.pf-m-primary {
  background-color: var(--cfh-primary) !important;
  border: 1px solid var(--cfh-primary-hover) !important;
  border-radius: 8px !important;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  padding: 11px 16px;
  transition: background-color 0.14s ease, transform 0.1s ease;
  box-shadow: none !important;
}

.pf-v5-c-button.pf-m-primary:hover {
  background-color: var(--cfh-primary-hover) !important;
  border-color: var(--cfh-primary-hover) !important;
  box-shadow: none !important;
  transform: translateY(-0.5px);
}

.pf-v5-c-button.pf-m-primary:active {
  background-color: var(--cfh-primary-active) !important;
  transform: translateY(0) scale(0.99);
  box-shadow: none !important;
}

.pf-v5-c-button.pf-m-primary:focus {
  background-color: var(--cfh-primary) !important;
  box-shadow: 0 0 0 3px var(--cfh-input-focus-outline) !important;
}

/* Secondary buttons */
.pf-v5-c-button.pf-m-secondary {
  background-color: #ffffff !important;
  color: var(--cfh-text) !important;
  border: 1px solid var(--cfh-input-border) !important;
  border-radius: 8px !important;
  font-weight: 500;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.pf-v5-c-button.pf-m-secondary:hover {
  background-color: #f4f4f5 !important;
  border-color: #d4d4d8 !important;
}

/* OR divider above social providers */
.cfh-social-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 12px 0;
  color: #9ca3af;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cfh-social-divider::before,
.cfh-social-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
}

/* Hide the parent kc.v2 footer-band ("Or sign in with") since we render our own */
.pf-v5-c-login__main-footer-band {
  display: none !important;
}

/* Social-provider list — stack vertically, full-width */
.cfh-social-list .pf-v5-c-login__main-footer-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.cfh-social-list .pf-v5-c-login__main-footer-links-item {
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
}

.cfh-social-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  background: #ffffff !important;
  color: var(--cfh-text) !important;
  border: 1px solid var(--cfh-input-border) !important;
  border-radius: 8px !important;
  font-weight: 500;
  font-size: 14.5px;
  text-decoration: none !important;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.cfh-social-button:hover {
  background: #f4f4f5 !important;
  border-color: #d4d4d8 !important;
  color: var(--cfh-text) !important;
}

.cfh-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

.cfh-social-label {
  display: inline-block;
}

/* Links (e.g. forgot password, sign-up) in brand color */
a {
  color: var(--cfh-primary);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.12s ease;
}

a:hover {
  color: var(--cfh-primary-hover);
  text-decoration: underline;
}

/* Footer band sits below the card, muted */
.pf-v5-c-login__main-footer-band {
  text-align: center;
  color: #7a7a7a;
  font-size: 13.5px;
  margin-top: 24px;
}

/* Tighten the vertical gap between the last form group and the submit button */
#kc-form-buttons,
.pf-v5-c-form__actions {
  margin-top: 8px !important;
}

/* Reduce excess spacing between form groups */
.pf-v5-c-form__group {
  margin-bottom: 16px !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   Inline validation / error helper text
   ───────────────────────────────────────────────────────────────────────── */

/* Error helper text (below a field) */
.pf-v5-c-form__helper-text.pf-m-error,
[id^="input-error"] {
  display: block;
  font-size: 12.5px;
  color: #b91c1c;
  margin-top: 5px;
  font-weight: 500;
}

/* Red ring on invalid inputs */
.pf-v5-c-form-control[aria-invalid="true"] {
  box-shadow: inset 0 0 0 1px #f87171 !important;
}

.pf-v5-c-input-group:has(.pf-v5-c-form-control[aria-invalid="true"]) {
  box-shadow: inset 0 0 0 1px #f87171 !important;
}

/* Global alert banners (e.g. "Invalid credentials") */
.pf-v5-c-alert {
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

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

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

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

.pf-v5-c-alert.pf-m-info {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
}

.pf-v5-c-alert__icon {
  flex: 0 0 auto;
  margin-top: 1px;
}

.pf-v5-c-alert__title {
  font-weight: 600;
  font-size: 14px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Status pages — error.ftl / info.ftl / login-verify-email.ftl
   ───────────────────────────────────────────────────────────────────────── */

.cfh-status-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8px 0 4px;
  gap: 12px;
}

/* Colored icon circle */
.cfh-status-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin-bottom: 4px;
  flex-shrink: 0;
}

.cfh-status-icon--error {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

.cfh-status-icon--info {
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
}

.cfh-status-icon--email {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}

.cfh-status-message {
  font-size: 15px;
  color: var(--cfh-text);
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
  max-width: 100%;
  text-wrap: pretty;
}

.cfh-status-submessage {
  font-size: 13.5px;
  color: var(--cfh-text-secondary);
  line-height: 1.55;
  margin: 0;
  text-wrap: pretty;
}

.cfh-status-back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--cfh-primary);
  text-decoration: none;
  margin-top: 4px;
  transition: color 0.12s ease;
}

.cfh-status-back-link:hover {
  color: var(--cfh-primary-hover);
  text-decoration: underline;
}

.cfh-status-resend-link {
  display: inline-block;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--cfh-primary);
  text-decoration: none;
  margin-top: 4px;
}

.cfh-status-resend-link:hover {
  color: var(--cfh-primary-hover);
  text-decoration: underline;
}

.cfh-status-cta {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Required actions list on info.ftl */
.cfh-required-actions {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  color: var(--cfh-text-secondary);
  text-align: left;
  width: 100%;
}

.cfh-required-actions li {
  padding: 6px 0;
  border-bottom: 1px solid var(--cfh-card-border);
  display: flex;
  align-items: center;
  gap: 8px;
}

.cfh-required-actions li:last-child {
  border-bottom: none;
}

/* ─────────────────────────────────────────────────────────────────────────
   Register page — "back to login" footer note
   ───────────────────────────────────────────────────────────────────────── */

.cfh-form-footer {
  margin-top: 20px;
  text-align: center;
  font-size: 13.5px;
  color: var(--cfh-text-secondary);
  padding-top: 16px;
  border-top: 1px solid var(--cfh-card-border);
}

.cfh-form-footer a {
  color: var(--cfh-primary);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.12s ease;
}

.cfh-form-footer a:hover {
  color: var(--cfh-primary-hover);
  text-decoration: underline;
}

/* ─────────────────────────────────────────────────────────────────────────
   Cancel / secondary action button (used by login-update-password.ftl)
   ───────────────────────────────────────────────────────────────────────── */

#kc-form-buttons .pf-v5-c-button.pf-m-secondary + .pf-v5-c-button,
#kc-form-buttons button[name="cancel-aia"] {
  margin-top: 8px;
  width: 100%;
}

/* ─────────────────────────────────────────────────────────────────────────
   Register card — wider layout + 2-column field rows
   ─────────────────────────────────────────────────────────────────────────
   Uses :has(#kc-register-form) to scope the wider card exclusively to the
   registration page without adding any extra class to markup or template.
   Falls back to standard 30rem card on screens narrower than 640px.
   ───────────────────────────────────────────────────────────────────────── */

@media (min-width: 640px) {
  .pf-v5-c-login__main:has(#kc-register-form) {
    max-width: 44rem;
  }

  .pf-v5-c-login__container:has(#kc-register-form) {
    grid-template-columns: 44rem;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Organization picker — select-organization.ftl
   ─────────────────────────────────────────────────────────────────────────
   Keycloak renders the org list using its footer-link classes
   (pf-v5-c-login__main-footer-links), which by default look like small
   centered text links. Restyle them as full-width selection cards, matching
   the .cfh-social-button look used on the login page.
   ───────────────────────────────────────────────────────────────────────── */

#kc-user-organizations .pf-v5-c-login__main-footer-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  margin: 0;
  list-style: none;
}

#kc-user-organizations .pf-v5-c-login__main-footer-links > li {
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none;
}

#kc-user-organizations a.pf-v5-c-login__main-footer-links-item-link {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 7px 14px;
  background: #ffffff !important;
  color: var(--cfh-text) !important;
  border: 1px solid var(--cfh-input-border) !important;
  border-radius: 8px !important;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
  text-decoration: none !important;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

#kc-user-organizations a.pf-v5-c-login__main-footer-links-item-link:hover {
  background: #f4f4f5 !important;
  border-color: #d4d4d8 !important;
  color: var(--cfh-text) !important;
  text-decoration: none !important;
}

#kc-user-organizations a.pf-v5-c-login__main-footer-links-item-link > span {
  flex: 1;
  text-align: left;
}

/* Right-pointing chevron to signal "choose this org" */
#kc-user-organizations a.pf-v5-c-login__main-footer-links-item-link::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid var(--cfh-text-secondary);
  border-top: 2px solid var(--cfh-text-secondary);
  transform: rotate(45deg);
  flex: 0 0 auto;
  opacity: 0.7;
  transition: opacity 0.12s ease, border-color 0.12s ease;
}

#kc-user-organizations a.pf-v5-c-login__main-footer-links-item-link:hover::after {
  opacity: 1;
  border-color: var(--cfh-text);
}

/* On the select-organization page, tighten the gap between the readonly
   email row and the org list so the picker doesn't feel sparse. */
.pf-v5-c-form:has(#kc-user-organizations) > .pf-v5-c-form__group:first-child {
  margin-bottom: 4px !important;
}

.pf-v5-c-form:has(#kc-user-organizations) #kc-user-organizations {
  margin-bottom: 0 !important;
}

/* 2-column paired field rows (first/last name, password/confirm).
   Single column on mobile; activates grid above 640px. */
.cfh-field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

@media (min-width: 640px) {
  .cfh-field-row {
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
  }
}

/* On the wider register card, tighten the bottom margin on field-row children
   so paired groups sit at the same visual rhythm as full-width groups */
.cfh-field-row > .pf-v5-c-form__group {
  margin-bottom: 16px !important;
}