/* 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;
}