feat: notification bell in PageHeader + remove wasted top bar row for supervisors

- PageHeader: renders NotificationBell when isAdmin — bell now appears
  on every page that uses PageHeader (leads, contacts, appointments,
  patients, call history, missed calls, call recordings, live monitor,
  team performance, settings)
- app-shell: top bar row only renders for agents (network indicator +
  status toggle). Supervisors no longer see a wasted empty row.
- Call Recordings: TopBar → PageHeader with badge + info icon
- Live Monitor: TopBar → PageHeader with badge + info icon
- Team Performance: TopBar → PageHeader with info icon
- Settings: TopBar → PageHeader with info icon
- Missed Calls: underline tabs → custom pills (consistent with all pages)
- Desktop overlay app-shell synced with same changes

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/pages/missed-calls.tsx

@@ -7,7 +7,6 @@ const SearchLg = faIcon(faMagnifyingGlass);
 import { Badge } from '@/components/base/badges/badges';
 import { Input } from '@/components/base/input/input';
 import { Table } from '@/components/application/table/table';
-import { Tabs, TabList, Tab } from '@/components/application/tabs/tabs';
 import { PaginationPageDefault } from '@/components/application/pagination/pagination';
 import { PageHeader } from '@/components/layout/page-header';
 import { ColumnToggle, useColumnVisibility } from '@/components/application/table/column-toggle';
@@ -253,11 +252,22 @@ export const MissedCallsPage = () => {
                     </>
                 }
                 tabs={
-                    <Tabs selectedKey={tab} onSelectionChange={(key) => handleTab(key as StatusTab)}>
-                        <TabList items={tabItems} type="underline" size="sm">
-                            {(item) => <Tab key={item.id} id={item.id} label={item.label} badge={item.badge} />}
-                        </TabList>
-                    </Tabs>
+                    <div className="flex items-center gap-1.5">
+                        {tabItems.map((item) => (
+                            <button
+                                key={item.id}
+                                onClick={() => handleTab(item.id)}
+                                className={cx(
+                                    'shrink-0 rounded-full px-3 py-1 text-xs font-medium transition duration-100 ease-linear',
+                                    tab === item.id
+                                        ? 'bg-brand-solid text-white'
+                                        : 'bg-secondary text-tertiary hover:text-secondary hover:bg-secondary_hover',
+                                )}
+                            >
+                                {item.label}{item.badge ? ` ${item.badge}` : ''}
+                            </button>
+                        ))}
+                    </div>
                 }
             />