@use "common";  // Reset styles
@use "colors" as *; // Color scheme 
@use "vars" as *;
@use "entry-form-fields/submit-buttons" as *;
@use "entry-form-fields/range-slider" as *;
@use "entry-form-fields/radio-buttons" as *;
@use "entry-form-fields/checkboxes" as *;
@use "entry-form-fields/drop-down-menu" as *;
@use "entry-form-fields/collapsible-section" as *;
@use "entry-form-fields/input_fields" as *;
@use "entry-form-fields/labels" as *;

// Basic styling for the body
body {
    font-family: 'Arial', sans-serif;
    background: $add-user-background-color; 
    display: flex;
    justify-content: center; // Center the form horizontally
    align-items: center; // Center the form vertically
    height: 100%;
    padding: 20px; // Some padding for mobile responsiveness

    // Container for the form
    .form-container {
        background-color: $add-user-form-background; 
        padding: 40px;
        border-radius: 12px; // Rounded corners 
        box-shadow: 0 8px 15px $add-user-form-shadow-color;
        width: 100%;
        max-width: 800px; 
        text-align: left; 
        margin: auto;

        // Form header
        h2 {
            color: $add-user-form-title-color; // Form title color
            font-size: 28px;
            margin-bottom: 20px;
            text-align: left; 
            display: block;
        }

        // Form element
        form {
            margin-bottom: 20px; // Add space below the form for submit button
            fieldset {
                display: flex;
                flex-wrap: wrap; // Allow wrapping for form groups
                gap: 20px; // Add consistent gap between elements
                .form-group {
                    flex: 1 1 calc(50% - 20px); // Take up half the row, accounting for gap
                    min-width: 250px; // Minimum width to prevent shrinking too much

                    @include labels;    // Label styling for all inputs
                    @include input_fields;  // Common styles for all inputs

                    // Form groups for special input types
                    @include checkboxes;
                    @include drop-down-menu;
                    @include radio-buttons;
                    @include range-slider;
                }
            }
            @include collapsible;
            @include submit-buttons;
        }
    }
}