@7365admin1/layer-common 3.2.2-staging.158 → 3.2.2-staging.159

package/components/AccessCardAddForm.vue

@@ -1,8 +1,8 @@
 <template>
-  <v-card width="100%">
-    <v-toolbar>
+  <v-card width="100%" class="screen-modal">
+    <v-toolbar class="screen-dialog-bar">
       <v-row no-gutters class="fill-height px-6" align="center" justify="space-between">
-        <span class="font-weight-bold text-h5 text-capitalize">
+        <span class="screen-card-title text-capitalize">
           {{ prop.mode }} Access Card
         </span>
         <v-btn-toggle
@@ -19,7 +19,10 @@
         </v-btn-toggle>
       </v-row>
     </v-toolbar>
-    <v-card-text style="max-height: 100vh; overflow-y: auto" class="pa-0">
+    <!-- The height cap stays ON THE BODY. `.screen-modal` caps the CARD, which
+         only reaches the glass inside a dialog's flex column; mounted on its own
+         the footer would fall below the fold. -->
+    <v-card-text class="screen-modal__body pa-0" style="max-height: 100vh">
       <!-- Bulk Upload Mode -->
       <template v-if="uploadMode === 'bulk'">
         <v-row no-gutters class="px-6 pt-4 pb-2">
@@ -63,12 +66,12 @@
 
               <!-- Column Guide -->
               <div class="mt-3">
-                <p class="text-caption font-weight-bold text-grey-darken-2 mb-1 text-uppercase">
+                <p class="text-caption font-weight-bold text-fontgray mb-1 text-uppercase">
                   Template Column Guide
                 </p>
                 <v-table density="compact" class="text-caption rounded border">
                   <thead>
-                    <tr class="bg-grey-lighten-4">
+                    <tr class="template-guide-head">
                       <th class="text-left text-caption font-weight-bold py-1 px-2">Column</th>
                       <th class="text-left text-caption font-weight-bold py-1 px-2">Format / Accepted Values</th>
                       <th class="text-left text-caption font-weight-bold py-1 px-2">Example</th>
@@ -77,8 +80,8 @@
                   <tbody>
                     <tr v-for="col in templateColumnGuide" :key="col.name">
                       <td class="py-1 px-2 font-weight-medium" style="white-space: nowrap">{{ col.name }}</td>
-                      <td class="py-1 px-2 text-grey-darken-1">{{ col.format }}</td>
-                      <td class="py-1 px-2 text-grey-darken-2">{{ col.example }}</td>
+                      <td class="py-1 px-2 text-fontgray">{{ col.format }}</td>
+                      <td class="py-1 px-2 text-fontgray">{{ col.example }}</td>
                     </tr>
                   </tbody>
                 </v-table>
@@ -306,7 +309,7 @@
                 ></span>
                 <span class="d-flex align-center">
                   Anti Pass Back
-                  <v-icon class="ml-1" color="grey" size="small"
+                  <v-icon class="ml-1 text-fontgray" size="small"
                     >mdi-help-circle</v-icon
                   >
                   <v-checkbox
@@ -382,39 +385,25 @@
         </v-row>
       </v-form>
     </v-card-text>
-    <v-toolbar density="compact">
-      <v-row no-gutters>
-        <v-col cols="6">
-          <v-btn
-            tile
-            block
-            variant="text"
-            class="text-none"
-            size="48"
-            @click="cancel"
-            :disabled="disable"
-          >
-            Cancel
-          </v-btn>
-        </v-col>
-
-        <v-col cols="6">
-          <v-btn
-            tile
-            block
-            variant="flat"
-            color="black"
-            class="text-none"
-            size="48"
-            :disabled="(uploadMode === 'single' ? !validForm : !bulkFile || !entryPassTemplate.id || templateLoading) || disable"
-            @click="submit"
-            :loading="disable"
-          >
-            Submit
-          </v-btn>
-        </v-col>
-      </v-row>
-    </v-toolbar>
+    <v-card-actions class="screen-modal__footer">
+      <v-btn
+        variant="flat"
+        class="text-none screen-btn-ghost"
+        :disabled="disable"
+        @click="cancel"
+      >
+        Cancel
+      </v-btn>
+      <v-btn
+        variant="flat"
+        class="text-none screen-btn-primary"
+        :disabled="(uploadMode === 'single' ? !validForm : !bulkFile || !entryPassTemplate.id || templateLoading) || disable"
+        :loading="disable"
+        @click="submit"
+      >
+        Submit
+      </v-btn>
+    </v-card-actions>
   </v-card>
 </template>
 <script setup lang="ts">
@@ -813,3 +802,14 @@ async function submit() {
   }
 }
 </script>
+
+<style scoped>
+/*
+ * The template guide's header row. `bg-grey-lighten-4` was a fixed near-white,
+ * i.e. a bright band across a dark card; `--thead` is the design's own table
+ * head wash and is defined per theme.
+ */
+.template-guide-head {
+  background: var(--thead);
+}
+</style>

package/components/AccessCardPreviewDialog.vue

@@ -9,16 +9,16 @@
 
   <!-- Assign to Person Dialog -->
   <v-dialog :model-value="showAssignForm" width="420" persistent>
-    <v-card width="100%">
-      <v-toolbar density="compact" color="surface">
+    <v-card width="100%" class="screen-modal">
+      <v-toolbar density="compact" class="screen-dialog-bar">
         <v-row no-gutters class="fill-height px-4" align="center">
           <span class="font-weight-bold">Assign Card to Person</span>
         </v-row>
       </v-toolbar>
 
       <v-card-text class="pa-4">
-        <div class="text-caption text-grey mb-4">
-          Card: <strong class="text-body-2 text-black">{{ selectedCardInUnit?.cardNo }}</strong>
+        <div class="text-caption text-fontgray mb-4">
+          Card: <strong class="text-body-2">{{ selectedCardInUnit?.cardNo }}</strong>
         </div>
 
         <!-- Person Type Filter -->
@@ -38,9 +38,7 @@
         </v-btn-toggle> -->
 
         <!-- Person Selector -->
-        <div class="text-caption font-weight-bold mb-1 text-uppercase text-grey-darken-1">
-          Person <span class="text-error">*</span>
-        </div>
+        <InputLabel title="Person" required class="mb-1" />
         <v-select
           v-model="assignPerson"
           :items="filteredPeopleItems"
@@ -59,7 +57,7 @@
           </template>
           <template #selection="{ item }">
             <span>{{ item.raw.name }}</span>
-            <v-chip size="x-small" class="ml-2" color="grey" variant="tonal">
+            <v-chip size="x-small" class="ml-2" variant="tonal">
               {{ personTypeLabel(item.raw) }}
             </v-chip>
           </template>
@@ -67,41 +65,30 @@
         <p v-if="assignError" class="text-error text-caption mt-2">{{ assignError }}</p>
       </v-card-text>
 
-      <v-toolbar density="compact">
-        <v-row no-gutters>
-          <v-col cols="6" class="pa-0">
-            <v-btn
-              block
-              variant="text"
-              class="text-none"
-              height="48"
-              @click="cancelAssign"
-            >
-              Cancel
-            </v-btn>
-          </v-col>
-          <v-col cols="6" class="pa-0">
-            <v-btn
-              block
-              variant="flat"
-              color="black"
-              class="text-none"
-              height="48"
-              :disabled="!assignPerson || assignLoading"
-              :loading="assignLoading"
-              @click="confirmAssign"
-            >
-              Assign
-            </v-btn>
-          </v-col>
-        </v-row>
-      </v-toolbar>
+      <v-card-actions class="screen-modal__footer">
+        <v-btn
+          variant="flat"
+          class="text-none screen-btn-ghost"
+          @click="cancelAssign"
+        >
+          Cancel
+        </v-btn>
+        <v-btn
+          variant="flat"
+          class="text-none screen-btn-primary"
+          :disabled="!assignPerson || assignLoading"
+          :loading="assignLoading"
+          @click="confirmAssign"
+        >
+          Assign
+        </v-btn>
+      </v-card-actions>
     </v-card>
   </v-dialog>
 
   <v-dialog :model-value="modelValue" width="450" persistent>
-    <v-card width="100%">
-      <v-card-text style="max-height: 100vh; overflow-y: auto" class="pb-0">
+    <v-card width="100%" class="screen-modal">
+      <v-card-text class="screen-modal__body pb-0">
         <v-row no-gutters class="mb-4">
           <v-col cols="12">
             <strong>Building:</strong> {{ unit?.block?.name ?? "N/A" }}
@@ -130,7 +117,7 @@
                 {{ card.cardNo }}
               </v-chip>
             </div>
-            <span v-else class="text-caption text-grey ml-1">None</span>
+            <span v-else class="text-caption text-fontgray ml-1">None</span>
           </v-col>
 
           <!-- Damage Physical -->
@@ -142,7 +129,7 @@
                 :key="card._id"
                 size="small"
                 class="mr-1 mb-1"
-                color="deep-orange"
+                color="warning"
                 :variant="selectedCardInUnit?._id === card._id ? 'flat' : 'tonal'"
                 style="cursor: pointer"
                 @click="toggleCard(card)"
@@ -150,7 +137,7 @@
                 {{ card.cardNo }}
               </v-chip>
             </div>
-            <span v-else class="text-caption text-grey ml-1">None</span>
+            <span v-else class="text-caption text-fontgray ml-1">None</span>
           </v-col>
 
           <!-- Available Non-Physical -->
@@ -170,7 +157,7 @@
                 {{ card.cardNo }}
               </v-chip>
             </div>
-            <span v-else class="text-caption text-grey ml-1">None</span>
+            <span v-else class="text-caption text-fontgray ml-1">None</span>
           </v-col>
 
           <!-- Assigned Physical -->
@@ -190,7 +177,7 @@
                 {{ card.cardNo }}
               </v-chip>
             </div>
-            <span v-else class="text-caption text-grey ml-1">None</span>
+            <span v-else class="text-caption text-fontgray ml-1">None</span>
           </v-col>
 
           <!-- Assigned Non-Physical -->
@@ -210,7 +197,7 @@
                 {{ card.cardNo }}
               </v-chip>
             </div>
-            <span v-else class="text-caption text-grey ml-1">None</span>
+            <span v-else class="text-caption text-fontgray ml-1">None</span>
           </v-col>
 
           <!-- Replaced Physical -->
@@ -222,7 +209,7 @@
                 :key="card._id"
                 size="small"
                 class="mr-1 mb-1"
-                :color="selectedCardInUnit?._id === card._id ? 'orange' : 'orange'"
+                color="warning"
                 :variant="selectedCardInUnit?._id === card._id ? 'flat' : 'tonal'"
                 style="cursor: pointer"
                 @click="toggleCard(card)"
@@ -230,7 +217,7 @@
                 {{ card.cardNo }}
               </v-chip>
             </div>
-            <span v-else class="text-caption text-grey ml-1">None</span>
+            <span v-else class="text-caption text-fontgray ml-1">None</span>
           </v-col>
 
           <!-- Replaced Non-Physical -->
@@ -242,7 +229,7 @@
                 :key="card._id"
                 size="small"
                 class="mr-1 mb-1"
-                :color="selectedCardInUnit?._id === card._id ? 'orange' : 'orange'"
+                color="warning"
                 :variant="selectedCardInUnit?._id === card._id ? 'flat' : 'tonal'"
                 style="cursor: pointer"
                 @click="toggleCard(card)"
@@ -250,7 +237,7 @@
                 {{ card.cardNo }}
               </v-chip>
             </div>
-            <span v-else class="text-caption text-grey ml-1">None</span>
+            <span v-else class="text-caption text-fontgray ml-1">None</span>
           </v-col>
 
           <!-- Deleted Physical -->
@@ -262,7 +249,7 @@
                 :key="card._id"
                 size="small"
                 class="mr-1 mb-1"
-                :color="selectedCardInUnit?._id === card._id ? 'red' : 'red'"
+                color="error"
                 :variant="selectedCardInUnit?._id === card._id ? 'flat' : 'tonal'"
                 style="cursor: pointer"
                 @click="toggleCard(card)"
@@ -270,7 +257,7 @@
                 {{ card.cardNo }}
               </v-chip>
             </div>
-            <span v-else class="text-caption text-grey ml-1">None</span>
+            <span v-else class="text-caption text-fontgray ml-1">None</span>
           </v-col>
 
           <!-- Deleted Non-Physical -->
@@ -282,7 +269,7 @@
                 :key="card._id"
                 size="small"
                 class="mr-1 mb-1"
-                :color="selectedCardInUnit?._id === card._id ? 'red' : 'red'"
+                color="error"
                 :variant="selectedCardInUnit?._id === card._id ? 'flat' : 'tonal'"
                 style="cursor: pointer"
                 @click="toggleCard(card)"
@@ -290,40 +277,29 @@
                 {{ card.cardNo }}
               </v-chip>
             </div>
-            <span v-else class="text-caption text-grey ml-1">None</span>
+            <span v-else class="text-caption text-fontgray ml-1">None</span>
           </v-col>
         </v-row>
       </v-card-text>
 
-      <v-toolbar class="pa-0" density="compact">
-        <v-row no-gutters>
-          <v-col cols="6" class="pa-0">
+      <v-card-actions class="screen-modal__footer">
+        <v-btn
+          variant="flat"
+          class="text-none screen-btn-ghost"
+          @click="emit('update:modelValue', false)"
+        >
+          Close
+        </v-btn>
+        <v-menu>
+          <template #activator="{ props }">
             <v-btn
-              block
-              variant="text"
-              class="text-none"
-              size="large"
-              height="48"
-              @click="emit('update:modelValue', false)"
+              variant="flat"
+              class="text-none screen-btn-primary"
+              v-bind="props"
             >
-              Close
+              More actions
             </v-btn>
-          </v-col>
-          <v-col cols="6" class="pa-0">
-            <v-menu>
-              <template #activator="{ props }">
-                <v-btn
-                  block
-                  variant="flat"
-                  color="black"
-                  class="text-none"
-                  height="48"
-                  v-bind="props"
-                  tile
-                >
-                  More actions
-                </v-btn>
-              </template>
+          </template>
               <v-list class="pa-0">
                 <v-list-item
                   v-if="canAssignToPerson && isSelectedCardAvailable"
@@ -349,7 +325,7 @@
                 </v-list-item>
                 <v-list-item
                   @click="emit('delete')"
-                  class="text-red"
+                  class="text-error"
                   :disabled="!isSelectedCardDeletable"
                   v-if="canDeleteAccessCard"
                 >
@@ -358,10 +334,8 @@
                   </v-list-item-title>
                 </v-list-item>
               </v-list>
-            </v-menu>
-          </v-col>
-        </v-row>
-      </v-toolbar>
+        </v-menu>
+      </v-card-actions>
     </v-card>
   </v-dialog>
 </template>

package/components/ClientDetailForm.vue

@@ -85,7 +85,7 @@
             <svg class="chevron" viewBox="0 0 10 6" fill="none">
               <path
                 d="M1 1l4 4 4-4"
-                stroke="#6B7280"
+                stroke="currentColor"
                 stroke-width="1.4"
                 stroke-linecap="round"
               />
@@ -107,7 +107,7 @@
             <svg class="chevron" viewBox="0 0 10 6" fill="none">
               <path
                 d="M1 1l4 4 4-4"
-                stroke="#6B7280"
+                stroke="currentColor"
                 stroke-width="1.4"
                 stroke-linecap="round"
               />
@@ -132,7 +132,7 @@
             <svg class="chevron" viewBox="0 0 10 6" fill="none">
               <path
                 d="M1 1l4 4 4-4"
-                stroke="#6B7280"
+                stroke="currentColor"
                 stroke-width="1.4"
                 stroke-linecap="round"
               />
@@ -150,7 +150,7 @@
             <svg class="chevron" viewBox="0 0 10 6" fill="none">
               <path
                 d="M1 1l4 4 4-4"
-                stroke="#6B7280"
+                stroke="currentColor"
                 stroke-width="1.4"
                 stroke-linecap="round"
               />
@@ -175,7 +175,7 @@
             <svg class="chevron" viewBox="0 0 10 6" fill="none">
               <path
                 d="M1 1l4 4 4-4"
-                stroke="#6B7280"
+                stroke="currentColor"
                 stroke-width="1.4"
                 stroke-linecap="round"
               />
@@ -200,13 +200,13 @@
                 width="14"
                 height="12"
                 rx="2"
-                stroke="#9CA3AF"
+                stroke="currentColor"
                 stroke-width="1.3"
               />
-              <path d="M1 7h14" stroke="#9CA3AF" stroke-width="1.3" />
+              <path d="M1 7h14" stroke="currentColor" stroke-width="1.3" />
               <path
                 d="M5 1v3M11 1v3"
-                stroke="#9CA3AF"
+                stroke="currentColor"
                 stroke-width="1.3"
                 stroke-linecap="round"
               />
@@ -224,13 +224,13 @@
                 width="14"
                 height="12"
                 rx="2"
-                stroke="#9CA3AF"
+                stroke="currentColor"
                 stroke-width="1.3"
               />
-              <path d="M1 7h14" stroke="#9CA3AF" stroke-width="1.3" />
+              <path d="M1 7h14" stroke="currentColor" stroke-width="1.3" />
               <path
                 d="M5 1v3M11 1v3"
-                stroke="#9CA3AF"
+                stroke="currentColor"
                 stroke-width="1.3"
                 stroke-linecap="round"
               />
@@ -581,12 +581,12 @@ watch(
 }
 
 .form-wrap {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-family: var(--font-sans);
   font-size: 14px;
-  color: #111827;
-  background: #fff;
-  border: 1px solid #e5e7eb;
-  border-radius: 10px;
+  color: var(--text);
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--r-card);
   padding: 24px 28px 32px;
 }
 
@@ -596,17 +596,17 @@ watch(
   align-items: flex-start;
   justify-content: space-between;
   padding-bottom: 18px;
-  border-bottom: 1px solid #e5e7eb;
+  border-bottom: 1px solid var(--border);
   margin-bottom: 22px;
 }
 .header h2 {
   font-size: 20px;
   font-weight: 700;
-  color: #111827;
+  color: var(--text);
 }
 .header p {
   font-size: 13px;
-  color: #2563eb;
+  color: var(--accent-text);
   margin-top: 2px;
 }
 .actions {
@@ -618,7 +618,7 @@ watch(
 .btn-cancel,
 .btn-submit {
   border: none;
-  border-radius: 20px;
+  border-radius: var(--r-pill);
   padding: 9px 22px;
   font-size: 13px;
   font-weight: 600;
@@ -626,15 +626,18 @@ watch(
   transition: opacity 0.15s;
 }
 .btn-cancel {
-  background: #e5e7eb;
-  color: #374151;
+  background: var(--border);
+  color: var(--text2);
 }
 .btn-cancel:hover {
   opacity: 0.85;
 }
+/* `.btn-submit` was an exact copy of `.btn-cancel` - same grey fill, same ink -
+   so the form's primary action was indistinguishable from the one that throws
+   the edit away. It takes the design's accent fill and its white-safe pair. */
 .btn-submit {
-  background: #e5e7eb;
-  color: #374151;
+  background: var(--accent-strong);
+  color: var(--on-accent-strong);
 }
 .btn-submit:hover {
   opacity: 0.85;
@@ -647,7 +650,7 @@ watch(
 .section h3 {
   font-size: 15px;
   font-weight: 700;
-  color: #111827;
+  color: var(--text);
   margin-bottom: 14px;
 }
 
@@ -669,29 +672,29 @@ watch(
 }
 .field label {
   font-size: 12px;
-  color: #6b7280;
+  color: var(--text2);
 }
 
 .field input[type='text'],
 .field input[type='email'] {
   height: 38px;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
   padding: 0 12px;
   font-size: 13px;
-  color: #111827;
-  background: #fff;
+  color: var(--text);
+  background: var(--card);
   outline: none;
 }
 .field input:focus {
-  border-color: #9ca3af;
+  border-color: var(--muted);
 }
 .field input::placeholder {
-  color: #9ca3af;
+  color: var(--muted);
 }
 .field input:disabled {
-  background: #f9fafb;
-  color: #6b7280;
+  background: var(--bg);
+  color: var(--text2);
 }
 
 /* ===== SELECT ===== */
@@ -701,18 +704,18 @@ watch(
 .select-wrap select {
   width: 100%;
   height: 38px;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
   padding: 0 30px 0 12px;
   font-size: 13px;
-  color: #111827;
-  background: #fff;
+  color: var(--text);
+  background: var(--card);
   appearance: none;
   cursor: pointer;
   outline: none;
 }
 .select-wrap select:focus {
-  border-color: #9ca3af;
+  border-color: var(--muted);
 }
 .select-wrap .chevron {
   position: absolute;
@@ -733,12 +736,12 @@ watch(
 .date-input input {
   width: 100%;
   height: 38px;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
   padding: 0 34px 0 12px;
   font-size: 13px;
-  color: #6b7280;
-  background: #f9fafb;
+  color: var(--text2);
+  background: var(--bg);
   outline: none;
 }
 .date-input svg {
@@ -750,7 +753,7 @@ watch(
 /* ===== HINT ===== */
 .hint {
   font-size: 11px;
-  color: #9ca3af;
+  color: var(--text2);
   line-height: 1.4;
 }
 .hint-below {
@@ -766,13 +769,13 @@ watch(
 }
 .app-list li {
   font-size: 13px;
-  color: #374151;
+  color: var(--text2);
 }
 
 /* ===== SITE TABLE ===== */
 .site-table {
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner);
   overflow: hidden;
 }
 .site-table table {
@@ -784,12 +787,12 @@ watch(
   padding: 10px 16px;
   text-align: left;
   font-weight: 600;
-  color: #374151;
-  background: #f9fafb;
-  border-bottom: 1px solid #e5e7eb;
+  color: var(--text2);
+  background: var(--bg);
+  border-bottom: 1px solid var(--border);
 }
 .site-table tbody tr {
-  border-bottom: 1px solid #f3f4f6;
+  border-bottom: 1px solid var(--border);
 }
 .site-table tbody tr:last-child {
   border-bottom: none;
@@ -799,14 +802,14 @@ watch(
 }
 .site-table .td-name {
   font-weight: 500;
-  color: #111827;
+  color: var(--text);
 }
 .site-table .td-muted {
-  color: #6b7280;
+  color: var(--text2);
 }
 .site-table .empty {
   text-align: center;
-  color: #9ca3af;
+  color: var(--text2);
   padding: 24px 0 !important;
 }
 .phone-input {
@@ -816,7 +819,7 @@ watch(
 
 .phone-input .prefix {
   width: 80px;
-  background: #f3f4f6;
+  background: var(--bg);
 }
 
 .phone-input .number {
@@ -826,6 +829,28 @@ watch(
 .error {
   margin-top: 4px;
   font-size: 12px;
-  color: #ef4444;
+  color: var(--err);
+}
+
+/*
+ * MEASURED at 360: the form overflowed the viewport by 147px in both themes.
+ * Its two-column grid, its 28px side padding and its header row are all fixed,
+ * and the component carries no media query at all - so on a phone the right
+ * column, the Submit button and half the site table sat off screen. One
+ * breakpoint, matching the shell's own mobile padding.
+ */
+@media (max-width: 600px) {
+  .form-wrap {
+    padding: 16px 14px 22px;
+  }
+
+  .row {
+    grid-template-columns: 1fr;
+  }
+
+  .header {
+    flex-direction: column;
+    gap: 12px;
+  }
 }
 </style>

package/components/EntryPassInformation.vue

@@ -60,8 +60,8 @@
         </v-alert>
         <template v-else>
           <!-- Generating / loading state -->
-          <div v-if="generating || cardsLoading" class="d-flex align-center ga-2 mt-3 text-caption text-grey-darken-1">
-            <v-progress-circular size="14" width="2" indeterminate color="grey" />
+          <div v-if="generating || cardsLoading" class="d-flex align-center ga-2 mt-3 text-caption text-fontgray">
+            <v-progress-circular size="14" width="2" indeterminate />
             <span>{{ generating ? 'Generating QR passes...' : 'Checking availability...' }}</span>
           </div>
           <!-- 0 available after all loading -->
@@ -79,7 +79,7 @@
           <template v-else>
             <div class="d-flex align-center justify-space-between mt-3">
               <InputLabel title="Quantity" />
-              <span v-if="availableCount !== null" class="text-caption text-grey">
+              <span v-if="availableCount !== null" class="text-caption text-fontgray">
                 {{ availableCount }} available
               </span>
             </div>
@@ -133,6 +133,7 @@
               :color="isBarcodeScanningActive ? 'success' : 'primary'"
               variant="outlined"
               block
+              class="text-none"
               prepend-icon="mdi-barcode-scan"
               @click="toggleBarcodeScanning"
             >
@@ -145,6 +146,7 @@
               variant="outlined"
               color="primary"
               block
+              class="text-none"
               prepend-icon="mdi-camera"
               @click="openCameraDialog"
             >
@@ -224,11 +226,11 @@
       @after-leave="stopCamera"
     >
       <v-container class="d-flex justify-center" style="max-height: 90vh">
-        <v-card elevation="2" class="d-flex flex-column align-center pa-2 w-100">
+        <v-card class="screen-modal d-flex flex-column align-center pa-2 w-100">
           <v-toolbar color="transparent">
-            <v-card-title class="text-h5">Scan Card</v-card-title>
+            <v-card-title>Scan Card</v-card-title>
             <v-spacer />
-            <v-btn icon="mdi-close" color="grey-darken-1" @click="closeCameraDialog" />
+            <v-btn icon="mdi-close" class="screen-modal__close" @click="closeCameraDialog" />
           </v-toolbar>
 
           <div class="position-relative w-100" style="aspect-ratio: 4/3; background: #000">

package/components/HidReaderForm.vue

@@ -1,12 +1,12 @@
 <template>
   <v-dialog v-model="dialogModel" max-width="430" persistent>
-    <v-card class="hid-reader-form" rounded="lg">
+    <v-card class="hid-reader-form screen-modal">
       <v-card-title class="form-title">
         {{ mode === "edit" ? "Edit Reader" : "Add Reader" }}
       </v-card-title>
 
-      <v-card-text class="form-body">
-        <div class="field-label">HID Reader Name <span>*</span></div>
+      <v-card-text class="form-body screen-modal__body">
+        <InputLabel title="HID Reader Name" required class="mb-1" />
         <v-text-field
           v-model="draft.name"
           aria-label="HID Reader Name"
@@ -17,7 +17,7 @@
           class="mb-3"
         />
 
-        <div class="field-label">Base URL / IP address <span>*</span></div>
+        <InputLabel title="Base URL / IP address" required class="mb-1" />
         <v-text-field
           v-model="draft.baseUrl"
           aria-label="Base URL / IP address"
@@ -28,7 +28,7 @@
           class="mb-3"
         />
 
-        <div class="field-label">Location <span>*</span></div>
+        <InputLabel title="Location" required class="mb-1" />
         <v-text-field
           v-model="draft.location"
           aria-label="Location"
@@ -39,13 +39,13 @@
           class="mb-3"
         />
 
-        <div class="field-label">Monitor Path <span>*</span></div>
+        <InputLabel title="Monitor Path" required class="mb-1" />
         <v-btn-toggle v-model="monitorEnabled" mandatory divided class="monitor-toggle mb-3">
           <v-btn :value="true" class="text-none">Enable</v-btn>
           <v-btn :value="false" class="text-none">Disable</v-btn>
         </v-btn-toggle>
 
-        <div class="field-label">Username <span>*</span></div>
+        <InputLabel title="Username" required class="mb-1" />
         <v-text-field
           v-model="draft.username"
           aria-label="Username"
@@ -56,7 +56,7 @@
           class="mb-3"
         />
 
-        <div class="field-label">Confirm Password <span>*</span></div>
+        <InputLabel title="Confirm Password" required class="mb-1" />
         <v-text-field
           v-model="draft.password"
           :type="showPassword ? 'text' : 'password'"
@@ -86,7 +86,7 @@
           {{ discoveryError }}
         </v-alert>
 
-        <div class="field-label mt-3">Device ID <span>*</span></div>
+        <InputLabel title="Device ID" required class="mt-3 mb-1" />
         <v-text-field
           v-model="draft.deviceId"
           aria-label="Device ID"
@@ -98,7 +98,7 @@
           readonly
         />
 
-        <div class="field-label">HID Portal <span>*</span></div>
+        <InputLabel title="HID Portal" required class="mb-1" />
         <v-select
           v-model="draft.portalId"
           :items="portals"
@@ -113,19 +113,17 @@
         />
       </v-card-text>
 
-      <v-card-actions class="form-actions pa-0">
+      <v-card-actions class="screen-modal__footer">
         <v-btn
-          class="text-none action-cancel"
+          class="text-none screen-btn-ghost"
           variant="flat"
-          height="48"
           @click="close"
         >
           Cancel
         </v-btn>
         <v-btn
-          class="text-none action-submit"
+          class="text-none screen-btn-primary"
           variant="flat"
-          height="48"
           :loading="loading"
           :disabled="mode === 'add' && (!draft.deviceId || !draft.portalId)"
           @click="submit"
@@ -290,28 +288,18 @@ function submit() {
   overflow: hidden;
 }
 
+/* Type comes from `.screen-modal .v-card-title`; only the header strip's own
+   padding and rule stay here. `#ececec` was a fixed near-white line, i.e.
+   invisible on a light card and a bright scratch across a dark one. */
 .form-title {
-  font-size: 14px;
-  font-weight: 700;
   padding: 12px 16px;
-  border-bottom: 1px solid #ececec;
+  border-bottom: 1px solid var(--border);
 }
 
 .form-body {
   padding: 18px 16px 20px;
 }
 
-.field-label {
-  color: #4f5a66;
-  font-size: 12px;
-  font-weight: 600;
-  margin-bottom: 6px;
-}
-
-.field-label span {
-  color: #e53935;
-}
-
 .monitor-toggle {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -322,32 +310,11 @@ function submit() {
   height: 36px;
 }
 
-.form-actions {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-}
-
-.action-cancel {
-  background: #ffffff;
-  color: #111827;
-  border-radius: 0;
-}
-
-.action-submit {
-  background: #062d42;
-  color: #ffffff;
-  border-radius: 0;
-}
-
 @media (max-width: 600px) {
   .form-body {
     padding: 14px 12px 16px;
   }
 
-  .form-actions {
-    grid-template-columns: 1fr;
-  }
-
   :global(.v-dialog > .v-overlay__content) {
     max-width: calc(100vw - 24px) !important;
     margin: 12px !important;

package/components/IncidentReport/IncidentInformation.vue

@@ -2,7 +2,7 @@
   <v-row no-gutters class="px-5 pt-4">
     <!-- Site Information -->
     <v-col cols="12" class="border-b pb-3 mb-5">
-      <p class="mb-2" style="font-size: 17px; font-weight: 600">
+      <p class="mb-2 screen-card-title">
         Site Information
       </p>
       <v-row no-gutters class="mt-5">
@@ -36,7 +36,7 @@
 
     <!-- Place of Incident -->
     <v-col cols="12" class="border-b pb-5 mb-5 mt-1">
-      <p class="mb-2" style="font-size: 17px; font-weight: 600">
+      <p class="mb-2 screen-card-title">
         Place of Incident
       </p>
       <p class="my-1 text-h6 text-capitalize">
@@ -46,7 +46,7 @@
 
     <!-- Incident Type / Time -->
     <v-col cols="12" class="border-b pb-5 mb-5 mt-1">
-      <p class="mb-2" style="font-size: 17px; font-weight: 600">
+      <p class="mb-2 screen-card-title">
         Incident Type / Time
       </p>
       <v-row no-gutters class="mt-5">
@@ -106,7 +106,7 @@
 
     <!-- Response/Submission From (1st Contact) -->
     <v-col cols="12" class="border-b pb-5 mb-5 mt-1">
-      <p class="mb-2" style="font-size: 17px; font-weight: 600">
+      <p class="mb-2 screen-card-title">
         Response/Submission From (1st Contact)
       </p>
       <v-row no-gutters class="mt-5">
@@ -130,7 +130,7 @@
 
     <!-- Name of Informant/Complainant Information -->
     <v-col cols="12" class="border-b pb-5 mb-5 mt-1">
-      <p class="mb-2" style="font-size: 17px; font-weight: 600">
+      <p class="mb-2 screen-card-title">
         Name of Informant/Complainant Information
       </p>
       <v-row no-gutters class="d-flex align-center mt-5">
@@ -146,7 +146,7 @@
             <v-icon
               v-if="incidentInformation?.complaintInfo?.nric"
               size="small"
-              color="blue"
+              color="primary"
               class="cursor-pointer"
               @click="toggleNRICComplainant"
             >
@@ -172,7 +172,7 @@
 
     <!-- Name of Recipient of Complaint (1st Contact) -->
     <v-col cols="12" class="border-b pb-5 mb-5 mt-1">
-      <p class="mb-2" style="font-size: 17px; font-weight: 600">
+      <p class="mb-2 screen-card-title">
         Name of Recipient of Complaint (1st Contact)
       </p>
       <v-row no-gutters class="d-flex align-center mt-5">
@@ -188,7 +188,7 @@
             <v-icon
               v-if="incidentInformation?.recipientOfComplaint?.nric"
               size="small"
-              color="blue"
+              color="primary"
               class="cursor-pointer"
               @click="toggleNRICRecipient"
             >
@@ -214,7 +214,7 @@
 
     <!-- Complaint Received through -->
     <v-col cols="12" class="border-b pb-5 mb-5 mt-1">
-      <p class="mb-2" style="font-size: 17px; font-weight: 600">
+      <p class="mb-2 screen-card-title">
         Complaint Received through
       </p>
       <v-col cols="12">
@@ -238,7 +238,7 @@
 
     <!-- Brief Description -->
     <v-col cols="12" class="mb-10">
-      <p class="mb-2" style="font-size: 17px; font-weight: 600">
+      <p class="mb-2 screen-card-title">
         Brief Description
       </p>
       <p class="mt-5 text-h6 text-capitalize">

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.2-staging.158",
+  "version": "3.2.2-staging.159",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "//files": "What a consumer extending this layer actually loads. Without this npm ships the whole working tree - the changesets, the CI workflows, the render harness in tools/ and any scratch directory that happened to exist at publish time. Nuxt resolves a layer by directory, so every runtime directory below has to stay listed; adding a new top-level runtime directory means adding it here too.",