/* ─────────────────────────────────────────
   Ordenova – Keycloak Login Theme v3
   Navy design system: #1A2A55 primary,
   #F7F5F0 bg, #B8894A accent, IBM Plex Sans
───────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
}

/* ── Base ── */
html, body {
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: #F7F5F0;
  color: #11172B;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ── Hide default header (realm name banner) ── */
#kc-header,
.login-pf-header {
  display: none;
}

/* ── Full-page centering ── */
.login-pf-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  background-color: #F7F5F0;
}

/* ──────────────────────────────────────────
   OUTER CARD
────────────────────────────────────────── */
.login-pf-page .card-pf {
  background: #ffffff;
  border: 1px solid #E3DED3;
  border-radius: 24px;
  box-shadow:
    0 1px 2px rgba(17, 23, 43, 0.04),
    0 8px 32px rgba(17, 23, 43, 0.08);
  padding: 48px 44px 40px;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  position: relative;
}

/* ── Strip card styles from ALL inner wrappers ── */
#kc-content,
#kc-content-wrapper,
#kc-form,
#kc-form-wrapper,
#kc-container-wrapper {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* ──────────────────────────────────────────
   LOGO / BRAND
────────────────────────────────────────── */
.login-pf-page .card-pf::before {
  content: 'Ordenova';
  display: block;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  color: #1A2A55;
  letter-spacing: -0.5px;
  margin-bottom: 32px;
}

/* ── Page title ── */
#kc-page-title {
  font-size: 18px;
  font-weight: 600;
  color: #11172B;
  text-align: center;
  margin: 0 0 28px;
  letter-spacing: -0.2px;
  line-height: 1.4;
}

/* ── Form labels ── */
.form-group label,
#kc-form label {
  font-size: 13px;
  font-weight: 500;
  color: #2A3347;
  margin-bottom: 7px;
  display: block;
  letter-spacing: 0.1px;
}

/* ── Form group spacing ── */
.form-group {
  margin-bottom: 16px;
  position: relative;
}

/* ── Inputs ── */
.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="email"],
#kc-form input[type="text"],
#kc-form input[type="password"],
#kc-form input[type="email"] {
  display: block;
  width: 100%;
  height: 46px;
  border: 1.5px solid #E3DED3;
  border-radius: 12px;
  padding: 0 14px;
  font-size: 14px;
  font-family: inherit;
  color: #11172B;
  background: #F7F5F0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

.form-group input:focus,
#kc-form input:focus {
  border-color: #1A2A55;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(26, 42, 85, 0.12);
}

.form-group input::placeholder,
#kc-form input::placeholder {
  color: #6B7487;
}

/* ── Password wrapper (eye icon container) ── */
/* Keycloak markup variants:
     pf-v5-c-input-group / pf-c-input-group / input-group / password-wrapper.
   Force the wrapper to behave as a positioning context spanning 100% width
   so the absolute eye button can overlap the input. */
.pf-v5-c-input-group,
.pf-c-input-group,
.input-group,
.password-wrapper {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.pf-v5-c-input-group > input,
.pf-c-input-group > input,
.input-group > input,
.password-wrapper > input {
  display: block;
  width: 100% !important;
  padding-right: 52px !important;
  border: 1.5px solid #E3DED3 !important;
  border-radius: 12px !important;
  background: #F7F5F0 !important;
}

.pf-v5-c-input-group > input:focus,
.pf-c-input-group > input:focus,
.input-group > input:focus,
.password-wrapper > input:focus {
  border-color: #1A2A55 !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(26, 42, 85, 0.12) !important;
}

/* Eye toggle button — absolutely positioned inside the input box */
.pf-v5-c-input-group > button,
.pf-v5-c-input-group .pf-v5-c-button,
.pf-c-input-group > button,
.input-group > button,
.password-wrapper > button,
.pf-v5-c-button.pf-m-control,
.kc-password-toggle,
button[aria-label*="password" i],
button[aria-label*="passwort" i],
button[aria-label*="visibility" i],
button[aria-label*="mostra" i],
button[aria-label*="show" i],
button[aria-label*="hide" i] {
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer;
  color: #6B7487 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, background-color 0.15s ease;
  outline: none;
  flex-shrink: 0;
  box-shadow: none !important;
  z-index: 2;
}

.pf-v5-c-input-group > button:hover,
.pf-v5-c-input-group .pf-v5-c-button:hover,
.pf-c-input-group > button:hover,
.input-group > button:hover,
.password-wrapper > button:hover,
.pf-v5-c-button.pf-m-control:hover,
button[aria-label*="password" i]:hover,
button[aria-label*="visibility" i]:hover,
button[aria-label*="show" i]:hover,
button[aria-label*="hide" i]:hover {
  color: #1A2A55 !important;
  background: rgba(26, 42, 85, 0.08) !important;
}

.pf-v5-c-input-group > button:focus-visible,
.pf-v5-c-input-group .pf-v5-c-button:focus-visible,
.pf-v5-c-button.pf-m-control:focus-visible,
button[aria-label*="password" i]:focus-visible {
  box-shadow: 0 0 0 2px rgba(26, 42, 85, 0.25) !important;
  color: #1A2A55 !important;
}

.pf-v5-c-input-group > button svg,
.pf-v5-c-input-group .pf-v5-c-button svg,
.pf-c-input-group > button svg,
.input-group > button svg,
.password-wrapper > button svg,
.pf-v5-c-button.pf-m-control svg,
button[aria-label*="password" i] svg,
button[aria-label*="visibility" i] svg,
button[aria-label*="show" i] svg,
button[aria-label*="hide" i] svg,
button[aria-label*="password" i] i,
button[aria-label*="password" i] .fa {
  width: 18px;
  height: 18px;
  font-size: 18px;
  line-height: 1;
  pointer-events: none;
  color: inherit !important;
}

/* ── Options row (remember me + forgot) ── */
#kc-form-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 6px 0 24px;
  flex-wrap: wrap;
}

/* Strip PatternFly/Bootstrap .checkbox absolute positioning that pulls the
   input outside its container and clips the label. */
#kc-form-options .checkbox,
#kc-form-options > div:first-child,
#kc-form-options > span:first-child {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0;
  position: static;
}

#kc-form-options .checkbox label,
#kc-form-options label[for="rememberMe"] {
  font-size: 13px;
  color: #6B7487;
  font-weight: 400;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: static;
}

#kc-form-options .checkbox input[type="checkbox"],
#rememberMe {
  position: static !important;
  width: 16px;
  height: 16px;
  accent-color: #1A2A55;
  cursor: pointer;
  margin: 0 !important;
  flex-shrink: 0;
}

/* ── Forgot password link ── */
#kc-form-options a {
  color: #1A2A55;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: opacity 0.15s;
}

#kc-form-options a:hover {
  opacity: 0.7;
  text-decoration: underline;
}

/* ── Primary CTA button ── */
#kc-login,
#kc-form-buttons input[type="submit"],
.btn-primary {
  display: block;
  width: 100%;
  height: 48px;
  background-color: #1A2A55;
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: 0.1px;
  transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
  box-shadow: 0 2px 8px rgba(26, 42, 85, 0.28), 0 1px 2px rgba(26, 42, 85, 0.15);
  margin-top: 4px;
}

#kc-login:hover,
#kc-form-buttons input[type="submit"]:hover,
.btn-primary:hover {
  background-color: #243A75;
  box-shadow: 0 4px 16px rgba(26, 42, 85, 0.38), 0 1px 4px rgba(26, 42, 85, 0.2);
}

#kc-login:active,
#kc-form-buttons input[type="submit"]:active {
  transform: scale(0.99);
  background-color: #1a2d5c;
  box-shadow: 0 2px 6px rgba(26, 42, 85, 0.2);
}

/* ── Alert messages ── */
.alert {
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 13px;
  margin-bottom: 18px;
  border: none;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.5;
}

.alert-error  { background-color: #FFF2F1; color: #B91C1C; border-left: 3px solid #EF4444; }
.alert-warning{ background-color: #FDF2E6; color: #B06B1F; border-left: 3px solid #B06B1F; }
.alert-success{ background-color: #E8F4EC; color: #3E6B4C; border-left: 3px solid #3E6B4C; }
.alert-info   { background-color: #EEF0F7; color: #1A2A55; border-left: 3px solid #1A2A55; }

.pf-v5-c-alert__title,
.kc-feedback-text {
  font-size: 13px;
  font-weight: 500;
}

/* Hide PatternFly alert icons */
.pf-v5-c-alert__icon { display: none; }

/* ── Divider ── */
#kc-social-providers h5 {
  text-align: center;
  color: #6B7487;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin: 28px 0 20px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}

#kc-social-providers h5::before,
#kc-social-providers h5::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #E3DED3;
}

/* ── Social / IdP buttons ── */
#kc-social-providers ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#kc-social-providers li a,
#kc-social-providers .pf-c-button,
#kc-social-providers .zocial {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 46px;
  border: 1.5px solid #E3DED3;
  border-radius: 12px;
  background: #ffffff;
  color: #11172B;
  font-size: 14px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s, background-color 0.15s;
}

#kc-social-providers li a:hover,
#kc-social-providers .pf-c-button:hover {
  border-color: #1A2A55;
  background-color: #F7F5F0;
}

/* ── Register / back links ── */
#kc-registration,
#kc-registration-container {
  text-align: center;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #E3DED3;
  font-size: 13px;
  color: #6B7487;
}

#kc-registration a,
#kc-registration-container a {
  color: #1A2A55;
  font-weight: 600;
  text-decoration: none;
}

#kc-registration a:hover,
#kc-registration-container a:hover {
  text-decoration: underline;
}

/* ── Info / back links ── */
#kc-info {
  text-align: center;
  margin-top: 20px;
  font-size: 13px;
  color: #6B7487;
}

#kc-info a {
  color: #1A2A55;
  font-weight: 500;
  text-decoration: none;
}

/* ──────────────────────────────────────────
   LANGUAGE SWITCHER (top-right dropdown)
────────────────────────────────────────── */
#kc-locale {
  position: absolute;
  top: 20px;
  right: 24px;
  z-index: 5;
}

#kc-locale-wrapper {
  position: static;
}

#kc-current-locale-link,
#kc-locale .kc-dropdown > a,
#kc-locale-dropdown > button,
#kc-locale-dropdown > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid #E3DED3;
  border-radius: 999px;
  background: #ffffff;
  color: #1A2A55;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
  line-height: 1;
}

#kc-current-locale-link:hover,
#kc-locale-dropdown > button:hover,
#kc-locale-dropdown > a:hover {
  border-color: #1A2A55;
  background: #EEF0F7;
}

#kc-current-locale-link::after,
#kc-locale-dropdown > button::after,
#kc-locale-dropdown > a::after {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 1.5px solid #1A2A55;
  border-bottom: 1.5px solid #1A2A55;
  transform: rotate(45deg) translateY(-2px);
  margin-left: 2px;
}

#kc-locale ul,
#kc-locale-dropdown ul,
.kc-dropdown-menu {
  list-style: none;
  margin: 6px 0 0;
  padding: 6px;
  background: #ffffff;
  border: 1px solid #E3DED3;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(17, 23, 43, 0.10);
  min-width: 180px;
  position: absolute;
  right: 0;
  top: 100%;
  display: none !important;
  z-index: 20;
}

/* Show when Keycloak JS sets aria-expanded="true" on the button */
#kc-locale-dropdown button[aria-expanded="true"] ~ ul,
#kc-locale-dropdown button[aria-expanded="true"] + ul {
  display: block !important;
}

/* CSS-only fallback: hover / focus-within */
#kc-locale-dropdown:hover ul,
#kc-locale-dropdown:focus-within ul,
#kc-locale-dropdown.active ul,
.kc-dropdown:hover .kc-dropdown-menu,
.kc-dropdown:focus-within .kc-dropdown-menu,
.kc-dropdown.active .kc-dropdown-menu {
  display: block !important;
}

#kc-locale .kc-dropdown,
#kc-locale-dropdown {
  position: relative;
}

#kc-locale ul li,
#kc-locale-dropdown ul li,
.kc-dropdown-menu li {
  margin: 0;
}

#kc-locale ul li a,
#kc-locale-dropdown ul li a,
.kc-dropdown-menu li a {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  color: #11172B;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.1s ease, color 0.1s ease;
}

#kc-locale ul li a:hover,
#kc-locale-dropdown ul li a:hover,
.kc-dropdown-menu li a:hover {
  background: #EEF0F7;
  color: #1A2A55;
}

/* ──────────────────────────────────────────
   SELECTS (generic — used by language picker fallback, etc.)
────────────────────────────────────────── */
.form-group select,
#kc-form select,
select.form-control {
  display: block;
  width: 100%;
  height: 46px;
  border: 1.5px solid #E3DED3;
  border-radius: 12px;
  padding: 0 36px 0 14px;
  font-size: 14px;
  font-family: inherit;
  color: #11172B;
  background: #F7F5F0
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%231A2A55' stroke-width='2'><path d='M1 1l5 5 5-5'/></svg>")
    no-repeat right 14px center / 12px 8px;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
}

.form-group select:focus,
#kc-form select:focus {
  border-color: #1A2A55;
  background-color: #ffffff;
  box-shadow: 0 0 0 3px rgba(26, 42, 85, 0.12);
}

/* ──────────────────────────────────────────
   INSTRUCTION / SUBTITLE TEXT
────────────────────────────────────────── */
#kc-page-subtitle,
.instruction,
.kc-feedback-text,
.pf-v5-c-form__helper-text {
  font-size: 13px;
  color: #4A5168;
  line-height: 1.55;
  margin: -8px 0 20px;
}

/* ──────────────────────────────────────────
   GENERIC CHECKBOX (logout-other-sessions, etc.)
────────────────────────────────────────── */
#kc-form input[type="checkbox"],
.checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #1A2A55;
  cursor: pointer;
  margin: 0 8px 0 0;
  vertical-align: middle;
}

#kc-form label.checkbox-label,
#kc-form .checkbox label,
label[for="logout-sessions"] {
  font-size: 13px;
  color: #4A5168;
  font-weight: 400;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ──────────────────────────────────────────
   BACK / CANCEL secondary link buttons
────────────────────────────────────────── */
#kc-form-buttons {
  margin-top: 4px;
}

#kc-form-buttons input[type="submit"][name="cancel-aia"],
#kc-cancel,
.btn-default {
  display: block;
  width: 100%;
  height: 44px;
  background: #ffffff;
  color: #1A2A55;
  border: 1.5px solid #E3DED3;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  margin-top: 10px;
  transition: border-color 0.15s, background-color 0.15s;
}

#kc-form-buttons input[type="submit"][name="cancel-aia"]:hover,
#kc-cancel:hover,
.btn-default:hover {
  border-color: #1A2A55;
  background: #F7F5F0;
}

/* ──────────────────────────────────────────
   PASSWORD STRENGTH / POLICY HINT
────────────────────────────────────────── */
#input-error,
.pf-v5-c-form__helper-text-icon ~ span,
.error-message {
  font-size: 12px;
  color: #B91C1C;
  margin-top: 6px;
  display: block;
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .login-pf-page .card-pf {
    padding: 36px 24px 32px;
    border-radius: 20px;
  }

  .login-pf-page {
    padding: 16px;
    align-items: flex-start;
    padding-top: 40px;
  }
}