/* Ô CHỌN CHỮ TO — dáng nút + tấm trượt đáy màn hình (đi cùng public/js/chon.js) Danh sách xổ ra của thẻ ở lại y nguyên trong biểu mẫu — trong suốt, phủ kín ô, vẫn nhận được tiêu điểm để trình duyệt còn chỉ đúng chỗ khi báo “chưa chọn” — rồi một nút vẽ đè lên trên, bấm vào thì mở tấm trượt với các thẻ chọn chữ to, dễ chạm. Dáng nút lấy đúng khuôn ô nhập của app.css (cao 48px, bo 16px, viền --line-2, chữ 16px cứng để iOS khỏi phóng to trang); thẻ lựa chọn lấy khuôn .ex-opt của entry.css (cao 60px, viền 2px). Chỉ dùng biến màu của app.css, không có màu gắn thẳng nào ngoài bóng đổ của tấm trượt. Không có JavaScript: tệp này không ăn vào đâu cả, ô chọn cũ hiện nguyên như trước. */ /* ---------- Nút thay cho ô chọn ---------- */ .oc { position: relative; display: block; min-width: 0; max-width: 100%; } /* Ô chọn có bề ngang riêng (style="width:auto") thì giữ nếp co theo nội dung như cũ */ .oc.oc-hep { display: inline-block; vertical-align: middle; } /* Ô chọn thật: vẫn “có thật” trên trang (KHÔNG display:none) để bóng nhắc “Vui lòng chọn một mục” của trình duyệt còn chỉ đúng vào ô — che bằng display:none là biểu mẫu bắt buộc không gửi được, Chrome chặn im không hiện gì. Ở đây ô phủ kín nút nên bóng nhắc chỉ đúng chỗ. */ .oc > select { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; min-width: 0; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; } .oc-nut { width: 100%; min-height: var(--h-field); padding: var(--sp12) 40px var(--sp12) var(--sp16); border-radius: var(--r-field); border: 1px solid var(--line-2); background: var(--field); color: var(--text); font: 400 max(16px, var(--fs-body))/1.4 var(--font); display: flex; align-items: center; gap: var(--sp8); text-align: left; cursor: pointer; position: relative; z-index: 1; transition: border-color .15s, box-shadow .15s; } .oc-nut:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .oc-nut[aria-expanded="true"] { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .15); } /* width:0 chứ không chỉ min-width:0 — đây là chỗ chữa tràn ngang, đọc kỹ trước khi bỏ: chữ nowrap làm bề rộng min-content của .oc-nut = đệm + CẢ CÂU dài nhất; thẻ bao ngoài là flex / grid item có min-width:auto nên nở đúng bằng câu ấy rồi đẩy cả trang tràn ngang (đo được ở /app/khu: 453px trên màn 390px). min-width:0 chỉ bỏ SÀN, không bỏ TRẦN — phải đặt width:0 rồi để flex:1 kéo nút chiếm hết bề ngang thật có; chữ vẫn cắt bằng dấu ba chấm như trước. */ .oc-gt { flex: 1; width: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* chưa chọn gì (mục có value rỗng): chữ mờ như dòng gợi ý của ô nhập */ .oc-gt.is-trong { color: var(--placeholder); } /* mũi tên: đúng hình chevron của app.css nhưng vẽ bằng CSS, để lật ngược được lúc đang mở */ .oc-nut::after { content: ''; position: absolute; right: 14px; top: 50%; width: 9px; height: 9px; flex: none; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: translateY(-70%) rotate(45deg); transition: transform .15s; } .oc-nut[aria-expanded="true"]::after { transform: translateY(-20%) rotate(225deg); } .oc-nut[disabled] { opacity: .6; cursor: not-allowed; background: var(--panel-2); } .oc-nut[disabled]::after { border-color: var(--muted); } /* gửi biểu mẫu mà còn thiếu: viền đỏ lên cho thấy ngay ô nào */ .oc-nut.is-bad { border-color: var(--danger); } /* Ô chọn nhỏ trong hàng bảng / thanh bên: nút chép lớp của ô chọn cũ nên nhỏ y như cũ, riêng cỡ chữ vẫn không xuống dưới 16px (dưới 16px iOS tự phóng to cả trang). */ .oc-nut.select-sm { min-height: 36px; padding: var(--sp4) 30px var(--sp4) var(--sp8); font-size: max(16px, var(--fs-sm)); } @media (max-width: 560px) { .oc-nut.select-sm { min-height: 44px; } } .tenant-switch .oc-nut { min-height: 36px; padding: var(--sp6) 30px var(--sp6) var(--sp8); font-size: max(16px, var(--fs-sm)); border-radius: 12px; } /* Trong hộp thoại ghi việc của nông hộ (khuôn .ex-text): cao 56px, viền 2px, bo 14px */ .oc-nut.ex-text { min-height: 56px; border-width: 2px; border-radius: 14px; padding-left: 14px; } /* ---------- Tấm trượt đáy màn hình ---------- */ .oc-dlg { border: 0; padding: 0; margin: 0; background: transparent; position: fixed; inset: 0; width: 100%; height: 100%; max-width: 100%; max-height: 100%; } .oc-dlg::backdrop { background: var(--glass-dark); backdrop-filter: blur(2px); } .oc-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 92dvh; display: flex; flex-direction: column; background: var(--panel); border-radius: 28px 28px 0 0; box-shadow: 0 -10px 40px rgba(15, 27, 61, .22); animation: oc-up .2s ease; } @keyframes oc-up { from { transform: translateY(18px); opacity: .6 } } /* Máy tính / máy tính bảng: hộp giữa màn hình, không cần tấm trượt */ @media (min-width: 720px) { .oc-sheet { left: 50%; right: auto; top: 50%; bottom: auto; transform: translate(-50%, -50%); width: min(560px, calc(100vw - 48px)); max-height: 82dvh; border-radius: 24px; animation: none; } } .oc-grab { width: 44px; height: 5px; border-radius: 999px; background: var(--line-2); margin: 8px auto 0; flex: none; } @media (min-width: 720px) { .oc-grab { display: none } } .oc-head { display: flex; align-items: center; gap: var(--sp12); padding: 12px 16px 10px; flex: none; border-bottom: 1px solid var(--line); } .oc-title { margin: 0; font-size: var(--fs-page); line-height: 1.25; flex: 1; min-width: 0; } .oc-x { width: 48px; height: 48px; flex: none; border-radius: 50%; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text); font-size: var(--fs-h2); cursor: pointer; display: grid; place-items: center; } .oc-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Ô tìm nằm ngoài vùng cuộn: danh sách dài cuộn mấy thì ô tìm vẫn ở đó */ .oc-timbox { padding: 12px 16px 0; flex: none; } .oc-tim { width: 100%; min-height: var(--h-field); padding: var(--sp12) var(--sp16); border-radius: var(--r-field); border: 1px solid var(--line-2); background: var(--field); color: var(--text); font: 400 max(16px, var(--fs-body))/1.4 var(--font); } .oc-tim:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .15); } .oc-body { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; flex: 1; } .oc-opts { display: grid; gap: var(--sp8); } /* Mọi chữ trong hộp phải ÍT NHẤT bằng cỡ thân bài (bạn chọn cỡ chữ nào thì theo cỡ ấy): var(--fs-sm) để trơ thì tụt xuống dưới thân bài ở cả bốn mục cỡ chữ (12,32px so với 14,24px ở mục “Nhỏ”). */ .oc-nhom { margin: 14px 0 2px; font-size: max(16px, var(--fs-body)); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .oc-nhom:first-child { margin-top: 0; } /* Thẻ lựa chọn: khuôn .ex-opt của hộp thoại ghi việc — cao 60px, viền 2px, chữ thân bài, xuống dòng được (mục “Hiện cả vùng quanh khu (khoảng 200 m)” dài hơn một dòng). */ .oc-opt { display: flex; align-items: center; gap: var(--sp12); min-height: 60px; padding: 10px 14px; border: 2px solid var(--line-2); border-radius: 16px; background: var(--panel); cursor: pointer; } .oc-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; } .oc-opt-in { flex: 1; min-width: 0; } .oc-opt-in b { display: block; font-weight: 500; font-size: max(16px, var(--fs-body)); } .oc-opt-in small { display: block; margin-top: 2px; color: var(--muted); font-size: max(16px, var(--fs-body)); } /* Ô tìm đã lọc ra mục nào thì mục ấy PHẢI biến mất. Quy tắc .oc-opt { display: flex } ở trên là quy tắc của tác giả nên nó thắng [hidden]{display:none} của trình duyệt: thiếu dòng này thì loc() (chon.js) đặt hidden mà thẻ vẫn vẽ ra đủ, gõ tìm không ẩn được mục nào, mà mũi tên ↑↓ cũng đi thẳng vào mấy mục vừa bị lọc (trình duyệt chỉ bỏ qua ô tròn thật sự bị ẩn). */ .oc-opt[hidden] { display: none; } .oc-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); } .oc-opt:has(input:checked)::after { content: '✓'; color: var(--accent-text); font-weight: 700; font-size: var(--fs-h2); flex: none; } .oc-opt:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; } /* Mục bị tắt (