/* Arvo Works — Keycloak login theme
 *
 * The palette is lifted straight from the portal's own `app/[locale]/globals.css`
 * light theme, converted from HSL triplets to hex so a FreeMarker template can
 * inline them without a Tailwind build:
 *
 *   --background 44 42% 95%   paper cream   #F7F2E8
 *   --card       43 45% 97%   warm paper    #FCF9F2
 *   --foreground 160 38% 12%  pine ink      #132A22
 *   --primary    160 42% 18%  deep pine     #1B4133
 *   --accent     30 78% 50%   warm ochre    #E2801C
 *
 * Everything below is written against these custom properties, and every .ftl in
 * this theme references the same names inline. Change a colour here and the
 * whole login surface follows — that is the point of not hard-coding hex in the
 * templates the way the agentic-live theme this started from does.
 *
 * Fonts are the portal's own pair, and the @import has to be the very first rule
 * in the file — a stylesheet's @import is dropped the moment any other rule
 * precedes it, so this cannot move below :root. If Google Fonts is unreachable
 * the stacks below fall back to a system serif/sans rather than to PatternFly's
 * face.
 */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Schibsted+Grotesk:wght@400;500;600;700&display=swap");

:root {
  --arvo-bg: #f7f2e8;
  --arvo-surface: #fcf9f2;
  --arvo-ink: #132a22;
  --arvo-muted: #485b54;
  --arvo-primary: #1b4133;
  --arvo-primary-hover: #143026;
  --arvo-primary-ink: #faf6ec;
  --arvo-accent: #e2801c;
  --arvo-accent-soft: rgba(226, 128, 28, 0.12);
  --arvo-border: #ded2b8;
  --arvo-border-strong: #8f825c;
  --arvo-danger: #af3226;
  --arvo-danger-soft: rgba(175, 50, 38, 0.08);
  --arvo-success: #1b6b4a;
  --arvo-radius: 12px;
  --arvo-font-sans: "Schibsted Grotesk", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --arvo-font-display: "Fraunces", Georgia, "Times New Roman", serif;
}

/* ── Reset & base ──────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--arvo-bg) !important;
  color: var(--arvo-ink) !important;
  font-family: var(--arvo-font-sans) !important;
  min-height: 100vh;
}

/* PatternFly ships a photographic background; the portal has none. */
.pf-v5-c-background-image,
.pf-v5-c-background-image::before,
.pf-v5-c-background-image::after {
  display: none !important;
}

/* ── Full-screen centering — collapse PF's two-column layout ───────────────── */

.pf-v5-c-page,
.pf-v5-c-login {
  background: var(--arvo-bg) !important;
  min-height: 100vh;
}

.pf-v5-c-login__container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  padding: 2rem 1rem !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
}

/* The right-hand info panel renders the realm name; #kc-info (register link)
 * is a different element and must survive. */
.pf-v5-c-login__footer {
  display: none !important;
}

/* PF renders the realm name above the card — the logo in the header section
 * says it better. */
.pf-v5-c-login__header {
  display: none !important;
}

/* ── Card ──────────────────────────────────────────────────────────────────── */

.pf-v5-c-login__main {
  background: var(--arvo-surface) !important;
  border: 1px solid var(--arvo-border) !important;
  border-radius: var(--arvo-radius) !important;
  box-shadow: 0 18px 40px -24px rgba(19, 42, 34, 0.35),
              0 4px 12px -6px rgba(19, 42, 34, 0.12) !important;
  width: 100% !important;
  max-width: 420px !important;
  margin: 0 auto !important;
}

.pf-v5-c-login__main-body {
  padding: 2rem 2rem 1.5rem !important;
}

.pf-v5-c-login__main-header {
  padding: 1.75rem 2rem 0 !important;
  text-align: center !important;
  display: block !important;
}

/* PatternFly floats the locale dropdown *beside* the title inside the header,
 * which squeezes a two-word heading into three ragged lines. The portal passes
 * `ui_locales` on every authorization request and has its own language toggle,
 * so the switcher here is redundant as well as destructive. */
.pf-v5-c-login__main-header-utilities {
  display: none !important;
}

.pf-v5-c-login__main-header .pf-v5-c-title {
  color: var(--arvo-ink) !important;
  font-family: var(--arvo-font-display) !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* ── Form fields ───────────────────────────────────────────────────────────── */

.pf-v5-c-form-control,
input[type="text"],
input[type="password"],
input[type="email"] {
  background: #ffffff !important;
  border: 1px solid var(--arvo-border-strong) !important;
  border-radius: 8px !important;
  color: var(--arvo-ink) !important;
  padding: 0.625rem 0.75rem !important;
  font-size: 0.9375rem !important;
  width: 100% !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.pf-v5-c-form-control:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus {
  border-color: var(--arvo-primary) !important;
  box-shadow: 0 0 0 3px rgba(27, 65, 51, 0.15) !important;
  outline: none !important;
}

.pf-v5-c-form__label-text,
label {
  color: var(--arvo-muted) !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
}

/* ── Primary button ────────────────────────────────────────────────────────── */

.pf-v5-c-button.pf-m-primary,
input[type="submit"],
button[type="submit"] {
  background: var(--arvo-primary) !important;
  border: none !important;
  border-radius: 8px !important;
  color: var(--arvo-primary-ink) !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  padding: 0.6875rem 1.25rem !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: background 0.15s ease, transform 0.1s ease !important;
}

.pf-v5-c-button.pf-m-primary:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  background: var(--arvo-primary-hover) !important;
}

.pf-v5-c-button.pf-m-primary:active,
input[type="submit"]:active,
button[type="submit"]:active {
  transform: scale(0.99) !important;
}

/* ── Links ─────────────────────────────────────────────────────────────────── */

a {
  color: var(--arvo-primary) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

a:hover {
  color: var(--arvo-accent) !important;
  text-decoration: underline !important;
}

/* ── Alerts ────────────────────────────────────────────────────────────────── */

.pf-v5-c-alert.pf-m-danger,
.alert-error {
  background: var(--arvo-danger-soft) !important;
  border: 1px solid rgba(175, 50, 38, 0.3) !important;
  border-radius: 8px !important;
  color: var(--arvo-danger) !important;
  padding: 0.75rem 1rem !important;
}

.pf-v5-c-alert.pf-m-success {
  background: rgba(27, 107, 74, 0.08) !important;
  border: 1px solid rgba(27, 107, 74, 0.3) !important;
  border-radius: 8px !important;
  color: var(--arvo-success) !important;
}

.pf-v5-c-check__label {
  color: var(--arvo-muted) !important;
  font-size: 0.875rem !important;
}

/* ── Footer band ("Or sign in with" / register link) ───────────────────────── */

.pf-v5-c-login__main-footer-band {
  border-top: 1px solid var(--arvo-border) !important;
  padding: 1rem 2rem 0.75rem !important;
  text-align: center !important;
}

.pf-v5-c-login__main-footer-band-item {
  color: var(--arvo-muted) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  margin: 0 !important;
}

.pf-v5-c-login__main-footer {
  padding: 0 2rem 1.5rem !important;
}

.pf-v5-c-login__main-footer-links {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
}

.pf-v5-c-login__main-footer-links-item {
  margin: 0 !important;
  padding: 0 !important;
}

.pf-v5-c-login__main-footer-links-item-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.625rem !important;
  width: 100% !important;
  height: 2.75rem !important;
  padding: 0 1rem !important;
  background: #ffffff !important;
  border: 1px solid var(--arvo-border-strong) !important;
  border-radius: 8px !important;
  color: var(--arvo-ink) !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: border-color 0.15s ease, background 0.15s ease !important;
}

.pf-v5-c-login__main-footer-links-item-link:hover {
  border-color: var(--arvo-primary) !important;
  background: var(--arvo-bg) !important;
  text-decoration: none !important;
}

/* PF lets provider icons render at their intrinsic size; pin them. */
.pf-v5-c-login__main-footer-links-item-link svg {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  flex-shrink: 0 !important;
}

/* ── Misc ──────────────────────────────────────────────────────────────────── */

.pf-v5-c-helper-text__item-text,
.pf-v5-c-form__helper-text {
  color: var(--arvo-muted) !important;
}

hr,
.pf-v5-c-divider {
  border-color: var(--arvo-border) !important;
}

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