/* ============================================================================
   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. */
    .form-input,
    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 min-h-11 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;
        }
    }

    /* Notification toggle switch touch target (U35 / U78: >= 44px) */
    .notification-toggle {
        @apply inline-flex cursor-pointer items-center gap-2 min-h-11;
    }

    /* iPhone (WebKit): an EMPTY date/time input has no intrinsic width, so in a
       flex row it collapses to a sliver with no visible box to tap (Mark,
       2026-09-24, Transactions "Dates" on an iPhone). A floor on the size keeps
       every date/time control visible and tappable on every page; utilities
       that set an explicit width (w-36, w-44) still win where they are wider. */
    [type="date"],
    [type="datetime-local"],
    [type="month"],
    [type="time"],
    [type="week"] {
        min-width: 8rem;
        min-height: 2.75rem;

        &::-webkit-date-and-time-value {
            text-align: left;
            min-height: 1.5em;
        }
    }

    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;
    }

    /* ----------------------------------------------------------------------
       COMPACT PHONE LABEL (U70, v1.5 / WP14)
       On phone screens (< 640px), the field label sits at the top edge inside
       the field's box (12px, >= 4.5:1 contrast) with the example placeholder (U11)
       still visible beneath it. This makes forms ~20% shorter on mobile while
       keeping every label and example visible at all times.
       Scoped to .field-box--compact, which Field::Component#compact_label? sets
       only for single-line typed inputs; rich text, file, textarea and select
       fields keep the label above the control.
       ---------------------------------------------------------------------- */
    @media (max-width: 639px) {
        .field-box--compact {
            display: flex;
            flex-direction: column;
            position: relative;
        }

        .field-box--compact .field-input-wrap {
            order: 1;
            margin-top: 0;
            position: relative;
        }

        .field-box--compact .field-label {
            position: absolute;
            top: 0.25rem;
            left: 0.75rem;
            right: 0.75rem;
            z-index: 10;
            pointer-events: none;
            font-size: 0.75rem;
            line-height: 1rem;
            font-weight: 500;
            color: #4b5563; /* gray-600: 7.0:1 contrast on white (>= 4.5:1) */
            margin-bottom: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .field-box--compact .field-input-wrap input {
            padding-top: 1.25rem;
            padding-bottom: 0.25rem;
            min-height: 2.75rem; /* preserves >= 44px touch target (U35/U78) */
        }

        .field-box--compact .field-hint {
            order: 2;
            margin-top: 0.25rem;
        }
    }