/*
 * Sygnal One – Keycloak Login Theme
 *
 * Aligns the Keycloak login pages with the Sygnal One design system.
 * Tokens sourced from design-system/tokens.ts
 *
 * Primary colors:
 *   Dark Blue   #0B1F3B
 *   Medium Blue #1E4FD8
 *   Sky Blue    #4FC3F7
 *   Teal        #14B8A6
 *   White       #FFFFFF
 *
 * Typography:
 *   Montserrat  400 / 500 / 600 / 700
 */

/* ── Google Fonts ──────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

/* ── Brand palette — single source of truth, generated from design-system/tokens.ts.
   s1-tokens.css is copied into this theme's resources/css/ by `yarn build:vars`. ── */
@import url('s1-tokens.css');

/* ── Root variables — surface-specific only; brand colours come from s1-tokens.css ── */
:root {
  --s1-error: #DC2626;
  --s1-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --s1-radius-sm: 4px;
  --s1-radius-md: 8px;
  --s1-radius-lg: 12px;
  --s1-shadow-md: 0 4px 6px -1px rgba(11, 31, 59, 0.07), 0 2px 4px -2px rgba(11, 31, 59, 0.05);
  --s1-shadow-lg: 0 10px 15px -3px rgba(11, 31, 59, 0.08), 0 4px 6px -4px rgba(11, 31, 59, 0.04);
}

/* ── Global reset ─────────────────────────────────────────────────────── */
body,
html {
  font-family: var(--s1-font) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Background ───────────────────────────────────────────────────────────
   In Keycloak 26 the `login-pf` class is on <html>, which carries Keycloak's
   DEFAULT background image + a near-black fill. Applying the gradient to <body>
   alone left that default bg showing (esp. on taller sub-pages like TOTP setup
   / required actions). Paint the gradient on the actual .login-pf element (html)
   AND body, kill the default image, and cover the full scroll height. */
html.login-pf,
.login-pf body,
body.login-pf,
.login-pf-page {
  background-image: none !important;
  background-color: transparent !important;
}

html.login-pf,
.login-pf body,
body.login-pf {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--s1-dark-blue) 0%, var(--s1-dark-blue-800) 100%) !important;
  background-attachment: fixed !important;
}

/* ── Logo / Header ────────────────────────────────────────────────────── */
#kc-header-wrapper {
  font-family: var(--s1-font) !important;
  font-size: 0 !important;       /* hide default text */
  padding: 40px 0 24px;
  text-align: center;
}

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

div#kc-header {
  background: transparent !important;
  color: var(--s1-white) !important;
}

/* ── Login card ───────────────────────────────────────────────────────── */
#kc-login {
  font-family: var(--s1-font) !important;
}

.card-pf,
#kc-form-wrapper,
div.card-pf {
  background: var(--s1-white) !important;
  border: none !important;
  border-radius: var(--s1-radius-lg) !important;
  box-shadow: var(--s1-shadow-lg) !important;
  padding: 32px !important;
  max-width: 440px;
  margin: 0 auto 40px !important;
}

/* Breathing room below the card on tall sub-pages (TOTP setup, required
   actions) so it never touches the bottom edge of the viewport. Only the
   outer page wrapper — #kc-content / #kc-content-wrapper live INSIDE the card,
   so padding them would pad the card's interior (huge gap under the form). */
.login-pf-page {
  padding-bottom: 40px !important;
}

/* Card title */
#kc-page-title,
.card-pf .card-title,
#kc-content-wrapper h1 {
  font-family: var(--s1-font) !important;
  font-weight: 600 !important;
  font-size: 24px !important;
  color: var(--s1-dark-blue) !important;
  margin-bottom: 24px !important;
  text-align: center;
}

/* ── Form inputs ──────────────────────────────────────────────────────── */
.login-pf input[type="text"],
.login-pf input[type="password"],
.login-pf input[type="email"],
.login-pf select,
.login-pf textarea {
  font-family: var(--s1-font) !important;
  font-size: 14px !important;
  border: 1px solid #d1d5db !important;
  border-radius: var(--s1-radius-md) !important;
  padding: 10px 12px !important;
  color: var(--s1-dark-grey) !important;
  background: var(--s1-white) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

.login-pf input[type="text"]:focus,
.login-pf input[type="password"]:focus,
.login-pf input[type="email"]:focus {
  border-color: var(--s1-medium-blue) !important;
  box-shadow: 0 0 0 3px rgba(30, 79, 216, 0.15) !important;
  outline: none !important;
}

/* Labels */
.login-pf label {
  font-family: var(--s1-font) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  color: var(--s1-dark-grey) !important;
  margin-bottom: 4px !important;
}

/* ── Primary button ───────────────────────────────────────────────────── */
/* Shared box metrics so primary + secondary buttons are always the same
   height/shape (border-box + a 1px border on BOTH — transparent on primary —
   and identical font/padding/line-height). Differ only in fill. */
.login-pf .btn-primary,
.login-pf .btn-default,
.login-pf input[type="submit"],
.login-pf .pf-c-button.pf-m-primary,
.login-pf .pf-c-button.pf-m-secondary,
#kc-login {
  box-sizing: border-box !important;
  font-family: var(--s1-font) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  border: 1px solid transparent !important;
  border-radius: var(--s1-radius-md) !important;
  padding: 10px 20px !important;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.login-pf .btn-primary,
.login-pf input[type="submit"],
.login-pf .pf-c-button.pf-m-primary,
#kc-login {
  background-color: var(--s1-medium-blue) !important;
  color: var(--s1-white) !important;
}

.login-pf .btn-primary:hover,
.login-pf input[type="submit"]:hover,
.login-pf .pf-c-button.pf-m-primary:hover {
  background-color: var(--s1-medium-blue-800) !important;
  box-shadow: var(--s1-shadow-md) !important;
}

.login-pf .btn-primary:focus,
.login-pf .pf-c-button.pf-m-primary:focus {
  box-shadow: 0 0 0 3px rgba(30, 79, 216, 0.3) !important;
  outline: none !important;
}

/* ── Secondary / link buttons — fill + border only (metrics shared above) ── */
.login-pf .btn-default,
.login-pf .pf-c-button.pf-m-secondary {
  background: var(--s1-white) !important;
  color: var(--s1-dark-grey) !important;
  border-color: #d1d5db !important;
}

.login-pf .btn-default:hover,
.login-pf .pf-c-button.pf-m-secondary:hover {
  background: #f9fafb !important;
  border-color: #9ca3af !important;
}

.login-pf a,
.login-pf .pf-c-button.pf-m-link {
  color: var(--s1-medium-blue) !important;
  font-family: var(--s1-font) !important;
  text-decoration: none !important;
}

.login-pf a:hover {
  color: var(--s1-medium-blue-800) !important;
  text-decoration: underline !important;
}

/* ── Anchor rendered as a button (info.ftl's "Go to Sygnal One") ─────────── */
/* Must come after the generic link rules above, and restate what they would
   otherwise win: `.login-pf a:hover` sets colour and text-decoration, which the
   primary-button rules do not, so an <a> carrying the button classes would turn
   medium-blue-on-medium-blue and underline on hover. Everything else — fill,
   metrics, radius, focus ring — is already inherited from the shared button
   rules above, which are element-agnostic. */
.login-pf a.pf-c-button.pf-m-primary,
.login-pf a.pf-c-button.pf-m-primary:hover,
.login-pf a.pf-c-button.pf-m-primary:focus {
  display: block;
  width: 100%;
  text-align: center;
  color: var(--s1-white) !important;
  text-decoration: none !important;
}

/* ── Alerts / feedback banners ────────────────────────────────────────────
   Keycloak renders login feedback as a PatternFly alert (.pf-c-alert / .pf-v5-c-alert
   or a plain .alert-*) with an icon span that often renders as a broken glyph.
   Give it a clean, branded look on the white card: subtle tinted background, a
   coloured left accent by type, readable dark text, no broken icon. */
.login-pf .alert,
.login-pf .pf-c-alert,
.login-pf .pf-v5-c-alert,
#kc-content .pf-c-alert,
#kc-content .pf-v5-c-alert,
div[class*="alert-"] {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: var(--s1-font) !important;
  font-size: 13px !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  border-left: 3px solid var(--s1-medium-blue) !important;
  border-radius: var(--s1-radius-md) !important;
  box-shadow: none !important;
  padding: 12px 16px !important;
  margin: 0 0 20px 0 !important;
  color: var(--s1-dark-grey) !important;
}

/* Hide the (frequently broken) alert icon glyph */
.login-pf .pf-c-alert__icon,
.login-pf .pf-v5-c-alert__icon,
.login-pf .alert .pficon,
.login-pf .kc-feedback-text + .pficon,
#kc-content .pf-c-alert__icon,
#kc-content .pf-v5-c-alert__icon {
  display: none !important;
}

.login-pf .pf-c-alert__title,
.login-pf .pf-v5-c-alert__title,
.login-pf .kc-feedback-text {
  font-family: var(--s1-font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--s1-dark-grey) !important;
  border: none !important;
}

/* Type accents (left border) */
.login-pf .alert-error,
.login-pf .pf-c-alert.pf-m-danger,
.login-pf .pf-v5-c-alert.pf-m-danger { border-left-color: var(--s1-error) !important; }

.login-pf .alert-success,
.login-pf .pf-c-alert.pf-m-success,
.login-pf .pf-v5-c-alert.pf-m-success { border-left-color: var(--s1-teal) !important; }

.login-pf .alert-warning,
.login-pf .pf-c-alert.pf-m-warning,
.login-pf .pf-v5-c-alert.pf-m-warning { border-left-color: var(--s1-orange) !important; }

.login-pf .alert-info,
.login-pf .pf-c-alert.pf-m-info,
.login-pf .pf-v5-c-alert.pf-m-info { border-left-color: var(--s1-medium-blue) !important; }

/* ── Password visibility toggle ──────────────────────────────────────── */
.input-group,
.pf-c-input-group {
  position: relative !important;
  display: flex !important;
  width: 100% !important;
}

.input-group input[type="password"],
.input-group input[type="text"],
.pf-c-input-group input {
  flex: 1 !important;
  padding-right: 44px !important;
  border-radius: var(--s1-radius-md) !important;
}

.input-group button,
.input-group .pf-c-button,
.pf-c-input-group button,
#kc-form-login .input-group > button,
button.pf-c-button.pf-m-control {
  position: absolute !important;
  right: 4px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: none !important;
  color: var(--s1-grey) !important;
  padding: 6px 8px !important;
  cursor: pointer !important;
  z-index: 2 !important;
  box-shadow: none !important;
  outline: none !important;
  width: auto !important;
  min-width: 0 !important;
  line-height: 1 !important;
}

.input-group button:hover,
.input-group .pf-c-button:hover,
.pf-c-input-group button:hover,
button.pf-c-button.pf-m-control:hover {
  color: var(--s1-medium-blue) !important;
  background: transparent !important;
}

/* ── Remember me / checkboxes ─────────────────────────────────────────── */
.login-pf .checkbox label,
.login-pf .pf-c-check__label {
  font-family: var(--s1-font) !important;
  font-size: 13px !important;
  color: var(--s1-grey) !important;
}

/* ── Footer / "powered by" ────────────────────────────────────────────── */
#kc-info-wrapper {
  text-align: center;
  margin-top: 16px;
}

#kc-info-wrapper a {
  font-size: 13px !important;
}

/* ── Locale selector ──────────────────────────────────────────────────── */
#kc-locale ul {
  border-radius: var(--s1-radius-md) !important;
  box-shadow: var(--s1-shadow-md) !important;
}

/* ── Social / identity provider buttons ───────────────────────────────── */
.login-pf .kc-social-provider-name {
  font-family: var(--s1-font) !important;
}

.login-pf .kc-social-links .kc-social-item {
  border-radius: var(--s1-radius-md) !important;
  margin-bottom: 8px;
}

/* ── Misc typography ──────────────────────────────────────────────────── */
.login-pf p,
.login-pf span,
.login-pf div {
  font-family: var(--s1-font) !important;
}

.login-pf .instruction {
  font-size: 14px !important;
  color: var(--s1-grey) !important;
}

/* ── Responsive adjustments ───────────────────────────────────────────── */
@media (max-width: 480px) {
  .card-pf,
  div.card-pf {
    padding: 24px 16px !important;
    border-radius: var(--s1-radius-md) !important;
  }

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

/* ── Branded checkboxes / radios ──────────────────────────────────────── */
.login-pf input[type="checkbox"],
.login-pf input[type="radio"] {
  accent-color: var(--s1-medium-blue);
  width: 15px;
  height: 15px;
  vertical-align: middle;
}