@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700;900&display=swap');

/* =======================
   BASE / LAYOUT COMUNE
   ======================= */
:root{
  --radius: clamp(0.5rem, 1.2vw, 0.75rem);
  --shadow-sm: 0 0.125rem 0.3125rem rgba(0,0,0,0.3);
  --shadow-md: 0 0.375rem 1.125rem rgba(0,0,0,0.25);
  --gap-s: clamp(0.4rem, 1vw, 0.8rem);
  --gap-m: clamp(0.6rem, 1.6vw, 1.2rem);
}

/* Font globale */
html, body, button, input, select, textarea {
  font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif;
}

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body{
  margin: 0;
  color: #222;

  /* background sito (rimane anche su Formazione) */
  background: center / cover no-repeat url('/images/background.png');

  /* altezza viewport smart (iOS no jump) */
  min-height: 100vh;
  min-height: 100svh;

  /* niente centratura globale: le singole pagine decidono */
}

/* =======================
   CONTENITORI GENERICI
   ======================= */
.container{
  background-color: rgba(255,255,255,0.9);
  width: 90%;
  max-width: 37.5rem;           /* ~600px */
  padding: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  text-align: center;
  position: relative;
  display: none;                /* visibile quando pronto */
}
.visible { display: block !important; }

/* Variante login / card piccole */
.login-container{
  background-color: rgba(255,255,255,0.9);
  width: min(90vw, 20rem);
  padding: 3%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

/* Tipografia base */
h1{
  font-size: clamp(1.25rem, 3.2vw, 1.8rem);
  margin: 0 0 var(--gap-m);
  color: #8B4513;
}

label{
  display: block;
  text-align: left;
  margin: 0 0 0.4em;
  font-weight: 700;
  color: #333;
  font-size: clamp(0.95rem, 2.6vw, 1.2rem);
}

/* Inputs */
input[type="email"],
input[type="password"],
input[type="text"],
input[type="number"]{
  width: 100%;
  padding: 0.75em;
  margin: 0 0 var(--gap-m);
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  font-size: clamp(0.95rem, 2.6vw, 1.1rem);
  font-weight: 700;
  background: #fff;
}

/* Pulsanti standard */
button{
  padding: 0.7em 1.2em;
  width: 50%;
  background-color: #4CAF50;
  color: #fff;
  border: 0;
  border-radius: 0.5rem;
  cursor: pointer;
  font-weight: 700;
  font-size: clamp(1rem, 2.8vw, 1.2rem);
  text-transform: uppercase;
  box-shadow: var(--shadow-sm);
  transition: background-color .15s ease, transform .06s ease;
}
button:hover { background-color: #45a049; }
button:active { transform: translateY(1px); }
button:disabled { opacity: .7; cursor: default; }

/* Link secondari */
.forgot-password-link{
  color: #8B0000;
  font-size: clamp(0.75rem, 2.2vw, 0.9rem);
  font-weight: 700;
  text-decoration: none;
  margin-bottom: var(--gap-m);
  display: block;
}
.forgot-password-link:hover{ text-decoration: underline; }

/* Errori */
#error-message{
  color: #d10000;
  margin-top: 0.5rem;
  font-weight: 700;
  font-size: clamp(0.9rem, 2.4vw, 1rem);
}

/* Popup / Toast */
#recovery-popup{
  display: none;
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255,255,255,0.95);
  padding: var(--gap-m);
  width: min(80vw, 18rem);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  text-align: center;
  z-index: 100;
}
#recovery-popup p{
  font-size: clamp(1rem, 3.4vw, 1.6rem);
  color: #8B0000;
  font-weight: 700;
  line-height: 1.6;
}

.toast{
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  min-width: 16rem;
  padding: 0.8rem 0.9rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  color: #0b2e13; background: #d1fae5;
  font-weight: 700; text-align: center;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
  z-index: 9999;
}
.toast.show{ opacity: 1; }
.toast.error{ background:#fde2e1; color:#5f0b0b; }

/* Link “Torna alla homepage” */
.homepage-link{
  display: inline-block;
  background-color: #4A90E2;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: clamp(0.9rem, 3.2vw, 1.125rem);
  padding: 0.55em 1.1em;
  border-radius: 9999px;
  border: none;
  text-align: center;
  box-shadow: var(--shadow-sm);
  margin-top: clamp(0.25rem, 2.5vw, 1.5rem);
  transition: background-color .15s ease, transform .06s ease;
}
.homepage-link:hover{ background-color: #5AA0E8; }
.homepage-link:active{ background-color: #4A90E2; transform: translateY(1px); }

/* =======================================================
   ECCEZIONE FORMATIONE: il suo container è speciale
   (le regole vere sono in formazione.css)
   ======================================================= */
.container--formazione{
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  width: auto;
  max-width: none;
}