Redesign conference form with improved UI organization

• Group form into logical sections with background color and headers
• Add labels and placeholder text

app/assets/stylesheets/application.css

@@ -59,9 +59,75 @@
   border-right: 1px dashed gray;
 }
 
+/* Role-based visibility classes */
+[class*="-only"] {
+  display: none;
+}
+
+/* Permission-based visibility classes */
+.can-manage-assignments-only {
+  display: none;
+}
+body[data-can-manage-assignments] .can-manage-assignments-only {
+  display: block;
+}
+
+/* Role-based visibility classes */
+.has-role-shift_coordinator-only {
+  display: none;
+}
+body[data-has-role-shift_coordinator] .has-role-shift_coordinator-only {
+  display: block;
+}
+
+.has-role-admin-only {
+  display: none;
+}
+body[data-has-role-admin] .has-role-admin-only {
+  display: block;
+}
+
+.has-role-events_admin-only {
+  display: none;
+}
+body[data-has-role-events_admin] .has-role-events_admin-only {
+  display: block;
+}
+
+/* Exception classes */
+.except-has-role-admin {
+  display: block;
+}
+body[data-has-role-admin] .except-has-role-admin {
+  display: none;
+}
+
+.except-has-role-shift_coordinator {
+  display: block;
+}
+body[data-has-role-shift_coordinator] .except-has-role-shift_coordinator {
+  display: none;
+}
+
+.except-has-role-events_admin {
+  display: block;
+}
+body[data-has-role-events_admin] .except-has-role-events_admin {
+  display: none;
+}
+
+.except-can-manage-assignments {
+  display: block;
+}
+body[data-can-manage-assignments] .except-can-manage-assignments {
+  display: none;
+}
+
+/* Legacy class for backward compatibility */
 .hide-unless-shiftcoordinator {
   display: none;
 }
-body[data-is-shiftcoordinator] .hide-unless-shiftcoordinator {
+body[data-has-role-shift_coordinator] .hide-unless-shiftcoordinator,
+body[data-can-manage-assignments] .hide-unless-shiftcoordinator {
   display: block;
 }