Add customer SMS/Excel tools, selection bar, and sticky import toasts.

Bulk and single SMS from Users, row selection with overflow summary, persistent large import toasts, and business SMS sender in Super Admin.

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

apps/business/src/pages/CustomersPage.module.css

@@ -6,6 +6,76 @@
   overflow: hidden;
 }
 
+.selectionBar {
+  margin-top: 10px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 40px;
+  padding: 8px 14px;
+  background: var(--glass-bg);
+  border: 1px solid var(--glass-border);
+  border-radius: var(--radius);
+  box-shadow: var(--glass-shadow);
+  overflow: hidden;
+}
+
+.selectionLabel {
+  flex-shrink: 0;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text-secondary);
+  white-space: nowrap;
+}
+
+.selectionNames {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  font-family: var(--font-ui);
+}
+
+.selectionNameItem {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.selectionName,
+.selectionMore {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+  white-space: nowrap;
+}
+
+.selectionMore {
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+
+.selectionSep {
+  display: inline-block;
+  width: 1px;
+  height: 12px;
+  margin-inline: 8px;
+  background: rgba(148, 163, 184, 0.45);
+  flex-shrink: 0;
+}
+
+.selectionTotal {
+  flex-shrink: 0;
+  margin-inline-start: auto;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text-secondary);
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
 .tableWrap {
   background: var(--glass-bg);
   border: 1px solid var(--glass-border);
@@ -40,8 +110,12 @@
   table-layout: fixed;
 }
 
+.colCheck {
+  width: 44px;
+}
+
 .colName {
-  width: 24%;
+  width: 22%;
 }
 
 .colCell {
@@ -61,12 +135,12 @@
 }
 
 .colActions {
-  width: 240px;
+  width: 220px;
 }
 
 .th,
 .td {
-  padding: 10px 12px;
+  padding: 14px 14px;
   text-align: start;
   border-bottom: 1px solid rgba(148, 163, 184, 0.16);
   vertical-align: middle;
@@ -121,38 +195,54 @@
   white-space: nowrap;
 }
 
+.thCheck,
+.tdCheck {
+  width: 44px;
+  text-align: center;
+  padding-inline: 8px;
+  vertical-align: middle;
+}
+
+.rowCheck {
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  accent-color: var(--primary);
+  cursor: pointer;
+}
+
 .tdActions {
   text-align: right;
   white-space: nowrap;
-  padding-inline-end: 10px;
+  padding-inline-end: 14px;
 }
 
 .rowActions {
   display: inline-flex;
   align-items: center;
   justify-content: flex-end;
-  gap: 0;
+  gap: 4px;
 }
 
 /* FA: عملیات column is on the physical left. */
 .tableFa .thActions,
 .tableFa .tdActions {
   text-align: left;
-  padding-left: 10px;
-  padding-right: 10px;
+  padding-left: 14px;
+  padding-right: 14px;
 }
 
 .toggleInActions {
-  margin-inline-end: 10px;
+  margin-inline-end: 8px;
   flex-shrink: 0;
   display: flex;
   align-items: center;
-  height: 28px;
+  height: 30px;
 }
 
 .actionBtn {
-  width: 28px;
-  height: 28px;
+  width: 30px;
+  height: 30px;
   flex-shrink: 0;
   display: flex;
   align-items: center;
@@ -278,6 +368,16 @@
   box-shadow: 0 12px 28px rgba(var(--primary-rgb) / 0.45);
 }
 
+.spin {
+  animation: customersSpin 0.8s linear infinite;
+}
+
+@keyframes customersSpin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 @media (max-width: 768px) {
   .fab {
     inset-inline-end: 20px;