/*
  Wortic macOS UI Kit — Text Field
  wm-field — envelope para <input>/<textarea> de texto, busca, senha,
  número, url, email — a variação vem do atributo `type`, não de classes.
  Fundo branco, ring hairline, leve inset de contato no topo e focus ring
  duplo (borda accent sólida + halo alpha).
*/

@layer components {
  .wm-field {
    --_ring: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.16), rgba(255, 255, 255, 0.14));
    --_inset: inset 0 1px 1.5px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.3));

    position: relative;
    display: flex;
    align-items: center;
    height: var(--wm-control-height-md);
    border-radius: var(--wm-radius-sm);
    border: none;
    /* fallback para engines sem light-dark() */
    background: var(--wm-surface-primary);
    background: light-dark(#ffffff, rgba(255, 255, 255, 0.06));
    box-shadow: var(--_ring), var(--_inset);
    transition: box-shadow var(--wm-duration-fast) var(--wm-ease-standard),
      background var(--wm-duration-fast) var(--wm-ease-standard);
  }

  .wm-field:hover:not(:has(.wm-field__input:disabled)):not(:has(.wm-field__input:focus-visible)) {
    --_ring: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.24), rgba(255, 255, 255, 0.2));
  }

  .wm-field:has(.wm-field__input:focus-visible) {
    box-shadow: 0 0 0 1px var(--wm-accent), var(--_inset), 0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill);
  }

  /* Disabled trabalhado: sem opacity genérica */
  .wm-field:has(.wm-field__input:disabled) {
    background: var(--wm-fill-quaternary);
    box-shadow: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.07));
  }
  .wm-field__input:disabled {
    color: var(--wm-label-tertiary);
    cursor: not-allowed;
  }

  .wm-field--invalid {
    --_ring: 0 0 0 1px var(--wm-error);
  }
  .wm-field--invalid:has(.wm-field__input:focus-visible) {
    box-shadow: 0 0 0 1px var(--wm-error), var(--_inset), 0 0 0 var(--wm-focus-halo-width) var(--wm-error-fill);
  }

  .wm-field__icon {
    flex: none;
    color: var(--wm-label-tertiary);
    margin-inline-start: var(--wm-space-5);
  }

  .wm-field__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding-inline: var(--wm-space-5);
    border: none;
    background: transparent;
    font-family: var(--wm-font-family);
    font-size: var(--wm-font-size-body);
    color: var(--wm-label-primary);
    outline: none;
    caret-color: var(--wm-accent);
  }
  .wm-field:has(.wm-field__icon) .wm-field__input {
    padding-inline-start: var(--wm-space-3);
  }
  .wm-field__input[type="number"] {
    font-variant-numeric: tabular-nums;
  }

  .wm-field__input::placeholder {
    color: var(--wm-label-tertiary);
  }

  .wm-field__clear {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-inline-end: var(--wm-space-4);
    border-radius: 50%;
    color: var(--wm-label-tertiary);
    background: var(--wm-fill-secondary);
    cursor: pointer;
    transition: background var(--wm-duration-fast) var(--wm-ease-standard),
      color var(--wm-duration-fast) var(--wm-ease-standard),
      transform var(--wm-duration-fast) var(--wm-ease-emphasized);
  }
  .wm-field__clear:hover {
    background: var(--wm-fill-primary);
    color: var(--wm-label-primary);
  }
  .wm-field__clear:active {
    transform: scale(0.9);
  }

  .wm-field__affix {
    flex: none;
    padding-inline: var(--wm-space-4);
    font-size: var(--wm-font-size-subheadline);
    color: var(--wm-label-tertiary);
    border-inline-start: 1px solid light-dark(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.08));
    height: 100%;
    display: inline-flex;
    align-items: center;
  }
  .wm-field__prefix {
    border-inline-start: none;
    border-inline-end: 1px solid light-dark(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.08));
  }

  .wm-field--small {
    height: var(--wm-control-height-sm);
    border-radius: var(--wm-radius-xs);
  }
  .wm-field--small .wm-field__input {
    font-size: var(--wm-font-size-subheadline);
  }

  /* Text area */
  .wm-textarea {
    display: block;
    width: 100%;
    min-height: 88px;
    padding: var(--wm-space-5) var(--wm-space-5);
    border-radius: var(--wm-radius-sm);
    border: none;
    background: var(--wm-surface-primary);
    background: light-dark(#ffffff, rgba(255, 255, 255, 0.06));
    box-shadow: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.16), rgba(255, 255, 255, 0.14)),
      inset 0 1px 1.5px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.3));
    color: var(--wm-label-primary);
    font-family: var(--wm-font-family);
    font-size: var(--wm-font-size-body);
    line-height: var(--wm-line-height-relaxed);
    caret-color: var(--wm-accent);
    resize: vertical;
    outline: none;
    transition: box-shadow var(--wm-duration-fast) var(--wm-ease-standard),
      background var(--wm-duration-fast) var(--wm-ease-standard);
  }
  .wm-textarea:focus-visible {
    box-shadow: 0 0 0 1px var(--wm-accent),
      inset 0 1px 1.5px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.3)),
      0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill);
  }
  .wm-textarea:disabled {
    background: var(--wm-fill-quaternary);
    box-shadow: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.07));
    color: var(--wm-label-tertiary);
    cursor: not-allowed;
    resize: none;
  }

  /* Scrollbar fina no overflow interno da textarea */
  .wm-textarea::-webkit-scrollbar {
    width: 8px;
  }
  .wm-textarea::-webkit-scrollbar-thumb {
    background: var(--wm-scrollbar-thumb);
    border-radius: var(--wm-radius-pill);
    background-clip: padding-box;
    border: 2px solid transparent;
  }
  .wm-textarea::-webkit-scrollbar-thumb:hover {
    background-color: var(--wm-scrollbar-thumb-hover);
  }

  /* Field group (label + helper/error) */
  .wm-field-group {
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-3);
  }
  .wm-field-group__label {
    font-size: var(--wm-font-size-subheadline);
    font-weight: var(--wm-font-weight-medium);
    letter-spacing: var(--wm-letter-spacing-tight);
    color: var(--wm-label-primary);
  }
  .wm-field-group__help {
    font-size: var(--wm-font-size-caption);
    color: var(--wm-label-tertiary);
  }
  .wm-field-group__error {
    font-size: var(--wm-font-size-caption);
    color: var(--wm-error);
    display: flex;
    align-items: center;
    gap: var(--wm-space-2);
  }

  /* Token field */
  .wm-token-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wm-space-3);
    min-height: var(--wm-control-height-md);
    padding: var(--wm-space-2) var(--wm-space-4);
    border-radius: var(--wm-radius-sm);
    border: none;
    background: var(--wm-surface-primary);
    background: light-dark(#ffffff, rgba(255, 255, 255, 0.06));
    box-shadow: 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.16), rgba(255, 255, 255, 0.14)),
      inset 0 1px 1.5px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.3));
    transition: box-shadow var(--wm-duration-fast) var(--wm-ease-standard);
  }
  .wm-token-field:focus-within {
    box-shadow: 0 0 0 1px var(--wm-accent),
      inset 0 1px 1.5px light-dark(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.3)),
      0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill);
  }
  .wm-token-field__token {
    display: inline-flex;
    align-items: center;
    gap: var(--wm-space-2);
    height: 22px;
    padding-inline: var(--wm-space-4);
    border-radius: var(--wm-radius-pill);
    background: var(--wm-accent-fill);
    box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--wm-accent) 22%, transparent);
    color: var(--wm-accent);
    font-size: var(--wm-font-size-subheadline);
    font-weight: var(--wm-font-weight-medium);
  }
  .wm-token-field__token button {
    display: inline-flex;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
  }
  .wm-token-field__token button:hover {
    opacity: 1;
  }
  .wm-token-field__input {
    flex: 1 1 80px;
    min-width: 80px;
    border: none;
    background: transparent;
    outline: none;
    font-size: var(--wm-font-size-body);
    color: var(--wm-label-primary);
    caret-color: var(--wm-accent);
    height: 24px;
  }

  @media (prefers-reduced-motion: reduce) {
    .wm-field,
    .wm-textarea,
    .wm-token-field,
    .wm-field__clear {
      transition: none;
    }
    .wm-field__clear:active {
      transform: none;
    }
  }
}