/* SPDX-License-Identifier: Apache-2.0 */
/*
 * RTNeX login shell. Layout from design-system/Login.dc.html; colours from
 * tokens.css (generated from the dashboard foundations). Login-only values are
 * declared below so every rule reads from a token.
 */

/* No true SemiBold cut exists in the repo (design-system/fonts files are
 * mislabelled; see the README), so 600 uses the Bold face. */
@font-face { font-family: 'Open Sans'; src: url('../fonts/OpenSans-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Open Sans'; src: url('../fonts/OpenSans-Bold.woff2') format('woff2'); font-weight: 600 700; font-display: swap; }

:root {
  --rx-on-primary: #fff;
  /* Dark --primary is 4.46:1 on the surface; --primary-soft-fg passes in both modes. */
  --rx-link: var(--primary-soft-fg);
  /* --border-strong is 1.5:1; form controls need 3:1 against the surface. */
  --rx-control-border: color-mix(in srgb, var(--fg-subtle) 80%, var(--surface));
  --rx-focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary);
  /* Second gradient stop, taken from the logo (#06B6D4). */
  --rx-brand-cyan: #06b6d4;
  --rx-brand-gradient: linear-gradient(150deg, var(--brand-primary), color-mix(in srgb, var(--brand-primary) 55%, var(--rx-brand-cyan)));
  --rx-radius-card: 20px;
  --rx-radius-control: 9px;
  --rx-radius-button: 10px;
  --rx-control-height: var(--control-height, 44px);
  /* Minimum touch target for every interactive element. */
  --rx-target: 44px;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* White on the dark-mode primary is 3.9:1; the page background is 4.9:1. */
    --rx-on-primary: var(--bg);
  }
}

/* ---------- Page ---------- */

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  min-height: 100vh;
  font-family: 'Open Sans', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--rx-link); font-weight: 600; text-decoration: none; }
a:hover { color: var(--primary-hover); text-decoration: underline; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Base templates also render unclassed checkboxes (e.g. "Sign out from other devices"). */
input[type='checkbox'], input[type='radio'] { accent-color: var(--primary); }
.checkbox label { display: inline-flex; align-items: center; gap: 8px; min-height: var(--rx-target); font-size: 13px; }

.rx-page {
  container-type: inline-size;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 32px;
}

.rx-login {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  max-width: 940px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--rx-radius-card);
  box-shadow: var(--shadow-md);
}

/* ---------- Branding panel ---------- */

.rx-brand {
  display: flex;
  flex-direction: column;
  min-height: 520px;
  padding: 44px 40px;
  color: #fff;
  background: var(--rx-brand-gradient);
}

.rx-brand__logo {
  display: block;
  align-self: flex-start;
  width: auto;
  height: 44px;
  /* The logo has dark text; render it white on the brand gradient. */
  filter: brightness(0) invert(1);
}

.rx-brand__body { margin-top: auto; padding-top: 40px; }

.rx-brand__eyebrow {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.rx-brand__title {
  margin: 0 0 14px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
}

.rx-brand__text {
  max-width: 320px;
  margin: 0 0 30px;
  font-size: 15px;
  line-height: 1.6;
}

.rx-brand__points {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}

.rx-brand__points li { display: flex; align-items: center; gap: 11px; }
.rx-brand__points .rx-icon { width: 18px; height: 18px; }

.rx-brand__footer { margin: auto 0 0; padding-top: 36px; font-size: 12.5px; }

/* ---------- Form panel ---------- */

.rx-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 44px 40px;
  background: var(--surface);
}

.rx-panel__title {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.rx-panel__subtitle { margin: 0; font-size: 13.5px; color: var(--fg-muted); }

.rx-panel__header { margin-bottom: 26px; }

.rx-panel__content { overflow-wrap: anywhere; }

.rx-panel__content p { margin: 0 0 12px; line-height: 1.6; }

.rx-required-note { margin: 0 0 8px; font-size: 12px; color: var(--fg-muted); }
.rx-required { color: var(--danger-fg); }

/* Attempted username (second step of a multi-step flow). */
.rx-attempted {
  display: flex;
  margin-top: 14px;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  padding: 8px 8px 8px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--rx-radius-control);
}

.rx-attempted__label { font-size: 12px; color: var(--fg-muted); }
.rx-attempted__name { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }

.rx-attempted__restart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--rx-target);
  height: var(--rx-target);
  color: var(--fg-muted);
  border-radius: 8px;
}

.rx-attempted__restart:hover { color: var(--rx-link); background: var(--primary-soft); }

/* ---------- Fields ---------- */

.rx-form { display: flex; flex-direction: column; gap: 16px; }

.rx-field { display: grid; align-content: start; gap: 6px; }

.rx-field__label-wrap, .rx-field__control { display: grid; gap: 6px; }

/* .control-label and .required are hardcoded in some base templates (OTP setup). */
.rx-field__label, .rx-field .control-label { font-size: 12px; font-weight: 600; color: var(--fg-muted); }
.rx-field .required { color: var(--danger-fg); }
.rx-field__control:has(> .control-label) { display: flex; flex-wrap: wrap; gap: 4px; }

.rx-field__hint { font-size: 12.5px; color: var(--fg-muted); }

.rx-field__error {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--danger-fg);
}

.rx-input {
  width: 100%;
  min-height: var(--rx-control-height);
  padding: 0 14px;
  font: inherit;
  font-size: 14px;
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--rx-control-border);
  border-radius: var(--rx-radius-control);
}

.rx-input--textarea { min-height: 96px; padding: 10px 14px; resize: vertical; }

.rx-input::placeholder { color: var(--fg-subtle); }
.rx-input:hover { border-color: var(--fg-muted); }

.rx-input:focus-visible {
  border-color: var(--primary);
  outline: none;
  box-shadow: var(--rx-focus-ring);
}

.rx-input[aria-invalid='true'] { border-color: var(--danger); }
.rx-input[aria-invalid='true']:focus-visible { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--danger); }

.rx-input:disabled, .rx-input[readonly] { color: var(--fg-muted); background: var(--surface-2); }

/* Keep browser autofill on the theme surface instead of the UA yellow/blue. */
.rx-input:-webkit-autofill,
.rx-input:-webkit-autofill:hover,
.rx-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--fg);
  caret-color: var(--fg);
  box-shadow: 0 0 0 1000px var(--primary-soft) inset;
  transition: background-color 600000s 0s;
}

.rx-input:-webkit-autofill:focus-visible { box-shadow: 0 0 0 1000px var(--primary-soft) inset, var(--rx-focus-ring); }

select.rx-input { padding-right: 36px; }

/* Password visibility (inherited passwordVisibility.js toggles type and label). */
.rx-password-control { position: relative; display: block; }
.rx-password-control .rx-input { padding-right: 52px; }

.rx-password-control__toggle {
  /* Fills the control's right edge: a full 44x44 target (WCAG 2.5.5). */
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--rx-target);
  height: 100%;
  min-height: var(--rx-target);
  padding: 0;
  color: var(--fg-muted);
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: 0 var(--rx-radius-control) var(--rx-radius-control) 0;
}

.rx-password-control__toggle:hover { color: var(--rx-link); background: var(--primary-soft); }
.rx-password-control__toggle:focus-visible { outline-offset: -2px; }
.rx-password-control__toggle .rx-icon { width: 18px; height: 18px; }

/* Checkboxes and radios. */
.rx-choice { display: inline-flex; align-items: center; gap: 8px; min-height: var(--rx-target); cursor: pointer; }
.rx-choice__label { font-size: 13px; color: var(--fg); }
.rx-choice__label--disabled { color: var(--fg-subtle); }

.rx-check {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--primary);
  cursor: pointer;
}

/* Remember me + reset link: one row, wrapping when narrow. */
.rx-form__options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.rx-form__options:empty { display: none; }
.rx-form__options-item:empty { display: none; }

.rx-form__link { display: inline-flex; align-items: center; min-height: var(--rx-target); font-size: 13px; }
.rx-form__options--center { justify-content: center; }

.rx-form__settings { display: flex; flex-direction: column; gap: 16px; }

.rx-form__buttons { display: flex; flex-direction: column; gap: 10px; }

/* ---------- Buttons ---------- */

.rx-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: var(--rx-control-height);
  padding: 0 18px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--rx-radius-button);
}

.rx-button--block { width: 100%; }
.rx-button--large { min-height: 48px; font-size: 15px; }

.rx-button--primary { color: var(--rx-on-primary); background: var(--primary); }
.rx-button--primary:hover { color: var(--rx-on-primary); background: var(--primary-hover); text-decoration: none; }

.rx-button--secondary { color: var(--fg); background: var(--surface); border-color: var(--rx-control-border); }
.rx-button--secondary:hover { color: var(--fg); background: var(--surface-2); text-decoration: none; }

.rx-button:disabled { cursor: progress; opacity: .7; }

.rx-button .rx-icon { width: 17px; height: 17px; }

.rx-link-button {
  min-height: var(--rx-target);
  padding: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--rx-link);
  cursor: pointer;
  background: none;
  border: 0;
}

.rx-link-button:hover { color: var(--primary-hover); text-decoration: underline; }

.rx-try-another { margin-top: 8px; }

/* ---------- Feedback ---------- */

.rx-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 18px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  border: 1px solid;
  border-radius: var(--rx-radius-control);
  overflow-wrap: anywhere;
}

.rx-alert .rx-icon { flex: none; width: 16px; height: 16px; margin-top: 2px; }

.rx-alert--error { color: var(--danger-fg); background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.rx-alert--warning { color: var(--warning-fg); background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 40%, transparent); }
.rx-alert--success { color: var(--success-fg); background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 35%, transparent); }
.rx-alert--info { color: var(--info-fg); background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 35%, transparent); }

/* Info area and help row. */
.rx-info {
  margin-top: 24px;
  padding-top: 18px;
  font-size: 13px;
  color: var(--fg-muted);
  border-top: 1px solid var(--border);
}

.rx-help {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 26px;
  padding-top: 20px;
  font-size: 12.5px;
  border-top: 1px solid var(--border);
}

.rx-help__label { color: var(--fg-subtle); }

/* ---------- External identity providers ---------- */

.rx-social { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.rx-social__title { margin: 0 0 12px; font-size: 12px; font-weight: 600; color: var(--fg-muted); }
.rx-social__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.rx-social__list--grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.rx-social__icon { font-size: 16px; }

/* ---------- Authenticator and OTP credential choice ---------- */

.rx-choice-list { display: grid; gap: 10px; }

.rx-choice-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  color: var(--fg);
  text-align: left;
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--rx-control-border);
  border-radius: var(--rx-radius-control);
}

.rx-choice-card:hover { border-color: var(--primary); background: var(--primary-soft); }

.rx-choice-card__icon {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--primary-soft-fg);
  background: var(--primary-soft);
  border-radius: 8px;
}

.rx-choice-card__icon .rx-icon { width: 18px; height: 18px; }
.rx-choice-card__header { display: flex; align-items: center; gap: 12px; }
.rx-choice-card__body { flex: 1; min-width: 0; }
.rx-choice-card__title { font-weight: 600; }
.rx-choice-card__text { font-size: 12.5px; color: var(--fg-muted); }
.rx-choice-card__fill { display: none; }
.rx-choice-card__arrow { color: var(--fg-subtle); }

/* OTP credential radios: the radio is visually replaced by the card state. */
.rx-choice-card__input { position: absolute; opacity: 0; pointer-events: none; }
.rx-choice-card--radio { margin-bottom: 8px; }
.rx-choice-card__input:checked + .rx-choice-card { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.rx-choice-card__input:focus-visible + .rx-choice-card { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- OTP setup, recovery codes and misc base markup ---------- */

#kc-totp-settings { margin: 0 0 20px; padding-left: 20px; line-height: 1.6; }
#kc-totp-settings li { margin-bottom: 10px; }
#kc-totp-supported-apps { margin: 6px 0; padding-left: 18px; }
#kc-totp-secret-qr-code { display: block; max-width: 100%; height: auto; margin: 8px 0; background: #fff; border-radius: 8px; }
#kc-totp-secret-key { font-family: ui-monospace, monospace; overflow-wrap: anywhere; }

.rx-recovery-codes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 6px 16px;
  margin: 12px 0;
  padding: 14px;
  font-family: ui-monospace, monospace;
  list-style: none;
  background: var(--surface-2);
  border-radius: var(--rx-radius-control);
}

.rx-recovery-codes__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Locale menu (shown only when the realm enables i18n) ---------- */

.rx-locale { position: absolute; top: 16px; right: 16px; }
.rx-locale__dropdown { position: relative; }

.rx-locale__dropdown > button {
  min-height: 32px;
  padding: 0 10px;
  font: inherit;
  font-size: 12.5px;
  color: var(--fg-muted);
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.rx-locale__menu {
  position: absolute;
  right: 0;
  z-index: 1;
  display: none;
  min-width: 160px;
  margin: 4px 0 0;
  padding: 4px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
}

.rx-locale__dropdown > button[aria-expanded='true'] + .rx-locale__menu { display: block; }
.rx-locale__link { display: block; padding: 6px 10px; font-weight: 400; color: var(--fg); border-radius: 6px; }
.rx-locale__link:hover, .rx-locale__link:focus { color: var(--fg); text-decoration: none; background: var(--surface-2); }

/* ---------- Icons ----------
 * Inline SVG masks drawn for this theme (24px grid, 2px stroke); they take the
 * current text colour. Each is a class so passwordVisibility.js can swap them. */

.rx-icon {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: var(--rx-icon) center / contain no-repeat;
  mask: var(--rx-icon) center / contain no-repeat;
}

.rx-icon--eye { --rx-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/><circle cx='12' cy='12' r='3'/></svg>"); }
.rx-icon--eye-off { --rx-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/><circle cx='12' cy='12' r='3'/><path d='M3 3l18 18'/></svg>"); }
.rx-icon--alert { --rx-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><path d='M12 7.5v5.5M12 16.5v.01'/></svg>"); }
.rx-icon--info { --rx-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='9'/><path d='M12 11v5.5M12 7.5v.01'/></svg>"); }
.rx-icon--check { --rx-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M8 12.5l2.5 2.5L16 9.5'/></svg>"); }
.rx-icon--shield-check { --rx-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l7 3v5c0 4.5-3 8.3-7 10-4-1.7-7-5.5-7-10V6z'/><path d='M9 12l2 2 4-4'/></svg>"); }
.rx-icon--log-in { --rx-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 4h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4'/><path d='M10 8l4 4-4 4M14 12H4'/></svg>"); }
.rx-icon--restart { --rx-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 12a8 8 0 1 1-2.34-5.66'/><path d='M20 4v5h-5'/></svg>"); }
.rx-icon--key { --rx-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='15' r='4'/><path d='M11 12l9-9M17 6l3 3'/></svg>"); }
.rx-icon--phone { --rx-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='6' y='2.5' width='12' height='19' rx='2.5'/><path d='M11 18h2'/></svg>"); }
.rx-icon--chevron { --rx-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg>"); }

/* ---------- Responsive: the reference's 720px container breakpoint ---------- */

@container (max-width: 720px) {
  .rx-login { grid-template-columns: 1fr; }

  .rx-brand { min-height: auto; padding: 24px; }
  .rx-brand__logo { height: 40px; }
  .rx-brand__body { margin-top: 0; padding-top: 18px; }
  .rx-brand__eyebrow { margin-bottom: 6px; font-size: 11px; }
  .rx-brand__title { margin: 0; font-size: 22px; }
  .rx-brand__text, .rx-brand__points, .rx-brand__footer { display: none; }

  .rx-panel { padding: 28px 24px 32px; }
  .rx-locale { top: 12px; right: 12px; }
  .rx-panel:has(.rx-locale) .rx-panel__header { padding-top: 32px; }
  /* 16px stops iOS zooming the page when an input takes focus. */
  .rx-input { font-size: 16px; }
}

@media (max-width: 480px) {
  .rx-page { align-items: flex-start; padding: 20px; }
}

/* Windows high contrast: masks would paint in the forced background colour. */
@media (forced-colors: active) {
  .rx-icon { forced-color-adjust: none; background-color: CanvasText; }
  .rx-button--primary .rx-icon { background-color: ButtonText; }
  .rx-brand__logo { filter: none; }
}