/* ============================================================
   Roommatik Login — warm-neutral v3 overlay
   Loaded AFTER roommatik-v2's theme-styles.css; repaints the
   --rm-* variable system to the 3c-hybrid v3 design system.
   Fixes the banned near-miss cyan (#0097B2 -> brand tokens) and
   self-hosts Inter (removes the Google Fonts CDN request).
   ============================================================ */

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
  font-style: normal;
}

:root {
  /* --- repaint v2's variable system to warm-neutral v3 --- */
  --rm-primary: #0B5062;                      /* CTA teal-ink (contained button) */
  --rm-primary-hover: #0A4552;
  --rm-primary-subtle: rgba(11, 80, 98, 0.06);
  --rm-primary-ring: rgba(11, 165, 183, 0.22); /* focus ring = Signal Teal */
  --rm-bg: #F7F5F1;                            /* warm canvas */
  --rm-card-bg: #FFFFFF;
  --rm-text: #282624;                          /* ink */
  --rm-text-secondary: #63605A;
  --rm-text-muted: #8A857D;
  --rm-border: #D6C6A8;                        /* sand card border */
  --rm-border-hover: #57534C;                  /* borderStrong */
  --rm-input-bg: #FFFFFF;
  --rm-input-border: #D9D3C8;                  /* divider */
  --rm-input-focus: #0BA5B7;                   /* Signal Teal */
  --rm-error: #FB7185;
  --rm-success: #16A34A;
  --rm-radius: 12px;
  --rm-radius-sm: 8px;
  --rm-radius-xs: 6px;
  --rm-shadow-card: 0 6px 16px -12px rgba(63, 49, 25, 0.35); /* soft warm shadow */
  --rm-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* PatternFly mappings + link differentiation (links = Deep Teal, not CTA ink) */
  --pf-v5-global--primary-color--100: var(--rm-primary);
  --pf-v5-global--active-color--100: #0BA5B7;
  --pf-v5-global--link--Color: #0E7C8A;
  --pf-v5-global--link--Color--hover: #282624;
  --pf-v5-global--BackgroundColor--light-100: var(--rm-bg);
  --pf-v5-global--Color--100: var(--rm-text);

  /* Font family: keycloak.v2/PatternFly default to Red Hat Display/Text for
     headings and controls; repoint the PatternFly font tokens to Inter.
     (Icon fonts declare their own font-family, so they are unaffected.) */
  --pf-v5-global--FontFamily--sans-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --pf-v5-global--FontFamily--heading--sans-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --pf-v5-global--FontFamily--text: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --pf-v5-global--FontFamily--redhatfont--sans-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Belt-and-suspenders: force Inter on text-bearing login elements only
   (never on icon glyphs — no universal selector). */
#kc-page-title,
.pf-v5-c-title,
.pf-v5-c-login__main-header,
label, .pf-v5-c-form__label-text,
.pf-v5-c-button, #kc-login,
input, .pf-v5-c-form-control,
#kc-info, .instruction, .pf-v5-c-login__main-footer {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Override the two hardcoded teal button shadows from v2 (warm/flat) */
.pf-v5-c-button.pf-m-primary,
#kc-login,
input[type="submit"] { box-shadow: none !important; }
.pf-v5-c-button.pf-m-primary:hover,
#kc-login:hover,
input[type="submit"]:hover { box-shadow: 0 2px 8px rgba(11, 80, 98, 0.25) !important; }

/* Links use Deep Teal explicitly (v2 tied them to --rm-primary) */
a, .pf-v5-c-login__main-footer a { color: #0E7C8A; }
a:hover { color: #282624; }

/* --- Typography rebalance for Inter (v2 was tuned for Red Hat, whose 400
   reads heavier; on Inter the same weights look thin/light) --- */

/* Card heading ("Sign in to your account"): v2 = 1.1rem / 400 / muted grey.
   v3 wants a real heading: heavier, ink, slightly larger, tightened. */
.rm-subtitle {
  font-size: 1.3rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: var(--rm-text) !important;
}

/* Field labels: nudge from 0.8rem up to 14px for v3 legibility (keep 600). */
.pf-v5-c-form__label .pf-v5-c-form__label-text {
  font-size: 0.875rem !important;
  letter-spacing: 0 !important;
}

/* Inputs + primary button: crisper Inter rendering at a comfortable size. */
.pf-v5-c-form-control,
.pf-v5-c-form-control input,
input[type="text"], input[type="password"], input[type="email"] {
  font-size: 0.95rem !important;
}
.pf-v5-c-button.pf-m-primary, #kc-login { font-weight: 600 !important; }

/* =========================================================
   Simple single-column layout (overrides the two-column
   passkey.css). Card is narrow and centered; brand + heading
   centered; passkey above the social row; divider horizontal.
   ========================================================= */
.pf-v5-c-login__main { max-width: 420px !important; }

.rm-logo-title { display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
.rm-logo { height: 50px !important; }
.rm-subtitle { display:block; }

/* Force a single column at every width (neutralize the >=768px two-col rules). */
@media (min-width: 768px) {
  .rm-login-two-col { flex-direction: column !important; gap: 0 !important; }
  .rm-login-two-col .rm-login-left  { padding-right: 0 !important; flex: 1 1 auto !important; }
  .rm-login-two-col .rm-login-right { padding-left: 0 !important;  flex: 1 1 auto !important; }
  .rm-login-two-col .rm-login-divider {
    flex-direction: row !important; width: auto !important; min-height: 0 !important;
    margin: 22px 0 !important; padding: 0 !important;
  }
  .rm-login-two-col .rm-login-divider::before,
  .rm-login-two-col .rm-login-divider::after { width: auto !important; height: 1px !important; }
  .rm-login-two-col .rm-login-divider span { writing-mode: horizontal-tb !important; white-space: nowrap; }
}

/* Divider label */
.rm-login-divider { color: var(--rm-secondary) !important; font-size: .72rem !important;
  font-weight: 600 !important; letter-spacing: .08em; text-transform: uppercase; }

/* Social providers as a responsive row (2 up); passkey stays full-width above them. */
.rm-social-buttons { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px !important; }
.rm-social-btn { justify-content: center !important; min-height: 46px; }

/* Remember-me now lives inside the form (before the button): remove the old
   bottom border / centering it had as a trailing block. */
.rm-remember-me { text-align: left !important; margin: 2px 0 6px !important; padding-top: 0 !important; border-top: none !important; }
.rm-remember-me label { font-size: .9rem !important; color: var(--rm-secondary) !important; }

/* Hide the locale switcher: with i18n enabled the language auto-follows the
   browser (default es), and the approved simple layout has no switcher.
   The switcher is a <select id="login-select-toggle"> inside a form-control;
   target it and its wrappers precisely (never the input form-controls). */
#kc-locale, #kc-locale-dropdown, #kc-locale-wrapper,
select#login-select-toggle,
.pf-v5-c-form-control:has(#login-select-toggle),
.pf-v5-c-form__group:has(#login-select-toggle) { display: none !important; }