Upload 3 files

app.js

@@ -1,7 +1,8 @@
 "use strict";
 
 const CONFIG = {
-  password: "2030",
+  researcherPassword: "2030",
+  managerPassword: "20302030",
   managerValue: "__manager__",
   apiUrl: "https://script.google.com/macros/s/AKfycbwH2wJA6ASKfm9P5FL4X_AFcVpzIoGaCub2tZ2csdxYDhinwZhToKnxhkCQlKPJi4mXvg/exec",
 };
@@ -39,6 +40,19 @@ const DISPLAY_COLUMNS = [
   ["actions", "الإجراءات"],
 ];
 
+const LABELS = {
+  commercial: "السجل التجاري",
+  facility: "اسم المنشأة",
+  accountManager: "مدير الحساب",
+  name: "الاسم",
+  jobTitle: "المسمى الوظيفي",
+  email: "البريد الإلكتروني",
+  phone: "رقم التواصل",
+  region: "المنطقة",
+  district: "الحي",
+  researcher: "اسم الباحث",
+};
+
 const els = {
   loginView: document.getElementById("loginView"),
   appView: document.getElementById("appView"),
@@ -55,6 +69,8 @@ const els = {
   enteredCount: document.getElementById("enteredCount"),
   missingCount: document.getElementById("missingCount"),
   progressCount: document.getElementById("progressCount"),
+  progressLabel: document.getElementById("progressLabel"),
+  progressBar: document.getElementById("progressBar"),
   adminStats: document.getElementById("adminStats"),
   researcherStatsGrid: document.getElementById("researcherStatsGrid"),
   bestResearcher: document.getElementById("bestResearcher"),
@@ -67,9 +83,11 @@ const els = {
   regionFilter: document.getElementById("regionFilter"),
   districtFilter: document.getElementById("districtFilter"),
   statusFilter: document.getElementById("statusFilter"),
+  saveAllButton: document.getElementById("saveAllButton"),
   resultsMeta: document.getElementById("resultsMeta"),
   tableHead: document.getElementById("tableHead"),
   tableBody: document.getElementById("tableBody"),
+  cardsGrid: document.getElementById("cardsGrid"),
   emptyState: document.getElementById("emptyState"),
   refreshButton: document.getElementById("refreshButton"),
   logoutButton: document.getElementById("logoutButton"),
@@ -83,6 +101,7 @@ const state = {
   visibleRows: [],
   currentUser: "",
   isManager: false,
+  dirtyRows: new Map(),
   toastTimer: null,
 };
 
@@ -148,6 +167,10 @@ function isEntered(row) {
   return EDITABLE_KEYS.every((key) => String(valueOf(row, key)).trim());
 }
 
+function rowByNumber(rowNumber) {
+  return state.rows.find((row) => Number(row.rowNumber) === Number(rowNumber));
+}
+
 function rowsFromApiPayload(payload) {
   const headers = Array.isArray(payload.headers) ? payload.headers.map((header) => String(header ?? "").trim()) : [];
   const rows = Array.isArray(payload.rows) ? payload.rows : [];
@@ -200,6 +223,8 @@ function applyLoadedData(data) {
   state.headerMap = buildHeaderMap(state.headers);
   validateHeaders();
   state.rows = data.rows;
+  state.dirtyRows.clear();
+  updateSaveAllState();
   populateSelects();
 }
 
@@ -232,26 +257,28 @@ function applyFilters() {
   const district = els.districtFilter.value;
   const status = els.statusFilter.value;
 
-  state.visibleRows = scopedRows().filter((row) => {
-    const searchText = normalize([
-      valueOf(row, "commercial"),
-      valueOf(row, "facility"),
-      valueOf(row, "accountManager"),
-      valueOf(row, "researcher"),
-      valueOf(row, "region"),
-      valueOf(row, "district"),
-      valueOf(row, "name"),
-      valueOf(row, "phone"),
-    ].join(" "));
-    const entered = isEntered(row);
-    return (
-      (!query || searchText.includes(query)) &&
-      (!researcher || valueOf(row, "researcher") === researcher) &&
-      (!region || valueOf(row, "region") === region) &&
-      (!district || valueOf(row, "district") === district) &&
-      (!status || (status === "entered" ? entered : !entered))
-    );
-  });
+  state.visibleRows = scopedRows()
+    .filter((row) => {
+      const searchText = normalize([
+        valueOf(row, "commercial"),
+        valueOf(row, "facility"),
+        valueOf(row, "accountManager"),
+        valueOf(row, "researcher"),
+        valueOf(row, "region"),
+        valueOf(row, "district"),
+        valueOf(row, "name"),
+        valueOf(row, "phone"),
+      ].join(" "));
+      const entered = isEntered(row);
+      return (
+        (!query || searchText.includes(query)) &&
+        (!researcher || valueOf(row, "researcher") === researcher) &&
+        (!region || valueOf(row, "region") === region) &&
+        (!district || valueOf(row, "district") === district) &&
+        (!status || (status === "entered" ? entered : !entered))
+      );
+    })
+    .sort((a, b) => Number(isEntered(a)) - Number(isEntered(b)) || String(valueOf(a, "facility")).localeCompare(String(valueOf(b, "facility")), "ar"));
   render();
 }
 
@@ -276,6 +303,8 @@ function renderSummary() {
   els.enteredCount.textContent = stats.entered;
   els.missingCount.textContent = stats.missing;
   els.progressCount.textContent = `${stats.progress}%`;
+  els.progressLabel.textContent = `نسبة الإنجاز ${stats.progress}%`;
+  els.progressBar.style.width = `${stats.progress}%`;
   els.resultsMeta.textContent = `${state.visibleRows.length} من أصل ${stats.total} منشأة`;
 }
 
@@ -312,8 +341,10 @@ function createInput(row, key) {
   input.value = valueOf(row, key);
   input.dataset.row = row.rowNumber;
   input.dataset.key = key;
+  input.placeholder = LABELS[key];
   if (key === "email") input.type = "email";
   if (key === "phone") input.inputMode = "tel";
+  input.addEventListener("input", () => handleFieldInput(row, key, input.value));
   return input;
 }
 
@@ -324,37 +355,60 @@ function mapUrl(row) {
   return `https://www.google.com/maps?q=${encodeURIComponent(`${y},${x}`)}`;
 }
 
+function phoneDigits(value) {
+  const digits = String(value ?? "").replace(/\D/g, "");
+  if (!digits) return "";
+  if (digits.startsWith("966")) return digits;
+  if (digits.startsWith("05") && digits.length === 10) return `966${digits.slice(1)}`;
+  if (digits.startsWith("5") && digits.length === 9) return `966${digits}`;
+  return digits;
+}
+
+function handleFieldInput(row, key, value) {
+  const rowNumber = Number(row.rowNumber);
+  const current = state.dirtyRows.get(rowNumber) || Object.fromEntries(EDITABLE_KEYS.map((item) => [item, valueOf(row, item)]));
+  current[key] = value;
+  state.dirtyRows.set(rowNumber, current);
+  syncInputs(rowNumber, key, value);
+  markDirty(rowNumber, true);
+  updateSaveAllState();
+}
+
+function syncInputs(rowNumber, key, value) {
+  document.querySelectorAll(`[data-row="${rowNumber}"][data-key="${key}"]`).forEach((input) => {
+    if (input.value !== value) input.value = value;
+  });
+}
+
+function markDirty(rowNumber, isDirty) {
+  document.querySelectorAll(`[data-row-shell="${rowNumber}"]`).forEach((node) => node.classList.toggle("is-dirty", isDirty));
+}
+
+function updateSaveAllState() {
+  const count = state.dirtyRows.size;
+  els.saveAllButton.disabled = count === 0;
+  els.saveAllButton.textContent = count ? `حفظ الكل (${count})` : "حفظ الكل";
+}
+
 function renderTable() {
   els.tableBody.replaceChildren(...state.visibleRows.map((row) => {
     const tr = document.createElement("tr");
+    tr.dataset.rowShell = row.rowNumber;
+    tr.classList.toggle("is-dirty", state.dirtyRows.has(row.rowNumber));
     DISPLAY_COLUMNS.forEach(([key]) => {
       const td = document.createElement("td");
       if (EDITABLE_KEYS.includes(key)) {
         td.append(createInput(row, key));
       } else if (key === "map") {
-        const href = mapUrl(row);
-        if (href) {
-          const link = document.createElement("a");
-          link.className = "map-link";
-          link.href = href;
-          link.target = "_blank";
-          link.rel = "noopener";
-          link.textContent = "الموقع";
-          td.append(link);
-        } else {
-          td.textContent = "-";
-        }
+        td.append(createMapLink(row));
       } else if (key === "status") {
-        const badge = document.createElement("span");
-        badge.className = `status-badge ${isEntered(row) ? "status-entered" : "status-missing"}`;
-        badge.textContent = isEntered(row) ? "مكتملة" : "غير مكتملة";
-        td.append(badge);
+        td.append(createStatusBadge(row));
       } else if (key === "actions") {
         const button = document.createElement("button");
         button.type = "button";
         button.className = "secondary-button save-button";
         button.textContent = "حفظ";
-        button.addEventListener("click", () => saveRow(row, tr, button));
+        button.addEventListener("click", () => saveRow(row, button));
         td.append(button);
       } else {
         td.textContent = valueOf(row, key) || "-";
@@ -364,7 +418,87 @@ function renderTable() {
     });
     return tr;
   }));
-  els.emptyState.hidden = state.visibleRows.length !== 0;
+}
+
+function createStatusBadge(row) {
+  const badge = document.createElement("span");
+  badge.className = `status-badge ${isEntered(row) ? "status-entered" : "status-missing"}`;
+  badge.textContent = isEntered(row) ? "مكتملة" : "غير مكتملة";
+  return badge;
+}
+
+function createMapLink(row) {
+  const href = mapUrl(row);
+  if (!href) return document.createTextNode("-");
+  const link = document.createElement("a");
+  link.className = "map-link";
+  link.href = href;
+  link.target = "_blank";
+  link.rel = "noopener";
+  link.textContent = "الموقع";
+  return link;
+}
+
+function renderCards() {
+  els.cardsGrid.replaceChildren(...state.visibleRows.map((row) => {
+    const card = document.createElement("article");
+    const entered = isEntered(row);
+    card.className = `facility-card ${entered ? "complete" : "incomplete"}`;
+    card.dataset.rowShell = row.rowNumber;
+    card.classList.toggle("is-dirty", state.dirtyRows.has(row.rowNumber));
+
+    const phone = valueOf(row, "phone");
+    const phoneNumber = phoneDigits(phone);
+    const actions = document.createElement("div");
+    actions.className = "card-actions";
+    actions.append(createMapLink(row));
+    if (phoneNumber) {
+      const call = document.createElement("a");
+      call.className = "secondary-button card-action-button";
+      call.href = `tel:${phoneNumber}`;
+      call.textContent = "اتصال";
+      const whatsapp = document.createElement("a");
+      whatsapp.className = "secondary-button card-action-button";
+      whatsapp.href = `https://wa.me/${phoneNumber}`;
+      whatsapp.target = "_blank";
+      whatsapp.rel = "noopener";
+      whatsapp.textContent = "واتساب";
+      actions.append(call, whatsapp);
+    }
+
+    const fields = document.createElement("div");
+    fields.className = "card-fields";
+    EDITABLE_KEYS.forEach((key) => {
+      const group = document.createElement("label");
+      group.textContent = LABELS[key];
+      group.append(createInput(row, key));
+      fields.append(group);
+    });
+
+    const save = document.createElement("button");
+    save.type = "button";
+    save.className = "primary-button card-save-button";
+    save.textContent = "حفظ";
+    save.addEventListener("click", () => saveRow(row, save));
+
+    card.innerHTML = `
+      <div class="facility-card-head">
+        <div>
+          <span class="facility-card-label">السجل التجاري: ${escapeHtml(valueOf(row, "commercial") || "-")}</span>
+          <h3>${escapeHtml(valueOf(row, "facility") || "منشأة دون اسم")}</h3>
+        </div>
+      </div>
+      <div class="card-info-grid">
+        <div><span>مدير الحساب</span><strong>${escapeHtml(valueOf(row, "accountManager") || "-")}</strong></div>
+        <div><span>المنطقة</span><strong>${escapeHtml(valueOf(row, "region") || "-")}</strong></div>
+        <div><span>الحي</span><strong>${escapeHtml(valueOf(row, "district") || "-")}</strong></div>
+        <div><span>الباحث</span><strong>${escapeHtml(valueOf(row, "researcher") || "-")}</strong></div>
+      </div>
+    `;
+    card.querySelector(".facility-card-head").append(createStatusBadge(row));
+    card.append(actions, fields, save);
+    return card;
+  }));
 }
 
 function render() {
@@ -372,21 +506,31 @@ function render() {
   renderAdminStats();
   renderTableHead();
   renderTable();
+  renderCards();
+  els.emptyState.hidden = state.visibleRows.length !== 0;
 }
 
-function collectRowInputs(row, tr) {
-  const values = {};
-  EDITABLE_KEYS.forEach((key) => {
-    const input = tr.querySelector(`[data-row="${row.rowNumber}"][data-key="${key}"]`);
-    values[key] = input ? input.value.trim() : valueOf(row, key);
-  });
-  return values;
+function valuesForRow(row) {
+  return state.dirtyRows.get(Number(row.rowNumber)) || Object.fromEntries(EDITABLE_KEYS.map((key) => [key, valueOf(row, key)]));
 }
 
-async function saveRow(row, tr, button) {
-  const values = collectRowInputs(row, tr);
-  const updates = Object.fromEntries(EDITABLE_KEYS.map((key) => [state.headerMap[key], values[key]]));
+function validateSaveValues(values) {
+  if (EDITABLE_KEYS.every((key) => !String(values[key] || "").trim())) {
+    return "أدخل بيانات التواصل قبل الحفظ.";
+  }
+  return "";
+}
+
+async function saveRow(row, button) {
+  const values = valuesForRow(row);
+  const validation = validateSaveValues(values);
+  if (validation) {
+    showToast(validation);
+    return;
+  }
+  const updates = Object.fromEntries(EDITABLE_KEYS.map((key) => [state.headerMap[key], values[key] || ""]));
   button.disabled = true;
+  const originalText = button.textContent;
   button.textContent = "جاري الحفظ...";
   try {
     await apiRequest({
@@ -397,14 +541,44 @@ async function saveRow(row, tr, button) {
       researcher: valueOf(row, "researcher"),
       updates,
     });
-    EDITABLE_KEYS.forEach((key) => setValue(row, key, values[key]));
-    showToast("تم تحديث نفس الصف في Google Sheet");
+    EDITABLE_KEYS.forEach((key) => setValue(row, key, values[key] || ""));
+    state.dirtyRows.delete(Number(row.rowNumber));
+    markDirty(row.rowNumber, false);
+    updateSaveAllState();
+    showToast("تم الحفظ بنجاح");
     applyFilters();
   } catch (error) {
     showToast(error.message || "تعذر الحفظ");
   } finally {
     button.disabled = false;
-    button.textContent = "حفظ";
+    button.textContent = originalText;
+  }
+}
+
+async function saveAllDirtyRows() {
+  const dirtyNumbers = [...state.dirtyRows.keys()];
+  if (!dirtyNumbers.length) return;
+  els.saveAllButton.disabled = true;
+  els.saveAllButton.textContent = "جاري حفظ الكل...";
+  try {
+    for (const rowNumber of dirtyNumbers) {
+      const row = rowByNumber(rowNumber);
+      if (!row) continue;
+      const values = valuesForRow(row);
+      const validation = validateSaveValues(values);
+      if (validation) throw new Error(`الصف ${rowNumber}: ${validation}`);
+      const updates = Object.fromEntries(EDITABLE_KEYS.map((key) => [state.headerMap[key], values[key] || ""]));
+      await apiRequest({ action: "update", rowNumber, updates });
+      EDITABLE_KEYS.forEach((key) => setValue(row, key, values[key] || ""));
+      state.dirtyRows.delete(rowNumber);
+      markDirty(rowNumber, false);
+    }
+    showToast("تم حفظ جميع التعديلات بنجاح");
+    applyFilters();
+  } catch (error) {
+    showToast(error.message || "تعذر حفظ جميع التعديلات");
+  } finally {
+    updateSaveAllState();
   }
 }
 
@@ -465,13 +639,22 @@ async function bootstrap() {
   }
 }
 
+function hasUnsavedChanges() {
+  return state.dirtyRows.size > 0;
+}
+
+function confirmIfDirty() {
+  return !hasUnsavedChanges() || window.confirm("توجد بيانات معدلة لم يتم حفظها. هل تريد المتابعة بدون حفظ؟");
+}
+
 function login() {
   const selected = els.researcherSelect.value;
   if (!selected) {
     els.loginError.textContent = "اختر اسم الباحث أو دخول المدير.";
     return;
   }
-  if (els.password.value !== CONFIG.password) {
+  const expectedPassword = selected === CONFIG.managerValue ? CONFIG.managerPassword : CONFIG.researcherPassword;
+  if (els.password.value !== expectedPassword) {
     els.loginError.textContent = "الرقم السري غير صحيح.";
     els.password.value = "";
     els.password.focus();
@@ -484,7 +667,7 @@ function login() {
   els.heroTitle.textContent = state.isManager ? "لوحة شاملة لجميع الباحثين والبيانات" : "العينات المسندة لك فقط";
   els.heroDescription.textContent = state.isManager
     ? "يمكنك مشاهدة جميع المنشآت والإحصائيات والتصدير والتعديل."
-    : "يمكنك البحث والتصفية وتعديل بيانات التواصل للعينات المسندة لك فقط.";
+    : "يمكنك فتح البطاقة، تعبئة بيانات التواصل، فتح الموقع، ثم الحفظ مباشرة.";
   els.adminStats.hidden = !state.isManager;
   els.researcherFilterGroup.hidden = !state.isManager;
   els.exportSummaryButton.hidden = !state.isManager;
@@ -496,8 +679,11 @@ function login() {
 }
 
 function logout() {
+  if (!confirmIfDirty()) return;
   state.currentUser = "";
   state.isManager = false;
+  state.dirtyRows.clear();
+  updateSaveAllState();
   els.password.value = "";
   els.searchInput.value = "";
   els.researcherFilter.value = "";
@@ -524,10 +710,21 @@ els.togglePassword.addEventListener("click", () => {
   control.addEventListener("change", applyFilters);
 });
 
+document.querySelectorAll(".quick-filter").forEach((button) => {
+  button.addEventListener("click", () => {
+    document.querySelectorAll(".quick-filter").forEach((item) => item.classList.remove("active"));
+    button.classList.add("active");
+    els.statusFilter.value = button.dataset.status || "";
+    applyFilters();
+  });
+});
+
 els.exportSummaryButton.addEventListener("click", exportSummary);
 els.exportFullButton.addEventListener("click", exportFull);
+els.saveAllButton.addEventListener("click", saveAllDirtyRows);
 els.logoutButton.addEventListener("click", logout);
 els.refreshButton.addEventListener("click", async () => {
+  if (!confirmIfDirty()) return;
   els.refreshButton.disabled = true;
   try {
     applyLoadedData(await loadData());
@@ -540,4 +737,10 @@ els.refreshButton.addEventListener("click", async () => {
   }
 });
 
+window.addEventListener("beforeunload", (event) => {
+  if (!hasUnsavedChanges()) return;
+  event.preventDefault();
+  event.returnValue = "";
+});
+
 bootstrap();

index.html

@@ -29,7 +29,7 @@
 
           <label for="password">الرقم السري</label>
           <div class="password-field">
-            <input id="password" type="password" inputmode="numeric" autocomplete="new-password" placeholder="••••" required />
+            <input id="password" type="password" inputmode="numeric" autocomplete="new-password" placeholder="****" required />
             <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>
@@ -74,10 +74,14 @@
             </div>
             <div class="quick-stats">
               <div><span>الإجمالي</span><strong id="totalCount">0</strong></div>
-              <div><span>المدخلة</span><strong id="enteredCount">0</strong></div>
-              <div><span>غير المدخلة</span><strong id="missingCount">0</strong></div>
+              <div><span>المكتملة</span><strong id="enteredCount">0</strong></div>
+              <div><span>غير المكتملة</span><strong id="missingCount">0</strong></div>
               <div><span>الإنجاز</span><strong id="progressCount">0%</strong></div>
             </div>
+            <div class="progress-wrap">
+              <span id="progressLabel">نسبة الإنجاز 0%</span>
+              <div class="progress-track"><i id="progressBar"></i></div>
+            </div>
           </section>
 
           <section id="adminStats" class="admin-stats" hidden>
@@ -139,13 +143,19 @@
                 <div class="select-wrap">
                   <select id="statusFilter">
                     <option value="">كل الحالات</option>
-                    <option value="entered">مدخلة</option>
-                    <option value="missing">غير مدخلة</option>
+                    <option value="entered">مكتملة</option>
+                    <option value="missing">غير مكتملة</option>
                   </select>
                   <svg viewBox="0 0 24 24"><path d="m7 10 5 5 5-5" /></svg>
                 </div>
               </div>
             </div>
+            <div class="quick-filter-row">
+              <button class="quick-filter active" type="button" data-status="">الكل</button>
+              <button class="quick-filter" type="button" data-status="entered">مكتملة</button>
+              <button class="quick-filter" type="button" data-status="missing">غير مكتملة</button>
+              <button id="saveAllButton" class="primary-button save-all-button" type="button" disabled>حفظ الكل</button>
+            </div>
           </section>
 
           <section class="table-section">
@@ -163,6 +173,7 @@
                 <tbody id="tableBody"></tbody>
               </table>
             </div>
+            <div id="cardsGrid" class="cards-grid"></div>
             <div id="emptyState" class="empty-state" hidden>
               <h3>لا توجد نتائج مطابقة</h3>
               <p>جرّب تغيير كلمات البحث أو التصفية.</p>

style.css

@@ -252,6 +252,37 @@ input:focus, select:focus {
   line-height: 1;
 }
 
+.progress-wrap {
+  grid-column: 1 / -1;
+  padding: 12px 14px;
+  background: #fbfdfe;
+  border: 1px solid #dbe8ed;
+  border-radius: 8px;
+}
+
+.progress-wrap span {
+  display: block;
+  margin-bottom: 8px;
+  color: var(--muted);
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.progress-track {
+  height: 10px;
+  overflow: hidden;
+  background: #edf3f6;
+  border-radius: 99px;
+}
+
+.progress-track i {
+  display: block;
+  width: 0;
+  height: 100%;
+  background: linear-gradient(90deg, var(--accent), var(--primary-alt));
+  transition: width 0.25s ease;
+}
+
 .admin-stats, .controls-panel, .table-section { margin-top: 14px; padding: 18px; }
 
 .section-heading {
@@ -325,6 +356,35 @@ input:focus, select:focus {
 
 .field-group label { margin-top: 0; }
 
+.quick-filter-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 14px;
+}
+
+.quick-filter {
+  min-height: 40px;
+  padding: 0 16px;
+  color: var(--primary-alt);
+  background: #fff;
+  border: 1px solid rgba(39, 206, 215, 0.34);
+  border-radius: 8px;
+  font-weight: 700;
+}
+
+.quick-filter.active {
+  color: #fff;
+  background: var(--primary);
+  border-color: var(--primary);
+}
+
+.save-all-button {
+  width: auto;
+  min-width: 150px;
+  margin-inline-start: auto;
+}
+
 .results-meta { margin: 0 0 4px; color: var(--accent); font-size: 14px; font-weight: 700; }
 .compact-heading { margin-bottom: 10px; }
 
@@ -360,6 +420,7 @@ th {
 
 td { color: #253b4c; font-size: 14px; line-height: 1.55; }
 tbody tr:hover { background: rgba(39, 206, 215, 0.06); }
+tbody tr.is-dirty { background: rgba(255, 192, 0, 0.08); }
 
 .ltr-value { direction: ltr; text-align: right; }
 .row-actions { display: flex; flex-wrap: wrap; gap: 7px; min-width: 170px; }
@@ -385,6 +446,133 @@ tbody tr:hover { background: rgba(39, 206, 215, 0.06); }
 }
 .save-button { min-height: 38px; padding: 0 12px; }
 
+.cards-grid {
+  display: none;
+  gap: 12px;
+}
+
+.facility-card {
+  padding: 14px;
+  background: #fff;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  box-shadow: var(--shadow);
+}
+
+.facility-card.incomplete {
+  background: #fffdf4;
+  border-color: rgba(255, 192, 0, 0.45);
+}
+
+.facility-card.complete {
+  background: #f4fff8;
+  border-color: rgba(0, 176, 80, 0.28);
+}
+
+.facility-card.is-dirty {
+  box-shadow: 0 0 0 3px rgba(255, 192, 0, 0.22), var(--shadow);
+}
+
+.facility-card-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 12px;
+}
+
+.facility-card-label {
+  display: block;
+  margin-bottom: 5px;
+  color: var(--muted);
+  direction: rtl;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.facility-card h3 {
+  margin: 0;
+  color: var(--primary-alt);
+  font-size: 18px;
+  line-height: 1.55;
+}
+
+.card-info-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.card-info-grid div {
+  min-width: 0;
+  padding: 9px 10px;
+  background: rgba(255, 255, 255, 0.72);
+  border: 1px solid rgba(215, 226, 238, 0.9);
+  border-radius: 8px;
+}
+
+.card-info-grid span,
+.card-fields label {
+  display: block;
+  margin-bottom: 5px;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.card-info-grid strong {
+  display: block;
+  color: var(--ink);
+  font-size: 14px;
+  line-height: 1.45;
+}
+
+.card-actions {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.facility-card .map-link,
+.card-action-button {
+  min-height: 42px;
+  justify-content: center;
+  padding: 0 10px;
+  color: var(--primary-alt);
+  background: #fff;
+  border: 1px solid rgba(39, 206, 215, 0.34);
+  border-radius: 8px;
+}
+
+.facility-card .map-link:hover,
+.card-action-button:hover {
+  color: #fff;
+  background: var(--primary-alt);
+  border-color: var(--primary-alt);
+}
+
+.card-fields {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 10px;
+}
+
+.card-fields label {
+  margin: 0;
+}
+
+.card-fields .cell-input {
+  min-width: 0;
+  width: 100%;
+  min-height: 46px;
+}
+
+.card-save-button {
+  margin-top: 12px;
+}
+
 .empty-state {
   padding: 34px 20px;
   text-align: center;
@@ -427,6 +615,40 @@ tbody tr:hover { background: rgba(39, 206, 215, 0.06); }
   .hero-panel, .admin-stats, .controls-panel, .table-section { padding: 14px; }
   .quick-stats { grid-template-columns: 1fr 1fr; }
   .hero-panel h2 { font-size: 22px; }
+  .quick-filter-row {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .save-all-button {
+    grid-column: 1 / -1;
+    width: 100%;
+    margin-inline-start: 0;
+  }
+  .table-wrap {
+    display: none;
+  }
+  .cards-grid {
+    display: grid;
+  }
+  table {
+    min-width: 0;
+  }
+  .card-actions {
+    grid-template-columns: 1fr;
+  }
+  .facility-card-head {
+    flex-direction: column;
+  }
+  .facility-card-head .status-badge {
+    align-self: flex-start;
+  }
   .toast { right: 12px; left: 12px; text-align: center; transform: translateY(18px); }
   .toast.show { transform: translateY(0); }
 }
+
+@media (max-width: 420px) {
+  .card-info-grid,
+  .quick-stats {
+    grid-template-columns: 1fr;
+  }
+}