/*
 * ============================================================================
 * St. Cloud State University - Form Components
 * ============================================================================
 * 
 * Standardized form control styling
 * 
 * PURPOSE:
 * Provides consistent, accessible form controls including:
 * - Text inputs, selects, textareas
 * - Checkboxes and radio buttons
 * - Form validation states
 * - Form layouts and grouping
 * 
 * MIGRATION PATH:
 * This file follows the same structure as scsu-buttons.css.
 * Copy to scsu-main-styles.css keeping the same class names.
 * All component classes are prefixed with .form-* for easy identification.
 * 
 * ACCESSIBILITY:
 * - Minimum 44x44px touch targets
 * - High contrast focus indicators
 * - Proper label association
 * - ARIA attributes supported
 * - Error state announcements
 * 
 * WCAG 2.1 AA Compliance:
 * - Color contrast ratio ≥ 4.5:1
 * - Visible focus indicators
 * - Form labels for all controls
 * - Error identification
 * 
 * ============================================================================
 */

/* ============================================
   FORM LABELS
   Consistent label styling with required indicators
   ============================================ */

.form-label-scsu,
label.scsu-label {
    display: inline-block;
    margin-bottom: var(--scsu-spacing-2, 0.5rem);
    font-weight: var(--scsu-font-weight-semibold, 600);
    font-size: var(--scsu-font-size-base, 1rem);
    color: var(--scsu-text-primary, #212529);
    line-height: var(--scsu-line-height-base, 1.5);
}

/* Required field indicator */
.form-label-scsu .required,
.form-label-scsu.required::after {
    color: var(--scsu-color-danger, #dc3545);
    font-weight: var(--scsu-font-weight-bold, 700);
    margin-left: 0.25rem;
}

.form-label-scsu.required::after {
    content: "*";
}

/* Help text / form text */
.form-text-scsu,
.form-help-text {
    display: block;
    margin-top: var(--scsu-spacing-1, 0.25rem);
    font-size: var(--scsu-font-size-sm, 0.875rem);
    color: var(--scsu-text-secondary, #6c757d);
    line-height: var(--scsu-line-height-base, 1.5);
}

/* ============================================
   TEXT INPUTS
   Standard text input fields
   ============================================ */

.form-control-scsu,
input.scsu-input[type="text"],
input.scsu-input[type="email"],
input.scsu-input[type="password"],
input.scsu-input[type="number"],
input.scsu-input[type="tel"],
input.scsu-input[type="url"],
input.scsu-input[type="search"],
input.scsu-input[type="date"],
input.scsu-input[type="time"],
input.scsu-input[type="datetime-local"],
textarea.scsu-textarea {
    display: block;
    width: 100%;
    padding: var(--scsu-input-padding-y, 0.5rem) var(--scsu-input-padding-x, 0.75rem);
    font-size: var(--scsu-font-size-base, 1rem);
    font-weight: var(--scsu-font-weight-normal, 400);
    line-height: var(--scsu-line-height-base, 1.5);
    color: var(--scsu-text-primary, #212529);
    background-color: var(--scsu-bg-body, #ffffff);
    background-clip: padding-box;
    border: var(--scsu-input-border-width, 1px) solid var(--scsu-input-border-color, #dee2e6);
    border-radius: var(--scsu-input-border-radius, 0.25rem);
    transition: border-color var(--scsu-transition-fast, 0.15s ease-in-out),
                box-shadow var(--scsu-transition-fast, 0.15s ease-in-out);
    
    /* Accessibility: minimum touch target */
    min-height: 44px;
}

/* Focus state */
.form-control-scsu:focus,
input.scsu-input:focus,
textarea.scsu-textarea:focus {
    border-color: var(--scsu-input-focus-border-color, #b31b34);
    outline: 3px solid var(--scsu-color-primary, #b31b34);
    outline-offset: 2px;
    box-shadow: var(--scsu-shadow-focus, 0 0 0 0.25rem rgba(179, 27, 52, 0.5));
}

/* Disabled state */
.form-control-scsu:disabled,
input.scsu-input:disabled,
textarea.scsu-textarea:disabled {
    background-color: var(--scsu-gray-200, #e9ecef);
    color: var(--scsu-text-secondary, #6c757d);
    cursor: not-allowed;
    opacity: 0.65;
}

/* Read-only state */
.form-control-scsu[readonly],
input.scsu-input[readonly],
textarea.scsu-textarea[readonly] {
    background-color: var(--scsu-gray-100, #f8f9fa);
    border-color: var(--scsu-border-color-light, #e9ecef);
}

/* Placeholder styling */
.form-control-scsu::placeholder,
input.scsu-input::placeholder,
textarea.scsu-textarea::placeholder {
    color: var(--scsu-text-muted, #adb5bd);
    opacity: 1;
}

/* ============================================
   INPUT SIZE VARIANTS
   ============================================ */

.form-control-scsu.input-sm,
input.scsu-input-sm {
    min-height: 38px;
    padding: 0.375rem 0.75rem;
    font-size: var(--scsu-font-size-sm, 0.875rem);
}

.form-control-scsu.input-lg,
input.scsu-input-lg {
    min-height: 48px;
    padding: 0.75rem 1rem;
    font-size: var(--scsu-font-size-lg, 1.125rem);
}

/* ============================================
   TEXTAREA
   ============================================ */

textarea.form-control-scsu,
textarea.scsu-textarea {
    min-height: 120px;
    resize: vertical;
}

/* ============================================
   SELECT DROPDOWNS
   ============================================ */

.form-select-scsu,
select.scsu-select {
    display: block;
    width: 100%;
    padding: var(--scsu-input-padding-y, 0.5rem) 2.5rem var(--scsu-input-padding-y, 0.5rem) var(--scsu-input-padding-x, 0.75rem);
    font-size: var(--scsu-font-size-base, 1rem);
    font-weight: var(--scsu-font-weight-normal, 400);
    line-height: var(--scsu-line-height-base, 1.5);
    color: var(--scsu-text-primary, #212529);
    background-color: var(--scsu-bg-body, #ffffff);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    border: var(--scsu-input-border-width, 1px) solid var(--scsu-input-border-color, #dee2e6);
    border-radius: var(--scsu-input-border-radius, 0.25rem);
    transition: border-color var(--scsu-transition-fast, 0.15s ease-in-out);
    appearance: none;
    
    /* Accessibility: minimum touch target */
    min-height: 44px;
}

.form-select-scsu:focus,
select.scsu-select:focus {
    border-color: var(--scsu-input-focus-border-color, #b31b34);
    outline: 3px solid var(--scsu-color-primary, #b31b34);
    outline-offset: 2px;
}

.form-select-scsu:disabled,
select.scsu-select:disabled {
    background-color: var(--scsu-gray-200, #e9ecef);
    color: var(--scsu-text-secondary, #6c757d);
    cursor: not-allowed;
    opacity: 0.65;
}

/* ============================================
   CHECKBOXES AND RADIO BUTTONS
   Custom styled for better accessibility
   ============================================ */

.form-check-scsu {
    display: block;
    min-height: var(--scsu-spacing-5, 1.5rem);
    padding-left: 2rem;
    margin-bottom: var(--scsu-spacing-3, 0.75rem);
}

.form-check-scsu input[type="checkbox"],
.form-check-scsu input[type="radio"],
input.scsu-checkbox,
input.scsu-radio {
    position: absolute;
    margin-top: 0.3rem;
    margin-left: -2rem;
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
    
    /* Accessibility: minimum touch target */
    min-width: 44px;
    min-height: 44px;
}

.form-check-scsu label,
label.scsu-check-label {
    display: inline-block;
    cursor: pointer;
    user-select: none;
}

/* Custom checkbox styling */
.form-check-input-scsu[type="checkbox"] {
    border-radius: var(--scsu-border-radius-sm, 0.125rem);
}

/* Custom radio styling */
.form-check-input-scsu[type="radio"] {
    border-radius: 50%;
}

/* Focus state for checkboxes/radios */
.form-check-input-scsu:focus,
input.scsu-checkbox:focus,
input.scsu-radio:focus {
    outline: 3px solid var(--scsu-color-primary, #b31b34);
    outline-offset: 2px;
}

/* Checked state */
.form-check-input-scsu:checked,
input.scsu-checkbox:checked,
input.scsu-radio:checked {
    background-color: var(--scsu-color-primary, #b31b34);
    border-color: var(--scsu-color-primary, #b31b34);
}

/* Disabled state */
.form-check-input-scsu:disabled,
input.scsu-checkbox:disabled,
input.scsu-radio:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================
   FORM VALIDATION STATES
   Success, warning, and error states
   ============================================ */

/* Valid/Success state */
.form-control-scsu.is-valid,
.form-control-scsu:valid,
input.scsu-input.is-valid,
select.scsu-select.is-valid,
textarea.scsu-textarea.is-valid {
    border-color: var(--scsu-color-success, #198754);
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23198754' d='M13.485 1.431a1.473 1.473 0 0 1 2.104 2.062l-7.84 9.801a1.473 1.473 0 0 1-2.12.04L.431 8.138a1.473 1.473 0 0 1 2.084-2.083l4.111 4.112 6.82-8.69a.486.486 0 0 1 .04-.045z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-control-scsu.is-valid:focus,
input.scsu-input.is-valid:focus {
    border-color: var(--scsu-color-success, #198754);
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}

.valid-feedback,
.form-feedback-success {
    display: block;
    margin-top: var(--scsu-spacing-1, 0.25rem);
    font-size: var(--scsu-font-size-sm, 0.875rem);
    color: var(--scsu-color-success, #198754);
}

/* Invalid/Error state */
.form-control-scsu.is-invalid,
.form-control-scsu:invalid,
input.scsu-input.is-invalid,
select.scsu-select.is-invalid,
textarea.scsu-textarea.is-invalid,
.form-control-scsu[aria-invalid="true"] {
    border-color: var(--scsu-color-danger, #dc3545);
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23dc3545' d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-control-scsu.is-invalid:focus,
input.scsu-input.is-invalid:focus {
    border-color: var(--scsu-color-danger, #dc3545);
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

.invalid-feedback,
.form-feedback-error,
.form-error {
    display: block;
    margin-top: var(--scsu-spacing-1, 0.25rem);
    font-size: var(--scsu-font-size-sm, 0.875rem);
    color: var(--scsu-color-danger, #dc3545);
    font-weight: var(--scsu-font-weight-medium, 500);
}

/* Warning state */
.form-control-scsu.is-warning,
input.scsu-input.is-warning {
    border-color: var(--scsu-color-warning, #ffc107);
}

.form-feedback-warning {
    display: block;
    margin-top: var(--scsu-spacing-1, 0.25rem);
    font-size: var(--scsu-font-size-sm, 0.875rem);
    color: var(--scsu-color-warning, #ffc107);
}

/* ============================================
   FORM GROUPS AND LAYOUT
   ============================================ */

.form-group-scsu {
    margin-bottom: var(--scsu-spacing-4, 1rem);
}

.form-row-scsu {
    display: flex;
    flex-wrap: wrap;
    gap: var(--scsu-spacing-4, 1rem);
    margin-bottom: var(--scsu-spacing-4, 1rem);
}

.form-col-scsu {
    flex: 1;
    min-width: 200px;
}

/* Inline form layout */
.form-inline-scsu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--scsu-spacing-3, 0.75rem);
}

.form-inline-scsu .form-control-scsu,
.form-inline-scsu .form-select-scsu {
    width: auto;
}

/* ============================================
   INPUT GROUPS
   Combine inputs with buttons or text
   ============================================ */

.input-group-scsu {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}

.input-group-scsu .form-control-scsu,
.input-group-scsu .form-select-scsu {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

.input-group-text-scsu {
    display: flex;
    align-items: center;
    padding: var(--scsu-input-padding-y, 0.5rem) var(--scsu-input-padding-x, 0.75rem);
    font-size: var(--scsu-font-size-base, 1rem);
    font-weight: var(--scsu-font-weight-normal, 400);
    line-height: var(--scsu-line-height-base, 1.5);
    color: var(--scsu-text-primary, #212529);
    text-align: center;
    white-space: nowrap;
    background-color: var(--scsu-gray-200, #e9ecef);
    border: var(--scsu-input-border-width, 1px) solid var(--scsu-input-border-color, #dee2e6);
    border-radius: var(--scsu-input-border-radius, 0.25rem);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 768px) {
    .form-row-scsu {
        flex-direction: column;
    }
    
    .form-inline-scsu {
        flex-direction: column;
        align-items: stretch;
    }
    
    .form-inline-scsu .form-control-scsu,
    .form-inline-scsu .form-select-scsu {
        width: 100%;
    }
}

/* End of SCSU Form Components */