/* ═══════════════════════════════════════════════════════════════════════════
   FIX DÉFINITIF : Formulaire de connexion - Styles forcés
   Ce fichier force tous les styles nécessaires pour le formulaire de connexion
   avec !important pour garantir l'affichage correct
   ═══════════════════════════════════════════════════════════════════════════ */

/* Fix du conteneur Card */
html body form[class*="space-y-6"],
html body div[class*="bg-kodo-slate"] {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: block !important;
}

/* Fix des conteneurs de champs */
html body form > div {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: block !important;
}

/* Fix des divs w-full dans le formulaire */
html body form div[class*="w-full"] {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: block !important;
}

/* Fix des divs relative qui contiennent les inputs */
html body form div.relative {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: block !important;
  position: relative !important;
}

/* Fix des inputs email */
html body form input[type="email"] {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: block !important;
  padding: 0.75rem 1rem !important;
  background-color: rgb(31, 40, 51) !important; /* bg-kodo-graphite */
  border: 1px solid rgb(59, 69, 84) !important; /* border-kodo-steel */
  border-radius: 0.5rem !important;
  color: white !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  box-sizing: border-box !important;
}

/* Fix des inputs password */
html body form input[type="password"] {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: block !important;
  padding: 0.75rem 1rem !important;
  background-color: rgb(31, 40, 51) !important; /* bg-kodo-graphite */
  border: 1px solid rgb(59, 69, 84) !important; /* border-kodo-steel */
  border-radius: 0.5rem !important;
  color: white !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  box-sizing: border-box !important;
}

/* Fix des inputs text */
html body form input[type="text"] {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: block !important;
  padding: 0.75rem 1rem !important;
  background-color: rgb(31, 40, 51) !important; /* bg-kodo-graphite */
  border: 1px solid rgb(59, 69, 84) !important; /* border-kodo-steel */
  border-radius: 0.5rem !important;
  color: white !important;
  font-size: 1rem !important;
  line-height: 1.5 !important;
  box-sizing: border-box !important;
}

/* Fix des placeholders */
html body form input::placeholder {
  color: rgb(156, 163, 175) !important; /* placeholder-gray-500 */
  opacity: 1 !important;
}

/* Fix du bouton de soumission */
html body form button[type="submit"] {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.625rem 1.25rem !important;
  background: linear-gradient(to right, rgb(69, 162, 158), rgb(102, 252, 241)) !important; /* from-kodo-cyan-dim to-kodo-cyan */
  color: rgb(11, 12, 16) !important; /* text-kodo-void */
  border: 1px solid transparent !important;
  border-radius: 0.5rem !important;
  font-weight: 700 !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: all 0.2s !important;
}

html body form button[type="submit"]:hover {
  box-shadow: 0 10px 15px -3px rgba(102, 252, 241, 0.2) !important;
}

html body form button[type="submit"]:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* Fix du checkbox */
html body form input[type="checkbox"] {
  width: 1rem !important;
  height: 1rem !important;
  min-width: 1rem !important;
  min-height: 1rem !important;
  border: 1px solid rgb(59, 69, 84) !important; /* border-kodo-steel */
  border-radius: 0.25rem !important;
  background-color: rgb(31, 40, 51) !important; /* bg-kodo-graphite */
  cursor: pointer !important;
  appearance: checkbox !important;
  -webkit-appearance: checkbox !important;
  -moz-appearance: checkbox !important;
}

/* Fix des labels */
html body form label {
  display: block !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: rgb(156, 163, 175) !important; /* text-gray-400 */
  margin-bottom: 0.5rem !important;
}

/* Fix du conteneur Card glass */
html body div[class*="bg-kodo-slate"][class*="backdrop-blur"],
html body div[class*="rounded-xl"][class*="bg-kodo-slate"] {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: block !important;
  background-color: rgba(44, 54, 67, 0.4) !important; /* bg-kodo-slate/40 */
  border: 1px solid rgba(255, 255, 255, 0.05) !important; /* border-white/5 */
  border-radius: 0.75rem !important;
  padding: 1rem !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-sizing: border-box !important;
}

@media (min-width: 640px) {
  html body div[class*="bg-kodo-slate"][class*="backdrop-blur"],
  html body div[class*="rounded-xl"][class*="bg-kodo-slate"] {
    padding: 1.5rem !important;
  }
}

/* Fix spécifique pour le formulaire dans LoginPage */
html body div[class*="max-w-2xl"] form {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: block !important;
}

/* Fix pour tous les inputs dans n'importe quel contexte */
input[type="email"],
input[type="password"],
input[type="text"] {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIX ULTRA-AGRESSIF : Sélecteurs universels pour garantir la largeur
   ═══════════════════════════════════════════════════════════════════════════ */

/* Force la largeur sur TOUS les éléments dans le formulaire */
html body form * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Force la largeur sur tous les divs dans le formulaire */
html body form div {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Force la largeur sur tous les inputs, peu importe où ils sont */
html body input[type="email"],
html body input[type="password"],
html body input[type="text"] {
  width: 100% !important;
  min-width: 250px !important; /* Largeur minimale pour éviter les inputs trop étroits */
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
}

/* Force la largeur sur tous les boutons submit */
html body button[type="submit"] {
  width: 100% !important;
  min-width: 250px !important; /* Largeur minimale pour éviter les boutons trop étroits */
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  white-space: nowrap !important; /* Empêche le texte de se couper */
}

/* Force la largeur sur tous les conteneurs qui pourraient limiter la largeur */
html body div[class*="max-w"] > * {
  width: 100% !important;
  max-width: 100% !important;
}

/* Fix spécifique pour le composant Input du design-system */
html body form div[class*="w-full"] input {
  width: 100% !important;
  min-width: 200px !important;
  max-width: 100% !important;
}

/* Fix pour les divs relative qui contiennent les inputs */
html body div.relative input {
  width: 100% !important;
  min-width: 200px !important;
  max-width: 100% !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIX ULTIME : Ciblage direct des classes HTML rendues
   ═══════════════════════════════════════════════════════════════════════════ */

/* Fix direct pour les inputs avec les classes exactes du HTML */
input.w-full.py-3.bg-kodo-graphite,
input[class*="w-full"][class*="py-3"][class*="bg-kodo-graphite"],
input[class*="w-full"][type="email"],
input[class*="w-full"][type="password"] {
  width: 100% !important;
  min-width: 250px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
  flex-shrink: 0 !important;
  flex-grow: 1 !important;
}

/* Fix direct pour les divs relative qui contiennent les inputs */
div.relative input[type="email"],
div.relative input[type="password"],
div[class*="relative"] input {
  width: 100% !important;
  min-width: 250px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
}

/* Fix direct pour les divs w-full imbriqués */
div.w-full div.w-full,
div[class*="w-full"] div[class*="w-full"] {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Fix direct pour le bouton avec les classes exactes */
button.w-full[type="submit"],
button[class*="w-full"][type="submit"],
button[class*="bg-gradient-to-r"][class*="w-full"] {
  width: 100% !important;
  min-width: 250px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* Fix pour le span dans le bouton */
button[type="submit"] span {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* Fix pour le formulaire */
form.w-full.space-y-6,
form[class*="w-full"][class*="space-y-6"] {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
}

/* Fix pour le conteneur Card */
div[class*="bg-kodo-slate"][class*="backdrop-blur"][class*="w-full"],
div[class*="rounded-xl"][class*="bg-kodo-slate"][class*="w-full"] {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
}

/* Fix pour tous les conteneurs max-w-2xl */
div.max-w-2xl,
div[class*="max-w-2xl"] {
  width: 100% !important;
  max-width: 42rem !important; /* 2xl = 42rem */
  box-sizing: border-box !important;
}

/* Fix pour tous les enfants de max-w-2xl */
div[class*="max-w-2xl"] > * {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIX FLEXBOX : Empêcher flexbox de rétrécir les éléments
   ═══════════════════════════════════════════════════════════════════════════ */

/* Force flex-shrink à 0 pour tous les inputs et boutons */
input[type="email"],
input[type="password"],
input[type="text"],
button[type="submit"] {
  flex-shrink: 0 !important;
  flex-grow: 1 !important;
  flex-basis: auto !important;
}

/* Force les conteneurs flex à ne pas rétrécir leurs enfants */
div[class*="flex"] input,
div[class*="flex"] button,
div[class*="inline-flex"] input,
div[class*="inline-flex"] button {
  flex-shrink: 0 !important;
  min-width: 250px !important;
}

/* Fix pour les conteneurs qui utilisent flex */
form[class*="space-y"] > div,
form > div {
  flex-shrink: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Fix spécifique pour les divs w-full dans un contexte flex */
div[class*="flex"] div[class*="w-full"],
div[class*="inline-flex"] div[class*="w-full"] {
  flex-shrink: 0 !important;
  flex-grow: 1 !important;
  width: 100% !important;
  min-width: 250px !important;
  max-width: 100% !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIX ULTIME : Ciblage direct des classes HTML rendues
   ═══════════════════════════════════════════════════════════════════════════ */

/* Fix direct pour les inputs avec les classes exactes du HTML */
input.w-full.py-3.bg-kodo-graphite,
input[class*="w-full"][class*="py-3"][class*="bg-kodo-graphite"],
input[class*="w-full"][type="email"],
input[class*="w-full"][type="password"] {
  width: 100% !important;
  min-width: 250px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
  flex-shrink: 0 !important;
  flex-grow: 1 !important;
}

/* Fix direct pour les divs relative qui contiennent les inputs */
div.relative input[type="email"],
div.relative input[type="password"],
div[class*="relative"] input {
  width: 100% !important;
  min-width: 250px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
}

/* Fix direct pour les divs w-full imbriqués */
div.w-full div.w-full,
div[class*="w-full"] div[class*="w-full"] {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Fix direct pour le bouton avec les classes exactes */
button.w-full[type="submit"],
button[class*="w-full"][type="submit"],
button[class*="bg-gradient-to-r"][class*="w-full"] {
  width: 100% !important;
  min-width: 250px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* Fix pour le span dans le bouton */
button[type="submit"] span {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* Fix pour le formulaire */
form.w-full.space-y-6,
form[class*="w-full"][class*="space-y-6"] {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
}

/* Fix pour le conteneur Card */
div[class*="bg-kodo-slate"][class*="backdrop-blur"][class*="w-full"],
div[class*="rounded-xl"][class*="bg-kodo-slate"][class*="w-full"] {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
}

/* Fix pour tous les conteneurs max-w-2xl */
div.max-w-2xl,
div[class*="max-w-2xl"] {
  width: 100% !important;
  max-width: 42rem !important; /* 2xl = 42rem */
  box-sizing: border-box !important;
}

/* Fix pour tous les enfants de max-w-2xl */
div[class*="max-w-2xl"] > * {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIX FLEXBOX : Empêcher flexbox de rétrécir les éléments
   ═══════════════════════════════════════════════════════════════════════════ */

/* Force flex-shrink à 0 pour tous les inputs et boutons */
input[type="email"],
input[type="password"],
input[type="text"],
button[type="submit"] {
  flex-shrink: 0 !important;
  flex-grow: 1 !important;
  flex-basis: auto !important;
}

/* Force les conteneurs flex à ne pas rétrécir leurs enfants */
div[class*="flex"] input,
div[class*="flex"] button,
div[class*="inline-flex"] input,
div[class*="inline-flex"] button {
  flex-shrink: 0 !important;
  min-width: 250px !important;
}

/* Fix pour les conteneurs qui utilisent flex */
form[class*="space-y"] > div,
form > div {
  flex-shrink: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Fix spécifique pour les divs w-full dans un contexte flex */
div[class*="flex"] div[class*="w-full"],
div[class*="inline-flex"] div[class*="w-full"] {
  flex-shrink: 0 !important;
  flex-grow: 1 !important;
  width: 100% !important;
  min-width: 250px !important;
  max-width: 100% !important;
}
