/* ============================================================================
   CAMPOS E FORMULÁRIOS - SISTEMA COESO
   ============================================================================ */

/* WRAPPER DE CAMPOS */
.form-group {
  display: grid;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

label {
  display: grid;
  gap: var(--spacing-xs);
  min-width: 0;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.9rem;
}

label .label-text {
  display: block;
}

/* ============================================================================
   INPUTS - ESTILO UNIFICADO
   ============================================================================ */

input:not([type]),
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="month"],
input[type="file"],
input[type="search"],
textarea,
select {
  /* Dimensões base */
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  padding: 10px var(--spacing-md);
  
  /* Estilo */
  border: var(--border-width) solid var(--line);
  border-radius: var(--border-radius);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.95rem;
  font-family: inherit;
  
  /* Transição */
  transition: all 0.2s ease;
}

input::placeholder,
select::placeholder {
  color: var(--muted);
}

/* FOCO - ESTADO ATIVO */
input:focus,
select:focus,
textarea:focus {
  outline: 0;
  border-color: var(--blue);
  box-shadow: 
    inset 0 0 0 2px rgba(35, 100, 170, 0.05),
    0 0 0 3px rgba(35, 100, 170, 0.1);
  background: color-mix(in srgb, var(--blue) 2%, var(--surface));
}

/* HOVER */
input:hover:not(:focus),
select:hover:not(:focus),
textarea:hover:not(:focus) {
  border-color: color-mix(in srgb, var(--blue) 50%, var(--line));
  background: color-mix(in srgb, var(--blue) 1%, var(--surface));
}

.search input,
.search input:hover,
.search input:focus {
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* DESABILITADO */
input:disabled,
select:disabled,
textarea:disabled {
  background: color-mix(in srgb, var(--surface) 60%, var(--bg));
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.6;
}

/* VÁLIDO / INVÁLIDO */
input:invalid:not(:placeholder-shown),
select:invalid:not(:placeholder-shown) {
  border-color: var(--red);
  box-shadow: inset 0 0 0 2px rgba(180, 35, 24, 0.05);
}

input:valid:not(:placeholder-shown),
select:valid:not(:placeholder-shown) {
  border-color: var(--green);
}

/* TEXTAREA */
textarea {
  resize: vertical;
  min-height: 100px;
  padding: var(--spacing-md);
  font-family: 'Courier New', monospace;
  line-height: 1.5;
}

/* ============================================================================
   LABELS COM ÍCONES
   ============================================================================ */

.form-group.with-icon {
  position: relative;
}

.form-group.with-icon input {
  padding-left: 40px;
}

.form-group.with-icon .field-icon {
  position: absolute;
  left: var(--spacing-md);
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
  width: 20px;
  height: 20px;
}

/* ============================================================================
   LAYOUT DE CAMPOS
   ============================================================================ */

/* CAMPO ÚNICO */
.form-group {
  grid-template-columns: 1fr;
}

/* DOIS CAMPOS */
.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-md);
  align-items: end;
}

.form-row > *,
.form-row label {
  min-width: 0;
  margin-bottom: 0;
}

/* TRÊS CAMPOS */
.form-row-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-md);
  align-items: end;
}

.form-row-3 > *,
.form-row-3 label {
  min-width: 0;
  margin-bottom: 0;
}

/* INLINE (lado a lado) */
.form-inline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--spacing-md);
  align-items: flex-end;
}

.form-inline label {
  grid-column: 1 / -1;
}

.form-inline input {
  grid-column: 1;
}

.form-inline button {
  grid-column: 2;
}

/* ============================================================================
   LABELS COM DICAS
   ============================================================================ */

label .hint {
  display: block;
  margin-top: var(--spacing-xs);
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 400;
}

label .required {
  color: var(--red);
  margin-left: 2px;
}

label .optional {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 400;
  margin-left: auto;
}

/* ============================================================================
   CAMPOS COM VALIDAÇÃO
   ============================================================================ */

.field-error {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-xs);
  color: var(--red);
  font-size: 0.8rem;
}

.field-error::before {
  content: "⚠";
  font-weight: bold;
}

.field-success {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-xs);
  color: var(--green);
  font-size: 0.8rem;
}

.field-success::before {
  content: "✓";
  font-weight: bold;
}

/* ============================================================================
   SEÇÕES DE FORMULÁRIOS
   ============================================================================ */

.form-section {
  display: grid;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
  border: var(--border-width) solid var(--line);
  border-radius: var(--border-radius);
  background: color-mix(in srgb, var(--surface) 95%, var(--bg));
}

.form-section-title {
  display: grid;
  gap: var(--spacing-xs);
  margin: 0;
  padding: 0 0 var(--spacing-md) 0;
  border-bottom: var(--border-width) solid var(--line);
}

.form-section-title h3 {
  font-size: 1rem;
  color: var(--ink);
}

.form-section-title .subtitle {
  color: var(--muted);
  font-size: 0.85rem;
}

/* ============================================================================
   CAMPOS ESPECIAIS
   ============================================================================ */

/* CAMPO DE BUSCA */
.search-field {
  position: relative;
}

.search-field input {
  padding-left: 40px;
}

.search-field::before {
  content: "🔍";
  position: absolute;
  left: var(--spacing-md);
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

/* CAMPO DE DATA */
input[type="date"] {
  padding-left: var(--spacing-md);
}

input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  color: var(--blue);
}

/* CAMPO DE TELEFONE */
input[type="tel"] {
  font-family: 'Courier New', monospace;
}

/* CAMPO MOEDA */
input.currency {
  text-align: right;
  font-family: 'Courier New', monospace;
}

/* CAMPO PERCENTUAL */
input.percentage {
  text-align: right;
  font-family: 'Courier New', monospace;
}

/* ============================================================================
   SELECTS E DROPDOWNS
   ============================================================================ */

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23667085' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  padding-right: 40px;
}

select:hover {
  cursor: pointer;
}

/* SELECTS COM MÚLTIPLOS */
select[multiple] {
  background-image: none;
  padding: var(--spacing-md);
  min-height: 120px;
}

select[multiple] option {
  padding: 8px 4px;
}

select[multiple] option:checked {
  background: var(--blue);
  color: #ffffff;
}

/* ============================================================================
   RADIOS E CHECKBOXES
   ============================================================================ */

input[type="radio"],
input[type="checkbox"] {
  min-height: auto;
  width: 20px;
  height: 20px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--blue);
}

input[type="radio"]:disabled,
input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* CHECKBOX COM LABEL */
.checkbox-group {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  border-radius: var(--border-radius);
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
}

.checkbox-group:hover {
  background: color-mix(in srgb, var(--blue) 2%, var(--surface));
}

.checkbox-group input {
  margin: 0;
}

.checkbox-group label {
  margin: 0;
  flex: 1;
  cursor: pointer;
}

/* ============================================================================
   GRID DE CAMPOS
   ============================================================================ */

.fields-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: var(--spacing-md);
}

.fields-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-md);
}

.fields-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-md);
}

.fields-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-md);
}

.fields-grid > *,
.fields-grid-2 > *,
.fields-grid-3 > *,
.fields-grid-4 > * {
  min-width: 0;
}

/* ============================================================================
   CAMPO COM HELPER TEXT
   ============================================================================ */

.field-with-helper {
  display: grid;
  gap: var(--spacing-xs);
}

.field-with-helper input,
.field-with-helper select,
.field-with-helper textarea {
  margin-bottom: var(--spacing-xs);
}

.helper-text {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.4;
  margin-top: var(--spacing-xs);
}

.helper-text strong {
  color: var(--ink);
}

/* ============================================================================
   CAMPO COM AÇÃO (botão ao lado)
   ============================================================================ */

.field-with-action {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--spacing-sm);
  align-items: flex-end;
  min-width: 0;
}

.field-with-action label {
  grid-column: 1 / -1;
}

.field-with-action input,
.field-with-action select {
  grid-column: 1;
}

.field-with-action button {
  grid-column: 2;
  height: 44px;
}

/* ============================================================================
   GRUPO DE CAMPOS (Dependentes)
   ============================================================================ */

.field-group {
  display: grid;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  border-left: 3px solid var(--line);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  background: color-mix(in srgb, var(--surface) 98%, var(--bg));
}

.field-group.warning {
  border-left-color: var(--amber);
  background: color-mix(in srgb, var(--amber) 3%, var(--surface));
}

.field-group.error {
  border-left-color: var(--red);
  background: color-mix(in srgb, var(--red) 3%, var(--surface));
}

.field-group.success {
  border-left-color: var(--green);
  background: color-mix(in srgb, var(--green) 3%, var(--surface));
}

/* ============================================================================
   CAMPOS COMPACTOS
   ============================================================================ */

.form-compact {
  display: grid;
  gap: var(--spacing-sm);
}

.form-compact label {
  gap: var(--spacing-xs);
}

.form-compact input,
.form-compact select,
.form-compact textarea {
  min-height: 40px;
  padding: 8px var(--spacing-sm);
  font-size: 0.9rem;
}

/* ============================================================================
   CAMPOS COM CONTADOR
   ============================================================================ */

.field-with-counter {
  position: relative;
}

.field-with-counter .counter {
  position: absolute;
  right: var(--spacing-md);
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 0.8rem;
  pointer-events: none;
}

.field-with-counter input {
  padding-right: 60px;
}

/* ============================================================================
   CAMPOS COM MÁSCARA/FORMATO
   ============================================================================ */

.currency-field {
  text-align: right;
  font-family: 'Courier New', monospace;
}

.currency-field::before {
  content: "R$";
  position: absolute;
  left: var(--spacing-md);
  color: var(--muted);
}

.percent-field {
  text-align: right;
}

.percent-field::after {
  content: "%";
  position: absolute;
  right: var(--spacing-md);
  color: var(--muted);
}

/* ============================================================================
   RESPONSIVE - CAMPOS
   ============================================================================ */

@media (max-width: 768px) {
  .form-row,
  .form-row-3,
  .form-inline,
  .fields-grid-2,
  .fields-grid-3,
  .fields-grid-4 {
    grid-template-columns: 1fr;
  }

  input:not([type]),
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="date"],
  input[type="month"],
  input[type="file"],
  input[type="search"],
  textarea,
  select {
    min-height: 40px;
    padding: 8px var(--spacing-sm);
    font-size: 0.9rem;
  }

  .form-section {
    padding: var(--spacing-md);
    gap: var(--spacing-md);
  }

  .field-with-action {
    grid-template-columns: 1fr;
  }

  .field-with-action button {
    grid-column: 1;
    width: 100%;
  }

  .form-inline button {
    grid-column: 1;
    width: 100%;
  }

  select {
    background-position: right 8px center;
  }
}

@media (max-width: 480px) {
  input:not([type]),
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="date"],
  input[type="month"],
  input[type="file"],
  input[type="search"],
  textarea,
  select {
    min-height: 40px;
    padding: 8px var(--spacing-sm);
    font-size: 0.9rem;
  }

  .form-section {
    padding: var(--spacing-md);
    gap: var(--spacing-sm);
  }

  .form-compact input,
  .form-compact select {
    font-size: 0.85rem;
  }
}

/* ============================================================================
   ESTADOS DE CAMPOS
   ============================================================================ */

/* CARREGANDO */
input.loading,
select.loading {
  opacity: 0.7;
  pointer-events: none;
}

/* APENAS LEITURA */
input[readonly],
select[readonly],
textarea[readonly] {
  background: color-mix(in srgb, var(--surface) 70%, var(--bg));
  color: var(--muted);
  cursor: default;
  border-color: var(--line);
}

/* SUCESSO */
input.success,
select.success {
  border-color: var(--green);
  background: color-mix(in srgb, var(--green) 2%, var(--surface));
}

/* ERRO */
input.error,
select.error {
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 2%, var(--surface));
}

/* AVISO */
input.warning,
select.warning {
  border-color: var(--amber);
  background: color-mix(in srgb, var(--amber) 2%, var(--surface));
}

/* ============================================================================
   LABEL FLOTANTE
   ============================================================================ */

.form-floating {
  position: relative;
  display: grid;
}

.form-floating input,
.form-floating select {
  padding-top: 20px;
  padding-bottom: 8px;
}

.form-floating > label {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  pointer-events: none;
  padding: 0 var(--spacing-md);
  display: flex;
  align-items: center;
  color: var(--muted);
  transition: all 0.2s ease;
}

.form-floating input:focus ~ label,
.form-floating select:focus ~ label,
.form-floating input:not(:placeholder-shown) ~ label,
.form-floating select:not(:placeholder-shown) ~ label {
  top: -8px;
  font-size: 0.75rem;
  padding: 0 4px;
  background: var(--surface);
  color: var(--blue);
}

/* ============================================================================
   ALINHAMENTO VERTICAL DE CAMPOS
   ============================================================================ */

.form-aligned {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: var(--spacing-md);
  align-items: center;
}

.form-aligned label {
  margin-bottom: 0;
  font-weight: 600;
  text-align: right;
}

.form-aligned input,
.form-aligned select,
.form-aligned textarea {
  grid-column: 2;
}

/* ============================================================================
   CAMPO COM ÍCONE HELPER
   ============================================================================ */

.field-with-help-icon {
  position: relative;
}

.field-with-help-icon .help-icon {
  position: absolute;
  right: var(--spacing-md);
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--blue);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: bold;
  cursor: help;
}

.field-with-help-icon input {
  padding-right: 40px;
}

/* ============================================================================
   TOGGLE SWITCH
   ============================================================================ */

.toggle-switch {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  height: 44px;
  padding: 0 var(--spacing-md);
  border: var(--border-width) solid var(--line);
  border-radius: var(--border-radius);
  background: var(--surface);
  cursor: pointer;
  transition: all 0.2s ease;
}

.toggle-switch input {
  position: relative;
  width: 44px;
  height: 24px;
  appearance: none;
  background: var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: auto;
  border: 0;
  padding: 0;
  margin: 0;
}

.toggle-switch input::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  top: 2px;
  left: 2px;
  transition: left 0.2s ease;
}

.toggle-switch input:checked {
  background: var(--green);
}

.toggle-switch input:checked::before {
  left: 22px;
}

/* ============================================================================
   RANGE SLIDER
   ============================================================================ */

input[type="range"] {
  width: 100%;
  min-height: auto;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  accent-color: var(--blue);
}

input[type="range"]::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--blue);
  border: 2px solid #ffffff;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--blue);
  border: 2px solid #ffffff;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  background: var(--line);
  border-radius: 2px;
}

input[type="range"]::-moz-range-track {
  background: transparent;
  border: 0;
}