/* ============================================================================
   FORM FIELDS — the ONE canonical form-control layer for NDR (design system,
   t304). Single source of truth for text inputs, textareas, selects, checkboxes
   and radios. The Field / Select / Textarea / Checkbox / Radio ViewComponents
   render these; screens get the same control styling whether they use the
   component or a bare element. Consolidated out of tailwind/application.css.

   Honors: label 14px/medium (.label), placeholder = a short muted hint example
   (input-placeholder-standard), focus ring (tan-600), hover gold ring, disabled
   state, and the prominent dropdown caret standard (dropdown-arrow-prominent).
   ============================================================================ */

    /* Form-field label (also usable as a `.label` class on non-<label> meta keys):
       the 14px / medium "label" role of the type scale. */
    label, .label {
        @apply block text-sm/6 font-medium text-gray-900;
    }

    /* TEXT-STYLE CONTROLS — inputs, textarea, and select share one base look. */
    input:where(:not([type])), /* no type attribute */
    [type="date"],
    [type="datetime-local"],
    [type="email"],
    [type="file"],
    [type="month"],
    [type="number"],
    [type="password"],
    [type="search"],
    [type="tel"],
    [type="text"],
    [type="time"],
    [type="url"],
    [type="week"],
    [multiple],
    textarea,
    select {
        @apply block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 sm:text-sm/6;
        /* PLACEHOLDER COPY STANDARD — a short EXAMPLE of valid input
           ("you@example.com", "e.g. Petrolia, ON") or a brief search hint
           ("Search rentals…"); never a repeat of the label, an instruction, or
           marketing copy. Masked password fields get NO placeholder. Always
           muted (gray-400) so it reads as a hint, not entered text. */
        @apply placeholder:text-gray-400;
        @apply focus:ring-2 focus:ring-inset focus:ring-tan-600;
        @apply hover:ring-2 hover:ring-brand-gold;

        &:disabled {
            @apply cursor-not-allowed bg-gray-50 text-gray-500 ring-gray-200;
        }
    }

    input::file-selector-button {
        @apply ml-2;
    }

    /* Currency / plain numeric inputs: hide the native up/down spin buttons so a
       money field reads like a value, not a stepper. Add `.no-spinner`. */
    .no-spinner {
        appearance: textfield;
        -moz-appearance: textfield;
    }
    .no-spinner::-webkit-outer-spin-button,
    .no-spinner::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* ----------------------------------------------------------------------
       SELECT — the ONE prominent-caret dropdown (fixes inventory finding A:
       native selects showed the tiny OS caret, contradicting the
       dropdown-arrow-prominent standard). `.select-field` hides the OS caret and
       reserves right padding; `.select-wrap` positions the bold chevron
       (`.select-caret`, same geometry as DropdownButtonComponent — size-7,
       stroke-width 3) so every select in the app carries one prominent caret.
       ---------------------------------------------------------------------- */
    .select-field {
        @apply appearance-none pr-11;
    }
    .select-wrap {
        @apply relative;
    }
    .select-caret {
        @apply pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 size-7 text-gray-500;
    }
    /* When the select itself is disabled, dim its caret to match. */
    .select-wrap:has(select:disabled) .select-caret {
        @apply text-gray-300;
    }

    /* ----------------------------------------------------------------------
       CHECKBOX / RADIO — brand-accented boxes with a visible focus ring and a
       44px touch row (the Checkbox / Radio components own the row + label).
       ---------------------------------------------------------------------- */
    .checkbox-field {
        @apply size-5 shrink-0 rounded border-gray-300 text-brand-green;
        @apply focus:ring-2 focus:ring-offset-2 focus:ring-brand-green;
        @apply disabled:cursor-not-allowed disabled:opacity-50;
    }
    .radio-field {
        @apply size-5 shrink-0 border-gray-300 text-brand-green;
        @apply focus:ring-2 focus:ring-offset-2 focus:ring-brand-green;
        @apply disabled:cursor-not-allowed disabled:opacity-50;
    }