/* OraclePay Keycloak login theme — extends the base Keycloak theme with
   our design tokens. Inherits structure + form behaviour from `keycloak`
   parent theme; overrides only colours, typography, and minor layout. */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --paper:        #faf8f3;
  --paper-2:      #f4f1ea;
  --card:         #ffffff;
  --line:         #e6e1d4;
  --line-2:       #d8d2c1;
  --line-strong:  #b9b3a1;
  --ink:          #1f2420;
  --ink-2:        #3a4039;
  --ink-soft:     #6b716a;
  --ink-faint:    #98998f;
  --g-50:         #eef6f1;
  --g-100:        #dceee2;
  --g-200:        #b8dcc4;
  --g-500:        #3fa66a;
  --g-600:        #2f8a55;
  --g-700:        #236a42;
  --bad-bg:       #fbe8e2;
  --bad-fg:       #9a3923;
  --bad-line:     #ecc9bd;
  --r-2:          6px;
  --r-3:          8px;
  --r-4:          12px;
  --sans:         'Inter Tight', ui-sans-serif, system-ui, sans-serif;
  --mono:         'JetBrains Mono', ui-monospace, monospace;
}

/* ── page background ─────────────────────────────────────────────────────── */
body {
  background: var(--paper) !important;
  font-family: var(--sans) !important;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

.login-pf-page {
  background: var(--paper);
}

.login-pf-page .login-pf-page-header {
  display: none; /* default Keycloak header replaced by our brand */
}

/* ── center the card ─────────────────────────────────────────────────────── */
.login-pf body {
  background: var(--paper) !important;
}

#kc-container,
.login-pf-page .login-pf-page-content,
#kc-content,
#kc-content-wrapper {
  background: transparent;
  max-width: 420px;
  margin: 0 auto;
  padding: 0;
}

.card-pf {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  box-shadow: 0 1px 0 rgba(20, 30, 25, 0.04);
  padding: 36px 32px 28px;
  margin-top: 64px;
}

/* ── header / branding ───────────────────────────────────────────────────── */
#kc-header,
#kc-header-wrapper {
  font-family: var(--sans);
  color: var(--ink);
  background: transparent;
  padding: 0;
  margin: 0 0 8px 0;
  text-indent: 0;
  font-size: 0; /* hide default header text; brand mark below replaces */
}

#kc-header-wrapper::before {
  content: 'oraclepay';
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}

#kc-header-wrapper::after {
  content: '';
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--g-500);
  margin-left: -83px; /* sit before "oraclepay" */
  margin-right: 9px;
  vertical-align: middle;
  order: -1;
}

/* H1 / page title */
#kc-page-title,
.login-pf-header h1 {
  font-family: var(--sans);
  font-size: 18px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  letter-spacing: -0.01em;
  margin: 12px 0 6px !important;
  text-align: center;
}

/* Sub-text under title */
.subtitle,
#kc-info-message {
  color: var(--ink-soft);
  font-size: 13px;
  text-align: center;
  margin-bottom: 20px;
}

/* ── form fields ─────────────────────────────────────────────────────────── */
.form-group {
  margin-bottom: 14px !important;
}

.form-group .control-label,
label {
  font-family: var(--sans) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: var(--ink-2) !important;
  margin-bottom: 4px !important;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
.form-control,
.pf-c-form-control {
  background: var(--card) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: var(--r-2) !important;
  padding: 8px 10px !important;
  height: 36px !important;
  font-family: var(--sans) !important;
  font-size: 13px !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  transition: border-color 0.15s, box-shadow 0.15s;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
.form-control:focus,
.pf-c-form-control:focus {
  border-color: var(--g-500) !important;
  box-shadow: 0 0 0 3px var(--g-100) !important;
  outline: none !important;
}

/* ── primary button ──────────────────────────────────────────────────────── */
.btn-primary,
.pf-c-button.pf-m-primary,
input[type="submit"].btn-primary,
button[type="submit"] {
  background: var(--g-500) !important;
  border: 1px solid var(--g-600) !important;
  color: #ffffff !important;
  font-family: var(--sans) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 10px 14px !important;
  border-radius: var(--r-2) !important;
  height: auto !important;
  width: 100% !important;
  text-shadow: none !important;
  box-shadow: none !important;
  transition: background 0.1s;
}

.btn-primary:hover,
.pf-c-button.pf-m-primary:hover,
input[type="submit"].btn-primary:hover,
button[type="submit"]:hover {
  background: var(--g-600) !important;
  border-color: var(--g-700) !important;
}

/* secondary / link buttons */
.btn-default,
.pf-c-button.pf-m-secondary,
.btn-link,
a.zocial,
.zocial {
  background: var(--card) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--ink) !important;
  border-radius: var(--r-2) !important;
  font-family: var(--sans) !important;
  font-weight: 500 !important;
  font-size: 12.5px !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* ── links / "forgot password" / register ────────────────────────────────── */
a {
  color: var(--g-700) !important;
  font-weight: 500;
  text-decoration: none;
}
a:hover {
  color: var(--g-600) !important;
  text-decoration: underline;
}

#kc-form-options {
  font-size: 12px;
  margin-bottom: 14px;
}
#kc-form-options .checkbox label {
  color: var(--ink-2) !important;
  font-weight: 400 !important;
  font-size: 12.5px !important;
}

/* ── error / alert ───────────────────────────────────────────────────────── */
.alert,
.kc-feedback-text,
#kc-error-message,
.pf-c-alert {
  background: var(--bad-bg) !important;
  border: 1px solid var(--bad-line) !important;
  color: var(--bad-fg) !important;
  border-radius: var(--r-3) !important;
  padding: 10px 12px !important;
  font-size: 12.5px !important;
  margin-bottom: 14px !important;
}
.alert-success {
  background: var(--g-50) !important;
  border-color: var(--g-200) !important;
  color: var(--g-700) !important;
}

/* ── footer / language selector ──────────────────────────────────────────── */
#kc-locale {
  font-size: 11.5px;
  color: var(--ink-soft);
}

.login-pf-page .login-pf-signup,
#kc-registration {
  font-size: 12.5px;
  color: var(--ink-soft);
  text-align: center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/* ── numbers, codes (TOTP, NINO) — mono ──────────────────────────────────── */
.kc-totp-secret-key,
.kc-totp-supported-apps {
  font-family: var(--mono) !important;
}

input[name="totp"],
input[name="totpSecret"] {
  font-family: var(--mono) !important;
  letter-spacing: 0.05em;
}

/* hide default Keycloak page wrappers / dimmers */
.login-pf .login-pf-brand,
.login-pf-page .login-pf-page-header h1 {
  display: none;
}