@use "common";  // Reset styles
@use "colors" as *; // Color scheme for Add New User page

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

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

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

    // Form element
    form {
      display: flex;
      flex-wrap: wrap; // Allow wrapping for form groups
      gap: 20px; // Add consistent gap between elements
      margin-bottom: 20px; // Add space below the form for submit button

      // Form groups for each input
      .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
        margin-bottom: 20px; // Spacing between fields

        // 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"],
        select {
          width: 100%; // Full width of the form group
          padding: 12px;
          border: 1px solid $add-user-input-border-color; // Input field border color
          border-radius: 6px;
          background-color: $add-user-input-background; // Input background color
          font-size: 16px;
          transition: border-color 0.3s, background-color 0.3s;

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

      // Admin Access Checkboxes
      .admin-access {
        flex: 1 1 100%; // Full width for admin access checkboxes
        margin-bottom: 20px; // Space below the checkboxes

        label {
          display: block; // Ensure label occupies full line
          color: $add-user-form-title-color;
          font-size: 16px;
          margin-bottom: 10px; // Space below the main label
        }

        // Container for checkboxes
        .checkbox-group {
          display: flex; // Use flex for checkboxes
          justify-content: flex-start; // Align items to the start
          gap: 10px; // Space between each checkbox label
        }
      }

      // Dropdown Menu for Admin Role
      .role-dropdown {
        flex: 1 1 calc(50% - 20px); // Explicitly set to half width, considering gap
        min-width: 250px; // Minimum width to avoid shrinking too much
        padding: 0; // Reset any padding
      }

      // Submit button styling
      .submit-button {
        flex: 1 1 100%; // Full width for the submit button
        display: flex; // Use flex to center the button
        justify-content: center; // Center the button
        margin-top: 20px; // Space above the button

        button {
            width: 30%;
            text-align: center;
          padding: 12px; // Padding for button
          background-color: $add-user-button-color; // Primary button color
          color: $add-user-button-text-color;
          border: none;
          border-radius: 6px;
          font-size: 18px;
          font-weight: bold;
          cursor: pointer;
          transition: background-color 0.3s, transform 0.3s;
          box-shadow: 0 4px 10px $add-user-button-shadow;

          &:hover {
            background-color: $add-user-button-hover-color; // Button hover color
          }

          &:active {
            transform: translateY(2px); // Subtle press effect
          }
        }
      }
    }
  }
}