@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 *;

// 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
            .main-form, .collapsible-section {
                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
                    //$input-field-border-radius: 6px;

                    // Label styling
                    label {
                        display: block;
                        color: $add-user-form-title-color;
                        font-size: 16px;
                        margin-bottom: 5px;
                    }

                    // Input and select styling
                    input[type="text"],
                    input[type="password"],
                    input[type="email"],
                    input[type="date"],
                    input[type="number"],
                    input[type="datetime-local"], 
                    input[type="tel"],
                    select {
                        width: 100%; // Full width of the form group
                        padding: 12px;
                        border: 1px solid $add-user-input-border-color; 
                        border-radius: $input-field-border-radius;
                        background-color: $add-user-input-background; 
                        font-size: 16px;
                        transition: border-color 0.3s, background-color 0.3s;

                        &:focus {
                            border-color: $add-user-input-focus-border-color; 
                            outline: none;
                        }
                    }

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