my-app/src/components/forms/ParticipantsSelector.module.css

@@ -1,5 +1,6 @@
 .container {
 	position: relative;
+	margin-bottom: 4rem;
 }
 
 .elementHeading {
@@ -18,7 +19,6 @@
 	flex-wrap: wrap;
 	gap: 0.5rem;
 	padding: 0;
-	margin-top: 1rem;
 }
 
 .participantChip {

my-app/src/pages/BookingDetails.jsx

@@ -72,6 +72,11 @@ export function BookingDetails({ addBooking }) {
 							← Tillbaka
 					</button>
 
+					<div className={styles.formContainer}>
+						<BookingTitleField />
+						<ParticipantsSelector />
+					</div>
+
 					<div className={styles.roomVisualization}>
 						<div className={styles.roomArea}></div>
 						<div className={`${styles.roomInfo} ${isAccordionOpen ? styles.expanded : ''}`} onClick={toggleAccordion}>
@@ -103,11 +108,6 @@ export function BookingDetails({ addBooking }) {
 						</div>
 					</div>
 
-					<div className={styles.formContainer}>
-						<BookingTitleField />
-						<ParticipantsSelector />
-					</div>
-
 					<div className={styles.footer}>
 						<button 
 							className={styles.saveButton}

my-app/src/pages/BookingDetails.module.css

@@ -87,7 +87,8 @@
 }
 
 .roomInfo {
-	background: #1976d2;
+	border-top: 2px solid var(--su-sky);
+	background: var(--su-blue);
 	color: white;
 	padding: 1rem;
 	font-weight: 500;
@@ -163,7 +164,6 @@
 .formContainer {
 	display: flex;
 	flex-direction: column;
-	gap: 2rem; 
 }
 
 .footer {
@@ -175,8 +175,8 @@
 .saveButton {
 	width: 100%;
 	padding: 1rem;
-	background-color: var(--color-primary);
-	color: var(--color-white);
+	background-color: var(--color-primary-dark);
+	color: var(--text-primary);
 	border: none;
 	border-radius: 0.5rem;
 	font-size: 1.1rem;
@@ -187,7 +187,7 @@
 }
 
 .saveButton:hover {
-	background-color: var(--color-primary-dark);
+	background-color: var(--color-primary-hover);
 }
 
 .saveButton:active {

my-app/src/styles/variables.css

@@ -358,8 +358,8 @@
   /* === STOCKHOLM UNIVERSITY BRAND COLORS === */
   
   /* Primary university color */
-  --su-university-blue: #002F5F;
-  --su-university-blue-80: #33587F;
+  --su-blue: #002F5F;
+  --su-blue-80: #33587F;
 
   /* Secondary colors - Sky/Himmel */
   --su-sky: #ACDEE6;
@@ -535,7 +535,7 @@
   --tooltip-text: #e5e7eb;
   
   /* Button colors - dark mode */
-  --button-bg: #374151;
+  --button-bg: #28549c;
   --button-secondary-bg: #374151;
   --button-secondary-text: #e5e7eb;
   --button-secondary-hover-bg: #4b5563;
@@ -669,4 +669,46 @@
   --loader-text-color: #e5e7eb;
   --loader-border: rgba(255, 255, 255, 0.1);
   --loader-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.2);
+
+
+  /* === STOCKHOLM UNIVERSITY - DARK MODE TEST === */
+  
+  /* Primary university color */
+  --su-blue: #132a42;
+  --su-blue-80: #33587F;
+
+  /* Secondary colors - Sky/Himmel */
+  --su-sky: #5d8388;
+  --su-sky-70: #C4E8ED;
+  --su-sky-35: #E3F4F7;
+  --su-sky-20: #EEF9FA;
+
+  /* Secondary colors - Water/Vatten */
+  --su-water: #9BB2CE;
+  --su-water-70: #B8C9DC;
+  --su-water-35: #DCE4EE;
+  --su-water-20: #EBF0F5;
+
+  /* Secondary colors - Fire/Eld */
+  --su-fire: #EB7125;
+  --su-fire-70: #F19B66;
+  --su-fire-35: #F8CDB3;
+  --su-fire-20: #FBE2D3;
+
+  /* Secondary colors - Olive/Oliv */
+  --su-olive: #A3A86B;
+  --su-olive-70: #BEC297;
+  --su-olive-35: #DFE1CB;
+  --su-olive-20: #EDEEE1;
+
+  /* Base colors */
+  --su-dark-gray: #4B4B4B;
+  --su-white: #FFFFFF;
+  --su-medium-gray: #BABABA;
+  --su-light-gray: #DADADA;
+
+  /* Utility colors - limited use */
+  --su-green: #499943;
+  --su-red: #B00020;
+  --su-red-10: #F7E5E8;
 }