/* ==========================================================================
   SCS Field (S4) — lấy từ prototype/prototype_v1.0/style.css; phần bổ sung cho S4 ở cuối file.
   Design tokens reuse the workbook's palette (navy header / orange = Appendix 1)
   for visual continuity with 260921_Template_EN_VN_V2b.xlsx.
   Các khối layout marking / map pin giữ lại cho S5 (đánh dấu vị trí).
   ========================================================================== */

:root{
  --navy: #1F3864;
  --band: #2F5597;
  --accent: #ED7D31;
  --accent-dark: #C55A11;
  --bg: #F9F9F9; /* nền chung của app (slice UI 2026-09-30); thẻ, ô nhập, nút giữ --surface trắng để còn tương phản */
  --surface: #FFFFFF;
  --border: #E3E8F0;
  --text: #1C2536;
  --text-muted: #6B7688;
  --success: #2E7D32;
  --success-bg: #E8F5E9;
  --kept-bg: rgba(46,125,50,.13); /* tín hiệu giá trị giữ sau Save (AD-9) — trong suốt, nằm dưới nội dung */
  --danger: #C0392B;
  --danger-bg: #FDEDEB;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --shadow-lg: 0 8px 24px rgba(16,24,40,.14);
  --gutter: 14px; /* mép trái/phải của pane-scroll — các khối full-bleed (building card, field table, step card) trừ lại bằng margin âm */
  --label-bg: #FEFEFE; /* nền cột tên field — form nhập và bảng màn chi tiết (.detail-table); chủ dự án 2026-10-03 */
  --value-bg: #F9F9F9; /* nền cột giá trị của cùng các bảng hai cột; chủ dự án 2026-10-03 */
  --choice-cols: 3; /* số cột của mọi lưới card chọn (plan Crack Recording QĐ12) — một biến dùng chung */
  --choice-gap: 10px; /* khoảng cách giữa các card chọn */
  --card-text-bg: #FEFEFE; /* nền vùng chữ (và vùng ảnh) của card chọn; chủ dự án 2026-10-03 */
  --bar-bg: #FEFEFE; /* nền footer cố định (Record · List · Save · Cancel · User); chủ dự án 2026-10-03 */
  --topbar-row-h: 32px; /* hàng 1 header: ô tìm, chấm trạng thái, ⋮ (chủ dự án 2026-10-06: 38 → 32) */
  --header-field-bg: rgba(255,255,255,.16); /* trắng mờ trên header navy (~#43587D) — vòng quanh chấm trạng thái gửi (ô tìm không còn nền từ 2026-10-06) */
  --label-col: calc(var(--gutter) + 18px + 8px + 112px + 8px); /* gutter + icon + gap + cột tên + 8px → nhãn dài nhất và giá trị cùng cách mép xám ~12px */
  --warn: var(--accent); /* thiếu nhưng vẫn lưu được */
  --missing-bg: rgba(255,221,51,.16); /* nền trường thiếu (trong suốt, nằm dưới nội dung) */
  --missing-bg-solid: #FFFADE; /* cùng màu, đặc — cho nút và thẻ có nền riêng */
}

*{ box-sizing: border-box; }
html,body{ height:100%; overflow:hidden; }
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea{ font-family: inherit; }
svg{ display:block; }

.visually-hidden{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.hidden{ display:none !important; }

/* ---------------------------------------------------------------- layout */
.app{
  height: 100vh;
  height: 100dvh; /* modern mobile browsers: excludes the address-bar chrome */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.topbar{
  background: var(--navy);
  color:#fff;
  padding: calc(8px + env(safe-area-inset-top)) var(--gutter) 8px;
  flex: none;
  z-index: 20;
}

.count-badge{
  background: var(--accent);
  color:#fff;
  font-size:11px; font-weight:700;
  min-width:18px; height:18px; padding:0 5px;
  border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
}

.content{ flex:1; display:flex; min-height:0; }

.view{ display:none; flex:1; min-height:0; min-width:0; flex-direction:column; }
.view.active{ display:flex; }

.pane-scroll{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding: 8px var(--gutter) 8px;
  -webkit-overflow-scrolling: touch;
}

/* Full-bleed: các khối lớn (field table, step card, media row) tràn hết chiều ngang, không thấy
   khoảng trống so với cạnh màn hình, bằng cách trừ lại đúng gutter của pane-scroll. */
.field-table, .step-card, .media-row, .photo-strip{
  margin-left: calc(var(--gutter) * -1);
  margin-right: calc(var(--gutter) * -1);
}


/* nội dung chi tiết công trình trong overlay (bấm nhãn "Building") */
.building-addr-row{ display:flex; align-items:flex-start; gap:6px; font-size:13px; line-height:1.4; color: var(--text-muted); }
.building-addr-row:has(.building-addr:empty){ display:none; }
.building-addr-icon{ flex:none; width:14px; height:14px; margin-top:2.5px; } /* ghim nhỏ trước địa chỉ (chủ dự án 2026-10-07); dòng 2 canh theo chữ */
.building-addr{ min-width:0; overflow-wrap:anywhere; }
/* Header Building details (chủ dự án 2026-10-07): dòng 1 mã + nút nhỏ Refresh và × (khung 28 px, vùng chạm 36 px nhờ ::after),
   dòng 2 tên đầy đủ (xuống dòng, không cắt); đệm dọc gọn hơn header chung vì × không còn chiếm hai dòng. */
.sheet-head.info-sheet-head{ padding:6px 14px 8px; padding-top: calc(6px + env(safe-area-inset-top)); }
.info-head{ flex:1; min-width:0; }
.info-head-top{ display:flex; align-items:center; gap:8px; min-width:0; }
.info-head .sheet-title{ flex:1; min-width:0; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sheet-head .info-head-btn{ position:relative; flex:none; width:28px; height:28px; border-radius:8px; background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.2); color:#fff; }
.info-head-btn::after{ content:""; position:absolute; inset:-5px; } /* vùng chạm 36 px, khung nhìn 28 px */
.sheet-head .info-head-btn svg{ width:16px; height:16px; }
.sheet-head .info-head-btn:disabled{ opacity:.5; cursor:default; }
#btnInfoRefresh.spinning svg{ animation: info-spin 1s linear infinite; } /* đang tải lại (nút hoặc tự tải khi mở màn) */
@keyframes info-spin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ #btnInfoRefresh.spinning svg{ animation:none; opacity:.55; } }
.info-head-name{ margin-top:1px; font-size:14.5px; font-weight:600; line-height:1.3; color:#fff; overflow-wrap:anywhere; }
.info-head-name:empty{ display:none; }
.info-stamps{ margin:0; display:grid; grid-template-columns: 1fr auto; gap:4px 12px; font-size:12px; color: var(--text-muted); }
.info-stamps dt{ margin:0; }
.info-stamps dd{ margin:0; font-weight:700; color: var(--text); font-variant-numeric: tabular-nums; white-space:nowrap; }
/* Tóm tắt công trình (phương án B, chủ dự án 2026-10-06): bốn khối cách nhau bằng vạch mảnh; tiêu đề khối chữ nhỏ in hoa. */
.info-facts{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.info-fact{ font-size:12px; font-weight:600; color: var(--text); background: var(--bg); border:1px solid var(--border); border-radius:999px; padding:4px 10px; }
.info-fact:empty{ display:none; }
.info-fact.building-plans{ gap:8px; } /* nhãn bản vẽ offline dùng chung kiểu với nhãn số tầng */
.info-fact.building-plans[data-state="ok"]{ color: var(--success); border-color:#CDE8CF; background: var(--success-bg); }
.info-sec{ padding:12px 0 2px; margin-top:10px; border-top:1px solid var(--border); }
.info-k{ margin:0 0 8px; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color: var(--text-muted); }
.info-kv{ margin:0; display:grid; grid-template-columns: 96px 1fr; gap:5px 10px; font-size:13px; }
.info-kv dt{ margin:0; color: var(--text-muted); }
.info-kv dd{ margin:0; font-weight:600; color: var(--text); overflow-wrap:anywhere; }
/* Bước 2 (plan Field List Filter §7.5): con số chạm được là <button> thật — ô Needs attention, hai số lớn, chip ưu tiên / loại,
   hàng tầng; chevron "›" chỉ hiện trên nút đang bật; nút tắt (số 0) giữ nguyên dáng chỉ đọc, không nhận focus. Nút chỉ đọc = span. */
.info-k:focus{ outline:none; } /* tiêu đề khối nhận focus (tabindex -1) khi phần tử đang focus bị thay/tắt lúc vẽ lại — không vẽ khung */
.info-k:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.info-chev{ display:none; width:12px; height:12px; flex:none; vertical-align:-2px; margin-left:3px; color: var(--text-muted); }
button:not(:disabled) > .info-chev, button:not(:disabled) .info-tile-l > .info-chev, button:not(:disabled) .info-big-l > .info-chev{ display:inline-block; }
.info-tiles{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:8px; } /* minmax(0): nhãn nowrap không đẩy ô tràn ở 320 px */
.info-tile{ min-width:0; border:1px solid var(--border); border-radius:12px; padding:9px 10px; background: var(--surface); font:inherit; color:inherit; text-align:left; width:100%; cursor:pointer; }
.info-tile:disabled{ cursor:default; opacity:1; }
.info-tile:not(:disabled):active{ transform: scale(.98); }
.info-tile:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.info-tile[aria-expanded="true"]{ box-shadow: inset 0 0 0 1.5px var(--navy); }
.info-tile-n{ display:block; font-size:22px; font-weight:800; line-height:1; color:#98A2B3; font-variant-numeric: tabular-nums; }
.info-tile-l{ display:block; font-size:11.5px; line-height:1.25; color: var(--text-muted); margin-top:5px; }
.info-tile-l{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* nhãn một dòng ở 360px */
.info-tile.on .info-tile-n{ color: var(--text); }
.info-tile[data-key="unsent"].on{ border-color:#F6C9A8; background:#FFF6EF; } .info-tile[data-key="unsent"].on .info-tile-n{ color: var(--accent-dark); }
.info-tile[data-key="missing"].on{ border-color:#F3E3A0; background: var(--missing-bg-solid); } .info-tile[data-key="missing"].on .info-tile-n{ color:#9A7B00; }
.info-tile[data-key="review"].on{ border-color:#BFD0EA; background:#EEF4FC; } .info-tile[data-key="review"].on .info-tile-n{ color: var(--band); }
/* Vùng chọn danh sách cho ô có bản ghi ở cả hai bảng (plan §7.3): ngay dưới hàng ô, hai dòng kiểu mục menu ⋮ có số đếm */
.info-pick{ margin-top:8px; border:1px solid var(--border); border-radius:12px; background: var(--surface); padding:4px 0; }
.info-pick[hidden]{ display:none; }
.info-pick-title{ font-size:11.5px; font-weight:700; color: var(--text-muted); padding:6px 14px 2px; }
.info-pick .menu-item{ min-height:42px; padding:0 14px; }
.info-pick .menu-item:disabled{ opacity:1; color: var(--text-muted); cursor:default; }
.info-pick .menu-item:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.info-pick .menu-count{ color: var(--text); }
.info-pick .menu-item:disabled .menu-count{ color: var(--text-muted); }
.info-pick .info-chev{ margin-left:8px; }
.info-allclear{ margin-top:8px; font-size:12.5px; font-weight:700; color: var(--success); }
.info-allclear[hidden]{ display:none; }
.info-big{ display:grid; grid-template-columns: 1fr 1fr; gap:8px; margin-bottom:4px; }
.info-big-cell{ background: var(--bg); border-radius:12px; padding:10px 12px; border:none; font:inherit; color:inherit; text-align:left; width:100%; cursor:pointer; }
.info-big-cell:disabled{ cursor:default; opacity:1; }
.info-big-cell:not(:disabled):active{ background:#E6ECF5; }
.info-big-cell:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.info-big-n{ display:block; font-size:26px; font-weight:800; line-height:1; font-variant-numeric: tabular-nums; }
.info-big-l{ display:block; font-size:12px; color: var(--text-muted); margin-top:4px; }
.info-sub{ font-size:12px; font-weight:700; margin:12px 0 4px; }
.info-bar{ display:flex; height:10px; border-radius:999px; overflow:hidden; background: var(--border); }
.info-bar > span{ display:block; min-width:3px; }
.info-legend{ display:flex; flex-wrap:wrap; gap:4px 8px; font-size:12px; margin-top:6px; align-items:center; }
.info-legend-item{ white-space:nowrap; }
/* Chú giải ưu tiên: mức > 0 trong danh mục là chip bấm được (cùng kiểu chip loại); mức 0 / mã ngoài danh mục giữ dạng chữ */
.info-legend-btn{ font:inherit; font-size:12px; color:inherit; cursor:pointer; border-radius:8px; background: var(--bg); border:1px solid var(--border); padding:4px 8px; }
.info-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:5px; } /* chấm màu riêng — không dùng <i> vì .bi i là chữ Anh in nghiêng */
.info-types{ display:flex; flex-wrap:wrap; gap:6px; }
.info-chip{ font-size:12px; border-radius:8px; background: var(--bg); border:1px solid var(--border); padding:4px 8px; }
button.info-chip{ font:inherit; font-size:12px; color:inherit; cursor:pointer; }
.info-chip b{ margin-left:5px; }
.info-chip-ro{ color: var(--text-muted); } /* mã ngoài danh mục / trống: chỉ đọc */
.info-legend-btn:active, button.info-chip:active{ background:#E6ECF5; }
.info-legend-btn:focus-visible, button.info-chip:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
/* Theo tầng — bảng (chủ dự án 2026-10-07): hàng tiêu đề By floor · Defects · Not surveyed, hàng cách nhau bằng vạch mảnh, ba cột
   cố định cùng biến ở mọi hàng → thẳng cột. Không thanh, không chevron: con số > 0 có điều kiện khớp đúng là nút nhẹ (.info-num — viền
   mảnh, nền nhạt như chip của màn, cao 30 px, vùng chạm cả ô ≥ 36 px); số chỉ đọc (.info-num-ro) cùng chỗ, không viền. Nhãn tầng một
   dòng, cắt "…" (tên đầy đủ ở tên đọc to của nút). */
.info-floors{ --fl-d: 72px; --fl-ns: 84px; font-size:12.5px; margin-top:12px; }
@media (max-width: 359px){ .info-floors{ --fl-d: 60px; --fl-ns: 72px; } }
.info-floor-tr{ display:grid; grid-template-columns: minmax(0, 1fr) var(--fl-d) var(--fl-ns); column-gap:8px; align-items:center; min-height:40px; border-bottom:1px solid var(--border); }
.info-floor-tr:last-child{ border-bottom:none; }
.info-floor-head{ min-height:0; align-items:end; padding-bottom:6px; font-size:11.5px; font-weight:700; color: var(--text-muted); }
.info-floor-hl{ font-size:12px; color: var(--text); }
.info-floor-hd, .info-floor-hx{ text-align:center; line-height:1.2; }
.info-floor-l{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.info-floor-d, .info-floor-x{ display:flex; align-items:center; justify-content:center; min-height:40px; }
.info-num, .info-num-ro{ min-width:44px; height:30px; padding:0 10px; display:inline-flex; align-items:center; justify-content:center;
  font:inherit; font-weight:700; font-variant-numeric: tabular-nums; white-space:nowrap; }
.info-num{ border:1px solid var(--border); border-radius:999px; background: var(--surface); color: var(--text); cursor:pointer; }
.info-num-ro{ border:1px solid transparent; }
.info-floor-x .info-num{ color:#5B4B8A; } /* cùng màu huy hiệu khu vực hạn chế của danh sách */
.info-num:active{ background:#E6ECF5; }
.info-num:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.info-muted{ color:#98A2B3; font-weight:500; }
#sumBreakdown[hidden], #sumEmpty[hidden]{ display:none; }
.info-data-row{ display:flex; align-items:baseline; gap:10px; font-size:12.5px; font-weight:600; color: var(--text-muted); margin-bottom:6px; }

/* ---------------------------------------------------------------- header: ô tìm công trình, menu ⋮, tên + địa chỉ (ý 8) */
/* Header (chủ dự án 2026-10-06): logo BSAP cao bằng hai hàng bên trái, không vạch dọc (vạch dọc làm cắt mã công trình ở 360px).
   Bên phải — hàng 1: ô tìm công trình (không nền: mã công trình là dòng tiêu đề thẳng cột với hàng 2, kính lúp bên phải;
   vạch ngang làm gạch chân) · chấm trạng thái gửi · ⋮; hàng 2: nhãn • địa chỉ, hoặc dòng giải nghĩa BSAP khi chưa có.
   Chiều cao header không đổi khi chọn công trình. */
.topbar{ display:flex; align-items:center; gap:8px; }
.topbar-main{ flex:1; min-width:0; }
.topbar-row{ display:flex; align-items:center; gap:8px; padding-bottom:3px; border-bottom:1px solid rgba(255,255,255,.3); }
.brand-logo{ flex:none; width:auto; height:56px; aspect-ratio:181/260; } /* thấp hơn cột phải (61px) → cột phải quyết định chiều cao header, icon cách đều trên/dưới; màu nằm trong file SVG (nét trắng, bàn tay sáng không viền — Field Lead 2026-10-09) */
.brand-tagline{ margin-top:5px; font-size:12px; line-height:20px; color:#C9D6EE; /* cao bằng dòng .bld-info → header không nhảy khi chọn công trình */ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand-tagline b{ font-weight:700; } /* chữ cái đầu B, S, A, P: đậm, cùng màu dòng */
.brand-tagline .brand-name{ font-weight:800; color:#fff; } /* tên BSAP: trắng, đậm hơn (chủ dự án 2026-10-06) */
.bld-info:not([hidden]) + .brand-tagline{ display:none; }
.bld-search{
  flex:1; min-width:0; height: var(--topbar-row-h);
  display:flex; align-items:center; gap:8px;
  background:none; color:#fff; border:none; border-radius: var(--radius-sm);
  padding:0 8px 0 0; font:inherit; text-align:left; cursor:pointer;
} /* padding phải 8px: tâm chấm trạng thái cách đều tâm kính lúp và tâm ⋮ */
.bld-search:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.bld-search:active{ background:rgba(255,255,255,.08); } /* phản hồi chạm — ô không có nền thường trực */
.bld-search > svg{ order:2; width:18px; height:18px; flex:none; color:#C9D6EE; } /* kính lúp / ổ khoá nằm bên phải mã */
.bld-search-text{ flex:1; min-width:0; font-size:17px; font-weight:700; letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bld-search-text.placeholder{ color:#C9D6EE; font-size:15px; font-weight:500; letter-spacing:0; }
.bld-search .bld-lock{ display:none; }
.bld-search.locked{ cursor:default; } /* đang sửa bản ghi: ổ khoá thay kính lúp, mã nhạt đi; đổi công trình qua ⋮ → Move (D06b(e)) */
.bld-search.locked .bld-search-text{ color:#DCE5F4; }
.bld-search.locked > svg:first-child{ display:none; }
.bld-search.locked .bld-lock{ display:block; }
.bld-search.invalid::before{ content:none; }
.bld-search.invalid{ background:rgba(255,221,51,.24); padding-left:10px; outline:2px solid #FF8A80; outline-offset:2px; } /* thiếu công trình: nền chỉ hiện lúc lỗi — vàng mờ + viền đỏ nhạt (nổi trên navy) */
.top-menu-btn{
  position:relative; flex:none; width:34px; height: var(--topbar-row-h); padding:0;
  display:flex; align-items:center; justify-content:center;
  background:none; border:none; border-radius: var(--radius-sm); color:#fff; cursor:pointer;
}
.top-menu-btn svg{ width:22px; height:22px; }
.top-menu-btn[aria-expanded="true"]{ background:rgba(255,255,255,.16); }
.top-menu-btn:disabled{ opacity:.6; cursor:default; }
/* "!" thiếu người khảo sát trên ⋮ (chủ dự án 2026-10-06 — trước ở nút User của thanh dưới): cùng cỡ .foot-badge, nền đỏ, vòng viền
   theo nền navy; chỉ hiện khi chưa chọn người khảo sát — không có huy hiệu đợt (chủ dự án 2026-10-07). Thiếu Inspector khi Save →
   viền đỏ nhạt như ô tìm công trình (nổi trên navy). */
.top-menu-btn .foot-badge{ display:none; top:-5px; right:-6px; background: var(--danger); color:#fff; box-shadow:0 0 0 2px var(--navy); }
.top-menu-btn.no-inspector .foot-badge{ display:inline-flex; }
.top-menu-btn.invalid{ outline:2px solid #FF8A80; outline-offset:1px; }
.top-menu-btn.invalid::before{ content:none; }
.bld-info{
  display:flex; align-items:baseline; gap:6px; width:100%; min-width:0;
  margin-top:5px; padding:0; background:none; border:none;
  color:#fff; font:inherit; line-height:20px; height:20px; text-align:left; cursor:pointer; /* sau font: cao đúng = .brand-tagline → header không nhảy, với mọi font */
}
.bld-info[hidden]{ display:none; }
.bld-name{ flex:0 1 auto; min-width:0; max-width:72%; font-size:14.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bld-info:has(.bld-addr:empty) .bld-name{ max-width:100%; }
.bld-addr{ flex:1 1 0; min-width:0; font-size:12px; color:#C9D6EE; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bld-name:not(:empty) + .bld-addr:not(:empty)::before{ content:"•"; margin-right:6px; } /* "•" chỉ khi có cả nhãn và địa chỉ */
.bld-addr:empty, .bld-name:empty{ display:none; }

/* menu ⋮ (bật dưới nút, bấm ra ngoài / Esc để đóng) */
.menu-backdrop{ position:fixed; inset:0; z-index:38; background:transparent; }
.menu-backdrop[hidden], .top-menu[hidden]{ display:none; }
.top-menu{
  position:fixed; right: var(--gutter); top:50px; z-index:39;
  min-width:232px; max-width: calc(100vw - 2 * var(--gutter));
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); padding:6px 0;
}
.menu-item{
  display:flex; align-items:center; gap:12px; width:100%; min-height:46px; padding:0 16px;
  background:none; border:none; font:inherit; font-size:14.5px; font-weight:600; color: var(--text);
  text-align:left; cursor:pointer;
}
.menu-item:hover, .menu-item:active{ background: var(--bg); }
.menu-item:disabled{ opacity:.5; cursor:default; }
.menu-item > svg{ width:18px; height:18px; flex:none; color: var(--text-muted); }
.menu-radio{ width:18px; height:18px; flex:none; box-sizing:border-box; border:2px solid #98A2B3; border-radius:999px; }
.menu-item[aria-checked="true"]{ color: var(--band); }
.menu-item[aria-checked="true"] .menu-radio{ border:5px solid var(--band); }
.menu-sep{ height:1px; background: var(--border); margin:6px 0; }
.menu-count{ margin-left:auto; font-size:13px; font-weight:800; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.menu-item[aria-checked="true"] .menu-count{ color: var(--band); }
/* Mục Inspector and round: chữ "<tên> · Round n" một dòng; "!" đỏ khi chưa chọn người khảo sát (cùng dấu với huy hiệu trên ⋮) */
.menu-text{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.menu-mark{ display:none; margin-left:auto; min-width:18px; height:18px; padding:0 5px; border-radius:999px; align-items:center; justify-content:center; background: var(--danger); color:#fff; font-size:11px; font-weight:800; }
.menu-item.no-inspector .menu-mark{ display:inline-flex; }

/* chế độ Area not surveyed: dải cố định trên thanh lưu (cùng kiểu dải "Editing") */
.mode-strip-hint{ margin-left:auto; font-size:11.5px; color:#B7662E; white-space:nowrap; }

/* sheet chọn công trình: ô tìm + danh sách (vài nghìn công trình — chỉ vẽ tối đa PICKER_LIMIT dòng) */
.picker-search{
  flex:none; display:flex; align-items:center; gap:8px;
  background: var(--surface); border-bottom:1px solid var(--border); padding:6px 8px 6px 14px;
}
.picker-search > svg{ width:18px; height:18px; flex:none; color: var(--text-muted); }
.picker-search input{
  flex:1; min-width:0; border:none; outline:none; background:transparent;
  font:inherit; font-size:16px; padding:9px 0; color: var(--text); /* 16px: iOS không tự phóng khi gõ */
}
.picker-search input::-webkit-search-cancel-button{ display:none; }
.picker-clear{ flex:none; width:36px; height:36px; padding:0; display:flex; align-items:center; justify-content:center; background:none; border:none; color: var(--text-muted); cursor:pointer; }
.picker-clear svg{ width:18px; height:18px; }
.sheet-body.picker-body{ padding:0 0 calc(12px + env(safe-area-inset-bottom)); } /* dòng tràn hết chiều ngang như bảng field */
.picker-section{ padding:14px 14px 6px; font-size:11.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color: var(--text-muted); }
.picker-row{
  display:flex; align-items:center; gap:10px; width:100%; padding:10px 14px;
  background: var(--surface); border:none; border-bottom:1px solid var(--border);
  font:inherit; text-align:left; cursor:pointer;
}
.picker-row:active{ background:#EEF3FC; }
.picker-row.current{ background:#F3F6FC; }
.picker-row-main{ flex:1; min-width:0; }
.picker-code{ font-size:15px; font-weight:800; color: var(--text); }
.picker-sub{ margin-top:2px; font-size:12.5px; color: var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.picker-check{ width:20px; height:20px; flex:none; color: var(--band); }
.picker-note{ padding:14px; font-size:12.5px; color: var(--text-muted); text-align:center; }

/* form bắt đầu sát header (không còn dòng công trình ở đầu form) */
#view-form .pane-scroll{ padding-top:0; }
#view-list .pane-scroll:has(> .list-filter:not(.hidden)){ padding-top:0; } /* dòng Filter sát header như form (2026-10-02; Floor → Filter 2026-10-03) */

/* ---------------------------------------------------------------- install hint / button, update banner */
.install-hint{
  display:flex; align-items:flex-start; gap:10px;
  background:#EEF3FC; border:1px solid #CFDCF3; color: var(--navy);
  border-radius: var(--radius-sm); padding:10px 10px 10px 12px; margin-bottom:12px;
  font-size:12.5px; line-height:1.45;
}
.install-hint-text{ flex:1; }
.inline-icon{ display:inline-block; width:15px; height:15px; vertical-align:-3px; }
.install-hint-close{ flex:none; width:28px; height:28px; }
.install-btn{
  flex:none; background: var(--accent); color:#fff; border:none;
  font-size:11.5px; font-weight:800; padding:6px 11px; border-radius:999px; cursor:pointer;
}
.update-banner{
  position:fixed; left:50%; top:calc(10px + env(safe-area-inset-top)); transform:translateX(-50%);
  z-index:70; display:flex; align-items:center; gap:12px;
  background:#fff; color: var(--text); border:1px solid var(--border);
  box-shadow: var(--shadow-lg); border-radius:999px; padding:7px 8px 7px 16px;
  font-size:13px; font-weight:600; white-space:nowrap; max-width: calc(100vw - 24px);
}

/* ---------------------------------------------------------------- edit strip (above the save bar) */
.edit-strip{
  flex:none; display:flex; align-items:center; gap:8px;
  background:#FFF1E6; color:#9A4209; border-top:1px solid #F8D3B8;
  padding:8px 14px; font-size:13px;
}
.edit-strip svg{ width:16px; height:16px; flex:none; }
.edit-strip strong{ font-size:14px; }
.edit-strip-bld{ color:#B7662E; font-size:12px; }

/* ---------------------------------------------------------------- step cards (Photos, Remarks — full-bleed, stacked flush) */
.step-card{
  background: var(--surface);
  border-top:1px solid var(--border);
  padding: 10px var(--gutter) 12px;
}
.step-head{
  display:flex; align-items:center; gap:9px;
  margin-bottom: 10px;
}
.step-icon{
  width:26px; height:26px; border-radius:8px; flex:none;
  background:#EDF1FA; color: var(--navy);
  display:flex; align-items:center; justify-content:center;
}
.step-icon svg{ width:16px; height:16px; }
.step-title{ font-size:13px; font-weight:700; color: var(--text); }
.step-body{ display:flex; flex-direction:column; gap:10px; }

.form-row{ display:flex; flex-direction:column; gap:10px; }
.form-field{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
/* field-name labels stay smaller and more muted than the values below them */
.form-field label, .field-label{ font-size:11px; font-weight:700; color: var(--text-muted); text-transform:uppercase; letter-spacing:.02em; }
.orient-label{ font-size:11px; font-weight:700; color: var(--text-muted); text-transform:uppercase; letter-spacing:.02em; margin-bottom:-4px; }

.req{ color: var(--danger); }

/* ---------------------------------------------------------------- dropdown selects */
.select-wrap{ position:relative; }
.select-wrap::after{
  content:"";
  position:absolute; right:11px; top:50%;
  width:7px; height:7px;
  border-right:2px solid var(--text-muted);
  border-bottom:2px solid var(--text-muted);
  transform: translateY(-65%) rotate(45deg);
  pointer-events:none;
}
.select-wrap{ min-width:0; }
.select-wrap select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  width:100%; min-width:0; max-width:100%;
  padding:11px 28px 11px 11px;
  border:1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size:13.5px; font-weight:600; color: var(--text);
  background: var(--surface);
  cursor:pointer;
  text-overflow: ellipsis;
}
.select-wrap select:focus{ outline:2px solid var(--band); outline-offset:1px; }
.select-wrap select:invalid,
.select-wrap select option[value=""]{ color: var(--text-muted); }

.custom-input{
  margin-top:2px;
  width:100%;
  padding:10px 12px;
  border:1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size:14px;
  background: var(--surface);
}
.custom-input:focus{ outline:2px solid var(--band); outline-offset:1px; }

/* chips: used by the floor strip and the room/element picker sheet */
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  border:1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding:8px 14px;
  border-radius:999px;
  font-size:13.5px; font-weight:600;
  cursor:pointer;
  transition: all .12s ease;
  white-space:nowrap;
}
.chip:active{ transform: scale(.96); }
.chip.selected{
  background: var(--navy);
  border-color: var(--navy);
  color:#fff;
}

/* ---------------------------------------------------------------- field table: compact label|value rows (record form) */
.field-table{
  background: var(--value-bg); /* cột giá trị; cột tên tô --label-bg bằng gradient của .field-row dưới */
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.field-row{
  display:flex; align-items:center; gap:8px;
  padding:8px var(--gutter);
  border-bottom:1px solid var(--border);
  min-height:38px;
}
.field-row.hidden{ display:none; }
.field-table .field-row{ background: linear-gradient(to right, var(--label-bg) 0 var(--label-col), transparent var(--label-col)); }
.field-row-icon{ width:18px; height:18px; flex:none; color: var(--text-muted); }
.field-row-icon svg{ width:18px; height:18px; }
.field-row-label{
  flex:0 0 112px; /* vừa mọi nhãn trên một dòng — dài nhất "Crack width (mm) *" ~110 px (QĐ18, test đo ở 390 px); cùng cột cho mọi dòng */
  margin-right:12px; /* khoảng tên→giá trị 20px (cùng gap 8px); mép nền xám nằm giữa → hai bên đều nhau */
  font-size:11.5px; font-weight:700; color: var(--text-muted); line-height:1.25;
}
.field-row-value{ flex:1; min-width:0; }
.field-row-input{
  width:100%; border:none; background:transparent;
  font-size:13.5px; font-weight:600; color: var(--text); padding:6px 0;
}
.field-row-input:focus{ outline:none; }
.field-row.required .field-row-label::after{ content:" *"; color: var(--danger); }
/* Area detail (plan Area Detail AD-2): bộ đếm n/40 cuối dòng ô nhập (không dòng chỉ dẫn riêng — chủ dự án 2026-10-05); vượt 40 → đỏ. */
.room-detail-count{ flex:none; font-size:11px; font-weight:700; color: var(--text-muted); white-space:nowrap; }
.room-detail-count.over{ color: var(--danger); }

/* Dòng chọn: chữ hiển thị tự vẽ (Việt thường / *Anh nghiêng*, D32), luôn 1 dòng (dài thì "…").
   Danh sách không có icon (Floor, Room-Area, Scope…): <select> gốc trong suốt phủ cả dòng → bảng chọn gốc.
   Element, Defect type, Pattern, Penetration, Details, Priority, Access, Reason và số đo: bấm dòng mở overlay nhập của app (card
   có icon / bàn phím số — plan Crack Recording §5a, §5c.3; plan Limitation Photos §5.2); <select> ẩn (.choice-native) chỉ giữ
   giá trị. */
.pick-row{ position:relative; cursor:pointer; }
.pick-text{
  font-size:13.5px; font-weight:600; color: var(--text); line-height:1.35; padding:3px 0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pick-text.placeholder{ color: var(--text-muted); font-weight:500; }
.pick-text .bi i{ opacity:1; font-weight:500; }
.pick-chevron{ width:16px; height:16px; flex:none; color: var(--text-muted); }
.count-dot{
  display:inline-flex; align-items:center; justify-content:center; vertical-align:1px;
  min-width:17px; height:17px; padding:0 4px; margin-left:3px; border-radius:999px;
  background: var(--success); color:#fff; font-size:10.5px; font-weight:800;
}
.pick-native{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; cursor:pointer; border:0; margin:0;
  font-size:16px; /* ≥16px: iOS không tự phóng to khi bấm */
  -webkit-appearance:none; appearance:none;
}
.pick-native:disabled{ cursor:default; }
.pick-row:has(.pick-native:disabled){ cursor:default; }
.pick-row:has(.pick-native:disabled) .pick-chevron{ opacity:.35; }
.pick-row:has(.pick-native:focus-visible), .pick-row:focus-visible{ outline:none; box-shadow: inset 3px 0 0 var(--accent); }

/* ---------------------------------------------------------------- card chọn có icon (plan Crack Recording §5a.2, ĐX13)
   Một kiểu card cho mọi danh sách có icon (Element, Defect type, Pattern, Penetration, Details, Priority, Access, Reason).
   Bố cục (chủ dự án 2026-10-03): vùng ảnh VUÔNG phủ hết bề ngang card ở trên (ảnh là thành phần chính, QĐ14), vùng chữ riêng ở dưới
   nền --card-text-bg: nhãn VI đậm, nhãn EN nghiêng (nhãn ngắn của card nếu có). Ảnh `contain` — không méo, không cắt: asset tạm có
   khoảng trong suốt vẫn hiện đủ; asset vuông phủ kín sau này thay cùng tên file là lấp đầy ô, không đổi CSS. Nhãn dài bất thường
   thì xuống hàng, không cắt "…". Số hàng thấy được của lưới trong overlay: fitEntryGrid (field.js). */
.choice-native{ display:none; }
.choice-grid{ display:grid; grid-template-columns: repeat(var(--choice-cols), minmax(0, 1fr)); gap: var(--choice-gap); } /* card cùng hàng cao bằng nhau */
.choice-grid[hidden]{ display:none; }
.choice-card{
  position:relative; display:flex; flex-direction:column; align-items:stretch; padding:0; overflow:hidden;
  border:1.5px solid var(--border); border-radius: var(--radius);
  background: var(--card-text-bg); cursor:pointer; font: inherit; color: inherit; text-align:center;
}
.choice-card:active{ transform: scale(.97); }
/* Đang chọn: giữ viền navy 1,5 px + vòng trong 1,5 px như cũ. Vòng trong vẽ ở lớp phủ (::after) để không bị ảnh phủ kín che. */
.choice-card.selected{ border-color: var(--navy); }
.choice-card.selected::after{
  content:""; position:absolute; inset:0; border-radius: calc(var(--radius) - 1.5px);
  box-shadow: inset 0 0 0 1.5px var(--navy); pointer-events:none;
}
.choice-card.flash .choice-text{ background:#DCE6F7; } /* nháy xác nhận ~0,15 s trước khi sang bước kế (§5b.4) */
.choice-card:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.choice-icon{
  display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:1 / 1; flex:none;
  background: var(--card-text-bg); color: var(--text-muted);
}
.choice-icon img{ width:100%; height:100%; display:block; object-fit:contain; } /* file vuông 192 px (§5a.4): co giãn vừa ô, không méo/cắt */
.choice-icon svg{ width:40%; height:40%; } /* icon chung của field khi giá trị chưa có ảnh hoặc ảnh lỗi (§5a.4 dự phòng) */
.choice-text{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:2px;
  padding:6px 4px 8px; background: var(--card-text-bg);
}
.choice-vi{ font-size:13.5px; font-weight:700; text-align:center; line-height:1.25; color: var(--text); }
.choice-en{ font-size:11.5px; font-style:italic; font-weight:500; color: var(--text-muted); text-align:center; line-height:1.2; }


/* §7.2: gợi ý ghi nhóm dưới dòng Details */
.crack-hint{
  padding:6px var(--gutter) 8px calc(var(--gutter) + 26px);
  font-size:12px; line-height:1.35; color: var(--text-muted); background: var(--surface); border-bottom:1px solid var(--border);
}

/* ---------------------------------------------------------------- overlay nhập dùng chung (§5a.3, §5b.4, §5c.3) */
/* Đầu overlay nhập: ← · tên bước + dòng ngữ cảnh (căn giữa — chủ dự án 2026-10-03) · ×. Lưới 3 cột đối xứng; ← ẩn vẫn giữ chỗ
   (visibility, không nhận focus) để tên bước luôn ở giữa overlay dù có hay không có nút lùi. */
.sheet-head.entry-head{ display:grid; grid-template-columns: 36px minmax(0, 1fr) 36px; align-items:center; column-gap:10px; }
.icon-btn.entry-back{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.2); color:#fff; width:36px; height:36px; flex:none; }
.entry-back svg{ width:18px; height:18px; }
.entry-back[hidden]{ display:flex; visibility:hidden; }
.entry-title-wrap{ min-width:0; text-align:center; }
.entry-context{ font-size:12px; color:#C9D6EE; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.entry-context:empty{ display:none; }
.entry-foot[hidden], .entry-foot .btn[hidden]{ display:none; }
/* Không có chân (bước chọn 1 không Skip): chừa safe area dưới cho thân overlay — card không nằm dưới vạch home/thanh cử chỉ. */
.sheet-entry:has(> .entry-foot[hidden]){ padding-bottom: env(safe-area-inset-bottom); }
.entry-foot .btn{ flex:1; }
.keypad{ display:flex; flex-direction:column; gap:10px; max-width:420px; margin:0 auto; }
.keypad[hidden]{ display:none; }
.kp-display{ text-align:center; min-height:44px; font-variant-numeric: tabular-nums; }
.kp-value{ font-size:34px; font-weight:800; color: var(--text); }
.kp-unit{ font-size:18px; font-weight:700; color: var(--text-muted); }
.kp-units{ display:flex; justify-content:center; gap:8px; }
.kp-units[hidden]{ display:none; }
.kp-unit-btn{
  min-width:72px; padding:8px 14px; border:1.5px solid var(--border); border-radius:999px;
  background: var(--surface); color: var(--text); font: inherit; font-weight:700; cursor:pointer;
}
.kp-unit-btn[aria-pressed="true"]{ background: var(--navy); border-color: var(--navy); color:#fff; }
.kp-conv{ text-align:center; font-size:13px; color: var(--text-muted); min-height:18px; }
.kp-keys{ display:grid; grid-template-columns: repeat(3, 1fr); gap:8px; }
.kp-keys button{
  padding:14px 0; font: inherit; font-size:21px; font-weight:700; color: var(--text);
  border:1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor:pointer;
}
.kp-keys button:active{ background:#EDF1FA; }

.link-btn{
  background:none; border:none; padding:0;
  color: var(--band); font-weight:700; font-size:12.5px; cursor:pointer;
}
.link-btn-danger{ color: var(--danger); }


.measure-note{
  font-size:12px; color: var(--text-muted); font-style:italic;
  padding:10px 2px;
}

/* ---------------------------------------------------------------- Location / Overview / Close-up (một hàng nút) */
.media-row{
  display:flex; gap:8px;
  background: var(--surface);
  padding:10px var(--gutter);
  border-bottom:1px solid var(--border);
}
.media-btn{
  position:relative; flex:1; min-width:0;
  display:flex; align-items:center; justify-content:center; gap:6px;
  background: var(--surface); color: var(--text);
  border:1.5px solid var(--navy); border-radius: var(--radius-sm);
  padding:8px 6px; cursor:pointer;
  font-size:12.5px; font-weight:700; white-space:nowrap;
  transition: background .12s ease, border-color .12s ease;
}
.media-btn:active{ transform: scale(.98); }
.media-btn:disabled{ border-color: var(--border); color: var(--text-muted); cursor:default; }
.media-icon{ width:20px; height:20px; flex:none; color: var(--navy); display:flex; align-items:center; justify-content:center; }
.media-icon svg, .media-icon .cam-icon{ width:18px; height:18px; }
.media-icon img{ width:20px; height:20px; object-fit:cover; border-radius:4px; }
.media-btn:disabled .media-icon{ color: var(--text-muted); }
.media-label{ overflow:hidden; text-overflow:ellipsis; }
/* trạng thái: đã có → nền nhạt + ✓; cần xem lại (D38) → vàng + !; đang xử lý ảnh → nhấp nháy; lỗi ảnh → cam */
.media-badge{
  position:absolute; top:-7px; right:-7px; width:17px; height:17px; border-radius:999px;
  display:none; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; color:#fff; box-shadow:0 0 0 2px var(--surface);
}
.media-btn.captured, .media-btn.done{ background:#EAF4EC; border-color: var(--success); }
.media-btn.captured .media-badge, .media-btn.done .media-badge{ display:flex; background: var(--success); }
.media-btn.captured .media-badge::before, .media-btn.done .media-badge::before{ content:"✓"; }
.media-btn.review{ background:#FFF8DB; border-color:#E0B100; }
.media-btn.review .media-icon{ color:#B08900; }
.media-btn.review .media-badge{ display:flex; background:#E0B100; }
.media-btn.review .media-badge::before{ content:"!"; }
.media-btn:has(.photo-status.busy){ animation: pulse 1s ease-in-out infinite; }
.media-btn:has(.photo-status.warn){ border-color: var(--accent); background:#FFF4EC; }
/* chữ trạng thái vẫn giữ cho trình đọc màn hình, không hiện ra */
.media-btn .photo-status, .media-btn .media-status{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
.cam-icon{ width:26px; height:26px; }
/* Ý 12: dải ảnh đã chụp của bản nháp — nút XEM (chạm → xem lớn), tách khỏi nút chụp ở hàng trên */
.media-row:has(+ .photo-strip:not(.hidden)){ border-bottom:0; padding-bottom:6px; }
.photo-strip{
  display:flex; gap:8px; overflow-x:auto;
  background: var(--surface);
  padding:0 var(--gutter) 10px;
  border-bottom:1px solid var(--border);
}
.photo-strip.hidden{ display:none; }
.photo-strip-btn{
  display:flex; align-items:center; gap:6px; flex:none;
  padding:3px 10px 3px 3px; border:1px solid var(--border); border-radius: var(--radius-sm);
  background:#fff; color: var(--text); font-size:12px; font-weight:600; cursor:zoom-in;
}
.photo-strip-btn img{ width:44px; height:33px; object-fit:cover; border-radius:6px; display:block; background:#EEF1F6; }
.photo-strip-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

textarea{
  width:100%;
  padding:11px 12px;
  border:1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size:14px;
  resize:vertical;
  min-height:64px;
}
textarea:focus{ outline:2px solid var(--band); outline-offset:1px; }

/* Remarks: ô nhập cao đúng 2 dòng, không kéo giãn; tối đa 100 ký tự (S4-Q8) — bộ đếm bên dưới, vượt thì đỏ + chặn Save */
#inputRemarks{ line-height:1.4; resize:none; min-height:0; height: calc(2 * 1.4em + 22px + 3px); }
.remarks-count{ margin-left:auto; min-width:0; text-align:right; font-size:11px; font-weight:700; color: var(--text-muted); font-variant-numeric: tabular-nums; } /* cùng hàng nhãn Remarks, sát phải */
.remarks-count.over{ color: var(--danger); }

.form-spacer{ height:8px; }

/* ---------------------------------------------------------------- footer cố định: Record · List · Save · Cancel · Building (chủ dự án 2026-10-06: thay User)
   Nền sáng --bar-bg + đường kẻ nhẹ phía trên tách khỏi vùng nội dung (chủ dự án 2026-10-03; trước là nền xanh --band). Nút viền như
   .btn-outline (chữ/icon navy), Save cùng kiểu với bốn nút còn lại (chủ dự án 2026-10-03); tab đang mở nền xanh nhạt; huy hiệu
   giữ màu ý nghĩa cũ. */
.footer-bar{
  flex:none; z-index:20;
  display:flex; gap:6px;
  background: var(--bar-bg); border-top:1px solid var(--border);
  box-shadow: 0 -1px 3px rgba(16,24,40,.05);
  padding:8px 8px calc(8px + env(safe-area-inset-bottom));
}
.foot-btn{
  position:relative; flex:1; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  height:48px; padding:0 2px;
  background: var(--surface); color: var(--navy);
  border:1.5px solid #CBD5E4; border-radius:11px;
  font-size:12px; font-weight:700; cursor:pointer;
  transition: background .12s ease, border-color .12s ease, opacity .12s ease;
}
.foot-btn svg{ width:17px; height:17px; flex:none; }
.foot-btn:active{ transform: scale(.97); }
.foot-btn:disabled{ opacity:.45; cursor:default; }
@media (hover: hover){ .foot-btn:not(:disabled):not(.active):hover{ background:#F3F6FB; border-color:#B9C6DB; } }
.foot-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.foot-btn.active{ background:#EDF1FA; border-color: var(--band); }
.foot-btn .count-badge, .foot-badge{
  position:absolute; top:-7px; right:-4px;
  min-width:18px; height:18px; padding:0 5px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:10.5px; font-weight:800; box-shadow:0 0 0 2px var(--bar-bg);
}
.foot-btn.invalid{ outline:2px solid var(--danger) !important; outline-offset:1px; }
/* Màn List: Save/Cancel không áp dụng → mờ (hai màn cùng hiện ở màn hình rộng thì vẫn bật) */
@media (max-width: 959px){
  .footer-bar[data-tab="list"] #btnSave, .footer-bar[data-tab="list"] #btnCancel{ opacity:.35; pointer-events:none; }
}
.btn{
  border:none;
  border-radius: var(--radius-sm);
  padding:13px 18px;
  font-size:14.5px; font-weight:700;
  cursor:pointer;
  transition: opacity .12s ease, transform .12s ease;
}
.btn:active{ transform: scale(.98); }
.btn-primary{ flex:2; background: var(--accent); color:#fff; }
.btn-primary:disabled{ background:#D8DEE8; color:#98A2B3; cursor:not-allowed; }
.btn-ghost{ flex:1; background:#EEF1F6; color: var(--text-muted); }
.btn-outline{ background:#fff; border:1.5px solid var(--border); color: var(--navy); }
.btn-sm{ padding:8px 14px; font-size:13px; }

/* ---------------------------------------------------------------- list view */
/* Dòng Filter (chủ dự án 2026-10-03): một dòng chọn của form (field-table/pick-row) tràn hết chiều ngang như bảng field, chạm mở
   overlay lọc. Tên ngắn không giữ cột 112 px (dòng đứng một mình); tóm tắt điều kiện trên MỘT dòng cắt "…" (.pick-text); số khớp/tổng
   luôn thấy ở cuối. Đang lọc: icon + số tô navy. */
.list-filter{ margin:0 calc(var(--gutter) * -1) 6px; }
.list-filter .field-row{ border-bottom:none; }
.list-filter, .list-filter .field-row{ background: var(--surface); } /* cả thanh nền trắng (chủ dự án 2026-10-05) — không chia cột tên / giá trị như bảng form */
.list-filter .field-row-label{ flex-basis:auto; margin-right:8px; }
.list-filter .pick-text{ text-align:center; } /* tóm tắt điều kiện căn giữa giữa "Filter" và số khớp/tổng (chủ dự án 2026-10-05), cùng kiểu dòng Floor trong overlay */
.filter-count{ flex:none; font-size:12px; font-weight:700; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.list-filter.active .field-row-icon, .list-filter.active .filter-count{ color: var(--navy); }
.list-filter.active .pick-text{ color: var(--navy); }
/* × xoá nhanh (chủ dự án 2026-10-05): nút anh em của dòng mở overlay, cùng một thanh. Rộng 44px sát mép phải → tâm icon trùng tâm
   chevron cũ (gutter 14 + nửa chevron 8 = 22px); dòng mở overlay bỏ lề phải và chevron khi × hiện. */
.list-filter{ display:flex; align-items:stretch; }
.list-filter #listFilterRow{ flex:1; min-width:0; }
.list-filter.clearable #listFilterRow{ padding-right:0; }
.list-filter.clearable .pick-chevron{ display:none; }
.filter-clear{
  flex:none; width:44px; padding:0; border:none; background:transparent; cursor:pointer;
  display:flex; align-items:center; justify-content:center; color: var(--navy);
}
.filter-clear svg{ width:16px; height:16px; }
.filter-clear:active{ background:rgba(0,0,0,.06); }
.filter-clear:focus-visible{ outline:none; box-shadow: inset 0 0 0 2px var(--accent); }
.empty-state .btn{ margin-top:4px; }

/* Overlay lọc: ba nhóm (Floor dòng chọn gốc · Priority card chọn nhiều · Needs attention card chọn nhiều) dùng lại dòng chọn của
   form và card chọn của overlay nhập; card đang chọn = .selected (viền navy + vòng trong). 4 cột ưu tiên / 3 cột cần xử lý trên một hàng.
   Dòng Floor (chủ dự án 2026-10-05): khung viền bo góc nằm trong lề thân overlay (không tràn mép như bảng của form), cùng hàng lề card. */
.filter-floor{ margin:0; border:1px solid var(--border); border-radius: var(--radius-sm); overflow:hidden; }
.filter-floor .field-row{ border-bottom:none; }
/* Dòng đứng một mình, nhãn cố định "Floor" (chủ dự án 2026-10-05): cột tên chỉ vừa chữ (40 px thay 112 px của form) → giá trị tầng
   chiếm phần còn lại, hiện trọn "F02 · Lầu 2 / Second floor" ở màn điện thoại. Mép nền cột tên theo cùng công thức --label-col. */
.filter-floor{ --label-col: calc(var(--gutter) + 18px + 8px + 40px + 8px); }
.filter-floor .field-row-label{ flex-basis:40px; }
.filter-floor .pick-text{ text-align:center; } /* giá trị tầng căn giữa vùng giá trị (chủ dự án 2026-10-05); dài quá vẫn cắt "…" */
.filter-group + .filter-group{ margin-top:18px; }
.filter-group-title{ margin:0 0 8px; font-size:11.5px; font-weight:700; color: var(--text-muted); letter-spacing:.04em; text-transform:uppercase; }
.filter-grid{ --choice-cols: 4; }
.filter-grid-3{ --choice-cols: 3; }
/* Defect type dưới 360 px: 4 cột còn ~56 px chữ, nhãn ngắn (Bong tróc, Vết muối, Biến dạng…) và EN (Efflorescence) xuống dòng →
   3 cột (9 card = 3×3), giữ cỡ chữ và tỉ lệ card (chủ dự án 2026-10-07: nhãn một dòng, không thu chữ / bóp card). */
@media (max-width: 359px){ .filter-grid.filter-type{ --choice-cols: 3; } }
.filter-grid .choice-icon{ aspect-ratio: 5 / 4; } /* card nhỏ hơn card nhập (4 trên một hàng): ô ảnh thấp hơn vuông một chút */
/* Needs attention: icon nét (không phải ảnh) — glyph đặt theo bề ngang card ở lưới này (quy tắc chung .choice-icon svg 40% × 40%
   của icon dự phòng ở card khác giữ nguyên). Hình nét màu trung tính, đang chọn chuyển navy cùng viền card; riêng dấu ? / X / !
   (.att-mark) luôn đỏ (chủ dự án 2026-10-03). */
/* Card vuông (chủ dự án 2026-10-07): card cao tối thiểu bằng bề ngang một cột (đơn vị cqw của lưới), ô icon lấy phần còn lại phía
   trên chữ. Không dùng aspect-ratio: card có overflow:hidden nên trình duyệt không cho card tự cao thêm khi chữ xuống
   dòng (màn ~320 px: "Thiếu thông tin" hai dòng) → chữ bị cắt. Với min-height, hàng đó cao thêm và ba card vẫn cao bằng nhau.
   Glyph theo bề ngang card để mọi card cùng cỡ icon. */
.filter-attention{ container-type: inline-size; }
.filter-attention .choice-card{ min-height: calc((100cqw - (var(--choice-cols) - 1) * var(--choice-gap)) / var(--choice-cols)); }
.filter-attention .choice-icon{ aspect-ratio: auto; flex:1 1 auto; }
.filter-attention .choice-text{ flex:none; }
.filter-attention .choice-icon svg{ width:40%; height:auto; }
.filter-attention .choice-card.selected .choice-icon{ color: var(--navy); }
.filter-attention .att-mark{ color: var(--danger); }

.records{ display:flex; flex-direction:column; padding-bottom:20px; }

.empty-state{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:48px 20px; color: var(--text-muted); text-align:center;
}
.empty-icon{ width:40px; height:40px; opacity:.5; }
.empty-state p{ font-size:13.5px; line-height:1.5; margin:0; }

/* Hàng bản ghi: ảnh vuông 1:1 trái (chỉ hiển thị cắt vuông — ảnh lưu không đổi), nội dung phải, phân cách gọn trên nền chung */
.record-card{
  display:flex; gap:12px; align-items:flex-start;
  padding:10px 0;
  border-bottom:1px solid var(--border);
}
.record-thumb{
  position:relative; width:88px; height:88px; flex:none; border-radius:6px; overflow:hidden;
  background:#EEF0F3;
  display:flex; align-items:center; justify-content:center;
}
.record-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
/* chưa có ảnh nhỏ: huy hiệu loại (lớp .record-badge của màn chi tiết) + dấu trạng thái cục bộ ở góc dưới phải */
.thumb-mark{
  position:absolute; right:5px; bottom:5px; width:22px; height:22px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:#fff; color: var(--text-muted); box-shadow:0 0 0 1px var(--border);
}
.thumb-mark svg{ width:14px; height:14px; }
.thumb-mark-away{ color: var(--band); }
.record-main{ flex:1; min-width:0; }
.record-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.record-title{ font-size:14px; font-weight:800; color: var(--navy); line-height:1.3; min-width:0; }
.record-measure{ font-size:13px; font-weight:700; color: var(--text); margin-top:2px; line-height:18px; }
/* W · L · Priority: hai khối không bẻ dòng bên trong — không đủ chỗ thì cả Priority xuống hàng; khối dài hơn cả dòng mới cắt "…".
   Priority: màu danh mục (style trên phần tử), đậm như số đo, cỡ 12px như dòng meta cũ. */
.record-measure-val, .record-measure-prio{ display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:top; }
.record-measure-sep{ color: var(--text-muted); }
.record-measure-prio{ font-size:12px; }
.record-loc{ font-size:12px; color: var(--text-muted); margin-top:2px; line-height:1.35; }
.record-meta{ font-size:12px; color: var(--text-muted); margin-top:1px; line-height:1.35; }
.record-actions{ display:flex; flex-direction:column; gap:6px; flex:none; }
.icon-btn{
  width:30px; height:30px; border-radius:8px; border:1px solid var(--border);
  background:#fff; color: var(--text-muted); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.icon-btn svg{ width:15px; height:15px; }
.icon-btn.delete:hover{ background: var(--danger-bg); color: var(--danger); border-color: var(--danger-bg); }
.icon-btn.edit:hover{ background:#EFF3FA; color: var(--navy); border-color:#EFF3FA; }

/* ---------------------------------------------------------------- toast */
.toast{
  position: fixed;
  left:50%; bottom: calc(76px + env(safe-area-inset-bottom)); /* trên footer */
  transform: translateX(-50%) translateY(20px);
  background: var(--navy);
  color:#fff;
  padding:11px 18px;
  border-radius:999px;
  font-size:13.5px; font-weight:600;
  box-shadow: var(--shadow-lg);
  opacity:0;
  pointer-events:none;
  transition: opacity .2s ease, transform .2s ease;
  z-index:60;
  width:max-content;
  max-width: calc(100vw - 32px);
  text-align:center;
  line-height:1.35;
}
.toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }

/* ---------------------------------------------------------------- sync status (header pill + list banner) */
.sync-pill{
  flex:none;
  width:30px; height: var(--topbar-row-h); padding:0; /* chỉ chấm màu, không vòng nền (chủ dự án 2026-10-03); vùng chạm giữ nguyên chiều cao hàng */
  display:inline-flex; align-items:center; justify-content:center;
  background:none; border:none; border-radius:999px; cursor:pointer;
  position:relative;
}
.sync-pill:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
/* Vòng ngoài chỉ nét (không nền), màu --header-field-bg, tách chấm bằng khe 3 px (chủ dự án 2026-10-03): chấm 12 · khe 3 · nét 2 → Ø 22 px,
   vừa trong vùng chạm 30 px. Vẽ trên nút chứ không trên chấm → vòng không nhấp nháy theo chấm khi đang gửi. */
.sync-pill::before{
  content:""; position:absolute; left:50%; top:50%; width:22px; height:22px; box-sizing:border-box;
  transform: translate(-50%, -50%); border-radius:999px; border:2px solid var(--header-field-bg); pointer-events:none;
}
.sync-dot{ width:12px; height:12px; border-radius:999px; background:#98A2B3; flex:none; }
.sync-pill[data-state="online"] .sync-dot{ background:#4ADE80; }
.sync-pill[data-state="offline"] .sync-dot{ background:#F87171; }
.sync-pill[data-state="pending"] .sync-dot{ background: var(--accent); }
.sync-pill[data-state="syncing"] .sync-dot{ background:#FACC15; animation: pulse 1s ease-in-out infinite; }
@keyframes pulse{ 50%{ opacity:.3; } }

.photo-status.warn{ color:#B45309 !important; font-weight:700; }
.photo-status.busy{ color: var(--band) !important; }

/* ---------------------------------------------------------------- list: hàng bấm được + trạng thái chờ gửi / thiếu */
.record-card{ cursor:pointer; }
.record-card:active{ background:#F1F3F6; }
.record-card.pending .record-thumb{ box-shadow: inset 0 0 0 2px #F2B98D; }
.record-card.has-missing{ background: var(--missing-bg-solid); } /* bản ghi đã lưu chỉ có thể thiếu ở mức cảnh báo */
.pill{
  display:inline-flex; align-items:center; gap:4px;
  font-size:10.5px; font-weight:700; letter-spacing:.02em;
  padding:2px 7px; border-radius:999px; white-space:nowrap;
}
.pill-pending{ background:#FFE9D8; color:#A4460B; }
.pill-error{ background: var(--danger-bg); color: var(--danger); }
.pill-ok{ background: var(--success-bg); color: var(--success); }

/* ---------------------------------------------------------------- detail sheet */
.sheet-backdrop{
  position:fixed; inset:0; background:rgba(16,24,40,.45); z-index:40;
}
.sheet{
  position:fixed; inset:0; z-index:45;
  background: var(--bg);
  display:flex; flex-direction:column;
}
.sheet[hidden], .sheet-backdrop[hidden]{ display:none; }
.sheet-head{
  flex:none;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background: var(--navy); color:#fff;
  padding:12px 14px;
  padding-top: calc(12px + env(safe-area-inset-top));
}
.sheet-title-wrap{ display:flex; align-items:center; gap:10px; min-width:0; }
.sheet-title-icon{ flex:none; width:20px; height:20px; } /* icon trước tiêu đề (overlay Filter) — màu chữ header */
.sheet-title{ font-size:19px; font-weight:800; letter-spacing:.02em; font-variant-numeric: tabular-nums; }
.sheet-sub{ font-size:12px; color:#C9D6EE; margin-top:1px; }
.sheet-close{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.2); color:#fff; width:36px; height:36px; }
.sheet-close svg{ width:18px; height:18px; }
.sheet-body{ flex:1; min-height:0; overflow-y:auto; padding:14px; -webkit-overflow-scrolling: touch; }
.sheet-foot{
  flex:none; display:flex; gap:10px;
  padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  background: var(--surface); border-top:1px solid var(--border);
}
.btn-danger-ghost{ flex:1; background: var(--danger-bg); color: var(--danger); }

/* ---------------------------------------------------------------- layout marking overlay */
.sheet-layout{ background:#10131A; color:#fff; }
.sheet-layout .sheet-sub{ color:#9FB0CC; }
.layout-switcher{
  flex:none; display:flex; gap:8px; overflow-x:auto;
  padding:10px 14px 0; background:#10131A;
  -webkit-overflow-scrolling: touch;
}
.layout-switcher.hidden{ display:none; }
.layout-switcher .chip{
  flex:none; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); color:#E6ECF7;
}
.layout-switcher .chip.selected{ background: var(--accent); border-color: var(--accent); color:#fff; }
.layout-stage{
  flex:1; min-height:0; position:relative;
  overflow:hidden;
  background:#FFFFFF;              /* PL-D6: phần khung ngoài mép bản vẽ là nền trắng — đúng như LM sẽ xuất */
  touch-action:none;               /* we handle pan / pinch ourselves */
  cursor:grab;
  user-select:none; -webkit-user-select:none;
}
.layout-stage.dragging{ cursor:grabbing; }
.layout-canvas{
  position:absolute; left:0; top:0;
  transform-origin:0 0;
  will-change:transform;
}
#layoutImage{
  display:block; max-width:none;
  box-shadow:0 4px 20px rgba(0,0,0,.45);
  pointer-events:none;
  -webkit-user-drag:none;
}
.layout-hint{
  position:absolute; left:50%; top:12px; transform:translateX(-50%);
  background:rgba(16,19,26,.85); color:#fff; font-size:12.5px;
  padding:7px 14px; border-radius:999px; pointer-events:none;
  max-width: calc(100% - 28px); text-align:center;
  transition: opacity .3s ease;
}
.layout-hint.faded{ opacity:0; }
.layout-tools{
  position:absolute; right:12px; bottom:14px;
  display:flex; flex-direction:column; gap:8px;
}
.layout-tool{
  width:42px; height:42px; border-radius:999px;
  background:#fff; color: var(--navy); border:none;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.layout-tool svg{ width:20px; height:20px; }
.layout-tool:active{ transform:scale(.94); }

/* ---- map pin (Grab-style): the small dot under the head IS the marked point */
.map-pin{ position:absolute; width:0; height:0; pointer-events:none; }
.map-pin-head{
  position:absolute; display:block;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.35));
  transition: transform .15s ease;
}
.map-pin-dot{
  position:absolute; border-radius:999px;
  background:#B42318; box-shadow:0 0 0 1.5px #fff;
}
/* large pin fixed at the centre of the marking stage */
.map-pin-lg{ left:50%; top:50%; }
.map-pin-lg .map-pin-head{ width:40px; height:52px; left:-20px; top:-62px; }   /* tip ~10 px above the dot */
.map-pin-lg .map-pin-dot{ width:7px; height:7px; left:-3.5px; top:-3.5px; }
.layout-stage.dragging .map-pin-lg .map-pin-head{ transform: translateY(-8px); } /* "lift" while moving */
/* small pin for the read-only preview in the detail sheet */
.map-pin-sm .map-pin-head{ width:22px; height:29px; left:-11px; top:-34px; }
.map-pin-sm .map-pin-dot{ width:5px; height:5px; left:-2.5px; top:-2.5px; }

/* ---------------------------------------------------------------- layout mark preview (detail sheet) */
.detail-layout-stage.generated .map-pin{ display:none; }   /* the stored image already has pin + ID */
/* Defect ID under the pin's dot — same look as in the stored location image */
.map-pin-label{
  position:absolute; top:5px; left:0; transform:translateX(-50%);
  font-size:12px; font-weight:800; letter-spacing:.02em; color:#D92D20; white-space:nowrap;
  text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff;
}

.sync-state{ margin-bottom:12px; font-size:12.5px; }
.sync-state:empty{ display:none; }
.sync-state .pill{ font-size:11.5px; padding:4px 10px; }
.sync-state .sync-err{ display:block; margin-top:6px; color: var(--danger); font-size:12px; }

/* Màn chi tiết bản ghi: một hàng ô vuông (ảnh theo thứ tự ô, rồi Location), nhãn trên ô; ảnh lấp đầy ô (cover) — xem trọn khi
   chạm (trình xem lớn). Khu vực hạn chế 2 ô, chỗ thứ ba trống: hai loại bản ghi cùng bố cục. */
.detail-photos{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:8px; margin-bottom:14px; }
/* Share photos (WM-D22, phương án C): một nút dưới hàng ảnh, căn phải; chữ đổi theo bước Share → Preparing… → Send N photos */
.detail-share{ display:flex; justify-content:flex-end; margin:-6px 0 14px; }
.detail-share[hidden]{ display:none; }
.detail-share-btn{ min-height:36px; }
.detail-share-btn:disabled{ opacity:.6; }
.detail-photo{ display:flex; flex-direction:column; gap:5px; min-width:0; color: var(--text); }
.detail-photo-label{ font-size:12px; font-weight:700; color: var(--text-muted); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.detail-photo-open img, .detail-photo .empty-photo, .detail-loc .detail-layout-stage{
  width:100%; aspect-ratio:1 / 1; border-radius:10px; display:block;
  outline:1px solid var(--border); outline-offset:-1px; /* viền không chiếm chỗ: vùng hiện của ô vị trí đúng bằng khung đã lưu */
}
.detail-photo-open img{ object-fit:cover; background:#EEF1F6; }
.detail-photo .empty-photo{
  background:#F0F2F6; display:flex; align-items:center; justify-content:center; text-align:center;
  padding:6px; color: var(--text-muted); font-size:11.5px; line-height:1.3;
}
.detail-photo-open{
  display:block; width:100%; padding:0; margin:0; border:0; background:none;
  cursor:zoom-in; border-radius:10px; -webkit-tap-highlight-color: transparent;
}
.detail-photo-open:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.detail-photo-open .empty-photo{ cursor:zoom-in; } /* chưa có ảnh nhỏ trên máy: ô vẫn mở trình xem (ảnh chính tải khi mở) */

/* Header màn chi tiết: như header màn chính — mã công trình, tên · địa chỉ (chỉ xem). */
.detail-head{ justify-content:flex-start; }
.detail-bld{ min-width:0; flex:1; }
.detail-bld-code{ font-size:19px; font-weight:800; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.detail-bld-line{ display:flex; align-items:baseline; gap:6px; min-width:0; margin-top:3px; }
.detail-bld-line:has(.bld-addr:empty) .bld-name{ max-width:100%; }
/* Cụm chuyển bản ghi ‹ 2 / 3 › tối giản, cùng hàng với mã công trình (chủ dự án 2026-10-05): chỉ nét mũi tên + số, không nền/viền;
   dòng 2 (tên · địa chỉ) trọn bề ngang. Vùng chạm nút 32 × 32; hai đầu danh sách nút mờ (disabled, không quay vòng). */
.detail-bld-top{ display:flex; align-items:center; gap:10px; min-width:0; }
.detail-bld-top .detail-bld-code{ flex:1; min-width:0; }
.detail-nav{ flex:none; display:flex; align-items:center; gap:0; margin-right:-6px; }
.detail-nav[hidden]{ display:none; }
.detail-nav-pos{ min-width:40px; text-align:center; font-size:15px; font-weight:700; color:#fff; white-space:nowrap; font-variant-numeric: tabular-nums; }
.detail-nav-btn{
  width:32px; height:32px; padding:0; border:none; background:transparent; color:#fff; border-radius:8px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.detail-nav-btn svg{ width:20px; height:20px; }
.detail-nav-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.detail-nav-btn:disabled{ opacity:.3; cursor:default; }
/* Thân màn chi tiết: trình duyệt giữ cuộn dọc và phóng trang; vuốt ngang tới app (pointer events) để chuyển bản ghi. */
#detailBody{ touch-action: pan-y pinch-zoom; }
#detailTitle:focus{ outline:none; } /* nhận focus sau khi chuyển bản ghi (trình đọc màn hình đọc tiêu đề mới), không vẽ khung */
/* Dòng tiêu đề bản ghi: mã · loại · trạng thái gửi · sửa · đóng (một hàng, không cuộn theo nội dung). */
.detail-titlebar{
  flex:none; display:flex; align-items:center; gap:8px;
  padding:10px 14px; background: var(--surface); border-bottom:1px solid var(--border);
}
.detail-title{
  flex:1; min-width:0; font-size:16px; font-weight:800; line-height:1.25; color: var(--text);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.detail-title .bi{ font-weight:700; }
.detail-title .bi i{ font-weight:500; }
.detail-status{ flex:none; display:flex; }
.detail-status .pill{ font-size:11.5px; padding:4px 10px; }
/* Sửa và đóng: nút biểu tượng không viền, không nền (nền nhạt khi rê chuột như .icon-btn.edit), vùng chạm 40 px. Bút chì màu nhấn
   (thao tác chính — cùng màu nút Edit cũ ở chân trang); × trung tính. */
.detail-action{ flex:none; width:34px; height:40px; border:none; background:transparent; border-radius:10px; }
.detail-action svg{ width:21px; height:21px; }
.detail-action:hover{ background:#EFF3FA; }
.detail-action:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.detail-edit{ color: var(--accent); margin-left:4px; margin-right:-8px; }
.detail-close{ margin-right:-11px; }
/* Căn đều (chủ dự án 2026-10-03): cụm Sent · sửa · × gọn, dồn về phía ×; bút chì nằm giữa khoảng trắng từ mép pill tới dấu ×
   (pill → nút sửa 12 px, nút sửa sát nút đóng; vùng chạm 34 × 40 px). Nét × thẳng mép phải nội dung bên dưới (gutter 14 px):
   nét × cách mép nút ~11 px nên nút lấn vào lề phải 11 px. Mép phải pill luôn cùng chỗ → đúng với mọi chữ trạng thái. */
.detail-close{ color: var(--navy); }
/* Bảng màn chi tiết: đúng dòng của form (.field-table .field-row), tràn hai mép như form; chỉ xem. */
.detail-table{ margin:0 calc(-1 * var(--gutter)); }
.detail-value{ font-size:13.5px; font-weight:600; color: var(--text); line-height:1.35; padding:3px 0; word-break:break-word; white-space:pre-wrap; }
.detail-value .bi i{ opacity:1; font-weight:500; }
.detail-value.muted{ color: var(--text-muted); font-weight:500; }
/* Nút có icon bên trái nhãn (Edit, Retry, Discard). */
.btn-icon{ display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.btn-icon svg{ width:18px; height:18px; flex:none; }

/* ---------------------------------------------------------------- S5: bản vẽ — trạng thái offline (B2) */
.building-plans{ display:flex; align-items:center; gap:10px; font-size:12px; color: var(--text-muted); flex:none; }
.building-plans.hidden{ display:none; }
.building-plans-text{ min-width:0; }
.building-plans[data-state="warn"] .building-plans-text{ color:#B45309; font-weight:700; }

/* ---------------------------------------------------------------- S5: overlay đánh dấu (prototype: ghim giữa, kéo bản vẽ) */
.sheet-layout{ background:#10131A; color:#fff; }
.sheet-layout .sheet-head{ background:#10131A; }
.sheet-layout .sheet-sub{ color:#9FB0CC; }
.sheet-layout .sheet-foot{ background:#10131A; border-top:1px solid rgba(255,255,255,.08); }
.layout-switcher{
  flex:none; display:flex; gap:8px; overflow-x:auto; flex-wrap:nowrap;
  padding:10px 14px 0; background:#10131A;
  -webkit-overflow-scrolling: touch;
}
.layout-switcher.hidden{ display:none; }
.layout-switcher .chip{ flex:none; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); color:#E6ECF7; white-space:nowrap; }
.layout-switcher .chip.selected{ background: var(--accent); border-color: var(--accent); color:#fff; }
.layout-stage{
  flex:1; min-height:0; position:relative; overflow:hidden; background:#FFFFFF; /* PL-D6: ngoài mép bản vẽ = trắng như LM */
  touch-action:none;               /* tự xử lý kéo / miết hai ngón */
  cursor:grab; user-select:none; -webkit-user-select:none;
}
.layout-stage.dragging{ cursor:grabbing; }
.layout-canvas{ position:absolute; left:0; top:0; transform-origin:0 0; will-change:transform; }
/* Khung ảnh vị trí 1:1 (plan Photo_Location PL-D4; CAM-D1): tâm = ghim; kích thước do JS đặt theo cropFrame(stage); vùng ngoài khung
   phủ tối để Operator thấy đúng phần sẽ thành LM. */
.layout-frame{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  box-shadow:0 0 0 2px #FFFFFF, 0 0 0 4px #111827, 0 0 0 100vmax rgba(17,24,39,.55);
  pointer-events:none;
}
/* Viền khung trên hai ảnh của màn rà soát D38 (PL-D9): % của hộp ảnh, tính theo kích thước thật của từng phiên bản. */
.review-frame{ position:absolute; box-sizing:border-box; border:2px solid #F59E0B; pointer-events:none; }
.review-frame[hidden]{ display:none; }
#layoutImage{ display:block; max-width:none; box-shadow:0 4px 20px rgba(0,0,0,.45); pointer-events:none; -webkit-user-drag:none; }
.layout-hint{
  position:absolute; left:50%; top:12px; transform:translateX(-50%);
  background:rgba(16,19,26,.85); color:#fff; font-size:12.5px; padding:7px 14px; border-radius:999px; pointer-events:none;
  max-width: calc(100% - 28px); text-align:center; transition: opacity .3s ease;
}
.layout-hint.faded{ opacity:0; }
.layout-missing{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center;
  padding:24px; color:#E6ECF7; font-size:14px; line-height:1.45; background:#14181F;
}
.layout-missing.hidden{ display:none; }
.layout-tools{ position:absolute; right:12px; bottom:14px; display:flex; flex-direction:column; gap:8px; }
.layout-tool{
  width:42px; height:42px; border-radius:999px; background:#fff; color: var(--navy); border:none;
  box-shadow:0 2px 8px rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.layout-tool svg{ width:20px; height:20px; }
.layout-tool:active{ transform:scale(.94); }

/* ---- ghim (prototype): chấm nhỏ dưới đầu ghim CHÍNH LÀ điểm được đánh dấu */
.map-pin{ position:absolute; width:0; height:0; pointer-events:none; }
.map-pin-head{ position:absolute; display:block; filter: drop-shadow(0 3px 4px rgba(0,0,0,.35)); transition: transform .15s ease; }
.map-pin-dot{ position:absolute; border-radius:999px; background:#B42318; box-shadow:0 0 0 1.5px #fff; }
.map-pin-lg{ left:50%; top:50%; }
.map-pin-lg .map-pin-head{ width:40px; height:52px; left:-20px; top:-62px; }
.map-pin-lg .map-pin-dot{ width:7px; height:7px; left:-3.5px; top:-3.5px; }
.layout-stage.dragging .map-pin-lg .map-pin-head{ transform: translateY(-8px); }
.map-pin-sm .map-pin-head{ width:22px; height:29px; left:-11px; top:-34px; }
.map-pin-sm .map-pin-dot{ width:5px; height:5px; left:-2.5px; top:-2.5px; }
.map-pin-label{
  position:absolute; top:5px; left:0; transform:translateX(-50%);
  font-size:12px; font-weight:800; letter-spacing:.02em; color:#D92D20; white-space:nowrap;
  text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff;
}

/* ---------------------------------------------------------------- S5: bản vẽ trong màn chi tiết (B8) */
.detail-layout-stage{ position:relative; width:100%; background:#14181F; border-radius: var(--radius); overflow:hidden; min-height:48px; }
.detail-layout-stage img{ display:block; width:100%; height:auto; }
.detail-layout-stage img[hidden]{ display:none; }
/* Photo_Location PL-D14: vùng xem = khung 1:1 đã lưu; ảnh đặt tuyệt đối theo % do field.js tính (cropRect); ngoài mép bản vẽ trắng (PL-D6) */
.detail-layout-stage.cropped{ aspect-ratio:1 / 1; background:#FFFFFF; }
.detail-layout-stage.cropped img{ position:absolute; max-width:none; }
.detail-layout-empty{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:6px; color: var(--text-muted); background:#F0F2F6; font-size:11.5px; line-height:1.3; text-align:center; }
.detail-layout-empty.hidden{ display:none; }

/* ---------------------------------------------------------------- photo viewer (Ý 12: ảnh lớn theo nhóm, trên sheet chi tiết/form) */
/* Mọi cử chỉ do field.js xử lý (vuốt đổi ảnh, phóng hai ngón, kéo khi đang phóng — viewer-zoom.js): touch-action none trên cả
   trình xem để trình duyệt không giành cử chỉ; chạm nút vẫn là click. Không dùng phóng trang của trình duyệt (bị khoá khi toàn màn hình). */
.photo-viewer{
  position:fixed; inset:0; z-index:50;
  background:rgba(8,12,20,.94);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding: calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));
  cursor:zoom-out;
  touch-action:none;
  user-select:none; -webkit-user-select:none;
}
.photo-viewer[hidden]{ display:none; }
.photo-viewer-stage{
  flex:1 1 auto; min-height:0; width:100%;
  display:flex; align-items:center; justify-content:center;
  container-type:size;
  overflow:hidden; /* nội dung đang phóng không tràn lên chú thích/chấm trang */
}
/* Phóng/kéo: field.js đặt transform translate(tx, ty) scale(s) với gốc 0 0 (viewer-zoom.js) — lên khung bọc ảnh + dải (WM-D11) */
.photo-viewer-frame, .viewer-plan{ transform-origin:0 0; }
/* Khung bọc (plan Photo Stamp WM-D11): ảnh sạch + canvas thẻ/dòng mã ảnh/giờ phủ đúng vùng ảnh + canvas dải ngay dưới. Ảnh và các lớp
   vẽ không nhận chạm (WM-D4: menu nhấn giữ của trình duyệt không mở được trên file sạch) — cử chỉ đi lên trình xem như trước. */
.photo-viewer-frame{ flex:none; display:block; cursor:default; }
.photo-viewer-frame[hidden]{ display:none; }
.photo-viewer-box{ position:relative; display:block; }
.photo-viewer-stamp{ position:absolute; left:0; top:0; display:block; pointer-events:none; -webkit-touch-callout:none; }
.photo-viewer-stamp[hidden], .photo-viewer-band[hidden]{ display:none; }
.photo-viewer-band{ display:block; width:100%; pointer-events:none; -webkit-touch-callout:none; }
.photo-viewer-frame .photo-viewer-photo{ max-width:none; max-height:none; border-radius:4px 4px 0 0; pointer-events:none; -webkit-touch-callout:none; user-select:none; -webkit-user-select:none; }
.photo-viewer-stamp-note{ color:#C9D3E3; font-weight:500; }
/* Hàng thao tác chia sẻ (WM-D22) + đổi góc (WM-D7) */
.photo-viewer-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; width:100%; max-width:520px; min-height:36px; }
.photo-viewer-actions[hidden]{ display:none; }
.photo-viewer-actions.invisible{ visibility:hidden; }
.viewer-action{ flex:none; background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.35); min-height:36px; }
.viewer-action[hidden]{ display:none; }
.viewer-action:disabled{ opacity:.45; }
/* Ô ảnh nhỏ (form, dải ảnh đã chụp, chi tiết): ảnh không nhận chạm — chạm vẫn mở trình xem qua nút bọc (WM-D4, A11) */
.media-icon img, .photo-strip-btn img, .detail-photo-open img{ pointer-events:none; -webkit-touch-callout:none; }
/* Location đang phóng: ghim (phần tử 0×0 tại điểm đánh dấu) thu ngược theo --vz → mũi ghim đúng điểm, đầu/chấm/nhãn giữ cỡ trên màn */
.viewer-plan .map-pin{ transform: scale(calc(1 / var(--vz, 1))); transform-origin:0 0; }
.photo-viewer-photo{
  max-width:100%; max-height:100%;
  object-fit:contain; display:block; border-radius:4px; background:#1B2230; cursor:default;
}
.photo-viewer-photo[hidden], .viewer-plan[hidden]{ display:none; }
/* Một dòng trạng thái thay ảnh (đang tải / không có trên server / lỗi tải / offline) — không ảnh trắng */
.photo-viewer-status{ color:#E6ECF5; font-size:14px; font-weight:600; text-align:center; padding:24px 16px; cursor:default; }
.photo-viewer-status[hidden]{ display:none; }
/* Toàn màn hình trên màn cảm ứng (để xoay theo cách cầm): nền kín. Cửa sổ ngang thấp: gọn lề, chừa tai thỏ hai bên */
.photo-viewer:fullscreen{ background:#080C14; }
@media (orientation: landscape) and (max-height: 480px){
  .photo-viewer{ gap:6px; padding:6px calc(12px + env(safe-area-inset-right)) 6px calc(12px + env(safe-area-inset-left)); }
}
/* Trang Location: khung 1:1 lớn nhất vừa vùng xem — cùng hình học cropRect với màn chi tiết (PL-D14) */
.viewer-plan{ cursor:default; }
.detail-layout-stage.cropped.viewer-plan{ width:min(100%, 420px); width:min(100cqw, 100cqh); max-width:none; margin:0; }
/* Hàng điều hướng ‹ chú thích › (chủ dự án 2026-10-02 — thay chấm trang và nút hai mép màn): chung cho máy tính và điện thoại, nằm
   ngoài vùng xem (ảnh đang phóng không che nút), gần ngón cái khi cầm dọc. Hai nút ở hai đầu hàng có bề rộng cố định → không nhảy
   chỗ khi chú thích dài ngắn khác nhau giữa các item (bấm › liên tiếp không trượt). Một item: ẩn ‹ ›, chú thích đứng một mình. */
.photo-viewer-bar{ display:flex; align-items:center; justify-content:center; gap:6px; width:100%; max-width:520px; min-width:0; }
/* Chú thích một dòng, 14 px (chủ dự án 2026-10-02): tên mục cắt "…" khi dài (bối cảnh công trình/khu vực người xem đã biết), số
   trang "· n/N" luôn đủ. */
.photo-viewer-cap{
  flex:1 1 auto; min-width:0; display:flex; justify-content:center;
  color:#E6ECF5; font-size:14px; font-weight:600; white-space:nowrap; cursor:default;
}
.photo-viewer-cap-text{ min-width:0; overflow:hidden; text-overflow:ellipsis; }
.photo-viewer-cap-count{ flex:none; white-space:pre; } /* giữ khoảng trắng đầu " · n/N" */
.photo-viewer-cap-count:empty{ display:none; }
.photo-viewer-note{ color:#FFD666; font-size:12.5px; font-weight:600; text-align:center; max-width:520px; cursor:default; }
.photo-viewer-note[hidden]{ display:none; }
.photo-viewer-close{
  position:absolute; top:calc(10px + env(safe-area-inset-top)); right:10px;
  width:40px; height:40px; background:rgba(255,255,255,.14); border-color:transparent; color:#fff;
}
.photo-viewer-nav{
  flex:none; width:44px; height:44px; border-radius:999px; /* vùng chạm tối thiểu 44 px */
  background:rgba(17,24,39,.6); border:1px solid rgba(255,255,255,.35); color:#fff;
}
.photo-viewer-nav svg{ width:22px; height:22px; }
.photo-viewer-nav[hidden]{ display:none; }
.photo-viewer-nav:focus-visible, .photo-viewer-close:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
/* Khung vị trí trong màn chi tiết mở trang Location của gallery */
.detail-layout-stage.openable{ cursor:zoom-in; }
.detail-layout-stage.openable:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }



@media (min-width: 600px){
  .sheet{
    inset:auto; left:50%; top:50%; transform: translate(-50%, -50%);
    width: min(620px, calc(100vw - 48px)); max-height: calc(100dvh - 48px);
    border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-lg);
  }
  .sheet-head{ padding-top:12px; }
  .sheet-body{ padding:18px; }
  .sheet-foot{ padding:12px 18px; }
  .detail-titlebar{ padding-left:18px; padding-right:18px; } /* cùng lề thân màn chi tiết → nét × thẳng mép nội dung */
  /* Khung giữa màn hình rộng nhưng có thể thấp (máy tính, điện thoại xoay ngang ngoài PWA): card vuông theo bề ngang 620 px cao
     ~235 px, không vừa nổi một hàng khi có chân Skip/Next. Giới hạn bề ngang lưới theo chiều cao màn hình (~3 hàng nếu đủ chỗ,
     tối thiểu 240 px); màn cao thì không bị giới hạn. fitEntryGrid vẫn chọn số hàng nguyên thấy được. */
  .sheet-entry .choice-grid{ max-width: max(240px, 100vh - 366px); max-width: max(240px, 100dvh - 366px); margin:0 auto; }

  /* the layout marker needs all the room it can get, even on larger screens */
  .sheet-layout{
    inset:0; left:0; top:0; transform:none;
    width:100%; max-height:100%; border-radius:0;
  }
}

/* ==========================================================================
   Responsive: tablet
   ========================================================================== */
@media (min-width: 600px){
  .pane-scroll{ padding: 20px 24px 12px; max-width: 640px; margin:0 auto; width:100%; --gutter: 24px; }
  .footer-bar{ padding-left: max(8px, calc(50vw - 320px)); padding-right: max(8px, calc(50vw - 320px)); }
  .form-row{ flex-direction:row; gap:12px; }
  .records, .list-filter{ max-width:640px; margin-left:auto; margin-right:auto; width:100%; }
  .list-filter{ margin-bottom:6px; }
  .edit-strip{ max-width:640px; margin:0 auto; width:100%; }
}

/* ==========================================================================
   Responsive: desktop — two-pane layout, both views visible at once
   ========================================================================== */
@media (min-width: 960px){
  .topbar{ padding: 14px 32px; }
  .foot-btn[data-tab]{ display:none; } /* hai màn cùng hiện, không cần chuyển */

  .content{ max-width:1280px; margin:0 auto; width:100%; gap:24px; padding: 24px 32px; }
  .view{ display:flex !important; }
  .view#view-form{ flex:0 0 420px; }
  .view#view-list{ flex:1; min-width:0; }

  .pane-scroll{ max-width:none; margin:0; padding:0; }
  .view#view-form .pane-scroll{
    background: var(--surface);
    border:1px solid var(--border);
    border-bottom:none;
    border-radius: var(--radius) var(--radius) 0 0;
    padding:20px;
    box-shadow: var(--shadow);
    --gutter: 20px;
  }
  #view-form{ flex-direction:column; }

  .records, .list-filter{ max-width:none; margin-left:0; margin-right:0; }
  .edit-strip{ max-width:none; border-left:1px solid #F8D3B8; border-right:1px solid #F8D3B8; }
}

/* ==========================================================================
   S4 — bổ sung
   ========================================================================== */
.bi i{ font-style: italic; font-weight: inherit; opacity: .85; }


/* banner cố định dưới thanh trên — có nút X để tắt sau khi đã đọc */
.banners{ flex:none; }
.banner{ display:flex; align-items:center; gap:10px; padding:8px 8px 8px 14px; font-size:12.5px; line-height:1.4; }
.banner span{ flex:1; }
.banner-close{
  flex:none; width:28px; height:28px; padding:0; border:none; border-radius:999px;
  background:transparent; color:inherit; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.banner-close svg{ width:15px; height:15px; }
.banner-close:active{ background:rgba(0,0,0,.08); }
.banner-danger{ background: var(--danger-bg); color: var(--danger); font-weight:700; }
.banner-warn{ background:#FFF4EC; color:#8A3B0A; }

/* màn hình lần đầu chưa có danh mục (plan S4 3.2) */
.gate{ flex:1; display:flex; align-items:center; justify-content:center; padding:24px; }
.gate-card{ background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding:20px; max-width:420px; text-align:center; }
.gate-title{ font-size:16px; font-weight:800; color: var(--navy); }
.gate-text{ font-size:13.5px; color: var(--text-muted); line-height:1.5; }
.gate .btn{ width:100%; }
.view.blocked{ display:none !important; }

.field-hint{ text-transform:none; font-weight:500; letter-spacing:0; }

/* chip song ngữ có thể dài: cho xuống dòng */
.chip{ white-space:normal; text-align:left; line-height:1.3; }

/* đánh dấu trường khi Save: chặn = đỏ, thiếu (cảnh báo) = cam */
/* Trường thiếu khi Save: đỏ liền = chặn lưu; cam nét đứt = vẫn lưu được (màu + kiểu nét: hai dấu hiệu). Khung lùi 6px so với
   mép màn hình (các dòng tràn hết chiều ngang), nằm dưới nội dung, không làm xô bố cục. */
.invalid, .attention{ position:relative; isolation:isolate; }
.invalid::before, .attention::before{
  content:""; position:absolute; inset:3px 6px; z-index:-1; pointer-events:none;
  border:2px solid var(--danger); border-radius: var(--radius-sm); background: var(--missing-bg);
}
.attention::before{ border-style:dashed; border-color: var(--warn); }
/* Tín hiệu giá trị giữ sau Save (plan Area Detail AD-9): tô xanh nhạt cột giá trị của dòng, nằm dưới nội dung (như khung thiếu),
   không đổi bố cục; tự mờ dần rồi JS bỏ lớp sau 5 s (KEPT_MS). Không đỏ/cam/vàng, không nét đứt — thiếu/cảnh báo (::before) luôn thắng. */
.field-row.kept{ position:relative; isolation:isolate; }
.field-row.kept::after{
  content:""; position:absolute; inset:0 0 0 var(--label-col); z-index:-1; pointer-events:none;
  background: var(--kept-bg); animation: keptFade 5s ease-out forwards;
}
.field-row.invalid.kept::after, .field-row.attention.kept::after, .invalid .field-row.kept::after, .attention .field-row.kept::after{ content:none; }
@keyframes keptFade{ 0%, 55%{ opacity:1; } 100%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){ .field-row.kept::after{ animation:none; } } /* tint tĩnh, vẫn 5 s (JS bỏ lớp) */
/* nền xám cột tên của dòng con sẽ che lớp khung của khối bọc (vd. Crack width + Length) → trong khung thiếu bỏ nền đó */
.field-row.invalid, .field-row.attention, .invalid .field-row, .attention .field-row{ background:none; }
.media-btn.invalid, .media-btn.attention{ background: var(--missing-bg-solid); outline:2px solid var(--danger); outline-offset:2px; }
.media-btn.attention{ outline-style:dashed; outline-color: var(--warn); }
.media-btn.invalid::before, .media-btn.attention::before, .foot-btn.invalid::before{ content:none; }

/* danh sách */
.record-pills{ display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.pill-missing{ background:#FFF4EC; color:#8A3B0A; }
.record-error{ font-size:12px; color: var(--danger); margin-top:4px; word-break:break-word; }
.record-actions .btn{ padding:6px 10px; font-size:12px; }
.sync-missing{ color:#8A3B0A !important; }

/* hộp thoại ngắn: Missing N, người khảo sát + round, Building info, overlay nhập (card chọn, bàn phím số)…
   Kiểu "trồi từ đáy" chỉ áp cho màn hẹp; từ 600px trở lên dùng lại khung giữa màn hình của .sheet (mục 863) —
   nếu không, .sheet-dialog đổi `inset` nhưng để sót `transform: translate(-50%,-50%)` của .sheet ở khung rộng,
   đẩy hộp thoại lệch hẳn ra ngoài màn hình (lỗi quan sát được 2026-09-26 trên trình duyệt máy tính). */
@media (max-width: 599px){
  .sheet-dialog{ inset:auto 0 0 0; max-height:80dvh; border-radius: var(--radius) var(--radius) 0 0; box-shadow: var(--shadow-lg); }
  /* Overlay nhập: card ảnh vuông cần gần trọn chiều cao để thấy 3 hàng nguyên (fitEntryGrid đo và giới hạn thân overlay);
     chừa 16 px ở trên để vẫn nhận ra là lớp phủ trên form. Hộp thoại ngắn khác giữ 80dvh. */
  .sheet-entry{ max-height: calc(100dvh - 16px); }
}
.missing-list{ margin:0; padding-left:20px; font-size:14px; line-height:1.8; font-weight:600; }
.round-field{ margin-top:16px; }
.stepper{ display:flex; align-items:center; gap:14px; }
.stepper .icon-btn{ width:40px; height:40px; font-size:20px; font-weight:700; color: var(--navy); }
.stepper strong{ font-size:20px; min-width:28px; text-align:center; }
.info-body{ padding-bottom: calc(18px + env(safe-area-inset-bottom)); } /* không chân màn: thân tự chừa vùng an toàn dưới */

/* ---------------------------------------------------------------- S6: khu vực hạn chế, rà soát vị trí (D38), đổi công trình */
/* huy hiệu loại (ô ảnh danh sách khi chưa có ảnh nhỏ) */
.record-badge{
  width:38px; height:38px; border-radius:10px; flex:none;
  display:flex; align-items:center; justify-content:center;
  background: var(--navy); color:#fff; font-weight:800; font-size:11.5px;
}
.record-badge-lim{ background:#5B4B8A !important; font-size:11px; letter-spacing:.02em; }
.pill-review{ background:#FFF8DB; color:#7A5B00; }
.mark-review-text{ color:#7A5B00; font-weight:600; }
/* Ô Location khi dấu cần xem lại (D38): cờ nhỏ trên ô; câu đầy đủ ở dòng Location on plan và trình xem lớn. */
.detail-loc-flag{ position:absolute; left:4px; right:4px; bottom:4px; padding:2px 4px; border-radius:6px; background:#FFF8DB; color:#7A5B00; font-size:10.5px; font-weight:700; text-align:center; }
.sheet-review .sheet-body{ padding-bottom:6px; }
.review-prompt{ margin:0 0 12px; font-size:14px; font-weight:600; }
.review-plans{ display:grid; grid-template-columns:1fr; gap:12px; }
@media (min-width: 720px){ .review-plans{ grid-template-columns:1fr 1fr; } }
.review-plan{ margin:0; }
.review-plan figcaption{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color: var(--text-muted); margin:0 2px 6px; }
.review-note{ margin:12px 0 0; font-size:12.5px; color:#7A5B00; background:#FFF8DB; border-radius: var(--radius-sm); padding:8px 10px; }
.review-note.hidden{ display:none; }
.review-actions{ flex-wrap:wrap; }
.review-actions .btn{ flex:1 1 45%; }

/* ---------------------------------------------------------------- camera trong app (plan In_App_Camera §7–§8) */
/* Toàn màn hình, nền tối; vùng xem = video contain + khung tỉ lệ của ô ảnh (ngoài khung tối) — khung CHÍNH LÀ phần được lưu.
   Vùng xem chặn cử chỉ của trình duyệt (touch-action:none): miết hai ngón = zoom camera, không phóng trang. */
.cam-sheet{
  position:fixed; inset:0; z-index:60; background:#05070B; color:#F3F6FB;
  display:flex; flex-direction:column;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
.cam-sheet[hidden]{ display:none; }
.cam-head{ flex:none; display:flex; align-items:center; gap:8px; padding:8px 10px; }
.cam-close, .cam-torch{ width:44px; height:44px; background:rgba(255,255,255,.12); border-color:transparent; color:#fff; flex:none; }
.cam-torch[aria-pressed="true"]{ background:#F2C14E; color:#1B1F27; }
.cam-torch[hidden]{ display:none; }
.cam-title-wrap{ flex:1; min-width:0; text-align:center; }
.cam-title{ font-size:15px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cam-steps{ display:flex; justify-content:center; gap:10px; margin-top:3px; font-size:11.5px; color:#AEB8C8; }
.cam-steps span{ white-space:nowrap; }
.cam-steps span.done{ color:#7FD49B; }
.cam-steps span.current{ color:#fff; font-weight:700; }
/* Nhãn bước + tỉ lệ ô và mức zoom ở đầu màn camera, ngoài vùng ảnh (plan Photo Stamp v4 WM-D26 — trước đây nằm trong khung ngắm,
   sẽ đè thanh trên của thẻ ảnh); không xoay theo cách cầm. Nhãn chớp vàng khi vào bước mới như viền khung. */
.cam-tags{ display:flex; justify-content:center; align-items:center; gap:6px; margin-top:4px; }
.cam-frame-tag{
  white-space:nowrap; background:rgba(17,24,39,.72); color:#fff; border:2px solid rgba(242,193,78,.9); border-radius:6px;
  padding:0 8px; font-size:12px; line-height:18px; font-weight:700; letter-spacing:.04em;
}
.cam-frame-tag[hidden]{ display:none; }
.cam-zoom-tag{ white-space:nowrap; background:rgba(255,255,255,.14); padding:1px 10px; border-radius:999px; font-size:12px; line-height:18px; font-weight:700; }
.cam-zoom-tag[hidden]{ display:none; }
.cam-stage{ position:relative; flex:1 1 auto; min-height:0; overflow:hidden; touch-action:none; background:#000; }
.cam-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#000; }
.cam-frame{
  position:absolute; border:2px solid rgba(255,255,255,.92); border-radius:3px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.6); pointer-events:none;
}
.cam-frame[hidden]{ display:none; }
/* Thanh + logo dự án + thẻ xem trước (plan Photo Stamp WM-D12, v4 WM-D26): lớp đứng theo người cầm (rộng × cao = khung theo hướng
   người cầm), xoay quanh tâm khung theo cách cầm; ba canvas đặt đúng hộp của bộ dựng (Field vẽ). Không nhận chạm — chạm đổi góc
   nhận ở #camStage. */
.cam-stamp{ position:absolute; left:50%; top:50%; --rot:0deg; transform: translate(-50%, -50%) rotate(var(--rot)); pointer-events:none; }
.cam-stamp[data-turn="left"]{ --rot:90deg; }
.cam-stamp[data-turn="right"]{ --rot:-90deg; }
.cam-stamp[hidden]{ display:none; }
.cam-stamp canvas{ position:absolute; display:block; }
.cam-stamp canvas[hidden]{ display:none; }
/* Vào bước mới: viền khung và nhãn bước chớp vàng 4 nhịp chậm (0,6 s/nhịp, ~2,4 s) rồi đứng yên (không nhấp nháy liên tục). */
.cam-frame.pulse{ animation: camFramePulse .6s ease-in-out 4; }
.cam-frame-tag.pulse{ animation: camTagPulse .6s ease-in-out 4; }
@keyframes camFramePulse{ 0%, 45%{ border-color:#F2C14E; } 55%, 100%{ border-color:rgba(255,255,255,.92); } }
@keyframes camTagPulse{ 0%, 45%{ background:#F2C14E; color:#1B1F27; } 55%, 100%{ background:rgba(17,24,39,.72); color:#fff; } }
@media (prefers-reduced-motion: reduce){ .cam-frame.pulse, .cam-frame-tag.pulse{ animation:none; } }
.cam-msg{ position:absolute; left:16px; right:16px; bottom:16px; background:rgba(17,24,39,.9); border-radius:10px; padding:10px 12px; font-size:13.5px; text-align:center; }
.cam-msg[hidden]{ display:none; }
.cam-native{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:24px; text-align:center; background:#0B0F16; }
.cam-native[hidden]{ display:none; }
.cam-native-text{ margin:0; color:#C9D3E3; font-size:14px; }
.cam-native-open{ flex:none; min-width:200px; }
.cam-zoom{ flex:none; display:flex; justify-content:center; gap:8px; padding:8px 10px 0; }
.cam-zoom[hidden]{ display:none; }
.cam-zoom button{ min-width:46px; height:34px; border-radius:999px; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.08); color:#fff; font-weight:700; font-size:13px; }
.cam-zoom button[aria-pressed="true"]{ background:#fff; color:#111; }
.cam-foot{ flex:none; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:12px 18px 4px; }
.cam-last{ justify-self:start; width:56px; height:56px; border-radius:8px; border:2px solid rgba(255,255,255,.7); background:#222 center/cover no-repeat; padding:0; }
.cam-last[hidden]{ visibility:hidden; display:block; }
.cam-shutter{
  width:74px; height:74px; border-radius:50%; border:5px solid #fff; background:#fff; padding:0;
  box-shadow: inset 0 0 0 3px #05070B;
}
.cam-shutter:active{ transform:scale(.94); }
.cam-shutter:disabled{ opacity:.45; }
.cam-skip{ justify-self:end; color:#fff; border-color:rgba(255,255,255,.35); }
.cam-skip[hidden]{ visibility:hidden; display:inline-flex; }
.cam-foot2{ flex:none; display:flex; justify-content:center; gap:10px; padding:4px 10px 12px; }
.cam-foot2 .btn{ color:#C9D3E3; border-color:rgba(255,255,255,.25); }
.cam-restart[hidden]{ display:none; }
.cam-sheet.flash .cam-stage::after{ content:""; position:absolute; inset:0; background:#fff; opacity:.7; animation: camFlash .18s ease-out forwards; }
@keyframes camFlash{ to{ opacity:0; } }
.cam-sheet.native .cam-shutter, .cam-sheet.native .cam-zoom, .cam-sheet.native .cam-phone{ visibility:hidden; }
/* Nút phụ trên nền tối của camera: nền trong suốt, không giãn hết hàng (ghi đè .btn / .btn-ghost của form). */
.cam-sheet .btn-ghost{ flex:none; background:transparent; color:#E6ECF5; border:1px solid rgba(255,255,255,.3); }
/* Màn camera khi cửa sổ ngang (tab trình duyệt có tự xoay, iOS, máy tính bảng — PWA Android giữ dọc, CAM-D8): hình xem trước
   chiếm phần lớn, nút dồn sang phải như camera máy. */
@media (orientation: landscape){
  .cam-sheet:not([hidden]){
    display:grid; grid-template-columns:minmax(0, 1fr) auto auto; grid-template-rows:auto minmax(0, 1fr) auto;
    grid-template-areas:"head head head" "stage zoom foot" "stage zoom foot2";
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }
  .cam-head{ grid-area:head; padding:4px 10px; }
  .cam-stage{ grid-area:stage; }
  .cam-zoom{ grid-area:zoom; flex-direction:column; justify-content:center; padding:0 8px; }
  .cam-foot{ grid-area:foot; grid-template-columns:auto; grid-template-rows:1fr auto 1fr; justify-items:center; gap:10px; padding:8px 14px; }
  .cam-last{ justify-self:center; align-self:start; }
  .cam-skip{ justify-self:center; align-self:end; }
  .cam-foot2{ grid-area:foot2; flex-direction:column; align-items:center; padding:4px 10px 8px; }
}