/* ═══════════════════════════════════════════════════════════════════
   components/forms.css

   Form components using semantic tokens.
   ═══════════════════════════════════════════════════════════════════ */

@layer components {
    /* Property values here mirror what the legacy app-legacy.css block
       was supplying via cascade-leakage before the 2026-05-25 @layer fix.
       padding + 0.8125rem font-size keep form inputs at the established
       compact size; uppercase form-label with letter-spacing matches the
       admin design system. */
    .form-control,
    .form-select {
        background: var(--input-bg);
        border: 1px solid var(--input-border);
        border-radius: var(--radius-md);
        font-size: 0.8125rem;
        padding: 0.4375rem 0.75rem;
        color: var(--color-text-base);
        transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
    }

    .form-control:focus,
    .form-select:focus {
        border-color: var(--input-focus-border);
        box-shadow: var(--input-focus-shadow);
        background: var(--surface-base);
        outline: none;
    }

    .form-control::placeholder {
        color: var(--color-text-muted);
    }

    .form-label {
        font-weight: var(--font-weight-medium);
        font-size: 0.75rem;
        color: var(--text-secondary);
        margin-bottom: 0.25rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }

    .form-label i {
        color: var(--color-text-muted);
        font-size: 0.625rem;
        margin-right: 0.25rem;
        opacity: 0.8;
    }

    .form-text {
        font-size: 0.6875rem;
        color: var(--color-text-muted);
        margin-top: 0.25rem;
    }

    .form-check-input {
        border-color: var(--input-border);
    }

    .form-check-input:checked {
        background-color: var(--color-primary);
        border-color: var(--color-primary);
    }

    .form-check-input:focus {
        border-color: var(--input-focus-border);
        box-shadow: var(--input-focus-shadow);
    }

    /* Windows High-Contrast Mode (forced-colors) — accessibility fallback.
       Uses CSS system colors (CanvasText, Highlight) instead of token
       references so the rendering survives high-contrast mode without
       relying on our color palette. Moved from legacy 2026-05-26. */
    @media (forced-colors: active) {
        .form-control,
        .form-select {
            border: 2px solid CanvasText;
        }
        .form-control:focus-visible,
        .form-select:focus-visible {
            outline: 3px solid Highlight;
            outline-offset: 2px;
        }
        .form-check-input:checked {
            background: Highlight;
        }
    }
}