Upload 6 files

README.md

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

app.js

@@ -1,49 +1,5 @@
 "use strict";
 
-const FIELD_LABELS = [
-  "اسم المشرف",
-  "اسم الباحث",
-  "رقم السجل(العينة)",
-  "اسم العينة",
-  "حالة الاكتمال",
-  "حالة الاقرار",
-  "حالة الاستيفاء",
-  "نوع الاستيفاء",
-  "حالة الاعتماد",
-  "النشاط",
-  "الايميل",
-  "الموقع",
-  "رقم التواصل",
-];
-
-const FIELD_KEYS = [
-  "supervisor",
-  "researcher",
-  "recordNumber",
-  "sampleName",
-  "completionStatus",
-  "declarationStatus",
-  "fulfillmentStatus",
-  "fulfillmentType",
-  "approvalStatus",
-  "activity",
-  "email",
-  "location",
-  "phone",
-];
-
-const DISPLAY_FIELDS = [
-  ["recordNumber", "رقم السجل", false],
-  ["completionStatus", "حالة الاكتمال", false],
-  ["declarationStatus", "حالة الإقرار", false],
-  ["fulfillmentType", "نوع الاستيفاء", false],
-  ["approvalStatus", "حالة الاعتماد", false],
-  ["activity", "النشاط", true],
-  ["email", "البريد الإلكتروني", true],
-  ["location", "الموقع", true],
-  ["phone", "رقم التواصل", true],
-];
-
 const loginView = document.getElementById("loginView");
 const dashboardView = document.getElementById("dashboardView");
 const loginForm = document.getElementById("loginForm");
@@ -52,36 +8,31 @@ const loginButton = document.getElementById("loginButton");
 const loginError = document.getElementById("loginError");
 const togglePassword = document.getElementById("togglePassword");
 const logoutButton = document.getElementById("logoutButton");
-const supervisorSelect = document.getElementById("supervisorSelect");
-const researcherSelect = document.getElementById("researcherSelect");
-const statusSelect = document.getElementById("statusSelect");
+const regionSelect = document.getElementById("regionSelect");
+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 statusChips = document.getElementById("statusChips");
 const samplesGrid = document.getElementById("samplesGrid");
 const noResults = document.getElementById("noResults");
-const copyAllButton = document.getElementById("copyAllButton");
 const loadMoreWrap = document.getElementById("loadMoreWrap");
 const loadMoreButton = document.getElementById("loadMoreButton");
 const loadMoreMeta = document.getElementById("loadMoreMeta");
-const clearFiltersButton = document.getElementById("clearFiltersButton");
+const totalCounter = document.getElementById("totalCounter");
+const regionStats = document.getElementById("regionStats");
 const toast = document.getElementById("toast");
 
-let allRows = [];
+const PAGE_SIZE = 24;
+const CONTACT_MESSAGE = (name) =>
+  `مرحبا استاذ\nاتواصل معاك لمعرف موقع (${name || "العينة"})\nهل ممكن تزودني بموقع العينة كرما`;
+
+let rows = [];
 let visibleRows = [];
-let failedAttempts = 0;
-let toastTimer;
-let inactivityTimer;
-let inactivityWarningTimer;
 let renderedCount = 0;
-const ALL_SUPERVISORS_VALUE = "__all_supervisors__";
-const PAGE_SIZE = 24;
-const INACTIVITY_TIMEOUT_MS = 30 * 60 * 1000;
-const INACTIVITY_WARNING_MS = 29 * 60 * 1000;
-const ACTIVITY_EVENTS = ["click", "keydown", "pointerdown", "touchstart", "scroll"];
+let toastTimer;
 
 function base64ToBytes(value) {
   const binary = atob(value);
@@ -96,14 +47,8 @@ async function deriveKey(password, salt) {
     false,
     ["deriveKey"],
   );
-
   return crypto.subtle.deriveKey(
-    {
-      name: "PBKDF2",
-      salt,
-      iterations: ENCRYPTED_DATA.iterations,
-      hash: "SHA-256",
-    },
+    { name: "PBKDF2", salt, iterations: ENCRYPTED_DATA.iterations, hash: "SHA-256" },
     material,
     { name: "AES-GCM", length: 256 },
     false,
@@ -132,41 +77,22 @@ function normalize(value) {
     .toLowerCase();
 }
 
-function formatPhone(value) {
-  const raw = String(value ?? "").trim();
-  if (!raw) return "";
-  const digits = raw.replace(/\D/g, "");
-  if (!digits) return raw;
-  if (digits.startsWith("0")) return digits;
-  if (digits.startsWith("966")) return `0${digits.slice(3)}`;
-  return `0${digits}`;
-}
-
-function rowToObject(row) {
-  const item = Object.fromEntries(FIELD_KEYS.map((key, index) => [key, row[index] ?? ""]));
-  item.phone = formatPhone(item.phone);
-  return item;
-}
-
 function uniqueSorted(values) {
   return [...new Set(values.filter(Boolean))].sort((a, b) =>
     String(a).localeCompare(String(b), "ar", { sensitivity: "base" }),
   );
 }
 
-function setOptions(select, values, placeholder, counts = null) {
+function setOptions(select, values, placeholder) {
   select.replaceChildren(new Option(placeholder, ""));
-  values.forEach((value) => {
-    const label = counts ? `${value} (${counts.get(value) || 0})` : value;
-    select.add(new Option(label, value));
-  });
+  values.forEach((value) => select.add(new Option(value, value)));
 }
 
 function showToast(message) {
   clearTimeout(toastTimer);
   toast.textContent = message;
   toast.classList.add("show");
-  toastTimer = setTimeout(() => toast.classList.remove("show"), 2300);
+  toastTimer = setTimeout(() => toast.classList.remove("show"), 2200);
 }
 
 async function copyText(text, successMessage) {
@@ -185,119 +111,131 @@ async function copyText(text, successMessage) {
   showToast(successMessage);
 }
 
-function buildMessage(row, index = null) {
-  const title = index === null ? "بيانات العينة للتواصل" : `العينة رقم (${index})`;
-  const sampleLines = [
-    title,
-    "────────────────────",
-    row.sampleName && `اسم العينة: ${row.sampleName}`,
-    row.recordNumber && `رقم السجل: ${row.recordNumber}`,
-    row.fulfillmentStatus && `حالة الاستيفاء: ${row.fulfillmentStatus}`,
-    row.activity && `النشاط: ${row.activity}`,
-  ].filter(Boolean);
-  const contactLines = [
-    "بيانات التواصل",
-    "────────────────────",
-    row.phone && `رقم التواصل: ${formatPhone(row.phone)}`,
-    row.email && `البريد الإلكتروني: ${row.email}`,
-    row.location && `الموقع: ${row.location}`,
-  ].filter(Boolean);
-  const sections = [];
-
-  if (index === null) {
-    sections.push(
-      "السلام عليكم ورحمة الله وبركاته،",
-      "نأمل التكرم بالتواصل مع العينة التالية واستكمال الإجراء اللازم:",
-    );
-  }
+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 isCoordinate(value) {
+  return /^[-+]?\d{1,2}(?:\.\d+)?\s*,\s*[-+]?\d{1,3}(?:\.\d+)?$/.test(String(value ?? "").trim());
+}
 
-  sections.push(sampleLines.join("\n"));
-  if (contactLines.length > 2) sections.push(contactLines.join("\n"));
-  if (index === null) sections.push("شاكرين لكم تعاونكم.");
-  return sections.join("\n\n");
+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 createDetail(key, label, isContact, value) {
-  const wrapper = document.createElement("div");
-  wrapper.className = `detail-item${isContact ? " contact-detail" : ""}`;
-
-  const labelElement = document.createElement("span");
-  labelElement.className = "detail-label";
-  labelElement.textContent = label;
-
-  const valueRow = document.createElement("div");
-  valueRow.className = "detail-value-row";
-  const valueElement = document.createElement("span");
-  valueElement.className = "detail-value";
-  valueElement.textContent = String(value);
-  if (key === "phone" || key === "recordNumber") {
-    valueElement.dir = "ltr";
-    valueElement.style.textAlign = "right";
+function createActionLink(label, href, iconPath) {
+  const link = document.createElement("a");
+  link.className = "action-link";
+  link.href = href;
+  link.target = "_blank";
+  link.rel = "noopener";
+  link.append(createSvgIcon(iconPath), document.createTextNode(label));
+  return link;
+}
+
+function createDetail(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);
+  return item;
+}
+
+function createCoordinatesBlock(row) {
+  const value = String(row.coordinates ?? "").trim();
+  if (!value) return null;
+
+  const item = document.createElement("div");
+  item.className = "detail-item coordinates-detail";
+  const label = document.createElement("span");
+  label.className = "detail-label";
+  label.textContent = "الإحداثيات";
+  item.append(label);
+
+  if (isCoordinate(value)) {
+    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",
+      ),
+    );
+    return item;
   }
 
-  valueRow.append(valueElement);
-  if (key === "phone" || key === "email") {
-    const copyFieldButton = document.createElement("button");
-    copyFieldButton.type = "button";
-    copyFieldButton.className = "copy-field-button";
-    copyFieldButton.setAttribute("aria-label", key === "phone" ? "نسخ رقم التواصل" : "نسخ البريد الإلكتروني");
-    copyFieldButton.title = key === "phone" ? "نسخ رقم التواصل" : "نسخ البريد الإلكتروني";
-    copyFieldButton.innerHTML = `
-      <svg viewBox="0 0 24 24" aria-hidden="true">
-        <rect x="8" y="8" width="11" height="11" rx="2"></rect>
-        <path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2"></path>
-      </svg>
-    `;
-    copyFieldButton.addEventListener("click", () =>
-      copyText(String(value), key === "phone" ? "تم نسخ رقم التواصل" : "تم نسخ البريد الإلكتروني"),
+  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.establishmentName);
+    const actions = document.createElement("div");
+    actions.className = "contact-actions";
+    actions.append(
+      createActionLink("اتصال", `tel:+${phone}`, "M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.6a2 2 0 0 1-.4 2.1L8.1 9.6a16 16 0 0 0 6.3 6.3l1.2-1.2a2 2 0 0 1 2.1-.4c.8.3 1.7.5 2.6.6a2 2 0 0 1 1.7 2Z"),
+      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"),
     );
-    valueRow.append(copyFieldButton);
+    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);
   }
 
-  wrapper.append(labelElement, valueRow);
-  return wrapper;
+  return item;
 }
 
-function createSampleCard(row, index) {
+function createCard(row, index) {
   const card = document.createElement("article");
   card.className = "sample-card";
 
   const header = document.createElement("div");
   header.className = "sample-card-header";
-
-  const headingWrap = document.createElement("div");
-  const number = document.createElement("span");
-  number.className = "sample-index";
-  number.textContent = `العينة ${index + 1}`;
+  const heading = document.createElement("div");
+  const indexEl = document.createElement("span");
+  indexEl.className = "sample-index";
+  indexEl.textContent = `منشأة ${index + 1}`;
   const title = document.createElement("h3");
-  title.textContent = row.sampleName || "عينة دون اسم";
-  headingWrap.append(number, title);
-
+  title.textContent = row.establishmentName || "منشأة دون اسم";
+  heading.append(indexEl, title);
   const badge = document.createElement("span");
   badge.className = "status-badge";
-  badge.textContent = row.fulfillmentStatus || "غير محدد";
-  header.append(headingWrap, badge);
+  badge.textContent = row.complianceStatus || "غير محدد";
+  header.append(heading, badge);
 
   const details = document.createElement("div");
   details.className = "sample-details";
-  DISPLAY_FIELDS.forEach(([key, label, isContact]) => {
-    if (String(row[key] ?? "").trim()) {
-      details.append(createDetail(key, label, isContact, row[key]));
-    }
+  [
+    ["السجل التجاري", row.commercialRecord, "ltr-value"],
+    ["حالة الاستيفاء", row.complianceStatus, ""],
+    ["توضيح المدينة", row.cityClarification, "wide-detail"],
+  ].forEach(([label, value, className]) => {
+    if (String(value ?? "").trim()) details.append(createDetail(label, value, className));
   });
+  const coordinatesBlock = createCoordinatesBlock(row);
+  if (coordinatesBlock) details.append(coordinatesBlock);
 
-  const footer = document.createElement("div");
-  footer.className = "sample-card-footer";
-  const copyButton = document.createElement("button");
-  copyButton.className = "copy-sample";
-  copyButton.type = "button";
-  copyButton.textContent = "نسخ رسالة هذه العينة";
-  copyButton.addEventListener("click", () =>
-    copyText(buildMessage(row), "تم نسخ رسالة العينة"),
-  );
-  footer.append(copyButton);
-
-  card.append(header, details, footer);
+  card.append(header, details);
   return card;
 }
 
@@ -306,204 +244,103 @@ function renderVisibleRows(reset = false) {
     renderedCount = 0;
     samplesGrid.replaceChildren();
   }
-
-  const nextRows = visibleRows.slice(renderedCount, renderedCount + PAGE_SIZE);
   const fragment = document.createDocumentFragment();
-  nextRows.forEach((row, offset) => {
-    fragment.append(createSampleCard(row, renderedCount + offset));
+  visibleRows.slice(renderedCount, renderedCount + PAGE_SIZE).forEach((row, offset) => {
+    fragment.append(createCard(row, renderedCount + offset));
   });
   samplesGrid.append(fragment);
-  renderedCount += nextRows.length;
-
+  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} عينة`;
-}
-
-function renderStatusChips(rows) {
-  const counts = new Map();
-  rows.forEach((row) => {
-    const status = row.fulfillmentStatus || "غير محدد";
-    counts.set(status, (counts.get(status) || 0) + 1);
-  });
-
-  const createChip = (label, value, count) => {
-    const chip = document.createElement("button");
-    chip.type = "button";
-    chip.className = `status-chip${statusSelect.value === value ? " active" : ""}`;
-    chip.setAttribute("aria-pressed", String(statusSelect.value === value));
-    chip.append(document.createTextNode(label));
-
-    const strong = document.createElement("strong");
-    strong.textContent = count;
-    chip.append(strong);
-    chip.addEventListener("click", () => {
-      statusSelect.value = value;
-      applyFilters();
-    });
-    return chip;
-  };
-
-  const chips = [createChip("الكل", "", rows.length)];
-  [...counts.entries()].forEach(([status, count]) => {
-    chips.push(createChip(status, status, count));
-  });
-  statusChips.replaceChildren(...chips);
+  loadMoreMeta.textContent = `تم عرض ${renderedCount} من أصل ${visibleRows.length} منشأة`;
 }
 
 function applyFilters() {
-  const supervisor = supervisorSelect.value;
-  const researcher = researcherSelect.value;
+  const region = regionSelect.value;
+  const city = citySelect.value;
   const query = normalize(searchInput.value);
 
-  if (!supervisor && !query) {
-    resultsSection.hidden = true;
-    emptyState.hidden = false;
-    return;
-  }
-
-  const status = statusSelect.value;
-  const supervisorRows =
-    !supervisor || supervisor === ALL_SUPERVISORS_VALUE
-      ? allRows
-      : allRows.filter((row) => row.supervisor === supervisor);
-  const scopedRows = researcher
-    ? supervisorRows.filter((row) => row.researcher === researcher)
-    : supervisorRows;
+  const scopedRows = rows.filter((row) => {
+    const matchesRegion = !region || row.region === region;
+    const matchesCity = !city || row.city === city;
+    return matchesRegion && matchesCity;
+  });
 
   visibleRows = scopedRows.filter((row) => {
-    const matchesStatus = !status || row.fulfillmentStatus === status;
-    const matchesSearch =
-      !query ||
-      normalize(row.sampleName).includes(query) ||
-      normalize(row.recordNumber).includes(query);
-    return matchesStatus && matchesSearch;
+    if (!query) return Boolean(city || region);
+    return (
+      normalize(row.establishmentName).includes(query) ||
+      normalize(row.commercialRecord).includes(query) ||
+      normalize(row.cityClarification).includes(query)
+    );
   });
 
-  emptyState.hidden = true;
-  resultsSection.hidden = false;
-  resultsTitle.textContent =
-    researcher ||
-    (supervisor === ALL_SUPERVISORS_VALUE
-      ? "جميع العينات"
-      : supervisor
-        ? `عينات المشرف: ${supervisor}`
-        : "نتائج البحث");
-  resultsMeta.textContent = `${visibleRows.length} من أصل ${scopedRows.length} عينة`;
-  copyAllButton.disabled = visibleRows.length === 0;
-  copyAllButton.textContent = researcher ? "نسخ جميع عينات الباحث" : "نسخ جميع النتائج المعروضة";
-  renderStatusChips(scopedRows);
-
-  renderVisibleRows(true);
+  const shouldShow = visibleRows.length > 0 || city || region || query;
+  emptyState.hidden = shouldShow;
+  resultsSection.hidden = !shouldShow;
   noResults.hidden = visibleRows.length !== 0;
-}
-
-function resetResearcherControls() {
-  setOptions(researcherSelect, [], "جميع الباحثين");
-  setOptions(statusSelect, [], "جميع الحالات");
-  researcherSelect.disabled = true;
-  statusSelect.disabled = true;
-  resultsSection.hidden = true;
-  emptyState.hidden = false;
-  emptyState.querySelector("h3").textContent = "ابحث أو اختر المشرف";
-  emptyState.querySelector("p").textContent =
-    "يمكنك البحث مباشرة باسم العينة أو رقم السجل، أو اختيار المشرف لعرض كامل عيناته.";
+  resultsTitle.textContent = city || region || "نتائج البحث";
+  resultsMeta.textContent = `${visibleRows.length} من أصل ${scopedRows.length} منشأة`;
+  renderVisibleRows(true);
 }
 
 function initializeDashboard(data) {
-  allRows = data.rows.map(rowToObject);
-  const supervisorCounts = new Map();
-  allRows.forEach((row) =>
-    supervisorCounts.set(row.supervisor, (supervisorCounts.get(row.supervisor) || 0) + 1),
-  );
-  setOptions(
-    supervisorSelect,
-    uniqueSorted(allRows.map((row) => row.supervisor)),
-    "اختر المشرف",
-    supervisorCounts,
+  rows = data.rows || [];
+  totalCounter.textContent = `${rows.length} منشأة`;
+  setOptions(regionSelect, data.regions || uniqueSorted(rows.map((row) => row.region)), "اختر المنطقة");
+  const regionCounts = new Map();
+  rows.forEach((row) => regionCounts.set(row.region, (regionCounts.get(row.region) || 0) + 1));
+  regionStats.replaceChildren(
+    ...(data.regions || uniqueSorted(rows.map((row) => row.region))).map((region) => {
+      const chip = document.createElement("button");
+      chip.type = "button";
+      chip.className = "region-stat";
+      chip.innerHTML = `<span>${region}</span><strong>${regionCounts.get(region) || 0}</strong>`;
+      chip.addEventListener("click", () => {
+        regionSelect.value = region;
+        regionSelect.dispatchEvent(new Event("change"));
+        window.scrollTo({ top: document.querySelector(".controls-panel").offsetTop - 84, behavior: "smooth" });
+      });
+      return chip;
+    }),
   );
-  supervisorSelect.add(
-    new Option(`إبراهيم - جميع العينات (${allRows.length})`, ALL_SUPERVISORS_VALUE),
-    1,
-  );
-  searchInput.value = "";
-  searchInput.disabled = false;
-  resetResearcherControls();
-  startInactivityTimer();
-}
-
-function clearInactivityTimers() {
-  clearTimeout(inactivityTimer);
-  clearTimeout(inactivityWarningTimer);
-}
-
-function startInactivityTimer() {
-  clearInactivityTimers();
-  if (dashboardView.hidden) return;
-
-  inactivityWarningTimer = setTimeout(() => {
-    showToast("سيتم تسجيل الخروج تلقائيًا بعد دقيقة لعدم وجود نشاط");
-  }, INACTIVITY_WARNING_MS);
-
-  inactivityTimer = setTimeout(() => {
-    performLogout("تم تسجيل الخروج تلقائيًا بعد 30 دقيقة من عدم النشاط");
-  }, INACTIVITY_TIMEOUT_MS);
+  setOptions(citySelect, [], "اختر المدينة الصناعية");
+  citySelect.disabled = true;
+  applyFilters();
 }
 
-function performLogout(message = "") {
-  clearInactivityTimers();
-  allRows = [];
+function performLogout() {
+  rows = [];
   visibleRows = [];
-  renderedCount = 0;
-  supervisorSelect.value = "";
   searchInput.value = "";
-  resetResearcherControls();
+  regionSelect.value = "";
+  citySelect.value = "";
   dashboardView.hidden = true;
   loginView.hidden = false;
   passwordInput.focus();
-  if (message) showToast(message);
-}
-
-function clearFilters() {
-  supervisorSelect.value = "";
-  searchInput.value = "";
-  resetResearcherControls();
-  window.scrollTo({ top: 0, behavior: "smooth" });
-  showToast("تم مسح جميع الفلاتر");
-}
-
-function handleActivity() {
-  if (!dashboardView.hidden) startInactivityTimer();
 }
 
 loginForm.addEventListener("submit", async (event) => {
   event.preventDefault();
   const password = passwordInput.value.trim();
   if (!password) return;
-
   loginButton.disabled = true;
-  loginButton.querySelector("span").textContent = "جارٍ التحقق...";
+  loginButton.querySelector("span").textContent = "جاري التحقق...";
   loginError.textContent = "";
 
-  if (failedAttempts >= 3) {
-    await new Promise((resolve) => setTimeout(resolve, Math.min(failedAttempts * 800, 5000)));
-  }
-
   try {
     const data = await decryptData(password);
     initializeDashboard(data);
     passwordInput.value = "";
     loginView.hidden = true;
     dashboardView.hidden = false;
-    failedAttempts = 0;
   } catch {
-    failedAttempts += 1;
-    loginError.textContent = "رمز الدخول غير صحيح. تحقق منه وحاول مرة أخرى.";
+    loginError.textContent = "رمز الدخول غير صحيح.";
     passwordInput.select();
   } finally {
     loginButton.disabled = false;
-    loginButton.querySelector("span").textContent = "دخول آمن";
+    loginButton.querySelector("span").textContent = "دخول";
   }
 });
 
@@ -513,79 +350,26 @@ togglePassword.addEventListener("click", () => {
   togglePassword.setAttribute("aria-label", showing ? "إظهار رمز الدخول" : "إخفاء رمز الدخول");
 });
 
-logoutButton.addEventListener("click", () => {
-  performLogout();
-});
+logoutButton.addEventListener("click", performLogout);
 
-supervisorSelect.addEventListener("change", () => {
-  resetResearcherControls();
-  searchInput.value = "";
-  if (!supervisorSelect.value) {
-    applyFilters();
-    return;
-  }
-
-  const researchers = uniqueSorted(
-    allRows
-      .filter(
-        (row) =>
-          supervisorSelect.value === ALL_SUPERVISORS_VALUE ||
-          row.supervisor === supervisorSelect.value,
-      )
-      .map((row) => row.researcher),
-  );
-  const scopeRows =
-    supervisorSelect.value === ALL_SUPERVISORS_VALUE
-      ? allRows
-      : allRows.filter((row) => row.supervisor === supervisorSelect.value);
-  const researcherCounts = new Map();
-  scopeRows.forEach((row) =>
-    researcherCounts.set(row.researcher, (researcherCounts.get(row.researcher) || 0) + 1),
-  );
-  setOptions(researcherSelect, researchers, "جميع الباحثين", researcherCounts);
-  setOptions(
-    statusSelect,
-    uniqueSorted(scopeRows.map((row) => row.fulfillmentStatus)),
-    "جميع الحالات",
-  );
-  researcherSelect.disabled = false;
-  statusSelect.disabled = false;
+regionSelect.addEventListener("change", () => {
+  const cities = uniqueSorted(rows.filter((row) => row.region === regionSelect.value).map((row) => row.city));
+  setOptions(citySelect, cities, "اختر المدينة الصناعية");
+  citySelect.disabled = !regionSelect.value;
+  citySelect.value = "";
   applyFilters();
 });
 
-researcherSelect.addEventListener("change", () => {
-  const rows = allRows.filter((row) => {
-    const matchesSupervisor =
-      supervisorSelect.value === ALL_SUPERVISORS_VALUE ||
-      row.supervisor === supervisorSelect.value;
-    const matchesResearcher =
-      !researcherSelect.value || row.researcher === researcherSelect.value;
-    return matchesSupervisor && matchesResearcher;
-  });
-  const statuses = uniqueSorted(rows.map((row) => row.fulfillmentStatus));
-  setOptions(statusSelect, statuses, "جميع الحالات");
-  statusSelect.disabled = false;
-  applyFilters();
-});
-
-statusSelect.addEventListener("change", applyFilters);
+citySelect.addEventListener("change", applyFilters);
 searchInput.addEventListener("input", applyFilters);
 loadMoreButton.addEventListener("click", () => renderVisibleRows());
-clearFiltersButton.addEventListener("click", clearFilters);
-ACTIVITY_EVENTS.forEach((eventName) =>
-  document.addEventListener(eventName, handleActivity, { passive: true }),
-);
-
-copyAllButton.addEventListener("click", () => {
-  if (!visibleRows.length) return;
-  const heading = researcherSelect.value
-    ? `بيانات العينات الخاصة بالباحث: ${researcherSelect.value}`
-    : `بيانات العينات المعروضة (${visibleRows.length} عينة)`;
-  const messages = visibleRows.map((row, index) => buildMessage(row, index + 1));
-  copyText(
-    [heading, "════════════════════", ...messages].join("\n\n"),
-    "تم نسخ جميع العينات المعروضة",
-  );
+clearFiltersButton.addEventListener("click", () => {
+  regionSelect.value = "";
+  searchInput.value = "";
+  setOptions(citySelect, [], "اختر المدينة الصناعية");
+  citySelect.disabled = true;
+  applyFilters();
+  showToast("تم مسح الاختيارات");
 });
 
 if (!window.crypto?.subtle || typeof ENCRYPTED_DATA === "undefined") {

generate-data.mjs

@@ -2,29 +2,74 @@ import fs from "node:fs/promises";
 import crypto from "node:crypto";
 import { FileBlob, SpreadsheetFile } from "@oai/artifact-tool";
 
-const [inputPath, outputPath, password] = process.argv.slice(2);
+const [inputPath, outputPath, password = "1234"] = process.argv.slice(2);
 
-if (!inputPath || !outputPath || !password) {
-  console.error("Usage: node generate-data.mjs <input.xlsx> <output.js> <password>");
+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();
+}
+
+function getByHeader(row, headers, candidates) {
+  for (const candidate of candidates) {
+    const index = headers.findIndex((header) => normalizeHeader(header) === candidate);
+    if (index !== -1) return row[index] ?? "";
+  }
+  return "";
+}
+
+function clean(value) {
+  if (value === null || value === undefined) return "";
+  return String(value).trim();
+}
+
+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 sheet = workbook.worksheets.getItemAt(0);
-  const values = sheet.getUsedRange(true).values;
-  const headers = values[0].map((value) => String(value ?? "").trim());
-  const rows = values.slice(1).map((row) =>
-    headers.map((_, index) => {
-      const value = row[index];
-      if (value === null || value === undefined) return "";
-      return typeof value === "string" ? value.trim() : String(value);
-    }),
-  );
+  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, ["الاحداثيات", "الإحداثية", "الإحداثيات"])),
+      });
+    }
+  }
 
   const payload = JSON.stringify({
-    version: 1,
+    version: 2,
     generatedAt: new Date().toISOString(),
-    headers,
+    regions: REGIONS,
     rows,
   });
 
@@ -49,12 +94,5 @@ if (!inputPath || !outputPath || !password) {
   ].join("\n");
 
   await fs.writeFile(outputPath, output, "utf8");
-  console.log(
-    JSON.stringify({
-      rows: rows.length,
-      columns: headers.length,
-      encryptedBytes: combined.length,
-      outputPath,
-    }),
-  );
+  console.log(JSON.stringify({ rows: rows.length, regions: REGIONS.length, outputPath }));
 }

index.html

@@ -3,203 +3,134 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="theme-color" content="#123c69" />
+    <meta name="theme-color" content="#0f4c5c" />
     <meta name="robots" content="noindex, nofollow" />
-    <title>نظام متابعة العينات</title>
+    <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;600;700;800&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap"
       rel="stylesheet"
     />
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <div class="background-shape shape-one"></div>
-    <div class="background-shape shape-two"></div>
-
     <main>
       <section id="loginView" class="login-view">
-        <div class="login-card">
+        <form id="loginForm" class="login-card" autocomplete="off">
           <div class="brand-mark" aria-hidden="true">
-            <svg viewBox="0 0 48 48" role="img">
-              <path d="M24 4 42 14v20L24 44 6 34V14L24 4Z" />
-              <path d="M16 25.5 21.5 31 33 18.5" />
-            </svg>
+            <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="login-description">أدخل رمز الدخول لعرض بيانات المنشآت والمواقع وبيانات التواصل.</p>
 
-          <form id="loginForm" class="login-form" autocomplete="off">
-            <label for="password">رمز الدخول</label>
-            <div class="password-field">
-              <input
-                id="password"
-                name="password"
-                type="password"
-                inputmode="numeric"
-                placeholder="أدخل رمز الدخول"
-                required
-                autofocus
-              />
-              <button id="togglePassword" type="button" class="icon-button" aria-label="إظهار رمز الدخول">
-                <svg viewBox="0 0 24 24" aria-hidden="true">
-                  <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>
-            <p id="loginError" class="form-error" role="alert"></p>
-            <button id="loginButton" class="primary-button" type="submit">
-              <span>دخول آمن</span>
-              <svg viewBox="0 0 24 24" aria-hidden="true">
-                <path d="m9 18 6-6-6-6" />
-              </svg>
+          <label for="password">رمز الدخول</label>
+          <div class="password-field">
+            <input id="password" type="password" inputmode="numeric" placeholder="رمز الدخول" required autofocus />
+            <button id="togglePassword" type="button" class="icon-button" aria-label="إظهار رمز الدخول">
+              <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>
-          </form>
-
-          <div class="security-note">
-            <svg viewBox="0 0 24 24" aria-hidden="true">
-              <rect x="5" y="10" width="14" height="10" rx="2" />
-              <path d="M8 10V7a4 4 0 0 1 8 0v3" />
-            </svg>
-            <span>البيانات مشفرة ولا تُعرض قبل تسجيل الدخول.</span>
           </div>
-        </div>
+          <p id="loginError" class="form-error" role="alert"></p>
+          <button id="loginButton" class="primary-button" type="submit">
+            <span>دخول</span>
+            <svg viewBox="0 0 24 24"><path d="m9 18 6-6-6-6" /></svg>
+          </button>
+        </form>
       </section>
 
       <section id="dashboardView" class="dashboard-view" hidden>
         <header class="topbar">
           <div class="topbar-brand">
             <div class="brand-mark small" aria-hidden="true">
-              <svg viewBox="0 0 48 48">
-                <path d="M24 4 42 14v20L24 44 6 34V14L24 4Z" />
-                <path d="M16 25.5 21.5 31 33 18.5" />
-              </svg>
+              <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>المنشآت الصناعية</h1>
             </div>
           </div>
           <button id="logoutButton" class="secondary-button compact" type="button">
-            <svg viewBox="0 0 24 24" aria-hidden="true">
-              <path d="M10 17l5-5-5-5M15 12H3M15 4h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4" />
-            </svg>
+            <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>
         </header>
 
         <div class="dashboard-shell">
-          <section class="welcome-panel">
-            <div>
+          <section class="summary-panel">
+            <div class="summary-copy">
               <p class="eyebrow">لوحة الاستعلام</p>
-              <h2>الوصول إلى بيانات العينة بسهولة</h2>
-              <p>ابحث مباشرة، أو اختر المشرف لعرض عيناته ثم حدّد الباحث عند الحاجة.</p>
+              <h2>اختر المنطقة والمدينة الصناعية أو ابحث باسم المنشأة مباشرة</h2>
             </div>
-            <div class="privacy-pill">
-              <span class="status-dot"></span>
-              جلسة خاصة
+            <div class="summary-side">
+              <div id="totalCounter" class="counter-pill">0 منشأة</div>
+              <div id="regionStats" class="region-stats" aria-label="ملخص المناطق"></div>
             </div>
           </section>
 
-          <section class="controls-card">
+          <section class="controls-panel">
             <div class="filters-grid">
               <div class="field-group">
-                <label for="supervisorSelect">اسم المشرف</label>
-                <div class="select-wrap">
-                  <select id="supervisorSelect">
-                    <option value="">اختر المشرف</option>
-                  </select>
-                  <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m7 10 5 5 5-5" /></svg>
-                </div>
-              </div>
-
-              <div class="field-group">
-                <label for="researcherSelect">اسم الباحث</label>
+                <label for="regionSelect">المنطقة</label>
                 <div class="select-wrap">
-                  <select id="researcherSelect" disabled>
-                    <option value="">اختر الباحث</option>
-                  </select>
-                  <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m7 10 5 5 5-5" /></svg>
+                  <select id="regionSelect"><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">
-                <label for="statusSelect">حالة الاستيفاء</label>
+                <label for="citySelect">المدينة الصناعية</label>
                 <div class="select-wrap">
-                  <select id="statusSelect" disabled>
-                    <option value="">جميع الحالات</option>
-                  </select>
-                  <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m7 10 5 5 5-5" /></svg>
+                  <select id="citySelect" disabled><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>
+                <label for="searchInput">اسم المنشأة</label>
                 <div class="search-wrap">
-                  <svg viewBox="0 0 24 24" aria-hidden="true">
-                    <circle cx="11" cy="11" r="7" />
-                    <path d="m20 20-4-4" />
-                  </svg>
-                  <input
-                    id="searchInput"
-                    type="search"
-                    placeholder="اسم العينة أو رقم السجل"
-                  />
+                  <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>
               </div>
             </div>
+
+            <div class="filters-actions">
+              <button id="clearFiltersButton" class="clear-filters-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">
-            <div class="empty-icon">
-              <svg viewBox="0 0 48 48" aria-hidden="true">
-                <path d="M8 13h32v27H8z" />
-                <path d="M15 8h18v10H15zM15 26h18M15 33h11" />
-              </svg>
-            </div>
-            <h3>ابحث أو اختر المشرف</h3>
-            <p>اكتب اسم العينة أو رقم السجل مباشرة، أو اختر المشرف لعرض كامل عيناته.</p>
+            <h3>ابدأ بالاختيار أو البحث</h3>
+            <p>عند اختيار مدينة صناعية ستظهر كل بياناتها بالأسفل، ويمكن تضييق النتائج بالبحث.</p>
           </section>
 
           <section id="resultsSection" class="results-section" hidden>
             <div class="results-header">
               <div>
                 <p id="resultsMeta" class="results-meta"></p>
-                <h2 id="resultsTitle">العينات</h2>
+                <h2 id="resultsTitle">النتائج</h2>
               </div>
-              <button id="copyAllButton" class="primary-button copy-all" type="button">
-                <svg viewBox="0 0 24 24" aria-hidden="true">
-                  <rect x="8" y="8" width="11" height="11" rx="2" />
-                  <path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2" />
-                </svg>
-                نسخ جميع عينات الباحث
-              </button>
             </div>
-
-            <div id="statusChips" class="status-chips" aria-label="ملخص الحالات"></div>
             <div id="samplesGrid" class="samples-grid"></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 load-more-button" type="button">عرض المزيد</button>
               <p id="loadMoreMeta"></p>
             </div>
-
             <div id="noResults" class="no-results" hidden>
               <h3>لا توجد نتائج مطابقة</h3>
-              <p>جرّب تغيير حالة الاستيفاء أو عبارة البحث.</p>
+              <p>جرّب كتابة جزء من اسم المنشأة أو رقم السجل التجاري.</p>
             </div>
           </section>
         </div>
       </section>
     </main>
 
-    <footer id="footer">إعداد نوف الناصر</footer>
+    <footer>إعداد نظام الاستعلام</footer>
     <div id="toast" class="toast" role="status" aria-live="polite"></div>
 
     <script src="data.js"></script>

style.css

@@ -1,17 +1,17 @@
 :root {
-  --navy: #123c69;
-  --navy-dark: #0a2c50;
-  --blue: #1d659b;
-  --sky: #e9f4fb;
-  --teal: #12877d;
-  --teal-soft: #e8f6f3;
-  --ink: #172b3a;
-  --muted: #657786;
-  --line: #dce6ec;
+  --ink: #1d2935;
+  --muted: #667789;
+  --line: #d9e3e8;
+  --page: #f4f7f8;
   --surface: #ffffff;
-  --page: #f4f8fa;
+  --primary: #0f4c5c;
+  --primary-dark: #0a3440;
+  --accent: #1b8a6b;
+  --accent-soft: #e6f5ef;
+  --warning: #8a5a13;
+  --warning-soft: #fff5df;
   --danger: #b43d4f;
-  --shadow: 0 18px 50px rgba(15, 54, 82, 0.11);
+  --shadow: 0 10px 28px rgba(28, 53, 68, 0.08);
 }
 
 * {
@@ -27,11 +27,9 @@ body {
   min-height: 100vh;
   margin: 0;
   color: var(--ink);
-  font-size: 16px;
   font-family: "Tajawal", Arial, sans-serif;
-  background:
-    radial-gradient(circle at 10% 10%, rgba(41, 151, 173, 0.12), transparent 30%),
-    linear-gradient(145deg, #f9fbfc 0%, #eff6f8 100%);
+  font-size: 16px;
+  background: linear-gradient(180deg, #fbfcfd 0%, var(--page) 100%);
 }
 
 button,
@@ -49,6 +47,8 @@ button {
 }
 
 svg {
+  width: 20px;
+  height: 20px;
   fill: none;
   stroke: currentColor;
   stroke-linecap: round;
@@ -56,119 +56,77 @@ svg {
   stroke-width: 1.8;
 }
 
-.background-shape {
-  position: fixed;
-  z-index: -1;
-  border-radius: 999px;
-  filter: blur(2px);
-  pointer-events: none;
-}
-
-.shape-one {
-  width: 340px;
-  height: 340px;
-  top: -170px;
-  right: -100px;
-  background: rgba(29, 101, 155, 0.1);
-}
-
-.shape-two {
-  width: 280px;
-  height: 280px;
-  bottom: -150px;
-  left: -80px;
-  background: rgba(18, 135, 125, 0.1);
-}
-
 .login-view {
-  min-height: calc(100vh - 56px);
+  min-height: calc(100vh - 52px);
   display: grid;
   place-items: center;
-  padding: 32px 20px;
+  padding: 24px;
 }
 
 .login-card {
-  width: min(100%, 450px);
-  padding: 42px;
-  text-align: center;
-  background: rgba(255, 255, 255, 0.95);
-  border: 1px solid rgba(220, 230, 236, 0.9);
-  border-radius: 28px;
+  width: min(100%, 430px);
+  padding: 34px;
+  text-align: right;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 8px;
   box-shadow: var(--shadow);
-  backdrop-filter: blur(18px);
 }
 
 .brand-mark {
-  width: 72px;
-  height: 72px;
+  width: 56px;
+  height: 56px;
   display: grid;
   place-items: center;
-  margin: 0 auto 22px;
-  color: white;
-  background: linear-gradient(145deg, var(--navy), var(--blue));
-  border-radius: 22px;
-  box-shadow: 0 14px 30px rgba(18, 60, 105, 0.25);
+  margin-bottom: 18px;
+  color: #fff;
+  background: var(--primary);
+  border-radius: 8px;
 }
 
 .brand-mark svg {
-  width: 43px;
-  height: 43px;
-}
-
-.brand-mark svg path:first-child {
-  fill: rgba(255, 255, 255, 0.08);
-}
-
-.brand-mark svg path:last-child {
-  stroke-width: 3;
+  width: 32px;
+  height: 32px;
 }
 
 .brand-mark.small {
-  width: 48px;
-  height: 48px;
+  width: 44px;
+  height: 44px;
   margin: 0;
-  border-radius: 15px;
-  box-shadow: none;
-}
-
-.brand-mark.small svg {
-  width: 29px;
-  height: 29px;
 }
 
 .eyebrow {
-  margin: 0 0 8px;
-  color: var(--teal);
+  margin: 0 0 6px;
+  color: var(--accent);
   font-size: 13px;
   font-weight: 800;
-  letter-spacing: 0.04em;
+}
+
+h1,
+h2,
+h3,
+p {
+  overflow-wrap: anywhere;
 }
 
 .login-card h1 {
   margin: 0;
-  color: var(--navy-dark);
-  font-size: clamp(27px, 5vw, 34px);
+  color: var(--primary-dark);
+  font-size: 28px;
   line-height: 1.35;
 }
 
 .login-description {
-  max-width: 340px;
-  margin: 12px auto 28px;
+  margin: 10px 0 24px;
   color: var(--muted);
-  font-size: 16px;
   line-height: 1.8;
 }
 
-.login-form {
-  text-align: right;
-}
-
-.login-form label,
+.login-card label,
 .field-group label {
   display: block;
   margin-bottom: 8px;
-  color: #314b5e;
-  font-size: 15px;
+  color: #34495a;
   font-weight: 700;
 }
 
@@ -182,60 +140,54 @@ svg {
 .search-wrap input,
 .select-wrap select {
   width: 100%;
-  height: 52px;
+  height: 50px;
   color: var(--ink);
   background: #fbfdfe;
   border: 1px solid var(--line);
-  border-radius: 14px;
-  font-size: 16px;
+  border-radius: 8px;
   outline: none;
-  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
+  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
 }
 
 .password-field input {
-  padding: 0 16px 0 50px;
+  padding: 0 14px 0 48px;
 }
 
 .password-field input:focus,
 .search-wrap input:focus,
 .select-wrap select:focus {
-  background: white;
-  border-color: var(--blue);
-  box-shadow: 0 0 0 4px rgba(29, 101, 155, 0.1);
+  background: #fff;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(15, 76, 92, 0.12);
 }
 
 .icon-button {
   position: absolute;
   top: 50%;
-  left: 8px;
-  width: 38px;
-  height: 38px;
+  left: 7px;
+  width: 36px;
+  height: 36px;
   display: grid;
   place-items: center;
   padding: 0;
   color: var(--muted);
   background: transparent;
   border: 0;
-  border-radius: 10px;
+  border-radius: 8px;
   transform: translateY(-50%);
 }
 
 .icon-button:hover {
-  color: var(--navy);
-  background: var(--sky);
-}
-
-.icon-button svg {
-  width: 22px;
-  height: 22px;
+  color: var(--primary);
+  background: #edf5f7;
 }
 
 .form-error {
   min-height: 22px;
-  margin: 7px 2px 5px;
+  margin: 7px 2px 8px;
   color: var(--danger);
   font-size: 13px;
-  font-weight: 600;
+  font-weight: 700;
 }
 
 .primary-button,
@@ -243,280 +195,198 @@ svg {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 9px;
-  min-height: 48px;
-  padding: 0 20px;
-  font-weight: 700;
-  border-radius: 13px;
-  transition: transform 0.18s, box-shadow 0.18s, background 0.18s;
+  gap: 8px;
+  min-height: 46px;
+  padding: 0 18px;
+  font-weight: 800;
+  border-radius: 8px;
 }
 
 .primary-button {
-  color: white;
-  background: linear-gradient(135deg, var(--navy), var(--blue));
-  border: 0;
-  box-shadow: 0 9px 22px rgba(18, 60, 105, 0.2);
-}
-
-.login-form .primary-button {
   width: 100%;
+  color: #fff;
+  background: var(--primary);
+  border: 0;
 }
 
 .primary-button:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 12px 25px rgba(18, 60, 105, 0.26);
+  background: var(--primary-dark);
 }
 
 .primary-button:disabled {
   cursor: wait;
   opacity: 0.65;
-  transform: none;
-}
-
-.primary-button svg,
-.secondary-button svg {
-  width: 20px;
-  height: 20px;
 }
 
-.security-note {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  margin-top: 22px;
-  color: var(--muted);
-  font-size: 12px;
+.secondary-button {
+  color: var(--primary);
+  background: #fff;
+  border: 1px solid var(--line);
 }
 
-.security-note svg {
-  width: 17px;
-  height: 17px;
-  color: var(--teal);
+.secondary-button:hover {
+  background: #edf5f7;
 }
 
 .topbar {
-  min-height: 78px;
+  min-height: 72px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 13px max(20px, calc((100% - 1240px) / 2));
-  background: rgba(255, 255, 255, 0.92);
+  gap: 16px;
+  padding: 12px max(18px, calc((100% - 1180px) / 2));
+  background: rgba(255, 255, 255, 0.96);
   border-bottom: 1px solid var(--line);
-  box-shadow: 0 5px 22px rgba(27, 64, 90, 0.05);
-  backdrop-filter: blur(12px);
 }
 
 .topbar-brand {
   display: flex;
   align-items: center;
-  gap: 13px;
-}
-
-.topbar-brand p {
-  margin: 0 0 2px;
-  color: var(--teal);
-  font-size: 11px;
-  font-weight: 700;
+  gap: 12px;
 }
 
+.topbar-brand p,
 .topbar-brand h1 {
   margin: 0;
-  color: var(--navy-dark);
-  font-size: 20px;
 }
 
-.secondary-button {
-  color: var(--navy);
-  background: white;
-  border: 1px solid var(--line);
+.topbar-brand p {
+  color: var(--accent);
+  font-size: 12px;
+  font-weight: 800;
 }
 
-.secondary-button:hover {
-  background: var(--sky);
-  border-color: #b9d4e4;
+.topbar-brand h1 {
+  color: var(--primary-dark);
+  font-size: 20px;
 }
 
 .secondary-button.compact {
-  min-height: 42px;
-  padding: 0 15px;
+  min-height: 40px;
+  padding: 0 14px;
 }
 
 .dashboard-shell {
-  width: min(1240px, calc(100% - 40px));
-  min-height: calc(100vh - 134px);
-  margin: 28px auto 44px;
+  width: min(1180px, calc(100% - 36px));
+  margin: 22px auto 40px;
+}
+
+.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);
 }
 
-.welcome-panel {
+.summary-panel {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 24px;
-  padding: 24px 28px;
-  color: white;
-  overflow: hidden;
-  position: relative;
-  background:
-    radial-gradient(circle at 12% 130%, rgba(89, 223, 206, 0.28), transparent 32%),
-    linear-gradient(115deg, rgba(8, 39, 72, 0.99), rgba(25, 105, 161, 0.95)),
-    var(--navy);
-  border-radius: 22px;
-  box-shadow: 0 14px 32px rgba(18, 60, 105, 0.17);
-}
-
-.welcome-panel .eyebrow {
-  color: #91dfd6;
-}
-
-.welcome-panel h2 {
-  margin: 0 0 5px;
-  font-size: clamp(21px, 3vw, 28px);
+  gap: 18px;
+  padding: 22px;
+  border-top: 4px solid var(--primary);
 }
 
-.welcome-panel > div > p:last-child {
+.summary-panel h2 {
   margin: 0;
-  color: rgba(255, 255, 255, 0.77);
-  font-size: 15px;
+  color: var(--primary-dark);
+  font-size: 24px;
+  line-height: 1.45;
 }
 
-.privacy-pill {
+.counter-pill {
   flex: 0 0 auto;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 10px 14px;
-  color: #d9fff9;
-  font-size: 13px;
-  font-weight: 700;
-  background: rgba(255, 255, 255, 0.11);
-  border: 1px solid rgba(255, 255, 255, 0.18);
-  border-radius: 999px;
-}
-
-.status-dot {
-  width: 8px;
-  height: 8px;
-  background: #68ebce;
-  border-radius: 50%;
-  box-shadow: 0 0 0 5px rgba(104, 235, 206, 0.14);
+  padding: 9px 14px;
+  color: var(--accent);
+  font-weight: 800;
+  background: var(--accent-soft);
+  border: 1px solid #c3e7d8;
+  border-radius: 8px;
 }
 
-.controls-card {
-  position: relative;
-  z-index: 1;
-  margin-top: 18px;
-  padding: 22px;
-  background: rgba(255, 255, 255, 0.96);
-  border: 1px solid var(--line);
-  border-radius: 20px;
-  box-shadow: 0 14px 34px rgba(24, 66, 91, 0.08);
-  backdrop-filter: blur(16px);
+.controls-panel {
+  margin-top: 14px;
+  padding: 18px;
 }
 
 .filters-grid {
   display: grid;
-  grid-template-columns: repeat(3, minmax(180px, 1fr)) minmax(220px, 1.2fr);
-  gap: 16px;
-}
-
-.filters-actions {
-  display: flex;
-  justify-content: flex-start;
-  margin-top: 14px;
-}
-
-.clear-filters-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 7px;
-  min-height: 38px;
-  padding: 0 13px;
-  color: #607583;
-  font-size: 13px;
-  font-weight: 700;
-  background: #f7fafb;
-  border: 1px solid var(--line);
-  border-radius: 11px;
-}
-
-.clear-filters-button:hover {
-  color: var(--danger);
-  background: #fff7f8;
-  border-color: #ecc9cf;
-}
-
-.clear-filters-button svg {
-  width: 17px;
-  height: 17px;
+  grid-template-columns: minmax(180px, 0.9fr) minmax(220px, 1fr) minmax(260px, 1.35fr);
+  gap: 14px;
 }
 
 .select-wrap select {
-  padding: 0 15px 0 42px;
+  padding: 0 14px 0 40px;
   appearance: none;
 }
 
 .select-wrap > svg {
   position: absolute;
   top: 50%;
-  left: 15px;
-  width: 19px;
+  left: 13px;
   color: var(--muted);
   transform: translateY(-50%);
   pointer-events: none;
 }
 
 .search-wrap input {
-  padding: 0 44px 0 14px;
+  padding: 0 42px 0 14px;
 }
 
 .search-wrap > svg {
   position: absolute;
   top: 50%;
-  right: 15px;
-  width: 20px;
+  right: 13px;
   color: var(--muted);
   transform: translateY(-50%);
 }
 
-select:disabled,
-input:disabled {
-  cursor: not-allowed;
+select:disabled {
   color: #9aa8b2;
-  background: #f3f6f7;
+  background: #f2f5f6;
+  cursor: not-allowed;
 }
 
-.empty-state,
-.no-results {
-  margin-top: 18px;
-  padding: 64px 24px;
-  text-align: center;
-  background: rgba(255, 255, 255, 0.7);
-  border: 1px dashed #bfd0da;
-  border-radius: 20px;
+.filters-actions {
+  display: flex;
+  justify-content: flex-start;
+  margin-top: 12px;
 }
 
-.empty-icon {
-  width: 72px;
-  height: 72px;
-  display: grid;
-  place-items: center;
-  margin: 0 auto 16px;
-  color: var(--blue);
-  background: var(--sky);
-  border-radius: 22px;
+.clear-filters-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  min-height: 38px;
+  padding: 0 12px;
+  color: var(--muted);
+  font-weight: 800;
+  background: #f8fafb;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+}
+
+.clear-filters-button:hover {
+  color: var(--danger);
+  background: #fff7f8;
 }
 
-.empty-icon svg {
-  width: 39px;
-  height: 39px;
+.empty-state,
+.no-results {
+  margin-top: 16px;
+  padding: 44px 20px;
+  text-align: center;
+  box-shadow: none;
 }
 
 .empty-state h3,
 .no-results h3 {
-  margin: 0 0 7px;
-  color: var(--navy-dark);
+  margin: 0 0 8px;
+  color: var(--primary-dark);
   font-size: 20px;
 }
 
@@ -527,171 +397,85 @@ input:disabled {
 }
 
 .results-section {
-  margin-top: 24px;
+  margin-top: 22px;
 }
 
 .results-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 18px;
+  gap: 16px;
   margin-bottom: 14px;
 }
 
 .results-meta {
   margin: 0 0 4px;
-  color: var(--teal);
+  color: var(--accent);
   font-size: 14px;
   font-weight: 800;
 }
 
 .results-header h2 {
   margin: 0;
-  color: var(--navy-dark);
-  font-size: 26px;
-}
-
-.copy-all {
-  min-height: 44px;
-  background: var(--teal);
-  box-shadow: 0 8px 20px rgba(18, 135, 125, 0.18);
-}
-
-.status-chips {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-bottom: 17px;
-}
-
-.status-chip {
-  min-height: 38px;
-  padding: 7px 11px;
-  color: #466071;
-  font-family: inherit;
-  font-size: 13px;
-  font-weight: 700;
-  background: white;
-  border: 1px solid var(--line);
-  border-radius: 999px;
-  box-shadow: 0 3px 10px rgba(26, 63, 87, 0.04);
-  cursor: pointer;
-  transition: color 0.18s, background 0.18s, border-color 0.18s, transform 0.18s;
-}
-
-.status-chip:hover {
-  color: var(--navy);
-  background: var(--sky);
-  border-color: #b7d3e3;
-  transform: translateY(-1px);
-}
-
-.status-chip.active {
-  color: white;
-  background: linear-gradient(135deg, var(--navy), var(--blue));
-  border-color: transparent;
-  box-shadow: 0 7px 17px rgba(18, 60, 105, 0.2);
-}
-
-.status-chip strong {
-  margin-right: 5px;
-  color: var(--navy);
-}
-
-.status-chip.active strong {
-  color: #a9eee5;
+  color: var(--primary-dark);
+  font-size: 25px;
 }
 
 .samples-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 16px;
-}
-
-.load-more-wrap {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  margin-top: 24px;
-}
-
-.load-more-button {
-  min-width: 210px;
-  min-height: 50px;
-  color: var(--navy);
-  font-size: 16px;
-  background: white;
-  box-shadow: 0 8px 22px rgba(26, 63, 87, 0.08);
-}
-
-.load-more-wrap p {
-  margin: 0;
-  color: var(--muted);
-  font-size: 13px;
-  font-weight: 600;
+  gap: 14px;
 }
 
 .sample-card {
   overflow: hidden;
-  background: white;
-  border: 1px solid var(--line);
-  border-radius: 21px;
-  box-shadow: 0 10px 28px rgba(26, 63, 87, 0.07);
-  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
-}
-
-.sample-card:hover {
-  border-color: #b9d4e4;
-  box-shadow: 0 13px 30px rgba(26, 63, 87, 0.1);
-  transform: translateY(-2px);
 }
 
 .sample-card-header {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  gap: 14px;
-  padding: 18px 20px 15px;
-  background: linear-gradient(180deg, #fbfdfe, white);
+  gap: 12px;
+  padding: 16px 18px;
+  background: #fbfdfe;
   border-bottom: 1px solid #edf2f5;
-  border-top: 4px solid var(--teal);
+  border-top: 4px solid var(--accent);
 }
 
 .sample-index {
   display: inline-block;
   margin-bottom: 5px;
-  color: var(--teal);
+  color: var(--accent);
   font-size: 12px;
   font-weight: 800;
 }
 
 .sample-card h3 {
   margin: 0;
-  color: var(--navy-dark);
-  font-size: 19px;
-  line-height: 1.65;
+  color: var(--primary-dark);
+  font-size: 18px;
+  line-height: 1.6;
 }
 
 .status-badge {
   flex: 0 0 auto;
-  max-width: 155px;
+  max-width: 150px;
   padding: 7px 10px;
-  color: #8f4f16;
+  color: var(--warning);
   font-size: 12px;
   font-weight: 800;
-  line-height: 1.4;
+  line-height: 1.45;
   text-align: center;
-  background: #fff4e7;
-  border: 1px solid #f4d3aa;
-  border-radius: 999px;
+  background: var(--warning-soft);
+  border: 1px solid #f0d394;
+  border-radius: 8px;
 }
 
 .sample-details {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 0;
-  padding: 4px 20px;
+  padding: 4px 18px 12px;
 }
 
 .detail-item {
@@ -714,103 +498,111 @@ input:disabled {
   margin-bottom: 5px;
   color: var(--muted);
   font-size: 12px;
-  font-weight: 700;
+  font-weight: 800;
 }
 
 .detail-value {
   display: block;
-  overflow-wrap: anywhere;
-  color: #233d4f;
-  font-size: 15px;
-  font-weight: 600;
-  line-height: 1.6;
-}
-
-.detail-value-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-}
-
-.copy-field-button {
-  flex: 0 0 auto;
-  width: 34px;
-  height: 34px;
-  display: grid;
-  place-items: center;
-  padding: 0;
-  color: var(--blue);
-  background: var(--sky);
-  border: 1px solid #cee3ef;
-  border-radius: 9px;
+  color: #253b4c;
+  font-weight: 700;
+  line-height: 1.65;
 }
 
-.copy-field-button:hover {
-  color: white;
-  background: var(--blue);
-  border-color: var(--blue);
+.wide-detail,
+.coordinates-detail {
+  grid-column: 1 / -1;
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+  border-left: 0 !important;
 }
 
-.copy-field-button svg {
-  width: 17px;
-  height: 17px;
+.ltr-value .detail-value {
+  direction: ltr;
+  text-align: right;
 }
 
-.contact-detail .detail-value {
-  color: var(--blue);
+.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;
 }
 
-.sample-card-footer {
-  padding: 14px 20px 18px;
+button.action-link {
+  font: inherit;
 }
 
-.copy-sample {
-  width: 100%;
-  min-height: 42px;
-  color: var(--navy);
-  font-weight: 800;
-  background: var(--sky);
-  border: 1px solid #cde2ee;
-  border-radius: 12px;
-  font-size: 15px;
+.action-link:hover {
+  color: #fff;
+  background: var(--primary);
+  border-color: var(--primary);
 }
 
-.copy-sample:hover {
-  color: white;
-  background: var(--navy);
-  border-color: var(--navy);
+.contact-note {
+  margin: 0 0 10px;
+  color: #253b4c;
+  font-weight: 700;
+  line-height: 1.8;
+  white-space: pre-line;
 }
 
-.no-results {
-  margin-top: 0;
+.contact-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
 }
 
-footer {
-  min-height: 56px;
+.load-more-wrap {
   display: flex;
+  flex-direction: column;
   align-items: center;
-  justify-content: center;
-  color: #70828f;
-  font-size: 13px;
-  font-weight: 600;
+  gap: 8px;
+  margin-top: 22px;
 }
 
-.toast {
-  position: fixed;
+.load-more-button {
+  min-width: 190px;
+}
+
+.load-more-wrap p {
+  margin: 0;
+  color: var(--muted);
+  font-size: 13px;
+  font-weight: 700;
+}
+
+footer {
+  min-height: 52px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--muted);
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.toast {
+  position: fixed;
   z-index: 30;
   right: 50%;
-  bottom: 24px;
-  padding: 12px 18px;
-  color: white;
-  font-size: 14px;
-  font-weight: 700;
-  background: #173b52;
-  border-radius: 12px;
-  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
+  bottom: 20px;
+  padding: 12px 16px;
+  color: #fff;
+  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%, 20px);
-  transition: opacity 0.25s, transform 0.25s;
+  transform: translate(50%, 18px);
+  transition: opacity 0.22s, transform 0.22s;
   pointer-events: none;
 }
 
@@ -819,174 +611,486 @@ footer {
   transform: translate(50%, 0);
 }
 
-@media (max-width: 980px) {
+@media (max-width: 900px) {
   .filters-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .search-group {
+    grid-column: 1 / -1;
   }
 }
 
-@media (max-width: 760px) {
+@media (max-width: 720px) {
   .dashboard-shell {
-    width: min(100% - 24px, 1240px);
+    width: min(100% - 24px, 1180px);
     margin-top: 14px;
   }
 
-  .welcome-panel,
+  .summary-panel,
   .results-header {
     align-items: stretch;
     flex-direction: column;
   }
 
-  .privacy-pill {
+  .counter-pill {
     align-self: flex-start;
   }
 
   .samples-grid {
     grid-template-columns: 1fr;
   }
+}
 
-  .copy-all {
-    width: 100%;
+@media (max-width: 560px) {
+  .login-view {
+    padding: 18px;
   }
 
-  .load-more-button {
-    width: 100%;
+  .login-card {
+    padding: 24px;
+  }
+
+  .topbar {
+    padding: 10px 12px;
+  }
+
+  .topbar-brand h1 {
+    font-size: 16px;
+  }
+
+  .topbar-brand p {
+    display: none;
   }
 
-  .results-header h2 {
-    font-size: 23px;
+  .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%;
   }
 }
 
-@media (max-width: 560px) {
-  .login-card {
-    padding: 32px 22px;
-    border-radius: 22px;
+/* 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);
+}
+
+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%);
+}
+
+button,
+a,
+input,
+select {
+  -webkit-tap-highlight-color: transparent;
+}
+
+button:focus-visible,
+a:focus-visible,
+input:focus-visible,
+select:focus-visible {
+  outline: 3px solid rgba(27, 138, 107, 0.28);
+  outline-offset: 2px;
+}
+
+.login-card {
+  position: relative;
+  overflow: hidden;
+  border-color: rgba(217, 227, 232, 0.9);
+  box-shadow: var(--soft-shadow);
+}
+
+.login-card::before {
+  content: "";
+  position: absolute;
+  inset: 0 0 auto;
+  height: 5px;
+  background: linear-gradient(90deg, var(--accent), var(--primary));
+}
+
+.brand-mark {
+  background: linear-gradient(145deg, var(--primary), #177b72);
+  box-shadow: 0 10px 24px rgba(15, 76, 92, 0.22);
+}
+
+.topbar {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  box-shadow: 0 8px 24px rgba(28, 53, 68, 0.06);
+  backdrop-filter: blur(14px);
+}
+
+.dashboard-shell {
+  margin-top: 18px;
+}
+
+.summary-panel,
+.controls-panel,
+.sample-card {
+  box-shadow: var(--soft-shadow);
+}
+
+.summary-panel {
+  align-items: stretch;
+  min-height: 150px;
+  padding: 24px;
+  border-top: 0;
+  border-right: 5px solid var(--primary);
+}
+
+.summary-copy {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 0;
+}
+
+.summary-panel h2 {
+  max-width: 760px;
+  font-size: 27px;
+}
+
+.summary-side {
+  flex: 0 0 min(380px, 42%);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 12px;
+  min-width: 280px;
+}
+
+.counter-pill {
+  align-self: flex-start;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 40px;
+  padding-inline: 16px;
+}
+
+.region-stats {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.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;
+  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);
+}
+
+.region-stat span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.region-stat strong {
+  flex: 0 0 auto;
+  min-width: 32px;
+  padding: 3px 7px;
+  color: var(--accent);
+  text-align: center;
+  background: var(--accent-soft);
+  border-radius: 8px;
+}
+
+.controls-panel {
+  position: sticky;
+  top: 86px;
+  z-index: 15;
+  border-color: rgba(217, 227, 232, 0.92);
+}
+
+.filters-grid {
+  align-items: end;
+}
+
+.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);
+}
+
+.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;
+}
+
+.clear-filters-button:hover,
+.action-link:hover,
+.secondary-button:hover {
+  transform: translateY(-1px);
+}
+
+.results-section {
+  scroll-margin-top: 150px;
+}
+
+.results-header {
+  padding: 0 2px;
+}
+
+.samples-grid {
+  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
+}
+
+.sample-card {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
+}
+
+.sample-card:hover {
+  border-color: #c1dbe2;
+  box-shadow: var(--lift-shadow);
+  transform: translateY(-2px);
+}
+
+.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));
+}
+
+.sample-card h3 {
+  font-size: 17px;
+}
+
+.status-badge {
+  white-space: normal;
+}
+
+.sample-details {
+  flex: 1;
+}
+
+.action-link {
+  min-height: 40px;
+  white-space: nowrap;
+}
+
+.load-more-button {
+  box-shadow: var(--soft-shadow);
+}
+
+@media (min-width: 1220px) {
+  .dashboard-shell {
+    width: min(1280px, calc(100% - 48px));
   }
 
   .topbar {
-    padding: 11px 14px;
+    padding-right: max(24px, calc((100% - 1280px) / 2));
+    padding-left: max(24px, calc((100% - 1280px) / 2));
   }
+}
 
-  .topbar-brand p {
-    display: none;
+@media (max-width: 980px) {
+  .summary-panel {
+    flex-direction: column;
   }
 
-  .topbar-brand h1 {
-    font-size: 16px;
+  .summary-side {
+    flex-basis: auto;
+    width: 100%;
+    min-width: 0;
   }
 
-  .brand-mark.small {
-    width: 42px;
-    height: 42px;
+  .controls-panel {
+    position: static;
   }
+}
 
-  .secondary-button.compact {
-    padding: 0 12px;
-    font-size: 13px;
+@media (max-width: 720px) {
+  body {
+    background: #f6f8f9;
   }
 
-  .welcome-panel,
-  .controls-card {
-    padding: 19px;
-    border-radius: 17px;
+  .topbar {
+    min-height: 64px;
   }
 
-  .controls-card {
-    top: 6px;
-    max-height: calc(100vh - 12px);
-    overflow-y: auto;
+  .dashboard-shell {
+    width: min(100% - 20px, 1180px);
+    margin-bottom: 28px;
   }
 
-  .filters-grid {
-    grid-template-columns: 1fr;
-    gap: 13px;
+  .summary-panel {
+    min-height: auto;
+    padding: 18px;
+    border-right-width: 4px;
+  }
+
+  .summary-panel h2 {
+    font-size: 21px;
+    line-height: 1.55;
+  }
+
+  .region-stats {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .controls-panel {
+    padding: 14px;
   }
 
   .filters-actions {
-    margin-top: 12px;
+    margin-top: 10px;
   }
 
-  .clear-filters-button {
-    width: 100%;
-    min-height: 44px;
-    font-size: 14px;
+  .samples-grid {
+    grid-template-columns: 1fr;
+    gap: 12px;
   }
 
-  .status-chips {
-    flex-wrap: nowrap;
-    overflow-x: auto;
-    margin-left: -12px;
-    margin-right: -12px;
-    padding: 2px 12px 9px;
-    scrollbar-width: thin;
-    scroll-snap-type: x proximity;
+  .sample-card:hover {
+    transform: none;
   }
+}
 
-  .status-chip {
-    flex: 0 0 auto;
-    min-height: 42px;
-    padding: 8px 14px;
-    font-size: 14px;
-    scroll-snap-align: start;
+@media (max-width: 560px) {
+  .login-card {
+    width: 100%;
+    padding: 26px 20px 22px;
   }
 
-  .search-group {
-    grid-row: 1;
+  .login-card h1 {
+    font-size: 24px;
   }
 
-  .password-field input,
-  .search-wrap input,
-  .select-wrap select {
-    height: 56px;
-    font-size: 16px;
+  .login-description {
+    font-size: 15px;
   }
 
-  .sample-card-header {
-    flex-direction: column;
+  .topbar {
+    gap: 10px;
   }
 
-  .status-badge {
-    max-width: 100%;
+  .secondary-button.compact {
+    min-width: 44px;
+    padding: 0 10px;
   }
 
-  .sample-details {
+  .summary-panel,
+  .controls-panel,
+  .sample-card,
+  .empty-state,
+  .no-results {
+    border-radius: 8px;
+  }
+
+  .region-stats {
     grid-template-columns: 1fr;
-    padding: 4px 17px;
   }
 
-  .detail-item:nth-child(odd),
-  .detail-item:nth-child(even) {
-    padding-right: 0;
-    padding-left: 0;
-    border-left: 0;
+  .region-stat {
+    min-height: 46px;
   }
 
-  .sample-card-header,
-  .sample-card-footer {
-    padding-right: 17px;
-    padding-left: 17px;
+  .clear-filters-button {
+    width: 100%;
+    justify-content: center;
+    min-height: 44px;
   }
 
-  .detail-label {
-    font-size: 13px;
+  .sample-card-header {
+    padding: 15px;
+    border-right-width: 4px;
   }
 
-  .detail-value {
+  .sample-card h3 {
     font-size: 16px;
+    line-height: 1.65;
   }
 
-  .copy-sample {
-    min-height: 48px;
-    font-size: 16px;
+  .sample-details {
+    padding: 2px 15px 10px;
+  }
+
+  .detail-item {
+    padding: 12px 0;
+  }
+
+  .detail-value,
+  .contact-note {
+    font-size: 15px;
+  }
+
+  .action-link {
+    min-height: 46px;
+  }
+
+  .toast {
+    right: 12px;
+    left: 12px;
+    bottom: 14px;
+    text-align: center;
+    transform: translateY(18px);
   }
-}
 
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    scroll-behavior: auto !important;
-    transition: none !important;
+  .toast.show {
+    transform: translateY(0);
   }
 }