/* ─────────────────────────────────────────────────────────────────────────
   CodeInfinity login theme — overrides on top of keycloak.v2 (PatternFly v5).
   Maps the portal design system (design/DESIGN.md) onto Keycloak's login so the
   hand-off from the portal's sign-in landing feels seamless. Light + dark.
   ───────────────────────────────────────────────────────────────────────── */

/* Portal tokens (design/DESIGN.md — brighter palette), light defaults */
:root{
  --c8e-bg:#f6f7f9; --c8e-surface:#ffffff; --c8e-surface-2:#eef1f5;
  --c8e-border:#e3e7ec; --c8e-border-strong:#c9d1da;
  --c8e-text-1:#16181b; --c8e-text-2:#5b6672; --c8e-text-3:#6b7480;
  --c8e-brand:#1dc7de; --c8e-brand-hover:#16b2cf; --c8e-brand-ink:#16181b;
  --c8e-accent:#0e6d80; --c8e-accent-hover:#0a5361; --c8e-accent-tint:#e7f0f2;
  --c8e-ok:#217a3c; --c8e-ok-tint:#e9f9ef;
  --c8e-warn:#c2410c; --c8e-warn-tint:#fff3e2;
  --c8e-error:#dc2626; --c8e-error-tint:#ffe9e9;
  --c8e-info:#2a5c8f; --c8e-info-tint:#e9eef4;
  --c8e-radius:12px; --c8e-shadow:0 12px 40px rgba(22,24,27,.14);
  --c8e-focus:0 0 0 3px rgba(14,109,128,.28),0 0 0 1px #0e6d80;
  --c8e-font:"Inter Tight",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* Bend PatternFly's own font tokens to Inter Tight */
  --pf-v5-global--FontFamily--text:var(--c8e-font);
  --pf-v5-global--FontFamily--heading:var(--c8e-font);
  --pf-v5-global--FontFamily--redhatfont:var(--c8e-font);
  --pf-v5-global--FontFamily--sans-serif:var(--c8e-font);
}
@media (prefers-color-scheme:dark){:root{
  --c8e-bg:#0f1215; --c8e-surface:#16181b; --c8e-surface-2:#1d2126;
  --c8e-border:#2a3038; --c8e-border-strong:#3a424c;
  --c8e-text-1:#f3f5f7; --c8e-text-2:#aab3bd; --c8e-text-3:#8391a0;
  --c8e-accent:#1dc7de; --c8e-accent-hover:#5cbfd0; --c8e-accent-tint:rgba(29,199,222,.14);
  --c8e-ok:#4ade80; --c8e-ok-tint:#203629;
  --c8e-warn:#fb923c; --c8e-warn-tint:#3a311e;
  --c8e-error:#f87171; --c8e-error-tint:#3d2827;
  --c8e-info:#6fa3dd; --c8e-info-tint:#26313e;
  --c8e-shadow:0 12px 40px rgba(0,0,0,.6);
  --c8e-focus:0 0 0 3px rgba(29,199,222,.35),0 0 0 1px #1dc7de;
}}

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

/* ── Fonts everywhere (but NOT the .fa icon font) ── */
body, .pf-v5-c-login, .pf-v5-c-login *:not(.fa):not([class*="fa-"]),
input, button, select, textarea,
.pf-v5-c-title, #kc-page-title,
.pf-v5-c-form__label-text, .pf-v5-c-button, .pf-v5-c-alert__title{
  font-family:var(--c8e-font) !important;
}

/* ── Page background: portal surface instead of the dark polygon ── */
body.login-pf, .login-pf body, .login-pf-page{
  background:var(--c8e-bg) !important; color:var(--c8e-text-1);
}
.login-pf-page{padding-top:56px}

/* ── Header: hide realm name, show the CodeInfinity logo lockup ── */
#kc-header, #kc-header-wrapper{
  color:transparent !important; font-size:0 !important; line-height:0 !important;
  padding:0 !important; margin:0 auto 22px !important; text-shadow:none !important;
}
#kc-header-wrapper::before{
  content:""; display:block; width:230px; height:56px; margin:0 auto;
  background:url("../img/logo-dark.svg") center/contain no-repeat;
}
@media (prefers-color-scheme:dark){ #kc-header-wrapper::before{background-image:url("../img/logo-light.svg")} }

/* ── The login card ── */
.pf-v5-c-login__main{
  background:var(--c8e-surface) !important;
  border:1px solid var(--c8e-border) !important;
  border-radius:var(--c8e-radius) !important;
  box-shadow:var(--c8e-shadow) !important;
  padding:10px 6px 6px !important;
}
.pf-v5-c-login__main-header-title, .pf-v5-c-title, #kc-page-title{ color:var(--c8e-text-1) !important; }
/* Keep the page title on one line (PatternFly's 3xl + 48px header padding wraps
   it). Trim the content padding and size so titles fit. */
#kc-page-title, .pf-v5-c-title.pf-m-3xl{ font-size:26px !important; line-height:1.25 !important; white-space:nowrap !important; letter-spacing:-.01em; }
.pf-v5-c-login__main-header{ padding:28px 28px 12px !important; border-top:0 !important; }   /* some KC builds put a 4px PatternFly-blue accent here — remove it */
.pf-v5-c-login__main-body, .pf-v5-c-login__main-footer{ padding-left:28px !important; padding-right:28px !important; }
.pf-v5-c-login__main-body, .pf-v5-c-login__main-footer{ color:var(--c8e-text-2) !important; }
#kc-info, .login-pf-signup, #kc-info-wrapper{ color:var(--c8e-text-3) !important; }
#kc-info, .login-pf-signup{ margin-top:18px !important; }   /* space above the "Enter your…" note */

/* ── Labels ── */
.pf-v5-c-form__label, .pf-v5-c-form__label-text{ color:var(--c8e-text-2) !important; }
.pf-v5-c-form__group > .pf-v5-c-form__label{ margin-bottom:7px !important; }   /* breathing room label → input */

/* ── Inputs: one clean bordered field, no PatternFly underline ── */
.pf-v5-c-form-control{
  background:var(--c8e-surface) !important;
  border:1px solid var(--c8e-border-strong) !important;
  border-radius:8px !important;
  padding:0 !important; box-shadow:none !important;
  overflow:hidden !important;   /* clip the square-cornered <input> fill to the rounded wrapper */
}
.pf-v5-c-form-control::after{ display:none !important; border:0 !important; }   /* kills the bottom-border underline */
.pf-v5-c-form-control > input, .pf-v5-c-form-control input, .pf-v5-c-form-control > select{
  border:0 !important; background:transparent !important; box-shadow:none !important; outline:none !important;
  padding:9px 11px !important; color:var(--c8e-text-1) !important; height:auto !important; border-radius:8px !important;
}
/* The inner input keeps no focus ring of its own — only the wrapper shows one,
   as a single clean accent border + soft ring (no muddy double outline). */
.pf-v5-c-form-control input:focus, .pf-v5-c-form-control input:focus-visible{ outline:none !important; box-shadow:none !important; }
.pf-v5-c-form-control:focus-within{
  border-color:var(--c8e-accent) !important;
  box-shadow:0 0 0 3px var(--c8e-accent-tint) !important;
}
/* Chrome/Safari autofill paints the input pale yellow and can't be changed with
   `background`. Force our surface + text colour via the inset box-shadow trick,
   and freeze the transition so there's no yellow flash on autofill. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active{
  -webkit-box-shadow:0 0 0 1000px var(--c8e-surface) inset !important;
  box-shadow:0 0 0 1000px var(--c8e-surface) inset !important;
  -webkit-text-fill-color:var(--c8e-text-1) !important;
  caret-color:var(--c8e-text-1) !important;
  border-radius:8px;
  transition:background-color 100000s ease-in-out 0s !important;
}

/* Password field (input + show/hide) reads as one field */
.pf-v5-c-input-group{ background:transparent !important; border-radius:8px !important; }
.pf-v5-c-input-group .pf-v5-c-form-control{ border-right:0 !important; border-radius:8px 0 0 8px !important; }
.pf-v5-c-input-group__item .pf-v5-c-button, .pf-v5-c-input-group .pf-v5-c-button{
  background:var(--c8e-surface) !important; color:var(--c8e-text-3) !important;
  border:1px solid var(--c8e-border-strong) !important; border-left:0 !important;
  border-radius:0 8px 8px 0 !important;
}
.pf-v5-c-input-group__item .pf-v5-c-button:hover{ color:var(--c8e-accent) !important; }

/* Password show/hide button: kill PatternFly's blue control underline, and
   swap the FontAwesome eye for the portal's Tabler outline eye (masked so it
   inherits our colour). The theme's own JS toggles .fa-eye / .fa-eye-slash. */
.pf-v5-c-button.pf-m-control::after, .pf-v5-c-button.pf-m-control::before{ display:none !important; border:0 !important; box-shadow:none !important; }
.pf-v5-c-button[data-password-toggle]{ color:var(--c8e-text-3) !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; }
.pf-v5-c-button[data-password-toggle]:hover{ color:var(--c8e-accent) !important; }
.pf-v5-c-button[data-password-toggle] i{
  display:inline-block; width:18px; height:18px; background:currentColor !important;
  -webkit-mask:center/contain no-repeat; mask:center/contain no-repeat;
}
.pf-v5-c-button[data-password-toggle] i::before{ content:none !important; }
.pf-v5-c-button[data-password-toggle] i.fa-eye{ -webkit-mask-image:url("../img/eye.svg"); mask-image:url("../img/eye.svg"); }
.pf-v5-c-button[data-password-toggle] i.fa-eye-slash{ -webkit-mask-image:url("../img/eye-off.svg"); mask-image:url("../img/eye-off.svg"); }

/* ── Buttons ── */
.pf-v5-c-button{ border-radius:999px !important; font-weight:600 !important; min-height:44px !important; }
/* Centre the label — the block buttons include an <a> that renders top-aligned. */
.pf-v5-c-button.pf-m-block{ display:flex !important; align-items:center !important; justify-content:center !important; }
/* PatternFly draws the button border on ::after — kill it so it doesn't double
   up with the element border we set below. */
.pf-v5-c-button::after{ border:0 !important; box-shadow:none !important; }
/* Primary → brand cyan, dark ink */
.pf-v5-c-button.pf-m-primary, #kc-login{
  background:var(--c8e-brand) !important; color:var(--c8e-brand-ink) !important;
  border:1px solid var(--c8e-brand) !important;
  --pf-v5-c-button--m-primary--BackgroundColor:var(--c8e-brand);
  --pf-v5-c-button--m-primary--Color:var(--c8e-brand-ink);
  --pf-v5-c-button--m-primary--hover--BackgroundColor:var(--c8e-brand-hover);
}
.pf-v5-c-button.pf-m-primary:hover, #kc-login:hover{ background:var(--c8e-brand-hover) !important; border-color:var(--c8e-brand-hover) !important; }
/* Secondary (« Back to Login) → plain accent text link, no border/pill */
.pf-v5-c-button.pf-m-secondary{
  background:transparent !important; color:var(--c8e-accent) !important;
  border:0 !important; min-height:0 !important; padding:8px 4px !important; font-weight:600 !important;
}
.pf-v5-c-button.pf-m-secondary:hover{ background:transparent !important; color:var(--c8e-accent-hover) !important; text-decoration:underline !important; }
/* the input-group toggle button is not a primary/secondary — keep it slim */
.pf-v5-c-input-group .pf-v5-c-button{ min-height:0 !important; border-radius:0 8px 8px 0 !important; }

/* ── Links ── */
a, .pf-v5-c-login__main-footer a, #kc-registration a, #kc-form-options a, #kc-info a{ color:var(--c8e-accent) !important; }
a:hover{ color:var(--c8e-accent-hover) !important; }

/* ── Alerts (all severities) → the portal callout: full border, radius, tint ── */
.pf-v5-c-alert{
  border-radius:8px !important; border:1px solid !important; border-top-width:1px !important;
  align-items:flex-start !important;
}
.pf-v5-c-alert__title{ font-weight:600 !important; }
.pf-v5-c-alert.pf-m-danger{  background:var(--c8e-error-tint) !important; border-color:var(--c8e-error) !important; color:var(--c8e-error) !important; }
.pf-v5-c-alert.pf-m-warning{ background:var(--c8e-warn-tint)  !important; border-color:var(--c8e-warn)  !important; color:var(--c8e-warn)  !important; }
.pf-v5-c-alert.pf-m-success{ background:var(--c8e-ok-tint)    !important; border-color:var(--c8e-ok)    !important; color:var(--c8e-ok)    !important; }
.pf-v5-c-alert.pf-m-info{    background:var(--c8e-info-tint)  !important; border-color:var(--c8e-info)  !important; color:var(--c8e-info)  !important; }
.pf-v5-c-alert .pf-v5-c-alert__icon, .pf-v5-c-alert .pf-v5-c-alert__icon .fa{ color:inherit !important; }

/* ── Placeholder colour (text set by js/c8e-login.js) ── */
::placeholder{ color:var(--c8e-text-3) !important; opacity:1 !important; }
input::placeholder{ color:var(--c8e-text-3) !important; opacity:1 !important; }

/* ── Checkbox accent ── */
input[type=checkbox]{ accent-color:var(--c8e-accent) !important; }