/* ========================================
   FLEETZ - FIX ICONE OCCHIO LOGIN
   ======================================== */

/* ===== POSIZIONAMENTO ICONE OCCHIO ===== */

/* Contenitore input con icona */
.auth-page .relative {
  /* Assicura posizionamento relativo corretto */
  position: relative !important;
}

/* Input con spazio per icona */
.auth-page input[type="password"],
.auth-page input[type="text"] {
  /* Spazio extra per icona */
  padding-right: 3rem !important; /* 48px */
  
  /* Assicura che il testo non vada sopra l'icona */
  box-sizing: border-box !important;
}

/* Icone occhio - posizionamento perfetto */
.auth-page button[aria-label*="chiave"] {
  /* Posizionamento ottimale */
  position: absolute !important;
  right: 0.25rem !important; /* 4px dal bordo */
  top: 50% !important;
  transform: translateY(-50%) !important;
  
  /* Dimensioni e padding */
  width: 2.5rem !important; /* 40px */
  height: 2rem !important; /* 32px */
  padding: 0.375rem !important; /* 6px */
  
  /* Stile visivo */
  background-color: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgb(34, 197, 94, 0.3) !important;
  border-radius: 0.375rem !important; /* 6px */
  backdrop-filter: blur(4px) !important;
  
  /* Sempre sopra tutto */
  z-index: 20 !important;
  
  /* Cursore pointer */
  cursor: pointer !important;
  
  /* Transizioni smooth */
  transition: all 0.2s ease !important;
}

/* Dark mode per icone occhio */
.dark .auth-page button[aria-label*="chiave"] {
  background-color: rgba(31, 41, 55, 0.9) !important;
  border-color: rgba(34, 197, 94, 0.5) !important;
}

/* Hover state migliorato */
.auth-page button[aria-label*="chiave"]:hover {
  /* Background più visibile su hover */
  background-color: rgba(34, 197, 94, 0.1) !important;
  border-color: rgb(34, 197, 94, 0.6) !important;
  
  /* Scale leggera */
  transform: translateY(-50%) scale(1.05) !important;
  
  /* Shadow per evidenziare */
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3) !important;
}

/* Dark mode hover */
.dark .auth-page button[aria-label*="chiave"]:hover {
  background-color: rgba(34, 197, 94, 0.2) !important;
  border-color: rgba(34, 197, 94, 0.7) !important;
}

/* Focus state per accessibilità */
.auth-page button[aria-label*="chiave"]:focus {
  /* Anello di focus visibile */
  outline: 2px solid rgb(34, 197, 94) !important;
  outline-offset: 2px !important;
  
  /* Background attivo */
  background-color: rgba(34, 197, 94, 0.15) !important;
}

/* Active state - quando premuto */
.auth-page button[aria-label*="chiave"]:active {
  /* Scale ridotta quando premuto */
  transform: translateY(-50%) scale(0.95) !important;
  
  /* Background più scuro */
  background-color: rgba(34, 197, 94, 0.2) !important;
}

/* Icone SVG all'interno */
.auth-page button[aria-label*="chiave"] svg {
  /* Dimensioni icona */
  width: 1.25rem !important; /* 20px */
  height: 1.25rem !important; /* 20px */
  
  /* Colore icona */
  color: rgb(34, 197, 94) !important;
  
  /* Centra perfettamente */
  display: block !important;
  margin: auto !important;
}

/* Dark mode per icone SVG */
.dark .auth-page button[aria-label*="chiave"] svg {
  color: rgb(74, 222, 128) !important;
}

/* ===== RESPONSIVE MOBILE ===== */

/* Smartphone - icone più grandi */
@media screen and (max-width: 768px) {
  .auth-page button[aria-label*="chiave"] {
    /* Area touch più grande su mobile */
    width: 3rem !important; /* 48px */
    height: 2.5rem !important; /* 40px */
    right: 0.125rem !important; /* 2px dal bordo */
    
    /* Touch target ottimale */
    min-height: 44px !important;
    min-width: 44px !important;
  }
  
  .auth-page button[aria-label*="chiave"] svg {
    width: 1.5rem !important; /* 24px su mobile */
    height: 1.5rem !important; /* 24px su mobile */
  }
  
  /* Input con più spazio su mobile */
  .auth-page input[type="password"],
  .auth-page input[type="text"] {
    padding-right: 3.5rem !important; /* 56px */
  }
}

/* ===== STATI SPECIALI ===== */

/* Quando input è in focus */
.auth-page input:focus + button[aria-label*="chiave"] {
  /* Icona più visibile quando input ha focus */
  border-color: rgb(34, 197, 94) !important;
  background-color: rgba(34, 197, 94, 0.1) !important;
}

/* Prevenzione overlap con testo */
.auth-page .relative input {
  /* Assicura che il testo non vada mai sopra l'icona */
  text-overflow: ellipsis !important;
}

/* ===== ACCESSIBILITÀ ===== */

/* Screen reader friendly */
.auth-page button[aria-label*="chiave"] {
  /* Assicura descrizione accessibile */
  outline: none !important;
}

.auth-page button[aria-label*="chiave"]:focus-visible {
  /* Focus keyboard visibile */
  outline: 2px solid rgb(34, 197, 94) !important;
  outline-offset: 2px !important;
}

/* ===== DEBUG (temporaneo) ===== */
.debug-eye-icons .auth-page button[aria-label*="chiave"] {
  /* Debug border per verificare posizionamento */
  border: 2px solid red !important;
  background-color: yellow !important;
  
  /* Mostra area cliccabile */
  opacity: 0.8 !important;
}