Add UI indicators for virtual parent accounts

Updates permission grant dialogs to visually distinguish virtual accounts:

Changes:
- Add custom option template to account selectors (both grant and bulk grant dialogs)
- Show "🌐 Virtual parent" caption explaining inheritance behavior
- Add blue "Virtual" chip badge to virtual accounts in dropdown
- Update hint text: "virtual accounts cascade to all children"
- Include is_virtual flag in accountOptions computed property

User Experience:
When admin selects account in grant dialog, virtual accounts now clearly show:
- "Expenses" with "Virtual" badge
- Caption: "grants access to all Expenses:* accounts"

This helps admins understand that granting permission on "Expenses" will
automatically give users access to all real expense accounts:
- Expenses:Groceries
- Expenses:Gas:Kitchen
- Expenses:Maintenance:Property
- etc.

Related: migrations.py m003 (created virtual parent accounts)

🤖 Generated with Claude Code (https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

static/js/permissions.js

@@ -67,7 +67,8 @@ window.app = Vue.createApp({
     accountOptions() {
       return this.accounts.map(acc => ({
         id: acc.id,
-        name: acc.name
+        name: acc.name,
+        is_virtual: acc.is_virtual || false
       }))
     },
 

templates/castle/permissions.html

@@ -303,7 +303,7 @@
       <q-select
         v-model="grantForm.account_id"
         label="Account *"
-        hint="Account to grant access to"
+        hint="Account to grant access to (virtual accounts cascade to all children)"
         :options="accountOptions"
         option-value="id"
         option-label="name"
@@ -316,6 +316,19 @@
         <template v-slot:prepend>
           <q-icon name="account_balance"></q-icon>
         </template>
+        <template v-slot:option="scope">
+          <q-item v-bind="scope.itemProps">
+            <q-item-section>
+              <q-item-label>{% raw %}{{ scope.opt.name }}{% endraw %}</q-item-label>
+              <q-item-label v-if="scope.opt.is_virtual" caption class="text-blue-7">
+                🌐 Virtual parent (grants access to all {% raw %}{{ scope.opt.name }}{% endraw %}:* accounts)
+              </q-item-label>
+            </q-item-section>
+            <q-item-section v-if="scope.opt.is_virtual" side>
+              <q-chip size="sm" color="blue" text-color="white">Virtual</q-chip>
+            </q-item-section>
+          </q-item>
+        </template>
       </q-select>
 
       <!-- Permission Type -->
@@ -437,7 +450,7 @@
       <q-select
         v-model="bulkGrantForm.account_id"
         label="Account *"
-        hint="Account to grant access to"
+        hint="Account to grant access to (virtual accounts cascade to all children)"
         :options="accountOptions"
         option-value="id"
         option-label="name"
@@ -450,6 +463,19 @@
         <template v-slot:prepend>
           <q-icon name="account_balance"></q-icon>
         </template>
+        <template v-slot:option="scope">
+          <q-item v-bind="scope.itemProps">
+            <q-item-section>
+              <q-item-label>{% raw %}{{ scope.opt.name }}{% endraw %}</q-item-label>
+              <q-item-label v-if="scope.opt.is_virtual" caption class="text-blue-7">
+                🌐 Virtual parent (grants access to all {% raw %}{{ scope.opt.name }}{% endraw %}:* accounts)
+              </q-item-label>
+            </q-item-section>
+            <q-item-section v-if="scope.opt.is_virtual" side>
+              <q-chip size="sm" color="blue" text-color="white">Virtual</q-chip>
+            </q-item-section>
+          </q-item>
+        </template>
       </q-select>
 
       <!-- Permission Type -->