/*
 * KOS brand skin for Keycloak's built-in "keycloak.v2" login theme.
 * Deliberately CSS-only — no .ftl template overrides — so this stays a thin
 * layer on top of Keycloak's own maintained templates rather than a fork
 * this project would need to keep in sync by hand. Targets are chosen for
 * stability: element IDs from login.ftl/template.ftl (#kc-login,
 * #kc-header-wrapper, #username, #password) and the top-level PatternFly
 * component classes, not PatternFly's internal/minified selectors.
 *
 * Same token values as apps/web's design system (packages/ui/tailwind.preset.js
 * brand.* ramp) — see the KOS design plan artifact from this pass.
 */

:root {
  --kos-brand-50: #ecfdf3;
  --kos-brand-100: #d3f8df;
  --kos-brand-200: #a8efc4;
  --kos-brand-500: #22a559;
  --kos-brand-600: #15803d;
  --kos-brand-700: #106631;
  --kos-ink-900: #0b0f0e;
  --kos-ink-600: #4b5566;
  --kos-line: #e6e9ec;
  --kos-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;

  /* PatternFly v5's own theming hook — the form-control focus underline
     (a ::after pseudo-element, not the <input>'s own border/box-shadow) is
     driven by this global, not by anything targetable on the input itself. */
  --pf-v5-global--primary-color--100: var(--kos-brand-600);
  --pf-v5-global--primary-color--200: var(--kos-brand-700);
}

body,
.pf-v5-c-login {
  font-family: var(--kos-sans) !important;
  background: #fafbfa !important;
  color: var(--kos-ink-900);
}

.login-pf body {
  background: #fafbfa !important;
}

/* The realm's displayNameHtml (see realm-export.json) renders a small brand
   mark + "KOS" text inside this wrapper — style it into a compact lockup
   instead of Keycloak's default plain-text realm name. */
#kc-header-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 10px 20px;
  font-weight: 700;
  font-size: 15px;
  color: var(--kos-ink-900);
}

.kc-brand-mark {
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Crect width='28' height='28' rx='7' fill='%2315803d'/%3E%3Ctext x='7' y='20' font-family='Arial, sans-serif' font-size='16' font-weight='800' fill='white'%3EK%3C/text%3E%3Ccircle cx='23' cy='5' r='3.2' fill='%23a8efc4' stroke='white' stroke-width='1.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: middle;
}

/* Card container */
.pf-v5-c-login__main {
  background: #ffffff;
  border: 1px solid var(--kos-line);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(11, 15, 14, 0.06);
  padding: 8px 8px 24px;
}

.pf-v5-c-title {
  font-weight: 800 !important;
  letter-spacing: -0.01em;
  color: var(--kos-ink-900) !important;
}

/* Inputs. The focus/hover underline is a ::after pseudo-element driven by
   these component-scoped custom properties — PatternFly re-declares
   --pf-v5-global--primary-color--100 at a more specific scope than :root,
   so overriding the global alone doesn't reach it; these direct
   redeclarations do (confirmed via getComputedStyle on the real element). */
.pf-v5-c-form-control,
#username,
#password {
  --pf-v5-c-form-control--hover--after--BorderBottomColor: var(--kos-brand-600);
  --pf-v5-c-form-control--focus--after--BorderBottomColor: var(--kos-brand-600);
  --pf-v5-c-form-control--m-expanded--after--BorderBottomColor: var(--kos-brand-600);
  border-radius: 8px !important;
  border-color: var(--kos-line) !important;
  font-family: var(--kos-sans);
}

.pf-v5-c-form-control:focus,
#username:focus,
#password:focus {
  border-color: var(--kos-brand-600) !important;
  box-shadow: 0 0 0 3px var(--kos-brand-100) !important;
  outline: none;
}

.pf-v5-c-form__label {
  font-weight: 600 !important;
  color: var(--kos-ink-900);
}

/* Primary action (Sign In / Register submit) */
#kc-login,
.pf-v5-c-button.pf-m-primary,
input[type="submit"].pf-v5-c-button {
  background-color: var(--kos-brand-600) !important;
  border-color: var(--kos-brand-600) !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

#kc-login:hover,
.pf-v5-c-button.pf-m-primary:hover {
  background-color: var(--kos-brand-700) !important;
  border-color: var(--kos-brand-700) !important;
}

#kc-login:focus,
.pf-v5-c-button.pf-m-primary:focus {
  box-shadow: 0 0 0 3px var(--kos-brand-100) !important;
}

/* Links (forgot password, register) */
a,
.pf-v5-c-login__main-footer-band-item a {
  color: var(--kos-brand-600);
}

a:hover {
  color: var(--kos-brand-700);
}

/* Checkbox accent (remember me, remember email) — shared hook, no second pattern. */
input[type="checkbox"] {
  accent-color: var(--kos-brand-600);
}

/* Remembered-email row (login.ftl's #kos-remember-email-row) */
#kos-remember-email-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

#kos-remember-email-clear {
  font-size: 0.8125rem;
  color: var(--kos-ink-600);
}

#kos-remember-email-clear:hover {
  color: var(--kos-brand-600);
}

/* Info/error alerts keep PatternFly's own severity colors — only restyle the
   shape/typography, not the semantic color, so errors still read as errors. */
.pf-v5-c-alert {
  border-radius: 10px;
  font-family: var(--kos-sans);
}