/* TokenKey login theme — paint over keycloak.v2, do not replace it.
 *
 * Loaded after the parent's css/styles.css (see theme.properties). Selectors
 * here were taken from the rendered DOM rather than guessed: the show/hide
 * password control is .pf-m-control, the typeface is set on body by the
 * PatternFly bundle, and the page's only hooks for branding are #kc-header
 * and the realm's displayNameHtml inside #kc-header-wrapper.
 *
 * The layout matches the console's own sign-in page (apps/console/app/login):
 * a brand panel on the left — lockup, headline, the ribbon render — and the
 * form card on the right, on obsidian with the site's cyan/azure/gold. Both
 * pseudo-elements a header can offer are spent on that panel, which is why
 * the headline is split the way it is (see "brand panel" below). Phones get
 * the card alone.
 *
 * The palette is copied from apps/console/app/globals.css rather than
 * imported: a Keycloak theme is served by a different application and cannot
 * reach the Next bundle. The two are meant to stay in step, and so is the
 * headline, which is lib/content.ts's ENGINE lines written into CSS.
 *
 * Keycloak caches themes in production. After changing this file, restart
 * the keycloak container or the old CSS keeps serving under the old resource
 * hash.
 *
 * Covers login, registration, password reset, OTP, "account exists" and the
 * error screens — they share these card and form primitives.
 */

:root {
  --tk-bg: #0b0b0e;
  --tk-surface: #101016;
  --tk-card-border: rgba(255, 255, 255, 0.1);
  --tk-hairline: rgba(255, 255, 255, 0.12);
  --tk-ink: rgba(255, 255, 255, 0.92);
  --tk-ink-muted: rgba(255, 255, 255, 0.7);
  --tk-ink-faint: rgba(255, 255, 255, 0.45);
  --tk-cyan: #00e5ff;
  --tk-cyan-glow: rgba(0, 229, 255, 0.55);
  --tk-azure: #13aace;
  --tk-gold: #f2c66d;
  --tk-gold-glow: rgba(242, 198, 109, 0.35);
  --tk-danger: #ff6b5b;
  --tk-success: #34d399;

  /* Inter, the same face the site uses, served from this theme's own
     resources. PatternFly ships Red Hat Text, which is the loudest single
     signal that these pages belong to other software.

     Self-hosted rather than pulled from a font CDN: a webfont request on the
     sign-in page hands every visitor's IP to a third party, which is a poor
     trade for a product whose central claim is that data stays in India. */
  --tk-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --tk-mono: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

/* Inter as a variable font: one file covers every weight from 100 to 900.
   The two subsets carry the unicode ranges Google publishes for it — latin
   for English, latin-ext only when a name on the registration form needs an
   accented character, so the common case pays 48 KB rather than 133 KB.
   font-display:swap so a slow font never blocks the sign-in form. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- typography ----------
   PatternFly sets font-family on body and on several components; the
   wildcard is blunt but keeps one typeface across screens we have not
   individually inspected. Monospace and icon fonts are exempted. */

html,
body,
.pf-v5-c-login,
.pf-v5-c-login *:not(code):not(pre):not(kbd):not([class*="fa-"]):not(.fas):not(.far) {
  font-family: var(--tk-font) !important;
}

/* ---------- page ground ---------- */

html,
body,
.login-pf,
.login-pf-page,
.pf-v5-c-login,
.pf-v5-c-background-image {
  background: var(--tk-bg) !important;
  color: var(--tk-ink);
}

.pf-v5-c-background-image::before {
  background-image: none !important;
}

body {
  /* The site's faint grid, masked so it fades rather than ending at an edge,
     under a brand-tinted bloom in the top-left where the panel sits. */
  background:
    radial-gradient(ellipse 60% 55% at 22% 30%, rgba(0, 229, 255, 0.07), transparent 70%),
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 56px 56px,
    var(--tk-bg) !important;
  color: var(--tk-ink);
  -webkit-font-smoothing: antialiased;
}

/* ---------- layout ----------
   PatternFly stacks header, main and footer in one narrow column. Below
   1024px that is right; above it the header becomes the brand panel and
   sits beside the card. Everything is !important because the parent sets
   these through custom properties at several breakpoints. */

.pf-v5-c-login {
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 32px 20px !important;
}

.pf-v5-c-login__container {
  display: block !important;
  width: 100% !important;
  max-width: 440px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

@media (min-width: 1024px) {
  .pf-v5-c-login__container {
    display: grid !important;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 440px) !important;
    grid-template-areas: "brand card" !important;
    column-gap: 80px !important;
    align-items: center !important;
    max-width: 1160px !important;
  }
  .pf-v5-c-login__header {
    grid-area: brand !important;
  }
  .pf-v5-c-login__main {
    grid-area: card !important;
  }
}

/* ---------- brand panel ----------
   #kc-header holds only #kc-header-wrapper, which holds the realm's
   displayNameHtml: <span><img/><span>TokenKey</span></span>. That leaves
   exactly two pseudo-elements on the header and two on the wrapper to
   build the panel from, so:

     #kc-header-wrapper          the lockup (mark + wordmark)
     #kc-header-wrapper::after   headline, lines one and two
     #kc-header::before          headline, line three, in cyan
     #kc-header::after           the ribbon render

   The wrapper's ::after is used for the white lines because a pseudo-element
   on the header cannot be placed between the wrapper and another
   pseudo-element on the header; the order is wrapper, ::before, ::after,
   and the cyan line has to follow the white ones. */

#kc-header,
.pf-v5-c-login__header {
  background: transparent !important;
  border: 0 !important;
  margin: 0 0 22px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
}

#kc-header-wrapper,
#kc-header-wrapper.pf-v5-c-brand {
  background: none !important;
  color: var(--tk-ink) !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: auto !important;
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  /* keycloak.v2 sets uppercase, wide tracking and a large font on this
     wrapper for its own text-only header. All three are undone here, and
     again on the pseudo-elements, which inherit them. */
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  text-align: left !important;
}

/* The lockup's layout lives here, NOT in the realm's displayNameHtml:
   Keycloak sanitises that field and strips inline styles outright. */
#kc-header-wrapper > span {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  line-height: 1;
}

#kc-header-wrapper img {
  display: block; /* kills the inline-image descender gap */
  height: 30px;
  width: auto;
  flex: none;
}

#kc-header-wrapper span span {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--tk-ink);
  /* Optical, not geometric: the ribbon's visual mass sits slightly high in
     its box, so centring the boxes leaves the wordmark reading low. */
  padding-top: 1px;
}

#kc-header-wrapper::after,
#kc-header::before,
#kc-header::after {
  display: none;
}

@media (min-width: 1024px) {
  #kc-header,
  .pf-v5-c-login__header {
    align-items: flex-start;
    margin-bottom: 0 !important;
  }
  #kc-header-wrapper {
    justify-content: flex-start;
  }

  /* Headline: ENGINE.headline and headlineSecond from lib/content.ts. */
  #kc-header-wrapper::after {
    content: "Enterprise-Grade AI.\A Built for India.";
    display: block;
    flex-basis: 100%;
    white-space: pre-line;
    text-transform: none;
    text-align: left;
    margin-top: 44px;
    font-size: 34px;
    line-height: 1.12;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--tk-ink);
  }

  /* ENGINE.headlineAccent, in the same cyan as the site. */
  #kc-header::before {
    content: "Deployed in Amaravati.";
    display: block;
    order: 1;
    text-transform: none;
    text-align: left;
    font-size: 34px;
    line-height: 1.12;
    font-weight: 600;
    letter-spacing: -0.03em;
    color: var(--tk-cyan);
  }

  /* The ribbon render, generated from the console's own asset at 900px wide
     (deploy/keycloak/themes/tokenkey/login/resources/img/ribbon-hero.webp).
     Same drift as the console's sign-in page. */
  #kc-header::after {
    content: "";
    display: block;
    order: 2;
    margin-top: 40px;
    width: 100%;
    max-width: 480px;
    aspect-ratio: 900 / 417;
    background: url("../img/ribbon-hero.webp") left center / contain no-repeat;
    filter: saturate(1.05) drop-shadow(0 0 60px rgba(0, 229, 255, 0.14));
    animation: tkFloat 8s ease-in-out infinite alternate;
  }
}

@keyframes tkFloat {
  from {
    transform: translateY(0) rotate(-1deg);
  }
  to {
    transform: translateY(-14px) rotate(1deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  #kc-header::after {
    animation: none;
  }
}

/* ---------- the card ---------- */

.pf-v5-c-login__main,
.card-pf {
  position: relative;
  background: var(--tk-surface) !important;
  border: 1px solid var(--tk-card-border) !important;
  border-radius: 16px !important;
  box-shadow:
    0 40px 90px -40px rgba(0, 229, 255, 0.28),
    0 30px 70px -40px rgba(0, 0, 0, 0.9) !important;
  color: var(--tk-ink) !important;
  padding: 10px 8px 14px !important;
  overflow: visible !important;
}

/* The CTA ramp as a hairline along the card's top edge. */
.pf-v5-c-login__main::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 28px;
  right: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--tk-cyan-glow), var(--tk-gold-glow), transparent);
}

.pf-v5-c-login__main-header,
.pf-v5-c-login__main-body,
.pf-v5-c-login__main-footer {
  background: transparent !important;
}

.pf-v5-c-login__main-header {
  /* PatternFly lays this out as a row (title left, description right). With
     an eyebrow and a subtitle added as pseudo-elements it has to stack. */
  display: block !important;
  padding-bottom: 6px !important;
}

/* An eyebrow above the title, in the site's mono register. */
.pf-v5-c-login__main-header::before {
  content: "TokenKey console";
  display: block;
  margin-bottom: 10px;
  font-family: var(--tk-mono) !important;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tk-ink-faint);
}

#kc-page-title,
.pf-v5-c-login__main-header-desc,
.pf-v5-c-title,
h1,
h2,
h3 {
  color: var(--tk-ink) !important;
  letter-spacing: -0.02em;
}

#kc-page-title {
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

/* A line under the title, chosen per screen with :has(). Screens without
   a match get none, which is better than a wrong one. */
.pf-v5-c-login__main:has(#kc-form-login) .pf-v5-c-login__main-header::after {
  content: "Use your institution account. New accounts are reviewed before access is granted.";
}
.pf-v5-c-login__main:has(#kc-register-form) .pf-v5-c-login__main-header::after {
  content: "Use your institution email. An administrator reviews every new account before it can send requests.";
}
.pf-v5-c-login__main:has(#kc-reset-password-form) .pf-v5-c-login__main-header::after {
  content: "Enter the email you registered with and we will send a reset link.";
}
.pf-v5-c-login__main-header::after {
  display: block;
  margin-top: 8px;
  margin-bottom: 18px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--tk-ink-muted);
}

label,
.pf-v5-c-form__label,
.pf-v5-c-form__label-text {
  color: var(--tk-ink-muted) !important;
  font-weight: 500;
  font-size: 12.5px !important;
}

.pf-v5-c-form__label-required {
  color: var(--tk-gold) !important;
}

.subtitle .pf-v5-c-helper-text__item-text {
  font-family: var(--tk-mono) !important;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---------- inputs ---------- */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea,
.pf-v5-c-form-control {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--tk-card-border) !important;
  border-radius: 10px !important;
  color: var(--tk-ink) !important;
  font-size: 14.5px !important;
  min-height: 44px;
  transition: border-color 160ms ease, background 160ms ease;
}

.pf-v5-c-form-control input {
  padding: 0 14px !important;
  height: 42px;
}

.pf-v5-c-form-control:hover {
  border-color: rgba(255, 255, 255, 0.18) !important;
}

/* PatternFly draws focus and status lines with pseudo-elements; the ring
   below replaces them, and both together give a doubled highlight. */
.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after {
  border: 0 !important;
  display: none !important;
}

input:focus,
select:focus,
textarea:focus {
  outline: none !important;
}

.pf-v5-c-form-control:focus-within {
  border-color: var(--tk-cyan) !important;
  box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.18) !important;
}

input::placeholder {
  color: var(--tk-ink-faint) !important;
}

/* Chrome paints autofilled fields a solid pale blue, which on a dark card
   looks like a rendering fault. There is no property to disable it; the
   long inset shadow is the standard way to cover it. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--tk-surface) inset !important;
  -webkit-text-fill-color: var(--tk-ink) !important;
  caret-color: var(--tk-ink);
}

/* ---------- the show/hide password control ----------
   .pf-v5-c-button.pf-m-control — a distinct PatternFly variant from primary
   and secondary. It sits inside the input group, so it is styled to read as
   part of the field rather than as a button beside it. */

.pf-v5-c-button.pf-m-control,
button[data-password-toggle] {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--tk-card-border) !important;
  border-left: 0 !important;
  border-radius: 0 10px 10px 0 !important;
  color: var(--tk-ink-faint) !important;
  box-shadow: none !important;
  min-height: 44px;
  width: 46px;
}

.pf-v5-c-button.pf-m-control i {
  color: inherit !important;
}

.pf-v5-c-button.pf-m-control:hover,
button[data-password-toggle]:hover {
  color: var(--tk-cyan) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

.pf-v5-c-button.pf-m-control::before,
.pf-v5-c-button.pf-m-control::after {
  border: 0 !important;
  display: none !important;
}

/* The field beside it loses its right radius so the pair reads as one
   control rather than two abutting boxes. */
.pf-v5-c-input-group .pf-v5-c-form-control {
  border-radius: 10px 0 0 10px !important;
}

.pf-v5-c-input-group,
.pf-v5-c-input-group__item {
  background: transparent !important;
}

.pf-v5-c-input-group:focus-within .pf-v5-c-button.pf-m-control {
  border-color: var(--tk-cyan) !important;
}

/* ---------- primary action: the site's CTA ramp ---------- */

.pf-v5-c-button.pf-m-primary,
input[type="submit"],
#kc-login {
  background: linear-gradient(135deg, var(--tk-cyan) 0%, var(--tk-azure) 55%, var(--tk-gold) 100%)
    !important;
  /* Dark label, as on the site: every stop of this ramp clears 4.5:1 against
     it. Do not switch to white without re-checking — the cyan end is 1.4:1. */
  color: #0b0b0e !important;
  border: 0 !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  min-height: 46px;
  margin-top: 6px;
  box-shadow:
    0 0 0 1px var(--tk-cyan-glow),
    0 12px 32px -10px var(--tk-cyan-glow),
    0 10px 30px -12px var(--tk-gold-glow) !important;
  transition: transform 250ms ease, box-shadow 250ms ease, filter 250ms ease;
}

.pf-v5-c-button.pf-m-primary:hover,
input[type="submit"]:hover,
#kc-login:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow:
    0 0 0 1px var(--tk-cyan-glow),
    0 18px 40px -10px var(--tk-cyan-glow),
    0 14px 36px -12px var(--tk-gold-glow) !important;
}

.pf-v5-c-button.pf-m-primary:focus-visible,
#kc-login:focus-visible {
  outline: 2px solid var(--tk-cyan) !important;
  outline-offset: 3px;
}

.pf-v5-c-button.pf-m-secondary,
.pf-v5-c-button.pf-m-link {
  background: transparent !important;
  border: 1px solid var(--tk-card-border) !important;
  color: var(--tk-ink) !important;
  border-radius: 12px !important;
}

/* ---------- links ---------- */

a,
#kc-info a,
.pf-v5-c-login__main-footer-band a {
  color: var(--tk-cyan) !important;
  text-decoration: none;
  transition: opacity 160ms ease;
}

a:hover {
  opacity: 0.85;
  text-decoration: underline;
}

/* "Forgot Password?" sits under the password field; keep it small and calm. */
.pf-v5-c-form__helper-text a {
  font-size: 12.5px;
}

/* ---------- footer band: "New user? Register" ----------
   The link becomes a ghost pill, so registering reads as the second action
   of the page rather than a footnote. Same treatment for "Back to Login". */

#kc-registration,
#kc-registration-container,
.pf-v5-c-login__main-footer-band {
  background: transparent !important;
  color: var(--tk-ink-muted) !important;
  border-top: 1px solid var(--tk-hairline) !important;
  padding-top: 18px !important;
  margin-top: 6px;
  text-align: center;
}

#kc-registration > span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

#kc-registration a,
#kc-form-options a,
#backToApplication {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border: 1px solid var(--tk-card-border) !important;
  border-radius: 999px;
  color: var(--tk-ink) !important;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none !important;
  transition: border-color 200ms ease, background 200ms ease;
}

#kc-registration a:hover,
#kc-form-options a:hover,
#backToApplication:hover {
  border-color: rgba(0, 229, 255, 0.4) !important;
  background: rgba(0, 229, 255, 0.05);
  opacity: 1;
}

#kc-form-options {
  text-align: center;
  padding-top: 14px;
}

/* ---------- messages ---------- */

.pf-v5-c-alert {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--tk-card-border) !important;
  border-radius: 12px !important;
  color: var(--tk-ink-muted) !important;
  box-shadow: none !important;
}

.pf-v5-c-alert.pf-m-danger {
  border-color: rgba(255, 107, 91, 0.5) !important;
  background: rgba(255, 107, 91, 0.06) !important;
}

.pf-v5-c-alert.pf-m-success {
  border-color: rgba(52, 211, 153, 0.5) !important;
  background: rgba(52, 211, 153, 0.06) !important;
}

.pf-v5-c-alert__title,
.pf-v5-c-alert__description {
  color: var(--tk-ink) !important;
}

.pf-v5-c-alert.pf-m-danger .pf-v5-c-alert__icon,
.pf-m-error,
#input-error,
[id^="input-error"],
.pf-v5-c-helper-text__item.pf-m-error .pf-v5-c-helper-text__item-text {
  color: var(--tk-danger) !important;
}

.pf-v5-c-helper-text__item-text,
.pf-v5-c-form__helper-text,
small {
  color: var(--tk-ink-faint) !important;
}

/* Fields that failed validation. */
.pf-v5-c-form-control.pf-m-error,
.pf-v5-c-form-control[aria-invalid="true"],
input[aria-invalid="true"] {
  border-color: rgba(255, 107, 91, 0.6) !important;
}

/* ---------- chrome ---------- */

.pf-v5-c-dropdown__menu,
.pf-v5-c-menu,
.pf-v5-c-menu__content {
  background: var(--tk-surface) !important;
  border: 1px solid var(--tk-card-border) !important;
  color: var(--tk-ink) !important;
}

.pf-v5-c-check__label,
.pf-v5-c-check__input + label {
  color: var(--tk-ink-muted) !important;
}

::selection {
  background: var(--tk-cyan-glow);
}