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

/* tailwind-login.css (login.ftl's compiled utilities) is built with
   corePlugins.preflight disabled, so this theme's other PatternFly-based
   pages don't get globally reset — but that also drops the small set of
   custom-property defaults (--tw-ring-*, --tw-shadow, --tw-translate-*, …)
   and the border-width:0/border-style:solid box-model reset that Preflight
   normally provides, which utilities like `border`, `ring-2` and `focus:*`
   read via var() with no fallback. Without these, ring/shadow utilities
   silently compute to nothing and bare `border` picks up the browser's
   native (often "inset") border-style. Re-supply just that subset, scoped
   to the login form so the rest of the page is unaffected. */
/* :where(...) keeps this whole selector's specificity at zero, so any of
   login.ftl's own utility classes (e.g. `.border`, `.border-slate-200`)
   still win the cascade normally — a bare `#kc-form-login *` selector would
   outrank those (ID > class) and defeat the very classes it's meant to
   support. */
:where(#kc-form-login, #kc-form-login *, #kc-form-login *::before, #kc-form-login *::after) {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: currentColor;
  --tw-border-opacity: 1;
  --tw-bg-opacity: 1;
  --tw-text-opacity: 1;
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-inset: ;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
}

/* Century Gothic — Portal's heading font (see src/lib/fonts.ts), used only
   for headings there while body text stays on Inter. Same files as
   public/fonts/century-gothic/. */
@font-face {
  font-family: 'Century Gothic';
  src: url('../fonts/century-gothic-regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Century Gothic';
  src: url('../fonts/century-gothic-bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Split-screen showcase panel, ported 1:1 from Portal's own
   src/components/login-showcase.tsx (bg-slate-900, black/70→black/25→black/10
   gradient, rounded right corners, pt-32 heading block, text-4xl/text-xl). */
.egi-shell {
  display: flex;
  min-height: 100vh;
}

.egi-showcase {
  display: none;
}

.egi-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

@media (min-width: 1024px) {
  .egi-showcase {
    display: block;
    position: relative;
    width: 50%;
    min-height: 100vh;
    flex-shrink: 0;
    background-color: #0f172a;
    background-image: url('../img/login-panel.jpg');
    background-size: cover;
    background-position: center;
    /* The compositing hints below stop the hard pixel stair-stepping
       Chrome/Edge draw along an overflow:hidden rounded edge on a large
       background image, so the curve reads smooth at this radius. */
    border-top-right-radius: 2rem;
    border-bottom-right-radius: 2rem;
    overflow: hidden;
    isolation: isolate;
    transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
  }

  .egi-showcase-overlay {
    position: absolute;
    inset: 0;
    border-top-right-radius: inherit;
    border-bottom-right-radius: inherit;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.7),
      rgba(0, 0, 0, 0.25) 40%,
      rgba(0, 0, 0, 0.1)
    );
  }

  .egi-showcase-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 8rem 3rem 0;
  }

  .egi-showcase-text h2 {
    margin: 0;
    margin-left: 3rem;
    color: #ffffff;
    font-family: 'Century Gothic', 'Inter', sans-serif;
    font-weight: 700;
    font-size: 2.25rem;
    line-height: 1.625; /* Tailwind's leading-relaxed */
    letter-spacing: -0.025em; /* Tailwind's tracking-tight */
  }

  .egi-showcase-text h2 span {
    display: block;
    font-size: 1.25rem;
    line-height: 1.75rem; /* Tailwind's text-xl pairs this line-height */
    white-space: nowrap;
  }

  .egi-panel {
    width: 50%;
  }
}

.pf-v5-c-login {
  width: 100%;
  flex: 1;
  min-height: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Matches Portal's outer wrapper (login-form.tsx: "px-6 py-10 sm:px-10")
     — this is the only padding layer; .pf-v5-c-login__main below must stay
     unpadded so its content reaches the full max-w-md (448px). py-10 (40px
     vertical) applies unconditionally; px-6 (24px horizontal) only below
     Tailwind's sm breakpoint (640px), bumped to px-10 (40px) at/above it. */
  padding: 2.5rem 1.5rem;
}

@media (min-width: 640px) {
  .pf-v5-c-login {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}

:root {
  --pf-v5-global--primary-color--100: #193e13;
  --pf-v5-global--primary-color--200: #134e4a;
  --pf-v5-global--link--Color: #193e13;
  --pf-v5-global--link--Color--hover: #134e4a;
  --pf-v5-global--BackgroundColor--100: #fdfcf8;
  --pf-v5-global--FontFamily--sans-serif: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

html,
body,
body#keycloak-bg {
  background: #fdfcf8 !important;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  /* Portal's original login page has no dark-mode variant at all — always
     the cream/light design. Without this, a browser/OS set to dark mode
     renders native form controls (the "Remember me" checkbox, scrollbars)
     with their dark UA styling, which the original never does either. */
  color-scheme: light;
}

.pf-v5-c-login {
  background: #fdfcf8;
}

/* Portal's own form (src/components/login-form.tsx) sits directly on the
   cream background with no card/shadow - match that instead of PatternFly's
   default boxed login panel. */
.pf-v5-c-login__main {
  background: transparent;
  box-shadow: none;
  width: 100%;
  max-width: 28rem;
  /* PatternFly's own grid track for this card is a fixed 544px — wider
     than our 448px (28rem) card, so it was left-aligning within that
     wider cell (grid's default justify-items behavior for a capped-width
     item) instead of sitting centered like the rest of this layout. */
  margin-left: auto;
  margin-right: auto;
}

/* Portal shows a single centered "Sign in" heading with no separate
   wordmark above it. */
#kc-header {
  display: none;
}

.pf-v5-c-login__main-header {
  /* PatternFly lays this out as a 2-column grid (title + a language-switcher
     slot we don't use, since this realm has no locale picker) — the title
     was shrink-wrapping into the first ~246px column instead of spanning
     the card's full width, so text-align:center only centered it within
     that narrow column, not the card. */
  display: block;
  text-align: center;
}

.pf-v5-c-login__main-header .pf-v5-c-title,
#kc-page-title {
  color: #193e13;
  font-weight: 700;
  font-family: 'Century Gothic', 'Inter', sans-serif;
  font-size: 2.25rem;
  line-height: 2.5rem; /* Tailwind's text-4xl pairs this line-height */
  letter-spacing: -0.025em; /* Tailwind's tracking-tight */
}

.pf-v5-c-form__label,
.pf-v5-c-form__label-text {
  color: #334155 !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important; /* Tailwind's text-sm pairs this line-height */
}

/* mb-2 — the label itself, not `.pf-v5-c-form__group-label` (that class
   isn't actually present in this theme's rendered markup; the label is a
   direct child of `.pf-v5-c-form__group` with no such wrapper). */
.pf-v5-c-form__label {
  display: block !important;
  margin-bottom: 0.5rem !important;
}

/* "Remember me" checkbox label — same invisible-white-text issue as the
   Email/Password labels above, different PatternFly class. */
.pf-v5-c-check__label {
  color: #475569 !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important; /* Tailwind's text-sm pairs this line-height */
}

.pf-v5-c-check {
  display: flex !important;
  align-items: center !important;
  gap: 0.625rem !important; /* gap-2.5 */
}

/* Native checkbox rendering ignores border-radius/background overrides
   (appearance: auto) — Portal's original uses @tailwindcss/forms' custom
   checkbox (appearance: none + a background-image checkmark when :checked),
   reproduced here the same way rather than relying on accent-color. */
.pf-v5-c-check__input {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 1rem !important; /* h-4 */
  height: 1rem !important; /* w-4 */
  margin: 0 !important;
  padding: 0 !important;
  background-color: #ffffff;
  background-origin: border-box;
  border: 1px solid #cbd5e1 !important; /* border-slate-300 */
  border-radius: 0.25rem !important; /* rounded */
  color: #193e13;
  flex-shrink: 0;
}

.pf-v5-c-check__input:checked {
  background-color: #193e13;
  border-color: #193e13 !important;
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.pf-v5-c-check__input:focus {
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(25, 62, 19, 0.2) !important; /* focus:ring-[#193e13]/20 */
}

/* PatternFly gives .pf-v5-c-login__main-body 48px of its own left/right
   padding, shrinking the 448px card down to a 304px content area for the
   form — Portal's original has only one layer of padding (the card itself),
   not a second nested one, so the form should reach the card's full width. */
.pf-v5-c-login__main-body {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#kc-form-login.pf-v5-c-form {
  margin-top: 2rem; /* mt-8, gap between "Sign in" and the first field */
  gap: 1.25rem !important; /* space-y-5, between each field/row */
}

.pf-v5-c-form-control {
  width: 100% !important;
  border-radius: 0.75rem !important;
  border: 1px solid #e2e8f0 !important; /* border border-slate-200 — PatternFly's
    span has no border by default (width/style both 0), only setting
    border-color left it invisible */
  background-color: #ffffff !important;
  color: #0f172a !important;
}

/* PatternFly draws its default focus indicator as a blue ::after underline
   (border-bottom) on the form-control span, separate from the border/ring
   this theme already draws on :focus below — Portal's original has no such
   underline, just the border-color + ring-2 focus state. */
.pf-v5-c-form-control::after,
.pf-v5-c-input-group::after {
  display: none !important;
}

/* :focus-within, not :focus — the span itself is never the focused element,
   the <input> inside it is. */
.pf-v5-c-form-control:focus-within {
  /* Portal's inputs focus to the "egi-primary" teal token (#0f766e), a
     different color from the hardcoded green (#193e13) used for the
     heading/button elsewhere on this same page — an inconsistency in the
     original design, reproduced here rather than "fixed". */
  border-color: #0f766e !important;
  box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.2) !important;
}

/* `.pf-v5-c-form-control` is a `<span>` wrapper around the real `<input>` —
   the border/background/radius above style the span, this styles the text
   itself, which otherwise keeps the browser's default ~304px/16px sizing. */
.pf-v5-c-form-control input {
  width: 100% !important;
  box-sizing: border-box;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important; /* Tailwind's text-sm pairs this line-height */
  color: #0f172a !important;
  padding: 0 !important;
}

.pf-v5-c-form-control input::placeholder {
  color: #94a3b8 !important; /* Tailwind's placeholder:text-slate-400 */
  opacity: 1;
}

.pf-v5-c-form-control {
  padding: 0.75rem 1rem !important;
}

/* The password field is the one input wrapped in a .pf-v5-c-input-group
   (email isn't — it's a bare .pf-v5-c-form-control span) — PatternFly lays
   the text span and the show/hide button out as two adjacent boxes, each
   with their own border/radius, instead of Portal's original single
   seamless box with the eye icon absolutely positioned inside it. Move the
   visible box (border/radius/background/focus ring) to the group itself so
   it renders as one box spanning the email field's same full width, and
   strip those same properties back off the inner span so it doesn't draw
   a second, narrower one inside it. */
.pf-v5-c-input-group {
  display: flex;
  align-items: stretch;
  width: 100%;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  background-color: #ffffff;
}

.pf-v5-c-input-group:focus-within {
  border-color: #0f766e;
  box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.2);
}

.pf-v5-c-input-group .pf-v5-c-form-control {
  flex: 1;
  width: auto !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.pf-v5-c-input-group .pf-v5-c-form-control:focus-within {
  border: none !important;
  box-shadow: none !important;
}

.pf-v5-c-input-group__item {
  display: flex;
  align-items: center;
}

.pf-v5-c-input-group__item .pf-v5-c-button {
  color: #94a3b8 !important; /* text-slate-400 */
  padding: 0 0.75rem !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.pf-v5-c-input-group__item .pf-v5-c-button:hover {
  color: #475569 !important; /* hover:text-slate-600 */
}

/* Keycloak's base theme toggles this button's Font Awesome icon between
   fa-eye/fa-eye-slash (a filled glyph, different style entirely from
   Portal's outlined Heroicons-style SVG) — hide the FA glyph and redraw it
   with the exact same SVG path data as login-form.tsx's EyeIcon, swapped via
   the same class toggle passwordVisibility.js already does. */
[data-password-toggle] i.fa-eye,
[data-password-toggle] i.fa-eye-slash {
  display: inline-block;
  width: 1.25rem; /* h-5 w-5 */
  height: 1.25rem;
  font-size: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

[data-password-toggle] i.fa-eye::before,
[data-password-toggle] i.fa-eye-slash::before {
  content: none;
}

[data-password-toggle] i.fa-eye {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.036 12.322a1 1 0 0 1 0-.644C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .644C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z'/%3E%3Cpath d='M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.036 12.322a1 1 0 0 1 0-.644C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .644C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z'/%3E%3Cpath d='M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z'/%3E%3C/svg%3E");
}

[data-password-toggle] i.fa-eye-slash {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.98 8.223A10.477 10.477 0 0 0 1.934 12c1.292 2.4 4.006 6 10.066 6 1.563 0 3.022-.29 4.332-.818M6.228 6.228A10.45 10.45 0 0 1 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .644a10.46 10.46 0 0 1-1.272 2.01M6.228 6.228 18.772 18.772M6.228 6.228 3 3m15.772 15.772L21 21'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.98 8.223A10.477 10.477 0 0 0 1.934 12c1.292 2.4 4.006 6 10.066 6 1.563 0 3.022-.29 4.332-.818M6.228 6.228A10.45 10.45 0 0 1 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .644a10.46 10.46 0 0 1-1.272 2.01M6.228 6.228 18.772 18.772M6.228 6.228 3 3m15.772 15.772L21 21'/%3E%3C/svg%3E");
}

.pf-v5-c-form__group-control {
  width: 100%;
}

.pf-v5-c-form__actions,
.pf-v5-c-form__group {
  width: 100% !important;
  margin: 0 !important;
}

.pf-v5-c-form__actions > * {
  margin: 0 !important;
}

/* Unlike Portal's original (where the Turnstile widget and the Sign in
   button are separate top-level form children, both getting the form's own
   space-y-5 gap), this theme's login.ftl nests them as two children of the
   same .pf-v5-c-form__group — the margin:0 above zeroes the gap between them
   that the parent's own display:block layout doesn't provide on its own. */
.egi-turnstile + .pf-v5-c-form__actions {
  margin-top: 1.25rem !important; /* space-y-5 */
}

.pf-v5-c-button.pf-m-primary {
  width: 100%;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important; /* Tailwind's text-sm pairs this line-height */
  font-weight: 600 !important;
  padding: 0.875rem 1rem !important;
}

.pf-v5-c-button.pf-m-primary {
  background-color: #193e13 !important;
  border-color: #193e13 !important;
  border-radius: 0.75rem !important;
}

.pf-v5-c-button.pf-m-primary:hover {
  background-color: #134e4a !important;
  border-color: #134e4a !important;
}

a,
.pf-v5-c-login__main-footer-links a {
  color: #193e13;
}

a:hover,
.pf-v5-c-login__main-footer-links a:hover {
  color: #134e4a;
}

#kc-form-options a,
.pf-v5-c-login__main-footer-band a {
  color: #193e13;
}

/* login.ftl's own markup (not PatternFly's) — Tailwind's utilities are
   loaded with preflight disabled (to avoid resetting the rest of this
   theme's other, still-PatternFly-based pages), so native <button> chrome
   needs resetting by hand. Scoped to just the password-toggle button (not
   every button in the form) so it doesn't outrank the submit button's own
   Tailwind background/padding classes, which come later in the cascade at
   lower (class-only) specificity. */
#kc-form-login button[data-password-toggle] {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  /* The button's own box (26px, from its inherited line-height) is taller
     than the 20px icon inside it, and a plain inline-block icon sits at the
     top of that box rather than centering — flex is what actually centers
     it regardless of the button's height. */
  display: flex;
  align-items: center;
  justify-content: center;
}

.egi-turnstile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 4rem; /* min-h-16 */
  box-sizing: border-box;
  padding: 0.625rem 0.875rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  background: #fafafa;
}

.egi-turnstile-check {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  background: #16a34a;
  color: #ffffff;
}

.egi-turnstile-check svg {
  width: 0.875rem;
  height: 0.875rem;
}

.egi-turnstile-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.egi-turnstile-label {
  font-size: 0.8125rem;
  color: #334155;
}

.egi-turnstile-note {
  font-size: 0.6875rem;
  color: #dc2626;
}

.egi-turnstile-brand {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.125rem;
}

.egi-turnstile-brand-name {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.02em;
}

.egi-turnstile-brand-links {
  font-size: 0.625rem;
  color: #94a3b8;
}

/* Matches Portal's own footer text (login-form.tsx: "pb-6 text-center
   text-xs text-slate-400"). */
.egi-powered-by {
  margin: 0;
  padding-bottom: 1.5rem;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1rem; /* Tailwind's text-xs pairs this line-height */
  color: #94a3b8;
}

/* Non-error messages Keycloak renders itself (the "change your password" notice, an expired
   session, ...) float just above the title instead of sitting between the title and the form.
   Errors stay under the title, like the Portal's own wrong-password banner. In the flow they would push the form down, and the Update password
   page, which always starts with a notice, would not line up with the sign-in page (whose own
   wrong-password banner the Portal inlines under the title, as in its original form). Anchored
   to the top of the card body (whose top edge is the first label's, the form's own mt-8 having
   collapsed outside it), 104px up: the 32px of that margin, the 16px gap above the form, the title
   (40px) and a 16px gap above it. translateY(-100%) lets a longer message grow upwards instead
   of over the title. */
.pf-v5-c-login__main-body {
  position: relative;
}
.egi-float-alert {
  position: absolute;
  left: 0;
  right: 0;
  top: -104px;
  transform: translateY(-100%);
  margin: 0 !important;
}