/**
 * Design System - Input Components
 *
 * Componentes de entrada de texto baseados no Figma
 * Suporta Light e Dark mode com todos os estados
 *
 * @version 1.0.0
 * @date 2025-10-30
 */

/* ============================================================
   INPUT PADRÃO - BASE
   ============================================================ */

.input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-width: 0; /* Permite que o flex shrink funcione */
  box-sizing: border-box;
}

/* Label */
.input-label {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  line-height: 24px;
  color: var(--color-text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.input-label-required::after {
  content: '*';
  color: var(--color-danger);
  margin-left: 2px;
}

/* Container do Input */
.input-container {
  position: relative;
  width: 100%;
  min-width: 0; /* Permite que o flex shrink funcione */
  box-sizing: border-box;
}

/* Input Base */
.input {
  width: 100%;
  height: 44px;
  padding: 10px 16px;

  /* Tipografia */
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  line-height: 24px;

  /* Cores - Light Mode */
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-neutral-400);
  border-radius: var(--radius-md);

  /* Transição */
  transition: all var(--transition-base);

  /* Reset */
  outline: none;
  box-sizing: border-box;
}

/* Placeholder */
.input::placeholder {
  color: var(--color-neutral-500);
  opacity: 1;
}

/* ============================================================
   ESTADOS - LIGHT MODE
   ============================================================ */

/* Hover */
.input:hover:not(:disabled):not(.input-error) {
  border-color: var(--color-neutral-600);
}

/* Focus */
.input:focus:not(:disabled):not(.input-error) {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-focus-ring, rgba(201, 10, 10, 0.15));
}

/* Disabled */
.input:disabled {
  background-color: var(--color-neutral-100);
  color: var(--color-neutral-500);
  cursor: not-allowed;
  border-color: var(--color-neutral-300);
}

.input:disabled::placeholder {
  color: var(--color-neutral-400);
}

/* Error */
.input.input-error,
.input-group.has-error .input {
  border-color: var(--color-danger);
}

.input.input-error:focus,
.input-group.has-error .input:focus {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px rgba(201, 10, 10, 0.1); /* RGBA of --color-danger (#C90A0A) */
}

/* Success (opcional) */
.input.input-success {
  border-color: var(--color-success);
}

.input.input-success:focus {
  border-color: var(--color-success);
  box-shadow: 0 0 0 3px rgba(81, 144, 0, 0.1);
}

/* ============================================================
   DARK MODE
   ============================================================ */

.dark .input,
[data-theme="dark"] .input {
  color: var(--color-neutral-300);
  background-color: var(--color-neutral-700);
  border-color: var(--color-neutral-600);
}

.dark .input::placeholder,
[data-theme="dark"] .input::placeholder {
  color: var(--color-neutral-500);
}

/* Hover - Dark */
.dark .input:hover:not(:disabled):not(.input-error),
[data-theme="dark"] .input:hover:not(:disabled):not(.input-error) {
  border-color: var(--color-neutral-500);
}

/* Focus - Dark */
.dark .input:focus:not(:disabled):not(.input-error),
[data-theme="dark"] .input:focus:not(:disabled):not(.input-error) {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-focus-ring-dark, rgba(201, 10, 10, 0.35));
}

/* Disabled - Dark */
.dark .input:disabled,
[data-theme="dark"] .input:disabled {
  background-color: var(--color-neutral-800);
  color: var(--color-neutral-500);
  border-color: var(--color-neutral-700);
}

.dark .input:disabled::placeholder,
[data-theme="dark"] .input:disabled::placeholder {
  color: var(--color-neutral-500);
}

/* Error - Dark */
.dark .input.input-error,
.dark .input-group.has-error .input,
[data-theme="dark"] .input.input-error,
[data-theme="dark"] .input-group.has-error .input {
  border-color: var(--color-red-300);
}

.dark .input.input-error:focus,
.dark .input-group.has-error .input:focus,
[data-theme="dark"] .input.input-error:focus,
[data-theme="dark"] .input-group.has-error .input:focus {
  border-color: var(--color-red-300);
  box-shadow: 0 0 0 3px rgba(204, 39, 39, 0.15); /* RGBA of dark mode danger (#CC2727) */
}

/* Success - Dark */
.dark .input.input-success,
[data-theme="dark"] .input.input-success {
  border-color: var(--color-green-300);
}

.dark .input.input-success:focus,
[data-theme="dark"] .input.input-success:focus {
  border-color: var(--color-green-300);
  box-shadow: 0 0 0 3px rgba(81, 144, 0, 0.15);
}

/* ============================================================
   HELPER TEXT
   ============================================================ */

.input-helper {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--font-weight-regular);
  line-height: 22px;
  color: var(--color-neutral-600);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.input-group.has-error .input-helper,
.input-helper.error {
  color: var(--color-danger);
}

.input-helper.success {
  color: var(--color-success);
}

/* Dark Mode - Helper */
.dark .input-helper,
[data-theme="dark"] .input-helper {
  color: var(--color-neutral-500);
}

.dark .input-group.has-error .input-helper,
.dark .input-helper.error,
[data-theme="dark"] .input-group.has-error .input-helper,
[data-theme="dark"] .input-helper.error {
  color: var(--color-red-300);
}

.dark .input-helper.success,
[data-theme="dark"] .input-helper.success {
  color: var(--color-green-300);
}

/* ============================================================
   ÍCONES (quando necessário)
   ============================================================ */

.input-icon-left {
  padding-left: 44px;
}

.input-icon-right {
  padding-right: 44px;
}

.input-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-neutral-500);
  pointer-events: none;
}

.input-icon-left-position {
  left: 12px;
}

.input-icon-right-position {
  right: 12px;
}

/* Ícone quando input tem foco */
.input:focus ~ .input-icon {
  color: var(--color-primary);
}

.input.input-error ~ .input-icon,
.input-group.has-error .input-icon {
  color: var(--color-danger);
}

/* Dark Mode - Ícones */
.dark .input-icon,
[data-theme="dark"] .input-icon {
  color: var(--color-neutral-500);
}

.dark .input:focus ~ .input-icon,
[data-theme="dark"] .input:focus ~ .input-icon {
  color: var(--color-primary);
}

.dark .input.input-error ~ .input-icon,
.dark .input-group.has-error .input-icon,
[data-theme="dark"] .input.input-error ~ .input-icon,
[data-theme="dark"] .input-group.has-error .input-icon {
  color: var(--color-red-300);
}

/* ============================================================
   TAMANHOS ALTERNATIVOS
   ============================================================ */

/* Small (36px) */
.input-sm {
  height: 36px;
  padding: 6px 12px;
  font-size: 14px;
}

.input-sm.input-icon-left {
  padding-left: 36px;
}

.input-sm.input-icon-right {
  padding-right: 36px;
}

/* Large (52px) */
.input-lg {
  height: 52px;
  padding: 14px 20px;
  font-size: 18px;
}

.input-lg.input-icon-left {
  padding-left: 52px;
}

.input-lg.input-icon-right {
  padding-right: 52px;
}

/* ============================================================
   VARIAÇÕES DE LARGURA
   ============================================================ */

.input-full {
  width: 100%;
}

.input-auto {
  width: auto;
}

/* ============================================================
   LOADING STATE
   ============================================================ */

.input-loading {
  position: relative;
}

.input-loading::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-neutral-300);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: input-spinner 0.6s linear infinite;
}

@keyframes input-spinner {
  to { transform: translateY(-50%) rotate(360deg); }
}

.dark .input-loading::after,
[data-theme="dark"] .input-loading::after {
  border-color: var(--color-neutral-600);
  border-top-color: var(--color-primary);
}

/* ============================================================
   READONLY
   ============================================================ */

.input[readonly] {
  background-color: var(--color-neutral-100);
  cursor: default;
}

.dark .input[readonly],
[data-theme="dark"] .input[readonly] {
  background-color: var(--color-neutral-800);
}

/* ============================================================
   TEXT TRANSFORM OPTIONS
   ============================================================ */

/* Capitalize - Primeira letra de cada palavra em maiúscula */
.input-capitalize {
  text-transform: capitalize;
}

/* Uppercase - Todas as letras em maiúscula */
.input-uppercase {
  text-transform: uppercase;
}

/* Lowercase - Todas as letras em minúscula */
.input-lowercase {
  text-transform: lowercase;
}

/* ============================================================
   AUTOFILL OVERRIDE
   ============================================================ */

.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--color-bg-primary) inset;
  -webkit-text-fill-color: var(--color-text-primary);
  transition: background-color 5000s ease-in-out 0s;
}

.dark .input:-webkit-autofill,
.dark .input:-webkit-autofill:hover,
.dark .input:-webkit-autofill:focus,
[data-theme="dark"] .input:-webkit-autofill,
[data-theme="dark"] .input:-webkit-autofill:hover,
[data-theme="dark"] .input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--color-neutral-700) inset;
  -webkit-text-fill-color: var(--color-neutral-300);
}