/*
 * Forms — text inputs, labels, helper/error text, fieldsets.
 *
 * The single canonical form pattern for the whole app. Every form in
 * Finances_app should use these classes so inputs look, feel, and
 * respond identically across surfaces. If a form needs a variant the
 * pattern doesn't support, add the variant here rather than forking
 * styles in the calling template.
 *
 * Structural convention:
 *
 *   <div class="form-field">
 *     <div class="form-field__label-row">
 *       <label class="form-field__label" for="...">Email</label>
 *       <a class="form-field__inline-link">Forgot?</a>  (optional)
 *     </div>
 *     <input class="form-field__input" …>
 *     <p class="form-field__hint">optional helper text</p>
 *     <p class="form-field__error">optional error text</p>
 *   </div>
 *
 * States on the input: default, :hover, :focus-visible, :disabled,
 * [aria-invalid="true"] (error). Focus ring matches buttons for
 * consistency — same ring color, same offset.
 */

@layer components {
  .form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .form-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
  }

  /*
   * Restore the browser's default `[hidden] { display: none }` for
   * .form-field — the `display: flex` rule above otherwise wins
   * over the user-agent style and a `<div class="form-field"
   * hidden>` stays visible. Stimulus controllers (e.g. the
   * approver-picker's count field) toggle this attribute to show /
   * hide conditional inputs; the rule below makes that
   * toggle actually hide the field.
   */
  .form-field[hidden] {
    display: none;
  }

  .form-field__label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
  }

  .form-field__label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-heading);
    line-height: 1.2;
  }

  .form-field__inline-link {
    font-size: 0.75rem;
    /* color + hover inherit from base `a` rule (primary tokens). */
  }

  .form-field__input {
    appearance: none;
    width: 100%;
    box-sizing: border-box;
    min-height: 2.5rem;
    padding: 0 0.75rem;
    border: 1px solid var(--color-slate-300);
    border-radius: 0.5rem;
    background: var(--color-white);
    color: var(--color-slate-900);
    font: inherit;
    font-size: 0.9375rem;
    line-height: 1.4;
    transition: border-color 120ms ease, box-shadow 120ms ease;
  }

  .form-field__input::placeholder {
    color: var(--color-slate-400);
  }

  .form-field__input:hover {
    border-color: var(--color-slate-400);
  }

  .form-field__input:focus-visible,
  .form-field__input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px oklch(from var(--color-primary) l c h / 20%);
  }

  .form-field__input:disabled {
    background: var(--color-slate-50);
    color: var(--color-slate-500);
    cursor: not-allowed;
  }

  .form-field__input[aria-invalid="true"] {
    border-color: var(--color-danger);
  }

  .form-field__input[aria-invalid="true"]:focus-visible {
    box-shadow: 0 0 0 3px oklch(from var(--color-danger) l c h / 20%);
  }

  /* Input with trailing action (eye toggle, clear button, etc.) —
     wraps the input so an icon-button can sit over its right edge. */
  .form-field__input-wrap {
    position: relative;
  }

  .form-field__input-wrap .form-field__input {
    padding-right: 2.75rem;
  }

  .form-field__input-action {
    position: absolute;
    top: 50%;
    right: 0.375rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 0.375rem;
    background: transparent;
    color: var(--color-icon-muted);
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
  }

  .form-field__input-action:hover {
    color: var(--color-text-heading);
  }

  .form-field__input-action:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
  }

  .form-field__input-action svg {
    width: 1.125rem;
    height: 1.125rem;
  }

  /* Force the HTML `hidden` attribute on SVG — some browsers ignore
     it because the attribute is defined in HTML, not SVG, namespace. */
  .form-field__input-action svg[hidden] {
    display: none;
  }

  .form-field__hint {
    margin: 0;
    font-size: 0.75rem;
    /* color inherits from base `html` rule (body token). */
  }

  .form-field__error {
    margin: 0;
    font-size: 0.75rem;
    color: var(--color-danger);
  }
}