@7365admin1/layer-common 3.2.2-staging.120 → 3.2.2-staging.122

package/components/HidIntercomManagement.vue

@@ -1,63 +1,26 @@
+<!--
+  HID INTERCOM MANAGEMENT - the readers' door intercoms and their contact list.
+
+  The largest of the six panels, and it was a private copy of the standard
+  table: an above-card toolbar, a `v-tabs` strip, a raw `v-table` with TWO
+  column sets, a refresh strip with a pager, a SECOND pager in the footer, an
+  empty state and its own chip palette - in about a hundred and forty literal
+  hexes. Those literals are why it had no dark theme: `#1f2937` on the dark
+  card measures 1.13:1, `white on #a7a7a7` 2.41:1 and the "Intercom" tab label
+  2.54:1.
+
+  It is the design's standard table screen with tabs, so it is drawn with the
+  shared one: `TableMain` supplies the heading, the card, the in-card toolbar,
+  the `app-tab` strip, the header row, the rows and ONE pager. The two column
+  sets stay two column sets - `tableHeaders` and `visibleRows` switch on the
+  active tab exactly as the two `<thead>` blocks did.
+
+  Every dialog, handler, SIP call and web-phone control is unchanged. Only the
+  chrome and the colours move; no call, connect, hangup or device path is
+  touched.
+-->
 <template>
   <section class="hid-intercom-management">
-    <div class="top-bar">
-      <v-btn
-        v-if="activeTab === 'contacts'"
-        rounded="xl"
-        class="text-none add-button"
-        variant="flat"
-        prepend-icon="mdi-plus"
-        @click="openContactDialog()"
-      >
-        Add Contacts
-      </v-btn>
-
-      <v-btn
-        v-else
-        rounded="xl"
-        class="text-none web-call-button"
-        :class="{ 'is-connected': webPhone.isRegistered.value, 'has-incoming-call': webPhone.callState.value === 'incoming' }"
-        variant="flat"
-        prepend-icon="mdi-phone-in-talk-outline"
-        @click="openWebPhoneDialog()"
-      >
-        {{ webPhone.callState.value === 'incoming' ? 'Incoming Call' : 'Web Call' }}
-      </v-btn>
-
-      <v-select
-        v-if="readers.length"
-        v-model="selectedReaderId"
-        :items="readerOptions"
-        item-title="title"
-        item-value="value"
-        variant="outlined"
-        density="compact"
-        hide-details
-        class="reader-input"
-        @update:model-value="page = 1"
-      />
-
-      <div class="toolbar-spacer" />
-
-      <v-text-field
-        v-model="search"
-        placeholder="Search"
-        variant="outlined"
-        density="compact"
-        hide-details
-        class="search-input"
-      />
-
-      <v-select
-        v-model="statusFilter"
-        :items="statusOptions"
-        variant="outlined"
-        density="compact"
-        hide-details
-        class="status-input"
-      />
-    </div>
-
     <v-alert
       v-if="message.text"
       :type="message.type"
@@ -68,109 +31,130 @@
       {{ message.text }}
     </v-alert>
 
-    <v-card flat border class="table-card">
-      <div class="table-refresh">
-        <v-btn icon="mdi-refresh" variant="text" density="comfortable" :loading="loading" @click="reload" />
-        <div class="toolbar-spacer" />
-        <span>{{ pageRange }}</span>
-        <v-btn icon="mdi-chevron-left" variant="text" density="compact" :disabled="page <= 1" @click="page--" />
-        <v-btn icon="mdi-chevron-right" variant="text" density="compact" :disabled="page >= pages" @click="page++" />
-      </div>
-
-      <v-tabs v-model="activeTab" class="intercom-tabs" density="compact">
-        <v-tab value="intercom" class="text-none">Intercom</v-tab>
-        <v-tab value="contacts" class="text-none">Intercom Contacts</v-tab>
-      </v-tabs>
-
-      <div class="table-body">
-        <v-table>
-          <thead>
-            <tr v-if="activeTab === 'intercom'">
-              <th>Name</th>
-              <th>Location</th>
-              <th>SIP Server Address</th>
-              <th>Operating Mode</th>
-              <th>Dial Code</th>
-              <th>SIP Status</th>
-              <th class="text-right"></th>
-            </tr>
-            <tr v-else>
-              <th>Name</th>
-              <th>Location</th>
-              <th>SIP Server Address</th>
-              <th>Dial Code</th>
-              <th class="text-right"></th>
-            </tr>
-          </thead>
-          <tbody>
-            <template v-if="activeTab === 'intercom'">
-              <tr v-for="row in paginatedIntercomRows" :key="row.reader._id">
-                <td>{{ row.name }}</td>
-                <td>{{ row.location }}</td>
-                <td>
-                  <span :class="{ 'link-text': row.serverAddress !== 'N/A' }">{{ row.serverAddress }}</span>
-                </td>
-                <td>{{ row.operatingMode }}</td>
-                <td>{{ row.dialCode }}</td>
-                <td>
-                  <v-chip size="small" variant="flat" :class="getStatusClass(row.status)">
-                    {{ row.status }}
-                  </v-chip>
-                </td>
-                <td class="text-right">
-                  <v-menu location="bottom end">
-                    <template #activator="{ props: menuProps }">
-                      <v-btn v-bind="menuProps" icon="mdi-dots-vertical" variant="text" density="comfortable" />
-                    </template>
-                    <v-list density="compact" class="row-menu">
-                      <v-list-item title="View" @click="openViewDialog(row)" />
-                      <v-list-item title="SIP Settings" @click="openSipDialog(row)" />
-                      <v-list-item title="Call Settings" @click="openCallDialog(row)" />
-                      <v-list-item title="Dial Code" @click="openDialCodeDialog(row)" />
-                      <v-list-item title="Make a call" @click="openMakeCallDialog(row)" />
-                      <v-list-item title="Web call" @click="openWebPhoneDialog(row)" />
-                    </v-list>
-                  </v-menu>
-                </td>
-              </tr>
-            </template>
-
-            <template v-else>
-              <tr v-for="contact in paginatedContacts" :key="contact._rowKey">
-                <td>{{ contact.name }}</td>
-                <td>{{ contact.location }}</td>
-                <td>
-                  <span :class="{ 'link-text': contact.serverAddress !== 'N/A' }">{{ contact.serverAddress }}</span>
-                </td>
-                <td>{{ contact.dialCode }}</td>
-                <td class="text-right">
-                  <v-menu location="bottom end">
-                    <template #activator="{ props: menuProps }">
-                      <v-btn v-bind="menuProps" icon="mdi-dots-vertical" variant="text" density="comfortable" />
-                    </template>
-                    <v-list density="compact" class="row-menu">
-                      <v-list-item title="View" @click="openContactView(contact)" />
-                      <v-list-item title="Edit" @click="openContactDialog(contact)" />
-                      <v-list-item title="Delete" @click="openDeleteContact(contact)" />
-                    </v-list>
-                  </v-menu>
-                </td>
-              </tr>
-            </template>
-          </tbody>
-        </v-table>
-
-        <div v-if="!visibleRows.length" class="empty-state">
-          No intercom records found.
+    <TableMain
+      title="Intercom"
+      :headers="tableHeaders"
+      :items="visiblePageRows"
+      :loading="loading"
+      :items-per-page="-1"
+      :page="page"
+      :pages="pages"
+      :page-range="pageRange"
+      item-value="_rowKey"
+      show-header
+      @refresh="reload"
+      @update:page="page = $event"
+    >
+      <!-- The action swaps with the tab, as it did in the old top bar. -->
+      <template #actions>
+        <AppButton
+          v-if="activeTab === 'contacts'"
+          icon="mdi-plus"
+          @click="openContactDialog()"
+        >
+          Add Contacts
+        </AppButton>
+        <AppButton
+          v-else
+          icon="mdi-phone-in-talk-outline"
+          class="web-call-button"
+          :class="webPhoneButtonClass"
+          @click="openWebPhoneDialog()"
+        >
+          {{ webPhone.callState.value === 'incoming' ? 'Incoming Call' : 'Web Call' }}
+        </AppButton>
+      </template>
+
+      <!-- Was `v-tabs`/`v-tab`, whose selected state is drawn from Vuetify's
+           `on-surface`. `.app-tab` is the shared strip. -->
+      <template #tabs>
+        <button
+          v-for="tab in tabOptions"
+          :key="tab.value"
+          type="button"
+          role="tab"
+          class="app-tab"
+          :class="{ 'app-tab--active': activeTab === tab.value }"
+          :aria-selected="activeTab === tab.value"
+          @click="activeTab = tab.value"
+        >
+          {{ tab.label }}
+        </button>
+      </template>
+
+      <template #extension>
+        <div class="app-filter-row hid-intercom-filters">
+          <!-- Staging (1e6224e) added a reader picker here and filters both
+               tabs by it; it keeps that job, drawn as the shared select. -->
+          <AppSelect
+            v-if="readers.length"
+            v-model="selectedReaderId"
+            class="reader-select"
+            :items="readerOptions"
+            @update:model-value="page = 1"
+          />
+          <AppField v-model="search" search placeholder="Search" />
+          <AppSelect v-model="statusFilter" :items="statusOptions" />
         </div>
-      </div>
-
-      <div class="table-footer">
-        <span>{{ pageRange }}</span>
-        <v-btn icon="mdi-chevron-left" variant="text" density="comfortable" :disabled="page <= 1" @click="page--" />
-        <v-btn icon="mdi-chevron-right" variant="text" density="comfortable" :disabled="page >= pages" @click="page++" />
-      </div>
-    </v-card>
+      </template>
+
+      <template #[`item.name`]="{ item }">
+        <span class="app-cell--strong">{{ item.name }}</span>
+      </template>
+
+      <template #[`item.location`]="{ item }">
+        <span class="app-cell--muted">{{ item.location }}</span>
+      </template>
+
+      <template #[`item.serverAddress`]="{ item }">
+        <span :class="item.serverAddress !== 'N/A' ? 'link-text' : 'app-cell--muted'">
+          {{ item.serverAddress }}
+        </span>
+      </template>
+
+      <template #[`item.operatingMode`]="{ item }">
+        <span class="app-cell--muted">{{ item.operatingMode }}</span>
+      </template>
+
+      <template #[`item.dialCode`]="{ item }">
+        <span class="app-cell--num">{{ item.dialCode }}</span>
+      </template>
+
+      <!-- The shared chip. This screen's `getStatusClass` was another private
+           copy of the status-to-colour map. -->
+      <template #[`item.status`]="{ item }">
+        <StatusChip :status="item.status" />
+      </template>
+
+      <template #[`item.action-table`]="{ item }">
+        <v-menu location="bottom end">
+          <template #activator="{ props: menuProps }">
+            <AppButton v-bind="menuProps" variant="row" icon="mdi-dots-vertical" />
+          </template>
+          <v-list v-if="activeTab === 'intercom'" density="compact" class="row-menu">
+            <v-list-item title="View" @click="openViewDialog(item)" />
+            <v-list-item title="SIP Settings" @click="openSipDialog(item)" />
+            <v-list-item title="Call Settings" @click="openCallDialog(item)" />
+            <v-list-item title="Dial Code" @click="openDialCodeDialog(item)" />
+            <v-list-item title="Make a call" @click="openMakeCallDialog(item)" />
+            <v-list-item title="Web call" @click="openWebPhoneDialog(item)" />
+          </v-list>
+          <v-list v-else density="compact" class="row-menu">
+            <v-list-item title="View" @click="openContactView(item)" />
+            <v-list-item title="Edit" @click="openContactDialog(item)" />
+            <v-list-item title="Delete" @click="openDeleteContact(item)" />
+          </v-list>
+        </v-menu>
+      </template>
+
+      <!-- The screen's own sentence, kept. -->
+      <template #no-data>
+        <div class="table-card__empty">
+          <v-icon icon="mdi-deskphone" size="32" />
+          <span>No intercom records found.</span>
+        </div>
+      </template>
+    </TableMain>
 
     <v-dialog v-model="viewDialog" max-width="360">
       <v-card class="detail-dialog" rounded="lg">
@@ -200,43 +184,53 @@
         <v-card-text class="dialog-body">
           <div class="sip-switch-row">
             <span>Enable / Disable SIP</span>
-            <v-switch v-model="sipForm.enabled" color="success" density="compact" hide-details />
+            <v-switch v-model="sipForm.enabled" class="app-switch" density="compact" hide-details />
           </div>
           <div class="sip-label">Server Address <span>*</span></div>
-          <v-text-field v-model="sipForm.serverIp" :disabled="!sipForm.enabled" placeholder="SIP server address" variant="outlined" density="compact" hide-details="auto" class="sip-input" />
+          <AppField v-model="sipForm.serverIp" :disabled="!sipForm.enabled" placeholder="SIP server address" class="sip-input" />
           <div class="sip-label">Port <span>*</span></div>
-          <v-text-field v-model="sipForm.serverPort" :disabled="!sipForm.enabled" placeholder="0000" variant="outlined" density="compact" hide-details="auto" class="sip-input" />
+          <AppField v-model="sipForm.serverPort" :disabled="!sipForm.enabled" placeholder="0000" class="sip-input" />
           <div class="form-two-col">
             <div>
               <div class="sip-label">Initial RTP Port <span>*</span></div>
-              <v-text-field v-model="sipForm.initialRtpPort" :disabled="!sipForm.enabled" placeholder="0000" variant="outlined" density="compact" hide-details="auto" class="sip-input" />
+              <AppField v-model="sipForm.initialRtpPort" :disabled="!sipForm.enabled" placeholder="0000" class="sip-input" />
             </div>
             <div>
               <div class="sip-label">Final RTP Port <span>*</span></div>
-              <v-text-field v-model="sipForm.finalRtpPort" :disabled="!sipForm.enabled" placeholder="0000" variant="outlined" density="compact" hide-details="auto" class="sip-input" />
+              <AppField v-model="sipForm.finalRtpPort" :disabled="!sipForm.enabled" placeholder="0000" class="sip-input" />
             </div>
           </div>
           <div class="sip-switch-row sip-section-switch">
             <span>Numeric Extension</span>
-            <v-switch v-model="sipForm.numericExtension" :disabled="!sipForm.enabled" color="success" density="compact" hide-details />
+            <v-switch v-model="sipForm.numericExtension" :disabled="!sipForm.enabled" class="app-switch" density="compact" hide-details />
           </div>
           <div class="sip-label">Extension <span>*</span></div>
-          <v-text-field v-model="sipForm.extension" :disabled="areSipCredentialFieldsDisabled" placeholder="0000" variant="outlined" density="compact" hide-details="auto" class="sip-input" />
+          <AppField v-model="sipForm.extension" :disabled="areSipCredentialFieldsDisabled" placeholder="0000" class="sip-input" />
           <div class="sip-label">Login <span>*</span></div>
-          <v-text-field v-model="sipForm.login" :disabled="areSipCredentialFieldsDisabled" placeholder="Enter username" variant="outlined" density="compact" hide-details="auto" class="sip-input" />
+          <AppField v-model="sipForm.login" :disabled="areSipCredentialFieldsDisabled" placeholder="Enter username" class="sip-input" />
           <div class="sip-label">Password <span>*</span></div>
-          <v-text-field
+          <!-- The reveal eye moves into `AppField`'s `trailing` slot - the same
+               slot panel 4's access PIN uses, which is why it is a shared slot
+               rather than a private hack in two screens. -->
+          <AppField
             v-model="sipForm.password"
+            :disabled="areSipCredentialFieldsDisabled"
             placeholder="Enter password"
             :type="showSipPassword ? 'text' : 'password'"
-            :disabled="areSipCredentialFieldsDisabled"
-            variant="outlined"
-            density="compact"
-            hide-details="auto"
+            autocomplete="new-password"
             class="sip-input"
-            :append-inner-icon="showSipPassword ? 'mdi-eye-off' : 'mdi-eye'"
-            @click:append-inner="showSipPassword = !showSipPassword"
-          />
+          >
+            <template #trailing>
+              <button
+                type="button"
+                class="app-field__trailing"
+                :aria-label="showSipPassword ? 'Hide SIP password' : 'Show SIP password'"
+                @click="showSipPassword = !showSipPassword"
+              >
+                <v-icon :icon="showSipPassword ? 'mdi-eye-off' : 'mdi-eye'" size="18" />
+              </button>
+            </template>
+          </AppField>
           <div class="sip-label">Operating Mode <span>*</span></div>
           <v-btn-toggle v-model="sipForm.operatingMode" :disabled="!sipForm.enabled" mandatory divided class="mode-toggle">
             <v-btn value="sip-client" class="text-none">SIP Client</v-btn>
@@ -252,7 +246,7 @@
               <span>Enable video</span>
               <small>Allow this reader to send its camera feed during SIP intercom calls.</small>
             </div>
-            <v-switch v-model="sipForm.videoEnabled" :disabled="!sipForm.enabled" color="success" density="compact" hide-details />
+            <v-switch v-model="sipForm.videoEnabled" :disabled="!sipForm.enabled" class="app-switch" density="compact" hide-details />
           </div>
         </v-card-text>
         <v-card-actions class="dialog-actions pa-0">
@@ -274,37 +268,37 @@
           </v-radio-group>
           <div class="call-toggle-row">
             <span>Automatic Answering</span>
-            <v-switch v-model="callForm.autoAnswer" color="success" density="compact" hide-details />
+            <v-switch v-model="callForm.autoAnswer" class="app-switch" density="compact" hide-details />
           </div>
           <div class="call-label">Automatic answering delay (seconds)</div>
-          <v-text-field v-model="callForm.autoAnswerDelay" :disabled="!callForm.autoAnswer" placeholder="0" variant="outlined" density="compact" hide-details="auto" class="call-input" />
+          <AppField v-model="callForm.autoAnswerDelay" :disabled="!callForm.autoAnswer" placeholder="0" class="call-input" />
           <div class="form-two-col call-two-col">
             <div>
               <div class="call-label">Registration time (seconds)</div>
-              <v-text-field v-model="callForm.registrationTime" :disabled="!callForm.autoAnswer" placeholder="0" variant="outlined" density="compact" hide-details="auto" class="call-input" />
+              <AppField v-model="callForm.registrationTime" :disabled="!callForm.autoAnswer" placeholder="0" class="call-input" />
             </div>
             <div>
               <div class="call-label">Keep-alive (seconds)</div>
-              <v-text-field v-model="callForm.keepAlive" :disabled="!callForm.autoAnswer" placeholder="0" variant="outlined" density="compact" hide-details="auto" class="call-input" />
+              <AppField v-model="callForm.keepAlive" :disabled="!callForm.autoAnswer" placeholder="0" class="call-input" />
             </div>
           </div>
           <div class="call-label">Maximum call time (seconds)</div>
-          <v-text-field v-model="callForm.maxCallTime" :disabled="!callForm.autoAnswer" placeholder="0" variant="outlined" density="compact" hide-details="auto" class="call-input" />
+          <AppField v-model="callForm.maxCallTime" :disabled="!callForm.autoAnswer" placeholder="0" class="call-input" />
           <div class="call-toggle-row">
             <span>Dial Button</span>
-            <v-switch v-model="callForm.dialButton" color="success" density="compact" hide-details />
+            <v-switch v-model="callForm.dialButton" class="app-switch" density="compact" hide-details />
           </div>
           <div class="call-toggle-row">
             <span>External Dial Button</span>
-            <v-switch v-model="callForm.externalDialButton" color="success" density="compact" hide-details />
+            <v-switch v-model="callForm.externalDialButton" class="app-switch" density="compact" hide-details />
           </div>
           <div class="call-toggle-row">
             <span>Facial identification during the call</span>
-            <v-switch v-model="callForm.faceDuringCall" color="success" density="compact" hide-details />
+            <v-switch v-model="callForm.faceDuringCall" class="app-switch" density="compact" hide-details />
           </div>
           <div class="call-toggle-row">
             <span>Custom Icon</span>
-            <v-switch v-model="callForm.customIcon" color="success" density="compact" hide-details />
+            <v-switch v-model="callForm.customIcon" class="app-switch" density="compact" hide-details />
           </div>
           <div class="upload-row call-upload-row">
             <div class="upload-drop" :class="{ 'is-disabled': !callForm.customIcon }"><v-icon size="16">mdi-cloud-upload-outline</v-icon> Drag and drop files here</div>
@@ -316,10 +310,10 @@
           </div>
           <div class="call-toggle-row">
             <span>Automatic Call with unknown contact</span>
-            <v-switch v-model="callForm.unknownContact" color="success" density="compact" hide-details />
+            <v-switch v-model="callForm.unknownContact" class="app-switch" density="compact" hide-details />
           </div>
           <div class="call-label">Call after (seconds)</div>
-          <v-text-field v-model="callForm.callAfter" :disabled="!callForm.unknownContact" placeholder="0" variant="outlined" density="compact" hide-details="auto" class="call-input" />
+          <AppField v-model="callForm.callAfter" :disabled="!callForm.unknownContact" placeholder="0" class="call-input" />
         </v-card-text>
         <v-card-actions class="dialog-actions pa-0">
           <v-btn class="text-none action-cancel" variant="flat" height="44" @click="callDialog = false">Cancel</v-btn>
@@ -334,10 +328,10 @@
         <v-card-text class="dialog-body">
           <div class="call-toggle-row dial-toggle-row">
             <span>Dial Code</span>
-            <v-switch v-model="dialForm.enabled" color="success" density="compact" hide-details />
+            <v-switch v-model="dialForm.enabled" class="app-switch" density="compact" hide-details />
           </div>
           <div class="call-label">Dial code to unlock</div>
-          <v-text-field v-model="dialForm.code" :disabled="!dialForm.enabled" placeholder="0" variant="outlined" density="compact" hide-details="auto" class="call-input dial-input" />
+          <AppField v-model="dialForm.code" :disabled="!dialForm.enabled" placeholder="0" class="call-input dial-input" />
         </v-card-text>
         <v-card-actions class="dialog-actions pa-0">
           <v-btn class="text-none action-cancel" variant="flat" height="44" @click="dialCodeDialog = false">Cancel</v-btn>
@@ -352,15 +346,7 @@
         <v-card-text class="dialog-body make-call-body">
           <div class="make-call-field">
             <div class="call-label">Extension, SIP address, or peer IP</div>
-            <v-text-field
-              v-model="makeCallForm.target"
-              placeholder="7100 or user@example.com"
-              variant="outlined"
-              density="compact"
-              hide-details="auto"
-              class="call-input"
-              @keyup.enter="runMakeCall"
-            />
+            <AppField v-model="makeCallForm.target" placeholder="7100 or user@example.com" @keyup.enter="runMakeCall" class="call-input" />
           </div>
           <div class="make-call-actions">
             <v-btn
@@ -446,7 +432,7 @@
               </div>
               <v-switch
                 v-model="webPhoneForm.video"
-                color="success"
+                class="app-switch"
                 density="compact"
                 hide-details
                 :disabled="webPhone.isRegistered.value"
@@ -525,16 +511,7 @@
             <template v-else>
               <div class="call-label">Extension or SIP Address</div>
               <div class="web-phone-dial-row">
-                <v-text-field
-                  v-model="webPhoneForm.destination"
-                  placeholder="1001 or device@example.com"
-                  variant="outlined"
-                  density="compact"
-                  hide-details="auto"
-                  class="call-input mb-0"
-                  :disabled="!webPhone.isRegistered.value || webPhone.hasCall.value"
-                  @keyup.enter="startWebCall"
-                />
+                <AppField v-model="webPhoneForm.destination" :disabled="!webPhone.isRegistered.value || webPhone.hasCall.value" placeholder="1001 or device@example.com" @keyup.enter="startWebCall" class="call-input mb-0" />
                 <v-btn
                   icon="mdi-phone"
                   class="start-web-call"
@@ -578,11 +555,11 @@
         <v-card-title class="dialog-title">{{ contactForm.id ? 'Edit Contact' : 'Add Contact' }}</v-card-title>
         <v-card-text class="dialog-body">
           <FieldLabel text="Name" required />
-          <v-text-field v-model="contactForm.name" placeholder="Enter name" variant="outlined" density="compact" hide-details="auto" />
+          <AppField v-model="contactForm.name" placeholder="Enter name" />
           <FieldLabel text="Location" />
-          <v-text-field v-model="contactForm.location" placeholder="Location" variant="outlined" density="compact" hide-details="auto" />
+          <AppField v-model="contactForm.location" placeholder="Location" />
           <FieldLabel text="Server Address" required />
-          <v-text-field v-model="contactForm.serverAddress" placeholder="192.168.1.1" variant="outlined" density="compact" hide-details="auto" />
+          <AppField v-model="contactForm.serverAddress" placeholder="192.168.1.1" />
         </v-card-text>
         <v-card-actions class="dialog-actions pa-0">
           <v-btn class="text-none action-cancel" variant="flat" height="44" @click="contactDialog = false">Cancel</v-btn>
@@ -883,6 +860,59 @@ const filteredContacts = computed(() => {
 
 const paginatedIntercomRows = computed(() => paginate(filteredIntercomRows.value));
 const paginatedContacts = computed(() => paginate(filteredContacts.value));
+
+/**
+ * The two tabs, as data rather than two `v-tab` elements, so the shared
+ * `app-tab` strip can render them. Same values, same order.
+ */
+const tabOptions: Array<{ label: string; value: IntercomTab }> = [
+  { label: "Intercom", value: "intercom" },
+  { label: "Intercom Contacts", value: "contacts" },
+];
+
+/**
+ * The screen has TWO column sets, and it keeps them - this is the same pair the
+ * two `<thead>` blocks drew. `sortable: false` preserves the raw `v-table`'s
+ * behaviour, and no `weight` is set, so the layout is `TableMain`'s automatic
+ * one: the handoff draws no HID table and states no proportions.
+ */
+const tableHeaders = computed(() =>
+  activeTab.value === "intercom"
+    ? [
+        { title: "Name", value: "name", sortable: false },
+        { title: "Location", value: "location", sortable: false },
+        { title: "SIP Server Address", value: "serverAddress", sortable: false },
+        { title: "Operating Mode", value: "operatingMode", sortable: false },
+        { title: "Dial Code", value: "dialCode", sortable: false },
+        { title: "SIP Status", value: "status", sortable: false },
+        { title: "", value: "action-table", sortable: false },
+      ]
+    : [
+        { title: "Name", value: "name", sortable: false },
+        { title: "Location", value: "location", sortable: false },
+        { title: "SIP Server Address", value: "serverAddress", sortable: false },
+        { title: "Dial Code", value: "dialCode", sortable: false },
+        { title: "", value: "action-table", sortable: false },
+      ]
+);
+
+/**
+ * `TableMain` takes ONE item list, so the two `v-for` blocks become one. The
+ * intercom rows are keyed on their reader id (they have no `_rowKey` of their
+ * own, where contacts do), so one is supplied for the table's `item-value`.
+ */
+const visiblePageRows = computed(() =>
+  activeTab.value === "intercom"
+    ? paginatedIntercomRows.value.map((row) => ({ ...row, _rowKey: row.reader?._id }))
+    : paginatedContacts.value
+);
+
+/** The web-call button turns green when registered and amber on an incoming
+    call - the same two states the old `.web-call-button` modifiers drew. */
+const webPhoneButtonClass = computed(() => ({
+  "is-connected": webPhone.isRegistered.value,
+  "has-incoming-call": webPhone.callState.value === "incoming",
+}));
 const isPeerToPeerMode = computed(() => sipForm.operatingMode === "peer-to-peer");
 const areSipCredentialFieldsDisabled = computed(() => !sipForm.enabled || isPeerToPeerMode.value);
 const intercomDetailSections = computed(() => {
@@ -1561,13 +1591,6 @@ async function deleteContact() {
   }
 }
 
-function getStatusClass(status: string) {
-  if (status === "Connected") return "status-success";
-  if (status === "Disabled" || status === "Not connected") return "status-muted";
-  if (status === "Failed") return "status-error";
-  return "status-warning";
-}
-
 function getDialModeLabel(value: string) {
   if (value === "1") return "From the contact list";
   if (value === "2") return "Numeric Keypad + Contacts";
@@ -1661,7 +1684,7 @@ export default {
           <span>{{ label }}</span>
           <v-switch
             :model-value="modelValue"
-            color="success"
+            class="app-switch"
             density="compact"
             hide-details
             @update:model-value="$emit('update:modelValue', $event)"
@@ -1680,138 +1703,66 @@ export default {
   padding: 12px;
 }
 
-.top-bar {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  margin-bottom: 12px;
-}
 
 .toolbar-spacer {
   flex: 1 1 auto;
 }
 
-.top-placeholder {
-  width: 160px;
-}
 
-.web-call-button {
-  min-width: 160px;
-  background: #e5e7eb;
-  color: #0b2c40;
-  font-size: 12px;
+/*
+  The filter row sits INSIDE the card's extension, so it needs the card's own
+  side padding rather than the row's default bottom margin - same block as
+  panels 2, 4 and 5.
+*/
+.hid-intercom-filters {
+  margin: 0;
+  padding: 10px 14px;
 }
 
-.web-call-button.is-connected {
-  background: #d9f2e1;
-  color: #16743a;
+.hid-intercom-filters :deep(.app-field) {
+  max-width: 240px;
 }
 
-.web-call-button.has-incoming-call {
-  background: #1769aa;
-  color: #fff;
+/* The reader option now reads "Reader - Portal", so it needs more room than
+   the other filters. `AppSelect`'s root class IS `app-field`, so this has to
+   be more specific than the rule above rather than a `.app-select` one. */
+.hid-intercom-filters :deep(.app-field.reader-select) {
+  max-width: 320px;
 }
 
-.add-button {
+/*
+  The web-call button is the card's PRIMARY action, so its resting state is
+  `AppButton`'s own accent - it was a flat `#e5e7eb` grey, which read as
+  disabled next to every other screen's primary. Only the two STATE colours
+  are the screen's own, because the handoff draws no such states.
+*/
+.web-call-button {
   min-width: 160px;
-  background: #dedede;
-  color: #0b2c40;
-  font-size: 12px;
 }
 
-.search-input {
-  max-width: 220px;
+.web-call-button.is-connected {
+  background: var(--ok);
+  color: var(--on-accent-strong);
 }
 
-.reader-input {
-  width: 300px;
-  max-width: 36vw;
+.web-call-button.has-incoming-call {
+  background: var(--warn);
+  color: var(--on-accent-strong);
 }
 
-.status-input {
-  max-width: 160px;
-}
 
-.table-card {
-  display: flex;
-  flex-direction: column;
-  min-height: 520px;
-  overflow: hidden;
-  background: #fff;
-  border-color: #e2e5e9;
-  border-radius: 6px;
-}
 
-.table-refresh {
-  display: flex;
-  align-items: center;
-  min-height: 42px;
-  padding: 0 12px;
-  background: #f6f6f6;
-  color: #0b2c40;
-  font-size: 12px;
-}
 
-.intercom-tabs {
-  border-bottom: 1px solid #e5e7eb;
-}
 
-.intercom-tabs :deep(.v-tab) {
-  flex: 1 1 0;
-  min-width: 0;
-  font-size: 12px;
-  text-transform: none;
-}
 
-.intercom-tabs :deep(.v-tab--selected) {
-  color: #0b4ea2;
-}
 
-.table-body {
-  position: relative;
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow: auto;
-}
 
-.table-body :deep(table) {
-  table-layout: fixed;
-  min-width: 840px;
-}
 
-.table-body :deep(th) {
-  height: 48px;
-  color: #0b2c40;
-  font-size: 12px;
-  font-weight: 500;
-}
 
-.table-body :deep(td) {
-  height: 54px;
-  color: #1f2937;
-  font-size: 12px;
-}
 
-.table-footer {
-  display: flex;
-  flex: 0 0 auto;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 4px;
-  min-height: 42px;
-  padding: 0 12px;
-  background: #f6f6f6;
-  color: #0b2c40;
-  font-size: 12px;
-}
 
-.empty-state {
-  display: grid;
-  min-height: 180px;
-  place-items: center;
-  color: #667085;
-  font-size: 13px;
-}
+
+
 
 .row-menu {
   min-width: 160px;
@@ -1819,37 +1770,21 @@ export default {
 }
 
 .link-text {
-  color: #1565c0;
+  color: var(--accent-text);
 }
 
 .success-text {
-  color: #2faf4a;
+  color: var(--ok);
 }
 
-.status-success {
-  background: #46b85a;
-  color: #fff;
-}
 
-.status-muted {
-  background: #a7a7a7;
-  color: #fff;
-}
 
-.status-warning {
-  background: #fff2cc;
-  color: #8a5b00;
-}
 
-.status-error {
-  background: #f9d0d0;
-  color: #991b1b;
-}
 
 .form-dialog,
 .detail-dialog {
   overflow: hidden;
-  background: #fff;
+  background: var(--card);
 }
 
 .sip-settings-dialog {
@@ -1860,8 +1795,8 @@ export default {
 .dialog-title {
   min-height: 48px;
   padding: 14px 16px;
-  background: #f4f4f4;
-  color: #0d1720;
+  background: var(--thead);
+  color: var(--text);
   font-size: 14px;
   font-weight: 700;
 }
@@ -1882,13 +1817,13 @@ export default {
 
 .field-label {
   margin: 12px 0 7px;
-  color: #344054;
+  color: var(--text2);
   font-size: 10px;
   font-weight: 500;
 }
 
 .field-label span {
-  color: #d92d20;
+  color: var(--err);
 }
 
 .sip-settings-dialog .field-label {
@@ -1897,14 +1832,14 @@ export default {
 
 .sip-label {
   margin: 12px 0 6px;
-  color: #263542;
+  color: var(--text);
   font-size: 10px;
   font-weight: 500;
   line-height: 1.2;
 }
 
 .sip-label span {
-  color: #e5484d;
+  color: var(--err);
 }
 
 .sip-switch-row {
@@ -1914,10 +1849,10 @@ export default {
   min-height: 40px;
   margin-bottom: 12px;
   padding: 0 12px;
-  border: 1px solid #dfe3e8;
+  border: 1px solid var(--border);
   border-radius: 3px;
-  background: #fff;
-  color: #25313b;
+  background: var(--card);
+  color: var(--text);
   font-size: 12px;
 }
 
@@ -1935,44 +1870,17 @@ export default {
 }
 
 .sip-section-switch small {
-  color: #667085;
+  color: var(--muted);
   font-size: 10px;
   line-height: 1.4;
 }
 
-.sip-switch-row :deep(.v-switch) {
-  flex: 0 0 auto;
-}
 
-.sip-switch-row :deep(.v-selection-control) {
-  min-height: 32px;
-}
 
-.sip-switch-row :deep(.v-selection-control__wrapper) {
-  height: 28px;
-}
 
-.sip-switch-row :deep(.v-switch__track) {
-  height: 24px;
-  min-width: 42px;
-  opacity: 1;
-}
 
-.sip-switch-row :deep(.v-switch__thumb) {
-  background-color: #fff !important;
-  color: #fff !important;
-  height: 20px;
-  width: 20px;
-}
 
-.sip-switch-row :deep(.v-selection-control--dirty .v-switch__thumb) {
-  background-color: #fff !important;
-  color: #fff !important;
-}
 
-.sip-switch-row :deep(.v-selection-control--dirty .v-switch__thumb::before) {
-  background-color: #fff !important;
-}
 
 .toggle-field {
   display: flex;
@@ -1981,27 +1889,27 @@ export default {
   min-height: 38px;
   margin-bottom: 8px;
   padding: 0 10px;
-  border: 1px solid #e5e7eb;
+  border: 1px solid var(--border);
   border-radius: 3px;
-  color: #344054;
+  color: var(--text2);
   font-size: 12px;
 }
 
 .sip-input :deep(.v-field) {
   min-height: 40px;
   border-radius: 3px;
-  background: #fff;
+  background: var(--card);
   font-size: 12px;
   box-shadow: none;
 }
 
 .sip-input :deep(.v-field__outline) {
   --v-field-border-opacity: 1;
-  color: #dfe3e8;
+  color: var(--border);
 }
 
 .sip-input :deep(.v-field--focused .v-field__outline) {
-  color: #9db7d1;
+  color: var(--border);
 }
 
 .sip-input :deep(.v-field__outline__start),
@@ -2014,28 +1922,28 @@ export default {
   padding-top: 0;
   padding-bottom: 0;
   padding-inline: 12px;
-  color: #4a5562;
+  color: var(--text2);
   font-size: 12px;
 }
 
 .sip-input :deep(.v-field__append-inner) {
   min-height: 40px;
-  color: #697586;
+  color: var(--muted);
 }
 
 .sip-input :deep(.v-field--disabled) {
-  background: #f7f8fa;
+  background: var(--hover);
   opacity: 1;
 }
 
 .sip-input :deep(.v-field--disabled .v-field__input),
 .sip-input :deep(.v-field--disabled input::placeholder) {
-  color: #98a2b3;
+  color: var(--muted);
   opacity: 1;
 }
 
 .sip-input :deep(input::placeholder) {
-  color: #697586;
+  color: var(--muted);
   opacity: 1;
 }
 
@@ -2050,7 +1958,7 @@ export default {
   width: 100%;
   grid-template-columns: 1fr 1fr;
   margin-bottom: 6px;
-  border: 1px solid #dfe3e8;
+  border: 1px solid var(--border);
   border-radius: 3px;
   overflow: hidden;
 }
@@ -2059,20 +1967,20 @@ export default {
   min-width: 0;
   min-height: 40px;
   border-radius: 0;
-  color: #667085;
+  color: var(--muted);
   font-size: 12px;
   font-weight: 400;
   letter-spacing: 0;
 }
 
 .mode-toggle :deep(.v-btn--active) {
-  background: #082b40;
-  color: #fff;
+  background: var(--text);
+  color: var(--card);
 }
 
 .mode-toggle :deep(.v-btn--disabled) {
-  background: #f7f8fa;
-  color: #98a2b3;
+  background: var(--hover);
+  color: var(--muted);
   opacity: 1;
 }
 
@@ -2080,13 +1988,9 @@ export default {
   margin-top: 0;
 }
 
-.sip-settings-dialog :deep(.v-selection-control-group--inline) {
-  gap: 34px;
-  min-height: 34px;
-}
 
 .sip-settings-dialog :deep(.v-radio .v-label) {
-  color: #344054;
+  color: var(--text2);
   font-size: 12px;
 }
 
@@ -2108,14 +2012,14 @@ export default {
 
 .call-label {
   margin: 8px 0 6px;
-  color: #1f2937;
+  color: var(--text);
   font-size: 10px;
   font-weight: 500;
   letter-spacing: 0;
 }
 
 .call-label span {
-  color: #d92d20;
+  color: var(--err);
 }
 
 .call-radio-list {
@@ -2126,29 +2030,12 @@ export default {
   width: 100%;
 }
 
-.call-radio-list :deep(.v-selection-control-group) {
-  gap: 8px;
-}
 
-.call-radio-list :deep(.v-selection-control) {
-  min-height: 36px;
-  margin-bottom: 0;
-  padding: 0 10px;
-  border: 1px solid #dfe3e8;
-  border-radius: 3px;
-  background: #fff;
-}
 
-.call-radio-list :deep(.v-selection-control__wrapper) {
-  width: 24px;
-}
 
-.call-radio-list :deep(.v-selection-control__input) {
-  transform: scale(0.9);
-}
 
 .call-radio-list :deep(.v-label) {
-  color: #475467;
+  color: var(--text2);
   font-size: 11px;
   letter-spacing: 0;
   opacity: 1;
@@ -2161,34 +2048,17 @@ export default {
   min-height: 36px;
   margin-bottom: 10px;
   padding: 0 10px;
-  border: 1px solid #e5e7eb;
+  border: 1px solid var(--border);
   border-radius: 3px;
-  background: #fff;
-  color: #1f2937;
+  background: var(--card);
+  color: var(--text);
   font-size: 11px;
   letter-spacing: 0;
 }
 
-.call-toggle-row :deep(.v-selection-control) {
-  min-height: 28px;
-}
 
-.call-toggle-row :deep(.v-selection-control__wrapper) {
-  height: 28px;
-}
 
-.call-toggle-row :deep(.v-switch__track) {
-  height: 22px;
-  min-width: 40px;
-  opacity: 1;
-}
 
-.call-toggle-row :deep(.v-switch__thumb) {
-  width: 18px;
-  height: 18px;
-  background-color: #fff !important;
-  color: #fff !important;
-}
 
 .call-input {
   margin-bottom: 8px;
@@ -2197,13 +2067,13 @@ export default {
 .call-input :deep(.v-field) {
   min-height: 38px;
   border-radius: 3px;
-  background: #fff;
+  background: var(--card);
   box-shadow: none;
 }
 
 .call-input :deep(.v-field__outline) {
   --v-field-border-opacity: 1;
-  color: #cfd5dc;
+  color: var(--border);
 }
 
 .call-input :deep(.v-field__input) {
@@ -2211,19 +2081,19 @@ export default {
   padding-top: 0;
   padding-bottom: 0;
   padding-inline: 12px;
-  color: #4a4f55;
+  color: var(--text2);
   font-size: 12px;
   letter-spacing: 0;
 }
 
 .call-input :deep(.v-field--disabled) {
-  background: #f7f8fa;
+  background: var(--hover);
   opacity: 1;
 }
 
 .call-input :deep(.v-field--disabled .v-field__input),
 .call-input :deep(.v-field--disabled input::placeholder) {
-  color: #98a2b3;
+  color: var(--muted);
   opacity: 1;
 }
 
@@ -2265,17 +2135,17 @@ export default {
 .make-call-danger {
   min-height: 46px;
   border-radius: 0;
-  color: #fff;
+  color: var(--card);
   font-size: 14px;
   letter-spacing: 0;
 }
 
 .make-call-primary {
-  background: #06324f;
+  background: var(--text);
 }
 
 .make-call-danger {
-  background: #d91345;
+  background: var(--err);
 }
 
 .make-call-status {
@@ -2286,27 +2156,27 @@ export default {
 }
 
 .make-call-status.is-success {
-  background: #e7f7ec;
-  color: #17833b;
+  background: var(--ok-bg);
+  color: var(--ok);
 }
 
 .make-call-status.is-warning {
-  background: #fff7db;
-  color: #8a5b00;
+  background: var(--warn-bg);
+  color: var(--warn);
 }
 
 .make-call-status.is-error {
-  background: #fde8e8;
-  color: #b42318;
+  background: var(--err-bg);
+  color: var(--err);
 }
 
 .make-call-status.is-info {
-  background: #edf4ff;
-  color: #075fb7;
+  background: var(--accent-soft);
+  color: var(--accent-text);
 }
 
 .make-call-note {
-  color: #5d6673;
+  color: var(--text2);
   font-size: 13px;
   line-height: 1.45;
 }
@@ -2317,7 +2187,7 @@ export default {
   max-height: min(90vh, 760px);
   max-width: 94vw;
   overflow: hidden;
-  background: #fff;
+  background: var(--card);
   flex-direction: column;
 }
 
@@ -2342,23 +2212,23 @@ export default {
 }
 
 .web-phone-status.ready {
-  background: #d9f2e1;
-  color: #16743a;
+  background: var(--ok-bg);
+  color: var(--ok);
 }
 
 .web-phone-status.incoming {
-  background: #dcecff;
-  color: #125c9a;
+  background: var(--accent-soft);
+  color: var(--accent-text);
 }
 
 .web-phone-status.failed {
-  background: #fce2e2;
-  color: #a92222;
+  background: var(--err-bg);
+  color: var(--err);
 }
 
 .web-phone-status.idle {
-  background: #e5e7eb;
-  color: #5d6673;
+  background: var(--border);
+  color: var(--text2);
 }
 
 .web-phone-body {
@@ -2372,12 +2242,12 @@ export default {
 
 .web-phone-settings {
   padding-right: 24px;
-  border-right: 1px solid #e5e7eb;
+  border-right: 1px solid var(--border);
 }
 
 .web-phone-section-title {
   margin-bottom: 14px;
-  color: #0d1720;
+  color: var(--text);
   font-size: 13px;
   font-weight: 700;
 }
@@ -2388,9 +2258,9 @@ export default {
   align-items: center;
   justify-content: center;
   padding: 18px;
-  border: 1px solid #dce2e8;
+  border: 1px solid var(--border);
   border-radius: 6px;
-  color: #5d6673;
+  color: var(--text2);
   flex-direction: column;
   font-size: 12px;
   gap: 12px;
@@ -2398,15 +2268,15 @@ export default {
 }
 
 .sip-account-state.is-error {
-  border-color: #f0c7c7;
-  background: #fff8f8;
-  color: #a92222;
+  border-color: var(--err-bg);
+  background: var(--err-bg);
+  color: var(--err);
 }
 
 .sip-account-retry {
   min-width: 104px;
-  border-color: #aeb8c2;
-  color: #344054;
+  border-color: var(--muted);
+  color: var(--text2);
 }
 
 .sip-account-summary {
@@ -2414,9 +2284,9 @@ export default {
   min-height: 96px;
   align-items: center;
   padding: 16px;
-  border: 1px solid #dce2e8;
+  border: 1px solid var(--border);
   border-radius: 6px;
-  background: #f8fafc;
+  background: var(--hover);
   grid-template-columns: minmax(0, 1fr) auto;
   gap: 18px;
 }
@@ -2429,12 +2299,12 @@ export default {
 }
 
 .sip-account-label {
-  color: #667085;
+  color: var(--muted);
   font-size: 11px;
 }
 
 .sip-account-extension {
-  color: #0d1720;
+  color: var(--text);
   font-size: 24px;
   line-height: 1.1;
 }
@@ -2442,7 +2312,7 @@ export default {
 .sip-account-address {
   max-width: 170px;
   overflow: hidden;
-  color: #536273;
+  color: var(--text2);
   font-size: 11px;
   text-align: right;
   text-overflow: ellipsis;
@@ -2456,15 +2326,15 @@ export default {
 .web-phone-connect {
   min-height: 42px;
   margin-top: 14px;
-  background: #082b40;
-  color: #fff;
+  background: var(--text);
+  color: var(--card);
 }
 
 .web-phone-disconnect {
   min-height: 42px;
   margin-top: 14px;
-  border-color: #aeb8c2;
-  color: #344054;
+  border-color: var(--muted);
+  color: var(--text2);
 }
 
 .web-phone-console {
@@ -2479,9 +2349,9 @@ export default {
   min-height: 260px;
   overflow: hidden;
   place-items: center;
-  border: 1px solid #d7dde4;
+  border: 1px solid var(--border);
   border-radius: 6px;
-  background: #102a3b;
+  background: var(--text);
 }
 
 .remote-video {
@@ -2504,7 +2374,7 @@ export default {
   align-items: center;
   justify-content: center;
   padding: 28px;
-  color: #fff;
+  color: var(--card);
   flex-direction: column;
   gap: 10px;
   text-align: center;
@@ -2518,7 +2388,7 @@ export default {
 .audio-call-state span {
   max-width: 100%;
   overflow: hidden;
-  color: #c9d7e1;
+  color: var(--border);
   font-size: 11px;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -2536,13 +2406,13 @@ export default {
   width: 42px;
   height: 38px;
   border-radius: 4px;
-  background: #2a9b50;
-  color: #fff;
+  background: var(--ok);
+  color: var(--card);
 }
 
 .hangup-web-call,
 .reject-call {
-  background: #c9293d;
+  background: var(--err);
 }
 
 .incoming-call-actions {
@@ -2555,11 +2425,11 @@ export default {
 .answer-call,
 .reject-call {
   min-height: 42px;
-  color: #fff;
+  color: var(--card);
 }
 
 .answer-call {
-  background: #2a9b50;
+  background: var(--ok);
 }
 
 .active-call-controls {
@@ -2601,28 +2471,28 @@ export default {
   justify-content: center;
   gap: 6px;
   min-height: 38px;
-  border: 1px dashed #c9d2dc;
-  color: #475467;
+  border: 1px dashed var(--border);
+  color: var(--text2);
   font-size: 11px;
   letter-spacing: 0;
 }
 
 .upload-drop.is-disabled {
-  background: #fafafa;
-  color: #98a2b3;
+  background: var(--thead);
+  color: var(--muted);
 }
 
 .upload-button {
   width: 40px;
   height: 38px;
   border-radius: 3px;
-  background: #1976d2;
-  color: #fff;
+  background: var(--accent-text);
+  color: var(--card);
 }
 
 .upload-button.v-btn--disabled {
-  background: #eceff3;
-  color: #c0c6cf;
+  background: var(--hover);
+  color: var(--border);
   opacity: 1;
 }
 
@@ -2632,7 +2502,7 @@ export default {
   justify-content: space-between;
   min-height: 32px;
   margin: 0 0 10px;
-  color: #475467;
+  color: var(--text2);
   font-size: 11px;
 }
 
@@ -2643,12 +2513,12 @@ export default {
 }
 
 .call-file-name .v-icon {
-  color: #2fb344;
+  color: var(--ok);
 }
 
 .detail-section-title {
   margin: 14px 0 8px;
-  color: #0d1720;
+  color: var(--text);
   font-size: 13px;
   font-weight: 700;
 }
@@ -2663,12 +2533,12 @@ export default {
   justify-content: space-between;
   gap: 16px;
   min-height: 26px;
-  color: #667085;
+  color: var(--muted);
   font-size: 11px;
 }
 
 .detail-row strong {
-  color: #101828;
+  color: var(--text);
   font-weight: 500;
   text-align: right;
 }
@@ -2676,22 +2546,25 @@ export default {
 .dialog-actions {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  border-top: 1px solid #e5e7eb;
+  border-top: 1px solid var(--border);
 }
 
 .sip-settings-dialog .dialog-actions {
   min-height: 46px;
 }
 
+/* The split footer bar, as panels 2, 4 and 5 keep it: the SHAPE is the
+   screen's own (the handoff draws no such bar); only the colours change. The
+   navy was a fixed hex that sat on the dark card unchanged. */
 .action-cancel {
-  background: #fff;
-  color: #0d1720;
+  background: var(--card);
+  color: var(--text2);
   border-radius: 0;
 }
 
 .action-submit {
-  background: #082b40;
-  color: #fff;
+  background: var(--accent-strong);
+  color: var(--on-accent-strong);
   border-radius: 0;
 }
 
@@ -2700,15 +2573,8 @@ export default {
 }
 
 @media (max-width: 900px) {
-  .top-bar {
-    align-items: stretch;
-    flex-direction: column;
-  }
-
-  .top-placeholder,
-  .reader-input,
-  .search-input,
-  .status-input {
+  .hid-intercom-filters :deep(.app-field),
+  .hid-intercom-filters :deep(.app-select) {
     width: 100%;
     max-width: none;
   }
@@ -2726,7 +2592,7 @@ export default {
     padding-right: 0;
     padding-bottom: 20px;
     border-right: 0;
-    border-bottom: 1px solid #e5e7eb;
+    border-bottom: 1px solid var(--border);
   }
 
 }