/* Dự án Phần 1 — hộp Chuyển dự án / Chọn đơn / Sửa thông tin (du-an-transfer.js), bản đồ ghim (xe-map.js createPinMap), khối và nhãn Dự án ở
   Điều phối (dieu-phoi.js). Dùng biến màu của hub.css; chữ theo var(--font) của trang (không đặt phông riêng), số tabular-nums. Mọi lớp: da-.
   index.html nạp tệp này ở mọi trang, sau du-an.css (trang Dự án cũng có .da-head, .da-tabs…) → MỌI luật nằm dưới lớp gốc của phần nó tô:
   .da-modal = hộp (.modal của wideDialog; hộp lý do của trang Dự án cũng mang lớp này), .dp-modal / .dp-page = hộp chi tiết đơn / trang
   Điều phối (test/du-an-transfer-ui.test.mjs kiểm từng bộ chọn). Nền hộp trên điện thoại (.modal-backdrop.da-backdrop: không lề, hộp sát mép
   trên) là luật chung của mọi hộp .da-modal ở du-an.css. */

/* ---------------------------------------------------------------- hộp thoại */
.da-modal.modal-wide { max-width: 880px; }
.da-modal:focus { outline: none; }
.da-modal .da-head { padding: 10px 12px; margin-bottom: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; font-weight: 600; overflow-wrap: anywhere; }
.da-modal .da-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.da-modal .da-tab { flex: 1 1 140px; padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface); color: var(--dim); font-weight: 600; cursor: pointer; }
.da-modal .da-tab:hover:not(:disabled) { border-color: var(--primary); color: var(--primary-ink); }
.da-modal .da-tab.on { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-ink); box-shadow: inset 0 0 0 1px var(--primary); }
.da-modal .da-tab:disabled { opacity: 0.5; cursor: not-allowed; }
.da-modal .da-tab-note { margin: 0 0 8px; }
.da-modal .da-tabs + [data-panel], .da-modal .da-tab-note + [data-panel] { margin-top: 12px; }
.da-modal .da-card { margin: 0 0 12px; padding: 12px 14px 2px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.da-modal .da-card h4 { margin: 0 0 10px; font-size: 14px; }
.da-modal .da-field-hint { font-size: 12px; color: var(--faint); line-height: 1.45; overflow-wrap: anywhere; }
.da-modal .da-grow { resize: none; overflow: hidden; line-height: 1.45; }
.da-modal .da-short { margin: -6px 0 12px; font-size: 12.5px; color: var(--faint); overflow-wrap: anywhere; }
.da-modal .da-short b { color: var(--ink); }
.da-modal .da-linkbtn { padding: 0 2px; border: 0; background: none; color: var(--primary-ink); text-decoration: underline; cursor: pointer; }
.da-modal .da-ro { padding: 2px 0 4px; overflow-wrap: anywhere; }
.da-modal .da-start input { max-width: 280px; }

/* ghim vị trí */
.da-modal .da-pin-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.da-modal .da-pin-tools .input { flex: 1 1 240px; min-width: 0; }
.da-modal .da-pin-line { margin: 6px 0 0; color: var(--dim); overflow-wrap: anywhere; }
.da-modal .da-pin-ok { font-weight: 600; color: var(--good-ink); }
.da-modal .da-pin-none { color: var(--warn-ink); }
.da-modal .da-paste-note { margin: 6px 0 0; color: var(--warn-ink); overflow-wrap: anywhere; }
/* Bản đồ (xe-map.js .xm): khung cố định, lớp riêng (isolation) để nút / lớp của MapLibre không đè thanh đầu / thanh nút dính của hộp. */
.da-modal .xm.xm-pin { height: 260px; border: 1px solid var(--border); border-radius: 10px; isolation: isolate; }
.da-modal .xm-pinmark { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 2; }
.da-modal .xm-pinmark i { position: absolute; left: -13px; top: -31px; width: 26px; height: 26px; border-radius: 50% 50% 50% 0; background: var(--bad); border: 3px solid #fff; transform: rotate(-45deg); box-shadow: 0 2px 6px rgba(15, 23, 42, 0.4); }
.da-modal .xm-pinmark i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #fff; }

/* thẻ người (KTS chọn 1, Sale chỉ đọc) */
.da-modal .da-kts-q { margin-bottom: 8px; }
.da-modal .da-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 8px; max-height: 336px; overflow-y: auto; overscroll-behavior: contain; padding: 1px; }
.da-modal .da-person { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 11px; border: 1px solid var(--border-strong); border-radius: 11px; background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; }
.da-modal .da-person:hover:not(.is-static) { border-color: var(--primary); }
.da-modal .da-person.on { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); }
.da-modal .da-person.is-static { cursor: default; background: var(--surface-2); }
.da-modal .da-avatar { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--info-soft); color: var(--info-ink); font-size: 12.5px; font-weight: 700; }
.da-modal .da-avatar-sale { background: var(--warn-soft); color: var(--warn-ink); }
.da-modal .da-person-main { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.da-modal .da-person-main b { overflow-wrap: anywhere; }
.da-modal .da-person-main small { font-size: 12px; color: var(--faint); }
.da-modal .da-person-on { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--primary-ink); }
.da-modal .da-people-empty { grid-column: 1 / -1; margin: 0; }
.da-modal .da-no-sale { margin: 2px 0 10px; color: var(--dim); }
.da-modal .da-no-kts { margin: 0 0 10px; }

/* Vào dự án có sẵn */
.da-modal .da-warn { margin: 0 0 8px; overflow-wrap: anywhere; }
.da-modal .da-info { margin: 4px 0 0; }
.da-modal .da-reason { overflow-wrap: anywhere; }

/* thanh nút: dòng "Còn thiếu: …" bên trái nút khi nút còn khóa */
.da-modal .da-actions { align-items: center; }
.da-modal .da-missing { flex: 1 1 260px; margin: 0; font-size: 12.5px; color: var(--warn-ink); overflow-wrap: anywhere; }
.da-modal .da-missing:empty { display: none; }

/* Chọn đơn */
.da-modal .da-pick-q { width: 100%; margin-bottom: 8px; }
.da-modal .da-pick-hint { margin: 0 0 8px; }
.da-modal .da-pick-box { min-height: 120px; }
.da-modal .da-pick-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.da-modal .da-pick { display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(0, 1.6fr) auto; align-items: center; gap: 4px 14px; width: 100%; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; }
.da-modal .da-pick:hover, .da-modal .da-pick:focus-visible { border-color: var(--primary); background: #f5f9ff; }
.da-modal .da-pick-main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.da-modal .da-pick-cust { display: flex; flex-direction: column; min-width: 0; }
.da-modal .da-pick-cust b { font-weight: 600; overflow-wrap: anywhere; }
.da-modal .da-pick-cust small, .da-modal .da-pick-num small { font-size: 12px; color: var(--faint); }
.da-modal .da-pick-num { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; }

/* ---------------------------------------------------------------- Điều phối (dieu-phoi.js): khối trong chi tiết đơn, nhãn thẻ, dòng phụ bảng */
.dp-modal .da-order-project { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 14px 0 0; padding: 11px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); font-size: 13.5px; }
.dp-modal .da-order-project.is-offer { border: 1.5px dashed #93c5fd; background: #f5f9ff; }
.dp-modal .da-op-main { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.dp-modal .da-op-main .sub { margin-top: 3px; font-size: 12.5px; }
.dp-page .badge.da-tag { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.dp-page .da-sub { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- điện thoại: hộp gần đầy màn hình, thanh đầu / thanh nút dính */
@media (max-width: 700px) {
  .da-modal, .da-modal.modal-wide { max-width: none; min-height: 100%; border-radius: 0; }
  .da-modal .modal-head { position: sticky; top: 0; z-index: 5; padding: 12px 16px 10px; background: var(--surface); border-bottom: 1px solid var(--border); }
  .da-modal .modal-head h3 { font-size: 16px; overflow-wrap: anywhere; }
  .da-modal .modal-body { padding: 12px 16px 20px; }
  .da-modal input, .da-modal select, .da-modal textarea { font-size: 16px; } /* iPhone không tự phóng to khi chạm ô nhập */
  .da-modal .modal-actions { position: sticky; bottom: 0; z-index: 4; margin: 14px -16px -20px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--border); }
  .da-modal .modal-actions .btn { flex: 1 1 auto; }
  .da-modal .form-error { scroll-margin-bottom: 150px; } /* báo lỗi ngay trên thanh nút dính: cuộn tới thì không bị thanh che */
  .da-modal .da-missing { flex-basis: 100%; }
  .da-modal .xm.xm-pin { height: 220px; }
  .da-modal .da-card { padding: 10px 12px 2px; }
  .da-modal .da-people { grid-template-columns: minmax(0, 1fr); max-height: none; }
  .da-modal .da-person, .da-modal .da-pick { min-height: 48px; }
  .da-modal .da-pick { grid-template-columns: minmax(0, 1fr); }
  .da-modal .da-pick-num { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 10px; }
  .dp-modal .da-order-project .btn { flex: 1 1 auto; }
}