/* ═══════════════════════════════════════════════════════
   StayVerse Keycloak Login Theme
   Brand: Deep Teal (#0C4A5E) + Warm Copper (#C48B3F)
          on Warm Cream (#F5F1EB)
   Fonts: DM Sans (body), Encode Sans Expanded (headings)
   Radius: 8px (buttons, inputs), 16px (cards)
   ═══════════════════════════════════════════════════════ */

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

/* ── CSS variables (match frontend globals.css) ──────── */
:root {
  --sv-teal: #0C4A5E;
  --sv-teal-light: #14627A;
  --sv-teal-dark: #083A4A;
  --sv-teal-50: #E8F4F8;
  --sv-copper: #C48B3F;
  --sv-copper-dark: #A67330;
  --sv-cream: #F5F1EB;
  --sv-cream-soft: #F9F7F3;
  --sv-cream-card: #EDE7DC;
  --sv-cream-card-hover: #E5DDD1;
  --sv-ink: #2D3436;
  --sv-ink-muted: #636E72;
  --sv-ink-subtle: #95A5A6;
  --sv-white: #FFFFFF;
  --sv-radius-button: 8px;
  --sv-radius-input: 8px;
  --sv-radius-card: 16px;
  --sv-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --sv-font-heading: 'Encode Sans Expanded', sans-serif;
}

/* ── Page background ──────────────────────────────────── */
body,
.login-pf {
  background: var(--sv-cream) !important;
  font-family: var(--sv-font-body) !important;
  color: var(--sv-ink) !important;
}

.login-pf body {
  background: var(--sv-cream) !important;
}

/* ── Outer page wrapper — center vertically ──────────── */
.login-pf-page {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  padding: 0 16px !important;
}

/* ── Login-pf-signup (registration link below card) ──── */
#kc-info,
#kc-info.login-pf-signup {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  max-width: 440px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

#kc-info-wrapper,
#kc-registration-container,
#kc-registration {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ── Card container ──────────────────────────────────── */
#kc-content-wrapper {
  margin-top: 0;
}

.card-pf {
  background: var(--sv-white) !important;
  border: 1px solid var(--sv-cream-card) !important;
  border-radius: var(--sv-radius-card) !important;
  box-shadow: 0 4px 24px rgba(12, 74, 94, 0.08) !important;
  max-width: 440px !important;
  margin: 0 auto !important;
  padding: 40px 36px !important;
}

/* ── Header / Logo area ──────────────────────────────── */
#kc-header-wrapper {
  font-family: var(--sv-font-heading) !important;
  color: var(--sv-teal) !important;
  font-size: 0 !important;
  padding: 48px 0 20px !important;
  text-align: center !important;
}

#kc-header-wrapper::before {
  content: '';
  display: block;
  width: 180px;
  height: 58px;
  margin: 0 auto 12px;
  background: url('../img/logo.webp') center/contain no-repeat;
}

#kc-header-wrapper::after {
  content: none !important;
}

/* ── Page title (Sign In, Create Account, etc.) ──────── */
#kc-page-title {
  font-family: var(--sv-font-heading) !important;
  color: var(--sv-teal) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 20px !important;
  text-align: center !important;
}

/* ── Required fields subtitle ────────────────────────── */
.subtitle {
  font-size: 13px !important;
  color: var(--sv-ink-muted) !important;
  margin-bottom: 16px !important;
}

.subtitle .required {
  color: #E74C3C !important;
  font-weight: 600 !important;
}

/* ── Form groups — tighter spacing ───────────────────── */
.form-group {
  margin-bottom: 16px !important;
}

.form-group .col-xs-12,
.form-group .col-sm-12,
.form-group .col-md-12,
.form-group .col-lg-12 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ── Form labels ──────────────────────────────────────── */
.login-pf .control-label,
.login-pf label,
.pf-c-form__label,
.pf-c-form__label-text {
  font-family: var(--sv-font-body) !important;
  color: var(--sv-ink) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  margin-bottom: 6px !important;
  display: inline !important;
}

/* ── Form inputs ─────────────────────────────────────── */
.login-pf .form-control,
.login-pf input[type="text"],
.login-pf input[type="password"],
.login-pf input[type="email"],
.pf-c-form-control {
  font-family: var(--sv-font-body) !important;
  background: var(--sv-cream-soft) !important;
  border: 1px solid var(--sv-cream-card) !important;
  border-radius: var(--sv-radius-input) !important;
  padding: 12px 16px !important;
  font-size: 15px !important;
  color: var(--sv-ink) !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  height: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.login-pf .form-control:focus,
.login-pf input:focus,
.pf-c-form-control:focus {
  border-color: var(--sv-teal) !important;
  box-shadow: 0 0 0 3px rgba(12, 74, 94, 0.1) !important;
  outline: none !important;
  background: var(--sv-white) !important;
}

/* ── Password input group (input + show/hide button) ─── */
.pf-c-input-group {
  display: flex !important;
  align-items: stretch !important;
}

.pf-c-input-group .pf-c-form-control {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: none !important;
  flex: 1 !important;
}

.pf-c-input-group .pf-c-button.pf-m-control {
  background: var(--sv-cream-soft) !important;
  border: 1px solid var(--sv-cream-card) !important;
  border-left: none !important;
  border-top-right-radius: var(--sv-radius-input) !important;
  border-bottom-right-radius: var(--sv-radius-input) !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  padding: 0 14px !important;
  color: var(--sv-ink-muted) !important;
  cursor: pointer !important;
  transition: color 0.2s, background 0.2s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 44px !important;
}

.pf-c-input-group .pf-c-button.pf-m-control:hover {
  color: var(--sv-teal) !important;
  background: var(--sv-cream-card) !important;
}

.pf-c-input-group .pf-c-form-control:focus ~ .pf-c-button.pf-m-control,
.pf-c-input-group:focus-within .pf-c-button.pf-m-control {
  border-color: var(--sv-teal) !important;
  background: var(--sv-white) !important;
}

/* ── Primary button (Sign In / Register) ──────────────── */
.login-pf .btn-primary,
.login-pf input[type="submit"],
.pf-c-button.pf-m-primary,
#kc-login,
#kc-register {
  font-family: var(--sv-font-heading) !important;
  background: var(--sv-teal) !important;
  border: none !important;
  border-radius: var(--sv-radius-button) !important;
  padding: 14px 24px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--sv-white) !important;
  cursor: pointer !important;
  transition: background 0.2s, transform 0.1s !important;
  width: 100% !important;
  margin-top: 8px !important;
}

.login-pf .btn-primary:hover,
.login-pf input[type="submit"]:hover,
.pf-c-button.pf-m-primary:hover,
#kc-login:hover,
#kc-register:hover {
  background: var(--sv-teal-light) !important;
  transform: translateY(-1px) !important;
}

.login-pf .btn-primary:active,
.login-pf input[type="submit"]:active,
.pf-c-button.pf-m-primary:active {
  background: var(--sv-teal-dark) !important;
  transform: translateY(0) !important;
}

/* ── Secondary / link buttons ─────────────────────────── */
.login-pf .btn-default {
  font-family: var(--sv-font-body) !important;
  background: transparent !important;
  border: 1px solid var(--sv-cream-card) !important;
  border-radius: var(--sv-radius-button) !important;
  color: var(--sv-teal) !important;
  font-weight: 500 !important;
  padding: 12px 24px !important;
}

.login-pf .btn-default:hover {
  background: var(--sv-cream) !important;
  border-color: var(--sv-teal) !important;
}

/* ── Links ───────────────────────────────────────────── */
.login-pf a,
.login-pf a:link,
.login-pf a:visited {
  color: var(--sv-copper) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

.login-pf a:hover {
  color: var(--sv-copper-dark) !important;
  text-decoration: underline !important;
}

/* ── "Back to Login" link ────────────────────────────── */
#kc-form-options {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

#kc-form-options a {
  font-size: 14px !important;
  color: var(--sv-copper) !important;
}

/* ── "No account? Register" / "Have account? Login" ──── */
#kc-registration {
  margin-top: 24px !important;
  text-align: center !important;
}

#kc-registration span {
  color: var(--sv-ink-muted) !important;
  font-size: 14px !important;
}

/* ── Social login buttons ─────────────────────────────── */
#kc-social-providers {
  margin-top: 24px !important;
}

#kc-social-providers ul {
  list-style: none !important;
  padding: 0 !important;
}

#kc-social-providers li {
  margin-bottom: 8px !important;
}

#kc-social-providers a {
  display: block !important;
  background: var(--sv-cream-soft) !important;
  border: 1px solid var(--sv-cream-card) !important;
  border-radius: var(--sv-radius-button) !important;
  padding: 12px !important;
  text-align: center !important;
  font-weight: 500 !important;
  color: var(--sv-ink) !important;
  transition: background 0.2s !important;
}

#kc-social-providers a:hover {
  background: var(--sv-cream-card) !important;
  text-decoration: none !important;
}

/* ── Divider ("or") ───────────────────────────────────── */
#kc-social-providers::before {
  content: '';
  display: block;
  border-top: 1px solid var(--sv-cream-card);
  margin-bottom: 16px;
}

/* ── Alert / error messages ──────────────────────────── */
.alert {
  border-radius: var(--sv-radius-button) !important;
  font-family: var(--sv-font-body) !important;
  font-size: 14px !important;
  padding: 12px 16px !important;
  margin-bottom: 16px !important;
}

.alert-error,
.alert-danger {
  background: #FDECEB !important;
  border: 1px solid #E74C3C !important;
  color: #C0392B !important;
}

.alert-success {
  background: #E8F8EE !important;
  border: 1px solid #27AE60 !important;
  color: #1E8449 !important;
}

.alert-warning {
  background: #FEF5E7 !important;
  border: 1px solid #F39C12 !important;
  color: #D68910 !important;
}

.alert-info {
  background: var(--sv-teal-50) !important;
  border: 1px solid #3D96AD !important;
  color: var(--sv-teal) !important;
}

/* ── Checkbox / remember me ──────────────────────────── */
.login-pf .checkbox label,
.login-pf .checkbox-inline {
  color: var(--sv-ink-muted) !important;
  font-size: 13px !important;
}

.login-pf input[type="checkbox"] {
  accent-color: var(--sv-teal) !important;
}

/* ── Footer powered by Keycloak — hide ───────────────── */
#kc-info-wrapper {
  margin-top: 24px !important;
}

.login-pf-page .login-pf-footer {
  display: none !important;
}

/* ── Locale switcher ─────────────────────────────────── */
#kc-locale {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
}

#kc-locale button,
#kc-locale a,
#kc-locale .kc-dropdown a {
  color: var(--sv-ink-muted) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  font-family: var(--sv-font-body) !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
}

#kc-locale button:hover,
#kc-locale .kc-dropdown-item a:hover {
  color: var(--sv-teal) !important;
}

/* Locale dropdown menu - hidden by default */
#kc-locale .pf-c-dropdown__menu,
#kc-locale ul[role="menu"] {
  display: none !important;
  position: absolute !important;
  right: 0 !important;
  top: 100% !important;
  margin-top: 4px !important;
  z-index: 100 !important;
  background: var(--sv-white) !important;
  border: 1px solid var(--sv-cream-card) !important;
  border-radius: var(--sv-radius-button) !important;
  box-shadow: 0 4px 16px rgba(12, 74, 94, 0.12) !important;
  padding: 4px 0 !important;
  min-width: 120px !important;
}

#kc-locale .pf-c-dropdown__menu-item {
  font-family: var(--sv-font-body) !important;
  font-size: 13px !important;
  color: var(--sv-ink) !important;
  padding: 8px 16px !important;
  transition: background 0.15s !important;
}

#kc-locale .pf-c-dropdown__menu-item:hover {
  background: var(--sv-cream-soft) !important;
  color: var(--sv-teal) !important;
  text-decoration: none !important;
}

/* Show menu when expanded — relies on Keycloak's menu-button-links.js
   which toggles aria-expanded on the button. Use :has() so we match
   the menu when its sibling button is expanded. */
#kc-locale-dropdown:has(button[aria-expanded="true"]) ul[role="menu"],
#kc-locale-dropdown:has(button[aria-expanded="true"]) .pf-c-dropdown__menu {
  display: block !important;
}

/* ── Forgot password link ─────────────────────────────── */
.login-pf-forgottenPassword {
  text-align: right !important;
  margin-top: -4px !important;
  margin-bottom: 16px !important;
}

.login-pf-forgottenPassword a {
  font-size: 13px !important;
}

/* ── Form buttons row (register page) ────────────────── */
#kc-form-buttons {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-top: 8px !important;
}

#kc-form-buttons input[type="submit"] {
  margin-top: 0 !important;
}

/* ── Header login-pf-header (inside card) ─────────────── */
.login-pf-header {
  margin-bottom: 16px !important;
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 480px) {
  .card-pf {
    margin: 0 !important;
    padding: 32px 24px !important;
    border-radius: 12px !important;
  }

  #kc-header-wrapper {
    padding: 32px 0 16px !important;
  }

  #kc-header-wrapper::before {
    width: 140px;
    height: 45px;
  }

  #kc-page-title {
    font-size: 18px !important;
  }
}

/* ── OTP / 2FA input ──────────────────────────────────��� */
.login-pf .otp-input {
  font-family: 'DM Sans', monospace !important;
  letter-spacing: 0.3em !important;
  font-size: 24px !important;
  text-align: center !important;
}

/* ── Terms and conditions page ────────────────────────── */
#kc-terms-text {
  font-family: var(--sv-font-body) !important;
  color: var(--sv-ink) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  max-height: 300px !important;
  overflow-y: auto !important;
  padding: 16px !important;
  background: var(--sv-cream-soft) !important;
  border-radius: var(--sv-radius-button) !important;
  margin-bottom: 24px !important;
}

/* ── PF grid reset — full width form on all screens ──── */
.login-pf .col-xs-12,
.login-pf .col-sm-12,
.login-pf .col-md-10,
.login-pf .col-lg-12 {
  width: 100% !important;
  float: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.login-pf .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ── Hide Keycloak default header bg ──────────────────── */
.login-pf-page-header {
  background: none !important;
  width: 100% !important;
  max-width: 440px !important;
}

/* Ensure header wrapper is visible and contains logo */
#kc-header {
  background: none !important;
  min-height: auto !important;
}

#kc-header-wrapper {
  visibility: visible !important;
  overflow: visible !important;
  min-height: 58px !important;
  position: relative !important;
}

/* ── Form horizontal reset ────────────────────────────── */
.form-horizontal .form-group {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ── Aria invalid state ───────────────────────────────── */
.pf-c-form-control[aria-invalid="true"],
.form-control[aria-invalid="true"],
input[aria-invalid="true"] {
  border-color: #E74C3C !important;
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1) !important;
}

/* ── Select dropdown ──────────────────────────────────── */
.login-pf select,
.login-pf select.form-control {
  font-family: var(--sv-font-body) !important;
  background: var(--sv-cream-soft) !important;
  border: 1px solid var(--sv-cream-card) !important;
  border-radius: var(--sv-radius-input) !important;
  padding: 12px 16px !important;
  font-size: 15px !important;
  color: var(--sv-ink) !important;
  height: auto !important;
}

/* ── Update profile / additional forms ────────────────── */
#kc-update-profile-form,
#kc-totp-settings-form,
#kc-verify-profile-form,
#kc-passwd-update-form {
  width: 100% !important;
}

#kc-update-profile-form .form-group,
#kc-totp-settings-form .form-group,
#kc-verify-profile-form .form-group,
#kc-passwd-update-form .form-group {
  margin-bottom: 16px !important;
}

/* ── Card body always full width (overrides PF md/lg-10) */
.login-pf .col-md-10 {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ── Form errors (red exclamation icons + messages) ─── */
.kc-feedback-text,
.pf-c-form__helper-text.pf-m-error,
.pf-c-form__helper-text--error,
.pf-c-form-control[aria-invalid="true"] + .pf-c-form__helper-text {
  color: #C0392B !important;
  font-family: var(--sv-font-body) !important;
  font-size: 13px !important;
  margin-top: 4px !important;
}

/* Password update / TOTP / verify-profile titles */
#kc-info-message {
  font-family: var(--sv-font-body) !important;
  color: var(--sv-ink) !important;
}

/* ── Submit buttons on update-profile / verify pages ── */
.pf-c-button.pf-m-primary.pf-m-block {
  display: block !important;
  width: 100% !important;
}

/* ── Suppress PF form-horizontal causing weird layouts */
.form-horizontal {
  display: block !important;
}

.form-horizontal .control-label {
  text-align: left !important;
  padding-top: 0 !important;
}

/* ── Fix Font Awesome eye icon (not loading) ─────────── */
.pf-c-button.pf-m-control .fa {
  font-family: inherit !important;
  font-style: normal !important;
  font-size: 0 !important;
}

.pf-c-button.pf-m-control .fa::before {
  font-size: 16px !important;
}

.pf-c-button.pf-m-control .fa-eye::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23636E72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") !important;
}

.pf-c-button.pf-m-control .fa-eye-slash::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23636E72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E") !important;
}

/* ── Required asterisk inline with label ──────────────── */
.form-group .col-xs-12:first-child {
  font-size: 14px !important;
  color: #E74C3C !important;
  font-weight: 500 !important;
}