/* LWA Core Form Design System
 * Canonical form primitives and layout patterns for every LWA module.
 * Production filenames stay stable; asset cache refresh is handled centrally by lwa_asset().
 */

.lwa-form {
    --lwa-control-height: 42px;
    --lwa-control-padding-x: 0.75rem;
    --lwa-control-padding-y: 0.58rem;
    display: grid;
    gap: var(--lwa-space-5);
}

/* Legacy grids: retained for compatibility with existing modules. */
.lwa-form-grid,
.lwa-form-row {
    display: grid;
    gap: var(--lwa-space-4);
    align-items: start;
}

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

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

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

/* Canonical grid for new and remediated forms. */
.lwa-field-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--lwa-space-4);
    align-items: start;
}

.lwa-field-span-2 { grid-column: span 2; }
.lwa-field-span-3 { grid-column: span 3; }
.lwa-field-span-4 { grid-column: span 4; }
.lwa-field-span-5 { grid-column: span 5; }
.lwa-field-span-6 { grid-column: span 6; }
.lwa-field-span-7 { grid-column: span 7; }
.lwa-field-span-8 { grid-column: span 8; }
.lwa-field-span-9 { grid-column: span 9; }
.lwa-field-span-10 { grid-column: span 10; }
.lwa-field-span-12 { grid-column: 1 / -1; }

/* Semantic field widths. Use these instead of one-off CSS in modules. */
.lwa-field-short { grid-column: span 2; }
.lwa-field-medium { grid-column: span 3; }
.lwa-field-standard { grid-column: span 4; }
.lwa-field-wide { grid-column: span 6; }
.lwa-field-xwide { grid-column: span 8; }
.lwa-field-full { grid-column: 1 / -1; }

.lwa-form-section {
    display: grid;
    gap: var(--lwa-space-4);
    padding: var(--lwa-space-5);
    border: 1px solid var(--lwa-border-soft);
    border-radius: var(--lwa-radius-xl);
    background: var(--lwa-surface);
}

.lwa-form-section-title {
    margin: 0;
    color: var(--lwa-heading);
    font-size: var(--lwa-font-size-lg);
    font-weight: 800;
}


/* -------------------------------------------------------------------------
 * Canonical form composition patterns
 * -------------------------------------------------------------------------
 * These patterns define how common business-data groups are composed across
 * all LWA modules. Modules should select a pattern instead of inventing
 * one-off column widths.
 */

.lwa-form-subsection {
    display: grid;
    gap: var(--lwa-space-3);
    min-width: 0;
}

.lwa-form-subsection + .lwa-form-subsection {
    padding-top: var(--lwa-space-2);
}

.lwa-form-subsection-head {
    display: grid;
    gap: 0.2rem;
    margin: 0;
}

.lwa-form-subsection-title {
    margin: 0;
    color: var(--lwa-heading);
    font-size: var(--lwa-font-size-sm);
    font-weight: 800;
    line-height: 1.3;
}

.lwa-form-subsection-help {
    margin: 0;
    color: var(--lwa-text-muted);
    font-size: var(--lwa-font-size-sm);
    line-height: 1.4;
}

/* Every pattern uses the same 12-column geometry and fixed vertical rhythm. */
.lwa-pattern-system-id,
.lwa-pattern-person-name,
.lwa-pattern-person-attributes,
.lwa-pattern-contact,
.lwa-pattern-corporate-contact,
.lwa-pattern-communication,
.lwa-pattern-address-lines,
.lwa-pattern-address-locality,
.lwa-pattern-assignment,
.lwa-pattern-assignment-detail,
.lwa-pattern-eligibility,
.lwa-pattern-dates,
.lwa-pattern-money,
.lwa-pattern-code-value {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--lwa-space-4);
    align-items: start;
    min-width: 0;
}

/* System-generated/canonical identifiers intentionally occupy one compact area. */
.lwa-pattern-system-id > * { grid-column: span 3; }

/* Person names are always presented as a stable First / Middle / Last row. */
.lwa-pattern-person-name > * { grid-column: span 4; }

/* Common personal attributes: descriptive value, date, compact classification. */
.lwa-pattern-person-attributes > :nth-child(1) { grid-column: span 5; }
.lwa-pattern-person-attributes > :nth-child(2) { grid-column: span 3; }
.lwa-pattern-person-attributes > :nth-child(3) { grid-column: span 3; }

/* Contact channels align consistently across modules. */
.lwa-pattern-contact > * { grid-column: span 4; }

/* Corporate telephony keeps the extension compact without sacrificing direct-line space. */
.lwa-pattern-corporate-contact > :nth-child(1) { grid-column: span 5; }
.lwa-pattern-corporate-contact > :nth-child(2) { grid-column: span 2; }
.lwa-pattern-corporate-contact > :nth-child(3) { grid-column: span 5; }

/* Communication preferences normally stand alone; additional preferences can follow. */
.lwa-pattern-communication > * { grid-column: span 4; }

/* Postal addresses use stable real-world proportions. */
.lwa-pattern-address-lines > :nth-child(1) { grid-column: span 7; }
.lwa-pattern-address-lines > :nth-child(2) { grid-column: span 5; }
.lwa-pattern-address-locality > :nth-child(1) { grid-column: span 4; } /* City */
.lwa-pattern-address-locality > :nth-child(2) { grid-column: span 3; } /* State/Province/Region */
.lwa-pattern-address-locality > :nth-child(3) { grid-column: span 2; } /* Postal code */
.lwa-pattern-address-locality > :nth-child(4) { grid-column: span 3; } /* Country */

/* Catalog/organizational assignments remain a stable three-column decision row. */
.lwa-pattern-assignment > * { grid-column: span 4; }
.lwa-pattern-assignment-detail > :nth-child(1) { grid-column: span 5; }
.lwa-pattern-assignment-detail > :nth-child(2) { grid-column: span 4; }
.lwa-pattern-assignment-detail > :nth-child(3) { grid-column: span 3; }

/* Restricted eligibility/authorization facts use three equal columns. */
.lwa-pattern-eligibility > * { grid-column: span 4; }

/* Generic reusable patterns for other modules. */
.lwa-pattern-dates > * { grid-column: span 3; }
.lwa-pattern-money > :nth-child(1) { grid-column: span 4; }
.lwa-pattern-money > :nth-child(2) { grid-column: span 3; }
.lwa-pattern-money > :nth-child(3) { grid-column: span 3; }
.lwa-pattern-code-value > :nth-child(1) { grid-column: span 3; }
.lwa-pattern-code-value > :nth-child(2) { grid-column: span 6; }

/* Optional explicit modifiers when a pattern needs a deliberate exception. */
.lwa-pattern-fill { grid-column: 1 / -1 !important; }
.lwa-pattern-compact { grid-column: span 2 !important; }
.lwa-pattern-medium { grid-column: span 3 !important; }
.lwa-pattern-standard { grid-column: span 4 !important; }
.lwa-pattern-wide { grid-column: span 6 !important; }

/* Field anatomy: label -> fixed control -> support/error. */
.lwa-form-group {
    display: grid;
    grid-template-rows: auto auto auto;
    align-content: start;
    align-self: start;
    gap: 0.4rem;
    min-width: 0;
}

.lwa-label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 1.25rem;
    color: var(--lwa-heading);
    font-size: var(--lwa-font-size-sm);
    font-weight: 750;
    line-height: 1.25;
}

.lwa-help,
.lwa-error {
    margin: 0;
    font-size: var(--lwa-font-size-sm);
    line-height: 1.45;
}

.lwa-help { color: var(--lwa-text-muted); }
.lwa-error { color: var(--lwa-danger); font-weight: 650; }

.lwa-input,
.lwa-select,
.lwa-textarea {
    box-sizing: border-box;
    width: 100%;
    border: 1px solid var(--lwa-border);
    border-radius: var(--lwa-radius-md);
    background: #ffffff;
    color: var(--lwa-text);
    outline: none;
    box-shadow: var(--lwa-shadow-xs);
    font: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.lwa-input,
.lwa-select {
    height: var(--lwa-control-height);
    min-height: var(--lwa-control-height);
    max-height: var(--lwa-control-height);
    padding: var(--lwa-control-padding-y) var(--lwa-control-padding-x);
    line-height: 1.2;
}

.lwa-input-sm {
    height: 34px;
    min-height: 34px;
    max-height: 34px;
    padding: 0.4rem 0.6rem;
    font-size: var(--lwa-font-size-sm);
}

.lwa-input-md {
    height: var(--lwa-control-height);
    min-height: var(--lwa-control-height);
    max-height: var(--lwa-control-height);
}

.lwa-input-lg {
    height: 50px;
    min-height: 50px;
    max-height: 50px;
    padding: 0.75rem 0.9rem;
    font-size: var(--lwa-font-size-base);
}

.lwa-select {
    appearance: none;
    padding-right: 2.25rem;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--lwa-text-muted) 50%),
        linear-gradient(135deg, var(--lwa-text-muted) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 50%,
        calc(100% - 12px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.lwa-textarea {
    min-height: 112px;
    padding: 0.65rem 0.75rem;
    line-height: 1.45;
    resize: vertical;
}

.lwa-input:focus,
.lwa-select:focus,
.lwa-textarea:focus {
    border-color: var(--lwa-primary);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(78, 159, 229, 0.16);
}

.lwa-input[disabled],
.lwa-select[disabled],
.lwa-textarea[disabled],
.lwa-input[readonly],
.lwa-select[readonly],
.lwa-textarea[readonly] {
    background: #f1f4f8;
    color: var(--lwa-text-muted);
    cursor: not-allowed;
}

.lwa-input::placeholder,
.lwa-textarea::placeholder {
    color: #8a98aa;
    opacity: 1;
}

.lwa-checkbox-row,
.lwa-radio-row {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.55rem;
    color: var(--lwa-text);
    font-size: var(--lwa-font-size-sm);
    line-height: 1.4;
}

.lwa-label input[type="checkbox"],
.lwa-label input[type="radio"],
.lwa-checkbox-row input[type="checkbox"],
.lwa-radio-row input[type="radio"] {
    box-sizing: border-box;
    width: 1rem;
    height: 1rem;
    margin: 0.1rem 0 0;
    padding: 0;
    flex: 0 0 1rem;
    accent-color: var(--lwa-primary);
}

.lwa-password-field {
    position: relative;
    display: flex;
    align-items: stretch;
}

.lwa-password-field .lwa-input { padding-right: 4.5rem; }

.lwa-password-toggle {
    position: absolute;
    top: 50%;
    right: 0.35rem;
    min-height: 32px;
    padding: 0.35rem 0.55rem;
    border: 1px solid transparent;
    border-radius: var(--lwa-radius-sm);
    background: transparent;
    color: var(--lwa-primary-dark);
    cursor: pointer;
    font-size: var(--lwa-font-size-sm);
    font-weight: 750;
    line-height: 1;
    transform: translateY(-50%);
}

.lwa-password-toggle:hover,
.lwa-password-toggle:focus {
    background: var(--lwa-primary-soft);
    outline: none;
}

.lwa-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    padding-top: 0.25rem;
}

.lwa-form-actions .lwa-btn-block { flex-basis: 100%; }

/* Responsive behavior is centralized here, not in module CSS. */
@media (max-width: 1100px) {
    .lwa-pattern-system-id > *,
    .lwa-pattern-person-name > *,
    .lwa-pattern-contact > *,
    .lwa-pattern-corporate-contact > *,
    .lwa-pattern-communication > *,
    .lwa-pattern-assignment > *,
    .lwa-pattern-eligibility > *,
    .lwa-pattern-dates > * { grid-column: span 6; }

    .lwa-pattern-corporate-contact > :nth-child(1) { grid-column: span 6; }
    .lwa-pattern-corporate-contact > :nth-child(2) { grid-column: span 3; }
    .lwa-pattern-corporate-contact > :nth-child(3) { grid-column: span 3; }

    .lwa-pattern-person-attributes > :nth-child(1),
    .lwa-pattern-address-lines > :nth-child(1),
    .lwa-pattern-address-lines > :nth-child(2),
    .lwa-pattern-assignment-detail > :nth-child(1),
    .lwa-pattern-assignment-detail > :nth-child(2),
    .lwa-pattern-code-value > :nth-child(2) { grid-column: span 6; }

    .lwa-pattern-person-attributes > :nth-child(2),
    .lwa-pattern-person-attributes > :nth-child(3),
    .lwa-pattern-address-locality > :nth-child(1),
    .lwa-pattern-address-locality > :nth-child(2),
    .lwa-pattern-address-locality > :nth-child(3),
    .lwa-pattern-address-locality > :nth-child(4),
    .lwa-pattern-assignment-detail > :nth-child(3),
    .lwa-pattern-money > *,
    .lwa-pattern-code-value > :nth-child(1) { grid-column: span 6; }

    .lwa-field-span-2,
    .lwa-field-span-3,
    .lwa-field-short,
    .lwa-field-medium { grid-column: span 4; }

    .lwa-field-span-4,
    .lwa-field-span-5,
    .lwa-field-standard { grid-column: span 6; }

    .lwa-field-span-6,
    .lwa-field-span-7,
    .lwa-field-span-8,
    .lwa-field-wide,
    .lwa-field-xwide { grid-column: span 6; }

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

@media (max-width: 720px) {
    .lwa-field-grid,
    .lwa-pattern-system-id,
    .lwa-pattern-person-name,
    .lwa-pattern-person-attributes,
    .lwa-pattern-contact,
    .lwa-pattern-corporate-contact,
    .lwa-pattern-communication,
    .lwa-pattern-address-lines,
    .lwa-pattern-address-locality,
    .lwa-pattern-assignment,
    .lwa-pattern-assignment-detail,
    .lwa-pattern-eligibility,
    .lwa-pattern-dates,
    .lwa-pattern-money,
    .lwa-pattern-code-value,
    .lwa-form-grid-2,
    .lwa-form-grid-3,
    .lwa-form-grid-4,
    .lwa-form-row {
        grid-template-columns: 1fr;
    }

    .lwa-field-grid > *,
    .lwa-pattern-system-id > *,
    .lwa-pattern-person-name > *,
    .lwa-pattern-person-attributes > *,
    .lwa-pattern-contact > *,
    .lwa-pattern-corporate-contact > *,
    .lwa-pattern-communication > *,
    .lwa-pattern-address-lines > *,
    .lwa-pattern-address-locality > *,
    .lwa-pattern-assignment > *,
    .lwa-pattern-assignment-detail > *,
    .lwa-pattern-eligibility > *,
    .lwa-pattern-dates > *,
    .lwa-pattern-money > *,
    .lwa-pattern-code-value > *,
    .lwa-field-span-2,
    .lwa-field-span-3,
    .lwa-field-span-4,
    .lwa-field-span-5,
    .lwa-field-span-6,
    .lwa-field-span-7,
    .lwa-field-span-8,
    .lwa-field-span-9,
    .lwa-field-span-10,
    .lwa-field-span-12,
    .lwa-field-short,
    .lwa-field-medium,
    .lwa-field-standard,
    .lwa-field-wide,
    .lwa-field-xwide,
    .lwa-field-full {
        grid-column: 1 / -1;
    }

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