/* login.css — compatibile con reset/layout/components + tema */

/* 1) La login NON deve ereditare il layout dashboard (sidebar/margin-left ecc.) */
body{
  display:flex;
  flex-direction:column;
  min-height:100vh;
  background: var(--bg);
  color: var(--text);
}

/* Evita side-effect del layout dashboard */
main{
  margin-left: 0 !important;   /* important: layout.css imposta margin-left per sidebar */
  padding: 0 !important;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:20px;
  padding: 20px !important;
}

/* 2) Header/Footer come “prima”: barra piena, testo bianco, semplice */
header, footer{
  text-align:center;
  color: var(--text);
  padding:15px 0;
  background: var(--surface);
  font-weight:bold;
  flex-shrink:0;
  border: none;
}

header .header-actions {margin: auto 10px;}

/* 3) Contenitore auth: come prima (400px, shadow) */
.auth-container{
  background: var(--surface);
  width: 400px;
  max-width: 92vw;
  border-radius:12px;
  overflow:hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,0.20);
  border: 1px solid var(--border);
}

/* 4) Tabs come prima: background “bianco 60%” + hover */
.tabs{ display:flex; }

.tab{
  flex:1;
  padding:15px;
  text-align:center;
  cursor:pointer;
  background: color-mix(in srgb, #ffffff 35%, transparent); /* simile a #ffffff60 ma più controllato */
  transition: 0.3s;
  font-weight:bold;
  color: var(--text);
}

.tab.active{
  background: var(--accent);
  color: #fff;
}

.tab:hover{
  background: var(--accent-hover);
  color:#fff;
}

/* 5) Form layout come prima */
.form-container{ padding:30px; }

/* Input: ripristina look “prima” (bordo chiaro, sfondo chiaro/scuro coerente col tema) */
.auth-container input[type="text"],
.auth-container input[type="email"],
.auth-container input[type="password"]{
  width:100%;
  padding:12px 15px;
  margin:8px 0 20px 0;
  border-radius:8px;
  font-size:16px;

  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--surface) 88%, var(--bg) 12%);
  color: var(--text);

  outline:none;
}

/* Placeholder più simile al vecchio */
.auth-container input::placeholder{
  opacity:.65;
  font-style: normal;
}

/* Focus “pulito” */
.auth-container input:focus{
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* 6) Button: come prima (accent, testo scuro in dark, bianco in hover) */
.auth-container button{
  width:100%;
  padding:12px;
  background: var(--accent);
  border:none;
  border-radius:8px; /* prima 8px */
  color: #003d33;    /* come prima */
  font-size:16px;
  cursor:pointer;
  transition:0.3s;
}

/* In light theme #003d33 può risultare troppo scuro? Volendo lo rendiamo più “neutral” */
body[data-theme="light"] .auth-container button{
  color: #0b1220;
}

.auth-container button:hover{
  background: var(--accent-hover);
  color:#fff;
  font-weight:bold;
  transform: none; /* prima non c'era translate */
}

/* 7) Back home come prima */
.back-home{ margin-top:10px; }

.back-home a{
  color: var(--text);
  text-decoration:none;
  font-size:14px;
  opacity:0.9;
}

.back-home a:hover{
  opacity:1;
  text-decoration:underline;
}

/* 8) Error/Success come prima, ma con token */
.error{
  color: color-mix(in srgb, var(--danger) 85%, #ff0000 15%);
  text-align:center;
  margin-bottom:15px;
}
.success{
  color: color-mix(in srgb, var(--success) 85%, #00ff00 15%);
  text-align:center;
  margin-bottom:15px;
}

/* 9) Messaggi (se non li prendi già da components.css)
   Se components.css li gestisce già, puoi anche non metterli qui.
*/
@keyframes fadeSequence {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { opacity: 0; }
}

.alert-success, .alert-error{
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: #000;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: bold;
  z-index: 9999;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  animation: fadeSequence 10s forwards;
}
.alert-success{ background: var(--success); }
.alert-error{ background: var(--warning); }

/* 10) Responsive: auth container pieno su mobile */
@media (max-width: 420px){
  .form-container{ padding: 22px; }
}