/* ==========================================================================
   TOPPERWORK - GLOBAL FORM SYSTEM
   ==========================================================================
   Phase: 1.37
   Purpose:
   - Reusable form controls
   - Consistent validation states
   - Mobile-first layout
   - Keyboard accessibility
   - Touch-friendly controls
   - Android WebView compatibility
   - iOS WebView compatibility
   ========================================================================== */


/* ==========================================================================
   1. FORM FOUNDATION
   ========================================================================== */

.form {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}


.form-group {
    display: flex;
    flex-direction: column;

    gap: var(--spacing-xs);

    width: 100%;
    min-width: 0;
}


.form-row {
    display: grid;

    grid-template-columns: minmax(0, 1fr);

    gap: var(--spacing-md);

    width: 100%;
    min-width: 0;
}


/* ==========================================================================
   2. LABEL
   ========================================================================== */

.form-label {
    display: inline-block;

    max-width: 100%;

    color: var(--color-text-primary);

    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);

    overflow-wrap: break-word;
}


.form-label__required {
    color: var(--color-danger);
}


/* ==========================================================================
   3. INPUT / SELECT / TEXTAREA BASE
   ========================================================================== */

.form-input,
.form-select,
.form-textarea {
    display: block;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    min-height: var(--touch-target-min);

    padding:
        var(--input-padding-y)
        var(--input-padding-x);

    appearance: none;
    -webkit-appearance: none;

    background-color: var(--color-input-background);

    border: 1px solid var(--color-input-border);
    border-radius: var(--input-radius);

    color: var(--color-text-primary);

    font-family: inherit;
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);

    outline: none;

    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background-color var(--transition-fast),
        color var(--transition-fast);

    -webkit-tap-highlight-color: transparent;
}


/* ==========================================================================
   4. PLACEHOLDER
   ========================================================================== */

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--color-input-placeholder);

    opacity: 1;
}


/* ==========================================================================
   5. FOCUS STATE
   ========================================================================== */

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--color-primary);

    box-shadow:
        0 0 0 3px
        var(--color-focus-ring);
}


.form-input:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible {
    border-color: var(--color-primary);

    box-shadow:
        0 0 0 3px
        var(--color-focus-ring);
}


/* ==========================================================================
   6. TEXTAREA
   ========================================================================== */

.form-textarea {
    min-height: 120px;

    resize: vertical;
}


/* ==========================================================================
   7. SELECT
   ========================================================================== */

.form-select {
    cursor: pointer;

    padding-right:
        calc(
            var(--input-padding-x) * 2 + 20px
        );

    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            currentColor 50%
        ),
        linear-gradient(
            135deg,
            currentColor 50%,
            transparent 50%
        );

    background-position:
        calc(100% - 14px) 50%,
        calc(100% - 9px) 50%;

    background-size:
        5px 5px,
        5px 5px;

    background-repeat: no-repeat;
}


/* ==========================================================================
   8. CHECKBOX & RADIO
   ========================================================================== */

.form-check {
    display: flex;
    align-items: flex-start;

    gap: var(--spacing-sm);

    width: 100%;
    min-width: 0;

    min-height: var(--touch-target-min);
}


.form-checkbox,
.form-radio {
    flex: 0 0 auto;

    width: 20px;
    height: 20px;

    margin-top: 2px;

    accent-color: var(--color-primary);

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
}


.form-checkbox:focus,
.form-radio:focus {
    outline: none;
}


.form-checkbox:focus-visible,
.form-radio:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;

    box-shadow:
        0 0 0 3px
        var(--color-focus-ring);
}


.form-check__label {
    min-width: 0;

    color: var(--color-text-secondary);

    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);

    overflow-wrap: break-word;

    cursor: pointer;
}


/* ==========================================================================
   9. HELP TEXT
   ========================================================================== */

.form-help {
    color: var(--color-text-muted);

    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);

    overflow-wrap: break-word;
}


/* ==========================================================================
   10. VALIDATION STATES
   ========================================================================== */

.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid,
.form-input[aria-invalid="true"],
.form-select[aria-invalid="true"],
.form-textarea[aria-invalid="true"] {
    border-color: var(--color-danger);
}


.form-input.is-invalid:focus,
.form-select.is-invalid:focus,
.form-textarea.is-invalid:focus,
.form-input[aria-invalid="true"]:focus,
.form-select[aria-invalid="true"]:focus,
.form-textarea[aria-invalid="true"]:focus {
    border-color: var(--color-danger);

    box-shadow:
        0 0 0 3px
        var(--color-danger-focus-ring);
}


.form-input.is-invalid:focus-visible,
.form-select.is-invalid:focus-visible,
.form-textarea.is-invalid:focus-visible,
.form-input[aria-invalid="true"]:focus-visible,
.form-select[aria-invalid="true"]:focus-visible,
.form-textarea[aria-invalid="true"]:focus-visible {
    border-color: var(--color-danger);

    box-shadow:
        0 0 0 3px
        var(--color-danger-focus-ring);
}


.form-input.is-valid,
.form-select.is-valid,
.form-textarea.is-valid {
    border-color: var(--color-success);
}


.form-input.is-valid:focus,
.form-select.is-valid:focus,
.form-textarea.is-valid:focus {
    border-color: var(--color-success);

    box-shadow:
        0 0 0 3px
        var(--color-success-focus-ring);
}


.form-input.is-valid:focus-visible,
.form-select.is-valid:focus-visible,
.form-textarea.is-valid:focus-visible {
    border-color: var(--color-success);

    box-shadow:
        0 0 0 3px
        var(--color-success-focus-ring);
}


/* ==========================================================================
   11. VALIDATION MESSAGES
   ========================================================================== */

.form-error {
    color: var(--color-danger);

    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);

    overflow-wrap: break-word;
}


.form-success {
    color: var(--color-success);

    font-size: var(--font-size-xs);
    line-height: var(--line-height-normal);

    overflow-wrap: break-word;
}


/* ==========================================================================
   12. DISABLED STATE
   ========================================================================== */

.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled,
.form-checkbox:disabled,
.form-radio:disabled,
.form-input[aria-disabled="true"],
.form-select[aria-disabled="true"],
.form-textarea[aria-disabled="true"] {
    cursor: not-allowed;

    opacity: var(--opacity-disabled);

    pointer-events: none;
}


/* ==========================================================================
   13. READONLY STATE
   ========================================================================== */

.form-input[readonly],
.form-textarea[readonly] {
    cursor: default;

    background-color: var(--color-surface-muted);
}


/* ==========================================================================
   14. AUTOFILL SAFETY
   ========================================================================== */

.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus,
.form-textarea:-webkit-autofill,
.form-textarea:-webkit-autofill:hover,
.form-textarea:-webkit-autofill:focus,
.form-select:-webkit-autofill,
.form-select:-webkit-autofill:hover,
.form-select:-webkit-autofill:focus {
    -webkit-text-fill-color:
        var(--color-text-primary);

    caret-color:
        var(--color-text-primary);

    box-shadow:
        0 0 0 1000px
        var(--color-input-background)
        inset;

    transition:
        background-color
        9999s
        ease-in-out
        0s;
}


/* ==========================================================================
   15. FILE INPUT
   ========================================================================== */

.form-input[type="file"] {
    padding: var(--spacing-xs);

    cursor: pointer;

    overflow: hidden;
}


.form-input[type="file"]::file-selector-button,
.form-input[type="file"]::-webkit-file-upload-button {
    margin-right: var(--spacing-sm);

    padding:
        var(--spacing-xs)
        var(--spacing-sm);

    border: 0;
    border-radius: var(--radius-sm);

    background: var(--color-surface-muted);

    color: var(--color-text-primary);

    font: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);

    cursor: pointer;
}


/* ==========================================================================
   16. NUMBER INPUT
   ========================================================================== */

.form-input[type="number"] {
    -moz-appearance: textfield;
}


.form-input[type="number"]::-webkit-outer-spin-button,
.form-input[type="number"]::-webkit-inner-spin-button {
    margin: 0;

    -webkit-appearance: none;
}


/* ==========================================================================
   17. FORM ACTIONS
   ========================================================================== */

.form-actions {
    display: flex;
    flex-direction: column;

    gap: var(--spacing-sm);

    width: 100%;
    min-width: 0;
}


.form-actions .btn {
    width: 100%;
    max-width: 100%;
}


/* ==========================================================================
   18. TABLET AND ABOVE
   ========================================================================== */

@media (min-width: 641px) {

    .form-row--2 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .form-row--3 {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }


    .form-actions {
        flex-direction: row;

        align-items: center;
    }


    .form-actions .btn {
        width: auto;
    }

}


/* ==========================================================================
   19. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .form-input,
    .form-select,
    .form-textarea {
        transition: none;
    }

}