/* ============================================================
   Superiora Sintesi — login restyle
   The "Field Planner" register: black ink on white dotted paper,
   a floating page, teal highlighter accent, mono-caps stamps.
   Scoped to the login/auth pages so the rest of the website is
   untouched (web_include_css loads on every web page).
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

body[data-path="login"],
body[data-path="update-password"] {
  --ss-ink: #0E0E0E;
  --ss-ink-soft: #2D2D2D;
  --ss-mute: #6E6E73;
  --ss-faint: #A0A0A4;
  --ss-desk: #F1F2F4;
  --ss-paper: #FFFFFF;
  --ss-hair: rgba(14, 14, 14, 0.10);
  --ss-hair-2: rgba(14, 14, 14, 0.18);
  --ss-dot: rgba(14, 14, 14, 0.14);
  --ss-teal: #4A8580;
  --ss-teal-deep: #2F5C58;
  --ss-teal-wash: rgba(74, 133, 128, 0.16);
  --ss-hl-teal: linear-gradient(100deg,
    rgba(74, 133, 128, 0.0) 0%, rgba(74, 133, 128, 0.42) 8%,
    rgba(74, 133, 128, 0.32) 55%, rgba(74, 133, 128, 0.08) 92%,
    rgba(74, 133, 128, 0.0) 100%);
  --ss-shadow-paper: 0 1px 2px rgba(14, 14, 14, 0.04),
    0 8px 20px -6px rgba(14, 14, 14, 0.08),
    0 24px 40px -18px rgba(14, 14, 14, 0.12);
  --ss-font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --ss-font-body: "Inter", "Helvetica Neue", system-ui, sans-serif;
  --ss-font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* the dotted planner page — white paper with a crisp dot grid (the design's
     "Field" register), not the flat grey desk */
  background-color: var(--ss-paper);
  background-image: radial-gradient(circle, var(--ss-dot) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
  color: var(--ss-ink);
  font-family: var(--ss-font-body);
  -webkit-font-smoothing: antialiased;
}

/* Center the auth card variants on the page */
body[data-path="login"] .for-login,
body[data-path="login"] .for-email-login,
body[data-path="login"] .for-forgot,
body[data-path="login"] .for-signup,
body[data-path="update-password"] .for-update-password {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}

/* ---- The floating page ------------------------------------- */
body[data-path="login"] .page-card,
body[data-path="update-password"] .page-card {
  background: var(--ss-paper);
  border: 1px solid var(--ss-hair-2);
  border-radius: 0;
  box-shadow: var(--ss-shadow-paper);
  padding: 40px 40px 34px;
  width: 408px;
  max-width: 92vw;
  margin: 0;
}

/* ---- Head: sun mark, wordmark, mono eyebrow, subtitle ------ */
/* The official Sintesi lockup is a centered stack — the sun mark over the
   wordmark — so the head centres to match it (the form below stays
   left-aligned). The mark is symmetric about the sun, so left-aligning it
   would push the sun off-axis from the wordmark. */
body[data-path="login"] .page-card-head,
body[data-path="update-password"] .page-card-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-bottom: 1px solid var(--ss-hair);
  padding-bottom: 22px;
  margin-bottom: 24px;
}
/* The Sintesi mark: the risen sun over the horizon with its glow beneath.
   Sized so the horizon bar reads at roughly the wordmark's width; the glow
   fades out, so it needs less bottom margin than its box implies. */
body[data-path="login"] .page-card-head img.app-logo,
body[data-path="update-password"] .page-card-head img.app-logo {
  order: 1;
  width: 132px;
  height: auto;
  /* Frappe's login bundle caps .app-logo at max-height:32px, which would
     clamp the height while our width holds — squashing the sun into an
     ellipse. Release the cap so the mark keeps its aspect ratio. */
  max-height: none;
  margin: 0 0 6px;
  border-radius: 0;
  background: none;
}
/* the wordmark, rendered between mark and eyebrow — lowercase and all ink,
   per the official lockup */
body[data-path="login"] .page-card-head::after,
body[data-path="update-password"] .page-card-head::after {
  order: 2;
  content: "superiora sintesi";
  font-family: var(--ss-font-display);
  font-weight: 500;
  font-size: 27px;
  letter-spacing: -0.02em;
  line-height: 1.02;
  color: var(--ss-ink);
}
body[data-path="login"] .page-card-head-text,
body[data-path="update-password"] .page-card-head-text {
  order: 3;
  margin-top: 12px;
}
/* the default h4 ("Sign In" / "Sign Up" / "Reset Password") -> mono eyebrow */
body[data-path="login"] .page-card-head-text h4,
body[data-path="update-password"] .page-card-head-text h4 {
  font-family: var(--ss-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ss-mute);
  margin: 0 0 6px;
}
body[data-path="login"] .page-card-subtitle,
body[data-path="update-password"] .page-card-subtitle {
  font-family: var(--ss-font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ss-mute);
  margin: 0;
}

/* ---- Form fields ------------------------------------------- */
body[data-path="login"] .form-label {
  font-family: var(--ss-font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ss-mute);
  margin-bottom: 7px;
}
body[data-path="login"] .form-control,
body[data-path="update-password"] .form-control {
  border-radius: 0;
  border: 1px solid var(--ss-hair-2);
  background: var(--ss-paper);
  font-family: var(--ss-font-body);
  font-size: 14px;
  color: var(--ss-ink);
  padding: 11px 12px;
  height: auto;
  box-shadow: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
body[data-path="login"] .form-control::placeholder { color: var(--ss-faint); }
body[data-path="login"] .form-control:focus,
body[data-path="update-password"] .form-control:focus {
  border-color: var(--ss-ink);
  box-shadow: inset 0 -2px 0 var(--ss-teal);
  outline: none;
}
body[data-path="login"] .field-icon { color: var(--ss-mute); }

/* ---- Buttons ----------------------------------------------- */
/* primary action inverts to solid Stabilo ink with white text */
body[data-path="login"] .btn-login,
body[data-path="update-password"] .btn,
body[data-path="login"] .btn-login.btn-primary {
  border-radius: 0;
  font-family: var(--ss-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 12px 14px;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
body[data-path="login"] .btn-login.btn-primary,
body[data-path="login"] .btn-login.btn-ldap-login.btn-primary,
body[data-path="update-password"] .btn-primary {
  background: var(--ss-ink);
  border: 1px solid var(--ss-ink);
  color: var(--ss-paper);
}
body[data-path="login"] .btn-login.btn-primary:hover,
body[data-path="update-password"] .btn-primary:hover {
  background: #000;
  border-color: #000;
  color: #fff;
}
/* secondary actions: paper with hairline, ink on hover */
body[data-path="login"] .btn-login.btn-default,
body[data-path="login"] .btn-login-option {
  background: var(--ss-paper);
  border: 1px solid var(--ss-hair-2);
  color: var(--ss-ink);
}
body[data-path="login"] .btn-login.btn-default:hover,
body[data-path="login"] .btn-login-option:hover {
  border-color: var(--ss-ink);
  background: rgba(14, 14, 14, 0.03);
}

/* ---- Links: teal marker underline -------------------------- */
body[data-path="login"] .forgot-password-message a,
body[data-path="login"] .sign-up-message a,
body[data-path="login"] .form-forgot-password a {
  color: var(--ss-teal-deep);
  font-weight: 600;
  text-decoration: none;
  background: var(--ss-hl-teal);
  background-size: 100% 62%;
  background-repeat: no-repeat;
  background-position: 0 78%;
}
body[data-path="login"] .sign-up-message,
body[data-path="login"] .forgot-password-message {
  font-family: var(--ss-font-body);
  font-size: 13px;
  color: var(--ss-mute);
}

/* ---- Misc chrome ------------------------------------------- */
body[data-path="login"] .login-error-banner {
  border-radius: 0;
  border: 1px solid var(--ss-hair-2);
  border-left: 3px solid #8B2F28;
  font-family: var(--ss-font-body);
  font-size: 13px;
}
body[data-path="login"] .field-error { font-family: var(--ss-font-body); font-size: 12px; }