/* ========================================
   COMPOSANT: Code Input (2FA, OTP)
   BEM: c-code-input
   ======================================== */

.c-code-input {
  width: 3rem;
  height: 3rem;
  padding: 0.5rem;
  margin: 0 0.25rem;
  border: 2px solid var(--border);
  border-radius: var(--border-radius-sm);
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  background: var(--background-light);
  color: var(--text);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  cursor: text;
}

.c-code-input:hover {
  border-color: var(--primary);
}

.c-code-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25);
  outline: none;
  transform: scale(1.1);
  background: var(--background);
}

.c-code-input::selection {
  background: var(--primary);
  color: var(--background-light);
}

/* État invalide */
.c-code-input--error {
  border-color: var(--danger);
  background: rgba(239, 68, 68, 0.05);
}

.c-code-input--error:focus {
  box-shadow: 0 0 0 0.2rem rgba(239, 68, 68, 0.25);
  border-color: var(--danger);
}

/* État valide */
.c-code-input--success {
  border-color: var(--success);
  background: rgba(34, 197, 94, 0.05);
}

.c-code-input--success:focus {
  box-shadow: 0 0 0 0.2rem rgba(34, 197, 94, 0.25);
  border-color: var(--success);
}

/* Conteneur pour 6 inputs */
.c-code-inputs-container {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Responsif */
@media (max-width: 576px) {
  .c-code-input {
    width: 2.5rem;
    height: 2.5rem;
    margin: 0.15rem;
    font-size: 1.25rem;
  }

  .c-code-inputs-container {
    gap: 0.25rem;
  }
}

/* Respect préférence mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  .c-code-input {
    transition: none;
  }

  .c-code-input:focus {
    transform: none;
  }
}

/* ========================================
   ALIAS DE COMPATIBILITÉ
   Pour supporter l'ancien naming depuis authentication
   ======================================== */

/* Alias pour conteneur: .c-code-inputs → .c-code-inputs-container */
.c-code-inputs {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  flex-wrap: nowrap;
}

/* Alias pour inputs: .c-code-inputs__input → .c-code-input */
.c-code-inputs__input {
  width: 2.5rem;
  height: 2.75rem;
  padding: 0.4rem;
  margin: 0 0.15rem;
  border: 2px solid var(--border, #ddd);
  border-radius: var(--border-radius-sm, 8px);
  font-size: 1.35rem;
  font-weight: 600;
  text-align: center;
  background: var(--background-light, white);
  color: var(--text, #2c3e50);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  cursor: text;
  font-family: 'Courier New', monospace;
}

.c-code-inputs__input:hover {
  border-color: var(--primary, #1976d2);
}

.c-code-inputs__input:focus {
  border-color: var(--primary, #1976d2);
  box-shadow: 0 0 0 0.2rem rgba(25, 118, 210, 0.25);
  outline: none;
  transform: scale(1.05);
  background: var(--background, white);
}

/* États spéciaux pour compatibilité authentication */
.c-code-inputs__input.filled {
  border-color: var(--success, #4caf50);
  background-color: rgba(76, 175, 80, 0.05);
}

.c-code-inputs__input.error {
  border-color: var(--danger, #e74c3c);
  background: rgba(239, 68, 68, 0.05);
  animation: c-shake 0.3s;
}

.c-code-inputs__hidden-input {
  display: none !important;
}

/* Animation shake pour erreur */
@keyframes c-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* Responsive pour alias */
@media (max-width: 576px) {
  .c-code-inputs {
    gap: 0.25rem;
  }

  .c-code-inputs__input {
    width: 2.25rem;
    height: 2.5rem;
    margin: 0.1rem;
    font-size: 1.25rem;
  }
}

/* Très petit écran - garder sur une ligne */
@media (max-width: 380px) {
  .c-code-inputs {
    gap: 0.15rem;
  }

  .c-code-inputs__input {
    width: 2rem;
    height: 2.25rem;
    margin: 0.05rem;
    font-size: 1.1rem;
    padding: 0.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-code-inputs__input {
    transition: none;
  }

  .c-code-inputs__input:focus {
    transform: none;
  }

  .c-code-inputs__input.error {
    animation: none;
  }
}