Align older CRM pages with the Mento visual language.

Restyle list, form, settings, and secondary modules to match contacts/activities patterns with teal chrome, soft panels, and mobile layouts — without changing already-redesigned screens.

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

apps/web/src/views/InvoiceFormView.vue

@@ -373,15 +373,15 @@ onMounted(load);
 <template>
   <section class="page">
     <header class="page-head no-print">
-      <div>
-        <RouterLink class="back" :to="{ name: 'invoices' }"
-          >← بازگشت به لیست</RouterLink
-        >
+      <div class="head-copy">
+        <p class="crumb">
+          <RouterLink :to="{ name: 'invoices' }">فاکتورها</RouterLink>
+          <span>›</span>
+          <strong>{{ isNew ? 'فاکتور جدید' : number || 'فاکتور' }}</strong>
+        </p>
         <h1>{{ isNew ? 'فاکتور جدید' : number || 'فاکتور' }}</h1>
       </div>
-      <button v-if="!isNew" class="btn btn-ghost" type="button" @click="printInvoice">
-        چاپ
-      </button>
+      <button v-if="!isNew" class="btn ghost" type="button" @click="printInvoice">چاپ</button>
     </header>
 
     <p v-if="loading" class="muted">در حال بارگذاری…</p>
@@ -613,8 +613,9 @@ onMounted(load);
 <style scoped>
 .page {
   display: grid;
-  gap: 1.1rem;
+  gap: 1rem;
   max-width: 860px;
+  min-width: 0;
 }
 
 .page-head {
@@ -624,14 +625,41 @@ onMounted(load);
   align-items: flex-start;
 }
 
-.back {
-  color: var(--muted);
+.head-copy {
+  min-width: 0;
+}
+
+.crumb {
+  margin: 0 0 0.25rem;
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  color: #94a3b8;
+  font-size: 0.82rem;
+}
+
+.crumb a {
+  color: #0f766e;
+  font-weight: 700;
   text-decoration: none;
-  font-size: 0.9rem;
 }
 
 h1 {
-  margin: 0.25rem 0 0;
+  margin: 0;
+  font-size: clamp(1.25rem, 2.5vw, 1.55rem);
+  font-weight: 800;
+}
+
+.btn.ghost {
+  background: #fff;
+  color: #0f766e;
+  border: 1px solid #99f6e4;
+  border-radius: 12px;
+  min-height: 42px;
+  padding: 0.55rem 1rem;
+  font: inherit;
+  font-weight: 700;
+  cursor: pointer;
 }
 
 .form,
@@ -645,13 +673,28 @@ h1 {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
-  padding: 0.75rem 1rem;
-  background: var(--surface);
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
+  padding: 0.85rem 1rem;
+  background: #fff;
+  border-radius: 18px;
+  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
   font-weight: 600;
 }
 
+.form {
+  background: #fff;
+  border-radius: 18px;
+  padding: 1rem;
+  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
+}
+
+.lines-block,
+.pay-block {
+  background: #fff;
+  border-radius: 18px;
+  padding: 1rem;
+  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);
+}
+
 .grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));