/* ════════════════════════════════════════════════════════════════════
   PF DESIGN SYSTEM — Input Component
   ────────────────────────────────────────────────────────────────────
   Form-field component covering text, number, email, search, tel, url,
   date, datetime-local, password, select, textarea, checkbox, radio.

   USAGE
     <!-- Basic input with label -->
     <label class="pf-field">
       <span class="pf-field__label">Email</span>
       <input type="email" class="pf-input" placeholder="you@example.com">
       <span class="pf-field__hint">We'll never share it.</span>
     </label>

     <!-- Required + error state -->
     <label class="pf-field pf-field--invalid">
       <span class="pf-field__label">Title <abbr title="required">*</abbr></span>
       <input type="text" class="pf-input" required aria-invalid="true">
       <span class="pf-field__error">Title is required.</span>
     </label>

     <!-- Sizes -->
     <input class="pf-input pf-input--sm">
     <input class="pf-input pf-input--lg">

     <!-- Select -->
     <select class="pf-input pf-input--select">…</select>

     <!-- Textarea -->
     <textarea class="pf-input pf-input--textarea" rows="4"></textarea>

     <!-- Checkbox / Radio -->
     <label class="pf-checkbox">
       <input type="checkbox" class="pf-checkbox__input">
       <span class="pf-checkbox__indicator" aria-hidden="true"></span>
       <span class="pf-checkbox__label">I agree</span>
     </label>

   ACCESSIBILITY
     • Focus-visible ring with --pf-focus-ring (WCAG 2.4.7)
     • Invalid state via [aria-invalid="true"] AND .pf-field--invalid wrap
     • Required marker via <abbr title="required">*</abbr> in label
     • Placeholder is supplementary, never replaces label
     • Min touch target: 44px on mobile (auto via padding + line-height)
     • prefers-reduced-motion respected for transitions
     • Color-blind friendly: icon + color for invalid (not color alone)

   Version: 1.0.0
   Last revised: 2026-05-10
   ──────────────────────────────────────────────────────────────────── */

/* ─── Block: .pf-field (wrapper for label + input + hint/error) ── */

.pf-field {
    display: flex;
    flex-direction: column;
    gap: var(--pf-space-1-5);
    font-family: inherit;
}

/* ─── Element: __label (form field label) ────────────────────── */

.pf-field__label {
    font-size: var(--pf-text-size-sm);
    font-weight: var(--pf-text-weight-medium);
    color: var(--pf-color-text-primary);
    line-height: var(--pf-text-leading-snug);
}

.pf-field__label abbr[title="required"] {
    color: var(--pf-color-status-danger);
    text-decoration: none;
    margin-inline-start: 2px;
}

/* ─── Element: __hint (helper text below input) ──────────────── */

.pf-field__hint {
    font-size: var(--pf-text-size-xs);
    color: var(--pf-color-text-tertiary);
    line-height: var(--pf-text-leading-normal);
}

/* ─── Element: __error (error message — always pairs with aria-invalid) ── */

.pf-field__error {
    font-size: var(--pf-text-size-xs);
    color: var(--pf-color-status-danger-fg);
    line-height: var(--pf-text-leading-normal);
    display: flex;
    align-items: center;
    gap: var(--pf-space-1);
}

.pf-field__error::before {
    /* Color-blind friendly: icon supplements color signal */
    content: "⚠";
    font-size: 1em;
}

/* ─── Block: .pf-input (text-like inputs + select + textarea) ─── */

.pf-input {
    /* Layout */
    display: block;
    width: 100%;
    min-height: 40px; /* Touch target — auto via padding for inputs */

    /* Typography */
    font-family: inherit;
    font-size: var(--pf-input-font-size);
    line-height: var(--pf-text-leading-normal);
    color: var(--pf-input-fg);

    /* Box */
    padding: var(--pf-input-padding-y) var(--pf-input-padding-x);
    background: var(--pf-input-bg);
    border: 1px solid var(--pf-input-border);
    border-radius: var(--pf-input-radius);

    /* Removed default browser styling */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    /* Smooth transitions */
    transition:
        border-color var(--pf-motion-duration-fast) var(--pf-motion-ease-out),
        box-shadow var(--pf-motion-duration-fast) var(--pf-motion-ease-out),
        background var(--pf-motion-duration-fast) var(--pf-motion-ease-out);
}

.pf-input::placeholder {
    color: var(--pf-input-fg-placeholder);
    opacity: 1; /* Firefox normalises to 0.54 — restore */
}

.pf-input:hover:not(:disabled):not(:read-only) {
    border-color: var(--pf-input-border-hover);
}

.pf-input:focus-visible {
    outline: none;
    border-color: var(--pf-input-border-focus);
    box-shadow: var(--pf-input-shadow-focus);
}

.pf-input:disabled,
.pf-input[aria-disabled="true"] {
    background: var(--pf-input-bg-disabled);
    color: var(--pf-input-fg-disabled);
    cursor: not-allowed;
    opacity: 0.7;
}

.pf-input:read-only:not([type="checkbox"]):not([type="radio"]) {
    background: var(--pf-color-surface-base);
    cursor: default;
}

/* Invalid state — paired with aria-invalid="true" + .pf-field--invalid */
.pf-input[aria-invalid="true"],
.pf-field--invalid .pf-input {
    border-color: var(--pf-input-border-error);
}

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

/* ─── Modifier: --select (custom chevron + extra padding) ────── */

.pf-input--select {
    padding-inline-end: var(--pf-space-8);
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--pf-space-3) center;
    background-size: 12px 8px;
}

.pf-input--select:disabled {
    cursor: not-allowed;
}

/* ─── Modifier: --textarea (multi-line) ─────────────────────── */

.pf-input--textarea {
    min-height: 96px;
    resize: vertical;
    font-family: inherit; /* Some browsers default to monospace */
    line-height: var(--pf-text-leading-relaxed);
}

/* ─── Modifier: --search (rounded + clear button affordance) ── */

.pf-input--search {
    border-radius: var(--pf-radius-full);
    padding-inline-start: var(--pf-space-9, 2.25rem);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='currentColor' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M11 11l4 4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: var(--pf-space-3) center;
    background-size: 16px 16px;
}

/* ─── Sizes ──────────────────────────────────────────────────── */

.pf-input--sm {
    min-height: 32px;
    padding: var(--pf-space-1) var(--pf-space-2);
    font-size: var(--pf-text-size-sm);
}

.pf-input--lg {
    min-height: 48px;
    padding: var(--pf-space-3) var(--pf-space-4);
    font-size: var(--pf-text-size-lg);
}

/* ─── Block: .pf-checkbox / .pf-radio ────────────────────────── */

.pf-checkbox,
.pf-radio {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--pf-space-2);
    cursor: pointer;
    user-select: none;
    font-size: var(--pf-text-size-sm);
    color: var(--pf-color-text-primary);
    line-height: var(--pf-text-leading-snug);
}

.pf-checkbox__input,
.pf-radio__input {
    /* Visually hidden but accessible — paired with __indicator */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
    white-space: nowrap;
}

.pf-checkbox__indicator,
.pf-radio__indicator {
    /* Custom indicator drawn with CSS */
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px; /* baseline-align with first text-line */
    background: var(--pf-input-bg);
    border: 1.5px solid var(--pf-input-border);
    transition:
        background var(--pf-motion-duration-fast) var(--pf-motion-ease-out),
        border-color var(--pf-motion-duration-fast) var(--pf-motion-ease-out),
        box-shadow var(--pf-motion-duration-fast) var(--pf-motion-ease-out);
}

.pf-checkbox__indicator {
    border-radius: var(--pf-radius-xs);
}

.pf-radio__indicator {
    border-radius: var(--pf-radius-full);
}

/* Hover — only when not disabled */
.pf-checkbox:hover .pf-checkbox__input:not(:disabled) ~ .pf-checkbox__indicator,
.pf-radio:hover .pf-radio__input:not(:disabled) ~ .pf-radio__indicator {
    border-color: var(--pf-input-border-hover);
}

/* Focus — visible ring (keyboard only) */
.pf-checkbox__input:focus-visible ~ .pf-checkbox__indicator,
.pf-radio__input:focus-visible ~ .pf-radio__indicator {
    box-shadow: var(--pf-input-shadow-focus);
}

/* Checked — fill + checkmark / dot */
.pf-checkbox__input:checked ~ .pf-checkbox__indicator {
    background: var(--pf-color-action-primary);
    border-color: var(--pf-color-action-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2 7.5 5.5 11 12 3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
}

.pf-radio__input:checked ~ .pf-radio__indicator {
    border-color: var(--pf-color-action-primary);
    border-width: 5px; /* Inner dot via thick border */
    background: var(--pf-input-bg);
}

/* Disabled */
.pf-checkbox__input:disabled ~ .pf-checkbox__indicator,
.pf-radio__input:disabled ~ .pf-radio__indicator,
.pf-checkbox__input:disabled ~ .pf-checkbox__label,
.pf-radio__input:disabled ~ .pf-radio__label {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Indeterminate state for checkboxes */
.pf-checkbox__input:indeterminate ~ .pf-checkbox__indicator {
    background: var(--pf-color-action-primary);
    border-color: var(--pf-color-action-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='3' y1='7' x2='11' y2='7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
}

/* ─── Reduced-motion respect ─────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .pf-input,
    .pf-checkbox__indicator,
    .pf-radio__indicator {
        transition: none;
    }
}