Polish dashboard page chrome and user access UI.

Rename Customers to Users with FA/EN titles, compact headers and filter bars across apps, and refine manager role copy plus a customer-header link to the business dashboard.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/business/src/components/ChangeUserAccessModal.module.css

@@ -6,7 +6,7 @@
 
 .roleOption {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: 10px;
   padding: 10px 12px;
   border-radius: 10px;
@@ -16,17 +16,37 @@
   font-family: var(--font-ui);
 }
 
+.roleOption input[type='radio'] {
+  accent-color: var(--primary);
+  margin-top: 2px;
+  flex-shrink: 0;
+}
+
 .roleOption:has(input:checked) {
   border-color: rgba(var(--primary-rgb) / 0.35);
   background: rgba(var(--primary-rgb) / 0.08);
 }
 
+.roleOptionText {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
 .roleOptionLabel {
   font-size: 13px;
   font-weight: 600;
   color: var(--text-primary);
 }
 
+.roleOptionDesc {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  line-height: 1.45;
+}
+
 .roleHint {
   margin: 12px 0 8px;
   font-size: 12px;
@@ -36,12 +56,25 @@
 }
 
 .roleListNested {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 8px;
   margin-top: 4px;
   margin-inline-start: 12px;
   padding-inline-start: 10px;
   border-inline-start: 2px solid rgba(var(--primary-rgb) / 0.2);
 }
 
+@media (min-width: 560px) {
+  .roleListNested {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .roleListNested .roleOption:last-child:nth-child(odd) {
+    grid-column: 1 / -1;
+  }
+}
+
 .roleBadge {
   display: inline-block;
   margin-top: 4px;