/* ANP brand overrides for the keycloak.v2 login theme — "A2" target.
 * Loaded after css/styles.css (see theme.properties → styles).
 * Goal: the docs/drafts mockup-A look (brand inside the card, stacked
 * wordmark + tagline, rounded controls, centred title, ANP footer) WITHOUT
 * forking login.ftl — only CSS here, plus a footer.ftl + messages_it override
 * and a realm displayNameHtml tweak.
 *
 * Palette mirrors anp.it (Pixfort/Essentials):
 *   primary #004b9b · primary-dark #003a7a · page bg #f7f8fa · muted #6c757d
 */

:root {
  --keycloak-card-top-color: #004b9b;
  --pf-v5-global--primary-color--100: #004b9b;
  --pf-v5-global--primary-color--200: #003a7a;
  --pf-v5-global--link--Color: #004b9b;
  --pf-v5-global--link--Color--hover: #003a7a;
}

/* Light page background instead of the stock dark hero image. */
.login-pf body {
  background: #f7f8fa !important;
}

/* --- Card spans header + body so the brand sits INSIDE the card ---
 * keycloak.v2 puts the white card visuals on .__main and the brand in a
 * separate grid row above it. Move the card surface onto .__container so it
 * wraps both rows; flatten .__main. */
.pf-v5-c-login__container {
  /* Must constrain the card WIDTH explicitly + centre it: at wide viewports
   * the container is stretched by .pf-v5-c-login, and grid-template-columns
   * alone only sizes the inner column, not the white box. */
  width: 100%;
  max-width: 27rem;
  margin-inline: auto;
  grid-template-columns: 1fr;
  background: #fff;
  border: 1px solid #e6e8ec;
  border-top: 4px solid #004b9b;        /* accent at the very top edge */
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(20, 30, 60, .10), 0 2px 8px rgba(20, 30, 60, .05);
  padding: 2.2rem 2.1rem;
  row-gap: 0;
}
.pf-v5-c-login__main {
  background: transparent;
  box-shadow: none;
  border: 0;
  padding: 0;
}
.pf-v5-c-login__main-header {
  border-top: 0;                        /* accent now lives on the container */
  padding-top: 0;                       /* PF default 48px → dead band under the brand */
  padding-bottom: 0;                    /* title's own margin spaces it to the form */
  grid-template-columns: 1fr !important; /* kc's @media `div.…` 70%/30% split (more specific) made the title wrap */
}

/* --- Brand lockup ---
 * #kc-header-wrapper renders the realm's displayNameHtml:
 *   "<strong>ANP</strong> Associazione Nazionale Dirigenti Pubblici …"
 * The wrapper styles the tagline tier; <strong> is the big blue wordmark. */
#kc-header {
  padding: 0;
  margin: 0 0 1.3rem;
}
#kc-header-wrapper {
  /* Readability: the stock .66rem uppercase muted grey was illegible. Larger,
     darker ink, tighter tracking, constrained measure so it wraps balanced. */
  color: #4a5365 !important;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .015em;
  line-height: 1.5;
  font-weight: 600;
  padding: 0;
  max-width: 21rem;
  margin-inline: auto;
  text-align: center;
}
#kc-header-wrapper strong {
  display: block;
  color: #004b9b;
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: none;
  line-height: 1;
  margin-bottom: .55rem;
}

/* --- Page title ("Accedi all'area riservata" via messages_it), centred --- */
#kc-page-title {
  text-align: center;
  font-size: 1.18rem;
  font-weight: 700;
  margin-bottom: 1.4rem;
}

/* --- Rounded boxed inputs ---
 * PF v5 form-control (a <span> wrapping the <input>) draws no box border at
 * rest, so its border-radius is invisible. Give it an explicit boxed border
 * + focus ring, and suppress the bare input's square default focus outline. */
.pf-v5-c-form-control {
  border-radius: 9px !important;
  box-shadow: none !important;
  border: 1px solid #d6dbe3 !important;
}
.pf-v5-c-form-control:focus-within {
  border-color: #004b9b !important;
  box-shadow: 0 0 0 3px rgba(0, 75, 155, .13) !important;
}
.pf-v5-c-form-control input:focus {
  outline: none !important;
}
/* Password show/hide toggle — boxed + rounded to match, with a small gap */
.pf-v5-c-input-group {
  gap: .4rem;
}
.pf-v5-c-button.pf-m-control {
  border: 1px solid #d6dbe3 !important;
  border-radius: 9px !important;
  background: #fff;
}

/* --- Full-width rounded primary button (already pf-m-block) --- */
.pf-v5-c-button.pf-m-primary {
  border-radius: 9px;
  background-color: #004b9b;
}
.pf-v5-c-button.pf-m-primary:hover,
.pf-v5-c-button.pf-m-primary:focus {
  background-color: #003a7a;
}

/* --- Footer (from footer.ftl) --- */
.pf-v5-c-login__main-footer {
  padding-top: 0;
}
.anp-login-footer {
  text-align: center;
  margin-top: 1.4rem;
}
.anp-login-footer .anp-reg {
  font-size: .88rem;
  color: #6c757d;
}
.anp-login-footer .anp-reg a {
  color: #004b9b;
  font-weight: 700;
  text-decoration: none;
}
.anp-login-footer .anp-reg a:hover {
  text-decoration: underline;
}
.anp-login-footer .anp-copy {
  font-size: .78rem;
  color: #6c757d;
  margin-top: 1rem;
  border-top: 1px solid #eef0f3;
  padding-top: 1rem;
}
.anp-login-footer .anp-copy a {
  color: #6c757d;
}

/* --- Cutover password-reset nudge (login.ftl override; variants C + D) ---
 * Old passwords are not migrated → corral first-time users to the reset flow.
 * Spec: anp.it/docs/drafts/cutover-password-nudge/. */
.anp-nudge {
  background: #fdf3e7;
  border: 1px solid #f3d3a8;
  border-radius: 10px;
  padding: .9rem 1rem;
  margin: 0 0 1.3rem;
  text-align: left;
}
.anp-nudge-h {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  color: #8a5a12;
  margin-bottom: .3rem;
}
.anp-nudge-ico {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: currentColor;
}
.anp-nudge-body {
  margin: 0 0 .8rem;
  color: #5a4a2c;
  font-size: .92rem;
  line-height: 1.45;
}
.anp-nudge-cta {
  display: block;
  text-align: center;
  text-decoration: none;
  background: #004b9b;
  color: #fff !important;
  font-weight: 600;
  border-radius: 9px;
  padding: .6rem .8rem;
}
.anp-nudge-cta:hover {
  background: #003a7a;
  text-decoration: none;
}

/* Collapsed "I already have a password" login form (auto-opened on error). */
.anp-login-details {
  margin: 0;
}
.anp-login-summary {
  cursor: pointer;
  color: #6c757d;
  font-size: .9rem;
  text-align: center;
  list-style: none;
  padding: .3rem 0;
}
.anp-login-summary::-webkit-details-marker {
  display: none;
}
.anp-login-summary:hover {
  color: #004b9b;
}
.anp-login-details[open] .anp-login-summary {
  margin-bottom: 1rem;
  color: #004b9b;
}
.anp-login-details-body {
  text-align: left;
}

.anp-login-intro {
  color: #5b6574;
  font-size: .875rem;
  text-align: center;
  margin: 0 0 1.5rem;
}

/* Member recovery checklist. */
.anp-recovery-help { border-top: 1px solid #eef0f3; padding-top: 18px; margin-top: 20px; }
.anp-back { text-align: center; margin-top: 22px; font-size: 14px; }
.anp-policy-label { font-size: 13px; color: #5b6574; }
.anp-password-rules { list-style: none; padding: 0; margin: 12px 0; font-size: 14px; }
.anp-password-rules li { display: flex; gap: 8px; align-items: baseline; margin: 6px 0; }
.anp-rule-icon { width: 18px; flex-shrink: 0; font-weight: bold; }
.anp-password-rules li[data-met=true] { color: #246747; }
.anp-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.anp-password-feedback { font-size: 14px; margin: 10px 0; color: #8d3025; }
.anp-password-feedback:empty { display: none; }
.anp-password-feedback[data-valid=true] { color: #246747; }

/* Approved member form controls; names remain native Keycloak fields. */
.anp-member-field { margin: 20px 0; }
.anp-label-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 7px; }
.anp-label-row label { font-size: 14px; font-weight: 600; }
.anp-label-row a { font-size: 13px; color: #004b9b; text-underline-offset: 3px; }
.anp-member-field input:not([type=checkbox]) { width: 100%; height: 46px; border: 1px solid #b8c1cd; border-radius: 8px; padding: 10px 12px; background: #fff; color: #202c3c; font: inherit; }
.anp-member-field input:focus { outline: 3px solid #004b9b22; border-color: #004b9b; }
.anp-password-control { position: relative; }
.anp-password-control input { padding-right: 85px !important; }
.anp-password-toggle { position: absolute; right: 5px; top: 5px; height: 36px; border: 0; background: transparent; color: #004b9b; font-size: 12px; padding: 0 8px; cursor: pointer; }
.anp-password-toggle[hidden] { display: none; }
.anp-password-toggle:focus-visible { outline: 3px solid #86b9ef; outline-offset: 3px; }
.anp-remember { display: flex; gap: 9px; align-items: center; font-size: 14px; font-weight: 400; margin-top: 16px; }
.anp-remember input { width: 17px; height: 17px; accent-color: #004b9b; }
.anp-field-error { font-size: 14px; color: #8d3025; margin-top: 8px; }
.anp-member-field input[aria-invalid=true] { border: 2px solid #a63025; }

.anp-recovery-error { padding: 15px 16px; border-radius: 8px; background: #fff3f1; border: 1px solid #efc9c3; color: #8d3025; font-size: 14px; margin: 22px 0; }
.anp-recovery-copy { font-size: 14px; color: #5b6574; margin: 20px 0; }

/* Member card dimensions follow the approved mockup; staff stays unchanged. */
.pf-v5-c-login__container:has(.anp-member-field, .anp-recovery-help, .anp-recovery-error, #anp-recovery-complete) { max-width: 440px; width: calc(100% - 40px); padding: 32px; font-family: Arial, Helvetica, sans-serif; color: #202c3c; line-height: 1.5; }
.pf-v5-c-login__container:has(.anp-member-field, .anp-recovery-help, .anp-recovery-error, #anp-recovery-complete) .pf-v5-c-form { display: block; }
.pf-v5-c-login__container:has(.anp-member-field, .anp-recovery-help, .anp-recovery-error, #anp-recovery-complete) #kc-header { margin-bottom: 28px; }
.pf-v5-c-login__container:has(.anp-member-field, .anp-recovery-help, .anp-recovery-error, #anp-recovery-complete) #kc-header-wrapper { font-size: 11px; line-height: 1.55; font-weight: 600; letter-spacing: .25px; max-width: 320px; }
.pf-v5-c-login__container:has(.anp-member-field, .anp-recovery-help, .anp-recovery-error, #anp-recovery-complete) #kc-header-wrapper strong { font-size: 34px; letter-spacing: 1.6px; margin-bottom: 12px; }
.pf-v5-c-login__container:has(.anp-member-field, .anp-recovery-help, .anp-recovery-error, #anp-recovery-complete) #kc-page-title { font-size: 23px; line-height: 1.25; margin: 0 0 12px; letter-spacing: -.4px; }
.pf-v5-c-login__container:has(.anp-member-field, .anp-recovery-help, .anp-recovery-error, #anp-recovery-complete) .pf-v5-c-button.pf-m-primary { min-height: 46px; padding: 11px 14px; font-weight: 600; border-radius: 8px; }
@media (max-width: 480px) {
  .pf-v5-c-login__container:has(.anp-member-field, .anp-recovery-help, .anp-recovery-error, #anp-recovery-complete) { width: calc(100% - 24px); padding: 28px 23px; }
  .pf-v5-c-login__container:has(.anp-member-field, .anp-recovery-help, .anp-recovery-error, #anp-recovery-complete) #kc-page-title { font-size: 22px; }
}

.pf-v5-c-login__container:has(.anp-member-field, .anp-recovery-help, .anp-recovery-error, #anp-recovery-complete) #kc-header-wrapper { margin-block: 0; }
.pf-v5-c-login__container:has(.anp-member-field, .anp-recovery-help, .anp-recovery-error, #anp-recovery-complete) .pf-v5-c-login__main-header,
.pf-v5-c-login__container:has(.anp-member-field, .anp-recovery-help, .anp-recovery-error, #anp-recovery-complete) .pf-v5-c-login__main-body { padding: 0; }
.pf-v5-c-login__container:has(.anp-member-field, .anp-recovery-help, .anp-recovery-error, #anp-recovery-complete) .anp-login-footer { margin-top: 26px; font-size: 13px; }