/* ==========================================================================
   SMS Hub — Keycloak login theme
   All visual styling lives here; markup classes from PatternFly are neutralised.
   ========================================================================== */

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

:root {
  --sms-navy:        #0f3361;
  --sms-cyan:        #6fc0ec;
  --sms-btn:         #4ea6d6;
  --sms-btn-hover:   #5cb0dd;
  --sms-bg:          #eaf3fb;
  --sms-placeholder: #9fc0e2;
  --sms-muted:       #9fc0e2;
  --sms-idp-text:    #cfe6f6;
}

/* ---- Reset / page ------------------------------------------------------- */
html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

body,
body.login-pf,
.login-pf body {
  font-family: "Archivo", -apple-system, "Segoe UI", sans-serif;
  background: var(--sms-bg) url("../img/bubbles.svg") center / cover no-repeat fixed !important;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  box-sizing: border-box;
  color: #fff;
}

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

/* Kill the stock PatternFly header chrome (but keep our body background) */
#kc-header,
#kc-header-wrapper,
.login-pf-page-header,
#kc-locale { display: none !important; }

/* ---- Card --------------------------------------------------------------- */
.login-pf-page,
#kc-container,
#kc-container-wrapper {
  width: auto;
  background: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

#kc-content,
#kc-content-wrapper { width: 100%; }

.card-pf,
#kc-content-wrapper > .card-pf {
  width: 340px;
  max-width: 100%;
  margin: 0 auto;
  padding: 34px 32px 30px;
  border: none;
  border-radius: 14px;
  background-color: var(--sms-navy);
  background-image: radial-gradient(120% 90% at 50% 0%, #18467e 0%, #0f3361 60%, #0c2a52 100%);
  box-shadow: 0 18px 44px rgba(8, 30, 60, .45);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---- Brand / logo block ------------------------------------------------- */
.sms-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sms-brand .sms-globe {
  display: block;
  height: 58px;
  width: auto;
  overflow: visible;
}

.sms-word {
  display: flex;
  align-items: baseline;
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -0.6px;
  line-height: 1;
}
.sms-word .sms-gap { width: 6px; }
.sms-word .sms-w-white { color: #fff; }
.sms-word .sms-w-cyan  { color: var(--sms-cyan); }

/* ---- Heading ------------------------------------------------------------ */
#kc-page-title,
.sms-title {
  width: 100%;
  text-align: center;
  font-size: 19px;
  font-weight: 800;
  color: #fff;
  margin: 18px 0 0;
  line-height: 1.25;
}

/* ---- Form scaffolding --------------------------------------------------- */
#kc-form,
#kc-form-wrapper,
form#kc-form-login,
form#kc-otp-login-form,
form#kc-reset-password-form,
form { width: 100%; }

.form-group,
.${kcFormGroupClass},
fieldset { margin: 0; padding: 0; border: 0; }

/* Hide Keycloak field labels — design uses placeholders only */
#kc-form-login label[for="username"],
#kc-form-login label[for="password"] {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---- Inputs ------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
.sms-field {
  width: 100%;
  height: 42px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .16);
  padding: 0 14px;
  color: #fff;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}

input::placeholder,
.sms-field::placeholder { color: var(--sms-placeholder); }

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus {
  border-color: rgba(111, 192, 236, .55);
  background: rgba(255, 255, 255, .13);
}

#username { margin-top: 24px; }
#password { margin-top: 14px; }

/* Autofill clean-up */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0px 1000px rgba(20, 50, 90, .9) inset;
  caret-color: #fff;
}

/* ---- Forgot password ---------------------------------------------------- */
#kc-form-options,
.sms-forgot {
  width: 100%;
  text-align: right;
  margin-top: 10px;
}
.sms-forgot a,
#kc-form-options a {
  font-size: 12px;
  color: var(--sms-cyan);
  text-decoration: none;
}
.sms-forgot a:hover { text-decoration: underline; }

/* ---- Remember-me (if enabled) ------------------------------------------- */
#kc-form-options .checkbox,
.sms-remember {
  text-align: left;
  font-size: 12px;
  color: var(--sms-muted);
  margin-top: 10px;
}
.sms-remember label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

/* ---- Submit button ------------------------------------------------------ */
#kc-form-buttons { width: 100%; margin: 0; }

input[type="submit"],
button[type="submit"],
#kc-login,
.sms-btn {
  width: 100%;
  height: 44px;
  margin-top: 16px;
  border: none;
  border-radius: 8px;
  background: var(--sms-btn);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(78, 166, 214, .30);
}
input[type="submit"]:hover,
button[type="submit"]:hover,
#kc-login:hover,
.sms-btn:hover { background: var(--sms-btn-hover); }

/* ---- Divider + social --------------------------------------------------- */
#kc-social-providers { width: 100%; }

.sms-rule,
#kc-social-providers hr {
  width: 100%;
  height: 1px;
  border: 0;
  background: rgba(255, 255, 255, .12);
  margin: 22px 0 0;
}

#kc-social-providers h4,
.sms-or {
  font-size: 13px;
  font-weight: 600;
  color: var(--sms-muted);
  margin: 18px 0 0;
  text-align: center;
}

#kc-social-providers ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

#kc-social-providers a,
a.sms-idp,
.sms-idp {
  width: 100%;
  height: 42px;
  margin-top: 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .20);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--sms-idp-text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
#kc-social-providers a:hover,
.sms-idp:hover { background: rgba(255, 255, 255, .11); }
#kc-social-providers a i { font-size: 16px; }

/* ---- Alerts / messages -------------------------------------------------- */
#kc-content .alert,
.alert,
.pf-c-alert {
  width: 100%;
  margin: 16px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.4;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #eaf3fb;
}
.alert-error,
.pf-m-danger {
  background: rgba(214, 78, 78, .18);
  border-color: rgba(214, 78, 78, .45);
  color: #ffd9d9;
}
.alert-success, .pf-m-success { background: rgba(78, 214, 130, .15); border-color: rgba(78, 214, 130, .4); }
.alert-warning, .pf-m-warning { background: rgba(214, 176, 78, .15); border-color: rgba(214, 176, 78, .4); }

/* Inline per-field error */
#input-error,
.input-error,
.kc-feedback-text,
.pf-c-form__helper-text {
  display: block;
  width: 100%;
  margin-top: 8px;
  font-size: 12px;
  color: #ffb4b4;
  text-align: left;
}

input[aria-invalid="true"] {
  border-color: rgba(255, 130, 130, .65);
}

/* ---- Info / registration link ------------------------------------------- */
#kc-info,
#kc-registration,
#kc-registration-container {
  width: 100%;
  text-align: center;
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--sms-muted);
}
#kc-info a, #kc-registration a { color: var(--sms-cyan); text-decoration: none; }
#kc-info a:hover, #kc-registration a:hover { text-decoration: underline; }

/* ==========================================================================
   OTP — split digit boxes
   ========================================================================== */
.sms-otp {
  width: 100%;
  margin-top: 24px;
}

.sms-otp-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--sms-muted);
  text-align: center;
  margin-bottom: 14px;
}

.sms-otp-boxes {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.sms-otp-digit {
  width: 44px;
  height: 52px;
  padding: 0;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  border-radius: 8px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  font-family: inherit;
  outline: none;
  -moz-appearance: textfield;
}
.sms-otp-digit::-webkit-outer-spin-button,
.sms-otp-digit::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sms-otp-digit:focus {
  border-color: rgba(111, 192, 236, .75);
  background: rgba(255, 255, 255, .14);
  box-shadow: 0 0 0 2px rgba(111, 192, 236, .25);
}
.sms-otp-digit.is-filled {
  border-color: rgba(111, 192, 236, .55);
}

/* The real Keycloak OTP input is driven by JS; keep it out of view */
.sms-otp-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* OTP credential selector (multiple authenticators) */
#kc-otp-credential-picker,
.sms-otp-credentials {
  width: 100%;
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sms-otp-credentials label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .18);
  font-size: 13px;
  color: var(--sms-idp-text);
  cursor: pointer;
}

/* ---- Small screens ------------------------------------------------------ */
@media (max-width: 400px) {
  body { padding: 20px; }
  .card-pf { width: 100%; }
  .sms-otp-digit { width: 40px; height: 48px; font-size: 20px; }
}