master plan implemenattion

frontend/src/index.css

@@ -175,7 +175,7 @@
 }
 
 @utility menu-item {
-  @apply relative flex items-center w-full gap-3 px-3 py-2 font-medium rounded-lg text-theme-sm;
+  @apply relative flex items-center w-full gap-3 px-3.5 py-2.5 font-medium rounded-lg text-theme-sm;
 }
 
 @utility menu-item-active {
@@ -186,6 +186,44 @@
   @apply text-gray-700 hover:bg-gray-100 group-hover:text-gray-700 dark:text-gray-300 dark:hover:bg-white/5 dark:hover:text-gray-300;
 }
 
+/* Menu icon sizing - consistent across sidebar */
+@utility menu-item-icon-size {
+  @apply w-5 h-5 flex-shrink-0;
+}
+
+@utility menu-item-icon-active {
+  @apply text-brand-500;
+}
+
+@utility menu-item-icon-inactive {
+  @apply text-gray-500 group-hover:text-gray-700;
+}
+
+/* Dropdown menu items - increased spacing */
+@utility menu-dropdown-item {
+  @apply block px-3 py-2 text-theme-sm font-medium rounded-md transition-colors;
+}
+
+@utility menu-dropdown-item-active {
+  @apply text-brand-600 bg-brand-50;
+}
+
+@utility menu-dropdown-item-inactive {
+  @apply text-gray-600 hover:text-gray-900 hover:bg-gray-50;
+}
+
+@utility menu-dropdown-badge {
+  @apply px-1.5 py-0.5 text-xs font-medium rounded;
+}
+
+@utility menu-dropdown-badge-active {
+  @apply bg-brand-100 text-brand-700;
+}
+
+@utility menu-dropdown-badge-inactive {
+  @apply bg-gray-100 text-gray-600;
+}
+
 @layer utilities {
   input[type="date"]::-webkit-inner-spin-button,
   input[type="time"]::-webkit-inner-spin-button,