/* ── Pagine di login (login.html, login_password.html, login_select_tenant.html) ──
   Le tre pagine sono standalone: non estendono base.html e non caricano
   Bootstrap. Fino al 22.09.2026 questo blocco era duplicato alla lettera in
   tutti e tre i <style> inline (~190 righe x3): estratto qui perche' le regole
   responsive vanno scritte una volta sola — tre copie divergono alla prima
   manutenzione.

   Resta inline in ciascuna pagina solo cio' che e' davvero suo: .login-hint e
   .login-email-display (valori diversi per pagina), .login-link/#forgotMsg
   (solo login.html), .tenant-btn (solo login_select_tenant.html),
   .login-alert-info/-warning (solo login.html).

   Versionato come style.css: ogni modifica qui vuole il bump di
   ?v=N sul <link> nei tre template. */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/fonts/dm-sans.woff2') format('woff2');
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* -webkit-text-size-adjust: impedisce a iOS Safari di ingrandire da solo il
   testo in landscape. */
html { -webkit-text-size-adjust: 100%; }
html, body { height: 100%; }

body {
  font-family: 'DM Sans', system-ui, sans-serif;
  min-height: 100vh;
  /* svh = altezza della viewport "piccola" (barra indirizzi estesa): senza,
     su iOS la card salta quando la barra si ritrae. Chi non conosce svh usa
     la riga 100vh sopra. */
  min-height: 100svh;
  background-color: #702580;
  background-image: url('/static/brand-pattern.jpg');
  background-size: cover;
  background-position: 60% center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}

.login-overlay {
  position: fixed;
  inset: 0;
  background: rgba(18, 3, 24, 0.45);
  pointer-events: none;
  z-index: 0;
}

.login-logo {
  position: fixed;
  z-index: 2;
  top: 1.5rem;
  left: 1.5rem;
}
.login-logo img {
  height: 26px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}

.login-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 396px;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.42);
}

.login-header {
  background: linear-gradient(160deg, #3A0F3A, #702580);
  padding: 32px 40px 28px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.login-header-pattern {
  position: absolute;
  inset: 0;
  background-image: url('/static/brand-pattern.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.12;
}
.login-header-content {
  position: relative;
  z-index: 1;
}

/* HR360+ logo — vedi docs/handoff_login/README.md (direzione "Orbita") */
.hr360-logo {
  --hr360-size: 30px;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--hr360-size) * 0.37);
  font-family: 'DM Sans', system-ui, sans-serif;
  color: #fff;
}
.hr360-mark {
  width: calc(var(--hr360-size) * 1.37);
  height: calc(var(--hr360-size) * 1.37);
  flex: none;
}
.hr360-word {
  font-size: var(--hr360-size);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  white-space: nowrap;
}
.hr360-plus {
  font-size: 0.72em;
  font-weight: 700;
  vertical-align: 0.42em;
  letter-spacing: 0;
  margin-left: 0.06em;
}
.login-header-sub {
  font-size: 15px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 10px;
}

.login-body {
  padding: 32px 40px 28px;
}

.login-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #332D35;
  margin-bottom: 6px;
}

.login-input {
  width: 100%;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1.5px solid #E6E4E7;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  color: #332D35;
  background: #F8F8F8;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.login-input:focus {
  border-color: #702580;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(112, 37, 128, 0.12);
}
.login-input::placeholder { color: #C9C6CA; }

.login-btn {
  display: block;
  width: 100%;
  padding: 13px;
  border-radius: 10px;
  border: none;
  background: #702580;
  color: #fff;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 16px;
  margin-bottom: 16px;
  transition: background 0.15s;
}
.login-btn:hover { background: #55194F; }

.login-back-link {
  font-size: 12px;
  font-weight: 500;
  color: #8D878F;
  text-decoration: none;
  transition: color 0.15s;
}
.login-back-link:hover { color: #332D35; }

.login-footer {
  padding: 0 40px 20px;
  font-size: 11px;
  color: #C9C6CA;
  text-align: center;
}

.login-alert {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 16px;
}
.login-alert-danger { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }

.xls-badge {
  position: fixed; bottom: 1.2rem; right: 1.5rem;
  opacity: .35; font-size: .72rem; color: #555;
  display: flex; align-items: center; gap: .35rem;
  user-select: none; text-decoration: none; z-index: 2;
}
.build-info {
  position: fixed; bottom: 1.2rem; left: 1.5rem;
  font-size: .65rem; color: #999; user-select: none; opacity: .4; z-index: 2;
}

/* ── Smartphone (≤ 575.98px) ─────────────────────────────────────────────
   La card e' gia' fluida (width:100%, max-width:396px): qui si sistemano le
   tre cose che a 390px non funzionano. */
@media (max-width: 575.98px) {
  body { padding: 24px 16px; }

  /* font-size < 16px su un input = iOS Safari zooma la pagina al focus e non
     torna piu' indietro. E' il fix che conta di piu' di tutta questa query. */
  .login-input { font-size: 16px; }

  /* Da position:fixed il logo si sovrappone alla card sugli schermi corti
     (o quando la tastiera comprime la viewport): in flusso, sopra la card. */
  .login-logo { position: static; align-self: flex-start; margin-bottom: 16px; }

  .login-card { border-radius: 16px; }
  .login-header { padding: 24px 20px 20px; }
  .login-body { padding: 24px 20px 20px; }
  .login-footer { padding: 0 20px 18px; }

  /* Angoli in basso liberi: a schermo stretto si sovrapporrebbero alla card. */
  .xls-badge, .build-info { display: none; }
}