From efe9796c3945099845cf7dc2bf972d1dad26289f Mon Sep 17 00:00:00 2001
From: candifloss <candifloss@candifloss.cc>
Date: Tue, 29 Oct 2024 16:44:12 +0530
Subject: [PATCH] restructured form sections

---
 test/css/entry-form.css                       | 128 +++++++----
 test/html/adduser.html                        | 217 ++++++++++--------
 test/scss/_colors.scss                        |   6 +
 .../_collapsible-section.scss                 |  34 +++
 .../entry-form-fields/_submit-buttons.scss    |   2 +-
 test/scss/entry-form.scss                     |  90 ++++----
 6 files changed, 293 insertions(+), 184 deletions(-)
 create mode 100644 test/scss/entry-form-fields/_collapsible-section.scss

diff --git a/test/css/entry-form.css b/test/css/entry-form.css
index 1073be0..e68d32f 100644
--- a/test/css/entry-form.css
+++ b/test/css/entry-form.css
@@ -36,30 +36,40 @@ body .form-container h2 {
   display: block;
 }
 body .form-container form {
+  margin-bottom: 20px;
+}
+body .form-container form .main-form, body .form-container form .collapsible-section {
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
-  margin-bottom: 20px;
+  padding-bottom: 3px;
 }
-body .form-container form .form-group {
+body .form-container form .main-form .form-group, body .form-container form .collapsible-section .form-group {
   flex: 1 1 calc(50% - 20px);
   min-width: 250px;
   --value: 50;
 }
-body .form-container form .form-group label {
+body .form-container form .main-form .form-group label, body .form-container form .collapsible-section .form-group label {
   display: block;
   color: #4e4e4e;
   font-size: 16px;
   margin-bottom: 5px;
 }
-body .form-container form .form-group input[type=text],
-body .form-container form .form-group input[type=password],
-body .form-container form .form-group input[type=email],
-body .form-container form .form-group input[type=date],
-body .form-container form .form-group input[type=number],
-body .form-container form .form-group input[type=datetime-local],
-body .form-container form .form-group input[type=tel],
-body .form-container form .form-group select {
+body .form-container form .main-form .form-group input[type=text],
+body .form-container form .main-form .form-group input[type=password],
+body .form-container form .main-form .form-group input[type=email],
+body .form-container form .main-form .form-group input[type=date],
+body .form-container form .main-form .form-group input[type=number],
+body .form-container form .main-form .form-group input[type=datetime-local],
+body .form-container form .main-form .form-group input[type=tel],
+body .form-container form .main-form .form-group select, body .form-container form .collapsible-section .form-group input[type=text],
+body .form-container form .collapsible-section .form-group input[type=password],
+body .form-container form .collapsible-section .form-group input[type=email],
+body .form-container form .collapsible-section .form-group input[type=date],
+body .form-container form .collapsible-section .form-group input[type=number],
+body .form-container form .collapsible-section .form-group input[type=datetime-local],
+body .form-container form .collapsible-section .form-group input[type=tel],
+body .form-container form .collapsible-section .form-group select {
   width: 100%;
   padding: 12px;
   border: 1px solid rgba(220, 220, 220, 0.8);
@@ -68,31 +78,38 @@ body .form-container form .form-group select {
   font-size: 16px;
   transition: border-color 0.3s, background-color 0.3s;
 }
-body .form-container form .form-group input[type=text]:focus,
-body .form-container form .form-group input[type=password]:focus,
-body .form-container form .form-group input[type=email]:focus,
-body .form-container form .form-group input[type=date]:focus,
-body .form-container form .form-group input[type=number]:focus,
-body .form-container form .form-group input[type=datetime-local]:focus,
-body .form-container form .form-group input[type=tel]:focus,
-body .form-container form .form-group select:focus {
+body .form-container form .main-form .form-group input[type=text]:focus,
+body .form-container form .main-form .form-group input[type=password]:focus,
+body .form-container form .main-form .form-group input[type=email]:focus,
+body .form-container form .main-form .form-group input[type=date]:focus,
+body .form-container form .main-form .form-group input[type=number]:focus,
+body .form-container form .main-form .form-group input[type=datetime-local]:focus,
+body .form-container form .main-form .form-group input[type=tel]:focus,
+body .form-container form .main-form .form-group select:focus, body .form-container form .collapsible-section .form-group input[type=text]:focus,
+body .form-container form .collapsible-section .form-group input[type=password]:focus,
+body .form-container form .collapsible-section .form-group input[type=email]:focus,
+body .form-container form .collapsible-section .form-group input[type=date]:focus,
+body .form-container form .collapsible-section .form-group input[type=number]:focus,
+body .form-container form .collapsible-section .form-group input[type=datetime-local]:focus,
+body .form-container form .collapsible-section .form-group input[type=tel]:focus,
+body .form-container form .collapsible-section .form-group select:focus {
   border-color: #007b8a;
   outline: none;
 }
-body .form-container form .form-group.checkbox-set label {
+body .form-container form .main-form .form-group.checkbox-set label, body .form-container form .collapsible-section .form-group.checkbox-set label {
   display: block;
   color: #4e4e4e;
   font-size: 16px;
   margin-bottom: 5px;
 }
-body .form-container form .form-group.checkbox-set .checkboxes {
+body .form-container form .main-form .form-group.checkbox-set .checkboxes, body .form-container form .collapsible-section .form-group.checkbox-set .checkboxes {
   display: flex;
   gap: 10px;
 }
-body .form-container form .form-group.checkbox-set .checkboxes input[type=checkbox] {
+body .form-container form .main-form .form-group.checkbox-set .checkboxes input[type=checkbox], body .form-container form .collapsible-section .form-group.checkbox-set .checkboxes input[type=checkbox] {
   display: none;
 }
-body .form-container form .form-group.checkbox-set .checkboxes label.checkbox {
+body .form-container form .main-form .form-group.checkbox-set .checkboxes label.checkbox, body .form-container form .collapsible-section .form-group.checkbox-set .checkboxes label.checkbox {
   cursor: pointer;
   padding: 12px;
   border: 1px solid rgba(220, 220, 220, 0.8);
@@ -104,27 +121,27 @@ body .form-container form .form-group.checkbox-set .checkboxes label.checkbox {
   transition: background-color 0.3s, color 0.3s, border-color 0.3s;
   user-select: none;
 }
-body .form-container form .form-group.checkbox-set .checkboxes label.checkbox:hover, body .form-container form .form-group.checkbox-set .checkboxes label.checkbox:focus {
+body .form-container form .main-form .form-group.checkbox-set .checkboxes label.checkbox:hover, body .form-container form .main-form .form-group.checkbox-set .checkboxes label.checkbox:focus, body .form-container form .collapsible-section .form-group.checkbox-set .checkboxes label.checkbox:hover, body .form-container form .collapsible-section .form-group.checkbox-set .checkboxes label.checkbox:focus {
   background-color: rgba(232, 232, 232, 0.9);
   border-color: #007b8a;
 }
-body .form-container form .form-group.checkbox-set .checkboxes input[type=checkbox]:checked + label.checkbox {
+body .form-container form .main-form .form-group.checkbox-set .checkboxes input[type=checkbox]:checked + label.checkbox, body .form-container form .collapsible-section .form-group.checkbox-set .checkboxes input[type=checkbox]:checked + label.checkbox {
   background-color: #009299;
   color: #ffffff;
   border-color: rgba(0, 170, 179, 0.8);
 }
-body .form-container form .form-group.dropdown-menu {
+body .form-container form .main-form .form-group.dropdown-menu, body .form-container form .collapsible-section .form-group.dropdown-menu {
   flex: 1 1 calc(50% - 20px);
   min-width: 250px;
 }
-body .form-container form .form-group.radio-input .radio-group {
+body .form-container form .main-form .form-group.radio-input .radio-group, body .form-container form .collapsible-section .form-group.radio-input .radio-group {
   display: flex;
   gap: 10px;
 }
-body .form-container form .form-group.radio-input .radio-group input[type=radio] {
+body .form-container form .main-form .form-group.radio-input .radio-group input[type=radio], body .form-container form .collapsible-section .form-group.radio-input .radio-group input[type=radio] {
   display: none;
 }
-body .form-container form .form-group.radio-input .radio-group label.radio {
+body .form-container form .main-form .form-group.radio-input .radio-group label.radio, body .form-container form .collapsible-section .form-group.radio-input .radio-group label.radio {
   width: 100%;
   height: 100%;
   border-radius: 6px;
@@ -139,16 +156,16 @@ body .form-container form .form-group.radio-input .radio-group label.radio {
   transition: background-color 0.3s, color 0.3s, border-color 0.3s;
   user-select: none;
 }
-body .form-container form .form-group.radio-input .radio-group label.radio:hover, body .form-container form .form-group.radio-input .radio-group label.radio:focus {
+body .form-container form .main-form .form-group.radio-input .radio-group label.radio:hover, body .form-container form .main-form .form-group.radio-input .radio-group label.radio:focus, body .form-container form .collapsible-section .form-group.radio-input .radio-group label.radio:hover, body .form-container form .collapsible-section .form-group.radio-input .radio-group label.radio:focus {
   background-color: rgba(232, 232, 232, 0.9);
   border-color: #007b8a;
 }
-body .form-container form .form-group.radio-input .radio-group input[type=radio]:checked + label.radio {
+body .form-container form .main-form .form-group.radio-input .radio-group input[type=radio]:checked + label.radio, body .form-container form .collapsible-section .form-group.radio-input .radio-group input[type=radio]:checked + label.radio {
   background-color: #009299;
   color: #ffffff;
   border-color: rgba(0, 170, 179, 0.8);
 }
-body .form-container form .form-group input[type=range] {
+body .form-container form .main-form .form-group input[type=range], body .form-container form .collapsible-section .form-group input[type=range] {
   -webkit-appearance: none;
   appearance: none;
   width: 100%;
@@ -160,17 +177,17 @@ body .form-container form .form-group input[type=range] {
   padding: 0;
   box-sizing: border-box;
 }
-body .form-container form .form-group input[type=range]::-webkit-slider-runnable-track {
+body .form-container form .main-form .form-group input[type=range]::-webkit-slider-runnable-track, body .form-container form .collapsible-section .form-group input[type=range]::-webkit-slider-runnable-track {
   width: 100%;
   height: 100%;
   border-radius: 6px;
 }
-body .form-container form .form-group input[type=range]::-moz-range-track {
+body .form-container form .main-form .form-group input[type=range]::-moz-range-track, body .form-container form .collapsible-section .form-group input[type=range]::-moz-range-track {
   width: 100%;
   height: 100%;
   border-radius: 6px;
 }
-body .form-container form .form-group input[type=range]::-webkit-slider-thumb {
+body .form-container form .main-form .form-group input[type=range]::-webkit-slider-thumb, body .form-container form .collapsible-section .form-group input[type=range]::-webkit-slider-thumb {
   -webkit-appearance: none;
   display: none;
   appearance: none;
@@ -183,7 +200,7 @@ body .form-container form .form-group input[type=range]::-webkit-slider-thumb {
   margin: 0;
   padding: 0;
 }
-body .form-container form .form-group input[type=range]::-moz-range-thumb {
+body .form-container form .main-form .form-group input[type=range]::-moz-range-thumb, body .form-container form .collapsible-section .form-group input[type=range]::-moz-range-thumb {
   display: none;
   appearance: none;
   width: 0;
@@ -195,37 +212,60 @@ body .form-container form .form-group input[type=range]::-moz-range-thumb {
   margin: 0;
   padding: 0;
 }
-body .form-container form .form-group input[type=range]:focus {
+body .form-container form .main-form .form-group input[type=range]:focus, body .form-container form .collapsible-section .form-group input[type=range]:focus {
   outline: none;
   border-color: #007b8a;
 }
-body .form-container form .form-group.submit-buttons {
+body .form-container form .main-form[open], body .form-container form .collapsible-section[open] {
+  background-color: #dadada;
+  border-radius: 6px;
+}
+body .form-container form .main-form[open] summary, body .form-container form .collapsible-section[open] summary {
+  color: #979797;
+}
+body .form-container form .main-form summary, body .form-container form .collapsible-section summary {
+  display: block;
+  width: 100%;
+  color: #b1b1b1;
+  font-weight: bold;
+  font-size: 18px;
+  cursor: pointer;
+  margin-bottom: 10px;
+  border-bottom: 2px solid rgba(220, 220, 220, 0.8);
+  padding: 10px 2px;
+  border-radius: 6px 6px 0 0;
+}
+body .form-container form .main-form summary:hover, body .form-container form .collapsible-section summary:hover {
+  color: #636363;
+  background-color: #d4d4d4;
+}
+body .form-container form .submit-buttons {
   flex: 1 1 100%;
   display: flex;
   justify-content: space-between;
   margin-top: 20px;
 }
-body .form-container form .form-group.submit-buttons button {
+body .form-container form .submit-buttons button {
   width: 48%;
   text-align: center;
   padding: 12px;
   border-radius: 6px;
 }
-body .form-container form .form-group.submit-buttons button.clear-button {
+body .form-container form .submit-buttons button.clear-button {
   background-color: #c4c4c4;
   color: #ffffff;
 }
-body .form-container form .form-group.submit-buttons button.clear-button:hover {
+body .form-container form .submit-buttons button.clear-button:hover {
   background-color: #8f9091;
 }
-body .form-container form .form-group.submit-buttons button.submit {
+body .form-container form .submit-buttons button.submit {
   background-color: #007b8a;
   color: #ffffff;
   border: none;
 }
-body .form-container form .form-group.submit-buttons button.submit:hover {
+body .form-container form .submit-buttons button.submit:hover {
   background-color: #006b7a;
 }
-body .form-container form .form-group.submit-buttons button:active {
+body .form-container form .submit-buttons button:active {
   transform: translateY(2px);
 }
diff --git a/test/html/adduser.html b/test/html/adduser.html
index 997b2d7..f149c29 100644
--- a/test/html/adduser.html
+++ b/test/html/adduser.html
@@ -11,105 +11,130 @@
 		<div class="form-container">
 			<h2>Add New User</h2>
 			<form action="/add_user" method="post">
-				<div class="form-group">
-					<label for="full-name">Full Name</label>
-					<input type="text" id="full-name" name="full_name" placeholder="Full Name" required>
-				</div>
-
-				<div class="form-group">
-					<label for="username">Username</label>
-					<input type="text" id="username" name="username" placeholder="Username" required>
-				</div>
-
-				<div class="form-group">
-					<label for="password">Password</label>
-					<input type="password" id="password" name="password" placeholder="Password" required>
-				</div>
-
-				<div class="form-group">
-					<label for="passwordconfirm">Confirm password</label>
-					<input type="password" id="passwordconfirm" name="passwordconfirm" placeholder="Re-enter password" required>
-				</div>
-
-				<div class="form-group">
-					<label for="designation">Designation</label>
-					<input type="text" id="designation" name="designation" placeholder="Designation" required>
-				</div>
-
-				<div class="form-group">
-					<label for="department">Department</label>
-					<input type="text" id="department" name="department" placeholder="Department">
-				</div>
-
-				<div class="form-group">
-					<label for="email">Email</label>
-					<input type="email" id="email" name="email" placeholder="Email Address" required>
-				</div>
-
-				<div class="form-group">
-					<label for="mail-quota">Mail Quota (MB)</label>
-					<input type="number" id="mail-quota" name="mail_quota" placeholder="Enter mail quota in MB" value="0" min="0" step="1" required>
-				</div>
-
-				<div class="form-group">
-					<label for="date-joining">Date of Joining</label>
-					<input type="date" id="date-joining" name="date_of_joining" value="2018-07-22" required>
-				</div>
-
-				<div class="form-group">
-					<label for="date-birth">Date of Birth</label>
-					<input type="date" id="date-birth" name="date_of_birth" value="2018-07-22" required>
-				</div>
-
-				<div class="form-group">
-					<label for="mobile_number">Mobile Number</label>
-					<input type="tel" id="mobile_number" name="mobile_number" placeholder="Enter mobile number">
-				</div>
-
-				<div class="form-group">
-					<label for="experience_level">Experience Level</label>
-					<input type="range" class="range-slider" id="experience_level" name="experience_level" value="10" min="0" max="100" step="1">
-				</div>
-
-				<div class="form-group dropdown-menu">
-					<label for="role">User Role</label>
-					<select id="role" name="role" required>
-						<option value="" class="placeholder-option">--Select Role--</option>
-						<option value="admin">Admin</option>
-						<option value="user">User</option>
-						<option value="moderator">Moderator</option>
-					</select>
-				</div>
-
-				<div class="form-group checkbox-set">
-					<label>Admin Access</label>
-					<div class="checkboxes">
-						<input type="checkbox" id="add-access" name="add_access">
-						<label class="checkbox" for="add-access">Add</label>
-
-						<input type="checkbox" id="edit-access" name="edit_access">
-						<label class="checkbox" for="edit-access">Edit</label>
-
-						<input type="checkbox" id="approve-access" name="approve_access">
-						<label class="checkbox" for="approve-access">Approve</label>
+				<fieldset name="main" class="main-form">
+					<div class="form-group">
+						<label for="full-name">Full Name</label>
+						<input type="text" id="full-name" name="full_name" placeholder="Full Name" required>
 					</div>
-				</div>
 
-				<div class="form-group">
-					<label for="password-expire-at">Password Expire At</label>
-					<input type="datetime-local" id="password-expire-at" name="password_expire_at" value="2018-06-12T19:30">
-				</div>
-
-				<div class="form-group radio-input">
-					<label>Account Status</label>
-					<div class="radio-group">
-						<input type="radio" id="active" name="account_status" value="active">
-						<label class="radio" for="active">Active</label>
-
-						<input type="radio" id="inactive" name="account_status" value="inactive">
-						<label class="radio" for="inactive">Inactive</label>
+					<div class="form-group">
+						<label for="username">Username</label>
+						<input type="text" id="username" name="username" placeholder="Username" required>
 					</div>
-				</div>
+
+					<div class="form-group">
+						<label for="password">Password</label>
+						<input type="password" id="password" name="password" placeholder="Password" required>
+					</div>
+
+					<div class="form-group">
+						<label for="passwordconfirm">Confirm password</label>
+						<input type="password" id="passwordconfirm" name="passwordconfirm" placeholder="Re-enter password" required>
+					</div>
+
+					<div class="form-group">
+						<label for="designation">Designation</label>
+						<input type="text" id="designation" name="designation" placeholder="Designation" required>
+					</div>
+
+					<div class="form-group">
+						<label for="department">Department</label>
+						<input type="text" id="department" name="department" placeholder="Department">
+					</div>
+
+					<div class="form-group">
+						<label for="email">Email</label>
+						<input type="email" id="email" name="email" placeholder="Email Address" required>
+					</div>
+
+					<div class="form-group">
+						<label for="mail-quota">Mail Quota (MB)</label>
+						<input type="number" id="mail-quota" name="mail_quota" placeholder="Enter mail quota in MB" value="0" min="0" step="1" required>
+					</div>
+
+					<div class="form-group">
+						<label for="date-joining">Date of Joining</label>
+						<input type="date" id="date-joining" name="date_of_joining" value="2018-07-22" required>
+					</div>
+
+					<div class="form-group">
+						<label for="date-birth">Date of Birth</label>
+						<input type="date" id="date-birth" name="date_of_birth" value="2018-07-22" required>
+					</div>
+
+					<div class="form-group">
+						<label for="mobile_number">Mobile Number</label>
+						<input type="tel" id="mobile_number" name="mobile_number" placeholder="Enter mobile number">
+					</div>
+
+					<div class="form-group">
+						<label for="experience_level">Experience Level</label>
+						<input type="range" class="range-slider" id="experience_level" name="experience_level" value="10" min="0" max="100" step="1">
+					</div>
+
+					<div class="form-group dropdown-menu">
+						<label for="role">User Role</label>
+						<select id="role" name="role" required>
+							<option value="" class="placeholder-option">--Select Role--</option>
+							<option value="admin">Admin</option>
+							<option value="user">User</option>
+							<option value="moderator">Moderator</option>
+						</select>
+					</div>
+
+					<div class="form-group checkbox-set">
+						<label>Admin Access</label>
+						<div class="checkboxes">
+							<input type="checkbox" id="add-access" name="add_access">
+							<label class="checkbox" for="add-access">Add</label>
+
+							<input type="checkbox" id="edit-access" name="edit_access">
+							<label class="checkbox" for="edit-access">Edit</label>
+
+							<input type="checkbox" id="approve-access" name="approve_access">
+							<label class="checkbox" for="approve-access">Approve</label>
+						</div>
+					</div>
+
+					<div class="form-group">
+						<label for="password-expire-at">Password Expire At</label>
+						<input type="datetime-local" id="password-expire-at" name="password_expire_at" value="2018-06-12T19:30">
+					</div>
+
+					<div class="form-group radio-input">
+						<label>Account Status</label>
+						<div class="radio-group">
+							<input type="radio" id="active" name="account_status" value="active">
+							<label class="radio" for="active">Active</label>
+
+							<input type="radio" id="inactive" name="account_status" value="inactive">
+							<label class="radio" for="inactive">Inactive</label>
+						</div>
+					</div>
+				</fieldset>
+
+				<details class="collapsible-section" open>
+					<summary>Advanced</summary>
+					<div class="form-group">
+						<label for="employee-id">Employee ID</label>
+						<input type="text" id="employee-id" name="employee_id" placeholder="Employee ID">
+					</div>
+
+					<div class="form-group">
+						<label for="office-location">Office Location</label>
+						<input type="text" id="office-location" name="office_location" placeholder="Office Location">
+					</div>
+
+					<div class="form-group">
+						<label for="backup-email">Backup Email</label>
+						<input type="email" id="backup-email" name="backup_email" placeholder="Backup Email">
+					</div>
+
+					<div class="form-group">
+						<label for="security-clearance">Security Clearance Level</label>
+						<input type="number" id="security-clearance" name="security_clearance" value="0" min="0" max="5" step="1">
+					</div>
+				</details>
 
 				<div class="form-group submit-buttons">
 					<button type="reset" class="clear-button">Clear</button>
diff --git a/test/scss/_colors.scss b/test/scss/_colors.scss
index 142620b..9357b21 100644
--- a/test/scss/_colors.scss
+++ b/test/scss/_colors.scss
@@ -80,3 +80,9 @@ $user-form-radio-button-active-border-color: $user-form-checkbox-button-active-b
 // Range slider
 $user-form-range-slider-background: $add-user-input-background; 
 $user-form-range-slider-filled: $user-form-checkbox-button-active-color;
+
+// Collapsible section
+$details-closed-summary-color: #b1b1b1;
+$details-summary-hover-color: #636363;
+$details-open-summary-color: #979797;
+$details-summary-border-color: $add-user-input-border-color;
diff --git a/test/scss/entry-form-fields/_collapsible-section.scss b/test/scss/entry-form-fields/_collapsible-section.scss
new file mode 100644
index 0000000..918847f
--- /dev/null
+++ b/test/scss/entry-form-fields/_collapsible-section.scss
@@ -0,0 +1,34 @@
+@use "../colors" as *;
+@use "../vars" as *;
+
+// Collapsible sections in the form, like "Advanced"
+@mixin collapsible {
+    padding-bottom: 3px;
+    // Style when the section is expanded
+    &[open] {
+        summary {       
+            color: $details-open-summary-color;
+        }
+        background-color: #dadada;
+        border-radius: 6px;
+    }
+    // Regular
+    summary {
+        display: block;
+        width: 100%;
+        color: $details-closed-summary-color;
+        font-weight: bold;
+        font-size: 18px;
+        cursor: pointer;
+        margin-bottom: 10px;
+        border-bottom: 2px solid $details-summary-border-color;
+        padding: 10px 2px;
+        border-radius: 6px 6px 0 0;
+
+        &:hover {
+            color: $details-summary-hover-color;
+            background-color: #d4d4d4;
+        }
+    }
+
+}
diff --git a/test/scss/entry-form-fields/_submit-buttons.scss b/test/scss/entry-form-fields/_submit-buttons.scss
index af148b2..77eb6f7 100644
--- a/test/scss/entry-form-fields/_submit-buttons.scss
+++ b/test/scss/entry-form-fields/_submit-buttons.scss
@@ -3,7 +3,7 @@
 
 // Submit button styling
 @mixin submit-buttons {
-    &.submit-buttons {
+    .submit-buttons {
         flex: 1 1 100%; // Full width of the available space
         display: flex; // Use flex to align the buttons
         justify-content: space-between; // Space between buttons
diff --git a/test/scss/entry-form.scss b/test/scss/entry-form.scss
index 1248d2e..9a8caaf 100644
--- a/test/scss/entry-form.scss
+++ b/test/scss/entry-form.scss
@@ -1,10 +1,12 @@
 @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 {
@@ -38,54 +40,56 @@ body {
 
         // 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
+            .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;
 
-            // 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
-                $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;
+                    // Label styling
+                    label {
+                        display: block;
+                        color: $add-user-form-title-color;
+                        font-size: 16px;
+                        margin-bottom: 5px;
                     }
-                }
 
-                @include checkboxes;
-                @include drop-down-menu;
-                @include radio-buttons;
-                @include range-slider;
-                @include submit-buttons;
+                    // 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;
         }
     }
 }