/***********************************************************************
 * File: forms.css
 * Module: Design System
 * Purpose:
 * Defines the standard appearance and behaviour of all forms
 * used throughout the AI Governance application.
 *
 * Dependencies:
 * - style.css
 * - layout.css
 *
 * Technical Notes:
 * Provides consistent styling for form elements while
 * maintaining accessibility and readability.
 *
 * Future Enhancements:
 * - Validation icons
 * - Inline help styling
 * - Multi-step wizard layouts
 * - Compact form variant
 *
 * Build:
 * AI Governance Build 2 MVP/V1
 *
 * Version:
 * 2.0.0
 ***********************************************************************/


/* ===========================================================
   FORM CONTAINER
   =========================================================== */

.ag-form {

    width: 100%;

}

.ag-form-section {

    margin-bottom: var(--ag-space-xl);

}


/* ===========================================================
   FORM GROUP
   =========================================================== */

.ag-form-group {

    margin-bottom: var(--ag-space-lg);

}


/* ===========================================================
   LABELS
   =========================================================== */

.ag-label {

    display: block;

    margin-bottom: var(--ag-space-sm);

    font-weight: 600;

    color: var(--ag-text);

}


/* ===========================================================
   INPUTS
   =========================================================== */

.ag-input,
.ag-select,
.ag-textarea {

    width: 100%;

    padding: 0.75rem 1rem;

    font-family: inherit;

    font-size: 1rem;

    color: var(--ag-text);

    background: var(--ag-surface);

    border: 1px solid var(--ag-border);

    border-radius: var(--ag-radius);

    transition: border-color 0.2s ease;

}


/* ===========================================================
   FOCUS
   =========================================================== */

.ag-input:focus,
.ag-select:focus,
.ag-textarea:focus {

    outline: none;

    border-color: var(--ag-primary);

}


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

.ag-textarea {

    resize: vertical;

    min-height: 140px;

}


/* ===========================================================
   CHECKBOXES
   =========================================================== */

.ag-checkbox {

    margin-right: var(--ag-space-sm);

}


/* ===========================================================
   RADIO BUTTONS
   =========================================================== */

.ag-radio {

    margin-right: var(--ag-space-sm);

}


/* ===========================================================
   HELP TEXT
   =========================================================== */

.ag-help {

    margin-top: var(--ag-space-xs);

    font-size: 0.9rem;

    color: var(--ag-text-light);

}


/* ===========================================================
   REQUIRED FIELD
   =========================================================== */

.ag-required {

    color: var(--ag-danger);

}




/* ===========================================================
   FORM ACTIONS
   =========================================================== */

.ag-form-actions {

    margin-top: var(--ag-space-xl);

    display: flex;

    gap: var(--ag-space-md);

}


/* ===========================================================
   VALIDATION
   =========================================================== */

.ag-error {

    color: var(--ag-danger);

    font-size: 0.9rem;

    margin-top: var(--ag-space-xs);

}

.ag-success {

    color: var(--ag-success);

    font-size: 0.9rem;

    margin-top: var(--ag-space-xs);

}