Upload 6 files

README.md

@@ -1,41 +1,30 @@
 ---
-title: ICS
-emoji: "🏭"
+title: ICS2
+emoji: "🗺️"
 colorFrom: green
 colorTo: blue
 sdk: static
 pinned: false
 license: mit
-short_description: نظام استعلام المنشآت الصناعية
+short_description: بوابة الباحث الميداني الشاملة
 ---
 
-# شاشة استعلام
+# بوابة الباحث الميداني
 
-واجهة عربية ثابتة للاستعلام عن المنشآت حسب المنطقة والمدينة الصناعية، مع بحث مباشر باسم المنشأة أو السجل التجاري.
+واجهة عربية متجاوبة تعرض لكل باحث عيناته وخريطته الشاملة وأدوات التواصل الخاصة بالمدن الصناعية.
 
-## المناطق والمدن
+## آلية البيانات
 
-- منطقة الدمام: الصناعية الأولى بالدمام، الصناعية الثانية بالدمام، الصناعية الثالثة بالدمام
-- منطقة الأحساء: المدينة صناعية الأولى بالأحساء
-- منطقة حفر الباطن: المدينة الصناعية بحفر الباطن
-- سبارك: مدينة الملك سلمان
-
-## الإحداثيات والتواصل
-
-- إذا كانت الخانة تحتوي على إحداثيات رقمية، يظهر رابط مباشر إلى خرائط Google.
-- إذا كانت الخانة فارغة، لا يظهر حقل الإحداثيات.
-- إذا كانت الخانة تحتوي على نص تواصل ورقم جوال، تظهر باسم "إفادة مدن" مع أزرار نسخ الرقم وواتساب ونسخ رسالة مقترحة.
-- يتم تمييز الإحداثيات وإفادة مدن بصريًا بألوان مختلفة.
-- يحفظ النظام آخر منطقة ومدينة وبحث تم استخدامها على نفس المتصفح.
+- اسم المدينة يعتمد على عمود المدينة الخاص بالصفحة، ثم يرجع إلى عمود المدينة الأساسي عند غيابه.
+- إحداثية مدن هي الموقع المعتمد أولًا.
+- عند عدم توفر إحداثية مدن، تستخدم إحداثيات X وY الأساسية.
+- تعرض إفادة مدن منفصلة عن الموقع، وتظهر العينات دون تفاصيل موقع في نهاية النتائج.
+- البيانات مشفرة داخل `data.js`، ورمز الدخول الافتراضي هو `20302030`.
 
 ## تحديث البيانات
 
-رمز الدخول الافتراضي في النسخة الحالية هو `20302030`.
-
-لتحديث ملف البيانات المشفر:
-
 ```powershell
-node generate-data.mjs "path\to\input.xlsx" "data.js" "PASSWORD"
+node generate-data.mjs "path\to\شامل.xlsx" "data.js" "20302030"
 ```
 
-لا ترفع ملف Excel الأصلي إلى المستودع؛ ارفع `data.js` بعد توليده فقط.
+لا ترفع ملف Excel إلى المستودع. ارفع ملفات الواجهة و`data.js` الناتج فقط.

app.js

@@ -1,50 +1,39 @@
 "use strict";
 
-const loginView = document.getElementById("loginView");
-const dashboardView = document.getElementById("dashboardView");
-const loginForm = document.getElementById("loginForm");
-const passwordInput = document.getElementById("password");
-const loginButton = document.getElementById("loginButton");
-const loginError = document.getElementById("loginError");
-const togglePassword = document.getElementById("togglePassword");
-const logoutButton = document.getElementById("logoutButton");
-const regionSelect = document.getElementById("regionSelect");
-const regionButtons = document.getElementById("regionButtons");
-const citySelect = document.getElementById("citySelect");
-const searchInput = document.getElementById("searchInput");
-const clearFiltersButton = document.getElementById("clearFiltersButton");
-const emptyState = document.getElementById("emptyState");
-const resultsSection = document.getElementById("resultsSection");
-const resultsMeta = document.getElementById("resultsMeta");
-const resultsTitle = document.getElementById("resultsTitle");
-const samplesGrid = document.getElementById("samplesGrid");
-const noResults = document.getElementById("noResults");
-const loadMoreWrap = document.getElementById("loadMoreWrap");
-const loadMoreButton = document.getElementById("loadMoreButton");
-const loadMoreMeta = document.getElementById("loadMoreMeta");
-const toast = document.getElementById("toast");
-
 const PAGE_SIZE = 24;
-const STATE_KEY = "icsInquiryFilters";
-const CONTACT_MESSAGE = (row) =>
+const STATE_KEY = "ics2ResearcherWorkspace";
+const FORM_URL = "https://drive.google.com/file/d/1BEJ3qrqB3RMvhw4Z0i4dxZiwEreT9cJc/view?usp=sharing";
+
+const REPRESENTATIVES = [
+  { match: ["الصناعية الأولى", "الصناعية الاولى"], city: "الدمام الأولى", name: "يوسف العباد", phone: "0501444214" },
+  { match: ["الصناعية الثانية"], city: "الدمام الثانية", name: "سالم بوسوده", phone: "0560503707" },
+  { match: ["الصناعية الثالثة"], city: "الدمام الثالثة", name: "إبراهيم الغامدي", phone: "0555309388" },
+  { match: ["الأحساء", "الاحساء", "العيون", "واحة مدن"], city: "الأحساء", name: "أحمد الخليفة", phone: "0506448053" },
+];
+
+const ICONS = {
+  copy: "M8 8h11v11H8z M5 16H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1",
+  map: "M12 21s7-4.6 7-11a7 7 0 1 0-14 0c0 6.4 7 11 7 11Z M12 12.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z",
+  whatsapp: "M20.5 11.5a8.5 8.5 0 0 1-12.6 7.4L3 20l1.2-4.7A8.5 8.5 0 1 1 20.5 11.5Z M8.6 8.7c.2 3.3 2.7 5.8 6 6.2",
+};
+
+const elements = Object.fromEntries(
   [
-    "السلام عليكم ورحمة الله وبركاته",
-    "",
-    "أستاذي الكريم،",
-    "نأمل تزويدنا بموقع المنشأة التالية، وذلك لاستكمال بيانات الزيارة الميدانية:",
-    "",
-    `منشأة: ${row.establishmentName || "-"}`,
-    `السجل التجاري: ${row.commercialRecord || "-"}`,
-    `المدينة: ${row.city || "-"}`,
-    "",
-    "شاكرين لكم تعاونكم.",
-  ].join("\n");
-
-let rows = [];
+    "loginView", "loginForm", "password", "togglePassword", "loginButton", "loginError",
+    "researcherView", "researcherSearch", "researcherGrid", "dashboardView", "researcherName",
+    "switchResearcherButton", "logoutButton", "summaryStats", "researcherMapLink", "formLink",
+    "shareFormButton", "cityButtons", "searchInput", "statusSelect", "locationSelect",
+    "clearFiltersButton", "representativePanel", "resultsMeta", "resultsTitle", "samplesGrid",
+    "noResults", "loadMoreWrap", "loadMoreButton", "loadMoreMeta", "toast",
+  ].map((id) => [id, document.getElementById(id)]),
+);
+
+let payload = null;
+let activeResearcher = null;
+let researcherRows = [];
 let visibleRows = [];
 let renderedCount = 0;
 let toastTimer;
-let isRestoringState = false;
 
 function base64ToBytes(value) {
   const binary = atob(value);
@@ -71,10 +60,15 @@ async function deriveKey(password, salt) {
 async function decryptData(password) {
   const salt = base64ToBytes(ENCRYPTED_DATA.salt);
   const iv = base64ToBytes(ENCRYPTED_DATA.iv);
-  const cipherText = base64ToBytes(ENCRYPTED_DATA.payload);
+  const combined = base64ToBytes(ENCRYPTED_DATA.payload);
+  const cipherText = combined.slice(0, -16);
+  const authTag = combined.slice(-16);
+  const encrypted = new Uint8Array(cipherText.length + authTag.length);
+  encrypted.set(cipherText);
+  encrypted.set(authTag, cipherText.length);
   const key = await deriveKey(password, salt);
-  const plainBuffer = await crypto.subtle.decrypt({ name: "AES-GCM", iv }, key, cipherText);
-  return JSON.parse(new TextDecoder().decode(plainBuffer));
+  const plain = await crypto.subtle.decrypt({ name: "AES-GCM", iv }, key, encrypted);
+  return JSON.parse(new TextDecoder().decode(plain));
 }
 
 function normalize(value) {
@@ -95,24 +89,68 @@ function uniqueSorted(values) {
   );
 }
 
-function setOptions(select, values, placeholder) {
-  select.replaceChildren(new Option(placeholder, ""));
-  values.forEach((value) => select.add(new Option(value, value)));
+function createIcon(path) {
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("viewBox", "0 0 24 24");
+  svg.setAttribute("aria-hidden", "true");
+  const element = document.createElementNS("http://www.w3.org/2000/svg", "path");
+  element.setAttribute("d", path);
+  svg.append(element);
+  return svg;
 }
 
-function saveFilterState() {
-  if (isRestoringState) return;
+function showToast(message) {
+  clearTimeout(toastTimer);
+  elements.toast.textContent = message;
+  elements.toast.classList.add("show");
+  toastTimer = setTimeout(() => elements.toast.classList.remove("show"), 2300);
+}
+
+async function copyText(text, successMessage) {
+  try {
+    await navigator.clipboard.writeText(text);
+  } catch {
+    const area = document.createElement("textarea");
+    area.value = text;
+    area.style.cssText = "position:fixed;opacity:0";
+    document.body.append(area);
+    area.select();
+    document.execCommand("copy");
+    area.remove();
+  }
+  showToast(successMessage);
+}
+
+function localPhone(value) {
+  const digits = String(value ?? "").replace(/\D/g, "");
+  if (digits.startsWith("966")) return `0${digits.slice(3)}`;
+  return digits;
+}
+
+function internationalPhone(value) {
+  const digits = localPhone(value);
+  return digits.startsWith("0") ? `966${digits.slice(1)}` : digits;
+}
+
+function locationRank(row) {
+  return { madon: 4, base: 3, statement: 2, none: 1 }[row.locationType] || 0;
+}
+
+function saveState() {
+  if (!activeResearcher) return;
   localStorage.setItem(
     STATE_KEY,
     JSON.stringify({
-      region: regionSelect.value,
-      city: citySelect.value,
-      search: searchInput.value,
+      researcher: activeResearcher.name,
+      city: elements.cityButtons.querySelector(".city-choice.active")?.dataset.city || "",
+      search: elements.searchInput.value,
+      status: elements.statusSelect.value,
+      location: elements.locationSelect.value,
     }),
   );
 }
 
-function getSavedFilterState() {
+function savedState() {
   try {
     return JSON.parse(localStorage.getItem(STATE_KEY) || "{}");
   } catch {
@@ -120,348 +158,426 @@ function getSavedFilterState() {
   }
 }
 
-function updateRegionButtonState() {
-  regionButtons.querySelectorAll(".region-choice").forEach((button) => {
-    const isActive = button.dataset.region === regionSelect.value;
-    button.classList.toggle("active", isActive);
-    button.setAttribute("aria-checked", String(isActive));
+function showOnly(view) {
+  [elements.loginView, elements.researcherView, elements.dashboardView].forEach((item) => {
+    item.hidden = item !== view;
   });
 }
 
-function setRegion(region, scrollToControls = false) {
-  regionSelect.value = region;
-  updateRegionButtonState();
-  const cities = uniqueSorted(rows.filter((row) => row.region === region).map((row) => row.city));
-  setOptions(citySelect, cities, "اختر المدينة الصناعية");
-  citySelect.disabled = !region;
-  citySelect.value = "";
-  applyFilters();
-  if (scrollToControls) {
-    window.scrollTo({ top: document.querySelector(".controls-panel").offsetTop - 16, behavior: "smooth" });
-  }
-}
-
-function showToast(message) {
-  clearTimeout(toastTimer);
-  toast.textContent = message;
-  toast.classList.add("show");
-  toastTimer = setTimeout(() => toast.classList.remove("show"), 2200);
+function renderResearchers() {
+  const query = normalize(elements.researcherSearch.value);
+  const fragment = document.createDocumentFragment();
+  payload.researchers
+    .filter((researcher) => !query || normalize(researcher.name).includes(query))
+    .forEach((researcher) => {
+      const button = document.createElement("button");
+      button.type = "button";
+      button.className = "researcher-choice";
+      const content = document.createElement("span");
+      const name = document.createElement("strong");
+      name.textContent = researcher.name;
+      const meta = document.createElement("small");
+      meta.textContent = `${researcher.count} عينة`;
+      content.append(name, meta);
+      const arrow = createIcon("m15 18-6-6 6-6");
+      button.append(content, arrow);
+      button.addEventListener("click", () => openResearcher(researcher));
+      fragment.append(button);
+    });
+  elements.researcherGrid.replaceChildren(fragment);
 }
 
-async function copyText(text, successMessage) {
-  try {
-    await navigator.clipboard.writeText(text);
-  } catch {
-    const area = document.createElement("textarea");
-    area.value = text;
-    area.style.position = "fixed";
-    area.style.opacity = "0";
-    document.body.append(area);
-    area.select();
-    document.execCommand("copy");
-    area.remove();
-  }
-  showToast(successMessage);
+function createStat(value, label, className) {
+  const item = document.createElement("div");
+  item.className = `stat-item ${className}`;
+  const strong = document.createElement("strong");
+  strong.textContent = value;
+  const span = document.createElement("span");
+  span.textContent = label;
+  item.append(strong, span);
+  return item;
 }
 
-function phoneDigits(value) {
-  const match = String(value ?? "").match(/(?:\+?966|0)?5\d{8}/);
-  if (!match) return "";
-  let digits = match[0].replace(/\D/g, "");
-  if (digits.startsWith("966")) return digits;
-  if (digits.startsWith("0")) return `966${digits.slice(1)}`;
-  return `966${digits}`;
+function renderSummary() {
+  const withMadon = researcherRows.filter((row) => row.locationType === "madon").length;
+  const withBase = researcherRows.filter((row) => row.locationType === "base").length;
+  const withoutLocation = researcherRows.filter((row) => row.locationType === "none").length;
+  elements.summaryStats.replaceChildren(
+    createStat(researcherRows.length, "إجمالي العينات", "total"),
+    createStat(withMadon, "إحداثية مدن", "madon"),
+    createStat(withBase, "إحداثية أساسية", "base"),
+    createStat(withoutLocation, "دون تفاصيل موقع", "missing"),
+  );
 }
 
-function localPhoneNumber(value) {
-  const digits = phoneDigits(value);
-  if (!digits) return "";
-  return digits.startsWith("966") ? `0${digits.slice(3)}` : digits;
+function activeCity() {
+  return elements.cityButtons.querySelector(".city-choice.active")?.dataset.city || "";
 }
 
-function isCoordinate(value) {
-  return /^[-+]?\d{1,2}(?:\.\d+)?\s*,\s*[-+]?\d{1,3}(?:\.\d+)?$/.test(String(value ?? "").trim());
+function setActiveCity(city) {
+  elements.cityButtons.querySelectorAll(".city-choice").forEach((button) => {
+    const active = button.dataset.city === city;
+    button.classList.toggle("active", active);
+    button.setAttribute("aria-checked", String(active));
+  });
+  updateRepresentative(city);
+  applyFilters();
 }
 
-function hasLocationInfo(row) {
-  return Boolean(String(row.coordinates ?? "").trim());
+function renderCities(preferredCity = "") {
+  const counts = new Map();
+  researcherRows.forEach((row) => counts.set(row.city, (counts.get(row.city) || 0) + 1));
+  const cities = uniqueSorted([...counts.keys()]);
+  const allButton = document.createElement("button");
+  allButton.type = "button";
+  allButton.className = "city-choice";
+  allButton.dataset.city = "";
+  allButton.innerHTML = `<span>جميع المدن</span><strong>${researcherRows.length}</strong>`;
+  allButton.addEventListener("click", () => setActiveCity(""));
+  const buttons = [allButton];
+  cities.forEach((city) => {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "city-choice";
+    button.dataset.city = city;
+    const label = document.createElement("span");
+    label.textContent = city;
+    const count = document.createElement("strong");
+    count.textContent = counts.get(city);
+    button.append(label, count);
+    button.addEventListener("click", () => setActiveCity(city));
+    buttons.push(button);
+  });
+  elements.cityButtons.replaceChildren(...buttons);
+  const initialCity = cities.includes(preferredCity) ? preferredCity : "";
+  setActiveCity(initialCity);
 }
 
-function sortRowsByLocationInfo(items) {
-  return [...items].sort((a, b) => Number(hasLocationInfo(b)) - Number(hasLocationInfo(a)));
+function findRepresentative(city) {
+  const normalizedCity = normalize(city);
+  return REPRESENTATIVES.find((item) => item.match.some((term) => normalizedCity.includes(normalize(term))));
 }
 
-function createSvgIcon(path) {
-  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-  svg.setAttribute("viewBox", "0 0 24 24");
-  svg.setAttribute("aria-hidden", "true");
-  const p = document.createElementNS("http://www.w3.org/2000/svg", "path");
-  p.setAttribute("d", path);
-  svg.append(p);
-  return svg;
+function actionButton(label, icon, onClick) {
+  const button = document.createElement("button");
+  button.type = "button";
+  button.className = "mini-action";
+  button.append(createIcon(icon), document.createTextNode(label));
+  button.addEventListener("click", onClick);
+  return button;
 }
 
-function createActionLink(label, href, iconPath) {
+function actionLink(label, href, icon) {
   const link = document.createElement("a");
-  link.className = "action-link";
+  link.className = "mini-action";
   link.href = href;
   link.target = "_blank";
   link.rel = "noopener";
-  link.append(createSvgIcon(iconPath), document.createTextNode(label));
+  link.append(createIcon(icon), document.createTextNode(label));
   return link;
 }
 
-function createDetail(label, value, extraClass = "") {
+function representativeMessage(representative, row = null) {
+  const lines = [
+    "السلام عليكم ورحمة الله وبركاته",
+    "",
+    `الأستاذ ${representative.name} المحترم،`,
+    "نأمل تزويدنا بموقع المنشأة التالية، وذلك لاستكمال بيانات الزيارة الميدانية:",
+  ];
+  if (row) {
+    lines.push(
+      "",
+      `المنشأة: ${row.establishmentName || "-"}`,
+      `السجل التجاري: ${row.commercialRecord || "-"}`,
+      `المدينة: ${row.city || "-"}`,
+    );
+  }
+  lines.push("", "شاكرين لكم تعاونكم.");
+  return lines.join("\n");
+}
+
+function updateRepresentative(city) {
+  const cityRow = researcherRows.find((row) => row.city === city);
+  const representative = findRepresentative(cityRow?.representativeCity || city);
+  elements.representativePanel.hidden = !representative;
+  elements.representativePanel.replaceChildren();
+  if (!representative) return;
+
+  const copy = document.createElement("div");
+  copy.className = "representative-copy";
+  const icon = document.createElement("span");
+  icon.className = "representative-icon";
+  icon.append(createIcon("M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8M19 8v6M22 11h-6"));
+  const text = document.createElement("div");
+  const label = document.createElement("small");
+  label.textContent = `ممثل ${representative.city}`;
+  const name = document.createElement("strong");
+  name.textContent = representative.name;
+  const phone = document.createElement("span");
+  phone.textContent = representative.phone;
+  text.append(label, name, phone);
+  copy.append(icon, text);
+
+  const actions = document.createElement("div");
+  actions.className = "representative-actions";
+  actions.append(
+    actionButton("نسخ الرقم", ICONS.copy, () => copyText(representative.phone, "تم نسخ رقم الممثل")),
+    actionLink(
+      "واتساب",
+      `https://wa.me/${internationalPhone(representative.phone)}?text=${encodeURIComponent(representativeMessage(representative))}`,
+      ICONS.whatsapp,
+    ),
+  );
+  elements.representativePanel.append(copy, actions);
+}
+
+function setSelectOptions(select, values, placeholder) {
+  select.replaceChildren(new Option(placeholder, ""));
+  values.forEach((value) => select.add(new Option(value, value)));
+}
+
+function openResearcher(researcher) {
+  activeResearcher = researcher;
+  researcherRows = payload.rows
+    .filter((row) => row.researcher === researcher.name)
+    .sort((a, b) => locationRank(b) - locationRank(a));
+  elements.researcherName.textContent = researcher.name;
+  elements.researcherMapLink.href = researcher.mapUrl;
+  elements.formLink.href = FORM_URL;
+  elements.searchInput.value = "";
+  elements.locationSelect.value = "";
+  setSelectOptions(elements.statusSelect, uniqueSorted(researcherRows.map((row) => row.status)), "جميع الحالات");
+  renderSummary();
+  const state = savedState();
+  if (state.researcher === researcher.name) {
+    elements.searchInput.value = state.search || "";
+    elements.statusSelect.value = state.status || "";
+    elements.locationSelect.value = state.location || "";
+  }
+  renderCities(state.researcher === researcher.name ? state.city : "");
+  showOnly(elements.dashboardView);
+  window.scrollTo({ top: 0 });
+  saveState();
+}
+
+function detailItem(label, value, extraClass = "") {
   const item = document.createElement("div");
   item.className = `detail-item ${extraClass}`.trim();
-  const title = document.createElement("span");
-  title.className = "detail-label";
-  title.textContent = label;
-  const text = document.createElement("span");
-  text.className = "detail-value";
-  text.textContent = String(value);
-  item.append(title, text);
+  const name = document.createElement("span");
+  name.className = "detail-label";
+  name.textContent = label;
+  const content = document.createElement("span");
+  content.className = "detail-value";
+  content.textContent = String(value);
+  item.append(name, content);
   return item;
 }
 
-function createCoordinatesBlock(row) {
-  const value = String(row.coordinates ?? "").trim();
-  if (!value) return null;
-
-  const item = document.createElement("div");
-  const hasCoordinates = isCoordinate(value);
-  item.className = `detail-item coordinates-detail ${hasCoordinates ? "map-detail" : "statement-detail"}`;
-  const label = document.createElement("span");
-  label.className = "detail-label";
-  label.textContent = hasCoordinates ? "الإحداثيات" : "إفادة مدن";
-  item.append(label);
-
-  if (hasCoordinates) {
-    item.append(
-      createActionLink(
-        "اضغط هنا للذهاب بخرائط Google",
-        `https://www.google.com/maps?q=${encodeURIComponent(value)}`,
-        "M12 21s7-4.6 7-11a7 7 0 1 0-14 0c0 6.4 7 11 7 11Z M12 12.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z",
+function createLocationBlock(row) {
+  if (row.locationType === "none" && !row.madonStatement && !row.madonNote) return null;
+  const block = document.createElement("div");
+  block.className = `location-block location-${row.locationType}`;
+
+  if (row.coordinates) {
+    const heading = document.createElement("div");
+    heading.className = "location-heading";
+    const label = document.createElement("span");
+    label.textContent = row.locationType === "madon" ? "إحداثية مدن" : "الإحداثية الأساسية";
+    const source = document.createElement("small");
+    source.textContent = row.locationType === "madon" ? "الموقع المحدّث" : "حسب بيانات X وY";
+    heading.append(label, source);
+    block.append(heading);
+    block.append(
+      actionLink(
+        "فتح الموقع في خرائط Google",
+        `https://www.google.com/maps?q=${encodeURIComponent(row.coordinates)}`,
+        ICONS.map,
       ),
     );
-    return item;
   }
 
-  const phone = phoneDigits(value);
-  const note = document.createElement("p");
-  note.className = "contact-note";
-  note.textContent = value;
-  item.append(note);
-
-  if (phone) {
-    const message = CONTACT_MESSAGE(row);
-    const actions = document.createElement("div");
-    actions.className = "contact-actions";
-    const copyPhoneButton = document.createElement("button");
-    copyPhoneButton.type = "button";
-    copyPhoneButton.className = "action-link";
-    copyPhoneButton.append(
-      createSvgIcon("M8 8h11v11H8z M5 16H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"),
-      document.createTextNode("نسخ الرقم"),
-    );
-    copyPhoneButton.addEventListener("click", () =>
-      copyText(localPhoneNumber(value), "تم نسخ الرقم"),
-    );
-    actions.append(
-      copyPhoneButton,
-      createActionLink("واتساب", `https://wa.me/${phone}?text=${encodeURIComponent(message)}`, "M20.5 11.5a8.5 8.5 0 0 1-12.6 7.4L3 20l1.2-4.7A8.5 8.5 0 1 1 20.5 11.5Z M8.6 8.7c.2 3.3 2.7 5.8 6 6.2"),
-    );
-    const copyButton = document.createElement("button");
-    copyButton.type = "button";
-    copyButton.className = "action-link";
-    copyButton.append(createSvgIcon("M8 8h11v11H8z M5 16H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"), document.createTextNode("نسخ رسالة مقترحة"));
-    copyButton.addEventListener("click", () => copyText(message, "تم نسخ الرسالة المقترحة"));
-    actions.append(copyButton);
-    item.append(actions);
+  if (row.madonStatement || row.madonNoteText) {
+    const statement = document.createElement("div");
+    statement.className = "madon-statement";
+    const title = document.createElement("span");
+    title.textContent = "إفادة مدن";
+    const text = document.createElement("p");
+    text.textContent = [row.madonStatement, row.madonNoteText].filter(Boolean).join(" - ");
+    statement.append(title, text);
+    block.append(statement);
   }
 
-  return item;
+  return block;
+}
+
+function sampleMessage(row) {
+  return [
+    "السلام عليكم ورحمة الله وبركاته",
+    "",
+    "أستاذي الكريم،",
+    "نأمل تزويدنا بموقع المنشأة التالية، وذلك لاستكمال بيانات الزيارة الميدانية:",
+    "",
+    `المنشأة: ${row.establishmentName || "-"}`,
+    `السجل التجاري: ${row.commercialRecord || "-"}`,
+    `المدينة: ${row.city || "-"}`,
+    "",
+    "شاكرين لكم تعاونكم.",
+  ].join("\n");
 }
 
 function createCard(row, index) {
   const card = document.createElement("article");
   card.className = "sample-card";
-
   const header = document.createElement("div");
-  header.className = "sample-card-header";
-  const heading = document.createElement("div");
-  const indexEl = document.createElement("span");
-  indexEl.className = "sample-index";
-  indexEl.textContent = `منشأة ${index + 1}`;
+  header.className = "card-header";
+  const titleWrap = document.createElement("div");
+  const indexLabel = document.createElement("span");
+  indexLabel.className = "sample-index";
+  indexLabel.textContent = `عينة ${index + 1}`;
   const title = document.createElement("h3");
   title.textContent = row.establishmentName || "منشأة دون اسم";
-  heading.append(indexEl, title);
+  titleWrap.append(indexLabel, title);
   const badge = document.createElement("span");
-  badge.className = "status-badge";
-  badge.textContent = row.complianceStatus || "غير محدد";
-  header.append(heading, badge);
+  badge.className = `status-badge status-${normalize(row.status).includes("مغلق") ? "closed" : "default"}`;
+  badge.textContent = row.status || "غير محدد";
+  header.append(titleWrap, badge);
 
   const details = document.createElement("div");
-  details.className = "sample-details";
+  details.className = "card-details";
   [
-    ["السجل التجاري", row.commercialRecord, "ltr-value wide-detail"],
-    ["توضيح المدينة", row.cityClarification, "wide-detail"],
+    ["السجل التجاري", row.commercialRecord, "ltr-value"],
+    ["الرقم الموحد", row.unifiedNumber, "ltr-value"],
+    ["المدينة الصناعية", row.city, "wide"],
+    ["النشاط", row.activity, "wide"],
   ].forEach(([label, value, className]) => {
-    if (String(value ?? "").trim()) details.append(createDetail(label, value, className));
+    if (String(value ?? "").trim()) details.append(detailItem(label, value, className));
   });
-  const coordinatesBlock = createCoordinatesBlock(row);
-  if (coordinatesBlock) details.append(coordinatesBlock);
+  const location = createLocationBlock(row);
+  if (location) details.append(location);
 
-  card.append(header, details);
+  const footer = document.createElement("div");
+  footer.className = "card-actions";
+  footer.append(
+    actionButton("نسخ بيانات العينة", ICONS.copy, () => copyText(sampleMessage(row), "تم نسخ بيانات العينة")),
+  );
+  const representative = findRepresentative(row.representativeCity || row.city);
+  if (representative && !row.coordinates) {
+    const message = representativeMessage(representative, row);
+    footer.append(
+      actionLink(
+        `مراسلة ${representative.name.split(" ")[0]}`,
+        `https://wa.me/${internationalPhone(representative.phone)}?text=${encodeURIComponent(message)}`,
+        ICONS.whatsapp,
+      ),
+    );
+  }
+  card.append(header, details, footer);
   return card;
 }
 
-function renderVisibleRows(reset = false) {
+function renderRows(reset = false) {
   if (reset) {
     renderedCount = 0;
-    samplesGrid.replaceChildren();
+    elements.samplesGrid.replaceChildren();
   }
   const fragment = document.createDocumentFragment();
   visibleRows.slice(renderedCount, renderedCount + PAGE_SIZE).forEach((row, offset) => {
     fragment.append(createCard(row, renderedCount + offset));
   });
-  samplesGrid.append(fragment);
+  elements.samplesGrid.append(fragment);
   renderedCount += Math.min(PAGE_SIZE, visibleRows.length - renderedCount);
   const remaining = visibleRows.length - renderedCount;
-  loadMoreWrap.hidden = remaining <= 0;
-  loadMoreButton.textContent = `عرض المزيد (${Math.min(PAGE_SIZE, remaining)})`;
-  loadMoreMeta.textContent = `تم عرض ${renderedCount} من أصل ${visibleRows.length} منشأة`;
+  elements.loadMoreWrap.hidden = remaining <= 0;
+  elements.loadMoreMeta.textContent = remaining > 0 ? `متبقي ${remaining} عينة` : "";
 }
 
 function applyFilters() {
-  const region = regionSelect.value;
-  const city = citySelect.value;
-  const query = normalize(searchInput.value);
-
-  const scopedRows = rows.filter((row) => {
-    const matchesRegion = !region || row.region === region;
-    const matchesCity = !city || row.city === city;
-    return matchesRegion && matchesCity;
+  if (!activeResearcher) return;
+  const city = activeCity();
+  const query = normalize(elements.searchInput.value);
+  const status = elements.statusSelect.value;
+  const location = elements.locationSelect.value;
+  visibleRows = researcherRows.filter((row) => {
+    if (city && row.city !== city) return false;
+    if (status && row.status !== status) return false;
+    if (location && row.locationType !== location) return false;
+    if (query) {
+      const haystack = normalize(
+        [row.establishmentName, row.commercialRecord, row.unifiedNumber, row.activity].join(" "),
+      );
+      if (!haystack.includes(query)) return false;
+    }
+    return true;
   });
+  elements.resultsTitle.textContent = city || "جميع العينات";
+  elements.resultsMeta.textContent = `${visibleRows.length} من أصل ${researcherRows.length} عينة`;
+  elements.noResults.hidden = visibleRows.length > 0;
+  renderRows(true);
+  saveState();
+}
 
-  visibleRows = sortRowsByLocationInfo(scopedRows.filter((row) => {
-    if (!query) return Boolean(city || region);
-    return (
-      normalize(row.establishmentName).includes(query) ||
-      normalize(row.commercialRecord).includes(query) ||
-      normalize(row.cityClarification).includes(query)
-    );
-  }));
-
-  const shouldShow = visibleRows.length > 0 || city || region || query;
-  emptyState.hidden = shouldShow;
-  resultsSection.hidden = !shouldShow;
-  noResults.hidden = visibleRows.length !== 0;
-  resultsTitle.textContent = city || region || "نتائج البحث";
-  resultsMeta.textContent = `${visibleRows.length} من أصل ${scopedRows.length} منشأة`;
-  renderVisibleRows(true);
-  saveFilterState();
-}
-
-function initializeDashboard(data) {
-  rows = data.rows || [];
-  const regions = data.regions || uniqueSorted(rows.map((row) => row.region));
-  setOptions(regionSelect, regions, "اختر المنطقة");
-  const regionCounts = new Map();
-  rows.forEach((row) => regionCounts.set(row.region, (regionCounts.get(row.region) || 0) + 1));
-  regionButtons.replaceChildren(
-    ...regions.map((region) => {
-      const button = document.createElement("button");
-      button.type = "button";
-      button.className = "region-choice";
-      button.dataset.region = region;
-      button.setAttribute("role", "radio");
-      button.setAttribute("aria-checked", "false");
-      const name = document.createElement("span");
-      name.textContent = region;
-      const count = document.createElement("strong");
-      count.textContent = regionCounts.get(region) || 0;
-      button.append(name, count);
-      button.addEventListener("click", () => setRegion(region));
-      return button;
-    }),
-  );
-  setOptions(citySelect, [], "اختر المدينة الصناعية");
-  citySelect.disabled = true;
-  restoreFilterState();
-}
-
-function restoreFilterState() {
-  const saved = getSavedFilterState();
-  isRestoringState = true;
-  searchInput.value = saved.search || "";
-  if (saved.region && [...regionSelect.options].some((option) => option.value === saved.region)) {
-    setRegion(saved.region);
-    if (saved.city && [...citySelect.options].some((option) => option.value === saved.city)) {
-      citySelect.value = saved.city;
-    }
-  } else {
-    setRegion("");
-  }
-  isRestoringState = false;
-  applyFilters();
+function clearFilters() {
+  elements.searchInput.value = "";
+  elements.statusSelect.value = "";
+  elements.locationSelect.value = "";
+  setActiveCity("");
 }
 
-function performLogout() {
-  rows = [];
-  visibleRows = [];
-  searchInput.value = "";
-  setRegion("");
-  citySelect.value = "";
-  dashboardView.hidden = true;
-  loginView.hidden = false;
-  passwordInput.focus();
+function shareForm() {
+  const message = [
+    "السلام عليكم ورحمة الله وبركاته",
+    "",
+    "نرفق لكم استمارة المسح المطلوبة، ونأمل التكرم بتعبئتها.",
+    "",
+    FORM_URL,
+    "",
+    "شاكرين لكم تعاونكم.",
+  ].join("\n");
+  window.open(`https://wa.me/?text=${encodeURIComponent(message)}`, "_blank", "noopener");
 }
 
-loginForm.addEventListener("submit", async (event) => {
+elements.loginForm.addEventListener("submit", async (event) => {
   event.preventDefault();
-  const password = passwordInput.value.trim();
-  if (!password) return;
-  loginButton.disabled = true;
-  loginButton.querySelector("span").textContent = "جاري التحقق...";
-  loginError.textContent = "";
-
+  elements.loginError.textContent = "";
+  elements.loginButton.disabled = true;
+  elements.loginButton.querySelector("span").textContent = "جارٍ الدخول...";
   try {
-    const data = await decryptData(password);
-    initializeDashboard(data);
-    passwordInput.value = "";
-    loginView.hidden = true;
-    dashboardView.hidden = false;
+    payload = await decryptData(elements.password.value);
+    elements.password.value = "";
+    elements.researcherSearch.value = "";
+    renderResearchers();
+    showOnly(elements.researcherView);
   } catch {
-    loginError.textContent = "رمز الدخول غير صحيح.";
-    passwordInput.select();
+    elements.loginError.textContent = "رمز الدخول غير صحيح.";
   } finally {
-    loginButton.disabled = false;
-    loginButton.querySelector("span").textContent = "دخول";
+    elements.loginButton.disabled = false;
+    elements.loginButton.querySelector("span").textContent = "دخول";
   }
 });
 
-togglePassword.addEventListener("click", () => {
-  const showing = passwordInput.type === "text";
-  passwordInput.type = showing ? "password" : "text";
-  togglePassword.setAttribute("aria-label", showing ? "إظهار رمز الدخول" : "إخفاء رمز الدخول");
+elements.togglePassword.addEventListener("click", () => {
+  const visible = elements.password.type === "text";
+  elements.password.type = visible ? "password" : "text";
+  elements.togglePassword.setAttribute("aria-label", visible ? "إظهار رمز الدخول" : "إخفاء رمز الدخول");
 });
-
-logoutButton.addEventListener("click", performLogout);
-
-regionSelect.addEventListener("change", () => setRegion(regionSelect.value));
-
-citySelect.addEventListener("change", applyFilters);
-searchInput.addEventListener("input", applyFilters);
-loadMoreButton.addEventListener("click", () => renderVisibleRows());
-clearFiltersButton.addEventListener("click", () => {
-  searchInput.value = "";
-  localStorage.removeItem(STATE_KEY);
-  setRegion("");
-  showToast("تم مسح الاختيارات");
+elements.researcherSearch.addEventListener("input", renderResearchers);
+elements.switchResearcherButton.addEventListener("click", () => {
+  activeResearcher = null;
+  renderResearchers();
+  showOnly(elements.researcherView);
+  window.scrollTo({ top: 0 });
 });
-
-if (!window.crypto?.subtle || typeof ENCRYPTED_DATA === "undefined") {
-  loginButton.disabled = true;
-  loginError.textContent = "تعذر تشغيل التشفير في هذا المتصفح. استخدم متصفحًا حديثًا.";
-}
+elements.logoutButton.addEventListener("click", () => {
+  payload = null;
+  activeResearcher = null;
+  researcherRows = [];
+  visibleRows = [];
+  showOnly(elements.loginView);
+  elements.password.focus();
+});
+elements.searchInput.addEventListener("input", applyFilters);
+elements.statusSelect.addEventListener("change", applyFilters);
+elements.locationSelect.addEventListener("change", applyFilters);
+elements.clearFiltersButton.addEventListener("click", clearFilters);
+elements.loadMoreButton.addEventListener("click", () => renderRows(false));
+elements.shareFormButton.addEventListener("click", shareForm);

generate-data.mjs

@@ -4,72 +4,148 @@ import { FileBlob, SpreadsheetFile } from "@oai/artifact-tool";
 
 const [inputPath, outputPath, password = "20302030"] = process.argv.slice(2);
 
-const CITY_INFO = new Map([
-  ["المدينة الصناعية الأولى بالدمام", { region: "منطقة الدمام", city: "الصناعية الأولى بالدمام" }],
-  ["المدينة صناعية الثانية بالدمام", { region: "منطقة الدمام", city: "الصناعية الثانية بالدمام" }],
-  ["المدينة صناعية الثالثة بالدمام", { region: "منطقة الدمام", city: "الصناعية الثالثة بالدمام" }],
-  ["المدينة صناعية الأولى بالأحساء", { region: "منطقة الأحساء", city: "المدينة صناعية الأولى بالأحساء" }],
-  ["المدينة الصناعية بحفر الباطن", { region: "منطقة حفر الباطن", city: "المدينة الصناعية بحفر الباطن" }],
-  ['مدينة الملك سلمان "سبارك"', { region: "سبارك", city: "مدينة الملك سلمان" }],
-]);
-
-const REGIONS = ["منطقة الدمام", "منطقة الأحساء", "منطقة حفر الباطن", "سبارك"];
-
-function normalizeHeader(value) {
-  return String(value ?? "")
-    .replace(/\s+/g, " ")
-    .trim();
+const MAP_URLS = [
+  ["أماني مصطفى عبدالله الطيب", "https://stat2025-map.static.hf.space/Rahn/02.html"],
+  ["اسعد بن ماجد بن", "https://stat2025-map.static.hf.space/Rahn/03.html"],
+  ["اسماعيل خليفه السماعيل", "https://stat2025-map.static.hf.space/Rahn/04.html"],
+  ["ريم بنت محمد بن عبدالعزيز الملحم", "https://stat2025-map.static.hf.space/Rahn/05.html"],
+  ["زكي بن عيسى بن", "https://stat2025-map.static.hf.space/Rahn/06.html"],
+  ["ساره حسين بن عبدالهادي بوخمسين", "https://stat2025-map.static.hf.space/Rahn/07.html"],
+  ["ساره خالد سليمان المحيسن", "https://stat2025-map.static.hf.space/Rahn/08.html"],
+  ["طيبه فالح بن عبدالله الرويشد", "https://stat2025-map.static.hf.space/Rahn/09.html"],
+  ["عبدالعزيز فهد عبدالعزيز العبلان", "https://stat2025-map.static.hf.space/Rahn/10.html"],
+  ["علي جابر بن علي", "https://stat2025-map.static.hf.space/Rahn/11.html"],
+  ["عماد بن عيسى بن", "https://stat2025-map.static.hf.space/Rahn/12.html"],
+  ["عمران فخري بن عمران", "https://stat2025-map.static.hf.space/Rahn/13.html"],
+  ["فهد علي بن عبدالخالق الغامدي", "https://stat2025-map.static.hf.space/Rahn/14.html"],
+  ["فوز عائد نومان المطيري", "https://stat2025-map.static.hf.space/Rahn/15.html"],
+  ["قنوت محمد بن عبدالله آل حماد", "https://stat2025-map.static.hf.space/Rahn/16.html"],
+  ["لولوه بدر بن حمد الصياح", "https://stat2025-map.static.hf.space/Rahn/17.html"],
+  ["لين أحمد بن عبدالعزيز القصير", "https://stat2025-map.static.hf.space/Rahn/18.html"],
+  ["ماجد سعد ناصر السبيعي", "https://stat2025-map.static.hf.space/Rahn/19.html"],
+  ["مرتضى عبدالجليل بن عيسى", "https://stat2025-map.static.hf.space/Rahn/20.html"],
+  ["نبأ عادل بن عبدالكريم", "https://stat2025-map.static.hf.space/Rahn/21.html"],
+  ["نوف سعود بن سالم الخثعمي", "https://stat2025-map.static.hf.space/Rahn/22.html"],
+  ["نيللي حسين عبدالله الجعص", "https://stat2025-map.static.hf.space/Rahn/23.html"],
+  ["هبه عبدالعزيز", "https://stat2025-map.static.hf.space/Rahn/24.html"],
+];
+
+function clean(value) {
+  if (value === null || value === undefined || value === 0) return "";
+  return String(value).replace(/\u00a0/g, " ").replace(/\s+/g, " ").trim();
 }
 
-function getByHeader(row, headers, candidates) {
-  for (const candidate of candidates) {
-    const index = headers.findIndex((header) => normalizeHeader(header) === candidate);
-    if (index !== -1) return row[index] ?? "";
-  }
+function normalize(value) {
+  return clean(value)
+    .normalize("NFKD")
+    .replace(/[\u064B-\u065F\u0670]/g, "")
+    .replace(/[أإآ]/g, "ا")
+    .replace(/ى/g, "ي")
+    .replace(/ة/g, "ه")
+    .toLowerCase();
+}
+
+function numeric(value) {
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : null;
+}
+
+function coordinateFromText(value) {
+  const text = clean(value);
+  const match = text.match(/(-?\d{1,2}(?:\.\d+)?)\s*[,،]\s*(-?\d{1,3}(?:\.\d+)?)/);
+  if (!match) return "";
+  const first = Number(match[1]);
+  const second = Number(match[2]);
+  if (first >= 15 && first <= 35 && second >= 35 && second <= 60) return `${first}, ${second}`;
+  if (second >= 15 && second <= 35 && first >= 35 && first <= 60) return `${second}, ${first}`;
   return "";
 }
 
-function clean(value) {
-  if (value === null || value === undefined) return "";
-  return String(value).trim();
+function canonicalCity(primary, fallback) {
+  const raw = clean(primary) || clean(fallback) || "غير محدد";
+  const city = normalize(raw);
+  if (city.includes("الصناعيه الثانيه") && city.includes("الدمام")) return "المدينة الصناعية الثانية بالدمام";
+  if ((city.includes("الصناعيه الاولي") || city === "الصناعيه الاولي") && !city.includes("الاحساء")) {
+    return "المدينة الصناعية الأولى بالدمام";
+  }
+  if (city.includes("الصناعيه الثالثه") && city.includes("الدمام")) return "المدينة الصناعية الثالثة بالدمام";
+  if (city.includes("الاحساء") || city === "العيون" || city.includes("واحه مدن")) return "المدينة الصناعية الأولى بالأحساء";
+  if (city.includes("حفر الباطن")) return "المدينة الصناعية بحفر الباطن";
+  if (city.includes("الملك سلمان") || city.includes("سكيكو") || city.includes("ارامكو")) return "مدينة الملك سلمان (سبارك)";
+  if (city.includes("الصناعيه الثانيه") && city.includes("الرياض")) return "المدينة الصناعية الثانية بالرياض";
+  return raw;
+}
+
+function mapUrlFor(researcher) {
+  const target = normalize(researcher);
+  const exact = MAP_URLS.find(([name]) => normalize(name) === target);
+  if (exact) return exact[1];
+  const partial = MAP_URLS.find(([name]) => target.includes(normalize(name)) || normalize(name).includes(target));
+  return partial?.[1] || "";
 }
 
 if (!inputPath || !outputPath) {
   console.error("Usage: node generate-data.mjs <input.xlsx> <output.js> [password]");
   process.exitCode = 1;
 } else {
-  const blob = await FileBlob.load(inputPath);
-  const workbook = await SpreadsheetFile.importXlsx(blob);
+  const workbook = await SpreadsheetFile.importXlsx(await FileBlob.load(inputPath));
+  const sheet = workbook.worksheets.getItemAt(0);
+  const values = sheet.getUsedRange(true).values;
   const rows = [];
 
-  for (const sheet of workbook.worksheets.items) {
-    const info = CITY_INFO.get(sheet.name);
-    if (!info) continue;
-    const { region, city } = info;
-
-    const values = sheet.getUsedRange(true).values;
-    if (!values?.length) continue;
-    const headers = values[0].map(normalizeHeader);
-
-    for (const sourceRow of values.slice(1)) {
-      const establishmentName = clean(getByHeader(sourceRow, headers, ["إسم المنشأة", "اسم المنشأة"]));
-      if (!establishmentName) continue;
-      rows.push({
-        region,
-        city,
-        establishmentName,
-        commercialRecord: clean(getByHeader(sourceRow, headers, ["السجل التجاري من الاطار", "السجل التجاري"])),
-        complianceStatus: clean(getByHeader(sourceRow, headers, ["حالة الاستيفاء"])),
-        cityClarification: clean(getByHeader(sourceRow, headers, ["توضيح المدينة", "توضيح المدينة الصناعية"])),
-        coordinates: clean(getByHeader(sourceRow, headers, ["الاحداثيات", "الإحداثية", "الإحداثيات"])),
-      });
-    }
+  for (const source of values.slice(1)) {
+    const researcher = clean(source[0]);
+    const establishmentName = clean(source[1]) || clean(source[2]);
+    if (!researcher || !establishmentName) continue;
+
+    const madonStatement = clean(source[7]);
+    const madonNote = clean(source[8]);
+    const madonCoordinates = coordinateFromText(madonNote);
+    const x = numeric(source[9]);
+    const y = numeric(source[10]);
+    const baseCoordinates =
+      x !== null && y !== null && x >= 35 && x <= 60 && y >= 15 && y <= 35 ? `${y}, ${x}` : "";
+    const coordinates = madonCoordinates || baseCoordinates;
+    const locationType = madonCoordinates
+      ? "madon"
+      : baseCoordinates
+        ? "base"
+        : madonStatement || madonNote
+          ? "statement"
+          : "none";
+
+    rows.push({
+      researcher,
+      establishmentName,
+      contractNumber: clean(source[3]),
+      city: canonicalCity(source[5], source[4]),
+      sourceCity: clean(source[5]) || clean(source[4]),
+      representativeCity: canonicalCity("", source[4]),
+      status: clean(source[6]),
+      madonStatement,
+      madonNoteText: madonCoordinates ? "" : madonNote,
+      coordinates,
+      locationType,
+      commercialRecord: clean(source[11]),
+      unifiedNumber: clean(source[12]),
+      activityCode: clean(source[13]),
+      activity: clean(source[14]),
+    });
   }
 
-  const payload = JSON.stringify({
-    version: 2,
+  const counts = new Map();
+  rows.forEach((row) => counts.set(row.researcher, (counts.get(row.researcher) || 0) + 1));
+  const researchers = [...counts.entries()]
+    .map(([name, count]) => ({ name, count, mapUrl: mapUrlFor(name) }))
+    .sort((a, b) => a.name.localeCompare(b.name, "ar", { sensitivity: "base" }));
+
+  const missingMaps = researchers.filter((item) => !item.mapUrl).map((item) => item.name);
+  if (missingMaps.length) throw new Error(`Missing map URLs: ${missingMaps.join(", ")}`);
+
+  const plainPayload = JSON.stringify({
+    version: 3,
     generatedAt: new Date().toISOString(),
-    regions: REGIONS,
+    researchers,
     rows,
   });
 
@@ -78,12 +154,10 @@ if (!inputPath || !outputPath) {
   const iv = crypto.randomBytes(12);
   const key = crypto.pbkdf2Sync(password, salt, iterations, 32, "sha256");
   const cipher = crypto.createCipheriv("aes-256-gcm", key, iv);
-  const encrypted = Buffer.concat([cipher.update(payload, "utf8"), cipher.final()]);
-  const authTag = cipher.getAuthTag();
-  const combined = Buffer.concat([encrypted, authTag]);
-
+  const encrypted = Buffer.concat([cipher.update(plainPayload, "utf8"), cipher.final()]);
+  const combined = Buffer.concat([encrypted, cipher.getAuthTag()]);
   const output = [
-    "/* Generated encrypted data. Replace this file using generate-data.mjs when the workbook changes. */",
+    "/* Generated encrypted data. Rebuild this file from the source workbook. */",
     "const ENCRYPTED_DATA = Object.freeze({",
     `  iterations: ${iterations},`,
     `  salt: "${salt.toString("base64")}",`,
@@ -94,5 +168,12 @@ if (!inputPath || !outputPath) {
   ].join("\n");
 
   await fs.writeFile(outputPath, output, "utf8");
-  console.log(JSON.stringify({ rows: rows.length, regions: REGIONS.length, outputPath }));
+  console.log(JSON.stringify({
+    rows: rows.length,
+    researchers: researchers.length,
+    madonCoordinates: rows.filter((row) => row.locationType === "madon").length,
+    baseCoordinates: rows.filter((row) => row.locationType === "base").length,
+    statements: rows.filter((row) => row.locationType === "statement").length,
+    noLocation: rows.filter((row) => row.locationType === "none").length,
+  }));
 }

index.html

@@ -5,30 +5,23 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="theme-color" content="#4137A8" />
     <meta name="robots" content="noindex, nofollow" />
-    <title>شاشة استعلام</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap"
-      rel="stylesheet"
-    />
+    <title>بوابة الباحث الميداني</title>
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
     <main>
-      <section id="loginView" class="login-view">
-        <form id="loginForm" class="login-card" autocomplete="off">
+      <section id="loginView" class="center-view">
+        <form id="loginForm" class="access-panel" autocomplete="off">
           <div class="brand-mark" aria-hidden="true">
             <svg viewBox="0 0 24 24"><path d="M4 20V8l8-4 8 4v12H4Z" /><path d="M8 20v-7h8v7" /></svg>
           </div>
-          <p class="eyebrow">نظام الاستعلام</p>
-          <h1>شاشة استعلام</h1>
-          <p class="login-description">أدخل رمز الدخول للمتابعة.</p>
-
+          <p class="eyebrow">قياس الوضع الراهن</p>
+          <h1>بوابة الباحث الميداني</h1>
+          <p class="lead">أدخل رمز الدخول للوصول إلى العينات وأدوات العمل الميداني.</p>
           <label for="password">رمز الدخول</label>
-          <div class="password-field">
+          <div class="input-shell">
             <input id="password" type="password" inputmode="numeric" placeholder="رمز الدخول" required autofocus />
-            <button id="togglePassword" type="button" class="icon-button" aria-label="إظهار رمز الدخول">
+            <button id="togglePassword" class="icon-button" type="button" aria-label="إظهار رمز الدخول" title="إظهار رمز الدخول">
               <svg viewBox="0 0 24 24"><path d="M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z" /><circle cx="12" cy="12" r="2.8" /></svg>
             </button>
           </div>
@@ -40,6 +33,21 @@
         </form>
       </section>
 
+      <section id="researcherView" class="center-view" hidden>
+        <div class="researcher-panel">
+          <div class="panel-heading">
+            <p class="eyebrow">اختيار الملف</p>
+            <h1>اختر اسم الباحث</h1>
+            <p>سيتم عرض العينات والخريطة والأدوات الخاصة بالباحث المختار.</p>
+          </div>
+          <div class="search-shell">
+            <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" /><path d="m20 20-4-4" /></svg>
+            <input id="researcherSearch" type="search" placeholder="ابحث باسم الباحث" />
+          </div>
+          <div id="researcherGrid" class="researcher-grid"></div>
+        </div>
+      </section>
+
       <section id="dashboardView" class="dashboard-view" hidden>
         <header class="topbar">
           <div class="topbar-brand">
@@ -47,80 +55,106 @@
               <svg viewBox="0 0 24 24"><path d="M4 20V8l8-4 8 4v12H4Z" /><path d="M8 20v-7h8v7" /></svg>
             </div>
             <div>
-              <p>نظام الاستعلام</p>
-              <h1>شاشة استعلام</h1>
+              <p>بوابة الباحث الميداني</p>
+              <h1 id="researcherName"></h1>
             </div>
           </div>
-          <button id="logoutButton" class="secondary-button compact" type="button">
-            <svg viewBox="0 0 24 24"><path d="M10 17l5-5-5-5M15 12H3M15 4h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4" /></svg>
-            خروج
-          </button>
+          <div class="topbar-actions">
+            <button id="switchResearcherButton" class="secondary-button compact" type="button">
+              <svg viewBox="0 0 24 24"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8M19 8v6M22 11h-6" /></svg>
+              تغيير الباحث
+            </button>
+            <button id="logoutButton" class="icon-button topbar-icon" type="button" aria-label="تسجيل الخروج" title="تسجيل الخروج">
+              <svg viewBox="0 0 24 24"><path d="M10 17l5-5-5-5M15 12H3M15 4h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4" /></svg>
+            </button>
+          </div>
         </header>
 
         <div class="dashboard-shell">
-          <section class="summary-panel">
-            <div class="summary-copy">
-              <p class="eyebrow">لوحة الاستعلام</p>
-              <h2>اختر المنطقة والمدينة الصناعية أو ابحث باسم المنشأة مباشرة</h2>
+          <section class="workspace-header">
+            <div>
+              <p class="eyebrow">مساحة العمل</p>
+              <h2>عينات الباحث وأدوات الزيارة الميدانية</h2>
             </div>
+            <div id="summaryStats" class="summary-stats"></div>
+          </section>
+
+          <section class="quick-actions" aria-label="أدوات الباحث">
+            <a id="researcherMapLink" class="tool-action map-action" target="_blank" rel="noopener">
+              <span class="tool-icon"><svg viewBox="0 0 24 24"><path d="m3 6 6-3 6 3 6-3v15l-6 3-6-3-6 3V6Z M9 3v15M15 6v15" /></svg></span>
+              <span><strong>الخريطة الشاملة</strong><small>عرض جميع مواقع الباحث</small></span>
+              <svg class="action-arrow" viewBox="0 0 24 24"><path d="m15 18-6-6 6-6" /></svg>
+            </a>
+            <a id="formLink" class="tool-action form-action" target="_blank" rel="noopener">
+              <span class="tool-icon"><svg viewBox="0 0 24 24"><path d="M6 2h9l4 4v16H6V2Z M14 2v5h5M9 12h7M9 16h7M9 8h2" /></svg></span>
+              <span><strong>استمارة المسح</strong><small>فتح الاستمارة عند طلب المنشأة</small></span>
+              <svg class="action-arrow" viewBox="0 0 24 24"><path d="m15 18-6-6 6-6" /></svg>
+            </a>
+            <button id="shareFormButton" class="tool-action share-action" type="button">
+              <span class="tool-icon"><svg viewBox="0 0 24 24"><path d="M20.5 11.5a8.5 8.5 0 0 1-12.6 7.4L3 20l1.2-4.7A8.5 8.5 0 1 1 20.5 11.5Z M8.6 8.7c.2 3.3 2.7 5.8 6 6.2" /></svg></span>
+              <span><strong>إرسال الاستمارة</strong><small>مشاركة رسالة جاهزة عبر واتساب</small></span>
+              <svg class="action-arrow" viewBox="0 0 24 24"><path d="m15 18-6-6 6-6" /></svg>
+            </button>
           </section>
 
           <section class="controls-panel">
+            <div class="city-section">
+              <span class="field-label">المدينة الصناعية</span>
+              <div id="cityButtons" class="city-buttons" role="radiogroup" aria-label="اختيار المدينة الصناعية"></div>
+            </div>
             <div class="filters-grid">
-              <div class="field-group region-group">
-                <span class="field-label">المنطقة</span>
-                <div id="regionButtons" class="region-buttons" role="radiogroup" aria-label="اختيار المنطقة"></div>
-                <select id="regionSelect" class="region-select-hidden" aria-hidden="true" tabindex="-1">
-                  <option value="">اختر المنطقة</option>
-                </select>
-              </div>
-
-              <div class="field-group">
-                <label for="citySelect">المدينة الصناعية</label>
-                <div class="select-wrap">
-                  <select id="citySelect" disabled><option value="">اختر المدينة الصناعية</option></select>
+              <label class="field-group search-group">
+                <span>البحث</span>
+                <div class="search-shell">
+                  <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" /><path d="m20 20-4-4" /></svg>
+                  <input id="searchInput" type="search" placeholder="اسم المنشأة أو السجل التجاري أو الرقم الموحد" />
+                </div>
+              </label>
+              <label class="field-group">
+                <span>حالة المنشأة</span>
+                <div class="select-shell">
+                  <select id="statusSelect"><option value="">جميع الحالات</option></select>
                   <svg viewBox="0 0 24 24"><path d="m7 10 5 5 5-5" /></svg>
                 </div>
-              </div>
-
-              <div class="field-group search-group">
-                <label for="searchInput">اسم المنشأة</label>
-                <div class="search-wrap">
-                  <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" /><path d="m20 20-4-4" /></svg>
-                  <input id="searchInput" type="search" placeholder="ابحث باسم المنشأة أو السجل التجاري" />
+              </label>
+              <label class="field-group">
+                <span>بيانات الموقع</span>
+                <div class="select-shell">
+                  <select id="locationSelect">
+                    <option value="">جميع العينات</option>
+                    <option value="madon">إحداثية مدن</option>
+                    <option value="base">إحداثية أساسية</option>
+                    <option value="statement">إفادة مدن فقط</option>
+                    <option value="none">لا توجد تفاصيل موقع</option>
+                  </select>
+                  <svg viewBox="0 0 24 24"><path d="m7 10 5 5 5-5" /></svg>
                 </div>
-              </div>
-            </div>
-
-            <div class="filters-actions">
-              <button id="clearFiltersButton" class="clear-filters-button" type="button">
+              </label>
+              <button id="clearFiltersButton" class="clear-button" type="button">
                 <svg viewBox="0 0 24 24"><path d="M18 6 6 18M6 6l12 12" /></svg>
-                مسح الاختيارات
+                مسح الفلاتر
               </button>
             </div>
           </section>
 
-          <section id="emptyState" class="empty-state">
-            <h3>ابدأ بالاختيار أو البحث</h3>
-            <p>عند اختيار مدينة صناعية ستظهر كل بياناتها بالأسفل، ويمكن تضييق النتائج بالبحث.</p>
-          </section>
+          <section id="representativePanel" class="representative-panel" hidden></section>
 
-          <section id="resultsSection" class="results-section" hidden>
+          <section class="results-section">
             <div class="results-header">
               <div>
                 <p id="resultsMeta" class="results-meta"></p>
-                <h2 id="resultsTitle">النتائج</h2>
+                <h2 id="resultsTitle">العينات</h2>
               </div>
             </div>
             <div id="samplesGrid" class="samples-grid"></div>
+            <div id="noResults" class="empty-state" hidden>
+              <h3>لا توجد نتائج مطابقة</h3>
+              <p>جرّب تغيير المدينة أو الحالة أو كتابة جزء من اسم المنشأة.</p>
+            </div>
             <div id="loadMoreWrap" class="load-more-wrap" hidden>
-              <button id="loadMoreButton" class="secondary-button load-more-button" type="button">عرض المزيد</button>
+              <button id="loadMoreButton" class="secondary-button" type="button">عرض المزيد</button>
               <p id="loadMoreMeta"></p>
             </div>
-            <div id="noResults" class="no-results" hidden>
-              <h3>لا توجد نتائج مطابقة</h3>
-              <p>جرّب كتابة جزء من اسم المنشأة أو رقم السجل التجاري.</p>
-            </div>
           </section>
         </div>
       </section>

style.css

@@ -1,20 +1,34 @@
+@font-face {
+  font-family: "TheSansArabic";
+  src: url("Font/Bahij_TheSansArabic-SemiLight.ttf") format("truetype");
+  font-weight: 400 600;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "TheSansArabic";
+  src: url("Font/Bahij_TheSansArabic-SemiBold.ttf") format("truetype");
+  font-weight: 700 900;
+  font-display: swap;
+}
+
 :root {
-  --ink: #1CADE4;
-  --muted: #5C6E88;
-  --line: #d7e2ee;
-  --page: #f5f8fb;
-  --surface: #ffffff;
-  --primary: #4137A8;
-  --primary-dark: #1CADE4;
-  --accent: #00B050;
-  --accent-soft: #e8f8f0;
-  --accent-alt: #42BA97;
-  --info: #27CED7;
-  --purple: #7030A0;
-  --warning: #5C6E88;
-  --warning-soft: #fff7d1;
-  --danger: #F5544A;
-  --shadow: 0 10px 28px rgba(92, 110, 136, 0.11);
+  --primary: #4137a8;
+  --primary-2: #1cade4;
+  --green: #00b050;
+  --mint: #42ba97;
+  --cyan: #27ced7;
+  --purple: #7030a0;
+  --yellow: #ffc000;
+  --red: #f5544a;
+  --slate: #5c6e88;
+  --ink: #183348;
+  --muted: #687b8d;
+  --page: #f4f7f9;
+  --line: #dce6eb;
+  --white: #fff;
+  --shadow: 0 12px 34px rgba(39, 58, 74, 0.09);
+  --lift: 0 18px 42px rgba(39, 58, 74, 0.14);
 }
 
 * {
@@ -22,17 +36,17 @@
 }
 
 html {
-  min-height: 100%;
-  background: var(--page);
+  scroll-behavior: smooth;
 }
 
 body {
-  min-height: 100vh;
+  min-width: 320px;
   margin: 0;
   color: var(--ink);
-  font-family: "Tajawal", Arial, sans-serif;
-  font-size: 16px;
-  background: linear-gradient(180deg, #fbfcfd 0%, var(--page) 100%);
+  background:
+    linear-gradient(180deg, rgba(65, 55, 168, 0.08), transparent 260px),
+    var(--page);
+  font-family: "TheSansArabic", "Tahoma", sans-serif;
 }
 
 button,
@@ -41,50 +55,68 @@ select {
   font: inherit;
 }
 
-button {
-  cursor: pointer;
+button,
+a {
+  -webkit-tap-highlight-color: transparent;
 }
 
-[hidden] {
-  display: none !important;
+button {
+  cursor: pointer;
 }
 
 svg {
-  width: 20px;
-  height: 20px;
+  width: 21px;
+  height: 21px;
   fill: none;
   stroke: currentColor;
+  stroke-width: 1.8;
   stroke-linecap: round;
   stroke-linejoin: round;
-  stroke-width: 1.8;
 }
 
-.login-view {
-  min-height: calc(100vh - 52px);
+[hidden] {
+  display: none !important;
+}
+
+.center-view {
+  min-height: calc(100vh - 48px);
   display: grid;
   place-items: center;
-  padding: 24px;
+  padding: 34px 18px;
 }
 
-.login-card {
-  width: min(100%, 430px);
+.access-panel,
+.researcher-panel {
+  width: min(100%, 520px);
   padding: 34px;
-  text-align: right;
-  background: var(--surface);
+  background: var(--white);
   border: 1px solid var(--line);
   border-radius: 8px;
   box-shadow: var(--shadow);
 }
 
+.access-panel {
+  position: relative;
+  overflow: hidden;
+}
+
+.access-panel::before {
+  content: "";
+  position: absolute;
+  inset: 0 0 auto;
+  height: 5px;
+  background: linear-gradient(90deg, var(--green), var(--primary), var(--primary-2));
+}
+
 .brand-mark {
-  width: 56px;
-  height: 56px;
+  width: 62px;
+  height: 62px;
   display: grid;
   place-items: center;
-  margin-bottom: 18px;
-  color: #fff;
-  background: var(--primary);
+  color: white;
+  background: linear-gradient(145deg, var(--primary), var(--primary-2));
   border-radius: 8px;
+  box-shadow: 0 10px 24px rgba(65, 55, 168, 0.2);
 }
 
 .brand-mark svg {
@@ -95,13 +127,17 @@ svg {
 .brand-mark.small {
   width: 44px;
   height: 44px;
-  margin: 0;
+}
+
+.brand-mark.small svg {
+  width: 25px;
+  height: 25px;
 }
 
 .eyebrow {
-  margin: 0 0 6px;
-  color: var(--accent);
-  font-size: 13px;
+  margin: 20px 0 5px;
+  color: var(--green);
+  font-size: 14px;
   font-weight: 800;
 }
 
@@ -109,1309 +145,975 @@ h1,
 h2,
 h3,
 p {
-  overflow-wrap: anywhere;
+  margin-top: 0;
 }
 
-.login-card h1 {
-  margin: 0;
-  color: var(--primary-dark);
-  font-size: 28px;
-  line-height: 1.35;
+.access-panel h1,
+.panel-heading h1 {
+  margin-bottom: 10px;
+  font-size: 30px;
+  line-height: 1.45;
 }
 
-.login-description {
-  margin: 10px 0 24px;
+.lead,
+.panel-heading p {
   color: var(--muted);
   line-height: 1.8;
 }
 
-.login-card label,
-.field-group label {
+.access-panel label,
+.field-group > span,
+.field-label {
   display: block;
-  margin-bottom: 8px;
-  color: #34495a;
-  font-weight: 700;
+  margin: 20px 0 8px;
+  color: #344d60;
+  font-weight: 800;
 }
 
-.password-field,
-.search-wrap,
-.select-wrap {
+.input-shell,
+.search-shell,
+.select-shell {
   position: relative;
 }
 
-.password-field input,
-.search-wrap input,
-.select-wrap select {
+.input-shell input,
+.search-shell input,
+.select-shell select {
   width: 100%;
-  height: 50px;
+  min-height: 52px;
+  padding: 0 16px;
   color: var(--ink);
-  background: #fbfdfe;
-  border: 1px solid var(--line);
+  background: #fff;
+  border: 1px solid #cfdee5;
   border-radius: 8px;
   outline: none;
-  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
+  transition: border-color 0.18s, box-shadow 0.18s;
 }
 
-.password-field input {
-  padding: 0 14px 0 48px;
+.input-shell input {
+  padding-left: 52px;
 }
 
-.password-field input:focus,
-.search-wrap input:focus,
-.select-wrap select:focus {
-  background: #fff;
+.search-shell input {
+  padding-right: 46px;
+}
+
+.select-shell select {
+  padding-left: 45px;
+  appearance: none;
+}
+
+.input-shell input:focus,
+.search-shell input:focus,
+.select-shell select:focus {
   border-color: var(--primary);
-  box-shadow: 0 0 0 3px rgba(15, 76, 92, 0.12);
+  box-shadow: 0 0 0 3px rgba(65, 55, 168, 0.12);
 }
 
-.icon-button {
+.input-shell .icon-button,
+.search-shell > svg,
+.select-shell > svg {
   position: absolute;
   top: 50%;
-  left: 7px;
-  width: 36px;
-  height: 36px;
+  transform: translateY(-50%);
+}
+
+.input-shell .icon-button {
+  left: 5px;
+}
+
+.search-shell > svg {
+  right: 15px;
+  color: var(--slate);
+  pointer-events: none;
+}
+
+.select-shell > svg {
+  left: 15px;
+  color: var(--slate);
+  pointer-events: none;
+}
+
+.icon-button {
+  width: 42px;
+  height: 42px;
   display: grid;
   place-items: center;
-  padding: 0;
-  color: var(--muted);
+  color: var(--slate);
   background: transparent;
   border: 0;
   border-radius: 8px;
-  transform: translateY(-50%);
 }
 
 .icon-button:hover {
   color: var(--primary);
-  background: #edf5f7;
-}
-
-.form-error {
-  min-height: 22px;
-  margin: 7px 2px 8px;
-  color: var(--danger);
-  font-size: 13px;
-  font-weight: 700;
+  background: rgba(65, 55, 168, 0.07);
 }
 
 .primary-button,
-.secondary-button {
+.secondary-button,
+.clear-button,
+.mini-action {
+  min-height: 44px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
-  min-height: 46px;
-  padding: 0 18px;
-  font-weight: 800;
+  padding: 0 16px;
+  border: 1px solid transparent;
   border-radius: 8px;
+  font-weight: 800;
+  text-decoration: none;
+  transition: transform 0.18s, box-shadow 0.18s, color 0.18s, background 0.18s, border-color 0.18s;
 }
 
 .primary-button {
   width: 100%;
-  color: #fff;
-  background: var(--primary);
-  border: 0;
+  margin-top: 12px;
+  color: white;
+  background: linear-gradient(145deg, var(--primary), var(--primary-2));
+  box-shadow: 0 10px 22px rgba(65, 55, 168, 0.18);
+}
+
+.primary-button:hover,
+.tool-action:hover,
+.researcher-choice:hover {
+  transform: translateY(-2px);
 }
 
-.primary-button:hover {
-  background: var(--primary-dark);
+.form-error {
+  min-height: 22px;
+  margin: 8px 0 0;
+  color: var(--red);
+  font-size: 14px;
 }
 
-.primary-button:disabled {
-  cursor: wait;
-  opacity: 0.65;
+.researcher-panel {
+  width: min(100%, 920px);
 }
 
-.secondary-button {
-  color: var(--primary);
-  background: #fff;
-  border: 1px solid var(--line);
+.panel-heading {
+  text-align: center;
 }
 
-.secondary-button:hover {
-  background: #edf5f7;
+.panel-heading .eyebrow {
+  margin-top: 0;
 }
 
-.topbar {
-  min-height: 72px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  padding: 12px max(18px, calc((100% - 1180px) / 2));
-  background: rgba(255, 255, 255, 0.96);
-  border-bottom: 1px solid var(--line);
+.researcher-panel > .search-shell {
+  max-width: 520px;
+  margin: 24px auto;
 }
 
-.topbar-brand {
+.researcher-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+  max-height: 58vh;
+  overflow: auto;
+  padding: 2px;
+}
+
+.researcher-choice {
+  min-height: 70px;
   display: flex;
   align-items: center;
-  gap: 12px;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 12px 15px;
+  color: var(--ink);
+  text-align: right;
+  background: #fbfdfe;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
 }
 
-.topbar-brand p,
-.topbar-brand h1 {
-  margin: 0;
+.researcher-choice:hover {
+  border-color: var(--cyan);
+  box-shadow: 0 8px 18px rgba(39, 206, 215, 0.11);
 }
 
-.topbar-brand p {
-  color: var(--accent);
-  font-size: 12px;
-  font-weight: 800;
+.researcher-choice span {
+  min-width: 0;
 }
 
-.topbar-brand h1 {
-  color: var(--primary-dark);
-  font-size: 20px;
+.researcher-choice strong,
+.researcher-choice small {
+  display: block;
 }
 
-.secondary-button.compact {
-  min-height: 40px;
-  padding: 0 14px;
+.researcher-choice strong {
+  line-height: 1.55;
 }
 
-.dashboard-shell {
-  width: min(1180px, calc(100% - 36px));
-  margin: 22px auto 40px;
+.researcher-choice small {
+  margin-top: 3px;
+  color: var(--green);
 }
 
-.summary-panel,
-.controls-panel,
-.empty-state,
-.no-results,
-.sample-card {
-  background: var(--surface);
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  box-shadow: var(--shadow);
+.researcher-choice > svg {
+  flex: 0 0 auto;
+  color: var(--primary);
 }
 
-.summary-panel {
+.topbar {
+  position: sticky;
+  top: 0;
+  z-index: 30;
+  min-height: 72px;
   display: flex;
   align-items: center;
-  justify-content: center;
-  gap: 18px;
-  padding: 28px 24px;
-  border-top: 4px solid var(--primary);
-  text-align: center;
+  justify-content: space-between;
+  gap: 20px;
+  padding: 12px max(24px, calc((100% - 1280px) / 2));
+  background: rgba(255, 255, 255, 0.94);
+  border-bottom: 1px solid rgba(92, 110, 136, 0.17);
+  backdrop-filter: blur(14px);
 }
 
-.summary-panel h2 {
-  margin: 0;
-  color: var(--primary-dark);
-  font-size: 24px;
-  line-height: 1.45;
+.topbar-brand,
+.topbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
 }
 
-.counter-pill {
-  flex: 0 0 auto;
-  padding: 9px 14px;
-  color: var(--accent);
+.topbar-brand p {
+  margin: 0 0 1px;
+  color: var(--green);
+  font-size: 12px;
   font-weight: 800;
-  background: var(--accent-soft);
-  border: 1px solid #c3e7d8;
-  border-radius: 8px;
 }
 
-.controls-panel {
-  margin-top: 14px;
-  padding: 18px;
+.topbar-brand h1 {
+  margin: 0;
+  font-size: 17px;
+  line-height: 1.5;
 }
 
-.filters-grid {
-  display: grid;
-  grid-template-columns: minmax(180px, 0.9fr) minmax(220px, 1fr) minmax(260px, 1.35fr);
-  gap: 14px;
+.secondary-button {
+  color: var(--primary);
+  background: #fff;
+  border-color: rgba(65, 55, 168, 0.25);
 }
 
-.select-wrap select {
-  padding: 0 14px 0 40px;
-  appearance: none;
+.secondary-button:hover,
+.mini-action:hover {
+  color: white;
+  background: var(--primary);
+  border-color: var(--primary);
 }
 
-.select-wrap > svg {
-  position: absolute;
-  top: 50%;
-  left: 13px;
-  color: var(--muted);
-  transform: translateY(-50%);
-  pointer-events: none;
+.topbar-icon {
+  border: 1px solid var(--line);
 }
 
-.search-wrap input {
-  padding: 0 42px 0 14px;
+.dashboard-shell {
+  width: min(1280px, calc(100% - 32px));
+  margin: 22px auto 45px;
 }
 
-.search-wrap > svg {
-  position: absolute;
-  top: 50%;
-  right: 13px;
-  color: var(--muted);
-  transform: translateY(-50%);
+.workspace-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 28px;
+  padding: 22px 24px;
+  background: white;
+  border: 1px solid var(--line);
+  border-right: 5px solid var(--primary);
+  border-radius: 8px;
+  box-shadow: var(--shadow);
 }
 
-select:disabled {
-  color: #9aa8b2;
-  background: #f2f5f6;
-  cursor: not-allowed;
+.workspace-header .eyebrow {
+  margin-top: 0;
 }
 
-.filters-actions {
-  display: flex;
-  justify-content: flex-start;
-  margin-top: 12px;
+.workspace-header h2 {
+  max-width: 650px;
+  margin-bottom: 0;
+  font-size: 25px;
 }
 
-.clear-filters-button {
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-  min-height: 38px;
-  padding: 0 12px;
-  color: var(--muted);
-  font-weight: 800;
+.summary-stats {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(90px, 1fr));
+  gap: 8px;
+}
+
+.stat-item {
+  min-width: 100px;
+  padding: 10px;
+  text-align: center;
   background: #f8fafb;
   border: 1px solid var(--line);
   border-radius: 8px;
 }
 
-.clear-filters-button:hover {
-  color: var(--danger);
-  background: #fff7f8;
-}
-
-.empty-state,
-.no-results {
-  margin-top: 16px;
-  padding: 44px 20px;
-  text-align: center;
-  box-shadow: none;
+.stat-item strong,
+.stat-item span {
+  display: block;
 }
 
-.empty-state h3,
-.no-results h3 {
-  margin: 0 0 8px;
-  color: var(--primary-dark);
-  font-size: 20px;
+.stat-item strong {
+  color: var(--primary);
+  font-size: 23px;
 }
 
-.empty-state p,
-.no-results p {
-  margin: 0;
+.stat-item span {
   color: var(--muted);
+  font-size: 12px;
+  line-height: 1.5;
 }
 
-.results-section {
-  margin-top: 22px;
-}
-
-.results-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  margin-bottom: 14px;
+.stat-item.madon strong {
+  color: var(--green);
 }
 
-.results-meta {
-  margin: 0 0 4px;
-  color: var(--accent);
-  font-size: 14px;
-  font-weight: 800;
+.stat-item.base strong {
+  color: var(--primary-2);
 }
 
-.results-header h2 {
-  margin: 0;
-  color: var(--primary-dark);
-  font-size: 25px;
+.stat-item.missing strong {
+  color: var(--slate);
 }
 
-.samples-grid {
+.quick-actions {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 14px;
-}
-
-.sample-card {
-  overflow: hidden;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+  margin-top: 14px;
 }
 
-.sample-card-header {
+.tool-action {
+  min-height: 88px;
   display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 16px 18px;
-  background: #fbfdfe;
-  border-bottom: 1px solid #edf2f5;
-  border-top: 4px solid var(--accent);
+  align-items: center;
+  gap: 13px;
+  padding: 14px 16px;
+  color: var(--ink);
+  text-align: right;
+  background: white;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(39, 58, 74, 0.06);
+  text-decoration: none;
+  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
 }
 
-.sample-index {
-  display: inline-block;
-  margin-bottom: 5px;
-  color: var(--accent);
-  font-size: 12px;
-  font-weight: 800;
+button.tool-action {
+  width: 100%;
 }
 
-.sample-card h3 {
-  margin: 0;
-  color: var(--primary-dark);
-  font-size: 18px;
-  line-height: 1.6;
+.tool-action:hover {
+  border-color: var(--cyan);
+  box-shadow: var(--lift);
 }
 
-.status-badge {
+.tool-icon {
+  width: 48px;
+  height: 48px;
   flex: 0 0 auto;
-  max-width: 150px;
-  padding: 7px 10px;
-  color: var(--warning);
-  font-size: 12px;
-  font-weight: 800;
-  line-height: 1.45;
-  text-align: center;
-  background: var(--warning-soft);
-  border: 1px solid #f0d394;
+  display: grid;
+  place-items: center;
+  color: white;
+  background: var(--primary);
   border-radius: 8px;
 }
 
-.sample-details {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 0;
-  padding: 4px 18px 12px;
+.form-action .tool-icon {
+  background: var(--green);
 }
 
-.detail-item {
-  min-width: 0;
-  padding: 13px 0;
-  border-bottom: 1px solid #edf2f5;
+.share-action .tool-icon {
+  background: var(--mint);
 }
 
-.detail-item:nth-child(odd) {
-  padding-left: 14px;
-  border-left: 1px solid #edf2f5;
+.tool-action > span:nth-child(2) {
+  min-width: 0;
+  flex: 1;
 }
 
-.detail-item:nth-child(even) {
-  padding-right: 14px;
+.tool-action strong,
+.tool-action small {
+  display: block;
 }
 
-.detail-label {
-  display: block;
-  margin-bottom: 5px;
+.tool-action small {
+  margin-top: 3px;
   color: var(--muted);
   font-size: 12px;
-  font-weight: 800;
-}
-
-.detail-value {
-  display: block;
-  color: #253b4c;
-  font-weight: 700;
-  line-height: 1.65;
 }
 
-.wide-detail,
-.coordinates-detail {
-  grid-column: 1 / -1;
-  padding-left: 0 !important;
-  padding-right: 0 !important;
-  border-left: 0 !important;
+.action-arrow {
+  flex: 0 0 auto;
+  color: var(--slate);
 }
 
-.coordinates-detail {
-  position: relative;
-  margin-top: 10px;
-  padding: 13px 14px !important;
-  border: 1px solid transparent !important;
+.controls-panel {
+  margin-top: 14px;
+  padding: 20px;
+  background: white;
+  border: 1px solid var(--line);
   border-radius: 8px;
+  box-shadow: var(--shadow);
 }
 
-.coordinates-detail::before {
-  content: "";
-  position: absolute;
-  top: 12px;
-  right: 0;
-  bottom: 12px;
-  width: 4px;
-  border-radius: 8px 0 0 8px;
-}
-
-.map-detail {
-  background: #edf9f3;
-  border-color: #bfead2 !important;
-}
-
-.map-detail::before {
-  background: var(--accent);
-}
-
-.statement-detail {
-  background: #eef7fb;
-  border-color: #c7e1ec !important;
+.city-section .field-label {
+  margin-top: 0;
 }
 
-.statement-detail::before {
-  background: var(--info);
+.city-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
 }
 
-.map-detail .detail-label,
-.statement-detail .detail-label {
-  display: inline-flex;
+.city-choice {
+  min-height: 44px;
+  display: flex;
   align-items: center;
-  gap: 6px;
-  min-height: 24px;
-  padding: 3px 8px;
+  gap: 10px;
+  padding: 7px 12px;
+  color: var(--ink);
+  background: #f9fbfc;
+  border: 1px solid var(--line);
   border-radius: 8px;
+  font-weight: 800;
 }
 
-.map-detail .detail-label {
-  color: var(--primary-dark);
-  background: #dff4e9;
-}
-
-.statement-detail .detail-label {
-  color: var(--primary-dark);
-  background: #dff0f6;
-}
-
-.map-detail .action-link {
-  color: var(--primary-dark);
-  background: #ffffff;
-  border-color: #b7e3ca;
+.city-choice strong {
+  min-width: 29px;
+  padding: 2px 7px;
+  color: var(--green);
+  text-align: center;
+  background: rgba(0, 176, 80, 0.1);
+  border-radius: 6px;
 }
 
-.statement-detail .action-link {
-  color: var(--primary-dark);
-  background: #ffffff;
-  border-color: #bddce8;
+.city-choice:hover {
+  border-color: var(--cyan);
 }
 
-.map-detail .action-link:hover,
-.statement-detail .action-link:hover {
-  color: #fff;
-  background: var(--primary);
-  border-color: var(--primary);
+.city-choice.active {
+  color: white;
+  background: linear-gradient(145deg, var(--primary), var(--primary-2));
+  border-color: transparent;
 }
 
-.ltr-value .detail-value {
-  direction: ltr;
-  text-align: right;
+.city-choice.active strong {
+  color: var(--primary);
+  background: white;
 }
 
-.action-link {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 7px;
-  min-height: 38px;
-  padding: 0 12px;
-  color: var(--primary);
-  font-weight: 800;
-  text-decoration: none;
-  background: #eef7f9;
-  border: 1px solid #cbe2e8;
-  border-radius: 8px;
+.filters-grid {
+  display: grid;
+  grid-template-columns: minmax(280px, 1.5fr) minmax(180px, 1fr) minmax(180px, 1fr) auto;
+  align-items: end;
+  gap: 10px;
 }
 
-button.action-link {
-  font: inherit;
+.field-group > span {
+  margin-top: 16px;
 }
 
-.action-link:hover {
-  color: #fff;
-  background: var(--primary);
-  border-color: var(--primary);
+.clear-button {
+  color: var(--slate);
+  background: #fff;
+  border-color: var(--line);
 }
 
-.contact-note {
-  margin: 0 0 10px;
-  color: #253b4c;
-  font-weight: 700;
-  line-height: 1.8;
-  white-space: pre-line;
+.clear-button:hover {
+  color: white;
+  background: var(--red);
+  border-color: var(--red);
 }
 
-.contact-actions {
+.representative-panel {
   display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  margin-top: 14px;
+  padding: 16px 18px;
+  background: rgba(39, 206, 215, 0.08);
+  border: 1px solid rgba(39, 206, 215, 0.36);
+  border-right: 5px solid var(--cyan);
+  border-radius: 8px;
 }
 
-.load-more-wrap {
+.representative-copy,
+.representative-actions {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  gap: 8px;
-  margin-top: 22px;
+  gap: 10px;
 }
 
-.load-more-button {
-  min-width: 190px;
+.representative-icon {
+  width: 44px;
+  height: 44px;
+  display: grid;
+  place-items: center;
+  color: white;
+  background: var(--cyan);
+  border-radius: 8px;
 }
 
-.load-more-wrap p {
-  margin: 0;
-  color: var(--muted);
-  font-size: 13px;
-  font-weight: 700;
+.representative-copy small,
+.representative-copy strong,
+.representative-copy div > span {
+  display: block;
 }
 
-footer {
-  min-height: 52px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.representative-copy small {
   color: var(--muted);
-  font-size: 13px;
-  font-weight: 700;
 }
 
-.toast {
-  position: fixed;
-  z-index: 30;
-  right: 50%;
-  bottom: 20px;
-  padding: 12px 16px;
-  color: #fff;
+.representative-copy div > span {
+  direction: ltr;
+  text-align: right;
+  color: var(--primary);
   font-weight: 800;
-  background: var(--primary-dark);
-  border-radius: 8px;
-  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
-  opacity: 0;
-  transform: translate(50%, 18px);
-  transition: opacity 0.22s, transform 0.22s;
-  pointer-events: none;
 }
 
-.toast.show {
-  opacity: 1;
-  transform: translate(50%, 0);
+.mini-action {
+  color: var(--primary);
+  background: white;
+  border-color: rgba(65, 55, 168, 0.22);
 }
 
-@media (max-width: 900px) {
-  .filters-grid {
-    grid-template-columns: 1fr 1fr;
-  }
-
-  .search-group {
-    grid-column: 1 / -1;
-  }
+.results-section {
+  margin-top: 24px;
 }
 
-@media (max-width: 720px) {
-  .dashboard-shell {
-    width: min(100% - 24px, 1180px);
-    margin-top: 14px;
-  }
-
-  .summary-panel,
-  .results-header {
-    align-items: stretch;
-    flex-direction: column;
-  }
-
-  .counter-pill {
-    align-self: flex-start;
-  }
-
-  .samples-grid {
-    grid-template-columns: 1fr;
-  }
+.results-header {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  margin-bottom: 12px;
 }
 
-@media (max-width: 560px) {
-  .login-view {
-    padding: 18px;
-  }
-
-  .login-card {
-    padding: 24px;
-  }
-
-  .topbar {
-    padding: 10px 12px;
-  }
-
-  .topbar-brand h1 {
-    font-size: 16px;
-  }
-
-  .topbar-brand p {
-    display: none;
-  }
-
-  .filters-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .search-group {
-    grid-column: auto;
-    grid-row: 1;
-  }
-
-  .password-field input,
-  .search-wrap input,
-  .select-wrap select {
-    height: 54px;
-  }
-
-  .sample-card-header {
-    flex-direction: column;
-  }
-
-  .status-badge {
-    max-width: 100%;
-  }
-
-  .sample-details {
-    grid-template-columns: 1fr;
-    padding: 4px 16px 12px;
-  }
-
-  .detail-item:nth-child(odd),
-  .detail-item:nth-child(even) {
-    padding-right: 0;
-    padding-left: 0;
-    border-left: 0;
-  }
-
-  .contact-actions .action-link {
-    flex: 1 1 100%;
-  }
+.results-header h2 {
+  margin: 0;
+  font-size: 23px;
 }
 
-/* Final responsive polish */
-:root {
-  --soft-shadow: 0 1px 2px rgba(15, 35, 45, 0.06), 0 14px 36px rgba(15, 35, 45, 0.08);
-  --lift-shadow: 0 18px 44px rgba(15, 35, 45, 0.12);
+.results-meta {
+  margin-bottom: 3px;
+  color: var(--green);
+  font-size: 14px;
+  font-weight: 800;
 }
 
-body {
-  background:
-    linear-gradient(180deg, rgba(15, 76, 92, 0.06) 0, rgba(15, 76, 92, 0) 260px),
-    linear-gradient(180deg, #fbfcfd 0%, var(--page) 100%);
+.samples-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
+  gap: 13px;
 }
 
-button,
-a,
-input,
-select {
-  -webkit-tap-highlight-color: transparent;
+.sample-card {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: white;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(39, 58, 74, 0.07);
+  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
 }
 
-button:focus-visible,
-a:focus-visible,
-input:focus-visible,
-select:focus-visible {
-  outline: 3px solid rgba(27, 138, 107, 0.28);
-  outline-offset: 2px;
+.sample-card:hover {
+  transform: translateY(-2px);
+  border-color: #c5d8e1;
+  box-shadow: var(--lift);
 }
 
-.login-card {
-  position: relative;
-  overflow: hidden;
-  border-color: rgba(217, 227, 232, 0.9);
-  box-shadow: var(--soft-shadow);
+.card-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 16px;
+  background: linear-gradient(180deg, #f9fcfd, white);
+  border-right: 4px solid var(--green);
+  border-bottom: 1px solid #e7eef2;
 }
 
-.login-card::before {
-  content: "";
-  position: absolute;
-  inset: 0 0 auto;
-  height: 5px;
-  background: linear-gradient(90deg, var(--accent), var(--primary));
+.card-header > div {
+  min-width: 0;
 }
 
-.brand-mark {
-  background: linear-gradient(145deg, var(--primary), #177b72);
-  box-shadow: 0 10px 24px rgba(15, 76, 92, 0.22);
+.sample-index {
+  display: block;
+  margin-bottom: 2px;
+  color: var(--green);
+  font-size: 12px;
+  font-weight: 800;
 }
 
-.topbar {
-  position: sticky;
-  top: 0;
-  z-index: 20;
-  box-shadow: 0 8px 24px rgba(28, 53, 68, 0.06);
-  backdrop-filter: blur(14px);
+.card-header h3 {
+  margin: 0;
+  font-size: 17px;
+  line-height: 1.65;
 }
 
-.dashboard-shell {
-  margin-top: 18px;
+.status-badge {
+  flex: 0 0 auto;
+  max-width: 135px;
+  padding: 5px 9px;
+  color: var(--slate);
+  text-align: center;
+  background: rgba(255, 192, 0, 0.13);
+  border: 1px solid rgba(255, 192, 0, 0.55);
+  border-radius: 7px;
+  font-size: 12px;
+  font-weight: 800;
+  line-height: 1.5;
 }
 
-.summary-panel,
-.controls-panel,
-.sample-card {
-  box-shadow: var(--soft-shadow);
+.card-details {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  padding: 2px 16px 12px;
 }
 
-.summary-panel {
-  align-items: center;
-  min-height: 128px;
-  padding: 24px;
-  border-top: 0;
-  border-right: 0;
-  border-bottom: 4px solid var(--primary);
+.detail-item {
+  min-width: 0;
+  padding: 12px 0;
+  border-bottom: 1px solid #e8eff2;
 }
 
-.summary-copy {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  min-width: 0;
-  width: 100%;
+.detail-item:nth-child(odd):not(.wide) {
+  padding-left: 12px;
+  border-left: 1px solid #e8eff2;
 }
 
-.summary-panel h2 {
-  max-width: 820px;
-  font-size: 28px;
+.detail-item:nth-child(even):not(.wide) {
+  padding-right: 12px;
 }
 
-.counter-pill {
-  align-self: flex-start;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 40px;
-  padding-inline: 16px;
+.detail-item.wide,
+.location-block {
+  grid-column: 1 / -1;
 }
 
-.region-stats {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 8px;
+.detail-label,
+.detail-value {
+  display: block;
 }
 
-.region-stat {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  min-width: 0;
-  min-height: 42px;
-  padding: 8px 10px;
-  color: #315161;
-  background: #f8fbfc;
-  border: 1px solid #dbe8ed;
-  border-radius: 8px;
+.detail-label {
+  margin-bottom: 4px;
+  color: var(--muted);
+  font-size: 12px;
   font-weight: 800;
-  transition: transform 0.18s, border-color 0.18s, background 0.18s;
 }
 
-.region-stat:hover {
-  background: #eef7f9;
-  border-color: #c0dce4;
-  transform: translateY(-1px);
+.detail-value {
+  overflow-wrap: anywhere;
+  font-weight: 800;
+  line-height: 1.65;
 }
 
-.region-stat span {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.ltr-value .detail-value {
+  direction: ltr;
+  text-align: right;
 }
 
-.region-stat strong {
-  flex: 0 0 auto;
-  min-width: 32px;
-  padding: 3px 7px;
-  color: var(--accent);
-  text-align: center;
-  background: var(--accent-soft);
+.location-block {
+  margin-top: 12px;
+  padding: 12px;
+  background: rgba(0, 176, 80, 0.07);
+  border: 1px solid rgba(0, 176, 80, 0.28);
   border-radius: 8px;
 }
 
-.controls-panel {
-  position: static;
-  top: auto;
-  z-index: 15;
-  border-color: rgba(217, 227, 232, 0.92);
+.location-base {
+  background: rgba(28, 173, 228, 0.07);
+  border-color: rgba(28, 173, 228, 0.28);
 }
 
-.filters-grid {
-  align-items: end;
+.location-statement {
+  background: rgba(39, 206, 215, 0.08);
+  border-color: rgba(39, 206, 215, 0.35);
 }
 
-.password-field input,
-.search-wrap input,
-.select-wrap select {
-  min-height: 52px;
-  border-color: #d2dfe6;
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
+.location-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 9px;
 }
 
-.clear-filters-button,
-.action-link,
-.primary-button,
-.secondary-button {
-  transition: transform 0.18s, color 0.18s, background 0.18s, border-color 0.18s, box-shadow 0.18s;
+.location-heading span,
+.madon-statement > span {
+  color: var(--green);
+  font-size: 13px;
+  font-weight: 900;
 }
 
-.clear-filters-button:hover,
-.action-link:hover,
-.secondary-button:hover {
-  transform: translateY(-1px);
+.location-base .location-heading span {
+  color: var(--primary-2);
 }
 
-.results-section {
-  scroll-margin-top: 150px;
+.location-heading small {
+  color: var(--muted);
 }
 
-.results-header {
-  padding: 0 2px;
+.location-block > .mini-action {
+  width: 100%;
 }
 
-.samples-grid {
-  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
+.madon-statement {
+  margin-top: 9px;
+  padding-top: 9px;
+  border-top: 1px solid rgba(92, 110, 136, 0.16);
 }
 
-.sample-card {
+.madon-statement p {
+  margin: 3px 0 0;
+  line-height: 1.7;
+}
+
+.card-actions {
   display: flex;
-  flex-direction: column;
-  min-height: 100%;
-  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: auto;
+  padding: 12px 16px 16px;
 }
 
-.sample-card:hover {
-  border-color: #c1dbe2;
-  box-shadow: var(--lift-shadow);
-  transform: translateY(-2px);
+.card-actions .mini-action {
+  flex: 1 1 155px;
 }
 
-.sample-card-header {
-  border-top: 0;
-  border-right: 4px solid var(--accent);
-  background:
-    linear-gradient(180deg, rgba(248, 252, 253, 0.98), rgba(255, 255, 255, 0.98));
+.load-more-wrap {
+  display: grid;
+  place-items: center;
+  gap: 5px;
+  margin-top: 18px;
 }
 
-.sample-card h3 {
-  font-size: 17px;
+.load-more-wrap p {
+  margin: 0;
+  color: var(--muted);
+  font-size: 13px;
 }
 
-.status-badge {
-  white-space: normal;
+.empty-state {
+  padding: 38px 18px;
+  text-align: center;
+  background: white;
+  border: 1px dashed #cbdbe3;
+  border-radius: 8px;
 }
 
-.sample-details {
-  flex: 1;
+.empty-state h3 {
+  margin-bottom: 6px;
 }
 
-.action-link {
-  min-height: 40px;
-  white-space: nowrap;
+.empty-state p {
+  margin-bottom: 0;
+  color: var(--muted);
 }
 
-.load-more-button {
-  box-shadow: var(--soft-shadow);
+footer {
+  min-height: 48px;
+  display: grid;
+  place-items: center;
+  color: var(--slate);
+  font-size: 13px;
 }
 
-@media (min-width: 1220px) {
-  .dashboard-shell {
-    width: min(1280px, calc(100% - 48px));
-  }
+.toast {
+  position: fixed;
+  right: 22px;
+  bottom: 22px;
+  z-index: 50;
+  max-width: calc(100% - 44px);
+  padding: 11px 16px;
+  color: white;
+  background: var(--primary);
+  border-radius: 8px;
+  box-shadow: var(--lift);
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(16px);
+  transition: opacity 0.18s, transform 0.18s;
+}
 
-  .topbar {
-    padding-right: max(24px, calc((100% - 1280px) / 2));
-    padding-left: max(24px, calc((100% - 1280px) / 2));
-  }
+.toast.show {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+button:focus-visible,
+a:focus-visible,
+input:focus-visible,
+select:focus-visible {
+  outline: 3px solid rgba(65, 55, 168, 0.2);
+  outline-offset: 2px;
 }
 
-@media (max-width: 980px) {
-  .summary-panel {
+@media (max-width: 1050px) {
+  .workspace-header {
+    align-items: flex-start;
     flex-direction: column;
   }
 
-  .controls-panel {
-    position: static;
+  .summary-stats {
+    width: 100%;
   }
-}
 
-@media (max-width: 720px) {
-  body {
-    background: #f6f8f9;
+  .filters-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
+}
 
+@media (max-width: 760px) {
   .topbar {
-    min-height: 64px;
+    padding: 10px 14px;
   }
 
-  .dashboard-shell {
-    width: min(100% - 20px, 1180px);
-    margin-bottom: 28px;
+  .topbar-brand .brand-mark {
+    display: none;
   }
 
-  .summary-panel {
-    min-height: auto;
-    padding: 18px;
-    border-bottom-width: 4px;
+  .topbar-brand h1 {
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
-  .summary-panel h2 {
-    font-size: 21px;
-    line-height: 1.55;
+  .secondary-button.compact {
+    width: 44px;
+    padding: 0;
+    font-size: 0;
   }
 
-  .region-stats {
-    grid-template-columns: 1fr 1fr;
+  .quick-actions {
+    grid-template-columns: 1fr;
   }
 
-  .controls-panel {
-    padding: 14px;
+  .tool-action {
+    min-height: 76px;
   }
 
-  .filters-actions {
-    margin-top: 10px;
+  .summary-stats {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  .samples-grid {
+  .filters-grid {
     grid-template-columns: 1fr;
-    gap: 12px;
   }
 
-  .sample-card:hover {
-    transform: none;
-  }
-}
-
-@media (max-width: 560px) {
-  .login-card {
+  .clear-button {
     width: 100%;
-    padding: 26px 20px 22px;
   }
 
-  .login-card h1 {
-    font-size: 24px;
+  .representative-panel {
+    align-items: stretch;
+    flex-direction: column;
   }
 
-  .login-description {
-    font-size: 15px;
+  .representative-actions .mini-action {
+    flex: 1;
   }
 
-  .topbar {
-    gap: 10px;
+  .samples-grid {
+    grid-template-columns: 1fr;
   }
+}
 
-  .secondary-button.compact {
-    min-width: 44px;
-    padding: 0 10px;
+@media (max-width: 560px) {
+  .center-view {
+    align-items: start;
+    padding: 18px 10px;
   }
 
-  .summary-panel,
-  .controls-panel,
-  .sample-card,
-  .empty-state,
-  .no-results {
-    border-radius: 8px;
+  .access-panel,
+  .researcher-panel {
+    padding: 25px 18px;
   }
 
-  .region-stats {
-    grid-template-columns: 1fr;
+  .access-panel h1,
+  .panel-heading h1 {
+    font-size: 24px;
   }
 
-  .region-stat {
-    min-height: 46px;
+  .researcher-grid {
+    grid-template-columns: 1fr;
+    max-height: none;
   }
 
-  .clear-filters-button {
-    width: 100%;
-    justify-content: center;
-    min-height: 44px;
+  .dashboard-shell {
+    width: calc(100% - 18px);
+    margin-top: 12px;
   }
 
-  .sample-card-header {
+  .workspace-header,
+  .controls-panel {
     padding: 15px;
-    border-right-width: 4px;
-  }
-
-  .sample-card h3 {
-    font-size: 16px;
-    line-height: 1.65;
   }
 
-  .sample-details {
-    padding: 2px 15px 10px;
+  .workspace-header h2 {
+    font-size: 20px;
+    line-height: 1.6;
   }
 
-  .detail-item {
-    padding: 12px 0;
+  .stat-item {
+    min-width: 0;
   }
 
-  .detail-value,
-  .contact-note {
-    font-size: 15px;
+  .city-buttons {
+    display: grid;
+    grid-template-columns: 1fr;
   }
 
-  .action-link {
-    min-height: 46px;
+  .city-choice {
+    justify-content: space-between;
   }
 
-  .toast {
-    right: 12px;
-    left: 12px;
-    bottom: 14px;
-    text-align: center;
-    transform: translateY(18px);
+  .card-header {
+    align-items: stretch;
+    flex-direction: column;
   }
 
-  .toast.show {
-    transform: translateY(0);
+  .status-badge {
+    align-self: flex-start;
+    max-width: 100%;
   }
-}
 
-/* Region buttons replace the region dropdown */
-.login-card label,
-.field-group label,
-.field-label {
-  display: block;
-  margin-bottom: 8px;
-  color: #34495a;
-  font-weight: 700;
-}
-
-.filters-grid {
-  grid-template-columns: minmax(220px, 1fr) minmax(300px, 1.35fr);
-}
-
-.region-group {
-  grid-column: 1 / -1;
-}
-
-.region-select-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.region-buttons {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 10px;
-}
-
-.region-choice {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  min-width: 0;
-  min-height: 54px;
-  padding: 10px 13px;
-  color: #315161;
-  text-align: right;
-  background: #fbfdfe;
-  border: 1px solid #d2dfe6;
-  border-radius: 8px;
-  font-weight: 800;
-  transition: transform 0.18s, color 0.18s, background 0.18s, border-color 0.18s, box-shadow 0.18s;
-}
-
-.region-choice:hover {
-  background: #eef7f9;
-  border-color: #bcd8df;
-  transform: translateY(-1px);
-}
-
-.region-choice.active {
-  color: #fff;
-  background: linear-gradient(145deg, var(--primary), #177b72);
-  border-color: transparent;
-  box-shadow: 0 12px 26px rgba(15, 76, 92, 0.16);
-}
-
-.region-choice span {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.region-choice strong {
-  flex: 0 0 auto;
-  min-width: 34px;
-  padding: 3px 8px;
-  color: var(--accent);
-  text-align: center;
-  background: var(--accent-soft);
-  border-radius: 8px;
-}
-
-.region-choice.active strong {
-  color: var(--primary-dark);
-  background: #d9fff4;
-}
-
-@media (max-width: 900px) {
-  .filters-grid {
+  .card-details {
     grid-template-columns: 1fr;
   }
 
-  .region-buttons {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+  .detail-item:nth-child(odd):not(.wide),
+  .detail-item:nth-child(even):not(.wide) {
+    padding-right: 0;
+    padding-left: 0;
+    border-left: 0;
   }
-}
 
-@media (max-width: 560px) {
-  .filters-grid {
-    grid-template-columns: 1fr;
+  .detail-item {
+    grid-column: 1 / -1;
   }
 
-  .region-buttons {
-    grid-template-columns: 1fr;
+  .location-heading {
+    align-items: flex-start;
+    flex-direction: column;
   }
 
-  .region-choice {
-    min-height: 48px;
+  .toast {
+    right: 10px;
+    left: 10px;
+    bottom: 12px;
+    max-width: none;
+    text-align: center;
   }
 }
-
-/* Identity color system */
-body {
-  background:
-    linear-gradient(180deg, rgba(65, 55, 168, 0.07) 0, rgba(65, 55, 168, 0) 260px),
-    linear-gradient(180deg, #fbfcfd 0%, var(--page) 100%);
-}
-
-.eyebrow,
-.results-meta,
-.sample-index {
-  color: var(--accent);
-}
-
-.login-card::before {
-  background: linear-gradient(90deg, var(--accent), var(--primary));
-}
-
-.brand-mark,
-.primary-button,
-.region-choice.active {
-  background: linear-gradient(145deg, var(--primary), var(--primary-dark));
-}
-
-.primary-button:hover,
-.action-link:hover,
-.secondary-button:hover {
-  background: var(--primary-dark);
-  border-color: var(--primary-dark);
-}
-
-.topbar {
-  border-bottom-color: rgba(92, 110, 136, 0.18);
-}
-
-.summary-panel {
-  border-bottom-color: var(--primary);
-}
-
-.sample-card-header {
-  border-right-color: var(--accent);
-}
-
-.status-badge {
-  color: #5C6E88;
-  background: #fff4bf;
-  border-color: #FFC000;
-}
-
-.map-detail {
-  background: rgba(0, 176, 80, 0.08);
-  border-color: rgba(0, 176, 80, 0.28) !important;
-}
-
-.map-detail::before {
-  background: var(--accent);
-}
-
-.map-detail .detail-label {
-  color: #1CADE4;
-  background: rgba(0, 176, 80, 0.13);
-}
-
-.map-detail .action-link {
-  color: #1CADE4;
-  border-color: rgba(0, 176, 80, 0.32);
-}
-
-.statement-detail {
-  background: rgba(39, 206, 215, 0.1);
-  border-color: rgba(39, 206, 215, 0.35) !important;
-}
-
-.statement-detail::before {
-  background: var(--info);
-}
-
-.statement-detail .detail-label {
-  color: #1CADE4;
-  background: rgba(39, 206, 215, 0.16);
-}
-
-.statement-detail .action-link {
-  color: #1CADE4;
-  border-color: rgba(39, 206, 215, 0.42);
-}
-
-.action-link,
-.secondary-button,
-.clear-filters-button {
-  color: var(--primary-dark);
-  background: #ffffff;
-  border-color: rgba(39, 206, 215, 0.34);
-}
-
-.clear-filters-button:hover {
-  color: #ffffff;
-  background: var(--danger);
-  border-color: var(--danger);
-}
-
-.region-choice {
-  color: var(--primary-dark);
-  border-color: rgba(39, 206, 215, 0.28);
-}
-
-.region-choice:hover {
-  background: rgba(39, 206, 215, 0.08);
-  border-color: var(--info);
-}
-
-.region-choice strong,
-.region-choice.active strong {
-  color: var(--primary-dark);
-  background: rgba(0, 176, 80, 0.14);
-}
-
-.region-choice.active {
-  color: #ffffff;
-}
-
-.region-choice.active strong {
-  background: #ffffff;
-}
-
-.password-field input:focus,
-.search-wrap input:focus,
-.select-wrap select:focus {
-  border-color: var(--primary);
-  box-shadow: 0 0 0 3px rgba(65, 55, 168, 0.13);
-}
-
-button:focus-visible,
-a:focus-visible,
-input:focus-visible,
-select:focus-visible {
-  outline-color: rgba(65, 55, 168, 0.28);
-}
-
-.toast {
-  background: var(--primary-dark);
-}