/* =============================================================
   Componente — campos de formulário
   Inclui rótulo, dica, erro, estados de foco/disabled/inválido,
   a barra de busca e o seletor.
   ============================================================= */

@layer components {

  .field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .field__label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-muted);
  }

  .field__required {
    color: var(--danger-text);
    margin-inline-start: var(--space-1);
  }

  .field__hint {
    font-size: var(--fs-xs);
    color: var(--text-subtle);
  }

  .field__error {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--danger-text);
  }

  .input,
  .textarea,
  .select {
    inline-size: 100%;
    min-block-size: var(--tap-target);
    padding: var(--space-3) var(--space-4);
    background-color: var(--surface-sunken);
    border: 1px solid var(--border-control);
    border-radius: var(--radius-md);
    color: var(--text-strong);
    font-family: var(--font-body);
    font-size: var(--fs-md);
    line-height: var(--lh-snug);
    transition:
      border-color var(--dur-fast) var(--ease-out),
      box-shadow var(--dur-fast) var(--ease-out),
      background-color var(--dur-fast) var(--ease-out);
  }

  .textarea {
    min-block-size: 5.5rem;
    line-height: var(--lh-normal);
  }

  .input:hover:not(:disabled),
  .textarea:hover:not(:disabled),
  .select:hover:not(:disabled) {
    border-color: var(--border-control-hover);
  }

  .input:focus-visible,
  .textarea:focus-visible,
  .select:focus-visible {
    outline: none;
    border-color: var(--palette-blue-500);
    box-shadow: var(--focus-ring);
  }

  .input:disabled,
  .textarea:disabled,
  .select:disabled {
    background-color: var(--surface-raised);
    border-color: var(--border-subtle);
    color: var(--text-subtle);
    cursor: not-allowed;
  }

  .input[aria-invalid="true"],
  .textarea[aria-invalid="true"] {
    border-color: var(--danger-fill);
  }

  .input[aria-invalid="true"]:focus-visible,
  .textarea[aria-invalid="true"]:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger-fill) 40%, transparent);
  }

  .select {
    appearance: none;
    padding-inline-end: var(--space-10);
    background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
      linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position:
      calc(100% - 1.25rem) calc(50% + 1px),
      calc(100% - 0.9375rem) calc(50% + 1px);
    background-size: 0.3125rem 0.3125rem, 0.3125rem 0.3125rem;
    background-repeat: no-repeat;
    cursor: pointer;
  }

  .select option {
    background-color: var(--surface-overlay);
    color: var(--text-strong);
  }

  /* Código de verificação / valores digitados dígito a dígito */
  .input--code {
    font-family: var(--font-mono);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.4em;
    text-align: center;
    text-indent: 0.4em;
  }

  .input--numeric {
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  /* ----- Barra de busca ----- */

  .search {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    inline-size: 100%;
    padding-inline: var(--space-4);
    background-color: var(--surface-sunken);
    border: 1px solid var(--border-control);
    border-radius: var(--radius-lg);
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  }

  .search:hover {
    border-color: var(--border-control-hover);
  }

  .search:focus-within {
    border-color: var(--palette-blue-500);
    box-shadow: var(--focus-ring);
  }

  .search > svg {
    inline-size: var(--icon-md);
    block-size: var(--icon-md);
    flex: none;
    stroke: var(--text-subtle);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .search__input {
    flex: 1;
    min-inline-size: 0;
    min-block-size: var(--tap-target);
    padding: 0;
    background: none;
    border: 0;
    color: var(--text-strong);
    font-size: var(--fs-md);
  }

  .search__input:focus {
    outline: none;
  }

  /* Painel de busca que expande a partir do cabeçalho */
  .search-panel {
    display: grid;
    grid-template-rows: 0fr;
    padding-inline: var(--gutter);
    background-color: color-mix(in srgb, var(--surface-raised) 88%, transparent);
    border-block-end: 1px solid transparent;
    transition:
      grid-template-rows var(--dur-normal) var(--ease-out),
      padding-block var(--dur-normal) var(--ease-out),
      border-color var(--dur-normal) var(--ease-out);
  }

  .search-panel > * {
    overflow: hidden;
  }

  .search-panel[data-open="true"] {
    grid-template-rows: 1fr;
    padding-block: var(--space-3);
    border-block-end-color: var(--border-subtle);
  }

  /* Painel de filtros ancorado no cabeçalho */
  .filter-panel {
    position: absolute;
    inset-block-start: calc(100% + var(--space-2));
    inset-inline-end: var(--space-3);
    z-index: var(--z-dropdown);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-inline-size: 14rem;
    padding: var(--space-4);
    background-color: var(--surface-overlay);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.375rem);
    transition:
      opacity var(--dur-fast) var(--ease-out),
      transform var(--dur-fast) var(--ease-out),
      visibility var(--dur-fast) var(--ease-out);
  }

  .filter-panel[data-open="true"] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}