/*
 * Caris login screen.
 *
 * The login page is the first screen anyone sees, and until now it was PatternFly's dark default —
 * the only screen in the product that did not look like the product. This brings it onto the brand
 * guide, following the "Connexion" mock-up of the design dossier.
 *
 * It restyles keycloak.v2 rather than replacing its templates. Keycloak's markup carries CSRF
 * fields, error containers, WebAuthn hooks and credential selection that a hand-written template
 * would have to reproduce and then keep reproducing at every upgrade. Colour is cheaper to own
 * than markup.
 *
 * Values come from web/tailwind.config.ts, not from the mock-up. Four of the seven colours are
 * identical; three differ by a hair (#f2ede0 against #F3EEE3, #6e6140 against #6F5F41, and a hover
 * tone the guide does not carry). The guide wins: its contrast ratios are measured against
 * WCAG 2.1 rather than estimated, and `npm run lint:brand` checks them. A login screen one shade
 * off the rest of the product is exactly the drift this file exists to remove.
 */

/* Radii follow the brand guide — field and button 10px, pill 999px — and not the 8px the mock-ups
 * happen to use. There is one scale for the product, and this is the first screen anyone sees: a
 * button that is 8px here and 10px one screen later is the kind of difference nobody can name and
 * everybody notices. The reveal control inside the password field sits one step down, at 8px,
 * because it is a control within a control rather than a second button.
 *
 * The tokens live in web/tailwind.config.ts, which `make lint` checks. This file cannot read them —
 * Keycloak serves its own CSS — so the values are duplicated here deliberately, and that
 * duplication is the reason this note exists. */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;450;500;600&family=Source+Serif+4:opsz,wght@8..60,600&display=swap");

:root {
  --caris-ink: #17140E;
  --caris-gold: #85754E;
  --caris-gold-text: #6F5F41;
  --caris-gold-bg: #F3EEE3;
  --caris-surface: #FAF8F3;
  --caris-line: #E7E1D4;
  --caris-muted: #6E685C;
  --caris-danger: #9E2B25;
  --caris-danger-bg: #F6DEDB;
}

/* PatternFly ships this page in dark mode. Neutralising the class is not enough — the variables
   are what the components read — so the handful that decide the page are reset here. */
.pf-v5-theme-dark,
html.pf-v5-theme-dark {
  --pf-v5-global--BackgroundColor--100: var(--caris-surface);
  --pf-v5-global--BackgroundColor--200: #ffffff;
  --pf-v5-global--Color--100: var(--caris-ink);
  --pf-v5-global--Color--200: var(--caris-muted);
  --pf-v5-global--BorderColor--100: var(--caris-line);
  --pf-v5-global--link--Color: var(--caris-gold-text);
  color-scheme: light;
}

html,
body.login-pf,
.login-pf body {
  height: 100%;
  background: var(--caris-surface);
  color: var(--caris-ink);
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* keycloak.v2 paints a background image behind everything. */
#keycloak-bg,
.login-pf-page .login-pf-page-header,
body.login-pf::before {
  background: var(--caris-surface) !important;
  background-image: none !important;
}

.pf-v5-c-login {
  background: transparent;
}

/*
 * PatternFly lays this out as a two-column grid — `"main header"` — with the card on the left and
 * the heading beside it. The mock-up stacks them, so the template is redefined rather than fought:
 * naming the areas in one column moves the children without touching their own `grid-area`, which
 * is what PatternFly sets on each of them.
 */
.pf-v5-c-login__container {
  display: grid;
  grid-template-areas: "header" "main" "footer";
  grid-template-columns: minmax(0, 1fr);
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
  /* PatternFly puts 98px of side padding here, which ate the card down to 224px and left the
     language selector hanging outside it. The gutter belongs to the page, not to the container. */
  padding: 48px 16px;
  background: transparent;
}

/* ─── Heading ──────────────────────────────────────────────────────────────
   The serif is what separates heading from content without resorting to colour or capitals,
   which leaves the gold to the states. */
#kc-header,
.pf-v5-c-login__header {
  grid-area: header;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 0 0 28px;
  background: transparent;
}

#kc-header-wrapper {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--caris-ink);
  text-align: center;
  padding: 0;
  text-transform: none;
  line-height: 1.2;
}

/* The logo pill and the tagline, without a template override: Keycloak renders the realm's
   display name here and nothing else. */
#kc-header-wrapper::before {
  content: "C";
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  width: 48px;
  margin: 0 auto 14px;
  border-radius: 999px;
  background: var(--caris-gold-bg);
  color: var(--caris-gold-text);
  font-size: 22px;
  font-weight: 600;
}

#kc-header-wrapper::after {
  content: "Dossier bénéficiaire unique · Caris Foundation International";
  display: block;
  margin-top: 4px;
  font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--caris-muted);
}

/* ─── Card ──────────────────────────────────────────────────────────────── */
.pf-v5-c-login__main {
  grid-area: main;
  width: 100%;
  min-width: 0;
  border-radius: 10px;
  border: 1px solid var(--caris-line);
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(23, 20, 14, 0.06);
  padding: 24px;
}

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

/* Keycloak repeats "Connexion au HMIS Caris" inside the card, under a heading that already says
   it. One of the two is noise. */
#kc-page-title {
  display: none;
}

/* ─── Fields ───────────────────────────────────────────────────────────── */
.pf-v5-c-form__group {
  margin-bottom: 16px;
}

.pf-v5-c-form__group-label {
  padding-bottom: 5px;
}

.pf-v5-c-form__label-text,
.pf-v5-c-form__label {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--caris-ink);
}

/*
 * PatternFly wraps each input: `<span class="pf-v5-c-form-control"><input></span>`. The box lives
 * on the wrapper, so the input inside has to be stripped bare — styling both is what produced a
 * border inside a border.
 */
.pf-v5-c-form-control {
  display: flex;
  align-items: center;
  border-radius: 10px;
  border: 1px solid var(--caris-line);
  background: #ffffff;
  /* 38px is the control floor of the brand guide; 44px stays the touch floor elsewhere. */
  min-height: 38px;
  padding: 0 4px 0 12px;
  box-shadow: none;
}

.pf-v5-c-form-control > input,
.pf-v5-c-form-control > textarea,
.pf-v5-c-form-control > select {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--caris-ink);
  font-family: inherit;
  font-size: 14px;
  padding: 8px 0;
  box-shadow: none;
}

/* The wrapper draws its own underline through ::after; ours is the border. */
.pf-v5-c-form-control::after,
.pf-v5-c-form-control::before {
  display: none;
}

.pf-v5-c-form-control:focus-within {
  border-color: var(--caris-gold);
  box-shadow: 0 0 0 3px var(--caris-gold-bg);
}

/* The password field is monospaced with tabular figures, like every other code in the product:
   a bare zero is mistaken for a capital O at 13px, and the error only shows on proofreading. */
.pf-v5-c-form-control > input[type="password"] {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}

/*
 * The password field nests one level deeper than the username:
 *   .pf-v5-c-input-group > [item] > .pf-v5-c-form-control > input   and the eye button is a
 * SIBLING item, outside that box. So the border moves up to the input-group, and the form-control
 * inside it gives it up — otherwise the eye hangs off the edge of a box it is not in.
 */
/* Scoped under __main to outrank PatternFly's own `.pf-v5-c-input-group` rule, which resets the
   border width. The radius from a bare selector applied; the border did not. */
.pf-v5-c-login__main .pf-v5-c-input-group {
  display: flex;
  align-items: center;
  border-radius: 10px;
  border: 1px solid var(--caris-line);
  background: #ffffff;
  min-height: 38px;
  padding: 0 4px 0 12px;
}

.pf-v5-c-login__main .pf-v5-c-input-group:focus-within {
  border-color: var(--caris-gold);
  box-shadow: 0 0 0 3px var(--caris-gold-bg);
}

.pf-v5-c-login__main .pf-v5-c-input-group .pf-v5-c-form-control {
  border: 0;
  min-height: 0;
  padding: 0;
  box-shadow: none;
  background: transparent;
  flex: 1 1 auto;
  min-width: 0;
}

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

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

.pf-v5-c-input-group__item:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.pf-v5-c-form-control__utilities {
  padding: 0;
  margin: 0;
}

.pf-v5-c-form-control__utilities .pf-v5-c-button,
.pf-v5-c-button.pf-m-control {
  height: 30px;
  width: 30px;
  min-width: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--caris-muted);
}

.pf-v5-c-input-group,
.pf-v5-c-input-group__item {
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* ─── Primary action ───────────────────────────────────────────────────── */
.pf-v5-c-button.pf-m-primary,
#kc-login {
  height: 40px;
  border-radius: 10px;
  border: 0;
  background: var(--caris-ink);
  color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  width: 100%;
  cursor: pointer;
}

.pf-v5-c-button.pf-m-primary:hover,
#kc-login:hover {
  background: #000000;
}

/* ─── Links and secondary text ─────────────────────────────────────────── */
a,
.pf-v5-c-login__main-footer a,
#kc-registration a,
#kc-info a {
  color: var(--caris-gold-text);
  text-decoration: none;
  font-size: 13px;
}

a:hover {
  color: #57492E;
  text-decoration: underline;
}

#kc-info,
#kc-info-wrapper,
.pf-v5-c-login__main-footer-band {
  margin-top: 24px;
  text-align: center;
  font-size: 12px;
  line-height: 1.7;
  color: var(--caris-muted);
  background: transparent;
}

/* ─── Language ─────────────────────────────────────────────────────────── */
/*
 * The mock-up puts the three languages under the card, as pills. Keycloak renders the selector
 * inside the card header, and moving it out would mean owning login.ftl — the one thing this
 * theme avoids. It stays where Keycloak puts it, styled as the same pill: a documented deviation,
 * not an oversight.
 */
.pf-v5-c-login__main-header-utilities,
#kc-locale {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin: 0 0 12px;
  padding: 0;
}

/* Keycloak wraps the language select in a form-control too. It is a pill here, not a field, so
   the wrapper gives up its box entirely and the select carries the whole look. */
.pf-v5-c-login__main-header-utilities .pf-v5-c-form-control {
  border: 0;
  background: transparent;
  padding: 0;
  min-height: 0;
  box-shadow: none;
}

.pf-v5-c-login__main-header-utilities .pf-v5-c-form-control:focus-within {
  border: 0;
  box-shadow: none;
}

.pf-v5-c-login__main-header-utilities select,
#kc-locale select,
#login-select-toggle {
  border-radius: 999px;
  border: 1px solid var(--caris-line);
  background: var(--caris-gold-bg);
  color: var(--caris-ink);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  padding: 3px 26px 3px 10px;
  width: auto;
  cursor: pointer;
  /* The native arrow sits outside a pill this small; one is drawn inside the padding instead. */
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--caris-muted) 50%),
                    linear-gradient(135deg, var(--caris-muted) 50%, transparent 50%);
  background-position: calc(100% - 14px) 52%, calc(100% - 10px) 52%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}

/* The wrapper draws its own caret; ours is in the pill's padding. Two arrows is one too many. */
.pf-v5-c-login__main-header-utilities .pf-v5-c-form-control__toggle-icon,
.pf-v5-c-login__main-header-utilities .pf-v5-c-form-control__utilities {
  display: none;
}

.pf-v5-c-login__main-header-utilities select:focus {
  outline: 2px solid var(--caris-gold);
  outline-offset: 1px;
}

/* ─── Errors ───────────────────────────────────────────────────────────── */
.pf-v5-c-helper-text__item-text,
.pf-v5-c-form__helper-text,
#input-error-username,
#input-error-password {
  color: var(--caris-danger);
  font-size: 13px;
}

.pf-v5-c-alert.pf-m-danger,
.alert-error {
  border-radius: 10px;
  border: 1px solid var(--caris-danger);
  background: var(--caris-danger-bg);
  color: var(--caris-danger);
}

/* ─── Footer ───────────────────────────────────────────────────────────────
 * The mock-up closes with two reassurances: who authenticates you, and what to do on a first
 * visit. Both matter on a screen an agent reaches once and then rarely thinks about again.
 *
 * Keycloak renders no element for them, and adding one would mean owning login.ftl. They are
 * generated content instead, keyed off the `lang` attribute the theme already sets — CSS content
 * cannot be translated, so the translation is in the selector. Three rules, three languages, and
 * `locales=fr,ht,en` above is the list that keeps them honest.
 */
.pf-v5-c-login__container::after {
  grid-area: footer;
  display: block;
  margin-top: 24px;
  text-align: center;
  font-size: 12px;
  line-height: 1.7;
  color: var(--caris-muted);
  white-space: pre-line;
}

html[lang="fr"] .pf-v5-c-login__container::after {
  content: "Authentification assurée par Keycloak, annuaire unique de Caris.\A Vos accès sont limités à votre bureau et à vos sites.";
}

html[lang="ht"] .pf-v5-c-login__container::after {
  content: "Se Keycloak ki fè otantifikasyon an, sèl anyè Caris la.\A Aksè ou yo limite ak biwo ou ak sit ou yo.";
}

html[lang="en"] .pf-v5-c-login__container::after {
  content: "Authentication is handled by Keycloak, the single Caris directory.\A Your access is limited to your office and your sites.";
}