/* CLUSA brand on Keycloak's login pages, matching the portal (public/style.css).
   Ink carries text and primary actions; Sovereign Orange is for focus and
   links only. The logo is the brand-pack SVG, never the retyped name. */

@font-face { font-family: "Clear Sans"; src: url("../fonts/ClearSans-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Clear Sans"; src: url("../fonts/ClearSans-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Clear Sans"; src: url("../fonts/ClearSans-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }

.login-pf {
  --clusa-ink: #0c0c0e;
  --clusa-ink-90: #333337;
  --sovereign-orange: #fb5607;
  --sovereign-orange-60: #c94506;
  --canvas: #fafafa;
  --border: #e6e6e6;
  --border-strong: #cccccc;
  --text: rgb(0 0 0 / 90%);
  --text-secondary: rgb(0 0 0 / 75%);
  --font: "Clear Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --pf-global--FontFamily--sans-serif: var(--font);
  --pf-global--FontFamily--heading--sans-serif: var(--font);
  --pf-global--primary-color--100: var(--clusa-ink);
  --pf-global--primary-color--200: var(--clusa-ink-90);
  --pf-global--link--Color: var(--sovereign-orange-60);
  --pf-global--link--Color--hover: var(--sovereign-orange-60);
  --pf-c-button--m-primary--BackgroundColor: var(--clusa-ink);
  --pf-c-button--m-primary--hover--BackgroundColor: var(--clusa-ink-90);
  --pf-c-button--m-primary--focus--BackgroundColor: var(--clusa-ink-90);
  --pf-c-button--m-primary--active--BackgroundColor: var(--clusa-ink-90);
  --pf-c-form-control--focus--BorderBottomColor: var(--sovereign-orange);
  --pf-c-form-control--hover--BorderBottomColor: var(--border-strong);
  background: var(--canvas);
}

.login-pf body {
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

/* Brand-pack compact lockup in place of the realm name. */
#kc-header { color: transparent; }
#kc-header-wrapper {
  height: 40px;
  margin: 56px auto 24px;
  padding: 0;
  font-size: 0;
  color: transparent;
  background: url("../img/clusa-compact-lockup.svg") no-repeat center / auto 40px;
}
#kc-header-wrapper * { display: none; }

.card-pf {
  max-width: 440px;
  padding: 8px 24px 24px;
  border: 1px solid var(--border);
  border-top: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: none;
  background: #fff;
}
h1#kc-page-title {
  font-family: var(--font);
  font-size: 22px;
  font-weight: 700;
  color: var(--clusa-ink);
}
.login-pf label, .pf-c-form__label-text { font-family: var(--font); color: var(--text-secondary); font-weight: 500; }

.pf-c-form-control {
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  font-family: var(--font);
}
.pf-c-form-control:focus,
.pf-c-form-control:focus-visible {
  outline: 2px solid var(--sovereign-orange);
  outline-offset: -1px;
  border-color: transparent;
}

/* Show-password button: joined to the rounded input it belongs to. */
.pf-c-input-group > .pf-c-form-control { border-radius: 8px 0 0 8px; }
.pf-c-input-group > .pf-c-button.pf-m-control {
  border: 1px solid var(--border-strong);
  border-left: 0;
  border-radius: 0 8px 8px 0;
  background: #fff;
  color: var(--text-secondary);
}
.pf-c-input-group > .pf-c-button.pf-m-control::after { border: 0; }

.pf-c-button.pf-m-primary,
.login-pf-page .btn-primary {
  background: var(--clusa-ink);
  border: 1px solid var(--clusa-ink);
  border-radius: 8px;
  color: #fff;
  font-family: var(--font);
  font-weight: 700;
}
.pf-c-button.pf-m-primary:hover,
.pf-c-button.pf-m-primary:focus,
.login-pf-page .btn-primary:hover { background: var(--clusa-ink-90); border-color: var(--clusa-ink-90); }
.btn-default, .pf-c-button.btn-default {
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  color: var(--clusa-ink);
  font-family: var(--font);
  font-weight: 700;
}

.login-pf a, .login-pf a:hover, .login-pf a:focus { color: var(--sovereign-orange-60); }
.login-pf :focus-visible { outline: 2px solid var(--sovereign-orange); outline-offset: 2px; }