/* ==========================================================================
   WM Form Field Styles — Desktop Web App
   Layout: label | input | help/error, aligned as columns across all rows
   ========================================================================== */
.wm-form {
    display: grid;
    grid-template-columns: minmax(120px, 200px) minmax(200px, 1fr) minmax(150px, 250px);
    column-gap: 1rem;
    row-gap: 0.75rem;
    align-items: start;
}

.wm-form .wm-field {
    display: contents; 
}

.wm-form .wm-label {
    grid-column: 1;
    padding-top: .5rem;
    font-weight: 600;
}

.wm-form .wm-input,
.wm-form .wm-select {
    grid-column: 2;
    width: 100%;
    padding: .5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.wm-form .wm-message {
    grid-column: 3;
    font-size: .85rem;
    padding-top: .5rem;
    min-height: 1.2rem; 
}

    .wm-form .wm-message .wm-help {
        color: darkslategrey;
    }

    .wm-form .wm-message .wm-error {
        color: red;
    }

    .wm-form .wm-message .wm-loading {
        color: darkslategrey;
    }

.wm-form .wm-required {
    color: red;
}

.wm-form .wm-field-error .wm-input,
.wm-form .wm-field-error .wm-select {
    border-color: red;
}

.wm-form .wm-field-disabled {
    opacity: .6;
}

.wm-form .wm-field-loading {
    position: relative;
}