/* VM Design System - Forms (Package Copy) */
.form-group { margin-bottom: var(--space-lg); }
.form-label { display: block; font-weight: 600; font-size: 0.875rem; color: var(--vm-gray-900); margin-bottom: var(--space-xs); }
.form-label.required::after { content: ' *'; color: var(--error); }
.form-hint { font-size: 0.75rem; color: var(--vm-gray-500); margin-top: var(--space-xs); }
.form-help { font-size: 0.75rem; color: var(--vm-gray-500); margin-top: var(--space-xs); }
.form-error { font-size: 0.75rem; color: var(--error); font-weight: 500; margin-top: var(--space-xs); display: flex; align-items: center; gap: var(--space-xs); }
.form-error::before { content: '⚠'; color: var(--error); }
.form-input,
.form-select,
.form-textarea,
.form-control { width: 100%; max-width: 600px; padding: var(--space-sm) var(--space-md); font-size: 0.875rem; color: var(--vm-form-field-text); background-color: var(--vm-form-field-bg); border: 1px solid var(--vm-form-field-border); border-radius: var(--radius-md); transition: all var(--transition-base); min-height: 44px; appearance: none; -webkit-appearance: none; -moz-appearance: none; }
.form-textarea,
textarea.form-input,
textarea.form-control { min-height: var(--vm-component-textarea-min-height, 100px); resize: vertical; }
.form-input:focus,
.form-select:focus,
.form-control:focus { outline: none; border-color: var(--vm-red); box-shadow: 0 0 0 3px var(--vm-form-field-focus-ring); }
.form-input::placeholder,
.form-control::placeholder { color: var(--vm-form-field-placeholder); }
select.form-select option { color: var(--vm-form-field-text); background: var(--vm-form-field-bg); }
.form-input:disabled,
.form-select:disabled,
.form-control:disabled { background-color: var(--vm-gray-100); color: var(--vm-gray-500); cursor: not-allowed; }
.form-input:invalid,
.form-control:invalid { border-color: var(--error); box-shadow: none; }
.form-input:valid,
.form-control:valid { border-color: var(--vm-form-field-border); }
.form-checkbox { display: flex; align-items: center; gap: var(--space-sm); cursor: pointer; }
.form-checkbox input[type="checkbox"] { width: auto; min-height: auto; margin: 0; }

/* Form utility classes for Phase 3 migration */
.form-description-text {
    font-size: 0.875rem;
    color: var(--vm-gray-600);
    margin-bottom: var(--space-md);
}

.permission-grid {
    background: var(--vm-gray-50);
    border: 1px solid var(--vm-gray-200);
    border-radius: 8px;
    padding: var(--space-lg);
}

.permission-checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-md);
}

.permission-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    background: var(--vm-white);
    border: 1px solid var(--vm-gray-200);
    border-radius: 4px;
}

.permission-label {
    margin: 0;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--vm-gray-700);
}

.empty-state {
    text-align: center;
    color: var(--vm-gray-500);
    font-style: italic;
}

.hidden-field {
    display: none;
}

.form-section-title {
    font-size: 1rem;
    margin-bottom: var(--space-md);
}

.form-section-description {
    margin-bottom: var(--space-lg);
}

.logo-sm {
    width: 120px;
    height: auto;
}