@7365admin1/layer-common 3.2.1 → 3.2.2-staging.100

package/components/DashboardMain.vue

@@ -203,46 +203,36 @@
 
   <section v-else class="unified-dashboard pb-8">
     <!-- ── Header ──────────────────────────────────────────────────────────── -->
-    <div
-      class="d-flex flex-column flex-md-row align-md-start justify-space-between ga-5 mb-6"
+    <PageHeader
+      :title="dashboardTitle"
+      :subtitle="currentSiteName || 'Selected site'"
+      subtitle-icon="mdi-map-marker"
     >
-      <div>
-        <h1 class="text-h5 font-weight-black text-blue-grey-darken-4 mb-0">
-          {{ dashboardTitle }}
-        </h1>
-        <div class="d-flex align-center text-blue-grey ga-1 mt-2 text-caption">
-          <v-icon icon="mdi-map-marker" size="16" />
-          <span>{{ currentSiteName || "Selected site" }}</span>
-        </div>
-      </div>
-
-      <div
-        v-if="showHeaderActions"
-        class="d-flex flex-wrap align-center justify-md-end ga-3"
-      >
-        <v-btn
-          variant="outlined"
-          color="blue-grey-darken-1"
-          class="text-none font-weight-bold"
-          prepend-icon="mdi-tune-variant"
+      <!--
+        The design's three actions: two 38px ghost buttons and the accent
+        segmented control. Same dialog, same export menu, same range model -
+        `Customize Dashboard` and `Export` shorten to the labels the prototype
+        prints, and the export menu keeps both of its formats.
+      -->
+      <template v-if="showHeaderActions" #actions>
+        <AppButton
+          variant="ghost"
+          icon="mdi-tune-variant"
           @click="openCustomizeDialog"
         >
-          Customize Dashboard
-        </v-btn>
+          Customize
+        </AppButton>
 
         <v-menu>
           <template #activator="{ props: menuProps }">
-            <v-btn
+            <AppButton
               v-bind="menuProps"
-              variant="outlined"
-              color="blue-grey-darken-1"
-              class="text-none font-weight-bold"
-              append-icon="mdi-chevron-down"
-              :loading="isExporting"
+              variant="ghost"
+              icon="mdi-download-outline"
               :disabled="isExporting"
             >
               Export
-            </v-btn>
+            </AppButton>
           </template>
 
           <v-list density="compact" border rounded="lg" elevation="3">
@@ -251,36 +241,9 @@
           </v-list>
         </v-menu>
 
-        <v-btn-toggle
-          v-model="selectedRange"
-          mandatory
-          density="comfortable"
-          divided
-          variant="outlined"
-          class="bg-white"
-          style="border-radius: 8px; border-color: #d9e1e8"
-        >
-          <v-btn
-            v-for="range in rangeOptions"
-            :key="range.value"
-            :value="range.value"
-            class="text-none"
-            size="small"
-            :style="
-              selectedRange === range.value
-                ? {
-                    backgroundColor: '#e2e8f0',
-                    color: '#0b2f47',
-                    fontWeight: '600',
-                  }
-                : { backgroundColor: 'transparent', color: '#64748b' }
-            "
-          >
-            {{ range.label }}
-          </v-btn>
-        </v-btn-toggle>
-      </div>
-    </div>
+        <AppSegmented v-model="selectedRange" :options="rangeOptions" />
+      </template>
+    </PageHeader>
 
     <v-progress-linear
       v-if="finalLoading"
@@ -300,22 +263,24 @@
         lg="3"
         class="d-flex"
       >
-        <v-card
-          flat
-          border
-          rounded="lg"
-          class="pa-4 flex-grow-1"
-          style="min-height: 158px"
+        <!--
+          The same figures the tile has always shown, in the arrangement the
+          handoff draws them: icon and label on one row, the number with its
+          percentage pill beside it, the sub-line under both. The filter menu
+          and the facility "View All" keep their place at the end of the first
+          row and do exactly what they did.
+        -->
+        <AppKpiTile
+          :icon="card.icon"
+          :tint="card.tint"
+          :color="card.color"
+          :label="card.title"
+          :value="card.value"
+          :chip="kpiChipText(card)"
+          :down="Number(card.percentage) < 0"
+          :sub="card.meta"
         >
-          <div class="d-flex align-start justify-space-between">
-            <div
-              class="d-inline-flex align-center justify-center rounded-lg"
-              style="height: 28px; width: 28px; flex-shrink: 0"
-              :style="{ backgroundColor: card.tint }"
-            >
-              <v-icon :icon="card.icon" :color="card.color" size="15" />
-            </div>
-
+          <template v-if="card.filter || card.key === 'facilityBookings'" #action>
             <v-menu v-if="card.filter" v-model="filterMenus[card.key]">
               <template #activator="{ props: menuProps }">
                 <v-btn
@@ -359,61 +324,24 @@
             >
               View All
             </button>
-          </div>
+          </template>
 
-          <div class="mt-6 w-100">
-            <p
-              class="text-caption font-weight-black text-uppercase text-blue-grey-darken-2 mb-3"
-            >
-              {{ card.title }}
-            </p>
-            <template
-              v-if="
-                card.key === 'supplyAlert' && Array.isArray(card.raw?.items)
-              "
-            >
-              <div class="d-flex flex-column ga-2 mt-2">
-                <div
-                  v-for="item in card.raw.items"
-                  :key="item._id || item.name"
-                  class="d-flex justify-space-between text-body-2 text-blue-grey-darken-4 font-weight-medium"
-                >
-                  <span>{{ item.name }}</span>
-                  <span class="text-blue-grey">Balance: {{ item.qty }}</span>
-                </div>
-              </div>
-            </template>
-            <template v-else>
-              <div class="d-flex align-center mb-3" style="min-height: 31px">
-                <span class="text-h5 font-weight-black text-blue-grey-darken-4">
-                  {{ card.value }}
-                </span>
-              </div>
-              <div class="d-flex align-center flex-wrap ga-2">
-                <span v-if="card.meta" class="text-caption text-blue-grey">{{
-                  card.meta
-                }}</span>
-                <v-chip
-                  :color="card.percentage >= 0 ? 'success' : 'error'"
-                  size="x-small"
-                  variant="flat"
-                  class="font-weight-bold"
-                >
-                  <v-icon
-                    :icon="
-                      card.percentage >= 0
-                        ? 'mdi-arrow-up-right'
-                        : 'mdi-arrow-down-right'
-                    "
-                    size="13"
-                    start
-                  />
-                  {{ Math.abs(card.percentage) }}%
-                </v-chip>
+          <!-- The supply tile lists items instead of counting one figure. -->
+          <template
+            v-if="card.key === 'supplyAlert' && Array.isArray(card.raw?.items)"
+          >
+            <div class="d-flex flex-column ga-2">
+              <div
+                v-for="item in card.raw.items"
+                :key="item._id || item.name"
+                class="d-flex justify-space-between text-body-2 text-high-emphasis font-weight-medium"
+              >
+                <span>{{ item.name }}</span>
+                <span class="text-medium-emphasis">Balance: {{ item.qty }}</span>
               </div>
-            </template>
-          </div>
-        </v-card>
+            </div>
+          </template>
+        </AppKpiTile>
       </v-col>
     </v-row>
 
@@ -421,12 +349,10 @@
     <v-card
       v-if="isWidgetVisible('activity')"
       flat
-      border
-      rounded="lg"
-      class="px-5 pt-4 pb-3 mt-3"
+      class="dashboard-card px-5 pt-4 pb-3 mt-3"
     >
       <div class="d-flex align-center justify-space-between">
-        <h2 class="text-body-1 font-weight-black text-blue-grey-darken-4 mb-0">
+        <h2 class="dashboard-card-title mb-0">
           {{ activityTitle }}
         </h2>
       </div>
@@ -444,7 +370,7 @@
             :y1="tick"
             :x2="chartWidth - 20"
             :y2="tick"
-            style="stroke: #e9eef2; stroke-width: 1"
+            style="stroke: rgba(var(--v-theme-on-surface), 0.12); stroke-width: 1"
           />
           <text
             v-for="label in chartYLabels"
@@ -453,7 +379,7 @@
             :y="label.y"
             text-anchor="end"
             alignment-baseline="middle"
-            style="fill: #7e8b96; font-size: 11px; font-weight: 500"
+            style="fill: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)); font-size: 11px; font-weight: 500"
           >
             {{ label.text }}
           </text>
@@ -483,7 +409,7 @@
             :cx="point.x"
             :cy="point.y"
             r="4"
-            style="fill: #ff9b9b; stroke: #fff; stroke-width: 2"
+            style="fill: #ff9b9b; stroke: rgb(var(--v-theme-surface)); stroke-width: 2"
           />
           <circle
             v-for="point in secondaryDots"
@@ -491,7 +417,7 @@
             :cx="point.x"
             :cy="point.y"
             r="4"
-            style="fill: #e53935; stroke: #fff; stroke-width: 2"
+            style="fill: #e53935; stroke: rgb(var(--v-theme-surface)); stroke-width: 2"
           />
           <text
             v-for="label in chartAxisLabels"
@@ -499,7 +425,7 @@
             :x="label.x"
             y="246"
             text-anchor="middle"
-            style="fill: #7e8b96; font-size: 12px; font-weight: 600"
+            style="fill: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)); font-size: 12px; font-weight: 600"
           >
             {{ label.text }}
           </text>
@@ -507,7 +433,7 @@
 
         <div class="d-flex align-center justify-center ga-5 mt-2">
           <span
-            class="d-inline-flex align-center ga-2 text-caption font-weight-bold text-blue-grey"
+            class="d-inline-flex align-center ga-2 text-caption font-weight-bold text-medium-emphasis"
           >
             <span
               class="rounded-circle"
@@ -521,7 +447,7 @@
             {{ primaryLegendLabel }}
           </span>
           <span
-            class="d-inline-flex align-center ga-2 text-caption font-weight-bold text-blue-grey"
+            class="d-inline-flex align-center ga-2 text-caption font-weight-bold text-medium-emphasis"
           >
             <span
               class="rounded-circle"
@@ -558,18 +484,16 @@
               v-for="item in taskScheduleItems"
               :key="item.id"
               flat
-              border
-              rounded="lg"
-              class="pa-3"
+              class="dashboard-row-card pa-3"
             >
               <div class="d-flex align-center flex-wrap ga-3">
                 <div class="flex-grow-1" style="min-width: 0">
                   <div
-                    class="text-body-2 font-weight-bold text-blue-grey-darken-4 text-truncate"
+                    class="text-body-2 font-weight-bold text-high-emphasis text-truncate"
                   >
                     {{ item.title }}
                   </div>
-                  <div class="text-caption text-blue-grey mt-1 text-truncate">
+                  <div class="text-caption text-medium-emphasis mt-1 text-truncate">
                     {{ item.subtitle
                     }}<template v-if="item.subtitle && item.time">
                       &bull; </template
@@ -577,7 +501,7 @@
                   </div>
                 </div>
                 <div
-                  class="d-flex align-center ga-2 text-caption text-blue-grey"
+                  class="d-flex align-center ga-2 text-caption text-medium-emphasis"
                 >
                   <AvatarMain :name="item.person" :size="30" />
                   <span class="text-truncate" style="max-width: 100px">{{
@@ -624,25 +548,22 @@
               v-for="item in staffStatusItems"
               :key="item.id"
               flat
-              border
-              rounded="lg"
-              class="pa-3"
+              class="dashboard-row-card pa-3"
             >
               <div class="d-flex align-start ga-3">
                 <AvatarMain :name="item.name" :size="32" />
                 <div class="flex-grow-1" style="min-width: 0">
                   <div
-                    class="text-body-2 font-weight-bold text-blue-grey-darken-4 text-truncate"
+                    class="text-body-2 font-weight-bold text-high-emphasis text-truncate"
                   >
                     {{ item.name }}
                   </div>
-                  <div class="text-caption text-blue-grey mt-1 text-truncate">
+                  <div class="text-caption text-medium-emphasis mt-1 text-truncate">
                     {{ item.role }}
                   </div>
                 </div>
                 <v-chip
                   size="small"
-                  color="blue-grey-darken-1"
                   variant="tonal"
                   label
                   class="ml-auto flex-shrink-0 font-weight-bold"
@@ -666,13 +587,13 @@
             <div
               v-for="item in feedbackItems"
               :key="item.id"
-              class="d-flex align-center justify-space-between"
+              class="d-flex align-center justify-space-between dashboard-feedback-row"
               style="
                 padding: 16px 20px;
-                border: 1px solid #e2e8f0;
+                border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
                 border-radius: 12px;
                 margin-bottom: 12px;
-                background-color: #ffffff;
+                background-color: rgb(var(--v-theme-surface-bright));
                 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
               "
             >
@@ -682,12 +603,12 @@
                     display: block;
                     font-size: 15px;
                     font-weight: 700;
-                    color: #0b2f47;
+                    color: rgb(var(--v-theme-on-surface));
                     margin-bottom: 4px;
                   "
                   >{{ item.title }}</strong
                 >
-                <span style="font-size: 13px; color: #94a3b8">{{
+                <span style="font-size: 13px; color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity))">{{
                   item.subtitle
                 }}</span>
               </div>
@@ -696,7 +617,7 @@
                 style="flex: 1; display: flex; align-items: center; gap: 12px"
               >
                 <AvatarMain :name="item.person" :size="36" />
-                <span style="font-size: 14px; color: #64748b">{{
+                <span style="font-size: 14px; color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity))">{{
                   item.person
                 }}</span>
               </div>
@@ -721,9 +642,9 @@
                   variant="outlined"
                   class="text-none font-weight-medium"
                   size="small"
-                  color="#3b82f6"
+                  color="primary"
                   style="
-                    border-color: #e2e8f0;
+                    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
                     border-radius: 8px;
                     padding: 0 16px;
                     height: 32px;
@@ -967,7 +888,7 @@
       <v-col v-if="isWidgetVisible('activePatrol')" cols="12" lg="6">
         <div class="dashboard-card dashboard-panel figma-panel">
           <div class="figma-panel-header">
-            <h2>ACTIVE PATROL</h2>
+            <h2>Active Patrol</h2>
             <button
               class="figma-panel-action"
               type="button"
@@ -1026,9 +947,9 @@
                     variant="outlined"
                     class="text-none font-weight-medium"
                     size="small"
-                    color="#3b82f6"
+                    color="primary"
                     style="
-                      border-color: #e2e8f0;
+                      border-color: rgba(var(--v-border-color), var(--v-border-opacity));
                       border-radius: 8px;
                       padding: 0 16px;
                       height: 32px;
@@ -1047,7 +968,7 @@
       <v-col v-if="isWidgetVisible('staffStatus')" cols="12" lg="6">
         <div class="dashboard-card dashboard-panel figma-panel">
           <div class="figma-panel-header">
-            <h2>STAFF STATUS</h2>
+            <h2>Staff Status</h2>
             <button
               class="figma-panel-action"
               type="button"
@@ -1064,10 +985,10 @@
                 class="d-flex align-center justify-space-between"
                 style="
                   padding: 16px 20px;
-                  border: 1px solid #e2e8f0;
+                  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
                   border-radius: 12px;
                   margin-bottom: 12px;
-                  background-color: #ffffff;
+                  background-color: rgb(var(--v-theme-surface-bright));
                   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
                 "
               >
@@ -1087,14 +1008,14 @@
                         display: block;
                         font-size: 15px;
                         font-weight: 700;
-                        color: #0b2f47;
+                        color: rgb(var(--v-theme-on-surface));
                         margin-bottom: 4px;
                       "
                       >{{
                         item.userName || item.personName || "Unassigned"
                       }}</strong
                     >
-                    <span style="font-size: 13px; color: #94a3b8">{{
+                    <span style="font-size: 13px; color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity))">{{
                       item.role || item.designation || "Officer"
                     }}</span>
                   </div>
@@ -1131,13 +1052,13 @@
             <div
               v-for="item in feedbackItems"
               :key="item.id"
-              class="d-flex align-center justify-space-between"
+              class="d-flex align-center justify-space-between dashboard-feedback-row"
               style="
                 padding: 16px 20px;
-                border: 1px solid #e2e8f0;
+                border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
                 border-radius: 12px;
                 margin-bottom: 12px;
-                background-color: #ffffff;
+                background-color: rgb(var(--v-theme-surface-bright));
                 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
               "
             >
@@ -1147,12 +1068,12 @@
                     display: block;
                     font-size: 15px;
                     font-weight: 700;
-                    color: #0b2f47;
+                    color: rgb(var(--v-theme-on-surface));
                     margin-bottom: 4px;
                   "
                   >{{ item.title }}</strong
                 >
-                <span style="font-size: 13px; color: #94a3b8">{{
+                <span style="font-size: 13px; color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity))">{{
                   item.subtitle
                 }}</span>
               </div>
@@ -1161,7 +1082,7 @@
                 style="flex: 1; display: flex; align-items: center; gap: 12px"
               >
                 <AvatarMain :name="item.person" :size="36" />
-                <span style="font-size: 14px; color: #64748b">{{
+                <span style="font-size: 14px; color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity))">{{
                   item.person
                 }}</span>
               </div>
@@ -1186,9 +1107,9 @@
                   variant="outlined"
                   class="text-none font-weight-medium"
                   size="small"
-                  color="#3b82f6"
+                  color="primary"
                   style="
-                    border-color: #e2e8f0;
+                    border-color: rgba(var(--v-border-color), var(--v-border-opacity));
                     border-radius: 8px;
                     padding: 0 16px;
                     height: 32px;
@@ -1211,10 +1132,10 @@
           class="d-flex align-start justify-space-between pa-6 pb-4 border-b"
         >
           <div>
-            <div class="text-h6 font-weight-black text-blue-grey-darken-4">
+            <div class="text-h6 font-weight-black text-high-emphasis">
               Customize Dashboard
             </div>
-            <div class="text-caption text-blue-grey mt-1">
+            <div class="text-caption text-medium-emphasis mt-1">
               Select which widgets to display on your dashboard
             </div>
           </div>
@@ -1240,7 +1161,6 @@
           <div class="d-flex justify-end mt-3 mb-1">
             <v-btn
               variant="text"
-              color="blue-grey-darken-4"
               size="small"
               class="text-none font-weight-bold"
               prepend-icon="mdi-refresh"
@@ -1262,11 +1182,11 @@
               <div class="d-flex align-center justify-space-between ga-4">
                 <div>
                   <div
-                    class="text-body-2 font-weight-black text-blue-grey-darken-4"
+                    class="text-body-2 font-weight-black text-high-emphasis"
                   >
                     {{ widget.title }}
                   </div>
-                  <div class="text-caption text-blue-grey mt-1">
+                  <div class="text-caption text-medium-emphasis mt-1">
                     {{ widget.description }}
                   </div>
                 </div>
@@ -1292,7 +1212,7 @@
         <v-card-actions class="pa-6 pt-4 border-t justify-end ga-3">
           <v-btn
             variant="text"
-            class="text-none font-weight-bold text-blue-grey"
+            class="text-none font-weight-bold text-medium-emphasis"
             @click="cancelCustomize"
           >
             Cancel
@@ -1320,7 +1240,7 @@
         <v-card-title
           class="d-flex align-center justify-space-between pa-6 pb-3"
         >
-          <div class="text-body-1 font-weight-black text-blue-grey-darken-4">
+          <div class="text-body-1 font-weight-black text-high-emphasis">
             Facility Booking
           </div>
           <v-btn
@@ -2505,6 +2425,17 @@ const visibleKpiCards = computed(() =>
   kpiCards.value.filter((card) => isWidgetVisible(card.key))
 );
 
+/**
+ * The percentage pill's label. Same number the chip has always shown, written
+ * the way the handoff prints it - `+0%` / `-6.4%`, the sign carrying what the
+ * arrow icon used to. A card without a percentage gets no pill.
+ */
+function kpiChipText(card: Record<string, any>): string {
+  const value = Number(card?.percentage);
+  if (!Number.isFinite(value)) return "";
+  return `${value < 0 ? "-" : "+"}${Math.abs(value)}%`;
+}
+
 // ─── Dashboard Title ──────────────────────────────────────────────────────────
 
 const dashboardTitle = computed(() => {
@@ -3254,31 +3185,37 @@ function getInitials(name?: string) {
 function getStatusPillStyle(status: any) {
   const tone = getStatusTone(status);
   const map: Record<string, { backgroundColor: string; color: string }> = {
-    success: { backgroundColor: "#72e3a1", color: "#0f5132" },
-    warning: { backgroundColor: "#fde68a", color: "#92400e" },
-    error: { backgroundColor: "#fecaca", color: "#b91c1c" },
-    neutral: { backgroundColor: "#e2e8f0", color: "#64748b" },
+    success: { backgroundColor: "var(--ok-bg)", color: "var(--ok)" },
+    warning: { backgroundColor: "var(--warn-bg)", color: "var(--warn)" },
+    error: { backgroundColor: "var(--err-bg)", color: "var(--err)" },
+    neutral: { backgroundColor: "var(--hover)", color: "var(--text2)" },
   };
   return map[tone] || map.neutral;
 }
 
+/**
+ * The pills are drawn by inline style, so the literal colours lived here rather
+ * than in the stylesheet - which is why they survived the dark-mode repair and
+ * still measured 3.86:1. Same three cases, same words, the design's tones.
+ */
 function getPatrolStatusStyle(status: any) {
   const s = String(status || "").toLowerCase();
   if (s === "completed" || s === "complete")
-    return { backgroundColor: "#72e3a1", color: "#0f5132" };
+    return { backgroundColor: "var(--ok-bg)", color: "var(--ok)" };
   if (s === "on paused" || s === "paused")
-    return { backgroundColor: "#dcdcdc", color: "#64748b" };
-  return { backgroundColor: "#e2e8f0", color: "#64748b" };
+    return { backgroundColor: "var(--hover)", color: "var(--text2)" };
+  return { backgroundColor: "var(--hover)", color: "var(--text2)" };
 }
 
 function getStaffStatusPillStyle(status: any) {
   const s = String(status || "").toLowerCase();
   if (s === "on duty" || s === "on-duty")
-    return { backgroundColor: "#72e3a1", color: "#0f5132" };
+    return { backgroundColor: "var(--ok-bg)", color: "var(--ok)" };
   if (s === "on break" || s === "on-break")
-    return { backgroundColor: "#fde68a", color: "#92400e" };
-  if (s === "absent") return { backgroundColor: "#fecaca", color: "#b91c1c" };
-  return { backgroundColor: "#e2e8f0", color: "#64748b" };
+    return { backgroundColor: "var(--warn-bg)", color: "var(--warn)" };
+  if (s === "absent")
+    return { backgroundColor: "var(--err-bg)", color: "var(--err)" };
+  return { backgroundColor: "var(--hover)", color: "var(--text2)" };
 }
 
 function getStatusProgressStyle(item: { percent: number; color: string }) {
@@ -4158,37 +4095,98 @@ function formatDashboardTime(value?: string) {
   text-transform: capitalize;
 }
 
+/* Was five pairs of literal pastels - the same pale green on the dark page,
+   and none of them the tones the rest of the product uses. */
 .badge-success {
-  background-color: #d1fae5;
-  color: #065f46;
+  background-color: var(--ok-bg);
+  color: var(--ok);
 }
 
 .badge-info {
-  background-color: #e0f2fe;
-  color: #075985;
+  background-color: var(--info-bg);
+  color: var(--info);
 }
 
 .badge-danger,
 .badge-error {
-  background-color: #fee2e2;
-  color: #991b1b;
+  background-color: var(--err-bg);
+  color: var(--err);
 }
 
 .badge-warning {
-  background-color: #fef3c7;
-  color: #92400e;
+  background-color: var(--warn-bg);
+  color: var(--warn);
 }
 
 .badge-neutral {
-  background-color: #f1f5f9;
-  color: #475569;
+  background-color: var(--hover);
+  color: var(--text2);
 }
 
+/* ------------------------------------------------------------------ */
+/* PHASE 5 - the design's card, type and semantic tones.               */
+/*                                                                     */
+/* The dark-mode repair earlier today moved these surfaces off literal */
+/* white onto the Vuetify theme; this keeps that and takes the last    */
+/* step, onto the design tokens themselves - so the dashboard's cards, */
+/* headings and pills are the same 14px card, the same Manrope and the */
+/* same four status tones as every other screen.                       */
+/* ------------------------------------------------------------------ */
+
 .dashboard-card {
-  background: #fff;
-  border: 1px solid #d9e0e7;
-  border-radius: 8px;
-  box-shadow: 0 1px 2px rgba(15, 35, 54, 0.04);
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--r-card);
+  box-shadow: var(--shadow);
+  font-family: var(--font-sans);
+}
+
+/* The KPI tile and the rows inside a panel are the same card, one step in. */
+.dashboard-kpi-card,
+.dashboard-row-card {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--r-card);
+  box-shadow: var(--shadow);
+  font-family: var(--font-sans);
+}
+
+.dashboard-title {
+  font-family: var(--font-sans);
+  font-size: var(--fs-h1);
+  font-weight: var(--fw-h1);
+  letter-spacing: var(--ls-h1);
+  color: var(--text);
+}
+
+.dashboard-card-title {
+  font-family: var(--font-sans);
+  font-size: var(--fs-card-title);
+  font-weight: var(--fw-card-title);
+  letter-spacing: 0;
+  color: var(--text);
+}
+
+/* 11px/800 uppercase over a 30px/800 number, tabular so the columns of
+   figures line up - the design's KPI, and the same header type the table
+   card already uses. */
+.dashboard-kpi-label {
+  font-family: var(--font-sans);
+  font-size: var(--fs-table-head);
+  font-weight: var(--fw-table-head);
+  letter-spacing: var(--ls-table-head);
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+.dashboard-kpi-value {
+  font-family: var(--font-sans);
+  font-size: var(--fs-kpi);
+  font-weight: var(--fw-kpi);
+  letter-spacing: var(--ls-kpi);
+  line-height: 1.1;
+  color: var(--text);
+  font-variant-numeric: tabular-nums;
 }
 
 .dashboard-section-grid {
@@ -4209,7 +4207,7 @@ function formatDashboardTime(value?: string) {
 }
 
 .figma-panel {
-  border-color: #dde4ea;
+  border-color: rgba(var(--v-border-color), var(--v-border-opacity));
   box-shadow: none;
   min-height: 276px;
   padding: 26px 28px 24px;
@@ -4223,14 +4221,17 @@ function formatDashboardTime(value?: string) {
   min-height: 18px;
 }
 
+/* The panel heading is the design's card title: 15.5px/800, sentence case. It
+   was a 12px/900 uppercase label from the earlier Figma. */
 .figma-panel-header h2 {
-  color: #18324a;
-  font-size: 12px;
-  font-weight: 900;
+  color: var(--text);
+  font-family: var(--font-sans);
+  font-size: var(--fs-card-title);
+  font-weight: var(--fw-card-title);
   letter-spacing: 0;
   line-height: 1.2;
   margin: 0;
-  text-transform: uppercase;
+  text-transform: none;
 }
 
 .figma-panel-action,
@@ -4238,7 +4239,7 @@ function formatDashboardTime(value?: string) {
   appearance: none;
   background: transparent;
   border: 0;
-  color: #1976d2;
+  color: rgb(var(--v-theme-primary));
   cursor: pointer;
   font-size: 12px;
   font-weight: 800;
@@ -4248,7 +4249,7 @@ function formatDashboardTime(value?: string) {
 }
 
 .facility-booking-modal {
-  border: 1px solid #d9e0e7;
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
   box-shadow: 0 18px 48px rgba(15, 35, 54, 0.18);
 }
 
@@ -4269,7 +4270,7 @@ function formatDashboardTime(value?: string) {
 }
 
 .facility-booking-summary-label {
-  color: #1565c0;
+  color: rgb(var(--v-theme-primary));
   font-size: 16px;
   font-weight: 500;
   line-height: 1.25;
@@ -4289,7 +4290,7 @@ function formatDashboardTime(value?: string) {
 }
 
 .facility-booking-summary-dots {
-  border-bottom: 2px dotted #9aa3ad;
+  border-bottom: 2px dotted rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
   display: block;
   height: 1px;
   min-width: 32px;
@@ -4297,7 +4298,7 @@ function formatDashboardTime(value?: string) {
 
 .facility-booking-summary-value,
 .facility-booking-total-label {
-  color: #0b2f47;
+  color: rgb(var(--v-theme-on-surface));
   font-size: 16px;
   font-weight: 800;
   line-height: 1.25;
@@ -4320,8 +4321,8 @@ function formatDashboardTime(value?: string) {
 
 .figma-list-row {
   align-items: center;
-  background: #fff;
-  border: 1px solid #e1e7ed;
+  background: rgb(var(--v-theme-surface-bright));
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
   border-radius: 6px;
   display: grid;
   gap: 10px;
@@ -4332,7 +4333,7 @@ function formatDashboardTime(value?: string) {
 }
 
 .figma-list-row:hover {
-  border-color: #d5e0ea;
+  border-color: rgba(var(--v-border-color), var(--v-border-opacity));
   box-shadow: 0 6px 14px rgba(15, 44, 69, 0.05);
 }
 
@@ -4341,7 +4342,7 @@ function formatDashboardTime(value?: string) {
 }
 
 .figma-list-main strong {
-  color: #152f47;
+  color: rgb(var(--v-theme-on-surface));
   display: block;
   font-size: 12px;
   font-weight: 800;
@@ -4352,7 +4353,7 @@ function formatDashboardTime(value?: string) {
 }
 
 .figma-list-main p {
-  color: #7b8895;
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
   font-size: 11px;
   font-weight: 700;
   line-height: 1.3;
@@ -4377,30 +4378,30 @@ function formatDashboardTime(value?: string) {
 
 .figma-event-dot-info,
 .figma-event-dot-neutral {
-  background: #c9e6ff;
-  border: 2px solid #77bef9;
+  background: var(--info-bg);
+  border: 2px solid var(--info);
 }
 
 .figma-event-dot-success {
-  background: #2fb84d;
-  border: 2px solid #c9efd4;
+  background: var(--ok-bg);
+  border: 2px solid var(--ok);
 }
 
 .figma-event-dot-danger {
-  background: #ffd9d6;
-  border: 2px solid #f9a6a0;
+  background: var(--err-bg);
+  border: 2px solid var(--err);
 }
 
 .figma-event-dot-warning {
-  background: #ffe9c7;
-  border: 2px solid #f9c97c;
+  background: var(--warn-bg);
+  border: 2px solid var(--warn);
 }
 
 .active-patrol-row {
   align-items: center;
-  background-color: #ffffff;
-  border: 1px solid #e2e8f0;
-  border-radius: 8px;
+  background-color: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner-lg);
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
   display: grid;
   gap: 10px;
@@ -4416,7 +4417,7 @@ function formatDashboardTime(value?: string) {
 }
 
 .active-patrol-main strong {
-  color: #0b2f47;
+  color: rgb(var(--v-theme-on-surface));
   display: block;
   font-size: 13px;
   font-weight: 700;
@@ -4426,7 +4427,7 @@ function formatDashboardTime(value?: string) {
 }
 
 .active-patrol-main span {
-  color: #94a3b8;
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
   display: block;
   font-size: 11px;
   line-height: 1.25;
@@ -4442,8 +4443,8 @@ function formatDashboardTime(value?: string) {
 
 .active-patrol-assignee {
   align-items: center;
-  background: #f8fafc;
-  border: 1px solid #e7edf3;
+  background: rgba(var(--v-theme-on-surface), 0.05);
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
   border-radius: 999px;
   display: inline-flex;
   flex: 1 1 auto;
@@ -4453,8 +4454,23 @@ function formatDashboardTime(value?: string) {
   padding: 2px 8px 2px 3px;
 }
 
+/**
+ * Carried from Phase 1: `AvatarMain` colours each person from their NAME, and
+ * writes WHITE initials on whatever tint it picks - 2.34:1 on this dashboard.
+ * That is right in a members list, where the colour tells two people apart,
+ * and wrong on a dashboard, where the same face appears in four panels.
+ *
+ * The component is left alone - Phase 2 took exactly this route for the top
+ * bar's own avatar - and the dashboard paints every avatar it draws with the
+ * design's accent pair instead. One rule, all seven call sites.
+ */
+.unified-dashboard :deep(.v-avatar) {
+  background: var(--accent-soft) !important;
+  color: var(--accent-text) !important;
+}
+
 .active-patrol-assignee span {
-  color: #475569;
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
   font-size: 11px;
   font-weight: 600;
   line-height: 1.2;
@@ -4484,10 +4500,10 @@ function formatDashboardTime(value?: string) {
 
 .active-patrol-more-pill {
   align-items: center;
-  background: #eef3f8;
-  border: 1px solid #dbe4ed;
+  background: rgba(var(--v-theme-on-surface), 0.05);
+  border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
   border-radius: 999px;
-  color: #607386;
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
   display: inline-flex;
   flex: 0 0 auto;
   font-size: 11px;
@@ -4507,11 +4523,11 @@ function formatDashboardTime(value?: string) {
 }
 
 .active-patrol-tooltip::after {
-  background: #0f2638;
-  border-radius: 6px;
+  background: var(--text);
+  border-radius: var(--r-inner-sm);
   bottom: calc(100% + 8px);
-  box-shadow: 0 8px 24px rgba(15, 38, 56, 0.18);
-  color: #ffffff;
+  box-shadow: var(--shadow-menu);
+  color: var(--card);
   content: attr(data-tooltip);
   font-size: 11px;
   font-weight: 600;
@@ -4541,6 +4557,28 @@ function formatDashboardTime(value?: string) {
   }
 }
 
+/**
+ * Carried from Phase 1: the dashboard scrolled sideways at 360. This row is a
+ * four-column grid whose last two columns are `max-content`, so on a phone the
+ * assignee pill, the status pill and the action button cannot fit beside a
+ * 120px title and the row pushes ~39px past the viewport.
+ *
+ * Below 600 the four columns become one. Nothing is hidden, dropped or
+ * reordered - the same four blocks, stacked in the same order.
+ */
+@media (max-width: 599.98px) {
+  .active-patrol-row {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .active-patrol-action,
+  .active-patrol-statuses,
+  .active-patrol-assignees {
+    justify-self: start;
+    text-align: left;
+  }
+}
+
 .figma-icon-badge {
   align-items: center;
   border-radius: 50%;
@@ -4552,28 +4590,28 @@ function formatDashboardTime(value?: string) {
 }
 
 .figma-icon-badge-danger {
-  background: #ffe0de;
-  color: #d72f2f;
+  background: var(--err-bg);
+  color: var(--err);
 }
 
 .figma-icon-badge-info {
-  background: #e8e2ff;
-  color: #6d4bd8;
+  background: var(--info-bg);
+  color: var(--info);
 }
 
 .figma-icon-badge-success {
-  background: #ddf7e6;
-  color: #229852;
+  background: var(--ok-bg);
+  color: var(--ok);
 }
 
 .figma-icon-badge-warning {
-  background: #ffeed4;
-  color: #c57916;
+  background: var(--warn-bg);
+  color: var(--warn);
 }
 
 .figma-icon-badge-neutral {
-  background: #edf2f6;
-  color: #607386;
+  background: var(--hover);
+  color: var(--text2);
 }
 
 .figma-status-stack {
@@ -4587,7 +4625,7 @@ function formatDashboardTime(value?: string) {
 
 .figma-status-label {
   align-items: center;
-  color: #263d53;
+  color: rgb(var(--v-theme-on-surface));
   display: flex;
   font-size: 12px;
   font-weight: 800;
@@ -4597,13 +4635,13 @@ function formatDashboardTime(value?: string) {
 }
 
 .figma-status-label strong {
-  color: #18324a;
+  color: rgb(var(--v-theme-on-surface));
   font-size: 12px;
   font-weight: 900;
 }
 
 .figma-progress-track {
-  background: #edf2f6;
+  background: rgba(var(--v-theme-on-surface), 0.08);
   border-radius: 999px;
   height: 6px;
   overflow: hidden;
@@ -4624,9 +4662,9 @@ function formatDashboardTime(value?: string) {
 
 .feedback-row {
   align-items: center;
-  background: #fff;
-  border: 1px solid #e0e5ea;
-  border-radius: 8px;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: var(--r-inner-lg);
   display: grid;
   gap: 16px;
   grid-template-columns: minmax(180px, 225px) minmax(130px, 175px) 100px auto;
@@ -4635,8 +4673,41 @@ function formatDashboardTime(value?: string) {
   transition: border-color 0.16s ease, box-shadow 0.16s ease;
 }
 
+/**
+ * The property-mode feedback row is four flex children that each ask for at
+ * least 140px, so on a 360px phone the status pill and the View button were
+ * clipped by the card edge - visible, but cut in half. It wraps now, and below
+ * 600 each block takes the full width: same four blocks, same order.
+ */
+.dashboard-feedback-row {
+  flex-wrap: wrap;
+  gap: 12px;
+}
+
+@media (max-width: 599.98px) {
+  .dashboard-feedback-row > div {
+    flex: 1 1 100% !important;
+    justify-content: flex-start !important;
+    text-align: left !important;
+  }
+}
+
+/* Same story as the patrol row: four fixed-ish columns need ~600px, so on a
+   phone the status pill and the View button were clipped by the card edge.
+   One column below 600, same blocks, same order. */
+@media (max-width: 599.98px) {
+  .feedback-row {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .feedback-status-pill,
+  .feedback-action {
+    justify-self: start;
+  }
+}
+
 .feedback-row:hover {
-  border-color: #d8e3ec;
+  border-color: rgba(var(--v-border-color), var(--v-border-opacity));
   box-shadow: 0 6px 14px rgba(15, 44, 69, 0.04);
 }
 
@@ -4645,7 +4716,7 @@ function formatDashboardTime(value?: string) {
 }
 
 .feedback-summary strong {
-  color: #132b43;
+  color: rgb(var(--v-theme-on-surface));
   display: block;
   font-size: 12px;
   font-weight: 800;
@@ -4656,7 +4727,7 @@ function formatDashboardTime(value?: string) {
 }
 
 .feedback-summary p {
-  color: #888;
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
   font-size: 12px;
   font-weight: 500;
   line-height: 1.35;
@@ -4679,11 +4750,13 @@ function formatDashboardTime(value?: string) {
   white-space: nowrap;
 }
 
+/* Carried from Phase 1: the initials measured 1.26:1 in dark mode, because the
+   tint was a literal light blue whatever the theme. */
 .feedback-avatar {
   align-items: center;
-  background: #d1e8ff;
+  background: var(--accent-soft);
   border-radius: 50%;
-  color: #1d5f99;
+  color: var(--accent-text);
   display: inline-flex;
   flex-shrink: 0;
   font-size: 11px;
@@ -4702,31 +4775,32 @@ function formatDashboardTime(value?: string) {
   white-space: nowrap;
 }
 
+/* The other two carried Phase 1 items: hard-coded chips. */
 .feedback-status-pill-completed {
-  background: #72e3a1;
-  color: #0f5132;
+  background: var(--ok-bg);
+  color: var(--ok);
 }
 
 .feedback-status-pill-progress {
-  background: #fde68a;
-  color: #92400e;
+  background: var(--warn-bg);
+  color: var(--warn);
 }
 
 .feedback-status-pill-danger {
-  background: #fecaca;
-  color: #b91c1c;
+  background: var(--err-bg);
+  color: var(--err);
 }
 
 .feedback-status-pill-todo {
-  background: #e2e8f0;
-  color: #64748b;
+  background: var(--hover);
+  color: var(--text2);
 }
 
 .feedback-view-button {
   appearance: none;
   background: transparent;
   border: 0;
-  color: #2196f3;
+  color: rgb(var(--v-theme-primary));
   cursor: pointer;
   font-size: 12px;
   font-weight: 800;